/* Modular (Normal) : gardée en réserve */
@font-face {
  font-family: Modular;
  src: url(fonts/Modular-Normal.woff) format("woff");
}
/* Police du site : Suisse BP Int'l */
@font-face {
  font-family: SuisseIntl;
  src: url(fonts/SuisseBPIntl-Regular.woff?v=2) format("woff");
}
/* Alaska (variable) : plus utilisée pour l'instant, gardée pour des tests */
@font-face {
  font-family: AlaskaVF;
  src: url(fonts/Alaska-VF.woff) format("woff");
  font-weight: 1 950;
  font-stretch: 50% 200%;
}
/* Unica 77 : police de secours */
@font-face {
  font-family: UnicaRegular;
  src: url(fonts/Unica77LL-Regular.f9e5cdb7.woff) format("woff");
}

:root {
  --black: #000;
  --grey: #c4c4c4;
  --bg: #f4f4f4;
  --white: #fff;
  --line: 1px solid #000;
  --pad: 0.275rem;
  --wght: 356; --wdth: 78; --ital: 1.6; --cntr: 1;
}

*, html, body { margin: 0; padding: 0; }
html { height: -webkit-fill-available; }
body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: -webkit-fill-available;
  background: var(--white);
  color: var(--black);
}
* {
  font-family: SuisseIntl, Modular, UnicaRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
}
a { color: #000; text-decoration: none; }
[hidden] { display: none !important; }
::-webkit-scrollbar { display: none; }

/* ---------- Layout ---------- */
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

/* ---------- Header ---------- */
.header {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border: var(--line);
  border-top: none;
}
.header h1 { line-height: 100%; font-weight: unset; }
.header .title { padding: var(--pad); }
.header .about-btn {
  padding: var(--pad);
  cursor: pointer;
  text-align: right;
  border-left: 1px solid black;
  transition: all 0.25s ease;
  user-select: none;
}
.header .about-btn h1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.header .about-btn:hover { background-color: var(--grey); color: white; }
.header .about-btn.active { background-color: black; color: white; }

.about-panel {
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.about-panel .about-text { padding: var(--pad); max-width: 48rem; }
.about-panel .about-text p + p { margin-top: 0.8em; }

/* Grille de contacts / infos (même style pour About et About this Project) */
.cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  box-sizing: border-box;
  border-top: 1px solid black;
}
.cells .cell {
  display: block;
  padding: var(--pad);
  border-right: 1px solid black;
  transition: 0.25s ease all;
}
.cells .cell:last-child { border-right: none; }
.cells .cell.link { cursor: pointer; }
.cells .cell.link:hover { background-color: var(--grey); color: white; }
@media screen and (max-width: 992px) {
  .cells { grid-template-columns: 1fr; }
  .cells .cell { border-right: none; }
  .cells .cell + .cell { border-top: 1px solid black; }
}

/* ---------- Carrousel ---------- */
.carousel-container {
  border-left: var(--line);
  border-right: var(--line);
  background-color: var(--bg);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  cursor: e-resize;
}
.carousel { height: 100%; }

/* Accueil */
.home {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: auto;
}
.home { position: relative; background: #000; color: #fff; overflow: hidden; }
.home-inner { position: relative; z-index: 2; padding: var(--pad) 0.5rem; max-width: 36rem; }

/* Vidéos de fond de l'accueil */
.home-bg { position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; }
.home-bg .clip {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0;
}
.home-bg .clip.on { opacity: 1; }
.home-bg iframe, .home-bg video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  border: 0; object-fit: cover;
}
.home-bg video { width: 100%; height: 100%; }
.home-bg::after {
  content: ""; position: absolute; inset: 0;
  background: #000; opacity: var(--darkness, 0.55);
}
.home-inner p + p { margin-top: 0.1rem; }
.home-contact {
  display: inline-block;
  margin-top: 1.2rem;
  padding: var(--pad) 0.5rem;
  border: var(--line);
  background: var(--white);
  transition: 0.25s ease all;
}
.home-contact:hover { background: var(--black); color: white; }
.header .title { cursor: pointer; }

.slide-media {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.slide-media img::selection { color: none; background: none; }
.slide-media img, .slide-media video {
  height: 100%;
  object-position: 50% 50%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.slide-media.cover img, .slide-media.cover video {
  width: 100%;
  object-fit: cover;
}

/* Vimeo */
.vimeo-frame {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vimeo-box {
  position: relative;
  background: #000;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vimeo-frame { container-type: size; }
/* vidéo entière (pas de recadrage), au format 16:9 dans l'espace disponible */
.vimeo-box.contain {
  width: min(100cqw, 100cqh * 16 / 9);
  height: min(100cqh, 100cqw * 9 / 16);
}
.vimeo-box iframe {
  position: absolute;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease-in;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vimeo-box.cover iframe {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
}
.vimeo-box.loaded iframe { opacity: 1; }

/* Barre de progression (Swiper) */
.carousel .swiper-pagination-progressbar.swiper-pagination-horizontal {
  box-sizing: border-box;
  top: auto !important;
  bottom: 0 !important;
  background: #fff !important;
  height: 20px !important;
  border-top: 1px solid #000;
}
.carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--grey) !important;
}

/* ---------- Bas de page : projets ---------- */
.projects {
  width: 100vw;
  box-sizing: border-box;
  border: var(--line);
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
}
.nav-scroll {
  overflow-x: scroll;
  width: 100%;
  scrollbar-width: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav {
  min-width: min-content;
  display: flex;
}
.nav-item {
  box-sizing: border-box;
  padding: var(--pad) 0.5rem;
  border-right: var(--line);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: 0.5s ease all;
  white-space: nowrap;
  flex-grow: 0;
  user-select: none;
}
.nav-item:last-child { border-right: none; }
.nav-item:not(.active):hover {
  background: var(--grey);
  color: white;
  flex-grow: 1.5;
}
.nav-item.active {
  flex-grow: 3;
  background: var(--black);
  color: white;
}

.more {
  padding: var(--pad);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-top: var(--line);
  transition: 0.25s color ease, 0.25s background-color ease;
  user-select: none;
}
.more:hover { background-color: var(--grey); color: white; }
.more.active { background-color: black; color: white; }

.project-info {
  width: 100%;
  border-top: var(--line);
}
.project-info .inner { overflow: scroll; width: 100%; }
.project-info p { padding: var(--pad); }

.project-info .cells:first-child { border-top: none; }

/* Tailles de texte réduites (accueil + titres des projets) */
.home-inner, .home-inner p { font-size: 0.95rem; }
.home-inner { max-width: 32rem; }
.nav-item, .nav-item p { font-size: 0.9rem; }

/* Type de projet (Commission / Personal) : apparaît en italique au survol */
.nav-item .type {
  font-style: italic;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: 0;
  transition: max-width 0.5s ease, opacity 0.4s ease, padding-left 0.5s ease;
}
.nav-item:hover .type {
  max-width: 10rem;
  opacity: 1;
  padding-left: 1.5rem;
}

/* Texte About : aligné sur « Antoine Jacquat », drapeau propre */
.about-panel .about-text {
  max-width: 38rem;          /* ~60 caractères par ligne */
  padding: 0.75em var(--pad);   /* même espace qu'entre les paragraphes */
}
.about-panel .about-text p {
  font-size: 1.1rem;
  line-height: 1.35;
  text-wrap: pretty;
  hyphens: none;
}
.about-panel .about-text p + p { margin-top: 0.75em; }

/* Volet About : descend PAR-DESSUS les images (ne les réduit pas) */
.top { position: relative; z-index: 20; }
.about-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--white);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.45s ease, visibility 0s linear 0.45s;
}
.about-panel.open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.45s ease, visibility 0s;
}


/* Titre « Antoine Jacquat » : même survol gris que About */
.header .title { transition: all 0.25s ease; user-select: none; }
.header .title:hover { background-color: var(--grey); color: white; }

/* Approche (espacement des lettres) des textes de projets : barre du bas + infos projet */
:root { --tracking-projets: 0.04em; }
.nav-item p, .more p, .project-info p, .project-info .cell { letter-spacing: var(--tracking-projets); }

/* Style « Maxime Guyon » : titres en capitales, espacés */
.header h1, .nav-item p, .more p {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}
.home-inner p { letter-spacing: 0.02em; }
/* La case « Antoine Jacquat » occupe toute la largeur jusqu'à About */
.header .title { flex: 1; }

/* Échelle générale du texte : 17.6px d'origine − 10 % = 15.84px (changer ce chiffre agrandit/réduit tout le site) */
html { font-size: 15.84px; }

/* Vidéos Vimeo « contain » (ex. casque Aiaiai) : centrées */
.vimeo-frame { justify-content: center; }

/* About : texte courant en minuscules, 10 % plus petit */
.about-panel .about-text p, .about-panel .cell {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.99rem;
  line-height: 1.35;
}

/* Mode « strip » : images collées côte à côte, défilement libre à la souris */
.carousel.strip .swiper-slide { width: auto; height: 100%; }
.carousel.strip .slide-media { width: auto; }
.carousel.strip .slide-media img, .carousel.strip .slide-media video { width: auto; max-width: none; height: 100%; }
.carousel.strip .vimeo-frame { width: 100%; height: 100%; container-type: normal; }
.carousel.strip .swiper-slide:has(.vimeo-frame) { aspect-ratio: 16 / 9; }  /* Firefox : largeur de la case vidéo */

/* Curseur flèche ← / → (remplace le curseur de la souris sur les images) */
.carousel-container.in-zone, .carousel-container.in-zone * { cursor: none !important; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100;
  pointer-events: none;
  font-size: 1.6rem; line-height: 1;
  color: #fff; mix-blend-mode: difference;   /* visible sur fond clair comme sombre */
  opacity: 0; transition: opacity 0.3s ease;
}
.cursor.on { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* Tiers du milieu : curseur normal, aucun effet au clic */
.carousel-container.has-cursor { cursor: default; }

/* Vimeo dans le mode « strip » : la vidéo remplit sa case 16:9 */
.carousel.strip .vimeo-box { width: 100%; height: 100%; }
.carousel.strip .vimeo-box iframe { inset: 0; top: 0; left: 0; transform: none; width: 100%; height: 100%; }

/* Petite barre verticale entre intitulé et valeur (Client | Aiaiai) */
.cell .sep {
  display: inline-block;
  width: 1px; height: 0.8em;
  background: currentColor;
  margin: 0 0.55em;
  vertical-align: -0.05em;
  opacity: 0.6;
}

/* Crédits du projet : centrés, sur une seule ligne (la taille s'adapte automatiquement) */
.project-info .cells .cell { text-align: center; white-space: nowrap; overflow: hidden; }
.project-info .cells .cell, .project-info .cells .cell p, .project-info .cells .cell * { font-size: var(--info-size, 1rem); }
/* largeur des cases proportionnelle à leur texte (le long crédit Design prend plus de place) */
@media screen and (min-width: 993px) {
  .project-info .cells { display: flex; }
  .project-info .cells .cell { flex: 1 1 auto; }
}

/* Vidéos Vimeo : l'image d'aperçu (1re image) reste affichée jusqu'à ce que la vidéo joue */
.vimeo-box .poster, .home-bg .clip .poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 0;
}
.vimeo-box iframe, .home-bg .clip iframe { z-index: 1; opacity: 0 !important; transition: opacity 0.3s ease; }
.vimeo-box.playing iframe, .home-bg .clip.playing iframe { opacity: 1 !important; }

/* Pendant le chargement, une vidéo affiche le fond clair du site (et non du noir) ;
   les vidéos à fond noir ont bg: "#000" dans projects.js */
.carousel .vimeo-box { background: var(--bg); }

/* Case vide (ex. Aura : pas de client) : prend l espace au milieu */
.project-info .cells .cell:has(> p:empty) { flex: 1 1 0; }

/* Accueil : vidéos de fond floutées (réglage : --home-blur) */
.home-bg { --home-blur: 6px; }
.home-bg .clip video, .home-bg .clip iframe, .home-bg .clip .poster { filter: blur(var(--home-blur)); transform: scale(1.04); }
.home-bg .clip iframe, .home-bg .clip video { transform: translate(-50%, -50%) scale(1.04); }

/* vidéo de fond au-dessus de son image d'aperçu, même recadrage */
.home-bg .clip video { z-index: 1; object-fit: cover; }