/* ==========================================================
   OUMARCO SARL
   RESPONSIVE DESIGN
   ==========================================================

   Projet  : OUMARCO_SARL_V0.1
   Version : 0.1

   Ce fichier adapte l'interface aux différentes tailles
   d'écran sans modifier le design principal.
   ========================================================== */


/* ==========================================================
   01. TABLETTES
   Jusqu'à 1100px
   ========================================================== */

@media (max-width: 1100px) {


    /* ------------------------------------------------------
       Navigation
       ------------------------------------------------------ */

    .nav-container {

        padding: 0 30px;

        gap: 25px;

    }


    .nav-menu {

        gap: 18px;

    }


    .nav-link {

        font-size: 11px;

    }


    .nav-cta {

        padding: 11px 14px;

    }


    /* ------------------------------------------------------
       Hero
       ------------------------------------------------------ */

    .hero-container {

        padding-left: 60px;

        padding-right: 60px;

    }


    .hero-index {

        right: 50px;

    }


    .hero-scroll {

        left: 60px;

    }


    /* ------------------------------------------------------
       Introduction
       ------------------------------------------------------ */

    .intro-grid {

        gap: 60px;

    }


    /* ------------------------------------------------------
       Footer
       ------------------------------------------------------ */

    .footer-container {

        grid-template-columns:
            1.3fr 1fr 1fr;

        gap: 45px;

    }


    .footer-contact {

        grid-column: 1 / -1;

    }

}


/* ==========================================================
   02. TABLETTES / PETITS ÉCRANS
   Jusqu'à 900px
   ========================================================== */

@media (max-width: 900px) {


    /* ------------------------------------------------------
       Navigation
       ------------------------------------------------------ */

    .nav-menu,
    .nav-cta {

        display: none;

    }


    .mobile-menu-toggle {

        display: flex;

    }


    /* ------------------------------------------------------
       Hero
       ------------------------------------------------------ */

    .hero-container {

        padding:
            140px 40px 80px;

    }


    .hero h1 {

        font-size:
            clamp(55px, 9vw, 80px);

    }


    .hero-index {

        display: none;

    }


    .hero-scroll {

        left: 40px;

    }


    /* ------------------------------------------------------
       Chiffres
       ------------------------------------------------------ */

    .numbers-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .number-item {

        min-height: 150px;

    }


    .number-item:nth-child(2) {

        border-right: none;

    }


    .number-item:nth-child(3),
    .number-item:nth-child(4) {

        border-top:
            1px solid var(--color-border);

    }


    /* ------------------------------------------------------
       Introduction
       ------------------------------------------------------ */

    .intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    /* ------------------------------------------------------
       Expertises
       ------------------------------------------------------ */

    .expertise-item {

        grid-template-columns:
            70px 1fr 60px;

        gap: 25px;

    }


    /* ------------------------------------------------------
       Footer
       ------------------------------------------------------ */

    .footer-container {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .footer-brand {

        grid-column: 1 / -1;

    }


    .footer-contact {

        grid-column: auto;

    }

}


/* ==========================================================
   03. MOBILES
   Jusqu'à 600px
   ========================================================== */

@media (max-width: 600px) {


    /* ------------------------------------------------------
       Variables locales
       ------------------------------------------------------ */

    :root {

        --container-padding: 22px;

        --section-padding: 90px;

    }


    /* ------------------------------------------------------
       Navigation
       ------------------------------------------------------ */

    .nav-container {

        min-height: 76px;

        padding:
            0 22px;

    }


    .main-navigation {

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);

    }


    .logo-name {

        font-size: 19px;

    }


    .logo-subtitle {

        font-size: 8px;

    }


    /* ------------------------------------------------------
       Hero
       ------------------------------------------------------ */

    .hero {

        min-height: 100svh;

    }


    .hero-container {

        padding:
            130px 22px 80px;

    }


    .hero-eyebrow {

        margin-bottom: 22px;

        font-size: 9px;

        letter-spacing: 0.16em;

    }


    .hero-eyebrow::before {

        width: 25px;

    }


    .hero h1 {

        font-size:
            clamp(48px, 15vw, 68px);

        line-height: 0.98;

        margin-bottom: 25px;

    }


    .hero-description {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 30px;

    }


    .hero-actions {

        align-items: stretch;

        flex-direction: column;

    }


    .btn {

        width: 100%;

        min-height: 52px;

    }


    .hero-scroll {

        display: none;

    }


    /* ------------------------------------------------------
       Chiffres
       ------------------------------------------------------ */

    .numbers-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .number-item {

        min-height: 130px;

        padding:
            25px 15px;

        gap: 12px;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

    }


    .number-item:first-child {

        padding-left: 15px;

    }


    .number-value {

        font-size: 32px;

    }


    .number-label {

        font-size: 8px;

    }


    /* ------------------------------------------------------
       Sections
       ------------------------------------------------------ */

    .section-header {

        margin-bottom: 45px;

    }


    .section-header::after {

        width: 40px;

    }


    .intro-title h2,
    .section-introduction h2 {

        font-size:
            clamp(40px, 12vw, 58px);

    }


    .intro-lead {

        font-size: 17px;

    }


    /* ------------------------------------------------------
       Expertises
       ------------------------------------------------------ */

    .section-introduction {

        margin-bottom: 50px;

    }


    .expertise-item {

        grid-template-columns:
            40px 1fr 40px;

        gap: 15px;

        padding: 25px 0;

    }


    .expertise-item:hover {

        padding-left: 10px;

        padding-right: 10px;

    }


    .expertise-content h3 {

        font-size: 17px;

    }


    .expertise-content p {

        font-size: 11px;

    }


    .expertise-arrow {

        width: 36px;

        height: 36px;

        font-size: 15px;

    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    .closing-cta {

        padding:
            100px 0;

    }


    .closing-cta h2 {

        font-size:
            clamp(48px, 14vw, 68px);

    }


    .closing-cta::before {

        width: 300px;

        height: 300px;

    }


    .closing-cta::after {

        width: 210px;

        height: 210px;

    }


    /* ------------------------------------------------------
       Footer
       ------------------------------------------------------ */

    .footer-container {

        grid-template-columns: 1fr;

        gap: 45px;

        padding:
            70px 22px;

    }


    .footer-brand,
    .footer-contact {

        grid-column: auto;

    }


    .footer-bottom-container {

        min-height: auto;

        padding:
            20px 22px;

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }

}


/* ==========================================================
   04. TRÈS PETITS MOBILES
   Jusqu'à 400px
   ========================================================== */

@media (max-width: 400px) {


    .hero h1 {

        font-size: 46px;

    }


    .numbers-grid {

        grid-template-columns: 1fr;

    }


    .number-item {

        border-right: none !important;

        border-top:
            1px solid var(--color-border);

    }


    .number-item:first-child {

        border-top: none;

    }


    .expertise-item {

        grid-template-columns:
            30px 1fr;

    }


    .expertise-arrow {

        display: none;

    }

}

/* ==========================================================
   OUMARCO — NAVIGATION RESPONSIVE
   ========================================================== */

@media (max-width: 1150px) {

    .nav-container {

        width:
            calc(100% - 40px);

        gap: 25px;

    }


    .site-logo {

        width: 170px;

    }


    .site-logo img {

        width: 155px;

    }


    .nav-menu {

        gap: 20px;

    }


    .nav-link {

        font-size: 10px;

    }


    .nav-cta {

        min-width: 135px;

    }

}


/* ==========================================================
   TABLETTE / MOBILE
   ========================================================== */

@media (max-width: 900px) {

    .main-navigation {

        height: 78px;

    }


    .nav-container {

        width:
            calc(100% - 30px);

        justify-content: space-between;

    }


    /* Logo */

    .site-logo {

        width: 158px;

        height: 52px;

    }


    .site-logo img {

        width: 145px;

    }


    /* Menu */

    .nav-menu {

        position: fixed;

        top: 78px;

        left: 0;

        right: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            15px 25px 25px;

        background:
            rgba(4, 15, 28, 0.99);

        border-top:
            1px solid rgba(255, 255, 255, 0.08);

        transform:
            translateY(-120%);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            visibility 0.35s ease;

    }


    .nav-menu.open {

        transform:
            translateY(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    .nav-link {

        width: 100%;

        min-height: 54px;

        height: auto;

        justify-content: flex-start;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.07);

    }


    .nav-link::after {

        display: none;

    }


    /* Dropdown mobile */

    .nav-dropdown {

        flex-direction: column;

        align-items: stretch;

    }


    .nav-dropdown-toggle {

        width: 100%;

        justify-content: space-between;

    }


    .dropdown-menu {

        position: static;

        width: 100%;

        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        display: none;

    }


    .nav-dropdown.open .dropdown-menu {

        display: block;

    }


    .dropdown-item {

        padding:
            14px 10px 14px 25px;

    }


    /* CTA desktop */

    .nav-cta {

        display: none;

    }


    /* Bouton hamburger */

    .mobile-menu-toggle {

        display: block;

    }

}


/* ==========================================================
   HAMBURGER ACTIF
   ========================================================== */

.mobile-menu-toggle.active span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.mobile-menu-toggle.active span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}

@media (max-width: 900px) {

    .language-switcher {

        display: none;

    }

}

/* ==========================================================
   FIN RESPONSIVE
   ========================================================== */