/* RecordArr — Styles custom */

/* ============================================================
   MOTION TOKENS
   Variables CSS réutilisées dans toutes les animations.
   Changer une valeur ici la propage partout.
   ============================================================ */
:root {
    /* Durées */
    --duration-instant:  80ms;
    --duration-fast:    150ms;
    --duration-normal:  300ms;
    --duration-slow:    500ms;
    --duration-page:    400ms;

    /* Easings */
    --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);   /* décélération — entrées */
    --ease-in:        cubic-bezier(0.4, 0.0, 1.0, 1);   /* accélération — sorties */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);    /* entrée vive, très douce fin */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1); /* légère surtension — feedback */

    /* Distances de déplacement */
    --distance-xs:  4px;
    --distance-sm:  8px;
    --distance-md: 16px;
    --distance-lg: 24px;

    /* Couleurs sémantiques — Living Room Cinema */
    --coral: #FF6B6B;
    --coral-soft: rgba(255, 107, 107, 0.1);
    --coral-medium: rgba(255, 107, 107, 0.15);
    --teal: #2EC4B6;
    --teal-soft: rgba(46, 196, 182, 0.1);
    --teal-medium: rgba(46, 196, 182, 0.15);
    --violet: #7C5CFC;
    --violet-soft: rgba(124, 92, 252, 0.1);
    --amber: #F4A623;
    --amber-soft: rgba(244, 166, 35, 0.1);
    --green: #34C77B;
    --green-soft: rgba(52, 199, 123, 0.1);
    --red: #EF4444;
    --red-soft: rgba(239, 68, 68, 0.08);
    --red-medium: rgba(239, 68, 68, 0.12);

    /* Ombres douces */
    --shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.04), 0 1px 2px rgba(45, 42, 38, 0.06);
    --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.06), 0 2px 4px rgba(45, 42, 38, 0.04);
    --shadow-lg: 0 12px 32px rgba(45, 42, 38, 0.08), 0 4px 8px rgba(45, 42, 38, 0.04);
    --shadow-glow-coral: 0 8px 24px rgba(255, 107, 107, 0.15);
    --shadow-glow-teal: 0 8px 24px rgba(46, 196, 182, 0.15);

    /* Radius généreux */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Apparition simple (opacité seule) */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Apparition + remontée (cards, listes) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--distance-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide depuis la droite (navigation) */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(var(--distance-lg));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide depuis le haut (toasts) */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(calc(-100% - var(--distance-sm)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disparition vers le haut (toasts dismiss) */
@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(calc(-100% - var(--distance-sm)));
    }
}

/* Apparition avec léger zoom (modals, overlays) */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse rouge — enregistrement actif (remplace le pulse Tailwind si besoin) */
@keyframes pulse-recording {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* Shimmer pour les skeletons */
@keyframes skeleton-shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}

/* Flash d'apparition (ancien, conservé pour compatibilité) */
@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ============================================================
   CLASSES UTILITAIRES D'ANIMATION
   Usage : ajouter la classe sur l'élément HTML.
   Le stagger (décalage en cascade) se fait via --delay.
   ============================================================ */

.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out) both;
    animation-delay: var(--delay, 0ms);
}

.animate-fade-in-up {
    animation: fadeInUp var(--duration-normal) var(--ease-out-expo) both;
    animation-delay: var(--delay, 0ms);
}

.animate-slide-in {
    animation: slideInRight var(--duration-normal) var(--ease-out-expo) both;
    animation-delay: var(--delay, 0ms);
}

.animate-scale-in {
    animation: scaleIn var(--duration-fast) var(--ease-out-expo) both;
    animation-delay: var(--delay, 0ms);
}

/* Stagger automatique via nth-child — jusqu'à 10 éléments */
/* Exemple d'usage : mettre .stagger-children sur le parent */
.stagger-children > *:nth-child(1)  { --delay:   0ms; }
.stagger-children > *:nth-child(2)  { --delay:  50ms; }
.stagger-children > *:nth-child(3)  { --delay: 100ms; }
.stagger-children > *:nth-child(4)  { --delay: 150ms; }
.stagger-children > *:nth-child(5)  { --delay: 200ms; }
.stagger-children > *:nth-child(6)  { --delay: 250ms; }
.stagger-children > *:nth-child(7)  { --delay: 300ms; }
.stagger-children > *:nth-child(8)  { --delay: 350ms; }
.stagger-children > *:nth-child(9)  { --delay: 400ms; }
.stagger-children > *:nth-child(10) { --delay: 450ms; }
/* Au-delà du 10e, les éléments apparaissent sans délai supplémentaire */

/* Chargement de page — le contenu principal */
.page-enter {
    animation: fadeInUp var(--duration-page) var(--ease-out-expo) both;
}


/* ============================================================
   SKELETON SCREENS
   Remplacement des zones vides pendant le chargement.
   ============================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(45,42,38,0.04) 25%,
        rgba(45,42,38,0.08) 50%,
        rgba(45,42,38,0.04) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s var(--ease-out) infinite;
    border-radius: 0.5rem;
}

.skeleton-text {
    height: 0.875rem;
    border-radius: 4px;
}

.skeleton-text.skeleton-text--title {
    height: 1.125rem;
    width: 60%;
}

.skeleton-circle {
    border-radius: 9999px;
}

/* Carte skeleton type "enregistrement" */
.skeleton-card {
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #E8E3DC; /* warm-200 */
}


/* ============================================================
   TOASTS ANIMÉS
   Système de notifications positionnées en haut de l'écran.
   ============================================================ */

#toast-container {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top, 1rem));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: calc(100% - 2rem);
    max-width: 28rem;
    pointer-events: none; /* le container ne bloque pas les clics */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: white;
    box-shadow: 0 4px 24px rgba(45,42,38,0.15);
    backdrop-filter: blur(8px);
    cursor: pointer;
    animation: slideInDown var(--duration-normal) var(--ease-out-expo) both;
}

.toast.toast--dismissing {
    animation: slideOutUp var(--duration-fast) var(--ease-in) both;
}

.toast--success { background-color: rgba(16, 185, 129, 0.92); } /* emerald-500 */
.toast--error   { background-color: rgba(239,  68,  68, 0.92); } /* red-500 */
.toast--warning { background-color: rgba(245, 158,  11, 0.92); } /* amber-500 */
.toast--info    { background-color: rgba(59,  130, 246, 0.92); } /* blue-500 */
.toast--default { background-color: rgba(51,  65,  85, 0.92); }  /* slate-700 */

/* Barre de progression auto-dismiss */
.toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 0 0 0.75rem 0.75rem;
    background: rgba(255,255,255,0.4);
    transform-origin: left;
    animation: none; /* piloté par JS */
}

/* Bouton de fermeture dans le toast */
.toast__close {
    margin-left: auto;
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
    /* Cible tactile minimum 44×44 px (WCAG 2.5.8) */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.toast__close:hover {
    opacity: 1;
}

.toast__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    opacity: 1;
}


/* ============================================================
   MICRO-INTERACTIONS — FEEDBACK TACTILE MOBILE
   Réponse visuelle immédiate au tap/clic.
   ============================================================ */

/* Tap scale — à appliquer sur boutons et liens de nav */
.tap-scale {
    transition:
        transform var(--duration-instant) var(--ease-spring),
        opacity   var(--duration-instant) var(--ease-out);
}

.tap-scale:active {
    transform: scale(0.96);
    opacity: 0.85;
}

/* Hover subtil pour les cards interactives */
.card-hover {
    transition:
        border-color var(--duration-fast) var(--ease-out),
        transform    var(--duration-fast) var(--ease-out),
        box-shadow   var(--duration-fast) var(--ease-out);
}

.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(45,42,38,0.08);
}

.card-hover:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Bouton chargement */
.btn-loading {
    position: relative;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -0.4375rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin var(--duration-slow) linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   OVERLAY DE RECHERCHE (channels/index.php)
   ============================================================ */

#search-overlay {
    transition: opacity var(--duration-fast) var(--ease-out);
}

#search-overlay.hidden {
    display: none;
}

#search-overlay.overlay-enter {
    animation: fadeIn var(--duration-fast) var(--ease-out) both;
}

#search-overlay.overlay-exit {
    animation: fadeIn var(--duration-fast) var(--ease-in) reverse both;
}


/* ============================================================
   COMPOSANTS EXISTANTS (conservés / améliorés)
   ============================================================ */

/* Safe area pour les appareils avec encoche */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Line clamp pour les descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollbar discrète */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(45, 42, 38, 0.12);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 42, 38, 0.2);
}

/* Focus visible pour l'accessibilité (WCAG 2.4.7 + 2.4.11) */
*:focus-visible {
    outline: 2px solid #2EC4B6;
    outline-offset: 2px;
}

/* Summary (details) — focus visible explicite */
summary:focus-visible {
    outline: 2px solid #2EC4B6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Supprimer l'outline natif uniquement si focus-visible est géré
   Evite de laisser :focus sans indicateur sur les navigateurs anciens */
:focus:not(:focus-visible) {
    outline: none;
}

/* Input datetime-local sur mobile (couleur du texte) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Scrollbar cachée pour les chips horizontaux */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ============================================================
   TRANSITIONS DE NAVIGATION (PAGE-LEAVE)
   Quand on quitte une page, on déclenche .page-leave sur <main>
   via JS juste avant la navigation. Ça crée un fondu sortant.
   ============================================================ */

/* Sortie de page : le contenu principal disparaît vers le haut */
@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(calc(-1 * var(--distance-sm)));
    }
}

.page-leave {
    animation: fadeOutUp var(--duration-fast) var(--ease-in) both;
    pointer-events: none; /* bloquer les clics pendant la sortie */
}

/* La classe .page-enter est déjà définie plus haut.
   On l'améliore ici en ajoutant will-change pour le GPU.
   On ne redéfinit pas l'animation, on ajoute juste will-change. */
.page-enter {
    will-change: opacity, transform;
}


/* ============================================================
   BOTTOM NAVBAR — INDICATEUR ANIMÉ
   Un trait bleu glisse sous l'onglet actif.
   Implémenté en pseudo-élément sur .nav-item.is-active.
   ============================================================ */

/* Positionnement relatif nécessaire pour le pseudo-élément */
.nav-item {
    position: relative;
}

/* L'indicateur : un petit trait coral en bas de l'onglet actif */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #FF6B6B; /* coral */
    border-radius: 1px;
    transform: translateX(-50%);
    transition:
        width   var(--duration-normal) var(--ease-out-expo),
        opacity var(--duration-normal) var(--ease-out);
    opacity: 0;
}

/* Onglet actif : le trait s'étend */
.nav-item.text-accent::after {
    width: 20px;
    opacity: 1;
}

/* L'icône de l'onglet actif monte légèrement */
.nav-item.text-accent svg {
    transform: translateY(-1px);
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.nav-item:not(.text-accent) svg {
    transition: transform var(--duration-normal) var(--ease-out);
}

/* Tap sur la navbar : scale de l'icône */
.nav-item {
    transition:
        color var(--duration-fast) var(--ease-out);
}

.nav-item:active svg {
    transform: scale(0.88) !important;
    transition: transform var(--duration-instant) var(--ease-spring);
}


/* ============================================================
   RIPPLE — EFFET D'ONDE AU TAP SUR LES BOUTONS
   Généré dynamiquement via JS (voir app.js).
   Le bouton doit avoir overflow:hidden (ajouté via JS).
   ============================================================ */

.ripple-container {
    position: relative;
    overflow: hidden;
}

@keyframes ripple {
    from {
        transform: scale(0);
        opacity: 0.25;
    }
    to {
        transform: scale(3);
        opacity: 0;
    }
}

.ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(45, 42, 38, 0.1);
    pointer-events: none;
    animation: ripple var(--duration-slow) var(--ease-out) forwards;
    /* La taille et la position sont définies inline par JS */
}


/* ============================================================
   LOGIN — ANIMATION D'ENTRÉE
   La carte de connexion apparaît avec une légère remontée.
   ============================================================ */

.login-card-enter {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) both;
}


/* ============================================================
   SKELETON INLINE DANS LES LISTES
   Ces classes permettent de remplacer temporairement une liste
   par des blocs animés pendant le chargement (JS les injecte).
   ============================================================ */

/* Container skeleton pour la liste chaînes / enregistrements */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Skeleton d'une ligne de chaîne (logo + texte) */
.skeleton-channel-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    border: 1px solid #E8E3DC;
}

/* Skeleton d'une ligne d'enregistrement */
.skeleton-recording-row {
    padding: 1rem;
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    border: 1px solid #E8E3DC;
}


/* ============================================================
   FILTRES / CHIPS — TRANSITION D'ÉTAT ACTIF
   Les chips de filtre (recordings, channels) ont une
   transition douce quand on change de filtre actif.
   ============================================================ */

/* On améliore les chips existants avec une transition sur le fond */
.filter-chip {
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color            var(--duration-fast) var(--ease-out),
        transform        var(--duration-instant) var(--ease-spring);
}

.filter-chip:active {
    transform: scale(0.95);
}


/* ============================================================
   SECTION LABELS — LIVING ROOM CINEMA
   Titres de section avec dot indicateur coloré.
   ============================================================ */
.section-label {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9E968D;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
}

.section-label .count {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--teal-soft);
    color: var(--teal);
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
}


/* ============================================================
   LIVE RECORDING CARD — COMPOSANT ANIMÉ
   Card avec scan-line, sweep gradient, waveform, REC blink.
   ============================================================ */
.rec-card {
    background: white;
    border: 1.5px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md), 0 0 0 0 rgba(239, 68, 68, 0);
    animation: card-enter 0.5s var(--ease-out-expo) both;
    transition: box-shadow var(--duration-normal);
}

.rec-card:hover {
    box-shadow: var(--shadow-lg), 0 0 30px rgba(239, 68, 68, 0.06);
}

/* Sweep line gradient en haut de la card */
.rec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--coral), #FF8E8E, var(--coral));
    background-size: 200% 100%;
    animation: sweep-line 3s linear infinite;
    border-radius: 3px 3px 0 0;
}

@keyframes sweep-line {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Badge REC avec dot clignotant */
.rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--red-soft);
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
}

.rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: rec-blink 1s step-end infinite;
}

@keyframes rec-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Timer gros chiffres */
.rec-timer {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--coral);
    letter-spacing: 0.02em;
    text-align: right;
    margin-top: 0.5rem;
}

.rec-timer span {
    opacity: 0.3;
}

/* Progress bar avec glow */
.rec-progress {
    height: 4px;
    background: var(--red-soft);
    border-radius: 4px;
    margin-top: 0.85rem;
    overflow: hidden;
}

.rec-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), #FF8E8E);
    border-radius: 4px;
    animation: progress-glow 2.5s ease-in-out infinite;
}

@keyframes progress-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 107, 107, 0.2); }
    50% { box-shadow: 0 0 16px rgba(255, 107, 107, 0.35); }
}

/* Bouton stop */
.btn-stop {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--coral);
    background: var(--coral-soft);
    border: 1.5px solid rgba(255, 107, 107, 0.2);
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.btn-stop:hover {
    background: var(--coral-medium);
    border-color: var(--coral);
    box-shadow: var(--shadow-glow-coral);
}


/* ============================================================
   WAVEFORM VISUALIZER
   Barres audio animées à côté du badge REC.
   ============================================================ */
.waveform {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 24px;
}

.wave-bar {
    width: 3.5px;
    border-radius: 3px;
    background: var(--coral);
    animation: wave-dance 1.2s ease-in-out infinite;
}

.wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.wave-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 20px; animation-delay: 0.15s; }
.wave-bar:nth-child(5) { height: 14px; animation-delay: 0.25s; }
.wave-bar:nth-child(6) { height: 10px; animation-delay: 0.05s; }
.wave-bar:nth-child(7) { height: 18px; animation-delay: 0.3s; }

@keyframes wave-dance {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.3); }
}


/* ============================================================
   SCAN LINE
   Ligne subtile qui traverse les cards d'enregistrement.
   ============================================================ */
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--coral), transparent);
    opacity: 0.04;
    animation: scan-sweep 8s linear infinite;
    pointer-events: none;
}

@keyframes scan-sweep {
    0% { top: -2px; }
    100% { top: 100%; }
}


/* ============================================================
   SCHEDULED CARD — ENREGISTREMENT PROGRAMMÉ
   Card avec barre latérale teal au hover.
   ============================================================ */
.sched-card {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.65rem;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    animation: card-enter 0.5s var(--ease-out-expo) both;
}

.sched-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-glow-teal);
    transform: translateY(-2px);
}

/* Barre latérale teal au hover */
.sched-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--teal);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity var(--duration-fast);
}

.sched-card:hover::after { opacity: 1; }

.sched-badge {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--violet);
    background: var(--violet-soft);
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
}


/* ============================================================
   QUICK ACTION BUTTONS
   Cards avec radial gradient au hover.
   ============================================================ */
.action-card {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-lg);
    padding: 1.35rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    text-decoration: none;
    color: #2D2A26;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
}

.action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--duration-normal);
    border-radius: var(--radius-lg);
}

.action-card.coral-action::before {
    background: radial-gradient(circle at 50% 30%, var(--coral-soft), transparent 70%);
}

.action-card.teal-action::before {
    background: radial-gradient(circle at 50% 30%, var(--teal-soft), transparent 70%);
}

.action-card:hover::before { opacity: 1; }

.action-card:hover {
    transform: translateY(-3px);
}

.action-card.coral-action:hover {
    border-color: var(--coral);
    box-shadow: var(--shadow-glow-coral);
}

.action-card.teal-action:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-glow-teal);
}

.action-card:active { transform: scale(0.97); }

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.action-icon.coral { background: var(--coral-soft); color: var(--coral); }
.action-icon.teal { background: var(--teal-soft); color: var(--teal); }


/* ============================================================
   FAVORITE ITEM — CAROUSEL
   Logo chaîne avec hover scale + glow.
   ============================================================ */
.fav-item {
    transition: transform var(--duration-fast) var(--ease-spring);
}

.fav-item:hover {
    transform: scale(1.08) translateY(-2px);
}

.fav-item:active {
    transform: scale(0.95);
}

.fav-logo-box {
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal);
}

.fav-item:hover .fav-logo-box {
    border-color: var(--teal) !important;
    box-shadow: var(--shadow-glow-teal);
}


/* ============================================================
   CHANNEL CARD
   Card chaîne avec slide au hover.
   ============================================================ */
.channel-card {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
}

.channel-card:hover {
    border-color: #D4CEC5;
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}


/* ============================================================
   EPG CARD — PROGRAMME TV
   Card avec progress bar et bouton d'enregistrement.
   ============================================================ */
.epg-card {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.65rem;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
}

.epg-card:hover {
    border-color: #D4CEC5;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Bouton d'enregistrement circulaire */
.btn-record-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 107, 0.2);
    background: var(--coral-soft);
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-spring);
    box-shadow: none;
}

.btn-record-mini:hover {
    background: var(--coral-medium);
    border-color: var(--coral);
    box-shadow: var(--shadow-glow-coral);
    transform: scale(1.12);
}

.btn-record-mini:active { transform: scale(0.9); }

/* Tag "En cours" avec dot vert pulsant */
.now-tag {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.now-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 199, 123, 0.3); }
    50% { opacity: 0.7; box-shadow: 0 0 10px 4px rgba(52, 199, 123, 0.15); }
}

/* Progress bar verte */
.epg-progress {
    height: 3px;
    background: var(--green-soft);
    border-radius: 3px;
    margin-top: 0.85rem;
    overflow: hidden;
}

.epg-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--green), #5EDDA0);
    border-radius: 3px;
}


/* ============================================================
   LOG ENTRY — HISTORIQUE
   Card d'historique avec hover subtil.
   ============================================================ */
.log-entry {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
}

.log-entry:hover {
    border-color: #D4CEC5;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.log-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-icon.success { background: var(--green-soft); color: var(--green); }
.log-icon.pending { background: var(--amber-soft); color: var(--amber); }

.log-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
}

.log-status.ok { color: var(--green); background: var(--green-soft); }
.log-status.wait { color: var(--amber); background: var(--amber-soft); }


/* ============================================================
   STAT CARDS
   Cards de statistiques avec barre colorée en haut.
   ============================================================ */
.stat-card {
    background: white;
    border: 1.5px solid #E8E3DC;
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.stat-card.coral-top::before { background: linear-gradient(90deg, var(--coral), #FF8E8E); }
.stat-card.teal-top::before { background: linear-gradient(90deg, var(--teal), #5EDDA0); }
.stat-card.green-top::before { background: linear-gradient(90deg, var(--green), #5EDDA0); }
.stat-card.amber-top::before { background: linear-gradient(90deg, var(--amber), #FFCA5F); }

.stat-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #2D2A26;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9E968D;
}


/* ============================================================
   LIVE BADGE
   Badge "EN COURS" avec dot clignotant rouge.
   ============================================================ */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.live-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: rec-blink 1s step-end infinite;
}


/* ============================================================
   STATUS DOT — ONLINE INDICATOR
   Point vert pulsant dans le header.
   ============================================================ */
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-dot 2s ease-in-out infinite;
}


/* ============================================================
   STAGGER CONTAINER
   Animer les enfants en cascade (compatible avec stagger-children).
   ============================================================ */
.stagger > * {
    animation: card-enter 0.5s var(--ease-out-expo) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 70ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 210ms; }
.stagger > *:nth-child(5) { animation-delay: 280ms; }
.stagger > *:nth-child(6) { animation-delay: 350ms; }
.stagger > *:nth-child(7) { animation-delay: 420ms; }
.stagger > *:nth-child(8) { animation-delay: 490ms; }


/* ============================================================
   LOGIN — COMPOSANTS PREMIUM
   Bouton gradient, REC circle clignotant.
   ============================================================ */
.btn-gradient {
    background: linear-gradient(135deg, var(--coral), #FF8E8E);
    border: none;
    color: white;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.35);
}

.btn-gradient:active { transform: scale(0.98); }

.rec-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--coral);
    vertical-align: middle;
    animation: rec-blink 1s step-end infinite;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.35);
}


/* ============================================================
   LOGOUT BUTTON — STYLE PREMIUM
   Bouton avec hover coral et glow.
   ============================================================ */
.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid #E8E3DC;
    background: white;
    color: #9E968D;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
}

.btn-logout:hover {
    color: var(--coral);
    border-color: var(--coral);
    background: var(--coral-soft);
    box-shadow: var(--shadow-glow-coral);
}


/* ============================================================
   EFFETS DÉCORATIFS — LIVING ROOM CINEMA
   Grain subtil + blob organique + avatar gradient
   ============================================================ */

/* Grain de fond subtil */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Blob décoratif flottant */
body::after {
    content: '';
    position: fixed;
    top: -20%;
    right: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.06) 0%, rgba(46, 196, 182, 0.04) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: blob-float 20s ease-in-out infinite;
}

@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 40px) scale(1.05); }
    66% { transform: translate(20px, -20px) scale(0.95); }
}

/* Avatar avec bordure gradient animée */
.avatar-gradient::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FF6B6B, #2EC4B6, #7C5CFC, #FF6B6B);
    z-index: -1;
    animation: avatar-spin 8s linear infinite;
    opacity: 0.5;
}

@keyframes avatar-spin {
    to { transform: rotate(360deg); }
}

/* Le contenu principal doit être au-dessus du grain/blob */
body > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   REDUCED MOTION
   Principe : ne pas tout éteindre brutalement.
   On garde les transitions fonctionnelles (état focus, erreur)
   mais on supprime tout ce qui est ornemental (slides, fades).

   Ce bloc est en DERNIER pour avoir la priorité maximale.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* Toutes les animations décoratives : durée quasi-nulle */
    .animate-fade-in,
    .animate-fade-in-up,
    .animate-slide-in,
    .animate-scale-in,
    .page-enter,
    .page-leave,
    .login-card-enter,
    .stagger-children > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Les toasts apparaissent sans slide */
    .toast {
        animation: fadeIn var(--duration-fast) var(--ease-out) both !important;
    }
    .toast.toast--dismissing {
        animation: fadeIn var(--duration-fast) var(--ease-in) reverse both !important;
    }

    /* Skeletons : shimmer désactivé, fond statique */
    .skeleton {
        animation: none !important;
        background: rgba(45,42,38,0.06) !important;
    }

    /* Le spin du bouton loading : remplacé par opacité seule */
    .btn-loading::after {
        animation: none !important;
        opacity: 0.5;
    }

    /* Tap scale : désactivé */
    .tap-scale:active {
        transform: none !important;
        opacity: 0.7 !important;
    }

    /* Card hover : pas de déplacement */
    .card-hover:hover,
    .card-hover:active {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Transitions fonctionnelles conservées (feedback d'état) */
    * {
        transition-duration: var(--duration-fast) !important;
    }

    /* EXCEPTION : le pulse du dot enregistrement reste lisible
       mais on ralentit beaucoup pour ne pas déranger */
    .animate-pulse {
        animation-duration: 3s !important;
    }

    /* Indicateur navbar : apparaît sans transition */
    .nav-item::after {
        transition: none !important;
    }
    .nav-item.text-accent svg {
        transition: none !important;
    }

    /* Ripple : désactivé (purement décoratif) */
    .ripple-wave {
        display: none !important;
    }

    /* Chips de filtre : pas de scale au tap */
    .filter-chip:active {
        transform: none !important;
    }
}