/* =====================================================
   AGIR HYGIENE SERVICES
   STYLE SITE PUBLIC - VERSION AHS MODERNE
===================================================== */


/* =====================================================
   VARIABLES COULEURS AHS
===================================================== */


:root {

    --bleu-ahs:#3159A6;

    --bleu-fonce:#1E3F78;

    --vert-ahs:#4FA66A;

    --vert-clair:#E8F5EC;

    --blanc:#ffffff;

    --fond:#F6F8F7;

    --gris:#64748b;

    --texte:#263238;

}





/* =====================================================
   RESET GENERAL
===================================================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:

    Arial,
    Helvetica,
    sans-serif;


    background:var(--fond);

    color:var(--texte);

    line-height:1.6;

}





a {

    color:inherit;

    text-decoration:none;

}





img {

    max-width:100%;

    height:auto;

    display:block;

}








/* =====================================================
   CONTENEUR
===================================================== */


.container {


    width:90%;

    max-width:1200px;

    margin:auto;


}







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


.site-header {


    background:var(--bleu-ahs);

    padding:15px 0;


}






.header-container {


    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;


}







.header-logo img {


    width:150px;


}







.main-menu {


    display:flex;

    gap:25px;


}





.main-menu a {


    color:white;

    font-size:16px;

    font-weight:600;

    transition:.3s;


}






.main-menu a:hover {


    color:var(--vert-clair);


}








/* =====================================================
   SECTIONS
===================================================== */


.section {


    padding:80px 0;


}






.section:nth-child(even) {


    background:white;


}






.section-dark {


    background:

    linear-gradient(

        135deg,

        var(--bleu-ahs),

        var(--bleu-fonce)

    );


    color:white;


}







.section-title {


    text-align:center;

    font-size:38px;

    font-weight:700;

    color:var(--bleu-ahs);

    margin-bottom:40px;


}






.section-dark .section-title {


    color:white;


}






.section-description {


    text-align:center;

    max-width:850px;

    margin:0 auto 40px;

    color:var(--gris);

    font-size:18px;


}


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


.bande-blanche {


    min-height:650px;

    display:flex;

    align-items:center;


}





.hero-title {


    color:var(--bleu-ahs);

    font-size:33px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:20px;


}





.hero-subtitle {


    color:var(--vert-ahs);

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;


}





.hero-text {


    max-width:800px;

    margin:auto;

    font-size:20px;

    color:var(--texte);


}





.hero-phone {


    margin-top:30px;

    font-size:30px;

    font-weight:bold;


}





.hero-phone a {


    color:var(--bleu-ahs);


}








/* =====================================================
   BOUTONS
===================================================== */


.btn-primary {


    display:inline-block;

    margin-top:25px;

    padding:15px 35px;


    background:

    var(--vert-ahs);


    color:white;


    border-radius:50px;


    font-size:18px;


    font-weight:bold;


    transition:.3s;


}





.btn-primary:hover {


    background:var(--bleu-ahs);


    color:white;


    transform:translateY(-3px);


}








/* =====================================================
   CARTES GENERALES
===================================================== */


.cards {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:30px;


}






.card {


    background:var(--blanc);


    border-radius:18px;


    overflow:hidden;


    box-shadow:


    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


}





.card:hover {


    transform:translateY(-8px);


    box-shadow:


    0 15px 40px rgba(0,0,0,.15);


}







.card-image {


    width:100%;


    height:220px;


    object-fit:cover;


}







.card-body {


    padding:25px;


}





.card h3 {


    color:var(--bleu-ahs);


    font-size:24px;


    margin-bottom:15px;


}





.card p {


    color:#475569;


    margin-bottom:20px;


}









/* =====================================================
   PRESTATIONS
===================================================== */


#prestations {


    background:white;


}





#prestations .card {


    border-top:

    5px solid var(--vert-ahs);


}





#prestations .btn-primary {


    font-size:15px;


    padding:12px 25px;


}









/* =====================================================
   BLOCS INFORMATIONS
===================================================== */


.bloc {


    background:white;


    padding:30px;


    border-radius:18px;


    margin-bottom:25px;


    border-left:

    6px solid var(--vert-ahs);


    box-shadow:


    0 10px 30px rgba(0,0,0,.06);


}





.bloc h3 {


    color:var(--bleu-ahs);


    margin-bottom:15px;


    font-size:24px;


}





.bloc p {


    margin-bottom:10px;


}






.section-dark .bloc {


    color:var(--texte);


}





.section-dark .bloc h3 {


    color:var(--bleu-ahs);


}



/* =====================================================
   AVIS CLIENTS
===================================================== */


.avis-card {


    padding:30px;


}





.avis-card h3 {


    color:var(--bleu-ahs);

    margin-bottom:10px;


}





.note {


    font-size:22px;

    color:#F4B400;

    letter-spacing:3px;


}





.avis-card p:last-child {


    font-style:italic;

    color:var(--gris);


}








/* =====================================================
   GOOGLE MAP
===================================================== */


.google-map {


    margin:40px 0;


    border-radius:20px;


    overflow:hidden;


    box-shadow:


    0 10px 30px rgba(0,0,0,.12);


}





.google-map iframe {


    display:block;


}








/* =====================================================
   VILLES INTERVENTION
===================================================== */


.liste-villes {


    display:flex;


    flex-wrap:wrap;


    gap:12px;


    margin:25px 0;


}





.badge-ville {


    background:var(--vert-clair);


    color:var(--vert-ahs);


    padding:10px 18px;


    border-radius:30px;


    font-weight:bold;


}








/* =====================================================
   APPEL ACTION
===================================================== */


.appel-action {


    margin-top:50px;


    padding:40px;


    text-align:center;



    background:


    linear-gradient(

        135deg,

        var(--bleu-ahs),

        var(--bleu-fonce)

    );


    color:white;


    border-radius:20px;


}







.appel-action h3 {


    font-size:32px;


    margin-bottom:15px;


}





.telephone {


    font-size:32px;


    font-weight:bold;


    margin-top:20px;


}





.telephone a {


    color:white;


}








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


.footer-contact {


    background:var(--bleu-fonce);


    color:white;


    padding:60px 0;


}






.footer-grid {


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(250px,1fr));


    gap:40px;


}





.footer-logo {


    max-width:180px;


}





.footer-contact h3 {


    color:#8BD49A;


    margin-bottom:20px;


}





.footer-contact a {


    color:white;


}





.footer-contact p {


    margin-bottom:10px;


}









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


@media(max-width:900px){



.hero-title {


    font-size:42px;


}





.cards {


    grid-template-columns:1fr;


}





}





@media(max-width:600px){



.header-container {


    flex-direction:column;


    gap:15px;


}





.main-menu {


    flex-direction:column;


    text-align:center;


    gap:12px;


}





.hero-title {


    font-size:32px;


}





.hero-subtitle {


    font-size:24px;


}





.hero-text {


    font-size:17px;


}





.section {


    padding:50px 0;


}





.section-title {


    font-size:30px;


}





.btn-primary {


    padding:14px 25px;


}



}












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


.contact {

    padding:80px 0;

    background:var(--fond);

}




.contact-container {

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

    align-items:start;

}





.contact-left {


    text-align:center;


}




.contact-image {


    width:100%;

    max-width:450px;

    margin:auto;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.12);


}





.info-box {


    background:white;

    margin-top:30px;

    padding:30px;

    border-radius:20px;

    text-align:left;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


}





.info-box p {


    margin-bottom:15px;

    color:var(--texte);

    font-weight:600;


}





.contact-right {


    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


}





.contact-right h2 {


    color:var(--bleu-ahs);

    font-size:34px;

    margin-bottom:15px;


}





.contact-right > p {


    color:var(--gris);

    margin-bottom:30px;


}





.contact-right form {


    display:flex;

    flex-direction:column;

    gap:18px;


}





.contact-right input,
.contact-right select,
.contact-right textarea {


    width:100%;

    padding:15px 18px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:16px;

    font-family:inherit;

    background:#fff;


}





.contact-right textarea {


    resize:vertical;


}





.contact-right input:focus,
.contact-right select:focus,
.contact-right textarea:focus {


    outline:none;

    border-color:var(--bleu-ahs);

    box-shadow:

    0 0 0 3px rgba(49,89,166,.15);


}





.contact-right label {


    font-weight:600;

    color:var(--texte);


}





.contact-right .btn {


    border:none;

    cursor:pointer;

}





.success {


    background:#E8F5EC;

    color:#26723b;

    padding:15px;

    border-radius:12px;

    margin-bottom:20px;

}





.error {


    background:#fde8e8;

    color:#b91c1c;

    padding:15px;

    border-radius:12px;

    margin-bottom:20px;

}





@media(max-width:900px){


    .contact-container {


        grid-template-columns:1fr;


    }


}


.contact-submit{

    border:none;

    cursor:pointer;

    width:100%;

    font-size:17px;

}






/* ==========================================================
   ALERTE SAISONNIÈRE
========================================================== */

.alerte-nuisibles{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    font-size:14px;

}

.alerte-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:48px;

    padding:8px 0;

}

.alerte-message{

    display:flex;

    align-items:center;

    gap:10px;

    flex:1;

    color:#374151;

    line-height:1.5;

}

.alerte-message strong{

    color:#0b3c7d;

    font-size:15px;

    white-space:nowrap;

}

.alerte-message span{

    font-size:15px;

}

.alerte-btn{

    background:#28a745;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.alerte-btn:hover{

    background:#1f7d34;

}

@media (max-width:768px){

    .alerte-container{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:10px 0;

    }

    .alerte-message{

        display:block;

    }

    .alerte-message strong{

        display:block;

        margin-bottom:4px;

    }

}