<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Accueil — Trésors de Snacks</title>

<meta name="description" content="Trésors de Snacks : une nouvelle vision de la restauration rapide premium, inspirée des États-Unis, pensée pour le goût, le partage et l’avenir.">

<meta name="theme-color" content="#fffaf2">

<link rel="icon" href="/assets/images/logo/logo.png">


<style>

/* ==========================================================

   HEADER HTML — LÉGER ET SANS DÉPENDANCE EXTERNE

   ========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,253,249,.96);

    border-bottom:1px solid #e7ded1;

}

.site-header-inner{

    width:min(1180px,calc(100% - 40px));

    min-height:82px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:24px;

}

.site-logo{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

}

.site-logo img{

    display:block;

    width:70px;

    height:70px;

    object-fit:contain;

}

.site-nav{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

}

.site-nav a{

    padding:11px 13px;

    border-radius:12px;

    color:#4d554f;

    text-decoration:none;

    font:800 13px/1 Arial,sans-serif;

    transition:background .2s ease,color .2s ease;

}

.site-nav a:hover,

.site-nav a.is-active{

    color:#d62828;

    background:#fff1ed;

}

.site-header-cta{

    flex:0 0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 15px;

    border-radius:12px;

    background:#d62828;

    color:#fff;

    text-decoration:none;

    font:900 12px/1 Arial,sans-serif;

}

.site-menu-toggle{

    display:none;

    width:42px;

    height:42px;

    padding:9px;

    border:1px solid #e2d9cd;

    border-radius:12px;

    background:#fff;

    cursor:pointer;

}

.site-menu-toggle span{

    display:block;

    height:2px;

    margin:4px 0;

    background:#27302a;

}

@media(max-width:900px){

    .site-header-inner{min-height:72px;width:min(100% - 24px,1180px)}

    .site-logo img{width:58px;height:58px}

    .site-header-cta{display:none}

    .site-menu-toggle{display:block;margin-left:auto}

    .site-nav{

        position:absolute;

        left:12px;

        right:12px;

        top:calc(100% + 8px);

        display:none;

        flex-direction:column;

        align-items:stretch;

        padding:10px;

        border:1px solid #e7ded1;

        border-radius:18px;

        background:#fffdf9;

        box-shadow:0 16px 35px rgba(55,40,22,.12);

    }

    .site-nav.is-open{display:flex}

    .site-nav a{padding:13px 14px}

}

</style>


<style>

/* ==========================================================

   INDEX — OPTION 3 : GOURMANDE & VISUELLE / ÉCO-CONÇUE

   ========================================================== */

:root{

    --home-bg:#fffaf2;

    --home-bg-soft:#f7f1e7;

    --home-panel:#ffffff;

    --home-panel-soft:#fffdf8;

    --home-text:#202522;

    --home-muted:#66706a;

    --home-border:#e7ded1;

    --home-red:#D62828;

    --home-red-dark:#A71F1F;

    --home-yellow:#F4B942;

    --home-green:#68A357;

    --home-cyan:#2B9BA8;

    --home-pink:#D95D9A;

    --home-shadow:0 12px 32px rgba(55,40,22,.08);

    --home-shadow-hover:0 18px 40px rgba(55,40,22,.12);

}

html{scroll-behavior:smooth}

body.home-modern{margin:0;background:var(--home-bg);color:var(--home-text)}

body.home-modern main{overflow:hidden}

.home-modern .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}

.home-modern a{color:inherit}

.home-modern h1,.home-modern h2,.home-modern h3,.home-modern p{margin-top:0}

.home-modern h1,.home-modern h2{letter-spacing:-.035em}

.home-modern p{line-height:1.7}


/* Hero : image au premier plan, sans décorations lourdes */

.home-hero{

    position:relative;

    min-height:690px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

        radial-gradient(circle at 82% 20%,rgba(244,185,66,.16),transparent 24%),

        linear-gradient(180deg,#fffdf9 0%,#fff8ed 100%);

}

.hero-noise,.hero-orb{display:none}

.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center;padding:76px 0}

.hero-content{max-width:650px}

.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--home-red);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}

.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--home-yellow)}

.home-hero h1{margin:18px 0 22px;font-size:clamp(56px,7vw,94px);line-height:.92;font-weight:900;color:var(--home-text)}

.home-hero h1 em{font-style:normal;color:var(--home-red)}

.hero-copy{max-width:590px;color:var(--home-muted);font-size:18px}

.hero-actions,.hero-traits,.business-actions{display:flex;flex-wrap:wrap;gap:11px}

.hero-actions{margin-top:28px}

.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border:1px solid var(--home-border);border-radius:14px;text-decoration:none;font-weight:900;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}

.home-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(55,40,22,.09)}

.home-btn-primary{background:var(--home-red);border-color:var(--home-red);color:#fff;box-shadow:0 8px 22px rgba(214,40,40,.18)}

.home-btn-light{background:#fff;color:var(--home-text)}

.home-btn-outline{background:transparent;color:var(--home-red);border-color:rgba(214,40,40,.35)}

.home-btn-yellow{background:var(--home-yellow);color:#2b2518;border-color:#e4a92f}

.hero-traits{margin-top:22px}

.hero-traits span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--home-border);border-radius:999px;background:rgba(255,255,255,.72);color:#4f5953;font-size:12px;font-weight:800}

.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}

.home-modern .hero-image{position:relative;width:100%;max-width:640px;aspect-ratio:6/5;margin-left:auto;overflow:hidden;border:8px solid #fff;border-radius:34px;background:#f0e6d7;box-shadow:0 22px 50px rgba(55,40,22,.14)}

.home-modern .hero-image:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.55);border-radius:24px;pointer-events:none}

.home-modern .hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}


/* Bandeau de marque */

.home-strip{border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);background:#fff;overflow:hidden}

.home-strip-track{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;padding:13px 20px;color:#606a63;font-size:10px;font-weight:900;letter-spacing:.12em}

.home-strip-track b{color:var(--home-red)}


/* Sections : alternance crème / blanc */

.home-section{padding:92px 0;background:var(--home-bg)}

.home-menu,.home-media{background:#fff}

.split-layout,.values-layout,.media-layout,.contact-layout,.business-layout,.final-layout{display:grid;gap:38px}

.split-layout{grid-template-columns:1fr 1fr;align-items:center}

.section-copy{max-width:640px}

.section-copy h2,.section-head h2,.media-copy h2,.home-business h2,.home-final h2{margin:15px 0;font-size:clamp(42px,5vw,68px);line-height:.96}

.section-copy h2 span,.section-head h2 span,.media-copy h2 span,.home-business h2 span,.home-final h2 span{color:var(--home-red)}

.section-copy p{color:var(--home-muted);font-size:17px;max-width:590px}

.text-link{display:inline-flex;gap:8px;align-items:center;margin-top:12px;color:var(--home-red);text-decoration:none;font-weight:900}


/* Visuel éditorial sans image supplémentaire */

.intro-art{position:relative;min-height:390px;overflow:hidden;border-radius:28px;border:1px solid var(--home-border);background:#f4eadb}

.intro-art-grid{position:absolute;inset:0;opacity:.35;background:linear-gradient(rgba(91,73,48,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,73,48,.08) 1px,transparent 1px);background-size:42px 42px}

.intro-art-title{position:absolute;left:30px;bottom:28px;font-size:44px;line-height:.86;font-weight:900;color:#252922}

.intro-art-title small{display:block;margin-top:12px;color:var(--home-red);font-size:11px;letter-spacing:.17em}

.intro-art-shape{position:absolute;border-radius:50%;filter:none}

.shape-red{right:7%;top:13%;width:170px;height:170px;background:var(--home-red)}

.shape-cyan{left:12%;bottom:12%;width:105px;height:105px;background:var(--home-green)}

.shape-red:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:50px}

.shape-cyan:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:38px;font-weight:900}


.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}

.section-head>p{margin:0;color:var(--home-muted);max-width:320px}


/* Carte : très visuelle et colorée */

.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}

.menu-card{position:relative;min-height:290px;padding:21px;border-radius:24px;border:1px solid var(--home-border);background:var(--home-panel);text-decoration:none;box-shadow:var(--home-shadow);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}

.menu-card:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--card-color,var(--home-red))}

.menu-card:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-hover)}

.menu-no{font-size:10px;letter-spacing:.14em;color:#89918b;font-weight:900}

.menu-icon{height:122px;display:grid;place-items:center;margin-top:5px;border-radius:18px;background:var(--card-bg,#f8f1e7)}

.menu-card h3{margin:18px 0 7px;font-size:21px;color:var(--home-text)}

.menu-card p{margin:0;color:var(--home-muted);font-size:14px}

.menu-arrow{position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--card-color,var(--home-red))}

.menu-card-red{--card-color:var(--home-red);--card-bg:#fff0ee}

.menu-card-cyan{--card-color:var(--home-cyan);--card-bg:#eaf7f7}

.menu-card-yellow{--card-color:var(--home-yellow);--card-bg:#fff7dc}

.menu-card-yellow .menu-arrow{color:#2b2518}

.menu-card-green{--card-color:var(--home-green);--card-bg:#eef7eb}


/* Valeurs */

.home-values{background:var(--home-bg-soft)}

.values-layout{grid-template-columns:.8fr 1.2fr;align-items:start}

.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.value-card{padding:22px;border-radius:22px;border:1px solid var(--home-border);background:#fff;box-shadow:var(--home-shadow);transition:transform .2s ease,box-shadow .2s ease}

.value-card:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-hover)}

.value-top{display:flex;justify-content:space-between;align-items:center;color:#8b938d;font-size:11px;font-weight:900;letter-spacing:.12em}

.value-card:nth-child(1) .value-top .index-icon{filter:none}

.value-card h3{margin:26px 0 8px;font-size:20px}

.value-card p{margin:0;color:var(--home-muted);font-size:14px}


/* Chiffres : un seul bloc accentué plutôt qu'une section sombre */

.home-stats{padding:88px 0;background:var(--home-red);color:#fff}

.section-head-inverse h2,.section-head-inverse .section-kicker{color:#fff}

.section-head-inverse h2 span{color:var(--home-yellow)}

.section-head-inverse>p{color:rgba(255,255,255,.82)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}

.stat-box{padding:27px 20px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:rgba(255,255,255,.10)}

.stat-box strong{font-size:55px;line-height:.9;color:#fff}

.stat-box:nth-child(2) strong{color:var(--home-yellow)}

.stat-box:nth-child(3) strong{color:#d9f0d2}

.stat-box:nth-child(4) strong{color:#d6f3f5}

.stat-box>span{margin-left:5px;font-weight:900;color:#fff}

.stat-box p{margin:15px 0 0;color:rgba(255,255,255,.82);font-size:14px}


/* Vidéo */

.media-layout{grid-template-columns:.78fr 1.22fr;align-items:stretch}

.media-copy{padding:32px;border-radius:26px;border:1px solid var(--home-border);background:var(--home-bg-soft)}

.media-copy blockquote{margin:35px 0 13px;color:#303730;font-size:21px;line-height:1.45;font-weight:800}

.media-copy small{color:#7b847e}

.video-card{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--home-border);background:#1c211e;box-shadow:var(--home-shadow)}

.home-modern .video-player{position:relative;width:100%;aspect-ratio:16/9;min-height:350px;overflow:hidden;background:#242a25}

.home-modern .video-self-hosted{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#242a25}

.home-modern .video-player-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,20,16,.40),transparent 45%,rgba(15,20,16,.76))}

.home-modern .video-player-top{position:absolute;top:16px;left:16px;right:16px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}

.home-modern .video-player-title{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;background:rgba(20,25,21,.72);font-size:.68rem;font-weight:800;letter-spacing:.10em}

.home-modern .video-player-dot{width:7px;height:7px;border-radius:50%;background:var(--home-yellow)}

.home-modern .video-player-quality{padding:7px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;background:rgba(20,25,21,.60);font-size:.66rem;font-weight:900;letter-spacing:.08em}

.home-modern .video-big-play{position:absolute;left:50%;top:50%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%);color:#fff;background:transparent;cursor:pointer;transition:opacity .2s ease,transform .2s ease}

.home-modern .video-big-play-icon{width:78px;height:78px;display:grid;place-items:center;padding-left:4px;border:2px solid #fff;border-radius:50%;color:#fff;background:var(--home-red);box-shadow:0 12px 30px rgba(0,0,0,.22);font-size:23px;transition:transform .2s ease}

.home-modern .video-big-play:hover .video-big-play-icon{transform:scale(1.06)}

.home-modern .video-big-play-label{color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.5)}

.home-modern .video-player.is-playing .video-big-play{opacity:0;pointer-events:none}

.home-modern .video-controls{position:absolute;left:14px;right:14px;bottom:13px;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(18,24,19,.78)}

.home-modern .video-control{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:rgba(255,255,255,.10);color:#fff;cursor:pointer}

.home-modern .video-progress-wrap{flex:1;min-width:80px}

.home-modern .video-progress{width:100%;accent-color:var(--home-yellow)}

.home-modern .video-time{white-space:nowrap;color:#fff;font-size:11px;font-weight:800}


/* Documents / projet */

.home-business{padding:70px 0;background:var(--home-bg)}

.business-layout{grid-template-columns:1fr auto;align-items:center;padding:38px;border:1px solid var(--home-border);border-radius:28px;background:#fff;box-shadow:var(--home-shadow)}

.business-layout p{margin:0;color:var(--home-muted);max-width:700px}


/* Contact */

.home-contact{padding:90px 0;background:#fff}

.contact-head{margin-bottom:38px}

.contact-layout{grid-template-columns:.82fr 1.18fr}

.contact-card{border-radius:26px;border:1px solid var(--home-border);box-shadow:var(--home-shadow);overflow:hidden}

.contact-card-dark{padding:34px;background:#2b302c;color:#fff}

.contact-brand{font-size:11px;letter-spacing:.16em;font-weight:900;color:var(--home-yellow)}

.contact-card-dark h3{margin:18px 0 34px;font-size:37px;line-height:1;color:#fff}

.contact-list{display:grid;gap:15px}

.contact-list a,.contact-list span{display:flex;gap:11px;align-items:flex-start;color:#f4f6f3;text-decoration:none}

.contact-list i{width:18px;margin-top:3px;color:var(--home-yellow)}

.contact-motto{margin-top:52px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.13em}

.contact-motto span{color:var(--home-yellow)}

.contact-card-form{padding:31px;background:#fff}

.home-form{display:flex;flex-direction:column;gap:16px}

.home-form label{display:flex;flex-direction:column;gap:8px;color:#343b36;font-size:13px;font-weight:900}

.home-form label span{color:var(--home-red)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.home-form input,.home-form textarea{box-sizing:border-box;width:100%;padding:13px 14px;border-radius:12px;border:1px solid #dcd6cc;background:#fffdf9;color:var(--home-text);font:inherit;outline:none}

.home-form input:focus,.home-form textarea:focus{border-color:var(--home-red);box-shadow:0 0 0 3px rgba(214,40,40,.10)}

.home-form textarea{resize:vertical;min-height:155px}

.home-alert{margin-bottom:16px;padding:13px 15px;border-radius:13px;border:1px solid}

.home-alert strong{display:block;margin-bottom:5px}

.home-alert p{margin:0;color:#5d665f;font-size:13px}

.home-alert-success{border-color:#b9d5af;background:#f1f8ee}

.home-alert-error{border-color:#edb9b9;background:#fff1f1}


/* CTA final */

.home-final{padding:0 0 90px;background:#fff}

.final-layout{grid-template-columns:1fr auto;align-items:center;padding:42px;border-radius:30px;background:#f4eadb;border:1px solid #e3d7c7}

.home-final h2{font-size:clamp(43px,5vw,67px);margin-bottom:10px}

.home-final p{margin:0;color:#697169}


/* Icônes */

.home-modern .index-icon{width:1.35em;height:1.35em;display:inline-block;flex:0 0 auto;object-fit:contain;vertical-align:middle}

.home-modern .hero-actions .index-icon{width:18px;height:18px}

.home-modern .hero-traits .index-icon{width:16px;height:16px}

.home-modern .menu-icon .index-icon{width:54px;height:54px}

.home-modern .menu-arrow .index-icon{width:18px;height:18px}

.home-modern .value-top .index-icon{width:22px;height:22px}

.home-modern .business-actions .index-icon{width:18px;height:18px}


/* Responsive */

@media(max-width:1050px){

    .hero-layout,.split-layout,.values-layout,.media-layout,.contact-layout{grid-template-columns:1fr}

    .hero-content{text-align:center;margin-inline:auto}

    .hero-copy{margin-inline:auto}

    .hero-actions,.hero-traits{justify-content:center}

    .hero-visual{min-height:420px}

    .menu-grid,.stats-row{grid-template-columns:1fr 1fr}

    .business-layout,.final-layout{grid-template-columns:1fr}

    .business-actions{margin-top:4px}

}

@media(max-width:700px){

    .home-modern .container{width:min(100% - 24px,1180px)}

    .home-hero{min-height:auto}

    .hero-layout{padding:58px 0 44px;gap:20px}

    .home-hero h1{font-size:clamp(48px,15vw,72px)}

    .hero-copy{font-size:16px}

    .hero-visual{min-height:auto}

    .home-modern .hero-image{max-width:none;aspect-ratio:4/3;margin:20px auto 0;border-radius:26px}

    .home-section,.home-contact{padding:70px 0}

    .section-head{display:block}

    .section-head>p{margin-top:13px}

    .menu-grid,.stats-row,.values-grid,.form-grid{grid-template-columns:1fr}

    .media-copy{padding:25px}

    .media-copy blockquote{font-size:18px}

    .home-modern .video-player{min-height:260px}

    .home-modern .video-controls{gap:6px;padding:8px}

    .home-modern .video-time{font-size:10px}

    .home-modern .video-control{width:31px;height:31px}

    .business-layout,.final-layout{padding:27px}

    .contact-card-dark,.contact-card-form{padding:25px}

    .home-final{padding-bottom:70px}

}

@media(prefers-reduced-motion:reduce){

    html{scroll-behavior:auto}

    .home-btn,.menu-card,.value-card,.video-big-play,.video-big-play-icon{transition:none}

}

</style>



</head>

<body class="home-modern">


<header class="site-header" id="mainHeader">

    <div class="site-header-inner">

        <a href="/index" class="site-logo" aria-label="Trésors de Snacks">

            <img

                src="/assets/images/logo/logo.png"

                alt="Trésors de Snacks"

                width="92"

                height="92"

                decoding="async"

            >

        </a>


        <nav class="site-nav" id="site-navigation" aria-label="Navigation principale">

            <a href="/index" class="is-active">Accueil</a>

            <a href="/concept">Concept</a>

            <a href="/restaurant">Restaurant</a>

            <a href="/carte">Carte</a>

            <a href="/investisseurs">Investisseurs</a>

            <a href="/contact">Contact</a>

        </nav>


        <a href="/business-plan" class="site-header-cta">

            Business Plan

        </a>


        <button

            type="button"

            class="site-menu-toggle"

            id="siteMenuToggle"

            aria-controls="site-navigation"

            aria-expanded="false"

            aria-label="Ouvrir le menu"

        >

            <span></span><span></span><span></span>

        </button>

    </div>

</header>


<main>

    <section class="home-hero" id="accueil">


        <div class="container hero-layout">

            <div class="hero-content">

                <div class="eyebrow"><span class="eyebrow-dot"></span> TRÉSORS DE SNACKS</div>

                <h1>Des saveurs<br><em>d’ici &amp; d’ailleurs.</em></h1>

                <p class="hero-copy">

                    Le fast-food premium réinventé : généreux, créatif et pensé pour le partage.

                </p>


                <div class="hero-actions">

                    <a href="/concept" class="home-btn home-btn-primary">

                        <img class="index-icon" src="/assets/images/icons/index/burger.svg" alt="" aria-hidden="true" loading="lazy" decoding="async">

                        Découvrir le concept

                    </a>

                    <a href="#menu" class="home-btn home-btn-light">

                        Voir la carte

                        ↓

                    </a>

                </div>


                <div class="hero-traits" aria-label="Promesses">

                    <span><img class="index-icon" src="/assets/images/icons/index/home.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"> Fait maison</span>

                    <span><img class="index-icon" src="/assets/images/icons/index/earth.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"> Inspiré d’ailleurs</span>

                    <span><img class="index-icon" src="/assets/images/icons/index/heart.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"> Pensé pour tous</span>

                </div>

            </div>


            <div class="hero-visual hero-image" aria-label="Univers gourmand de Trésors de Snacks">

                <img

                    src="/assets/images/index/hero.jpg"

                    alt="Trésors de Snacks — univers gourmand"

                    width="900"

                    height="700"

                    fetchpriority="high"

                    decoding="async"

                >

            </div>

        </div>

    </section>


    <div class="home-strip" aria-label="Univers de marque">

        <div class="home-strip-track">

            <span>BURGERS GOURMETS</span><b>✦</b>

            <span>SNACKS ORIGINAUX</span><b>✦</b>

            <span>FAIT MAISON</span><b>✦</b>

            <span>GOOD FOOD</span><b>✦</b>

            <span>BRIGHTER FUTURE</span><b>✦</b>

            <span>LA ROCHE-SUR-YON</span>

        </div>

    </div>


    <section class="home-section home-intro" id="concept">

        <div class="container split-layout">

            <div class="section-copy">

                <div class="section-kicker">01 · À PROPOS</div>

                <h2>Un snack.<br><span>Une vraie expérience.</span></h2>

                <p>

                    Trésors de Snacks est un projet de restaurant premium en développement à La Roche-sur-Yon,

                    avec un univers inspiré des diners américains et une cuisine généreuse.

                </p>

                <a href="/concept" class="text-link">Découvrir notre histoire →</a>

            </div>


            <div class="intro-art">

                <div class="intro-art-grid"></div>

                <div class="intro-art-title">GOOD FOOD<br><small>BRIGHTER FUTURE</small></div>

                <div class="intro-art-shape shape-red"></div>

                <div class="intro-art-shape shape-cyan"></div>

            </div>

        </div>

    </section>


    <section class="home-section home-menu" id="menu">

        <div class="container">

            <div class="section-head">

                <div>

                    <div class="section-kicker">02 · À TABLE</div>

                    <h2>Nos <span>gourmandises</span></h2>

                </div>

                <p>Une carte courte, généreuse et reconnaissable.</p>

            </div>


            <div class="menu-grid">

                <a href="/restaurant" class="menu-card menu-card-red">

                    <span class="menu-no">01</span>

                    <div class="menu-icon"><img class="index-icon" src="/assets/images/icons/index/burger.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Burgers gourmets</h3>

                    <p>Préparés à la commande.</p>

                    <span class="menu-arrow"><img class="index-icon" src="/assets/images/icons/index/arrow-up-right.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></span>

                </a>


                <a href="/restaurant" class="menu-card menu-card-cyan">

                    <span class="menu-no">02</span>

                    <div class="menu-icon"><img class="index-icon" src="/assets/images/icons/index/fries.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Snacks originaux</h3>

                    <p>Des recettes qui sortent du lot.</p>

                    <span class="menu-arrow"><img class="index-icon" src="/assets/images/icons/index/arrow-up-right.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></span>

                </a>


                <a href="/restaurant" class="menu-card menu-card-yellow">

                    <span class="menu-no">03</span>

                    <div class="menu-icon"><img class="index-icon" src="/assets/images/icons/index/shake.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Milkshakes créatifs</h3>

                    <p>Gourmandise en grand format.</p>

                    <span class="menu-arrow"><img class="index-icon" src="/assets/images/icons/index/arrow-up-right.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></span>

                </a>


                <a href="/restaurant" class="menu-card menu-card-green">

                    <span class="menu-no">04</span>

                    <div class="menu-icon"><img class="index-icon" src="/assets/images/icons/index/donut.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Desserts généreux</h3>

                    <p>La dernière bouchée compte.</p>

                    <span class="menu-arrow"><img class="index-icon" src="/assets/images/icons/index/arrow-up-right.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></span>

                </a>

            </div>

        </div>

    </section>


    <section class="home-section home-values" id="valeurs">

        <div class="container values-layout">

            <div class="section-copy">

                <div class="section-kicker">03 · L’ESPRIT</div>

                <h2>Bon pour<br><span>aujourd’hui. Demain aussi.</span></h2>

                <p>Qualité, inclusion, innovation et écologie guident le projet.</p>

            </div>


            <div class="values-grid">

                <article class="value-card">

                    <div class="value-top"><span>01</span><img class="index-icon" src="/assets/images/icons/index/star.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Qualité</h3>

                    <p>Des produits soigneusement sélectionnés.</p>

                </article>

                <article class="value-card">

                    <div class="value-top"><span>02</span><img class="index-icon" src="/assets/images/icons/index/people.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Inclusion</h3>

                    <p>Une démarche ouverte et accessible.</p>

                </article>

                <article class="value-card">

                    <div class="value-top"><span>03</span><img class="index-icon" src="/assets/images/icons/index/lightbulb.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Innovation</h3>

                    <p>Au service du goût et de l’expérience.</p>

                </article>

                <article class="value-card">

                    <div class="value-top"><span>04</span><img class="index-icon" src="/assets/images/icons/index/leaf.svg" alt="" aria-hidden="true" loading="lazy" decoding="async"></div>

                    <h3>Écologie</h3>

                    <p>Un engagement environnemental concret.</p>

                </article>

            </div>

        </div>

    </section>


    <section class="home-stats" id="chiffres">

        <div class="container">

            <div class="section-head section-head-inverse">

                <div>

                    <div class="section-kicker">04 · LE PROJET</div>

                    <h2>Des chiffres qui <span>parlent.</span></h2>

                </div>

                <p>Quelques repères clés.</p>

            </div>


            <div class="stats-row">

                <div class="stat-box"><strong>200</strong><span>k€</span><p>Investissement estimé</p></div>

                <div class="stat-box"><strong>100</strong><span>%</span><p>Préparé à la commande</p></div>

                <div class="stat-box"><strong>1</strong><span>objectif</span><p>Devenir une entreprise adaptée</p></div>

                <div class="stat-box"><strong>1</strong><span>ville</span><p>La Roche-sur-Yon</p></div>

            </div>

        </div>

    </section>


    <section class="home-section home-media" id="video">

        <div class="container media-layout">

            <div class="media-copy">

                <div class="section-kicker">05 · EN IMAGE</div>

                <h2>Entrez dans<br><span>l’univers.</span></h2>

                <blockquote>“Un concept innovant et engagé, exactement ce qui manquait à La Roche-sur-Yon !”</blockquote>

                <small>— Partenaire local</small>

            </div>


            <div class="video-card">

                <span class="video-badge">TRÉSORS DE SNACKS · VIDÉO</span>


                <div class="video-player" data-video-player>

                    <video

                        class="video-self-hosted"

                        data-video

                        playsinline

                        preload="none"

                        aria-label="Vidéo de présentation de Trésors de Snacks"

                    >

                        <source src="/assets/videos/presentation.mp4" type="video/mp4">

                        Votre navigateur ne prend pas en charge la lecture des vidéos HTML5.

                    </video>


                    <div class="video-player-shade" aria-hidden="true"></div>


                    <button

                        type="button"

                        class="video-big-play"

                        data-video-play

                        aria-label="Lire la vidéo"

                    >

                        <span class="video-big-play-icon" aria-hidden="true">▶</span>

                        <span class="video-big-play-label">Regarder la vidéo</span>

                    </button>


                    <div class="video-player-top">

                        <div class="video-player-title">

                            <span class="video-player-dot"></span>

                            <span>PRÉSENTATION</span>

                        </div>

                        <span class="video-player-quality">HD</span>

                    </div>


                    <div class="video-controls">

                        <button type="button" class="video-control video-control-play" data-video-play aria-label="Lire la vidéo">

                            <span aria-hidden="true">▶</span>

                        </button>


                        <div class="video-progress-wrap">

                            <input

                                class="video-progress"

                                data-video-progress

                                type="range"

                                min="0"

                                max="100"

                                value="0"

                                step="0.1"

                                aria-label="Position de la vidéo"

                            >

                        </div>


                        <span class="video-time" data-video-time>00:00 / 00:00</span>


                        <button type="button" class="video-control" data-video-mute aria-label="Activer ou couper le son">

                            <span data-video-volume-icon aria-hidden="true">🔊</span>

                        </button>


                        <button type="button" class="video-control" data-video-fullscreen aria-label="Plein écran">

                            <span aria-hidden="true">⛶</span>

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <section class="home-business" id="projet">

        <div class="container business-layout">

            <div>

                <div class="section-kicker">06 · EN PROFONDEUR</div>

                <h2>Le goût est là.<br><span>Le projet aussi.</span></h2>

                <p>Positionnement, stratégie, modèle économique et développement.</p>

            </div>

            <div class="business-actions">

                <a href="/business-plan" class="home-btn home-btn-primary">

                    <img class="index-icon" src="/assets/images/icons/index/arrow-up-right.svg" alt="" aria-hidden="true" loading="lazy" decoding="async">

                    Business Plan

                </a>

                <a href="/documents/BusinessPlan-FALC.pdf" class="home-btn home-btn-outline" target="_blank" rel="noopener noreferrer">

                    <img class="index-icon" src="/assets/images/icons/index/accessibility.svg" alt="" aria-hidden="true" loading="lazy" decoding="async">

                    Version FALC

                </a>

            </div>

        </div>

    </section>


    <section class="home-final">

        <div class="container final-layout">

            <div>

                <div class="section-kicker">TRÉSORS DE SNACKS</div>

                <h2>Des saveurs d’ici<br><span>&amp; d’ailleurs.</span></h2>

                <p>Good Food. Brighter Future.</p>

            </div>

            <a href="/contact" class="home-btn home-btn-yellow">

                Nous contacter

                →

            </a>

        </div>

    </section>

</main>



<style>

/* ==========================================================

   FOOTER — OPTION 3 / CLAIR / ÉCO-CONÇU

   ========================================================== */

.site-footer{

    margin-top:0;

    color:#4f5852;

    background:#f4eadb;

    border-top:1px solid #e2d7c7;

}

.site-footer-top{

    padding:68px 0 46px;

}

.site-footer-grid{

    display:grid;

    grid-template-columns:1.35fr .8fr .9fr 1fr;

    gap:42px;

}

.site-footer-brand{

    max-width:360px;

}

.site-footer-logo{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:20px;

    background:#fff;

    border:1px solid #e4d9ca;

    box-shadow:0 8px 22px rgba(55,40,22,.07);

}

.site-footer-logo img{

    width:62px;

    height:62px;

    object-fit:contain;

}

.site-footer-brand p{

    margin:0 0 17px;

    color:#68716b;

    line-height:1.7;

    font-size:14px;

}

.site-footer-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 11px;

    border:1px solid rgba(104,163,87,.30);

    border-radius:999px;

    background:#eef7eb;

    color:#4e7545;

    font-size:11px;

    font-weight:900;

}

.site-footer-badge span{

    display:grid;

    place-items:center;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#68a357;

    color:#fff;

}

.site-footer-col h2{

    margin:0 0 17px;

    color:#252b27;

    font-size:17px;

    font-weight:900;

}

.site-footer-col h2:after{

    content:"";

    display:block;

    width:30px;

    height:3px;

    margin-top:9px;

    border-radius:999px;

    background:#d62828;

}

.site-footer-col ul{

    margin:0;

    padding:0;

    list-style:none;

}

.site-footer-col li{

    margin:0 0 9px;

}

.site-footer-col a{

    color:#68716b;

    text-decoration:none;

    font-size:14px;

    transition:color .2s ease;

}

.site-footer-col a:hover{

    color:#d62828;

}

.site-footer-contact p{

    margin:0 0 14px;

    color:#68716b;

    font-size:14px;

    line-height:1.7;

}

.site-footer-contact p strong{

    color:#252b27;

}

.site-footer-mail{

    display:inline-block;

    margin-bottom:18px;

    color:#d62828!important;

    font-weight:800;

}

.site-footer-contact-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 15px;

    border-radius:12px;

    background:#d62828;

    color:#fff!important;

    font-size:12px!important;

    font-weight:900;

}

.site-footer-contact-button:hover{

    color:#fff!important;

    background:#a71f1f;

}

.site-footer-bottom{

    border-top:1px solid #e1d6c6;

    background:#efe4d4;

}

.site-footer-bottom-inner{

    min-height:68px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.site-footer-bottom p{

    margin:0;

    color:#7a817c;

    font-size:12px;

}

.site-footer-legal{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:8px;

}

.site-footer-legal a{

    color:#7a817c;

    font-size:12px;

    text-decoration:none;

}

.site-footer-legal a:hover{

    color:#d62828;

}

.site-footer-legal span{

    color:#b0a798;

}

@media(max-width:900px){

    .site-footer-grid{

        grid-template-columns:1fr 1fr;

        gap:34px 28px;

    }

    .site-footer-brand{

        max-width:none;

    }

}

@media(max-width:600px){

    .site-footer-top{

        padding:52px 0 34px;

    }

    .site-footer-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .site-footer-bottom-inner{

        min-height:0;

        padding:18px 0;

        flex-direction:column;

        align-items:flex-start;

    }

    .site-footer-legal{

        justify-content:flex-start;

    }

}

</style>



<!-- ==========================================================

     FOOTER — INTÉGRÉ DIRECTEMENT DANS LA PAGE

     ========================================================== -->

<footer class="site-footer">

    <div class="site-footer-top">

        <div class="container site-footer-grid">


            <div class="site-footer-brand">

                <a href="/index" class="site-footer-logo" aria-label="Retour à l'accueil">

                    <img

                        src="/assets/images/logo/logo.png"

                        alt="Trésors de Snacks"

                        width="92"

                        height="92"

                        loading="lazy"

                        decoding="async"

                    >

                </a>


                <p>

                    Trésors de Snacks, une nouvelle vision du snack :

                    généreuse, créative et pensée pour l’avenir.

                </p>


                <span class="site-footer-badge">

                    <span aria-hidden="true">✓</span>

                    Une démarche plus responsable

                </span>

            </div>


            <div class="site-footer-col">

                <h2>Navigation</h2>

                <ul>

                    <li><a href="/index">Accueil</a></li>

                    <li><a href="/concept">Concept</a></li>

                    <li><a href="/restaurant">Restaurant</a></li>

                    <li><a href="/carte">Carte</a></li>

                    <li><a href="/investisseurs">Investisseurs</a></li>

                    <li><a href="/contact">Contact</a></li>

                </ul>

            </div>


            <div class="site-footer-col">

                <h2>Le projet</h2>

                <ul>

                    <li><a href="/business-plan">Business Plan</a></li>

                    <li><a href="/documents/BusinessPlan-FALC.pdf" target="_blank" rel="noopener noreferrer">Version FALC</a></li>

                    <li><a href="#valeurs">Nos valeurs</a></li>

                    <li><a href="#chiffres">Quelques chiffres</a></li>

                    <li><a href="#video">Présentation vidéo</a></li>

                </ul>

            </div>


            <div class="site-footer-col site-footer-contact">

                <h2>Nous trouver</h2>

                <p>

                    <strong>Trésors de Snacks</strong><br>

                    La Roche-sur-Yon<br>

                    Vendée, France

                </p>


                <a href="mailto:hello@tresors-snacks.fr" class="site-footer-mail">

                    hello@tresors-snacks.fr

                </a>


                <a href="/contact" class="site-footer-contact-button">

                    Nous contacter →

                </a>

            </div>


        </div>

    </div>


    <div class="site-footer-bottom">

        <div class="container site-footer-bottom-inner">

            <p>

                © 2026 Trésors de Snacks. Tous droits réservés.

            </p>


            <nav class="site-footer-legal" aria-label="Informations légales">

                <a href="/mentions-legales">Mentions légales</a>

                <span aria-hidden="true">•</span>

                <a href="/politique-confidentialite">Confidentialité</a>

                <span aria-hidden="true">•</span>

                <a href="/cookies">Cookies</a>

            </nav>

        </div>

    </div>

</footer>




<script>

document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('[data-video-player]').forEach(player => {

        const video = player.querySelector('[data-video]');

        const playButtons = player.querySelectorAll('[data-video-play]');

        const progress = player.querySelector('[data-video-progress]');

        const timeDisplay = player.querySelector('[data-video-time]');

        const muteButton = player.querySelector('[data-video-mute]');

        const volumeIcon = player.querySelector('[data-video-volume-icon]');

        const fullscreenButton = player.querySelector('[data-video-fullscreen]');


        if (!video) return;


        const formatTime = seconds => {

            if (!Number.isFinite(seconds)) return '00:00';

            const minutes = Math.floor(seconds / 60);

            const secs = Math.floor(seconds % 60);

            return String(minutes).padStart(2, '0') + ':' + String(secs).padStart(2, '0');

        };


        const updatePlayState = () => {

            const playing = !video.paused && !video.ended;

            player.classList.toggle('is-playing', playing);

            playButtons.forEach(button => {

                const icon = button.querySelector('[aria-hidden="true"]');

                if (icon) icon.textContent = playing ? '❚❚' : '▶';

                button.setAttribute('aria-label', playing ? 'Mettre la vidéo en pause' : 'Lire la vidéo');

            });

        };


        const togglePlay = () => {

            if (video.paused || video.ended) {

                video.play().catch(() => {});

            } else {

                video.pause();

            }

        };


        playButtons.forEach(button => {

            button.addEventListener('click', togglePlay);

        });


        video.addEventListener('play', updatePlayState);

        video.addEventListener('pause', updatePlayState);

        video.addEventListener('ended', updatePlayState);


        video.addEventListener('loadedmetadata', () => {

            timeDisplay.textContent = '00:00 / ' + formatTime(video.duration);

        });


        video.addEventListener('timeupdate', () => {

            const percent = video.duration ? (video.currentTime / video.duration) * 100 : 0;

            progress.value = percent;

            timeDisplay.textContent = formatTime(video.currentTime) + ' / ' + formatTime(video.duration);

        });


        progress.addEventListener('input', () => {

            if (!video.duration) return;

            video.currentTime = (Number(progress.value) / 100) * video.duration;

        });


        muteButton.addEventListener('click', () => {

            video.muted = !video.muted;

            volumeIcon.textContent = video.muted || video.volume === 0 ? '🔇' : '🔊';

            muteButton.setAttribute('aria-label', video.muted ? 'Activer le son' : 'Couper le son');

        });


        fullscreenButton.addEventListener('click', async () => {

            try {

                if (document.fullscreenElement) {

                    await document.exitFullscreen();

                } else if (player.requestFullscreen) {

                    await player.requestFullscreen();

                } else if (video.webkitEnterFullscreen) {

                    video.webkitEnterFullscreen();

                }

            } catch (error) {

                // Le plein écran peut être refusé par le navigateur : aucun traitement supplémentaire nécessaire.

            }

        });


        player.addEventListener('dblclick', togglePlay);


        updatePlayState();

    });

});

</script>


</body>

</html>


<script>

document.addEventListener('DOMContentLoaded', function () {

    const toggle = document.getElementById('siteMenuToggle');

    const nav = document.querySelector('.site-nav');


    if (toggle && nav) {

        toggle.addEventListener('click', function () {

            const open = nav.classList.toggle('is-open');

            toggle.setAttribute('aria-expanded', open ? 'true' : 'false');

        });


        nav.querySelectorAll('a').forEach(function (link) {

            link.addEventListener('click', function () {

                nav.classList.remove('is-open');

                toggle.setAttribute('aria-expanded', 'false');

            });

        });

    }

});

</script>

</body>

</html>