/* ==========================================================================
   Fondation Muna Yala — Page « Nos activités »
   ========================================================================== */

/* Réglage de la bannière propre à la page */
.banniere-interne__image { opacity: 0.4; }
.banniere-interne__voile {
  background: linear-gradient(180deg, rgba(46, 31, 82, 0.72) 0%, rgba(46, 31, 82, 0.94) 100%);
}
.banniere-interne__titre { max-width: 17ch; }

/* --------------------------------------------------------------------------
   Les projets
   -------------------------------------------------------------------------- */
.projets {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 74px var(--gouttiere) 0;
}

.projet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid rgba(46, 31, 82, 0.14);
}
.projet--premier { padding: 0 0 60px; }
.projet--dernier { border-bottom: none; }

@media (min-width: 940px) {
  .projet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sur mobile, l'image passe systématiquement au-dessus du texte. */
.projet__corps--premier { order: 2; }
@media (min-width: 940px) {
  .projet__corps--premier { order: 0; }
}

.projet__image {
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  object-fit: cover;
  display: block;
}
.projet__image--cadrage-42 { object-position: center 42%; }
.projet__image--cadrage-30 { object-position: center 30%; }

.projet__numero {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.projet__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  color: var(--violet);
  margin: 0 0 16px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.projet__texte {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(46, 31, 82, 0.72);
  margin: 0 0 20px;
  max-width: 54ch;
  text-wrap: pretty;
}

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquette {
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-clair);
  background: rgba(75, 51, 129, 0.1);
  padding: 8px 14px;
}
.etiquette--orange { color: var(--creme); background: var(--orange); }
.etiquette--vert   { color: var(--vert);  background: rgba(28, 69, 50, 0.12); }

/* --------------------------------------------------------------------------
   Autres actions
   Opérations sans archive photographique : la carte s'appuie sur une icône
   plutôt que sur une image d'illustration.
   -------------------------------------------------------------------------- */
.autres-actions {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 74px var(--gouttiere);
}
.autres-actions__entete { margin-bottom: 30px; }
.autres-actions__entete .surtitre { margin: 0 0 12px; }
.autres-actions__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06;
  color: var(--violet);
  margin: 0 0 16px;
  max-width: 20ch;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.autres-actions__chapeau {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(46, 31, 82, 0.7);
  margin: 0;
  max-width: 64ch;
  text-wrap: pretty;
}

.autres-actions__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px)  { .autres-actions__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .autres-actions__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.action {
  border: 1px solid rgba(46, 31, 82, 0.14);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.action__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 18px;
  margin-bottom: 20px;
}
.action__icone--orange { background: rgba(230, 81, 0, 0.12);  color: var(--orange); }
.action__icone--violet { background: rgba(75, 51, 129, 0.12); color: var(--violet-clair); }
.action__icone--vert   { background: rgba(28, 69, 50, 0.12);  color: var(--vert); }

.action__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  color: var(--violet);
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.action__texte {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(46, 31, 82, 0.72);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.action .etiquettes { margin-top: auto; }

/* --------------------------------------------------------------------------
   Archives photo
   -------------------------------------------------------------------------- */
.galerie {
  background: var(--sable);
  padding: 74px 0;
}
.galerie__entete { margin-bottom: 30px; }
.galerie__entete .surtitre { margin: 0 0 12px; }
.galerie__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06;
  color: var(--violet);
  margin: 0;
  max-width: 20ch;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.galerie__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px)  { .galerie__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galerie__grille { grid-template-columns: repeat(3, 1fr); } }

/* Chaque vignette ouvre la photo en pleine résolution dans un nouvel onglet. */
.galerie__vue {
  display: block;
  overflow: hidden;
  background: var(--violet);
}
.galerie__grille img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 0.3s ease;
}
.galerie__vue:hover img,
.galerie__vue:focus-visible img {
  transform: scale(1.06);
  opacity: 0.88;
}
.galerie__vue:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .galerie__grille img { transition: none; }
  .galerie__vue:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Bande d'appel à l'action
   -------------------------------------------------------------------------- */
.bande-cta--interne .bande-cta__contenu { padding: 74px var(--gouttiere); }
.bande-cta--interne .bande-cta__titre { font-size: clamp(30px, 5vw, 56px); line-height: 1.06; }