/* ==========================================================================
   PAGE : ABOUT (pages/about.html)
   Thème sombre : noir profond, texte blanc cassé, accent orange ONIX.
   Le thème redéfinit les tokens → header, footer et composants suivent seuls.
   1. Hero : fil d'Ariane, collage de 3 photos, titre géant qui chevauche la photo centrale
   2. Intro : localisation, phrase d'accroche, deux paragraphes décalés
   3. L'équipe : courbe SVG tracée au scroll (about-page.js), 4 étapes autour
   4. Contact
   ========================================================================== */

.theme-about {
  --color-bg: #050505;
  --color-text: #f2f0ec;
  --color-text-muted: rgba(242, 240, 236, 0.6);
  --color-line: rgba(242, 240, 236, 0.14);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---- Header & footer en version sombre ---- */
.theme-about .site-header::before {
  background: linear-gradient(to bottom,
    rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0.92) 20%, rgba(5, 5, 5, 0.75) 40%,
    rgba(5, 5, 5, 0.5) 60%, rgba(5, 5, 5, 0.22) 80%, rgba(5, 5, 5, 0) 100%);
}
.theme-about .media--logo-header img { filter: invert(1); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.about-hero {
  position: relative;
  text-align: center;
  padding-top: var(--space-6);
}

.about-crumb {
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  margin: 0;
}
.about-crumb a:hover { color: var(--color-text); }
.about-crumb span { color: var(--color-accent); }

/* Le collage est dimensionné par la photo centrale ; les deux petites photos
   sont placées en % de sa largeur (elles débordent sur les côtés). */
.about-collage {
  position: relative;
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 4 / 5;
  margin: var(--space-4) auto 0;
}
.about-collage__item {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-hero);
  will-change: transform;
}
.about-collage__item img { width: 100%; height: 100%; object-fit: cover; }
.about-collage__item--main { inset: 0; }
.about-collage__item--portrait { width: 40%; aspect-ratio: 1; left: -82%; top: -14%; }
.about-collage__item--bindings { width: 50%; aspect-ratio: 16 / 10; right: -66%; top: 2%; }
.about-collage__item--flag { width: 38%; aspect-ratio: 4 / 5; right: -86%; bottom: 4%; z-index: 1; }
.about-collage__item--flag img { object-position: 45% 50%; }

/* Titre géant : passe devant la photo centrale (marge négative) */
.about-title {
  position: relative;
  z-index: 2;
  margin-top: -0.42em;
  font-weight: 600;
  font-size: min(21vw, 19.5rem);
  line-height: 0.8;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

/* ==========================================================================
   2. INTRO
   ========================================================================== */
.about-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-8) var(--space-9);
}
.about-intro__plus {
  --plus: 22px;
  width: var(--plus);
  height: var(--plus);
  border-radius: 3px;
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-bg), var(--color-bg)) center / 2px 12px no-repeat,
    var(--color-text);
}
.about-intro__place {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.about-intro__rule {
  width: 1px;
  height: 72px;
  margin: var(--space-4) 0 var(--space-5);
  background: var(--color-text);
}
.about-intro__statement {
  max-width: 17em;
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Deux paragraphes en escalier, comme sur la maquette */
.about-intro__texts {
  width: 100%;
  margin-top: var(--space-6);
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.about-intro__texts p { max-width: 22rem; margin: 0; }
.about-intro__texts p:first-child { margin-left: 50%; }
.about-intro__texts p:last-child { margin-left: 50%; margin-top: var(--space-3); }

/* ==========================================================================
   3. L'ÉQUIPE — courbe + étapes
   Tout est placé en % du repère du SVG (viewBox 1000 × 1700) : le bloc garde
   le même ratio, donc les textes restent collés à leur point quelle que soit la largeur.
   ========================================================================== */
.about-team { padding-block: var(--space-7); }

.team-map {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 1000 / 1700;
}
.team-map__curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.team-map__track,
.team-map__line { fill: none; stroke-linecap: round; }
.team-map__track { stroke: rgba(var(--color-accent-rgb), 0.22); stroke-width: 1.5; }
.team-map__line {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;   /* about-page.js le fait varier de 1 (rien) à 0 (tout tracé) */
}
.team-map__dot {
  fill: var(--color-bg);
  stroke: var(--color-accent);
  stroke-width: 3;
  transition: fill 300ms var(--ease-out);
}
.team-map__dot.is-on { fill: var(--color-accent); }

.team-map__label {
  position: absolute;
  left: 57.5%;
  top: 2.35%;
  transform: translateY(-50%);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-lg);
  color: var(--color-accent);
}

.team-map__num {
  position: absolute;
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-md);
  color: var(--color-accent);
  line-height: 1;
}
.team-map__num--1 { left: 51.5%; top: 32.9%; transform: translate(-100%, -110%); }
.team-map__num--2 { left: 28.5%; top: 51.8%; transform: translate(-100%, -110%); }
.team-map__num--3 { left: 46%; top: 67.6%; transform: translate(-50%, -190%); }
.team-map__num--4 { left: 76.5%; top: 85.3%; transform: translateY(-50%); }

.team-item { position: absolute; }
.team-item--1 { left: 8%;  top: 27%; width: 30%; }
.team-item--2 { left: 36%; top: 53.5%; width: 24%; }
.team-item--3 { left: 63%; top: 57%; width: 30%; }
.team-item--4 { left: 20%; top: 80%; width: 32%; }

.team-item__title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
.team-item__title::before {
  content: "";
  flex: none;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
}
.team-item--1 .team-item__title::before { background: var(--color-accent); }
.team-item__role {
  margin: 0.2em 0 var(--space-2);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-accent);
}
.team-item p:not(.team-item__role) {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.team-item__link {
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--transition), color var(--transition);
}
.team-item__link:hover { color: var(--color-accent); border-color: currentColor; }

/* Objets détourés (fond transparent) */
.team-map__object {
  position: absolute;
  height: auto;
  pointer-events: none;
  will-change: transform;
}
.team-map__object--gyro { left: 0; top: 61%; width: 24%; }
.team-map__object--ora { left: 82%; top: 70%; width: 13%; }

/* ==========================================================================
   4. CONTACT
   ========================================================================== */
.about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-9);
  text-align: center;
}
.about-cta__title {
  font-weight: 500;
  font-size: clamp(2.25rem, 1rem + 4.5vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Tablette / mobile : la courbe disparaît, les étapes s'empilent le long d'une ligne verticale */
@media (max-width: 1000px) {
  .team-map {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    max-width: 34rem;
    padding-left: 2.25rem;
  }
  .team-map::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.6em;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(var(--color-accent), rgba(var(--color-accent-rgb), 0.15));
  }
  .team-map__curve,
  .team-map__num { display: none; }
  .team-map__label,
  .team-item,
  .team-map__object { position: relative; left: auto; top: auto; transform: none; width: auto; }
  .team-map__label { order: 0; }
  .team-item--1 { order: 1; }
  .team-item--2 { order: 2; }
  .team-map__object--gyro { order: 3; width: 70%; max-width: 320px; }
  .team-item--3 { order: 4; }
  .team-map__object--ora { order: 5; width: 40%; max-width: 180px; align-self: flex-end; }
  .team-item--4 { order: 6; }
  /* Le point de chaque titre se pose sur la ligne verticale */
  .team-item__title::before { position: absolute; left: calc(-2.25rem + 0.45rem - 0.17em + 1px); }
  .team-item__title { position: relative; }
}

@media (max-width: 760px) {
  .about-collage { width: 58vw; margin-top: var(--space-6); }
  .about-collage__item--portrait { width: 42%; left: -34%; top: -10%; }
  .about-collage__item--flag { width: 40%; right: -30%; bottom: 6%; }
  .about-collage__item--bindings { width: 48%; right: auto; left: -34%; top: auto; bottom: 22%; }
  .about-intro { padding-block: var(--space-7) var(--space-8); }
  .about-intro__texts p:first-child,
  .about-intro__texts p:last-child { margin-left: 0; max-width: none; }
  .about-intro__texts p + p { margin-top: var(--space-4); }
}