/* ========== CIVSHOW Theme (jaune rétro) ========== */
:root{
  --bg:#0e0f11;
  --bg-2:#131417;
  --panel:#16181c;
  --text:#f3f4f6;
  --muted:#b8bdc7;
  --primary:#f8d24a;           /* jaune or */
  --primary-600:#f4c430;       /* safran */
  --primary-700:#d4a413;       /* or foncé */
  --border:#292c32;
  --ring:#f8d24a;
  --shadow:0 10px 30px rgba(0,0,0,.28);
}

/* Évite le décalage quand la scrollbar apparaît */
html { scrollbar-gutter: stable both-edges; }

/* Fallback pour navigateurs anciens */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }  /* réserve toujours la place de la barre */
}

@media(prefers-color-scheme:light){
  :root{
    --bg:#f7f6f2;
    --bg-2:#fffaf0;
    --panel:#ffffff;
    --text:#1a1a1a;
    --muted:#5f5a48;
    --border:#e9e2c8;
    --shadow:0 8px 24px rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* Base body */
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 30% top, rgba(248,210,74,.07), transparent 70%),
    radial-gradient(circle at 70% top, rgba(244,196,48,.06), transparent 70%),
    linear-gradient(180deg, rgba(248,210,74,.03), rgba(0,0,0,.01) 40%, var(--bg) 90%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Retro accents */
.retro-border{ box-shadow: inset 0 0 0 2px rgba(244,196,48,.35), var(--shadow); }
.kern{ letter-spacing: .15em; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pixel{ image-rendering: pixelated; }

/* Base links */
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

/* Containers */
.container{width:min(1100px,92%); margin-inline:auto}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(16,16,18,.92), rgba(16,16,18,.7));
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.5rem 0;
}
.brand{font-weight:900; letter-spacing:.08em}
.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--border); background:transparent; border-radius:.8rem}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:6px auto}
.nav-links{display:flex; align-items:center; gap:.4rem}
.nav-links a{padding:.6rem .9rem; border-radius:.7rem; position:relative; transition: 0.5s;}
.nav-links a:hover{background:rgba(248,210,74,.12);
}

/* Mobile menu */
@media(max-width:720px){
  .nav-toggle{display:inline-block}
  .nav-links{display:none; position:absolute; inset:64px 4% auto; flex-direction:column; background:var(--panel); border:1px solid var(--border); padding:.6rem; border-radius:1rem; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
}

/* Hero */
.content{flex:1}
.hero{padding:2.8rem 0}
.hero-inner{
  padding:2.2rem;
  background:linear-gradient(180deg, rgba(248,210,74,.06), rgba(248,210,74,.02)), var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  text-align:center;
}
.hero h1{font-size:clamp(2rem,4vw,3rem); margin:.2rem 0 .6rem}
.lead{color:var(--muted); margin:0 auto 1.1rem; max-width:62ch}
.actions{display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap}
.hero-badges{display:flex; justify-content:center; gap:.6rem; margin-top:.8rem}

/* Section */
.section{padding:2.2rem 0 3rem}

/* Cards / Grid */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
@media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.1rem 1.2rem;
  box-shadow:var(--shadow);
}
.elev-1{box-shadow:0 8px 16px rgba(0,0,0,.18)}
.elev-2{box-shadow:0 14px 28px rgba(0,0,0,.22)}
.card h2{margin:.2rem 0 .5rem; font-size:1.22rem}
.card p{color:var(--muted); margin:0 0 .9rem}

.tile-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:rgba(248,210,74,.08); margin-bottom:.6rem; }
.retro-badge{ box-shadow: inset 0 0 0 2px rgba(248,210,74,.2); }

/* Assets list */
.assets .asset-list{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.asset{ border:1px dashed var(--border); padding:.6rem .8rem; border-radius:10px; background:rgba(248,210,74,.06); }
.asset:hover{ background:rgba(248,210,74,.12); text-decoration:none; }

/* Buttons */
.btn{display:inline-block; font-weight:800; border-radius:12px; padding:.85rem 1.1rem; border:1px solid transparent; transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-600)); color:#2a1f00; box-shadow:0 8px 20px rgba(248,210,74,.28)}
.btn-primary:hover{background:linear-gradient(180deg, var(--primary-600), var(--primary-700))}
.btn-soft{background:rgba(248,210,74,.12); color:var(--text); border-color:rgba(248,210,74,.35)}
.btn-soft:hover{background:rgba(248,210,74,.18)}
.btn-ghost{background:transparent; color:var(--text)}
.btn-ghost:hover{background:rgba(248,210,74,.08)}

/* Footer (alignement stable PC + mobile) */
.footer{border-top:1px solid var(--border); background:linear-gradient(0deg, rgba(16,16,18,.9), rgba(16,16,18,.5)); padding:1.2rem 0}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  flex-wrap: nowrap !important;   /* force la même ligne même sur mobile */
}
.muted{color:var(--muted); font-size:.95rem; margin:0; white-space:nowrap}
.footer .footer-inner .btn{ flex:0 0 auto; }
@media (max-width:480px){
  .footer .footer-inner .btn{ padding:.55rem .75rem; font-size:.95rem; }
}

/* Focus & motion */
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:10px}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Equal-height tiles and aligned CTAs */
.equal-tiles{ align-items: stretch; }
.tile{ display:flex; flex-direction:column; }
.tile-text{ margin-bottom: .9rem; }
.tile-cta{ margin-top:auto; align-self:flex-start; }
.tile h2{ min-height: 1.25em; }

/* ========== Présentation / Spec Grid ========== */
.spec-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1rem }
.input{ flex:1 1 280px; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text) }
.input::placeholder{ color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chip{ border:1px solid var(--border); background:rgba(248,210,74,.08); color:var(--text); border-radius:999px; padding:.4rem .7rem; font-weight:700 }
.chip.active{ background:rgba(248,210,74,.2) }

.spec-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8rem }
@media(max-width:1024px){ .spec-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px){ .spec-grid{ grid-template-columns:1fr } }

.spec-card{ display:flex; flex-direction:column; gap:.4rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1rem 1rem; box-shadow:var(--shadow); min-height:140px }
.spec-card h3{ margin:.1rem 0 .2rem; font-size:1.05rem }
.spec-card p{ color:var(--muted); margin:0 }

/* ========== Info / Feature Tiles ========== */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
@media(max-width:1024px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  display:grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon title"
    "icon text";
  gap:.4rem .7rem;
  align-items:flex-start;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem 1rem;
  box-shadow:var(--shadow);
  min-height:110px;
}
.feature-card .feat-icon{ grid-area: icon; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(248,210,74,.10); border:1px solid var(--border); }
.feature-card h3{ grid-area:title; margin:.1rem 0 .2rem; font-size:1.05rem; }
.feature-card p{ grid-area:text; margin:0; color:var(--muted); }

/* Hover confort desktop */
@media (hover:hover){
  .feature-card:hover{ transform: translateY(-1px); transition: transform .08s ease; }
}

/* ===== FAQ styles ===== */
.section-title{
  margin: 1.4rem 0 .6rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.faq-wide .faq-card{
  padding: 1.2rem 1.3rem;
  border-radius: 16px;
}

.faq-list.faq-wide { gap: 1rem; }

.faq-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.1s ease;
}
.faq-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.faq-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}
.faq-card p {
  margin: .4rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Style spécial du titre CIVSHOW (option Orbitron si importée) */
.hero-inner h1 .kern {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f8d24a, #f4c630, #d8a900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(248,210,74,0.25);
  transition: 1s;
}
.hero-inner h1 .kern:hover { text-shadow: 0 0 10px rgba(248,210,74,0.5); }

/* ======== Transition pages — ultra smooth (opacity only) ======== */
html.page-fade { opacity: 0; transition: opacity .80s cubic-bezier(0.16, 1, 0.3, 1); }
html.page-fade.ready { opacity: 1; }
html.page-fade.leaving { opacity: 0; transition-duration: .60s; }

/* Vignette douce à la sortie (n'affecte pas le FAB) */
html.page-fade::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:rgba(0,0,0,.06); opacity:0; transition:opacity .60s ease;
}
html.page-fade.leaving::before{ opacity:1; }

@media (prefers-reduced-motion: reduce) {
  html.page-fade,
  html.page-fade.ready,
  html.page-fade.leaving { transition: opacity .20s ease !important; }
}

/* ======== Floating FAQ button (FAB) — ancrage béton ======== */
.fab{
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483647;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color: #2a1f00; font-weight: 900; text-decoration: none;
  box-shadow: 0 12px 24px rgba(248,210,74,.25);
  border: 1px solid rgba(0,0,0,.15);
  will-change: transform;
}
.fab:hover{ background: linear-gradient(180deg, var(--primary-600), var(--primary-700)); text-decoration: none; }
.fab svg{ display:block }

@media (max-width:380px){
  .fab span{ display:none; } /* icône seule uniquement sur mini-écrans */
}


/* iOS Safari: réassure le "fixed" */
@supports (-webkit-touch-callout: none){
  .fab{ position: fixed !important; }
}
/* Ceinture & bretelles si une classe globale bouge des parents */
.page-fade .fab{ position: fixed !important; }

/* Mobile: plus de FAB flottant, on passe en bouton inline */
@media (max-width: 640px){
  .fab{ display: none !important; }
}

/* Cacher les éléments réservés au mobile par défaut */
.mobile-only { display: none; }

/* Montrer sur les écrans <= 640px, cacher le FAB à la place */
@media (max-width: 640px){
  .mobile-only { display: inline-block; }
  .fab { display: none !important; }
}

/* Garde le footer bien en bas, même sur pages courtes */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1 0 auto;
}

/* ==== Bouton "Haut de page" — fix neutralisation + centrage infaillible ==== */

/* 1) Le conteneur centre à la fois en flex ET en fallback text-align */
.to-top-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  text-align:center;
  margin: 2.5rem 0 1.5rem; /* ↑↓ ajoute un espace avant le footer */
}

/* 2) Reset total + style CIVSHOW pour tous mobiles */
#toTopBtn.to-top{
  all: unset;               /* neutralise 100% du style natif (mobile/desktop) */
  box-sizing: border-box;   /* on remet une base saine */

  /* Style CIVSHOW (jaune néon) */
  display: inline-flex;     /* centré même si text-align prend le relais */
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;

  padding: .75rem 1.1rem;
  margin-inline: auto;      /* au cas où le parent ne soit pas flex */
  border-radius: 999px;
  border: 1px solid rgba(248,210,74,.4);
  background: linear-gradient(180deg, rgba(248,210,74,.15), rgba(248,210,74,.05));
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(248,210,74,.3);
  transition: all .25s ease;
  backdrop-filter: blur(6px);
  transition: background 1s ease, color 1s ease, box-shadow 1s ease, transform 1s ease;

}

#toTopBtn.to-top svg{
  fill: var(--primary);
  filter: drop-shadow(0 0 6px rgba(248,210,74,.5));
  flex-shrink: 0;
}

#toTopBtn.to-top:hover{
  background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
  color: #2a1f00;
  box-shadow: 0 0 16px rgba(248,210,74,.6);
  transform: translateY(-2px);
}

#toTopBtn.to-top span{
  color: var(--primary);
  text-shadow: 0 0 6px rgba(248,210,74,.4);
}

/* Apparition douce après scroll */
#toTopBtn.to-top.is-hidden{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

/* Mobile compact */
@media (max-width:480px){
  #toTopBtn.to-top{ padding:.6rem .9rem; font-size:.9rem; }
  #toTopBtn.to-top span{ display:none; } /* icône seule sur mobile */
}
/* ===== Bouton "Haut de page" — override final (centré + jaune néon) ===== */

/* Le conteneur centre vraiment le bouton, quoi qu'il arrive */
section.to-top-wrap{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 2.5rem 0 1.6rem !important; /* espace au-dessus du footer */
}

/* Reset total + style CIVSHOW, avec priorité maximale */
#toTopBtn.to-top{
  all: unset !important;               /* vire 100% du style natif */
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  cursor: pointer !important;
  vertical-align: middle !important;

  padding: .78rem 1.15rem !important;
  margin: 0 auto !important;           /* centré même si le parent foire */
  border-radius: 999px !important;
  border: 1px solid rgba(248,210,74,.42) !important;
  background: linear-gradient(180deg, rgba(248,210,74,.16), rgba(248,210,74,.06)) !important;
  color: var(--text) !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 0 10px rgba(248,210,74,.30) !important;
  backdrop-filter: blur(6px) !important;
  transition: 1s;
}

#toTopBtn.to-top:hover{
  background: linear-gradient(180deg, var(--primary-600), var(--primary-700)) !important;
  color: #2a1f00 !important;
  box-shadow: 0 0 16px rgba(248,210,74,.6) !important;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.6) !important; ;
  transform: translateY(-2px) !important;
}

#toTopBtn.to-top svg{
  display: block !important;
  fill: var(--primary) !important;
  filter: drop-shadow(0 0 6px rgba(248,210,74,.5)) !important;
  flex-shrink: 0 !important;
}

#toTopBtn.to-top span{
  color: var(--primary) !important;
  text-shadow: 0 0 6px rgba(248,210,74,.4) !important;
}

/* Apparition douce après scroll */
#toTopBtn.to-top.is-hidden{
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
}

/* Mobile compact (icône seule) */
@media (max-width:480px){
  #toTopBtn.to-top{ padding:.62rem .92rem !important; font-size:.95rem !important; }
  #toTopBtn.to-top span{ display:none !important; }
}
/* Lead justifiée façon “bloc carré”, avec dernière ligne centrée */
.lead.lead-justify{
  text-align: justify;
  text-align-last: center;         /* Chrome/Edge */
  -moz-text-align-last: center;    /* Firefox */
  hyphens: auto;                   /* césure douce si dispo */
  max-width: 62ch;                 /* belle colonne lisible */
  margin-left: auto;               /* centre le bloc lui-même */
  margin-right: auto;
}

/* Bonus : si dispo, équilibre les lignes pour un bloc plus régulier */
@supports (text-wrap: balance){
  .lead.lead-justify{
    text-wrap: balance;
  }
}
/* --- Section finale plein format horizontal --- */
.section-ending {
  padding-top: 1.2rem;
}
.footer-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.footer-link:hover {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(248,210,74,.6);
}

.btn-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.btn-link:hover {
  color: var(--primary-700);
  text-shadow: 0 0 6px rgba(248,210,74,.6);
}
/* ====== COMPTE À REBOURS CIVSHOW ====== */

.countdown-card{
  margin-top: 1rem;
  text-align: center;
}

.countdown-title{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 .6rem;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(248,210,74,.55);
}

.countdown-sub{
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.countdown-timer{
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.time-block{
  min-width: 90px;
  padding: .6rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(248,210,74,.28);
  background: radial-gradient(circle at top, rgba(248,210,74,.18), rgba(0,0,0,.85));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-value{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--primary);
  text-shadow: 0 0 12px rgba(248,210,74,.7);
  line-height: 1.1;
}

.time-label{
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: .15rem;
}

/* Un peu plus compact sur mobile */
@media (max-width: 480px){
  .time-block{
    min-width: 70px;
    padding: .5rem .6rem;
  }
  .time-value{
    font-size: 1.4rem;
  }
}
/* Grille spéciale pour les crafts : 2 colonnes sur desktop */
.craft-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.9rem;
}

@media (max-width: 800px){
  .craft-grid{
    grid-template-columns: 1fr;
  }
}

/* Zone d'aperçu des crafts (screens) */
.craft-preview{
  margin: .8rem 0 1rem;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background:
    radial-gradient(circle at top, rgba(248,210,74,.08), transparent 65%),
    rgba(0,0,0,.45);
  min-height: 130px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.craft-preview{
  grid-column: 1 / -1;              /* occupe toute la largeur de la tuile */
  margin-top: .9rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 1px dashed rgba(248,210,74,.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(248,210,74,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  overflow: hidden;
}

.craft-preview img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ===== Section trailers / vidéos ===== */
.video-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}

@media(max-width:960px){
  .video-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:640px){
  .video-grid{ grid-template-columns:1fr; }
}

.video-card{
  padding:1.1rem 1.2rem;
}

.video-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.video-link:hover .video-thumb{
  box-shadow:0 0 24px rgba(248,210,74,.45);
  transform:translateY(-1px);
}

.video-thumb{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(248,210,74,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  aspect-ratio:16/9;
  margin-bottom:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .2s ease, transform .12s ease;
}

.video-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* léger voile pour garder le texte lisible et le play bien visible */
.video-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  pointer-events:none;
}

.video-play{
  position:absolute;
  z-index:1;
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255, 223, 90, .65);           /* contour un peu plus chaud */
  background:radial-gradient(circle at 30% 20%, 
                             #292525,                  /* cœur très clair */
                             #b8a111);                 /* jaune proche du titre */
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 18px rgba(255, 217, 90, .8);
  opacity:0.5;                                        /* bouton semi-transparent */
}

}

.play-icon{
  font-size:1.35rem;
  color:#2a1f00;
  margin-left:3px; /* triangle un peu à droite */
  font-weight:900;
}

.video-card h3{
  margin:.1rem 0 .2rem;
  font-size:1.05rem;
}

.video-card p{
  margin:0;
  color:var(--muted);
}