/* ==========================================================================
   KitchenTrace-Dialogue — Feuille de style unique (charte Zinc + Or)
   Dérivée de la maquette Template-dev/css/KitchenTrace.css, recentrée sur l'app.
   Pas de CSS embarqué dans les pages : tout passe par ce fichier + Tailwind CDN.
   ========================================================================== */

/* --- @font-face : Cabinet Grotesk (display) + Satoshi (corps) ------------- */
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/CabinetGrotesk-Bold.woff2') format('woff2');      font-weight: 700; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/CabinetGrotesk-Medium.woff2') format('woff2');    font-weight: 500; font-style: normal; }

@font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Bold.woff2') format('woff2');   font-weight: 700; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }

/* --- Variables & base ---------------------------------------------------- */
:root {
    --radius-panel: 1.5rem;
    --gastro-gold: #a68a56;
    --gastro-gold-hover: #8c7346;
    --accent: #a68a56;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: #fafafa;
    color: #18181b;
}
body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fafafa;
    color: #18181b;
    font-family: 'Satoshi', sans-serif;
}

/* --- Glass / panneaux ---------------------------------------------------- */
.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(24, 24, 27, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

.panel {
    background: #ffffff;
    border: 1px solid rgba(24, 24, 27, 0.04);
    border-radius: var(--radius-panel);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* --- Champs de formulaire ------------------------------------------------ */
.gastro-input {
    width: 100%;
    background-color: #f4f4f5;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: #18181b;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: inherit;
}
.gastro-input:focus {
    background-color: #ffffff;
    border-color: var(--gastro-gold);
    box-shadow: 0 0 0 4px rgba(166, 138, 86, 0.1);
}
.gastro-input::placeholder { color: #a1a1aa; }

textarea.gastro-input { resize: vertical; min-height: 120px; line-height: 1.5; }

.gastro-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    margin-bottom: 0.5rem;
}

/* Bouton or (accent) */
.btn-gold {
    background-color: var(--gastro-gold);
    color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 10px 25px -5px rgba(166, 138, 86, 0.3);
}
.btn-gold:hover { background-color: var(--gastro-gold-hover); }
.btn-gold:active { transform: scale(0.98); }

/* Bouton danger (rouge) — action irréversible (ex. clôture d'un événement) */
.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.3);
}
.btn-danger:hover { background-color: #b91c1c; }
.btn-danger:active { transform: scale(0.98); }

/* Bouton secondaire (contour) — action réversible (ex. rouvrir un événement) */
.btn-outline {
    background-color: transparent;
    color: #3f3f46;
    border: 1px solid #d4d4d8;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-outline:hover { background-color: #f4f4f5; }
.btn-outline:active { transform: scale(0.98); }

/* --- Animations (apparition staggered) ----------------------------------- */
@keyframes slideUpFade {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.stagger-item {
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--index, 0) * 70ms);
}

/* Spinner */
.spinner {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-left-color: #fff;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    animation: spin 1s linear infinite;
    display: inline-block;
}
.icon-spin { animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* États de transition (form switching auth) */
.state-hidden { display: none !important; opacity: 0; pointer-events: none; }

/* --- Scrollbar ----------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }

/* --- Divers -------------------------------------------------------------- */
[x-cloak] { display: none !important; }
.prose-event { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }