{"id":3475,"date":"2026-09-08T12:34:10","date_gmt":"2026-09-08T10:34:10","guid":{"rendered":"https:\/\/boutique.flutapa.fr\/index.php\/reservation\/"},"modified":"2026-09-21T10:38:41","modified_gmt":"2026-09-21T08:38:41","slug":"reservation","status":"publish","type":"page","link":"https:\/\/boutique.flutapa.fr\/index.php\/reservation\/","title":{"rendered":"R\u00e9servation"},"content":{"rendered":"\n<div class=\"wp-block-group has-base-2-background-color has-background is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-3f932ad8 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns has-base-2-background-color has-background is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<h1 class=\"wp-block-heading has-josefin-sans-font-family\" style=\"font-size:clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 5.191), 100px);font-style:italic;font-weight:700\">R\u00e9servation<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<style data-wp-block-html=\"css\">\n.flutapa-nav-btn{\n    text-align:center;\n    margin:35px 0;\n}\n\n.flutapa-nav-btn a{\n    display:inline-block;\n    padding:12px 26px;\n\n    font-family:'Inter',sans-serif;\n    font-size:16px;\n    font-weight:600;\n\n    color:#ffffff;\n    text-decoration:none;\n\n    background:#303030;\n\n    border:2px solid #303030;\n    border-radius:40px;\n\n    transition:all .25s ease;\n}\n\n.flutapa-nav-btn a:hover{\n    background:#fff3e6;\n    color:#303030;\n    transform:translateY(-2px);\n}\n<\/style>\n\n<div class=\"flutapa-nav-btn\">\n    <a href=\"https:\/\/www.flutapa.fr\/index.php\/les-ateliers\/\">\n        \u2190 Retour \u00e0 la pr\u00e9sentation des Ateliers\n<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center has-contrast-2-color has-text-color has-link-color has-large-font-size wp-elements-1 wp-block-paragraph\">Choisissez votre atelier et prenons Rendez-vous !<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-eb1ede72\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-accent-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-8d8e5b1f wp-block-columns-is-layout-flex\" style=\"margin-top:0;margin-bottom:0;padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group has-border-color has-contrast-3-border-color has-base-2-background-color has-background has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-6cf4ddc7 wp-block-group-is-layout-constrained\" style=\"border-width:4px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;padding-right:0;padding-left:0;box-shadow:var(--wp--preset--shadow--crisp)\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-9c2450d8 wp-block-group-is-layout-constrained\" style=\"padding-right:0px;padding-left:0px\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\">\n<p class=\"has-text-align-center has-xx-large-font-size wp-block-paragraph\">\u2139<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<h3 class=\"wp-block-heading has-text-align-center\">Bon \u00e0 savoir<\/h3>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--50)\">vous pouvez, pour chaque atelier au choix :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--60)\"><sub>\u2460<\/sub> participer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--60)\"> <sub>\u2461<\/sub> accueillir et participer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--60)\"><sub> \u2462<\/sub> accueillir sans participer<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-ba8330a1 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-48cec98c wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-right:0;padding-left:0;line-height:1\">\n<p class=\"has-text-align-right alignfull wp-block-paragraph\" style=\"padding-right:var(--wp--preset--spacing--60)\">(1) POUR INFO<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-49613cd2 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-4e43d21a wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-right:0;padding-left:400px\">\n<style data-wp-block-html=\"css\">\n.info-item {\n  position: relative;\n  width: fit-content;\n  margin: 8px auto;\n}\n\n.info-icone {\n  cursor: help;\n  margin-left: 6px;\n  font-size: 0.85em;\n}\n\n.info-bulle {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  z-index: 20;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 12px 15px;\n  border-radius: 8px;\n  background: #fff8f0;\n  color: #303030;\n  border: 1px solid #a67c52;\n  font-size: 14px;\n  line-height: 1.5;\n  text-align: left;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n}\n\n.info-icone:hover + .info-bulle,\n.info-icone:focus + .info-bulle {\n  visibility: visible;\n  opacity: 1;\n}\n\n.info-bulle p {\n  margin: 0 0 10px;\n}\n\n.info-bulle p:last-of-type {\n  margin-bottom: 12px;\n}\n\n.calcul-deplacement {\n  border-top: 1px solid #a67c52;\n  padding-top: 8px;\n}\n\n.calcul-deplacement div {\n  display: flex;\n  justify-content: space-between;\n  gap: 15px;\n  margin: 5px 0;\n}\n\n.calcul-deplacement div span {\n  text-align: right;\n  white-space: nowrap;\n}\n<\/style>\n\n<div class=\"info-item\">\n  Prix\n  <span class=\"info-icone\" tabindex=\"0\">\u24d8<\/span>\n\n  <span class=\"info-bulle\">\n\n    <strong>Prix de l\u2019atelier<\/strong>\n\n    <p>\n      Le prix indiqu\u00e9 est par personne et par s\u00e9ance.\n    <\/p>\n\n    <p>\n      Des frais de d\u00e9placement s\u2019ajoutent.\n    <\/p>\n\n    <p>\n      <strong>\n        Ils sont r\u00e9partis entre les participants.\n      <\/strong>\n    <\/p>\n\n    <p>\n      <strong>Cas particulier : l\u2019h\u00f4te<\/strong><br>\n      La personne qui accueille gratuitement l\u2019atelier chez elle\n      et y participe ne paie ni son atelier ni sa quote-part\n      des frais de d\u00e9placement.\n    <\/p>\n\n    <div class=\"calcul-deplacement\">\n\n      <p>\n        <strong>CALCUL<\/strong> (montant \u00e0 r\u00e9partir)\n      <\/p>\n\n      <div>\n        <strong>Jusqu\u2019\u00e0 5 km \u00e0 Baule<\/strong>\n        <span>Gratuit<\/span>\n      <\/div>\n\n      <div>\n        <strong>Au-del\u00e0<\/strong>\n        <span>Km aller\/retour \u00d7 0,665 \u20ac<\/span>\n      <\/div>\n\n    <\/div>\n\n    <p>\n      <strong>Pour les structures<\/strong><br>\n      Les modalit\u00e9s de prise en charge sont \u00e0 pr\u00e9ciser\n      selon le projet pr\u00e9sent\u00e9.\n    <\/p>\n\n  <\/span>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-b80dbddc wp-block-group-is-layout-constrained\" style=\"padding-right:0;padding-left:450px\">\n<style data-wp-block-html=\"css\">\n.info-item {\n  position: relative;\n  width: fit-content;\n  margin: 8px auto;\n}\n\n.info-icone {\n  cursor: help;\n  margin-left: 6px;\n  font-size: 0.85em;\n}\n\n.info-bulle {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  z-index: 20;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 12px 15px;\n  border-radius: 8px;\n  background: #fff8f0;\n  color: #303030;\n  border: 1px solid #a67c52;\n  font-size: 14px;\n  line-height: 1.5;\n  text-align: left;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n}\n\n.info-icone:hover + .info-bulle,\n.info-icone:focus + .info-bulle {\n  visibility: visible;\n  opacity: 1;\n}\n\n.info-bulle p {\n  margin: 0 0 10px;\n}\n\n.info-bulle p:last-of-type {\n  margin-bottom: 12px;\n}\n\n.calcul-deplacement {\n  border-top: 1px solid #a67c52;\n  padding-top: 8px;\n}\n\n.calcul-deplacement div {\n  display: flex;\n  justify-content: space-between;\n  gap: 15px;\n  margin: 5px 0;\n}\n\n.calcul-deplacement div span {\n  text-align: right;\n  white-space: nowrap;\n}\n<\/style>\n\n<div class=\"info-item\">\n  Annulation\n  <span class=\"info-icone\" tabindex=\"0\">\u24d8<\/span>\n  <span class=\"info-bulle\">\n    <strong>DESISTEMENT<\/strong>\n<p>de l&rsquo;<u>atelier Fl\u00fbt&rsquo; A Pa&rsquo;<\/u> ou du<u> lieu d&rsquo;accueil<\/u><\/p>\n<p>l&rsquo;atelier est <strong>report\u00e9<\/strong> en accord avec les participants<\/p>   \n<p><u>d&rsquo;un participant<\/u><\/p>\n<p><strong>\u00e0 moins de 48h ou absence<\/strong><\/p>\n<p>le montant de sa participation \u00e0 l&rsquo;atelier ainsi que sa part des frais de d\u00e9placement restent dus.<\/p>\n<p>l&rsquo;atelier peut \u00eatre maintenu ou report\u00e9 selon la situation.<\/p>\n<p>Les conditions compl\u00e8tes sont pr\u00e9cis\u00e9es dans les CGV<\/p>\n<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-5e5e0a10 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-right:0;padding-left:440px\">\n<style data-wp-block-html=\"css\">\n.info-item {\n  position: relative;\n  width: fit-content;\n  margin: 8px auto;\n}\n\n.info-icone {\n  cursor: help;\n  margin-left: 6px;\n  font-size: 0.85em;\n}\n\n.info-bulle {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  z-index: 20;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 12px 15px;\n  border-radius: 8px;\n  background: #fff8f0;\n  color: #303030;\n  border: 1px solid #a67c52;\n  font-size: 14px;\n  line-height: 1.5;\n  text-align: left;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n}\n\n.info-icone:hover + .info-bulle,\n.info-icone:focus + .info-bulle {\n  visibility: visible;\n  opacity: 1;\n}\n\n.info-bulle p {\n  margin: 0 0 10px;\n}\n\n.info-bulle p:last-of-type {\n  margin-bottom: 12px;\n}\n\n.calcul-deplacement {\n  border-top: 1px solid #a67c52;\n  padding-top: 8px;\n}\n\n.calcul-deplacement div {\n  display: flex;\n  justify-content: space-between;\n  gap: 15px;\n  margin: 5px 0;\n}\n\n.calcul-deplacement div span {\n  text-align: right;\n  white-space: nowrap;\n}\n<\/style>\n\n<div class=\"info-item\">\n  Paiement\n  <span class=\"info-icone\" tabindex=\"0\">\u24d8<\/span>\n<span class=\"info-bulle\">\n    Le r\u00e8glement est effectu\u00e9 le jour de l&rsquo;atelier.\n  <\/span>\n  \n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<p class=\"has-text-align-right has-xx-large-font-size wp-block-paragraph\"> \ud83d\udc40<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h2 class=\"wp-block-heading has-text-align-left alignfull\"><em>Les Ateliers disponibles<\/em> <\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-group has-border-color has-contrast-3-border-color has-base-2-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\" style=\"border-width:4px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;box-shadow:var(--wp--preset--shadow--crisp)\">\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-9c2450d8 wp-block-group-is-layout-constrained\" style=\"padding-right:0px;padding-left:0px\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center alignfull has-heading-font-family\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);font-style:italic;font-weight:700;text-transform:uppercase\"> \u00ab\u00a0D\u00e9couverte\u00a0\u00bb <\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Pap&rsquo; Xun <sup><strong>ou<\/strong> <\/sup>Pap&rsquo; Harmonia<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-2f23a51a wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left alignfull has-heading-font-family has-medium-font-size wp-block-paragraph\" style=\"padding-top:0;padding-right:0px;padding-bottom:0;padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>TARIF<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--40)\">atelier gratuit + frais de d\u00e9placement <sup>(1)<\/sup><\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>DUREE<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--40)\">2 heures environ<\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>PARTICIPANTS<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--40)\">de 2 \u00e0 4 personnes &#8211;  15 ans et plus<\/p>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\">\n<p class=\"wp-block-paragraph\">Pap&rsquo; Xun<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Pap' Xun\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:35%\">\n<p class=\"wp-block-paragraph\">Pap&rsquo; Harmonia<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:65%\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Pap'Harmonia\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:35%\">\n<div class=\"wp-block-group alignfull has-border-color has-contrast-3-border-color has-base-2-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-f5e9a77e wp-block-group-is-layout-constrained\" style=\"border-width:4px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;margin-top:0;padding-right:0;padding-left:0;box-shadow:var(--wp--preset--shadow--crisp)\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-9c2450d8 wp-block-group-is-layout-constrained\" style=\"padding-right:0px;padding-left:0px\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);text-transform:uppercase\"><strong><em> \u00ab\u00a0Parlons Musique\u00a0\u00bb <\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"> 5 s\u00e9ances minimum<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-188acd66 wp-block-column-is-layout-flow\" style=\"padding-right:0;padding-left:0;flex-basis:100%\">\n<h3 class=\"wp-block-heading has-text-align-center\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.417), 18px);text-transform:uppercase\"><strong>Causerie Musicale<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>TARIF<\/strong> <\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30);text-decoration:none\"><strong>en pr\u00e9sentiel<\/strong> 10 \u20ac la s\u00e9ance + frais de d\u00e9placement <sup>(1)<\/sup><\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30);text-decoration:none\"><strong>en visio<\/strong>               10 \u20ac la s\u00e9ance<\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>DUREE<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">1 heure par s\u00e9ance<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>PARTICIPANTS<\/strong><\/p>\n\n\n\n<ul style=\"padding-left:var(--wp--preset--spacing--40)\" class=\"wp-block-list is-style-checkmark-list has-small-font-size\">\n<li>de 5 \u00e0 7 personnes &#8211; 10 \u00e0 14 ans<\/li>\n\n\n\n<li>de 5 \u00e0 15 personnes &#8211; 15 et plus<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-14f3ad50 wp-block-columns-is-layout-flex\" style=\"padding-left:125px\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-left:var(--wp--preset--spacing--60)\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Causerie Musicale\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-default\"\/>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.417), 18px);line-height:1.5;text-transform:uppercase\"><strong>Une Histoire en Musique<\/strong><\/h3>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--10);text-decoration:underline\"><strong>TARIF<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">7\u20ac la s\u00e9ance  + frais de d\u00e9placement <sup>1<\/sup><\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>DUREE<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">1 heure par s\u00e9ance<\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--10);text-decoration:underline\"><strong>PARTICIPANTS<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">3 \u00e0 10 personnes &#8211; \u00e0 partir de 7 ans<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-6721cdd4 wp-block-group-is-layout-constrained\" style=\"padding-left:300px\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Une Histoire en Musique\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-c6aab7f7 wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group alignfull has-border-color has-contrast-3-border-color has-base-2-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-f5e9a77e wp-block-group-is-layout-constrained\" style=\"border-width:4px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;margin-top:0;padding-right:0;padding-left:0;box-shadow:var(--wp--preset--shadow--crisp)\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-9c2450d8 wp-block-group-is-layout-constrained\" style=\"padding-right:0px;padding-left:0px\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<h2 class=\"wp-block-heading has-text-align-center\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);text-transform:uppercase\"><em><strong>\u00ab\u00a0Les mains \u00e0 la p\u00e2te\u00a0\u00bb<\/strong><\/em><\/h2>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center alignfull wp-block-paragraph\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.417), 18px);text-transform:uppercase\"><strong>Pap&rsquo; Xun Soprano\/Alto<\/strong><\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>TARIF<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">35 \u20ac + frais de d\u00e9placement <sup>(1)<\/sup><\/p>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>DUREE<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">2 heures <\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>PARTICIPANTS<\/strong> <\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">3 \u00e0 6 personnes  &#8211; \u00e0 partir de 8 ans<\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">(les mineurs sont accompagn\u00e9s par un adulte)<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-7c455ca8 wp-block-group-is-layout-constrained\" style=\"padding-right:0;padding-left:250px\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Pap' Xun Soprano\/Alto\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-align-center alignfull\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.417), 18px);text-transform:uppercase\"><strong>Pap&rsquo; Xun T\u00e9nor<\/strong><\/h3>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>TARIF<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">70 \u20ac + frais de d\u00e9placement <sup>1<\/sup><\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>DUREE<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">2 heures environ<\/p>\n\n\n\n<p class=\"alignfull wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--20);text-decoration:underline\"><strong>PARTICIPANTS<\/strong><\/p>\n\n\n\n<p class=\"alignfull has-small-font-size wp-block-paragraph\" style=\"padding-left:var(--wp--preset--spacing--30)\">3 \u00e0 6 personnes &#8211; 15 ans et plus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-left:230px\">\n<style data-wp-block-html=\"css\">\n.bouton-reservation {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n}\n<\/style>\n\n<a href=\"#flutapa-reservation\" class=\"bouton-reserver\" data-atelier=\"Pap' Xun T\u00e9nor\">\n  \u2190 R\u00e9server cet atelier\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n#flutapa-reservation {\n  max-width: 760px;\n  margin: 45px auto;\n  font-family: Inter, sans-serif;\n  color: #303030;\n  box-sizing: border-box;\n}\n\n#flutapa-reservation *,\n#flutapa-reservation *::before,\n#flutapa-reservation *::after {\n  box-sizing: border-box;\n}\n\n\n\/* =========================\n   \u00c9TAPES\n========================= *\/\n\n.resa-step {\n  display: none;\n  background: #fff8f0;\n  border: 1px solid #a67c52;\n  border-radius: 14px;\n  padding: 28px;\n  margin-bottom: 20px;\n}\n\n.resa-step.active {\n  display: block;\n}\n\n.resa-step-inner {\n  width: 100%;\n}\n\n\n\/* =========================\n   TITRES\n========================= *\/\n\n.resa-step h2 {\n  margin: 0 0 24px;\n  font-family: Inter, sans-serif;\n  font-size: 25px;\n  line-height: 1.3;\n  color: #303030;\n}\n\n.resa-step p {\n  line-height: 1.6;\n}\n\n\n\/* =========================\n   CHOIX DES R\u00d4LES\n========================= *\/\n\n.resa-roles {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.resa-role-btn {\n  width: 100%;\n  padding: 20px 22px;\n  border: 1px solid #a67c52;\n  border-radius: 10px;\n  background: #fff8f0;\n  color: #303030;\n  text-align: left;\n  font-family: Inter, sans-serif;\n  cursor: pointer;\n  transition: 0.2s ease;\n}\n\n.resa-role-btn:hover {\n  background: #a67c52;\n  color: #fff8e0;\n}\n\n.resa-role-btn span {\n  display: block;\n  font-size: 16px;\n  font-weight: 700;\n  margin-bottom: 6px;\n}\n\n.resa-role-btn small {\n  display: block;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n\n\/* =========================\n   ATELIER CHOISI\n========================= *\/\n\n.resa-atelier-box {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  padding: 18px;\n  margin-bottom: 20px;\n  border: 1px solid #a67c52;\n  border-radius: 10px;\n  background: #fff3e6;\n}\n\n.resa-label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n#atelier-affiche {\n  display: block;\n  font-size: 18px;\n}\n\n#modifier-atelier {\n  flex-shrink: 0;\n  padding: 9px 14px;\n  border: 1px solid #a67c52;\n  border-radius: 7px;\n  background: transparent;\n  color: #303030;\n  font-family: Inter, sans-serif;\n  cursor: pointer;\n}\n\n#modifier-atelier:hover {\n  background: #a67c52;\n  color: #fff8e0;\n}\n\n\n\/* =========================\n   GRILLES\n========================= *\/\n\n.resa-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n.resa-field {\n  margin-bottom: 18px;\n}\n\n.resa-field-full {\n  width: 100%;\n}\n\n.resa-field label {\n  display: block;\n  margin-bottom: 7px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.resa-field input,\n.resa-field textarea {\n  width: 100%;\n  padding: 12px 13px;\n  border: 1px solid #b99b7d;\n  border-radius: 7px;\n  background: #fff;\n  color: #303030;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n}\n\n.resa-field textarea {\n  resize: vertical;\n  min-height: 100px;\n}\n\n.resa-field input:focus,\n.resa-field textarea:focus {\n  outline: none;\n  border-color: #a67c52;\n  box-shadow: 0 0 0 2px rgba(166, 124, 82, 0.15);\n}\n\n\n\/* =========================\n   CHAMP KM\n========================= *\/\n\n.resa-inline-field {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.resa-inline-field input {\n  max-width: 160px;\n}\n\n.resa-inline-field span {\n  font-weight: 600;\n}\n\n\n\/* =========================\n   BOUTONS CONTINUER\n========================= *\/\n\n.resa-bouton-suivant,\n#resa-submit {\n  display: inline-block;\n  margin-top: 8px;\n  padding: 12px 20px;\n  border: 1px solid #a67c52;\n  border-radius: 7px;\n  background: #a67c52;\n  color: #fff8e0;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: 0.2s ease;\n}\n\n.resa-bouton-suivant:hover,\n#resa-submit:hover {\n  background: #303030;\n  border-color: #303030;\n}\n\n\n\/* =========================\n   BOUTONS RETOUR\n========================= *\/\n\n.resa-bouton-retour {\n  display: inline-block;\n  margin-top: 12px;\n  margin-right: 10px;\n  padding: 11px 18px;\n  border: 1px solid #a67c52;\n  border-radius: 7px;\n  background: transparent;\n  color: #303030;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: 0.2s ease;\n}\n\n.resa-bouton-retour:hover {\n  background: #a67c52;\n  color: #fff8e0;\n}\n\n\n\/* =========================\n   CHOIX GROUPE\n========================= *\/\n\n.resa-choice-group {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.resa-choice {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 13px 15px;\n  border: 1px solid #b99b7d;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.resa-choice input {\n  margin: 0;\n}\n\n.resa-choice span {\n  line-height: 1.4;\n}\n\n\n\/* =========================\n   INFORMATIONS SUPPL\u00c9MENTAIRES\n========================= *\/\n\n.resa-extra {\n  display: none;\n  margin-top: 20px;\n}\n\n.resa-extra.active {\n  display: block;\n}\n\n\n\/* =========================\n   ERREURS\n========================= *\/\n\n.resa-erreur {\n  border-color: #b33a3a !important;\n  box-shadow: 0 0 0 2px rgba(179, 58, 58, 0.12) !important;\n}\n\n\n\/* =========================\n   ENVOI\n========================= *\/\n\n.resa-submit-box {\n  text-align: center;\n}\n\n.resa-message {\n  margin-top: 15px;\n}\n\n\n\/* =========================\n   RESPONSIVE\n========================= *\/\n\n@media (max-width: 600px) {\n\n  #flutapa-reservation {\n    margin: 25px auto;\n  }\n\n  .resa-step {\n    padding: 20px;\n  }\n\n  .resa-grid {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n\n  .resa-atelier-box {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  #modifier-atelier {\n    width: 100%;\n  }\n\n  .resa-bouton-suivant,\n  #resa-submit,\n  .resa-bouton-retour {\n    width: 100%;\n    margin-right: 0;\n  }\n\n}#resa-website {\n  position: absolute !important;\n  left: -9999px !important;\n  width: 1px !important;\n  height: 1px !important;\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\/* Formulaire de r\u00e9servation masqu\u00e9 au chargement *\/\n#flutapa-reservation {\n  display: none !important;\n}\n\n\/* =========================\n   CROIX FERMETURE R\u00c9SERVATION\n========================= *\/\n\n.resa-submit-box {\n  position: relative;\n}\n\n.resa-fermer {\n  display: none;\n  position: absolute;\n  top: 12px;\n  right: 16px;\n\n  width: 36px;\n  height: 36px;\n\n  border: none;\n  background: transparent;\n\n  color: #fff8e0;\n  font-size: 30px;\n  line-height: 1;\n\n  cursor: pointer;\n}\n\n.resa-fermer:hover {\n  opacity: 0.7;\n}\n\n.resa-fermer.visible {\n  display: block;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const reservation =\n    document.getElementById(\"flutapa-reservation\");\n\n  const form =\n    document.getElementById(\"flutapa-form\");\n\n  const roleInput =\n    document.getElementById(\"resa-role-value\");\n\n  const atelierAffiche =\n    document.getElementById(\"atelier-affiche\");\n\n  const modifierAtelier =\n    document.getElementById(\"modifier-atelier\");\n\n\n  \/* =========================\n     HISTORIQUE\n  ========================== *\/\n\n  let historiqueEtapes = [];\n\n\/* =========================\n   AFFICHAGE INITIAL\n========================= *\/\n\nif (reservation) {\n  reservation.style.display = \"none\";\n}\n\n\n  \/* =========================\n     GESTION DES \u00c9TAPES\n  ========================== *\/\n\n  function cacherToutesLesEtapes() {\n\n    reservation\n      .querySelectorAll(\".resa-step\")\n      .forEach(function (step) {\n\n        step.classList.remove(\"active\");\n\n      });\n  }\n\n\n  function afficherEtape(id) {\n\n    const etapeActuelle =\n      reservation.querySelector(\".resa-step.active\");\n\n    const etapeSuivante =\n      document.getElementById(id);\n\n    if (!etapeSuivante) {\n\n      console.warn(\n        \"\u00c9tape introuvable :\",\n        id\n      );\n\n      return;\n    }\n\n\n    if (\n      etapeActuelle &&\n      etapeActuelle.id !== id\n    ) {\n\n      historiqueEtapes.push(\n        etapeActuelle.id\n      );\n\n    }\n\n\n    cacherToutesLesEtapes();\n\n    etapeSuivante.classList.add(\"active\");\n\n\n    setTimeout(function () {\n\n      etapeSuivante.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"center\"\n      });\n\n    }, 100);\n  }\n\n\n  function afficherEtapeSansHistorique(id) {\n\n    cacherToutesLesEtapes();\n\n    const etape =\n      document.getElementById(id);\n\n    if (!etape) {\n\n      console.warn(\n        \"\u00c9tape introuvable :\",\n        id\n      );\n\n      return;\n    }\n\n\n    etape.classList.add(\"active\");\n\n\n    setTimeout(function () {\n\n      etape.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"center\"\n      });\n\n    }, 100);\n  }\n\n\n  \/* =========================\n     VALIDATION\n  ========================== *\/\n\nfunction validerEtape(id) {\n\n  const etape =\n    document.getElementById(id);\n\n  if (!etape) {\n    return true;\n  }\n\n\n  const champs =\n    etape.querySelectorAll(\n      \"input:not([type='radio']):not([type='hidden']), textarea, select\"\n    );\n\n\n  let valide = true;\n\n\n  champs.forEach(function (champ) {\n\n    champ.classList.remove(\n      \"resa-erreur\"\n    );\n\n\n    \/*\n     * Seuls les champs marqu\u00e9s required\n     * sont obligatoires.\n     *\/\n\n    if (\n      champ.required &&\n      champ.value.trim() === \"\"\n    ) {\n\n      champ.classList.add(\n        \"resa-erreur\"\n      );\n\n      valide = false;\n    }\n\n  });\n\n\n  if (!valide) {\n\n    const premierErreur =\n      etape.querySelector(\n        \".resa-erreur\"\n      );\n\n    if (premierErreur) {\n      premierErreur.focus();\n    }\n\n  }\n\n\n  return valide;\n}\n\n\n  \/* =========================\n     BOUTONS RETOUR\n  ========================== *\/\n\n  function ajouterBoutonsRetour() {\n\n    const etapes =\n      reservation.querySelectorAll(\n        \".resa-step\"\n      );\n\n\n    etapes.forEach(function (etape) {\n\n      if (\n        etape.id === \"resa-role\" ||\n        etape.id === \"resa-atelier\" ||\n        etape.id === \"resa-envoi\"\n      ) {\n        return;\n      }\n\n\n      if (\n        etape.querySelector(\n          \".resa-bouton-retour\"\n        )\n      ) {\n        return;\n      }\n\n\n      const bouton =\n        document.createElement(\n          \"button\"\n        );\n\n\n      bouton.type = \"button\";\n\n      bouton.className =\n        \"resa-bouton-retour\";\n\n      bouton.textContent =\n        \"\u2190 Retour\";\n\n\n      bouton.addEventListener(\n        \"click\",\n        function () {\n\n          if (\n            historiqueEtapes.length === 0\n          ) {\n            return;\n          }\n\n\n          const precedente =\n            historiqueEtapes.pop();\n\n\n          afficherEtapeSansHistorique(\n            precedente\n          );\n\n        }\n      );\n\n\n      const contenu =\n        etape.querySelector(\n          \".resa-step-inner\"\n        );\n\n\n      if (contenu) {\n        contenu.appendChild(\n          bouton\n        );\n      }\n\n    });\n  }\n\n\n  ajouterBoutonsRetour();\n\n  \/* =========================\n     \u00c9TAT INITIAL\n     Le formulaire est cach\u00e9,\n     mais la zone de r\u00e9servation reste accessible\n  ========================== *\/\n\n  cacherToutesLesEtapes();\n\n\n  \/* =========================\n     R\u00c9SERVER CET ATELIER\n  ========================== *\/\n\n  document.addEventListener(\n    \"click\",\n    function (event) {\n\n      const bouton =\n        event.target.closest(\n          \".bouton-reserve, .bouton-reserver\"\n        );\n\n\n      if (!bouton) {\n        return;\n      }\n\n\n      event.preventDefault();\n\n\n      const atelier =\n        bouton.getAttribute(\n          \"data-atelier\"\n        );\n\n\n      if (!atelier) {\n        return;\n      }\n\n\n      if (atelierAffiche) {\n\n        atelierAffiche.textContent =\n          atelier;\n\n      }\n\n\n      if (roleInput) {\n\n        roleInput.value = \"\";\n\n      }\n\n\n      historiqueEtapes = [];\n\n\n      if (reservation) {\n\n  reservation.style.setProperty(\n    \"display\",\n    \"block\",\n    \"important\"\n  );\n\n  afficherEtapeSansHistorique(\n    \"resa-atelier\"\n  );\n\n  setTimeout(function () {\n\n    reservation.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"start\"\n    });\n\n  }, 150);\n\n}\n\n    }\n  );\n\n  \/* =========================\n     CHOIX DU PARCOURS\n  ========================== *\/\n\n  document.addEventListener(\n    \"click\",\n    function (event) {\n\n      const boutonRole =\n        event.target.closest(\n          \".resa-role-btn\"\n        );\n\n\n      if (!boutonRole) {\n        return;\n      }\n\n\n      event.preventDefault();\n\n\n      const role =\n        boutonRole.getAttribute(\n          \"data-role\"\n        );\n\n\n      if (!role) {\n        return;\n      }\n\n\n      if (roleInput) {\n\n        roleInput.value =\n          role;\n\n      }\n\n\n      \/*\n       * PARTICIPANT\n       * \u2192 Atelier\n       *\/\n\n            if (role === \"participant\") {\n\n        \/*\n         * CAUSERIE MUSICALE\n         * \u2192 Choix pr\u00e9sentiel \/ visio\n         *\/\n\n        const atelierActuel =\n          atelierAffiche\n            ? atelierAffiche.textContent.trim().toLowerCase()\n            : \"\";\n\n        if (\n          atelierActuel.includes(\"causerie musicale\")\n        ) {\n\n          afficherEtape(\n            \"resa-mode-causerie\"\n          );\n\n          return;\n        }\n\n\n        \/*\n         * AUTRES ATELIERS\n         * \u2192 Coordonn\u00e9es directement\n         *\/\n\n        afficherEtape(\n          \"resa-coord-participant\"\n        );\n\n        return;\n      }\n\n\n      \/*\n       * H\u00d4TE\n       * \u2192 Information h\u00f4te\n       *\/\n\n      if (role === \"hote\") {\n\n        afficherEtape(\n          \"resa-info-hote\"\n        );\n\n        return;\n      }\n\n\n      \/*\n       * STRUCTURE\n       * \u2192 Coordonn\u00e9es\n       *\/\n\n      if (role === \"organisateur\") {\n\n        afficherEtape(\n          \"resa-coord-organisateur\"\n        );\n\n        return;\n      }\n\n    }\n  );\n\n  \/* =========================\n     MODE CAUSERIE MUSICALE\n  ========================== *\/\n\n  const modeCauserieInput =\n    document.getElementById(\n      \"resa-causerie-mode\"\n    );\n\n\n  document.addEventListener(\n    \"click\",\n    function (event) {\n\n      const boutonMode =\n        event.target.closest(\n          \".resa-mode-causerie\"\n        );\n\n\n      if (!boutonMode) {\n        return;\n      }\n\n\n      event.preventDefault();\n\n\n      const mode =\n        boutonMode.getAttribute(\n          \"data-mode\"\n        );\n\n\n      if (!mode) {\n        return;\n      }\n\n\n            if (modeCauserieInput) {\n\n        modeCauserieInput.value =\n          mode;\n\n      }\n\n\n      \/*\n       * GESTION DU D\u00c9PLACEMENT\n       *\n       * Causerie en visio :\n       * \u2192 aucun lieu de d\u00e9part n\u00e9cessaire\n       * \u2192 les champs de d\u00e9placement sont d\u00e9sactiv\u00e9s\n       *\n       * Causerie en pr\u00e9sentiel :\n       * \u2192 les champs de d\u00e9placement restent obligatoires\n       *\/\n\n      const blocDeplacement =\n        document.getElementById(\n          \"resa-deplacement\"\n        );\n\n\n      if (blocDeplacement) {\n\n        const champsDeplacement =\n          blocDeplacement.querySelectorAll(\n            \"input, select, textarea\"\n          );\n\n\n        champsDeplacement.forEach(\n          function (champ) {\n\n            champ.disabled =\n              mode === \"visio\";\n\n          }\n        );\n\n      }\n\n\n      afficherEtape(\n        \"resa-coord-participant\"\n      );\n    }\n  );\n\n  \/* =========================\n     INFORMATION H\u00d4TE\n     \u2192 ATELIER\n  ========================== *\/\n\n  const continuerInfoHote =\n    document.getElementById(\n      \"continuer-info-hote\"\n    );\n\n\n  if (continuerInfoHote) {\n\n    continuerInfoHote.addEventListener(\n      \"click\",\n      function () {\n\n        afficherEtape(\n          \"resa-coord-participant\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     ATELIER \u2192 SUITE\n  ========================== *\/\n\n  const continuerAtelier =\n    document.getElementById(\n      \"continuer-atelier\"\n    );\n\n\nif (continuerAtelier) {\n\n  continuerAtelier.addEventListener(\n    \"click\",\n    function () {\n\n      afficherEtape(\n        \"resa-role\"\n      );\n\n    }\n  );\n\n}\n\n\n  \/* =========================\n     COORDONN\u00c9ES PARTICIPANT \/ H\u00d4TE\n  ========================== *\/\n\n  const continuerParticipant =\n    document.getElementById(\n      \"continuer-participant\"\n    );\n\n\n  if (continuerParticipant) {\n\n    continuerParticipant.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-coord-participant\"\n          )\n        ) {\n          return;\n        }\n\n\n        const role =\n          roleInput\n            ? roleInput.value\n            : \"\";\n\n\n        \/*\n         * PARTICIPANT\n         *\/\n\n               if (role === \"participant\") {\n\n          const atelierActuel =\n            atelierAffiche\n              ? atelierAffiche.textContent.trim().toLowerCase()\n              : \"\";\n\n          const modeCauserie =\n            modeCauserieInput\n              ? modeCauserieInput.value\n              : \"\";\n\n\n          \/*\n           * CAUSERIE MUSICALE EN VISIO\n           * \u2192 pas de d\u00e9placement\n           *\/\n\n          if (\n            atelierActuel.includes(\"causerie musicale\") &&\n            modeCauserie === \"visio\"\n          ) {\n\n            afficherEtape(\n              \"resa-groupe\"\n            );\n\n            return;\n          }\n\n\n          \/*\n           * TOUS LES AUTRES CAS\n           * \u2192 d\u00e9placement\n           *\/\n\n          afficherEtape(\n            \"resa-deplacement\"\n          );\n\n          return;\n        }\n\n        \/*\n         * H\u00d4TE\n         *\/\n\n        if (role === \"hote\") {\n\n          afficherEtape(\n            \"resa-adresse-hote\"\n          );\n\n          return;\n        }\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     PARTICIPANT \u2192 D\u00c9PLACEMENT\n  ========================== *\/\n\n  const continuerDeplacement =\n    document.getElementById(\n      \"continuer-deplacement\"\n    );\n\n\n  if (continuerDeplacement) {\n\n    continuerDeplacement.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-deplacement\"\n          )\n        ) {\n          return;\n        }\n\n\n        afficherEtape(\n          \"resa-groupe\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     H\u00d4TE \u2192 ADRESSE\n  ========================== *\/\n\n  const continuerAdresseHote =\n    document.getElementById(\n      \"continuer-adresse-hote\"\n    );\n\n\n  if (continuerAdresseHote) {\n\n    continuerAdresseHote.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-adresse-hote\"\n          )\n        ) {\n          return;\n        }\n\n\n        afficherEtape(\n          \"resa-disponibilites\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     H\u00d4TE \u2192 DISPONIBILIT\u00c9S\n  ========================== *\/\n\n  const continuerDisponibilites =\n    document.getElementById(\n      \"continuer-disponibilites\"\n    );\n\n\n  if (continuerDisponibilites) {\n\n    continuerDisponibilites.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-disponibilites\"\n          )\n        ) {\n          return;\n        }\n\n\n        afficherEtape(\n          \"resa-groupe\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     GROUPE\n  ========================== *\/\n\n  document\n    .querySelectorAll(\n      'input[name=\"groupe\"]'\n    )\n    .forEach(function (radio) {\n\n      radio.addEventListener(\n        \"change\",\n        function () {\n\n          const connaissances =\n            document.getElementById(\n              \"resa-connaissances\"\n            );\n\n\n          if (\n            this.value === \"seul\"\n          ) {\n\n            if (connaissances) {\n\n              connaissances.classList.remove(\n                \"active\"\n              );\n\n            }\n\n\n            afficherEtape(\n              \"resa-envoi\"\n            );\n\n          }\n\n\n          if (\n            this.value === \"connaissances\"\n          ) {\n\n            if (connaissances) {\n\n              connaissances.classList.add(\n                \"active\"\n              );\n\n            }\n\n          }\n\n        }\n      );\n\n    });\n\n\n  \/* =========================\n     CONNAISSANCES\n  ========================== *\/\n\n  const continuerConnaissances =\n    document.getElementById(\n      \"continuer-connaissances\"\n    );\n\n\n  if (continuerConnaissances) {\n\n    continuerConnaissances.addEventListener(\n      \"click\",\n      function () {\n\n        const champ =\n          document.getElementById(\n            \"connaissances\"\n          );\n\n\n        if (\n          !champ ||\n          champ.value.trim() === \"\"\n        ) {\n\n          if (champ) {\n\n            champ.classList.add(\n              \"resa-erreur\"\n            );\n\n            champ.focus();\n\n          }\n\n          return;\n        }\n\n\n        champ.classList.remove(\n          \"resa-erreur\"\n        );\n\n\n        afficherEtape(\n          \"resa-envoi\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     STRUCTURE \u2192 PROJET\n  ========================== *\/\n\n  const continuerOrganisateur =\n    document.getElementById(\n      \"continuer-organisateur\"\n    );\n\n\n  if (continuerOrganisateur) {\n\n    continuerOrganisateur.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-coord-organisateur\"\n          )\n        ) {\n          return;\n        }\n\n\n        afficherEtape(\n          \"resa-projet-structure\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     PROJET STRUCTURE \u2192 ENVOI\n  ========================== *\/\n\n  const continuerProjetStructure =\n    document.getElementById(\n      \"continuer-projet-structure\"\n    );\n\n\n  if (continuerProjetStructure) {\n\n    continuerProjetStructure.addEventListener(\n      \"click\",\n      function () {\n\n        if (\n          !validerEtape(\n            \"resa-projet-structure\"\n          )\n        ) {\n          return;\n        }\n\n\n        afficherEtape(\n          \"resa-envoi\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================\n     MODIFIER L'ATELIER\n  ========================== *\/\n\n  if (modifierAtelier) {\n\n    modifierAtelier.addEventListener(\n      \"click\",\n      function () {\n\n        if (roleInput) {\n\n          roleInput.value = \"\";\n\n        }\n        \n        if (modeCauserieInput) { modeCauserieInput.value=\"\";\n}\n\n        historiqueEtapes = [];\n\n\n        afficherEtapeSansHistorique(\n          \"resa-role\"\n        );\n\n      }\n    );\n\n  }\n\n\n \/* =========================\n   ENVOI R\u00c9EL\n========================= *\/\n\nif (form) {\n\n  form.addEventListener(\"submit\", async function(event) {\n\n    event.preventDefault();\n\n    const bouton = document.getElementById(\"resa-submit\");\n    const message = document.getElementById(\"resa-message\");\n\nconst fermer =\n  document.getElementById(\n    \"resa-fermer\"\n  );\n\n    if (!bouton || !message) {\n      return;\n    }\n\n    \/* Atelier s\u00e9lectionn\u00e9 *\/\n    const atelier = atelierAffiche\n      ? atelierAffiche.textContent.trim()\n      : \"\";\n\n    \/* Pr\u00e9paration des donn\u00e9es *\/\n    const donnees = new FormData(form);\n\n    \/* Ajout de l'atelier *\/\n    donnees.set(\"atelier_nom\", atelier);\n\n    \/* Action WordPress *\/\n    donnees.set(\"action\", \"flutapa_reservation\");\n\n    \/* \u00c9tat du bouton *\/\n    bouton.disabled = true;\n    bouton.textContent = \"Envoi en cours\u2026\";\n\n    message.textContent = \"\";\n    message.className = \"resa-message\";\n\n    try {\n\n      const reponse = await fetch(\n        \"\/wp-admin\/admin-ajax.php\",\n        {\n          method: \"POST\",\n          body: donnees\n        }\n      );\n\n      const resultat = await reponse.json();\n\n      if (!resultat.success) {\n\n        throw new Error(\n          resultat.data && resultat.data.message\n            ? resultat.data.message\n            : \"Une erreur est survenue lors de l'envoi.\"\n        );\n\n      }\n\n      \/* Succ\u00e8s *\/\n\n      message.textContent =\n        resultat.data.message;\n\n      message.classList.add(\n        \"resa-message-succes\"\n      );\n\n      bouton.textContent =\n        \"Demande envoy\u00e9e\";\n\n      bouton.disabled = true;\n\n      if (fermer) {\n        fermer.classList.add(\"visible\");\n\nconsole.log(\n  \"CROIX :\",\n  fermer,\n  fermer ? fermer.className : \"bouton introuvable\"\n);\n      }\n\n    } catch (erreur) {\n\n      console.error(\n        \"Erreur d'envoi :\",\n        erreur\n      );\n\n      message.textContent =\n        erreur.message ||\n        \"Impossible d'envoyer votre demande. Merci de r\u00e9essayer.\";\n\n      message.classList.add(\n        \"resa-message-erreur\"\n      );\n\n      bouton.disabled = false;\n\n      bouton.textContent =\n        \"Envoyer ma demande\";\n\n    }\n\n  });\n\n}\n\n\/* =========================\n   FERMER APR\u00c8S ENVOI\n========================= *\/\n\nconst fermerReservation =\n  document.getElementById(\n    \"resa-fermer\"\n  );\n\n\nif (fermerReservation) {\n\n  fermerReservation.addEventListener(\n    \"click\",\n    function () {\n\n      \/*\n       * Masquer toute la r\u00e9servation\n       *\/\n\n      if (reservation) {\n\n        reservation.style.display =\n          \"none\";\n\n      }\n\n\n      \/*\n       * R\u00e9initialiser le formulaire\n       *\/\n\n      if (form) {\n        form.reset();\n      }\n\n\n      \/*\n       * R\u00e9initialiser les \u00e9tapes\n       *\/\n\n      historiqueEtapes = [];\n\n      cacherToutesLesEtapes();\n\n\n      \/*\n       * R\u00e9initialiser le message\n       *\/\n\n      const message =\n        document.getElementById(\n          \"resa-message\"\n        );\n\n      if (message) {\n\n        message.textContent = \"\";\n        message.className =\n          \"resa-message\";\n\n      }\n\n\n      \/*\n       * R\u00e9initialiser le bouton d'envoi\n       *\/\n\n      const bouton =\n        document.getElementById(\n          \"resa-submit\"\n        );\n\n      if (bouton) {\n\n        bouton.disabled = false;\n        bouton.textContent =\n          \"Envoyer ma demande\";\n\n      }\n\n\n      \/*\n       * Masquer la croix\n       *\/\n\n      fermerReservation.classList.remove(\n        \"visible\"\n      );\n\n    }\n  );\n\n}\n});\n<\/script>\n\n<div id=\"flutapa-reservation\">\n\n  <!-- =========================\n       CHOIX DU PARCOURS\n  ========================== -->\n\n  <section class=\"resa-step\" id=\"resa-role\">\n\n    <h2>Comment souhaitez-vous participer ?<\/h2>\n\n    <div class=\"resa-roles\">\n\n      <button type=\"button\" class=\"resa-role-btn\" data-role=\"participant\">\n        <span>JE PARTICIPE<\/span>\n        <small>Je souhaite participer \u00e0 un atelier.<\/small>\n      <\/button>\n\n      <button type=\"button\" class=\"resa-role-btn\" data-role=\"hote\">\n        <span>JE PARTICIPE ET JE SUIS H\u00d4TE<\/span>\n        <small>J&rsquo;accueille gratuitement l&rsquo;atelier chez moi et j&rsquo;y participe.<\/small>\n      <\/button>\n\n      <button type=\"button\" class=\"resa-role-btn\" data-role=\"organisateur\">\n        <span>JE REPR\u00c9SENTE UNE STRUCTURE<\/span>\n        <small>Je souhaite organiser un atelier dans le cadre d&rsquo;une structure.<\/small>\n      <\/button>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =========================\n       FORMULAIRE\n  ========================== -->\n\n  <form id=\"flutapa-form\" novalidate=\"\">\n\n<input type=\"text\" name=\"website\" id=\"resa-website\" value=\"\" autocomplete=\"off\" tabindex=\"-1\" aria-hidden=\"true\">\n\n    <input type=\"hidden\" id=\"resa-role-value\" name=\"role\">\n\n    <input type=\"hidden\" id=\"resa-causerie-mode\" name=\"causerie_mode\">\n\n    <!-- =========================\n         MODE CAUSERIE MUSICALE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-mode-causerie\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Comment souhaitez-vous participer ?<\/h2>\n\n        <p>\n          Pour la Causerie musicale, choisissez le mode qui vous convient.\n        <\/p>\n\n        <div class=\"resa-roles\">\n\n          <button type=\"button\" class=\"resa-mode-causerie\" data-mode=\"presentiel\">\n            <span>PR\u00c9SENTIEL<\/span>\n            <small>\n              La s\u00e9ance se d\u00e9roule en pr\u00e9sence des participants.\n            <\/small>\n          <\/button>\n\n          <button type=\"button\" class=\"resa-mode-causerie\" data-mode=\"visio\">\n            <span>VISIO<\/span>\n            <small>\n              La s\u00e9ance se d\u00e9roule \u00e0 distance en visioconf\u00e9rence.\n            <\/small>\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n    <!-- =========================\n         INFORMATION H\u00d4TE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-info-hote\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Devenir h\u00f4te<\/h2>\n\n        <p>\n          En accueillant l&rsquo;atelier chez vous, vous acceptez de recevoir\n          des personnes que vous ne connaissez pas n\u00e9cessairement et qui\n          ne font pas partie de votre entourage.\n        <\/p>\n\n        <p>\n          En contrepartie de cette mise \u00e0 disposition gratuite de votre\n          lieu, <strong>vous ne payez ni votre participation \u00e0 l&rsquo;atelier\n          ni votre quote-part des frais de d\u00e9placement.<\/strong>\n        <\/p>\n\n        <p>\n          Si ces conditions vous conviennent, vous pouvez poursuivre\n          votre r\u00e9servation.\n        <\/p>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-info-hote\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         ATELIER\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-atelier\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Atelier choisi<\/h2>\n\n        <div class=\"resa-atelier-box\">\n\n          <div>\n            <span class=\"resa-label\">Votre atelier<\/span>\n            <strong id=\"atelier-affiche\">\n              Aucun atelier s\u00e9lectionn\u00e9\n            <\/strong>\n          <\/div>\n\n          <button type=\"button\" id=\"modifier-atelier\">\n            \u2190 Modifier\n          <\/button>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-atelier\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         COORDONN\u00c9ES PARTICIPANT \/ H\u00d4TE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-coord-participant\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Vos coordonn\u00e9es<\/h2>\n\n        <div class=\"resa-grid\">\n\n          <div class=\"resa-field\">\n            <label for=\"participant-nom\">Nom *<\/label>\n            <input type=\"text\" id=\"participant-nom\" name=\"participant_nom\">\n          <\/div>\n\n          <div class=\"resa-field\">\n            <label for=\"participant-prenom\">Pr\u00e9nom *<\/label>\n            <input type=\"text\" id=\"participant-prenom\" name=\"participant_prenom\">\n          <\/div>\n\n          <div class=\"resa-field\">\n            <label for=\"participant-email\">Email *<\/label>\n            <input type=\"email\" id=\"participant-email\" name=\"participant_email\">\n          <\/div>\n\n          <div class=\"resa-field\">\n            <label for=\"participant-telephone\">T\u00e9l\u00e9phone *<\/label>\n            <input type=\"tel\" id=\"participant-telephone\" name=\"participant_telephone\">\n          <\/div>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-participant\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         D\u00c9PLACEMENT PARTICIPANT\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-deplacement\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Votre lieu de d\u00e9part<\/h2>\n\n        <div class=\"resa-grid\">\n\n          <div class=\"resa-field\">\n            <label for=\"participant-cp\">Code postal *<\/label>\n            <input type=\"text\" id=\"participant-cp\" name=\"participant_cp\" inputmode=\"numeric\">\n          <\/div>\n\n          <div class=\"resa-field\">\n            <label for=\"participant-ville\">Ville *<\/label>\n            <input type=\"text\" id=\"participant-ville\" name=\"participant_ville\">\n          <\/div>\n\n        <\/div>\n\n        <div class=\"resa-field resa-field-full\">\n\n          <label for=\"distance\">\n            J&rsquo;accepte de me d\u00e9placer jusqu&rsquo;\u00e0 *\n          <\/label>\n\n          <div class=\"resa-inline-field\">\n\n            <input type=\"number\" id=\"distance\" name=\"distance\" min=\"0\" step=\"1\">\n\n            <span>km<\/span>\n\n          <\/div>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-deplacement\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         ADRESSE H\u00d4TE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-adresse-hote\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Le lieu d&rsquo;accueil<\/h2>\n\n        <div class=\"resa-field resa-field-full\">\n\n          <label for=\"hote-adresse\">Adresse *<\/label>\n\n          <input type=\"text\" id=\"hote-adresse\" name=\"hote_adresse\">\n\n        <\/div>\n\n        <div class=\"resa-grid\">\n\n          <div class=\"resa-field\">\n\n            <label for=\"hote-cp\">Code postal *<\/label>\n\n            <input type=\"text\" id=\"hote-cp\" name=\"hote_cp\" inputmode=\"numeric\">\n\n          <\/div>\n\n          <div class=\"resa-field\">\n\n            <label for=\"hote-ville\">Ville *<\/label>\n\n            <input type=\"text\" id=\"hote-ville\" name=\"hote_ville\">\n\n          <\/div>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-adresse-hote\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         DISPONIBILIT\u00c9S H\u00d4TE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-disponibilites\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Disponibilit\u00e9s du lieu<\/h2>\n\n        <div class=\"resa-field resa-field-full\">\n\n          <label for=\"disponibilites\">\n            Dates et horaires auxquels le lieu est disponible *\n          <\/label>\n\n          <textarea id=\"disponibilites\" name=\"disponibilites\" rows=\"4\" placeholder=\"Ex. samedi 20 septembre matin, mercredi 24 septembre apr\u00e8s-midi...\"><\/textarea>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-disponibilites\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         GROUPE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-groupe\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>\u00cates-vous seul(e) pour cet atelier ?<\/h2>\n\n        <div class=\"resa-choice-group\">\n\n          <label class=\"resa-choice\">\n\n            <input type=\"radio\" name=\"groupe\" value=\"seul\">\n\n            <span>\n              Oui, je participe seul(e).\n            <\/span>\n\n          <\/label>\n\n          <label class=\"resa-choice\">\n\n            <input type=\"radio\" name=\"groupe\" value=\"connaissances\">\n\n            <span>\n              Non, j&rsquo;ai des connaissances int\u00e9ress\u00e9es.\n            <\/span>\n\n          <\/label>\n\n        <\/div>\n\n        <div id=\"resa-connaissances\" class=\"resa-extra\">\n\n          <label for=\"connaissances\">\n            Coordonn\u00e9es des personnes int\u00e9ress\u00e9es\n          <\/label>\n\n          <textarea id=\"connaissances\" name=\"connaissances\" rows=\"4\" placeholder=\"Nom, pr\u00e9nom, t\u00e9l\u00e9phone ou email...\"><\/textarea>\n\n          <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-connaissances\">\n            Continuer \u2192\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         COORDONN\u00c9ES STRUCTURE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-coord-organisateur\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Coordonn\u00e9es de la structure<\/h2>\n\n        <div class=\"resa-grid\">\n\n          <div class=\"resa-field resa-field-full\">\n\n            <label for=\"organisateur-structure\">\n              Nom de la structure *\n            <\/label>\n\n            <input type=\"text\" id=\"organisateur-structure\" name=\"organisateur_structure\">\n\n          <\/div>\n\n          <div class=\"resa-field\">\n\n            <label for=\"organisateur-nom\">\n              Nom *\n            <\/label>\n\n            <input type=\"text\" id=\"organisateur-nom\" name=\"organisateur_nom\">\n\n          <\/div>\n\n          <div class=\"resa-field\">\n\n            <label for=\"organisateur-prenom\">\n              Pr\u00e9nom *\n            <\/label>\n\n            <input type=\"text\" id=\"organisateur-prenom\" name=\"organisateur_prenom\">\n\n          <\/div>\n\n          <div class=\"resa-field\">\n\n            <label for=\"organisateur-email\">\n              Email *\n            <\/label>\n\n            <input type=\"email\" id=\"organisateur-email\" name=\"organisateur_email\">\n\n          <\/div>\n\n          <div class=\"resa-field\">\n\n            <label for=\"organisateur-telephone\">\n              T\u00e9l\u00e9phone *\n            <\/label>\n\n            <input type=\"tel\" id=\"organisateur-telephone\" name=\"organisateur_telephone\">\n\n          <\/div>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-organisateur\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         PROJET STRUCTURE\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-projet-structure\">\n\n      <div class=\"resa-step-inner\">\n\n        <h2>Votre projet<\/h2>\n\n        <p>\n          Expliquez-nous ce que vous souhaitez mettre en place :\n          lieu, groupe, public concern\u00e9, prise en charge de l&rsquo;atelier,\n          \u00e9ventuels frais li\u00e9s au lieu, disponibilit\u00e9s ou toute autre\n          information utile.\n        <\/p>\n\n        <div class=\"resa-field resa-field-full\">\n\n          <label for=\"projet-structure\">\n            Pr\u00e9sentez-nous votre projet *\n          <\/label>\n\n          <textarea id=\"projet-structure\" name=\"projet_structure\" rows=\"7\" placeholder=\"D\u00e9crivez votre projet...\"><\/textarea>\n\n        <\/div>\n\n        <button type=\"button\" class=\"resa-bouton-suivant\" id=\"continuer-projet-structure\">\n          Continuer \u2192\n        <\/button>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         ENVOI\n    ========================== -->\n\n    <section class=\"resa-step\" id=\"resa-envoi\">\n\n  <div class=\"resa-step-inner resa-submit-box\">\n\n    <button type=\"button\" id=\"resa-fermer\" class=\"resa-fermer\" aria-label=\"Fermer\">\n      \u00d7\n    <\/button>\n\n    <p>\n      Merci ! Vous pouvez maintenant envoyer votre demande de r\u00e9servation.\n    <\/p>\n\n    <button type=\"submit\" id=\"resa-submit\">\n      Envoyer ma demande\n    <\/button>\n\n    <p id=\"resa-message\" class=\"resa-message\"><\/p>\n\n  <\/div>\n\n<\/section>\n\n  <\/form>\n\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>R\u00e9servation \u2190 Retour \u00e0 la pr\u00e9sentation des Ateliers Choisissez votre atelier et prenons Rendez-vous ! \u2139 Bon \u00e0 savoir vous pouvez, pour chaque atelier au choix : \u2460 participer \u2461 accueillir et participer \u2462 accueillir sans participer (1) POUR INFO Prix \u24d8 Prix de l\u2019atelier Le prix indiqu\u00e9 est par personne et par s\u00e9ance. Des [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3475","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/pages\/3475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/comments?post=3475"}],"version-history":[{"count":68,"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/pages\/3475\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/pages\/3475\/revisions\/3575"}],"wp:attachment":[{"href":"https:\/\/boutique.flutapa.fr\/index.php\/wp-json\/wp\/v2\/media?parent=3475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}