/* Surcharges Moontain — lisibilité de l'en-tête, quelle que soit l'image d'accroche.
   Le nom et le menu utilisaient --heading-color (vert foncé), invisible sur les
   photos sombres ; le header devient aussi vert foncé une fois "sticky" (scroll),
   donc le même texte redevenait invisible sur son propre fond. On fixe le texte
   en blanc dans les deux états et on ajoute un léger dégradé pour l'état transparent. */

.cs_site_header:not(.cs_sticky_active) .cs_main_header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 0;
}
.cs_site_header .cs_main_header_in {
  position: relative;
  z-index: 1;
}
.cs_site_header .cs_site_branding,
.cs_site_header .cs_nav a {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Voile sur les images du hero : le template pose le titre/texte blancs
   directement sur la photo brute, sans aucun assombrissement — illisible
   sur les photos claires. Dégradé plus marqué côté texte (gauche). */
.cs_hero.cs_style_1 .cs_hero_bg {
  /* Sans z-index explicite ici, ce voile (au z-index scopé à cet élément)
     finissait par se retrouver au-dessus du titre : le calque doit former
     son propre contexte d'empilement, sous le texte (.container en a un à 3). */
  z-index: 0;
}
.cs_hero.cs_style_1 .cs_hero_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.18) 100%);
  z-index: 1;
  pointer-events: none;
}
.cs_hero.cs_style_1 .cs_hero_title,
.cs_hero.cs_style_1 .cs_hero_subtitle {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Espaceurs entre sections : le template pose 100px + 64px (desktop) avant/après
   chaque section, cumulés à chaque frontière — le site paraît étiré et vide sur
   une page. On resserre ces espaceurs génériques, utilisés partout (Valeurs,
   Différence, Étapes, Services, Avis, Réalisations, Contact, bloc final). */
.cs_height_100 { height: 48px; }
.cs_height_64 { height: 32px; }
@media screen and (max-width: 991px) {
  .cs_height_lg_70 { height: 36px; }
  .cs_height_lg_50 { height: 24px; }
}

/* Le header est fixe (position: fixed) et flotte par-dessus le contenu. En
   resserrant les espaceurs ci-dessus, les sections ciblées par les liens du
   menu arrivent maintenant trop près du haut et se retrouvent cachées sous le
   header au clic. On réserve la hauteur du header comme marge de défilement —
   80px et non 100px : ces sections ne sont atteignables qu'après avoir scrollé
   au-delà du Hero, moment où le JS a déjà ajouté .cs_sticky_active au header
   (qui passe alors de 100px à 80px de haut). */
#apropos, #etapes, #services, #avis, #projets, #avant-apres, #contact, #final {
  scroll-margin-top: 80px;
}

/* Titre "Nous faisons la différence" : à 80px, "NOUS FAISONS LA DIFFÉRENCE"
   ne tient pas sur une ligne (le titre partage sa ligne avec le bouton
   "Devis gratuit", ce qui réduit sa largeur disponible) et retombait sur
   3 lignes. On force le saut après "DIFFÉRENCE" (dans SiteTemplate.tsx) ; la
   taille de police commune à tous les titres est définie plus bas.

   Section "Différence" pensée comme un plein écran : elle doit tenir dans la
   hauteur disponible sous le header fixe (80px en sticky_active, l'état dans
   lequel il est forcément une fois qu'on a scrollé jusqu'ici), pas dans 100vh
   entier (sinon elle déborde systématiquement de la hauteur du header).
   Centrée verticalement si le contenu est plus court que l'espace disponible. */
#apropos {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* min-height seul ne suffit pas : la photo (largeur 100%, hauteur libre selon
   son ratio d'origine) et la grille de 4 points forts sur 2 rangées avec 64px
   d'écart dépassaient largement un écran à elles seules. On plafonne la photo
   et on resserre l'écart entre les deux rangées pour que ça tienne réellement. */
#apropos .cs_img_box img {
  height: 46vh;
  width: 100%;
  object-fit: cover;
}
#apropos .cs_gap_y_64 {
  gap: 28px 0;
}

/* Section "Étapes" : même traitement plein écran que "Différence" ci-dessus.
   Attention : min-height + centrage ne fait que centrer un contenu qui déborde
   déjà — ça ne le réduit pas. Ici le titre à 80px et les cartes à hauteur fixe
   (500px, posées par le template) dépassaient déjà l'écran à elles seules ;
   il faut les réduire réellement, pas seulement centrer. */
#etapes {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#etapes .cs_card_3_wrap {
  height: 380px;
}
#etapes .cs_card.cs_style_3 {
  height: 190px;
}
@media (max-width: 1199px) {
  #etapes .cs_card_3_wrap {
    height: 340px;
  }
  #etapes .cs_card.cs_style_3 {
    height: 170px;
  }
}

/* Toutes les autres sections en plein écran (hauteur du menu déduite), même
   logique que Différence/Étapes. Le Hero est volontairement exclu : le header
   y est transparent et flotte PAR-DESSUS l'image (voile), il n'a pas besoin
   d'être "évité" comme sur un fond plein — lui reste sur 100vh entier. Avis
   clients est aussi exclu : 3 courtes citations n'ont pas besoin d'un écran
   entier, ça laisserait juste du vide autour — sa hauteur suit son contenu. */
#services, #projets, #contact, #final {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Comme pour Services : la vignette des réalisations a une hauteur fixe de
   480px posée par le template (.cs_card.cs_style_4 .cs_card_thumb), à elle
   seule plus grande que l'espace disponible avec le titre au-dessus. Un ratio
   2/1 (largeur = 2x hauteur) plutôt qu'une hauteur fixe : ça reste cohérent
   à chaque taille d'écran, la carte changeant de largeur par palier. */
#projets .cs_card.cs_style_4 .cs_card_thumb {
  height: auto;
  aspect-ratio: 2 / 1;
}
/* La carte elle-même fait jusqu'à 1063px de large dans le template : à ce
   niveau, même en 2/1 la vignette atteint ~530px de haut et fait déborder la
   section d'un écran. On réduit aussi la largeur de la carte pour que le
   ratio 2/1 donne une hauteur qui tient réellement dans l'espace disponible. */
#projets .cs_card.cs_style_4 {
  width: 720px;
}
@media (max-width: 1199px) {
  #projets .cs_card.cs_style_4 {
    width: 600px;
  }
}

/* Cartes "Avis clients" : le slider d'origine (une citation à la fois, 32px,
   centrée) a été remplacé par une grille de 3 cartes côte à côte, avec un
   vrai traitement de carte (fond blanc, ombre légère, guillemet décoratif,
   avatar à initiale) plutôt qu'une citation nue sur fond gris. */
#avis .row { align-items: stretch; }
.cs_testimonial_card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 14px 32px -20px rgba(55, 72, 54, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cs_testimonial_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(55, 72, 54, 0.4);
}
.cs_testimonial_quote {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1;
  color: var(--heading-color);
  opacity: 0.2;
}
.cs_testimonial_text {
  margin: 0;
  flex: 1;
  font-size: 17px;
  line-height: 1.6;
  color: var(--heading-color);
}
.cs_testimonial_meta_v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.cs_testimonial_initial {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--heading-color);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.cs_testimonial_author {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color);
}
.cs_testimonial_location {
  margin: 0;
  font-size: 13px;
  color: #7f8f80;
}

/* Comme pour Différence/Étapes : min-height + centrage ne réduit rien. Les
   cartes de service ont une hauteur fixe de 740px posée par le template
   (.cs_card_1_group .cs_card.cs_style_1), largement plus qu'un écran à elles
   seules avec le titre par-dessus. On la réduit réellement. */
#services .cs_card_1_group .cs_card.cs_style_1 {
  height: 420px;
}
@media (max-width: 1199px) {
  #services .cs_card_1_group .cs_card.cs_style_1 {
    height: 380px;
  }
}

/* Un seul gabarit de taille pour le titre principal de chaque section, qu'il
   s'agisse d'un grand titre (cs_section_title) ou d'un simple libellé entre
   crochets (cs_brackets_title) quand c'est le seul titre de la section. Les
   libellés secondaires accolés à un grand titre (ex. "MÉTHODE", petit
   "RÉALISATIONS") restent à leur taille d'origine — ce sont des accents, pas
   le titre principal. Le H1 du Hero reste aussi à part (rôle différent). */
#apropos .cs_section_title,
#etapes .cs_section_title,
#projets .cs_section_title,
#services .cs_brackets_title,
#avis .cs_brackets_title,
#avant-apres .cs_brackets_title,
#contact .cs_brackets_title,
#final .cs_cta_title {
  font-size: 56px;
}

/* Cartes "Avant / Après" : deux moitiés d'image côte à côte avec étiquette,
   pas de slider JS supplémentaire — plus simple et robuste que de brancher
   encore un plugin sur cette base jQuery/Slick déjà chargée. */
.cs_before_after_card { cursor: default; }
.cs_before_after_pair {
  display: flex;
  border-radius: 14px;
  overflow: hidden;
}
.cs_before_after_half {
  position: relative;
  flex: 1;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cs_before_after_half .cs_bg_filed { position: absolute; inset: 0; }
.cs_before_after_tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(55, 72, 54, 0.85);
  padding: 4px 10px;
  border-radius: 999px;
}