/* Safi Surf Camp – Slider | assets/css/slider.css */
.sscs-slider{
  position:relative; width:100%; overflow:hidden;
  background:#0E4D6E;
  font-family:'Work Sans',-apple-system,sans-serif;
}
.sscs-ratio-box{
  position:relative; width:100%;
  padding-top:125%; /* repli si le bloc <style> n'a pas chargé ; toujours surchargé en ligne */
  max-height:80vh; min-height:220px; overflow:hidden;
}
@media(min-width:782px){ .sscs-ratio-box{ max-height:75vh; } }

.sscs-track{ position:absolute; inset:0; width:100%; height:100%; }

.sscs-slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}
.sscs-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

/* Effet glissement (override du fade) */
.sscs-effect-slide .sscs-slide{
  transition:transform .6s ease, opacity 0s;
  transform:translateX(100%); opacity:1; visibility:visible; pointer-events:none;
}
.sscs-effect-slide .sscs-slide.is-active{ transform:translateX(0); pointer-events:auto; }
.sscs-effect-slide .sscs-slide.is-prev{ transform:translateX(-100%); }

.sscs-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sscs-img-placeholder{ background:linear-gradient(135deg,#0E4D6E,#5BAFD6); }
.sscs-overlay{ position:absolute; inset:0; }

/* Légende (pastille) — nom du spot, tag... distincte du titre principal */
.sscs-caption{
  position:absolute; top:20px; right:20px; z-index:2;
  background:rgba(10,53,80,.55); border:1px solid rgba(250,247,242,.3);
  border-radius:999px; padding:.5rem 1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; color:#FAF7F2;
  backdrop-filter:blur(2px);
}
@media(max-width:600px){ .sscs-caption{ top:14px; right:14px; padding:.35rem .75rem; font-size:.65rem; } }

.sscs-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  max-width:720px; margin:0; padding:0 5vw; color:#fff;
}
/* Le bloc de texte lui-même doit se coller au bord choisi (pas seulement
   le texte à l'intérieur) : margin-left/right explicites sur chaque
   variante — un simple "margin:0 auto" hérité aurait maintenu le bloc
   centré même en alignement "gauche" ou "droite". */
.sscs-align-left{ align-items:flex-start; text-align:left; margin-left:0; margin-right:auto; }
.sscs-align-center{ align-items:center; text-align:center; margin-left:auto; margin-right:auto; }
.sscs-align-right{ align-items:flex-end; text-align:right; margin-left:auto; margin-right:0; }

.sscs-subtitle{
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#E08A5B; margin-bottom:.8rem; display:block;
}
.sscs-title{
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.1; margin:0 0 .9rem; color:#fff;
}
.sscs-desc{
  font-size:clamp(.92rem,1.4vw,1.05rem); line-height:1.65; color:rgba(255,255,255,.88);
  max-width:46ch; margin:0 0 1.5rem; text-align:justify;
}
.sscs-align-center .sscs-desc{ margin-left:auto; margin-right:auto; }
.sscs-align-right .sscs-desc{ margin-left:auto; }
/* Sur mobile, le bandeau garde une hauteur fixe (proportions imposées) :
   une description longue, justifiée, pouvait pousser/écraser le titre et
   les boutons hors du cadre visible. On réduit le texte, on revient à un
   alignement simple (le justifié espace mal les mots sur une colonne
   étroite) et on le limite à 3 lignes pour préserver la mise en page. */
@media(max-width:600px){
  /* Le menu du site (logo "Safi Surf Camp") est fixe et transparent en
     haut de l'écran : sans cette marge, il peut chevaucher le sous-titre
     du slider sur mobile, où le bandeau est plus bas et le texte centré
     verticalement dans un espace réduit. */
  .sscs-content{ padding-top:4.5rem; }
  .sscs-title{ font-size:1.5rem; }
  .sscs-desc{
    font-size:.82rem; line-height:1.5; margin:0 0 1rem; max-width:100%;
    text-align:left;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sscs-align-right .sscs-desc{ text-align:right; }
  .sscs-align-center .sscs-desc{ text-align:center; }
}
.sscs-btns{
  display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.4rem;
}
.sscs-align-center .sscs-btns{ justify-content:center; }
.sscs-align-right .sscs-btns{ justify-content:flex-end; }
.sscs-btn{
  display:inline-block; text-decoration:none;
  padding:.8rem 1.9rem; border-radius:2rem; font-size:.9rem; font-weight:600;
  transition:background .2s, transform .2s, border-color .2s;
}
/* Chaque bouton a sa propre couleur de la charte, pour bien les distinguer */
.sscs-btn-primary{ background:#C1592D; color:#fff; border:1.5px solid #C1592D; } /* terracotta */
.sscs-btn-primary:hover{ background:#9C441F; border-color:#9C441F; transform:translateY(-2px); }
.sscs-btn-ocean{ background:#0E4D6E; color:#fff; border:1.5px solid #0E4D6E; } /* bleu océan */
.sscs-btn-ocean:hover{ background:#0a3550; border-color:#0a3550; transform:translateY(-2px); }
.sscs-btn-teal{ background:#0F6E56; color:#fff; border:1.5px solid #0F6E56; } /* vert teal */
.sscs-btn-teal:hover{ background:#0b5643; border-color:#0b5643; transform:translateY(-2px); }
.sscs-btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.sscs-btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }

/* Flèches */
.sscs-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.sscs-arrow:hover{ background:rgba(255,255,255,.32); }
.sscs-prev{ left:1.2rem; }
.sscs-next{ right:1.2rem; }
@media(max-width:600px){ .sscs-arrow{ width:34px; height:34px; font-size:1.3rem; } .sscs-prev{left:.6rem} .sscs-next{right:.6rem} }

/* Puces */
.sscs-dots{
  position:absolute; bottom:1.2rem; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:.5rem;
}
.sscs-dot{
  width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  background:transparent; cursor:pointer; padding:0; transition:all .2s;
}
.sscs-dot.is-active{ background:#fff; width:22px; border-radius:5px; }

@media(prefers-reduced-motion:reduce){
  .sscs-slide, .sscs-effect-slide .sscs-slide{ transition:none !important; }
}