{{--
    Section Hero moderne, claire et axée sur la conversion.
    - Entièrement responsive avec une image qui s'adapte.
    - Alignement vertical des colonnes sur desktop pour un design équilibré.
--}}
<section class="relative bg-white">
    {{-- Éléments décoratifs en arrière-plan --}}
    <div class="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl" aria-hidden="true">
        <div class="relative left-1/2 -z-10 aspect-[1155/678] w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#80caff] to-[#3b82f6] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
    
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Espacements ajustés pour un meilleur responsive --}}
        <div class="py-20 sm:py-24 lg:py-32">
            {{-- La grille principale est maintenant centrée verticalement sur les grands écrans --}}
            <div class="grid grid-cols-1 lg:grid-cols-2 lg:items-center gap-x-16 gap-y-12">
                
                <!-- Colonne de Texte (à droite pour RTL) -->
                <div class="relative z-10 text-center lg:text-right">
                    <h1 class="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
                        <span class="block">طريقك نحو</span>
                        <span class="block text-blue-600">توجيه جامعي ناجح</span>
                    </h1>
                    <p class="mt-6 max-w-xl mx-auto lg:mx-0 text-lg leading-8 text-slate-600">
                        كل ما تحتاجه لاتخاذ قرارات مستنيرة لمستقبلك الأكاديمي: من حساب السكور بدقة إلى استكشاف كل شعب التوجيه وآخر أخبارها.
                    </p>
                    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
                        <a href="https://score.tawjihi.tn/" target="_blank" class="w-full sm:w-auto inline-flex items-center justify-center gap-x-2 rounded-lg bg-blue-600 px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all duration-200 hover:-translate-y-1">
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V5a1 1 0 00-1-1H7zM6 14a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H7a1 1 0 01-1-1v-2zm5-4a1 1 0 00-1 1v5a1 1 0 001 1h1a1 1 0 001-1v-5a1 1 0 00-1-1h-1z" clip-rule="evenodd" /></svg>
                            <span>احسب سكورك الآن</span>
                        </a>
                        <a href="#" class="w-full sm:w-auto inline-flex items-center justify-center gap-x-2 rounded-lg px-6 py-3.5 text-base font-semibold leading-6 text-slate-700 ring-1 ring-slate-300 hover:ring-slate-400 hover:bg-slate-50 transition-all duration-200 hover:-translate-y-1">
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" /></svg>
                            <span>اكتشف شعب التوجيه</span>
                        </a>
                    </div>
                    <p class="mt-8 text-sm text-slate-500 text-center lg:text-right">
                        انضم لآلاف الطلاب الذين يثقون في Tawjihi.tn
                    </p>
                </div>

                <!-- Colonne de l'Image : la hauteur fixe a été retirée pour un affichage adaptatif -->
                <div class="relative mt-8 lg:mt-0" aria-hidden="true">
                    <img src="/cover-home.png" 
                         alt="Illustration d'un étudiant tunisien planifiant son avenir universitaire" 
                         class="relative w-full rounded-2xl shadow-xl">
                </div>

            </div>
        </div>
    </div>
</section>