/* 
Theme Name: macom
Author: Manon et Alexis
Description: Thème WordPress personnalisé avec design rose et orange.
Version: 1.0
*/

/* Import police Anton */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

body {
  max-width: 100vw;
  overflow-x: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

main.site-main,
section {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Variables couleurs */
:root {
  --primary-color: #EDE5DE;       /* couleur de fond */
  --text-color-dark: #393837;     /* couleur titres & textes */
  --text-color-light: #fff;
}

/* Body */
body {
  font-family: Arial, sans-serif;
  background-color: var(--primary-color);
  color: var(--text-color-dark);
  margin: 0;
  padding: 0;
}

/* Titres avec Anton */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', sans-serif;
  color: var(--text-color-dark);
  margin-bottom: 1rem;
}

/* Liens */
a {
  color: var(--text-color-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.main-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Logo */
.logo img {
  max-width: 200px;
  height: auto;
  display: inline-block;
}

/* Menu */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Liens menu */
.nav-links a {
  color: var(--text-color-light);
  font-weight: bold;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* Bouton burger (caché desktop) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-color-light);
  cursor: pointer;
}

/* Accessible hidden text for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Responsive : sur petits écrans */
@media (max-width: 992px) {
  .nav-links {
    display: none; /* cache le menu */
    flex-direction: column;
    width: 100%;
    background-color: var(--primary-color);
    text-align: center;
  }

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

  .menu-toggle {
    display: block;
  }
}


/* Boutons */
.btn-primary {
  background-color: #393837;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-width: 140px;
  text-align: center;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #EDE5DE;
  color: #393837;
  border: 2px solid #393837; /* bordure ajoutée au hover */
}
.btn-secondary {
  background-color: transparent;
  border: 2px solid #393837;
  color: #393837;
  padding: 12px 28px;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  min-width: 140px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #393837;
  color: #EDE5DE;
  border-color: #393837;
}


/* Hero Banner */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 60px;
  background-color: var(--primary-color);
  color: var(--text-color-dark);
  flex-wrap: wrap;
  gap: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: auto; /* s'adapte au contenu */
}

.hero-content {
  flex: 1 1 450px;
  max-width: 650px;
  padding-right: 40px;
  box-sizing: border-box;
  text-align: left; /* texte aligné à gauche */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content h1 {
  font-family: 'Anton', sans-serif;
  color: var(--text-color-dark);
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 2px;
}

.hero-content p {
  max-width: 620px;   /* un peu plus large */
  font-size: 10px;
  line-height: 1.6;
  margin: 0;
}


body {
  background-color: #f6ede7;
  margin: 0;
}

header {
  background-color: #f6ede7;
  padding-top: 50px;
  width: 100%;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  z-index: 1000;
  height: 80px;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 10px;
}

.logo {
  position: absolute;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: auto;
}


    .nav-bar {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border-radius: 50px;
  padding: 12px 30px;
  display: flex;
  gap: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* OMBRE PLUS MARQUÉE */
}


     .nav-bar > ul {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       gap: 25px;
       align-items: center;
     }

     .nav-bar > ul > li {
       position: relative;
     }

     .nav-bar > ul > li > a {
       text-decoration: none;
       color: #000;
       font-size: 16px;
       font-weight: 500;
       background: none;
       border: none;
       cursor: pointer;
       padding: 5px 10px;
       display: inline-block;
     }

     /* Menu déroulant sous "Nos services" */
     .nav-bar ul li ul.dropdown {
       position: absolute;
       top: 100%; /* en dessous */
       left: 50%;
       transform: translateX(-50%);
       background: #fff;
       box-shadow: 0 2px 8px rgba(0,0,0,0.15);
       border-radius: 15px;
       padding: 10px 20px;
       min-width: 180px;
       list-style: none;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease;
       z-index: 2000;
     }

     .nav-bar ul li:hover ul.dropdown {
       opacity: 1;
       visibility: visible;
     }

     .nav-bar ul li ul.dropdown li {
       margin: 0;
       padding: 0;
     }

     .nav-bar ul li ul.dropdown li a {
       display: block;
       padding: 8px 10px;
       color: #000;
       font-weight: 400;
       font-size: 15px;
       text-decoration: none;
       white-space: nowrap;
     }

     .nav-bar ul li ul.dropdown li a:hover {
       background-color: #f0f0f0;
       border-radius: 10px;
     }

     /* Hero */
     .hero {
       position: relative;
       background-color: #f6ede7;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       padding: 40px 20px 60px;
       text-align: center;
       width: 100%;
       margin: 0;
       min-height: 700px;
     }

     .hero-content {
       max-width: 1000px;
       z-index: 2;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
     }

     .hero-buttons.top-buttons {
       display: flex;
       gap: 15px;
       justify-content: center;
       flex-wrap: nowrap;
       flex-direction: row;
       flex-shrink: 0;
       margin-bottom: 30px;
     }

     .hero-buttons a {
    background-color: #393837;
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    min-width: 200px;
    text-align: center;
    font-size: 1.1rem;
    border: 2px solid transparent;
}


     .hero-buttons a:hover {
       background-color: transparent;
       color: #393837;
       border: 2px solid #393837;
     }

     .hero-buttons.bottom-button {
       margin-top: 10px; /* bouton en bas du hero */
     }

     .hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin: 40px 0 0; /* Ajoute de l’espace au-dessus */
    line-height: 1;
}

     

     .hero h1 span {
       font-size: 5rem;
       font-weight: 900;
       display: block;
       text-transform: uppercase;
       margin-top: 10px;
     }

     .hero p {
       font-size: 1.3rem;
       color: #333;
       margin: 20px 0;
     }

     .floating-mascotte {
       position: absolute;
       right: -100px;
       bottom: -3px;
       width: 600px;
       max-width: 100%;
       opacity: 1;
       z-index: 10;
       pointer-events: none;
       transition: opacity 0.3s ease;
     }

     .floating-mascotte img {
       width: 100%;
       height: auto;
     }

     .mouse-scroll {
       width: 30px;
       height: 50px;
       border: 2px solid #000;
       border-radius: 20px;
       position: relative;
       margin: 35px auto 0; /* un peu plus espacé */
     }

     .mouse-scroll::before {
       content: '';
       position: absolute;
       top: 10px;
       left: 50%;
       transform: translateX(-50%);
       width: 6px;
       height: 6px;
       background-color: #000;
       border-radius: 50%;
       animation: scrollAnim 2s infinite;
     }

     @keyframes scrollAnim {
       0% { transform: translate(-50%, 0); opacity: 1; }
       50% { transform: translate(-50%, 10px); opacity: 0.5; }
       100% { transform: translate(-50%, 0); opacity: 1; }
     }


.services-section {
  background-color: #F7EEE7;
  padding: 60px 20px;
  font-family: 'Georgia', serif;
  color: #222;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 50px;
  color: #393837;
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center; /*  centre les cartes horizontalement */
}

.service-card {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: #ffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* <-- Ajouté pour centrer le texte */
  transition: transform 0.3s ease;
  flex: 1 1 22%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-icon {
  font-size: 3rem;
  color: #393837;
  margin-bottom: 18px;
  transition: transform 0.3s ease;
}

.service-card:hover .service-icon,
.service-card:focus .service-icon {
  transform: scale(1.2) rotate(10deg);
  color: #2c2b28;
}

.service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.service-card:hover h3,
.service-card:focus h3 {
  color: #1e1d1a;
}

.service-card p {
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
  transition: color 0.3s ease;
}
.cards-container {
  margin-bottom: 1rem; /* réduit l'espace sous les cartes */
}


.service-card:hover p,
.service-card:focus p {
  color: #3b3a37;
}

.service-link {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  color: #393837;
  text-decoration: none;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-bottom: 2px solid transparent;
}

.service-card:hover .service-link,
.service-card:focus .service-link {
  opacity: 1;
  transform: translateY(0);
  border-bottom: 2px solid #393837;
}

.service-link:hover {
  color: #1e1d1a;
}
/* Appliquer le beige clair à toutes les sections */
section {
  background-color: #F7EEE7; /* beige clair */
  padding: 60px 20px;
}


/* Responsive tweaks */
@media (max-width: 480px) {
  .section-title {
    font-size: 2rem;
  }

  .service-card {
    padding: 18px 12px;
  }

  .service-icon {
    font-size: 2.6rem;
  }
}
/* Filigrane uniquement derrière le titre */
.services-section .section-title {
  position: relative;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* Pour rester au-dessus du filigrane */
}

.services-section .section-title::before {
  content: "NOS SERVICES"; /* Texte du filigrane */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7rem; /* Taille plus grande pour effet de fond */
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05); /* Couleur très claire pour effet filigrane */
  z-index: 1; /* Derrière le texte */
  pointer-events: none; /* Pour ne pas gêner la sélection du texte */
  white-space: nowrap;
}


  .hero-button {
  background-color: #393837;
  color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 1rem;
  display: inline-block;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.service-card:hover .hero-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-button:hover {
  background-color: transparent;
  color: #393837;
  border: 2px solid #393837;
}

.service-button-wrapper {
  text-align: center;
  margin-top: 20px;
}
.service-card:hover,
.service-card:focus {
  animation: bounce 0.6s ease forwards;
}
.services-section {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.services-section.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.section-subtitle {
  font-size: 1.2rem;
  color: #444;
  margin-top: -1rem; /* Valeur plus forte pour remonter visiblement */
  margin-bottom: 2rem;
  text-align: center;
  display: block;
}
.services-cta-button {
  text-align: center;
  margin-top: 3rem;
}

/* Bouton en bas de la section Services */
.service-bottom-button-wrapper {
  margin-top: 1.5rem; /* ou 2rem selon le rendu souhaité */
  text-align: center; /* centre le bouton */
}

.btn {
  background-color: #393837;
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  min-width: 200px;
  text-align: center;
  font-size: 1.1rem;
  border: 2px solid transparent;
  margin: 0.5rem auto 0;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #555;
  border-color: #fff;
}


/* section actualité */
.actualites {
  padding: 60px 20px;
  background-color: #ffff;
  font-family: 'Helvetica Neue', sans-serif;
  text-align: center;
  color: #222;
}

.actualites h2 {
  position: relative; /* Permet au pseudo-élément d'être relatif au titre */
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 50px;
  color: #393837;
  overflow: visible; /* le filigrane ne sera pas coupé */
}

.actualites h2::before {
  content: "NOS DERNIÈRES ACTUALITÉS"; /* Texte du filigrane */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centré */
  font-size: 7rem; /* Taille adaptée pour ne pas casser la section */
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05); /* Filigrane discret */
  z-index: 0; /* Derrière le texte */
  pointer-events: none; /* Ne gêne pas la sélection du texte */
  white-space: nowrap;
}

/* Grid des cartes */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 0rem !important; /* Force à zéro */
  padding-bottom: 0 !important;
}

.card {
  background-color: #F7EEE7;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.category {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #F7EEE7;
  margin-bottom: 8px;
  display: block;
}

.title {
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: #000;
}

.excerpt {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 16px;
}

.author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #666;
}

.author img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

/* Bouton*/
 .btn-wrapper {
  margin-top: 1.5rem; /* ou 2rem selon le rendu souhaité */
}

.btn {
  background-color: #393837;
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  min-width: 200px;
  text-align: center;
  font-size: 1.1rem;
  border: 2px solid transparent;
  margin: 0.5rem auto 0; /* remonte le bouton */
  display: inline-block;
  transition: all 0.3s ease;
}

/* Hover du bouton */
.btn:hover {
  background-color: transparent;
  color: #393837;
  border: 2px solid #393837;
}

.animate-section {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.animate-section.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Section globale */
.avis-client-timeline {
    padding: 40px 20px;
    background: #F6EDE7;
    text-align: center;
}

.avis-titre-global {
    font-size: 2rem;
    margin-bottom: 30px;
}

/* Wrapper des cartes */
.timeline-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* masque uniquement les cartes */
}

/* Track des cartes */
.timeline-track {
    display: flex;
    transition: transform 0.3s ease;
    cursor: grab;
    will-change: transform; /* optimise la fluidité */
}

/* Carte avis */
.timeline-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible; /* IMPORTANT : laisse les cartes dépasser */
    padding: 20px 0; /* espace pour hover */
}

.avis-card {
    flex: 0 0 auto;
    width: calc((100% / 3) - 20px);
    margin: 0 10px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Hover subtil et raffiné, cartes jamais coupées */
.avis-card:hover {
    transform: scale(1.07); /* zoom léger seulement */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* ombre plus douce et élégante */
    z-index: 10; /* carte au-dessus des autres */
}


.avis-client-timeline h2 {
  position: relative; /* Permet au pseudo-élément d'être relatif au titre */
  text-align: center;
  font-size: 2.5rem; /* légèrement plus petit que pour actualités */
  font-weight: 900;
  margin-bottom: 50px;
  color: #393837;
  overflow: visible; /* le filigrane ne sera pas coupé */
}

.avis-client-timeline h2::before {
  content: "AVIS DE NOS CLIENTS"; /* Texte du filigrane */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centré */
  font-size: 6rem; /* taille adaptée à la section */
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05); /* filigrane discret */
  z-index: 0; /* derrière le texte */
  pointer-events: none; /* ne gêne pas la sélection du texte */
  white-space: nowrap;
}


/* Image client */
.avis-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #eee;
}

/* Nom et étoiles */
.avis-nom {
    font-weight: bold;
    margin-bottom: 8px;
}

.avis-etoiles {
    margin-bottom: 12px;
}

.star {
    font-size: 1.2rem;
    color: #f4b400;
}

.avis-commentaire {
    font-style: italic;
    color: #555;
    font-size: 0.9rem;
    max-width: 90%;
}

/* Timeline en dehors du overflow */
.timeline-bar-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 30px auto 60px auto; /* espace sous les cartes */
    z-index: 10; /* au-dessus de tout */
}

.timeline-bar {
    position: relative;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}

.timeline-handle {
    position: absolute;
    top: 50%; /* centré verticalement */
    transform: translateY(-50%);
    left: 0;
    width: 24px;
    height: 24px;
    background: #393837;
    border-radius: 50%;
    cursor: grab;
    z-index: 100; /* toujours au-dessus */
    transition: left 0.2s ease;
}
.timeline-track {
    display: flex;
    cursor: grab;
    will-change: transform;
    /* transition seulement hors drag pour fluidité */
    transition: transform 0.35s ease-out;
}


/* Responsive */
@media (max-width: 1024px) {
    .avis-card { width: calc((100% / 2) - 20px); } /* 2 cartes visibles */
}

@media (max-width: 768px) {
    .avis-card { width: calc(100% - 20px); } /* 1 carte visible */
}


/* Section Google Maps pleine largeur */
#localisation {
  width: 100%; /* prend toute la largeur de l'écran */
  padding: 4rem 1rem; /* espace autour du contenu */
  text-align: center;
  position: relative;
  background-color: #FFFFFF; /* fond blanc */
}

#localisation .container {
  max-width: 1200px; /* largeur maximale pour le contenu */
  margin: 0 auto; /* centre le contenu */
}

#localisation h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative; /* pour le filigrane */
  z-index: 2; /* titre devant le filigrane */
  overflow: visible;
  text-align: center;
}

#localisation h2::before {
  content: "OU NOUS TROUVER"; /* texte du filigrane */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05);
  z-index: 1; /* derrière le titre */
  pointer-events: none;
  white-space: nowrap;
}

#localisation iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* === Séparateur animé (défilement de code) === */
.code-marquee {
  width: 100vw;
  overflow: hidden;
  background: #393837;
  padding: 5px 0;
  color: #f6ede7;
  font-family: monospace;
  border-top: 2px solid #f6ede7;
  border-bottom: 2px solid #f6ede7;
  position: relative;
  margin-bottom: 30px; 
  margin-left: calc(-50vw + 50%);

}

.code-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-code 60s linear infinite;
}

.code-track code {
  display: inline-block;
  margin-right: 50px;
  font-size: 0.95rem;
  color: #f6ede7;
}

@keyframes scroll-code {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


/*Footer*/

#footer {
  background-color: #f6ede7;
  padding: 30px 20px 15px;
  font-family: Arial, sans-serif;
  color: #393837;
  text-align: left;
  justify-content: flex-start;
  margin-left: 0;
  padding-left: 20px;
}

.footer-main {
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start; 
  flex-wrap: nowrap;
  max-width: 1200px;
  margin-left: 0;
  margin-right: auto;
  gap: 20px;
}
/* Branding (logo + nom + slogan) */
.footer-branding {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
  justify-content: flex-start; /* décale le contenu à gauche */
  margin-left: 20px; /* espace optionnel depuis le bord gauche */
}

.footer-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.footer-title-slogan h3 {
  margin: 0;
  font-size: 1.2rem;
}

.footer-title-slogan p {
  margin: 0;
  font-size: 0.9rem;
  color: #393837;
}
/* Réseaux sociaux */
.footer-socials {
  display: flex;
  flex-direction: column; 
  justify-content: center;   /* centre verticalement son contenu */
  align-items: center;       /* centre horizontalement son contenu */
  gap: 10px;
  flex: 1;
  min-width: 150px;
  margin: 0 auto 50px auto;  /* centré + marge en bas */
  text-align: center;
}

.footer-socials a {
  text-decoration: none;
  color: #393837;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-socials a:hover {
  color: #000; /* petit contraste au hover */
}


/* Liens utiles */
.footer-nav {
  display: flex;
  flex-direction: column;   /* liens les uns en dessous des autres */
  align-items: flex-end;    /* alignés à droite */
  gap: 12px;                /* espace entre les liens */
  margin-left: 100px;       /* pousse le bloc tout à droite */
  margin-top: 20px;
   justify-content: left;
  
}

.footer-nav a {
  color: #393837;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  transition: color 0.3s ease;
  text-align: right; /* le texte aussi est calé à droite */
}

/* Effet soulignement animé au hover */
.footer-nav a::after {
  content: "";
  position: absolute;
  right: 0;                 /* soulignement part de la droite */
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #393837;
  transition: width 0.3s ease;
}


.footer-nav a:hover {
  color: #000;
}

.footer-nav a:hover::after {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-nav {
    align-items: center;  /* en mobile, on recentre */
  }
  .footer-nav a {
    text-align: center;
    font-size: 14px;
  }
}

/* Logo partners */
.footer-partners-marquee {
  overflow: hidden;
  width: 100%; /* pleine largeur écran */
  background-color: #f6ede7;
  padding: 20px ;
  
}

.logos-track {
  display: flex;
  gap: 80px;
  animation: scroll-logos 25s linear infinite;
}

.logos-track a {
  flex: 0 0 auto;
}

.logos-track a img {
  max-height: 80px; /* taille logos */
  transition: transform 0.3s ease;
}

.logos-track a img:hover {
  transform: scale(1.1);
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* décale seulement la moitié (car liste doublée) */
  }
}

/* Copyright */
.footer-legal {
  text-align: center;
  margin-top: 25px;
  font-size: 0.9rem;
  color: #393837;
  padding-top: 0,5rem;
}






/* === Styles pour archive et single Réalisations === */
.realisations-archive .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.realisations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.real-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.real-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.real-img {
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.real-card:hover .real-img {
  transform: scale(1.05);
}

.real-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  transition: background 0.3s ease;
}

.real-card:hover .real-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.real-overlay h3 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: bold;
}

.real-cat {
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
  opacity: 0.8;
}

.pagination {
  text-align: center;
  margin-top: 40px;
}


/* Forcer la couleur du bouton WPForms sur la page Contact */
.page-contact .wpforms-container .wpforms-form button.wpforms-submit {
    background-color: #393837 !important; /* Remplace par ta couleur "crise" */
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.page-contact .wpforms-container .wpforms-form button.wpforms-submit:hover {
    background-color: #393837 !important; /* Couleur au survol */
}
/* --- Grille Masonry centrée --- */
.blog-grid {
    max-width: 1200px; /* largeur maximale de la grille */
    margin: 80px auto 0 auto; /* marge en haut pour espacer du header */
    column-count: 3;
    column-gap: 30px;
}

/* --- Cartes --- */
.blog-card {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

/* --- Image mise en avant --- */
.card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
}

/* --- Contenu --- */
.card-content {
    padding: 25px;
}

.post-date {
    font-size: 0.85rem;
    color: #393837;
    display: block;
    margin-bottom: 10px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.blog-card:hover .card-title {
    color: #393837;
}

.card-excerpt {
    font-size: 1rem;
    color: #393837;
    margin-bottom: 20px;
    line-height: 1.5;
}

.card-readmore {
    font-weight: 600;
    color: #393837;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-readmore:hover {
    color: #393837;
}

/* --- Centrer les cartes si peu d’articles --- */
.blog-grid::after {
    content: '';
    display: block;
    clear: both;
}

/* --- Responsive Masonry --- */
@media (max-width: 1024px) {
    .blog-grid { 
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .blog-grid { 
        column-count: 1;
    }
}
.single-hero-banner {
    position: relative;
    height: 50vh; /* un peu plus grand */
    min-height: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
    border-radius: 0; /* plus d’arrondi, rectangle normal */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin: 0;
}

/* Section Titre et Texte */
.about-section {
  background-color: #FFFFFF; /* beige chaud */
  padding: 10rem 2rem 5rem; /* espace conséquent au-dessus et en dessous */
  text-align: center;
  margin-top: -5rem;
}

.about-section h2 {
  font-size: 3rem; /* titre large */
  font-weight: 700;
  margin-bottom: 2rem;
  color: #393837; /* gris foncé pour contraste */
}

.about-section p {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #374151; /* gris moyen */
  max-width: auto;
  margin: 0 auto 2.5rem; /* centré et espace sous le texte */
}

.about-section .btn-primary {
  display: inline-block;
  background-color: #393837; /* couleur initiale */
  color: #ffffff; /* texte blanc */
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px; /* arrondi complet */
  border: 2px solid #393837; /* même couleur que le fond pour le hover */
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-section .btn-primary:hover {
  background-color: transparent; /* fond transparent */
  color: #393837; /* texte de la couleur du bouton initial */
  border: 2px solid #393837; /* bordure visible */
}

/* ==============================
      PAGE LOADER
   ============================== */
   #page-loader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: #EEE5DE; /* Couleur de fond personnalisée */
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       transition: opacity 0.5s ease;
   }

   #page-loader.hidden {
       opacity: 0;
       pointer-events: none;
   }

   /* Logo centré et animé (zoom smooth avec fade-in) */
   .loader-logo img {
       width: 200px; /* Taille agrandie */
       height: auto;
       opacity: 0;
       animation: fadeZoom 5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
   }
   @keyframes fadeZoom {
       0%   { transform: scale(0.8); opacity: 0; }
       10%  { opacity: 1; }      /* fade-in initial */
       50%  { transform: scale(1.2); opacity: 1; }
       100% { transform: scale(0.8); opacity: 1; }
   }
   

   /* ===== MENU RESPONSIVE ===== */
.mobile-nav,
.menu-toggle {
  display: none;
}

/* Menu desktop visible par défaut */
.desktop-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  align-items: center;
}

.desktop-nav a {
  text-decoration: none;
  color: #393837;
  font-weight: 600;
}

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

/* Tablettes : max-width 1024px */
@media (max-width: 1024px) {
  /* Hero */
  .hero {
    flex-direction: column;
    padding: 60px 20px;
    min-height: auto;
    text-align: center;
  }

  .hero-content {
    padding: 0;
    max-width: 100%;
    align-items: center;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero h1 span {
    font-size: 3.5rem;
  }

  .floating-mascotte {
    width: 400px;
    right: -50px;
    bottom: -20px;
  }

  /* Services */
  .services-grid {
    flex-direction: column;
    gap: 20px;
  }

  .service-card {
    max-width: 100%;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  /* Actualités */
  .cards-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Avis clients */
  .avis-card {
    width: calc(50% - 20px);
  }
}

/* Petits tablettes / grands mobiles : max-width 768px */
@media (max-width: 768px) {
  /* Header */
  header {
    height: auto;
    padding: 20px 10px;
  }

  .logo {
    position: relative;
    left: 0;
    margin-bottom: 15px;
  }

  .nav-bar {
    position: relative;
    right: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    padding: 15px;
  }

  .nav-bar ul {
    flex-direction: column;
    gap: 15px;
  }

  /* Hero */
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero h1 span {
    font-size: 3rem;
  }

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

  .floating-mascotte {
    width: 300px;
    right: -20px;
    bottom: -10px;
  }

  /* Services */
  .service-card {
    width: 100%;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  /* Avis clients */
  .avis-card {
    width: 100%;
  }

  /* Footer */
  .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-branding,
  .footer-socials,
  .footer-nav {
    margin: 0 0 20px 0;
    text-align: center;
    justify-content: center;
  }

  .footer-nav a {
    text-align: center;
  }
}

/* Mobiles : max-width 480px */
@media (max-width: 480px) {
  /* Hero */
  .hero h1 {
    font-size: 2rem;
  }

  .hero h1 span {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .hero-buttons a {
    font-size: 0.95rem;
    padding: 10px 25px;
    min-width: 140px;
  }

  .floating-mascotte {
    width: 200px;
    right: -10px;
    bottom: -5px;
  }

  /* Services */
  .section-title {
    font-size: 1.8rem;
  }

  .services-grid {
    gap: 15px;
  }

  /* Actualités */
  .cards-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* Footer */
  #footer {
    padding: 20px 10px;
  }

  .footer-socials {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer-nav {
    margin-left: 0;
  }

  .footer-partners-marquee {
    padding: 10px;
  }

  .logos-track {
    gap: 40px;
  }
}

/* Ajustement Masonry blog grid */
@media (max-width: 1024px) {
  .blog-grid { column-count: 2; }
}

@media (max-width: 600px) {
  .blog-grid { column-count: 1; }
}

/* --- Header global --- */
header {
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Logo --- */
.logo {
  height: auto;
  width: auto;
  max-height: 70px;
  object-fit: contain;
  flex-shrink: 0; /* empêche le logo d'être écrasé */
  transition: all 0.3s ease;
}

/* --- Menu Desktop --- */
.desktop-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 25px;
}

.desktop-menu a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  transition: color 0.3s;
}

.desktop-menu a:hover {
  color: #c9a35b;
}

/* --- Menu Burger Mobile --- */
.mobile-menu-icon {
  display: none;
  font-size: 1.9rem;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  color: #000;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 260px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  padding: 80px 30px;
  transition: right 0.3s ease-in-out;
  z-index: 1000;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  margin: 25px 0;
}

.mobile-menu a {
  text-decoration: none;
  color: #000;
  font-size: 1.1rem;
  font-weight: 500;
}

/* --- Effet icône burger ouverte --- */
.mobile-menu-icon.open i::before {
  content: "\f00d"; /* icône "X" (Font Awesome) */
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
  .desktop-menu {
    display: none; /* Cache le menu desktop sur mobile */
  }

  .mobile-menu-icon {
    display: block; /* Affiche le burger */
  }

  .header-container {
    justify-content: flex-start;
    align-items: flex-start; /* Descend légèrement les éléments dans le header */
    padding-top: 25px; /* Espace ajouté au-dessus du logo */
  }

  /* Logo légèrement agrandi et descendu sur mobile */
  .logo {
    max-height: 80px;
    margin-top: 8px; /* Descend un peu le logo */
  }
}

/* --- Hero banner : cacher les 4 liens sur mobile --- */
@media screen and (max-width: 768px) {
  .hero-buttons.top-buttons {
    display: none;
  }
}

/* --- FOOTER MOBILE ONLY --- */
@media screen and (max-width: 768px) {

  /* Container principal */
  .footer-main {
    flex-direction: column !important;
    align-items: center !important; /* Centrer tout le contenu */
    gap: 20px !important;
  }

  /* Branding : logo et texte */
  .footer-branding {
    flex-direction: column !important; /* Empiler logo et texte */
    align-items: center !important; /* Centrer logo et texte */
    gap: 10px !important;
    width: 100%;
  }

  .footer-logo {
    max-height: 70px !important;
    width: auto !important;
  }

  .footer-title-slogan h3 {
    font-size: 1.1rem !important;
    text-align: center !important;
  }

  .footer-title-slogan p {
    font-size: 0.9rem !important;
    text-align: center !important;
  }

  /* Réseaux sociaux empilés verticalement et centrés */
  .footer-socials {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 15px !important;
  }

  /* Menu de navigation empilé verticalement et centré */
  .footer-nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 15px !important;
  }

  /* Marquee et logos partenaires cachés */
  .code-marquee,
  .footer-partners-marquee {
    display: none !important;
  }

  /* Copyright */
  .footer-legal {
    font-size: 0.75rem !important;
    text-align: center !important;
    margin-top: 15px;
  }
}

/* --- HEADER --- */
header {
  position: relative;
  z-index: 1000;
  background: transparent; /* Fond transparent pour desktop */
}

/* --- NAV DESKTOP --- */
.nav-bar {
  display: flex;
  gap: 30px;
}

/* --- MENU BURGER MOBILE --- */
.menu-toggle {
  display: none; /* Caché en desktop */
}

/* --- MOBILE ONLY --- */
@media screen and (max-width: 768px) {
  header {
    background: #ffffff; /* Fond blanc seulement en mobile */
    padding: 10px 20px;
  }

  .nav-bar {
    display: none; /* Cacher menu desktop en mobile */
  }

  .menu-toggle {
    display: flex; /* Afficher le burger en mobile */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    cursor: pointer;
  }
}
/* Descendre légèrement le logo en mobile */
@media screen and (max-width: 768px) {
  header .logo {
    margin-top: 80px; /* Ajuste la valeur selon le rendu souhaité */
  }
}
/* Header mobile */
@media screen and (max-width: 768px) {
  header {
    background-color: #fff; /* fond blanc minimal */
    padding: 0 15px; /* padding horizontal standard */
    display: flex;
    align-items: center; /* aligne verticalement logo et burger */
    justify-content: space-between;
    height: 60px; /* hauteur fixe */
  }

  /* Logo légèrement plus grand et descendu */
  header .logo {
    height: 55px; /* taille légèrement agrandie */
    position: relative;
    top: 2px; /* descend légèrement */
  }

  /* Burger à droite */
  .burger-menu {
    position: relative;
    top: 0; /* centré verticalement */
    right: 0;
  }
}