/* ========================================================================= MUSLIMA WORK — LA PAGE DE CANDIDATURE Depuis le 21/10/2026, la page tient en deux pièces : un bandeau prune — l'annonce à gauche, la progression à droite — et une carte blanche qui porte les étapes, en ligne, puis les champs. Ces pièces sont communes avec « Publier une annonce » : elles vivent dans parcours.css. Les CHAMPS et les BOUTONS restent ceux de refonte.css — .soum-etape, .soum__grille, .field, .input, .soum-nav —, les mêmes que sur la page de dépôt. Ce fichier ne garde que ce qui appartient en propre à la candidature. Ce qui appartient en propre à la candidature : 1. le fil de retour ; 2. la note des candidatures hors formulaire ; 5. les dépôts de documents ; 6. la vérification ; 7. le consentement, l'envoi et la confirmation ; 8. les petits écrans ; 9. le mouvement réduit. Le numéro 4 — les champs — a disparu avec les règles qu'il portait. ========================================================================= */ /* ========================================================================= 0. JETONS ========================================================================= */ :root{ /* Le fond de la zone pleine largeur autour du header : il doit être le premier arrêt du dégradé du bandeau, sans quoi une couture paraît sous la barre. Voir --fond-offre dans header.css. */ --fond-candidature:#FAF5F9; --cd-prune:#3A1B2A; /* titres, libellés, texte important */ --cd-encre:#6B6069; /* texte secondaire */ --cd-doux:#8A7B85; /* mentions, aides, unités */ --cd-framboise:#C32371; --cd-filet:#F1E8EE; /* tous les filets internes */ --cd-bord:#EADFE6; /* le contour des champs */ --cd-ivoire:var(--mw-info-fond); /* le fond des dépôts (teintes.css) */ --cd-lilas:var(--mw-info-fond); /* la note de confidentialité */ } .cand-page{overflow-x:clip} /* ========================================================================= 1. LE FIL DE RETOUR ========================================================================= */ /* Le fil de retour, au-dessus de la carte : il dit d'où l'on vient sans disputer quoi que ce soit au titre. Il ne paraît qu'à partir de la tablette — sur téléphone, la barre du haut porte déjà sa flèche. */ .cand-fil{ display:none;align-items:center;gap:8px; margin:0 0 14px; font-size:14px;font-weight:500;color:var(--cd-encre); } .cand-fil svg{width:16px;height:16px;transition:transform .16s ease} @media (hover:hover){ .cand-fil:hover{color:var(--cd-prune)} } @media (hover:hover){ .cand-fil:hover svg{transform:translateX(-3px)} } .cand-fil:focus-visible{outline:2px solid var(--cd-framboise);outline-offset:3px;border-radius:6px} /* ========================================================================= 2. LA NOTE DE CONFIDENTIALITÉ Dans la colonne principale, au-dessus des champs qu'elle concerne — et non en carte séparée. Un bandeau lilas, un bouclier, deux lignes. ========================================================================= */ .cand-note{ display:flex;align-items:flex-start;gap:11px; margin:0 0 26px;padding:13px 16px; background:var(--cd-lilas); border:1px solid var(--mw-info-bord);border-radius:10px; font-size:13.5px;line-height:1.55;color:var(--mw-info-texte); } .cand-note__ico{flex:none;display:inline-flex;color:var(--mw-info-ico)} .cand-note__ico svg{width:17px;height:17px} /* La candidature qui se dépose chez le recruteur : pas d'étapes, pas de colonne. La note, deux liens, une mention — dans la carte, au même rembourrage que le formulaire. */ .cand-externe,.cand-fin{max-width:720px;margin-inline:auto} .cand-externe{padding:0} /* L'erreur d'un champ, sous le champ — jamais en haut de page. Le message du serveur, lui, passe par « .soum__erreur », en tête du panneau. */ .cand-err{ display:flex;align-items:flex-start;gap:7px; margin:0;font-size:13.5px;line-height:1.5;font-weight:500;color:#A3283F; } .cand-err::before{ content:"";flex:none;margin-top:.42em; width:6px;height:6px;border-radius:50%;background:#C2405C; } /* Ce qu'on dit quand il n'y a rien à dire : aucune pièce demandée, aucun document joint. Une phrase, au ton du reste. */ .cand-rien{margin:0;font-size:14.5px;line-height:1.6;color:var(--cd-encre)} /* ========================================================================= 3. LES ÉTAPES SONT DES FIELDSET La page de dépôt enveloppe ses étapes dans des
. Ici ce sont des
— et il y a une raison : c'est sur eux que la validation interroge ses champs, et c'est eux qu'on masque d'un seul attribut. Les remplacer par des
aurait coûté une réécriture de validerEtape() pour un gain nul. Mais un fieldset porte une bordure par défaut, et le navigateur encoche sa légende dedans : cela redessinait une carte autour de chaque étape, à l'intérieur de la carte — précisément ce qu'on voulait supprimer. On retire la bordure et on rend la légende à son rang de premier élément. `min-width:0` n'est pas décoratif : sans lui, un fieldset refuse de se réduire sous la largeur de son contenu, et un long nom de fichier dans la liste des dépôts ferait déborder la page sur téléphone. ========================================================================= */ fieldset.soum-etape{margin:0;padding:0;border:0;min-width:0} /* La légende n'est pas un élément de la grille : le « gap » de l'étape ne joue pas sous elle, et la description venait s'y coller (0 px). Elle reçoit donc elle-même les 12 px de la page de dépôt (« .soum-etape__tete »). */ fieldset.soum-etape > legend{ display:block;float:none;width:100%;padding:0;margin:0 0 12px; } /* ========================================================================= 5. LES DÉPÔTS DE DOCUMENTS Même matière que les champs : fond ivoire, contour prune très pâle, coins de douze. Le pointillé dit qu'on peut y déposer ; il devient plein dès qu'un document est là. Toute la zone est cliquable parce que c'est un