*{box-sizing:border-box;margin:0;padding:0}:root{--green:#0B6B4F;--green-dark:#07513D;--green-light:#E7F5EF;--mint:#F2FAF6;--gold:#D7A83B;--cream:#FAF8F1;--white:#fff;--text:#17231F;--muted:#71807A;--border:#E1EAE5;--danger:#C94747;--shadow:0 14px 40px rgba(18,52,42,.08)}html,body{min-height:100%;font-family:Poppins,sans-serif;color:var(--text);background:var(--cream)}body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}input,select,textarea{width:100%;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:12px;padding:13px 14px;outline:0;transition:.2s}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(11,107,79,.1)}textarea{resize:vertical}.hidden{display:none!important}.screen{min-height:100vh}.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:1.7px}.eyebrow.light{color:rgba(255,255,255,.72)}.primary-button{background:var(--green);color:#fff;padding:13px 20px;border-radius:12px;font-weight:700;box-shadow:0 8px 20px rgba(11,107,79,.18);transition:.2s}.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}.primary-button.small{padding:10px 15px;font-size:11px}.primary-button.full{width:100%}.ghost-button,.outline-button{background:transparent;color:var(--green);padding:10px 15px;border-radius:12px;font-size:11px;font-weight:700}.outline-button{border:1px solid var(--green)}.link-button,.text-button{background:transparent;color:var(--green);font-size:11px;font-weight:700}.back-link{background:transparent;color:var(--green);font-weight:700;font-size:12px}
/* accueil */.landing-page{background:linear-gradient(145deg,#f4fbf7 0%,#faf8f1 65%,#fff 100%)}.landing-header{max-width:1180px;margin:auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}.logo-mark{width:52px;height:52px;border-radius:17px;background:var(--green);color:#fff;display:grid;place-items:center;position:relative;box-shadow:0 10px 24px rgba(11,107,79,.22)}.logo-house{font-size:28px;line-height:1}.logo-dot{position:absolute;right:8px;top:7px;color:var(--gold);font-size:10px}.brand-text strong{display:block;font-size:18px;letter-spacing:-.4px}.brand-text strong span,.auth-brand strong span{color:var(--green)}.brand-text small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.landing-actions{display:flex;gap:7px;align-items:center}.hero-section{max-width:1180px;margin:auto;min-height:620px;padding:75px 24px 55px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:50px}.hero-copy h1{font-size:clamp(39px,6vw,70px);line-height:1.02;letter-spacing:-2.5px;margin:10px 0 20px}.hero-copy h1 strong{color:var(--green)}.hero-copy>p{max-width:620px;color:var(--muted);font-size:14px;line-height:1.8}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0 18px}.hero-trust{display:flex;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:9px;font-weight:600}.hero-visual{min-height:490px;position:relative;display:grid;place-items:center}.main-phone{width:min(340px,78%);min-height:450px;background:#fff;border:8px solid #183a30;border-radius:38px;padding:20px 16px;box-shadow:0 30px 70px rgba(12,54,41,.22);transform:rotate(2deg);position:relative;z-index:2}.phone-top{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;font-weight:700}.mini-welcome{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:20px;padding:22px 17px;margin:18px 0}.mini-welcome small{font-size:8px;color:rgba(255,255,255,.7)}.mini-welcome strong{display:block;font-size:22px;margin:4px 0}.mini-welcome span{font-size:9px;color:rgba(255,255,255,.75)}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mini-grid div{background:var(--mint);border-radius:14px;padding:13px 9px}.mini-grid b{display:block;font-size:21px;margin-bottom:6px}.mini-grid span{font-size:9px;font-weight:700}.mini-job{margin-top:10px;background:#f8f4e7;border-radius:14px;padding:13px;font-size:8px;display:flex;justify-content:space-between;gap:7px}.mini-job b{color:var(--green)}.floating-card{position:absolute;z-index:4;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:15px;padding:12px;display:flex;align-items:center;gap:9px;min-width:190px}.floating-card>span{font-size:24px}.floating-card strong{display:block;font-size:10px}.floating-card small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.floating-one{left:0;top:100px}.floating-two{right:-10px;bottom:80px}.services-section,.profile-preview-section{padding:75px 24px;max-width:1180px;margin:auto}.section-heading.centered{text-align:center;max-width:720px;margin:0 auto 35px}.section-heading h2{font-size:clamp(24px,4vw,37px);line-height:1.2;margin:6px 0 9px}.section-heading p{color:var(--muted);font-size:12px;line-height:1.7}.landing-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.landing-service,.profile-preview-grid article{background:#fff;border:1px solid var(--border);border-radius:19px;padding:21px;box-shadow:var(--shadow)}.landing-service>div{width:46px;height:46px;background:var(--green-light);border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:14px}.landing-service h3,.profile-preview-grid h3{font-size:14px;margin-bottom:7px}.landing-service p,.profile-preview-grid p{font-size:10px;color:var(--muted);line-height:1.7}.profile-preview-section{background:transparent}.profile-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px;margin:auto}.profile-preview-grid article{display:grid;grid-template-columns:auto 1fr;column-gap:14px}.preview-icon{grid-row:span 2;width:50px;height:50px;border-radius:15px;background:var(--green-light);display:grid;place-items:center;font-size:24px}.landing-footer{border-top:1px solid var(--border);padding:22px 24px;display:flex;justify-content:center;gap:18px;color:var(--muted);font-size:9px}.landing-footer strong{color:var(--green)}
/* auth */.auth-page{position:relative;display:grid;place-items:center;padding:30px 16px;background:linear-gradient(145deg,#f3faf6,#faf8f1);overflow:hidden}.auth-background-shape{position:absolute;border-radius:50%;background:rgba(11,107,79,.06);width:350px;height:350px}.shape-a{right:-150px;top:-170px}.shape-b{left:-170px;bottom:-180px}.auth-box{position:relative;z-index:2;width:min(100%,510px);background:rgba(255,255,255,.97);border-radius:27px;padding:27px;box-shadow:0 25px 80px rgba(13,58,44,.12);border:1px solid #fff}.auth-brand{display:flex;align-items:center;gap:10px}.auth-brand strong{display:block;font-size:17px}.auth-brand small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.auth-heading{margin:28px 0 20px}.auth-heading h2{font-size:29px;margin:5px 0}.auth-heading p{font-size:11px;color:var(--muted);line-height:1.7}.auth-switcher{display:grid;grid-template-columns:1fr 1fr;background:var(--mint);padding:4px;border-radius:12px;margin-bottom:18px}.auth-switcher button{background:transparent;padding:10px;border-radius:9px;color:var(--muted);font-size:11px;font-weight:700}.auth-switcher button.active{background:#fff;color:var(--green);box-shadow:0 3px 12px rgba(0,0,0,.05)}.auth-form{display:none;gap:13px}.auth-form.active{display:grid}.auth-form label,.form-card label{display:grid;gap:7px;font-size:11px;font-weight:600}.optional{color:var(--muted);font-weight:400}.password-field{position:relative}.password-field input{padding-right:60px}.show-password{position:absolute;right:7px;top:7px;padding:6px 8px;border-radius:8px;background:var(--green-light);color:var(--green);font-size:9px;font-weight:700}.form-line{display:flex;justify-content:space-between;align-items:center;gap:10px}.check{display:flex!important;align-items:center;gap:7px!important;color:var(--muted);font-size:9px!important;font-weight:500!important}.check input{width:auto}.prototype-note{text-align:center;color:var(--muted);font-size:8px}.terms{line-height:1.5}
/* profil */.profile-page{padding:40px 18px;background:var(--cream)}.profile-select-container{max-width:900px;margin:auto}.profile-select-heading{text-align:center;max-width:650px;margin:35px auto}.profile-select-heading h2{font-size:clamp(30px,6vw,47px);line-height:1.1;margin:7px 0}.profile-select-heading h2 strong{color:var(--green)}.profile-select-heading p{color:var(--muted);font-size:12px}.profile-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-choice{text-align:left;background:#fff;border:2px solid transparent;border-radius:22px;padding:25px;box-shadow:var(--shadow);transition:.2s}.profile-choice:hover{border-color:var(--green);transform:translateY(-3px)}.profile-choice-icon{width:58px;height:58px;border-radius:17px;background:var(--green-light);display:grid;place-items:center;font-size:27px;margin-bottom:16px}.profile-choice h3{font-size:18px;margin-bottom:8px}.profile-choice p{color:var(--muted);font-size:11px;line-height:1.7;margin-bottom:18px}.profile-choice span{color:var(--green);font-size:10px;font-weight:800}.profile-security{margin:22px auto;max-width:700px;background:var(--green-light);color:var(--green-dark);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;font-size:9px}
/* app */.app-shell{min-height:100vh;background:var(--cream)}.app-topbar{height:70px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;backdrop-filter:blur(15px)}.app-brand{display:flex;align-items:center;gap:9px}.app-brand strong{display:block;font-size:12px}.app-brand small{display:block;color:var(--muted);font-size:8px}.mini-logo{width:38px;height:38px;border-radius:11px;background:var(--green);color:#fff;display:grid;place-items:center;position:relative}.mini-logo span{font-size:21px}.mini-logo i{position:absolute;right:6px;top:5px;color:var(--gold);font-style:normal;font-size:6px}.avatar-button{width:38px;height:38px;border-radius:50%;background:var(--green-light);color:var(--green);font-weight:800}.app-main{max-width:980px;margin:auto;padding:22px 16px 100px}.app-page{display:none}.app-page.active{display:block;animation:fadeIn .22s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.dashboard-hero{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:24px;padding:24px;display:flex;justify-content:space-between;align-items:center}.dashboard-hero h1{font-size:26px;margin:4px 0}.dashboard-hero p{font-size:10px;color:rgba(255,255,255,.75)}.city-emoji{font-size:48px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:28px 0 14px}.section-heading.compact{margin-top:25px}.section-heading h2{font-size:18px;margin-top:3px}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick-actions button{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;text-align:left;box-shadow:0 7px 20px rgba(18,52,42,.04)}.quick-actions span{display:block;font-size:22px;margin-bottom:8px}.quick-actions strong{display:block;font-size:11px}.quick-actions small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.feature-list,.stack-list,.professional-list,.job-list,.commune-list{display:grid;gap:10px}.feature-card{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;text-align:left;background:#fff;border:1px solid var(--border);border-radius:16px;padding:13px}.feature-icon{width:44px;height:44px;border-radius:13px;background:var(--green-light);display:grid;place-items:center;font-size:20px}.feature-card strong{font-size:11px}.feature-card p{color:var(--muted);font-size:9px;line-height:1.5;margin-top:3px}.feature-card>span{color:var(--green);font-size:20px}.page-title{margin:7px 0 22px}.page-title h1{font-size:clamp(25px,6vw,36px);line-height:1.15;margin:5px 0 7px}.page-title p{color:var(--muted);font-size:11px;line-height:1.7}.app-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:17px;box-shadow:var(--shadow)}.form-card{display:grid;gap:13px}.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:0 13px;margin-bottom:14px}.search-box span{font-size:22px;color:var(--green)}.search-box input{border:0;box-shadow:none!important;padding-left:0}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.category-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px 7px;text-align:center}.category-card .cat-icon{display:block;font-size:22px;margin-bottom:5px}.category-card strong{display:block;font-size:8px}.professional-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px}.pro-avatar{width:45px;height:45px;border-radius:14px;background:var(--green-light);color:var(--green);display:grid;place-items:center;font-weight:800}.professional-card strong{font-size:11px}.professional-card p{font-size:8px;color:var(--muted);margin:2px 0}.stars{color:var(--gold);font-size:9px}.contact-pro{background:var(--green-light);color:var(--green);padding:8px 9px;border-radius:9px;font-size:8px;font-weight:700}.filter-row{display:flex;gap:7px;overflow-x:auto;padding:17px 0 11px}.filter{white-space:nowrap;background:#fff;color:var(--muted);border:1px solid var(--border);padding:8px 12px;border-radius:20px;font-size:9px;font-weight:600}.filter.active{background:var(--green);color:#fff;border-color:var(--green)}.job-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}.job-top{display:flex;justify-content:space-between;gap:10px}.job-top h3{font-size:12px}.job-category{color:var(--green);background:var(--green-light);border-radius:20px;padding:5px 8px;height:fit-content;font-size:8px;font-weight:700}.job-card p{color:var(--muted);font-size:9px;line-height:1.55;margin:8px 0}.job-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:8px}.job-budget{color:var(--green-dark);font-weight:800}.commune-list{grid-template-columns:repeat(2,1fr)}.commune-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:15px;text-align:left}.commune-card.selected{border:2px solid var(--green)}.commune-card strong{font-size:12px}.commune-card small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.commune-tag{display:inline-block;color:var(--green);font-size:8px;font-weight:700;margin-top:9px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats-grid div{background:#fff;border:1px solid var(--border);border-radius:15px;padding:14px}.stats-grid strong{display:block;font-size:21px;color:var(--green)}.stats-grid span{font-size:8px;color:var(--muted)}.profile-card{display:flex;align-items:center;gap:14px}.profile-avatar{width:65px;height:65px;border-radius:20px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}.profile-card h2{font-size:18px}.profile-card p{color:var(--muted);font-size:9px;margin:3px 0 6px}.profile-badge{display:inline-block;background:var(--green-light);color:var(--green);padding:5px 8px;border-radius:20px;font-size:8px;font-weight:700}.settings-list{background:#fff;border:1px solid var(--border);border-radius:17px;margin:15px 0;overflow:hidden}.setting-row{width:100%;display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:10px;padding:14px;text-align:left;background:#fff;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:0}.setting-row>span{font-size:18px}.setting-row strong{display:block;font-size:10px}.setting-row small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.setting-row b{color:var(--green)}.danger-button{background:#fbeded;color:var(--danger);padding:13px;border-radius:12px;font-weight:700}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;background:rgba(255,255,255,.97);border-top:1px solid var(--border);display:flex;justify-content:center;z-index:30;backdrop-filter:blur(15px)}.nav-item{flex:1;max-width:125px;background:transparent;color:#89948f;display:grid;place-content:center;gap:2px}.nav-item span{font-size:18px}.nav-item small{font-size:8px;font-weight:600}.nav-item.active{color:var(--green)}
/* modal + toast */.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:end;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:rgba(9,29,23,.52)}.modal-sheet{position:relative;width:min(100%,650px);max-height:90vh;overflow-y:auto;background:var(--cream);border-radius:24px 24px 0 0;padding:24px 18px 34px;box-shadow:0 -20px 50px rgba(0,0,0,.18)}.modal-sheet h2{font-size:22px;margin:5px 0 18px}.modal-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;background:#fff;font-size:22px}.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);background:#17231f;color:#fff;padding:11px 15px;border-radius:10px;font-size:9px;opacity:0;pointer-events:none;z-index:200;transition:.25s;max-width:calc(100% - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.hero-section{grid-template-columns:1fr;gap:25px;text-align:center;padding-top:50px}.hero-copy>p{margin:auto}.hero-buttons,.hero-trust{justify-content:center}.hero-visual{min-height:470px}.landing-service-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.landing-header{padding:15px 16px}.landing-actions .ghost-button{display:none}.brand-text small{display:none}.hero-section{padding:40px 18px}.hero-copy h1{font-size:42px}.floating-one{left:-3px;top:80px}.floating-two{right:-5px;bottom:55px}.floating-card{min-width:165px;padding:10px}.services-section,.profile-preview-section{padding:55px 18px}.profile-preview-grid{grid-template-columns:1fr}.profile-choice-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.commune-list{grid-template-columns:1fr}.landing-footer{flex-direction:column;align-items:center}.auth-box{padding:22px}.dashboard-hero{padding:20px}.city-emoji{font-size:38px}}@media(max-width:420px){.landing-service-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.hero-copy h1{font-size:37px}.main-phone{width:82%}.floating-card{min-width:145px}.floating-card small{font-size:7px}.floating-card strong{font-size:9px}}
/* =========================================================
   ZAG SERVICE — HEADER PREMIUM
   ========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    padding: 8px clamp(16px, 4vw, 60px);

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

    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

    z-index: 1000;
}

/* LOGO À GAUCHE */

.header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 56px;
}

.header .logo img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 210px;
    object-fit: contain;
}

/* BOUTON MENU À DROITE */

.menu-button {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    background: #d9dde1;
    color: #111111;

    border: 1px solid #b8bdc2;
    border-radius: 12px;

    font-size: 22px;
    line-height: 1;

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

    transition: .2s ease;
}

.menu-button:hover {
    transform: translateY(-1px);
}

.menu-button:active {
    transform: scale(.96);
}

/* MENU */

.header .menu {
    position: absolute;
    top: 64px;
    right: clamp(16px, 4vw, 60px);

    min-width: 190px;

    display: none;
    flex-direction: column;
    gap: 4px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 14px;

    box-shadow: 0 18px 45px rgba(0,0,0,.14);

    z-index: 1001;
}

.header .menu a {
    display: block;

    padding: 12px 14px;

    color: #111111;
    text-decoration: none;

    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;

    border-radius: 9px;

    transition: .2s ease;
}

.header .menu a:hover {
    background: #f1f2f3;
}

/* TABLETTE */

@media (max-width: 768px) {

    .header {
        height: 68px;
        padding: 8px 16px;
    }

    .header .logo img {
        height: 43px;
        max-width: 180px;
    }

    .header .menu {
        top: 61px;
        right: 16px;
    }
}

/* PETIT TÉLÉPHONE */

@media (max-width: 420px) {

    .header {
        height: 64px;
    }

    .header .logo img {
        height: 39px;
        max-width: 155px;
    }

    .menu-button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .header .menu {
        top: 58px;
        right: 12px;
        min-width: 175px;
    }
}
/* =========================================================
   ZAG SERVICE — ACCUEIL PREMIUM
   ========================================================= */

.hero {
    min-height: calc(100vh - 72px);
    padding: 90px 24px 70px;

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

    background:
        radial-gradient(
            circle at 50% 0%,
            #ffffff 0%,
            #f5f6f7 45%,
            #e9ebed 100%
        );

    color: #111111;
    text-align: center;

    box-sizing: border-box;
}

.hero-content {
    width: min(100%, 850px);
    margin: auto;
}

.hero-eyebrow {
    margin-bottom: 18px;

    color: #555b60;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.hero h1 {
    max-width: 850px;
    margin: 0 auto 22px;

    color: #111111;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(38px, 7vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.hero-description {
    max-width: 650px;
    margin: 0 auto;

    color: #62686d;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    margin-top: 30px;
    padding: 0 28px;

    background: linear-gradient(
        145deg,
        #dfe3e6,
        #aeb4b9
    );

    color: #111111;

    border: 1px solid #969da3;
    border-radius: 13px;

    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 800;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.9),
        0 10px 25px rgba(0,0,0,.13);

    transition: .2s ease;
}

.hero-button:hover {
    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.9),
        0 14px 30px rgba(0,0,0,.17);
}

.hero-button:active {
    transform: scale(.97);
}

.hero-scroll {
    margin-top: 35px;

    color: #777d82;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    animation: descendre 1.5s infinite;
}

/* MOBILE */

@media (max-width: 650px) {

    .hero {
        min-height: calc(100vh - 64px);
        padding: 65px 18px 55px;
    }

    .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero h1 {
        font-size: 39px;
        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 13px;
        line-height: 1.7;
    }

    .hero-button {
        width: 100%;
        max-width: 320px;
    }
}

/* TRÈS PETITS ÉCRANS */

@media (max-width: 380px) {

    .hero h1 {
        font-size: 34px;
    }

    .hero-description {
        font-size: 12px;
    }
}
/* =========================================================
   ZAG SERVICE — SERVICES PREMIUM
   ========================================================= */

.services {
    background: #F7F5F0;
    padding: 70px 20px;
    text-align: center;
}

.services h2 {
    color: #0B1F33;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 5vw, 38px);
    margin-bottom: 40px;
}

.services-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-card {
    width: 100%;
    min-height: 0;
    padding: 0 0 25px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-top: 5px solid #C9A227;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: .25s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.service-card h3 {
    color: #0B1F33;
    font-family: 'Manrope', sans-serif;
    font-size: 21px;
    margin: 22px 20px 10px;
}

.service-card p {
    color: #62686d;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 20px;
}

.service-card button {
    margin-top: 18px;
    padding: 11px 20px;
    background: linear-gradient(145deg, #dfe3e6, #aeb4b9);
    color: #111111;
    border: 1px solid #969da3;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.9),
        0 7px 18px rgba(0,0,0,.10);
    transition: .2s ease;
}

.service-card button:hover {
    transform: translateY(-2px);
}

.service-card button:active {
    transform: scale(.97);
}

.service-card #eventInfo,
.service-card #transportInfo,
.service-card #immobilierInfo {
    color: #62686d;
    margin: 18px 20px 0;
    line-height: 1.7;
}

/* MOBILE SERVICES */

@media (max-width: 768px) {

    .services-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .service-card img {
        height: 210px;
    }
}
/* =========================================================
   ZAG SERVICE — FOND 3D PREMIUM GLOBAL
   ========================================================= */

html,
body {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(11, 31, 51, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(201, 162, 39, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(11, 31, 51, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f5f7 45%,
            #e8ecef 100%
        );

    background-attachment: fixed;
}


/* Profondeur générale */

body {
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 40%,
            rgba(255,255,255,0.75),
            transparent 22%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,0.55),
            transparent 25%
        );

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   CARTES SERVICES — FORME IDENTIQUE
   ========================================================= */

.services-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    flex-wrap: wrap;
}

.service-card {
    width: min(100%, 250px);
    min-height: 430px;

    padding: 0 0 25px;

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

    border: 1px solid rgba(11, 31, 51, 0.10);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(11, 31, 51, 0.13),
        0 5px 12px rgba(0, 0, 0, 0.06);

    transform: translateZ(0);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 28px 60px rgba(11, 31, 51, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.08);
}


/* Images identiques */

.service-card img {
    width: 100%;
    height: 180px;

    display: block;

    object-fit: cover;
}


/* Titres */

.service-card h3 {
    margin: 20px 20px 8px;

    color: #0B1F33;

    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
}


/* Description */

.service-card p {
    margin: 0 20px;

    color: #62686d;

    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    line-height: 1.7;
}


/* Boutons */

.service-card button {
    margin-top: 18px;

    padding: 10px 18px;

    background: #0B1F33;
    color: #ffffff;

    border: 1px solid #263e52;
    border-radius: 9px;

    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(11, 31, 51, 0.20);

    transition: 0.2s ease;
}

.service-card button:hover {
    background: #172f45;
    transform: translateY(-2px);
}


/* Texte "En savoir plus" */

.service-card #eventInfo,
.service-card #transportInfo,
.service-card #immobilierInfo {
    margin: 18px 20px 0;

    color: #62686d;

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


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

@media (max-width: 650px) {

    .services-container {
        gap: 18px;
    }

    .service-card {
        width: min(100%, 340px);
        min-height: auto;
    }

    .service-card img {
        height: 190px;
    }
}
/* =========================================================
   ZAG SERVICE — CORRECTIONS PREMIUM
   ========================================================= */

/* =========================
   HEADER BLEU NUIT
   ========================= */

.header {
    height: 72px;
    padding: 8px clamp(16px, 4vw, 60px);

    background: #0B1F33;
    border-bottom: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);
}

/* LOGO */

.header .logo {
    height: 52px;
    display: flex;
    align-items: center;
}

.header .logo img {
    display: block;

    width: auto;
    height: 42px;
    max-width: 175px;

    object-fit: contain;
}


/* MENU */

.menu-button {
    background: #ffffff;
    color: #0B1F33;

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

.header .menu {
    top: 66px;

    background: #ffffff;

    border: 1px solid #e5e5e5;

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


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

.services-container {
    display: flex;
    justify-content: center;
    align-items: stretch;

    gap: 25px;

    flex-wrap: wrap;
}


/*
   UNE SEULE DIMENSION
   POUR LES 3 CARTES
*/

.service-card {
    flex: 0 0 250px;

    width: 250px;
    min-width: 250px;
    max-width: 250px;

    height: 470px;
    min-height: 470px;
    max-height: 470px;

    padding: 0 0 22px;

    display: flex;
    flex-direction: column;

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

    border: 1px solid rgba(11,31,51,.10);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(11,31,51,.13),
        0 5px 12px rgba(0,0,0,.06);

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


/* IMAGE À L'INTÉRIEUR DE LA CARTE */

.service-card img {
    width: 100%;
    height: 180px;

    min-height: 180px;
    max-height: 180px;

    display: block;

    object-fit: cover;
    object-position: center;

    margin: 0;
    padding: 0;
}


/* TITRE */

.service-card h3 {
    margin: 20px 20px 8px;

    color: #0B1F33;

    font-family: 'Manrope', sans-serif;

    font-size: 18px;
    font-weight: 800;
}


/* DESCRIPTION */

.service-card > p:not([id]) {
    margin: 0 20px;

    color: #62686d;

    font-family: 'Manrope', sans-serif;

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


/* BOUTON EN SAVOIR PLUS */

.service-card button {
    margin: 18px 20px 0;

    width: calc(100% - 40px);

    min-height: 42px;

    padding: 10px 15px;

    background: #0B1F33;
    color: #ffffff;

    border: 1px solid #263e52;

    border-radius: 9px;

    font-family: 'Manrope', sans-serif;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(11,31,51,.20);

    transition: .2s ease;
}

.service-card button:hover {
    background: #172f45;

    transform: translateY(-2px);
}


/* INFORMATIONS */

.service-card p[id$="Info"] {
    margin: 14px 20px 0 !important;

    color: #62686d !important;

    font-family: 'Manrope', sans-serif;

    font-size: 10px !important;

    line-height: 1.6 !important;
}


/* =========================
   BOUTON DEVIS
   ========================= */

.service-card .devis-button {
    margin-top: auto;

    background: transparent;

    color: #0B1F33;

    border: 1px solid #0B1F33;

    box-shadow: none;
}

.service-card .devis-button:hover {
    background: #0B1F33;

    color: #ffffff;
}


/* =========================
   EFFET 3D CARTES
   ========================= */

.service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 30px 65px rgba(11,31,51,.20),
        0 10px 20px rgba(0,0,0,.08);
}


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

@media (max-width: 650px) {

    .header {
        height: 64px;
        padding: 8px 14px;
    }

    .header .logo img {
        height: 37px;
        max-width: 150px;
    }

    .menu-button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .header .menu {
        top: 58px;
        right: 12px;
    }

    .services-container {
        gap: 18px;
    }

    .service-card {
        flex: 0 0 100%;

        width: min(100%, 340px);
        min-width: 0;
        max-width: 340px;

        height: 470px;
        min-height: 470px;
        max-height: 470px;
    }

    .service-card img {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }
}
/* =========================================================
   ZAG SERVICE — FORÇAGE CARTES IDENTIQUES
   ========================================================= */

.services .service-card {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;

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

    padding: 0 0 22px !important;

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

    border: 1px solid rgba(11,31,51,.10) !important;
    border-top: 1px solid rgba(11,31,51,.10) !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

.services .service-card img {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;

    object-fit: cover !important;

    display: block !important;

    margin: 0 !important;
}

.services .service-card h3 {
    margin: 20px 20px 8px !important;
}

.services .service-card > p:not([id]) {
    margin: 0 20px !important;
}

.services .service-card button {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(100% - 40px) !important;
}

.services .service-card .devis-button {
    margin-top: auto !important;

    background: transparent !important;
    color: #0B1F33 !important;

    border: 1px solid #0B1F33 !important;
}

.services .service-card .devis-button:hover {
    background: #0B1F33 !important;
    color: #ffffff !important;
}


/* MOBILE */

@media (max-width: 650px) {

    .services .service-card {
        width: min(100%, 340px) !important;
        min-width: 0 !important;
        max-width: 340px !important;

        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
    }
}


/* =========================================================
   ZAG SERVICE — BARRE DE NAVIGATION BASSE
   ========================================================= */

.bottom-nav {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    background: rgba(11, 31, 51, 0.97) !important;

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

    box-shadow: 0 -8px 25px rgba(0,0,0,.15);

    padding:
        5px 6px
        env(safe-area-inset-bottom);

    box-sizing: border-box;
}

.bottom-nav button {
    flex: 1;

    height: 58px;

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

    gap: 3px;

    background: transparent !important;

    color: #FFFFFF !important;

    border: none !important;

    font-family: "Manrope", sans-serif;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    padding: 4px 2px;
}

.bottom-nav-icon {
    display: block;

    font-size: 21px;
    line-height: 1;

    color: #FFFFFF !important;
}

.bottom-nav button:hover {
    background: rgba(255,255,255,.08) !important;
    color: #FFFFFF !important;
}

.bottom-nav button:active {
    transform: scale(.94);
}


/* Contenu non caché derrière la barre */

body {
    padding-bottom: 78px !important;
}


/* Sur téléphone */

@media (max-width: 600px) {

    .bottom-nav {
        height: 64px;
    }

    .bottom-nav button {
        height: 54px;
        font-size: 9px;
    }

    .bottom-nav-icon {
        font-size: 19px;
    }

    body {
        padding-bottom: 72px !important;
    }
}


/* =========================================================
   ZAG SERVICE — FORMULAIRE DEVIS
========================================================= */

.devis-section {
    width: 100%;
    box-sizing: border-box;
    padding: 40px 16px 95px !important;
    background: #f5f5f5 !important;
    color: #111 !important;
    overflow-x: hidden;
}

.devis-container {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    box-sizing: border-box;
}

.devis-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.devis-form label {
    display: block;
    margin-bottom: 7px;
    color: #222 !important;
    font-size: 14px;
    font-weight: 700;
}

.devis-form input,
.devis-form select,
.devis-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 14px;
    margin: 0 0 17px;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px;
    background: #fff !important;
    color: #111 !important;
    font-family: inherit;
    font-size: 15px;
}

.devis-form textarea {
    min-height: 120px;
    resize: vertical;
}

.devis-submit {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border: 1px solid #111 !important;
    border-radius: 9px;
    background: #111 !important;
    color: #fff !important;
    font-weight: 800;
    cursor: pointer;
}

.devis-message {
    margin: 15px 0 0;
    text-align: center;
    color: #555 !important;
    font-weight: 600;
}

@media (max-width: 600px) {
    .devis-section {
        padding: 28px 16px 90px !important;
    }

    .devis-form {
        padding: 18px 16px;
        border-radius: 14px;
    }
}

@media (max-width: 380px) {
    .devis-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .devis-form {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* =========================================================
   CONNEXION SERVEUR
========================================================= */

.server-login-button {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9998;

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

    padding: 9px 13px;

    background: #0B1F33;
    color: #fff !important;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;

    box-shadow: 0 5px 18px rgba(0,0,0,.15);
}

.server-login-button:hover {
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .server-login-button {
        top: 12px;
        right: 12px;
        padding: 8px 10px;
        font-size: 10px;
    }
}

/* =========================================================
   ZAG SERVICE — HERO DEVICES
   SMARTPHONE + VERSION WEB
========================================================= */

.hero-devices {
    position: relative;
    width: min(100%, 760px);
    height: 390px;
    margin: 38px auto 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 1200px;
    pointer-events: none;
}

/* =========================
   ORDINATEUR
========================= */

.device-laptop {
    position: absolute;
    right: 2%;
    bottom: 8px;
    width: min(82%, 570px);
    transform: rotateY(-5deg) rotateX(2deg);
    filter: drop-shadow(0 25px 30px rgba(0,0,0,.22));
}

.laptop-screen {
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 9px;
    box-sizing: border-box;
    background: linear-gradient(145deg,#42484d,#11151a);
    border: 1px solid #686f75;
    border-radius: 14px 14px 5px 5px;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.28),
        0 10px 25px rgba(0,0,0,.18);
}

.mock-browser-bar {
    height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    box-sizing: border-box;
    background: #20252a;
    border-radius: 7px 7px 0 0;
}

.mock-browser-bar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b9298;
}

.mock-web-page {
    height: calc(100% - 16px);
    overflow: hidden;
    background: #f5f6f7;
    border-radius: 0 0 5px 5px;
    font-family: "Manrope",sans-serif;
}

.mock-web-header {
    height: 17%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    box-sizing: border-box;
    background: #0B1F33;
    color: #fff;
}

.mock-web-header strong {
    font-size: clamp(8px,1.2vw,13px);
    letter-spacing: .5px;
}

.mock-web-header small {
    font-size: clamp(5px,.8vw,8px);
    opacity: .85;
}

.mock-web-content {
    padding: 8%;
    color: #111;
}

.mock-web-content small {
    color: #687078;
    font-size: clamp(5px,.8vw,8px);
    font-weight: 800;
    letter-spacing: 1px;
}

.mock-web-content h3 {
    margin: 5px 0 3px;
    color: #111;
    font-size: clamp(15px,2.8vw,30px);
    line-height: 1;
    font-weight: 800;
}

.mock-web-content p {
    margin: 0;
    color: #70767b;
    font-size: clamp(6px,1vw,10px);
}

.mock-web-services {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-top: 7%;
}

.mock-web-services span {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e1e4e7;
    border-radius: 5px;
    color: #0B1F33;
    font-size: clamp(5px,.8vw,8px);
    font-weight: 800;
    text-align: center;
}

.laptop-base {
    width: 112%;
    height: 13px;
    margin-left: -6%;
    background: linear-gradient(180deg,#596168,#252a2f);
    border-radius: 2px 2px 14px 14px;
    box-shadow: 0 8px 12px rgba(0,0,0,.2);
}

/* =========================
   SMARTPHONE
========================= */

.device-phone {
    position: absolute;
    z-index: 5;
    left: 7%;
    bottom: 4px;
    width: 180px;
    height: 350px;
    padding: 9px;
    box-sizing: border-box;
    background: linear-gradient(145deg,#4c5359,#11151a 65%,#30363b);
    border: 1px solid #70777d;
    border-radius: 27px;
    transform: rotateY(8deg) rotateZ(-3deg);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.35),
        0 28px 45px rgba(0,0,0,.28);
}

.phone-speaker {
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 3;
    width: 42px;
    height: 4px;
    transform: translateX(-50%);
    background: #111;
    border-radius: 10px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f5f6f7;
    border-radius: 20px;
    font-family: "Manrope",sans-serif;
}

.mock-phone-top {
    height: 13%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    box-sizing: border-box;
    background: #0B1F33;
    color: #fff;
}

.mock-phone-top strong {
    font-size: 9px;
}

.mock-phone-top span {
    font-size: 9px;
    opacity: .7;
}

.mock-phone-hero {
    padding: 22px 14px 17px;
    background: linear-gradient(145deg,#fff,#e7eaed);
}

.mock-phone-hero small {
    color: #697077;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mock-phone-hero h3 {
    margin: 5px 0 12px;
    color: #111;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.mock-phone-hero button {
    min-height: 25px;
    padding: 0 11px;
    background: #0B1F33;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 7px;
    font-weight: 800;
}

.mock-phone-title {
    padding: 12px 14px 7px;
    color: #0B1F33;
    font-size: 9px;
    font-weight: 800;
}

.mock-phone-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 14px;
}

.mock-phone-services span {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e0e3e6;
    border-radius: 7px;
    color: #0B1F33;
    font-size: 7px;
    font-weight: 800;
    text-align: center;
}

.phone-home {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 38px;
    height: 3px;
    transform: translateX(-50%);
    background: #777;
    border-radius: 10px;
}

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

@media (max-width:650px) {

    .hero-devices {
        width: 100%;
        height: 300px;
        margin-top: 28px;
    }

    .device-laptop {
        right: -4%;
        bottom: 8px;
        width: 82%;
        transform: rotateY(-4deg) rotateX(2deg);
    }

    .device-phone {
        left: 1%;
        bottom: 0;
        width: 135px;
        height: 265px;
        border-radius: 22px;
        padding: 7px;
    }

    .phone-screen {
        border-radius: 16px;
    }

    .mock-phone-hero {
        padding: 17px 11px 12px;
    }

    .mock-phone-hero h3 {
        font-size: 14px;
        margin-bottom: 9px;
    }

    .mock-phone-services {
        gap: 4px;
        padding: 0 10px;
    }

    .mock-phone-services span {
        min-height: 32px;
        font-size: 6px;
    }

    .mock-phone-title {
        padding: 9px 10px 5px;
        font-size: 7px;
    }

    .mock-web-services {
        gap: 3px;
    }

    .mock-web-services span {
        min-height: 28px;
    }
}


/* =========================================================
   MENU SITE CLIENT — MOBILE
========================================================= */

.header .menu.menu-ouvert {
    display: flex;
}

.menu-button {
    cursor: pointer;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .menu-button {
        display: none;
    }

    .header .menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: auto;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .header .menu a {
        padding: 10px 14px;
        color: #ffffff;
    }

    .header .menu a:hover {
        background: rgba(255,255,255,0.10);
    }
}

@media (max-width: 768px) {
    .header .menu {
        display: none;
    }

    .header .menu.menu-ouvert {
        display: flex;
    }
}


/* =========================================================
   BOUTON RETOUR — DEMANDE DE DEVIS
========================================================= */

.devis-retour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    margin: 0 0 24px 0;
    padding: 11px 18px;
    border: 1px solid #111111;
    border-radius: 10px;
    background: #111111;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    opacity: 1;
    visibility: visible;
}

.devis-retour:hover {
    background: #2a2a2a;
}

.devis-retour:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .devis-retour {
        min-height: 42px;
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* =========================================================
   ESPACE SOUS LE HEADER — PAGE DEVIS
========================================================= */

#devis {
    padding-top: 110px !important;
}

@media (max-width: 600px) {
    #devis {
        padding-top: 90px !important;
    }
}