/* =========================================================================
   MUSLIMA WORK — LA CARTE D'OFFRE D'EMPLOI

   Une seule carte, pour tout le site public : « Toutes les annonces »,
   « Les dernières opportunités » sur l'accueil, et « D'autres opportunités »
   au bas des fiches. Il y en avait trois, qui montraient les mêmes annonces de
   trois façons.

   Cette feuille ne dessine que l'intérieur de la carte. Les grilles qui la
   posent restent chez elles : « .ann-cartes » dans annonces.css,
   « .ofbento__suite » dans accueil.css, « .of-jobs » dans offre.css. Une carte
   ne décide pas du nombre de colonnes de la page qui l'accueille.

   Le problème réglé : tout se lisait avec le même poids. L'intitulé faisait
   seize pixels, l'entreprise treize et demi, le lieu treize, et les trois
   étaient dans des gris voisins. Une candidate qui parcourait la grille devait
   lire chaque carte pour savoir où était le poste.

   Quatre niveaux, maintenant, et ils se distinguent au premier regard :

     1. le pictogramme du secteur et le contrat, en haut ;
     2. l'intitulé — dix-sept et demi, gras, prune très foncé ;
     3. l'entreprise — quatorze, semi-gras, un ton en dessous ;
     4. le lieu et le mode de travail, sur leur propre bande rose très pâle,
        avec une épingle rose. C'est le vrai changement : le lieu n'est plus
        un gris parmi d'autres, il a sa place et on le trouve sans lire.

   Puis le pied : la date à gauche, la flèche à droite, collé au fond par
   `margin-top:auto`.

   Sommaire
     1. La carte
     2. La languette « NOUVELLE »
     3. Niveau 1 — pictogramme et contrat
     4. Niveau 2 — le poste
     5. Niveau 3 — l'entreprise
     6. Niveau 4 — le lieu et le mode de travail
     7. La mention « Hijab accepté »
     8. Le pied
     9. Survol et focus
    10. L'entrée
    11. Téléphone
    12. Mouvement refusé
   ========================================================================= */

/* =========================================================================
   1. LA CARTE
   ========================================================================= */
.carte-offre{
  --co-r:16px;              /* le rayon, repris par la languette            */
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;flex:1 1 auto;min-width:0;
  /* Trente pixels en haut : c'est la place réservée à la languette, sur
     toutes les cartes. Elle mesure vingt-six pixels et déborde d'un pixel
     au-dessus du filet ; la rangée des pictogrammes commence donc en dessous
     d'elle, qu'il y ait une languette ou non. Rien ne se chevauche, et deux
     cartes voisines n'ont jamais leurs pictogrammes décalés. */
  padding:30px 21px 20px;
  background:#FFFFFF;
  /* Un gris à peine rosé, et non un rose pâle : la carte est blanche sur
     l'ivoire de la page, et c'est le contraste des deux blancs qui la pose,
     pas une bordure colorée. */
  border:1px solid #ECE4E8;
  border-radius:var(--co-r);
  /* Presque rien, et neutre : l'ombre était teintée de rose, elle ne l'est
     plus. */
  box-shadow:0 1px 2px rgba(60,40,52,.05);
  color:inherit;text-decoration:none;
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease),
             transform 180ms var(--ease),box-shadow 180ms var(--ease);
}

/* =========================================================================
   2. LA LANGUETTE « NOUVELLE »

   Inchangée. Sa forme est découpée d'une seule pièce, par `clip-path`, et non
   composée de plusieurs boîtes :

     — à gauche, un biseau : l'arête part du bas et remonte vers la droite ;
     — à droite, le coin de la carte, approché par quatre points sur le quart
       de cercle — un polygone ne sait pas arrondir, mais quatre points sur
       quinze pixels ne se distinguent pas d'un arc ;
     — en bas et à droite, des arêtes droites : pas de pilule, pas de bulle.

   Le même découpage retient le reflet (voir ::after) : il n'a pas besoin
   d'`overflow:hidden`, qui aurait rogné le biseau.
   ========================================================================= */
.carte-offre__neuve{
  --r:15px;
  position:absolute;top:-1px;right:-1px;z-index:2;
  display:inline-flex;align-items:center;
  height:26px;padding:0 13px 0 21px;
  /* Prune profond, framboise, et une pointe de rose plus clair en fin de
     course. Le dégradé de la marque, resserré : dense, jamais fluorescent. */
  background:linear-gradient(101deg,#5E1236 0%,#8A1449 34%,#B22568 68%,#D1478A 100%);
  /* Une lumière blanche très fine sur l'arête du haut. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  color:#FFF8FB;
  font-size:10.5px;font-weight:600;line-height:1;
  letter-spacing:.105em;text-transform:uppercase;white-space:nowrap;
  /* La carte entière est un lien : la languette se laisse traverser plutôt
     que de creuser un trou au milieu de la surface cliquable. */
  pointer-events:none;
  clip-path:polygon(
    11px 0,
    calc(100% - var(--r)) 0,
    calc(100% - var(--r) * .5) calc(var(--r) * .135),
    calc(100% - var(--r) * .135) calc(var(--r) * .5),
    100% var(--r),
    100% 100%,
    0 100%
  );
}

/* Le reflet, une seule fois. Une bande blanche inclinée traverse la languette
   quand la carte paraît, et ne revient pas : `is-in` est posé une fois par
   l'observateur de app.js, qui lâche ensuite l'élément. Rien ne se rejoue au
   défilement, rien ne clignote, et il n'y a pas de halo — la bande est à
   l'intérieur du découpage. */
.carte-offre__neuve::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34px;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.52) 48%,rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-18deg);
  opacity:0;
}
.carte-offre.is-in .carte-offre__neuve::after{
  /* Le retard attend que la carte ait fini d'entrer : son fondu dure quatre
     cent cinquante millisecondes, et un reflet qui traverse une languette
     encore à demi transparente ne se voit pas. */
  animation:languetteReflet 620ms cubic-bezier(.38,0,.2,1) 520ms 1 both;
}
@keyframes languetteReflet{
  0%  {transform:translateX(-170%) skewX(-18deg);opacity:0}
  14% {opacity:1}
  86% {opacity:1}
  100%{transform:translateX(560%) skewX(-18deg);opacity:0}
}

/* =========================================================================
   3. NIVEAU 1 — LE PICTOGRAMME ET LE CONTRAT
   ========================================================================= */
.carte-offre__haut{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:13px;
}
/* Le carré reste, mais il ne crie plus : un ivoire à peine rosé, un filet très
   léger, et l'icône en framboise foncé plutôt qu'en rose saturé. Il se repère
   sans prendre le dessus sur l'intitulé. */
.carte-offre__ico{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  background:#FBF7F9;border:1px solid #EDE5E9;border-radius:10px;
  color:#8A1449;
}
.carte-offre__ico svg{width:19px;height:19px}
/* Le contrat garde sa pastille prune : fond foncé, texte blanc, compacte.
   C'est le seul badge de la carte, et il ne se répète nulle part ailleurs. */
.carte-offre__ctr{
  flex:none;height:22px;padding:0 9px;border-radius:5px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
}

/* =========================================================================
   4. NIVEAU 2 — LE POSTE
   La donnée la plus visible de la carte, et de loin : dix-sept et demi contre
   quatorze pour l'entreprise et treize et demi pour le lieu. Jamais en gris —
   le prune le plus foncé de la palette.
   ========================================================================= */
.carte-offre__t{
  margin:0;
  font-size:17.5px;font-weight:700;line-height:1.26;letter-spacing:-.02em;
  color:#2A1020;
  /* Deux lignes au plus. Le texte entier reste dans le document — c'est la
     peinture qui s'arrête, non le contenu : un lecteur d'écran lit l'intitulé
     complet, et `title` le rend à la souris. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.carte-offre__lien{
  color:inherit;text-decoration:none;
  transition:color 160ms var(--ease);
}
/* Toute la carte est cliquable, et il n'y a pourtant qu'un seul lien : cette
   plaque le couvre. La contrepartie est connue — le texte de la carte ne se
   sélectionne plus à la souris. */
.carte-offre__lien::after{content:"";position:absolute;inset:0}

/* =========================================================================
   5. NIVEAU 3 — L'ENTREPRISE
   Collée à l'intitulé — six pixels — parce qu'elle en fait partie : c'est
   « le poste, chez qui ». Semi-grasse, pour ne pas se confondre avec les
   informations pratiques, qui sont plus bas et plus légères.
   ========================================================================= */
.carte-offre__co{
  margin:6px 0 0;
  font-size:14px;font-weight:600;line-height:1.35;color:#3E2B38;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* =========================================================================
   6. NIVEAU 4 — LE LIEU ET LE MODE DE TRAVAIL

   Une bande, et non une ligne de plus. Le rose très pâle la détache du blanc
   de la carte sans faire une carte dans la carte : pas de contour, pas
   d'ombre, un arrondi court.

   Quatorze pixels au-dessus, contre six entre l'intitulé et l'entreprise :
   c'est l'écart qui dit que l'on change de niveau.
   ========================================================================= */
/* Une ligne, et rien autour. Il y avait ici un rectangle rose pâle derrière la
   ville, le département et le mode : il faisait un quatrième aplat rose sur une
   page qui en avait déjà trois, et il enfermait le lieu dans une capsule.

   Le lieu reste pourtant le plus repérable des repères — mais par la
   typographie : l'épingle en couleur, la ville en prune foncé et semi-grasse,
   le mode en gris chaud. Aucun fond, aucun cadre, aucune pastille. */
.carte-offre__lieu{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;
  margin:12px 0 0;
  font-size:13.5px;line-height:1.45;
}
/* L'épingle, en rose soutenu : c'est elle qu'on voit en parcourant la grille,
   avant même de lire la ville. Décorative — le lieu est écrit à côté. */
/* L'épingle est le seul rose de la carte, avec la languette : c'est elle qu'on
   voit en parcourant la grille, avant même de lire la ville. Décorative — le
   lieu est écrit à côté. */
.carte-offre__pin{
  flex:none;display:inline-grid;place-items:center;
  color:#B22568;
}
.carte-offre__pin svg{width:14px;height:14px}
/* La ville, en prune foncé et semi-grasse : c'est l'information. */
.carte-offre__ville{font-weight:600;color:#3A2130;min-width:0}
/* Le département, d'un ton en dessous — il précise, il ne s'annonce pas. */
.carte-offre__dept{font-weight:500;color:#5E4E58}
.carte-offre__sep{color:#C9BDC4}
/* Le mode de travail, plus clair que la ville, lisible tout de même :
   5,5 contre 1 sur la bande rose. */
/* Le mode de travail, en gris chaud : il complète la ville, il ne la double pas. */
.carte-offre__mode{font-weight:500;color:#6B6167}
/* Sans ville — le télétravail, l'international —, c'est le mode qui est
   l'information : il prend le poids et la couleur qu'aurait eus la ville,
   plutôt que de rester seul et pâle sur sa bande. */
.carte-offre__lieu--mode .carte-offre__mode{font-weight:600;color:#3A2130}

/* =========================================================================
   7. LA MENTION « HIJAB ACCEPTÉ »

   La promesse du site, sur chaque carte. Elle vient du bas des fiches
   d'annonce — « D'autres opportunités pour vous » — et son dessin est repris
   à la lettre : une coche fine dorée, deux mots en framboise, aucun fond,
   aucun cadre, aucun mouvement. Ce n'est pas un badge.

   C'est elle qui porte `margin-top:auto`, et non le pied : tout le vide de la
   carte se range donc au-dessus d'elle, et le bloc « mention + pied » se cale
   au fond. D'une carte à l'autre, la mention, le filet, la date et la flèche
   tombent à la même hauteur — que l'intitulé ait pris une ligne ou deux.
   ========================================================================= */
.carte-offre__hijab{
  display:flex;align-items:center;gap:6px;
  margin:14px 0 0;margin-top:auto;padding-top:14px;
  font-size:12.5px;line-height:1.3;font-weight:600;letter-spacing:-.005em;
  color:#B22568;
}
/* La coche : dorée, fine, et décorative — les deux mots disent tout. */
.carte-offre__coche{display:inline-flex;flex:none;color:#C2933F}
.carte-offre__coche svg{width:13px;height:13px}

/* =========================================================================
   8. LE PIED
   Il suit la mention immédiatement : c'est elle qui tient le bloc au fond de
   la carte.
   ========================================================================= */
.carte-offre__pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:11px;padding-top:12px;
  border-top:1px solid #EFE9EC;
}
/* La date ne se perd plus dans le fond : elle était à #7E6270, elle est à
   #55414E — 7,3 contre 1 sur le blanc. */
.carte-offre__date{
  font-size:12.5px;font-weight:600;line-height:1.3;color:#55414E;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.carte-offre__arw{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line-2,#E1DCE0);border-radius:8px;color:var(--plum,#321525);
  transition:border-color 180ms var(--ease),color 180ms var(--ease),
             transform 180ms var(--ease);
}
.carte-offre__arw svg{width:14px;height:14px}

/* =========================================================================
   9. SURVOL ET FOCUS
   Le filet rosit, le fond à peine, la carte monte de deux pixels et la flèche
   avance de trois. Rien de plus : pas de halo, pas de grande ombre.
   ========================================================================= */
/* Au survol, la carte ne rosit pas : elle passe à un ivoire très subtil, son
   filet se densifie d'un ton, et elle monte de deux pixels. */
@media (hover:hover){
.carte-offre:hover{
  background:var(--mw-avant-fond);
  border-color:#DFD2D9;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(60,40,52,.08);
}
}
@media (hover:hover){
.carte-offre:hover .carte-offre__t,
.carte-offre:hover .carte-offre__lien{color:#951753}
}
@media (hover:hover){
.carte-offre:hover .carte-offre__arw{border-color:var(--rose,#C32371);color:var(--rose,#C32371);transform:translateX(3px)}
}
/* Au clavier : la carte se signale comme au survol. Le contour propre du lien
   reste par-dessus — c'est lui qui a le focus. */
.carte-offre:has(.carte-offre__lien:focus-visible){
  border-color:#DFD2D9;background:var(--mw-avant-fond);
}

/* =========================================================================
  10. L'ENTRÉE
   Le mécanisme du site, sans rien y ajouter : `.reveal` est posé par app.js à
   l'entrée dans le champ de vision, puis l'observateur lâche l'élément — une
   carte n'est donc jouée qu'une fois, quoi qu'il arrive au défilement ensuite.
   Huit pixels de montée au lieu de quatorze, cadence de vingt-huit
   millisecondes au lieu de soixante.
   ========================================================================= */
.js .carte-offre.reveal{transform:translateY(8px)}
/* Le retour à zéro doit peser plus lourd que la règle du dessus : « .reveal
   .is-in » de style.css, plus légère, s'y casserait les dents et les cartes
   resteraient huit pixels trop bas, pour toujours. */
.js .carte-offre.reveal.is-in{transform:none}
.carte-offre.reveal.is-in{transition-delay:calc(var(--i,0) * 28ms)}
/* Le survol l'emporte sur l'entrée : sans cela, `transform:none` fige la
   carte et elle ne monterait plus sous la souris. */
@media (hover:hover){
.js .carte-offre.reveal.is-in:hover{transform:translateY(-2px)}
}

/* =========================================================================
  11. TÉLÉPHONE
   La carte se resserre. Rien n'est masqué : c'est la même carte, plus
   compacte, et la bande de lieu se replie sur deux lignes si la ville et le
   mode n'y tiennent pas d'un coup.
   ========================================================================= */
@media (max-width:599.98px){
  .carte-offre{--co-r:14px;padding:28px 17px 17px}
  .carte-offre__neuve{--r:13px;height:24px;padding:0 11px 0 19px;font-size:10px;letter-spacing:.095em}
  .carte-offre__haut{margin-bottom:11px}
  .carte-offre__ico{width:34px;height:34px;border-radius:9px}
  .carte-offre__ico svg{width:17px;height:17px}
  .carte-offre__t{font-size:16.5px;line-height:1.28}
  .carte-offre__co{margin-top:5px;font-size:13.5px}
  .carte-offre__lieu{margin-top:11px;font-size:13px}
  .carte-offre__hijab{padding-top:12px;font-size:12px}
  .carte-offre__coche svg{width:12px;height:12px}
  .carte-offre__pied{margin-top:10px;padding-top:11px}
  /* La carte ne monte pas sous le doigt : sur un écran tactile, le survol
     reste collé après la touche et la carte resterait décalée. */
  .carte-offre:hover{transform:none;box-shadow:0 1px 2px rgba(60,40,52,.05)}
  .js .carte-offre.reveal.is-in:hover{transform:none}
}
@media (max-width:360px){
  .carte-offre{padding:26px 15px 15px}
  .carte-offre__t{font-size:16px}
}

/* =========================================================================
  12. MOUVEMENT REFUSÉ
   Les cartes ne montent pas, ni à l'entrée ni sous la souris, et le reflet de
   la languette ne traverse pas. Le filet et le fond changent encore — ce sont
   des couleurs, non un mouvement.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .js .carte-offre.reveal{transform:none}
  .carte-offre.reveal.is-in{transition:none;transition-delay:0s}
  .carte-offre,.carte-offre__arw,.carte-offre__lien{transition:none}
  .carte-offre:hover,
  .js .carte-offre.reveal.is-in:hover{transform:none}
  .carte-offre:hover .carte-offre__arw{transform:none}
  .carte-offre.is-in .carte-offre__neuve::after{animation:none;opacity:0}
}