:root {
        --text: #565656;
--links: #0F79D0;
--titles: #000000;
--page-background: #f6f6fe;
--highlight: #4f5de4;
--boxes-background: #FFFFFF;
--boxes-border: #c4c4c4;
--section-titles: #142E7B;
--section-titles-background: #F6F8FB;
--header-background: #FFFFFF;
--header-links: #000000;
--footer-background: #FFFFFF;
--footer-links: #0F79D0;
--titles-font-family: "", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--titles-h1-font-size: 2.2143rem;
--titles-h1-font-weight: 700;
--titles-h1-color: #000000;
--titles-h2-font-size: 1.5714rem;
--titles-h2-font-weight: 700;
--titles-h2-color: #000000;
--titles-h3-font-size: 1.2857rem;
--titles-h3-font-weight: 700;
--titles-h3-color: #000000;
--texts-font-family: "", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--texts-primary-font-size: 1.1429rem;
--texts-primary-color: #565656;
--texts-secondary-font-size: 1.0000rem;
--texts-secondary-color: #565656;
--texts-link-color: #0F79D0;
    }
    
:root { --react-body-font-family: "", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

<ods-catalog-context context="catalog">

    <section class="hp-hero">
        <div class="hp-hero__inner">
            <h1 class="hp-hero__title">Your space to<br><em>unlock insights</em> from data</h1>
            <p class="hp-hero__sub">Search, explore, and reuse trusted data assets.</p>
            <div class="hp-hero__search-wrap">
                <ods-searchbox
                    class="hp-searchbox"
                    form-id="hp-search-form"
                    placeholder="Search datasets, dashboards, apps...">
                </ods-searchbox>
                <button type="submit" form="hp-search-form" class="hp-search-btn">Search</button>
            </div>
        </div>
    </section>

    <section class="hp-cats">
        <div class="hp-wrap">
            <div class="hp-cats__header">
                <span class="hp-cats__label">Explorer par rubrique</span>
                <h2 class="hp-cats__title">Trouvez vos données <span>par univers</span></h2>
            </div>
            <div class="hp-cats__grid">

                <a href="/explore/?refines=themes%3AJeux" class="image-card hp-card--jeux">
                    <div class="image-content">
                        <h3 class="image-title">Jeux</h3>
                        <p class="image-description">Données sur l'industrie du jeu vidéo, tendances et audiences.</p>
                    </div>
                </a>

                <a href="/explore/?refines=themes%3AApprentissage" class="image-card hp-card--apprendre">
                    <div class="image-content">
                        <h3 class="image-title">Apprentissage</h3>
                        <p class="image-description">Ressources éducatives, formations et indicateurs de performance.</p>
                    </div>
                </a>

                <a href="/explore/?refines=themes%3AVie+quotidienne" class="image-card hp-card--quotidien">
                    <div class="image-content">
                        <h3 class="image-title">Vie quotidienne</h3>
                        <p class="image-description">Mobilité, consommation, santé et données du quotidien.</p>
                    </div>
                </a>

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

</ods-catalog-context>