:root{
  --black:#0B0B0B;
  --red:#e03d2b;
  --jade:#36b39d;
  --fg:#F4F4F4;
  --fade:rgba(255,255,255,0.08);
}

*{
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,body{
  margin:0;
  padding:0;
  background:var(--black);
  color:var(--fg);
  font-family:"Helvetica Neue", Inter, Arial, sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:smooth;
  min-height:100%;
}

/* --- LINKS --- */
a{
  color:inherit;
  text-decoration:none;
  opacity:0.9;
  transition:all .25s ease;
}
a:hover{
  opacity:1;
  color:var(--jade);
}

/* --- CONTAINER --- */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* --- HEADER / SIDEBAR --- */
.header-logo{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:20px;
  z-index:50;
}
.header-logo img{
  height:30px;
  filter:brightness(1.1);
  transition:transform .3s ease;
}
.header-logo img:hover{
  transform:scale(1.05);
}

.sidebar{
  position:fixed;
  left:20px;
  top:20px;
  z-index:50;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.12em;
}
.sidebar a{
  display:block;
  margin:10px 0;
  opacity:.6;
  font-weight:600;
  transition:color .3s ease, opacity .3s ease;
}
.sidebar a.active{
  color:var(--jade);
  opacity:1;
}
.sidebar a:hover{
  color:var(--red);
  opacity:1;
}

/* --- TITLES --- */
.section-title{
  text-align:center;
  margin:140px 0 40px;
}

/* Gradient title (Chrome) */
.huge{
  font-weight:800;
  font-size:clamp(40px, 8vw, 92px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  background:linear-gradient(90deg, var(--red), var(--jade));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Safari fallback => always visible */
@supports (-webkit-touch-callout: none){
  .huge{
    background:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
}

.caption{
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:12px;
  opacity:.7;
  color:var(--jade);
}

/* --- GRID PROJECTS --- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

@media (min-width:900px){
  .grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  aspect-ratio:4/3;
  background:#111;
  transition:transform .4s ease, box-shadow .4s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.5);
}

.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.03) brightness(.9);
  transform:scale(1.01);
  transition:transform .4s ease, filter .4s ease;
}

.card:hover img{
  transform:scale(1.06);
  filter:contrast(1.15) brightness(1);
}

.card h3{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-weight:900;
  font-size:clamp(18px, 2.3vw, 30px);
  text-transform:uppercase;
  text-shadow:0 3px 16px rgba(0,0,0,.7);
  color:#fff;
  /* mix-blend-mode removed for Safari stability */
}

/* --- BUTTONS --- */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border-radius:14px;
  background:var(--red);
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:background .3s ease, transform .2s ease;
}
.button:hover{
  background:var(--jade);
  transform:translateY(-2px);
}
.button.alt{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
}
.button.alt:hover{
  border-color:var(--jade);
  color:var(--jade);
}

/* --- FORM --- */
.form label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  opacity:.75;
  margin-top:16px;
}
.form input,
.form textarea,
.form select{
  width:100%;
  margin-top:8px;
  background:#fff;
  color:#111;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
}
.form textarea{
  min-height:140px;
  resize:vertical;
}

/* --- HERO / VIDEO --- */
.hero-video{
  width:100%;
  border-radius:16px;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--black), #141414);
}

/* --- TEXTS --- */
.prose{
  max-width:720px;
  margin:0 auto;
  opacity:.92;
  font-size:18px;
  line-height:1.7;
}
.rule{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--fade), transparent);
  margin:28px 0;
}

/* --- FOOTER / NAV TOP --- */
.top-link{
  position:fixed;
  right:20px;
  bottom:20px;
  opacity:.7;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.05);
  transition:all .25s ease;
  z-index:60;
}
.top-link:hover{
  opacity:1;
  background:var(--jade);
  border-color:var(--jade);
  color:#fff;
}

/* --- PROJECT PAGE --- */
.project-hero{
  width:100%;
  border-radius:18px;
  aspect-ratio:21/9;
  object-fit:cover;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}

.badge{
  display:inline-block;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  opacity:.8;
  color:var(--jade);
}

/* ----- COMING SOON message ----- */
.coming-soon{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  text-align:center;
  color:rgba(255,255,255,.7);
  font-weight:400;
  font-size:clamp(13px, 1.5vw, 17px);
  letter-spacing:.08em;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.coming-soon.visible{
  opacity:1;
  transform:translateY(0);
}

/* Image protection */
img.protect{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.site-footer{
  text-align:center;
  color:rgba(255,255,255,.6);
  font-size:13px;
  margin:60px 0 20px;
}

/* ===============================
   SAFARI / iOS PATCH — ensure render
================================ */
@supports (-webkit-touch-callout: none){
  .card{
    transform:translateZ(0);
  }
  .card img{
    filter:none;
  }
}

/* ===============================
   MOBILE LAYOUT — clean
================================ */
@media (max-width:900px){
  .grid{
    grid-template-columns:1fr;
  }
  .card{
    height:240px;
    aspect-ratio:auto;
  }
  .section-title{
    margin:120px 0 26px;
  }
  .sidebar{
    left:12px;
    top:12px;
    font-size:12px;
  }
  .header-logo{
    top:12px;
  }
  .top-link{
    right:14px;
    bottom:14px;
  }
}

/* =========================================
   MANUALS — BADGES VERSION (FR / EN / NL)
========================================= */

.manuals{
  width:100%;
  padding: 2.6rem 0 1.2rem;
}

.manuals__head{
  text-align:center;
  margin-bottom: 1.6rem;
}

.manuals__title{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 .55rem;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.manuals__subtitle{
  opacity: .7;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.45;
  color: var(--fg);
}

/* wrapper badges */
.manuals-badges{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: .85rem;
}

/* badge link */
.manual-badge{
  display:inline-flex;
  align-items:center;
  gap: .7rem;

  padding: .75rem 1.05rem;
  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  color: var(--fg);
  text-decoration:none;

  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  
  -webkit-tap-highlight-color: transparent;
}

/* hover */
.manual-badge:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  color: var(--fg) !important;
}

/* TAG inside badge */
.manual-badge__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 28px;
  min-width: 38px;
  padding: 0 10px;

  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  color: #0b0b0b;
}

/* text */
.manual-badge__text{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  opacity: .92;
  text-transform: uppercase;
}

/* icon */
.manual-badge__icon{
  opacity: .55;
  font-weight: 900;
  transition: opacity .18s ease, transform .18s ease;
}

.manual-badge:hover .manual-badge__icon{
  opacity: 1;
  transform: translateX(2px);
}

/* variants */
.manual-badge--fr .manual-badge__tag{ background: var(--red); }
.manual-badge--en .manual-badge__tag{ background: var(--jade); }
.manual-badge--nl .manual-badge__tag{ background: rgba(255,255,255,0.78); }

/* Mobile : full width clean */
@media (max-width: 600px){
  .manuals-badges{
    flex-direction: column;
    align-items: center;
  }

  .manual-badge{
    width: 100%;
    max-width: 360px;
    justify-content: space-between;
  }
}