/* ============================================================
   CRAZY SPIRITS — THEME BLUE (STYLE C — Ice / Shaman Fog)
============================================================ */

/* -------------------------------------------
   VARIABLES — PALETTE BLEUE
-------------------------------------------- */
:root {
    --theme-color: #2090FF;        /* Bleu principal */
    --theme-light: #E4F2FF;        /* Bleu clair */
    --theme-dark:  #0A1A28;        /* Bleu sombre */
	--select-arrow: #00bcff;	   /* bleu par défaut */
	--fog-color: rgba(0,150,255,0.40); /* Bleu NFO popup */
    --theme-shadow: rgba(0,140,255,0.35);
    /* Brume bleu "Shaman Fog" */
    --fog-color: rgba(0,150,255,0.40);
}

/* -------------------------------------------
   BACKGROUND + BRUME ANIMÉE
-------------------------------------------- */
body {
    background-image: url('../images/blue/bkg1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    overflow-x: hidden;
    position: relative;
    color: var(--theme-light);
}

/* Brume — couche 1 */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;

    background: radial-gradient(circle at 50% 50%,
        var(--fog-color) 0%,
        rgba(0,0,20,0.15) 60%,
        rgba(0,0,0,0.30) 100%
    );

    filter: blur(23px);
    opacity: 0.45;
    animation: fog1 45s ease-in-out infinite alternate;
}

/* Brume — couche 2 */
body::after {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: -1;
    pointer-events: none;

    background: radial-gradient(circle at 40% 60%,
        rgba(255,255,255,0.10) 0%,
        rgba(0,0,0,0.15) 80%
    );

    filter: blur(35px);
    opacity: 0.30;
    animation: fog2 60s ease-in-out infinite alternate-reverse;
}

@keyframes fog1 {
    0%   { transform: translate(-3%, -3%) scale(1.05); }
    50%  { transform: translate(4%, 2%)   scale(1.08); }
    100% { transform: translate(-2%, 3%)  scale(1.04); }
}
@keyframes fog2 {
    0%   { transform: translate(3%, -4%)  scale(1.06); }
    50%  { transform: translate(-2%, 3%)  scale(1.10); }
    100% { transform: translate(4%, -3%)  scale(1.07); }
}

/* -------------------------------------------
   LOGO
-------------------------------------------- */
#logo {
    background-image: url('../images/blue/logo.png');
}

/* -------------------------------------------
   TITRES
-------------------------------------------- */
#colortexte {
    font-size: 24px;
    font-weight: bold;
    color: var(--theme-light);
    text-shadow: 0 0 8px var(--theme-color);
}

/* -------------------------------------------
   MENUS
-------------------------------------------- */
.nav-l { background-image: url('images/blue/nav-l.png'); }
.nav-m { background-image: url('images/blue/nav-m.png'); }
.nav-r { background-image: url('images/blue/nav-r.png'); }

.foot-l { background-image: url('images/blue/foot-l.png'); }
.foot-r { background-image: url('images/blue/foot-r.png'); }
.foot-m { background-image: url('images/blue/foot-m.png'); }

/* -------------------------------------------
   BLOCS / TABLES
-------------------------------------------- */
.table_announce,
fieldset,
.download {
    border-radius: 8px;
    padding: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--theme-color);
    box-shadow: 0 0 12px var(--theme-shadow);
}

/* -------------------------------------------
   INPUTS / SELECT / TEXTAREA
-------------------------------------------- */
input[type=text],
input[type=password],
textarea,
select {
    background: rgba(0,0,0,0.45);
    border: 1px solid var(--theme-color);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--theme-light);
    transition: 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    background: rgba(0,0,0,0.55);
    outline: none;
    box-shadow: 0 0 10px var(--theme-color);
}

/* Buttons */
input[type=text],
input[type=submit],
input[type=button] {
    cursor: pointer;
    background: rgba(10,20,30,0.75);
    border: 1px solid var(--theme-color);
    color: var(--theme-light);
    padding: 6px 14px;
    border-radius: 6px;
}
input[type=text]:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: rgba(20,30,40,0.85);
    box-shadow: 0 0 12px var(--theme-color);
}

/* -------------------------------------------
   SHOUTBOX — BBCode Select
-------------------------------------------- */
.bbcode-select-wrapper { 
position: relative; 
}

.bbcode-select {
    background: rgba(10,10,15,0.85);
    border: 1px solid var(--theme-color);
    border-radius: 6px;

    padding: 6px 32px 6px 10px;
    font-family: Comic Sans MS;
    font-size: 14px;
    color: var(--theme-light);

    appearance: none;
    background-image: url('../images/bbcodeselect.png');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
}

.bbcode-select option {
    background: #111;
    color: var(--theme-color);
    font-weight: bold;
}

.bbcode-select option[value="0"] {
    color: var(--theme-light);
}

/* -------------------------------------------
   YOUTUBE PLAYER — BLUE
-------------------------------------------- */
/* 1. On enlève tout cadre sur le bloc lui-même */
.blue,
.youtube-embed {
    background: none;
    border: none;
    box-shadow: none;
}

/* 2. On met le cadre SUR LA VIDÉO, donc sur l'iframe */
.blue iframe,
.youtube-embed iframe {
    background: rgba(0, 140, 255, 0.15);
    border: 2px solid rgba(0, 188, 255, 0.9);
    box-shadow: 0 0 12px rgba(0, 188, 255, 0.7);
    border-radius: 12px;
}

/* -------------------------------------------
   IMAGES / AVATARS
-------------------------------------------- */
.img0-shout,
.img1-shout,
.img2-Detail-Torrent,
.img22-Detail-Torrent,
.img3-Prez-Torrent {
    border: 2px solid var(--theme-color);
    border-radius: 8px;
    box-shadow: 0 0 12px var(--theme-shadow);
}

/* -------------------------------------------
   ICON REPLY (Bleu neon)
-------------------------------------------- */
.reply-icon-mist {
    color: var(--theme-color);
    text-shadow: 0 0 8px var(--theme-color);
    transition: 0.25s;
}
.reply-icon-mist:hover {
    color: #fff;
    text-shadow: 0 0 14px var(--theme-light);
}

/* -------------------------------------------
  PLANCHE DE BOIS — BLUE
-------------------------------------------- */
input[type=size]:hover,
input[type=reset]:hover,
input[type=button]:hover,
input[type=submit]:hover,
.jCrumbs LI UL LI A:hover,
.ttable_head,
.table_head,
.f-header,
hr, 
.f-cat td,
div.f-cat,
button,
div.menu5 {
    background-image: url('../images/blue/forum-m.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* -------------------------------------------
   Onglets torrents – planche bois stable
-------------------------------------------- */
.tt_ttable_head {
    /* dimensions fixes de la cellule */
    width: 56px;
    min-width: 56px;
    height: 60px;
    /* espace de sécurité pour la planche */
    padding: 0 6px;
    margin: 15px;
    /* image de fond */
    background-image: url('../images/blue/forum-m.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90px 40px;
    /* sécurité visuelle */
    box-sizing: border-box;
    overflow: visible;
}
@media (max-width: 900px) {
    .tt_ttable_head {
        width: 52px;
        min-width: 52px;
        background-size: 120px 40px;
    }
}
@media (max-width: 900px) {
    .tt_ttable_head {
        width: 52px;
        min-width: 52px;
        background-size: 120px 40px;
    }
}

/* -------------------------------------------
   Couleur bbcode S*
-------------------------------------------- */
.bb-s, s { text-decoration-color: #00BCFF; 
}

/* -------------------
     Poll sujet
--------------------*/
.ttable_poll{
    position:relative;
    margin:45px 40px 10px 40px;
    padding:14px 14px 18px 14px;
    border-radius:45px 45px 15px 15px;
    overflow:hidden;
clip-path:polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 10px,
    100% 100%,
    0% 100%,
    0% 10px
);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--theme-color) 20%, rgba(5,25,15,0.95)),
            rgba(3,8,6,0.98)
        );
    box-shadow:
        inset 0 0 16px var(--theme-shadow),
        0 0 8px var(--theme-shadow);
    color:#eaffef;
    text-align:center;
    text-shadow:0 0 6px var(--theme-shadow);
}

/* fond décoratif interne */
.ttable_poll::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:45px 45px 15px 15px;
    background:
        radial-gradient(
            circle at top center,
            color-mix(in srgb, var(--theme-color) 28%, transparent),
            transparent 65%
        );
}

/* -------------------------------------------
   FIN
-------------------------------------------- */