/* ===== PAGE BIO — STYLES SCOPÉS (préfixe bio-) ===== */
:root{
  /* Fallback d'abord (compat anciens navigateurs) */
  --timeline-bg-color: #f4e9d8;
  /* Version moderne (sera prioritaire si supportée) */
  --timeline-bg-color: lab(88.45% -25.24 55.46);
  /* alias rétrocompat si d’autres fichiers l’utilisent */
  --timaline-bg-color: var(--timeline-bg-color);
}

/* Palette (hérite de ton thème global ; surcharge locale) */
.bio-page{
  --ink: #eae7e2;
  --muted: #b9b3a8;
  --bio-hero-bg: url('/assets/bio/img/hero3.jpg');

  color: var(--ink);

  /* Fond global sombre texturé */
  background:
    radial-gradient(1000px 420px at 50% -8%, rgba(201,168,106,.10), rgba(201,168,106,0) 60%),
    radial-gradient(900px 520px at 115% 6%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.16) 100%),
    #131315;
}

/* ========== En-tête texte (bio-header) ========== */
.bio-header{
  text-align: center;
  padding: 0 20px 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(201,168,106,0.10), rgba(239,231,217,0.02) 45%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.28), transparent 60%);
  border-bottom: 1px solid rgba(201,168,106,.20);
}
.bio-header h1{
  font-family:"Playfair Display", serif;
  font-size: clamp(36px, 6vw, 64px);
  margin: 0 0 .2em;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.bio-header p{
  font-size: 1.1rem;
  color: var(--muted);
}

/* ========== Timeline horizontale sticky ========== */
.bio-menu-sticky{
  position: sticky;
  top: var(--header, 64px);
  z-index: 950;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(201,168,106,.25);
  display: flex;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(201,168,106,0.12), rgba(239,231,217,0.03) 60%, rgba(0,0,0,0)),
    rgba(15,15,16,.92);
  backdrop-filter: saturate(120%) blur(6px);
}
.bio-menu-track{
  display:flex; gap:14px;
  overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
  position:relative;
  max-width: min(1400px, 92vw);
}
.bio-menu-track::-webkit-scrollbar{ display:none; }

/* Ombres latérales (visibles si classes posées par JS) */
.bio-menu-track::before,
.bio-menu-track::after{
  content:""; position:absolute; top:0; width:28px; height:100%;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.bio-menu-track::before{ left:0;  background: linear-gradient(to right, rgba(212,175,55,0.38), transparent); }
.bio-menu-track::after { right:0; background: linear-gradient(to left,  rgba(255,255,255,0.14), transparent); }
.bio-menu-track.scrolled-left::before{ opacity:1; }
.bio-menu-track.can-scroll-right::after{ opacity:1; }

.bio-menu-sticky a, .bio-menu-track a{
  color: var(--ink);
  font-weight: 700; font-size: .92rem;
  display: inline-block; flex: 0 0 auto;
  padding: .35em .8em .25em;
  border-radius: 999px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: transform .25s ease, opacity .25s ease, color .25s ease, text-shadow .25s ease, background-size .25s ease;
}
.bio-menu-track a:hover{
  color: var(--gold);
  background-size:100% 2px;
  text-shadow:0 0 10px rgba(201,168,106,.35);
}
.bio-menu-track a.dist-0{
  transform: translateY(-1px) scale(1.08);
  color: var(--gold); background-size:100% 2px;
  text-shadow:0 0 10px rgba(201,168,106,.35); opacity:1;
}
.bio-menu-track a.dist-1{ transform: scale(.96); opacity:.78; }
.bio-menu-track a.dist-2{ transform: scale(.90); opacity:.62; }
.bio-menu-track a.dist-3,
.bio-menu-track a.dist-4,
.bio-menu-track a.dist-5{ transform: scale(.86); opacity:.46; }

/* ========== Hero bio (rendu conservé, titre réduit) ========== */
.bio-hero{
  position: relative;
  text-align: center;
  color: #fff;
  /* (on conserve visuellement ta taille actuelle) */
  padding: clamp(80px, 180vh, 280px);
  background: var(--bio-hero-bg) center/cover no-repeat fixed;
}
.bio-hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(100% 60% at 50% 10%, transparent 0 60%, rgba(0,0,0,.5) 85%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.bio-hero .bio-hero-content{
  position:relative; z-index:1; display:inline-block;
  background: linear-gradient(180deg, rgba(24,24,28,.65), rgba(10,10,12,.45));
  border: 1px solid rgba(201,168,106,.45);
  border-radius: 12px; padding: 28px 32px;
  box-shadow: 0 18px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
/* ↓ réduction du titre dans le hero (cible h1 ET h2) */
.bio-hero .bio-hero-content h1,
.bio-hero .bio-hero-content h2{
  margin:0 0 .25em;
  font-family:"Playfair Display", serif;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 44px); /* AVANT : hérite d’un h1 très grand */
  line-height: 1.15;
}
.bio-hero .bio-hero-content p{ margin:.2em 0 0; color:#eee }

/* ========== Layout principal ========== */
.bio-main-container{
  position: relative; z-index: 1;
  max-width: none; width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 40px;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  padding-top: 48px; padding-bottom: 60px;
  /* safe areas iOS */
  padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right));
}

/* ========== Timeline verticale ========== */
.bio-timeline-vertical{
  position: sticky;
  top: var(--bio-sticky-top, calc(var(--header,64px) + 56px));
  z-index: 800;
  align-self: start; text-align: right;
  padding: 12px 14px 12px 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10)),
    rgba(19,19,21,.86);
  border: 1px solid rgba(201,168,106,.28);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  backdrop-filter: saturate(115%) blur(4px);
  -webkit-backdrop-filter: saturate(115%) blur(4px);
}
.bio-timeline-vertical ul{ list-style:none; margin:0; padding:0; }
.bio-timeline-vertical li{
  margin: 22px 0; cursor: pointer; color: var(--muted); opacity: .85;
  transform-origin: right center;
  transition: transform .28s ease, opacity .28s ease, color .28s ease, text-shadow .28s ease;
}
.bio-timeline-vertical li:hover{
  opacity:1; color:var(--ink); transform: scale(1.03);
  text-shadow:0 0 6px rgba(201,168,106,.25);
}
.bio-timeline-vertical .bio-period-range,
.bio-timeline-vertical .period-range{ display:block; font-weight: 800; letter-spacing:.02em; }
/* Fallback color puis color-mix moderne */
.bio-timeline-vertical .bio-period-title,
.bio-timeline-vertical .period-title{
  display:block;
  color: #b9b3a8; /* fallback */
  color: color-mix(in lab, var(--muted) 88%, white 12%);
  font-size:.85rem;
}

.bio-timeline-vertical li.dist-0{
  transform: scale(1.18);
  color: var(--gold); opacity:1;
  text-shadow: 0 0 10px rgba(201,168,106,.45);
}
.bio-timeline-vertical li.dist-1{ transform: scale(.96); opacity:.70; color: var(--ink); }
.bio-timeline-vertical li.dist-2{ transform: scale(.88); opacity:.55; color: var(--muted); }
.bio-timeline-vertical li.dist-3,
.bio-timeline-vertical li.dist-4,
.bio-timeline-vertical li.dist-5{ transform: scale(.82); opacity:.38; color: var(--muted); }

.bio-timeline-vertical::before{
  content:""; position:absolute; inset:6px; border-radius:10px; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.035) 30px 31px);
  opacity:.35;
}

/* Marqueur doré */
.bio-timeline-marker{
  position: absolute; right: -8px; width:10px; height:10px; border-radius:50%;
  background: var(--gold); box-shadow:0 0 10px var(--gold);
  transform: translateY(-50%); transition: top .25s ease; pointer-events:none;
}

/* ========== Colonne contenu ========== */
.bio-timeline-sections{ min-width:0; }
.bio-timeline-sections .period{ margin: 0 0 56px; }

.bio-timeline-sections .period-title{
  font-size: clamp(22px, 2.2vw, 28px);
  padding-left: 14px; border-left: 2px solid var(--gold);
  margin: 0 0 10px; transition: transform .25s ease, color .25s ease, opacity .25s ease;
}
.bio-timeline-sections .period-title.dist-0{ transform: translateX(0) scale(1.04); color: var(--gold); opacity:1; }
.bio-timeline-sections .period-title.dist-1{ opacity:.78; }
.bio-timeline-sections .period-title.dist-2{ opacity:.60; }
.bio-timeline-sections .period-title.dist-3,
.bio-timeline-sections .period-title.dist-4,
.bio-timeline-sections .period-title.dist-5{ opacity:.45; }

.bio-timeline-sections .period-summary{
  margin: 0 0 18px; color: var(--muted); font-style: italic;
}

/* Cartes évènements */
.bio-timeline-sections .event{ margin: 0 0 28px; }
.bio-timeline-sections .event-content{
  position: relative;
  display:flex; align-items:flex-end; gap:22px;
  padding: clamp(14px, 2.4vw, 24px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10)),
    #131416;
  border: 1px solid rgba(201,168,106,.30);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.bio-timeline-sections .event-content::before{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.85; pointer-events:none;
}

.bio-timeline-sections .text{ flex:1; min-width:0; }
.bio-timeline-sections .text h3,
.bio-timeline-sections .text h4{
  margin: 0 0 .25em;
  font-size: clamp(20px, 2.2vw, 26px);
}
.bio-timeline-sections .text p{
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.7;
}

/* Wrapper image — éviter display:contents (accessibilité/bugs) */
.bio-timeline-sections .image{ 
  flex:0 0 auto; 
  grid-area: media; 
  min-width: 0; 
  display: block; 
}
.bio-timeline-sections .image img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(201,168,106,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Hover */
.bio-timeline-sections .event-content:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 14px rgba(201,168,106,.28);
}

/* Séparateur décoratif */
.bio-timeline-sections .separator-deco{
  height:1px; background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.75; margin:32px 0 50px;
}

/* Reveal */
.bio-page .reveal{
  opacity:0; transform: translateY(28px) scale(.985); filter: blur(3px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.bio-page .reveal.is-visible{
  opacity:1; transform: translateY(0) scale(1); filter:none;
}

/* Responsive */
@media (max-width: 980px){
  .bio-main-container{ grid-template-columns: 1fr; }
  .bio-timeline-vertical{
    position: relative; top: 0; text-align: left;
    padding: 0 0 8px; border-bottom: 1px dashed rgba(201,168,106,.25);
    margin-bottom: 14px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: none;
  }
  .bio-timeline-vertical::before{ display:none; }
  .bio-timeline-marker{ display:none; }
  .bio-timeline-sections .event-content{ flex-direction: column; align-items: stretch; }
  .bio-timeline-sections .image img{ max-width: 100%; height:auto; }
}

/* ===== Calibrage lisibilité & proportions ===== */
.bio-timeline-sections .text { max-width: 640px; }
.bio-timeline-sections .event { margin-bottom: clamp(40px, 6vh, 64px); }
.bio-timeline-sections .event-content{
  align-items: center;
  gap: clamp(18px, 2.2vw, 28px);
  padding: clamp(18px, 2.6vw, 28px);
  /* (SUPPRIME le cap de hauteur qui rognait du contenu)
     AVANT: max-height: 780px; */
}

.bio-timeline-sections .image{ flex: 0 0 auto; }
.bio-timeline-sections .image img{
  width: clamp(280px, 36vw, 520px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(201,168,106,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* variante portrait optionnelle */
.bio-timeline-sections .image img.img--portrait{
  aspect-ratio: auto;
  width: clamp(240px, 26vw, 380px);
}

/* Grille alternée */
.bio-timeline-sections .event-content{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "text media";
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 28px);
}
.bio-timeline-sections .event--image-left  .event-content{ grid-template-areas: "media text"; grid-template-columns: 0.95fr 1.05fr; }
.bio-timeline-sections .event--image-right .event-content{ grid-template-areas: "text  media"; grid-template-columns: 1.05fr 0.95fr; }
.bio-timeline-sections .event .text  { grid-area: text;  min-width: 0; }
.bio-timeline-sections .event .image { grid-area: media; min-width: 0; }

/* Texte confortable */
.bio-timeline-sections .event .text{ max-width: 680px; }

/* Empilement mobile */
@media (max-width: 980px){
  .bio-timeline-sections .event-content{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
  }
  .bio-timeline-sections .event .image img{
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* Bonus mise en forme */
.bio-timeline-sections .text .kicker{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .35em;
  display: inline-block;
}
.bio-timeline-sections .text .meta{
  margin-top: .6em;
  font-size: .95rem;
  color: var(--muted);
  opacity: .9;
}

/* Si le texte est très court, garde une présence visuelle */
.bio-timeline-sections .event .image img{
  min-height: clamp(220px, 30vh, 460px);
}

/* Petits effets premium */
.bio-timeline-sections .text p{ line-height: 1.7; }
.bio-timeline-sections .text .meta{ color: var(--muted); margin-top: .6em; }

/* ===== Lecture immersive & progressive ===== */
.bio-chips {
  display:flex; flex-wrap:wrap; gap:8px 10px; margin: 6px 0 10px;
}
.bio-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: .25em .6em; border:1px solid rgba(201,168,106,.35);
  border-radius:999px; font-size:.85rem; color: var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.bio-lede { font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--ink); line-height:1.75; }
.bio-lede.dropcap:first-letter{
  float:left; font-family:"Playfair Display", serif; font-size:2.6em; line-height:.85;
  padding:.05em .18em 0 0; color: var(--gold);
}
.bio-body { position: relative; overflow: hidden; transition: max-height .35s ease, mask-image .35s ease; }
.bio-body.is-collapsed {
  max-height: 11.5em;
  mask-image: linear-gradient(to bottom, black 75%, transparent);
}
.bio-readmore {
  margin-top: 10px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:.45em .8em; border-radius:999px;
  border:1px solid rgba(201,168,106,.45); color: var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.bio-readmore:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35); border-color: var(--gold); }
.bio-readmore .caret{ display:inline-block; transition: transform .25s ease; }
.bio-readmore[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.bio-quote {
  margin: 14px 0; padding: 10px 14px 10px 18px;
  border-left:3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,168,106,.08), transparent 70%);
  color: var(--ink);
  font-family:"Playfair Display", serif;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height:1.6;
}
.bio-facts { margin: 10px 0 6px; padding: 0 0 0 1.1em; }
.bio-facts li {
  margin: .25em 0; color: var(--muted);
  list-style: none; position: relative;
}
.bio-facts li::before{ content: "—"; position:absolute; left:-1.1em; color: var(--gold); }
.bio-caption { display:block; margin-top:6px; font-size:.85rem; color: var(--muted); opacity:.9; }
.bio-timeline-sections .event .text > *:first-child { margin-top: 0; }
.bio-timeline-sections .event .text > *:last-child  { margin-bottom: 0; }

/* ===== Respect des préférences utilisateur (motion) ===== */
@media (prefers-reduced-motion: reduce){
  .bio-page *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}