/* ==========================================================================
MEDIEVAL OVERHAUL — SkyBlock Semi-RP edition
Parchemins, fer forgé, bois sombre
Couche additive : ne casse aucune fonctionnalité du thème original.
========================================================================== */
/* ---------- Polices médiévales (chargées dans le ) ---------- */
/* ---------- Variables médiévales (extension des couleurs config) ---------- */
:root {
/* Textures réutilisables : encodées en SVG inline pour rester portable */
--parchment-bg:
radial-gradient(ellipse at top left, rgba(244,228,188,0.04) 0%, transparent 60%),
radial-gradient(ellipse at bottom right, rgba(212,165,116,0.05) 0%, transparent 60%),
url("data:image/svg+xml;utf8,");
--wood-bg:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, #2b1810 0%, #1a0f08 100%);
--iron-bg:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #3a3530 0%, #1f1c18 100%);
/* Couleurs accent médiévales — utilisées en complément des --color-* admin */
--gold-accent: #c9a961;
--gold-glow: #f4d97a;
--iron-dark: #2a2520;
--iron-light: #4a4540;
--blood-red: #6b1a1a;
--emerald-rune: #2d5f3f;
/* Ombrages forgés */
--forge-shadow: 0 4px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(244,228,188,0.08);
--rune-glow: 0 0 8px rgba(201,169,97,0.4), 0 0 16px rgba(201,169,97,0.2);
--parchment-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.15);
/* Bordures fer forgé */
--border-iron: 2px solid #1a1612;
--border-gold: 1px solid rgba(201,169,97,0.4);
}
/* ==========================================================================
FONDATION : body + arrière-plan global
========================================================================== */
body {
background: var(--wood-bg);
background-attachment: fixed;
}
#app {
font-family: 'IM Fell English', 'Cinzel', Georgia, serif;
color: var(--text-color-1);
}
/* Le contenu principal reçoit l'ambiance taverne sombre */
#content {
background:
linear-gradient(180deg, rgba(15,8,5,0.55) 0%, rgba(26,15,8,0.85) 100%),
var(--gradient-2);
background-attachment: fixed;
}
#content .content-wrapper {
background:
linear-gradient(0deg,
rgba(15,8,5,0.92) 0%,
rgba(26,15,8,0.85) 30%,
rgba(26,15,8,0.7) 60%,
var(--color-5) 100%),
var(--settings-background);
background-attachment: fixed;
background-size: cover;
position: relative;
}
/* Léger voile de bruit parchemin sur tout le contenu */
#content .content-wrapper::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--parchment-bg);
background-size: 200px 200px;
opacity: 0.35;
pointer-events: none;
z-index: 0;
mix-blend-mode: overlay;
}
/* NOTE: z-index retiré sur .content-wrapper > * pour ne pas piéger
les modals Bootstrap dans un stacking context inférieur au sidebar */
#content .content-wrapper > *:not(.modal):not(.modal-backdrop) {
position: relative;
}
/* ==========================================================================
TYPOGRAPHIE — titres en Cinzel (capitales gravées), texte en IM Fell
========================================================================== */
h1, h2, h3, h4, h5, h6,
.title, .modal-title,
.card-header h6 {
font-family: 'Cinzel', 'MedievalSharp', Georgia, serif !important;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-color-1);
text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 10px rgba(201,169,97,0.15);
}
h1, h2, .title {
font-weight: 700;
}
.btn {
font-family: 'Cinzel', Georgia, serif !important;
letter-spacing: 0.06em;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
}
/* ==========================================================================
BOUTONS — fer forgé avec rivets et rougeoiement
========================================================================== */
.btn,
.btn-primary,
.btn-success,
.btn-danger,
.btn-light,
.btn-outline-primary {
position: relative;
background: var(--iron-bg) !important;
border: var(--border-iron) !important;
border-radius: 4px !important;
color: var(--text-color-1) !important;
box-shadow:
var(--forge-shadow),
inset 0 0 0 1px rgba(201,169,97,0.2);
transition: all 0.3s ease;
overflow: hidden;
}
.btn:not(.btn-ip):not(.btn-close)::before {
content: "";
position: absolute;
top: 3px; left: 4px;
width: 5px; height: 5px;
border-radius: 50%;
background: radial-gradient(circle, #1a1612 30%, #4a4540 100%);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
}
.btn:not(.btn-ip):not(.btn-close)::after {
content: "";
position: absolute;
bottom: 3px; right: 4px;
width: 5px; height: 5px;
border-radius: 50%;
background: radial-gradient(circle, #1a1612 30%, #4a4540 100%);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
}
.btn:hover {
background: linear-gradient(180deg, #4a4540 0%, #2a2520 100%) !important;
color: var(--gold-glow) !important;
border-color: var(--gold-accent) !important;
box-shadow:
var(--forge-shadow),
0 0 12px rgba(201,169,97,0.3),
inset 0 0 0 1px rgba(244,217,122,0.4);
transform: translateY(-1px);
}
/* Bouton principal : ambre doré rougeoyant */
.btn-primary {
background: linear-gradient(180deg, var(--color-1) 0%, var(--color-2) 100%) !important;
border-color: var(--gold-accent) !important;
color: var(--gold-glow) !important;
}
.btn-primary:hover {
background: linear-gradient(180deg, var(--gold-accent) 0%, #8b6f30 100%) !important;
color: #1a0f08 !important;
}
/* Bouton sang (danger) */
.btn-danger {
background: linear-gradient(180deg, #8a2424 0%, #3d1010 100%) !important;
border-color: #5a1a1a !important;
color: #f4e4bc !important;
}
/* ==========================================================================
SIDEBAR — totem de fer forgé adossé à un mur de bois
========================================================================== */
#sidebar {
background: var(--wood-bg);
border-right: 3px solid var(--iron-dark);
box-shadow:
inset -1px 0 0 rgba(201,169,97,0.2),
4px 0 16px rgba(0,0,0,0.6);
position: fixed;
}
/* Rivets verticaux sur le bord droit */
#sidebar::after {
content: "";
position: absolute;
top: 0; bottom: 0;
right: 3px;
width: 8px;
background-image:
radial-gradient(circle at 4px 30px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 100px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 200px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 300px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 400px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 500px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 600px, #3a3530 0 3px, transparent 4px),
radial-gradient(circle at 4px 700px, #3a3530 0 3px, transparent 4px);
background-repeat: no-repeat;
pointer-events: none;
}
#sidebar .sidebar-link {
color: var(--text-color-6);
font-family: 'Cinzel', Georgia, serif;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 13px;
}
#sidebar .sidebar-link:hover,
#sidebar .sidebar-link.active {
color: var(--gold-glow);
background: linear-gradient(90deg, rgba(201,169,97,0.12) 0%, transparent 100%);
text-shadow: 0 0 8px rgba(201,169,97,0.5);
}
#sidebar .sidebar-link.active::before {
content: "";
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
background: linear-gradient(180deg, transparent, var(--gold-accent), transparent);
box-shadow: 0 0 8px var(--gold-accent);
}
#sidebar .sidebar-link .icon {
color: var(--gold-accent);
}
#sidebar .sidebar-link:hover .icon {
color: var(--gold-glow);
filter: drop-shadow(0 0 4px rgba(244,217,122,0.6));
}
#sidebar .sidebar-image .text {
font-family: 'MedievalSharp', 'Cinzel', Georgia, serif !important;
color: var(--gold-glow) !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(201,169,97,0.4);
text-transform: none;
letter-spacing: 0.02em;
}
#sidebar .sidebar-image .icon img {
filter: drop-shadow(0 0 6px rgba(201,169,97,0.4));
}
/* Boutons login/register dans la sidebar : sceaux dorés */
#sidebar .sidebar-btn {
background: transparent;
}
#sidebar .sidebar-btn .icon {
background: linear-gradient(180deg, var(--iron-light) 0%, var(--iron-dark) 100%);
border: 1px solid var(--gold-accent);
border-radius: 4px;
color: var(--gold-glow);
box-shadow: var(--forge-shadow);
}
#sidebar.active .sidebar-btn {
background: linear-gradient(180deg, var(--iron-light) 0%, var(--iron-dark) 100%);
border: 1px solid var(--gold-accent);
color: var(--gold-glow);
box-shadow: var(--forge-shadow);
}
#sidebar .sidebar-btn-2 .icon,
#sidebar.active .sidebar-btn-2 {
background: linear-gradient(180deg, var(--gold-accent) 0%, #8b6f30 100%) !important;
color: #1a0f08 !important;
border: 1px solid #1a0f08 !important;
}
#sidebar .sidebar-dropdown-body {
background: var(--wood-bg);
border: var(--border-iron);
border-radius: 4px;
box-shadow: var(--forge-shadow), 0 8px 24px rgba(0,0,0,0.7);
}
/* Sidebar mobile : même traitement */
#sidebar-mobile {
background: var(--wood-bg) !important;
border-right: 3px solid var(--iron-dark);
}
#sidebar-mobile .sidebar-link {
font-family: 'Cinzel', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.05em;
}
#sidebar-mobile .sidebar-link:hover,
#sidebar-mobile .sidebar-link.active {
color: var(--gold-glow);
}
#topbar-mobile {
background: var(--wood-bg) !important;
border-bottom: 2px solid var(--iron-dark);
box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/* ==========================================================================
CARTES — parchemins encadrés de fer
========================================================================== */
.card,
.modal-content {
background:
var(--parchment-bg),
linear-gradient(180deg, rgba(58,36,24,0.95) 0%, rgba(26,15,8,0.95) 100%) !important;
border: var(--border-iron) !important;
border-radius: 6px !important;
box-shadow:
var(--forge-shadow),
0 0 0 1px rgba(201,169,97,0.25),
inset 0 0 40px rgba(0,0,0,0.4) !important;
color: var(--text-color-1);
position: relative;
}
/* Coins ferrés sur chaque carte */
.card::before,
.card::after,
.modal-content::before,
.modal-content::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
background: radial-gradient(circle at center,
#4a4540 0%,
#2a2520 40%,
#1a1612 100%);
border-radius: 50%;
box-shadow:
inset 0 1px 2px rgba(244,228,188,0.2),
inset 0 -1px 2px rgba(0,0,0,0.8),
0 2px 4px rgba(0,0,0,0.6);
z-index: 0;
}
/* Les modals de l'éditeur ne doivent pas avoir les coins ferrés qui bloquent les interactions */
#editorData .modal-content::before,
#editorData .modal-content::after,
#editorSettings .modal-content::before,
#editorSettings .modal-content::after,
#editor2Data .modal-content::before,
#editor2Data .modal-content::after,
#editor2Settings .modal-content::before,
#editor2Settings .modal-content::after,
#editor1components .modal-content::before,
#editor1components .modal-content::after,
#editor2components .modal-content::before,
#editor2components .modal-content::after {
display: none !important;
}
.card::before, .modal-content::before {
top: 8px; left: 8px;
}
.card::after, .modal-content::after {
top: 8px; right: 8px;
}
.card-header {
background: linear-gradient(180deg, rgba(58,36,24,0.6) 0%, transparent 100%) !important;
border-bottom: 1px solid rgba(201,169,97,0.3) !important;
color: var(--gold-glow);
padding: 14px 20px;
}
.card-body {
padding: 20px;
}
/* ==========================================================================
HOME BANNER — bannière de royaume
========================================================================== */
#homebanner {
border-radius: 6px !important;
border: var(--border-iron);
box-shadow:
var(--forge-shadow),
0 0 0 1px rgba(201,169,97,0.3),
0 0 40px rgba(0,0,0,0.6);
background-image:
linear-gradient(90deg,
rgba(15,8,5,0.85) 0%,
rgba(26,15,8,0.45) 60%,
rgba(26,15,8,0.2) 100%),
var(--settings-background) !important;
position: relative;
overflow: hidden;
}
/* Ornement angulaire en haut à gauche */
#homebanner::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 60px; height: 60px;
background:
linear-gradient(135deg, var(--gold-accent) 0%, transparent 50%);
opacity: 0.3;
pointer-events: none;
}
#homebanner .hommebanner-content .title-mini {
font-family: 'Cinzel', Georgia, serif;
color: var(--gold-accent) !important;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
#homebanner .hommebanner-content .title-mini::before {
content: "⚔ ";
color: var(--gold-glow);
}
#homebanner .hommebanner-content .title-mini::after {
content: " ⚔";
color: var(--gold-glow);
}
#homebanner .hommebanner-content .title {
font-family: 'MedievalSharp', 'Cinzel', Georgia, serif !important;
font-size: 38px !important;
color: var(--text-color-1) !important;
text-shadow:
0 2px 4px rgba(0,0,0,0.9),
0 0 20px rgba(201,169,97,0.3) !important;
letter-spacing: 0.02em;
line-height: 1.1;
text-transform: none;
}
#homebanner .hommebanner-content .description {
font-family: 'IM Fell English', Georgia, serif;
font-size: 15px;
color: var(--text-color-1);
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
line-height: 1.5;
max-width: 500px;
}
#homebanner .playerlist {
font-family: 'Cinzel', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 12px;
color: var(--gold-accent);
}
#homebanner .btn-ip {
font-family: 'Cinzel', Georgia, serif !important;
font-size: 14px;
letter-spacing: 0.1em;
background: linear-gradient(180deg, var(--iron-light) 0%, var(--iron-dark) 100%) !important;
border: 1px solid var(--gold-accent) !important;
color: var(--gold-glow) !important;
box-shadow: var(--forge-shadow), 0 0 16px rgba(201,169,97,0.2);
}
/* ==========================================================================
ARTICLES — parchemins épinglés
========================================================================== */
.post {
border-radius: 6px !important;
border: var(--border-iron);
box-shadow:
var(--forge-shadow),
0 0 0 1px rgba(201,169,97,0.25);
overflow: hidden;
position: relative;
}
.post::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg,
rgba(15,8,5,0.85) 0%,
rgba(26,15,8,0.2) 50%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
.post .content {
background: rgba(15,8,5,0.85) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(201,169,97,0.3);
border-radius: 4px !important;
margin: 10px;
z-index: 2;
}
.post .content .title {
font-family: 'Cinzel', Georgia, serif !important;
color: var(--gold-glow) !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.9);
letter-spacing: 0.03em;
}
.post .content .description {
font-family: 'IM Fell English', Georgia, serif;
color: var(--text-color-1) !important;
}
.post:hover {
transform: translateY(-3px);
box-shadow:
var(--forge-shadow),
0 8px 24px rgba(0,0,0,0.6),
0 0 0 1px var(--gold-accent),
0 0 24px rgba(201,169,97,0.25);
}
.date-wrapper .date .value {
font-family: 'Cinzel', Georgia, serif;
background: rgba(15,8,5,0.85) !important;
border: 1px solid rgba(201,169,97,0.3);
color: var(--gold-accent) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
}
/* ==========================================================================
FORMULAIRES — encres et parchemins
========================================================================== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
background: rgba(15,8,5,0.7) !important;
border: 1px solid rgba(201,169,97,0.3) !important;
border-radius: 4px !important;
color: var(--text-color-1) !important;
font-family: 'IM Fell English', Georgia, serif !important;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
padding: 10px 14px;
}
.form-control:focus,
.form-select:focus {
background: rgba(15,8,5,0.85) !important;
border-color: var(--gold-accent) !important;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.6),
0 0 0 2px rgba(201,169,97,0.25) !important;
color: var(--gold-glow) !important;
}
.form-control::placeholder {
color: rgba(212,165,116,0.5) !important;
font-style: italic;
}
.form-label,
label {
font-family: 'Cinzel', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
color: var(--gold-accent);
margin-bottom: 6px;
}
.input-group-text {
background: var(--iron-bg) !important;
border: 1px solid rgba(201,169,97,0.3) !important;
color: var(--gold-accent) !important;
font-family: 'Cinzel', Georgia, serif;
}
/* ==========================================================================
TABLEAUX — registres du scribe
========================================================================== */
.table {
color: var(--text-color-1) !important;
border-color: rgba(201,169,97,0.2) !important;
}
.table thead th {
font-family: 'Cinzel', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gold-accent);
border-bottom: 2px solid rgba(201,169,97,0.4) !important;
background: rgba(15,8,5,0.3);
}
.table tbody tr:hover {
background: rgba(201,169,97,0.06) !important;
}
/* ==========================================================================
BADGES — sceaux et écussons
========================================================================== */
.badge {
font-family: 'Cinzel', Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.4);
box-shadow: inset 0 1px 0 rgba(244,228,188,0.15);
padding: 4px 10px;
}
.badge.bg-danger {
background: linear-gradient(180deg, #8a2424 0%, #3d1010 100%) !important;
color: var(--text-color-1) !important;
}
.badge.bg-success {
background: linear-gradient(180deg, #3d6e2a 0%, #1f3815 100%) !important;
color: var(--text-color-1) !important;
}
/* ==========================================================================
FOOTER — pied de page en bois ferré
========================================================================== */
#bigfooter {
background: var(--wood-bg) !important;
border-top: 3px solid var(--iron-dark);
border-radius: 0 !important;
box-shadow: inset 0 1px 0 rgba(201,169,97,0.2);
color: var(--text-color-1);
}
#bigfooter h4, #bigfooter h5, #bigfooter h6 {
font-family: 'Cinzel', Georgia, serif;
color: var(--gold-glow);
text-transform: uppercase;
letter-spacing: 0.06em;
}
#bigfooter .bigfooter-link {
color: var(--text-color-1);
font-family: 'IM Fell English', Georgia, serif;
}
#bigfooter .bigfooter-link:hover {
color: var(--gold-glow);
}
#footer {
background: var(--iron-bg);
border-top: 2px solid var(--iron-dark);
color: var(--text-color-1);
font-family: 'IM Fell English', Georgia, serif;
border-bottom: 0;
}
#footer .sloyni-copyright {
color: var(--text-color-1);
}
#footer .sloyni-copyright:hover {
color: var(--gold-glow);
}
/* ==========================================================================
SOCIAL LINKS — anneaux de bronze
========================================================================== */
#socialLinks .social-item {
background: linear-gradient(180deg, var(--iron-light) 0%, var(--iron-dark) 100%) !important;
border: 1px solid var(--gold-accent);
color: var(--gold-accent);
border-radius: 50%;
box-shadow: var(--forge-shadow);
}
#socialLinks .social-item:hover {
background: linear-gradient(180deg, var(--gold-accent) 0%, #8b6f30 100%) !important;
color: #1a0f08;
transform: scale(1.15) rotate(-5deg);
box-shadow: var(--forge-shadow), 0 0 16px rgba(201,169,97,0.4);
}
/* ==========================================================================
MODALS — coffres ouverts
========================================================================== */
.modal-header {
background: linear-gradient(180deg, rgba(58,36,24,0.8) 0%, transparent 100%);
border-bottom: 1px solid rgba(201,169,97,0.3) !important;
}
.modal-footer {
border-top: 1px solid rgba(201,169,97,0.3) !important;
}
.btn-close {
filter: invert(0.8) sepia(0.4) saturate(2) hue-rotate(5deg) !important;
}
/* ==========================================================================
SCROLLBAR — chaîne de fer
========================================================================== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
background: var(--iron-dark);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gold-accent) 0%, #8b6f30 100%);
border: 2px solid var(--iron-dark);
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--gold-glow) 0%, var(--gold-accent) 100%);
}
*::selection {
background: rgba(201,169,97,0.4) !important;
color: var(--text-color-1) !important;
}
/* ==========================================================================
NAVIGATION & LIENS
========================================================================== */
a[href]:not(.btn) {
color: var(--gold-accent);
transition: color 0.2s ease, text-shadow 0.2s ease;
}
a[href]:not(.btn):hover {
color: var(--gold-glow);
text-shadow: 0 0 6px rgba(244,217,122,0.4);
text-decoration: none;
}
/* ==========================================================================
STATS / RANKS / SEARCH — composants additionnels
========================================================================== */
.search-input,
.search-result {
background: rgba(15,8,5,0.7) !important;
border: 1px solid rgba(201,169,97,0.3) !important;
color: var(--text-color-1);
font-family: 'IM Fell English', Georgia, serif;
}
/* Rangs : titres en or */
.rank-name, .rank-title {
font-family: 'Cinzel', Georgia, serif;
color: var(--gold-glow);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ==========================================================================
ALERTES & NOTIFICATIONS
========================================================================== */
.alert {
background: var(--iron-bg) !important;
border: var(--border-iron) !important;
border-left: 4px solid var(--gold-accent) !important;
border-radius: 4px !important;
color: var(--text-color-1) !important;
font-family: 'IM Fell English', Georgia, serif;
box-shadow: var(--forge-shadow);
}
.alert-success {
border-left-color: #3d6e2a !important;
}
.alert-danger {
border-left-color: #8a2424 !important;
}
.alert-warning {
border-left-color: var(--gold-accent) !important;
}
/* ==========================================================================
PAGINATION — chaînons forgés
========================================================================== */
.pagination .page-link {
background: var(--iron-bg) !important;
border: 1px solid rgba(201,169,97,0.3) !important;
color: var(--text-color-1) !important;
font-family: 'Cinzel', Georgia, serif;
margin: 0 2px;
border-radius: 4px !important;
}
.pagination .page-item.active .page-link {
background: linear-gradient(180deg, var(--gold-accent) 0%, #8b6f30 100%) !important;
border-color: var(--gold-accent) !important;
color: #1a0f08 !important;
}
.pagination .page-link:hover {
background: var(--iron-light) !important;
color: var(--gold-glow) !important;
}
/* ==========================================================================
ICÔNES MÉDIÉVALES — préfixe sur certaines icônes courantes
========================================================================== */
.bi-house::before { content: "\f425"; } /* maison conservée */
/* Liseré doré subtil pour les icônes Bootstrap en contexte sidebar */
#sidebar .bi {
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* ==========================================================================
ANIMATIONS — vacillement de braise
========================================================================== */
@keyframes ember-flicker {
0%, 100% {
opacity: 1;
text-shadow: 0 0 8px rgba(201,169,97,0.4);
}
50% {
opacity: 0.85;
text-shadow: 0 0 16px rgba(244,217,122,0.6);
}
}
#sidebar .sidebar-link.active,
.btn-primary:hover {
animation: ember-flicker 3s ease-in-out infinite;
}
/* ==========================================================================
RESPONSIVE — protection mobile
========================================================================== */
@media (max-width: 768px) {
#homebanner .hommebanner-content {
padding: 50px 25px !important;
}
#homebanner .hommebanner-content .title {
font-size: 26px !important;
}
.card::before, .card::after,
.modal-content::before, .modal-content::after {
width: 14px;
height: 14px;
}
}
/* ==========================================================================
ÉDITEUR ADMIN — ne pas casser l'interface d'édition
========================================================================== */
#sidebar-admin,
.hot-card {
/* On laisse le style admin original respirer */
font-family: 'Nunito', sans-serif;
}
#sidebar-admin .card::before,
#sidebar-admin .card::after,
.editor-tools .card::before,
.editor-tools .card::after {
display: none !important;
}
/* ==========================================================================
MEDIEVAL THEME — CORRECTIFS COMPLETS v4
Solution racine pour le stacking context et z-index
========================================================================== */
/* ── 1. PORTAL MODALS — z-index correct ─────────────────────────────────
Les modals éditeur sont déplacés par theme.js dans #editor-modal-portal
qui est un enfant direct de #app, hors du content-wrapper stacking context.
──────────────────────────────────────────────────────────────────────── */
#editor-modal-portal {
position: relative;
z-index: 1056 !important;
}
/* Backdrop Bootstrap — au-dessus de tout sauf le modal lui-même */
.modal-backdrop {
z-index: 1040 !important;
}
/* Les modals Bootstrap — au-dessus du sidebar */
.modal {
z-index: 1055 !important;
}
/* ── 2. SIDEBAR — sous les modals quand modal ouverte ─────────────────── */
body.modal-open #sidebar,
body.modal-open #sidebar-mobile,
body.modal-open #topbar-mobile {
z-index: 1 !important;
pointer-events: none !important;
}
/* Footer fixe sous tout le reste */
footer {
z-index: 50 !important;
}
/* Sidebar admin sous les modals */
#sidebar-admin {
z-index: 200 !important;
}
/* ── 3. MODALS ÉDITEUR — interactivité totale ──────────────────────────── */
/* Coins ferrés : jamais au-dessus des éléments interactifs */
.card::before,
.card::after,
.modal-content::before,
.modal-content::after {
z-index: 0 !important;
pointer-events: none !important;
}
/* Modals éditeur : coins décoratifs supprimés */
#editorData .modal-content::before,
#editorData .modal-content::after,
#editorSettings .modal-content::before,
#editorSettings .modal-content::after,
#editor2Data .modal-content::before,
#editor2Data .modal-content::after,
#editor2Settings .modal-content::before,
#editor2Settings .modal-content::after,
#editor1components .modal-content::before,
#editor1components .modal-content::after,
#editor2components .modal-content::before,
#editor2components .modal-content::after {
display: none !important;
}
/* Tout le contenu des modals est interactif */
.modal-dialog,
.modal-content,
.modal-body,
.modal-header,
.modal-footer {
pointer-events: auto !important;
}
/* Pas de stacking context sur le pseudo-element de fond */
#content .content-wrapper::before {
z-index: -1 !important;
pointer-events: none !important;
}
/* Sidebar admin : pas de coins décoratifs */
#sidebar-admin .card::before,
#sidebar-admin .card::after,
.editor-tools .card::before,
.editor-tools .card::after {
display: none !important;
}
/* ── 4. ICÔNES BOOTSTRAP — sidebar mobile ──────────────────────────────── */
#sidebar-mobile i[class*="bi"],
#topbar-mobile i[class*="bi"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
visibility: visible !important;
opacity: 1 !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#sidebar-mobile .sidebar-link i[class*="bi"] {
color: var(--text-color-5, #c9a961) !important;
font-size: 1.1rem !important;
min-width: 22px;
margin-right: 12px !important;
vertical-align: middle;
flex-shrink: 0;
}
#sidebar-mobile .sidebar-link:hover i[class*="bi"],
#sidebar-mobile .sidebar-link.active i[class*="bi"] {
color: var(--text-color-4, #f4e4bc) !important;
}
#sidebar-mobile .collapse i[class*="bi"],
#sidebar-mobile [id*="Profile"] ~ * i[class*="bi"] {
color: var(--text-color-5, #c9a961) !important;
display: inline-flex !important;
visibility: visible !important;
margin-right: 10px !important;
}
#sidebar-mobile i.bi-chevron-right,
#sidebar-mobile i.bi-chevron-down {
font-size: 0.7rem !important;
color: var(--text-color-3, #8b6f47) !important;
margin-right: 0 !important;
min-width: unset !important;
transition: transform 0.25s ease;
}
#sidebar-mobile button[aria-expanded="true"] i.bi-chevron-right {
transform: rotate(90deg);
}
#topbar-mobile [data-toggle="open-sidebar"] i[class*="bi"],
#topbar-mobile .btn i[class*="bi"] {
color: var(--text-color-5, #c9a961) !important;
font-size: 1.35rem !important;
}
#sidebar-mobile .sidebar-btn i[class*="bi"],
#sidebar-mobile .sidebar-btn-2 i[class*="bi"] {
color: inherit !important;
margin-right: 6px !important;
min-width: unset !important;
}
#sidebar-mobile .sidebar-close i[class*="bi"] {
color: var(--text-color-1, #f4e4bc) !important;
font-size: 1.2rem !important;
margin-right: 0 !important;
min-width: unset !important;
}
/* ── 5. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.card::before,
.card::after,
.modal-content::before,
.modal-content::after {
display: none !important;
}
}