*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#0f172a;
color:white;
line-height:1.6;
overflow-x:hidden;
}


/* HEADER */

header{
background:#111827;
padding:35px 20px;
text-align:center;
border-bottom:1px solid #374151;
}

header h1{
font-size:36px;
letter-spacing:3px;
background:linear-gradient(90deg,#60a5fa,#a78bfa);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

header p{
margin-top:10px;
color:#9ca3af;
}


/* MENU */

.menu{
background:#0b1220;
border-bottom:1px solid #374151;
display:flex;
justify-content:center;
gap:40px;
padding:15px 20px;
flex-wrap:wrap;
}

.menu a{
color:#9ca3af;
text-decoration:none;
font-weight:bold;
transition:0.2s;
}

.menu a:hover{
color:#60a5fa;
}

.menu .urgence{
color:#ff6b6b;
}


/* CONTAINER */

.container{
width:90%;
max-width:1100px;
margin:auto;
padding:40px 20px;
}


/* CARDS GRID */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}


/* CARD */

.card{
background:#1f2937;
padding:25px;
border-radius:10px;
transition:0.3s;
border:1px solid #374151;
}

.card:hover{
background:#374151;
transform:translateY(-5px);
}

.card h3{
margin-bottom:10px;
color:white;
}

.card p{
color:#cbd5e1;
}


/* LIEN CARD */

.card-link{
text-decoration:none;
color:inherit;
display:block;
}


/* PHOTO CARD */

.photo-card{
text-align:center;
}

.photo-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
border:3px solid #60a5fa;
}


/* FOOTER */

footer{
margin-top:60px;
padding:20px;
text-align:center;
color:#6b7280;
border-top:1px solid #374151;
}

/* ---------------- */
/* BOUTONS URGENCE */
/* ---------------- */

.urgence-actions{
margin-top:25px;
display:flex;
gap:20px;
flex-wrap:wrap;
}

.urgence-btn{
display:inline-block;
padding:14px 26px;
border-radius:8px;
font-weight:bold;
text-decoration:none;
color:white;
transition:0.25s;
}

.urgence-btn.call{
background:#ef4444;
}

.urgence-btn.call:hover{
background:#dc2626;
transform:translateY(-2px);
}

.urgence-btn.remote{
background:#3b82f6;
}

.urgence-btn.remote:hover{
background:#2563eb;
transform:translateY(-2px);
}

.urgence-info{
margin-top:25px;
color:#9ca3af;
}

.contact-box{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-top:10px;
}

.btn-call,
.btn-whatsapp,
.btn-teams{
display:inline-block;
padding:18px 30px;
border-radius:10px;
text-decoration:none;
font-size:18px;
font-weight:600;
color:white;
transition:all 0.3s ease;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* téléphone */

.btn-call{
background:linear-gradient(135deg,#ef4444,#dc2626);
}

/* whatsapp */

.btn-whatsapp{
background:linear-gradient(135deg,#22c55e,#16a34a);
}

/* teams */

.btn-teams{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.btn-call:hover,
.btn-whatsapp:hover,
.btn-teams:hover{
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,0.4);
}