:root{
    --void:#0a0a0a;
    --panel:#141414;
    --panel-2:#1c1c1c;
    --teal:#262626;
    --teal-bright:#3a3a3a;
    --amber:#ffffff;
    --amber-dim:#999999;
    --text:#f5f3ef;
    --text-dim:#8f8f8f;
    --line: rgba(245,243,239,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }
  ::selection{background:var(--amber);color:var(--void);}

  /* Letterbox frame — signature device, persists across the whole page */
  .letterbox-top, .letterbox-bottom{
    position:fixed; left:0; right:0; height:5vh; min-height:28px;
    background:#000; z-index:50; pointer-events:none;
  }
  .letterbox-top{top:0; border-bottom:1px solid rgba(255,255,255,0.2);}
  .letterbox-bottom{bottom:0; border-top:1px solid rgba(255,255,255,0.2);}
  .letterbox-top::after, .letterbox-bottom::after{
    content:'TOM DEVREEZE — 35MM';
    position:absolute; left:24px; top:50%; transform:translateY(-50%);
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.15em;
    color:var(--amber-dim);
  }
  .letterbox-bottom::after{content:'RÉEL — LYON / CLERMONT-FERRAND'; left:auto; right:24px;}

  nav{
    position:fixed; top:5vh; left:0; right:0; z-index:40;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 5vw; background:linear-gradient(to bottom, rgba(10,13,18,0.9), transparent);
  }
  .logo{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:1.25rem; font-weight:400;}
  .logo span{color:var(--amber); font-style:italic;}
  .navlinks{display:flex; gap:36px; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;}
  .navlinks a{color:var(--text-dim); text-decoration:none; transition:color .3s;}
  .navlinks a:hover{color:var(--amber);}

  section{padding:14vh 5vw 12vh; position:relative;}

  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.12em;
    color:var(--amber); display:flex; align-items:center; gap:12px; margin-bottom:24px;
  }
  .eyebrow::before{content:''; width:28px; height:1px; background:var(--amber);}

  /* HERO */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    background:
      radial-gradient(ellipse at 25% 30%, rgba(255,255,255,0.06), transparent 55%),
      radial-gradient(ellipse at 75% 70%, rgba(255,255,255,0.10), transparent 50%),
      var(--void);
  }
  .hero h1{
    font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(2.6rem,6.5vw,5.2rem);
    line-height:1.02; max-width:15ch;
  }
  .hero h1 em{font-style:italic; color:var(--amber); font-weight:400;}
  .hero p{
    margin-top:28px; max-width:42ch; color:var(--text-dim); font-size:1.05rem; line-height:1.6;
  }
  .hero-meta{
    margin-top:56px; display:flex; gap:48px; font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--text-dim);
  }
  .hero-meta strong{display:block; color:var(--text); font-size:0.9rem; margin-bottom:4px; font-weight:500;}

  /* Section title */
  .stitle{
    font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(1.8rem,4vw,3rem);
    margin-bottom:18px; max-width:20ch;
  }
  .sdesc{color:var(--text-dim); max-width:52ch; font-size:1rem; line-height:1.7; margin-bottom:56px;}

  /* IMMOBILIER — featured, first */
  .immo-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:2px; background:var(--line);}
  .immo-main{
    aspect-ratio:16/11; background:
      linear-gradient(160deg, var(--teal) 0%, #1a2f35 60%, var(--void) 100%);
    position:relative; overflow:hidden;
  }
  .immo-main img{width:100%; height:100%; object-fit:cover; opacity:0.92;}
  .immo-side{display:grid; grid-template-rows:1fr 1fr; gap:2px;}
  .immo-panel{
    background:linear-gradient(150deg, var(--panel-2), var(--void));
    display:flex; align-items:flex-end; padding:20px; position:relative;
  }
  .panel-label{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--amber-dim); letter-spacing:0.08em;
  }
  .immo-cta{
    margin-top:40px; display:inline-flex; align-items:center; gap:12px;
    font-family:'JetBrains Mono',monospace; font-size:0.8rem; letter-spacing:0.06em;
    color:var(--amber); text-decoration:none; border-bottom:1px solid var(--amber-dim); padding-bottom:6px;
  }

  /* VIDEO / DRONE */
  .video-block{
    background:var(--panel); border:1px solid var(--line); border-radius:2px;
    padding:60px 5vw; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  }
  .video-frame{
    aspect-ratio:16/9; background:
      linear-gradient(200deg, #16222a, var(--void) 70%);
    border:1px solid var(--line); position:relative; display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .video-frame.has-video{
    aspect-ratio:auto; height:560px; background:#000;
  }
  .video-frame video{
    width:100%; height:100%; object-fit:contain; display:block; background:#000;
  }
  .video-picker{
    display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;
  }
  .video-picker button{
    background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.05em;
    padding:10px 16px; cursor:pointer; transition:all .3s; text-transform:uppercase;
  }
  .video-picker button:hover{border-color:var(--amber-dim); color:var(--text);}
  .video-picker button.active{background:var(--amber); color:var(--void); border-color:var(--amber);}
  .video-sound-toggle{
    position:absolute; bottom:16px; right:16px; z-index:5;
    background:rgba(10,13,18,0.7); border:1px solid var(--amber-dim); color:var(--amber);
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.05em;
    padding:8px 14px; cursor:pointer; backdrop-filter:blur(4px);
  }
  .video-sound-toggle:hover{background:var(--amber); color:var(--void);}
  .play-dot{
    width:64px; height:64px; border-radius:50%; border:1px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
  }
  .play-dot::after{content:''; width:0; height:0; border-left:14px solid var(--amber); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px;}
  .drone-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
  .drone-tags span{
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:6px 12px;
    border:1px solid var(--line); color:var(--text-dim); letter-spacing:0.05em;
  }

  /* OTHER WORK GRID */
  .work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
  .work-item{
    aspect-ratio:4/5; position:relative; overflow:hidden; cursor:pointer;
  }
  .work-item .swatch{
    position:absolute; inset:0; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .work-item .swatch img{width:100%; height:100%; object-fit:cover; display:block;}
  .work-item:hover .swatch{transform:scale(1.09);}
  .work-item .tag{
    position:absolute; left:18px; bottom:18px; font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em;
    font-size:1.15rem;
  }
  .work-item .num{
    position:absolute; right:18px; top:18px; font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:rgba(237,232,222,0.6);
  }

  /* TARIFS */
  .tarifs-list{border-top:1px solid var(--line);}
  .tarif-row{
    display:flex; justify-content:space-between; align-items:baseline; padding:26px 0;
    border-bottom:1px solid var(--line);
  }
  .tarif-row h4{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:1.3rem;}
  .tarif-row .from{font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:0.95rem;}
  .tarif-row p{color:var(--text-dim); font-size:0.85rem; margin-top:4px; max-width:44ch;}

  /* CONTACT */
  .contact{
    display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:start;
  }
  .contact-links a{
    display:block; color:var(--text); text-decoration:none; font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:1.4rem;
    padding:14px 0; border-bottom:1px solid var(--line); transition:color .3s;
  }
  .contact-links a:hover{color:var(--amber);}
  .contact-links span{display:block; font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-dim); margin-top:4px;}

  footer{
    padding:40px 5vw 8vh; display:flex; justify-content:space-between;
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-dim);
    border-top:1px solid var(--line);
  }

  /* Page header (sous-pages) */
  .page-hero{padding-top:20vh; padding-bottom:8vh;}
  .page-hero h1{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(2.2rem,5vw,3.8rem); max-width:18ch;}
  .page-hero p{color:var(--text-dim); max-width:50ch; margin-top:20px; font-size:1rem; line-height:1.6;}
  .back-link{
    display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
    font-size:0.72rem; letter-spacing:0.08em; color:var(--text-dim); text-decoration:none; margin-bottom:34px;
  }
  .back-link:hover{color:var(--amber);}

  /* Galerie complète */
  .gal-category{margin-bottom:80px;}
  .gal-category-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:16px;}
  .gal-category-head h3{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:1.6rem; }
  .gal-category-head span{font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-dim);}

  /* Tarifs page */
  .tarif-card{
    border:1px solid var(--line); padding:40px 32px; position:relative; display:flex; flex-direction:column; height:100%;
  }
  .tarif-card.featured{border-color:var(--amber-dim); background:linear-gradient(160deg, rgba(255,255,255,0.05), transparent);}
  .tarif-card .badge{
    position:absolute; top:-13px; left:32px; background:var(--amber); color:var(--void);
    font-family:'JetBrains Mono',monospace; font-size:0.65rem; padding:4px 10px; letter-spacing:0.05em;
  }
  .tarif-card h4{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:1.5rem; margin-bottom:6px;}
  .tarif-card .price{font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:1.6rem; margin:18px 0;}
  .tarif-card .price small{font-size:0.75rem; color:var(--text-dim); font-family:'Inter',sans-serif;}
  .tarif-card ul{list-style:none; flex:1; margin-bottom:28px;}
  .tarif-card li{
    font-size:0.88rem; color:var(--text-dim); padding:10px 0; border-bottom:1px solid var(--line);
    display:flex; gap:10px;
  }
  .tarif-card li::before{content:'—'; color:var(--amber-dim); flex-shrink:0;}
  .tarif-card .cta-btn{
    text-align:center; padding:14px; border:1px solid var(--amber-dim); color:var(--amber);
    text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:0.06em;
    transition:background .3s,color .3s;
  }
  .tarif-card .cta-btn:hover{background:var(--amber); color:var(--void);}
  .tarifs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-bottom:60px;}
  .tarifs-grid > div{background:var(--void);}
  .tarif-note{
    font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--text-dim);
    border-top:1px solid var(--line); padding-top:24px; max-width:60ch; line-height:1.8;
  }

  /* Contact form */
  .contact-page-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:start;}
  .form-group{margin-bottom:26px;}
  .form-group label{
    display:block; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
    color:var(--text-dim); margin-bottom:10px; text-transform:uppercase;
  }
  .form-group input, .form-group select, .form-group textarea{
    width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:13px 14px; font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:300;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    outline:none; border-color:var(--amber-dim);
  }
  .form-group textarea{resize:vertical; min-height:120px;}
  .submit-btn{
    background:var(--amber); color:var(--void); border:none; padding:15px 34px;
    font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.06em;
    cursor:pointer; transition:opacity .3s;
  }
  .submit-btn:hover{opacity:0.85;}
  .contact-side .info-block{margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--line);}
  .contact-side .info-block:last-child{border-bottom:none;}
  .contact-side .info-block h5{font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; color:var(--amber-dim); margin-bottom:10px; text-transform:uppercase;}
  .contact-side .info-block p{color:var(--text-dim); font-size:0.92rem; line-height:1.7;}
  .form-note{
    margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-dim); line-height:1.6;
  }

  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:60; position:relative;
  }
  .nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition:all .3s;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media(max-width:820px){
    .tarifs-grid{grid-template-columns:1fr;}
    .contact-page-grid{grid-template-columns:1fr;}
    .immo-grid{grid-template-columns:1fr;}
    .immo-side{grid-template-columns:1fr 1fr; grid-template-rows:none;}
    .video-block{grid-template-columns:1fr;}
    .work-grid{grid-template-columns:repeat(2,1fr);}
    .contact{grid-template-columns:1fr;}
    .navlinks{
      display:none; position:fixed; inset:0; z-index:55; background:var(--void);
      flex-direction:column; align-items:flex-start; justify-content:center; gap:0;
      padding:0 8vw;
    }
    .navlinks.open{display:flex;}
    .navlinks a{
      font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size:1.8rem; font-weight:400;
      color:var(--text); padding:16px 0; border-bottom:1px solid var(--line); width:100%;
      text-transform:none; letter-spacing:0;
    }
    .nav-toggle{display:block;}
    .hero-meta{flex-wrap:wrap; gap:28px;}
  }

.work-item{cursor:zoom-in;}

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(6,8,11,0.97); z-index:300;
  display:none; align-items:center; justify-content:center; padding:8vh 6vw;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:100%; max-height:84vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:1px solid var(--line); color:var(--text);
  width:40px; height:40px; border-radius:50%; font-size:1.3rem; cursor:pointer; z-index:310;
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
  transition:border-color .3s, color .3s;
}
.lightbox-close:hover{border-color:var(--amber); color:var(--amber);}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(10,13,18,0.7); border:1px solid var(--line);
  color:var(--text); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.2rem; z-index:310; transition:border-color .3s, color .3s;
}
.lightbox-nav:hover{border-color:var(--amber); color:var(--amber);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-caption{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.04em;
  text-align:center; max-width:80vw;
}
@media(max-width:820px){
  .lightbox-nav{width:38px; height:38px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ============================================================
   ANIMATIONS — apparition au scroll + timecodes façon chronomètre
   Uniquement transform/opacity (compositing GPU, pas de reflow),
   déclenché par IntersectionObserver (pas d'écoute de scroll en
   continu). Tout est coupé si l'utilisateur préfère moins de
   mouvement, ou si le navigateur ne supporte pas l'API.
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Titres — révélation mot par mot (voir animations.js) */
.word-reveal{
  display:inline-block;
  opacity:0;
  transform:translateY(0.5em);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.word-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Barre de progression scroll — façon scrubber vidéo, cohérent avec
   l'identité timecode du site. Posée au-dessus du bandeau letterbox. */
.scrub-track{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(245,243,239,0.1); pointer-events:none;
}
.scrub-fill{
  height:100%; width:0%; background:var(--amber);
  box-shadow:0 0 6px rgba(255,255,255,0.6);
}
.scrub-readout{
  position:fixed; top:0; height:5vh; min-height:28px; right:20px; z-index:61;
  display:flex; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em;
  color:var(--amber-dim); pointer-events:none;
}

/* petit voyant "REC" clignotant, uniquement sur le eyebrow du hero */
.hero .eyebrow::after{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--amber); animation:recBlink 1.8s ease-in-out infinite;
}
@keyframes recBlink{
  0%,100%{opacity:1;}
  50%{opacity:0.15;}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .word-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .hero .eyebrow::after{animation:none !important;}
}

/* Le scrubber reste peu utile sur les très petits écrans où les pages
   défilent peu — masqué sous 480px pour ne pas surcharger la barre letterbox */
@media (max-width:480px){
  .scrub-readout{display:none;}
}