/* TRST CULTURE — bloc « Collection plein écran » (lot C). */
/* Porté de docs/maquettes-accueil-collection/v2/v2.html ; toutes les classes préfixées .tcc-, variables scopées sous .tcc (pas de :root). */
/* Charte : border-radius 0, aucune ombre, noir #000, jaune #F8DA00 (un seul élément jaune par écran), Archivo / Hanken Grotesk. */

.tcc{
  --tcc-bg:#000; --tcc-fg:#fff; --tcc-accent:#F8DA00; --tcc-studio:#EDEAE4; --tcc-ink:#0B0B0B;
  --tcc-display:'Archivo','Arial Narrow',Arial,sans-serif; --tcc-body:'Hanken Grotesk',system-ui,sans-serif;
  --tcc-ease:cubic-bezier(.77,0,.18,1); --tcc-bar:48px;
  --tcc-safe-l:max(24px,env(safe-area-inset-left,0px)); --tcc-safe-r:max(24px,env(safe-area-inset-right,0px));
  background:var(--tcc-bg); color:var(--tcc-fg);
  font-family:var(--tcc-body); font-size:16px; line-height:1.5;
}
.tcc img{display:block;max-width:100%}

/* ---- couverture plein écran ---- */
.tcc-cover{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#3a0a16 center/cover}
.tcc-bg{position:absolute;inset:-4% 0;will-change:transform}
.tcc-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:0;transition:opacity .6s ease}
.tcc-bg img.ok{opacity:1}
.tcc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000c 0%,#0000 58%),linear-gradient(to bottom,#0008,#0000 22%)}
.tcc-txt{position:absolute;z-index:2;left:var(--tcc-safe-l);right:var(--tcc-safe-r);bottom:max(40px,env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.tcc-tag{display:inline-block;background:var(--tcc-accent);color:#000;font-family:var(--tcc-display);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;margin-bottom:20px}
.tcc-h{font-family:var(--tcc-display);text-transform:uppercase;margin:0;font-size:clamp(44px,10.5vw,170px);font-weight:900;line-height:.88;letter-spacing:-.01em;text-wrap:balance}
.tcc-lead{margin:18px 0 0;max-width:46ch;color:#ddd;font-size:15px}
.tcc-side{display:grid;gap:14px;justify-items:end;text-align:right;flex:none}
.tcc-count{font-family:var(--tcc-display);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tcc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #fff;border-radius:0;color:#fff;font-family:var(--tcc-display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:0 26px;text-decoration:none;background:transparent;cursor:pointer;transition:background .2s,color .2s}
.tcc-btn:hover,.tcc-btn:focus-visible{background:#fff;color:#000;outline:none}
.tcc-cue{position:absolute;z-index:2;left:50%;bottom:12px;width:1px;height:24px;background:#fff;opacity:.7;transform-origin:top}

/* ---- barre de collection collante ---- */
.tcc-cwrap{position:relative}
.tcc-cbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:var(--tcc-bar);background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--tcc-safe-l) var(--tcc-safe-r);border-bottom:1px solid #333}
.tcc-cbar b{font-family:var(--tcc-display);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.tcc-cbar>span{font-size:12px;color:#bbb;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tcc-cbar a{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--tcc-display);font-weight:700;text-decoration:none;white-space:nowrap}

/* ---- tuiles — repli par défaut : grille A (2 colonnes, tuiles 4/5, légende superposée) ---- */
.tcc-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:#000}
.tcc-row{display:contents}
.tcc-tile{position:relative;overflow:hidden;background:var(--tcc-studio);min-width:0;display:flex;flex-direction:column;contain:layout paint;text-decoration:none;color:inherit}
.tcc-tile:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.tcc-media{position:relative;flex:none;aspect-ratio:4/5}
.tcc-gal{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.tcc-gal::-webkit-scrollbar{display:none}
.tcc-ly{flex:0 0 100%;scroll-snap-align:start;position:relative;background:var(--tcc-studio) center/cover}
.tcc-ly img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.tcc-ly img.ok{opacity:1}
.tcc-dots{position:absolute;z-index:4;left:16px;right:16px;bottom:56px;display:flex;gap:4px;pointer-events:none;opacity:0;transition:opacity .3s}
.tcc-dots i{flex:1;max-width:64px;height:3px;background:#fff5;display:block}
.tcc-dots i.cur{background:#fff}
.tcc-tile.tcc-hasgal:hover .tcc-dots,.tcc-tile.tcc-hasgal:focus-visible .tcc-dots,.tcc-tile.tcc-play .tcc-dots{opacity:1}
.tcc-cap{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:48px 16px 16px;color:#fff;background:linear-gradient(transparent,#000b);display:flex;justify-content:space-between;gap:12px;align-items:baseline;pointer-events:none}
.tcc-cap b{font-family:var(--tcc-display);font-weight:800;font-size:clamp(12px,1.05vw,15px);text-transform:uppercase;letter-spacing:.04em}
.tcc-cap>span{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tcc-badge{position:absolute;z-index:5;top:12px;left:12px;background:#fff;color:#000;border-bottom:3px solid var(--tcc-accent);font-family:var(--tcc-display);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;pointer-events:none}
.tcc-more{background:#000;display:flex;justify-content:center;padding:40px 16px}

/* ---- mise en page B : accordéon, rangées plein écran (souris + écran ≥ 1000 px) ---- */
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .tcc-rows{display:block}
  .tcc-row{display:flex;gap:2px;background:#000;height:calc(100svh - var(--tcc-bar));min-height:520px;margin-bottom:2px}
  .tcc-row:hover .tcc-tile{flex:.75 1 0}
  .tcc-tile{flex:1 1 0;height:100%;align-self:stretch}
  .tcc-row .tcc-tile:hover,.tcc-row .tcc-tile:focus-within{flex:2.4 1 0}
  .tcc-media{flex:1 1 auto;aspect-ratio:auto;min-height:0}
}

/* ---- paliers de mouvement (palier appliqué par tc-collection.js via data-tier sur .tcc) ---- */
/* palier 2 : bureau — parallaxe + zoom d'entrée, titre masqué qui monte */
.tcc[data-tier="2"] .tcc-bg{transform:scale(1.1);transition:transform 9s cubic-bezier(.2,.6,.2,1)}
.tcc[data-tier="2"] .tcc-cover.in .tcc-bg{transform:scale(1)}
.tcc[data-tier="2"] .tcc-h .tcc-w{display:block;overflow:hidden}
.tcc[data-tier="2"] .tcc-h .tcc-w span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--tcc-ease)}
.tcc[data-tier="2"] .tcc-cover.in .tcc-h .tcc-w span{transform:none}
.tcc[data-tier="2"] .tcc-cue{animation:tcc-cue 1.8s ease-in-out infinite}
@keyframes tcc-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@supports (animation-timeline:view()){
  .tcc[data-tier="2"] .tcc-bg{animation:tcc-par linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes tcc-par{to{translate:0 9%}}
}
/* paliers 1 et 2 : apparition des tuiles en cascade */
.tcc[data-tier="1"] .tcc-tile.pre,.tcc[data-tier="2"] .tcc-tile.pre{opacity:0;transform:translateY(24px)}
.tcc[data-tier="1"] .tcc-tile,.tcc[data-tier="2"] .tcc-tile{transition:opacity .6s ease,transform .7s var(--tcc-ease);transition-delay:calc(var(--i,0)*60ms)}
.tcc[data-tier="2"] .tcc-row .tcc-tile{transition:flex .7s var(--tcc-ease),opacity .6s ease,transform .7s var(--tcc-ease)}
/* palier 1 : tactile — suggestion de glissement, pas d'autoplay */
.tcc[data-tier="1"] .tcc-tile.tcc-hasgal:not(.seen) .tcc-gal{animation:tcc-nudge 1.2s .8s ease both}
@keyframes tcc-nudge{30%{transform:translateX(-28px)}60%,100%{transform:none}}
.tcc[data-tier="1"] .tcc-dots{opacity:1}
/* palier 0 : réduit (prefers-reduced-motion, économie de données) — aucune animation, images visibles */
.tcc[data-tier="0"] *,.tcc[data-tier="0"] *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.tcc[data-tier="0"] .tcc-bg img,.tcc[data-tier="0"] .tcc-ly img{opacity:1}
.tcc[data-tier="0"] .tcc-dots{opacity:1}
.tcc[data-tier="0"] .tcc-tile.pre{opacity:1;transform:none}

/* ---- mobile : légende sous l'image, bouton pleine largeur ---- */
@media (max-width:999px){
  .tcc-txt{flex-direction:column;align-items:stretch}
  .tcc-side{justify-items:stretch;text-align:left}
  .tcc-side .tcc-btn{width:100%}
  .tcc-tile{background:#fff;color:var(--tcc-ink)}
  .tcc-cap{position:static;padding:10px 12px 14px;background:#fff;color:var(--tcc-ink);pointer-events:auto;flex-direction:column;gap:2px}
  .tcc-cap b{font-size:12px}
  .tcc-cap>span{font-size:12px;color:#444}
  .tcc-dots{bottom:12px;opacity:1}
}
@media (max-width:520px){
  .tcc-cbar a{display:none}
}

/* neutralise le padding vertical global des <section> du thème */
.tcc section.tcc-row,.tcc section.tcc-cover,section.tcc{padding:0;margin-inline:0}