/* ---------- BACK OFFICE (admin) — dashboard : sidebar (recherche + index
   alphabétique) + liste principale groupée par lettre. Empilé sur mobile,
   colonne fixe à gauche sur écran large (voir media query en bas). ---------- */
.admin-content{flex:1; overflow:hidden; display:flex; flex-direction:column;}
.admin-sidebar{padding:16px 14px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--action);}
.admin-main{flex:1; overflow-y:auto; padding:4px 18px 16px; background:var(--bg);}
/* Vue deux colonnes (Produits) : la zone doit remplir la hauteur pour que chaque
   colonne défile de son côté, au lieu de faire défiler toute la page. */
.admin-main.split-view{display:flex; flex-direction:column; overflow:hidden;}
.admin-tabs{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;}
.admin-tab-btn{width:100%; text-align:left; position:relative; display:flex; align-items:center; gap:10px; border:none; background:none; color:rgba(255,255,255,.6); border-radius:12px; padding:11px 13px; font-size:13px; font-weight:600; font-family:'Inter',sans-serif; transition:background .15s, color .15s;}
.admin-tab-btn svg{width:17px; height:17px; flex-shrink:0; opacity:.75;}
.admin-tab-btn:hover{background:rgba(255,255,255,.08); color:#fff;}
.admin-tab-btn.active{background:rgba(255,255,255,.16); color:#fff;}
.admin-tab-btn.active svg{opacity:1;}
.admin-tab-badge{position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:#D6362C; color:#fff; font-size:9.5px; font-weight:700; display:none; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;}
.admin-search{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:9px 12px; font-size:13px; color:var(--ink); font-family:'Inter',sans-serif; margin-bottom:10px;}
.admin-search:focus{outline:none; border-color:var(--ink-soft);}
#adminMainToolbar{margin-bottom:14px;}
.admin-toolbar-row{display:flex; gap:8px;}
.admin-toolbar-row .admin-search{flex:1; margin-bottom:0;}
.admin-new-btn{flex-shrink:0; border:none; background:var(--action); color:#fff; border-radius:10px; padding:11px 18px; font-size:13px; font-weight:600; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; white-space:nowrap;}
.admin-new-btn:hover{opacity:.9;}
.admin-row-tags{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--accent); margin-top:3px;}
.admin-status-pill{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:999px; background:var(--bg); color:var(--ink-soft);}
.admin-status-pill.status-pending{background:#F3E4C6; color:#8A6416;}
.admin-status-pill.status-approved{background:#DCE8D6; color:#3E5E36;}
.admin-status-pill.status-rejected{background:#F3DAD7; color:#8B4A3F;}
#adminTagsInput{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:9px 12px; font-size:13px; color:var(--ink); font-family:'Inter',sans-serif;}
.admin-submission-banner{background:var(--accent-bg); color:var(--accent); border-radius:10px; padding:9px 12px; font-size:11.5px; margin:0 0 4px;}
.sheet-actions .sheet-confirm.admin-approve-btn{background:#4F6B4A;}
.sheet-actions .sheet-cancel.admin-reject-btn{color:#D6362C; border-color:#D6362C;}
.admin-alpha-nav{display:flex; flex-wrap:wrap; gap:2px; margin-top:8px; background:var(--bg); border-radius:10px; padding:4px;}
.admin-alpha-btn{flex:1 1 0; min-width:20px; height:26px; border-radius:6px; border:none; background:none; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;}
.admin-alpha-btn:disabled{color:var(--ink-soft); opacity:.3;}
.admin-alpha-btn:not(:disabled):hover{background:var(--action); color:#fff; cursor:pointer;}
.admin-letter-heading{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; padding:14px 4px 6px; position:sticky; top:0; background:var(--bg); z-index:2; box-shadow:0 6px 6px -6px var(--bg);}
.admin-letter-heading:first-child{padding-top:4px;}
.admin-sidebar-brand{display:none;}
@media (min-width:900px){
  /* Le back office est un outil de travail, pas un écran de téléphone : il prend
     toute la largeur (les .notif-page sont plafonnées à 430px par défaut). */
  #adminPage{max-width:none; width:100%; left:0; transform:none;}
  #adminPage > .notif-header{display:none;}
  .admin-content{flex-direction:row;}
  .admin-sidebar{width:240px; flex-shrink:0; border-bottom:none; border-right:1px solid var(--border); padding:20px 16px; overflow-y:auto;}
  .admin-main{padding:24px 32px;}
  .admin-row{padding:14px 8px;}
  .admin-sidebar-brand{display:flex; align-items:center; gap:10px; padding:2px 2px 20px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12);}
  .admin-sidebar-back{width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:none; color:#fff; display:flex; align-items:center; justify-content:center;}
  .admin-sidebar-back:hover{background:rgba(255,255,255,.1);}
  .admin-sidebar-back svg{width:13px; height:13px;}
  .admin-sidebar-logo{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .admin-sidebar-logo svg{width:18px; height:18px; color:#fff;}
  .admin-sidebar-brandtext{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
  .admin-sidebar-name{font-size:15px; font-weight:600; font-style:italic; font-family:'Fraunces',serif; color:#fff;}
  .admin-sidebar-tag{font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px;}
}
.admin-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border); cursor:pointer; border-radius:10px; transition:background .15s;}
.admin-row:last-child{border-bottom:none;}
.admin-row:hover{background:var(--accent-bg);}
.admin-row-body{flex:1; min-width:0;}
.admin-row-title{font-size:14px; font-weight:700; color:var(--ink);}
.admin-row-meta{display:flex; align-items:center; gap:6px; margin-top:2px;}
.admin-type-badge{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); background:var(--bg); padding:2px 7px; border-radius:999px;}
.admin-row-desc{font-size:11.5px; color:var(--ink-soft); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.admin-row-count{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); flex-shrink:0;}
.admin-row-delete{width:26px; height:26px; border-radius:50%; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.admin-row-delete:hover{background:var(--bg); color:#D6362C;}
.admin-row-delete svg{width:13px; height:13px;}
.admin-empty{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:20px 4px;}

/* ---------- ONGLET SOUTIEN : colonne des fils + colonne de la discussion ---------- */
#adminSupportSplit{display:none; flex-direction:column; gap:14px; min-height:0;}
.admin-support-threads{flex:0 0 auto; max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.admin-support-threads .admin-row{padding:11px 12px; border-radius:0;}
.admin-support-threads .admin-row.active-thread{background:var(--accent-bg);}
.admin-support-detail{flex:1; min-height:360px; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface);}
.admin-support-detail-title{padding:13px 16px; font-size:13.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--border); flex-shrink:0;}
.admin-support-detail .msg-list{flex:1; min-height:0; overflow-y:auto;}
.admin-support-detail .msg-input-bar{border-top:1px solid var(--border); background:var(--surface);}
@media (min-width:900px){
  #adminSupportSplit{flex-direction:row; height:calc(100vh - 210px);}
  .admin-support-threads{flex:0 0 300px; max-height:none; height:100%;}
  .admin-support-detail{height:100%;}
}

/* ---------- ONGLET MODÈLES : liste à gauche, éditeur à droite ----------
   Même structure que l'onglet Produits : plus de fiche modale par-dessus la
   page, l'édition se fait dans la colonne de droite pendant que la liste reste
   visible à gauche. */
#adminCatalogSplit{display:none; flex-direction:column; gap:14px; height:100%; min-height:0;}
.admin-templates-list{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden;}
.admin-templates-list #adminMainToolbar{margin-bottom:0; padding:10px; border-bottom:1px solid var(--border); flex-shrink:0;}
.admin-templates-list #adminList{overflow-y:auto; min-height:0; padding:4px 10px 10px;}
.admin-templates-list .admin-row{padding:10px 8px;}
.admin-templates-list .admin-letter-heading{background:var(--surface); box-shadow:0 6px 6px -6px var(--surface); padding-top:10px;}
.admin-row.active-row{background:var(--accent-bg);}
.admin-template-detail{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow-y:auto;}
.admin-template-form{display:flex; flex-direction:column; gap:14px; padding:18px;}
.admin-template-fieldgrid{display:grid; grid-template-columns:1fr; gap:12px; align-items:start;}
.admin-template-fieldgrid .sheet-field{margin:0;}
.admin-template-fullrow{grid-column:1 / -1;}
.admin-template-actions{display:flex; gap:8px; flex-wrap:wrap;}
.admin-template-actions button{flex:1 1 auto; padding:11px 10px;}
@media (min-width:900px){
  #adminCatalogSplit{flex-direction:row; gap:18px;}
  .admin-templates-list{width:300px; flex-shrink:0;}
  .admin-template-detail{flex:1; min-width:0;}
}
/* Au-delà, la fiche a assez de place : on rend la liste plus lisible et on
   repasse les champs sur deux colonnes. */
@media (min-width:1200px){
  .admin-templates-list, .admin-products-list{width:380px;}
  .admin-template-fieldgrid, .admin-product-fieldgrid{grid-template-columns:1fr 1fr;}
}
/* Les tâches gardent un ordre logique (étapes) — toujours à la verticale, une
   à la suite de l'autre, quelle que soit la taille de l'écran. C'est le
   panneau de droite qui défile, pas la liste elle-même. */
.admin-task-list{padding-right:2px;}
.admin-template-form .sheet-field textarea{
  width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:10px 12px;
  font-size:13.5px; color:var(--ink); font-family:'Inter',sans-serif; resize:vertical;
}
#adminTitleInput{width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:11px 13px; font-size:15.5px; font-weight:700; color:var(--ink); font-family:'Inter',sans-serif;}
#adminTitleInput:focus{outline:none; border-color:var(--ink-soft);}

.admin-task-list{display:flex; flex-direction:column; gap:6px; margin-top:4px;}
.admin-task-row{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:8px 8px 8px 10px;}
.admin-task-row-main{display:flex; align-items:center; gap:6px;}
.admin-task-row-main input[type="text"]{flex:1; border:none; background:none; font-size:13px; color:var(--ink); font-family:'Inter',sans-serif; padding:4px 0;}
.admin-task-row-main input[type="text"]:focus{outline:none;}
.admin-task-btn{width:22px; height:22px; border-radius:50%; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.admin-task-btn:hover{background:var(--surface); color:var(--ink);}
.admin-task-btn:disabled{opacity:.3; cursor:default;}
.admin-task-btn:disabled:hover{background:none; color:var(--ink-soft);}
.admin-task-btn svg{width:12px; height:12px;}
.admin-task-remove:hover{color:#D6362C;}
.admin-product-toggle{font-size:10.5px; color:var(--ink-soft); text-decoration:underline; background:none; border:none; padding:4px 0 0; margin-left:2px;}
.admin-product-toggle:hover{color:var(--ink);}
.admin-product-fields{display:flex; flex-direction:column; gap:5px; margin-top:7px; padding-top:7px; border-top:1px dashed var(--border-soft);}
.admin-product-fields input{border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:7px 9px; font-size:12px; color:var(--ink); font-family:'Inter',sans-serif;}
.admin-promo-row{display:flex; gap:5px;}
.admin-promo-row input{flex:1; min-width:0;}
.admin-promo-col{flex:1; min-width:0;}
.admin-promo-label{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:4px;}
.admin-add-task-btn{width:100%; margin-top:8px; border:1.5px dashed var(--border-soft); background:none; border-radius:12px; padding:10px; font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.admin-add-task-btn:hover{color:var(--ink); border-color:var(--ink-soft);}
.admin-barcode-row{display:flex; align-items:center; gap:8px;}
.admin-barcode-row input[type="file"]{flex:1; min-width:0; font-size:11px; color:var(--ink-soft);}
.admin-barcode-preview{width:40px; height:40px; object-fit:contain; border:1px solid var(--border); border-radius:8px; background:#fff; flex-shrink:0;}

/* petite puce produit affichée dans la fiche d'ajout de projet et sur une tâche de projet */
.product-chip{display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:3px 8px 3px 3px; background:var(--bg); border-radius:999px; text-decoration:none; font-size:11px; color:var(--ink-soft); max-width:100%;}
.product-chip:hover{color:var(--ink); background:var(--accent-bg);}
.product-chip img{width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--surface); border:1px solid var(--border);}
.product-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.barcode-chip{margin-left:4px;}
.barcode-chip img{border-radius:4px; object-fit:contain; background:#fff;}

/* onglet Produits (catalogue admin, connectable aux articles de liste) */
/* ---- onglet Produits : liste à gauche, fiche à droite ---- */
#adminProductsSplit{display:none; flex-direction:column; gap:14px; height:100%;}
.admin-products-list{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden;}
.admin-products-toolbar{display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--border); flex-shrink:0;}
.admin-products-toolbar .admin-search{flex:1; min-width:0;}
#adminProductRows{overflow-y:auto; min-height:0;}
.admin-product-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer;}
.admin-product-row:last-child{border-bottom:none;}
.admin-product-row:hover{background:var(--bg);}
.admin-product-row.active{background:var(--accent-bg);}
.admin-product-thumb{width:44px; height:44px; border-radius:9px; background:var(--bg); border:1px solid var(--border); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.admin-product-thumb img{width:100%; height:100%; object-fit:cover;}
.admin-product-row-body{flex:1; min-width:0;}
.admin-product-row-title{font-size:13.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.admin-product-row-brand{font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
.admin-product-row-meta{display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11px; color:var(--ink-soft); flex-wrap:wrap;}
.admin-product-discount{color:#B5473F; font-weight:700;}
.admin-product-detail{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow-y:auto;}
.admin-product-empty{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13px; font-style:italic;}
.admin-product-form{display:flex; flex-direction:column; gap:16px; padding:18px;}
.admin-product-preview{width:100%; height:190px; border-radius:12px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.admin-product-preview img{max-width:100%; max-height:100%; object-fit:contain;}
.admin-product-preview-empty{display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-soft); font-style:italic;}
.admin-product-fieldgrid{display:grid; grid-template-columns:1fr; gap:12px;}
.admin-product-fullrow{grid-column:1 / -1;}
.admin-product-actions{display:flex; gap:8px; flex-wrap:wrap;}
.admin-product-actions button{flex:1 1 auto; padding:11px 10px;}
@media (min-width:900px){
  #adminProductsSplit{flex-direction:row; gap:18px;}
  .admin-products-list{width:300px; flex-shrink:0;}
  .admin-product-detail{flex:1; min-width:0;}
}
.admin-product-picker{position:relative; margin-bottom:8px;}
.admin-list-fields{margin-top:8px;}
.admin-list-fields textarea{width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:10px 12px; font-size:13px; font-family:'Inter',sans-serif; color:var(--ink); resize:vertical;}
.admin-list-fields textarea:focus{outline:none; border-color:var(--ink-soft);}
.product-stars{font-size:11px; color:#B9862B; letter-spacing:1px;}
.product-brand{font-size:11.5px; font-weight:500; color:var(--ink-soft);}
.product-star-picker{display:flex; align-items:center; gap:2px;}
.product-star-btn{border:none; background:none; font-size:22px; line-height:1; color:var(--border-soft); padding:2px;}
.product-star-btn.filled{color:#B9862B;}
.product-star-clear{margin-left:8px; border:none; background:none; font-size:11px; color:var(--ink-soft); text-decoration:underline;}

/* ---------- ONGLET COMPTES : recherche par courriel + bascule admin ---------- */
#adminAccountsPanel{display:none; flex-direction:column; min-height:0; height:100%; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden;}
.admin-accounts-toolbar{padding:10px; border-bottom:1px solid var(--border); flex-shrink:0;}
.admin-accounts-toolbar .admin-search{margin-bottom:0;}
/* Plafonds : deux petits champs au-dessus de la liste, réservés aux super
   admins (l'onglet Comptes ne s'affiche que pour eux). */
.admin-limits-row{display:flex; align-items:flex-end; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap;}
.admin-limit-field{display:flex; flex-direction:column; gap:5px; min-width:0;}
.admin-limit-field label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.admin-limit-field input{width:82px; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:9px 11px; font-size:13.5px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
.admin-limit-field input:focus{outline:none; border-color:var(--ink-soft);}
.admin-limit-save{border:1px solid var(--border-soft); background:none; color:var(--ink); border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; font-family:'Inter',sans-serif; white-space:nowrap;}
.admin-limit-save:hover{border-color:var(--ink); background:var(--bg);}
.admin-account-btn:disabled{opacity:.35; cursor:not-allowed;}
.admin-account-btn:disabled:hover{opacity:.35; background:none; color:var(--ink-soft); border-color:var(--border-soft);}
.admin-accounts-summary{padding:9px 14px; border-bottom:1px solid var(--border); flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
#adminAccountRows{overflow-y:auto; min-height:0;}
.admin-account-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border);}
.admin-account-row:last-child{border-bottom:none;}
.admin-account-body{flex:1; min-width:0;}
.admin-account-name{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--ink);}
.admin-account-badge{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:#fff; background:var(--accent-fill); padding:2px 8px; border-radius:999px;}
.admin-account-badge.super{background:var(--action);}
.admin-account-you{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); background:var(--bg); padding:2px 8px; border-radius:999px;}
.admin-account-email{font-size:12.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.admin-account-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; font-size:11px; color:var(--ink-soft);}
.admin-account-actions{display:flex; flex-direction:column; align-items:stretch; gap:6px; flex-shrink:0;}
.admin-account-btn{flex-shrink:0; border:1px solid var(--action); background:var(--action); color:#fff; border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; font-family:'Inter',sans-serif; white-space:nowrap;}
.admin-account-btn:hover{opacity:.88;}
/* Nommer un super admin est le geste le plus lourd : bouton discret par défaut,
   pour ne pas le confondre avec « Nommer admin ». */
.admin-account-btn.super{background:none; color:var(--ink-soft); border-color:var(--border-soft);}
.admin-account-btn.super:hover{color:var(--accent); border-color:var(--accent); opacity:1;}
.admin-account-btn.is-admin{background:none; color:#D6362C; border-color:#D6362C;}
.admin-account-btn.is-admin:hover{background:#F3DAD7; opacity:1; color:#D6362C; border-color:#D6362C;}
.admin-account-locked{flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}

/* Sur mobile, les vues deux colonnes deviennent maître/détail : on voit la
   liste, et la fiche prend tout l'écran une fois un élément ouvert. */
@media (max-width:899px){
  #adminCatalogSplit:not(.editing) .admin-template-detail,
  #adminProductsSplit:not(.editing) .admin-product-detail{display:none;}
  #adminCatalogSplit.editing .admin-templates-list,
  #adminProductsSplit.editing .admin-products-list{display:none;}
}

/* Flèche de retour de la fiche : utile seulement en maître/détail (mobile). */
.admin-detail-back{display:none; align-items:center; gap:6px; align-self:flex-start; border:none; background:none; padding:2px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
.admin-detail-back svg{width:13px; height:13px;}
.admin-detail-back:hover{color:var(--ink);}
@media (max-width:899px){ .admin-detail-back{display:flex;} }

/* ---------- BACK OFFICE SUR MOBILE ----------
   La colonne noire de gauche n'a pas de sens sur un téléphone : elle devient
   une barre de navigation horizontale, icône au-dessus du libellé, les cinq
   onglets sur une seule ligne. */
@media (max-width:899px){
  .admin-sidebar{padding:8px 6px 6px;}
  .admin-tabs{flex-direction:row; gap:2px; margin-bottom:0;}
  .admin-tab-btn{flex:1 1 0; min-width:0; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:5px; padding:8px 2px 7px; font-size:9.5px; font-weight:600; line-height:1.15; text-align:center; border-radius:10px;}
  .admin-tab-btn svg{width:19px; height:19px;}
  .admin-tab-badge{top:2px; right:auto; left:calc(50% + 4px);}

  /* Recherche pleine largeur, bouton d'ajout sur sa propre ligne. */
  .admin-toolbar-row, .admin-products-toolbar, .admin-accounts-toolbar{flex-wrap:wrap; gap:8px;}
  .admin-toolbar-row .admin-search,
  .admin-products-toolbar .admin-search,
  .admin-accounts-toolbar .admin-search{flex:1 1 100%; width:100%; margin-bottom:0; padding:11px 14px; font-size:14px;}
  .admin-toolbar-row .admin-new-btn,
  .admin-products-toolbar .admin-new-btn{flex:1 1 100%; width:100%;}
  /* L'index alphabétique doublonne la recherche sur un petit écran. */
  .admin-alpha-nav{display:none;}

  /* La fiche ouverte occupe toute la zone, pas une bande sous la liste. */
  #adminCatalogSplit, #adminProductsSplit{gap:0;}
  #adminCatalogSplit.editing .admin-template-detail,
  #adminProductsSplit.editing .admin-product-detail{flex:1; height:100%;}
  .admin-template-form, .admin-product-form{padding:14px;}
  .admin-detail-back{margin:-2px 0 2px; font-size:13px; color:var(--ink);}

  /* Comptes : les boutons passent sous le nom plutôt que de l'écraser. */
  .admin-account-row{flex-direction:column; align-items:stretch; gap:10px;}
  .admin-account-actions{flex-direction:row;}
  .admin-account-actions .admin-account-btn{flex:1 1 0; padding:10px 8px; font-size:12px;}
}

/* ---------- MOBILE : plein écran, sans cartes ----------
   Sur téléphone, les panneaux encadrés gaspillent de la largeur et créent un
   effet de boîte dans une boîte : ils deviennent des surfaces pleine largeur. */
@media (max-width:899px){
  .admin-main{padding:0;}
  .admin-templates-list, .admin-products-list, .admin-template-detail,
  .admin-product-detail, #adminAccountsPanel{border:none; border-radius:0;}
  #adminMainToolbar, .admin-products-toolbar, .admin-accounts-toolbar,
  .admin-limits-row{padding:12px 14px;}
  .admin-templates-list #adminList{padding:0;}
  .admin-templates-list .admin-row, .admin-product-row, .admin-account-row{padding:13px 14px; border-radius:0;}
  .admin-templates-list .admin-letter-heading{padding:12px 14px 6px;}
  .admin-empty{padding:24px 14px;}
  /* Le filtre par mot-clé faisait grandir la barre noire selon l'onglet : on le
     retire du téléphone (la recherche filtre déjà les hashtags). */
}

/* ---------- TABLEAU DE BORD ----------
   .admin-main garde .split-view sur cet onglet (tout sauf le soutien), donc
   overflow:hidden : le panneau porte lui-même son défilement. */
#adminDashboardPanel{display:none; flex-direction:column; flex:1; min-height:0; overflow-y:auto;}
.dash-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 0 16px;}
.dash-title{font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin:0; color:var(--ink);}
.dash-sub{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin:4px 0 0; letter-spacing:.03em;}
.dash-todo{background:var(--accent-bg); color:var(--accent); border-radius:12px; padding:11px 14px; font-size:12.5px; font-weight:600; margin-bottom:18px;}
.dash-section{margin-bottom:22px;}
.dash-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:9px;}
.dash-section-head h3{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0;}
.dash-section-note{font-size:10.5px; color:var(--ink-soft); font-style:italic;}
/* auto-fill : les cartes se répartissent d'elles-mêmes, 4 par ligne sur large
   et 2 sur téléphone, sans media query par section. */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;}
.dash-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px;}
.dash-card-value{font-family:'Fraunces',serif; font-size:26px; font-weight:600; line-height:1.05; color:var(--ink);}
.dash-card-label{font-size:12px; font-weight:600; color:var(--ink); margin-top:5px;}
.dash-card-detail{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-top:3px; line-height:1.35;}
.dash-card.ton-alerte .dash-card-value{color:#D6362C;}
.dash-card.ton-bon .dash-card-value{color:#4F6B4A;}
.dash-periods{display:flex; gap:4px;}
.dash-period-btn{border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:4px 11px; font-family:'IBM Plex Mono',monospace; font-size:10px;}
.dash-period-btn.active{background:var(--action); border-color:var(--action); color:#fff;}
/* « Tableau de bord » déborde d'un onglet de 9.5px sur téléphone : le libellé
   court prend le relais, le long revient dès qu'il y a la place. */
.tab-court{display:none;}
@media (max-width:899px){
  #adminDashboardPanel{padding:14px;}
  .dash-grid{grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:7px;}
  .dash-card-value{font-size:23px;}
  .tab-long{display:none;}
  .tab-court{display:inline;}
}

  /* Le rythme d'une tâche de modèle récurrent. Posé, il se lit d'un coup :
     c'est ce que l'espace recevra sans avoir à le régler lui-même. */
  .admin-rythme-btn.pose{
    border-style:solid; border-color:var(--ink); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;
  }

/* ---------- LES ÉTAPES D'UN MODÈLE PROGRESSIF ----------
   Même geste que dans l'atelier : une petite barre de navigation entre les
   étapes, le nom de celle qu'on écrit, et ce qui la termine. Ce qui suit —
   tâches, indications, images — appartient à l'étape ouverte. */
.admin-etape-bande{
  display:flex; align-items:center; gap:2px; margin-bottom:8px;
  background:#171512; border-radius:10px; padding:4px 6px; width:fit-content;
}
.admin-etape-bande button{
  width:26px; height:26px; padding:0; border:none; background:none; border-radius:7px;
  color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.admin-etape-bande button:hover:not(:disabled){background:rgba(255,255,255,.16); color:#fff;}
.admin-etape-bande button:disabled{opacity:.3;}
.admin-etape-bande svg{width:13px; height:13px;}
.admin-etape-rang{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; padding:0 8px; white-space:nowrap;
}
.admin-etape-nom{
  width:100%; border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:10px 12px; font-size:14px; font-weight:600; font-family:'Fraunces',serif;
  color:var(--ink); margin-bottom:7px;
}
.admin-etape-nom:focus{outline:none; border-color:var(--ink-soft);}
.admin-etape-regle{
  border:1px solid var(--border); background:var(--bg); border-radius:11px;
  padding:11px 12px; margin-bottom:10px;
}
.admin-etape-regle .admin-field-hint{margin:0 0 8px;}
.admin-etape-date{
  width:100%; border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:10px 12px; font-size:13.5px; font-family:'IBM Plex Mono',monospace; color:var(--ink);
}

/* La phrase que le rythme écrit : c'est elle qui partira au catalogue.
   Posée au-dessus du réglage, elle dit en un coup d'oeil ce qu'on vient de
   régler — sans qu'on ait à relire la grille. */
.admin-rythme-dit{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; line-height:1.5;
  color:var(--ink-soft); padding:9px 12px; border:1px dashed var(--border-soft);
  border-radius:10px; background:var(--bg);
}
.admin-rythme-dit.pose{
  color:var(--ink); font-weight:600; border-style:solid; border-color:var(--ink-soft);
  background:var(--surface);
}

/* Le même réglage, à même le formulaire : le back office a la place, une
   fenêtre y était de trop. Chaque geste s'applique en direct — c'est un champ
   comme les autres, et « Enregistrer » reste le seul qui écrit en base. */
.admin-rythme-corps:not(:empty){ margin-top:8px;
  border:1px solid var(--border); background:var(--bg); border-radius:12px;
  padding:12px 13px; margin-top:8px;
}
.admin-rythme-retirer{
  margin-top:7px; border:1px solid rgba(214,54,44,.35); background:none; color:#D6362C;
  border-radius:10px; padding:8px 12px; font-size:12px; font-family:'Inter',sans-serif;
}
.admin-rythme-retirer:hover{border-color:#D6362C;}

/* Le réglage du rythme est un champ de formulaire, pas une page : il garde une
   largeur de lecture même quand le panneau en fait trois fois plus. */
.admin-rythme-corps{max-width:430px;}
.admin-rythme-dit{max-width:430px;}

/* Le tri produits / services, au-dessus des deux listes. Des onglets discrets
   plutôt que des pastilles : c'est un filtre, pas une navigation. */
.admin-genre-nav{display:flex; gap:6px; padding:0 12px 10px;}
.admin-genre{
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:5px 12px; font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.admin-genre:hover{border-color:var(--ink-soft); color:var(--ink);}
.admin-genre.on{background:var(--action); border-color:var(--action); color:#fff;}
/* Deux badges de plus dans la liste : le genre, et la main de la maison.
   L'épingle est volontairement sobre — c'est une note de service, pas une
   décoration dont on serait fier. */
.admin-type-badge.service{background:#EAF1F6; color:#2F5B7C;}
.admin-type-badge.epingle{background:#F3ECDD; color:#7A5E22;}

.admin-feedback { padding:24px; overflow-y:auto; height:100%; box-sizing:border-box; color:var(--ink); }
.feedback-filters { display:flex; gap:12px; flex-wrap:wrap; }
.feedback-filters label { flex:1; min-width:130px; }
.admin-feedback select, .admin-feedback textarea { display:block; width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:10px; background:var(--surface); color:var(--ink); font:inherit; margin:6px 0 14px; }
.feedback-workspace { display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,1.5fr); gap:24px; align-items:start; }
.feedback-list { display:grid; gap:10px; min-width:0; }
.feedback-ticket { text-align:left; display:grid; gap:8px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); min-width:0; }
.feedback-ticket.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.feedback-ticket span { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.feedback-ticket small { color:var(--ink-soft); }
.feedback-detail { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.feedback-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-detail button, #feedbackLoadMore { padding:10px 16px; border:0; border-radius:8px; background:var(--action); color:white; }
@media(max-width:767px) { .admin-feedback { padding:16px; } .feedback-workspace { display:flex; flex-direction:column; } .feedback-list,.feedback-detail { width:100%; box-sizing:border-box; } .feedback-detail { order:-1; } }
@media(max-width:899px) {
  .admin-tabs { overflow-x:auto; }
  .admin-tab-btn { flex:0 0 auto; width:auto; min-width:66px; padding-inline:9px; }
}