/* =========================
   RESET
   ========================= */
body{ margin:0; }

/* =========================
   BASE / TYPO — par défaut SemiBold partout
   ========================= */
html, body{
    font-family: "ZabalDEMOSemiBold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ltdl-body{
    font-family: "ZabalDEMOSemiBold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Dashboard : tout en SemiBold par défaut */
.dash-body{
    font-family: "ZabalDEMOSemiBold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Exceptions en Black (comme tu l’as demandé) */
.dash-body h1,
.dash-body h2,
.dash-pseudo,
.dash-card__big{
    font-family: "ZabalDEMOBlack", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* =========================
   BASE / TYPO
   ========================= */
.ltdl-body{
    margin:0;
    color:#fff;
    font-family:'ZabalDEMOSemiBold',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.muted{ opacity:.92; }

/* =========================
   CONTAINERS
   ========================= */
.page-wrap{
    max-width:980px;
    margin:0 auto;
    padding:120px 18px 50px;
}

/* =========================
   CARDS / UI
   ========================= */
.card{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 20px;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.12);
}
.btn.ghost{ background: rgba(255,255,255,.06); }
.btn.disabled{ opacity:.45; pointer-events:none; }

.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .95rem;
    color:#fff;
    cursor:pointer;
}

.is-hidden{ display:none !important; }

/* =========================
   DASHBOARD — TYPO
   ========================= */
.dash-body, .dash-body *{ color:#fff; }

.dash-body h1,
.dash-body h2,
.dash-pseudo,
.dash-card__big{
    font-family:'ZabalDEMOBlack',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.dash-body .muted,
.dash-sub,
.dash-card__sub,
.dash-card__label{
    color:rgba(255,255,255,.82);
}

/* =========================
   DASHBOARD — LAYOUT
   ========================= */
.dash-wrap{
    max-width:980px;
    margin:0 auto;
    padding:110px 18px 40px;
}

/* Top identité */
.dash-top{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    margin-bottom:14px;
}

.dash-ident{
    display:flex;
    align-items:center;
    gap:16px;
}

.dash-avatar{
    width:86px;
    height:86px;
    border-radius:999px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 40px rgba(0,0,0,.25);

    /* ✅ ton image */
    background: rgba(255,255,255,.92) url("/assets/IMG/public/profil_picture.png") center/cover no-repeat;
}

.dash-pseudo{
    font-size:1.55rem;
    font-weight:900;
}

.dash-sub{
    margin-top:4px;
    opacity:.92;
}

/* =========================
   DASHBOARD — MENU MAQUETTE
   ========================= */
.dash-tabsbar{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 12px;
    margin:0 0 18px;

    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
}

.dash-tab{
    flex:1;
    text-align:center;
    text-decoration:none;
    color:#fff;

    padding:10px 12px;
    border-radius:12px;

    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);

    font-weight:700;
    opacity:.92;
    transition:.15s ease;
}
.dash-tab:hover{
    opacity:1;
    background:rgba(255,255,255,.10);
}
.dash-tab.active{
    opacity:1;
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.20);
}

/* Déconnexion à droite */
.dash-tab--logout{
    flex:0 0 auto;
    padding-left:16px;
    padding-right:16px;
    background:rgba(255,255,255,.10);
}

/* =========================
   DASHBOARD — GRID
   ========================= */
.dash-grid{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:16px;
    align-items:start;
}

.dash-left{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* cards gauche */
.dash-card{
    padding:16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
    box-shadow:0 14px 40px rgba(0,0,0,.18);
}

.dash-card__label{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}
.dash-card__big{
    font-size:2.2rem;
    font-weight:900;
    line-height:1.05;
}
.dash-card__sub{ margin-top:6px; }

/* badges (si tu les réactives plus tard) */
.dash-badges{
    display:flex;
    gap:16px;
    margin-top:14px;
    align-items:center;
}
.badge-shape{ width:64px; height:64px; background:#fff; }
.badge-shape.b1{ clip-path: polygon(50% 0%, 95% 30%, 80% 100%, 20% 100%, 5% 30%); border-radius:14px; }
.badge-shape.b2{ border-radius:999px; }
.badge-shape.b3{ border-radius: 0 0 999px 999px; clip-path: ellipse(60% 65% at 50% 35%); }

/* panneau principal */
.dash-panel{
    padding:18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    min-height:330px;
}
.dash-panel h2{
    margin:0 0 10px;
    display:flex;
    align-items:center;
    gap:10px;
}

/* =========================
   ALERTS
   ========================= */
.dash-alert{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:12px;
    display:flex;
    gap:10px;
    align-items:center;
}
.dash-alert.err{ background:rgba(255,0,0,.08); }

/* =========================
   ACTU
   ========================= */
.actu-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
}

.actu-ico{
    width:38px;
    height:38px;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
}
.actu-meta{
    margin-top:4px;
    font-size:.9rem;
    color:rgba(255,255,255,.75);
}

/* =========================
   PAS — FORM
   ========================= */
.steps-box{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    border-radius:16px;
    padding:14px;
}

.steps-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.form-row input{
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);
    color:#fff;
    padding:0 12px;
    outline:none;
}

.form-actions{
    margin-top:6px;
    display:flex;
    justify-content:flex-start;
}

.mini-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* calendrier en blanc */
input[type="date"]{ color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(1); opacity: .9; }

/* =========================
   HISTORIQUE
   ========================= */
.history{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.history-month{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
    border-radius:16px;
    padding:8px 12px;
}
.history-month summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 4px;
}
.history-month summary::-webkit-details-marker{ display:none; }
.hm-left{ display:flex; align-items:center; gap:10px; }
.history-month[open] summary .fa-chevron-right{ transform: rotate(90deg); }

.hm-days{
    padding:10px 4px 6px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.hm-day{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
}

/* =========================
   CHALLENGES
   ========================= */
.ch-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
}
.ch-item{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    border-radius:16px;
    padding:14px;
}
.ch-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.ch-title{
    font-size:1.1rem;
    font-weight:900;
}
.ch-badge{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
}
.ch-badge.on{ background:rgba(0,255,150,.10); }
.ch-actions{ margin-top:12px; }

/* =========================
   PARAMÈTRES
   ========================= */
.settings-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
}
.scol{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.scol input{
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);
    color:#fff;
    padding:0 12px;
    outline:none;
}
.toggles{ margin-top:6px; gap:10px; }
.toggle{ display:flex; gap:10px; align-items:center; }
.toggle input{ width:18px; height:18px; }
.danger{
    margin-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:14px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
    .dash-wrap{ padding-top:96px; }
    .dash-grid{ grid-template-columns:1fr; }

    .dash-tabsbar{ flex-wrap:wrap; }
    .dash-tab{ flex: 1 1 calc(50% - 10px); }
    .dash-tab--logout{ flex: 1 1 100%; }
}

@media (max-width: 640px){
    .page-wrap{ padding:105px 14px 40px; }
}