/* ========= THEME ========= */
:root{
    --bg:#0a0a0b;
    --text:#f2f2f2;
    --muted:#b9bdc3;
    --accent:#3d5744;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif}
  
  /* ========= CATEGORY HEADER (no icon) ========= */
 /* --- Minimal, sober category header --- */
/* --- FORCER le header à défiler normalement avec la page --- */
/* Force le header à scroller normalement sur la page catégorie */
/* --- FORCER le header à défiler avec la page, quoi qu'il arrive --- */
.cat-hero,
.cat-header,
header.cat-hero {
  position: fixed !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  z-index: 10 !important;
  /* style sobre */
  background: #0f0f102a !important;
  backdrop-filter: none !important;
  min-width: 100% !important;

}

/* --- S'assurer que la page scrolle bien par la fenêtre --- */
html, body {
  height: auto !important;          /* évite de figer la hauteur */
  min-height: 100% !important;
  overflow-y: auto !important;      /* scroll par la fenêtre */
}

/* --- Neutraliser d'éventuels headers globaux collants --- */
header, .header, .site-header, .app-header {
  position: static !important;      /* retire sticky/fixed globaux */
  top: auto !important;
}

/* --- Si un wrapper scrolle le contenu, le rendre "plein flux" ici --- */
.wrapper, .page, .layout, main, .content {
  overflow: visible !important;     /* évite les scrolls internes */
  height: auto !important;
}


/* Style sobre */
.cat-page .cat-hero {
  background: #0f0f10 !important;
  border-bottom: 1px solid #1f1f1f !important;
  backdrop-filter: none !important;
}



  .cat-header{
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;                 /* tighter */
    display: grid;
    grid-template-columns: 1fr auto 1fr;/* back | title | spacer */
    align-items: center;
    gap: 8px;
  }
  
  /* Back link – muted, no underline, tiny hover */
  .back{
    justify-self: start;
    color: #9aa0a6;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .2s ease, background .2s ease;
  }
  .back::before{ content: "←"; opacity:.9 }
  .back:hover{ color:#eaeaea; background:#151515a4 }
  
  /* Title – smaller, regular color, no gradient/caps */
  .cat-title{
    grid-column: 2;
    justify-self: center;
    margin: 0;
    font-weight: 600;
    font-size: clamp(18px, 2.4vw, 28px);
    letter-spacing: .02em;
    color: #e7e7e7;        /* plain text color */
    text-transform: none;  /* not all-caps */
    filter: none;          /* remove drop shadow */
    -webkit-background-clip: initial;
    background-clip: initial;
  }
  
  
  /* ========= CINEMATIC BACKDROP ========= */
  body::before{
    content:"";
    position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
    background:
      radial-gradient(70vmax 60vmax at 15% -10%, rgba(159,211,179,.12), transparent 60%),
      radial-gradient(60vmax 50vmax at 90% 110%, rgba(61,87,68,.10), transparent 60%);
    animation: drift 22s ease-in-out infinite alternate;
  }
  @keyframes drift{
    from{ transform: translate3d(-2%, -2%, 0) }
    to  { transform: translate3d(2%, 2%, 0) }
  }
  
  /* ===== Masonry en CSS Grid avec spans ===== */
  .cat-grid{
    max-width: 1400px;
    margin: clamp(18px,3vw,28px) auto 64px;
    padding: 0 clamp(10px,2.2vw,18px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 8px;      /* base row height pour le calcul de span */
    gap: 8px;
    margin-top: 5rem;
  }
  
  /* Evite d'afficher les "barres" avant le calcul */
  .cat-grid:not(.ready) .card { opacity: 0; }
  .cat-grid.ready .card { opacity: 1; transition: opacity .25s ease; }
  
  /* Les cartes */
  .card{
    position: relative;
    
    overflow: hidden;
    background: none;
    transform: translateY(18px);
    animation: rise .8s ease forwards;
  }
  @keyframes rise{ to{ transform: translateY(0) } }
  
  .card img{
    width: 100%;
    height: auto;              /* montre l’image en entier */
    display: block;
    object-fit: contain;       /* pas de crop */
    background: #0f0f0f;       /* bandes anthracite si besoin */
    transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  }
  
  /* Hover “WOW” */
  .cat-grid:hover .card{ filter:saturate(.9) brightness(.95) }
  .card:hover{ filter:none; transform: translateY(-2px) scale(1.01); z-index:2 }
  .card:hover img{ transform: scale(1.08); filter: brightness(1.06) }
  
  /* Légende */
  .card .cap{
    position: absolute; left:12px; right:12px; bottom:12px;
    padding:10px 12px; font-size:14px; color:#eef0ee;
    background: linear-gradient(300deg, transparent, rgba(0,0,0,.35));
    border-radius: 4px;
    transform: translateY(10px); opacity:0;
    transition: opacity .35s ease, transform .35s ease; pointer-events:none;
  }
  .card:hover .cap{ opacity:1; transform: translateY(0) }
  
  /* Spans réels (fonctionnent avec CSS Grid) */
  .card.wide{ grid-column: span 2; }   /* s’étale sur 2 colonnes */
  .card.tall{
    grid-row: auto; /* Hauteur calculée dynamiquement via JS */
  }
  
  
  /* Responsive : annule le span 2 colonnes sur mobile étroit */
  @media (max-width: 720px){
    .card.wide{ grid-column: span 1; }
  }
  
  /* ========= LIGHTBOX ========= */
  .lightbox{
    position:fixed; inset:0; z-index:9999; display:none;
    align-items:center; justify-content:center;
    background: rgba(0,0,0,.88);
  }
  .lightbox.open{ display:flex; animation: fadeIn .25s ease }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
  .lightbox img{
    max-width:94vw; max-height:94vh; border-radius:16px;
    box-shadow: 0 30px 120px rgba(0,0,0,.55);
  }
  
  /* ========= ACCESSIBILITY ========= */
  .card:focus-visible{ outline:2px solid #9fe3b2; outline-offset:3px; border-radius:12px }
  
  /* ========= REDUCED MOTION ========= */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important }
  }
  /* ===== Bottom category nav ===== */
.cat-nav{
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 50;
  background: rgba(10,11,12,.45);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  border-radius: 14px;
}
.cat-nav-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: #e9ecee; text-decoration: none;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.cat-nav-btn:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.cat-nav-btn:active{ transform: translateY(0); opacity:.9; }
.cat-nav-label{ font-size: 14px; color:#e9ecee }
@media (max-width: 640px){
  .cat-nav{ bottom: 10px; padding: 8px 10px }
  .cat-nav-label{ display:none } /* icônes seules sur mobile étroit */
}
/* réserve un peu d’espace pour éviter le chevauchement */
.cat-grid{ padding-bottom: 90px; }