/* ============================================
   Admin Panel — Design moderne
   Palette : blanc crème / brun / or
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* Couleurs principales */
  --brown:     #5C3317;
  --brown-lt:  #7A4828;
  --gold:      #C8962E;
  --gold-lt:   #E5B44A;
  --cream:     #FDF8F3;
  --white:     #FFFFFF;
  --dark:      #1C1008;

  /* Sidebar */
  --side-bg:   #2A1A0A;
  --side-bg2:  #3D2510;

  /* Grays */
  --gray-100:  #F9F5F0;
  --gray-200:  #EDE9E4;
  --gray-300:  #D5CFC8;
  --gray-500:  #8C7B6B;
  --gray-700:  #4A3728;

  /* Utilitaires */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 2px 16px rgba(92,51,23,.1);
  --shadow-md: 0 4px 24px rgba(92,51,23,.14);
  --sidebar-w: 248px;
  --trans:     .22s ease;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--cream);
  color:var(--gray-700);
  font-size:.9rem;
  line-height:1.6;
}

/* ==============================
   LAYOUT
   ============================== */
.admin-layout{display:flex;min-height:100vh;}

/* Overlay mobile */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;}
.sidebar-overlay.visible{display:block;}

/* ==============================
   SIDEBAR
   ============================== */
.admin-sidebar{
  width:var(--sidebar-w);
  background:var(--side-bg);
  display:flex;flex-direction:column;flex-shrink:0;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
  transform:translateX(calc(-1 * var(--sidebar-w)));
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.admin-sidebar.open{transform:translateX(0);}

.sidebar-logo{
  padding:1.25rem 1.4rem 1rem;
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:600;
  color:var(--gold-lt);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
}
.sidebar-logo span{font-size:1.4rem;margin-right:.4rem;}
.sidebar-close{
  background:none;border:none;color:rgba(255,255,255,.3);
  cursor:pointer;font-size:1rem;padding:.2rem;transition:color var(--trans);
}
.sidebar-close:hover{color:#fff;}

/* Section dans sidebar */
.sidebar-section{
  padding:.4rem 1rem .2rem;
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.28);
  margin-top:.6rem;
}

.sidebar-nav{padding:.5rem 0;flex:1;}
.sidebar-nav a{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem 1.4rem;
  color:rgba(255,255,255,.65);font-size:.85rem;font-weight:500;
  transition:var(--trans);text-decoration:none;position:relative;
  border-radius:0;
}
.sidebar-nav a:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.sidebar-nav a.active{
  background:linear-gradient(90deg,rgba(200,150,46,.18),rgba(200,150,46,.06));
  color:var(--gold-lt);
  border-left:3px solid var(--gold);
}
.sidebar-nav a i{width:16px;text-align:center;flex-shrink:0;font-size:.9rem;}

/* Divider + logout */
.sidebar-divider{height:1px;background:rgba(255,255,255,.07);margin:.6rem 1.4rem;}
.logout-link{color:#f87171 !important;margin-top:.3rem;}
.logout-link:hover{background:rgba(248,113,113,.1) !important;color:#fca5a5 !important;}

.admin-main{flex:1;min-width:0;width:100%;overflow-x:hidden;}

/* ==============================
   TOPBAR
   ============================== */
.admin-topbar{
  background:var(--white);
  padding:.75rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--gray-200);
  position:sticky;top:0;z-index:100;
  gap:.6rem;flex-wrap:wrap;
}
.topbar-left{display:flex;align-items:center;gap:.75rem;}
.topbar-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.admin-topbar h1{
  font-size:1rem;font-weight:700;color:var(--dark);
  font-family:'Inter',sans-serif;
}

/* Hamburger */
.sidebar-toggle-btn{
  background:var(--cream);color:var(--brown);
  border:1.5px solid var(--gray-200);border-radius:8px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;transition:var(--trans);flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:var(--brown);color:#fff;border-color:var(--brown);}

/* Breadcrumb page title */
.page-title{
  font-size:1rem;font-weight:700;color:var(--dark);
}

/* ==============================
   STATS
   ============================== */
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;padding:1.25rem 1.5rem .5rem;
}
.stat-box{
  background:var(--white);border-radius:var(--radius-lg);
  padding:1.25rem 1.1rem;
  display:flex;align-items:center;gap:1rem;
  box-shadow:var(--shadow);
  border:1px solid var(--gray-200);
  transition:var(--trans);
}
.stat-box:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.stat-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
}
.stat-icon.brown{background:rgba(92,51,23,.1);color:var(--brown);}
.stat-icon.gold {background:rgba(200,150,46,.12);color:var(--gold);}
.stat-icon.blue {background:rgba(59,130,246,.1); color:#3B82F6;}
.stat-box span{font-size:1.65rem;font-weight:700;display:block;line-height:1;color:var(--dark);}
.stat-box p{font-size:.75rem;color:var(--gray-500);margin-top:.2rem;}

/* ==============================
   DASHBOARD GRID
   ============================== */
.dash-grid{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:1.1rem;padding:.75rem 1.5rem 2rem;
}

/* ==============================
   CARDS
   ============================== */
.card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:1.25rem;box-shadow:var(--shadow);
  margin:0 1.5rem 1.1rem;
  border:1px solid var(--gray-200);
}
.card h2{font-size:.95rem;font-weight:700;color:var(--dark);margin-bottom:1rem;}
.card-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1rem;flex-wrap:wrap;gap:.4rem;
}
.card-header h2{margin-bottom:0;}
.card-header a{color:var(--gold);font-size:.8rem;font-weight:600;text-decoration:none;}
.card-header a:hover{color:var(--gold-lt);}

/* ==============================
   TABLEAUX
   ============================== */
.table-wrap{overflow-x:auto;}
.admin-table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:400px;}
.admin-table thead tr{background:var(--gray-100);}
.admin-table th{
  text-align:left;padding:.7rem .85rem;
  color:var(--gray-500);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  border-bottom:1px solid var(--gray-200);
}
.admin-table td{
  padding:.7rem .85rem;
  border-bottom:1px solid var(--gray-200);
  vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tbody tr:hover td{background:var(--gray-100);}
.table-thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1.5px solid var(--gray-200);}
.placeholder-thumb{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--gray-100);border-radius:8px;font-size:1.2rem;
  border:1.5px solid var(--gray-200);
}

/* ==============================
   BADGES
   ============================== */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .6rem;border-radius:99px;
  font-size:.7rem;font-weight:600;white-space:nowrap;
}
.badge-en_attente    {background:#FEF9C3;color:#854D0E;}
.badge-confirmee     {background:#DBEAFE;color:#1E40AF;}
.badge-en_preparation{background:#FEE2E2;color:#9F1239;}
.badge-livree        {background:#DCFCE7;color:#166534;}
.badge-annulee       {background:#F3F4F6;color:#6B7280;}
.badge-ok            {background:#DCFCE7;color:#166534;}
.badge-off           {background:#F3F4F6;color:#9CA3AF;}
.badge-momo          {background:#ECFDF5;color:#065F46;}
.badge-livraison     {background:#EFF6FF;color:#1D4ED8;}

/* ==============================
   NOTIFICATIONS
   ============================== */
.notif-badge{
  background:#EF4444;color:#fff;font-size:.6rem;font-weight:700;
  border-radius:50%;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
}
.notif-badge.pulse{animation:pulse-anim 1.6s infinite;}
@keyframes pulse-anim{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}

.notif-badge-inline{
  background:#EF4444;color:#fff;font-size:.58rem;font-weight:700;
  border-radius:8px;padding:.08rem .28rem;margin-left:.2rem;vertical-align:middle;
}
.topbar-notif-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#FEF3C7;color:#92400E;
  padding:.32rem .75rem;border-radius:99px;
  font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;
}

.alert-notif{
  background:linear-gradient(90deg,#FFFBEB,#FEF3C7);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:.85rem 1.1rem;margin:.75rem 1.5rem;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
}
.alert-notif i{font-size:1.3rem;color:var(--gold);}
.alert-notif div{flex:1;min-width:120px;}
.alert-notif strong{display:block;color:#92400E;font-size:.88rem;}
.alert-notif span{font-size:.78rem;color:#B45309;}

/* Notif list */
.notif-list{display:flex;flex-direction:column;gap:.5rem;}
.notif-list.compact .notif-item{padding:.55rem .75rem;}
.notif-item{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.85rem 1rem;border-radius:var(--radius);
  border:1px solid var(--gray-200);
}
.notif-item.non-lue{background:#FFFBEB;border-color:#FDE68A;}
.notif-item.lue{background:var(--gray-100);opacity:.78;}
.notif-icon{
  width:32px;height:32px;border-radius:50%;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.82rem;
}
.notif-body{flex:1;min-width:0;}
.notif-body p{font-size:.8rem;margin-bottom:.1rem;word-break:break-word;}
.notif-body small{color:var(--gray-500);font-size:.7rem;}
.empty-notifs{text-align:center;padding:2rem;color:var(--gray-500);}
.empty-notifs i{font-size:2rem;display:block;margin-bottom:.65rem;opacity:.4;}

.row-new{background:#FFFBEB !important;}
.dot-new{
  display:inline-block;width:7px;height:7px;
  background:#EF4444;border-radius:50%;
  margin-right:.3rem;animation:pulse-anim 1.5s infinite;
  vertical-align:middle;
}

/* ==============================
   BOUTONS
   ============================== */
.btn-admin{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--brown);color:#fff;
  border:none;padding:.52rem 1.05rem;border-radius:8px;
  font-size:.85rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:var(--trans);
  font-family:'Inter',sans-serif;white-space:nowrap;
}
.btn-admin:hover{background:var(--brown-lt);}
.btn-admin.btn-gold{background:var(--gold);color:var(--dark);}
.btn-admin.btn-gold:hover{background:var(--gold-lt);}
.btn-admin.btn-ghost{
  background:transparent;color:var(--gray-700);
  border:1.5px solid var(--gray-300);
}
.btn-admin.btn-ghost:hover{background:var(--gray-100);}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:var(--gray-100);
  border:1.5px solid var(--gray-200);border-radius:7px;
  color:var(--gray-700);font-size:.78rem;
  transition:var(--trans);margin-right:.15rem;cursor:pointer;
}
.btn-icon:hover{background:var(--brown);color:#fff;border-color:var(--brown);}
.btn-icon.btn-danger:hover{background:#DC2626;border-color:#DC2626;}
.actions{white-space:nowrap;}

/* Quick links */
.quick-links{display:flex;flex-direction:column;gap:.35rem;}
.quick-link{
  display:flex;align-items:center;gap:.55rem;
  padding:.58rem .85rem;background:var(--gray-100);
  border:1.5px solid var(--gray-200);border-radius:8px;
  font-size:.82rem;font-weight:600;color:var(--gray-700);
  transition:var(--trans);cursor:pointer;
  font-family:'Inter',sans-serif;text-align:left;width:100%;text-decoration:none;
}
.quick-link:hover{background:var(--brown);color:#fff;border-color:var(--brown);}
.quick-link i{width:14px;color:var(--gold);transition:var(--trans);}
.quick-link:hover i{color:rgba(255,255,255,.8);}

/* ==============================
   FORMULAIRES
   ============================== */
.admin-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.admin-form .form-group{display:flex;flex-direction:column;gap:.28rem;}
.admin-form .form-group.full{grid-column:1/-1;}
.admin-form label{font-size:.78rem;font-weight:600;color:var(--gray-700);}
.admin-form small{color:var(--gray-500);font-size:.7rem;margin-top:.15rem;display:block;}
.admin-form input,
.admin-form select,
.admin-form textarea{
  border:1.5px solid var(--gray-300);border-radius:8px;
  padding:.58rem .82rem;font-size:.87rem;
  font-family:'Inter',sans-serif;transition:var(--trans);
  width:100%;background:var(--white);color:var(--dark);
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus{
  outline:none;border-color:var(--brown);
  box-shadow:0 0 0 3px rgba(92,51,23,.08);
}
.form-actions{
  display:flex;gap:.6rem;margin-top:1.1rem;
  padding-top:1rem;border-top:1.5px solid var(--gray-200);flex-wrap:wrap;
}
.checkboxes{display:flex;flex-direction:column;gap:.4rem;justify-content:center;}
.checkbox-label{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.85rem;}
.checkbox-label input{width:auto;accent-color:var(--brown);}
.current-img img{max-width:100px;border-radius:8px;margin-bottom:.4rem;border:1.5px solid var(--gray-200);}
.hero-current-img{margin-bottom:.7rem;}
.hero-current-img img{width:100%;max-width:400px;height:130px;object-fit:cover;border-radius:10px;border:1.5px solid var(--gray-200);display:block;}

input[type="tel"]{-moz-appearance:textfield;}

/* ==============================
   MOT DE PASSE
   ============================== */
.input-eye{position:relative;display:flex;align-items:center;}
.input-eye input{flex:1;padding-right:2.5rem;}
.eye-btn{position:absolute;right:.65rem;background:none;border:none;cursor:pointer;color:var(--gray-500);font-size:.88rem;padding:0;transition:color var(--trans);}
.eye-btn:hover{color:var(--brown);}
.mdp-strength{height:4px;background:var(--gray-200);border-radius:99px;margin-top:.4rem;overflow:hidden;}
.strength-bar{height:100%;width:0;border-radius:99px;transition:width .3s,background .3s;}

/* ==============================
   ALERTES
   ============================== */
.alert-admin{
  padding:.72rem .95rem;border-radius:8px;
  display:flex;align-items:center;gap:.5rem;font-size:.84rem;
}
.alert-success{background:#DCFCE7;color:#166534;}
.alert-error  {background:#FEE2E2;color:#991B1B;}

/* ==============================
   ONGLETS PARAMÈTRES
   ============================== */
.param-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem;padding-top:.4rem;}
.param-tab{
  background:var(--white);border:1.5px solid var(--gray-300);
  border-radius:8px;padding:.42rem .9rem;
  font-size:.8rem;font-weight:600;color:var(--gray-700);
  cursor:pointer;transition:var(--trans);font-family:'Inter',sans-serif;
}
.param-tab:hover{background:var(--gray-100);border-color:var(--gray-500);}
.param-tab.active{background:var(--brown);border-color:var(--brown);color:#fff;}
.param-panel{display:none;}
.param-panel.active{display:block;}
.param-card{margin:0 0 1rem 0 !important;}
.param-section-title{font-size:.9rem;font-weight:700;color:var(--dark);display:flex;align-items:center;gap:.4rem;margin-bottom:1rem;}
.param-section-title i{color:var(--gold);}

/* FedaPay guide */
.fedapay-guide{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:.9rem 1rem;margin-bottom:1rem;font-size:.82rem;}
.fedapay-guide h4{color:#1E40AF;margin-bottom:.5rem;}
.fedapay-guide ol{padding-left:1rem;}
.fedapay-guide li{padding:.15rem 0;}
.fedapay-guide a{color:#1E40AF;text-decoration:underline;}
.fedapay-guide code{background:#DBEAFE;padding:.06rem .28rem;border-radius:4px;}
.fedapay-status{margin-top:.8rem;font-size:.84rem;font-weight:700;display:flex;align-items:center;gap:.4rem;}

/* ==============================
   COMMANDES DÉTAIL
   ============================== */
.momo-detail-box{background:#ECFDF5;border:1px solid #6EE7B7;border-radius:10px;padding:1rem;}
.momo-detail-box h3{color:#065F46;margin-bottom:.6rem;}
.momo-detail-box p{margin-bottom:.3rem;font-size:.86rem;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1rem;}
.detail-grid p{margin-bottom:.3rem;font-size:.86rem;}
.two-col{display:grid;grid-template-columns:1fr 1.5fr;gap:1rem;padding:0 1.5rem 2rem;}

/* ==============================
   LOGIN — redesign
   ============================== */
.login-page{
  background:linear-gradient(135deg,var(--brown) 0%,var(--dark) 100%);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:1rem;
}
.login-box{
  background:var(--white);border-radius:20px;
  padding:2.25rem 2rem;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-logo{
  text-align:center;margin-bottom:.35rem;
  font-family:'Playfair Display',serif;
  font-size:1.5rem;color:var(--brown);
}
.login-logo span{font-size:2rem;display:block;margin-bottom:.2rem;}
.login-box h2{text-align:center;font-size:.95rem;color:var(--gray-500);margin-bottom:1.5rem;font-weight:500;}
.login-box .form-group{margin-bottom:1rem;}
.login-box label{display:block;font-size:.78rem;font-weight:600;color:var(--gray-700);margin-bottom:.32rem;}
.login-box input{
  width:100%;border:1.5px solid var(--gray-300);border-radius:8px;
  padding:.72rem 1rem;font-size:.9rem;transition:var(--trans);font-family:'Inter',sans-serif;
}
.login-box input:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px rgba(92,51,23,.1);}
.btn-login{
  width:100%;background:var(--brown);color:#fff;border:none;
  padding:.82rem;border-radius:8px;font-size:.92rem;font-weight:700;
  cursor:pointer;transition:var(--trans);font-family:'Inter',sans-serif;
  margin-top:.3rem;
}
.btn-login:hover{background:var(--brown-lt);}
.back-link{display:block;text-align:center;margin-top:1rem;color:var(--gray-500);font-size:.8rem;text-decoration:none;}
.back-link:hover{color:var(--brown);}
.error-msg{background:#FEE2E2;color:#991B1B;padding:.62rem .85rem;border-radius:8px;margin-bottom:.85rem;font-size:.83rem;border-left:3px solid #DC2626;}

/* ==============================
   HERO CURRENT IMAGE
   ============================== */
.hero-current-img{margin-bottom:.7rem;}

/* ==============================
   STATS GRID 3 col
   ============================== */
.stats-grid-3{grid-template-columns:repeat(3,1fr);}

/* ==============================
   RESPONSIVE — tablette ≤900px
   ============================== */
@media(max-width:900px){
  .dash-grid{grid-template-columns:1fr;padding:0 1rem 1.5rem;}
  .two-col{grid-template-columns:1fr;padding:0 1rem 1.5rem;}
  .card{margin:0 1rem 1rem;}
  .stats-grid{padding:.85rem 1rem;gap:.75rem;}
  .admin-form .form-grid{grid-template-columns:1fr 1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .alert-notif{margin:.6rem 1rem;}
}

/* ==============================
   RESPONSIVE — mobile ≤600px
   ============================== */
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:.55rem;padding:.75rem;}
  .stats-grid .stat-box:nth-child(3){grid-column:1/-1;}
  .stat-box{padding:.85rem;}
  .stat-box span{font-size:1.35rem;}
  .stat-icon{width:38px;height:38px;font-size:1.05rem;}

  .card{margin:0 .65rem .75rem;padding:.9rem;}
  .admin-table{font-size:.78rem;}
  .admin-table th,.admin-table td{padding:.45rem .5rem;}
  .admin-form .form-grid{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .admin-topbar{padding:.65rem .9rem;}
  .admin-topbar h1{font-size:.9rem;}
  .param-tabs{gap:.22rem;}
  .param-tab{font-size:.74rem;padding:.35rem .62rem;}
  .dash-grid{padding:0 .65rem 1.25rem;}
  .alert-notif{margin:.5rem .65rem;}
}

/* ==============================
   PARAMÈTRES — layout stable
   ============================== */
.params-wrap {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    min-height: calc(100vh - 56px);
}

/* Onglets verticaux (gauche) */
.param-sidebar-tabs {
    background: var(--white);
    border-right: 1px solid var(--gray-200);
    padding: 1.25rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.param-sidebar-tabs .param-tab {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    padding: .62rem .9rem;
    border-radius: 8px;
    font-size: .83rem;
    border: none;
    background: transparent;
    color: var(--gray-700);
    font-weight: 500;
    cursor: pointer;
    transition: var(--trans);
    font-family: 'Inter', sans-serif;
}
.param-sidebar-tabs .param-tab:hover { background: var(--gray-100); }
.param-sidebar-tabs .param-tab.active {
    background: rgba(92,51,23,.08);
    color: var(--brown);
    font-weight: 700;
}
.param-sidebar-tabs .param-tab i { width: 14px; color: var(--gold); }
.param-sidebar-tabs .param-tab.active i { color: var(--brown); }

/* Zone contenu */
.param-content {
    background: var(--cream);
    padding: 1.5rem;
    overflow-y: auto;
}
.param-panel { display: none; }
.param-panel.active { display: flex; flex-direction: column; gap: 1.25rem; }
.param-panel-header { }
.param-panel-header h2 {
    font-size: 1rem; font-weight: 700; color: var(--dark);
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .25rem;
}
.param-panel-header h2 i { color: var(--gold); }
.param-panel-header p { font-size: .8rem; color: var(--gray-500); }
.param-fields {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.param-panel-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}

/* Grille 2 colonnes dans param-fields */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Séparateur de section */
.form-sep {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--gray-500);
    border-top: 1px solid var(--gray-200);
    padding-top: 1rem; margin-top: .25rem;
}

/* Alertes globales (hors card) */
.page-alert {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.5rem; font-size: .88rem; font-weight: 500;
}
.page-alert-success { background: #DCFCE7; color: #166534; border-left: 4px solid #22C55E; }
.page-alert-error   { background: #FEE2E2; color: #991B1B; border-left: 4px solid #EF4444; }

/* Logo preview */
.logo-preview-current {
    display: flex; align-items: center; gap: 1rem;
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: 10px; padding: .75rem 1rem;
    margin-bottom: .6rem;
}
.logo-preview-current img {
    width: 52px; height: 52px; object-fit: contain;
    border-radius: 6px; flex-shrink: 0;
    background: white; border: 1px solid var(--gray-200); padding: 2px;
}
.logo-preview-info span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }

/* Hero preview */
.hero-preview-current { margin-bottom: .6rem; }
.hero-preview-current img {
    width: 100%; max-width: 480px; height: 140px;
    object-fit: cover; border-radius: 10px;
    border: 1px solid var(--gray-200); display: block;
}

/* File preview */
.file-preview-wrap {
    display: inline-flex; align-items: center; gap: .65rem;
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: 8px; padding: .5rem .75rem; margin-top: .4rem;
}
.file-preview-wrap img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.file-preview-wrap span { font-size: .78rem; color: var(--gray-500); }

/* Responsive paramètres */
@media (max-width: 768px) {
    .params-wrap { grid-template-columns: 1fr; }
    .param-sidebar-tabs {
        flex-direction: row; flex-wrap: wrap;
        border-right: none; border-bottom: 1px solid var(--gray-200);
        padding: .75rem;
    }
    .param-sidebar-tabs .param-tab { width: auto; }
    .form-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .param-content { padding: 1rem; }
    .param-fields { padding: 1rem; }
}

/* ================================================
   PARAMÈTRES — Layout deux colonnes fixe
   ================================================ */

/* Conteneur global paramètres */
.params-wrap {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    margin: 0 1.5rem 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    overflow: hidden;
    /* hauteur minimale pour éviter les sauts */
    min-height: 500px;
}

/* Colonne onglets (gauche) */
.param-sidebar-tabs {
    background: var(--gray-100);
    border-right: 1px solid var(--gray-200);
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    /* largeur fixe qui ne bouge jamais */
    flex-shrink: 0;
    min-width: 200px;
}
.param-sidebar-tabs .param-tab {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-700);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: var(--trans);
    font-family: 'Inter', sans-serif;
    text-align: left;
    white-space: nowrap;
}
.param-sidebar-tabs .param-tab i { width: 14px; color: var(--gray-500); }
.param-sidebar-tabs .param-tab:hover {
    background: var(--gray-200);
    color: var(--dark);
}
.param-sidebar-tabs .param-tab.active {
    background: var(--white);
    color: var(--brown);
    border-left-color: var(--brown);
    font-weight: 700;
}
.param-sidebar-tabs .param-tab.active i { color: var(--gold); }

/* Zone contenu (droite) — taille fixe, pas de saut */
.param-content {
    display: grid;
    grid-template-rows: 1fr;
    min-width: 0;
    overflow: hidden;
}
.param-panel {
    display: none;
    flex-direction: column;
    /* occupe toute la hauteur pour stabiliser */
    min-height: 500px;
}
.param-panel.active {
    display: flex;
}

/* Header du panel */
.param-panel-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}
.param-panel-header h2 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.param-panel-header h2 i { color: var(--gold); }
.param-panel-header p {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: .3rem;
}

/* Corps du panel — scroll interne si besoin */
.param-fields {
    flex: 1;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Footer bouton sauvegarder */
.param-panel-footer {
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-100);
    flex-shrink: 0;
}

/* Séparateur de section dans un panel */
.form-sep {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray-500);
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--gray-200);
    margin-top: .5rem;
}

/* Grille 2 colonnes dans un panel */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Alertes page (hors card) */
.page-alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    margin: .5rem 1.5rem .75rem;
    border-radius: var(--radius);
    font-size: .86rem;
    font-weight: 500;
    flex-shrink: 0;
}
.page-alert-success {
    background: #DCFCE7;
    color: #166534;
    border-left: 4px solid #22C55E;
}
.page-alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border-left: 4px solid #EF4444;
}

/* ================================================
   LOGO PREVIEW
   ================================================ */
.logo-preview-current {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
}
.logo-preview-current img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    flex-shrink: 0;
}
.logo-preview-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.logo-preview-info span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Aperçu hero image */
.hero-preview-current {
    margin-bottom: .5rem;
}
.hero-preview-current img {
    width: 100%;
    max-width: 380px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    display: block;
}

/* Aperçu fichier après sélection */
.file-preview-wrap {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: var(--gray-100);
    border-radius: 8px;
    border: 1.5px solid var(--gray-200);
}
.file-preview-wrap img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 6px;
}
.file-preview-wrap span {
    font-size: .78rem;
    color: var(--gray-500);
}

/* ================================================
   RESPONSIVE PARAMÈTRES
   ================================================ */
@media (max-width: 700px) {
    .params-wrap {
        grid-template-columns: 1fr;
        margin: 0 .65rem 1.5rem;
    }
    .param-sidebar-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        padding: .5rem;
        min-width: 0;
        gap: .25rem;
    }
    .param-sidebar-tabs .param-tab {
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 6px;
        padding: .4rem .7rem;
        font-size: .75rem;
    }
    .param-sidebar-tabs .param-tab.active {
        background: var(--brown);
        color: #fff;
        border-bottom-color: transparent;
    }
    .param-sidebar-tabs .param-tab.active i { color: rgba(255,255,255,.8); }
    .form-row-2 { grid-template-columns: 1fr; }
    .param-fields { padding: 1rem; }
    .param-panel-header { padding: 1rem; }
    .param-panel-footer { padding: .75rem 1rem; }
}