@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap);
:root {
    --red: #e10202;
    --red-dark: #b80101;
    --ink: #262626;
    --ink-strong: #191919;
    --muted: #5d5d5d;
    --muted-soft: #7a7a7a;
    --bg-soft: #f2f2f2;
    --border: #d9d9d9;
    --hairline: #e7e7e7;
    --white: #fff;
    --page: 1440px;
    --gutter: 120px;
    --font: Inter, sans-serif;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: Syne, sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: #2b303b;
    /* transition: color .18s ease, background .18s ease, opacity .18s ease */
}

a:hover {
    text-decoration: none;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
}

@keyframes dfskFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.section {
    margin: 50px auto;
}

.nav-list {
    position: relative;
}

.nav-list .nav-list-item {
    display: none;
    position: absolute;
    top: 100%;
    left: -18px;
    padding-top: 16px;
    z-index: 70;
}

.nav-list:hover .nav-list-item {
    display: block;
}

.nav-list-item-inner {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(15, 18, 28, 0.16);
    padding: 8px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.nav-list-item-inner a {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #2b303b;
}

.nav-list-item-inner a:hover {
    background: #f5f6f8;
    color: #0d0f15;
}

.nav-list-item-inner .gamme-item {
    display: flex;
    align-items: center;
    margin: 11px;
}

.caret {
    font-size: 10px;
    opacity: 2.6;
}

/* utilities */
.u1 {
    animation: 0.5s ease 0s 1 normal none running dfskFade;
}

.hero {
    position: relative;
}

.hero-media {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgb(17, 20, 29);
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(15, 18, 28, 0.72) 0%,
        rgba(15, 18, 28, 0.35) 40%,
        rgba(15, 18, 28, 0.05) 75%
    );
}

.hero-inner {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

/* ===== Titre + CTA ===== */
.hero-text {
    max-width: 640px;
    animation: 0.8s ease 0s 1 normal both running dfskUp;
}

.hero .hero-title {
    color: #fff;
    font-size: 60px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.02;
    margin-bottom: 34px;
    max-width: 500px;
}

.hero-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgb(30, 34, 51);
    color: #fff;
    padding: 16px 30px;
    border-radius: 4px;
    text-decoration: none;
}
@media (max-width: 767px){
    .hero .hero-title {
        font-size: 40px;
        max-width: 400px;
    }
}
@media (max-width: 575px){
    .hero .hero-title {
        font-size: 34px;
        max-width: 350px;
    }
}

/* ===== Liens bas de page ===== */
.hero-footer {
    margin-top: 50px;
}

.hero-links {
    max-width: 1280px;
    margin: 0 auto;
}

.hero-link {
    position: relative;
    display: block;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    padding-top: 18px;
    padding-right: 24px;
}

.hero-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 24px);
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.hero-links .col-4:not(:first-child) .hero-link {
    padding-left: 24px;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .hero-title {
        font-size: 36px;
    }

    .hero-text {
        max-width: 556px;
    }

    .hero-btn {
        font-size: 11px;
    }

    .hero-link {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .hero-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .hero-btn {
        font-size: 12px;
    }

    .hero-link {
        padding-left: 0 !important;
        padding-top: 31px;
    }

    .hero-footer {
        margin-top: 35px;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 37px;
        line-height: 1.2;
    }

    .hero-title {
        font-size: 37px;
        line-height: 1.2;
    }

    .hero-links .row {
        flex-direction: column;
    }

    .hero-links .col-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .hero-link {
        padding: 24px 0 !important;
    }

    .hero-link::before {
        width: 100%;
    }

    .hero-links .col-4:first-child .hero-link {
        padding-top: 18px;
    }
}

@keyframes dfskUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.u22 {
    margin: 50px 0;
}
.section_gamme {
    margin: 50px auto;
}

.gamme_titre_section {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #1e2233;
    margin-bottom: 40px;
}

/* ===== WRAPPER SLIDER ===== */
.gamme_slider_wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== FLÈCHES ===== */
.gamme_arrow {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #c7c9cf;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.gamme_arrow:hover {
    color: #1e2233;
}

.gamme_arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ===== PISTE (défilement horizontal) ===== */
.gamme_groupe {
    display: flex;
    gap: 34px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    flex: 1 1 auto;
    /* masquer la scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gamme_groupe::-webkit-scrollbar {
    display: none;
}

.gamme_item {
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex: 0 0 calc((100% - 68px) / 3); /* 3 items visibles, ajuste selon besoin */
    scroll-snap-align: start;
}

.gamme_image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.gamme_nom {
    font-size: 18px;
    font-weight: 700;
    color: #1e2233;
    margin: 4px 0 2px;
}

.gamme_ref {
    font-size: 14px;
    font-weight: 500;
    color: #8a8f9c;
    margin-bottom: 4px;
}

.gamme_prix {
    font-size: 14px;
    font-weight: 600;
    color: rgb(30, 34, 51);
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .gamme_item {
        flex: 0 0 calc((100% - 34px) / 2);
    }
}

@media (max-width: 576px) {
    .gamme_item {
        flex: 0 0 100%;
    }
}
.u25 {
    max-width: 430px;
    color: #5b616e;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.u26 {
    display: inline-block;
    background: #1e2233;
    color: #fff;
    padding: 16px 28px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 35px;
    transition: 0.3s;
}

.u26:hover {
    background: #31374d;
    color: #fff;
    text-decoration: none;
}

.u27 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.u28 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #555;
    font-size: 15px;
    line-height: 1.8;
}

.u29 {
    color: #1e2233;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.u28 strong {
    color: #1e2233;
    font-weight: 600;
}

/* @media (max-width: 991px) {
    .u22 {
        padding: 58px 0 !important;
    }
} */

@media (max-width: 767px) {
    .u24 {
        font-size: 39px;
        margin-bottom: 18px;
    }
}

/* .block_img_bg {
    position: relative;
}

.block_img_bg .u34 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(90deg,
            rgba(15, 18, 28, 0.55),
            rgba(15, 18, 28, 0.25) 70%,
            rgba(15, 18, 28, 0.15));
}

.block_img_bg .u35 {
    position: relative;
    max-width: 1280px;
    margin: 0px auto;
    padding: 120px 0 130px;
}

.block_img_bg .u36 {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.05;
    max-width: 640px;
    margin-bottom: 34px;
}

.block_img_bg .u37 {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 15px 30px;
    border-radius: 4px;
} */
.block_img_bg {
    position: relative;
    background: rgb(17, 20, 29);
    overflow: hidden;
}

.block_img_bg .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.block_img_bg .u34 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        191deg,
        rgba(15, 18, 28, 0.95) 0%,
        rgba(15, 18, 28, 0.85) 30%,
        rgba(15, 18, 28, 0.3) 55%,
        rgba(15, 18, 28, 0) 75%
    );
    z-index: 1;
}

.block_img_bg .u35 {
    position: relative;
    max-width: 1280px;
    margin: 0px auto;
    padding: 120px 0 130px;
    z-index: 2;
}

.block_img_bg .u36 {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.05;
    max-width: 640px;
    margin-bottom: 34px;
}

.block_img_bg .u37 {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 15px 30px;
    border-radius: 4px;
}
/* .info-global */
.info-global {
    background: rgb(255, 255, 255);
}

.info-global .u39 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 44px;
}

.info-global .u40 {
    margin-top: -64px;
    position: relative;
    background: rgb(255, 255, 255);
    box-shadow: rgba(15, 18, 28, 0.12) 0px 20px 50px;
    border-radius: 6px;
    overflow: hidden;
}

.info-global .u41 {
    padding: 36px 34px;
    border-right: 1px solid rgb(231, 233, 238);
}

.info-global .u41:last-child {
    border-right: none !important;
}

.info-global .u42 {
    font-size: 14px;
    color: rgb(91, 97, 110);
    margin-bottom: 14px;
}

.info-global .u43 {
    color: rgb(32, 36, 46);
    font-weight: 500;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (max-width: 991px) {
    .info-global .u39 {
        padding: 0 20px;
    }

    .info-global .u40 {
        margin-top: -40px;
    }

    .info-global .u41 {
        border-right: 1px solid #e7e9ee;
        padding: 30px 20px;
    }

    .info-global .u41:nth-child(4) {
        border-right: none;
    }

    /* Supprime le trait horizontal de la dernière ligne */
    .info-global .u41:nth-child(3),
    .info-global .u41:nth-child(4) {
        border-bottom: none;
    }

    .info-global .u43 {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    .info-global .u40 {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .info-global .u39 {
        padding: 0 15px;
    }

    .info-global .u40 {
        margin-top: -25px;
    }

    .info-global .u41 {
        border-right: none;
        border-bottom: 1px solid #e7e9ee;
        padding: 25px 20px;
    }

    .info-global .u41:last-child {
        border-bottom: none;
    }

    .info-global .u42 {
        font-size: 13px;
    }

    .info-global .u43 {
        font-size: 32px;
    }
}

.dfsk_excellence_technique {
    margin: 50px auto;
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center */
}

.dfsk_excellence_technique .row {
    align-items: center;
}

.dfsk_excellence_technique .u45 {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.dfsk_excellence_technique .u46 {
    font-size: 44px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 12px 0px 30px;
}

.dfsk_excellence_technique .u47 {
    display: grid;
    gap: 17px;
}

.dfsk_excellence_technique .u48 {
    font-size: 19px;
    margin-bottom: 5px;
}

.dfsk_excellence_technique .u49 {
    font-size: 14px;
    color: rgb(91, 97, 110);
}

@media (max-width: 991px) {
    .dfsk_excellence_technique_img {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .dfsk_excellence_technique .u46 {
        font-size: 39px;
        margin: 12px 0px 19px;
    }
}

.experience_client_sans_souci .u52 {
    font-size: 44px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.experience_client_sans_souci .u53 {
    color: rgb(91, 97, 110);
    max-width: 720px;
    margin-bottom: 44px;
}

.experience_client_sans_souci .u54 {
    margin-bottom: 18px;
}

.experience_client_sans_souci .u55 {
    font-size: 18px;
    margin-bottom: 8px;
}

.u56 {
    background: rgb(17, 19, 24);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 64px 34px;
}

.u57 {
    max-width: 760px;
    margin: 0px auto;
    text-align: center;
}

.u58 {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 800;
    font-size: 38px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
}

@media (max-width: 575px) {
    .experience_client_sans_souci .u52 {
        font-size: 35px;
    }

    .experience_client_sans_souci .u53 {
        margin-bottom: 17px;
    }
}

.u59 {
    color: rgb(144, 150, 160);
    margin: 12px 0px 26px;
}

.u60 {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.u61 {
    flex: 1 1 0%;
    min-width: 240px;
    max-width: 360px;
    background: rgb(11, 12, 15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgb(255, 255, 255);
    padding: 15px 18px;
    border-radius: 2px;
    font-size: 15px;
    font-family: Manrope, sans-serif;
}

.u62 {
    cursor: pointer;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 15px;
    background: rgb(255, 255, 255);
    color: rgb(11, 12, 15);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 15px 30px;
    border-radius: 2px;
}

.u63 {
    font-size: 12px;
    color: rgb(107, 114, 128);
    margin-top: 16px;
}

.u64 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 76px 44px 40px;
}

.u65 {
    font-size: 54px;
    text-transform: uppercase;
    margin: 14px 0px 16px;
    max-width: 820px;
}

.u66 {
    color: rgb(91, 97, 110);
    max-width: 680px;
}

/* ---------------------------------page gamme-------------------------------------------- */

.content_modeles{
    padding-bottom: 70px;
}
.gamme {
    margin: 0px auto;
    padding: 20px 0;
    display: grid;
}

.gamme .u68 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 12px;
    overflow: hidden;
}

.gamme .side_image {
    background: linear-gradient(135deg, rgb(247, 248, 250), rgb(238, 240, 243));
    display: flex;
    align-items: center;
    justify-content: center;
    height: stretch;
}

.gamme .u69 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.gamme .u71 {
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gamme .u72 {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(138, 144, 156);
    font-weight: 700;
}

.gamme .u73 {
    font-size: 36px;
    margin: 6px 0px;
}

.gamme .u74 {
    font-size: 15px;
    color: rgb(32, 36, 46);
    font-weight: 700;
    margin-bottom: 10px;
}

.gamme .u75 {
    font-size: 15px;
    color: rgb(91, 97, 110);
    margin-bottom: 22px;
}

.gamme .u76 {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.gamme .u77 {
    font-weight: 600;
    font-size: 14px;
    color: rgb(44, 50, 71);
    border-left: 2px solid rgb(195, 200, 209);
    padding-left: 11px;
}

.gamme .u78 {
    display: flex;
    gap: 12px;
}

.gamme .u79 {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 12px 26px;
    border-radius: 4px;
}

.gamme .u80 {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgb(208, 212, 219);
    color: rgb(30, 34, 51);
    padding: 12px 26px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .gamme .u73 {
        font-size: 31px;
    }

    .gamme .u72 {
        font-size: 11px;
    }

    .gamme .u75 {
        font-size: 14px;
    }

    .gamme .u77 {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .gamme .u75 {
        font-size: 12px;
    }

    .gamme .u76 {
        gap: 18px;
    }

    .gamme .u73 {
        font-size: 29px;
    }

    .gamme .u74 {
        font-size: 14px;
    }
    .gamme .u71 {
        padding: 35px 20px;
    }
}

/* ----------- Page modele ------------ */
.hero_modele {
    position: relative;
    height: 650px;
    display: flex;
    align-items: flex-end;
}

/* BANDE DE STATISTIQUES */

.statband {
    background: #11141d;
    color: #fff;
}
.statband .container {
    display: flex;
}
.statband__item {
    flex: 1;
    padding: 34px 48px;
    text-align: center;
}

.statband__num {
    font-size: 46px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
}

.statband__lab {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.3px;
}

/* ---------- BANDE DE STATISTIQUES — responsive ---------- */
@media (max-width: 1199px) {
    .statband__item {
        padding: 30px 32px;
    }

    .statband__num {
        font-size: 38px;
    }
}

@media (max-width: 991px) {
    .statband .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .statband__item {
        padding: 26px 28px;
    }
    .statband__num {
        font-size: 34px;
        letter-spacing: -0.6px;
    }
    .statband__lab {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .statband .container {
        grid-template-columns: 1fr;
    }
    .statband__item {
        padding: 20px 22px;
        border-left: 0;
    }
    .statband__item:nth-child(even) {
        border-left: 0;
    }

    /* Une seule colonne : chaque cellule sauf la première prend un filet haut. */
    .statband__item + .statband__item {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .statband__num {
        font-size: 30px;
    }

    .statband__lab {
        margin-top: 6px;
        font-size: 13.5px;
    }
}

.hero_modele .u82 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        rgba(15, 18, 28, 0.05),
        rgba(15, 18, 28, 0.02) 45%,
        rgba(15, 18, 28, 0.55)
    );
    z-index: 1;
}
.hero_modele picture {
    height: 100%;
    width: 100%;
    position: absolute;
}
.hero_modele picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.hero_modele .u83 {
    position: relative;
    padding-bottom: 70px;
    width: 100%;
    z-index: 2;
}

.hero_modele .u84 {
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    font-size: 13px;
}

.hero_modele .u85 {
    color: rgb(255, 255, 255);
    font-size: 76px;
    text-transform: uppercase;
    margin: 8px 0px 10px;
}

.hero_modele .u86 {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 520px;
    margin-bottom: 8px;
}

.hero_modele .u87 {
    font-weight: 600;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin-bottom: 26px;
}

.hero_modele .u88 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero_modele .u89 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(255, 255, 255);
    color: rgb(32, 36, 46);
    padding: 14px 28px;
    border-radius: 4px;
}

.hero_modele .u90 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgb(255, 255, 255);
    padding: 14px 28px;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .hero_modele .u85 {
        font-size: 52px;
        margin: 4px 0px 4px;
    }

    .hero_modele .u86 {
        font-size: 17px;
    }

    .hero_modele .u87 {
        font-size: 21px;
    }

    .hero_modele .u89 {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .hero_modele .u85 {
        font-size: 42px;
    }

    .hero_modele .u84 {
        font-size: 12px;
    }

    .hero_modele .u86 {
        font-size: 16px;
    }

    .hero_modele .u87 {
        font-size: 19px;
    }

    .hero_modele .u89 {
        font-size: 13px;
    }
}

.modele_text {
    margin: 50px auto;
    padding: 0 0;
    text-align: center;
}

.modele_preview {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.modele_titre {
    font-size: 36px;
    margin: 14px 0px 16px;
}

.block-image {
    margin-top: 52px;
}

.modele_content {
    font-size: 15px;
    color: rgb(91, 97, 110);
    margin-bottom: 22px;
}

/* @media (max-width: 991px) {
    .modele_text {
        padding: 55px 44px;
    }
} */

@media (max-width: 767px) {
    /* .modele_text {
        padding: 29px 44px;
    } */

    .modele_titre {
        font-size: 31px;
        margin: 9px 0px 9px;
    }

    .modele_preview {
        font-size: 14px;
    }

    .modele_content {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .modele_titre {
        font-size: 27px;
        margin: 7px 0px 7px;
    }

    .modele_content {
        font-size: 12px;
    }

    .modele_preview {
        font-size: 12px;
    }
}

.galerie_titre {
    font-size: 32px;
    margin-bottom: 20px;
}

.galerie .u142 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Badge "voir la galerie" — mobile uniquement, indique que l'image ouvre une popup */
.galerie .icon_galerie {
    display: none;
}

.galerie .u143 {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 240px;
}
.galerie .u143 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galerie .u99 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease;
}

.galerie .u99:hover {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .galerie .u142 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 575px) {
    .galerie .u142 {
        display: block;
    }
    .galerie .u143 {
        display: none;
    }
    .galerie .u143:first-child {
        display: block;
    }
    .galerie .u143 img {
        width: 100%;
    }
    .galerie .icon_galerie {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(17, 20, 29, 0.75);
        color: #fff;
        font-size: 14px;
        line-height: 1;
        pointer-events: none;
        backdrop-filter: blur(4px);
    }
    .galerie .icon_galerie .bi {
        font-size: 16px;
    }
}

.u91 {
    background: rgb(17, 20, 29);
}

.u92 {
    max-width: 1080px;
    margin: 0px auto;
    padding: 56px 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

.u93 {
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.u94 {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}

.u95 {
    max-width: 1000px;
    margin: 0px auto;
    padding: 88px 44px 34px;
    text-align: center;
}

.u96 {
    font-size: 42px;
    margin: 14px 0px 12px;
}

.u97 {
    color: rgb(91, 97, 110);
    max-width: 640px;
    margin: 0px auto;
}

.u98 {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 500px;
    overflow: hidden;
    background: rgb(17, 20, 29);
}

.u99 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.u100 {
    max-width: 1000px;
    margin: 0px auto;
    padding: 70px 44px;
    text-align: center;
}

.u101 {
    font-size: 40px;
    margin: 14px auto 12px;
    max-width: 680px;
}

.u102 {
    color: rgb(91, 97, 110);
    font-size: 17px;
    max-width: 620px;
    margin: 0px auto;
}

.u103 {
    background: rgb(245, 246, 248);
    border-top: 1px solid rgb(236, 238, 241);
}

.u104 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 80px 44px;
    text-align: center;
}

.u105 {
    font-size: 40px;
    margin: 0px auto 14px;
    max-width: 560px;
}

.u106 {
    color: rgb(91, 97, 110);
    max-width: 520px;
    margin: 0px auto 28px;
}

.u107 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 15px 30px;
    border-radius: 4px;
}

.u108 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid rgb(208, 212, 219);
    color: rgb(30, 34, 51);
    padding: 15px 30px;
    border-radius: 4px;
}

.u109 {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: flex-end;
    background: rgb(17, 20, 29);
}

.u110 {
    position: absolute;
    inset: 0px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.u111 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        rgba(15, 18, 28, 0.3),
        rgba(15, 18, 28, 0.1) 40%,
        rgba(15, 18, 28, 0.85)
    );
}

.u112 {
    position: relative;
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 44px 60px;
    width: 100%;
}

.u113 {
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    font-size: 13px;
}

.u114 {
    color: rgb(255, 255, 255);
    font-size: 64px;
    text-transform: uppercase;
    margin: 8px 0px 12px;
}

.u115 {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.88);
    max-width: 560px;
    margin-bottom: 8px;
}

.u116 {
    font-weight: 700;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin-bottom: 28px;
}

.u117 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: rgb(255, 255, 255);
    padding: 14px 28px;
    border-radius: 4px;
}

/* ----------------------------------------------page modele 2---------------------------------------------- */

.characteristics .u119 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(247, 248, 250), rgb(238, 240, 243));
    border-radius: 12px;
    padding: 34px;
}

.characteristics .u121 {
    font-size: 36px;
    margin-bottom: 14px;
}

.characteristics .u122 {
    color: rgb(91, 97, 110);
    margin-bottom: 30px;
}

.characteristics .u124 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 8px;
    padding: 20px 16px;
    height: 100%;
}

.characteristics .u125 {
    font-weight: 500;
    font-size: 23px;
    color: rgb(30, 34, 51);
    letter-spacing: -0.01em;
}

.characteristics .u126 {
    font-size: 12px;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 5px;
}

@media (max-width: 991px) {
    .characteristics .characteristics_contenu {
        margin-top: 37px;
    }
}

@media (max-width: 767px) {
    .characteristics .u121 {
        font-size: 32px;
        margin-bottom: 7px;
    }

    .characteristics .u122 {
        font-size: 14px;
        margin-bottom: 17px;
    }

    .characteristics .u125 {
        font-size: 19px;
    }

    .characteristics .u126 {
        font-size: 11px;
    }
}

@media (max-width: 575px) {
    .characteristics .u121 {
        font-size: 27px;
        margin-bottom: 6px;
    }

    .characteristics .u122 {
        font-size: 12px;
        margin-bottom: 15px;
    }
}

.design {
    background: #f5f6f8;
}

.design .u45 {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.design .u128 {
    margin-bottom: 44px;
}

.design .u129 {
    font-size: 38px;
    margin: 12px 0px;
}

.design .u130 {
    color: rgb(91, 97, 110);
}

.design .u132 {
    border-radius: 10px;
    padding: 32px;
    height: 100% !important;
}

.design .u133 {
    font-size: 22px;
    margin-bottom: 8px;
}

.design .u134 {
    font-size: 15px;
    color: rgb(91, 97, 110);
}

@media (max-width: 991px) {
    .design .u129 {
        font-size: 34px;
        margin: 7px 0px;
    }

    .design .u130 {
        font-size: 14px;
    }

    .design .u128 {
        margin-bottom: 24px;
    }

    .design .u134 {
        font-size: 14px;
    }

    .design .u132 {
        padding: 25px;
    }

    .design .u133 {
        font-size: 21px;
    }
}

@media (max-width: 575px) {
    .design .u129 {
        font-size: 31px;
        margin: 5px 0px;
    }

    .design .u130 {
        font-size: 13px;
    }

    .design .u133 {
        font-size: 20px;
        margin-bottom: 7px;
    }

    .design .u132 {
        padding: 18px;
    }

    .design {
        padding: 30px 0;
    }
}

.block-caracteristiques {
    margin: 50px 0;
}

.block-caracteristiques .u45 {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.block-caracteristiques .u128 {
    margin-bottom: 44px;
}

.block-caracteristiques .u129 {
    font-size: 38px;
    margin: 12px 0px;
}

.block-caracteristiques .u130 {
    color: rgb(91, 97, 110);
}

.block-caracteristiques .u132 {
    background: #f5f6f8;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    padding: 32px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 34px;
}

.block-caracteristiques .u133 {
    font-size: 22px;
    margin-bottom: 8px;
}

.block-caracteristiques .u134 {
    font-size: 15px;
    color: rgb(91, 97, 110);
}

@media (max-width: 991px) {
    .block-caracteristiques .u129 {
        font-size: 34px;
        margin: 7px 0px;
    }

    .block-caracteristiques .u130 {
        font-size: 14px;
    }

    .block-caracteristiques .u128 {
        margin-bottom: 24px;
    }

    .block-caracteristiques .u134 {
        font-size: 14px;
    }

    .block-caracteristiques .u132 {
        padding: 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px !important;
    }

    .block-caracteristiques .u133 {
        font-size: 21px;
    }
}

@media (max-width: 575px) {
    .block-caracteristiques .u129 {
        font-size: 31px;
        margin: 5px 0px;
    }

    .block-caracteristiques .u130 {
        font-size: 13px;
    }

    .block-caracteristiques .u133 {
        font-size: 20px;
        margin-bottom: 7px;
    }

    .block-caracteristiques .u132 {
        padding: 18px;
    }

    .block-caracteristiques {
        padding: 30px 0;
    }
}

/* ----------------------------page assistance-------------------------------- */
.couverture {
    background: #f5f6f8;
    border-top: 1px solid #eceef1;
    border-bottom: 1px solid #eceef1;
    margin: 0px auto;
    padding: 80px 0;
}

.couverture-preview {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.couverture-titre {
    font-size: 40px;
    margin: 12px 0px 13px;
}

.couverture-text p {
    color: rgb(91, 97, 110);
    font-size: 12px;
    margin-bottom: 42px;
}

.couverture .u264 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    padding: 32px;
    height: 100%;
}

.couverture .u265 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #20242e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 18px;
}

.couverture .u241 {
    font-size: 19px;
    margin-bottom: 8px;
}

.u135 {
    max-width: 620px;
    margin-bottom: 40px;
}

.u136 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.u137 {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 28px;
}

.u138 {
    font-weight: 500;
    font-size: 30px;
    color: rgb(32, 36, 46);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.u139 {
    font-size: 19px;
    margin-bottom: 4px;
}

.u140 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 44px 80px;
}

.u141 {
    font-size: 32px;
    margin-bottom: 20px;
}

.u142 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.u144 {
    position: absolute;
    inset: 0px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.u145 {
    position: absolute;
    inset: 0px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.offres_speciales_dfsk .u146 {
    margin: 0px auto;
    padding: 64px 44px 20px;
}

.offres_speciales_dfsk .u147 {
    font-size: 52px;
    text-transform: uppercase;
    margin: 14px 0px 16px;
}

.offres_speciales_dfsk .u148 {
    color: rgb(91, 97, 110);
    max-width: 640px;
}

@media (max-width: 991px) {
    .offres_speciales_dfsk .u147 {
        font-size: 45px;
        margin: 9px 0px 9px;
    }
}

.u149 {
    margin: 0px auto;
    padding: 16px 44px 40px;
}

.garantie .u150 {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.garantie .u151 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        120deg,
        rgba(12, 15, 23, 0.72) 0%,
        rgba(12, 15, 23, 0.25) 42%,
        rgba(12, 15, 23, 0.05) 70%
    );
}

.garantie .u152 {
    position: relative;
    padding: 44px 44px 0px;
}

.garantie .u153 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.garantie .u154 {
    font-family: Syne, sans-serif;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: 0.02em;
    color: rgb(255, 255, 255);
}

.garantie .u155 {
    font-size: 15px;
    font-weight: 700;
    vertical-align: super;
    margin-left: 4px;
    opacity: 0.85;
}

.garantie .u156 {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 2px;
    color: rgb(255, 255, 255);
}

.garantie .u157 {
    position: relative;
    padding: 0px 44px;
}

.garantie .u158 {
    color: rgb(255, 255, 255);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.garantie .u159 {
    opacity: 0.85;
    font-weight: 600;
}

.garantie .u160 {
    cursor: pointer;
    display: inline-block;
    margin-top: 22px;
    font-weight: 600;
    font-size: 14px;
    background: rgb(255, 255, 255);
    color: rgb(23, 26, 34);
    padding: 13px 28px;
    border-radius: 4px;
}

.garantie .u161 {
    position: relative;
    padding: 26px 44px 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.garantie .u162 {
    display: flex;
    gap: 26px;
    color: rgb(255, 255, 255);
}

.garantie .u163 {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    padding-left: 12px;
}

.garantie .u164 {
    font-size: 11px;
    letter-spacing: 0.08em;
    opacity: 0.75;
    text-transform: uppercase;
}

.garantie .u165 {
    font-weight: 800;
    font-size: 20px;
}

.garantie .u166 {
    display: flex;
    gap: 7px;
}

.garantie .u167 {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: rgb(255, 255, 255);
}

.garantie .u168 {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 991px) {
    .garantie .u158 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .offres_speciales_dfsk .u147 {
        font-size: 37px;
        margin: 8px 0px 8px;
    }

    .offres_speciales_dfsk .u146 {
        padding: 64px 44px 0px;
    }

    .garantie .u158 {
        font-size: 31px;
    }

    .garantie .u165 {
        font-size: 15px;
    }
}

@media (max-width: 565px) {
    .offres_speciales_dfsk .u147 {
        font-size: 32px;
        margin: 8px 0px 8px;
    }

    .garantie .u158 {
        font-size: 27px;
    }

    .garantie .u165 {
        font-size: 12px;
    }

    .garantie .u154 {
        font-size: 27px;
    }
}

.u169 {
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    background: rgb(255, 255, 255);
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(15, 18, 28, 0.06) 0px 20px 50px;
}

.u170 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.u171 {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(138, 144, 156);
}

.u172 {
    font-weight: 600;
    font-size: 14px;
    color: rgb(91, 97, 110);
}

.u173 {
    height: 4px;
    border-radius: 2px;
    background: rgb(236, 238, 242);
    margin-bottom: 30px;
    overflow: hidden;
}

.u174 {
    height: 100%;
    background: rgb(31, 36, 54);
    border-radius: 2px;
    transition: width 0.3s;
    width: 33.3333%;
}

.u175 {
    animation: 0.3s ease 0s 1 normal none running dfskFade;
}

.u176 {
    font-size: 30px;
    margin-bottom: 12px;
}

.u177 {
    color: rgb(91, 97, 110);
    font-size: 15px;
    margin-bottom: 26px;
}

.u178 {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.u179 {
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(23, 26, 34);
    padding: 15px 16px;
    border-radius: 6px;
    font-size: 15px;
}

.u180 {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    gap: 12px;
}

.u181 {
    flex: 1 1 0%;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(31, 36, 54);
    color: rgb(255, 255, 255);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 16px;
    border-radius: 6px;
}

.u182 {
    text-align: right;
    font-size: 12px;
    color: rgb(154, 160, 171);
    margin-top: 20px;
}

.u183 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 44px 96px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.u184 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 12px;
    padding: 36px;
}

.u185 {
    font-size: 24px;
    margin-bottom: 8px;
}

.u186 {
    color: rgb(91, 97, 110);
    margin-bottom: 16px;
}

.u187 {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: rgb(30, 34, 51);
}

/* ----------------------page garentie---------------------- */
.block_page_garantie {
    margin: 50px auto;
}

.block_page_garantie .garantie_preview {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.block_page_garantie .garantie_titre {
    font-size: 50px;
    text-transform: uppercase;
    margin: 14px 0px 16px;
    max-width: 720px;
}

.block_page_garantie .garantie_paragraph {
    color: rgb(91, 97, 110);
    max-width: 660px;
}

.garantie_generale {
    margin: 50px 0;
}

.garantie_table {
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

.garantie_table thead th {
    background: #1e2233;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 18px 24px;
    border: none;
    vertical-align: middle;
}

.garantie_table tbody td {
    padding: 20px 24px;
    border-color: #eef0f3;
    color: #4b5563;
    vertical-align: middle;
}

.garantie_table tbody td:first-child {
    font-size: 19px;
    font-weight: 700;
    color: #1e2233;
}

.garantie_note {
    font-size: 13px;
    color: #9aa0ab;
}

@media (max-width: 767.98px) {
    .garantie_table thead th,
    .garantie_table tbody td {
        padding: 14px 16px;
        font-size: 14px;
    }

    .garantie_table tbody td:first-child {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .block_page_garantie .garantie_titre {
        font-size: 35px;
        margin: 10px 0px 12px;
    }
    .garantie_table_titre {
        font-size: 13px;
    }
    .garantie_table_text {
        font-size: 16px;
    }
    .garantie_table_nemuro {
        font-size: 14px;
    }
    .garantie_generale .u198 {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .garantie_table_text {
        font-size: 14px;
    }
    .block_page_garantie .garantie_titre {
        font-size: 30px;
        margin: 7px 0px 10px;
    }
    .block_page_garantie .garantie_paragraph {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .block_page_garantie {
        margin: 40px 0;
    }
    .block_page_garantie .garantie_titre {
        font-size: 26px;
    }
    .block_page_garantie .garantie_paragraph {
        font-size: 13px;
    }
    .garantie_table_nemuro {
        font-size: 12px;
    }
}

.les_avantages {
    /* max-width: 1120px; */
    margin: 50px 0;
}

.les_avantages .u200 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 30px;
    height: 100%;
}

.les_avantages .u201 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #20242e;
}

.les_avantages .avantage_image {
    margin-bottom: 13px;
}

.les_avantages p {
    font-size: 14px;
    color: #5b616e;
}

.les_avantages .rdv {
    background-color: #182341;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.les_avantages .rdv .u201 {
    color: #ffffff;
}

@media (max-width: 991px) {
    .les_avantages .u200 {
        padding: 49px 30px;
    }
}

.u202 {
    max-width: 820px;
    margin: 0px auto;
    padding: 72px 44px 30px;
    text-align: center;
}

.u203 {
    display: inline-block;
    border: 1px solid rgb(208, 212, 219);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 24px;
}

.u204 {
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 13px;
    color: rgb(91, 97, 110);
}

.u205 {
    font-size: 52px;
    margin: 0px auto 22px;
    max-width: 640px;
}

.u206 {
    color: rgb(91, 97, 110);
    max-width: 560px;
    margin: 0px auto;
}

.u207 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 24px 44px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.u208 {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: rgb(32, 36, 46);
    margin-bottom: 8px;
}

.u209 {
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(220, 223, 228);
    color: rgb(91, 97, 110);
    padding: 15px 16px;
    border-radius: 8px;
    font-size: 15px;
}

.u210 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 16px 44px 90px;
}

.u211 {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgb(231, 233, 238);
    height: 660px;
}

.u212 {
    width: 100%;
    height: 100%;
    border: 0px;
    display: block;
}

.u213 {
    margin: 50px auto;
}

/* -------------------------------------------------page sav------------------------------------------------- */
.sav-form {
    margin: 50px 0;
}

.preview {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.sav-form .u214 {
    font-size: 50px;
    margin: 14px 0px 0px;
    max-width: 640px;
}

.sav-form .u216 {
    color: rgb(91, 97, 110);
    font-size: 16px;
    max-width: 520px;
}

.sav-form .sav-form .u217 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    padding: 30px;
}

.sav-form .u218 {
    font-size: 20px;
    margin-bottom: 6px;
}

.sav-form .u219 {
    font-size: 13.5px;
    color: rgb(107, 114, 128);
    margin-bottom: 16px;
}

.sav-form .u220 {
    width: 100%;
    margin-bottom: 14px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 6px;
    font-size: 15px;
}

.sav-form .u221 {
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 14px;
    border-radius: 6px;
}

@media (max-width: 991px) {
    .sav-form .u214 {
        font-size: 38px;
        margin: 14px 0px 11px;
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    .sav-form .u214 {
        font-size: 32px;
        margin: 7px 0px 8px;
    }

    .preview {
        font-size: 12px;
    }
}
.sav-engagement {
    background: #f5f6f8;
    padding: 50px 0;
}
.sav-engagement-content {
    margin-bottom: 36px;
}
.sav-engagement-image {
    margin-bottom: 16px;
}
.titre {
    font-size: 36px;
    margin: 14px 0px 16px;
}

.sav-engagement-item {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 30px;
    height: 100%;
}

/* .u226 {
    max-width: 1120px;
    margin: 0px auto;
    padding: 80px 44px 40px
}

.u227 {
    max-width: 600px;
    margin-bottom: 30px
}

.u228 {
    font-size: 38px;
    margin: 12px 0px 0px
}

.u229 {
    padding: 20px 24px;
    font-weight: 600;
    font-size: 19px
}

.u230 {
    max-width: 1120px;
    margin: 0px auto;
    padding: 20px 44px
}

.u231 {
    background: rgb(17, 20, 29);
    border-radius: 12px;
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.u232 {
    color: rgb(255, 255, 255);
    font-size: 26px;
    margin-bottom: 6px
}

.u233 {
    color: rgba(255, 255, 255, 0.75)
}

.u234 {
    text-align: right
}

.u235 {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6)
}

.u236 {
    font-weight: 500;
    font-size: 34px;
    color: rgb(255, 255, 255)
} */
/* --------------------------------------------------------page sav--------------------------------------------------- */
.sav-services {
    margin: 0px auto;
}
.sav-services-items {
    padding: 60px 44px 40px;
    background-color: #11141d;
    border-radius: 11px;
}

.sav-services .u239 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 28px;
    height: 100%;
}

.sav-services .titre {
    color: #ffffff;
}

.sav-services .u240 {
    margin-bottom: 16px;
}

.sav-services .u241 {
    font-size: 19px;
    margin-bottom: 8px;
}

.sav-services .u242 {
    max-width: 1120px;
    margin: 0px auto;
    padding: 20px 44px 96px;
}

.sav-services .u243 {
    font-size: 34px;
    margin-bottom: 22px;
}
.faq {
    margin: 50px auto;
}

.faq .u244 {
    display: grid;
    gap: 12px;
}

.faq .u245 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 24px 28px;
}

.faq .u246 {
    font-size: 19px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.faq .u247 {
    color: rgb(30, 34, 51);
}

.faq .u248 {
    font-size: 15px;
    color: rgb(91, 97, 110);
    padding-left: 24px;
}

@media (max-width: 991px) {
    .sav-services .u239 {
        padding: 20px;
    }
}
@media (max-width: 575px) {
    .sav-services-items{
        padding: 40px 20px 30px;
    }
    .titre{
        font-size: 32px;
    }
}

/* ---------------------------------------page location----------------------------------------------- */
.location {
    margin: 60px 0;
}

.location .u250 {
    display: inline-block;
    border: 1px solid rgb(208, 212, 219);
    border-radius: 999px;
    padding: 8px 18px;
    margin-bottom: 22px;
}

.location .u251 {
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 12.5px;
    color: rgb(91, 97, 110);
}

.location .u253 {
    font-size: 46px;
    margin: 0px;
}

.location .u254 {
    color: rgb(91, 97, 110);
    font-size: 16px;
}

@media (max-width: 991px) {
    .location .u286 {
        font-size: 39px;
    }

    .location .u254 {
        margin-top: 16px;
    }
}

@media (max-width: 575px) {
    .location .u250{
        text-align: center;
    }
    .location {
        margin: 40px 0;
    }
    .location .u251 {
        font-size: 10px;
    }

    .location .u254 {
        margin-top: 10px;
        font-size: 13px;
    }

    .location .u286 {
        font-size: 29px;
    }

    .location .u251 {
        font-size: 11px;
    }
}

.location-drive {
    margin: 50px auto;
}

.location-drive .u267 {
    background: rgb(17, 20, 29);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 72px 40px;
}

.location-drive .u267-bg {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-drive .u268 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        90deg,
        rgba(15, 18, 28, 0.85),
        rgba(15, 18, 28, 0.3) 60%,
        rgba(15, 18, 28, 0.1)
    );
}

.location-drive .u267-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.location-drive-text {
    max-width: 480px;
}

.location-drive .u270 {
    color: rgb(255, 255, 255);
    font-size: 32px;
    margin-bottom: 10px;
}

.location-drive .u271 {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 0;
}

.location-drive .u272 {
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
    background: rgb(255, 255, 255);
    color: rgb(32, 36, 46);
    padding: 14px 28px;
    border-radius: 4px;
}

.location-drive-lien {
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .location-drive .u267-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .location-drive-lien {
        align-self: flex-start;
    }

    .location-drive .u270 {
        font-size: 30px;
    }

    .location-drive .u272 {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .location-drive .u270 {
        font-size: 26px;
    }

    .location-drive .u271 {
        font-size: 14px;
    }

    .location-drive .u272 {
        font-size: 12px;
    }
}
.besoin-assistance {
    margin: 50px auto;
}
.besoin-assistance .besion-titre {
    font-size: 26px;
    color: #ffffff;
}
.besoin-assistance .u256 {
    background: rgb(17, 20, 29);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.besoin-assistance .u257 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.besoin-assistance .u258 {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #ff0000;
    display: inline-block;
}

.besoin-assistance .u259 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.besoin-assistance .u260 {
    font-weight: 500;
    font-size: 40px;
    color: rgb(255, 255, 255);
}

.besoin-assistance .u261 {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

@media (max-width: 991px) {
    .besoin-assistance .u260 {
        font-size: 35px;
    }

    .besoin-assistance .u256 {
        gap: 21px;
    }
}

@media (max-width: 767px) {
    .besoin-assistance .u260 {
        font-size: 27px;
    }
    .besoin-assistance .besion-titre {
        font-size: 18px;
    }
    .besoin-assistance .u256 {
        gap: 13px;
    }

    .besoin-assistance .u256 {
        padding: 32px;
    }
}

@media (max-width: 575px) {
    .besoin-assistance .u260 {
        font-size: 22px;
    }
}

.u262 {
    max-width: 640px;
    margin-bottom: 40px;
}

.u263 {
    font-size: 40px;
    margin: 12px 0px;
}

.u264 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    padding: 32px;
}

.u265 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgb(244, 234, 217);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(138, 95, 51);
    font-weight: 700;
    margin-bottom: 18px;
}

.test-drive {
    margin: 50px auto;
}

.test-drive .u267 {
    background: rgb(17, 20, 29);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 56px 44px;
}

.test-drive .u267-bg {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.test-drive .u268 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        90deg,
        rgba(15, 18, 28, 0.85),
        rgba(15, 18, 28, 0.4)
    );
}

.test-drive .u269 {
    position: relative;
    max-width: 560px;
}

.test-drive .u270 {
    color: rgb(255, 255, 255);
    font-size: 32px;
    margin-bottom: 10px;
}

.test-drive .u271 {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 24px;
}

.test-drive .u272 {
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    background: rgb(255, 255, 255);
    color: rgb(32, 36, 46);
    padding: 14px 28px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .test-drive .u270 {
        font-size: 28px;
    }

    .test-drive .u271 {
        font-size: 14px;
    }

    .test-drive .u272 {
        font-size: 13px;
    }
}

/* ------------------------------page credit------------------------------ */

.credit-block .credit-image img {
    border-radius: 16px;
}

.credit-block span {
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 14px;
    color: #8a909c;
}

.credit-block p {
    color: rgb(91, 97, 110);
    margin: 12px 0px 22px;
}

.credit-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.credit-item {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 12px;
    padding: 20px;
}

.credit-block h4 {
    font-size: 16px;
    margin: 0px;
    color: #20242e;
    line-height: 17.28px;
}

.credit-block .lien {
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 16px 26px;
    border-radius: 6px;
}
.performance-credit {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 226, 214);
    border-radius: 14px;
    padding: 34px;
    height: 100%;
}

.performance-credit .u285 {
    font-weight: 700;
    font-size: 30px;
    color: #20242e;
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .performance-credit .u285 {
        font-size: 26px;
    }

    .performance-credit {
        padding: 22px;
    }
}

@media (max-width: 767px) {
    .credit-items {
        flex-direction: column;
        display: flex;
    }
    .performance-credit .u285 {
        font-size: 24px;
    }

    .performance-credit h4 {
        font-size: 21px;
    }

    .performance-credit p {
        font-size: 13px;
    }
}

/* -----------------------------page location------------------------------------------- */
.valeurs-location {
    background: #20242e;
    border-top: 1px solid rgb(236, 238, 241);
    border-bottom: 1px solid rgb(236, 238, 241);
    margin-top: 60px;
    color: #eceef1;
    margin: 50px auto;
    padding: 80px 0;
}

.valeurs-location .u264 {
    background: #20242e;
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    padding: 32px;
    height: 100%;
}

.valeurs-location .u281 {
    font-size: 40px;
    margin: 14px auto 12px;
    max-width: 620px;
}

.valeurs-location .u45 {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.valeurs-location .u291 {
    font-size: 40px;
    margin: 12px 0px 0px;
}

.valeurs-location .u290 {
    max-width: 560px;
    margin-bottom: 40px;
}

@media (max-width: 991px) {
    .valeurs-location .u291 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .valeurs-location .u291 {
        font-size: 34px;
    }
}

@media (max-width: 575px) {
    .valeurs-location .u291 {
        font-size: 31px;
    }
}

.u282 {
    color: rgb(91, 97, 110);
    max-width: 560px;
    margin: 0px auto 44px;
}

.u283 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.u284 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 226, 214);
    border-radius: 14px;
    padding: 34px;
}

.u285 {
    font-weight: 700;
    font-size: 30px;
    color: rgb(138, 95, 51);
    margin-bottom: 10px;
}

.u286 {
    font-size: 44px;
    margin: 0px;
}

/* --------------------page location ------------------------*/
.location_block_2 {
    margin: 0px auto;
}

.location_block_2 h4 {
    font-size: 20px;
    color: #20242e;
}

.location_block_2 p {
    font-size: 14px;
    color: #5b616e;
}

.location_block_2 .location_block_2_item {
    background-color: #f5f6f8;
    border: 1px solid rgb(231, 233, 238);
    border-radius: 14px;
    padding: 32px;
    height: 100%;
}

.u288 {
    background: rgb(245, 246, 248);
    border: 1px solid#E7E9EE;
    border-radius: 14px;
    padding: 32px;
    height: 100%;
}

.location_block_2 .u289 {
    height: 2px;
    width: 38px;
    background: rgb(30, 34, 51);
    margin-bottom: 16px;
}

.u291 {
    font-size: 40px;
    margin: 12px 0px 0px;
}

.u292 {
    background: rgb(17, 20, 29);
    border-radius: 16px;
    padding: 56px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.u293 {
    max-width: 560px;
}

.u294 {
    color: rgba(255, 255, 255, 0.82);
}

.u295 {
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 15px;
    background: rgb(255, 255, 255);
    color: rgb(32, 36, 46);
    padding: 15px 30px;
    border-radius: 4px;
}

.u296 {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
}

.u297 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        rgba(15, 18, 28, 0.15),
        rgba(15, 18, 28, 0) 40%,
        rgba(15, 18, 28, 0.6)
    );
}

.u298 {
    color: rgb(255, 255, 255);
    font-size: 64px;
    text-transform: uppercase;
    margin: 12px 0px;
    max-width: 760px;
}

.u299 {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 560px;
}

.u300 {
    background: rgb(245, 246, 248);
    border-bottom: 1px solid rgb(236, 238, 241);
}

.u301 {
    max-width: 1280px;
    margin: 0px auto;
    padding: 60px 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.u302 {
    font-weight: 500;
    font-size: 50px;
    color: rgb(32, 36, 46);
    line-height: 1;
    letter-spacing: -0.02em;
}

.u303 {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(138, 144, 156);
    margin-top: 8px;
}

/* ---------------------------------------------page a propos dfsk--------------------------------------------- */
.brand-value {
    margin: 50px 0;
}

.brand-value .u308 {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 360px;
    background: rgb(17, 20, 29);
}

.brand-value .u309 {
    position: absolute;
    inset: 0px;
    background: linear-gradient(
        rgba(15, 18, 28, 0) 42%,
        rgba(15, 18, 28, 0.82)
    );
}

.brand-value .u310 {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
}

.brand-value .u311 {
    color: rgb(255, 255, 255);
    font-size: 22px;
    margin-bottom: 6px;
}

.brand-value .u312 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
}

.dfsk-hero {
    position: relative;
    color: #20242e;
    padding: 90px;
    overflow: hidden;
}

.dfsk-hero .hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.dfsk-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgb(20 30 45 / 11%),
        rgb(20 30 45 / 4%)
    );
    z-index: 1;
}

.dfsk-hero .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.dfsk-hero h1 {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 2rem;
}

@media (max-width: 576px) {
    .dfsk-hero {
        padding: 60px 15px;
        text-align: left;
    }
}

.a-propos-dfsk-experience {
    margin: 50px 0;
}

.a-propos-dfsk-experience .u317 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.a-propos-dfsk-experience .u318 {
    color: rgb(91, 97, 110);
    max-width: 680px;
    margin-bottom: 24px;
}

.a-propos-dfsk-experience .u319 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 10px;
    padding: 24px;
    height: 100%;
}

/* .u321 {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.u322 {
    position: relative;
    max-width: 760px;
    padding: 80px 44px
}

.u323 {
    font-weight: 900;
    font-size: 34px;
    font-style: italic;
    color: rgb(30, 34, 51);
    margin-bottom: 14px
}

.u324 {
    color: rgb(58, 63, 75);
    font-size: 16px
} */
/* -----------------------------------------------page a propos auto hall----------------------------------------------- */
.a-propos-auto-hall {
    margin: 50px 0;
    align-items: center;
}

.a-propos-auto-hall .u326 {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgb(138, 144, 156);
    text-transform: uppercase;
    font-size: 13px;
}

.a-propos-auto-hall .u327 {
    font-size: 52px;
    line-height: 1.06;
    margin: 16px 0px 20px;
}

.a-propos-content {
    margin-bottom: 35px;
}

.a-propos-auto-hall .u328 {
    color: rgb(91, 97, 110);
    font-size: 17px;
    max-width: 520px;
}

.a-propos-auto-hall .u329 {
    display: flex;
    gap: 48px;
}

.a-propos-auto-hall .u330 {
    font-size: 44px;
    font-weight: 500;
    color: rgb(30, 34, 51);
    line-height: 1;
}

.a-propos-auto-hall .u331 {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(138, 144, 156);
    margin-top: 6px;
}

.a-propos-auto-hall .u332 {
    border-radius: 12px;
    overflow: hidden;
}
.a-propos-auto-hall .u332 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1199px) {
    .a-propos-auto-hall .u327 {
        font-size: 40px;
    }
}
@media (max-width: 991px) {
    .a-propos-auto-hall .u327 {
        font-size: 44px;
        margin: 8px 0px 11px;
    }
    .a-propos-auto-hall .u328 {
        font-size: 16px;
        max-width: none;
    }
    .a-propos-content {
        margin-top: 20px;
        margin-bottom: 25px;
    }
    .a-propos-auto-hall .u329 {
        gap: 32px;
        margin-bottom: 25px;
    }
    .a-propos-auto-hall .u330 {
        font-size: 36px;
    }
    .u332 img {
        margin: auto;
    }
    .block-reverse .row {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 767px) {
    .a-propos-auto-hall .u327 {
        font-size: 34px;
        margin: 7px 0px 9px;
    }

    .a-propos-auto-hall .u328 {
        font-size: 14px;
    }

    .a-propos-content {
        margin-bottom: 20px;
    }

    .a-propos-auto-hall .u330 {
        font-size: 29px;
    }
}

@media (max-width: 575px) {
    .a-propos-auto-hall .u327 {
        font-size: 31px;
        margin: 4px 0px 6px;
    }

    .a-propos-auto-hall .u329 {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

.notre-raison {
    margin: 0px auto;
    margin-bottom: 60px;
    text-align: center;
}

.chronologie {
    margin: 50px 0;
}

.u340 {
    margin-bottom: 52px;
}

.u341 {
    font-size: 34px;
    line-height: 1.12;
    margin-top: 14px;
}

.u342 {
    color: rgb(91, 97, 110);
    align-self: end;
}

.u343 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 64px;
}

.u344 {
    border-top: 1px solid rgb(231, 233, 238);
    padding-top: 22px;
}

.u345 {
    margin-bottom: 14px;
}

.u346 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 48px;
}

.a-propos-mission-item {
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

.u348 {
    margin: 50px 0;
    align-items: center;
}

.u349 {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.u350 {
    color: rgb(91, 97, 110);
    margin-bottom: 30px;
    max-width: 500px;
}

.u351 {
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    padding: 15px 30px;
    border-radius: 4px;
}

.u352 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(236, 238, 241);
    border-radius: 12px;
    padding: 56px 48px;
    align-items: center;
}

.distinctions {
    margin: 50px 0;
}

.u353 {
    font-size: 32px;
    line-height: 1.12;
    margin-top: 14px;
}

.u354 {
    font-size: 56px;
    text-transform: uppercase;
    margin: 14px 0px 16px;
}
.contact .block_page_garantie .garantie_titre {
    max-width: 100%;
}
.contact-item {
    background: #f5f6f8;
    padding: 30px;
}
.u356 {
    display: grid;
    gap: 16px;
}

.u357 {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(138, 144, 156);
    margin-bottom: 6px;
}

.u358 {
    font-weight: 500;
    font-size: 32px;
    color: rgb(32, 36, 46);
}

.u359 {
    font-size: 18px;
    color: rgb(32, 36, 46);
}

.u360 {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: rgb(30, 34, 51);
}

.u361 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 12px;
    padding: 34px;
}

.u362 {
    font-size: 26px;
    margin-bottom: 18px;
}

.u363 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.u364 {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.u365 {
    width: 100%;
    margin-top: 14px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.u366 {
    display: flex;
    gap: 10px;
    font-size: 15px;
    color: rgb(58, 63, 75);
}
#contact_fonction_1 {
    margin-left: 10px;
}
.u367 {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.u368 {
    width: 100%;
    height: 150px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
    resize: vertical;
}

.u369 {
    margin-top: 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 14px 30px;
    border-radius: 4px;
}
@media (max-width: 1199px) {
    .u363 {
        display: flex;
        flex-direction: column;
    }
}
@media (max-width: 575px) {
    .u352{
        padding: 40px 25px;
    }
}


/* -----------------------------------page essai----------------------------------- */
.hero_essai {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgb(17, 20, 29);
}

.hero_essai .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15, 18, 28, 0.85),
        rgba(15, 18, 28, 0.3)
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 50px 44px;
    color: #ffffff;
}

.hero-eyebrow {
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 4px;
}

.hero-title {
    color: #ffffff;
    font-size: 41px;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 12px 0 14px;
    max-width: 640px;
}

.hero-text {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0;
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 35px;
    }

    .hero-text {
        font-size: 16px;
    }
}
@media (max-width: 575px) {
    .hero-title {
        font-size: 30px;
    }
}


.u375 {
    margin: 50px auto;
    display: grid;
    align-items: start;
}

.u376 {
    font-size: 34px;
    margin-bottom: 16px;
}

.u377 {
    display: flex;
    gap: 14px;
}

.u378 {
    color: rgb(30, 34, 51);
    font-weight: 500;
}

.u379 {
    color: rgb(75, 85, 99);
}

.u380 {
    background: rgb(245, 246, 248);
    border: 1px solid rgb(231, 233, 238);
    border-radius: 12px;
    padding: 35px;
}

.u381 {
    font-size: 24px;
    margin-bottom: 16px;
}

.u382 {
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(138, 144, 156);
}

.u383 {
    width: 100%;
    margin-top: 6px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.u384 {
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.u385 {
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(215, 218, 225);
    color: rgb(32, 36, 46);
    padding: 13px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.u386 {
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: rgb(30, 34, 51);
    color: rgb(255, 255, 255);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 15px;
    border-radius: 4px;
}

.u387 {
    font-size: 12px;
    color: rgb(154, 160, 171);
    margin-top: 12px;
}
@media (max-width: 575px) {
    .u380 {
        padding: 35px 20px;
    }
}

/* Header */

.header {
    position: sticky;
    top: 0px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 44px;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(236, 238, 241);
}

.logo-header {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.u390 {
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 1px;
    color: rgb(20, 24, 33);
    font-style: italic;
}

.header-nav {
    display: flex;
    gap: 30px;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-item {
    cursor: pointer;
    color: rgb(43, 48, 59);
}

.lien {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: rgb(255, 255, 255);
    background: rgb(30, 34, 51);
    padding: 11px 22px;
    border-radius: 4px;
    white-space: nowrap;
}
.site-footer {
    background: rgb(15, 18, 27);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 60px 0 32px;
}

/* Logo DFSK avec le "K" accentué en rouge, comme le header */
.footer-logo {
    font-weight: 900;
    font-size: 26px;
    font-style: italic;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.footer-logo span {
    color: #dc0000;
}

.footer-text {
    font-size: 14px;
    color: rgb(139, 144, 156);
    max-width: 280px;
}

.footer-title {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}

.footer-links {
    display: grid;
    gap: 9px;
    font-size: 14px;
    margin: 0;
}

.footer-links a,
.footer-links span {
    color: rgb(139, 144, 156);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 36px 0 22px;
}

.footer-copyright {
    font-size: 13px;
    color: rgb(107, 114, 128);
    margin: 0;
}

.footer-social {
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    gap: 20px;
}

.footer-social a {
    color: rgb(139, 144, 156);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-social a:hover {
    color: #fff;
}

.footer-social a.back-to-top {
    color: #fff;
}

@media (max-width: 991px) {
    .footer-copyright {
        text-align: center;
    }
    .footer-social {
        gap: 13px;
    }
}

/* ------------------------------------------header---------------------------------------------------------------- */
:root {
    --dark: #1e2233;
    --accent: #f5f6f8;
    --text-muted: #9aa0a6;
}

/* ===== NAVBAR PRINCIPALE ===== */
.site-navbar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.scrolled {
    animation: slideDown 0.35s ease forwards;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.navbar-brand img {
    height: 19px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #1c1c1c;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.btn-cta {
    background: #182341;
    border: 1px solid #182341;
    color: #fff;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.offcanvas-custom .offcanvas-body .btn-cta {
    background: #fff;
    color: #182341;
}
.btn-cta:hover {
    background: transparent;
    color: #182341;
}
.nav-links .has-dropdown.selected, .desktop-mega-list a.selected, .nav-links a.selected {
    color: var(--muted-soft);
}
@media (max-width: 1199px) {
    .nav-links {
        gap: 15px;
    }
}
/* ===== BOUTON HAMBURGER (visible < 991px) ===== */
.burger-btn {
    display: none;
    background: none;
    border: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    padding: 0;
}
.burger-btn span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1c1c1c;
    transition: all 0.25s ease;
}
.burger-btn span:nth-child(1) {
    top: 0;
}
.burger-btn span:nth-child(2) {
    top: 8px;
}
.burger-btn span:nth-child(3) {
    top: 16px;
}

/* ===== OFFCANVAS (menu mobile, style Fuso : fond sombre, à droite) ===== */
.offcanvas-custom {
    max-width: 380px;
    background: #182341;
    color: #fff;
}

.offcanvas-custom .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 24px;
}

.offcanvas-custom .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: 0.8;
}

.offcanvas-custom .offcanvas-body {
    padding: 10px 0;
}

.offcanvas-header img {
    height: 19px;
}

.mobile-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}

.mobile-links a:hover {
    color: var(--accent);
}

.mobile-links .chevron {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform 0.25s ease;
}

.mobile-links a[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}
@media (max-width: 575px) {
    .offcanvas-custom {
        max-width: 100%;
    }
}

/* ===== SOUS-MENU (accordéon) ===== */
.sub-links {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    background: rgba(255, 255, 255, 0.03);
}

.sub-links li a {
    display: block;
    padding: 12px 24px 12px 40px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.sub-links li a:hover {
    color: #fff;
}

.mobile-cta {
    margin: 24px;
}

/* ===== SOUS-MENU MOBILE AVEC IMAGE (Gamme) ===== */
.sub-links--with-img li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px 10px 40px;
}

.sub-links--with-img img {
    width: 40px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

.sub-links--with-img span {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

.sub-links--with-img li a:hover span {
    color: #fff;
}

/* ===== NAV-LINKS AVEC DROPDOWN (desktop) ===== */
.nav-item-dropdown {
    position: relative;
}

.nav-links .has-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    color: #1c1c1c;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.nav-links .dd-chevron {
    font-size: 11px;
    transition: transform 0.25s ease;
    color: currentColor;
}

.nav-links .has-dropdown[aria-expanded="true"] .dd-chevron {
    transform: rotate(180deg);
}

/* ===== MEGA-MENU DESKTOP (carte flottante sous le bouton, style image) ===== */
.desktop-mega {
    position: absolute;
    top: calc(100% + 24px);
    left: 0;
    z-index: 30;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    min-width: 310px;
    padding: 8px;
    text-align: center;
}

.desktop-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.desktop-mega-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #1c1c1c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.desktop-mega-list a:hover {
    background: var(--accent);
}

.desktop-mega-list img {
    width: 114px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* variante sans image (Services / À propos) */
.desktop-mega-list--text a {
    padding: 10px 12px;
}

/* ===== RESPONSIVE : max-width 991px ===== */
@media (max-width: 991px) {
    .nav-links,
    .desktop-cta {
        display: none !important;
    }

    .burger-btn {
        display: block;
    }
}

.safety-block {
    margin: 50px auto;
}

.safety-image-wrap {
    border-radius: 20px;
    overflow: hidden;
}

.safety-image-wrap img {
    display: block;
    width: 100%;
    transition: opacity 0.35s ease;
}

.safety-image-wrap img.fading {
    opacity: 0;
}

/* ===== WRAPPER SLIDER TABS ===== */
.safety-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
}

.safety-arrow {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #c7c9cf;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.safety-arrow:hover {
    color: #1c1c1e;
}

.safety-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.safety-tabs {
    border: none;
    justify-content: center;
    gap: 40px;
    margin: 0;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.safety-tabs::-webkit-scrollbar {
    display: none;
}

.safety-tabs .nav-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.safety-tabs .nav-link {
    border: none;
    background: none;
    color: #8a8f98;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 0;
    position: relative;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.safety-tabs .nav-link:hover {
    color: #1c1c1e;
}

.safety-tabs .nav-link.active {
    color: #1c1c1e;
}

.safety-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #1c1c1e;
}

.safety-description {
    text-align: center;
    color: #6b6f76;
    font-size: 14px;
    line-height: 1.6;
    max-width: 600px;
    margin: 18px auto 0;
    min-height: 44px;
}

@media (max-width: 991px) {
    .safety-tabs{
        justify-content: start;
    }
    /*.safety-arrow {
        display: none;
    }*/
}
@media (max-width: 575px) {
    .safety-image-wrap img {
        height: 260px;
        object-fit: cover;
    }
    .safety-tabs-wrap {
        gap: 4px;
        margin-top: 20px;
    }
    .safety-tabs {
        gap: 24px;
        padding: 0 4px;
    }
    .safety-tabs .nav-link {
        font-size: 13px;
        padding: 8px 2px;
    }
    .safety-description {
        font-size: 13px;
        padding: 0 10px;
    }
}

/* ---------- RÉSEAU / CARTE ---------- */

.statement {
    text-align: center !important;
    text-align: -webkit-center !important;
    text-align: -moz-center !important;
    text-align: -ms-center !important;
    text-align: -o-center !important;
}
.network-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 100%;
    margin: 0 auto 32px;
}
.field label {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 8px;
}
.field select,
.field input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font);
    font-size: 15px;
    border: 1.5px solid var(--border);
    color: var(--ink);
    appearance: none;
    outline: none;
    transition: border-color 0.2s;
    border-radius: 8px;
}
.field select:focus,
.field input:focus {
    border-color: var(--red);
}
.field {
    position: relative;
}
.field.has-caret::after {
    content: "";
    position: absolute;
    top: 50px;
    right: 18px;
    bottom: 22px;
    width: 8px;
    height: 8px;
    border-right: 1.8px solid var(--muted);
    border-bottom: 1.8px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
}
#map {
    height: clamp(420px, 56vh, 600px);
    border-radius: 14px;
    border: 1px solid var(--border);
    z-index: 1;
}
.map-note {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 18px;
}

.branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.branch {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    transition:
        border-color 0.25s,
        transform 0.25s var(--ease),
        box-shadow 0.25s;
}
.branch:hover {
    border-color: var(--red);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.3);
}
.branch h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}
.branch .city {
    color: var(--red);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.branch p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
}
.branch .svc-link {
    margin-top: 14px;
    font-size: 13.5px;
}

.mk-pin {
    width: 18px;
    height: 18px;
    background: var(--red);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content-wrapper {
    border-radius: 8px;
}
.leaflet-popup-content {
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.5;
    min-width: 220px;
}
.leaflet-popup-content b {
    font-size: 14.5px;
    display: block;
    margin-bottom: 4px;
}
.branch .tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--red);
}
.branch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.branch-tags span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 4px 10px;
    color: var(--muted);
}
.no-result {
    text-align: center;
    color: var(--muted);
    padding: 40px 0;
    font-size: 15px;
    display: none;
}
.no-result.show {
    display: block;
}

/* Popup de succursale sur la carte */
.popup-branch {
    padding: 16px;
    background: var(--white);
}
.popup-city {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 4px;
}
.popup-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--ink);
    margin: 0 0 8px 0;
}
.popup-address {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.popup-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.popup-service {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 4px 10px;
    color: var(--muted);
}
.popup-phone {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--red) !important;
    text-decoration: none;
    gap: 6px;
    transition: color 0.2s;
}
.popup-phone:hover {
    color: var(--red-strong);
}
@media (max-width: 991px) {
    .packs-grid,
    .branches-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .network-filters,
    .packs-grid,
    .branches-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   OFFRES — listing (.content_offres) et page détail (.offre-single)
   =================================================================== */

/* ---------- Listing : cartes ---------- */
.content_offres .card_modeles {
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    height: 100%;
    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}

.content_offres .card_modeles:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.content_offres .card_modeles img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- Détail : en-tête ---------- */
.offre-single {
    padding: 48px 0 70px;
}

.offre-single__head {
    max-width: 820px;
    margin: 0 auto 28px;
    text-align: center;
}

.offre-single__title {
    font-family: Syne, var(--font);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    color: var(--ink-strong);
    letter-spacing: -0.02em;
}

/* ---------- Détail : fil d'Ariane ---------- */
.offre-single__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    font-size: 14px;
    color: var(--muted);
}

.offre-single__breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.offre-single__breadcrumbs a:hover {
    color: var(--red);
}

.offre-single__breadcrumbs .is-current {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Détail : visuel + formulaire côte à côte ---------- */
/* Visuel à gauche, formulaire de contact à droite (>= 992px). */
.offre_content_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 34px;
    margin-bottom: 34px;
}

/* Le visuel porte sa marge basse hors de la grille : c'est gap qui espace. */
.offre_content_row .offre-single__hero {
    margin-bottom: 0;
}

/* Sur 2 colonnes, le formulaire n'est plus centré ni bridé à 820px. */
.offre_content_row .contact_offre {
    max-width: none;
    margin: 0;
}

/* Idem pour les messages flash, alignés sur la colonne de droite. */
.offre_content_row .alert {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Offre sans visuel : le <figure> n'est pas rendu, le formulaire prend
   toute la largeur au lieu de rester coincé dans la colonne de gauche. */
.offre_content_row > div:only-child {
    grid-column: 1 / -1;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

.offre-single__hero {
    margin: 0 0 34px;
    border-radius: 16px;
    overflow: hidden;
}

.offre-single__hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Détail : contenu CMS ---------- */
.offre-single__content {
    max-width: 820px;
    margin: 0 auto 40px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
}

.offre-single__content > * + * {
    margin-top: 18px;
}

.offre-single__content h2,
.offre-single__content h3,
.offre-single__content h4 {
    font-family: Syne, var(--font);
    color: var(--ink-strong);
    line-height: 1.25;
    margin-top: 32px;
}

.offre-single__content h2 {
    font-size: 26px;
}
.offre-single__content h3 {
    font-size: 21px;
}
.offre-single__content h4 {
    font-size: 18px;
}

.offre-single__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.offre-single__content ul,
.offre-single__content ol {
    padding-left: 22px;
}

.offre-single__content li + li {
    margin-top: 8px;
}

.offre-single__content a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.offre-single__content table {
    width: 100%;
    border-collapse: collapse;
}

.offre-single__content th,
.offre-single__content td {
    border: 1px solid var(--hairline);
    padding: 10px 12px;
    text-align: left;
}

/* ---------- Détail : formulaire de contact ---------- */
.contact_offre {
    max-width: 820px;
    margin: 0 auto;
}

.contact_offre .u362 {
    font-family: Syne, var(--font);
    font-weight: 700;
    color: var(--ink-strong);
}

.contact_offre .u364 {
    width: 100%;
    transition:
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.contact_offre .u364:focus {
    outline: none;
    border-color: var(--ink-strong);
    box-shadow: 0 0 0 3px rgba(30, 34, 51, 0.1);
}

.contact_offre .u364::placeholder {
    color: var(--muted-soft);
}

.contact_offre .u369 {
    transition:
        background-color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.contact_offre .u369:hover {
    background: var(--red);
    transform: translateY(-1px);
}

/* champs en erreur */
.contact_offre .u364[aria-invalid="true"] {
    border-color: var(--red);
}

.cform__errors {
    margin-top: 14px;
}

.cform__errors ul {
    margin: 0;
    padding-left: 18px;
    color: var(--red);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Erreurs affichées sous chaque champ ---------- */

/* le wrapper occupe la cellule de grille : le champ prend toute la largeur */
.form_contact .cform__group,
.test_drive_form .cform__group,
.contact_offre .cform__group {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 20px;
}

.form_contact .cform__group > .u364,
.form_contact .cform__group > .u365,
.form_contact .cform__group > .u368,
.test_drive_form .cform__group > .u383,
.test_drive_form .cform__group > .u384,
.test_drive_form .cform__group > .u385,
.contact_offre .cform__group > .u364 {
    width: 100%;
}

/* message client (span généré par les scripts de validation) */
.form_contact .cform__error:not(:empty),
.test_drive_form .cform__error:not(:empty),
.contact_offre .cform__error:not(:empty) {
    position: absolute;
    bottom: 0;
    color: var(--red);
    font-size: 12px;
    line-height: 1.4;
}

/* message serveur (liste rendue par form_errors) */
.form_contact .cform__group ul,
.test_drive_form .cform__group ul,
.contact_offre .cform__group ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--red);
    font-size: 13px;
    line-height: 1.4;
}

.form_contact [aria-invalid="true"],
.test_drive_form [aria-invalid="true"],
.contact_offre [aria-invalid="true"] {
    border-color: var(--red);
}

/* ---------- Détail : messages flash ---------- */
.offre-single .alert {
    max-width: 820px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    border: 1px solid transparent;
}

.offre-single .alert-success {
    background: #edf7ee;
    border-color: #c6e6c9;
    color: #1e6023;
}

.offre-single .alert-danger {
    background: #fdeced;
    border-color: #f5c6c9;
    color: #a11b22;
}

/* ---------- Détail : retour ---------- */
.offre-single__foot {
    max-width: 820px;
    margin: 40px auto 0;
    text-align: center;
}

.offre-single__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-strong);
    text-decoration: none;
    transition:
        color 0.2s var(--ease),
        gap 0.2s var(--ease);
}

.offre-single__back:hover {
    color: var(--red);
    gap: 14px;
}

@media (max-width: 991px) {
    .offre-single {
        padding: 32px 0 50px;
    }
    .contact_offre.u361 {
        padding: 24px;
    }
    /* < 992px : visuel au-dessus, formulaire en dessous */
    .offre_content_row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ==========================================================
   PAGINATION (_pagination.html.twig)
   Utilisée par : actualités, offres, modèles.
   Reprend la charte : Inter, --ink/--red, radius 4px, --ease.
   ========================================================== */
.section-pagination {
    margin-top: 30px;
}

.section-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-pagination .pagination li {
    display: block;
}

.section-pagination .pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease);
}

.section-pagination .pagination li a:hover {
    border-color: var(--ink-strong);
    color: var(--ink-strong);
    background: var(--bg-soft);
}

.section-pagination .pagination li a:focus-visible {
    outline: none;
    border-color: var(--ink-strong);
    box-shadow: 0 0 0 3px rgba(30, 34, 51, 0.1);
}

/* Page courante : pastille rouge, non cliquable visuellement */
.section-pagination .pagination li.active a,
.section-pagination .pagination li.active a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    cursor: default;
}

/* ---------- Flèches précédent / suivant ---------- */
.section-pagination .pagination .arrows_nav a {
    min-width: 42px;
    padding: 0;
}

.section-pagination .pagination .arrows_nav svg {
    width: 16px;
    height: 16px;
    display: block;
    /* le SVG force stroke="#000000" : on rend la couleur héritable
       pour suivre le hover du lien */
    stroke: currentColor;
}

/* Le même chevron droit sert aux deux flèches : on retourne le précédent. */
.section-pagination .pagination .arrows_prev svg {
    transform: rotate(180deg);
}

@media (max-width: 575px) {
    .section-pagination {
        margin-top: 34px;
    }
    .section-pagination .pagination {
        gap: 6px;
    }
    .section-pagination .pagination li a {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 14px;
    }
    .section-pagination .pagination .arrows_nav a {
        min-width: 38px;
    }
}

/* ----------------------pages d'erreur (404 / 403 / 500)---------------------- */

.content_introuvable {
    margin: 130px auto;
}

.content_introuvable .text_introuvable {
    max-width: 640px;
    margin: 0 auto;
    animation: dfskFade 0.5s var(--ease) both;
}

/* Code d'erreur : accent rouge de la charte, en Syne comme les titres */
.content_introuvable .error_code {
    display: block;
    font-family: Syne, sans-serif;
    font-size: 130px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--red);
}

.content_introuvable .error_title {
    font-size: 40px;
    text-transform: uppercase;
    margin: 25px 0 20px;
}

.content_introuvable .error_text {
    color: var(--muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 520px;
}

.content_introuvable .link_introuvable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

/* Bouton principal : même grammaire que les CTA du site */
.content_introuvable .link_introuvable a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid var(--ink-strong);
    border-radius: 4px;
    background: var(--ink-strong);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition:
        background-color 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.content_introuvable .link_introuvable a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-1px);
}

.content_introuvable .link_introuvable a:focus-visible {
    outline: none;
    border-color: var(--ink-strong);
    box-shadow: 0 0 0 3px rgba(30, 34, 51, 0.1);
}

/* La flèche hérite la couleur du lien (stroke="currentColor" dans le SVG) */
.content_introuvable .link_introuvable a svg {
    width: 16px;
    height: 12px;
    display: block;
    transition: transform 0.2s var(--ease);
}

.content_introuvable .link_introuvable a:hover svg {
    transform: translateX(3px);
}

/* Bouton secondaire : version fantôme sur fond clair */
.content_introuvable .link_introuvable a.btn_ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--ink-strong);
}

.content_introuvable .link_introuvable a.btn_ghost:hover {
    background: var(--bg-soft);
    border-color: var(--ink-strong);
    color: var(--ink-strong);
}

@media (max-width: 991px) {
    .content_introuvable {
        margin: 70px auto 90px;
    }
    .content_introuvable .error_code {
        font-size: 88px;
    }
    .content_introuvable .error_title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .content_introuvable .error_code {
        font-size: 72px;
    }
    .content_introuvable .error_title {
        font-size: 27px;
        margin: 14px 0 12px;
    }
    .content_introuvable .error_text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .content_introuvable {
        margin: 55px auto 70px;
    }
    .content_introuvable .error_code {
        font-size: 60px;
    }
    .content_introuvable .error_title {
        font-size: 23px;
    }
    .content_introuvable .error_text {
        font-size: 13px;
    }
    /* Boutons pleine largeur pour rester confortables au pouce */
    .content_introuvable .link_introuvable {
        gap: 10px;
        margin-top: 28px;
    }
    .content_introuvable .link_introuvable a {
        width: 100%;
        min-height: 46px;
    }
}




/* RDV */

.rdv-card {
    background: #fff;
    padding: 20px 15px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 32px rgba(0,0,0,.08);
    margin: auto;
    max-height: 600px;
    overflow: auto;
    border-radius: 15px;
}

/* ── Progress bar ─────────────────────────────────────────────────── */
.rdv-card .progress-label {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
    color: #111;
}
.rdv-card .progress-bar-wrap {
    background: #E4E7EC;
    border-radius: 99px;
    height: 5px;
    margin-bottom: 36px;
}
.rdv-card .progress-bar-fill {
    background: var(--btn-color);
    height: 100%;
    border-radius: 99px;
    transition: width .35s ease;
}

button.btn-help {
    border: 0px;
    background: transparent;
    color: #298ee2;
}

/* ── Titles ───────────────────────────────────────────────────────── */
.rdv-card .step-title {
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    color: #0d0d0d;
}
.rdv-card .step-subtitle {
    font-size: 14px;
    color: #667085;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Fields ───────────────────────────────────────────────────────── */
.rdv-card .field-label {
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    margin-bottom: 5px;
    display: block;
}
.rdv-card .field-group { margin-bottom: 15px; }
.rdv-card .field-row { display: flex; gap: 14px; }
.rdv-card .field-row .field-group { flex: 1; }

.rdv-card select,.rdv-card input[type="text"],.rdv-card input[type="email"],.rdv-card textarea {
    width: 100%;
    border: 1.5px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    font-size: 14px;
    color: #858585;
    background: #fff;
    appearance: none;
    outline: none;
    transition: border-color .2s;
    font-family: inherit;
}
.rdv-card select { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23667085%27 stroke-width=%272%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.rdv-card select:focus, input:focus, textarea:focus { border-color: var(--input-focus); }
.rdv-card select:disabled { background-color: #f9fafb; color: #98a2b3; cursor: not-allowed; }
.rdv-card textarea { resize: none; min-height: 120px; }

/* Textarea avec icône image */
.rdv-card .textarea-wrap { position: relative; }
.rdv-card .textarea-wrap textarea { padding-bottom: 50px; }
.rdv-card .textarea-img-btn {
    position: absolute; bottom: 12px; right: 12px;
    background: #f2f4f7; border: none; border-radius: 8px;
    padding: 6px 10px; cursor: pointer; font-size: 18px;
    color: #667085;
}

/* Phone field */
.rdv-card .phone-wrap {
    display: flex;
    border: 1.5px solid var(--input-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: border-color .2s;
}
.rdv-card .phone-wrap:focus-within { border-color: var(--input-focus); }
.rdv-card .phone-icon { display: flex; align-items: center; padding: 0 12px; color: #667085; font-size: 16px; }
.rdv-card .phone-number { border: 0px !important; flex: 1; padding: 14px 12px; font-size: 15px; outline: none; }

/* ── Time slots ───────────────────────────────────────────────────── */
.rdv-card .slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.rdv-card .slot-btn {
    border: 1.5px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 10px 8px;
    background: #fff;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
    font-weight: 500;
}
.rdv-card .slot-btn:hover { border-color: var(--btn-color); }
.rdv-card .slot-btn.selected {
    border-color: var(--slot-selected-border);
    color: var(--slot-selected-text);
    font-weight: 700;
    background: #f0f7ff;
}
.rdv-card .slots-empty { color: #98a2b3; font-size: 13px; margin: 0px !important; }

/* ── Checkbox ─────────────────────────────────────────────────────── */
.rdv-card .checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 24px;
}
.rdv-card .checkbox-wrap input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--btn-color);
    cursor: pointer;
    flex-shrink: 0;
}
.rdv-card .checkbox-wrap label { font-size: 14px; color: #344054; cursor: pointer; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.rdv-card .btn-row { display: flex; gap: 12px; margin-top: 24px; }
.rdv-card .btn-primary {
    flex: 1;
    background: var(--btn-color);
    color: var(--btn-text-color);
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s;
}
.rdv-card .btn-primary:hover { opacity: .88; }
.rdv-card .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.rdv-card .btn-back {
    flex: 1;
    background: var(--btn-back-color);
    color: var(--btn-back-text);
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s;
}
.rdv-card .btn-back:hover { opacity: .8; }

/* ── Steps visibility ─────────────────────────────────────────────── */
.rdv-card .step { display: none; }
.rdv-card .step.active { display: block; }

/* ── Success screen ───────────────────────────────────────────────── */
.rdv-card .success-screen {
    text-align: center;
    padding: 40px 20px;
}
.rdv-card .success-icon {
    font-size: 80px;
    margin-bottom: 24px;
}
.rdv-card .success-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 14px;
}
.rdv-card .success-text { font-size: 15px; color: #667085; line-height: 1.7; }

/* ── Footer ───────────────────────────────────────────────────────── */
.rdv-card .rdv-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #98a2b3;
}

/* ── Error message ────────────────────────────────────────────────── */
.rdv-card .error-msg {
    background: #fef2f2;
    color: #dc2626;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}
.rdv-card .error-msg.visible { display: block; }

/* ── Loader ───────────────────────────────────────────────────────── */
.rdv-card .spinner {
    width: 18px; height: 18px;
    border: 3px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: none;
}
.rdv-card .btn-primary.loading .spinner { display: inline-block; }
.rdv-card .btn-primary.loading .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }



/* ── Field errors ─────────────────────────────────────────────────── */
.rdv-card .field-group.has-error select,
.rdv-card .field-group.has-error input[type="text"],
.rdv-card .field-group.has-error input[type="email"],
.rdv-card .field-group.has-error textarea {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
}

.rdv-card .field-group.has-error select:focus,
.rdv-card .field-group.has-error input:focus,
.rdv-card .field-group.has-error textarea:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.rdv-card .field-group.has-error .phone-wrap,
.rdv-card .field-group.has-error .textarea-wrap textarea {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
}

.rdv-card .field-group.has-error .slots-grid {
    border: 1.5px solid #dc2626;
    border-radius: var(--border-radius);
    padding: 8px;
    background: #fef2f2;
}

.rdv-card .field-error {
    display: none;
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 5px;
    font-weight: 500;
    line-height: 1.4;
}

.rdv-card .field-group.has-error .field-error {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rdv-card .field-error::before {
    content: "⚠";
    font-size: 13px;
    flex-shrink: 0;
}

/* Header error amélioré */
.rdv-card .error-msg.visible {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-weight: 500;
}

.rdv-card .error-msg.visible::before {
    content: "⚠";
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.3;
}