/*==================================================
  1. RESET & VARIABLES BASE
==================================================*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.6;
    padding-top: var(--header-height);
}

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

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

:root {
    --blue: #0d3f8a;
    --dark: #082d68;
    --orange: #f58220;
    --light: #f8f9fc;
    --white: #ffffff;
    --text: #555;
    --border: #e5e5e5;
    --radius: 15px;
    --shadow: 0 8px 20px rgba(0, 0, 0, .12);
    --transition: .3s ease;

    /* Couleurs supplémentaires utilisées dans les sections "à propos", "prestations", "avis" */
    --navy: #123d7a;
    --navy-dark: #041d45;
    --text-muted: #4a4a4a;
    --text-light: #555555;
    --text-lighter: #666666;
    --border-light: #edf2f7;

    /* Hauteurs de header, utilisées pour le padding-top du body et les offsets mobiles.
       Modifier ici seulement si la hauteur du header change dans le HTML/CSS ci-dessous. */
    --header-height: 90px;
    --header-height-mobile: 75px;
    --mobile-action-bar-height: 55px;
}

/* Respecte les préférences d'accessibilité : désactive les animations/transitions
   pour les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/*==================================================
  2. HEADER & NAVIGATION
==================================================*/

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    background: var(--white);
    box-shadow: 0 3px 15px rgba(0, 0, 0, .08);
    z-index: 999;
}

.logo img {
    width: 140px;
    height: auto;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
    will-change: transform;
}
.logo a:hover img,
.logo img:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 63, 138, 0.2);
}

nav ul {
    display: flex;
    align-items: center;
    gap: 35px;
}

nav ul li {
    position: relative;
}

nav ul li a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    transition: var(--transition);
}

nav ul li a:hover,
nav ul li a:focus-visible {
    color: var(--orange);
}

.dropdown-static {
    cursor: default;
}

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 270px;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .12);
    z-index: 999;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 14px 20px;
    color: #333;
    transition: var(--transition);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: var(--orange);
    color: #fff;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.phone-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.phone-box i {
    font-size: 24px;
    color: var(--orange);
}

.phone-box strong {
    display: block;
    color: var(--dark);
    font-size: 20px;
}

.phone-box p {
    font-size: 12px;
    color: #777;
}

.btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    background: var(--orange);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-header:hover,
.btn-header:focus-visible {
    background: #d96d10;
    transform: translateY(-3px);
}

.btn-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 25px;
    background: #28a745;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(40, 167, 69, .25);
}

.btn-call:hover,
.btn-call:focus-visible {
    background: #218838;
    transform: translateY(-3px);
}


/*==================================================
  3. HERO SECTION
==================================================*/

.hero {
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 40px;
    background: url("images/hero-house.jpg") center/cover no-repeat; /* Corrigé : Images -> images */
}

.hero-content {
    width: 100%;
    max-width: 550px;
    margin-right: auto;
    padding: 40px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-content h1 {
    margin-bottom: 15px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
}

.h-blue, .bati-blue { color: var(--blue); }
.b-orange, .energie-orange { color: var(--orange); }

.hero-content h2 {
    margin-bottom: 25px;
    font-size: 26px;
    color: var(--dark);
}

.hero-text {
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--text);
}

.hero-services {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.hero-services li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 19px;
    font-weight: 700;
    color: #333;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-orange, .btn-blue, .btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 180px;
    height: 48px;
    padding: 0 25px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
    transition: var(--transition);
}

.btn-orange {
    background: var(--orange);
    color: #fff;
}

.btn-orange:hover,
.btn-orange:focus-visible {
    background: #d96d10;
    transform: translateY(-3px);
}

.btn-blue {
    background: var(--dark);
    color: #fff;
}

.btn-blue:hover,
.btn-blue:focus-visible {
    background: var(--blue);
    transform: translateY(-3px);
}

.btn-contact {
    background: #fff;
    color: #28a745;
    border: 2px solid #28a745;
}

.btn-contact:hover,
.btn-contact:focus-visible {
    background: #28a745;
    color: #fff;
}


/*==================================================
  4. ACCUEIL - AVANTAGES
==================================================*/

.advantages {
    background: var(--dark);
    color: white;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    padding: 30px 50px;
}

.advantage {
    display: flex;
    align-items: center;
    gap: 15px;
}

.advantage i {
    font-size: 32px;
    color: var(--orange);
}

.advantage h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.advantage p {
    font-size: 13px;
    color: #ddd;
}


/*==================================================
  5. SECTION À PROPOS & PRESENTATION
==================================================*/

.about-page {
    background: var(--light);
    padding: 60px 0 30px;
}

.about-page-container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto 30px;
    display: flex;
    align-items: stretch !important;
    justify-content: space-between;
    gap: 45px;
}

.about-page-container.reverse {
    flex-direction: row-reverse;
}

.about-page-image {
    flex: 0 0 calc(50% - 22px);
    width: 100%;
    display: flex;
}

.about-page-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.about-page-content {
    flex: 0 0 calc(50% - 22px);
    width: 100%;
    background: var(--white);
    padding: 45px 40px;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Titre et ligne orange alignés à gauche */
.about-page-content h2 {
    font-size: 34px;
    color: var(--navy);
    margin-bottom: 22px;
    line-height: 1.3;
    font-weight: 700;
    position: relative;
    padding-bottom: 12px;
    text-align: left;
}

.about-page-content h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: none;
    width: 60px;
    height: 4px;
    background: var(--orange);
    border-radius: 50px;
}

.about-page-content p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 25px;
}

.about-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    font-size: 16.5px;
    line-height: 1.6;
    color: #333333;
}

.about-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--orange);
    font-size: 18px;
    font-weight: bold;
}

.about-benefits {
    width: 90%;
    max-width: 1280px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.benefit {
    background: var(--white);
    padding: 22px 16px;
    border-radius: 14px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    line-height: 1.4;
}

.benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--orange);
}


/*==================================================
  6. PRESTATIONS & BANNIÈRE
==================================================*/

.service-banner {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 70px 20px;
}

.service-banner h1 {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 700;
}

.service-banner hr {
    width: 120px;
    margin: 20px auto;
    border: none;
    border-top: 3px solid var(--orange);
}

.service-banner p {
    font-size: 20px;
    opacity: 0.95;
}

.prestations,
.services-details {
    padding: 50px 0 60px;
    background: var(--light);
}


/*==================================================
  7. GALERIE & TÉMOIGNAGES
==================================================*/

/* GALERIE */
.gallery {
    padding: 50px 0 60px;
    background: var(--white);
    border-top: 1px solid var(--border-light);
}

.gallery-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.gallery-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-grid img:hover,
.gallery-grid img:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(18, 61, 122, 0.15);
}

.testimonials {
    padding: 70px 40px;
    background: var(--light);
    text-align: center;
}


/*==================================================
  8. FOOTER
==================================================*/

.footer {
    background: var(--navy-dark);
    color: #fff;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    padding: 45px 30px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1fr;
    gap: 30px;
}

.footer-logo {
    width: 130px;
    margin-bottom: 12px;
}

.footer-box h3 {
    font-size: 21px;
    margin-bottom: 18px;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.footer-box h3::after {
    content: "";
    display: block;
    width: 35px;
    height: 3px;
    margin-top: 6px;
    background: var(--orange);
    border-radius: 50px;
}

.footer-box p {
    color: #d8d8d8;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 15.5px;
    text-align: justify;
    hyphens: none !important;
    word-break: normal;
}

.footer-box ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-box ul li a {
    color: #d8d8d8;
    font-size: 15.5px;
    transition: var(--transition);
}

.footer-box ul li a:hover,
.footer-box ul li a:focus-visible {
    color: var(--orange);
    padding-left: 4px;
}

.footer-box i {
    width: 18px;
    color: var(--orange);
    margin-right: 6px;
    text-align: center;
}

.footer-bottom {
    padding: 15px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #bfbfbf;
    font-size: 14.5px;
}


/*==================================================
  9. PAGE CONTACT SUR MESURE
==================================================*/

.contact-section-lm {
    padding: 60px 0;
    background: var(--white);
}

.contact-container-lm {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch !important;
}

.contact-form-col {
    flex: 1.4;
    display: flex;
    flex-direction: column;
}

.contact-form-col h2 {
    font-size: 34px;
    color: var(--navy);
    margin-bottom: 15px;
    font-weight: 700;
    text-align: left;
}

.contact-intro {
    color: var(--text-muted);
    font-size: 16.5px;
    line-height: 1.65;
    margin-bottom: 25px;
    text-align: justify;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: normal;
}

.form-lm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row-lm {
    display: flex;
    gap: 18px;
}

.form-group-lm {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group-lm label {
    font-size: 15.5px;
    color: #222222;
    font-weight: 600;
}

.form-group-lm input,
.form-group-lm select,
.form-group-lm textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 15.5px;
    font-family: inherit;
    color: #333;
    outline: none;
    transition: border-color 0.2s ease;
    background: var(--white);
}

.form-group-lm input:focus,
.form-group-lm input:focus-visible,
.form-group-lm select:focus,
.form-group-lm select:focus-visible,
.form-group-lm textarea:focus,
.form-group-lm textarea:focus-visible {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.2);
}

.form-btn-lm {
    margin-top: 10px;
}

.btn-orange-lm {
    background: var(--orange);
    color: var(--white);
    border: none;
    padding: 14px 40px;
    font-size: 16.5px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-orange-lm:hover,
.btn-orange-lm:focus-visible {
    background: #e07010;
}

.contact-info-col {
    flex: 1;
    background: #a9c2d9;
    padding: 35px;
    border-radius: 12px;
    color: #1a334d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-info-col h3 {
    font-size: 28px;
    color: var(--navy);
    margin-bottom: 20px;
    font-weight: 700;
}

.info-list-lm {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-list-lm li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 1.5;
}

.info-list-lm i {
    color: var(--orange);
    font-size: 18px;
    margin-top: 3px;
}

.info-list-lm a {
    color: var(--navy);
    text-decoration: underline;
    font-weight: 700;
    font-size: 16px;
}

.hours-lm {
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(18, 61, 122, 0.2);
}

.map-box-lm {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-height: 200px;
    display: flex;
}

.map-box-lm iframe {
    width: 100%;
    height: 100% !important;
    min-height: 100%;
}

.social-links-lm {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.social-icon {
    width: 38px;
    height: 38px;
    background: var(--navy);
    color: var(--white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.social-icon:hover,
.social-icon:focus-visible {
    background: var(--orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(245, 130, 32, 0.3);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 5px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--orange);
}

.checkbox-group label {
    font-size: 13.5px;
    color: #666;
    line-height: 1.4;
    cursor: pointer;
}


/*==================================================
  10. CORRECTIFS CENTRAGE, CTA & HARMONISATION DES GRILLES

  NOTE MAINTENANCE : les règles ci-dessous (sections 10 à 13) utilisent
  massivement !important car elles surchargent des règles plus haut dans
  la cascade. Elles n'ont pas été retirées ici pour ne pas casser
  l'affichage actuel sans vérification sur le HTML réel. Idéalement, il
  faudrait fusionner chaque règle avec sa règle d'origine correspondante
  (ex. fusionner ".section-title h2" avec le futur bloc qui définit déjà
  ces titres) plutôt que de la surcharger a posteriori.
==================================================*/

/* Titres de sections et centrage */
.section-title,
.why .section-title,
.why-us .section-title,
.gallery .section-title,
.services-details .section-title {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 40px !important;
}

.section-title h2,
.why h2,
.why-us h2,
.gallery h2,
.services-details h2 {
    text-align: center !important;
    display: table !important;
    margin: 0 auto 12px auto !important;
    font-size: 34px !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
    float: none !important;
}

.section-title h2::after,
.why h2::after,
.why-us h2::after,
.gallery h2::after,
.services-details h2::after {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 4px !important;
    background: var(--orange) !important;
    margin: 10px auto 0 auto !important;
    border-radius: 50px !important;
}

.section-title p,
.why p,
.why-us p,
.gallery p,
.services-details p {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    font-size: 17px !important;
    color: var(--text-light) !important;
}

/* BANNIÈRE CTA ENCADRÉE */
section.cta, 
section.service-cta,
.about-cta {
    background: transparent !important;
    padding: 40px 0 !important;
    width: 100% !important;
}

section.cta .container, 
section.service-cta .container,
.about-cta {
    background: linear-gradient(135deg, var(--navy), var(--dark)) !important;
    color: var(--white) !important;
    padding: 50px 30px !important;
    text-align: center !important;
    border-radius: 24px !important;
    width: 90% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    box-shadow: 0 15px 35px rgba(18, 61, 122, 0.2) !important;
}

section.cta h2, 
section.service-cta h2,
.about-cta h2 {
    color: var(--white) !important;
    font-size: 32px !important;
    margin-bottom: 15px !important;
}

section.cta p, 
section.service-cta p,
.about-cta p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    margin: 0 auto 25px !important;
    max-width: 650px !important;
}

section.cta .cta-buttons, 
section.service-cta .cta-buttons {
    display: flex !important;
    justify-content: center !important;
}

/* STYLE DU BOUTON DEMANDER UN DEVIS */
section.cta .btn-orange,
section.service-cta .btn-orange,
.about-cta .about-btn,
.cta-buttons .btn-orange {
    display: inline-block !important;
    background: var(--orange) !important;
    color: var(--white) !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.35) !important;
    transition: all 0.3s ease !important;
}

section.cta .btn-orange:hover,
section.cta .btn-orange:focus-visible,
section.service-cta .btn-orange:hover,
section.service-cta .btn-orange:focus-visible,
.about-cta .about-btn:hover,
.about-cta .about-btn:focus-visible,
.cta-buttons .btn-orange:hover,
.cta-buttons .btn-orange:focus-visible {
    background: #e07010 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 22px rgba(245, 130, 32, 0.45) !important;
}

/* JUSTIFICATION DES TEXTES PARAGRAPHES */
.about-page-content p,
.about-page-content ul li,
.service-description p {
    text-align: justify !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
}


/*==================================================
  1. HARMONISATION UNIFIÉE DES CARTES ET GRILLES
==================================================*/
/* 1. Cartes de prestations */
.services-details .services-grid,
.prestations-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 25px !important;
    max-width: 1200px !important;
    margin: 0 auto 50px auto !important;
}

.service-box, 
.card {
    flex: 1 1 260px !important;
    max-width: 360px !important;
    background: var(--white) !important;
    padding: 0 !important; /* Supression du padding global pour coller l'image en haut */
    overflow: hidden !important; /* Évite que l'image dépasse des coins arrondis */
    border-radius: 16px !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 6px 20px rgba(18, 61, 122, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Aligne le bouton toujours en bas */
    transition: all 0.3s ease !important;
}

/* Gestion du contenu sous l'image */
.card-content {
    padding: 20px 22px 25px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

.service-box:hover,
.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(18, 61, 122, 0.12) !important;
    border-color: var(--orange) !important;
}

.service-box i,
.card i {
    font-size: 24px !important;
    color: var(--orange) !important;
    background: rgba(245, 130, 32, 0.1) !important;
    width: 55px !important;
    height: 55px !important;
    line-height: 55px !important;
    border-radius: 12px !important;
    margin-bottom: 18px !important;
}

.service-box h3,
.card h3 {
    font-size: 20px !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.service-box p,
.card-content p {
    font-size: 14.5px !important;
    color: var(--text-light) !important;
    line-height: 1.6 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
}

/* Transformation du lien En savoir plus en bouton orange */
.card-content a {
    display: inline-block !important;
    background-color: var(--orange, #ff6b00) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(245, 130, 32, 0.2) !important;
}

/* Effet au survol du bouton */
.card-content a:hover {
    background-color: #e05d00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(245, 130, 32, 0.3) !important;
}


/* 2. Cartes "Pourquoi choisir..." (Desktop : 3 par ligne) */
.why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.why-card {
    background: var(--white) !important;
    padding: 18px 20px !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--orange) !important;
    border-top: 1px solid var(--border-light) !important;
    border-right: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    min-height: 85px !important;
    transition: all 0.3s ease !important;
}

.why-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(18, 61, 122, 0.1) !important;
}

.why-card i {
    font-size: 18px !important;
    color: var(--orange) !important;
    background: rgba(245, 130, 32, 0.1) !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    text-align: center !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
}

.why-card h3 {
    color: var(--navy) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    text-align: left !important;
}

.why-card p {
    color: var(--text-lighter) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important;
}


/*==================================================
  12. SECTION AVIS CLIENTS & FORMULAIRE
==================================================*/

.reviews-section {
    padding: 60px 0;
    background: var(--light);
}

.testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    max-width: 1200px !important;
    margin: 0 auto 50px auto !important;
}

.testimonial-card {
    background: var(--white) !important;
    padding: 30px 25px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 6px 20px rgba(18, 61, 122, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
}

.testimonial-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(18, 61, 122, 0.12) !important;
    border-color: var(--orange) !important;
}

.testimonial-card .stars {
    color: var(--orange) !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.testimonial-card .review-text {
    font-size: 14.5px !important;
    color: var(--text-light) !important;
    line-height: 1.6 !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
    text-align: justify !important;
}

.testimonial-card .review-author strong {
    display: block !important;
    color: var(--navy) !important;
    font-size: 16px !important;
}

.testimonial-card .review-author span {
    font-size: 13px !important;
    color: #888888 !important;
}

.review-form-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    background: var(--white) !important;
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--border-light) !important;
}

.review-form-container h3 {
    font-size: 26px !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.rating-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

.rating-group label {
    font-size: 15.5px !important;
    color: #333333 !important;
    font-weight: 600 !important;
}

.star-rating {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    font-size: 28px !important;
}

.star-rating input {
    /* Masqué visuellement mais toujours accessible au clavier/lecteur d'écran */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.star-rating label {
    color: #ddd !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    padding: 0 3px !important;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label,
.star-rating input:focus-visible + label {
    color: var(--orange) !important;
}

.form-btn-right {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 15px !important;
}

/*==================================================
  13. ANIMATION DES CARTES "POURQUOI CHOISIR..."
==================================================*/

/* État initial : la carte est transparente et légèrement décalée vers le bas */
.why-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* État animé : la carte devient visible et remet sa position d'origine */
.why-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Animation au survol de la souris */
.why-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(18, 61, 122, 0.15) !important;
    border-left-color: #d96d10 !important;
}

.why-card:hover i {
    transform: scale(1.1);
    background: #f58220 !important;
    color: #ffffff !important;
}


/*==================================================
  14. MEDIA QUERIES RESPONSIVE (PROPRE, COMPLET & UNIFIÉ)
==================================================*/

/* Masqué par défaut sur grand écran */
.menu-toggle,
.mobile-action-bar {
    display: none;
}

/* --- ADAPTATIONS TABLETTE (<= 1024px & 992px) --- */
@media (max-width: 1024px) {
    .about-benefits {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    header {
        padding: 0 25px;
    }

    nav ul {
        gap: 20px;
    }

    .hero {
        padding: 50px 25px;
    }

    .hero-content {
        max-width: 100%;
    }

    .advantages,
    .gallery-grid,
    .footer-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .testimonials-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .about-page-container {
        flex-direction: column;
        gap: 30px;
    }

    .about-page-container.reverse {
        flex-direction: column-reverse;
    }

    .about-page-image,
    .about-page-content {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .about-page-image img {
        height: 350px !important;
    }

    .contact-container-lm {
        flex-direction: column;
    }

    .form-row-lm {
        flex-direction: column;
        gap: 15px;
    }

    .contact-info-col {
        width: 100%;
    }

    .review-form-container {
        padding: 25px !important;
    }

    .rating-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
}





/* --- ADAPTATIONS MOBILE (<= 768px) --- */
@media (max-width: 768px) {

    /* 1. ESPACEMENT & TYPOGRAPHIE NATURELLE */
    body {
        padding-top: calc(var(--header-height-mobile) + var(--mobile-action-bar-height)) !important;
    }

    /* TEXTE DES PARAGRAPHES (Agrandi à 17px avec un meilleur espacement) */
   html body p,
    html body div p,
    html body section p,
    html body .contact-intro,
    html body .about-page-content p,
    html body .service-description p,
    html body .card-content p,
    html body .service-box p {
        text-align: justify !important; /* Modifié de left à justify */
        text-justify: inter-word !important;
        hyphens: auto !important; /* Ajoute des trait d'union automatiques pour éviter les grands espaces */
        -webkit-hyphens: auto !important;
        word-break: normal !important;
        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    /* TEXTE DES LISTES (Maçonnerie, Rénovation, etc. - Agrandi à 16.5px) */
    html body ul li,
    html body .about-list li,
    html body .about-page-content ul li,
    html body .service-description ul li {
        text-align: left !important;
        display: block !important;
        position: relative !important;
        padding-left: 28px !important;
        margin-bottom: 12px !important;
        font-size: 16.5px !important; /* Passé de 14.5px à 16.5px */
        line-height: 1.55 !important;
    }

    html body .about-list li::before,
    html body .about-page-content ul li::before,
    html body .service-description ul li::before {
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
    }

    .contact-section-lm {
        padding: 20px 15px !important;
    }

    .contact-form-col h2 {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }

    /* 2. HEADER MOBILE & MENU BURGER */
    header {
        height: var(--header-height-mobile) !important;
        padding: 0 15px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--white) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;
    }

    .logo img {
        width: 110px !important;
        height: auto !important;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: #eef2f7 !important;
        border-radius: 8px !important;
        color: var(--navy) !important;
        font-size: 22px !important;
        cursor: pointer !important;
        z-index: 1002 !important;
    }

    .menu-toggle:focus-visible {
        outline: 2px solid var(--orange) !important;
        outline-offset: 2px !important;
    }

    .menu-toggle i {
        display: block !important;
        color: var(--navy) !important;
    }

    nav {
        display: none !important;
        position: fixed !important;
        top: var(--header-height-mobile) !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--white) !important;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15) !important;
        border-bottom: 3px solid var(--orange) !important;
        padding: 15px 20px !important;
        z-index: 1001 !important;
    }

    nav.active {
        display: block !important;
    }

    nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
    }

    nav ul li {
        width: 100% !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    nav ul li a {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 15px !important;
        color: var(--navy) !important;
        font-weight: 700 !important;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        background: var(--light) !important;
        padding: 8px 15px !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
    }

    .dropdown-menu li a {
        padding: 8px 0 !important;
        font-size: 14px !important;
    }

    .header-right,
    .phone-box,
    .btn-header,
    .btn-call {
        display: none !important;
    }

    /* 3. BANDE D'ACTION RAPIDE SOUS LE HEADER */
    .mobile-action-bar {
        display: flex !important;
        position: fixed !important;
        top: var(--header-height-mobile) !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--mobile-action-bar-height) !important;
        background: #f0f4f8 !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        z-index: 999 !important;
    }

    .action-btn {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: var(--navy) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .action-btn + .action-btn {
        border-left: 1px solid #dcdcdc !important;
    }

    .action-btn i {
        font-size: 16px !important;
        color: var(--orange) !important;
    }

    /* 4. TAILLES ET GRILLES IMAGES COMPACTES (MOBILE) */
    .why-grid,
    .advantages,
    .services-details .services-grid,
    .prestations-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Galerie photos en 2 colonnes compactes */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 5px !important;
    }

    .gallery-grid img {
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    /* Photos dans les cartes de prestations */
    .card img,
    .prestations-grid .card img,
    .services-grid .card img {
        height: 160px !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Images de présentation À propos */
    .about-page-image img {
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    .why-card {
        width: 100% !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footer-logo {
        margin: 0 auto 15px !important;
    }

    .footer-box h3::after {
        margin: 10px auto 0 !important;
    }

    /* 5. CORRECTION BOUTON CTA BANNIÈRE */
    section.cta .container, 
    section.service-cta .container,
    .about-cta {
        padding: 35px 15px !important;
        width: 95% !important;
    }

    section.cta .btn-orange,
    section.service-cta .btn-orange,
    .about-cta .about-btn,
    .cta-buttons .btn-orange {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* --- PETITS ÉCRANS (< 576px) --- */
@media (max-width: 576px) {
    .about-benefits {
        grid-template-columns: 1fr !important;
    }

    .form-row-lm {
        flex-direction: column !important;
        gap: 12px !important;
    }
}