/* ═══════════════════════════════════════════════════════════
   JADMALL — ESPACE PARTENAIRE
   Charte graphique reprise du site public (variables --green de inc/entete.php)
   Préfixe dédié `ps-` : aucune collision avec jm-/cat-/dp- existants.
═══════════════════════════════════════════════════════════ */

:root {
    --ps-green        : #6ab04c;
    --ps-green-dark   : #4d8a35;
    --ps-green-light  : #e8f5e1;
    --ps-green-glow   : rgba(106,176,76,.22);
    --ps-white        : #ffffff;
    --ps-offwhite     : #f8faf6;
    --ps-text-dark    : #1a2310;
    --ps-text-mid     : #4a5540;
    --ps-text-light   : #8a9882;
    --ps-border       : #e4ede0;
    --ps-danger       : #e05252;
    --ps-danger-light : #fdeaea;
    --ps-warning      : #e0a83a;
    --ps-warning-light: #fdf3e0;
    --ps-info         : #3a8ee0;
    --ps-info-light   : #e8f2fd;
    --ps-radius       : 12px;
    --ps-radius-sm    : 8px;
    --ps-shadow-sm    : 0 1px 4px rgba(0,0,0,.06);
    --ps-shadow-md    : 0 4px 20px rgba(0,0,0,.10);
    --ps-shadow-lg    : 0 12px 40px rgba(0,0,0,.18);
    --ps-sidebar-w    : 250px;
    --ps-topbar-h     : 60px;
    --ps-transition   : all .2s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
.ps-login-body, .ps-body, .ps-login-body *, .ps-body * { font-family:'DM Sans','Segoe UI',Arial,sans-serif; }

/* Icônes SVG inline (voir inc/icons.php) — aucune dépendance à une police externe. */
.ps-icon{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; vertical-align:middle; }
.ps-icon svg{ fill:currentColor; display:block; width:100%; height:100%; }

/* ═══════════════ LOGIN ═══════════════ */
.ps-login-body{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--ps-text-dark) 0%, #2d4020 55%, var(--ps-green-dark) 100%); padding:20px; }
.ps-login-wrap{ width:100%; max-width:400px; }
.ps-login-card{ background:var(--ps-white); border-radius:var(--ps-radius); box-shadow:var(--ps-shadow-lg); padding:36px 32px; }
.ps-login-logo{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--ps-text-dark); margin-bottom:6px; }
.ps-login-logo img{ height:34px; width:auto; }
.ps-login-logo b{ color:var(--ps-green-dark); }
.ps-login-sub{ font-size:13px; color:var(--ps-text-light); margin:0 0 22px; }
.ps-login-form{ display:flex; flex-direction:column; gap:16px; }
.ps-login-foot{ text-align:center; font-size:12.5px; color:var(--ps-text-light); margin-top:20px; }
.ps-login-foot a{ color:var(--ps-green-dark); font-weight:700; text-decoration:none; }
.ps-login-foot a:hover{ text-decoration:underline; }

/* ═══════════════ FORMS ═══════════════ */
.ps-field{ display:flex; flex-direction:column; gap:6px; }
.ps-field label{ font-size:12.5px; font-weight:700; color:var(--ps-text-mid); }
.ps-field label .req{ color:var(--ps-danger); font-weight:900; font-size:13px; margin-left:1px; }
/* Champs obligatoires : bordure + fond ambrés pour se distinguer d'un simple coup d'oeil,
   redevient l'état normal (vert) au focus pour ne pas gêner la saisie. */
.ps-field input[required], .ps-field select[required], .ps-field textarea[required]{
    border-color: var(--ps-warning);
    background: var(--ps-warning-light);
}
.ps-field input[required]:focus, .ps-field select[required]:focus, .ps-field textarea[required]:focus{
    border-color: var(--ps-green);
    background: var(--ps-white);
}
.ps-field input, .ps-field select, .ps-field textarea{
    border:1.5px solid var(--ps-border); border-radius:var(--ps-radius-sm); padding:11px 14px;
    font-size:14px; font-family:inherit; color:var(--ps-text-dark); background:var(--ps-offwhite); width:100%;
    transition:var(--ps-transition);
}
.ps-field input:focus, .ps-field select:focus, .ps-field textarea:focus{ outline:none; border-color:var(--ps-green); background:var(--ps-white); box-shadow:0 0 0 4px var(--ps-green-glow); }
.ps-field textarea{ resize:vertical; min-height:90px; }
.ps-field .ps-hint{ font-size:11.5px; color:var(--ps-text-light); }
.ps-form-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.ps-form-row .ps-field{ flex:1 1 220px; }

/* ── Champs fichier avec zone de dépôt + prévisualisation ── */
.ps-file-drop{
    position:relative; min-height:132px; border:2px dashed var(--ps-border); border-radius:var(--ps-radius-sm);
    background:var(--ps-offwhite); display:flex; align-items:center; justify-content:center;
    padding:10px; transition:var(--ps-transition); overflow:hidden;
}
.ps-file-drop.dragover{ border-color:var(--ps-green); background:var(--ps-green-light); }
.ps-file-drop:has(input[required]){ border-color:var(--ps-warning); background:var(--ps-warning-light); }
.ps-file-drop.has-file{ border-style:solid !important; border-color:var(--ps-border) !important; background:var(--ps-offwhite) !important; }
.ps-file-drop input[type="file"]{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; margin:0; padding:0;
}
.ps-file-drop-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ps-text-light); font-size:12px; text-align:center; pointer-events:none; }
.ps-file-drop-empty .ps-icon{ color:var(--ps-border); }
.ps-file-drop-preview{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.ps-file-drop-preview img{ max-width:100%; max-height:112px; border-radius:8px; object-fit:cover; }
/* Boutons Modifier/Retirer : rendus hors de .ps-file-drop (voir vue), jamais superposés à
   l'input fichier invisible qui couvre toute la zone de dépôt (sinon le clic ouvre toujours
   le sélecteur de fichiers au lieu de déclencher le bouton). */
.ps-file-drop-toolbar{ display:flex; gap:8px; margin-top:8px; }
.ps-file-drop-gallery{ display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-top:8px; }
.ps-file-drop-gallery-item{ position:relative; z-index:3; width:60px; height:60px; border-radius:8px; overflow:hidden; box-shadow:var(--ps-shadow-sm); }
.ps-file-drop-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.ps-file-drop-gallery-item button{
    position:absolute; top:1px; width:16px; height:16px; border-radius:50%; border:none;
    background:rgba(26,35,16,.75); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.ps-file-drop-gallery-item button.ps-gallery-remove{ right:1px; }
.ps-file-drop-gallery-item button.ps-gallery-edit{ left:1px; }
.ps-file-drop-gallery-item button:hover{ background:var(--ps-danger); }
.ps-file-drop-gallery-item button.ps-gallery-edit:hover{ background:var(--ps-green); }

/* ── Sélecteur photo mobile (action sheet Caméra / Galerie) ── */
.ps-photo-sheet-backdrop{
    display:none; position:fixed; inset:0; z-index:1000; background:rgba(26,35,16,.55);
    align-items:flex-end; justify-content:center;
}
.ps-photo-sheet-backdrop.open{ display:flex; }
.ps-photo-sheet{
    width:100%; max-width:420px; background:var(--ps-white); border-radius:16px 16px 0 0;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 30px rgba(0,0,0,.18); animation:psSheetUp .22s ease;
}
@keyframes psSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.ps-photo-sheet-title{ text-align:center; font-size:12px; font-weight:700; color:var(--ps-text-light); text-transform:uppercase; letter-spacing:.4px; padding:10px 0 6px; }
.ps-photo-sheet-opt{
    width:100%; display:flex; align-items:center; gap:12px; padding:14px 10px; border:none; background:none;
    border-top:1px solid var(--ps-border); font-size:14.5px; font-weight:700; color:var(--ps-text-dark); cursor:pointer; text-align:left;
}
.ps-photo-sheet-opt .ps-icon{ color:var(--ps-green); }
.ps-photo-sheet-opt:active{ background:var(--ps-offwhite); }
.ps-photo-sheet-cancel{
    width:100%; margin-top:8px; padding:13px; border:none; border-radius:12px; background:var(--ps-offwhite);
    color:var(--ps-text-mid); font-size:14px; font-weight:800; cursor:pointer;
}
/* Sur desktop la feuille reste centrée (pas de "sheet" ancré en bas comme sur mobile). */
@media (min-width:768px){
    .ps-photo-sheet-backdrop{ align-items:center; }
    .ps-photo-sheet{ border-radius:14px; max-width:360px; }
    @keyframes psSheetUp{ from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:none; } }
}

/* ── Éditeur d'image (rognage + ajustements) ── */
.ps-imgeditor-backdrop{
    display:none; position:fixed; inset:0; z-index:1100; background:rgba(15,20,10,.65);
    align-items:center; justify-content:center; padding:16px;
}
.ps-imgeditor-backdrop.open{ display:flex; }
.ps-imgeditor{
    width:100%; max-width:640px; max-height:90vh; background:var(--ps-white); border-radius:14px;
    display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ps-imgeditor-hd{
    display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
    background:var(--ps-text-dark); color:#fff; font-weight:800; font-size:14px; flex-shrink:0;
}
.ps-imgeditor-close{ background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; opacity:.8; }
.ps-imgeditor-close:hover{ opacity:1; }
.ps-imgeditor-tabs{ display:flex; border-bottom:1px solid var(--ps-border); flex-shrink:0; }
.ps-imgeditor-tab{
    flex:1; padding:11px; border:none; background:none; font-size:12.5px; font-weight:700;
    color:var(--ps-text-light); cursor:pointer; border-bottom:2.5px solid transparent; display:flex;
    align-items:center; justify-content:center; gap:6px;
}
.ps-imgeditor-tab.active{ color:var(--ps-green-dark); border-bottom-color:var(--ps-green); }
.ps-imgeditor-body{ padding:16px 18px; overflow-y:auto; flex:1; }
.ps-imgeditor-stage{
    position:relative; width:100%; height:320px; background:#efefef; border-radius:8px;
    display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:16px;
}
.ps-imgeditor-crop-wrap{ width:100%; height:100%; }
.ps-imgeditor-crop-wrap img{ display:block; max-width:100%; }
.ps-imgeditor-stage canvas{ max-width:100%; max-height:100%; }
.ps-imgeditor-loading{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:9px;
    background:rgba(255,255,255,.85); font-size:12.5px; color:var(--ps-text-mid); font-weight:600;
}
.ps-imgeditor-loading.show{ display:flex; }
.ps-imgeditor-ratios{ display:flex; gap:8px; flex-wrap:wrap; }
.ps-imgeditor-ratios .ps-btn.active{ background:var(--ps-green); color:#fff; }
.ps-imgeditor-slider{ margin-bottom:14px; }
.ps-imgeditor-slider label{
    display:flex; justify-content:space-between; font-size:12px; font-weight:700;
    color:var(--ps-text-mid); margin-bottom:6px;
}
.ps-imgeditor-slider input[type="range"]{ width:100%; }
.ps-imgeditor-ft{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--ps-border); flex-shrink:0; }

/* ═══════════════ BUTTONS ═══════════════ */
.ps-btn{ border:none; border-radius:50px; padding:11px 24px; font-size:13.5px; font-weight:800;
    cursor:pointer; transition:var(--ps-transition); font-family:inherit; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.ps-btn-primary{ background:var(--ps-green); color:#fff; box-shadow:0 4px 14px rgba(106,176,76,.30); }
.ps-btn-primary:hover{ background:var(--ps-green-dark); }
.ps-btn-ghost{ background:var(--ps-offwhite); color:var(--ps-text-mid); }
.ps-btn-ghost:hover{ background:var(--ps-border); }
.ps-btn-danger{ background:var(--ps-danger); color:#fff; }
.ps-btn-danger:hover{ background:#c53d3d; }
.ps-btn-sm{ padding:7px 16px; font-size:12px; }
.ps-btn-block{ width:100%; }
.ps-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ═══════════════ ALERTS ═══════════════ */
.ps-alert{ border-radius:var(--ps-radius-sm); padding:12px 16px; margin-bottom:18px; font-size:13px; font-weight:600; }
.ps-alert-error{ background:var(--ps-danger-light); border:1px solid #f3c1c1; color:#a12727; }
.ps-alert-info{ background:var(--ps-info-light); border:1px solid #b8d8f7; color:#215a8f; }
.ps-alert-success{ background:var(--ps-green-light); border:1px solid #bfe3ac; color:#2c5c1a; }

/* ═══════════════ SHELL SPA ═══════════════ */
.ps-body{ margin:0; background:var(--ps-offwhite); color:var(--ps-text-dark); min-height:100vh; }

.ps-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:var(--ps-sidebar-w); background:var(--ps-text-dark);
    display:flex; flex-direction:column; z-index:40; overflow-y:auto;
}
.ps-sidebar-brand{ display:flex; align-items:center; gap:10px; padding:20px 22px; color:#fff; font-weight:800; font-size:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.ps-sidebar-brand img{ height:28px; }
.ps-sidebar-brand small{ display:block; font-size:10px; font-weight:600; color:var(--ps-green); letter-spacing:.5px; text-transform:uppercase; }
.ps-sidebar-user{ display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.08); }
.ps-sidebar-user-avatar{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--ps-green); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.ps-sidebar-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.ps-sidebar-user-name{ color:#fff; font-size:13px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ps-nav{ display:flex; flex-direction:column; padding:14px 12px; gap:2px; flex:1; }
.ps-nav-link{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--ps-radius-sm);
    color:rgba(255,255,255,.65); text-decoration:none; font-size:13.5px; font-weight:600; transition:var(--ps-transition); }
.ps-nav-link .ps-icon{ width:16px; height:16px; }
.ps-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.ps-nav-link.active{ background:var(--ps-green); color:#fff; box-shadow:0 4px 14px rgba(106,176,76,.35); }
.ps-nav-logout{ margin-top:auto; color:#e08a8a; }
.ps-nav-logout:hover{ background:rgba(224,82,82,.12); color:#f3a4a4; }

.ps-main{ margin-left:var(--ps-sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.ps-topbar{ height:var(--ps-topbar-h); background:var(--ps-white); border-bottom:1px solid var(--ps-border); display:flex; align-items:center; padding:0 28px; position:sticky; top:0; z-index:20; }
.ps-topbar-title{ font-size:18px; font-weight:800; }
.ps-content{ padding:26px 28px 60px; flex:1; }

.ps-burger{ display:none; position:fixed; top:14px; left:14px; z-index:50; width:40px; height:40px; border-radius:10px; border:none; background:var(--ps-text-dark); flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.ps-burger span{ width:18px; height:2px; background:#fff; border-radius:2px; }
.ps-sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35; }

@media (max-width: 900px){
    .ps-sidebar{ transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--ps-shadow-lg); }
    .ps-sidebar.open{ transform:translateX(0); }
    .ps-main{ margin-left:0; }
    .ps-burger{ display:flex; }
    .ps-topbar{ padding-left:66px; }
    .ps-sidebar-overlay.open{ display:block; }
}

/* ═══════════════ LOADER ═══════════════ */
.ps-spinner{ width:16px; height:16px; border:2.5px solid var(--ps-border); border-top-color:var(--ps-green); border-radius:50%; display:inline-block; animation:psSpin .7s linear infinite; }
.ps-spinner-lg{ width:34px; height:34px; border-width:4px; }
@keyframes psSpin{ to{ transform:rotate(360deg); } }
.ps-loader-inline{ display:flex; align-items:center; gap:10px; justify-content:center; padding:60px 20px; color:var(--ps-text-light); font-size:13.5px; font-weight:600; }

/* ═══════════════ CARDS / STATS ═══════════════ */
.ps-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; }
@media (max-width:1100px){ .ps-stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ps-stats-grid{ grid-template-columns:1fr; } }
.ps-stat-card{ background:var(--ps-white); border:1px solid var(--ps-border); border-radius:var(--ps-radius); padding:20px; box-shadow:var(--ps-shadow-sm); display:flex; align-items:center; gap:14px; }
.ps-stat-icon{ width:46px; height:46px; border-radius:12px; background:var(--ps-green-light); color:var(--ps-green-dark); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.ps-stat-icon.warn{ background:var(--ps-warning-light); color:#a3761e; }
.ps-stat-icon.info{ background:var(--ps-info-light); color:#215a8f; }
.ps-stat-num{ font-size:22px; font-weight:900; line-height:1.1; }
.ps-stat-lbl{ font-size:12px; color:var(--ps-text-light); font-weight:600; margin-top:2px; }

.ps-card{ background:var(--ps-white); border:1px solid var(--ps-border); border-radius:var(--ps-radius); box-shadow:var(--ps-shadow-sm); }
.ps-card-head{ padding:18px 22px; border-bottom:1px solid var(--ps-border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ps-card-head h3{ margin:0; font-size:15px; font-weight:800; }
.ps-card-body{ padding:22px; }

/* ═══════════════ FILTERS ═══════════════ */
.ps-filters{ display:flex; gap:10px; flex-wrap:wrap; padding:18px 22px; border-bottom:1px solid var(--ps-border); }
.ps-filters input, .ps-filters select{ border:1.5px solid var(--ps-border); border-radius:50px; padding:9px 16px; font-size:13px; font-family:inherit; background:var(--ps-offwhite); }
.ps-filters input{ flex:1 1 200px; }
.ps-filters input:focus, .ps-filters select:focus{ outline:none; border-color:var(--ps-green); background:#fff; }

/* ═══════════════ TABLES ═══════════════ */
.ps-table-wrap{ overflow-x:auto; }
.ps-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.ps-table th{ text-align:left; padding:12px 22px; color:var(--ps-text-light); font-size:11px; text-transform:uppercase; letter-spacing:.4px; font-weight:800; border-bottom:1px solid var(--ps-border); white-space:nowrap; }
.ps-table td{ padding:14px 22px; border-bottom:1px solid var(--ps-border); vertical-align:middle; }
.ps-table tbody tr{ transition:var(--ps-transition); }
.ps-table tbody tr.ps-row-clickable{ cursor:pointer; }
.ps-table tbody tr.ps-row-clickable:hover{ background:var(--ps-offwhite); }
.ps-table-empty{ text-align:center; padding:50px 20px; color:var(--ps-text-light); font-size:13.5px; }
.ps-thumb{ width:42px; height:42px; border-radius:8px; object-fit:cover; border:1px solid var(--ps-border); background:var(--ps-offwhite); flex-shrink:0; }
.ps-thumb-ph{ width:42px; height:42px; border-radius:8px; background:var(--ps-green-light); color:var(--ps-green-dark); display:flex; align-items:center; justify-content:center; font-size:16px; }

/* ═══════════════ CATALOGUE ARTICLES (cards paginées) ═══════════════ */
.ps-catalog-wrap{ padding:22px; }
.ps-catalog-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; }
@media (max-width:1300px){ .ps-catalog-grid{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:900px){ .ps-catalog-grid{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:600px){ .ps-catalog-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:420px){ .ps-catalog-grid{ grid-template-columns:repeat(3,1fr); } }
.ps-catalog-card{ background:var(--ps-white); border:1px solid var(--ps-border); border-radius:var(--ps-radius-sm); overflow:hidden; cursor:pointer; transition:var(--ps-transition); }
.ps-catalog-card:hover{ box-shadow:var(--ps-shadow-md); transform:translateY(-2px); border-color:#d3e0c9; }
.ps-catalog-thumb{ position:relative; aspect-ratio:1/1; background:var(--ps-offwhite); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ps-catalog-thumb img{ width:100%; height:100%; object-fit:cover; }
.ps-thumb-ph-lg{ width:100%; height:100%; border-radius:0; font-size:16px; }
.ps-catalog-badge{ position:absolute; top:5px; right:5px; font-size:9px; padding:2px 7px; }
.ps-catalog-body{ padding:7px 8px 9px; }
.ps-catalog-name{ font-size:10.5px; font-weight:800; line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:27px; }
.ps-catalog-cat{ font-size:9px; color:var(--ps-text-light); font-weight:600; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-catalog-foot{ display:flex; align-items:center; justify-content:space-between; gap:4px; flex-wrap:wrap; }
.ps-catalog-price{ font-size:11px; font-weight:900; color:var(--ps-green-dark); }

.ps-catalog-actions{ margin-top:7px; padding-top:7px; border-top:1px solid var(--ps-border); }
.ps-catalog-toggle-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:10px; font-weight:700; padding:6px 4px; border-radius:6px; border:1px solid var(--ps-border);
    background:var(--ps-offwhite); color:var(--ps-text-mid); cursor:pointer; transition:var(--ps-transition);
}
.ps-catalog-toggle-btn:hover{ background:var(--ps-border); }
.ps-catalog-toggle-btn.is-online{ color:var(--ps-danger); }
.ps-catalog-toggle-btn.is-online:hover{ background:var(--ps-danger-light); border-color:var(--ps-danger); }
.ps-catalog-toggle-btn.is-offline{ color:var(--ps-green-dark); }
.ps-catalog-toggle-btn.is-offline:hover{ background:var(--ps-green-light); border-color:var(--ps-green); }
.ps-catalog-pending-hint{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:9.5px; color:var(--ps-text-light); font-style:italic; padding:6px 4px; }

.ps-pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.ps-page-btn{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ps-border); background:var(--ps-white); color:var(--ps-text-mid); cursor:pointer; transition:var(--ps-transition); }
.ps-page-btn:hover:not([disabled]){ background:var(--ps-green-light); border-color:var(--ps-green); color:var(--ps-green-dark); }
.ps-page-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.ps-page-info{ font-size:12.5px; font-weight:700; color:var(--ps-text-mid); }
.ps-page-total{ font-weight:500; color:var(--ps-text-light); }

/* ═══════════════ SAISIE VOCALE ═══════════════ */
.ps-mic-btn{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border:none; border-radius:50%; background:var(--ps-offwhite); color:var(--ps-text-light);
    cursor:pointer; font-size:10.5px; vertical-align:middle; margin-left:2px; transition:var(--ps-transition);
    padding:0;
}
.ps-mic-btn:hover{ background:var(--ps-green-light); color:var(--ps-green-dark); }
.ps-mic-btn.listening{ background:var(--ps-danger); color:#fff; animation:psMicPulse 1.1s ease-in-out infinite; }
@keyframes psMicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,82,82,.45); } 50%{ box-shadow:0 0 0 6px rgba(224,82,82,0); } }
.ps-field.voice-filled input, .ps-field.voice-filled select, .ps-field.voice-filled textarea{ border-color:var(--ps-green); }

.ps-scan-field-btn{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border:none; border-radius:50%; background:var(--ps-offwhite); color:var(--ps-text-light);
    cursor:pointer; font-size:10.5px; vertical-align:middle; margin-left:2px; transition:var(--ps-transition);
    padding:0;
}
.ps-scan-field-btn:hover{ background:var(--ps-green-light); color:var(--ps-green-dark); }
.ps-scan-field-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ═══════════════ NOUVEL ARTICLE — scan OCR (remplissage automatique) ═══════════════ */
.ps-scan-bar{ margin-bottom:22px; }
.ps-scan-bar .ps-btn{ border:1.5px dashed var(--ps-green); background:var(--ps-green-light); color:var(--ps-green-dark); }
.ps-scan-bar .ps-btn:hover{ background:var(--ps-green); color:#fff; }
.ps-scan-bar .ps-btn[disabled]{ border-style:solid; }
.ps-scan-status{
    display:flex; align-items:center; gap:9px; margin-top:9px; padding:9px 14px; border-radius:var(--ps-radius-sm);
    background:var(--ps-offwhite); border:1px solid var(--ps-border); font-size:12.5px; color:var(--ps-text-mid);
}
.ps-scan-status .ps-scan-spinner{
    width:14px; height:14px; border-radius:50%; border:2px solid var(--ps-border); border-top-color:var(--ps-green);
    animation:psScanSpin .7s linear infinite; flex-shrink:0;
}
@keyframes psScanSpin{ to{ transform:rotate(360deg); } }

/* ═══════════════ NOUVEL ARTICLE — formulaire par étapes ═══════════════ */
.ps-wiz-steps{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; position:relative; }
.ps-wiz-steps::before{ content:''; position:absolute; top:15px; left:0; right:0; height:2px; background:var(--ps-border); z-index:0; }
.ps-wiz-bar{ position:absolute; top:15px; left:0; height:2px; background:var(--ps-green); z-index:1; width:0%; transition:width .3s ease; }
.ps-wiz-item{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; }
.ps-wiz-num{ width:32px; height:32px; border-radius:50%; background:var(--ps-white); border:2px solid var(--ps-border); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--ps-text-light); transition:var(--ps-transition); }
.ps-wiz-item.active .ps-wiz-num{ border-color:var(--ps-green); color:var(--ps-green-dark); background:var(--ps-green-light); }
.ps-wiz-item.done .ps-wiz-num{ border-color:var(--ps-green); background:var(--ps-green); color:#fff; }
.ps-wiz-lbl{ font-size:11px; font-weight:700; color:var(--ps-text-light); text-align:center; }
.ps-wiz-item.active .ps-wiz-lbl, .ps-wiz-item.done .ps-wiz-lbl{ color:var(--ps-text-dark); }
.ps-wiz-step{ display:none; animation:psWizFade .2s ease; }
.ps-wiz-step.active{ display:block; }
@keyframes psWizFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){ .ps-wiz-lbl{ display:none; } }

.ps-recap{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px; }
.ps-recap-media{
    position:relative; flex:0 0 200px; width:200px; height:200px;
    border-radius:var(--ps-radius-sm); border:1px solid var(--ps-border); background:var(--ps-offwhite);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ps-recap-img{ display:none; width:100%; height:100%; object-fit:cover; }
.ps-recap-media-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ps-text-light); font-size:12px; }
.ps-recap-media-empty .ps-icon{ color:var(--ps-border); }
.ps-recap-media-badge{
    position:absolute; bottom:8px; right:8px; background:rgba(26,35,16,.72); color:#fff;
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
}
.ps-recap-info{ flex:1 1 260px; display:flex; flex-direction:column; gap:16px; }
.ps-recap-item-row{ display:flex; gap:18px; }
.ps-recap-item-row .ps-recap-item{ flex:1; }
.ps-recap-item{ display:flex; flex-direction:column; gap:5px; }
.ps-recap-lbl{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ps-text-light); }
.ps-recap-lbl .ps-icon{ color:var(--ps-green); }
.ps-recap-val{ font-size:14px; color:var(--ps-text-dark); word-break:break-word; }
.ps-recap-val-lg{ font-size:16.5px; font-weight:700; }
.ps-recap-price{ margin-top:auto; padding-top:12px; border-top:1px dashed var(--ps-border); }
.ps-recap-val-price{ font-size:21px; font-weight:800; color:var(--ps-green-dark); }
.ps-recap-text{ margin-bottom:16px; padding:14px 16px; border:1px solid var(--ps-border); border-radius:var(--ps-radius-sm); background:var(--ps-offwhite); }
.ps-recap-text h5{ display:flex; align-items:center; gap:6px; margin:0 0 7px; font-size:11.5px; font-weight:700; color:var(--ps-text-light); text-transform:uppercase; letter-spacing:.4px; }
.ps-recap-text h5 .ps-icon{ color:var(--ps-green); }
.ps-recap-text p{ margin:0; font-size:13px; line-height:1.5; color:var(--ps-text-dark); white-space:pre-wrap; word-break:break-word; }
@media (max-width:600px){ .ps-recap-media{ flex:0 0 100%; width:100%; } }

/* ═══════════════ NOUVEL ARTICLE — navigation Rayons/Catégories/Sous-catégories ═══════════════ */
.ps-nav-bc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--ps-border); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ps-text-light); }
.ps-nav-crumb{ color:var(--ps-text-light); text-decoration:none; }
.ps-nav-crumb:hover{ color:var(--ps-green-dark); text-decoration:underline; }
.ps-nav-crumb-cur{ color:var(--ps-text-dark); }
.ps-nav-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:1100px){ .ps-nav-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px){ .ps-nav-grid{ grid-template-columns:repeat(2,1fr); } }
.ps-nav-card{ display:block; background:var(--ps-offwhite); border:1px solid var(--ps-border); border-radius:var(--ps-radius); padding:18px 14px; text-decoration:none; color:inherit; transition:var(--ps-transition); text-align:center; }
.ps-nav-card:hover{ background:var(--ps-green-light); border-color:var(--ps-green); text-decoration:none; transform:translateY(-2px); }
.ps-nav-card-ico{ font-size:26px; margin-bottom:8px; }
.ps-nav-card-label{ font-size:12px; font-weight:800; margin-bottom:8px; min-height:30px; }
.ps-nav-card-foot{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ps-text-light); font-weight:600; }

.ps-choix-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:900px){ .ps-choix-grid{ grid-template-columns:repeat(2,1fr); } }
.ps-choix-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 14px; border-radius:var(--ps-radius); border:1.5px solid var(--ps-border); background:var(--ps-white); text-decoration:none; color:var(--ps-text-mid); font-size:12.5px; font-weight:700; text-align:center; transition:var(--ps-transition); }
.ps-choix-card i{ font-size:24px; }
.ps-choix-card.active{ border-color:var(--ps-green); color:var(--ps-green-dark); cursor:pointer; }
.ps-choix-card.active:hover{ background:var(--ps-green-light); text-decoration:none; }
.ps-choix-card.disabled{ opacity:.45; cursor:not-allowed; }

/* ═══════════════ BADGES ═══════════════ */
.ps-badge{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:50px; font-size:11px; font-weight:800; white-space:nowrap; }
.ps-badge-green{ background:var(--ps-green-light); color:#2c5c1a; }
.ps-badge-warn{ background:var(--ps-warning-light); color:#a3761e; }
.ps-badge-danger{ background:var(--ps-danger-light); color:#a12727; }
.ps-badge-info{ background:var(--ps-info-light); color:#215a8f; }
.ps-badge-grey{ background:#eef1ea; color:#697563; }

/* ═══════════════ TABS ═══════════════ */
.ps-tabs{ display:flex; gap:4px; padding:14px 22px 0; flex-wrap:wrap; }
.ps-tab{ border:none; background:none; padding:10px 16px; font-size:13px; font-weight:700; color:var(--ps-text-light); cursor:pointer; border-bottom:3px solid transparent; transition:var(--ps-transition); font-family:inherit; }
.ps-tab:hover{ color:var(--ps-text-dark); }
.ps-tab.active{ color:var(--ps-green-dark); border-bottom-color:var(--ps-green); }

/* ═══════════════ MODAL ═══════════════ */
.ps-modal-backdrop{ position:fixed; inset:0; background:rgba(15,20,10,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.ps-modal-backdrop.open{ display:flex; }
.ps-modal{ background:#fff; border-radius:var(--ps-radius); max-width:640px; width:100%; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--ps-shadow-lg); animation:psModalIn .2s ease; }
.ps-modal-sm{ max-width:400px; }
@keyframes psModalIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.ps-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--ps-border); }
.ps-modal-title{ font-size:16px; font-weight:800; }
.ps-modal-close{ border:none; background:var(--ps-offwhite); width:32px; height:32px; border-radius:50%; font-size:18px; line-height:1; cursor:pointer; color:var(--ps-text-mid); }
.ps-modal-close:hover{ background:var(--ps-border); }
.ps-modal-body{ padding:22px; overflow-y:auto; }

.ps-confirm-body{ text-align:center; padding:30px 26px; }
.ps-confirm-icon{ width:52px; height:52px; border-radius:50%; background:var(--ps-warning-light); color:#a3761e; font-weight:900; font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.ps-confirm-text{ font-size:14px; color:var(--ps-text-mid); margin-bottom:22px; line-height:1.5; }
.ps-confirm-actions{ display:flex; gap:10px; justify-content:center; }

/* ═══════════════ TOAST ═══════════════ */
.ps-toast-wrap{ position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.ps-toast{ background:#fff; border-radius:var(--ps-radius-sm); box-shadow:var(--ps-shadow-lg); padding:14px 16px; display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:600; border-left:4px solid var(--ps-green); animation:psToastIn .25s ease; }
.ps-toast-success{ border-left-color:var(--ps-green); }
.ps-toast-error{ border-left-color:var(--ps-danger); }
.ps-toast-info{ border-left-color:var(--ps-info); }
@keyframes psToastIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }
.ps-toast.ps-toast-out{ animation:psToastOut .2s ease forwards; }
@keyframes psToastOut{ to{ opacity:0; transform:translateX(20px); } }

/* ═══════════════ DÉTAIL COMMANDE / ARTICLE ═══════════════ */
.ps-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px; }
@media (max-width:560px){ .ps-detail-grid{ grid-template-columns:1fr; } }
.ps-detail-block h4{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ps-text-light); font-weight:800; margin:0 0 8px; }
.ps-detail-row{ font-size:13.5px; margin-bottom:4px; }
.ps-detail-row span{ color:var(--ps-text-light); }
.ps-gallery{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-top:10px; }
.ps-gallery img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--ps-border); flex-shrink:0; }
.ps-lines-table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.ps-lines-table th{ text-align:left; padding:8px 6px; color:var(--ps-text-light); font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--ps-border); }
.ps-lines-table td{ padding:8px 6px; border-bottom:1px solid var(--ps-border); }
.ps-line-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ps-history-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:12.5px; border-bottom:1px dashed var(--ps-border); }
.ps-history-item:last-child{ border-bottom:none; }
.ps-history-dot{ width:8px; height:8px; border-radius:50%; background:var(--ps-green); margin-top:4px; flex-shrink:0; }

/* ═══════════════ SETTINGS ═══════════════ */
.ps-settings-section{ margin-bottom:30px; }
.ps-settings-section h3{ font-size:14px; font-weight:800; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--ps-border); }
.ps-upload-zone{ display:flex; align-items:center; gap:14px; }
.ps-upload-preview{ width:64px; height:64px; border-radius:12px; background:var(--ps-offwhite); border:1.5px dashed var(--ps-border); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ps-text-light); font-size:20px; flex-shrink:0; }
.ps-upload-preview img{ width:100%; height:100%; object-fit:cover; }