/*
 Theme Name:   Arnaud Plomberie Child
 Template:     hello-elementor
 Version:      1.0.0
 Author:       Arnaud Plomberie
 Description:  Thème enfant final responsive.
*/

/* RESET GLOBAL */
body, h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

/* GLOBAL */
body {
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Lora', serif;
    line-height: 1.6;
}

/* HEADER */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #1a1a1a;
    position: relative;
    z-index: 1000;
    border-bottom: 2px solid #d4af37;
}

/* LOGO */
.site-logo {
    display: flex;
    align-items: center;
}

.site-logo img {
    height: 60px;
    width: auto;
}

/* MENU CONTAINER */
.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* MENU EN LIGNE */
.main-menu {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* ITEMS DU MENU */
.main-menu li {
    margin: 0;
    padding: 0;
}

.main-menu li a {
    color: #e0e0e0;
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
}

.main-menu li a:hover {
    background: #d4af37;
    color: #1a1a1a;
    border-radius: 5px;
}

/* CALL BUTTON */
.call-button {
    background: #d4af37;
    color: #1a1a1a;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: bold;
}

/* CALL BUTTON HOVER */
/*.call-button:hover {*/
/*    background: #ffffff;*/
/*$    color: #1a1a1a;*/
}

/* BURGER */
.burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    margin-left: 20px;
}

.burger div {
    width: 25px;
    height: 3px;
    background: #d4af37;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        background: #1a1a1a;
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }

    .main-nav.active {
        display: flex;
    }

    .burger {
        display: flex;
    }

    .main-menu {
        flex-direction: column;
        gap: 10px;
    }

/*    .call-button {
        padding: 8px 12px;
        font-size: 14px;
        margin-left: 0;
        margin-top: 10px;
    }*/

    .site-logo img {
        height: 50px;
    }
}
/* FULL LARGEUR HEADER */
.site-header {
    width: 100%; /* Prend toute la largeur */
    max-width: 100%; /* Pas de limite */
    padding: 10px 40px; /* Espace interne (ajuste ici pour respirer un peu) */
    box-sizing: border-box; /* Pour ne pas dépasser la largeur */
}

/* CORRECTION ALIGNEMENT POUR MOBILE */
@media (max-width: 768px) {
    .site-header {
        padding: 10px 20px; /* Moins de padding sur mobile */
    }
}
/* FORCE LE HEADER EN FULL WIDTH */
.site-header {
    width: 100vw; /* Full largeur */
    position: relative;
    left: 0;
    right: 0;
    padding: 10px 40px; /* Ajuste ici pour l'intérieur */
    box-sizing: border-box;
    margin: 0 auto;
}

/* Supprimer les marges internes de la div parent qui bloque */
.site-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Body au max */
body {
    margin: 0 !important;
    padding: 0 !important;
}
/* 🔥 Supprimer la limitation de largeur imposée par Wordpress */
:root {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
}

/* 🔥 Empêcher les containers de limiter la largeur */
.is-layout-constrained {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 🔥 Forcer le header à prendre toute la largeur */
.site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 40px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
/* HERO SECTION IMG */
.hero-section {
    position: relative;
    width: 100%;
    height: 500px; /* Ajuste la hauteur ici */
    overflow: hidden;
}

.hero-section .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garde la photo bien couvrante sans la déformer */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 900px;
    margin: auto;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4); /* Fond pour texte */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Ombre pour renforcer lisibilité */
.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .hero-section {
        height: 400px; /* Moins haut sur mobile */
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }
}


/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .hero-section {
        height: 400px; /* Un peu plus petit sur mobile */
        padding: 10px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }
}


/* SERVICES */
.services-section {
    padding: 60px 20px;
    background: #1a1a1a;
    color: white;
    text-align: center;
}

.services-section h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.services-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.service-item {
    flex: 1;
    min-width: 280px;
    max-width: 300px;
}

.service-item img {
    width: 100%;
    border-radius: 10px;
}

.service-item h3 {
    margin: 15px 0 10px;
}

.service-item p {
    font-size: 1rem;
}

/* POURQUOI NOUS CHOISIR */
.why-choose-us {
    padding: 60px 20px;
    background: #2c2c2c;
    color: white;
    text-align: center;
}

.why-choose-us h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.why-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.why-item {
    flex: 1;
    min-width: 280px;
    max-width: 300px;
}

/* CONTACT */
.contact-section {
    padding: 60px 20px;
    background: #1a1a1a;
    color: white;
    text-align: center;
}

.contact-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.contact-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/*.contact-btn {
    margin-bottom: 40px;
}*/

.contact-section .btn-call {
    background: #d4af37;
    color: #1a1a1a;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p {
        font-size: 1.3rem;
    }

    .services-list, .why-list {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
        padding: 30px 15px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section p {
        font-size: 1.2rem;
    }
}
/* Centrage des sections textuelles (zones d'intervention et domaines d'expertise) */
.zones-section, .internal-links {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.zones-section h2, .internal-links h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.zones-section p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto;
}

.internal-links ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.internal-links ul li {
  margin-bottom: 12px;
  font-size: 18px;
}

.internal-links ul li a {
  color: #0077cc;
  text-decoration: none;
  font-weight: 600;
}

.internal-links ul li a:hover {
  text-decoration: underline;
}

/* Ajustement global pour homogénéiser */
section {
  padding: 40px 20px;
}
/* ---- CSS spécifique à la page Plombier La Croix Valmer ---- */

/* HERO */
.hero-section {
  position: relative;
  text-align: center;
  color: white;
}
.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
}

/* SECTIONS */
section {
  padding: 60px 20px;
  text-align: center;
}

/* SERVICES */
.services-list, .why-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}
.service-item, .why-item {
  max-width: 320px;
}

/* IMAGES */
.service-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* CONTACT */
.btn-call {
  background: #d4af37;
  color: #1a1a1a;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  display: inline-block;
  margin-top: 20px;
}

/* FAQ */
.faq-item {
  margin-bottom: 20px;
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ZONE INTERVENTION */
.zone-intervention {
  background: #1a1a1a;
  color: white;
  padding: 40px 20px;
  border-radius: 10px;
  margin: 40px auto;
  max-width: 800px;
}

/* ---- Fin CSS spécifique page ---- */
.faq-section {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.faq-section h3 {
    font-size: 1.4rem;
    margin-top: 20px;
    color: #1a1a1a;
}

.faq-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 10px;
    color: #333;
}
/* --------------------------------------
   ✅ STRUCTURATION GÉNÉRALE DES SECTIONS
----------------------------------------- */

/* Centrage global du contenu texte et gestion largeur */
.hero-content, 
.services-section, 
.why-choose-us, 
.zone-intervention, 
.faq-section, 
.contact-section {
  text-align: center;        /* Texte centré */
  padding: 20px;             /* Espace intérieur */
  margin: 0 auto;            /* Centrage horizontal */
  max-width: 1200px;         /* Largeur maximale pour desktop */
  box-sizing: border-box;   /* Inclure padding dans la largeur */
}

/* Pour éviter que les paragraphes et titres soient collés au bord sur mobile */
.hero-content p, 
.services-section p, 
.why-choose-us p, 
.zone-intervention p, 
.faq-section p, 
.contact-section p {
  margin: 0 auto 20px auto;  /* Espacement bas */
  max-width: 90%;           /* Largeur max sur mobile */
  line-height: 1.6;         /* Aération du texte */
}

/* --------------------------------------
   ✅ HERO SECTION - RESPONSIVE
----------------------------------------- */

/* Image principale responsive */
.hero-image {
  width: 100%;               /* Toujours 100% largeur */
  height: auto;              /* Hauteur auto pour garder les proportions */
  object-fit: cover;         /* Remplir l'espace sans déformer */
}

/* Titre et texte du Hero */
.hero-content h1 {
  font-size: 3vw;            /* Adaptatif desktop */
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.5vw;          /* Adaptatif desktop */
}

/* --------------------------------------
   ✅ SECTIONS SERVICES & POURQUOI NOUS CHOISIR
----------------------------------------- */

/* Mise en colonne sur desktop, mais empilement sur mobile */
.services-list, 
.why-list {
  display: flex;
  justify-content: space-between;
  gap: 20px;                /* Espace entre les blocs */
  flex-wrap: wrap;         /* Permet d'aller à la ligne si manque de place */
}

/* Bloc individuel responsive */
.service-item, 
.why-item {
  width: 30%;               /* 3 colonnes sur desktop */
  min-width: 280px;         /* Pour pas que ça devienne trop petit */
  box-sizing: border-box;
  padding: 10px;
}

/* Images des services responsive */
.service-item img, 
.why-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;      /* Coins arrondis pour le style */
}

/* --------------------------------------
   ✅ ZONE INTERVENTION & FAQ
----------------------------------------- */

/* Centrage et largeur des blocs */
.zone-intervention, 
.faq-section {
  padding: 30px 10px;
}

/* FAQ éléments espacés */
.faq-item {
  margin-bottom: 20px;
  text-align: left;        /* Pour lisibilité des questions/réponses */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------
   ✅ CONTACT
----------------------------------------- */

/* Bouton d'appel centré */
/*.contact-btn {
  margin: 20px auto;
  text-align: center;
}*/

/* Style du bouton */
/*.contact-btn a {
  display: inline-block;
  background: #007BFF;
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
}*/

/* --------------------------------------
   ✅ RESPONSIVE MOBILE < 768px
----------------------------------------- */

@media (max-width: 768px) {
  /* Hero - Adapter le titre et texte */
  .hero-content h1 {
    font-size: 6vw;         /* Plus gros pour mobile */
  }

  .hero-content p {
    font-size: 4.5vw;       /* Plus lisible sur petit écran */
  }

  /* Mise en colonne des services et pourquoi nous choisir */
  .services-list, 
  .why-list {
    flex-direction: column; /* Empilement vertical */
    align-items: center;    /* Centrage horizontal */
  }

  /* Largeur adaptative pour mobile */
  .service-item, 
  .why-item {
    width: 90%;
  }

  /* FAQ en pleine largeur sur mobile */
  .faq-item {
    width: 100%;
    padding: 0 10px;
  }

  /* Bouton appel plus gros sur mobile */
  .contact-btn a {
    font-size: 5vw;
    padding: 15px 20px;
  }
}

/* ✅ Correction largeur boite texte HERO en mobile */
@media (max-width: 768px) {
  .hero-content {
    width: 90%; /* Largeur plus large */
    padding: 15px; /* Un peu d'air autour du texte */
    box-sizing: border-box; /* Pour que le padding soit inclus dans la largeur */
  }

  .hero-content h1 {
    font-size: 6vw; /* Texte adaptatif, assez gros pour mobile */
  }

  .hero-content p {
    font-size: 4vw; /* Plus petit que le H1 mais bien lisible */
  }
}
/* ✅ Ajustement des listes de services et avantages */
.services-list, .why-list {
    display: flex;
    justify-content: center; /* Centre les items */
    flex-wrap: wrap; /* Permet le retour à la ligne sur petit écran */
    gap: 30px; /* Espace égal entre les boîtes */
    padding: 0; /* On enlève les marges parasites */
    margin: 0 auto; /* Centre tout le bloc */
    max-width: 1200px; /* Limite la largeur totale */
    box-sizing: border-box;
}

/* ✅ Ajustement des box elles-mêmes */
.service-item, .why-item {
    flex: 1 1 300px; /* Taille minimale 300px, extensible pour équilibrer */
    max-width: 350px; /* Taille maximale pour garder de belles colonnes */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Répartir espace verticalement */
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.05); /* Optionnel : légère couleur de fond */
    padding: 20px;
    border-radius: 8px;
    min-height: 400px; /* Même hauteur pour tout le monde */
    box-sizing: border-box;
}

/* ✅ Images bien gérées */
.service-item img, .why-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* ✅ Ajuster les titres et textes */
.service-item h3, .why-item h3 {
    margin: 15px 0 10px;
    font-size: 1.3rem;
}

.service-item p, .why-item p {
    flex-grow: 1; /* Le texte prend tout l’espace dispo pour équilibrer */
    font-size: 1rem;
    line-height: 1.5;
}

/* ✅ Version mobile ajustée */
@media (max-width: 768px) {
    .service-item, .why-item {
        max-width: 100%; /* Prend toute la largeur sur mobile */
        min-height: auto; /* Hauteur libre sur mobile */
    }

    .services-list, .why-list {
        gap: 20px; /* Moins de gap sur mobile */
    }
}
/* ✅ Bloc lien interne centré et visible */
.internal-links {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05); /* Légère surbrillance */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure discrète */
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.internal-links p {
    margin: 0;
    font-size: 1.3rem;
    color: white;
    line-height: 1.6;
}

.internal-links a {
    color: #d4af37;
    text-decoration: none;
    font-weight: bold;
}

.internal-links a:hover {
    text-decoration: underline;
    color: #ffffff;
    transition: all 0.3s ease;
}

/* ✅ Responsive Mobile */
@media (max-width: 768px) {
    .internal-links p {
        font-size: 1.1rem;
    }
}
/* ----------------------------------------------
   ✅ MENU PRINCIPAL DÉROULANT AU SURVOL
---------------------------------------------- */

/* Structure de base */
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* Liens */
.main-menu li a {
    padding: 15px 20px;
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* Apparence du sous-menu */
.main-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a1a1a;
    padding: 10px 0;
    min-width: 200px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

/* Apparence des liens du sous-menu */
.main-menu li ul li a {
    padding: 10px 15px;
    color: white;
    font-weight: normal;
    text-transform: none;
}

/* Hover effet */
.main-menu li ul li a:hover {
    background: #d4af37;
    color: black;
}

/* Affichage au survol */
.main-menu li:hover > ul {
    display: block;
}

/* Sous-menu positionné correctement */
.main-menu li {
    position: relative;
}

/* RESPONSIVE - Désactiver le menu déroulant sur mobile (à adapter si besoin) */
@media (max-width: 768px) {
    .main-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .main-menu li ul {
        position: static;
        display: none; /* Cacher par défaut */
    }
    .main-menu li:hover > ul {
        display: none; /* On ne l'af
@media (max-width: 768px) {
    .main-menu li ul {
        display: block; /* Toujours visible quand on est dans le menu burger */
        position: static;
        margin-left: 15px; /* Décalé pour montrer que c'est un sous-menu */
        padding-left: 10px;
    }
}
/* ✅ Centrer toutes les images dans les blocs service-item */
.service-item img {
    display: block;
    margin: 0 auto; /* Centre l'image horizontalement */
    width: 100%; /* S'adapte à la largeur du bloc */
    height: auto; /* Garde la proportion */
    border-radius: 8px; /* Coins arrondis si besoin */
}

/* ✅ Optionnel : Si tu veux réduire un peu les images trop grandes */
.service-item {
    max-width: 350px; /* Limite la largeur pour éviter les images trop grosses */
    margin: 0 auto; /* Centre le bloc lui-même */
    text-align: center; /* Centre le texte */
}
/* ✅ Centrage parfait des images pour la page piscine/spa */
.services-list .service-item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Pour ne jamais dépasser la largeur du conteneur */
    height: auto;
    border-radius: 8px; /* Coins arrondis pour garder la charte */
}

/* ✅ On centre tout le bloc service-item lui-même */
.services-list .service-item {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 400px; /* Ajustable selon la taille que tu veux */
}

/* ✅ Centrage du texte également */
.services-list .service-item h3, 
.services-list .service-item p {
    text-align: center;
}
/* ✅ Ciblage uniquement pour les services piscine et spa */
.services-list .service-item {
    margin: 0 auto; /* Centrage horizontal */
    text-align: center; /* Centre le texte */
    display: flex;
    flex-direction: column; /* Empile verticalement */
    align-items: center; /* Centre horizontalement */
    max-width: 400px; /* Limite la largeur du bloc */
}

/* ✅ Centrage des images */
.services-list .service-item img {
    display: block;
    margin: 0 auto; /* Centre l'image dans le bloc */
    width: auto;
    max-width: 100%; /* Pas plus large que le conteneur */
    height: auto;
    border-radius: 10px; /* Garde les coins arrondis */
}
/* Gérer l'affichage des sous-menus dans le burger */
@media (max-width: 768px) {
    .main-menu li.menu-item-has-children > a::after {
        content: ' ▼'; /* Petite flèche pour montrer qu'il y a un sous-menu */
        font-size: 0.8em;
    }

    .main-menu li.menu-item-has-children > ul.sub-menu {
        display: none; /* Cache par défaut */
        padding-left: 15px;
        background: rgba(0,0,0,0.1);
        border-radius: 5px;
        margin-top: 10px;
    }

    .main-menu li.menu-item-has-children.open > ul.sub-menu {
        display: block; /* Affiche quand "open" */
    }

    /* Option : styliser les sous-menus */
    .main-menu li.menu-item-has-children > ul.sub-menu li a {
        padding: 10px 0;
        display: block;
    }
}
/* ===== BOUTON DEMANDE DEVIS ===== */
.btn-call {
  display: inline-block;
  padding: 14px 30px;
  background: #cc9900;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin: 30px auto;
  max-width: 100%; /* ✅ Jamais plus large que son conteneur */
  box-sizing: border-box;
  white-space: normal; /* ✅ Permet de passer à la ligne si besoin */
  word-break: break-word; /* ✅ Coupe proprement si besoin */
}

/* CENTRAGE AUTOMATIQUE */
.contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  .btn-call {
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.4; /* ✅ Plus espacé pour 2 lignes */
    white-space: normal;
  }
}

/* ✅ FOOTER STYLÉ ET RESPONSIVE */
.custom-footer {
    background-color: #1a1a1a;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 2px solid #d4af37;
}

.custom-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.custom-footer p {
    margin: 10px 0;
    font-size: 1rem;
}

.custom-footer .footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.custom-footer .footer-socials img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.custom-footer .footer-socials img:hover {
    transform: scale(1.1);
}

.custom-footer .mentions-link {
    color: #d4af37;
    text-decoration: none;
    font-weight: bold;
}

.custom-footer .mentions-link:hover {
    text-decoration: underline;
}

/* ✅ MOBILE FRIENDLY */
@media (max-width: 768px) {
    .custom-footer .footer-socials {
        gap: 15px;
    }

    .custom-footer .footer-socials img {
        width: 35px;
        height: 35px;
    }

    .custom-footer p {
        font-size: 0.9rem;
    }
}
/* ✅ CERTIFICATIONS À GAUCHE DU FOOTER */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Pour que ça passe en colonne sur mobile */
    padding: 0 20px;
}

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

.footer-certifications img {
    height: 50px; /* Ajuste la taille ici */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%); /* Option : en gris pour la sobriété */
    opacity: 0.8; /* Option : légèrement transparent */
    transition: opacity 0.3s ease;
}

.footer-certifications img:hover {
    opacity: 1;
    filter: none;
}

/* ✅ Infos + réseaux à droite */
.footer-infos {
    text-align: center;
}

/* ✅ Responsive mobile */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }

    .footer-certifications {
        justify-content: center;
    }
}
/* ===== HERO SECTION IMAGE + TEXTE CENTRÉ ===== */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 600px; /* Limite la hauteur pour éviter trop de hauteur */
}

.hero-bg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* Remplit bien la largeur */
  object-position: center;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
  padding: 20px;
  width: 90%;
  max-width: 900px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5); /* Overlay uniquement sous texte */
  border-radius: 15px;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2rem;
  line-height: 1.4;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-section {
    max-height: 400px; /* Moins haut sur mobile */
  }

  .hero-content h1 {
    font-size: 1.8rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .hero-content {
    padding: 15px;
  }
}