/* ===== RÉGLAGES ===== */
:root {
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size: clamp(18px, 3vw, 46px);   /* taille du texte */
  --margin: 5px;                    /* marges autour du texte */
  --black: #000;
  --white: #fff;

  --columns: 7;                     /* nombre de blocs par ligne */
  --grid-gap: 0px;                  /* trait blanc entre les blocs */
  --space-before-grid: 10px;        /* espace blanc entre le texte et la grille */
  --rows-visible: 2;                /* nombre de lignes de blocs qui remplissent l'écran */

  --header-h: 300px;                /* recalculé en JS, ne pas toucher */
  --blur-h: 2px;                   /* hauteur de la zone de flou */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--black);
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
h1,
.header__role {
  font-weight: 700;
}

h1 {
  font-size: inherit;
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--margin) var(--margin) 8px;
  background: var(--white);
}

.header__top {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.35em;
}

/* ===== ITEMS DU MENU ===== */
.item,
.project-title,
.contact,
.text-link {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 0.05em;
  margin: 0 -0.05em;
  outline: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* .is-lit = allumé quand on survole un bloc de la grille */
.item:hover,
.item:focus-visible,
.item.is-active,
.item.is-lit,
.project-title,
.contact:hover,
.text-link:hover,
.text-link:focus-visible,
.contact:focus-visible {
  background: var(--black);
  color: var(--white);
}

/* ===== FLOU ENTRE HEADER ET IMAGES ===== */
.blur-edge {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  height: var(--blur-h);
  z-index: 9;
  pointer-events: none;
}

.blur-edge > div {
  position: absolute;
  inset: 0;
}

.blur-edge > div:nth-child(1) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

.blur-edge > div:nth-child(2) {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%);
}

.blur-edge > div:nth-child(3) {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 50%);
}

.blur-edge > div:nth-child(4) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0));
  mask-image: linear-gradient(to bottom, #000 0%, transparent 35%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 35%);
}

/* ===== GRILLE ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
   grid-auto-rows: calc((100dvh - var(--header-h) - var(--space-before-grid) - var(--grid-gap) * var(--rows-visible)) / var(--rows-visible));
  gap: var(--grid-gap);
  margin-top: calc(var(--header-h) + var(--space-before-grid));
  padding-bottom: var(--grid-gap);
  overflow-x: clip;
}

.bloc {
  position: relative;
  background: var(--black);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* bloc mis en avant (survol à la souris, ou 1er toucher sur téléphone) */
.bloc.is-focus {
  transform: scale(1.15);
  z-index: 2;
}

.bloc.is-hidden {
  display: none;
}

.bloc img,
.bloc video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== TABLETTE / MOBILE ===== */
@media (max-width: 900px) {
  :root { --columns: 4; }
}

@media (max-width: 600px) {
  :root { --columns: 2; }
  /* Théo Mathieu à gauche, Visual System Designer à droite, même sur téléphone */
  .header__top {
    gap: 0.5em;
  }
  .header__role {
    text-align: right;
  }
}

/* ===== ANIMATION D'ENTRÉE ===== */
:root {
  --intro-duration: 1.2s;  /* durée d'apparition de chaque élément */
  --intro-blur: 14px;      /* flou de départ */
}

@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(var(--intro-blur));
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.header__name,
.header__role,
.header__menu,
.bloc {
  animation: reveal var(--intro-duration) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* ordre d'apparition (délais) */
.header__name { animation-delay: 0.1s; }
.header__role { animation-delay: 0.5s; }
.header__menu { animation-delay: 1.3s; }
.bloc         { animation-delay: calc(1.8s + var(--i, 0) * 0.06s); }

/* une fois l'intro terminée : les blocs réapparaissent vite
   (filtre par discipline, retour depuis un projet) */
body.intro-done .bloc {
  animation-duration: 0.35s;
  animation-delay: 0s;
}

/* ===== GRAIN ===== */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  background-image: var(--grain-img);
  opacity: 0;
  animation:
    grain-fade 3.8s ease forwards,
    grain-move 0.4s steps(4) infinite;
}

@keyframes grain-fade {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.3; }
  100% { opacity: 0; }   /* mets 0.05 pour garder un grain léger en permanence */
}

@keyframes grain-move {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5%, 3%); }
  50%  { transform: translate(3%, -4%); }
  75%  { transform: translate(-3%, -2%); }
  100% { transform: translate(4%, 5%); }
}

/* pas d'animation si l'utilisateur a désactivé les animations */
@media (prefers-reduced-motion: reduce) {
  .header__name,
  .header__role,
  .header__menu,
  .bloc,
  .grain {
    animation: none;
  }
  .grain { display: none; }
}

/* ===== FOCUS AU SURVOL D'UN BLOC =====
   Quand on survole un bloc : tout devient flou + grain,
   sauf le bloc survolé, les disciplines allumées,
   et Théo Mathieu / Visual System Designer */
:root {
  --focus-blur: 6px;       /* force du flou */
  --focus-grain: 0.35;     /* intensité du grain (0 à 1) */
  --focus-speed: 0.4s;     /* vitesse de la transition */
}

.bloc {
  transition: transform 0.3s ease, filter var(--focus-speed) ease;
}

.txt,
.item,
.header__menu a {
  transition: filter var(--focus-speed) ease;
}

/* le flou */
body.has-focus .bloc:not(.is-focus),
body.has-focus .txt,
body.has-focus .item:not(.is-lit),
body.has-focus .header__menu a {
  filter: blur(var(--focus-blur));
}

/* le bloc survolé passe au-dessus du grain */
.bloc.is-focus {
  z-index: 6;
}

/* grain sur les images */
.focus-grain {
  position: fixed;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  background-image: var(--grain-img);
  opacity: 0;
  transition: opacity var(--focus-speed) ease;
  animation: grain-move 0.4s steps(4) infinite;
}

body.has-focus .focus-grain {
  opacity: var(--focus-grain);
}

/* grain sur le texte du header */
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain-img);
  opacity: 0;
  transition: opacity var(--focus-speed) ease;
}

body.has-focus .header::after {
  opacity: var(--focus-grain);
}

/* ce qui reste net, au-dessus du grain */
.header__name,
.header__role,
.item.is-lit {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .focus-grain { animation: none; }
}

/* ===== À PROPOS (clic sur Théo Mathieu) ===== */
:root {
  --about-blur: 10px;      /* flou de la page derrière le texte */
  --about-grain: 0.35;     /* intensité du grain (0 à 1) */
  --about-speed: 0.5s;     /* vitesse d'apparition */
  --about-veil: 0.6;       /* voile blanc pour lire le texte sur les images (0 = aucun) */
}

.header .header__name {
  cursor: pointer;
}

body.about-open {
  overflow: hidden;        /* bloque le scroll de la page derrière */
}

/* le menu laisse la place au texte "à propos" */
.header__menu {
  transition: opacity var(--about-speed) ease;
}

body.about-open .header__menu {
  opacity: 0;
}

/* calque plein écran : flou + grain */
.about {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--margin) var(--margin) calc(var(--margin) * 3);
  cursor: pointer;
  backdrop-filter: blur(var(--about-blur));
  -webkit-backdrop-filter: blur(var(--about-blur));
  background: rgba(255, 255, 255, var(--about-veil));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--about-speed) ease, visibility 0s linear var(--about-speed);
}

body.about-open .about {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--about-speed) ease, visibility 0s;
}

.about::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-img);
  opacity: var(--about-grain);
}

.about > * {
  position: relative;
}

/* "Théo Mathieu" et "Visual System Designer" restent nets au-dessus du flou */
.about .header__name {
  font-weight: 700;
}

.about strong {
  font-weight: 700;
}

/* le texte arrive avec un léger flou */
.about__text {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease 0.15s, filter 0.6s ease 0.15s;
}

/* une ligne vide entre Education / Employment / Exhibitions / Skills / Press */
.about__text + .about__text {
  margin-top: 1em;
}

body.about-open .about__text {
  opacity: 1;
  filter: blur(0);
}

/* Email / Instagram en blocs noirs, avant le texte de la page "à propos" */
.about__contact {
  margin-bottom: 1em;   /* même espace qu'entre les sections */
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease 0.15s, filter 0.6s ease 0.15s;
}

body.about-open .about__contact {
  opacity: 1;
  filter: blur(0);
}

/* ===== TITRE DU BLOC AU CENTRE DE L'ÉCRAN ===== */
.bloc-title {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;              /* au-dessus du flou et du grain */
  transform: translate(-50%, -50%);
  max-width: calc(100vw - var(--margin) * 2);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* même style que les disciplines en hover */
.bloc-title span {
  background: var(--black);
  color: var(--white);
  border-radius: 4px;
  padding: 0 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

body.has-focus .bloc-title {
  opacity: 1;
}

body.about-open .bloc-title {
  display: none;
}

/* ===== PAGE PROJET ===== */
:root {
  --project-gap: 0px;              /* espace entre les images d'un projet */
  --project-placeholder: 3 / 2;    /* proportion des rectangles noirs vides */
}

/* bascule accueil / projet */
.header__project,
.project {
  display: none;
}

body.is-project .header__project {
  display: block;
}

body.is-project .header__menu,
body.is-project .grid {
  display: none;
}

.project.is-open {
  display: block;
  animation: reveal var(--intro-duration) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

body.about-open .header__project {
  opacity: 0;
}

.header__project {
  transition: opacity var(--about-speed) ease;
}

/* le titre en noir n'est pas cliquable */
.project-title {
  cursor: default;
}

/* "Return" : même hover que les disciplines */
body.is-project .header .header__role {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 0.05em;
  margin: 0 -0.05em;
}

body.is-project .header .header__role:hover {
  background: var(--black);
  color: var(--white);
}

.project {
  padding-top: calc(var(--header-h) + var(--space-before-grid));
  padding-bottom: 0;   /* espace en bas de la page projet */
}

/* grille 2 colonnes max */
.project__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;       /* remplit les trous (ex : droite puis gauche sur la même ligne) */
  gap: var(--project-gap);
}

.p-img {
  position: relative;
  margin: 0;
  background: var(--black);
  aspect-ratio: var(--project-placeholder);
  overflow: hidden;
}

.p-img.full {
  grid-column: 1 / -1;
}

/* vidéo / image verticale → une seule colonne (deux verticales côte à côte) */
.p-img.full.is-vertical {
  grid-column: auto;
}

/* verticale restée seule → centrée, moitié de largeur */
.p-img.full.is-vertical.is-alone {
  grid-column: 1 / -1;
  width: 50%;
  justify-self: center;
}

/* fichier introuvable → la case ne s'affiche pas */
.p-img.is-missing {
  display: none;
}

.p-img.left {
  grid-column: 1;
}

.p-img.right {
  grid-column: 2;
}

/* avec une vraie image : on garde ses proportions */
.p-img:has(img),
.p-img:has(video) {
  aspect-ratio: auto;
  background: none;
}

.p-img img,
.p-img video {
  display: block;
  width: 100%;
  height: auto;
}

/* texte explicatif au-dessus des images */
.project__text {
  padding: 0 var(--margin) var(--margin);
}

@media (max-width: 600px) {
  .project__grid {
    grid-template-columns: 1fr;
  }
  .p-img.left,
  .p-img.right {
    grid-column: 1;
  }
  .p-img.full.is-vertical.is-alone {
    width: 100%;
  }
}

/* blocs noirs permanents pour Email / Instagram */
.about .contact {
  background: var(--black);
  color: var(--white);
}

/* vidéo VOD en cours de chargement : déjà dans sa case mais invisible */
video.is-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}