/* L'écran des candidatures.
 *
 * Sa propre feuille : composants.css tient les 400 lignes du §14, et la frise
 * du parcours les aurait franchies. Aucune couleur en dur ici — tout passe par
 * les jetons de tokens.css (§14).
 */

/* --- La frise du parcours --------------------------------------------------
 *
 * Où en est le dossier, et combien il reste. Une frise plutôt qu'une pastille
 * unique : « en attente de la décision de Naalé » ne dit pas ce qui reste à
 * faire, et c'est la première question devant un dossier ouvert depuis trois
 * mois.
 *
 * Elle défile horizontalement sur téléphone au lieu de se replier : replié, un
 * parcours de sept étapes devient une liste à puces qui ne se lit plus comme un
 * chemin.
 */
.frise {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pas) * 0.5);
  margin: 0;
  padding: 0 0 calc(var(--pas) * 0.5);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.frise__etape {
  display: flex;
  flex: 1 1 0;
  min-width: 5.5rem;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pas) * 0.4);
  text-align: center;
  position: relative;
}

/* Le trait qui relie deux étapes. En arrière-plan de la puce suivante, pour
 * qu'il ne déborde ni avant la première ni après la dernière. */
.frise__etape + .frise__etape::before {
  content: '';
  position: absolute;
  top: 0.7rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--bordure);
}

.frise__etape--faite + .frise__etape::before,
.frise__etape--actuelle::before {
  background: var(--primaire);
}

.frise__puce {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 2px solid var(--bordure);
  background: var(--carte);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.frise__etape--faite .frise__puce {
  border-color: var(--primaire);
  background: var(--primaire);
  color: var(--carte);
}

.frise__etape--actuelle .frise__puce {
  border-color: var(--primaire);
  color: var(--primaire);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 22%, transparent);
}

.frise__libelle {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--texte-doux);
}

.frise__etape--actuelle .frise__libelle {
  font-weight: 650;
  color: var(--encre);
}

/* --- Une rangée de boutons ------------------------------------------------
 *
 * Le pied d'une modale de dossier porte jusqu'à quatre actions : elles doivent
 * se replier sur téléphone plutôt que déborder.
 */
.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 0.6);
}

/* --- Un lien dans le corps d'une carte ------------------------------------ */
.lien {
  color: var(--primaire);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.lien:hover {
  text-decoration-thickness: 2px;
}

/* --- La répartition du passage d'année -------------------------------------
 *
 * Une colonne par classe d'arrivée, côte à côte, et les noms qui passent de
 * l'une à l'autre quand on les touche. Le glisser-déposer a été écarté : il ne
 * marche pas au doigt sans bibliothèque, et une prise ratée laisse sans savoir
 * si le nom a bougé (voir views/anciennes/repartition.js).
 *
 * `auto-fit` plutôt qu'un nombre de colonnes figé : un niveau peut avoir une
 * classe comme il peut en avoir trois, et l'écran n'a pas à le savoir.
 */
.repartition {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: calc(var(--pas) * 2);
}

.repartition__colonne {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 1.5);
  padding: calc(var(--pas) * 2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--carte-douce);
}

.repartition__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pas) * 1.5);
}

.repartition__titre {
  font-weight: 650;
  color: var(--encre);
}

/* Un nom déplaçable est un bouton : il doit s'annoncer comme tel au doigt
 * comme au clavier. Désactivé quand le niveau n'a qu'une classe — il n'y a
 * alors nulle part où aller, et un bouton qui ne répond pas est pire qu'un
 * libellé inerte. */
.repartition__nom {
  cursor: pointer;
  border-style: dashed;
}

.repartition__nom:disabled {
  cursor: default;
  border-style: solid;
  opacity: 0.75;
}

/* La frise d'un dossier qui n'est pas dans son parcours : une candidate
 * potentielle n'y est pas encore entrée, un dossier clos en est sorti. Aucun
 * cran n'est allumé — allumer le premier aurait fait croire qu'un dossier
 * archivé attendait un entretien. */
.frise--en-attente {
  opacity: 0.55;
}

/* --- Un message neutre ----------------------------------------------------
 *
 * Ni alerte ni succès : un état de fait. « Le dossier est rangé, il reste
 * consultable » n'est pas un avertissement, et le teinter en orange aurait
 * donné à chaque dossier archivé l'air d'un problème.
 */
.message--info {
  background: color-mix(in srgb, var(--primaire) 10%, var(--carte));
}

/* --- La barre d'avancement d'une ligne de candidature ---------------------
 *
 * Bornée. « Réduire la ligne d'une candidate de moitié, elle est trop large » :
 * elle tenait la largeur de la carte, et sur un écran large le nom, l'étape et
 * la phrase se cherchaient de part et d'autre. Elle dit un avancement, pas une
 * quantité — au-delà de quelques centimètres, elle n'ajoute rien.
 */
/* --- La ligne d'une candidate ----------------------------------------------
 *
 * « C'est trop large, il faut réduire pour pouvoir gérer beaucoup de
 * candidates. » Le nom, le détail, la barre et la phrase d'attente prenaient
 * chacun leur ligne. Les trois derniers tiennent maintenant côte à côte : deux
 * hauteurs au lieu de quatre, soit deux fois plus de dossiers par écran.
 */
.ligne--candidate {
  padding-top: calc(var(--pas) * 2);
  padding-bottom: calc(var(--pas) * 2);
}

.ligne-candidate__meta {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  margin-top: 3px;
  min-width: 0;
}

/* La phrase se tronque plutôt que de passer à la ligne : c'est un rappel, et
   elle se relit en entier dans le dossier ouvert. */
.ligne-candidate__texte {
  font-size: 0.78rem;
  color: var(--encre-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Elle dit un avancement, pas une quantité : au-delà de quelques centimètres
   elle n'ajoute rien, et elle poussait le nom et l'étape aux deux bords. */
.progression--mince {
  flex: 0 0 4.5rem;
  height: 4px;
}

/* --- Les titres du dossier -------------------------------------------------
 *
 * « Les titres en caractère gras doivent être surlignés légèrement en bleu sur
 * toute la ligne, afin de bien délimiter les espaces du dossier : il y a
 * beaucoup d'informations. » Une bande plutôt qu'un simple filet : un dossier
 * ouvert fait trois écrans de haut, et l'on y cherche « les entretiens » en
 * faisant défiler — un titre qui se distingue du texte par sa seule graisse se
 * rate à chaque passage.
 */
.titre-bloc {
  margin: 0;
  padding: calc(var(--pas) * 1.25) calc(var(--pas) * 2);
  background: var(--carte-douce);
  border-left: 3px solid var(--primaire);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
}

.titre-bloc svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* Les sous-titres — une section de la saisie, un entretien — portent la même
   bande en plus clair : la hiérarchie se lit sans changer de langage. */
.titre-bloc--fin {
  font-size: 0.86rem;
  padding: calc(var(--pas) * 0.75) calc(var(--pas) * 1.5);
  border-left-color: var(--bordure);
}

/* --- Un choix entre plusieurs issues --------------------------------------
 *
 * Trois boutons rouges dans un pied de modale, c'est une erreur de visée qui
 * attend. La liste, elle, nomme chaque issue et dit ce qu'elle entraîne avant
 * qu'on la coche.
 */
.choix {
  display: flex;
  gap: calc(var(--pas) * 2);
  align-items: flex-start;
  padding: calc(var(--pas) * 2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--carte);
  cursor: pointer;
}

.choix:hover {
  background: var(--survol);
}

.choix:has(.choix__case:checked) {
  border-color: var(--primaire);
  background: var(--carte-douce);
}

/* La suppression, dans la liste des issues. Elle n'archive pas, elle efface :
 * la seule de la liste qui ne se rattrape pas. Un liseré, pas un fond rouge —
 * la ligne reste lisible, et c'est sa phrase qui avertit, pas sa couleur. */
.choix--danger { border-left: 3px solid var(--danger); }
.choix--danger .choix__titre { color: var(--danger); }
.choix--danger:has(.choix__case:checked) { border-color: var(--danger); }

.choix__case {
  margin-top: 0.2rem;
  accent-color: var(--primaire);
}

.choix__corps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 0.5);
}

.choix__titre {
  font-weight: 650;
  color: var(--encre);
}

.choix__aide {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--texte-doux);
}

/* Un champ qui cesse d'être exigé : une candidate potentielle n'a pas encore
 * dit sa filière ni la classe visée. On l'atténue plutôt que de le masquer —
 * il reste remplissable quand on connaît la réponse. */
.champ--facultatif .champ__libelle::after {
  content: ' — facultatif';
  font-weight: 400;
  color: var(--texte-tenu);
}

/* === Un dossier qui tient dans l'écran ====================================
 *
 * « Réduis de moitié la fenêtre d'une remarque, c'est trop gros. Pareil pour
 * les entretiens. Tu peux laisser la taille de la police, juste réduis
 * l'espace et l'organisation. »
 *
 * C'est donc le blanc qui a été repris, pas les caractères : un dossier de
 * candidature porte un compte rendu d'entretien et cinq remarques, et on les
 * lit — les rendre plus petits les rendrait illisibles pour gagner trois
 * lignes. Les padding et les gouttières passent de quatre crans à deux, ce qui
 * divise en deux la hauteur d'une carte sans toucher à son contenu.
 *
 * Ces modificateurs ne servent qu'ici. Le reste de l'application respire au
 * rythme ordinaire, et c'est très bien : ailleurs, on ne lit pas huit blocs
 * empilés dans une modale.
 */

.pile--serree { gap: calc(var(--pas) * 2); }

.note--serree {
  gap: var(--pas);
  padding: calc(var(--pas) * 2);
}

.carte--serree { padding: calc(var(--pas) * 2.5); }

.actions-ligne--serree { gap: calc(var(--pas) * 0.4); }

/* Le titre de l'entretien et son état sur la même ligne. L'état occupait la
 * sienne, juste au-dessus de la date : deux lignes pour « Tenu, jeudi 15
 * octobre ». */
.entretien__titre {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pas) * 2);
  flex-wrap: wrap;
}

/* Date, mode, lieu et auteur se suivent au fil du texte plutôt que de prendre
 * un paragraphe chacun. Ils se replient d'eux-mêmes sur téléphone. */
.entretien__etat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 0.5) calc(var(--pas) * 2);
}

/* Le compte rendu ne se lit plus qu'ici — il était aussi recopié parmi les
 * remarques. Le filet le détache de la ligne d'état sans ajouter de cadre. */
.entretien__rendu {
  border-left: 2px solid var(--bordure);
  padding-left: calc(var(--pas) * 2);
  color: var(--texte-doux);
}

/* La valeur d'un champ, copiable au clic droit (`views/inscriptions/fiche.js`).
 * Le curseur le dit, et rien d'autre : un dossier compte vingt-cinq champs, et
 * vingt-cinq icônes auraient fait un sapin de Noël de ce qui est une lecture. */
.champ__valeur {
  overflow-wrap: anywhere;
  cursor: context-menu;
}