/* ==========================================================================
   OISHI SUSHI & WOK — Panneau gérant (admin.html)
   Réutilise les tokens de styles.css (palette, polices, rayons…).
   ========================================================================== */
.admin{min-height:100vh}
.admin__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--charcoal-line);position:sticky;top:0;background:rgba(13,11,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:5}
.admin__brand{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.25rem;color:var(--washi)}
.admin__brand .u-jp{font-style:normal;font-size:.85rem;color:var(--kin)}
.admin__top .tag-ghost{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);border:1px solid var(--charcoal-line);padding:.3rem .6rem;border-radius:var(--radius-pill)}
.admin__top a{font-size:var(--fs-ui);color:var(--kin)}

.admin__wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem)}
.admin__intro{grid-column:1/-1;max-width:60ch}
.admin__intro h1{font-family:var(--font-display);font-size:clamp(1.8rem,1.2rem+2vw,2.8rem);color:var(--washi)}
.admin__intro p{color:var(--washi-dim);margin-top:.5rem}
.admin__intro .eyebrow{margin-bottom:.6rem}

/* Formulaire */
.adm-form{display:flex;flex-direction:column;gap:1.25rem}
.adm-field label{display:block;font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--washi-dim);margin-bottom:.4rem;font-weight:500}
.adm-field input[type=text],.adm-field textarea,.adm-field select{
  width:100%;background:var(--sumi-raise-2);border:1px solid var(--charcoal-line);border-radius:var(--radius-sm);
  padding:.75rem .9rem;color:var(--washi);font-size:1rem;caret-color:var(--shu);transition:border-color var(--dur-base) var(--ease-sumi),box-shadow var(--dur-base) var(--ease-sumi)
}
.adm-field textarea{min-height:90px;resize:vertical;line-height:1.5}
.adm-field input:focus,.adm-field textarea:focus,.adm-field select:focus{border-color:var(--kin);box-shadow:var(--shadow-focus-gold);outline:none}
.adm-field .hint{font-size:var(--fs-caption);color:var(--stone);margin-top:.35rem}

/* Sélecteur d'image */
.img-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.img-tabs__row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.img-url{display:flex;gap:.5rem}
.img-url input{flex:1}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;margin-top:.6rem}
.photo-pick{padding:0;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;background:var(--sumi-raise-2);cursor:pointer;transition:border-color var(--dur-base) var(--ease-sumi)}
.photo-pick img{width:100%;height:100%;object-fit:cover;display:block}
.photo-pick:hover{border-color:rgba(201,166,92,.5)}
.photo-pick.is-active{border-color:var(--kin);box-shadow:var(--shadow-ember)}
.file-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.file-btn input{display:none}

.adm-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}

/* Aperçu */
.adm-preview{position:sticky;top:90px;align-self:start}
.adm-preview h2{font-family:var(--font-sans);font-size:var(--fs-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--kin);margin-bottom:1rem}
.pv-card{border:1px solid var(--charcoal-line);border-radius:var(--radius-lg);background:var(--sumi-raise);box-shadow:var(--shadow-raise);padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden}
.pv-card::before{content:"";position:absolute;inset:0;background:var(--grad-ember-pool);opacity:.5;pointer-events:none}
.pv-plate{position:relative;width:min(70%,260px);margin:0 auto 1.25rem;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid rgba(201,166,92,.55);box-shadow:var(--shadow-ember);z-index:1}
.pv-plate img{width:100%;height:100%;object-fit:cover}
.pv-card > *{position:relative;z-index:1}
#pv-name{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.6rem;color:var(--kin-bright)}
#pv-badge{display:inline-block;margin-top:.6rem;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sumi);background:var(--grad-gold-sheen);padding:.3rem .8rem;border-radius:var(--radius-pill)}
#pv-desc{color:var(--washi-dim);margin-top:.8rem;font-size:.95rem;line-height:1.6}
#pv-notes{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1rem}
#pv-add{display:inline-block;margin-top:1.25rem;background:var(--grad-shu-btn);color:var(--washi);font-weight:500;padding:.7rem 1.5rem;border-radius:var(--radius-pill);font-size:.95rem}

#toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(18px);opacity:0;background:var(--sumi-raise);border:1px solid rgba(201,166,92,.4);border-radius:var(--radius-pill);padding:.75rem 1.3rem;color:var(--washi);box-shadow:var(--shadow-raise);transition:opacity var(--dur-base) var(--ease-sumi),transform var(--dur-base) var(--ease-sumi);z-index:50;max-width:92vw;text-align:center}
#toast.is-in{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:820px){
  .admin__wrap{grid-template-columns:1fr}
  .adm-preview{position:static}
}