/* ==========================================================================
   LOST WITH ROM — squelette de style
   Tout ce qui compte pour l'identité visuelle est regroupé ici, en haut,
   dans les variables. Remplace ces valeurs par ta charte (couleurs,
   polices) une fois que tu l'as, et tout le site suit automatiquement.
   ========================================================================== */

:root {
  /* --- COULEURS : à remplacer par ta palette --- */
  --color-bg: #0a0a0a;         /* fond général */
  --color-fg: #f2f2f2;         /* texte principal */
  --color-muted: #9a9a9a;      /* texte secondaire (sous-titres, tags) */
  --color-border: rgba(255, 255, 255, 0.15);
  --color-accent: #E81E25;     /* rouge officiel du logo (LOGO ATTACHED RED.svg) */

  /* --- TYPOGRAPHIE --- */
  --font-display: 'Anton', sans-serif; /* gros titres, tags de tuiles — police du logo */
  --font-body: Arial, sans-serif;      /* texte courant, nav */

  /* --- RYTHME / ESPACEMENT --- */
  --gap: 24px;
  --page-pad: 64px;
  --tile-row: 140px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
}

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

/* --- Header / nav --- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 12px;
  padding: 32px var(--page-pad);
  background: transparent; /* flotte sur le hero, comme la référence */
}

.wordmark { display: inline-flex; align-items: center; }

.wordmark-logo {
  height: 20px;
  width: auto;
  display: block;
  overflow: visible; /* évite un texte tronqué le temps que la police Anton charge */
}

/* pilule sombre, comme la référence : liens grisés par défaut,
   pas de soulignement, jamais de rouge — juste une "boîte" sombre
   qui apparaît derrière le lien survolé ou actif */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav a {
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--color-muted);
  transition: background-color .25s ease, color .25s ease;
}

.nav a:hover,
.nav a.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-fg);
}

/* --- Hero (page d'accueil) --- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 0 90px;
  margin-top: -1px; /* colle au header, évite un liseré */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* léger assombrissement en bas pour garder le texte lisible,
   quel que soit le fond utilisé */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--page-pad);
  max-width: 720px;
}

.hero-logo {
  display: block;
  width: min(520px, 60vw);
  height: auto;
  margin: 0 0 28px;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-fg);
  max-width: 520px;
}

/* --- Titre de page (Photo / Video) --- */

.page-title-block {
  padding: 150px var(--page-pad) 44px; /* dégage l'en-tête flottant (position: absolute) */
  max-width: 780px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  margin: 0;
}

.page-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: 18px;
}

/* --- Grille bento --- */

.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: var(--tile-row);
  grid-auto-flow: dense;
  gap: var(--gap);
  padding: 0 var(--page-pad) 120px;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: #151515; /* placeholder — remplace par une image/vidéo réelle */
  grid-column: span var(--c, 2);
  grid-row: span var(--r, 2);

  /* reveal au scroll : caché par défaut, JS ajoute .in-view.
     Glisse depuis la droite (comme la référence vidéo) plutôt que du bas. */
  opacity: 0;
  transform: translateX(56px);
  transition: opacity .7s ease, transform .7s ease, border-color .25s ease;
}

.tile.in-view { opacity: 1; transform: none; }
.tile:hover { border-color: var(--color-accent); }
.tile:hover .tile-tag { border-color: var(--color-accent); color: var(--color-accent); }

.tile-media {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* Remplace le fond gris par une vraie <img> ou <video> à l'intérieur
     du .tile (voir commentaires dans le HTML) */
}

.tile-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.4);
  transition: color .2s ease, border-color .2s ease;
}

.tile-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  pointer-events: none;
}

.tile-caption {
  position: absolute;
  left: 20px; right: 20px; bottom: 16px;
}

.tile-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.tile-loc {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

/* --- Galerie vidéo : défilement horizontal, colonnes mixtes --- */

.video-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--page-pad) 120px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.video-track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  height: 68vh;
  min-height: 420px;
  width: max-content; /* la piste s'étire, le conteneur défile */
}

.video-col {
  flex: 0 0 auto;
  height: 100%;
}

/* une vidéo verticale/portrait, pleine hauteur de piste */
.video-col--single {
  width: min(44vw, 620px);
}

.video-col--single .tile { width: 100%; height: 100%; }

/* deux vidéos horizontales/paysage, empilées */
.video-col--stack {
  width: min(52vw, 720px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.video-col--stack .tile { width: 100%; flex: 1 1 0; min-height: 0; }

/* --- Galerie photo : grande mosaïque mélangée (CSS columns) --- */

.photo-gallery {
  columns: 3 260px;
  column-gap: var(--gap);
  padding: 0 var(--page-pad) 120px;
}

.photo-tile {
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  margin: 0 0 var(--gap);
  break-inside: avoid;
}

.photo-tile--wide { column-span: all; }

/* --- Lightbox --- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 64px;
}

.overlay.is-open { display: flex; }

.lightbox {
  position: relative;
  width: min(1000px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #111;
}

.lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
  z-index: 3;
}

.lightbox-close:hover { border-color: var(--color-accent); color: var(--color-accent); }

.lightbox-caption {
  position: absolute;
  left: 24px; bottom: 24px;
}

/* --- CTA de fermeture (page d'accueil) --- */

.cta {
  padding: 60px var(--page-pad) 120px;
  max-width: 760px;
}

.cta-title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color .2s ease;
}

.cta-link:hover { color: var(--color-accent); }
.cta-link:hover .arrow { transform: translateX(6px); }
.arrow { display: inline-block; transition: transform .2s ease; }

/* --- Footer --- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 40px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--color-accent); }

.footer-year { font-size: 12px; color: var(--color-muted); }

/* --- Responsive --- */

@media (max-width: 900px) {
  :root { --page-pad: 24px; --tile-row: 120px; }
  .hero { min-height: 70vh; }
  .hero-logo { width: 82vw; }
  .page-title-block { padding-top: 190px; } /* header sur 2 lignes en mobile */
  .page-title { font-size: 52px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: span 2 !important; grid-row: span 2 !important; }
  .wordmark-logo { height: 16px; }
  .nav { gap: 0; font-size: 10px; }
  .nav a { padding: 8px 12px; }
  .video-col--single { width: 84vw; }
  .video-col--stack { width: 84vw; }
  .photo-gallery { columns: 2 140px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}