/* ============================================================
   EMSOGRO WIFICONTROL — WORLD CLASS LIGHT V1
   ============================================================ */

:root {
    --navy-950: #071a2d;
    --navy-900: #0b243d;
    --navy-800: #123b5d;
    --navy-700: #1a5276;

    --blue: #2563eb;
    --blue-light: #eaf2ff;

    --green: #0d9f6e;
    --green-dark: #087f59;
    --green-light: #e8f8f1;

    --gold: #f3ad32;
    --orange: #e97c35;

    --ink: #102a43;
    --text: #334e68;
    --muted: #627d98;

    --white: #ffffff;
    --paper: #f7fafc;
    --paper-blue: #f2f7fb;
    --border: #dce8f0;

    --shadow-sm: 0 8px 24px rgba(15, 45, 70, .08);
    --shadow-md: 0 18px 50px rgba(15, 45, 70, .12);
    --shadow-lg: 0 30px 80px rgba(15, 45, 70, .16);

    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 32px;

    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(18, 59, 93, .10);
    box-shadow: 0 8px 30px rgba(15, 45, 70, .05);
}

.header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    flex: 0 0 auto;
}

.brand img {
    width: 220px;
    height: auto;
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
}

.desktop-nav a {
    padding: 11px 13px;
    border-radius: 11px;
    color: var(--navy-900);
    font-size: 14px;
    font-weight: 750;
    transition: .22s ease;
}

.desktop-nav a:hover {
    background: var(--paper-blue);
    color: var(--green-dark);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-login {
    padding: 11px 17px;
    border: 1px solid #bfd0dd;
    border-radius: 12px;
    background: var(--white);
    color: var(--navy-900);
    font-weight: 800;
    font-size: 14px;
}

.nav-signup {
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: white;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 25px rgba(13, 159, 110, .22);
}

.mobile-nav {
    display: none;
}

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

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 87% 15%,
            rgba(37, 99, 235, .12),
            transparent 29%
        ),
        radial-gradient(
            circle at 5% 82%,
            rgba(13, 159, 110, .12),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 50%,
            #f0f9f5 100%
        );
    border-bottom: 1px solid var(--border);
}

.hero::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .10),
            rgba(13, 159, 110, .08)
        );
    filter: blur(2px);
}

.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 690px;
    padding: 84px 0 76px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: center;
    gap: 72px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(13, 159, 110, .11);
}

.hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--navy-950);
    font-size: clamp(48px, 5vw, 76px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 900;
}

.hero h1 .accent {
    color: var(--green);
}

.hero-lead {
    max-width: 690px;
    margin: 28px 0 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.72;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 32px;
}

.btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 850;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: white;
    background:
        linear-gradient(
            135deg,
            var(--green) 0%,
            #07916d 52%,
            var(--blue) 140%
        );
    box-shadow: 0 14px 30px rgba(13, 159, 110, .23);
}

.btn-primary:hover {
    box-shadow: 0 18px 38px rgba(13, 159, 110, .30);
}

.btn-secondary {
    color: var(--navy-900);
    background: white;
    border: 1px solid #bfd0dd;
    box-shadow: var(--shadow-sm);
}

.btn-link {
    color: var(--navy-800);
    background: transparent;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #d5e4ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: #29485f;
    font-size: 13px;
    font-weight: 750;
}

.trust-chip::before {
    content: "✓";
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
}

/* ===================== COMMAND CENTER ===================== */

.command-shell {
    position: relative;
}

.command-shell::before {
    content: "";
    position: absolute;
    inset: 38px -28px -28px 38px;
    border-radius: 34px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .12),
            rgba(13, 159, 110, .12)
        );
    filter: blur(2px);
}

.command-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccdae4;
    border-radius: 28px;
    background: white;
    box-shadow: var(--shadow-lg);
}

.command-top {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background:
        linear-gradient(
            135deg,
            var(--navy-950),
            var(--navy-800)
        );
    color: white;
}

.command-brand {
    font-size: 14px;
    font-weight: 850;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #dff7eb;
    font-size: 11px;
    font-weight: 800;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, .12);
}

.command-body {
    padding: 26px;
}

.demo-label {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.site-title-line {
    margin-top: 9px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.site-title-line h2 {
    margin: 0;
    color: var(--navy-950);
    font-size: 24px;
    line-height: 1.2;
}

.site-title-line p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.status-stable {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
}

.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.metric {
    min-height: 100px;
    padding: 16px;
    border: 1px solid #dce7ee;
    border-radius: 16px;
    background: #f9fbfd;
}

.metric-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.metric-value {
    margin-top: 7px;
    color: var(--navy-950);
    font-size: 17px;
    font-weight: 900;
}

.metric-value.ok {
    color: var(--green-dark);
}

.command-footer {
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--navy-950);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
}

.protected {
    color: #9ef1c5;
}

/* ===================== COMMON SECTIONS ===================== */

.section {
    padding: 100px 0;
}

.section-soft {
    background:
        linear-gradient(
            180deg,
            #f7fafc,
            #f2f7fb
        );
}

.section-white {
    background: white;
}

.section-head {
    max-width: 760px;
    margin-bottom: 48px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-kicker::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--gold)
        );
}

.section h2 {
    margin: 0;
    color: var(--navy-950);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.section-intro {
    margin: 18px 0 0;
    color: var(--text);
    font-size: 17px;
    line-height: 1.7;
}

/* ===================== SERVICE CARDS ===================== */

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

.service-card {
    position: relative;
    min-height: 390px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-sm);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: #bad4e3;
    box-shadow: var(--shadow-md);
}

.service-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    font-size: 21px;
    font-weight: 900;
    background:
        linear-gradient(
            135deg,
            var(--navy-800),
            var(--blue)
        );
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}

.service-card:nth-child(2) .service-icon {
    background:
        linear-gradient(
            135deg,
            var(--green-dark),
            var(--green)
        );
}

.service-card:nth-child(3) .service-icon {
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--orange)
        );
}

.service-card h3 {
    margin: 24px 0 10px;
    color: var(--navy-950);
    font-size: 23px;
    line-height: 1.2;
}

.service-card p {
    margin: 0;
    min-height: 76px;
    color: var(--text);
    line-height: 1.65;
}

.service-card ul {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.service-card li {
    position: relative;
    margin: 11px 0;
    padding-left: 25px;
    color: #29485f;
    font-size: 14px;
    font-weight: 650;
}

.service-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green);
    font-weight: 950;
}

.card-status {
    display: inline-flex;
    margin-top: 20px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
}

/* ===================== STEPS ===================== */

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

.step {
    padding: 30px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: white;
    box-shadow: var(--shadow-sm);
}

.step-number {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: var(--navy-950);
    color: white;
    font-size: 17px;
    font-weight: 900;
}

.step h3 {
    margin: 25px 0 10px;
    color: var(--navy-950);
    font-size: 22px;
}

.step p {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
}

/* ===================== ECOSYSTEM ===================== */

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

.eco-card {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: white;
}

.eco-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.eco-card h3 {
    margin: 0;
    color: var(--navy-950);
    font-size: 18px;
}

.eco-badge {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef3f7;
    color: var(--navy-700);
    font-size: 10px;
    font-weight: 900;
}

.eco-badge.available {
    background: var(--green-light);
    color: var(--green-dark);
}

.eco-card p {
    margin: 14px 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

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

.final-cta {
    padding: 96px 0;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(13, 159, 110, .17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071a2d,
            #103d5d
        );
}

.cta-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 48px;
}

.cta-box h2 {
    margin: 0;
    max-width: 760px;
    color: white;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.cta-box p {
    max-width: 710px;
    margin: 18px 0 0;
    color: #c9dbe8;
    line-height: 1.65;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 235px;
}

.cta-actions .btn-secondary {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.23);
    color: white;
}

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

.site-footer {
    background: #061522;
    color: #c8d7e3;
}

.footer-main {
    padding: 56px 0 38px;
    display: grid;
    grid-template-columns: 1.5fr .7fr .9fr;
    gap: 50px;
}

.footer-brand img {
    width: 220px;
    padding: 9px 12px;
    border-radius: 12px;
    background: white;
}

.footer-brand p {
    max-width: 470px;
    margin: 18px 0 0;
    color: #9db2c2;
    line-height: 1.65;
}

.footer-col h4 {
    margin: 0 0 16px;
    color: white;
    font-size: 14px;
}

.footer-col a,
.footer-col span {
    display: block;
    margin: 9px 0;
    color: #aac0cf;
    font-size: 14px;
}

.footer-col a:hover {
    color: #8de4bb;
}

.footer-bottom {
    padding: 19px 0 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #7f98aa;
    font-size: 12px;
}

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

@media (max-width: 1050px) {
    .desktop-nav {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        min-height: auto;
    }

    .hero-copy {
        max-width: 820px;
    }

    .command-shell {
        max-width: 680px;
    }

    .service-grid,
    .steps-grid,
    .ecosystem-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cta-box {
        grid-template-columns: 1fr;
    }

    .cta-actions {
        flex-direction: row;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .header-inner {
        min-height: 70px;
    }

    .brand img {
        width: 175px;
    }

    .header-actions {
        display: none;
    }

    .mobile-nav {
        display: block;
        margin-left: auto;
        position: relative;
    }

    .mobile-nav summary {
        list-style: none;
        cursor: pointer;
        padding: 9px 13px;
        border: 1px solid var(--border);
        border-radius: 11px;
        color: var(--navy-900);
        font-weight: 800;
    }

    .mobile-nav summary::-webkit-details-marker {
        display: none;
    }

    .mobile-menu {
        position: absolute;
        right: 0;
        top: 50px;
        width: 260px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: white;
        box-shadow: var(--shadow-md);
    }

    .mobile-menu a {
        display: block;
        padding: 11px 12px;
        border-radius: 10px;
        color: var(--navy-900);
        font-weight: 700;
    }

    .mobile-menu .mobile-primary {
        margin-top: 7px;
        background: var(--green);
        color: white;
    }

    .hero-grid {
        padding: 64px 0 58px;
    }

    .hero h1 {
        font-size: clamp(43px, 12vw, 62px);
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .metric-grid,
    .service-grid,
    .steps-grid,
    .ecosystem-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 76px 0;
    }

    .service-card {
        min-height: 0;
    }

    .cta-actions {
        flex-direction: column;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* EMSOGRO PREMIUM LIGHT FOOTER START */

/* ==========================================================
   APPEL A L'ACTION FINAL
   ========================================================== */

.final-cta {
    position: relative;
    overflow: hidden;

    padding: 92px 0;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(13, 159, 110, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(37, 99, 235, 0.09),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f9fc 50%,
            #edf8f3 100%
        ) !important;

    border-top: 1px solid #dce8f0;
    border-bottom: 1px solid #d8e5ec;

    color: #102a43 !important;
}

.final-cta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #123b5d 0%,
            #0d9f6e 52%,
            #f3ad32 100%
        );
}

.cta-box {
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    color: #0b243d !important;
    text-shadow: none !important;

    font-weight: 900 !important;
    letter-spacing: -0.04em;
}

.cta-box p {
    color: #49677d !important;
    opacity: 1 !important;
    text-shadow: none !important;

    font-size: 16px;
    line-height: 1.7;
}


/* Bouton principal */

.cta-actions .btn-primary {
    background:
        linear-gradient(
            135deg,
            #0d9f6e,
            #087f59
        ) !important;

    color: #ffffff !important;

    border: 1px solid #087f59 !important;

    box-shadow:
        0 12px 28px
        rgba(13, 159, 110, 0.22) !important;
}


/* Bouton secondaire */

.cta-actions .btn-secondary {
    background: #ffffff !important;

    color: #123b5d !important;

    border:
        1px solid #b9cbd8 !important;

    box-shadow:
        0 8px 20px
        rgba(15, 45, 70, 0.07) !important;
}

.cta-actions .btn-secondary:hover {
    background: #f4f8fb !important;
    border-color: #8eaabd !important;
}


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

.site-footer {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        ) !important;

    color: #334e68 !important;

    border-top: 0 !important;
}


/* Ligne signature EMSOGRO */

.site-footer::before {
    content: "";
    display: block;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #123b5d 0%,
            #0d9f6e 55%,
            #f3ad32 82%,
            #e97c35 100%
        );
}


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

.footer-main {
    padding-top: 58px;
    padding-bottom: 48px;
}


/* Logo */

.footer-brand img {
    width: 220px;

    padding: 10px 14px;

    background: #ffffff !important;

    border:
        1px solid #dce8f0;

    border-radius: 15px;

    box-shadow:
        0 12px 30px
        rgba(15, 45, 70, 0.09);
}


/* Description sous le logo */

.footer-brand p {
    color: #526f83 !important;

    opacity: 1 !important;

    max-width: 480px;

    font-size: 14px;
    line-height: 1.7;

    text-shadow: none !important;
}


/* Titres Navigation / Assistance */

.footer-col h4 {
    position: relative;

    margin-bottom: 20px;

    color: #102a43 !important;

    opacity: 1 !important;

    font-size: 15px;
    font-weight: 900 !important;

    text-shadow: none !important;
}


/* Petit trait vert sous chaque titre */

.footer-col h4::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin-top: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #0d9f6e,
            #f3ad32
        );
}


/* Liens footer */

.footer-col a {
    color: #34546b !important;

    opacity: 1 !important;

    font-weight: 650 !important;

    text-shadow: none !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-col a:hover {
    color: #087f59 !important;
    transform: translateX(3px);
}


/* Téléphone / informations */

.footer-col span {
    color: #526f83 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


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

.footer-bottom {
    padding-top: 20px;
    padding-bottom: 24px;

    border-top:
        1px solid #dce6ed !important;

    color: #6b8394 !important;

    background: transparent !important;

    opacity: 1 !important;

    text-shadow: none !important;

    font-size: 12px;
}


/* ==========================================================
   PETITES CARTES VISUELLES SUR DESKTOP
   ========================================================== */

@media (min-width: 900px) {

    .footer-col {
        padding: 22px;

        border:
            1px solid #e1eaf0;

        border-radius: 18px;

        background:
            rgba(255, 255, 255, 0.72);

        box-shadow:
            0 10px 30px
            rgba(15, 45, 70, 0.055);
    }

}


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

@media (max-width: 760px) {

    .final-cta {
        padding: 70px 0;
    }

    .cta-box h2 {
        font-size: 38px;
    }

    .footer-main {
        padding-top: 42px;
    }

    .footer-col {
        padding-top: 18px;
        padding-bottom: 18px;

        border-top:
            1px solid #e0e9ef;
    }

}

/* EMSOGRO PREMIUM LIGHT FOOTER END */

/* EMSOGRO FOOTER FONT SIZE START */

/* Description sous le logo EMSOGRO */
.footer-brand p {
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
    color: #405f74 !important;
}

/* Navigation / Assistance EMSOGRO */
.footer-col h4 {
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    color: #102a43 !important;
}

/* Fonctionnalités / Solutions / Connexion / WhatsApp */
.footer-col a {
    font-size: 17px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    color: #294b63 !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

/* Téléphone et autres informations */
.footer-col span {
    font-size: 17px !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
    color: #405f74 !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

/* Copyright */
.footer-bottom {
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    color: #577286 !important;
}

/* Meilleur confort sur téléphone */
@media (max-width: 760px) {

    .footer-brand p {
        font-size: 17px !important;
    }

    .footer-col h4 {
        font-size: 18px !important;
    }

    .footer-col a,
    .footer-col span {
        font-size: 16px !important;
    }

    .footer-bottom {
        font-size: 14px !important;
    }
}

/* EMSOGRO FOOTER FONT SIZE END */

/* EMSOGRO FOOTER COPYRIGHT CENTER */
.footer-bottom {
    text-align: center !important;
    width: 100% !important;
}


/* EMSOGRO ORANGE MANAGER LOGIN BUTTON */

.nav-login,
header a[href*="/login"],
.site-header a[href*="/login"] {
    background: linear-gradient(
        135deg,
        #f59e0b 0%,
        #f97316 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid #ea7a12 !important;

    box-shadow:
        0 10px 24px rgba(249, 115, 22, 0.24) !important;

    font-weight: 850 !important;

    text-shadow: none !important;
}

.nav-login:hover,
header a[href*="/login"]:hover,
.site-header a[href*="/login"]:hover {
    background: linear-gradient(
        135deg,
        #f97316 0%,
        #ea580c 100%
    ) !important;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* EMSOGRO ORANGE ACCESS SPACE BUTTON */

.hero-actions a[href*="/login"],
.hero .btn-secondary[href*="/login"],
main > section:first-child a[href*="/login"] {
    background: linear-gradient(
        135deg,
        #f59e0b 0%,
        #f97316 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid #ea7a12 !important;

    box-shadow:
        0 12px 26px rgba(249, 115, 22, 0.24) !important;

    font-weight: 850 !important;

    text-shadow: none !important;
}

.hero-actions a[href*="/login"]:hover,
.hero .btn-secondary[href*="/login"]:hover,
main > section:first-child a[href*="/login"]:hover {
    background: linear-gradient(
        135deg,
        #f97316 0%,
        #ea580c 100%
    ) !important;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* EMSOGRO ORANGE FEATURES BUTTON */

.final-cta a[href="#fonctionnalites"],
.cta-actions a[href="#fonctionnalites"] {
    background: linear-gradient(
        135deg,
        #f59e0b 0%,
        #f97316 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid #ea7a12 !important;

    box-shadow:
        0 12px 26px rgba(249, 115, 22, 0.24) !important;

    font-weight: 850 !important;

    text-shadow: none !important;
}

.final-cta a[href="#fonctionnalites"]:hover,
.cta-actions a[href="#fonctionnalites"]:hover {
    background: linear-gradient(
        135deg,
        #f97316 0%,
        #ea580c 100%
    ) !important;

    color: #ffffff !important;

    transform: translateY(-2px);
}

/* EMSOGRO ORANGE WHITE HEADER START */

/* ==========================================================
   RUBAN PRINCIPAL WIFICONTROL
   Orange EMSOGRO + blanc premium
   ========================================================== */

.site-header {
    background:
        linear-gradient(
            90deg,
            #f97316 0%,
            #fff1e6 8%,
            #ffffff 24%,
            #ffffff 76%,
            #fff1e6 92%,
            #f59e0b 100%
        ) !important;

    border-top: 4px solid #f97316 !important;
    border-bottom: 2px solid #f59e0b !important;

    box-shadow:
        0 7px 24px rgba(249, 115, 22, 0.15) !important;

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


/* Zone interne du ruban */

.site-header .header-inner {
    background: transparent !important;
}


/* ==========================================================
   LIENS DE NAVIGATION
   ========================================================== */

.site-header .desktop-nav a {
    color: #17324d !important;

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow: none !important;

    border-radius: 10px !important;

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


/* Survol navigation */

.site-header .desktop-nav a:hover {
    background: #ffedd5 !important;

    color: #c2410c !important;

    transform: translateY(-1px);
}


/* WiFi Control */

.site-header .desktop-nav a[href="/"] {
    color: #c2410c !important;
    font-weight: 900 !important;
}


/* ==========================================================
   CONNEXION GERANT
   Conserver le bouton orange
   ========================================================== */

.site-header .nav-login {
    background:
        linear-gradient(
            135deg,
            #f59e0b 0%,
            #f97316 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #ea580c !important;

    box-shadow:
        0 9px 22px rgba(249, 115, 22, 0.23) !important;

    font-weight: 850 !important;
}

.site-header .nav-login:hover {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #ea580c
        ) !important;

    color: #ffffff !important;
}


/* ==========================================================
   CREER MON COMPTE
   Vert EMSOGRO pour différencier l'action principale
   ========================================================== */

.site-header .nav-signup {
    background:
        linear-gradient(
            135deg,
            #0d9f6e,
            #087f59
        ) !important;

    color: #ffffff !important;

    border: 1px solid #087f59 !important;

    box-shadow:
        0 9px 22px rgba(13, 159, 110, 0.22) !important;

    font-weight: 850 !important;
}


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

.site-header .brand {
    background: rgba(255, 255, 255, 0.78);

    padding: 5px 9px;

    border-radius: 12px;
}


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

@media (max-width: 760px) {

    .site-header {
        background:
            linear-gradient(
                135deg,
                #fff7ed 0%,
                #ffffff 55%,
                #ffedd5 100%
            ) !important;
    }

    .mobile-nav summary {
        background: #ffffff !important;

        color: #c2410c !important;

        border: 1px solid #f5a366 !important;
    }

    .mobile-menu {
        background: #ffffff !important;

        border:
            1px solid #fed7aa !important;
    }

    .mobile-menu a {
        color: #17324d !important;
    }

    .mobile-menu a:hover {
        background: #fff1e6 !important;
        color: #c2410c !important;
    }

    .mobile-menu .mobile-primary {
        background:
            linear-gradient(
                135deg,
                #0d9f6e,
                #087f59
            ) !important;

        color: #ffffff !important;
    }
}

/* EMSOGRO ORANGE WHITE HEADER END */

/* EMSOGRO SEARCH RUBRIC START */

.search-section {
    background:
        linear-gradient(
            135deg,
            #fff7ed 0%,
            #ffffff 52%,
            #f2faf6 100%
        );
}

.search-premium-box {
    position: relative;

    padding: 44px;

    border:
        1px solid #f3cfb2;

    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 22px 60px
        rgba(34, 65, 85, .10);

    overflow: hidden;
}

.search-premium-box::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 6px;

    background:
        linear-gradient(
            180deg,
            #f97316,
            #f59e0b,
            #0d9f6e
        );
}

.search-premium-box h2 {
    margin:
        0 0 12px;

    color:
        #102a43;

    font-size:
        clamp(34px, 4vw, 48px);

    font-weight:
        900;
}

.search-premium-box > p {
    margin:
        0 0 25px;

    color:
        #526b7d;

    font-size:
        16px;

    line-height:
        1.65;
}

#emsogro-public-search {
    width: 100%;

    min-height: 58px;

    padding:
        0 20px;

    border:
        2px solid #e7c29f;

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        #102a43;

    font-size:
        17px;

    font-weight:
        600;

    outline:
        none;

    box-shadow:
        0 7px 20px
        rgba(75, 70, 50, .05);
}

#emsogro-public-search:focus {
    border-color:
        #f97316;

    box-shadow:
        0 0 0 5px
        rgba(249,115,22,.11);
}

.public-search-results {
    margin-top:
        18px;

    display:
        grid;

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

    gap:
        12px;
}

.search-result-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    padding:
        13px 17px;

    border:
        1px solid #e1e9ee;

    border-radius:
        13px;

    background:
        #f9fbfd;

    color:
        #17324d;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        .18s ease;
}

.search-result-card strong {
    color:
        #f97316;

    font-size:
        20px;
}

.search-result-card:hover {
    border-color:
        #f3a36b;

    background:
        #fff7ed;

    transform:
        translateY(-2px);
}

.search-suggestion,
.search-empty {
    grid-column:
        1 / -1;

    padding:
        14px 16px;

    color:
        #526b7d;

    background:
        #f7fafc;

    border-radius:
        12px;

    font-weight:
        650;
}

@media (max-width: 800px) {

    .search-premium-box {
        padding:
            30px 22px;
    }

    .public-search-results {
        grid-template-columns:
            1fr;
    }
}

/* EMSOGRO SEARCH RUBRIC END */

/* EMSOGRO HEADER ALL LINKS ONE LINE START */

/*
 * Empêcher uniquement le texte des liens/boutons
 * du menu principal de se couper sur deux lignes.
 *
 * Aucune modification de couleur.
 * Aucune modification d'ordre.
 */

.site-header a[href="/"],
.site-header a[href="#fonctionnalites"],
.site-header a[href="#solutions"],
.site-header a[href="#comment-ca-marche"],
.site-header a[href="#recherche"],
.site-header a[href="/login?secure_login=1"],
.site-header a[href="/inscription-gerant"] {

    white-space: nowrap !important;

    word-break: keep-all !important;

    overflow-wrap: normal !important;

    hyphens: none !important;
}


/*
 * Garder également les deux boutons
 * sans retour à la ligne.
 */

.site-header .nav-login,
.site-header .nav-signup {

    white-space: nowrap !important;

    word-break: keep-all !important;

    overflow-wrap: normal !important;

    hyphens: none !important;
}


/*
 * Sur les écrans intermédiaires,
 * réduire légèrement l'espacement
 * plutôt que couper les mots.
 */

@media (min-width: 761px) and (max-width: 1200px) {

    .site-header a[href="/"],
    .site-header a[href="#fonctionnalites"],
    .site-header a[href="#solutions"],
    .site-header a[href="#comment-ca-marche"],
    .site-header a[href="#recherche"],
    .site-header a[href="/login?secure_login=1"],
    .site-header a[href="/inscription-gerant"] {

        font-size: 13px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* EMSOGRO HEADER ALL LINKS ONE LINE END */