.bandeau-construction {
  width: 100%;
  padding: 90px 25px 60px;
  background-color: var(--beige);
}

.bandeau-construction .gros-titre-black-legal {
  margin: 0;
}

/* ============================================================
   EXPERTISES — structure en lignes pleine largeur
   (inspirée de la mise en page "une expertise = une ligne")
   Hover demandé : la ligne passe en noir, les textes en blanc
   ============================================================ */

.expertises {
  width: 100%;
  background-color: var(--beige);
}

.ligne-expertise {
  display: grid;
  grid-template-columns: 380px 1fr;
  /* gouttière du milieu = marge à droite (25px) ; à gauche la
     photo touche le bord de l'écran */
  column-gap: 25px;
  padding: 0 25px 0 0;
  align-items: stretch;
  width: 100%;
  /* chaque rubrique a un nombre de lignes différent ; on impose
     une hauteur commune pour que les quatre bandes fassent
     exactement la même taille */
  min-height: 378px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  transition: background-color .35s ease;
}

/* toute la ligne est cliquable : pas de soulignement, et le
   curseur change pour signaler la cible */
.ligne-expertise-lien {
  text-decoration: none;
  cursor: pointer;
}

.ligne-figure {
  flex: 0 0 380px;
  width: 380px;
  position: relative;
  overflow: hidden;
}

/* Positionnement absolu : la photo occupe toute la hauteur de la ligne,
   quel que soit le navigateur */
.ligne-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ligne-article {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 50px;
  /* la marge de droite est portée par la ligne ; celle de gauche
     décale les textes pour les éloigner de la photo */
  padding: clamp(40px, 5.4vh, 66px) 0 0 55px;
}

.ligne-titre {
  flex: 0 0 auto;
  width: min(480px, 44%);
  margin: 0;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  color: var(--black);
  transition: color .35s ease;
}

/* Colonnes des lignes « identité visuelle » et « pack » : le titre
   ET la phrase d'accroche à gauche (sous le titre), les puces
   seulement à droite. */
.ligne-titre-bloc {
  flex: 0 0 auto;
  width: min(575px, 54%);
}

/* « identité visuelle » doit tenir sur une seule ligne : on
   interdit la coupure et on réduit un peu le corps quand la
   colonne devient plus étroite que le mot. */
.ligne-titre-une-ligne {
  white-space: nowrap;
}

/* L'accroche « Fédérez une communauté autour de votre marque » doit
   rester sur une seule ligne : corps légèrement réduit pour que la
   phrase tienne dans la colonne, comme les titres des autres lignes. */
.ligne-tagline-une-ligne {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(16px, 1.55vw, 30px);
}

@media screen and (max-width: 1500px) {
  .ligne-titre-une-ligne { font-size: 40px; }
}

@media screen and (max-width: 767px) {
  .ligne-titre-une-ligne { font-size: 30px; }
}

.ligne-titre-bloc .ligne-tagline {
  margin: 22px 0 0;
  max-width: 560px;
}

.ligne-contenu {
  flex: 1;
  max-width: 670px;
  min-width: 0;
}

/* La phrase d'accroche reprend exactement le chapô de la home
   (« Je façonne des marques qui parlent juste, ») : 700 et
   clamp(20px, 2.1vw, 32px), lettrage -0.05em. */
.ligne-tagline {
  margin: 0 0 26px;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--black);
  transition: color .35s ease;
}

.ligne-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
}

.ligne-liste li {
  position: relative;
  padding-left: 1.25em;
  color: var(--black);
  transition: color .35s ease;
}

.ligne-liste li + li {
  margin-top: 7px;
}

.ligne-liste li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  transition: color .35s ease;
}

/* --- Hover : la ligne devient noire, les textes blancs --- */

.ligne-expertise:hover {
  background-color: var(--black);
}

.ligne-expertise:hover .ligne-titre,
.ligne-expertise:hover .ligne-tagline,
.ligne-expertise:hover .ligne-liste li {
  color: var(--beige);
}

/* Les puces (noires par défaut) passent en blanc au survol
   pour rester visibles sur le fond noir */
.ligne-expertise:hover .ligne-liste li::before {
  color: var(--beige);
}

.ligne-expertise:hover .ligne-figure img {
  transform: scale(1.04);
}

/* --- Footer révélé au scroll : la page glisse au-dessus pour le dévoiler --- */

.expertises {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  /* ombre portée sous le contenu pour accentuer le glissement au-dessus du footer */
  box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .45);
}

/* Le footer (bandeau de liens) reste collé en bas de l'écran, derrière
   le contenu. Le sélecteur frère ne s'applique qu'à la page services. */
.expertises + .testimonials,
.expertises + .testimonials.section-dark {
  margin-top: 0;
  padding-top: 0;
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* --- Responsive (breakpoints Webflow) --- */

@media screen and (max-width: 991px) {
  /* la colonne photo se resserre avec la photo, sinon la piste
     reste à 380px et la ligne déborde sur mobile intermédiaire */
  .ligne-expertise {
    grid-template-columns: 280px 1fr;
  }

  .ligne-figure {
    flex-basis: 280px;
    width: 280px;
  }

  .ligne-expertise {
    min-height: 374px;
  }

  .ligne-article {
    gap: 32px;
    padding: 38px 0 0 40px;
  }

  .ligne-titre {
    font-size: 40px;
  }
}

@media screen and (max-width: 767px) {
  .ligne-expertise {
    grid-template-columns: 1fr;
    /* la photo reste collée au bord gauche, la colonne texte
       garde sa marge de 24px */
    padding: 0 24px 0 0;
    min-height: 560px;
  }

  .ligne-figure {
    flex-basis: auto;
    width: 100%;
    height: 240px;
  }

  .ligne-article {
    flex-direction: column;
    gap: 20px;
    padding: 30px 0 40px 24px;
  }

  .ligne-titre {
    width: 100%;
  }

  .ligne-titre-bloc {
    width: 100%;
  }

  .ligne-titre-bloc .ligne-tagline {
    max-width: none;
  }

}

@media screen and (max-width: 479px) {
  .ligne-figure {
    height: 200px;
  }

  .ligne-titre {
    font-size: 34px;
  }

}

/* Première ligne sous la navbar flottante */
.expertises {
  padding-top: 70px;
}

/* neutralise une marge Webflow héritée qui empêchait
   la photo d'occuper toute la hauteur de la ligne */
.ligne-figure {
  margin: 0 !important;
}

/* Survol des lignes : fond beige doux (au lieu du noir), textes en noir */
.ligne-expertise:hover {
  background-color: var(--beige-survol);
}

.ligne-expertise:hover .ligne-titre,
.ligne-expertise:hover .ligne-tagline,
.ligne-expertise:hover .ligne-liste li {
  color: var(--black);
}

.ligne-expertise:hover .ligne-liste li::before {
  color: var(--orange);
}

/* ===== Approche -50 (letter-spacing -0.05em) sur tout le texte en majuscules ===== */
.ligne-titre { letter-spacing: -0.05em; }