/* ==========================================================
   XTREME CLEANING SERVICES
   RESPONSIVE.CSS
   PARTIE 1/3
   Desktop - Laptop
========================================================== */


/* ==========================================================
   ECRANS XXL (1600px et +)
========================================================== */

@media (min-width:1600px){

.container{

max-width:1500px;

}

.hero-content{

max-width:850px;

}

.hero-content h1{

font-size:82px;

}

.hero-content p{

font-size:23px;

}

section{

padding:130px 0;

}

}


/* ==========================================================
   GRANDS ECRANS
========================================================== */

@media (max-width:1400px){

.container{

max-width:1140px;

}

.hero-content h1{

font-size:62px;

}

.title-xl{

font-size:60px;

}

.video-overlay h2{

font-size:52px;

}

.gallery-card img{

height:300px;

}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

section{

padding:90px 0;

}

.hero{

min-height:700px;

}

.hero-content{

max-width:650px;

}

.hero-content h1{

font-size:56px;

}

.hero-content p{

font-size:18px;

}

.navbar-brand img{

height:62px;

}

.nav-link{

margin-left:18px;

font-size:15px;

}

.service-card{

padding:35px 25px;

}

.feature-box{

padding:25px;

}

.advantage-box{

padding:30px;

}

.gallery-card img{

height:270px;

}

.fleet img{

height:360px;

}

.video-banner{

height:560px;

}

.video-overlay h2{

font-size:48px;

}

.title-lg{

font-size:46px;

}

}


/* ==========================================================
   PETITS LAPTOPS
========================================================== */

@media (max-width:1100px){

.hero-content h1{

font-size:50px;

}

.hero-buttons{

gap:15px;

}

.btn{

padding:14px 28px;

}

.stat-card{

padding:25px;

}

.stat-card h3{

font-size:38px;

}

.footer{

padding-top:70px;

}

}


/* ==========================================================
   DESKTOP COMPACT
========================================================== */

@media (max-width:992px){

.hero{

height:auto;

padding:150px 0 100px;

}

.hero-content{

max-width:100%;

text-align:center;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:18px;

}

.experience-box{

position:relative;

right:auto;

bottom:auto;

margin-top:30px;

}

.presentation-image{

margin-bottom:40px;

}

.service-card{

margin-bottom:30px;

}

.feature-box{

margin-bottom:25px;

}

.gallery-card{

margin-bottom:30px;

}

.fleet img{

height:320px;

}

.video-overlay h2{

font-size:40px;

}

.final-cta{

text-align:center;

}

.footer{

text-align:center;

}

.footer h4::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact li{

justify-content:center;

}

.footer-social{

justify-content:center;

}

}


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

@media (max-width:992px){

.navbar{

background:#111;

padding:15px 0;

}

.navbar-collapse{

background:#111;

padding:20px;

margin-top:15px;

border-radius:15px;

}

.nav-link{

display:block;

padding:12px 0;

margin-left:0;

}

.nav-link::after{

display:none;

}

}
/* ==========================================================
   RESPONSIVE.CSS
   PARTIE 2/3
   Tablettes - iPad - Grands Smartphones
========================================================== */


/* ==========================================================
   TABLETTES PAYSAGE
========================================================== */

@media (max-width:900px){

section{

padding:80px 0;

}

.hero{

padding:130px 0 90px;

min-height:auto;

}

.hero-content h1{

font-size:42px;

line-height:1.15;

}

.hero-content p{

font-size:17px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:280px;

}

.title-xl{

font-size:48px;

}

.title-lg{

font-size:40px;

}

.title-md{

font-size:32px;

}

.presentation-image img{

width:100%;

}

.video-banner{

height:480px;

}

.video-overlay h2{

font-size:36px;

}

.video-overlay p{

font-size:18px;

}

.gallery-card img{

height:260px;

}

.fleet img{

height:300px;

}

}


/* ==========================================================
   iPAD
========================================================== */

@media (max-width:768px){

.topbar{

display:none;

}

.hero{

text-align:center;

padding-top:120px;

}

.hero-content{

margin:auto;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:17px;

}

.section-title{

font-size:13px;

}

h2{

font-size:34px;

}

.stat-card{

margin-bottom:25px;

}

.service-card{

margin-bottom:25px;

}

.feature-box{

margin-bottom:25px;

}

.advantage-box{

margin-bottom:25px;

}

.card-modern{

margin-bottom:25px;

}

.gallery-card{

margin-bottom:25px;

}

.gallery-card img{

height:240px;

}

.fleet img{

height:280px;

}

.video-banner{

height:420px;

}

.video-overlay h2{

font-size:30px;

}

.video-overlay p{

font-size:16px;

}

.footer{

padding-top:60px;

}

.footer .row>div{

margin-bottom:40px;

}

.google-map iframe{

height:420px;

}

}


/* ==========================================================
   TABLETTES PORTRAIT
========================================================== */

@media (max-width:700px){

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

}

.btn{

padding:14px 24px;

font-size:15px;

}

.service-card{

padding:30px 22px;

}

.feature-box{

padding:28px 20px;

}

.stat-card{

padding:25px;

}

.stat-card h3{

font-size:34px;

}

.final-cta h2{

font-size:34px;

}

.final-cta p{

font-size:17px;

}

}


/* ==========================================================
   GRANDS SMARTPHONES
========================================================== */

@media (max-width:600px){

.hero{

padding:110px 0 80px;

}

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:16px;

}

.hero-buttons .btn{

width:100%;

}

.experience-box{

padding:20px;

}

.experience-box h2{

font-size:38px;

}

.gallery-card img{

height:220px;

}

.video-banner{

height:360px;

}

.video-overlay h2{

font-size:26px;

}

.video-overlay p{

font-size:15px;

}

.google-map iframe{

height:340px;

}

.whatsapp-float{

width:60px;

height:60px;

font-size:30px;

right:20px;

bottom:25px;

}

#backToTop{

right:20px;

bottom:95px;

width:50px;

height:50px;

}

}
/* ==========================================================
   RESPONSIVE.CSS
   PARTIE 3/3
   Smartphones - Optimisations
========================================================== */


/* ==========================================================
   SMARTPHONES
========================================================== */

@media (max-width:576px){

section{

padding:70px 0;

}

.container{

padding-left:20px;

padding-right:20px;

}

.hero{

padding:100px 0 70px;

}

.hero-content h1{

font-size:30px;

line-height:1.15;

margin-bottom:20px;

}

.hero-content p{

font-size:15px;

line-height:1.7;

margin-bottom:30px;

}

.hero-content h5{

font-size:13px;

padding:8px 18px;

}

.btn,
.btn-premium{

width:100%;

justify-content:center;

padding:16px;

font-size:15px;

}

.section-title{

font-size:12px;

padding:7px 16px;

}

h2{

font-size:30px;

}

h3{

font-size:24px;

}

h4{

font-size:20px;

}

p{

font-size:15px;

}

}


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

@media (max-width:576px){

.service-card,
.feature-box,
.advantage-box,
.card-modern,
.stat-card,
.testimonial-card{

padding:25px;

border-radius:18px;

}

.service-card i{

font-size:46px;

}

.icon-circle{

width:70px;

height:70px;

}

.icon-circle i{

font-size:32px;

}

}


/* ==========================================================
   GALERIE
========================================================== */

@media (max-width:576px){

.gallery-card img{

height:210px;

}

.fleet img{

height:230px;

}

.presentation-image{

margin-bottom:25px;

}

.video-banner{

height:300px;

}

.video-overlay h2{

font-size:22px;

}

.video-overlay p{

font-size:14px;

}

}


/* ==========================================================
   FORMULAIRE
========================================================== */

@media (max-width:576px){

input,
textarea,
select{

padding:15px;

font-size:15px;

}

textarea{

min-height:160px;

}

}


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

@media (max-width:576px){

.footer{

padding:60px 0 30px;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

.footer h4{

margin-top:20px;

}

.footer-contact li{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.copyright{

text-align:center;

font-size:14px;

}

}


/* ==========================================================
   COOKIE
========================================================== */

@media (max-width:576px){

#cookieBanner{

left:15px;

right:15px;

bottom:15px;

max-width:none;

padding:20px;

}

}


/* ==========================================================
   TRES PETITS TELEPHONES
========================================================== */

@media (max-width:400px){

.hero-content h1{

font-size:26px;

}

.hero-content p{

font-size:14px;

}

.btn,
.btn-premium{

font-size:14px;

padding:14px;

}

.gallery-card img{

height:180px;

}

.video-banner{

height:260px;

}

.video-overlay h2{

font-size:20px;

}

.whatsapp-float{

width:55px;

height:55px;

font-size:26px;

}

#backToTop{

width:45px;

height:45px;

font-size:18px;

}

}


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

@media (max-height:500px) and (orientation:landscape){

.hero{

height:auto;

padding:90px 0 70px;

}

.video-banner{

height:280px;

}

}


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

img{

max-width:100%;

height:auto;

}


/* ==========================================================
   TABLEAUX
========================================================== */

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}


/* ==========================================================
   VIDEOS
========================================================== */

video{

max-width:100%;

height:auto;

}


/* ==========================================================
   FLEX
========================================================== */

.d-mobile-column{

display:flex;

gap:20px;

}

@media (max-width:768px){

.d-mobile-column{

flex-direction:column;

}

}
/* ==========================================================
   CORRECTIF — PAGE ACCUEIL / PRESENTATION
   Titre + cartes mobiles
========================================================== */

/* PC : empêcher le menu fixe de recouvrir le titre */
#presentation {
    padding-top: 140px;
}

/* Les cartes restent propres sur desktop */
#presentation .feature-box {
    height: auto;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

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

@media (max-width: 768px) {

    /* Espace sous le menu fixe */
    #presentation {
        padding-top: 110px;
    }

    /* Le titre ne doit jamais être coupé */
    #presentation .section-title {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    #presentation .section-title h2 {
        font-size: 30px;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Une carte par ligne sur téléphone */
    #presentation .row.mt-4 > .col-6 {
        width: 100%;
    }

    /* Cartes adaptées au téléphone */
    #presentation .feature-box {
        width: 100%;
        min-height: 110px;
        height: auto;
        padding: 20px 15px;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    #presentation .feature-box i {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    /* Image de présentation */
    #presentation .presentation-image {
        width: 100%;
        margin-top: 20px;
    }

    #presentation .presentation-image img {
        width: 100%;
        height: auto;
    }
}

/* Très petits téléphones */
@media (max-width: 400px) {

    #presentation {
        padding-top: 105px;
    }

    #presentation .section-title h2 {
        font-size: 27px;
    }

    #presentation .feature-box {
        min-height: 100px;
        padding: 18px 12px;
    }
}
/* ==========================================================
   XCS — MOBILE UNIQUEMENT
   À ajouter à la FIN de css/responsive.css
   Aucun style hors @media ne modifie le PC.
========================================================== */

@media (max-width:768px){

/* ---------- BASE ---------- */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.container{width:100%;max-width:100%;padding-left:18px;padding-right:18px}
section.section,section.section-padding,section.py-5,section.realisations,section.advantages,section.cta-section,section.presentation-video,section.fleet,section.before-after{padding-top:48px!important;padding-bottom:48px!important}
p{font-size:15px;line-height:1.6}
h1{font-size:clamp(28px,8vw,38px)!important;line-height:1.15!important}
h2{font-size:clamp(24px,7vw,32px)!important;line-height:1.2!important}
h3{font-size:22px!important;line-height:1.25!important}
h4{font-size:19px!important;line-height:1.3!important}
.section-title{display:inline-block;max-width:100%;font-size:.9rem!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere}
.btn,.btn-premium{min-height:46px;padding:11px 18px!important;font-size:.95rem!important}
img,video,iframe{max-width:100%}

/* ---------- MENU ---------- */
.navbar,.navbar .container{min-height:74px}
.navbar-brand img{width:auto;max-width:245px;max-height:58px;object-fit:contain}
.navbar-toggler{padding:8px 10px;margin-left:8px}
.navbar-collapse{background:#050505;margin-left:-18px;margin-right:-18px;padding:10px 18px 18px}
.navbar-nav{width:100%;gap:2px;align-items:stretch}
.navbar-nav .nav-link{width:100%;padding:11px 12px!important;font-size:.95rem;border-radius:10px}
.navbar-nav .btn{width:100%;margin-top:6px;text-align:center}

/* ---------- HERO : TOUTES LES PAGES ---------- */
.hero{min-height:52vh!important;height:auto!important;max-height:560px;padding:110px 0 55px!important}
.hero-content{width:100%;max-width:100%;padding:0 5px}
.hero-content h1,.hero-content h2{max-width:100%;overflow-wrap:anywhere}
.hero-content p,.hero-content .lead{font-size:15px!important;line-height:1.55;max-width:100%}
.hero-buttons{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:20px!important}
.hero-buttons .btn,.hero-buttons .btn-premium{width:100%;margin:0!important}
.hero-small{min-height:44vh!important;max-height:480px;padding:105px 0 45px!important}
.hero.hero-video{min-height:55vh!important;height:55vh!important;max-height:540px!important;padding:95px 0 40px!important}
.hero.hero-video .hero-content{padding:0 12px}

/* ---------- ACCUEIL / PRESENTATION ---------- */
#presentation{padding-top:42px!important;padding-bottom:42px!important}
#presentation .row.align-items-center{display:flex;flex-direction:column}
#presentation .col-lg-6{width:100%;max-width:100%}
#presentation .section-title{display:block;width:100%;padding:12px 16px 15px;margin-bottom:18px;border-radius:28px;box-sizing:border-box;overflow:visible}
#presentation .section-title>h2{font-size:clamp(25px,7.5vw,33px)!important;line-height:1.15!important;overflow-wrap:anywhere}
#presentation .row.mt-4{margin-top:20px!important}
#presentation .row.mt-4>.col-6{width:100%;margin-top:0!important;margin-bottom:12px}
#presentation .feature-box{min-height:0;height:auto!important;padding:20px 15px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;font-size:15px}
#presentation .feature-box i{font-size:2rem}
#presentation .presentation-image{margin-top:22px!important}
#presentation .presentation-image img{width:100%;height:auto;display:block}
#presentation .experience-badge{transform:scale(.9);transform-origin:bottom right}

/* ---------- ACCUEIL / VIDEO ---------- */
.presentation-video .row{display:flex;flex-direction:column}
.presentation-video .col-lg-6{width:100%;max-width:100%;margin-bottom:22px!important}
.presentation-video video{width:100%;height:auto;max-height:300px;object-fit:cover;border-radius:14px}
.presentation-video p{font-size:14px;margin-bottom:12px}
.presentation-video ul{margin-top:16px!important;padding-left:0;font-size:14px}
.presentation-video li{margin-bottom:7px}
.video-banner,.video-overlay{min-height:420px!important}

/* ---------- ACCUEIL / PARC MATERIEL ---------- */
.fleet{padding-top:42px!important;padding-bottom:42px!important}
.fleet .text-center.mb-5{margin-bottom:24px!important}
.fleet .swiper{width:100%;overflow:hidden}
.fleet .swiper-slide{display:flex;justify-content:center}
.fleet .swiper-slide img{width:100%;height:280px;object-fit:cover;object-position:center;border-radius:14px}

/* ---------- SERVICES ---------- */
.services-grid{grid-template-columns:1fr!important;gap:18px!important}
.service-card{height:auto!important}
.service-card img{height:190px!important}
.service-content{padding:20px!important}
.service-icon{width:58px;height:58px;font-size:1.55rem;margin-bottom:14px}
section .row.g-4>.col-lg-3{width:100%}
.feature-box{padding:22px 16px}

/* ---------- BROYEUR ---------- */
.broyeur-banner{padding:32px 20px!important;border-radius:18px}
.broyeur-banner h2{font-size:25px!important}
.broyeur-banner h3{font-size:20px!important}
.machine-specs{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:22px}
.spec-box{padding:14px 8px!important;font-size:13px}
.spec-box strong{display:block;font-size:15px}
.hero.hero-video .hero-video-bg{object-fit:cover}

/* ---------- BENNES ---------- */
.benne-card{padding:22px 16px!important;height:auto!important}
.benne-volume{font-size:2.1rem!important}
.benne-card img{max-height:210px;width:100%;object-fit:cover}

/* ---------- CAMIONS / TRACTO / NACELLE ---------- */
.equipment-card,.project-card{height:auto!important;padding:18px!important}
.equipment-card img,.project-card img{width:100%;height:210px;object-fit:cover}
.equipment-card h3,.equipment-card h4{font-size:19px!important}
.statistics .row>[class*=col-],section.bg-success .row.text-center>[class*=col-]{width:50%;margin-bottom:22px}
.counter{font-size:2.35rem!important}
.counter+p{font-size:.82rem!important;line-height:1.35}
.stats-box,.stat-card{padding:20px 8px!important}

/* ---------- ESPACES VERTS ---------- */
.advantages{padding-top:42px!important;padding-bottom:42px!important}
.advantage-box{height:auto!important;padding:20px 16px!important;margin-bottom:0}
.advantage-box h4{margin-bottom:7px}
.advantage-box p{font-size:14px;margin-bottom:0}

/* ---------- REALISATIONS / GALERIES ---------- */
.gallery-grid{grid-template-columns:1fr!important;gap:16px!important}
.gallery-item img{height:210px!important;object-fit:cover}
.gallery-card{margin-bottom:0}
.gallery-card img{width:100%;height:auto;max-height:300px;object-fit:cover}
.realisations .row>[class*=col-]{width:100%}
.realisations .text-center.mb-5{margin-bottom:24px!important}
.realisations .text-center.mt-5{margin-top:24px!important}

/* ---------- AVANT / APRES ---------- */
.before-after-container{width:100%!important;height:250px!important;min-height:250px!important;aspect-ratio:16/9!important}
.before-after .text-center.mb-5{margin-bottom:22px!important}
.before-after p{font-size:14px}
.before-after .slider-button{width:42px!important;height:42px!important}

/* ---------- TEMOIGNAGES ---------- */
.testimonial-card{height:auto!important;padding:20px!important}
.testimonial-card p{font-size:14px}

/* ---------- CTA ---------- */
.cta-section{text-align:center}
.cta-section .row{display:flex;flex-direction:column}
.cta-section [class*=col-]{width:100%;text-align:center!important}
.cta-section .btn,.cta-section .btn-premium{width:100%;margin-top:12px}

/* ---------- CONTACT ---------- */
.contact-form{padding:20px!important;border-radius:18px!important}
.contact-form .row>[class*=col-]{width:100%}
.contact-form .form-control,.contact-form .form-select{min-height:50px;padding:12px 14px;font-size:16px}
.contact-form textarea.form-control{min-height:150px}
.contact-form .form-check-label{font-size:.88rem;line-height:1.45}
.contact-form button[type=submit]{width:100%;min-width:0}

/* ---------- FAQ ---------- */
.accordion-button{padding:16px!important;font-size:.95rem!important}
.accordion-body{padding:16px!important;font-size:14px;line-height:1.6}

/* ---------- HORAIRES / CARTE ---------- */
.opening-hours .d-flex{padding:12px 15px;font-size:14px}
.map-wrapper{border-radius:14px}
.map-wrapper .ratio{min-height:280px}

/* ---------- WHATSAPP ---------- */
.whatsapp-float{width:62px!important;height:62px!important;right:16px!important;bottom:16px!important;z-index:9997}
.whatsapp-float i{font-size:28px!important}

/* ---------- FOOTER ---------- */
footer{text-align:center}
footer .row>[class*=col-]{width:100%;margin-bottom:24px}
footer ul{padding-left:0;list-style:none}
}

@media (max-width:400px){
    .container{padding-left:14px;padding-right:14px}
    .navbar-brand img{max-width:205px;max-height:52px}
    .hero{padding-top:100px!important}
    .hero-small{padding-top:98px!important}
    #presentation .section-title>h2{font-size:25px!important}
    .machine-specs{grid-template-columns:1fr!important}
    .fleet .swiper-slide img{height:250px}
    .counter{font-size:2rem!important}
    .counter+p{font-size:.78rem!important}
    .before-after-container{height:220px!important;min-height:220px!important}
}
/* ==========================================================
   XCS — CORRECTION MENU MOBILE / PAGE ACCUEIL
========================================================== */

@media (max-width: 768px) {

    /* Le menu fixe ne doit plus masquer le début du contenu */
    body {
        padding-top: 88px;
    }

    /* On garde le menu compact */
    .navbar {
        padding: 10px 0 !important;
        min-height: 78px;
    }

    .navbar-brand img {
        height: 55px !important;
        width: auto;
    }

    .navbar .container {
        min-height: 58px;
    }

    /* Le début du hero reste entièrement visible */
    .hero {
        padding-top: 55px !important;
    }
}
/* ==========================================================
   XCS — CARROUSEL NOTRE PARC
   Images carrées sans déformation
========================================================== */

.fleetSwiper {
    position: relative;
    width: 100%;
}

.fleetSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fleetSwiper .swiper-slide img {
    display: block;
    width: min(70vw, 520px);
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    border-radius: 18px;
}

/* Mobile */
@media (max-width: 768px) {

    .fleetSwiper .swiper-slide img {
        width: min(78vw, 360px);
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: cover;
    }
}
/* ==========================================================
   FLÈCHES CARROUSEL — PC UNIQUEMENT
========================================================== */

.fleetSwiper .swiper-button-prev,
.fleetSwiper .swiper-button-next {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
}

.fleetSwiper .swiper-button-prev::after,
.fleetSwiper .swiper-button-next::after {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 768px) {

    .fleetSwiper .swiper-button-prev,
    .fleetSwiper .swiper-button-next {
        display: none;
    }
}
/* ==========================================================
   XCS — CARROUSEL NOTRE PARC
   Flèches PC + taille des images mobile
========================================================== */

/* ----- PC : flèches bien visibles ----- */

.fleetSwiper {
    position: relative;
}

.fleetSwiper .swiper-button-prev,
.fleetSwiper .swiper-button-next {
    display: flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1ca44c;
    z-index: 10;
}

.fleetSwiper .swiper-button-prev::after,
.fleetSwiper .swiper-button-next::after {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
}

/* ----- Images carrées ----- */

.fleetSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fleetSwiper .swiper-slide img {
    display: block;
    width: 500px;
    height: 500px;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    border-radius: 18px;
}

/* ----- MOBILE ----- */

@media (max-width: 768px) {

    /* Image beaucoup plus grande sur téléphone */
    .fleetSwiper .swiper-slide img {
        width: 88vw;
        height: 88vw;
        max-width: 380px;
        max-height: 380px;
        object-fit: cover;
        object-position: center;
        border-radius: 18px;
    }

    /* Les flèches restent uniquement sur PC */
    .fleetSwiper .swiper-button-prev,
    .fleetSwiper .swiper-button-next {
        display: none;
    }
}

/* ----- TRÈS PETITS TÉLÉPHONES ----- */

@media (max-width: 400px) {

    .fleetSwiper .swiper-slide img {
        width: 88vw;
        height: 88vw;
        max-width: 350px;
        max-height: 350px;
    }
}
/* ==========================================================
   XCS — CORRECTION BOÎTES DE PRÉSENTATION MOBILE
   Uniquement sur la page d'accueil / présentation
========================================================== */

@media (max-width: 768px) {

    #presentation .row.mt-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 14px !important;
    }

    #presentation .row.mt-4 > .col-6 {
        width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 0 !important;
    }

    #presentation .feature-box {
        width: 100% !important;
        min-height: 145px !important;
        height: auto !important;
        padding: 22px 10px !important;
        margin: 0 !important;

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

        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }

    #presentation .feature-box i {
        display: block !important;
        flex: 0 0 auto !important;
        font-size: 2.4rem !important;
        margin: 0 0 14px 0 !important;
    }

    #presentation .feature-box {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
}
/* ==========================================================
   FIN RESPONSIVE
========================================================== */