@import "tailwindcss";

/* Le lecteur audio génère son HTML en JavaScript : on déclare explicitement
   son fichier source pour que Tailwind compile bien toutes les classes
   utilitaires qu'il utilise (sinon elles seraient absentes du CSS final). */
@source "../../public/js/podcast-player.js";

/* ============================================================
   Thème « Aurora » — nuit encrée + dégradé bleu → violet → rose
   (mêmes noms de tokens/classes que l'ancien thème doré : aucun
   template à modifier, seules les couleurs changent.)
   ============================================================ */
@theme {
    --font-display: "Fraunces", "Georgia", serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Fond — noir profond à peine teinté violet, comme les panneaux
       d'app sombres de la capture */
    --color-night-950: #0a0812;
    --color-night-900: #100d1b;
    --color-night-800: #191428;
    --color-night-700: #241d3a;
    --color-night-600: #322850;

    /* Texte */
    --color-ivory: #f4f2fa;
    --color-sand: #c7c2da;
    --color-sand-dim: #8b84a8;

    /* Accent — violet vif de la capture (remplace l'or) */
    --color-gold-300: #c9b6ff;
    --color-gold-400: #a78bfa;
    --color-gold-500: #8b5cf6;
    --color-gold-600: #6d28d9;

    /* Succès (flash messages) — vert, indépendant de l'accent de marque */
    --color-oasis: #34d399;

    --shadow-glow: 0 0 40px -8px rgb(139 92 246 / 0.45);
}

html {
    scroll-behavior: smooth;
}

@layer base {
    html {
        color-scheme: dark;
    }

    body {
        @apply bg-night-950 text-ivory font-sans antialiased;
        /* Lueurs bleu / violet / rose façon dégradé de la capture, en
           arrière-plan discret sur fond sombre (pas un fond clair plein). */
        background-image:
            radial-gradient(1100px 600px at 12% -10%, color-mix(in srgb, #4f46e5 20%, transparent), transparent 60%),
            radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, #ec4899 16%, transparent), transparent 55%),
            radial-gradient(800px 500px at -10% 65%, color-mix(in srgb, #8b5cf6 18%, transparent), transparent 60%);
        background-attachment: fixed;
    }

    h1, h2, h3 {
        @apply font-display text-ivory;
    }

    ::selection {
        @apply bg-gold-500/30 text-ivory;
    }
}

@layer components {
    /* Carte (conférences, thèmes, formulaires) */
    .card {
        @apply rounded-2xl border border-night-700/60 bg-night-900/70 backdrop-blur-sm
        transition duration-200 hover:border-gold-600/40 hover:bg-night-800/70;
    }

    /* Badge de thème sur une carte conférence */
    .chip {
        @apply inline-block rounded-full border border-gold-600/30 bg-gold-500/10
        px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-gold-300;
    }

    /* Liens de navigation */
    .nav-link {
        @apply text-sm text-sand transition-colors hover:text-gold-300;
    }
    .nav-link[aria-current="page"] {
        @apply text-gold-300;
    }

    /* Boutons — les deux variantes partagent exactement la même géométrie
       (padding, rayon, graisse) : elles sont presque toujours côte à côte,
       et toute différence de gabarit se voit immédiatement. */
    .btn-gold {
        @apply inline-flex items-center justify-center gap-2 rounded-xl
        bg-gradient-to-br from-gold-600 to-gold-300
        px-6 py-3 font-semibold text-white
        transition duration-200 hover:brightness-110 active:scale-[0.98]
        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold-400
        focus-visible:ring-offset-2 focus-visible:ring-offset-night-950;
    }
    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-xl
        border border-night-700 px-6 py-3 font-semibold text-sand
        transition duration-200 hover:border-gold-600/50 hover:bg-night-800/50 hover:text-gold-300
        active:scale-[0.98]
        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold-400
        focus-visible:ring-offset-2 focus-visible:ring-offset-night-950;
    }

    /* Surface statique : même habillage que .card, mais sans réaction au
       survol. Pour les conteneurs qu'on ne clique pas — un formulaire, un
       encart de texte —, où l'effet de survol laisse croire à tort que tout
       le bloc est cliquable. */
    .panel {
        @apply rounded-2xl border border-night-700/60 bg-night-900/70 backdrop-blur-sm;
    }

    /* Titre en dégradé façon "power users" de la capture */
    .text-gradient {
        @apply bg-gradient-to-r from-blue-400 via-violet-400 to-pink-400 bg-clip-text text-transparent;
    }

    /* Petit trait vertical devant les titres de section */
    .rule-gold {
        @apply relative pl-4;
    }
    .rule-gold::before {
        content: "";
        @apply absolute left-0 top-1 bottom-1 w-[3px] rounded-full
        bg-gradient-to-b from-gold-300 to-gold-600;
    }

    /* Champs de formulaire */
    .field {
        @apply w-full rounded-xl border border-night-700 bg-night-900/80
        px-4 py-3 text-ivory placeholder:text-sand-dim outline-none
        transition duration-200 focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20;
    }
    .label {
        @apply mb-1.5 block text-xs font-semibold uppercase tracking-wide text-sand-dim;
    }

    /* Messages flash */
    .flash-success {
        @apply mb-3 rounded-xl border border-oasis/30 bg-oasis/10 px-4 py-3 text-sm text-[#9be3cd];
    }
    .flash-error {
        @apply mb-3 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300;
    }
}

/* Barre de progression Turbo */
.turbo-progress-bar {
    background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-300));
    height: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   LECTEUR PODCAST — styles dédiés
   Ces classes sont utilisées par public/js/podcast-player.js.
   Elles sont définies ici (et non en utilitaires Tailwind inline)
   parce qu'elles sont appliquées dynamiquement en JS : on garantit
   ainsi qu'elles existent toujours dans le CSS compilé, quelle que
   soit la détection automatique des sources par Tailwind.
   ============================================================ */

/* ─── Ligne de piste dans une liste (playlist Twig, file d'attente) ───── */

.track-row {
    position: relative;
    transition: background-color 0.18s ease;
}
.track-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, var(--color-gold-300), var(--color-gold-600));
    transform: scaleY(0);
    transition: transform 0.22s ease;
}
.track-row:hover {
    background-color: color-mix(in srgb, var(--color-night-800) 55%, transparent);
}

/* Piste en cours : fond teinté, filet d'accent à gauche, titre accentué */
.track-row.is-active {
    background-color: color-mix(in srgb, var(--color-gold-500) 12%, transparent);
}
.track-row.is-active::before {
    transform: scaleY(1);
}
.track-row.is-active .track-title {
    color: var(--color-gold-300);
}
.track-row.is-active .track-meta {
    color: color-mix(in srgb, var(--color-gold-300) 70%, var(--color-sand-dim));
}

/* Badge « En lecture / En pause » révélé uniquement sur la ligne active */
.track-badge {
    display: none;
}
.track-row.is-active .track-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold-300);
}

/* Barre de progression fine, affichée sous le titre de la ligne active
   ainsi que sur les pistes déjà entamées (reprise d'écoute). */
.track-progress {
    height: 2px;
    width: 100%;
    margin-top: 6px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--color-night-600) 70%, transparent);
    overflow: hidden;
}
.track-progress > i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-300));
    transition: width 0.25s linear;
}
.track-row:not(.is-active) .track-progress > i {
    background: color-mix(in srgb, var(--color-sand-dim) 60%, transparent);
}

/* ─── Égaliseur animé (indique visuellement la piste en cours) ───────── */

.eq {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 14px;
    color: var(--color-gold-300);
}
.eq > i {
    display: block;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background-color: currentColor;
    transform-origin: bottom;
    animation: eq-bounce 0.95s ease-in-out infinite;
}
.eq > i:nth-child(2) { animation-delay: 0.18s; }
.eq > i:nth-child(3) { animation-delay: 0.36s; }
.eq > i:nth-child(4) { animation-delay: 0.54s; }

/* En pause : les barres se figent à mi-hauteur plutôt que de disparaître */
.eq.is-paused > i {
    animation-play-state: paused;
    transform: scaleY(0.35);
}

@keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.28); }
    50%      { transform: scaleY(1); }
}

/* ─── Barre de progression personnalisée (scrubber) ──────────────────── */
/* Un <input type=range> ne permet pas d'afficher le tampon (buffer) ni
   l'aperçu du temps au survol : on construit donc la barre en divs. */

.pp-scrub {
    position: relative;
    flex: 1 1 auto;
    padding: 7px 0;
    cursor: pointer;
    touch-action: none;
    outline: none;
}
.pp-scrub-track {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-night-600) 85%, transparent);
    overflow: visible;
    transition: height 0.15s ease;
}
.pp-scrub:hover .pp-scrub-track,
.pp-scrub:focus-visible .pp-scrub-track {
    height: 6px;
}
.pp-scrub:focus-visible .pp-scrub-track {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold-500) 45%, transparent);
}
.pp-scrub-buffer,
.pp-scrub-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
}
.pp-scrub-buffer {
    background-color: color-mix(in srgb, var(--color-sand-dim) 35%, transparent);
}
.pp-scrub-fill {
    background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-300));
}
.pp-scrub-thumb {
    position: absolute;
    right: 0;
    top: 50%;
    height: 12px;
    width: 12px;
    transform: translate(50%, -50%) scale(0);
    border-radius: 999px;
    background-color: var(--color-ivory);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold-500) 40%, transparent);
    transition: transform 0.15s ease;
}
.pp-scrub:hover .pp-scrub-thumb,
.pp-scrub:focus-visible .pp-scrub-thumb,
.pp-scrub.is-dragging .pp-scrub-thumb {
    transform: translate(50%, -50%) scale(1);
}
.pp-scrub-tip {
    position: absolute;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    background-color: var(--color-night-800);
    border: 1px solid color-mix(in srgb, var(--color-night-600) 90%, transparent);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-ivory);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
}
.pp-scrub:hover .pp-scrub-tip,
.pp-scrub.is-dragging .pp-scrub-tip {
    opacity: 1;
}

/* ─── Boutons du lecteur ─────────────────────────────────────────────── */

.pp-btn {
    display: grid;
    place-items: center;
    height: 34px;
    width: 34px;
    border-radius: 999px;
    color: var(--color-sand-dim);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.pp-btn:hover:not(:disabled) {
    color: var(--color-ivory);
    background-color: color-mix(in srgb, var(--color-night-700) 70%, transparent);
}
.pp-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.pp-btn.is-on {
    color: var(--color-gold-300);
}
/* Pastille signalant une option active (aléatoire, répétition, minuteur) */
.pp-btn.is-on::after {
    content: "";
    position: absolute;
    bottom: 3px;
    height: 3px;
    width: 3px;
    border-radius: 999px;
    background-color: currentColor;
}
.pp-btn {
    position: relative;
}

.pp-play {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-gold-600), var(--color-gold-300));
    color: #fff;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.pp-play:hover:not(:disabled) {
    transform: scale(1.06);
    filter: brightness(1.08);
}
.pp-play:disabled {
    opacity: 0.4;
}

.pp-pill {
    border-radius: 999px;
    border: 1px solid var(--color-night-700);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-sand);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.pp-pill:hover {
    border-color: color-mix(in srgb, var(--color-gold-500) 50%, transparent);
    color: var(--color-gold-300);
}
.pp-pill.is-on {
    border-color: color-mix(in srgb, var(--color-gold-500) 60%, transparent);
    color: var(--color-gold-300);
}

/* Anneau de chargement affiché à la place du bouton lecture pendant le buffering */
.pp-spinner {
    height: 18px;
    width: 18px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, #fff 35%, transparent);
    border-top-color: #fff;
    animation: pp-spin 0.7s linear infinite;
}
@keyframes pp-spin {
    to { transform: rotate(360deg); }
}

/* ─── Barre du bas ───────────────────────────────────────────────────── */

.pp-bar {
    border-top: 1px solid color-mix(in srgb, var(--color-night-700) 80%, transparent);
    background-color: color-mix(in srgb, var(--color-night-900) 94%, transparent);
    backdrop-filter: blur(18px);
    animation: pp-slide-up 0.28s ease;
}
@keyframes pp-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Vignette de la conférence en cours, avec pulsation pendant la lecture */
.pp-art {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-gold-500) 40%, transparent);
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-gold-500) 25%, transparent), var(--color-night-950));
    color: var(--color-gold-300);
}
.pp-art > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* Repli calligraphique : le ligature ﷽ est très large, on la contient. */
.pp-art-glyph {
    max-width: 100%;
    font-size: 0.9em;
    line-height: 1;
    overflow: hidden;
}
.pp-art.is-playing {
    animation: pp-pulse 2.6s ease-in-out infinite;
}
@keyframes pp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold-500) 30%, transparent); }
    50%      { box-shadow: 0 0 22px -4px color-mix(in srgb, var(--color-gold-500) 60%, transparent); }
}

/* ─── Curseur de volume ──────────────────────────────────────────────── */

.pp-volume {
    height: 4px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-night-600) 85%, transparent);
    accent-color: var(--color-gold-400);
    appearance: none;
    cursor: pointer;
}
.pp-volume::-webkit-slider-thumb {
    appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 999px;
    background-color: var(--color-ivory);
    border: none;
}
.pp-volume::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border: none;
    border-radius: 999px;
    background-color: var(--color-ivory);
}

/* ─── Menus déroulants (vitesse, minuteur) et panneaux ───────────────── */

.pp-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 10;
    min-width: 160px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-night-700) 90%, transparent);
    background-color: var(--color-night-900);
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.7);
    padding: 6px;
    animation: pp-fade-in 0.14s ease;
}
@keyframes pp-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pp-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--color-sand);
    text-align: left;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.pp-menu-item:hover {
    background-color: color-mix(in srgb, var(--color-night-700) 70%, transparent);
    color: var(--color-ivory);
}
.pp-menu-item.is-on {
    color: var(--color-gold-300);
}

/* Bandeau d'erreur de lecture */
.pp-error {
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #ef4444 40%, transparent);
    background-color: color-mix(in srgb, #ef4444 12%, transparent);
    color: #fca5a5;
    font-size: 12px;
    padding: 6px 10px;
}

/* Nombres alignés pour les compteurs de temps (évite le sautillement) */
.tabular {
    font-variant-numeric: tabular-nums;
}

/* Espace réservé à la barre de lecture.
   La réservation porte sur <body> et non sur <main> : le pied de page est un
   frère de <main>, une marge posée sur <main> le laissait donc passer sous la
   barre — ses derniers liens (mentions légales, confidentialité) devenaient
   inaccessibles une fois la lecture lancée.
   La hauteur est mesurée en JavaScript (podcast-player.js) et publiée dans
   --pp-bar-height : elle vaut 0 tant qu'aucune conférence n'est lancée — donc
   aucun vide inutile — et suit la barre quand elle passe à deux lignes sur
   mobile, sans valeur codée en dur à maintenir de part et d'autre. */
body {
    padding-bottom: var(--pp-bar-height, 0px);
}

/* Panneaux (file d'attente, playlists, historique) et messages éphémères :
   posés juste au-dessus de la barre, quelle que soit sa hauteur. */
.pp-docked {
    bottom: calc(var(--pp-bar-height, 0px) + 12px);
}
.pp-toast {
    bottom: calc(var(--pp-bar-height, 0px) + 24px);
}

/* Survol du bouton d'une ligne en cours de lecture : l'égaliseur cède la
   place à l'icône pause, pour que le clic soit prévisible. */
.row-alt {
    display: none;
}
[data-play]:hover > .row-eq {
    display: none;
}
[data-play]:hover > .row-alt {
    display: grid;
    place-items: center;
}