@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =============================================================================
   fluxStyle.css — page flux.php (Flux culinaire) — style sombre, façon YouTube
   (rail de thèmes en cercles + grille dense de cartes sans cadre).
   Les classes de résultats (.tc-grid, .tc-card*), la liste déroulante
   (#themeSelect / .tc-select) et la recherche (.tc-searchPro / #searchInput)
   gardent leurs noms : on ne fait que les re-styliser.
   ========================================================================== */

.tc-themes{
  --bg:#0a0a0d; --surf:#141419; --surf-2:#1a1a21;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --tx:#f3f3f6; --tx-2:#9a9aa6; --tx-3:#646470;
  --pink:#f8517a; --pink-2:#ff7d9e; --pink-soft:rgba(248,81,122,.16); --green:#34d399;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

body{ background:#0a0a0d; }
.corpsThemes{ background:#0a0a0d; min-height:100vh; }
.tc-themes{
  max-width:1320px; margin:0 auto; padding:0 26px 70px;
  color:var(--tx); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.tc-themes a{ color:inherit; text-decoration:none; }
.tc-muted{ color:var(--tx-3); font-family:var(--mono); font-size:12px; }

/* ── RAIL DE THÈMES (cercles) ─────────────────────────────────────────────── */
.tc-trailWrap{ position:sticky; top:58px; z-index:30;
  background:rgba(10,10,13,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); margin:0 -26px; }
.tc-trail{ display:flex; gap:20px; overflow-x:auto; overflow-y:hidden;
  padding:16px 26px; max-width:1320px; margin:0 auto; scrollbar-width:thin; }
.tc-trail::-webkit-scrollbar{ height:6px; }
.tc-trail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px; }
.tc-tc{ flex:0 0 auto; width:82px; text-align:center; }
.tc-tc__ring{ width:64px; height:64px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; font-size:27px; line-height:1;
  background:#1a1a21;
  background:color-mix(in srgb, var(--ac,#f8517a) 16%, #15151b);
  border:2px solid transparent; transition:transform .18s, border-color .18s, box-shadow .18s; }
.tc-tc:hover .tc-tc__ring{ transform:translateY(-2px); }
.tc-tc.is-on .tc-tc__ring{ border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft); }
.tc-tc__nm{ display:block; font-size:12px; margin-top:8px; color:var(--tx-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-tc.is-on .tc-tc__nm{ color:var(--tx); font-weight:600; }
.tc-tc__ct{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--tx-3); margin-top:1px; }

/* ── TOOLBAR (titre + dropdown + recherche) ───────────────────────────────── */
.tc-toolbar{ margin:24px 0 6px; }
.tc-toolbar__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tc-toolbar__title{ margin:0; font-size:26px; font-weight:900; letter-spacing:-.02em; }
.tc-toolbar__title span{ color:var(--pink); }
.tc-resultsCount{ font-size:14px; color:var(--tx-2); }
.tc-resultsCount b{ color:var(--tx); font-weight:800; }

.tc-toolbar__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }

.tc-selectWrap{ position:relative; }
.tc-select{ appearance:none; -webkit-appearance:none; height:46px; padding:0 38px 0 14px; min-width:200px;
  background:var(--surf); color:var(--tx); border:1px solid var(--line-2); border-radius:12px;
  font-family:var(--sans); font-size:14px; cursor:pointer; }
.tc-select:focus{ outline:none; border-color:var(--pink); }
.tc-select option{ background:#15151b; color:var(--tx); }
.tc-selectChevron{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--tx-3); pointer-events:none; font-size:12px; }

.tc-searchPro{ flex:1; min-width:240px; display:flex; align-items:center; gap:10px; height:46px; padding:0 6px 0 14px;
  background:var(--surf); border:1px solid var(--line-2); border-radius:12px; }
.tc-searchPro:focus-within{ border-color:var(--pink); }
.tc-searchPro__icon{ color:var(--tx-3); font-size:17px; }
.tc-searchPro__input{ flex:1; min-width:0; height:100%; background:transparent; border:0; outline:0;
  color:var(--tx); font-size:14px; font-family:inherit; }
.tc-searchPro__input::placeholder{ color:var(--tx-3); }
.tc-searchPro__btn{ height:36px; padding:0 18px; border:0; border-radius:9px; cursor:pointer; color:#fff;
  font-weight:700; font-size:13.5px; font-family:inherit;
  background:linear-gradient(135deg,#f8517a,#e23a64); box-shadow:0 8px 22px -12px rgba(248,81,122,.9); }
.tc-searchPro__btn:hover{ filter:brightness(1.06); }

.tc-themesBar__hint{ margin-top:12px; font-size:12.5px; color:var(--tx-3); }
.tc-themesBar__hint a{ color:var(--pink-2); }

/* ── BANNIÈRE THÈME + ABONNEMENT ──────────────────────────────────────────── */
.tc-themeInfo{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:22px 0 6px; padding:16px 18px; background:var(--surf); border:1px solid var(--line); border-radius:14px; }
.tc-themeInfo__titleRow{ display:flex; align-items:center; gap:10px; }
.tc-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:tcFluxPulse 1.8s infinite; }
.tc-themeInfo__title{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.tc-themeInfo__meta{ margin:5px 0 0; font-family:var(--mono); font-size:12px; color:var(--tx-3); }
.tc-themeInfo__notice{ font-size:13px; color:var(--tx-2); }

/* ── BOUTONS ──────────────────────────────────────────────────────────────── */
.tc-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-radius:11px;
  padding:11px 18px; font-size:14px; font-weight:700; font-family:var(--sans); border:1px solid transparent; }
.tc-btn--primary{ color:#fff; background:linear-gradient(135deg,#f8517a,#e23a64);
  border-color:rgba(248,81,122,.5); box-shadow:0 10px 26px -14px rgba(248,81,122,.9); }
.tc-btn--primary:hover{ filter:brightness(1.06); }
.tc-btn--ghost{ color:var(--tx); background:transparent; border-color:var(--line-2); }
.tc-btn--ghost:hover{ background:rgba(255,255,255,.06); }

/* ── GRILLE DE RÉSULTATS (façon YouTube : cartes sans cadre) ──────────────── */
.tc-themesMain{ margin-top:18px; }
.tc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 16px; }
.tc-card{ }
.tc-card__link{ display:block; color:inherit; text-decoration:none; }
.tc-card__media{ position:relative; aspect-ratio:16/9; border-radius:13px; overflow:hidden; background:#15151b;
  transition:border-radius .18s; }
.tc-card:hover .tc-card__media{ border-radius:6px; }
.tc-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.tc-card__body{ display:flex; gap:11px; margin-top:11px; }
.tc-card__av{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; color:#fff; background:linear-gradient(135deg,#f8517a,#7a2540); }
.tc-card:nth-child(6n+2) .tc-card__av{ background:linear-gradient(135deg,#e8a93c,#7a5a14); }
.tc-card:nth-child(6n+3) .tc-card__av{ background:linear-gradient(135deg,#8b5cf6,#3b2a7a); }
.tc-card:nth-child(6n+4) .tc-card__av{ background:linear-gradient(135deg,#34d399,#0f6e56); }
.tc-card:nth-child(6n+5) .tc-card__av{ background:linear-gradient(135deg,#60a5fa,#1e3a8a); }
.tc-card:nth-child(6n)   .tc-card__av{ background:linear-gradient(135deg,#ef6f53,#7a2a17); }
.tc-card__txt{ min-width:0; }
.tc-card__title{ margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1.3;
  color:var(--tx); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tc-card__excerpt{ display:none; }
.tc-card__meta{ display:flex; align-items:center; gap:7px; margin-top:5px;
  font-family:var(--mono); font-size:11.5px; color:var(--tx-3); }
.tc-card__meta .tc-sep{ opacity:.6; }

/* ── PAGINATION ───────────────────────────────────────────────────────────── */
.tc-pagination{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:40px 0 10px; }
.tc-pageNums{ display:flex; gap:8px; }
.tc-pageBtn,.tc-pageNum{ min-width:40px; height:40px; padding:0 12px; display:inline-grid; place-items:center;
  border-radius:11px; border:1px solid var(--line-2); color:var(--tx-2);
  font-family:var(--mono); font-size:13px; }
.tc-pageBtn:hover,.tc-pageNum:hover{ color:var(--tx); border-color:var(--pink); }
.tc-pageNum.is-active{ background:var(--pink-soft); border-color:transparent; color:var(--pink-2); }
.tc-pageBtn.is-disabled{ opacity:.35; pointer-events:none; }
.tc-pageDots{ color:var(--tx-3); font-family:var(--mono); padding:0 4px; }

/* ── ÉTAT VIDE ────────────────────────────────────────────────────────────── */
.tc-empty{ text-align:center; padding:60px 20px; color:var(--tx-2);
  background:var(--surf); border:1px solid var(--line); border-radius:16px; margin-top:10px; }
.tc-empty h3{ margin:0 0 6px; font-size:18px; color:var(--tx); font-weight:700; }
.tc-empty p{ margin:0; font-size:14px; }

@keyframes tcFluxPulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{ box-shadow:0 0 0 6px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .tc-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){
  .tc-trailWrap{ position:static; }   /* évite tout chevauchement avec l'entête sur mobile */
}
@media (max-width:760px){
  .tc-grid{ grid-template-columns:repeat(2,1fr); }
  .tc-toolbar__row{ flex-direction:column; align-items:stretch; }
  .tc-select,.tc-selectWrap{ width:100%; }
}
@media (max-width:460px){
  .tc-themes{ padding-left:16px; padding-right:16px; }
  .tc-trailWrap{ margin-left:-16px; margin-right:-16px; }
  .tc-trail{ padding-left:16px; padding-right:16px; }
  .tc-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .tc-themes *{ animation:none!important; transition:none!important; } }