/* =========================================================================
   MUSLIMA WORK — LES PARCOURS PAR ÉTAPES (21/10/2026)

   « Postuler » et « Publier une annonce » tiennent en deux pièces : un
   bandeau prune, qui dit ce que la page propose et où l'on en est, puis une
   carte blanche qui porte les étapes, en ligne, et les champs.
   Composants : components/public/Parcours.tsx.

   Le conteneur est celui de l'en-tête (header.css, « .header .wrap ») : les
   bords du bandeau et de la carte tombent sous ceux de la plaque de verre.
   La largeur de lecture, elle, est tenue À L'INTÉRIEUR de la carte, par
   « .parc-corps » — un formulaire de 1300 px de large ne se lit pas.
   ========================================================================= */
.parc-sec > .wrap{
  width:calc(100% - (2 * var(--grille-marge,32px)));
  max-width:var(--grille-max,1400px);
  margin-inline:auto;
}
.parc-sec{padding-top:24px}

/* --- Le bandeau ----------------------------------------------------------
   La matière de « .esp-bandeau » (espace-recruteur.css) : deux lumières
   radiales sur le dégradé prune, un filet clair sur l'arête du haut, deux
   losanges coupés par le bord droit. */
.parc-bandeau{
  position:relative;overflow:hidden;isolation:isolate;
  padding:34px 44px 36px;
  border-radius:18px;
  color:#FFFBFD;
  background:
    radial-gradient(74% 120% at 2% 0%,rgba(233,150,190,.24) 0%,rgba(233,150,190,0) 58%),
    radial-gradient(60% 130% at 100% 40%,rgba(201,45,120,.34) 0%,rgba(201,45,120,0) 62%),
    linear-gradient(142deg,#54143A 0%,#40102A 46%,#2E0B1D 100%);
  box-shadow:0 1px 2px rgba(50,21,37,.06),0 24px 56px -34px rgba(58,12,36,.52);
}
.parc-bandeau::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    rgba(255,214,235,0) 0%,rgba(255,214,235,.34) 30%,
    rgba(255,255,255,.44) 52%,rgba(255,214,235,.28) 74%,rgba(255,214,235,0) 100%);
}
.parc-bandeau__los{
  position:absolute;top:50%;right:-110px;z-index:-1;
  width:300px;height:300px;
  translate:0 -50%;rotate:45deg;border-radius:36px;
  border:1px solid rgba(255,214,235,.14);
  background:linear-gradient(135deg,rgba(255,214,235,.07) 0%,rgba(255,214,235,0) 62%);
  pointer-events:none;
}
.parc-bandeau__los--2{
  top:auto;bottom:-120px;right:110px;translate:0 0;
  width:180px;height:180px;border-radius:24px;
  border-color:rgba(255,214,235,.10);background:none;
}
.parc-bandeau__in{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:48px;align-items:center;
}
.parc-bandeau__in--seul{grid-template-columns:minmax(0,1fr)}
.parc-bandeau__dire{min-width:0;display:grid;gap:10px;justify-items:start}
.parc-bandeau__sur{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,214,235,.74);
}
/* Le petit losange nacré devant le surtitre — celui de la synthèse du
   tableau de bord recruteur. Il scintille doucement, sauf mouvement réduit. */
.parc-bandeau__sur--eclat{display:inline-flex;align-items:center;gap:10px}
.parc-bandeau__losange{
  flex:none;width:9px;height:9px;rotate:45deg;border-radius:1px;
  background:radial-gradient(62% 62% at 33% 29%,#FFFFFF 0%,#FFEAF4 44%,#FFC6DE 100%);
  box-shadow:0 0 10px rgba(255,150,196,.46);
  animation:parc-eclat 4.2s ease-in-out infinite;
}
@keyframes parc-eclat{
  0%,100%{box-shadow:0 0 8px rgba(255,150,196,.40)}
  50%{box-shadow:0 0 14px rgba(255,236,246,.85)}
}
.parc-bandeau__t{
  margin:0;max-width:30ch;
  font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.14;letter-spacing:-.026em;
  color:#FFFBFD;text-wrap:balance;overflow-wrap:break-word;
}
/* Titre → description : 14 px (les 10 px du « gap », et 4 ici). */
.parc-bandeau__p{
  margin:4px 0 0;max-width:56ch;font-size:15px;line-height:1.6;color:rgba(255,246,250,.82);
}
/* Les faits du poste — l'entreprise, le lieu, le contrat, le mode de
   travail —, sur une ligne. Une valeur absente n'entre pas dans la liste. */
.parc-bandeau__faits{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
}
/* « flex:none » et non « min-width:0 » : un fait trop long pour la fin de
   ligne passe à la suivante au lieu d'être rogné ; s'il est plus long que
   la ligne entière, son texte s'enroule. */
.parc-bandeau__faits li{
  display:inline-flex;align-items:center;gap:7px;flex:none;max-width:100%;
  font-size:14px;line-height:1.4;color:rgba(255,246,250,.84);
}
.parc-bandeau__faits li:first-child{font-weight:600;color:#FFFBFD}
.parc-bandeau__faits svg{width:15px;height:15px;flex:none;color:rgba(255,198,222,.9)}

/* --- La progression ------------------------------------------------------
   Celle du tableau de bord (« .esp-avance ») : un aplat blanc à six pour
   cent, un filet rose, le rail, et l'éclat blanc qui traverse la partie
   remplie une fois — ici, à chaque changement d'étape. */
.parc-avance{
  display:grid;gap:12px;
  padding:20px;
  border:1px solid rgba(255,214,235,.16);border-radius:14px;
  background:rgba(255,255,255,.06);
}
.parc-avance__tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.parc-avance__l{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,214,235,.72);
}
.parc-avance__n{
  margin:0;font-size:17px;font-weight:600;letter-spacing:-.012em;
  color:#FFFBFD;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.parc-avance__rail{
  position:relative;display:block;height:6px;border-radius:3px;
  background:rgba(255,255,255,.14);
}
.parc-avance__plein{
  position:absolute;inset:0 auto 0 0;display:block;
  width:var(--part,0%);
  border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,#A81A5E 0%,#C92D78 52%,#F0A8CC 100%);
  box-shadow:0 0 14px -2px rgba(233,150,190,.48);
  transition:width 520ms cubic-bezier(.22,1,.36,1);
}
.parc-avance__eclat{
  position:absolute;inset:0;display:block;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  animation:parc-passe 1400ms cubic-bezier(.4,0,.2,1) 300ms 1 both;
}
@keyframes parc-passe{
  from{transform:translateX(-120%)}
  to{transform:translateX(220%)}
}
.parc-avance__los{
  position:absolute;top:50%;
  left:clamp(6px,var(--part,0%),calc(100% - 6px));
  width:12px;height:12px;
  translate:-50% -50%;rotate:45deg;border-radius:2px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 0 12px rgba(240,179,210,.72);
  transition:left 520ms cubic-bezier(.22,1,.36,1);
}
.parc-avance__nom{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,236,246,.78)}

/* --- La carte du formulaire ---------------------------------------------
   Blanche, aérée, une ombre presque nulle. Ce n'est plus une grille à deux
   colonnes : le sommaire vertical et sa gouttière sont partis, les champs
   reviennent au centre. */
.parc-carte{
  margin:20px 0 0;
  padding:40px 48px 48px;
  background:#fff;border:1px solid #F1E8ED;border-radius:18px;
  box-shadow:0 1px 2px rgba(50,21,37,.03),0 14px 34px -30px rgba(50,21,37,.2);
}
/* « .soum--depot » (refonte.css) pose la grille à deux colonnes du
   sommaire vertical et son rembourrage : dans la carte, on les retire. Les
   champs, eux, gardent toutes leurs règles. */
.parc-carte .soum.soum--depot{display:block;margin:0;padding:0}
.parc-corps,.parc-etapes{max-width:720px;margin-inline:auto}
/* Une étape est une grille (refonte.css) à colonne implicite : sans cette
   ligne, elle prend la largeur minimale de son contenu le plus large — les
   deux boutons de navigation côte à côte — et déborde de la carte sur un
   téléphone de 320 px. */
.parc-corps .soum-etape{grid-template-columns:minmax(0,1fr)}
/* Le titre de l'étape, au même poids sur les deux pages : « Postuler » le
   porte dans une <legend>, qui n'hérite pas du gras des <h2> de « Publier ».
   600, celui du titre du bandeau. */
.parc-corps .soum-etape__t{font-weight:600}

/* --- Les étapes, en ligne ------------------------------------------------
   Trois pastilles reliées d'un filet. L'étape en cours en bordeaux plein, les
   franchies cochées et cliquables, celles qui viennent en gris. */
.parc-etapes{margin-bottom:36px;scroll-margin-top:96px}
.parc-etapes ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
}
.parc-etapes__item{position:relative;min-width:0}
/* Le filet qui relie une pastille à la suivante, à mi-hauteur. */
.parc-etapes__item + .parc-etapes__item::before{
  content:"";position:absolute;top:17px;right:calc(50% + 26px);left:calc(-50% + 26px);
  height:2px;border-radius:1px;background:#EFE7EC;
  transition:background-color 300ms ease;
}
.parc-etapes__item.est-ici::before,
.parc-etapes__item.est-faite::before{background:linear-gradient(90deg,#C92D78,#8E1B55)}
/* Une seule colonne, bornée à la largeur de l'étape : un nom plus large que
   sa colonne déborde alors selon l'alignement — au centre, ou vers
   l'intérieur aux deux bouts —, et jamais hors de la carte. */
.parc-etapes__b{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:9px;width:100%;
  padding:0;border:0;background:none;font:inherit;cursor:pointer;
}
.parc-etapes__b:disabled{cursor:default}
.parc-etapes__n{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1.5px solid #E2D6DD;background:#fff;
  font-size:14px;font-weight:600;color:#9A8C94;font-variant-numeric:tabular-nums;
  transition:background-color 240ms ease,border-color 240ms ease,color 240ms ease,box-shadow 240ms ease;
}
.parc-etapes__n svg{width:14px;height:14px}
.parc-etapes__t{font-size:14px;font-weight:500;color:#7A6F78;text-align:center}
.est-ici .parc-etapes__n{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#9B1F5C 0%,#5A1339 100%);
  box-shadow:0 0 0 5px rgba(195,35,113,.10);
}
.est-ici .parc-etapes__t{color:#3A1B2A;font-weight:600}
.est-faite .parc-etapes__n{border-color:#E9C9DA;background:#FCF2F7;color:#8E1B55}
.est-faite .parc-etapes__t{color:#5F5158}
@media (hover:hover){
.parc-etapes__b:not(:disabled):hover .parc-etapes__t{color:#3A1B2A}
}
.parc-etapes__b:focus-visible{outline:none}
.parc-etapes__b:focus-visible .parc-etapes__n{outline:2px solid #C32371;outline-offset:3px}

/* Le message du serveur, au-dessus de l'étape. */
.parc-corps > .soum__erreur{margin:0 0 22px}

/* Cinq étapes : la colonne s'élargit un peu, sans quoi « Votre entreprise »
   et « Candidatures » se touchent. */
.parc-etapes--long{max-width:820px}
.parc-etapes--long .parc-etapes__t{font-size:13.5px}

/* =========================================================================
   PETITS ÉCRANS
   Le bandeau et la progression s'empilent ; les losanges rapetissent pour ne
   pas passer sous le texte. Les étapes se resserrent ; au-delà de trois, seul
   le nom de l'étape en cours reste écrit.
   ========================================================================= */
@media (max-width:900px){
  .parc-bandeau{padding:30px 32px}
  .parc-bandeau__in{gap:32px;grid-template-columns:minmax(0,1fr) minmax(240px,280px)}
  .parc-carte{padding:34px 32px 40px}
}

@media (max-width:768px){
  .parc-sec{padding-top:14px}
  .parc-bandeau{padding:24px 20px 22px;border-radius:16px}
  .parc-bandeau__in{grid-template-columns:minmax(0,1fr);gap:20px}
  .parc-bandeau__t{font-size:clamp(21px,5.8vw,25px);line-height:1.2}
  .parc-bandeau__p{font-size:14px}
  .parc-bandeau__faits{gap:6px 14px}
  .parc-bandeau__faits li{font-size:13px}
  .parc-bandeau__los{width:200px;height:200px;right:-90px;top:30%}
  .parc-bandeau__los--2{display:none}
  .parc-avance{padding:16px}
  .parc-carte{margin-top:14px;padding:24px 18px 30px;border-radius:16px}
  .parc-etapes{margin-bottom:26px}
  .parc-etapes__n{width:30px;height:30px;font-size:13px}
  .parc-etapes__item + .parc-etapes__item::before{top:14px;right:calc(50% + 22px);left:calc(-50% + 22px)}
  .parc-etapes__b{gap:7px}
  .parc-etapes__t,.parc-etapes--long .parc-etapes__t{font-size:12.5px}
  /* Le filet se raccourcit avec les pastilles serrées : à cinq sur un
     téléphone, il reste au moins quelques pixels entre deux pastilles. */
  .parc-etapes--long .parc-etapes__item + .parc-etapes__item::before{
    right:calc(50% + 19px);left:calc(-50% + 19px);
  }
  .parc-etapes--long .parc-etapes__item:not(.est-ici) .parc-etapes__t{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  /* Le nom de l'étape en cours peut déborder sa colonne étroite : il se
     cale sur le bord quand il est au premier ou au dernier rang. */
  .parc-etapes--long .est-ici .parc-etapes__t{white-space:nowrap}
  .parc-etapes--long .parc-etapes__item:first-child.est-ici .parc-etapes__b{justify-items:start}
  .parc-etapes--long .parc-etapes__item:last-child.est-ici .parc-etapes__b{justify-items:end}
}

@media (max-width:420px){
  .parc-carte{padding:22px 15px 26px}
  /* « Continuer vers les documents » remplit toute la ligne : il garde de
     l'air aux deux bouts, quitte à passer sur deux lignes. */
  .parc-corps .soum-nav .btn--primary{padding-inline:16px;white-space:normal;text-align:center}
  .parc-etapes__item:not(.est-ici) .parc-etapes__t{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}

/* =========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .parc-bandeau__losange{animation:none}
  .parc-avance__eclat{animation:none;display:none}
  .parc-avance__plein,.parc-avance__los,.parc-etapes__n,
  .parc-etapes__item::before{transition:none}
}

/* =========================================================================
   LE RAPPEL DE L'ESPACE RECRUTEUR
   « Publier une annonce » seulement : une ligne en tête de la carte du
   formulaire, au fond violet très clair des informations. Il ne masque rien
   et ne demande aucun clic — les champs suivent, juste dessous.
   ========================================================================= */
/* Une grille et non une ligne souple : sur téléphone, le pictogramme reste
   à côté du texte au lieu de partir seul sur sa ligne. */
.rec-rappel{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;
  max-width:820px;margin:0 auto 30px;padding:12px 16px;
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);border-radius:10px;
  font-size:14px;line-height:1.5;color:var(--mw-info-texte);
}
.rec-rappel__ico{flex:none;display:inline-flex;color:var(--mw-info-ico)}
.rec-rappel__ico svg{width:18px;height:18px}
.rec-rappel__p{min-width:0;margin:0}
.rec-rappel__p strong{font-weight:600;color:#3A1B2A}
.rec-rappel__lien{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-weight:600;color:var(--mw-avant-titre);
  text-decoration:underline;text-underline-offset:3px;
}
.rec-rappel__lien svg{width:15px;height:15px;transition:transform 160ms ease}
@media (hover:hover){
.rec-rappel__lien:hover{color:#5A1339}
}
@media (hover:hover){
.rec-rappel__lien:hover svg{transform:translateX(2px)}
}
.rec-rappel__lien:focus-visible{outline:2px solid #C32371;outline-offset:3px;border-radius:3px}
@media (max-width:768px){
  .rec-rappel{
    grid-template-columns:auto minmax(0,1fr);align-items:start;
    margin-bottom:22px;padding:12px 14px;font-size:13.5px;
  }
  .rec-rappel__ico{margin-top:1px}
  .rec-rappel__lien{grid-column:2;justify-self:start;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .rec-rappel__lien svg{transition:none}
  .rec-rappel__lien:hover svg{transform:none}
}