/* ---------------------------------------------------------------------------
   Page de casting : formulaire et aperçu de la photo.

   Jusqu'ici reprise telle quelle du <style> produit en chaîne PHP dans
   casting.php : police Poppins propre à la page, couleurs codées en dur
   (#e60073, #1b1b1b, #2a2a2a…) sans aucun rapport avec les jetons du design
   system, et surtout AUCUNE règle sur le bouton d'envoi ni le champ fichier —
   les deux s'affichaient donc avec l'apparence par défaut du navigateur,
   contrastant durement avec le reste d'une page par ailleurs stylée. Reprise
   intégrale sur les jetons communs (palette.css, design-system.css).
   --------------------------------------------------------------------------- */

.container {
  max-width: 760px;
  margin: var(--e-8, 48px) auto;
  padding: var(--e-6, 32px) clamp(20px, 5vw, 48px);
  background: var(--fond-1);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
}

.container h1 {
  margin: 0 0 var(--e-5);
  color: var(--texte);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-2xl);
  text-align: center;
}

.container > p {
  color: var(--texte-doux);
  line-height: 1.7;
}

form { margin-top: var(--e-6); }

label {
  display: block;
  margin: var(--e-4) 0 var(--e-2);
  color: var(--rose-clair);
  font-weight: 600;
  font-size: var(--t-sm);
}
label:first-of-type { margin-top: 0; }

input,
select,
textarea {
  width: 100%;
  padding: 11px var(--e-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--fond-2);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  transition: border-color var(--transition), background var(--transition);
}

input::placeholder,
textarea::placeholder { color: var(--texte-faible); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rose-clair);
  background: var(--fond-3);
}

textarea { resize: vertical; min-height: 110px; font-family: inherit; }

/* Un <select> hérite du rendu natif du système pour son menu déroulant —
   impossible à styler entièrement sans un composant JS dédié — mais au moins
   le champ fermé reprend les mêmes fond, bordure et coins que ses voisins,
   plutôt que le blanc par défaut du navigateur. `appearance:none` retire
   aussi la flèche native : un chevron dessiné en CSS la remplace, sans quoi
   rien ne signale plus qu'il s'agit d'un menu déroulant. */
select {
  appearance: none;
  padding-right: var(--e-8, 40px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3A8AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-3, 12px) center;
  background-size: 18px;
}

/* Le bouton « Choisir un fichier » est partiellement natif (dépendant du
   navigateur/OS, hors de portée du CSS), mais le conteneur et le nom du
   fichier choisi suivent la charte plutôt que de rester en blanc brut. */
input[type="file"] {
  padding: var(--e-3);
  color: var(--texte-doux);
  font-size: var(--t-sm);
}

.photo-preview:not(:empty) {
  margin: var(--e-2) 0 var(--e-4);
  border-radius: var(--r-md);
  overflow: hidden;
}
.photo-preview img { display: block; width: 100%; max-height: 320px; object-fit: cover; }

.casting-envoi { text-align: center; margin-top: var(--e-6); }

.casting-envoi button {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 14px 32px;
  border: none;
  border-radius: var(--r-plein);
  background: var(--degrade-marque);
  color: #fff;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: var(--t-base);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.casting-envoi button:hover { background: var(--degrade-marque-survol); transform: translateY(-1px); }

.errors {
  background: rgba(232, 51, 109, 0.14);
  border: 1px solid rgba(232, 51, 109, 0.35);
  color: var(--texte);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  margin-bottom: var(--e-4);
}
.errors ul { margin: 0; padding-left: var(--e-5); }

.note {
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--bord);
  color: var(--texte-doux);
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 640px) {
  .container { margin: var(--e-5, 24px) auto; padding: var(--e-5, 24px) clamp(16px, 6vw, 28px); }
  .container h1 { font-size: var(--t-xl); }
  .casting-envoi button { width: 100%; }
}