/* ==========================================================================
   Slider Studio — moteur de rendu COMMUN aux 20 modèles (PROTOTYPE)
   ==========================================================================
   Un seul jeu de composants (conteneur, média, overlay, contenu, navigation,
   animations) que chaque modèle assemble et habille différemment — jamais
   20 feuilles de style indépendantes. Chaque fichier template-NN-*.css ne
   contient QUE ce qui est réellement spécifique à sa composition.
   ========================================================================== */

.ss-slider{
  position:relative; overflow:hidden; background:var(--brand-primary);
  isolation:isolate; width:100%;
}
.ss-slider:focus-within{ outline:none; }

/* --- Formats (exigence §7 du cahier des charges) --- */
.ss-ratio-full{ height:100svh; min-height:560px; }
.ss-ratio-banner{ height:78vh; min-height:520px; max-height:900px; }
.ss-ratio-compact{ height:46vh; min-height:360px; max-height:620px; }
.ss-ratio-auto{ height:auto; }
.ss-ratio-16x9{ aspect-ratio:16/9; height:auto; }
.ss-ratio-21x9{ aspect-ratio:21/9; height:auto; }
@media (max-width:720px){
  .ss-ratio-full{ height:100svh; min-height:620px; }
  .ss-ratio-banner{ height:auto; aspect-ratio:4/5; max-height:none; }
  .ss-ratio-21x9{ aspect-ratio:4/5; }
}

/* --- V2 §6 : Dimensions et format — préréglages "Simple" additionnels (standard/large) et aspects
   avancés (4:3, personnalisé) posés par frontend/shell.php SEULEMENT quand explicitement réglés
   (voir SlideNormalizer::size()) : une présentation 0.7.0-alpha (preset "default"/aspect vide) ne
   génère jamais l'une de ces classes et reste donc pixel-identique à avant. Chargées après le bloc
   ci-dessus (même fichier, ordre de source) pour primer sur le ratio par défaut du modèle quand
   l'utilisateur choisit explicitement un format. Les bornes numériques avancées (min/max hauteur,
   marges, largeur contenue) sont elles posées en style INLINE par shell.php, jamais ici, pour primer
   inconditionnellement sans jonglage de spécificité. */
.ss-ratio-standard{ height:64vh; min-height:440px; max-height:760px; }
.ss-ratio-large{ height:86vh; min-height:560px; max-height:980px; }
.ss-ratio-4x3{ aspect-ratio:4/3; height:auto; }
.ss-ratio-custom{ height:auto; } /* aspect-ratio réel posé en style inline par shell.php */
@media (max-width:720px){
  .ss-ratio-standard, .ss-ratio-large{ height:auto; aspect-ratio:4/5; max-height:none; }
}
.ss-width-contained{ max-width:var(--ss-contained-w,1280px); margin-left:auto; margin-right:auto; border-radius:var(--radius-lg,16px); }
.ss-align-top .ss-content{ justify-content:flex-start; }
.ss-align-bottom .ss-content{ justify-content:flex-end; }

/* --- Piste / diapositives --- */
.ss-track{ position:relative; width:100%; height:100%; }
.ss-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease);
}
.ss-slide.is-active{ position:relative; height:100%; opacity:1; visibility:visible; pointer-events:auto; }
/* Une diapositive unique (modèles "mono-scène") : jamais de piste ni de navigation superflue. */
.ss-slider--single .ss-slide{ position:relative; height:100%; opacity:1; visibility:visible; pointer-events:auto; }

/* Transition "slide" (glissement horizontal) */
.ss-slider[data-transition="slide"] .ss-slide{ transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transform:translateX(2.5%); }
.ss-slider[data-transition="slide"] .ss-slide.is-active{ transform:translateX(0); }
/* Transition "zoom" (zoom subtil, jamais criard) — V2 §6 : multiplié par --ss-zoom (défaut 1, donc
   comportement 0.7.0-alpha strictement inchangé) pour composer avec le zoom de cadrage statique
   (voir SlideNormalizer::crop()) sans que les deux effets ne s'écrasent l'un l'autre. */
.ss-slider[data-transition="zoom"] .ss-media img,
.ss-slider[data-transition="zoom"] .ss-media video{ transform:scale(calc(1.06 * var(--ss-zoom,1))); transition:transform 6s linear; }
.ss-slider[data-transition="zoom"] .ss-slide.is-active .ss-media img,
.ss-slider[data-transition="zoom"] .ss-slide.is-active .ss-media video{ transform:scale(var(--ss-zoom,1)); }

/* --- Média --- */
.ss-media{ position:absolute; inset:0; overflow:hidden; background:var(--brand-primary); }
.ss-media img, .ss-media video{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--ss-focal,50% 50%);
  transform:scale(var(--ss-zoom,1)); transform-origin:var(--ss-focal,50% 50%);
}
.ss-media--contain img, .ss-media--contain video{ object-fit:contain; }
.ss-media--split{ position:absolute; inset:0; }
/* V2 §6 : point focal mobile dédié — ne s'applique QUE si --ss-focal-mobile est posée (voir
   SlideNormalizer::cropMobile()) ; sinon retombe sur le point focal desktop, lui-même neutre par
   défaut (50% 50%), donc aucun changement pour une diapositive sans cadrage mobile configuré. */
@media (max-width:720px){
  .ss-media img, .ss-media video{
    object-position:var(--ss-focal-mobile, var(--ss-focal,50% 50%));
    transform-origin:var(--ss-focal-mobile, var(--ss-focal,50% 50%));
  }
}

/* --- V2 §2 : aplat de démonstration (bibliothèque de modèles UNIQUEMENT — voir
   SliderRenderer::isDemoMedia()) — jamais une diapositive réelle, donc jamais vu par un visiteur du
   site. Dérivé des seules variables de marque (jamais une image), pour distinguer immédiatement une
   vignette « maquette » d'un média manquant réel. Occupe par défaut 100% de son parent (usage
   "standalone" avec une taille déjà posée par le modèle, ex. .tpl-14-product--demo) ; nichée dans un
   conteneur média plein cadre (.ss-media, .tpl-10-visual), elle se cale en position absolue pour le
   remplir exactement, comme le ferait un <img>. --- */
.ss-media-placeholder{
  display:block; width:100%; height:100%; position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(315deg, color-mix(in srgb, var(--brand-primary) 78%, #000 12%) 0%, color-mix(in srgb, var(--brand-primary) 46%, #fff 10%) 100%);
}
.ss-media-placeholder::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 10%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
}
.ss-media .ss-media-placeholder,
.tpl-10-visual .ss-media-placeholder{ position:absolute; inset:0; }

/* --- Voile / dégradé de lisibilité (opacité pilotable, exigence §7) --- */
.ss-overlay{ position:absolute; inset:0; pointer-events:none; }
.ss-overlay--scrim{ background:linear-gradient(180deg, rgba(0,0,0,var(--ss-scrim-top,.05)) 0%, rgba(0,0,0,var(--ss-scrim-bottom,.55)) 100%); }
.ss-overlay--side{ background:linear-gradient(90deg, rgba(0,0,0,var(--ss-scrim-side,.62)) 0%, rgba(0,0,0,0) 62%); }
.ss-overlay--full{ background:rgba(0,0,0,var(--ss-scrim-full,.32)); }
.ss-overlay--radial{ background:radial-gradient(120% 90% at 12% 88%, rgba(0,0,0,var(--ss-scrim-full,.55)) 0%, rgba(0,0,0,0) 60%); }

/* --- Zone de contenu --- */
.ss-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  padding:clamp(1.5rem,4vw,var(--space-8)) clamp(1.25rem,5vw,var(--space-9));
  max-width:640px;
}
.ss-content--wide{ max-width:820px; }
.ss-content--full{ max-width:none; width:100%; }
.ss-justify-start{ justify-content:flex-start; }
.ss-justify-center{ justify-content:center; }
.ss-justify-end{ justify-content:flex-end; }
.ss-items-start{ align-items:flex-start; text-align:left; }
.ss-items-center{ align-items:center; text-align:center; margin-inline:auto; }
.ss-items-end{ align-items:flex-end; text-align:right; margin-left:auto; }

.ss-eyebrow{ font:600 var(--fs-xs)/1 var(--brand-font-body); letter-spacing:.14em; text-transform:uppercase; opacity:.82; margin:0 0 var(--space-3); display:inline-flex; align-items:center; gap:.5em; }
.ss-eyebrow::before{ content:""; width:1.6em; height:1.5px; background:currentColor; opacity:.7; }
.ss-title{ font:800 var(--fs-4xl)/1.04 var(--brand-font-heading); letter-spacing:-.02em; margin:0 0 var(--space-4); }
.ss-title--xxl{ font-size:var(--fs-5xl); }
.ss-subtitle{ font:600 var(--fs-lg)/1.35 var(--brand-font-heading); margin:0 0 var(--space-3); opacity:.92; }
.ss-desc{ font:400 var(--fs-md)/1.6 var(--brand-font-body); margin:0 0 var(--space-6); opacity:.86; max-width:46ch; }
.ss-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* V2 §9 : icône de bouton (SVG inline, voir views/templates/_buttons.php) et masquage mobile d'un
   CTA (checkbox "Masquer sur mobile" du réglage avancé du bouton). */
.ss-btn-icon{ flex:none; width:1.1em; height:1.1em; }
@media (max-width:720px){
  .ss-btn-hide-mobile{ display:none; }
}

/* --- Révélation au changement de diapositive (respecte prefers-reduced-motion, cf. tokens.css) --- */
.ss-reveal{ opacity:0; transform:translateY(var(--reveal-distance)); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay:var(--ss-delay,0ms); }
.ss-slide.is-active .ss-reveal, .ss-slider--single .ss-reveal{ opacity:1; transform:translateY(0); }

/* --- Navigation : flèches --- */
.ss-arrows{ position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-4); pointer-events:none; }
.ss-arrow{
  pointer-events:auto; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:color-mix(in srgb, #000 28%, transparent); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ss-arrow:hover{ background:color-mix(in srgb, #000 46%, transparent); }
.ss-arrow:active{ transform:scale(.94); }
.ss-arrow svg{ width:20px; height:20px; }
@media (max-width:640px){ .ss-arrow{ width:40px; height:40px; } }

/* --- Navigation : points --- */
.ss-dots{ position:absolute; z-index:3; left:0; right:0; bottom:var(--space-5); display:flex; gap:.55em; justify-content:center; }
.ss-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:color-mix(in srgb,#fff 45%,transparent); cursor:pointer; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ss-dot.is-active{ background:#fff; transform:scale(1.25); }
.ss-dots--dark .ss-dot{ background:color-mix(in srgb,#000 30%,transparent); }
.ss-dots--dark .ss-dot.is-active{ background:var(--brand-accent); }

/* --- Navigation : miniatures --- */
.ss-thumbs{ position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; gap:var(--space-2); padding:var(--space-3) var(--space-4); overflow-x:auto; scrollbar-width:none; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.ss-thumbs::-webkit-scrollbar{ display:none; }
.ss-thumb{ flex:none; width:76px; height:52px; border-radius:8px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; opacity:.6; transition:opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ss-thumb img{ width:100%; height:100%; object-fit:cover; }
.ss-thumb.is-active{ opacity:1; border-color:#fff; }
@media (max-width:640px){ .ss-thumbs{ display:none; } }

/* --- Compteur + barre de progression --- */
.ss-counter{ position:absolute; z-index:3; right:var(--space-5); bottom:var(--space-5); color:#fff; font:600 var(--fs-sm)/1 var(--brand-font-body); background:color-mix(in srgb,#000 30%,transparent); padding:.5em .8em; border-radius:var(--radius-pill); backdrop-filter:blur(6px); }
.ss-progress{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:3px; background:color-mix(in srgb,#fff 22%,transparent); }
.ss-progress > i{ display:block; height:100%; width:0%; background:var(--brand-accent); transition:width 80ms linear; }

/* --- Skip-link liste (accessibilité, exigence §15 : navigation clavier) --- */
.ss-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- Badge (promotion) / stat (technical highlights) : composants partagés légers --- */
.ss-badge{ display:inline-flex; align-items:center; gap:.5em; background:var(--brand-accent); color:var(--brand-on-accent); font:700 var(--fs-xs)/1 var(--brand-font-body); letter-spacing:.04em; padding:.5em .85em; border-radius:var(--radius-pill); }
.ss-price{ display:flex; align-items:baseline; gap:.6em; margin:0 0 var(--space-4); }
.ss-price del{ opacity:.55; font-size:var(--fs-md); }
.ss-price strong{ font:800 var(--fs-2xl)/1 var(--brand-font-heading); }
.ss-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-5); margin:0 0 var(--space-6); }
.ss-stat b{ display:block; font:800 var(--fs-3xl)/1 var(--brand-font-heading); letter-spacing:-.02em; }
.ss-stat span{ display:block; font-size:var(--fs-xs); opacity:.75; margin-top:.35em; text-transform:uppercase; letter-spacing:.06em; }

/* Halo lumineux directionnel (dark signature, produit flottant) — décoratif, aria-hidden */
.ss-glow{ position:absolute; z-index:1; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; }

/* --- V2 §10 : ambiances prédéfinies (voir SlideNormalizer::AMBIANCES) — RESPECTENT Brand Studio :
   aucune couleur ni police n'est JAMAIS fixée en dur ici, seuls l'intensité du voile, l'espacement
   et le rythme typographique sont ajustés à partir des variables de marque déjà en place. Neutre par
   défaut ("none", posé par frontend/shell.php seulement si explicitement choisi — voir shell.php) :
   une présentation qui ne configure pas d'ambiance n'est donc jamais affectée. --- */
.ss-ambiance-darkluxury .ss-overlay--full{ --ss-scrim-full:.5; }
.ss-ambiance-darkluxury .ss-overlay--scrim{ --ss-scrim-bottom:.68; }
.ss-ambiance-darkluxury .ss-eyebrow{ letter-spacing:.22em; }

.ss-ambiance-editorialminimal .ss-overlay--full{ --ss-scrim-full:.2; }
.ss-ambiance-editorialminimal .ss-overlay--scrim{ --ss-scrim-bottom:.36; }
.ss-ambiance-editorialminimal .ss-content{ max-width:560px; }
.ss-ambiance-editorialminimal .ss-eyebrow{ letter-spacing:.1em; opacity:.7; }

.ss-ambiance-catalogpremium .ss-overlay--full{ --ss-scrim-full:.4; }
.ss-ambiance-catalogpremium .ss-badge{ letter-spacing:.08em; }
.ss-ambiance-catalogpremium .ss-price strong{ font-size:var(--fs-3xl); }

.ss-ambiance-promo .ss-badge{ padding:.6em 1em; }
.ss-ambiance-promo .ss-title{ font-size:var(--fs-5xl); }
.ss-ambiance-promo .ss-price strong{ font-size:var(--fs-3xl); }

.ss-ambiance-corporate .ss-title{ font-size:var(--fs-3xl); letter-spacing:0; }
.ss-ambiance-corporate .ss-desc{ max-width:52ch; }
.ss-ambiance-corporate .ss-eyebrow{ letter-spacing:.08em; }

.ss-ambiance-techfuturist .ss-eyebrow{ letter-spacing:.28em; }
.ss-ambiance-techfuturist .ss-overlay--scrim{ --ss-scrim-top:.15; }
.ss-ambiance-techfuturist .ss-stat b{ letter-spacing:-.01em; }

.ss-ambiance-videoimmersive .ss-content{ padding-bottom:clamp(2rem,6vw,var(--space-9)); }
.ss-ambiance-videoimmersive .ss-overlay--scrim{ --ss-scrim-bottom:.75; }

.ss-ambiance-elegantcollection .ss-eyebrow{ letter-spacing:.16em; }
.ss-ambiance-elegantcollection .ss-title{ font-weight:700; letter-spacing:-.015em; }
.ss-ambiance-elegantcollection .ss-desc{ opacity:.78; }