@extends('layouts.app')

@section('titre', $cours->titre)

@push('head')
<style>
    .contenu-cours h1, .contenu-cours h2, .contenu-cours h3 { color: var(--sy-ink); font-weight: 800; margin: 1.4em 0 .5em; }
    .contenu-cours p, .contenu-cours li { color: var(--sy-ink); font-weight: 500; line-height: 1.6; }
    .contenu-cours code { font-family: ui-monospace, "IBM Plex Mono", monospace; background: var(--sy-bg); border-radius: 4px; padding: 0 4px; }
    .contenu-cours pre { background: var(--sy-bg); border: 1px solid var(--sy-line); border-radius: 10px; padding: 12px; overflow-x: auto; }
    .contenu-cours ul { list-style: disc; padding-left: 1.4em; }
</style>
@endpush

@section('contenu')
    <div class="mx-auto max-w-3xl px-5 py-10">
        <p class="font-mono text-sm font-semibold"><a href="{{ route('mes-cours') }}" class="underline" style="color:var(--sy-muted)">← Mes cours</a></p>
        <h1 class="mt-2 text-3xl font-extrabold" style="color:var(--sy-ink)">{{ $cours->titre }}</h1>
        <div class="contenu-cours mt-6">{!! $html !!}</div>
    </div>
@endsection