/* =========================================================================
   MUSLIMA WORK — LE POP-UP DES RECHERCHES SANS RÉSULTAT

   Toutes les régions et toutes les catégories sont dans les menus, y compris
   celles où le site n'a rien à proposer. Quand on en choisit une, il faut
   bien lui répondre — et « aucun résultat » n'est pas une réponse.

   Cette feuille dessine cette réponse. Ce n'est ni une alerte ni une carte de
   formulaire : c'est une double page, un volet de couverture et un texte.

   LA COMPOSITION, ET SES RAISONS

   Deux zones, de largeurs volontairement inégales — un tiers, deux tiers.
   Une modale centrée et symétrique se lit comme un message d'application ;
   une composition qui penche se lit comme une page.

     · À GAUCHE, un volet étroit en PRUNE PROFOND — les trois tons de la carte
       de consentement, repris au pixel : #2E1220, #45122F, #5A1339. Une seule
       nuance framboise, dans l'angle bas, pour que le fond ne soit pas plat.
       Aucune image, aucune illustration.

       Il porte trois choses : le nom de la marque en petites capitales, une
       IMMENSE ÉPINGLE en filet coupée par les deux bords, et le losange nacré
       du site posé en bas. L'épingle déborde du volet — une forme tranchée
       par le cadre se lit mieux qu'une vignette au milieu du vide — et son
       trait fait un pixel et demi quelle que soit sa taille : l'épaisseur est
       écrite dans la grille de 24, non en pixels d'écran.

     · À DROITE, l'IVOIRE du site (#FFFBFD, #FFF9FB) et rien d'autre. Pas de
       rose diffus, pas de dégradé de fond : c'est le volet qui porte la
       couleur, et lui seul. Le titre y est plus petit qu'avant et son
       interligne plus serré (1,12) — une composition se tient par la mesure,
       non par la taille.

   LE RESTE

     · une bordure d'un pixel, rose à seize pour cent : un filet, pas un
       cadre ;
     · un rayon de 22 px, et une ombre très diluée, montée du prune — aucun
       gros halo gris, rien de collé ;
     · un reflet qui traverse le BORD SUPÉRIEUR une fois à l'ouverture, puis
       ne revient jamais. Deux pixels de haut, et c'est tout ;
     · une croix qui EST le losange de la FAQ, repris tel quel : un carré du
       site tourné de quarante-cinq degrés, plein du dégradé de marque, une
       croix blanche au milieu. Aucun cadre, aucun filet, aucun fond derrière ;
     · un voile prune très transparent derrière, et un flou modéré : on doit
       continuer de reconnaître la page qu'on quitte des yeux.

   Le bouton principal ne réinvente rien : il reprend le dégradé officiel du
   site, celui de `.btn--primary` dans boutons.css — les cinq mêmes couleurs,
   la même rampe de 180 %, la même fenêtre calée sur le framboise, le même
   départ vers le bordeaux au survol, la même flèche qui avance de trois
   pixels. La seule différence est son satiné, qui passe une fois au lieu de
   tourner en boucle : dans une fenêtre qu'on vient d'ouvrir, une brillance
   qui clignote gêne la lecture.

   Sommaire
     1. Le fond
     2. La carte, sa grille et son reflet
     3. Le volet : surtitre, épingle, losange
     4. La croix : le losange de la FAQ
     5. Le texte
     6. Les deux boutons
     7. La phrase finale et la zone de politesse
     8. L'écran sans résultat, derrière
     9. Tablette
    10. Téléphone : le volet devient un bandeau
    11. Mouvement refusé
   ========================================================================= */

/* =========================================================================
   1. LE FOND
   Au-dessus de tout ce que la page publique empile — le tiroir de contact
   monte à 540, c'est le plus haut.

   Le voile est prune et très transparent. Un fond neutre virait au gris sale
   et ternissait la fenêtre ; celui-ci appartient à la palette, et le flou
   fait le reste du travail d'éloignement.
   ========================================================================= */
.rv-fond{
  position:fixed;inset:0;z-index:560;
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  background:rgba(46,18,32,.32);
  -webkit-backdrop-filter:blur(8px) saturate(118%);
  backdrop-filter:blur(8px) saturate(118%);
  overscroll-behavior:contain;
}

/* =========================================================================
   2. LA CARTE, SA GRILLE ET SON REFLET
   Deux colonnes inégales, et une hauteur entièrement dictée par le contenu :
   aucune min-height nulle part. Le maximum n'est qu'un garde-fou pour les
   écrans bas — c'est alors le contenu qui défile, le volet ne bouge pas.
   ========================================================================= */
.rv-carte{
  position:relative;
  width:100%;max-width:700px;
  display:grid;
  grid-template-columns:minmax(196px,32%) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  max-height:88vh;
  border:1px solid rgba(201,45,120,.16);
  border-radius:22px;
  background:var(--mw-blanc,#FFFBFD);
  /* Trois couches très diluées : le contact, la diffusion, la teinte prune
     qui empêche l'ombre d'être grise. Elle pose la fenêtre, elle ne la
     soulève pas sur un bloc sombre. */
  box-shadow:
    0 1px 2px rgba(50,21,37,.03),
    0 16px 40px -28px rgba(70,20,50,.26),
    0 54px 100px -64px rgba(70,20,50,.30);
  overflow:hidden;
}

/* Le reflet du bord supérieur. Deux pixels de haut, et un passage unique à
   l'ouverture — le script s'en charge. Posé hors cadre par la feuille de
   style, et non par le script : si le mouvement est refusé, il reste où il
   est — dehors — au lieu de s'arrêter en travers du bord comme une rayure.

   Ses flancs sont rose poudré et non blancs : au-dessus du volet prune, un
   trait clair suffirait ; au-dessus de l'ivoire, il ne se verrait pas. */
.rv-liseret{
  position:absolute;top:0;left:0;right:0;height:2px;z-index:6;
  pointer-events:none;overflow:hidden;
}
.rv-liseret__reflet{
  position:absolute;top:0;bottom:0;left:0;
  width:46%;
  transform:translateX(-130%);
  background:linear-gradient(90deg,
    rgba(240,179,210,0) 0%,
    rgba(240,179,210,.85) 28%,
    rgba(255,255,255,.98) 50%,
    rgba(240,179,210,.85) 72%,
    rgba(240,179,210,0) 100%);
}

/* =========================================================================
   3. LE VOLET
   Prune profond, une nuance framboise dans l'angle bas, et rien à lire sinon
   le nom de la marque. Il prend toute la hauteur de la carte — c'est la
   grille qui l'étire, aucune hauteur n'est écrite.
   ========================================================================= */
.rv-volet{
  position:relative;
  overflow:hidden;
  padding:26px 20px;
  /* Les trois tons de la carte de consentement, repris tels quels : le prune
     profond part, le framboise assourdi arrive. Rien de noir. */
  background:
    radial-gradient(118% 88% at 4% 100%,
      rgba(201,45,120,.34) 0%,
      rgba(201,45,120,.10) 42%,
      rgba(201,45,120,0) 68%),
    linear-gradient(158deg,#2E1220 0%,#45122F 58%,#5A1339 100%);
}

/* Le nom de la marque, en petites capitales. C'est le seul texte du volet, et
   c'est un vrai texte : il reste dans le document et se lit. */
.rv-volet__sur{
  position:relative;z-index:3;
  margin:0;
  font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  line-height:1.5;
  color:rgba(255,244,250,.72);
}

/* L'épingle. Immense, en filet, ancrée au bas du volet et plus large que lui :
   elle est donc coupée à gauche, à droite et par le bas. Un signe, pas une
   image — et surtout pas un pictogramme agrandi.

   L'épaisseur du trait est écrite dans la grille de 24 : à 0,12 sur une
   épingle de 300 px, le filet fait un pixel et demi. Il ne grossit pas avec
   elle, et ne demande aucune propriété exotique pour cela.

   L'opacité est basse à dessein : c'est un fond, rien ne se lit devant. */
.rv-pin{
  position:absolute;left:50%;bottom:-16%;
  width:134%;aspect-ratio:1;
  translate:-50% 0;
  z-index:1;pointer-events:none;
  color:rgba(255,238,247,.30);
}
.rv-pin svg{width:100%;height:100%;display:block}

/* Le losange nacré du site, repris au pixel de la carte de consentement et de
   la barre des deux panneaux : le même dégradé, le même filet, la même lueur.
   Vingt-deux pixels, posé en bas du volet — et immobile. Un signe qui
   scintille en permanence devient une publicité. */
.rv-volet__los{
  position:absolute;left:22px;bottom:22px;z-index:3;
  width:22px;height:22px;
  rotate:45deg;border-radius:3px;
  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,.42),0 0 14px rgba(240,179,210,.42);
}

/* =========================================================================
   4. LA CROIX : LE LOSANGE DE LA FAQ

   Rien n'est dessiné ici : c'est le losange des questions ouvertes de
   l'accueil, repris tel qu'il paraît à l'écran. Soit, dans la cascade de la
   page d'accueil — style.css puis accueil.css :

     .faq__ico                 32 px, rayon var(--r-xs), grille centrée
     .faq__item.is-open        rotate(45deg), var(--grad-rose),
       .faq__ico               border-color:transparent, color:#fff, signe 14 px

   Deux valeurs sont écrites en clair plutôt qu'en variable, et c'est
   volontaire :

     · `--grad-rose`. La page des annonces ne charge pas accueil.css, et
       style.css en garde l'ANCIENNE définition — un rose plus clair, d'avant
       la palette actuelle. `var(--grad-rose)` donnerait donc ici un autre
       losange que celui de la FAQ. Le dégradé recopié est celui d'accueil.css,
       c'est-à-dire celui qu'on voit sur le site ;
     · la taille. Trente-deux pixels tournés mesurent quarante-cinq de coin à
       coin ; vingt-huit en mesurent quarante, la valeur demandée. Le signe,
       lui, garde ses quatorze pixels.

   Le bouton, lui, n'a AUCUN dessin : ni fond, ni filet, ni rayon. Il n'est
   qu'une cible de quarante-quatre pixels — la taille d'un doigt — autour du
   losange, et il ne se voit pas.
   ========================================================================= */
.rv-x{
  position:absolute;top:16px;right:16px;z-index:7;
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;border:0;background:none;
  cursor:pointer;
}
.rv-x__los{
  display:grid;place-items:center;
  width:28px;height:28px;
  rotate:45deg;
  border-radius:var(--r-xs,4px);
  /* Le dégradé de marque d'accueil.css — voir plus haut. */
  background:linear-gradient(105deg,#68153D 0%,#951753 42%,#C92D78 100%);
  color:#FFFFFF;
  /* Le survol est celui de la FAQ : rien qui bouge, rien qui change de
     forme. Un septième de clarté en plus, et c'est tout. */
  transition:filter 200ms cubic-bezier(.22,.68,.28,1),
             box-shadow 200ms cubic-bezier(.22,.68,.28,1);
}
/* La rotation inverse : la croix reste droite dans un losange tourné. */
.rv-x__los svg{rotate:-45deg}

.rv-x:hover .rv-x__los{filter:brightness(1.07)}

/* L'anneau de focus suit le losange — il tourne avec lui — et se tient à
   distance par un liseré ivoire : sur l'ivoire du contenu c'est le framboise
   qui se voit, sur le prune du bandeau c'est l'ivoire. Il ne paraît qu'au
   clavier, et ne laisse rien derrière lui. */
.rv-x:focus-visible{outline:none}
.rv-x:focus-visible .rv-x__los{
  box-shadow:0 0 0 2px var(--mw-blanc,#FFFBFD),0 0 0 4px var(--mw-accent,#C92D78);
}

/* =========================================================================
   5. LE TEXTE
   Le contenu défile si — et seulement si — l'écran l'impose : `min-height:0`
   est ce qui autorise une cellule de grille à devenir plus petite que son
   contenu, et donc à défiler. Sans elle, la carte déborderait au lieu de se
   plier.
   ========================================================================= */
.rv-corps{
  position:relative;
  min-width:0;min-height:0;
  padding:34px 36px 30px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* L'ivoire du site, à peine dégradé : assez pour que le blanc ait une
     profondeur, pas assez pour qu'on y voie une couleur. */
  background:linear-gradient(168deg,#FFFBFD 0%,#FFF9FB 100%);
}

.rv-t{
  margin:0 0 14px;
  /* Plus petit qu'avant, et l'interligne serré : le titre tient la page par
     sa mesure, non par sa masse. */
  font-size:clamp(21px,1.05vw + 15px,26.5px);
  font-weight:600;line-height:1.12;
  letter-spacing:-.016em;
  color:var(--plum,#321525);
  text-wrap:balance;
  /* La croix occupe le coin : la première ligne s'arrête avant elle. */
  padding-right:46px;
}
/* Le nom de la région ou de la catégorie, en framboise et d'un seul tenant :
   « Provence-Alpes-Côte d'Azur » ne se coupe pas au milieu d'un trait
   d'union, et « Comptabilité et finance » ne se coupe pas après « et ». */
.rv-t__cle{
  color:var(--mw-accent,#C92D78);
  white-space:nowrap;
}

/* Une mesure de lecture, non la largeur de la colonne : sous une trentaine de
   mots, une ligne trop longue se reprend mal. */
.rv-p{
  margin:0 0 22px;
  font-size:15px;line-height:1.62;
  color:rgba(50,21,37,.80);
  max-width:42ch;
}

/* =========================================================================
   6. LES DEUX BOUTONS
   L'un sous l'autre, à la même largeur. Empilés, ils font une colonne ; côte
   à côte dans une zone déjà étroite, ils faisaient deux blocs serrés.
   ========================================================================= */
.rv-actions{
  display:grid;gap:10px;
}

.rv-b{
  --h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  /* Une hauteur MINIMALE, non une hauteur : à 320 px un libellé peut passer
     à la ligne, et un bouton de hauteur fixe l'aurait tranché. Sur une seule
     ligne, la valeur ne change rien — le rembourrage reste plus bas que la
     hauteur demandée. */
  min-height:var(--h);padding:10px 22px;
  border-radius:10px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.25;
  letter-spacing:-.008em;
  text-align:center;text-decoration:none;
  cursor:pointer;
}
.rv-b:focus-visible{
  outline:2px solid var(--mw-accent,#C92D78);
  outline-offset:3px;
}

/* --- L'action principale --------------------------------------------------
   Le dégradé officiel du site, repris à l'identique de `.btn--primary` dans
   boutons.css : les cinq mêmes couleurs, la rampe de 180 %, la fenêtre calée
   sur la moitié claire, et le départ vers le bordeaux au survol. Rien n'est
   inventé ici — un second dégradé rose aurait fait deux roses. */
.rv-b--1{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid transparent;
  color:#FFFFFF;
  background-image:linear-gradient(105deg,#68153D 0%,#7C1648 26%,#951753 52%,#B22065 76%,#C92D78 100%);
  background-size:180% 100%;
  background-position:100% 0;
  background-origin:border-box;
  background-color:#951753;          /* le repli, si le dégradé ne peut être peint */
  box-shadow:0 6px 18px rgba(149,23,83,.20);
  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);
}
.rv-b--1:hover{
  background-position:0% 0;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(178,32,101,.28);
}
/* La flèche avance avec le regard, de trois pixels — comme sur tous les
   boutons principaux du site. L'icône de partage, elle, ne bouge pas : c'est
   un signe, pas une direction. */
.rv-b__arw{display:inline-flex;align-items:center;margin-left:-2px}
.rv-b__arw svg{transition:transform 200ms cubic-bezier(.22,.68,.28,1)}
.rv-b--1:hover .rv-b__arw svg{transform:translateX(3px)}

/* Le satiné, en un seul passage. Le script l'anime à l'ouverture ; hors
   script il reste hors cadre, et le bouton est simplement plein. */
.rv-b__reflet{
  position:absolute;top:-60%;bottom:-60%;left:0;width:34%;
  z-index:1;pointer-events:none;
  transform:translateX(-170%) 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);
}
/* Le texte et les deux icônes restent au-dessus du reflet. */
.rv-b--1 > *:not(.rv-b__reflet){position:relative;z-index:2}
.rv-b__ico{display:inline-flex;align-items:center}

/* --- L'action secondaire --------------------------------------------------
   Plus discrète que la principale : fond transparent, un filet rose très
   fin, le texte prune, et deux pixels de moins en hauteur. Au survol elle
   prend le framboise du site — jamais un gris de navigateur. */
.rv-b--2{
  --h:44px;
  border:1px solid rgba(201,45,120,.24);
  background:transparent;
  color:var(--plum,#321525);
  font-size:14px;
  transition:
    background-color 220ms cubic-bezier(.22,.68,.28,1),
    border-color 220ms cubic-bezier(.22,.68,.28,1),
    color 220ms cubic-bezier(.22,.68,.28,1);
}
.rv-b--2:hover{
  background-color:rgba(201,45,120,.05);
  border-color:#951753;
  color:#951753;
}

/* =========================================================================
   7. LA PHRASE FINALE ET LA ZONE DE POLITESSE
   Plus de filet horizontal : la phrase a son propre signe, le losange de la
   marque, et il marque le temps aussi bien qu'une ligne — sans faire un pied
   de page.
   ========================================================================= */
.rv-pied{
  display:flex;align-items:flex-start;gap:9px;
  margin:22px 0 0;
  font-size:12.5px;line-height:1.55;
  font-style:italic;
  color:rgba(50,21,37,.68);
  max-width:40ch;
}
.rv-pied__los{
  flex:none;
  width:7px;height:7px;margin-top:5px;
  rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#C92D78 0%,#951753 100%);
}

/* La zone de politesse existe toujours dans le document — un lecteur d'écran
   n'annonce que ce qui change dans une zone déjà présente. Mais elle ne
   RÉSERVE aucune place : sans message, elle n'a ni hauteur ni marge. */
.rv-dit{
  margin:0;
  font-size:13px;font-weight:500;line-height:1.5;
  color:var(--mw-accent,#C92D78);
}
.rv-dit:not(:empty){margin-top:12px}

/* =========================================================================
   8. L'ÉCRAN SANS RÉSULTAT, DERRIÈRE
   Masqué tant que le pop-up est ouvert : on ne montre pas une page vide EN
   PLUS de la fenêtre. Il reparaît dès qu'elle se ferme — c'est le composant
   qui pose et retire « rv-ouvert » sur <html>.
   ========================================================================= */
.rv-ouvert .ann__vide{display:none}

/* =========================================================================
   9. TABLETTE
   Les deux zones restent — la largeur le permet encore. Le volet se resserre,
   le contenu garde sa mesure de lecture.
   ========================================================================= */
@media (max-width:860px){
  .rv-carte{
    max-width:620px;
    grid-template-columns:minmax(160px,29%) minmax(0,1fr);
  }
  .rv-volet{padding:24px 16px}
  .rv-volet__los{left:18px;bottom:18px;width:20px;height:20px}
  .rv-corps{padding:30px 28px 26px}
  .rv-t{font-size:23px;padding-right:44px}
  .rv-p{font-size:14.5px;margin-bottom:20px}
}

/* =========================================================================
   10. TÉLÉPHONE : LE VOLET DEVIENT UN BANDEAU
   Deux colonnes écrasées ne se lisent pas. Le volet passe en haut, sur toute
   la largeur, et garde ses trois éléments : le nom de la marque, une part de
   l'épingle, le losange. Le contenu suit dessous, sur l'ivoire.

   L'épingle est ramenée vers la droite et agrandie : dans un bandeau bas, une
   épingle centrée n'en montrerait que la pointe. Elle s'arrête avant le coin
   où se tient la croix.
   ========================================================================= */
@media (max-width:640px){
  .rv-fond{padding:16px}

  .rv-carte{
    max-width:none;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    border-radius:20px;
    max-height:90vh;
  }

  .rv-volet{
    min-height:118px;
    display:flex;align-items:flex-start;
    /* La croix occupe le coin droit du bandeau : le nom s'arrête avant. */
    padding:20px 66px 20px 20px;
  }
  /* Ancrée SOUS le surtitre et débordant à droite : on en voit le dôme et
     l'œil, coupés par le bas et par le côté. Ni le nom de la marque ni la
     croix n'ont de trait qui leur passe dessus. */
  .rv-pin{
    left:auto;right:6%;top:8px;bottom:auto;
    width:44%;height:auto;aspect-ratio:1;
    translate:0 0;
  }
  .rv-volet__los{left:20px;bottom:20px;width:20px;height:20px}

  .rv-corps{padding:26px 20px 24px}

  .rv-t{font-size:22px;padding-right:0;margin-bottom:12px}
  .rv-p{font-size:15px;line-height:1.6;margin-bottom:20px;max-width:none}

  .rv-b{--h:50px;font-size:15px}
  .rv-b--2{--h:48px;font-size:14.5px}

  .rv-pied{margin-top:20px;max-width:none}
}

/* Le nom d'une région peut être très long — « Provence-Alpes-Côte d'Azur »
   sur 320 px. Il garde son insécable, mais on l'autorise alors à se couper
   plutôt qu'à déborder : rien ne doit sortir du cadre horizontalement. */
@media (max-width:380px){
  .rv-t{font-size:20.5px}
  .rv-t__cle{white-space:normal;overflow-wrap:break-word}
  .rv-volet{min-height:104px;padding:18px 62px 18px 18px}
  .rv-pin{top:6px;width:48%}
  .rv-volet__los{left:18px;bottom:18px}
  .rv-corps{padding:24px 18px 22px}

  /* La flèche s'en va et le rembourrage se resserre : « Partager Muslima
     Work » tient alors sur une seule ligne. Elle n'était là que pour
     l'accord avec les autres actions du site — à cette largeur, c'est le
     libellé qui compte. */
  .rv-b{--h:48px;padding-inline:14px;font-size:14.5px;gap:9px}
  .rv-b--2{--h:46px;font-size:14px}
  .rv-b__arw{display:none}
}

/* Écran très bas — un téléphone couché : le contenu défile, et la carte cesse
   d'essayer de tenir entière. Le bandeau se réduit sans disparaître. */
@media (max-height:520px){
  .rv-carte{max-height:94vh}
  .rv-corps{padding-top:26px;padding-bottom:22px}
  .rv-volet{min-height:88px}
}

/* =========================================================================
   11. MOUVEMENT REFUSÉ
   Plus de reflets, plus de soulèvement — le script s'en charge de son côté.
   Ici on neutralise ce qui vient de la feuille : les deux reflets restent
   hors cadre, et rien ne se soulève.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .rv-fond{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  .rv-liseret__reflet,.rv-b__reflet{display:none}
  .rv-b--1,.rv-b--2{transition:background-color .01ms,border-color .01ms,color .01ms}
  .rv-b--1:hover,.rv-b--2:hover{transform:none}
  .rv-b__arw svg{transition:none}
  .rv-b--1:hover .rv-b__arw svg{transform:none}
  .rv-x__los{transition:none}
  .rv-x:hover .rv-x__los{filter:none}
}