/* Fiche artiste : ouverture asymétrique, gros plans, parcours par année sur bande nuit. */

.fi { --fi-gap: var(--col-gap); }
.fi figure { margin: 0; }
.fi img { display: block; width: 100%; height: auto; }

.fi-pc { font: 600 .68rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; font-feature-settings: "case" 1; }
.fi-legende { display: flex; gap: .7rem; align-items: baseline; margin: .85rem 0 0; font-size: .76rem; line-height: 1.5; letter-spacing: .02em; color: var(--brume); }
.fi-legende::before { content: ""; flex: 0 0 18px; height: 1px; background: var(--accent); transform: translateY(-.25em); }
.fi-h2 { margin: 0 0 clamp(2rem, 4.5vw, 3.6rem) -.05em; font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 12vw, 7.4rem); line-height: .92; letter-spacing: -.02em; font-variant-numeric: lining-nums; }

/* Ouverture */
.fi-ouv { display: grid; padding: calc(68px + 2.2rem) var(--pad-r) clamp(3.5rem, 7vw, 6rem) var(--pad-l); }
.fi-fil { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 .4rem; color: var(--brume); }
.fi-fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; }
.fi-fil a:hover, .fi-fil a:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.fi-titre { margin: 0 0 2rem -.055em; font-family: var(--serif); font-weight: 300; font-size: clamp(3.3rem, 15.6vw, 11rem); line-height: .84; letter-spacing: -.025em; font-variant-numeric: lining-nums; }
.fi-titre > span { display: block; }
.fi-titre > span + span { padding-left: .5em; }
.fi-ouv__portrait { margin-right: calc(-1 * var(--pad-r)) !important; }
.fi-ouv__texte { padding-top: 2rem; }
.fi-ouv__texte::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: 1.5rem; background: var(--accent); }
.fi-accroche { max-width: 24ch; margin: 0 0 1.1rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem); line-height: 1.14; }
.fi-chapo { max-width: 34ch; margin: 0 0 1.8rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.18rem, 1.02rem + .5vw, 1.42rem); line-height: 1.45; color: var(--texte); }
.fi-disciplines { max-width: 34rem; margin: 0 0 2.2rem; border-top: 1px solid var(--trait); }
.fi-disciplines > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .62rem 0 .68rem; border-bottom: 1px solid var(--trait); }
.fi-disciplines dt { color: var(--accent); }
.fi-disciplines dd { margin: 0; font: 400 1.06rem/1.4 var(--serif); }
.fi-actions, .fi-fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; }

/* Gros plans et citation */
.fi-gros { padding: 0 0 clamp(4.5rem, 9vw, 8rem); }
.fi-gros__cote { display: grid; gap: 2.4rem; padding: 2.6rem var(--pad-r) 0 var(--pad-l); }
.fi-gros__paire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.fi-gros .fi-legende { margin-top: -1.4rem; }
.fi-citation blockquote { margin: 0; }
.fi-citation blockquote p { margin: 0; max-width: 19ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.95rem, 1.1rem + 2.3vw, 3.15rem); line-height: 1.08; letter-spacing: -.01em; }
.fi-guillemet { display: block; height: .62em; margin-bottom: .1em; font-style: normal; font-size: 2em; line-height: 1; color: var(--accent); }
.fi-guillemet::before { content: "\00AB"; }
.fi-citation blockquote p::after { content: "\00A0\00BB"; }
:lang(en) .fi-guillemet::before { content: "\201C"; }
:lang(en) .fi-citation blockquote p::after { content: "\201D"; }
.fi-citation figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; color: var(--accent); }
.fi-citation figcaption::before { content: ""; width: 48px; height: 1px; background: currentColor; }

/* Parcours : bande nuit dans les deux thèmes */
.fi-scene { --fond: #141614; --surface: #1d201c; --texte: #f3f0e8; --accent: #d6be83; --brume: #b5b8ae; --trait: #d6be8345; --focus: #d6be83;
  padding: clamp(4.5rem, 9vw, 8rem) var(--pad-r) clamp(5rem, 9vw, 8rem) var(--pad-l); background: var(--fond); color: var(--texte); }
:root:not([data-theme="light"]) .fi-scene { --fond: #0c0d0b; border-block: 1px solid var(--trait); }
.fi-chrono { margin: 0; padding: 0; list-style: none; }
.fi-an { padding: 1.5rem 0 1.9rem; border-top: 1px solid var(--trait); }
.fi-an--formation { border-bottom: 1px solid var(--trait); }
.fi-an__num { margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 300; font-size: 2.6rem; line-height: .9; color: var(--accent); font-variant-numeric: lining-nums; }
.fi-an__num--mot { font-style: italic; font-size: 2rem; }
.fi-an__liste { display: grid; gap: 1.45rem; margin: 0; padding: 0; list-style: none; }
.fi-ev p { margin: 0; }
.fi-ev__quand { margin-bottom: .35rem !important; color: var(--accent); }
.fi-ev__nom { font-family: var(--serif); font-weight: 400; font-size: clamp(1.32rem, 1.08rem + .6vw, 1.62rem); line-height: 1.12; }
.fi-ev--long .fi-ev__nom { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.04; letter-spacing: -.01em; }
.fi-ev__titres { margin-top: .2rem !important; font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.35; color: var(--brume); }
.fi-ev__det { margin-top: .35rem !important; max-width: 48ch; font-size: .88rem; line-height: 1.5; color: var(--brume); }

/* Fin de page */
.fi-fin { padding: clamp(3.5rem, 7vw, 6rem) var(--pad-r) clamp(3rem, 6vw, 5rem) var(--pad-l); }
.fi-fin__actions { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.fi-suite { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-top: 2.2rem; border-top: 1px solid var(--trait); }
.fi-suite__tous { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.fi-suite__tous .fleche { transition: transform var(--t-court) var(--ease); }
.fi-suite__tous:hover .fleche, .fi-suite__tous:focus-visible .fleche { transform: translateX(-3px); }
.fi-suite__prochaine { display: flex; flex-direction: column; gap: .7rem; min-height: 44px; color: var(--texte); text-decoration: none; }
.fi-suite__prochaine .fi-pc { color: var(--accent); }
.fi-suite__nom { font-family: var(--serif); font-weight: 300; font-size: clamp(2.7rem, 8vw, 6.6rem); line-height: .95; letter-spacing: -.015em; transition: color var(--t-court) var(--ease); }
.fi-suite__nom .fleche { font-size: .45em; color: var(--accent); vertical-align: .55em; }
.fi-suite__prochaine:hover .fi-suite__nom, .fi-suite__prochaine:focus-visible .fi-suite__nom { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .fi-titre > span { animation: fi-monte 1.1s var(--ease-out) both; }
  .fi-titre > span + span { animation-delay: .14s; }
  @keyframes fi-monte { from { opacity: 0; transform: translateY(.16em); } }
}

@media (min-width: 900px) {
  .fi-ouv { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--fi-gap); padding-top: calc(68px + clamp(3rem, 5.5vw, 6rem)); }
  .fi-ouv__tete { grid-column: 1 / span 7; grid-row: 1; }
  .fi-ouv__texte { grid-column: 1 / span 6; grid-row: 2; align-self: end; padding-top: 2.4rem; }
  .fi-ouv__portrait { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; }
  .fi-titre { font-size: clamp(4.4rem, 9.2vw, 10.6rem); margin-top: 1.2rem; }

  .fi-gros { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fi-gap); align-items: end; padding: 0 var(--pad-r) clamp(5rem, 9vw, 8rem) var(--pad-l); }
  .fi-gros__a { grid-column: 1 / span 6; }
  .fi-gros__cote { grid-column: 7 / -1; gap: clamp(2.6rem, 4vw, 3.6rem); padding: 0 0 0 clamp(1rem, 3vw, 3.5rem); }
  .fi-gros__paire { gap: var(--fi-gap); }

  .fi-an { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fi-gap); align-items: baseline; padding: 1.9rem 0 2.3rem; }
  .fi-an__num { grid-column: 1 / span 2; margin: 0; font-size: clamp(2.8rem, 4.2vw, 4.4rem); }
  .fi-an__num--mot { font-size: clamp(2rem, 2.6vw, 2.8rem); }
  .fi-an__liste { grid-column: 3 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.1rem var(--fi-gap); }
  .fi-ev--long { grid-column: span 2; }

  .fi-suite__prochaine { align-items: flex-end; text-align: right; }
}

@media (max-width: 899px) { .fi-pc { font-size: .75rem; letter-spacing: .16em; } .fi-fil a { font-size: .875rem; } }