1503 lines
67 KiB
HTML
1503 lines
67 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Colibri — Bon pour vrai, prêt quand vous l'êtes.</title>
|
|
<meta name="description" content="Restaurant Colibri — Bon pour vrai, prêt quand vous l'êtes. Cuisine fraîche et locale à Québec. Traiteur et commande en ligne.">
|
|
|
|
<!-- Open Graph / Social -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://restaurantcolibri.ca">
|
|
<meta property="og:title" content="Colibri — Bon pour vrai, prêt quand vous l'êtes.">
|
|
<meta property="og:description" content="Bon pour vrai, prêt quand vous l'êtes. Cuisine fraîche, locale et de saison à Québec. Traiteur et commande en ligne.">
|
|
<meta property="og:image" content="https://restaurantcolibri.ca/images/hero-piquenique.jpg">
|
|
<meta property="og:locale" content="fr_CA">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Colibri — Bon pour vrai, prêt quand vous l'êtes.">
|
|
<meta name="twitter:description" content="Bon pour vrai, prêt quand vous l'êtes. Cuisine fraîche, locale et de saison à Québec.">
|
|
<meta name="twitter:image" content="https://restaurantcolibri.ca/images/hero-piquenique.jpg">
|
|
|
|
<!-- Fonts preload -->
|
|
<link rel="preload" href="fonts/TTNorms-Bold.woff2.woff2" as="font" type="font/woff2">
|
|
<link rel="preload" href="fonts/TTNorms-Regular.woff2.woff2" as="font" type="font/woff2">
|
|
<link rel="preload" href="fonts/CenturyOldStyleStd-Bold.woff2.woff2" as="font" type="font/woff2">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" href="favicon.ico" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="images/favicon-192.png" sizes="192x192">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
|
|
<!-- Hero images preload -->
|
|
<link rel="preload" as="image" href="images/hero-pancakes.jpg">
|
|
<link rel="preload" as="image" href="images/hero-salle-pro.png">
|
|
<link rel="preload" as="image" href="images/hero-chocolat.jpg">
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ========== NAVIGATION ========== -->
|
|
<header class="nav" id="nav">
|
|
<div class="nav__container container">
|
|
<div class="nav__left">
|
|
<a href="#menu" class="nav__link">Menu</a>
|
|
<a href="#traiteur" class="nav__link">Traiteur</a>
|
|
<a href="#contact" class="nav__link">Contact</a>
|
|
</div>
|
|
|
|
<a href="#hero" class="nav__logo">
|
|
<img src="images/colibri_logo.png" alt="Colibri" class="nav__logo-img">
|
|
</a>
|
|
|
|
<div class="nav__right">
|
|
<a href="#mission" class="nav__link">Mission</a>
|
|
<a href="fr/commande-en-ligne/commande-en-ligne.html" target="_blank" rel="noopener" class="btn btn--primary nav__cta">Commander</a>
|
|
</div>
|
|
|
|
<button class="nav__burger" id="navBurger" aria-label="Ouvrir le menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== MOBILE MENU OVERLAY ========== -->
|
|
<div class="mobile-menu" id="mobileMenu">
|
|
<nav class="mobile-menu__nav">
|
|
<img src="images/colibri_logo.png" alt="Colibri" class="mobile-menu__logo">
|
|
<a href="#menu" class="mobile-menu__link">Menu</a>
|
|
<a href="#traiteur" class="mobile-menu__link">Traiteur</a>
|
|
<a href="#contact" class="mobile-menu__link">Contact</a>
|
|
<a href="#mission" class="mobile-menu__link">Mission</a>
|
|
<a href="fr/commande-en-ligne/commande-en-ligne.html" target="_blank" rel="noopener" class="btn btn--primary mobile-menu__cta">Commander</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- ========== HERO CAROUSEL ========== -->
|
|
<section class="hero" id="hero">
|
|
<!-- Slides -->
|
|
<div class="hero__slides">
|
|
<div class="hero__slide active">
|
|
<img src="images/hero-pancakes.jpg" alt="Pancakes aux fruits frais du Restaurant Colibri" class="hero__bg-img">
|
|
</div>
|
|
<div class="hero__slide">
|
|
<img src="images/hero-salle-pro.png" alt="Salle à manger chaleureuse du Restaurant Colibri" class="hero__bg-img">
|
|
</div>
|
|
<div class="hero__slide">
|
|
<img src="images/hero-chocolat.jpg" alt="Chocolat chaud maison du Restaurant Colibri" class="hero__bg-img">
|
|
</div>
|
|
</div>
|
|
<div class="hero__overlay"></div>
|
|
|
|
<!-- Arrows -->
|
|
<button class="hero__arrow hero__arrow--prev" id="heroPrev" aria-label="Image précédente">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg>
|
|
</button>
|
|
<button class="hero__arrow hero__arrow--next" id="heroNext" aria-label="Image suivante">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<!-- Dots -->
|
|
<div class="hero__dots">
|
|
<button class="hero__dot active" data-slide="0" aria-label="Slide 1"></button>
|
|
<button class="hero__dot" data-slide="1" aria-label="Slide 2"></button>
|
|
<button class="hero__dot" data-slide="2" aria-label="Slide 3"></button>
|
|
</div>
|
|
|
|
<div class="hero__content container">
|
|
<h1 class="hero__title animate-fade-up">
|
|
Bon pour vrai,<br>
|
|
prêt quand vous l'êtes.
|
|
</h1>
|
|
<div class="hero__actions animate-fade-up" style="--delay: 0.15s">
|
|
<a href="fr/commande-en-ligne/commande-en-ligne.html" target="_blank" rel="noopener" class="btn btn--primary btn--lg">Commander</a>
|
|
<a href="#menu" class="btn btn--outline-light btn--lg">Voir le menu</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== MENU ========== -->
|
|
<section class="menu section" id="menu">
|
|
<div class="container">
|
|
<!-- Filtres diététiques — multi-select chips -->
|
|
<div class="menu__filters" id="menuFilters">
|
|
<button class="menu__filter" data-filter="sg">Sans gluten</button>
|
|
<button class="menu__filter" data-filter="v">Végétarien</button>
|
|
<button class="menu__filter" data-filter="vg">Végétalien</button>
|
|
<button class="menu__filter" data-filter="noix">Sans noix</button>
|
|
<button class="menu__filter-reset" id="filterReset">Réinitialiser</button>
|
|
</div>
|
|
|
|
<div class="menu__tabs" role="tablist">
|
|
<button class="menu__tab active" data-tab="salades" role="tab" aria-selected="true" aria-controls="tab-salades">Salades</button>
|
|
<button class="menu__tab" data-tab="wraps" role="tab" aria-selected="false" aria-controls="tab-wraps">Wraps</button>
|
|
<button class="menu__tab" data-tab="assiettes" role="tab" aria-selected="false" aria-controls="tab-assiettes">Assiettes chaudes</button>
|
|
<button class="menu__tab" data-tab="dejeuners" role="tab" aria-selected="false" aria-controls="tab-dejeuners">Déjeuners</button>
|
|
<button class="menu__tab" data-tab="acotes" role="tab" aria-selected="false" aria-controls="tab-acotes">Soupes & à-côtés</button>
|
|
<button class="menu__tab" data-tab="boissons" role="tab" aria-selected="false" aria-controls="tab-boissons">Boissons</button>
|
|
<button class="menu__tab" data-tab="boites" role="tab" aria-selected="false" aria-controls="tab-boites">Boîtes à lunch</button>
|
|
</div>
|
|
|
|
<!-- ===== SALADES ===== -->
|
|
<div class="menu__content active" id="tab-salades" role="tabpanel" aria-labelledby="tab-salades">
|
|
<div class="menu__grid">
|
|
<div class="menu-card menu-card--bowl" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-teriyaki.png" alt="Salade Teriyaki" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Salade Teriyaki</h3>
|
|
<span class="menu-card__price">17,50$</span>
|
|
</div>
|
|
<p>Épinard, tofu, champignon, patate douce, radis, avocat, edamame, oignon vert, vinaigrette teriyaki.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Recette améliorée!</span>
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-falafel-chevre.png" alt="Falafel et chèvre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Falafel et chèvre</h3>
|
|
<span class="menu-card__price">18,50$</span>
|
|
</div>
|
|
<p>Quinoa, kale, falafel, patate douce, tomate, navet et betterave marinée, fromage de chèvre, houmous, ciboulette, vinaigrette jalapeño-lime.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-kale-cesar.png" alt="Kale César" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Kale César</h3>
|
|
<span class="menu-card__price">19,50$</span>
|
|
</div>
|
|
<p>Kale, laitue, poulet, patate douce, tomate, concombre, bacon, croûton sans gluten, parmesan, vinaigrette césar.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-tex-mex.png" alt="Salade Tex-mex" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Salade tex-mex</h3>
|
|
<span class="menu-card__price">18,50$</span>
|
|
</div>
|
|
<p>Quinoa, kale, effiloché de tofu BBQ, avocat, salsa fraîche, houmous, chip de tortilla émiettée, cheddar, lime, vinaigrette jalapeño-lime.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Recette améliorée!</span>
|
|
<span class="tag tag--green">Végé</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-pomme-ranch.png" alt="Pomme, poulet et ranch" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Pomme, poulet et ranch</h3>
|
|
<span class="menu-card__price">19,50$</span>
|
|
</div>
|
|
<p>Laitue, épinard, poulet, pomme, concombre, feta, poivron, oignon rouge, avocat, sauce ranch.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-buffalo-bleu.png" alt="Poulet, Buffalo et bleu" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Poulet, Buffalo et bleu</h3>
|
|
<span class="menu-card__price">19,50$</span>
|
|
</div>
|
|
<p>Quinoa, épinard, poulet, céleri, brocoli épicé, patate douce, fromage bleu fumé, sauce Buffalo, sauce jardinière.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Recette améliorée!</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-cobb.png" alt="Salade Cobb" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Cobb</h3>
|
|
<span class="menu-card__price">20,50$</span>
|
|
</div>
|
|
<p>Laitue, épinard, poulet, oeuf, bacon, avocat, maïs, tomate, oignon rouge, fromage bleu, vinaigrette balsamique.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Nouveau</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-nicoise.png" alt="Salade Niçoise" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Niçoise</h3>
|
|
<span class="menu-card__price">19,50$</span>
|
|
</div>
|
|
<p>Laitue, épinard, salade de thon, oeuf, patate douce, poivron, olive, fromage de chèvre, ciboulette, vinaigrette balsamique.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Crée ta salade</h3>
|
|
<span class="menu-card__price">8,00$</span>
|
|
</div>
|
|
<p>Choisis tes ingrédients et crée ta salade sur mesure!</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">En ligne seulement!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== WRAPS ===== -->
|
|
<div class="menu__content" id="tab-wraps" role="tabpanel" aria-labelledby="tab-wraps">
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-club.png" alt="Wrap Club" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap Club</h3>
|
|
<span class="menu-card__price">13,00$</span>
|
|
</div>
|
|
<p>Laitue, poulet, poivron, tomate, bacon, cheddar, sauce à l'ail.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-cesar.png" alt="Wrap césar" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap césar</h3>
|
|
<span class="menu-card__price">13,50$</span>
|
|
</div>
|
|
<p>Kale, poulet, bacon, parmesan, tomate, concombre, vinaigrette césar.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-tex-mex.png" alt="Wrap Tex-mex" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap Tex-mex</h3>
|
|
<span class="menu-card__price">12,00$</span>
|
|
</div>
|
|
<p>Mélange de riz, laitue, tofu BBQ effiloché, avocat, salsa fraîche, cheddar, sauce sud-ouest.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Recette améliorée!</span>
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="vg" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-falafel.png" alt="Wrap Falafel" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap Falafel</h3>
|
|
<span class="menu-card__price">12,00$</span>
|
|
</div>
|
|
<p>Kale, falafel, poivron, tomate, navet mariné, houmous, fromage végétal, sauce à l'ail.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-thon.png" alt="Wrap au thon" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap au thon</h3>
|
|
<span class="menu-card__price">13,00$</span>
|
|
</div>
|
|
<p>Épinard, salade de thon, concombre, poivron, tomate, olive, fromage de chèvre, sauce à l'ail.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/wrap-oeufs.png" alt="Wrap aux œufs" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap aux œufs</h3>
|
|
<span class="menu-card__price">11,50$</span>
|
|
</div>
|
|
<p>Laitue, oeuf, poivron, tomate, oignon vert, bacon, cheddar, mayo pesto.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Crée ton wrap</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<p>Choisis tes ingrédients et crée ton wrap sur mesure!</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">En ligne seulement!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== SANDWICHS ===== -->
|
|
<!-- ===== ASSIETTES CHAUDES ===== -->
|
|
<div class="menu__content" id="tab-assiettes" role="tabpanel" aria-labelledby="tab-assiettes">
|
|
<div class="menu__grid">
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-quinoa-falafel.png" alt="Assiette Quinoa & falafels" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Quinoa & falafels</h3>
|
|
<span class="menu-card__price">17,00$</span>
|
|
</div>
|
|
<p>Quinoa, falafel (4), poivron, tomate, navet mariné, fromage de chèvre, houmous, ciboulette, sauce à l'ail.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-poulet-cari.png" alt="Assiette Poulet au cari" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Poulet au cari</h3>
|
|
<span class="menu-card__price">17,00$</span>
|
|
</div>
|
|
<p>Riz, poulet au cari, garniture fraîche.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Nouveau</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-poulet-beurre.png" alt="Assiette Poulet au beurre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Poulet au beurre</h3>
|
|
<span class="menu-card__price">18,00$</span>
|
|
</div>
|
|
<p>Riz, poulet au beurre, labneh, concombre, oignon rouge, pita.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-poulet-zaatar.png" alt="Assiette Poulet citron et zaatar" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Poulet citron et zaatar</h3>
|
|
<span class="menu-card__price">17,50$</span>
|
|
</div>
|
|
<p>Riz, poulet dans une sauce au citron et zaatar, brocoli, maïs, poivron, parmesan, ciboulette.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card menu-card--bowl" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-poulet-pesto.png" alt="Assiette Poulet pesto" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Poulet pesto</h3>
|
|
<span class="menu-card__price">18,00$</span>
|
|
</div>
|
|
<p>Mélange de riz, poulet pesto, canneberge, tomate, poivron, olive, feta, graine de tournesol, vinaigrette grecque.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Crée ton assiette chaude</h3>
|
|
<span class="menu-card__price">9,00$</span>
|
|
</div>
|
|
<p>Choisis tes ingrédients et crée ton assiette sur mesure!</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">En ligne seulement!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="menu__subtitle">Assiettes enfant</h3>
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Falafel</h3>
|
|
<span class="menu-card__price">8$</span>
|
|
</div>
|
|
<p>Houmous, falafel, concombre, demi pita, mayo pesto.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Pomme & poulet</h3>
|
|
<span class="menu-card__price">10$</span>
|
|
</div>
|
|
<p>Poulet, pomme, patate douce, vinaigrette balsamique.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Wrap au poulet</h3>
|
|
<span class="menu-card__price">10$</span>
|
|
</div>
|
|
<p>Tortilla de blé, poulet, cheddar, tomate, sauce ranch.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== DÉJEUNERS ===== -->
|
|
<div class="menu__content" id="tab-dejeuners" role="tabpanel" aria-labelledby="tab-dejeuners">
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/assiette-pancakes.png" alt="Assiette pancakes" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Assiette pancakes</h3>
|
|
<span class="menu-card__price">14,50$</span>
|
|
</div>
|
|
<p>Mini-pancakes, fruits, sirop d'érable.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sandwich-bacon.png" alt="Sandwich bacon et oeuf" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Sandwich bacon et oeuf</h3>
|
|
<span class="menu-card__price">12,00$</span>
|
|
</div>
|
|
<p>Oeuf style omelette, bacon, mozzarella, mayonnaise.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sandwich-blt.png" alt="Sandwich BLT" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Sandwich BLT</h3>
|
|
<span class="menu-card__price">12,00$</span>
|
|
</div>
|
|
<p>Bacon, laitue, tomate, mozzarella, mayonnaise.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sandwich-ranch.png" alt="Sandwich ranch" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Sandwich ranch</h3>
|
|
<span class="menu-card__price">12,00$</span>
|
|
</div>
|
|
<p>Oeuf style omelette, avocat, tomate, épinard, sauce ranch.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sandwich-tofu.png" alt="Sandwich tofu" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Sandwich tofu</h3>
|
|
<span class="menu-card__price">13,00$</span>
|
|
</div>
|
|
<p>Lanière de tofu curcuma, avocat, tomate, mozzarella, épinard, sauce sud-ouest.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/shakshuka.png" alt="Shakshuka" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Shakshuka</h3>
|
|
<span class="menu-card__price">19,00$</span>
|
|
</div>
|
|
<p>Oeuf poché (2), labneh, fromage de chèvre, sauce tomate aromatisée (sofrito), épice zaatar, ciboulette. Servi avec patate déjeuner et pain au choix.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/changua.png" alt="Changua" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Changua</h3>
|
|
<span class="menu-card__price">16,00$</span>
|
|
</div>
|
|
<p>Oeuf poché (2), fromage de chèvre, sauce blanche, soupçon de vinaigrette jalapeños-lime, oignon vert, persil. Servi avec patate déjeuner et pain au choix.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/hollandaise.png" alt="À la sauce hollandaise" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>À la sauce hollandaise</h3>
|
|
<span class="menu-card__price">15,00$</span>
|
|
</div>
|
|
<p>Oeuf poché (2), bacon, cheddar, mozzarella, patate déjeuner, poivron, oignon rouge, sauce hollandaise. Servi avec pain au choix.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/dejeuner-classique-1.png" alt="Déjeuner classique 1 oeuf" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Déjeuner classique 1 oeuf</h3>
|
|
<span class="menu-card__price">15,00$</span>
|
|
</div>
|
|
<p>Oeuf, bacon, fève au sirop d'érable, patate déjeuner, tartinade du moment, fruit, pain au choix.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/dejeuner-classique-2.png" alt="Déjeuner classique 2 oeufs" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Déjeuner classique 2 oeufs</h3>
|
|
<span class="menu-card__price">16,00$</span>
|
|
</div>
|
|
<p>Oeuf, bacon, fève au sirop d'érable, patate déjeuner, tartinade du moment, fruit, pain au choix.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/toast-avocat-oeuf.png" alt="Toast avocat et oeuf" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Toast avocat et oeuf</h3>
|
|
<span class="menu-card__price">16,50$</span>
|
|
</div>
|
|
<p>Toast (2), avocat, œuf, curcuma, labneh, sirop d'érable, épice zaatar.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/toast-avocat-tofu.png" alt="Toast avocat et tofu" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Toast avocat et tofu</h3>
|
|
<span class="menu-card__price">16,50$</span>
|
|
</div>
|
|
<p>Toast (2), avocat, lanière de tofu curcuma, labneh, sirop d'érable, épice zaatar.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végé</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/patate-dejeuner.png" alt="Patate déjeuner" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Patate déjeuner</h3>
|
|
<span class="menu-card__price">3,00$</span>
|
|
</div>
|
|
<p>Avec épice zaatar.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== SOUPES, À-CÔTÉS & COLLATIONS ===== -->
|
|
<div class="menu__content" id="tab-acotes" role="tabpanel" aria-labelledby="tab-acotes">
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="v" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/quiche.png" alt="Quiche" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Quiche</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Nouveau</span>
|
|
<span class="tag tag--green">Végé</span>
|
|
<span class="tag tag--yellow">Contient du gluten</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/potage-courge.png" alt="Potage à la courge" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Potage à la courge</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/creme-tomate-poivron.png" alt="Crème de tomate et poivron" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Crème de tomate et poivron</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/patate-douce-rotie.png" alt="Patate douce rôtie" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Patate douce rôtie</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<p>Servi avec mayo au pesto de roquette.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/falafel-4.png" alt="Falafel (4)" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Falafel (4)</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
<p>Servi avec sauce à l'ail.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/salade-de-chou.png" alt="Salade de chou" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Salade de chou</h3>
|
|
<span class="menu-card__price">4,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/brownie.png" alt="Brownie" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Brownie</h3>
|
|
<span class="menu-card__price">6,50$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="v" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/boule-energie-matcha.png" alt="Boule d'énergie matcha" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Boule d'énergie matcha</h3>
|
|
<span class="menu-card__price">1,50$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Nouveau</span>
|
|
<span class="tag tag--green">Végé</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="vg" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/boule-energie.png" alt="Boule d'énergie" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Boule d'énergie</h3>
|
|
<span class="menu-card__price">1,50$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/parfait-au-yogourt-format-collation.png" alt="Parfait au yogourt" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Parfait au yogourt</h3>
|
|
<span class="menu-card__price">7,50$</span>
|
|
</div>
|
|
<p>Format collation.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="true">
|
|
<div class="menu-card__img">
|
|
<img src="images/pouding-de-chia-format-collation.png" alt="Pouding de chia" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Pouding de chia</h3>
|
|
<span class="menu-card__price">7,50$</span>
|
|
</div>
|
|
<p>Format collation.</p>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/muffin-aux-bleuets.png" alt="Muffin aux bleuets" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Muffin aux bleuets</h3>
|
|
<span class="menu-card__price">3,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--orange">Nouveau</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== BOISSONS & À PARTAGER ===== -->
|
|
<div class="menu__content" id="tab-boissons" role="tabpanel" aria-labelledby="tab-boissons">
|
|
<h3 class="menu__subtitle">Smoothies & Jus</h3>
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/smoothie-fraise-banane.png" alt="Smoothie fraise banane avocat" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Smoothie fraise banane avocat</h3>
|
|
<span class="menu-card__price">7,50$</span>
|
|
</div>
|
|
<p>Protéine +1,50$</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/smoothie-mangue-passion.png" alt="Smoothie mangue et fruit de la passion" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Smoothie mangue et fruit de la passion</h3>
|
|
<span class="menu-card__price">7,50$</span>
|
|
</div>
|
|
<p>Protéine +1,50$</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/smoothie-framboise-bleuet.png" alt="Smoothie framboise et bleuet" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Smoothie framboise et bleuet</h3>
|
|
<span class="menu-card__price">7,50$</span>
|
|
</div>
|
|
<p>Protéine +1,50$</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/jus-de-pomme.png" alt="Jus de pomme" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Jus de pomme</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/limonade.png" alt="Montellier Lime" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Montellier Lime</h3>
|
|
<span class="menu-card__price">4$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/montellier.png" alt="Montellier" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Montellier</h3>
|
|
<span class="menu-card__price">4$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/loop-morning-glory.png" alt="Loop Morning glory" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Loop Morning glory</h3>
|
|
<span class="menu-card__price">6$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="menu__subtitle">Café & Thé</h3>
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/cafe-filtre.png" alt="Americano" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Americano</h3>
|
|
<span class="menu-card__price">4,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/double-espresso.png" alt="Double espresso" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Double espresso</h3>
|
|
<span class="menu-card__price">4,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/latte.png" alt="Latté" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Latté</h3>
|
|
<span class="menu-card__price">5,50$</span>
|
|
</div>
|
|
<p>Sirops: érable, caramel, vanille, Coureur des bois.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/chocolat-chaud.png" alt="Chocolat chaud" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Chocolat chaud</h3>
|
|
<span class="menu-card__price">5,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/the-earl-grey.png" alt="Thé noir - Earl grey" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Thé noir - Earl grey</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/the-chai.png" alt="Thé noir - chai" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Thé noir - chai</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sencha.png" alt="Thé vert - Sencha Nagashima" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Thé vert - Sencha Nagashima</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/tisane-menthe.png" alt="Tisane - menthe" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Tisane - menthe</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/rooibos.png" alt="Rooibos" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Rooibos</h3>
|
|
<span class="menu-card__price">3,50$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="menu__subtitle">Pétillant & Alcool</h3>
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/gldn-pamplemousse.png" alt="Gldn hour pamplemousse et concombre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Gldn hour pamplemousse et concombre</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/gldn-melon.png" alt="Gldn hour melon lime" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Gldn hour melon lime</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/cafelimo.png" alt="Cafélimo" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Cafélimo</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/cafelimo-orange.png" alt="Cafélimo orange sanguine" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Cafélimo orange sanguine</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/mate-libre-original.png" alt="Mate Libre Original" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Mate Libre Original</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/mate-libre-gingembre.png" alt="Mate Libre Gingembre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Mate Libre Gingembre</h3>
|
|
<span class="menu-card__price">6,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/sleeman.png" alt="Sleeman originale" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Sleeman originale 473ml</h3>
|
|
<span class="menu-card__price">6,25$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/kronenbourg.png" alt="Kronenbourg 1664 blanche" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Kronenbourg 1664 blanche 473ml</h3>
|
|
<span class="menu-card__price">7,75$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/saison-libre.png" alt="Unibroue Saison libre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Unibroue Saison libre 473ml</h3>
|
|
<span class="menu-card__price">6,75$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/rabaska-cidre.png" alt="Rabaska cidre" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Rabaska cidre 355ml</h3>
|
|
<span class="menu-card__price">6,75$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/carlsberg.png" alt="Carlsberg sans alcool" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Carlsberg sans alcool 330ml</h3>
|
|
<span class="menu-card__price">6,25$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="menu__subtitle">À partager (grand format)</h3>
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Plateau de wraps</h3>
|
|
<span class="menu-card__price">35,00$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Salade césar grand format</h3>
|
|
<span class="menu-card__price">40,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="true">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Quinoa et falafels grand format</h3>
|
|
<span class="menu-card__price">40,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="true">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Plateau de boules</h3>
|
|
<span class="menu-card__price">30,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
<span class="tag tag--yellow">Contient des noix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-card" data-diet="sg vg" data-noix="false">
|
|
<div class="menu-card__img menu-card__img--empty"></div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Falafels à cuire (10)</h3>
|
|
<span class="menu-card__price">11,00$</span>
|
|
</div>
|
|
<div class="menu-card__tags">
|
|
<span class="tag tag--green">Végan</span>
|
|
<span class="tag tag--blue">SG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== BOÎTES À LUNCH ===== -->
|
|
<div class="menu__content" id="tab-boites" role="tabpanel" aria-labelledby="tab-boites">
|
|
<div class="menu__grid">
|
|
<div class="menu-card" data-diet="" data-noix="false">
|
|
<div class="menu-card__img">
|
|
<img src="images/boite-a-lunch.png" alt="Boîte à lunch — choix variés" loading="lazy">
|
|
</div>
|
|
<div class="menu-card__body">
|
|
<div class="menu-card__top">
|
|
<h3>Boîte à lunch — choix variés</h3>
|
|
<span class="menu-card__price">À confirmer</span>
|
|
</div>
|
|
<p>Minimum de commande de 5 boîtes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu__footer">
|
|
<a href="fr/commande-en-ligne/commande-en-ligne.html" target="_blank" rel="noopener" class="btn btn--primary btn--lg">Commander en ligne</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== MISSION (with photo) ========== -->
|
|
<section class="mission-banner" id="mission">
|
|
<div class="mission-banner__bg">
|
|
<img src="images/equipe-colibri.jpg" alt="Kim et Kev devant le Restaurant Colibri" class="mission-banner__img" loading="lazy">
|
|
<div class="mission-banner__overlay"></div>
|
|
</div>
|
|
<div class="mission-banner__content container">
|
|
<h2 class="mission-banner__title animate-fade-up">
|
|
On croit que bien manger<br>
|
|
devrait être simple.
|
|
</h2>
|
|
<p class="mission-banner__desc animate-fade-up" style="--delay: 0.15s">
|
|
Pas de compromis entre vite et bon. Pas de choix entre santé et saveur. Juste du bon pour vrai, préparé avec soin, prêt quand vous l'êtes.
|
|
</p>
|
|
<a href="#contact" class="btn btn--white btn--lg animate-fade-up" style="--delay: 0.3s">Notre histoire</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== TRAITEUR ========== -->
|
|
<section class="traiteur section" id="traiteur">
|
|
<div class="container">
|
|
<div class="traiteur__layout">
|
|
<div class="traiteur__content">
|
|
<span class="section__tag">Service traiteur</span>
|
|
<h2 class="section__title">On s'occupe de<br>votre événement.</h2>
|
|
<p class="traiteur__desc">
|
|
Réunions, fêtes, événements corporatifs, on prépare des repas frais et savoureux pour vos groupes. Livraison ou cueillette disponible.
|
|
</p>
|
|
|
|
<div class="traiteur__features">
|
|
<div class="traiteur__feature">
|
|
<div class="traiteur__feature-icon">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Menu personnalisé</strong>
|
|
<p>Adapté à vos goûts, allergies et budget</p>
|
|
</div>
|
|
</div>
|
|
<div class="traiteur__feature">
|
|
<div class="traiteur__feature-icon">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>10 à 200 personnes</strong>
|
|
<p>Petits groupes ou grands rassemblements</p>
|
|
</div>
|
|
</div>
|
|
<div class="traiteur__feature">
|
|
<div class="traiteur__feature-icon">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13" rx="2"/><path d="M16 8h4l3 3v5h-7V8zM5 18a2 2 0 100-4 2 2 0 000 4zM19 18a2 2 0 100-4 2 2 0 000 4z"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Livraison ou cueillette</strong>
|
|
<p>Service clé en main dans la grande région de Québec</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#contact" class="btn btn--primary btn--lg">Demander une soumission</a>
|
|
</div>
|
|
|
|
<div class="traiteur__visual">
|
|
<div class="traiteur__img-main">
|
|
<img src="images/traiteur-service.jpg" alt="Service traiteur Colibri" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ========== CONTACT ========== -->
|
|
<section class="contact section" id="contact">
|
|
<div class="container">
|
|
<div class="contact__layout">
|
|
<div class="contact__info">
|
|
<span class="section__tag">Nous joindre</span>
|
|
<h2 class="section__title">Contactez-nous</h2>
|
|
<p class="contact__desc">Une question, une demande de traiteur ou simplement envie de dire bonjour? On est là pour vous.</p>
|
|
|
|
<div class="contact__details">
|
|
<div class="contact__detail">
|
|
<div class="contact__detail-icon">
|
|
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Adresse</strong>
|
|
<p><a href="https://maps.google.com/?q=Restaurant+Colibri+955+Route+Jean-Gauvin+Qu%C3%A9bec" target="_blank" rel="noopener">955 Rte Jean-Gauvin, Québec</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__detail">
|
|
<div class="contact__detail-icon">
|
|
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Téléphone</strong>
|
|
<p><a href="tel:+14188718414">(418) 871-8414</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__detail">
|
|
<div class="contact__detail-icon">
|
|
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Courriel</strong>
|
|
<p><a href="mailto:bonjour@restaurantcolibri.ca">bonjour@restaurantcolibri.ca</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__detail">
|
|
<div class="contact__detail-icon">
|
|
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
<div>
|
|
<strong>Heures d'ouverture</strong>
|
|
<p>Lundi — Vendredi : 7h à 19h<br>Samedi — Dimanche : 8h à 19h<br><span style="color: var(--color-vert); font-weight: 600;">Déjeuner : 8h à 13h</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="contact__form" id="contactForm" action="https://formsubmit.co/bonjour@restaurantcolibri.ca" method="POST">
|
|
<input type="hidden" name="_subject" value="Nouveau message depuis restaurantcolibri.ca">
|
|
<input type="hidden" name="_captcha" value="false">
|
|
<input type="hidden" name="_next" value="https://restaurantcolibri.ca#contact">
|
|
<input type="text" name="_honey" style="display:none">
|
|
<div class="form-group">
|
|
<label for="name">Nom complet</label>
|
|
<input type="text" id="name" name="name" placeholder="Votre nom" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Courriel</label>
|
|
<input type="email" id="email" name="email" placeholder="votre@courriel.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subject">Sujet</label>
|
|
<select id="subject" name="subject">
|
|
<option value="">Choisir un sujet...</option>
|
|
<option value="general">Question générale</option>
|
|
<option value="traiteur">Demande traiteur</option>
|
|
<option value="commande">Commande en ligne</option>
|
|
<option value="autre">Autre</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" rows="5" placeholder="Votre message..." required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn--primary btn--lg btn--full">Envoyer le message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__grid">
|
|
<div class="footer__col">
|
|
<h4>Horaires</h4>
|
|
<p>Lundi — Vendredi : 7h à 19h</p>
|
|
<p>Samedi — Dimanche : 8h à 19h</p>
|
|
<p style="margin-top: 8px; font-weight: 600; color: var(--color-vert);">Déjeuner : 8h à 13h</p>
|
|
</div>
|
|
|
|
<div class="footer__col">
|
|
<h4>Contact</h4>
|
|
<p><a href="tel:+14188718414">(418) 871-8414</a></p>
|
|
<p><a href="mailto:bonjour@restaurantcolibri.ca">bonjour@restaurantcolibri.ca</a></p>
|
|
<p class="footer__address">955 Rte Jean-Gauvin, Québec</p>
|
|
</div>
|
|
|
|
<div class="footer__col">
|
|
<h4>Suivez-nous</h4>
|
|
<div class="footer__social">
|
|
<a href="https://www.instagram.com/petitpetitcolibri/" target="_blank" rel="noopener" class="footer__social-link" aria-label="Instagram">Instagram</a>
|
|
<a href="https://www.facebook.com/petitpetitcolibri?locale=fr_CA" target="_blank" rel="noopener" class="footer__social-link" aria-label="Facebook">Facebook</a>
|
|
<a href="https://www.tiktok.com/@petitpetitcolibri" target="_blank" rel="noopener" class="footer__social-link" aria-label="TikTok">TikTok</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer__col">
|
|
<h4>Infolettre</h4>
|
|
<p class="footer__newsletter-desc">Inscrivez-vous pour rester connecté</p>
|
|
<form class="footer__newsletter-form">
|
|
<input type="email" placeholder="Votre courriel" required>
|
|
<button type="submit" class="btn btn--primary btn--sm">S'inscrire</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer__bottom">
|
|
<p>© 2026 Restaurant Colibri. Tous droits réservés.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ========== MOBILE STICKY CTA ========== -->
|
|
<div class="mobile-cta" id="mobileCta">
|
|
<a href="fr/commande-en-ligne/commande-en-ligne.html" target="_blank" rel="noopener" class="btn btn--primary btn--lg mobile-cta__btn">Commander en ligne</a>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
<script defer src="_vercel/insights/script.js"></script>
|
|
</body>
|
|
</html>
|