/* ==========================================================================
   STYLES PARTAGÉS — Ramos Philippe Motion Designer
   Utilisé par : index.html, works.html, contact.html, photo.html
   ========================================================================== */

:root{
  --bg:#F7F8F6;
  --bg-alt:#EFF1EC;
  --ink:#16181A;
  --ink-soft:#4A4D49;
  --accent:#FF5A1F;
  --accent-soft:#FFE4D6;
  --line:#D9DBD5;
  --mono-grey:#9A9D97;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'Space Mono',monospace;
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- TOP BAR / NAVIGATION (commune aux 4 pages) ---------- */
.timeline-bar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,248,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.timeline-inner{
  max-width:1180px;
  margin:0 auto;
  padding:14px 32px;
  display:flex;
  align-items:center;
  gap:18px;
}
.timeline-logo{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.timeline-logo img{
  height:22px;
  width:auto;
  display:block;
  filter:grayscale(1) contrast(1.1);
}
.timeline-logo span{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
}
.timeline-code{
  font-family:var(--mono);
  font-size:12px;
  color:var(--mono-grey);
  white-space:nowrap;
  min-width:78px;
  text-align:right;
}
.nav-links{
  margin-left:auto;
  display:flex;
  gap:28px;
  align-items:center;
}
.nav-links a{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
  transition:color .15s;
}
.nav-links a:hover, .nav-links a.current{color:var(--accent);}
.nav-links a.current{color:var(--ink);}
.nav-lang-btn{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 9px;
  letter-spacing:0.03em;
  transition:all .15s;
}
.nav-lang-btn:hover{
  color:var(--ink);
  border-color:var(--ink-soft);
  background:var(--bg-alt);
}

/* ---------- HERO EYEBROW / REC DOT (commun) ---------- */
.hero-eyebrow{
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent);
  letter-spacing:0.04em;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
}
.rec-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- TITRES DE SECTION (commun) ---------- */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:48px;
  gap:24px;
  flex-wrap:wrap;
}
.section-code{
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent);
  letter-spacing:0.03em;
  margin-bottom:10px;
  display:block;
}
.section-head h2{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
}
.section-head .section-desc{
  color:var(--ink-soft);
}

/* ---------- STATS (commun à index / contact / photo) ---------- */
.stat-num{
  font-family:var(--display);
  font-size:32px;
  font-weight:600;
  color:var(--accent);
}
.stat-label{
  font-family:var(--mono);
  font-size:11px;
  color:var(--mono-grey);
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* ---------- TAGS TECHNIQUES wtag (commun works / contact / photo) ---------- */
.wtag{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.04em;
  color:#fff;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.28);
  padding:3px 7px;
  border-radius:3px;
  backdrop-filter:blur(2px);
}

/* ---------- CTA BUTTON (commun) ---------- */
.cta-btn{
  font-family:var(--mono);
  font-size:14px;
  background:var(--ink);
  color:#fff;
  padding:16px 28px;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .2s;
  white-space:nowrap;
}
.cta-btn:hover{background:var(--accent);}
.cta-btn .arrow{transition:transform .2s;}
.cta-btn:hover .arrow{transform:translateX(4px);}

/* ---------- LIGHTBOX (commune à works.html et contact/photo.html) ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,11,10,0.94);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:10vh 10vw;
}
.lightbox.open{display:flex;}
.lightbox-inner{
  width:100%;
  max-width:min(80vw, 142.22vh);
}
.lightbox-frame{
  aspect-ratio:16/9;
  background:#000;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-frame svg{width:100%;height:100%;}
.lightbox-info{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}
.lightbox-info h3{
  font-family:var(--display);
  font-size:22px;
  font-weight:600;
  color:#fff;
}
.lightbox-info .li-cat{
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent);
  margin-bottom:6px;
  display:block;
}
.lightbox-info p{
  color:#C9CCC6;
  font-size:14px;
  max-width:480px;
  margin-top:6px;
}
.lightbox-tags{display:flex;gap:8px;flex-wrap:wrap;}
.lightbox-close{
  position:absolute;
  top:28px;right:32px;
  font-family:var(--mono);
  font-size:13px;
  color:#fff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  padding:9px 16px;
  border-radius:20px;
  cursor:pointer;
  z-index:201;
}
.lightbox-close:hover{background:var(--accent);border-color:var(--accent);}

/* ---------- WORK CARD (carte vidéo bandeau, commune à works.html et contact/photo.html) ---------- */
.work-card{
  background:var(--ink);
  border-radius:6px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.work-thumb{
  aspect-ratio:21/9;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .35s ease;
}
.work-card:hover .work-thumb{transform:scale(1.025);}
.work-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,9,8,0.88) 0%, rgba(8,9,8,0.55) 38%, rgba(8,9,8,0.05) 70%);
}
.work-tags{
  position:absolute;
  top:16px;right:18px;
  display:flex;
  gap:6px;
  z-index:2;
}
.work-play{
  position:absolute;
  top:50%;right:34px;
  transform:translateY(-50%) scale(0.85);
  width:50px;height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s, transform .2s;
  z-index:2;
}
.work-card:hover .work-play{opacity:1;transform:translateY(-50%) scale(1);}
.work-play svg{width:15px;height:15px;}
.work-meta{
  position:absolute;
  left:0;bottom:0;
  padding:22px 26px 24px;
  color:#fff;
  z-index:2;
  max-width:560px;
}
.work-meta .wm-cat{
  font-family:var(--mono);
  font-size:11px;
  color:var(--accent);
  letter-spacing:0.03em;
  margin-bottom:7px;
  display:block;
}
.work-meta h3{
  font-family:var(--display);
  font-size:clamp(19px,2.2vw,24px);
  font-weight:600;
  margin-bottom:6px;
  line-height:1.15;
}
.work-meta p{
  font-size:13px;
  color:#C9CCC6;
  line-height:1.45;
}
.work-index{
  position:absolute;
  left:26px;top:20px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,0.5);
  z-index:2;
}

/* ---------- FOOTER (commun) ---------- */
footer{
  padding:28px 0 40px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mono-grey);
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- RESPONSIVE COMMUN ---------- */
@media (max-width:900px){
  .nav-links{display:none;}
}
@media (max-width:860px){
  .timeline-logo{display:none;}
  .section-head{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}