/* =========================================================================
   MUSLIMA WORK — LES BOUTONS, LES MÊMES SUR TOUT LE SITE PUBLIC

   Un seul bouton principal, celui de l'en-tête : le dégradé du bordeaux au
   framboise, du texte blanc, une ombre rose très douce. Il porte toutes les
   actions principales du site — trouver un emploi, rechercher, publier,
   envoyer, valider — et c'est à cela qu'on le reconnaît d'une page à l'autre.

   Il ne l'était pas. Chacune des feuilles publiques avait redéfini
   « .btn--primary » à sa manière — style.css un dégradé, refonte.css un aplat
   accent, public-v2.css un aplat bordeaux — et le même bouton changeait de
   couleur en changeant de page. Cette feuille est chargée en dernier, après
   les autres, exactement comme header.css et footer.css, et pour la même
   raison. Les règles sont écrites à une spécificité suffisante pour
   l'emporter, sans un seul !important.

   LA HIÉRARCHIE, ET SES EXCEPTIONS

   Le dégradé est réservé à l'action principale. Ce qui vient à côté d'elle est
   un contour sur fond transparent — même hauteur, même graisse, moins
   d'insistance. Et ce qui n'est pas une action de page ne prend ni l'un ni
   l'autre : les flèches des cartes du bandeau, les pictogrammes, les boutons
   de pause, les fermetures, les puces de filtre gardent leur dessin. C'est
   pourquoi rien ici ne vise « button » : tout passe par « .btn », que ces
   éléments ne portent pas.

   LE SURVOL

   Quatre choses, toutes légères : le dégradé glisse un peu, le bouton monte
   d'un pixel, l'ombre s'ouvre, la flèche avance de trois pixels. Le dégradé
   est en 220 % de large et c'est sa position qui bouge — une couleur de fond
   ne s'anime pas, une position oui.
   ========================================================================= */

/* --- L'action principale --------------------------------------------------
   La hauteur vient de `--h`, que les variantes du site règlent déjà (`--sm`,
   `--lg`). Le défaut est à 48 px : c'est la taille d'un bouton de page. */
.btn.btn--primary{
  --h:48px;
  height:var(--h);padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:8px;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:-.008em;
  color:#FFFFFF;
  background-image:linear-gradient(105deg,#68153D 0%,#7C1648 26%,#951753 52%,#B22065 76%,#C92D78 100%);
  /* Le repos se tient sur la moitié claire du dégradé, non sur la sombre : à
     220 % de large et calé à gauche, le bouton ne montrait que ses deux
     bordeaux, et le framboise restait hors du cadre. La rampe est raccourcie
     et la fenêtre placée au bout clair — mêmes cinq couleurs, mais c'est le
     framboise qui tient la plus grande part.

     Le survol part alors vers le fond bordeaux : le bouton s'enfonce au lieu
     de s'éclaircir, ce qui va bien avec le pixel de soulèvement. */
  background-size:180% 100%;
  background-position:100% 0;
  /* Le dégradé couvre aussi la bordure. Par défaut il est calé sur la boîte
     intérieure, et le pixel de bordure — transparent — se contente d'étirer la
     couleur du bord : celle du bordeaux le plus sombre. Cela dessinait un
     liseré foncé tout autour du bouton. */
  background-origin:border-box;
  background-color:#951753;   /* le repli, si le dégradé ne peut pas être peint */
  box-shadow:0 6px 18px rgba(149,23,83,.22);
  transition:
    background-position 420ms cubic-bezier(.22,.68,.28,1),
    transform 200ms cubic-bezier(.22,.68,.28,1),
    box-shadow 200ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.btn.btn--primary:hover{
  background-position:0% 0;
  transform:translateY(-1px);
  box-shadow:0 9px 26px rgba(178,32,101,.30);
}
}
.btn.btn--primary:active{transform:translateY(0);box-shadow:0 5px 14px rgba(149,23,83,.24)}
/* La flèche avance avec le regard. Elle n'est là que sur les boutons qui
   mènent ailleurs — ceux qui n'en ont pas ne s'en trouvent pas changés. */
.btn.btn--primary .arw,
.btn.btn--primary svg{transition:transform 200ms cubic-bezier(.22,.68,.28,1)}
@media (hover:hover){
.btn.btn--primary:hover .arw,
.btn.btn--primary:hover svg{transform:translateX(3px)}
}

/* --- L'action secondaire --------------------------------------------------
   Un contour sur fond transparent, à la même hauteur. Elle accompagne la
   principale sans lui disputer le regard. */
.btn.btn--secondary{
  --h:48px;
  height:var(--h);padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid #E4D9DF;border-radius:8px;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:-.008em;
  color:#2A1220;background:transparent;box-shadow:none;
  transition:border-color 200ms cubic-bezier(.22,.68,.28,1),
             color 200ms cubic-bezier(.22,.68,.28,1),
             background-color 200ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.btn.btn--secondary:hover{
  border-color:#951753;color:#951753;background:rgba(149,23,83,.05);transform:none;
}
}

/* --- Les tailles ----------------------------------------------------------
   Elles ne font que régler la hauteur et le rembourrage ; le dessin, lui, ne
   change pas. */
.btn.btn--sm{--h:42px;padding-inline:18px;font-size:14px}
.btn.btn--lg{--h:52px;padding-inline:30px;font-size:16px}
.btn.btn--block{display:flex;width:100%}

/* --- L'en-tête ------------------------------------------------------------
   Ses deux boutons sont plus petits que ceux d'une page — la barre ne doit pas
   grossir — mais ce sont les mêmes. */
.header .header__cta .btn{--h:42px;font-size:14px;border-radius:7px}
.header .header__cta .btn--primary{padding-inline:18px}
.header .header__cta .btn--secondary{
  padding-inline:16px;color:#2A1220;border-color:rgba(42,18,32,.16);background:transparent;
}
@media (hover:hover){
.header .header__cta .btn--secondary:hover{
  border-color:#951753;color:#951753;background:rgba(255,255,255,.5);
}
}

/* --- Le hero de l'accueil -------------------------------------------------
   Les deux actions y sont posées sur une photographie sombre, et c'est ce qui
   change tout : le dégradé prune du reste du site s'y fondrait dans le fond.
   L'action principale prend donc l'inverse — un blanc qui glisse vers un rose
   poudré très pâle, du texte et une flèche en prune foncé, un filet blanc et
   une lueur rose diffuse en dessous. Elle est la seule du site dans ce sens ;
   partout ailleurs, sur du blanc, le dégradé prune reste la règle.

   La seconde garde le verre clair : même hauteur, même graisse, moins
   d'insistance. */
.hero .hero__actions .btn{--h:50px}
.hero .hero__actions .btn--primary{
  padding-inline:28px;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#FFF7FB 42%,#FDE9F2 100%);
  background-color:#FFF7FB;
  color:#32172A;
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 8px 26px rgba(214,83,154,.30),
    0 2px 8px rgba(120,30,74,.14),
    inset 0 1px 0 rgba(255,255,255,.92);
}
@media (hover:hover){
.hero .hero__actions .btn--primary:hover{
  /* Le rose se fait un peu plus présent, et le bouton se soulève de deux
     pixels au lieu d'un : il est seul de son espèce, il peut se le permettre. */
  background-image:linear-gradient(135deg,#FFFBFD 0%,#FDEDF4 42%,#FADCE9 100%);
  transform:translateY(-2px);
  box-shadow:
    0 12px 32px rgba(214,83,154,.38),
    0 3px 10px rgba(120,30,74,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
}
}
.hero .hero__actions .btn--primary .arw,
.hero .hero__actions .btn--primary svg{color:#32172A}
.hero .hero__actions .btn--secondary{
  padding-inline:24px;
  background:linear-gradient(135deg,rgba(120,36,80,.34),rgba(86,24,58,.30));
  color:#FFFFFF;border-color:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
}
@media (hover:hover){
.hero .hero__actions .btn--secondary:hover{
  background:linear-gradient(135deg,rgba(140,44,94,.44),rgba(102,30,68,.40));
  border-color:rgba(255,255,255,.68);color:#FFFFFF;
}
}

/* =========================================================================
   LE REFLET

   Une lumière blanche traverse le bouton en diagonale, vite, puis s'en va. Ce
   n'est pas une brillance permanente : sur les trois secondes et demie du
   cycle, elle n'est visible que pendant un cinquième — le reste du temps, le
   bouton est au repos.

   Elle ne va qu'aux vrais boutons d'action, ceux qui portent « .btn » : les
   flèches des cartes, les filtres, les champs et les liens de navigation n'en
   ont pas, et les sélecteurs ci-dessous ne les atteignent pas.

   Les délais sont décalés d'un bouton à l'autre : deux boutons visibles en
   même temps ne brillent jamais ensemble, ce qui ferait clignoter la page.
   ========================================================================= */
.btn.btn--primary,.btn.btn--secondary{position:relative;isolation:isolate;overflow:hidden}
.btn.btn--primary::after,
.btn.btn--secondary::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:34%;
  z-index:1;pointer-events:none;opacity:0;
  transform:translateX(-160%) rotate(16deg);
  background:linear-gradient(96deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 34%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.22) 66%,
    rgba(255,255,255,0) 100%);
  filter:blur(3px);
  animation:btnReflet 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
/* Sur le bouton clair du hero, la même lumière serait invisible en blanc pur :
   elle y passe en rose très pâle, un peu plus dense. */
.hero .hero__actions .btn--primary::after{
  background:linear-gradient(96deg,
    rgba(255,255,255,0) 0%,
    rgba(255,222,238,.34) 34%,
    rgba(255,255,255,.82) 50%,
    rgba(255,222,238,.34) 66%,
    rgba(255,255,255,0) 100%);
}
/* Le texte reste au-dessus du reflet. */
.btn.btn--primary > *,.btn.btn--secondary > *{position:relative;z-index:2}

@keyframes btnReflet{
  0%   {transform:translateX(-160%) rotate(16deg);opacity:0}
  4%   {opacity:.9}
  17%  {transform:translateX(260%) rotate(16deg);opacity:0}
  100% {transform:translateX(260%) rotate(16deg);opacity:0}
}

/* Les décalages : chaque groupe de boutons a son propre départ, et à
   l'intérieur d'un groupe les boutons se suivent. */
.header .header__cta .btn:nth-of-type(1)::after{animation-delay:.3s}
.header .header__cta .btn:nth-of-type(2)::after{animation-delay:1.9s}
.hero .hero__actions .btn:nth-of-type(1)::after{animation-delay:1.1s}
.hero .hero__actions .btn:nth-of-type(2)::after{animation-delay:2.6s}
.hsearch .btn::after{animation-delay:2.2s}
.shead .btn::after{animation-delay:1.5s}
.rec .btn::after{animation-delay:.8s}
.footer .btn::after{animation-delay:2.9s}
.soum-nav .btn:nth-of-type(1)::after{animation-delay:.6s}
.soum-nav .btn:nth-of-type(2)::after{animation-delay:2.1s}

/* Le reflet de style.css, qui ne visait que trois boutons et tournait toutes
   les huit secondes, est écrit sur le même pseudo-élément : les règles
   ci-dessus, plus spécifiques et chargées après, le remplacent partout où il
   passait. Rien à désactiver — il ne peut plus s'appliquer. */

@media (prefers-reduced-motion:reduce){
  .btn.btn--primary::after,.btn.btn--secondary::after{animation:none;opacity:0}
}

/* --- La mise en avant de la formation -------------------------------------
   Son bouton est posé sur une vidéo sombre : il prend le blanc du hero, et
   pour la même raison — un dégradé prune s'y fondrait dans le fond. Le reflet,
   lui, est celui de tous les autres. */
.fmt .fmt__cta{
  --h:48px;padding-inline:26px;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#FFF7FB 42%,#FDE9F2 100%);
  background-color:#FFF7FB;
  color:#32172A;
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 8px 26px rgba(214,83,154,.30),
    0 2px 8px rgba(120,30,74,.14),
    inset 0 1px 0 rgba(255,255,255,.92);
}
@media (hover:hover){
.fmt .fmt__cta:hover{
  background-image:linear-gradient(135deg,#FFFBFD 0%,#FDEDF4 42%,#FADCE9 100%);
  transform:translateY(-2px);
  box-shadow:
    0 12px 32px rgba(214,83,154,.38),
    0 3px 10px rgba(120,30,74,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
}
}
.fmt .fmt__cta .arw,.fmt .fmt__cta svg{color:#32172A}
/* Sur le clair, le reflet blanc passe en rose très pâle, comme dans le hero. */
.fmt .fmt__cta::after{
  background:linear-gradient(96deg,
    rgba(255,255,255,0) 0%,
    rgba(255,222,238,.34) 34%,
    rgba(255,255,255,.82) 50%,
    rgba(255,222,238,.34) 66%,
    rgba(255,255,255,0) 100%);
  animation-delay:1.4s;
}

/* --- Ce qui n'est pas un bouton de page -----------------------------------
   Les flèches des cartes du bandeau, les pictogrammes de métier, les boutons
   de pause et les fermetures ne portent pas la classe « .btn » : rien de ce
   qui précède ne les atteint. Cette règle ne fait que le dire — et rattraper
   le cas où l'un d'eux serait un jour marqué par erreur. */
.hmq__arw,.fil__arw,.prv__x,.mq__pause{background-image:none;box-shadow:none}

/* =========================================================================
   LES LIENS DE SECTION

   « Voir toutes les offres », « Parcourir toutes les annonces » : ce sont des
   passages vers une autre liste, non des actions. Les habiller en boutons
   pleins revenait à mettre sur le même plan la conversion et la navigation —
   et à empiler quatre rectangles framboise sur une seule page.

   Ils n'ont donc ni fond, ni cadre, ni lueur, ni reflet. Un filet corail se
   tire sous le texte au survol, et la flèche avance de trois pixels : c'est
   tout ce qu'il leur faut pour se signaler.
   ========================================================================= */
.lien-sect{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  /* La zone cliquable dépasse le texte, sans que cela se voie. */
  padding:8px 4px;
  background:none;border:0;box-shadow:none;
  font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.008em;
  color:var(--plum);text-decoration:none;cursor:pointer;
  transition:color 200ms cubic-bezier(.22,.68,.28,1);
}
.lien-sect::after{
  content:"";position:absolute;left:4px;right:4px;bottom:5px;height:1.5px;
  border-radius:1px;background:#DD3873;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 280ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.lien-sect:hover{color:#951753}
}
@media (hover:hover){
.lien-sect:hover::after{transform:scaleX(1)}
}
.lien-sect svg,.lien-sect .arw{
  width:16px;height:16px;flex:none;
  transition:transform 200ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.lien-sect:hover svg,.lien-sect:hover .arw{transform:translateX(3px)}
}
/* Le filet ne se tire pas quand le mouvement est refusé : il s'affiche d'un
   coup, et la flèche ne bouge pas. */
@media (prefers-reduced-motion:reduce){
  .lien-sect::after,.lien-sect svg,.lien-sect .arw{transition:none}
}

/* =========================================================================
   PETITS ÉCRANS

   Un bouton principal seul sur sa ligne prend toute la largeur : à cette
   taille, un bouton centré au milieu du vide se cherche.
   ========================================================================= */
@media (max-width:760px){
  .btn.btn--primary,.btn.btn--secondary{--h:48px}
  .btn.btn--lg{--h:50px}
}