/* ═══════════════════════════════════════════════════════════════════
   tokens.css — Variables de design centralisées (DragonSins)
   Source unique de vérité pour les couleurs, fonds, textes, bordures.
   Chargé EN PREMIER sur toutes les pages (avant les autres feuilles).
   ═══════════════════════════════════════════════════════════════════ */
/* Le site n'a qu'un thème, sombre : les contrôles du navigateur (listes déroulantes ouvertes,
   cases à cocher, champs nombre et date, barres de défilement, saisie automatique) le suivent,
   même si l'appareil est réglé en thème clair. */
:root {
    /* L'avatar par défaut (pas de photo : l'initiale) — le même partout ; un groupe sans photo a le sien. */
    --ds-avatar-defaut: linear-gradient(135deg, #667eea, #764ba2);
    --ds-avatar-defaut-texte: #fff;
    --ds-avatar-groupe: linear-gradient(135deg, #4f46e5, #7c3aed);
    color-scheme: dark;
}
:root {
    /* ── Rouge (marque) ── */
    --red:        #ff2525;
    --red-dark:   #cc1f1f;
    --red-darker: #cc1f1f;
    /* Le rouge en couleur de TEXTE ou d'icône : le même, sauf quand une fête prend une teinte
       trop sombre pour se lire sur le fond (ds-fetes.css, Noël). */
    --red-texte:  var(--red);

    /* ── Fonds ── */
    --bg:          #131416;
    --box-bg:      rgb(31, 31, 31);
    --card-bg:     #1c1e21;
    --card-border: #2a2c30;
    --hover-bg:    #252830;

    /* ── Texte ── */
    --text:        #e0e0e0;
    --text-dim:    #888888;
    --text-dimmer: #555555;
    --gray:        #888888;
    --gray-dim:    #555555;

    /* ── Bordures ── */
    --border: #333333;

    /* ── Espacements fluides ──────────────────────────────────────────────
       Une seule source pour tout le site : les pages n'ont plus à calibrer
       leurs propres clamp(), et le rythme reste cohérent partout. */
    --sp-xs: clamp(2px,  0.6vw,  6px);
    --sp-sm: clamp(4px,  1.2vw, 10px);
    --sp-md: clamp(8px,  2.2vw, 16px);
    --sp-lg: clamp(12px, 3.2vw, 24px);
    --sp-xl: clamp(16px, 4.5vw, 32px);
    --sp-2xl:clamp(24px, 6vw,   48px);

    /* ── Tailles de texte fluides ── */
    --fs-xs: clamp(.56rem, 1.7vw, .68rem);
    --fs-sm: clamp(.66rem, 2.0vw, .78rem);
    --fs-md: clamp(.78rem, 2.4vw, .9rem);
    --fs-lg: clamp(.95rem, 3.2vw, 1.2rem);
    --fs-xl: clamp(1.1rem, 4vw,   1.6rem);
    --fs-2xl:clamp(1.4rem, 5.5vw, 2.2rem);

    /* ── Rayons et bordures ── */
    --r-sm: clamp(6px,  1.8vw, 10px);
    --r-md: clamp(8px,  2.4vw, 14px);
    --r-lg: clamp(12px, 3vw,   18px);
    --bw:   clamp(1px,  .3vw,  1.5px);

    /* ═══ Alias profile-* (compat profile-picture-modal.css) ═══
       Pointent vers les variables canoniques : on garde les noms pour ne pas
       réécrire les 800+ lignes, mais une seule valeur source. */
    --profile-main-color:        var(--red);
    --profile-main-color-dark:   #cc1f1f;
    --profile-main-color-darker: var(--red-dark);
    --profile-main-color-light:  rgba(255, 37, 37, 0.1);
    --profile-bg-dark:           var(--bg);
    --profile-bg-medium:         #1f1f1f;
    --profile-bg-light:          #2d2d2d;
    --profile-text-white:        #ffffff;
    --profile-text-gray:         #b0b0b0;
    --profile-text-light-gray:   #888888;
    --profile-overlay:           rgba(0, 0, 0, 0.9);
    --profile-overlay-light:     rgba(0, 0, 0, 0.7);
    --profile-border-color:      rgba(255, 255, 255, 0.1);
}

/* ──────────────────────────────────────────────
   Listes déroulantes (select) — style global cohérent
   ────────────────────────────────────────────── */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--box-bg, #1f2123);
    color: var(--text, #fff);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    font-size: .82rem;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    /* Chevron custom (gris clair, visible sur fond sombre) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.6' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
select:hover { border-color: var(--text-dim, #888); }
select:focus {
    outline: none;
    border-color: var(--red, #ff2525);
    box-shadow: 0 0 0 2px rgba(255, 37, 37, 0.15);
}
select:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Options : fond sombre (sinon blanc sur certaines plateformes) */
select option {
    background: var(--box-bg, #1f2123);
    color: var(--text, #fff);
}
/* ── ds-select : dropdown custom ── */
.ds-select { position: relative; width: 100%; }
.ds-select[hidden] { display: none !important; }
.ds-select-native {
    position: absolute !important; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; clip: rect(0 0 0 0);
}
.ds-select-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: var(--bg); color: var(--text, #fff);
    border: 1px solid var(--border, #3a3a3a); border-radius: 8px;
    padding: 9px 12px; font-size: .82rem; font-family: inherit; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-select-trigger:hover { border-color: var(--text-dim, #888); }
.ds-select-trigger:focus { outline: none; border-color: var(--red, #ff2525); box-shadow: 0 0 0 2px rgba(255,37,37,0.15); }
.ds-select-arrow { color: var(--text-dim, #888); font-size: .7rem; transition: transform .18s ease; margin-left: 10px; }
.ds-select.is-open .ds-select-arrow { transform: rotate(180deg); }
.ds-select-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
    list-style: none; margin: 0; padding: 4px;
    background: var(--bg); border: 1px solid var(--border, #3a3a3a);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
    max-height: 240px; overflow-y: auto;
    display: none;
}
.ds-select.is-open .ds-select-menu { display: block; animation: dsSelectOuvre .14s ease-out; }
@keyframes dsSelectOuvre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Plus de place en haut qu'en bas, ou débordement à droite : ds-select.js. */
.ds-select-menu.is-haut { top: auto; bottom: calc(100% + 4px); }
.ds-select.is-open .ds-select-menu.is-haut { animation-name: dsSelectOuvreHaut; }
@keyframes dsSelectOuvreHaut { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ds-select-menu.is-droite { left: auto; right: 0; }
@media (prefers-reduced-motion: reduce) { .ds-select.is-open .ds-select-menu { animation: none; } }

/* À sa taille (un filtre, un réglage dans une ligne) plutôt que sur toute
   la largeur : la liste s'élargit à son plus long libellé. */
.ds-select--auto { display: inline-block; width: auto; vertical-align: middle; max-width: 100%; }
.ds-select--auto .ds-select-trigger { white-space: nowrap; gap: 6px; }
.ds-select--auto .ds-select-menu { right: auto; min-width: 100%; width: max-content; max-width: min(320px, 90vw); }
.ds-select--auto .ds-select-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-select--auto .ds-select-menu.is-droite { left: auto; right: 0; }
.ds-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }

.ds-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.ds-select-option.is-disabled { opacity: .4; cursor: not-allowed; }
.ds-select-groupe {
    padding: 8px 12px 4px; font-size: .68rem; font-weight: 700; color: var(--text-dim, #888);
    text-transform: uppercase; letter-spacing: .04em; cursor: default;
}
.ds-select-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ds-select-option {
    padding: 9px 12px; border-radius: 7px; font-size: .82rem; color: var(--text, #fff);
    cursor: pointer; transition: background .12s ease;
}
.ds-select-option.is-highlighted { background: var(--hover-bg, rgba(255,255,255,.06)); }
.ds-select-option.is-selected { color: var(--red, #ff2525); font-weight: 600; }
.ds-select-option.is-selected.is-highlighted { background: rgba(255,37,37,0.12); }

/* ── Listes d'options de signalement (commun : profil, messages, général) ── */
.report-reasons { display: flex; flex-direction: column; gap: 5px; }
.report-reason {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    border: 1.5px solid var(--border); background: var(--bg, var(--box-bg));
    color: var(--text); font-size: .78rem; cursor: pointer;
    font-family: Verdana, sans-serif; transition: border-color .15s; text-align: left;
}
.report-reason:hover { border-color: rgba(239,68,68,.4); }
.report-reason.selected { border-color: var(--red); background: rgba(255,37,37,.06); color: var(--red-texte, var(--red)); }
.report-reason .rr-check {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--border); flex-shrink: 0; transition: all .15s;
}
.report-reason.selected .rr-check { background: var(--red); border-color: var(--red); }

/* ── Avatar de profil (commun : profile éditable + public lecture seule) ── */
.ds-avatar-wrap {
    position: relative;
    margin-top: -50px;      /* pose l'avatar à cheval sur la bannière */
    margin-bottom: -10px;   /* espace avatar → identifiant */
    display: inline-block;
}
.ds-avatar {
    width: 108px; height: 108px;
    border-radius: 50%;
    border: 4px solid var(--card-bg);
    object-fit: cover;
    background: var(--card-bg);
}
.ds-avatar-default {
    width: 108px; height: 108px;
    border-radius: 50%;
    border: 4px solid var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-avatar-defaut);
    color: #fff; font-size: 2.6rem; font-weight: 700;
}

.profile-public-info {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.profile-bio a {
    color: var(--red-texte, var(--red));
    text-decoration: none;
    word-break: break-all;   /* évite qu'une longue URL déborde */
}
.profile-bio a:hover { text-decoration: underline; }
.bio-mention {
    color: var(--red-texte, var(--red));
    text-decoration: none;
    font-weight: 600;
}
.bio-mention:hover { text-decoration: underline; }
.profile-relationships {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 10px;
}
/* ── Zone MÉTA du profil : chips homogènes (inscription, genre, date, relations) ── */
.profile-meta-section {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; align-items: center;
}
.profile-meta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--hover-bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 10px;
    font-size: .72rem; color: var(--text-dim);
}
.profile-meta-chip i { color: rgba(255,37,37,.6); font-size: .65rem; }
.profile-meta-chip--rel a {
    color: var(--red-texte, var(--red)); text-decoration: none; font-weight: 600;
}
.profile-meta-chip--rel a:hover { text-decoration: underline; }
/* ── Ligne photo + stats (en-tête profil) ── */
/* ── Ligne photo + stats (en-tête profil) ── */
/* ── Ligne photo + stats (en-tête profil) ── */
.profile-header-row {
    display: flex;
    align-items: center;   /* alignement vertical photo ↔ stats */
    gap: 24px;             /* ajustable */
    flex-wrap: wrap;     /* stats restent à côté de la photo, jamais dessous */
}

/* L'avatar-wrap avait des marges négatives pensées pour l'empilement vertical.
   Dans la ligne flex : on garde le margin-top (chevauchement du cover) mais on
   neutralise le margin-bottom négatif (qui décalait l'alignement et poussait
   les stats vers le bas). On force aussi block + flex-shrink:0. */
.profile-header-row .profile-avatar-wrap,
.profile-header-row .ds-avatar-wrap {
    display: block;
    flex-shrink: 0;
    margin-bottom: 0;      /* neutralise le -10px qui créait l'écart */
}

/* Les stats : on annule leur margin-top (elles étaient empilées avant). */
.profile-header-row .profile-stats {
    margin-top: 0;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFIL — styles communs aux deux pages (profile.html + public_profile.html)
   Source unique. Ne pas redéfinir ces classes dans les <style> inline.
   ══════════════════════════════════════════════════════════════════════════ */

.profile-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 16px; overflow: hidden; max-width: 680px; margin: 0 auto;
}
.profile-cover {
    height: 130px;
    background: linear-gradient(135deg, rgba(255,37,37,.15) 0%, transparent 50%, rgba(255,37,37,.08) 100%),
                var(--card-border);
    position: relative;
}
.profile-cover--image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.profile-cover--image::after { display: none; }
.profile-cover--color { background-image: none; }
.profile-cover::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,37,37,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,37,37,.04) 1px, transparent 1px);
    background-size: 40px 40px;
}
.profile-body { padding: 0 24px 28px; position: relative; }
.profile-actions {
    position: absolute; top: 14px; right: 24px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: flex-end;
    max-width: 60%;          /* évite qu'ils s'étalent sur toute la largeur */
}
.profile-info { margin-top: 14px; }
.profile-name {
    font-size: 1.2rem; font-weight: 700; color: var(--text); line-height: 1;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;margin: 0;
    overflow-wrap:anywhere;line-height:1.4;
}
.profile-username { font-size: .7rem; color: var(--text-dim); margin-top: 1px; }
.profile-bio {
    font-size: .82rem; color: var(--text-dim); margin-top: 12px;
    line-height: 1.6; max-width: 480px; white-space: pre-wrap; word-break: break-word;
}

.profile-stats { display: flex; gap: 24px; margin-top: 16px; }
.profile-stat  { display: flex; flex-direction: column; gap: 1px; }
.stat-count { font-size: 1rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: .68rem; color: var(--text-dim); }

/* Mobile : stats TOUJOURS à côté de la photo (pas d'empilement). */
@media (max-width: 480px) {
    .profile-actions { top: 10px; right: 16px; gap: 6px; }
    .profile-header-row .profile-stats {
        gap: 16px;             /* rapproche abonnés/abonnements */
    }
    .profile-body    { padding: 0 16px 20px; }
}
/* ── L'avatar par défaut (l'initiale, pas de photo) des avatars construits sans classe « vide » propre ──
   La même classe sert à la photo (img) et à l'initiale (span/div) : seule l'initiale prend le fond
   commun. Sélecteurs qualifiés (balise + classe) : ils l'emportent sur la règle de base de chaque
   page, chargée après. Les autres pages utilisent var(--ds-avatar-defaut) directement. */
span.lvc-avatar, span.eqp-avatar, span.nts-av, span.stg-av,
span.sty-rond-av, span.sty-auteur-av, span.sty-spectateur-av, span.sty-repartage-av,
span.stc-resultat-vide, span.rch-vide, a.stt-cmt-avatar > span, span.int-compte-avatar--vide,
div.sugg-avatar--vide, span.sugg-avatar--vide {
    background: var(--ds-avatar-defaut);
    color: var(--ds-avatar-defaut-texte);
}
a.stt-cmt-avatar > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* ── Le focus au clavier, partout ─────────────────────────────────────────
   L'élément atteint par Tab (navigation au clavier) est toujours entouré : beaucoup de boutons
   et de liens retiraient leur contour sans rien mettre à la place. Seulement :focus-visible (au
   clavier, pas au clic de la souris) ; !important : passe avant les « outline: none » des pages.
   Les champs de saisie et les listes déroulantes (select) gardent leur propre repère (bordure rouge) : le contour en plus la doublait. */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"],
       [role="menuitem"], [role="option"], [role="link"], [role="switch"], [role="slider"], label,
       input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"],
       input[type="submit"], input[type="button"], input[type="color"]):focus-visible {
    outline: 2px solid var(--red-texte, var(--red, #ff2525)) !important;
    outline-offset: 2px !important;
}
/* Sur un fond de la couleur d'accent (bouton principal, onglet actif) : un contour clair, visible. */
:where(.actif, .active, [aria-selected="true"], [aria-pressed="true"]):focus-visible {
    outline-color: var(--text, #fff) !important;
}