{"id":135,"date":"2026-08-22T14:26:11","date_gmt":"2026-08-22T14:26:11","guid":{"rendered":"https:\/\/www.mapartisserie.fr\/?page_id=135"},"modified":"2026-09-08T21:47:52","modified_gmt":"2026-09-08T21:47:52","slug":"formules","status":"publish","type":"page","link":"https:\/\/www.mapartisserie.fr\/index.php\/formules\/","title":{"rendered":"FORMULES"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center has-custom-titres-kaki-pistache-color has-text-color has-link-color wp-elements-1\">Les Formules Focaccia<\/h2>\n\n\n\n<p class=\"has-text-align-center has-custom-texte-beige-color has-text-color has-link-color has-superbfont-medium-font-size wp-elements-2 wp-block-paragraph\"><em>S\u00e9lectionnez votre focaccia, puis compl\u00e9tez la avec une boisson et un dessert<\/em><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<p><!-- CAROUSEL FOCACCIA AVEC LIGHTBOX --><\/p>\n\n\n<div class=\"focaccia-carousel-wrapper\">\n  <style>\n    .focaccia-carousel-wrapper {\n      margin: 0 auto 40px;\n      max-width: 100%;\n      position: relative;\n    }\n    \n    .carousel-container {\n      position: relative;\n      max-width: 500px;\n      margin: 0 auto;\n      overflow: hidden;\n      border-radius: 12px;\n    }\n    \n    .carousel-inner {\n      display: flex;\n      transition: transform 0.5s ease-in-out;\n    }\n    \n    .carousel-item {\n      flex: 0 0 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n    \n    .carousel-item img {\n      width: 100%;\n      height: auto;\n      max-height: 400px;\n      object-fit: cover;\n      border-radius: 12px 12px 0 0;\n      cursor: pointer;\n      transition: opacity 0.3s ease;\n    }\n    \n    .carousel-item img:hover {\n      opacity: 0.9;\n    }\n    \n    .carousel-content {\n      background: #fffaf3;\n      width: 100%;\n      padding: 20px;\n      text-align: center;\n      border-radius: 0 0 12px 12px;\n      box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    \n    .carousel-content h4 {\n      margin: 0 0 10px;\n      font-size: 1.3rem;\n      color: #6b4226;\n    }\n    \n    .carousel-content p {\n      margin: 0;\n      font-size: 1rem;\n      color: #888;\n      font-style: italic;\n    }\n    \n    .carousel-buttons {\n      display: flex;\n      justify-content: center;\n      gap: 15px;\n      margin-top: 20px;\n    }\n    \n    .carousel-btn {\n      background: #c9a876;\n      border: none;\n      color: white;\n      padding: 10px 20px;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 1rem;\n      transition: background 0.3s ease;\n    }\n    \n    .carousel-btn:hover {\n      background: #a8875f;\n    }\n    \n    .carousel-indicators {\n      text-align: center;\n      margin-top: 15px;\n      font-size: 0.9rem;\n      color: #888;\n    }\n    \n    \/* LIGHTBOX \/ MODAL *\/\n    .lightbox {\n      display: none;\n      position: fixed;\n      z-index: 9999;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.8);\n      animation: fadeIn 0.3s ease;\n    }\n    \n    .lightbox.active {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    .lightbox-content {\n      position: relative;\n      max-width: 90%;\n      max-height: 90%;\n      animation: zoomIn 0.3s ease;\n    }\n    \n    .lightbox-content img {\n      width: 100%;\n      height: auto;\n      border-radius: 8px;\n      max-height: 85vh;\n      object-fit: contain;\n    }\n    \n    .lightbox-close {\n      position: absolute;\n      top: -40px;\n      right: 0;\n      color: white;\n      font-size: 2rem;\n      cursor: pointer;\n      font-weight: bold;\n      transition: color 0.3s ease;\n    }\n    \n    .lightbox-close:hover {\n      color: #c9a876;\n    }\n    \n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    \n    @keyframes zoomIn {\n      from { \n        transform: scale(0.8);\n        opacity: 0;\n      }\n      to { \n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  <\/style>\n  \n  <div class=\"carousel-container\">\n    <div class=\"carousel-inner\" id=\"carouselInner\">\n      \n      <!-- Focaccia 1 -->\n      <div class=\"carousel-item\">\n        <img decoding=\"async\" src=\"http:\/\/www.mapartisserie.fr\/wp-content\/uploads\/2026\/08\/formule_jambon-1024x683.jpg\" alt=\"La Traditionnelle\" class=\"carousel-image\" onclick=\"openLightbox(this)\"\/>\n        <div class=\"carousel-content\">\n          <h4>La Traditionnelle<\/h4>\n          <p>Jambon, parmesan &#038; pesto<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Focaccia 2 -->\n      <div class=\"carousel-item\">\n        <img decoding=\"async\" src=\"http:\/\/www.mapartisserie.fr\/wp-content\/uploads\/2026\/08\/formule_vegan-1024x683.jpg\" alt=\"La V\u00e9g\u00e9tale\" class=\"carousel-image\" onclick=\"openLightbox(this)\"\/>\n        <div class=\"carousel-content\">\n          <h4>La V\u00e9g\u00e9tale<\/h4>\n          <p>Houmous, courgette &#038; pesto<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Focaccia 3 -->\n      <div class=\"carousel-item\">\n        <img decoding=\"async\" src=\"http:\/\/www.mapartisserie.fr\/wp-content\/uploads\/2026\/08\/formule_moment-1024x683.jpg\" alt=\"La Focaccia du Chef\" class=\"carousel-image\" onclick=\"openLightbox(this)\"\/>\n        <div class=\"carousel-content\">\n          <h4>La Focaccia du Chef<\/h4>\n          <p>Focaccia du moment (variable)<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n  \n  <div class=\"carousel-buttons\">\n    <button class=\"carousel-btn\" onclick=\"prevSlide()\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n    <button class=\"carousel-btn\" onclick=\"nextSlide()\">Suivant \u2192<\/button>\n  <\/div>\n  \n  <div class=\"carousel-indicators\">\n    <span id=\"slideCounter\">1 \/ 3<\/span>\n  <\/div>\n\n<\/div>\n\n<!-- LIGHTBOX MODAL -->\n<div class=\"lightbox\" id=\"lightbox\" onclick=\"closeLightbox(event)\">\n  <div class=\"lightbox-content\">\n    <span class=\"lightbox-close\" onclick=\"closeLightbox()\">&times;<\/span>\n    <img decoding=\"async\" id=\"lightboxImage\" src=\"\" alt=\"\"\/>\n  <\/div>\n<\/div>\n\n<script>\nlet currentSlide = 0;\nconst slides = document.querySelectorAll('.carousel-item');\nconst totalSlides = slides.length;\nconst carouselInner = document.getElementById('carouselInner');\nconst slideWidth = 100;\n\nfunction updateCarousel() {\n  carouselInner.style.transform = `translateX(-${currentSlide * slideWidth}%)`;\n  document.getElementById('slideCounter').textContent = (currentSlide + 1) + ' \/ ' + totalSlides;\n}\n\nfunction nextSlide() {\n  currentSlide = (currentSlide + 1) % totalSlides;\n  updateCarousel();\n}\n\nfunction prevSlide() {\n  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;\n  updateCarousel();\n}\n\nfunction openLightbox(imgElement) {\n  const lightbox = document.getElementById('lightbox');\n  const lightboxImage = document.getElementById('lightboxImage');\n  lightboxImage.src = imgElement.src;\n  lightbox.classList.add('active');\n  document.body.style.overflow = 'hidden';\n}\n\nfunction closeLightbox(event) {\n  if (event && event.target.id !== 'lightbox') return;\n  const lightbox = document.getElementById('lightbox');\n  lightbox.classList.remove('active');\n  document.body.style.overflow = 'auto';\n}\n\n\/\/ Fermer la lightbox avec la touche Echap\ndocument.addEventListener('keydown', function(e) {\n  if (e.key === 'Escape') {\n    closeLightbox();\n  }\n});\n<\/script>\n<\/div>\n\n\n<p><!-- S\u00c9PARATEUR --><\/p>\n<p><!-- S\u00c9PARATEUR --><\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><!-- BOISSONS --><\/p>\n\n\n<div class=\"formule-options-section\">\n  <style>\n    .formule-options-section {\n      margin: 40px 0;\n    }\n    \n    .options-container {\n      max-width: 900px;\n      margin: 0 auto;\n    }\n    \n    .options-title {\n      text-align: center;\n      font-size: 1.5rem;\n      color: #6b4226;\n      margin-bottom: 25px;\n      font-weight: 600;\n    }\n    \n    .options-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n      gap: 15px;\n      padding: 0 20px;\n    }\n    \n    .option-card {\n      background: linear-gradient(135deg, #fffaf3 0%, #f5ede3 100%);\n      border: 2px solid #e8dcc8;\n      border-radius: 10px;\n      padding: 18px 15px;\n      text-align: center;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n    \n    .option-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: -100%;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n      transition: left 0.5s ease;\n    }\n    \n    .option-card:hover {\n      border-color: #c9a876;\n      box-shadow: 0 4px 15px rgba(201, 168, 118, 0.3);\n      transform: translateY(-3px);\n    }\n    \n    .option-card:hover::before {\n      left: 100%;\n    }\n    \n    .option-emoji {\n      font-size: 2rem;\n      margin-bottom: 8px;\n      display: block;\n    }\n    \n    .option-name {\n      font-size: 0.95rem;\n      color: #6b4226;\n      font-weight: 600;\n      line-height: 1.3;\n    }\n  <\/style>\n  \n  <!-- BOISSONS -->\n  <div class=\"options-container\">\n    <h3 class=\"options-title\"> Boissons au choix<\/h3>\n    <div class=\"options-grid\">\n      <div class=\"option-card\">\n        <div class=\"option-name\">Th\u00e9 glac\u00e9 maison<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Coca \/ Coca Zero<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Orangina<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Eau plate<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Eau p\u00e9tillante<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n<p><!-- S\u00c9PARATEUR --><\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><!-- DESSERTS --><\/p>\n\n\n<div class=\"formule-options-section\">\n  \n  <!-- DESSERTS -->\n  <div class=\"options-container\">\n    <h3 class=\"options-title\">Dessert au choix<\/h3>\n    <div class=\"options-grid\">\n      <div class=\"option-card\">\n        <div class=\"option-name\">Tiramisu<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Fondant au chocolat<\/div>\n      <\/div>\n      <div class=\"option-card\">\n        <div class=\"option-name\">Tartelette du moment<\/div>\n      <\/div>\n   <div class=\"option-card\">\n        <div class=\"option-name\">Cookie<\/div>\n  <\/div>\n\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les Formules Focaccia S\u00e9lectionnez votre focaccia, puis compl\u00e9tez la avec une boisson et un dessert La Traditionnelle Jambon, parmesan &#038; pesto La V\u00e9g\u00e9tale Houmous, courgette &#038; pesto La Focaccia du Chef Focaccia du moment (variable) \u2190 Pr\u00e9c\u00e9dent Suivant \u2192 1 \/ 3 &times; Boissons au choix Th\u00e9 glac\u00e9 maison Coca \/ Coca Zero Orangina Eau [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":120,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-135","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/pages\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":21,"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/pages\/135\/revisions"}],"predecessor-version":[{"id":665,"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/pages\/135\/revisions\/665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/media\/120"}],"wp:attachment":[{"href":"https:\/\/www.mapartisserie.fr\/index.php\/wp-json\/wp\/v2\/media?parent=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}