/* ==========================================================================
   MUSLIMA WORK — Fiche d'annonce (route offre/<slug>/)
   Mobile-first. Prolonge les tokens de style.css ; tout est préfixé .of-
   pour ne jamais interférer avec la page d'accueil.
   1. Tokens & coquille   2. En-têtes      3. Résumé de l'offre
   4. Grille deux colonnes  5. Carte contenu  6. Carte L'essentiel
   7. Autres opportunités   8. Barre mobile   9. Desktop
   ========================================================================== */

/* 1. TOKENS & COQUILLE ---------------------------------------------------- */
:root{
  --of-rose:#FDF7FA;                                   /* rose poudré, très léger */
  --of-rose-2:#FCF4F8;
  --of-r:20px;                                         /* rayon des grandes cartes */
  --of-sh:0 1px 2px rgba(50,23,42,.045);               /* ombre presque imperceptible */
  --of-sh-hover:0 2px 4px rgba(50,23,42,.05),0 10px 24px rgba(50,23,42,.05);
  --of-side:340px;
  --of-or:#C2933F;                                     /* coche rose-or */
}
/* Plus de rembourrage sous la page pour la barre « Postuler » : il laissait
   une bande blanche de 76 px sous le pied prune, coiffée du filet de la
   barre — le « vide et la bordure » vus sur iPhone (Safari, Instagram).
   La barre s'efface désormais dès que le pied entre à l'écran (offre.js) :
   elle ne recouvre rien, et le pied descend jusqu'au bas. */
.page-offre{background:var(--bg-white)}

/* Le conteneur de la fiche est celui de l'en-tête (header.css, « .header
   .wrap ») : mêmes bords à gauche et à droite, même marge qui se resserre
   sous 920 px. La largeur de lecture, elle, reste tenue par les blocs de
   texte — « .of-blk__c » s'arrête à 70 caractères. */
.of-shell{
  width:calc(100% - (2 * var(--grille-marge,32px)));
  max-width:var(--grille-max,1400px);
  margin-inline:auto;
}

.of-card{
  background:var(--bg-white);border:1px solid var(--line);
  border-radius:var(--of-r);box-shadow:var(--of-sh);
}

/* 2. EN-TÊTES ------------------------------------------------------------- */
.page-offre .header{display:none}                      /* vrai header : desktop seulement */

.ofbar{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.ofbar__in{
  display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:10px;
  width:min(100% - 32px,1180px);margin-inline:auto;height:58px;
}
.ofbar__back,.ofbar__share{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line-2);border-radius:4px;
  background:var(--bg-white);color:var(--plum);cursor:pointer;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
.ofbar__back:hover,.ofbar__share:hover{border-color:var(--plum);background:var(--bg-tint)}
}
.ofbar__logo{
  justify-self:center;display:inline-flex;align-items:center;padding:8px 12px;
  border-radius:4px;background:var(--grad-rose);box-shadow:0 3px 10px rgba(146,30,86,.18);
}
.ofbar__logo img{height:14px;width:auto}
.ofbar__share{position:relative;justify-self:end}
.ofbar__ok,.of-share__ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0;color:#fff;transition:opacity 160ms var(--ease)}
.is-ok{background:var(--grad-rose)!important;border-color:transparent!important;color:#fff!important}
.is-ok > svg:first-child{opacity:0}
.is-ok .ofbar__ok,.is-ok .of-share__ok{opacity:1}

.ofbar__toast{
  position:fixed;left:50%;bottom:96px;z-index:220;
  padding:11px 18px;border-radius:var(--r-pill);
  background:var(--plum);color:#fff;font-size:13.5px;font-weight:500;
  opacity:0;pointer-events:none;transform:translate(-50%,12px);
  transition:opacity 220ms var(--ease),transform 220ms var(--ease-out);
}
.ofbar__toast.is-on{opacity:1;transform:translate(-50%,0)}

/* lien de retour discret, sous le vrai header */
.of-crumb{display:none;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2)}
.of-crumb svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.of-crumb:hover{color:var(--plum)}
}
@media (hover:hover){
.of-crumb:hover svg{transform:translateX(-3px)}
}

/* 3. RÉSUMÉ DE L'OFFRE ---------------------------------------------------- */
.of-top{
  padding:20px 0 26px;
  background:linear-gradient(180deg,var(--of-rose) 0%,var(--of-rose-2) 58%,var(--bg-white) 100%);
}
.of-hero{position:relative;display:grid;overflow:hidden}
.of-hero__l{padding:24px 20px}
.of-sum__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.of-tag{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:4px;
  background:var(--rose-pale);border:1px solid #F6DCE9;color:var(--rose);
  font-size:12.5px;line-height:1;font-weight:600;letter-spacing:-.005em;
}
.of-sum__t{margin-top:20px;font-size:clamp(24px,5.6vw,34px);line-height:1.18;letter-spacing:-.028em;color:var(--plum);text-wrap:balance}
.of-sum__co{margin-top:12px;font-size:16px;line-height:1.4;font-weight:600;color:var(--ink-2)}

.of-facts{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:24px}
.of-facts li{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.of-facts li > span{display:inline-flex;flex:none;color:var(--rose)}
.of-facts svg{width:16px;height:16px}
.of-facts .dept{color:var(--ink-3)}

/* repère « Hijab accepté » : même hauteur que « Offre d'emploi », sans fond */
.of-tag--hijab{                              /* même framboise que « Nouveau » */
  gap:6px;border:0;color:#fff;
  background:linear-gradient(110deg,#951753 0%,#B22065 52%,#C92D78 100%);
  letter-spacing:.005em;box-shadow:none;
}
.of-tag__ck{display:inline-flex;flex:none;color:#fff}

/* colonne d'action : le bouton de candidature, rien d'autre */
.of-hero__act:empty{display:none}
.of-hero__act{padding:0 20px 24px}
.of-hero__cta{width:100%}
.of-back{margin-top:22px}

.of-share{
  display:none;position:absolute;top:18px;right:18px;
  width:38px;height:38px;place-items:center;
  border:1px solid var(--line-2);border-radius:4px;background:var(--bg-white);color:var(--plum);
  cursor:pointer;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
.of-share:hover{border-color:var(--plum);background:var(--bg-tint)}
}

/* 4. GRILLE DEUX COLONNES ------------------------------------------------- */
.of-body{padding:22px 0 40px}
.of-grid{display:grid;gap:16px}

/* 5. CARTE CONTENU -------------------------------------------------------- */
.of-content{padding:22px 20px 24px}
.of-h{font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--plum)}
.of-content .of-h{padding-bottom:14px;border-bottom:1px solid var(--line)}

.of-blk{margin-top:18px}
.of-blk:first-of-type{margin-top:14px}
.of-blk__t{font-size:15.5px;font-weight:600;letter-spacing:-.012em;color:var(--plum)}
.of-blk__c{max-width:70ch;margin-top:8px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.of-blk__c p + p{margin-top:13px}
.of-list{display:grid;gap:9px;margin-top:4px}
.of-list li{position:relative;padding-left:22px;line-height:1.65}
.of-list li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--grad-rose)}

/* 6. CARTE « L'ESSENTIEL » ------------------------------------------------ */
.of-side__in{padding:20px}
.of-side .of-h{padding-bottom:14px;border-bottom:1px solid var(--line)}
.of-key{display:grid;gap:2px;margin-top:4px}
.of-key li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;padding:12px 0}
.of-key li + li{border-top:1px solid var(--line)}
.of-key__ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--of-rose);border:1px solid #F7E6EF;color:var(--rose);
}
.of-key__ico svg{width:16px;height:16px}
.of-key__l{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.of-key__v{display:block;margin-top:3px;font-size:15px;font-weight:600;line-height:1.4;color:var(--plum);overflow-wrap:anywhere}
.of-key__v .dept{color:var(--ink-3);font-weight:500}
.of-side__cta{display:none;margin-top:18px}
.of-side__note{display:none;margin-top:10px;font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center}

/* 7. AUTRES OPPORTUNITÉS — bloc de la colonne principale ------------------ */
.of-more{padding:34px 0 40px;background:var(--of-rose);border-top:1px solid var(--line)}
.of-more__h{font-size:clamp(20px,4.6vw,26px);line-height:1.22;letter-spacing:-.024em;color:var(--plum)}
.of-more__p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.of-jobs{display:grid;gap:14px;margin-top:22px;align-items:stretch}
.of-job{
  position:relative;display:flex;flex-direction:column;padding:18px;
  background:var(--bg-white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:none;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
.of-job:hover{transform:translateY(-2px);border-color:var(--bd-hover);box-shadow:var(--of-sh-hover)}
}
.of-job__top{min-height:26px}

/* La mention « Hijab accepté » n'est plus passée à la carte par cette page :
   la carte la porte elle-même, sur tout le site. Son dessin est parti avec
   elle dans carte-offre.css — c'était celui de « .of-hijab », ci-dessous,
   repris à la lettre. */
.of-job__t{margin-top:12px;font-size:16px;line-height:1.32;letter-spacing:-.016em;color:var(--plum)}
.of-job__t a::after{content:"";position:absolute;inset:0}
.of-job__co{margin-top:6px;font-size:14px;font-weight:500;color:var(--ink-2)}
.of-job__loc{margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.of-job__loc .dept{color:var(--ink-3)}
.of-job__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;
}
.of-job__d{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.of-job__go{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--line-2);border-radius:4px;background:var(--bg-white);color:var(--plum);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.of-job__go svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.of-job:hover .of-job__go{background:var(--grad-rose);border-color:transparent;color:#fff}
}
@media (hover:hover){
.of-job:hover .of-job__go svg{transform:translateX(2px)}
}
.of-more__all{margin-top:20px}

/* 8. BARRE D'ACTION MOBILE ------------------------------------------------ */
.ofstick{
  position:fixed;left:0;right:0;bottom:0;z-index:180;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(50,23,42,.07);
  transform:translateY(115%);transition:transform 280ms var(--ease-out);
}
.ofstick.is-on{transform:none}
.ofstick[hidden]{display:none}
.ofstick__in{display:flex;align-items:center;gap:14px;width:min(760px,100%);margin-inline:auto}
.ofstick__txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ofstick__txt strong{font-size:13.5px;font-weight:600;color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofstick__txt span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofstick__cta{--h:44px;flex:none;margin-left:auto;padding:0 18px;font-size:14px}

/* 9. DESKTOP -------------------------------------------------------------- */
@media (min-width:560px){
  .of-hero__l{padding:28px}
  .of-hero__act{padding:0 28px 28px}
  .of-back{width:auto;display:inline-flex}
  .of-content{padding:26px 26px 28px}
}
/* =========================================================================
   LA FICHE SUR TÉLÉPHONE ET PETITE TABLETTE

   Le haut de la fiche disait tout deux fois. Le bloc d'introduction portait
   déjà les badges, l'intitulé, l'entreprise, le lieu, le contrat, le mode de
   travail, la date et le bouton de candidature ; la carte « L'essentiel »,
   juste en dessous, reprenait le lieu, le mode et le contrat — et un second
   bouton de candidature identique au premier.

   Ce second bouton n'était même pas voulu : « .of-side__cta » est déclaré
   `display:none` hors des grands écrans, mais « .btn.btn--block » de
   boutons.css, chargée après cette feuille, pèse plus lourd et le rallumait.

   Sous 981 px, donc :

     — un seul bouton, celui du bloc du haut ;
     — les trois lignes déjà dites ne se redisent pas ;
     — ce qui reste — temps de travail, rémunération, durée, recrutement —
       passe en grille compacte de deux colonnes ;
     — et s'il ne reste rien, la carte entière disparaît ;
     — le bloc du haut se resserre, et le contenu de l'offre arrive vingt-six
       pixels plus bas au lieu de quarante.

   Le grand écran n'est pas touché : la colonne de droite y est un rappel qui
   accompagne la lecture, non une redite immédiate.
   ========================================================================= */
@media (max-width:980.98px){
  /* --- Un seul bouton de candidature -----------------------------------
     Trois classes, et il en faut trois : « .btn.btn--block » de boutons.css
     en vaut deux, et cette feuille est chargée avant elle. À poids égal, la
     dernière chargée l'emporte — d'où la classe de plus. */
  .of-side .btn.of-side__cta{display:none}

  /* --- Le bloc du haut, resserré ---------------------------------------- */
  .of-top{padding:14px 0 18px}
  .of-hero__l{padding:20px 18px}
  .of-hero__act{padding:0 18px 20px}

  /* Les badges : un peu plus petits, un peu plus serrés. « Offre d'emploi »
     perd son rose de fond pour un ivoire neutre et un texte prune — le rose
     reste à « Hijab accepté », qui est le badge fort de la fiche. */
  .of-sum__tags{gap:6px}
  .of-tag{height:24px;padding:0 9px;font-size:11.5px}
  .of-tag:not(.of-tag--hijab){
    background:#FBF7F9;border-color:#EDE5E9;color:var(--plum);
  }

  .of-sum__t{margin-top:14px;font-size:clamp(21px,5.4vw,27px);line-height:1.2}
  .of-sum__co{margin-top:10px;font-size:15px}
  /* Les informations pratiques : une seule zone compacte, qui se replie
     naturellement. Les icônes gardent le rose — c'est le seul endroit de la
     ligne où il serve à quelque chose. */
  .of-facts{margin-top:14px;gap:7px 14px}
  .of-facts li{font-size:13.5px}
  .of-facts svg{width:15px;height:15px}

  /* --- Le contenu arrive tout de suite ---------------------------------- */
  .of-body{padding:8px 0 34px}
  .of-grid{gap:14px}

  /* --- « L'essentiel », allégé ------------------------------------------ */
  /* Les trois lignes que le bloc du haut porte déjà. Le sélecteur nomme le
     « li » : « .of-key li » plus haut dans cette feuille pèse une classe et
     un type, et une classe seule ne lui suffisait pas. */
  .of-key li.of-key__double{display:none}
  /* Et si c'était tout ce qu'elle contenait, la carte n'a plus lieu d'être :
     `:has` regarde s'il reste une ligne qui ne soit pas un doublon. */
  .of-side:not(:has(.of-key > li:not(.of-key__double))){display:none}

  /* Ce qui reste passe en deux colonnes, sans filets : les séparations
     horizontales n'ont plus de sens une fois les lignes côte à côte, et le
     pas de la grille suffit à les tenir. */
  .of-key{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-top:12px}
  .of-key li{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:0}
  .of-key li + li{border-top:0}
  .of-key__ico{
    width:30px;height:30px;border-radius:8px;
    background:#FBF7F9;border-color:#EDE5E9;color:#8A1449;
  }
  .of-key__ico svg{width:15px;height:15px}
  .of-key__l{font-size:10.5px}
  .of-key__v{font-size:14px;margin-top:2px}
  .of-side__in{padding:18px}
  .of-side .of-h{padding-bottom:12px}
}

/* --- Les trois repères du bas d'écran, empilés dans l'ordre --------------
   La fiche est la seule page qui pose une barre de candidature au bas de
   l'écran dès qu'on descend. Deux repères du site s'y trouvaient déjà — la
   barre de lecture et le losange d'aide —, et les trois se superposaient : le
   losange passait sur le bouton « Postuler », la barre de lecture disparaissait
   dessous.

   Ils se rangent maintenant les uns au-dessus des autres, du bas vers le
   haut : la barre de candidature, la barre de lecture, puis le losange. Rien
   ne masque un bouton, et il reste de l'air entre chacun.

   Les deux règles pèsent trois classes : elles doivent l'emporter sur
   assistant.css et barre-lecture.css, chargées après cette feuille. Elles ne
   s'appliquent que la barre de candidature montée — « .is-on », posé par
   offre.js —, donc jamais en haut de page.
   ------------------------------------------------------------------------ */
@media (max-width:767px){
  body:has(.ofstick.is-on) .blec{
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
  }
  body:has(.ofstick.is-on) .asst{
    bottom:calc(124px + env(safe-area-inset-bottom,0px));
  }
}

/* Très petits écrans : les deux colonnes de « L'essentiel » redeviennent une
   seule — trente pixels d'icône et deux libellés côte à côte ne tiennent plus
   dans trois cent vingt pixels. */
@media (max-width:379.98px){
  .of-key{grid-template-columns:minmax(0,1fr)}
  .of-hero__l{padding:18px 16px}
  .of-hero__act{padding:0 16px 18px}
}

@media (min-width:981px){
  .page-offre{padding-bottom:0}
  .page-offre .header{display:block}
  .ofbar{display:none}
  .ofstick{display:none}
  .of-share{display:grid}
  .of-crumb{display:inline-flex}

  .of-top{padding:22px 0 34px}
  .of-hero{grid-template-columns:minmax(0,1fr);margin-top:16px}
  .of-hero__l{padding:36px 40px}
  .of-hero__act{display:none}             /* un seul bouton : celui de « L'essentiel » */
  .of-share{top:20px;right:20px}
  .of-sum__t{font-size:clamp(28px,2.4vw,34px);padding-right:56px}
  .of-facts{gap:16px 28px;margin-top:24px}

  .of-body{padding:28px 0 56px}
  .of-grid{grid-template-columns:minmax(0,1fr) var(--of-side);gap:24px;align-items:start}
  .of-main{grid-column:1;grid-row:1}
  .of-side{grid-column:2;grid-row:1;height:100%}
  .of-side__in{position:sticky;top:96px;padding:24px}
  .of-side__cta{display:flex}
  .of-side__note{display:block}
  .of-content{padding:32px 34px 34px}
  .of-h{font-size:20px}

  .of-more{padding:48px 0 56px}
  .of-jobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .of-job{padding:22px}
  .of-more__all{display:inline-flex;width:auto;padding:0 28px;margin-top:26px}
}
@media (min-width:1240px){
  .of-hero__l{padding:40px 44px}
}
@media (prefers-reduced-motion:reduce){
  .ofstick,.ofbar__toast,.of-job,.btn{transition:none}
}

/* 10. MENTION HIJAB — ligne discrète, aucun fond ------------------------- */
.of-hijab{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:12.5px;line-height:1.3;font-weight:600;letter-spacing:-.005em;color:var(--rose);
}
.of-hijab span{display:inline-flex;flex:none;color:var(--of-or)}
.of-job__top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* mention discrète (page de candidature) */
.of-mention{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}

/* encart « pourquoi cette offre » — rose ivoire, jamais beurre */
.of-why{
  width:100%;margin-top:24px;padding:24px;
  background:#FDF8FB;border:1px solid #F3E7EE;border-radius:4px;
}
.of-why__t{font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--plum)}
.of-why__p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.of-why__m{
  margin-top:16px;padding-top:14px;border-top:1px solid #F1E4EC;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}

/* 11. FOOTER — le dégradé vit maintenant dans style.css (tout le site) ----- */

/* 12 bis. Le fond crème des annonces récentes accompagnait le badge doré : il
   s'en va avec lui. C'est le signal « Nouveau » qui dit la nouveauté, et non
   la carte entière. ------------------------------------------------------- */

/* 12. (le bloc public « Comment postuler » a été retiré : aucune
       coordonnée du recruteur n'est publiée) ------------------------------ */


/* Le lien d'origine et « Signaler cette annonce », dans l'encart « Pourquoi
   cette offre » (21/10/2026). */
.of-why__lien{color:var(--mw-framboise,#C32371);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){
.of-why__lien:hover{color:var(--mw-bordeaux,#68153D)}
}

/* =========================================================================
   LE BANDEAU PRUNE DE LA FICHE (21/10/2026)
   La même matière que le bandeau de « Postuler » (parcours.css,
   « .parc-bandeau ») : dégradé prune, deux lumières, filet clair sur l'arête
   du haut, un losange coupé par le bord droit. Pas de progression : la fiche
   n'est pas un formulaire. Le contenu, lui, reste sur fond blanc.
   Mêmes bords que « Postuler » (« .of-shell » = « .parc-sec > .wrap »), et
   la même respiration sous l'en-tête.
   ========================================================================= */
.of-top{background:var(--bg-white);padding-top:22px}
.of-hero{
  isolation:isolate;
  /* Une colonne bornée : sans elle, la ligne des faits s'élargissait au-delà
     du bandeau à 320 px au lieu de passer à la ligne (« Sur site » coupé). */
  grid-template-columns:minmax(0,1fr);
  border:0;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);
}
.of-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:1;
  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%);
}
.of-hero::after{
  content:"";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;
}
.of-hero .of-sum__t{color:#FFFFFF}
.of-hero .of-sum__co{color:rgba(255,240,247,.88)}
.of-hero .of-facts li{color:rgba(255,240,247,.86)}
.of-hero .of-facts li > span{color:#FFB8D9}
.of-hero .of-facts .dept{color:rgba(255,240,247,.62)}
/* Les trois badges du bandeau, harmonisés : même hauteur, même arrondi,
   même typographie, même espacement. Sur téléphone, ils passent à la ligne
   proprement (« .of-sum__tags » est un flex qui se replie). Leur affichage —
   qui paraît, et quand — ne change pas.
     « Offre d'emploi » : verre blanc 10 %, filet blanc 15 %, texte blanc ;
     « Hijab accepté »  : crème rosée, texte prune, la coche conservée ;
     « Nouveau »        : transparent, filet blanc 30 %, texte blanc. */
.of-hero .of-sum__tags{gap:8px}
.of-hero .of-sum__tags > .of-tag,
.of-hero .of-sum__tags > .badge{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 11px;border-radius:6px;
  font-size:12.5px;line-height:1;font-weight:600;letter-spacing:.005em;
  white-space:nowrap;box-shadow:none;background-image:none;
}
.of-hero .of-sum__tags > .of-tag:not(.of-tag--hijab){
  background-color:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);color:#FFFFFF;
}
.of-hero .of-sum__tags > .of-tag--hijab{
  background-color:#F5E8EE;border:1px solid #F5E8EE;color:#651C45;
}
.of-hero .of-sum__tags > .of-tag--hijab .of-tag__ck{color:#651C45}
.of-hero .of-sum__tags > .badge--new{
  background-color:transparent;border:1px solid rgba(255,255,255,.30);color:#FFFFFF;
}
@media (max-width:980.98px){
  .of-hero .of-sum__tags{gap:6px}
  .of-hero .of-sum__tags > .of-tag,
  .of-hero .of-sum__tags > .badge{height:24px;padding:0 9px;font-size:11.5px}
}
/* Le partage, en verre clair. */
.of-hero .of-share{
  border-color:rgba(255,214,235,.32);background:rgba(255,255,255,.10);color:#FFFFFF;
}
@media (hover:hover){
.of-hero .of-share:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18)}
}
/* Le bouton de candidature (petits écrans) : blanc sur le prune, le plus
   visible de la fiche. */
.of-hero .btn.btn--primary.of-hero__cta{
  background-image:none;background-color:#FFFFFF;color:var(--plum);
  box-shadow:0 10px 24px -10px rgba(20,4,12,.55);
}
@media (hover:hover){
.of-hero .btn.btn--primary.of-hero__cta:hover{background-color:#FFF2F8}
}

@media (max-width:980.98px){
  .of-top{padding:22px 0 18px}
  .of-hero{border-radius:16px}
  .of-hero::after{width:200px;height:200px;right:-90px;top:30%}
}
@media (min-width:981px){
  /* Comme « Postuler » : le fil de retour sous l'en-tête, puis le bandeau. */
  .of-top{padding:0 0 34px}
  .of-hero{margin-top:9px}
  .of-hero__l{padding:34px 44px 36px}
}