/* ============================================================
   THEME V2 — « Coloré & chaleureux » (refonte UI 2026)
   Skin appliqué PAR-DESSUS style.css. Piloté par les variables
   de marque (--primary / --accent) définies par branding.js :
   changer les couleurs dans Apparence re-thème toute l'app.
   Scopé .admin-app (les portails parent/animateur gardent leur thème).
   ============================================================ */

.admin-app {
    /* Typo de caractère : Outfit pour les titres/chiffres (Inter reste en corps).
       Font swap = l'amélioration visuelle nº1 (audit redesign). */
    --v2-display: 'Outfit', 'Inter', system-ui, sans-serif;
    /* Dérivés chaleureux du brand (recalculés si --primary change) */
    --v2-grad: linear-gradient(120deg, var(--primary), var(--primary-light) 55%, var(--accent));
    --v2-bg: color-mix(in srgb, var(--primary) 4%, #fdfcff);
    --v2-card-line: color-mix(in srgb, var(--primary) 12%, transparent);
    --v2-shadow: 0 10px 30px -12px color-mix(in srgb, var(--primary) 28%, transparent);
    --v2-shadow-sm: 0 4px 14px -8px color-mix(in srgb, var(--primary) 30%, transparent);
    --v2-rose: #fb6f92; --v2-coral: #ff8b6a; --v2-amber: #f7a833;
    --v2-teal: #17c0a8; --v2-sky: #38a9f4; --v2-green: #37c978;
}

/* ---- fond de travail légèrement teinté ---- */
.admin-app .main-content { background: var(--v2-bg); }

/* ---- cartes : rondes, chaudes, vivantes ---- */
.admin-app .card,
.admin-app .stat-card {
    border-radius: 22px;
    border: 1px solid var(--v2-card-line);
    box-shadow: var(--v2-shadow-sm);
}
.admin-app .stat-card {
    position: relative;
    overflow: hidden;
    transition: transform .14s ease, box-shadow .14s ease;
}
.admin-app .stat-card:hover { transform: translateY(-4px); box-shadow: var(--v2-shadow); }
/* pastille décorative en coin (comme la maquette) */
.admin-app .stat-card::after {
    content: ""; position: absolute; right: -28px; top: -28px;
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--primary); opacity: .07; pointer-events: none;
}
.admin-app .stat-card.success::after { background: var(--v2-teal); }
.admin-app .stat-card.warning::after { background: var(--v2-amber); }
.admin-app .stat-card.info::after    { background: var(--v2-sky); }
.admin-app .stat-card.danger::after  { background: var(--v2-rose); }

/* icône : tuile dégradée blanche (remplace l'icône plate) */
.admin-app .stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 15px;
    display: grid; place-items: center;
    background: var(--v2-grad); color: #fff;
    box-shadow: var(--v2-shadow-sm);
    font-size: 1.05rem;
}
.admin-app .stat-card.success .stat-icon { background: linear-gradient(135deg, var(--v2-teal), #0fb39c); }
.admin-app .stat-card.warning .stat-icon { background: linear-gradient(135deg, var(--v2-amber), var(--v2-coral)); }
.admin-app .stat-card.info .stat-icon    { background: linear-gradient(135deg, var(--v2-sky), #5ea0ff); }
.admin-app .stat-card.danger .stat-icon  { background: linear-gradient(135deg, var(--v2-rose), var(--v2-coral)); }
.admin-app .stat-card .stat-value {
    font-family: var(--v2-display);
    font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
/* Titres/valeurs : Outfit pour le caractère, chiffres tabulaires partout */
.admin-app h1, .admin-app h2, .admin-app h3,
.admin-app .page-title, .admin-app .card-title,
.admin-app .dashboard-greeting, .admin-app .hero-rate-value {
    font-family: var(--v2-display);
}
.admin-app .table td, .admin-app .stat-delta { font-variant-numeric: tabular-nums; }
/* feedback physique au clic (audit : active/pressed state) */
.admin-app .stat-card.clickable:active,
.admin-app .quick-action:active { transform: translateY(-1px) scale(.985); }
.admin-app .btn-primary:active { transform: translateY(0) scale(.98); }

/* ---- hero du dashboard : gradient de marque enrichi (mesh + grain) ---- */
.admin-app .dashboard-hero {
    position: relative; overflow: hidden;
    /* Stack : grain SVG léger + deux halos radiaux + dégradé de marque.
       Évite le "gradient 45° uniforme" (fingerprint IA, audit redesign). */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(680px 320px at 12% -20%, rgba(255, 255, 255, .20), transparent 60%),
        radial-gradient(520px 300px at 108% 118%, color-mix(in srgb, var(--accent) 55%, #ff8b6a), transparent 62%),
        var(--v2-grad);
    border-radius: 26px;
    box-shadow: var(--v2-shadow);
}
.admin-app .dashboard-hero::before,
.admin-app .dashboard-hero::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.admin-app .dashboard-hero::before { width: 210px; height: 210px; background: #ff9bb0; opacity: .28; top: -70px; right: 70px; }
.admin-app .dashboard-hero::after  { width: 150px; height: 150px; background: #ffd27a; opacity: .32; bottom: -60px; right: -18px; }
.admin-app .dashboard-hero > * { position: relative; z-index: 1; }

/* jauge circulaire du taux de recouvrement (–-p mis à jour en JS) */
.admin-app .dashboard-hero-rate {
    --p: 0;
    width: 112px; height: 112px; border-radius: 50%;
    background: conic-gradient(#ffe08a calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0);
    display: grid; place-items: center; text-align: center;
    padding: 0; flex: 0 0 auto;
}
.admin-app .dashboard-hero-rate > div,
.admin-app .dashboard-hero-rate .hero-rate-value,
.admin-app .dashboard-hero-rate .hero-rate-label { position: relative; z-index: 1; }
.admin-app .dashboard-hero-rate::before {
    content: ""; position: absolute;
    width: 86px; height: 86px; border-radius: 50%;
    background: rgba(40, 22, 90, .30); backdrop-filter: blur(3px);
}
.admin-app .dashboard-hero-rate { position: relative; flex-direction: column; }
.admin-app .hero-rate-value { font-size: 1.35rem; font-weight: 800; }
.admin-app .hero-rate-label { font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }

/* ---- actions rapides : pilules blanches qui se soulèvent ---- */
.admin-app .quick-action {
    background: var(--white);
    border: 1px solid var(--v2-card-line);
    border-radius: 18px;
    box-shadow: var(--v2-shadow-sm);
    transition: transform .13s ease, box-shadow .13s ease;
}
.admin-app .quick-action:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }
.admin-app .qa-icon { border-radius: 13px; }

/* ---- titres de section : eyebrow + trait ---- */
.admin-app .section-title,
.admin-app .section-title-plain {
    display: flex; align-items: center; gap: 9px;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--gray-500);
}
.admin-app .section-title::after,
.admin-app .section-title-plain::after {
    content: ""; flex: 1; height: 1px; background: var(--v2-card-line);
}
.admin-app .section-title i { color: var(--primary); }

/* ---- boutons primaires : dégradé de marque ---- */
.admin-app .btn-primary {
    background: var(--v2-grad);
    border: none;
    box-shadow: var(--v2-shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.admin-app .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--v2-shadow); }

/* ---- tables : lignes aérées + hover doux ---- */
.admin-app .table tbody tr { transition: background .12s ease; }
.admin-app .table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.admin-app .table thead th {
    font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--gray-500);
}

/* ---- FAB & badges suivent le brand ---- */
.admin-app .fab { background: var(--v2-grad); }

/* ---- modales : coins généreux + ombre chaude ---- */
.admin-app .modal {
    border-radius: 24px;
    box-shadow: 0 30px 60px -18px color-mix(in srgb, var(--primary) 35%, rgba(0, 0, 0, .25));
}
.admin-app .modal-header { border-radius: 24px 24px 0 0; }

/* ---- champs de formulaire : plus doux, focus de marque ---- */
.admin-app .form-input,
.admin-app select.form-input,
.admin-app textarea.form-input {
    border-radius: 13px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.admin-app .form-input:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* ---- sidebar : item actif en pilule lumineuse ---- */
.admin-app .sidebar .nav-item {
    border-radius: 13px;
    transition: background .12s ease, transform .12s ease;
}
.admin-app .sidebar .nav-item:hover { transform: translateX(2px); }
.admin-app .sidebar .nav-item.active {
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ---- onglets (Centre de loisirs & co) : pilules ---- */
.admin-app .summer-tab { border-radius: 999px; }
.admin-app .summer-tab.active {
    background: var(--v2-grad);
    color: #fff;
    box-shadow: var(--v2-shadow-sm);
}

/* ---- badges : chiffres tabulaires + poids ---- */
.admin-app .badge { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- topbar : liseré de marque subtil sous le verre ---- */
.admin-app .main-header { border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); }

/* ---- Dashboard Centre de loisirs : hero « Aujourd'hui » ---- */
.admin-app .sdash-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(600px 280px at 10% -30%, rgba(255, 255, 255, .18), transparent 60%),
        radial-gradient(480px 260px at 105% 120%, color-mix(in srgb, var(--accent) 55%, #ffb36a), transparent 62%),
        var(--v2-grad);
    border-radius: 24px;
    box-shadow: var(--v2-shadow);
    color: #fff;
    padding: 20px 22px;
}
.admin-app .sdash-hero .sh-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin-app .sdash-hero .sh-title { font-family: var(--v2-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.admin-app .sdash-hero .sh-date { font-size: .85rem; opacity: .9; }
.admin-app .sdash-hero .sh-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; margin-top: 14px;
}
.admin-app .sdash-hero .sh-stat {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 15px; padding: 10px 13px;
    backdrop-filter: blur(3px);
}
.admin-app .sdash-hero .sh-stat .v { font-family: var(--v2-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-app .sdash-hero .sh-stat .l { font-size: .7rem; opacity: .9; margin-top: 2px; }
.admin-app .sdash-hero .sh-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.admin-app .sdash-hero .sh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .92); color: var(--primary-dark);
    border: none; border-radius: 999px; padding: 9px 16px;
    font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
    transition: transform .12s ease, background .12s ease;
    min-height: 40px;
}
.admin-app .sdash-hero .sh-btn:hover { transform: translateY(-2px); background: #fff; }
.admin-app .sdash-hero .sh-closed { margin-top: 12px; font-size: .95rem; font-weight: 600; opacity: .95; }
/* Bannière anniversaire 🎂 : festive, lisible sur le gradient */
.admin-app .sdash-hero .sh-bday {
    margin-top: 12px;
    background: rgba(255, 224, 138, .22);
    border: 1px dashed rgba(255, 224, 138, .65);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: .92rem;
}
.admin-app .sdash-hero .sh-bday strong { color: #ffe08a; }
.admin-app .sdash-hero .sh-bday .sh-bday-note {
    display: block; font-size: .76rem; opacity: .9; margin-top: 2px;
}

/* Cartes synthèse cliquables */
.admin-app .sdash-click {
    cursor: pointer;
    transition: transform .13s ease, box-shadow .13s ease;
}
.admin-app .sdash-click:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }
.admin-app .sdash-click:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.admin-app .sdash-click:active { transform: translateY(-1px) scale(.99); }

/* Icônes des cartes synthèse (insights) en tuiles colorées */
.admin-app .sdash-ic {
    width: 34px; height: 34px; border-radius: 11px;
    display: inline-grid; place-items: center;
    color: #fff; font-size: .9rem; flex: 0 0 auto;
    box-shadow: var(--v2-shadow-sm);
}

/* ---- correctifs mobile (audit 390×844 juillet 2026) ---- */
@media (max-width: 768px) {
    /* Titre de page : blanc sur la topbar gradient. style.css en fait un
       texte-dégradé (background-clip:text + text-fill transparent) → le
       `color` seul est sans effet ; il faut neutraliser le clip. */
    .admin-app .main-header .page-title {
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #fff !important;
        color: #fff !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    }
    /* Boutons compacts (page Activités & co) : cible tactile suffisante */
    .admin-app .btn-xs {
        min-height: 44px;
        padding: 8px 14px;
        font-size: .8rem;
    }
}

/* ---- réduits animations si préférence ---- */
@media (prefers-reduced-motion: reduce) {
    .admin-app .stat-card, .admin-app .quick-action, .admin-app .btn-primary { transition: none; }
    .admin-app .stat-card:hover, .admin-app .quick-action:hover, .admin-app .btn-primary:hover { transform: none; }
}