/* ------------------------------------------------------------------
   Police : Inter (version « Display » 28 pt, pour les titres et textes courts)
   Licence libre SIL Open Font License : on peut la mettre en ligne.
   Fichiers dans /fonts.
------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Display";
  src: url("fonts/Inter-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Medium : textes descriptifs des pages projet */
@font-face {
  font-family: "Inter Display";
  src: url("fonts/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Ancienne police, gardée pour revenir en arrière : visible seulement
   sur un ordinateur où Helvetica Now Display est installée.
   Pour la remettre, change --font plus bas. */
@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display Bold"), local("HelveticaNowDisplay-Bold");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display Medium"), local("HelveticaNowDisplay-Medium");
  font-weight: 500;
  font-style: normal;
}

/* ------------------------------------------------------------------
   Réglages de la maquette
------------------------------------------------------------------- */
:root {
  --margin: 30px;          /* marges rouges */
  --gutter: 15px;          /* marges bleues */
  --space-caption: 8px;    /* entre l'image et sa légende */
  --space-project: 15px;   /* entre la légende et le projet suivant */
  --font-size: 15px;
  --leading: 15px;         /* interlignage */
  /* Police du site. Pour revenir à Helvetica Now :
     "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif */
  --font: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Inter est un peu plus large que Helvetica Now : lettres resserrées
     pour garder les mêmes coupures de lignes (mettre 0 avec Helvetica Now) */
  --tracking: -0.015em;
  --text: #000;
  --text-light: #ccc;      /* gris 20 % */
  --placeholder: #ccc;
  --bg: #fff;
  color-scheme: light dark;
}

/* Mode sombre automatique : si l'ordinateur ou le téléphone du visiteur
   est réglé en sombre, fond noir, typo blanche, gris 20 % inversé.
   Pour un site toujours blanc : supprime ce bloc. */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #fff;
    --text-light: #333;
    --placeholder: #333;
    --bg: #000;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  letter-spacing: var(--tracking);
  font-weight: 700;
  font-size: var(--font-size);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a:hover {
  color: var(--text-light);
}

/* Curseur rond (images/curseur.svg, 30 px), centré sur la pointe de la souris,
   partout : texte, liens, vidéos, diaporama */
*,
*::before,
*::after {
  cursor: url("images/curseur.svg") 15 15, auto;
}

/* ------------------------------------------------------------------
   Grille : 12 colonnes, marges 30 px, gouttières 15 px
   Colonne gauche = 2 col. · Projets = 4 col. + 6 col.
------------------------------------------------------------------- */
.page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--margin);
}

/* Colonne gauche fixe : nom en haut, About au milieu, liens en bas */
.sidebar {
  grid-column: 1 / 3;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  padding: var(--margin) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar ul {
  list-style: none;
}

/* « Curseur » : un bouton qui a l'air d'un lien,
   il ouvre son bandeau en bas de la homepage */
.panel-toggle,
.panel button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}

.panel-toggle:hover,
.panel-toggle[aria-expanded="true"] {
  color: var(--text-light);
}

/* Zone de survol = exactement la taille du mot (15 px de haut par ligne).
   Le texte déborde un peu de sa ligne, donc on ne le rend pas survolable :
   c'est un rectangle invisible (::before) de la taille de la boîte qui réagit. */
.sidebar a,
.panel-toggle,
.topbar a,
.go-up {
  display: block;
  width: fit-content;
  height: fit-content;
  position: relative;
  pointer-events: none;
}

.sidebar a::before,
.panel-toggle::before,
.topbar a::before,
.go-up::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* « Curseur » n'apparaît qu'avec une souris (classe .custom-cursor posée par script.js) */
.cursor-toggle {
  display: none;
}

.custom-cursor .cursor-toggle {
  display: block;
}

.col {
  display: flex;
  flex-direction: column;
  padding-top: var(--margin);
}

.col--left  { grid-column: 3 / 7; }
.col--right { grid-column: 7 / 13; }

/* ------------------------------------------------------------------
   Projets
------------------------------------------------------------------- */
.project + .project {
  margin-top: var(--space-project);
}

/* Case photo / vidéo.
   Vide : case grise au ratio de la maquette (style="aspect-ratio").
   Avec une image ou une vidéo : la case prend les proportions du visuel,
   sans recadrage, et le reste de la colonne s'adapte. */
.media {
  background: var(--placeholder);
}

.media:has(img, video) {
  aspect-ratio: auto !important;
  background: none;
}

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

/* Case horizontale 16:9 à fond noir : un visuel plus étroit (ex. vidéo carrée)
   est centré avec des bandes noires de chaque côté */
.media.media--noir {
  aspect-ratio: 16 / 9 !important;
  background: #000;
}

.media--noir img,
.media--noir video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Projet cliquable : ouvre sa page par-dessus la homepage */
.project__link {
  display: block;
}

/* Survol d'un projet cliquable : le visuel grandit à peine (≈ 3 px de
   chaque côté à 1440 px de large). Plus grand : augmente le 1.005, ex. 1.01. */
.project__link .media {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  .project__link:hover .media {
    transform: scale(1.005);
  }
}

.caption {
  margin-top: var(--space-caption);
}

.caption span {
  display: block;
}

.caption .category {
  color: var(--text-light);
}

/* ------------------------------------------------------------------
   Vidéo en grand (clic sur une vidéo data-lightbox)
------------------------------------------------------------------- */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--margin);
  border: 0;
  background: var(--bg);
  color: var(--text);
}

.lightbox[open] {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.lightbox::backdrop {
  background: var(--bg);
}

.lightbox__close {
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.lightbox__close:hover {
  color: var(--text-light);
}

.lightbox__video {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #000;
  outline: none;
}

/* Image en grand (galerie data-zoom) : compteur à gauche, CLOSE à droite */
.zoom__bar {
  display: flex;
  justify-content: space-between;
}

.zoom__stage {
  flex: 1;
  min-height: 0;
  display: flex;
}

.zoom__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.gallery[data-zoom] > img,
.gallery[data-zoom] .flipbook > img {
  cursor: zoom-in;
}

/* Empêche la page de défiler derrière la vidéo ouverte */
.lightbox-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Go up
------------------------------------------------------------------- */
.go-up {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 90px 0 var(--margin);
}

/* ------------------------------------------------------------------
   Page About
------------------------------------------------------------------- */
.about {
  grid-column: 3 / 9;
  padding-top: var(--margin);
}

.about p + p {
  margin-top: var(--leading);
}

/* Texte de présentation en Medium (le bloc contact reste en Bold) */
.about p:not(.about__contact) {
  font-weight: 500;
}

/* Bloc contact : séparé du texte par deux lignes vides, titre en gris */
.about p.about__contact {
  margin-top: calc(2 * var(--leading));
}

.about .category {
  color: var(--text-light);
}

/* ------------------------------------------------------------------
   Pages projet (ex. memoire-made.html)
------------------------------------------------------------------- */
.project-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--margin);
  /* rien ne dépasse sur les côtés (ex. points du ruban quantique écartés au bord) */
  overflow-x: clip;
}

/* Barre du haut : nom à gauche, About au centre, Contact à droite.
   Elle reste en haut de l'écran quand on descend, sur un bandeau
   de la couleur du fond (blanc) qui passe par-dessus les visuels,
   d'un bord à l'autre de la fenêtre. */
.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--margin));
  padding: var(--margin) var(--margin) var(--gutter);
  background: var(--bg);
}

.topbar a:nth-child(2) { justify-self: center; }
.topbar a:last-child   { justify-self: end; }

/* En-tête : titre sur 4 col., sous-titre gris sur 2, texte sur 6 */
.project-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: calc(213px - var(--gutter)); /* 213 px sous le texte de la barre */
}

.project-header h1 {
  font-size: 25px;
  line-height: 25px;
  font-weight: 700;
}

.project-header__title    { grid-column: 1 / 5; }
.project-header__subtitle { grid-column: 5 / 7; }
.project-header__text     { grid-column: 7 / 13; font-weight: 500; }

.project-header .category,
.project-header__subtitle {
  color: var(--text-light);
}

/* Nouveau paragraphe : retrait de première ligne, sans ligne vide */
.project-header__text p + p {
  text-indent: 36px;
}

/* Visuels : espacés de 15 px, pleine largeur ou deux par ligne.
   Deux visuels de hauteurs différentes restent alignés en haut.
   --gallery-top : espace sous le texte, réglable par page (style="") */
.gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gutter);
  margin-top: var(--gallery-top, 124px);
}

.gallery > img,
.gallery > video {
  display: block;
  width: 100%;
  height: auto;
}

.gallery__full {
  grid-column: 1 / -1;
}

/* Visuel séparé du précédent par un plus grand blanc (ex. sous le ruban de points) */
.gallery__gap {
  margin-top: calc(109px - var(--gutter));
}

/* Vidéo élargie au format 16/9 par des bandes noires à gauche et à droite */
.gallery > .video-bandes {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.project-page .go-up {
  margin-top: var(--margin);
}

/* Ruban de points « superposition quantique » (dessiné par script.js).
   Les points prennent la couleur du texte : noirs, ou blancs en mode sombre. */
.quantum {
  display: block;
  width: 100%;
  color: var(--text);
}

/* Défilement automatique (ex. Bactériologie) : les images sont empilées
   au même endroit, une seule est visible et elle change d'un coup. */
.flipbook {
  display: grid;
}

.flipbook > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

.flipbook > img.is-active {
  visibility: visible;
}

/* Diaporama : une image à la fois, glisse horizontalement.
   Clic sur la moitié droite = suivante, moitié gauche = précédente. */
.slider {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  outline: none;
}

/* Curseur flèche selon le côté : droite = suivante, gauche = précédente */
.slider,
.slider *,
.zoom__stage,
.zoom__stage * {
  cursor: url("images/curseur-droite.svg") 13 15, e-resize;
}

.slider--prev,
.slider--prev * {
  cursor: url("images/curseur-gauche.svg") 13 15, w-resize;
}

/* ------------------------------------------------------------------
   Curseur en négatif (créé par script.js)
   Les curseurs SVG ci-dessus restent en secours si le script ne marche pas.
------------------------------------------------------------------- */
.custom-cursor,
.custom-cursor *,
.custom-cursor *::before,
.custom-cursor *::after {
  cursor: none !important;
}

/* Inverse ce qu'il y a dessous, en niveaux de gris.
   --cursor-size : 30 px de base, changé par le bandeau « Curseur » */
.cursor {
  --cursor-size: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: var(--cursor-size);
  height: var(--cursor-size);
  /* centré sur la pointe de la souris */
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border-radius: 50%;
  pointer-events: none;
  -webkit-backdrop-filter: grayscale(1) invert(1);
  backdrop-filter: grayscale(1) invert(1);
  opacity: 0;
}

.cursor.is-visible {
  opacity: 1;
}

/* Flèches du diaporama (mêmes formes que curseur-gauche/droite.svg) */
.cursor[data-shape="left"],
.cursor[data-shape="right"] {
  width: 26px;
  height: 30px;
  margin: -15px 0 0 -13px;
  border-radius: 0;
}

.cursor[data-shape="left"]  { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.cursor[data-shape="right"] { clip-path: polygon(100% 50%, 0 0, 0 100%); }

/* ------------------------------------------------------------------
   Bandeau « Curseur » : monte du bas, sous les projets (col. 3 à 12)
------------------------------------------------------------------- */
.panel {
  /* largeur d'une colonne de la grille */
  --col: calc((100% - 2 * var(--margin) - 11 * var(--gutter)) / 12);
  position: fixed;
  bottom: 0;
  left: calc(var(--margin) + 2 * (var(--col) + var(--gutter)));
  right: var(--margin);
  z-index: 50;
  padding: var(--margin) 0;
  background: var(--bg);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.5s;
}

/* Le fond déborde un peu sur les côtés (dans l'espace entre les colonnes
   et jusqu'au bord de la fenêtre) : un projet qui grandit au survol reste caché dessous */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--margin)) 0 calc(-1 * var(--gutter));
  z-index: -1;
  background: var(--bg);
}

.panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.panel__row {
  display: flex;
  justify-content: space-between;
}

/* Réglette : un trait noir et un rond noir */
.cursor-panel input[type="range"] {
  display: block;
  width: 100%;
  height: 15px;
  margin: 15px 0 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.cursor-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--text);
}

.cursor-panel input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--text);
}

.cursor-panel input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -6.5px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.cursor-panel input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel.is-open {
    transition: none;
  }
}

.slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.slider__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Page projet ouverte par-dessus la homepage : monte depuis le bas */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.overlay.is-open {
  transform: none;
}

/* La homepage ne défile plus derrière */
.overlay-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .overlay,
  .slider__track {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Mobile : la colonne gauche devient une barre en haut
   (nom à gauche, About au centre, liens à droite)
------------------------------------------------------------------- */
@media (max-width: 800px) {
  :root {
    --margin: 15px;
  }

  .page {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    z-index: 10;
    height: auto;
    align-self: stretch;
    margin: 0 calc(-1 * var(--margin));
    padding: var(--margin);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: var(--gutter);
    background: var(--bg);
  }

  .sidebar ul {
    justify-self: end;
  }

  /* Pas de place pour « Curseur » dans la barre du haut */
  .sidebar .panel-toggle {
    display: none;
  }

  .panel {
    left: var(--margin);
  }

  /* Les deux colonnes fusionnent dans l'ordre de lecture (--order) */
  .projects {
    display: flex;
    flex-direction: column;
    gap: var(--space-project);
  }

  .col {
    display: contents;
  }

  .project {
    order: var(--order);
  }

  .project + .project {
    margin-top: 0;
  }

  .go-up {
    align-self: center;
    margin-top: 60px;
  }

  .about {
    padding-top: var(--margin);
  }

  /* Page projet : tout passe sur une colonne */
  .project-header {
    display: flex;
    flex-direction: column;
    gap: var(--leading);
    margin-top: calc(90px - var(--gutter));
  }

  .gallery {
    grid-template-columns: 1fr;
    margin-top: 60px;
  }

  .gallery__gap {
    margin-top: calc(60px - var(--gutter));
  }
}

/* Sur grand écran, le conteneur des projets ne compte pas dans la grille */
@media (min-width: 801px) {
  .projects {
    display: contents;
  }

  /* Variante « une colonne » (body class="une-colonne") :
     tous les projets les uns sous les autres, sur 10 colonnes,
     dans l'ordre de lecture (--order) */
  .une-colonne .projects {
    grid-column: 3 / 13;
    display: flex;
    flex-direction: column;
    gap: var(--space-project);
    padding-top: var(--margin);
  }

  .une-colonne .col {
    display: contents;
  }

  .une-colonne .project {
    order: var(--order);
  }

  .une-colonne .project + .project {
    margin-top: 0;
  }
}