:root{
  --bg-light:#ffffff; --fg-light:#000000;
  --bg-dark:#000000;  --fg-dark:#ffffff;

  --muted: rgba(0,0,0,.5);
  --muted-dark: rgba(255,255,255,.5);

  --interactive-base: rgba(0,0,0,.55);
  --interactive-hover: #000000;

  --grid-cols: 30;
  --grid-rows: 30;
  --grid-gap: 8px;

  --safe-top: 120px;
  --safe-bottom: 120px;

  --header-pad: 40px;
  --content-pad: 60px;
  --project-desc-max: 70vh;
  --dur-fast: .22s;
  --dur-med: .38s;
  --dur-slow: .65s;
  --ease-soft: cubic-bezier(.32,.72,.19,.99);
  --ease-fluid: cubic-bezier(.24,.86,.34,1);

  color-scheme: light dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Fix “bords blancs” iOS/Android */
html{ background:var(--bg-light); }
html.dark-mode{ background:var(--bg-dark); }

body{
  font-family: 'General Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500; margin:0;
  padding-top:120px; padding-bottom:120px;
  background:var(--bg-light); color:var(--fg-light);
  transition: background-color var(--dur-med) var(--ease-soft), color var(--dur-med) var(--ease-soft);
}
body.dark-mode{ background:var(--bg-dark); color:var(--fg-dark); }

/* Header & nav — bandes opaques */
.header{
  position:fixed; inset:0 0 auto 0;
  z-index:4001;
  display:flex; align-items:center; padding:var(--header-pad) var(--content-pad);
  background: transparent;
  color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  transition: transform var(--dur-slow) var(--ease-fluid);
  will-change: transform;
}
.logo{
  font-size:32px; letter-spacing:.2px;
  color:inherit;
  transition: transform var(--dur-med) var(--ease-soft);
  will-change: transform;
  pointer-events:auto;
}

.main-nav{
  position:fixed; inset:auto 0 0 0;
  z-index:4002;
  display:flex; gap:16px; justify-content:flex-end; align-items:center; padding:28px 40px;
  background: transparent;
  color:var(--fg-light);
  border:none;
  pointer-events:none;
}
body.dark-mode .main-nav{ color:var(--fg-dark); }
.main-nav button{
  background:none; border:0; padding:0; margin:0; font:inherit;
  color:var(--muted);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-soft);
  pointer-events:auto;
}
body.dark-mode .main-nav button{
  color:var(--muted-dark);
}
.main-nav button:hover,
.main-nav button:focus-visible,
body.info-open .main-nav button{
  color:inherit;
}

/* ===== Contenu */
.content{
  position:relative; z-index:5;
  min-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  display:flex; flex-direction:column; justify-content:center; /* overridé sur mobile */
}

.project-list{ list-style:none; margin:0; padding:0 var(--content-pad); width:100%; max-width:none; }

.project-item{
  border-bottom:1px solid rgba(127,127,127,.12);
  padding:14px 0;
  position:relative;
  transition: padding var(--dur-med) var(--ease-soft);
}
.project-item:last-child{ border-bottom:none; }

.project-link{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  color:inherit; text-decoration:none; padding:6px 0;
}

.project-name{ font-size:18px; letter-spacing:.3px; line-height:1.25; }
.project-date{
  font-size:18px;
  letter-spacing:.3px;
  line-height:1.25;
  color:var(--muted);
}
body.dark-mode .project-date{
  color:var(--muted-dark);
}

.project-item.is-open{ padding:22px 0; }

/* ===== Description (slide) ===== */
.project-description-content{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height var(--dur-slow) var(--ease-fluid), opacity var(--dur-med) var(--ease-soft) .08s;
}
.project-item.is-open .project-description-content{ max-height:var(--project-desc-max); opacity:1; }

/* Texte description — plein contraste */
.description-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; padding:24px 0 4px 0;
  color: inherit; /* <<< avant: var(--muted) — on remet plein */
}
.description-grid p,
.description-grid li,
.description-column p{ margin:0 0 8px 0; }

.description-column{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:560px;
}
.project-description{
  margin:0;
  font-size:16px;
  line-height:1.65;
  hyphens:auto;
}
.project-description + .project-description{
  margin-top:4px;
}

/* CRÉDITS / CLIENT — restent atténués */
.project-credits,
.project-client{ color: var(--muted); }
body.dark-mode .project-credits,
body.dark-mode .project-client{ color: var(--muted-dark); }
.project-credits a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.project-credits a:hover{
  text-decoration-thickness: 2px;
}


/* ===== Overlay — au-dessus de tout ===== */
#image-grid-overlay{
  position:fixed; inset:0;
  z-index:5000;
  display:grid; grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
  padding: calc(var(--grid-gap) * 1.5);
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
#image-grid-overlay.hidden-all{
  opacity: 0;
  pointer-events: none;
}

/* Tuiles + révélation */
.overlay-item{
  position:relative; overflow:hidden;
  pointer-events: none;
  border:none; box-shadow:none;
  opacity:0; transform: translateY(6px) scale(.98);
  transition: opacity var(--dur-med) var(--ease-fluid), transform var(--dur-med) var(--ease-fluid);
}
.overlay-item.show{ opacity:1; transform: translateY(0) scale(1); }

/* En mode INTERACTIF (projet ouvert) : tuiles interactives */
#image-grid-overlay.interactive .overlay-item{ pointer-events:auto; }

.overlay-item img,
.overlay-item video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; background: transparent; display:block;
}

body:not(.dark-mode) #image-grid-overlay .media-invert-light{
  mix-blend-mode:difference;
  filter: invert(1);
}
body.dark-mode #image-grid-overlay .media-invert-light{
  mix-blend-mode:normal;
  filter:none;
}

/* Disparition PERMANENTE */
#image-grid-overlay.interactive .overlay-item.perma-hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}

/* ===== Hint [SPACE]/[ESPACE] — bas gauche, au-dessus des tuiles ===== */
#space-hint{
  position:fixed; left:60px; bottom:28px;
  z-index:6001;         /* > overlay */
  display:none;         /* JS l’affiche seulement quand tuiles visibles */
  align-items:center; gap:10px;
  font-size:12px; letter-spacing:.08em; opacity:.75;
  user-select:none; pointer-events:none;
  text-transform:uppercase; white-space:nowrap;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

#info-panel{
  position:fixed; inset:0;
  z-index:6000;
  display:flex; align-items:center; justify-content:flex-start;
  padding:calc(var(--safe-top) + 20px) var(--content-pad) calc(var(--safe-bottom) + 40px) var(--content-pad);
  pointer-events:none;
  overflow:hidden;
  color:var(--fg-dark);
  overflow-y:auto;
  visibility:hidden;
}
body.info-active .main-nav button{ pointer-events:none; }
#info-panel::before{
  content:"";
  position:absolute; inset:0;
  background:var(--bg-dark);
  transform:translate3d(0, 100%, 0);
  transition:transform var(--dur-slow) var(--ease-soft);
}
body.dark-mode #info-panel{ color:var(--fg-light); }
body.dark-mode #info-panel::before{ background:var(--bg-light); }
body.info-active #info-panel{
  visibility:visible;
}
body.info-open #info-panel{
  pointer-events:auto;
}
body.info-open #info-panel::before{
  transform:translate3d(0,0,0);
}

.info-panel-inner{
  position:relative;
  z-index:1;
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
  align-items:flex-start;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transition: -webkit-clip-path var(--dur-med) var(--ease-soft),
              clip-path var(--dur-med) var(--ease-soft);
}
body.info-open .info-panel-inner{
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transition: -webkit-clip-path var(--dur-med) var(--ease-soft) .18s,
              clip-path var(--dur-med) var(--ease-soft) .18s;
}
.info-description{
  margin:0;
  font-size:16px;
  line-height:1.55;
}
.info-contact-list{
  list-style:none;
  padding:0;
  margin:12px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:16px;
  align-items:flex-start;
}
.info-contact-list a{
  color:var(--muted-dark);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-soft);
}
body.dark-mode .info-contact-list a{
  color:var(--muted);
}
.info-contact-list a:hover,
.info-contact-list a:focus{
  color:inherit;
}
.info-contact-list span{
  color:var(--muted-dark);
}
body.dark-mode .info-contact-list span{
  color:var(--muted);
}

.info-close{
  position:absolute;
  top:var(--header-pad);
  right:60px;
  left:auto;
  background:none;
  border:0;
  padding:0;
  font-size:32px;
  line-height:1;
  color:inherit;
  cursor:pointer;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-soft);
}
.info-close:hover,
.info-close:focus{
  opacity:.75;
}

body.info-active{
  overflow:hidden;
}
body.info-open{
  padding-top:0;
  padding-bottom:0;
}
body.info-open .info-close{
  opacity:1;
  pointer-events:auto;
}
body.info-active .content{
  pointer-events:none;
}
body.info-active #image-grid-overlay{
  opacity:0 !important;
  pointer-events:none;
}
body.info-active #space-hint{
  display:none !important;
}
body.info-open .header{
  background:transparent;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  display:none;
}
body.info-open .main-nav{
  opacity:0;
  visibility:hidden;
  display:none;
}
body.info-open #info-panel{
  padding:60px var(--content-pad) 80px var(--content-pad);
}
body.info-open .info-panel-inner{
  max-height:none;
  overflow:visible;
}
/* ===== Responsive ===== */
@media (max-width: 900px){
  body{ padding-top:96px; padding-bottom:96px; }
  :root{ --header-pad: 32px; --content-pad: 40px; }
  :root{ --safe-top: 96px; --safe-bottom: 96px; }
  :root{ --grid-cols: 22; --grid-rows: 22; --grid-gap: 6px; }
  .description-grid{ grid-template-columns: 1fr; }
  .project-description-content{ transition:none; }
  #space-hint{ left:24px; bottom:18px; }
  .info-close{ top:var(--header-pad); right:40px; left:auto; }
  .project-item.is-open .project-description-content{
    max-height:none;
    overflow:visible;
  }
}

/* Mobile ≤ 600px */
@media (max-width: 600px){
  :root{ --grid-cols: 10; --grid-rows: 18; --grid-gap: 5px; }
  :root{ --header-pad: 28px; --content-pad: 28px; }
  #space-hint{ left:16px; bottom:16px; }
  #info-panel{
    align-items:flex-start;
    overscroll-behavior:contain;
  }
  #info-panel::before{
    inset:-48px -12px;
  }
  .info-panel-inner{
    max-width:none;
    width:100%;
    padding:16px 0 32px 0;
    margin:6px 0 0 0;
    max-height:calc(100vh - var(--safe-top) - var(--safe-bottom) - 32px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  @supports (height: 100dvh){
    .info-panel-inner{
      max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
    }
  }

  /* Empilement sous header (on annule le centrage vertical) */
  .content{ justify-content: flex-start; }

  /* Ouverture : garde le haut fixe, n’augmente que le bas */
  .project-item.is-open{ padding-top:14px; padding-bottom:26px; }

  .project-item.is-open .project-description-content{ overflow:visible; }

  .project-item{ scroll-margin-top: var(--safe-top); }

  /* Logo compact mobile */
  .header .logo{ font-size:0; letter-spacing:0; position:relative; transform:none; }
  .header .logo::after{ content:"(BB)"; font-size:32px; letter-spacing:.2px; line-height:1; }
  body.mobile-logo-hidden .header{
    transform:translate3d(0, calc(-100% - 24px), 0);
  }

  body.info-open #info-panel{
    padding:36px var(--content-pad) 48px var(--content-pad);
  }
  body.info-open .info-panel-inner{
    max-height:none;
  }

  .info-close{ top:var(--header-pad); right:28px; left:auto; font-size:32px; }
}

@media (hover: hover) and (pointer: fine){
  body.custom-cursor,
  body.custom-cursor button,
  body.custom-cursor a{
    cursor:none;
  }

  body.custom-cursor #cursor{
    position:fixed;
    left:0;
    top:0;
    width:24px;
    height:24px;
    border:none;
    border-radius:50%;
    background:currentColor;
    transform:translate3d(-50%, -50%, 0);
    pointer-events:none;
    z-index:12000;
    opacity:0;
    transition:opacity var(--dur-fast) var(--ease-soft), width var(--dur-fast) var(--ease-soft), height var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
    color:#ffffff;
    mix-blend-mode:difference;
  }

  body.custom-cursor #cursor::before,
  body.custom-cursor #cursor::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:18px;
    height:2px;
    border-radius:1px;
    background:currentColor;
    opacity:0;
    transform:translate(-50%, -50%);
    transition:opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  }

  body.custom-cursor #cursor.is-visible{
    opacity:1;
  }

  body.custom-cursor #cursor.is-cross{
    width:28px;
    height:28px;
    background:transparent;
  }
  body.custom-cursor #cursor.is-cross::before{
    opacity:1;
    transform:translate(-50%, -50%) rotate(45deg);
  }
  body.custom-cursor #cursor.is-cross::after{
    opacity:1;
    transform:translate(-50%, -50%) rotate(-45deg);
  }

  body.custom-cursor #cursor.is-hover{
    width:28px;
    height:28px;
  }
}

@media (hover: none){
  #cursor{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .overlay-item{ opacity:1 !important; transform:none !important; }
}

/* Masquage temporaire par [SPACE] */
#image-grid-overlay { opacity: 1 !important; }
#image-grid-overlay.hidden-all { opacity: 0 !important; pointer-events: none !important; }
.main-nav{