/* =====================================================================
   Community Staff — thème « Diamond / verre liquide »
   Utilisé par la page de connexion et l'accueil (et par toute page qui
   déclare $theme = 'glass' avant d'inclure includes/header.php).

   Deux ambiances : sombre (par défaut) et claire, choisies avec le bouton
   « Thème clair / Thème sombre » (voir assets/theme-switch.js).
   ===================================================================== */

/* ---------- Thème sombre (défaut) ---------- */
:root {
    /* Teinte principale du thème (0-360). Modifiable dans « Mon profil » :
       212 = bleu Diamond, 265 = violet, 330 = rose, 150 = vert… */
    --h: 212;
    color-scheme: dark;
    --bg: hsl(calc(var(--h) + 6) 65% 12%);
    --blue: hsl(calc(var(--h) - 7) 77% 61%);
    --blue-light: hsl(calc(var(--h) - 9) 79% 71%);
    --blue-deep: hsl(calc(var(--h) + 1) 62% 49%);
    --accent-text: hsl(calc(var(--h) - 9) 79% 71%);
    --text: hsl(calc(var(--h) - 2) 40% 98%);
    --text-soft: hsl(calc(var(--h) + 3) 32% 84%);
    --text-faint: hsl(calc(var(--h) + 2) 31% 87% / .55);

    /* Verre très transparent : on voit nettement le fond à travers */
    --glass: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .015) 55%, rgba(255, 255, 255, .04));
    --glass-hover: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .07));
    --glass-blur: blur(14px) saturate(170%);
    --glass-border: rgba(255, 255, 255, .2);
    --glass-edge: rgba(255, 255, 255, .55);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 18px 40px hsl(calc(var(--h) + 10) 83% 5% / .35);
    --glass-shine: rgba(255, 255, 255, .1);

    --pill-bg: rgba(255, 255, 255, .06);
    --pill-border: rgba(255, 255, 255, .14);
    --input-bg: hsl(calc(var(--h) + 7) 70% 8% / .28);
    --input-border: rgba(255, 255, 255, .16);
    --input-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
    --placeholder: hsl(calc(var(--h) + 2) 25% 70%);
    --ico-color: hsl(calc(var(--h) - 9) 79% 81%);
    --ico-bg: hsl(calc(var(--h) - 7) 77% 61% / .2);
    --title-shadow: 0 2px 20px hsl(calc(var(--h) + 10) 83% 5% / .5);

    --blob-1: hsl(calc(var(--h) + 3) 66% 49%);
    --blob-2: hsl(calc(var(--h) - 11) 67% 54%);
    --blob-opacity: .75;
    --chat-text: hsl(calc(var(--h) + 2) 33% 35%);
    --chat-opacity: .25;
    --liquid-opacity: .55;

    --error-bg: linear-gradient(160deg, rgba(255, 92, 110, .2), rgba(255, 92, 110, .07));
    --error-border: rgba(255, 130, 140, .4);
    --error-text: #ffd6da;
    --error-title: #fff;
    --error-icon-bg: rgba(255, 92, 110, .9);
    --success-bg: linear-gradient(160deg, rgba(64, 214, 150, .2), rgba(64, 214, 150, .07));
    --success-border: rgba(110, 230, 170, .4);
    --success-text: #d5fbe9;
    --success-icon-bg: rgba(40, 190, 125, .95);
    --warn-bg: linear-gradient(160deg, rgba(255, 186, 74, .2), rgba(255, 186, 74, .07));
    --warn-border: rgba(255, 200, 110, .45);
    --warn-text: #ffefd2;
    --warn-icon-bg: rgba(240, 160, 40, .95);
}

/* ---------- Thème clair ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: hsl(calc(var(--h) + 1) 77% 95%);
    --blue-light: hsl(calc(var(--h) - 3) 67% 51%);
    --accent-text: hsl(calc(var(--h) - 2) 72% 44%);
    --text: hsl(calc(var(--h) + 6) 59% 13%);
    --text-soft: hsl(calc(var(--h) + 6) 27% 38%);
    --text-faint: hsl(calc(var(--h) + 6) 59% 13% / .45);

    --glass: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .26));
    --glass-hover: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .24) 55%, rgba(255, 255, 255, .36));
    --glass-border: rgba(255, 255, 255, .75);
    --glass-edge: rgba(255, 255, 255, .95);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 18px 40px hsl(calc(var(--h) + 3) 68% 37% / .14);
    --glass-shine: rgba(255, 255, 255, .45);

    --pill-bg: rgba(255, 255, 255, .45);
    --pill-border: rgba(255, 255, 255, .85);
    --input-bg: rgba(255, 255, 255, .62);
    --input-border: hsl(calc(var(--h) + 3) 68% 37% / .14);
    --input-shadow: inset 0 1px 3px hsl(calc(var(--h) + 3) 68% 37% / .1);
    --placeholder: hsl(calc(var(--h) + 4) 20% 57%);
    --ico-color: hsl(calc(var(--h) - 2) 72% 44%);
    --ico-bg: hsl(calc(var(--h) - 7) 77% 61% / .18);
    --title-shadow: 0 2px 16px rgba(255, 255, 255, .7);

    --blob-1: hsl(calc(var(--h) - 1) 82% 72%);
    --blob-2: hsl(calc(var(--h) - 12) 81% 79%);
    --blob-opacity: .7;
    --chat-text: hsl(calc(var(--h) + 2) 40% 80%);
    --chat-opacity: .45;
    --liquid-opacity: .5;

    --error-bg: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 228, 231, .55));
    --error-border: rgba(225, 70, 90, .35);
    --error-text: #7a1f2b;
    --error-title: #a3142a;
    --error-icon-bg: #e2445c;
    --success-bg: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(220, 250, 235, .55));
    --success-border: rgba(30, 160, 100, .35);
    --success-text: #135c3a;
    --success-icon-bg: #1fa56a;
    --warn-bg: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 240, 214, .6));
    --warn-border: rgba(210, 140, 30, .4);
    --warn-text: #6b4508;
    --warn-icon-bg: #e0920f;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.theme-glass {
    background: var(--bg);
    color: var(--text);
    font-family: Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color .5s, color .5s;
}
.theme-glass a { color: var(--blue-light); text-decoration: none; }
.theme-glass a:hover { color: var(--text); }
.theme-glass :focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

/* ---------- Fond animé ---------- */
#bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(130px); opacity: var(--blob-opacity); transition: background-color .6s, opacity .6s; }
.bg-blob.b1 { left: 10%; top: 20%; width: 560px; height: 560px; background: var(--blob-1); animation: floaty 40s ease-in-out infinite; }
.bg-blob.b2 { right: 10%; top: 40%; width: 500px; height: 500px; background: var(--blob-2); opacity: calc(var(--blob-opacity) * .8); animation: floaty 55s ease-in-out infinite reverse; }
.bg-chat { position: absolute; top: 110px; width: 230px; opacity: var(--chat-opacity); }
.bg-chat.left { left: 24px; }
.bg-chat.right { right: 24px; }
.bg-chat-track { display: flex; flex-direction: column; gap: 18px; }
.bg-chat.left .bg-chat-track { animation: feedUp 160s linear infinite; }
.bg-chat.right .bg-chat-track { animation: feedDown 190s linear infinite; }
.bg-msg { display: flex; gap: 10px; align-items: center; }
.bg-msg span { flex: none; height: 9px; border-radius: 5px; }
.bg-msg .av { width: 24px; height: 24px; border-radius: 50%; }
.bg-msg .txt { background: var(--chat-text); }
.bg-bubble { position: absolute; bottom: -60px; border-radius: 50%; animation: rise linear infinite; }

/* Formes « liquides » brillantes qui flottent derrière le verre */
.bg-liquid { position: absolute; opacity: var(--liquid-opacity); filter: drop-shadow(0 20px 40px hsl(calc(var(--h) + 7) 78% 35% / .35)); }
.bg-liquid.l1 { width: 460px; left: -120px; top: 8%; animation: drift 46s ease-in-out infinite; }
.bg-liquid.l2 { width: 400px; right: -110px; bottom: -60px; animation: drift 58s ease-in-out infinite reverse; }

@keyframes floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -40px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(40px, -30px) rotate(12deg); } }
@keyframes feedUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes feedDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1); opacity: 0; } }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes alertIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    #bg *, .card, .login-card, .login .head, .alert { animation: none !important; }
}

/* ---------- Verre liquide ---------- */
.glass {
    position: relative;
    overflow: hidden;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: background .4s, border-color .4s, box-shadow .4s;
}
/* reflet en haut à gauche */
.glass::before {
    content: "";
    position: absolute;
    left: -30%;
    top: -60%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glass-shine), transparent 65%);
    pointer-events: none;
}
/* liseré lumineux sur le bord, plus fort en haut — l'effet « liquide » */
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(170deg, var(--glass-edge), transparent 35%, transparent 70%, rgba(255, 255, 255, .18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
.brand { font-weight: 800; letter-spacing: .01em; }
.brand .c { color: var(--accent-text); }
.logo { object-fit: contain; filter: drop-shadow(0 0 12px hsl(calc(var(--h) - 7) 77% 61% / .6)); }

/* ---------- Bouton thème clair / sombre ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .3s, transform .3s;
    white-space: nowrap;
}
.theme-toggle:hover { background: var(--glass-hover); transform: translateY(-1px); }
.theme-toggle i { font-size: 15px; }
.theme-toggle-floating { position: fixed; top: 20px; right: 20px; z-index: 20; }

/* ---------- En-tête ---------- */
.header {
    position: sticky;
    top: 18px;
    z-index: 10;
    margin: 18px 40px 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
    border-radius: 28px;
}
.header .left { display: flex; align-items: center; gap: 12px; font-size: 24px; color: var(--text); }
.header .left:hover { color: var(--text); }
.header .left img { width: 48px; height: 48px; }
.header .title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    white-space: nowrap;
}
.header .title .c { color: var(--accent-text); }
.header .user { justify-self: end; display: flex; align-items: center; gap: 14px; }
.header .user-info { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--text-soft); }
.header .user-info strong { font-size: 14px; color: var(--text); }
.header .user-info .clock { font-variant-numeric: tabular-nums; }

.avatar {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .5);
    background: hsl(calc(var(--h) + 2) 51% 29%);
    box-shadow: 0 0 0 3px hsl(calc(var(--h) - 7) 77% 61% / .35);
    transition: box-shadow .3s;
}
a:hover > .avatar { box-shadow: 0 0 0 3px hsl(calc(var(--h) - 9) 79% 71% / .8); }

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: background .3s;
}
.theme-glass .icon-btn { color: var(--text); }
.icon-btn:hover { background: var(--glass-hover); }

/* ---------- Accueil ---------- */
.hero { text-align: center; padding: 40px 20px 0; }
.hero h1, .hero h2 { margin: 0 0 10px; font-size: 36px; text-shadow: var(--title-shadow); }
.hero p { margin: 0; font-size: 17px; color: var(--text-soft); }

.tile-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 24px 60px;
}
.card {
    flex: 0 1 270px;
    min-height: 150px;
    padding: 18px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    transition: transform .4s, background .4s;
    animation: appear .5s ease-out both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.theme-glass .card { color: var(--text); }
.card:hover { transform: translateY(-3px); background: var(--glass-hover); }
.card .ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ico-color);
    background: var(--ico-bg);
    border: 1px solid var(--pill-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.card h3 { margin: 0; font-size: 17px; }
.card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.card.admin .ico { color: #e8a520; background: rgba(255, 196, 79, .18); }
.card.disabled { opacity: .3; pointer-events: none; }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; z-index: 1; text-align: center; padding: 18px 20px 26px; font-size: 12px; color: var(--text-faint); }
.site-footer p { margin: 0; }

/* ---------- Connexion ---------- */
.login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 40px 20px; }
.login .head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: appear .6s ease-out both; }
.login .head img { width: 84px; height: 84px; }
.login .head .brand { font-size: 34px; text-shadow: var(--title-shadow); }
.login .head p { margin: 0; font-size: 15px; color: var(--text-soft); }

.login-card {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    animation: appear .6s .1s ease-out both;
}
.login-card.shake { animation: shake .4s ease-in-out; }
.login-card h2 { margin: 0; text-align: center; font-size: 26px; }

.field { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 700; }
.field input {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    border-radius: 16px;
    font: inherit;
    font-weight: 400;
    font-size: 16px;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    box-shadow: var(--input-shadow);
    outline: none;
    transition: border-color .3s, box-shadow .3s, background .3s;
}
.field input::placeholder { color: var(--placeholder); }
.field input:focus { border-color: var(--blue-light); box-shadow: var(--input-shadow), 0 0 0 4px hsl(calc(var(--h) - 7) 77% 61% / .25); }
.field input[aria-invalid="true"] { border-color: var(--error-border); box-shadow: var(--input-shadow), 0 0 0 4px rgba(255, 92, 110, .15); }
.field input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
    caret-color: var(--text);
}

.password-wrap { position: relative; display: flex; }
.password-wrap input { flex: 1; padding-right: 52px; }
.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 15px;
}
.password-toggle:hover { color: var(--text); background: var(--pill-bg); }

.btn {
    height: 52px;
    margin-top: 4px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, hsl(calc(var(--h) - 8) 79% 64%), var(--blue-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px hsl(calc(var(--h) + 1) 62% 49% / .4);
    transition: transform .3s, box-shadow .3s, opacity .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 36px hsl(calc(var(--h) + 1) 62% 49% / .55); }
.btn:disabled { opacity: .75; cursor: wait; transform: none; }
.btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Messages (erreur / avertissement / succès) ---------- */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: -4px 0 0;
    padding: 13px 40px 13px 14px;
    border-radius: 16px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    animation: alertIn .25s ease-out;
    text-align: left;
}
.alert[hidden] { display: none; }
.alert-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: var(--error-icon-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-title { font-size: 14px; font-weight: 800; color: var(--error-title); }
.alert-text { font-size: 13px; line-height: 1.45; }
.alert-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}
.alert-close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

.alert.is-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.alert.is-warning .alert-icon { background: var(--warn-icon-bg); }
.alert.is-warning .alert-title { color: inherit; }
.alert.is-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert.is-success .alert-icon { background: var(--success-icon-bg); }
.alert.is-success .alert-title { color: inherit; }

.forgot { text-align: center; font-size: 14px; color: var(--text-soft); }
.forgot summary { cursor: pointer; list-style: none; color: var(--text-soft); }
.forgot summary::-webkit-details-marker { display: none; }
.forgot summary:hover { color: var(--text); }
.forgot p { margin: 10px 0 0; line-height: 1.5; }
.forgot strong { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .header .theme-toggle .label { display: none; }
    .header .theme-toggle { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
    .header { grid-template-columns: 1fr auto; margin: 12px; top: 12px; padding: 14px 18px; }
    .header .title { display: none; }
    .bg-chat { display: none; }
    .bg-liquid.l1 { width: 300px; }
    .bg-liquid.l2 { width: 260px; }
}
@media (max-width: 560px) {
    .header .left { font-size: 18px; }
    .header .left img { width: 38px; height: 38px; }
    .header .user { gap: 10px; }
    .header .user-info { display: none; }
    .hero h1, .hero h2 { font-size: 28px; }
    .tile-grid { gap: 14px; padding: 28px 16px 40px; }
    .card { flex-basis: calc(50% - 7px); min-height: 130px; padding: 14px; border-radius: 20px; }
    .card p { display: none; }
    .login { padding-top: 76px; }
    .login-card { padding: 28px 22px; }
    .login .head .brand { font-size: 28px; }
    .theme-toggle-floating { top: 14px; right: 14px; }
}

/* ---------- Correctifs en-tête (largeurs intermédiaires) ---------- */
.header { grid-template-columns: auto minmax(0, 1fr) auto; }
.header > .title { justify-self: center; }
.header .brand, .header .user-info { white-space: nowrap; }
.header .user > *, .header .left > * { flex: none; }
@media (max-width: 1280px) {
    .header .user-info { display: none; }
}
@media (max-width: 900px) {
    .header { grid-template-columns: 1fr auto; }
}
@media (max-width: 420px) {
    .header .left .brand { display: none; }
}

/* =====================================================================
   Préférences d'affichage (réglées dans « Mon profil »)
   ===================================================================== */

/* Verre « givré » : plus opaque, plus lisible */
:root[data-theme][data-glass="frosted"] {
    --glass: linear-gradient(160deg, hsl(calc(var(--h) + 6) 45% 22% / .78), hsl(calc(var(--h) + 6) 50% 16% / .7));
    --glass-hover: linear-gradient(160deg, hsl(calc(var(--h) + 6) 45% 28% / .85), hsl(calc(var(--h) + 6) 50% 20% / .78));
    --glass-blur: blur(26px) saturate(150%);
    --surface: hsl(calc(var(--h) + 6) 40% 24% / .6);
    --surface-strong: hsl(calc(var(--h) + 6) 40% 30% / .65);
}
:root[data-theme="light"][data-glass="frosted"] {
    --glass: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .7));
    --glass-hover: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .82));
    --surface: rgba(255, 255, 255, .72);
    --surface-strong: rgba(255, 255, 255, .85);
}

/* Fond : « épuré » = lueurs + formes liquides ; « minimal » = lueurs seules */
:root[data-bg="simple"] .bg-chat,
:root[data-bg="simple"] .bg-bubble,
:root[data-bg="minimal"] .bg-chat,
:root[data-bg="minimal"] .bg-bubble,
:root[data-bg="minimal"] .bg-liquid { display: none; }

/* Animations coupées */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* Lien d'accueil (logo + nom) : léger effet au survol */
.header .home-link { border-radius: 16px; padding: 4px 10px 4px 4px; margin-left: -4px; transition: background .25s; }
.header .home-link:hover { background: var(--pill-bg); }
.header .home-link:hover .logo { transform: rotate(-8deg) scale(1.06); }
.header .home-link .logo { transition: transform .3s; }
.card > *, .login-card > * { position: relative; z-index: 1; }

/* =====================================================================
   Barres de défilement — fines, arrondies, à la couleur du thème
   ===================================================================== */
:root {
    --sb-thumb: hsl(calc(var(--h) - 5) 85% 70% / .35);
    --sb-thumb-hover: hsl(calc(var(--h) - 5) 90% 72% / .65);
    --sb-thumb-active: hsl(calc(var(--h) - 5) 95% 75% / .85);
}
:root[data-theme="light"] {
    --sb-thumb: hsl(var(--h) 55% 45% / .3);
    --sb-thumb-hover: hsl(var(--h) 65% 45% / .55);
    --sb-thumb-active: hsl(var(--h) 70% 42% / .75);
}

/* Chrome, Edge, Opera, Safari */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    min-height: 40px;
    border-radius: 999px;
    border: 3px solid transparent;
    background: var(--sb-thumb) padding-box;
    transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover) padding-box; border-width: 2px; }
::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-active) padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Zones internes (listes, panneaux, menus) : encore plus fines */
* ::-webkit-scrollbar { width: 9px; height: 9px; }
* ::-webkit-scrollbar-thumb { border-width: 2px; }

/* Firefox (ne connaît pas les règles ci-dessus) */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb-hover) transparent; }
}

/* Accueil : badge « X en live » sur la tuile Nos streamers */
.card[data-live-tile] { position: relative; }
.card .live-badge {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; color: #fff;
    background: #e91916; box-shadow: 0 6px 16px rgba(233, 25, 22, .4);
}
.card .live-badge[hidden] { display: none; }
.card .live-badge .rec { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: liveBlink 1.4s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .3; } }