.profile-guest{
    color: var(--color-muted);
    font-size: 14px;
    margin: 0;
}

.profile-content{
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.profile-content[hidden], .profile-guest[hidden]{
    display: none;
}

/* /u/{id} quand le profil est prive ou l'identifiant inconnu : gros message
centre plutot qu'une ligne discrete, volontairement identique dans les deux
cas (impossible de deviner si un lien correspond a un vrai compte). */
.user-private{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    max-width: 440px;
    margin: var(--space-xl) auto 0;
}

/* Sans ca, [hidden] (display:none par defaut du navigateur) est ecrase par le
display:flex ci-dessus, qui a la meme specificite mais vient d'une regle
d'auteur : le message resterait visible meme "cache". */
.user-private[hidden]{
    display: none;
}

.user-private-icon{
    font-size: 40px;
}

.user-private-title{
    margin: 0;
    font-size: 24px;
}

.user-private-desc{
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
}

.profile-card{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* La banniere est en arriere-plan de toute la carte (comme une photo de
couverture), pas un bloc separe : elle occupe tout l'espace du parent
positionne (.profile-card), dont la hauteur est en realite dictee par
.profile-card-row (seul enfant qui reste dans le flux). Sans classe
.banner-* (personne n'a de banniere equipee), elle reste transparente : le
fond du panneau se voit normalement, pas de rectangle qui detonne. */
.profile-banner{
    position: absolute;
    inset: 0;
}

.profile-card-row{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md);
}

/* Voile sombre uniquement quand une banniere est active (cosmetics.js
bascule .has-banner sur .profile-card) : garde le pseudo lisible par-dessus
n'importe quelle couleur de banniere, sans assombrir la carte pour rien
quand il n'y a rien derriere. */
.profile-card.has-banner .profile-card-row{
    background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .58));
}

.profile-avatar-slot{
    display: inline-flex;
    flex-shrink: 0;
}

.profile-identity{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-name{
    margin: 0;
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-since{
    color: var(--color-muted);
    font-size: 13px;
}

.profile-stats{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
}

/* Recap du dernier evenement termine ("ce que tu as gagne ce week-end") :
une section .panel normale, juste un bouton de fermeture dans son en-tete
(voir .panel-header, deja en flex/justify-content:space-between). */
.event-recap-panel{
    margin-bottom: var(--space-lg);
}

.event-recap-close{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-panel-border);
    background-color: transparent;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.event-recap-close:hover{
    color: var(--color-text);
    border-color: var(--color-text);
}

.profile-stats .stat-value{
    font-size: 24px;
}

.achievement-group{
    margin-top: var(--space-lg);
}

.achievement-group-title{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-panel-border);
    font-size: 14px;
}

.achievement-group-count{
    color: var(--color-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.achievements-grid{
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.achievement-card{
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-bg);
    min-width: 0;
}

.achievement-card.locked{
    border-color: var(--color-panel-border);
    opacity: .7;
}

.achievement-card.locked .achievement-icon{
    filter: grayscale(1);
}

.achievement-icon{
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.achievement-body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.achievement-name{
    font-weight: 700;
    font-size: 14px;
}

.achievement-description{
    color: var(--color-muted);
    font-size: 12px;
}

.achievement-status{
    color: var(--color-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.achievement-bar{
    display: block;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-panel-border);
    overflow: hidden;
    margin-top: 2px;
}

.achievement-bar-fill{
    display: block;
    height: 100%;
    background-color: var(--color-twitch);
}

.profile-insights{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.profile-insights .panel{
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.profile-insights h3{
    margin: 0;
}

.next-reward{
    margin: 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-bg);
    font-size: 14px;
}

.next-reward-detail{
    color: var(--color-muted);
    font-size: 13px;
}

.next-achievements{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.next-achievement{
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.week-summary{
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.week-total{
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.week-caption{
    color: var(--color-muted);
    font-size: 12px;
}

.week-chart{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-sm);
}

.week-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.week-value{
    height: 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.week-track{
    width: 100%;
    height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--color-muted);
}

.week-bar{
    width: min(70%, 32px);
    background-color: var(--color-twitch);
    border-radius: 4px 4px 0 0;
    opacity: .55;
    transition: opacity .1s ease;
}

.week-bar.empty{
    height: 2px;
    background-color: var(--color-muted);
    border-radius: 0;
}

.week-col.today .week-bar:not(.empty){
    opacity: 1;
}

.week-col:hover .week-bar:not(.empty), .week-col:focus .week-bar:not(.empty){
    opacity: 1;
}

.week-day{
    font-size: 11px;
    color: var(--color-muted);
    text-transform: capitalize;
}

.week-col.today .week-day{
    color: var(--color-text);
    font-weight: 700;
}

.source-chips{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.source-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    font-size: 12px;
    color: var(--color-muted);
}

.source-chip strong{
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.achievements-filter{
    flex-wrap: wrap;
}

@media (max-width: 900px){
    .profile-stats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-insights{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px){
    .profile-card{
        flex-direction: column;
        text-align: center;
    }
    .achievements-grid{
        grid-template-columns: 1fr;
    }
}

.profile-settings h3{
    margin: 0 0 var(--space-md);
}

.settings-block{
    padding: var(--space-md) 0;
}

.settings-block:first-of-type{
    padding-top: 0;
}

.settings-block:last-of-type{
    padding-bottom: 0;
}

.settings-block + .settings-block{
    border-top: 1px solid var(--color-panel-border);
}

.settings-block h4{
    margin: 0 0 var(--space-xs);
    font-size: 14px;
}

.privacy-panel{
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.privacy-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.privacy-text{
    flex: 1 1 320px;
    min-width: 0;
}

.privacy-text h4{
    margin: 0 0 var(--space-xs);
    font-size: 14px;
}

.privacy-desc{
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.switch{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.switch input{
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch-slider{
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--color-muted);
    transition: background-color .15s ease;
}

.switch-slider::after{
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    transition: transform .15s ease;
}

.switch input:checked + .switch-slider{
    background-color: var(--color-twitch);
}

.switch input:checked + .switch-slider::after{
    transform: translateX(18px);
}

.switch input:focus-visible + .switch-slider{
    outline: 2px solid var(--color-twitch);
    outline-offset: 2px;
}

.privacy-alias{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    font-size: 14px;
}

.privacy-alias[hidden], .privacy-feedback[hidden]{
    display: none;
}

.visibility-link{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 14px;
}

.visibility-link[hidden]{
    display: none;
}

/* Sans classe .auth-link (c'est un lien inline, pas un bouton) : sans ces
regles, le lien prend le bleu/violet par defaut du navigateur (fonce, encore
plus une fois visite), peu lisible sur un fond sombre. --color-accent (violet
Twitch) pose le meme souci de contraste en texte : on reste sur la couleur de
texte du theme, avec un simple soulignement pour l'affordance de lien. */
.visibility-link-url, .visibility-link-url:visited{
    color: var(--color-text);
    font-weight: 600;
    text-decoration: underline;
    word-break: break-all;
}

.visibility-link-url:hover{
    color: var(--color-accent);
}

.privacy-reroll{
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.privacy-feedback{
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}

/* Mes signalements de bugs */
.bugs-intro{
    margin: 0 0 var(--space-md) 0;
    color: var(--color-muted);
    font-size: 13px;
}

.bugs-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bug-item{
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.bug-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 4px;
}

.bug-status{
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-panel-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
}

.bug-status-planned, .bug-status-in_progress{
    border-color: #f59e0b;
    color: #f59e0b;
}

.bug-status-done{
    border-color: #22c55e;
    color: #22c55e;
}

.bug-date{
    color: var(--color-muted);
    font-size: 11px;
}

.bug-message{
    margin: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.bug-reply{
    margin: var(--space-xs) 0 0 0;
    padding-left: var(--space-sm);
    border-left: 3px solid var(--color-twitch);
    color: var(--color-muted);
    font-size: 12px;
}

/* Zone de suppression du compte : mise a l'ecart visuellement (liseret rouge attenue),
sans etre alarmante au premier coup d'oeil. */
.danger-panel{
    border-left: 3px solid rgba(235, 4, 0, 0.35);
    padding-left: var(--space-md);
}

.danger-panel h4{
    color: #eb0400;
}

.danger-desc{
    margin: 0 0 var(--space-md) 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.danger-cancel{
    background: none;
    font: inherit;
    cursor: pointer;
}

.danger-open{
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid #eb0400;
    background-color: transparent;
    color: #eb0400;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.danger-confirm p{
    margin: 0 0 var(--space-sm) 0;
    font-size: 13px;
}

.danger-input{
    width: 100%;
    max-width: 260px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    margin-bottom: var(--space-sm);
}

.danger-actions{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.danger-confirm-button{
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid #eb0400;
    background-color: #eb0400;
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.danger-confirm-button:disabled{
    opacity: .5;
    cursor: not-allowed;
}

.danger-feedback{
    margin: var(--space-sm) 0 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.referral-desc{
    color: var(--color-muted);
    font-size: 13px;
    margin: 0 0 var(--space-md) 0;
}

.referral-link-row{
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.referral-link-input{
    flex: 1;
    min-width: 200px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
}

.referral-feedback{
    margin: var(--space-sm) 0 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.referral-stats{
    margin: var(--space-sm) 0 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.referral-badge-download{
    margin-top: var(--space-sm);
    width: fit-content;
}

.streamer-badge-hint{
    margin: 0 0 var(--space-md) 0;
    color: var(--color-muted);
    font-size: 13px;
}

.streamer-badge-preview-wrap{
    margin-bottom: var(--space-md);
}

.streamer-badge-preview{
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

.streamer-badge-actions{
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.streamer-badge-actions[hidden]{
    display: none;
}

.streamer-badge-copy{
    font: inherit;
    background: none;
    cursor: pointer;
}

.streamer-badge-feedback{
    margin: var(--space-sm) 0 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.streamer-badge-fallback{
    width: 100%;
    max-width: 420px;
    height: 36px;
    resize: none;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    font: inherit;
    font-size: 12px;
    margin-top: var(--space-sm);
}

.streamer-badge-none{
    margin: 0 0 var(--space-md) 0;
    color: var(--color-muted);
    font-size: 13px;
}

/* --- /u/{id} : fiche publique --------------------------------------------
Contrairement a /profile (tableau de bord large, 10 tuiles/5 colonnes), la
fiche publique n'a que 8 tuiles et un seul panneau "objectifs" (pas de
"Cette semaine" a cote, lie aux points) : reprendre exactement la mise en
page de /profile y laissait des trous (5 colonnes pour 8 tuiles = ligne
finale a moitie vide) et un panneau etire pleine largeur pour 3 lignes de
contenu. Recadree plus etroite, densifiee a 4 colonnes. */
.user-profile-content{
    /* .all est en display:flex (colonne) : sans width:100%, un enfant flex
    avec margin:0 auto ne s'etire pas avant d'etre centre (contrairement au
    flux normal), il se reduit a son contenu - max-width ne servait donc a
    rien, la page restait a la largeur de son contenu le plus etroit. */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.user-stats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Repete (plutot que d'hériter d') la meme bascule que .profile-stats a
900px : une regle non conditionnelle plus bas dans le fichier l'emporterait
sinon sur celle, conditionnelle, de la media query. */
@media (max-width: 900px){
    .user-stats-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.user-next-achievements{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-md);
}