/* =====================================================================
   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;
    /* Fond : pelouse de terrain (indépendant de la couleur de l'instance). */
    background:#2b7a3b url(../img/login-pitch.jpg) center/cover no-repeat;
    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;
    /* iOS : empêche la loupe / la sélection de texte au long appui, pour que le drag démarre. */
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.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; }

/* Téléphone : tuiles compactes (2 colonnes), sans description ni flèche. */
@media (max-width:575.98px){
    .fl-modules{ gap:.6rem; grid-template-columns:repeat(2, 1fr); }
    .fl-module{ padding:.85rem; border-radius:.8rem; }
    .fl-module-icon{ width:40px; height:40px; font-size:1.1rem; margin-bottom:.5rem; border-radius:11px; }
    .fl-module h3{ font-size:.92rem; margin:0; }
    .fl-module p{ display:none; }
    .fl-module .fl-module-arrow{ display:none; }
}

/* Poignée de déplacement : le glisser-déposer ne part que de cette poignée. */
.fl-module-grip{ position:absolute; top:8px; right:8px; color:#aab2c0; padding:6px; line-height:1; cursor:grab; touch-action:none; z-index:3; }
.fl-module-grip:active{ cursor:grabbing; }
.fl-modules.fl-locked .fl-module-grip{ display:none; }
/* Emplacement d'origine estompé (le « trou » laissé par la tuile saisie), ordinateur ET téléphone. */
.fl-modules .fl-module-ghost{ opacity:.28; }
/* Tuile saisie : dessinée pleine, soulevée au premier plan, elle suit le pointeur/le doigt. */
.fl-module-drag{ opacity:1 !important; box-shadow:0 22px 42px -12px rgba(20,30,50,.6) !important; cursor:grabbing; }

/* Déconnexion en bas de l'accueil (téléphone). */
.fl-home-logout{ display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem; border-radius:12px; text-decoration:none; color:#dc3545; font-weight:600; border:1px solid #f3d0d4; }
.fl-home-logout:hover{ background:#fbe9eb; }

/* ---------- 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); }

/* ---------- Navigation harmonisée (repères visuels) ---------- */
/* Accueil : bleu ciel, en haut à droite de chaque page de module. */
.fl-btn-home{ background:#8ecae6; border:1px solid #74b9d8; color:#073b4c; font-weight:600; }
.fl-btn-home:hover{ background:#74b9d8; color:#073b4c; }
/* Vert clair : retour contextuel vers la page qui embarque un module (fin de saison). */
.fl-btn-back{ background:#c8e6c9; border:1px solid #a5d6a7; color:#1b4d20; font-weight:600; }
.fl-btn-back:hover{ background:#a5d6a7; color:#1b4d20; }

.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;
}