/* Site de Tristan Parent — galerie sombre.
   Parti pris assumé d'un seul monde visuel : le fond sombre sert les planches,
   claires et terreuses. Toutes les couleurs sont posées explicitement. */

:root {
  --noir: #1a1a1c;
  --surface: #212124;
  --surface-2: #17171a;
  --bord: #34343b;
  --clair: #f0eee9;
  --texte: #d0cec9;
  --doux: #8a8781;
  --ambre: #d99a3f;
  --ambre-sourd: #8d6529;

  --titre: Jost, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --marge: clamp(18px, 4vw, 42px);
  --large: 1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--titre);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--clair); }

:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }

.capitale, .tete .nom, .tete .liens a, .onglet, .bouton, .intitule,
.pastille, .fonction, .marque, .pied-liens a {
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ entête */

.tete {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px var(--marge);
  border-bottom: 1px solid var(--bord);
  max-width: var(--large);
  margin: 0 auto;
}
.tete .nom { font-size: 14px; font-weight: 500; color: var(--clair); letter-spacing: .2em; }
.tete .liens { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.tete .liens a { font-size: 11px; color: var(--doux); }
.tete .liens a:hover { color: var(--clair); }
.tete .liens a.actif { color: var(--ambre); }

main { max-width: var(--large); margin: 0 auto; }

/* ----------------------------------------------------------------- affiche */

.affiche { position: relative; }
.affiche .image { aspect-ratio: 21 / 9; overflow: hidden; }
.affiche .image img { width: 100%; height: 100%; object-fit: cover; }
.affiche .voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,26,28,.62) 0%, rgba(26,26,28,.06) 30%, rgba(26,26,28,.99) 92%),
    linear-gradient(90deg, rgba(26,26,28,.72) 0%, rgba(26,26,28,0) 62%);
}
.affiche .texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--marge) 26px; }
.affiche .sur-titre {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--texte);
  max-width: 52ch;
}
.affiche h1 {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(32px, 6.4vw, 66px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--clair);
  margin: 0 0 8px;
  line-height: 1;
}
.situe { font-size: 12px; color: var(--doux); letter-spacing: .08em; margin: 0 0 16px; }

@media (max-width: 720px) {
  .affiche .image { aspect-ratio: 4 / 3; }
  .affiche .sur-titre { display: none; }
}

/* ------------------------------------------------------------ rôle chiffré */

.role {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--ambre-sourd); border-radius: 2px;
  overflow: hidden; width: fit-content; max-width: 100%;
}
.role .fonction {
  padding: 9px 16px; background: var(--ambre); color: var(--noir);
  font-size: 11.5px; font-weight: 600;
}
.role .chiffre {
  padding: 9px 16px; border-left: 1px solid var(--ambre-sourd);
  font-family: var(--mono); font-size: 11px; color: var(--clair);
  font-variant-numeric: tabular-nums; display: flex; align-items: center;
}
.role .chiffre b { color: var(--ambre); font-weight: 500; margin-right: .4em; }

/* ---------------------------------------------------------------- boutons */

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px; border: 1px solid var(--bord); border-radius: 2px;
  font-size: 11px; color: var(--texte); background: rgba(26,26,28,.62);
  transition: border-color .15s, color .15s;
}
.bouton:hover { border-color: var(--ambre-sourd); color: var(--clair); }
.bouton.mineur { color: var(--doux); cursor: default; }
.bouton.mineur:hover { border-color: var(--bord); color: var(--doux); }
.fleche {
  width: 0; height: 0; flex: none;
  border-left: 7px solid var(--ambre);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.cadenas {
  width: 9px; height: 9px; flex: none; position: relative;
  border: 1.5px solid var(--doux); border-radius: 1px; margin-top: 4px;
}
.cadenas::before {
  content: ""; position: absolute; left: 1.5px; top: -4.5px;
  width: 3px; height: 4px;
  border: 1.5px solid var(--doux); border-bottom: 0; border-radius: 2px 2px 0 0;
}

/* ----------------------------------------------------------- disponibilité */

.dispo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 14px;
  padding: 15px var(--marge); border-top: 1px solid var(--bord);
}
.dispo .pastille {
  font-size: 10px; color: var(--ambre);
  border: 1px solid var(--ambre-sourd); border-radius: 2px;
  padding: 3px 9px; white-space: nowrap;
}
.dispo p { margin: 0; font-size: 13px; color: var(--doux); max-width: 84ch; }
.dispo p b { color: var(--texte); font-weight: 500; }
.dispo a { color: var(--texte); border-bottom: 1px solid var(--ambre-sourd); }
.dispo a:hover { color: var(--ambre); }

/* -------------------------------------------------------------- sélecteur */

.selecteur {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px;
  padding: 16px var(--marge);
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
  background: var(--surface);
}
.selecteur .intitule { font-size: 11px; color: var(--doux); }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.onglet {
  font-family: inherit; font-size: 11.5px; color: var(--texte);
  background: transparent; border: 1px solid var(--bord); border-radius: 2px;
  padding: 7px 14px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.onglet:hover { border-color: var(--doux); color: var(--clair); }
.onglet[aria-pressed="true"] {
  background: var(--ambre); border-color: var(--ambre);
  color: var(--noir); font-weight: 600;
}
.compteur {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--doux); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- bande démo */

.demo {
  display: grid; gap: 20px; align-items: center;
  padding: 26px var(--marge); border-bottom: 1px solid var(--bord);
  background: linear-gradient(180deg, rgba(217,154,63,.07), transparent);
}
@media (min-width: 760px) { .demo { grid-template-columns: 300px 1fr; } }
.demo .ecran {
  position: relative; aspect-ratio: 16 / 9; background: var(--surface-2);
  border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.demo .ecran:hover { border-color: var(--ambre-sourd); }
.demo .rond {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ambre);
  display: flex; align-items: center; justify-content: center;
}
.demo .rond i {
  width: 0; height: 0; margin-left: 4px;
  border-left: 13px solid var(--ambre);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.demo .duree {
  position: absolute; right: 8px; bottom: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--doux);
}
.demo h2 { font-size: 14px; color: var(--clair); margin: 0 0 8px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.demo p { margin: 0; font-size: 14px; color: var(--doux); max-width: 58ch; }
.demo .marque {
  display: inline-block; margin-bottom: 11px;
  font-family: var(--mono); font-size: 10px; color: var(--ambre);
  border: 1px solid var(--ambre-sourd); padding: 3px 8px; border-radius: 2px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ----------------------------------------------------------------- grille */

.grille {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  padding: 28px var(--marge) 36px;
}
@media (min-width: 640px) { .grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .grille { grid-template-columns: repeat(4, 1fr); } }

.piece[hidden] { display: none; }
.piece .vue {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); border: 1px solid transparent;
  transition: border-color .15s;
}
.piece .vue img { width: 100%; height: 100%; object-fit: cover; }
.piece a:hover .vue { border-color: var(--ambre-sourd); }
.piece h3 {
  margin: 10px 0 2px; font-size: 12.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clair);
}
.piece p { margin: 0; font-size: 11.5px; color: var(--doux); }

/* ------------------------------------------------------------ page projet */

.projet-tete { padding: 40px var(--marge) 30px; max-width: 92ch; }
.fil { font-family: var(--mono); font-size: 11px; color: var(--doux); margin: 0 0 18px; letter-spacing: .06em; }
.fil a:hover { color: var(--ambre); }
.fil span { margin: 0 6px; }
.projet-tete h1 {
  font-weight: 300; font-size: clamp(30px, 5.4vw, 54px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--clair);
  margin: 0 0 8px; line-height: 1.05;
}
.role-detail { font-size: 15px; color: var(--texte); margin: 18px 0 0; max-width: 68ch; }
.synopsis {
  font-size: 16px; color: var(--clair); font-style: italic;
  margin: 18px 0 0; padding-left: 16px; border-left: 2px solid var(--ambre-sourd);
  max-width: 62ch;
}
.projet-tete .texte { font-size: 15px; color: var(--doux); margin: 18px 0 0; max-width: 68ch; }
.equipe { font-size: 12.5px; color: var(--doux); margin: 22px 0 0; }
.equipe span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ambre); margin-right: 10px;
}

.video { padding: 10px var(--marge) 0; }
.cadre-video { aspect-ratio: 16 / 9; border: 1px solid var(--bord); background: var(--surface-2); }
.cadre-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.embargo {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 22px var(--marge) 0; padding: 14px 16px;
  background: var(--surface); border-left: 2px solid var(--ambre-sourd);
}
.embargo .cadenas { margin-top: 6px; }
.embargo p { margin: 0; font-size: 13px; color: var(--doux); }
.embargo b { color: var(--clair); font-weight: 500; }

.planche { padding: 40px var(--marge) 0; }
.planche-tete { margin-bottom: 14px; }
.planche h2 {
  font-size: 13px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clair); margin: 0 0 4px;
}
.legende { margin: 0; font-size: 13px; color: var(--doux); max-width: 70ch; }
.vue-large { margin: 0 0 14px; border: 1px solid var(--bord); background: var(--surface); }
.vue-large img { width: 100%; }

/* --------------------------------------------------------------- parcours */

.parcours-tete { padding: 48px var(--marge) 8px; }
.parcours-tete h1 {
  font-weight: 300; font-size: clamp(30px, 5.4vw, 52px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--clair); margin: 0 0 10px;
}
.parcours-tete .sous { margin: 0 0 18px; font-size: 12px; color: var(--doux); letter-spacing: .08em; }
.parcours-tete .accroche { margin: 0; font-size: 17px; color: var(--texte); max-width: 56ch; }

.bloc { padding: 34px var(--marge) 0; max-width: 78ch; }
.bloc h2 {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambre); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bord);
}
.bloc p { margin: 0 0 13px; font-size: 15px; color: var(--doux); }
.bloc p b { color: var(--texte); font-weight: 500; }
.bloc a { color: var(--texte); border-bottom: 1px solid var(--ambre-sourd); }
.bloc a:hover { color: var(--ambre); }

.contacts { display: flex; flex-wrap: wrap; gap: 10px; }
.contacts a {
  border: 1px solid var(--bord); border-radius: 2px; padding: 9px 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte);
  transition: border-color .15s, color .15s;
}
.contacts a:hover { border-color: var(--ambre-sourd); color: var(--clair); }
.contacts .contact-fort { border-color: var(--ambre-sourd); color: var(--clair); text-transform: none; letter-spacing: .04em; }

/* -------------------------------------------------------------------- pied */

.pied {
  max-width: var(--large); margin: 56px auto 0;
  padding: 24px var(--marge) 40px; border-top: 1px solid var(--bord);
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied-liens a { font-size: 11px; color: var(--doux); }
.pied-liens a:hover { color: var(--ambre); }
.pied-liens a.fort { color: var(--clair); text-transform: none; letter-spacing: .04em; font-size: 13px; }
.pied-mention { margin: 14px 0 0; font-size: 11.5px; color: var(--doux); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------- fonctions tenues sur un projet */

.fonctions { padding: 34px var(--marge) 0; }
.fonctions h2 {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambre); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bord);
}
.fonctions ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 7px 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.fonctions li {
  font-family: var(--mono); font-size: 11.5px; color: var(--texte);
  padding-left: 14px; position: relative;
}
.fonctions li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--ambre-sourd);
}

/* ------------------------------------------------------------- le parcours */

.parcours-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bord); border: 1px solid var(--bord); }
.parcours-liste li { background: var(--noir); padding: 14px 18px; display: grid; gap: 2px 20px; }
@media (min-width: 620px) { .parcours-liste li { grid-template-columns: 130px 1fr; } }
.parcours-liste .periode { font-family: var(--mono); font-size: 11px; color: var(--ambre); font-variant-numeric: tabular-nums; }
.parcours-liste .intitule { font-size: 15px; color: var(--clair); }
.parcours-liste .detail { font-size: 13px; color: var(--doux); grid-column: -2 / -1; }

.logiciels { display: flex; flex-wrap: wrap; gap: 8px; }
.logiciels span {
  font-family: var(--mono); font-size: 11px; color: var(--doux);
  border: 1px solid var(--bord); border-radius: 2px; padding: 5px 11px;
}

/* ------------------------------------------------------------ les extraits */

.extraits { padding: 40px var(--marge) 0; }
.extraits h2 {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambre); margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bord);
}
.extrait { margin: 0; }
.extrait video {
  width: 100%; display: block; aspect-ratio: 2048 / 858;
  background: var(--surface-2); border: 1px solid var(--bord);
}
.extrait figcaption { margin-top: 9px; font-size: 12.5px; color: var(--doux); line-height: 1.55; }
.extrait figcaption b {
  color: var(--clair); font-weight: 400; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.extrait .duree { font-family: var(--mono); font-size: 10.5px; color: var(--ambre); margin-left: 8px; }
.extraits-courts {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}