/* ===================================
    Crafto - It business
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
/* variable */
:root {     
    --base-color: #FF0000; 
    --black:#231F20;
    --gray:#E9E9E9;
    --white:#ffffff;
    --beige:#B6A08E;

    --dark-gray:#252840;
    --medium-gray:#7d8087;
    --very-light-gray: #f0f2f8;
    
    --primary-font: 'Poppins', sans-serif;
    --alt-font: 'Poppins', sans-serif;
}
/* reset */
body{
    line-height: 29px;
    font-family: var(--primary-font);
    font-weight: 400;
    color: var(--dark-gray);
}

/* --- Base commune pour les titres --- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--primary-font);
    margin-bottom: 0;
}

/* --- Styles spécifiques --- */

h1, .h1 {
    font-size: 4rem;             /* 64px */
    font-weight: 500;           /* Medium */
    line-height: 1.1;           /* 110% */
    letter-spacing: -0.03em;    /* -3% */
}

h2, .h2 {
    font-size: 2.25rem;          /* 36px */
    font-weight: 500;           /* Medium */
    line-height: 1.0;           /* 100% */
    letter-spacing: 0;
}

h3, .h3 {
    font-size: 1.25rem;          /* 20px */
    font-weight: 600;           /* SemiBold */
    line-height: 1.1;           /* 110% */
    letter-spacing: 0;
}

h4, .h4 {
    font-size: 1rem;             /* 16px */
    font-weight: 300;           /* Light */
    line-height: 24px;          /* Fixe à 24px selon demande */
    letter-spacing: 0;
    text-transform: uppercase;
}

/* --- Body & Boutons --- */

body {
    font-family: var(--primary-font);
    font-weight: 400;           /* Regular */
    font-size: 1rem;             /* 16px */
    line-height: 1.4;           /* 140% */
}

.btn-custom { /* Remplace par ta classe de bouton */
    font-family: var(--primary-font);
    font-weight: 600;           /* SemiBold */
    font-size: 0.8125rem;       /* 13px */
    line-height: 1.1;           /* 110% */
    letter-spacing: 0.08em;     /* 8% */
    text-transform: uppercase;
}
/* header */
header .navbar-brand img {
    max-height: 32px;
} 
.navbar .navbar-nav .nav-link {
    font-size: 17px;
}
header .btn.btn-rounded.btn-large {
    padding:10px 26px;
    font-size: 13px;
    font-weight: 500;
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--extra-medium-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background:  var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{
    opacity: .5;
}
/* btn */
[class*=btn-transparent], [class*=" btn-transparent"] {
    font-weight: 500;
}
.btn {
    text-transform: none;
    font-family: var(--primary-font);
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 19px 40px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}


/* footer */
footer .footer-logo img {
    max-height: 35px;
}
footer ul li {
    margin-bottom: 0;
}
.footer-light a:hover, .footer-navbar li a:hover {
    color: var(--dark-gray);
}
.text-dark{
    color:var(--dark-gray);
}
.btn.btn-transparent-light-gray:hover {
  background-color: var(--base-color)!important;
  border-color: var(--base-color)!important;
  color: #ffffff!important;
}
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
  }

@media (max-width: 1299px) {
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
    }
    header .btn.btn-rounded.btn-large {
        padding: 10px 15px;
        font-size: 12px; 
    }
}
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
    header .btn.btn-rounded.btn-large {
        padding: 10px 10px;
        font-size: 11px; 
    }
}
@media (max-width: 991px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
        padding-bottom: 17px;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
        font-size: 19px;
    }
    header .btn.btn-rounded.btn-large {
        color: var(--dark-gray);
        border-color: var(--extra-medium-gray);
        padding: 10px 15px;
        font-size: 13px;
    }
}

.navbar .navbar-nav .nav-item.active .nav-link {
  opacity: 1;
}
.cover-background-custom {
    background-repeat: no-repeat !important;
    background-size: cover;
    background-position: center bottom !important; /* Good for desktop */
}

@media (max-width: 767px) {
    .cover-background-custom {
        /* This pushes the image focal point to the right 
           so her face moves away from the top-left text area */
        background-position: 80% bottom !important; 
    }

    /* Force the container to align text to the top for the mobile look */
    .swiper-slide .row {
        align-items: flex-start !important;
        padding-top: 22%; /* Moves text above her head as seen in mockup */
    }

    h1, .h1 {
        font-size: clamp(1.8rem, 10vw, 2.25rem) !important;
        line-height: 1.1;
    }
}

/* Accueil */

        /* --- STYLES PROMO (Inchangés) --- */
        .hover-reveal-block {
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: 2;
            position: relative;
        }

        .red-dot {
            width: 20px;
            height: 20px;
            background-color: #e63946;
            border-radius: 50%;
            margin: 15px auto 0;
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .static-box {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            min-width: 800px;
        }

        .static-box-in {
            min-width: 200px;
        }

        .promo-col:hover .hover-reveal-block {
            transform: translateY(-15px);
        }

        .promo-col:hover .red-dot {
            opacity: 1;
            transform: translateY(0);
        }

        .promo-col .bg-overlay {
            transition: background-color 0.3s ease;
        }

        .promo-col:hover .bg-overlay {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        /* --- NOUVELLE STRUCTURE DE FOND --- */
        .scoop-top-content {
            background-color: #ffffff;
            padding: 150px 0 60px 0;
            /* Un peu de padding pour l'espace */
        }

        /* ✅ keep natural flow, no overlap hacks */
        .scoop-brown-section {
            position: relative;
            padding: 40px 0 100px 0;
            background: none;
            /* remove full brown */
            z-index: 1;
        }

        /* ✅ controlled brown height (visual only) */
        .scoop-brown-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 280px;
            /* 🔥 adjust this */
            background-color: #c0b0a0;
            z-index: -1;
            /* IMPORTANT: stays behind everything */
        }

        /* ✅ keep your cards normal */
        .scoop-cards-wrapper {
            margin-top: 60px;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }



        /* L'image de droite qui vient s'appuyer sur la ligne brune */
        .scoop-overlap-image {
            position: relative;
            z-index: 10;
            border-radius: 6px;
            margin-bottom: -200px;
            /* Aligne le bas de l'image sur le début du brun */
        }

        .scoop-category-banner {
            height: 550px;
            position: relative;
            overflow: hidden;
            display: block;
        }

        .scoop-no-gutter {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .scoop-no-gutter>[class*='col-'] {
            padding: 0 !important;
        }

        .active-selection {
            border: 4px solid #7c4dff !important;
            z-index: 20;
        }

        .scoop-btn-pill {
            border-radius: 50px !important;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 1px;
            border: 1px solid #231F20 !important;
        }

        .border-color-dark {
            border-color: #231F20 !important;
        }




        /* --- SECTION BRANDS SLIDER OPTIMISÉE --- */
        .brand-slider-section {
            padding: 80px 0;
            background: #f5f5f5;
        }

        /* 1. On applique l'arrondi sur le conteneur Swiper lui-même */
        .brand-swiper {
            border-radius: 20px;
            /* L'arrondi global sur les coins extérieurs */
            overflow: hidden;
            /* Coupe tout ce qui dépasse (les coins des images) */
            z-index: 1;
        }

        .brand-card {
            position: relative;
            /* 2. On retire le radius individuel pour que les slides se collent parfaitement */
            border-radius: 0;
            overflow: hidden;
            height: 420px;
            cursor: pointer;
        }

        .brand-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .brand-card:hover img {
            transform: scale(1.05);
        }

        .brand-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
        }

        .brand-logo {
            position: absolute;
            bottom: 25px;
            left: 25px;
            color: white;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 2px;
        }

        .brand-nav {
            margin-top: 20px;
        }

        .brand-nav button {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 1px solid #ccc;
            background: white;
            margin-right: 10px;
        }

        .scoop-accordion .accordion-item {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid #231F20;
            /* Ligne fine grise comme l'image */
            border-radius: 0 !important;
        }
        

        /* Bouton de l'accordéon */
        .scoop-accordion .accordion-button {
            background-color: transparent;
            color: #231F20;
            font-family: 'Poppins', sans-serif;
            font-size: 26px;
            /* Taille augmentée pour correspondre à l'image */
            font-weight: 500;
            padding: 35px 0;
            box-shadow: none;
            border: none;
        }

        /* État actif (ouvert) */
        .scoop-accordion .accordion-button:not(.collapsed) {
            color: #231F20;
            background-color: transparent;
            box-shadow: none;
        }

        /* Texte en gras pour la ville */
        .scoop-accordion .branch-bold {
            font-weight: 700;
            margin-left: 5px;
        }

        /* --- L'ICÔNE CERCLE + FLÈCHE --- */
        .accordion-button::after {
    background-image: none !important; /* On vire la flèche Bootstrap par défaut */
    
    /* Contenu : Ta flèche fine orientée vers le bas */
    content: "↓"; 
    font-family: 'feather' !important; /* Si tu utilises la police Feather Icons */
    font-size: 14px;
    color: #4a3e3d;
    
    /* C'est ici qu'on fait l'ovale vertical */
    width: 38px;       /* Moins large */
    height: 46px;      /* Plus haut */
    border: 1px solid #4a3e3d;
    border-radius: 100px; /* Donne la forme de capsule/ovale parfaite */
    
    /* Centrage de la flèche à l'intérieur */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Ajustement de la transition si nécessaire */
    transition: transform 0.3s ease;
}

        /* Rotation et changement de couleur à l'ouverture */
        .scoop-accordion .accordion-button:not(.collapsed)::after {
            transform: rotate(180deg);
            background-color: var(--base-color);
            border: 1px solid var(--base-color);
          
        }

        /* Contenu de l'adresse */
        .scoop-accordion .accordion-body {
            padding: 0 0 40px 0;
            font-size: 18px;
            color: #444;
            line-height: 1.6;
        }




        .scoop-guarantee-section {
            background-image: url('/frnt/images/pages/accueil/img-garantie_couple-lunette.webp');
            /* REMPLACEZ PAR VOTRE URL */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 700px;
            /* Ajustez selon vos besoins (hauteur de l'image) */
            position: relative;
            display: flex;
            align-items: center;
            /* Centre le contenu verticalement */
        }

        /* 2. Info Square (Garantie) */
        .info-square-bordered {
            border: 1px solid rgba(255, 255, 255, 0.4);
            /* Trait fin blanc translucide */
            border-radius: 20px;
            /* Arrondi généreux selon l'image */
            background-color: transparent;
            padding: 40px;
            color: #ffffff;
            font-family: 'Poppins', sans-serif;
            font-size: 20px;
            /* Taille approximative du texte */
            font-weight: 400;
            line-height: 1.5;
            max-width: 400px;
            /* Limite la largeur de la boîte */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            /* Légère ombre pour détacher l'info du fond */
        }

        /* 3. Bouton spécifique "En savoir plus" */
        .scoop-guarantee-section .btn-sc-outline {
            border: 1px solid rgba(255, 255, 255, 0.4);
            background-color: transparent;
            color: #ffffff !important;
            border-radius: 50px;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            width: 200px;
        }

        .scoop-guarantee-section .btn-sc-outline:hover {
            background-color: var(--base-color);

        }

        /* Responsive adjustments */
        @media (max-width: 991px) {
            .scoop-guarantee-section {
                min-height: 500px;
                /* Plus court sur tablette */
                background-position: 70% center;
                /* Ajuste la position pour garder les visages visibles */
            }
        }

        @media (max-width: 767px) {
            .scoop-guarantee-section {
                background-image: url('/frnt/images/pages/accueil/img-garantie_couple-lunette.webp');
                /* Optionnel: image mobile optimisée */
                min-height: auto;
                padding: 80px 0;
                display: block;
                /* Contenu s'empile verticalement */
            }

            .info-square-bordered {
                margin-bottom: 20px;
                max-width: 100%;
                text-align: center;
            }

            .guarantee-col {
                text-align: center;
                /* Centre le bouton sur mobile */
            }
        }

        /* Accueil */

        /* Montures */
    /* --- CORE STYLES --- */
    .bg-taupe-brown {
        background-color: #b19685 !important;
    }

    .bg-very-light-gray {
        background-color: #edeff2 !important;
    }

    .h-50 {
        height: 50% !important;
        min-height: 400px;
    }

    .overlap-image {
        max-width: 80%;
        transform: rotate(12deg);
        z-index: 5;
        filter: drop-shadow(30px 40px 30px rgba(0, 0, 0, 0.2));
    }

    .p-5js {
        padding: 5%;
        padding-top: 0px;
    }

    /* --- MOBILE OVERLAP LOGIC --- */
    @media (max-width: 991px) {
        .h-50 {
            min-height: auto;
        }

        .mobile-overlap-wrapper {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            z-index: 10;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .mobile-overlap-wrapper .overlap-image {
            max-width: 40%;
            margin-left: 70%;
            transform: rotate(12deg);
            display: block;
        }

        .bg-taupe-brown {
            padding-bottom: 80px !important;
        }

        .bg-very-light-gray {
            padding-top: 80px !important;
        }

        .p-5js {
            padding: 5% !important;
            padding-top: 170px !important;
        }

        .mb-js100 {
            margin-bottom: 50px !important;
        }
    }

    /* Brand Logo Styling */
    .swiper-slide img {
        filter: grayscale(100%);
        opacity: 0.7;
        transition: all 0.3s ease;
    }

    .swiper-slide img:hover {
        filter: grayscale(0%);
        opacity: 1;
    }

    .topjs-50 {
        top: 50% !important;
    }

    .max-w-700 {
        max-width: 700px;
    }

    /* --- OVAL BUTTONS CORE STYLE --- */
    .custom-oval-btn {
        width: 65px !important;
        height: 40px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;
        z-index: 10;
    }

    .custom-oval-btn::after {
        display: none !important;
    }

    .custom-oval-btn i {
        font-size: 16px;
    }

    .custom-oval-btn:hover {
        background-color: #000 !important;
        color: #fff !important;
        border-color: #000 !important;
    }

    /* --- NAVIGATION POSITIONING (Fixed for Resize) --- */

    /* Mobile: Stacked bottom-left */
    @media (max-width: 991px) {
        .custom-nav-container {
            display: flex !important;
            gap: 10px;
            margin-top: 30px;
        }

        .custom-oval-btn {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            margin: 0 !important;
        }
    }

    /* Desktop: Stay inside viewport edges */
    @media (min-width: 992px) {
        .custom-nav-container {
            display: contents !important;
        }

        .custom-oval-btn {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%);
        }

        .slider-prev {
            left: 15px !important;
        }

        .slider-next {
            right: 15px !important;
        }
    }

    /* Hide default Crafto arrows */
    .logo-slider-wrapper .swiper-button-prev:not(.custom-oval-btn),
    .logo-slider-wrapper .swiper-button-next:not(.custom-oval-btn) {
        display: none !important;
    }

    /* Section specific styles */
    .warranty-section {
        background-image: url('path-to-your-store-image.webp');
        /* Update this path */
        background-size: cover;
        background-position: center;
        position: relative;
        min-height: 500px;
        display: flex;
        align-items: center;
    }

    .warranty-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        /* Adjust darkness as needed */
        z-index: 1;
    }

    .warranty-content {
        position: relative;
        z-index: 2;
        /* Matches the left-aligned look in your image */
    }

    .warranty-box {
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 30px;
        max-width: 400px;
        margin-bottom: 20px;
        backdrop-filter: blur(2px);
    }

    .warranty-text {
        color: #ffffff;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
        font-family: 'Alt Font', sans-serif;
        /* Matches your theme */
    }

    .btn-warranty {
        border: 1px solid #ffffff !important;
        background: transparent !important;
        color: #ffffff !important;
        border-radius: 50px !important;
        padding: 10px 30px !important;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
    }

    .btn-warranty:hover {
        background: #ffffff !important;
        color: #000000 !important;
    }
        /* Montures */

        /* Montures pour */
   .bg-taupe-brown {
        background-color: #b19685 !important;
    }

    .bg-very-light-gray {
        background-color: #edeff2 !important;
    }

    .image-overlap-wrapper {
        position: relative;
        z-index: 10;
    }

    /* Desktop Overlap */
    @media (min-width: 992px) {
        .image-overlap-wrapper {
            transform: translateY(120px);
        }

        .spacer-bottom {
            padding-bottom: 150px;
        }
    }

    /* Mobile Specific Fixes */
    @media (max-width: 991px) {
        .image-overlap-wrapper {
            /* This pulls the image down so it sits on the line */
            margin-bottom: -100px;
            padding: 0 15px;
        }

        .spacer-bottom {
            /* Creates space for the image we pushed down */
            padding-top: 120px !important;
            padding-bottom: 60px;
        }

        .title-mobile {
            font-size: 2.2rem;
            line-height: 1.1;
        }
    }

    .rounded-image-custom {
        border-radius: 15px;
        width: 100%;
        display: block;
    }

    /* The bright red button from your mobile screenshot */
    .btn-scoop-red {
        background-color: #ff0000 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 15px 35px !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        width: 100%;
        /* Full width on mobile as per image */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* Frame Section Styles */
    .bg-light-gray-section {
        background-color: #e9e9e9;
        /* Matches the screenshot background */
    }

    .frame-card {
        background: #fff;
        border-radius: 12px;
        padding: 30px;
        transition: transform 0.3s ease;
        margin-bottom: 20px;
    }

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

    .frame-card img {
        width: 100%;
        height: auto;
    }

    .frame-title {
        font-size: 14px;
        font-weight: 700;
        margin-top: 15px;
        color: #000;
    }

    .frame-model {
        font-weight: 400;
        color: #999;
    }

    .promo-box {
        border: 1px solid #707070;
        padding: 15px 25px;
        border-radius: 8px;
        display: inline-block;
        width: 225px;
    }

    .btn-outline-pill {
        border: 1px solid #000;
        border-radius: 50px;
        padding: 8px 20px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        color: #000;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
.bg-taupe-light {
        background-color: #bcab99; /* Matches the brownish-beige background */
    }

    .feature-box {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 20px;
        position: relative;
        transition: all 0.3s ease;
    }

    .feature-box:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .feature-number {
        font-size: 24px;
        font-weight: 500;
        opacity: 0.8;
    }

    .feature-title {
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 10px;
        display: block;
        max-width: 80%;
    }

    .feature-text {
        font-size: 14px;
        line-height: 1.5;
        opacity: 0.9;
    }
        /* Montures pour */
/* Fix pour les chiffres 01, 02... */
.min-w-50px {
    min-width: 60px !important; /* Empêche le chiffre de se casser sur 2 lignes */
    line-height: 1;
}

.card-feature-custom {
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.card-feature-custom:hover {
    border-color: #e4e4e4;
    transform: translateX(5px);
}

/* Fix pour l'Overlap des images du bas */
.section-overlap-container {
    transform: translateY(120px); /* Pousse les images vers le bas (sur le noir) */
    margin-bottom: 0;
    z-index: 5;
    position: relative;
}

.section-dark-footer {
    position: relative;
    z-index: 1; /* Doit être plus bas que les images */
    padding-top: 150px; /* Espace pour pas que les images cachent le texte du footer */
}

/* Design des bannières */
.interactive-banner-custom {
    height: 600px;
}

.interactive-banner-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1);
}

.interactive-banner-custom:hover img {
    transform: scale(1.05);
}

.overlay-text-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

.ls-2px { letter-spacing: 2px !important; }

/* Bouton correction */
.btn-round-edge {
    border-radius: 50px !important;
    padding: 12px 28px !important;
    display: inline-block;
}
/* Empêche les chiffres (01, 02) de se couper ou de passer à la ligne */
.fs-30 {
    font-size: 30px !important;
}

.lh-1 {
    line-height: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
    min-width: 45px; /* Assure assez d'espace horizontal pour le chiffre */
    text-align: right;
}

/* Style des cartes */
.card-feature-custom {
    transition: all 0.3s ease;
    min-height: 110px; /* Aligne les hauteurs */
}

.card-feature-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* Fix pour l'Overlap */
/* On utilise une marge négative sur la section parente et un padding sur la suivante */
.interactive-banner-custom {
    height: 550px; /* Force la hauteur pour l'overlap */
    background-color: #231F20;
}

.interactive-banner-custom img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.overlay-text-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

/* Bouton style Crafto */
.btn-round-edge {
    border-radius: 50px !important;
    padding: 10px 25px !important;
    border: 1px solid #231F20 !important;
}
/* On force le rangée d'images à descendre de 100px sur la section suivante */
.overlap-bottom-custom {
    margin-bottom: -120px; /* Ajuste ce chiffre pour descendre plus ou moins */
    position: relative;
    z-index: 5; /* Assure que les images passent par dessus le noir */
}

/* Style pour le texte à l'intérieur des images (comme sur ta capture) */
.custom-banner {
    height: 500px;
}
.custom-banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.fs-11 { font-size: 11px; }

/* Important : La section noire doit avoir un padding-top suffisant 
   pour que son contenu ne soit pas caché sous les images qui dépassent */
.bg-dark-gray {
    position: relative;
    z-index: 1;
}

.img-box {
    width: 100%;      
    height: 50px;    
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; 
}

.img-box img {
    max-width: 100%;   
    max-height: 100%;  
    width: auto;      
    height: auto;     
    object-fit: contain;
}
.app{
    max-width: 150px;
}
.btn-red {
    background-color: #d51d2c;
    color: #fff;
    border: 1px solid #d51d2c;
    transition: all 0.25s ease;
}

.btn-red:hover,
.btn-red:focus {
    background-color: #d51d2c;
    border-color: #d51d2c;
    color: #fff;
}