/* ============================================================================
 * themeFinal.css — TripCooking · Page Thème (.corpsDesThemes)
 * ----------------------------------------------------------------------------
 * Thème sombre framboise/safran. Scopé sous .corpsDesThemes, variables
 * uniques --tct-* verrouillées. Inclut la barre membre/visiteur.
 * ========================================================================== */

.corpsDesThemes{
  --tct-bg:#16171B;--tct-surface:#1C1E23;--tct-surface-2:#23262C;
  --tct-line:#2A2D34;--tct-line-2:#34373F;
  --tct-text:#ECEDE9;--tct-soft:#A7ABA4;--tct-muted:#767A72;
  --tct-accent:#E14B7A;--tct-accent-2:#CA4A82;--tct-accent-deep:#B6306B;--tct-gold:#E8A93C;
  --tct-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tct-mono:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--tct-text);font-family:var(--tct-ui);padding-bottom:40px;
}
.corpsDesThemes *{box-sizing:border-box}
.corpsDesThemes a{text-decoration:none;color:inherit}

/* ===== Bannière ===== */
.corpsDesThemes .banner-theme{
  position:relative;overflow:hidden;border-radius:20px;
  padding:44px 30px !important;margin-bottom:30px !important;
  text-align:center;border:1px solid var(--tct-line);
  background:linear-gradient(135deg,#2a1421,#191b21 55%,#211a12);
}
.corpsDesThemes .banner-theme::before,
.corpsDesThemes .banner-theme::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.corpsDesThemes .banner-theme::before{width:360px;height:360px;top:-150px;left:-90px;background:rgba(225,75,122,.35)}
.corpsDesThemes .banner-theme::after{width:320px;height:320px;right:-100px;bottom:-160px;background:rgba(232,169,60,.22)}
.corpsDesThemes .banner-theme h1{
  position:relative;font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.02em;
  line-height:1.06;margin:0;color:var(--tct-text);
}
.corpsDesThemes .banner-theme h1::after{
  content:"";display:block;width:64px;height:3px;margin:16px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--tct-accent),var(--tct-gold));
}
.corpsDesThemes .banner-theme .lead{
  position:relative;margin:16px auto 0;max-width:540px;
  font-size:14.5px;line-height:1.6;color:var(--tct-soft);
}
.corpsDesThemes .banner-theme .lead strong{color:var(--tct-text);font-weight:700}

/* ===== Barre membre / visiteur ===== */
.corpsDesThemes .tc-userBar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:26px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--tct-line);background:var(--tct-surface);
  font-size:13.5px;line-height:1.5;color:var(--tct-soft);
}
.corpsDesThemes .tc-userBar--visitor{
  background:linear-gradient(120deg,#241320,#1b1c22);border-color:var(--tct-line-2);
}
.corpsDesThemes .tc-userBar b{color:var(--tct-text);font-weight:700}
.corpsDesThemes .tc-userBar__actions{display:flex;gap:10px;flex-shrink:0}
.corpsDesThemes .tc-userBar__btn{
  display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:11px;
  font-size:13px;font-weight:800;transition:filter .14s,border-color .14s,color .14s,transform .14s;
}
.corpsDesThemes .tc-userBar__btn--ghost{border:1px solid var(--tct-line-2);color:var(--tct-text)}
.corpsDesThemes .tc-userBar__btn--ghost:hover{border-color:var(--tct-accent);color:var(--tct-accent-2)}
.corpsDesThemes .tc-userBar__btn--primary{
  color:#fff;background:linear-gradient(135deg,var(--tct-accent),var(--tct-accent-deep));
  box-shadow:0 12px 22px -14px rgba(182,48,107,.7);
}
.corpsDesThemes .tc-userBar__btn--primary:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* ===== Grille des publications ===== */
.corpsDesThemes .publicationTheme{margin-top:4px}
.corpsDesThemes .publicationGrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:20px;
}
.corpsDesThemes .publication{
  position:relative;
  background:var(--tct-surface);border:1px solid var(--tct-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s;
}
.corpsDesThemes .publication:hover{transform:translateY(-4px);border-color:var(--tct-line-2);box-shadow:0 24px 44px -28px rgba(0,0,0,.85)}
.corpsDesThemes .publication a{display:block;color:inherit}
.corpsDesThemes .publication img{
  width:100%;height:172px;object-fit:cover;display:block;
  background:var(--tct-surface-2);transition:transform .3s;
}
.corpsDesThemes .publication:hover img{transform:scale(1.04)}
.corpsDesThemes .publication h4{
  margin:0;padding:14px 16px 0;font-size:16px;font-weight:800;line-height:1.3;color:var(--tct-text);transition:color .15s;
}
.corpsDesThemes .publication a:hover h4{color:var(--tct-accent-2)}
.corpsDesThemes .publication p{margin:0;padding:8px 16px;font-size:13px;line-height:1.55;color:var(--tct-soft)}
.corpsDesThemes .publication p:first-of-type{
  padding-top:10px;padding-bottom:2px;font-family:var(--tct-mono);font-size:12px;color:var(--tct-muted);
}
.corpsDesThemes .publication p:first-of-type::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle;
  background:linear-gradient(135deg,var(--tct-accent),var(--tct-gold));
}
.corpsDesThemes .publication p:last-of-type{padding-bottom:14px}

/* Bouton « Sauver » (membres) */
.corpsDesThemes .tc-save{
  margin:0 16px 16px;align-self:flex-start;
  height:34px;padding:0 14px;border-radius:10px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:800;color:var(--tct-text);
  background:var(--tct-surface-2);border:1px solid var(--tct-line-2);
  transition:border-color .14s,color .14s,background .14s;
}
.corpsDesThemes .tc-save:hover{border-color:var(--tct-accent);color:var(--tct-accent-2)}
.corpsDesThemes .tc-save.is-saved{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--tct-accent),var(--tct-accent-deep));
}

/* État vide */
.corpsDesThemes .publicationTheme > p{padding:40px 16px;text-align:center;color:var(--tct-muted);font-size:14px}

/* ===== Responsive ===== */
@media (max-width:620px){
  .corpsDesThemes .banner-theme{padding:34px 20px !important;border-radius:16px}
  .corpsDesThemes .publicationGrid{gap:14px}
  .corpsDesThemes .publication img{height:150px}
  .corpsDesThemes .tc-userBar{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){.corpsDesThemes *{transition:none!important}}