/* Feuille de correctifs communs du site Börja.
   Posée le 19.09.2026.

   Le site n'avait aucune feuille de style commune : chaque page porte son CSS en ligne, et
   premium.css n'est chargé que sur une partie des pages. C'est ce qui rendait impossible la
   correction d'un défaut de finition sans réécrire deux cents fichiers. Cette feuille existe
   pour ça, et pour rien d'autre : on n'y met que ce qui doit s'appliquer partout. */

/* ---------------------------------------------------------------------------
   1. La pastille de contact reste AU CENTRE, sur tous les formats. Instruction du
   fondateur, 19.09.2026 au soir. Je l avais deplacee dans le coin droit le meme
   jour pour regler un recouvrement de texte : mauvais arbitrage, annule.

   Ce qui reste, et qui est dit au fondateur plutot que maquille : un element fixe
   centre passe sur une ligne de texte centree pour une plage de hauteurs d ecran.
   Mesure du 19.09 a 390 px de large : aucun recouvrement a 926, 740 et 667 px de
   haut, deux pixels de marge a 844, quatorze pixels de recouvrement a 800.
   Les deux seules vraies sorties sont un bouton hors de la colonne de texte, ce
   que le fondateur a refuse, ou un hero plus court, qui est une decision de design.
   Aucune regle n est posee ici tant que ce n est pas tranche.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1 bis. Le bandeau de consentement recouvrait la pastille de contact.
   Defaut introduit le 19.09.2026 par le bandeau lui meme : il occupe le bas de
   l ecran avec un z-index de 99999, et la pastille vit a 32 px du bas. Mesure :
   elementFromPoint au centre de la pastille rendait le bandeau, donc le bouton
   etait inclicquable tant que le visiteur n avait pas repondu.
   Tant que le bandeau est la, la pastille monte au dessus de lui. Des que le
   visiteur a repondu, le bandeau disparait et la pastille retrouve sa place.
   --------------------------------------------------------------------------- */
body:has(#borja-cc) #fabWrap,
body:has(#borja-cc) .fab-wrap {
  bottom: 116px;
}
@media (max-width: 600px) {
  body:has(#borja-cc) #fabWrap,
  body:has(#borja-cc) .fab-wrap {
    bottom: 200px;
  }
}

/* ---------------------------------------------------------------------------
   2. La barre de navigation mobile tranchait le texte au milieu d'un mot.
   Constat du 10.09 : .nav-mobile-scroll défile réellement, scrollWidth 453 pour
   174 pixels visibles, donc rien n'est inaccessible. Mais le dernier libellé était
   coupé net contre le bouton, et le chevron qui signale le défilement était presque
   invisible. Un fondu sur le bord droit dit au lecteur qu'il reste quelque chose.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-mobile-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .nav-mobile-arrow {
    opacity: .85;
  }
}

/* ---------------------------------------------------------------------------
   3. Liens de pied de page ajoutés le 19.09 : ils héritent du style des voisins
   quand un .ft-nav existe. Sur les pieds de page sans navigation, on leur donne
   au moins une couleur lisible plutôt que le bleu par défaut du navigateur.
   --------------------------------------------------------------------------- */
footer a[href="/confidentialite"],
footer a[href="/mentions-legales"] {
  text-decoration: none;
}
footer a[href="/confidentialite"]:hover,
footer a[href="/mentions-legales"]:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   3. La pastille de contact : meme apparence et meme place sur toutes les pages.
   Demande du fondateur, 19.09.2026. Deux defauts a la source :
     a. elle n existait que sur 35 pages sur 203 ;
     b. son texte etait declare clair, rgba(245,245,247,.80), sur un panneau blanc
        a 72 pour cent. Du blanc sur du blanc, donc illisible.
   Le texte est force en noir, en theme clair comme en theme sombre, et le panneau
   devient opaque pour ne plus dependre de ce qu il survole.
   --------------------------------------------------------------------------- */
.fab-panel {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, .08) !important;
}
.fab-action {
  color: #1d1d1f !important;
}
.fab-wrap:not(.open) .fab-icon {
  color: #1d1d1f !important;
}
.fab-wrap.open .fab-icon {
  color: #ffffff !important;
}

/* Le composant complet, pour les pages qui ne le portaient pas. Les pages qui
   l avaient deja gardent leurs propres regles, posees plus bas dans leur document. */
.fab-wrap {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1);
}
.fab-wrap.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; }
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.82);
  border: .5px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.fab-wrap.open .fab { background: rgba(0,113,227,.92); border-color: transparent; }
.fab-icon {
  font-size: 22px; font-weight: 200; line-height: 1;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), color .25s;
  user-select: none;
}
.fab-wrap.open .fab-icon { transform: rotate(45deg); }
.fab-panel {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.94);
  transform-origin: bottom center;
  opacity: 0; pointer-events: none;
  width: 196px; border-radius: 18px; padding: 6px;
  border: .5px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.12);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .28s cubic-bezier(.16,1,.3,1);
}
.fab-wrap.open .fab-panel {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}
.fab-action {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  transition: background .14s;
}
.fab-action:hover { background: rgba(0,0,0,.04); }
.fab-action-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}