/* =================================
GLOBAL DARK MODE SYSTEM
STABLE VERSION
================================= */

/* active quand html possède la classe dark */

html.dark{

 /* variables */

 --card-bg:#1e293b;

 --text-dark:#e5e7eb;

 --text-soft:#94a3b8;

 --primary:#22c55e;

 --primary-light:#16a34a;

 --border-color:#334155;


 /* background global premium */

 background:

 radial-gradient(
 circle at 15% 20%,
 rgba(34,197,94,0.15),
 transparent 45%
 ),

 radial-gradient(
 circle at 85% 80%,
 rgba(212,175,55,0.10),
 transparent 45%
 ),

 linear-gradient(
 180deg,
 #020617,
 #020617
 );

 color:var(--text-dark);

 min-height:100vh;

}


/* =================================
BODY
================================= */

html.dark body{

 background:transparent;

 color:var(--text-dark);

}


/* =================================
SECTIONS
================================= */

html.dark section{

 background:transparent;

}


html.dark main{

 background:transparent;

}


html.dark .container{

 background:transparent;

}


/* =================================
CARDS
================================= */

html.dark .card,

html.dark .relative.bg-white,

html.dark .about-section .container,

html.dark .vision-section .container,

html.dark .event-card{

 background:var(--card-bg);

 border:1px solid rgba(255,255,255,0.05);

 box-shadow:

 0 25px 60px rgba(0,0,0,0.35);

}


/* =================================
TEXT
================================= */

html.dark p{

 color:var(--text-soft);

}


html.dark h1,

html.dark h2,

html.dark h3,

html.dark h4{

 color:#f1f5f9;

}


/* =================================
NAVBAR
================================= */

html.dark .navbar{

 background:

 linear-gradient(
 135deg,
 #14532d,
 #166534
 );

}


/* =================================
SIDEBAR ADMIN
================================= */

html.dark .sidebar{

 background:#020617;

 border-right:

 1px solid rgba(255,255,255,0.05);

}


html.dark .sidebar li{

 color:#cbd5f5;

}


html.dark .sidebar li.active{

 background:#1e293b;

}


/* =================================
INPUTS
================================= */

html.dark input,

html.dark textarea,

html.dark select{

 background:#020617;

 color:white;

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

}


html.dark input::placeholder{

 color:#64748b;

}


/* =================================
BUTTONS
================================= */

html.dark button{

 box-shadow:

 0 10px 25px rgba(0,0,0,0.35);

}


/* =================================
TABLES ADMIN
================================= */

html.dark table{

 background:#020617;

 color:white;

}


html.dark tr{

 border-bottom:

 1px solid rgba(255,255,255,0.05);

}


/* =================================
MAP LEAFLET
================================= */

html.dark #mapPublic{

 border:

 1px solid rgba(255,255,255,0.08);

 border-radius:18px;

}


/* =================================
EVENT CARD
================================= */

html.dark .event-card{

 background:#1e293b;

}


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

html.dark footer{

 background:

 linear-gradient(
 135deg,
 #14532d,
 #166534
 );

}


/* =================================
TRANSITIONS
================================= */

html.dark *{

 transition:0.25s ease;

}