/* ==========================
   GESTION ADMIN PRO
   STYLE PREMIUM
========================== */


/* RESET */

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

/* ==========================
   VARIABLES
========================== */

:root{

    --bleu:#17375E;
    --or:#C8A046;
    --gris:#F5F7FA;
    --texte:#333;
    --blanc:#ffffff;

    --box-shadow:var(--shadow);
    --radius:20px;
    --transition:.3s ease;

}

html {
    scroll-behavior: smooth;
}


body {
    font-family: "Segoe UI", Arial, sans-serif;
    color:var(--texte);
    line-height: 1.6;
    background: #ffffff;
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


.section {
    padding: 80px 0;
}


/* ==========================
   HEADER
========================== */

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}


.logo{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.logo-top{
    font-size:20px;
    font-weight:600;
    color:var(--bleu);
}

.logo-bottom{
    font-size:28px;
    font-weight:800;
    letter-spacing:2px;
    color:var(--or);
}

.logo small{
    margin-top:4px;
    font-size:11px;
    color:#666;
}


/* ==========================
   HERO
========================== */


.hero {

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(23,55,94,0.55),
            rgba(23,55,94,0.55)
        ),
        url("../images/banniere.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    position: relative;

    color: white;
}

.hero-overlay {

    position:absolute;
    inset:0;
    background:rgba(23,55,94,0.75);
    z-index:1;

}

.hero-content {

    position:relative;
    z-index:2;

    max-width:800px;

}



.hero h1 {

    font-size:60px;
    margin-bottom:20px;

}



.hero h2 {

    font-size:38px;
    margin-bottom:20px;

}



.hero p {

    font-size:20px;
    margin-bottom:15px;

}



.hero-buttons {

    margin-top:35px;

    display:flex;
    gap:20px;

}



.btn-primary,
.btn-secondary {


    display:inline-block;

    padding:15px 30px;

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

    transition:0.3s;

}



.btn-primary {

    background:#C8A046;
    color:white;

}



.btn-primary:hover {

    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(200,160,70,.35);

}



.btn-secondary {

    border:2px solid white;
    color:white;

}



.btn-secondary:hover {

    background:var(--blanc);
    color:var(--bleu);

}



/* ==========================
 SERVICES
========================== */


.services h2,
.why h2,
.process h2,
.about h2,
.location h2,
.contact h2 {

    text-align:center;

    font-size:38px;

    color:var(--bleu);

    margin-bottom:30px;

}



.section-intro {

    text-align:center;

    max-width:800px;

    margin:auto;

}



.cards {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:50px;

}

.card,
.process-step,
.contact-info,
.contact-form{

    background:var(--blanc);
    border-radius:var(--radius);
    box-shadow:var(--shadow);

}


.card {

       padding:35px;
    transition:0.3s;

}

.card:hover,
.process-step:hover,
.advantage-card:hover{

    transform:translateY(-8px);

}



.card h3 {

    color:var(--bleu);
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:10px;

}


.card h3 i {

    color:var(--or);
    font-size:28px;

}

.card ul {

    margin-top:15px;

    padding-left:20px;

}

.card ul {
    list-style:none;
    padding-left:0;
}

.card li {
    margin-bottom:12px;
}

.card li::before {
    content:"✓";
    color:var(--or);
    font-weight:bold;
    margin-right:10px;
}



/* ==========================
 POURQUOI
========================== */


.why {
    background:
    linear-gradient(
        135deg,
        #17375E,
        #234d7d
    );

    color:white;
    padding:90px 0;

}



.why h2 {

    color:white;

}

/* ==========================
   PROCESS / METHODE
========================== */


.process-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 50px;
}


.process-step {
    background:var(--gris);
    padding: 35px 25px;
        text-align: center;
        transition: 0.3s;
}


.process-step i {
    font-size: 40px;
    color:var(--or);
    margin-bottom: 20px;
}


.process-step h3 {
    color:var(--bleu);
    margin-bottom: 15px;
}


.process-step p {
    color: #555;
}

.process {
    background:var(--gris);
}

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


.advantages {

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:25px;
    margin:45px 0;

}



.advantage-card {

    background:var(--blanc);

    color:var(--bleu);

    padding:35px 25px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,0.15);

    transition:var(--transition);

}
.advantage-card {
    border-top:4px solid #C8A046;
}



.advantage-card h3 {

    margin-bottom:15px;

    font-size:20px;

}



.advantage-card p {

    color:#555;

}



.advantage-card i {

font-size:35px;
color:var(--or);
margin-bottom:20px;

}


/* ==========================
 CONTACT
========================== */


.contact {

    background:var(--gris);

    padding:80px 0;

    text-align:center;

}



/* ==========================
   SECTION A PROPOS
========================== */


.about-content {

    display:flex;
    align-items:center;
    gap:60px;

}



.about-image {

    flex:1;
    text-align:center;

}



.about-image img {

    width:100%;
    max-width:380px;
    height:380px;
    object-fit:cover;

    border-radius:30px;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.15);

}



.about-text {

    flex:1;

}



.about-text h2 {

    text-align:left;

    margin-bottom:15px;

}



.about-text h3 {

    color:var(--or);

    font-size:24px;

    margin-bottom:25px;

}



.about-text p {

    margin-bottom:20px;

}

.about-points p {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-weight:600;
    color:var(--bleu);
}

.about-points i {
    color:var(--or);
}

/* Mobile */

/* ==========================
   FORMULAIRE CONTACT
========================== */


.contact-wrapper {

    display:flex;
    gap:50px;
    align-items:flex-start;
    margin-top:50px;

}



.contact-info {

    flex:1;

    padding:35px;

   
}



.contact-info h3 {

    color:var(--bleu);

    font-size:28px;

    margin-bottom:25px;

}



.contact-info a {

    color:var(--bleu);

    text-decoration:none;

    font-weight:600;

}



.contact-form {

    flex:2;

    padding:40px;


}



.contact-form label {

    display:block;

    margin-bottom:8px;

    color:var(--bleu);

    font-weight:600;

}



.contact-form input,
.contact-form textarea {

    width:100%;

    padding:15px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:16px;

    font-family:inherit;

}



.contact-form textarea {

    resize:none;

}



.contact-form input:focus,
.contact-form textarea:focus {

    outline:none;

    border-color:#17375E;

}




/* MOBILE */

/* Bouton retour en haut */

#backToTop{
    position:fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:var(--bleu);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:var(--transition);
    z-index:999;
}

#backToTop:hover{
    background:#C8A046;
    transform:translateY(-3px);
}/* ==========================
   HEADER PREMIUM
========================== */

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow);
    z-index:1000;

}

.header-container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:85px;

}

.nav-menu{

    display:flex;
    list-style:none;
    gap:35px;

}

.nav-menu a{

    color:var(--bleu);
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--or);

}

.menu-toggle{

    display:none;
    background:none;
    border:none;
    font-size:30px;
    cursor:pointer;

}

body{
    padding-top:85px;
}


.footer{
    background:var(--bleu);
    color:white;
    padding:60px 20px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}


.footer-column h3 {
    margin-bottom: 20px;
    font-size: 20px;
}


.footer-column ul {
    list-style: none;
    padding: 0;
}


.footer-column ul li {
    margin-bottom: 12px;
}


.footer-column a {
    color: #d1d5db;
    text-decoration: none;
    transition: 0.3s;
}


.footer-column a:hover {
    color: white;
}


.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 14px;
}


.footer-bottom a {
    margin-left: 20px;
}


/* Mobile */

.btn-secondary i,
.contact-info i,
.footer i {
    margin-right:8px;
    color:var(--or);

}

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


.hero-intro {

    font-size:24px !important;

    font-weight:600;

    max-width:650px;

}



.hero-description {

    max-width:650px;

    opacity:.95;

}



.hero-points {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:40px;

}


.hero-points li {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}
.hero-points {
    list-style:none;
    padding:0;
}




.hero-points i {

    color:var(--or);

}

/* ==========================
   ZONE INTERVENTION
========================== */


.location {

background:var(--gris);

}



.location-content {

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.location-text h3 {

color:var(--bleu);

font-size:26px;

margin-bottom:20px;

}

.location-text ul {
    list-style:none;
    padding-left:0;
}

.location-text ul {

margin-top:25px;

padding-left:20px;

}



.location-text li {

margin-bottom:12px;

}


.location-text li {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.location-text li i {
    color:var(--or);
}


.map-container iframe {

    width:100%;
    height:350px;
    border:0;
    border-radius:var(--radius);

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}


.contact-form button{

    width:100%;

}.hero-badge{

    display:inline-block;

    padding:8px 18px;

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

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

    border-radius:30px;

    margin-bottom:25px;

    font-size:14px;

    letter-spacing:.5px;
}


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


footer {

    background:var(--bleu);

    color:white;

    text-align:center;

    padding:30px;

}

.footer-column p{

    color:#d1d5db;
    line-height:1.7;

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;

}

.footer-column p i {
    color:var(--or);
    width: 18px;
    text-align: center;
}

.footer-column p a{
    color:#d1d5db;
    text-decoration:none;
}

.footer-column p a:hover {
    color: white;
}

/* ==========================
   RESPONSIVE MOBILE
========================== */

@media (max-width:768px){

    /* HEADER */

    .header-container{
        padding:0 15px;
    }

    .logo-bottom{
        font-size:22px;
    }

    .logo small{
        font-size:9px;
    }

    .nav-menu{
        display:none;
    }

    .nav-menu.active{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:80px;
        left:0;
        right:0;
        width:100%;
        padding:30px;
        text-align:center;
        background:var(--blanc);
        z-index:999;
    }

    .menu-toggle{
        display:block;
    }

    /* HERO */

    .hero{
        min-height:90vh;
    }

    .hero-content{
        text-align:center;
    }

    .hero h1{
        font-size:36px;
    }

    .hero h2{
        font-size:24px;
    }

    .hero p{
        font-size:17px;
    }

    .hero-intro{
        font-size:20px !important;
    }

    .hero-points{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    /* SERVICES */

    .cards{
        gap:20px;
    }

    .card{
        padding:25px;
        border-radius:15px;
    }

    /* À PROPOS */

    .about-content{
        flex-direction:column;
    }

    .about-image img{
        height:auto;
    }

    .about-text h2{
        text-align:center;
    }

    /* CONTACT */

    .contact-wrapper{
        flex-direction:column;
    }

    .contact-form{
        padding:25px;
    }

    .contact-form button{
        width:100%;
    }

    /* LOCALISATION */

    .location-content{
        grid-template-columns:1fr;
    }

    .map-container iframe{
        height:280px;
    }

    /* FOOTER */

    .footer-container{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

}