/* ==========================================================================
   MTP TERRASSEMENT — Feuille de style principale
   --------------------------------------------------------------------------
   Sommaire :
   01. Variables (couleurs, typo, espacements)   -> pour changer la charte
   02. Base & reset
   03. Conteneurs & utilitaires
   04. En-tête + bouton Menu + Navigation
   05. Hero (accueil) et bandeaux de page
   06. Sections de contenu (titres, textes, listes)
   07. Cartes services / prestations
   08. Galerie photos + comparateur avant/après
   09. Avis clients
   10. Bloc d'appel (CTA) & formulaire de contact
   11. Pied de page
   12. Bandeau cookies
   13. Pages légales
   14. Animations (classes utilisées par animations.js)
   15. Responsive (tablette & mobile)
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES — modifier ici pour changer toute la charte du site
   ========================================================================== */
:root {
  /* Couleurs */
  --blanc: #ffffff;
  --noir: #000000;          /* menus, bandeaux, pied de page */
  --texte: #1c1c1c;         /* texte courant */
  --texte-clair: #5a5a5a;   /* texte secondaire */
  --jaune: #fbd542;         /* jaune repris du logo */
  --jaune-fonce: #e6be24;   /* survol des boutons jaunes */
  --gris: #f4f4f4;          /* fonds de section alternés */
  --filet: #e2e2e2;         /* traits et bordures fines */

  /* Typographie : condensée et lourde pour les titres (univers chantier),
     lecture classique pour le texte. Aucune police externe : pas de requête
     vers un serveur tiers (RGPD) et affichage immédiat. */
  --titre: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", Arial, sans-serif;
  --corps: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Mise en page */
  --largeur: 1180px;
  --gouttiere: 24px;
  --transition: 220ms ease;
}


/* ==========================================================================
   02. BASE & RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--texte); text-decoration: none; }
a:hover { color: #000; }

/* Accessibilité : contour visible au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}

/* Lien "aller au contenu" pour les lecteurs d'écran */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--noir); color: #fff; padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }


/* ==========================================================================
   03. CONTENEURS & UTILITAIRES
   ========================================================================== */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.section { padding: 76px 0; }
.section--gris { background: var(--gris); }
.section--noir { background: var(--noir); color: #fff; }
.section--noir h2, .section--noir h3 { color: #fff; }
.section--serre { padding: 52px 0; }

/* Grilles simples */
.grille { display: grid; gap: 28px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }

/* Boutons */
.bouton {
  display: inline-block;
  padding: 14px 26px;
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 2px solid var(--noir);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.bouton--noir { background: var(--noir); color: #fff; }
.bouton--noir:hover { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.bouton--jaune { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.bouton--jaune:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
.bouton--ligne { background: transparent; color: var(--noir); }
.bouton--ligne:hover { background: var(--noir); color: #fff; }
.bouton--blanc { background: #fff; border-color: #fff; color: var(--noir); }
.bouton--blanc:hover { background: var(--jaune); border-color: var(--jaune); }


/* ==========================================================================
   04. EN-TÊTE + BOUTON MENU + NAVIGATION
   ========================================================================== */

/* En-tête blanc, collant au défilement : logo à gauche, bouton Menu à droite */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--transition);
}
.entete.est-defile { box-shadow: 0 6px 20px rgba(0,0,0,.08); }

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
}
.logo img { height: 56px; width: auto; }

/* Bouton Menu (visible sur tous les écrans) — version compacte */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--noir);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--titre);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--transition);
}
.burger:hover { background: #2a2a2a; }
.burger__barres { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.burger__barres span {
  display: block;
  width: 18px; height: 2px;
  background: var(--jaune);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] .burger__barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barres span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panneau de navigation : s'ouvre sous le bouton Menu, à droite */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: min(380px, 100%);
  background: var(--noir);
  border-top: 4px solid var(--jaune);
  padding: 10px 0 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.nav.est-ouvert { display: block; }
.nav ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding: 14px var(--gouttiere);
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  border-bottom: 1px solid #1f1f1f;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--jaune); }
.nav__devis { margin: 16px var(--gouttiere) 0; }
.nav__devis a.bouton { display: block; text-align: center; color: var(--noir); border: 2px solid var(--jaune); }
.nav__devis a.bouton:hover { background: #fff; border-color: #fff; color: var(--noir); }


/* ==========================================================================
   05. HERO (accueil) ET BANDEAUX DE PAGE
   ========================================================================== */

/* Hero de la page d'accueil : photos qui défilent (ou vidéo) en fond, assombries,
   avec le logo centré, le titre et les deux boutons posés par-dessus. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  min-height: clamp(560px, 84vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 8px solid var(--jaune);
}
.hero__fond { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.est-actif { opacity: 1; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__video.est-pret { opacity: 1; }
/* Voile sombre : garde le texte blanc lisible quelle que soit la photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.62) 100%);
}
.hero__bloc {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  padding: 56px var(--gouttiere);
  text-align: center;
  color: #fff;
}
.hero__logo {
  width: min(500px, 80%);
  height: auto;
  margin: 0 auto 24px;
  /* liseré blanc fin + halo : détache le logo (lettres noires) du fond photo */
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 18px rgba(255,255,255,.55));
}
.hero__sous-titre {
  margin: 14px 0 0;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  text-transform: uppercase;
}

.hero__bloc h1 {
  font-family: var(--titre);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 30px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
/* « Terrassement » ressort en grand et en jaune, comme sur le logo */
.hero__mot-fort {
  display: block;
  font-size: clamp(40px, 7.5vw, 84px);
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--jaune);
}
/* « Aménagements extérieurs » en dessous, plus discret */
.hero__mot-second {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 2.8vw, 32px);
  letter-spacing: .1em;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

/* Bandeau des pages intérieures */
.bandeau {
  position: relative;      /* nécessaire pour positionner la photo de fond */
  overflow: hidden;        /* la photo ne déborde jamais du bandeau */
  background: var(--noir);
  color: #fff;
  padding: 54px 0 46px;
  border-bottom: 8px solid var(--jaune);
}
/* Photo de fond en transparence (à remplacer librement, voir le HTML) */
.bandeau__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
}
.bandeau h1 {
  font-family: var(--titre);
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.05;
  margin: 0 0 10px;
  color: #fff;
}
.bandeau p { margin: 0; color: #c9c9c9; max-width: 70ch; }

/* Fil d'Ariane */
.fil { font-size: 14px; color: #9a9a9a; margin: 0 0 16px; }
.fil a { color: #9a9a9a; }
.fil a:hover { color: var(--jaune); }


/* ==========================================================================
   06. SECTIONS DE CONTENU
   ========================================================================== */
h2 {
  font-family: var(--titre);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--noir);
}
h3 {
  font-family: var(--titre);
  font-size: 23px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--noir);
}
p { margin: 0 0 18px; max-width: 72ch; }

/* Trait jaune sous un titre de section */
.titre-trait { position: relative; padding-bottom: 16px; }
.titre-trait::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 5px;
  background: var(--jaune);
}
.section--noir .titre-trait::after { background: var(--jaune); }

.intro { font-size: 19px; color: var(--texte-clair); max-width: 68ch; }

/* Liste de prestations à puces jaunes */
.liste-check { list-style: none; margin: 0 0 22px; padding: 0; }
.liste-check li {
  position: relative;
  padding: 8px 0 8px 30px;
  border-bottom: 1px solid var(--filet);
}
.liste-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 12px; height: 12px;
  background: var(--jaune);
}
.section--noir .liste-check li { border-bottom-color: #2a2a2a; }

/* Bloc texte + image côte à côte */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.duo--inverse .duo__texte { order: 2; }


/* ==========================================================================
   07. CARTES SERVICES / PRESTATIONS
   ========================================================================== */
.carte {
  background: #fff;
  border: 1px solid var(--filet);
  border-top: 5px solid var(--noir);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  transition: border-top-color var(--transition), transform var(--transition);
}
.carte:hover { border-top-color: var(--jaune); }
.carte h3 {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.carte__icone {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--noir);
}
.carte:hover .carte__icone { color: var(--jaune-fonce); }
.carte p { font-size: 16px; color: var(--texte-clair); flex: 1; margin-bottom: 18px; }
.carte__lien {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  border-bottom: 3px solid var(--jaune);
  align-self: flex-start;
  padding-bottom: 2px;
}
.carte__lien:hover { border-bottom-color: var(--noir); }

/* Chiffres clés / points forts */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--filet); }
.atouts > div { padding: 30px 26px; border-right: 1px solid var(--filet); }
.atouts > div:last-child { border-right: 0; }
.atouts strong {
  display: block;
  font-family: var(--titre);
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
}
.atouts span { color: var(--texte-clair); font-size: 16px; }

/* Cartes de prestation avec photo de fond (accueil) */
.carte--photo {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  justify-content: flex-end;
  background: var(--noir);
  border-color: var(--noir);
}
.carte__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 600ms ease;
}
.carte--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.9) 100%);
}
.carte--photo > *:not(.carte__fond) { position: relative; z-index: 2; }
.carte--photo h3,
.carte--photo .carte__icone { color: #fff; }
.carte--photo p { flex: 0 0 auto; color: #e8e8e8; }
.carte--photo .carte__lien { color: #fff; }
.carte--photo:hover .carte__fond { transform: scale(1.06); }
.carte--photo:hover .carte__icone { color: var(--jaune); }

/* Carte « Un autre besoin ? » : jaune pour fermer la grille */
.carte--jaune { background: var(--jaune); border-color: var(--jaune); border-top-color: var(--noir); justify-content: flex-end; min-height: 340px; }
.carte--jaune p { color: var(--noir); flex: 0 0 auto; }
.carte--jaune:hover .carte__icone { color: var(--noir); }
.carte--jaune .carte__lien { border-bottom-color: var(--noir); }

/* Petites icônes des cases du bas (secteur, note, délai) */
.atouts .atouts__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  background: transparent;
  color: var(--jaune);
}
.atouts__icone svg { width: 28px; height: 28px; }


/* ==========================================================================
   08. GALERIE PHOTOS + COMPARATEUR AVANT/APRÈS
   ========================================================================== */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galerie figure { margin: 0; }
.galerie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  filter: grayscale(12%);
  transition: filter var(--transition);
}
.galerie img:hover { filter: grayscale(0); }
.galerie figcaption { font-size: 14px; color: var(--texte-clair); padding-top: 8px; }

/* Comparateur avant/après (piloté par animations.js)
   La photo "après" est la photo de fond ; la photo "avant" est posée par-dessus
   et rognée par clip-path selon la position du curseur. */
.comparateur {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  border: 1px solid var(--filet);
  cursor: ew-resize;
}
.comparateur img { width: 100%; display: block; }
.comparateur__calque {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);   /* valeur modifiée en direct par le script */
}
.comparateur__calque img { width: 100%; height: 100%; object-fit: cover; }
.comparateur__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--jaune);
  transform: translateX(-2px);
  cursor: ew-resize;
}
.comparateur__poignee::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--jaune);
  border: 3px solid #fff;
  border-radius: 50%;
}
.comparateur__etiquette {
  position: absolute;
  bottom: 12px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 13px;
  padding: 5px 12px;
}
.comparateur__etiquette--avant { left: 12px; }
.comparateur__etiquette--apres { right: 12px; }


/* ==========================================================================
   09. AVIS CLIENTS
   ========================================================================== */
.avis {
  background: #fff;
  border: 1px solid var(--filet);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.avis__etoiles { color: var(--jaune); font-size: 20px; letter-spacing: 3px; margin-bottom: 12px; }
.avis blockquote { margin: 0 0 18px; font-size: 16px; color: var(--texte); flex: 1; }
.avis__auteur { font-family: var(--titre); font-weight: 700; font-size: 18px; }
.avis__source { font-size: 14px; color: var(--texte-clair); }


/* ==========================================================================
   10. BLOC D'APPEL (CTA) & FORMULAIRE DE CONTACT
   ========================================================================== */
.cta {
  background: var(--jaune);
  padding: 46px 0;
}
.cta .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0; max-width: 60ch; }

/* Formulaire */
.formulaire { display: grid; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-family: var(--titre); font-weight: 700; font-size: 17px; }
.champ input,
.champ select,
.champ textarea {
  font-family: var(--corps);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #c8c8c8;
  background: #fff;
  color: var(--texte);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--noir); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ--rgpd { flex-direction: row; align-items: flex-start; gap: 10px; }
.champ--rgpd label { font-family: var(--corps); font-weight: 400; font-size: 14px; color: var(--texte-clair); }
.formulaire__message { padding: 14px 16px; border-left: 5px solid var(--jaune); background: var(--gris); font-size: 15px; }
/* Champ anti-spam invisible pour les humains */
.pot-de-miel { position: absolute; left: -9999px; }

/* Les colonnes de grille peuvent rétrécir (évite le débordement sur mobile) */
.grille > * { min-width: 0; }
.champ input,
.champ select,
.champ textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Plan d'accès : s'adapte à la largeur de l'écran */
.plan-acces { margin-top: 24px; }
.plan-acces iframe { display: block; width: 100%; max-width: 100%; height: 380px; border: 0; }
@media (max-width: 760px) {
  .plan-acces iframe { height: 300px; }
}

/* Encadré coordonnées */
.coordonnees { border: 1px solid var(--filet); border-top: 5px solid var(--jaune); padding: 28px 26px; }
.coordonnees dl { margin: 0; }
.coordonnees dt { font-family: var(--titre); font-weight: 700; font-size: 17px; margin-top: 16px; }
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd { margin: 2px 0 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .coordonnees { padding: 22px 18px; } }


/* ==========================================================================
   11. PIED DE PAGE
   ========================================================================== */
.pied {
  background: var(--noir);
  color: #c4c4c4;
  padding: 58px 0 0;
  font-size: 15px;
}
.pied a { color: #c4c4c4; }
.pied a:hover { color: var(--jaune); }
.pied h3 { color: #fff; font-size: 19px; margin-bottom: 14px; }
.pied__grille { display: block; max-width: 480px; padding-bottom: 44px; }
.pied__logo { background: #fff; padding: 12px; display: inline-block; margin-bottom: 16px; }
.pied__logo img { height: 66px; width: auto; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 4px 0; }
.pied__bas {
  border-top: 1px solid #262626;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #8f8f8f;
}
.pied__signature { color: #8f8f8f; }
.pied__signature strong { color: var(--jaune); font-weight: 700; }
/* ==========================================================================
   AJUSTEMENT GRILLE PIED DE PAGE & FACEBOOK
   ========================================================================== */
.pied__grille {
  display: flex !important; /* Force le mode Flexbox pour aligner côte à côte */
  justify-content: space-between; /* Pousse le texte à gauche et Facebook tout à droite */
  align-items: flex-start;
  gap: 40px;
  max-width: none !important; /* Supprime la limite des 480px pour occuper l'espace */
  padding-bottom: 44px;
}

.pied__grille > div:first-child {
  max-width: 600px; /* Évite que le texte de présentation ne s'étale trop */
}

.pied__reseaux {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.pied__reseaux h3 { margin-bottom: 0; }

.lien-facebook {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c4c4c4;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 16px;
  transition: color var(--transition);
}

.icone-fb {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform var(--transition);
}

.lien-facebook:hover {
  color: var(--jaune) !important;
}

.lien-facebook:hover .icone-fb {
  transform: scale(1.1);
}

/* Version mobile : les blocs se réempilent proprement */
@media (max-width: 760px) {
  .pied__grille {
    flex-direction: column;
    gap: 24px;
  }
}


/* ==========================================================================
   12. BANDEAU COOKIES (piloté par cookies.js)
   ========================================================================== */
.cookies {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 200;
  width: min(430px, calc(100% - 40px));
  background: #fff;
  border: 2px solid var(--noir);
  border-top: 8px solid var(--jaune);
  padding: 22px 24px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  display: none;              /* affiché par le script si aucun choix enregistré */
}
.cookies.est-visible { display: block; }
.cookies h2 { font-size: 22px; margin-bottom: 8px; }
.cookies p { font-size: 15px; margin-bottom: 16px; }
.cookies__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies__actions .bouton { padding: 10px 18px; font-size: 16px; }


/* ==========================================================================
   13. PAGES LÉGALES
   ========================================================================== */
.legal { max-width: 78ch; }
.legal h2 { font-size: 26px; margin-top: 40px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.legal th, .legal td { border: 1px solid var(--filet); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--gris); font-family: var(--titre); font-size: 17px; }
.a-completer { background: var(--jaune); padding: 1px 6px; }


/* ==========================================================================
   14. ANIMATIONS — classes ajoutées/retirées par animations.js
   ========================================================================== */
.js .apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js .apparition.est-visible { opacity: 1; transform: none; }

/* Respect du réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .apparition { opacity: 1; transform: none; }
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1020px) {
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .grille--2, .grille--3 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .galerie img { height: 240px; }
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .duo--inverse .duo__texte { order: 0; }
  .atouts { grid-template-columns: 1fr; }
  .atouts > div { border-right: 0; border-bottom: 1px solid var(--filet); }
  .atouts > div:last-child { border-bottom: 0; }


  .hero { min-height: 520px; }
  .hero__bloc { padding: 40px var(--gouttiere); }
  .logo img { height: 48px; }
  .entete .conteneur { min-height: 72px; }
  .carte--photo, .carte--jaune { min-height: 300px; }

  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .cta .conteneur { flex-direction: column; align-items: flex-start; }
  .cookies { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px 18px; }
  .photo-action { min-height: 160px; }
}


/* ==========================================================================
   16. DÉCOR ILLUSTRÉ (icônes de assets/img/decor.svg)
   --------------------------------------------------------------------------
   Calque d'icônes dispersées en fond de section (nuages, oiseaux, silhouette
   de ville, camion, arbres). Purement décoratif : aria-hidden, non cliquable,
   ne doit jamais gêner la lecture du texte placé par-dessus.
   Pour ajouter/déplacer une icône : dupliquer un bloc "decor__item" dans le
   HTML et ajuster --x/--y (position en %) et --taille (largeur en px).
   ========================================================================== */
.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.decor__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--taille, 60px);
  aspect-ratio: var(--ratio, 1);   /* évite toute déformation : une valeur par icône, voir HTML */
  height: auto;
  color: var(--couleur-decor, rgba(255,255,255,.1));
}

/* Sur fond noir (bandeaux, hero, CTA sombre) : traits blancs discrets */
.bandeau .decor,
.hero .decor { --couleur-decor: rgba(255,255,255,.12); }

/* Sur fond clair : traits noirs, un peu plus légers car l'œil y est plus sensible */
.section--gris .decor,
.section .decor { --couleur-decor: rgba(0,0,0,.07); }

/* Le contenu doit toujours passer au-dessus du décor / de la photo de fond */
.bandeau .conteneur { position: relative; z-index: 1; }


/* ==========================================================================
   17. GALERIE AVEC LÉGENDE SUPERPOSÉE (photo en fond, texte en transparence)
   --------------------------------------------------------------------------
   Variante de la galerie où la légende est écrite en blanc directement sur
   la photo, avec un dégradé sombre en bas pour garder le texte lisible.
   ========================================================================== */
.galerie--legende figure {
  position: relative;
  overflow: hidden;
}
.galerie--legende img {
  transition: transform 500ms ease, filter 500ms ease;
}
.galerie--legende figure:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}
.galerie--legende figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 16px;
  color: #fff;
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.galerie--legende figcaption span {
  display: block;
  font-family: var(--corps);
  font-weight: 400;
  font-size: 14px;
  color: #d8d8d8;
  margin-top: 3px;
}


/* ==========================================================================
   18. PHOTO AVEC BOUTON SUPERPOSÉ (photo en fond, dégradé, action au-dessus)
   --------------------------------------------------------------------------
   Utilisée pour la photo "camion + mini-pelle" de l'accueil : la photo reste
   visible, un dégradé sombre l'assombrit progressivement vers le bas pour
   que le bouton reste lisible quelle que soit la photo utilisée.
   Réutilisable ailleurs : il suffit de reprendre ce bloc avec une autre image.
   ========================================================================== */
.photo-action {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;  /* proportion par défaut (proche de contact.jpg) : la hauteur
                           suit désormais la largeur, donc plus de recadrage excessif
                           sur les côtés quand l'écran est étroit. Pour une photo dont
                           les proportions sont différentes, ajustez cette valeur en
                           ligne dans le HTML, ex. style="aspect-ratio:4/3" */
  min-height: 200px;    /* garde une hauteur plancher lisible même en cas de calcul très bas */
  display: flex;
  align-items: flex-end;
  background: var(--noir);   /* se voit par transparence à travers la photo */
}
.photo-action img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .28;               /* photo bien en transparence, posée sur le fond noir */
}
.photo-action::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dégradé complémentaire : accentue l'assombrissement vers le bas,
     là où se pose le bouton, par-dessus la transparence de la photo. */
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.65) 100%);
}
.photo-action__contenu {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 28px;
}
.photo-action .bouton { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
/* Variante utilisée pour une photo au format plus vertical (4/3) : on garde
   ce format sur mobile, mais on plafonne la hauteur sur grand écran pour que
   le bloc ne devienne pas énorme quand le conteneur s'élargit (la photo
   reste "cover", donc toujours bien cadrée). */
.photo-action--plafonnee { width: 100%; max-height: 420px; }
@media (max-width: 620px) {
  .photo-action--plafonnee { max-height: 320px; }
}
.photo-action__contenu p {
  color: #fff;
  font-family: var(--titre);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 46ch;
  margin: 0;
}


/* ==========================================================================
   19. BANDE ILLUSTRÉE (pelleteuse + camion, juste avant le bandeau jaune)
   --------------------------------------------------------------------------
   Rangée décorative posée sur une ligne de sol, avant chaque bloc d'appel à
   l'action jaune. Purement illustratif : aria-hidden, pas de texte dedans.
   Pour changer les icônes : voir assets/img/decor.svg (mêmes symboles que
   le décor discret des bandeaux).
   ========================================================================== */
.bande-illustree {
  background: var(--gris);
  overflow: hidden;
}
.bande-illustree__rangee {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 22px var(--gouttiere) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  border-bottom: 1px solid var(--filet);   /* la "ligne de sol" sous les engins */
}
.bande-illustree__icone {
  color: #c7c7c7;
  padding-bottom: 6px;
}

@media (max-width: 760px) {
  .bande-illustree__rangee { gap: 30px; }
}
/* Carrousel */

/* ==========================================================================
   20. CARROUSEL AVEC CONTRASTE & POSITIONNEMENT
   ========================================================================== */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 320px;
  margin: 30px auto;
}

.carousel-track-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-in-out;
}

.carousel-item {
  position: relative;
  min-width: 280px;
  width: 280px;
  height: 200px;
  margin: 0 15px;
  opacity: 0.25; /* Transparence prononcée pour la gauche et la droite */
  transform: scale(0.85);
  transition: all 0.4s ease-in-out;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Titre descriptif de la photo, affiché seulement au survol (ou au focus clavier) */
.carousel-item__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color: #fff;
  font-family: var(--titre);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.carousel-item:hover .carousel-item__legende,
.carousel-item:focus-within .carousel-item__legende {
  opacity: 1;
  transform: translateY(0);
}

/* Image principale centrée */
.carousel-item.active {
  opacity: 1; /* Transparence retirée au centre */
  transform: scale(1.1);
}

/* Boutons ajustés aux couleurs du site */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--jaune); /* Reprise du jaune du logo */
  border: 2px solid var(--noir);
  color: var(--noir); /* Texte noir pour être lisible */
  font-size: 1.5rem;
  font-weight: bold;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background var(--transition), transform var(--transition);
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.nav-btn:hover {
  background: var(--noir);
  color: #fff;
}

/* ==========================================================================
   21. BOÎTE MODALE D'AGRANDISSEMENT (LIGHTBOX)
   ========================================================================== */
/* On ajoute un curseur de loupe sur la photo centrale pour indiquer qu'elle est cliquable */
.carousel-item.active img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000; /* Passe au-dessus de tout le site, même de l'en-tête collant */
  background-color: rgba(0, 0, 0, 0.85); /* Fond sombre transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Classe activée en JavaScript */
.lightbox.est-ouverte {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__contenu {
  max-width: 90%;
  max-height: 85vh;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox.est-ouverte .lightbox__contenu {
  transform: scale(1);
}

.lightbox__contenu img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Bouton de fermeture */
.lightbox__fermer {
  position: absolute;
  top: 20px;
  right: 25px;
  background: none;
  border: none;
  color: #fff;
  font-size: 3rem;
  font-weight: 300;
  cursor: pointer;
  transition: color var(--transition);
}

.lightbox__fermer:hover {
  color: var(--jaune);
}