/* =========================
   THÈME VARIABLES (BASE)
========================= */

:root {

    /* DARK MODE (actuel = conservé) */
    --bg: #111;
    --text: #eee;

    --menu-bg: #1b1b1b;
    --box-bg: #1a1a1a;
    --box-alt: #222;

    --border: #444;

    --input-bg: #444;
    --input-text: #fff;

    --disabled-bg: #777;

    --link: #6cf;
    --link-hover: #9df;

    --btn-bg: #444;
    --btn-hover: #555;

    --danger: #8b1e1e;
    --danger-hover: #b22222;

    --shadow: rgba(255,255,255,0.12);

    --success: #1e4620;
    --success-border: #2e7d32;
    --success-text: #a5d6a7;

    --error: #5a1e1e;
    --error-border: #7d2e2e;
    --error-text: #f28c8c;

    --highlight: #4fc3f7;
    --highlight-bg: #1f2a33;
    --highlight-shadow: rgba(79,195,247,0.3);

    --muted-text: #aaa;
    --secondary-text: #999;

    --input-border: #666;

    --tab-active: #3a4b57;
    --tab-active-border: #4fc3f7;

    --menu-active-bg: #2a2a2a;
    --menu-hover-bg: #222;
    --menu-hover-border: #888;

    --badge-bg: #e74c3c;

    --gold: #ffcc00;
    --link-visited: #6cf;
    --link-shadow: rgba(102,204,255,0.6);

    --msg-rp: #4bfa5c;
    --msg-hrp: #ffb74d;

    --danger-border: #b33;

    --logs-border: #444;
    --logs-text: #eee;
    --logs-date: #aaa;

    --premium-glow: #ffcc00;
    --premium-badge: #ffcc00;

    --notif-bg: #e74c3c;
    --notif-text: #fff;

    --success-orange: #e67e22;
    --success-green: #2ecc71;

    --comment-meta: rgba(127,127,127,0.9);

    --adoption-bg: #1f2a33;
    --adoption-border: #4fc3f7;

    --menu-shadow: rgba(255,255,255,0.12);
    
    --constat-visible-bg:#1f3322;
    --constat-visible-text:#b8e6bc;
    --constat-visible-border:#4caf50;

    --constat-hidden-bg:#332020;
    --constat-hidden-text:#ffb0b0;
    --constat-hidden-border:#e57373;
}

body.light-mode {

    --bg: #f4f6f8;
    --text: #1e1e1e;

    --menu-bg: #ffffff;
    --box-bg: #ffffff;
    --box-alt: #f2f2f2;

    --border: #cfcfcf;

    --input-bg: #ffffff;
    --input-text: #1e1e1e;

    --disabled-bg: #ececec;

    --link: #1e5fa8;
    --link-hover: #174a82;

    --btn-bg: #e6e6e6;
    --btn-hover: #d6d6d6;

    --danger: #c0392b;
    --danger-hover: #e74c3c;

    --shadow: rgba(0,0,0,0.12);

    --success: #e8f5e9;
    --success-border: #81c784;
    --success-text: #2e7d32;

    --error: #fdecea;
    --error-border: #e57373;
    --error-text: #c62828;

    --highlight: #7db7ff;
    --highlight-bg: #dceeff;
    --highlight-shadow: rgba(125,183,255,0.3);

    --muted-text: #777;
    --secondary-text: #666;

    --input-border: #aaa;

    --tab-active: #dceeff;
    --tab-active-border: #7db7ff;

    --menu-active-bg: #dceeff;
    --menu-hover-bg: #eef5fb;
    --menu-hover-border: #9fb8cc;

    --badge-bg: #e74c3c;

    --gold: #d4a500;
    --link-visited: #0052a3;
    --link-shadow: rgba(0,82,163,0.25);

    --msg-rp: #2e7d32;
    --msg-hrp: #ef6c00;

    --danger-border: #c0392b;

    --logs-border: #bbb;
    --logs-text: #1e1e1e;
    --logs-date: #666;

    --premium-glow: #d4a500;
    --premium-badge: #d4a500;

    --notif-bg: #e74c3c;
    --notif-text: #fff;

    --success-orange: #e67e22;
    --success-green: #2ecc71;

    --comment-meta: rgba(90,90,90,0.9);

    --adoption-bg: #dceeff;
    --adoption-border: #7db7ff;

    --menu-shadow: rgba(0,0,0,0.12);

    --constat-visible-bg:#e8f5e9;
    --constat-visible-text:#2e7d32;
    --constat-visible-border:#81c784;

    --constat-hidden-bg:#fdecea;
    --constat-hidden-text:#c62828;
    --constat-hidden-border:#e57373;
}

body.theme-parchemin {

    --bg: #e8dcc4;
    --text: #3b2c1d;

    --menu-bg: #d9c7aa;
    --box-bg: #f2e6cf;
    --box-alt: #e4d4b8;

    --border: #9a7b55;

    --input-bg: #f7eedc;
    --input-text: #3b2c1d;

    --disabled-bg: #cbbca4;

    --link: #6b3f1f;
    --link-hover: #8c552b;

    --btn-bg: #c9ab80;
    --btn-hover: #b79266;

    --danger: #8a3d2e;
    --danger-hover: #aa4c39;

    --shadow: rgba(80,50,20,0.15);

    --success: #dce7c3;
    --success-border: #809966;
    --success-text: #476130;

    --error: #efd1c9;
    --error-border: #a5675d;
    --error-text: #6b2b22;

    --highlight: #9c6b30;
    --highlight-bg: #e8d7bc;
    --highlight-shadow: rgba(156,107,48,0.3);

    --muted-text: #705d4a;
    --secondary-text: #8b7764;

    --input-border: #9a7b55;

    --tab-active: #dbc4a0;
    --tab-active-border: #9c6b30;

    --menu-active-bg: #d4bea0;
    --menu-hover-bg: #e2d2b6;
    --menu-hover-border: #9c6b30;

    --badge-bg: #b54a36;

    --gold: #b8860b;
    --link-visited: #73451f;
    --link-shadow: rgba(115,69,31,0.3);

    --msg-rp: #476130;
    --msg-hrp: #b56a2d;

    --danger-border: #8a3d2e;

    --logs-border:#9a7b55;
    --logs-text:#3b2c1d;
    --logs-date:#705d4a;

    --premium-glow:#c28f2c;
    --premium-badge:#c28f2c;

    --notif-bg:#c24b38;
    --notif-text:#fff;

    --success-orange:#c27c2c;
    --success-green:#7c9e54;

    --comment-meta:rgba(90,70,50,0.8);

    --adoption-bg:#e7d5b8;
    --adoption-border:#9c6b30;

    --menu-shadow:rgba(80,50,20,0.15);

    --constat-visible-bg:#dce7c3;
    --constat-visible-text:#476130;
    --constat-visible-border:#809966;

    --constat-hidden-bg:#efd1c9;
    --constat-hidden-text:#6b2b22;
    --constat-hidden-border:#a5675d;
}

body.theme-sylvestre {

    --bg:#dce8d5;
    --text:#24321f;

    --menu-bg:#c4d4bb;
    --box-bg:#edf4e8;
    --box-alt:#d7e3cf;

    --border:#6f8a63;

    --input-bg:#f4f8f1;
    --input-text:#24321f;

    --disabled-bg:#b8c5b1;

    --link:#2f6b3b;
    --link-hover:#478f55;

    --btn-bg:#a6bb98;
    --btn-hover:#91ab82;

    --danger:#8c4f43;
    --danger-hover:#a85f52;

    --shadow:rgba(30,60,30,0.18);

    --success:#d7ead0;
    --success-border:#6d9c63;
    --success-text:#355a30;

    --error:#ecd5cf;
    --error-border:#b07a6d;
    --error-text:#6b3128;

    --highlight:#5f8a52;
    --highlight-bg:#dce8d5;
    --highlight-shadow:rgba(95,138,82,0.3);

    --muted-text:#64725d;
    --secondary-text:#7a8673;

    --input-border:#7b9270;

    --tab-active:#cadbc0;
    --tab-active-border:#5f8a52;

    --menu-active-bg:#bfd2b5;
    --menu-hover-bg:#d3e0cc;
    --menu-hover-border:#5f8a52;

    --badge-bg:#b14d3c;

    --gold:#b59642;
    --link-visited:#3f7047;
    --link-shadow:rgba(63,112,71,0.25);

    --msg-rp:#406d37;
    --msg-hrp:#9d6633;

    --danger-border:#8c4f43;

    --logs-border:#9a7b55;
    --logs-text:#3b2c1d;
    --logs-date:#705d4a;

    --premium-glow:#b59642;
    --premium-badge:#b59642;

    --notif-bg:#b14d3c;
    --notif-text:#fff;

    --success-orange:#b77a38;
    --success-green:#5e9a52;

    --comment-meta:rgba(80,90,70,0.8);

    --adoption-bg:#d7e3cf;
    --adoption-border:#5f8a52;

    --menu-shadow:rgba(30,60,30,0.18);

    --constat-visible-bg:#d7ead0;
    --constat-visible-text:#355a30;
    --constat-visible-border:#6d9c63;

    --constat-hidden-bg:#ecd5cf;
    --constat-hidden-text:#6b3128;
    --constat-hidden-border:#b07a6d;
}

body.theme-cosmique {

    --bg:#121422;
    --text:#e5e0ff;

    --menu-bg:#1b1f35;
    --box-bg:#20253f;
    --box-alt:#2a3152;

    --border:#5b5f91;

    --input-bg:#232846;
    --input-text:#f0ecff;

    --disabled-bg:#44496b;

    --link:#9d8cff;
    --link-hover:#c0b6ff;

    --btn-bg:#353d66;
    --btn-hover:#465089;

    --danger:#8b2e4c;
    --danger-hover:#b23d63;

    --shadow:rgba(180,160,255,0.2);

    --success:#28384a;
    --success-border:#5a8db8;
    --success-text:#b7dcff;

    --error:#4a2832;
    --error-border:#a65a70;
    --error-text:#ffc7d4;

    --highlight:#8f7cff;
    --highlight-bg:#272c4f;
    --highlight-shadow:rgba(143,124,255,0.35);

    --muted-text:#aaa5c8;
    --secondary-text:#8c88b0;

    --input-border:#666aa3;

    --tab-active:#313861;
    --tab-active-border:#8f7cff;

    --menu-active-bg:#2a3152;
    --menu-hover-bg:#32395d;
    --menu-hover-border:#9d8cff;

    --badge-bg:#cf4d72;

    --gold:#d8b96d;
    --link-visited:#b8a9ff;
    --link-shadow:rgba(184,169,255,0.35);

    --msg-rp:#8cffaa;
    --msg-hrp:#ffb877;

    --danger-border:#b23d63;

    --logs-border:#9a7b55;
    --logs-text:#3b2c1d;
    --logs-date:#705d4a;

    --premium-glow:#d8b96d;
    --premium-badge:#d8b96d;

    --notif-bg:#cf4d72;
    --notif-text:#fff;

    --success-orange:#d99245;
    --success-green:#68b96d;

    --comment-meta:rgba(180,180,220,0.8);

    --adoption-bg:#2a3152;
    --adoption-border:#8f7cff;

    --menu-shadow:rgba(180,160,255,0.2);

    --constat-visible-bg:#28384a;
    --constat-visible-text:#b7dcff;
    --constat-visible-border:#5a8db8;

    --constat-hidden-bg:#4a2832;
    --constat-hidden-text:#ffc7d4;
    --constat-hidden-border:#a65a70;
}

body.theme-sanglant {

    --bg:#140808;
    --text:#f2dddd;

    --menu-bg:#1d0d0d;
    --box-bg:#241010;
    --box-alt:#311616;

    --border:#6b2b2b;

    --input-bg:#2b1414;
    --input-text:#f2dddd;

    --disabled-bg:#553333;

    --link:#d45a5a;
    --link-hover:#ff8d8d;

    --btn-bg:#4b1f1f;
    --btn-hover:#652727;

    --danger:#8b0000;
    --danger-hover:#b30000;

    --shadow:rgba(255,80,80,0.18);

    --success:#24361f;
    --success-border:#4f8b4f;
    --success-text:#cce7cc;

    --error:#4a1515;
    --error-border:#c05050;
    --error-text:#ffbaba;

    --highlight:#a11c1c;
    --highlight-bg:#331616;
    --highlight-shadow:rgba(200,50,50,0.3);

    --muted-text:#aa8888;
    --secondary-text:#997777;

    --input-border:#7a4444;

    --tab-active:#3b1919;
    --tab-active-border:#c33;

    --menu-active-bg:#341414;
    --menu-hover-bg:#431919;
    --menu-hover-border:#c33;

    --badge-bg:#ff4444;

    --gold:#d4aa44;
    --link-visited:#ff9999;
    --link-shadow:rgba(255,120,120,0.25);

    --msg-rp:#84d684;
    --msg-hrp:#ffb36b;

    --danger-border:#d33;

    --logs-border:#9a7b55;
    --logs-text:#3b2c1d;
    --logs-date:#705d4a;

    --premium-glow:#d4aa44;
    --premium-badge:#d4aa44;

    --notif-bg:#ff4444;
    --notif-text:#fff;

    --success-orange:#d98a3d;
    --success-green:#69b969;

    --comment-meta:rgba(180,120,120,0.8);

    --adoption-bg:#331616;
    --adoption-border:#a11c1c;

    --menu-shadow:rgba(255,80,80,0.18);

    --constat-visible-bg:#24361f;
    --constat-visible-text:#cce7cc;
    --constat-visible-border:#4f8b4f;

    --constat-hidden-bg:#4a1515;
    --constat-hidden-text:#ffbaba;
    --constat-hidden-border:#c05050;
}

body.theme-bonbon {

    --bg:#ffeef5;
    --text:#5a3a4a;

    --menu-bg:#ffdbe8;
    --box-bg:#fff6fa;
    --box-alt:#ffe8f1;

    --border:#d9a8ba;

    --input-bg:#fffafb;
    --input-text:#5a3a4a;

    --disabled-bg:#ead3dc;

    --link:#c05a8c;
    --link-hover:#d86ca0;

    --btn-bg:#f6bfd3;
    --btn-hover:#eca9c3;

    --danger:#c76478;
    --danger-hover:#d97a8d;

    --shadow:rgba(180,80,120,0.15);

    --success:#e6f6e6;
    --success-border:#8bc48b;
    --success-text:#447744;

    --error:#ffe0e5;
    --error-border:#d98b9a;
    --error-text:#94495a;

    --highlight:#e88cb8;
    --highlight-bg:#ffe6f0;
    --highlight-shadow:rgba(232,140,184,0.3);

    --muted-text:#8c6f7c;
    --secondary-text:#9d7f8d;

    --input-border:#d9a8ba;

    --tab-active:#ffd9e8;
    --tab-active-border:#e88cb8;

    --menu-active-bg:#ffd2e4;
    --menu-hover-bg:#ffe3ef;
    --menu-hover-border:#e88cb8;

    --badge-bg:#ff6b9e;

    --gold:#d6a642;
    --link-visited:#b44d7c;
    --link-shadow:rgba(212,100,150,0.25);

    --msg-rp:#5aa35a;
    --msg-hrp:#d17d3f;

    --danger-border:#c76478;

    --logs-border:#9a7b55;
    --logs-text:#3b2c1d;
    --logs-date:#705d4a;

    --premium-glow:#ff9bc5;
    --premium-badge:#ff9bc5;

    --notif-bg:#ff6b9e;
    --notif-text:#fff;

    --success-orange:#d9a05c;
    --success-green:#78ba78;

    --comment-meta:rgba(120,90,105,0.8);

    --adoption-bg:#ffe6f0;
    --adoption-border:#e88cb8;

    --menu-shadow:rgba(180,80,120,0.15);

    --constat-visible-bg:#e6f6e6;
    --constat-visible-text:#447744;
    --constat-visible-border:#8bc48b;

    --constat-hidden-bg:#ffe0e5;
    --constat-hidden-text:#94495a;
    --constat-hidden-border:#d98b9a;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================
   BASE GLOBALE
========================= */
body {
    margin: 0;
    font-family: Arial;
    background: var(--bg);
    color: var(--text);
}

.container {
    display:flex;
    width:100%;
    align-items:stretch; /* étire menu + contenu à la même hauteur */
    min-height:100vh;
}

/* =========================
   MENU
========================= */
.menu {
    width:325px;
    background:var(--menu-bg);
    padding:15px;
    padding-bottom:70px;

    position: relative;
    z-index: 20;
}

.menu a {
    display:block;
    color: var(--text);
    margin-bottom:10px;
    text-decoration:none;
    opacity:0.85;
    transition:0.2s;
}

.menu a:hover {
    background: var(--box-alt);
    border-left:3px solid var(--link);
    padding-left:8px;
    opacity:1;
}

.menu-user {
    margin:10px 0 15px 0;
    padding:12px;
    background: var(--box-bg);
    border: 1px solid var(--border);
    border-radius:8px;
    text-align:center;
    line-height:1.4;
}

.menu-user-name {
    font-size:15px;
    font-weight:bold;
    color: var(--text);
    word-break:break-word;
}

.menu-user-meta {
    margin-top:4px;
    font-size:13px;
    color: var(--text);
    opacity: 0.7;
}

/* =========================
   RÉGLAGE ANIMATIONS
========================= */

.animation-speed{

display:flex;
align-items:center;
gap:8px;

margin-top:8px;

padding:8px;

background:
var(--box-bg);

border:
1px solid var(--border);

border-radius:
8px;

overflow:visible;

}


.animation-speed input{

flex:1 1 auto;

cursor:pointer;

margin:0;
padding:0;

min-width:0;

display:block;

}

.animation-speed input[type=range]{

accent-color:
var(--link);

flex:1;

width:auto;

margin:0;
padding:0;

-webkit-appearance:none;
appearance:none;

background:
transparent;

}

/* curseur */

.animation-speed input[type=range]::-webkit-slider-thumb{

width:14px;
height:14px;

margin-left:0;
margin-right:0;

border-radius:50%;

background:
var(--link);

cursor:pointer;

margin-top:-5px;

/* décale légèrement vers la droite */
transform:
translateX(7px);

position:relative;
z-index:2;

}

.animation-speed input[type=range]::-webkit-slider-runnable-track{

height:4px;

width:calc(100% - 10px);

margin-left:5px;
margin-right:5px;

background:
rgba(255,255,255,.15);

border-radius:
999px;

}

.animation-speed{

overflow:visible;

}


/* Firefox */

.animation-speed input[type=range]::-moz-range-thumb{

width:14px;
height:14px;

border:none;
border-radius:50%;

background:
var(--link);

cursor:pointer;

transform:
translateX(7px);

}

.animation-speed input[type=range]::-moz-range-track{

height:4px;

width:calc(100% - 10px);

background:
rgba(255,255,255,.15);

border-radius:
999px;

margin-left:5px;
margin-right:5px;

}

/* =========================
   SWITCH ANIMATIONS
========================= */

.animation-toggle{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

margin-bottom:12px;
padding:10px;

background:
var(--box-bg);

border:
1px solid var(--border);

border-radius:
8px;

}


.animation-label{

font-size:
13px;

color:
var(--text);

opacity:
0.9;

}



.switch{

position:
relative;

display:
inline-block;

width:
42px;

height:
22px;

}



.switch input{

opacity:
0;

width:
0;

height:
0;

}



.slider{

position:
absolute;

cursor:
pointer;

inset:
0;

background:
var(--box-alt);

border:
1px solid var(--border);

border-radius:
40px;

transition:
.25s;

}



.slider:before{

content:"";

position:
absolute;

height:
16px;

width:
16px;

left:
2px;

bottom:
2px;

background:
var(--highlight);

border-radius:
50%;

transition:
.25s;

}



.switch input:checked + .slider{

background:
var(--btn-bg);

}



.switch input:checked + .slider:before{

transform:
translateX(19px);

}

/* =========================
   CONTENU
========================= */
.content {
    display:flex;
    flex:1;
    padding:20px;
    padding-bottom:80px;
    gap:20px;
    align-items:stretch;
    background:var(--bg);
    min-height:100vh;
}

.main {
    flex:1;
    padding-right:20px;
    min-width:0;
}

.right { width:325px; }

/* =========================
   BLOCS (UNIFIÉS)
========================= */
.box,
.news-item,
.sphere-box,
.news-form {
    background:var(--box-bg);
    border:1px solid var(--border);
    padding:15px;
    border-radius:8px;
    margin-bottom:15px;
}

/* Variante sphère active */
.sphere-active {
    border:2px solid var(--highlight);
}

/* =========================
   INPUTS / FORMULAIRES
========================= */
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]) {
    background:var(--input-bg);
    color:var(--input-text);
}

input[disabled],
textarea[disabled],
select[disabled] {
    background:var(--disabled-bg) !important;
    color:var(--input-text) !important;
    border:1px solid var(--border);
    opacity:1;
}

body.light-mode input[disabled],
body.light-mode textarea[disabled],
body.light-mode select[disabled] {
    background:#ececec !important;
    color:#1e1e1e !important;
}

/* radios fix */
input[type="radio"] {
    width:auto !important;
    margin:0;
}

/* Uniformisation inputs / selects */
input,
select {
    width:250px;
    max-width:100%;
    margin-bottom:10px;
    padding:6px;
    border-radius:4px;
    border:1px solid var(--input-border);
    box-sizing:border-box;
    height:34px;
}

textarea {
    width:100%;
    margin-bottom:10px;
    padding:6px;
    border-radius:4px;
    border:1px solid var(--input-border);
    box-sizing:border-box;
}

textarea:not(.parchemin-textarea) {
    min-height: 200px; /* ~10 lignes */
    height: 200px;
    resize: vertical;
}

/* =========================
   SELECTS (menus déroulants visibles)
========================= */

select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;

    background:var(--input-bg);
    color:var(--input-text);
    padding-right:30px; /* espace pour flèche */
    cursor:pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #bbb 50%),
        linear-gradient(135deg, #bbb 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 14px,
        calc(100% - 12px) 14px;
    background-size:6px 6px;
    background-repeat:no-repeat;
}

/* même chose si désactivé */
select[disabled] {
    appearance:auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background:var(--disabled-bg);
    background-image:
        linear-gradient(45deg, transparent 50%, #ddd 50%),
        linear-gradient(135deg, #ddd 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 14px,
        calc(100% - 12px) 14px;
    background-size:6px 6px;
    background-repeat:no-repeat;
}

/* =========================
   INPUTS NUMÉRIQUES (flèches toujours visibles)
========================= */

input[type="number"] {
    appearance:auto;
    -moz-appearance:auto;
    -webkit-appearance:auto;
    padding-right:5px;
}

/* garde les petites flèches visibles Chrome */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity:1;
    height:auto;
}

/* =========================
   BOUTONS (UNIFIÉS)
========================= */

button,
input[type="submit"],
input[type="button"] {
    padding: 8px 14px;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.1s;
    font-size: 14px;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--btn-hover);
    box-shadow: 0 0 8px var(--shadow);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: scale(0.98);
}

button[disabled],
input[disabled] {
    background: #777;
    border-color: #888;
    cursor: default;
    opacity: 1;
}

/* =========================
   BOUTONS SUPPRESSION
========================= */

.delete-btn {
    background: var(--danger) !important;
    border:1px solid var(--danger-border) !important;
    display:inline-block;
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
    color:#fff !important;
    cursor:pointer;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.1s;
}

.delete-btn:hover {
    background: var(--danger-hover) !important;
    box-shadow:0 0 8px var(--shadow);
}

.delete-btn:active {
    transform:
        scale(0.98);
}



/* =========================
   LIENS
========================= */
a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

/* =========================
   MESSAGES
========================= */
.message-item {
    margin-bottom:25px;
    padding:15px;
    border: 1px solid var(--border);
    border-radius:8px;
    background: var(--box-bg);
}

.msg-type-rp {
    color:var(--msg-rp);
    font-weight:bold;
}

.msg-type-hrp {
    color:var(--msg-hrp);
    font-weight:bold;
}

/* =========================
   COMMENTAIRES
========================= */
.comments-container {
    margin-top:10px;
    background: var(--box-bg);
    padding:10px;
    border-radius:6px;
}

.comment-box {
    background:var(--box-alt);
    border:1px solid var(--border);
    padding:8px;
    margin-bottom:6px;
    border-radius:6px;
}

.comment-meta {
    font-size:0.8em;
    color:var(--comment-meta);
}

/* =========================
   AVATAR / RANG
========================= */
.avatar {
    height:200px;
    background: var(--box-alt);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
}

/* =========================
   PHOTO PROFIL
========================= */

.photo-box {
    display:inline-block; /* empêche de prendre toute la largeur */
    border-radius:8px;

    position: relative;
    z-index: 20;
}

.profile-photo,
.profile-photo-empty {

    width:300px;
    height:600px;

    border-radius:8px;
    border:1px solid var(--border);

    background:var(--box-bg);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--text);
    text-align:center;
    font-size:22px;

    object-fit:cover;
}

.rank {
    background: var(--box-alt);
    border: 1px solid var(--border);
    padding:10px;
    text-align:center;
}

/* =========================
   EFFETS
========================= */
.new-msg {
    border:1px solid var(--highlight);
    box-shadow:0 0 8px var(--highlight-shadow);
    background:var(--highlight-bg);
}

@keyframes pop {
    0% { transform:scale(0.5); opacity:0; }
    100% { transform:scale(1); opacity:1; }
}

.menu span {
    animation:pop 0.25s ease;
}

.adoption-highlight {
border:1px solid var(--adoption-border) !important;
box-shadow: 0 0 8px var(--highlight-shadow) !important;
background:var(--adoption-bg) !important;
}

/* =========================
   CARTE DIVYNE
========================= */
.top-box {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    background: var(--box-bg);
    border: 1px solid var(--border);
    padding:15px;
    border-radius:8px;
    margin-bottom:20px;
}

/* champs spécifiques carte_divyne */
.top-box .col input,
.top-box .col select {
    width:100%;
    min-width:0;
    max-width:none;
}

.top-box h3 {
    width:100%;
    margin-bottom:10px;
}

.top-box h2 {

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;

    line-height:1.6;
    text-align:center;
}

.inline-allegiance {

    display:inline-flex;
    align-items:center;
    gap:8px;

    font-size:0.9em;
    font-weight:normal;
}

.inline-allegiance select {

    width:auto !important;
    min-width:260px;
    margin:0;
}

.col {
    flex:1;
    min-width:220px;
    box-sizing:border-box;
}

.full-width-row {
    width:100%;
    margin-top:10px;
}

.full-width-row label {
    display:block;
    margin-bottom:5px;
    font-weight:bold;
}

.parrainage-line {
    width:100%;
    margin-top:10px;
    line-height:1.7;
}

.parrainage-line strong {
    margin-right:8px;
}

.godchildren-list a {
    display: inline-block;
    margin: 2px 0;
}

.partner-row {
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.partner-row select {
    flex:1;
}

#partner-id-box {
    flex:1;
    display:none;
}

#partner-id-box.visible {
    display:block;
}

#partner-id-box input {
    margin-bottom:0;
}

/* =========================
   INPUTS (AJUSTEMENTS MANQUANTS)
========================= */
select[disabled] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

/* Champs non modifiables harmonisés */

.top-box input:disabled,
.top-box select:disabled {

    background:
    var(--box-alt);

    color:
    var(--text);

    border:
    1px solid var(--border);

    opacity:
    1;

    box-shadow:
    inset 0 0 4px rgba(0,0,0,.08);

    cursor:
    default;
}

/* =========================
   BOUTONS ÉDITION
========================= */
.edit-btn {
    position:absolute;
    top:10px;
    right:10px;
    z-index: 2;
}

.box {
    position: relative;
}

/* =========================
   MESSAGES SYSTEME
========================= */
.success-msg {
    background:var(--success);
    border:1px solid var(--success-border);
    color:var(--success-text);
    padding:10px;
    margin-bottom:15px;
    border-radius:6px;
}

.error-msg {
    background:var(--error);
    border:1px solid var(--error-border);
    color:var(--error-text);
    padding:10px;
    margin-bottom:15px;
    border-radius:6px;
}

/* =========================
   FORM BOX (MESSAGERIE)
========================= */
.form-box {
    background:var(--box-bg);
    border:1px solid var(--border);
    border-radius:6px;
    padding:10px;
    width:265px;
    max-width:100%;
}

.form-box input[type="radio"] {
    transform: scale(1.1);
    width: auto !important;
    margin: 0;
}

.form-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

.message-top-row{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.message-type-inline{
    display:flex;
    align-items:center;
    gap:20px;
}

.message-type-inline label{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
}

.message-form-layout{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;

}

.message-form-left{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:auto;
}

.message-form-right{
    flex:1;
    min-width:250px;
}

.message-form-right textarea{
    height:100%;
    min-height:180px;
}

/* =========================
   MESSAGES (DÉTAILS)
========================= */
.message-item .msg-date {
    font-size:0.85em;
    color:#999;
}

.reply-form textarea {
    width:100%;
    margin-bottom:5px;
    padding:5px;
    border-radius:4px;
    border:1px solid var(--input-border);
    background:var(--input-bg);
    color:var(--input-text);
}

.pagination a {
    margin:0 5px;
    color:var(--link);
    text-decoration:none;
}

.pagination a:hover {
    text-decoration:underline;
}

.replies {
    margin-top:10px;
}

.reply {
    background:var(--box-alt);
    padding:8px;
    margin-top:5px;
    border-radius:6px;
}

/* =========================
   LIENS CONTENU (ANTI VIOLET)
========================= */
.content a:not(.menu a):not(.log-link) {
    color: var(--link);
    text-decoration: none;
}

.content a:not(.menu a):not(.log-link):visited {
    color: var(--link);
}

.content a:not(.menu a):not(.log-link):hover {
    color: var(--link-hover);
    text-shadow:0 0 6px var(--link-shadow);
    text-decoration: underline;
}

/* =========================
   LIENS MESSAGES PRIORITAIRES
========================= */
.message-item a,
.message-item a:visited,
.message-item a:active {
    color:var(--link) !important;
    text-decoration: none;
}

.message-item a:hover {
    color:var(--link-hover) !important;
    text-shadow:0 0 6px var(--link-shadow);
    text-decoration: underline;
}

/* =========================
   CADEAUX (fiche.php)
========================= */
.cadeaux-box a {
    color:var(--link);
    text-decoration:none;
}

.cadeaux-box a:visited {
    color:var(--link-visited);
}

.cadeaux-box a:hover {
    color:var(--link-hover);
    text-shadow:0 0 6px var(--link-shadow);
    text-decoration:underline;
}

/* =========================
   CADEAUX (PAGE)
========================= */
.gift-item {
    display:flex;
    align-items:center;
    padding:12px 15px;
    border:1px solid var(--border);
    border-radius:8px;
    margin-bottom:10px;
    cursor:pointer;
    transition:0.2s;
    position: relative;
    font-size:16px;
}

.gift-item:hover {
    background:var(--box-alt);
    transform:scale(1.02);
}

.gift-item.premium {
    box-shadow:0 0 12px var(--premium-glow);
}

.gift-item .premium-badge {
    margin-left:8px;
    color:var(--premium-badge);
}

.gift-icon {
    font-size:22px;
    margin-right:10px;
}

.gift-price {
    margin-left:10px;
    color:var(--muted-text);
}

.gift-item input[type="radio"] {
    position:static;
    transform:none;
    margin-right:10px;
}

.gift-item input[type="radio"] {
    order:-1;
    margin-right:10px;
}

/* Messages cadeaux (compatibilité ancienne classe) */
.success {
    background:var(--success);
    padding:10px;
    border-radius:6px;
    margin-bottom:10px;
}

.error {
    background:var(--error);
    padding:10px;
    border-radius:6px;
    margin-bottom:10px;
}

/* =========================
   FORMULAIRES ADMIN (IVY)
========================= */
.admin-box {
    max-width:500px;
}

.admin-box input,
.admin-box select,
.admin-box button {
    width:100%;
    margin-top:10px;
}

/* messages succès spécifiques (orange / vert) */
.success-orange {
    background:var(--success-orange);
    padding:10px;
    border-radius:5px;
    margin-bottom:15px;
    color:#000;
    font-weight:bold;
}

.success-green {
    background:var(--success-green);
    padding:10px;
    border-radius:5px;
    margin-bottom:15px;
    color:#000;
    font-weight:bold;
}

/* =========================
   LOGS
========================= */
.logs-entry{
    border:1px solid var(--logs-border);
    padding:10px;
    margin-bottom:10px;
    border-radius:6px;
    width:50%;
    max-width:100%;

    color:var(--logs-text);
}

.logs-date{
    font-size:12px;
    margin-bottom:5px;
    color:var(--logs-date);
}


/* =====================
   TYPES DE LOGS
===================== */
.logs-rang{
    background:#214d25;
    color:#e8ffe8;
    border-color:#4caf50;
}

.logs-rang .logs-date{
    color:#b8ddb8;
}

.logs-sphere{
    background:#1c446f;
    color:#eef7ff;
    border-color:#5da6ff;
}

.logs-sphere .logs-date{
    color:#c6dfff;
}

.logs-proposal{
    background:#29593a;
    color:#f0fff4;
    border-color:#7ecb94;
}

.logs-proposal .logs-date{
    color:#c8e6d0;
}

.logs-banperm{
    background:#5c1a1a;
    color:#ffeaea;
    border-color:#d66;
}

.logs-banperm .logs-date{
    color:#f0b8b8;
}

.logs-bantemp{
    background:#6a4b16;
    color:#fff6df;
    border-color:#e0b85d;
}

.logs-bantemp .logs-date{
    color:#edd8a9;
}

.logs-adoption{
    background:#5a1875;
    color:#f7e7ff;
    border-color:#b36ce6;
}

.logs-adoption .logs-date{
    color:#dcb8ef;
}

.logs-union{
    background:#6a1a4f;
    color:#ffe8f6;
    border-color:#d46fb0;
}

.logs-union .logs-date{
    color:#efbfdc;
}

.logs-amende{
    background:#8a5c12;
    color:#fff5df;
    border-color:#e0aa47;
}

.logs-amende .logs-date{
    color:#ecd5a0;
}

.logs-default{
    background:var(--box-bg);
    color:var(--text);
}

.logs-default .logs-date{
    color:var(--muted-text);
}

/* =========================
   PARCHEMIN - chat complet avec footer
========================= */

body.parchemin-page .main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    overflow: hidden;
}

/* zone messages */
.chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: var(--box-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    min-height: 0; /* IMPORTANT pour éviter dépassement flex */
}

/* formulaire */
#chat-form {
    display: flex;
    justify-content: center;  /* 🔹 centre horizontalement */
    align-items: center;      /* 🔹 aligne verticalement bouton & champ */
    gap: 10px;                /* 🔹 espace entre champ et bouton */
    margin-top: 10px;
}

/* textarea */
.parchemin-textarea {
    flex: 0 0 80%;            /* prend 80% de la largeur du row */
    min-height: 34px;
    max-height: 90px;
    resize: vertical;
    padding: 6px;
}

/* bouton */
#chat-form button {
    flex: 0 0 auto;           /* garde sa taille naturelle */
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    line-height: 1;
}

/* =========================
   NEWS (MANQUANTS)
========================= */
.news-header {
    margin-bottom:10px;
}

.news-title {
    font-size:1.2em;
    cursor:pointer;
}

/* =========================
   VOTES NEWS GOV
========================= */

.vote-btn {
    margin-right:5px;
}

.vote-btn.active-up {
    color:#2e7d32;
    border:2px solid currentColor;
    font-weight:bold;
}

.vote-btn.active-down {
    color:#c62828;
    border:2px solid currentColor;
    font-weight:bold;
}

/* =========================
   POLL INPUTS (NEWS SONDAGES)
========================= */

.poll-box input[type="radio"],
.poll-box input[type="checkbox"] {
    transform: scale(0.8);
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.poll-box label {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.poll-box label:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

/* =========================
   PARCHEMIN (CHAT)
========================= */
.chat-box {
    flex:1;
    background: var(--box-bg);
    border: 1px solid var(--border);
    padding:15px;
    border-radius:8px;
    overflow-y:auto;
    margin-bottom:15px;
}

.msg {
    margin-bottom:10px;
}

.meta {
    font-size:12px;
    color:var(--muted-text);
}

body.light-mode .chat-box {
    color:#1e1e1e;
}

body.light-mode .chat-box *:not(a) {
    color:#1e1e1e !important;
}

body.theme-parchemin .chat-box {
    color:#3b2c1d;
}

body.theme-parchemin .chat-box *:not(a) {
    color:#3b2c1d !important;
}

body.theme-parchemin .chat-box .meta {
    color:#705d4a !important;
}

body.theme-sylvestre .chat-box {
    color:#24321f;
}

body.theme-sylvestre .chat-box *:not(a) {
    color:#24321f !important;
}

body.theme-sylvestre .meta {
    color:#64725d !important;
}

body.theme-cosmique .chat-box {
    color:#e5e0ff;
}

body.theme-cosmique .chat-box *:not(a) {
    color:#e5e0ff !important;
}

body.theme-cosmique .meta {
    color:#aaa5c8 !important;
}


body.theme-sanglant .chat-box {
    color:#f2dddd;
}

body.theme-sanglant .chat-box *:not(a) {
    color:#f2dddd !important;
}

body.theme-sanglant .meta {
    color:#aa8888 !important;
}

body.theme-bonbon .chat-box {
    color:#5a3a4a;
}

body.theme-bonbon .chat-box *:not(a) {
    color:#5a3a4a !important;
}

body.theme-bonbon .meta {
    color:#8c6f7c !important;
}

.meta a {
    color:var(--link-visited);
    text-decoration:none;
}

.meta a:visited {
    color:var(--link-visited);
}

.meta a:hover {
    color:#9df;
    text-shadow:0 0 6px var(--link-shadow);
}

html, body {
    height:100%;
    background: var(--bg);
}

.main {
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:calc(100vh - 100px);
}

.chat-box {
    flex:1;
    overflow-y:auto;
    min-height:0; /* 🔥 empêche le débordement */
}

/* =========================
   UNION DIVYNE
========================= */

.union-columns {
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.union-column {
    flex:1;
}

.union-column h2 {
    text-align:center;
}

.union-meta {
    font-size:13px;
    color:var(--muted-text);
    margin-bottom:10px;
}

.union-comments {
    margin-top:15px;
}

.union-comment-box {
    background:var(--box-alt);
    border:1px solid var(--border);
    padding:8px;
    margin-top:8px;
    border-radius:6px;
}

.union-comment-meta {
    font-size:12px;
    color:var(--comment-meta);
    margin-bottom:5px;
}

.union-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.union-actions form {
    margin:0;
}

.comment-count {
    color:var(--muted-text);
    font-size:14px;
}

.union-box {
    background: var(--box-bg);
    border:1px solid var(--border);
    padding:15px;
    border-radius:8px;
    margin-bottom:15px;
}

.union-search-form {
    margin-bottom:20px;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.union-search-form input[type="text"] {
    width:250px;
    margin-bottom:0;
}

/* =========================
   ADMIN / RANK MANAGEMENT
========================= */
.box select,
.box button {
    margin-top:5px;
}

/* =========================
   FORM RECHERCHE ADMIN
========================= */
.content form input[type="text"] {
    padding:6px;
    width:250px;
}

/* =========================
   CORRECTION LAYOUT COLONNE (PAGES SANS .main)
========================= */
.content:not(:has(.main)) {
    flex-direction: column;
    align-items: stretch;
}

/* =========================
   ALIGNEMENT RADIOS (GLOBAL SAFE)
========================= */
.form-box label,
.content label {
    display:flex;
    align-items:center;
    gap:8px;
}

/* =========================
   MENU AMÉLIORÉ
========================= */

.menu h3 {
    font-size:16px;
    line-height:1.3;
    margin-bottom:15px;
}

.menu a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

/* badges notifications */
.notif {
    background:var(--notif-bg);
    color:var(--notif-text);
    border-radius:12px;
    padding:2px 8px;
    font-size:12px;
    flex-shrink:0;
}

/* séparateurs */
.menu-sep {
    height:1px;
    background:var(--border);
    margin:12px 0;
    opacity:0.6;
}

/* bloc écus */
.menu-ecus {
    margin-top:20px;
    background: var(--box-bg);
    border: 1px solid var(--border);
    border-radius:8px;
    padding:10px;
    font-size:13px;
    color: var(--text);
}

/* =========================
   MENU ACTIF
========================= */

.menu a.active {
    background:var(--menu-active-bg);
    border-left:3px solid var(--tab-active-border);
    padding-left:8px;
    color:#fff;
    font-weight:bold;
}

/* petit effet hover amélioré */
.menu a:hover {
    background:var(--menu-hover-bg);
    border-left:3px solid var(--menu-hover-border);
    padding-left:8px;
}

/* =========================
   MENU (MODE CLAIR)
========================= */

body.light-mode .menu a.active {
    background:#dceeff;
    border-left:3px solid #7db7ff;
    color:#1e1e1e;
}

body.light-mode .menu a:hover {
    background:#eef5fb;
    border-left:3px solid #9fb8cc;
    color:#1e1e1e;
}

/* =========================
   FOOTER
========================= */

.footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background: var(--menu-bg);
    text-align:center;
    padding:10px;
    font-size:12px;
    border-top: 1px solid var(--border);
    z-index: 50;
}

.footer a {
    color:var(--text);
    opacity:0.7;
    margin:0 8px;
}

.footer a:hover {
    color:var(--link);
    opacity:1;
}

/* =========================
   CONSTATS
========================= */

.constat-item {
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px;
    margin-bottom:12px;
}

.constat-visible {
    background:var(--constat-visible-bg);
    color:var(--constat-visible-text);
    border-color:var(--constat-visible-border);
}

.constat-hidden {
    background:var(--constat-hidden-bg);
    color:var(--constat-hidden-text);
    border-color:var(--constat-hidden-border);
}

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

.constats-box a {
    color:var(--link-visited);
    text-decoration:none;
}

.constats-box a:visited {
    color:var(--link-visited);
}

.constats-box a:hover {
    color:#9df;
    text-shadow:0 0 6px var(--link-shadow);
    text-decoration:underline;
}

body.light-mode .constat-item p,
body.light-mode .constat-item strong {
    color:inherit;
}

/* =========================
   LISTE IVYENS
========================= */

.ivyens-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:20px;
}

.ivyens-tabs a{
    background:var(--btn-bg);
    border:1px solid var(--border);
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
    color:var(--text) !important;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}


.ivyens-tabs a:hover{
    background:var(--btn-hover);
    border-color:var(--border);
    color:var(--text) !important;
    box-shadow:
        0 0 8px var(--menu-shadow)
}


.active-tab,
.active-tab:visited,
.active-tab:hover {
    background:var(--tab-active) !important;
    border:1px solid var(--tab-active-border) !important;
    color:var(--text) !important;
}

/* mode clair */
body.light-mode .active-tab,
body.light-mode .active-tab:visited,
body.light-mode .active-tab:hover {
    background:#dceeff !important;
    border:1px solid #7db7ff !important;
    color:#1e1e1e !important;
}


.ivyen-card{
    transition:
    0.2s;
}


.ivyen-card:hover{
    transform:
    scale(1.01);
}

.ivy-ancestry-line {
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    padding: 10px;
}

.ancestry-node {
    display: flex;
    align-items: center;
}

.ancestry-card {
    min-width: 220px;
}

/* flèche stylisée */
.ancestry-arrow {
    font-size: 28px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    animation: ancestryPulse 1.8s infinite ease-in-out;
    user-select: none;
}

/* petit effet vivant */
@keyframes ancestryPulse {
    0% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(-4px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.6; }
}

/* =========================
   LISTE IVYENS (VIGNETTES)
========================= */

.ivyens-grid {
display:grid;
grid-template-columns:
repeat(
auto-fill,
minmax(180px,1fr)
);

gap:20px;
}


.ivyen-card {
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:15px;
min-height:240px;
transition:0.2s;
background: var(--box-bg);
border: 1px solid var(--border);
border-radius:8px;
}


.ivyen-card:hover {
transform:
translateY(-3px);
}


.ivyen-photo {
width:120px;
height:240px;
margin-bottom:12px;
overflow:hidden;
border-radius:8px;
border: 1px solid var(--border);
background: var(--box-bg);
display:flex;
justify-content:center;
align-items:center;
}


.ivyen-photo img {
width:100%;
height:100%;
object-fit:cover;
}


.ivyen-no-photo {

font-size:12px;
color:#888;
padding:10px;
}


.ivyen-name {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
word-break:break-word;
}


.ivyen-meta {
font-size:14px;
color:var(--muted-text);
line-height:1.5;
margin-bottom:10px;
}


.ivyen-sphere {
font-size:13px;
color:var(--secondary-text);
margin-top:auto;
padding-top:8px;
}

/* =========================
   REGLEMENT
========================= */

.reglement-box {
    max-width: 1100px;
    margin: 0 auto;
}

.reglement-box h2 {
    text-align:center;
    margin-bottom:20px;
}

.reglement-texte {
    white-space: pre-wrap;
    line-height: 1.8;
    background:var(--box-bg);
    border:1px solid var(--border);
    border-radius:
    8px;
    padding:
    20px;
    margin:
    25px 0;
    overflow-wrap:
    break-word;
}

.reglement-box hr {
    border:none;
    border-top:1px solid var(--border);
    margin:25px 0;
}

.reglement-box button {
    margin-top:15px;
    padding:10px 20px;
}

.reglement-box .form-box {
    margin-top:20px;
} 

/* =========================
   REGISTER.PHP
========================= */

/* largeur identique pour tous les champs */
form input {
    width:250px;
    max-width:100%;
}

form textarea {
    width:100%;
}

/* placeholder uniforme */
input::placeholder,
textarea::placeholder {
    color:var(--muted-text);
    opacity:1;
}

/* correction spécifique input date */
input[type="date"] {
    color:var(--input-text);
}

/* texte jj/mm/aaaa */
input[type="date"]::-webkit-datetime-edit {
    color:var(--muted-text);
}

input[type="date"]:valid::-webkit-datetime-edit {
    color:var(--input-text);
}

/* bloc règles */
.register-rules {
    margin-top:10px;
    margin-bottom:20px;
}

.register-rules-label {
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    line-height:1.5;
    cursor:pointer;
}

/* case */
.register-rules-label input[type="checkbox"] {
    width:auto !important;
    margin-top:3px;
    flex-shrink:0;
}

/* =========================
   CHANGE PASSWORD
========================= */

.change-password-form input,
.change-password-form button {
    display:block;
}

/* =========================
   GESTION ADOPTIONS
========================= */

.adoption-final-form-row {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:15px;
}

.adoption-final-form-group {
    display:flex;
    flex-direction:column;
}

.message-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.message-tabs a {
    background:var(--btn-hover);
    border:1px solid var(--border);
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
    color:var(--text) !important;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

.message-tabs a:hover {
    background:var(--btn-hover);
    border-color:var(--border);
    color:var(--text) !important;
    box-shadow:
        0 0 8px var(--menu-shadow)
}

.message-tabs a.active-tab {
    background:var(--tab-active) !important;
    border:1px solid var(--tab-active-border) !important;
    color:var(--text) !important;
}

/* =========================
   MESSAGE DÉJÀ RÉPONDU
========================= */

.reply-indicator {
    display:inline-block;
    margin-left:10px;
    padding:5px 10px;
    background:var(--success);
    border:1px solid var(--success-border);
    border-radius:6px;
    color:var(--success-text);
    font-size:13px;
    vertical-align:middle;
}

/* =========================
   APPARENCE DU SLIDER DE VITESSE ANIMATION (sinon, la ligne ne se voit pas sur certains thèmes)
========================= */

#animation-speed {
    width: 120px;
    background: transparent;
    appearance: none;
}

/* piste du slider - Chrome / Edge */
#animation-speed::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--border);
    border-radius: 999px;
    opacity: 0.8;
}

/* curseur - Chrome / Edge */
#animation-speed::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--link);
    cursor: pointer;
    margin-top: -5px;
}

/* piste - Firefox */
#animation-speed::-moz-range-track {
    height: 4px;
    background: var(--border);
    border-radius: 999px;
    opacity: 0.8;
}

/* curseur - Firefox */
#animation-speed::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--link);
    cursor: pointer;
    border: none;
}

/* =========================
   BBCODE TOOLBAR
========================= */

.bbcode-toolbar{

display:flex;
flex-wrap:wrap;
gap:6px;

margin-bottom:10px;

padding:8px;

background:var(--box-alt);

border:1px solid var(--border);

border-radius:6px;

}

.bbcode-toolbar button{

margin:0;

padding:6px 10px;

font-size:13px;

}

.bb-color{

width:40px !important;

height:32px;

padding:0;

margin:0;

cursor:pointer;

}

/* =========================
   MODULE ROMANS
========================= */

.romans-pub-box{

    margin-top:15px;

    width:300px;

    background:var(--box-bg);

    border:1px solid var(--border);

    border-radius:8px;

    overflow:hidden;
}

.romans-pub-title{

    text-align:center;

    padding:10px;

    font-weight:bold;

    border-bottom:1px solid var(--border);

    background:var(--box-alt);
}

.romans-pub-image-wrapper{

    position:relative;

    width:300px;
}

.romans-pub-image{

    display:block;

    width:300px;
    height:auto;
}

/* moitié gauche */

.roman-link{

    position:absolute;

    top:0;

    bottom:0;

    z-index:5;
}

.roman-left{

    left:0;

    width:50%;
}

/* moitié droite */

.roman-right{

    right:0;

    width:50%;
}