/* styles.css  perso repris de romain*/
:root {
    --phenix-dark-blue: #0A2647; /* Bleu foncé corps phénix */
    --phenix-light-blue: #0076ad; /* Bleu clair ailes phénix */
    --phenix-red: #B22222; /* Rouge */
    /*--bg-light: #f8f9fa; */  /* jsais po , n'est pas utilisé dans le reste du CSS donc en commentaire*/
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6; /* !!!!A faire varier pour voir!!!!! */
}


/* Navigation */

.navbar {
    background-color: var(--phenix-dark-blue);
    border-bottom: 2px solid var(--phenix-red);
}
.navbar-brand img {
    height: 60px; /* !!!!A faire varier pour voir!!!!! */
}
.nav-link {
    color: white !important;  /* !important signifie que cette propriété a la priorité */
    font-wight: 600; /* epaisseur de la police, 600 c'est presque gras */
}
nav li {
    margin: 10px;
}


/* !!!!btn contact pas mis car je vais pas en mettre pour l'instant !!!! */



/* Hero Section */  /* clairement pas certain de l'utilité. Et appeler des site externe est gavant*/
.hero {
    background: linear-gradient(rgba(0,51,102,0.85), rgba(0,51,102,0.7)), url("logo.jpg"); 
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0; /* marge autour de l'image */
}
.hero h1 {
    font-wieght: 700;
    margin-bottom: 20px;
}

/* Services */
.service-card {
    border: none;
    transition: transform 0.3s;  /* utilité? */
    height: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.service-card:hover {
    transform: translateY(-5px);
}
.icon-box {
    color: var(--phenix-light-blue);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

/* Section Ecologie */
.eco-section {
    background-color: #e9ecef;
    border-left: 5px solid #28a745;
}
/* Section Nos Prestations */
.nos-prestations {
    background-color: var(--phenix-light-blue);
    border-left: 5px solid var(--phenix-dark-blue);
    color: white;
}

/* Tarifs */
.price-tage {
    color: var(--phenix-red);
    font-weight: 100;
    font-size: 1.2rem;
}

/* Footer */
footer {
    background-color: var(--phenix-dark-blue);
    color: white;
    padding: 40px 0;
}
footer a {
    color: #ccc;
    text-decoration: none;
}
footer a:hover {
    color: white;
}
li::marker {
    color: var(--phenix-red);
}