/* =========================================================
   SILENT LINK CARE — HEADER PROPRE
   ========================================================= */

.slc-site-header {
    width: 100%;
    background: #101827;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 1000;
}

.slc-site-header .slc-header-inner {
    width: min(1500px, calc(100% - 56px));
    min-height: 134px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 34px;
}

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

.slc-site-header .slc-brand {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.slc-site-header .slc-brand img {
    display: block;
    width: 285px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

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

.slc-site-header .slc-main-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.slc-site-header .slc-main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 0;
    color: #f5f7fb;
    text-decoration: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;

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

.slc-site-header .slc-main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        #11c9e5,
        #55e8f5
    );

    box-shadow: 0 0 8px rgba(18,201,229,.5);

    transition: width .24s ease;
}

.slc-site-header .slc-main-nav a:hover {
    color: #55e8f5;
    transform: translateY(-1px);
    text-shadow: 0 0 10px rgba(24,213,231,.2);
}

.slc-site-header .slc-main-nav a:hover::after {
    width: 70%;
}

.slc-site-header .slc-main-nav a:focus-visible {
    outline: 2px solid rgba(85,232,245,.8);
    outline-offset: 5px;
    border-radius: 5px;
}

.slc-site-header .slc-heart {
    color: #ff3f55;
    margin-right: 3px;
    font-size: 1.05em;
}

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

.slc-site-header .slc-order-button {
    min-width: 205px;
    height: 58px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #fff;
    background: linear-gradient(
        135deg,
        #119fd1,
        #087fc0
    );

    border: 1px solid rgba(85,232,245,.75);
    border-radius: 17px;

    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 8px 24px rgba(0,130,190,.2),
        inset 0 1px 0 rgba(255,255,255,.18);

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

.slc-site-header .slc-order-button:hover {
    color: #fff;
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        #17b5df,
        #098bc9
    );

    box-shadow:
        0 12px 30px rgba(0,170,220,.3),
        0 0 18px rgba(24,213,231,.16);
}

.slc-site-header .slc-order-button:focus-visible {
    outline: 2px solid #55e8f5;
    outline-offset: 4px;
}

.slc-site-header .slc-order-icon {
    font-size: 21px;
    line-height: 1;
}

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

.slc-site-header .slc-menu-button {
    display: none;

    width: 48px;
    height: 48px;
    padding: 0;

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

    color: #fff;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;

    font-size: 27px;
    line-height: 1;
    cursor: pointer;

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

.slc-site-header .slc-menu-button:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(85,232,245,.65);
}

/* Caché sur desktop */
.slc-site-header .slc-mobile-order {
    display: none !important;
}

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

@media (max-width: 1250px) {

    .slc-site-header .slc-header-inner {
        width: min(100% - 40px, 1180px);
        grid-template-columns: 250px minmax(0, 1fr) auto;
        column-gap: 22px;
    }

    .slc-site-header .slc-brand {
        width: 250px;
    }

    .slc-site-header .slc-brand img {
        width: 235px;
    }

    .slc-site-header .slc-main-nav {
        gap: 20px;
    }

    .slc-site-header .slc-main-nav a {
        font-size: 14px;
    }

    .slc-site-header .slc-order-button {
        min-width: 175px;
        padding: 0 17px;
        font-size: 15px;
    }
}

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

@media (max-width: 900px) {

    .slc-site-header .slc-header-inner {
        width: calc(100% - 32px);
        min-height: 94px;

        grid-template-columns: 1fr auto auto;
        column-gap: 12px;
    }

    .slc-site-header .slc-brand {
        width: auto;
        min-width: 0;
    }

    .slc-site-header .slc-brand img {
        width: 220px;
        max-width: 100%;
    }

    .slc-site-header .slc-menu-button {
        display: inline-flex;
    }

    .slc-site-header .slc-order-button {
        min-width: auto;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 12px;
        font-size: 0;
    }

    .slc-site-header .slc-order-icon {
        font-size: 21px;
    }

    .slc-site-header .slc-main-nav {
        display: none;

        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;

        padding: 12px;

        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;

        background: #101827;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;

        box-shadow: 0 20px 45px rgba(0,0,0,.35);
    }

    .slc-site-header .slc-main-nav.slc-open {
        display: flex;
    }

    .slc-site-header .slc-main-nav a {
        min-height: 46px;
        justify-content: flex-start;
        padding: 10px 14px;
        font-size: 16px;
        border-radius: 9px;
    }

    .slc-site-header .slc-main-nav a::after {
        display: none;
    }

    .slc-site-header .slc-main-nav a:hover {
        transform: none;
        background: rgba(85,232,245,.07);
    }

    .slc-site-header .slc-main-nav .slc-mobile-order {
        display: flex !important;
        margin-top: 6px;
        justify-content: center;
        color: #fff;
        background: linear-gradient(135deg,#119fd1,#087fc0);
        border-radius: 10px;
        font-weight: 700;
    }
}

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

@media (max-width: 560px) {

    .slc-site-header .slc-header-inner {
        min-height: 82px;
        width: calc(100% - 22px);
    }

    .slc-site-header .slc-brand img {
        width: 180px;
    }

    .slc-site-header .slc-menu-button,
    .slc-site-header .slc-order-button {
        width: 44px;
        height: 44px;
    }

    .slc-site-header .slc-main-nav {
        left: 11px;
        right: 11px;
    }
}

/* =========================================================
   SLC — HEADER FINAL
   Logo réduit + navigation aérée
   ========================================================= */

html body header.slc-site-header .slc-header-inner {
    width: min(100% - 48px, 1500px) !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    min-height: 104px !important;

    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

/* Logo : volontairement plus compact */
html body header.slc-site-header .slc-brand {
    flex: 0 0 auto !important;
    width: 285px !important;
    max-width: 285px !important;
}

html body header.slc-site-header .slc-brand img {
    display: block !important;
    width: 285px !important;
    max-width: 285px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Navigation : prend l'espace disponible */
html body header.slc-site-header .slc-main-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
}

/* Liens */
html body header.slc-site-header .slc-main-nav a {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Commander : toujours à droite, sans doublon */
html body header.slc-site-header .slc-order-button {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}

/* Le Commander mobile reste caché sur desktop */
html body header.slc-site-header .slc-main-nav .slc-mobile-order {
    display: none !important;
}

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

@media (max-width: 900px) {

    html body header.slc-site-header .slc-header-inner {
        width: min(100% - 28px, 700px) !important;
        min-height: 82px !important;
        gap: 14px !important;
    }

    html body header.slc-site-header .slc-brand {
        width: 220px !important;
        max-width: 220px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 220px !important;
        max-width: 220px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        display: none !important;
    }

    html body header.slc-site-header .slc-menu-button {
        display: inline-flex !important;
        margin-left: auto !important;
    }

    html body header.slc-site-header .slc-order-button {
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 24px) !important;
        min-height: 76px !important;
        gap: 10px !important;
    }

    html body header.slc-site-header .slc-brand {
        width: 175px !important;
        max-width: 175px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 175px !important;
        max-width: 175px !important;
    }

    html body header.slc-site-header .slc-order-button {
        font-size: 0 !important;
        padding: 12px !important;
        min-width: 48px !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 22px !important;
        margin: 0 !important;
    }
}


/* =========================================================
   SLC — ÉQUILIBRE FINAL DU HEADER
   Logo compact / navigation séparée / Commander isolé
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 56px) !important;
        max-width: 1540px !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) 190px !important;
        align-items: center !important;

        column-gap: 28px !important;
    }

    /* LOGO */
    html body header.slc-site-header .slc-brand {
        width: 250px !important;
        max-width: 250px !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 250px !important;
        max-width: 250px !important;
        height: auto !important;
        display: block !important;
    }

    /* NAVIGATION */
    html body header.slc-site-header .slc-main-nav {
        min-width: 0 !important;
        width: 100% !important;

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

        gap: 16px !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    /* Commander séparé de la navigation */
    html body header.slc-site-header .slc-order-button {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

        margin: 0 !important;
        justify-self: end !important;

        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Aucun bouton Commander caché dans la navigation desktop */
    html body header.slc-site-header .slc-main-nav .slc-mobile-order {
        display: none !important;
    }
}


/* =========================================================
   SLC — NAVIGATION DESKTOP ÉQUILIBRÉE
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 56px) !important;
        max-width: 1540px !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: 245px minmax(0, 1fr) 185px !important;
        column-gap: 24px !important;
        align-items: center !important;
    }

    /* LOGO */
    html body header.slc-site-header .slc-brand,
    html body header.slc-site-header .slc-brand img {
        width: 245px !important;
        max-width: 245px !important;
    }

    html body header.slc-site-header .slc-brand {
        margin: 0 !important;
        flex: none !important;
    }

    /* NAVIGATION */
    html body header.slc-site-header .slc-main-nav {
        width: 100% !important;
        min-width: 0 !important;

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

        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        margin: 0 !important;
        padding: 0 3px !important;

        white-space: nowrap !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Commander totalement indépendant */
    html body header.slc-site-header .slc-order-button {
        width: 185px !important;
        min-width: 185px !important;
        max-width: 185px !important;

        margin: 0 !important;
        justify-self: end !important;

        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav .slc-mobile-order {
        display: none !important;
    }
}

/* Écrans intermédiaires : on compacte légèrement */
@media (min-width: 901px) and (max-width: 1250px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 215px minmax(0, 1fr) 160px !important;
        column-gap: 16px !important;
    }

    html body header.slc-site-header .slc-brand,
    html body header.slc-site-header .slc-brand img {
        width: 215px !important;
        max-width: 215px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 6px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 13px !important;
    }

    html body header.slc-site-header .slc-order-button {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
}


/* =========================================================
   SLC — FIX MENU MOBILE
   La règle finale doit permettre à .slc-open de s'afficher.
   ========================================================= */

@media (max-width: 900px) {
    html body header.slc-site-header .slc-main-nav.slc-open {
        display: flex !important;
    }
}

/* =========================================================
   SLC — HERO PREMIUM
   Reproduction du rendu cible
   ========================================================= */

html body .hero {
    position: relative !important;
    overflow: hidden !important;

    min-height: 665px !important;
    padding: 100px 32px 58px !important;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0, 185, 230, .16) 0%,
            rgba(0, 185, 230, 0) 42%
        ),
        linear-gradient(
            115deg,
            #071225 0%,
            #09172d 45%,
            #063b57 100%
        ) !important;
}

/* Grandes formes bleues d'arrière-plan */
html body .hero::before {
    content: "" !important;
    position: absolute !important;
    width: 900px !important;
    height: 900px !important;

    right: -430px !important;
    top: -330px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            rgba(0, 196, 239, .25),
            rgba(0, 90, 150, .03)
        ) !important;

    transform: rotate(22deg) !important;
    pointer-events: none !important;
}

/* Courbe inférieure */
html body .hero::after {
    content: "" !important;
    position: absolute !important;

    width: 1150px !important;
    height: 520px !important;

    left: -520px !important;
    bottom: -430px !important;

    border-radius: 50% !important;

    border: 110px solid rgba(13, 76, 154, .30) !important;

    transform: rotate(14deg) !important;
    pointer-events: none !important;
}

/* Contenu au-dessus des décors */
html body .hero .hero-content {
    position: relative !important;
    z-index: 2 !important;

    width: min(100%, 1200px) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;

    text-align: center !important;
}

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

html body .hero h1 {
    margin: 0 auto 28px !important;

    max-width: 1180px !important;

    font-size: clamp(44px, 4.3vw, 70px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.8px !important;

    font-weight: 800 !important;
    color: #f7f9fc !important;

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

html body .hero h1 .hero-accent {
    color: #08d8ef !important;

    text-shadow:
        0 0 24px rgba(0,216,239,.18) !important;
}

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

html body .hero p {
    max-width: 970px !important;
    margin: 0 auto 42px !important;

    font-size: clamp(19px, 1.45vw, 24px) !important;
    line-height: 1.65 !important;

    color: #dce7f5 !important;
}

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

html body .hero .button,
html body .hero .button-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    padding: 0 32px !important;
    margin: 0 8px !important;

    border-radius: 18px !important;

    font-size: 22px !important;
    font-weight: 700 !important;

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

/* Principal */
html body .hero .button {
    position: relative !important;
    min-width: 475px !important;

    background:
        linear-gradient(
            135deg,
            #10cda1 0%,
            #19a873 100%
        ) !important;

    border: 1px solid rgba(87,255,226,.75) !important;

    box-shadow:
        0 0 12px rgba(19,220,176,.55),
        0 0 34px rgba(19,220,176,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html body .hero .button:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 0 18px rgba(19,220,176,.70),
        0 0 44px rgba(19,220,176,.30) !important;
}

/* Secondaire */
html body .hero .button-secondary {
    min-width: 390px !important;

    background: rgba(8, 25, 48, .38) !important;

    border: 2px solid rgba(235,244,255,.85) !important;

    color: #fff !important;

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

html body .hero .button-secondary:hover {
    transform: translateY(-3px) !important;

    border-color: #fff !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.22) !important;
}

/* =========================================================
   BANDEAU RÉASSURANCE
   ========================================================= */

.slc-hero-trust {
    position: relative !important;
    z-index: 3 !important;

    width: min(100%, 1200px) !important;
    margin: 62px auto 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center !important;
}

.slc-hero-trust-item {
    min-height: 74px !important;

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

    padding: 0 28px !important;
}

.slc-hero-trust-item + .slc-hero-trust-item {
    border-left: 2px solid rgba(224,240,255,.48) !important;
}

.slc-hero-trust-icon {
    width: 72px !important;
    height: 72px !important;

    flex: 0 0 72px !important;

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

    border: 2px solid #08d8ef !important;
    border-radius: 50% !important;

    color: #08d8ef !important;

    font-size: 30px !important;

    box-shadow:
        0 0 14px rgba(8,216,239,.22),
        inset 0 0 12px rgba(8,216,239,.08) !important;
}

.slc-hero-trust-text {
    text-align: left !important;
}

.slc-hero-trust-title {
    display: block !important;

    margin-bottom: 5px !important;

    color: #f4f8fd !important;

    font-size: 20px !important;
    font-weight: 700 !important;
}

.slc-hero-trust-subtitle {
    display: block !important;

    color: #c7d8ea !important;

    font-size: 16px !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    html body .hero {
        min-height: auto !important;
        padding: 82px 24px 54px !important;
    }

    html body .hero .hero-content {
        width: 100% !important;
    }

    html body .hero h1 {
        font-size: clamp(40px, 6vw, 58px) !important;
    }

    html body .hero .button,
    html body .hero .button-secondary {
        min-width: 390px !important;
    }

    .slc-hero-trust {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .slc-hero-trust-item + .slc-hero-trust-item {
        border-left: 0 !important;
        border-top: 1px solid rgba(224,240,255,.25) !important;
        padding-top: 20px !important;
    }
}

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

@media (max-width: 600px) {

    html body .hero {
        padding: 58px 18px 42px !important;
    }

    html body .hero h1 {
        font-size: 39px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        margin-bottom: 24px !important;
    }

    html body .hero p {
        font-size: 18px !important;
        line-height: 1.55 !important;
        margin-bottom: 32px !important;
    }

    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        height: 70px !important;

        margin: 6px 0 !important;

        font-size: 19px !important;
        border-radius: 15px !important;
    }

    .slc-hero-trust {
        margin-top: 38px !important;
    }

    .slc-hero-trust-item {
        justify-content: flex-start !important;
        padding: 8px 4px !important;
    }

    .slc-hero-trust-icon {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
        font-size: 24px !important;
    }

    .slc-hero-trust-title {
        font-size: 17px !important;
    }

    .slc-hero-trust-subtitle {
        font-size: 14px !important;
    }
}


/* =========================================================
   SLC — HERO FINAL : proportions du rendu cible
   ========================================================= */

html body .hero .button,
html body .hero .button-secondary {
    height: 66px !important;
    min-width: 0 !important;

    padding: 0 28px !important;
    margin: 0 8px !important;

    border-radius: 14px !important;

    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Bouton principal */
html body .hero .button {
    width: 475px !important;
    max-width: calc(100% - 16px) !important;
}

/* Bouton secondaire */
html body .hero .button-secondary {
    width: 390px !important;
    max-width: calc(100% - 16px) !important;
}

/* Texte légèrement plus proche du rendu cible */
html body .hero p {
    margin-bottom: 38px !important;
}

/* Réassurance plus proche des boutons */
html body .slc-hero-trust {
    margin-top: 48px !important;
}

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

@media (max-width: 1000px) {

    html body .hero .button,
    html body .hero .button-secondary {
        width: auto !important;
        min-width: 0 !important;
    }

    html body .hero .button {
        width: 430px !important;
        max-width: calc(100% - 16px) !important;
    }

    html body .hero .button-secondary {
        width: 360px !important;
        max-width: calc(100% - 16px) !important;
    }
}

@media (max-width: 600px) {

    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        max-width: 100% !important;
        height: 64px !important;

        margin: 6px 0 !important;

        font-size: 18px !important;
        border-radius: 14px !important;
    }

    html body .slc-hero-trust {
        margin-top: 34px !important;
    }
}


/* =========================================================
   SLC — AJUSTEMENT FINAL HERO
   ========================================================= */

html body .hero {
    min-height: 0 !important;
    padding: 82px 32px 48px !important;
}

/* Boutons : dimensions visuelles maîtrisées */
html body .hero .button,
html body .hero .button-secondary {
    box-sizing: border-box !important;
    height: 64px !important;
    padding: 0 26px !important;
    margin: 0 7px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
}

/* Principal */
html body .hero .button {
    width: 475px !important;
    min-width: 475px !important;
}

/* Secondaire */
html body .hero .button-secondary {
    width: 390px !important;
    min-width: 390px !important;
}

/* Texte */
html body .hero p {
    margin-bottom: 34px !important;
}

/* Réassurance */
html body .slc-hero-trust {
    margin-top: 42px !important;
}

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

@media (max-width: 1000px) {

    html body .hero {
        padding: 70px 24px 42px !important;
    }

    html body .hero .button,
    html body .hero .button-secondary {
        min-width: 0 !important;
    }

    html body .hero .button {
        width: 430px !important;
        max-width: calc(100% - 14px) !important;
    }

    html body .hero .button-secondary {
        width: 360px !important;
        max-width: calc(100% - 14px) !important;
    }
}

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

@media (max-width: 600px) {

    html body .hero {
        padding: 58px 18px 40px !important;
    }

    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 62px !important;
        margin: 6px 0 !important;
        font-size: 18px !important;
    }

    html body .slc-hero-trust {
        margin-top: 32px !important;
    }
}


/* =========================================================
   SLC — HERO FINAL
   Rendu cible : boutons compacts + réassurance équilibrée
   ========================================================= */

/* ---------- BOUTONS HERO ---------- */

html body .hero .button,
html body .hero .button-secondary {
    box-sizing: border-box !important;
    height: 92px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    border-radius: 18px !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    vertical-align: middle !important;
}

/* Découvrir le bracelet */
html body .hero .button {
    width: 474px !important;
    min-width: 474px !important;
    max-width: 474px !important;

    padding: 0 28px !important;

    background:
        linear-gradient(
            135deg,
            #10cda1 0%,
            #19a873 100%
        ) !important;

    border: 1px solid rgba(87,255,226,.8) !important;

    box-shadow:
        0 0 14px rgba(19,220,176,.58),
        0 0 34px rgba(19,220,176,.24),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Comment ça marche */
html body .hero .button-secondary {
    width: 392px !important;
    min-width: 392px !important;
    max-width: 392px !important;

    padding: 0 24px !important;
    margin-left: 18px !important;

    background: rgba(8,25,48,.30) !important;

    border: 2px solid rgba(235,244,255,.82) !important;

    color: #fff !important;

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

/* ---------- ESPACEMENT ---------- */

html body .hero p {
    margin-bottom: 38px !important;
}

html body .slc-hero-trust {
    margin-top: 62px !important;
}

/* ---------- RÉASSURANCE ---------- */

html body .slc-hero-trust {
    width: min(100%, 1200px) !important;
    max-width: 1200px !important;

    grid-template-columns: repeat(3, 1fr) !important;

    align-items: center !important;
}

html body .slc-hero-trust-item {
    min-height: 76px !important;

    gap: 18px !important;
    padding: 0 22px !important;
}

html body .slc-hero-trust-icon {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px !important;

    border: 2px solid #08d8ef !important;
    border-radius: 50% !important;

    color: #08d8ef !important;
    font-size: 29px !important;

    box-shadow:
        0 0 14px rgba(8,216,239,.22),
        inset 0 0 12px rgba(8,216,239,.08) !important;
}

html body .slc-hero-trust-title {
    font-size: 20px !important;
    font-weight: 700 !important;
}

html body .slc-hero-trust-subtitle {
    font-size: 16px !important;
}

/* ---------- TABLET ---------- */

@media (max-width: 1000px) {

    html body .hero .button,
    html body .hero .button-secondary {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .hero .button {
        width: 54% !important;
    }

    html body .hero .button-secondary {
        width: 42% !important;
        margin-left: 1% !important;
    }
}

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

@media (max-width: 600px) {

    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 70px !important;

        margin: 6px 0 !important;

        font-size: 19px !important;
        border-radius: 15px !important;
    }

    html body .slc-hero-trust {
        margin-top: 38px !important;
    }
}


/* =========================================================
   SLC — AJUSTEMENT FINAL DES CTA HERO
   ========================================================= */

html body .hero .button,
html body .hero .button-secondary {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

/* CTA principal */
html body .hero .button {
    width: 474px !important;
    min-width: 474px !important;
    max-width: 474px !important;

    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

    padding: 0 28px !important;
    margin: 0 8px !important;

    border-radius: 16px !important;

    font-size: 22px !important;
}

/* CTA secondaire */
html body .hero .button-secondary {
    width: 392px !important;
    min-width: 392px !important;
    max-width: 392px !important;

    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

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

    border-radius: 16px !important;

    font-size: 22px !important;
}

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

    html body .hero .button,
    html body .hero .button-secondary {
        width: calc(50% - 16px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 600px) {

    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;

        margin: 6px 0 !important;

        font-size: 19px !important;
    }
}


/* =========================================================
   SLC — ENGAGEMENTS HERO
   Cadenas / France / Équipe
   ========================================================= */

html body .slc-hero-trust {
    position: relative !important;
    z-index: 5 !important;

    width: min(100%, 1200px) !important;
    max-width: 1200px !important;

    margin: 50px auto 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center !important;
}

html body .slc-hero-trust-item {
    min-height: 76px !important;

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

    gap: 18px !important;
    padding: 0 28px !important;
}

html body .slc-hero-trust-item + .slc-hero-trust-item {
    border-left: 2px solid rgba(224,240,255,.42) !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* Cercles */
html body .slc-hero-trust-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;

    flex: 0 0 72px !important;

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

    border: 2px solid #08d8ef !important;
    border-radius: 50% !important;

    color: #08d8ef !important;

    box-shadow:
        0 0 14px rgba(8,216,239,.20),
        inset 0 0 12px rgba(8,216,239,.07) !important;
}

/* Icônes SVG */
html body .slc-hero-trust-icon svg {
    width: 31px !important;
    height: 31px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* France : conserver le drapeau français */
html body .slc-hero-trust-item:nth-child(2)
.slc-hero-trust-icon {
    font-size: 29px !important;
}

/* Texte */
html body .slc-hero-trust-text {
    text-align: left !important;
}

html body .slc-hero-trust-title {
    display: block !important;

    margin-bottom: 5px !important;

    color: #f4f8fd !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

html body .slc-hero-trust-subtitle {
    display: block !important;

    color: #c7d8ea !important;

    font-size: 16px !important;
    line-height: 1.35 !important;
}

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

    html body .slc-hero-trust {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-top: 42px !important;
    }

    html body .slc-hero-trust-item {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
    }

    html body .slc-hero-trust-item + .slc-hero-trust-item {
        border-left: 0 !important;
        border-top: 1px solid rgba(224,240,255,.25) !important;
        padding-top: 18px !important;
    }
}

@media (max-width: 600px) {

    html body .slc-hero-trust {
        margin-top: 34px !important;
    }

    html body .slc-hero-trust-icon {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        flex-basis: 58px !important;
    }

    html body .slc-hero-trust-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    html body .slc-hero-trust-title {
        font-size: 17px !important;
    }

    html body .slc-hero-trust-subtitle {
        font-size: 14px !important;
    }
}


/* =========================================================
   SLC — DERNIER AJUSTEMENT BANDEAU HERO
   ========================================================= */

html body .slc-hero-trust {
    margin-top: 44px !important;
}

html body .slc-hero-trust .slc-france-icon {
    font-size: 31px !important;
    line-height: 1 !important;
}

html body .slc-hero-trust .slc-france-icon span {
    display: block !important;
    line-height: 1 !important;
}

/* garder les trois éléments entièrement visibles */
@media (min-width: 1001px) {
    html body .hero {
        min-height: 665px !important;
        padding-bottom: 42px !important;
    }
}


/* =========================================================
   SLC — DRAPEAU FRANÇAIS SVG
   Évite le rendu "FR" des emojis selon le navigateur
   ========================================================= */

html body .slc-hero-trust .slc-france-icon {
    font-size: 0 !important;
}

html body .slc-hero-trust .slc-france-flag {
    display: block !important;
    width: 38px !important;
    height: 26px !important;
    max-width: 38px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.30) !important;
}


/* =========================================================
   SLC — CARTE DE FRANCE
   ========================================================= */

.slc-france-icon {
    padding: 13px !important;
    box-sizing: border-box !important;
}

.slc-france-icon svg {
    width: 43px !important;
    height: 43px !important;
    display: block !important;
    filter: drop-shadow(0 0 5px rgba(8,216,239,.35)) !important;
}

/* =========================================================
   SLC — OVERRIDE FINAL HERO
   ========================================================= */

html body .hero .button,
html body .hero .button-secondary {
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;

    margin: 0 8px !important;

    padding: 0 24px !important;

    border-radius: 17px !important;

    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

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

html body .hero .button {
    width: 475px !important;
    min-width: 475px !important;
    max-width: 475px !important;

    background:
        linear-gradient(
            135deg,
            #10cda1 0%,
            #19a873 100%
        ) !important;

    border: 1px solid rgba(87,255,226,.85) !important;

    box-shadow:
        0 0 12px rgba(19,220,176,.55),
        0 0 34px rgba(19,220,176,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html body .hero .button-secondary {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;

    background: rgba(8,25,48,.38) !important;

    border: 2px solid rgba(235,244,255,.85) !important;

    color: #fff !important;
}

html body .hero .button:hover,
html body .hero .button-secondary:hover {
    transform: translateY(-3px) !important;
}

/* Carte de France */
html body .hero .slc-france-icon {
    padding: 12px !important;
    box-sizing: border-box !important;
}

html body .hero .slc-france-icon svg {
    width: 45px !important;
    height: 45px !important;
    display: block !important;
}

/* Mobile */
@media (max-width: 1000px) {
    html body .hero .button,
    html body .hero .button-secondary {
        width: min(100%, 475px) !important;
        min-width: 0 !important;
        max-width: 475px !important;
    }
}

@media (max-width: 600px) {
    html body .hero .button,
    html body .hero .button-secondary {
        width: 100% !important;
        max-width: 100% !important;
        height: 70px !important;
        min-height: 70px !important;
        margin: 6px 0 !important;
        font-size: 19px !important;
    }
}

/* =========================================================
   SLC — SILHOUETTE FRANCE PREMIUM
   ========================================================= */

html body .hero .slc-france-icon {
    padding: 0 !important;
    overflow: visible !important;
}

html body .hero .france-map {
    position: relative !important;
    display: block !important;

    width: 42px !important;
    height: 52px !important;

    background: linear-gradient(
        90deg,
        #165dff 0%,
        #165dff 33%,
        #ffffff 33%,
        #ffffff 66%,
        #ef3340 66%,
        #ef3340 100%
    ) !important;

    clip-path: polygon(
        46% 0%,
        61% 5%,
        69% 13%,
        82% 17%,
        91% 28%,
        86% 39%,
        94% 49%,
        87% 59%,
        91% 70%,
        81% 78%,
        76% 91%,
        63% 87%,
        54% 100%,
        44% 90%,
        31% 91%,
        27% 79%,
        17% 72%,
        21% 60%,
        10% 51%,
        18% 41%,
        12% 30%,
        25% 25%,
        30% 14%,
        40% 12%
    ) !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.45)) !important;
}

html body .hero .france-blue,
html body .hero .france-white,
html body .hero .france-red {
    display: none !important;
}

/* =========================================================
   SLC — VRAIE CARTE DE FRANCE
   ========================================================= */

html body .hero .slc-france-icon {
    padding: 0 !important;
    overflow: visible !important;
}

/* vraie silhouette SVG de la France */
html body .hero .slc-france-icon .france-map {
    display: block !important;
    width: 45px !important;
    height: 54px !important;

    background:
        linear-gradient(
            90deg,
            #155eef 0%,
            #155eef 33.33%,
            #ffffff 33.33%,
            #ffffff 66.66%,
            #ef3340 66.66%,
            #ef3340 100%
        ) !important;

    background-size: 100% 100% !important;

    -webkit-mask-image: url("/assets/france-map.svg") !important;
    mask-image: url("/assets/france-map.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.50))
        drop-shadow(0 0 10px rgba(8,216,239,.18)) !important;

    clip-path: none !important;
}

/* =========================================================
   FRANCE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    html body .hero .slc-france-icon .france-map {
        width: 36px !important;
        height: 45px !important;
    }

}

/* =========================================================
   SLC — FRANCE : VRAIE SILHOUETTE
   ========================================================= */

html body .hero .slc-france-icon {
    padding: 0 !important;
    overflow: visible !important;
}

html body .hero .france-map-image {
    display: block !important;

    width: 48px !important;
    height: 56px !important;

    object-fit: contain !important;

    /*
       Le SVG est utilisé comme silhouette.
       Le tricolore est appliqué par-dessus.
    */
    background:
        linear-gradient(
            90deg,
            #155eef 0%,
            #155eef 33.33%,
            #ffffff 33.33%,
            #ffffff 66.66%,
            #ef3340 66.66%,
            #ef3340 100%
        ) !important;

    /*
       Le SVG est lui-même la silhouette.
    */
    mix-blend-mode: multiply !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.55))
        drop-shadow(0 0 10px rgba(8,216,239,.18)) !important;
}

@media (max-width: 600px) {

    html body .hero .france-map-image {
        width: 38px !important;
        height: 46px !important;
    }

}


/* =========================================================
   SLC — CARTE DE FRANCE PROPRE
   ========================================================= */

html body .hero .slc-france-icon {
    padding: 0 !important;
    overflow: hidden !important;
}

html body .hero .france-map-real {
    display: block !important;

    width: 47px !important;
    height: 56px !important;

    object-fit: contain !important;
    object-position: center !important;

    background: transparent !important;

    border: 0 !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.55))
        drop-shadow(0 0 9px rgba(8,216,239,.20)) !important;
}

/* On supprime les anciens bricolages */
html body .hero .france-map,
html body .hero .france-blue,
html body .hero .france-white,
html body .hero .france-red {
    display: none !important;
}

@media (max-width: 600px) {
    html body .hero .france-map-real {
        width: 38px !important;
        height: 46px !important;
    }
}


/* =========================================================
   SLC — SILHOUETTE FRANCE PREMIUM FINAL
   ========================================================= */

html body .hero .slc-france-icon {
    padding: 0 !important;
    overflow: hidden !important;
}

html body .hero .france-map-real {
    display: none !important;
}

html body .hero .france-map-silhouette {
    width: 48px !important;
    height: 58px !important;

    display: block !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.65))
        drop-shadow(0 0 10px rgba(8,216,239,.22)) !important;
}

@media (max-width: 600px) {
    html body .hero .france-map-silhouette {
        width: 38px !important;
        height: 46px !important;
    }
}


/* =========================================================
   SLC — FRANCE ICON FINAL — SANS TEXTE
   ========================================================= */

html body .hero .slc-france-icon {
    background: transparent !important;
    background-image: none !important;
    overflow: hidden !important;
}

html body .hero .slc-france-icon::before,
html body .hero .slc-france-icon::after {
    content: none !important;
    display: none !important;
}

html body .hero .slc-france-icon .france-map {
    position: relative !important;
    display: block !important;

    width: 44px !important;
    height: 54px !important;

    margin: 0 auto !important;

    background:
        linear-gradient(
            90deg,
            #165dff 0%,
            #165dff 33%,
            #ffffff 33%,
            #ffffff 66%,
            #ef3340 66%,
            #ef3340 100%
        ) !important;

    background-image:
        linear-gradient(
            90deg,
            #165dff 0%,
            #165dff 33%,
            #ffffff 33%,
            #ffffff 66%,
            #ef3340 66%,
            #ef3340 100%
        ) !important;

    border: 0 !important;
    box-shadow: none !important;

    clip-path: polygon(
        45% 0%,
        59% 4%,
        67% 11%,
        79% 15%,
        90% 25%,
        87% 36%,
        94% 47%,
        88% 57%,
        92% 68%,
        82% 77%,
        76% 90%,
        64% 87%,
        54% 100%,
        44% 91%,
        31% 92%,
        27% 80%,
        17% 72%,
        21% 61%,
        10% 51%,
        18% 41%,
        12% 30%,
        25% 25%,
        30% 14%,
        40% 11%
    ) !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.55))
        drop-shadow(0 0 10px rgba(8,216,239,.18)) !important;
}

/* Les anciens éléments internes ne doivent rien afficher */
html body .hero .france-map span,
html body .hero .france-map::before,
html body .hero .france-map::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Empêche toute image/étiquette héritée */
html body .hero .slc-france-icon img,
html body .hero .slc-france-icon svg,
html body .hero .slc-france-icon label {
    display: none !important;
}


/* =========================================================
   SLC — CARTE FRANCE — CORRECTION FINALE
   ========================================================= */

html body .hero .slc-france-icon .france-map {
    display: block !important;
    position: relative !important;

    width: 48px !important;
    height: 58px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    background: linear-gradient(
        90deg,
        #165DFF 0%,
        #165DFF 33.333%,
        #FFFFFF 33.333%,
        #FFFFFF 66.666%,
        #EF3340 66.666%,
        #EF3340 100%
    ) !important;

    border: 0 !important;
    box-shadow:
        0 0 8px rgba(8,216,239,.35) !important;

    -webkit-clip-path: polygon(
        43% 0%,
        57% 4%,
        66% 11%,
        79% 15%,
        91% 25%,
        87% 36%,
        94% 47%,
        87% 57%,
        92% 68%,
        82% 77%,
        76% 90%,
        64% 87%,
        54% 100%,
        44% 91%,
        31% 92%,
        27% 80%,
        17% 72%,
        21% 61%,
        10% 51%,
        18% 41%,
        12% 30%,
        25% 25%,
        30% 14%,
        40% 11%
    ) !important;

    clip-path: polygon(
        43% 0%,
        57% 4%,
        66% 11%,
        79% 15%,
        91% 25%,
        87% 36%,
        94% 47%,
        87% 57%,
        92% 68%,
        82% 77%,
        76% 90%,
        64% 87%,
        54% 100%,
        44% 91%,
        31% 92%,
        27% 80%,
        17% 72%,
        21% 61%,
        10% 51%,
        18% 41%,
        12% 30%,
        25% 25%,
        30% 14%,
        40% 11%
    ) !important;
}

/* Aucun ancien élément ne doit masquer la carte */
html body .hero .slc-france-icon .france-blue,
html body .hero .slc-france-icon .france-white,
html body .hero .slc-france-icon .france-red {
    display: none !important;
}

/* On conserve uniquement la carte, sans texte */
html body .hero .slc-france-icon {
    font-size: 0 !important;
}

html body .hero .slc-france-icon .france-map {
    font-size: initial !important;
}


/* =========================================================
   SLC — CARTE FRANCE PROPRE — SANS TEXTE
   ========================================================= */

html body .hero .slc-france-icon {
    width: 70px !important;
    height: 70px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

html body .hero .slc-france-icon .france-map-silhouette {
    display: block !important;

    width: 58px !important;
    height: 58px !important;

    object-fit: contain !important;
    object-position: center top !important;

    /* Supprime uniquement la partie basse
       contenant le petit texte "France" */
    clip-path: inset(0 0 12px 0) !important;

    filter:
        drop-shadow(0 0 5px rgba(8,216,239,.40)) !important;
}

/* =========================================================
   SLC — HERO CTA — VERSION REFERENCE
   ========================================================= */

html body .hero .slc-hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;

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

    margin: 42px auto 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

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

html body .hero .slc-hero-actions > a.button {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    align-items: center !important;

    flex: 0 0 474px !important;

    width: 474px !important;
    min-width: 474px !important;
    max-width: 474px !important;

    height: 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;

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

    background: linear-gradient(
        135deg,
        #12d9aa,
        #0fc59b
    ) !important;

    color: #fff !important;

    box-shadow:
        0 0 14px rgba(8,216,239,.55),
        0 12px 30px rgba(0,0,0,.25) !important;

    text-decoration: none !important;
}

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

html body .hero .slc-hero-actions > a.button-secondary {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;

    flex: 0 0 392px !important;

    width: 392px !important;
    min-width: 392px !important;
    max-width: 392px !important;

    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 18px !important;
    border: 2px solid rgba(225,238,248,.88) !important;

    background: rgba(3,24,47,.25) !important;

    color: #fff !important;

    box-shadow: none !important;

    text-decoration: none !important;
}

/* =========================
   ICÔNES
   ========================= */

html body .hero .slc-hero-actions .slc-cta-icon,
html body .hero .slc-hero-actions .slc-cta-arrow,
html body .hero .slc-hero-actions .slc-cta-play {
    position: static !important;

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

    width: 58px !important;
    height: 58px !important;

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

    margin: 0 !important;

    box-sizing: border-box !important;
    border-radius: 50% !important;
}

/* Diamant */

html body .hero .slc-hero-actions .slc-cta-icon {
    background: rgba(0,105,125,.72) !important;
    font-size: 23px !important;
}

/* Flèche */

html body .hero .slc-hero-actions .slc-cta-arrow {
    background: rgba(0,105,125,.72) !important;
    font-size: 34px !important;
}

/* Play */

html body .hero .slc-hero-actions .slc-cta-play {
    background: transparent !important;
    border: 2px solid rgba(235,245,255,.95) !important;
    font-size: 20px !important;
}

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

html body .hero .slc-hero-actions .slc-cta-label {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    color: #fff !important;

    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

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

html body .hero .slc-hero-actions > a.button:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 0 22px rgba(8,216,239,.70),
        0 14px 34px rgba(0,0,0,.30) !important;
}

html body .hero .slc-hero-actions > a.button-secondary:hover {
    transform: translateY(-3px) !important;
    background: rgba(15,65,90,.30) !important;
}

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

@media (max-width: 900px) {

    html body .hero .slc-hero-actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;

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

        gap: 14px !important;

        margin: 40px auto 0 !important;
    }

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        flex: 0 0 auto !important;

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

        box-sizing: border-box !important;
    }

    html body .hero .slc-hero-actions > a.button {
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;

        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;

        padding: 0 10px !important;
    }

    html body .hero .slc-hero-actions > a.button-secondary {
        grid-template-columns: 46px minmax(0, 1fr) !important;

        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;

        padding: 0 10px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-icon,
    html body .hero .slc-hero-actions .slc-cta-arrow,
    html body .hero .slc-hero-actions .slc-cta-play {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 18px !important;
        line-height: 1.1 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Très petits écrans */

@media (max-width: 360px) {

    html body .hero .slc-hero-actions {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        gap: 10px !important;
    }

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 16px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-icon,
    html body .hero .slc-hero-actions .slc-cta-arrow,
    html body .hero .slc-hero-actions .slc-cta-play {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;
    }

    html body .hero .slc-hero-actions > a.button {
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    }

    html body .hero .slc-hero-actions > a.button-secondary {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }
}

/* =========================================================
   SLC — MENU MOBILE — FIX DIRECT
   ========================================================= */

@media (max-width: 900px) {

    html body header.slc-site-header {
        position: relative !important;
        z-index: 10000 !important;
    }

    html body header.slc-site-header .slc-menu-button {
        position: relative !important;
        z-index: 10002 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    html body header.slc-site-header .slc-main-nav.slc-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10001 !important;
    }
}

/* =========================================================
   SLC — MENU MOBILE — ALIGNEMENT GAUCHE FINAL
   ========================================================= */

@media (max-width: 900px) {

    html body header.slc-site-header .slc-main-nav.slc-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        text-align: left !important;

        padding: 12px !important;
        gap: 2px !important;
    }

    html body header.slc-site-header .slc-main-nav.slc-open > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        box-sizing: border-box !important;

        text-align: left !important;
        white-space: nowrap !important;

        padding: 10px 14px !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-main-nav.slc-open > a.slc-mobile-order {
        justify-content: center !important;
        text-align: center !important;
    }
}


/* =========================================================
   SLC — AJUSTEMENT FINAL HERO
   Titre légèrement réduit + suppression du losange
   ========================================================= */

/* Titre desktop : légèrement moins massif */
html body .hero h1 {
    font-size: 64px !important;
}

/* Suppression du losange HTML */
html body .hero .slc-hero-actions .slc-cta-icon {
    display: none !important;
}

/* Le CTA principal se recentre sans colonne réservée au losange */
html body .hero .slc-hero-actions > a.button {
    grid-template-columns: minmax(0, 1fr) 58px !important;
}

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

    html body .hero h1 {
        font-size: 42px !important;
    }

    html body .hero .slc-hero-actions > a.button {
        grid-template-columns: minmax(0, 1fr) 54px !important;
    }
}


/* =========================================================
   SLC — TRUST HERO FINAL
   Bandeau des 3 engagements plus compact
   ========================================================= */

@media (min-width: 1001px) {

    html body .slc-hero-trust {
        margin-top: 28px !important;
    }

    html body .slc-hero-trust-item {
        min-height: 68px !important;
        gap: 14px !important;
        padding: 0 18px !important;
    }

    html body .slc-hero-trust-icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        flex-basis: 62px !important;
    }

    html body .slc-hero-trust-icon svg {
        width: 27px !important;
        height: 27px !important;
    }

    html body .slc-hero-trust-title {
        font-size: 18px !important;
        margin-bottom: 3px !important;
    }

    html body .slc-hero-trust-subtitle {
        font-size: 14px !important;
    }

    html body .hero {
        padding-bottom: 30px !important;
    }
}


/* =========================================================
   SLC — TRUST HERO FINAL
   Bandeau des 3 engagements plus compact
   ========================================================= */

@media (min-width: 1001px) {

    html body .slc-hero-trust {
        margin-top: 28px !important;
    }

    html body .slc-hero-trust-item {
        min-height: 68px !important;
        gap: 14px !important;
        padding: 0 18px !important;
    }

    html body .slc-hero-trust-icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        flex-basis: 62px !important;
    }

    html body .slc-hero-trust-icon svg {
        width: 27px !important;
        height: 27px !important;
    }

    html body .slc-hero-trust-title {
        font-size: 18px !important;
        margin-bottom: 3px !important;
    }

    html body .slc-hero-trust-subtitle {
        font-size: 14px !important;
    }

    html body .hero {
        padding-bottom: 30px !important;
    }
}


/* =========================================================
   SLC — TITRE + CTA — REDUCTION FINALE DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    /* TITRE PRINCIPAL */
    html body .hero h1 {
        font-size: 70px !important;
        line-height: 1.02 !important;
    }

    html body .hero h1 .hero-accent {
        font-size: 70px !important;
    }

    /* TEXTE DESCRIPTIF */
    html body .hero > .hero-content > p {
        font-size: 20px !important;
        line-height: 1.55 !important;
    }

    /* CTA */
    html body .hero .slc-hero-actions > a.button {
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
    }

    html body .hero .slc-hero-actions > a.button-secondary {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
    }

    /* Texte CTA */
    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 24px !important;
    }

}


/* =========================================================
   SLC — TITRE + CTA — REDUCTION FINALE DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    /* TITRE PRINCIPAL */
    html body .hero h1 {
        font-size: 70px !important;
        line-height: 1.02 !important;
    }

    html body .hero h1 .hero-accent {
        font-size: 70px !important;
    }

    /* TEXTE DESCRIPTIF */
    html body .hero > .hero-content > p {
        font-size: 20px !important;
        line-height: 1.55 !important;
    }

    /* CTA */
    html body .hero .slc-hero-actions > a.button {
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
    }

    html body .hero .slc-hero-actions > a.button-secondary {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
    }

    /* Texte CTA */
    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 24px !important;
    }

}


/* =========================================================
   SLC — CORRECTION TAILLE TITRE + CTA
   ========================================================= */

@media (min-width: 901px) {

    html body .hero h1,
    html body .hero h1 .hero-accent {
        font-size: 54px !important;
        line-height: 1.05 !important;
    }

    html body .hero > .hero-content > p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    html body .hero .slc-hero-actions > a.button {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }

    html body .hero .slc-hero-actions > a.button-secondary {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 20px !important;
    }

}


/* =========================================================
   SLC — HERO — SUPPRESSION ESPACE VIDE BAS
   ========================================================= */

@media (min-width: 901px) {

    html body .hero {
        min-height: 560px !important;
        padding-bottom: 18px !important;
    }

}


/* =========================================================
   SLC — TRUST — POSITION FINALE
   Descend les 3 engagements et ferme l'espace inférieur
   ========================================================= */

@media (min-width: 1001px) {

    html body .slc-hero-trust {
        margin-top: 63px !important;
    }

    html body .hero {
        padding-bottom: 0 !important;
    }

}


/* =========================================================
   SLC — HERO FINAL
   Les engagements ne sont pas affichés dans le Hero
   Le menu supérieur reste inchangé
   ========================================================= */

html body .hero .slc-hero-trust {
    display: none !important;
}


/* =========================================================
   SLC — HERO FINAL
   Les engagements ne sont pas affichés dans le Hero
   Le menu supérieur reste inchangé
   ========================================================= */

html body .hero .slc-hero-trust {
    display: none !important;
}


/* =========================================================
   SLC — HEADER DESKTOP — UNE SEULE LIGNE
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        width: calc(100% - 48px) !important;
        max-width: 1540px !important;
    }

    html body header.slc-site-header .slc-brand {
        flex: 0 0 285px !important;
        width: 285px !important;
        max-width: 285px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 285px !important;
        max-width: 285px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: auto !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        padding: 0 2px !important;
    }

    html body header.slc-site-header .slc-order-button {
        display: inline-flex !important;
        flex: 0 0 190px !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-menu-button {
        display: none !important;
    }
}

/* Écrans intermédiaires */
@media (min-width: 901px) and (max-width: 1250px) {

    html body header.slc-site-header .slc-header-inner {
        gap: 14px !important;
    }

    html body header.slc-site-header .slc-brand,
    html body header.slc-site-header .slc-brand img {
        width: 220px !important;
        max-width: 220px !important;
        flex-basis: 220px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 4px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 12px !important;
    }

    html body header.slc-site-header .slc-order-button {
        flex-basis: 155px !important;
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   SLC — HEADER DESKTOP — UNE SEULE LIGNE
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        width: calc(100% - 48px) !important;
        max-width: 1540px !important;
    }

    html body header.slc-site-header .slc-brand {
        flex: 0 0 285px !important;
        width: 285px !important;
        max-width: 285px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 285px !important;
        max-width: 285px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: auto !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        padding: 0 2px !important;
    }

    html body header.slc-site-header .slc-order-button {
        display: inline-flex !important;
        flex: 0 0 190px !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-menu-button {
        display: none !important;
    }
}

/* Écrans intermédiaires */
@media (min-width: 901px) and (max-width: 1250px) {

    html body header.slc-site-header .slc-header-inner {
        gap: 14px !important;
    }

    html body header.slc-site-header .slc-brand,
    html body header.slc-site-header .slc-brand img {
        width: 220px !important;
        max-width: 220px !important;
        flex-basis: 220px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 4px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 12px !important;
    }

    html body header.slc-site-header .slc-order-button {
        flex-basis: 155px !important;
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   SLC — ENGAGEMENTS HERO
   Uniquement sur la page principale
   ========================================================= */

html body.slc-home .slc-hero-trust {
    display: flex !important;
}

/* Les autres pages ne doivent pas afficher les engagements */
html body:not(.slc-home) .slc-hero-trust {
    display: none !important;
}


/* =========================================================
   SLC — TRUST HERO
   3 engagements centrés et espacés
   ========================================================= */

@media (min-width: 1001px) {

    html body .hero .slc-hero-trust {
        width: min(100% - 120px, 1350px) !important;
        margin: 32px auto 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: start !important;
        justify-content: center !important;

        gap: 55px !important;
    }

    html body .hero .slc-hero-trust-item {
        min-height: 100px !important;

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

        gap: 10px !important;
        padding: 0 20px !important;

        text-align: center !important;
    }

    html body .hero .slc-hero-trust-icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        flex: 0 0 62px !important;

        margin: 0 auto !important;
    }

    html body .hero .slc-hero-trust-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    html body .hero .slc-hero-trust-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 0 0 3px !important;
        text-align: center !important;
    }

    html body .hero .slc-hero-trust-subtitle {
        font-size: 14px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Séparateurs verticaux entre les 3 engagements */
    html body .hero .slc-hero-trust-item:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,.35) !important;
    }
}


/* =========================================================
   SLC — ESPACE CONTACT / COMMANDER
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        column-gap: 34px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        padding-right: 12px !important;
    }

    html body header.slc-site-header .slc-order-button {
        margin-left: 8px !important;
    }
}


/* =========================================================
   SLC — BOUTON COMMANDER — CONTOUR PLUS FIN
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-order-button {
        border: 1px solid rgba(85,232,245,.45) !important;
        box-shadow:
            0 6px 18px rgba(0,130,190,.16),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

}


/* =========================================================
   SLC — ESPACEMENT CONTACT / COMMANDER
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-main-nav {
        padding-right: 28px !important;
    }

    html body header.slc-site-header .slc-order-button {
        margin-left: 18px !important;
    }

}


/* =========================================================
   SLC — HEADER DESKTOP — COMMANDER PLUS COMPACT
   Contact + Commander sur une seule ligne
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        align-items: center !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-buy-button,
    html body header.slc-site-header .buy-button {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        padding: 0 20px !important;
        font-size: 20px !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   SLC — HEADER FINAL
   Contact + Commander sur la même ligne
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 300px minmax(0, 1fr) 175px !important;
        column-gap: 20px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        gap: 20px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-order-button {
        min-width: 175px !important;
        width: 175px !important;
        max-width: 175px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        gap: 7px !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 19px !important;
    }
}


/* =========================================================
   SLC — CONTACT + COMMANDER — ALIGNEMENT FINAL
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 300px minmax(0, 1fr) 160px !important;
        column-gap: 16px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    html body header.slc-site-header .slc-order-button {
        grid-column: 3 !important;

        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;

        height: 54px !important;
        padding: 0 10px !important;

        gap: 6px !important;
        font-size: 16px !important;

        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 18px !important;
    }
}


/* =========================================================
   SLC — HEADER — ALIGNEMENT FINAL
   Logo | Menu complet | Contact | Commander
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 320px minmax(0, 1fr) 160px !important;
        column-gap: 16px !important;
        align-items: center !important;
    }

    /* Logo : légèrement plus compact */
    html body header.slc-site-header .slc-brand {
        width: 320px !important;
        max-width: 320px !important;
        display: flex !important;
        align-items: center !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 300px !important;
        max-width: 300px !important;
        height: auto !important;
        display: block !important;
    }

    /* Menu : une seule ligne */
    html body header.slc-site-header .slc-main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 13px !important;
        min-width: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    /* Commander */
    html body header.slc-site-header .slc-order-button {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 54px !important;
        padding: 0 9px !important;
        margin: 0 !important;
        gap: 6px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 18px !important;
    }
}


/* =========================================================
   SLC — HEADER FINAL
   Logo compact + menu aligné + Commander compact
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 285px minmax(0, 1fr) 180px !important;
        column-gap: 12px !important;
        align-items: center !important;
    }

    /* LOGO */
    html body header.slc-site-header .slc-brand {
        width: 285px !important;
        max-width: 285px !important;
        display: flex !important;
        align-items: center !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 270px !important;
        max-width: 270px !important;
        height: auto !important;
        display: block !important;
    }

    /* MENU */
    html body header.slc-site-header .slc-main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 11px !important;
        min-width: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    /* CONTACT */
    html body header.slc-site-header .slc-main-nav a[href="/contact"] {
        margin-left: 2px !important;
    }

    /* COMMANDER */
    html body header.slc-site-header .slc-order-button {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        box-sizing: border-box !important;

        height: 54px !important;
        padding: 0 10px !important;
        margin: 0 !important;

        gap: 6px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 18px !important;
    }
}


/* =========================================================
   SLC — CORRECTION FINALE LOGO / MENU
   Empêche tout chevauchement
   ========================================================= */

@media (min-width: 1001px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns: 255px minmax(0, 1fr) 180px !important;
        column-gap: 18px !important;
    }

    /* LOGO PLUS COMPACT */
    html body header.slc-site-header .slc-brand {
        width: 255px !important;
        max-width: 255px !important;
        overflow: hidden !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 245px !important;
        max-width: 245px !important;
        height: auto !important;
    }

    /* MENU : toujours après le logo */
    html body header.slc-site-header .slc-main-nav {
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    /* COMMANDER */
    html body header.slc-site-header .slc-order-button {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        height: 54px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        font-size: 16px !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

}


/* =========================================================
   SLC — FINAL HEADER + HERO DESKTOP
   Correction des règles précédentes qui se chevauchent
   ========================================================= */

@media (min-width: 1001px) {

    /* =====================================================
       HEADER — UNE SEULE LIGNE
       ===================================================== */

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 70px) !important;
        max-width: 1600px !important;

        display: grid !important;
        grid-template-columns: 235px minmax(0, 1fr) 170px !important;

        column-gap: 14px !important;
        align-items: center !important;
    }

    /* LOGO */
    html body header.slc-site-header .slc-brand {
        width: 235px !important;
        max-width: 235px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 225px !important;
        max-width: 225px !important;
        height: auto !important;
    }

    /* MENU */
    html body header.slc-site-header .slc-main-nav {
        min-width: 0 !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 8px !important;
        padding: 0 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 2px 3px !important;
    }

    /* CONTACT : reste dans le menu */
    html body header.slc-site-header .slc-main-nav a[href="/contact"] {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* COMMANDER */
    html body header.slc-site-header .slc-order-button {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;

        height: 52px !important;
        padding: 0 8px !important;

        margin: 0 !important;

        font-size: 16px !important;
        gap: 5px !important;

        white-space: nowrap !important;
        flex: 0 0 170px !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 18px !important;
    }


    /* =====================================================
       HERO — TITRE PLUS COMPACT
       ===================================================== */

    html body.slc-home .hero h1 {
        font-size: 56px !important;
        line-height: 1.05 !important;

        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    html body.slc-home .hero h1 span,
    html body.slc-home .hero h1 .hero-accent {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* DESCRIPTION */
    html body.slc-home .hero p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       HERO — DEUX BOUTONS PLUS PETITS
       ===================================================== */

    html body.slc-home .hero .hero-actions {
        gap: 20px !important;
        margin-top: 26px !important;
    }

    html body.slc-home .hero .hero-actions a,
    html body.slc-home .hero .hero-actions button {
        min-height: 78px !important;
        height: 78px !important;

        font-size: 20px !important;
    }


    /* =====================================================
       3 ENGAGEMENTS — PAGE PRINCIPALE UNIQUEMENT
       ===================================================== */

    html body.slc-home .hero .slc-hero-trust {
        width: min(100% - 100px, 1350px) !important;

        margin: 28px auto 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;

        gap: 42px !important;

        align-items: start !important;
        justify-content: center !important;
    }

    html body.slc-home .hero .slc-hero-trust-item {
        min-height: 90px !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 8px !important;
        padding: 0 12px !important;

        text-align: center !important;
    }

    html body.slc-home .hero .slc-hero-trust-icon {
        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        flex: 0 0 58px !important;

        margin: 0 auto !important;
    }

    html body.slc-home .hero .slc-hero-trust-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    html body.slc-home .hero .slc-hero-trust-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        text-align: center !important;
    }

    html body.slc-home .hero .slc-hero-trust-title {
        font-size: 17px !important;
        line-height: 1.2 !important;

        margin: 0 0 2px !important;

        text-align: center !important;
    }

    html body.slc-home .hero .slc-hero-trust-subtitle {
        font-size: 13px !important;
        line-height: 1.25 !important;

        text-align: center !important;
    }

    /* Séparateurs */
    html body.slc-home .hero .slc-hero-trust-item:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,.30) !important;
    }

}


/* =========================================================
   CORRECTION MOBILE — MENU ET COMMANDER MEME TAILLE
   ========================================================= */

@media (max-width: 900px) {

    html body header.slc-site-header .slc-menu-button,
    html body header.slc-site-header .slc-order-button {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        box-sizing: border-box !important;

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

        border-radius: 12px !important;
    }

    html body header.slc-site-header .slc-order-button {
        font-size: 0 !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 21px !important;
    }
}


/* =========================================================
   MOBILE PRO — HEADER COMPACT
   ========================================================= */

@media (max-width: 900px) {

    .slc-site-header .slc-header-inner {
        min-height: 96px;
        width: calc(100% - 24px);
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 12px;
    }

    .slc-site-header .slc-brand img {
        width: 220px;
        max-width: 100%;
    }

    .slc-site-header .slc-menu-button,
    .slc-site-header .slc-order-button {
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        border-radius: 12px;
    }

    .slc-site-header .slc-order-button {
        font-size: 0;
    }

    .slc-site-header .slc-menu-button {
        display: inline-flex;
    }

    .slc-site-header .slc-order-icon {
        font-size: 21px;
    }
}

@media (max-width: 560px) {

    .slc-site-header .slc-header-inner {
        min-height: 90px;
        width: calc(100% - 18px);
        column-gap: 10px;
    }

    .slc-site-header .slc-brand img {
        width: 205px;
    }

    .slc-site-header .slc-menu-button,
    .slc-site-header .slc-order-button {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }
}

/* =========================================================
   SILENT LINK CARE — MOBILE FINAL
   Logo gauche / boutons droite / header compact
   ========================================================= */

@media (max-width: 900px) {

    html body header.slc-site-header {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 22px) !important;
        min-height: 90px !important;
        height: 90px !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        column-gap: 12px !important;

        padding: 0 !important;
    }

    /* LOGO TOUJOURS À GAUCHE */
    html body header.slc-site-header .slc-brand {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

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

    html body header.slc-site-header .slc-brand img {
        display: block !important;
        width: 220px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* MENU À DROITE */
    html body header.slc-site-header .slc-menu-button {
        display: inline-flex !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

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

    /* PANIER À DROITE */
    html body header.slc-site-header .slc-order-button {
        display: inline-flex !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        border-radius: 12px !important;
        font-size: 0 !important;
    }

    html body header.slc-site-header .slc-order-icon {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    /* NAVIGATION DÉROULANTE */
    html body header.slc-site-header .slc-main-nav {
        display: none !important;
    }

    html body header.slc-site-header .slc-main-nav.slc-open {
        display: flex !important;
    }
}

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

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 22px) !important;
        min-height: 82px !important;
        height: 82px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 205px !important;
    }

    html body header.slc-site-header .slc-menu-button,
    html body header.slc-site-header .slc-order-button {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}


/* =========================================================
   SILENT LINK CARE — HERO PC
   Boutons compacts — override final
   Mobile NON TOUCHÉ
   ========================================================= */

@media (min-width: 901px) {

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body .hero .slc-hero-actions {
        gap: 22px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 15px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-arrow {
        font-size: 25px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-play {
        font-size: 17px !important;
    }
}


/* =========================================================
   SILENT LINK CARE — CTA HERO COMPACTS
   PC uniquement — mobile inchangé
   ========================================================= */

@media (min-width: 901px) {

    html body .hero .slc-hero-actions {
        gap: 18px !important;
    }

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        flex: 0 0 240px !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html body .hero .slc-hero-actions .slc-cta-arrow {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 23px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-play {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 16px !important;
    }
}


/* =========================================================
   SILENT LINK CARE — FINITION CTA HERO
   PC uniquement — dimensions conservées
   ========================================================= */

@media (min-width: 901px) {

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        font-size: 13.5px !important;
        line-height: 1 !important;
    }

    html body .hero .slc-hero-actions .slc-cta-arrow,
    html body .hero .slc-hero-actions .slc-cta-play {
        flex-shrink: 0 !important;
    }
}


/* =========================================================
   SILENT LINK CARE — CTA HERO FINAL
   PC uniquement
   ========================================================= */

@media (min-width: 901px) {

    html body .hero .slc-hero-actions {
        gap: 18px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    html body .hero .slc-hero-actions > a.button,
    html body .hero .slc-hero-actions > a.button-secondary {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

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

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body .hero .slc-hero-actions .slc-cta-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    html body .hero .slc-hero-actions .slc-cta-arrow,
    html body .hero .slc-hero-actions .slc-cta-play {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    html body .hero .slc-hero-actions .slc-cta-arrow {
        font-size: 22px !important;
    }

    html body .hero .slc-hero-actions .slc-cta-play {
        font-size: 15px !important;
    }
}


/* =========================================================
   SLC — AJUSTEMENT HEADER DESKTOP AVEC ESPACE CLIENT
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        width: min(100% - 36px, 1560px) !important;
        gap: 18px !important;
    }

    html body header.slc-site-header .slc-brand {
        width: 250px !important;
        max-width: 250px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 250px !important;
        max-width: 250px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 18px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 15px !important;
    }

    html body header.slc-site-header .slc-order-button {
        min-width: 180px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (min-width: 901px) and (max-width: 1250px) {

    html body header.slc-site-header .slc-brand {
        width: 210px !important;
        max-width: 210px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 210px !important;
        max-width: 210px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 12px !important;
    }

    html body header.slc-site-header .slc-main-nav a {
        font-size: 13px !important;
    }

    html body header.slc-site-header .slc-order-button {
        min-width: 155px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   SLC — ACTIONS HEADER DESKTOP
   Commander + Espace client verticalement
   Mobile inchangé
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-mobile-client {
        display: none !important;
    }

    html body header.slc-site-header .slc-header-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    html body header.slc-site-header .slc-header-actions .slc-order-button {
        margin-left: 0 !important;
    }

    html body header.slc-site-header .slc-desktop-client {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 34px !important;
        padding: 5px 12px !important;

        color: #f5f7fb !important;
        text-decoration: none !important;
        white-space: nowrap !important;

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

        font-size: 14px !important;
        font-weight: 600 !important;

        background: rgba(255,255,255,.025) !important;
    }

    html body header.slc-site-header .slc-desktop-client:hover {
        color: #55e8f5 !important;
        border-color: rgba(85,232,245,.65) !important;
        background: rgba(85,232,245,.06) !important;
    }
}

@media (max-width: 900px) {

    html body header.slc-site-header .slc-header-actions {
        display: contents !important;
    }

    html body header.slc-site-header .slc-desktop-client {
        display: none !important;
    }

    html body header.slc-site-header .slc-mobile-client {
        display: inline-flex !important;
    }
}

/* =========================================================
   CORRECTIF FINAL ESPACE CLIENT
   Mobile : uniquement dans le menu hamburger
   Desktop : uniquement sous Commander
   ========================================================= */

/* Par défaut, le bouton desktop est caché */
html body header.slc-site-header a.slc-desktop-client {
    display: none !important;
}

/* DESKTOP */
@media (min-width: 901px) {

    html body header.slc-site-header .slc-mobile-client {
        display: none !important;
    }

    html body header.slc-site-header .slc-header-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    html body header.slc-site-header a.slc-desktop-client {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

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

    html body header.slc-site-header a.slc-desktop-client {
        display: none !important;
    }

    html body header.slc-site-header .slc-mobile-client {
        display: inline-flex !important;
    }

    html body header.slc-site-header .slc-header-actions {
        display: contents !important;
    }
}

/* =========================================================
   AJUSTEMENT PC — COMMANDER + ESPACE CLIENT
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    html body header.slc-site-header .slc-header-actions .slc-order-button {
        width: auto !important;
        min-width: 205px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

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

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

        font-size: 16px !important;
        border-radius: 18px !important;
    }

    html body header.slc-site-header .slc-header-actions .slc-order-icon {
        font-size: 18px !important;
        margin-right: 8px !important;
    }

    html body header.slc-site-header .slc-header-actions .slc-desktop-client {
        min-height: 38px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
}

/* =========================================================
   AJUSTEMENT FINAL PC — ESPACE LOGO / MENU
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-inner {
        gap: 20px !important;
    }

    html body header.slc-site-header .slc-brand {
        flex: 0 0 270px !important;
        width: 270px !important;
        max-width: 270px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 255px !important;
        max-width: 255px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 24px !important;
    }
}

/* =========================================================
   SLC — ACTIONS HEADER PC COMPACTES
   Commander + Espace client : même taille
   Mobile totalement inchangé
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-header-actions {
        flex: 0 0 190px !important;
        width: 190px !important;

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

        gap: 8px !important;
        margin-left: auto !important;
    }

    /* COMMANDER */
    html body header.slc-site-header
    .slc-header-actions .slc-order-button {

        box-sizing: border-box !important;

        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

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

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

        gap: 8px !important;

        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        white-space: nowrap !important;
        border-radius: 12px !important;
    }

    html body header.slc-site-header
    .slc-header-actions .slc-order-icon {

        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1 !important;
    }

    /* ESPACE CLIENT */
    html body header.slc-site-header
    .slc-header-actions .slc-desktop-client {

        box-sizing: border-box !important;

        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

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

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

        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        white-space: nowrap !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   SLC — HEADER PC FINAL
   Plus d'espace logo/menu
   Boutons droite plus petits et identiques
   Mobile inchangé
   ========================================================= */

@media (min-width: 901px) {

    /* Plus d'espace entre logo et premier lien */
    html body header.slc-site-header .slc-brand {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 260px !important;
        max-width: 260px !important;
    }

    html body header.slc-site-header .slc-header-inner {
        gap: 26px !important;
    }

    /* Menu un peu plus compact */
    html body header.slc-site-header .slc-main-nav {
        gap: 20px !important;
    }

    html body header.slc-site-header .slc-main-nav > a {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    /* Colonne boutons de droite */
    html body header.slc-site-header .slc-header-actions {
        flex: 0 0 165px !important;
        width: 165px !important;
        max-width: 165px !important;

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

        gap: 7px !important;
        margin-left: auto !important;
    }

    /* Commander */
    html body header.slc-site-header
    .slc-header-actions .slc-order-button {

        box-sizing: border-box !important;

        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

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

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

        gap: 7px !important;

        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        border-radius: 11px !important;
        white-space: nowrap !important;
    }

    html body header.slc-site-header
    .slc-header-actions .slc-order-icon {

        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    /* Espace client */
    html body header.slc-site-header
    .slc-header-actions .slc-desktop-client {

        box-sizing: border-box !important;

        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

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

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

        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        border-radius: 11px !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   HOME PC — ESPACE LOGO / FONCTIONNEMENT
   Uniquement index.html
   Mobile inchangé
   ========================================================= */

@media (min-width: 901px) {

    html body.slc-home-page header.slc-site-header .slc-header-inner {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
    }

    html body.slc-home-page header.slc-site-header .slc-brand {
        flex: 0 0 330px !important;
        width: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        margin: 0 !important;
    }

    html body.slc-home-page header.slc-site-header .slc-brand img {
        width: 260px !important;
        max-width: 260px !important;
        height: auto !important;
    }

    html body.slc-home-page header.slc-site-header .slc-main-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 10px !important;
        gap: 18px !important;
    }

    html body.slc-home-page header.slc-site-header .slc-main-nav > a {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html body.slc-home-page header.slc-site-header .slc-header-actions {
        flex: 0 0 165px !important;
        width: 165px !important;
        margin-left: auto !important;
    }
}


/* =========================================================
   HOME PC — POSITION LOGO COMME NOTRE HISTOIRE
   Uniquement page principale
   Mobile inchangé
   ========================================================= */

@media (min-width: 901px) {

    html body.slc-home-page header.slc-site-header .slc-header-inner {
        width: min(1500px, calc(100% - 56px)) !important;
        margin: 0 auto !important;
    }

    html body.slc-home-page header.slc-site-header .slc-brand {
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        margin: 0 !important;
    }

    html body.slc-home-page header.slc-site-header .slc-brand img {
        width: 220px !important;
        max-width: 220px !important;
        height: auto !important;
        display: block !important;
    }

    html body.slc-home-page header.slc-site-header .slc-main-nav {
        margin-left: 34px !important;
    }
}


/* =========================================================
   SLC — ENGAGEMENTS HERO MOBILE — 3 COLONNES
   Desktop inchangé
   ========================================================= */
@media (max-width: 600px) {

    html body.slc-home .hero .slc-hero-trust {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 34px auto 0 !important;
        align-items: start !important;
    }

    html body.slc-home .hero .slc-hero-trust-item {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        text-align: center !important;
        border-top: 0 !important;
    }

    html body.slc-home .hero .slc-hero-trust-item + .slc-hero-trust-item {
        border-top: 0 !important;
        padding-top: 0 !important;
    }

    html body.slc-home .hero .slc-hero-trust-item:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,.28) !important;
    }

    html body.slc-home .hero .slc-hero-trust-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        flex: 0 0 52px !important;
        margin: 0 auto !important;
    }

    html body.slc-home .hero .slc-hero-trust-icon svg {
        width: 23px !important;
        height: 23px !important;
    }

    html body.slc-home .hero .slc-hero-trust-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    html body.slc-home .hero .slc-hero-trust-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin: 0 0 3px !important;
        text-align: center !important;
    }

    html body.slc-home .hero .slc-hero-trust-subtitle {
        font-size: 11px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}