/* Habillage du formulaire de candidature, posé sur une racine PORTABLE.

   ApplyForm::render() sert les deux modes — candidature à une offre et candidature
   spontanée — avec le même rendu PHP. Tant que ces règles vivaient sous
   « .rlcc-nw-single-full .rlcc-nw-apply__form », seule la fiche offre les voyait : le
   shortcode [rlcc_candidature] rendait le MÊME formulaire, nu. Elles sont donc rattachées
   ici au formulaire lui-même, qui porte « rlcc rlcc-apply-form » sur toute surface.

   La racine s'écrit « .rlcc.rlcc-apply-form » et non « .rlcc-apply-form » seule : deux
   classes pour les deux du sélecteur d'origine, le poids est conservé à l'identique et
   aucun gagnant ne change sur la fiche offre. Ce « .rlcc » n'est pas décoratif — c'est
   aussi la racine sur laquelle s'imprime le bloc de jetons de charte, sans quoi les
   var(--rlcc-color-*) d'ici peindraient sans couleur. Là où l'original n'avait qu'une
   classe de portée (.rlcc-nw-single-full .rlcc-cv-pick__…, … .rlcc-apply-form__required),
   la traduction n'en pose qu'une : « .rlcc-apply-form … ». Un modificateur du formulaire
   (--step1, --revealed, --parsing) se COLLE à la racine : il la qualifie, il n'en descend
   pas.

   La feuille est imprimée après newwork-account.css, qui habille le même formulaire sous
   :is(.rlcc-candidature, .rlcc-apply) à poids égal — c'est cet ordre, et lui seul, qui
   fait gagner les règles d'ici sur la page de candidature spontanée.

   L'ordre des règles est celui de leur feuille d'origine, et plusieurs ne tiennent que
   par lui : le bouton d'envoi rendu à sa largeur naturelle vient après le bloc « Envoi »,
   les masquages de l'étape 1 ferment la feuille. Ne pas réordonner.

   La mise en page à deux colonnes de la fiche — grille, colonnes, section, panneau de
   compte, confirmation d'envoi — est restée dans newwork-single.css : elle n'a pas de sens
   hors de la fiche.

   Cinq couleurs restent écrites en dur : les trois teintes de la zone de dépôt (filet
   pointillé, fond de survol, balayage d'attente), le fond du bandeau de pré-remplissage et
   le gris de repère des zones de saisie. Le contrat de charte n'a de jeton à AUCUNE de ces
   valeurs, et les confier au plus proche repeindrait le formulaire. */
.rlcc.rlcc-apply-form {
  /* LES DEUX FORMULAIRES DOIVENT SE LIRE PAREIL, et la fiche offre est la référence :
     c'est son dessin qui a été affiné. Or newwork-account.css ré-aligne ces deux
     variables du socle générique sur TOUTES les surfaces de candidature, ce que la fiche
     ne fait pas — même déclaration des deux côtés, valeur différente au bout. Le filet du
     bouton « choisir un fichier » passait ainsi de l'encre au beige entre les deux.
     Elles sont donc épinglées ICI, sur la racine du formulaire (deux classes, imprimée
     après newwork-account.css : elle gagne à poids égal), plutôt que retirées de
     newwork-account.css — ce ré-alignement peint réellement le reste de l'espace
     candidat, hors du formulaire, et le retirer y repeindrait bien plus que ce filet.
     Le nom du jeton ne peut pas être relu ici : `--rlcc-color-border` est justement celui
     qui est masqué, et se citer soi-même formerait un cycle. On reprend donc la source
     dont la charte le dérive — l'encre pour le filet, l'ardoise du socle pour le gris. */
  --rlcc-color-border: var(--rlcc-color-ink);
  --rlcc-color-text-muted: var(--rlcc-color-slate-text);
  /* TROISIÈME LARRON, apparu avec les listes cherchables : elles habillent désormais TOUS
     les choix du formulaire, et leur cadre lit ce jeton-là. Ré-aligné lui aussi par
     newwork-account.css sur les surfaces de candidature et pas sur la fiche, il séparait
     les deux formulaires dès qu'une liste s'affichait. Même remède, même raison : on
     reprend la source dont la charte le dérive, se citer soi-même formerait un cycle. */
  --rlcc-color-border-strong: var(--rlcc-color-slate-border);
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 24px;
  background: none;
  /* Sans effet sur la fiche, qui n'a jamais eu de filet ici : c'est newwork-account.css qui
     en pose un sur les surfaces de candidature, et le formulaire doit se lire pareil des
     deux côtés. Même remarque pour les autres « neutralisations » de cette feuille. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__establishment,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__identity,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__questions,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__cover,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__save-cv,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__consent,
/* Les titres des deux blocs de fin s'en vont avec eux : le premier écran ne demande
   qu'un CV, et « Documents » y annonçait un bloc que personne ne pouvait encore voir. */
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__section,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__actions { display: none; }

@keyframes rlccNwApplyReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__establishment,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__identity,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__questions,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__cover,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__save-cv,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__consent,
  .rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__actions {
    animation: rlccNwApplyReveal .35s ease both;
  }
}

.rlcc.rlcc-apply-form .rlcc-apply-form__resume { margin: 0; }
.rlcc.rlcc-apply-form .rlcc-apply-form__resume > .rlcc-label { display: none; }
.rlcc.rlcc-apply-form .rlcc-apply-form__upload { margin: 0; }

.rlcc.rlcc-apply-form .rlcc-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 228px;
  gap: var(--rlcc-space-2);
  padding: 40px 20px;
  text-align: center;
  color: var(--rlcc-color-text-muted);
  background-color: transparent;
  border: 1px dashed #b4b3af;
  border-radius: var(--rlcc-radius-control);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.rlcc.rlcc-apply-form .rlcc-dropzone:hover,
.rlcc.rlcc-apply-form .rlcc-dropzone.is-drag {
  border-color: var(--rlcc-color-accent-active);
  background-color: #f3ebe5;
}
/* Le glissé et l'erreur teintent le texte de la zone : le socle générique le fait déjà,
   mais à un poids que la feuille des surfaces de candidature dépasse. Reposé ici pour que
   les deux formulaires réagissent de la même façon. */
.rlcc.rlcc-apply-form .rlcc-dropzone.is-drag { color: var(--rlcc-color-primary); }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-error { border-color: var(--rlcc-color-danger); color: var(--rlcc-danger-strong); }

/* ── LA ZONE DE DÉPÔT S'EFFACE UNE FOIS LE FORMULAIRE OUVERT ───────────────────
   ET SEULEMENT LÀ. Tant que le formulaire est replié — premier écran de la fiche offre,
   avant tout dépôt — déposer son CV EST le geste qu'on attend : la grande zone est à sa
   place et doit le rester. Une fois le formulaire ouvert, un CV est déjà retenu deux
   lignes plus haut et cette zone n'est qu'une AUTRE voie vers la même chose : haute de
   228 px, elle réclamait toute l'attention et poussait la suite hors de l'écran. Elle
   prend alors la forme du champ « lettre de motivation » qu'elle précède — un bouton, le
   nom du fichier à côté. Rien n'est perdu : on peut toujours y déposer un fichier, et le
   cadre en pointillés le dit encore.

   `--revealed` et `--step1` s'excluent (cf. `revealSteps()` dans apply.js), et sans
   JavaScript aucun des deux n'est posé : la grande zone reste alors partout, ce qui est
   le bon repli puisqu'elle est le seul moyen de joindre un CV. */
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  gap: 16px;
  /* NI CADRE NI RETRAIT : c'est ce qui la distinguait encore du champ « lettre de
     motivation » juste dessous, où le bouton est posé à même la page. Le pourtour
     pointillé disait « déposez ici » — un message qui n'a plus lieu d'être une fois le CV
     choisi, et qui faisait de cette ligne un bloc à part au milieu de champs alignés.
     Le glisser-déposer, lui, fonctionne toujours. */
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
/* Le survol n'a plus de cadre à teinter : il ne doit pas non plus peindre un fond, il n'y
   a plus de zone, seulement un bouton — et lui s'inverse déjà. */
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone:hover { background: none; }
/* Tant que le formulaire est replié, la zone invite au dépôt ; ouverte, elle se nomme
   comme le bouton qu'elle est devenue. Les deux mots sont dans la page, un seul se voit. */
.rlcc.rlcc-apply-form .rlcc-dropzone__pick { display: none; }
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__invite { display: none; }
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__pick { display: inline; }
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__icon { display: none; }
/* Le libellé devient le bouton, à l'identique de `::file-selector-button` : c'est la même
   action, elle ne peut pas se présenter de deux façons dans le même formulaire. */
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__label {
  flex: none;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--rlcc-color-border);
  border-radius: var(--rlcc-radius-control);
  color: var(--rlcc-color-text);
  font-family: var(--rlcc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone:hover .rlcc-dropzone__label {
  background: var(--rlcc-color-ink);
  color: var(--rlcc-color-surface);
}
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__hint { margin: 0; }
.rlcc.rlcc-apply-form--revealed [data-rlcc-cv-pick] .rlcc-dropzone__status { margin: 0; }

.rlcc.rlcc-apply-form .rlcc-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file input[type="file"] {
  position: static;
  z-index: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.rlcc.rlcc-apply-form .rlcc-dropzone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  background-color: transparent;
  border: 1px solid var(--rlcc-color-accent-text);
  border-radius: 50%;
  color: var(--rlcc-color-accent-text);
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.rlcc.rlcc-apply-form .rlcc-dropzone__icon svg { display: none; }
.rlcc.rlcc-apply-form .rlcc-dropzone__icon::after { content: "\2191"; }
.rlcc.rlcc-apply-form .rlcc-dropzone:hover .rlcc-dropzone__icon,
.rlcc.rlcc-apply-form .rlcc-dropzone.is-drag .rlcc-dropzone__icon {
  background-color: var(--rlcc-color-accent-text);
  color: var(--rlcc-color-on-secondary);
}

.rlcc.rlcc-apply-form .rlcc-dropzone__label {
  display: block;
  margin: 0;
  color: var(--rlcc-color-text);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
}
.rlcc.rlcc-apply-form .rlcc-dropzone__hint {
  margin: 8px 0 0;
  color: var(--rlcc-color-ink-soft);
  font-size: 13px;
  font-weight: 300;
}
.rlcc.rlcc-apply-form .rlcc-dropzone__status {
  margin: 8px 0 0;
  color: var(--rlcc-color-ink-soft);
  font-size: 13px;
}
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__icon::after { content: "\2713"; }
.rlcc.rlcc-apply-form .rlcc-dropzone__file { position: relative; z-index: 3; }
.rlcc.rlcc-apply-form .rlcc-dropzone__remove { position: relative; z-index: 3; cursor: pointer; }

/* Une liste déroulante ouverte doit couvrir le dépôt de CV, que la maquette place
   APRÈS les champs (`order: 4`) alors qu'il les précède dans le document. Les blocs
   révélés portent une animation dont les images-clés touchent `transform` : chacun
   ouvre donc son propre contexte d'empilement, où le `z-index: 30` de la liste reste
   prisonnier, pendant que le nom du fichier et son bouton montent à 3 depuis le
   contexte racine et repassent devant. Le bloc qui porte la liste ouverte est élevé
   au-dessus, le temps de l'ouverture seulement. */
.rlcc.rlcc-apply-form .rlcc-field:has(.rlcc-combo.is-open),
.rlcc.rlcc-apply-form fieldset:has(.rlcc-combo.is-open) {
  position: relative;
  z-index: 6;
}

/* LE PANNEAU N'AVAIT AUCUN BORD, ET C'EST TOUT LE DÉFAUT. Il flotte bien au-dessus des
   champs suivants (`position: absolute` + le z-index ci-dessus) et son fond est opaque,
   mais sa SEULE séparation d'avec la page était `box-shadow: var(--rlcc-shadow-md)`
   (front.css) — un jeton que newwork-account.css met délibérément à `none` sur ces
   surfaces, où la géométrie est à plat, en même temps que `--rlcc-radius-control`. Un
   rectangle blanc sans filet, sans angle et sans ombre, sur une page blanche : on ne
   voyait plus où la liste commençait ni où elle finissait. Le champ qu'elle recouvre
   disparaît sans rien dire, et le contrôle qui dépasse sous elle — le
   « — Sélectionner — » de la question d'après, dont l'intitulé est masqué — semble
   appartenir au pied « Valider ». Le candidat ne sait plus où il en est.
   L'ombre n'est donc pas un ornement : elle dit qu'une couche est passée par-dessus le
   formulaire. Le filet la double parce qu'un site peut réclamer une charte sans ombre
   portée, et qu'une bordure, elle, ne dépend d'aucun jeton aplati.
   Même remède, même motif que `.rlcc-account .rlcc-combo__panel` (account.css) : ce sont
   les deux surfaces où les jetons d'ombre sont mis à plat, le formulaire est simplement
   resté en dehors du rattrapage. On ne pousse PAS le contenu à la place : cinq listes de
   ce genre se suivent sur la candidature spontanée, et le formulaire sauterait de trois
   cents pixels à chaque ouverture comme à chaque fermeture. */
.rlcc.rlcc-apply-form .rlcc-combo__panel {
  border: 1px solid var(--rlcc-color-border-strong);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .05),
    0 10px 24px rgba(0, 0, 0, .10);
}

/* ------------------------------------------------------------------ *
 * Parcours « Postuler » — reprise de la maquette Figma.
 * Trois rouges, chacun son rôle : var(--rlcc-color-accent-text) pour le
 * texte et les traits d'accent, var(--rlcc-color-primary) pour les aplats de bouton,
 * var(--rlcc-color-accent-active) pour les états actifs (survol de dépôt, case cochée).
 * ------------------------------------------------------------------ */

/* --- Étapes du formulaire : la maquette place le CV APRÈS les champs --- */
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__identity { order: 2; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__questions { order: 3; }
/* LE CV EST UN DOCUMENT, il se range avec eux. Il arrivait entre les champs et le bloc
   « Documents », donc nulle part : ni avec ce qu'on renseigne, ni avec ce qu'on joint.
   Il ouvre maintenant ce bloc, devant la lettre de motivation et les pièces annexes. */
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__resume { order: 5; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__cover { order: 5; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__documents { order: 6; }
/* En deux colonnes, la lettre et les documents ne sont plus des voisins de pile mais les
   cases d'un seul conteneur : c'est lui qui prend le rang des pièces jointes — après le CV,
   avant la case « Ajouter ce CV ». Les rangs de la lettre et des documents continuent de
   s'appliquer dedans, et y gardent le même ordre. */
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__docs-cols { order: 6; }
/* Dans la grille, en revanche, les rangs de la pile n'ont rien à dire : l'ordre du document
   y est déjà le bon. Laissés à 5 et 6, ils faisaient remonter au-dessus de la lettre ce qu'un
   site pose après les documents (rang 0). Le conteneur, lui, garde son rang. */
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__docs-cols > * { order: 0; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__save-cv { order: 7; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__consent { order: 8; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__actions { order: 9; }
/* UN TITRE VOYAGE AVEC CE QU'IL TITRE. Sans rang, il restait à `order: 0` — c'est-à-dire
   tout en haut de la pile, à deux écrans des pièces jointes qu'il annonce, et suivi de
   rien. Il prend donc le rang de son bloc : à rang égal, c'est l'ordre du document qui
   tranche, et le titre y précède déjà le sien. */
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__section--docs { order: 4; }
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__section--privacy { order: 8; }
.rlcc.rlcc-apply-form [data-rlcc-prefill-note],
.rlcc.rlcc-apply-form [data-rlcc-parse-wait] { order: 1; }

/* --- Bandeau « champs pré-remplis », et son jumeau d'attente --- */
.rlcc.rlcc-apply-form [data-rlcc-parse-wait],
.rlcc.rlcc-apply-form [data-rlcc-prefill-note] {
  margin: 0;
  padding: 14px 24px;
  background: #f0e3da;
  border: 0;
  border-left: 3px solid var(--rlcc-color-accent-text);
  border-radius: 0;
  box-shadow: none;
  color: var(--rlcc-color-text);
  font-family: var(--rlcc-font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

/* --- Libellés et champs --- */
.rlcc.rlcc-apply-form .rlcc-label {
  display: block;
  margin: 0 0 8px;
  color: var(--rlcc-color-muted-soft);
  font-family: var(--rlcc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-transform: uppercase;
}
.rlcc.rlcc-apply-form .rlcc-required { color: var(--rlcc-color-accent-text); }
.rlcc.rlcc-apply-form .rlcc-field { gap: 0; }
.rlcc.rlcc-apply-form .rlcc-input,
.rlcc.rlcc-apply-form .rlcc-select,
.rlcc.rlcc-apply-form .rlcc-textarea,
.rlcc.rlcc-apply-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 24px;
  background: var(--rlcc-color-surface);
  border: 1px solid var(--rlcc-color-border-faint);
  border-radius: var(--rlcc-radius-control);
  box-shadow: none;
  color: var(--rlcc-color-text);
  font-family: var(--rlcc-font-body);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: inherit;
  line-height: 24px;
}
/* Hauteur du socle générique : la feuille des surfaces de candidature monte les contrôles
   à 52 px, ce que la fiche ne fait pas. Le plancher de 50 px ci-dessus reste le vrai
   décideur ; c'est le même formulaire, il tient la même hauteur partout. */
.rlcc.rlcc-apply-form .rlcc-input,
.rlcc.rlcc-apply-form .rlcc-select { height: 44px; }
.rlcc.rlcc-apply-form textarea { min-height: 168px; resize: vertical; }
/* Attente de l'analyse, REPOSÉE ici : le `background` raccourci ci-dessus remet
   `background-image` à `none` et effacerait le balayage posé par la feuille générique.
   Les champs restent utilisables — le candidat qui préfère taper garde la main, et sa
   saisie cesse alors d'être remplaçable par le résultat de l'analyse. */
.rlcc.rlcc-apply-form.rlcc-apply-form--parsing .rlcc-apply-form__identity .rlcc-input,
.rlcc.rlcc-apply-form.rlcc-apply-form--parsing .rlcc-apply-form__identity .rlcc-select {
  background-image: linear-gradient(90deg, transparent 25%, #f4f2ee 50%, transparent 75%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: rlcc-sweep 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rlcc.rlcc-apply-form.rlcc-apply-form--parsing .rlcc-apply-form__identity .rlcc-input,
  .rlcc.rlcc-apply-form.rlcc-apply-form--parsing .rlcc-apply-form__identity .rlcc-select {
    animation: none;
  }
}
.rlcc.rlcc-apply-form .rlcc-input:focus,
.rlcc.rlcc-apply-form .rlcc-select:focus,
.rlcc.rlcc-apply-form textarea:focus {
  border-color: var(--rlcc-color-accent-text);
  box-shadow: none;
  outline: none;
}
.rlcc.rlcc-apply-form .rlcc-input::placeholder,
.rlcc.rlcc-apply-form textarea::placeholder { color: #a3a3a3; }
/* `__row` n'est plus PRODUITE par le gabarit de candidature : l'identité se range dans la
   grille depuis qu'elle se place au champ près. La classe reste publique dans front.css —
   un site peut l'employer dans son propre contenu — et son accord avec la charte du
   formulaire reste donc écrit ici, où il l'a toujours été. */
.rlcc.rlcc-apply-form .rlcc-apply-form__row { gap: 24px; }
.rlcc.rlcc-apply-form .rlcc-apply-form__identity,
.rlcc.rlcc-apply-form .rlcc-apply-form__questions { gap: 22px; }
.rlcc.rlcc-apply-form .rlcc-apply-form__identity > legend,
.rlcc.rlcc-apply-form .rlcc-apply-form__questions > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  /* La légende ne se voit pas, mais elle se lit à la synthèse vocale et elle EXISTE au
     calcul : lui laisser deux polices selon la surface est une divergence de plus à
     entretenir. Elle reprend donc partout ce que lui donne le socle générique. */
  font-family: inherit;
  font-size: var(--rlcc-text-lg);
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* --- Ligne « votre CV » une fois le fichier déposé --- */
.rlcc.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__resume > .rlcc-label,
.rlcc-apply-form.rlcc-apply-form--revealed .rlcc-apply-form__resume > .rlcc-label { display: block; }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file {
  min-height: 50px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 24px;
  color: var(--rlcc-color-text);
  background: var(--rlcc-color-surface);
  border: 1px solid var(--rlcc-color-border-faint);
  text-align: left;
}
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file:hover { background: var(--rlcc-color-surface); border-color: var(--rlcc-color-border-faint); }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__icon {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  background: none;
  color: var(--rlcc-color-ink-soft);
}
.rlcc.rlcc-apply-form .rlcc-dropzone__doc { display: none; }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__icon::after { content: none; }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__doc { display: block; }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__label,
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__hint { display: none; }
.rlcc.rlcc-apply-form .rlcc-dropzone.has-file .rlcc-dropzone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 16px;
  margin: 0;
  color: var(--rlcc-color-text);
  font-size: 16px;
  font-weight: 300;
}
.rlcc.rlcc-apply-form .rlcc-dropzone__file { font-weight: 300; }
.rlcc.rlcc-apply-form .rlcc-dropzone__remove {
  padding: 0;
  background: none;
  border: 0;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
}
.rlcc.rlcc-apply-form .rlcc-dropzone__remove:hover { text-decoration: underline; }

/* --- Sélecteurs de fichiers natifs (documents, lettre) --- */
.rlcc.rlcc-apply-form .rlcc-apply-form__file {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rlcc-color-ink-soft);
  font-family: var(--rlcc-font-body);
  font-size: 15px;
  font-weight: 300;
}
.rlcc.rlcc-apply-form .rlcc-apply-form__file::file-selector-button {
  margin-right: 16px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--rlcc-color-border);
  border-radius: var(--rlcc-radius-control);
  color: var(--rlcc-color-text);
  font-family: var(--rlcc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rlcc.rlcc-apply-form .rlcc-apply-form__file::file-selector-button:hover {
  background: var(--rlcc-color-ink);
  color: var(--rlcc-color-surface);
}
.rlcc.rlcc-apply-form .rlcc-help {
  margin: 10px 0 0;
  color: var(--rlcc-color-muted-soft);
  font-size: 13px;
  font-weight: 300;
}

/* --- Lettre et documents côte à côte (réglage « Disposition » du constructeur) ---
   Chacun ne porte qu'un bouton, un nom de fichier et une aide d'une ligne : étalés sur
   toute la largeur, ils laissaient la moitié de l'écran vide.

   LE REPLI SUIT LA PLACE DU CONTENEUR, PAS CELLE DE LA FENÊTRE. Le même formulaire vit en
   pleine page (candidature spontanée) et dans la colonne de gauche de la fiche offre, qui
   plafonne à 722 px sur l'écran le plus large : un point de rupture sur la fenêtre y
   gardait deux colonnes de 240 px, où « Aucun fichier choisi » devenait « A…i » et où le nom
   des documents enregistrés disparaissait. Les colonnes se comptent donc sur la largeur du
   conteneur (`auto-fit`) : deux si chacune a sa largeur minimale, une sinon.

   JAMAIS TROIS, ET CE N'EST PAS ACQUIS. Une piste vide ne s'efface que si rien ne la
   traverse : un contenu posé par un site autour des deux blocs prend la ligne entière
   (règle plus bas) et garde ouvertes toutes les pistes que la largeur permet — trois dès
   1188 px, lettre et documents sur deux tiers, un tiers vide à droite. La largeur minimale
   d'une piste ne descend donc jamais sous 40 % du conteneur : trois n'y tiennent pas.

   380 PX, ET C'EST UNE MESURE. Une ligne de « ou choisir dans mes documents » consomme
   257 px hors du nom (rembourrages, case, repère, date, « Voir ») : 380 laisse 123 px au
   nom, de quoi montrer un fichier courant en entier. Il faut alors 784 px au conteneur pour
   deux colonnes — la fiche offre reste en une, la candidature spontanée (944 px mesurés
   sur le staging : conteneur de 1024 px, 40 px de rembourrage) passe en deux.
   `min(100%, …)` empêche une colonne de déborder d'un conteneur plus étroit que le seuil ;
   alignées en haut, la lettre ne s'étire pas sur la hauteur de la liste des documents. La
   gouttière est l'écart de la pile : repliée, la grille se lit comme les deux blocs empilés
   qu'elle remplace. */
.rlcc.rlcc-apply-form .rlcc-apply-form__docs-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(380px, 40%)), 1fr));
  align-items: start;
  gap: 24px;
}
/* UN BLOC RESTÉ SEUL PREND LA LIGNE. Quand un site masque la lettre ou les documents — et
   surtout quand il pose autre chose à leur place, qui traverse la grille —, la piste du
   bloc absent ne s'efface plus et celui qui reste gardait une demi-colonne. Une seule piste
   dès que l'un des deux manque ; la règle pèse une classe de plus que la grille, elle
   l'emporte où qu'elle soit. */
.rlcc.rlcc-apply-form .rlcc-apply-form__docs-cols:not(:has(> .rlcc-apply-form__cover)),
.rlcc.rlcc-apply-form .rlcc-apply-form__docs-cols:not(:has(> .rlcc-apply-form__documents)) {
  grid-template-columns: minmax(0, 1fr);
}
/* Les deux régions masquées : le conteneur n'a plus rien à porter, et vide il consommerait
   encore un écart de la pile. */
.rlcc.rlcc-apply-form .rlcc-apply-form__docs-cols:not(:has(> *)) { display: none; }
/* Ce qu'un site glisse autour des deux blocs par le code personnalisé (avant la lettre,
   après les documents) atterrit dans la grille : il y prend la ligne entière plutôt qu'une
   case, qui repousserait la lettre dans la colonne de droite. */
.rlcc.rlcc-apply-form .rlcc-apply-form__docs-cols > :not(.rlcc-apply-form__cover):not(.rlcc-apply-form__documents) {
  grid-column: 1 / -1;
}

/* --- Consentements --- */
.rlcc.rlcc-apply-form .rlcc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--rlcc-color-ink-soft);
  font-family: var(--rlcc-font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.rlcc.rlcc-apply-form .rlcc-checkbox input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--rlcc-color-accent-active);
}
.rlcc.rlcc-apply-form .rlcc-checkbox a { color: var(--rlcc-color-accent-text); text-decoration: underline; }

/* Message d'erreur : toujours sous le champ, à la ligne. */
.rlcc.rlcc-apply-form .rlcc-field__error {
  width: 100%;
  margin: 6px 0 0;
  color: var(--rlcc-color-danger);
  font-family: var(--rlcc-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.rlcc.rlcc-apply-form .rlcc-field.has-error .rlcc-input,
.rlcc.rlcc-apply-form .rlcc-field.has-error .rlcc-select,
.rlcc.rlcc-apply-form .rlcc-field.has-error textarea {
  border-color: var(--rlcc-color-danger);
  box-shadow: none;
}

/* --- Date de naissance : trois listes, un seul champ --- */
/* Un calendrier natif vide s'ouvre TOUJOURS sur le mois courant, et aucun attribut
   standard ne le déplace : y atteindre 1974 coûtait des centaines de défilements. Trois
   listes mettent l'année à un geste. Aucune requête de média ici : `flex-wrap` suffit —
   les trois listes se replient d'elles-mêmes quand la place manque, sans nouveau palier
   à tenir. Les listes portent aussi .rlcc-select : elles héritent du costume des autres
   contrôles du formulaire, état d'erreur compris. */
.rlcc-apply-form .rlcc-dob {
  display: flex;
  flex-wrap: wrap;
  /* Plus de libellé au-dessus : les trois listes ont la même hauteur et s'alignent d'elles-mêmes. */
  align-items: stretch;
  gap: 12px;
}
.rlcc-apply-form .rlcc-dob__part {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 84px;
}
/* Le mois porte des noms, pas des chiffres : il lui faut plus de place que le jour. */
.rlcc-apply-form .rlcc-dob__part--m { flex: 2 1 148px; }
.rlcc-apply-form .rlcc-dob__part--a { flex: 1 1 104px; }
/* LE LIBELLÉ DE CHAQUE LISTE NE SE RÉPÈTE PLUS À L'ŒIL. « Jour », « Mois », « Année »
   étaient écrits deux fois : au-dessus de la liste, et dedans en texte indicatif. Le
   doublon coûtait une ligne de hauteur à chaque champ et, dans une colonne étroite,
   réduisait la liste à « J.. » — le mot complet étant juste au-dessus.
   Ils restent dits aux lecteurs d'écran : ce sont les `<label>` des trois listes, et sans
   eux le groupe annoncerait trois listes sans nom. */
.rlcc-apply-form .rlcc-dob__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rlcc-apply-form .rlcc-dob__select { width: 100%; }

/* LA DATE DE NAISSANCE TIENT DANS UN TIERS DE LIGNE. Ses trois listes réclamaient 360 px
   pour rester côte à côte : posée en tiers, elle les empilait, et la rangée entière prenait
   trois hauteurs pendant que ses voisines restaient en haut. Elles se resserrent donc
   quand leur colonne est étroite — leurs intitulés sont courts (« Jour », « Mois »,
   « Année »), c'est le cadre qui prenait la place, pas le texte.
   La mesure porte sur le CHAMP, pas sur l'écran : la même date est à l'aise sur une ligne
   entière et à l'étroit en tiers, sur le même écran. */
/* ── UN SEUL COSTUME POUR TOUS LES CONTRÔLES ───────────────────────────────────
   Les champs de saisie mesuraient 50 px, portaient un filet clair et retiraient leur texte
   de 24 px ; les listes 44 px, un filet plus soutenu et 12 px. Côte à côte dans la même
   grille, la différence sautait aux yeux — deux familles de champs pour un seul
   formulaire. Les listes prennent le costume des champs de saisie, qui sont les plus
   nombreux et donnent le ton. */
.rlcc.rlcc-apply-form .rlcc-combo__control,
.rlcc.rlcc-apply-form .rlcc-select {
  min-height: 50px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--rlcc-color-border-faint);
}
/* La liste native garde de la place à droite pour le chevron que le navigateur y dessine. */
.rlcc.rlcc-apply-form .rlcc-select { padding-right: 40px; }

/* LE CHEVRON RESTE À CÔTÉ DU MOT, PAS EN DESSOUS, ET À TOUTE LARGEUR. Le champ de saisie
   d'une liste cherchable réclame huit caractères au minimum, et son contrôle se replie dès
   que le chevron ne suit plus : il passait sous le texte et la liste doublait de hauteur —
   pas seulement dans un tiers de ligne, mais partout où une des trois listes descend sous
   cent quarante pixels, ce qui est leur ordinaire puisqu'elles se partagent un champ à
   trois. Ici le texte cède, jamais la disposition. */
.rlcc-apply-form .rlcc-dob .rlcc-combo__control { flex-wrap: nowrap; }
.rlcc-apply-form .rlcc-dob .rlcc-combo__input { flex: 1 1 0; min-width: 0; text-overflow: ellipsis; }

.rlcc-apply-form .rlcc-field:has(.rlcc-dob) { container-type: inline-size; }
@container (max-width: 400px) {
  /* Pas de retour à la ligne ici : à quelques dixièmes de pixel près, les trois listes
     débordaient d'un cheveu et la troisième basculait dessous — un empilement pour un
     arrondi. Elles se compriment plutôt qu'elles ne se replient (`min-width: 0` plus haut
     le leur permet), et l'ensemble tient dans tous les cas. */
  .rlcc-apply-form .rlcc-dob { gap: 6px; flex-wrap: nowrap; }
  .rlcc-apply-form .rlcc-dob__part   { flex: 1 1 50px; }
  .rlcc-apply-form .rlcc-dob__part--m { flex: 2 1 74px; }
  .rlcc-apply-form .rlcc-dob__part--a { flex: 1 1 58px; }
  /* Le costume des listes se resserre avec elles : sans quoi le seul rembourrage du
     contrôle reprendrait la place qu'on vient de gagner. */
  .rlcc-apply-form .rlcc-dob .rlcc-select { padding-left: 8px; padding-right: 22px; }

  /* Le chrome se resserre avec la colonne : rembourrages, écart et chevron rendent la
     place au mot. */
  .rlcc-apply-form .rlcc-dob .rlcc-combo__control { gap: 2px; padding-left: 6px; padding-right: 4px; }
  .rlcc-apply-form .rlcc-dob .rlcc-combo__toggle { width: 16px; }
}

/* --- Envoi --- */
.rlcc.rlcc-apply-form .rlcc-apply-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}
.rlcc.rlcc-apply-form .rlcc-apply-form__actions .rlcc-btn {
  background-color: var(--rlcc-color-primary);
  border-color: var(--rlcc-color-primary);
}
.rlcc.rlcc-apply-form .rlcc-apply-form__actions .rlcc-btn:hover {
  background-color: var(--rlcc-color-primary-hover);
  border-color: var(--rlcc-color-primary-hover);
}
.rlcc-apply-form .rlcc-apply-form__required {
  margin: 0;
  color: var(--rlcc-color-muted-soft);
  font-family: var(--rlcc-font-body);
  font-size: 13px;
  font-weight: 300;
}
@media (max-width: 600px) {
  .rlcc.rlcc-apply-form .rlcc-apply-form__row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rlcc.rlcc-apply-form .rlcc-apply-form__actions { flex-direction: column; align-items: stretch; }
  .rlcc-apply-form .rlcc-apply-form__required { text-align: center; }
}

/* Le socle générique étire le bouton d'envoi sur toute la largeur : la maquette
   le veut à sa largeur naturelle, avec la mention des champs obligatoires en
   vis-à-vis. Règle posée après le bloc « Envoi » pour battre front.css. */
.rlcc.rlcc-apply-form .rlcc-apply-form__actions .rlcc-btn { width: auto; }

/* --- Choix du CV : liste enregistrée « ou » dépôt d'un nouveau fichier --- */
.rlcc-apply-form .rlcc-cv-pick__saved { display: flex; flex-direction: column; gap: 12px; }
.rlcc-apply-form .rlcc-cv-pick__label {
  font-family: var(--rlcc-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--rlcc-color-text);
}
/* Un seul cadre pour une seule chose à comprendre : le repère de document, le CV choisi et
   son aperçu. C'est la RANGÉE qui porte désormais le cadre du champ — la liste, elle, est
   mise à nu (le socle générique lui donne fond, bordure et hauteur) et ne prend que la
   place restante. Le cadre réagit au focus clavier à la place de la liste, qui n'a plus de
   bordure pour le montrer. */
.rlcc-apply-form .rlcc-cv-pick__row {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 10px 24px;
  background: var(--rlcc-color-surface);
  border: 1px solid var(--rlcc-color-border-faint);
  border-radius: var(--rlcc-radius-control);
  transition: border-color 150ms ease;
}
.rlcc-apply-form .rlcc-cv-pick__row:focus-within { border-color: var(--rlcc-color-accent-text); }
.rlcc-apply-form .rlcc-cv-pick__doc {
  display: inline-flex;
  flex: none;
  margin-right: 18px;
  color: var(--rlcc-color-accent-text);
}
/* Le chevron est REPOSÉ ici, il ne peut pas être hérité : le bloc « Libellés et champs »
   ci-dessus donne aux listes du formulaire un `background` raccourci, qui remet
   `background-image` à `none`. Sans lui, une liste fondue dans le cadre se lit comme un
   texte figé — rien ne dirait qu'un second CV est atteignable. */
.rlcc-apply-form .rlcc-cv-pick__row .rlcc-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  padding-inline-end: 28px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23706F6F' 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 4px center;
  border: 0;
  border-radius: 0;
}
.rlcc-apply-form .rlcc-cv-pick__row .rlcc-select:focus { border: 0; }
/* Un compte qui n'a qu'un CV n'a rien à dérouler : le chevron promettait alors un choix
   qui n'existe pas. Le nom du fichier reprend toute la largeur du cadre. */
.rlcc-apply-form .rlcc-cv-pick__row--solo .rlcc-select {
  padding-inline-end: 0;
  background-image: none;
}
.rlcc-apply-form .rlcc-cv-pick__view {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: 20px;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-body);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
/* Le trait porte le mot, jamais le chevron : souligné lui aussi, il se lisait comme une
   rature en bout de ligne. */
.rlcc-apply-form .rlcc-cv-pick__view-label { text-decoration: underline; }
/* « Continuer » : le geste qui ouvre la suite quand le candidat garde son CV enregistré.
   Il n'a d'objet qu'à l'étape 1 — une fois le formulaire déplié, il ne mène plus nulle
   part —, et sans script l'étape 1 n'existe pas : rendu masqué, il ne se montre que
   lorsque la racine porte la classe que le script pose. */
.rlcc-apply-form .rlcc-cv-pick__go { display: none; }
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-cv-pick__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: 20px;
  /* Le cadre laisse 44 px entre ses rembourrages : un bouton de cette hauteur exacte
     toucherait les deux bords. Quatre pixels suffisent à le poser dedans. */
  min-height: 40px;
  padding-inline: 26px;
  white-space: nowrap;
}
.rlcc-apply-form .rlcc-cv-pick__chevron { flex: none; }
.rlcc-apply-form .rlcc-cv-pick__view:hover { color: var(--rlcc-color-accent-active); }

/* Un fichier déposé efface la voie du CV enregistré : le `hidden` posé par le script ne
   suffit pas à lui seul, le `display: flex` de ces deux blocs l'emporterait sur le
   `display: none` du navigateur. Les deux gardes suivent donc leurs règles de mise en
   page, sans quoi masquer ne masquerait rien. */
.rlcc-apply-form .rlcc-cv-pick__saved[hidden],
.rlcc-apply-form .rlcc-cv-pick__or[hidden] { display: none; }

/* « ou » : un mot, pas une décoration — il est lu, et ce sont ses filets qui sont
   décoratifs (pseudo-éléments, aucun nœud vide à annoncer). Il sépare les deux voies : le
   dépliant qui reprend un CV déjà déposé, et la zone qui en accepte un nouveau. */
.rlcc-apply-form .rlcc-cv-pick__or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  color: var(--rlcc-color-muted-soft);
  font-family: var(--rlcc-font-body);
  font-size: 14px;
  font-weight: 300;
  text-transform: lowercase;
}
.rlcc-apply-form .rlcc-cv-pick__or::before,
.rlcc-apply-form .rlcc-cv-pick__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--rlcc-color-border-faint);
}

/* Le dépliant s'efface dès qu'un fichier est déposé : un attribut `hidden` ne suffit pas
   partout dans cette feuille — plus d'une classe y déclare un `display` qui l'emporte —
   alors on le dit ici, une fois, pour les deux surfaces qui reprennent un document. */
.rlcc-apply-form .rlcc-doc-pick[hidden] { display: none; }
/* Même précaution pour le champ de dépôt et son aide, que le script efface quand un
   document enregistré est repris : tous deux déclarent un `display` plus haut. */
.rlcc.rlcc-apply-form .rlcc-apply-form__file[hidden],
.rlcc.rlcc-apply-form .rlcc-help[hidden] { display: none; }
/* L'étiquette de la liste de CV : le dépliant la nomme déjà en toutes lettres au-dessus.
   Elle reste pour les lecteurs d'écran, qui ont besoin d'un `<label>` sur ce contrôle. */
.rlcc-apply-form .rlcc-cv-pick__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Colonne étroite : le cadre ne peut plus tenir la ligne entière sans écraser le nom du
   fichier. L'aperçu passe alors sous la liste, du côté du texte — le repère de document
   garde sa colonne, et l'ensemble reste UN cadre. */
@media (max-width: 600px) {
  .rlcc-apply-form .rlcc-cv-pick__row { flex-wrap: wrap; padding: 14px 20px; }
  .rlcc-apply-form .rlcc-cv-pick__row .rlcc-select { flex: 1 1 160px; }
  .rlcc-apply-form .rlcc-cv-pick__view { margin: 8px 0 0 40px; }
  /* Le bouton prend la ligne entière plutôt que de se serrer contre l'aperçu : c'est
     l'action principale de l'écran, elle ne doit pas se lire comme un appendice. */
  .rlcc-apply-form.rlcc-apply-form--step1 .rlcc-cv-pick__go {
    flex: 1 0 100%;
    margin: 12px 0 0;
  }
}

/* « Ajouter ce CV à mes CV enregistrés » : posée contre la zone de dépôt, dont elle
   dépend. Elle n'apparaît qu'une fois un fichier déposé, et doit alors se VOIR — un CV
   déposé pour une seule offre ne rejoint pas la bibliothèque du candidat en silence. */
.rlcc-apply-form .rlcc-cv-pick__save { margin-top: 4px; }

/* Reprise d'un document de la bibliothèque, sous la zone de dépôt de la lettre et des
   pièces annexes. Bascule REPLIÉE au repos : le dépôt reste le geste principal, la reprise
   est l'issue de secours de qui a déjà tout déposé. Le marqueur natif du `<summary>` est
   remplacé par un chevron dessiné ici, faute de quoi chaque navigateur en met un autre —
   et Safari en met un que rien ne colore. */
.rlcc-apply-form .rlcc-doc-pick { margin-top: 10px; }
.rlcc-apply-form .rlcc-doc-pick__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-body);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  list-style: none;
}
.rlcc-apply-form .rlcc-doc-pick__toggle::-webkit-details-marker { display: none; }
.rlcc-apply-form .rlcc-doc-pick__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}
.rlcc-apply-form .rlcc-doc-pick[open] .rlcc-doc-pick__toggle::after { rotate: 225deg; translate: 0 2px; }
.rlcc-apply-form .rlcc-doc-pick__toggle:hover { color: var(--rlcc-color-accent-active); }
/* Le cadre est celui du CV : mêmes bord, angle et réaction au focus clavier. Les deux
   surfaces désignent la même chose — un document déjà déposé qui repartira — et se
   lisaient jusqu'ici comme deux composants sans parenté. La liste garde UN cadre plutôt
   qu'un cadre par ligne : trois documents feraient trois boîtes là où il n'y a qu'un
   choix à faire. */
/* Les filets entre lignes sont l'écart d'un pixel que la liste laisse voir de son
   propre fond, et non une bordure posée sur les voisins : la règle reste alors un
   sélecteur simple, que le contrôle de portabilité du formulaire sait sonder
   (cf. test-apply-form-portable.php, qui ne modélise pas les combinateurs). Le
   dernier item n'a pour la même raison rien à corriger — il n'y a pas de trait
   après lui, il n'y en a qu'ENTRE. */
.rlcc-apply-form .rlcc-doc-pick__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
  background: var(--rlcc-color-border-faint);
  border: 1px solid var(--rlcc-color-border-faint);
  border-radius: var(--rlcc-radius-control);
  transition: border-color 150ms ease;
}
.rlcc-apply-form .rlcc-doc-pick__list:focus-within { border-color: var(--rlcc-color-accent-text); }
/* Une ligne a la hauteur d'un champ, comme le cadre du CV : les documents s'y lisent à
   la même cadence que le CV juste au-dessus. Le filet ne sépare que des voisins. */
.rlcc-apply-form .rlcc-doc-pick__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 24px;
  background: var(--rlcc-color-surface);
}
.rlcc-apply-form .rlcc-doc-pick__choice {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--rlcc-font-body);
  font-size: 15px;
  font-weight: 400;
}
/* Le repère de document, à la place et à la couleur qu'il occupe dans le cadre du CV.
   La ligne « Aucun document enregistré » n'en porte pas : elle ne désigne aucun
   fichier, et un repère l'annoncerait comme s'il en existait un. */
.rlcc-apply-form .rlcc-doc-pick__doc {
  display: inline-flex;
  flex: none;
  margin-right: 8px;
  color: var(--rlcc-color-accent-text);
}
.rlcc-apply-form .rlcc-doc-pick__name {
  overflow: hidden;
  color: var(--rlcc-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rlcc-apply-form .rlcc-doc-pick__date {
  flex: none;
  color: var(--rlcc-color-muted-soft);
  font-size: 13px;
}
/* Aperçu : le mot porte le trait, le chevron jamais — souligné, il se lirait comme une
   rature en bout de ligne. C'est la règle déjà tenue par l'aperçu du CV. */
.rlcc-apply-form .rlcc-doc-pick__view {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-body);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.rlcc-apply-form .rlcc-doc-pick__view-label { text-decoration: underline; }
.rlcc-apply-form .rlcc-doc-pick__chevron { flex: none; }
.rlcc-apply-form .rlcc-doc-pick__view:hover { color: var(--rlcc-color-accent-active); }

/* --- Pièces jointes retenues -------------------------------------------------
   Le champ « Autres documents » cumule les sélections successives ; encore faut-il que
   le candidat VOIE ce qu'il a joint et puisse en retirer une. Cette liste-là n'a pas de
   look à elle : elle EMPRUNTE celui de la reprise juste en dessous. Les deux nomment des
   pièces du même dossier — les distinguer visuellement inventerait une différence qui
   n'existe pas, et un deuxième jeu de couleurs à tenir en accord avec la charte.
   Ne restent donc ici que deux corrections de comportement, sans une seule couleur. */
/* Le `display: flex` du cadre bat l'attribut `hidden` (même élément, poids supérieur à
   la règle du navigateur) : sans cette ligne, une liste vide resterait à l'écran en
   cadre creux d'un pixel. Le piège est connu du dépôt, il se désamorce à la main. */
.rlcc-apply-form .rlcc-doc-pick__list[hidden] { display: none; }
/* Le retrait est un BOUTON déguisé en lien d'aperçu : il lui faut le dégraissage que le
   navigateur applique à ses boutons, et un anneau de focus — seul repère du clavier.
   `currentColor` plutôt qu'un jeton : l'anneau suit le lien, quelle que soit la charte. */
.rlcc-apply-form .rlcc-docs-joined__remove {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.rlcc-apply-form .rlcc-docs-joined__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Étape 1 : seule la zone de dépôt est offerte. Ces masquages doivent rester les
   dernières règles de display du formulaire, sinon les mises en forme ci-dessus
   (display:flex sur les actions) les annulent. */
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__establishment,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__identity,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__questions,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__cover,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__documents,
/* Le conteneur des deux colonnes s'en va avec ce qu'il contient : resté affiché, vide, il
   consommerait un écart de la pile sous la zone de dépôt. */
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__docs-cols,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__save-cv,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__consent,
.rlcc-apply-form.rlcc-apply-form--step1 .rlcc-apply-form__actions { display: none; }

/* ── ÉTAPES ────────────────────────────────────────────────────────────────────
   LE TITRE DE SECTION REDEVIENT VISIBLE. Les `legend` du formulaire sont masqués
   à l'œil depuis toujours (accessibles aux seuls lecteurs d'écran) : les deux
   blocs étaient figés, leurs titres n'apprenaient rien. Maintenant que le
   constructeur les nomme, ils portent l'information — c'est la maquette validée
   en recette. La règle vient APRÈS le masquage historique, à spécificité égale :
   c'est l'ordre qui tranche, et rien n'est réécrit ailleurs. */
.rlcc.rlcc-apply-form .rlcc-apply-form__step > legend {
  position: static;
  /* PLEINE LARGEUR, ET IL FAUT LE DEMANDER : un `legend` se dimensionne sur son texte même
     en bloc, si bien que son filet s'arrêtait au dernier caractère — un trait court sous le
     mot, quand celui des blocs de fin traversait la page. Les deux sortes de titre se
     lisent désormais pareil. */
  width: 100%;
  height: auto;
  margin: 0 0 24px;
  padding: 0;
  overflow: hidden;
  clip: auto;
  clip-path: none;
  white-space: normal;
  display: block;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Une étape sans titre n'en réserve pas la place : c'est le repli, quand aucune
   étape n'est configurée. */
.rlcc.rlcc-apply-form .rlcc-apply-form__step > legend:empty { display: none; }

/* La grille des champs configurables : même trame de six colonnes que
   « Mes coordonnées », pour qu'une largeur réglée une fois vaille des deux côtés. */
.rlcc.rlcc-apply-form .rlcc-apply-form__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px 24px;
}
.rlcc.rlcc-apply-form .rlcc-apply-form__grid > .rlcc-field { margin-bottom: 0; grid-column: 1 / -1; }
.rlcc.rlcc-apply-form .rlcc-apply-form__grid > .rlcc-field--half  { grid-column: span 3; }
.rlcc.rlcc-apply-form .rlcc-apply-form__grid > .rlcc-field--third { grid-column: span 2; }

/* ── BARRE DE PROGRESSION ──────────────────────────────────────────────────────
   Elle dit où l'on en est AVANT de faire remplir : un formulaire qui s'annonce en
   trois écrans se commence, un formulaire muet s'abandonne au deuxième. */
.rlcc.rlcc-apply-form .rlcc-apply-steps { margin: 0 0 36px; }
.rlcc.rlcc-apply-form .rlcc-apply-steps__count {
  margin: 0 0 16px;
  color: var(--rlcc-color-text-muted);
  font-family: var(--rlcc-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
/* Le rang courant seul prend l'accent : c'est le chiffre qui bouge, le total ne fait que
   donner la mesure. Sans cela, « 1/3 » se lisait comme un bloc et l'avancement ne se
   voyait pas. */
.rlcc.rlcc-apply-form .rlcc-apply-steps__count [data-rlcc-step-current] {
  color: var(--rlcc-color-accent-text);
  font-size: 15px;
}
.rlcc.rlcc-apply-form .rlcc-apply-steps__list {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── LE RAIL D'UNE ÉTAPE ───────────────────────────────────────────────────────
   Une étape, une colonne : un rail fin et, dessous, le nom de ce qu'elle demande.
   Le rail au repos est un trait creux ; il se REMPLIT de la gauche vers la droite
   quand on atteint son étape, et le mouvement seul dit qu'on a avancé. C'est le
   seul geste animé de la barre — tout le reste s'y tait. */
.rlcc.rlcc-apply-form .rlcc-apply-steps__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 10px;
  background: none;
}
.rlcc.rlcc-apply-form .rlcc-apply-steps__item::before,
.rlcc.rlcc-apply-form .rlcc-apply-steps__item::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 100%;
}
.rlcc.rlcc-apply-form .rlcc-apply-steps__item::before { background: var(--rlcc-color-border-faint); }
.rlcc.rlcc-apply-form .rlcc-apply-steps__item::after {
  background: var(--rlcc-color-accent-text);
  transform: scaleX(0);
  transform-origin: left center;
  /* Un départ franc puis un arrêt long : l'avancement se voit sans se faire attendre. */
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
/* Franchie ou courante, une étape atteinte remplit son rail : les trois rails forment
   une jauge d'un seul tenant, qui dit d'un regard la part du chemin faite. Éteindre les
   étapes passées cassait ce fil, et la troisième vide se confondait avec la première. Ce
   qui distingue l'étape OUVERTE, c'est son nom — le seul à porter l'accent. */
.rlcc.rlcc-apply-form .rlcc-apply-steps__item.is-done::after,
.rlcc.rlcc-apply-form .rlcc-apply-steps__item.is-current::after { transform: scaleX(1); }

/* ── LE NOM DE L'ÉTAPE ─────────────────────────────────────────────────────────
   Trois états, trois voix : à venir en gris, franchie en encre, courante à l'accent.
   La graisse ne change pas d'un état à l'autre — un mot qui grossit décalerait ses
   voisins à chaque passage d'étape. */
.rlcc.rlcc-apply-form .rlcc-apply-steps__label {
  display: block;
  margin-top: 10px;
  color: var(--rlcc-color-text-muted);
  font-family: var(--rlcc-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color .3s ease;
}
.rlcc.rlcc-apply-form .rlcc-apply-steps__item.is-done .rlcc-apply-steps__label { color: var(--rlcc-color-ink); }
.rlcc.rlcc-apply-form .rlcc-apply-steps__item.is-current .rlcc-apply-steps__label { color: var(--rlcc-color-accent-text); }

/* À L'ÉTROIT, LA JAUGE SUFFIT. Trois titres en capitales dans trois colonnes de cent
   pixels se touchaient et ne se lisaient plus. Ils ne manquent pas : le titre de l'étape
   ouverte est répété en intertitre juste dessous, en toutes lettres. Ils restent dits aux
   lecteurs d'écran, pour qui la barre annoncerait sinon trois étapes sans nom. */
@media (max-width: 600px) {
  .rlcc.rlcc-apply-form .rlcc-apply-steps__list { gap: 8px; }
  .rlcc.rlcc-apply-form .rlcc-apply-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Le mouvement est un confort, jamais le message : quand il est refusé, le rail est
   simplement là, plein ou creux. */
@media (prefers-reduced-motion: reduce) {
  .rlcc.rlcc-apply-form .rlcc-apply-steps__item::after,
  .rlcc.rlcc-apply-form .rlcc-apply-steps__label { transition: none; }
}

.rlcc.rlcc-apply-form .rlcc-apply-steps__nav { display: flex; gap: 12px; margin-top: 28px; }
.rlcc.rlcc-apply-form .rlcc-apply-steps__nav[hidden] { display: none; }

@media (max-width: 600px) {
  .rlcc.rlcc-apply-form .rlcc-apply-form__grid { grid-template-columns: 1fr; }
  .rlcc.rlcc-apply-form .rlcc-apply-form__grid > .rlcc-field--half,
  .rlcc.rlcc-apply-form .rlcc-apply-form__grid > .rlcc-field--third { grid-column: 1 / -1; }
}

/* Titre des deux blocs de fin (documents, protection des données) : même voix que
   les intertitres d'étape, dont ils sont les voisins immédiats. */
.rlcc.rlcc-apply-form .rlcc-apply-form__section {
  margin: 32px 0 20px;
  padding: 0;
  overflow: hidden;
  color: var(--rlcc-color-accent-text);
  font-family: var(--rlcc-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* LE FILET SE MET À CÔTÉ DU TITRE, PAS DESSOUS. Un trait pleine largeur sous chaque
   intertitre découpait la page en tiroirs et rendait criants les blocs qu'on n'avait pas
   encore ouverts : deux lignes vides l'une sur l'autre. À côté du mot, séparé de lui d'un
   souffle, il prolonge le titre au lieu de le souligner — et un bloc encore vide ne se
   voit plus.

   INLINE-BLOCK ET MARGE NÉGATIVE plutôt que `display: flex` : `<legend>` a longtemps
   ignoré les dispositions flexibles selon les navigateurs, et l'un des deux titres EST un
   legend. Le pseudo-élément réclame toute la largeur, la rend aussitôt par sa marge — il
   ne pousse donc rien — et `overflow` coupe ce qui dépasse au bord du bloc. */
.rlcc.rlcc-apply-form .rlcc-apply-form__step > legend::after,
.rlcc.rlcc-apply-form .rlcc-apply-form__section::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  margin-left: 12px;
  margin-right: -100%;
  vertical-align: middle;
  background: var(--rlcc-color-border);
}