/* =========================================================================
   MUSLIMA WORK — L'ASSISTANT DE NAVIGATION

   Un bouton rond en bas à droite, et la fenêtre compacte qu'il ouvre au-dessus
   de lui. Rien n'y flotte au hasard : le dégradé est celui du pied de page, le
   filet lumineux celui de la barre de progression, et les couleurs sortent
   toutes de la palette.

   Ce n'est pas un dialogue : aucun champ, aucune attente, aucune promesse.
   Quatre chemins écrits d'avance et les liens qui vont avec — voir
   components/AssistantFlottant.tsx.
   ========================================================================= */
.asst{
  position:fixed;right:28px;bottom:28px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  /* LE CONTENEUR NE PREND PAS LE DOIGT, ses enfants seulement.

     Sur téléphone il est étiré d'un bord à l'autre — « left:16px », plus bas :
     il le faut pour que la fenêtre, quand elle s'ouvre, occupe la largeur.
     Mais fermé, seul le losange se voit, et cette boîte transparente de la
     largeur de l'écran restait posée au bas de chaque page publique. Elle
     interceptait tout ce qui passait dessous.

     Relevé par la recette : un lien des mentions légales et des CGU, un titre
     de la politique de confidentialité, un champ de recherche de l'accueil et
     un champ du formulaire de dépôt — tous inertes, entre 320 et 430 pixels,
     sans que rien ne le laisse voir.

     La déclaration est ici et non dans le palier mobile : sur grand écran la
     boîte se resserre sur son contenu et ne gênait personne, mais une boîte
     qui ne peint rien n'a aucune raison de prendre le doigt, à aucune
     largeur. Les enfants le reprennent aussitôt — et ceux qui s'en privent
     eux-mêmes, comme la bulle au repos, gardent leur règle : elle est écrite
     après celle-ci. */
  pointer-events:none;
}
.asst > *{pointer-events:auto}
/* Ouverte, elle passe devant l'en-tête — sinon la barre du site resterait
   claire au-dessus d'une page assombrie, et le voile n'aurait l'air que d'une
   tache. Fermée, le losange reprend sa place habituelle, sous tout le reste. */
.asst.est-ouvert{z-index:220}

/* --- Le voile -------------------------------------------------------------
   Le prune de la marque, très dilué : la page s'assombrit sans disparaître —
   on doit continuer de voir où l'on est. Il couvre l'en-tête comme le reste,
   et il est le seul élément à s'intercaler entre la page et la fenêtre. */
.asst__voile{
  position:fixed;inset:0;z-index:210;
  background:rgba(50,21,37,.42);
  animation:asst-voile 240ms var(--ease-out,ease) both;
}
@keyframes asst-voile{from{opacity:0}to{opacity:1}}

/* --- Le déclencheur : un losange, et son invitation ------------------------
   Le losange ne change jamais : cinquante-deux pixels, un quart de tour, le
   dégradé sombre de la marque, l'éclat nacré au centre et le reflet qui le
   traverse. C'est lui le bouton.

   L'invitation, elle, n'est qu'un passage : elle sort de derrière lui vers la
   gauche, reste cinq secondes, et s'y range. Elle est hors du flux — le
   losange ne bouge donc pas d'un pixel quand elle paraît — et passe dessous,
   comme si elle en sortait vraiment. */
.asst__socle{position:relative;display:flex;align-items:center;justify-content:flex-end}

.asst__losange{
  position:relative;z-index:2;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;border:0;cursor:pointer;
  border-radius:13px;transform:rotate(45deg);
  background:linear-gradient(105deg,#68153D 0%,#951753 45%,#B42568 100%);
  box-shadow:inset 0 0 0 1px rgba(255,222,238,.30),0 4px 14px rgba(80,20,52,.20);
  transition:box-shadow 300ms var(--ease-out,ease);
}
@media (hover:hover){
.asst__losange:hover{box-shadow:inset 0 0 0 1px rgba(255,222,238,.44),0 6px 18px rgba(80,20,52,.26)}
}
.asst__losange:focus-visible{outline:2px solid #F0B3D2;outline-offset:4px}

/* Le contenu tourne en sens inverse : le losange est de biais, ce qu'il
   contient reste droit. */
.asst__dedans{
  position:relative;z-index:2;
  display:flex;align-items:center;
  transform:rotate(-45deg);
}
/* L'éclat central : le losange nacré de la barre des deux panneaux, repris au
   pixel — mêmes dix pixels, même dégradé, même filet, même lueur. */
.asst__etoile{
  flex:none;width:10px;height:10px;
  rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(233,150,190,.72);
  box-shadow:0 0 6px rgba(255,255,255,.62),0 0 10px rgba(240,179,210,.62);
}
.asst__croix-p{position:relative;z-index:2}

/* Le reflet qui traverse le losange, toutes les six secondes, sur un cinquième
   du cycle. Hors du cadre le reste du temps. */
.asst__reflet{
  position:absolute;top:-40%;left:-40%;
  width:18px;height:180%;z-index:1;
  background:linear-gradient(90deg,
    rgba(255,240,247,0) 0%,rgba(255,240,247,.55) 50%,rgba(255,240,247,0) 100%);
  transform:rotate(16deg) translateX(0);
  animation:asst-reflet 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes asst-reflet{
  0%{opacity:0;transform:rotate(16deg) translateX(0)}
  6%{opacity:1}
  24%{opacity:1;transform:rotate(16deg) translateX(96px)}
  30%{opacity:0;transform:rotate(16deg) translateX(104px)}
  100%{opacity:0;transform:rotate(16deg) translateX(104px)}
}

/* --- L'invitation ---------------------------------------------------------
   Un fond ivoire, un filet rose pâle, un texte prune, une pointe discrète
   tournée vers le losange. Aucune icône, aucun bouton dedans.

   Rangée, elle est translatée sous le losange et le z-index la met dessous :
   c'est ce qui donne l'impression qu'elle en sort. Le flou de départ est très
   court et disparaît le premier. */
.asst__invite{
  /* Cinquante-huit pixels : le bord droit de la bulle arrive juste à la pointe
     gauche du losange, et seule sa petite pointe passe derrière. Plus près, le
     losange mangeait les derniers mots. */
  position:absolute;right:58px;top:50%;z-index:1;
  margin:0;padding:9px 14px;border:0;cursor:pointer;
  border-radius:10px;
  background:var(--mw-avant-fond);
  box-shadow:inset 0 0 0 1px rgba(215,160,170,.44),0 3px 12px rgba(80,20,52,.10);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;color:var(--plum,#32172A);
  transform:translate(calc(100% + 58px),-50%);
  opacity:0;filter:blur(3px);pointer-events:none;
  transition:transform 460ms var(--ease-out,ease),
             opacity 300ms var(--ease-out,ease),
             filter 200ms linear;
}
.asst__invite.est-la{
  transform:translate(0,-50%);
  opacity:1;filter:blur(0);pointer-events:auto;
}
/* La pointe : un petit triangle sur le bord droit, vers le losange. */
.asst__invite::after{
  content:"";position:absolute;right:-6px;top:50%;
  width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:6px solid var(--mw-avant-fond);
  filter:drop-shadow(1px 0 0 rgba(215,160,170,.44));
}
/* Deux longueurs pour un même message : la courte sur un téléphone. */
.asst__invite-court{display:none}

/* --- La fenêtre ----------------------------------------------------------- */
.asst__fenetre{
  order:-1;width:370px;max-width:calc(100vw - 40px);
  border-radius:16px;overflow:hidden;
  background:#FFF9FB;                          /* le rose ivoire du site */
  border:1px solid rgba(215,160,170,.30);
  box-shadow:0 14px 40px rgba(80,20,52,.16);
  animation:asst-ouverture 300ms var(--ease-out,ease) both;
}
@keyframes asst-ouverture{
  from{opacity:0;transform:translateY(10px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.asst__tete{
  display:flex;align-items:center;gap:8px;
  padding:14px 12px 14px 16px;
  background:linear-gradient(115deg,#951753 0%,#7C1648 55%,#68153D 100%);
  color:#FFFFFF;
}
.asst__tete-txt{flex:1;min-width:0}
.asst__t{margin:0;font-size:14.5px;font-weight:600;line-height:1.3}
.asst__statut{margin:2px 0 0;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.72)}
/* Les deux commandes de l'en-tête : quarante-quatre pixels de cible, un rond
   de trente-deux dessiné dedans. */
.asst__rond{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  padding:0;border:0;background:none;cursor:pointer;color:#FFFFFF;
}
.asst__rond svg{
  box-sizing:content-box;padding:8px;border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:background 200ms var(--ease-out,ease);
}
@media (hover:hover){
.asst__rond:hover svg{background:rgba(255,255,255,.22)}
}
.asst__rond:focus-visible{outline:2px solid #F0B3D2;outline-offset:-4px;border-radius:12px}

.asst__corps{padding:16px}
/* Les deux publics : deux grandes entrées, et c'est la première chose qu'on
   voit — pas une salutation. */
.asst__publics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.asst__public{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;min-height:60px;padding:12px 16px;border-radius:12px;cursor:pointer;
  background:#FFFFFF;border:1px solid rgba(215,160,170,.42);
  font-family:inherit;text-align:left;
  transition:border-color 200ms var(--ease-out,ease),transform 200ms var(--ease-out,ease);
}
@media (hover:hover){
.asst__public:hover{border-color:#C32371;transform:translateY(-1px)}
}
.asst__public:focus-visible{outline:2px solid #C32371;outline-offset:2px}
.asst__public-t{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--plum,#32172A)}
.asst__public-s{font-size:12.5px;line-height:1.3;color:#857B83}

/* Puis les destinations : chacune est un lien, jamais une étape de plus. */
.asst__liens{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  animation:asst-liens 280ms var(--ease-out,ease) both;
}
@keyframes asst-liens{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.asst__lien{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:12px 16px;border-radius:12px;text-decoration:none;
  background:linear-gradient(105deg,#68153D 0%,#951753 42%,#C92D78 100%);
  color:#FFFFFF;font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.3;
  transition:filter 200ms var(--ease-out,ease);
}
@media (hover:hover){
.asst__lien:hover{filter:brightness(1.07)}
}
.asst__lien:focus-visible{outline:2px solid #C32371;outline-offset:3px}

/* --- Téléphone ------------------------------------------------------------
   La fenêtre prend presque toute la largeur, seize pixels de chaque côté, et
   s'ouvre depuis le bas. Le bouton remonte au-dessus de la barre de lecture,
   qui occupe déjà le bas de l'écran. */
@media (max-width:767px){
  /* Au-dessus de la barre de lecture, et franchement.

     La barre est posée à douze pixels du bas et mesure dix-huit pixels de
     haut : son arête haute est donc à trente. Le losange étant tourné d'un
     quart de tour, sa boîte rendue mesure soixante-cinq pixels de côté et non
     quarante-six — ses pointes y sont comprises. À quarante-huit, sa pointe
     basse n'était plus qu'à quelques pixels de la barre ; à soixante-deux, il
     en reste une vingtaine, et le repli d'écran des iPhone est compté en plus.

     Sur la fiche d'annonce, une barre de candidature s'ajoute au bas de
     l'écran : les deux repères montent alors d'un cran, et c'est offre.css
     qui le règle — elle seule sait que cette barre existe. */
  .asst{
    right:16px;left:16px;
    bottom:calc(62px + env(safe-area-inset-bottom,0px));
    align-items:flex-end;
  }
  /* Le losange est un carré tourné d'un quart de tour : ses pointes dépassent
     sa boîte de onze pixels de chaque côté. Sans cette marge, la pointe droite
     arrivait à cinq pixels du bord de l'écran, et la pointe basse touchait la
     barre de lecture. On décale donc la boîte de onze pixels, ce qui remet la
     pointe à seize pixels du bord — la fenêtre, elle, reste à seize. */
  .asst__socle{margin-right:11px}
  /* La bulle « Besoin d'aide ? » ne paraît plus sur un petit écran. Elle
     traversait la moitié de la largeur, se posait sur le contenu, et ce
     qu'elle disait, le losange le dit déjà en étant là. Son balisage reste —
     elle revient sur grand écran, où elle a la place. */
  .asst__invite{display:none}

  /* Le losange se resserre un peu — quarante-six pixels au lieu de
     cinquante-deux — et reste une cible confortable pour le doigt. */
  .asst__losange{width:46px;height:46px;border-radius:12px}
  .asst__fenetre{width:100%;max-width:none}
  /* Rangé pendant la descente : il glisse sous le bord de l'écran et ne
     recouvre plus le contenu qu'on lit. Il revient dès qu'on remonte. */
  .asst__socle{transition:transform .25s ease,opacity .25s ease}
  .asst.est-range .asst__socle{transform:translateY(140%);opacity:0;pointer-events:none}
  
  /* Le même déplacement qu'en grand écran : dix pixels, pas davantage. */
}

/* Mouvement réduit : les mêmes états, posés d'un coup. L'anneau cesse de
   tourner — c'est la seule chose qui bougeait en permanence. Le voile paraît
   sans fondu, mais il paraît : ce n'est pas une animation, c'est un état. */
/* Mouvement réduit : plus rien ne bouge de soi-même — ni le reflet du
   contour, ni le losange qui traverse. Les états restent les mêmes. */
/* Mouvement réduit : le reflet ne traverse plus, et rien ne se soulève. Les
   états, eux, ne changent pas. */
/* Mouvement réduit : plus rien ne bouge de soi-même — ni le reflet du contour,
   ni celui qui traverse. Les états, eux, ne changent pas. */
/* Mouvement réduit : ni le reflet ni l'éclat ne traversent, et rien ne se
   soulève. Les états, eux, ne changent pas. */
/* Mouvement réduit : ni reflet, ni éclat, ni inclinaison. L'étiquette paraît
   sans se déployer, et les états ne changent pas. */
/* Mouvement réduit : le reflet ne traverse plus, et le passage d'un état à
   l'autre se fait d'un coup. Les deux états, eux, ne changent pas. */
/* Mouvement réduit : le reflet ne traverse plus, l'invitation paraît sans
   glisser ni flouter. Les états, eux, ne changent pas. */
@media (prefers-reduced-motion:reduce){
  .asst__reflet{animation:none;opacity:0}
  .asst__losange,.asst__invite{transition:none}
  .asst__invite{filter:none}
  .asst__fenetre,.asst__liens{animation:none}
  .asst__voile{animation:none}
}

/* Sur téléphone, la carte des cookies occupe le bas de l'écran et recouvrait
   l'assistant (21/10/2026). Tant qu'elle est ouverte, l'assistant s'efface ;
   il revient dès que le choix est fait. */
@media (max-width:760px){
  body:has(.cons--carte) .asst{opacity:0;visibility:hidden;pointer-events:none}
}