/* ============================================================================
   Celltis Gestion — Layout & chrome (thème sombre « glassy », style Celltis)
   ============================================================================ */

@font-face {
    font-family: 'Abel';
    font-style: normal; font-weight: 400; font-display: swap;
    src: local('Abel Regular'), local('Abel-Regular'), url("/assets/fonts/abel.woff2") format('woff2');
}
@font-face {
    font-family: 'Bebas';
    font-style: normal; font-weight: 900; font-display: swap;
    src: local('Bebas'), url("/assets/fonts/bebas.ttf") format('truetype');
}

:root {
    --bg: #2b333a;
    --teal: #1f5d56;
    --teal-l: #2e8377;
    --teal-d: #132724;
    --accent: #63c7ff;          /* cyan Celltis */
    --accent2: rgb(131 255 247);
    --ink: #eef3f2;
    --muted: #9fb0ad;
    --line: #ffffff2e;
    --line-soft: #ffffff1a;
    --card: #ffffff14;
    --card2: #ffffff0d;
    --green: #9ff08a;
    --red: #ff8a8a;
    --blue: #8fd0ff;
    --yellow: #f6ff7b;
    --orange: #ffb088;
    --purple: #f07eff;
}

* { box-sizing: border-box; scrollbar-color: #ffffff66 transparent; scrollbar-width: thin; }
html, body { margin: 0; padding: 0; height: 100vh; width: 100%; }
html { font-family: 'Abel', system-ui, sans-serif; overscroll-behavior: contain; }
body { position: relative; overflow: hidden; background-color: var(--bg); color: var(--ink); font-size: 16px; }

/* Fond flouté façon Celltis. */
body::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: url('/assets/images/33.jpg');
    background-size: cover; background-position: 50% 50%;
    filter: blur(20px); transform: scale(1.1);
}

a { text-decoration: none; color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: normal; }

appframe { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---- Barre supérieure ---- */
apptop {
    display: flex; align-items: center; gap: 22px; height: 60px; min-height: 60px; padding: 0 22px;
    background: rgb(0 0 0 / 25%); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); z-index: 20;
}
apptop .burger { display: none; color: var(--ink); padding: 6px; }
apptop brand a, authtop brand a { display: flex; align-items: center; gap: 10px; }
apptop brand img, authtop brand img { height: 30px; width: auto; }

apptop companyswitch { margin-left: 6px; }
apptop companyswitch a {
    display: flex; align-items: center; gap: 8px; background: #ffffff17; padding: 8px 14px; border-radius: 6px;
    color: var(--ink); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; transition: background .3s;
}
apptop companyswitch a:hover { background: #63c7ff4f; }
apptop companyswitch .chev { font-size: 18px; opacity: .7; }

apptop topactions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
apptop topactions a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 6px; color: var(--ink); position: relative; transition: background .3s; }
apptop topactions a:hover { background: #ffffff17; color: #fff; }
apptop topactions .user span { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
apptop topactions .bell badge {
    position: absolute; top: 2px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
    background: #ff5d5d; color: #fff; border-radius: 9px; font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* ---- Barre auth ---- */
authtop { display: flex; align-items: center; height: 64px; padding: 0 28px; background: rgb(0 0 0 / 25%); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
authtop brand img { height: 30px; }
authtop span { margin-left: auto; display: flex; gap: 10px; align-items: center; }
authtop span a { padding: 9px 16px; border-radius: 6px; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
authtop span a.cta { background-image: linear-gradient(90deg, #1f5d56, #132724); border: 1px solid #3d897785; }

/* ---- Corps ---- */
wframe { display: flex; flex: 1; min-height: 0; }

appmenu {
    width: 250px; min-width: 250px; background: rgb(0 0 0 / 20%); display: flex; flex-direction: column;
    padding: 12px 0; gap: 4px; overflow-y: auto;
}
appmenu:empty { display: none; }
appmenu menugroup { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); padding: 16px 22px 6px; }
appmenu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 15px; margin: 0 10px; background: #ffffff17;
    color: var(--ink); text-transform: uppercase; letter-spacing: 1px; line-height: 1; font-size: 14px; border-radius: 5px; transition: all .3s;
}
appmenu a glyph { font-size: 20px; }
appmenu a:hover { background: #63c7ff4f; }
appmenu a.active { background: #63c7ff4f; box-shadow: inset 3px 0 0 var(--accent); }

content { flex: 1; overflow-y: auto; padding: 28px 34px 70px; min-width: 0; background: rgb(0 0 0 / 40%); }

/* ---- En-tête de page ---- */
pagehead { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
pagehead h2 { font-size: 34px; text-transform: uppercase; letter-spacing: 1px; }
pagehead em { color: var(--muted); font-style: normal; }
pagehead .primary, pagehead a.primary { margin-left: auto; }
pagehead > a:not(.primary) { color: var(--accent); }

a.primary, .primary {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 5px;
    color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; cursor: pointer; border: 1px solid #3d897785;
    background-image: linear-gradient(90deg, #1f5d56, #132724); transition: filter .3s;
}
a.primary:hover, .primary:hover { filter: brightness(1.25); }

subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
subnav a { padding: 8px 16px; border-radius: 20px; background: #ffffff17; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
subnav a.active { background: #63c7ff4f; }

empty { display: block; padding: 40px; text-align: center; color: var(--muted); background: var(--card2); border-radius: 8px; border: 1px dashed var(--line); }
p.hint { color: var(--muted); margin: -10px 0 18px; max-width: 780px; line-height: 1.55; }

@media (max-width: 880px) {
    appmenu { position: fixed; left: 0; top: 60px; bottom: 0; z-index: 30; transform: translateX(-100%); transition: transform .25s; background: #1d242a; }
    appmenu:target { transform: translateX(0); }
    apptop .burger { display: flex; }
    apptop companyswitch span, apptop topactions .user span { display: none; }
    content { padding: 18px; }
    pagehead h2 { font-size: 26px; }
}