/* Demande Loïc 13/08 — habillage des sélecteurs de fichiers (shared/_file_picker
   + contrôleur Stimulus file-picker).

   Dessin repris de la zone « Mon CV » (.tp-cv-drop, talent_profile.css) et du
   bloc vidéo commun (.vu-zone, video_upload.css) : cadre pointillé, icône,
   titre, pastille d'action, ligne des formats. Rien de neuf, le même geste
   partout. Couleurs : jetons de design_tokens.css, aucun doré en dur. */

.fp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 18px 14px;
  border: 1.5px dashed var(--n-300);
  border-radius: var(--r-md, 12px);
  background: var(--n-50);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.fp:hover {
  border-color: var(--gold-400);
  background: var(--gold-50);
}

/* Le champ natif est le seul élément focusable de la zone, et il est
   transparent : sans cet anneau, la tabulation traverserait le formulaire sans
   qu'on voie jamais où l'on est. C'est le pendant obligatoire du masquage. */
.fp:focus-within {
  border-color: var(--gold-primary);
  background: var(--gold-50);
  box-shadow: 0 0 0 3px rgba(196, 165, 89, .22);
}

/* Un fichier survole la zone : elle doit dire qu'elle l'accepte. */
.fp.is-dragover {
  border-style: solid;
  border-color: var(--gold-primary);
  background: var(--gold-100);
}

.fp-icon { width: 22px; height: 22px; color: var(--gold-500); }
.fp-icon svg { width: 100%; height: 100%; display: block; }

.fp-title { font-size: 13px; font-weight: 600; color: var(--n-900); line-height: 1.3; }

.fp-cta {
  display: inline-block;
  margin-top: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  /* `--gold-fill-deep` et non `--gold-fill` : le dégradé clair finit sur un
     beige très pâle qui, sur une pastille étroite, occupe presque toute la
     largeur et laisse du blanc illisible dessus. Le dégradé profond tient le
     contraste quelle que soit la largeur du bouton. */
  background: var(--gold-fill-deep);
  color: var(--on-gold, #fff);
  text-shadow: var(--on-gold-shadow, 0 1px 2px rgba(60, 44, 10, .45));
  font-size: 12px;
  font-weight: 600;
}

.fp-drop { font-size: 11px; color: var(--n-500); }

/* Ce qui a été choisi, en français : le nom du fichier, ou le nombre. Le
   navigateur, lui, écrit « 3 files ». Masquée tant qu'il n'y a rien à dire,
   sans jamais quitter le DOM (une région aria-live insérée après coup n'est
   pas annoncée par les lecteurs d'écran). */
.fp-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-deep);
  word-break: break-all;
  line-height: 1.35;
}
.fp-state:empty { display: none; }

/* Les formats et la limite sont annoncés AVANT le choix, pas découverts dans un
   message d'erreur après l'envoi. */
.fp-hint { font-size: 10.5px; color: var(--n-500); }

/* Le champ reste un vrai input[type=file] : étalé sur toute la zone, opaque à
   zéro. Il encaisse donc le clic ET le dépôt, et garde sa place dans l'ordre de
   tabulation — ce que `display:none` (ou `hidden`) lui retirerait. */
.fp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Certains navigateurs donnent une hauteur intrinsèque au champ fichier ;
     `inset` seul ne suffit pas à le faire couvrir exactement la zone. */
  font-size: 0;
}

/* `.tp-dialog-hint` remonte de 8 px pour se coller sous un champ NATIF, qui
   traîne sa propre marge basse. La zone habillée n'en a pas : sans ce
   rattrapage, l'aide de la modale passait sous le cadre pointillé. */
.fp + .tp-dialog-hint { margin-top: 6px; }

/* Envoi parti : la zone se fige, comme .tp-cv-drop pendant l'analyse du CV. */
.fp.is-uploading {
  opacity: .6;
  pointer-events: none;
}

/* Utilitaire pour les zones DÉJÀ dessinées qu'on ne réécrit pas (onboarding
   recruteur, vignette « Ma photo » d'une annonce) : elles masquaient leur champ
   en `display:none` / `.hidden`, ce qui le sortait de l'ordre de tabulation.
   Le champ garde ici une taille non nulle et reste focusable ; sa zone hôte
   affiche l'anneau de focus via `:focus-within`. */
.fp-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Variante étroite : dans une modale à deux colonnes (bannière + logo de
   l'établissement), la zone pleine hauteur ferait déborder la boîte. */
.fp--compact { padding: 12px 10px; gap: 3px; }
.fp--compact .fp-icon { width: 18px; height: 18px; }
.fp--compact .fp-title { font-size: 12px; }
.fp--compact .fp-cta { font-size: 11px; padding: 5px 12px; }