/* =====================================================================
   Footlife - Espace utilisateur (thème dynamique par instance)
   Les couleurs proviennent des variables CSS injectées (theme_style.php).
   ===================================================================== */

:root{
    --c-primary:#0d6efd; --c-primary-rgb:13,110,253;
    --c-primary-dark:#0a58ca; --c-primary-darker:#084298;
    --c-primary-light:#cfe2ff; --c-primary-soft:rgba(13,110,253,.08);
    --c-on-primary:#fff;
    --c-secondary:#6c757d; --c-accent:#198754; --c-accent-rgb:25,135,84;
    --c-accent-dark:#146c43; --c-on-accent:#fff;
}

*{ box-sizing:border-box; }
body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#f3f5f9;
    color:#1f2733;
    margin:0;
}

/* ---------- Pages d'authentification (login / register) ---------- */
.fl-auth-body{
    min-height:100vh;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(var(--c-accent-rgb),.35), transparent 60%),
        linear-gradient(135deg, var(--c-primary), var(--c-primary-darker));
    padding:1.25rem;
}
.fl-auth-card{
    width:100%; max-width:430px;
    background:#fff; border-radius:1.25rem;
    box-shadow:0 25px 60px -20px rgba(0,0,0,.45);
    animation:flRise .5s cubic-bezier(.2,.8,.2,1) both;
}
.fl-auth-logo{
    width:74px; height:74px; line-height:74px; margin:0 auto;
    border-radius:20px; font-size:2rem;
    background:linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
    color:var(--c-on-accent);
    box-shadow:0 10px 25px -8px rgba(var(--c-accent-rgb),.7);
    display:flex; align-items:center; justify-content:center;
}
.fl-auth-logo img{ max-width:60%; max-height:60%; }
.fl-club-name{ color:var(--c-primary-darker); font-weight:700; }

@keyframes flRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------- Barre de navigation ---------- */
.fl-navbar{
    background:linear-gradient(120deg, var(--c-primary), var(--c-primary-dark));
    color:var(--c-on-primary);
    box-shadow:0 6px 20px -10px rgba(var(--c-primary-rgb),.8);
}
.fl-navbar .navbar-brand,
.fl-navbar .nav-link,
.fl-navbar .dropdown-toggle{ color:var(--c-on-primary)!important; }
.fl-navbar .navbar-brand{ font-weight:700; display:flex; align-items:center; gap:.55rem; }
.fl-brand-logo{ height:34px; width:auto; background:#fff; border-radius:8px; padding:3px; }
.fl-avatar{
    width:34px; height:34px; border-radius:50%;
    background:var(--c-accent); color:var(--c-on-accent);
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:600; font-size:.85rem;
}

/* ---------- En-tête / hero ---------- */
.fl-hero{
    background:linear-gradient(120deg, var(--c-primary), var(--c-primary-darker));
    color:var(--c-on-primary);
    border-radius:1.25rem;
    padding:1.75rem 1.9rem;
    position:relative; overflow:hidden;
    box-shadow:0 18px 40px -22px rgba(var(--c-primary-rgb),.9);
}
.fl-hero::after{
    content:""; position:absolute; right:-60px; top:-60px;
    width:220px; height:220px; border-radius:50%;
    background:rgba(var(--c-accent-rgb),.35);
}
.fl-hero h1{ font-weight:700; margin:0; position:relative; z-index:1; }
.fl-hero p{ margin:.25rem 0 0; opacity:.9; position:relative; z-index:1; }

/* ---------- Grille de modules ---------- */
.fl-modules{
    display:grid; gap:1.1rem;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.fl-module{
    display:block; text-decoration:none; color:inherit;
    background:#fff; border-radius:1rem; padding:1.4rem;
    border:1px solid #eaeef4;
    box-shadow:0 8px 22px -16px rgba(20,30,50,.5);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative; overflow:hidden;
}
.fl-module::before{
    content:""; position:absolute; left:0; top:0; height:4px; width:100%;
    background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.fl-module:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 34px -18px rgba(20,30,50,.55);
    border-color:transparent;
}
.fl-module:hover::before{ transform:scaleX(1); }
.fl-module-icon{
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin-bottom:.9rem;
    background:var(--c-primary-soft); color:var(--c-primary-dark);
    transition:background .2s ease, color .2s ease;
}
.fl-module:hover .fl-module-icon{
    background:linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
    color:var(--c-on-accent);
}
.fl-module h3{ font-size:1.05rem; font-weight:650; margin:0 0 .25rem; }
.fl-module p{ font-size:.85rem; color:#67718a; margin:0; }
.fl-module .fl-module-arrow{
    position:absolute; right:1.1rem; bottom:1.1rem; color:var(--c-accent);
    opacity:0; transform:translateX(-6px); transition:.2s ease;
}
.fl-module:hover .fl-module-arrow{ opacity:1; transform:none; }

/* ---------- Boutons accent ---------- */
.btn-accent{
    background:var(--c-accent); border:none; color:var(--c-on-accent);
    font-weight:600;
}
.btn-accent:hover{ background:var(--c-accent-dark); color:var(--c-on-accent); }
.btn-primaryc{
    background:var(--c-primary); border:none; color:var(--c-on-primary); font-weight:600;
}
.btn-primaryc:hover{ background:var(--c-primary-dark); color:var(--c-on-primary); }

.form-control:focus{
    border-color:var(--c-primary);
    box-shadow:0 0 0 .2rem rgba(var(--c-primary-rgb),.2);
}

/* ---------- Pied de page ---------- */
.fl-footer{ color:#8a94a6; font-size:.8rem; }

.fl-empty{
    background:#fff; border:1px dashed #d4dae5; border-radius:1rem;
    padding:2.5rem; text-align:center; color:#7a8295;
}