/* ============================================================
   VINCENT MORIN — PROJETS v2 : « LE REGISTRE DES EXPÉDITIONS »
   Styles propres à projets.html — la base partagée (tokens,
   topnav, modale, badge sommet) vit dans styles.css.
   ------------------------------------------------------------
   Concept : l'index du carnet de voyage. Pas de photo de ciel,
   pas de mur de polaroids — un registre éditorial : chaque
   projet est une LIGNE (grand titre display, colonnes mono,
   tampon biome), l'aperçu photo suit le curseur au survol,
   la fiche s'ouvre au clic.
   ============================================================ */

/* ---------- Nav : retour + titre de page ---------- */
.vpl-nav{ justify-content:space-between; }
.vpl-back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.vpl-back span{ transition:transform .3s var(--ease-out); }
.vpl-back:hover span{ transform:translateX(-4px); }
.vpl-nav-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85;
}

/* ---------- En-tête : la couverture du registre ---------- */
/* Photo de montagne plein cadre — textes en crème par-dessus,
   dégradé sombre en haut (nav) et en bas (accroche + relevés).
   Comme le hero de l'accueil : FIXE derrière la page, pleine hauteur
   d'écran — le registre (.vpl-body) glisse par-dessus au scroll. */
.vpl-head{
  position:fixed;top:0;left:0;width:100%;
  height:100vh;
  height:100svh;   /* stable face à la barre d'URL mobile */
  z-index:0;
  background:#1d2027 url("assets/pexels-ryank-34280556.jpg") center/cover no-repeat;
  color:var(--paper-cream);
  padding:170px clamp(20px,5vw,72px) 0;
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* le contenu de la couverture — animé (il s'enfonce quand on le recouvre) */
.vpl-head-inner{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;
  will-change:transform,opacity;
}
/* tout le registre : passe PAR-DESSUS la couverture fixe */
.vpl-body{
  position:relative;z-index:2;
  margin-top:100vh;
  margin-top:100svh;
  background:var(--bg-paper);
}
.vpl-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/noise.png") repeat;opacity:.55;mix-blend-mode:overlay;
}
.vpl-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(29,32,39,.5) 0%, rgba(29,32,39,.06) 28%,
    rgba(29,32,39,.12) 55%, rgba(29,32,39,.8) 100%);
}
.vpl-head-kicker{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(248,244,240,.88);font-weight:700;
  margin-bottom:28px;
}
.vpl-kicker-dot{
  width:8px;height:8px;border-radius:50%;background:var(--terracotta);
  box-shadow:0 0 0 3px rgba(184,92,47,.2);
  animation:vpl-pulse 2.4s ease-in-out infinite;
}
@keyframes vpl-pulse{50%{box-shadow:0 0 0 7px rgba(184,92,47,0)}}
.vpl-kicker-sep{opacity:.4}

.vpl-head-title{
  position:relative;z-index:2;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(56px,11.5vw,188px);
  line-height:.85;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--paper-cream);margin:0 0 34px;
  /* détache le titre de la roche (tons proches du terracotta) */
  text-shadow:0 3px 26px rgba(29,32,39,.4);
}
.vpl-head-title em{
  font-style:italic;color:var(--terracotta-soft);font-weight:400;
}
/* titre à gauche, polaroid du dernier projet à droite */
.vpl-head-top{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(24px,4vw,70px);align-items:start;
}

/* ---------- Polaroid scotché : le dernier projet ---------- */
.vpl-polaroid{
  position:relative;display:block;text-align:left;
  width:clamp(260px,27vw,400px);
  /* décalé vers le centre (marge à droite) et remonté vers la nav */
  margin-top:clamp(-46px,-2.6vw,-8px);
  margin-right:clamp(0px,7vw,120px);
  background:#fff;padding:14px 14px 0;border-radius:var(--r-sm);
  box-shadow:var(--sh-polaroid);
  transform:rotate(3deg);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  cursor:pointer;
}
.vpl-polaroid:hover{
  transform:rotate(0) translateY(-8px) scale(1.03);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.vpl-polaroid:focus-visible{ outline:2.5px solid var(--terracotta);outline-offset:6px; }

/* le scotch qui le tient sur la page */
.vpl-pol-tape{
  position:absolute;top:-12px;left:50%;
  width:118px;height:28px;transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(180deg, rgba(245,237,219,.86), rgba(228,217,194,.78));
  box-shadow:0 3px 8px rgba(0,0,0,.22);
  border-left:1px dashed rgba(40,58,42,.14);
  border-right:1px dashed rgba(40,58,42,.14);
  z-index:3;
}
.vpl-pol-photo{
  display:block;position:relative;aspect-ratio:4/3;
  overflow:hidden;background:#1d2027;
}
.vpl-pol-photo img,.vpl-pol-photo video{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Cadrage de la vidéo du dernier projet : la capture d'écran est en 16/9 très
   large ; un « cover » centré en 4/3 couperait le titre du site en plein
   milieu des mots. On décale donc la fenêtre vers la gauche (object-position)
   et on zoome à peine, juste assez pour que la page reste lisible ET que
   l'avion tienne entier dans le cadre sur toute la boucle. Ne concerne QUE
   le polaroid : la fiche modale, plus large, garde la composition complète. */
.vpl-pol-photo video{
  object-position:10% center;
  transform:scale(1.1);
  transform-origin:left 46%;
}
.vpl-pol-photo::after{  /* léger vieillissement, comme les autres photos */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,.18);
}

/* la légende, écrite dans la marge blanche du polaroid */
.vpl-pol-cap{ display:block;padding:15px 6px 17px;text-align:center; }
.vpl-pol-kicker{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracotta);font-weight:700;
  margin-bottom:9px;
}
.vpl-pol-dot{
  width:6px;height:6px;border-radius:50%;background:var(--terracotta);
  box-shadow:0 0 0 3px rgba(184,92,47,.22);
  animation:vpl-pulse 2.4s ease-in-out infinite;
}
.vpl-pol-title{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(21px,2.1vw,29px);line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--forest);
}
.vpl-pol-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:13px;padding-top:12px;
  border-top:1.5px dashed var(--ink-line);
  font-family:var(--font-body);font-weight:800;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);
}
.vpl-pol-arrow{display:inline-block;transition:transform .3s var(--ease-out)}
.vpl-polaroid:hover .vpl-pol-arrow{transform:translateX(5px)}

.vpl-head-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:end;
  padding-bottom:48px;
  margin-top:auto;   /* accroche + relevés calés en bas de l'écran */
}
.vpl-head-lead{
  max-width:560px;margin:0;
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,18px);
  line-height:1.6;color:var(--paper-cream);opacity:.95;text-wrap:pretty;
}
.vpl-head-lead strong{font-weight:800;color:var(--terracotta-soft)}

/* relevés du registre : gros chiffres Druk alignés à droite */
.vpl-stats{
  display:grid;grid-template-columns:repeat(4,auto);
  gap:clamp(18px,3vw,46px);justify-content:end;margin:0;
}
.vpl-stat{display:flex;flex-direction:column;gap:5px;text-align:right}
.vpl-stat dt{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(248,244,240,.65);font-weight:700;
}
.vpl-stat dd{
  margin:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(26px,3vw,44px);line-height:1;
  color:var(--paper-cream);letter-spacing:-.01em;
}
.vpl-stat:first-child dd{color:var(--terracotta-soft)}

/* ---------- Barre collante : onglets de classement + compteur ---------- */
.vpl-bar{
  position:sticky;top:58px;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:0 clamp(20px,5vw,72px);
  background:rgba(248,244,240,.92);backdrop-filter:blur(10px);
  border-top:1.5px dashed var(--ink-line);
  border-bottom:1.5px dashed var(--ink-line);
}
.vpl-filters{display:flex;flex-wrap:wrap}
.vpl-filter{
  position:relative;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);
  padding:17px 15px;cursor:pointer;
  transition:color .25s var(--ease-out);
}
.vpl-filter .n{
  font-size:8.5px;color:var(--terracotta);margin-left:5px;
  vertical-align:super;letter-spacing:0;
}
.vpl-filter::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-1.5px;height:3px;
  background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.vpl-filter:hover{color:var(--forest)}
.vpl-filter.is-on{color:var(--forest)}
.vpl-filter.is-on::after{transform:scaleX(1)}
.vpl-count{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}

/* ---------- Le registre : une ligne = un projet ---------- */
.vpl-list{list-style:none;margin:0;padding:0}
.vpl-row{
  position:relative;width:100%;text-align:left;
  display:grid;
  grid-template-columns:clamp(70px,8vw,120px) 1fr auto;
  gap:clamp(16px,3vw,44px);align-items:center;
  padding:clamp(26px,3.4vw,44px) clamp(20px,5vw,72px);
  border-bottom:1.5px dashed var(--ink-line);
  cursor:pointer;background:transparent;
  transition:background .35s var(--ease-out);
}
.vpl-row:hover{background:var(--paper-kraft)}
.vpl-row:focus-visible{
  outline:2.5px solid var(--terracotta);outline-offset:-2.5px;
  background:var(--paper-kraft);
}

.vpl-num{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(18px,2vw,26px);line-height:1;
  color:var(--ink-mute);letter-spacing:.02em;
  transition:color .3s var(--ease-out);
}
.vpl-row:hover .vpl-num{color:var(--terracotta)}
.vpl-coord{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  color:var(--ink-mute);text-transform:uppercase;font-weight:400;
}

.vpl-thumb{display:none}

.vpl-main{min-width:0}
.vpl-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(32px,5vw,80px);line-height:.92;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--forest);
  margin:0 0 10px;
  transition:transform .4s var(--ease-out);
}
.vpl-row:hover .vpl-title{transform:translateX(clamp(6px,1vw,16px))}
.vpl-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;
}
.vpl-tags{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.vpl-tags li{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest);font-weight:700;
  border:1.5px dashed var(--ink-line);padding:4px 8px;border-radius:999px;
}

.vpl-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  text-align:right;
}
.vpl-biome{
  font-family:var(--font-body);font-weight:800;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;
  background:var(--terracotta);color:#fff;
  padding:5px 9px;border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.vpl-mono{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
.vpl-arrow{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(22px,2.4vw,34px);line-height:1;color:var(--forest);
  transition:transform .35s var(--ease-out), color .35s;
}
.vpl-row:hover .vpl-arrow{transform:translateX(10px);color:var(--terracotta)}

/* ---------- Aperçu polaroid : suit le curseur au survol ---------- */
.vpl-preview{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  width:min(300px,24vw);
  opacity:0;visibility:hidden;
}
.vpl-preview-frame{
  position:relative;
  background:#fff;padding:10px 10px 32px;border-radius:3px;
  box-shadow:var(--sh-polaroid);
  transform:rotate(-4deg);
}
.vpl-preview-frame img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
.vpl-preview-cap{
  position:absolute;left:0;right:0;bottom:9px;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--forest);
}
@media (hover:none){ .vpl-preview{display:none !important} }

/* ---------- Fin du registre ---------- */
.vpl-end{
  padding:70px clamp(20px,5vw,72px) 150px;
  display:flex;justify-content:center;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .vpl-nav-title{display:none}
  .vpl-head{padding-top:126px}
  /* la photo est recadrée serré : voile sombre renforcé pour la lisibilité */
  .vpl-head::after{
    background:linear-gradient(180deg,
      rgba(29,32,39,.6) 0%, rgba(29,32,39,.38) 30%,
      rgba(29,32,39,.48) 60%, rgba(29,32,39,.88) 100%);
  }
  /* la couverture est déjà dense sur mobile : le polaroid s'efface,
     comme le polaroid du hero de l'accueil */
  .vpl-head-top{grid-template-columns:1fr}
  .vpl-polaroid{display:none}
  .vpl-head-grid{grid-template-columns:1fr;gap:30px}
  .vpl-stats{grid-template-columns:repeat(2,1fr);justify-content:start;gap:18px 28px}
  .vpl-stat{text-align:left}
  .vpl-bar{overflow-x:auto;scrollbar-width:none}
  .vpl-bar::-webkit-scrollbar{display:none}
  .vpl-filters{flex-wrap:nowrap}
  .vpl-count{display:none}

  .vpl-num{display:none}
  .vpl-thumb{display:block;width:76px}
  .vpl-thumb img{
    width:76px;height:76px;object-fit:cover;display:block;
    border:4px solid #fff;border-radius:2px;
    box-shadow:var(--sh-paper);transform:rotate(-3deg);
  }
  .vpl-row{grid-template-columns:76px 1fr;gap:16px;align-items:start}
  .vpl-meta{
    grid-column:1 / -1;
    flex-direction:row;align-items:center;justify-content:space-between;
  }
  .vpl-arrow{display:none}
}