/* ============================================================
   share.css — Module de partage local GranuloShop / Topas
   v1.3 (16/07/2026)
   v1.3 : anneau jaune 7 px sur le bouton (meme traitement que
          Shop — groupe « outils » distinct du groupe contact).
          Hover : l'anneau se remplit (transition 150 ms).
   v1.2 : CDC ameliorations v1.1 —
     - le bouton est un 4e <li> DANS #kontaktnavi > ul.nav :
       plus AUCUN position:absolute / left / top pour le bouton,
       le layout flex du site fait tout (points 2 et 3 du CDC) ;
     - icone Contact (crayon, .tps.contact) masquee sous 992 px :
       le Share recupere naturellement l'espace (point 2) ;
     - menu mobile : position fixe pleine largeur, ordonnee top
       calculee par share.js depuis le bouton (aucune constante).
   v1.1 : icones du menu agrandies (21 px).
   Charte : #FFED00 / #000, border-radius:0, Lato, uppercase.
   Aucun !important.
   ============================================================ */

/* ── Le bouton : anneau jaune 7 px, remplissage au survol ── */
li.gs-share-wrap {
  display: flex;
  align-items: center;
  position: relative;       /* ancre du menu deroulant (overlay) */
  margin-left: 14px;        /* "un peu separe" du bouton Shop */
}

.gs-share-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 7px solid #FFED00;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  color: #000;
  line-height: 1;
  transition: background .15s;
}
.gs-share-trigger .ti {
  font-size: 20px;
  line-height: 1;
}
.gs-share-trigger:hover,
.gs-share-trigger:focus-visible {
  background: #FFED00;
}
.gs-share-trigger:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* ── Mobile / tablette (< lg) : masquer l'icone Contact (crayon).
      Telephone et e-mail restent ; le Share prend la place.
      Deux regles volontairement separees (une liste avec :has
      invaliderait tout le selecteur sur un vieux moteur) :
      1) cible robuste par contenu (.tps.contact) ;
      2) repli positionnel (3e item) pour moteurs sans :has(). ── */
@media (max-width: 991.98px) {
  #kontaktnavi li.nav-item:has(.tps.contact) { display: none; }
}
@supports not selector(:has(a)) {
  @media (max-width: 991.98px) {
    #kontaktnavi ul.nav > li.nav-item:nth-child(3) { display: none; }
  }
}

/* ── Menu : overlay sous le bouton (desktop) ── */
.gs-share-menu {
  display: none;
  position: absolute;       /* overlay ancre sur le li, pas du layout */
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 16px));
  margin: 4px 0 0 0;
  padding: 0 0 .4rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  font-size: .75rem;
  color: #000;
  text-transform: uppercase;
}
.gs-share-menu-open { display: block; }
.gs-share-menu-right { left: auto; right: 0; }

/* Mobile : overlay pleine largeur ; l'ordonnee (top) est posee par
   share.js d'apres la position reelle du bouton — aucune constante. */
.gs-share-menu-mobile {
  position: fixed;
  left: 8px;
  right: 8px;
  min-width: 0;
  max-width: none;
}

.gs-share-header {
  padding: .5rem 1rem .9rem 1rem;
  font-family: 'Lato Bold', Arial, sans-serif;
}
.gs-share-header .line-bottom { position: relative; }
.gs-share-header .line-bottom:after {
  content: "";
  background: #FFED00;
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 4px;
  width: 60%;
}

.gs-share-li { margin: 0; }

.gs-share-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .32rem 1rem;
  border: 0;
  background: none;
  font-family: 'Lato Regular', Arial, sans-serif;
  font-weight: 300;
  font-size: .75rem;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.gs-share-item .ti {
  font-size: 21px;
  width: 26px;
  text-align: center;
}
.gs-share-item:hover,
.gs-share-item:focus-visible {
  color: #16181b;
  background-color: #e9ecef;
  outline: none;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .gs-share-item { padding: .55rem 1rem; }   /* cibles tactiles */
}

.gs-share-sep {
  height: 0;
  margin: .35rem 1rem;
  border-top: 1px solid #e9ecef;
}

/* ── Feedback discret (aria-live), overlay sous le bouton ── */
.gs-share-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  margin-top: 4px;
  padding: .3rem .7rem;
  background: #000;
  color: #FFED00;
  font-family: 'Lato Bold', Arial, sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100vw - 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.gs-share-feedback-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Modale QR locale ── */
.gs-share-qr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.gs-share-qr-backdrop[hidden] { display: none; }

.gs-share-qr-dialog {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  padding: 1.1rem 1.3rem 1.2rem;
  max-width: 340px;
  width: calc(100% - 32px);
  text-align: center;
}
.gs-share-qr-title {
  font-family: 'Lato Bold', Arial, sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 1.1rem;
}
.gs-share-qr-title .line-bottom { position: relative; }
.gs-share-qr-title .line-bottom:after {
  content: "";
  background: #FFED00;
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 4px;
  width: 50%;
}
.gs-share-qr-holder svg {
  width: 240px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.gs-share-qr-url {
  margin-top: .7rem;
  font-size: .68rem;
  word-break: break-all;
  color: #555;
}
.gs-share-qr-close {
  margin-top: .9rem;
  padding: .45rem 1.4rem;
  font-size: .75rem;
  text-transform: uppercase;
  border-radius: 0;
  background: #000;
  color: #FFED00;
  border: 1px solid #000;
  cursor: pointer;
}
.gs-share-qr-close:hover,
.gs-share-qr-close:focus-visible {
  background: #FFED00;
  color: #000;
}