body{
margin:0;
font-family:Poppins,sans-serif;
background:#f1f4f9;
}

/* CONTENU DASHBOARD */

.dashboard-container{
padding:40px;
}

/* CARTES */

.card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
margin-bottom:20px;
}
/* GRID DES BIENS */

.dashboard-properties{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}


/* CARTE BIEN */

.property-card{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}


/* IMAGE */

.property-card img{
width:100%;
height:200px;
object-fit:cover;
}


/* CONTENU */

.property-info{
padding:15px;
}


.property-info h3{
margin:0 0 10px;
font-size:18px;
}


.property-info p{
margin:0;
color:#666;
}
.properties-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
gap:20px;
}

.property-card img{
height:160px;
object-fit:cover;
}
.properties-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:20px;
}

.property-card{
  max-width:260px;
  margin:auto;
  border-radius:10px;
  overflow:hidden;
}

.media-container img,
.media-container video{
  width:100%;
  height:160px;
  object-fit:cover;
}

.property-info{
  padding:10px;
}
.delete-btn{
  margin-top:10px;
  width:100%;
  padding:10px;
  background:linear-gradient(135deg, #ff4d4d, #cc0000);
  color:white;
  border:none;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.delete-btn:hover{
  background:linear-gradient(135deg, #ff1a1a, #990000);
  transform:scale(1.05);
}
body{
  margin:0;
  font-family:Poppins, sans-serif;

  background: 
    linear-gradient(hsla(0, 0%, 0%, 0.6), rgba(0,0,0,0.7)),
    url("villa-bg.jpg");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.container{
  background:rgba(255,255,255,0.95);
  padding:30px;
  border-radius:15px;
}
/* NAVIGATION HEADER */

.main-header nav a{
  background:#0a2540; /* bleu foncé premium */
  color:white;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:500;
  margin-left:10px;
  transition:0.3s;
}

/* HOVER */

.main-header nav a:hover{
  background:#163a5f;
  transform:translateY(-2px);
}
#legalStatus{
  margin-top:10px;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
}

.profile-info h3 {
  margin: 0;
  font-size: 18px;
}

.profile-info p {
  margin: 5px 0 0;
  color: #777;
}

/* STATS */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.stat-card {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.stat-card h4 {
  font-size: 22px;
  margin: 0;
}

.stat-card p {
  margin: 5px 0 0;
  color: #777;
}
.profile-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
}

.profile-avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eee;
}

#profileInput {
  margin-top: 10px;
}

#save-profile-btn {
  background: #111;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.top-status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.status-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.status-right {
  font-weight: bold;
}
body {
  font-family: Arial, sans-serif;
  background: #f5f6fa;
  margin: 0;
}

.main-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: #111;
  color: white;
}

.dashboard-section .container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

/* STATS SaaS */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.stat-card h4 {
  font-size: 24px;
  margin: 0;
}

/* PROFILE */
.profile-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: white;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}

/* GRID BIENS */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* MOBILE */
@media (max-width: 768px) {

  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .properties-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    flex-direction: column;
    text-align: center;
  }
}
.card {
  background: white;
  padding: 15px;
  border-radius: 12px;
  margin-top: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

#notifications .notif {
  padding: 8px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.publish-card{

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

backdrop-filter:
blur(
20px
);

padding:
40px;

border-radius:
30px;

max-width:
1000px;

margin:
40px auto;

box-shadow:
0 25px 50px rgba(
0,
0,
0,
.15
);

}



.publish-header{

text-align:
center;

margin-bottom:
35px;

}



.publish-header h2{

font-size:
38px;

margin:
0;

}



.form-grid{

display:
grid;

grid-template-columns:
repeat(
2,
1fr
);

gap:
22px;

}



.field{

display:
flex;

flex-direction:
column;

gap:
8px;

}



.field input,
.field select{

padding:
16px;

border:
none;

border-radius:
15px;

font-size:
15px;

}



.full{

grid-column:
1/-1;

}



.premium-box{

grid-column:
1/-1;

padding:
20px;

border:
1px solid gold;

border-radius:
18px;

background:
rgba(
255,
215,
0,
.1
);

}



.publish-btn{

grid-column:
1/-1;

padding:
22px;

background:
linear-gradient(
135deg,
#d4af37,
#f5c542
);

border:
none;

border-radius:
18px;

font-size:
18px;

font-weight:
700;

cursor:
pointer;

}



.publish-btn:hover{

transform:
translateY(
-2px
);

}



@media(
max-width:
768px
){

.form-grid{

grid-template-columns:
1fr;

}

}
/* ========= FORM PREMIUM ========= */

.premium-form{

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

backdrop-filter:
blur(30px);

padding:
40px;

border-radius:
30px;

box-shadow:
0 20px 50px rgba(
0,0,0,.12
);

margin-top:
40px;

border:
1px solid rgba(
255,255,255,.2
);

}


.form-header{

text-align:
center;

margin-bottom:
35px;

}


.form-header h2{

font-size:
38px;

margin:
0;

}


.form-header p{

opacity:
.7;

}


.form-grid{

display:
grid;

gap:
20px;

}


.input-box{

display:
flex;

flex-direction:
column;

gap:
8px;

}


.input-box label{

font-weight:
700;

font-size:
14px;

}


.input-box input,
.input-box select{

padding:
18px;

border:
none;

border-radius:
16px;

background:
white;

font-size:
16px;

outline:
none;

}


.rooms-grid{

display:
grid;

grid-template-columns:
repeat(
3,
1fr
);

gap:
15px;

}


.rooms-grid input{

padding:
18px;

border-radius:
16px;

border:
none;

}


.upload-box{

background:
rgba(
255,
255,
255,
0.7
);

padding:
20px;

border-radius:
18px;

}


.upload-box input{

margin-top:
10px;

}


.premium-toggle{

display:
flex;

align-items:
center;

gap:
15px;

padding:
20px;

background:
linear-gradient(
135deg,
#fff8dc,
#ffd700
);

border-radius:
18px;

font-weight:
700;

cursor:
pointer;

}


.premium-toggle small{

display:
block;

opacity:
.7;

}


.publish-btn{

padding:
22px;

border:
none;

border-radius:
20px;

background:
linear-gradient(
135deg,
#111827,
#000
);

color:
white;

font-size:
20px;

font-weight:
700;

cursor:
pointer;

transition:
.3s;

}


.publish-btn:hover{

transform:
translateY(-5px);

box-shadow:
0 20px 40px rgba(
0,
0,
0,
0.2
);

}


@media(max-width:768px){

.rooms-grid{

grid-template-columns:
1fr;

}

}

body{

margin:0;

font-family:
Arial,
sans-serif;


/* couche sombre élégante */

background:

linear-gradient(
135deg,

rgba(
8,
15,
35,
0.88
),

rgba(
17,
24,
39,
0.82
)

),

url(
"https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=2000"
);


/* grande villa moderne */

background-size:
cover;

background-position:
center;

background-attachment:
fixed;

min-height:
100vh;

color:
white;

}

body::before{

content:"";

position:
fixed;

top:0;
left:0;

width:
100%;

height:
100%;


background:

radial-gradient(

circle at top right,

rgba(
212,
175,
55,
0.18
),

transparent 40%

),

radial-gradient(

circle at bottom left,

rgba(
255,
255,
255,
0.06
),

transparent 35%

);


pointer-events:
none;

z-index:
-1;

}

.card,
.profile-card,
.stat-card,
.premium-form{

background:
rgba(
255,
255,
255,
0.18
);

backdrop-filter:
blur(
22px
);

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

box-shadow:
0 25px 50px rgba(
0,
0,
0,
0.25
);

}

h2{

font-size:
42px;

font-weight:
800;

text-shadow:

0 8px 30px rgba(
0,
0,
0,
0.35
);

}

/* ===== TITRE ===== */

.dashboard-section h2{

background:
linear-gradient(
90deg,
#2563eb,
#06b6d4
);

-webkit-background-clip:
text;

-webkit-text-fill-color:
transparent;

font-size:
38px;

font-weight:
900;

}


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

.profile-card{

background:
rgba(
255,
255,
255,
0.15
);

color:
white;

}


.profile-info h3{

color:
white;

font-size:
28px;

margin:
0;

}


.profile-info p{

color:
rgba(
255,
255,
255,
0.85
);

}


/* ===== STATS ===== */

.stat-card{

background:
rgba(
255,
255,
255,
0.15
);

backdrop-filter:
blur(20px);

padding:
25px;

border-radius:
20px;

text-align:
center;

}


.stat-card h4{

font-size:
38px;

margin:
0;

color:
white;

font-weight:
800;

}


.stat-card p{

margin-top:
10px;

color:
rgba(
255,
255,
255,
0.9
);

font-size:
16px;

}


/* ===== PREMIUM ===== */

.stat-card.premium{

background:

linear-gradient(

135deg,

rgba(
212,
175,
55,
0.35
),

rgba(
255,
215,
0,
0.15
)

);

border:
1px solid gold;

}


/* ===== BADGE ROLE ===== */

#role-badge{

background:
gold;

color:
black;

padding:
8px 16px;

border-radius:
50px;

font-weight:
700;

}


/* ===== NOM UTILISATEUR ===== */

#agent-name{

color:
white;

font-size:
30px;

font-weight:
800;

}


#agent-role{

color:
#f3f4f6;

opacity:
.9;

}

/* ===== NOM + ROLE ===== */

#agent-name{

color:
#000 !important;

font-weight:
800;

font-size:
30px;

}


#agent-role{

color:
#111 !important;

font-weight:
600;

}


/* ===== CHIFFRES STATS ===== */

.stat-card h4{

color:
#000 !important;

font-size:
36px;

font-weight:
800;

}


/* ===== TEXTE STATS ===== */

.stat-card p{

color:
#111 !important;

font-weight:
600;

}


/* ===== PROFILE CARD ===== */

.profile-card{

color:
#000 !important;

}


/* ===== TOUT TEXTE INTERNE */

.profile-card *,
.stat-card *{

color:
#000 !important;

}

/* ===== ETAT DES CHAMPS ===== */

.input-box input,
.input-box select{

border:
2px solid transparent;

transition:
0.25s;

}


/* rouge = vide */

.input-error{

border:
2px solid #ef4444 !important;

background:
rgba(
239,
68,
68,
0.06
);

}


/* vert = rempli */

.input-valid{

border:
2px solid #22c55e !important;

background:
rgba(
34,
197,
94,
0.08
);

}



/* ===== BARRE PROGRESSION ===== */

.progress-wrapper{

margin:
25px 0;

}


.progress-bar{

height:
12px;

background:
rgba(
255,
255,
255,
0.2
);

border-radius:
50px;

overflow:
hidden;

}


.progress{

height:
100%;

width:
0;

background:
linear-gradient(
90deg,
#ef4444,
#f59e0b,
#22c55e
);

transition:
0.3s;

}


.progress-text{

margin-bottom:
10px;

font-weight:
700;

}
/* ===== Progress ===== */

.progress-wrapper{

margin:20px 0 35px;

}

.progress-text{

font-weight:700;
margin-bottom:10px;

color:white;

}

.progress-bar{

height:14px;

background:
rgba(
255,
255,
255,
0.15
);

border-radius:
50px;

overflow:hidden;

}


.progress{

height:100%;

width:0;

background:

linear-gradient(
90deg,
#22c55e,
#16a34a
);

transition:
.4s;

border-radius:
50px;

}



/* ===== Inputs ===== */

.input-valid{

border:

2px solid
#22c55e
!important;

background:
rgba(
34,
197,
94,
0.08
);

}


.input-error{

border:

2px solid
#ef4444
!important;

background:
rgba(
239,
68,
68,
0.06
);

}
.input-valid{
  border:2px solid #22c55e !important;
  background:rgba(34,197,94,0.08);
}

.input-error{
  border:2px solid #ef4444 !important;
  background:rgba(239,68,68,0.06);
}

.progress-wrapper{
  margin:25px 0;
}

.progress-text{
  font-weight:700;
  margin-bottom:10px;
}

.progress-bar{
  height:10px;
  background:#e5e7eb;
  border-radius:50px;
  overflow:hidden;
}

.progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  transition:0.4s;
}

.input-disabled{

opacity:.5;

pointer-events:none;

filter:grayscale(.5);

}


.input-valid{

border:2px solid #22c55e !important;

background:
rgba(
34,
197,
94,
0.08
);

}


.input-error{

border:2px solid #ef4444 !important;

background:
rgba(
239,
68,
68,
0.06
);

}

/* rempli */

.input-valid{

border:
2px solid #22c55e !important;

background:
rgba(
34,
197,
94,
0.08
);

}


/* manque */

.input-error{

border:
2px solid #ef4444 !important;

background:
rgba(
239,
68,
68,
0.06
);

}


/* bloqué */

.input-disabled{

background:
rgba(
34,
197,
94,
0.12
)!important;

opacity:
.7;

cursor:
not-allowed;

}
/* ===== PREMIUM CHECKBOX ===== */

.premium-toggle{

display:flex;

align-items:center;

gap:15px;

padding:
18px 22px;

background:
#3b82f6;   /* bleu */

border-radius:
18px;

cursor:pointer;

transition:
0.3s;

color:
black;     /* texte noir */

font-weight:
700;

box-shadow:
0 10px 25px rgba(
59,
130,
246,
0.25
);

}


.premium-toggle:hover{

transform:
translateY(-3px);

background:
#2563eb;

}


.premium-toggle span{

color:
black;

display:flex;

flex-direction:
column;

}


.premium-toggle small{

color:
rgba(
0,
0,
0,
0.7
);

font-size:
13px;

}


.premium-toggle input{

width:
22px;

height:
22px;

accent-color:
black;  /* checkbox noire */

cursor:
pointer;

}

.publish-btn:disabled{

opacity:
0.8;

cursor:
wait;

background:
#2563eb;

transform:
none;

}


.publish-btn{

transition:
0.3s;

}