:root{
    --navy:#061f66;
    --navy2:#021544;
    --blue:#092e7b;
    --teal:#0099a8;
    --teal2:#20b5bf;
    --yellow:#f2a900;
    --red:#ff5457;
    --purple:#7654a9;
    --sky:#eaf7fb;
    --soft:#f7fbff;
    --line:#d9e9f0;
    --ink:#07184f;
    --muted:#587092;
    --white:#fff;

    --radius-xs:10px;
    --radius-sm:14px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;

    --shadow-sm:0 8px 18px rgba(7,29,99,.04);
    --shadow-md:0 14px 34px rgba(7,29,99,.06);
    --shadow-lg:0 20px 54px rgba(7,29,99,.12);

    --transition:.18s ease;

    --header-height:92px;

    --content-spacing:22px;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter,Arial,system-ui,sans-serif;
    background:#ffffff;
    color:var(--ink);
}

a{color:inherit}

.main{
    background:
        url('/assets/img/bg-mobilite.png') left top/cover no-repeat;
}

/* APP LAYOUT */

.app-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:275px 1fr;
    background:#f6f9fc;
}

/* SIDEBAR */

.sidebar{
    width:275px;
    min-height:100vh;
    background:linear-gradient(180deg,#021952 0%,#021952 42%,#021952 100%);
    color:white;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:8px 0 28px rgba(7,29,99,.12);
}

.side-brand{
    display:flex;
    align-items:center;
    gap:14px;
    background:white;
    color:var(--navy);
    text-decoration:none;
    padding:22px 20px 20px;
    border-radius:0 0 30px 0;
}

.logo-mark{
    width:62px;
    height:62px;
    border-radius:20px;
    background:
        radial-gradient(circle at 32% 18%,#fff 0 18%,transparent 19%),
        linear-gradient(135deg,var(--teal),#0046a8);
    box-shadow:0 12px 24px rgba(0,153,168,.18);
    position:relative;
    flex:none;
}

.logo-mark:after{
    content:'S';
    position:absolute;
    inset:7px 0 0 15px;
    color:#fff;
    font-size:42px;
    font-weight:900;
    font-style:italic;
}

.brand-title{
    display:block;
    font-size:1.45rem;
    line-height:1;
    font-weight:900;
}

.brand-title em{
    display:block;
    color:var(--teal);
    font-style:italic;
    font-weight:800;
}

.tagline{
    display:block;
    margin-top:7px;
    font-size:1.05rem;
    color:var(--blue);
    font-weight:800;
}

.side-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:24px 18px 18px;
}

.side-nav a{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    color:white;
    text-decoration:none;
    padding:14px 16px;
    border-radius:13px;
    font-weight:800;
    font-size:15px;
    white-space:nowrap;
    transition:.2s ease;
}

.side-nav a.active,
.side-nav a:hover{
    background:linear-gradient(90deg,var(--teal),var(--teal2));
    box-shadow:0 12px 26px rgba(0,153,168,.28);
}

.nav-icon{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    font-size:18px;
}

.side-nav a span:last-child{
    flex:1;
}

.sidebar-card{
    margin:8px 22px 16px;
    padding:18px 0 0;
    border-top:1px solid rgba(255,255,255,.16);
}

.sidebar-card-label{
    display:none;
}

.sidebar-card strong{
    display:block;
    color:white;
    line-height:1.25;
    font-size:1rem;
    margin-bottom:12px;
}

.sidebar-card p{
    color:white;
    opacity:.94;
    line-height:1.45;
    margin:0;
    font-weight:650;
}

.sidebar-illustration{
    margin-top:auto;
    width:100%;
    height:480px;
    background:
        linear-gradient(180deg,rgba(2,21,68,0) 0%,rgba(2,21,68,.08) 46%,rgba(2,21,68,.36) 100%),
        url('/assets/img/sidebar-mobilite.webp') center bottom/100% auto no-repeat;
}

.logout-link{
    display:flex;
    align-items:center;
    gap:12px;
    color:white;
    text-decoration:none;
    font-weight:800;
    margin:14px 18px 20px;
    padding:17px 18px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
}

/* MAIN */

.main{
    min-width:0;
    padding:0;
}

.main-header{
    min-height:100px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 44px;
    border-bottom:1px solid #e6eef5;
    box-shadow:0 8px 24px rgba(7,29,99,.04);
}

.header-kicker{
    display:none;
}

.main-header h1{
    margin:0;
    color:var(--navy);
    font-size:26px;
}

.main-header p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:600;
}

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

.main > section,
.main > div{
    margin-left:44px;
    margin-right:44px;
}

.main > section:first-of-type,
.main > div:first-of-type{
    margin-top:26px;
}

/* COMMON */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:#fff;
    padding:10px 15px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 8px 18px rgba(7,29,99,.04);
}

.btn.primary{
    background:var(--navy);
    color:white;
    border-color:var(--navy);
}

.btn.teal{
    background:var(--teal);
    color:white;
    border-color:var(--teal);
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:22px;
    box-shadow:var(--shadow-md);
}

.card.dark{
    background:linear-gradient(135deg,var(--navy),#001846);
    color:white;
}

.card.soft{
    background:linear-gradient(140deg,#fff,var(--sky));
}

.card h2{
    margin:0 0 14px;
    color:var(--navy);
}

.card.dark h2{
    color:white;
}

.muted{
    color:var(--muted);
}

.card.dark .muted{
    color:#c5def0;
}

.pill{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:8px 14px;
    background:var(--teal);
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.empty{
    border:1px dashed var(--line);
    border-radius:20px;
    padding:24px;
    background:#fbfdff;
}

.badge{
    display:inline-flex;
    border-radius:999px;
    padding:5px 10px;
    background:#e7fafd;
    color:var(--teal);
    font-weight:900;
    font-size:.78rem;
}

.grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
    margin-top:18px;
}

.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

/* DASHBOARD */

.dashboard-hero{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    min-height:190px;
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    margin-bottom:18px;
}

.script{
    font-family:'Segoe Script','Brush Script MT',cursive;
    font-style:italic;
}

.dashboard-hero .script{
    color:var(--teal);
    font-size:34px;
    line-height:1.15;
    padding:34px;
    margin:0;
}

.hero-photo{
    background:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.15) 35%,rgba(0,153,168,.25)),
        url('/assets/img/hero-mobilite.jpg') center/cover no-repeat;
}

.hero{
    display:none;
}

.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:18px 0;
}

.stat-card{
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:var(--shadow-md);
}

.stat-card.dark{
    background:linear-gradient(135deg,var(--navy),#001846);
    color:white;
}

.stat-icon{
    width:52px;
    height:52px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:24px;
}

.stat-icon.teal{background:#e7fafd}
.stat-icon.yellow{background:#fff6d9}
.stat-icon.purple{background:#f2edff}
.stat-icon.white{background:rgba(255,255,255,.16)}

.stat-card strong{
    display:block;
    font-size:24px;
    color:var(--navy);
}

.stat-card.dark strong{
    color:white;
    font-size:17px;
}

.stat-card span{
    color:var(--muted);
    font-weight:700;
}

.stat-card.dark span{
    color:#c5def0;
}

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

.dashboard-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* PAGE HEAD */

.page-head{
    margin-bottom:18px;
}

.page-head h2{
    margin:12px 0 4px;
    font-size:34px;
    color:var(--navy);
}

.page-head p{
    margin:0;
    color:var(--muted);
}

/* TIMELINE / PLANNING */

.planning-grid,
.workshop-grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:18px;
}

.planning-side,
.workshop-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
}

.section-title h2{
    margin:0;
}

.timeline,
.workshop-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.timeline-item,
.workshop-card{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 24px rgba(7,29,99,.04);
}

.timeline-date,
.workshop-date{
    min-height:82px;
    border-radius:20px;
    background:linear-gradient(180deg,#eaf7fb,#fff);
    color:var(--navy);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.workshop-date{
    background:linear-gradient(180deg,#fff6d9,#fff);
}

.timeline-date strong,
.workshop-date strong{
    font-size:32px;
    line-height:1;
}

.timeline-date span{
    font-size:.8rem;
    text-transform:uppercase;
    font-weight:900;
    color:var(--teal);
}

.workshop-date span{
    font-size:.8rem;
    text-transform:uppercase;
    font-weight:900;
    color:var(--yellow);
}

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

.timeline-content h3,
.workshop-content h3{
    margin:10px 0 6px;
    color:var(--navy);
}

.time{
    font-weight:900;
    color:var(--navy);
}

.note{
    margin-top:10px;
    padding:12px;
    border-radius:16px;
    background:#f6fbfd;
}

.next-card{
    background:linear-gradient(135deg,var(--navy),#001846);
    color:white;
}

.next-card .muted{
    color:#c5def0;
}

.mini-label{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    font-weight:900;
    font-size:.78rem;
}

.big-date{
    font-size:46px;
    font-weight:900;
    margin:12px 0 0;
}

.check-list,
.mini-steps{
    display:flex;
    flex-direction:column;
    gap:10px;
    color:var(--navy);
    font-weight:800;
}

.mini-steps div{
    display:flex;
    align-items:center;
    gap:10px;
}

.mini-steps span{
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--teal);
    color:white;
    display:grid;
    place-items:center;
    font-size:.85rem;
}

/* INFORMATIONS */

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

.profile-card{
    background:linear-gradient(135deg,#fff,#eaf7fb);
    border:1px solid var(--line);
    border-radius:28px;
    padding:26px;
    box-shadow:var(--shadow-md);
}

.profile-avatar{
    width:76px;
    height:76px;
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--teal),var(--teal2));
    color:white;
    display:grid;
    place-items:center;
    font-size:34px;
    font-weight:900;
    margin-bottom:18px;
}

.profile-card h2{
    margin:0;
    color:var(--navy);
}

.profile-lines{
    display:grid;
    gap:12px;
    margin-top:22px;
}

.profile-lines div{
    padding:14px;
    border-radius:18px;
    background:white;
    border:1px solid var(--line);
}

.profile-lines span{
    display:block;
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}

.profile-lines strong{
    color:var(--navy);
}

.contact-list{
    display:grid;
    gap:12px;
    margin-top:18px;
    font-weight:800;
}

.journey-step{
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}

.journey-step:last-child{
    border-bottom:0;
}

.journey-step span{
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#d9e9f0;
    color:var(--navy);
    font-weight:900;
    flex:none;
}

.journey-step.active span{
    background:var(--teal);
    color:white;
}

.journey-step strong{
    color:var(--navy);
}

.journey-step p{
    margin:4px 0 0;
    color:var(--muted);
}

.documents-card{
    grid-column:1 / -1;
}

.document-list{
    display:grid;
    gap:12px;
}

.document-item{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border:1px solid var(--line);
    border-radius:20px;
    background:white;
}

.document-icon{
    width:52px;
    height:52px;
    border-radius:18px;
    background:#f2edff;
    display:grid;
    place-items:center;
    font-size:24px;
}

/* FORMS */

.login-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.5fr .5fr;
}

.login-visual{
    background:linear-gradient(135deg,#fff 0,#eefaff 55%,#fff 100%);
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.login-card-wrap{
    display:grid;
    place-items:center;
    padding:28px;
    background:linear-gradient(145deg,var(--navy),#00113e);
    position:relative;
    overflow:hidden;
}

.login-card{
    width:min(440px,100%);
    position:relative;
}

.field{
    display:block;
    margin:14px 0;
}

.field span{
    display:block;
    font-weight:800;
    margin-bottom:7px;
}

input{
    width:100%;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px 15px;
    font-size:1rem;
}

.error{
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#9f1239;
    border-radius:16px;
    padding:12px;
}

.success{
    background:#e7f8f4;
    color:#087d82;
    border:1px solid #9fe4df;
    border-radius:14px;
    padding:12px 14px;
    font-weight:700;
}

.poster{
    max-height:484px;
    width:396px;
    border-radius:30px;
    box-shadow:0 22px 60px rgba(7,29,99,.18);
    border:1px solid #e6eef2;
}

/* RESPONSIVE */

@media(max-width:1000px){
    .dashboard-stats,
    .dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .app-layout{
        grid-template-columns:1fr;
    }

    .sidebar{
        width:100%;
        min-height:auto;
    }

    .sidebar-illustration{
        display:none;
    }

    .main-header{
        min-height:auto;
        padding:22px;
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .main > section,
    .main > div{
        margin-left:18px;
        margin-right:18px;
    }

    .dashboard-hero{
        grid-template-columns:1fr;
    }

    .hero-photo{
        min-height:180px;
    }

    .planning-grid,
    .workshop-grid,
    .info-grid{
        grid-template-columns:1fr;
    }

    .timeline-item,
    .workshop-card,
    .document-item{
        grid-template-columns:1fr;
    }

    .col-3,
    .col-4,
    .col-5,
    .col-7,
    .col-8{
        grid-column:span 12;
    }

    .login-page{
        grid-template-columns:1fr;
    }

    .login-visual{
        display:none;
    }
}

.login-screen{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    background:#ffffff;
}

.login-left{
    position:relative;
    overflow:hidden;
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background: linear-gradient(#ffffff,#cccccc);    
}

.login-brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--navy);
}

.login-message{
    position:relative;
    z-index:2;
    max-width:460px;
}

.login-message h1{
    color:var(--navy);
    font-size:clamp(2.8rem,5vw,5.2rem);
    line-height:.95;
    margin:20px 0;
}

.login-message p{
    color:var(--blue);
    font-size:1.18rem;
    line-height:1.55;
    font-weight:700;
}

.login-illustration{
    height:450px;
    margin:20px -42px -42px;
    background:
        linear-gradient(180deg,rgba(246,249,252,0) 0%,rgba(246,249,252,.15) 35%,rgba(246,249,252,.85) 100%),
        url('/assets/img/carte001.png') center bottom/contain no-repeat;
}

.login-right{
    display:grid;
    place-items:center;
    padding:34px;
    background:
        radial-gradient(circle at top right,rgba(0,153,168,.22),transparent 34%),
        linear-gradient(145deg,var(--navy),#00113e);
}

.login-box{
    width:min(460px,100%);
    background:white;
    border:1px solid var(--line);
    border-radius:32px;
    padding:32px;
    box-shadow:0 28px 80px rgba(0,0,0,.18);
}

.login-box-header h2{
    margin:14px 0 8px;
    color:var(--navy);
    font-size:2rem;
}

.login-box-header p{
    margin:0 0 22px;
    color:var(--muted);
    font-weight:650;
}

.login-submit{
    width:100%;
    margin-top:10px;
    padding:14px 18px;
}

.small-link{
    margin-top:18px;
    text-align:center;
}

.small-link a{
    color:var(--teal);
    font-weight:400;
    text-decoration:none;
}

.small-link a:hover{
    text-decoration:underline;
}

@media(max-width:900px){
    .login-screen{
        grid-template-columns:1fr;
    }

    .login-left{
        display:none;
    }

    .login-right{
        min-height:100vh;
        padding:20px;
    }
}
.brand-logo-img{
    width:170px;
    height:auto;
    display:block;
}

.side-brand{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

/* LOGIN */

.login-screen{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(520px,1.05fr) minmax(420px,.95fr);
    background:#ffffff;
}

.login-left{
    position:relative;
    overflow:hidden;
    padding:44px;
    display:flex;
    flex-direction:column;
    background: linear-gradient(#ffffff,#cccccc);    
}

.login-brand{
    position:relative;
    z-index:2;
}

.login-logo{
    width:220px;
}

.login-message{
    position:relative;
    z-index:2;
    max-width:560px;
    margin:auto 0 24px;
}

.login-message h1{
    max-width:620px;
    color:var(--navy);
    font-size:clamp(2.8rem,5vw,5rem);
    line-height:.98;
    margin:20px 0;
    letter-spacing:-.04em;
}

.login-message p{
    max-width:560px;
    color:var(--blue);
    font-size:1.18rem;
    line-height:1.55;
    font-weight:750;
}

.login-illustration{
    height:360px;
    margin:16px -44px -44px;
    background:
        linear-gradient(180deg,rgba(246,249,252,0) 0%,rgba(246,249,252,.12) 30%,rgba(246,249,252,.92) 100%),
        url('/assets/img/carte001.png') center bottom/contain no-repeat;
}

.login-right{
    display:grid;
    place-items:center;
    padding:34px;
    background:
        radial-gradient(circle at top right,rgba(0,153,168,.22),transparent 34%),
        linear-gradient(145deg,var(--navy),#00113e);
}

.login-box{
    width:min(460px,100%);
    background:white;
    border:1px solid var(--line);
    border-radius:32px;
    padding:34px;
    box-shadow:0 28px 80px rgba(0,0,0,.18);
}

.login-box-logo{
    width:170px;
    margin-bottom:22px;
}

.login-box-header h2{
    margin:14px 0 8px;
    color:var(--navy);
    font-size:2rem;
    line-height:1.05;
}

.login-box-header p{
    margin:0 0 22px;
    color:var(--muted);
    font-weight:650;
}

.login-form{
    margin-top:8px;
}

.login-submit{
    width:100%;
    margin-top:10px;
    padding:14px 18px;
}

.small-link{
    margin-top:18px;
    text-align:center;
}

.small-link a{
    color:var(--teal);
    font-weight:900;
    text-decoration:none;
}

.small-link a:hover{
    text-decoration:underline;
}

.brand-logo-img{
    height:auto;
    display:block;
}

@media(max-width:900px){
    .login-screen{
        grid-template-columns:1fr;
    }

    .login-left{
        display:none;
    }

    .login-right{
        min-height:100vh;
        padding:20px;
    }

    .login-box{
        padding:26px;
        border-radius:26px;
    }
}
.dashboard-top{
    display:grid !important;
    grid-template-columns:2fr repeat(3,1fr) !important;
    gap:16px !important;
    margin-top:26px !important;
}

.dashboard-top .dashboard-hero{
    margin:0 !important;
    min-height:190px;
}

.dashboard-stat{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:190px !important;
    text-decoration:none !important;
}

.dashboard-stat strong{
    font-size:42px !important;
    line-height:1 !important;
}

.dashboard-stat span{
    display:block;
    margin-top:8px;
}

.dashboard-grid-large{
    display:grid !important;
    grid-template-columns:1.35fr 1fr !important;
    gap:18px !important;
    margin-top:18px !important;
}

.dashboard-bottom{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:18px !important;
    margin-top:18px !important;
    margin-bottom:28px !important;
}

.appointment-row{
    display:grid !important;
    grid-template-columns:86px 1fr auto !important;
    gap:18px !important;
    align-items:center !important;
    padding:16px !important;
    border:1px solid var(--line) !important;
    border-radius:20px !important;
    margin-bottom:12px !important;
    background:white !important;
}

@media(max-width:1100px){
    .dashboard-top,
    .dashboard-grid-large,
    .dashboard-bottom{
        grid-template-columns:1fr !important;
    }

    .appointment-row{
        grid-template-columns:1fr !important;
    }
}


.dashboard-top{
    display:grid !important;
    grid-template-columns:1.65fr repeat(3,1fr) !important;
    gap:16px !important;
    margin-top:24px !important;
}

.dashboard-hero{
    min-height:175px !important;
    border-radius:18px !important;
    box-shadow:0 10px 28px rgba(7,29,99,.06) !important;
}

.dashboard-hero .script{
    font-size:32px !important;
    padding:28px 30px !important;
    color:#0099a8 !important;
}

.hero-photo{
    background:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.35) 28%,rgba(0,153,168,.15)),
        url('/assets/img/hero-mobilite.jpg') center/cover no-repeat !important;
}

.dashboard-stat{
    min-height:175px !important;
    border-radius:18px !important;
    padding:18px 14px !important;
    box-shadow:0 10px 28px rgba(7,29,99,.06) !important;
}

.dashboard-stat .stat-icon{
    width:58px !important;
    height:58px !important;
    border-radius:50% !important;
    font-size:26px !important;
    margin-bottom:8px !important;
}

.dashboard-stat strong{
    font-size:42px !important;
    color:#007f95 !important;
    margin:2px 0 6px !important;
}

.dashboard-stat span{
    color:#061f66 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
}

.dashboard-stat small{
    font-size:13px !important;
    color:#0057a8 !important;
    margin-top:12px !important;
}

.dashboard-grid-large{
    display:grid !important;
    grid-template-columns:1.25fr 1fr !important;
    gap:18px !important;
    margin-top:18px !important;
}

.card{
    border-radius:18px !important;
    border:1px solid #dcecf4 !important;
    box-shadow:0 10px 28px rgba(7,29,99,.05) !important;
}

.card-title-row h2{
    font-size:20px !important;
    color:#061f66 !important;
}

.appointment-row{
    grid-template-columns:86px 1fr 72px !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    min-height:104px !important;
}

.appointment-date{
    border-right:1px solid #e3eef5 !important;
    padding-right:14px !important;
}

.appointment-date span{
    color:#007fbd !important;
    font-size:13px !important;
}

.appointment-date strong{
    color:#0087a1 !important;
    font-size:34px !important;
}

.appointment-date small{
    color:#007fbd !important;
    font-size:13px !important;
}

.appointment-content h3{
    font-size:16px !important;
    margin-bottom:6px !important;
}

.appointment-content p{
    font-size:14px !important;
}

.appointment-meta{
    font-size:13px !important;
}

.badge{
    background:#dff7f7 !important;
    color:#008a96 !important;
    border-radius:999px !important;
    padding:7px 12px !important;
}

.calendar-card{
    padding:22px !important;
}

.mini-calendar{
    border:1px solid #e2eef5 !important;
    border-radius:18px !important;
    padding:18px !important;
}

.calendar-month{
    font-size:16px !important;
    color:#0099a8 !important;
    margin-bottom:18px !important;
}

.calendar-week,
.calendar-days{
    gap:6px !important;
}

.calendar-week span{
    font-size:12px !important;
}

.calendar-days span{
    padding:9px 0 !important;
    font-size:14px !important;
}

.calendar-days span.active{
    background:#0099a8 !important;
    box-shadow:0 8px 16px rgba(0,153,168,.25) !important;
}

.dashboard-bottom{
    display:grid !important;
    grid-template-columns:1fr 1fr 1.25fr !important;
    gap:18px !important;
    margin-top:18px !important;
    margin-bottom:28px !important;
}

.dashboard-bottom .card{
    min-height:178px !important;
}

.simple-item{
    border-radius:14px !important;
    padding:14px !important;
}

.help-card .btn{
    width:260px !important;
    max-width:100% !important;
    border-radius:10px !important;
}

.main-header{
    min-height:92px !important;
    padding:0 44px !important;
}

.main-header h1{
    font-size:24px !important;
}

.main-header p{
    font-size:14px !important;
}

@media(max-width:1200px){
    .dashboard-top,
    .dashboard-grid-large,
    .dashboard-bottom{
        grid-template-columns:1fr !important;
    }
}
.dash-top{
    display:grid;
    grid-template-columns:2fr repeat(4,1fr);
    gap:14px;
    margin-top:24px;
}

.dash-hero-card{
    min-height:190px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    overflow:hidden;
    border-radius:16px;
}

.dash-hero-text{
    position:relative;
    display:flex;
    align-items:center;
    padding:28px 30px;
    background:white;
    z-index:1;
}

.dash-hero-text::after{
    content:'';
    position:absolute;
    right:-54px;
    top:0;
    width:110px;
    height:100%;
    background:white;
    border-radius:0 55% 55% 0;
    z-index:2;
}

.dash-hero-text p{
    position:relative;
    z-index:3;
    margin:0;
    font-family:'Segoe Script','Brush Script MT',cursive;
    font-size:28px;
    line-height:1.22;
    color:#0099a8;
}

.dash-hero-image{
    background:
        linear-gradient(90deg,rgba(255,255,255,.1),rgba(0,153,168,.08)),
        url('/assets/img/hero-mobilite.jpg') center/cover no-repeat;
}

.side-nav{
    gap:8px !important;
    padding:22px 20px 14px !important;
}

.side-nav a{
    min-height:48px !important;
    padding:12px 14px !important;
    border-radius:12px !important;
    color:rgba(255,255,255,.92) !important;
    font-size:14px !important;
    font-weight:800 !important;
    position:relative;
}

.side-nav a.active{
    background:linear-gradient(90deg,#0099a8,#13b8c3) !important;
    color:white !important;
    box-shadow:0 12px 24px rgba(0,153,168,.28) !important;
}

.side-nav a:not(.active):hover{
    background:rgba(255,255,255,.08) !important;
}

.nav-icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:white;
    font-size:16px !important;
    opacity:.95;
}

.nav-badge{
    margin-left:auto;
    width:22px;
    height:22px;
    border-radius:999px;
    display:grid !important;
    place-items:center;
    flex:0 0 22px !important;
    background:#ff4d5d;
    color:white;
    font-size:12px;
    font-weight:900;
    box-shadow:0 6px 16px rgba(255,77,93,.35);
}

.logout-link{
    margin:16px 20px 18px !important;
    min-height:48px;
    border-radius:999px !important;
    justify-content:flex-start;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12);
}

.side-brand{
    padding:22px 22px 18px !important;
    border-radius:0 0 28px 0 !important;
}

.side-brand .tagline{
    margin-top:4px !important;
}
.nav-icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.side-nav a{
    position:relative;
    overflow:hidden;
}

.side-nav a::before{
    content:'';
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:4px;
    border-radius:999px;
    background:transparent;
    transition:.2s ease;
}

.side-nav a.active::before{
    background:white;
}

.side-nav a.active .nav-icon{
    background:rgba(255,255,255,.18);
}

.nav-icon{
    transition:.2s ease;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-message{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#e7fafd;
    color:#0099a8;
    display:grid;
    place-items:center;
    position:relative;
    text-decoration:none;
}

.header-message svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.header-message span{
    position:absolute;
    right:-5px;
    top:-5px;
    width:20px;
    height:20px;
    border-radius:999px;
    background:#ff4d5d;
    color:white;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:900;
}

.header-user{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,#0099a8,#20b5bf);
    color:white;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:18px;
    box-shadow:0 10px 22px rgba(0,153,168,.22);
}
.messages-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:18px;
}

.messages-list h2{
    margin-top:0;
}

.conversation{
    display:grid;
    grid-template-columns:48px 1fr 24px;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:18px;
    text-decoration:none;
    background:#f6fbfd;
    border:1px solid var(--line);
}

.conversation.active{
    background:#e7fafd;
    border-color:#bfeff2;
}

.conversation-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--teal2));
    color:white;
    display:grid;
    place-items:center;
    font-weight:900;
}

.conversation strong{
    color:var(--navy);
}

.conversation p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:.86rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.conversation-badge{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#ff4d5d;
    color:white;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:900;
}

.chat-card{
    padding:0;
    overflow:hidden;
}

.chat-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px;
    border-bottom:1px solid var(--line);
    background:white;
}

.chat-header h2{
    margin:0;
}

.chat-body{
    min-height:420px;
    padding:22px;
    background:#f8fbfd;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.message-row{
    display:flex;
}

.message-row.sent{
    justify-content:flex-end;
}

.message-bubble{
    max-width:68%;
    padding:13px 15px;
    border-radius:18px;
    background:white;
    border:1px solid var(--line);
    color:var(--navy);
    font-weight:650;
}

.message-row.sent .message-bubble{
    background:var(--teal);
    color:white;
    border-color:var(--teal);
}

.message-bubble span{
    display:block;
    margin-top:6px;
    font-size:.75rem;
    opacity:.72;
}

.chat-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    padding:16px;
    border-top:1px solid var(--line);
    background:white;
}

.chat-form input:disabled,
.chat-form button:disabled{
    opacity:.75;
}

@media(max-width:900px){
    .messages-layout{
        grid-template-columns:1fr;
    }

    .message-bubble{
        max-width:88%;
    }
}

.chat-form{
    display:grid;
    grid-template-columns:44px 1fr 48px;
    gap:10px;
    align-items:center;
}

.chat-form input{
    height:48px;
    border-radius:999px;
    background:#f8fbfd;
}

.chat-attach,
.chat-send{
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:900;
}

.chat-attach:disabled,
.chat-send:disabled{
    cursor:not-allowed;
}

.chat-send:not(:disabled){
    cursor:pointer;
}

.chat-attach{
    background:#eef7fb;
    color:var(--teal);
    font-size:24px;
}

.chat-send{
    background:linear-gradient(135deg,var(--teal),var(--teal2));
    color:white;
}

.chat-send svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.message-row{
    gap:10px;
    align-items:flex-end;
}

.message-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--teal2));
    color:white;
    display:grid;
    place-items:center;
    font-size:14px;
    font-weight:900;
    flex:none;
}

.message-row.received .message-bubble{
    border-bottom-left-radius:6px;
}

.message-row.sent .message-bubble{
    border-bottom-right-radius:6px;
}
.chat-header{
    position:relative;
}

.chat-user{
    flex:1;
}

.chat-info{
    width:42px;
    height:42px;
    border-radius:14px;
    background:#e7fafd;
    color:var(--teal);
    display:grid;
    place-items:center;
}

.chat-info svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.chat-date-separator{
    align-self:center;
    padding:6px 12px;
    border-radius:999px;
    background:#e7fafd;
    color:var(--teal);
    font-size:.78rem;
    font-weight:900;
    margin-bottom:4px;
}
.conversation.unread{
    box-shadow:0 10px 24px rgba(0,153,168,.10);
}

.conversation.unread strong::after{
    content:'';
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff4d5d;
    margin-left:8px;
    vertical-align:middle;
}

.conversation.unread p{
    color:var(--navy);
    font-weight:800;
}
.conversation{
    min-width:0;
}

.conversation-text{
    min-width:0;
    flex:1;
}

.conversation-text strong{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:1rem;
}

.conversation-text p{
    margin:4px 0 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
}
.chat-contact-strip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 20px;
    background:#f8fbfd;
    border-bottom:1px solid var(--line);
}

.chat-contact-strip strong{
    display:block;
    color:var(--navy);
}

.chat-contact-strip span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:.9rem;
}

.chat-contact-strip a{
    color:var(--teal);
    font-weight:900;
    text-decoration:none;
    white-space:nowrap;
}
.chat-form.disabled{
    position:relative;
}

.chat-disabled-note{
    grid-column:1 / -1;
    color:var(--muted);
    font-size:.82rem;
    font-weight:700;
    text-align:center;
    margin-top:2px;
}
.messaging-note{
    grid-column:1 / -1;
    padding:18px 22px;
    background:linear-gradient(135deg,#fff,#eaf7fb);
}

.messaging-note strong{
    color:var(--navy);
}

.messaging-note p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:400;
}
.messages-layout{
    align-items:start;
}

.messages-list{
    min-height:620px;
}

.chat-card{
    min-height:620px;
}

.chat-body{
    min-height:390px;
}

.messaging-note{
    margin-top:0;
}


.planning-page{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:18px;
}

.planning-list,.atelier-list{
    padding:22px;
    background: linear-gradient(135deg,#eaeaea,#ffffff);
}

.planning-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.planning-head h2{
    display:flex;
    align-items:center;
    margin:0;
    color:var(--navy);
}

.planning-head p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:700;
}

.planning-count{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#e7fafd;
    color:var(--teal);
    font-weight:900;
}

.planning-timeline{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.planning-event{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:18px;
    padding:16px;
    border:1px solid #0f509d;
    border-radius:20px;
    background:#fff;
}

.planning-date{
    text-align:center;
    border-right:1px solid var(--line);
    padding-right:16px;
    color:var(--teal);
    font-weight:900;
}

.planning-date span,
.planning-date small{
    display:block;
    text-transform:uppercase;
    color:#007fbd;
    font-size:13px;
}

.planning-date strong{
    display:block;
    font-size:34px;
    line-height:1;
}

.planning-event-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.planning-time{
    font-weight:900;
    color:var(--navy);
}

.planning-event-main h3{
    margin:10px 0 8px;
    color:var(--navy);
}

.planning-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:750;
}

.planning-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.planning-meta svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.planning-note{
    margin:12px 0 0;
    padding:12px;
    border-radius:14px;
    background:#f6fbfd;
    color:var(--navy);
    font-weight:650;
}

.planning-aside{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.planning-next{
    border-radius:var(--radius-lg);
    padding:24px;
    color:white;
    background:
        radial-gradient(circle at top right,rgba(32,181,191,.35),transparent 34%),
        linear-gradient(135deg,var(--navy),#001846);
    box-shadow:0 14px 34px rgba(7,29,99,.12);
}

.planning-next span{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
}

.planning-next h2{
    margin:18px 0 10px;
    color:white;
}

.planning-next strong{
    display:block;
    font-size:44px;
    line-height:1;
}

.planning-next p{
    margin:8px 0;
    color:#c5def0;
    font-weight:800;
}

.planning-next em{
    font-style:normal;
    color:white;
    font-weight:800;
}

.planning-help h2{
    display:flex;
    align-items:center;
}

@media(max-width:1000px){
    .planning-page{
        grid-template-columns:1fr;
    }

    .planning-event{
        grid-template-columns:1fr;
    }

    .planning-date{
        border-right:0;
        border-bottom:1px solid var(--line);
        padding:0 0 12px;
    }
}

.atelier-page{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:18px;
}

.atelier-list{
    padding:22px;
}

.atelier-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.atelier-head h2{
    display:flex;
    align-items:center;
    margin:0;
    color:var(--navy);
}

.atelier-head p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:700;
}

.atelier-count{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#fff6d9;
    color:var(--yellow);
    font-weight:900;
}

.atelier-items{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.atelier-item{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:18px;
    padding:16px;
    border:1px solid #0f509d;
    border-radius:20px;
    background:#fff;
}

.atelier-date{
    text-align:center;
    border-right:1px solid var(--line);
    padding-right:16px;
    color:var(--yellow);
    font-weight:900;
}

.atelier-date span,
.atelier-date small{
    display:block;
    text-transform:uppercase;
    color:#d48f00;
    font-size:13px;
}

.atelier-date strong{
    display:block;
    font-size:34px;
    line-height:1;
}

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

.atelier-time{
    font-weight:900;
    color:var(--navy);
}

.atelier-main h3{
    margin:10px 0 8px;
    color:var(--navy);
}

.atelier-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:750;
}

.atelier-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.atelier-meta svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.atelier-status{
    display:inline-flex;
    margin:12px 0 0;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid #f7b734;
    background:#fff6d9;
    color:var(--navy);
    font-weight:550;
    font-size: 13px;
}

.atelier-note{
    margin:12px 0 0;
    padding:12px;
    border-radius:14px;
    background:#f6fbfd;
    color:var(--navy);
    font-weight:650;
}

.atelier-aside{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.atelier-next{
    border-radius:var(--radius-lg);
    padding:24px;
    color:white;
    background:
        radial-gradient(circle at top right,rgba(242,169,0,.35),transparent 34%),
        linear-gradient(135deg,var(--navy),#001846);
    box-shadow:0 14px 34px rgba(7,29,99,.12);
}

.atelier-next span{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
}

.atelier-next h2{
    margin:18px 0 10px;
    color:white;
}

.atelier-next strong{
    display:block;
    font-size:44px;
    line-height:1;
}

.atelier-next p{
    margin:8px 0;
    color:#c5def0;
    font-weight:800;
}

.atelier-next em{
    font-style:normal;
    color:white;
    font-weight:800;
}

.atelier-check h2,
.atelier-help h2{
    display:flex;
    align-items:center;
}

.check-list.premium div{
    display:flex;
    align-items:center;
    gap:10px;
}

.check-list.premium span{
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e7fafd;
    color:var(--teal);
    font-weight:900;
}

@media(max-width:1000px){
    .atelier-page{
        grid-template-columns:1fr;
    }

    .atelier-item{
        grid-template-columns:1fr;
    }

    .atelier-date{
        border-right:0;
        border-bottom:1px solid var(--line);
        padding:0 0 12px;
    }
}

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

.info-profile{
    background:linear-gradient(135deg,#fff,#eaf7fb);
}

.info-profile h2{
    margin:0;
    color:var(--navy);
}

.info-lines{
    display:grid;
    gap:12px;
    margin-top:22px;
}

.info-lines div{
    padding:14px;
    border-radius:18px;
    background:white;
    border:1px solid var(--line);
}

.info-lines span{
    display:block;
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}

.info-lines strong{
    color:var(--navy);
}

.info-advisor{
    border-radius:var(--radius-lg);
    padding:24px;
    color:white;
    background:
        radial-gradient(circle at top right,rgba(32,181,191,.35),transparent 34%),
        linear-gradient(135deg,var(--navy),#001846);
    box-shadow:0 14px 34px rgba(7,29,99,.12);
}

.info-advisor > span{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
}

.info-advisor h2{
    margin:18px 0 6px;
    color:white;
}

.info-advisor p{
    color:#c5def0;
    font-weight:800;
}

.advisor-contact{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.advisor-contact div{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-weight:800;
}

.advisor-contact svg{
    width:18px;
    height:18px;
    flex:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.info-journey h2,
.info-doc-head h2{
    display:flex;
    align-items:center;
    margin:0;
}

.info-documents{
    grid-column:1 / -1;
}

.info-doc-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}

.info-doc-head p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:700;
}

.info-doc-count{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#f2edff;
    color:var(--purple);
    font-weight:900;
}

.info-doc-list{
    display:grid;
    gap:12px;
}

.info-doc-item{
    display:grid;
    grid-template-columns:54px 1fr auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border:1px solid var(--line);
    border-radius:20px;
    background:white;
}

.info-doc-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    background:#f2edff;
    color:var(--purple);
    display:grid;
    place-items:center;
}

.info-doc-icon svg{
    width:24px;
    height:24px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.info-doc-main strong{
    color:var(--navy);
}

.info-doc-main p{
    margin:5px 0 0;
    color:var(--muted);
    font-weight:700;
}

@media(max-width:1000px){
    .info-page{
        grid-template-columns:1fr;
    }

    .info-doc-item{
        grid-template-columns:1fr;
    }
}

.section-icon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#e7fafd;
    color:var(--teal);
    margin-right:10px;
    flex:none;
}

.section-icon.yellow{
    background:#fff6d9;
    color:#d48f00;
}

.section-icon.purple{
    background:#f2edff;
    color:var(--purple);
}

.section-icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.card{
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
}

.btn{
    transition:all var(--transition);
}

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

.badge{
    letter-spacing:.01em;
}

@media(max-width:900px){

    body{
        background:#f6f9fc;
    }

    .side-nav{
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:6px;
        padding:10px;
    }

    .side-nav a{
        min-height:58px !important;
        padding:8px 4px !important;
        flex-direction:column;
        justify-content:center;
        gap:4px;
        font-size:11px !important;
        white-space:normal;
        text-align:center;
    }

    .nav-icon{
        width:22px !important;
        height:22px !important;
    }

    .nav-icon svg{
        width:17px;
        height:17px;
    }

    .nav-badge{
        position:absolute;
        right:8px;
        top:6px;
    }

    .side-brand,
    .sidebar-card,
    .logout-link{
        display:none !important;
    }

    .sidebar{
        position:sticky;
        top:0;
        z-index:50;
        box-shadow:0 8px 24px rgba(7,29,99,.12);
    }

    .main-header{
        border-radius:0 0 24px 24px;
    }

    .header-actions{
        width:100%;
        justify-content:space-between;
    }

    .header-actions .btn{
        flex:1;
    }

    .page-head h2{
        font-size:28px;
    }
}

@media(max-width:900px){

    .planning-page,
    .atelier-page,
    .info-page,
    .messages-layout{
        grid-template-columns:1fr !important;
        gap:16px;
    }

    .planning-event,
    .atelier-item,
    .info-doc-item{
        grid-template-columns:1fr !important;
    }

    .planning-date,
    .atelier-date{
        border-right:0 !important;
        border-bottom:1px solid var(--line);
        padding:0 0 12px !important;
    }

    .planning-event-top,
    .atelier-top,
    .info-doc-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .planning-meta,
    .atelier-meta{
        flex-direction:column;
        gap:8px;
    }

    .chat-body{
        min-height:360px;
        padding:16px;
    }

    .message-bubble{
        max-width:86%;
    }

    .chat-contact-strip{
        flex-direction:column;
        align-items:flex-start;
    }

    .chat-form{
        grid-template-columns:40px 1fr 44px;
        padding:12px;
    }

    .messages-list{
        min-height:auto;
    }

    .chat-card{
        min-height:auto;
    }
}
/* SCROLLBAR */

*{
    scrollbar-width:thin;
    scrollbar-color:#b8dce8 transparent;
}

*::-webkit-scrollbar{
    width:10px;
    height:10px;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

*::-webkit-scrollbar-thumb{
    background:#c9e6ef;
    border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
    background:#9fd1e2;
}

/* APP ANIMATIONS */

.card,
.dash-stat,
.planning-event,
.atelier-item,
.info-doc-item,
.conversation{
    animation:fadeSlide .35s ease;
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* HOVER PREMIUM */

.planning-event:hover,
.atelier-item:hover,
.info-doc-item:hover,
.conversation:hover,
.dash-event:hover{
    border-color:#0099a8;
    transform:translateY(-2px);
    box-shadow:0 18px 36px rgba(7,29,99,.08);
}

/* BUTTON POLISH */

.btn,
.dash-button,
.dash-contact{
    position:relative;
    overflow:hidden;
}

.btn:before,
.dash-button:before,
.dash-contact:before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,.24) 50%,
        transparent 100%);
    transform:translateX(-120%);
    transition:.55s ease;
}

.btn:hover:before,
.dash-button:hover:before,
.dash-contact:hover:before{
    transform:translateX(120%);
}

/* INPUT PREMIUM */

input{
    transition:border-color .18s ease,
               box-shadow .18s ease,
               background .18s ease;
}

input:focus{
    outline:none;
    border-color:#80d9df;
    box-shadow:0 0 0 4px rgba(0,153,168,.10);
    background:white;
}

/* PAGE TRANSITIONS */

.main{
    animation:pageFade .22s ease;
}

@keyframes pageFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* BETTER EMPTY STATES */

.empty{
    min-height:130px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--muted);
    font-weight:700;
}

/* HEADER PREMIUM */

.main-header{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/* BADGES */

.badge{
    min-height:28px;
}

/* LINKS */

a{
    transition:color .18s ease,
               opacity .18s ease,
               transform .18s ease;
}
.mobilites-list{
    display:grid;
    gap:18px;
}

.mobilite-card{
    padding:24px;
}

.mobilite-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.mobilite-icon{
    width:68px;
    height:68px;
    border-radius:20px;
    background:#e7fafd;
    display:grid;
    place-items:center;
    font-size:34px;
}

.mobilite-main{
    flex:1;
}

.mobilite-main h2{
    margin:0 0 6px;
    color:var(--navy);
}

.mobilite-main p{
    margin:0;
    color:var(--muted);
    font-weight:700;
}

.mobilite-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.mobilite-grid div{
    padding:16px;
    border-radius:18px;
    background:#f8fbfd;
    border:1px solid var(--line);
}

.mobilite-grid span{
    display:block;
    color:var(--muted);
    font-size:.8rem;
    font-weight:800;
    margin-bottom:6px;
}

.mobilite-grid strong{
    color:var(--navy);
}

.mobilite-note{
    margin-top:18px;
    padding:16px;
    border-radius:18px;
    background:#fff9ea;
    color:#7b6300;
    font-weight:700;
}

@media(max-width:900px){

    .mobilite-grid{
        grid-template-columns:1fr;
    }

    .mobilite-top{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* BACKGROUND GLOBAL APP */

.main{
    min-width:0;
    padding:0;
    background:
        url('/assets/img/bg-mobilite.png') left top/cover no-repeat !important;
}

.main > section,
.main > div{
    position:relative;
    z-index:1;
}

.main > section:not(.page-head),
.main > div:not(.dash){
    margin-left:44px;
    margin-right:44px;
}

.main > section:first-of-type,
.main > div:first-of-type{
    margin-top:26px;
}

.page-head{
    margin-left:44px !important;
    margin-right:44px !important;
    padding-top:26px;
}

.dash{
    margin:0 !important;
}

@media(max-width:900px){

    .main{
        background:
            url('/assets/img/bg-mobilite.png') left top/cover no-repeat !important;
    }

    .main > section:not(.page-head),
    .main > div:not(.dash),
    .page-head{
        margin-left:16px !important;
        margin-right:16px !important;
    }

    .page-head{
        padding-top:18px;
    }
}

.side-nav{
    display:flex;
    flex-direction:column;
    gap:4px !important;
    padding:18px 16px 14px !important;
}

.side-nav a{
    min-height:46px !important;
    padding:10px 14px !important;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:12px !important;

    color:rgba(255,255,255,.96) !important;
    text-decoration:none;

    font-size:14px !important;
    font-weight:400 !important;
    letter-spacing:.03em;

    transition:.18s ease;
}

.side-nav a span:last-child{
    transform:translateY(.5px);
}

.side-nav a.active{
    background:linear-gradient(90deg,#18bfd0 0%,#08a8bc 100%) !important;
    box-shadow:0 10px 22px rgba(0,153,168,.24) !important;
    color:white !important;
}

.side-nav a:not(.active):hover{
    background:rgba(255,255,255,.06);
}

.nav-icon{
    width:19px !important;
    height:19px !important;
    flex:0 0 19px !important;

    display:grid;
    place-items:center;

    opacity:.96;
}

.nav-icon svg{
    width:18px;
    height:18px;
    stroke-width:2;
}

.side-nav a.active .nav-icon{
    opacity:1;
}

.nav-badge{
    width:20px;
    height:20px;
    flex:0 0 20px;

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

    border-radius:999px;

    background:#ff4d5d;
    color:white;

    box-shadow:0 6px 14px rgba(255,77,93,.28);
}

.logout-link{
    margin:14px 16px 18px !important;

    min-height:46px;

    border-radius:14px !important;

    padding:10px 14px !important;

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

    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.08);
}

.mobilites-page{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:18px;
}

.mobilites-main{
    display:grid;
    gap:18px;
}

.mobilite-card.premium{
    background:#f3f9ff !important;
}

.mobilite-card .mini-label{
    background:#dff7f7 !important;
    color:#008a96 !important;
}

.mobilite-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.mobilite-status.active{
    background:#dff7f7;
    color:#008a96;
}

.mobilite-status.done{
    background:#edf2f7;
    color:#587092;
}

.mobilite-progress{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    margin:18px 0;
}

.mobilite-progress .line{
    height:2px;
    background:#cfe5ee;
}

.mobilite-progress .step{
    display:grid;
    gap:4px;
    color:#587092;
    font-weight:800;
}

.mobilite-progress .step span{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e6eef5;
    color:#587092;
    font-weight:900;
}

.mobilite-progress .step.active span{
    background:#0099a8;
    color:white;
}

.mobilite-progress .step strong{
    color:#061f66;
}

.mobilite-progress .step small{
    color:#587092;
}

.mobilite-summary{
    border-radius:20px;
    padding:24px;
    color:white;
    background:
        radial-gradient(circle at top right,rgba(0,153,168,.25),transparent 34%),
        linear-gradient(135deg,#061f66,#021544);
    box-shadow:0 14px 34px rgba(7,29,99,.12);
}

.mobilite-summary span{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#7ee8ef;
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
}

.mobilite-summary h2{
    margin:18px 0 10px;
    color:white;
}

.mobilite-summary strong{
    display:block;
    font-size:44px;
    line-height:1;
}

.mobilite-summary p{
    margin:8px 0 0;
    color:#c5def0;
    font-weight:800;
}

.mobilites-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.mobilite-help h2{
    margin-bottom:16px;
}

@media(max-width:1000px){
    .mobilites-page{
        grid-template-columns:1fr;
    }

    .mobilite-progress{
        grid-template-columns:1fr;
    }

    .mobilite-progress .line{
        display:none;
    }
}
.login-box-header p,
.login-message p,
.field span,
.small-link a{
    font-weight:400 !important;
}

.small-link a{
    font-weight:400 !important;
    font-size: 12px;
}
.logout-form {
    margin: 0;
}

.logout-form .logout-link {
    display: flex;
    align-items: center;
    gap: 12px;

    width: calc(100% - 32px);
    margin: 14px 16px 18px !important;
    min-height: 46px;

    padding: 10px 14px !important;
    border-radius: 14px !important;

    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05) !important;

    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left;

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

.logout-form .logout-link:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,153,168,.16);
}
.toast-notification {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(380px, calc(100vw - 32px));
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(7,29,99,.18);
    overflow: hidden;
    z-index: 9999;
    animation: toastIn .28s ease;
}

.toast-notification.hide {
    animation: toastOut .25s ease forwards;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.toast-logo {
    width: 42px;
    height: auto;
    flex: none;
}

.toast-text {
    color: var(--navy);
    font-weight: 800;
    line-height: 1.35;
}

.toast-error {
    border-left: 5px solid var(--red);
}

.toast-success {
    border-left: 5px solid var(--teal);
}

.toast-progress {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal2));
    animation: toastProgress 5s linear forwards;
}

.toast-error .toast-progress {
    background: linear-gradient(90deg, var(--red), #ff9a9c);
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
    }
}

.toast-notification {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(390px, calc(100vw - 32px));
    background: white;
    border: 1px solid var(--line);
    border-left: 5px solid var(--teal);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(7,29,99,.18);
    overflow: hidden;
    z-index: 9999;
    animation: toastIn .25s ease, toastOut .25s ease 5s forwards;
}

.toast-error {
    border-left-color: var(--red);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.toast-logo {
    width: 54px;
    height: auto;
    flex: none;
}

.toast-text {
    color: var(--navy);
    font-weight: 800;
    line-height: 1.35;
}

.toast-progress {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal2));
    animation: toastProgress 5s linear forwards;
}

.toast-error .toast-progress {
    background: linear-gradient(90deg, var(--red), #ff9a9c);
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
    }
}

.toast-notification {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(390px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--teal);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(7,29,99,.18);
    overflow: hidden;
    z-index: 9999;
    animation: toastIn .25s ease, toastOut .25s ease 5s forwards;
}

.toast-error {
    border-left-color: var(--red);
}

.toast-success {
    border-left-color: var(--teal);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.toast-logo {
    width: 54px;
    height: auto;
    flex: none;
}

.toast-text {
    color: var(--navy);
    font-weight: 800;
    line-height: 1.35;
}

.toast-progress {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal2));
    animation: toastProgress 5s linear forwards;
}

.toast-error .toast-progress {
    background: linear-gradient(90deg, var(--red), #ff9a9c);
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
    }
}
.error,
.success {
    position: relative;
    overflow: hidden;
}

.error::after,
.success::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    animation: alertProgress 5s linear forwards;
}

.error::after {
    background: #ff5457;
}

.success::after {
    background: #0099a8;
}

@keyframes alertProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* =========================================================
   Optimisation mobile globale + menu application
   ========================================================= */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: 78px;
        background: #f6f9fc;
    }

    .app-layout {
        display: block;
        min-height: 100vh;
        background: #f6f9fc;
    }

    /* Menu mobile fixe en bas */
    .sidebar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 76px;
        z-index: 999;
        overflow: visible;
        border-radius: 22px 22px 0 0;
        background: linear-gradient(180deg, #061f66 0%, #021544 100%) !important;
        box-shadow: 0 -10px 30px rgba(7, 29, 99, .18);
    }

    .side-brand,
    .sidebar-card,
    .sidebar-spacer,
    .sidebar-illustration,
    .logout-form,
    .logout-link {
        display: none !important;
    }

    .side-nav {
        height: 76px;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 2px !important;
        padding: 7px 6px 8px !important;
        margin: 0;
        overflow: visible;
    }

    .side-nav a {
        min-width: 0;
        min-height: 60px !important;
        height: 60px;
        padding: 6px 2px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .side-nav a::before {
        display: none !important;
    }

    .side-nav a.active {
        background: linear-gradient(180deg, #18bfd0 0%, #08a8bc 100%) !important;
        box-shadow: 0 8px 18px rgba(0, 153, 168, .24) !important;
    }

    .side-nav a span:last-child {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transform: none !important;
    }

    .nav-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .nav-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .nav-badge {
        position: absolute;
        right: 7px;
        top: 5px;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px;
        font-size: 10px !important;
        z-index: 2;
    }

    /* Header mobile */
    .main {
        width: 100%;
        min-width: 0;
        padding-bottom: 86px;
    }

    .main-header {
        min-height: auto !important;
        padding: 16px !important;
        border-radius: 0 0 22px 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .main-header h1 {
        font-size: 21px !important;
        line-height: 1.15;
    }

    .main-header p {
        font-size: 13px !important;
    }

    .header-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 44px 1fr 44px;
        gap: 10px;
        align-items: center;
    }

    .header-actions .btn {
        width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        font-size: 13px;
    }

    .header-message,
    .header-user {
        width: 42px;
        height: 42px;
    }

    /* Marges générales */
    .main > section:not(.page-head),
    .main > div:not(.dash),
    .page-head {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .page-head {
        padding-top: 16px !important;
        margin-bottom: 14px;
    }

    .page-head h2 {
        font-size: 26px !important;
        line-height: 1.1;
    }

    .card,
    .profile-card,
    .planning-list,
    .atelier-list,
    .mobilite-card {
        border-radius: 18px !important;
        padding: 16px !important;
    }

    /* Grilles en une colonne */
    .grid,
    .dashboard-stats,
    .dashboard-grid,
    .dashboard-grid-large,
    .dashboard-bottom,
    .planning-page,
    .atelier-page,
    .info-page,
    .messages-layout,
    .mobilites-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Messagerie */
    .messages-list {
        min-height: auto !important;
    }

    .chat-header,
    .chat-contact-strip {
        padding: 14px !important;
    }

    .chat-body {
        min-height: 330px !important;
        padding: 14px !important;
    }

    .message-bubble {
        max-width: 82% !important;
        font-size: 14px;
    }

    .chat-form {
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .chat-form input {
        min-width: 0;
        height: 44px;
        font-size: 14px;
    }

    .chat-attach,
    .chat-send {
        width: 40px !important;
        height: 40px !important;
    }

    /* Mobilités */
    .mobilite-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mobilite-status {
        align-self: flex-start;
    }

    .mobilite-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mobilite-grid div {
        padding: 13px !important;
        border-radius: 14px !important;
    }

    .mobilite-progress {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mobilite-progress .line {
        display: none !important;
    }

    .mobilite-summary strong {
        font-size: 36px !important;
    }

    /* Planning / ateliers */
    .planning-event,
    .atelier-item {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .planning-date,
    .atelier-date {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line);
        padding: 0 0 10px !important;
    }

    .planning-event-top,
    .atelier-top,
    .info-doc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .planning-meta,
    .atelier-meta {
        flex-direction: column;
        gap: 7px;
    }

    /* Infos / documents */
    .info-doc-item,
    .document-item {
        grid-template-columns: 44px 1fr !important;
        gap: 10px !important;
    }

    .info-doc-item .btn,
    .document-item .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* Évite les débordements */
    img,
    svg,
    table {
        max-width: 100%;
    }

    .table-responsive,
    .content-card,
    .filter-card {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 380px) {
    .side-nav a {
        font-size: 9px !important;
    }

    .nav-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .main-header h1 {
        font-size: 19px !important;
    }
}