.site-header{
  padding:28px 4% 24px;
  background:linear-gradient(110deg,var(--header-start) 0%,var(--header-mid) 52%,var(--header-end) 100%);
  border-bottom:1px solid var(--border-light)
}
.header-inner{width:min(100%,1500px);margin-inline:auto}
.brand{display:inline-flex;flex-direction:column;gap:2px}
.brand-logo{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  width:fit-content;
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800;
  letter-spacing:-.06em;
  line-height:1;
  color:#eef2ff;
  text-shadow:0 0 5px rgba(255,255,255,.8),0 0 12px rgba(126,92,255,.95),0 0 22px rgba(84,69,255,.72)
}
.brand-logo span:last-child{color:#bd8cff}
.brand-tagline{margin:0;padding-left:4px;color:var(--text-muted);font-size:.86rem}

.navigation{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:44px
}
.navigation-link{
  padding:7px 14px;
  border:1px solid #8659c7;
  border-radius:999px;
  background:linear-gradient(180deg,#2b2940 0%,#1b1b28 100%);
  color:var(--text);
  box-shadow:var(--shadow-button);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}
.navigation-link:hover,
.navigation-link:focus-visible,
.navigation-link.is-active{
  transform:translate(2px,2px);
  background:linear-gradient(180deg,#39334f 0%,#242233 100%);
  box-shadow:0 0 8px rgba(255,255,255,.95),0 0 18px rgba(173,151,255,.82);
  outline:none
}

.search-block{width:min(760px,100%);margin-inline:auto}
.search-form{display:flex;width:100%}
.search-input{
  flex:1;
  min-width:0;
  padding:16px 18px;
  border:1px solid var(--border);
  border-right:0;
  border-radius:14px 0 0 14px;
  background:rgba(16,19,30,.95);
  color:var(--text);
  outline:none
}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{
  border-color:var(--primary-light);
  box-shadow:0 0 0 3px rgba(124,77,202,.18),0 0 14px rgba(124,77,202,.36)
}
.search-button{
  padding:0 24px;
  border:1px solid #8e62e7;
  border-radius:0 14px 14px 0;
  background:linear-gradient(135deg,#4d2d91,#7440c2);
  color:#fff;
  cursor:pointer
}
.search-button:hover,.search-button:focus-visible{filter:brightness(1.12);outline:none}

.section-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  margin-bottom:24px
}
.section-header h2{margin-bottom:6px}
.section-header p{margin:0;color:var(--text-soft)}
.section-link{flex-shrink:0;color:#c98cff}
.section-link:hover,.section-link:focus-visible{text-decoration:underline;outline:none}

.media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px
}
.media-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-medium);
  background:linear-gradient(145deg,rgba(27,31,47,.98),rgba(14,17,28,.98));
  box-shadow:var(--shadow-card);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}

#movies-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}
/* ======================================
   PAGE FILMS - AFFICHAGE EN GRILLE
====================================== */

.page-films #movies-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    overflow-x: visible;
}

.page-films #movies-grid .media-card {
    min-width: 0;
    width: auto;
}
/*========================================

==========================================*/
#movies-grid .media-card {
    flex: 0 0 220px;
}

.media-card:hover{
  transform:translateY(-5px);
  border-color:rgba(183,135,255,.72);
  box-shadow:0 14px 30px rgba(0,0,0,.34),0 0 18px rgba(124,77,202,.18)
}

/* Zone image commune à TOUTES les cartes */
.poster-container{
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:linear-gradient(145deg,#372d67,#1a203b 60%,#13182a)
}

/* C'est CETTE classe que tu pourras cibler en JavaScript */
.media-poster{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-card-content{padding:17px}
.media-card-content h3{margin-bottom:8px}
.media-meta{margin:0 0 12px;color:var(--text-soft);font-size:.92rem}
.media-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border:1px solid rgba(162,119,238,.5);
  border-radius:999px;
  background:var(--primary-soft);
  color:#dfc9ff;
  font-size:.78rem
}

.filters{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:14px 16px;
  margin-bottom:26px;
  border:1px solid var(--border);
  border-radius:var(--radius-medium);
  background:rgba(18,22,35,.78)
}
.filter-group{display:flex;align-items:center;gap:10px}
.filter-group label{color:var(--text-soft)}
.filter-group select{
  min-width:150px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:#111522;
  color:var(--text)
}

.site-footer{
  margin-top:60px;
  border-top:1px solid var(--border-light);
  background:linear-gradient(110deg,var(--header-start) 0%,var(--header-mid) 52%,var(--header-end) 100%)
}
.footer-inner{
  min-height:118px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#dbe2f2
}
.footer-inner p{margin:0}

@media(max-width:980px){
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navigation{justify-content:center}
}
@media(max-width:620px){
  .site-header{padding-inline:20px}
  .navigation{gap:12px}
  .search-form{flex-direction:column;gap:10px}
  .search-input{border-right:1px solid var(--border);border-radius:14px}
  .search-button{min-height:48px;border-radius:14px}
  .media-grid{grid-template-columns:1fr}
  .section-header{align-items:start;flex-direction:column}
  .footer-inner{min-height:145px;flex-direction:column;justify-content:center;text-align:center}
}

@media (max-width: 900px) {
    .page-films #movies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .page-films #movies-grid {
        grid-template-columns: 1fr;
    }
}



/* ==========================================
   DIGICOSTREAM - BOUTON FILTRES
========================================== */

.filters-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.filter-dropdown {
    position: relative;
    z-index: 20;
}

/* Petit bouton */

.filter-button {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 17px;

    background: #242039;
    color: #eee7ff;

    border: 1px solid #765ba9;
    border-radius: 10px;

    cursor: pointer;
    font-size: 14px;

    transition: all 0.2s ease;

    list-style: none;
}

/* Masquer la flèche native */

.filter-button::-webkit-details-marker {
    display: none;
}

/* Survol */

.filter-button:hover,
.filter-dropdown[open] .filter-button {
    background: #30264b;
    border-color: #a578eb;
    box-shadow: 0 0 12px rgba(148, 91, 222, 0.3);
}

.filter-button:focus-visible {
    outline: 2px solid #bd92ff;
    outline-offset: 3px;
}

/* Panneau déroulant */

.filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: 250px;
    padding: 20px;
    box-sizing: border-box;

    background: #201c30;
    border: 1px solid #765ba9;
    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Texte */

.filter-panel label {
    display: block;
    margin-bottom: 12px;

    color: #eee7ff;
    font-size: 14px;
    font-weight: 600;
}

/* Menu des genres */

.filter-panel select {
    width: 100%;
    padding: 11px 12px;

    background: #141420;
    color: #ffffff;

    border: 1px solid #665384;
    border-radius: 8px;

    cursor: pointer;
}

.filter-panel select:focus {
    outline: 2px solid #a578eb;
    outline-offset: 2px;
}

/* Mobile */

@media (max-width: 550px) {
    .filter-panel {
        width: min(250px, 85vw);
    }
}