* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --brown: #3b2415;
            --brown-dark: #24150d;
            --brown-light: #68462e;
            --gold: #c7a064;
            --gold-light: #e1c28e;
            --cream: #f7f3ed;
            --white: #ffffff;
            --text: #2d2926;
        }

        body {
            font-family: Arial, sans-serif;
            color: var(--text);
           
        }

        a {
            text-decoration: none;
            color: inherit;
        }


        .hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 22px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.hero-buttons .btn i {
    font-size: 17px;
}

.btn-outline {
    color: #fff;
    border: 2px solid #fff;
    background: transparent;
}

.btn-outline:hover {
    background: #fff;
    color: #222;
}

.btn-gold {
    color: #222;
    background: #feca57;
    border: 2px solid #feca57;
}

.btn-gold:hover {
    background: #fff;
    border-color: #fff;
}
        /* =========================
           CONTAINER
        ========================== */

        .container {
            width: 90%;
            max-width: 1250px;
            margin: auto;
        }

        /* =========================
           HEADER
        ========================== */

        
        

/* =========================================================
   HEADER
========================================================= */

header {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 9999;
}

.header-content {
    width: 100%;
    max-width: 1300px;
    min-height: 96px;
    margin: 0 auto;
    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    box-sizing: border-box;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    width: 65px;
    height: 65px;

    object-fit: contain;
    display: block;
}


/* Bloc texte */

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    line-height: 1;
}


/* Nom TAXI MAROS */

.logo-text p:first-child {
    margin: 0;

    font-size: 26px;
    line-height: 1.05;

    font-weight: 800;
    letter-spacing: 0.5px;

    color: #292929;

    white-space: nowrap;
}


/* MAROS */

.logo-text p:first-child span {
    color: #b9935a;
    font-weight: 800;
}


/* Slogan */

.logo-text p:last-child {
    margin: 7px 0 0;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 500;
    letter-spacing: 0.8px;

    color: #777;

    white-space: nowrap;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.nav-menu > ul {
    display: flex;
    align-items: center;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 5px;
}

.nav-menu > ul > li {
    position: relative;
}

.nav-menu > ul > li > a {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 96px;

    padding: 0 10px;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 14px;
    font-weight: 700;

    color: #222;

    position: relative;

    transition: color 0.3s ease;
}

.nav-menu > ul > li > a:hover,
.nav-menu > ul > li > a.active {
    color: #b9935a;
}


/* Soulignement page active */

.nav-menu > ul > li > a.active::after {
    content: "";

    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 11px;

    height: 2px;

    background: #b9935a;
}


/* =========================================================
   SOUS-MENU DESKTOP
========================================================= */

.has-submenu {
    position: relative;
}

.submenu-toggle i {
    font-size: 10px;

    transition: transform 0.3s ease;
}

.submenu-wrapper {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 220px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: #fff;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

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

    z-index: 99999;
}

.submenu-wrapper li {
    width: 100%;
}

.submenu-wrapper li a {
    display: block;

    padding: 12px 18px;

    color: #222;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.submenu-wrapper li a:hover {
    color: #b9935a;
    background: #f8f5ef;
}


/* =========================================================
   HOVER SOUS-MENU DESKTOP
========================================================= */

@media (min-width: 992px) {

    .has-submenu:hover > .submenu-wrapper {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .has-submenu:hover .submenu-toggle i {
        transform: rotate(180deg);
    }
}


/* =========================================================
   BOUTON TÉLÉPHONE
========================================================= */

.phone-box {
    min-width: 190px;

    padding: 12px 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    background: #3b2418;
    color: #fff;

    border-radius: 12px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

    flex-shrink: 0;
}

.phone-box:hover {
    background: #b9935a;
    color: #fff;

    transform: translateY(-2px);
}

.phone-box strong {
    font-size: 16px;
    line-height: 1.3;
}

.phone-box strong i {
    margin-right: 5px;
}

.phone-box span {
    margin-top: 3px;

    font-size: 11px;
}


/* =========================================================
   BOUTON MENU MOBILE
========================================================= */

.menu-toggle {
    display: none;

    width: 45px;
    height: 45px;

    padding: 0;

    border: 0;
    border-radius: 5px;

    background: #3b2418;
    color: #fff;

    font-size: 20px;

    cursor: pointer;

    align-items: center;
    justify-content: center;
}


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

@media (max-width: 1199px) {

    .header-content {
        padding: 0 20px;
        gap: 15px;
    }

    .logo img {
        width: 58px;
        height: 58px;
    }

    /* Nom du logo */
    .logo-text p:first-child {
        font-size: 23px;
    }

    /* Slogan */
    .logo-text p:last-child {
        font-size: 10px;
    }

    .nav-menu > ul > li > a {
        padding: 0 10px;
        font-size: 12px;
    }

    .nav-menu > ul > li > a.active::after {
        left: 10px;
        right: 10px;
    }

    .phone-box {
        min-width: 165px;
        padding: 10px 12px;
    }

    .phone-box strong {
        font-size: 14px;
    }

    .phone-box span {
        font-size: 10px;
    }
}


/* =========================================================
   MOBILE + PETITE TABLETTE
========================================================= */

@media (max-width: 991px) {

    .header-content {
        min-height: 80px;

        padding: 10px 20px;

        gap: 15px;
    }


    /* Logo */

    .logo {
        gap: 9px;
    }

    .logo img {
        width: 55px;
        height: 55px;
    }

    .logo-text p:first-child {
        font-size: 22px;
    }

    .logo-text p:last-child {
        margin-top: 5px;

        font-size: 10px;
        letter-spacing: 0.5px;
    }


    /* Navigation */

    .main-nav {
        margin-left: auto;

        position: relative;
    }


    /* Bouton menu */

    .menu-toggle {
        display: flex;
    }


    /* Menu caché */

    .nav-menu {
        position: absolute;

        top: calc(100% + 10px);
        right: 0;

        width: min(350px, calc(100vw - 30px));

        background: #fff;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

        border-radius: 8px;

        padding: 10px 0;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

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

        max-height: calc(100vh - 100px);

        overflow-y: auto;
    }


    /* Menu ouvert */

    .main-nav.menu-open .nav-menu {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    /* Liste */

    .nav-menu > ul {
        display: block;

        width: 100%;
    }

    .nav-menu > ul > li {
        width: 100%;
    }


    /* Liens */

    .nav-menu > ul > li > a {
        width: 100%;

        min-height: auto;

        padding: 14px 20px;

        display: flex;
        justify-content: space-between;

        font-size: 14px;

        border-bottom: 1px solid #eee;

        box-sizing: border-box;
    }


    /* Pas de ligne active sur mobile */

    .nav-menu > ul > li > a.active::after {
        display: none;
    }


    /* =====================================================
       SOUS-MENU MOBILE
    ====================================================== */

    .submenu-wrapper {
        position: static;

        display: none;

        width: 100%;

        padding: 0;

        background: #f8f5ef;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .has-submenu.submenu-open > .submenu-wrapper {
        display: block;
    }

    .submenu-wrapper li a {
        padding: 12px 35px;

        font-size: 13px;

        border-bottom: 1px solid #e9e3da;
    }

    .has-submenu.submenu-open > .submenu-toggle i {
        transform: rotate(180deg);
    }


    /* Téléphone caché */

    .phone-box {
        display: none;
    }
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 575px) {

    .header-content {
        min-height: 72px;

        padding: 8px 12px;

        gap: 8px;
    }


    /* Logo */

    .logo {
        gap: 8px;
    }

    .logo img {
        width: 52px;
        height: 52px;
    }

    .logo-text p:first-child {
        font-size: 21px;

        letter-spacing: 0.3px;
    }

    .logo-text p:last-child {
        margin-top: 5px;

        font-size: 9px;

        letter-spacing: 0.5px;
    }


    /* Bouton */

    .menu-toggle {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }


    /* Menu */

    .nav-menu {
        top: calc(100% + 8px);

        right: -5px;

        width: calc(100vw - 24px);
    }

    .nav-menu > ul > li > a {
        padding: 13px 17px;

        font-size: 13px;
    }
}


/* =========================================================
   TRÈS PETIT MOBILE
========================================================= */

@media (max-width: 380px) {

    .header-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo {
        gap: 6px;
    }

    .logo img {
        width: 42px;
        height: 42px;
    }


    /* Nom */

    .logo-text p:first-child {
        font-size: 17px;
    }


    /* Slogan */

    .logo-text p:last-child {
        display: none;
    }


    .menu-toggle {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }
}


        /* =========================
           HERO
        ========================== */

     /* =========================================
   HERO SLIDER
========================================= */

.hero-slider {
    position: relative;
    width: 100%;
    min-height: 720px;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding-bottom: 110px;
}


/* =========================================
   CONTENEUR DES SLIDES
========================================= */

.hero-slides {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}


/* =========================================
   CHAQUE IMAGE
========================================= */

.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 1s ease-in-out,
        transform 6s ease;
}


/* =========================================
   IMAGE ACTIVE
========================================= */

.hero-slide.active {
    opacity: 1;

    transform: scale(1);

    z-index: 2;
}


/* =========================================
   CONTENU HERO
========================================= */

.hero-content {
    position: relative;

    z-index: 10;

    width: 90%;
    max-width: 1250px;

    margin: auto;

    color: white;
}


/* =========================================
   TITRE
========================================= */

.hero-content h1 {
    font-size: 45px;
    line-height: 1;

    font-weight: 700;

    margin: 0 0 15px;
}

.hero-content h1 span {
    color: var(--gold);
}


/* =========================================
   SOUS-TITRE
========================================= */

.hero-content .subtitle {
    font-size: 22px;

    max-width: 500px;

    line-height: 1.4;

    margin: 0 0 22px;
}


/* =========================================
   LISTE
========================================= */

.hero-list {
    list-style: none;

    margin: 0 0 30px;
    padding: 0;
}

.hero-list li {
    margin-bottom: 12px;

    font-size: 16px;
}

.hero-list li::before {
    content: "✓";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: var(--gold);

    color: var(--brown-dark);

    border-radius: 50%;

    margin-right: 10px;

    font-size: 13px;
    font-weight: bold;
}


/* =========================================
   BOUTONS
========================================= */

.hero-buttons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 52px;

    padding: 0 28px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;

    text-decoration: none;

    transition: all .3s ease;
}


/* BOUTON OUTLINE */

.btn-outline {
    border: 1px solid var(--gold);

    color: white;

    background: rgba(59, 36, 21, .5);
}

.btn-outline:hover {
    background: var(--gold);

    color: var(--brown-dark);

    transform: translateY(-2px);
}


/* BOUTON GOLD */

.btn-gold {
    background: var(--gold);

    color: white;
}

.btn-gold:hover {
    background: var(--gold-light);

    transform: translateY(-2px);
}


/* =========================================
   FLÈCHES SLIDER
========================================= */

.slider-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.4);

    background: rgba(0,0,0,.25);

    color: #fff;

    border-radius: 50%;

    cursor: pointer;

    z-index: 20;

    opacity: 0;

    transition: all .3s ease;
}


/* Affichage au hover */

.hero-slider:hover .slider-arrow {
    opacity: 1;
}


.slider-prev {
    left: 30px;
}

.slider-next {
    right: 30px;
}


.slider-arrow:hover {
    background: var(--gold);

    color: #fff;

    border-color: var(--gold);

    transform: translateY(-50%) scale(1.08);
}


/* =========================================
   POINTS DU SLIDER
========================================= */

.slider-dots {
    position: absolute;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 20;
}


.slider-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.55);

    cursor: pointer;

    transition: all .3s ease;
}


.slider-dot.active {
    width: 28px;

    border-radius: 10px;

    background: var(--gold);
}


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

@media (max-width: 991px) {

    .hero-slider {
        min-height: 500px;

        padding-bottom: 80px;
    }


    .hero-content h2 {
        font-size: 52px;
    }


    .hero-content .subtitle {
        font-size: 20px;
    }


    .slider-prev {
        left: 15px;
    }

    .slider-next {
        right: 15px;
    }

}


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

@media (max-width: 767px) {

    .hero-slider {
        min-height: 580px;

        padding-bottom: 70px;
    }


    .hero-slide {
        background-position: center;
    }


    .hero-content {
        width: calc(100% - 40px);
    }


    .hero-content h2 {
        font-size: 42px;
    }


    .hero-content .subtitle {
        font-size: 18px;

        max-width: 100%;
    }


    .hero-list li {
        font-size: 15px;
    }


    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }


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


    .slider-arrow {
        display: none;
    }


    .slider-dots {
        bottom: 25px;
    }

}


/* =========================================
   PETIT MOBILE
========================================= */

@media (max-width: 480px) {

    .hero-content h2 {
        font-size: 36px;
    }


    .hero-content .subtitle {
        font-size: 17px;
    }


    .hero-list li {
        font-size: 14px;
    }


    .btn {
        min-height: 50px;

        padding: 0 18px;

        font-size: 12px;
    }

}
        /* =========================
           RESERVATION
        ========================== */

        .reservation-wrapper {
            position: relative;
            margin-top: -75px;
            z-index: 10;
        }

        .reservation-box {
            background:
                linear-gradient(
                    135deg,
                    #3b2415,
                    #21130b
                );

            padding: 25px;
            border-radius: 15px;
            color: white;
            box-shadow: 0 15px 35px rgba(0,0,0,.20);
        }

        .reservation-title {
            text-align: center;
            font-size: 24px;
            text-transform: uppercase;
            margin-bottom: 22px;
            letter-spacing: 1px;
        }

        .reservation-form {
            display: grid;
            grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
            gap: 15px;
        }

        .form-group label {
            display: block;
            color: var(--gold-light);
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .form-group input {
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 8px;
            padding: 0 15px;
            outline: none;
            font-size: 14px;
        }

        .reservation-button {
            display: flex;
            align-items: end;
        }

        .reservation-button button {
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 8px;
            background: var(--gold);
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            transition: .3s;
        }

        .reservation-button button:hover {
            background: var(--gold-light);
        }

        /* =========================
           TITLES
        ========================== */

        .section-title {
            text-align: center;
            margin-bottom: 35px;
        }

        .section-title h2 {
            font-size: 26px;
            text-transform: uppercase;
            color: var(--brown);
        }

        .section-title .line {
            width: 45px;
            height: 3px;
            background: var(--gold);
            margin: 12px auto 0;
        }

        /* =========================
           SERVICES
        ========================== */

       









        /* =========================
           AVANTAGES
        ========================== */

        .advantages {
            padding: 60px 0;
            background: #f1ece4;
        }

        .advantages-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .advantage {
            text-align: center;
            padding: 15px;
            border-right: 1px solid #d9cfc3;
        }

        .advantage:last-child {
            border-right: none;
        }

        .advantage-icon {
            font-size: 34px;
            color: var(--gold);
            margin-bottom: 10px;
        }

        .advantage h3 {
            font-size: 15px;
            margin-bottom: 7px;
            color: var(--brown);
        }

        .advantage p {
            font-size: 13px;
            color: #666;
        }

        /* =========================
           FOOTER
        ========================== */

        footer {
            background:
                linear-gradient(
                    90deg,
                    #1f120b,
                    #3b2415
                );
            color: white;
            padding-top: 55px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.3fr;
            gap: 40px;
            padding-bottom: 40px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .footer-logo img {
            width: 70px;
            height: 70px;
            object-fit: contain;
        }

        .footer-logo h2 {
            font-size: 22px;
        }

        .footer-logo h2 span {
            color: var(--gold);
        }

        .footer-description {
            margin-top: 15px;
            max-width: 270px;
            color: #ddd;
            font-size: 13px;
            line-height: 1.7;
        }

        .footer-column h3 {
            color: var(--gold-light);
            margin-bottom: 18px;
            font-size: 15px;
            text-transform: uppercase;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 10px;
            font-size: 13px;
            color: #ddd;
        }

        .footer-column ul li a:hover {
            color: var(--gold);
        }

        .contact-item {
            font-size: 13px;
            margin-bottom: 12px;
            color: #ddd;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,.15);
            text-align: center;
            padding: 20px;
            font-size: 13px;
            color: #ccc;
        }

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

        @media (max-width: 1050px) {

            nav {
                display: none;
            }

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

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

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

            .advantage {
                border: none;
            }
        }

        @media (max-width: 700px) {

            header {
                height: 80px;
            }

            .logo img {
                width: 55px;
                height: 55px;
            }

            .logo-text p {
                font-size: 20px;
                font-weight: 700;
            }

            .logo-text p {
                display: none;
            }

            .phone-box {
                min-width: auto;
                padding: 10px 13px;
            }

            .phone-box strong {
                font-size: 13px;
            }

            .phone-box span {
                display: none;
            }

            .hero {
                min-height: 600px;
                background-position: center;
            }

            .hero-content h2 {
                font-size: 42px;
            }

            .hero-content .subtitle {
                font-size: 18px;
            }

            .reservation-wrapper {
                margin-top: -40px;
            }

            .reservation-form {
                grid-template-columns: 1fr;
            }

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

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

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

            .hero-buttons {
                flex-direction: column;
                align-items: flex-start;
            }
        }


        .service-icon {
    min-width: 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b2415, #68462e);
    color: #e1c28e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: #c7a064;
    color: #ffffff;
    transform: scale(1.08);
}


.advantage-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #c7a064;
}

.advantage-icon i {
    transition: all 0.3s ease;
}

.advantage:hover .advantage-icon i {
    transform: translateY(-4px);
    color: #3b2415;
}







  /* =====================================
   SECTION PRESENTATION TAXI MAROS
===================================== */

.taxi-presentation {
    padding: 90px 0;
    background: #ffffff;
}


/* GRILLE */

.presentation-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
}


/* =====================================
   IMAGE
===================================== */

.presentation-image {
    position: relative;
    width: 100%;
}


.presentation-image img {
    width: 100%;
    height: 600px;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 22px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.14);
}


/* =====================================
   BADGE SUR IMAGE
===================================== */

.service-badge {
    position: absolute;

    left: 40px;
    bottom: 55px;

    min-width: 455px;

    height: 160px;

    display: flex;
    align-items: center;

    padding: 25px 35px;

    background:
        linear-gradient(
            135deg,
            rgba(72, 40, 19, 0.98),
            rgba(47, 25, 12, 0.98)
        );

    border: 1px solid #c7a064;

    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);
}


/* ICONE BADGE */

.service-badge-icon {
    width: 105px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d7ad63;

    font-size: 54px;
}


/* LIGNE VERTICALE */

.service-badge-line {
    width: 1px;
    height: 95px;

    background: #c7a064;

    margin: 0 28px;
}


/* TEXTE BADGE */

.service-badge-text strong {
    display: block;

    color: #ffffff;

    font-size: 29px;

    font-weight: 700;

    white-space: nowrap;
}


.service-badge-text span {
    display: block;

    margin-top: 12px;

    color: #d7ad63;

    font-size: 19px;

    font-weight: 600;
}


/* =====================================
   CONTENU
===================================== */

.presentation-content {
    max-width: 650px;
}


/* PETIT TITRE */

.presentation-label {
    display: block;

    margin-bottom: 25px;

    color: #a77932;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* GRAND TITRE */

.presentation-content h2 {
    margin: 0;

    color: #2e211a;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -1px;
}


/* LIGNE DOREE */

.presentation-line {
    width: 80px;
    height: 4px;

    margin: 30px 0 32px;

    background: #b58a45;

    border-radius: 5px;
}


/* TEXTES */

.presentation-text {
    margin-bottom: 22px;

    color: #5d5d5d;

    font-size: 18px;

    line-height: 1.65;
}


/* =====================================
   AVANTAGES
===================================== */

.presentation-feature {
    display: flex;

    align-items: center;

    gap: 22px;

    padding: 16px 0;

    border-bottom: 1px solid #dedbd7;
}


.presentation-feature-icon {
    width: 70px;
    height: 70px;

    min-width: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f5f1eb;

    color: #4a2c1a;

    font-size: 32px;

    transition: all .3s ease;
}


.presentation-feature:hover .presentation-feature-icon {
    background: #4a2c1a;

    color: #d7ad63;

    transform: scale(1.06);
}


.presentation-feature-content h3 {
    margin: 0 0 7px;

    color: #38281e;

    font-size: 22px;

    font-weight: 700;
}


.presentation-feature-content p {
    margin: 0;

    color: #626262;

    font-size: 16px;

    line-height: 1.5;
}


/* =====================================
   BOUTON
===================================== */

.presentation-button {
    width: 410px;

    height: 80px;

    margin-top: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    background:
        linear-gradient(
            90deg,
            #432512,
            #2c180c
        );

    color: #ffffff;

    border: 1px solid #c7a064;

    border-radius: 16px;

    font-size: 19px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .3px;

    transition: all .3s ease;

    box-shadow:
        0 8px 20px rgba(59,36,21,.20);
}


.presentation-button i {
    color: #d7ad63;

    font-size: 29px;
}


.presentation-button:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            90deg,
            #c7a064,
            #a77932
        );

    box-shadow:
        0 15px 30px rgba(59,36,21,.25);
}


.presentation-button:hover i {
    color: #ffffff;
}


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

@media (max-width: 1050px) {

    .presentation-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .presentation-content {
        max-width: 100%;
    }


    .presentation-image img {
        height: 550px;
    }

}


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

@media (max-width: 650px) {

    .taxi-presentation {
        padding: 65px 0;
    }


    .presentation-grid {
        gap: 45px;
    }


    .presentation-image img {
        height: 480px;

        border-radius: 15px;
    }


    .service-badge {
        left: 15px;
        right: 15px;

        bottom: 20px;

        min-width: auto;

        height: 125px;

        padding: 15px 20px;

        border-radius: 14px;
    }


    .service-badge-icon {
        width: 65px;
        height: 65px;

        font-size: 35px;
    }


    .service-badge-line {
        height: 65px;

        margin: 0 15px;
    }


    .service-badge-text strong {
        font-size: 20px;
    }


    .service-badge-text span {
        margin-top: 7px;

        font-size: 15px;
    }


    .presentation-label {
        font-size: 14px;

        margin-bottom: 15px;
    }


    .presentation-content h2 {
        font-size: 34px;

        line-height: 1.25;
    }


    .presentation-line {
        margin: 22px 0;
    }


    .presentation-text {
        font-size: 16px;
    }


    .presentation-feature {
        gap: 15px;
    }


    .presentation-feature-icon {
        width: 55px;
        height: 55px;

        min-width: 55px;

        font-size: 24px;
    }


    .presentation-feature-content h3 {
        font-size: 18px;
    }


    .presentation-feature-content p {
        font-size: 14px;
    }


    .presentation-button {
        width: 100%;

        height: 65px;

        font-size: 15px;

        border-radius: 12px;
    }

}




   /* =========================================
   SECTION
========================================= */

.satisfaction-section {
    position: relative;
    min-height: 680px;
    overflow: hidden;

    padding: 80px 0;

    background:
        linear-gradient(
            90deg,
            #2b170d 0%,
            #321b0f 50%,
            #1e0f08 100%
        );
}


/* =========================================
   IMAGE VEHICULE A DROITE
========================================= */

.satisfaction-vehicle {
    position: absolute;

    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
}


/* IMAGE */

.satisfaction-vehicle img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    opacity: 0.95;

    transform: scale(1.03);

    transition:
        transform 1.2s ease,
        opacity 0.8s ease;
}


/* EFFET ZOOM */

.satisfaction-section:hover .satisfaction-vehicle img {
    transform: scale(1.08);

    opacity: 1;
}


/* =========================================
   EFFET DE FONDU A GAUCHE
========================================= */

.satisfaction-vehicle::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 45%;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #321b0f 0%,
            rgba(50, 27, 15, 0.95) 20%,
            rgba(50, 27, 15, 0.65) 50%,
            rgba(50, 27, 15, 0) 100%
        );
}


/* =========================================
   FONDU EN HAUT
========================================= */

.satisfaction-vehicle::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    background:
        linear-gradient(
            180deg,
            rgba(30, 15, 8, 0.30) 0%,
            rgba(30, 15, 8, 0) 35%,
            rgba(30, 15, 8, 0.15) 100%
        );

    pointer-events: none;
}


/* =========================================
   CONTENU
========================================= */

.satisfaction-section .container {
    position: relative;
    z-index: 5;
}


.satisfaction-content {
    position: relative;

    width: 58%;

    max-width: 700px;
}


/* =========================================
   TITRE LABEL
========================================= */

.satisfaction-label {
    display: block;

    margin-bottom: 22px;

    color: #c7a064;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   TITRE
========================================= */

.satisfaction-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;
}


/* =========================================
   LIGNE DOREE
========================================= */

.satisfaction-line {
    width: 62px;
    height: 4px;

    margin: 28px 0;

    border-radius: 10px;

    background: #c7a064;
}


/* =========================================
   DESCRIPTION
========================================= */

.satisfaction-description {
    max-width: 650px;

    margin: 0 0 32px;

    color: #ddd4cc;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   CARTES
========================================= */

.satisfaction-cards {
    display: grid;

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

    gap: 10px;
}


.satisfaction-card {
    min-height: 180px;

    padding: 20px 15px;

    border: 1px solid rgba(199, 160, 100, 0.30);

    border-radius: 12px;

    background:
        rgba(65, 36, 20, 0.45);

    backdrop-filter: blur(4px);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.satisfaction-card:hover {
    transform: translateY(-7px);

    background:
        rgba(199, 160, 100, 0.12);

    border-color: #c7a064;
}


/* ICONE */

.satisfaction-card-icon {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 50%;

    color: #d7ad63;

    background:
        rgba(199, 160, 100, 0.12);

    font-size: 20px;
}


.satisfaction-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.satisfaction-card p {
    margin: 0;

    color: #cfc4b8;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================
   STATISTIQUES
========================================= */

.satisfaction-stats {
    display: grid;

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

    gap: 20px;

    margin-top: 34px;

    padding-top: 28px;

    border-top:
        1px solid rgba(199, 160, 100, 0.25);
}


.stat-item {
    display: flex;

    align-items: center;

    gap: 12px;
}


.stat-item > i {
    color: #d7ad63;

    font-size: 28px;
}


.stat-item strong {
    display: block;

    color: #d7ad63;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.1;
}


.stat-item span {
    display: block;

    margin-top: 5px;

    color: #d8cec4;

    font-size: 11px;
}














.taxi-faq .faq-question {
    position: relative;
    font-size: 19px;
    line-height: 1.5;
    color: #29211c;
    margin: 0;
    padding: 20px 45px 20px 0;
    cursor: pointer;
    font-weight: 600;
}

.taxi-faq .faq-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d5a64f;
    border-radius: 50%;
    color: #d5a64f;
    font-size: 20px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.taxi-faq .faq-answer {
    display: none;
    padding: 0 45px 20px 0;
}

.taxi-faq .faq-answer p {
    margin: 0;
    color: #666;
    line-height: 1.7;
    font-size: 16px;
}

.taxi-faq .faq-item.active .faq-answer {
    display: block;
}

.taxi-faq .faq-item.active .faq-icon {
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 767px) {

    .taxi-faq h2 {
        font-size: 25px !important;
    }

    .taxi-faq .faq-question {
        font-size: 17px;
        padding-right: 40px;
    }

    .taxi-faq .faq-answer {
        padding-right: 35px;
    }
}













    /* =========================================
   /* =========================================
   GALERIE TAXI MAROS
========================================= */

.maros-gallery-section {
    position: relative;
    padding: 90px 0 70px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #f7f4ef 0%,
        #f1ece5 50%,
        #f8f6f2 100%
    );
}


/* =========================================
   HEADER
========================================= */

.maros-gallery-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 45px;
}

.maros-gallery-label {
    display: block;
    color: #a77932;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.maros-gallery-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 15px;
}

.maros-gallery-title-line span {
    width: 70px;
    height: 1px;
    background: #b58a45;
}

.maros-gallery-title-line i {
    color: #b58a45;
    font-size: 11px;
}

.maros-gallery-header h2 {
    margin: 0;
    color: #2d1c13;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

.maros-gallery-header h2 strong {
    color: #b58a45;
}

.maros-gallery-header p {
    max-width: 600px;
    margin: 15px auto 0;
    color: #5f5955;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================
   GRILLE
========================================= */

.maros-gallery-grid {
    display: grid;

    /* proportions comme sur ta capture */
    grid-template-columns: 1.5fr 1fr 1fr;

    /* deux lignes identiques */
    grid-template-rows: 280px 280px;

    gap: 14px;

    width: 100%;
}


/* =========================================
   POSITIONNEMENT EXACT DES IMAGES
========================================= */

/* Image 1 : grande à gauche */
.maros-gallery-big {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Image 2 : haut milieu */
.maros-gallery-grid > .maros-gallery-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/* Image 3 : haut droite */
.maros-gallery-grid > .maros-gallery-item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Image 4 : bas droite */
.maros-gallery-wide {
    grid-column: 2 / 4;
    grid-row: 2;
}


/* =========================================
   ITEM
========================================= */

.maros-gallery-item {
    position: relative;
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 15px;

    background: #2b170d;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(43, 23, 13, 0.10);
}


/* =========================================
   IMAGES
========================================= */

.maros-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    /* IMPORTANT */
    object-fit: cover;

    /* centre l'image */
    object-position: center center;

    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}


/* =========================================
   HOVER
========================================= */

.maros-gallery-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.82);
}


/* =========================================
   CAPTION
========================================= */

.maros-gallery-caption {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    color: #ffffff;

    border-radius: 10px;

    background: rgba(43, 23, 13, 0.88);

    backdrop-filter: blur(7px);

    transform: translateY(20px);

    opacity: 0;

    transition: all 0.4s ease;
}

.maros-gallery-item:hover .maros-gallery-caption {
    transform: translateY(0);
    opacity: 1;
}

.maros-gallery-caption i {
    flex-shrink: 0;

    color: #d7ad63;

    font-size: 22px;
}

.maros-gallery-caption span {
    font-size: 15px;
    font-weight: 600;
}


/* =========================================
   FOOTER
========================================= */

.maros-gallery-footer {
    display: grid;

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

    align-items: center;

    gap: 40px;

    margin-top: 40px;
}

.maros-decoration {
    position: relative;

    height: 1px;

    background: rgba(181, 138, 69, 0.65);
}

.maros-decoration span {
    position: absolute;

    top: 50%;

    width: 10px;
    height: 10px;

    background: #b58a45;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.maros-decoration-left span {
    right: 0;
}

.maros-decoration-right span {
    left: 0;
}


/* =========================================
   BOUTON
========================================= */

.maros-gallery-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-width: 360px;
    height: 78px;

    padding: 0 35px;

    border-radius: 12px;

    border: 1px solid #b58a45;

    background: linear-gradient(
        135deg,
        #4a2a15,
        #2b170d
    );

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.5px;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(43, 23, 13, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.maros-gallery-button i {
    color: #d7ad63;
    font-size: 25px;
}

.maros-gallery-button:hover {
    color: #ffffff;

    transform: translateY(-5px);

    background: linear-gradient(
        135deg,
        #b58a45,
        #8f652c
    );

    box-shadow:
        0 18px 35px rgba(43, 23, 13, 0.25);
}

.maros-gallery-button:hover i {
    color: #ffffff;
}


/* =========================================
   RESPONSIVE TABLETTE
========================================= */

@media (max-width: 992px) {

    .maros-gallery-grid {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows:
            280px
            280px
            280px;
    }

    .maros-gallery-big {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .maros-gallery-grid > .maros-gallery-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .maros-gallery-grid > .maros-gallery-item:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .maros-gallery-wide {
        grid-column: 1 / 3;
        grid-row: 3;
    }

}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 768px) {

    .maros-gallery-section {
        padding: 60px 15px 50px;
    }

    .maros-gallery-header h2 {
        font-size: 36px;
    }

    .maros-gallery-header p {
        font-size: 15px;
    }

    .maros-gallery-grid {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            280px
            220px
            220px
            280px;

        gap: 12px;
    }

    /* Image 1 */
    .maros-gallery-big {
        grid-column: 1;
        grid-row: 1;
    }

    /* Image 2 */
    .maros-gallery-grid > .maros-gallery-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Image 3 */
    .maros-gallery-grid > .maros-gallery-item:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    /* Image 4 */
    .maros-gallery-wide {
        grid-column: 1;
        grid-row: 4;
    }

    .maros-gallery-caption {
        opacity: 1;
        transform: translateY(0);

        left: 10px;
        right: 10px;
        bottom: 10px;

        padding: 10px 12px;
    }

    .maros-gallery-caption span {
        font-size: 13px;
    }

    .maros-gallery-footer {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .maros-decoration {
        display: none;
    }

    .maros-gallery-button {
        min-width: 0;
        width: 100%;
        height: 65px;
    }
}



















    /* ================================
   RESPONSIVE MOBILE
   ================================ */

@media (max-width: 767px) {

    .satisfaction-section {
        position: relative;
        overflow: hidden;
        min-height: auto;
        padding: 50px 0 30px;
    }

    .satisfaction-vehicle {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .satisfaction-vehicle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .satisfaction-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(45, 20, 10, 0.78);
        z-index: 1;
    }

    .satisfaction-section .container {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0 15px;
    }

    .satisfaction-content {
        width: 100%;
    }

    .satisfaction-label {
        font-size: 12px;
        display: block;
        margin-bottom: 10px;
    }

    .satisfaction-content h2 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .satisfaction-content h2 br {
        display: none;
    }

    .satisfaction-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
        max-width: 100%;
    }

    /* CARTES : 2 PAR LIGNE */
    .satisfaction-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    .satisfaction-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 190px;
        padding: 15px 12px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .satisfaction-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .satisfaction-card-icon i {
        font-size: 17px;
    }

    .satisfaction-card h3 {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .satisfaction-card p {
        font-size: 12px;
        line-height: 1.6;
        margin: 0;
    }

    /* STATISTIQUES */
    .satisfaction-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 10px !important;
        margin-top: 30px;
        padding-top: 20px;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .stat-item > i {
        font-size: 22px;
        flex-shrink: 0;
    }

    .stat-item strong {
        display: block;
        font-size: 20px;
        line-height: 1.1;
    }

    .stat-item span {
        display: block;
        font-size: 10px;
        line-height: 1.3;
    }
}


/* PETITS MOBILES */
@media (max-width: 400px) {

    .satisfaction-section {
        padding-top: 40px;
    }

    .satisfaction-content h2 {
        font-size: 25px;
    }

    .satisfaction-description {
        font-size: 13px;
    }

    .satisfaction-card {
        min-height: 180px;
        padding: 13px 10px !important;
    }

    .satisfaction-card h3 {
        font-size: 14px;
    }

    .satisfaction-card p {
        font-size: 11px;
    }

    .stat-item strong {
        font-size: 18px;
    }

    .stat-item span {
        font-size: 9px;
    }
}











/* =========================================================
   SERVICES - CSS COMPLET
========================================================= */


/* =========================================================
   RESET
========================================================= */

.services-section,
.services-section *,
.services-section *::before,
.services-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   SECTION PRINCIPALE
========================================================= */

.services-section {
    width: 100%;
    margin: 0;
    padding: 90px 0 100px;

    background: #ffffff;

    overflow: visible;
}


/* =========================================================
   CONTAINER
========================================================= */

.services-container {
    width: 1360px;
    max-width: calc(100% - 80px);

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   TITRE "NOS SERVICES"
========================================================= */

.services-header {
    display: block;

    width: 100%;

    margin: 0 0 57px;
    padding: 0;

    text-align: center;
}


.services-header h2 {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #24150e;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 40px;
    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1px;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================================
   DÉCORATION SOUS LE TITRE
========================================================= */

.services-title-decoration {
    display: flex;

    width: 100%;
    height: 40px;

    margin-top: 17px;

    align-items: center;
    justify-content: center;

    gap: 18px;
}


/* Lignes dorées */

.services-title-decoration > span {
    display: block;

    width: 84px;
    height: 2px;

    margin: 0;
    padding: 0;

    background: #d6a248;

    flex: 0 0 84px;
}


/* =========================================================
   ICÔNE VOITURE DU TITRE
========================================================= */

.services-title-decoration svg {
    display: block;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    fill: none;

    stroke: #d6a248;

    stroke-width: 4;

    stroke-linecap: round;
    stroke-linejoin: round;

    flex: 0 0 40px;
}


/* =========================================================
   GRID DES 4 CARTES
========================================================= */

.services-grid {
    display: grid;

    width: 100%;

    margin: 0;
    padding: 0;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   CARTE
========================================================= */

.service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 620px;

    margin: 0;
    padding: 0 0 25px;

    background: #ffffff;

    border: none;
    border-radius: 18px;

    overflow: visible;

    float: none;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.10),
        0 1px 5px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.service-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   HOVER CARTE
========================================================= */

.service-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14),
        0 3px 8px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   IMAGE
========================================================= */

.service-image {
    position: relative;

    display: block;

    width: calc(100% - 18px);
    height: 239px;
    min-height: 239px;

    margin: 9px auto 0;
    padding: 0;

    float: none;
    clear: both;

    overflow: visible;
}


/* =========================================================
   IMAGE PHOTO
========================================================= */

.service-image img {
    position: relative;

    display: block;

    width: 100%;
    height: 239px;

    min-height: 239px;
    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    border: 0;
    outline: none;

    border-radius: 14px;

    object-fit: cover;
    object-position: center;

    float: none;
    clear: both;
}


/* =========================================================
   ICÔNE RONDE
========================================================= */

.service-icon {
    position: absolute;

    left: 50%;
    bottom: -46px;

    transform: translateX(-50%);

    display: flex;

    width: 86px;
    height: 86px;

    margin: 0;
    padding: 0;

    align-items: center;
    justify-content: center;

    background: #4a2a13;

    border: none;
    border-radius: 50%;

    z-index: 20;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   ICÔNES FONT AWESOME
========================================================= */

.service-icon i {
    display: block;

    margin: 0;
    padding: 0;

    color: #d9a74f;

    font-size: 25px;

    line-height: 1;

    text-align: center;
}


/* =========================================================
   AVION
========================================================= */

.service-card:nth-child(1) .service-icon i {
    font-size: 25px;

    transform: rotate(-8deg);
}


/* =========================================================
   TRAIN
========================================================= */

.service-card:nth-child(2) .service-icon i {
    font-size: 25px;
}


/* =========================================================
   LONG TRAJET - LETTRE A
========================================================= */

.road-icon {
    background: #4a2a13;
}


.road-icon span {
    display: block;

    margin: 0;
    padding: 0;

    color: #d9a74f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 42px;

    font-weight: 900;

    line-height: 1;

    text-align: center;
}


/* =========================================================
   MALLETTE
========================================================= */

.service-card:nth-child(4) .service-icon i {
    font-size: 25px;
}


/* =========================================================
   CONTENU DE LA CARTE
========================================================= */

.service-content {
    display: flex;
    flex-direction: column;

    position: relative;

    width: 100%;
    flex: 1;

    margin: 0;
    padding: 65px 25px 25px;

    text-align: center;

    float: none;
    clear: both;
}

/* =========================================================
   TITRE DE CHAQUE SERVICE
========================================================= */

.service-content h3 {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #2a1911;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.48;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================================
   LIGNE DORÉE SOUS LE TITRE
========================================================= */

.card-line {
    display: block;

    width: 65px;
    height: 2px;

    margin: 14px auto 18px;

    padding: 0;

    background: #d6a248;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-content p {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0 5px;

    color: #626262;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.65;

    text-align: center;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .services-container {
        width: 1360px;
    }

}


/* =========================================================
   TABLETTE / PETIT DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .services-section {
        padding: 60px 0 80px;
    }


    .services-container {
        width: 100%;

        max-width: calc(100% - 50px);
    }


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

        gap: 25px;
    }


    .service-card {
    height: auto;
        min-height: 580px;
    }


    .services-header h2 {
        font-size: 30px;
    }

}


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

@media (max-width: 768px) {

    .services-section {
        padding: 90px 0 70px;
    }


    .services-container {
        width: calc(100% - 40px);

        max-width: none;
    }


    .services-header {
        margin-bottom: 50px;
    }


    .services-header h2 {
        font-size: 38px;

        letter-spacing: 0;
    }


    .services-title-decoration {
        margin-top: 15px;

        gap: 14px;
    }


    .services-title-decoration > span {
        width: 65px;

        flex-basis: 65px;
    }


    .services-title-decoration svg {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }


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

        gap: 20px;
    }


    .service-card {
         height: auto;
        min-height: 0;
    }


    .service-image {
        height: 210px;
        min-height: 210px;
    }


    .service-image img {
        height: 210px;
        min-height: 210px;
    }


    .service-content {
        padding:
            60px 20px 25px;
    }


    .service-content h3 {
        font-size: 20px;

        line-height: 1.45;
    }


    .service-content p {
        font-size: 16px;

        line-height: 1.6;
    }

}


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

@media (max-width: 600px) {

    .services-section {
        padding: 70px 0 60px;
    }


    .services-container {
        width: calc(100% - 30px);

        max-width: none;
    }


    .services-header {
        margin-bottom: 45px;
    }


    .services-header h2 {
        font-size: 32px;

        letter-spacing: 0;
    }


    .services-title-decoration {
        height: 35px;

        margin-top: 12px;

        gap: 10px;
    }


    .services-title-decoration > span {
        width: 50px;
        min-width: 50px;

        flex-basis: 50px;
    }


    .services-title-decoration svg {
        width: 32px;
        height: 32px;

        min-width: 32px;

        flex-basis: 32px;
    }


    .services-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .service-card {
        width: 100%;
        height: auto;
        min-height: 0;
    }


    .service-image {
        width: calc(100% - 18px);

        height: 245px;
        min-height: 245px;
    }


    .service-image img {
        height: 245px;
        min-height: 245px;
    }


    .service-icon {
        width: 82px;
        height: 82px;

        bottom: -42px;
    }


    .service-icon i {
        font-size: 25px;
    }


    .road-icon span {
        font-size: 40px;
    }


    .service-content {
        padding:
            62px 25px 35px;
    }


    .service-content h3 {
        font-size: 21px;

        line-height: 1.45;
    }


    .service-content p {
        font-size: 16px;

        line-height: 1.65;
    }

}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 400px) {

    .services-section {
        padding: 55px 0 50px;
    }


    .services-container {
        width: calc(100% - 24px);
    }


    .services-header h2 {
        font-size: 28px;
    }


    .services-title-decoration > span {
        width: 42px;
        min-width: 42px;

        flex-basis: 42px;
    }


    .services-title-decoration svg {
        width: 30px;
        height: 30px;

        min-width: 30px;

        flex-basis: 30px;
    }


    .service-image {
        height: 220px;
        min-height: 220px;
    }


    .service-image img {
        height: 220px;
        min-height: 220px;
    }


    .service-icon {
        width: 78px;
        height: 78px;

        bottom: -40px;
    }


    .service-icon i {
        font-size: 35px;
    }


    .road-icon span {
        font-size: 38px;
    }


    .service-content {
        padding:
            60px 20px 30px;
    }


    .service-content h3 {
        font-size: 19px;
    }


    .service-content p {
        font-size: 15px;
    }

}








   /* =========================================================
   SÉLECTEUR DE LANGUE
========================================================= */

.language-selector {
    position: relative;
    margin-right: 20px;
    z-index: 1000;
}

.language-current {
    display: flex;
    align-items: center;
    gap: 7px;

    border: none;
    background: transparent;

    color: #292929;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    padding: 10px 5px;
}

.language-current i:first-child {
    color: #6b3f25;
    font-size: 15px;
}

.language-current .fa-chevron-down {
    font-size: 9px;
    margin-left: 2px;
    transition: transform 0.25s ease;
}

.language-selector:hover .fa-chevron-down {
    transform: rotate(180deg);
}


/* =========================================================
   MENU LANGUES
========================================================= */

.language-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    min-width: 130px;

    background: #ffffff;

    border-radius: 5px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.12);

    border: 1px solid rgba(0,0,0,0.06);

    padding: 6px 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(5px);

    transition: all 0.25s ease;
}

.language-selector:hover .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   OPTIONS
========================================================= */

.language-option {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    color: #292929;

    text-decoration: none;

    font-size: 13px;

    transition: all 0.2s ease;
}

.language-option span {
    color: #777;
    font-size: 12px;
}

.language-option:hover {
    background: #f8f5f2;
    color: #6b3f25;
}


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

@media (max-width: 991px) {

    .language-selector {
        margin-right: 0;
        margin-top: 15px;
    }

    .language-current {
        color: #292929;
    }

    .language-dropdown {
        position: static;

        display: none;

        margin-top: 5px;

        box-shadow: none;

        border: 1px solid #eee;
    }

    .language-selector:hover .language-dropdown {
        display: block;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

}