/* ===== Fixes statiques pour pages Wix sans JS ===== */

/* Custom elements Wix : forcer le rendu block */
wix-dropdown-menu,
wix-image,
wix-video,
wix-iframe,
wix-bg-image,
wix-bg-media,
wix-bg-overlay,
wix-element {
  display: block;
}

/* Éléments cachés en attendant que le JS Wix démarre */
.hidden-during-prewarmup,
[data-hide-prejs] {
  visibility: visible !important;
  opacity: 1 !important;
}
body[data-js-loaded] [data-hide-prejs],
body [data-hide-prejs] {
  visibility: visible !important;
}

/* Header / navigation : forcer l'affichage */
#SITE_HEADER,
#SITE_HEADER_WRAPPER,
header.SITE_HEADER,
nav,
wix-dropdown-menu nav,
wix-dropdown-menu ul {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Galeries : tout afficher (le lazy-loading JS est désactivé) */
.gallery-item,
.gallery-item-visible,
[data-idx] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Anim Wix figée en attendant data-motion-enter ===== */
[id]:not([data-motion-enter="done"]) {
  animation-play-state: running !important;
  animation-delay: -10s !important;
  --motion-translate-x: 0 !important;
  --motion-translate-y: 0 !important;
}


/* =====================================================================
 *  DROP-DOWN MENU — embellissement sans casser le placement Wix d'origine
 * ===================================================================== */

/* Le wix-dropdown-menu conserve sa taille (561x40) et son left:386px.
   On lui rend juste overflow visible pour que les sous-menus dépassent. */
wix-dropdown-menu {
  overflow: visible !important;
  font-family: raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

wix-dropdown-menu .WYtmIs {
  overflow: visible !important;
}

/* Le header doit pouvoir afficher les sous-menus qui dépassent */
header.SITE_HEADER,
#SITE_HEADER,
#SITE_HEADER_WRAPPER,
#SITE_HEADER .CmHRsG {
  overflow: visible !important;
}

/* La nav et ul gardent leur positionnement absolu Wix ; on remet juste
   overflow visible pour que les sous-menus s'affichent. */
wix-dropdown-menu nav,
wix-dropdown-menu nav > ul,
wix-dropdown-menu nav > ul > li {
  overflow: visible !important;
}

/* Cache l'item "More" (overflow Wix) et les chevrons : tout tient sur 4 entrées */
wix-dropdown-menu li.du4qAL,
wix-dropdown-menu #DrpDwnMn0__more__,
wix-dropdown-menu button.H4AHlN {
  display: none !important;
}

/* Items principaux : pointer + transition + marges + alignement */
wix-dropdown-menu nav ul > li.S4aRdK {
  cursor: pointer;
  position: relative;
  overflow: visible !important;
  text-align: center !important;
}

/* Le label clickable interne — centré dans la cellule */
wix-dropdown-menu nav ul > li > .HNWIuH,
wix-dropdown-menu nav ul > li > div[role="button"] {
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
  padding: 0 14px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

wix-dropdown-menu nav ul > li > .HNWIuH p,
wix-dropdown-menu nav ul > li > div[role="button"] p {
  transition: color .2s ease;
  padding: 0 6px;
  text-align: center;
  margin: 0;
}

wix-dropdown-menu nav ul > li .hAdMV6 {
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Marge sous le bloc "Agence Social Media" + remontée légère du menu */
#i1s0halz { margin-bottom: 14px !important; }
#DrpDwnMn0 { margin-top: 6px !important; }

/* Survol du parent : on assombrit le texte */
wix-dropdown-menu nav ul > li:hover > .HNWIuH p,
wix-dropdown-menu nav ul > li:focus-within > .HNWIuH p {
  color: #709ca5 !important;
}

/* ----- Sous-menu : flyout propre sous l'item parent ----- */

/* Wix mettait style="display:none" inline ; on l'a retiré dans le HTML.
   On gère désormais la visibilité en CSS pur. */
wix-dropdown-menu nav ul > li > ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px;
  background: rgb(var(--color_11, 255,255,255));
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  border-radius: 6px;
  padding: .4rem 0;
  margin: 6px 0 0 0;
  z-index: 9999;
  list-style: none;
  text-align: left;
  white-space: nowrap;
}

/* Ouverture au survol / focus */
wix-dropdown-menu nav ul > li:hover > ul,
wix-dropdown-menu nav ul > li:focus-within > ul {
  display: block !important;
  animation: aab-menu-fade .18s ease-out;
}

@keyframes aab-menu-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pont invisible pour ne pas perdre le hover en passant la souris vers le sous-menu */
wix-dropdown-menu nav ul > li:has(> ul):hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 9998;
}

/* Items du sous-menu */
wix-dropdown-menu nav ul > li > ul > li {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
  position: static;
}

wix-dropdown-menu nav ul > li > ul > li > a {
  display: block;
  padding: .6rem 1.25rem;
  color: rgb(var(--color_15, 80,80,80));
  font-family: raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
  border-left: 3px solid transparent;
}

/* Curseur pointer sur TOUS les liens et boutons du menu.
   Wix met `cursor: default !important` via [data-state~=header].jUeFYk a/div
   → on écrase en augmentant la spécificité (3 classes + 1 attribut + universel). */
wix-dropdown-menu .S4aRdK.jUeFYk[data-state~="header"],
wix-dropdown-menu .S4aRdK.jUeFYk[data-state~="header"] *,
wix-dropdown-menu .du4qAL.jUeFYk[data-state~="header"],
wix-dropdown-menu .du4qAL.jUeFYk[data-state~="header"] *,
wix-dropdown-menu li.S4aRdK[data-state~="link"],
wix-dropdown-menu li.S4aRdK[data-state~="link"] *,
wix-dropdown-menu .HNWIuH,
wix-dropdown-menu .HNWIuH *,
wix-dropdown-menu .hAdMV6,
wix-dropdown-menu .bNEwT7,
wix-dropdown-menu li.S4aRdK,
wix-dropdown-menu li.S4aRdK *,
wix-dropdown-menu a,
wix-dropdown-menu a *,
wix-dropdown-menu [role="button"],
wix-dropdown-menu [role="button"] * {
  cursor: pointer !important;
}

wix-dropdown-menu nav ul > li > ul > li > a:hover,
wix-dropdown-menu nav ul > li > ul > li > a:focus {
  background: rgba(0,0,0,.04);
  color: #709ca5;
  border-left-color: #709ca5;
  padding-left: 1.4rem;
  outline: none;
}

/* Ajuste la position du dernier sous-menu (CONTACT) pour ne pas déborder à droite.
   Le 4e item est CONTACT (sans sous-menu), donc on cible le 3e (CLIENTS) qui est
   le dernier avec un sous-menu — son flyout doit s'aligner à droite. */
wix-dropdown-menu nav ul > li.S4aRdK:nth-last-child(2) > ul,
wix-dropdown-menu nav ul > li.S4aRdK:nth-last-child(1) > ul {
  left: auto !important;
  right: 0 !important;
}


/* =====================================================================
 *  HERO SLIDER (home) — 3-up manuel, tour infini sans saut
 *  Pas d'auto-play. Flèches prev/next contrôlent l'index via JS local.
 *  Le track contient les 6 slides + 3 doublons en tête et en queue
 *  pour permettre le wrap-around silencieux.
 * ===================================================================== */
#comp-jz5mdkun {
  position: relative !important;
  overflow: hidden !important;
}

.aab-hero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;          /* fond blanc dans le gap entre photos */
  --aab-n-real: 6;
  --aab-n-visible: 3;
}
/* Force le conteneur Wix à ne plus avoir son fond gris par défaut */
#comp-jz5mdkun { background: transparent !important; }

.aab-hero-track {
  display: flex;
  height: 100%;
  /* track total = (n_real + 2 × n_visible) slides ; chaque slide = 100/n_visible % */
  width: calc((var(--aab-n-real) + 2 * var(--aab-n-visible)) * (100% / var(--aab-n-visible)));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
  /* Position de départ : décalé de n_visible slides pour montrer la 1ʳᵉ "vraie" slide.
     Géré par JS via translateX en pixels. */
}

.aab-hero-track > .aab-slide {
  flex: 0 0 calc(100% / (var(--aab-n-real) + 2 * var(--aab-n-visible)));
  height: 100%;
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  background-repeat: no-repeat;
  padding: 0 3px;            /* gap discret : 6 px d'écart entre photos */
  box-sizing: border-box;
}

/* Flèches */
.aab-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  font-size: 24px;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
  border: none;
  font-family: inherit;
}
.aab-hero-arrow:hover { background: rgba(0,0,0,.65); }
.aab-hero-arrow:active { transform: translateY(-50%) scale(.95); }
.aab-hero-arrow.prev { left: 14px; }
.aab-hero-arrow.next { right: 14px; }

/* Slides cliquables */
.aab-hero-track > .aab-slide[role="button"] {
  cursor: pointer;
  position: relative;
}
.aab-hero-track > .aab-slide[role="button"]:focus-visible {
  outline: 2px solid #1B95B0;
  outline-offset: -4px;
}
/* Overlay sombre + icône cœur au survol (calqué sur la Pro Gallery Wix d'origine) */
.aab-hero-track > .aab-slide[role="button"]::before,
.aab-hero-track > .aab-slide[role="button"]::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.aab-hero-track > .aab-slide[role="button"]::before {
  background: rgba(0, 0, 0, .35);
}
.aab-hero-track > .aab-slide[role="button"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
.aab-hero-track > .aab-slide[role="button"]:hover::before,
.aab-hero-track > .aab-slide[role="button"]:hover::after,
.aab-hero-track > .aab-slide[role="button"]:focus-visible::before,
.aab-hero-track > .aab-slide[role="button"]:focus-visible::after {
  opacity: 1;
}
@media (hover: none) {
  .aab-hero-track > .aab-slide[role="button"]::before,
  .aab-hero-track > .aab-slide[role="button"]::after { display: none; }
}

/* =====================================================================
 *  LIGHTBOX — modal plein écran déclenchée au clic sur une slide
 * ===================================================================== */
.aab-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: stretch;
  justify-content: stretch;
}
.aab-lightbox.is-open { display: flex; }
.aab-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
}
.aab-lightbox-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  min-width: 0;
}
.aab-lightbox-image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.aab-lightbox-panel {
  position: relative;
  z-index: 1;
  flex: 0 0 360px;
  max-width: 360px;
  padding: 60px 48px 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  color: #2b2b2b;
  font-family: maitree, serif;
}
.aab-lightbox-title {
  font-family: maitree, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 1.2em 0;
  color: #2b2b2b;
}
.aab-lightbox-description {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #4d4d4d;
}
.aab-lightbox-close,
.aab-lightbox-fullscreen,
.aab-lightbox-arrow {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #2b2b2b;
  border: none;
  cursor: pointer;
  line-height: 0;
  font-family: inherit;
  padding: 0;
  transition: opacity .2s ease, transform .2s ease;
  opacity: .7;
}
.aab-lightbox-close:hover,
.aab-lightbox-fullscreen:hover,
.aab-lightbox-arrow:hover { opacity: 1; }
.aab-lightbox-close { top: 14px; right: 18px; }
.aab-lightbox-fullscreen { top: 14px; left: 18px; }
.aab-lightbox-arrow { top: 50%; transform: translateY(-50%); }
.aab-lightbox-arrow:hover { transform: translateY(-50%) scale(1.08); }
.aab-lightbox-arrow.prev { left: 18px; }
.aab-lightbox-arrow.next { right: 408px; }

@media (max-width: 900px) {
  .aab-lightbox { flex-direction: column; }
  .aab-lightbox-stage { padding: 56px 24px 16px; flex: 1 1 60vh; }
  .aab-lightbox-panel {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 16px 24px 40px;
    align-self: stretch;
  }
  .aab-lightbox-arrow { top: auto; bottom: 50%; transform: none; }
  .aab-lightbox-arrow:hover { transform: scale(1.08); }
  .aab-lightbox-arrow.next { right: 18px; }
}

/* =====================================================================
 *  TÉMOIGNAGES — design calqué sur la prod
 *  Badge auteur "texte cyan sur fond gris" + bloc texte gris + photo
 * ===================================================================== */
.aab-testimonials {
  --aab-cyan: #1B95B0;
  --aab-bg: #f0f0f0;
  --aab-text: #4d4d4d;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 4.5rem auto 1.5rem;
  padding: 0 60px;
  box-sizing: border-box;
  font-family: raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--aab-text);
}
.aab-testimonials-viewport { overflow: hidden; }
.aab-testimonials-track {
  display: flex;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.aab-testimonial {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 30px 0 16px;
  box-sizing: border-box;
}

/* ----- Colonne gauche : badge décollé + bloc texte gris ----- */
.aab-testimonial-text {
  position: relative;
  background: var(--aab-bg);
  padding: 42px 32px 36px;
  align-self: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.aab-testimonial-author {
  position: absolute;
  top: -22px;
  left: 32px;
  background: var(--aab-bg);
  color: var(--aab-cyan);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .005em;
  padding: 10px 22px;
}
.aab-testimonial-quote {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--aab-text);
  margin: 0;
  font-style: normal;
}
/* Bouton READ MORE désactivé pour coller au rendu prod (pas affiché) */
.aab-testimonial-cta { display: none; }

/* ----- Colonne droite : visuel composite (logo + portrait) ----- */
.aab-testimonial-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
  color: #bbb;
  font-size: 13px;
  text-align: center;
  padding: 0;
  background: transparent;
}
.aab-testimonial-photo img {
  display: block;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.aab-testimonial-photo .aab-photo-empty {
  width: 100%;
  min-height: 240px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
}

/* Flèches */
.aab-testimonials-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  transition: background .2s ease, transform .2s ease;
  z-index: 5;
}
.aab-testimonials-arrow.prev { left: 10px; }
.aab-testimonials-arrow.next { right: 10px; }
.aab-testimonials-arrow:hover { background: rgba(0,0,0,.65); }
.aab-testimonials-arrow:active { transform: translateY(-50%) scale(.95); }

/* Puces */
.aab-testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}
.aab-testimonials-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d0d0d0;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.aab-testimonials-dots button.is-active {
  background: var(--aab-cyan);
  transform: scale(1.25);
}

/* Responsive : photo au-dessus sur mobile */
@media (max-width: 760px) {
  .aab-testimonials { padding: 0 40px; }
  .aab-testimonial { grid-template-columns: 1fr; gap: 20px; }
  .aab-testimonial-photo { min-height: 240px; order: -1; }
  .aab-testimonial-author { font-size: 18px; }
}


/* =====================================================================
 *  GALERIE PHOTO Wix native (#comp-lq1hnpku) — activation statique
 *  Force la visibilité, défilement horizontal manuel, captions + zoom hover
 * ===================================================================== */
/* On débride l'overflow de #site-root pour le bandeau pleine largeur */
body { overflow-x: hidden !important; }
#SITE_CONTAINER #site-root, #site-root { overflow: visible !important; }

/* Le composant Wix : pleine largeur viewport */
#comp-lq1hnpku {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: none !important;
}

/* La galerie elle-même */
#pro-gallery-comp-lq1hnpku,
#pro-gallery-container-comp-lq1hnpku,
.comp-lq1hnpku .pro-gallery-parent-container {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Conteneur de scroll horizontal : on l'active en natif, avec marges latérales */
#gallery-horizontal-scroll-comp-lq1hnpku {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: calc(100% - 80px) !important;   /* 40px de marge à gauche + 40px à droite */
  margin-left: 40px;
  margin-right: 40px;
  scrollbar-width: none;
  box-sizing: border-box;
}
#gallery-horizontal-scroll-comp-lq1hnpku::-webkit-scrollbar { display: none; }
.gallery-horizontal-scroll-inner { position: relative; }

/* On force la visibilité de tous les items (Wix les masquait) */
#pro-gallery-comp-lq1hnpku .gallery-item-container,
#pro-gallery-comp-lq1hnpku [data-hook="item-container"] {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  transition: opacity .3s ease !important;
}
#pro-gallery-comp-lq1hnpku .gallery-item-content,
#pro-gallery-comp-lq1hnpku .gallery-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#pro-gallery-comp-lq1hnpku img.gallery-item {
  -o-object-fit: cover; object-fit: cover;
}

/* Chaque item snape au début */
#pro-gallery-comp-lq1hnpku .gallery-item-container { scroll-snap-align: start; }

/* Overlay rollover : Wix a un .gallery-item-hover vide, on stylise notre injection */
#pro-gallery-comp-lq1hnpku .gallery-item-hover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 24px !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.82) 100%
  );
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  color: #fff;
}
#pro-gallery-comp-lq1hnpku .gallery-item-container:hover .gallery-item-hover,
#pro-gallery-comp-lq1hnpku .gallery-item-container:focus-within .gallery-item-hover {
  opacity: 1;
}
#pro-gallery-comp-lq1hnpku .gallery-item-hover::before { content: none !important; }

/* Titre + sous-titre injectés dans le hover */
#pro-gallery-comp-lq1hnpku .aab-photo-title {
  font-family: raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 6px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#pro-gallery-comp-lq1hnpku .aab-photo-subtitle {
  font-family: raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  margin: 0;
  opacity: .95;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Zoom lent au hover (Wix utilise déjà zoom-in-on-hover en CSS,
   on s'assure que ça reste actif sans dépendre du JS Wix) */
#pro-gallery-comp-lq1hnpku .gallery-item-content,
#pro-gallery-comp-lq1hnpku .gallery-item-content .gallery-item {
  transform: scale(1);
  transition: transform 2.2s cubic-bezier(.14, .4, .09, .99) !important;
  will-change: transform;
}
#pro-gallery-comp-lq1hnpku .gallery-item-container:hover .gallery-item-content,
#pro-gallery-comp-lq1hnpku .gallery-item-container:focus-within .gallery-item-content {
  transform: scale(1.08);
}

/* Flèches custom (injectées dans le HTML) */
.aab-pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 28px;
  user-select: none;
  transition: background .2s ease, transform .2s ease;
  z-index: 10;
}
.aab-pg-arrow.prev { left: 16px; }
.aab-pg-arrow.next { right: 16px; }
.aab-pg-arrow:hover { background: rgba(0,0,0,.7); }
.aab-pg-arrow:active { transform: translateY(-50%) scale(.95); }