/* =========================================
   ABOUT — Une phrase et un collage de photos
   Fond blanc comme le reste du site. Proportions
   relevees sur la maquette (ecran 2000 x 1127).
   ========================================= */

.about-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  /* Les mains sortent par les bords de l'ecran */
  overflow: hidden;
}

/* La phrase et les outils, a gauche, au tiers de la hauteur */
.about__intro {
  position: absolute;
  left: 6.65vw;
  top: 31vh;
  width: 29vw;
}

.about__lead {
  font-size: clamp(1.4rem, 1.95vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 1.18;
}

.about__lead em {
  font-style: normal;
  font-weight: inherit;
}

/* Specialite : une ligne, entre la phrase et les outils */
.about__grade {
  margin-top: 1.6rem;
  font-size: clamp(.95rem, 1.05vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.about__tools {
  margin-top: 2rem;
}

.about__label {
  display: block;
  margin-bottom: .6rem;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Logiciels en ligne, separes par un point median */
.about__tools-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(.85rem, .95vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
}

/* Le point suit chaque logiciel (sauf le dernier) : au retour a la ligne,
   il reste en fin de ligne au lieu d'en ouvrir une nouvelle. */
.about__tools-list li { white-space: nowrap; }

.about__tools-list li:not(:last-child)::after {
  content: "·";
  margin: 0 .5em;
  color: var(--ink-soft);
}

/* Collage : boite au rapport de la maquette, chaque photo y est placee en
   pourcentage. Les photos ont deja le bon format, rien n'est recadre. */
.about__collage {
  position: absolute;
  /* Un peu plus petit que la maquette, et descendu d'autant : la main du
     haut garde de l'air sous le header. */
  left: 53vw;
  top: 29vh;
  width: min(38vw, 86vh);
  aspect-ratio: 882 / 636;
}

.about__photo {
  position: absolute;
  height: auto;
  max-width: none;
  display: block;
}

/* Chaque photo mord tres legerement (0,4 %) sur sa voisine du dessous, au
   lieu de la toucher bord a bord : selon la taille d'ecran, l'arrondi des
   pourcentages laissait sinon un filet blanc entre deux photos. La photo du
   dessus cache le recouvrement, il ne se voit pas. */
.about__photo--1 { left: 0;     top: 0;     width: 49.1%; z-index: 2; }
.about__photo--2 { left: 48.7%; top: 8.8%;  width: 36.8%; z-index: 1; }   /* sous 1 */
.about__photo--3 { left: 11.7%; top: 39%;   width: 44.9%; z-index: 3; }   /* sur 1 et 2 */
.about__photo--4 { left: 56.2%; top: 59.4%; width: 43.4%; z-index: 4; }   /* sur 2 et 3 */

/* ── Mains ──
   Releve sur la maquette, en % du collage. Chaque main est un point
   d'ancrage (le bout de l'index) d'ou part l'image : elle y est amenee par
   translate (le bout de l'index est a 5 % / 6 % de l'image), puis
   retournee et tournee autour de ce point. Derriere les photos (z-index 0),
   si bien que les doigts qui touchent une photo passent dessous. */
.about__hand {
  position: absolute;
  z-index: 0;
  height: 0;
  pointer-events: none;
}

.about__hand img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 0 0;
}

/* En haut a droite : la main ouverte telle quelle, le bras sort par la
   droite de l'ecran. */
.about__hand--top { left: 66%; top: -24%; width: 100%; }
.about__hand--top img { transform: rotate(4deg) translate(-5%, -6%); }

/* En bas : la main qui tient le filtre, montee du bas vers le portrait.
   Ancree par le bout du pouce (80,5 % / 77,7 % de l'image) ; le filtre
   passe derriere le portrait. */
/* Devant les photos (la main du haut reste derriere) */
.about__hand--bottom { left: 28.1%; top: 99%; width: 102%; z-index: 5; }
.about__hand--bottom img { transform: rotate(-33deg) translate(-80.5%, -77.7%); }

/* Ecran etroit : la phrase au-dessus, le collage en dessous sur toute la
   largeur. */
@media (max-width: 900px) {
  .about-page {
    padding: 8rem var(--gutter) 4rem;
  }

  .about__intro,
  .about__collage {
    position: relative;
    left: auto;
    top: auto;
  }

  .about__intro { width: auto; }

  .about__lead {
    max-width: 22ch;
    font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  }

  .about__collage {
    width: 100%;
    margin-top: 3rem;
  }

  /* Pas la place pour les mains : elles seraient coupees net en bas de page */
  .about__hand { display: none; }
}