/* ==========================================================================
   home.css — sections de la page d'accueil

   Derniere feuille de la cascade : ne style que la mise en page des sections.
   Les composants (carrousels, cartes, temoignages) ont leurs propres feuilles
   dans components/.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero — #sectionHero
   --------------------------------------------------------------------------
   Row, align center, gap 50px (20px <= 1400px), padding 50/10/70/10, fond
   #F5F5F5. La bascule en colonne est posee a 991px : c'est le palier du kit
   visuel le plus proche du besoin, et celui ou la bande blanche disparait deja.

   `position: relative` porte le ::before : bande blanche de 25 % a gauche,
   masquee <= 991px.
   -------------------------------------------------------------------------- */

#sectionHero {
  position: relative;
  padding: 50px 10px 70px;
  background-color: var(--grey-light);
}

#sectionHero::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: var(--white);
}

/* Le contenu passe au-dessus de la bande blanche */
#sectionHero .wrapper {
  position: relative;
  z-index: 1;
}

#sectionHero .hero-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
}

/* Leur somme depasse 100 %, et c'est le flex qui les ramene a l'echelle. Ce
   sont elles qui determinent le rapport de largeur entre l'image et le texte.
   58/62 est la valeur mesuree a partir de laquelle la premiere ligne du h1
   tient sans se couper jusqu'au palier 1024 : il lui faut 485px pour une
   police de 45px. En deca, le mot final passe seul a la ligne. */
#sectionHero .hero-media {
  width: 58%;
}

#sectionHero .hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--lba-gap);
  width: 62%;
}

/* Le h1 du hero est en graisse normale et line-height 1.1em, contrairement aux
   h2 de section qui sont en 700. */
#sectionHero h1 {
  font-weight: var(--lba-font-weight-normal);
  line-height: 1.1em;
}

@media screen and (max-width: 1400px) {
  #sectionHero .hero-inner {
    gap: 20px;
  }
}

@media screen and (max-width: 991px) {

  #sectionHero::before {
    display: none;
  }

  #sectionHero .hero-inner {
    flex-direction: column;
  }

  #sectionHero .hero-media,
  #sectionHero .hero-text {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   2. Nos services
   --------------------------------------------------------------------------
   Column, margin-top 125px. Le texte d'introduction est plafonne a 860px et
   centre.
   -------------------------------------------------------------------------- */

.section-services {
  margin-top: 125px;
}

.section-services h2 {
  line-height: 1.1em;
}

/* margin-top 15px INDISPENSABLE : base.css remet les marges de p/h a plat, et
   sans reprise explicite ici le texte se colle au titre (0px mesure). */
/* max-width 860px : en deca de 850px le texte passe sur 3 lignes, la derniere
   ne portant qu'un mot. A 860px il tient sur 2 lignes equilibrees (805 / 744px,
   soit 61px d'ecart) ; au-dela de 950px l'ecart depasse 340px. */
.section-services__intro {
  max-width: 860px;
  margin: 15px auto 0;
}


/* --------------------------------------------------------------------------
   3. Bandeau de logos
   --------------------------------------------------------------------------
   min-height 189px (150px <= 767px), column, centre, margin-top 110px, sur
   fond noir pleine largeur.
   -------------------------------------------------------------------------- */

.section-logos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 189px;
  margin-top: 110px;
  background: var(--black);
}

/* ⭐ EXCEPTION AU WRAPPER — piste elargie a 1566px = 6 x 261px.
   Contraint au wrapper (1100px), le bandeau tassait ses logos : mesure a 1438px
   de viewport, la case tombait a 183px et le logo a 163x44, soit -22 % — sans
   espace lisible entre eux.
   Le bandeau noir occupant deja toute la largeur, le carrousel est donc libere
   du wrapper. 1566px permet d'afficher SIX logos en plein ecran, l'espace entre
   eux restant constant, et plafonne l'etalement sur les tres grands ecrans.
   ⚠️ Seul endroit du site ou le contenu n'est pas borne au wrapper. */
.section-logos > .wrapper {
  max-width: 1566px;
  padding: 0;
}

/* ⭐ ESPACE CONSTANT, NOMBRE DE LOGOS VARIABLE.
   Objectif : le MEME ESPACE entre les logos quelle que soit la largeur, peu
   importe le nombre affiche — idealement 6 en plein ecran — et aucun
   ecrasement des logos.

   ⚠️ Le modele `per-view` du composant partage ne peut PAS y parvenir : il
   dimensionne chaque case a `100% / N` avec N fixe par palier. La case — donc
   l'espace — varie alors avec la largeur de la fenetre pendant que le nombre
   reste fige, soit exactement l'inverse du besoin (logos tasses des que la
   fenetre retrecit).

   Modele retenu ici : la case a une largeur FIXE (`--logo-slot`), l'espace est
   donc constant par construction, a toute largeur et sans aucun palier ; c'est
   le NOMBRE de logos visibles qui s'adapte. Les logos gardent leurs dimensions
   naturelles : aucun ecrasement possible, `width: auto` + `flex-shrink: 0`.
   ⚠️ Cantonne au bandeau de logos : le hero et les temoignages gardent le
   modele `per-view` du composant partage. */
.section-logos .lba-carousel--slide {
  /* 217px = largeur maximale d'un logo, + 2 x 22px de marge = 261px.
     La case doit contenir le logo le PLUS LARGE sans le rogner : c'est ce qui
     garantit qu'aucun logo n'est jamais comprime. Les logos sont normalises en
     amont pour ne jamais depasser cette largeur. */
  --logo-slot: 261px;
}

.section-logos .lba-carousel__slide {
  flex: 0 0 var(--logo-slot);
  padding: 0 22px;
}

/* Les logos ne se deforment JAMAIS et gardent leurs dimensions NATURELLES :
   ni `width` ni `max-width` ne les contraignent, et `flex-shrink: 0` interdit
   la compression par le flex. La case etant dimensionnee sur le plus large des
   logos (217px + marges), aucun ne peut deborder. */
.section-logos .lba-carousel__slide img {
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: none;
}

/* Sous 400px de viewport, la case de 261px depasserait l'ecran. On reduit les
   MARGES (22 -> 8px) et non le logo : la case tombe a 233px, Dior (217px) y tient
   toujours entier. C'est le seul palier du bandeau, et il ne touche jamais a la
   taille des logos. */
@media screen and (max-width: 400px) {

  .section-logos .lba-carousel--slide {
    --logo-slot: 233px;
  }

  .section-logos .lba-carousel__slide {
    padding: 0 8px;
  }
}

@media screen and (max-width: 767px) {
  .section-logos {
    min-height: 150px;
  }
}


/* --------------------------------------------------------------------------
   4. Engagements RSE
   --------------------------------------------------------------------------
   Row, centre, gap 0, padding 105/10/105/10 (70px <= 1400px, 50px <= 1200px),
   fond #F5F5F5. Deux colonnes a 50 %, la seconde alignee a droite. En mobile :
   column-reverse — l'image passe au-dessus du texte.
   -------------------------------------------------------------------------- */

.section-rse {
  padding: 105px 10px;
  background-color: var(--grey-light);
}

.section-rse__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.section-rse__text {
  display: flex;
  flex-direction: column;
  gap: var(--lba-gap);
  width: 50%;
}

.section-rse__text h2 {
  line-height: 1.1em;
}

.section-rse__media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 50%;
}

.section-rse__media img {
  border-radius: var(--lba-radius-card);
}

/* Variante schema : le media est un diagramme a fond transparent, plus haut
   que large, et non une photo. Il est centre dans sa colonne au lieu d'etre
   cale a droite, pour rester a l'aplomb du centre qu'occupait la photo.

   Largeur d'affichage 550px pour un fichier de 1100px : le double, donc net
   sur les ecrans haute densite. Pas d'arrondi : le fond etant transparent,
   un rayon rognerait le vide et non le dessin.

   `max-width: 100%` avant tout : sous 1200px la colonne devient plus etroite
   que 550px, et sans cette borne le schema deborderait sur le texte. */
.section-rse__media--schema {
  align-items: center;
}

.section-rse__media--schema img {
  width: 550px;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

@media screen and (max-width: 1400px) {
  .section-rse {
    padding: 70px 10px;
  }
}

@media screen and (max-width: 1200px) {
  .section-rse {
    padding: 50px 10px;
  }
}

@media screen and (max-width: 767px) {

  .section-rse__inner {
    flex-direction: column-reverse;
  }

  .section-rse__text,
  .section-rse__media {
    width: 100%;
  }

  .section-rse__media {
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   5. Temoignages
   --------------------------------------------------------------------------
   Column, margin 59px en haut / 50px en bas. Le texte d'introduction est
   plafonne a 794px, le carrousel a 1280px (components/carousel.css).
   -------------------------------------------------------------------------- */

.section-testimonials {
  margin: 59px 0 50px;
}

.section-testimonials h2 {
  line-height: 1.1em;
}

/* margin-top 15px : meme necessite que .section-services__intro ci-dessus. */
.section-testimonials__intro {
  max-width: 794px;
  margin: 15px auto 0;
}