/* ==========================================================================
   Page À propos
   ========================================================================== */

/* ---------- Présentation : titre, portrait et photos ---------- */

/* La section remplit l'écran sous l'en-tête et son contenu y est centré */
.presentation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) 0;
}

.presentation > .conteneur {
  width: 100%;
}

/* La scène sert de repère aux photos : 1cqi = 1 % de sa largeur */
.presentation__scene {
  container-type: inline-size;
  position: relative;
  padding-top: clamp(40px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.presentation__titre {
  position: relative;
  z-index: 1;
  font-size: clamp(60px, 14.5vw, 212px);
}

.presentation__portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(150px, 14vw, 200px);
  aspect-ratio: 4 / 5;
  margin-top: clamp(-100px, -5.5vw, -32px);
  border-radius: 4px;
  object-fit: cover;
}

.presentation__texte {
  margin: clamp(28px, 3vw, 44px) 0 0;
  max-width: 40em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Photos dispersées autour du titre. Positions et tailles en % de la largeur de
   la scène (cqi) : la composition de la maquette 1440 px garde ses proportions
   sur tous les écrans. */
.photo {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.photo--equitation {
  left: 87.65cqi;
  top: 0;
  width: 11.89cqi;
  height: 14.86cqi;
}

.photo--randonnee {
  left: 2.52cqi;
  top: 0.29cqi;
  width: 10.59cqi;
  height: 15.4cqi;
}

.photo--moto {
  left: 15.63cqi;
  top: 22.55cqi;
  width: 9.53cqi;
  height: 13.72cqi;
}

.photo--voyage {
  left: 80.56cqi;
  top: 23.38cqi;
  width: 12.27cqi;
  height: 17.23cqi;
}

/* Mobile (600 px et moins) : les photos se répartissent sur tout le premier écran.
   La scène devient une grille : une bande de photos en haut, le titre, le portrait
   et le texte au centre, une bande de photos en bas. Les deux bandes se partagent
   la hauteur libre, donc la taille des photos suit celle de l'écran. */
@media (max-width: 600px) {
  .presentation {
    height: max(calc(100svh - var(--hauteur-entete)), 680px);
    padding: 24px 0;
  }

  .presentation > .conteneur {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }

  .presentation__scene {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    justify-items: center;
    padding-top: 0;
  }

  .presentation__titre,
  .presentation__portrait,
  .presentation__texte {
    grid-column: 1 / -1;
  }

  .presentation__titre { grid-row: 2; }
  .presentation__portrait { grid-row: 3; }
  .presentation__texte { grid-row: 4; }

  .presentation__portrait {
    margin-top: -10px;
  }

  .photo {
    position: static;
    width: auto;
    max-width: 100%;
    max-height: 210px;
  }

  .photo--randonnee {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    align-self: start;
    height: calc(100% - 16px);
  }

  .photo--equitation {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    height: 78%;
    margin-right: 6%;
  }

  .photo--moto {
    display: none;
  }

  .photo--voyage {
    display: none;
  }
}


/* ---------- Domaines ---------- */

.domaines {
  padding: 0 0 clamp(88px, 9vw, 136px);
  text-align: center;
}

.domaines__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  max-width: 1040px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
}

/* Taille du texte : 28 px sur ordinateur, réduite jusqu'à 16 px sur mobile */
.etiquette {
  display: inline-flex;
  align-items: center;
  min-height: clamp(40px, 4.4vw, 64px);
  padding: 0 clamp(14px, 2vw, 28px);
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  box-sizing: border-box;
  font-size: clamp(16px, 2vw + 8px, 28px);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.etiquette--active {
  gap: 0.43em;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--encre);
}

.etiquette svg {
  width: 0.79em;
  height: 0.79em;
}

/* ---------- Parcours ---------- */

.parcours {
  background: #ECE5D9;
  padding: clamp(88px, 9vw, 136px) 0;
}

.parcours__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
}

.parcours__groupe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 48px;
  margin-top: clamp(48px, 5vw, 64px);
}

.parcours__groupe--experiences {
  margin-top: clamp(48px, 5vw, 72px);
}

.parcours__categorie {
  flex: 0 0 220px;
  padding-top: 30px;
}

.parcours__liste {
  flex: 1 1 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--filet);
}

.ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding: 26px 0;
  border-top: 1px solid var(--filet);
}

.ligne__date {
  flex: 0 0 150px;
}

.ligne__contenu {
  flex: 1 1 320px;
  min-width: 0;
}

.ligne__titre {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.ligne__lieu {
  font-weight: 400;
  color: var(--gris);
}

.ligne__detail {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
}

.parcours__groupe--experiences .ligne__detail {
  max-width: 600px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}