/* v0.5.2 — Verre plus léger réservé aux quatre thèmes événementiels.
   Les JPG restent les originaux. Aucun changement des thèmes standards. */
html[data-special-theme="jack-oglow"] body{
 background:#300A07 url('/assets/special-themes/jack-oglow.jpg') center center / cover fixed no-repeat !important;
}
html[data-special-theme="phantom-mist"] body{
 background:#12323F url('/assets/special-themes/phantom-mist.jpg') center center / cover fixed no-repeat !important;
}
html[data-special-theme="blue-vice"] body{
 background:#C7DCE8 url('/assets/special-themes/blue-vice.jpg') center center / cover fixed no-repeat !important;
}
html[data-special-theme="pink-vice"] body{
 background:#51406D url('/assets/special-themes/pink-vice.jpg') center center / cover fixed no-repeat !important;
}
/* Transparence renforcée : le dégradé original reste le fond dominant.
   Les panneaux gardent une teinte adaptée à chaque palette, et des textes lisibles. */
html[data-special-theme="jack-oglow"]{
 --event-card:rgba(86,35,19,.50); --event-card-hover:rgba(103,43,21,.62);
 --event-side:rgba(49,17,12,.55); --event-top:rgba(54,20,13,.47);
 --event-control:rgba(86,35,22,.49); --event-edge:rgba(255,220,185,.045);
 --event-shadow:0 8px 22px rgba(17,3,2,.075);
}
html[data-special-theme="phantom-mist"]{
 --event-card:rgba(31,86,101,.48); --event-card-hover:rgba(43,103,122,.60);
 --event-side:rgba(21,61,75,.54); --event-top:rgba(25,70,84,.46);
 --event-control:rgba(35,83,100,.48); --event-edge:rgba(207,245,255,.05);
 --event-shadow:0 8px 22px rgba(3,22,29,.075);
}
html[data-special-theme="blue-vice"]{
 /* Verre laiteux transparent, lisible avec le texte foncé #263653. */
 --event-card:rgba(238,245,250,.55); --event-card-hover:rgba(242,248,252,.67);
 --event-side:rgba(226,239,247,.59); --event-top:rgba(231,242,248,.51);
 --event-control:rgba(237,246,250,.55); --event-edge:rgba(38,54,83,.055);
 --event-shadow:0 8px 22px rgba(24,43,68,.065);
}
html[data-special-theme="pink-vice"]{
 --event-card:rgba(95,67,112,.48); --event-card-hover:rgba(116,81,130,.60);
 --event-side:rgba(64,46,91,.54); --event-top:rgba(69,50,96,.46);
 --event-control:rgba(83,59,112,.48); --event-edge:rgba(255,231,250,.05);
 --event-shadow:0 8px 22px rgba(24,12,38,.075);
}
html[data-special-theme] .sidebar{
 background:var(--event-side);
 border-right-color:var(--event-edge);
 -webkit-backdrop-filter:blur(9px) saturate(106%);
 backdrop-filter:blur(9px) saturate(106%);
}
html[data-special-theme] .topbar{
 background:var(--event-top);
 border-bottom-color:var(--event-edge);
 -webkit-backdrop-filter:blur(8px) saturate(106%);
 backdrop-filter:blur(8px) saturate(106%);
}
/* Surfaces importantes : même géométrie, seulement le matériau visuel change. */
html[data-special-theme] .panel,
html[data-special-theme] .tile,
html[data-special-theme] .member-card,
html[data-special-theme] .file-card,
html[data-special-theme] .competition-panel,
html[data-special-theme] .rd-match,
html[data-special-theme] .modal-content{
 background:var(--event-card);
 border-color:var(--event-edge);
 color:var(--text);
 box-shadow:var(--event-shadow);
 -webkit-backdrop-filter:blur(7px) saturate(105%);
 backdrop-filter:blur(7px) saturate(105%);
}
html[data-special-theme] .tile{
 transition:background .28s ease,border-color .28s ease,transform .24s ease,box-shadow .28s ease;
}
html[data-special-theme] .tile:hover,
html[data-special-theme] .member-card:hover{
 background:var(--event-card-hover);
 border-color:color-mix(in srgb,var(--accent) 22%,transparent);
}
/* Éléments secondaires, sans gros rectangles opaques ni traits marqués. */
html[data-special-theme] .profile-side,
html[data-special-theme] .search-control,
html[data-special-theme] .theme-toggle,
html[data-special-theme] .tile>.badge-icon,
html[data-special-theme] .tile-arrow,
html[data-special-theme] .tab,
html[data-special-theme] .radio-queue-btn,
html[data-special-theme] .radio-skip,
html[data-special-theme] .special-theme-option,
html[data-special-theme] .special-theme-control>select{
 background:var(--event-control);
 border-color:var(--event-edge);
 -webkit-backdrop-filter:blur(5px);
 backdrop-filter:blur(5px);
}
html[data-special-theme] .nav-link.active{
 background:color-mix(in srgb,var(--accent) 17%,var(--event-card));
 color:var(--text)!important;
 border-color:color-mix(in srgb,var(--accent) 24%,transparent);
}
html[data-special-theme] .nav-link:hover{
 background:var(--event-control);
 color:var(--text);
}
html[data-special-theme] .tab.active,
html[data-special-theme] .draft-tabs .btn.active{
 background:color-mix(in srgb,var(--accent) 16%,var(--event-control));
 border-color:color-mix(in srgb,var(--accent) 32%,transparent);
}
html[data-special-theme] .radio-entry{
 border-top-color:var(--event-edge);
}
html[data-special-theme] input,
html[data-special-theme] select,
html[data-special-theme] textarea{
 color:var(--text);
 border-color:var(--event-edge);
}
html[data-special-theme] .btn.primary,
html[data-special-theme] .primary-play{
 color:var(--on-accent)!important;
}
html[data-special-theme] .login-screen{
 background:var(--event-side);
}
@media(prefers-reduced-motion:reduce){
 html[data-special-theme] .tile{transition:none}
}

/* Ligne directement après « Couleur du fond » dans Paramètres → Apparence. */
.special-theme-control{display:flex;flex-direction:column;gap:12px;min-width:0}
.special-theme-control>select{
 width:100%;max-width:425px;min-height:42px;padding:8px 12px;border:1px solid var(--line);
 border-radius:10px;background:var(--input);color:var(--text);font:inherit;font-size:13px;
}
.special-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.special-theme-option{
 min-width:0;display:flex;align-items:center;gap:10px;padding:7px;border-radius:11px;
 border:1px solid var(--line);background:var(--input);color:var(--text);text-align:left;
 transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.special-theme-option:not(:disabled):hover{border-color:var(--accent);transform:translateY(-1px)}
.special-theme-option.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.special-theme-option.locked{opacity:.63;cursor:not-allowed}
.special-theme-preview{height:57px;width:70px;flex:0 0 70px;border-radius:7px;border:1px solid var(--line);background-position:center;background-size:cover;background-repeat:no-repeat}
.special-theme-preview[data-preview="jack-oglow"]{background-image:url('/assets/special-themes/jack-oglow.jpg')}
.special-theme-preview[data-preview="phantom-mist"]{background-image:url('/assets/special-themes/phantom-mist.jpg')}
.special-theme-preview[data-preview="blue-vice"]{background-image:url('/assets/special-themes/blue-vice.jpg')}
.special-theme-preview[data-preview="pink-vice"]{background-image:url('/assets/special-themes/pink-vice.jpg')}
.special-theme-caption{display:flex;flex-direction:column;gap:5px;min-width:0}
.special-theme-caption strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.special-theme-caption small{font-size:11px;color:var(--muted);line-height:1.35}
@media(max-width:720px){.special-theme-grid{grid-template-columns:1fr}.special-theme-preview{height:48px;width:65px;flex-basis:65px}}
@media(prefers-reduced-motion:reduce){.special-theme-option{transition:none}}

/* Légère aide de contraste pour le texte clair sur les fonds plus visibles. */
html[data-special-theme="jack-oglow"] .panel,
html[data-special-theme="phantom-mist"] .panel,
html[data-special-theme="pink-vice"] .panel,
html[data-special-theme="jack-oglow"] .tile,
html[data-special-theme="phantom-mist"] .tile,
html[data-special-theme="pink-vice"] .tile{
 text-shadow:0 1px 2px rgba(18,10,28,.22);
}

/* v0.5.3 — quatre corrections visuelles avant la mise en ligne.
   Tous ces sélecteurs s'appliquent UNIQUEMENT aux thèmes spéciaux. */

/* 1. L'avatar Discord utilise l'image réelle sans son ancien fond bleu.
   L'image inline donnée par Discord est conservée; le fallback est neutre. */
html[data-special-theme] #profile-top,
html[data-special-theme] #profile-top .avatar,
html[data-special-theme] .avatar {
 background-image:none;
 background-color:var(--event-control);
 border-color:transparent!important;
 box-shadow:none!important;
}
html[data-special-theme] #profile-top .avatar[style],
html[data-special-theme] .avatar[style]{
 /* L'image Discord en style inline reste prioritaire et visible. */
 background-color:transparent;
}
html[data-special-theme] #profile-top{
 background:transparent!important;
 border:0!important;
 outline:0;
 box-shadow:none!important;
}

/* 2-3. Les grands messages vides (Vidéos, Téléchargements),
   les filtres et encarts de Random Draft suivent le même verre fumé que l'accueil. */
html[data-special-theme] .empty,
html[data-special-theme] .draft-mode-strip,
html[data-special-theme] .draft-reroll-control,
html[data-special-theme] .rd-empty,
html[data-special-theme] .downloads-tools select{
 background:var(--event-card);
 color:var(--text);
 border-color:var(--event-edge);
 box-shadow:var(--event-shadow);
 -webkit-backdrop-filter:blur(8px) saturate(105%);
 backdrop-filter:blur(8px) saturate(105%);
}
html[data-special-theme] .empty{
 border-style:dashed;
 /* Le filet garde la forme existante sans dessiner un gros cadre sombre. */
 border-color:color-mix(in srgb,var(--text) 11%,transparent);
}
html[data-special-theme] .draft-tabs .btn:not(.active),
html[data-special-theme] .tabbar .tab:not(.active){
 background:var(--event-control);
 border-color:var(--event-edge);
 box-shadow:none;
}
html[data-special-theme] .draft-tabs .btn.active,
html[data-special-theme] .tabbar .tab.active{
 background:color-mix(in srgb,var(--accent) 18%,var(--event-card));
 border-color:color-mix(in srgb,var(--accent) 22%,transparent);
 color:var(--text);
}
/* La fenêtre de roulette ne pose plus de plaque opaque sur le JPG du site. */
html[data-special-theme] #roulette-frame{
 background:transparent!important;
 border:0!important;
 color-scheme:normal;
}