/* =============================================================
   SNL Hero Slider — styles préfixés .snl-slider-*
   Portage pixel-perfect depuis React/Framer Motion → CSS vanilla
   ============================================================= */

/* ── Variables ── */
.snl-slider-wrapper {
    --snl-accent:      #D42B2B;
    --snl-dark:        #0a0b0f;
    --snl-dark-2:      #111214;
    --snl-font-sans:   'DM Sans', sans-serif;
    --snl-font-serif:  'DM Serif Display', Georgia, serif;
    --snl-font-mono:   'Space Mono', Menlo, monospace;
    --snl-ease-bg:     cubic-bezier(0.25, 0.1, 0.25, 1);   /* bg crossfade */
    --snl-ease-text:   cubic-bezier(0.22, 1, 0.36, 1);     /* texte spring */
    font-family: var(--snl-font-sans);
    position: relative;
}

/* ─────────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────────── */
.snl-slider-hero {
    position:   relative;
    height:     88vh;
    min-height: 580px;
    overflow:   hidden;
    background: #000;
    user-select: none;
}

/* ── Fonds (ken burns + crossfade) ── */
.snl-slider-bg-layer {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity 1.1s var(--snl-ease-bg);
    z-index:    1;
}

.snl-slider-bg-layer.snl-active {
    opacity: 1;
}

.snl-slider-bg-layer img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
    /* ken burns : scale réduit quand inactif → 1 quand actif */
    transform:  scale(1.06);
    transition: transform 1.1s var(--snl-ease-bg);
}

.snl-slider-bg-layer.snl-active img {
    transform: scale(1);
}

/* ── Dégradés cinématiques (deux couches) ── */
.snl-slider-grad-bottom,
.snl-slider-grad-left {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        2;
}

.snl-slider-grad-bottom {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.08) 100%
    );
}

.snl-slider-grad-left {
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.45) 0%,
        transparent 55%
    );
}

/* ─────────────────────────────────────────────
   BARRE SUPÉRIEURE
───────────────────────────────────────────── */
.snl-slider-topbar {
    position: absolute;
    top:   0;
    left:  0;
    right: 0;
    padding: 20px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    z-index: 10;
    /* Animation d'entrée initiale (depuis la gauche) — identique à Framer delay 0.3s */
    animation: snl-topbar-in 0.5s 0.3s var(--snl-ease-text) both;
}

@keyframes snl-topbar-in {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Badge EN DIRECT */
.snl-slider-live {
    display:     flex;
    align-items: center;
    gap:         8px;
    background:  var(--snl-accent);
    padding:     6px 12px;
}

.snl-slider-live-dot {
    position: relative;
    display:  inline-flex;
    width:    6px;
    height:   6px;
}

/* Cercle pulsant (ping) */
.snl-slider-live-dot::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    background:    #fff;
    opacity:       0.75;
    animation:     snl-ping 1.2s cubic-bezier(0,0,0.2,1) infinite;
}

.snl-slider-live-dot::after {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #fff;
    flex-shrink:   0;
}

@keyframes snl-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

.snl-slider-live > span:last-child {
    color:          #fff;
    font-size:      10px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* Navigation : dots + compteur */
.snl-slider-nav {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.snl-slider-dots {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.snl-slider-dot {
    border:        none;
    cursor:        pointer;
    padding:       0;
    border-radius: 100px;
    background:    rgba(255,255,255,0.3);
    /* État inactif : cercle 6×6px */
    width:  6px;
    height: 6px;
    transition: all 0.4s ease;
}

.snl-slider-dot.snl-active {
    /* État actif : pilule 24×6px */
    width:      24px;
    background: var(--snl-accent);
}

.snl-slider-dot:hover:not(.snl-active) {
    background: rgba(255,255,255,0.6);
}

.snl-slider-counter {
    font-family:    var(--snl-font-mono);
    font-size:      11px;
    color:          rgba(255,255,255,0.4);
    letter-spacing: 0.2em;
    white-space:    nowrap;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────
   CONTENU ÉDITORIAL (bas du hero)
───────────────────────────────────────────── */
.snl-slider-content {
    position: absolute;
    bottom: 0;
    left:   0;
    right:  0;
    padding: 0 24px 40px;
    z-index: 10;
}

/* Texte du slide — animé en entrée / sortie */
.snl-slider-slide-text {
    max-width:       768px;
    opacity:         0;
    transform:       translateY(28px);
    pointer-events:  none;
    margin-bottom:   32px;  /* espace avant les progress bars */
}

.snl-slider-slide-text.snl-text-visible {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Entrée : opacity 0→1 + translateY 28→0 — 0.55s spring */
.snl-slider-slide-text.snl-text-entering {
    animation: snl-text-in 0.55s var(--snl-ease-text) both;
}

/* Sortie : opacity 1→0 + translateY 0→-14px */
.snl-slider-slide-text.snl-text-exiting {
    animation: snl-text-out 0.55s var(--snl-ease-text) both;
}

@keyframes snl-text-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes snl-text-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-14px); }
}

/* Badge catégorie */
.snl-slider-badge {
    display:        inline-block;
    color:          #fff;
    font-size:      10px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding:        2px 8px;
    line-height:    1;
    font-family:    var(--snl-font-sans);
}

.snl-badge-ia           { background: #7c3aed; }
.snl-badge-fintech      { background: #059669; }
.snl-badge-startups     { background: #f97316; }
.snl-badge-tech         { background: #2563eb; }
.snl-badge-policy       { background: #e11d48; }
.snl-badge-international{ background: #0284c7; }
.snl-badge-telecom      { background: #0d9488; }
.snl-badge-podcast      { background: #ea580c; }
.snl-badge-video        { background: #b91c1c; }
.snl-badge-default      { background: var(--snl-accent); }

/* Ligne meta (badge + durée lecture) */
.snl-slider-meta {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 16px;
}

.snl-slider-read-time {
    color:          rgba(255,255,255,0.4);
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* Titre (lien) */
.snl-slider-headline {
    display:         block;
    margin-bottom:   20px;
    text-decoration: none;
}

.snl-slider-headline h1 {
    font-family: var(--snl-font-serif);
    font-weight: 700;
    color:       #fff;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-size:   clamp(1.9rem, 4.5vw, 3.5rem);
    margin:      0;
    transition:  color 0.2s;
}

.snl-slider-headline:hover h1 {
    color: rgba(255,255,255,0.85);
}

/* Extrait */
.snl-slider-excerpt {
    color:         rgba(255,255,255,0.6);
    font-size:     clamp(0.9rem, 1.3vw, 1.05rem);
    line-height:   1.6;
    margin-bottom: 24px;
    max-width:     672px;
    display:           -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Ligne inférieure : auteur + date + CTA */
.snl-slider-bottom-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         16px;
}

.snl-slider-author {
    color:          rgba(255,255,255,0.8);
    font-size:      14px;
    font-weight:    600;
    letter-spacing: 0.02em;
}

.snl-slider-date {
    display:        flex;
    align-items:    center;
    gap:            6px;
    color:          rgba(255,255,255,0.35);
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.snl-slider-date svg {
    width:   12px;
    height:  12px;
    flex-shrink: 0;
}

/* Bouton CTA "Lire l'article" */
.snl-slider-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    border:          1px solid rgba(255,255,255,0.25);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.22em;
    padding:         8px 16px;
    text-decoration: none;
    transition:      border-color 0.2s, background-color 0.2s;
}

.snl-slider-cta:hover {
    border-color:     var(--snl-accent);
    background-color: rgba(212,43,43,0.1);
    color:            #fff;
}

.snl-slider-cta svg {
    width:      12px;
    height:     12px;
    flex-shrink: 0;
    transition:  transform 0.2s;
}

.snl-slider-cta:hover svg {
    transform: translateX(2px);
}

/* ─────────────────────────────────────────────
   BARRES DE PROGRESSION
───────────────────────────────────────────── */
.snl-slider-progress-wrap {
    display: flex;
    gap:     6px;
    max-width: 768px;
}

.snl-slider-progress-bar {
    flex:          1;
    height:        2px;
    background:    rgba(255,255,255,0.15);
    border-radius: 100px;
    overflow:      hidden;
}

.snl-slider-progress-fill {
    height:           100%;
    background:       var(--snl-accent);
    transform:        scaleX(0);
    transform-origin: left center;
    border-radius:    100px;
}

/* Slide précédent : barre complète (60% opacité) */
.snl-slider-progress-bar.snl-done .snl-slider-progress-fill {
    transform:  scaleX(1);
    background: rgba(212,43,43,0.6);
    transition: none;
}

/* Slide actif : animation linéaire 6.5s (identique à Framer Motion source) */
.snl-slider-progress-bar.snl-active .snl-slider-progress-fill {
    animation: snl-progress 6.5s linear forwards;
}

@keyframes snl-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─────────────────────────────────────────────
   FLÈCHES PREV / NEXT (desktop uniquement)
───────────────────────────────────────────── */
.snl-slider-arrow {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    z-index:     10;
    display:     none;   /* caché mobile — affiché ≥1024px */
    align-items:     center;
    justify-content: center;
    width:       40px;
    height:      40px;
    border:      1px solid rgba(255,255,255,0.2);
    background:  rgba(0,0,0,0.3);
    color:       #fff;
    cursor:      pointer;
    transition:  background-color 0.2s, border-color 0.2s;
}

.snl-slider-arrow:hover {
    background-color: var(--snl-accent);
    border-color:     var(--snl-accent);
}

.snl-slider-arrow svg {
    width:  16px;
    height: 16px;
}

.snl-slider-arrow-prev { left:  16px; }
.snl-slider-arrow-next { right: 16px; }

/* ─────────────────────────────────────────────
   STRIP SECONDAIRE
───────────────────────────────────────────── */
.snl-slider-strip {
    background:   var(--snl-dark-2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.snl-slider-strip-inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 16px;
    display:   grid;
    grid-template-columns: 1fr;
}

.snl-slider-strip-item {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         16px;
    text-decoration: none;
    border-top:      1px solid rgba(255,255,255,0.1);
    transition:      background-color 0.2s;
}

.snl-slider-strip-item:first-child { border-top: none; }

.snl-slider-strip-item:hover {
    background-color: rgba(255,255,255,0.03);
}

.snl-slider-strip-thumb {
    width:      64px;
    height:     64px;
    flex-shrink: 0;
    overflow:   hidden;
    background: rgba(255,255,255,0.1);
}

.snl-slider-strip-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.8;
    transition: opacity 0.4s, transform 0.4s;
}

.snl-slider-strip-item:hover .snl-slider-strip-thumb img {
    opacity:   1;
    transform: scale(1.05);
}

.snl-slider-strip-body {
    flex:      1;
    min-width: 0;
}

.snl-slider-strip-meta {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 6px;
}

.snl-slider-strip-time {
    display:     flex;
    align-items: center;
    gap:         4px;
    color:       rgba(255,255,255,0.3);
    font-size:   10px;
}

.snl-slider-strip-time svg {
    width:  10px;
    height: 10px;
}

.snl-slider-strip-title {
    font-family: var(--snl-font-serif);
    font-size:   14px;
    font-weight: 700;
    color:       rgba(255,255,255,0.8);
    line-height: 1.3;
    margin:      0;
    display:           -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    transition:         color 0.2s;
}

.snl-slider-strip-item:hover .snl-slider-strip-title {
    color: #fff;
}

.snl-slider-strip-chevron {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
    color:       rgba(255,255,255,0.2);
    transition:  color 0.2s;
}

.snl-slider-strip-item:hover .snl-slider-strip-chevron {
    color: var(--snl-accent);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

/* Tablette (768px+) */
@media (min-width: 768px) {
    .snl-slider-topbar  { padding: 20px 40px; }
    .snl-slider-content { padding: 0 40px 56px; }

    .snl-slider-strip-inner {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 24px;
    }

    .snl-slider-strip-item {
        border-top:  none;
        border-left: 1px solid rgba(255,255,255,0.1);
        padding:     16px 24px;
    }

    .snl-slider-strip-item:first-child { border-left: none; }
}

/* Desktop (1024px+) — flèches visibles */
@media (min-width: 1024px) {
    .snl-slider-arrow { display: flex; }
}