/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */

/* Fond body = F6F2F1 pour que les border-radius des encarts ne révèlent pas le beige */
body {
  background: #F6F2F1;
}

.nav__link--active {
  opacity: 0.4;
  pointer-events: none;
}

/* ─────────────────────────────────────────
   HERO : NOM + PHOTO + BIO
───────────────────────────────────────── */
.about-hero {
  padding-top: 12rem;
  padding-left: var(--px);
  padding-right: var(--px);
  padding-bottom: 4rem;
  background: #F6F2F1;
  border-radius: 0 0 100px 100px;
  position: relative;
  z-index: 2;
}

.about-hero__grid {
  position: relative;
  min-height: 75vh;
}

.about-hero__left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  z-index: 2;
  width: 53%;
}

.about-hero__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 9.1vw, 8.3rem);
  line-height: 0.98;
  letter-spacing: 0.10em;
  color: var(--dark);
  display: flex;
  flex-direction: column;
}

.about-hero__bio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: min(600px, 88%);
}

.about-hero__bio p {
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--dark);
}

/* Photo positionnée en absolute pour chevaucher librement le titre */
.about-hero__right {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Wrapper photo + caption : 92% de la colonne, aligné à droite */
.about-hero__photo-wrap {
  width: 92%;
  display: flex;
  flex-direction: column;
}

.about-hero__photo-clip {
  overflow: hidden;
  border-radius: 8px;
}

.about-hero__photo {
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  object-fit: cover;
  object-position: center 46%;
  border-radius: 8px;
  display: block;
  transform: scale(1.15);
}

/* La caption part du même bord gauche que la photo */
.about-hero__caption {
  font-family: var(--mono);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--dark);
  align-self: flex-start;
  margin-top: 1.4rem;
}

/* ─────────────────────────────────────────
   OUTILS
───────────────────────────────────────── */
.tools {
  background: #ffffff;
  border-radius: 0 0 100px 100px;
  margin-top: -100px;
  padding-top: calc(100px + 1rem);
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.tools__card {
  padding: 2.8rem var(--px) 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tools__icons {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tool-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tool-icon img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ─────────────────────────────────────────
   TIMELINE
───────────────────────────────────────── */
.timeline {
  padding: 5rem var(--px) 7rem;
  background: #F6F2F1;
  margin-top: -100px;
  padding-top: calc(100px + 6rem);
  position: relative;
  z-index: 0;
}

/* Grille 2 colonnes — un dot par bloc de contenu */
.timeline__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* Barre centrale animée */
.timeline__bar-line {
  position: absolute;
  left: calc(50% - 0.5px);
  top: -2rem; bottom: -2rem;
  width: 1px;
  background: var(--dark);
  z-index: 0;
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline__grid.revealed .timeline__bar-line {
  transform: scaleY(1);
}

/* État initial des items : invisibles, décalés */
.tl-left.tl-dot,
.tl-right.tl-dot {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.tl-left.tl-dot,
.tl-right.tl-dot { transform: translateY(-18px); }

/* Révélé */
.tl-left.tl-dot.revealed,
.tl-right.tl-dot.revealed {
  opacity: 1;
  transform: translateX(0);
}

.tl-left {
  text-align: right;
  padding-right: 2rem;
  position: relative;
}

.tl-right {
  text-align: left;
  padding-left: 2rem;
  position: relative;
}

/* Dot sur chaque bloc de contenu via pseudo-élément */
.tl-left.tl-dot::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dark);
  z-index: 2;
}

.tl-right.tl-dot::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dark);
  z-index: 2;
}

.timeline__title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.15rem;
  font-weight: 400;
  font-style: normal;
  color: var(--dark);
  line-height: 1.3;
  -webkit-text-stroke: 0.3px var(--dark); /* légèrement plus gras */
}

.timeline__company {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.05rem;
  font-weight: 400;
  font-style: normal;
  color: var(--dark);
  margin-top: 0.3rem;
}

.timeline__date {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--dark);
  margin-top: 0.15rem;
}


/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer-wrap {
  background: #ffffff;
  border-radius: 100px 100px 0 0;
  margin-top: -15px;
  padding-top: 15px;
  position: relative;
  z-index: 1;
}

.footer {
  /* conteneur sémantique uniquement */
}

.footer__inner {
  padding: 5rem var(--px) 4rem;
}

.footer__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--dark);
  line-height: 1.05;
  letter-spacing: 0.10em;
  margin-bottom: 3.5rem;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 3.5rem;
}

.footer__contact a,
.footer__contact span {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--dark);
  text-decoration: none;
}

.footer__contact a:hover { opacity: 0.6; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo-img {
  width: 130px;
  height: auto;
  filter: brightness(0);
}

.footer__nav {
  display: flex;
  gap: 3.5rem;
}

.footer__link {
  font-family: var(--mono);
  font-size: 1.35rem; /* même taille que la page d'accueil */
  color: var(--dark);
  position: relative;
  transition: opacity 0.2s;
}

.footer__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--dark);
  transition: width 0.3s ease;
}

.footer__link:hover::after { width: 100%; }
.footer__link:hover { opacity: 0.6; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
  }

  .about-hero__right {
    align-items: center;
  }

  .timeline__inner {
    grid-template-columns: 1fr;
  }

  .timeline__bar { display: none; }
  .timeline__col--left { padding-top: 0; }

  .timeline__col--left .timeline__item,
  .timeline__col--right .timeline__item {
    justify-content: flex-start;
  }

  .timeline__col--left .timeline__text { text-align: left; padding-right: 0; padding-left: 1.5rem; }
  .timeline__col--left .timeline__dot { right: 0; }
  .timeline__col--right .timeline__dot { left: 0; }

  .footer__bottom {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
}