/* ============================================================
   MODULE « En savoir plus » — bloc « À propos » (bandeau sauge + 4 cartes,
   carrousel élastique piloté par finding.js). Cloné de la page Notre histoire.
   Utilisé par : histoire, responsable, conseillers, solidaire.

   AUTONOME : ne dépend PAS de base.css (gouttière, eyebrow et bouton sont
   redéfinis, scopés à .section-apropos) → utilisable sur une page qui ne
   charge que ce fichier (ex. conseillers). Seul prérequis JS :
   `v2/finding/js/finding.js` (initElasticCarousel sur `.section-apropos`).
   Figma desktop 919:4318 | mobile 919:4441.
============================================================ */
.section-apropos {
  background-color: #9f9a7c;
  padding: 40px 0;
  overflow: hidden;
}

/* Gouttière du module (indépendante du .container de la page) :
   30 mobile / 40 tablette / 100 desktop, contenu 1166 centré au-delà de 1366. */
.section-apropos .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 30px;
  max-width: 100%;
}
@media (min-width: 769px) and (max-width: 1100px) {
  .section-apropos .container { padding: 0 40px; }
}
@media (min-width: 1101px) {
  .section-apropos .container {
    max-width: min(1166px, calc(100% - 200px));
    margin-inline: auto;
    padding: 0;
  }
}

/* Titres + eyebrow (Lexend Peta, autonome — pas besoin de .label-peta) */
.apropos-titles { display: flex; flex-direction: column; gap: 20px; }
.apropos-eyebrow {
  font-family: 'Lexend Peta', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.417;
  text-transform: uppercase;
  color: #615d48;
}
.apropos-heading {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  color: #ffffff;
}
@media (min-width: 769px) {
  .apropos-eyebrow { font-size: 13px; line-height: 18px; }
}

/* En-tête : titres à gauche, flèches à droite. Flèches blanches (fond sauge),
   affichées uniquement en desktop ≥1101 ; masquées quand `.is-static` (les 4
   cartes tiennent) — posé par finding.js, comme « Nos articles de blog ». */
.apropos-arrows { display: none; gap: 10px; align-items: center; flex-shrink: 0; }
.section-apropos.is-static .apropos-arrows { display: none !important; }
.apropos-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #ffffff;
  transition: opacity .15s ease, transform .15s ease;
}
.apropos-arrow-btn:hover { opacity: .65; }
.apropos-arrow-btn:active { transform: scale(.92); }
.apropos-arrow-btn.is-disabled { opacity: .25; pointer-events: none; cursor: default; }

/* Carrousel élastique (transform piloté par finding.js) : la fenêtre masque le
   débordement, la piste est translatée (drag + flèches). Bleed pleine largeur
   ≤1100 ; navigation au glissement/swipe (flèches cachées). */
.apropos-cards-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.apropos-cards-wrap::-webkit-scrollbar { display: none; }
.apropos-cards-wrap.is-static { cursor: default; }
.apropos-cards-wrap.is-dragging { cursor: grabbing; user-select: none; }

.apropos-cards {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: 30px;
}

/* Carte (visuel plein fond + dégradé + texte blanc + CTA outline). */
.apropos-card {
  position: relative;
  flex-shrink: 0;
  min-width: 262px;
  width: 262px;
  height: 471px;
  padding: 30px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  color: #ffffff;
}
.apropos-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  z-index: 0;
}
.apropos-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  mix-blend-mode: multiply;
  border-radius: 15px;
  z-index: 0;
}
.apropos-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apropos-card__eyebrow {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
}
.apropos-card__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
}

/* CTA « Découvrir » (outline blanc) — autonome, pas besoin de base.css .btn. */
.section-apropos .btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 17px;
  border-radius: 30.076px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.section-apropos .btn--outline-white { background-color: transparent; border-color: #ffffff; color: #ffffff; }
.section-apropos .btn--full { width: 100%; }

/* Survol : le texte de la carte reste blanc (le reset global met
   `a:hover{color:unset}`, or la carte entière est un <a>) ; seul le CTA
   « Découvrir » se remplit sauge. */
.apropos-card:hover { color: #ffffff; }
.apropos-card .btn--outline-white:hover {
  background-color: #9f9a7c;
  border-color: #9f9a7c;
  color: #ffffff;
  opacity: 1;
}

/* Tablette (769–1100) : cartes toujours en bleed, gouttière 40px. */
@media (min-width: 769px) and (max-width: 1100px) {
  .apropos-cards { padding-inline: 40px; }
}

/* Desktop ≥769 : en-tête en ligne, section pt60 pb80, titre 50. */
@media (min-width: 769px) {
  .apropos-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .section-apropos { padding: 60px 0 80px; }
  .apropos-heading { font-size: 50px; }
}

/* Desktop ≥1101 (structure full) : espacement des cartes 40px (20px en
   structure réduite/hamburger = valeur de base). Les 4 cartes (4×262 + 3×40 =
   1168) dépassent le contenu 1166 de ~2px, rognés (comme la maquette / le blog ;
   finding.js tolère via slack). */
@media (min-width: 1101px) {
  /* Flèches prev/next masquées sur toutes les pages « À propos » (histoire,
     responsable, conseillers, solidaire) : elles n'apparaîtraient que dans la
     plage réduite 1101–1366px ; navigation au glissement (drag), comme mobile.
     (base .apropos-arrows = display:none, non ré-affiché ici.)
     overflow:hidden → les cartes rognent aux gouttières 100px (symétrique,
     comme le blog), au lieu de déborder jusqu'au bord de l'écran. */
  .apropos-cards-wrap { width: auto; margin-left: 0; margin-right: 0; overflow: visible; }
  .apropos-cards { width: max-content; padding-inline: 0; justify-content: flex-start; gap: 40px; }
}