@extends('layouts.vitrine')

@section('titre', 'Ressources')

@section('contenu')
<div style="background:#fff">
    <section style="padding:112px 20px 64px">
        <div style="max-width:880px;margin:0 auto;text-align:center">
            <p id="r-titre-k" style="margin:0;font-size:15px;font-weight:700;color:#1d5cf5;letter-spacing:0.01em">Outil</p>
            <h1 id="r-titre" style="margin:20px 0 0;font-size:clamp(40px,6vw,68px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-wrap:balance">Outil</h1>
            <p id="r-probleme" style="margin:28px auto 0;max-width:640px;font-size:20px;line-height:1.6;font-weight:500;color:#374151;text-wrap:pretty"></p>
            <div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px">
                <a id="r-demo" href="#" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Voir la démo</a>
                <p style="margin:0;font-size:14px;font-weight:600;color:#4b5563">Interactive, sans inscription</p>
            </div>
        </div>
    </section>
    <section style="padding:0 20px 120px">
        <div style="max-width:1080px;margin:0 auto">
            <div id="r-video" style="position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:24px;background:#f3f4f6;box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.18)"></div>
            <p id="r-video-legende" style="margin:16px 0 0;text-align:center;font-size:14px;font-weight:600;color:#4b5563"></p>
        </div>
    </section>
    <section style="padding:0 20px 120px">
        <ul id="r-points" style="max-width:1080px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:56px 48px"></ul>
    </section>
    <section style="padding:0 20px 120px">
        <div style="max-width:720px;margin:0 auto">
            <h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">En trois étapes</h2>
            <ol id="r-etapes" style="margin:40px 0 0;padding:0;list-style:none;display:grid;gap:28px"></ol>
        </div>
    </section>
    <section style="padding:96px 20px 128px;border-top:1px solid #e5e7eb">
        <div style="max-width:720px;margin:0 auto;text-align:center">
            <p id="r-pour" style="margin:0;font-size:15px;font-weight:700;color:#4b5563"></p>
            <h2 id="r-accroche-fin" style="margin:16px 0 0;font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance"></h2>
            <a id="r-demo2" href="#" style="margin-top:36px;display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Voir la démo</a>
        </div>
    </section>
    <script src="{{ asset('js/ressources.js') }}"></script>
    <script>window.URL_VIDEOS = "{{ asset('videos') }}"; window.URL_RESSOURCE = "{{ route('ressource') }}"; window.URL_DEMOS = {"cockpit": "{{ route('cockpit') }}", "espace-eleve": "{{ route('espace.eleve') }}", "vie-scolaire": "{{ route('vie.scolaire') }}", "academie": "{{ route('academie') }}", "cohortes": "{{ route('cohortes') }}", "espace-etablissement": "{{ route('espace.etablissement') }}", "integration": "{{ route('integration') }}", "cours": "{{ route('cours.index') }}", "labs": "{{ route('labs.index') }}", "lab-web": "{{ route('labs.web') }}", "ide": "{{ route('ide') }}", "maison": "{{ route('maison') }}", "bibliotheque": "{{ route('bibliotheque') }}", "banque": "{{ route('banque') }}", "generateur": "{{ route('generateur') }}", "td-imprimable": "{{ route('td.imprimable') }}", "quiz": "{{ route('quiz.projection') }}", "sujet": "{{ route('sujet.creer') }}", "devoirs": "{{ route('devoirs') }}", "correction": "{{ route('correction') }}", "fiche-eleve": "{{ route('fiche.eleve') }}", "messagerie": "{{ route('messagerie') }}", "export": "{{ route('export.ent') }}"};</script>
    <script src="{{ asset('js/ressource-page.js') }}"></script>
</div>
@endsection