:root{
	/* Luxury Minimalism palette */
	--bg:#0a0a0a;                 /* noir deep background */
	--card:#1a1a2e;               /* card background slightly lighter */
	--muted:#A89F94;              /* gris taupe for metadata */
	--text:#F5F5F5;               /* blanc casse primary text */
	--accent:#00ff88;             /* neon green accent */
	--accent-2:#ff006e;           /* neon pink */
	--accent-3:#00d4ff;           /* neon cyan */
	--neon-purple:#b700ff;        /* neon purple */
	--muted-2: rgba(245,245,245,0.08);
	--glass: rgba(245,245,245,0.04);
	--radius: .8rem;
	--max-width:1200px;
	--transition-base:300ms cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.6;margin:0;letter-spacing:0.3px;position:relative;overflow-x:hidden}

/* Animated neon background effect */
body::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%, rgba(0,255,136,0.05) 0%, transparent 50%),
			radial-gradient(circle at 80% 80%, rgba(0,212,255,0.05) 0%, transparent 50%),
			radial-gradient(circle at 40% 20%, rgba(255,0,110,0.03) 0%, transparent 50%);pointer-events:none;z-index:0}
body > *{position:relative;z-index:1}

/* sticky nav adjustments */
.sticky-nav{position:sticky;top:0;z-index:1050}

.container{max-width:var(--max-width);margin:0 auto;padding:1rem}

.hero{background-size:cover;background-position:center;position:relative;color:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,0.03);height:clamp(280px,35vh,420px)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,6,8,0.45), rgba(6,6,8,0.6));pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));pointer-events:none}
.hero .container{position:relative;z-index:3;padding:2.25rem}
.hero h2{font-family:'Macondo',serif;font-weight:400;font-size:2.8rem;margin-bottom:.5rem;color:var(--accent);text-shadow:0 10px 30px rgba(0,0,0,0.6)}
.hero p.lead{color:var(--text);font-size:1.05rem;font-weight:300}
.hero .muted{color:var(--muted);opacity:0.85}

.btn-primary.btn-lg{padding:0.75rem 1.25rem;font-size:1.05rem}

.hero .content-bottom{position:absolute;left:0;right:0;bottom:1.5rem;padding:1rem}
.hero .content-bottom .display-4{font-size:2rem}
.hero .content-bottom .col-lg-10{max-width:70%;margin-left:auto;margin-right:auto}
@media(min-width:992px){.hero .content-bottom .display-4{font-size:2.6rem}}

/* neo-star effect */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background-image:
	radial-gradient(1.5px 1.5px at 6% 10%, rgba(255,255,255,0.9) 0, transparent 50%),
	radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 0, transparent 50%),
	radial-gradient(1.2px 1.2px at 48% 60%, rgba(255,255,255,0.8) 0, transparent 50%),
	radial-gradient(0.9px 0.9px at 70% 24%, rgba(255,255,255,0.9) 0, transparent 50%);
	mix-blend-mode:screen;opacity:0.9;animation:twinkle 6s linear infinite;pointer-events:none}
@keyframes twinkle{0%,100%{opacity:0.9}50%{opacity:0.6}}

/* cards */
.card{background:linear-gradient(180deg,var(--card), #0f1b2e);border-radius:12px;border:2px solid rgba(0,255,136,0.2);color:inherit;box-shadow:0 0 20px rgba(0,255,136,0.15),0 0 40px rgba(0,212,255,0.1);overflow:hidden;transition:all var(--transition-base)}
.card-img-top{height:220px;object-fit:cover}
.card-body{padding:1rem}
.card-footer{background:transparent;border-top:1px dashed rgba(0,255,136,0.1);color:var(--muted)}

.btn-primary{background:linear-gradient(90deg,var(--accent), var(--accent-3));border:none;color:#0a0a0a;font-weight:600;box-shadow:0 0 20px rgba(0,255,136,0.6),0 0 40px rgba(0,212,255,0.4);border-radius:999px;padding:0.7rem 1.25rem;transition:all var(--transition-base);font-size:0.95rem;text-shadow:0 0 10px rgba(0,255,136,0.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(0,255,136,0.8),0 0 60px rgba(0,212,255,0.6);text-shadow:0 0 15px rgba(0,255,136,0.8)}
.btn-outline-primary{border:1.5px solid var(--accent);color:var(--text);background:transparent;transition:all var(--transition-base)}
.btn-outline-primary:hover{background:rgba(212,175,55,0.1);border-color:var(--accent)}
.btn-success{background:#25d366;border:none;color:#07210b}

.btn svg{vertical-align:middle;margin-right:.45rem}

/* form inputs */
.form-control,.form-select{background:rgba(0,255,136,0.02);border:2px solid rgba(0,255,136,0.3);color:var(--text);transition:all var(--transition-base);font-size:0.95rem;box-shadow:inset 0 0 10px rgba(0,255,136,0.05)}
.form-control:focus,.form-select:focus{background:rgba(0,255,136,0.05);border-color:var(--accent);box-shadow:inset 0 0 10px rgba(0,255,136,0.1),0 0 20px rgba(0,255,136,0.3);outline:none}

/* layout tweaks */
header{display:flex;justify-content:space-between;align-items:center;margin:1rem 0}
header h1{margin:0;font-size:1.25rem;color:var(--text)}

/* announcement list */
.card{transition:all var(--transition-base)}
#annonces .card{height:100%;display:flex;flex-direction:column}
.card-body{flex:1}
.card:hover{transform:translateY(-6px);box-shadow:0 0 30px rgba(0,255,136,0.4),0 0 50px rgba(0,212,255,0.3),0 0 70px rgba(255,0,110,0.2);border-color:var(--accent-2)}

.badge-category{display:inline-block;padding:.35rem .65rem;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-3));color:#0a0a0a;font-weight:600;font-size:.7rem;letter-spacing:0.5px;transition:all var(--transition-base);box-shadow:0 0 15px rgba(0,255,136,0.5),0 0 25px rgba(0,212,255,0.3);text-shadow:0 0 5px rgba(0,255,136,0.4)}

/* subtle badge hover */
.badge-category:hover{transform:scale(1.1);box-shadow:0 0 25px rgba(0,255,136,0.8),0 0 40px rgba(0,212,255,0.6)}

/* navbar entrance */
.sticky-nav{animation:nav-in 0.4s ease both}
@keyframes nav-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

/* headings with macondo */
h1,h2,h3,h4,h5,h6{font-family:'Macondo',serif;font-weight:400}

/* lazy image placeholder + fade/blur transition */
img.lazy{width:100%;display:block;min-height:160px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));filter:blur(6px);opacity:0.6;transition:filter .5s ease,opacity .45s ease}
img.lazy.loaded{filter:blur(0);opacity:1}
img.card-img-top{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}

.card .mt-auto{margin-top:auto}

/* responsive */
@media (max-width:768px){.hero .container{padding:2rem}.hero h2{font-size:1.6rem}.card-img-top{height:180px}}

/* nav active link */
.nav-link.active{color:var(--accent);font-weight:600;text-shadow:0 0 10px rgba(0,255,136,0.6)}
.nav-link{color:var(--muted)}

/* Ensure navbar links and toggler are visible on dark background */
.navbar{background:linear-gradient(90deg,var(--card), #1F1F1F)}
.navbar, .navbar .navbar-brand, .navbar .nav-link{color:var(--text) !important}
.navbar .nav-link{color:var(--text);opacity:0.9}
.navbar .nav-link:hover, .navbar .nav-link:focus{color:var(--accent);opacity:1}
.navbar .navbar-brand{color:var(--text)}
.navbar .bi{opacity:0.95}
.navbar-toggler{border-color:rgba(245,245,245,0.1)}
.navbar-toggler-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(245,245,245,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important}


/* small helper */
.muted{color:var(--muted)}

/* responsive - mobile first */
@media (max-width:640px){
  .hero{height:clamp(240px,50vh,320px)}
  .hero h2{font-size:1.8rem}
  .hero p.lead{font-size:0.95rem}
  .card-img-top{height:160px}
  .container{padding:1rem}
  .hero .container{padding:1.5rem}
  .hero .content-bottom .col-lg-10{max-width:90%}
  .btn-primary.btn-lg{padding:0.6rem 1rem;font-size:0.9rem}
  .form-control,.form-select{font-size:1rem}
}
@media (min-width:641px) and (max-width:768px){
  .card-img-top{height:180px}
  .hero h2{font-size:2.2rem}
}
@media (min-width:1024px){
  .hero{height:clamp(320px,40vh,420px)}
}