/* ============================================================
   YCE-Site.css
   Feuille de style partagée du site You Can Eat
   ------------------------------------------------------------
   Consolidée à partir des balises <style> des 6 templates :
     • Site-YCE-1-Login.html
     • Site-YCE-2-Dashboard.html
     • Site-YCE-3-Rechargement_porte_monnaie.html
     • Site-YCE-3-Mon_compte.html
     • Site-YCE-4-Page_configuration_admin.html
     • Site-YCE-5-Ecran_visu_cuisine.html
   ------------------------------------------------------------
   ⚠️ Les classes utilitaires Tailwind (flex, grid, p-4, bg-*...)
      restent chargées via le CDN `cdn.tailwindcss.com` dans
      chaque page. Ce fichier ne contient QUE les styles
      personnalisés (tokens, animations, effets de verre,
      états d'interaction) préalablement dupliqués en ligne.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Courbes d'accélération réutilisées partout */
    --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Palette de marque « brand » (sky / bleu électrique),
       identique au tailwind.config des templates */
    --brand-50:  #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #bae6fd;
    --brand-300: #7dd3fc;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;  /* Bleu primaire */
    --brand-600: #0284c7;  /* Bleu survol */
    --brand-700: #0369a1;
    --brand-800: #075985;
    --brand-900: #0c4a6e;  /* Bleu profond / texte */
}


/* ============================================================
   2. BASE
   ============================================================ */
html {
    overscroll-behavior-y: none;     /* fluidité scroll (Dashboard) */
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #f8fafc;        /* slate-50 */
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   3. ANIMATIONS D'ENTRÉE ( stagger )
   ============================================================ */

/* Templates 1, 2, 3a, 5 — classe .stagger-item
   Les pages utilisent soit --delay (1, 5) soit --idx (2, 3a).
   Les deux variables cohabitent : seule celle définie en inline
   contribue au délai, l'autre vaut 0. */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFade 0.6s var(--ease-spring) forwards;
    animation-delay: calc(var(--delay, 0) * 100ms + var(--idx, 0) * 80ms);
}

/* Template 3b (Mon compte) — .animate-stagger + variable --index */
.animate-stagger {
    animation: slideUpFade 0.6s var(--ease-spring) backwards;
    animation-delay: calc(var(--index, 0) * 0.08s);
}

/* Template 4 (Admin) — .animate-enter, délai réglé en inline */
.animate-enter {
    opacity: 0;
    animation: slideUpFade 0.6s var(--ease-out-expo) forwards;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pan lent infini de l'image latérale (Login) */
@keyframes scrollScale {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, -1%); }
}

/* Étincelle « magic food » (Login) */
@keyframes magicFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.1); }
}

/* Respiration des halos décoratifs (Mon compte) */
@keyframes breathe {
    0%, 100% { transform: scale(1) translateY(0);       opacity: 0.5; }
    50%      { transform: scale(1.05) translateY(-5px); opacity: 0.8; }
}
.ambient-shape {
    animation: breathe 8s ease-in-out infinite;
}

/* Reflet glissant du bouton héro (Visu cuisine) */
@keyframes shimmer-slide {
    100% { transform: translateX(200%); }
}
.animate-shimmer {
    animation: shimmer-slide 3s infinite linear;
}

/* Léger flottement (Visu cuisine) */
@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.animate-float {
    animation: subtle-float 6s ease-in-out infinite;
}


/* ============================================================
   4. INTERACTIONS — BOUTONS
   ============================================================ */
.btn-press {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease;
}
.btn-press:active {
    transform: scale(0.96) translateY(2px);
}


/* ============================================================
   5. GLASSMORPHISM
   ============================================================ */

/* Panneaux (Rechargement, Mon compte) */
.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Navigation mobile (Mon compte) */
.glass-nav-mobile {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(14, 165, 233, 0.1);
}

/* Dock mobile (Dashboard) */
.glass-dock {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 -10px 40px rgba(0, 0, 0, 0.03);
}

/* En-tête collant (Admin) */
.glass-header {
    background: rgba(248, 250, 252, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Reflet de bord verre (Visu cuisine) */
.glass-edge {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
                inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}


/* ============================================================
   6. SCROLLBAR (masquer tout en gardant le scroll)
   ============================================================ */
.hide-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar,
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* ============================================================
   7. COMPOSANTS SPÉCIFIQUES
   ============================================================ */

/* --- Sélecteur de date (Dashboard) --- */
.date-radio:checked + label {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(15, 23, 42, 0.3);
}

/* --- Montants prédéfinis (Rechargement) --- */
.amount-radio:checked + label {
    border-color: var(--brand-500);
    background-color: var(--brand-50);
    color: var(--brand-600);
}
.amount-radio:checked + label .check-icon {
    opacity: 1;
    transform: scale(1);
}
.check-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s var(--ease-spring);
}

/* --- Champs à étiquette flottante (Rechargement) --- */
.input-group {
    position: relative;
}
.input-group input {
    transition: all 0.2s ease;
}
.input-group input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

/* --- Lignes de menu (Mon compte) --- */
.row-hover:hover .row-icon-bg {
    background-color: var(--brand-500);
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
}
.row-hover:hover .row-arrow {
    transform: translateX(4px);
    color: var(--brand-500);
}

/* --- Indice de glissement horizontal (Dashboard) --- */
.scroll-hint::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, #f8fafc);
    pointer-events: none;
}

/* --- Auto-remplissage Safari (Login) --- */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important;
    -webkit-text-fill-color: #0f172a !important;
}