/* ================= BASE ================= */
body{
    background-image: url("img/fond-casting.png");
  background-size: cover;       /* adapte l'image à l'écran */
  background-position: center;  /* centre l'image */
  background-repeat: no-repeat; /* évite la répétition */
    font-family:Arial, Helvetica, sans-serif;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    margin:0;
    padding:10px;
}

.container{
    background:#111;
    padding:40px 30px;
    border-radius:10px;
    width:100%;
    max-width:400px;
    box-shadow:0 0 20px rgba(255,255,255,0.1);
}

h1{
    text-align:center;
    margin-bottom:10px;
}

p{
    text-align:center;
    margin-bottom:30px;
}

.input-group{
    margin-bottom:20px;
    display:flex;
    flex-direction:column;
}

label{
    margin-bottom:5px;
}

input{
    padding:10px;
    border:none;
    border-radius:5px;
    background:#222;
    color:white;
    width:100%;
    box-sizing:border-box;
}

input[type="file"]{
    padding:5px;
}

/* ================= BOUTON JOLI ================= */
button{
      padding: 0.8rem 1.5rem;
      background: linear-gradient(45deg, #6ca0a3, #12474d);
      border: none;
      border-radius: 30px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.3s;
       width: 100%;                  /* bouton prend toute la largeur du container */
  max-width: 500px;      
    }

    button:hover { opacity: 0.8; }

/* ================= RESPONSIVE ================= */
@media (max-width: 500px){
    .container{
        padding:30px 20px;
    }
    
    button{
        font-size:15px;
        padding:10px;
    }
}