/* ==========================================================================
   TOKENS
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Cossette+Titre:wght@400;700&display=swap');


:root{
  --bg:#000000;
  --fg:#e8e8fc;
  --red: #e8e8fc;
  --muted:#494948;
  --line:#00000;
  --accent-red:#C74B3C;
  --accent-blue:#3B3FE0;
  --accent-pink:#D9A6D6;

  --space-1: clamp(6px, 0.6vw, 10px);
  --space-2: clamp(10px, 1.1vw, 18px);
  --space-3: clamp(16px, 2vw, 28px);
  --space-4: clamp(22px, 3vw, 44px);
  --space-5: clamp(36px, 5vw, 72px);

  --radius-pill: 50%;

  --font-display: "Cossette Titre", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; }
p{ margin:0; }
::selection{ background:var(--fg); color:var(--bg); }

a:focus-visible, button:focus-visible, .index-item:focus-visible{
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.book{
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-columns: clamp(160px, 15vw, 230px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "sidebar main"
    "footer  footer";
}

.topbar{
  grid-area: topbar;
  display:flex;
  align-items:center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  min-height: 88px;
  max-height: 100px;
}

.header-titles{
  display:flex;
  align-items:center;
  min-width:0;
  font-weight: 700;
  transform: translateX(-10px);
}
.title-pill{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height:1;
  padding: 0.7em 1em;
  border: 1.5px solid var(--red);
  border-radius: var(--radius-pill);
  white-space:nowrap;
  font-weight: 700;
  color: var(--red);
  transform: translateX(10px);
}
#project-tags{ display:flex; flex-wrap:wrap; gap: var(--space-1); }
.tag-pill{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size: clamp(11px, 0.7vw, 11px);
  font-weight:600;
  padding: 0.75em 1.3em;
  border-radius: var(--radius-pill);
  color: var(--bg);
  white-space:nowrap;
  font-weight: 400;
  background-color: var(--red);
}

.header-divider{
  width:1px;
  height: 10px;
  background: var(--red);
  flex: none;
}

.header-context-wrap{
  flex: 1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--space-1);
}

.header-context{
  width:100%;
  text-align:center;
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size: clamp(13px, 1.15vw, 17px);
  color: var(--fg);
}

/* lien optionnel vers une vidéo hébergée ailleurs (Vimeo, YouTube...) */
.context-link{
  display:none; /* activé en JS quand p.link existe */
  align-items:center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color: var(--fg);
  text-decoration:none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.context-link:hover{
  color: var(--fg);
  border-color: var(--fg);
}
.context-link::after{
  content: "↗";
  font-size: 0.8em;
  line-height:1;
}

.header-description{
  flex: 1 1 53%;
  display:flex;
  gap: var(--space-3);
  min-width:0;
}
.header-description p{
  flex:1;
  min-width:0;
  font-size: clamp(10px, 0.72vw, 10px);
  line-height:1.25;
  color: var(--fg);
}

.sidebar{
  grid-area: sidebar;
  border-right:1px solid var(--line);
  padding: var(--space-4) var(--space-3);
  overflow-y:auto;
}
.index-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: var(--space-1);
}
.index-item{
  display:flex;
  align-items:center;
  gap: var(--space-1);
  cursor:pointer;
  font-size: clamp(14px, 0.85vw, 14px);
  letter-spacing:0;
  text-transform:uppercase;
  color: var(--muted);
  transition: color .15s ease;
  font-family: var(--font-display);
  font-weight: 400;
}
.index-item:hover{ color: var(--fg); }
.index-dot{
  width:3px; height:3px;
  border-radius:50%;
  background:transparent;
  flex:none;
  transition: background .15s ease;
}
.index-item.is-active{
  color: var(--fg);
  font-weight:700;
}
.index-item.is-active .index-dot{ background: var(--fg); }

.main{
  grid-area: main;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.stage-wrap{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-3) var(--space-4);
}
#stage{ width:100%; height:100%; }
.slide{
  width:100%;
  height:100%;
  display:grid;
  gap: var(--space-2);
}
.slide--full{ grid-template-columns:1fr; }
.slide--double{ grid-template-columns:1fr 1fr; }
.slide--triple{ grid-template-columns: 1.6fr 1fr; }
.slide--triple.is-reverse{ grid-template-columns: 1fr 1.6fr; }
.slide--triple.is-reverse .cell--big{ order:2; }
.slide--triple.is-reverse .cell--stack{ order:1; }

.cell--big, .cell--stack{ min-height:0; min-width:0; }
.cell--big{ height:100%; }
.cell--big .media-el{ height:100%; }
.cell--stack{
  height:100%;
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-2);
}
.cell--stack .media-el{ height:100%; }

.media-el{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 2px;
}
.slide--full .media-el{ height:100%; }
.slide--double .media-el{ height:100%; }

.media-placeholder{
  display:flex;
  align-items:flex-end;
  padding: var(--space-3);
}
.media-placeholder-label{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-size: clamp(14px, 2vw, 32px);
  color: rgba(255,255,255,0.85);
  line-height:1.05;
}

.footer{
  grid-area: footer;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  width: 100vw;
}

.footer img{ 
  height: 25px; 
  width:auto; }

.nav-controls{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  justify-self:center;
}
.footer .infos-perso{
  display: flex;
  flex-direction: column;
  align-items: end;
}

.footer p{
  font-family: var(--font-display);
  color: var(--fg);
  text-transform: uppercase;
  font-size: 13px;
}

.footer a{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
}
.nav-btn{
  background:none;
  border:1px solid var(--line);
  color: var(--fg);
  width: 36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.nav-btn:hover:not(:disabled){ border-color: var(--fg); }
.nav-btn:disabled{ opacity:0.25; cursor:default; }
.nav-btn svg{ width:14px; height:14px; }

.slide-counter{
  font-size: 11px;
  letter-spacing:0.08em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.footer-right{ justify-self:end; }

@media (max-width: 900px){
  .book{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main"
      "footer";
  }
  .topbar{ 
    flex-wrap:wrap; 
    row-gap: var(--space-2); }

  .header-titles{
    width: 30%;
  }


  
  .header-divider{ 
    display:none; }
  
    .header-context-wrap{ 
    order:3; 
    width:100%; 
    align-items:flex-start; }
  
  #project-tags{
    display: none;
  }
    .header-context{ 
      text-align:left;
     }
  .header-description{ 
    order:4; 
    width:100%; }

  .sidebar{
    border-right:none;
    display: none;
    border-bottom:1px solid var(--line);
    padding: var(--space-2) var(--space-3);
  }
  .index-list{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap: var(--space-3);
  }
  .index-item{ white-space:nowrap; }
  .slide--triple{ 
    grid-template-columns: 1fr; 
    grid-template-rows: 1.4fr 1fr; }
  .slide--triple.is-reverse{ 
    grid-template-columns: 1fr; }
  .slide--triple .cell--stack{ 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows:1fr; }
  .slide--double{ 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr 1fr; }
  .stage-wrap{ 
    padding: 
    var(--space-2) var(--space-3); }
}

@media (max-width: 560px){
  .header-description{ 
    flex-direction:column;
  }

  .footer{
    flex-direction: column;
  }
  .title-pill{ 
    font-size: 14px; 
    padding: 0.75em 1.2em; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   LOADER
   ========================================================================== */
   .book{
    opacity:0;
  }
  .book.is-ready{
    opacity:1;
    transition: opacity .5s ease;
  }
  
  .loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background: var(--bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: var(--space-4);
    transition: opacity .5s ease;
  }
  .loader.is-hidden{
    opacity:0;
    pointer-events:none;
  }
  
  .loader-logo{
    width: clamp(64px, 9vw, 120px);
    height: clamp(64px, 9vw, 120px);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .loader-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  
  .loader-bar{
    width: min(220px, 40vw);
    height:2px;
    background: var(--line);
    overflow:hidden;
  }
  .loader-bar-fill{
    width:0%;
    height:100%;
    background: var(--fg);
    transition: width .2s linear;
  }
  
  .loader-bottom{
    position:absolute;
    bottom: var(--space-4);
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    gap: var(--space-1);
    text-align:center;
    font-size: 14x;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color: var(--muted);
    font-family: var(--font-display);
  }

  .loader-bottom .schema{
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 14px;
    padding: 10px;
    border: solid var(--fg) 0.8px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .loader-bottom .sep{
    width: 100%;
    height: 0.8px;
    background-color: white;
  }