/* =====================
   DESIGN SYSTEM STARTUP
===================== */

:root{
  --bg:#0b0d12;
  --card:#161a22;
  --accent:#ff3d55;
  --text:#f5f5f5;
  --muted:#b8b8b8;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:Inter;
  background:var(--bg);
  color:var(--text);
}

/* NAVBAR */
header{
  position:sticky;
  top:0;
  background:rgba(11,13,18,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.05);
  z-index:10;
}

a {
    text-decoration: none;
    color: inherit;
    padding:15px;
    }
    
.nav{
  width:min(1200px,92%);
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
}
    
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    gap: 24px;
    color: #cfcfcf;
    font-weight: 500;
}

.logo{
  font-weight:800;
  color:var(--accent);
  font-size:1.4rem;
}

input{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  outline:none;
  background:#1b2130;
  color:white;
}

.img-bagnols{
   width:100%;
  height:240px;
  object-fit:cover;
}


.tow-columns{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* 👈 égalité parfaite */
    border:none;
  gap:20px;
    height:100%;
}
.tow-columns-col{
  background:#161a22;
  padding:20px;
  
}

.three-columns{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* 👈 égalité parfaite */
  gap:20px;
}

.three-columns-col{
  background:#161a22;
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
}

.section-card{
  background:#161a22;
background: #161a22;
border-radius: 20px;
padding: 12px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}

.mailto{
    text-decoration: underline;
    color: inherit;
    padding:5px;
}

.search {
    background:white;
    margin-left:20px;
    color:black;
}



/* 📱 Responsive mobile */
@media (max-width: 900px){
  .three-columns{
    grid-template-columns:1fr;
  }
}

/* SECTION */
.section{
  width:min(1200px,92%);
  margin:40px auto;
}

.section h2{
  margin-bottom:20px;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

/* CARD */
.card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:.3s;
}

.card:hover{
  transform:translateY(-8px) scale(1.03);
}

.card img{
  width:100%;
  height:320px;
  object-fit:cover;
}


.info{
  padding:12px;
}

.badge{
  display:inline-block;
  padding:4px 10px;
  background:rgba(255,61,85,.15);
  color:var(--accent);
  border-radius:999px;
  font-size:.7rem;
}

/* FAVORITE */
.fav{
  position:absolute;
  top:10px;
  right:10px;
  font-size:20px;
  cursor:pointer;
}

.lienAllocine{
width: 100%;
background-color: white;
color: black;
text-align: center;
border-radius: 10px;
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.modal-content{
  background:var(--card);
  width:100%;
  max-width:900px;
  border-radius:20px;
  padding:20px;
  animation:pop .3s ease;
}

@keyframes pop{
  from{transform:scale(.9);opacity:0}
  to{transform:scale(1);opacity:1}
}

.cast{
  display:flex;
  gap:10px;
  overflow-x:auto;
  margin-top:15px;
}

.cast img{
  width:70px;
  border-radius:10px;
}

button{
  background:var(--accent);
  border:none;
  padding:10px 14px;
  border-radius:10px;
  color:white;
  cursor:pointer;
}

/* LOADING */
.skeleton{
  background:linear-gradient(90deg,#1a1f2b,#222838,#1a1f2b);
  background-size:200% 100%;
  animation:load 1.5s infinite;
}

@keyframes load{
  0%{background-position:0%}
  100%{background-position:200%}
}
    
    @media(max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .hero h1 {
        font-size: 2.8rem;
      }

      nav {
        display: none;
      }
    }
    
 .readmore-card{
  background:#161a22;
  border-radius:20px;
  padding:22px;
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}

.readmore-text{
  color:#cfcfcf;
  line-height:1.8;
  font-size:1.05rem;
}

.readmore-text-center{
color:#cfcfcf;
  line-height:1.8;
  font-size:1.05rem;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}
.readmore-full{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:all .6s ease;
}

.readmore-full.open{
  max-height:600px;
  opacity:1;
  margin-top:15px;
}

.readmore-btn{
  margin-top:15px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  padding:10px 14px;
  border-radius:10px;
  color:white;
  cursor:pointer;
  transition:.3s;
}

.readmore-btn:hover{
  border-color:#ff3d55;
  color:#ff3d55;
}
    
.film-card{
  background:#161a22;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:.3s;
  
}

.film-card:hover{
  transform:translateY(-8px);
}

.film-card img{
    object-fit: contain;
    width: 100%;
    height: 340px;
}
    
.film-content{
    padding:12px;
}    

.film-content-right{
    width:60%;
    padding:12px;
    flex:1;
}  

.film-content-left{
    width:30%;
    padding:12px;
    flex:1;
}  
    
.film-title{
   text-align: center;
}
    
.container-split{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.left{
  flex:1;
  text-align: center;
  height: 100%;
}

.right{
  flex:1;
  text-align: center;
  height: 100%;
}
    
    .actormodal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  justify-content:center;
  align-items:center;
  padding:50px;
  z-index:999;
        margin: 50px;
}

.modal-content-actor{
  background:#161a22;
  display:flex;
  gap:20px;
  padding:20px;
  border-radius:20px;
  max-width:1000px;
  width:100%;
  animation:fade .3s ease;
}

.actor-movies-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-top:15px;
}

.actor-movie-card{
  background:#1b2130;
  border-radius:12px;
  overflow:hidden;
}

.actor-movie-card img{
  height:160px;
  object-fit:cover;
}

@keyframes fade{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

.moviesFamille{
background: #161a22;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: .3s;
border-bottom:1px solid rgba(255,255,255,.05);
}

.moviesFamille .container{
border-bottom:1px solid rgba(255,255,255,.05);
padding-bottom:30px;
}