/* =============================================================
   Auto Slider Galleries v3.1
   - Nouveau : mode "image entiere" (contain) pour ne plus rogner
     les images de formats differents dans le carrousel
============================================================= */

:root {
    --asg-primary:    var(--ast-global-color-0, #2271b1);
    --asg-radius:     12px;
    --asg-transition: .28s cubic-bezier(.4,0,.2,1);
    --asg-shadow:     0 8px 30px rgba(0,0,0,.18);
    --asg-zindex:     999999;

    /* Vars de style boutons — ecrasees par asg_inject_vars() */
    --asg-btn-bg:       rgba(0,0,0,.52);
    --asg-btn-border:   none;
    --asg-btn-radius:   50%;
    --asg-btn-shadow:   0 4px 15px rgba(0,0,0,.35);
    --asg-btn-backdrop: blur(10px);
    --asg-btn-color:    #fff;
    --asg-btn-bg-hover: rgba(0,0,0,.78);

    /* Vars de largeur/alignement du carrousel — ecrasees par asg_inject_vars() */
    --asg-gallery-width:  100%;
    --asg-gallery-mleft:  auto;
    --asg-gallery-mright: auto;
}

/* =============================================================
   LARGEUR/ALIGNEMENT DE LA GALERIE (avant lancement du diaporama)
   S'applique a la galerie WordPress classique (mode grille) ET au
   carrousel inline qui la remplace quand le mode carrousel est actif.
   La visionneuse plein ecran (diaporama) n'est jamais impactee.
============================================================= */

div.asg-carousel,
.gallery,
.wp-block-gallery,
.blocks-gallery-grid {
    max-width:   var(--asg-gallery-width, 100%);
    margin-left:  var(--asg-gallery-mleft, auto);
    margin-right: var(--asg-gallery-mright, auto);
}

/* =============================================================
   CARROUSEL INLINE
============================================================= */

div.asg-carousel {
    position:  relative;
    width:     100%;
    margin-bottom: 1.5em;
    user-select: none;
}

.asg-slide {
    position:        relative;
    width:           100%;
    overflow:        hidden;
    border-radius:   var(--asg-radius);
    background:      #111;
    aspect-ratio:    var(--asg-slide-ratio, 4 / 3);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Fond flouté affiché derrière l'image quand le mode "image entière" (contain)
   est actif, pour combler les bandes vides sans jamais rogner la photo. */
.asg-slide-bg {
    position:            absolute;
    inset:               -10px; /* deborde legerement pour eviter les bords flous visibles */
    background-position: center;
    background-size:     cover;
    filter:              blur(22px) brightness(.55);
    opacity:             0;
    transition:          opacity .2s ease;
    pointer-events:      none;
    z-index:             0;
}

.asg-slide[data-fit="contain"] .asg-slide-bg {
    opacity: 1;
}

.asg-slide-img {
    position:      relative;
    z-index:       1;
    width:         100%;
    height:        100%;
    object-fit:    var(--asg-img-fit, cover);
    display:       block;
    border-radius: var(--asg-radius);
    opacity:       1;
    transition:    opacity .16s ease;
    cursor:        zoom-in;
}

.asg-slide-caption {
    position:      absolute;
    bottom: 0; left: 0; right: 0;
    z-index:       2;
    padding:       10px 16px;
    background:    linear-gradient(transparent, rgba(0,0,0,.6));
    color:         #fff;
    font-size:     .82rem;
    line-height:   1.4;
    border-radius: 0 0 var(--asg-radius) var(--asg-radius);
    pointer-events: none;
}

/* Boutons prev/next du carrousel — utilisent les vars de style */
.asg-car-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           42px;
    height:          42px;
    border:          var(--asg-btn-border);
    border-radius:   var(--asg-btn-radius);
    background:      var(--asg-btn-bg);
    color:           var(--asg-btn-color);
    box-shadow:      var(--asg-btn-shadow);
    backdrop-filter: var(--asg-btn-backdrop);
    font-size:       1.9rem;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      var(--asg-transition);
    z-index:         5;
}

.asg-car-btn:hover {
    background: var(--asg-btn-bg-hover);
    transform:  translateY(-50%) scale(1.1);
}

.asg-car-prev { left:  10px; }
.asg-car-next { right: 10px; }

.asg-car-counter {
    text-align:     center;
    margin-top:     7px;
    font-size:      .78rem;
    color:          #888;
    letter-spacing: .04em;
}

.asg-car-dots {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      6px;
}

.asg-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        none;
    background:    #ccc;
    padding:       0;
    cursor:        pointer;
    transition:    background .2s, transform .2s;
}

.asg-dot-active {
    background: var(--asg-primary);
    transform:  scale(1.35);
}

/* =============================================================
   LIGHTBOX
============================================================= */

#asg-lightbox {
    position:        fixed;
    inset:           0;
    display:         none;
    justify-content: center;
    align-items:     center;
    flex-direction:  column;
    background:      rgba(0,0,0,.90);
    z-index:         var(--asg-zindex);
    padding:         20px;
    box-sizing:      border-box;
    touch-action:    pan-y;
}

#asg-container {
    position:   relative;
    max-width:  95vw;
    max-height: 90vh;
    text-align: center;
}

#asg-bg-blur {
    position:            absolute;
    inset:               0;
    background-position: center;
    background-size:     cover;
    filter:              blur(24px) brightness(.5);
    opacity:             .8;
    border-radius:       var(--asg-radius);
    pointer-events:      none;
    z-index:             1;
}

#asg-img {
    position:      relative;
    z-index:       2;
    max-width:     100%;
    max-height:    82vh;
    border-radius: var(--asg-radius);
    box-shadow:    var(--asg-shadow);
    opacity:       1;
    transition:    opacity .13s ease;
    display:       block;
    margin:        0 auto;
}

#asg-caption {
    margin-top:  12px;
    color:       rgba(255,255,255,.85);
    font-size:   clamp(.85rem, 2vw, 1.1rem);
    max-width:   800px;
    user-select: none;
}

#asg-counter-lb {
    position:        fixed;
    bottom:          20px;
    left:            50%;
    transform:       translateX(-50%);
    padding:         5px 13px;
    border-radius:   30px;
    background:      rgba(0,0,0,.55);
    color:           #fff;
    font-size:       .82rem;
    backdrop-filter: blur(8px);
    z-index:         var(--asg-zindex);
}

/* Boutons lightbox — utilisent les memes vars de style */
#asg-close,
#asg-prev,
#asg-next {
    position:        fixed;
    width:           56px;
    height:          56px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          var(--asg-btn-border);
    border-radius:   var(--asg-btn-radius);
    cursor:          pointer;
    color:           var(--asg-btn-color);
    background:      var(--asg-btn-bg);
    backdrop-filter: var(--asg-btn-backdrop);
    box-shadow:      var(--asg-btn-shadow);
    transition:      var(--asg-transition);
    z-index:         var(--asg-zindex);
}

#asg-close:hover { transform: scale(1.1);                    background: var(--asg-btn-bg-hover); }
#asg-prev:hover  { transform: translateY(-50%) scale(1.1);   background: var(--asg-btn-bg-hover); }
#asg-next:hover  { transform: translateY(-50%) scale(1.1);   background: var(--asg-btn-bg-hover); }

#asg-close { top: 18px; right: 18px; font-size: 2rem; }
#asg-prev  { left: 18px;  top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
#asg-next  { right: 18px; top: 50%; transform: translateY(-50%); font-size: 2.4rem; }

/* Barre autoplay */
#asg-autoplay-bar {
    display:       none;
    position:      fixed;
    bottom: 0; left: 0;
    height:        4px;
    width:         0%;
    background:    var(--asg-primary);
    z-index:       calc(var(--asg-zindex) + 1);
    border-radius: 0 2px 0 0;
}

/* =============================================================
   MOBILE
============================================================= */

@media (max-width: 600px) {
    .asg-car-btn  { width: 36px; height: 36px; font-size: 1.5rem; }
    .asg-car-prev { left: 6px; }
    .asg-car-next { right: 6px; }
    #asg-close, #asg-prev, #asg-next { width: 46px; height: 46px; }
    #asg-close { top: 10px; right: 10px; font-size: 1.6rem; }
    #asg-prev  { left: 10px; }
    #asg-next  { right: 10px; }
}

/* =============================================================
   ACCESSIBILITE
============================================================= */

@media (prefers-reduced-motion: reduce) {
    *, #asg-autoplay-bar { transition: none !important; animation: none !important; }
}

/* =============================================================
   AJOUT v3.0 — barre autoplay carrousel + taille boutons variable
============================================================= */

/* Taille des boutons pilotee par --asg-btn-size (JS) */
.asg-car-btn {
    width:     var(--asg-btn-size, 44px) !important;
    height:    var(--asg-btn-size, 44px) !important;
    font-size: var(--asg-btn-font, 23px) !important;
}

#asg-close,
#asg-prev,
#asg-next {
    width:     var(--asg-btn-size, 56px) !important;
    height:    var(--asg-btn-size, 56px) !important;
    font-size: var(--asg-btn-font, 29px) !important;
}

/* Barre de progression autoplay du carrousel */
.asg-car-bar {
    display:       none;
    position:      absolute;
    bottom:        0;
    left:          0;
    height:        4px;
    width:         0%;
    background:    var(--asg-primary);
    border-radius: 0 2px 0 0;
    z-index:       6;
}

/* =============================================================
   AJOUT v3.2 — largeur/alignement du carrousel + libelle d'incitation
============================================================= */

/* Badge indiquant qu'on peut cliquer pour lancer le diaporama plein ecran */
.asg-slide-hint {
    position:        absolute;
    top:             12px;
    left:            12px;
    z-index:         3;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 12px;
    border-radius:   30px;
    background:      rgba(0,0,0,.55);
    color:           #fff;
    font-size:       .74rem;
    line-height:     1.2;
    white-space:     nowrap;
    backdrop-filter: blur(6px);
    pointer-events:  none; /* laisse passer le clic vers l'image */
    opacity:         .92;
}

.asg-slide-hint svg {
    width:  13px;
    height: 13px;
    flex:   none;
}

@media (max-width: 600px) {
    .asg-slide-hint { font-size: .68rem; padding: 4px 10px; top: 8px; left: 8px; }
}