@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Bangers&family=Bungee&family=Caveat&family=Chakra+Petch&family=Cinzel&family=Cinzel+Decorative&family=Cookie&family=Dancing+Script&family=Exo+2&family=Great+Vibes&family=Kaushan+Script&family=Lobster&family=Monoton&family=Orbitron&family=Pacifico&family=Pirata+One&family=Rajdhani&family=Righteous&family=Sacramento&family=Satisfy&family=UnifrakturMaguntia&display=swap");

/* ========================================================
   VRADIO — STYLES GÉNÉRAUX
======================================================== */

:root {
    color-scheme: dark;
    --fond: #08080a;
    --panneau: #121014;
    --bourgogne: #650014;
    --rouge: #b00025;
    --or: #c8a45d;
    --blanc: #f7f7f7;
    --gris: #b8afb4;
    --bordure: #342830;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.champ-cache-accessibilite {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body {
    margin: 0;
    padding: 35px 20px;
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(ellipse at top, #35000b, #08080a 70%);
    color: var(--blanc);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    padding: 12px 20px;
    border: 1px solid #8a7047;
    border-radius: 7px;
    background: linear-gradient(135deg, #650014, #b00025);
    color: var(--blanc);
    cursor: pointer;
    font-weight: bold;
}

button:hover:not(:disabled) {
    background: var(--rouge);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input,
textarea,
select {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border: 1px solid #594750;
    border-radius: 7px;
    background: var(--fond);
    color: var(--blanc);
}

textarea {
    resize: vertical;
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

:where(button, input, textarea, select, a, summary):focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 3px;
}

/* ========================================================
   CONNEXION ET INSCRIPTION
======================================================== */

.page-connexion {
    width: min(480px, 100%);
    margin: auto;
}

.entete {
    margin-bottom: 30px;
    text-align: center;
}

.entete h1 {
    margin: 10px 0;
    font-size: 42px;
    letter-spacing: 3px;
}

.entete > p:last-child {
    color: var(--gris);
}

.sur-titre {
    color: var(--or);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.carte {
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid #59452f;
    border-top: 3px solid var(--or);
    border-radius: 12px;
    background: #111013;
}

.carte h2 {
    margin-top: 0;
}

form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

label {
    font-size: 13px;
    font-weight: bold;
}

.note {
    color: var(--gris);
    font-size: 12px;
}

footer {
    text-align: center;
    color: var(--gris);
    font-size: 11px;
}

#message:empty {
    display: none;
}

#message:not(:empty) {
    padding: 12px 18px;
    border: 1px solid #754252;
    border-radius: 8px;
    background: #35111e;
    color: #ffe6d5;
    overflow-wrap: anywhere;
}

/* ========================================================
   MODE CONNECTÉ
======================================================== */

body:has(.page-connectee) {
    padding: 0;
    background: var(--fond);
}

.page-connexion.page-connectee {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.page-connectee > .entete {
    display: none;
}

.page-connectee > footer {
    flex-shrink: 0;
    margin: 0;
    padding: 5px;
    border-top: 1px solid var(--bordure);
    background: #0b090d;
}

.page-connectee > footer p {
    margin: 0;
}

.page-connectee > #message:not(:empty) {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}

.salon-vradio {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #342830;
    border-radius: 18px;
    box-shadow: 0 10px 35px #0008;
    background: var(--fond);
}

/* ========================================================
   BARRE DU SALON
======================================================== */

.barre-salon {
    position: relative;
    z-index: 20;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 22px;
    border-bottom: 1px solid #6b5037;
    background: linear-gradient(100deg, #281018, #121014);
}

.barre-salon > div:first-child {
    min-width: 0;
}

.barre-salon .sur-titre {
    margin: 0;
    font-size: 9px;
}

.barre-salon h2 {
    margin: 2px 0 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.compte-salon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.compte-salon button {
    padding: 8px 12px;
    background: #1a1217;
    font-size: 11px;
}

.compte-salon button:hover:not(:disabled) {
    background: #481326;
}

/* ========================================================
   PETIT MENU
======================================================== */

.menu-salon {
    position: relative;
    flex-shrink: 0;
}

.bouton-menu-salon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #8a7047;
    border-radius: 7px;
    background: #1a1217;
    color: var(--blanc);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.bouton-menu-salon::-webkit-details-marker {
    display: none;
}

.bouton-menu-salon::after {
    content: "▾";
    color: var(--or);
}

.menu-salon[open] > .bouton-menu-salon::after {
    content: "▴";
}

.bouton-menu-salon:hover,
.menu-salon[open] > .bouton-menu-salon {
    border-color: var(--or);
    background: #481326;
}

.options-menu-salon {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 230px;
    max-width: calc(100vw - 28px);
    max-height: 65vh;
    max-height: 65dvh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #8a7047;
    border-radius: 10px;
    background: #151015;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
    scrollbar-color: #775436 #151015;
}

.menu-salon:not([open]) > .options-menu-salon {
    display: none;
}

.compte-salon .options-menu-salon > button {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.compte-salon .options-menu-salon > button:hover:not(:disabled) {
    border-color: #594750;
    background: #481326;
    color: #e0c27a;
}

.compte-salon .options-menu-salon > #deconnexion {
    margin-top: 5px;
    border-top: 1px solid var(--bordure);
    color: #efb0bf;
}

/* ========================================================
   GRILLE ET COLONNE DE GAUCHE
======================================================== */

.grille-salon {
    display: grid;
    flex: 1;
    grid-template-columns: 180px minmax(0, 1fr) 230px;
    min-width: 0;
    min-height: 0;
}

.navigation-salon {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 14px;
    border-right: 1px solid var(--bordure);
    background: #171118;
}

.navigation-salon h3 {
    margin: 8px 0 25px;
    color: var(--or);
    font-size: 22px;
    letter-spacing: 2px;
}

.salon-selectionne {
    padding: 11px 13px;
    border-left: 3px solid var(--or);
    border-radius: 5px;
    background: #481326;
    font-size: 13px;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.navigation-salon .note {
    margin-top: 25px;
}

/* ========================================================
   LECTEUR VRADIO
======================================================== */

.lecteur-vradio {
    min-width: 0;
    margin-top: 24px;
    padding: 14px;
    border: 1px solid #705335;
    border-radius: 10px;
    background: linear-gradient(145deg, #281018, #111013);
}

.entete-lecteur {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entete-lecteur > div {
    min-width: 0;
}

.icone-radio {
    flex-shrink: 0;
    font-size: 25px;
}

.lecteur-vradio .sur-titre {
    margin: 0;
    font-size: 8px;
    letter-spacing: 1px;
}

.lecteur-vradio #titre-radio {
    margin: 3px 0 0;
    color: var(--blanc);
    font-size: 15px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.statut-radio {
    margin: 12px 0;
    color: var(--gris);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.radio-en-direct .statut-radio {
    color: #a3e3b1;
}

#ecouter-radio {
    width: 100%;
    padding: 9px 10px;
    font-size: 12px;
}

.volume-radio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
}

.volume-radio label {
    color: var(--gris);
    font-size: 10px;
}

.volume-radio output {
    color: var(--or);
    font-size: 10px;
    white-space: nowrap;
}

.volume-radio input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--or);
    cursor: pointer;
}

/* ========================================================
   DISCUSSION ET MESSAGES
======================================================== */

.conversation {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--fond);
}

.bandeau-conversation {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--bordure);
    background: #141016;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#etat-tchat {
    color: #dbc394;
}

.messages-tchat {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    background-color: #080808;
    scrollbar-color: #775436 #111;
}

.message-tchat {
    position: relative;
    margin: 0 0 8px;
    padding: 10px 14px;
    border-left: 2px solid rgba(200, 164, 93, 0.25);
    border-radius: 5px;
    background: rgba(8, 8, 12, 0.82);
    overflow-wrap: anywhere;
}

.message-tchat.mon-message {
    border-left-color: var(--or);
    background: rgba(38, 10, 20, 0.83);
}

.message-tchat:has(.signaler-message) {
    padding-bottom: 36px;
}

.entete-message {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.entete-message time {
    color: #b7adb3;
    font-size: 10px;
}

.message-tchat p {
    margin: 4px 0 0;
    color: #f7f4f1;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ========================================================
   MESSAGE ÉPINGLÉ — ÉTAPE 8
======================================================== */

.annonce-epinglee {
    flex-shrink: 0;
    min-width: 0;
    max-height: 25vh;
    max-height: 25dvh;
    overflow-y: auto;
    padding: 12px 18px;
    border-bottom: 1px solid var(--or);
    border-left: 4px solid var(--or);
    background: linear-gradient(110deg, #332515, #281018);
    scrollbar-color: #775436 #281018;
}

.annonce-epinglee h3 {
    margin: 0 0 6px;
    color: #ffe2a6;
    font-size: 13px;
}

#contenu-epingle {
    margin: 0;
    color: var(--blanc);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#auteur-epingle {
    margin: 7px 0 0;
    font-size: 10px;
    overflow-wrap: anywhere;
}

#texte-epingle {
    min-height: 140px;
    max-height: 300px;
}

#formulaire-epingle .note {
    margin: 0;
}

#formulaire-epingle button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

#retirer-epingle {
    border-color: #73515b;
    background: #281018;
    color: #efb0bf;
}

#retirer-epingle:hover:not(:disabled) {
    background: #481326;
}

#actualiser-epingle {
    background: #21141d;
    font-size: 12px;
}

#actualiser-epingle:hover:not(:disabled) {
    background: #481326;
}

.compte-salon #gerer-epingle {
    color: #ffe2a6;
    white-space: normal;
}

/* ========================================================
   BLOQUER ET IGNORER — ÉTAPE 9
======================================================== */

.message-tchat.message-membre-masque {
    display: none !important;
}

.compte-salon #gerer-ignores {
    white-space: normal;
    overflow-wrap: anywhere;
}

#membre-ignores {
    margin-top: 8px;
}

.actions-ignores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.actions-ignores button {
    flex: 1 1 160px;
    min-width: 0;
    white-space: normal;
}

#bloquer-membre-salon {
    border-color: #73515b;
    background: #281018;
    color: #efb0bf;
}

#bloquer-membre-salon:hover:not(:disabled) {
    background: #481326;
}

.panneau-ignores h3 {
    margin: 22px 0 12px;
    color: var(--or);
    font-size: 15px;
}

#liste-ignores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#liste-ignores > .note {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--bordure);
    border-radius: 8px;
}

.ligne-ignore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #21141d;
}

.ligne-ignore > span {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--blanc);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ligne-ignore > button {
    padding: 7px 10px;
    font-size: 11px;
    white-space: normal;
}

#statut-ignores:not(:empty) {
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid #705335;
    border-radius: 8px;
    background: #281018;
    color: #e0c27a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* ========================================================
   STATUT PERSONNEL — ÉTAPE 10
======================================================== */

.compte-salon #mon-statut {
    white-space: normal;
    overflow-wrap: anywhere;
}

#formulaire-statut .note {
    margin: 0;
    line-height: 1.6;
}

#enregistrer-statut {
    width: 100%;
    white-space: normal;
}

#liste-membres .badge-statut-personnel {
    display: inline-block;
    max-width: 100%;
    margin-top: 7px;
    padding: 3px 7px;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: #111013;
    color: var(--gris);
    font-size: 10px;
    font-weight: normal;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

#liste-membres .badge-statut-personnel[data-statut="disponible"] {
    color: #a3e3b1;
    border-color: #354d3d;
}

#liste-membres .badge-statut-personnel[data-statut="absent"] {
    color: #ffe2a6;
    border-color: #705335;
}

#liste-membres .badge-statut-personnel[data-statut="ecoute"] {
    color: #c4b5fd;
    border-color: #594274;
}

#information-statut:not(:empty) {
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid #705335;
    border-radius: 8px;
    background: #281018;
    color: #e0c27a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* ========================================================
   MENTIONS @PSEUDO
======================================================== */

.message-tchat.message-mention {
    border-left: 4px solid var(--or);
    background: rgba(89, 58, 15, 0.88);
    box-shadow: inset 0 0 0 1px rgba(200, 164, 93, 0.35);
}

.message-tchat.message-mention:focus {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

.compte-salon #son-mentions[aria-pressed="false"] {
    color: var(--gris);
    border-color: #594750;
}

#avertissement-mention {
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--or);
    border-radius: 7px;
    background: #332515;
    color: #ffe2a6;
    font-size: 11px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

#avertissement-mention:hover:not(:disabled) {
    background: #52391c;
}

.annonce-mention {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ========================================================
   RÉACTIONS AUX MESSAGES
======================================================== */

.reactions-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 10px;
}

.message-tchat .bouton-reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 38px;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #594750;
    border-radius: 18px;
    background: #171118;
    color: var(--blanc);
    font-size: 15px;
    font-weight: normal;
    line-height: 1.2;
}

.message-tchat .bouton-reaction:hover:not(:disabled) {
    border-color: var(--or);
    background: #481326;
}

.message-tchat .bouton-reaction[aria-pressed="true"] {
    border-color: var(--or);
    background: #493219;
    box-shadow: inset 0 0 0 1px rgba(200, 164, 93, 0.3);
}

.message-tchat .bouton-reaction:disabled {
    cursor: default;
    opacity: 0.55;
}

.compteur-reaction {
    color: #ffe2a6;
    font-size: 11px;
    font-weight: bold;
}

.statut-reaction {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--gris);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.statut-reaction:empty {
    display: none;
}

/* ========================================================
   PSEUDOS, EMOJIS ET PHOTOS
======================================================== */

.pseudo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    color: #eee7ed;
    font-size: 13px;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.pseudo-proprio,
.pseudo-dj {
    color: #e0c27a;
}

.avatar-profil {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: #21141d;
    font-size: 18px;
    line-height: 1;
}

.photo-avatar-profil {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
}

.nom-profil {
    min-width: 0;
    max-width: 100%;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Même ordre que PALETTE_PROFIL dans tchat.js */

.couleur-profil-0 { color: #eee7ed; }
.couleur-profil-1 { color: #e0c27a; }
.couleur-profil-2 { color: #ffb3c6; }
.couleur-profil-3 { color: #c4b5fd; }
.couleur-profil-4 { color: #93c5fd; }
.couleur-profil-5 { color: #86efac; }
.couleur-profil-6 { color: #67e8f9; }
.couleur-profil-7 { color: #fdba74; }
.couleur-profil-8 { color: #ffffff; }
.couleur-profil-9 { color: #fef08a; }
.couleur-profil-10 { color: #fde68a; }
.couleur-profil-11 { color: #f9a8d4; }
.couleur-profil-12 { color: #f0abfc; }
.couleur-profil-13 { color: #d8b4fe; }
.couleur-profil-14 { color: #a5b4fc; }
.couleur-profil-15 { color: #bfdbfe; }
.couleur-profil-16 { color: #7dd3fc; }
.couleur-profil-17 { color: #a5f3fc; }
.couleur-profil-18 { color: #99f6e4; }
.couleur-profil-19 { color: #a7f3d0; }
.couleur-profil-20 { color: #bef264; }
.couleur-profil-21 { color: #d9f99d; }
.couleur-profil-22 { color: #fecaca; }
.couleur-profil-23 { color: #fda4af; }
.couleur-profil-24 { color: #ff80ab; }
.couleur-profil-25 { color: #ff99ff; }
.couleur-profil-26 { color: #e5c0ff; }
.couleur-profil-27 { color: #b388ff; }
.couleur-profil-28 { color: #82b1ff; }
.couleur-profil-29 { color: #80d8ff; }
.couleur-profil-30 { color: #84ffff; }
.couleur-profil-31 { color: #64ffda; }
.couleur-profil-32 { color: #b9f6ca; }
.couleur-profil-33 { color: #ccff90; }
.couleur-profil-34 { color: #ffff8d; }
.couleur-profil-35 { color: #ffe57f; }
.couleur-profil-36 { color: #ffd180; }
.couleur-profil-37 { color: #ffab91; }
.couleur-profil-38 { color: #d7ccc8; }
.couleur-profil-39 { color: #cfd8dc; }

.salon-vradio .pseudo[role="button"] {
    cursor: pointer;
}

.salon-vradio .pseudo[role="button"]:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.salon-vradio .pseudo[role="button"]:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 3px;
}

/* ========================================================
   BADGES DE L’ÉQUIPE ET DES DJ
======================================================== */

.badge-role {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #705335;
    border-radius: 12px;
    background: #281018;
    color: #e0c27a;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-proprietaire {
    border-color: var(--or);
    background: #332515;
    color: #e0c27a;
}

.badge-admin {
    border-color: #93c5fd;
    background: #17263d;
    color: #93c5fd;
}

.badge-moderateur {
    border-color: #86efac;
    background: #142b20;
    color: #86efac;
}

.badge-dj {
    border-color: #c4b5fd;
    background: #2e163e;
    color: #c4b5fd;
}

.badge-live {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 5px;
    border: 1px solid #ff6b76;
    border-radius: 999px;
    background: #5b111c;
    color: #ffe7e9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    animation: vradio-live-clignote 1.2s steps(2, start) infinite;
}

@keyframes vradio-live-clignote {
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-live { animation: none; }
}

/* ========================================================
   BOUTONS SUR LES MESSAGES
======================================================== */

.message-tchat .supprimer-message {
    width: auto;
    margin-left: auto;
    padding: 3px 8px;
    border: 1px solid #73515b;
    border-radius: 5px;
    background: transparent;
    color: #d8bdc5;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.4;
}

.message-tchat .supprimer-message:hover:not(:disabled) {
    background: #481326;
    color: var(--blanc);
}

.message-tchat .signaler-message {
    position: absolute;
    right: 10px;
    bottom: 7px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--gris);
    font-size: 10px;
    font-weight: normal;
    line-height: 1.4;
}

.message-tchat .signaler-message:hover:not(:disabled) {
    border-color: #594750;
    background: #281018;
    color: #e0c27a;
}

/* ========================================================
   CHAMP D’ÉCRITURE
======================================================== */

.composition {
    position: relative;
    flex-shrink: 0;
    gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid #694b36;
    background: #181119;
}

.composition label {
    color: #d5c2a1;
    font-size: 11px;
}

.ligne-composition {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.composition textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    max-height: 140px;
    font-size: 14px;
}

.composition button {
    margin: 0;
    padding: 10px 20px;
}

.composition #envoyer {
    flex-shrink: 0;
}

.composition .note {
    margin: 0;
    font-size: 10px;
}

/* ========================================================
   EMOJIS
======================================================== */

.zone-emojis {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
}

.composition #bouton-emojis {
    width: 42px;
    height: 42px;
    padding: 6px;
    border: 1px solid #594750;
    border-radius: 7px;
    background: #21141d;
    font-size: 22px;
    line-height: 1;
}

.composition #bouton-emojis:hover:not(:disabled) {
    background: #481326;
}

.palette-emojis {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 24px);
    max-height: min(240px, 50vh);
    max-height: min(240px, 50dvh);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--or);
    border-radius: 10px;
    background: #171118;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    scrollbar-color: #775436 #171118;
}

.composition .choix-emoji {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 23px;
    font-weight: normal;
    line-height: 1;
}

.composition .choix-emoji:hover:not(:disabled) {
    border-color: #74553c;
    background: #481326;
}

/* ========================================================
   GIF DANS LES MESSAGES
======================================================== */

.composition #bouton-gif {
    flex-shrink: 0;
    align-self: flex-end;
    width: 44px;
    height: 42px;
    padding: 6px;
    border: 1px solid #594750;
    border-radius: 7px;
    background: #21141d;
    color: var(--or);
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1px;
}

.composition #bouton-gif:hover:not(:disabled) {
    border-color: var(--or);
    background: #481326;
}

.gif-message {
    display: block;
    width: auto;
    height: auto;
    max-width: min(320px, 100%);
    max-height: 260px;
    margin-top: 10px;
    border: 1px solid #44303b;
    border-radius: 8px;
    background: var(--fond);
    object-fit: contain;
}

.attribution-gif,
.message-tchat .attribution-gif,
.message-prive .attribution-gif {
    display: block;
    margin-top: 5px;
    color: var(--gris);
    font-size: 10px;
    line-height: 1.4;
}

.attribution-gif a {
    color: var(--or);
    text-decoration: none;
}

.attribution-gif a:hover {
    text-decoration: underline;
}

/* ========================================================
   MEMBRES À DROITE
======================================================== */

.membres-salon {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 18px;
    border-left: 1px solid var(--bordure);
    background: #171118;
}

.membres-salon .sur-titre {
    font-size: 8px;
    letter-spacing: 2px;
}

.membres-salon h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
    font-size: 17px;
}

#nombre-membres {
    flex-shrink: 0;
    padding: 2px 9px;
    border: 1px solid #705335;
    border-radius: 20px;
    color: var(--or);
    font-size: 11px;
}

#liste-membres {
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

#liste-membres li {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-wrap: anywhere;
}

#liste-membres .voir-profil {
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 7px;
    border: 1px solid #594750;
    border-radius: 6px;
    background: #21141d;
    color: var(--gris);
    font-size: 10px;
    font-weight: normal;
    line-height: 1.5;
}

#liste-membres .voir-profil:hover:not(:disabled) {
    border-color: var(--or);
    background: #481326;
    color: var(--blanc);
}

/* ========================================================
   PANNEAUX
======================================================== */

.panneau-gestion {
    width: min(900px, 94vw);
    max-width: 94vw;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--or);
    border-radius: 14px;
    background: #151015;
    color: var(--blanc);
    box-shadow: 0 25px 100px rgba(0, 0, 0, 0.85);
    scrollbar-color: #775436 #151015;
}

.panneau-gestion::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.entete-gestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.entete-gestion > div {
    min-width: 0;
}

.entete-gestion h2 {
    margin: 5px 0;
    overflow-wrap: anywhere;
}

.entete-gestion .sur-titre {
    margin: 0;
}

.entete-gestion button {
    flex-shrink: 0;
}

.panneau-gestion > label {
    display: block;
    margin-bottom: 8px;
}

.panneau-gestion p {
    overflow-wrap: anywhere;
}

#message-gestion,
#statut-moderation,
#statut-journal,
#statut-signaler,
#statut-signalements,
#statut-mot-de-passe,
#statut-reglement,
#statut-gif,
#statut-prives,
#statut-gif-prive,
#statut-profil,
#statut-chansons,
#statut-antenne,
#statut-epingle,
#statut-ignores,
#information-statut {
    color: #e0c27a;
    overflow-wrap: anywhere;
}

#message-gestion:empty,
#statut-moderation:empty,
#statut-journal:empty,
#statut-signaler:empty,
#statut-signalements:empty,
#statut-mot-de-passe:empty,
#statut-reglement:empty,
#statut-gif:empty,
#statut-prives:empty,
#statut-gif-prive:empty,
#statut-profil:empty,
#statut-chansons:empty,
#statut-antenne:empty,
#statut-epingle:empty,
#statut-ignores:empty,
#information-statut:empty {
    display: none;
}

.panneau-gestion.panneau-epingle,
.panneau-gestion.panneau-ignores {
    width: min(620px, 94vw);
}

.panneau-gestion.panneau-statut {
    width: min(480px, 94vw);
}

#statut-epingle:not(:empty) {
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid #705335;
    border-radius: 8px;
    background: #281018;
    font-size: 13px;
}

/* ========================================================
   DEMANDES DE CHANSONS ET DÉDICACES
======================================================== */

.panneau-chansons {
    width: min(620px, 94vw);
}

.compte-salon #demander-chanson,
.compte-salon #demandes-chansons-dj,
.compte-salon #gerer-antenne {
    color: #ffe2a6;
    white-space: normal;
    overflow-wrap: anywhere;
}

.compte-salon #demander-chanson:disabled,
.compte-salon #demandes-chansons-dj:disabled {
    color: var(--gris);
}

#vue-demande-chanson,
#vue-demandes-dj {
    min-width: 0;
}

#information-dj-chanson {
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid #705335;
    border-radius: 8px;
    background: #281018;
    color: #e0c27a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

#formulaire-chanson {
    min-width: 0;
}

#champs-chanson {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#champs-chanson label {
    color: #d5c2a1;
}

#champs-chanson input,
#champs-chanson textarea {
    width: 100%;
    min-width: 0;
}

#dedicace-demande-chanson {
    min-height: 105px;
    max-height: 260px;
}

#champs-chanson .note {
    margin: 0;
    line-height: 1.6;
}

#champs-chanson button[type="submit"] {
    width: 100%;
    margin-top: 4px;
}

#champs-chanson:disabled input,
#champs-chanson:disabled textarea,
#champs-chanson:disabled button {
    opacity: 0.55;
    cursor: not-allowed;
}

#champs-chanson:disabled button:hover {
    background: linear-gradient(135deg, #650014, #b00025);
}

#vue-demandes-dj > .note {
    margin-top: 0;
    line-height: 1.6;
}

#actualiser-demandes-chansons {
    padding: 8px 12px;
    font-size: 12px;
}

#liste-demandes-chansons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin-top: 16px;
}

#liste-demandes-chansons > .note {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--bordure);
    border-radius: 8px;
    text-align: center;
}

.carte-demande-chanson {
    min-width: 0;
    padding: 16px;
    border: 1px solid #594750;
    border-left: 3px solid var(--or);
    border-radius: 9px;
    background: #21141d;
    overflow-wrap: anywhere;
}

.carte-demande-chanson h3 {
    margin: 0 0 8px;
    color: #ffe2a6;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.carte-demande-chanson > .note {
    margin: 0;
    font-size: 11px;
}

.dedicace-chanson {
    margin: 12px 0 0;
    padding: 11px 12px;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    background: #111013;
    color: #f7f4f1;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.carte-demande-chanson > button {
    max-width: 100%;
    margin-top: 13px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: normal;
}

.demande-chanson-traitee {
    border-color: #354d3d;
    border-left-color: #86efac;
    background: #142019;
}

.demande-chanson-traitee h3 {
    color: #a3e3b1;
}

.demande-chanson-traitee > button {
    border-color: #526a59;
    background: #1b3022;
    color: #c8e8cf;
}

.demande-chanson-traitee > button:hover:not(:disabled) {
    background: #284532;
}

#statut-chansons:not(:empty) {
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid #705335;
    border-radius: 8px;
    background: #281018;
    font-size: 13px;
}

/* ========================================================
   FENÊTRE DU PROFIL
======================================================== */

.panneau-gestion.panneau-profil {
    width: min(780px, 94vw);
}

.apercu-profil {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid var(--bordure);
    border-radius: 9px;
    background: #08080a;
}

.apercu-profil .avatar-profil {
    width: 72px;
    height: 72px;
    font-size: 42px;
}

.apercu-profil .nom-profil {
    font-size: 20px;
    font-weight: bold;
}

.presentation-profil-public {
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #111013;
    color: var(--blanc);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#formulaire-profil {
    gap: 12px;
}

#formulaire-profil label {
    color: #d5c2a1;
}

#presentation-profil {
    min-height: 110px;
    max-height: 250px;
}

#formulaire-profil .note {
    margin: 0;
}

#enregistrer-profil {
    margin-top: 4px;
}

#statut-profil {
    font-size: 13px;
}

/* ========================================================
   CHOIX ENTRE EMOJI ET PHOTO
======================================================== */

#zone-avatar-emoji,
#zone-avatar-photo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#zone-avatar-photo {
    padding: 14px;
    border: 1px solid var(--bordure);
    border-radius: 9px;
    background: #111013;
}

#zone-avatar-photo label {
    color: var(--or);
}

#photo-profil {
    padding: 10px;
    font-size: 12px;
}

#photo-profil::file-selector-button {
    margin-right: 10px;
    padding: 8px 12px;
    border: 1px solid #8a7047;
    border-radius: 6px;
    background: #481326;
    color: var(--blanc);
    font: inherit;
    cursor: pointer;
}

#photo-profil:not(:disabled)::file-selector-button:hover {
    background: var(--bourgogne);
}

#nom-photo-profil {
    margin: 0;
    color: var(--or);
    overflow-wrap: anywhere;
}

/* ========================================================
   PERSONNALISATION DU PROFIL
======================================================== */

.personnalisation-profil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    min-width: 0;
    margin: 8px 0;
}

.section-personnalisation {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #705335;
    border-radius: 12px;
    background: linear-gradient(145deg, #281018, #111013);
}

.section-personnalisation h3 {
    margin: 0 0 8px;
    color: #ffe2a6;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.section-personnalisation label {
    margin-top: 4px;
    font-size: 12px;
}

.section-personnalisation select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 11px;
    border-color: #705335;
    background: #08080a;
    color: #f7f7f7;
    font-size: 13px;
}

.section-personnalisation option,
.section-personnalisation optgroup {
    background: #151015;
    color: #f7f7f7;
}

.section-personnalisation .note {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.6;
}

.ligne-couleur-personnalisee {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#formulaire-profil .ligne-couleur-personnalisee input[type="color"] {
    width: 64px;
    height: 44px;
    margin: 0;
    padding: 4px;
    border: 1px solid #8a7047;
    border-radius: 8px;
    background: #08080a;
    cursor: pointer;
}

.ligne-couleur-personnalisee output {
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    background: #08080a;
    color: #ffe2a6;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* ========================================================
   APERÇU DE L’ÉCRITURE
======================================================== */

.apercu-ecriture-profil {
    min-width: 0;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #705335;
    border-radius: 12px;
    background: radial-gradient(
        ellipse at top right,
        #351323,
        #08080a 80%
    );
}

.apercu-ecriture-profil h3 {
    margin: 0 0 12px;
    color: #ffe2a6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.reglages-ecriture-profil {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #705335;
    border-radius: 10px;
}

.reglages-ecriture-profil legend {
    padding: 0 6px;
    color: #ffe2a6;
    font-weight: 700;
}

.reglages-ecriture-profil input[type="color"] {
    width: 64px;
    min-height: 38px;
    padding: 2px;
}

.ligne-options-ecriture {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ligne-options-ecriture label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#accessibilite-ecriture-profil {
    margin: 0;
}

#exemple-ecriture-profil {
    min-width: 0;
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ========================================================
   POLICES — NOMS UTILISÉS PAR TCHAT.JS
======================================================== */

.police-vradio-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.police-vradio-verdana {
    font-family: Verdana, Geneva, sans-serif;
}

.police-vradio-trebuchet {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.police-vradio-georgia {
    font-family: Georgia, "Times New Roman", serif;
}

.police-vradio-times {
    font-family: "Times New Roman", Times, serif;
}

.police-vradio-courier {
    font-family: "Courier New", Courier, monospace;
}

.police-vradio-palatino {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.police-vradio-comic {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.police-vradio-dancing-script {
    font-family: "Dancing Script", "Segoe Script", cursive;
}

.police-vradio-great-vibes {
    font-family: "Great Vibes", "Brush Script MT", cursive;
}

.police-vradio-pacifico {
    font-family: "Pacifico", "Comic Sans MS", cursive;
}

.police-vradio-satisfy {
    font-family: "Satisfy", "Segoe Script", cursive;
}

.police-vradio-caveat {
    font-family: "Caveat", "Segoe Print", cursive;
}

.police-vradio-kaushan-script {
    font-family: "Kaushan Script", "Segoe Script", cursive;
}

.police-vradio-cookie {
    font-family: "Cookie", "Brush Script MT", cursive;
}

.police-vradio-sacramento {
    font-family: "Sacramento", "Segoe Script", cursive;
}

.police-vradio-orbitron {
    font-family: "Orbitron", "Trebuchet MS", sans-serif;
}

.police-vradio-audiowide {
    font-family: "Audiowide", "Trebuchet MS", sans-serif;
}

.police-vradio-rajdhani {
    font-family: "Rajdhani", Arial, sans-serif;
}

.police-vradio-exo-2 {
    font-family: "Exo 2", "Trebuchet MS", sans-serif;
}

.police-vradio-chakra-petch {
    font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
}

.police-vradio-bangers {
    font-family: "Bangers", Impact, fantasy;
}

.police-vradio-bungee {
    font-family: "Bungee", Impact, fantasy;
}

.police-vradio-righteous {
    font-family: "Righteous", "Trebuchet MS", sans-serif;
}

.police-vradio-lobster {
    font-family: "Lobster", "Brush Script MT", cursive;
}

.police-vradio-monoton {
    font-family: "Monoton", Impact, fantasy;
}

.police-vradio-cinzel {
    font-family: "Cinzel", Georgia, serif;
}

.police-vradio-cinzel-decorative {
    font-family: "Cinzel Decorative", Georgia, serif;
}

.police-vradio-pirata-one {
    font-family: "Pirata One", Georgia, fantasy;
}

.police-vradio-unifrakturmaguntia {
    font-family: "UnifrakturMaguntia", Georgia, fantasy;
}

/* ========================================================
   EFFETS DES PSEUDOS
======================================================== */

.nom-profil.effet-pseudo-aucun {
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.nom-profil.effet-pseudo-neon {
    text-shadow:
        0 0 4px var(--couleur-personnelle, #e0c27a),
        0 0 10px var(--couleur-personnelle, #e0c27a);
    -webkit-text-stroke: 0;
}

.nom-profil.effet-pseudo-ombre {
    text-shadow:
        1px 2px 3px rgba(0, 0, 0, 0.95),
        0 0 5px rgba(255, 255, 255, 0.15);
    -webkit-text-stroke: 0;
}

.nom-profil.effet-pseudo-relief {
    text-shadow:
        1px 1px 0 #08080a,
        2px 2px 0 #705335,
        3px 3px 4px rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 0;
}

.nom-profil.effet-pseudo-contour {
    -webkit-text-stroke: 0.35px var(--couleur-personnelle, #e0c27a);
    text-shadow:
        0 0 3px var(--couleur-personnelle, #e0c27a),
        1px 1px 2px #08080a;
}

/* ========================================================
   DÉGRADÉS DES PSEUDOS
======================================================== */

.nom-profil.degrade-pseudo-aucun {
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .nom-profil:is(
        .degrade-pseudo-aurore,
        .degrade-pseudo-coucher-soleil,
        .degrade-pseudo-galaxie,
        .degrade-pseudo-or,
        .degrade-pseudo-bonbon,
        .degrade-pseudo-ocean,
        .degrade-pseudo-foret,
        .degrade-pseudo-flamme,
        .degrade-pseudo-arc-en-ciel
    ) {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .nom-profil.degrade-pseudo-aurore {
        background-image: linear-gradient(
            110deg, #a7f3d0, #67e8f9, #c4b5fd, #f0abfc
        );
    }

    .nom-profil.degrade-pseudo-coucher-soleil {
        background-image: linear-gradient(
            110deg, #fef08a, #fdba74, #fda4af, #d8b4fe
        );
    }

    .nom-profil.degrade-pseudo-galaxie {
        background-image: linear-gradient(
            110deg, #93c5fd, #c4b5fd, #f0abfc, #ffb3c6
        );
    }

    .nom-profil.degrade-pseudo-or {
        background-image: linear-gradient(
            110deg, #e0c27a, #fff4cc, #fbbf24, #ffe2a6
        );
    }

    .nom-profil.degrade-pseudo-bonbon {
        background-image: linear-gradient(
            110deg, #ffb3c6, #f0abfc, #c4b5fd, #a5f3fc
        );
    }

    .nom-profil.degrade-pseudo-ocean {
        background-image: linear-gradient(
            110deg, #bfdbfe, #7dd3fc, #67e8f9, #99f6e4
        );
    }

    .nom-profil.degrade-pseudo-foret {
        background-image: linear-gradient(
            110deg, #fef08a, #bef264, #86efac, #99f6e4
        );
    }

    .nom-profil.degrade-pseudo-flamme {
        background-image: linear-gradient(
            110deg, #fff4cc, #ffd180, #fdba74, #fda4af
        );
    }

    .nom-profil.degrade-pseudo-arc-en-ciel {
        background-image: linear-gradient(
            110deg,
            #fda4af,
            #fdba74,
            #fef08a,
            #86efac,
            #67e8f9,
            #c4b5fd,
            #f0abfc
        );
    }
}

/* ========================================================
   TEXTE PERSONNALISÉ DES MESSAGES
   Couleur et taille appliquées par tchat.js.
   Police appliquée par les classes police-vradio-*.
======================================================== */

.message-tchat p.texte-personnalise,
.message-prive > p.texte-personnalise,
#exemple-ecriture-profil.texte-personnalise {
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

.composition textarea.texte-personnalise,
#texte-prive.texte-personnalise {
    line-height: 1.6;
    caret-color: var(--or);
}

.composition textarea.texte-personnalise::placeholder,
#texte-prive.texte-personnalise::placeholder {
    color: var(--gris);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    opacity: 1;
}

/* ========================================================
   RECHERCHE GIF DU SALON
======================================================== */

.panneau-gif {
    width: min(760px, 94vw);
}

#formulaire-recherche-gif {
    margin-bottom: 16px;
}

.ligne-recherche-gif {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.ligne-recherche-gif input {
    flex: 1;
    min-width: 0;
}

.ligne-recherche-gif button {
    flex-shrink: 0;
}

#resultats-gif {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

#resultats-gif:empty,
#resultats-gif-prives:empty {
    display: none;
}

#resultats-gif > button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 140px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid #594750;
    border-radius: 9px;
    background: var(--fond);
}

#resultats-gif > button:hover:not(:disabled),
#resultats-gif-prives > button:hover:not(:disabled) {
    border-color: var(--or);
    background: #281018;
}

#resultats-gif img {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 5px;
    object-fit: contain;
}

#resultats-gif > p,
#resultats-gif-prives > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--gris);
    overflow-wrap: anywhere;
}

#suite-gif {
    padding: 9px 16px;
    font-size: 12px;
}

.panneau-gif > .attribution-gif {
    margin-top: 18px;
    text-align: right;
}

/* ========================================================
   GESTION DES RÔLES ET DJ
======================================================== */

.ligne-gestion {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 180px 90px 120px;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--bordure);
}

.ligne-gestion strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ligne-gestion label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ligne-gestion select {
    padding: 10px;
    border-color: #74553c;
    border-radius: 6px;
}

.ligne-gestion .choix-dj {
    flex-direction: row;
    align-items: center;
}

.choix-dj input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--or);
}

.ligne-gestion button {
    padding: 10px;
    font-size: 12px;
}

/* ========================================================
   MODÉRATION, JOURNAL ET RÈGLEMENT
======================================================== */

.carte-moderation {
    padding: 18px 0;
    border-bottom: 1px solid var(--bordure);
}

.carte-moderation h3 {
    margin: 0 0 6px;
    color: var(--or);
    overflow-wrap: anywhere;
}

.carte-moderation p {
    margin: 8px 0;
}

.actions-moderation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-top: 14px;
}

.actions-moderation label {
    display: flex;
    flex: 1 1 170px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.actions-moderation select {
    padding: 12px;
    border-color: #74553c;
}

#suite-journal,
#suite-signalements,
#compris-reglement {
    margin-top: 20px;
}

/* ========================================================
   SIGNALEMENTS
======================================================== */

#filtre-signalements {
    margin-bottom: 14px;
}

#formulaire-signalement {
    margin-top: 18px;
}

#raison-signalement {
    min-height: 120px;
    max-height: 300px;
}

.contenu-signale {
    padding: 12px;
    border-left: 3px solid var(--or);
    border-radius: 5px;
    background: var(--fond);
    color: #f7f4f1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#liste-signalements .carte-moderation > button {
    margin-top: 12px;
}

/* ========================================================
   MESSAGES PRIVÉS
======================================================== */

.panneau-prives {
    width: min(1050px, 94vw);
}

.preferences-prives {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.case-prives {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.case-prives input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--or);
}

#actualiser-prives {
    padding: 8px 12px;
    font-size: 12px;
}

.grille-prives {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}

.colonne-prives,
.discussion-privee {
    min-width: 0;
}

.colonne-prives h3 {
    margin-top: 0;
    color: var(--or);
    font-size: 15px;
}

#liste-conversations-prives {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-color: #775436 #151015;
}

.conversation-privee {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-color: #594750;
    background: #21141d;
    text-align: left;
    overflow-wrap: anywhere;
}

.conversation-privee:hover:not(:disabled),
.conversation-privee.conversation-selectionnee {
    border-color: var(--or);
    background: #481326;
}

.apercu-prive {
    color: var(--gris);
    font-size: 11px;
    font-weight: normal;
    overflow-wrap: anywhere;
}

.badge-prive {
    padding: 2px 7px;
    border-radius: 12px;
    background: var(--bourgogne);
    color: var(--blanc);
    font-size: 10px;
}

.blocages-prives {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
}

.blocages-prives summary {
    color: var(--gris);
    font-size: 12px;
    cursor: pointer;
}

.ligne-blocage-prive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 12px;
}

.ligne-blocage-prive > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ligne-blocage-prive button {
    padding: 5px 8px;
    font-size: 10px;
}

.entete-privee {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.entete-privee h3 {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

#bloquer-prive,
#anciens-prives {
    padding: 6px 10px;
    font-size: 11px;
}

#anciens-prives {
    margin-bottom: 8px;
}

#information-privee {
    overflow-wrap: anywhere;
}

#information-privee:empty {
    display: none;
}

#messages-prives {
    height: 320px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--fond);
    scrollbar-color: #775436 #111;
}

#messages-prives:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 3px;
}

.message-prive {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-left: 2px solid #594750;
    border-radius: 6px;
    background: #171118;
    overflow-wrap: anywhere;
}

.mon-message-prive {
    border-left-color: var(--or);
    background: #281018;
}

.message-prive > p {
    margin: 6px 0 0;
    font-size: 13px;
    white-space: pre-wrap;
}

.message-prive > .attribution-gif {
    font-size: 10px;
}

#formulaire-prive {
    margin-top: 12px;
}

#texte-prive {
    min-height: 65px;
    max-height: 150px;
}

.outils-prives {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.label-emoji-prive {
    color: var(--gris);
    font-size: 11px;
}

#emoji-prive {
    width: 130px;
    padding: 8px;
    font-size: 12px;
}

#ouvrir-gif-prive {
    padding: 8px 12px;
    font-size: 12px;
}

#envoyer-prive {
    margin-left: auto;
    padding: 8px 14px;
    font-size: 12px;
}

#zone-gif-prive {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bordure);
}

#zone-gif-prive .ligne-recherche-gif {
    flex-wrap: wrap;
}

#zone-gif-prive .ligne-recherche-gif input {
    flex: 1 1 150px;
}

#zone-gif-prive .ligne-recherche-gif button {
    padding: 8px 12px;
    font-size: 12px;
}

#resultats-gif-prives {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#resultats-gif-prives > button {
    min-width: 0;
    overflow: hidden;
    padding: 5px;
    border-color: #594750;
    background: var(--fond);
}

#resultats-gif-prives img {
    display: block;
    width: 100%;
    height: 110px;
    border-radius: 5px;
    object-fit: contain;
}

#suite-gif-prive {
    margin-top: 12px;
    padding: 8px 12px;
    font-size: 12px;
}

/* ========================================================
   FENÊTRE FLOTTANTE DES MESSAGES PRIVÉS
======================================================== */

dialog.prives-flottants {
    position: fixed;
    inset: auto 18px 18px auto;
    z-index: 100;
    width: min(430px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid var(--or);
    border-radius: 12px;
    background: #151015;
    color: var(--blanc);
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.75);
    scrollbar-color: #775436 #151015;
}

dialog.prives-flottants:not([open]) {
    display: none;
}

dialog.prives-flottants::backdrop {
    background: transparent;
}

.prives-flottants .entete-gestion {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.prives-flottants .entete-gestion > div:first-child {
    min-width: 0;
}

.prives-flottants .entete-gestion h2 {
    font-size: 17px;
}

.commandes-prives {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.commandes-prives button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-color: #594750;
    background: #21141d;
    font-size: 16px;
    line-height: 1;
}

.commandes-prives button:hover:not(:disabled) {
    background: #481326;
}

.reglages-prives {
    margin-bottom: 12px;
    padding: 9px 10px;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    background: #111013;
}

.reglages-prives > summary {
    color: var(--or);
    font-size: 12px;
    cursor: pointer;
}

.reglages-prives .preferences-prives {
    margin-top: 12px;
    margin-bottom: 0;
}

.prives-flottants .grille-prives {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.prives-flottants #liste-conversations-prives {
    max-height: 180px;
}

.prives-flottants .conversation-privee {
    padding: 9px 10px;
}

.prives-flottants .blocages-prives {
    margin-top: 12px;
}

.prives-flottants #messages-prives {
    height: 240px;
}

.prives-flottants #information-privee {
    margin: 7px 0;
    font-size: 10px;
}

.prives-flottants #texte-prive {
    min-height: 55px;
    max-height: 120px;
}

.prives-flottants #emoji-prive {
    width: 105px;
}

.prives-flottants #zone-gif-prive {
    margin-top: 12px;
}

.prives-flottants #resultats-gif-prives {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 230px;
    overflow-y: auto;
}

/* ========================================================
   PASTILLE DES MESSAGES PRIVÉS RÉDUITS
======================================================== */

.pastille-prives {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: calc(100vw - 36px);
    padding: 10px 16px;
    border: 1px solid var(--or);
    border-radius: 25px;
    background: linear-gradient(135deg, #481326, #21141d);
    color: var(--blanc);
    font-size: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    white-space: normal;
    overflow-wrap: anywhere;
}

.pastille-prives:hover:not(:disabled) {
    background: var(--bourgogne);
}

.pastille-prives .badge-prive {
    flex-shrink: 0;
}

/* ========================================================
   TABLETTES
======================================================== */

@media (max-width: 1000px) {
    .grille-salon {
        grid-template-columns: 140px minmax(0, 1fr) 180px;
    }

    .membres-salon {
        padding: 15px 12px;
    }

    .navigation-salon > .lecteur-vradio {
        padding: 10px;
    }

    .navigation-salon .entete-lecteur {
        gap: 6px;
    }

    .navigation-salon .icone-radio {
        font-size: 20px;
    }

    .navigation-salon .lecteur-vradio #titre-radio {
        font-size: 13px;
    }
}

@media (max-width: 750px) {
    .navigation-salon {
        display: none;
    }

    .grille-salon {
        grid-template-columns: minmax(0, 1fr) 150px;
    }

    .barre-salon {
        padding: 10px 14px;
    }

    .barre-salon .sur-titre {
        display: none;
    }

    .messages-tchat {
        padding: 12px;
    }

    .compte-salon {
        gap: 8px;
    }

    .conversation > .lecteur-vradio {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 12px;
        margin: 0;
        padding: 9px 12px;
        border: 0;
        border-bottom: 1px solid #705335;
        border-radius: 0;
    }

    .conversation > .lecteur-vradio .sur-titre {
        display: none;
    }

    .conversation > .lecteur-vradio .icone-radio {
        font-size: 20px;
    }

    .conversation > .lecteur-vradio #titre-radio {
        font-size: 13px;
    }

    .conversation > .lecteur-vradio .statut-radio {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        font-size: 10px;
    }

    .conversation > .lecteur-vradio #ecouter-radio {
        grid-column: 2;
        grid-row: 1 / 3;
        width: auto;
        max-width: 130px;
        font-size: 11px;
    }

    .conversation > .lecteur-vradio .volume-radio {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr) auto;
        margin-top: 0;
    }

    .conversation > .lecteur-vradio .volume-radio label {
        grid-column: 1;
        grid-row: 1;
    }

    .conversation > .lecteur-vradio .volume-radio input {
        grid-column: 2;
        grid-row: 1;
    }

    .conversation > .lecteur-vradio .volume-radio output {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 700px) {
    .panneau-gestion {
        padding: 20px;
    }

    .ligne-gestion {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .entete-gestion h2 {
        font-size: 20px;
    }

    .grille-prives {
        grid-template-columns: minmax(0, 1fr);
    }

    #liste-conversations-prives {
        max-height: 160px;
    }

    #messages-prives {
        height: 280px;
    }

    #resultats-gif-prives {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================================
   PERSONNALISATION SUR TÉLÉPHONE
======================================================== */

@media (max-width: 600px) {
    .personnalisation-profil {
        grid-template-columns: minmax(0, 1fr);
    }

    .section-personnalisation {
        gap: 9px;
        padding: 14px;
    }

    .section-personnalisation h3 {
        font-size: 15px;
    }

    .section-personnalisation select {
        font-size: 16px;
    }

    .apercu-ecriture-profil {
        padding: 14px;
    }

    .ligne-couleur-personnalisee {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
    }

    #formulaire-profil .ligne-couleur-personnalisee input[type="color"] {
        width: 58px;
    }
}

/* ========================================================
   TÉLÉPHONES
======================================================== */

@media (max-width: 520px) {
    body {
        padding: 24px 12px;
    }

    .carte {
        padding: 22px;
    }

    .grille-salon {
        grid-template-columns: minmax(0, 1fr);
    }

    .membres-salon {
        display: none;
    }

    .barre-salon {
        flex-wrap: wrap;
    }

    .compte-salon {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .compte-salon #mon-pseudo {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .composition {
        padding: 10px;
    }

    .ligne-composition {
        flex-wrap: wrap;
        gap: 7px;
    }

    .composition textarea {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
    }

    .composition #envoyer {
        margin-left: auto;
        padding: 10px 12px;
        font-size: 12px;
    }

    .barre-salon h2 {
        font-size: 16px;
    }

    .bandeau-conversation {
        padding: 8px 12px;
        gap: 8px;
    }

    #avertissement-mention {
        flex: 1 1 100%;
        width: 100%;
    }

    .message-tchat .bouton-reaction {
        min-width: 40px;
        min-height: 36px;
    }

    .actions-moderation {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-moderation label {
        flex: none;
    }

    .entete-message {
        gap: 8px;
    }

    .panneau-gestion {
        padding: 16px;
    }

    .ligne-recherche-gif {
        flex-direction: column;
    }

    #zone-gif-prive .ligne-recherche-gif input {
        flex: auto;
    }

    #resultats-gif {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #resultats-gif > button {
        min-height: 110px;
    }

    #resultats-gif img {
        height: 110px;
    }

    .bouton-menu-salon {
        padding: 7px 10px;
        font-size: 11px;
    }

    dialog.prives-flottants {
        right: 12px;
        bottom: 12px;
        width: min(430px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 12px;
    }

    .prives-flottants #liste-conversations-prives {
        max-height: 140px;
    }

    .prives-flottants #messages-prives {
        height: 190px;
    }

    .pastille-prives {
        right: 12px;
        bottom: 12px;
        max-width: calc(100vw - 24px);
    }

    .apercu-profil {
        gap: 6px;
        padding: 12px;
    }

    .apercu-profil .nom-profil {
        font-size: 18px;
    }

    .apercu-profil .avatar-profil {
        width: 60px;
        height: 60px;
        font-size: 35px;
    }

    #presentation-profil {
        font-size: 16px;
    }

    #zone-avatar-photo {
        padding: 10px;
    }

    #photo-profil {
        font-size: 12px;
    }

    .panneau-chansons .entete-gestion,
    .panneau-epingle .entete-gestion,
    .panneau-ignores .entete-gestion,
    .panneau-statut .entete-gestion {
        gap: 10px;
    }

    .panneau-chansons .entete-gestion h2,
    .panneau-epingle .entete-gestion h2,
    .panneau-ignores .entete-gestion h2,
    .panneau-statut .entete-gestion h2 {
        font-size: 18px;
    }

    .panneau-chansons .entete-gestion button,
    .panneau-epingle .entete-gestion button,
    .panneau-ignores .entete-gestion button,
    .panneau-statut .entete-gestion button {
        padding: 8px 10px;
        font-size: 12px;
    }

    #titre-demande-chanson,
    #artiste-demande-chanson,
    #dedicace-demande-chanson,
    #texte-epingle,
    #membre-ignores,
    #choix-statut {
        font-size: 16px;
    }

    .carte-demande-chanson {
        padding: 12px;
    }

    .carte-demande-chanson h3 {
        font-size: 15px;
    }

    .carte-demande-chanson > button {
        width: 100%;
    }

    #information-dj-chanson,
    #statut-chansons:not(:empty),
    #statut-epingle:not(:empty),
    #statut-ignores:not(:empty),
    #information-statut:not(:empty) {
        padding: 10px;
        font-size: 12px;
    }

    .annonce-epinglee {
        padding: 10px 12px;
    }

    #contenu-epingle {
        font-size: 13px;
    }

    .ligne-ignore > span {
        flex-basis: 100%;
    }

    .ligne-ignore > button {
        flex: 1 1 120px;
        min-height: 36px;
    }
}

@media (max-width: 380px) {
    .ligne-gestion {
        grid-template-columns: minmax(0, 1fr);
    }

    .entete-gestion {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .entete h1 {
        font-size: 34px;
    }

    .palette-emojis {
        grid-template-columns: repeat(5, 36px);
    }

    .composition #bouton-emojis {
        width: 36px;
        height: 40px;
    }

    .composition #bouton-gif {
        width: 40px;
        height: 40px;
    }

    .prives-flottants .entete-gestion h2 {
        font-size: 15px;
    }
}

/* ========================================================
   ACCESSIBILITÉ — COULEURS FORCÉES
======================================================== */

@media (forced-colors: active) {
    .nom-profil[class*="degrade-pseudo-"] {
        background-image: none;
        background-clip: border-box;
        -webkit-background-clip: border-box;
        -webkit-text-fill-color: CanvasText;
        color: CanvasText !important;
    }

    .nom-profil[class*="effet-pseudo-"] {
        text-shadow: none;
        -webkit-text-stroke: 0;
    }
}