:root {
      --surface: hsla(0, 31%, 54%, 0);
      --muted: hsl(220 12% 18%);
      --accent: hsl(200 80% 60%);
      --fs-sm: 0.875rem;
      --fs-md: 1rem;
      --fs-lg: 1.125rem;
      --fs-xl: 1.5rem;
      --fs-3xl: 2.5rem;
      --space-2: 0.5rem;
      --space-4: 1rem;
      --space-6: 1.5rem;
      --radius-md: 12px;
      --container-max: 1200px;
    /*FONT SIZE*/
      --font-size-66: 66px;
      --font-size-48: 48px;
      --font-size-36: 36px;
      --font-size-28: 28px;
      --font-size-22: 22px;
      --font-size-20: 20px;
      --font-size-18: 18px;
      --font-size-16: 16px;
      --font-size-14: 14px;
      --font-size-13: 13px;
    /*COLORS*/
      --color-red: #D24258;
      --color-yellow: #F9EF80;
      --color-blu: #8CD1EA;
      --color-dar-blu: #272B3F;
      --color-gris: #303030;
      --color-noir: #050505;
      --color-blanc: #E6E6E6;
    /*FONTS*/
      --font-greycliff: "greycliff-cf";
      --font-ibm: "ibm-plex-mono"
    /*FILTRES*/
      --filter-brightness: 125%;
      /**/
      --size-separator-desktop: var(--size-016);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    
    body {
      font-family: var(--font-greycliff);
      background: var(--color-noir); /* fond solide de secours */
      background: linear-gradient(180deg, var(--color-noir) 0%, var(--color-noir) 100%);
      color: var(--color-blanc);
      line-height: 1.4;
    }

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

    /* === HEADER === */
    .site-header{
      position:sticky;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      backdrop-filter:blur(8px);
      background:rgba(10,10,10,0.6);
      border-bottom:1px solid rgba(255,255,255,0.05);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--space-2) var(--space-4);
    }
    .header-inner{
      width:100%;
      max-width:var(--container-max);
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .brand{display:flex;align-items:center;gap:var(--space-2);}
    .brand__logo{
      width:44px;
      height:65px;
      border-radius:8px;
      object-fit:contain;
    }
    .brand__title{font-family:var(--font-greycliff);font-size:var(--fs-lg);}
    .nav{display:flex;gap:var(--space-4);}
    .nav a{font-size:var(--fs-sm);opacity:0.9;}
    .cta{background:var(--color-yellow);color:#0b0b0b;padding:0.4rem 0.8rem;border-radius:8px;font-weight:600;}
    .burger{display:none;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;}
    @media(max-width:768px){.nav{display:none}.burger{display:flex}}

    /* === HERO AVEC VIDÉO === */
    .hero {
      position: relative;
      height: 91vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-blanc);
      text-align: center;
    }

    .hero-video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.45);
      z-index: 0;
    }

    .hero-overlay {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: var(--space-6);
    }

    .hero-content {
      max-width: 800px;
    }

    .hero__title {
      font-family: var(--font-greycliff);
      font-size: var(--fs-3xl);
      line-height: 1.05;
      margin-bottom: var(--space-4);
    }

    .hero__subtitle {
      font-size: var(--fs-lg);
      opacity: 0.85;
      margin-bottom: var(--space-4);
    }

    .hero__actions {
      display: flex;
      gap: var(--space-4);
      justify-content: center;
    }

/* === BANDEAU === */
.marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  background-color: var(--color-blanc);
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid rgba(0,0,0,0.05);
  z-index: 3;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.marquee-content {
  display: inline-block;
  padding-left: 0;
  animation: marquee 140s linear infinite;
  color: black;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* === WORK SECTION === */
    .work{
      max-width:var(--container-max);
      margin:4rem auto;
      padding:0 var(--space-4);
    }

    .work h2{
      font-family:var(--font-greycliff);
      font-size:var(--fs-xl);
      margin-bottom:var(--space-6);
      text-align:center;
    }

    .projects-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:var(--space-4);
    }

    .project-card{
      position:relative;
      background:var(--surface);
      overflow:hidden;
      cursor:pointer;
      transition:transform .25s ease, box-shadow .25s ease;
    }

    .project-card:hover{
      filter: brightness(125%);
      transform: scale(1.05);
    }
    .project-card img{
      width:100%;
      aspect-ratio:1/1;
      transition-timing-function: ease-in;
      transition-duration: 150ms;
    }

      .project-image{
      height: 100%;
      width: 100%;
      position:relative;
      background:var(--surface);
      overflow:hidden;
      cursor:pointer;
    }

    .project-card:hover img{transform:scale(1.05);}
    .project-info{padding-top:var(--space-4);}
    .project-info h3{font-family:var(--font-greycliff);font-size:var(--fs-md);margin-bottom:0.3rem;}
    .project-info p{font-size:var(--fs-sm);opacity:0.75;}

    .video-projet {
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;
      transition-timing-function: ease-in;
      transition-duration: 150ms;
      display: block;
    }

    .video-projet:hover{
      filter: brightness(125%);
      transform: scale(1.05);
    }

    .projects-grid.second-row{
      grid-template-columns: repeat(2, 1fr);
      margin-top:var(--space-6);
    }

    @media(max-width:768px){
      .projects-grid, .projects-grid.second-row{
      grid-template-columns:1fr;
      }
    }

    /* === FOOTER === */
    footer{
      background:var(--surface);
      border-top:1px solid rgba(255,255,255,0.1);
      margin-top:4rem;
      padding:3rem var(--space-4);
    }
    .footer-inner{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:var(--space-6);
      max-width:var(--container-max);
      margin:0 auto;
      align-items:start;
    }
    .footer-col h4{
      font-family:var(--font-ibm);
      margin-bottom:var(--space-4);
      font-size:var(--fs-md);
    }
    .footer-col ul{list-style:none;padding:0;}
    .footer-col li{margin-bottom:0.4rem;opacity:0.8;font-size:var(--fs-sm);}
    .footer-col li:hover{opacity:1;}
    .footer-logo{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }
    .footer-logo img{
      width:100px;
      height:auto;
      margin-bottom:var(--space-4);
    }
    .footer-message{
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      opacity:0.8;
      font-size:var(--fs-sm);
    }
    @media(max-width:768px){
      .footer-inner{
        grid-template-columns:1fr;
        text-align:center;
      }
      .footer-logo{align-items:center;}
      .footer-col{margin-bottom:var(--space-4);}
      .footer-message{margin-top:var(--space-4);}

/* === PAGE ERREUR 404 === */
.page-404 {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centre horizontalement */
  justify-content: center;  /* centre verticalement */
  text-align: center;
  min-height: 100vh;
  background: var(--color-noir);
  color: var(--color-noir);
  padding: var(--space-6);
}

/* === TITRE === */
.page-404 h1 {
  font-family: var(--font-greycliff);
  font-size: var(--font-size-66);
  color: var(--color-yellow);
  margin-bottom: var(--space-4);
}

/* === TEXTE === */
.page-404 p {
  font-family: var(--font-ibm);
  font-size: var(--font-size-18);
  opacity: 0.8;
  margin-bottom: var(--space-6);
}

/* === IMAGE === */
.error-image {
  width: 220px;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fix affichage fond noir sur mobile */
html, body {
  background-color: var(--color-noir) !important;
  background: linear-gradient(180deg, var(--color-noir) 0%, var(--color-noir) 100%) !important;
}

  }