/* ==========================
   Base & variables
   ========================== */
:root{
  /* Typo scale */
  --step--1: clamp(0.875rem, 0.75rem + 0.25vw, 0.95rem);
  --step-0:  clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1rem + 0.55vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.1rem + 0.95vw, 1.75rem);
  --step-3:  clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);

  /* Layout */
  --container-pad: clamp(12px, 3vw, 45px);
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: clamp(16px, 3vw, 28px);

  /* Colors */
  --bg: #0a0a0a;
  --fg: #ffffff;
  --muted: rgba(255,255,255,0.7);

  /* Z-indexes */
  --z-canvas: 0;
  --z-dust: 50;
  --z-content: 10;
  --z-nav: 100;
  --z-ticker: 1000;
  --z-cursor: 2000;

  /* Ticker */
  --ticker-h: 44px;
  --ticker-dur: 20s;
}

/* Breakpoints */
@media (width <= 1024px){ :root{ --container-pad: clamp(16px, 4vw, 36px); } }
@media (width <= 768px){  :root{ --container-pad: clamp(12px, 5vw, 24px); } }
@media (width <= 600px){  :root{ --ticker-h: 36px; } }

/* Box sizing & accessibility */
*,*::before,*::after{ box-sizing: border-box; }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* ==========================
   Fonts
   ========================== */
@font-face {
  font-family: 'FT88-Regular';
  src: url('fonts/FT88-Regular.woff2') format('woff2'),
       url('fonts/FT88-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Necto – Regular */
@font-face {
  font-family: 'Necto';
  src: url('fonts/Necto.woff2') format('woff2'),
       url('fonts/Necto.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================
   Document
   ========================== */
html, body{ height: 100%; }
body{
  font-family: 'Necto', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: var(--bg);
  color: #efefefff;
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
}

/* Safe-area support (iOS notches, etc.) */
body.has-ticker{ padding-top: calc(var(--ticker-h) + env(safe-area-inset-top)); }

/* Links */
a{ color: var(--fg); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ==========================
   Navbar
   ========================== */
.navbar-container{
  position: relative;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding-inline: var(--container-pad);
  padding-block: clamp(12px, 2.5vh, 30px);
}
#logo{ width: min(30vh, 240px); height: auto; }
@media (width <= 600px){ 
  #logo{ width: min(24vh, 180px); } 
}

.navbar-title{ font-size: var(--step-2); font-weight: 600; }

.navbar-links{
  display: flex; flex-wrap: wrap; gap: var(--gap-md);
  font-size: clamp(0.9rem, 0.7rem + 0.6vw, 1.1rem);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
@media (width <= 600px){ 
 .navbar-links{
  font-size: 10px;
}
}
.infos2{
  position: relative;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding-left: var(--container-pad);
  margin-top: -15px;
}

/* ==========================
   Canvas layer
   ========================== */
canvas{ display:block; position:fixed; inset:0; z-index: -1; }

/* ==========================
   Images row / gallery
   ========================== */
.image-row{
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--gap-lg);
  padding-inline: var(--container-pad);
  padding-block: clamp(12px, 4vh, 40px);
}

/* Wrapper keeps buttons positioned relative to the media */
.clothes-wrap{ position: relative; width: 100%; /*! max-width: min(560px, 92vw); */ }

/* Media itself */
.clothes{
  display: block;
  width: 100%;
  height: auto;             /* responsive height */
  /*! max-height: clamp(280px, 60vh, 720px); */
  object-fit: contain;
  vertical-align: middle;
  margin: 0;
  position: relative;
  z-index: calc(var(--z-content) + 1);
}

/* Slider buttons */
.slider-btn{
  position: absolute; inset-block-start: 50%; translate: 0 -50%;
  z-index: calc(var(--z-content) + 2);
  border: none; background: transparent; cursor: pointer; user-select: none;
  font-family: 'FT88-Regular', ui-sans-serif, system-ui;
  font-size: clamp(2.2rem, 6vw, 6rem);
  line-height: 1; padding: 0;
  color: #fff; -webkit-text-stroke: 2px #000;
  width: clamp(40px, 8vw, 64px); height: clamp(40px, 8vw, 64px);
  display: grid; place-items: center; border-radius: 999px;
}
.slider-btn:hover{ opacity: .8; }
.slider-btn.prev{ inset-inline-start: 8px; }
.slider-btn.next{ inset-inline-end: 8px; }

/* Touch targets & coarse pointers */
@media (pointer: coarse){
  .slider-btn{ -webkit-text-stroke: 1.5px #000; }
}

/* ==========================
   Description block
   ========================== */
.description{
  position: relative;
  z-index: var(--z-content);
  display: grid;
  padding-inline: var(--container-pad);
  padding-block: clamp(8px, 3vh, 28px);
}
.description > *{ max-width: clamp(40ch, 85vw, 70ch); margin: 0; }
.description p{ font-size: var(--step-0); line-height: 1.65; color: var(--muted); }

/* ==========================
   Ticker (marquee)
   ========================== */
.ticker{
  position: fixed; inset: 0 auto auto 0; right: 0; height: var(--ticker-h);
  background: #efefefff; color:#000; border-bottom: 1px solid rgba(0,0,0,0.08);
  overflow: hidden; z-index: var(--z-ticker);
  font: 14px/1 'Necto', system-ui, sans-serif;
  letter-spacing: .02em; padding-top: env(safe-area-inset-top);
}
.ticker__track{ display:flex; white-space: nowrap; will-change: transform; animation: ticker-move var(--ticker-dur) linear infinite; }
.ticker__content{ flex:0 0 auto; display:flex; align-items:center; gap:2rem; padding: 0 1rem; line-height: var(--ticker-h); }
@keyframes ticker-move{ from{ transform: translateX(0);} to{ transform: translateX(calc(-1 * var(--ticker-shift, 800px))); } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation: none; transform: none; } }

/* ==========================
   Dust particles
   ========================== */
/* Limite le mix-blend à ce conteneur */
.blend-scope {
  position: relative;
  isolation: isolate; /* important */
}

/* Tes poussières / images */
.dust-img {
  position: fixed;
  inset: 0 auto auto 0;
  transform: translate(var(--x,0), var(--y,0)) translateZ(0);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: var(--z-dust);
  opacity: .9;

  /* 1) Rendre la source blanche pour que difference donne noir sur blanc + blanc sur noir */
  filter:
    brightness(0) invert(1)           /* <-- force l’image en blanc */
    drop-shadow(0 0 1px rgba(255,255,255,.35));
  
  /* 2) Mélange */
  mix-blend-mode: difference;

  animation: dust-fall var(--dur, 3s) linear forwards;
}

@keyframes dust-fall {
  to {
    transform: translate(calc(var(--x,0) + var(--dx,0)),
                         calc(var(--y,0) + var(--dy,150px))) translateZ(0);
    opacity: 0;
  }
}

/* Accessibilité : réduit l’anim si demandé */
@media (prefers-reduced-motion: reduce){
  .dust-img { animation-duration: 1s; }
}

/* ==========================
   Cursor ring (hidden on touch)
   ========================== */

/* Icône centrée entre les deux anneaux */
.cursor-center-icon {
  position: fixed;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-center-icon.visible { opacity: 1; }

.cursor-ring { 
  position: fixed; 
  inset: 0 auto auto 0; 
  width: 0; 
  height: 0; 
  pointer-events: none; 
  z-index: var(--z-cursor); 

  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));

  opacity: 0; 
  transition: opacity .2s ease; 
  font-family: 'Necto', system-ui, sans-serif; 
  color: #fff; 
}
.cursor-ring.visible { 
  opacity: 1; 
}

.ring-char { 
  position: absolute; 
  inset: 0 auto auto 0; 
  transform-origin: 0 0; 
  font-size: 20px; 
  letter-spacing: .08em; 
  white-space: pre; 

  text-shadow: 
    0 0 2px rgba(0,0,0,0.9),
    0 0 3px rgba(0,0,0,0.7);
}

@media (prefers-reduced-motion: reduce){ 
  .ring-char { transition: none !important; } 
}

/* 🚫 Masquer tout ça sur mobile/tablette (pointer: coarse) */
@media (pointer: coarse){ 
  .cursor-ring,
  .cursor-center-icon { 
    display: none !important; 
  } 
}


/* ==========================
   Mobile bubble (hidden on fine pointers)
   ========================== */
 /* Mobile/tablette uniquement */
  @media (pointer: coarse) {
    #bubble-mobile {
      position: fixed;
      inset: 0 auto auto 0;
      width: 0; height: 0;
      transform: translate3d(var(--cx, -9999px), var(--cy, -9999px), 0);
      z-index: 9999;
      pointer-events: none;
    }

    /* IMPORTANT : SVG et GIF centrés sur (0,0) du conteneur,
       qui lui-même est déplacé au bon endroit via --cx/--cy */
    #bubble-mobile svg,
    #bubble-mobile .center-gif-mobile {
      position: absolute;
      left: 0; top: 0;
      transform: translate(-50%, -50%);
    }

    #bubble-mobile svg {
      width: 160px; height: 160px; /* taille du cercle de texte */
    }

    /* Texte blanc uniquement (pas de fond) */
    .ring-text-mobile {
      font: 11px/1.1 monospace;
      fill: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .spin-mobile {
      animation: spin-mobile 12s linear infinite;
      transform-origin: 50% 50%;
    }
    @keyframes spin-mobile { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .spin-mobile { animation: none; }
    }

    /* GIF au centre */
    .center-gif-mobile {
      border-radius: 50%;
      pointer-events: none;
      z-index: 1; /* au-dessus du SVG */
    }
  }

  /* Desktop : on masque */
  @media (pointer: fine) {
    #bubble-mobile { display: none; }
  }
/* ==========================
   Utility helpers
   ========================== */
.hidden{ display:none !important; }
.center{ display:grid; place-items:center; }

/* ==========================
   Optional: container query for image blocks if you wrap with .media-ctn
   (activates when the container is narrower than 520px regardless of viewport)
   ========================== */
@container media-ctn (inline-size <= 520px){
  .slider-btn{ font-size: clamp(2rem, 7cqmin, 3rem); width: clamp(36px, 10cqmin, 48px); height: clamp(36px, 10cqmin, 48px); }
}

/* To enable the container query, wrap the gallery in:
   <section class="image-row media-ctn" style="container-type:inline-size">… */



/* ==========================
Composition (responsive)
========================== */
/* ==========================
   Composition (responsive)
   ========================== */
.container {
  padding-inline: var(--container-pad);
  padding-block: clamp(8px, 3vh, 28px);
}
.container > *{ max-width: clamp(40ch, 85vw, 70ch); margin: 0; }

.page-title {
  font-size: 1.4em;
  margin: 24px 0 8px;
}

.subtitle {
  color: var(--muted);
  margin-bottom: 16px;
}

.card {
  background: #151515;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(12px, 2.5vw, 20px);
  margin: 16px 0;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.tab {
font-family: 'Necto', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  cursor: pointer;
  color: #efefefff;
}

.tab[aria-selected="true"] {
  outline: 2px solid #fff;
  outline-offset: 2px;
  color: black;
  background-color: #efefefff;
}

/* ==========================
   Tables: responsive scroll container
   ========================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 520px;
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  border: solid #efefefff 1px;
}

caption {
  text-align: left;
  color: var(--muted);
  margin-bottom: 8px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px dashed var(--border);
  text-align: left;
  border: solid #efefefff 1px;
}

thead th {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
}

.note {
  color: var(--muted);
  font-size: var(--step-0);
}

.footnote {
  border-left: 3px solid #0ea5e9;
  padding-left: 10px;
  color: var(--muted);
}

/* ==========================
   Grid system
   ========================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}

.span-6 {
  grid-column: span 6;
}

.span-12 {
  grid-column: span 12;
}

@media (max-width: 880px) {
  .span-6 {
    grid-column: span 12;
  }
}