/* --- Structure principale --- */
#coverstudio-banner {
  position: relative;
  overflow: hidden;
  background: #1c1c1c;
  min-height: 790px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Blobs animés --- */
#coverstudio-banner .coverstudio-blob {
  position: absolute;
  width: 1200px;
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(10px);
  z-index: 0;
  transform-origin: center;
}
#coverstudio-banner .blob-top-left { top: 0; left: 0; transform: translate(-600px, -500px); }
#coverstudio-banner .blob-bottom-right { bottom: 0; right: 0; transform: translate(600px, 500px);}


/* --- Carte centrale --- */
#coverstudio-banner .coverstudio-card {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  background: #111;
  border-radius: 32px;
  padding: 50px 30px 50px 50px;
  width: 85%;
  max-width: 1400px;
  box-shadow: 0 10px 60px rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  transition: transform 0.8s ease;
  cursor:pointer;
}
#coverstudio-banner .coverstudio-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 60px rgba(0,0,0,0.7);
}

#coverstudio-banner .coverstudio-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}
#coverstudio-banner .coverstudio-left,
#coverstudio-banner .coverstudio-right {
  position: relative;
  z-index: 10;
}
/* --- Partie gauche --- */
#coverstudio-banner .coverstudio-left h2 {font-size: 2.4rem; font-weight: 700; line-height: 1.7;}
#coverstudio-banner .coverstudio-logo {width:575px; height: auto; margin-top: 1.3rem !important; vertical-align: unset !important;}

#coverstudio-banner.coverstudio-title {
  font-size: 3.6rem;
  font-weight: 800;
}
#coverstudio-banner .coverstudio-left{text-align: left; z-index: 1;}
#coverstudio-banner .coverstudio-left p {margin:40px 0 70px 0; font-size: 1.1rem; line-height: 1.6; color: #FFFFFF; position: relative;}
#coverstudio-banner .coverstudio-left img.cursor{height:auto; position: absolute;}

/* --- Bouton --- */
#coverstudio-banner .btn {font-family: var(--font-title); font-size: 1.2rem; background: linear-gradient(75deg, #283484, #3D9FE3, #E6007D, #F5971A); color: #fff; padding: 30px 60px; border-radius: 10px; text-decoration: none;}
#coverstudio-banner .btn:hover {color: #FFFFFF !important;}

/* --- Partie droite --- */
#coverstudio-banner .coverstudio-right {  position: relative;  flex: 1;  text-align: right;  z-index: 1;}
#coverstudio-banner .coverstudio-car {  position: absolute;  inset: 0;  overflow: hidden;  z-index: 0;}
#coverstudio-banner .car {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  object-fit: cover;  transition: clip-path 1s ease-in-out, transform 1s ease-in-out;}
/* Voiture gauche (blanche) */
/* .car-grey {
  clip-path: polygon(0 0, 65% 0, 61.2% 100%, 0 100%);
} */
#coverstudio-banner .car-yellow {  clip-path: polygon(67% 0, 100% 0, 100% 100%, 56% 100%);}
/* .coverstudio-card:hover .car-grey {
  clip-path: polygon(0 0, 35% 0, 31.2% 100%, 0 100%);
} */
#coverstudio-banner .coverstudio-card:hover .car-yellow {
  clip-path: polygon(31.2% 0, 100% 0, 100% 100%, 27.2% 100%);
}

#coverstudio-banner .car-grey, #coverstudio-banner .car-yellow {
  will-change: clip-path;
}

/* Ligne de séparation diagonale */
#coverstudio-banner .coverstudio-divider {  position: absolute;  top: -10%;  left: 61%;  width: 8px;  height: 120%;  background: linear-gradient(180deg, var(--bleu-fonce), var(--bleu-clair), var(--rose), var(--orange));  transform: rotate(16deg);  transform-origin: center;  z-index: 3;  transition: all 1s ease-in-out;}
#coverstudio-banner .coverstudio-card:hover .coverstudio-divider {
  left: 31%;
  opacity: 0.5;
  width: 0;
}

/* Label en haut à droite */
#coverstudio-banner .coverstudio-label {position: absolute;  top: 0;  right: 0;  border: 1px solid #999; font-family: var(--font-title); border-radius: 10px; padding: 20px; text-align: right;  font-size:1.2rem; line-height:1.5; background-color: rgba(21, 21, 21, 0.21); backdrop-filter: blur(6px);}

/* Footer */
#coverstudio-banner .coverstudio-footer {position: absolute; bottom: 20px; right: 40px; font-size: 0.9rem; color: #999;}




/* --------------------------------------------------------------------------
   MEDIA QUERIES
   -------------------------------------------------------------------------- */

/* Desktops */
@media (max-width: 1400px) 
{

  #coverstudio-banner .coverstudio-banner {min-height:650px;}
  #coverstudio-banner .coverstudio-card {width: 95%;}

  #coverstudio-banner .coverstudio-left h2 {font-size: 1.8rem;}
  #coverstudio-banner .coverstudio-logo {width: 430px;	margin-top: 1rem !important;}
  #coverstudio-banner .coverstudio-left p {margin:30px 0 60px 0;	font-size: 1rem; line-height: 1.3;}
  #coverstudio-banner .coverstudio-left img.cursor {top: 50px;	left: 85px;}
  #coverstudio-banner .coverstudio-btn {font-size: 1rem; padding: 20px 40px;}

  #coverstudio-banner .coverstudio-label {padding: 15px; text-align: right; font-size: 1rem;}
  #coverstudio-banner .coverstudio-footer {font-size: .75rem;}
}

/* Tablettes */
@media(max-width: 1024px)
{

  #coverstudio-banner {min-height: 600px;}
  #coverstudio-banner .coverstudio-card {flex-direction: column;}

  #coverstudio-banner .car-yellow {clip-path: polygon(67% 0,100% 0,100% 100%,54% 100%);}
  #coverstudio-banner .coverstudio-left p {	margin: 50px 0 100px 0;	font-size: 1rem;	line-height: 1.3;}
  #coverstudio-banner .btn {font-size: 1rem;	padding: 20px 30px;}
  
  #coverstudio-banner .coverstudio-right {display: none;}
  #coverstudio-banner .coverstudio-footer {bottom: 0;	right: 20px;}
}

/* Mobiles */
@media (max-width: 600px)
{
  #coverstudio-banner .blob-top-left {top: 320px;	left: 450px;}
  #coverstudio-banner .blob-bottom-right {bottom: 332px; right: 400px;}

  #coverstudio-banner .coverstudio-card {padding:50px 30px;}
  #coverstudio-banner .coverstudio-logo {width: 300px;	margin-top: 0.5rem !important;}
  #coverstudio-banner .coverstudio-left h2 {font-size: 1.25rem;}  
  #coverstudio-banner .coverstudio-left p {margin: 30px 0 200px 0;}
  #coverstudio-banner .btn {font-size: 0.85rem;	padding: 15px 20px;	border-radius: 5px;}

  #coverstudio-banner .coverstudio-footer{display: none;}

}