/* ==========================================================
   XTREME CLEANING SERVICES
   style.css
   Autheur Jean-Nël COLLINI
   Version 1.0
========================================================== */

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

:root{

--primary:#178A43;
--primary-dark:#10692F;
--secondary:#F5F5F5;
--accent:#FFC107;
--dark:#212529;
--light:#FFFFFF;
--gray:#6C757D;

--success:#198754;
--danger:#DC3545;

--radius:18px;

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

--transition:.35s ease;

--container:1320px;

}

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

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
"Segoe UI",
Tahoma,
Geneva,
Verdana,
sans-serif;

font-size:16px;

line-height:1.7;

color:var(--dark);

background:#fff;

overflow-x:hidden;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

max-width:var(--container);

}

/* ==========================================================
   LIENS
========================================================== */

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}

a:hover{

color:var(--primary);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

display:block;

max-width:100%;

height:auto;

}

/* ==========================================================
   LISTES
========================================================== */

ul,
ol{

padding-left:0;

margin-bottom:0;

}

li{

list-style:none;

}

/* ==========================================================
   TITRES
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

font-weight:700;

line-height:1.3;

margin-bottom:20px;

color:var(--dark);

}

h1{

font-size:3.4rem;

}

h2{

font-size:2.5rem;

}

h3{

font-size:2rem;

}

h4{

font-size:1.35rem;

}

p{

margin-bottom:18px;

color:#555;

}

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

.section{

padding:100px 0;

position:relative;

}

.section-title{

display:inline-block;

padding:8px 22px;

background:rgba(23,138,67,.1);

color:var(--primary);

font-weight:700;

border-radius:100px;

margin-bottom:18px;

letter-spacing:.5px;

}

/* ==========================================================
   COULEURS
========================================================== */

.bg-light{

background:#f8f9fa!important; /*----------- couleur GRIS clair grands cadres de fond --- jno----*/

}

.bg-success{

background:#d3ffe4!important; /*----------- couleur GRIS clair grands bandeau large page SERIVES --- jno----*/

}

.text-success{

color:var(--primary)!important;

}

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

.btn-premium{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

background:var(--primary);

color:#fff;

border:none;

border-radius:999px;

font-weight:700;

font-size:1rem;

cursor:pointer;

transition:var(--transition);

box-shadow:var(--shadow);

}

.btn-premium:hover{

background:var(--primary-dark);

transform:translateY(-3px);

color:#fff;

}

/* ==========================================================
   CARDS
========================================================== */

.card,
.feature-box,
.contact-card,
.testimonial-card,
.process-card{

background:#fff;

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:35px;

transition:var(--transition);

height:100%;

}

.card:hover,
.feature-box:hover,
.contact-card:hover,
.testimonial-card:hover,
.process-card:hover{

transform:translateY(-8px);

}

/* ==========================================================
   UTILITAIRES
========================================================== */

.rounded-4{

border-radius:var(--radius)!important;

}

.shadow-lg{

box-shadow:var(--shadow)!important;

}

.text-center{

text-align:center;

}

.mb-5{

margin-bottom:3rem!important;

}

.mt-4{

margin-top:1.5rem!important;

}
/* ==========================================================
   LOADER
========================================================== */

#loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

z-index:99999;

transition:opacity .5s ease,
visibility .5s ease;

}

#loader.hidden{

opacity:0;

visibility:hidden;

}

.loader-logo img{

width:130px;

animation:loaderPulse 1.8s infinite ease-in-out;

}

@keyframes loaderPulse{

0%{

transform:scale(.95);
opacity:.7;

}

50%{

transform:scale(1.08);
opacity:1;

}

100%{

transform:scale(.95);
opacity:.7;

}

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

position:fixed;

top:0;
left:0;
right:0;

padding:18px 0;

background:transparent;

transition:all .35s ease;

z-index:9990;

}

.navbar.sticky{

background:#fff;

padding:12px 0;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

.navbar-brand img{

height:70px;

transition:.3s;

}

.navbar.sticky .navbar-brand img{

height:58px;

}

/* ==========================================================
   MENU
========================================================== */

.navbar-nav{

align-items:center;

gap:8px;

}

.navbar-nav .nav-link{

position:relative;

padding:12px 18px;

font-weight:600;

color:#fff;

transition:.3s;

border-radius:40px;

}

.navbar.sticky .nav-link{

color:var(--dark);

}

.navbar-nav .nav-link:hover{

color:#fff;

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

}

.navbar.sticky .nav-link:hover{

background:rgba(23,138,67,.08);

color:var(--primary);

}

.navbar-nav .nav-link.active{

background:var(--primary);

color:#fff;

}

/* Ligne animée */

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:20px;

bottom:8px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

.navbar-nav .nav-link:hover::after{

width:calc(100% - 40px);

}

.navbar-nav .nav-link.active::after{

display:none;

}

/* ==========================================================
   HAMBURGER
========================================================== */

.navbar-toggler{

border:none;

box-shadow:none!important;

padding:8px;

}

.navbar-toggler:focus{

box-shadow:none;

}

.navbar-toggler-icon{

background-image:none;

display:flex;

align-items:center;

justify-content:center;

width:34px;
height:34px;

}

.navbar-toggler-icon::before{

content:"\2630";

font-size:30px;

font-weight:700;

color:#fff;

}

.navbar.sticky .navbar-toggler-icon::before{

color:var(--primary);

}

/* ==========================================================
   MENU MOBILE
========================================================== */

@media(max-width:991px){

.navbar-collapse{

margin-top:18px;

padding:20px;

background:#fff;

border-radius:18px;

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

}

.navbar-nav{

gap:0;

}

.navbar-nav .nav-link{

color:var(--dark)!important;

padding:14px 18px;

border-radius:12px;

}

.navbar-nav .nav-link:hover{

background:rgba(23,138,67,.08);

color:var(--primary)!important;

}

.navbar-nav .nav-link.active{

background:var(--primary);

color:#fff!important;

}

}

/* ==========================================================
   STICKY ANIMATION
========================================================== */

.navbar.sticky{

animation:navbarSlide .35s ease;

}

@keyframes navbarSlide{

from{

transform:translateY(-100%);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

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

.hero{

position:relative;

display:flex;

align-items:center;

justify-content:center;

min-height:100vh;

padding:140px 0 100px;

overflow:hidden;

background:#111;

}

/* ==========================================================
   IMAGE DE FOND
========================================================== */

.hero-background{

position:absolute;

inset:0;

z-index:1;

overflow:hidden;

}

.hero-image{

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.05);

animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

from{

transform:scale(1.05);

}

to{

transform:scale(1.15);

}

}

/* ==========================================================
   OVERLAY
========================================================== */

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(0,0,0,.65),
rgba(23,138,67,.45)
);

z-index:2;

}

/* ==========================================================
   CONTENU
========================================================== */

.hero-content{

position:relative;

z-index:3;

max-width:900px;

margin:auto;

color:#fff;

}

.hero-content h1{

font-size:clamp(2.8rem,6vw,4.6rem);

font-weight:800;

color:#fff;

margin-bottom:25px;

text-shadow:
0 5px 20px rgba(0,0,0,.45);

}

.hero-content .lead{

font-size:1.25rem;

color:#f4f4f4;

max-width:760px;

margin:0 auto 35px;

line-height:1.8;

}

.hero-content .section-title{

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

color:#fff;

backdrop-filter:blur(8px);

-webkit-backdrop-filter:blur(8px);

}

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

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.hero-buttons .btn{

padding:15px 34px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

}

.hero-buttons .btn-light{

background:#fff;

border:none;

color:var(--dark);

}

.hero-buttons .btn-light:hover{

background:var(--accent);

color:#111;

transform:translateY(-3px);

}

.hero-buttons .btn-success{

background:var(--primary);

border:none;

}

.hero-buttons .btn-success:hover{

background:var(--primary-dark);

transform:translateY(-3px);

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.hero-scroll{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:4;

color:#fff;

font-size:28px;

animation:bounce 2s infinite;

cursor:pointer;

}

@keyframes bounce{

0%,
20%,
50%,
80%,
100%{

transform:translate(-50%,0);

}

40%{

transform:translate(-50%,-12px);

}

60%{

transform:translate(-50%,-6px);

}

}

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

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

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

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

border-radius:999px;

color:#fff;

font-weight:600;

backdrop-filter:blur(8px);

-webkit-backdrop-filter:blur(8px);

margin:8px;

}

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

.hero-stats{

display:flex;

justify-content:center;

gap:35px;

margin-top:50px;

flex-wrap:wrap;

}

.hero-stat{

text-align:center;

color:#fff;

}

.hero-stat h2{

font-size:2.5rem;

font-weight:800;

color:#fff;

margin-bottom:8px;

}

.hero-stat p{

margin:0;

color:#f0f0f0;

font-size:.95rem;

}

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

@media(max-width:991px){

.hero{

padding:120px 0 80px;

min-height:90vh;

}

.hero-content{

padding:0 20px;

}

.hero-content .lead{

font-size:1.1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn,
.hero-buttons .btn-premium{

width:100%;

max-width:360px;

}

.hero-stats{

gap:20px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:2.4rem;

}

.hero-content .lead{

font-size:1rem;

}

.hero-scroll{

display:none;

}

}
/* ==========================================================
   CARDS PREMIUM
========================================================== */

.card,
.feature-box,
.contact-card,
.testimonial-card,
.process-card{

position:relative;

background:#fff;

border-radius:var(--radius);

padding:35px;

overflow:hidden;

box-shadow:var(--shadow);

transition:all .35s ease;

border:1px solid rgba(0,0,0,.05);

}

.card::before,
.feature-box::before,
.contact-card::before,
.testimonial-card::before,
.process-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
var(--accent)
);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.card:hover,
.feature-box:hover,
.contact-card:hover,
.testimonial-card:hover,
.process-card:hover{

transform:translateY(-10px);

box-shadow:
0 18px 45px rgba(0,0,0,.15);

}

.card:hover::before,
.feature-box:hover::before,
.contact-card:hover::before,
.testimonial-card:hover::before,
.process-card:hover::before{

transform:scaleX(1);

}

/* ==========================================================
   FEATURE BOX
========================================================== */

.feature-box{

text-align:center;

}

.feature-box i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

transition:.35s;

}

.feature-box:hover i{

transform:scale(1.15) rotate(5deg);

color:var(--primary-dark);

}

.feature-box h4{

margin-bottom:15px;

}

.feature-box p{

margin-bottom:0;

}

/* ==========================================================
   PROCESS CARD
========================================================== */

.process-card{

text-align:center;

}

.process-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(23,138,67,.1);

color:var(--primary);

transition:.35s;

}

.process-card:hover .process-icon{

background:var(--primary);

color:#fff;

transform:rotate(8deg) scale(1.08);

}

.process-card h4{

margin-bottom:15px;

}

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

.contact-card{

text-align:center;

}

.contact-card i{

font-size:3rem;

margin-bottom:20px;

color:var(--primary);

transition:.35s;

}

.contact-card:hover i{

transform:translateY(-6px);

}

.contact-card .btn{

margin-top:20px;

border-radius:999px;

padding:12px 28px;

}

/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonial-card{

text-align:center;

}

.testimonial-card .stars{

font-size:1.4rem;

letter-spacing:4px;

color:#FFC107;

margin-bottom:20px;

}

.testimonial-card p{

font-style:italic;

margin-bottom:25px;

}

.testimonial-card h5{

margin-bottom:0;

font-weight:700;

}

/* ==========================================================
   HOVER GLOW
========================================================== */

.feature-box:hover,
.contact-card:hover,
.testimonial-card:hover,
.process-card:hover{

background:#fff;

}

.feature-box:hover{

box-shadow:
0 20px 50px rgba(23,138,67,.18);

}

.contact-card:hover{

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

}

.testimonial-card:hover{

box-shadow:
0 20px 50px rgba(255,193,7,.20);

}

.process-card:hover{

box-shadow:
0 20px 50px rgba(23,138,67,.20);

}

/* ==========================================================
   CTA SECTION
========================================================== */

.cta-section{

padding:90px 0;






background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

position:relative;

overflow:hidden;

}

.cta-section::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:260px;
height:260px;

border-radius:50%;

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

}

.cta-section h2{

color:#fff;

margin-bottom:20px;

}

.cta-section p{

color:#f5f5f5;

margin-bottom:0;

}

.cta-section .btn-light{

border-radius:999px;

font-weight:700;

}

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

@media(max-width:991px){

.card,
.feature-box,
.contact-card,
.testimonial-card,
.process-card{

padding:28px;

}

.process-icon{

width:80px;

height:80px;

}

}

@media(max-width:576px){

.card,
.feature-box,
.contact-card,
.testimonial-card,
.process-card{

padding:24px;

}

.feature-box i,
.contact-card i{

font-size:2.5rem;

}

.process-icon{

width:70px;

height:70px;

}

}




/*------------JNO test centrer slide acceuilcarousel */
.swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
}

.swiper-slide img{
    display:block;
    max-width:50%;/*taille de l'image*/
    height:auto;
    margin:auto;
}
/* ==========================================================
   GALERIE
========================================================== */

.gallery{

padding:40px 0;

}

.gallery-grid{

display:grid;

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

gap:30px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:var(--radius);

background:#fff;

box-shadow:var(--shadow);

cursor:pointer;

transition:all .35s ease;

}

.gallery-item:hover{

transform:translateY(-8px);

box-shadow:
0 18px 45px rgba(0,0,0,.18);

}

/* ==========================================================
   IMAGE
========================================================== */

.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

transition:transform .6s ease;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/* ==========================================================
   OVERLAY
========================================================== */

.gallery-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

background:
linear-gradient(
to top,
rgba(0,0,0,.72),
rgba(0,0,0,.15),
transparent
);

opacity:0;

transition:.35s ease;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h4{

color:#fff;

margin-bottom:10px;

}

.gallery-overlay p{

color:#f5f5f5;

margin-bottom:0;

}

/* ==========================================================
   BOUTON ZOOM
========================================================== */

.gallery-zoom{

position:absolute;

top:20px;

right:20px;

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

backdrop-filter:blur(8px);

-webkit-backdrop-filter:blur(8px);

color:#fff;

font-size:1.2rem;

transform:scale(.8);

opacity:0;

transition:.3s;

}

.gallery-item:hover .gallery-zoom{

opacity:1;

transform:scale(1);

}

/* ==========================================================
   FILTRES
========================================================== */

.gallery-filters{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:50px;

}

.gallery-filter{

padding:12px 24px;

border:none;

border-radius:999px;

background:#f5f5f5;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.gallery-filter:hover{

background:var(--primary);

color:#fff;

}

.gallery-filter.active{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   LIGHTBOX
========================================================== */

.lightbox{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.92);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

padding:30px;

}

.lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:95%;

max-height:90vh;

border-radius:14px;

box-shadow:
0 20px 60px rgba(0,0,0,.4);

animation:lightboxZoom .35s ease;

}

@keyframes lightboxZoom{

from{

transform:scale(.85);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

/* ==========================================================
   FERMETURE
========================================================== */

.close-lightbox{

position:absolute;

top:25px;

right:35px;

font-size:3rem;

color:#fff;

cursor:pointer;

transition:.3s;

line-height:1;

}

.close-lightbox:hover{

transform:rotate(90deg);

color:var(--accent);

}

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

@media(max-width:991px){

.gallery-grid{

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

}

.gallery-item img{

height:260px;

}

}

@media(max-width:576px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item img{

height:220px;

}

.gallery-overlay{

padding:20px;

}

.gallery-filter{

padding:10px 18px;

font-size:.95rem;

}

.close-lightbox{

top:15px;

right:20px;

font-size:2.3rem;

}

}
/* ==========================================================
   FORMULAIRE DE CONTACT
========================================================== */

.contact-form{

background:#fff;

border-radius:var(--radius);

padding:45px;

box-shadow:var(--shadow);

border:1px solid rgba(0,0,0,.05);

}

/* ==========================================================
   LABELS
========================================================== */

.contact-form .form-label{

display:block;

font-weight:700;

color:var(--dark);

margin-bottom:10px;

}

/* ==========================================================
   INPUTS
========================================================== */

.contact-form .form-control,
.contact-form .form-select{

width:100%;

min-height:56px;

padding:14px 18px;

border:2px solid #e5e5e5;

border-radius:14px;

background:#fff;

font-size:1rem;

transition:all .3s ease;

box-shadow:none;

}

.contact-form textarea.form-control{

min-height:180px;

resize:vertical;

}

/* ==========================================================
   FOCUS
========================================================== */

.contact-form .form-control:focus,
.contact-form .form-select:focus{

border-color:var(--primary);

box-shadow:
0 0 0 .2rem rgba(23,138,67,.15);

outline:none;

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.contact-form ::placeholder{

color:#999;

opacity:1;

}

/* ==========================================================
   SELECT
========================================================== */

.contact-form .form-select{

cursor:pointer;

}

/* ==========================================================
   INPUT FILE
========================================================== */

.contact-form input[type="file"]{

padding:12px;

background:#f8f9fa;

cursor:pointer;

}

.contact-form input[type="file"]::file-selector-button{

padding:10px 18px;

margin-right:15px;

border:none;

border-radius:10px;

background:var(--primary);

color:#fff;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}

.contact-form input[type="file"]::file-selector-button:hover{

background:var(--primary-dark);

}

/* ==========================================================
   CHECKBOX RGPD
========================================================== */

.contact-form .form-check{

display:flex;

align-items:flex-start;

gap:12px;

}

.contact-form .form-check-input{

width:20px;

height:20px;

margin-top:2px;

border:2px solid var(--primary);

cursor:pointer;

}

.contact-form .form-check-input:checked{

background-color:var(--primary);

border-color:var(--primary);

}

.contact-form .form-check-label{

font-size:.95rem;

line-height:1.6;

color:#555;

cursor:pointer;

}

/* ==========================================================
   BOUTON
========================================================== */

.contact-form button[type="submit"]{

min-width:240px;

padding:16px 36px;

font-size:1.05rem;

}

/* ==========================================================
   MESSAGES
========================================================== */

.form-success,
.form-error{

display:none;

padding:18px 20px;

margin-top:25px;

border-radius:12px;

font-weight:600;

}

.form-success{

background:#d1e7dd;

color:#0f5132;

border:1px solid #badbcc;

}

.form-error{

background:#f8d7da;

color:#842029;

border:1px solid #f5c2c7;

}

/* ==========================================================
   CHAMPS INVALIDES
========================================================== */

.contact-form .is-invalid{

border-color:var(--danger)!important;

box-shadow:
0 0 0 .2rem rgba(220,53,69,.15);

}

.contact-form .is-valid{

border-color:var(--success)!important;

box-shadow:
0 0 0 .2rem rgba(25,135,84,.15);

}

/* ==========================================================
   TEXTE D'AIDE
========================================================== */

.contact-form small{

display:block;

margin-top:8px;

font-size:.9rem;

color:#777;

}

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

@media(max-width:991px){

.contact-form{

padding:35px;

}

}

@media(max-width:576px){

.contact-form{

padding:25px;

}

.contact-form button[type="submit"]{

width:100%;

}

.contact-form .form-check{

align-items:flex-start;

}

}
/* ==========================================================
   FAQ - ACCORDION
========================================================== */

.accordion{

border:none;

}

.accordion-item{

border:none;

margin-bottom:18px;

border-radius:var(--radius)!important;

overflow:hidden;

box-shadow:var(--shadow);

}

.accordion-button{

background:#fff;

padding:22px 26px;

font-weight:700;

font-size:1.05rem;

color:var(--dark);

box-shadow:none!important;

border:none;

transition:var(--transition);

}

.accordion-button:not(.collapsed){

background:var(--primary);

color:#fff;

}

.accordion-button:focus{

box-shadow:none;

border:none;

}

.accordion-button::after{

transition:transform .3s ease;

}

.accordion-button:not(.collapsed)::after{

transform:rotate(180deg);

filter:brightness(0) invert(1);

}

.accordion-body{

padding:24px 26px;

background:#fff;

line-height:1.8;

color:#555;

}

/* ==========================================================
   COMPTEURS
========================================================== */

.counter{

font-size:3.2rem;

font-weight:800;

color:#fff;

line-height:1;

margin-bottom:10px;

}

.counter + p{

font-size:1.05rem;

color:rgba(255,255,255,.9);

margin-bottom:0;

}

.stats-box{

padding:40px 20px;

text-align:center;

}

.stats-box i{

font-size:3rem;

margin-bottom:20px;

color:var(--accent);

}

/* ==========================================================
   HORAIRES
========================================================== */

.opening-hours{

background:#fff;

border-radius:var(--radius);

box-shadow:var(--shadow);

overflow:hidden;

}

.opening-hours .d-flex{

padding:16px 20px;

align-items:center;

transition:background .3s ease;

}

.opening-hours .d-flex:hover{

background:rgba(23,138,67,.05);

}

.opening-hours .border-bottom{

border-color:rgba(0,0,0,.08)!important;

}

.opening-hours strong{

color:var(--primary);

}

/* ==========================================================
   GOOGLE MAPS
========================================================== */

.ratio iframe{

width:100%;

height:100%;

border:0;

display:block;

}

.map-wrapper{

overflow:hidden;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/* ==========================================================
   CHIFFRES CLES
========================================================== */

.statistics{

padding:90px 0;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

}

.statistics h2{

color:#fff;

margin-bottom:15px;

}

.statistics p{

color:rgba(255,255,255,.9);

}

.stat-card{

text-align:center;

padding:30px 20px;

}

.stat-card h3{

font-size:3rem;

font-weight:800;

color:#fff;

margin-bottom:10px;

}

.stat-card span{

display:block;

font-size:1rem;

font-weight:600;

color:rgba(255,255,255,.9);

}

/* ==========================================================
   ICÔNES DES STATS
========================================================== */

.stat-icon{

width:90px;

height:90px;

margin:0 auto 20px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

font-size:2.2rem;

color:#fff;

transition:var(--transition);

}

.stat-card:hover .stat-icon{

transform:translateY(-6px) scale(1.08);

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

}

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

@media(max-width:991px){

.counter{

font-size:2.6rem;

}

.stat-card h3{

font-size:2.5rem;

}

.opening-hours .d-flex{

padding:14px 18px;

}

}

@media(max-width:576px){

.accordion-button{

padding:18px 20px;

font-size:1rem;

}

.accordion-body{

padding:20px;

}

.counter{

font-size:2.2rem;

}

.stat-card{

padding:20px 10px;

}

.stat-icon{

width:72px;

height:72px;

font-size:1.8rem;

}

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

.footer{

background:#1b1f23;

color:#d8d8d8;

padding:90px 0 35px;

position:relative;

}

.footer h4{

color:#fff;

margin-bottom:25px;

font-weight:700;

}

.footer p{

color:#cfcfcf;

line-height:1.8;

}

.footer-logo{

max-width:220px;

height:auto;

}

.footer hr{

border-color:rgba(255,255,255,.12);

margin:50px 0;

}

/* ==========================================================
   LIENS
========================================================== */

.footer a{

color:#d8d8d8;

transition:var(--transition);

}

.footer a:hover{

color:var(--accent);

}

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

.footer-contact{

display:flex;

flex-direction:column;

gap:18px;

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:14px;

line-height:1.7;

}

.footer-contact i{

width:22px;

margin-top:4px;

color:var(--accent);

flex-shrink:0;

}

/* ==========================================================
   RÉSEAUX SOCIAUX
========================================================== */

.social-icons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.social-icons a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

font-size:1.2rem;

transition:all .3s ease;

}

.social-icons a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-4px);

}

/* ==========================================================
   INFORMATIONS LÉGALES
========================================================== */

.legal{

padding-top:25px;

font-size:.95rem;

color:#bdbdbd;

line-height:1.8;

}

.legal strong{

color:#fff;

}

/* ==========================================================
   COOKIE BANNER
========================================================== */

.cookie-banner{

position:fixed;

left:20px;

right:20px;

bottom:20px;

z-index:9998;

background:#fff;

border-radius:18px;

padding:24px;

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

display:none;

}

.cookie-banner.show{

display:block;

animation:cookieUp .35s ease;

}

@keyframes cookieUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.cookie-actions{

display:flex;

gap:12px;

margin-top:18px;

flex-wrap:wrap;

}

/* ==========================================================
   WHATSAPP FLOTTANT
========================================================== */

.whatsapp-float{

position:fixed;

right:25px;

bottom:100px;

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#25D366;

color:#fff;

font-size:2rem;

box-shadow:
0 12px 30px rgba(37,211,102,.4);

z-index:9997;

transition:all .3s ease;

}

.whatsapp-float:hover{

transform:scale(1.12);

color:#fff;

}

/* ==========================================================
   RETOUR EN HAUT
========================================================== */

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:56px;

height:56px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:1.2rem;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:all .3s ease;

z-index:9996;

box-shadow:var(--shadow);

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

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

@media(max-width:991px){

.footer{

padding:70px 0 30px;

}

.footer-logo{

max-width:180px;

}

}

@media(max-width:576px){

.cookie-banner{

left:12px;

right:12px;

bottom:12px;

padding:18px;

}

.cookie-actions{

flex-direction:column;

}

.cookie-actions .btn,

.cookie-actions .btn-premium{

width:100%;

}

.whatsapp-float{

width:56px;

height:56px;

font-size:1.7rem;

right:18px;

bottom:90px;

}

.back-to-top{

width:50px;

height:50px;

right:18px;

bottom:18px;

}

.social-icons{

justify-content:center;

}

.footer{

text-align:center;

}

.footer-contact li{

justify-content:center;

text-align:left;

}

}
/* ==========================================================
   ANIMATIONS GÉNÉRALES
========================================================== */

.fade-up,
.fade-left,
.fade-right,
.fade-down,
.zoom-in{

opacity:0;

transition:
opacity .8s ease,
transform .8s ease;

will-change:
opacity,
transform;

}

.fade-up{

transform:translateY(60px);

}

.fade-down{

transform:translateY(-60px);

}

.fade-left{

transform:translateX(-60px);

}

.fade-right{

transform:translateX(60px);

}

.zoom-in{

transform:scale(.9);

}

/* ==========================================================
   ÉTAT VISIBLE
========================================================== */

.visible{

opacity:1 !important;

transform:none !important;

}

/* ==========================================================
   DÉLAIS D'ANIMATION
========================================================== */

.delay-1{

transition-delay:.1s;

}

.delay-2{

transition-delay:.2s;

}

.delay-3{

transition-delay:.3s;

}

.delay-4{

transition-delay:.4s;

}

.delay-5{

transition-delay:.5s;

}

/* ==========================================================
   HOVER IMAGE
========================================================== */

.img-hover{

overflow:hidden;

border-radius:var(--radius);

}

.img-hover img{

transition:
transform .6s ease,
filter .6s ease;

}

.img-hover:hover img{

transform:scale(1.08);

filter:brightness(1.08);

}

/* ==========================================================
   FLOAT
========================================================== */

.float{

animation:floatAnimation 4s ease-in-out infinite;

}

@keyframes floatAnimation{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* ==========================================================
   PULSE
========================================================== */

.pulse{

animation:pulseAnimation 2s infinite;

}

@keyframes pulseAnimation{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/* ==========================================================
   ROTATION LENTE
========================================================== */

.rotate-slow{

animation:rotateSlow 18s linear infinite;

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* ==========================================================
   SÉPARATEUR DE SECTION
========================================================== */

.section-divider{

position:relative;

height:80px;

overflow:hidden;

}

.section-divider svg{

display:block;

width:100%;

height:100%;

}

/* ==========================================================
   OMBRES DOUCES
========================================================== */

.shadow-soft{

box-shadow:

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

}

.shadow-hover{

transition:var(--transition);

}

.shadow-hover:hover{

box-shadow:

0 25px 60px rgba(0,0,0,.18);

}

/* ==========================================================
   BADGES
========================================================== */

.badge-premium{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:999px;

background:rgba(23,138,67,.12);

color:var(--primary);

font-weight:700;

}

/* ==========================================================
   ICÔNES
========================================================== */

.icon-circle{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(23,138,67,.1);

color:var(--primary);

font-size:1.8rem;

transition:var(--transition);

}

.icon-circle:hover{

background:var(--primary);

color:#fff;

transform:translateY(-6px);

}

/* ==========================================================
   OVERLAY DOUX
========================================================== */

.overlay-soft{

position:relative;

overflow:hidden;

}

.overlay-soft::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.35)
);

opacity:0;

transition:.35s;

}

.overlay-soft:hover::before{

opacity:1;

}

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

@media(max-width:768px){

.fade-up,
.fade-left,
.fade-right,
.fade-down{

transform:translateY(35px);

}

.icon-circle{

width:60px;

height:60px;

font-size:1.5rem;

}

.badge-premium{

font-size:.9rem;

padding:8px 16px;

}

}
/* ==========================================================
   TABLEAUX
========================================================== */

.table-responsive{

overflow-x:auto;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.table{

width:100%;

margin-bottom:0;

background:#fff;

border-collapse:collapse;

}

.table thead{

background:var(--primary);

color:#fff;

}

.table th{

padding:18px;

font-weight:700;

text-align:left;

white-space:nowrap;

}

.table td{

padding:16px 18px;

border-bottom:1px solid rgba(0,0,0,.08);

vertical-align:middle;

}

.table tbody tr{

transition:background .3s ease;

}

.table tbody tr:hover{

background:rgba(23,138,67,.05);

}

/* ==========================================================
   TABLEAU TARIFS
========================================================== */

.pricing-table{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.pricing-table .price{

font-size:2.8rem;

font-weight:800;

color:var(--primary);

}

.pricing-table .pricing-header{

padding:35px;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

text-align:center;

}

.pricing-table .pricing-body{

padding:35px;

}

.pricing-table ul{

display:flex;

flex-direction:column;

gap:15px;

}

/* ==========================================================
   LISTES PERSONNALISÉES
========================================================== */

.list-check{

display:flex;

flex-direction:column;

gap:14px;

}

.list-check li{

display:flex;

align-items:flex-start;

gap:12px;

line-height:1.7;

}

.list-check li i{

color:var(--primary);

margin-top:3px;

flex-shrink:0;

}

.list-arrow{

display:flex;

flex-direction:column;

gap:12px;

}

.list-arrow li{

position:relative;

padding-left:28px;

}

.list-arrow li::before{

content:"➜";

position:absolute;

left:0;

top:0;

color:var(--primary);

font-weight:700;

}

/* ==========================================================
   ALERTES
========================================================== */

.alert-premium{

padding:22px 24px;

border-radius:16px;

margin-bottom:25px;

display:flex;

align-items:flex-start;

gap:16px;

box-shadow:var(--shadow);

}

.alert-success{

background:#d1e7dd;

color:#0f5132;

}

.alert-warning{

background:#fff3cd;

color:#664d03;

}

.alert-danger{

background:#f8d7da;

color:#842029;

}

.alert-info{

background:#cff4fc;

color:#055160;

}

.alert-premium i{

font-size:1.5rem;

margin-top:2px;

}

/* ==========================================================
   BLOCS D'INFORMATION
========================================================== */

.info-box{

background:#fff;

border-left:6px solid var(--primary);

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-bottom:30px;

}

.info-box h4{

margin-bottom:15px;

}

.info-box p:last-child{

margin-bottom:0;

}

.info-box-accent{

border-left-color:var(--accent);

}

/* ==========================================================
   SÉPARATEUR
========================================================== */

.divider{

width:90px;

height:4px;

background:var(--primary);

margin:25px auto;

border-radius:999px;

}

.divider-left{

margin-left:0;

}

/* ==========================================================
   BADGES
========================================================== */

.badge-success{

background:var(--primary);

color:#fff;

padding:8px 16px;

border-radius:999px;

font-weight:600;

}

.badge-accent{

background:var(--accent);

color:#111;

padding:8px 16px;

border-radius:999px;

font-weight:700;

}

/* ==========================================================
   UTILITAIRES
========================================================== */

.w-fit{

width:fit-content;

}

.max-800{

max-width:800px;

margin-inline:auto;

}

.max-1000{

max-width:1000px;

margin-inline:auto;

}

.border-radius{

border-radius:var(--radius);

}

.overflow-hidden{

overflow:hidden;

}

.object-cover{

object-fit:cover;

}

.transition{

transition:var(--transition);

}

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

@media(max-width:768px){

.table th,
.table td{

padding:14px;

font-size:.95rem;

}

.pricing-table .pricing-header,
.pricing-table .pricing-body{

padding:25px;

}

.alert-premium{

flex-direction:column;

gap:10px;

}

.info-box{

padding:22px;

}

}
/* ==========================================================
   AVANT / APRÈS
========================================================== */

.before-after{

position:relative;

overflow:hidden;

border-radius:var(--radius);

box-shadow:var(--shadow);

background:#fff;

}

.before-after img{

display:block;

width:100%;

height:520px;

object-fit:cover;

user-select:none;

pointer-events:none;

}

.before-after-before,
.before-after-after{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

}

.before-after-after{

width:50%;

border-right:3px solid #fff;

}

.before-after-slider{

position:absolute;

top:0;
bottom:0;
left:50%;

width:4px;

background:#fff;

cursor:ew-resize;

transform:translateX(-50%);

z-index:5;

}

.before-after-handle{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:58px;
height:58px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:var(--primary);

color:#fff;

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

font-size:1.4rem;

}

/* ==========================================================
   LABELS
========================================================== */

.before-label,
.after-label{

position:absolute;

top:20px;

padding:10px 18px;

border-radius:999px;

font-weight:700;

color:#fff;

background:rgba(0,0,0,.45);

backdrop-filter:blur(8px);

}

.before-label{

left:20px;

}

.after-label{

right:20px;

}

/* ==========================================================
   SLIDER / CARROUSEL
========================================================== */

.slider-wrapper{

position:relative;

overflow:hidden;

}

.slider-track{

display:flex;

transition:transform .45s ease;

}

.slide{

flex:0 0 100%;

}

.slide img{

width:100%;

height:500px;

object-fit:cover;

border-radius:var(--radius);

}

.slider-nav{

position:absolute;

top:50%;

left:0;
right:0;

display:flex;

justify-content:space-between;

padding:0 18px;

transform:translateY(-50%);

pointer-events:none;

}

.slider-btn{

width:52px;
height:52px;

border:none;

border-radius:50%;

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

box-shadow:var(--shadow);

cursor:pointer;

pointer-events:auto;

transition:.3s;

}

.slider-btn:hover{

background:var(--primary);

color:#fff;

}

.slider-dots{

display:flex;

justify-content:center;

gap:10px;

margin-top:25px;

}

.slider-dot{

width:12px;
height:12px;

border-radius:50%;

background:#d0d0d0;

cursor:pointer;

transition:.3s;

}

.slider-dot.active{

background:var(--primary);

transform:scale(1.2);

}

/* ==========================================================
   VIDÉOS
========================================================== */

.video-wrapper{

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.video-wrapper iframe,
.video-wrapper video{

display:block;

width:100%;

height:500px;

border:0;

}

.video-cover{

position:relative;

cursor:pointer;

overflow:hidden;

}

.video-cover img{

transition:transform .5s ease;

}

.video-cover:hover img{

transform:scale(1.08);

}

.play-button{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:80px;
height:80px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(23,138,67,.9);

color:#fff;

font-size:2rem;

transition:.3s;

}

.play-button:hover{

transform:translate(-50%,-50%) scale(1.1);

}

/* ==========================================================
   CARTES ÉQUIPEMENTS
========================================================== */

.equipment-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

}

.equipment-card img{

height:260px;

width:100%;

object-fit:cover;

transition:.5s;

}

.equipment-card:hover img{

transform:scale(1.08);

}

.equipment-card .content{

padding:28px;

}

.equipment-card h4{

margin-bottom:15px;

}

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

@media(max-width:991px){

.before-after img{

height:420px;

}

.slide img,
.video-wrapper iframe,
.video-wrapper video{

height:380px;

}

}

@media(max-width:576px){

.before-after img{

height:280px;

}

.before-after-handle{

width:46px;
height:46px;

font-size:1rem;

}

.slide img,
.video-wrapper iframe,
.video-wrapper video{

height:240px;

}

.play-button{

width:60px;
height:60px;

font-size:1.5rem;

}

.slider-btn{

width:44px;
height:44px;

}

}
/* ==========================================================
   SERVICES GRID
========================================================== */

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

position:relative;

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 22px 55px rgba(0,0,0,.15);

}

.service-card img{

width:100%;

height:240px;

object-fit:cover;

transition:transform .5s ease;

}

.service-card:hover img{

transform:scale(1.08);

}

.service-content{

padding:30px;

}

.service-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

border-radius:50%;

background:rgba(23,138,67,.1);

color:var(--primary);

font-size:2rem;

transition:var(--transition);

}

.service-card:hover .service-icon{

background:var(--primary);

color:#fff;

transform:rotate(8deg);

}

/* ==========================================================
   BROYEUR ARJES
========================================================== */

.broyeur-banner{

padding:70px 50px;

border-radius:var(--radius);

background:linear-gradient(
135deg,
#1b1f23,
#2d3436
);

color:#fff;

position:relative;

overflow:hidden;

}

.broyeur-banner::before{

content:"";

position:absolute;

top:-100px;
right:-100px;

width:240px;
height:240px;

border-radius:50%;

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

}

.broyeur-banner h2,
.broyeur-banner h3{

color:#fff;

}

.machine-specs{

display:grid;

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

gap:20px;

margin-top:35px;

}

.spec-box{

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

padding:20px;

border-radius:14px;

text-align:center;

backdrop-filter:blur(8px);

}

/* ==========================================================
   LOCATION DE BENNES
========================================================== */

.benne-card{

background:#fff;

border-radius:var(--radius);

padding:30px;

box-shadow:var(--shadow);

border-top:5px solid var(--primary);

height:100%;

transition:var(--transition);

}

.benne-card:hover{

transform:translateY(-8px);

}

.benne-volume{

font-size:2.6rem;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

/* ==========================================================
   MATÉRIELS
========================================================== */

.machine-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}

.machine-card img{

height:250px;

width:100%;

object-fit:cover;

}

.machine-card .content{

padding:28px;

}

.machine-card:hover{

transform:translateY(-8px);

}

/* ==========================================================
   ESPACES VERTS
========================================================== */

.green-card{

background:#fff;

border-radius:var(--radius);

padding:30px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

}

.green-card:hover{

transform:translateY(-8px);

}

.green-card i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

}

.green-card h4{

margin-bottom:15px;

}

/* ==========================================================
   BANDEAUX MÉTIERS
========================================================== */

.info-banner{

padding:40px;

border-radius:var(--radius);

background:linear-gradient(
135deg,
rgba(23,138,67,.08),
rgba(255,193,7,.08)
);

border-left:6px solid var(--primary);

box-shadow:var(--shadow);

}

.info-banner h3{

margin-bottom:15px;

}

.info-banner p:last-child{

margin-bottom:0;

}

/* ==========================================================
   ICÔNES MÉTIERS
========================================================== */

.service-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:999px;

background:rgba(23,138,67,.12);

color:var(--primary);

font-weight:700;

margin:6px;

}

.service-badge i{

font-size:1rem;

}

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

@media(max-width:991px){

.broyeur-banner{

padding:50px 35px;

}

.machine-specs{

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

}

.service-card img,

.machine-card img{

height:220px;

}

}

@media(max-width:576px){

.services-grid{

grid-template-columns:1fr;

}

.broyeur-banner{

padding:35px 25px;

}

.machine-specs{

grid-template-columns:1fr;

}

.service-content,

.machine-card .content{

padding:22px;

}

.service-icon{

width:60px;

height:60px;

font-size:1.6rem;

}

.benne-volume{

font-size:2rem;

}

}
/* ==========================================================
   RÉALISATIONS
========================================================== */

.projects-grid{

display:grid;

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

gap:32px;

}

.project-card{

position:relative;

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

}

.project-card:hover{

transform:translateY(-10px);

box-shadow:0 24px 60px rgba(0,0,0,.16);

}

/* ==========================================================
   IMAGE
========================================================== */

.project-image{

position:relative;

overflow:hidden;

}

.project-image img{

width:100%;

height:260px;

object-fit:cover;

transition:transform .6s ease;

}

.project-card:hover .project-image img{

transform:scale(1.08);

}

/* ==========================================================
   CATÉGORIE
========================================================== */

.project-category{

position:absolute;

top:18px;

left:18px;

padding:8px 16px;

border-radius:999px;

background:rgba(23,138,67,.92);

color:#fff;

font-size:.85rem;

font-weight:700;

letter-spacing:.4px;

z-index:2;

}

/* ==========================================================
   CONTENU
========================================================== */

.project-content{

padding:28px;

}

.project-content h3{

margin-bottom:14px;

}

.project-content p{

margin-bottom:18px;

}

.project-meta{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:20px;

font-size:.92rem;

color:#666;

}

.project-meta span{

display:inline-flex;

align-items:center;

gap:8px;

}

.project-meta i{

color:var(--primary);

}

/* ==========================================================
   BOUTON
========================================================== */

.project-link{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

color:var(--primary);

transition:var(--transition);

}

.project-link:hover{

gap:14px;

color:var(--primary-dark);

}

/* ==========================================================
   FILTRES
========================================================== */

.project-filters{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:14px;

margin-bottom:45px;

}

.project-filter{

padding:12px 22px;

border:none;

border-radius:999px;

background:#f4f4f4;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}

.project-filter:hover,

.project-filter.active{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   RUBAN "NOUVEAU"
========================================================== */

.ribbon{

position:absolute;

top:18px;

right:-38px;

width:150px;

padding:8px 0;

text-align:center;

background:var(--accent);

color:#111;

font-weight:700;

font-size:.82rem;

transform:rotate(45deg);

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

z-index:3;

}

/* ==========================================================
   EFFET OVERLAY
========================================================== */

.project-overlay{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.45);

opacity:0;

transition:opacity .35s ease;

}

.project-card:hover .project-overlay{

opacity:1;

}

.project-overlay .btn-premium{

transform:translateY(12px);

transition:transform .35s ease;

}

.project-card:hover .project-overlay .btn-premium{

transform:translateY(0);

}

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

@media(max-width:991px){

.projects-grid{

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

}

.project-image img{

height:230px;

}

}

@media(max-width:576px){

.projects-grid{

grid-template-columns:1fr;

}

.project-content{

padding:22px;

}

.project-meta{

flex-direction:column;

gap:10px;

}

.ribbon{

right:-46px;

width:170px;

font-size:.78rem;

}

}
/* ==========================================================
   BLOG GRID
========================================================== */

.blog-grid{

display:grid;

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

gap:32px;

}

.blog-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

display:flex;

flex-direction:column;

}

.blog-card:hover{

transform:translateY(-10px);

box-shadow:0 22px 55px rgba(0,0,0,.15);

}

/* ==========================================================
   IMAGE
========================================================== */

.blog-image{

position:relative;

overflow:hidden;

}

.blog-image img{

width:100%;

height:240px;

object-fit:cover;

transition:transform .6s ease;

}

.blog-card:hover .blog-image img{

transform:scale(1.08);

}

/* ==========================================================
   DATE
========================================================== */

.blog-date{

position:absolute;

left:20px;

bottom:20px;

background:var(--primary);

color:#fff;

padding:10px 14px;

border-radius:12px;

font-weight:700;

text-align:center;

line-height:1.2;

}

/* ==========================================================
   CONTENU
========================================================== */

.blog-content{

padding:28px;

flex:1;

display:flex;

flex-direction:column;

}

.blog-category{

display:inline-block;

margin-bottom:14px;

padding:8px 14px;

border-radius:999px;

background:rgba(23,138,67,.12);

color:var(--primary);

font-size:.85rem;

font-weight:700;

}

.blog-content h3{

margin-bottom:15px;

}

.blog-content p{

margin-bottom:20px;

}

.blog-read{

margin-top:auto;

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

color:var(--primary);

transition:var(--transition);

}

.blog-read:hover{

gap:14px;

color:var(--primary-dark);

}

/* ==========================================================
   AUTEUR
========================================================== */

.author-box{

display:flex;

align-items:center;

gap:14px;

margin-top:24px;

padding-top:20px;

border-top:1px solid rgba(0,0,0,.08);

}

.author-box img{

width:56px;

height:56px;

border-radius:50%;

object-fit:cover;

}

.author-name{

font-weight:700;

margin-bottom:2px;

}

.author-role{

font-size:.9rem;

color:#777;

}

/* ==========================================================
   TAGS
========================================================== */

.tags{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.tag{

padding:8px 14px;

border-radius:999px;

background:#f4f4f4;

font-size:.85rem;

transition:var(--transition);

}

.tag:hover{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   RECHERCHE
========================================================== */

.search-box{

position:relative;

}

.search-box input{

width:100%;

padding:16px 58px 16px 20px;

border:2px solid #e5e5e5;

border-radius:999px;

transition:var(--transition);

}

.search-box input:focus{

border-color:var(--primary);

outline:none;

}

.search-box button{

position:absolute;

right:8px;

top:50%;

transform:translateY(-50%);

width:42px;

height:42px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination-premium{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin-top:50px;

}

.pagination-premium a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#f4f4f4;

font-weight:700;

transition:var(--transition);

}

.pagination-premium a:hover,

.pagination-premium a.active{

background:var(--primary);

color:#fff;

}

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

@media(max-width:991px){

.blog-grid{

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

}

.blog-image img{

height:220px;

}

}

@media(max-width:576px){

.blog-grid{

grid-template-columns:1fr;

}

.blog-content{

padding:22px;

}

.author-box{

flex-direction:column;

text-align:center;

}

.pagination-premium{

flex-wrap:wrap;

}

}
/* ==========================================================
   ESPACEMENTS
========================================================== */

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}

.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}
.pt-60{padding-top:60px;}
.pt-80{padding-top:80px;}

.pb-20{padding-bottom:20px;}
.pb-40{padding-bottom:40px;}
.pb-60{padding-bottom:60px;}
.pb-80{padding-bottom:80px;}

/* ==========================================================
   LARGEURS
========================================================== */

.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

.max-600{
max-width:600px;
margin-inline:auto;
}

.max-700{
max-width:700px;
margin-inline:auto;
}

.max-900{
max-width:900px;
margin-inline:auto;
}

.max-1200{
max-width:1200px;
margin-inline:auto;
}

/* ==========================================================
   HAUTEURS
========================================================== */

.h-100{
height:100%;
}

.min-vh-50{
min-height:50vh;
}

.min-vh-75{
min-height:75vh;
}

.min-vh-100{
min-height:100vh;
}

/* ==========================================================
   BACKGROUNDS
========================================================== */

.bg-primary-soft{
background:rgba(23,138,67,.08);
}

.bg-accent-soft{
background:rgba(255,193,7,.12);
}

.bg-light-soft{
background:#f8f9fa;
}

.bg-dark-soft{
background:#2d3436;
color:#fff;
}

.bg-gradient-primary{
background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
color:#fff;
}

.bg-gradient-light{
background:
linear-gradient(
135deg,
#ffffff,
#f7f7f7
);
}

/* ==========================================================
   BORDURES
========================================================== */

.border-primary{
border:2px solid var(--primary);
}

.border-accent{
border:2px solid var(--accent);
}

.rounded-xl{
border-radius:24px;
}

.rounded-circle-xl{
border-radius:50%;
}

/* ==========================================================
   FLEX HELPERS
========================================================== */

.flex-center{
display:flex;
align-items:center;
justify-content:center;
}

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

.flex-column-center{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

/* ==========================================================
   POSITION
========================================================== */

.position-relative{
position:relative;
}

.position-absolute{
position:absolute;
}

.z-1{z-index:1;}
.z-2{z-index:2;}
.z-3{z-index:3;}
.z-10{z-index:10;}

/* ==========================================================
   OPACITY
========================================================== */

.opacity-25{
opacity:.25;
}

.opacity-50{
opacity:.5;
}

.opacity-75{
opacity:.75;
}

.opacity-100{
opacity:1;
}

/* ==========================================================
   CURSEURS
========================================================== */

.cursor-pointer{
cursor:pointer;
}

.cursor-default{
cursor:default;
}

/* ==========================================================
   EFFETS
========================================================== */

.hover-lift{
transition:var(--transition);
}

.hover-lift:hover{
transform:translateY(-6px);
}

.hover-scale{
transition:var(--transition);
}

.hover-scale:hover{
transform:scale(1.04);
}

.hover-shadow:hover{
box-shadow:
0 20px 50px rgba(0,0,0,.15);
}

/* ==========================================================
   GLASS EFFECT
========================================================== */

.glass{

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

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

}

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

@media(max-width:768px){

.w-25,
.w-50,
.w-75{

width:100%;

}

.flex-between{

flex-direction:column;

gap:20px;

align-items:flex-start;

}

}
/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

/* Focus clavier visible */

:focus-visible{

outline:3px solid var(--accent);

outline-offset:3px;

border-radius:6px;

}

/* Liens ignorés (Skip Link) */

.skip-link{

position:absolute;

left:-9999px;

top:0;

padding:14px 22px;

background:var(--primary);

color:#fff;

font-weight:700;

z-index:999999;

}

.skip-link:focus{

left:20px;

top:20px;

}

/* ==========================================================
   RÉDUCTION DES ANIMATIONS
========================================================== */

@media (prefers-reduced-motion: reduce){

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================================
   PERFORMANCE
========================================================== */

img{

content-visibility:auto;

}

.lazy-section{

content-visibility:auto;

contain-intrinsic-size:800px;

}

.heavy-section{

contain:layout paint style;

}

/* ==========================================================
   RENDU
========================================================== */

img{

image-rendering:auto;

}

svg{

shape-rendering:geometricPrecision;

}

html{

text-rendering:optimizeLegibility;

}

/* ==========================================================
   SÉLECTION DE TEXTE
========================================================== */

::selection{

background:var(--primary);

color:#fff;

}

::-moz-selection{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   IMPRESSION
========================================================== */

@media print{

header,
footer,
nav,
.cookie-banner,
.whatsapp-float,
.back-to-top,
.btn,
.btn-premium,
video,
iframe{

display:none !important;

}

body{

background:#fff;

color:#000;

font-size:12pt;

}

a{

color:#000;

text-decoration:underline;

}

img{

max-width:100%;

page-break-inside:avoid;

}

section{

page-break-inside:avoid;

}

}

/* ==========================================================
   MODE SOMBRE (BASE)
========================================================== */

@media (prefers-color-scheme: dark){

body.auto-dark{

background:#111;

color:#eee;

}

body.auto-dark section{

background:#111;

}

body.auto-dark .card,
body.auto-dark .feature-box,
body.auto-dark .service-card,
body.auto-dark .project-card,
body.auto-dark .equipment-card,
body.auto-dark .blog-card{

background:#1d1d1d;

color:#eee;

}

body.auto-dark h1,
body.auto-dark h2,
body.auto-dark h3,
body.auto-dark h4{

color:#fff;

}

}

/* ==========================================================
   OPTIMISATIONS
========================================================== */

a,
button{

touch-action:manipulation;

}

img{

max-width:100%;

height:auto;

}

iframe{

max-width:100%;

}

canvas{

display:block;

}

svg{

display:block;

}

/* ==========================================================
   SCROLL
========================================================== */

html{

scroll-padding-top:110px;

}

.anchor-offset{

scroll-margin-top:110px;

}

/* ==========================================================
   SÉCURITÉ LAYOUT
========================================================== */

*{

min-width:0;

}

.row>*{

min-width:0;

}

.col,
[class*="col-"]{

min-width:0;

}

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

@media(max-width:768px){

html{

scroll-padding-top:90px;

}

.anchor-offset{

scroll-margin-top:90px;

}

.skip-link:focus{

left:10px;

top:10px;

}

}
/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

position:relative;

margin:60px 0;

padding-left:40px;

}

.timeline::before{

content:"";

position:absolute;

top:0;
left:16px;

width:4px;

height:100%;

background:linear-gradient(
180deg,
var(--primary),
var(--primary-dark)
);

border-radius:999px;

}

.timeline-item{

position:relative;

margin-bottom:45px;

}

.timeline-item:last-child{

margin-bottom:0;

}

.timeline-marker{

position:absolute;

left:-2px;

top:4px;

width:36px;

height:36px;

border-radius:50%;

background:var(--primary);

border:4px solid #fff;

box-shadow:0 6px 18px rgba(0,0,0,.15);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:.95rem;

}

.timeline-content{

background:#fff;

padding:28px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-left:35px;

}

.timeline-content h4{

margin-bottom:12px;

}

/* ==========================================================
   PROCESSUS
========================================================== */

.process{

display:grid;

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

gap:30px;

}

.process-step{

position:relative;

background:#fff;

padding:35px 25px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

}

.process-step:hover{

transform:translateY(-8px);

}

.process-number{

width:56px;

height:56px;

margin:0 auto 20px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:1.3rem;

font-weight:800;

}

.process-step h4{

margin-bottom:15px;

}

/* ==========================================================
   GARANTIES
========================================================== */
.guarantee-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:28px;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.guarantee-card h4{
    margin:15px 0 10px;
}

.guarantee-card p{
    margin:0;
    line-height:1.6;
}

.guarantee-card:hover{

transform:translateY(-6px);

}

.guarantee-icon{

width:68px;

height:68px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(23,138,67,.12);

color:var(--primary);

font-size:2rem;

flex-shrink:0;

}

/* ==========================================================
   CERTIFICATIONS
========================================================== */

.certification{

display:flex;

align-items:center;

gap:18px;

padding:22px;

background:#fff;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.certification img{

width:70px;

height:70px;

object-fit:contain;

}

.certification h5{

margin-bottom:6px;

}

/* ==========================================================
   BADGES
========================================================== */

.cert-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:999px;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

font-weight:700;

}

.cert-badge i{

font-size:1rem;

}

/* ==========================================================
   ENGAGEMENTS
========================================================== */

.commitment{

background:#fff;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

border-top:5px solid var(--primary);

height:100%;

}

.commitment h4{

margin-bottom:15px;

}

.commitment ul{

display:flex;

flex-direction:column;

gap:12px;

}

.commitment li{

display:flex;

align-items:flex-start;

gap:10px;

}

.commitment li i{

color:var(--primary);

margin-top:4px;

}

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

@media(max-width:991px){

.process{

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

}

.timeline-content{

margin-left:28px;

}

}

@media(max-width:576px){

.process{

grid-template-columns:1fr;

}

.timeline{

padding-left:28px;

}

.timeline::before{

left:10px;

}

.timeline-marker{

width:28px;

height:28px;

left:-4px;

font-size:.8rem;

}

.timeline-content{

margin-left:20px;

padding:22px;

}

.guarantee-card{

flex-direction:column;

text-align:center;

align-items:center;

}

.certification{

flex-direction:column;

text-align:center;

}

.commitment{

padding:25px;

}

}
/* ==========================================================
   CTA PREMIUM ----------JNO COULEUR BANDEAU----------
========================================================== */

.cta-section{
/* On crée un dégradé plus grand contenant les deux états */
  background: linear-gradient(
    135deg, 
    #141e23 0%, /* couleur bleu foncée */
    #1993cb 50%, /* couleur bleu */
	 /* couleur de survol On agrandit le fond à 200% pour n'en voir qu'une partie */
    #00567d 100%
  );
  
  /* On agrandit le fond à 200% pour n'en voir qu'une partie */
  background-size: 200% 200%;
  background-position: 0% 0%;
  
  /* Animation fluide de 0.5 seconde */
  transition: background-position 0.5s ease;
}

/* Au survol, on décale le fond */
.cta-section:hover {
  background-position: 100% 100%;
}

.cta-section::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:280px;
height:280px;

/* JNO BORDER RADIUS = tôt d arrondi petits cercle en HAUT A DROITE du bandeau - backround = couleur de superpostion ---JNO-----*/
border-radius:50%;

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

}

.cta-section::after{

content:"";

position:absolute;

bottom:-140px;
left:-140px;

width:320px;
height:320px;

/* JNO BORDER RADIUS = tôt d arrondi petits cercle en bas à gauche du bandeau - backround = couleur de superpostion ---JNO-----*/
border-radius:50%;

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

}

.cta-section h2,
.cta-section h3,
.cta-section p{

color:#fff;

position:relative;

z-index:2;

}

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

.contact-strip{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

padding:35px 40px;

margin-top:35px;

background:#fff;

color:var(--dark);

border-radius:var(--radius);

box-shadow:var(--shadow);

position:relative;

z-index:2;

}

.contact-strip-item{

display:flex;

align-items:center;

gap:15px;

}

.contact-strip-item i{

width:58px;
height:58px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(23,138,67,.1);

color:var(--primary);

font-size:1.5rem;

}

/* ==========================================================
   DEVIS EXPRESS
========================================================== */

.quote-box{

background:#fff;

padding:40px;

border-radius:var(--radius);

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.quote-box::before{

content:"";

position:absolute;

top:-70px;
right:-70px;

width:180px;
height:180px;

border-radius:50%;

background:rgba(23,138,67,.05);

}

.quote-box h3{

margin-bottom:18px;

}

.quote-box .btn-premium{

margin-top:20px;

}

/* ==========================================================
   BANDEAU CONFIANCE
========================================================== */

.trust-banner{

display:grid;

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

gap:25px;

margin-top:40px;

}

.trust-item{

background:#fff;

padding:28px 22px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

}

.trust-item:hover{

transform:translateY(-8px);

}

.trust-item i{

font-size:2.2rem;

color:var(--primary);

margin-bottom:15px;

}

/* ==========================================================
   APPEL TÉLÉPHONE
========================================================== */

.call-card{

display:flex;

align-items:center;

gap:20px;

padding:30px;

border-radius:var(--radius);

background:linear-gradient(
135deg,
rgba(23,138,67,.08),
rgba(23,138,67,.15)
);

border-left:6px solid var(--primary);

}

.call-icon{

width:72px;
height:72px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:2rem;

flex-shrink:0;

}

.call-card a{

font-size:1.35rem;

font-weight:800;

color:var(--primary);

}

/* ==========================================================
   BARRE D'ACTION
========================================================== */

.action-bar{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.action-bar .btn-premium{

min-width:220px;

}

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

@media(max-width:991px){

.contact-strip{

flex-direction:column;

align-items:flex-start;

}

.trust-banner{

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

}

}

@media(max-width:576px){

.cta-section{

padding:70px 0;

}

.contact-strip{

padding:25px;

}

.contact-strip-item{

width:100%;

}

.quote-box{

padding:28px 22px;

}

.trust-banner{

grid-template-columns:1fr;

}

.call-card{

flex-direction:column;

text-align:center;

}

.action-bar .btn-premium{

width:100%;

}

}
/* ==========================================================
   HELPERS DE COULEURS
========================================================== */

.text-primary{
color:var(--primary)!important;
}

.text-primary-dark{
color:var(--primary-dark)!important;
}

.text-accent{
color:var(--accent)!important;
}

.text-light{
color:#ffffff!important;
}

.text-muted{
color:#6c757d!important;
}

.bg-primary{
background:var(--primary)!important;
color:#fff!important;
}

.bg-primary-dark{
background:var(--primary-dark)!important;
color:#fff!important;
}

.bg-accent{
background:var(--accent)!important;
color:#111!important;
}

.bg-white{
background:#fff!important;
}

.bg-transparent{
background:transparent!important;
}

/* ==========================================================
   TYPOGRAPHIE
========================================================== */

.fw-300{font-weight:300;}
.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}

.fs-12{font-size:.75rem;}
.fs-14{font-size:.875rem;}
.fs-16{font-size:1rem;}
.fs-18{font-size:1.125rem;}
.fs-20{font-size:1.25rem;}
.fs-24{font-size:1.5rem;}
.fs-32{font-size:2rem;}
.fs-40{font-size:2.5rem;}

.lh-1{line-height:1;}
.lh-15{line-height:1.5;}
.lh-18{line-height:1.8;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

/* ==========================================================
   DISPLAY
========================================================== */

.d-none{
display:none!important;
}

.d-block{
display:block!important;
}

.d-inline-block{
display:inline-block!important;
}

.d-flex{
display:flex!important;
}

.d-grid{
display:grid!important;
}

/* ==========================================================
   ALIGNEMENTS
========================================================== */

.align-center{
align-items:center;
}

.justify-center{
justify-content:center;
}

.justify-between{
justify-content:space-between;
}

.flex-wrap{
flex-wrap:wrap;
}

.gap-10{
gap:10px;
}

.gap-20{
gap:20px;
}

.gap-30{
gap:30px;
}

/* ==========================================================
   OMBRES
========================================================== */

.shadow-none{
box-shadow:none!important;
}

.shadow-sm{
box-shadow:
0 6px 18px rgba(0,0,0,.08);
}

.shadow-md{
box-shadow:
0 12px 30px rgba(0,0,0,.12);
}

.shadow-lg{
box-shadow:
0 20px 55px rgba(0,0,0,.18);
}

/* ==========================================================
   BORDURES
========================================================== */

.border-0{
border:none!important;
}

.border{
border:1px solid rgba(0,0,0,.08)!important;
}

.border-top-primary{
border-top:4px solid var(--primary);
}

.border-bottom-primary{
border-bottom:4px solid var(--primary);
}

/* ==========================================================
   IMAGES
========================================================== */

.img-fluid{
max-width:100%;
height:auto;
display:block;
}

.img-rounded{
border-radius:var(--radius);
}

.img-circle{
border-radius:50%;
}

/* ==========================================================
   BOOTSTRAP HELPERS
========================================================== */

.container-fluid{

padding-left:15px;
padding-right:15px;

}

.row{

margin-left:0;
margin-right:0;

}

[class*="col-"]{

padding-left:15px;
padding-right:15px;

}

/* ==========================================================
   TRANSITIONS
========================================================== */

.transition-fast{
transition:.2s ease;
}

.transition-normal{
transition:.35s ease;
}

.transition-slow{
transition:.6s ease;
}

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

@media(max-width:768px){

.fs-40{
font-size:2rem;
}

.fs-32{
font-size:1.8rem;
}

.text-left,
.text-right{

text-align:center;

}

}
/* ==========================================================
   AMÉLIORATIONS GLOBALES
========================================================== */

/* Évite les débordements horizontaux */
html,
body{
    overflow-x:hidden;
}

/* Médias responsives */
img,
video,
iframe,
canvas,
svg{
    max-width:100%;
}

/* Images sans espace sous la ligne de base */
img{
    display:block;
}

/* Améliore le rendu des boutons */
button,
input,
select,
textarea{
    font:inherit;
}

/* Désactive le surlignage bleu sur mobile */
a,
button{
    -webkit-tap-highlight-color:transparent;
}

/* Scroll fluide (hors prefers-reduced-motion) */
html{
    scroll-behavior:smooth;
}

/* ==========================================================
   FORMULAIRES
========================================================== */

input:disabled,
select:disabled,
textarea:disabled,
button:disabled{

opacity:.65;
cursor:not-allowed;

}

input::placeholder,
textarea::placeholder{

color:#999;

}

/* ==========================================================
   TABLEAUX
========================================================== */

table{

border-collapse:collapse;
border-spacing:0;

}

/* ==========================================================
   LISTES
========================================================== */

ul.clean,
ol.clean{

list-style:none;
padding:0;
margin:0;

}

/* ==========================================================
   LIENS
========================================================== */

a{

text-decoration:none;

}

a:hover{

text-decoration:none;

}

/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

[hidden]{

display:none!important;

}

:target{

scroll-margin-top:110px;

}

/* ==========================================================
   IMPRESSION
========================================================== */

@media print{

*{

box-shadow:none!important;
text-shadow:none!important;

}

}

/* ==========================================================
   COMPATIBILITÉ NAVIGATEURS
========================================================== */



/* ==========================================================
   UTILITAIRE DE DÉBOGAGE
   (À supprimer en production si inutile)
========================================================== */

.debug{

outline:2px dashed red!important;

}
/* ==========================================================
   FIN DU FICHIER
========================================================== */

/*

style.css
Version : 1.0.0
Compatible :
- Chrome
- Edge
- Firefox
- Safari
- iOS
- Android

Optimisé pour :
✔ Responsive
✔ Accessibilité
✔ Performance
✔ SEO
✔ Bootstrap 5
✔ Font Awesome
✔ AOS / animations personnalisées

Fin du fichier.

*/

/* ==========================================================
   CORRECTIONS FINALES — MENU / BEFORE-AFTER / LOADER
========================================================== */

/* MENU PERMANENT : bandeau noir dès l'arrivée sur la page */
.navbar,
.navbar.sticky,
.navbar.scrolled {
    background:#000 !important;
    padding:12px 0 !important;
    box-shadow:0 10px 25px rgba(0,0,0,.25) !important;
}

.navbar .nav-link,
.navbar.sticky .nav-link,
.navbar.scrolled .nav-link {
    color:#fff !important;
}

.navbar .nav-link:hover,
.navbar.sticky .nav-link:hover,
.navbar.scrolled .nav-link:hover {
    background:transparent !important;
    color:#1683ff !important;
}

.navbar .nav-link.active,
.navbar.sticky .nav-link.active,
.navbar.scrolled .nav-link.active {
    color:#1683ff !important;
    background:transparent !important;
}

.navbar-brand img {
    height:58px;
}

/* Loader : sécurité supplémentaire contre l'écran blanc bloqué */
#loader.hidden {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Cartes des bennes : texte centré comme précédemment */
.service-card {
    text-align:center;
}

.service-card ul {
    display:inline-block;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
}

/* ==========================================================
   BEFORE / AFTER — pas de zoom, simple découpe de l'image
========================================================== */

.before-after-container {
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
    border-radius:var(--radius);
    background:#222;
    box-shadow:var(--shadow);
    cursor:ew-resize;
    user-select:none;
    touch-action:none;
}

.before-after-container > img {
    display:block;
    position:absolute !important;
    inset:0;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    user-select:none;
    pointer-events:none;
    -webkit-user-drag:none;
}

.before-after-container .after-image {
    z-index:1;
}

.before-after-container .before-image {
    z-index:2;
}

.before-after-container .slider-line,
.before-after-container .before-after-slider {
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:4px;
    background:#fff;
    transform:translateX(-50%);
    z-index:5;
    pointer-events:none;
}

.before-after-container .slider-button,
.before-after-container .before-after-handle {
    position:absolute;
    top:50%;
    left:50%;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index:6;
    cursor:ew-resize;
    pointer-events:none;
}

@media(max-width:991px){
    .before-after-container { height:420px; }
}

@media(max-width:576px){
    .navbar-brand img { height:50px; }
    .before-after-container { height:280px; }
    .before-after-container .slider-button { width:46px; height:46px; }
}


/* ==========================================================
   CORRECTION — ACCUEIL / AVANT-APRÈS
   Le <section class="before-after"> de l'accueil ne doit
   pas recevoir les dimensions du composant image.
========================================================== */

section.before-after {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
}

section.before-after .before-after-container {
    position: relative;
    height: 520px;
    overflow: hidden;
}

@media (max-width: 991px) {
    section.before-after .before-after-container {
        height: 420px;
    }
}

@media (max-width: 576px) {
    section.before-after .before-after-container {
        height: 280px;
    }
}







/* ----------------------------------------------------------
   BANDEAU STATISTIQUES
   .counter est en blanc : il lui fallait un fond colore,
   sinon les chiffres etaient blancs sur blanc (invisibles).
---------------------------------------------------------- */

.stats-section{
    padding:70px 0;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    position:relative;
    overflow:hidden;
}

.stats-section::before{
    content:"";
    position:absolute;
    top:-130px;
    right:-130px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.stat-item{
    position:relative;
    z-index:1;
    padding:10px 6px;
}

.stat-item .counter{
    color:#fff !important;
    font-size:3rem;
    margin-bottom:6px;
}

.stat-item p{
    margin-bottom:0;
    font-weight:600;
    color:rgba(255,255,255,.92);
}

@media(max-width:576px){
    .stat-item .counter{ font-size:2.2rem; }
    .stat-item p{ font-size:.9rem; }
}

/* ==========================================================
   CORRECTION — BANDEAU COOKIES
========================================================== */
#cookieBanner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    display: none;
}
#cookieBanner.show {
    display: block;
}
@media (max-width: 576px) {
    #cookieBanner {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 20px;
    }
}


/* ==========================================================
   PERSONNALISATION XCS — COULEURS ET VISIBILITÉ
========================================================== */

/* Tous les H2 */
h2,
section h2,
.hero-content h2,
.accordion-header h2 {
    color:#0f9ddf !important;
}

/* Survols du menu */
.navbar .nav-link:hover,
.navbar.sticky .nav-link:hover,
.navbar.scrolled .nav-link:hover,
.navbar-nav .nav-link:hover {
    color:#0f9ddf !important;
}

/* Icônes Facebook / Instagram / YouTube */
footer .fab.fa-facebook-f,
footer .fab.fa-instagram,
footer .fab.fa-youtube,
.fab.fa-facebook-f,
.fab.fa-instagram,
.fab.fa-youtube {
    color:#0f9ddf !important;
}

/* Toutes les icônes Font Awesome Solid */
.fa-solid {
    color:#8dc84a !important;
}

/* Tous les intitulés de section */
.section-title,
.hero-content .section-title {
    color:#ff822e !important;
}

/* Vidéo de présentation sur l'accueil */
.video-box {
    text-align:center;
}

.video-box video {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* vidéo centrée bas de page acceuil nomée presentation.mp4-----JNO---*/

.video-banner{
    position:relative;
    min-height:650px;
    overflow:hidden;
}

.video-banner video{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:translate(-50%, -50%);
}

.video-overlay{
    position:relative;
    z-index:2;
    min-height:650px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    background:rgba(0,0,0,.45);
}

.video-overlay h2,
.video-overlay p{
    color:#fff;
}

/* Image de prestation à centrer dans la page Services */
.gallery-card img[src*="prestations_xcs_nettoyage_vide_maison_sxm_1.jpg"] {
    display:block;
    width:auto;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* Texte demandé en blanc dans le hero de Services */
.hero-small .hero-content p {
    color:#fff !important;
}

/* Sur le hero du broyeur, la vidéo doit passer devant l'overlay */
.hero.hero-video {
    isolation:isolate;
}

.hero.hero-video .hero-video-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
}

.hero.hero-video .hero-overlay {
    z-index:1;
}

.hero.hero-video .hero-content {
    z-index:3;
}

.services-intro-white { color:#fff !important; }


/* ===== Correctif final Avant/Après — Réalisations ===== */
.before-after-container { position:relative !important; overflow:hidden !important; width:100% !important; min-height:320px; aspect-ratio:16/9; }
.before-after-container > img { margin:0 !important; }
.before-after-container .before-image, .before-after-container .after-image { width:100% !important; height:100% !important; object-fit:cover !important; }
.before-after-container .slider-line { background:#8dc84a !important; }
.before-after-container .slider-button { background:#0f9ddf !important; }

/* ===== V8 : vidéo hero Broyeur plus compacte ===== */
.hero.hero-video {
    min-height: 68vh;
    height: 68vh;
    max-height: 760px;
}
.hero.hero-video .hero-video-bg {
    object-fit: cover;
}
@media (max-width: 768px) {
    .hero.hero-video {
        min-height: 58vh;
        height: 58vh;
        max-height: 560px;
    }
}

/* ===== V8 : comparateur Avant/Après robuste ===== */
.before-after-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(280px, 42vw, 620px) !important;
    min-height: 280px !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #111;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}
.before-after-container > img {
    margin: 0 !important;
    max-width: none !important;
}
.before-after-container .after-image,
.before-after-container .before-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.before-after-container .after-image { z-index: 1 !important; }
.before-after-container .before-image { z-index: 2 !important; }
.before-after-container .slider-line {
    background: #8dc84a !important;
    z-index: 4 !important;
}
.before-after-container .slider-button {
    background: #0f9ddf !important;
    z-index: 5 !important;
}
/* ==========================================================
   XCS — BLOC "QUI SOMMES-NOUS" page index
   Le fond doit englober les 2 textes
   et rester responsive au zoom/mobile
========================================================== */

#presentation .section-title {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 22px 20px;
    margin: 0 0 18px;
    background: rgba(23, 138, 67, 0.10);
    border-radius: 70px;
    overflow: hidden;
}

#presentation .section-title > span {
    display: block;
    margin: 0 0 4px;
    line-height: 1.3;
}

#presentation .section-title > h2 {
    margin: 0;
    padding: 0;
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Tablette */
@media (max-width: 991px) {
    #presentation .section-title {
        padding: 14px 20px 18px;
        border-radius: 50px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    #presentation .section-title {
        padding: 12px 17px 16px;
        border-radius: 35px;
    }

    #presentation .section-title > span {
        font-size: 0.95rem;
    }

    #presentation .section-title > h2 {
        font-size: clamp(25px, 7.5vw, 34px);
        line-height: 1.15;
    }
}