/* =============================================
   BTP CONSULTING - Responsive Stylesheet
   ============================================= */

/* =============================================
   Global Mobile Overflow Fix
   ============================================= */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* Prevent horizontal scroll on all devices */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Mobile-specific overflow fixes */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Containers - prevent overflow */
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden;
    }

    /* Sections - full width without overflow */
    section,
    .section,
    header,
    footer,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Grids - prevent overflow */
    .hero-stats,
    .about-grid-new,
    .metiers-grid,
    .agrements-grid,
    .values-grid,
    .services-grid,
    .projects-grid,
    .contact-grid,
    .footer-grid {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Images - constrain to container */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Tables - allow horizontal scroll */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Decorative elements - hide or constrain */
    .hero-shapes,
    .hero-particles,
    .hero-grid,
    .page-header-glow,
    .cta-glow {
        max-width: 100vw;
        overflow: hidden;
    }

    /* Fix for elements with negative margins */
    [class*="row"],
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Pre and code blocks */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hero section - prevent overflow */
    .hero,
    .hero-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero h1,
    .hero-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Cards - full width */
    .card,
    .project-card,
    .service-card,
    .metier-card,
    .agrement-card,
    .value-card,
    .job-card {
        max-width: 100%;
    }

    /* Buttons - prevent overflow */
    .btn,
    button {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Form elements */
    input,
    textarea,
    select {
        max-width: 100%;
    }

    /* Nav menu */
    .nav-menu {
        max-width: 100vw;
    }

    /* Footer */
    .footer {
        overflow-x: hidden;
    }

    /* Fix modal overflow */
    .modal,
    .metier-modal,
    .job-modal-overlay {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .modal-content,
    .metier-modal-content,
    .job-modal {
        max-width: calc(100vw - 20px);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6, p, span, a, li {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Extra Large Devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
    .container {
        max-width: 1800px;
        padding: 0 80px;
    }

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

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

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

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

    .hero-content {
        max-width: 1000px;
    }

    .hero-title {
        font-size: 4rem;
    }

    .section-title {
        font-size: 3.25rem;
    }
}

/* Large Desktop (1400px to 1599px) */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .container {
        max-width: 1600px;
        padding: 0 60px;
    }

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

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

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

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

/* Large Devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .container {
        max-width: 1100px;
        padding: 0 40px;
    }

    /* Hero Content - Slight adjustment for narrower screens */
    .hero-content {
        padding-top: 120px;
    }

    .hero-title {
        font-size: 3rem;
    }

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

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

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

/* Medium Devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    :root {
        --header-height: 70px;
    }

    .container {
        max-width: 720px;
    }

    /* Logo */
    .logo img {
        height: 120px;
    }

    .navbar.scrolled .logo img {
        height: 100px;
    }

    /* Hero Content - Adjust for smaller logo */
    .hero-content {
        padding-top: 100px;
    }

    /* Navigation */
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height)); /* Dynamic viewport height for mobile browsers */
        max-height: calc(100vh - var(--header-height));
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: var(--spacing-xl);
        padding-bottom: 20px; /* Safe area for bottom content */
        background-color: var(--white);
        gap: 0;
        transition: left var(--transition-base);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: var(--spacing-md);
        font-size: 1.125rem;
    }

    .nav-link::after {
        display: none;
    }

    .btn-devis {
        margin: var(--spacing-md);
        display: inline-block;
    }

    .nav-toggle {
        display: block;
    }

    /* Hero */
    .hero-title {
        font-size: 2.5rem;
    }

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

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    /* Projects */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why Us */
    .why-us-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .why-us-image {
        order: -1;
    }

    /* Service Detail */
    .service-detail-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .service-detail-content.reverse {
        direction: ltr;
    }

    .service-detail-image {
        order: -1;
    }

    /* Process */
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-step::after {
        display: none;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .about-image {
        order: -1;
    }

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

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Modal */
    .modal-body {
        grid-template-columns: 1fr;
    }

    .modal-gallery {
        height: 250px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Devis */
    .services-checklist {
        grid-template-columns: 1fr;
    }

    .form-steps {
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
    }

    .step-label {
        white-space: nowrap;
    }
}

/* Small Devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .container {
        max-width: 540px;
    }

    /* Logo */
    .logo img {
        height: 100px;
    }

    .navbar.scrolled .logo img {
        height: 80px;
    }

    .footer-about .logo img {
        height: 100px;
    }

    /* Hero Content - Adjust for smaller logo */
    .hero-content {
        padding-top: 80px;
    }

    /* Typography */
    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: calc(var(--header-height) + var(--spacing-xxl)) 0 var(--spacing-xxl);
    }

    .hero-title {
        font-size: 2rem;
    }

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

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Hero Tagline Button */
    .tagline-btn {
        padding: 15px 25px;
        font-size: 1rem;
    }

    /* Stats */
    .stat-number {
        font-size: 2.5rem;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Projects */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .projects-filter .container {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-buttons {
        justify-content: center;
    }

    .view-toggle {
        justify-content: center;
    }

    /* CTA */
    .cta-content h2 {
        font-size: 1.75rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    /* Section CTA */
    .section-cta {
        flex-direction: column;
    }

    .section-cta .btn {
        width: 100%;
    }

    /* Page Header */
    .page-header h1 {
        font-size: 2rem;
    }

    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
    }

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

    /* Cert */
    .cert-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-minimal .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Devis Form */
    .devis-form {
        padding: var(--spacing-lg);
    }

    .form-steps::before {
        display: none;
    }

    .step-label {
        display: none;
    }

    .form-navigation {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .form-navigation .btn {
        width: 100%;
    }

    /* Modal */
    .modal-details {
        grid-template-columns: 1fr;
    }
}

/* Extra Small Devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    :root {
        --spacing-xxl: 3rem;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    /* Logo */
    .logo img {
        height: 80px;
    }

    .navbar.scrolled .logo img {
        height: 70px;
    }

    .footer-about .logo img {
        height: 80px;
    }

    /* Hero Content - Adjust for smaller logo */
    .hero-content {
        padding-top: 70px;
    }

    /* Hero */
    .hero-title {
        font-size: 1.75rem;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .stat-number {
        font-size: 2rem;
    }

    /* Service Card */
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Project Card */
    .project-image {
        height: 180px;
    }

    /* About */
    .about-content h2 {
        font-size: 2rem;
    }

    .about-content .lead {
        font-size: 1.125rem;
    }

    /* Contact */
    .info-item {
        flex-direction: column;
        text-align: center;
    }

    .info-icon {
        margin: 0 auto;
    }

    /* Hero Tagline Button */
    .tagline-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        flex-direction: column;
        gap: 10px;
    }

    /* Devis */
    .devis-intro h2 {
        font-size: 1.5rem;
    }

    .service-check-group h4 {
        font-size: 0.9375rem;
    }
}

/* Ultra Small Devices (very small phones, less than 360px) */
@media (max-width: 359.98px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .logo img {
        height: 60px;
    }

    .navbar.scrolled .logo img {
        height: 55px;
    }

    .hero-content {
        padding-top: 60px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

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

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 12px 16px;
        font-size: 0.875rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }
}

/* =============================================
   Mobile Touch Optimizations
   ============================================= */

/* Ensure minimum touch target size (44x44px) */
@media (max-width: 991.98px) {
    .btn,
    .nav-link,
    .filter-btn,
    .view-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Améliorer les liens et boutons pour le tactile */
    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .filter-btn,
    .view-btn {
        padding: 12px 16px;
    }

    /* Améliorer l'espacement des cartes de service */
    .service-card {
        padding: var(--spacing-lg);
    }

    /* Améliorer la taille des checkboxes et radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        cursor: pointer;
    }

    /* Améliorer les champs de formulaire */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px; /* Empêche le zoom iOS */
        padding: 12px 16px;
    }

    /* Labels cliquables */
    .service-check label {
        padding: 14px 16px;
        cursor: pointer;
    }

    /* Contact info items */
    .info-item {
        padding: var(--spacing-md);
    }

    /* Améliorer les boutons de navigation */
    .btn-prev,
    .btn-next,
    .btn-submit {
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* Améliorer le toggle du menu */
    .nav-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Scroll indicator */
    .scroll-arrow {
        width: 50px;
        height: 50px;
    }
}

/* =============================================
   Mobile Navigation Improvements
   ============================================= */
@media (max-width: 991.98px) {
    /* Navigation dropdown amélioré pour mobile */
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gray-100);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item:hover .nav-dropdown,
    .nav-item.active .nav-dropdown {
        max-height: 500px;
    }

    .nav-dropdown a {
        padding: 12px 24px 12px 40px;
        border-bottom: 1px solid var(--gray-200);
    }

    /* Menu hamburger animation */
    .nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--dark-color);
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Bloquer le scroll du body quand menu ouvert */
    body.menu-open {
        overflow: hidden;
    }
}

/* =============================================
   Mobile Modal Improvements
   ============================================= */
@media (max-width: 767.98px) {
    .modal-container {
        padding: 0;
    }

    .modal-content {
        max-height: 100vh;
        max-height: 100dvh; /* Dynamic viewport height for mobile browsers */
        max-width: 100%;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
    }

    .modal-gallery {
        height: 200px;
    }

    .modal-close {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        width: 44px;
        height: 44px;
    }
}

/* =============================================
   Mobile Tables (scroll horizontal)
   ============================================= */
@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }

    /* Indicateur de scroll */
    .table-responsive::after {
        content: '← Glissez pour voir plus →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: var(--gray-500);
        padding: var(--spacing-sm);
    }
}

/* =============================================
   Mobile Forms Improvements
   ============================================= */
@media (max-width: 767.98px) {
    /* Steps de formulaire devis */
    .form-steps {
        gap: 0;
        justify-content: space-between;
    }

    .form-step {
        flex: 1;
        text-align: center;
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    /* Checkbox service amélioré */
    .service-check {
        margin-bottom: var(--spacing-sm);
    }

    .service-check label {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: var(--gray-50);
        border-radius: var(--radius-md);
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }

    .service-check input:checked + label {
        border-color: var(--orange-primary);
        background: var(--orange-light);
    }

    /* Textarea pleine largeur */
    textarea.form-control {
        min-height: 120px;
    }

    /* File upload zone */
    .file-upload-zone {
        padding: var(--spacing-lg);
    }
}

/* =============================================
   Mobile Footer Improvements
   ============================================= */
@media (max-width: 575.98px) {
    .footer {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }

    .footer-grid {
        gap: var(--spacing-lg);
    }

    .footer-column {
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-column:last-child {
        border-bottom: none;
    }

    .footer-bottom {
        padding-top: var(--spacing-md);
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =============================================
   Landscape Mode Adjustments
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: var(--spacing-md);
    }

    .nav-item {
        width: auto;
    }
}

/* =============================================
   Services Page Mobile Optimizations
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Page Header */
    .page-header {
        padding: 120px 0 60px;
    }

    .page-header h1 {
        font-size: 2.5rem;
    }

    .page-badge {
        font-size: 0.75rem;
        padding: 6px 14px;
    }

    /* Service Detail Grid */
    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-detail-grid.reverse {
        direction: ltr;
    }

    .service-detail-image {
        order: -1;
    }

    .service-detail-header {
        gap: 15px;
    }

    .service-detail-icon {
        width: 60px;
        height: 60px;
    }

    .service-detail-icon i {
        font-size: 1.5rem;
    }

    .service-detail-content h2 {
        font-size: 1.75rem;
    }

    /* Process Grid */
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .process-step::after {
        display: none;
    }

    /* CTA Section */
    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Métiers Grid */
    .metiers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .metier-card {
        padding: 20px;
    }

    .metier-card h3 {
        font-size: 1rem;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Page Header */
    .page-header {
        padding: 100px 0 50px;
    }

    .page-header h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .page-badge {
        font-size: 0.7rem;
        padding: 5px 12px;
        margin-bottom: 12px;
    }

    .breadcrumb {
        font-size: 0.8rem;
        gap: 8px;
    }

    .breadcrumb i {
        font-size: 0.6rem;
    }

    /* Section Headers */
    .section-header {
        margin-bottom: 30px;
    }

    .section-badge {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Service Detail */
    .service-detail-grid {
        gap: 30px;
    }

    .service-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .service-detail-icon {
        width: 55px;
        height: 55px;
    }

    .service-detail-icon i {
        font-size: 1.3rem;
    }

    .service-detail-content h2 {
        font-size: 1.5rem;
    }

    .service-detail-desc {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .service-features {
        gap: 12px;
    }

    .service-features li {
        font-size: 0.9rem;
        gap: 10px;
    }

    .service-features li i {
        font-size: 1rem;
    }

    .service-detail-image .image-wrapper img {
        border-radius: 12px;
    }

    /* Process Grid */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-step {
        padding: 20px;
    }

    .process-number {
        font-size: 2rem;
    }

    .process-content h3 {
        font-size: 1.1rem;
    }

    .process-content p {
        font-size: 0.9rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 60px 0;
    }

    .cta-content h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .cta-content p {
        font-size: 0.95rem;
    }

    .cta-buttons .btn {
        padding: 14px 24px;
        font-size: 0.9rem;
    }

    /* Métiers Grid */
    .metiers-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .metier-card {
        padding: 18px;
    }

    .metier-icon {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .metier-card h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .metier-card ul {
        font-size: 0.85rem;
    }

    .metier-card ul li {
        padding: 6px 0;
    }

    .metier-card-link {
        font-size: 0.85rem;
        margin-top: 12px;
    }

    /* Métier Modal */
    .metier-modal-content {
        width: 95%;
        max-width: 100%;
        padding: 20px;
        margin: 10px;
        max-height: 90vh;
        border-radius: 12px;
    }

    .metier-modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .metier-modal-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .metier-modal-title {
        font-size: 1.25rem;
        margin-bottom: 15px;
    }

    .metier-modal-body {
        font-size: 0.9rem;
    }

    .metier-modal-body h4 {
        font-size: 1rem;
        margin: 15px 0 10px;
    }

    .metier-modal-body ul li {
        font-size: 0.85rem;
        padding: 6px 0;
    }

    .metier-modal-cta {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
    }

    /* Footer Grid sur services */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-brand img {
        height: 60px;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-column h4 {
        margin-bottom: 15px;
    }

    .footer-links li {
        margin-bottom: 8px;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Page Header */
    .page-header {
        padding: 90px 0 40px;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    .page-badge {
        font-size: 0.65rem;
    }

    /* Section Headers */
    .section-title {
        font-size: 1.35rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    /* Service Detail */
    .service-detail-icon {
        width: 48px;
        height: 48px;
    }

    .service-detail-icon i {
        font-size: 1.1rem;
    }

    .service-detail-content h2 {
        font-size: 1.3rem;
    }

    .service-detail-desc {
        font-size: 0.9rem;
    }

    .service-features li {
        font-size: 0.85rem;
    }

    /* Process */
    .process-step {
        padding: 16px;
    }

    .process-number {
        font-size: 1.75rem;
    }

    .process-content h3 {
        font-size: 1rem;
    }

    .process-content p {
        font-size: 0.85rem;
    }

    /* CTA */
    .cta-content h2 {
        font-size: 1.3rem;
    }

    .cta-content p {
        font-size: 0.9rem;
    }

    /* Métiers */
    .metier-card {
        padding: 15px;
    }

    .metier-icon {
        font-size: 1.75rem;
    }

    .metier-card h3 {
        font-size: 0.95rem;
    }

    .metier-card ul li {
        font-size: 0.8rem;
        padding: 5px 0;
    }

    /* Modal */
    .metier-modal-content {
        padding: 16px;
        margin: 5px;
    }

    .metier-modal-title {
        font-size: 1.1rem;
    }

    .metier-modal-body {
        font-size: 0.85rem;
    }

    .metier-modal-body h4 {
        font-size: 0.95rem;
    }

    /* Footer */
    .footer-brand img {
        height: 50px;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }
}

/* Ultra petit écran (max 359px) */
@media (max-width: 359px) {
    .page-header h1 {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .service-detail-content h2 {
        font-size: 1.15rem;
    }

    .cta-content h2 {
        font-size: 1.15rem;
    }

    .metier-card h3 {
        font-size: 0.85rem;
    }

    .metier-modal-title {
        font-size: 1rem;
    }
}

/* =============================================
   Contact Page Mobile Optimizations
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Contact Form */
    .contact-form-wrapper h2 {
        font-size: 1.75rem;
    }

    .contact-form-card {
        padding: 35px;
    }

    /* Info Card */
    .contact-info-card {
        padding: 35px;
    }

    .contact-info-card h3 {
        font-size: 1.75rem;
    }

    .info-card {
        padding: 30px;
    }

    .info-card h3 {
        font-size: 1.5rem;
    }

    /* Info Items */
    .info-item {
        gap: 15px;
    }

    .info-icon {
        width: 45px;
        height: 45px;
    }

    .info-icon i {
        font-size: 1.1rem;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Contact Section */
    .contact-grid {
        gap: 30px;
    }

    /* Contact Form Wrapper */
    .contact-form-wrapper {
        padding: 0;
    }

    .contact-form-wrapper h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .contact-form-wrapper > p {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    /* Contact Form Card */
    .contact-form-card {
        padding: 25px;
        border-radius: 16px;
    }

    .contact-form-card h3 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Form Rows */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Form Groups */
    .form-group {
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px; /* Prevent iOS zoom */
        border-radius: 10px;
    }

    .form-group textarea {
        min-height: 120px;
    }

    /* Checkbox */
    .form-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .form-checkbox input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        margin-top: 2px;
        flex-shrink: 0;
        cursor: pointer;
    }

    .form-checkbox label {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Submit Button */
    .btn-block {
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* Form Success */
    .form-success {
        padding: 30px 20px;
        text-align: center;
    }

    .form-success i {
        font-size: 3rem;
    }

    .form-success h3 {
        font-size: 1.25rem;
    }

    .form-success p {
        font-size: 0.9rem;
    }

    /* Contact Info Card */
    .contact-info-card {
        padding: 25px;
        border-radius: 16px;
    }

    .contact-info-card h3 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Info Card */
    .info-card {
        padding: 25px;
        border-radius: 16px;
    }

    .info-card h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    /* Info Items */
    .info-item,
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .info-item:last-of-type,
    .contact-item:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .info-icon,
    .contact-item-icon {
        width: 45px;
        height: 45px;
    }

    .info-icon i,
    .contact-item-icon i {
        font-size: 1.1rem;
    }

    .info-content h4,
    .contact-item-content h4 {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .info-content p,
    .info-content a,
    .contact-item-content p,
    .contact-item-content a {
        font-size: 0.9rem;
    }

    /* Contact Legal */
    .contact-legal {
        margin-top: 25px;
        padding-top: 20px;
    }

    .contact-legal h4 {
        font-size: 0.95rem;
    }

    .contact-legal p {
        font-size: 0.85rem;
    }

    /* Social Card */
    .social-card {
        margin-top: 20px;
        padding: 20px;
        text-align: center;
    }

    .social-card h4 {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .social-links {
        justify-content: center;
        gap: 15px;
    }

    .social-link {
        width: 44px;
        height: 44px;
    }

    .social-link i {
        font-size: 1.1rem;
    }

    /* Google Maps Button */
    .info-card .btn-block,
    .contact-info .btn-block {
        margin-top: 20px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Contact Form */
    .contact-form-wrapper h2 {
        font-size: 1.35rem;
    }

    .contact-form-card,
    .contact-info-card,
    .info-card {
        padding: 20px;
        border-radius: 14px;
    }

    .contact-form-card h3,
    .contact-info-card h3 {
        font-size: 1.25rem;
    }

    .info-card h3 {
        font-size: 1.2rem;
    }

    /* Form */
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 11px 12px;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-checkbox label {
        font-size: 0.8rem;
    }

    .btn-block {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    /* Info */
    .info-icon,
    .contact-item-icon {
        width: 40px;
        height: 40px;
    }

    .info-icon i,
    .contact-item-icon i {
        font-size: 1rem;
    }

    .info-content h4,
    .contact-item-content h4 {
        font-size: 0.9rem;
    }

    .info-content p,
    .info-content a,
    .contact-item-content p,
    .contact-item-content a {
        font-size: 0.85rem;
    }

    /* Social */
    .social-card {
        padding: 18px;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }
}

/* Ultra petit écran contact (max 359px) */
@media (max-width: 359px) {
    .contact-form-wrapper h2 {
        font-size: 1.2rem;
    }

    .contact-form-card,
    .contact-info-card,
    .info-card {
        padding: 16px;
    }

    .contact-form-card h3,
    .contact-info-card h3,
    .info-card h3 {
        font-size: 1.1rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px;
        font-size: 16px; /* Minimum 16px to prevent iOS zoom */
    }

    .form-checkbox label {
        font-size: 0.75rem;
    }

    .info-icon,
    .contact-item-icon {
        width: 36px;
        height: 36px;
    }

    .info-content h4,
    .contact-item-content h4 {
        font-size: 0.85rem;
    }

    .info-content p,
    .contact-item-content p {
        font-size: 0.8rem;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }
}

/* =============================================
   Devis Page Mobile Optimizations
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Devis Intro */
    .devis-intro h2 {
        font-size: 2rem;
    }

    .devis-intro p {
        font-size: 1rem;
    }

    /* Devis Form */
    .devis-form {
        padding: 35px;
    }

    /* Form Steps - Horizontal scroll on tablet */
    .form-steps {
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .form-steps::-webkit-scrollbar {
        height: 4px;
    }

    .form-steps::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: 2px;
    }

    .step {
        min-width: 120px;
        flex-shrink: 0;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-label {
        font-size: 0.8rem;
    }

    /* Form Rows */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Services Checklist */
    .services-checklist {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Devis Intro */
    .devis-intro {
        text-align: center;
        margin-bottom: 30px;
    }

    .devis-intro h2 {
        font-size: 1.5rem;
    }

    .devis-intro p {
        font-size: 0.9rem;
    }

    /* Devis Form Card */
    .devis-form {
        padding: 20px;
        border-radius: 16px;
    }

    /* Form Steps - Compact */
    .form-steps {
        display: flex;
        justify-content: space-between;
        gap: 5px;
        padding: 0 0 15px;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--gray-200);
    }

    .step {
        flex: 1;
        min-width: auto;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0;
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .step-label {
        font-size: 0.65rem;
        text-align: center;
        line-height: 1.2;
        max-width: 70px;
    }

    /* Hide connector lines on mobile */
    .step::after,
    .form-steps::before {
        display: none !important;
    }

    /* Form Step Content */
    .form-step-content h3 {
        font-size: 1.25rem;
        margin-bottom: 20px;
        text-align: center;
    }

    /* Form Rows - Single column */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Form Groups */
    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px; /* Prevent iOS zoom */
        border-radius: 10px;
    }

    .form-hint {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    /* Services Checklist */
    .services-checklist {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-check-group {
        padding: 15px;
        border-radius: 12px;
    }

    .service-check-group h4 {
        font-size: 1rem;
        margin-bottom: 12px;
        gap: 8px;
    }

    .service-check-group h4 i {
        font-size: 1.1rem;
    }

    .check-items {
        gap: 8px;
    }

    .check-item {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .check-item input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        cursor: pointer;
    }

    .check-item span {
        font-size: 0.85rem;
    }

    /* File Upload */
    .file-upload {
        margin-top: 10px;
    }

    .file-label {
        padding: 25px 15px;
        border-radius: 12px;
    }

    .file-label i {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .file-label span {
        font-size: 0.9rem;
    }

    .file-label small {
        font-size: 0.75rem;
    }

    .file-list {
        margin-top: 10px;
    }

    .file-item {
        padding: 10px;
        font-size: 0.85rem;
    }

    /* Recap Section */
    .recap-section {
        margin-bottom: 20px;
    }

    .recap-section h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .recap-content {
        padding: 15px;
        border-radius: 10px;
        font-size: 0.9rem;
    }

    .recap-content p {
        margin-bottom: 8px;
    }

    /* Form Navigation */
    .form-navigation {
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid var(--gray-200);
    }

    .form-navigation .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .form-navigation #prev-step {
        order: 2;
    }

    .form-navigation #next-step,
    .form-navigation #submit-devis {
        order: 1;
    }

    /* Devis Success */
    .devis-success {
        padding: 40px 20px;
        text-align: center;
    }

    .success-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .success-icon i {
        font-size: 2.5rem;
    }

    .devis-success h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .devis-success p {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .devis-success .btn {
        margin-top: 20px;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Devis Intro */
    .devis-intro h2 {
        font-size: 1.35rem;
    }

    .devis-intro p {
        font-size: 0.85rem;
    }

    /* Devis Form */
    .devis-form {
        padding: 16px;
        border-radius: 14px;
    }

    /* Form Steps - Even more compact */
    .form-steps {
        gap: 3px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .step-label {
        font-size: 0.6rem;
        max-width: 60px;
    }

    /* Form Step Content */
    .form-step-content h3 {
        font-size: 1.15rem;
    }

    /* Form Groups */
    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 11px 12px;
    }

    /* Services Checklist */
    .service-check-group {
        padding: 12px;
    }

    .service-check-group h4 {
        font-size: 0.95rem;
    }

    .check-item {
        padding: 8px 10px;
    }

    .check-item span {
        font-size: 0.8rem;
    }

    /* File Upload */
    .file-label {
        padding: 20px 12px;
    }

    .file-label i {
        font-size: 1.75rem;
    }

    .file-label span {
        font-size: 0.85rem;
    }

    .file-label small {
        font-size: 0.7rem;
    }

    /* Recap */
    .recap-content {
        padding: 12px;
        font-size: 0.85rem;
    }

    /* Form Navigation */
    .form-navigation .btn {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    /* Success */
    .devis-success {
        padding: 30px 15px;
    }

    .success-icon {
        width: 70px;
        height: 70px;
    }

    .success-icon i {
        font-size: 2rem;
    }

    .devis-success h2 {
        font-size: 1.3rem;
    }

    .devis-success p {
        font-size: 0.9rem;
    }
}

/* Ultra petit écran devis (max 359px) */
@media (max-width: 359px) {
    .devis-intro h2 {
        font-size: 1.2rem;
    }

    .devis-form {
        padding: 14px;
    }

    /* Form Steps - Numéros uniquement */
    .step-label {
        display: none;
    }

    .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .form-step-content h3 {
        font-size: 1.05rem;
    }

    .form-group label {
        font-size: 0.8rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px;
        font-size: 16px; /* Minimum 16px to prevent iOS zoom */
    }

    .service-check-group h4 {
        font-size: 0.85rem;
    }

    .check-item span {
        font-size: 0.75rem;
    }

    .recap-content {
        font-size: 0.8rem;
    }

    .form-navigation .btn {
        padding: 11px 16px;
        font-size: 0.85rem;
    }

    .devis-success h2 {
        font-size: 1.15rem;
    }
}

/* =============================================
   Carrières / Jobs Section Mobile Optimizations
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Bottom Forms Grid */
    .bottom-forms-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Jobs Section */
    .jobs-section {
        padding: 18px;
    }

    .jobs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .jobs-source {
        width: 100%;
        justify-content: flex-start;
    }

    /* Jobs List */
    .jobs-list {
        gap: 15px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Jobs Section */
    .jobs-section {
        padding: 15px;
        border-radius: 12px;
    }

    .jobs-header {
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .jobs-header h3 {
        font-size: 0.95rem;
    }

    .jobs-source {
        flex-wrap: wrap;
        gap: 8px;
    }

    .source-badge {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    /* Jobs List - Single column */
    .jobs-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Job Card */
    .job-card {
        padding: 14px;
        border-radius: 10px;
    }

    .job-badge {
        top: 10px;
        right: 10px;
        padding: 3px 8px;
        font-size: 0.6rem;
    }

    .job-card h4 {
        font-size: 0.9rem;
        padding-right: 50px;
        margin-bottom: 6px;
    }

    .job-meta {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 8px;
    }

    .job-meta span {
        font-size: 0.7rem;
    }

    .job-meta svg {
        width: 12px;
        height: 12px;
    }

    .job-card p {
        font-size: 0.75rem;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .job-card-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .job-apply-btn,
    .job-details-btn {
        width: 100%;
        text-align: center;
        padding: 10px 15px;
        font-size: 0.8rem;
    }

    /* Job Modal */
    .job-modal-overlay {
        padding: 10px;
    }

    .job-modal {
        border-radius: 14px;
        max-height: 95vh;
    }

    .job-modal-header {
        padding: 20px;
        border-radius: 14px 14px 0 0;
    }

    .job-modal-header h3 {
        font-size: 1.15rem;
        margin-bottom: 8px;
        padding-right: 30px;
    }

    .job-modal-meta {
        gap: 10px;
        font-size: 0.8rem;
    }

    .job-modal-meta span {
        gap: 4px;
    }

    .job-modal-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }

    .job-modal-close svg {
        width: 18px;
        height: 18px;
    }

    .job-modal-content {
        padding: 20px;
    }

    .job-modal-section {
        margin-bottom: 20px;
    }

    .job-modal-section h4 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .job-modal-section h4 svg {
        width: 18px;
        height: 18px;
    }

    .job-modal-section p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .job-modal-requirements li {
        padding: 8px 0;
        padding-left: 22px;
        font-size: 0.9rem;
    }

    .job-modal-requirements li::before {
        top: 12px;
        width: 6px;
        height: 6px;
    }

    .job-modal-footer {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
    }

    .job-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Loading state */
    .jobs-loading {
        padding: 30px 15px;
    }

    .loading-spinner {
        width: 35px;
        height: 35px;
    }

    /* Empty state */
    .jobs-empty {
        padding: 30px 15px;
        font-size: 0.9rem;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Jobs Section */
    .jobs-section {
        padding: 12px;
        border-radius: 10px;
    }

    .jobs-header h3 {
        font-size: 0.9rem;
    }

    .source-badge {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    /* Job Card */
    .job-card {
        padding: 12px;
    }

    .job-badge {
        padding: 2px 6px;
        font-size: 0.55rem;
    }

    .job-card h4 {
        font-size: 0.85rem;
        padding-right: 45px;
    }

    .job-meta span {
        font-size: 0.65rem;
    }

    .job-card p {
        font-size: 0.7rem;
    }

    .job-apply-btn,
    .job-details-btn {
        padding: 9px 12px;
        font-size: 0.75rem;
    }

    /* Job Modal */
    .job-modal-header {
        padding: 16px;
    }

    .job-modal-header h3 {
        font-size: 1.05rem;
    }

    .job-modal-meta {
        font-size: 0.75rem;
    }

    .job-modal-content {
        padding: 16px;
    }

    .job-modal-section h4 {
        font-size: 0.95rem;
    }

    .job-modal-section p {
        font-size: 0.85rem;
    }

    .job-modal-requirements li {
        font-size: 0.85rem;
        padding-left: 20px;
    }

    .job-modal-footer {
        padding: 12px 16px;
    }
}

/* Ultra petit écran carrières (max 359px) */
@media (max-width: 359px) {
    .jobs-section {
        padding: 10px;
    }

    .jobs-header h3 {
        font-size: 0.85rem;
    }

    .source-badge {
        font-size: 0.6rem;
    }

    .job-card {
        padding: 10px;
    }

    .job-card h4 {
        font-size: 0.8rem;
        padding-right: 40px;
    }

    .job-meta span {
        font-size: 0.6rem;
    }

    .job-card p {
        font-size: 0.65rem;
        -webkit-line-clamp: 2;
    }

    .job-apply-btn,
    .job-details-btn {
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .job-modal-header h3 {
        font-size: 0.95rem;
    }

    .job-modal-meta {
        font-size: 0.7rem;
    }

    .job-modal-section h4 {
        font-size: 0.9rem;
    }

    .job-modal-section p,
    .job-modal-requirements li {
        font-size: 0.8rem;
    }
}

/* =============================================
   Projects Page Mobile Optimizations
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Filter Wrapper */
    .filter-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .filter-btn {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .view-toggle {
        justify-content: center;
    }

    /* Projects Grid */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Project Card */
    .project-card {
        border-radius: 12px;
    }

    .project-image {
        height: 200px;
    }

    .project-info {
        padding: 18px;
    }

    .project-title {
        font-size: 1.1rem;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Filter Section */
    .projects-filter {
        padding: 20px 0;
    }

    .filter-wrapper {
        gap: 12px;
    }

    /* Filter Buttons - Horizontal scroll */
    .filter-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 8px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-buttons::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 0.8rem;
        white-space: nowrap;
        border-radius: 20px;
    }

    /* View Toggle */
    .view-toggle {
        gap: 8px;
    }

    .view-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .view-btn i {
        font-size: 1rem;
    }

    /* Projects Grid - Single column */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Project Card */
    .project-card {
        border-radius: 12px;
        overflow: hidden;
    }

    .project-image {
        height: 180px;
    }

    .project-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
    }

    .project-link {
        width: 45px;
        height: 45px;
    }

    .project-link i {
        font-size: 1rem;
    }

    .project-badge {
        padding: 5px 12px;
        font-size: 0.7rem;
    }

    .project-info {
        padding: 15px;
    }

    .project-title {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .project-location {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .project-location i {
        font-size: 0.75rem;
    }

    .project-desc {
        font-size: 0.85rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Pagination */
    .pagination {
        margin-top: 30px;
        gap: 6px;
    }

    .pagination-btn {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    /* Project Modal */
    .modal {
        padding: 10px;
    }

    .modal-content {
        border-radius: 14px;
        max-height: 95vh;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .modal-body {
        flex-direction: column;
    }

    .modal-gallery {
        height: 200px;
        border-radius: 14px 14px 0 0;
    }

    .modal-gallery img {
        border-radius: 14px 14px 0 0;
    }

    .modal-info {
        padding: 20px;
    }

    .modal-info .project-badge {
        margin-bottom: 10px;
    }

    .modal-info h2 {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    .modal-info .project-location {
        margin-bottom: 15px;
    }

    .modal-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 15px;
        padding: 12px;
        border-radius: 10px;
    }

    .detail-item {
        font-size: 0.85rem;
    }

    .modal-info > p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .modal-services h4 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .modal-services ul {
        gap: 6px;
    }

    .modal-services li {
        font-size: 0.85rem;
        padding: 6px 0;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Filter */
    .filter-btn {
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .view-btn {
        width: 36px;
        height: 36px;
    }

    /* Project Card */
    .project-image {
        height: 160px;
    }

    .project-link {
        width: 40px;
        height: 40px;
    }

    .project-badge {
        padding: 4px 10px;
        font-size: 0.65rem;
    }

    .project-info {
        padding: 12px;
    }

    .project-title {
        font-size: 0.95rem;
    }

    .project-location {
        font-size: 0.75rem;
    }

    .project-desc {
        font-size: 0.8rem;
    }

    /* Pagination */
    .pagination-btn {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    /* Modal */
    .modal-gallery {
        height: 180px;
    }

    .modal-info {
        padding: 16px;
    }

    .modal-info h2 {
        font-size: 1.15rem;
    }

    .detail-item {
        font-size: 0.8rem;
    }

    .modal-info > p {
        font-size: 0.85rem;
    }

    .modal-services h4 {
        font-size: 0.95rem;
    }

    .modal-services li {
        font-size: 0.8rem;
    }
}

/* Ultra petit écran projets (max 359px) */
@media (max-width: 359px) {
    .filter-btn {
        padding: 7px 12px;
        font-size: 0.7rem;
    }

    .view-btn {
        width: 32px;
        height: 32px;
    }

    .project-image {
        height: 140px;
    }

    .project-info {
        padding: 10px;
    }

    .project-title {
        font-size: 0.9rem;
    }

    .project-location {
        font-size: 0.7rem;
    }

    .project-desc {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }

    .pagination-btn {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .modal-gallery {
        height: 150px;
    }

    .modal-info {
        padding: 14px;
    }

    .modal-info h2 {
        font-size: 1.05rem;
    }

    .detail-item {
        font-size: 0.75rem;
    }

    .modal-info > p,
    .modal-services li {
        font-size: 0.75rem;
    }

    .modal-services h4 {
        font-size: 0.9rem;
    }
}

/* =============================================
   Services Page - New Elements Mobile
   ============================================= */

/* Tablet (max 991px) */
@media (max-width: 991.98px) {
    /* Services Overview Grid */
    .services-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 40px;
    }

    .service-overview-card {
        padding: 25px 20px;
    }

    .service-overview-icon {
        width: 60px;
        height: 60px;
    }

    .service-overview-icon i {
        font-size: 1.5rem;
    }

    .service-overview-card h3 {
        font-size: 1rem;
    }

    .service-overview-card p {
        font-size: 0.85rem;
    }

    /* Service Tools */
    .service-tools {
        padding: 15px;
    }

    .tools-label {
        font-size: 0.8rem;
    }

    .tool-badge {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    /* Clients Types */
    .clients-types {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .client-type {
        padding: 30px;
    }

    .client-type-icon {
        width: 70px;
        height: 70px;
    }

    .client-type-icon i {
        font-size: 1.75rem;
    }

    .client-type h3 {
        font-size: 1.15rem;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-card {
        padding: 30px 20px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
    }

    .stat-number {
        font-size: 2.25rem;
    }

    /* Process Grid - already handled but enhance */
    .process-number {
        width: 70px;
        height: 70px;
        font-size: 1.25rem;
    }

    /* CTA Contact Info */
    .cta-contact-info {
        flex-direction: column;
        gap: 15px;
    }

    .cta-contact-item {
        justify-content: center;
    }

    /* Page Header Subtitle */
    .page-header-subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    /* Services Overview Grid */
    .services-overview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .service-overview-card {
        padding: 20px 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        text-align: left;
    }

    .service-overview-icon {
        width: 55px;
        height: 55px;
        margin: 0;
        flex-shrink: 0;
    }

    .service-overview-icon i {
        font-size: 1.3rem;
    }

    .service-overview-card h3 {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .service-overview-card p {
        font-size: 0.8rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Service Tools */
    .service-tools {
        padding: 12px;
        margin: 20px 0;
    }

    .tools-label {
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .tools-list {
        gap: 6px;
    }

    .tool-badge {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    /* Clients Types */
    .clients-types {
        gap: 15px;
    }

    .client-type {
        padding: 25px 20px;
    }

    .client-type-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .client-type-icon i {
        font-size: 1.5rem;
    }

    .client-type h3 {
        font-size: 1.05rem;
        margin-bottom: 15px;
    }

    .client-type ul li {
        padding: 8px 0;
        font-size: 0.9rem;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 25px 15px;
        border-radius: 16px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .stat-icon i {
        font-size: 1.25rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* Process Grid */
    .process-grid {
        gap: 15px;
        margin-top: 40px;
    }

    .process-number {
        width: 60px;
        height: 60px;
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .process-content h3 {
        font-size: 1rem;
    }

    .process-content p {
        font-size: 0.85rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 60px 0;
    }

    .cta-content h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .cta-content p {
        font-size: 0.9rem;
        margin-bottom: 30px;
    }

    .cta-buttons {
        gap: 12px;
        margin-bottom: 30px;
    }

    .btn-white,
    .btn-outline-white {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .cta-contact-info {
        gap: 12px;
    }

    .cta-contact-item {
        font-size: 0.9rem;
    }

    .cta-contact-item i {
        font-size: 1rem;
    }

    /* Page Header Subtitle */
    .page-header-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Service Detail Images */
    .service-detail-image .image-wrapper img,
    .service-detail-image .image-wrapper .service-placeholder-image {
        height: 250px;
        object-fit: cover;
    }

    .image-decoration {
        display: none;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    /* Services Overview Grid */
    .service-overview-card {
        padding: 15px 12px;
        gap: 12px;
    }

    .service-overview-icon {
        width: 48px;
        height: 48px;
    }

    .service-overview-icon i {
        font-size: 1.1rem;
    }

    .service-overview-card h3 {
        font-size: 0.9rem;
    }

    .service-overview-card p {
        font-size: 0.75rem;
    }

    /* Service Tools */
    .service-tools {
        padding: 10px;
    }

    .tool-badge {
        padding: 3px 8px;
        font-size: 0.65rem;
    }

    /* Clients Types */
    .client-type {
        padding: 20px 15px;
    }

    .client-type-icon {
        width: 55px;
        height: 55px;
    }

    .client-type h3 {
        font-size: 1rem;
    }

    .client-type ul li {
        font-size: 0.85rem;
        padding: 6px 0;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 20px 12px;
    }

    .stat-icon {
        width: 45px;
        height: 45px;
    }

    .stat-icon i {
        font-size: 1.1rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* Process Grid */
    .process-number {
        width: 55px;
        height: 55px;
        font-size: 1rem;
    }

    .process-content h3 {
        font-size: 0.95rem;
    }

    .process-content p {
        font-size: 0.8rem;
    }

    /* CTA */
    .cta-content h2 {
        font-size: 1.3rem;
    }

    .cta-content p {
        font-size: 0.85rem;
    }

    .btn-white,
    .btn-outline-white {
        padding: 11px 20px;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

    .cta-contact-item {
        font-size: 0.85rem;
    }

    /* Service Detail Images */
    .service-detail-image .image-wrapper img,
    .service-detail-image .image-wrapper .service-placeholder-image {
        height: 200px;
    }

    /* Page Header Subtitle */
    .page-header-subtitle {
        font-size: 0.85rem;
    }
}

/* Ultra Small (max 359px) */
@media (max-width: 359px) {
    .services-overview-grid {
        gap: 10px;
    }

    .service-overview-card {
        padding: 12px 10px;
        gap: 10px;
    }

    .service-overview-icon {
        width: 42px;
        height: 42px;
    }

    .service-overview-card h3 {
        font-size: 0.85rem;
    }

    .service-overview-card p {
        font-size: 0.7rem;
    }

    .tool-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .client-type {
        padding: 15px 12px;
    }

    .client-type h3 {
        font-size: 0.95rem;
    }

    .client-type ul li {
        font-size: 0.8rem;
    }

    .stat-card {
        padding: 15px 10px;
    }

    .stat-number {
        font-size: 1.35rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .process-number {
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }

    .cta-content h2 {
        font-size: 1.15rem;
    }

    .service-detail-image .image-wrapper img,
    .service-detail-image .image-wrapper .service-placeholder-image {
        height: 180px;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .nav-toggle,
    .btn,
    .cta-section {
        display: none !important;
    }

    .page-header {
        background: none;
        color: var(--dark-color);
        padding: var(--spacing-md) 0;
    }

    .section {
        padding: var(--spacing-md) 0;
    }

    body {
        font-size: 12pt;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize for retina displays if needed */
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Dark Mode Support (future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}