/* ================================================================
   XAAYA — globals.css  (design system complet)
   Palette clair  : #0468A5 / blanc / vert
   Palette sombre : #C9A84C / #020200 / vert
   Typo           : Inter (titres) + Poppins (corps)
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Mode CLAIR (défaut) ──────────────────────────────────── */
:root, [data-theme="light"] {
  --primary:         #0468A5;
  --primary-h:       #0580C8;
  --primary-pale:    #EBF4FB;
  --primary-dim:     rgba(4,104,165,.10);

  --bg-base:         #F2F6FA;
  --bg-surface:      #FFFFFF;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #F7FAFD;
  --bg-raised:       #EBF0F6;
  --bg-scrim:        rgba(10,20,40,.55);

  --text-primary:    #0C1B2E;
  --text-secondary:  #2D4055;
  --text-muted:      #5C7080;
  --text-hint:       #98A8B5;
  --text-on-primary: #FFFFFF;

  --border-faint:    rgba(4,104,165,.06);
  --border-light:    rgba(4,104,165,.14);
  --border-medium:   rgba(4,104,165,.28);
  --border-divider:  #DDEAEF;

  --green:           #12B76A;
  --green-dim:       rgba(18,183,106,.10);
  --green-border:    rgba(18,183,106,.25);
  --red:             #E63323;
  --red-dim:         rgba(230,51,35,.09);
  --orange:          #F07020;
  --orange-dim:      rgba(240,112,32,.10);
  --gold:            #C9A84C;
  --gold-dim:        rgba(201,168,76,.10);

  --nav-bg:          rgba(255,255,255,.93);
  --nav-border:      rgba(4,104,165,.10);
  --shadow-sm:       0 1px 4px rgba(4,104,165,.08);
  --shadow-md:       0 4px 20px rgba(4,104,165,.10);
  --shadow-lg:       0 12px 40px rgba(4,104,165,.13);
  --shadow-xl:       0 24px 60px rgba(4,104,165,.16);
}

/* ── Mode SOMBRE ──────────────────────────────────────────── */
[data-theme="dark"] {
  --primary:         #C9A84C;
  --primary-h:       #E0BE65;
  --primary-pale:    rgba(201,168,76,.13);
  --primary-dim:     rgba(201,168,76,.11);

  --bg-base:         #020200;
  --bg-surface:      #0C0D0A;
  --bg-card:         #131410;
  --bg-card-hover:   #191B16;
  --bg-raised:       #1E201A;
  --bg-scrim:        rgba(0,0,0,.78);

  --text-primary:    #EDE9DF;
  --text-secondary:  #BDB8AD;
  --text-muted:      #87837A;
  --text-hint:       #524F49;
  --text-on-primary: #020200;

  --border-faint:    rgba(201,168,76,.06);
  --border-light:    rgba(201,168,76,.14);
  --border-medium:   rgba(201,168,76,.28);
  --border-divider:  rgba(201,168,76,.08);

  --green:           #3EC870;
  --green-dim:       rgba(62,200,112,.12);
  --green-border:    rgba(62,200,112,.25);
  --red:             #E85A52;
  --red-dim:         rgba(232,90,82,.11);
  --orange:          #F08040;
  --orange-dim:      rgba(240,128,64,.11);
  --gold:            #C9A84C;
  --gold-dim:        rgba(201,168,76,.11);

  --nav-bg:          rgba(2,2,0,.92);
  --nav-border:      rgba(201,168,76,.11);
  --shadow-sm:       0 1px 4px rgba(0,0,0,.40);
  --shadow-md:       0 4px 20px rgba(0,0,0,.50);
  --shadow-lg:       0 12px 40px rgba(0,0,0,.60);
  --shadow-xl:       0 24px 60px rgba(0,0,0,.70);
}

/* ── Variables fixes ──────────────────────────────────────── */
:root {
  --font-display: 'Inter',   sans-serif;
  --font-body:    'Poppins', sans-serif;
  --nav-h: 64px;
  --r-xs:    4px; --r-sm:   8px; --r-md:  12px;
  --r-lg:   16px; --r-xl:  24px; --r-2xl: 32px;
  --r-pill: 9999px;
  --ease:   0.22s ease;
  --ease-s: 0.15s ease;
}

/* ── Typographie ──────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
h1 { font-size: clamp(28px,5vw,56px); }
h2 { font-size: clamp(22px,3.5vw,38px); }
h3 { font-size: clamp(17px,2.2vw,24px); }
h4 { font-size: 17px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
p  { color: var(--text-secondary); font-size: 15px; }
a  { color: inherit; text-decoration: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; white-space: nowrap;
  transition: all var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--primary); color: var(--text-on-primary); font-weight: 600; box-shadow: 0 2px 12px rgba(4,104,165,.22); }
.btn-primary:hover  { background: var(--primary-h); }
[data-theme="dark"] .btn-primary { box-shadow: 0 2px 12px rgba(201,168,76,.22); }
.btn-secondary{ background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-light); }
.btn-secondary:hover { border-color: var(--border-medium); background: var(--bg-raised); }
.btn-ghost    { background: transparent; color: var(--text-muted); border: 1px solid var(--border-faint); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-raised); }
.btn-danger   { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(230,51,35,.22); }
.btn-success  { background: var(--green-dim);  color: var(--green); border: 1px solid var(--green-border); }
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: var(--r-lg); }
.btn-sm { padding:  7px 14px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-xs { padding:  4px 10px; font-size: 11.5px; border-radius: var(--r-xs); }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 9px; width: 36px; height: 36px; justify-content: center; border-radius: var(--r-sm); }

/* ── Inputs ───────────────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--r-md); color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px;
  outline: none; transition: border-color var(--ease-s), box-shadow var(--ease-s);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim);
}
.input::placeholder { color: var(--text-hint); }
.select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%235C7080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.textarea { resize: vertical; min-height: 100px; }
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-label  { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-divider);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.card:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.badge-blue   { background: var(--primary-dim);color: var(--primary); border:1px solid rgba(4,104,165,.18); }
.badge-green  { background: var(--green-dim);  color: var(--green);   border:1px solid var(--green-border); }
.badge-red    { background: var(--red-dim);    color: var(--red);     border:1px solid rgba(230,51,35,.18); }
.badge-orange { background: var(--orange-dim); color: var(--orange);  border:1px solid rgba(240,112,32,.18); }
.badge-gold   { background: var(--gold-dim);   color: var(--gold);    border:1px solid rgba(201,168,76,.18); }
.badge-muted  { background: var(--bg-raised);  color: var(--text-muted); border:1px solid var(--border-faint); }

/* ── Toggle switch ────────────────────────────────────────── */
.tog { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
.tog input { opacity:0; width:0; height:0; }
.tog-track {
  position:absolute; inset:0; border-radius:var(--r-pill);
  background:var(--bg-raised); border:1px solid var(--border-light);
  cursor:pointer; transition:background var(--ease);
}
.tog-track::after {
  content:''; position:absolute;
  width:15px; height:15px; top:2px; left:2px;
  background:var(--text-hint); border-radius:50%;
  transition:all var(--ease);
}
.tog input:checked + .tog-track { background:var(--primary-dim); border-color:var(--primary); }
.tog input:checked + .tog-track::after { transform:translateX(17px); background:var(--primary); }

/* ── Chip filtres ─────────────────────────────────────────── */
.chip {
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-card); color: var(--text-muted);
  font-size: 12.5px; cursor: pointer; font-family: var(--font-body);
  transition: all var(--ease-s); white-space: nowrap;
}
.chip:hover   { border-color: var(--primary); color: var(--primary); }
.chip.active  { background: var(--primary-dim); color: var(--primary); border-color: rgba(4,104,165,.28); font-weight: 500; }
[data-theme="dark"] .chip.active { border-color: rgba(201,168,76,.28); }

/* ── Accordéon ────────────────────────────────────────────── */
.acc-item { border:1px solid var(--border-divider); border-radius:var(--r-md); overflow:hidden; background:var(--bg-card); }
.acc-trigger {
  width:100%; padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:14.5px;
  font-weight:500; color:var(--text-primary); text-align:left; gap:10px;
}
.acc-trigger svg { transition:transform .3s; flex-shrink:0; }
.acc-item.open .acc-trigger svg { transform:rotate(180deg); }
.acc-content { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc-body { padding:0 20px 18px; color:var(--text-secondary); font-size:14px; line-height:1.75; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-wrap {
  display:none; position:fixed; inset:0; background:var(--bg-scrim);
  backdrop-filter:blur(6px); z-index:3000;
  align-items:center; justify-content:center; padding:20px;
}
.modal-wrap.open { display:flex; }
.modal-box {
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--r-xl); padding:36px; max-width:500px; width:100%;
  position:relative; box-shadow:var(--shadow-xl);
  animation:scalein .3s ease;
}
.modal-x {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--bg-raised); border:1px solid var(--border-faint);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); transition:var(--ease-s);
}
.modal-x:hover { color:var(--red); background:var(--red-dim); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeup   { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes fadein   { from{opacity:0} to{opacity:1} }
@keyframes scalein  { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:none} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.anim-up   { animation:fadeup  .5s ease both; }
.anim-in   { animation:fadein  .4s ease both; }

[data-reveal]         { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
[data-reveal].visible { opacity:1; transform:none; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }

/* ── Divider ──────────────────────────────────────────────── */
.divider { height:1px; background:var(--border-divider); margin:20px 0; }

/* ── Utilitaires ──────────────────────────────────────────── */
.txt-primary { color:var(--primary); }
.txt-muted   { color:var(--text-muted); }
.txt-green   { color:var(--green); }
.txt-red     { color:var(--red); }
.txt-gold    { color:var(--gold); }
.fw-600      { font-weight:600; }
.fw-700      { font-weight:700; }

/* ── Responsive helpers ───────────────────────────────────── */
@media(max-width:1024px){ .container{padding:0 20px;} }
@media(max-width:768px) { .container{padding:0 16px;} h1{font-size:26px;} h2{font-size:20px;} }

/* ── Corrections lisibilité mode clair/sombre ─────────────── */

/* Inputs lisibles dans les deux modes */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea {
  color: #EDE9DF;
  background: #0C0D0A;
  border-color: rgba(201,168,76,.18);
}
[data-theme="dark"] .input::placeholder { color: #524F49; }
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus {
  border-color: #C9A84C;
  box-shadow: 0 0 0 3px rgba(201,168,76,.11);
}

/* Titres en mode sombre */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: #EDE9DF; }
[data-theme="dark"] p { color: #BDB8AD; }

/* Cards en mode sombre */
[data-theme="dark"] .card { background:#131410; border-color:rgba(201,168,76,.09); }

/* Prix en mode sombre = or */
[data-theme="dark"] .lcard-price,
[data-theme="dark"] .stat-num,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .result-price,
[data-theme="dark"] .listing-price,
[data-theme="dark"] .fav-price { color: #C9A84C; }

/* Badges */
[data-theme="dark"] .badge-blue   { color: #6EC4F0; border-color: rgba(110,196,240,.20); background: rgba(110,196,240,.10); }
[data-theme="dark"] .badge-green  { color: #3EC870; }
[data-theme="dark"] .badge-gold   { color: #C9A84C; }

/* Sidebar dashboard en mode sombre */
[data-theme="dark"] .sidebar-item       { color: #87837A; }
[data-theme="dark"] .sidebar-item.active{ color: #C9A84C; background: rgba(201,168,76,.11); }
[data-theme="dark"] .dash-greeting span { color: #C9A84C; }

/* KPI delta */
[data-theme="dark"] .delta-up   { color: #3EC870; }
[data-theme="dark"] .delta-down { color: #E85A52; }

/* Drawer lisible en mode sombre */
[data-theme="dark"] .d-link         { color: #BDB8AD; }
[data-theme="dark"] .d-link.active  { color: #C9A84C; }
[data-theme="dark"] .d-link .ico    { color: #87837A; }
[data-theme="dark"] .d-link:hover .ico,
[data-theme="dark"] .d-link.active .ico { color: #C9A84C; }

/* Profile nav en mode sombre */
[data-theme="dark"] .profile-nav-item        { color: #87837A; }
[data-theme="dark"] .profile-nav-item.active { color: #C9A84C; }

/* Lisibilité générale mode clair : s'assurer que rien n'est trop clair */
[data-theme="light"] .txt-muted { color: #5C7080; }
[data-theme="light"] .text-secondary { color: #2D4055; }

/* ── Variables manquantes (alias) ─────────────────────────── */
:root {
  /* Alias success/danger pour compatibilité pages */
  --success:        #12B76A;
  --success-dim:    rgba(18,183,106,.10);
  --danger:         #E63323;
  --danger-dim:     rgba(230,51,35,.09);
  --border-default: rgba(4,104,165,.14);
  --max-w:          1280px;

  /* Footer */
  --footer-bg:      #0C1B2E;
  --footer-text:    #A8BEC9;
  --footer-border:  rgba(255,255,255,.07);
}
[data-theme="dark"] {
  --success:        #3EC870;
  --success-dim:    rgba(62,200,112,.12);
  --danger:         #E85A52;
  --danger-dim:     rgba(232,90,82,.11);
  --border-default: rgba(201,168,76,.14);
  --footer-bg:      #000000;
  --footer-text:    #87837A;
  --footer-border:  rgba(201,168,76,.08);
}

/* ── Footer global ────────────────────────────────────────── */
.xfooter {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 52px 0 28px;
  margin-top: 80px;
  border-top: 1px solid var(--footer-border);
}
.xfooter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--footer-border);
}
.xfooter-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.xfooter-brand-img { height: 34px; width: auto; object-fit: contain; }
.xfooter-brand-name {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  letter-spacing: -.4px; color: #fff; line-height: 1;
}
.xfooter-brand-name strong { color: var(--primary); }
.xfooter-desc { font-size: 13.5px; line-height: 1.75; color: var(--footer-text); max-width: 280px; }
.xfooter-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; margin-bottom: 16px; opacity: .7;
}
.xfooter-link {
  display: block; font-size: 13.5px; color: var(--footer-text);
  text-decoration: none; padding: 4px 0; transition: color .15s;
}
.xfooter-link:hover { color: var(--primary); }
.xfooter-bottom {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 24px;
}
.xfooter-copy { font-size: 11.5px; color: var(--footer-text); line-height: 1.7; opacity: .7; }
.xfooter-copy a { color: var(--primary); text-decoration: none; }
.xfooter-socials { display: flex; gap: 8px; }
.xfooter-social {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--footer-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--footer-text); text-decoration: none;
  transition: all .15s;
}
.xfooter-social:hover { border-color: var(--primary); color: var(--primary); background: rgba(4,104,165,.08); }
[data-theme="dark"] .xfooter-social:hover { background: rgba(201,168,76,.08); }
.xfooter-nopay {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid rgba(201,168,76,.35);
  background: rgba(201,168,76,.08);
  font-size: 12px; font-weight: 700; color: var(--gold);
  margin-top: 14px;
}

/* ── Page header inner ────────────────────────────────────── */
.inner-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-divider);
  padding: 28px 0 0;
}
.inner-header-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 16px 32px 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.inner-title { font-size: clamp(22px,3.5vw,34px); font-weight: 800; color: var(--text-primary); }
.inner-sub   { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.inner-content {
  max-width: var(--max-w); margin: 40px auto; padding: 0 32px 80px;
}

/* ── Retour button ────────────────────────────────────────── */
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); text-decoration: none;
  padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
  transition: all .15s; font-family: var(--font-body); background: none; cursor: pointer;
}
.btn-back:hover { color: var(--primary); background: var(--primary-dim); border-color: var(--border-light); }
.btn-back svg   { flex-shrink: 0; }

@media(max-width:768px) {
  .xfooter-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .xfooter-grid > :first-child { grid-column: 1/-1; }
  .inner-content { padding: 0 16px 60px; }
  .inner-header-inner { padding: 12px 16px 18px; }
}
@media(max-width:480px) {
  .xfooter-grid { grid-template-columns: 1fr; }
}

/* ── Variables manquantes complémentaires ─────────────────────── */
:root {
  --t-fast:   0.15s ease;
  --t-med:    0.25s ease;
  --warning:  #F07020;
  --warning-dim: rgba(240,112,32,.10);
  --info:     #0468A5;
  --info-dim: rgba(4,104,165,.10);
  --success:  #12B76A;
}
[data-theme="dark"] {
  --warning:  #F08040;
  --info:     #6EC4F0;
  --info-dim: rgba(110,196,240,.10);
  --success:  #3EC870;
}

/* ── Toggle Switch global amélioré ────────────────────────────── */
.tog { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.tog input { opacity:0; width:0; height:0; }
.tog-track {
  position: absolute; inset: 0; border-radius: 12px;
  background: var(--bg-raised); border: 1.5px solid var(--border-light);
  cursor: pointer; transition: all .22s ease;
}
.tog-track::after {
  content:''; position:absolute;
  width: 16px; height: 16px; top: 2px; left: 2px;
  background: var(--text-hint); border-radius: 50%;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.tog input:checked + .tog-track {
  background: var(--primary); border-color: var(--primary);
}
[data-theme="dark"] .tog input:checked + .tog-track {
  background: var(--gold); border-color: var(--gold);
}
.tog input:checked + .tog-track::after {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}

/* ================================================================
   RESPONSIVE GLOBAL — Mobile-first adaptatif complet
================================================================ */

/* ── Variables responsives ─────────────────────────────────────── */
:root {
  --container-px: 28px;
  --section-py: 80px;
}
@media (max-width: 1100px) { :root { --container-px: 20px; } }
@media (max-width: 768px)  { :root { --container-px: 16px; --section-py: 56px; } }
@media (max-width: 480px)  { :root { --container-px: 14px; --section-py: 44px; } }

/* ── Container global ──────────────────────────────────────────── */
.container { padding-left: var(--container-px); padding-right: var(--container-px); }

/* ── Boutons responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn { font-size: 13px; padding: 9px 16px; }
  .btn-lg { font-size: 14px; padding: 13px 20px; }
  .btn-sm { font-size: 12px; padding: 7px 12px; }
}

/* ── Inner pages (toutes les pages internes) ───────────────────── */
.inner-content {
  padding: 32px var(--container-px) 64px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .inner-content { padding: 20px var(--container-px) 48px; }
  .inner-header-inner { padding: 0 var(--container-px); }
  .inner-title { font-size: clamp(18px, 4vw, 24px); }
}

/* ── Dashboard layout ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: 1fr; padding: 0 var(--container-px) 48px; gap: 20px; }
  .dash-sidebar { position: static; }
  /* Sidebar collapsed on mobile */
  .dash-sidebar { display: flex; flex-direction: row; flex-wrap: wrap; border-radius: var(--r-lg); }
  .sidebar-profile { flex: 1 1 200px; }
  .sidebar-section { display: none; }
  .sidebar-item { padding: 8px 12px; font-size: 12px; gap: 6px; }
  .sidebar-bottom { width: 100%; padding: 10px 12px; }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-value { font-size: 24px; }
  .dash-topbar { flex-direction: column; gap: 12px; }
  .dash-topbar > div:last-child { width: 100%; }
  .dash-topbar .btn { flex: 1; justify-content: center; }
  .ann-table th:nth-child(3), .ann-table td:nth-child(3),
  .ann-table th:nth-child(4), .ann-table td:nth-child(4) { display: none; }
  .chart-wrap { padding: 14px; }
}

/* ── Messages responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .msg-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 64px);
    padding: 0 var(--container-px);
    display: flex;
    flex-direction: column;
  }
  .msg-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-divider);
    max-height: 260px;
    flex-shrink: 0;
  }
  .chat-area { flex: 1; height: auto; display: flex; flex-direction: column; }
  .chat-messages { min-height: 280px; flex: 1; }
  .chat-head-actions .btn-back { display: none; }
}
@media (max-width: 480px) {
  .msg-panel { max-height: 220px; }
  .conv-prop { display: none; }
  .chat-tools { gap: 2px; }
}

/* ── Detail page responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .detail-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .detail-features-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-actions .btn { font-size: 14px; }
}
@media (max-width: 480px) {
  .gallery-thumbs { display: none; }
  .detail-features-grid { grid-template-columns: 1fr 1fr; }
  .owner-card { flex-direction: column; align-items: flex-start; }
}

/* ── Recherche responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .page-with-sidebar { display: flex; flex-direction: column; height: auto; }
  .filters-sidebar { display: none; }
  .filters-sidebar.open { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; overflow-y: auto; border-radius: 0; max-width: 100%; }
  .results-zone { height: auto; overflow: visible; }
  .results-list-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .search-topbar { padding: 10px var(--container-px); gap: 6px; flex-wrap: wrap; }
  .search-topbar-actions { margin-left: auto; }
}
@media (max-width: 580px) {
  .results-list-grid { grid-template-columns: 1fr !important; }
  .result-card { flex-direction: row; }
  .result-thumb { width: 110px; min-width: 110px; height: 110px; flex-shrink: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .result-body { padding: 10px; flex: 1; }
  .result-price { font-size: 15px; }
  .result-tags { display: none; }
  .result-footer { padding: 6px 10px 8px; }
}

/* ── Publier responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .publish-layout { grid-template-columns: 1fr; padding: 20px var(--container-px); }
  .preview-sidebar { position: static; display: none; } /* hidden on tablet */
}
@media (max-width: 768px) {
  .publish-steps { gap: 2px; }
  .step-name { display: none; }
  .step-dot { width: 28px; height: 28px; font-size: 12px; }
  .type-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .amenities-check-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .type-grid { grid-template-columns: 1fr 1fr !important; }
  .publish-header-inner h1 { font-size: 22px; }
}

/* ── Auth responsive ────────────────────────────────────────────── */
@media (max-width: 500px) {
  .auth-box { padding: 24px 16px; margin: 16px; border-radius: var(--r-xl); }
  .auth-social { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .phone-row { flex-direction: column; }
  .phone-prefix { width: 100%; }
}

/* ── Profil responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-card { position: static; }
}
@media (max-width: 640px) {
  .profile-form-grid { grid-template-columns: 1fr !important; }
  .profile-tabs { font-size: 13px; }
  .profile-tab { padding: 10px 14px; }
}

/* ── Favoris responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .favs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .fav-thumb { height: 150px !important; }
}
@media (max-width: 480px) {
  .favs-grid { grid-template-columns: 1fr !important; }
}

/* ── Notifications responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .notif-pref-grid { grid-template-columns: 1fr !important; }
  .notif-alerts-grid { grid-template-columns: 1fr !important; }
}

/* ── Admin responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; max-height: none; }
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .admin-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; }
}

/* ── Navbar responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .xnav-desktop { display: none !important; }
  .xnav-hamburger { display: flex !important; }
  .xnav-brand { margin-right: auto; }
  .xnav-right { gap: 8px; }
  .xnav-user-name { display: none !important; }
}
@media (min-width: 769px) {
  .xnav-hamburger { display: none !important; }
  .xdrawer { display: none !important; }
}

/* ── Landing responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-inner { padding: 72px 0 48px; }
  h1 { font-size: clamp(26px, 7vw, 40px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; gap: 8px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}
@media (max-width: 480px) {
  .testi-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Overrides utilitaires ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* ── Password field wrapper (eye icon fix) ─────────────────────── */
.pwd-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.pwd-wrap .input {
  flex: 1;
  padding-right: 44px !important;
  width: 100%;
}
.pwd-eye {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-hint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: color .15s;
  z-index: 2;
  flex-shrink: 0;
}
.pwd-eye:hover { color: var(--primary); }

/* ── Modal Overlay (alias modal-wrap) ─────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-overlay .modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding: 36px;
  max-width: 500px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: scalein .3s ease;
  text-align: center;
}
.modal-overlay .modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  transition: all .15s;
}
.modal-overlay .modal-close:hover { color: var(--red); background: var(--red-dim); }

/* ── Nav login button specific style ──────────────────────── */
.xnav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 8px 18px;
  white-space: nowrap;
  font-weight: 600;
}
.xnav-login-btn .ico { width: 15px; height: 15px; }

/* ── Match alert notification (fixed bottom-right) ────────── */
.match-alert {
  position: fixed;
  bottom: 80px;
  right: 20px;
  max-width: 340px;
  z-index: 2000;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: slideup .35s ease;
}
@keyframes slideup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.match-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.match-alert-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); margin-bottom: 2px; }
.match-alert-desc  { font-size: 12.5px; color: var(--text-muted); }

/* ── Avatar edit label ─────────────────────────────────────── */
.avatar-edit-btn {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: all .15s;
  font-size: 14px;
}
.avatar-edit-btn:hover { background: var(--primary-dark, #035080); transform: scale(1.1); }
[data-theme="dark"] .avatar-edit-btn { border-color: var(--bg-card); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE FINAL — corrections overflow et adaptation
════════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow globally ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe, table { max-width: 100%; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--max-w, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media(max-width:768px) { .container { padding-left: 16px; padding-right: 16px; } }
@media(max-width:480px) { .container { padding-left: 12px; padding-right: 12px; } }

/* ── Tables responsive ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Forms ── */
input, select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Detail page ── */
@media(max-width:1024px) {
  .det-grid { grid-template-columns: 1fr !important; }
  .det-sidebar { position: static !important; }
}
@media(max-width:640px) {
  .det-wrap { padding: 0 12px 60px !important; }
  .det-title { font-size: clamp(18px,5vw,26px) !important; }
  .amenities-grid { grid-template-columns: 1fr 1fr !important; }
  .specs-row { grid-template-columns: 1fr 1fr !important; }
  .owner-stats { grid-template-columns: 1fr 1fr !important; }
  .det-actions { flex-wrap: wrap; }
}

/* ── Dashboard ── */
@media(max-width:1100px) {
  .dash-layout { grid-template-columns: 1fr !important; padding: 0 16px 48px !important; }
  .dash-sidebar { position: static !important; width: 100% !important; }
}
@media(max-width:640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dash-topbar { flex-direction: column; gap: 12px; }
  .dash-topbar > div:last-child { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .ann-table th:nth-child(3), .ann-table td:nth-child(3),
  .ann-table th:nth-child(4), .ann-table td:nth-child(4) { display: none; }
}

/* ── Auth ── */
@media(max-width:500px) {
  .auth-box { padding: 24px 16px !important; margin: 12px !important; }
  .auth-social { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .role-grid { grid-template-columns: 1fr 1fr !important; }
  .phone-row { flex-direction: column !important; }
  .phone-prefix { width: 100% !important; }
}

/* ── Messages ── */
@media(max-width:900px) {
  .msg-wrap { grid-template-columns: 1fr !important; height: auto !important; }
  .conv-panel { max-height: 45vh !important; border-right: none !important; border-bottom: 1px solid var(--border-divider) !important; }
  .chat-area { min-height: 55vh !important; }
}

/* ── Recherche ── */
@media(max-width:900px) {
  .page-with-sidebar { display: flex !important; flex-direction: column !important; height: auto !important; }
  .filters-sidebar { display: none !important; }
  .filters-sidebar.open { display: flex !important; flex-direction: column; position: fixed; inset: 0; z-index: 1000; overflow-y: auto; }
  .results-zone { height: auto !important; overflow: visible !important; }
}
@media(max-width:580px) {
  .results-list-grid { grid-template-columns: 1fr !important; }
  .result-card { flex-direction: row !important; }
  .result-thumb { width: 100px !important; min-width: 100px !important; height: 100px !important; flex-shrink: 0 !important; }
}

/* ── Profil ── */
@media(max-width:1100px) {
  .profile-layout { grid-template-columns: 1fr !important; }
  .profile-card { position: static !important; }
}
@media(max-width:640px) {
  .profile-form-grid { grid-template-columns: 1fr !important; }
  .profile-tabs { overflow-x: auto; white-space: nowrap; }
}

/* ── Admin ── */
@media(max-width:1024px) {
  .adm-layout { grid-template-columns: 1fr !important; }
  .adm-sidebar { position: static !important; height: auto !important; }
  .adm-kpi { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:580px) {
  .adm-kpi { grid-template-columns: 1fr 1fr !important; }
  .adm-main { padding: 12px !important; }
}

/* ── Publier ── */
@media(max-width:1100px) {
  .publish-layout { grid-template-columns: 1fr !important; }
  .preview-sidebar { display: none !important; }
}
@media(max-width:640px) {
  .publish-steps { gap: 4px; }
  .step-name { display: none; }
  .step-dot { width: 26px; height: 26px; font-size: 11px; }
}

/* ── Favoris ── */
@media(max-width:768px) { .favs-grid { grid-template-columns: 1fr 1fr !important; } }
@media(max-width:480px) { .favs-grid { grid-template-columns: 1fr !important; } }

/* ── Nav ── */
@media(max-width:768px) {
  .xnav-links { display: none !important; }
  .xnav-hamburger { display: flex !important; }
  .xnav-brand-name span:last-child { display: none; }
}
@media(min-width:769px) {
  .xnav-hamburger { display: none !important; }
  .xnav-drawer { display: none !important; }
}

/* ── Footer ── */
@media(max-width:768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
}
@media(max-width:480px) {
  .footer-links { flex-direction: column !important; gap: 8px !important; }
}