/* =============================================================
   Portail JT ONECCA-Mali · Design System v2
   Institutionnel, accessible (WCAG AA), clair + sombre, mobile-first.
   Marque = variables --brand-* (branchées sur l'identité ONECCA).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ---------- Jetons de marque ONECCA (SEUL endroit à re-tinter) ---------- */
:root {
  /* Identité ONECCA-Mali : vert dominant + or/rouge du drapeau en accents */
  --brand:        #1c7a33;        /* vert institutionnel accessible (texte/boutons) */
  --brand-600:    #16632a;
  --brand-700:    #0f4c20;
  --brand-050:    #e9f6ea;
  --brand-100:    #c7e8c9;
  --brand-vivid:  #3caa36;        /* vert identité ONECCA (logo) */
  --gold:         #e8b90f;        /* or Mali */
  --gold-050:     #fbf3d3;
  --mali-red:     #e20816;        /* rouge Mali (accent ponctuel) */
  --accent:       #b8860b;        /* or foncé accessible (accent secondaire) */
  --accent-050:   var(--gold-050);
}

/* ---------- Thème clair (défaut) ---------- */
:root {
  --bg:            #f4f6f9;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --surface-3:     #eef2f7;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --text:          #0f1b2d;
  --text-muted:    #52627a;
  --text-subtle:   #8493a8;
  --on-brand:      #ffffff;

  --success:#1c7a53; --success-050:#e5f4ee;
  --warning:#9a6a00; --warning-050:#fbf1dc;
  --danger:#c0362c;  --danger-050:#fbe9e7;
  --info:#0f6fa8;    --info-050:#e4f2fb;

  --ring: color-mix(in srgb, var(--brand) 45%, transparent);

  /* Rayons */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* Ombres (échelle d'élévation cohérente) */
  --sh-1: 0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.05);
  --sh-2: 0 2px 4px rgba(15,27,45,.06), 0 6px 16px rgba(15,27,45,.08);
  --sh-3: 0 10px 30px rgba(15,27,45,.12), 0 4px 8px rgba(15,27,45,.06);
  /* Espacement (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --maxw:1160px;
  --fs: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fh: "Lexend", var(--fs);
}

/* ---------- Thème sombre ---------- */
:root[data-theme="dark"] {
  --brand-050:#10281a; --brand-100:#1c4c2c;
  --bg:#0a130d; --surface:#122019; --surface-2:#0f1b14; --surface-3:#1b2c22;
  --border:#26392e; --border-strong:#324c3a;
  --text:#e9f2ec; --text-muted:#a6bcae; --text-subtle:#7a9486;
  --success-050:#0f2a20; --warning-050:#2b2310; --danger-050:#2d1614; --info-050:#0d2534;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
  --sh-3:0 14px 40px rgba(0,0,0,.5);
  --ring: color-mix(in srgb, var(--brand) 60%, #7fb3e6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-050:#14283c; --brand-100:#1a3550;
    --bg:#0b1220; --surface:#131c2b; --surface-2:#0f1826; --surface-3:#1a2536;
    --border:#26334a; --border-strong:#33435e;
    --text:#eaf0f7; --text-muted:#a6b4c8; --text-subtle:#75849b;
    --success-050:#0f2a20; --warning-050:#2b2310; --danger-050:#2d1614; --info-050:#0d2534;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
    --sh-3:0 14px 40px rgba(0,0,0,.5);
    --ring: color-mix(in srgb, var(--brand) 60%, #7fb3e6);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--fs); color:var(--text); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

h1,h2,h3,h4 { font-family:var(--fh); line-height:1.18; font-weight:600; letter-spacing:-.01em; color:var(--text); }
h1{font-size:clamp(1.6rem,1.2rem+1.6vw,2.15rem);} h2{font-size:1.4rem;} h3{font-size:1.12rem;}
p{color:var(--text);} a{color:var(--brand); text-decoration:none;} a:hover{text-decoration:underline;}
.muted{color:var(--text-muted);} .subtle{color:var(--text-subtle);} .tnum{font-variant-numeric:tabular-nums;}
small{font-size:.82rem;}
:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:var(--r-xs); }
img,svg{ display:block; max-width:100%; } svg{ stroke-width:1.9; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); }
.section{ padding:var(--sp-10) 0; }
.stack>*+*{ margin-top:var(--sp-3); }
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.row.wrapf{ flex-wrap:wrap; } .spacer{ flex:1; }
.grid{ display:grid; gap:var(--sp-5); }
@media(min-width:640px){ .grid.c2{grid-template-columns:repeat(2,1fr);} }
@media(min-width:840px){ .grid.c3{grid-template-columns:repeat(3,1fr);} .grid.c4{grid-template-columns:repeat(4,1fr);} }
.hidden{ display:none!important; } .center{ text-align:center; }

/* ---------- Topbar ---------- */
.topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border); }
.topbar .wrap{ display:flex; align-items:center; gap:var(--sp-4); height:64px; }
.brand{ display:flex; align-items:center; gap:var(--sp-3); font-family:var(--fh); font-weight:600; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand .logo{ height:38px; width:auto; }
.brand .mark{ height:40px; width:40px; border-radius:11px; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-weight:700; font-size:15px; letter-spacing:.5px; box-shadow:var(--sh-1); }
.brand .sub{ color:var(--text-subtle); font-weight:400; font-size:.85rem; }

/* ---------- Cartes ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--sp-6); }
.card.pad-lg{ padding:var(--sp-10); }
.card-hover{ transition:box-shadow .2s, transform .2s, border-color .2s; }
.card-hover:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--border-strong); }
/* Cartes cliquables : jamais de soulignement ni de couleur de lien */
a.card, a.card:hover, a.card *{ text-decoration:none; }
a.card{ color:inherit; }

/* ---------- Boutons ---------- */
.btn{ --_bg:var(--brand); --_fg:var(--on-brand); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:44px; padding:0 var(--sp-5); font:inherit; font-weight:600; line-height:1;
  color:var(--_fg); background:var(--_bg); border:1px solid var(--_bd); border-radius:var(--r-sm);
  cursor:pointer; transition:filter .16s, background .16s, box-shadow .16s, transform .06s; white-space:nowrap; }
.btn:hover{ filter:brightness(1.06); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.btn svg{ width:18px; height:18px; }
.btn.block{ width:100%; } .btn.lg{ min-height:52px; padding:0 var(--sp-6); font-size:1.05rem; } .btn.sm{ min-height:36px; padding:0 var(--sp-3); font-size:.88rem; }
.btn.secondary{ --_bg:var(--surface); --_fg:var(--brand); --_bd:var(--border-strong); }
.btn.secondary:hover{ --_bg:var(--brand-050); filter:none; }
.btn.ghost{ --_bg:transparent; --_fg:var(--text-muted); --_bd:transparent; }
.btn.ghost:hover{ --_bg:var(--surface-3); --_fg:var(--text); filter:none; }
.btn.accent{ --_bg:var(--accent); --_fg:#26200c; }
.btn.success{ --_bg:var(--success); }
.btn.danger{ --_bg:var(--danger); }
.btn.subtle{ --_bg:var(--brand-050); --_fg:var(--brand); }

/* ---------- Champs ---------- */
.field{ margin-top:var(--sp-4); }
label,.label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:var(--sp-2); color:var(--text); }
label .req{ color:var(--danger); }
.hint{ font-size:.82rem; color:var(--text-subtle); margin-top:var(--sp-1); }
input,select,textarea{ width:100%; min-height:44px; padding:11px 13px; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); outline:none;
  transition:border-color .16s, box-shadow .16s; }
textarea{ min-height:88px; resize:vertical; }
input::placeholder,textarea::placeholder{ color:var(--text-subtle); }
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
input:disabled,select:disabled,textarea:disabled{ background:var(--surface-3); color:var(--text-muted); cursor:not-allowed; }
/* Variante compacte (barres d'outils : « par page », filtres…) */
select.compact{ width:auto; min-height:0; padding:5px 26px 5px 9px; font-size:.85rem; border-radius:var(--r-xs); }
.pagesize{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text-muted); white-space:nowrap; margin:0; font-weight:500; }
.input-err input,.input-err select,.input-err textarea,input.err{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-050); }
.err-msg{ color:var(--danger); font-size:.82rem; margin-top:var(--sp-1); display:flex; gap:6px; align-items:center; }

/* ---------- Badges / statuts ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:600; background:var(--brand-050); color:var(--brand); border:1px solid transparent; }
.badge.ok{ background:var(--success-050); color:color-mix(in srgb, var(--success) 62%, var(--text)); }
.badge.warn{ background:var(--warning-050); color:var(--warning); }
.badge.err{ background:var(--danger-050); color:var(--danger); }
.badge.info{ background:var(--info-050); color:var(--info); }
.badge.neutral{ background:var(--surface-3); color:var(--text-muted); }
.chip-num{ font-variant-numeric:tabular-nums; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--text-subtle); display:inline-block; }
.dot.live{ background:var(--success); box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%, transparent); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- KPI ---------- */
.kpi{ display:flex; flex-direction:column; gap:var(--sp-1); }
.kpi .ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-050); color:var(--brand); margin-bottom:var(--sp-2); }
.kpi .n{ font-family:var(--fh); font-size:2.1rem; font-weight:700; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.kpi .l{ color:var(--text-muted); font-size:.88rem; }

/* ---------- Tableaux ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); }
table{ width:100%; border-collapse:collapse; font-size:.94rem; }
th,td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
thead th{ color:var(--text-subtle); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.4px;
  background:var(--surface-2); position:sticky; top:0; }
tbody tr{ transition:background .12s; } tbody tr:hover{ background:var(--surface-2); }
td .tnum{ font-variant-numeric:tabular-nums; }

/* Tableaux « .rtable » : se transforment en cartes empilées sur mobile
   (chaque ligne = une carte, colonnes étiquetées via data-label). */
@media (max-width:680px){
  .rtable, .rtable tbody, .rtable tr, .rtable td{ display:block; width:auto; }
  .rtable thead{ display:none; }
  .rtable tr{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
    padding:10px 13px; margin-bottom:10px; box-shadow:var(--sh-1); }
  .rtable tbody tr:hover{ background:var(--surface); }
  .rtable td{ border:none; padding:5px 0; display:flex; justify-content:space-between;
    align-items:center; gap:14px; text-align:right; }
  .rtable td::before{ content:attr(data-label); font-size:.72rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.03em; text-align:left; white-space:nowrap; }
  .rtable td:not([data-label])::before{ content:none; }
  .rtable td.rcard-title{ display:block; text-align:left; border-bottom:1px solid var(--border);
    padding:0 0 8px; margin-bottom:4px; font-weight:600; font-size:1rem; }
  .rtable td.rcard-actions{ padding-top:10px; }
  .rtable td.rcard-actions .act{ display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; }
  .rtable td.rcard-actions .btn.sm{ width:38px; height:38px; }
}

/* ---------- Étapes / progress ---------- */
.steps{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-6); }
.steps .s{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.steps .s.done{ background:var(--brand); } .steps .s.cur{ background:var(--brand-100); position:relative; }
.steps .s.cur::after{ content:""; position:absolute; inset:0; width:45%; background:var(--brand); }
.progress{ height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.progress>i{ display:block; height:100%; background:var(--brand); transition:width .3s ease-out; }

/* ---------- Toasts ---------- */
#toasts{ position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:min(92vw,360px); }
.toast{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--brand);
  border-radius:var(--r-md); box-shadow:var(--sh-3); padding:13px 16px; display:flex; gap:10px; align-items:flex-start;
  animation:slidein .22s cubic-bezier(.2,.8,.2,1); }
.toast .tclose{ margin-left:auto; cursor:pointer; color:var(--text-subtle); background:none; border:none; min-height:auto; padding:2px; }
.toast.ok{ border-left-color:var(--success); } .toast.err{ border-left-color:var(--danger); } .toast.warn{ border-left-color:var(--warning); }
.toast svg{ width:20px; height:20px; flex:none; }
.toast.ok svg{ color:var(--success);} .toast.err svg{ color:var(--danger);} .toast.warn svg{ color:var(--warning);}
@keyframes slidein{ from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;} }

/* ---------- Modal ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(8,15,28,.55); z-index:9998; display:grid; place-items:center;
  padding:var(--sp-5); animation:fade .16s; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  max-width:460px; width:100%; padding:var(--sp-6); animation:pop .18s cubic-bezier(.2,.8,.2,1); }
@keyframes pop{ from{opacity:0; transform:scale(.96) translateY(8px);} to{opacity:1; transform:none;} }
.modal h3{ margin-bottom:var(--sp-2); } .modal .actions{ display:flex; gap:var(--sp-3); justify-content:flex-end; margin-top:var(--sp-6); }

/* ---------- Galerie photos (lightbox) ---------- */
.gallery-back{ position:fixed; inset:0; background:rgba(6,10,20,.9); z-index:10000; display:grid; place-items:center;
  padding:16px; animation:fade .16s; }
.gallery{ width:min(940px,100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; gap:12px; }
.gallery-head{ display:flex; align-items:center; gap:12px; color:#fff; }
.gallery-title{ flex:1; min-width:0; font-family:var(--fh); font-weight:600; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-count{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.75); font-size:.9rem; }
.gallery-x{ flex:none; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .15s; }
.gallery-x:hover{ background:rgba(255,255,255,.26); }
.gallery-stage{ position:relative; flex:1; min-height:0; display:grid; place-items:center; }
.gallery-img{ max-width:100%; max-height:70vh; border-radius:12px; object-fit:contain; background:#0b1220;
  box-shadow:0 14px 44px rgba(0,0,0,.55); animation:pop .18s cubic-bezier(.2,.8,.2,1); }
.gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .15s; }
.gallery-nav:hover{ background:rgba(255,255,255,.3); }
.gallery-nav.prev{ left:8px; } .gallery-nav.next{ right:8px; }
.gallery-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:2px 0; justify-content:center; scrollbar-width:thin; }
.gthumb{ flex:0 0 auto; width:66px; height:48px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden;
  background:#0b1220; cursor:pointer; opacity:.65; transition:opacity .15s, border-color .15s; }
.gthumb:hover{ opacity:1; } .gthumb.active{ opacity:1; border-color:#fff; }
.gthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Vignette cliquable « voir les photos » sur les cartes logement */
.galry-thumb{ position:relative; cursor:zoom-in; }
.galry-ph{ cursor:zoom-in; }
.galry-thumb .galry-more{ position:absolute; right:4px; bottom:4px; display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:999px; background:rgba(8,15,28,.72); color:#fff; font-size:.72rem; font-weight:600; pointer-events:none; }
@media(max-width:560px){ .gallery-img{ max-height:60vh; } .gthumb{ width:54px; height:40px; } }

/* ---------- Skeleton ---------- */
.skel{ background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%; animation:shimmer 1.3s infinite; border-radius:var(--r-sm); }
@keyframes shimmer{ from{background-position:100% 0;} to{background-position:-100% 0;} }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:var(--sp-10) var(--sp-5); color:var(--text-muted); }
.empty .ico{ width:56px; height:56px; margin:0 auto var(--sp-4); border-radius:16px; display:grid; place-items:center;
  background:var(--surface-3); color:var(--text-subtle); }
.empty svg{ width:28px; height:28px; }

/* ---------- Divers ---------- */
.spinner{ width:20px; height:20px; border:2.5px solid color-mix(in srgb,currentColor 25%,transparent);
  border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.icon-btn{ min-height:40px; min-width:40px; display:inline-grid; place-items:center; border-radius:var(--r-sm);
  background:transparent; border:1px solid transparent; color:var(--text-muted); cursor:pointer; transition:background .15s,color .15s; }
.icon-btn:hover{ background:var(--surface-3); color:var(--text); }
.footer{ text-align:center; color:var(--text-subtle); font-size:.82rem; padding:var(--sp-10) 0; border-top:1px solid var(--border); margin-top:var(--sp-12); }
.divider{ height:1px; background:var(--border); margin:var(--sp-5) 0; }