/* ==========================================================
   QUE FAIRE EN FRANCE
   HOME DESIGN V1
   Portée : index.html uniquement
   ========================================================== */

body.home-design-v1 {
    --qf-navy: #071b34;
    --qf-navy-2: #0b294d;
    --qf-blue: #1f63e9;
    --qf-blue-soft: #eaf2ff;
    --qf-red: #eb3349;
    --qf-cream: #f7f8fa;
    --qf-white: #ffffff;
    --qf-text: #12243a;
    --qf-muted: #64748b;
    --qf-border: rgba(15, 42, 72, .09);
    --qf-shadow: 0 18px 55px rgba(7, 27, 52, .10);
    --qf-shadow-hover: 0 26px 70px rgba(7, 27, 52, .16);

    margin: 0;
    color: var(--qf-text);
    background:
        radial-gradient(circle at 8% 5%, rgba(31,99,233,.07), transparent 30rem),
        radial-gradient(circle at 92% 22%, rgba(235,51,73,.045), transparent 27rem),
        var(--qf-cream);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


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

.home-design-v1 .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(7,27,52,.07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 6px 28px rgba(7,27,52,.045);
}

.home-design-v1 .navbar {
    min-height: 82px;
    gap: 28px;
}

.home-design-v1 .navlinks {
    gap: 5px;
    align-items: center;
}

.home-design-v1 .navlinks > a:not(.nav-cta) {
    position: relative;
    padding: 10px 13px;

    color: #203751;
    font-size: .94rem;
    font-weight: 650;

    border-radius: 12px;

    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.home-design-v1 .navlinks > a:not(.nav-cta):hover {
    color: var(--qf-blue);
    background: var(--qf-blue-soft);
    transform: translateY(-1px);
}

.home-design-v1 .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 19px !important;

    color: #fff !important;
    font-weight: 750 !important;

    border-radius: 14px !important;

    background:
        linear-gradient(135deg, #1661e8, #2c77f2) !important;

    box-shadow:
        0 10px 24px rgba(31,99,233,.25);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.home-design-v1 .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 15px 32px rgba(31,99,233,.32);
}


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

.home-design-v1 .hero {
    position: relative;

    width: min(calc(100% - 32px), 1500px);
    min-height: 610px;

    margin: 20px auto 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-radius: 36px;

    background: var(--qf-navy);

    box-shadow:
        0 28px 80px rgba(7,27,52,.22);
}

.home-design-v1 .hero-media {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0;
}

.home-design-v1 .hero-media img,
.home-design-v1 .hero-media picture {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.home-design-v1 .hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4,18,36,.91) 0%,
            rgba(4,18,36,.80) 32%,
            rgba(4,18,36,.43) 65%,
            rgba(4,18,36,.15) 100%
        );
}

.home-design-v1 .hero::after {
    content: "";

    position: absolute;
    width: 520px;
    height: 520px;

    right: -180px;
    top: -210px;

    z-index: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31,99,233,.33),
            rgba(31,99,233,0) 70%
        );

    pointer-events: none;
}

.home-design-v1 .hero > *:not(.hero-media) {
    position: relative;
    z-index: 2;
}

.home-design-v1 .hero .container {
    width: 100%;
}

.home-design-v1 .hero h1 {
    max-width: 840px;

    margin-top: 12px;
    margin-bottom: 22px;

    color: white;

    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: .96;

    letter-spacing: -.055em;

    font-weight: 850;
}

.home-design-v1 .hero p {
    max-width: 700px;

    color: rgba(255,255,255,.84);

    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    line-height: 1.7;
}

.home-design-v1 .hero form {
    display: flex;
    align-items: center;
    gap: 8px;

    max-width: 680px;

    margin-top: 30px;
    padding: 7px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;

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

    box-shadow:
        0 17px 45px rgba(0,0,0,.22);
}

.home-design-v1 .hero input {
    flex: 1;

    min-width: 0;
    min-height: 52px;

    padding: 0 18px;

    color: #13263c;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;

    font-size: 1rem;
}

.home-design-v1 .hero button {
    min-height: 52px;

    padding: 0 22px;

    border: 0;
    border-radius: 13px;

    color: white;

    background:
        linear-gradient(135deg, var(--qf-blue), #4384f1);

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(31,99,233,.28);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.home-design-v1 .hero button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 26px rgba(31,99,233,.35);
}


/* ==========================================================
   SECTIONS GENERALES
   ========================================================== */

.home-design-v1 main > section:not(.hero) {
    position: relative;

    padding-top: 92px;
    padding-bottom: 92px;
}

.home-design-v1 main > section:not(.hero):nth-of-type(odd) {
    background: rgba(255,255,255,.68);
}

.home-design-v1 main > section:not(.hero):nth-of-type(even) {
    background: transparent;
}

.home-design-v1 main > section:not(.hero) + section {
    border-top: 1px solid rgba(7,27,52,.045);
}


/* petites accroches au-dessus des H2 */

.home-design-v1 main section h2 {
    max-width: 900px;

    margin-top: 8px;
    margin-bottom: 18px;

    color: var(--qf-navy);

    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.06;

    letter-spacing: -.04em;

    font-weight: 820;
}

.home-design-v1 main section h3 {
    color: var(--qf-navy);

    letter-spacing: -.018em;
}

.home-design-v1 main section p {
    color: #617186;

    line-height: 1.75;
}

.home-design-v1 main section h2 + p {
    max-width: 760px;

    font-size: 1.06rem;
}


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

.home-design-v1 main .card,
.home-design-v1 main [class*="-card"] {
    border: 1px solid var(--qf-border) !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(250,252,255,.96)
        ) !important;

    box-shadow:
        0 12px 36px rgba(7,27,52,.065) !important;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.home-design-v1 main .card:hover,
.home-design-v1 main [class*="-card"]:hover {
    transform: translateY(-5px);

    border-color: rgba(31,99,233,.20) !important;

    box-shadow:
        var(--qf-shadow-hover) !important;
}


/* ==========================================================
   GRILLES
   ========================================================== */

.home-design-v1 main [class*="grid"] {
    gap: 22px;
}


/* ==========================================================
   IMAGES DANS LES BLOCS
   ========================================================== */

.home-design-v1 main section:not(.hero) img {
    border-radius: 20px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.home-design-v1 main section:not(.hero) a:hover img {
    transform: scale(1.025);
}


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

.home-design-v1 main a {
    text-underline-offset: 3px;
}

.home-design-v1 main a[class*="btn"],
.home-design-v1 main a[class*="cta"] {
    border-radius: 14px !important;

    font-weight: 750 !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.home-design-v1 main a[class*="btn"]:hover,
.home-design-v1 main a[class*="cta"]:hover {
    transform: translateY(-2px);
}


/* ==========================================================
   BLOCS PARTENAIRES
   ========================================================== */

.home-design-v1 main [class*="partner"],
.home-design-v1 main [class*="affiliate"],
.home-design-v1 main [class*="aff-"] {
    border-radius: 26px;
}

.home-design-v1 main [class*="partner"] a,
.home-design-v1 main [class*="affiliate"] a,
.home-design-v1 main [class*="aff-"] a {
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


/* ==========================================================
   METTRE EN VALEUR LES BLOCS CENTRAUX
   ========================================================== */

.home-design-v1 main > section:nth-of-type(3) {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(31,99,233,.085),
            transparent 28rem
        ),
        #fff;
}

.home-design-v1 main > section:nth-of-type(5) {
    background:
        linear-gradient(
            135deg,
            #071b34 0%,
            #0b2c55 100%
        );

    color: white;
}

.home-design-v1 main > section:nth-of-type(5) h2,
.home-design-v1 main > section:nth-of-type(5) h3 {
    color: white;
}

.home-design-v1 main > section:nth-of-type(5) p {
    color: rgba(255,255,255,.74);
}


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

.home-design-v1 .footer {
    position: relative;

    padding-top: 78px;

    color: rgba(255,255,255,.74);

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(31,99,233,.23),
            transparent 26rem
        ),
        linear-gradient(
            145deg,
            #06172c,
            #0a2342
        ) !important;

    border-top: 0 !important;
}

.home-design-v1 .footer h3 {
    color: white;
}

.home-design-v1 .footer a {
    color: rgba(255,255,255,.72);

    transition: color .2s ease;
}

.home-design-v1 .footer a:hover {
    color: white;
}

.home-design-v1 .footer p,
.home-design-v1 .footer small {
    color: rgba(255,255,255,.62);
}

.home-design-v1 .footer-bottom {
    margin-top: 48px;
    padding-top: 22px;

    border-top: 1px solid rgba(255,255,255,.10);
}


/* ==========================================================
   MICRO DETAIL
   ========================================================== */

.home-design-v1 ::selection {
    color: white;
    background: var(--qf-blue);
}


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

@media (max-width: 900px) {

    .home-design-v1 .navbar {
        min-height: 70px;
    }

    .home-design-v1 .hero {
        width: calc(100% - 20px);
        min-height: 560px;

        margin-top: 10px;

        border-radius: 26px;
    }

    .home-design-v1 .hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(4,18,36,.91),
                rgba(4,18,36,.66)
            );
    }

    .home-design-v1 main > section:not(.hero) {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}


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

@media (max-width: 640px) {

    body.home-design-v1 {
        background: #f7f8fa;
    }

    .home-design-v1 .site-header {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .home-design-v1 .navbar {
        min-height: 64px;
    }

    .home-design-v1 .menu-btn {
        width: 44px;
        height: 44px;

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

        border-radius: 13px !important;

        border: 1px solid rgba(7,27,52,.09) !important;

        background: white !important;

        box-shadow:
            0 5px 16px rgba(7,27,52,.08);
    }

    .home-design-v1 .hero {
        width: calc(100% - 14px);
        min-height: 590px;

        margin-top: 7px;

        border-radius: 23px;
    }

    .home-design-v1 .hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(4,18,36,.92) 0%,
                rgba(4,18,36,.70) 68%,
                rgba(4,18,36,.43) 100%
            );
    }

    .home-design-v1 .hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem);
        line-height: .98;
    }

    .home-design-v1 .hero p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .home-design-v1 .hero form {
        display: block;

        margin-top: 24px;
        padding: 6px;

        border-radius: 17px;
    }

    .home-design-v1 .hero input {
        width: 100%;
        min-height: 50px;
    }

    .home-design-v1 .hero button {
        width: 100%;
        min-height: 50px;
    }

    .home-design-v1 main > section:not(.hero) {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .home-design-v1 main section h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .home-design-v1 main [class*="grid"] {
        gap: 15px;
    }

    .home-design-v1 main .card,
    .home-design-v1 main [class*="-card"] {
        border-radius: 20px !important;
    }

    .home-design-v1 .footer {
        padding-top: 58px;
    }
}


/* ==========================================================
   REDUCTION DES ANIMATIONS SI DEMANDEE PAR LE NAVIGATEUR
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .home-design-v1 *,
    .home-design-v1 *::before,
    .home-design-v1 *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ===== QFEF HOME PREMIUM BLOCKS V2 START ===== */


/* ==========================================================
   1. TRUST — CARTES DE CONFIANCE
   ========================================================== */

/*
   Important :
   annule le style générique appliqué aux <section>
*/
.home-design-v1 main .qf-v3-trust {
    position: relative;

    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;

    margin: 30px auto 54px !important;
    padding: 10px !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;

    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 30px !important;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(57,126,255,.22),
            transparent 20rem
        ),
        radial-gradient(
            circle at 94% 100%,
            rgba(235,51,73,.13),
            transparent 18rem
        ),
        linear-gradient(
            135deg,
            #071b34 0%,
            #0a294e 55%,
            #0b3567 100%
        ) !important;

    box-shadow:
        0 25px 65px rgba(7,27,52,.18),
        inset 0 1px 0 rgba(255,255,255,.08);

    overflow: hidden;
}


/* décoration lumineuse */

.home-design-v1 main .qf-v3-trust::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -220px;
    left: 25%;

    border-radius: 50%;

    background: rgba(53,126,255,.23);
    filter: blur(55px);

    pointer-events: none;
}


/* chaque carte */

.home-design-v1 main .qf-v3-trust > div {
    position: relative;
    z-index: 2;

    min-width: 0;
    min-height: 138px;

    padding: 25px 23px 22px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.065)
        ) !important;

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12);

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


/* petit trait coloré premium */

.home-design-v1 main .qf-v3-trust > div::after {
    content: "";

    position: absolute;

    left: 23px;
    top: 0;

    width: 46px;
    height: 3px;

    border-radius: 0 0 5px 5px;

    background:
        linear-gradient(
            90deg,
            #4285ff,
            #6ea4ff
        );
}

.home-design-v1 main .qf-v3-trust > div:nth-child(2)::after {
    background:
        linear-gradient(
            90deg,
            #ffffff,
            #b9d2ff
        );
}

.home-design-v1 main .qf-v3-trust > div:nth-child(3)::after {
    background:
        linear-gradient(
            90deg,
            #ff4058,
            #ff7687
        );
}


/* survol */

.home-design-v1 main .qf-v3-trust > div:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.09)
        ) !important;

    border-color: rgba(255,255,255,.21) !important;
}


/* titre */

.home-design-v1 main .qf-v3-trust strong {
    display: block;

    margin: 0;

    color: #fff !important;

    font-size: 1.02rem;
    line-height: 1.35;

    letter-spacing: -.012em;

    font-weight: 780;
}


/* texte secondaire */

.home-design-v1 main .qf-v3-trust small {
    display: block;

    max-width: 310px;

    color: rgba(255,255,255,.67) !important;

    font-size: .87rem;
    line-height: 1.55;
}


/* ==========================================================
   2. CONVERSION HUB
   ========================================================== */

.home-design-v1 main .qf-conversion-hub {
    position: relative;

    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;

    margin: 45px auto 70px !important;

    padding: 0 !important;

    border: 1px solid rgba(31,99,233,.12) !important;
    border-radius: 34px !important;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(44,119,242,.22),
            transparent 30rem
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(235,51,73,.12),
            transparent 25rem
        ),
        linear-gradient(
            135deg,
            #061a33 0%,
            #09294e 55%,
            #0b3768 100%
        ) !important;

    box-shadow:
        0 30px 80px rgba(7,27,52,.20);

    overflow: hidden;
}


/* halo décoratif */

.home-design-v1 main .qf-conversion-hub::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -180px;
    top: -200px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(255,255,255,.02),
        0 0 0 90px rgba(255,255,255,.015);

    pointer-events: none;
}


/* ligne rouge/bleue de marque */

.home-design-v1 main .qf-conversion-hub::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #286fe8 0%,
            #286fe8 38%,
            rgba(255,255,255,.8) 50%,
            #e9324a 62%,
            #e9324a 100%
        );
}


/* intérieur */

.home-design-v1 main .qf-conversion-inner {
    position: relative;
    z-index: 2;

    padding: 44px !important;

    display: grid !important;
    grid-template-columns: minmax(260px, .82fr) minmax(430px, 1.18fr);
    align-items: center;
    gap: 45px !important;
}


/* ==========================================================
   TEXTE CONVERSION
   ========================================================== */

.home-design-v1 main .qf-conversion-copy {
    min-width: 0;
}


.home-design-v1 main .qf-conversion-kicker {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 16px;

    padding: 8px 12px;

    color: #bcd4ff !important;

    border: 1px solid rgba(124,169,255,.22);
    border-radius: 999px;

    background: rgba(43,110,231,.12);

    font-size: .72rem;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .115em;

    text-transform: uppercase;
}


.home-design-v1 main .qf-conversion-copy > strong {
    display: block;

    max-width: 440px;

    color: #fff !important;

    font-size: clamp(1.85rem, 3vw, 2.65rem);
    line-height: 1.05;

    letter-spacing: -.04em;

    font-weight: 830;
}


.home-design-v1 main .qf-conversion-copy > small {
    display: block;

    max-width: 430px;

    margin-top: 17px;

    color: rgba(255,255,255,.60) !important;

    font-size: .87rem;
    line-height: 1.6;
}


/* ==========================================================
   ACTIONS CONVERSION
   ========================================================== */

.home-design-v1 main .qf-conversion-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px !important;

    min-width: 0;
}


/* boutons */

.home-design-v1 main .qf-conv-btn,
.home-design-v1 main .qf-v36-choice {
    position: relative;

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

    padding: 17px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px;

    color: #132943 !important;

    text-decoration: none !important;

    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(242,247,255,.94)
        ) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.10) !important;

    font-size: .94rem;
    line-height: 1.35;

    font-weight: 730;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.home-design-v1 main .qf-conv-btn:hover,
.home-design-v1 main .qf-v36-choice:hover {
    transform: translateY(-3px);

    border-color: rgba(97,150,255,.55) !important;

    box-shadow:
        0 17px 38px rgba(0,0,0,.16) !important;
}


/* Activités = action principale */

.home-design-v1 main .qf-conv-primary {
    color: #fff !important;

    border-color: rgba(74,137,255,.4) !important;

    background:
        linear-gradient(
            135deg,
            #1764e8,
            #347ff4
        ) !important;

    box-shadow:
        0 13px 30px rgba(19,91,220,.30) !important;
}


.home-design-v1 main .qf-conv-primary span {
    color: #fff !important;
}


/* ==========================================================
   LOCALRENT / DISCOVERCARS
   ========================================================== */

.home-design-v1 main .qf-v36-mobility-choices {
    grid-column: 1 / -1;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px !important;
}


.home-design-v1 main .qf-v36-choice {
    min-height: 88px;

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

    background:
        rgba(255,255,255,.10) !important;

    border-color: rgba(255,255,255,.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.home-design-v1 main .qf-v36-choice strong {
    color: #fff !important;

    font-size: .95rem;
    line-height: 1.3;
}


.home-design-v1 main .qf-v36-choice small {
    margin-top: 4px;

    color: rgba(255,255,255,.58) !important;

    font-size: .78rem;
    line-height: 1.4;
}


.home-design-v1 main .qf-v36-choice:hover {
    background:
        rgba(255,255,255,.15) !important;

    border-color:
        rgba(255,255,255,.27) !important;
}


/* premier choix mobilité davantage mis en avant */

.home-design-v1 main .qf-v36-choice-primary {
    background:
        linear-gradient(
            135deg,
            rgba(41,111,232,.37),
            rgba(41,111,232,.16)
        ) !important;

    border-color:
        rgba(95,151,255,.32) !important;
}


/* ancienne carte voiture cachée */

.home-design-v1 main .qf-v36-hide-old-car {
    display: none !important;
}


/* ==========================================================
   3. GOUTTIERES GENERALES
   empêche tous les textes de toucher les bords
   ========================================================== */

.home-design-v1 *,
.home-design-v1 *::before,
.home-design-v1 *::after {
    box-sizing: border-box;
}


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

@media (max-width: 960px) {

    .home-design-v1 main .qf-v3-trust {
        width: calc(100% - 36px);

        grid-template-columns: 1fr;
        gap: 8px !important;

        padding: 8px !important;

        border-radius: 26px !important;
    }

    .home-design-v1 main .qf-v3-trust > div {
        min-height: 110px;
    }


    .home-design-v1 main .qf-conversion-hub {
        width: calc(100% - 36px);

        border-radius: 28px !important;
    }

    .home-design-v1 main .qf-conversion-inner {
        padding: 34px !important;

        grid-template-columns: 1fr;
        gap: 30px !important;
    }

    .home-design-v1 main .qf-conversion-copy > strong {
        max-width: 650px;
    }

    .home-design-v1 main .qf-conversion-copy > small {
        max-width: 620px;
    }
}


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

@media (max-width: 640px) {

    /*
       GOUTTIERE PRINCIPALE :
       les sections classiques ne peuvent plus coller
       aux bords de l'écran.
    */

    .home-design-v1 main > section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /*
       Quand une section possède déjà .container,
       la section fournit maintenant la gouttière :
       on évite de doubler le padding.
    */

    .home-design-v1 main > section:not(.hero) > .container {
        width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
       Sécurité pour les blocs internes qui peuvent
       dépasser à cause d'anciens CSS.
    */

    .home-design-v1 main section {
        max-width: 100%;
    }

    .home-design-v1 main h1,
    .home-design-v1 main h2,
    .home-design-v1 main h3,
    .home-design-v1 main p,
    .home-design-v1 main small {
        overflow-wrap: break-word;
    }


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

    .home-design-v1 main .qf-v3-trust {
        width: calc(100% - 24px);

        margin-top: 24px !important;
        margin-bottom: 42px !important;

        padding: 7px !important;

        gap: 7px !important;

        border-radius: 23px !important;
    }


    .home-design-v1 main .qf-v3-trust > div {
        min-height: 0;

        padding: 20px 18px !important;

        border-radius: 17px !important;
    }


    .home-design-v1 main .qf-v3-trust strong {
        font-size: .96rem;
    }


    .home-design-v1 main .qf-v3-trust small {
        font-size: .82rem;
    }


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

    .home-design-v1 main .qf-conversion-hub {
        width: calc(100% - 24px);

        margin-top: 32px !important;
        margin-bottom: 52px !important;

        border-radius: 24px !important;
    }


    .home-design-v1 main .qf-conversion-inner {
        padding:
            28px 18px
            20px !important;

        gap: 24px !important;
    }


    .home-design-v1 main .qf-conversion-kicker {
        font-size: .66rem;

        margin-bottom: 13px;
    }


    .home-design-v1 main .qf-conversion-copy > strong {
        font-size: clamp(1.65rem, 8vw, 2.1rem);

        line-height: 1.08;
    }


    .home-design-v1 main .qf-conversion-copy > small {
        margin-top: 13px;

        font-size: .81rem;
    }


    .home-design-v1 main .qf-conversion-actions {
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    .home-design-v1 main .qf-conv-btn {
        width: 100% !important;
        min-height: 64px;

        padding: 15px 16px !important;

        border-radius: 15px !important;
    }


    .home-design-v1 main .qf-v36-mobility-choices {
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    .home-design-v1 main .qf-v36-choice {
        width: 100% !important;
        min-height: 72px;

        padding: 15px 16px !important;

        border-radius: 15px !important;
    }
}


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

@media (max-width: 380px) {

    .home-design-v1 main > section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .home-design-v1 main .qf-v3-trust,
    .home-design-v1 main .qf-conversion-hub {
        width: calc(100% - 18px);
    }

    .home-design-v1 main .qf-conversion-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* ===== QFEF HOME PREMIUM BLOCKS V2 END ===== */



/* ==========================================================
   QFEF — CONVERSION HUB V3
   CONTRASTE + CTA HAUTE VISIBILITE
   ========================================================== */


/* ----------------------------------------------------------
   TITRE : JAMAIS BLANC SUR BLANC
   ---------------------------------------------------------- */

.home-design-v1 main .qf-conversion-hub .qf-conversion-copy {
    position: relative !important;
    z-index: 5 !important;

    padding: 6px 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


.home-design-v1 main .qf-conversion-hub .qf-conversion-copy > strong {
    display: block !important;

    margin: 0 !important;

    color: #ffffff !important;

    background: transparent !important;

    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: 1.02 !important;

    font-weight: 850 !important;
    letter-spacing: -.045em !important;

    text-shadow:
        0 2px 15px rgba(0,0,0,.22) !important;
}


.home-design-v1 main .qf-conversion-hub .qf-conversion-copy > small {
    display: block !important;

    margin-top: 17px !important;

    color: #c8d7ea !important;

    background: transparent !important;

    font-size: .91rem !important;
    line-height: 1.6 !important;

    font-weight: 500 !important;
}


/* kicker */

.home-design-v1 main .qf-conversion-hub .qf-conversion-kicker {
    color: #dce9ff !important;

    background:
        rgba(46,118,245,.19) !important;

    border:
        1px solid rgba(116,165,255,.30) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}



/* ==========================================================
   ZONE CTA
   ========================================================== */

.home-design-v1 main .qf-conversion-actions {
    position: relative !important;
    z-index: 6 !important;
}



/* ==========================================================
   BOUTON PRINCIPAL ACTIVITES
   ========================================================== */

.home-design-v1 main .qf-conv-primary {
    position: relative !important;

    overflow: hidden !important;

    min-height: 82px !important;

    color: #fff !important;

    border:
        1px solid rgba(255,255,255,.25) !important;

    background:
        linear-gradient(
            135deg,
            #1765ea 0%,
            #2678f4 50%,
            #438cf7 100%
        ) !important;

    box-shadow:
        0 14px 34px rgba(20,94,225,.42),
        inset 0 1px 0 rgba(255,255,255,.25) !important;

    font-size: 1rem !important;
    font-weight: 820 !important;

    transform: translateZ(0);

    animation:
        qfCtaGlow 3s ease-in-out infinite !important;
}


/* halo léger */

@keyframes qfCtaGlow {

    0%,
    100% {
        box-shadow:
            0 14px 34px rgba(20,94,225,.36),
            inset 0 1px 0 rgba(255,255,255,.25);
    }

    50% {
        box-shadow:
            0 18px 44px rgba(38,120,244,.58),
            0 0 0 4px rgba(48,126,245,.08),
            inset 0 1px 0 rgba(255,255,255,.28);
    }
}


/* reflet qui traverse le bouton */

.home-design-v1 main .qf-conv-primary::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -65%;

    width: 38%;
    height: 160%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    transition:
        left .55s ease !important;

    pointer-events: none;
}


.home-design-v1 main .qf-conv-primary:hover::after {
    left: 125%;
}


.home-design-v1 main .qf-conv-primary:hover {
    transform:
        translateY(-4px)
        scale(1.015) !important;

    box-shadow:
        0 22px 48px rgba(27,106,238,.55),
        0 0 0 4px rgba(55,132,255,.10) !important;
}



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

.home-design-v1 main .qf-conversion-actions > .qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car) {
    position: relative !important;

    min-height: 82px !important;

    color: #09244a !important;

    border:
        1px solid rgba(255,255,255,.9) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5ff
        ) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15),
        inset 0 1px 0 #fff !important;

    font-size: .98rem !important;
    font-weight: 800 !important;
}


/* flèche CTA */

.home-design-v1 main .qf-conversion-actions > .qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car)::after {
    content: "→";

    margin-left: auto;

    color: #1765ea;

    font-size: 1.35rem;
    font-weight: 900;

    transition:
        transform .22s ease;
}


.home-design-v1 main .qf-conversion-actions > .qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car):hover::after {
    transform: translateX(5px);
}


.home-design-v1 main .qf-conversion-actions > .qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car):hover {
    transform:
        translateY(-4px)
        scale(1.012) !important;

    border-color:
        rgba(98,157,255,.75) !important;

    box-shadow:
        0 20px 42px rgba(0,0,0,.20),
        0 0 0 4px rgba(54,132,255,.09) !important;
}



/* ==========================================================
   VOITURES : CARDS CLIQUABLES
   ========================================================== */

.home-design-v1 main .qf-v36-mobility-choices {
    margin-top: 2px !important;
}


.home-design-v1 main .qf-v36-choice {
    position: relative !important;

    overflow: hidden !important;

    min-height: 94px !important;

    padding-right: 48px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.075)
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 8px 22px rgba(0,0,0,.08) !important;
}


/* flèche à droite */

.home-design-v1 main .qf-v36-choice::after {
    content: "→";

    position: absolute;

    right: 19px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #fff;

    font-size: 1.35rem;

    opacity: .72;

    transition:
        transform .22s ease,
        opacity .22s ease;
}


.home-design-v1 main .qf-v36-choice:hover {
    transform:
        translateY(-4px) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.11)
        ) !important;

    border-color:
        rgba(255,255,255,.32) !important;

    box-shadow:
        0 17px 34px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}


.home-design-v1 main .qf-v36-choice:hover::after {
    transform:
        translate(5px,-50%);

    opacity: 1;
}



/* premier choix voiture plus visible */

.home-design-v1 main .qf-v36-choice-primary {
    background:
        linear-gradient(
            135deg,
            rgba(32,108,239,.68),
            rgba(34,92,195,.42)
        ) !important;

    border:
        1px solid rgba(116,166,255,.42) !important;

    box-shadow:
        0 11px 28px rgba(0,61,172,.20),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}



/* ==========================================================
   TEXTE DES CHOIX
   ========================================================== */

.home-design-v1 main .qf-v36-choice strong {
    color: #fff !important;

    font-size: .98rem !important;
    font-weight: 800 !important;
}


.home-design-v1 main .qf-v36-choice small {
    color: #b9cce4 !important;

    font-size: .80rem !important;
}



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

@media (max-width: 640px) {

    .home-design-v1 main .qf-conversion-inner {
        padding:
            30px 18px
            20px !important;
    }


    .home-design-v1 main .qf-conversion-copy {
        padding:
            0 3px !important;
    }


    .home-design-v1 main .qf-conversion-hub .qf-conversion-copy > strong {
        color: #fff !important;

        font-size:
            clamp(1.8rem, 8.5vw, 2.3rem) !important;

        line-height: 1.04 !important;
    }


    .home-design-v1 main .qf-conversion-hub .qf-conversion-copy > small {
        color: #c6d6e9 !important;

        font-size: .84rem !important;
    }


    .home-design-v1 main .qf-conv-primary,
    .home-design-v1 main .qf-conversion-actions > .qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car) {
        min-height: 68px !important;

        padding:
            14px 16px !important;

        border-radius:
            16px !important;
    }


    .home-design-v1 main .qf-v36-choice {
        min-height: 76px !important;

        padding:
            14px 43px
            14px 15px !important;
    }


    /* Animation plus discrète sur mobile */

    .home-design-v1 main .qf-conv-primary {
        animation-duration:
            4s !important;
    }
}



/* respect accessibilité */

@media (prefers-reduced-motion: reduce) {

    .home-design-v1 main .qf-conv-primary {
        animation: none !important;
    }

    .home-design-v1 main .qf-conv-primary::after {
        display: none !important;
    }
}


/* ==========================================================
   ==========================================================
   QFEF HOME DESIGN V4 — PRIORITAIRE
   ==========================================================
   ========================================================== */


/* ==========================================================
   1. HERO — PLEINE LARGEUR, POINT.
   ========================================================== */

body.home-design-v1 .hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: clamp(580px, 72vh, 820px) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-radius:
        0 !important;

    overflow:
        hidden !important;

    box-shadow:
        none !important;

    display:
        flex !important;

    align-items:
        center !important;
}


/* IMAGE HERO */

body.home-design-v1 .hero .hero-media {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: hidden !important;
}


body.home-design-v1 .hero .hero-media img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    object-position: center center !important;

    border-radius: 0 !important;

    transform: none !important;
}


/* overlay */

body.home-design-v1 .hero::before {
    content: "";

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,33,.90) 0%,
            rgba(4,17,33,.78) 31%,
            rgba(4,17,33,.47) 57%,
            rgba(4,17,33,.16) 100%
        ) !important;
}


/* contenu */

body.home-design-v1 .hero > .container {
    position: relative !important;

    z-index: 5 !important;

    width: min(1240px, calc(100% - 80px)) !important;
    max-width: 1240px !important;

    margin:
        0 auto !important;

    padding:
        70px 0 !important;
}


body.home-design-v1 .hero h1 {
    max-width: 820px !important;

    margin:
        12px 0
        22px !important;

    color:
        #fff !important;

    font-size:
        clamp(3.4rem, 6vw, 6.1rem) !important;

    line-height:
        .94 !important;

    letter-spacing:
        -.058em !important;
}


body.home-design-v1 .hero p {
    max-width:
        680px !important;

    color:
        rgba(255,255,255,.84) !important;
}


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

@media (max-width: 900px) {

    body.home-design-v1 .hero {
        min-height:
            650px !important;
    }

    body.home-design-v1 .hero > .container {
        width:
            calc(100% - 44px) !important;

        padding:
            60px 0 !important;
    }

    body.home-design-v1 .hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(4,17,33,.91),
                rgba(4,17,33,.65)
            ) !important;
    }

}


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

@media (max-width: 640px) {

    body.home-design-v1 .hero {
        width:
            100% !important;

        min-height:
            680px !important;

        margin:
            0 !important;

        border-radius:
            0 !important;
    }


    body.home-design-v1 .hero .hero-media img {
        object-position:
            58% center !important;
    }


    body.home-design-v1 .hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(3,15,30,.96) 0%,
                rgba(3,15,30,.85) 46%,
                rgba(3,15,30,.48) 100%
            ) !important;
    }


    body.home-design-v1 .hero > .container {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            75px 20px
            42px !important;
    }


    body.home-design-v1 .hero h1 {
        max-width:
            100% !important;

        font-size:
            clamp(3rem, 14vw, 4.35rem) !important;

        line-height:
            .94 !important;
    }


    body.home-design-v1 .hero p {
        max-width:
            100% !important;

        font-size:
            1rem !important;

        line-height:
            1.58 !important;
    }


    body.home-design-v1 .hero form {
        width:
            100% !important;

        max-width:
            none !important;
    }

}



/* ==========================================================
   2. TRANSPORT — VRAI BLOC VISUEL
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {
    position: relative !important;

    width:
        min(1180px, calc(100% - 48px)) !important;

    max-width:
        1180px !important;

    min-height:
        390px !important;

    margin:
        55px auto !important;

    padding:
        60px
        calc(50% + 35px)
        60px
        48px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(7,27,52,.08) !important;

    border-radius:
        32px !important;

    /*
       Visuel existant du site utilisé comme fond voyage.
       On pourra ensuite lui mettre une image transport dédiée.
    */

    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 44%,
            rgba(255,255,255,.88) 48%,
            rgba(255,255,255,.10) 67%
        ),
        url("images/hero.webp") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    box-shadow:
        0 25px 65px rgba(7,27,52,.12) !important;
}


/* badge transport visuel */

body.home-design-v1 main .qf-transport-feature::before {
    content:
        "🚆   🚌   ✈️";

    position:
        absolute;

    right:
        34px;

    bottom:
        30px;

    z-index:
        5;

    padding:
        13px 18px;

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

    border-radius:
        18px;

    color:
        #fff;

    background:
        rgba(5,25,49,.78);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    font-size:
        1.45rem;

    letter-spacing:
        .17em;

    box-shadow:
        0 14px 32px rgba(0,0,0,.22);
}


body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {
    position:
        relative;

    z-index:
        5;

    color:
        #071b34 !important;
}


body.home-design-v1 main .qf-transport-feature p {
    position:
        relative;

    z-index:
        5;

    color:
        #566a80 !important;

    font-size:
        1.04rem;

    line-height:
        1.7;
}


/* TABLETTE TRANSPORT */

@media (max-width: 900px) {

    body.home-design-v1 main .qf-transport-feature {
        width:
            calc(100% - 36px) !important;

        padding:
            42px
            42px
            280px !important;

        background-image:
            linear-gradient(
                180deg,
                #fff 0%,
                #fff 51%,
                rgba(255,255,255,.10) 68%
            ),
            url("images/hero.webp") !important;

        background-position:
            center center !important;

        border-radius:
            27px !important;
    }

}


/* MOBILE TRANSPORT */

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {
        width:
            calc(100% - 24px) !important;

        min-height:
            0 !important;

        margin:
            36px auto !important;

        padding:
            30px
            20px
            235px !important;

        border-radius:
            22px !important;

        background-image:
            linear-gradient(
                180deg,
                #fff 0%,
                #fff 54%,
                rgba(255,255,255,.06) 72%
            ),
            url("images/hero.webp") !important;

        background-position:
            center bottom !important;

        background-size:
            auto,
            100% 48% !important;
    }


    body.home-design-v1 main .qf-transport-feature::before {
        right:
            18px;

        bottom:
            18px;

        padding:
            10px 13px;

        font-size:
            1.15rem;
    }

}



/* ==========================================================
   3. CONVERSION HUB
   GARANTIE : PLUS JAMAIS BLANC SUR BLANC
   ========================================================== */

body.home-design-v1 main section.qf-conversion-hub,
body.home-design-v1 main .qf-conversion-hub.qf-v37-stay-priority {
    position:
        relative !important;

    width:
        min(1180px, calc(100% - 48px)) !important;

    max-width:
        1180px !important;

    margin:
        55px auto 75px !important;

    padding:
        10px !important;

    border:
        1px solid rgba(25,93,190,.16) !important;

    border-radius:
        34px !important;

    background:
        linear-gradient(
            135deg,
            #06182f,
            #09284b 55%,
            #0b3767
        ) !important;

    box-shadow:
        0 30px 80px rgba(7,27,52,.22) !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   INNER
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-conversion-inner {
    position:
        relative !important;

    z-index:
        4 !important;

    width:
        100% !important;

    padding:
        24px !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(300px,.82fr)
        minmax(450px,1.18fr) !important;

    gap:
        22px !important;

    align-items:
        stretch !important;
}


/* ==========================================================
   PANNEAU TEXTE BLEU NUIT
   CE PANNEAU EMPÊCHE LE BLANC/BLANC
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-conversion-copy {
    position:
        relative !important;

    z-index:
        10 !important;

    min-width:
        0 !important;

    padding:
        34px 31px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        25px !important;

    background:
        linear-gradient(
            145deg,
            #071b34,
            #0a2b50
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 16px 40px rgba(0,0,0,.16) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-conversion-kicker {
    color:
        #aecdff !important;

    background:
        rgba(41,110,232,.16) !important;

    border:
        1px solid rgba(83,145,253,.24) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-conversion-copy > strong {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #ffffff !important;

    background:
        transparent !important;

    -webkit-text-fill-color:
        #ffffff !important;

    opacity:
        1 !important;

    font-size:
        clamp(2rem, 3vw, 2.85rem) !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.045em !important;

    font-weight:
        850 !important;

    text-shadow:
        0 2px 16px rgba(0,0,0,.28) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-conversion-copy > small {
    display:
        block !important;

    margin-top:
        18px !important;

    color:
        #bfd0e5 !important;

    background:
        transparent !important;

    -webkit-text-fill-color:
        #bfd0e5 !important;

    opacity:
        1 !important;

    font-size:
        .91rem !important;

    line-height:
        1.62 !important;
}



/* ==========================================================
   4. ZONE BOUTONS — PLUS DE BLANC VIDE
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-conversion-actions {
    min-width:
        0 !important;

    padding:
        4px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;

    align-content:
        center !important;

    gap:
        12px !important;
}



/* ==========================================================
   CTA BASE
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-conv-btn {
    position:
        relative !important;

    min-width:
        0 !important;

    min-height:
        92px !important;

    padding:
        20px 21px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        12px !important;

    overflow:
        hidden !important;

    border-radius:
        20px !important;

    text-decoration:
        none !important;

    font-size:
        .98rem !important;

    line-height:
        1.35 !important;

    font-weight:
        820 !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease !important;
}



/* ==========================================================
   CTA 1 ACTIVITES — BLEU VIF
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-conv-primary {
    color:
        #fff !important;

    border:
        1px solid rgba(255,255,255,.28) !important;

    background:
        linear-gradient(
            135deg,
            #1260eb,
            #277bf7 52%,
            #4994ff
        ) !important;

    box-shadow:
        0 16px 38px rgba(26,104,234,.42),
        inset 0 1px 0 rgba(255,255,255,.28) !important;

    animation:
        qfV4Pulse 2.7s ease-in-out infinite !important;
}


/* reflet */

body.home-design-v1 main .qf-conversion-hub .qf-conv-primary::before {
    content:
        "";

    position:
        absolute;

    top:
        -80%;

    left:
        -50%;

    width:
        32%;

    height:
        250%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:
        rotate(20deg);

    animation:
        qfV4Shine 3.5s ease-in-out infinite;

    pointer-events:
        none;
}


@keyframes qfV4Pulse {

    0%,100% {
        transform:
            translateY(0);

        box-shadow:
            0 15px 35px rgba(26,104,234,.36),
            inset 0 1px 0 rgba(255,255,255,.25);
    }

    50% {
        transform:
            translateY(-3px);

        box-shadow:
            0 22px 48px rgba(42,124,249,.56),
            0 0 0 5px rgba(42,124,249,.09),
            inset 0 1px 0 rgba(255,255,255,.30);
    }

}


@keyframes qfV4Shine {

    0%,60% {
        left:
            -50%;
    }

    85%,100% {
        left:
            135%;
    }

}


body.home-design-v1 main .qf-conversion-hub .qf-conv-primary:hover {
    transform:
        translateY(-6px)
        scale(1.025) !important;

    filter:
        brightness(1.08) !important;

    box-shadow:
        0 27px 55px rgba(29,110,242,.64),
        0 0 0 5px rgba(72,143,255,.12) !important;
}



/* ==========================================================
   CTA HEBERGEMENT — BLANC / BLEU
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub
.qf-conversion-actions >
.qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car) {

    color:
        #08264e !important;

    border:
        1px solid #fff !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf3ff
        ) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.17),
        inset 0 1px 0 #fff !important;
}


body.home-design-v1 main .qf-conversion-hub
.qf-conversion-actions >
.qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car)::after {

    content:
        "→";

    margin-left:
        auto;

    color:
        #1768e9;

    font-size:
        1.55rem;

    transition:
        transform .2s ease;
}


body.home-design-v1 main .qf-conversion-hub
.qf-conversion-actions >
.qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car):hover {

    transform:
        translateY(-6px)
        scale(1.02) !important;

    box-shadow:
        0 24px 48px rgba(0,0,0,.24),
        0 0 0 5px rgba(255,255,255,.10) !important;
}


body.home-design-v1 main .qf-conversion-hub
.qf-conversion-actions >
.qf-conv-btn:not(.qf-conv-primary):not(.qf-v36-hide-old-car):hover::after {

    transform:
        translateX(7px);
}



/* ==========================================================
   MOBILITE
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-v36-mobility-choices {
    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:
        12px !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice {
    position:
        relative !important;

    min-width:
        0 !important;

    min-height:
        95px !important;

    padding:
        19px 52px 19px 20px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    color:
        #fff !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    border-radius:
        19px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.075)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 11px 28px rgba(0,0,0,.12) !important;

    text-decoration:
        none !important;

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice::after {
    content:
        "→";

    position:
        absolute;

    top:
        50%;

    right:
        20px;

    transform:
        translateY(-50%);

    color:
        #fff;

    font-size:
        1.45rem;

    opacity:
        .80;

    transition:
        transform .2s ease;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice strong {
    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;

    font-size:
        1rem !important;

    font-weight:
        820 !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice small {
    margin-top:
        5px !important;

    color:
        #b9cae0 !important;

    -webkit-text-fill-color:
        #b9cae0 !important;

    font-size:
        .8rem !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice-primary {
    background:
        linear-gradient(
            135deg,
            rgba(31,110,242,.72),
            rgba(37,86,179,.47)
        ) !important;

    border-color:
        rgba(99,156,255,.48) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice:hover {
    transform:
        translateY(-6px)
        scale(1.015) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.12)
        ) !important;

    box-shadow:
        0 23px 45px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice:hover::after {
    transform:
        translate(7px,-50%);
}



/* ==========================================================
   5. TABLETTE CONVERSION
   ========================================================== */

@media (max-width: 980px) {

    body.home-design-v1 main section.qf-conversion-hub {
        width:
            calc(100% - 36px) !important;
    }


    body.home-design-v1 main .qf-conversion-hub .qf-conversion-inner {
        grid-template-columns:
            1fr !important;

        padding:
            17px !important;
    }


    body.home-design-v1 main .qf-conversion-hub .qf-conversion-copy {
        padding:
            29px !important;
    }

}



/* ==========================================================
   6. MOBILE CONVERSION — UNE COLONNE
   ========================================================== */

@media (max-width: 640px) {

    body.home-design-v1 main section.qf-conversion-hub,
    body.home-design-v1 main .qf-conversion-hub.qf-v37-stay-priority {

        width:
            calc(100% - 20px) !important;

        margin:
            36px auto 52px !important;

        padding:
            7px !important;

        border-radius:
            24px !important;
    }


    body.home-design-v1 main .qf-conversion-hub .qf-conversion-inner {
        width:
            100% !important;

        padding:
            7px !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            10px !important;
    }


    body.home-design-v1 main .qf-conversion-hub .qf-conversion-copy {
        width:
            100% !important;

        min-width:
            0 !important;

        padding:
            25px 20px !important;

        border-radius:
            19px !important;
    }


    body.home-design-v1 main .qf-conversion-hub
    .qf-conversion-copy > strong {

        font-size:
            clamp(1.8rem, 9vw, 2.35rem) !important;

        line-height:
            1.03 !important;
    }


    body.home-design-v1 main .qf-conversion-hub
    .qf-conversion-copy > small {

        font-size:
            .83rem !important;
    }


    body.home-design-v1 main .qf-conversion-hub
    .qf-conversion-actions {

        width:
            100% !important;

        min-width:
            0 !important;

        padding:
            0 !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            9px !important;
    }


    body.home-design-v1 main .qf-conversion-hub .qf-conv-btn {
        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            72px !important;

        padding:
            15px 16px !important;

        border-radius:
            16px !important;

        white-space:
            normal !important;
    }


    body.home-design-v1 main .qf-conversion-hub
    .qf-v36-mobility-choices {

        width:
            100% !important;

        grid-column:
            auto !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            9px !important;
    }


    body.home-design-v1 main .qf-conversion-hub
    .qf-v36-choice {

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            78px !important;

        padding:
            15px 45px 15px 16px !important;

        border-radius:
            16px !important;
    }

}



/* ==========================================================
   7. GOUTTIERES MOBILE — TOUT LE SITE INDEX
   ========================================================== */

@media (max-width: 640px) {

    body.home-design-v1 main {
        width:
            100% !important;

        overflow:
            hidden !important;
    }


    body.home-design-v1 main >
    section:not(.hero):not(.qf-conversion-hub):not(.qf-v3-trust):not(.qf-transport-feature) {

        width:
            100% !important;

        padding-left:
            20px !important;

        padding-right:
            20px !important;
    }


    body.home-design-v1 main .container {
        max-width:
            100% !important;
    }


    body.home-design-v1 main h1,
    body.home-design-v1 main h2,
    body.home-design-v1 main h3,
    body.home-design-v1 main p,
    body.home-design-v1 main strong,
    body.home-design-v1 main small,
    body.home-design-v1 main a {

        max-width:
            100%;

        overflow-wrap:
            anywhere;
    }


    body.home-design-v1 img {
        max-width:
            100%;

        height:
            auto;
    }

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media (max-width: 380px) {

    body.home-design-v1 .hero > .container {
        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }


    body.home-design-v1 main >
    section:not(.hero):not(.qf-conversion-hub):not(.qf-v3-trust):not(.qf-transport-feature) {

        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }


    body.home-design-v1 main section.qf-conversion-hub {
        width:
            calc(100% - 14px) !important;
    }

}


/* ==========================================================
   ACCESSIBILITE ANIMATION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.home-design-v1 main .qf-conv-primary {
        animation:
            none !important;
    }

    body.home-design-v1 main .qf-conv-primary::before {
        animation:
            none !important;
    }

}



/* ==========================================================
   QFEF — CORRECTIFS VISUELS V5
   ========================================================== */


/* ==========================================================
   HERO — IMAGE PLUS CLAIRE
   ========================================================== */

/* Desktop */
body.home-design-v1 .hero::before {
    background:
        linear-gradient(
            90deg,
            rgba(4,17,33,.68) 0%,
            rgba(4,17,33,.54) 31%,
            rgba(4,17,33,.25) 58%,
            rgba(4,17,33,.06) 100%
        ) !important;
}

/* tablette */
@media (max-width: 900px) {

    body.home-design-v1 .hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(4,17,33,.70),
                rgba(4,17,33,.34)
            ) !important;
    }
}

/* mobile : on garde du contraste derrière le texte,
   mais on laisse beaucoup mieux voir la photo */
@media (max-width: 640px) {

    body.home-design-v1 .hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(3,15,30,.78) 0%,
                rgba(3,15,30,.55) 45%,
                rgba(3,15,30,.18) 100%
            ) !important;
    }
}


/* ==========================================================
   BESOIN D'UNE VOITURE ? — BLANC
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub h2,
body.home-design-v1 main .qf-conversion-hub h3,
body.home-design-v1 main .qf-conversion-hub .qf-v36-mobility-title,
body.home-design-v1 main .qf-conversion-hub [class*="mobility"] > strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Si le texte est directement dans un strong */
body.home-design-v1 main .qf-conversion-hub strong {
    opacity: 1 !important;
}


/* ==========================================================
   DISCOVERCARS + LOCALRENT
   VRAIS CTA BLEUS
   ========================================================== */

body.home-design-v1 main .qf-conversion-hub .qf-v36-choice,
body.home-design-v1 main .qf-conversion-hub .qf-v36-choice-primary {

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0d5bdd 0%,
            #176cec 48%,
            #2e82f6 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.28) !important;

    box-shadow:
        0 14px 34px rgba(13,91,221,.32),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-weight: 850 !important;
}


body.home-design-v1 main .qf-conversion-hub .qf-v36-choice small {
    color: rgba(255,255,255,.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,.78) !important;
}


/* Le deuxième CTA reste bleu mais légèrement différent */
body.home-design-v1 main .qf-conversion-hub
.qf-v36-mobility-choices .qf-v36-choice:nth-child(2) {

    background:
        linear-gradient(
            135deg,
            #074aa9 0%,
            #0c60cd 48%,
            #1778e7 100%
        ) !important;
}


/* flèche blanche */
body.home-design-v1 main .qf-conversion-hub .qf-v36-choice::after {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* EFFET CTA */
body.home-design-v1 main .qf-conversion-hub .qf-v36-choice:hover {

    transform:
        translateY(-6px)
        scale(1.025) !important;

    filter:
        brightness(1.10) !important;

    box-shadow:
        0 24px 48px rgba(13,91,221,.46),
        0 0 0 5px rgba(55,135,255,.12),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}


/* léger halo permanent */
body.home-design-v1 main .qf-conversion-hub .qf-v36-choice {
    animation:
        qfCarCtaGlow 3.2s ease-in-out infinite;
}


@keyframes qfCarCtaGlow {

    0%,100% {
        box-shadow:
            0 14px 34px rgba(13,91,221,.30),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    50% {
        box-shadow:
            0 19px 42px rgba(30,116,240,.43),
            0 0 0 4px rgba(54,132,255,.07),
            inset 0 1px 0 rgba(255,255,255,.26);
    }
}


/* ==========================================================
   TRANSPORT — POUR L'INSTANT TEXTE / CTA PROPRE
   La vraie photo dédiée sera ajoutée ensuite.
   ========================================================== */

body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {
    color: #071b34 !important;
    -webkit-text-fill-color: #071b34 !important;
}


body.home-design-v1 main .qf-transport-feature p {
    color: #53677d !important;
}


body.home-design-v1 main .qf-transport-feature a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 54px !important;

    padding: 0 22px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 0 !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #0d5bdd,
            #267af2
        ) !important;

    box-shadow:
        0 12px 28px rgba(22,104,231,.30) !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


body.home-design-v1 main .qf-transport-feature a:hover {
    transform:
        translateY(-4px)
        scale(1.02) !important;

    box-shadow:
        0 19px 38px rgba(22,104,231,.43) !important;
}


/* MOBILE */
@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature a {
        width: 100% !important;
    }

    body.home-design-v1 main .qf-v36-choice {
        min-height: 82px !important;
    }
}


/* animations accessibles */
@media (prefers-reduced-motion: reduce) {

    body.home-design-v1 main .qf-v36-choice {
        animation: none !important;
    }
}



/* ==========================================================
   QFEF — TRANSPORT IMAGE DEFINITIVE
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.96) 34%,
            rgba(255,255,255,.74) 49%,
            rgba(255,255,255,.15) 68%,
            rgba(255,255,255,.02) 100%
        ),
        url("images/transport.jpg") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;
}


/* texte bien lisible */

body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {
    color: #071b34 !important;
    -webkit-text-fill-color: #071b34 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.65) !important;
}


body.home-design-v1 main .qf-transport-feature p {
    color: #4d6278 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.55) !important;
}


/* CTA */

body.home-design-v1 main .qf-transport-feature a {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #0c5fe5,
            #247cf4
        ) !important;

    box-shadow:
        0 14px 30px rgba(20,101,229,.32) !important;
}


body.home-design-v1 main .qf-transport-feature a:hover {
    transform:
        translateY(-4px)
        scale(1.025) !important;

    box-shadow:
        0 22px 42px rgba(20,101,229,.44) !important;
}


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

@media (max-width: 900px) {

    body.home-design-v1 main .qf-transport-feature {
        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,.98) 0%,
                rgba(255,255,255,.96) 42%,
                rgba(255,255,255,.62) 58%,
                rgba(255,255,255,.08) 78%
            ),
            url("images/transport.jpg") !important;

        background-position:
            center center !important;
    }
}


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

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {
        padding:
            30px 20px
            250px !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,.99) 0%,
                rgba(255,255,255,.97) 48%,
                rgba(255,255,255,.72) 60%,
                rgba(255,255,255,.06) 82%
            ),
            url("images/transport.jpg") !important;

        background-size:
            cover !important;

        background-position:
            center bottom !important;
    }
}



/* ==========================================================
   QFEF — FIX TRANSPORT TEXTE V6
   empêche le texte vertical / écrasé
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {

    width: 100% !important;
    max-width: 1180px !important;
    min-width: 0 !important;

    min-height: 360px !important;

    margin:
        45px auto !important;

    /*
       IMPORTANT :
       on supprime l'ancien padding à 50%
       qui écrasait la colonne texte.
    */
    padding:
        42px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    border-radius:
        30px !important;

    overflow:
        hidden !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.96) 32%,
            rgba(255,255,255,.83) 44%,
            rgba(255,255,255,.30) 62%,
            rgba(255,255,255,.03) 100%
        ),
        url("/assets/images/transport.jpg?v=20260828") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;
}


/* ==========================================================
   ZONE TEXTE
   ========================================================== */

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {

    display:
        block !important;

    width:
        46% !important;

    max-width:
        520px !important;

    min-width:
        360px !important;

    margin:
        0 0 16px 0 !important;

    padding:
        0 !important;

    color:
        #071b34 !important;

    -webkit-text-fill-color:
        #071b34 !important;

    white-space:
        normal !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;

    font-size:
        clamp(2rem, 3.3vw, 3rem) !important;

    line-height:
        1.06 !important;

    letter-spacing:
        -.035em !important;
}


/* paragraphe */

body.home-design-v1 main .qf-transport-feature p {

    display:
        block !important;

    width:
        46% !important;

    max-width:
        510px !important;

    min-width:
        360px !important;

    margin:
        0 0 25px 0 !important;

    padding:
        0 !important;

    color:
        #50667d !important;

    white-space:
        normal !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;

    font-size:
        1.02rem !important;

    line-height:
        1.65 !important;
}


/* bouton */

body.home-design-v1 main .qf-transport-feature a {

    width:
        auto !important;

    min-width:
        220px !important;

    max-width:
        320px !important;

    min-height:
        54px !important;

    padding:
        0 22px !important;

    white-space:
        normal !important;
}



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

@media (max-width: 900px) {

    body.home-design-v1 main .qf-transport-feature {

        width:
            calc(100% - 36px) !important;

        max-width:
            none !important;

        min-height:
            500px !important;

        padding:
            34px 34px 250px 34px !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,.99) 0%,
                rgba(255,255,255,.97) 42%,
                rgba(255,255,255,.74) 55%,
                rgba(255,255,255,.05) 75%
            ),
            url("/assets/images/transport.jpg?v=20260828") !important;

        background-position:
            center center !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p {

        width:
            100% !important;

        max-width:
            600px !important;

        min-width:
            0 !important;
    }
}



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

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {

        width:
            calc(100% - 20px) !important;

        min-width:
            0 !important;

        min-height:
            540px !important;

        margin:
            32px auto !important;

        padding:
            28px 20px 255px 20px !important;

        border-radius:
            22px !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.98) 43%,
                rgba(255,255,255,.72) 57%,
                rgba(255,255,255,.02) 78%
            ),
            url("/assets/images/transport.jpg?v=20260828") !important;

        background-size:
            cover !important;

        background-position:
            61% bottom !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3 {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        font-size:
            clamp(1.8rem, 8vw, 2.35rem) !important;

        line-height:
            1.05 !important;
    }


    body.home-design-v1 main .qf-transport-feature p {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        font-size:
            .94rem !important;
    }


    body.home-design-v1 main .qf-transport-feature a {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }
}



/* ==========================================================
   QFEF — TRANSPORT GLASS V7
   photo visible + panneau texte sombre
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {

    background-image:
        linear-gradient(
            90deg,
            rgba(4,18,36,.18) 0%,
            rgba(4,18,36,.08) 42%,
            rgba(4,18,36,.03) 100%
        ),
        url("/assets/images/transport.jpg?v=20260828") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    padding:
        34px !important;

    align-items:
        flex-start !important;
}


/* panneau derrière le contenu */

body.home-design-v1 main .qf-transport-feature > * {

    position:
        relative;

    z-index:
        3;
}


/* on crée une vraie zone visuelle autour du texte */

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3,
body.home-design-v1 main .qf-transport-feature p,
body.home-design-v1 main .qf-transport-feature a {

    position:
        relative !important;

    z-index:
        4 !important;
}


/* panneau glass */

body.home-design-v1 main .qf-transport-feature::after {

    content:
        "";

    position:
        absolute;

    left:
        28px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        min(470px, calc(100% - 56px));

    height:
        calc(100% - 56px);

    max-height:
        300px;

    z-index:
        2;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(5,23,46,.84),
            rgba(8,39,74,.72)
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 18px 42px rgba(0,0,0,.24);

    pointer-events:
        none;
}


/* texte clair */

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {

    width:
        420px !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin-left:
        18px !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-shadow:
        0 2px 12px rgba(0,0,0,.28) !important;
}


body.home-design-v1 main .qf-transport-feature p {

    width:
        420px !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin-left:
        18px !important;

    color:
        #d4dfec !important;

    text-shadow:
        0 1px 8px rgba(0,0,0,.26) !important;
}


body.home-design-v1 main .qf-transport-feature a {

    margin-left:
        18px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1263ea,
            #2c82f6
        ) !important;

    box-shadow:
        0 15px 32px rgba(20,103,235,.38) !important;
}


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

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {

        min-height:
            560px !important;

        padding:
            18px !important;

        justify-content:
            flex-end !important;

        background-position:
            62% center !important;
    }


    body.home-design-v1 main .qf-transport-feature::after {

        left:
            12px;

        right:
            12px;

        bottom:
            12px;

        top:
            auto;

        transform:
            none;

        width:
            auto;

        height:
            255px;

        max-height:
            none;

        border-radius:
            19px;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p,
    body.home-design-v1 main .qf-transport-feature a {

        width:
            calc(100% - 24px) !important;

        max-width:
            none !important;

        margin-left:
            12px !important;

        margin-right:
            12px !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3 {

        margin-bottom:
            12px !important;
    }


    body.home-design-v1 main .qf-transport-feature p {

        margin-bottom:
            16px !important;
    }

}



/* ==========================================================
   QFEF — TRANSPORT V8
   PHOTO PLEINE, AUCUN BACKGROUND DERRIERE LE TEXTE
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {

    position:
        relative !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,15,30,.42) 0%,
            rgba(3,15,30,.28) 38%,
            rgba(3,15,30,.10) 67%,
            rgba(3,15,30,.02) 100%
        ),
        url("/assets/images/transport.jpg?v=20260828") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    padding:
        48px !important;

    min-height:
        380px !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;
}


/* SUPPRESSION TOTALE DU PANNEAU GLASS */

body.home-design-v1 main .qf-transport-feature::after {
    display:
        none !important;

    content:
        none !important;
}


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

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {

    width:
        min(510px, 48%) !important;

    max-width:
        510px !important;

    min-width:
        0 !important;

    margin:
        0 0 16px 0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    background:
        transparent !important;

    font-size:
        clamp(2.2rem, 3.6vw, 3.35rem) !important;

    line-height:
        1.02 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.045em !important;

    text-shadow:
        0 3px 18px rgba(0,0,0,.62),
        0 1px 3px rgba(0,0,0,.65) !important;
}


/* ==========================================================
   TEXTE
   ========================================================== */

body.home-design-v1 main .qf-transport-feature p {

    width:
        min(500px, 48%) !important;

    max-width:
        500px !important;

    min-width:
        0 !important;

    margin:
        0 0 24px 0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    background:
        transparent !important;

    font-size:
        1.04rem !important;

    line-height:
        1.65 !important;

    text-shadow:
        0 2px 12px rgba(0,0,0,.65),
        0 1px 2px rgba(0,0,0,.65) !important;
}


/* ==========================================================
   CTA
   ========================================================== */

body.home-design-v1 main .qf-transport-feature a {

    width:
        auto !important;

    min-width:
        225px !important;

    max-width:
        320px !important;

    margin:
        0 !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1164ec,
            #2c82f6
        ) !important;

    border:
        1px solid rgba(255,255,255,.28) !important;

    box-shadow:
        0 16px 34px rgba(0,0,0,.28),
        0 8px 24px rgba(24,106,235,.35) !important;
}


body.home-design-v1 main .qf-transport-feature a:hover {

    transform:
        translateY(-5px)
        scale(1.025) !important;

    box-shadow:
        0 24px 44px rgba(0,0,0,.35),
        0 12px 30px rgba(24,106,235,.48) !important;
}


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

@media (max-width: 900px) {

    body.home-design-v1 main .qf-transport-feature {

        min-height:
            430px !important;

        padding:
            38px !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(3,15,30,.50) 0%,
                rgba(3,15,30,.31) 50%,
                rgba(3,15,30,.08) 100%
            ),
            url("/assets/images/transport.jpg?v=20260828") !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p {

        width:
            62% !important;

        max-width:
            520px !important;
    }
}


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

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {

        min-height:
            520px !important;

        padding:
            28px 20px !important;

        justify-content:
            flex-end !important;

        background-image:
            linear-gradient(
                0deg,
                rgba(3,15,30,.72) 0%,
                rgba(3,15,30,.40) 48%,
                rgba(3,15,30,.07) 100%
            ),
            url("/assets/images/transport.jpg?v=20260828") !important;

        background-position:
            61% center !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p {

        width:
            100% !important;

        max-width:
            100% !important;

        color:
            #ffffff !important;

        -webkit-text-fill-color:
            #ffffff !important;
    }


    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3 {

        font-size:
            clamp(1.95rem, 9vw, 2.6rem) !important;
    }


    body.home-design-v1 main .qf-transport-feature a {

        width:
            100% !important;

        max-width:
            100% !important;
    }
}



/* ==========================================================
   QFEF TRANSPORT V9 — PHOTO PURE
   ZERO BLANC / ZERO OVERLAY / ZERO PANNEAU
   ========================================================== */

body.home-design-v1 main .qf-transport-feature {
    position: relative !important;

    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
    min-height: 390px !important;

    margin: 45px auto !important;
    padding: 48px !important;

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

    overflow: hidden !important;

    border-radius: 30px !important;

    /* PHOTO SEULE */
    background: url("/assets/images/transport.jpg?v=20260828") center center / cover no-repeat !important;

    box-shadow: 0 22px 55px rgba(7,27,52,.15) !important;
}


/* SUPPRESSION DE TOUS LES ANCIENS CALQUES */

body.home-design-v1 main .qf-transport-feature::before,
body.home-design-v1 main .qf-transport-feature::after {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* AUCUN FOND SUR LES ELEMENTS TEXTE */

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3,
body.home-design-v1 main .qf-transport-feature p,
body.home-design-v1 main .qf-transport-feature strong,
body.home-design-v1 main .qf-transport-feature span {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* TITRE */

body.home-design-v1 main .qf-transport-feature h1,
body.home-design-v1 main .qf-transport-feature h2,
body.home-design-v1 main .qf-transport-feature h3 {
    width: 48% !important;
    max-width: 520px !important;
    min-width: 0 !important;

    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    font-size: clamp(2.2rem,3.5vw,3.3rem) !important;
    line-height: 1.02 !important;
    font-weight: 850 !important;
    letter-spacing: -.045em !important;

    text-shadow:
        0 3px 8px rgba(0,0,0,.95),
        0 7px 25px rgba(0,0,0,.70) !important;
}


/* PARAGRAPHE */

body.home-design-v1 main .qf-transport-feature p {
    width: 48% !important;
    max-width: 500px !important;
    min-width: 0 !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    font-size: 1.04rem !important;
    line-height: 1.65 !important;
    font-weight: 550 !important;

    text-shadow:
        0 2px 6px rgba(0,0,0,1),
        0 5px 18px rgba(0,0,0,.85) !important;
}


/* CTA BLEU */

body.home-design-v1 main .qf-transport-feature a {
    width: auto !important;
    min-width: 230px !important;
    max-width: 330px !important;

    margin: 0 !important;
    padding: 0 23px !important;

    min-height: 56px !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 15px !important;

    background: linear-gradient(135deg,#075bea,#2584ff) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.32),
        0 8px 24px rgba(12,94,230,.42) !important;

    font-weight: 820 !important;
}


body.home-design-v1 main .qf-transport-feature a:hover {
    transform: translateY(-5px) scale(1.025) !important;

    box-shadow:
        0 23px 45px rgba(0,0,0,.40),
        0 12px 32px rgba(12,94,230,.55) !important;
}


/* TABLETTE */

@media (max-width: 900px) {

    body.home-design-v1 main .qf-transport-feature {
        width: calc(100% - 36px) !important;
        min-height: 430px !important;

        padding: 36px !important;

        background: url("/assets/images/transport.jpg?v=20260828") center center / cover no-repeat !important;
    }

    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p {
        width: 62% !important;
    }
}


/* MOBILE */

@media (max-width: 640px) {

    body.home-design-v1 main .qf-transport-feature {
        width: calc(100% - 20px) !important;

        min-height: 520px !important;

        padding: 25px 20px !important;

        justify-content: flex-end !important;

        border-radius: 22px !important;

        /* TOUJOURS PHOTO PURE */
        background: url("/assets/images/transport.jpg?v=20260828") 61% center / cover no-repeat !important;
    }

    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3,
    body.home-design-v1 main .qf-transport-feature p {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home-design-v1 main .qf-transport-feature h1,
    body.home-design-v1 main .qf-transport-feature h2,
    body.home-design-v1 main .qf-transport-feature h3 {
        font-size: clamp(2rem,9vw,2.6rem) !important;
    }

    body.home-design-v1 main .qf-transport-feature a {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* ==========================================================
   QFEF — TRANSPORT TEXTE FINAL
   ========================================================== */


/* Emoji 🚆 supprimé */

body.home-design-v1 main .omio-transport-v1 .omio-v1-icon {
    display: none !important;
}


/* Structure */

body.home-design-v1 main .omio-transport-v1 .omio-v1-inner {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 30px !important;
}


/* Zone texte */

body.home-design-v1 main .omio-transport-v1 .omio-v1-copy {
    flex: 1 1 auto !important;

    max-width: 600px !important;
    min-width: 0 !important;

    background: transparent !important;
}


/* TITRE */

body.home-design-v1 main .omio-transport-v1 .omio-v1-copy strong {
    display: block !important;

    margin: 0 0 12px 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: transparent !important;

    font-size: clamp(2rem, 3.4vw, 3.1rem) !important;
    line-height: 1.03 !important;

    font-weight: 900 !important;
    letter-spacing: -.045em !important;

    text-shadow:
        0 3px 5px rgba(0,0,0,.95),
        0 7px 18px rgba(0,0,0,.90),
        0 12px 35px rgba(0,0,0,.65) !important;
}


/* SOUS-TEXTE */

body.home-design-v1 main .omio-transport-v1 .omio-v1-copy span {
    display: block !important;

    max-width: 550px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: transparent !important;

    font-size: 1.05rem !important;
    line-height: 1.6 !important;

    font-weight: 650 !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 5px 14px rgba(0,0,0,.95),
        0 8px 25px rgba(0,0,0,.70) !important;
}


/* CTA */

body.home-design-v1 main .omio-transport-v1 .omio-v1-btn {
    flex: 0 0 auto !important;

    min-width: 230px !important;
    min-height: 58px !important;

    padding: 0 24px !important;

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

    color: #ffffff !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            #075bea,
            #2584ff
        ) !important;

    box-shadow:
        0 16px 36px rgba(0,0,0,.32),
        0 9px 26px rgba(11,96,235,.48) !important;

    font-weight: 850 !important;

    text-decoration: none !important;
}


body.home-design-v1 main .omio-transport-v1 .omio-v1-btn:hover {
    transform: translateY(-5px) scale(1.025) !important;

    box-shadow:
        0 24px 46px rgba(0,0,0,.40),
        0 13px 34px rgba(11,96,235,.58) !important;
}


/* MOBILE */

@media (max-width: 640px) {

    body.home-design-v1 main .omio-transport-v1 .omio-v1-inner {
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 18px !important;
    }


    body.home-design-v1 main .omio-transport-v1 .omio-v1-copy {
        width: 100% !important;
        max-width: 100% !important;
    }


    body.home-design-v1 main .omio-transport-v1 .omio-v1-copy strong {
        font-size: clamp(2rem, 9vw, 2.65rem) !important;
    }


    body.home-design-v1 main .omio-transport-v1 .omio-v1-copy span {
        font-size: .95rem !important;
    }


    body.home-design-v1 main .omio-transport-v1 .omio-v1-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

}


/* ==========================================================
   QFEF — HEADER BLANC OPAQUE
   ========================================================== */

body.home-design-v1 .site-header,
body.home-design-v1 .site-header.scrolled,
body.home-design-v1 header.site-header {
    background: #ffffff !important;
    background-color: #ffffff !important;

    opacity: 1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(7,27,52,.08) !important;

    box-shadow: 0 6px 22px rgba(7,27,52,.06) !important;
}

body.home-design-v1 .navbar {
    background: #ffffff !important;
}


/* ===== QFEF INNER GLOBAL PREVIEW START ===== */


/* ==========================================================
   PAGES INTERIEURES
   On conserve le design validé mais on neutralise les règles
   qui dépendaient de la position des sections de l'accueil.
   ========================================================== */

body.home-design-v1.qf-inner-preview {
    background:
        radial-gradient(
            circle at 8% 3%,
            rgba(31,99,233,.055),
            transparent 26rem
        ),
        #f7f8fa !important;
}


/* PAS DE COULEUR SELON "section numéro 3 / 5..." */

body.home-design-v1.qf-inner-preview main > section:nth-of-type(odd),
body.home-design-v1.qf-inner-preview main > section:nth-of-type(even),
body.home-design-v1.qf-inner-preview main > section:nth-of-type(3),
body.home-design-v1.qf-inner-preview main > section:nth-of-type(5) {
    background: transparent !important;
    color: inherit !important;
}


/* remet les titres normalement sur pages intérieures */

body.home-design-v1.qf-inner-preview main > section:nth-of-type(5) h1,
body.home-design-v1.qf-inner-preview main > section:nth-of-type(5) h2,
body.home-design-v1.qf-inner-preview main > section:nth-of-type(5) h3 {
    color: #071b34 !important;
    -webkit-text-fill-color: #071b34 !important;
}


body.home-design-v1.qf-inner-preview main > section:nth-of-type(5) p {
    color: #617186 !important;
}


/* ESPACEMENTS PLUS RAISONNABLES */

body.home-design-v1.qf-inner-preview main > section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub):not(.qf-transport-feature) {
    padding-top: 62px !important;
    padding-bottom: 62px !important;

    border-top: 0 !important;
}


/* ==========================================================
   TITRES GENERAUX
   ========================================================== */

body.home-design-v1.qf-inner-preview main h1 {
    color: #071b34;
    letter-spacing: -.04em;
}


body.home-design-v1.qf-inner-preview main h2 {
    color: #071b34 !important;

    font-weight: 820 !important;
    letter-spacing: -.035em !important;
}


body.home-design-v1.qf-inner-preview main h3 {
    color: #0a294d;

    font-weight: 760;
}


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

body.home-design-v1.qf-inner-preview main .card {
    border: 1px solid rgba(7,27,52,.08) !important;

    border-radius: 23px !important;

    background: #fff !important;

    box-shadow:
        0 12px 35px rgba(7,27,52,.075) !important;

    overflow: hidden !important;

    transition:
        transform .24s ease,
        box-shadow .24s ease !important;
}


body.home-design-v1.qf-inner-preview main .card:hover {
    transform: translateY(-5px) !important;

    box-shadow:
        0 24px 55px rgba(7,27,52,.14) !important;
}


/* ==========================================================
   HEADER BLANC DEFINITIF AUSSI EN PREVIEW
   ========================================================== */

body.home-design-v1.qf-inner-preview .site-header,
body.home-design-v1.qf-inner-preview .site-header.scrolled,
body.home-design-v1.qf-inner-preview header.site-header {
    background: #fff !important;
    background-color: #fff !important;

    opacity: 1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom:
        1px solid rgba(7,27,52,.08) !important;

    box-shadow:
        0 6px 22px rgba(7,27,52,.06) !important;
}


body.home-design-v1.qf-inner-preview .navbar {
    background: #fff !important;
}


/* ==========================================================
   CTA
   ========================================================== */

body.home-design-v1.qf-inner-preview main a[class*="btn"],
body.home-design-v1.qf-inner-preview main a[class*="cta"] {
    border-radius: 14px !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


body.home-design-v1.qf-inner-preview main a[class*="btn"]:hover,
body.home-design-v1.qf-inner-preview main a[class*="cta"]:hover {
    transform: translateY(-3px) !important;
}


/* ==========================================================
   MOBILE : VRAIES GOUTTIERES
   ========================================================== */

@media (max-width: 640px) {

    body.home-design-v1.qf-inner-preview main {
        width: 100% !important;
        overflow-x: hidden !important;
    }


    body.home-design-v1.qf-inner-preview main > section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub):not(.qf-transport-feature) {
        padding:
            48px 18px !important;
    }


    body.home-design-v1.qf-inner-preview main .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    body.home-design-v1.qf-inner-preview main h1,
    body.home-design-v1.qf-inner-preview main h2,
    body.home-design-v1.qf-inner-preview main h3,
    body.home-design-v1.qf-inner-preview main p,
    body.home-design-v1.qf-inner-preview main span,
    body.home-design-v1.qf-inner-preview main strong,
    body.home-design-v1.qf-inner-preview main small,
    body.home-design-v1.qf-inner-preview main a {
        max-width: 100% !important;

        overflow-wrap: break-word !important;
    }


    body.home-design-v1.qf-inner-preview img {
        max-width: 100% !important;
        height: auto;
    }
}


@media (max-width: 380px) {

    body.home-design-v1.qf-inner-preview main > section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub):not(.qf-transport-feature) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* ===== QFEF INNER GLOBAL PREVIEW END ===== */


/* ===== QFEF GLOBAL FINAL V1 START ===== */


/* ==========================================================
   BASE GENERALE
   ========================================================== */

body.qf-global-design {
    background: #f7f8fa !important;
    color: #12243a !important;
}


/* ==========================================================
   HEADER TOUJOURS BLANC
   ========================================================== */

body.qf-global-design .site-header,
body.qf-global-design .site-header.scrolled,
body.qf-global-design header.site-header {
    background: #ffffff !important;
    background-color: #ffffff !important;

    opacity: 1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(7,27,52,.08) !important;

    box-shadow:
        0 6px 22px rgba(7,27,52,.06) !important;
}

body.qf-global-design .navbar {
    background: #ffffff !important;
}


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

body.qf-global-design .brand > img {
    display: none !important;
}

body.qf-global-design .brand > span {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;
}

body.qf-global-design .site-header .brand {
    display: block !important;

    width: 200px !important;
    min-width: 200px !important;
    height: 64px !important;

    flex: 0 0 200px !important;

    background:
        url("/assets/logo.png?v=20260828-final")
        center 44% / 100% auto
        no-repeat !important;
}


/* ==========================================================
   CORRECTION IMPORTANTE :
   PLUS DE BLANC SUR BLANC SUR LES PAGES INTERIEURES
   ========================================================== */

body.qf-global-design main h1,
body.qf-global-design main h2,
body.qf-global-design main h3 {
    color: #071b34 !important;
    -webkit-text-fill-color: #071b34 !important;
}

body.qf-global-design main p {
    color: #5d7085 !important;
}


/*
   Annule les anciennes couleurs basées sur
   section:nth-of-type(...) de l'accueil.
*/

body.qf-global-design main > section:nth-of-type(odd),
body.qf-global-design main > section:nth-of-type(even),
body.qf-global-design main > section:nth-of-type(3),
body.qf-global-design main > section:nth-of-type(5) {
    color: inherit !important;
}


/* ==========================================================
   EXCEPTIONS :
   LES VRAIS BLOCS SOMBRES RESTENT BLANCS
   ========================================================== */

/* HERO */

body.qf-global-design .hero h1,
body.qf-global-design .hero h2,
body.qf-global-design .hero h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.qf-global-design .hero p {
    color: rgba(255,255,255,.86) !important;
}


/* TRUST */

body.qf-global-design .qf-v3-trust strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.qf-global-design .qf-v3-trust small {
    color: rgba(255,255,255,.70) !important;
}


/* CONVERSION */

body.qf-global-design .qf-conversion-hub h1,
body.qf-global-design .qf-conversion-hub h2,
body.qf-global-design .qf-conversion-hub h3,
body.qf-global-design .qf-conversion-hub .qf-conversion-copy > strong,
body.qf-global-design .qf-conversion-hub .qf-v36-mobility-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.qf-global-design .qf-conversion-hub .qf-conversion-copy > small {
    color: #bfd0e5 !important;
    -webkit-text-fill-color: #bfd0e5 !important;
}


/* BESOIN D'UNE VOITURE */

body.qf-global-design .qf-conversion-hub [class*="mobility"] > strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* DISCOVERCARS + LOCALRENT */

body.qf-global-design .qf-conversion-hub .qf-v36-choice,
body.qf-global-design .qf-conversion-hub .qf-v36-choice-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0d5bdd,
            #176cec 48%,
            #2e82f6
        ) !important;

    border: 1px solid rgba(255,255,255,.27) !important;

    box-shadow:
        0 14px 34px rgba(13,91,221,.32),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

body.qf-global-design .qf-v36-choice strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.qf-global-design .qf-v36-choice small {
    color: rgba(255,255,255,.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,.78) !important;
}


/* ==========================================================
   TRANSPORT OMIO
   PHOTO PURE — AUCUN DEGRADE BLANC
   ========================================================== */

body.qf-global-design .omio-transport-v1.qf-transport-feature {
    background:
        url("/assets/images/transport.jpg?v=20260828-final")
        center center / cover
        no-repeat !important;
}

body.qf-global-design .qf-transport-feature::before,
body.qf-global-design .qf-transport-feature::after {
    content: none !important;
    display: none !important;
}


/* emoji supprimé */

body.qf-global-design .omio-v1-icon {
    display: none !important;
}


/* texte transport */

body.qf-global-design .omio-transport-v1 .omio-v1-copy strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: transparent !important;

    text-shadow:
        0 3px 5px rgba(0,0,0,.95),
        0 7px 18px rgba(0,0,0,.90),
        0 12px 35px rgba(0,0,0,.65) !important;
}

body.qf-global-design .omio-transport-v1 .omio-v1-copy span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: transparent !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 5px 14px rgba(0,0,0,.95),
        0 8px 25px rgba(0,0,0,.70) !important;
}


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

body.qf-global-design main .card {
    border: 1px solid rgba(7,27,52,.08) !important;

    border-radius: 23px !important;

    background: #ffffff !important;

    box-shadow:
        0 12px 35px rgba(7,27,52,.075) !important;

    overflow: hidden !important;

    transition:
        transform .24s ease,
        box-shadow .24s ease !important;
}

body.qf-global-design main .card:hover {
    transform: translateY(-5px) !important;

    box-shadow:
        0 24px 55px rgba(7,27,52,.14) !important;
}


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

body.qf-global-design .footer {
    color: rgba(255,255,255,.74) !important;

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(31,99,233,.23),
            transparent 26rem
        ),
        linear-gradient(
            145deg,
            #06172c,
            #0a2342
        ) !important;
}

body.qf-global-design .footer h1,
body.qf-global-design .footer h2,
body.qf-global-design .footer h3 {
    color: #ffffff !important;
}

body.qf-global-design .footer p,
body.qf-global-design .footer small {
    color: rgba(255,255,255,.66) !important;
}

body.qf-global-design .footer a {
    color: rgba(255,255,255,.78) !important;
}


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

@media (max-width: 900px) {

    body.qf-global-design .site-header .brand {
        width: 150px !important;
        min-width: 150px !important;
        height: 48px !important;

        flex-basis: 150px !important;
    }
}


@media (max-width: 640px) {

    body.qf-global-design main {
        width: 100% !important;
        overflow-x: hidden !important;
    }


    /*
       GOUTTIERES MOBILES GENERALES
    */

    body.qf-global-design main >
    section:not(.hero):not(.qf-v3-trust):not(.qf-conversion-hub):not(.qf-transport-feature) {

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    body.qf-global-design main .container {
        max-width: 100% !important;
    }


    body.qf-global-design main h1,
    body.qf-global-design main h2,
    body.qf-global-design main h3,
    body.qf-global-design main p,
    body.qf-global-design main strong,
    body.qf-global-design main small,
    body.qf-global-design main a {

        max-width: 100% !important;

        overflow-wrap: break-word !important;
    }


    body.qf-global-design img {
        max-width: 100% !important;
        height: auto;
    }


    body.qf-global-design .site-header .brand {
        width: 138px !important;
        min-width: 138px !important;
        height: 44px !important;

        flex-basis: 138px !important;
    }
}


/* ===== QFEF GLOBAL FINAL V1 END ===== */



/* ==========================================================
   QFEF GLOBAL — HERO VILLES FINAL
   ========================================================== */

body.qf-global-design .qf-city-hero h1,
body.qf-global-design .qf-city-hero h2,
body.qf-global-design .qf-city-hero h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 3px 10px rgba(0,0,0,.55),
        0 8px 30px rgba(0,0,0,.38) !important;
}


body.qf-global-design .qf-city-hero p,
body.qf-global-design .qf-city-hero .lead {
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;

    text-shadow:
        0 2px 7px rgba(0,0,0,.55),
        0 5px 20px rgba(0,0,0,.35) !important;
}


/* liens Incontournables / Activités / Famille / etc */

body.qf-global-design .qf-city-hero a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


body.qf-global-design .qf-city-hero nav a,
body.qf-global-design .qf-city-hero [class*="anchor"] a,
body.qf-global-design .qf-city-hero [class*="quick"] a {
    border-color: rgba(255,255,255,.32) !important;

    background: rgba(5,24,47,.35) !important;

    color: #ffffff !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==========================================================
   TRANSPORT GLOBAL — PHOTO PURE
   ========================================================== */

body.qf-global-design .qf-transport-global {
    background:
        url("/assets/images/transport.jpg?v=20260828-final2")
        center center / cover
        no-repeat !important;

    background-image:
        url("/assets/images/transport.jpg?v=20260828-final2")
        !important;
}


/* AUCUN ancien voile */

body.qf-global-design .qf-transport-global::before,
body.qf-global-design .qf-transport-global::after {
    content: none !important;
    display: none !important;
}


/* contenu transport */

body.qf-global-design .qf-transport-global strong,
body.qf-global-design .qf-transport-global .omio-v1-copy strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 3px 5px rgba(0,0,0,.95),
        0 7px 20px rgba(0,0,0,.85) !important;
}


body.qf-global-design .qf-transport-global span,
body.qf-global-design .qf-transport-global .omio-v1-copy span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.95),
        0 6px 18px rgba(0,0,0,.80) !important;
}


/* emoji transport dégagé */

body.qf-global-design .qf-transport-global .omio-v1-icon {
    display: none !important;
}


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

@media (max-width:640px) {

    body.qf-global-design .qf-city-hero {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    body.qf-global-design .qf-city-hero h1 {
        font-size: clamp(2.6rem,12vw,4rem) !important;
        line-height: .98 !important;
    }


    body.qf-global-design .qf-transport-global {
        background:
            url("/assets/images/transport.jpg?v=20260828-final2")
            61% center / cover
            no-repeat !important;
    }
}



/* ==========================================================
   QFEF — HERO PAGES VILLES AVEC BACKGROUND
   ========================================================== */

body.qf-global-design .page-hero.qf-city-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 440px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,33,.58) 0%,
            rgba(4,17,33,.38) 45%,
            rgba(4,17,33,.13) 100%
        ),
        url("/assets/images/hero.webp?v=20260828-city")
        center center / cover
        no-repeat !important;
}


/* contenu */

body.qf-global-design .page-hero.qf-city-hero > .container {
    position: relative !important;
    z-index: 3 !important;

    width: min(1240px, calc(100% - 64px)) !important;
    max-width: 1240px !important;

    margin: 0 auto !important;
    padding: 65px 0 !important;
}


/* breadcrumb */

body.qf-global-design .page-hero.qf-city-hero .breadcrumb,
body.qf-global-design .page-hero.qf-city-hero .breadcrumb a {
    color: rgba(255,255,255,.82) !important;
    -webkit-text-fill-color: rgba(255,255,255,.82) !important;
}


/* kicker */

body.qf-global-design .page-hero.qf-city-hero .kicker {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-weight: 800 !important;
}


/* titre */

body.qf-global-design .page-hero.qf-city-hero h1 {
    max-width: 850px !important;

    margin: 14px 0 18px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: clamp(3rem,5.4vw,5.4rem) !important;
    line-height: .96 !important;

    font-weight: 870 !important;
    letter-spacing: -.055em !important;

    text-shadow:
        0 3px 14px rgba(0,0,0,.42) !important;
}


/* intro */

body.qf-global-design .page-hero.qf-city-hero .lead {
    max-width: 760px !important;

    color: rgba(255,255,255,.94) !important;
    -webkit-text-fill-color: rgba(255,255,255,.94) !important;

    font-size: 1.08rem !important;
    line-height: 1.7 !important;

    text-shadow:
        0 2px 9px rgba(0,0,0,.46) !important;
}


/* pills */

body.qf-global-design .page-hero.qf-city-hero .pills {
    margin-top: 26px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}


body.qf-global-design .page-hero.qf-city-hero .pill {
    padding: 10px 14px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 999px !important;

    background: rgba(5,24,47,.26) !important;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease !important;
}


body.qf-global-design .page-hero.qf-city-hero .pill:hover {
    background: rgba(25,104,232,.78) !important;

    transform: translateY(-2px) !important;
}


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

@media (max-width: 900px) {

    body.qf-global-design .page-hero.qf-city-hero {
        min-height: 420px !important;

        background:
            linear-gradient(
                90deg,
                rgba(4,17,33,.60),
                rgba(4,17,33,.24)
            ),
            url("/assets/images/hero.webp?v=20260828-city")
            center center / cover
            no-repeat !important;
    }

    body.qf-global-design .page-hero.qf-city-hero > .container {
        width: calc(100% - 40px) !important;

        padding: 52px 0 !important;
    }
}


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

@media (max-width: 640px) {

    body.qf-global-design .page-hero.qf-city-hero {
        min-height: 500px !important;

        background:
            linear-gradient(
                0deg,
                rgba(3,15,30,.66) 0%,
                rgba(3,15,30,.38) 55%,
                rgba(3,15,30,.10) 100%
            ),
            url("/assets/images/hero.webp?v=20260828-city")
            58% center / cover
            no-repeat !important;
    }


    body.qf-global-design .page-hero.qf-city-hero > .container {
        width: 100% !important;

        padding:
            48px 18px
            34px !important;
    }


    body.qf-global-design .page-hero.qf-city-hero h1 {
        font-size: clamp(2.8rem,13vw,4rem) !important;
    }


    body.qf-global-design .page-hero.qf-city-hero .lead {
        font-size: .98rem !important;
    }


    body.qf-global-design .page-hero.qf-city-hero .pill {
        padding: 9px 12px !important;

        font-size: .84rem !important;
    }
}



/* ==========================================================
   QFEF — MOBILE FINAL V2
   ========================================================== */


/* HERO MOBILE */

@media (max-width:640px) {

    body.qf-global-design .page-hero.qf-city-hero {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        min-height: 500px !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero > .container {

        width: 100% !important;

        margin: 0 !important;

        padding:
            45px 18px
            34px !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero h1 {

        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        font-size:
            clamp(2.7rem,12vw,3.9rem) !important;

        line-height: .98 !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero .lead {

        color:
            rgba(255,255,255,.95) !important;

        -webkit-text-fill-color:
            rgba(255,255,255,.95) !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero .breadcrumb,
    body.qf-global-design
    .page-hero.qf-city-hero .breadcrumb a {

        color:
            rgba(255,255,255,.82) !important;
    }


    /* AMAZON */

    body.qf-global-design
    .qf-amazon-bottom-final {

        width: 100% !important;

        margin:
            0 !important;

        padding:
            50px 18px !important;
    }


    body.qf-global-design
    .qf-amazon-bottom-final
    .qf-v36-product-grid {

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    body.qf-global-design
    .qf-amazon-bottom-final
    .qf-v36-product {

        width: 100% !important;

        min-width: 0 !important;
    }

}



/* ==========================================================
   QFEF — HERO MOBILE HAUTEUR AUTOMATIQUE FINAL
   ========================================================== */

@media (max-width:640px) {

    body.qf-global-design .page-hero.qf-city-hero {
        width: 100% !important;
        max-width: none !important;

        /* IMPORTANT : le hero grandit avec son contenu */
        height: auto !important;
        max-height: none !important;
        min-height: 520px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;

        overflow: hidden !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: 58% center !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero > .container {

        position: relative !important;
        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            42px 18px
            38px !important;

        box-sizing: border-box !important;
    }


    /* TITRE */

    body.qf-global-design
    .page-hero.qf-city-hero h1 {

        width: 100% !important;
        max-width: 100% !important;

        margin:
            12px 0
            18px !important;

        font-size:
            clamp(2.55rem,11vw,3.8rem) !important;

        line-height:
            .98 !important;

        overflow-wrap:
            normal !important;

        word-break:
            normal !important;
    }


    /* INTRO */

    body.qf-global-design
    .page-hero.qf-city-hero .lead {

        width: 100% !important;
        max-width: 100% !important;

        margin-bottom:
            22px !important;

        font-size:
            .97rem !important;

        line-height:
            1.58 !important;
    }


    /* PILLS */

    body.qf-global-design
    .page-hero.qf-city-hero .pills {

        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 8px !important;

        margin-top:
            20px !important;

        margin-bottom:
            0 !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero .pill {

        width: auto !important;
        max-width: 100% !important;

        padding:
            8px 11px !important;

        font-size:
            .80rem !important;

        line-height:
            1.3 !important;

        white-space:
            normal !important;
    }

}


/* PETITS MOBILES */

@media (max-width:380px) {

    body.qf-global-design
    .page-hero.qf-city-hero > .container {

        padding:
            36px 15px
            32px !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero h1 {

        font-size:
            clamp(2.35rem,11vw,3.2rem) !important;
    }

}



/* ==========================================================
   QFEF — HERO MOBILE PHOTO SUR TOUTE LA HAUTEUR
   ========================================================== */

@media (max-width:640px) {

    body.qf-global-design .page-hero.qf-city-hero {
        position: relative !important;
        isolation: isolate !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 520px !important;
        max-height: none !important;

        overflow: hidden !important;

        /*
           Simple fond de secours.
           La vraie photo est maintenant sur ::before.
        */
        background: #071b34 !important;
    }


    /* ======================================================
       PHOTO :
       ELLE PREND EXACTEMENT TOUTE LA HAUTEUR DU HERO
       ====================================================== */

    body.qf-global-design .page-hero.qf-city-hero::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: -2 !important;

        width: 100% !important;
        height: 100% !important;

        background-image:
            url("/assets/images/hero.webp?v=20260828-mobile-cover") !important;

        /*
           cover = aucune zone sans photo,
           même avec une image horizontale.
        */
        background-size: cover !important;

        background-position: 58% center !important;

        background-repeat: no-repeat !important;

        pointer-events: none !important;
    }


    /* ======================================================
       LEGER VOILE SOMBRE, JAMAIS BLANC
       juste pour garder le texte lisible
       ====================================================== */

    body.qf-global-design .page-hero.qf-city-hero::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: -1 !important;

        background:
            linear-gradient(
                0deg,
                rgba(3,15,30,.48) 0%,
                rgba(3,15,30,.24) 55%,
                rgba(3,15,30,.08) 100%
            ) !important;

        pointer-events: none !important;
    }


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

    body.qf-global-design
    .page-hero.qf-city-hero > .container {

        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        padding:
            42px 18px
            38px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero h1 {

        width: 100% !important;
        max-width: 100% !important;

        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.58) !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero .lead {

        width: 100% !important;
        max-width: 100% !important;

        color: rgba(255,255,255,.96) !important;
        -webkit-text-fill-color: rgba(255,255,255,.96) !important;

        text-shadow:
            0 2px 9px rgba(0,0,0,.58) !important;
    }


    body.qf-global-design
    .page-hero.qf-city-hero .pills {

        position: relative !important;
        z-index: 3 !important;

        width: 100% !important;

        margin-bottom: 0 !important;
    }

}



/* ==========================================================
   QFEF — HERO VILLES GENERIQUE MOBILE FINAL
   Paris + Valenciennes + toutes variantes
   ========================================================== */

@media (max-width:640px) {

    body.qf-global-design .qf-city-hero {
        position: relative !important;
        isolation: isolate !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 520px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #071b34 !important;
    }


    /* PHOTO SUR TOUTE LA HAUTEUR REELLE */

    body.qf-global-design .qf-city-hero::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 0 !important;

        background:
            url("/assets/images/hero.webp?v=20260828-generic-final")
            58% center / cover
            no-repeat !important;

        pointer-events: none !important;
    }


    /* voile sombre léger */

    body.qf-global-design .qf-city-hero::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: 1 !important;

        background:
            linear-gradient(
                0deg,
                rgba(3,15,30,.54) 0%,
                rgba(3,15,30,.29) 55%,
                rgba(3,15,30,.08) 100%
            ) !important;

        pointer-events: none !important;
    }


    /* CONTAINER PARIS / VALENCIENNES */

    body.qf-global-design
    .qf-city-hero > .container,
    body.qf-global-design
    .qf-city-hero .container {

        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 auto !important;

        padding:
            42px 18px
            38px !important;

        box-sizing: border-box !important;
    }


    /* PARIS : EYEBROW */

    body.qf-global-design
    .qf-city-hero .eyebrow,

    body.qf-global-design
    .qf-city-hero .kicker {

        color: rgba(255,255,255,.88) !important;
        -webkit-text-fill-color: rgba(255,255,255,.88) !important;

        font-weight: 800 !important;

        text-shadow:
            0 2px 8px rgba(0,0,0,.55) !important;
    }


    /* TITRE */

    body.qf-global-design
    .qf-city-hero h1 {

        width: 100% !important;
        max-width: 100% !important;

        margin:
            12px 0
            18px !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size:
            clamp(2.55rem,11vw,3.8rem) !important;

        line-height: .98 !important;
        letter-spacing: -.045em !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.60) !important;
    }


    /* Paris utilise simplement <p>, pas .lead */

    body.qf-global-design
    .qf-city-hero p,
    body.qf-global-design
    .qf-city-hero .lead {

        width: 100% !important;
        max-width: 100% !important;

        color: rgba(255,255,255,.96) !important;
        -webkit-text-fill-color: rgba(255,255,255,.96) !important;

        font-size: .97rem !important;
        line-height: 1.58 !important;

        text-shadow:
            0 2px 9px rgba(0,0,0,.58) !important;
    }


    /* ======================================================
       PARIS : TABLE DES MATIERES
       ====================================================== */

    body.qf-global-design
    .qf-city-hero .toc {

        position: relative !important;
        z-index: 3 !important;

        width: 100% !important;

        margin-top: 23px !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 8px !important;
    }


    body.qf-global-design
    .qf-city-hero .toc a {

        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;

        padding:
            9px 12px !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        border:
            1px solid rgba(255,255,255,.30) !important;

        border-radius:
            999px !important;

        background:
            rgba(5,24,47,.30) !important;

        backdrop-filter:
            blur(7px);

        -webkit-backdrop-filter:
            blur(7px);

        font-size:
            .82rem !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;
    }


    /* VALENCIENNES : PILLS */

    body.qf-global-design
    .qf-city-hero .pills {

        position: relative !important;
        z-index: 3 !important;

        width: 100% !important;

        margin-top: 22px !important;
    }

}


/* petits téléphones */

@media (max-width:380px) {

    body.qf-global-design
    .qf-city-hero > .container,
    body.qf-global-design
    .qf-city-hero .container {

        padding:
            36px 15px
            32px !important;
    }

}



/* ==========================================================
   QFEF — SINGLE HERO FINAL
   UNE SEULE PHOTO
   ========================================================== */

body.qf-global-design .qf-single-city-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
}


/*
 IMPORTANT :
 aucune image sur ::before / ::after.
 La photo est UNIQUEMENT sur le hero lui-même.
*/

body.qf-global-design .qf-single-city-hero::before,
body.qf-global-design .qf-single-city-hero::after {

    content: none !important;
    display: none !important;

    background: none !important;
    background-image: none !important;
}


/* CONTENU AU-DESSUS */

body.qf-global-design
.qf-single-city-hero > .container,
body.qf-global-design
.qf-single-city-hero .container {

    position: relative !important;
    z-index: 2 !important;
}


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

@media (max-width:640px) {

    body.qf-global-design .qf-single-city-hero {

        width: 100% !important;

        min-height: 520px !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.qf-global-design
    .qf-single-city-hero > .container,
    body.qf-global-design
    .qf-single-city-hero .container {

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            42px 18px
            38px !important;
    }


    body.qf-global-design
    .qf-single-city-hero h1 {

        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.58) !important;
    }


    body.qf-global-design
    .qf-single-city-hero p {

        color:
            rgba(255,255,255,.96) !important;

        -webkit-text-fill-color:
            rgba(255,255,255,.96) !important;
    }

}



/* ==========================================================
   QFEF — ANCIENNES PAGES TYPE PARIS
   AUCUNE IMAGE AJOUTEE
   ========================================================== */

/*
   IMPORTANT :
   aucun background-image ici.
   Paris conserve SON hero original.
*/

body.qf-global-design .qf-legacy-city-hero {
    position: relative !important;
    overflow: hidden !important;
}


/* Empêche nos anciens pseudo-elements de rajouter hero.webp */

body.qf-global-design .qf-legacy-city-hero::before,
body.qf-global-design .qf-legacy-city-hero::after {
    background-image: none !important;
}


/* contenu */

body.qf-global-design
.qf-legacy-city-hero .container {

    position: relative !important;
    z-index: 3 !important;
}


/* Guide local */

body.qf-global-design
.qf-legacy-city-hero .eyebrow {

    color: rgba(255,255,255,.88) !important;
    -webkit-text-fill-color: rgba(255,255,255,.88) !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55) !important;
}


/* Que faire à Paris */

body.qf-global-design
.qf-legacy-city-hero h1 {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 3px 12px rgba(0,0,0,.62) !important;
}


/* paragraphe */

body.qf-global-design
.qf-legacy-city-hero p {

    color: rgba(255,255,255,.96) !important;
    -webkit-text-fill-color: rgba(255,255,255,.96) !important;

    text-shadow:
        0 2px 9px rgba(0,0,0,.58) !important;
}


/* boutons Paris */

body.qf-global-design
.qf-legacy-city-hero .toc {

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    margin-top: 22px !important;
}


body.qf-global-design
.qf-legacy-city-hero .toc a {

    padding: 9px 12px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    border-radius: 999px !important;

    background:
        rgba(5,24,47,.30) !important;

    text-decoration: none !important;
}


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

@media (max-width:640px) {

    body.qf-global-design
    .qf-legacy-city-hero {

        height: auto !important;
        max-height: none !important;

        /*
         TOUJOURS AUCUNE IMAGE ICI.
         On laisse le background natif de Paris.
        */
    }


    body.qf-global-design
    .qf-legacy-city-hero .container {

        width: 100% !important;
        max-width: 100% !important;

        padding:
            42px 18px
            38px !important;
    }


    body.qf-global-design
    .qf-legacy-city-hero h1 {

        font-size:
            clamp(2.55rem,11vw,3.8rem) !important;

        line-height: .98 !important;
    }

}



/* ==========================================================
   ==========================================================
   QFEF — UNIFIED CITY HERO FINAL
   UN SEUL DESIGN POUR TOUTES LES VILLES
   ==========================================================
   ========================================================== */


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

body.home-design-v1.qf-global-design main >
section.qf-unified-city-hero {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 460px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;

    /*
       Le JS met la photo en inline !important.
       Aucun ::before avec une seconde photo.
    */

    background-color: #071b34 !important;

    box-shadow: none !important;
}


/* AUCUNE DEUXIEME PHOTO */

body.qf-global-design
.qf-unified-city-hero::before,

body.qf-global-design
.qf-unified-city-hero::after {

    content: none !important;

    display: none !important;

    background: none !important;
    background-image: none !important;
}


/* ==========================================================
   INNER
   ========================================================== */

body.qf-global-design
.qf-unified-city-hero-inner {

    position: relative !important;

    z-index: 5 !important;

    width: min(1240px, calc(100% - 64px)) !important;
    max-width: 1240px !important;

    margin: 0 auto !important;

    padding:
        65px 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

body.qf-global-design
.qf-unified-city-hero .breadcrumb,

body.qf-global-design
.qf-unified-city-hero .breadcrumb a {

    color:
        rgba(255,255,255,.80) !important;

    -webkit-text-fill-color:
        rgba(255,255,255,.80) !important;

    text-shadow:
        0 2px 7px rgba(0,0,0,.45) !important;
}


/* ==========================================================
   EYEBROW / KICKER
   ========================================================== */

body.qf-global-design
.qf-unified-city-hero .eyebrow,

body.qf-global-design
.qf-unified-city-hero .kicker {

    display: inline-block !important;

    margin-bottom: 10px !important;

    color:
        rgba(255,255,255,.92) !important;

    -webkit-text-fill-color:
        rgba(255,255,255,.92) !important;

    font-size: .82rem !important;

    font-weight: 820 !important;

    letter-spacing:
        .08em !important;

    text-transform:
        uppercase !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.50) !important;
}


/* ==========================================================
   H1
   ========================================================== */

body.home-design-v1.qf-global-design
main .qf-unified-city-hero h1 {

    width: auto !important;
    max-width: 900px !important;

    margin:
        8px 0
        19px !important;

    padding: 0 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    background:
        transparent !important;

    font-size:
        clamp(3rem,5.5vw,5.4rem) !important;

    line-height:
        .96 !important;

    font-weight:
        880 !important;

    letter-spacing:
        -.055em !important;

    text-shadow:
        0 3px 12px rgba(0,0,0,.58),
        0 9px 32px rgba(0,0,0,.32) !important;
}


/* ==========================================================
   INTRO
   Paris utilise <p>
   Valenciennes utilise .lead
   ========================================================== */

body.home-design-v1.qf-global-design
main .qf-unified-city-hero p,

body.home-design-v1.qf-global-design
main .qf-unified-city-hero .lead {

    width: auto !important;
    max-width: 790px !important;

    margin:
        0 0 22px !important;

    color:
        rgba(255,255,255,.95) !important;

    -webkit-text-fill-color:
        rgba(255,255,255,.95) !important;

    background:
        transparent !important;

    font-size:
        1.07rem !important;

    line-height:
        1.68 !important;

    text-shadow:
        0 2px 9px rgba(0,0,0,.55) !important;
}


/* ==========================================================
   PILLS + TOC
   Même design pour Paris et Valenciennes
   ========================================================== */

body.qf-global-design
.qf-unified-city-hero .pills,

body.qf-global-design
.qf-unified-city-hero .toc {

    width: 100% !important;

    margin-top:
        24px !important;

    display:
        flex !important;

    flex-wrap:
        wrap !important;

    gap:
        9px !important;
}


body.qf-global-design
.qf-unified-city-hero .pill,

body.qf-global-design
.qf-unified-city-hero .toc a {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        auto !important;

    min-height:
        39px !important;

    padding:
        8px 13px !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    border-radius:
        999px !important;

    background:
        rgba(5,24,47,.31) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07) !important;

    font-size:
        .84rem !important;

    font-weight:
        720 !important;

    line-height:
        1.25 !important;

    text-decoration:
        none !important;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease !important;
}


body.qf-global-design
.qf-unified-city-hero .pill:hover,

body.qf-global-design
.qf-unified-city-hero .toc a:hover {

    transform:
        translateY(-2px) !important;

    background:
        rgba(25,104,232,.82) !important;

    border-color:
        rgba(255,255,255,.48) !important;
}


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

@media (max-width:640px) {

    body.home-design-v1.qf-global-design
    main > section.qf-unified-city-hero {

        width: 100% !important;

        /*
           PAS DE HAUTEUR FIXE.
           Le contenu décide de la hauteur.
           La photo background couvre automatiquement
           toute cette hauteur.
        */

        min-height: 520px !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        background-size:
            cover !important;

        background-position:
            58% center !important;

        overflow:
            hidden !important;
    }


    body.qf-global-design
    .qf-unified-city-hero-inner {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            42px 18px
            38px !important;
    }


    body.home-design-v1.qf-global-design
    main .qf-unified-city-hero h1 {

        width: 100% !important;
        max-width: 100% !important;

        font-size:
            clamp(2.55rem,11vw,3.8rem) !important;

        line-height:
            .98 !important;
    }


    body.home-design-v1.qf-global-design
    main .qf-unified-city-hero p,

    body.home-design-v1.qf-global-design
    main .qf-unified-city-hero .lead {

        width: 100% !important;
        max-width: 100% !important;

        font-size:
            .97rem !important;

        line-height:
            1.58 !important;
    }


    body.qf-global-design
    .qf-unified-city-hero .pills,

    body.qf-global-design
    .qf-unified-city-hero .toc {

        width: 100% !important;

        gap:
            8px !important;
    }


    body.qf-global-design
    .qf-unified-city-hero .pill,

    body.qf-global-design
    .qf-unified-city-hero .toc a {

        min-height:
            36px !important;

        padding:
            8px 11px !important;

        font-size:
            .80rem !important;

        white-space:
            normal !important;
    }

}


/* ==========================================================
   TRES PETITS MOBILES
   ========================================================== */

@media (max-width:380px) {

    body.qf-global-design
    .qf-unified-city-hero-inner {

        padding:
            36px 15px
            32px !important;
    }


    body.home-design-v1.qf-global-design
    main .qf-unified-city-hero h1 {

        font-size:
            clamp(2.35rem,11vw,3.2rem) !important;
    }

}