:root{
      --site-width:1024px;
      --bg:#f5f6f8;
      --accent1:#006aea;
      --accent2:#78e1ca;
      --accent3:#f17884;
      --dark:#061254;
      --blue:#006aea;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial;
      background:var(--bg);
      color:#111;
    }

    .wrap{
      width:var(--site-width);
      min-height:100vh;
      margin:0 auto;
      display:flex;
      flex-direction:column;
    }

    header{
      position:fixed;
      left:0;top:0;
      width:100%;height:72px;
      background:#ffffff;
      border-bottom:1px solid rgba(0,0,0,0.06);
      z-index:400;
    }
    .header-inner{
      width:var(--site-width);
      margin:0 auto;
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 24px;
    }

    .brand{display:flex;align-items:center;gap:6px}
    .logo{width:34px;height:34px;border-radius:0;background:transparent}
    .name{font-weight:600;font-size:16px;letter-spacing:0;color:#000;text-decoration:none;}

    nav{
      display:flex;
      gap:44px;
      font-size:16px;
      font-weight:400;
      color:#000;
    }
    nav a{
      text-decoration:none;
      color:inherit;
      transition: opacity 200ms ease;
    }
    nav a:hover{
      opacity: 0.6;
    }

    /* gradient bar full width derrière le header */
    .gradient-bar{
      position:absolute;
      left:0;top:0;
      width:100%;
      height:180px;
      pointer-events:none;
      overflow:hidden;
      z-index:100;
    }
    .gradient-bar .track{
      position:absolute;
      top:0;left:0;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,
        var(--accent1) 0%,
        var(--accent2) 40%,
        var(--accent3) 80%,
        var(--accent3) 100%
      );
      will-change:transform;
    }
    .gradient-bar:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(
        to bottom,
        rgba(245,246,248,0) 0%,
        rgba(245,246,248,0.3) 40%,
        #f5f6f8 100%
      );
    }

    main{
      position:relative;
      z-index:200;
      padding-top:88px;
      padding-bottom:40px;
      flex:1;
    }

    /* intro */
    .intro{max-width:760px;margin:30px auto 10px}
    .intro p{
      font-size:18px;
      line-height:1.28;
      color:#111;
      margin:0;
      text-align:center;
    }

    @media (max-width: 700px) {
      .intro p{
        font-size: 16px;
      }
    }

    .social-row{display:flex;gap:18px;justify-content:center;margin-top:40px}
    .pill{
      width:280px;height:60px;
      background:#fff;
      border-radius:16px;
      display:flex;gap:8px;align-items:center;
      padding:8px 14px;
      box-shadow:0 6px 20px rgba(2,6,23,0.06);
      border:1px solid rgba(0,0,0,0.035);
      text-decoration:none;
      color:#111;
      transition:transform 200ms ease;
    }
    .pill:hover{transform:scale(0.95);} 
    .pill .icon{width:34px;height:34px;border-radius:8px;background:transparent;flex:0 0 34px}
    .pill .texts{display:flex;flex-direction:column}
    .pill .title{font-weight:500;font-size:16px}
    .pill .sub{font-weight:400;font-size:10px;color:#000;}

    /* showreel */
    .showreel{
      width:var(--site-width);
      height:340px;
      margin:48px auto;
      border-radius:16px;
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:height 480ms ease;
    }
    .showreel .bg{
      position:absolute;inset:0;
      background:radial-gradient(1200px 800px at 50% -20%,
        #006aea 0%,
        #061254 30%,
        #000000 60%
      );
      z-index:1;
    }

    .bigword{
      position:absolute;
      left:50%;
      top:40%;
      --parallax-offset:0px;
      transform:translate(-50%, calc(80px + var(--parallax-offset)));
      font-size:220px;
      font-weight:800;
      letter-spacing:-10px;
      z-index:2;
      pointer-events:none;
      line-height:0.85;
      transition:transform 1400ms cubic-bezier(.2,.9,.2,1),opacity 600ms;
      background:linear-gradient(
        to bottom,
        rgba(127,193,181,1) 0%,
        rgba(127,193,181,1) 30%,
        rgba(0,106,234,0.6) 75%,
        rgba(0,0,0,0) 95%
      );
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .bigword.inview{transform:translate(-50%, var(--parallax-offset));}

    .showreel .overlay{
      position:absolute;
      top:38%;
      left:50%;
      transform:translate(-50%, -50%);
      z-index:4;
      text-align:center;
      color:#fff;
      transition:opacity 400ms;
      opacity:1;
    }
    .showreel.expanded .overlay{opacity:0;pointer-events:none;}
    .showreel .title{font-size:24px;font-weight:600;margin-bottom:6px}
    .playbtn{
      font-size:15px;
      appearance:none;
      border:none;
      background:#006aea;
      color:#fff;
      padding:8px 16px;
      border-radius:24px;
      cursor:pointer;
      font-weight:400;
      transition:transform 200ms ease, background 200ms ease;
    }
    .playbtn:hover{transform:scale(0.95);background:#0080ff;}

    .frame{
      position:absolute;
      left:0;top:0;
      width:100%;height:100%;
      z-index:3;
      opacity:0;
      pointer-events:none;
      transition:opacity 300ms;
    }
    .frame iframe{width:100%;height:100%;border:0;display:block;}
    .showreel.expanded{height:calc(var(--site-width) * 9 / 16);} 
    .showreel.expanded .frame{opacity:1;pointer-events:auto}

@media (max-width: 700px) {
  .showreel{
    width:100%;       /* prend 100% de .wrap, pas du viewport */
    margin:32px 0;
    border-radius:16px; /* garde l’arrondi propre */
  }
  .showreel .bg{
    border-radius:16px;
  }

  .bigword{
    font-size: clamp(40px, 25vw, 200px); /* ou les valeurs qui te plaisent */
    letter-spacing:-4px;
    top:70%;
    transform:translate(-50%, calc(40px + var(--parallax-offset)));
  }
  .bigword.inview{
    transform:translate(-50%, var(--parallax-offset));
  }
}

    /* photos */
    .photos{max-width:760px;margin:60px auto 20px;text-align:center}
    .photos p{font-size:18px;color:#111;margin-bottom:12px}
    .photos a.cta{
      font-size:15px;
      display:inline-block;
      background:var(--blue);
      color:#fff;
      padding:8px 16px;
      border-radius:22px;
      border:none;
      font-weight:400;
      margin-bottom:16px;
      transition:transform 200ms ease, background 200ms ease;
      text-decoration: none;
    }
    .photos a.cta:hover{transform:scale(0.95);background:#0080ff;}

 @media (max-width: 700px) {
      .photos p{
        font-size: 16px;
      }
    }

    .stack-wrap{height:200px;display:flex;align-items:center;justify-content:center}
    .stack{position:relative;width:360px;height:180px}
    .stack .ph{
      position:absolute;
      border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,0.22);
      transition:transform 950ms cubic-bezier(.2,.9,.2,1);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    .stack .left{
      left:50%; top:38px;
      width:114px;height:190px;
      transform:translateX(-115%) rotate(-6deg);
      background-image:url('images/home/photo-left.jpg');
    }
    .stack .center{
      position:absolute;
      left:50%;top:22px;
      transform:translateX(-50%);
      z-index:5;
      width:130px;height:215px;
      background-image:url('images/home/photo-center.jpg');
    }
    .stack .right{
      left:50%; top:38px;
      width:114px;height:190px;
      transform:translateX(15%) rotate(6deg);
      background-image:url('images/home/photo-right.jpg');
    }
    .stack:hover .left{transform:translateX(-135%) rotate(-6deg);} 
    .stack:hover .right{transform:translateX(35%) rotate(6deg);} 

    /* carousel */
    .carousel{width:100vw;position:relative;left:50%;transform:translateX(-50%);margin:140px 0 0;}
    .carousel-viewport{width:100%;overflow:hidden;}
    .carousel-track{
      display:flex;
      align-items:stretch;
      will-change:transform;
    }
    .carousel-item{
      flex:0 0 600px;
      margin:0 9px;
      height:340px;
      border-radius:16px;
      background:var(--accent3);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      position:relative;
      overflow:hidden;
      opacity:0.4;
      transform:scale(1) translateY(0);
      transition:opacity 400ms ease, transform 700ms ease;
    }
    .carousel-item::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
      z-index:0;
    }
    .carousel-item .meta,
    .carousel-item a.projbtn{
      z-index:1;
    }
    .carousel-item.proj-a{background-image:url('images/home/projet-a.jpg');}
    .carousel-item.proj-b{background-image:url('images/home/projet-b.jpg');}
    .carousel-item.proj-c{background-image:url('images/home/projet-c.jpg');}
    .carousel-item.proj-d{background-image:url('images/home/projet-d.jpg');}
    .carousel-item.proj-e{background-image:url('images/home/projet-e.jpg');}
    .carousel-item.proj-f{background-image:url('images/home/projet-f.jpg');}
    .carousel-item.is-center{opacity:1;}
    .carousel-item .meta{
      position:absolute;
      left:18px;bottom:18px;
      color:#fff;
      font-weight:700;font-size:18px;line-height:1.2;
      opacity:0;
      transform:translateY(12px);
      transition:opacity 320ms ease, transform 700ms ease;
    }
    .carousel-item.is-center .meta{opacity:1;transform:translateY(0);}
    .carousel-item .meta span{
      display:block;
      font-weight:400;
      font-size:14px;
      color:rgba(255,255,255,0.7);
      opacity:1;
    }
    .carousel-item a.projbtn{
      position:absolute;right:18px;bottom:18px;
      padding:6px 10px;border-radius:20px;
      background:var(--blue);color:#fff;border:none;
      font-size:15px;font-weight:400;
      opacity:0;transform:translateY(12px);
      transition:opacity 320ms ease, transform 700ms ease, background 200ms ease;
      cursor:pointer;
      text-decoration: none;
    }
    .carousel-item.is-center a.projbtn{opacity:1;transform:translateY(0);}
    .carousel-item a.projbtn:hover{transform:scale(0.95);background:#0080ff;}
    

    /* désactive les fades pendant le "snap" de boucle pour éviter le clignotement */
    .carousel.no-fade .carousel-item{
      transition:none !important;
    }
    .carousel.no-fade .carousel-item .meta,
    .carousel.no-fade .carousel-item .projbtn{
      transition:none !important;
    }

@media (max-width: 700px){

  .carousel{
    margin-top: 96px;
  }

  /* plus de padding qui décale tout : on laisse 0 */
  .carousel-viewport{
    padding: 0;
    box-sizing: border-box;
  }

  /* marge cohérente avec spacing = 18 (9 + 9) */
  .carousel-item{
    flex: 0 0 calc(100vw - 64px); /* tu peux garder cette valeur qui marchait bien en taille */
    height: 260px;
    margin: 0 9px;                /* IMPORTANT : comme sur desktop */
  }

  .carousel-item .meta{
    font-size:16px;
  }

  .carousel-item .meta span{
    font-size:13px;
  }

  .carousel-item a.projbtn{
    font-size:14px;
  }
}


    /* footer */
    footer{
      border-top:1.5px solid #b2b2b2;
      padding:10px 0;
      margin-top:20px;
      margin-bottom:40px !important;
    }
    .footer-inner{
      width:var(--site-width);
      margin:0 auto;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
      color:#b2b2b2;
      gap:12px;
    }
    .footer-left{
      flex:1;
      text-align:left;
      font-family:'Roboto Mono', monospace;
      color:#b2b2b2;
      font-size:14px;
    }
    .footer-icons{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .footer-icons a{
      display:inline-flex;
      transition:transform 200ms ease;
    }
    .footer-icons a:hover{
      transform:scale(0.92);
    }

    @media(max-width:1040px){
      :root{--site-width:94vw}
      .wrap{width:94vw}
      .header-inner{width:94vw}
      .showreel.expanded{height:calc(94vw * 9 / 16)}
    }

/* --- PAGE PHOTOS --- */

/* Grille pleine largeur, centrée, 4 colonnes max */
.photo-grid{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding: 0 32px 40px;
  margin: 0;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

/* Chaque colonne */
.photo-col{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Case photo : card avec arrondi + anim de scale au hover */
.photo-item{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f6f8;
  transition: transform 350ms ease;
}

.photo-item:hover{
  transform: scale(1.01);
}

/* Image : ratio natif, cachée au départ + légère translation */
.photo-item img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;

  opacity: 0;
  transform: translateY(10px) scale(1);
  transition:
    opacity 450ms ease,
    transform 450ms ease,
    filter 250ms ease;
  cursor: pointer;
}

/* Quand l'image est visible → fade-in smooth */
.photo-item.in-view.loaded img,
.photo-item.revealed img{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover léger sur l'image (cadre déjà géré par .photo-item) */
.photo-item.in-view.loaded img:hover,
.photo-item.revealed img:hover{
  filter: brightness(1.04);
}

/* Petites retouches de padding / gaps selon la taille */

@media (max-width: 900px){
  .photo-grid{
    padding: 0 24px 32px;
    gap: 12px;
  }
}

@media (max-width: 600px){
  .photo-grid{
    padding: 0 16px 24px;
    gap: 10px;
  }
}

/* ---------- LIGHTBOX GLOBAL ---------- */

/* Lightbox structure (header NOT blurred) */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
}

.lightbox-backdrop.open {
  display: block;
}

/* Fond flou uniquement derrière les photos, pas le header */
.lightbox-backdrop.open::before {
  content: "";
  position: fixed;
  top: 72px;          /* démarre sous le header */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(16px);
  z-index: 0;
}


/* ---------- PHOTO CENTRÉE ---------- */

/* Container centré pour la photo */
.lightbox-inner {
  position: fixed;
  top: 112px; /* sous le header */
  bottom: 40px; 
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;   /* ⬅️ on empile image + légende */
  justify-content: center;
  align-items: center;

  pointer-events: none; /* éléments interactifs gérés séparément */
  z-index: 1; /* en-dessous des flèches + croix */
}

/* Zone qui contient l’image */
.lightbox-image-wrapper {
  max-height: 100%;
  max-width: min(80vw, 1400px);  /* largeur max commune */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image parfaitement responsive */
.lightbox-image {
  max-height: calc(100vh - 72px - 40px); /* header + marge bas */
  max-width: 100%;              /* prend la largeur du wrapper */
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms ease, transform 300ms ease;
}

@media (max-width: 700px){
  .lightbox-inner{
    padding: 0 70px;   /* espace pour flèches à gauche ET à droite */
    box-sizing: border-box;
  }

  .lightbox-image{
    max-height: calc(100vh - 140px); /* garder les marges en haut/bas */
    width: auto;
  }
}

.lightbox-image.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------- CROIX & FLÈCHES (FIXED AU VIEWPORT) ---------- */

.lightbox-close {
  position: fixed;
  z-index: 510;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms ease;
}

.lightbox-arrow {
  position: fixed;
  z-index: 510;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms ease;

  /* +12px pour compenser la légende / marges */
  top: calc(50vh + 48px);
  transform: translateY(-50%);
}

.lightbox-prev,
.lightbox-next {
  transform: translateY(-50%);
}


@media (max-width: 700px){
  .lightbox-arrow {
    top: calc(50vh + 48px); /* ou la même valeur fine-tunée que sur desktop */
  }
}

/* croix : en haut à droite de la fenêtre */
.lightbox-close {
  top: 80px;   /* sous le header */
  right: 32px;
}

/* Style général des flèches du viewer */
.arrow-svg {
  width: 38px;
  height: 38px;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.lightbox-prev {
  left: 32px;
}

.lightbox-next {
  right: 32px;
}

/* Hover : légère réduction (comme tes boutons) */
.lightbox-arrow:hover .arrow-svg {
  transform: scale(0.9);
}

/* Flèche gauche = rotation 180° */
.lightbox-prev .arrow-svg {
  transform: rotate(180deg);
}

/* Mais hover s’ajoute à la rotation */
.lightbox-prev:hover .arrow-svg {
  transform: rotate(180deg) scale(0.9);
}

/* Style général du SVG de la croix */
.close-svg {
  width: 34px;
  height: 34px;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hover = petite rotation et fade, comme demandé */
.lightbox-close:hover .close-svg {
  transform: rotate(90deg) scale(0.9);
}


/* mobile */
@media (max-width: 768px) {
  /* flèches plus proches du bord */
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }

  /* croix un peu rapprochée aussi pour cohérence */
  .lightbox-close { right: 12px; }

  /* flèches un peu plus petites sur mobile */
  .arrow-svg {
    width: 30px;
    height: 30px;
  }
}


@media (max-width: 700px){
  .brand .name{
    display:none;
  }

    /* on resserre les liens du header */
  header nav{
    gap: 20px;        /* au lieu de 44px */
    /*font-size: 14px;  /* un poil plus petit, optionnel mais plus équilibré */
  }

  /* optionnel : on réduit un peu le padding interne du header */
  .header-inner{
    padding: 0 16px;  /* au lieu de 24px */
  }
}

/* --- Bloc image + légende dans la lightbox --- */

/* On centre le bloc média (image + caption) dans la fenêtre */
.lightbox-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Le bloc qui contient l'image + la légende */
.lightbox-media {
  display: inline-block;                 /* largeur = contenu (image) */
  max-width: min(80vw, 1400px);          /* limite max */
}

/* Le wrapper d'image reste ce qu'il est, mais limité par le media */
.lightbox-media .lightbox-image-wrapper {
  max-width: 100%;
}

/* L'image définit la largeur du bloc */
.lightbox-media .lightbox-image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 160px); /* ajuste si besoin pour éviter le bas de page */
}

/* Légende sous la photo, alignée sur la largeur de la photo */
.lightbox-media .lightbox-caption {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: left;   /* bord gauche = bord gauche de l'image */
  opacity: 0;                    /* par défaut cachée */
  transition: opacity 200ms ease; /* fondu rapide et smooth */
}