/* ==========================================================================
   OISHI SUSHI — Composants applicatifs : modale compte, tiroir panier,
   formulaires, paiement, toasts, menu mobile
   ========================================================================== */

/* ----------------------------------------------------------- MODALE ------- */
.modal{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:1.5rem;visibility:hidden;opacity:0;transition:opacity var(--dur-base) var(--ease-sumi),visibility var(--dur-base)}
.modal.is-open{visibility:visible;opacity:1}
.modal__backdrop{position:absolute;inset:0;background:rgba(8,7,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal__panel{position:relative;width:min(440px,100%);max-height:90vh;max-height:90dvh;overflow:auto;background:var(--sumi-raise);border:1px solid var(--charcoal-line);border-top:1px solid rgba(201,166,92,.5);border-radius:var(--radius-lg);box-shadow:var(--shadow-raise);padding:2.25rem;transform:scale(.96) translateY(10px);transition:transform var(--dur-base) var(--ease-sumi)}
@media (max-width:480px),(max-height:560px){.modal__panel{padding:1.5rem}}
.modal.is-open .modal__panel{transform:none}
.modal__close{position:absolute;top:.9rem;right:.9rem;width:40px;height:40px;border-radius:50%;color:var(--stone);display:grid;place-items:center;transition:color var(--dur-base) var(--ease-sumi),background var(--dur-base) var(--ease-sumi);z-index:2}
.modal__close:hover{color:var(--washi);background:var(--sumi-raise-2)}

/* ----------------------------------------------------------- COMPTE ------- */
.auth__head{margin-bottom:var(--space-lg)}
.auth__enso{width:34px;height:34px;margin-bottom:.75rem}
.auth__enso path{fill:none;stroke:var(--shu);stroke-width:3.5;stroke-linecap:round}
.auth__title{font-family:var(--font-display);font-size:var(--fs-h2);color:var(--washi);line-height:1.1}
.auth__sub{color:var(--washi-dim);margin-top:.4rem;font-size:.95rem}
.auth__tabs{display:flex;margin:var(--space-lg) 0;border-bottom:1px solid var(--charcoal-line)}
.auth__tab{flex:1;padding:.7rem 0;color:var(--stone);font-weight:500;font-size:var(--fs-ui);position:relative;transition:color var(--dur-base) var(--ease-sumi)}
.auth__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--shu);transform:scaleX(0);transition:transform var(--dur-base) var(--ease-brush)}
.auth__tab.is-active{color:var(--washi)}
.auth__tab.is-active::after{transform:scaleX(1)}

/* Champs flottants */
.field{position:relative;margin-top:var(--space-md)}
.field input,.field textarea,.field select{
  width:100%;height:54px;background:var(--sumi-raise-2);border:1px solid var(--charcoal-line);
  border-radius:var(--radius-sm);padding:1.35rem .9rem .4rem;color:var(--washi);caret-color:var(--shu);
  transition:border-color var(--dur-base) var(--ease-sumi),box-shadow var(--dur-base) var(--ease-sumi);
}
.field textarea{height:auto;min-height:84px;padding-top:1.5rem;resize:vertical;line-height:1.5}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A65C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.field label{position:absolute;left:.95rem;top:1rem;color:var(--stone);font-size:1rem;pointer-events:none;transition:transform var(--dur-fast) var(--ease-sumi),color var(--dur-fast),font-size var(--dur-fast)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--kin);box-shadow:var(--shadow-focus-gold)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,.field select + label,.field.is-filled label{transform:translateY(-.7rem);font-size:.72rem;color:var(--washi-dim);letter-spacing:.04em;text-transform:uppercase}
.field.has-error input,.field.has-error textarea{border-color:var(--shu)}
.field__error{display:none;color:var(--shu-soft);font-size:var(--fs-caption);margin-top:.35rem}
.field.has-error .field__error{display:block}
.auth__row{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem}
.auth__forgot{color:var(--kin);font-size:var(--fs-caption)}
.auth__submit{margin-top:var(--space-lg)}
.auth__switch{display:block;text-align:center;margin-top:var(--space-md);color:var(--washi-dim);font-size:.92rem}
.auth__switch b{color:var(--kin);font-weight:600}
.auth__helper{margin-top:var(--space-md);font-size:var(--fs-caption);color:var(--stone);text-align:center;line-height:1.5}
.auth__divider{display:flex;align-items:center;gap:1rem;margin:var(--space-lg) 0;color:var(--stone);font-size:var(--fs-caption)}
.auth__divider::before,.auth__divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--charcoal-line),transparent)}
/* Vue connecté */
.account-card{text-align:center}
.account-card__avatar{width:64px;height:64px;border-radius:50%;margin:0 auto var(--space-md);display:grid;place-items:center;background:var(--sumi-raise-2);border:1px solid var(--kin);color:var(--kin);font-family:var(--font-display);font-style:italic;font-size:1.5rem}
.account-card__name{font-family:var(--font-display);font-size:var(--fs-h2)}
.account-card__email{color:var(--washi-dim);font-size:.92rem;margin-top:.2rem}
.account-card__stat{margin-top:var(--space-lg);padding:var(--space-md);border:1px solid var(--charcoal-line);border-radius:var(--radius-card);background:var(--sumi-raise-2);color:var(--washi-dim);font-size:.92rem}
.account-card__actions{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:.6rem}

/* ----------------------------------------------------------- TIROIR ------- */
.drawer{position:fixed;inset:0;z-index:8000;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(8,7,6,.6);opacity:0;transition:opacity var(--dur-slow) var(--ease-sumi)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;right:0;top:0;height:100%;width:min(440px,92vw);background:var(--sumi-raise);box-shadow:var(--shadow-drawer);border-left:1px solid var(--charcoal-line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-sumi)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__seigaiha{position:absolute;top:0;left:0;right:0;height:60px;opacity:.12;pointer-events:none;z-index:0}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--charcoal-line);position:relative;z-index:1}
.drawer__title{font-family:var(--font-display);font-size:1.5rem;color:var(--washi)}
.drawer__title .u-jp{color:var(--kin);font-size:1rem;margin-left:.2rem}
.drawer__body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem}
.drawer__foot{border-top:1px solid var(--charcoal-line);padding:1.25rem 1.5rem;background:var(--sumi-raise)}

.cart-line{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--charcoal-line);align-items:flex-start}
.cart-line__art{width:52px;height:52px;border-radius:50%;border:1px solid rgba(201,166,92,.3);background:var(--sumi-raise-2);display:grid;place-items:center;flex:none;overflow:hidden}
.cart-line__art svg{width:80%;height:80%}
.cart-line__art .cart-line__photo{width:100%;height:100%;object-fit:cover;display:block}
.cart-line__info{flex:1;min-width:0}
.cart-line__name{font-family:var(--font-display);font-style:italic;font-size:1.02rem;color:var(--washi);line-height:1.2}
.cart-line__unit{font-family:var(--font-mono);color:var(--stone);font-size:.78rem;margin-top:.1rem}
.cart-line__right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.cart-line__sum{font-family:var(--font-mono);color:var(--kin);font-size:.95rem;white-space:nowrap}
.qty{display:inline-flex;align-items:center;gap:.55rem}
.qty button{width:27px;height:27px;border-radius:50%;border:1px solid var(--charcoal-line);color:var(--kin);display:grid;place-items:center;font-size:1rem;line-height:1;transition:border-color var(--dur-base) var(--ease-sumi),background var(--dur-base) var(--ease-sumi)}
.qty button:hover{border-color:var(--kin);background:rgba(201,166,92,.08)}
.qty__val{font-family:var(--font-mono);min-width:1.5ch;text-align:center;color:var(--washi)}
.cart-line__remove{color:var(--stone);font-size:var(--fs-caption);transition:color var(--dur-base)}
.cart-line__remove:hover{color:var(--shu-soft)}

.mode-toggle{display:flex;background:var(--sumi-raise-2);border:1px solid var(--charcoal-line);border-radius:var(--radius-pill);padding:4px;margin-bottom:1rem}
.mode-toggle button{flex:1;padding:.6rem;border-radius:var(--radius-pill);color:var(--washi-dim);font-size:var(--fs-caption);font-weight:600;letter-spacing:.04em;transition:color var(--dur-base) var(--ease-sumi)}
.mode-toggle button.is-active{background:var(--grad-shu-btn);color:var(--washi)}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.cart-subtotal .label{color:var(--washi-dim);font-size:.95rem}
.cart-subtotal .val{font-family:var(--font-display);font-size:1.7rem;color:var(--washi)}
.cart-gate{background:var(--sumi-raise-2);border:1px solid rgba(201,166,92,.25);border-radius:var(--radius-card);padding:1rem 1.1rem;margin-bottom:1rem;font-size:.9rem;color:var(--washi-dim);line-height:1.5}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--stone)}
.cart-empty__enso{width:56px;height:56px;margin:0 auto 1rem;opacity:.6}
.cart-empty__enso path{fill:none;stroke:var(--kin);stroke-width:3;stroke-linecap:round}
.cart-empty p{margin-bottom:1.25rem}

/* Paiement (vue interne du tiroir) */
.checkout__steps{display:flex;gap:.5rem;margin-bottom:1.25rem;font-size:var(--fs-caption);color:var(--stone)}
.checkout__steps b{color:var(--kin)}
.checkout__back{color:var(--washi-dim);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem}
.checkout__back:hover{color:var(--washi)}
.summary{margin:1.25rem 0;border:1px solid var(--charcoal-line);border-radius:var(--radius-card);overflow:hidden}
.summary__title{padding:.8rem 1rem;background:var(--sumi-raise-2);font-family:var(--font-display);font-style:italic;color:var(--washi);border-bottom:1px solid var(--charcoal-line)}
.summary__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 1rem;font-size:.9rem;color:var(--washi-dim)}
.summary__row .u-mono{color:var(--washi)}
.summary__total{display:flex;justify-content:space-between;padding:.8rem 1rem;border-top:1px solid var(--charcoal-line);background:var(--sumi-raise-2)}
.summary__total .label{color:var(--washi)}
.summary__total .val{font-family:var(--font-mono);color:var(--kin);font-weight:700;font-size:1.1rem}

.order-success{text-align:center;padding:1.5rem .5rem}
.order-success__badge{width:72px;height:72px;margin:0 auto 1.25rem;border-radius:50%;background:var(--grad-ember-pool);display:grid;place-items:center}
.order-success__badge svg{width:40px;height:40px;stroke:var(--kin);fill:none;stroke-width:2}
.order-success__title{font-family:var(--font-display);font-size:var(--fs-h2);color:var(--washi)}
.order-success__msg{color:var(--washi-dim);margin-top:.6rem;font-size:.95rem;line-height:1.6}
.order-success__num{display:inline-block;margin-top:1rem;font-family:var(--font-mono);color:var(--kin);font-size:1.25rem;letter-spacing:.05em;border:1px dashed rgba(201,166,92,.4);border-radius:var(--radius-sm);padding:.4rem 1rem}
.order-success__eta{margin-top:.8rem;font-size:var(--fs-caption);color:var(--stone)}
.order-success__actions{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:.6rem}

/* ----------------------------------------------------------- TOASTS ------- */
.toasts{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:9500;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
.toast{display:flex;align-items:center;gap:.6rem;background:var(--sumi-raise);border:1px solid rgba(201,166,92,.35);border-radius:var(--radius-pill);padding:.7rem 1.2rem;color:var(--washi);font-size:.92rem;box-shadow:var(--shadow-raise);transform:translateY(18px);opacity:0;transition:transform var(--dur-base) var(--ease-sumi),opacity var(--dur-base) var(--ease-sumi);pointer-events:auto}
.toast.is-in{transform:none;opacity:1}
.toast__icon{color:var(--kin);display:grid;place-items:center}
.toast__icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ----------------------------------------------------- MENU MOBILE -------- */
.mobile-menu{position:fixed;inset:0;z-index:7000;background:rgba(10,8,7,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:2rem;transform:translateY(-101%);transition:transform var(--dur-slow) var(--ease-sumi);visibility:hidden}
.mobile-menu.is-open{transform:none;visibility:visible}
.mobile-menu__close{position:absolute;top:1.25rem;right:1.25rem;width:46px;height:46px;border-radius:50%;color:var(--washi);display:grid;place-items:center;border:1px solid var(--charcoal-line)}
.mobile-menu a:not(.btn){font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,9vw,2.6rem);color:var(--washi);padding:.35rem 0;transition:color var(--dur-base) var(--ease-sumi);opacity:0;transform:translateY(20px)}
.mobile-menu.is-open a:not(.btn){opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease-sumi) calc(var(--i,0) * 60ms),transform var(--dur-slow) var(--ease-sumi) calc(var(--i,0) * 60ms),color var(--dur-base)}
.mobile-menu a:not(.btn):hover{color:var(--shu-soft)}
.mobile-menu .btn{font-size:var(--fs-ui)}
.mobile-menu__cta{margin-top:1.5rem}
.footer__link-btn{font:inherit;text-align:left}

@media (prefers-reduced-motion: reduce){
  .modal__panel,.drawer__panel{transition-duration:.1ms!important}
  .mobile-menu a{opacity:1!important;transform:none!important}
}