/* =========================================
   1. BASES & VARIABLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-noir: #222931;       
    --color-blanc: #EEEEEE;     
    --color-vert: #4ECDA4;   
    --color-gris: #393D46; 
    --color-grisclair: #81848C;
    --font-principale: "futura-100", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {  
    font-family: var(--font-principale);
    background-color: var(--color-noir); 
    background-image: url('images/motif.png'); /* Vérifiez le chemin */
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 25%;
    color: var(--color-blanc);
    font-size: 16px; 
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: var(--color-noir); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

header img {
    height: 40px;
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--color-blanc);  
    font-size: 16px;            
    transition: 0.3s;
}

nav a:hover {
    color: var(--color-vert);
}

/* Bouton Contact du Menu */
nav .btn-contact {
    background-color: var(--color-vert);
    color: var(--color-noir);            
    border-radius: 50px;
    font-weight: 500;
    border: 2px solid transparent;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    line-height: 1;
    height: auto;
}

nav .btn-contact:hover {
    background-color: var(--color-noir); 
    color: var(--color-vert);
    border: 2px solid var(--color-vert);
}

/* =========================================
   3. SECTION HERO
   ========================================= */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    padding: 80px 5%;          
    gap: 60px;
}

.hero-text {
    flex: 1; 
}

.hero-text h1 {
    font-size: 56px;
    font-weight: 600;
    color: var(--color-blanc);
    line-height: 1.3;
    margin-bottom: 40px;
}

.hero-subtitle {
    font-size: 20px;
    color: var(--color-grisclair);
    margin-bottom: 50px;
    font-weight: 400;
}

.hero-image img {
    width: 500px;
    height: auto;
    margin-right: 60px;
}

/* --- BOUTONS HERO (Style Spécifique Fond Noir) --- */
.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.hero-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-radius: 50px;
    transition: 0.3s;
}

/* Bouton Vert (Hero) */
.btn-primary {
    background-color: var(--color-vert);
    color: var(--color-noir);
    padding: 12px 25px;
    border: 2px solid transparent; 
}

.btn-primary:hover {
    background-color: var(--color-noir); 
    color: var(--color-vert);
    border: 2px solid var(--color-vert);
}

/* Bouton Contour (Hero) */
.btn-secondary {
    background-color: var(--color-noir); 
    color: var(--color-vert);
    padding: 12px 32px;
    border: 2px solid var(--color-vert);
}

.btn-secondary:hover {
    background-color: var(--color-vert);
    color: var(--color-noir);
}



/* =========================================
   4. SECTION A PROPOS
   ========================================= */
.about-section {
    background-color: var(--color-blanc);
    color: var(--color-noir);
    padding: 80px 5%;
    position: relative;
    z-index: 10;
}

.section-title {
    text-align: center;
    margin-bottom: 80px;
}

.section-title h2 {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-noir);
    display: inline-block;
}

.title-icon {
    width: 45px;
    height: auto;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
}

.about-content {
    flex: 1;
}

.about-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-noir);
    margin-bottom: 20px;
}

.stats-container {
    display: flex;
    gap: 80px;
    margin-top: 50px;           
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 36px;          
    font-weight: 800;
    color: var(--color-vert);   
    line-height: 1;             
    margin-bottom: 10px;        
}

.stat-label {
    font-size: 16px;          
    color: var(--color-grisclair);
    font-weight: 500;
    letter-spacing: 0.5px;      
    text-align: center;
}

/* =========================================
   5. SECTION SERVICES
   ========================================= */
.services-section {
    background-color: transparent;
    padding: 80px 5%;
    position: relative;
    z-index: 10;
    text-align: center;
}

.section-header {
    margin-bottom: 60px;
}

.section-header h2 {
    color: var(--color-blanc);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 25px;
    display: inline-block;
}

.section-subtitle {
    color: var(--color-grisclair);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 80px;
}

.services-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto 60px auto;
    flex-wrap: wrap;
}

.service-card {
    flex: 1;
    min-width: 320px;
    background-color: var(--color-blanc); 
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.icon-circle {
    width: 70px;
    height: 70px;
    background-color: rgba(78, 205, 164, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icon-circle img {
    width: 35px;
    height: 35px;
    filter: brightness(0) saturate(100%) invert(67%) sepia(16%) saturate(1475%) hue-rotate(115deg) brightness(93%) contrast(87%);
}

.service-card h3 {
    color: var(--color-noir);
    font-size: 26px; /* 1.6rem = approx 26px */
    font-weight: 700;
    margin-bottom: 20px;
}

.service-desc {
    color: var(--color-gris);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 90%;
}

.service-list {
    list-style: none;
    text-align: left;
    width: fit-content;
    margin: 0 auto;
    padding: 0;
}

.service-list li {
    color: var(--color-grisclair);
    margin-bottom: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-list li::before {
    content: "✓";
    color: var(--color-vert);
    font-weight: bold;
    font-size: 19px; /* 1.2rem approx */
    flex-shrink: 0;
}

.services-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

/* Réutilisation des boutons Hero (car même fond sombre visuellement) */
.services-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    line-height: 1;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.services-buttons .btn-primary {
    background-color: var(--color-vert);
    color: var(--color-noir);
    border: 2px solid transparent;
}
.services-buttons .btn-primary:hover {
    background-color: var(--color-noir);
    color: var(--color-vert);
    border-color: var(--color-vert);
}

.services-buttons .btn-secondary {
    background-color: var(--color-noir); 
    color: var(--color-vert);
    border: 2px solid var(--color-vert);
}
.services-buttons .btn-secondary:hover {
    background-color: var(--color-vert);
    color: var(--color-noir);
}

/* =========================================
   6. SECTION COMMENT ÇA MARCHE
   ========================================= */
.process-section {
    background-color: var(--color-blanc);
    color: var(--color-noir);
    padding: 100px 5%;
    text-align: center;
    overflow: hidden;
}

.process-section h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--color-noir);
    display: inline-block;
}

.process-timeline {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50px;
    right: 60px;
    height: 2px;
    border-top: 2px dashed var(--color-grisclair);
    z-index: 0;
    opacity: 0.3;
}

.process-step {
    flex: 1;
    padding: 0 10px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-icon-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    background-color: var(--color-blanc);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle-process {
    width: 80px;
    height: 80px;
    background-color: rgba(78, 205, 164, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle-process img {
    width: 35px;
    height: auto;
}

.step-number {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: var(--color-blanc);
    padding: 18px;
    border-radius: 50px;
    color: var(--color-vert);
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-step h3 {
    font-size: 19px; /* 1.2rem */
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-noir);
}

.process-step p {
    font-size: 15px; /* 0.95rem */
    line-height: 1.5;
    color: var(--color-grisclair);
    max-width: 250px;
}

/* --- BOUTONS PROCESS (Fond Clair = Hover différent) --- */
.process-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

.process-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
    line-height: 1;
}

/* Bouton Vert sur fond clair : devient blanc au hover */
.process-buttons .btn-primary {
    background-color: var(--color-vert);
    color: var(--color-blanc);
    border: 2px solid transparent;
}
.process-buttons .btn-primary:hover {
    background-color: var(--color-blanc);
    border-color: var(--color-vert);
    color: var(--color-vert);
}

/* Bouton Secondaire sur fond clair : texte vert */
.process-buttons .btn-secondary {
    background-color: transparent;
    color: var(--color-vert);
    border: 2px solid var(--color-vert);
}
.process-buttons .btn-secondary:hover {
    background-color: var(--color-vert);
    border-color: var(--color-vert);
    color: var(--color-blanc);
}

@media (max-width: 900px) {
    .process-timeline {
        flex-direction: column;
        gap: 40px;
    }
    .process-timeline::before {
        display: none;
    }
    .process-step p {
        max-width: 100%;
    }
}

/* =========================================
   7. SECTION POURQUOI
   ========================================= */
.why-section {
    background-color: transparent;
    padding: 100px 5%;
    position: relative;
    z-index: 10;
    text-align: center;
}

.why-section h2 {
    color: var(--color-blanc);
    font-size: 45px; /* 2.8rem */
    font-weight: 700;
    margin-bottom: 25px;
    display: inline-block;
}


.why-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.why-card {
    flex: 1;
    min-width: 300px;
    background-color: var(--color-blanc); 
    padding: 30px 20px;
    border-radius: 20px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.why-card .icon-circle {
    width: 80px;
    height: 80px;
    background-color: rgba(78, 205, 164, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.why-card .icon-circle img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.why-card h3 {
    color: var(--color-noir);
    font-size: 24px; /* 1.5rem */
    font-weight: 700;
    margin-bottom: 20px;
}

.why-card p {
    color: var(--color-gris);
    font-size: 16px;
    line-height: 1.6;
}

.why-card .icon-circle .icone-euro {
    width: 32px;
    height: 32px;
}

/* =========================================
   8. SECTION CONTACT (Globale)
   ========================================= */
.contact-section {
    padding: 100px 0;
    background-color: var(--color-blanc);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-header h2 {
    font-size: 40px; /* 2.5rem */
    color: var(--color-noir);
    margin-bottom: 25px;
    font-weight: 800;
    display: inline-block;
}

.contact-header .subtitle {
    color: var(--color-grisclair);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 60px;
}


.interrogation{
    font-family: arial, sans-serif;
}
/* CARTES TOP (Zone / Devis) */
.top-info-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.info-card {
    position: relative;
    padding: 25px 30px;
    border-radius: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Carte Gauche (Zone) */
.top-info-grid .info-card:nth-child(1) {
    background-color: var(--color-blanc);
    border: 1px solid var(--color-vert);
    overflow: visible;
}

.top-info-grid .info-card:nth-child(1) .icon-wrapper {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-blanc);
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-info-grid .info-card:nth-child(1) .icon-wrapper img {
    transform: rotate(45deg); 
    width: 30px;
    height: auto;
}

/* Carte Droite (Devis) */
.top-info-grid .info-card:nth-child(2) {
    background-color: rgba(78, 205, 164, 0.3);
    border: none;
    overflow: visible;
}

.top-info-grid .info-card:nth-child(2) .icon-wrapper {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-blanc);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-info-grid .info-card:nth-child(2) .icon-wrapper img {
    width: 30px;
    height: auto;
}

.info-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px; /* 1.1rem */
    color: var(--color-noir);
    font-weight: 700;
    padding-left: 10px;
}

.info-card p {
    margin: 0;
    font-size: 15px; /* 0.95rem */
    color: var(--color-gris);
    line-height: 1.5;
    padding-left: 10px;
}

/* =========================================
   9. FORMULAIRE
   ========================================= */
.form-container {
    background-color: #E1E1E1;
    border-radius: 15px;
    padding: 40px 50px;
    margin-bottom: 60px;
}

.form-container h3 {
    text-align: center;
    color: var(--color-noir);
    margin-bottom: 45px;
    font-size: 21px; /* 1.3rem */
    font-weight: 700;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-group.full-width {
    width: 100%;
}

.input-group label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-noir);
}

.required {
    color: var(--color-vert);
    margin-left: 3px;
}

.main-form input,
.main-form select,
.main-form textarea {
    margin-top: 8px;
    background-color: var(--color-blanc);
    border: none;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 15px; /* 0.95rem */
    font-family: inherit;
    color: var(--color-noir);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.main-form input::placeholder,
.main-form textarea::placeholder {
    color: var(--color-grisclair);
}

/* Le Bouton Envoyer */
.btn-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
    width: 60%; /* Ajuste la largeur selon ton goût (ici 60% centré) */
    margin: 20px auto 10px auto;
    background-color: var(--color-vert);
    color: var(--color-blanc);
    font-weight: 600;
    padding: 15px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

.btn-submit img{
    width: 25px;
    height: auto;
}

.btn-submit:hover {
    background-color: #3cb58e;
}

.form-footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-grisclair);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* =========================================
   10. SECTION URGENCE
   ========================================= */

.emergency-wrapper {
    margin-top: 60px;
    text-align: center;
}

.emergency-title {
    font-size: 1.5rem;
    color: var(--color-noir);
    display: inline-block;
    border-bottom: 3px solid var(--color-vert);
    padding-bottom: 5px;
    margin-bottom: 60px;
    font-weight: 700;
}

/* La Grille */
.emergency-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 0 10px;
}

/* La Carte */
.emergency-card {
    position: relative;
    overflow: visible !important;
    
    background-color: var(--color-blanc);
    border: 1px solid var(--color-vert);
    border-radius: 12px;
    
    /* MODIFICATION ICI : */
    /* Haut (30px) | Droite (25px) | Bas (20px) | Gauche (25px) */
    padding: 30px 25px 30px 25px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* On garde une largeur max raisonnable pour ne pas avoir un cadre immense */
    flex: 0 1 auto;
    width: 100%;
    max-width: 380px; /* J'ai ajusté légèrement pour compenser le padding */
}


.emergency-grid .emergency-card .icon-wrapper {
    position: absolute;
    top: -20px;  /* On la remonte pour qu'elle sorte */
    left: -20px; /* On la décale à gauche */
    width: 60px;
    height: 60px;
    background-color: var(--color-blanc);
    
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-45deg); /* On tourne le carré pour que la pointe soit en bas à gauche */
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* On doit redresser l'image à l'intérieur car le parent a tourné */
.emergency-grid .emergency-card .icon-wrapper img {
    transform: rotate(45deg); 
    width: 30px;
    height: auto;

}

/* Le Texte */
.emergency-text {
    width: 100%;
}

.contact-main {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--color-noir);
    margin: 0 0 5px 0;
}

.contact-sub {
    font-size: 16px;
    color: var(--color-grisclair);
    margin: 0;
}

/* =========================================
   11. FOOTER
   ========================================= */
.site-footer {
    background-color: var(--color-noir); /* Gris Maquette */
    color: var(--color-grisclair);
    font-size: 16px; /* 15px original -> 16px harmonisé */
    line-height: 1.6;
    padding-top: 70px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px 50px 0; /* Padding gauche 0 pour logo */
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col:first-child {
    flex: 0 0 auto;
    margin-right: auto;
    padding-right: 120px; /* Respect de ton espace */
}

.footer-title {
    color: var(--color-blanc);
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo-wrapper .logo-img {
    height: 35px;
    width: auto;
}

.footer-logo-wrapper .logo-text {
    color: var(--color-blanc);
    font-size: 22px;
    font-weight: 800;
}

.footer-desc {
    margin: 0;
    max-width: 280px;
    color: var(--color-grisclair);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 5px;
}

.footer-links a {
    color: var(--color-grisclair);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-vert);
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-contact img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-top: 4px;
}

/* Barre copyright */
.footer-bottom {
    background-color: var(--color-noir);
    border-top: 1px solid var(--color-gris);
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
    color: var(--color-grisclair);
    font-size: 14px;
}

.footer-bottom .separator {
    color: var(--color-grisclair);
}

.footer-bottom .legal-link {
    color: var(--color-grisclair);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-bottom .legal-link:hover {
    color: var(--color-vert);
}

.footer-bottom .confidentiality-link {
    color: var(--color-grisclair);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-bottom .confidentiality-link:hover {
    color: var(--color-vert);
}

/* --- CORRECTIF INDISPENSABLE : NETTOYAGE PC --- */
/* Cache le burger (le carré) et le bouton contact "Mobile" sur PC */
.nav-toggle, 
.nav-burger, 
.mobile-btn {
    display: none !important;
}



/* =========================================
   14. RESPONSIVE (MOBILES & TABLETTES)
   ========================================= */

/* =========================================
   14. RESPONSIVE (MOBILES & TABLETTES)
   ========================================= */

@media (max-width: 900px) {

    /* --- 1. GLOBAUX & FOND --- */
 /* 1. On nettoie le body */
    body {
        background-image: none !important; /* On gère l'image autrement */
        min-height: 100vh;
        position: relative; /* Important pour le calque */
    }

    /* 2. On crée un calque spécifique pour l'image */
    body::before {
        content: "";
        position: fixed; /* L'image ne bouge pas au scroll */
        top: 0;
        right: 0;
        
        /* LES DIMENSIONS DEMANDÉES */
        width: 50vw;    /* 50% de la largeur de l'écran */
        height: 100vh;  /* 100% de la hauteur de l'écran */
        
        /* L'IMAGE */
        background-image: url('images/motif.png');
        background-repeat: no-repeat;
        background-position: center right; /* Cadrage */
        
        /* LA SOLUTION ANTI-DÉFORMATION */
        /* "cover" va remplir la zone sans écraser l'image. */
        /* Cela va zoomer/rogner l'image automatiquement pour qu'elle rentre */
        background-size: cover; 
        
        z-index: -1; /* On place ça derrière le texte */
    }

    /* --- TITRE H1 COMPACT --- */
    .hero-text h1 { 
        font-size: 44px;      /* Police réduite */
        line-height: 1.2;     /* Interligne réduit */
        margin-left: 20px;    
        margin-right: 20px;   
    }


    p  { font-size: 16px; }
    h3 {
        font-size: 20px !important;
    }

    /* Centrage global par défaut */
    .hero, .section-title, .section-header, .about-content {
        text-align: center;
    }

    /* --- 2. HEADER & MENU BURGER --- */
    .nav-burger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 200;
        margin-left: auto; 
    }
    
    .nav-burger span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--color-blanc);
        border-radius: 3px;
        transition: 0.3s;
    }

    .desktop-btn { display: none !important; }
    .mobile-btn { display: inline-flex !important; }

    /* MENU : Invisible par défaut (hauteur 0, padding 0) */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-noir);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        
        max-height: 0;
        padding: 0; 
        overflow: hidden;
        
        transition: all 0.4s ease-out;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }

    .main-nav ul {
        flex-direction: column;
        gap: 25px;
        padding: 0;
        width: 100%;
        text-align: center;
    }


    /* Ouverture du menu */
    #nav-toggle:checked ~ .main-nav {
        max-height: 600px;
        padding: 40px 0;
    }

    /* Animation Burger */
    #nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    #nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    #nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }


    /* --- 3. TITRES ET ICONES --- */
    .section-title h2, 
    .section-header h2,
    .contact-header h2 {
        display: inline; 
        font-size: 32px;
        line-height: 1.3;
        vertical-align: middle;
    }

    .titlesection{
        margin-bottom: 40px;
    }


    .title-icon {
        display: inline-block;
        width: 30px; 
        height: auto;
        vertical-align: middle;
    
    }

    /* --- 4. SECTION HERO --- */
    .hero {
        flex-direction: column;
        padding-top: 100px;
        gap: 30px; 
    }
    
    /* On cache l'image du Hero */
    .hero-image {
        display: none !important;
    }

    .about-container, 
    .process-timeline,
    .top-info-grid {
        flex-direction: column;
        gap: 40px;
    }

    .stats-container {
        flex-direction: column;
        justify-content: center;
        gap: 60px;
    }

    /* --- 5. GRILLES --- */
    .services-grid, .why-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-card, .why-card {
        width: 100%;
        max-width: 400px;
    }

    /* --- 6. BOUTONS --- */
    .hero-buttons, .services-buttons, .process-buttons {
        flex-direction: column;
        align-items: center;

    }

    .hero-buttons a, .services-buttons a, .process-buttons a {
        margin: 0;
        padding: 20px 40px;
        font-size: 18px;
    }

    .btn-submit {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
        align-items: center;
    }


    /* --- 7. SECTION CONTACT --- */
    .contact-section { text-align: center; }
    .contact-header { text-align: center; }
    .form-container { padding: 30px 20px; }
    .form-container h3 { text-align: center; }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .input-group label {
        text-align: center;
        width: 100%;
        display: block;
    }

    .top-info-grid .info-card {
        text-align: center;
        align-items: center; 
    }

/* On force l'alignement à gauche pour les titres du formulaire */
    .input-group label {
        text-align: left !important; 
        width: 100%;
        display: block;
    }
    .info-card h3, .info-card p { padding-left: 0; }

    .emergency-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .emergency-card {
        padding: 40px 20px 30px 20px;
        text-align: center;
    }
    
    .emergency-text { text-align: center; }

    .main-form input,
    .main-form select,
    .main-form textarea {
    margin-top: 0px !important;
    }

    .input-group label {
    margin-bottom: 0px !important;
    }

    .input-group {
        gap: 0px !important;
    }

    /* --- 8. FOOTER --- */
    
    /* --- 8. FOOTER MOBILE CENTRÉ --- */
    .site-footer {
        text-align: center !important;
    }

    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-right: 20px; /* On garde ça pour équilibrer le padding gauche de base */
    }

    .footer-col {
        width: 100%;
        padding: 0 !important;
        margin: 0 0 40px 0 !important;
        display: flex;       /* On passe en flex pour mieux contrôler */
        flex-direction: column;
        align-items: center; /* Centre horizontalement les enfants flex */
    }

    /* CORRECTION CRITIQUE : On annule la marge qui poussait tout à gauche sur PC */
    .footer-col:first-child {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    /* Centre le logo et le texte */
    .footer-logo-wrapper {
        justify-content: center !important;
        width: 100%;
    }

    .footer-desc {
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Centre les listes de liens */
    .footer-links {
        width: 100%;
        text-align: center;
    }

    /* Centre les éléments de contact (icones + texte) */
    .footer-contact {
        width: 100%;
    }

    .footer-contact li {
        justify-content: center !important;
        display: flex;
    }
    
    /* Centre le bas du footer (Copyright) */
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

/* 1. SUPPRIME LES SAUTS DE LIGNE (Le vrai coupable) */
    .wpcf7-form br {
        display: none !important;
    }

    /* 2. CIBLE LE LABEL */
    .input-group label {
        display: block !important;
        margin-bottom: 12px !important; /* Petit espace sous le texte */
        padding-bottom: 0 !important;
        line-height: 1 !important; /* Réduit la hauteur de ligne du texte lui-même */
    }

    /* 3. CIBLE LE CHAMP (INPUT) */
    .main-form input,
    .main-form select,
    .main-form textarea {
        margin-top: 0px !important; /* Colle le champ au label du dessus */
        margin-bottom: 15px !important; /* Espace APRÈS le champ (vers le prochain label) */
    }

    /* 4. NETTOIE LES PARAGRAPHES AUTOUR */
    .wpcf7-form p {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 5. GESTION DES GROUPES (DIV) */
    .input-group {
        margin-bottom: 0 !important;
    }
    }


/* 1. SUPPRESSION DE LA BARRE GRISE (FIELDSET) ET ZONE LECTEUR */
fieldset.hidden-fields-container,
.wpcf7 fieldset,
.wpcf7 .screen-reader-response,
div.screen-reader-response {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. RÉTABLISSEMENT DES ESPACEMENTS D'ORIGINE */
/* On autorise à nouveau les paragraphes et sauts de ligne pour ton design */
.wpcf7-form p, 
.wpcf7-form br {
    display: block; /* Redonne l'espace prévu par ton CSS original */
}

/* 2. MESSAGE DE CONFIRMATION FINAL (SUCCÈS OU ERREUR) */
/* On force l'affichage en bas avec display: block */
.wpcf7-response-output {
    display: block !important; 
    color: var(--color-vert) !important;
    text-align: center !important;
    margin-top: 15px !important;
    clear: both !important;
}

/* 3. PETITS MESSAGES D'ERREUR SOUS LES CHAMPS */
.wpcf7-not-valid-tip {
    color: #ff0000 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    display: block !important;
}

/* 4. NETTOYAGE FINAL DU FORMULAIRE */
.wpcf7-form {
    border: none !important;
    box-shadow: none !important;
}

/* --- PERSONNALISATION DU MESSAGE DE CONFIRMATION --- */

/* 1. On cible la boîte de réponse (le cadre vert) */
div.wpcf7-response-output {
    border: none !important;         /* Supprime le cadre vert */
    padding: 0 !important;           /* Enlève l'espace interne du cadre */
    margin: 20px 0 0 0 !important;   /* Ajoute un peu d'espace au-dessus du texte */
    text-align: center !important;   /* Centre le texte */
    font-weight: 500 !important;     /* Rend le texte un peu plus gras */
    border-radius: 0 !important;     /* Enlève les bords arrondis s'il y en a */
}

/* 2. (Optionnel) Si vous voulez changer la couleur du texte de succès spécifiquement */
.wpcf7 form.sent .wpcf7-response-output {
    color: var(--color-vert) !important; /* Votre vert personnalisé */
}

/* 3. (Optionnel) Si vous voulez changer la couleur du texte d'erreur */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    color: #e74c3c !important; /* Un rouge plus joli que celui par défaut */
}



/* =========================================
   STYLE DES PAGES (Mentions légales, CGV...)
   ========================================= */

/* 1. Espacer les paragraphes (Le texte normal) */
.page-content-text p {
    margin-bottom: 25px;       /* Ajoute de l'espace sous chaque bloc de texte */
    line-height: 1.8;          /* Augmente l'espace entre les lignes (plus lisible) */
    font-size: 16px;
    color: var(--color-noir);               /* Gris très foncé (plus doux que le noir pur) */
    text-align: justify;       /* (Optionnel) Justifie le texte pour faire "pro" */
}

/* 2. Styliser les Titres (ex: "1. Édition du site") */
/* IMPORTANT : Dans WordPress, mettez ces titres en "Titre 2" ou "H2" */
.page-content-text h2,
.page-content-text h3{
    margin-top: 40px;          /* Gros espace au-dessus du titre */
    margin-bottom: 20px;       /* Petit espace sous le titre */
    color: var(--color-vert);  /* Votre vert NJ Informatique */
    font-size: 28px;
    font-weight: 700;
    border-bottom: 2px solid #ddd; /* Petit trait gris de séparation (optionnel) */
    padding-bottom: 10px;
}

/* 3. Les liens (emails, sites web) */
.page-content-text a {
    color: var(--color-noir);
    font-weight: 600;
    text-decoration: underline;
}
.page-content-text a:hover {
    color: var(--color-vert);
}

/* 4. Les listes à puces (s'il y en a) */
.page-content-text ul {
    margin-bottom: 25px;
    padding-left: 20px;
}
.page-content-text li {
    margin-bottom: 10px;
}

/* 5. Gérer les mots en gras */
.page-content-text strong {
    color: var(--color-noir); /* Noir profond pour ressortir */
}

/* On réduit l'épaisseur du texte en gras dans les pages légales */
.page-content-text strong, 
.page-content-text b {
    font-weight: 600 !important; /* 500 est "semi-bold", plus fin que le 700 habituel */
    color: var(--color-noir);    /* On s'assure qu'il reste bien noir */
}