/* =========================================================
   VDP WORKS — feuille de style principale
   ---------------------------------------------------------
   Principe : la maquette d'origine est dessinée sur une
   largeur de 1024 px puis mise à l'échelle de l'écran.
   On reproduit cela avec l'unité --u (= 1 px de maquette).
   Ex. : calc(47 * var(--u)) = 47 px sur un écran de 1024 px.
   Sous 700 px (téléphone), --u est recalculée (voir en bas).
   ========================================================= */

/* ---------- Polices ----------
   La police d'origine (Neue Haas Grotesk Display, version
   d'essai "Trial") n'est pas une Google Font : remplacée
   par Inter Tight. Si vous achetez une licence web de
   Neue Haas Grotesk, ajoutez ici un @font-face et placez
   son nom en tête de --font-display.                       */

:root {
  --u: calc(100vw / 1024);

  /* Couleurs */
  --red: #AA1917;          /* rouge VDP (navigation, titres) */
  --red-dark: #830000;     /* rouge sombre (infos projet) */
  --red-soft: rgba(131, 0, 0, .64);
  --red-title: rgba(131, 0, 0, .75);
  --glow: rgba(224, 35, 30, .35);
  --bg: #191919;           /* fond des pages */
  --bg-cv: #141414;
  --off: #F4F4F2;          /* blanc cassé */
  --text-soft: rgba(255, 255, 255, .64);

  --font-display: "Inter Tight", "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-nav: "Josefin Sans", Arial, sans-serif;
  /* Neue Haas Grotesk : pour l'instant seule la version d'essai installée sur
     cet ordinateur est utilisée ("Haas Grot Text R Trial"). Les visiteurs voient
     Inter Tight tant qu'une licence web n'est pas ajoutée via @font-face. */
  --font-haas: "Neue Haas Grotesk", "Haas Grot Text R Trial", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--off);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

/* Pas de barre de défilement visible (le défilement reste possible) */
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Signature en fin de page (ajoutée par main.js) */
.signature {
  padding: calc(60 * var(--u)) 16px calc(28 * var(--u));
  text-align: center;
  font-size: max(8px, calc(10 * var(--u)));
  line-height: 2;
  font-weight: 300;
  letter-spacing: calc(6 * var(--u));
  color: var(--red-dark);
}
.signature p { margin: 0; }
.signature__copy { font-family: var(--font-nav); letter-spacing: 3px; color: var(--red); }
/* sur la page Projets : dernière "carte" de la rangée */
.signature--slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(260 * var(--u));
  padding: 0 calc(20 * var(--u)) calc(20 * var(--u));
  border-left: 1px solid rgba(170, 25, 23, .45);
  text-align: left;
}
.cv__copy {
  position: absolute;
  right: calc(19 * var(--u));
  bottom: calc(12 * var(--u));
  z-index: 3;
  font-family: var(--font-nav);
  font-size: max(8px, calc(9 * var(--u)));
  letter-spacing: 3px;
  color: var(--red);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Utilitaire accessibilité */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================
   GRAND TITRE FLOU ("SPATIAL REALITIES", "PROJECTS.", "CV")
   ========================================================= */
.blur-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--red-title);
  text-shadow: 0 0 15px var(--glow);
  filter: blur(7px);
  opacity: .75;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   SÉLECTEUR DE LANGUE (EN | PT | FR) — en haut à droite
   ========================================================= */
.lang {
  position: fixed;
  top: 28px;
  right: 19px;
  z-index: 50;
  display: flex;
  align-items: center;
  font-family: var(--font-nav);
  font-size: 9px;
  line-height: 1;
  color: var(--red);
}
.lang a { color: var(--red); }
.lang__menu {
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-3px);
  transition: max-width .45s cubic-bezier(.4,0,.2,1), opacity .25s ease, transform .45s cubic-bezier(.4,0,.2,1);
}
.lang__divider {
  display: inline-block;
  margin: 0 7px;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity .2s ease .05s, transform .3s ease .05s;
}
.lang__item {
  display: inline-block;
  margin-right: 7px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .35s ease;
}
.lang:hover .lang__menu,
.lang:focus-within .lang__menu { max-width: 150px; opacity: 1; transform: none; }
.lang:hover .lang__divider,
.lang:focus-within .lang__divider { opacity: .7; transform: scaleY(1); }
.lang:hover .lang__item,
.lang:focus-within .lang__item { opacity: 1; transform: none; }

/* =========================================================
   PAGE D'ACCUEIL
   ========================================================= */
.home {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

/* Diaporama plein écran (fondu toutes les 4 s, voir main.js) */
.slideshow { position: absolute; inset: 0; }
.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s linear;
}
.slideshow__img.is-active { opacity: 1; }

/* Navigation centrale : PROJECTS | VDP | CONTACT */
.home-nav {
  position: absolute;
  top: calc(8 * var(--u));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(50 * var(--u));
  font-family: var(--font-nav);
  font-size: max(8px, calc(9 * var(--u)));
  letter-spacing: 3px;
  color: var(--red);
  text-transform: uppercase;
}
.home-nav a,
.home-nav button {
  display: inline-block;
  padding: 0 calc(12 * var(--u));
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .4s ease-in-out;
}
/* Effet au survol : léger agrandissement (comme sur Readymag) */
.home-nav a:hover,
.home-nav button:hover { transform: scale(1.3); }
.home-nav .sep { font-family: var(--font-display); }

/* Titre "SPATIAL REALITIES" en bas */
.home .blur-title {
  position: absolute;
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  bottom: calc(10 * var(--u));
  z-index: 5;
  font-size: calc(127 * var(--u));
  line-height: calc(88 * var(--u));
  /* original : -6.6 ; ajusté pour Inter Tight afin d'occuper toute la largeur */
  letter-spacing: calc(-3.2 * var(--u));
  text-align: center;
}

/* =========================================================
   POP-UP "VDP" (présentation)
   ========================================================= */
.about {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25,25,25,.16);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.about.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.about__window {
  position: relative;
  width: 880px;
  height: 560px;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  background: rgba(25,25,25,.94);
  border: 1px solid rgba(244,244,242,.12);
  border-radius: 18px;
  box-shadow: 0 25px 90px rgba(0,0,0,.45);
  transform: scale(.96);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.about.is-open .about__window { transform: scale(1); }
.about__photo { overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__content { position: relative; padding: 50px; display: flex; flex-direction: column; }
.about__mark {
  margin: 0 0 30px;
  color: var(--red);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 4px;
  font-weight: 400;
}
.about__text { max-width: 410px; }
.about__text p {
  margin: 0 0 1.48em;
  color: var(--off);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: -.1px;
}
.about__copy {
  margin: auto 0 0;
  font-family: var(--font-nav);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--red);
}
.close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 10;
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,244,242,.18);
  background: transparent;
  color: var(--off);
  font: 300 17px/1 var(--font-display);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.close-btn:hover { background: var(--red); border-color: var(--red); }

/* =========================================================
   CHARGEMENT "ÉCHELLES" (1:1 → PLANETARY)
   ========================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #191919;
  color: #F2F2F0;
  overflow: hidden;
  transition: opacity .9s cubic-bezier(.65,0,.35,1), visibility .9s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__cross, .loader__cross-h {
  position: absolute;
  background: rgba(242,242,240,.055);
}
.loader__cross { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.loader__cross-h { left: 0; top: 50%; height: 1px; width: 100%; transform: translateY(-50%); }
.loader__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  border: 1px solid rgba(170,25,23,.38);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: .5;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}
.loader__number {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: transform .28s ease, color .4s ease;
}
.loader__label,
.loader__progress {
  position: absolute;
  bottom: 32px;
  z-index: 3;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}
.loader__label {
  left: 34px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--red);
}
.loader__progress {
  right: 34px;
  font-family: var(--font-mono);
  letter-spacing: .03em;
  color: rgba(242,242,240,.45);
}
.loader.is-planetary .loader__number { color: var(--red); font-size: clamp(20px, 2vw, 26px); }
.loader.is-planetary .loader__label { color: #F2F2F0; }

/* =========================================================
   PAGE PROJETS (défilement horizontal piloté par le scroll)
   ========================================================= */
.projects {
  position: relative;
  /* hauteur réglée par main.js selon la longueur de la rangée */
  height: 100vh;
}
.projects__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.projects .blur-title {
  position: absolute;
  top: 0;
  left: calc(6 * var(--u));
  font-size: calc(115 * var(--u));
  line-height: calc(88 * var(--u));
  letter-spacing: calc(46 * var(--u));
}
/* Rangée de cartes : grandes images centrées verticalement
   (hauteur = écran moins la marge haute et le menu du bas) */
.projects__row {
  position: absolute;
  top: 64px;
  left: calc(13 * var(--u));
  display: flex;
  gap: calc(17 * var(--u));
  will-change: transform;
}
.card {
  position: relative;
  flex: 0 0 auto;
  height: calc(100vh - 140px);
  height: calc(100dvh - 140px);
  aspect-ratio: 303 / 447;
  overflow: hidden;
  border-radius: calc(4 * var(--u));
  background: #222;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
/* Survol : léger zoom de l'image */
.card:hover img { transform: scale(1.03); filter: brightness(1.06); }
.card__name {
  position: absolute;
  left: calc(14 * var(--u));
  bottom: calc(12 * var(--u));
  font-family: var(--font-haas);
  font-weight: 500;
  font-size: max(12px, calc(15 * var(--u)));
  letter-spacing: 3px;
  color: var(--off);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
}
.card:hover .card__name { opacity: 1; transform: none; }

/* Navigation simple pour les pages Projets / CV */
.corner-nav {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-nav);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--red);
}
.corner-nav a { display: inline-block; transition: transform .4s ease-in-out; }
/* Traits verticaux | : élément graphique signature VDP */
.corner-nav .sep { font-family: var(--font-display); opacity: .8; }
.corner-nav a:hover { transform: scale(1.3); }

/* =========================================================
   PAGE D'UN PROJET
   ========================================================= */
.project {
  position: relative;
  width: 100%;
  max-width: calc(1024 * var(--u));
  margin: 0 auto;
  padding-bottom: calc(66 * var(--u));
}

/* Barre du haut : | HOME |   | PROJECTS |   | NEXT | */
.project-nav {
  position: relative;
  height: calc(53 * var(--u));
  font-size: max(8px, calc(10 * var(--u)));
  line-height: calc(50 * var(--u));
  color: var(--red);
}
.project-nav a {
  position: absolute;
  top: calc(2 * var(--u));
  padding: 0 calc(8 * var(--u));
  white-space: nowrap;
  transition: opacity .3s ease;
}
.project-nav a:hover { opacity: .6; }
.project-nav .nav-home { left: 0; }
.project-nav .nav-projects { left: 50%; transform: translateX(-50%); }
.project-nav .nav-next { right: 0; }

.project__title {
  margin: calc(78 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(47 * var(--u));
  line-height: calc(47 * var(--u));
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--red);
}
.project__title--small {
  font-size: calc(35 * var(--u));
  line-height: calc(35 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.project__question {
  margin: calc(2 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(18 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: calc(3.9 * var(--u));
  color: var(--red-soft);
}
.project__question--bold { font-weight: 700; }

/* Textes blancs (paragraphes sous les images) */
.project__text {
  width: calc(897 * var(--u));
  margin: 0 auto;
  text-align: center;
  font-size: max(7px, calc(11 * var(--u)));
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: calc(2 * var(--u));
  color: var(--text-soft);
}
.project__text p { margin: 0; }
.project__text p + p { margin-top: 1em; }
.project__text--intro { margin-top: calc(42 * var(--u)); }

/* Ligne d'informations rouge : lieu | surface | programme */
.project__info {
  width: calc(909 * var(--u));
  margin: calc(9 * var(--u)) auto;
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: calc(53 * var(--u));
  letter-spacing: calc(3 * var(--u));
  color: var(--red-dark);
}

/* Images */
.project__img {
  display: block;
  width: calc(897 * var(--u));
  margin: calc(34 * var(--u)) auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project__img--hero  { height: calc(542 * var(--u)); }
.project__img--large { height: calc(622 * var(--u)); margin-top: 0; margin-bottom: calc(42 * var(--u)); }

/* Grille de vignettes : 3 par ligne, dernière ligne centrée */
.project__grid {
  width: calc(895 * var(--u));
  margin: calc(61 * var(--u)) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(64 * var(--u)) calc(63 * var(--u));
}
.project__grid .project__img {
  width: calc(256 * var(--u));
  height: calc(192 * var(--u));
  margin: 0;
}

/* Projet William Saah : pas de légendes, espacements propres */
.project--ws .project__text--intro { margin-top: calc(56 * var(--u)); }
.project--ws .project__img--hero { margin-top: calc(66 * var(--u)); margin-bottom: calc(96 * var(--u)); }
.project--ws .project__grid { margin-top: calc(142 * var(--u)); }

/* Sur les pages projet, le sélecteur de langue passe en bas à droite
   (pour ne pas recouvrir "NEXT") */
.project ~ .lang { top: auto; bottom: 18px; }

/* Lien retour (page CV) */
.back-link {
  position: fixed;
  top: calc(100 * var(--u));
  right: 19px;
  z-index: 40;
  font-size: max(8px, calc(10 * var(--u)));
  color: var(--red);
  transition: opacity .3s ease;
}
.back-link:hover { opacity: .6; }
.project__grid .project__img img { transition: opacity .3s ease; }
.project__grid .project__img:hover img { opacity: .85; }

/* =========================================================
   VISIONNEUSE D'IMAGES (clic sur une image d'un projet)
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
}
.lightbox__prev, .lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  background: none;
  border: 0;
  color: var(--off);
  font: 300 28px/1 var(--font-display);
  opacity: .6;
  cursor: pointer;
}
.lightbox__prev:hover, .lightbox__next:hover { opacity: 1; color: var(--red); }
.lightbox__count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-nav);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--red);
}
.lightbox__prev { left: 6px; }
.lightbox__next { right: 6px; }

/* =========================================================
   PAGE CV / CONTACT (constellation)
   ========================================================= */
.cv {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: calc(768 * var(--u));
  overflow: hidden;
  background: var(--bg-cv);
}
.cv .blur-title {
  position: absolute;
  top: 0;
  left: calc(6 * var(--u));
  right: calc(6 * var(--u));
  display: flex;
  justify-content: space-between;
  font-size: calc(115 * var(--u));
  line-height: calc(88 * var(--u));
  letter-spacing: calc(-9.3 * var(--u));
  text-transform: uppercase;
  z-index: 2;
}
.cv__contact {
  position: absolute;
  top: calc(384 * var(--u));
  left: calc(576 * var(--u));
  width: calc(315 * var(--u));
  z-index: 3;
  text-align: center;
  font-size: max(7px, calc(9 * var(--u)));
  line-height: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: calc(3 * var(--u));
  color: var(--red-dark);
}
.cv__contact a:hover { color: var(--red); }
.cv__footer {
  position: absolute;
  bottom: calc(12 * var(--u));
  left: calc(105 * var(--u));
  right: calc(150 * var(--u));
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: max(7px, calc(10 * var(--u)));
  line-height: calc(21 * var(--u));
  font-weight: 300;
  letter-spacing: calc(6.1 * var(--u));
  color: var(--red-dark);
}

/* Constellation des expériences */
.constellation {
  position: absolute;
  left: calc(-195 * var(--u));
  top: calc(23 * var(--u));
  width: calc(1240 * var(--u));
  height: calc(801 * var(--u));
  z-index: 1;
}
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-line {
  stroke: var(--red);
  stroke-width: 1;
  stroke-opacity: .28;
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: stroke-opacity .5s ease;
}
.constellation.is-selected .c-line { stroke-opacity: .08; }
.c-point { cursor: pointer; transition: opacity .4s ease; }
.c-hit { fill: transparent; }
.c-halo {
  fill: none;
  stroke: rgba(244,244,242,.55);
  stroke-width: 1;
  opacity: .38;
  vector-effect: non-scaling-stroke;
  transition: r .3s ease, stroke .3s ease, opacity .3s ease;
}
.c-dot { fill: var(--off); transition: fill .3s ease; }
.c-point:hover .c-dot, .c-point.is-active .c-dot { fill: var(--red); }
.c-point:hover .c-halo, .c-point.is-active .c-halo { stroke: var(--red); opacity: .9; r: 10; }
.c-point.is-dim { opacity: .16; }
.c-point:focus { outline: none; }
.c-point:focus-visible .c-halo { stroke: var(--red); opacity: .9; }

.c-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.constellation.is-selected .c-backdrop { opacity: 1; pointer-events: auto; }

/* ----- Variante CARTE en hexagones (CV_VIEW = "map" dans main.js) ----- */
.constellation.is-map {
  left: calc(60 * var(--u));
  top: calc(110 * var(--u));
  width: calc(500 * var(--u));
  height: calc(620 * var(--u));
}
/* traits de repère vertical / horizontal (signature |) */
.constellation.is-map::before,
.constellation.is-map::after {
  content: "";
  position: absolute;
  background: rgba(170, 25, 23, .22);
  pointer-events: none;
}
/* les traits s'effacent vers les extrémités, comme la carte */
.constellation.is-map::before {
  left: 50%; top: -20%; bottom: -20%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(170,25,23,.3) 30%, rgba(170,25,23,.3) 70%, transparent);
}
.constellation.is-map::after {
  top: 50%; left: -20%; right: -20%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(170,25,23,.3) 30%, rgba(170,25,23,.3) 70%, transparent);
}
.m-land use { fill: rgba(244, 244, 242, .13); }
/* le voile d'une fiche ouverte couvre tout l'écran (pas de rectangle visible autour de la carte) */
.is-map .c-backdrop { position: fixed; inset: 0; }
.is-map .c-line { stroke-opacity: .55; stroke-dasharray: 2 3; }
.c-dot--hex {
  fill: var(--red);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s ease, fill .3s ease;
}
.c-point:hover .c-dot--hex, .c-point.is-active .c-dot--hex, .c-point.is-hover .c-dot--hex { fill: var(--off); transform: scale(1.35); }
.is-map .c-halo { stroke: var(--red); opacity: .7; }
.c-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: c-pulse 2.4s ease-out infinite;
}
.c-point:nth-child(2) .c-pulse { animation-delay: .5s; }
.c-point:nth-child(3) .c-pulse { animation-delay: 1s; }
.c-point:nth-child(4) .c-pulse { animation-delay: 1.5s; }
.c-point:nth-child(5) .c-pulse { animation-delay: 2s; }
@keyframes c-pulse {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Carte "verre dépoli" */
.c-card {
  position: absolute;
  z-index: 20;
  width: 235px;
  max-height: 190px;
  overflow-y: auto;
  padding: 15px 16px 13px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(65,63,61,.54), rgba(24,24,24,.40));
  border: 1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: 0 15px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.94);
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.constellation.is-selected .c-card { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.c-card .close-btn {
  top: 8px; right: 8px; width: 25px; height: 25px; font-size: 14px;
  background: rgba(255,255,255,.035);
  transition: background .25s ease, transform .25s ease;
}
.c-card .close-btn:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.18); transform: rotate(90deg); }
.c-city-row { display: flex; align-items: baseline; gap: 6px; padding-right: 32px; margin-bottom: 2px; }
.c-city { margin: 0; font-size: 18px; line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.c-country { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; color: #929292; text-transform: uppercase; }
.c-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.11);
}
.c-entry:first-child { padding-top: 9px; border-top: 0; }
.c-company { margin-bottom: 4px; font-size: 13px; line-height: 1.05; font-weight: 600; letter-spacing: -.025em; }
.c-role { font-size: 10px; line-height: 1.2; color: var(--red); }
.c-link {
  flex-shrink: 0;
  font-size: 8px;
  color: rgba(244,244,242,.72);
  border-bottom: 1px solid rgba(244,244,242,.25);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.c-link:hover { color: var(--red); border-color: var(--red); }

/* =========================================================
   ORDINATEUR + TABLETTE (≥ 701 px)
   ========================================================= */
@media (min-width: 701px) {

  /* ----- CV : grande carte centrée, villes à gauche, contact à droite,
     crédits sous l'écran (visibles en faisant défiler) ----- */
  .cv { height: calc(100vh + 150px); min-height: 0; }
  .constellation.is-map {
    left: calc(50% - 64vh);
    top: 9vh;
    width: 128vh;
    height: 88vh;
  }
  .cv-cities {
    position: absolute;
    left: 4vw;
    top: 50vh;
    z-index: 3;
    margin: 0;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 1px solid rgba(170, 25, 23, .55);   /* trait vertical signature */
    transform: translateY(-50%);
  }
  .cv-cities button {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    background: none;
    border: 0;
    color: rgba(244, 244, 242, .7);
    cursor: pointer;
    transition: color .25s ease, transform .3s ease;
  }
  .cv-cities button:hover { color: var(--off); transform: translateX(6px); }
  .cv-cities__num, .cv-cities__country { font-family: var(--font-nav); font-size: 9px; letter-spacing: 2px; color: var(--red); }
  .cv-cities__name { font-family: var(--font-haas); font-size: clamp(16px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.02em; }
  .cv__contact {
    left: auto;
    right: 4vw;
    top: 50vh;
    width: 30vw;
    text-align: right;
    transform: translateY(-50%);
  }
  .cv__footer { top: calc(100vh + 50px); bottom: auto; }
  .cv__copy   { top: calc(100vh + 100px); bottom: auto; left: 0; right: 0; text-align: center; }
  /* trait vertical qui invite à descendre */
  .cv::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100vh - 58px);
    width: 1px;
    height: 38px;
    background: linear-gradient(to bottom, var(--red), transparent);
    animation: cv-bob 1.8s ease-in-out infinite;
  }
  @keyframes cv-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

  /* ----- PROJETS : numéro, "voir le projet", rail vertical et compteur ----- */
  .m-card__num, .m-card__cta {
    position: absolute;
    z-index: 2;
    left: clamp(16px, 3vw, 44px);
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 3px;
  }
  .m-card__num { top: clamp(16px, 2.6vw, 36px); color: var(--red); }
  .m-card__cta { bottom: clamp(16px, 2.6vw, 36px); color: var(--off); opacity: 0; transition: opacity .6s ease .3s; }
  .card.is-active .m-card__cta, .card:hover .m-card__cta { opacity: .85; }

  .m-rail {
    position: fixed;
    right: 14px;
    top: 50%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
  }
  .m-tick {
    position: relative;
    width: 16px;
    height: 26px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .m-tick::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 1px;
    height: 12px;
    background: rgba(244, 244, 242, .5);
    transition: height .4s ease, background .4s ease;
  }
  .m-tick:hover::before { background: var(--off); }
  .m-tick.is-on::before { height: 24px; background: var(--red); }
  .m-proj-count {
    position: fixed;
    top: 28px;
    left: 19px;
    z-index: 40;
    font-family: var(--font-nav);
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--red);
  }
}

/* ----- PROJETS sur ordinateur : une grande carte par projet, comme sur téléphone ----- */
@media (min-width: 1101px) {
  .projects__row { top: 58px; left: 17vw; gap: 2.4vw; }
  .card {
    width: 66vw;
    height: calc(100vh - 124px);
    aspect-ratio: auto;
    border-radius: 3px;
  }
  .card img { transform: scale(1.08); filter: brightness(.5) grayscale(.25); transition: transform 2.4s cubic-bezier(.2,.6,.2,1), filter .8s ease; }
  .card.is-active img { transform: scale(1); filter: none; }
  .card.is-active:hover img { transform: scale(1.02); }
  /* dégradé pour la lisibilité du titre */
  .card::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(15,15,15,.7));
    pointer-events: none;
  }
  .card__name {
    z-index: 2;
    left: clamp(16px, 3vw, 44px);
    right: clamp(16px, 3vw, 44px);
    bottom: clamp(48px, 5.6vw, 84px);
    font-size: 5.6vw;
    line-height: .9;
    letter-spacing: -.035em;
    white-space: normal;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease .1s, transform .8s cubic-bezier(.2,.7,.2,1) .1s;
  }
  .card.is-active .card__name { opacity: 1; transform: none; }
  .signature--slide { width: 24vw; height: calc(100vh - 124px); }
}

/* =========================================================
   ÉCRANS TACTILES : pas de survol, le menu de langue reste ouvert
   ========================================================= */
@media (hover: none) {
  .lang__menu { max-width: 150px; opacity: 1; transform: none; }
  .lang__divider { opacity: .7; transform: scaleY(1); }
  .lang__item { opacity: 1; transform: none; }
  .card__name { opacity: 1; transform: none; }
}

/* =========================================================
   TABLETTE (701 → 1100 px)
   La maquette 1024 px réduite rend les textes trop petits :
   on fixe des tailles lisibles et des largeurs fluides.
   ========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
  .home-nav { font-size: 10px; }
  .lang, .corner-nav { font-size: 10px; }

  /* Projets : rangée au doigt, comme sur téléphone, avec cartes plus grandes */
  .projects, .projects__sticky { height: auto; min-height: 100dvh; position: relative; }
  .projects__row {
    position: relative;
    top: auto; left: auto;
    margin-top: 72px;
    padding: 0 32px 90px;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .projects__row::-webkit-scrollbar { display: none; }
  .card { height: calc(100dvh - 180px); max-height: 980px; scroll-snap-align: center; }

  /* Pages projet */
  .project { padding: 0 32px 60px; }
  .project-nav { font-size: 11px; }
  .project__title { font-size: 40px; line-height: 1.1; }
  .project__title--small { font-size: 30px; }
  .project__question { font-size: 15px; line-height: 1.4; letter-spacing: 3px; }
  .project__text, .project__info, .project__img, .project__grid { width: 100%; }
  .project__text { font-size: 11px; line-height: 1.5; letter-spacing: 1.2px; }
  .project__info { font-size: 13px; line-height: 1.6; letter-spacing: 2.5px; margin: 14px 0 28px; }
  .project__img--hero, .project__img--large { height: auto; aspect-ratio: 897 / 560; }
  .project__grid { gap: 20px; }
  .project__grid .project__img { width: calc(33.333% - 14px); height: auto; aspect-ratio: 4 / 3; }

  /* CV */
  .cv__contact { font-size: 10px; line-height: 2; }
  .cv__footer { font-size: 9px; }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .project__grid .project__img { width: calc(50% - 10px); }
  /* titre sur deux lignes (trop long sur une seule en portrait) */
  .cv .blur-title { flex-direction: column; font-size: calc(100vw / 7); line-height: .95; letter-spacing: -.04em; }
  .cv .blur-title span:last-child { align-self: flex-end; }
  .constellation { left: -20vw; top: 18vh; width: 140vw; height: 62vh; }
  .cv__contact { top: auto; bottom: 90px; left: 32px; right: 32px; width: auto; }
}

/* =========================================================
   TÉLÉPHONE (≤ 700 px)
   ========================================================= */
@media (max-width: 700px) {
  :root { --u: calc(100vw / 400); }

  /* Pas de flou sur mobile (comme sur le site d'origine) */
  .blur-title { filter: none; opacity: 1; }

  .lang { top: 20px; right: 14px; }
  .lang__menu { max-width: 150px; opacity: 1; transform: none; }
  .lang__divider { opacity: .7; transform: scaleY(1); }
  .lang__item { opacity: 1; transform: none; }

  .home-nav { top: 4px; justify-content: flex-start; padding-left: 10px; gap: 0; font-size: 8px; letter-spacing: 2px; }
  .home-nav a, .home-nav button { padding: 0 6px; }
  .home .blur-title {
    font-size: calc(100vw / 8.2);
    line-height: 1;
    letter-spacing: -.05em;
    left: 4px; right: 4px; bottom: 10px;
  }

  .about__window {
    width: 86vw; height: 78dvh; max-width: 86vw; max-height: 78dvh;
    display: flex; flex-direction: column; border-radius: 15px;
  }
  .about__photo { height: 34%; flex-shrink: 0; }
  .about__photo img { object-position: center 35%; }
  .about__content { height: 66%; padding: 25px 24px; display: block; overflow-y: auto; }
  .about__mark { margin-bottom: 22px; font-size: 26px; letter-spacing: 3px; }
  .about__text { max-width: none; }
  .about__text p { font-size: 11px; line-height: 1.5; }
  .about .close-btn { top: 10px; right: 10px; width: 28px; height: 28px; }

  .loader__number { font-size: 19px; letter-spacing: -.035em; }
  .loader__label { left: 20px; bottom: 22px; font-size: 7px; }
  .loader__progress { right: 20px; bottom: 22px; font-size: 7px; }

  /* Projets : rangée qui défile au doigt */
  .projects, .projects__sticky { height: auto; min-height: 100dvh; position: relative; }
  .projects__row {
    position: relative;
    top: auto; left: auto;
    margin-top: 64px;
    padding: 0 16px 80px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .projects__row::-webkit-scrollbar { display: none; }
  /* cartes plein écran (image recadrée), une par "page" */
  .card { width: 84vw; height: calc(100dvh - 150px); aspect-ratio: auto; scroll-snap-align: center; border-radius: 4px; }
  .projects__row { padding-bottom: 0; }
  .corner-nav { bottom: 22px; font-size: 10px; }
  .card__name { opacity: 1; transform: none; font-size: 13px; left: 14px; bottom: 14px; }

  /* Pages projet : grille sur 2 colonnes, textes lisibles */
  .project { width: 100%; padding: 0 16px 50px; }
  .project-nav { height: 44px; line-height: 44px; font-size: 9px; }
  .project-nav a { top: 0; }
  .project__title { margin-top: 40px; font-size: 30px; line-height: 1.1; }
  .project__title--small { font-size: 24px; }
  .project__question { font-size: 12px; line-height: 1.4; letter-spacing: 2px; margin-top: 6px; }
  .project__text { width: 100%; font-size: 9px; line-height: 1.5; letter-spacing: .8px; }
  .project__text--intro { margin-top: 24px; }
  .project__info { width: 100%; font-size: 11px; line-height: 1.6; letter-spacing: 2px; margin: 10px 0 24px; }
  .project__img { width: 100%; margin: 24px 0; }
  .project__img--hero, .project__img--large { height: auto; aspect-ratio: 897 / 560; }
  .project__img--large { margin-top: 0; }
  .project__grid { width: 100%; gap: 12px; margin-top: 30px; }
  .project__grid .project__img { width: calc(50% - 6px); height: auto; aspect-ratio: 4 / 3; }
  .project--ws .project__img--hero { margin: 24px 0; }
  .project--ws .project__grid { margin-top: 30px; }
  .back-link { top: auto; bottom: 130px; right: 16px; font-size: 9px; }

  .lightbox img { max-width: 100vw; max-height: 85vh; }

  /* CV */
  .cv .blur-title { flex-direction: column; font-size: calc(100vw / 6.5); line-height: .95; letter-spacing: -.04em; top: 10px; }
  .cv .blur-title span:last-child { align-self: flex-end; }
  .constellation { left: -40vw; top: 20vh; width: 180vw; height: 60vh; }
  .cv__contact { top: auto; bottom: 90px; left: 16px; right: 16px; width: auto; font-size: 8px; letter-spacing: 2px; line-height: 1.8; }
  .cv__footer { flex-direction: column; align-items: center; gap: 2px; font-size: 7px; letter-spacing: 3px; left: 16px; right: 16px; bottom: 16px; }
  .c-card { width: 205px; }
}

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