/* =========================================================
   NEXT BRIDGE — BLOC DE CONTACT
   Deux canaux ouverts en permanence, WhatsApp et Telegram.
   Toutes les classes portent le préfixe nbc- : le site compte
   déjà des .ct, .ct-c et .ct-duo dans la page cashback et dans
   les fiches produit, et une collision les repeindrait.

   DÉROGATION ASSUMÉE À LA CHARTE
   nextbridge.css ouvre ses règles invariables par « aucun rayon
   de bordure ». Ces deux capsules y dérogent, sur demande
   explicite. La dérogation est contenue ici et nulle part
   ailleurs : aucune autre surface du site n'est arrondie, et le
   rayon ne passe par aucun token, pour qu'il reste impossible
   de l'étendre par inadvertance à un bloc voisin.

   Le reste de la charte tient : aucune ombre portée, aucun
   dégradé, aucune animation, et les seules transitions portent
   sur la couleur, en 150 ms.
   ========================================================= */

.nbc{
  position:fixed;
  inset-block-end:clamp(16px,2.6vw,30px);
  inset-inline-end:clamp(16px,3vw,40px);
  z-index:80;                   /* au-dessus du contenu, sous le voile (90)
                                   et sous la séquence d'accueil (200) */
  display:flex;
  flex-direction:column;
  gap:10px;
  /* stretch et non flex-end : les deux capsules prennent la largeur de la
     plus longue, et leurs flèches tombent sur la même verticale. Alignées
     seulement par la droite, elles avaient deux largeurs différentes et
     l'empilement paraissait accidentel. */
  align-items:stretch;
}

/* La séquence d'entrée de l'accueil occupe tout l'écran : rien ne passe devant. */
body.fige .nbc{display:none}

/* ---------- la capsule ----------
   999px et non 24px : la valeur doit rester supérieure à toute hauteur que
   la capsule puisse prendre, sans quoi un libellé qui passe sur deux lignes
   dans une langue plus longue donnerait des coins presque droits. */
.nbc-l{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:46px;
  padding-block:11px;
  padding-inline:24px 20px;
  border-radius:999px;
  background:var(--navy);
  border:1px solid var(--rule-dark);
  text-decoration:none;
  color:var(--paper);
  transition:background-color .15s ease,color .15s ease;
}
/* Le survol éclaircit la capsule elle-même, il ne l'assombrit pas : la
   capsule passe au-dessus du corps de page couleur papier puis du pied en
   navy-deep, et un survol plus sombre se serait dissous dans le pied. */
.nbc-l:hover,
.nbc-l:focus-visible{background:#15304f;color:#fff}
.nbc-l:focus-visible{outline:1px solid var(--steel);outline-offset:2px}

.nbc-n{
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}

/* La flèche annonce une sortie du site. Elle part vers la fin de ligne, donc
   vers la gauche en arabe : le retournement se fait sur l'axe horizontal,
   sans second tracé à maintenir. */
.nbc-f{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-inline-start:auto;
  fill:none;
  stroke:var(--steel);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .15s ease;
}
[dir="rtl"] .nbc-f{transform:scaleX(-1)}
.nbc-l:hover .nbc-f,
.nbc-l:focus-visible .nbc-f{stroke:var(--paper)}

/* ---------- téléphone ----------
   Les deux capsules passent côte à côte et se partagent la largeur. Empilées,
   elles auraient mangé cent dix pixels de hauteur sur un écran de 844 px.
   Elles restent détachées des bords : une capsule collée au bord de l'écran
   perd sa forme, les arrondis n'ayant plus rien contre quoi se détacher. */
@media(max-width:720px){
  .nbc{
    inset-inline:12px;
    inset-block-end:12px;
    flex-direction:row;
    gap:8px;
  }
  .nbc-l{
    flex:1 1 0;
    justify-content:space-between;
    gap:10px;
    padding-inline:20px 16px;
  }
  .nbc-n{font-size:14px}
  .nbc-f{width:15px;height:15px}

  /* Le pied de page passait sous les capsules et devenait illisible. La
     réserve se prend dans le pied lui-même, et non en marge basse du corps :
     en marge basse, c'était le fond de page couleur papier qui apparaissait
     entre la fin du pied et les capsules. */
  body.a-nbc footer::after{content:"";display:block;height:74px}
}

/* Sous 380 px, « WhatsApp » et sa flèche ne tiennent plus côte à côte dans
   une demi-largeur : la flèche part, le nom reste. */
@media(max-width:379px){
  .nbc-f{display:none}
  .nbc-l{justify-content:center;padding-inline:14px}
}

/* Le visiteur qui refuse les animations ne perd rien : il n'y en a aucune. */
@media print{.nbc{display:none}}