/* layout.css - Navbar, footer, page-section, containers, FABs, buttons, banners */

/* === Bouton Uber Eats fixe uniquement sur accueil === */
.uber-fixed{
    position:fixed;
    top:100px;
    right:20px;
    z-index:999;
    background:#000;
    color:#fff;
    padding:12px 22px;
    border-radius:50px;
    font-weight:700;
    font-size:13px;
    border:2px solid #06C167;
    text-decoration:none;
    display:none;
    align-items:center;
    gap:10px;
    box-shadow:0 4px 20px rgba(6,193,103,.4);
    transition:all .3s;
}

.uber-fixed:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 8px 30px rgba(6,193,103,.6);
}

.uber-fixed.visible{display:flex;}

/* Install PWA Banner */
.install-banner{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--bg);
    border-top:2px solid var(--accent-modern);
    padding:20px;
    z-index:10002;
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
}

.install-banner.show{display:block !important;}

.install-content{
    max-width:600px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.install-text{display:flex;align-items:center;gap:15px;}
.install-text i{font-size:32px;color:var(--accent-modern);}

/* Navigation */
.navbar{
    background:var(--bg);
    border-bottom:2px solid var(--accent-modern);
    position:sticky;
    top:0;
    z-index:1000;
    padding:15px 20px;
}

.nav-content{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

/* === MODIFIÉ : Typographie manuscrite pour le logo === */
.logo{
    font-family:var(--handwriting);
    font-size:38px;
    font-weight:700;
    color:var(--t);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    letter-spacing:1px;
}

.logo-icon{
    width:45px;
    height:45px;
    background:var(--accent-modern);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-family:'Bebas Neue',sans-serif;
}

.nav-links{
    display:flex;
    gap:30px;
    list-style:none;
    align-items:center;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    flex:1;
    justify-content:flex-end;
}

.nav-links::-webkit-scrollbar{display:none;}

.nav-links a{
    color:var(--m);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:all .3s;
    position:relative;
    padding:8px 0;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.nav-links a:hover,.nav-links a.active{
    color:var(--t);
}

.nav-links a.active::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3px;
    background:var(--accent-modern);
    border-radius:2px;
}

.nav-links a i{font-size:16px;}

/* === Onglet Admin caché par défaut === */
.admin-nav-item{
    display:none !important;
    background:var(--accent-modern);
    padding:8px 16px !important;
    border-radius:20px;
}

.admin-nav-item.visible{
    display:flex !important;
}

.user-menu-btn{
    background:rgba(255,255,255,.1);
    border:1px solid var(--l);
    color:var(--t);
    padding:10px 20px;
    border-radius:25px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    transition:all .3s;
}

.user-menu-btn:hover{
    background:var(--accent-modern);
    border-color:var(--accent-modern);
    transform:translateY(-2px);
}

/* Floating Action Buttons */
.fab-container{
    position:fixed;
    bottom:100px;
    right:30px;
    z-index:998;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.fab{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    transition:all .3s;
    text-decoration:none;
    position:relative;
}

.fab:hover{
    transform:scale(1.1) translateY(-5px);
    box-shadow:0 8px 30px rgba(0,0,0,.4);
}

.fab-call{background:var(--success);}
.fab-chatbot{background:var(--info);}
.fab-qr{background:var(--warning);}
.fab-install{background:linear-gradient(135deg,#667eea,#764ba2);}

.fab-label{
    position:absolute;
    right:70px;
    background:rgba(0,0,0,.8);
    padding:8px 15px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    opacity:0;
    transform:translateX(10px);
    transition:all .3s;
    pointer-events:none;
}

.fab:hover .fab-label{
    opacity:1;
    transform:translateX(0);
}

/* Page Sections - Transitions subtiles */
.page-section{
    display:none;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.25s ease-out, transform 0.25s ease-out;
    min-height:calc(100vh - 200px);
}

.page-section.active{
    display:block !important;
    opacity:1;
    transform:translateY(0);
}

/* Animation des sections du menu - seulement au chargement initial */
.page-section.active .sec{
    animation:none;
}

/* PAS d'animation sur les items pour éviter les bugs d'affichage */
.page-section.active .item{
    animation:none;
}

/* Animation subtile pour les boutons */
.btn, .addbtn, .sc-btn{
    transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active, .addbtn:active, .sc-btn:active{
    transform:scale(0.95);
}

/* Animation du panier */
.cart-badge{
    animation:bounceIn 0.5s ease;
}

/* Animation de la navigation */
nav a{
    position:relative;
    transition:color 0.3s ease;
}

nav a::after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:50%;
    width:0;
    height:2px;
    background:var(--accent-modern);
    transition:all 0.3s ease;
    transform:translateX(-50%);
}

nav a:hover::after,
nav a.active::after{
    width:100%;
}

/* Animation du hero */
.hero-content{
    animation:fadeIn 0.8s ease;
}

/* Animation des images */
img{
    transition:transform 0.3s ease, opacity 0.3s ease;
}

img:hover{
    transform:scale(1.02);
}

/* Buttons */
.btn-primary{
    background:var(--accent-modern);
    color:#fff;
    border:none;
    padding:18px 40px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    transition:all .3s;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    box-shadow:0 5px 20px rgba(255,71,87,.4);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(255,71,87,.6);
}

.btn-secondary{
    background:transparent;
    color:#fff;
    border:2px solid var(--t);
    padding:18px 40px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    transition:all .3s;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.btn-secondary:hover{
    background:var(--t);
    color:var(--bg);
}

.btnBig{
    background:var(--accent-modern);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:18px 30px;
    font-weight:700;
    cursor:pointer;
    font-size:16px;
    transition:all .3s;
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.btnBig:hover:not(:disabled){
    background:var(--a-light);
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(255,71,87,.4);
}

.btnBig:disabled{opacity:.5;cursor:not-allowed;}

/* Alert Banner */
.alert-banner{
    background:linear-gradient(90deg,var(--accent-modern),#ff6b6b);
    color:#fff;
    padding:15px 20px;
    text-align:center;
    font-weight:700;
    display:none;
    position:relative;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.alert-banner.show{display:block !important;}

/* Live Indicator */
.live-indicator{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(46,204,113,.2);
    color:var(--success);
    padding:8px 16px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    margin-left:15px;
}

.live-dot{
    width:8px;
    height:8px;
    background:var(--success);
    border-radius:50%;
}

/* Empty cart state */
.empty-cart{text-align:center;padding:60px 20px;color:var(--m);}
.empty-cart-icon{font-size:64px;margin-bottom:25px;opacity:.5;}

/* Success message */
.success-message{
    display:none;
    position:fixed;
    top:100px;
    right:30px;
    background:var(--success);
    color:#fff;
    padding:20px 30px;
    border-radius:16px;
    font-weight:700;
    z-index:10000;
    box-shadow:0 10px 40px rgba(46,204,113,.3);
}

/* Loading Skeleton */
.skeleton{
    background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);
    background-size:200% 100%;
    border-radius:12px;
}

/* Toast Notifications */
.toast-container{
    position:fixed;
    top:100px;
    right:30px;
    z-index:10001;
    display:flex;
    flex-direction:column;
    gap:15px;
    pointer-events:none;
}

.toast{
    background:var(--bg);
    border:1px solid var(--l);
    padding:20px 25px;
    border-radius:16px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
    max-width:350px;
    pointer-events:auto;
}

.toast.success{border-left:4px solid var(--success);}
.toast.error{border-left:4px solid var(--accent-modern);}
.toast.info{border-left:4px solid var(--warning);}

/* Promo Banner Editable */
.promo-banner{
    background:var(--promo-bg, linear-gradient(90deg,var(--accent-modern),#ff6b6b));
    color:var(--promo-color, #fff);
    padding:15px;
    text-align:center;
    font-weight:700;
    font-size:14px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    opacity:0;transition:opacity .3s;
    transition:all .3s;
}

.promo-banner:hover{
    filter:brightness(1.1);
}

.promo-banner::before{
    content:'';
    position:absolute;
    top:0;left:-100%;right:0;bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
}

/* Loyalty Badge */
.loyalty-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(45deg,#FFD700,#FFA500);
    color:#000;
    padding:10px 20px;
    border-radius:30px;
    font-weight:700;
    font-size:13px;
    margin-left:15px;
    box-shadow:0 0 10px rgba(255,215,0,.5);
}

/* Social Hero */
.social-hero{
    margin-top:50px;
    display:flex;
    justify-content:center;
    gap:20px;
}

.social-hero a{
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
    transition:all .3s;
    border:1px solid var(--l);
    text-decoration:none;
}

.social-hero a:hover{
    background:var(--accent-modern);
    transform:translateY(-5px);
    border-color:var(--accent-modern);
}

/* === Bandeau Cookies RGPD === */
.cookie-banner{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:rgba(15,15,25,.97);
    backdrop-filter:blur(20px);
    border-top:1px solid var(--l);
    padding:20px 30px;
    z-index:10001;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    box-shadow:0 -4px 30px rgba(0,0,0,.5);
}
.cookie-banner.show{display:flex;}
.cookie-banner-text{flex:1;min-width:250px;font-size:13px;color:var(--m);line-height:1.6;}
.cookie-banner-text a{color:var(--accent-modern);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{padding:10px 20px;border-radius:30px;font-weight:700;font-size:13px;cursor:pointer;border:none;transition:all .3s;text-transform:uppercase;letter-spacing:1px;}
.cookie-btn-accept{background:var(--accent-modern);color:#fff;}
.cookie-btn-accept:hover{background:var(--a-light);transform:translateY(-1px);}
.cookie-btn-reject{background:transparent;color:var(--m);border:1px solid var(--l);}
.cookie-btn-reject:hover{border-color:var(--m);color:#fff;}

/* === FIX: Navigateurs in-app (Instagram, Facebook, TikTok WebView) === */

/* Utiliser dvh (dynamic viewport height) au lieu de vh quand supporté */
@supports (min-height: 100dvh) {
    .hero { min-height: 90dvh; }
}

/* Fix pour les modales dans les WebView (plein écran correct) */
.auth-modal, .modal {
    min-height: 100vh;
    min-height: 100dvh;
}

/* === Styles spécifiques navigateur in-app (classe ajoutée par JS) === */
.in-app-browser .hero {
    min-height: var(--real-vh, 90vh);
    min-height: 80dvh;
    max-height: var(--real-vh, 100vh);
}

.in-app-browser .promo-banner {
    padding: 10px 15px;
    font-size: 12px;
}

/* Uber fixed button : ajuster pour ne pas chevaucher la barre in-app */
.in-app-browser .uber-fixed {
    top: 10px;
}