/* =============================================================================
   widgetSlideshow.css — rendu public du widget slideshow
   A placer à la racine du site : /widgetSlideshow.css
   Généré par : /themes/corps/inc_widgetSlideshow.php
   Variables posées en inline par PHP : --ss-h, --ss-hm, --ss-duree
   ============================================================================= */

.ss-slideshow{
position:relative;
margin:0 auto;
height:var(--ss-h, 480px);
overflow:hidden;
background:#111;
--ss-duree:700ms;
}

.ss-track{
position:relative;
width:100%;
height:100%;
}

.ss-slide{
position:absolute;
inset:0;
opacity:0;
visibility:hidden;
overflow:hidden;
}
.ss-slide.is-active{
opacity:1;
visibility:visible;
z-index:1;
}

.ss-slide picture{display:block;height:100%;}
.ss-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.ss-noimg{
width:100%;
height:100%;
background:linear-gradient(135deg,#37474f,#546e7a);
}

/* Lien plein slide */
.ss-link{
position:absolute;
inset:0;
z-index:4;
}

/* ── Boîte de texte ────────────────────────────────────────────────────────
   L'admin ne pilote que la position et la largeur (styles inline).
   Fond, couleur, marges, arrondi : à définir dans le CSS du site, par ex.
     .ss-box{background:rgba(0,0,0,.45);color:#fff;padding:20px;border-radius:8px;}
   ------------------------------------------------------------------------- */
.ss-box{
position:absolute;
transform:translate(-50%, -50%);
box-sizing:border-box;
z-index:3;
max-width:calc(100% - 24px);
background:none!important;
}
.ss-box-text{
font-size:clamp(.9rem, 1.2vw, 1.05rem);
line-height:1.2;
text-align:center;
}
.ss-box-text *{
color:white;
text-shadow:0 0 10px rgb(34 33 39);
}
.ss-box-text > *:first-child{margin-top:0;}
.ss-box-text > *:last-child{margin-bottom:0;}
.ss-box-text p{margin:0 0 .6em 0;font-size:1.5em;}
.ss-box-text strong{font-size:1.8em;}
.ss-box-text ul,
.ss-box-text ol{margin:0 0 .6em 0;padding-left:1.3em;}
.ss-box-text a{color:inherit;text-decoration:underline;}

/* Titres issus de la barre wiki (block_formats : Titre 1 → Titre 4) */
.ss-box-text h1{margin:0 0 .35em 0;font-size:clamp(1.5rem, 3vw, 2.4rem);line-height:1.1;color:inherit;}
.ss-box-text h2{margin:0 0 .35em 0;font-size:clamp(1.3rem, 2.6vw, 2rem);line-height:1.15;color:inherit;}
.ss-box-text h3{margin:0 0 .4em 0;font-size:clamp(1.1rem, 2vw, 1.5rem);line-height:1.2;color:inherit;}
.ss-box-text h4{margin:0 0 .4em 0;font-size:clamp(1rem, 1.6vw, 1.2rem);line-height:1.25;color:inherit;}

/* [Bouton] = h5 dans la barre wiki.
   Style volontairement neutre : le CSS du site (myTinymce.css / gabarit)
   prend le dessus s'il définit déjà l'apparence des boutons. */
   .ss-box-text h5 a{
   display:inline-block;
   color:white;
   padding:6px 16px;
   text-decoration:none;
   text-transform:uppercase;
   font-size:1.2em;
   margin:8px 0;
   font-weight:500;
   transition:all ease 0.3s;
   border:1px solid white;
   border-radius:100em;
   background:none;
   position:relative;
   }

   .ss-box-text h5 a:hover{
   transform:translateX(6px);
   background:var(--bleu);
   color:white;
   text-decoration:none;
   border-color:var(--bleu);
   }


/* ── Transitions ─────────────────────────────────────────────────────────── */

/* Fondu */
.ss-t-fondu .ss-slide{
transition:opacity var(--ss-duree) ease, visibility var(--ss-duree);
}

/* Coupe franche */
.ss-t-aucune .ss-slide{transition:none;}

/* Zoom + fondu */
.ss-t-zoom .ss-slide{
transition:opacity var(--ss-duree) ease, visibility var(--ss-duree), transform var(--ss-duree) ease;
transform:scale(1.08);
}
.ss-t-zoom .ss-slide.is-active{transform:scale(1);}

/* Swipe horizontal */
.ss-t-swipe .ss-slide{
opacity:1;
visibility:visible;
transform:translateX(100%);
transition:transform var(--ss-duree) cubic-bezier(.4,0,.2,1);
}
.ss-t-swipe .ss-slide.is-active{transform:translateX(0);z-index:2;}
.ss-t-swipe .ss-slide.is-before{transform:translateX(-100%);}

/* Swipe vertical */
.ss-t-vertical .ss-slide{
opacity:1;
visibility:visible;
transform:translateY(100%);
transition:transform var(--ss-duree) cubic-bezier(.4,0,.2,1);
}
.ss-t-vertical .ss-slide.is-active{transform:translateY(0);z-index:2;}
.ss-t-vertical .ss-slide.is-before{transform:translateY(-100%);}

/* Push : le slide entrant recouvre le sortant */
.ss-t-push .ss-slide{
opacity:1;
visibility:visible;
transform:translateX(100%);
transition:transform var(--ss-duree) cubic-bezier(.16,1,.3,1);
}
.ss-t-push .ss-slide.is-active{transform:translateX(0);z-index:2;}
.ss-t-push .ss-slide.is-before{transform:translateX(0);z-index:1;}

/* ── Ken Burns ─────────────────────────────────────────────────────────────
   L'état de REPOS de l'image est l'état FINAL du zoom (scale 1.08).
   Quand un slide perd .is-active, son animation est retirée : l'image reste
   alors exactement là où le zoom l'avait laissée, au lieu de revenir d'un coup
   à sa taille d'origine pendant qu'elle est encore visible.
   Le JS épingle en plus la valeur calculée au moment du changement, ce qui
   couvre aussi la navigation manuelle (zoom interrompu en cours de route).

   Pour régler l'amplitude, changer la MEME valeur aux deux endroits ci-dessous.
   --ss-kb (durée du zoom) est posée en inline par PHP, calée sur le délai
   d'affichage du slide pour que le zoom se termine pile au changement.
   ------------------------------------------------------------------------- */
.ss-kenburns .ss-img{
transform:scale(1.08);
transform-origin:center center;
will-change:transform;
}
.ss-kenburns .ss-slide.is-active .ss-img{
animation:ssKenBurns var(--ss-kb, 5000ms) linear forwards;
}
/* Le zoom se met en pause en même temps que le défilement */
.ss-kenburns.is-paused .ss-slide.is-active .ss-img{
animation-play-state:paused;
}
@keyframes ssKenBurns{
from{transform:scale(1);}
to{transform:scale(1.08);}
}


/* ── Flèches ─────────────────────────────────────────────────────────────── */
.ss-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:rgba(0,0,0,.35);
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
transition:background .18s, opacity .18s;
}
.ss-arrow:hover{background:rgba(0,0,0,.62);}
.ss-arrow:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.ss-arrow svg{
width:22px;height:22px;
fill:none;
stroke:currentColor;
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
}
.ss-prev{left:14px;}
.ss-next{right:14px;}
.ss-arrow[disabled]{opacity:.3;cursor:default;}


/* ── Puces ───────────────────────────────────────────────────────────────── */
.ss-dots{
position:absolute;
left:0;right:0;
bottom:14px;
z-index:5;
display:flex;
justify-content:center;
gap:9px;
}
.ss-dot{
width:11px;height:11px;
border-radius:50%;
border:2px solid rgba(255,255,255,.85);
background:transparent;
padding:0;
cursor:pointer;
transition:background .18s, transform .18s;
}
.ss-dot:hover{background:rgba(255,255,255,.5);}
.ss-dot.is-active{background:#fff;transform:scale(1.15);}
.ss-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}


/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .ss-slideshow{
    height:var(--ss-hm, 320px);
    width:100%!important;
  }
  .ss-box{
    width:calc(100% - 28px)!important;
    left:50%!important;
  }
  .ss-arrow{width:36px;height:36px;}
  .ss-prev{left:8px;}
  .ss-next{right:8px;}
}


/* ── Accessibilité : mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ss-slideshow .ss-slide{transition-duration:1ms!important;}
  .ss-kenburns .ss-img{animation:none;transform:none;}
}