/* ===================================================================
   Flexslider – Skin « BOOK PHOTO PARIS »
   Author : Jean-Christophe Lagarde · 10 juil. 2025
   Palette :
	  --clr-primary        : #fa213f
	  --clr-primary-light  : #ff3a4d
	  --clr-dark           : #04253e
   =================================================================== */

:root{
  --clr-primary:#fa213f;
  --clr-primary-light:#ff3a4d;
  --clr-dark:#04253e;
  --clr-grey:#d9d9d9;
  --ff-base:"Open Sans",Arial,Helvetica,sans-serif;
}

/* --------------------------------------------------  wrapper */
.flexslider{
  margin:0;padding:0;border:none;overflow:hidden;
  background:var(--clr-dark);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* --------------------------------------------------  slides */
.flexslider .slides>li{display:none;-webkit-backface-visibility:hidden;}
.flexslider .slides img{width:100%;height:auto;display:block;}

/* --------------------------------------------------  direction nav */
.flex-direction-nav a{
  font-family:FontAwesome;
  position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;
  line-height:48px;text-align:center;text-decoration:none;
  color:#fff;background:rgba(0,0,0,.35);border-radius:50%;
  transition:all .25s ease;
}
.flex-direction-nav a:before{font-size:24px;display:inline-block;}
.flex-direction-nav .flex-prev{left:16px;}
.flex-direction-nav .flex-next{right:16px;}

.flex-direction-nav .flex-prev:before{content:"\f104";} /* Chevron gauche  */
.flex-direction-nav .flex-next:before{content:"\f105";} /* Chevron droit   */

.flex-direction-nav a:hover,
.flex-direction-nav a:focus{
  background:var(--clr-primary);
  outline:none;
}

/* taille compacte sur mobile */
@media(max-width:768px){
  .flex-direction-nav a{
	width:40px;height:40px;line-height:40px;margin-top:-20px;
	opacity:.85;
  }
}

/* --------------------------------------------------  control nav (puces) */
.flex-control-nav{
  position:absolute;bottom:16px;left:50%;
  transform:translateX(-50%);
  text-align:center;z-index:10;
}
.flex-control-nav li{display:inline-block;margin:0 4px;}
.flex-control-paging li a{
  display:block;width:12px;height:12px;border:2px solid #fff;
  background:transparent;border-radius:50%;cursor:pointer;
  transition:all .25s ease;
}
.flex-control-paging li a:hover,
.flex-control-paging li a:focus{border-color:var(--clr-primary-light);}
.flex-control-paging li a.flex-active{
  background:var(--clr-primary);
  border-color:var(--clr-primary);
  cursor:default;
}

/* --------------------------------------------------  légendes / citations */
.flex-caption,
.flexslider blockquote{
  font-family:var(--ff-base);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.flexslider blockquote{
  font-size:1.1rem;line-height:1.6;margin:0 auto;
  max-width:800px;padding:1rem 2rem;
}
.flexslider blockquote cite{
  display:block;margin-top:.5rem;font-weight:600;
  color:var(--clr-primary-light);
}

/* --------------------------------------------------  accessibilité */
.flexslider a:focus{
  outline:2px dashed var(--clr-primary-light);
  outline-offset:2px;
}

/* --------------------------------------------------  animation « fade » si besoin */
.flexslider.fade .slides>li{opacity:0;transition:opacity .6s ease;}
.flexslider.fade .slides>li.flex-active-slide{opacity:1;}
/* === Override fond bleu nuit à 80 % d’opacité ====================== */
.flexslider,                     /* wrapper général */
.flexslider .slides,             /* ul.slides       */
.flexslider .slides > li {       /* chaque slide    */
  background: rgba(4, 37, 62, 0.3) !important;   /* #04253e à 80 % */
}