Repository: hhursev/recipe-scrapers (language: python)

Issue:
site: https://www.quitoque.fr/
sample recipe URL(s) :

- https://www.quitoque.fr/recette/5928/burger-veggie-au-saint-marcellin-coleslaw-a-la-pomme
- https://www.quitoque.fr/recette/6443/boulettes-de-porc-a-la-provencale
- https://www.quitoque.fr/recette/6392/poelee-de-gnocchi-et-creme-de-feta



Discussion / hints:
Hello,

Quitoque has a graphql api available to this URL (exemple for id=5928) : 
`https://mgs.quitoque.fr/graphql?operationName=getRecipe&variables={"id":"5928"}&extensions={"persistedQuery":{"version":1,"sha256Hash":"04af4d1a48fd536a67292733e23a2afcf6d0da9770ab07055c59b754eec9bd6d"}}`

Response as a json. It should be simple to get valuable information with this.

Thanks !

Fix patch:
diff --git a/README.rst b/README.rst
index 5414e01d8..cfe8fee8c 100644
--- a/README.rst
+++ b/README.rst
@@ -337,6 +337,7 @@ Scrapers available for:
 - `https://przepisy.pl/ <https://przepisy.pl>`_
 - `https://purelypope.com/ <https://purelypope.com>`_
 - `https://purplecarrot.com/ <https://purplecarrot.com>`_
+- `https://quitoque.fr/ <https://quitoque.fr>`_
 - `https://rachlmansfield.com/ <https://rachlmansfield.com>`_
 - `https://rainbowplantlife.com/ <https://rainbowplantlife.com/>`_
 - `https://realfood.tesco.com/ <https://realfood.tesco.com>`_
diff --git a/recipe_scrapers/__init__.py b/recipe_scrapers/__init__.py
index 5190d4e1a..7f5893062 100644
--- a/recipe_scrapers/__init__.py
+++ b/recipe_scrapers/__init__.py
@@ -252,6 +252,7 @@
 from .przepisy import Przepisy
 from .purelypope import PurelyPope
 from .purplecarrot import PurpleCarrot
+from .quitoque import QuiToque
 from .rachlmansfield import RachlMansfield
 from .rainbowplantlife import RainbowPlantLife
 from .realfoodtesco import RealFoodTesco
@@ -464,6 +465,7 @@
     OneSweetAppetite.host(): OneSweetAppetite,
     PinchOfYum.host(): PinchOfYum,
     PotatoRolls.host(): PotatoRolls,
+    QuiToque.host(): QuiToque,
     Recept.host(): Recept,
     ReceptyPreVas.host(): ReceptyPreVas,
     RecipeGirl.host(): RecipeGirl,
diff --git a/recipe_scrapers/quitoque.py b/recipe_scrapers/quitoque.py
new file mode 100644
index 000000000..32908805e
--- /dev/null
+++ b/recipe_scrapers/quitoque.py
@@ -0,0 +1,90 @@
+from ._abstract import AbstractScraper
+from ._utils import csv_to_tags, get_minutes, get_yields, normalize_string
+
+
+class QuiToque(AbstractScraper):
+    @classmethod
+    def host(cls):
+        return "quitoque.fr"
+
+    @staticmethod
+    def _get_text(element):
+        if element:
+            return normalize_string(element.get_text())
+        else:
+            return None
+
+    def _get_time(self, time_name):
+        times = self.soup.select("div,.recipe-infos-short .item-info")
+        total_time = None
+        for time in times:
+            if time_name in time.get_text():
+                total_time = self._get_text(time).replace(time_name, "")
+        return get_minutes(total_time)
+
+    def _get_nutrient(self, nutrient_name):
+        nutrient_element = self._nutrients.find("p", string=nutrient_name).parent
+        return self._get_text(nutrient_element.find("p", class_="regular"))
+
+    def canonical_url(self):
+        return self.soup.find("meta", {"property": "og:url"}).get("content")
+
+    def author(self):
+        return "QuiToque"
+
+    def title(self):
+        return self._get_text(self.soup.find("h1", class_="title-2"))
+
+    def keywords(self):
+        product_tags = self.soup.find(id="product-tags").find_all(class_="badge")
+        keywords = ",".join(self._get_text(tag) for tag in product_tags)
+        return csv_to_tags(keywords)
+
+    def category(self):
+        category = self.soup.find(class_="primary-ghost")
+        return self._get_text(category)
+
+    def total_time(self):
+        return self._get_time("Total")
+
+    def prep_time(self):
+        return self._get_time("En cuisine")
+
+    def yields(self):
+        serving = self.soup.find(id="ingredients").find("p", class_="body-2")
+        return get_yields(serving)
+
+    def image(self):
+        img_element = self.soup.find(class_="image").find("img")
+        return img_element["src"]
+
+    def ingredients(self):
+        ingredients = []
+        ingredients.extend(self.soup.select("#ingredients .ingredient-list li"))
+        ingredients.extend(self.soup.select(".kitchen-list li"))
+        return [self._get_text(ingredient) for ingredient in ingredients]
+
+    def equipment(self):
+        equipments = self.soup.select("#equipment .ingredient-list li")
+        return [self._get_text(equiment) for equiment in equipments]
+
+    def instructions(self):
+        instructions = self.soup.select("#preparation-steps li")
+        return "\n".join([self._get_text(instruction) for instruction in instructions])
+
+    def description(self):
+        description = self.soup.find("div", class_="container body-2 regular mt-2 mb-4")
+        return self._get_text(description)
+
+    def nutrients(self):
+        self._nutrients = self.soup.find(id="portion")
+        nutrients = {
+            "calories": self._get_nutrient("Énergie (kCal)"),
+            "fatContent": self._get_nutrient("Matières grasses"),
+            "saturatedFatContent": self._get_nutrient("dont acides gras saturés"),
+            "carbohydrateContent": self._get_nutrient("Glucides"),
+            "sugarContent": self._get_nutrient("dont sucre"),
+            "fiberContent": self._get_nutrient("Fibres"),
+            "proteinContent": self._get_nutrient("Protéines"),
+        }
+        return nutrients


Test patch:
diff --git a/tests/test_data/quitoque.fr/quitoque.json b/tests/test_data/quitoque.fr/quitoque.json
new file mode 100644
index 000000000..3f073bd4d
--- /dev/null
+++ b/tests/test_data/quitoque.fr/quitoque.json
@@ -0,0 +1,81 @@
+{
+  "author": "QuiToque",
+  "canonical_url": "https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720",
+  "category": "Tradition",
+  "description": "Les pommes de terre sarladaises sont des patates sautées avec le gras du canard et parfumées à l'ail et au persil.",
+  "equipment": [
+    "four",
+    "sauteuse",
+    "cocotte"
+  ],
+  "host": "quitoque.fr",
+  "image": "https://image-repository-07c0d87b07ca0475fe83bb98.quitoque.fr/sylius_shop_product_cover/e3/72/16c5182dc42132ed776f094e98b0.webp",
+  "ingredient_groups": [
+    {
+      "ingredients": [
+        "4x gousse d'ail (16g)",
+        "8x pomme de terre (1,76kg)",
+        "1x romarin séché (sachet) (5g)",
+        "6x cuisse de canard (1,08kg)",
+        "150 g multifeuille",
+        "qq brins persil plat",
+        "sel",
+        "poivre",
+        "huile d'olive",
+        "vinaigre de votre choix",
+        "1 bouillon de poule (cube)"
+      ],
+      "purpose": null
+    }
+  ],
+  "ingredients": [
+    "4x gousse d'ail (16g)",
+    "8x pomme de terre (1,76kg)",
+    "1x romarin séché (sachet) (5g)",
+    "6x cuisse de canard (1,08kg)",
+    "150 g multifeuille",
+    "qq brins persil plat",
+    "sel",
+    "poivre",
+    "huile d'olive",
+    "vinaigre de votre choix",
+    "1 bouillon de poule (cube)"
+  ],
+  "instructions": "Préchauffez votre four à 220°C en chaleur tournante !\nPendant ce temps, faites chauffer une sauteuse sans matière grasse à feu moyen à vif.\nSaisissez les cuisses de canard 5 à 10 min côté peau puis réservez la sauteuse avec la graisse de canard.\nUne fois grillées, déposez les cuisses de canard dans une cocotte avec un fond d'eau, le romarin et le bouillon de poule. Salez, poivrez.\nCouvrez et enfournez 1h jusqu'à ce qu'elles soient cuites à coeur (la chair n'est plus rose).\nAstuce : ajoutez de l'eau en cours de cuisson si nécessaire et arrosez régulièrement avec le jus de cuisson.\nEn parallèle, faites cuire les pommes de terre.\nÉpluchez et coupez les pommes de terre en rondelles.\nSuggestion : Vous pouvez conserver la peau si vous le souhaitez, pensez à bien les laver et les essuyer.\nDans la sauteuse du canard, faites revenir les pommes de terre 5 min à feu vif sans trop les superposer.\nBaissez sur feu moyen et poursuivez la cuisson 15 min à couvert. Remuez régulièrement pendant la cuisson. Salez, poivrez.\nPendant ce temps, pressez ou hachez l'ail.\nEffeuillez et ciselez le persil.\nAu bout des 15 min, ajoutez l'ail et le persil et poursuivez la cuisson 5 min à couvert.\nAvant de passer à table, assaisonnez la salade d'un filet d'huile d'olive et de vinaigre.",
+  "instructions_list": [
+    "Préchauffez votre four à 220°C en chaleur tournante !",
+    "Pendant ce temps, faites chauffer une sauteuse sans matière grasse à feu moyen à vif.",
+    "Saisissez les cuisses de canard 5 à 10 min côté peau puis réservez la sauteuse avec la graisse de canard.",
+    "Une fois grillées, déposez les cuisses de canard dans une cocotte avec un fond d'eau, le romarin et le bouillon de poule. Salez, poivrez.",
+    "Couvrez et enfournez 1h jusqu'à ce qu'elles soient cuites à coeur (la chair n'est plus rose).",
+    "Astuce : ajoutez de l'eau en cours de cuisson si nécessaire et arrosez régulièrement avec le jus de cuisson.",
+    "En parallèle, faites cuire les pommes de terre.",
+    "Épluchez et coupez les pommes de terre en rondelles.",
+    "Suggestion : Vous pouvez conserver la peau si vous le souhaitez, pensez à bien les laver et les essuyer.",
+    "Dans la sauteuse du canard, faites revenir les pommes de terre 5 min à feu vif sans trop les superposer.",
+    "Baissez sur feu moyen et poursuivez la cuisson 15 min à couvert. Remuez régulièrement pendant la cuisson. Salez, poivrez.",
+    "Pendant ce temps, pressez ou hachez l'ail.",
+    "Effeuillez et ciselez le persil.",
+    "Au bout des 15 min, ajoutez l'ail et le persil et poursuivez la cuisson 5 min à couvert.",
+    "Avant de passer à table, assaisonnez la salade d'un filet d'huile d'olive et de vinaigre."
+  ],
+  "keywords": [
+    "Kids friendly",
+    "Valeur sûre",
+    "Tradition"
+  ],
+  "language": "fr",
+  "nutrients": {
+    "calories": "589kCal",
+    "fatContent": "23,89g",
+    "saturatedFatContent": "7,02g",
+    "carbohydrateContent": "50,58g",
+    "sugarContent": "0,40g",
+    "fiberContent": "6,99g",
+    "proteinContent": "38,65g"
+  },
+  "prep_time": 50,
+  "title": "Cuisse de canard au romarin et pommes de terre sarladaises",
+  "total_time": 110,
+  "yields": "2 servings"
+}
diff --git a/tests/test_data/quitoque.fr/quitoque.testhtml b/tests/test_data/quitoque.fr/quitoque.testhtml
new file mode 100644
index 000000000..b25ad4743
--- /dev/null
+++ b/tests/test_data/quitoque.fr/quitoque.testhtml
@@ -0,0 +1,1244 @@
+<html lang="fr">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  <title>Cuisse de canard au romarin et pommes de terre sarladaises | Quitoque</title>
+
+
+  <meta name="robots" content="noindex">
+
+  <meta property="og:title" content="Cuisse de canard au romarin et pommes de terre sarladaises">
+
+  <meta property="og:description"
+    content="Découvrez notre recette Cuisse de canard au romarin et pommes de terre sarladaises ! Préparez une variété de plats savoureux avec nos ingrédients frais, de qualité et de saison. Cuisinez comme un chef avec Quitoque !">
+  <meta name="description"
+    content="Découvrez notre recette Cuisse de canard au romarin et pommes de terre sarladaises ! Préparez une variété de plats savoureux avec nos ingrédients frais, de qualité et de saison. Cuisinez comme un chef avec Quitoque !">
+
+
+  <meta property="og:type" content="website">
+  <meta property="og:url"
+    content="https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720">
+
+
+  <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-K4F76XNZ"></script>
+  <script
+    type="application/ld+json">[{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https://www.quitoque.fr/"},{"@type":"ListItem","position":2,"name":"Catalogue principal","item":"https://www.quitoque.fr/taxons/master-catalogue-principal"},{"@type":"ListItem","position":3,"name":"P\u00e9riode","item":"https://www.quitoque.fr/taxons/period-periode"},{"@type":"ListItem","position":4,"name":"2024","item":"https://www.quitoque.fr/taxons/2024-2024"},{"@type":"ListItem","position":5,"name":"Semaine 30","item":"https://www.quitoque.fr/taxons/week-2024-30-semaine-30"},{"@type":"ListItem","position":6,"name":"\u00c0 cuisiner","item":"https://www.quitoque.fr/taxons/1-week-2024-30-a-cuisiner-a-cuisiner"},{"@type":"ListItem","position":7,"name":"Cuisse de canard au romarin et pommes de terre sarladaises"}]}]</script>
+  <script
+    type="application/ld+json">[{"@context":"https://schema.org","@type":"Product","name":"Cuisse de canard au romarin et pommes de terre sarladaises","description":null,"image":["https://www.quitoque.fr/media/cache/resolve/sylius_shop_product_large_thumbnail/e3/72/16c5182dc42132ed776f094e98b0.jpg"],"offers":[{"@type":"Offer","url":"https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720","priceCurrency":"EUR","price":"32.95","availability":"https://schema.org/InStock"},{"@type":"Offer","url":"https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720","priceCurrency":"EUR","price":"17.95","availability":"https://schema.org/InStock"},{"@type":"Offer","url":"https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720","priceCurrency":"EUR","price":"22.2","availability":"https://schema.org/InStock"},{"@type":"Offer","url":"https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720","priceCurrency":"EUR","price":"25.2","availability":"https://schema.org/InStock"},{"@type":"Offer","url":"https://www.quitoque.fr/products/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720","priceCurrency":"EUR","price":"28.95","availability":"https://schema.org/InStock"}]}]</script>
+
+
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+
+  <link rel="stylesheet" href="/build/quitoque/theme/default.42692964.css">
+
+
+
+  <link rel="stylesheet" href="/build/quitoque/cms-shop/cms-shop.90e32912.css">
+
+  <link rel="stylesheet" href="/build/quitoque/adyen/adyen.230428aa.css">
+
+
+
+
+  <link rel="apple-touch-icon-precomposed" sizes="180x180"
+    href="/build/quitoque/theme/assets/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-icon-precomposed" sizes="152x152"
+    href="/build/quitoque/theme/assets/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon-precomposed" sizes="144x144"
+    href="/build/quitoque/theme/assets/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon-precomposed" sizes="120x120"
+    href="/build/quitoque/theme/assets/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon-precomposed" sizes="114x114"
+    href="/build/quitoque/theme/assets/apple-touch-icon-114x114.png//">
+  <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/build/quitoque/theme/assets/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/build/quitoque/theme/assets/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon-precomposed" href="/build/quitoque/theme/assets/apple-touch-icon-precomposed.png">
+  <link rel="icon" type="image/x-icon" href="/build/quitoque/theme/assets/favicon.ico">
+
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-K4F76XNZ');</script>
+  <!-- End Google Tag Manager -->
+</head>
+
+<body class="">
+
+
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K4F76XNZ" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
+  <div id="main-content" class="content" data-controller="gtm"
+    data-gtm-gtm-data-value="{&quot;event&quot;:&quot;page_view&quot;,&quot;page_title&quot;:&quot;cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720&quot;,&quot;page_url&quot;:&quot;\/products\/cuisse-de-canard-au-romarin-et-pommes-de-terre-sarladaises-13720&quot;,&quot;funnel_step&quot;:null,&quot;funnel_name&quot;:null,&quot;currency&quot;:&quot;EUR&quot;,&quot;user_id&quot;:null,&quot;user_id_sha_256&quot;:null,&quot;user_email&quot;:null,&quot;user_email_sha_256&quot;:null,&quot;user_first_name&quot;:null,&quot;user_last_name&quot;:null,&quot;user_phone&quot;:null,&quot;user_postal_code&quot;:null,&quot;user_city&quot;:null,&quot;user_connection&quot;:&quot;not connected&quot;,&quot;user_has_subscription&quot;:false,&quot;order_id&quot;:31387449,&quot;order_net_amount_ttc&quot;:0,&quot;order_gross_amount_ttc&quot;:0,&quot;delivery_charge_ttc&quot;:0,&quot;week&quot;:null,&quot;coupon&quot;:null,&quot;discount&quot;:null,&quot;order_contains_essential&quot;:false,&quot;items&quot;:null,&quot;shipping_method&quot;:null,&quot;delivery_day&quot;:null,&quot;delivery_time_slot_start_at&quot;:0,&quot;delivery_time_slot_end_at&quot;:0}">
+    <header class="sticky-top d-flex align-items-center">
+      <div class="container d-flex flex-row align-items-center justify-content-between">
+        <button class="d-lg-none icon menu bg-transparent border-0" type="button" data-bs-toggle="offcanvas"
+          data-bs-target="#offcanvas-menu" aria-controls="offcanvasMenu">
+          <span class="d-none">Menu</span>
+        </button>
+        <a class="logo" href="/">
+          <img src="/build/quitoque/theme/images/logo-dark.f5c2e3fd.svg" class="img-fluid img-dark" alt="logo Quitoque">
+          <img src="/build/quitoque/theme/images/logo-white.ba633c77.svg" class="img-fluid img-white"
+            alt="logo Quitoque">
+        </a>
+
+        <div class="menu d-lg-down-none">
+
+
+          <div class="navigation d-lg-flex flex-row align-items-center">
+
+            <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/commander/personnalisation">Ma première
+              box</a>
+
+
+            <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/nos-paniers">Nos box</a>
+
+
+            <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/au-menu">Nos recettes</a>
+
+
+            <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/nos-engagements">Nos engagements</a>
+
+          </div>
+
+        </div>
+
+
+        <div class="security-menu d-lg-down-none d-flex justify-content-end flex-row">
+          <a href="/login" class="button small border">
+            <span class="icon user"></span>Me connecter
+          </a>
+          <a href="/commander" class="button small tertiary">
+            Commander
+          </a>
+        </div>
+
+
+
+
+
+
+
+        <a href="/login" class="icon user d-lg-none">
+          <span class="d-none">Me connecter</span>
+        </a>
+      </div>
+    </header>
+
+    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-menu" aria-labelledby="offcanvasMenuLabel">
+      <div class="offcanvas-header justify-content-end">
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body p-4">
+
+
+        <div class="navigation d-lg-flex flex-row align-items-center">
+
+          <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/commander/personnalisation">Ma première
+            box</a>
+
+
+          <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/nos-paniers">Nos box</a>
+
+
+          <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/au-menu">Nos recettes</a>
+
+
+          <a class="item mb-4 mb-lg-0 d-block text-decoration-none" href="/nos-engagements">Nos engagements</a>
+
+        </div>
+
+        <hr class="mb-4">
+        <div class="security-menu d-lg-down-none d-flex justify-content-end flex-row">
+          <a href="/login" class="button small border">
+            <span class="icon user"></span>Me connecter
+          </a>
+          <a href="/commander" class="button small tertiary">
+            Commander
+          </a>
+        </div>
+
+
+      </div>
+    </div>
+
+
+
+    <div class="sticky-top sticky-after-header w-100">
+
+
+    </div>
+
+
+
+
+
+
+
+    <main>
+      <div id="product-show">
+
+        <div class="mb-4">
+
+
+
+
+          <div class="image h-100">
+            <img
+              src="https://image-repository-07c0d87b07ca0475fe83bb98.quitoque.fr/sylius_shop_product_cover/e3/72/16c5182dc42132ed776f094e98b0.webp"
+              srcset="https://image-repository-07c0d87b07ca0475fe83bb98.quitoque.fr/sylius_shop_product_cover_2x/e3/72/16c5182dc42132ed776f094e98b0.webp 1x, https://image-repository-07c0d87b07ca0475fe83bb98.quitoque.fr/sylius_shop_product_cover_2x/e3/72/16c5182dc42132ed776f094e98b0.webp 2x"
+              alt="Cuisse de canard au romarin et pommes de terre sarladaises"
+              data-gtm-image="https://image-repository-07c0d87b07ca0475fe83bb98.quitoque.fr/sylius_shop_product_cover_2x/e3/72/16c5182dc42132ed776f094e98b0.webp">
+          </div>
+        </div>
+
+        <div class="container">
+
+          <div class="mt-3 mb-2">
+
+            <span class="badge chip small mb-1 primary-ghost">
+              Tradition
+            </span>
+          </div>
+
+          <h1 id="sylius-product-name" class="title-2">Cuisse de canard au romarin et pommes de terre sarladaises</h1>
+
+
+
+          <hr>
+        </div>
+
+
+
+
+
+        <div id="product-tags" class="container body-2 mt-3 mb-2">
+
+          <span class="badge chip small mb-1 neutral">
+            Kids friendly
+          </span>
+
+          <span class="badge chip small mb-1 neutral">
+            Valeur sûre
+          </span>
+
+          <span class="badge chip small mb-1 neutral">
+            Tradition
+          </span>
+
+        </div>
+
+
+
+
+        <div class="container body-2 regular mt-2 mb-4">
+          Les pommes de terre sarladaises sont des patates sautées avec le gras du canard et parfumées à l'ail et au
+          persil.
+        </div>
+
+
+
+
+        <div class="container mt-4 mb-4">
+          <div class="nutrition-score d-inline-block">
+            <i class="icon nutri-score-A"></i>
+          </div>
+        </div>
+
+
+
+
+
+
+        <div class="recipe-infos-short mt-4 mb-4">
+          <div class="container px-5 py-3">
+            <div class="col item-info">
+              <p class="body-2 bold">50 min</p>
+              <p class="body-2 regular c-gray-400">En cuisine</p>
+            </div>
+            <span class="dot"></span>
+            <div class="col item-info">
+              <p class="body-2 bold">1h50</p>
+              <p class="body-2 regular c-gray-400">Total</p>
+            </div>
+            <span class="dot"></span>
+            <div class="col item-info">
+              <p class="body-2 bold">589.15</p>
+              <p class="body-2 regular c-gray-400">Kcal</p>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="container pb-5 mb-5">
+
+          <div id="ingredients-recipe">
+
+
+
+            <section class="content">
+              <ul class="nav nav-tabs tab-menu" role="tablist">
+                <li class="nav-item" role="ingredients">
+                  <button class="nav-link active" id="ingredients-tab" data-bs-toggle="tab"
+                    data-bs-target="#ingredients" type="button" role="tab" aria-controls="ingredients"
+                    aria-selected="true">
+                    Ingrédients
+                  </button>
+                </li>
+                <li class="nav-item" role="equipment">
+                  <button class="nav-link" id="equipment-tab" data-bs-toggle="tab" data-bs-target="#equipment"
+                    type="button" role="tab" aria-controls="equipment" aria-selected="false" tabindex="-1">
+                    Équipement
+                  </button>
+                </li>
+              </ul>
+              <div class="tab-content">
+                <div class="tab-pane fade show active" id="ingredients" role="tabpanel"
+                  aria-labelledby="ingredients-tab">
+                  <div id="ingredients" class="mt-4 mb-4">
+                    <div class="d-flex justify-content-between">
+                      <h2 class="title-4 mb-1 body ff-catamaran">
+                        Dans votre box
+                      </h2>
+
+                      <p class="regular body-2 d-inline-block m-0 mb-1">
+                        2 personnes
+                      </p>
+                    </div>
+
+
+                    <ul class="ingredient-list ps-1 mb-2">
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">4x</span>
+
+                        <span>
+                          gousse d'ail&nbsp;(16g) </span>
+
+                      </li>
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">8x</span>
+
+                        <span>
+                          pomme de terre&nbsp;(1,76kg) </span>
+
+                      </li>
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">1x</span>
+
+                        <span>
+                          romarin séché (sachet)&nbsp;(5g) </span>
+
+                      </li>
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">6x</span>
+
+                        <span>
+                          cuisse de canard&nbsp;(1,08kg) </span>
+
+                      </li>
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">150 g</span>
+
+                        <span>
+                          multifeuille&nbsp; </span>
+
+                      </li>
+
+
+                      <li class="mb-0 pb-3 body-2 regular ms-3">
+                        <span class="bold">qq brins</span>
+
+                        <span>
+                          persil plat&nbsp; </span>
+
+                      </li>
+                    </ul>
+
+
+
+
+
+
+
+
+                    <div class="bg-background mb-2 rounded-1">
+                      <div class="collapse-tab d-flex align-items-center justify-content-between p-3 c-gray-400 body-2"
+                        data-bs-toggle="collapse" href="#allergens-dropdown" role="button" aria-expanded="true"
+                        aria-controls="allergens-dropdown">
+
+                        Allergènes &amp; composition
+                        <span class="icomoon icon-plus"></span>
+                        <span class="icomoon icon-minus"></span>
+                      </div>
+                      <div class="ps-3 pe-3 pb-2 collapse show" id="allergens-dropdown" style="">
+                        <ul class="ps-4">
+
+
+
+
+
+
+
+
+
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Romarin séché (sachet)</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Traces possibles d'allergènes&nbsp;:
+                                Gluten,
+                                Arachides,
+                                Soja,
+                                Fruits à coques,
+                                Céleri,
+                                Moutarde,
+                                Sésame,
+                                Mollusques
+                              </p>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Composition&nbsp;:
+                                Romarin
+                              </p>
+                            </div>
+                          </li>
+
+
+
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Cuisse de canard</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Composition&nbsp;:
+                                100% viande de canard
+                              </p>
+                            </div>
+                          </li>
+
+
+
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Multifeuille</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Composition&nbsp;:
+                                Multifeuille blonde et/ou rouge, conditionné sous atmosphère protectrice
+                              </p>
+                            </div>
+                          </li>
+
+
+
+                        </ul>
+                      </div>
+                    </div>
+
+                    <div data-controller="product-origins"
+                      data-product-origins-url-value="/produit/origines/5073/2024-07-17"
+                      class="bg-background mb-2 rounded-1">
+                      <div data-action="click->product-origins#fetchOrigins"
+                        class="collapse-tab d-flex align-items-center justify-content-between p-3 c-gray-400 body-2 collapsed"
+                        data-bs-toggle="collapse" href="#origins-dropdown" role="button" aria-expanded="false"
+                        aria-controls="origins-dropdown">
+                        Origines
+                        <span class="icomoon icon-plus"></span>
+                        <span class="icomoon icon-minus"></span>
+                      </div>
+                      <div class="ps-3 pe-3 pb-2 collapse" id="origins-dropdown" data-product-origins-target="content"
+                        style="">
+                        <div class="mb-2">
+                          <p class="body-2 c-gray-400 m-0"> <i class="fr flag"></i>
+                            France</p>
+                          <p class="body-2 regular m-0">pomme de terre, cuisse de canard, multifeuille, persil plat</p>
+                        </div>
+                        <div class="mb-2">
+                          <p class="body-2 c-gray-400 m-0"> <i class="eu flag"></i>
+                            UE</p>
+                          <p class="body-2 regular m-0">gousse d'ail</p>
+                        </div>
+                      </div>
+                    </div>
+
+
+
+
+
+
+
+
+
+                    <div class="bg-background mb-2 rounded-1">
+                      <div
+                        class="collapse-tab d-flex align-items-center justify-content-between mb-2 p-3 c-gray-400 body-2 collapsed"
+                        data-bs-toggle="collapse" href="#conservation-dropdown" role="button" aria-expanded="false"
+                        aria-controls="conservation-dropdown">
+                        Conservation &amp; mode d'emploi
+                        <span class="icomoon icon-plus"></span>
+                        <span class="icomoon icon-minus"></span>
+                      </div>
+                      <div class="ps-3 pe-3 pb-2 collapse" id="conservation-dropdown" style="">
+                        <ul class="ps-4">
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Romarin séché (sachet)</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Conservation&nbsp;:
+                                A conserver dans un endroit sec à température ambiante
+                              </p>
+                            </div>
+                          </li>
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Cuisse de canard</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Conservation&nbsp;:
+                                A conserver entre 0°c et 4°c
+                              </p>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Mode d'emploi&nbsp;:
+                                A consommer cuit à cœur
+                              </p>
+                            </div>
+                          </li>
+                          <li class="mb-2">
+
+                            <p class="body-2 c-gray-400 mb-2">
+                              <span class="bold">Multifeuille</span>
+                            </p>
+
+                            <div>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Conservation&nbsp;:
+                                A conserver entre 1°c et 4°c
+                              </p>
+                              <p class="m-0 body-2 regular c-gray-400">
+                                Mode d'emploi&nbsp;:
+                                Prêt à l'emploi
+                              </p>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+
+                  <p class="bold m-0 mb-1">Dans votre cuisine</p>
+                  <ul class="kitchen-list">
+                    <li class="regular body-2 mb-2">sel</li>
+                    <li class="regular body-2 mb-2">poivre</li>
+                    <li class="regular body-2 mb-2">huile d'olive</li>
+                    <li class="regular body-2 mb-2">vinaigre de votre choix</li>
+                    <li class="regular body-2 mb-2">1 bouillon de poule (cube)</li>
+                  </ul>
+                </div>
+                <div class="tab-pane fade" id="equipment" role="tabpanel" aria-labelledby="equipment-tab">
+                  <ul class="ingredient-list">
+                    <li class="regular body-2 mb-2">four</li>
+                    <li class="regular body-2 mb-2">sauteuse</li>
+                    <li class="regular body-2 mb-2">cocotte</li>
+                  </ul>
+                </div>
+              </div>
+            </section>
+            <hr class="mt-4">
+          </div>
+
+
+
+          <div id="preparation-steps">
+
+            <section class="recipe-list">
+              <h2 class="title-2 mb-1">La recette</h2>
+              <div class="d-flex flex-column gap-4">
+                <div class="toggle w-100 mb-2">
+                  <p class="regular body-3 m-0 c-gray-400">Étape 1</p>
+                  <p class="bold mb-2">1. Les cuisses de canard</p>
+                  <ul class="ps-4">
+                    <li class="body-2 regular m-0">Préchauffez votre four à 220°C en chaleur tournante !</li>
+                    <li class="body-2 regular m-0">Pendant ce temps, faites chauffer une sauteuse sans matière grasse à
+                      feu moyen à vif.</li>
+                    <li class="body-2 regular m-0">Saisissez les cuisses de canard 5 à 10 min côté peau puis réservez la
+                      sauteuse avec la graisse de canard.</li>
+                    <li class="body-2 regular m-0">Une fois grillées, déposez les cuisses de canard dans une cocotte
+                      avec un fond d'eau, le romarin et le bouillon de poule. Salez, poivrez.</li>
+                    <li class="body-2 regular m-0">Couvrez et enfournez 1h jusqu'à ce qu'elles soient cuites à coeur (la
+                      chair n'est plus rose).</li>
+                    <li class="body-2 regular m-0">Astuce : ajoutez de l'eau en cours de cuisson si nécessaire et
+                      arrosez régulièrement avec le jus de cuisson.</li>
+                    <li class="body-2 regular m-0">En parallèle, faites cuire les pommes de terre.</li>
+                  </ul>
+                  <div class="toggle-overlay d-none">
+                    <p class="body-2 underline" data-bs-toggle="collapse" href="#step-instructions" role="button"
+                      aria-expanded="true" aria-controls="step-instructions"
+                      onclick="this.parentNode.classList.add('d-none');">
+                      Voir toute la recette
+                    </p>
+                  </div>
+                </div>
+                <div class="mb-2 collapse show" id="step-instructions" style="">
+                  <p class="regular body-3 m-0">Étape 2</p>
+                  <p class="bold mb-2">2. Les pommes de terre sarladaises</p>
+                  <ul>
+                    <li class="body-2 regular m-0">Épluchez et coupez les pommes de terre en rondelles.</li>
+                    <li class="body-2 regular m-0">Suggestion : Vous pouvez conserver la peau si vous le souhaitez,
+                      pensez à bien les laver et les essuyer.</li>
+                    <li class="body-2 regular m-0">Dans la sauteuse du canard, faites revenir les pommes de terre 5 min
+                      à feu vif sans trop les superposer.</li>
+                    <li class="body-2 regular m-0">Baissez sur feu moyen et poursuivez la cuisson 15 min à couvert.
+                      Remuez régulièrement pendant la cuisson. Salez, poivrez.</li>
+                    <li class="body-2 regular m-0">Pendant ce temps, pressez ou hachez l'ail.</li>
+                    <li class="body-2 regular m-0">Effeuillez et ciselez le persil.</li>
+                    <li class="body-2 regular m-0">Au bout des 15 min, ajoutez l'ail et le persil et poursuivez la
+                      cuisson 5 min à couvert.</li>
+                    <li class="body-2 regular m-0">Avant de passer à table, assaisonnez la salade d'un filet d'huile
+                      d'olive et de vinaigre.</li>
+                  </ul>
+                </div>
+                <div class="mb-2 collapse show" id="step-instructions" style="">
+                  <p class="regular body-3 m-0">Étape 3</p>
+                  <p class="bold mb-2">Servez sans attendre votre cuisse de canard au romarin accompagnée des pommes de
+                    terre sarladaises et de la salade !</p>
+                </div>
+              </div>
+            </section>
+          </div>
+
+
+
+
+          <div id="videos" class="videos">
+            <h2 class="title-2">Les gestes de cuisine</h2>
+            <div class="d-md-flex flex-wrap gap-4 ">
+              <div class="card video shadow-none me-2 me-md-0">
+                <a href="https://www.youtube.com/embed/p657ocoBiek?autoplay=0&amp;mute=0&amp;controls=0&amp;origin=https%3A%2F%2Fwww.quitoque.fr&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;enablejsapi=1&amp;widgetid=5"
+                  class="play-button text-decoration-none" target="_blank">
+                  <div class="position-relative mt-1 mb-1">
+                    <img class="img-fluid rounded-3" src="https://img.youtube.com/vi/p657ocoBiek/maxresdefault.jpg">
+                    <span
+                      class="bg-gray bg-opacity-75 rounded-3 p-3 position-absolute d-inline-flex top-50 start-50 translate-middle">
+                      <i class="icomoon icon-play-fill c-white fs-2"></i>
+                    </span>
+                  </div>
+                  <p class="body-2 bold m-0">Comment couper des pommes de terre en rondelles et demi-rondelles ?</p>
+                </a>
+              </div>
+            </div>
+          </div>
+
+
+          <div id="nutritionnals" class="nutritionnals">
+            <h2 class="title-2 mb-1">Valeurs nutritionnelles</h2>
+
+
+            <ul class="nav nav-tabs tab-menu mb-3" role="tablist">
+              <li class="nav-item" role="portion">
+                <button class="nav-link active" id="portion-tab" data-bs-toggle="tab" data-bs-target="#portion"
+                  type="button" role="tab" aria-controls="portion" aria-selected="true">
+                  Par portion
+                </button>
+              </li>
+
+              <li class="nav-item " role="quantity">
+                <button class="nav-link" id="quantity-tab" data-bs-toggle="tab" data-bs-target="#quantity" type="button"
+                  role="tab" aria-controls="quantity" aria-selected="false" tabindex="-1">
+                  Pour 100g
+                </button>
+              </li>
+            </ul>
+
+            <div class="tab-content nutritional-values">
+              <div class="tab-pane fade active show" id="portion" role="tabpanel" aria-labelledby="portion-tab">
+                <ul>
+                  <li>
+                    <p class="body-2 bold m-0">Énergie (kJ)</p>
+                    <p class="body-2 regular m-0">2 467kJ</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Énergie (kCal)</p>
+                    <p class="body-2 regular m-0">589kCal</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Matières grasses</p>
+                    <p class="body-2 regular m-0">23,89g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">dont acides gras saturés</p>
+                    <p class="body-2 regular m-0">7,02g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Glucides</p>
+                    <p class="body-2 regular m-0">50,58g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">dont sucre</p>
+                    <p class="body-2 regular m-0">0,40g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Fibres</p>
+                    <p class="body-2 regular m-0">6,99g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Protéines</p>
+                    <p class="body-2 regular m-0">38,65g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Sel</p>
+                    <p class="body-2 regular m-0">0,38g</p>
+                  </li>
+                </ul>
+              </div>
+
+              <div class="tab-pane fade" id="quantity" role="tabpanel" aria-labelledby="quantity-tab">
+                <ul>
+                  <li>
+                    <p class="body-2 bold m-0">Énergie (kJ)</p>
+                    <p class="body-2 regular m-0">491kJ</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Énergie (kCal)</p>
+                    <p class="body-2 regular m-0">117kCal</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Matières grasses</p>
+                    <p class="body-2 regular m-0">4,76g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">dont acides gras saturés</p>
+                    <p class="body-2 regular m-0">1,40g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Glucides</p>
+                    <p class="body-2 regular m-0">10,08g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">dont sucre</p>
+                    <p class="body-2 regular m-0">0,08g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Fibres</p>
+                    <p class="body-2 regular m-0">1,39g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Protéines</p>
+                    <p class="body-2 regular m-0">7,70g</p>
+                  </li>
+                  <li>
+                    <p class="body-2 bold m-0">Sel</p>
+                    <p class="body-2 regular m-0">0,08g</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+
+          <div id="info-card" class="pt-3">
+            <h2 class="title-2">Le Nutri-Score</h2>
+            <div class="card info shadow-none p-3 bg-green-100">
+              <div class="card__header mb-2 d-flex justify-content-between align-items-center">
+                <p class="body-3 bold c-green mb-0">Qu’est-ce que le Nutri-Score ?</p>
+                <span class="icon nutri-score-A"></span>
+              </div>
+              <p class="body-3 regular m-0">C’est un logo qui informe sur la qualité nutritionnelle des produits sous
+                une forme simplifiée et complémentaire à la déclaration nutritionnelle obligatoire</p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </main>
+
+
+
+
+    <footer>
+      <div class="main-footer bg-background">
+        <div class="container">
+          <div class="row">
+            <div class="bitbag-block">
+              <div class="row">
+                <div class="col-xl-3 col-lg-3 col-6 order-2 order-lg-1">
+                  <p class="body-3 bold mb-3">Aide et contact</p>
+
+                  <ul class="list-unstyled">
+                    <li><a href="/aide">Questions fréquentes</a></li>
+                    <li><a href="/aide/contact">Nous contacter</a></li>
+                    <li><a href="/blog/article/informations-aux-consommateurs-les-rappels-produit">Rappel produit</a>
+                    </li>
+                  </ul>
+
+                  <div class="row d-none d-lg-block">
+                    <div class="col-12 col-lg-11 col-xl-9">
+                      <hr>
+                      <ul class="mb-1 list-unstyled">
+                        <li class="d-flex justify-content-between align-items-center mb-0"><a class="bold underline"
+                            href="tel:07&nbsp;44&nbsp;08&nbsp;18&nbsp;00">07&nbsp;44&nbsp;08&nbsp;18&nbsp;00</a><span
+                            class="small regular"> ou </span><a class="bold underline"
+                            href="https://wa.me/+33644645252">WhatsApp</a></li>
+                      </ul>
+
+                      <ul class="list-unstyled">
+                        <li class="body-3 bold mb-0 c-gray-400 d-flex justify-content-between"><span>Lun. à
+                            Ven.</span><span class="regular">08h à 20h</span></li>
+                        <li class="body-3 bold mb-0 c-gray-400 d-flex justify-content-between"><span>Sam.</span><span
+                            class="regular">08h à 21h</span></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="col-xl-2 col-lg-3 col-12 order-4 order-lg-2">
+                  <p class="body-3 bold mb-3">Offres et services</p>
+
+                  <ul class="list-unstyled">
+                    <li><a href="/nos-paniers/comment-ca-marche">Notre concept</a></li>
+                    <li><a href="/recettes">Toutes nos recettes</a></li>
+                    <li><a href="/nos-engagements">Nos engagements</a></li>
+                    <li><a href="/nos-paniers">Nos box</a></li>
+                    <li><a href="/nos-paniers/tout-savoir-sur-le-prix">Nos prix</a></li>
+                  </ul>
+                </div>
+
+                <div class="col-xl-2 col-lg-2 col-6 order-3 order-lg-3 offset-xl-1">
+                  <p class="body-3 bold mb-3">Quitoque</p>
+
+                  <ul class="list-unstyled">
+                    <li><a href="/blog">Le blog</a></li>
+                    <li><a href="https://quitoque.welcomekit.co/">Nous rejoindre</a></li>
+                    <li><a href="/collaboration/presse">Presse et influenceurs</a></li>
+                    <li><a href="https://pages.quitoque.fr/pages/affiliation">Affiliation</a></li>
+                    <li><button class="btn c-green border border-green" id="settings-cookie" onclick="if(window.Optanon){window.Optanon.ToggleInfoDisplay();}
+" type="button">Paramètres des cookies</button></li>
+                  </ul>
+                </div>
+
+                <div class="col-lg-4 col-12 order-1 order-lg-4">
+                  <p class="body-3 bold mb-2">Télécharger nos applications</p>
+
+                  <div><a href="https://apps.apple.com/fr/app/quitoque-le-panier-%%C3%%A0-cuisiner/id1103326227"
+                      class="d-inline-block">
+                      <span class="icon app-store small d-lg-down-none"></span>
+                      <span class="icon app-store d-lg-none"></span>
+                    </a>
+                    <a href="https://play.google.com/store/search?q=quitoque&amp;c=apps" class="d-inline-block">
+                      <span class="icon play-store small d-lg-down-none"></span>
+                      <span class="icon play-store d-lg-none"></span>
+                    </a>
+                  </div>
+
+                  <ul class="list-unstyled mt-lg-5 mt-5 mb-lg-0 mb-5">
+                    <li>
+                      <div data-controller="newsletter" data-contact-target-name-value="newsletter-form"
+                        data-newsletter-token-id-value="newsletter_subscription"
+                        data-newsletter-token-url-value="/ajax/generate-csrf-token">
+                        <form name="newsletter_subscription" method="post" action="/newsletter/subscription/"
+                          data-action="newsletter#submitFormFromEvent" data-newsletter-target="form">
+                          <label for="newsletter_subscription_email" class="required">Une fois par semaine, un concentré
+                            d’astuces, d’idées et de recettes, assaisonné d’offres en avant-première.</label>
+                          <div class="d-flex flex-row">
+                            <input type="email" id="newsletter_subscription_email" name="newsletter_subscription[email]"
+                              required="required" placeholder="Votre email">
+                            <button type="submit" id="newsletter_subscription_submit"
+                              name="newsletter_subscription[submit]" class="">Ok</button>
+                          </div>
+
+                          <input type="hidden" id="newsletter_subscription_userOriginCategory"
+                            name="newsletter_subscription[userOriginCategory]" value="Footer"><input type="hidden"
+                            id="newsletter_subscription__token" name="newsletter_subscription[_token]"
+                            value="03da5adfb2f31e368cb3c878a5e7098.ftWYvDLGR-2P21TC9QkattKRv_9oZW3snWLmGBzX4HI.E7Hz3Vj2FovNkjurtDtR8YjHzaAbKgGmrw2sc1HhrgMpktfQQP4qg8qoEQ">
+                        </form>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="row d-lg-none">
+                <div class="col-12 col-lg-11 col-xl-12">
+                  <hr>
+                  <ul class="mb-1 list-unstyled">
+                    <li class="mb-0"><a class="bold underline"
+                        href="tel:07&nbsp;44&nbsp;08&nbsp;18&nbsp;00">07&nbsp;44&nbsp;08&nbsp;18&nbsp;00</a><span
+                        class="small regular"> ou </span><a class="bold underline"
+                        href="https://wa.me/+33644645252">WhatsApp</a></li>
+                  </ul>
+
+                  <ul class="list-unstyled">
+                    <li class="body-3 bold mb-0 c-gray-400 d-flex justify-content-between"><span>Lun. à Ven.</span><span
+                        class="regular">08h à 20h</span></li>
+                    <li class="body-3 bold mb-0 c-gray-400 d-flex justify-content-between"><span>Sam.</span><span
+                        class="regular">08h à 21h</span></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <div class="container footer-content pb-4">
+        <div class="bitbag-block">
+          <div class="d-flex flex-column-reverse flex-lg-row justify-content-between align-items-lg-center py-4">
+            <div><a class="regular body-3 c-gray-400 d-block d-lg-inline-block mb-3 mb-lg-0"
+                href="/legal/mentions-legales">Mentions légales</a> <a
+                class="regular body-3 c-gray-400 d-block d-lg-inline-block mb-3 mb-lg-0"
+                href="/legal/conditions-de-vente">Conditions générales de vente</a>&nbsp;<a
+                class="regular body-3 c-gray-400 d-block d-lg-inline-block mb-3 mb-lg-0"
+                href="/legal/politique-de-confidentialite">Politique de confidentialité</a></div>
+
+            <div class="social mb-4 mb-lg-0">&nbsp;</div>
+          </div>
+
+          <div>
+            <div class="bitbag-block">
+              <hr class="mb-4">
+              <div class="d-flex gap-4 flex-column flex-md-row align-items-center">
+                <div class="order-2 order-md-1">
+                  <img class="img-fluid" loading="lazy" decoding="async"
+                    src="/build/quitoque/theme/images/breathalyzer-v2.d90377e8.jpg" alt="logo république française">
+                </div>
+                <div class="order-1 order-md-2">
+                  <p class="c-gray-400 text-center mb-2 regular text-uppercase">L'abus d'alcool est dangereux pour la
+                    santé, à consommer avec modération</p>
+                  <img class="img-fluid d-md-none mx-auto d-block" loading="lazy" decoding="async"
+                    src="/build/quitoque/theme/images/gouv-fr-small.91d004e5.jpg" alt="logo république française">
+                  <img class="img-fluid d-md-down-none" loading="lazy" decoding="async"
+                    src="/build/quitoque/theme/images/gouv-rf-v2.b3eaf626.jpg" alt="logo république française">
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+
+
+    </footer>
+
+
+
+
+    <div class="modal fade" id="modal-contact" tabindex="-1" aria-labelledby="modal-contact-label" aria-hidden="true"
+      data-controller="contact" data-contact-target-name-value="contact-form"
+      data-contact-title-target-name-value="title" data-contact-need-reload-value="true">
+      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header text-center d-block">
+            <div id="modal-contact-label" class="modal-title text-center">
+              <div data-megaturbo-target="title" data-megaturbo-source="title">
+                <h2 class="title-2">Une question ?</h2>
+                <h3 class="title-3 c-orange">Notre équipe du service client est à votre écoute pour toutes vos questions
+                  ou réclamations.</h3>
+              </div>
+
+            </div>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body" id="modal-contact-body">
+            <form name="sylius_contact" method="post" action="/ajax/contact/" novalidate="novalidate"
+              data-action="contact#submitFormFromEvent" data-contact-target="form" data-megaturbo-target="contact-form"
+              data-megaturbo-source="contact-form">
+              <div class="container">
+                <div class="row">
+                  <div class="col-12 col-md-6 mb-3">
+                    <div class="required field"><label for="sylius_contact_firstname"
+                        class="required">Prénom</label><input type="text" id="sylius_contact_firstname"
+                        name="sylius_contact[firstname]" required="required">
+                      <div class="system-message d-none"></div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-6 mb-3">
+                    <div class="required field"><label for="sylius_contact_lastname" class="required">Nom</label><input
+                        type="text" id="sylius_contact_lastname" name="sylius_contact[lastname]" required="required">
+                      <div class="system-message d-none"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-12 col-md-6 mb-3">
+                    <div class="required field"><label for="sylius_contact_email" class="required">Mon
+                        email</label><input type="email" id="sylius_contact_email" name="sylius_contact[email]"
+                        required="required">
+                      <div class="system-message d-none"></div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-6 mb-3">
+                    <div class="required field"><label for="sylius_contact_askChoice" class="required">Motif de la
+                        demande</label><select id="sylius_contact_askChoice" name="sylius_contact[askChoice]"
+                        required="required" class=" ui dropdown">
+                        <option value="" selected="selected">Choisissez un motif</option>
+                        <option value="Question(s) sur l'offre Quitoque">Question(s) sur l'offre Quitoque</option>
+                        <option value="Difficulté lors de votre inscription ?">Difficulté lors de votre inscription ?
+                        </option>
+                        <option value="Code / Parrainage / Carte cadeau ?">Code / Parrainage / Carte cadeau ?</option>
+                        <option value="Gérer mon compte Quitoque ?">Gérer mon compte Quitoque ?</option>
+                        <option value="Problème avec votre livraison ?">Problème avec votre livraison ?</option>
+                        <option value="Souci avec les produits reçus dans mon panier ?">Souci avec les produits reçus
+                          dans mon panier ?</option>
+                        <option value="Comment résilier mon compte ?">Comment résilier mon compte ?</option>
+                        <option value="Autres">Autres</option>
+                      </select>
+                      <div class="system-message d-none"></div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div class="required field"><label for="sylius_contact_message"
+                      class="required">Message</label><textarea id="sylius_contact_message"
+                      name="sylius_contact[message]" required="required"></textarea>
+                    <div class="system-message d-none"></div>
+                  </div>
+                </div>
+              </div>
+
+
+
+
+              <input type="hidden" id="sylius_contact__token" name="sylius_contact[_token]"
+                value="46e60524912d26744581.E2dL0v3ZnDRzdlC3zIGM7eB2p6mlUPGCrWbp-4It8vM.WAs9grTtqU0XGSX2mu7kiJcO_v71Gr_TxgOjgbQZgpIhCSCAzq-uWhskJw">
+              <div class="text-center my-3">
+                <button type="submit" data-action="contact#submitForm"
+                  class="button primary small mx-auto">Envoyer</button>
+              </div>
+            </form>
+
+            <p class="footer mt-3" data-contact-target="legals">
+              Vos informations sont destinées à Quitoque aux fins de traiter votre demande. Pour exercer vos droits
+              auprès de Quitoque, écrivez à l’adresse électronique <a href="mailto:service.client@quitoque.fr"
+                class="link link-green">service.client@quitoque.fr</a>
+              ou à l’adresse postale Quitoque, 131 avenue de Choisy, 75013 Paris - France. Pour en savoir plus sur le
+              traitement de vos données personnelles par notre société et sur vos droits, consultez notre <a
+                href="/legal/politique-de-confidentialite" target="_blank"
+                class="link link-green text-lowercase">Politique de confidentialité</a>
+              .
+            </p>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+
+
+    <div data-controller="newsletter" data-newsletter-display-modal-value="true">
+      <div class="modal no-loading fade" id="modal-newsletter" tabindex="-1" aria-labelledby="modal-newsletter-label"
+        aria-hidden="true" role="dialog" data-bs-backdrop="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+          <div class="modal-content">
+            <div class="modal-header text-center d-block p-0">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0" id="modal-newsletter-body">
+              <div class="content">
+                <div class="d-flex gap-4">
+                  <div class="image d-lg-down-none"
+                    style="background: url(/build/quitoque/theme/images/newsletter-side.b5706736.jpeg) center / cover no-repeat, lightgray 50% / cover no-repeat;">
+                  </div>
+                  <div class="d-flex flex-column gap-4">
+                    <div>
+                      <h3 class="title-2">10€ offerts en vous inscrivant à la newsletter !</h3>
+                      <p class="body-2 regular mb-0">Inscrivez-vous à notre newsletter pour recevoir des idées de
+                        recettes et découvrir nos menus tout en bénéficiant d'offres exclusives !<br>Vous recevrez 10€
+                        de remise* à utiliser sur votre 1ère commande !</p>
+                    </div>
+                    <div data-controller="newsletter" data-contact-target-name-value="newsletter-form"
+                      data-newsletter-token-id-value="newsletter_subscription"
+                      data-newsletter-token-url-value="/ajax/generate-csrf-token">
+                      <form name="newsletter_subscription" method="post" action="/newsletter/subscription/"
+                        data-action="newsletter#submitFormFromEvent" data-newsletter-target="form">
+                        <div class="position-relative">
+                          <div><label for="newsletter_subscription_email" class="required">Email</label><input
+                              type="email" id="newsletter_subscription_email" name="newsletter_subscription[email]"
+                              required="required" placeholder="Votre email"></div>
+                          <button type="submit" id="newsletter_subscription_submit"
+                            name="newsletter_subscription[submit]" class="button primary">S'inscrire</button>
+                        </div>
+                        <input type="hidden" id="newsletter_subscription_userOriginCategory"
+                          name="newsletter_subscription[userOriginCategory]" value="Subscription_site"><input
+                          type="hidden" id="newsletter_subscription__token" name="newsletter_subscription[_token]"
+                          value="f3aa271d4516c79cab7c56d23c07d908.H-jaquP4bZp39VCkjKJBK2ohratw4uv02G6BgZccIok.coyxy4nIPPw1vD_NzZAKbDB33_QDrYe-6gHL6toqbPhIr5XGkcAA9DKGFQ">
+                      </form>
+                    </div>
+
+                    <div class="body-4 regular c-gray-400" data-controller="collapse"
+                      data-collapse-item-selector-value="p" data-collapse-item-to-display-value="1"
+                      data-collapse-target="parent">
+                      <p class="mb-0">En cliquant, vous reconnaissez avoir pris connaissance de la <a
+                          href="/legal/politique-de-confidentialite">politique de confidentialité</a> et acceptez de
+                        recevoir les communications de Quitoque.</p>
+                      <p class="mb-0 d-none">Vous pouvez à tout moment vous désinscrire.</p>
+                      <p class="mb-0 d-none">*Offre non cumulable avec d'autres offres et réservée aux nouveaux clients
+                        Quitoque</p>
+                      <div class="see-more text-center cursor-pointer" data-action="click->collapse#show"
+                        data-collapse-hide-param="true">
+                        <span class="body-4 underline">Voir plus</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+
+
+    <div class="modal no-loading fade" id="modal-default" tabindex="-1" aria-labelledby="modal-default-label"
+      aria-hidden="true" role="dialog" data-bs-backdrop="true">
+      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header text-center d-block">
+            <div id="modal-default-label" class="modal-title text-center">
+              <h2 class="title-2"></h2>
+
+            </div>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body p-0" id="modal-default-body">
+            <div class="content"></div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="offcanvas offcanvas-start" tabindex="-1" id="left-panel" aria-labelledby="left-panel-label">
+      <button type="button" class="close" data-bs-dismiss="offcanvas">
+        <i class="icon cross-black"></i>
+      </button>
+      <div class="offcanvas-body p-0">
+        <div class="w-100 h-100 d-flex align-items-center justify-content-center">
+          <div class="spinner-border" role="status" style="width: 5rem; height: 5rem;">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="right-panel" aria-labelledby="right-panel-label">
+      <div class="offcanvas-close d-none">
+        <button type="button" class="close" data-bs-dismiss="offcanvas" aria-label="Close">
+          <i class="icon cross-white d-md-down-none"></i>
+          <i class="icon cross-black d-lg-none"></i>
+        </button>
+      </div>
+
+      <div class="offcanvas-body"></div>
+
+      <div class="offcanvas-footer"></div>
+    </div>
+    <div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="bottom-panel" aria-labelledby="bottom-panel-label">
+      <div class="offcanvas-header">
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <p class="offcanvas-title body-2 bold" id="offcanvas-label"></p>
+        <div class="offcanvas-action" id="offcanvas-action">
+        </div>
+      </div>
+      <div class="offcanvas-body"></div>
+      <div class="offcanvas-footer"></div>
+    </div>
+  </div>
+
+  <script src="/build/quitoque/theme/default.c41cb824.js"></script>
+
+
+
+
+
+  <script src="/build/quitoque/seo/seo.1688a117.js"></script>
+
+
+
+  <script src="/build/quitoque/cms-shop/cms-shop.08afd245.js"></script>
+
+  <script src="/build/quitoque/product/product.24c9b76c.js"></script>
+
+  <script src="/build/quitoque/order/order.a1817808.js"></script>
+
+  <script src="/build/quitoque/subscription/subscription.dcfc18d7.js"></script>
+
+  <script src="/build/quitoque/shipping/shipping.24ce86a7.js"></script>
+
+  <script src="/build/quitoque/promotion/promotion.57cb0f83.js"></script>
+
+  <script src="/build/quitoque/adyen/adyen.b50a51d1.js"></script>
+
+
+  <div class="ui small basic modal" id="confirmation-modal">
+    <div class="ui icon header">
+      <i class="warning sign icon"></i>
+      Confirmez votre action
+    </div>
+    <div class="content">
+      <p>Êtes-vous sûr de vouloir effectuer cette action ?</p>
+    </div>
+    <div class="actions">
+      <div class="ui red basic cancel inverted button">
+        <i class="remove icon"></i>
+        Non
+      </div>
+      <div class="ui green ok inverted button" id="confirmation-button">
+        <i class="checkmark icon"></i>
+        Oui
+      </div>
+    </div>
+  </div>
+
+
+  <script defer=""
+    src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015"
+    integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ=="
+    data-cf-beacon="{&quot;rayId&quot;:&quot;8a4961ab1e8901fb&quot;,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfL4&quot;:true}},&quot;version&quot;:&quot;2024.7.0&quot;,&quot;token&quot;:&quot;a5c7159f40aa4906816c1239765d5e1d&quot;}"
+    crossorigin="anonymous"></script>
+
+
+</body>
+
+</html>
\ No newline at end of file