var/cache/dev/twig/35/3524e38f2c3785bb776537ba87cea854.php line 39

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* Accueil/PageAccueil.html.twig */
  18. class __TwigTemplate_4df90662ceeaa9bae8bb3eefaa2fd99b extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->parent = false;
  34.         $this->blocks = [
  35.             'Footer' => [$this, 'block_Footer'],
  36.         ];
  37.     }
  39.     protected function doDisplay(array $context, array $blocks = []): iterable
  40.     {
  41.         $macros = $this->macros;
  42.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  43.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Accueil/PageAccueil.html.twig"));
  45.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  46.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Accueil/PageAccueil.html.twig"));
  48.         // line 1
  49.         yield "<!DOCTYPE html>
  50. <!--
  51. Template name: Nova
  52. Template author: FreeBootstrap.net
  53. Author website: https://freebootstrap.net/
  54. License: https://freebootstrap.net/license
  55. -->
  56. <html lang=\"fr\">
  57.   <head>
  58.     <meta charset=\"utf-8\">
  59.     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  60. <title>5sur5Séjour — Créer un séjour scolaire en ligne (données hébergées en France)</title>
  61. <meta name=\"description\" content=\"Partagez photos, vidéos et messages vocaux avec les familles. Gratuit pour les écoles publiques (hors option voix). Démo 15–30 min pour partenaires.\">
  63. <!-- Open Graph / Twitter -->
  64. <meta property=\"og:title\" content=\"Créer un séjour scolaire en ligne — 5sur5Séjour\">
  65. <meta property=\"og:description\" content=\"Plateforme familles & écoles. Données en France. Démo 15–30 min.\">
  66. <meta property=\"og:type\" content=\"website\">
  67. <meta property=\"og:url\" content=\"https://5sur5sejour.fr/\">
  68. <meta property=\"og:image\" content=\"https://5sur5sejour.fr/static/og/landing.jpg\">
  69. <meta name=\"twitter:card\" content=\"summary_large_image\">
  73. <!-- Robots -->
  74. <meta name=\"robots\" content=\"index,follow,max-image-preview:large\">
  76. <!-- Preload police/logo (si utilisés) -->
  77. <link rel=\"preload\" href=\"/assets/fonts/inter-var.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>
  78. <link rel=\"preload\" href=\"/static/og/creer-sejour.jpg\" as=\"image\">    <title>5sur5séjour - Plateforme de partage de photos, vidéos et messages vocaux</title>
  79.      
  80.     <!-- ======= Favicon =======-->
  81.     <link rel=\"icon\" type=\"image/png\" href=\"";
  82.         // line 33
  83.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon.png"), "html", null, true);
  84.         yield "\">
  85.     <link rel=\"apple-touch-icon\" href=\"";
  86.         // line 34
  87.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon.png"), "html", null, true);
  88.         yield "\">
  89.     <!-- End Favicon-->
  90.      
  91.     <!-- ======= Google Font =======-->
  92.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  93.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  94.     <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\" rel=\"stylesheet\">
  95.     <!-- End Google Font-->
  96.     
  97.     <!-- ======= Styles =======-->
  98.     <link href=\"";
  99.         // line 44
  100.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/bootstrap/bootstrap.min.css"), "html", null, true);
  101.         yield "\" rel=\"stylesheet\">
  102.     <link href=\"";
  103.         // line 45
  104.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/bootstrap-icons/font/bootstrap-icons.min.css"), "html", null, true);
  105.         yield "\" rel=\"stylesheet\">
  106.     <link href=\"";
  107.         // line 46
  108.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/glightbox/glightbox.min.css"), "html", null, true);
  109.         yield "\" rel=\"stylesheet\">
  110.     <link href=\"";
  111.         // line 47
  112.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/swiper/swiper-bundle.min.css"), "html", null, true);
  113.         yield "\" rel=\"stylesheet\">
  114.     <link href=\"";
  115.         // line 48
  116.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/aos/aos.css"), "html", null, true);
  117.         yield "\" rel=\"stylesheet\">
  118.     <!-- End Styles-->
  119.     
  120.     <!-- ======= Theme Style =======-->
  121.     <link href=\"";
  122.         // line 52
  123.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/css/style_nova.css"), "html", null, true);
  124.         yield "?v=";
  125.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatDate("now", "Y-m-d-H-i-s"), "html", null, true);
  126.         yield "\" rel=\"stylesheet\">
  127.     <!-- End Theme Style-->
  128.     <style>
  129.     /* Section padding */
  130. .py-6 { padding: 4rem 0; }
  132. /* Card style premium */
  133. .pricing-card {
  134.     background: #ffffff;
  135.     border-radius: 20px;
  136.     border: 1px solid #eef2f4;
  137.     transition: 0.25s;
  138. }
  140. .pricing-card:hover {
  141.     transform: translateY(-6px);
  142.     box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  143. }
  145. /* Highlight card */
  146. .pricing-card.highlight {
  147.     border: 2px solid #52c0b4;
  148.     background: #f4fdfb;
  149. }
  151. .highlight-text {
  152.     color: #1ea594;
  153.     font-weight: 800;
  154. }
  156. /* Prices */
  157. .amount {
  158.     font-size: 2.4rem;
  159.     font-weight: 700;
  160.     color: #1d2d35;
  161. }
  163. .subtitle {
  164.     font-size: 0.9rem;
  165. }
  167. /* Badges */
  168. .badge-5sur5 {
  169.     position: absolute;
  170.     top: -12px;
  171.     left: 50%;
  172.     transform: translateX(-50%);
  173.     background: #1ea594;
  174.     padding: 6px 14px;
  175.     border-radius: 30px;
  176.     color: #fff;
  177.     font-size: 0.75rem;
  178.     font-weight: 600;
  179. }
  181. /* Buttons - Styles personnalisés conservés pour les cartes de pricing */
  182. .btn-5sur5 {
  183.     background: #1ea594;
  184.     color: #fff;
  185.     border-radius: 30px;
  186.     padding: 12px 22px;
  187.     font-weight: 600;
  188. }
  190. .btn-5sur5:hover {
  191.     background: #178a7d;
  192.     color: #fff;
  193. }
  195. .btn-5sur5-highlight {
  196.     background: #169e8f;
  197.     color: #fff;
  198.     border-radius: 30px;
  199.     padding: 12px 22px;
  200.     font-weight: 600;
  201. }
  203. .btn-5sur5-highlight:hover {
  204.     background: #127d72;
  205.     color: #fff;
  206. }
  208. .btn-outline-5sur5 {
  209.     border: 2px solid #1ea594;
  210.     color: #1ea594;
  211.     border-radius: 30px;
  212.     padding: 12px 22px;
  213.     font-weight: 600;
  214. }
  216. .btn-outline-5sur5:hover {
  217.     background: #1ea594;
  218.     color: #fff;
  219. }
  221. /* Styles différenciés pour les boutons CTA */
  222. .cta-section .btn-outline-primary {
  223.     border: 2px solid #41a2aa;
  224.     color: #41a2aa;
  225.     background: transparent;
  226.     font-weight: 600;
  227.     transition: all 0.3s ease;
  228. }
  230. .cta-section .btn-outline-primary:hover {
  231.     background: #41a2aa;
  232.     color: #fff;
  233.     border-color: #41a2aa;
  234.     transform: translateY(-2px);
  235.     box-shadow: 0 4px 12px rgba(65, 162, 170, 0.3);
  236. }
  238. .cta-section .btn-secondary {
  239.     font-weight: 600;
  240.     transition: all 0.3s ease;
  241. }
  243. .cta-section .btn-secondary:hover {
  244.     background-color: #e67e4a !important;
  245.     border-color: #e67e4a !important;
  246.     transform: translateY(-2px);
  247.     box-shadow: 0 4px 12px rgba(240, 158, 122, 0.3);
  248. }
  250. .cta-section .btn-primary {
  251.     font-weight: 600;
  252.     transition: all 0.3s ease;
  253.     background-color: #41a2aa;
  254.     border-color: #41a2aa;
  255. }
  257. .cta-section .btn-primary:hover {
  258.     background-color: #358a92;
  259.     border-color: #358a92;
  260.     transform: translateY(-2px);
  261.     box-shadow: 0 4px 12px rgba(65, 162, 170, 0.3);
  262. }
  264.     
  265.     </style>
  267.     
  268.     <!-- ======= Apply theme =======-->
  269.     <script>
  270.       // Apply the theme as early as possible to avoid flicker
  271.       (function() {
  272.         const storedTheme = localStorage.getItem('theme') || 'light';
  273.         document.documentElement.setAttribute('data-bs-theme', storedTheme);
  274.       })();
  275.     </script>
  276.   </head>
  277.   <body>
  278.     
  279. <!-- MODALE -->
  280. <div class=\"modal fade\" id=\"demoModal\" tabindex=\"-1\" aria-hidden=\"true\">
  281.   <div class=\"modal-dialog modal-lg modal-dialog-centered\">
  282.     <div class=\"modal-content\">
  283.       <div class=\"modal-header\">
  284.         <h5 id=\"demoTitle\" class=\"modal-title\">Demander une démo guidée</h5>
  285.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  286.       </div>
  288.       <div class=\"modal-body\">
  289.         <ul class=\"nav nav-tabs\" id=\"demoTabs\" role=\"tablist\">
  290.           <li class=\"nav-item\" role=\"presentation\">
  291.             <button class=\"nav-link active\" id=\"tab-calendar\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-calendar\" type=\"button\" role=\"tab\">
  292.               Réserver un créneau
  293.             </button>
  294.           </li>
  295.           <li class=\"nav-item\" role=\"presentation\">
  296.             <button class=\"nav-link\" id=\"tab-callback\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-callback\" type=\"button\" role=\"tab\">
  297.               Être rappelé
  298.             </button>
  299.           </li>
  300.         </ul>
  302.         <div class=\"tab-content pt-3\">
  303.           <!-- Calendrier -->
  304.           <div class=\"tab-pane fade show active\" id=\"pane-calendar\" role=\"tabpanel\">
  305.             <div class=\"text-center mb-3\">
  306.               <h6 class=\"mb-2\">Réservez votre créneau de démonstration</h6>
  307.               <p class=\"text-muted small\">Choisissez un créneau qui vous convient pour une démo personnalisée</p>
  308.             </div>
  309.             <div class=\"ratio ratio-16x9 border rounded\">
  310.               <iframe src=\"https://calendly.com/5sur5sejour/demo\" title=\"Calendrier de réservation\" loading=\"lazy\" frameborder=\"0\"></iframe>
  311.             </div>
  312.             <p class=\"small text-muted mt-2 mb-0\">
  313.               <i class=\"bi bi-clock me-1\"></i> Créneau visio 15–30 min · 
  314.               <i class=\"bi bi-check-circle me-1\"></i> Confirmation instantanée ·
  315.               <i class=\"bi bi-shield-check me-1\"></i> 100% gratuit
  316.             </p>
  317.           </div>
  319.           <!-- Formulaire callback -->
  320.           <div class=\"tab-pane fade\" id=\"pane-callback\" role=\"tabpanel\">
  321.             <div class=\"text-center mb-3\">
  322.               <h6 class=\"mb-2\">Être rappelé par un expert</h6>
  323.               <p class=\"text-muted small\">Laissez-nous vos coordonnées et nous vous rappelons sous 24h</p>
  324.             </div>
  325.             <form id=\"contactForm\" class=\"needs-validation\" method=\"post\" action=\"";
  326.         // line 251
  327.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_contact");
  328.         yield "\" novalidate>
  329.               <input type=\"hidden\" name=\"topic\" id=\"topic\" value=\"demo\">
  330.               <input type=\"hidden\" name=\"pack\"  id=\"pack\"  value=\"\">
  331.               <input type=\"hidden\" name=\"objet\" id=\"objet\" value=\"demo\">
  332.               <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  334.               <div class=\"row g-3\">
  335.                 <div class=\"col-md-6\">
  336.                   <label class=\"form-label\">Nom & prénom</label>
  337.                   <input type=\"text\" class=\"form-control\" name=\"name\" required 
  338.                          placeholder=\"Votre nom complet\">
  339.                   <div class=\"invalid-feedback\">Veuillez saisir votre nom et prénom.</div>
  340.                 </div>
  341.                 <div class=\"col-md-6\">
  342.                   <label class=\"form-label\">Établissement</label>
  343.                   <input type=\"text\" class=\"form-control\" name=\"organization\" required 
  344.                          placeholder=\"Nom de votre établissement\">
  345.                   <div class=\"invalid-feedback\">Veuillez saisir le nom de votre établissement.</div>
  346.                 </div>
  347.                 <div class=\"col-md-6\">
  348.                   <label class=\"form-label\">Email pro</label>
  349.                   <input type=\"email\" class=\"form-control\" name=\"email\" required 
  350.                          placeholder=\"votre.email@etablissement.fr\">
  351.                   <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  352.                 </div>
  353.                 <div class=\"col-md-6\">
  354.                   <label class=\"form-label\">Téléphone</label>
  355.                   <input type=\"tel\" class=\"form-control\" name=\"telephone\" required 
  356.                          placeholder=\"06 12 34 56 78\" pattern=\"[0-9\\s\\+\\-\\(\\)]{10,}\">
  357.                   <div class=\"invalid-feedback\">Veuillez saisir un numéro de téléphone valide.</div>
  358.                 </div>
  359.                 <div class=\"col-md-6\">
  360.                   <label class=\"form-label\">Nb. de séjours / an</label>
  361.                   <select class=\"form-select\" name=\"sejours_count\" required>
  362.                     <option value=\"\" selected>Choisir…</option>
  363.                     <option value=\"1-3\">1–3</option>
  364.                     <option value=\"4-10\">4–10</option>
  365.                     <option value=\"11-30\">11–30</option>
  366.                     <option value=\"30+\">30+</option>
  367.                   </select>
  368.                   <div class=\"invalid-feedback\">Veuillez sélectionner le nombre de séjours.</div>
  369.                 </div>
  370.                 <div class=\"col-12\">
  371.                   <label class=\"form-label\">Message (optionnel)</label>
  372.                   <textarea class=\"form-control\" name=\"message\" rows=\"3\"
  373.                     placeholder=\"Décrivez brièvement vos besoins : type de séjours, nombre d'enfants, questions spécifiques...\"></textarea>
  374.                 </div>
  375.                 <div class=\"col-12\">
  376.                   <div class=\"form-check\">
  377.                     <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"consent\" name=\"consent\" required>
  378.                     <label class=\"form-check-label\" for=\"consent\">J'accepte d'être contacté (RGPD).</label>
  379.                     <div class=\"invalid-feedback\">Vous devez accepter d'être contacté pour continuer.</div>
  380.                   </div>
  381.                 </div>
  382.                 <div class=\"col-12 d-grid d-sm-flex gap-2\">
  383.                   <button id=\"submitBtn\" class=\"btn btn-primary px-4\" type=\"submit\">
  384.                     <i class=\"bi bi-telephone me-2\"></i>Être rappelé sous 24h
  385.                   </button>
  386.                   <a class=\"btn btn-outline-secondary px-4\" href=\"mailto:contact@5sur5sejour.fr\">
  387.                     <i class=\"bi bi-envelope me-2\"></i>Nous écrire
  388.                   </a>
  389.                 </div>
  390.               </div>
  392.               <p class=\"small text-muted mt-2 mb-0\">
  393.                 Si la structure ne prend pas en charge <strong>Parent Premium</strong>, les familles peuvent l'activer (2,90 € / parent / séjour) pour l'accès complet, boîte vocale illimitée incluse. <span class=\"text-primary-emphasis\">Recommandé : prise en charge par la structure.</span>
  394.               </p>
  395.             </form>
  396.           </div>
  397.         </div>
  398.       </div>
  400.       <div class=\"modal-footer\">
  401.         <p class=\"small text-muted mb-0\">Sans engagement · Données hébergées en France</p>
  402.       </div>
  403.     </div>
  404.   </div>
  405. </div>
  407. <!-- MODALE CRÉER MON SÉJOUR -->
  408. <div class=\"modal fade\" id=\"createSejourModal\" tabindex=\"-1\" aria-labelledby=\"createSejourTitle\" aria-hidden=\"true\">
  409.   <div class=\"modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable\">
  410.     <div class=\"modal-content\">
  411.       <div class=\"modal-header border-bottom-0\">
  412.         <div class=\"w-100\">
  413.           <h5 id=\"createSejourTitle\" class=\"modal-title mb-2\">Créer mon espace séjour</h5>
  414.           <div class=\"d-flex align-items-center gap-2\">
  415.             <span id=\"stepLabel\" class=\"badge bg-primary\">Étape 1/2</span>
  416.             <small class=\"text-muted\" id=\"stepDescription\">Choisissez votre profil</small>
  417.           </div>
  418.         </div>
  419.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  420.       </div>
  422.       <div class=\"modal-body px-4\">
  423.         <!-- ÉTAPE 1 : Choix du profil -->
  424.         <div id=\"step1\" class=\"step-content\">
  425.           <p class=\"lead text-center mb-4\">Sélectionnez l'option qui correspond à votre situation :</p>
  426.           
  427.           <div class=\"row g-3 mb-3\">
  428.             <!-- Création simple -->
  429.             <div class=\"col-md-4\">
  430.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"";
  431.         // line 353
  432.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_creation_simple_creer");
  433.         yield "\">
  434.                 <div class=\"card-body text-center p-4\">
  435.                   <div class=\"fs-1 mb-3\">✨</div>
  436.                   <h6 class=\"card-title fw-bold mb-2\">Créer un  espace séjour</h6>
  437.                   <p class=\"card-text small text-muted mb-3\">
  438.                     Créez un séjour unique. Paiement flexible : par les parents ou par la structure. Prix unique de 39€ par séjour.
  439.                   </p>
  440.                   <span class=\"badge bg-primary\">🎯 Flexible</span>
  441.                 </div>
  442.               </a>
  443.             </div>
  445.             <!-- Pack Annuel - 25 séjours -->
  446.  <div class=\"col-md-4\">
  447.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"";
  448.         // line 367
  449.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  450.         yield "\">
  451.                 <div class=\"card-body text-center p-4\">
  452.                   <div class=\"fs-1 mb-3\">📅</div>
  453.                   <h6 class=\"card-title fw-bold mb-2\">En moyenne 25 séjours par an</h6>
  454.                   <p class=\"card-text small text-muted mb-3\">
  455.                     Pack Annuel idéal pour les structures organisant plusieurs séjours. Jusqu'à 25 séjours inclus, accompagnateurs illimités, support premium.
  456.                   </p>
  457.                   <span class=\"badge bg-info\">💼 Pack Annuel</span>
  458.                 </div>
  459.               </a>
  460.             </div>
  462.             <!-- Plus de 25 séjours - Partenaire -->
  463.             <div class=\"col-md-4\">
  464.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"";
  465.         // line 381
  466.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("nosPartenaires");
  467.         yield "\">
  468.                 <div class=\"card-body text-center p-4\">
  469.                   <div class=\"fs-1 mb-3\">🚀</div>
  470.                   <h6 class=\"card-title fw-bold mb-2\">Plus de 25 séjours par an</h6>
  471.                   <p class=\"card-text small text-muted mb-3\">
  472.                     Devenez partenaire 5sur5 Séjour et bénéficiez d'une offre sur mesure avec tarif dégressif, accompagnement dédié et avantages exclusifs.
  473.                   </p>
  474.                   <span class=\"badge bg-purple\">🤝 Partenariat</span>
  475.                 </div>
  476.               </a>
  477.             </div>
  478.           </div>
  480.           <!-- École publique - Plus discret -->
  481.           <div class=\"text-center mt-4 pt-3 border-top\">
  482.             <p class=\"small text-muted mb-2\">Vous êtes une école publique ?</p>
  483.             <p class=\"small text-muted mb-2\">5sur5séjour offre son accès aux écoles publiques en France</p>
  484.             <a href=\"";
  485.         // line 398
  486.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_ecoles_publiques_creer");
  487.         yield "\" class=\"text-decoration-none d-inline-flex align-items-center gap-2 small fw-semibold text-primary\">
  488.               <span>Accès gratuit à la plateforme</span>
  489.               <span class=\"badge bg-success\">✅ Gratuit</span>
  490.               <i class=\"bi bi-arrow-right\"></i>
  491.             </a>
  492.           </div>
  493.         </div>
  495.         <!-- ÉTAPE 2 : Formulaires selon le profil -->
  496.         <div id=\"step2\" class=\"step-content d-none\">
  497.           <!-- Panneau Partenaire -->
  498.           <div id=\"pane-partenaire\" class=\"role-pane d-none\">
  499.             <div class=\"alert alert-info mb-4\">
  500.               <strong>🤝 Partenaire / Organisme</strong><br>
  501.               <small>Démo 15–30 min · Accompagnement contrat & onboarding.</small>
  502.             </div>
  504.             <ul class=\"nav nav-tabs mb-3\" id=\"partenaireTabsNav\" role=\"tablist\">
  505.               <li class=\"nav-item\" role=\"presentation\">
  506.                 <button class=\"nav-link active\" id=\"tab-partenaire-demo\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-partenaire-demo\" type=\"button\" role=\"tab\">
  507.                   Réserver une démo
  508.                 </button>
  509.               </li>
  510.               <li class=\"nav-item\" role=\"presentation\">
  511.                 <button class=\"nav-link\" id=\"tab-partenaire-callback\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-partenaire-callback\" type=\"button\" role=\"tab\">
  512.                   Être rappelé
  513.                 </button>
  514.               </li>
  515.             </ul>
  517.             <div class=\"tab-content\">
  518.               <!-- Calendly pour démo partenaire -->
  519.               <div class=\"tab-pane fade show active\" id=\"pane-partenaire-demo\" role=\"tabpanel\">
  520.                 <div class=\"text-center mb-3\">
  521.                   <p class=\"text-muted small mb-2\">Choisissez un créneau pour une démo personnalisée</p>
  522.                 </div>
  523.                 <div class=\"ratio ratio-16x9 border rounded\">
  524.                   <iframe data-src=\"https://calendly.com/5sur5sejour/demo\" title=\"Calendrier de réservation partenaire\" loading=\"lazy\" frameborder=\"0\"></iframe>
  525.                 </div>
  526.                 <p class=\"small text-muted mt-2 mb-0\">
  527.                   <i class=\"bi bi-clock me-1\"></i> Créneau visio 15–30 min · 
  528.                   <i class=\"bi bi-check-circle me-1\"></i> Accompagnement contrat ·
  529.                   <i class=\"bi bi-shield-check me-1\"></i> 100% gratuit
  530.                 </p>
  531.               </div>
  533.               <!-- Formulaire rappel partenaire -->
  534.               <div class=\"tab-pane fade\" id=\"pane-partenaire-callback\" role=\"tabpanel\">
  535.                 <form id=\"formPartenaire\" method=\"post\" action=\"/contact/partenaire\" class=\"needs-validation\" novalidate>
  536.                   <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  537.                   
  538.                   <div class=\"row g-3\">
  539.                     <div class=\"col-md-6\">
  540.                       <label class=\"form-label\">Nom & prénom <span class=\"text-danger\">*</span></label>
  541.                       <input type=\"text\" class=\"form-control\" name=\"name\" required 
  542.                              placeholder=\"Votre nom complet\">
  543.                       <div class=\"invalid-feedback\">Veuillez saisir votre nom et prénom.</div>
  544.                     </div>
  545.                     <div class=\"col-md-6\">
  546.                       <label class=\"form-label\">Structure <span class=\"text-danger\">*</span></label>
  547.                       <input type=\"text\" class=\"form-control\" name=\"organization\" required 
  548.                              placeholder=\"Nom de votre structure\">
  549.                       <div class=\"invalid-feedback\">Veuillez saisir le nom de votre structure.</div>
  550.                     </div>
  551.                     <div class=\"col-md-6\">
  552.                       <label class=\"form-label\">Email pro <span class=\"text-danger\">*</span></label>
  553.                       <input type=\"email\" class=\"form-control\" name=\"email\" required 
  554.                              placeholder=\"votre.email@structure.fr\">
  555.                       <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  556.                     </div>
  557.                     <div class=\"col-md-6\">
  558.                       <label class=\"form-label\">Téléphone (optionnel)</label>
  559.                       <input type=\"tel\" class=\"form-control\" name=\"telephone\" 
  560.                              placeholder=\"06 12 34 56 78\">
  561.                     </div>
  562.                     <div class=\"col-12\">
  563.                       <label class=\"form-label\">Message (optionnel)</label>
  564.                       <textarea class=\"form-control\" name=\"message\" rows=\"3\"
  565.                         placeholder=\"Décrivez brièvement vos besoins...\"></textarea>
  566.                     </div>
  567.                     <div class=\"col-12\">
  568.                       <div class=\"form-check\">
  569.                         <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"consent_partenaire\" name=\"consent\" required>
  570.                         <label class=\"form-check-label\" for=\"consent_partenaire\">
  571.                           J'accepte d'être contacté (RGPD) <span class=\"text-danger\">*</span>
  572.                         </label>
  573.                         <div class=\"invalid-feedback\">Vous devez accepter d'être contacté.</div>
  574.                       </div>
  575.                     </div>
  576.                     <div class=\"col-12 d-flex gap-2\">
  577.                       <button type=\"submit\" class=\"btn btn-primary px-4\">
  578.                         <i class=\"bi bi-telephone me-2\"></i>Être rappelé sous 24 h
  579.                       </button>
  580.                       <a class=\"btn btn-outline-secondary px-4\" href=\"mailto:contact@5sur5sejour.fr\">
  581.                         Nous écrire
  582.                       </a>
  583.                     </div>
  584.                   </div>
  585.                 </form>
  586.               </div>
  587.             </div>
  588.           </div>
  590.           <!-- Panneau Création simple -->
  591.           <div id=\"pane-autre\" class=\"role-pane d-none\">
  592.             <div class=\"alert alert-primary mb-4\">
  593.               <strong>✨ Créer un espace séjour</strong><br>
  594.               <small>Type PP (Partenaire Payant) - Les familles peuvent activer Parent Premium (2,90 € / parent / séjour).</small>
  595.             </div>
  597.             <form id=\"formAutre\" method=\"post\" action=\"/Accompagnateur/register\" class=\"needs-validation\" novalidate>
  598.               <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  599.               <input type=\"hidden\" name=\"type_user\" value=\"PP\">
  600.               <input type=\"hidden\" name=\"connpay\" value=\"1\">
  601.               
  602.               <div class=\"row g-3\">
  603.                 <div class=\"col-md-6\">
  604.                   <label class=\"form-label\">Nom <span class=\"text-danger\">*</span></label>
  605.                   <input type=\"text\" class=\"form-control\" name=\"nom_acc\" required 
  606.                          placeholder=\"Votre nom\">
  607.                   <div class=\"invalid-feedback\">Veuillez saisir votre nom.</div>
  608.                 </div>
  609.                 <div class=\"col-md-6\">
  610.                   <label class=\"form-label\">Prénom <span class=\"text-danger\">*</span></label>
  611.                   <input type=\"text\" class=\"form-control\" name=\"prenom_acc\" required 
  612.                          placeholder=\"Votre prénom\">
  613.                   <div class=\"invalid-feedback\">Veuillez saisir votre prénom.</div>
  614.                 </div>
  615.                 <div class=\"col-md-12\">
  616.                   <label class=\"form-label\">Fonction <span class=\"text-danger\">*</span></label>
  617.                   <select class=\"form-select\" name=\"fonction\" required>
  618.                     <option value=\"\">Choisir votre fonction</option>
  619.                     <option value=\"1\">Enseignant(e)</option>
  620.                     <option value=\"2\">Principal(e)</option>
  621.                     <option value=\"3\">Professeur(e)</option>
  622.                     <option value=\"4\">CPE</option>
  623.                     <option value=\"5\">Directeur(trice) d'école</option>
  624.                     <option value=\"6\">Animateur(trice)</option>
  625.                     <option value=\"7\">Directeur(trice) séjour</option>
  626.                     <option value=\"8\">Directeur(trice) centre de loisirs / ALSH</option>
  627.                     <option value=\"9\">Coordinateur(trice) enfance jeunesse</option>
  628.                     <option value=\"10\">Educateur(trice)</option>
  629.                     <option value=\"11\">Président(e)</option>
  630.                     <option value=\"12\">Autre</option>
  631.                   </select>
  632.                   <div class=\"invalid-feedback\">Veuillez sélectionner votre fonction.</div>
  633.                 </div>
  634.                 <div class=\"col-md-12\">
  635.                   <label class=\"form-label\">Structure / Organisme <span class=\"text-danger\">*</span></label>
  636.                   <input type=\"text\" class=\"form-control\" name=\"etablisment\" required 
  637.                          placeholder=\"Nom de votre structure ou organisation\">
  638.                   <div class=\"invalid-feedback\">Veuillez saisir le nom de votre structure.</div>
  639.                 </div>
  640.                 <div class=\"col-md-12\">
  641.                   <label class=\"form-label\">Adresse structure</label>
  642.                   <input type=\"text\" class=\"form-control\" name=\"adressetablisment\" 
  643.                          placeholder=\"Adresse de votre structure\">
  644.                 </div>
  645.                 <div class=\"col-md-6\">
  646.                   <label class=\"form-label\">Code postal</label>
  647.                   <input type=\"text\" class=\"form-control\" name=\"CODEpOSTALetablisment\" 
  648.                          placeholder=\"Code postal\" maxlength=\"5\">
  649.                 </div>
  650.                 <div class=\"col-md-6\">
  651.                   <label class=\"form-label\">Ville</label>
  652.                   <input type=\"text\" class=\"form-control\" name=\"villeetablisment\" 
  653.                          placeholder=\"Ville de votre structure\">
  654.                 </div>
  655.                 <div class=\"col-md-6\">
  656.                   <label class=\"form-label\">N° de Téléphone mobile <span class=\"text-danger\">*</span></label>
  657.                   <input type=\"tel\" class=\"form-control\" name=\"phone_acc\" required 
  658.                          placeholder=\"06 12 34 56 78\" pattern=\"[0-9\\s\\+\\-\\(\\)]{10,}\">
  659.                   <div class=\"invalid-feedback\">Veuillez saisir un numéro de téléphone valide.</div>
  660.                 </div>
  661.                 <div class=\"col-md-6\">
  662.                   <label class=\"form-label\">Email <span class=\"text-danger\">*</span></label>
  663.                   <input type=\"email\" class=\"form-control\" name=\"email\" required 
  664.                          placeholder=\"votre.email@structure.fr\">
  665.                   <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  666.                 </div>
  668.                 <!-- Informations du séjour -->
  669.                 <div class=\"col-12 mt-4\">
  670.                   <h6 class=\"text-primary\">📍 Informations du séjour</h6>
  671.                   <hr>
  672.                 </div>
  674.                 <div class=\"col-md-12\">
  675.                   <label class=\"form-label\">Thème du séjour <span class=\"text-danger\">*</span></label>
  676.                   <input type=\"text\" class=\"form-control\" name=\"theme_sejour\" required 
  677.                          placeholder=\"Ex: Séjour ski, Camp d'été...\">
  678.                   <div class=\"invalid-feedback\">Veuillez saisir le thème du séjour.</div>
  679.                 </div>
  680.                 <div class=\"col-md-12\">
  681.                   <label class=\"form-label\">Adresse du séjour</label>
  682.                   <input type=\"text\" class=\"form-control\" name=\"adress_sejour\" 
  683.                          placeholder=\"Adresse du lieu de séjour\">
  684.                 </div>
  685.                 <div class=\"col-md-6\">
  686.                   <label class=\"form-label\">Code postal</label>
  687.                   <input type=\"text\" class=\"form-control\" name=\"codePostal\" 
  688.                          placeholder=\"Code postal\" maxlength=\"5\">
  689.                 </div>
  690.                 <div class=\"col-md-6\">
  691.                   <label class=\"form-label\">Pays <span class=\"text-danger\">*</span></label>
  692.                   <select class=\"form-select\" name=\"pays\" required>
  693.                     <option value=\"\">Choisir un pays</option>
  694.                     <option value=\"France\" selected>France</option>
  695.                     <option value=\"Belgique\">Belgique</option>
  696.                     <option value=\"Suisse\">Suisse</option>
  697.                     <option value=\"Espagne\">Espagne</option>
  698.                     <option value=\"Italie\">Italie</option>
  699.                     <option value=\"Allemagne\">Allemagne</option>
  700.                     <option value=\"Royaume-Uni\">Royaume-Uni</option>
  701.                     <option value=\"Autre\">Autre</option>
  702.                   </select>
  703.                   <div class=\"invalid-feedback\">Veuillez sélectionner un pays.</div>
  704.                 </div>
  705.                 <div class=\"col-md-6\">
  706.                   <label class=\"form-label\">Ville du séjour</label>
  707.                   <input type=\"text\" class=\"form-control\" name=\"ville\" 
  708.                          placeholder=\"Ville du séjour\">
  709.                 </div>
  710.                 <div class=\"col-md-6\">
  711.                   <label class=\"form-label\">Nombre de participants</label>
  712.                   <input type=\"number\" class=\"form-control\" name=\"NbEnfant\" min=\"1\" 
  713.                          placeholder=\"Nombre d'enfants\">
  714.                 </div>
  715.                 <div class=\"col-md-6\">
  716.                   <label class=\"form-label\">Date début séjour <span class=\"text-danger\">*</span></label>
  717.                   <input type=\"date\" class=\"form-control\" name=\"date_debut_sejour\" required>
  718.                   <div class=\"invalid-feedback\">Veuillez saisir la date de début.</div>
  719.                 </div>
  720.                 <div class=\"col-md-6\">
  721.                   <label class=\"form-label\">Date fin séjour <span class=\"text-danger\">*</span></label>
  722.                   <input type=\"date\" class=\"form-control\" name=\"date_fin_sejour\" required>
  723.                   <div class=\"invalid-feedback\">Veuillez saisir la date de fin.</div>
  724.                 </div>
  726.                 <div class=\"col-12 d-flex gap-2 mt-4\">
  727.                   <button type=\"submit\" class=\"btn btn-primary px-4\">
  728.                     <i class=\"bi bi-rocket me-2\"></i>Créer mon espace séjour (Type PP)
  729.                   </button>
  730.                   <a href=\"#\" class=\"btn btn-outline-secondary\" data-action=\"cta_demo\">
  731.                     Besoin d'aide ? Démo
  732.                   </a>
  733.                 </div>
  734.               </div>
  735.             </form>
  736.           </div>
  738.           <button type=\"button\" id=\"backToStep1\" class=\"btn btn-link mt-3\">
  739.             <i class=\"bi bi-arrow-left me-1\"></i> Retour au choix du profil
  740.           </button>
  741.         </div>
  742.       </div>
  744.       <div class=\"modal-footer border-top-0\">
  745.         <p class=\"small text-muted mb-0\">Sans engagement · Données hébergées en France 🇫🇷</p>
  746.       </div>
  747.     </div>
  748.   </div>
  749. </div>
  751. <style>
  752. .select-role {
  753.   cursor: pointer;
  754.   transition: all 0.3s ease;
  755. }
  756. .select-role:hover,
  757. .select-role:focus {
  758.   transform: translateY(-5px);
  759.   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  760.   border-color: var(--bs-primary) !important;
  761. }
  762. .select-role:active {
  763.   transform: translateY(-2px);
  764. }
  765. .hover-shadow {
  766.   transition: box-shadow 0.3s ease;
  767. }
  768. .bg-purple {
  769.   background-color: #6f42c1 !important;
  770. }
  771. </style>
  773. <script>
  774.   // Protection contre les erreurs de la toolbar Symfony
  775.   (function() {
  776.     // Désactiver complètement Sfjs
  777.     window.Sfjs = {
  778.       loadToolbar: function() { console.log('Sfjs.loadToolbar désactivé'); },
  779.       showToolbar: function() { console.log('Sfjs.showToolbar désactivé'); },
  780.       hideToolbar: function() { console.log('Sfjs.hideToolbar désactivé'); },
  781.       initToolbar: function() { console.log('Sfjs.initToolbar désactivé'); }
  782.     };
  783.     
  784.     // Désactiver les requêtes vers _wdt si elles échouent
  785.     const originalFetch = window.fetch;
  786.     window.fetch = function(...args) {
  787.       const url = args[0];
  788.       if (typeof url === 'string' && url.includes('/_wdt/')) {
  789.         console.warn('Requête vers _wdt bloquée:', url);
  790.         return Promise.reject(new Error('Toolbar Symfony désactivée'));
  791.       }
  792.       return originalFetch.apply(this, args);
  793.     };
  794.     
  795.     // Désactiver XMLHttpRequest vers _wdt
  796.     const originalXHROpen = XMLHttpRequest.prototype.open;
  797.     const originalXHRSend = XMLHttpRequest.prototype.send;
  798.     
  799.     XMLHttpRequest.prototype.open = function(method, url, ...args) {
  800.       this._url = url; // Stocker l'URL pour vérification dans send
  801.       if (typeof url === 'string' && url.includes('/_wdt/')) {
  802.         console.warn('Requête XHR vers _wdt bloquée:', url);
  803.         this._blocked = true;
  804.         return;
  805.       }
  806.       this._blocked = false;
  807.       return originalXHROpen.apply(this, [method, url, ...args]);
  808.     };
  809.     
  810.     XMLHttpRequest.prototype.send = function(payload) {
  811.       if (this._blocked) {
  812.         console.warn('Envoi XHR bloqué pour:', this._url);
  813.         return; // Ne pas envoyer si bloqué
  814.       }
  815.       return originalXHRSend.apply(this, arguments);
  816.     };
  817.   })();
  819.   // Supprimer complètement la toolbar Symfony du DOM
  820.   function removeSymfonyToolbar() {
  821.     const toolbar = document.querySelector('.sf-toolbar');
  822.     if (toolbar) {
  823.       toolbar.remove();
  824.       console.log('Toolbar Symfony supprimée du DOM');
  825.     }
  826.     
  827.     const clearer = document.querySelector('.sf-toolbar-clearer');
  828.     if (clearer) {
  829.       clearer.remove();
  830.     }
  831.     
  832.     const minitoolbar = document.querySelector('.sf-minitoolbar');
  833.     if (minitoolbar) {
  834.       minitoolbar.remove();
  835.     }
  836.   }
  837.   
  838.   // Supprimer immédiatement
  839.   removeSymfonyToolbar();
  840.   
  841.   // Observer pour supprimer la toolbar dès qu'elle apparaît
  842.   const observer = new MutationObserver(function(mutations) {
  843.     mutations.forEach(function(mutation) {
  844.       if (mutation.type === 'childList') {
  845.         mutation.addedNodes.forEach(function(node) {
  846.           if (node.nodeType === 1) { // Element node
  847.             if (node.classList && (node.classList.contains('sf-toolbar') || node.classList.contains('sf-minitoolbar'))) {
  848.               node.remove();
  849.               console.log('Toolbar Symfony supprimée par l\\'observer');
  850.             }
  851.             // Vérifier aussi les enfants
  852.             const toolbars = node.querySelectorAll && node.querySelectorAll('.sf-toolbar, .sf-minitoolbar, .sf-toolbar-clearer');
  853.             if (toolbars) {
  854.               toolbars.forEach(tb => tb.remove());
  855.             }
  856.           }
  857.         });
  858.       }
  859.     });
  860.   });
  861.   
  862.   observer.observe(document.body, {
  863.     childList: true,
  864.     subtree: true
  865.   });
  866.   
  867.   // Ajouter du CSS pour masquer la toolbar Symfony
  868.   const style = document.createElement('style');
  869.   style.textContent = `
  870.     .sf-toolbar, .sf-toolbar-clearer, .sf-minitoolbar { 
  871.       display: none !important; 
  872.       visibility: hidden !important;
  873.       opacity: 0 !important;
  874.       height: 0 !important;
  875.       width: 0 !important;
  876.       overflow: hidden !important;
  877.     }
  878.   `;
  879.   document.head.appendChild(style);
  881.   // Masquer la toolbar Symfony si elle cause des problèmes
  882.   document.addEventListener('DOMContentLoaded', function() {
  883.     // Masquer la toolbar Symfony après 2 secondes si elle n'est pas chargée
  884.     setTimeout(() => {
  885.       const toolbar = document.querySelector('.sf-toolbar');
  886.       if (toolbar && toolbar.classList.contains('sf-display-none')) {
  887.         toolbar.style.display = 'none';
  888.         console.log('Toolbar Symfony masquée pour éviter les erreurs 404');
  889.       }
  890.     }, 2000);
  891.     // Ouvre la modale avec l'onglet adapté + pré-remplissage
  892.     document.addEventListener('click', (e) => {
  893.     // Éviter les conflits avec la toolbar Symfony
  894.     if (e.target.closest('.sf-toolbar') || e.target.closest('[id^=\"sf\"]')) {
  895.       return;
  896.     }
  897.     
  898.     const a = e.target.closest('a[data-action=\"cta_demo\"], a[data-action=\"cta_expert\"]');
  899.     if (!a) return;
  900.     e.preventDefault();
  902.     const isExpert = a.dataset.action === 'cta_expert';
  903.     const pack = a.dataset.pack || '';
  905.     document.getElementById('demoTitle').textContent = isExpert ? 'Parler à un expert' : 'Demander une démo guidée';
  906.     document.getElementById('objet').value = isExpert ? 'expert' : 'demo';
  907.     document.getElementById('topic').value = isExpert ? 'expert' : 'demo';
  908.     document.getElementById('pack').value  = pack;
  910.     // Onglet par défaut : expert => rappel / demo => calendrier
  911.     const triggerId = isExpert ? 'tab-callback' : 'tab-calendar';
  912.     const tabElement = document.getElementById(triggerId);
  913.     
  914.     if (tabElement) {
  915.       // Désactiver tous les onglets
  916.       document.querySelectorAll('#demoTabs .nav-link').forEach(tab => {
  917.         tab.classList.remove('active');
  918.         tab.setAttribute('aria-selected', 'false');
  919.       });
  920.       
  921.       // Désactiver tous les panneaux
  922.       document.querySelectorAll('.tab-pane').forEach(pane => {
  923.         pane.classList.remove('show', 'active');
  924.       });
  925.       
  926.       // Activer l'onglet sélectionné
  927.       tabElement.classList.add('active');
  928.       tabElement.setAttribute('aria-selected', 'true');
  929.       
  930.       // Activer le panneau correspondant
  931.       const targetPane = document.querySelector(tabElement.getAttribute('data-bs-target'));
  932.       if (targetPane) {
  933.         targetPane.classList.add('show', 'active');
  934.       }
  935.     }
  937.     const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('demoModal'));
  938.     modal.show();
  939.   });
  941.   // Validation form + anti double-submit pour le formulaire de démo
  942.   (function () {
  943.     const form = document.getElementById('contactForm');
  944.     const btn  = document.getElementById('submitBtn');
  945.     if (!form || !btn) return;
  947.     // Protection contre les soumissions multiples
  948.     let isSubmitting = false;
  949.     
  950.     // Nettoyer les classes d'erreur quand l'utilisateur tape
  951.     form.addEventListener('input', function(e) {
  952.       if (e.target.classList.contains('is-invalid')) {
  953.         e.target.classList.remove('is-invalid');
  954.       }
  955.     });
  956.     
  957.     form.addEventListener('submit', function(e){
  958.       e.preventDefault(); // Toujours empêcher la soumission normale
  959.       
  960.       // Éviter les soumissions multiples
  961.       if (isSubmitting) return;
  962.       isSubmitting = true;
  963.       
  964.       // Nettoyer les messages précédents
  965.       const existingAlerts = form.parentNode.querySelectorAll('.alert');
  966.       existingAlerts.forEach(alert => alert.remove());
  967.       
  968.       if (!form.checkValidity()) {
  969.         e.stopPropagation();
  970.         form.classList.add('was-validated');
  971.         
  972.         // Afficher les messages d'erreur pour chaque champ invalide
  973.         const invalidFields = form.querySelectorAll(':invalid');
  974.         invalidFields.forEach(field => {
  975.           field.classList.add('is-invalid');
  976.         });
  977.         
  978.         // Afficher un message d'erreur général
  979.         const errorAlert = document.createElement('div');
  980.         errorAlert.className = 'alert alert-warning mt-3';
  981.         errorAlert.innerHTML = `
  982.           <div class=\"d-flex align-items-center\">
  983.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  984.             <div>
  985.               <strong>Veuillez corriger les erreurs :</strong><br>
  986.               Tous les champs marqués d'un astérisque (*) sont obligatoires.
  987.             </div>
  988.           </div>
  989.         `;
  990.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  991.         
  992.         // Supprimer le message après 5 secondes
  993.         setTimeout(() => {
  994.           if (errorAlert.parentNode) {
  995.             errorAlert.parentNode.removeChild(errorAlert);
  996.           }
  997.         }, 5000);
  998.         
  999.         isSubmitting = false;
  1000.         return;
  1001.       } 
  1003.       // Désactiver le bouton pendant l'envoi
  1004.       btn.disabled = true; 
  1005.       const originalText = btn.textContent;
  1006.       btn.textContent = 'Envoi en cours…';
  1008.       // Récupérer les données du formulaire
  1009.       const formData = new FormData(form);
  1010.       
  1011.       // Debug : afficher les données envoyées
  1012.       console.log('=== DEBUG FORMULAIRE ===');
  1013.       console.log('Données du formulaire :');
  1014.       const formDataObj = {};
  1015.       for (let [key, value] of formData.entries()) {
  1016.         console.log(key + ': \"' + value + '\"');
  1017.         formDataObj[key] = value;
  1018.       }
  1019.       console.log('Objet complet:', formDataObj);
  1020.       
  1021.       // Vérifier les champs obligatoires
  1022.       const requiredFields = ['name', 'organization', 'email', 'telephone', 'sejours_count', 'consent'];
  1023.       const missingFields = [];
  1024.       requiredFields.forEach(field => {
  1025.         if (!formDataObj[field] || formDataObj[field].trim() === '') {
  1026.           missingFields.push(field);
  1027.         }
  1028.       });
  1029.       
  1030.       if (missingFields.length > 0) {
  1031.         console.error('Champs manquants:', missingFields);
  1032.         alert('Champs manquants: ' + missingFields.join(', '));
  1033.         isSubmitting = false;
  1034.         return;
  1035.       }
  1036.       
  1037.       console.log('Tous les champs obligatoires sont remplis ✅');
  1039.       // Envoyer la requête AJAX
  1040.       fetch(form.action, {
  1041.         method: 'POST',
  1042.         body: formData,
  1043.         headers: {
  1044.           'X-Requested-With': 'XMLHttpRequest'
  1045.         }
  1046.       })
  1047.       .then(response => response.json())
  1048.       .then(data => {
  1049.         if (data.success) {
  1050.           // Afficher le message de succès
  1051.           const successAlert = document.createElement('div');
  1052.           successAlert.className = 'alert alert-success mt-3';
  1053.           successAlert.innerHTML = `
  1054.             <div class=\"d-flex align-items-center\">
  1055.               <i class=\"bi bi-check-circle-fill me-2\"></i>
  1056.               <div>
  1057.                 <strong>Demande envoyée !</strong><br>
  1058.                 \${data.message}
  1059.               </div>
  1060.             </div>
  1061.           `;
  1062.           form.parentNode.insertBefore(successAlert, form.nextSibling);
  1063.           
  1064.           // Réinitialiser le formulaire
  1065.           form.reset();
  1066.           form.classList.remove('was-validated');
  1067.           
  1068.           // Fermer le modal après 3 secondes
  1069.           setTimeout(() => {
  1070.             const modal = bootstrap.Modal.getInstance(document.getElementById('demoModal'));
  1071.             if (modal) modal.hide();
  1072.           }, 3000);
  1073.         } else {
  1074.           // Afficher le message d'erreur
  1075.           const errorAlert = document.createElement('div');
  1076.           errorAlert.className = 'alert alert-danger mt-3';
  1077.           errorAlert.innerHTML = `
  1078.             <div class=\"d-flex align-items-center\">
  1079.               <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  1080.               <div>
  1081.                 <strong>Erreur :</strong><br>
  1082.                 \${data.message}
  1083.               </div>
  1084.             </div>
  1085.           `;
  1086.           form.parentNode.insertBefore(errorAlert, form.nextSibling);
  1087.           
  1088.           // Supprimer le message d'erreur après 8 secondes
  1089.           setTimeout(() => {
  1090.             if (errorAlert.parentNode) {
  1091.               errorAlert.parentNode.removeChild(errorAlert);
  1092.             }
  1093.           }, 8000);
  1094.         }
  1095.       })
  1096.       .catch(error => {
  1097.         console.error('Erreur:', error);
  1098.         const errorAlert = document.createElement('div');
  1099.         errorAlert.className = 'alert alert-danger mt-3';
  1100.         errorAlert.innerHTML = `
  1101.           <div class=\"d-flex align-items-center\">
  1102.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  1103.             <div>
  1104.               <strong>Erreur technique :</strong><br>
  1105.               Une erreur est survenue lors de l'envoi. Veuillez réessayer plus tard.
  1106.             </div>
  1107.           </div>
  1108.         `;
  1109.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  1110.         
  1111.         // Supprimer le message d'erreur après 10 secondes
  1112.         setTimeout(() => {
  1113.           if (errorAlert.parentNode) {
  1114.             errorAlert.parentNode.removeChild(errorAlert);
  1115.           }
  1116.         }, 10000);
  1117.       })
  1118.       .finally(() => {
  1119.         // Réactiver le bouton et le flag de soumission
  1120.         btn.disabled = false;
  1121.         btn.textContent = originalText;
  1122.         isSubmitting = false;
  1123.         
  1124.         // Supprimer les anciennes alertes après 5 secondes
  1125.         setTimeout(() => {
  1126.           const alerts = form.parentNode.querySelectorAll('.alert');
  1127.           alerts.forEach(alert => alert.remove());
  1128.         }, 5000);
  1129.       });
  1130.     });
  1131.   })();
  1133.   // ===== GESTION MODALE \"CRÉER MON SÉJOUR\" =====
  1134.   const createSejourModal = document.getElementById('createSejourModal');
  1135.   const step1 = document.getElementById('step1');
  1136.   const step2 = document.getElementById('step2');
  1137.   const stepLabel = document.getElementById('stepLabel');
  1138.   const stepDescription = document.getElementById('stepDescription');
  1139.   const backToStep1Btn = document.getElementById('backToStep1');
  1140.   
  1141.   let currentRole = null;
  1142.   let isSubmittingCreate = false;
  1144.   // Fonction helper pour le tracking GA4
  1145.   function trackEvent(eventName, params = {}) {
  1146.     if (typeof gtag === 'function') {
  1147.       gtag('event', eventName, params);
  1148.       console.log('📊 GA4 Event:', eventName, params);
  1149.     }
  1150.   }
  1152.   // Reset de la modale à l'ouverture
  1153.   createSejourModal.addEventListener('show.bs.modal', function () {
  1154.     // Reset aux valeurs initiales
  1155.     step1.classList.remove('d-none');
  1156.     step2.classList.add('d-none');
  1157.     stepLabel.textContent = 'Étape 1/2';
  1158.     stepDescription.textContent = 'Choisissez votre profil';
  1159.     currentRole = null;
  1160.     
  1161.     // Masquer tous les panneaux de formulaire
  1162.     document.querySelectorAll('.role-pane').forEach(pane => pane.classList.add('d-none'));
  1163.     
  1164.     // Reset de tous les formulaires
  1165.     ['formEcole', 'formPartenaire', 'formAutre'].forEach(formId => {
  1166.       const form = document.getElementById(formId);
  1167.       if (form) {
  1168.         form.reset();
  1169.         form.classList.remove('was-validated');
  1170.       }
  1171.     });
  1173.     // Focus sur le titre de la modale
  1174.     setTimeout(() => {
  1175.       document.getElementById('createSejourTitle').focus();
  1176.     }, 300);
  1177.   });
  1179.   // Gestion du clic sur les cartes de sélection de rôle
  1180.   document.querySelectorAll('.select-role').forEach(card => {
  1181.     card.addEventListener('click', function() {
  1182.       const role = this.dataset.role;
  1183.       selectRole(role);
  1184.     });
  1185.     
  1186.     // Support du clavier
  1187.     card.addEventListener('keypress', function(e) {
  1188.       if (e.key === 'Enter' || e.key === ' ') {
  1189.         e.preventDefault();
  1190.         const role = this.dataset.role;
  1191.         selectRole(role);
  1192.       }
  1193.     });
  1194.   });
  1196.   function selectRole(role) {
  1197.     currentRole = role;
  1198.     
  1199.     // Track event GA4
  1200.     trackEvent('step_select_role', { role: role });
  1201.     
  1202.     // Si école publique → Redirection directe vers /Accompagnateur/login avec type EF
  1203.     if (role === 'ecole_publique') {
  1204.       // Fermer la modale
  1205.       bootstrap.Modal.getInstance(createSejourModal)?.hide();
  1206.       
  1207.       // Rediriger vers la page de login avec le paramètre type EF et source
  1208.       window.location.href = '/Accompagnateur/login?type=EF&from=modal';
  1209.       return;
  1210.     }
  1211.     
  1212.     // Passage à l'étape 2 pour les autres profils
  1213.     step1.classList.add('d-none');
  1214.     step2.classList.remove('d-none');
  1215.     stepLabel.textContent = 'Étape 2/2';
  1216.     
  1217.     // Afficher le panneau correspondant
  1218.     document.querySelectorAll('.role-pane').forEach(pane => pane.classList.add('d-none'));
  1219.     
  1220.     let roleLabel = '';
  1221.     if (role === 'partenaire') {
  1222.       document.getElementById('pane-partenaire').classList.remove('d-none');
  1223.       roleLabel = 'Partenaire / Organisme';
  1224.       // Lazy load Calendly pour le partenaire
  1225.       lazyLoadCalendlyIfNeeded('#pane-partenaire-demo iframe');
  1226.     } else if (role === 'autre') {
  1227.       document.getElementById('pane-autre').classList.remove('d-none');
  1228.       roleLabel = 'Création simple';
  1229.       setTimeout(() => document.querySelector('#pane-autre input')?.focus(), 300);
  1230.     }
  1231.     
  1232.     stepDescription.textContent = roleLabel;
  1233.   }
  1235.   // Retour à l'étape 1
  1236.   backToStep1Btn.addEventListener('click', function() {
  1237.     step1.classList.remove('d-none');
  1238.     step2.classList.add('d-none');
  1239.     stepLabel.textContent = 'Étape 1/2';
  1240.     stepDescription.textContent = 'Choisissez votre profil';
  1241.     currentRole = null;
  1242.   });
  1244.   // Lazy load Calendly
  1245.   function lazyLoadCalendlyIfNeeded(selector) {
  1246.     const iframe = document.querySelector(selector);
  1247.     if (iframe && iframe.hasAttribute('data-src') && !iframe.src) {
  1248.       iframe.src = iframe.getAttribute('data-src');
  1249.       console.log('📅 Calendly chargé:', iframe.src);
  1250.     }
  1251.   }
  1253.   // Lazy load Calendly pour modale démo (onglet calendrier)
  1254.   const tabCalendar = document.getElementById('tab-calendar');
  1255.   if (tabCalendar) {
  1256.     tabCalendar.addEventListener('shown.bs.tab', function() {
  1257.       lazyLoadCalendlyIfNeeded('#pane-calendar iframe');
  1258.     });
  1259.   }
  1261.   // Lazy load Calendly pour modale créer séjour (onglet demo partenaire)
  1262.   const tabPartenaireDemo = document.getElementById('tab-partenaire-demo');
  1263.   if (tabPartenaireDemo) {
  1264.     tabPartenaireDemo.addEventListener('shown.bs.tab', function() {
  1265.       lazyLoadCalendlyIfNeeded('#pane-partenaire-demo iframe');
  1266.     });
  1267.   }
  1269.   // Gestion des radios \"qui paie\" avec tracking
  1270.   document.querySelectorAll('input[name=\"payer\"]').forEach(radio => {
  1271.     radio.addEventListener('change', function() {
  1272.       trackEvent('toggle_payer', { who_pays: this.value });
  1273.     });
  1274.   });
  1276.   // Fonction générique de soumission de formulaire avec AJAX
  1277.   function setupFormSubmission(formId, onSuccess) {
  1278.     const form = document.getElementById(formId);
  1279.     if (!form) return;
  1281.     form.addEventListener('submit', function(e) {
  1282.       e.preventDefault();
  1284.       // Éviter les doubles soumissions
  1285.       if (isSubmittingCreate) {
  1286.         return;
  1287.       }
  1289.       // Valider le formulaire
  1290.       if (!form.checkValidity()) {
  1291.         form.classList.add('was-validated');
  1292.         
  1293.         // Afficher un message d'avertissement
  1294.         const warningAlert = document.createElement('div');
  1295.         warningAlert.className = 'alert alert-warning mt-3';
  1296.         warningAlert.innerHTML = `
  1297.           <div class=\"d-flex align-items-center\">
  1298.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  1299.             <div>
  1300.               <strong>Veuillez corriger les erreurs :</strong><br>
  1301.               Tous les champs marqués d'un astérisque (*) sont obligatoires.
  1302.             </div>
  1303.           </div>
  1304.         `;
  1305.         form.parentNode.insertBefore(warningAlert, form.nextSibling);
  1306.         setTimeout(() => warningAlert.remove(), 5000);
  1307.         return;
  1308.       }
  1310.       isSubmittingCreate = true;
  1312.       // Track event GA4
  1313.       trackEvent('form_submit', { form_id: formId });
  1315.       // Désactiver le bouton
  1316.       const btn = form.querySelector('button[type=\"submit\"]');
  1317.       btn.disabled = true;
  1318.       const originalText = btn.textContent;
  1319.       btn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Envoi en cours…';
  1321.       // Soumettre via fetch
  1322.       const formData = new FormData(form);
  1324.       fetch(form.action, {
  1325.         method: 'POST',
  1326.         body: formData,
  1327.         headers: {
  1328.           'X-Requested-With': 'XMLHttpRequest'
  1329.         }
  1330.       })
  1331.       .then(response => response.json())
  1332.       .then(data => {
  1333.         if (data.idSejour) {
  1334.           // Succès ! Le séjour a été créé
  1335.           
  1336.           // Track event GA4 de succès
  1337.           trackEvent('create_sejour_success', {
  1338.             role: currentRole,
  1339.             sejour_id: data.idSejour,
  1340.             code_sejour: data.codeSejour || 'N/A'
  1341.           });
  1343.           // Afficher le message de succès
  1344.           const successAlert = document.createElement('div');
  1345.           successAlert.className = 'alert alert-success mt-3';
  1346.           successAlert.innerHTML = `
  1347.             <div class=\"d-flex align-items-center\">
  1348.               <i class=\"bi bi-check-circle-fill me-2\"></i>
  1349.               <div>
  1350.                 <strong>✅ Séjour créé avec succès !</strong><br>
  1351.                 \${data.codeSejour ? 'Code séjour : <strong>' + data.codeSejour + '</strong><br>' : ''}
  1352.                 Vous allez être redirigé vers votre espace...
  1353.               </div>
  1354.             </div>
  1355.           `;
  1356.           form.parentNode.insertBefore(successAlert, form.nextSibling);
  1358.           // Reset le formulaire
  1359.           form.reset();
  1360.           form.classList.remove('was-validated');
  1362.           // Rediriger après 2 secondes vers l'espace accompagnateur
  1363.           setTimeout(() => {
  1364.        
  1365.           }, 2000);
  1367.           // Callback optionnel
  1368.           if (onSuccess) onSuccess(data);
  1370.         } else if (data.success === false) {
  1371.           // Erreur métier
  1372.           const errorAlert = document.createElement('div');
  1373.           errorAlert.className = 'alert alert-danger mt-3';
  1374.           errorAlert.innerHTML = `
  1375.             <div class=\"d-flex align-items-center\">
  1376.               <i class=\"bi bi-x-circle-fill me-2\"></i>
  1377.               <div>
  1378.                 <strong>Erreur :</strong><br>
  1379.                 \${data.message || 'Une erreur est survenue lors de la création du séjour.'}
  1380.               </div>
  1381.             </div>
  1382.           `;
  1383.           form.parentNode.insertBefore(errorAlert, form.nextSibling);
  1384.           setTimeout(() => errorAlert.remove(), 7000);
  1385.         } else {
  1386.           // Réponse inattendue
  1387.           console.warn('Réponse inattendue:', data);
  1388.           const warningAlert = document.createElement('div');
  1389.           warningAlert.className = 'alert alert-warning mt-3';
  1390.           warningAlert.innerHTML = `
  1391.             <div class=\"d-flex align-items-center\">
  1392.               <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  1393.               <div>
  1394.                 <strong>Attention :</strong><br>
  1395.                 La création du séjour a peut-être réussi. Vérifiez votre espace.
  1396.               </div>
  1397.             </div>
  1398.           `;
  1399.           form.parentNode.insertBefore(warningAlert, form.nextSibling);
  1400.           setTimeout(() => {
  1401.             window.location.href = '/Accompagnateur/login';
  1402.           }, 3000);
  1403.         }
  1404.       })
  1405.       .catch(error => {
  1406.         console.error('Erreur:', error);
  1407.         const errorAlert = document.createElement('div');
  1408.         errorAlert.className = 'alert alert-danger mt-3';
  1409.         errorAlert.innerHTML = `
  1410.           <div class=\"d-flex align-items-center\">
  1411.             <i class=\"bi bi-x-circle-fill me-2\"></i>
  1412.             <div>
  1413.               <strong>Erreur technique :</strong><br>
  1414.               Une erreur réseau est survenue. Veuillez réessayer plus tard.
  1415.             </div>
  1416.           </div>
  1417.         `;
  1418.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  1419.         setTimeout(() => errorAlert.remove(), 7000);
  1420.       })
  1421.       .finally(() => {
  1422.         btn.disabled = false;
  1423.         btn.innerHTML = originalText;
  1424.         isSubmittingCreate = false;
  1425.       });
  1426.     });
  1427.   }
  1429.   // Setup tous les formulaires de la modale \"Créer mon séjour\"
  1430.   // formEcole supprimé car redirection directe vers /Accompagnateur/login
  1431.   setupFormSubmission('formPartenaire');
  1432.   setupFormSubmission('formAutre');
  1434.   // Délégation d'événements pour tous les CTA avec data-action
  1435.   document.addEventListener('click', function(e) {
  1436.     // Éviter les conflits avec la toolbar Symfony
  1437.     if (e.target.closest('.sf-toolbar') || e.target.closest('[id^=\"sf\"]')) {
  1438.       return;
  1439.     }
  1441.     const target = e.target.closest('[data-action]');
  1442.     if (!target) return;
  1444.     const action = target.dataset.action;
  1445.     const pack = target.dataset.pack || '';
  1447.     // Track event GA4
  1448.     trackEvent('cta_open_modal', { action: action, pack: pack });
  1450.     if (action === 'cta_create') {
  1451.       // Ouvrir la modale \"Créer mon séjour\"
  1452.       e.preventDefault();
  1453.       const modal = new bootstrap.Modal(createSejourModal);
  1454.       modal.show();
  1455.     } else if (action === 'cta_demo' || action === 'cta_expert') {
  1456.       // Ouvrir la modale demo/expert existante
  1457.       e.preventDefault();
  1458.       const demoModal = document.getElementById('demoModal');
  1459.       const modal = new bootstrap.Modal(demoModal);
  1460.       
  1461.       const isExpert = action === 'cta_expert';
  1462.       
  1463.       // Changer le titre
  1464.       document.getElementById('demoTitle').textContent = isExpert ? 'Parler à un expert' : 'Demander une démo guidée';
  1465.       
  1466.       // Pré-remplir les champs cachés
  1467.       document.getElementById('objet').value = isExpert ? 'expert' : 'demo';
  1468.       document.getElementById('topic').value = isExpert ? 'expert' : 'demo';
  1469.       document.getElementById('pack').value = pack;
  1470.       
  1471.       // Activer le bon onglet
  1472.       const tabCalendar = document.getElementById('tab-calendar');
  1473.       const tabCallback = document.getElementById('tab-callback');
  1474.       const paneCalendar = document.getElementById('pane-calendar');
  1475.       const paneCallback = document.getElementById('pane-callback');
  1476.       
  1477.       if (isExpert) {
  1478.         // Expert → Onglet \"Être rappelé\"
  1479.         tabCalendar.classList.remove('active');
  1480.         tabCallback.classList.add('active');
  1481.         paneCalendar.classList.remove('show', 'active');
  1482.         paneCallback.classList.add('show', 'active');
  1483.       } else {
  1484.         // Démo → Onglet \"Réserver un créneau\"
  1485.         tabCallback.classList.remove('active');
  1486.         tabCalendar.classList.add('active');
  1487.         paneCallback.classList.remove('show', 'active');
  1488.         paneCalendar.classList.add('show', 'active');
  1489.         
  1490.         // Lazy load Calendly
  1491.         lazyLoadCalendlyIfNeeded('#pane-calendar iframe');
  1492.       }
  1493.       
  1494.       modal.show();
  1495.     }
  1496.   });
  1498.   }); // Fin du DOMContentLoaded
  1499. </script>
  1500.     <!-- ======= Site Wrap =======-->
  1501.     <div class=\"site-wrap\">
  1502.       
  1503.       <!-- ======= Header =======-->
  1504.       <header class=\"fbs__net-navbar navbar navbar-expand-lg dark\" aria-label=\"freebootstrap.net navbar\">
  1505.         <div class=\"container d-flex align-items-center justify-content-between\">
  1506.           
  1507.           <!-- Start Logo-->
  1508.           <a class=\"navbar-brand w-auto\" href=\"#\">
  1509.             <img class=\"logo dark img-fluid\" src=\"";
  1510.         // line 1420
  1511.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.png"), "html", null, true);
  1512.         yield "\" alt=\"5sur5séjour logo\" style=\"height: 65px;\">
  1513.           </a>
  1514.           <!-- End Logo-->
  1515.           
  1516.           <!-- Start offcanvas-->
  1517.           <div class=\"offcanvas offcanvas-start w-75\" id=\"fbs__net-navbars\" tabindex=\"-1\" aria-labelledby=\"fbs__net-navbarsLabel\">
  1518.             
  1519.             <div class=\"offcanvas-header\">
  1520.               <div class=\"offcanvas-header-logo\">
  1521.                 <a class=\"logo-link\" id=\"fbs__net-navbarsLabel\" href=\"#\">
  1522.                   <img class=\"logo light img-fluid\" src=\"";
  1523.         // line 1430
  1524.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.png"), "html", null, true);
  1525.         yield "\" alt=\"5sur5séjour logo\" style=\"height: 60px;\">
  1526.                 </a>
  1527.               </div>
  1528.               <button class=\"btn-close btn-close-black\" type=\"button\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
  1529.             </div>
  1530.             
  1531.             <div class=\"offcanvas-body align-items-lg-center\">
  1532.               
  1533.               <ul class=\"navbar-nav nav me-auto ps-lg-5 mb-2 mb-lg-0\">
  1534.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#about\">A propos</a></li>
  1535.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#how-it-works\">Comment ça marche</a></li>
  1536.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#pricing\">Nos offres</a></li>
  1537.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#contact\">Contact</a></li>
  1538.                 <li class=\"nav-item dropdown\">
  1539.                   <a class=\"nav-link dropdown-toggle\" href=\"#\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">Nos produits <i class=\"bi bi-chevron-down\"></i></a>
  1540.                   <ul class=\"dropdown-menu\">
  1541.                     <li class=\"nav-item\"><a class=\"nav-link\" href=\"";
  1542.         // line 1446
  1543.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  1544.         yield "\">Pack Annuel Partenaires</a></li>
  1545.                     <li><hr class=\"dropdown-divider\"></li>
  1546.                                                 ";
  1547.         // line 1448
  1548.         $context['_parent'] = $context;
  1549.         $context['_seq'] = CoreExtension::ensureTraversable($context["produit"]);
  1550.         foreach ($context['_seq'] as $context["_key"] => $context["produit"]) {
  1551.             // line 1449
  1552.             yield "                                                    ";
  1553.             if ((CoreExtension::getAttribute($this->env, $this->source, $context["produit"], "labeleType", [], "any", false, false, false, 1449) != "Connexion")) {
  1554.                 // line 1450
  1555.                 yield "
  1557.                                        <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"";
  1558.                 // line 1452
  1559.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("album", ["id" => CoreExtension::getAttribute($this->env, $this->source, $context["produit"], "labeleType", [], "any", false, false, false, 1452)]), "html", null, true);
  1560.                 yield "\"> ";
  1561.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["produit"], "labeleType", [], "any", false, false, false, 1452), "html", null, true);
  1562.                 yield "</a></li>
  1565.                                                     ";
  1566.             }
  1567.             // line 1456
  1568.             yield "                                                ";
  1569.         }
  1570.         $_parent = $context['_parent'];
  1571.         unset($context['_seq'], $context['_key'], $context['produit'], $context['_parent']);
  1572.         $context = array_intersect_key($context, $_parent) + $_parent;
  1573.         // line 1457
  1574.         yield "                   
  1575.                   </ul>
  1576.                 </li>
  1577.               </ul>
  1578.               
  1579.             </div>
  1580.           </div>
  1581.           <!-- End offcanvas-->
  1582.           
  1583.           <div class=\"ms-auto w-auto\">
  1584.             
  1585.             <div class=\"header-social d-flex align-items-center gap-1\">
  1586.               <a class=\"btn btn-primary py-2\" href=\"#jemeconnecte\">Je me connecte</a>
  1587.               
  1588.               <button class=\"fbs__net-navbar-toggler justify-content-center align-items-center ms-auto\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#fbs__net-navbars\" aria-controls=\"fbs__net-navbars\" aria-label=\"Toggle navigation\" aria-expanded=\"false\">
  1589.                 <svg class=\"fbs__net-icon-menu\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  1590.                   <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"></line>
  1591.                   <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"></line>
  1592.                   <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"></line>
  1593.                 </svg>
  1594.                 <svg class=\"fbs__net-icon-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  1595.                   <path d=\"M18 6 6 18\"></path>
  1596.                   <path d=\"m6 6 12 12\"></path>
  1597.                 </svg>
  1598.               </button>
  1599.               
  1600.             </div>
  1601.             
  1602.           </div>
  1603.         </div>
  1604.       </header>
  1605.       <!-- End Header-->
  1606.       
  1607.       <!-- ======= Main =======-->
  1608.       <main>
  1609.        
  1610.            <!-- ======= Hero =======-->
  1611.         <section class=\"hero__v6 section\" id=\"home\">
  1612.           <div class=\"container\">
  1613.             <div class=\"row\">
  1614.               <div class=\"col-lg-6 mb-4 mb-lg-0\">
  1615.                 <div class=\"row\">
  1616.                   <div class=\"col-lg-11\">
  1617.                     <span class=\"hero-subtitle text-uppercase\" data-aos=\"fade-up\" data-aos-delay=\"0\">La solution sécurisée qui rassure les familles et libère vos équipes</span>
  1618.                     <h1 class=\"hero-title mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\"> Avec 5sur5Séjour, transformez chaque séjour en une expérience sereine et valorisante.</h1>
  1619.                     <p class=\"hero-description mb-4 mb-lg-5\" data-aos=\"fade-up\" data-aos-delay=\"200\">🤝 Un accompagnement humain dédié| 📞 Des appels vocaux automatiques aux familles | 🔒 100% conforme RGPD & hébergé en France</p>
  1620.                     <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  1621.               href=\"";
  1622.         // line 1504
  1623.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  1624.         yield "\">
  1625.            Devenir partenaire
  1626.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  1627.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  1628.             </svg>
  1629.           </a>
  1630.                   </div>
  1631.                 </div>
  1632.               </div>
  1633.               <div class=\"col-lg-6\">
  1634.                 <div class=\"hero-img\">
  1635.                   <img class=\"img-card img-fluid\" style=\"background: radial-gradient(gray, transparent);border-radius: 30px;\" src=\"";
  1636.         // line 1515
  1637.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/demo3.png"), "html", null, true);
  1638.         yield "\" alt=\"Image card\" data-aos=\"fade-down\" data-aos-delay=\"600\">
  1639.                   <img class=\"img-main img-fluid rounded-4\" src=\"";
  1640.         // line 1516
  1641.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("images/smiling_5sur5.svg"), "html", null, true);
  1642.         yield "\" alt=\"Hero Image\" data-aos=\"fade-in\" data-aos-delay=\"500\">
  1643.                 </div>
  1644.                   <!-- Bouton CTA -->
  1645.                     <!-- CTAs -->
  1646.         <div class=\"d-flex flex-wrap gap-3 align-items-center mb-2\" data-aos=\"fade-up\" data-aos-delay=\"250\"  style=\"margin-top:15%\">
  1647.           <a class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" href=\"#\" data-action=\"cta_create\" data-pack=\"creation\">
  1648.             Créer mon espace séjour 
  1649.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  1650.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  1651.             </svg>
  1652.           </a>
  1654.         
  1655.         </div>
  1657.     
  1659.         <!-- Preuve sociale courte -->
  1660.         <div class=\"logos mt-4\" data-aos=\"fade-up\" data-aos-delay=\"350\">
  1661.         <p class=\"text-primary-emphasis text-uppercase small mt-4 mb-0\">
  1662.   Déjà adopté par <strong>1 500+</strong> écoles, centres de loisirs et associations en France
  1663. </p>
  1664.         </div>
  1665.               </div>
  1666.     
  1667.             </div>
  1668.           </div>
  1669.           <!-- End Hero-->
  1670.         </section>
  1671.         <!-- End Hero-->
  1672.         
  1673.         <!-- ======= Vignettes Section =======-->
  1674.         <section class=\"about_wrap_area aboutWrapper mb-5\">
  1675.           <div class=\"container\" id=\"jemeconnecte\">
  1676.             <div class=\"row\">
  1677.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  1678.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  1679.                   <img class=\"imageParent\" src=\"";
  1680.         // line 1553
  1681.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/son_sejour.svg"), "html", null, true);
  1682.         yield "\" alt=\"Parent\">
  1683.                   <h3 class=\"titreVignette\">Vous êtes parent</h3>
  1684.                   <p class=\"txtVignette\">Consultez les photos et vidéos à tout moment, <b>et soyez appelé dès qu'un nouveau message vocal est déposé — restez connectés au séjour, où que vous soyez.</b> </p>
  1685.                   <a href=\"";
  1686.         // line 1556
  1687.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Parent");
  1688.         yield "\" class=\"btn btn-primary py-2\">Je me connecte</a>
  1689.                 </div>
  1690.               </div>
  1691.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  1692.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  1693.                   <img class=\"imageAcc\" src=\"";
  1694.         // line 1561
  1695.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/espceAcc.svg"), "html", null, true);
  1696.         yield "\" alt=\"Accompagnateur\">
  1697.                   <h3 class=\"titreVignette titreAcc\">Vous êtes accompagnateur</h3>
  1698.                   <p class=\"txtVignette txtAcc\">Partagez facilement photos et messages pour rassurer les familles — créez et gérez vos séjours en toute simplicité. </p>
  1699.                   <a  data-bs-toggle=\"modal\" data-bs-target=\"#loginModal\"  class=\"btn btn-primary py-2\">Je me connecte</a>
  1700.                 </div>
  1701.               </div>
  1702.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  1703.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"400\">
  1704.                   <img class=\"imagePartenaire\" src=\"";
  1705.         // line 1569
  1706.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/espcPart.svg"), "html", null, true);
  1707.         yield "\" alt=\"Partenaire\">
  1708.                   <h3 class=\"titreVignette titrePartenaire\">Vous êtes partenaire</br></h3>
  1709.                   <p class=\"txtVignette txtPartenaire\">
  1710.                     <br/>Créez et gérez tous vos séjours depuis un espace dédié, avec un service client sur mesure et des outils pensés pour vous.</p>
  1711.                   <a data-bs-toggle=\"modal\" data-bs-target=\"#partnerLoginModal\" class=\"btn btn-primary py-2\">Je me connecte</a>
  1712.                 </div>
  1713.               </div>
  1714.             </div>
  1715.           </div>
  1716.         </section>
  1717.         <!-- End Vignettes -->
  1718.         
  1719.     
  1720.         <!-- ======= Pourquoi nous choisir =======-->
  1721.         <section class=\"section features__v2\" id=\"about\">
  1722.           <div class=\"container\">
  1723.             <div class=\"row\">
  1724.               <div class=\"col-12\">
  1725.                 <div class=\"d-lg-flex p-5 rounded-4 content\" data-aos=\"fade-in\" data-aos-delay=\"0\">
  1726.                   <div class=\"row\">
  1727.                     <div class=\"col-lg-5 mb-5 mb-lg-0\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  1728.                       <div class=\"row\"> 
  1729.                         <div class=\"col-lg-11\">
  1730.                           <div class=\"h-100 flex-column justify-content-between d-flex\">
  1731.                             <div>
  1732.                               <h2 class=\"mb-4\">Pourquoi nous choisir pour vos séjours</h2>
  1733.                               <p class=\"mb-5\">5sur5séjour n'est pas qu'un outil pour les animateurs.
  1734. C'est une solution complète pour les professionnels qui veulent gagner du temps, rassurer les familles, et moderniser leur image.</p>
  1735.                             </div>
  1736.                             <div class=\"align-self-start\">
  1737.                                  <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  1738.               href=\"";
  1739.         // line 1600
  1740.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  1741.         yield "\">
  1742.             Devenir partenaire
  1743.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  1744.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  1745.             </svg>
  1746.           </a>
  1747.                             </div>
  1748.                           </div>
  1749.                         </div>
  1750.                       </div>
  1751.                     </div>
  1752.                     <div class=\"col-lg-7\">
  1753.                       <div class=\"row justify-content-end\">
  1754.                         <div class=\"col-lg-11\">
  1755.                           <div class=\"row\">
  1756.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  1757.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-shield-lock fs-4\"></i></div>
  1758.                               <h3 class=\"fs-6 fw-bold mb-3\">Partage sécurisé</h3>
  1759.                               <p>Galerie privée photos/vidéos, droits par groupes/classes, consentements intégrés.</p>
  1760.                             </div>
  1761.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  1762.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-telephone-outbound fs-4\"></i></div>
  1763.                               <h3 class=\"fs-6 fw-bold mb-3\">Boîte vocale 5sur5   </h3>
  1764.                               <p>Un service historique, revient modernisé pour renforcer encore votre lien avec les familles.</p>
  1765.                             </div>
  1766.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  1767.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-clock fs-4\"></i></div>
  1768.                               <h3 class=\"fs-6 fw-bold mb-3\">Temps gagné</h3>
  1769.                               <p>Publication partagées automatiquement en 2 clics. Aucune intervention de votre part : votre équipe reste tranquille.</p>
  1770.                             </div>
  1771.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  1772.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-headset fs-4\"></i></div>
  1773.                               <h3 class=\"fs-6 fw-bold mb-3\">Support humain</h3>
  1774.                               <p>Accompagnement à la mise en place et support dédié pendant vos séjours.</p>
  1775.                             </div>
  1776.                           </div>
  1777.                         </div>
  1778.                       </div>
  1779.                     </div>
  1780.                   </div>
  1781.                 </div>
  1782.               </div>
  1783.             </div>
  1784.           </div>
  1785.         </section>
  1786.         <!-- End Features-->
  1787.         <section class=\"section py-6 pro-offers\" id=\"pricing\">
  1788.           <div class=\"container position-relative\">
  1789.             <div class=\"text-center mb-5\">
  1790.               <span class=\"subtitle text-uppercase mb-2 tagSection d-inline-flex align-items-center gap-2\" data-aos=\"fade-up\">
  1791.                 <i class=\"bi bi-stars text-warning\"></i> Offres PRO 5sur5
  1792.               </span>
  1793.               <h2 class=\"mb-3\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  1794.                 Une tarification claire pour chaque structure
  1795.               </h2>
  1796.               <p class=\"text-muted mb-0\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  1797.                 Plateforme photo & audio sécurisée, boîte vocale web intégrée, support humain basé en France.
  1798.               </p>
  1799.             </div>
  1801.             <div class=\"row g-4 align-items-stretch\">
  1802.               <!-- Séjour unique -->
  1803.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  1804.                 <div class=\"pro-card h-100\">
  1805.                   <div class=\"pro-card__badge text-secondary\"><i class=\"bi bi-calendar4-week me-2\"></i>Séjour ponctuel</div>
  1806.                   <h3>Séjour Unique</h3>
  1807.                   <p class=\"pro-card__subtitle\">Idéal pour tester la plateforme</p>
  1808.                   <div class=\"pro-card__price\">
  1809.                     <span>39€</span>
  1810.                     <small>/ séjour</small>
  1811.                   </div>
  1812.                   <ul>
  1813.                     <li><i class=\"bi bi-check-circle-fill\"></i>Galerie photo + messages vocaux</li>
  1814.                     <li><i class=\"bi bi-check-circle-fill\"></i>Espace sécurisé pendant 60 jours</li>
  1815.                     <li><i class=\"bi bi-check-circle-fill\"></i>Aucun engagement, aucune surprise</li>
  1816.                     <li><i class=\"bi bi-check-circle-fill\"></i>Support pour l'accompagnateur</li>
  1817.                   </ul>
  1818.                   <a href=\"";
  1819.         // line 1677
  1820.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_creation_simple_creer");
  1821.         yield "\" class=\"btn btn-outline-primary w-100\">
  1822.                     <i class=\"bi bi-plus-circle me-2\"></i>Créer mon séjour
  1823.                   </a>
  1824.                 </div>
  1825.               </div>
  1827.               <!-- Pack annuel -->
  1828.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">
  1829.                 <div class=\"pro-card pro-card--featured h-100 position-relative overflow-hidden\">
  1830.                   <span class=\"pro-card__badge pro-card__badge--featured\"><i class=\"bi bi-fire me-2\"></i>Le plus choisi</span>
  1831.                   <h3>Pack Annuel – 25 séjours</h3>
  1832.                   <p class=\"pro-card__subtitle\">Pour les structures qui partent toute l’année</p>
  1833.                   <div class=\"pro-card__price\">
  1834.                     <span>490€</span>
  1835.                     <small>/ an</small>
  1836.                   </div>
  1837.                   <ul>
  1838.                     <li><i class=\"bi bi-check-circle-fill\"></i>Jusqu’à 25 séjours inclus</li>
  1839.                     <li><i class=\"bi bi-check-circle-fill\"></i>Accompagnateurs & parents illimités</li>
  1840.                     <li><i class=\"bi bi-check-circle-fill\"></i>Mise en place en 24h + onboarding</li>
  1841.                     <li><i class=\"bi bi-check-circle-fill\"></i>Boîte vocale web intégrée</li>
  1842.                   </ul>
  1843.                   <a href=\"";
  1844.         // line 1699
  1845.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  1846.         yield "\" class=\"btn btn-primary w-100\">
  1847.                     <i class=\"bi bi-rocket-takeoff me-2\"></i>Prendre le pack annuel
  1848.                   </a>
  1849.                 </div>
  1850.               </div>
  1852.               <!-- Offres sur mesure -->
  1853.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  1854.                 <div class=\"pro-card h-100\">
  1855.                   <div class=\"pro-card__badge text-secondary\"><i class=\"bi bi-building-up me-2\"></i>Grandes structures</div>
  1856.                   <h3>+25 séjours / an</h3>
  1857.                   <p class=\"pro-card__subtitle\">Partenariat sur mesure & tarifs dégressifs</p>
  1858.                   <div class=\"pro-card__price pro-card__price--quote\">
  1859.                     <span>Sur devis</span>
  1860.                  
  1861.                   </div>
  1862.                   <ul>
  1863.                     <li><i class=\"bi bi-check-circle-fill\"></i>Déploiement multi-sites & multi-équipes</li>
  1864.                     <li><i class=\"bi bi-check-circle-fill\"></i>Tableau de bord groupe</li>
  1865.                     <li><i class=\"bi bi-check-circle-fill\"></i>Contrat cadre + facturation centralisée</li>
  1866.                     <li><i class=\"bi bi-check-circle-fill\"></i>Support prioritaire 7j/7</li>
  1867.                   </ul>
  1868.                   <button type=\"button\" class=\"btn btn-outline-primary w-100\" data-bs-toggle=\"modal\" data-bs-target=\"#grandVolumeModal\">
  1869.                     <i class=\"bi bi-envelope-open me-2\"></i>Parler à un expert
  1870.                   </button>
  1871.                 </div>
  1872.               </div>
  1873.             </div>
  1875.             <div class=\"pro-offers__foot text-center mt-5\" data-aos=\"fade-up\">
  1876.               🎓 <strong>Écoles publiques :</strong> accès à la plateforme sans abonnement &nbsp;•&nbsp; Données hébergées en France &nbsp;•&nbsp; Activation en 24h
  1877.             </div>
  1878.           </div>
  1879.         </section>
  1881.         <style>
  1882.           .pro-offers {
  1883.             background: linear-gradient(135deg, #f5fbff 0%, #f0f5ff 100%);
  1884.             border-top: 1px solid rgba(65,162,170,0.1);
  1885.             border-bottom: 1px solid rgba(65,162,170,0.1);
  1886.           }
  1887.           .pro-card {
  1888.             background: #fff;
  1889.             border-radius: 24px;
  1890.             padding: 32px;
  1891.             box-shadow: 0 25px 60px rgba(15, 40, 77, 0.08);
  1892.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  1893.             height: 100%;
  1894.           }
  1895.           .pro-card:hover {
  1896.             transform: translateY(-6px);
  1897.             box-shadow: 0 30px 70px rgba(15, 40, 77, 0.16);
  1898.           }
  1899.           .pro-card h3 {
  1900.             font-weight: 700;
  1901.             color: #1f2b3a;
  1902.           }
  1903.           .pro-card__subtitle {
  1904.             color: #6b7b8d;
  1905.             margin-bottom: 1rem;
  1906.           }
  1907.           .pro-card__price {
  1908.             display: flex;
  1909.             align-items: baseline;
  1910.             gap: 8px;
  1911.             font-weight: 700;
  1912.             color: #1f2b3a;
  1913.             margin-bottom: 1.25rem;
  1914.           }
  1915.           .pro-card__price span {
  1916.             font-size: 2.4rem;
  1917.             color: #41a2aa;
  1918.           }
  1919.           .pro-card__price--quote span {
  1920.             font-size: 1.8rem;
  1921.           }
  1922.           .pro-card ul {
  1923.             list-style: none;
  1924.             padding: 0;
  1925.             margin: 0 0 1.5rem 0;
  1926.             color: #4b596b;
  1927.             font-size: 0.95rem;
  1928.           }
  1929.           .pro-card ul li {
  1930.             display: flex;
  1931.             gap: 10px;
  1932.             align-items: center;
  1933.             margin-bottom: 0.6rem;
  1934.           }
  1935.           .pro-card ul li i {
  1936.             color: #41a2aa;
  1937.           }
  1938.           .pro-card__badge {
  1939.             font-size: 0.75rem;
  1940.             text-transform: uppercase;
  1941.             letter-spacing: 0.08em;
  1942.             font-weight: 700;
  1943.             margin-bottom: 1rem;
  1944.             display: inline-flex;
  1945.             align-items: center;
  1946.             gap: 4px;
  1947.           }
  1948.           .pro-card--featured {
  1949.             border: 2px solid rgba(65,162,170,0.2);
  1950.             background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  1951.           }
  1952.           .pro-card__badge--featured {
  1953.             background: #fde2d6;
  1954.             color: #c15f29;
  1955.             padding: 0.35rem 0.9rem;
  1956.             border-radius: 999px;
  1957.           }
  1958.           .pro-offers__foot {
  1959.             font-size: 0.95rem;
  1960.             color: #4b596b;
  1961.             font-weight: 500;
  1962.           }
  1963.         </style>
  1964.           <!-- ======= About =======-->
  1965.         <section class=\"about__v4 section\" id=\"about\" style=\"padding: 100px 0;
  1966.     scroll-margin-top: 100px;\">
  1967.         <div class=\"container\">
  1968.     <div class=\"text-center mb-4\">
  1969.       <span class=\"subtitle text-uppercase mb-3 text-center tagSection\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  1970. Et si vous retrouviez l’un des services historiques de 5sur5, repensé pour 2025 ?    </span>
  1972.       <h2 class=\"mb-2\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  1973.  La Boîte Vocale revient, plus simple, plus puissante, et entièrement intégrée à vos séjours    </h2>
  1975.       <p class=\"text-muted mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  1976. Permettez aux familles de rester connectées au quotidien, grâce à une boîte vocale pensée pour rassurer sans solliciter. Simple, rapide et fluide.
  1977.    <br>  </p>
  1979.       
  1980.           <div class=\"container my-5\">
  1981.             <div class=\"row\">
  1982.             
  1983.               <div class=\"col-md-6 order-md-2\">
  1984.                   <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Service unique en France</span>
  1985.                     <h2 class=\"mb-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">La boîte vocale 5sur5 : vos messages, écoutés tout de suite</h2>
  1986.        
  1987.                 <div class=\"row justify-content-end\">
  1988.                   <div class=\"col-md-11 mb-4 mb-md-0\">
  1989.                              <div data-aos=\"fade-up\" data-aos-delay=\"200\">
  1990.                       <p>
  1991.                       
  1992.                      La Boîte Vocale 5sur5 fonctionne immédiatement : nous prenons en charge toute l’installation, la configuration et le support. 
  1993. Chaque message vocal déclenche automatiquement un appel aux parents créant un lien direct  sans perturbation .
  1994.  Aucune action ni intervention n’est requise de votre part.  </p>
  1995.                     </div>
  1996.                     <h4 class=\"small fw-bold mt-4 mb-3\" data-aos=\"fade-up\" data-aos-delay=\"300\">La voix est bien plus consultée qu'un SMS/mail.</h4>
  1997.                     <ul class=\"d-flex flex-row flex-wrap list-unstyled gap-3 features\" data-aos=\"fade-up\" data-aos-delay=\"400\">
  1998.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">–70% d’appels entrants</span></li>
  1999.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">moins de charges pour les animateurs</span></li>
  2000.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">parents rassurés sans effort</span></li>
  2001.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">illimitée</span></li>
  2002.                     </ul>
  2003.                         <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  2004.                href=\"";
  2005.         // line 1857
  2006.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("boite_vocale");
  2007.         yield "\">
  2008.             Commander une boite vocale
  2009.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  2010.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  2011.             </svg>
  2012.           </a>
  2013.                   </div>
  2014.                 </div>
  2015.               </div>
  2016.               <div class=\"col-md-6\"> 
  2017.                 <div class=\"img-wrap position-relative\">
  2018.                   <img class=\"img-fluid rounded-4\" src=\"";
  2019.         // line 1868
  2020.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/feature.png"), "html", null, true);
  2021.         yield "\" alt=\"Sécurité 5sur5séjour\" data-aos=\"fade-up\" data-aos-delay=\"0\" style=\"width: 100%; height: 300px; object-fit: cover;\">
  2022.                   <div class=\"mission-statement p-4 rounded-4 d-flex gap-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  2023.                     <div class=\"mission-icon text-center rounded-circle\"><i class=\"bi bi-lightbulb fs-4\"></i></div>
  2024.                     <div>
  2025.                       <h3 class=\"text-uppercase fw-bold\">Notre mission</h3>
  2026.                       <p class=\"fs-5 mb-0\">Notre mission est de fournir aux structures une communication simple, fiable et professionnelle pour rassurer toutes les familles..</p>
  2027.                     </div>
  2028.                   </div>
  2029.                 </div>
  2030.               </div>
  2031.             </div>
  2032.           </div>
  2033.         </section>
  2035.         <!-- End About-->
  2036.         <!-- ======= How it works =======-->
  2037.         <section class=\"section howitworks__v1\" id=\"how-it-works\">
  2038.           <div class=\"container\">
  2039.             <div class=\"row mb-5\">
  2040.               <div class=\"col-md-6 text-center mx-auto\">
  2041.                 <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Comment ça marche</span>
  2042.                 <h2 data-aos=\"fade-up\" data-aos-delay=\"100\">Simple pour vous, magique pour les familles</h2>
  2043.                 <p data-aos=\"fade-up\" data-aos-delay=\"200\">Une plateforme complète qui centralise contenus et communications, pour partager le séjour avec les familles en toute simplicité, sans surcharge pour les équipes.</p>
  2044.               </div>
  2045.             </div>
  2046.             <div class=\"row g-md-5\">
  2047.               <div class=\"col-md-6 col-lg-3\">
  2048.                 <div class=\"step-card text-center h-100 d-flex flex-column justify-content-start position-relative\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  2049.                   <div data-aos=\"fade-right\" data-aos-delay=\"500\">
  2050.                     <img class=\"arch-line\" src=\"";
  2051.         // line 1897
  2052.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/arch-line.png"), "html", null, true);
  2053.         yield "\" alt=\"Flèche animation\">
  2054.                   </div>
  2055.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">1</span>
  2056.                   <div>
  2057.                     <h3 class=\"fs-5 mb-4\">Créez l'espace séjour</h3>
  2058.                     <p>Créez votre séjour en quelques clics… ou confiez-nous l'import de plusieurs séjours,<strong> on s'occupe de tout.</strong></p>
  2059.                   </div>
  2060.                 </div>
  2061.               </div>
  2062.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"600\">
  2063.                 <div class=\"step-card reverse text-center h-100 d-flex flex-column justify-content-start position-relative\">
  2064.                   <div data-aos=\"fade-right\" data-aos-delay=\"1100\">
  2065.                     <img class=\"arch-line reverse\" src=\"";
  2066.         // line 1909
  2067.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/arch-line-reverse.png"), "html", null, true);
  2068.         yield "\" alt=\"Flèche animation\">
  2069.                   </div>
  2070.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">2</span>
  2071.                   <h3 class=\"fs-5 mb-4\">Invitez les familles</h3>
  2072.                   <p>Envoyez le code de séjour aux familles pour qu'ils rejoignent l'espace séjour. </p>
  2073.                 </div>
  2074.               </div>
  2075.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"1200\">
  2076.                 <div class=\"step-card text-center h-100 d-flex flex-column justify-content-start position-relative\">
  2077.                   <div data-aos=\"fade-right\" data-aos-delay=\"1700\">
  2078.                     <img class=\"arch-line\" src=\"";
  2079.         // line 1919
  2080.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/arch-line.png"), "html", null, true);
  2081.         yield "\" alt=\"Flèche animation\">
  2082.                   </div>
  2083.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">3</span>
  2084.                   <h3 class=\"fs-5 mb-4\">Publiez en 2 clics</h3>
  2085.                   <p>Diffusez vos photos, vidéos et messages vocaux <strong>en toute simplicité.</strong></p>
  2086.                 </div>
  2087.               </div>
  2088.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"1800\">
  2089.                 <div class=\"step-card last text-center h-100 d-flex flex-column justify-content-start position-relative\">
  2090.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">4</span>
  2091.                   <div>
  2092.                     <h3 class=\"fs-5 mb-4\">Bilan & archive</h3>
  2093.                     <p>À la fin du séjour, accédez à un bilan complet avec statistiques, et proposez aux familles des produits souvenir personnalisés.</p>
  2094.                   </div>
  2095.                 </div>
  2096.               </div>
  2097.             </div>
  2098.           </div>
  2099.         </section>
  2100.         <!-- End How it works-->
  2101.         
  2102.         <!-- ======= Pricing =======-->
  2103.      
  2104. <section class=\"py-5 bg-light d-none\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  2105.   <div class=\"container text-center\" style=\"display:none\">
  2106.     <span class=\"subtitle text-uppercase mb-2 text-center tagSection\">Séjour ponctuel</span>
  2107.     <h2 class=\"mb-3\">Un séjour simple, tout compris</h2>
  2108.     <p class=\"text-muted mb-4 mx-auto\" style=\"max-width: 700px;\">
  2109.       Vous organisez un seul séjour dans l’année ?  
  2110.       5sur5Séjour vous permet de partager photos, vidéos et messages vocaux avec les familles  
  2111.       sans abonnement ni engagement.
  2112.     </p>
  2114.     <div class=\"p-5 bg-white shadow-sm rounded-4 mx-auto\" style=\"max-width: 600px;\">
  2115.       <div class=\"display-6 fw-semibold mb-1\" style=\"color: #41a2aa;\">
  2116.         <i class=\"bi bi-building-check\"></i> Prise en charge par la structure
  2117.       </div>
  2118.       <div class=\"text-muted mb-3 small\">
  2119.         Boîte vocale incluse · Tarif préférentiel partenaire
  2120.       </div>
  2121.       <ul class=\"list-unstyled text-start d-inline-block mb-4\">
  2122.         <li>✅ Accès complet à la plateforme pendant 60 jours</li>
  2123.         <li>✅ Galerie <strong>photos & vidéos</strong> sécurisée</li>
  2124.        
  2125.         <li>✅ Consentements <strong>RGPD</strong> hébergés en France</li>
  2126.         <li>➡️ Ajouter la Boîte Vocale pour appeler automatiquement les parents après chaque message <li>
  2127.       </ul>
  2128.       <a href=\"";
  2129.         // line 1966
  2130.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_creation_simple_creer");
  2131.         yield "\" class=\"btn btn-primary px-4 py-2\">
  2132.         <i class=\"bi bi-calculator\"></i> Obtenir un devis
  2133.       </a>
  2134.       <p class=\"text-muted small mt-3\">Idéal pour un premier usage ou un séjour unique.</p>
  2135.     </div>
  2136.   </div>
  2137. </section>
  2141.   
  2142. <!-- BANDEAU CTA FINAL -->
  2143. <section class=\"py-5\">
  2144.   <div class=\"container\">
  2145.     <div class=\"cta-section p-4 p-md-5 text-center\" data-aos=\"fade-up\">
  2146.       <h3 class=\"fw-bold mb-2\">Prêt à gagner du temps et rassurer 100&nbsp;% des familles&nbsp;?</h3>
  2147.       <p class=\"text-muted mb-4\">Choisissez votre pack — on vous met en place en 24&nbsp;h, et on vous accompagne pas à pas.</p>
  2149.       <div class=\"d-flex flex-wrap justify-content-center gap-3\">
  2150.         <a href=\"";
  2151.         // line 1985
  2152.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_creation_simple_creer");
  2153.         yield "\"
  2154.            class=\"btn btn-outline-primary btn-lg px-4\">
  2155.           <i class=\"bi bi-plus-circle me-2\"></i>Créer un séjour simple
  2156.         </a>
  2158.         <a href=\"";
  2159.         // line 1990
  2160.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("boite_vocale");
  2161.         yield "\"
  2162.            class=\"btn btn-secondary btn-lg px-4\" >
  2163.           <i class=\"bi bi-telephone me-2\"></i>Commander boîte vocale
  2164.         </a>
  2166.         <a href=\"";
  2167.         // line 1995
  2168.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("pack_annuel_partenaires");
  2169.         yield "\" style=\"background-color: #F09E7A; border-color: #F09E7A; color: #fff;\"
  2170.            class=\"btn btn-primary btn-lg px-4\">
  2171.           <i class=\"bi bi-rocket-takeoff me-2\"></i>Prendre le pack annuel
  2172.         </a>
  2173.       </div>
  2175.       <div class=\"mt-3 small \">
  2176.         <i class=\"bi bi-shield-lock me-1\"></i>Paiement sécurisé • <i class=\"bi bi-check2-circle ms-1 me-1\"></i>Mise en place totale par l'équipe 5sur5
  2177.       </div>
  2178.     </div>
  2179.   </div>
  2180. </section>
  2181.     
  2182.         <!-- ======= Stats =======-->
  2183.         <section class=\"stats__v3 section\">
  2184.           <div class=\"container\">
  2185.             <div class=\"row\">
  2186.               <div class=\"col-12\">
  2187.                 <div class=\"d-flex flex-wrap content rounded-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  2188.                   <div class=\"rounded-borders\">
  2189.                     <div class=\"rounded-border-1\"></div>
  2190.                     <div class=\"rounded-border-2\"></div>
  2191.                     <div class=\"rounded-border-3\"></div>
  2192.                   </div>
  2193.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"80\">
  2194.                     <div class=\"stat-item\">
  2195.                       <h3 class=\"fs-1 fw-bold\">+<span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"90\" data-purecounter-duration=\"2\">0</span><span>%</span></h3>
  2196.                       <p class=\"mb-0\">des familles connectées dès J1
  2197. Invitation simple, lien sécurisé</p>
  2198.                     </div>
  2199.                   </div>
  2200.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  2201.                     <div class=\"stat-item\">
  2202.                       <h3 class=\"fs-1 fw-bold\"> > <span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"370\" data-purecounter-duration=\"2\">0</span><span>k+</span></h3>
  2203.                       <p class=\"mb-0\">enfants suivis
  2204. Confiance des établissements & associations</p>
  2205.                     </div>
  2206.                   </div>
  2207.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  2208.                     <div class=\"stat-item\">
  2209.                       <h3 class=\"fs-1 fw-bold\"><span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"20\" data-purecounter-duration=\"2\">0</span><span>K+</span></h3>
  2210.                       <p class=\"mb-0\">séjours accompagnés
  2211. Partout en France et à l'étranger</p>
  2212.                     </div>
  2213.                   </div>
  2214.                 </div>
  2215.               </div>
  2216.             </div>
  2217.           </div>
  2218.         </section>
  2219.         <!-- End Stats-->
  2220.         
  2221.         <!-- ======= Services =======-->
  2222.        <section class=\"section services__v3\" id=\"souvenirs\">
  2223.           <div class=\"container\">
  2224.             <div class=\"row mb-5\">
  2225.               <div class=\"col-md-8 mx-auto text-center\">
  2226.         <span class=\"subtitle text-uppercase mb-2\" data-aos=\"fade-up\" data-aos-delay=\"0\">Produits 5sur5</span>
  2227.         <h2 class=\"mb-2\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  2228.           Souvenirs premium, <span class=\"whitespace-nowrap\">fabriqués en France</span> 
  2229.         </h2>
  2230.         <p class=\"text-muted\" data-aos=\"fade-up\" data-aos-delay=\"150\">
  2231.           Offrez aux familles un souvenir durable du séjour. Qualité premium, expédition rapide, et
  2232.           possibilité d'<strong>achat groupé –20%</strong> pour les établissements.
  2233.         </p>
  2234.               </div>
  2235.             </div>
  2237.             <div class=\"row g-4\">
  2238.       <!-- Carte 1 : Albums -->
  2239.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  2240.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  2241.                   <div>
  2242.             <figure class=\"product-visual\" style=\"\"  width: 100%;
  2243.   height: 200px;                /* hauteur demandée */
  2244.   display: flex;
  2245.   align-items: center;
  2246.   justify-content: center;      /* image centrée */
  2247.   background: rgba(47,167,163,.06);
  2248.   border-radius: 16px;
  2249.   overflow: hidden;
  2250.   margin-bottom: 16px;>
  2251.         <img style=\" max-width: 100%;
  2252.   max-height: 100%;
  2253.   object-fit: contain;          /* garde le ratio, pas de crop */
  2254.   display: block;\"
  2255.           src=\"https://5sur5sejour.com/images/produit/LivreSouvenir5sur5-1.jpg\"
  2256.           alt=\"Album photo premium 5sur5\"
  2257.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  2258.           sizes=\"(min-width:992px) 330px, 90vw\">
  2259.       </figure>
  2260.             
  2261.             <h3 class=\"fs-5 mb-3\">Album photo premium</h3>
  2262.             <p class=\"mb-4\">
  2263.               Le souvenir incontournable du séjour. Qualité soignée, fabrication locale en France et
  2264.               <strong>livraison gratuite</strong> pour les familles.
  2265.             </p>
  2266.                   </div>
  2267.           <a class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"https://futur.5sur5sejour.fr/Accueil5sur5/album/Album%20photos\" target=\"_blank\">
  2268.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  2269.             <span>Voir les modèles d'albums</span>
  2270.                   </a>
  2271.                 </div>
  2272.               </div>
  2274.       <!-- Carte 2 : Tirages & souvenirs -->
  2275.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  2276.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  2277.                   <div>
  2278.            <figure class=\"product-visual\" style=\"\"  width: 100%;
  2279.   height: 200px;                /* hauteur demandée */
  2280.   display: flex;
  2281.   align-items: center;
  2282.   justify-content: center;      /* image centrée */
  2283.   background: rgba(47,167,163,.06);
  2284.   border-radius: 16px;
  2285.   overflow: hidden;
  2286.   margin-bottom: 16px;>
  2287.         <img style=\" max-width: 100%;
  2288.   max-height: 100%;
  2289.   object-fit: contain;          /* garde le ratio, pas de crop */
  2290.   display: block;\"
  2291.           src=\"https://5sur5sejour.com/images/produit/PochettePhoto5sur5-2.jpg\"
  2292.           alt=\"Album photo premium 5sur5\"
  2293.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  2294.           sizes=\"(min-width:992px) 330px, 90vw\">
  2295.       </figure>
  2296.             
  2297.            
  2298.             <h3 class=\"fs-5 mb-3\">Tirages & produits souvenirs</h3>
  2299.             <p class=\"mb-4\">
  2300.               Tirages photo et articles souvenirs 5sur5 pour prolonger l'expérience du séjour.
  2301.               Qualité premium, <strong>fabriqués en France</strong>.
  2302.             </p>
  2303.                   </div>
  2304.           <a class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"";
  2305.         // line 2130
  2306.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("boutique5sur5_Souvenir");
  2307.         yield "\">
  2308.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  2309.             <span>Découvrir les souvenirs</span>
  2310.                   </a>
  2311.                 </div>
  2312.               </div>
  2314.       <!-- Carte 3 : Achat groupé -20% -->
  2315.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  2316.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  2317.                   <div>
  2318.                <figure class=\"product-visual\" style=\"\"  width: 100%;
  2319.   height: 200px;                /* hauteur demandée */
  2320.   display: flex;
  2321.   align-items: center;
  2322.   justify-content: center;      /* image centrée */
  2323.   background: rgba(47,167,163,.06);
  2324.   border-radius: 16px;
  2325.   overflow: hidden;
  2326.   margin-bottom: 16px;>
  2327.         <img style=\" max-width: 100%;
  2328.   max-height: 100%;
  2329.   object-fit: contain;          /* garde le ratio, pas de crop */
  2330.   display: block;\"
  2331.           src=\"https://5sur5sejour.com/images/produit/Album5sur5-3.jpg\"
  2332.           alt=\"Album photo premium 5sur5\"
  2333.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  2334.           sizes=\"(min-width:992px) 330px, 90vw\">
  2335.       </figure>
  2336.            
  2337.             <h3 class=\"fs-5 mb-3\">Achat groupé établissement –20%</h3>
  2338.             <p class=\"mb-4\">
  2339.               Activez l'option \"achat groupé\" pour la classe/le séjour et bénéficiez de
  2340.               <strong>–20% de réduction</strong> avec <strong>livraison gratuite</strong>. Simple à organiser, apprécié des familles.
  2341.             </p>
  2342.                   </div>
  2343.           <a  data-bs-toggle=\"modal\"
  2344.    data-bs-target=\"#groupBuyLite\"
  2345.    data-action=\"group_buy_open\" class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"#achat-groupe\">
  2346.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  2347.             <span>Activer l'achat groupé</span>
  2348.                   </a>
  2349.                 </div>
  2350.               </div>
  2351.             </div>
  2353.     <!-- Micro-barre de réassurance (discrète) -->
  2354.     <div class=\"text-center text-muted small mt-4\">
  2355.       Fabriqué en France · Livraison gratuite · Qualité premium 5sur5 · Possibilité de <strong>partage des bénéfices</strong> pour les partenaires
  2356.     </div>
  2357.   </div>
  2358. </section>
  2360.       
  2362.         <!-- ======= Contact =======-->
  2363.         <section class=\"section contact__v2\" id=\"contact\">
  2364.           <div class=\"container\">
  2365.             <div class=\"row mb-5\">
  2366.               <div class=\"col-md-6 col-lg-7 mx-auto text-center\">
  2367.                 <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Contact</span>
  2368.                 <h2 class=\"h2 fw-bold mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Nous contacter</h2>
  2369.                 <p data-aos=\"fade-up\" data-aos-delay=\"100\">Nous sommes à votre écoute pour répondre à vos questions et vous aider à mieux comprendre nos services.</p>
  2370.               </div>
  2371.             </div>
  2372.             <div class=\"row\">
  2373.               <div class=\"col-md-6\">
  2374.                 <div class=\"d-flex gap-5 flex-column\">
  2375.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  2376.                     <div class=\"icon d-block\"><i class=\"bi bi-telephone\"></i></div>
  2377.                     <span>
  2378.                       <span class=\"d-block\">Téléphone</span>
  2379.                       <strong>05 36 28 29 30</strong>
  2380.                     </span>
  2381.                   </div>
  2382.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  2383.                     <div class=\"icon d-block\"><i class=\"bi bi-send\"></i></div>
  2384.                     <span>
  2385.                       <span class=\"d-block\">Email</span>
  2386.                       <strong>contact@5sur5sejour.com</strong>
  2387.                     </span>
  2388.                   </div>
  2389.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  2390.                     <div class=\"icon d-block\"><i class=\"bi bi-geo-alt\"></i></div>
  2391.                     <span>
  2392.                       <span class=\"d-block\">Adresse</span>
  2393.                       <address class=\"fw-bold\">5sur5séjour<br>France</address>
  2394.                     </span>
  2395.                   </div>
  2396.                 </div>
  2397.               </div>
  2398.               <div class=\"col-md-6\">
  2399.                 <div class=\"form-wrapper\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  2400.                   <div class=\"text-center mb-4\">
  2401.                     <a href=\"#\" class=\"btn btn-primary btn-lg\" data-action=\"cta_expert\" data-pack=\"contact\">
  2402.                       Parler à un expert maintenant
  2403.                     </a>
  2404.                     <p class=\"text-muted mt-3 mb-0\">Ou utilisez le formulaire ci-dessous pour nous laisser un message</p>
  2405.                   </div>
  2406.                   <form id=\"contactFormSection\" action=\"";
  2407.         // line 2229
  2408.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_contact");
  2409.         yield "\" method=\"POST\">
  2410.                     <div class=\"row gap-3 mb-3\">
  2411.                       <div class=\"col-md-12\">
  2412.                         <label class=\"mb-2\" for=\"name\">Nom</label>
  2413.                         <input class=\"form-control\" id=\"name\" type=\"text\" name=\"name\" required=\"\">
  2414.                       </div>
  2415.                       <div class=\"col-md-12\">
  2416.                         <label class=\"mb-2\" for=\"email\">Email</label>
  2417.                         <input class=\"form-control\" id=\"email\" type=\"email\" name=\"email\" required=\"\">
  2418.                       </div>
  2419.                     </div>
  2420.                     <div class=\"row gap-3 mb-3\">
  2421.                       <div class=\"col-md-12\">
  2422.                         <label class=\"mb-2\" for=\"subject\">Sujet</label>
  2423.                         <input class=\"form-control\" id=\"subject\" type=\"text\" name=\"subject\">
  2424.                       </div>
  2425.                     </div>
  2426.                     <div class=\"row gap-3 gap-md-0 mb-3\">
  2427.                       <div class=\"col-md-12\">
  2428.                         <label class=\"mb-2\" for=\"message\">Message</label>
  2429.                         <textarea class=\"form-control\" id=\"message\" name=\"message\" rows=\"5\" required=\"\"></textarea>
  2430.                       </div>
  2431.                     </div>
  2432.                     <button class=\"btn btn-primary fw-semibold\" type=\"submit\">Envoyer le message</button>
  2433.                   </form>
  2434.                   <div class=\"mt-3 d-none alert alert-success\" id=\"successMessageSection\">Message envoyé avec succès !</div>
  2435.                   <div class=\"mt-3 d-none alert alert-danger\" id=\"errorMessageSection\">Échec de l'envoi du message. Veuillez réessayer plus tard.</div>
  2436.                 </div>
  2437.               </div>
  2438.             </div>
  2439.           </div>
  2440.         </section>
  2441.         <!-- End Contact-->
  2442.         
  2443.         <!-- ======= Footer =======-->
  2444.     
  2445.         ";
  2446.         // line 2265
  2447.         yield from $this->unwrap()->yieldBlock('Footer', $context, $blocks);
  2448.         // line 2268
  2449.         yield "
  2450.         <!-- End Footer-->
  2451.         
  2452.       </main>
  2453.     </div>
  2454.     
  2455.     <!-- ======= Back to Top =======-->
  2456.     <button id=\"back-to-top\"><i class=\"bi bi-arrow-up-short\"></i></button>
  2457.     <!-- End Back to top-->
  2458.     
  2459.     <!-- ======= Javascripts =======-->
  2460.     <script src=\"";
  2461.         // line 2279
  2462.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/bootstrap/bootstrap.bundle.min.js"), "html", null, true);
  2463.         yield "\"></script>
  2464.     <script src=\"";
  2465.         // line 2280
  2466.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/gsap/gsap.min.js"), "html", null, true);
  2467.         yield "\"></script>
  2468.     <script src=\"";
  2469.         // line 2281
  2470.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/imagesloaded/imagesloaded.pkgd.min.js"), "html", null, true);
  2471.         yield "\"></script>
  2472.     <script src=\"";
  2473.         // line 2282
  2474.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/isotope/isotope.pkgd.min.js"), "html", null, true);
  2475.         yield "\"></script>
  2476.     <script src=\"";
  2477.         // line 2283
  2478.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/glightbox/glightbox.min.js"), "html", null, true);
  2479.         yield "\"></script>
  2480.     <script src=\"";
  2481.         // line 2284
  2482.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/swiper/swiper-bundle.min.js"), "html", null, true);
  2483.         yield "\"></script>
  2484.     <script src=\"";
  2485.         // line 2285
  2486.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/aos/aos.js"), "html", null, true);
  2487.         yield "\"></script>
  2488.     <script src=\"";
  2489.         // line 2286
  2490.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/vendors/purecounter/purecounter.js"), "html", null, true);
  2491.         yield "\"></script>
  2492.     <script src=\"";
  2493.         // line 2287
  2494.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/js/js_nova.js"), "html", null, true);
  2495.         yield "\"></script>
  2496.     <script src=\"";
  2497.         // line 2288
  2498.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/js/test-animations.js"), "html", null, true);
  2499.         yield "\"></script>
  2500.     
  2501.     <!-- Initialize AOS -->
  2502.     <script>
  2503.       document.addEventListener('DOMContentLoaded', function() {
  2504.         console.log('DOM loaded, initializing AOS...');
  2505.         
  2506.         // Initialize AOS
  2507.         AOS.init({
  2508.           duration: 1000,
  2509.           easing: 'ease-in-out',
  2510.           once: true,
  2511.           mirror: false
  2512.         });
  2513.         
  2514.         console.log('AOS initialized');
  2515.         
  2516.         // Initialize PureCounter
  2517.         new PureCounter();
  2518.         
  2519.         // Initialize GLightbox
  2520.         const lightbox = GLightbox({
  2521.           selector: '.glightbox'
  2522.         });
  2523.         
  2524.         // Debug: Check if arch-line images are loaded
  2525.         const archLines = document.querySelectorAll('.arch-line');
  2526.         console.log('Found arch-line elements:', archLines.length);
  2527.         archLines.forEach((line, index) => {
  2528.           console.log(`Arch-line \${index + 1}:`, line.src, line.complete ? 'loaded' : 'loading...');
  2529.         });
  2530.         
  2531.         // Smooth scrolling for anchor links
  2532.         document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {
  2533.           anchor.addEventListener('click', function (e) {
  2534.             e.preventDefault();
  2535.             const target = document.querySelector(this.getAttribute('href'));
  2536.             if (target) {
  2537.               target.scrollIntoView({
  2538.                 behavior: 'smooth',
  2539.                 block: 'start'
  2540.               });
  2541.             }
  2542.           });
  2543.         });
  2544.         
  2545.         // Back to top button
  2546.         const backToTop = document.getElementById('back-to-top');
  2547.         if (backToTop) {
  2548.           window.addEventListener('scroll', function() {
  2549.             if (window.pageYOffset > 100) {
  2550.               backToTop.style.display = 'block';
  2551.             } else {
  2552.               backToTop.style.display = 'none';
  2553.             }
  2554.           });
  2555.           
  2556.           backToTop.addEventListener('click', function() {
  2557.             window.scrollTo({
  2558.               top: 0,
  2559.               behavior: 'smooth'
  2560.             });
  2561.           });
  2562.         }
  2563.         
  2564.         // Animation des flèches pour l'ancienne section
  2565.         function startArrowAnimation() {
  2566.           const arrowImg = document.querySelector('.MyImgFirstPosition');
  2567.           const lineImg = document.querySelector('.MyLineFirstPosition');
  2568.           
  2569.           if (arrowImg && lineImg) {
  2570.             // Démarrer l'animation après 1 seconde
  2571.             setTimeout(() => {
  2572.               arrowImg.classList.add('Myimg');
  2573.               lineImg.classList.add('MyLine');
  2574.             }, 1000);
  2575.           }
  2576.         }
  2577.         
  2578.         // Démarrer l'animation des flèches
  2579.         startArrowAnimation();
  2580.         
  2581.         // Slider simple (sans Owl Carousel pour l'instant)
  2582.         let currentSlide = 0;
  2583.         const slides = document.querySelectorAll('.single_slider');
  2584.         
  2585.         function showSlide(index) {
  2586.           slides.forEach((slide, i) => {
  2587.             slide.style.display = i === index ? 'flex' : 'none';
  2588.           });
  2589.         }
  2590.         
  2591.         function nextSlide() {
  2592.           currentSlide = (currentSlide + 1) % slides.length;
  2593.           showSlide(currentSlide);
  2594.         }
  2595.         
  2596.         // Initialiser le slider
  2597.         if (slides.length > 0) {
  2598.           showSlide(0);
  2599.           // Changer de slide toutes les 5 secondes
  2600.           setInterval(nextSlide, 5000);
  2601.         }
  2602.         
  2603.         // Nouveau slider functionality
  2604.         let currentHeroSlide = 0;
  2605.         const heroSlides = [
  2606.           {
  2607.             title: \"Révolutionnez la Communication\",
  2608.             description: \"Partagez vos aventures avec les familles en toute sécurité grâce à notre plateforme, agrémentée de photos, de vidéos et messages.\",
  2609.             image: \"";
  2610.         // line 2398
  2611.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/slider/child-laughing.jpg"), "html", null, true);
  2612.         yield "\"
  2613.           },
  2614.           {
  2615.             title: \"La plateforme qui rassure les familles\",
  2616.             description: \"Partagez vos souvenirs en toute sécurité avec des photos, vidéos et messages vocaux.\",
  2617.             image: \"";
  2618.         // line 2403
  2619.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/secure.jpg"), "html", null, true);
  2620.         yield "\"
  2621.           },
  2622.           {
  2623.             title: \"Messages vocaux et photos\",
  2624.             description: \"Restez connecté avec votre enfant tout au long du séjour grâce à notre technologie sécurisée.\",
  2625.             image: \"";
  2626.         // line 2408
  2627.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/slider/bg-slider.svg"), "html", null, true);
  2628.         yield "\"
  2629.           }
  2630.         ];
  2631.         
  2632.         function changeSlide(direction) {
  2633.           currentHeroSlide = (currentHeroSlide + direction + heroSlides.length) % heroSlides.length;
  2634.           updateHeroSlider();
  2635.         }
  2636.         
  2637.         function updateHeroSlider() {
  2638.           const titleElement = document.querySelector('.hero-slider-title');
  2639.           const descriptionElement = document.querySelector('.hero-slider-description');
  2640.           const imageElement = document.querySelector('.hero-slider-image img');
  2641.           
  2642.           if (titleElement && descriptionElement && imageElement) {
  2643.             // Animation de transition
  2644.             titleElement.style.opacity = '0';
  2645.             descriptionElement.style.opacity = '0';
  2646.             
  2647.             setTimeout(() => {
  2648.               titleElement.textContent = heroSlides[currentHeroSlide].title;
  2649.               descriptionElement.textContent = heroSlides[currentHeroSlide].description;
  2650.               imageElement.src = heroSlides[currentHeroSlide].image;
  2651.               
  2652.               titleElement.style.opacity = '1';
  2653.               descriptionElement.style.opacity = '1';
  2654.             }, 300);
  2655.           }
  2656.         }
  2657.         
  2658.         // Auto-play pour le nouveau slider
  2659.         setInterval(() => {
  2660.           changeSlide(1);
  2661.         }, 6000);
  2662.         
  2663.         // Gestion du formulaire de contact de la section contact
  2664.         const contactFormSection = document.getElementById('contactFormSection');
  2665.         const successMessageSection = document.getElementById('successMessageSection');
  2666.         const errorMessageSection = document.getElementById('errorMessageSection');
  2667.         
  2668.         if (contactFormSection) {
  2669.           contactFormSection.addEventListener('submit', function(e) {
  2670.             e.preventDefault();
  2671.             
  2672.             // Masquer les messages précédents
  2673.             successMessageSection.classList.add('d-none');
  2674.             errorMessageSection.classList.add('d-none');
  2675.             
  2676.             // Désactiver le bouton pendant l'envoi
  2677.             const submitButton = contactFormSection.querySelector('button[type=\"submit\"]');
  2678.             const originalText = submitButton.textContent;
  2679.             submitButton.textContent = 'Envoi en cours...';
  2680.             submitButton.disabled = true;
  2681.             
  2682.             // Récupérer les données du formulaire
  2683.             const formData = new FormData(contactFormSection);
  2684.             
  2685.             // Envoyer la requête AJAX
  2686.             fetch(contactFormSection.action, {
  2687.               method: 'POST',
  2688.               body: formData,
  2689.               headers: {
  2690.                 'X-Requested-With': 'XMLHttpRequest'
  2691.               }
  2692.             })
  2693.             .then(response => response.json())
  2694.             .then(data => {
  2695.               if (data.success) {
  2696.                 // Afficher le message de succès
  2697.                 successMessageSection.textContent = data.message;
  2698.                 successMessageSection.classList.remove('d-none');
  2699.                 
  2700.                 // Réinitialiser le formulaire
  2701.                 contactFormSection.reset();
  2702.               } else {
  2703.                 // Afficher le message d'erreur
  2704.                 errorMessageSection.textContent = data.message;
  2705.                 errorMessageSection.classList.remove('d-none');
  2706.               }
  2707.             })
  2708.             .catch(error => {
  2709.               console.error('Erreur:', error);
  2710.               errorMessageSection.textContent = 'Une erreur est survenue lors de l\\'envoi du message. Veuillez réessayer plus tard.';
  2711.               errorMessageSection.classList.remove('d-none');
  2712.             })
  2713.             .finally(() => {
  2714.               // Réactiver le bouton
  2715.               submitButton.textContent = originalText;
  2716.               submitButton.disabled = false;
  2717.             });
  2718.           });
  2719.         }
  2720.         
  2721.       });
  2722.     </script>
  2723.     <!-- End JavaScripts-->
  2725. <!-- MODAL CONNEXION -->
  2726. <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">
  2727.   <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  2728.     <div class=\"modal-content rounded-4\">
  2729.       <div class=\"modal-header border-0\">
  2730.         <h5 class=\"modal-title fw-bold\">Accéder à mon espace de séjour </h5>
  2731.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  2732.       </div>
  2733.       <div class=\"modal-body p-4\">
  2734.         <div class=\"row g-4 align-items-center\">
  2735.           <div class=\"col-lg-5 text-center border-end\">
  2736.             <img src=\"/images/Accompagnateur/LogoEspaceAccom.svg\" alt=\"Espace accompagnateur\" class=\"img-fluid mb-3\" style=\"max-height: 120px;\">
  2737.             <p class=\"small text-muted mb-0\">
  2738.               Retrouvez votre séjour, publiez vos contenus et rassurez les familles en temps réel.
  2739.             </p>
  2740.           </div>
  2741.           <div class=\"col-lg-7\">
  2742.             <div class=\"titleAutre mb-3\">Vous êtes accompagnateur et disposez déjà d'un identifiant et d'un mot de passe.</div>
  2743.             <form method=\"post\" class=\"fomru\" action=\"";
  2744.         // line 2523
  2745.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Acommpa");
  2746.         yield "\">
  2747.               <div class=\"form-group d-grid gap-3\">
  2748.                 <input type=\"text\" value=\"\" name=\"email\" id=\"modalInputEmail\" class=\"form-control\" placeholder=\" Code séjour de l'accompagnateur * \">
  2749.                 <input type=\"password\" name=\"password\" id=\"modalInputPassword\" class=\"form-control\" placeholder=\"mot de passe fourni à l'organisme * \">
  2750.                 <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  2751.         // line 2527
  2752.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  2753.         yield "\">
  2754.                 <div class=\"description\"><a href=\"#\" data-bs-toggle=\"modal\" data-bs-target=\"#mdpoblier\" style=\"color:#f09e7a;\">Vous avez oublié votre mot de passe</a></div>
  2755.               </div>
  2756.               <div class=\"d-grid mt-4\">
  2757.                 <button class=\"btn btn-primary rounded-3\" type=\"submit\">Je me connecte</button>
  2758.               </div>
  2759.             </form>
  2760.           </div>
  2761.         </div>
  2762.       </div>
  2763.     </div>
  2764.   </div>
  2765. </div>
  2767. <!-- MODAL MOT DE PASSE OUBLIÉ -->
  2768. <div class=\"modal fade\" id=\"mdpoblier\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">
  2769.   <div class=\"modal-dialog\" role=\"document\">
  2770.     <div class=\"modal-content\" style=\"border-radius: 0px;top: 50px;width: 55%;margin: auto;min-width: 270px;\">
  2771.       <div class=\"modal-header\">
  2772.         <button type=\"button\" class=\"close\" data-bs-dismiss=\"modal\" aria-label=\"Close\">
  2773.           <img src=\"";
  2774.         // line 2547
  2775.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("images/Groupe_526.svg"), "html", null, true);
  2776.         yield "\">
  2777.         </button>
  2778.       </div>
  2779.       <div class=\"modal-body\" style=\"text-align:center\">
  2780.         <h5 class=\"modal-title\" id=\"exampleModalLabel\" style=\"margin-left:15px; margin-bottom: 15px\">
  2781.           <img class=\"imageLogo2\" style=\"width: 58% !important;\" src=\"";
  2782.         // line 2552
  2783.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.svg"), "html", null, true);
  2784.         yield "\">
  2785.         </h5>
  2786.         <div class=\"row no-margin\" style=\"padding-bottom: 40px;\">
  2787.           <div class=\"col-md-12 col-sm-12 col-xs-12 descTitre\">
  2788.             <strong>Vous avez oublié votre mot de passe ? Contactez notre équipe 5sur5sejour au 05 36 28 29 30.</strong>
  2789.           </div>
  2790.         </div>
  2791.       </div>
  2792.     </div>
  2793.   </div>
  2794. </div>
  2796. <!-- MODAL CONNEXION PARTENAIRE -->
  2797. <div class=\"modal fade\" id=\"partnerLoginModal\" tabindex=\"-1\" aria-hidden=\"true\">
  2798.   <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  2799.     <div class=\"modal-content rounded-4\">
  2800.       <div class=\"modal-header border-0\">
  2801.         <h5 class=\"modal-title fw-bold\">Espace Partenaire - Connexion</h5>
  2802.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  2803.       </div>
  2804.       <div class=\"modal-body p-4\">
  2805.         <div class=\"row g-4 align-items-center\">
  2806.           <div class=\"col-lg-5 text-center border-end\">
  2807.             <img src=\"";
  2808.         // line 2575
  2809.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/espcPart.svg"), "html", null, true);
  2810.         yield "\" alt=\"Espace partenaire\" class=\"img-fluid mb-3\" style=\"max-height: 120px;\">
  2811.             <p class=\"small text-muted mb-0\">
  2812.               Créez et gérez tous vos séjours depuis un espace dédié, avec un service client sur mesure et des outils pensés pour vous.
  2813.             </p>
  2814.           </div>
  2815.           <div class=\"col-lg-7\">
  2816.             <div class=\"titleAutre mb-3\">Vous êtes partenaire</div>
  2817.             <div class=\"sous-titrecnx mb-3\">Bienvenue dans votre espace 5 sur 5 séjour</div>
  2818.             <div class=\"descriptioncnx mb-4\">Entrez votre identifiant et votre mot de passe afin d'entrer dans votre plateforme d'administration</div>
  2819.             
  2820.             <form method=\"post\" action=\"";
  2821.         // line 2585
  2822.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_login_back_Partenaire");
  2823.         yield "\">
  2824.               <div class=\"form-group d-grid gap-3\">
  2825.                 <input type=\"text\" name=\"email\" id=\"partnerInputEmail\" class=\"form-control\" placeholder=\"Mail partenaire\" value=\"\">
  2826.                 <input type=\"password\" name=\"password\" id=\"partnerInputPassword\" class=\"form-control\" placeholder=\"Mot de passe\">
  2827.                 <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  2828.         // line 2589
  2829.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  2830.         yield "\">
  2831.                 <div class=\"description\">
  2832.                   <a href=\"/forgotPasspatenaire\" style=\"color:#f09e7a;\">Vous avez oublié votre mot de passe</a>
  2833.                 </div>
  2834.               </div>
  2835.               <div class=\"d-grid mt-4\">
  2836.                 <button class=\"btn btn-primary rounded-3\" type=\"submit\">Je me connecte</button>
  2837.               </div>
  2838.             </form>
  2839.           </div>
  2840.         </div>
  2841.       </div>
  2842.     </div>
  2843.   </div>
  2844. </div>
  2846. <!-- Modale ultra-légère -->
  2847. <div class=\"modal fade\" id=\"groupBuyLite\" tabindex=\"-1\" aria-hidden=\"true\">
  2848.   <div class=\"modal-dialog modal-dialog-centered\">
  2849.     <div class=\"modal-content rounded-4\">
  2850.       <div class=\"modal-header\">
  2851.         <h5 class=\"modal-title\">Achat groupé — jusqu’à −20%</h5>
  2852.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  2853.       </div>
  2854.       <div class=\"modal-body\">
  2855.         <ul class=\"small text-muted ps-3\">
  2856.           <li>Remise automatique selon le volume (ex. −10% dès 5, −15% dès 10, −20% dès 20).</li>
  2857.           <li>Applicable sur albums, tirages et packs.</li>
  2858.           <li>La structure peut prendre en charge Parent Premium (tarif préférentiel, voix illimitée incluse).</li>
  2859.         </ul>
  2860.         <div class=\"alert alert-info small mb-0\">
  2861.           <i class=\"bi bi-info-circle me-1\"></i>
  2862.           La remise sera affichée sur la boutique. Munissez-vous du <strong>code séjour</strong> si demandé.
  2863.         </div>
  2864.       </div>
  2865.       <div class=\"modal-footer d-block\">
  2866.         <div class=\"d-grid d-sm-flex gap-2\">
  2867.           <!-- Redirection directe (aucun champ) -->
  2868.           <a class=\"btn btn-primary\"
  2869.              href=\"/boutique?groupbuy=1&utm_source=site&utm_medium=modal&utm_campaign=group_buy\"
  2870.              data-action=\"group_buy_continue\">
  2871.             Aller à la boutique
  2872.           </a>
  2873.           <button class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Plus tard</button>
  2874.         </div>
  2875.         <p class=\"small text-muted mt-2 mb-0\">
  2876.           Besoin d’aide ? <a href=\"#\" data-action=\"cta_expert\">Parler à un expert</a>
  2877.         </p>
  2878.       </div>
  2879.     </div>
  2880.   </div>
  2881. </div>
  2883. <!-- MODALE CHOIX DE PAIEMENT -->
  2884. <div class=\"modal fade\" id=\"checkoutChoiceModal\" tabindex=\"-1\" aria-labelledby=\"checkoutChoiceModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">
  2885.     <div class=\"modal-dialog modal-lg modal-dialog-centered\">
  2886.         <div class=\"modal-content\">
  2887.             <div class=\"modal-header border-0 pb-0\">
  2888.                 <h5 class=\"modal-title w-100 text-center\" id=\"checkoutChoiceModalLabel\">
  2889.                     <i class=\"bi bi-credit-card-2-front me-2\"></i>
  2890.                     Comment souhaitez-vous procéder ?
  2891.                 </h5>
  2892.                 <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  2893.             </div>
  2894.             <div class=\"modal-body px-5 py-4\">
  2895.                 <!-- Récapitulatif du pack sélectionné -->
  2896.                 <div class=\"alert alert-primary border-primary mb-4 d-flex align-items-center justify-content-between\" role=\"alert\" id=\"packSummary\" style=\"display: none !important;\">
  2897.                     <div class=\"d-flex align-items-center gap-3\">
  2898.                         <i class=\"bi bi-box-seam fs-3\"></i>
  2899.                         <div>
  2900.                             <div class=\"fw-bold mb-1\">Pack sélectionné</div>
  2901.                             <div class=\"h5 mb-0\" id=\"packName\">—</div>
  2902.                         </div>
  2903.                     </div>
  2904.                     <div class=\"text-end\">
  2905.                         <div class=\"text-muted small\">Montant annuel</div>
  2906.                         <div class=\"h4 mb-0 fw-bold\" id=\"packPrice\">—</div>
  2907.                     </div>
  2908.                 </div>
  2909.                 
  2910.                 <p class=\"text-center text-muted mb-4\">Choisissez le mode de souscription adapté à votre structure</p>
  2911.                 
  2912.                 <div class=\"row g-4\">
  2913.                     <!-- Card 1 — Souscription en ligne -->
  2914.                     <div class=\"col-lg-4 col-md-6\">
  2915.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"online\" tabindex=\"0\" role=\"button\">
  2916.                             <div class=\"card-body d-flex flex-column\">
  2917.                                 <div class=\"mb-3\">
  2918.                                     <span class=\"badge bg-success text-white mb-2\">Recommandé</span>
  2919.                                     <h4 class=\"card-title mb-2\">Souscrire en ligne</h4>
  2920.                                     <p class=\"text-muted small\">CB / SEPA — activation en 24 h. Facturation annuelle.</p>
  2921.                                 </div>
  2922.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  2923.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Stripe Checkout sécurisé</li>
  2924.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Facture et mandat SEPA automatiques</li>
  2925.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Planifier l'onboarding (30 min)</li>
  2926.                                 </ul>
  2927.                                 <button class=\"btn btn-primary w-100\" data-cta=\"checkout_online\" data-loc=\"modal\">
  2928.                                     <i class=\"bi bi-credit-card me-2\"></i>Payer & activer
  2929.                                 </button>
  2930.                             </div>
  2931.                         </div>
  2932.                     </div>
  2934.                     <!-- Card 2 — Virement bancaire -->
  2935.                     <div class=\"col-lg-4 col-md-6\">
  2936.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"bank_transfer\" tabindex=\"0\" role=\"button\">
  2937.                             <div class=\"card-body d-flex flex-column\">
  2938.                                 <div class=\"mb-3\">
  2939.                                     <span class=\"badge bg-info text-white mb-2\">Économique</span>
  2940.                                     <h4 class=\"card-title mb-2\">Virement bancaire</h4>
  2941.                                     <p class=\"text-muted small\">Paiement par virement — activation sous 48h après réception.</p>
  2942.                                 </div>
  2943.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  2944.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>RIB fourni automatiquement</li>
  2945.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>Facture proforma envoyée</li>
  2946.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>Activation après réception</li>
  2947.                                 </ul>
  2948.                                 <button type=\"button\" class=\"btn btn-outline-info w-100\" data-bs-toggle=\"modal\" data-bs-target=\"#bankTransferModal\" data-bs-dismiss=\"modal\">
  2949.                                     <i class=\"bi bi-bank me-2\"></i>Demander le RIB
  2950.                                 </button>
  2951.                             </div>
  2952.                         </div>
  2953.                     </div>
  2955.                     <!-- Card 3 — Devis / Bon de commande -->
  2956.                     <div class=\"col-lg-4 col-md-6\">
  2957.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"quote\" tabindex=\"0\" role=\"button\">
  2958.                             <div class=\"card-body d-flex flex-column\">
  2959.                                 <div class=\"mb-3\">
  2960.                                     <h4 class=\"card-title mb-2 mt-4\">Demander un devis / BC</h4>
  2961.                                     <p class=\"text-muted small\">Adapté écoles publiques, collectivités, associations.</p>
  2962.                                 </div>
  2963.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  2964.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>Devis PDF instantané</li>
  2965.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>DPA/RGPD, RIB, CGV joints</li>
  2966.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>E‑signature & upload du BC</li>
  2967.                                 </ul>
  2968.                                 <button class=\"btn btn-outline-primary w-100\" data-cta=\"checkout_quote\" data-loc=\"modal\">
  2969.                                     <i class=\"bi bi-file-earmark-text me-2\"></i>Recevoir le devis
  2970.                                 </button>
  2971.                             </div>
  2972.                         </div>
  2973.                     </div>
  2974.                 </div>
  2975.             </div>
  2976.             <div class=\"modal-footer border-0 pt-0\">
  2977.                 <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Retour</button>
  2978.             </div>
  2979.         </div>
  2980.     </div>
  2981. </div>
  2983. <!-- MODALE VIREMENT BANCAIRE (RIB) -->
  2984. <div class=\"modal fade\" id=\"bankTransferModal\" tabindex=\"-1\" aria-labelledby=\"bankTransferModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">
  2985.     <div class=\"modal-dialog modal-xl modal-dialog-centered\">
  2986.         <div class=\"modal-content\">
  2987.             <div class=\"modal-header border-0 pb-2\">
  2988.                 <h5 class=\"modal-title w-100 text-center\" id=\"bankTransferModalLabel\">
  2989.                     <i class=\"bi bi-bank2 me-2 text-info\"></i>
  2990.                     Virement bancaire — RIB instantané
  2991.                 </h5>
  2992.                 <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  2993.             </div>
  2994.             <div class=\"modal-body p-4\">
  2995.                 <div class=\"row\">
  2996.                     <!-- Colonne formulaire -->
  2997.                     <div class=\"col-lg-5\">
  2998.                         <div class=\"card border-0 bg-light h-100\">
  2999.                             <div class=\"card-body p-4\">
  3000.                                 <h6 class=\"text-info mb-3\">
  3001.                                     <i class=\"bi bi-person-circle me-2\"></i>Vos informations
  3002.                                 </h6>
  3003.                                 <p class=\"text-muted small mb-4\">Nous vous enverrons le RIB et la facture proforma par email</p>
  3004.                                 
  3005.                                 <form id=\"rib-form\" method=\"post\" action=\"";
  3006.         // line 2764
  3007.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("bank_transfer_request");
  3008.         yield "\" data-event=\"rib_request_submit\">
  3009.                                     <div class=\"mb-4\">
  3010.                                         <label for=\"rib_fullname\" class=\"form-label fw-semibold\">
  3011.                                             <i class=\"bi bi-person me-1\"></i>Nom & prénom *
  3012.                                         </label>
  3013.                                         <input id=\"rib_fullname\" name=\"full_name\" class=\"form-control form-control-lg\" required 
  3014.                                                placeholder=\"Ex: Marie Dupont\" autocomplete=\"name\">
  3015.                                     </div>
  3016.                                     
  3017.                                     <div class=\"mb-4\">
  3018.                                         <label for=\"rib_email\" class=\"form-label fw-semibold\">
  3019.                                             <i class=\"bi bi-envelope me-1\"></i>Email de facturation *
  3020.                                         </label>
  3021.                                         <input id=\"rib_email\" name=\"billing_email\" type=\"email\" class=\"form-control form-control-lg\" required 
  3022.                                                placeholder=\"Ex: comptabilite@ecole.fr\" autocomplete=\"email\">
  3023.                                     </div>
  3025.                                     <div class=\"mb-4\">
  3026.                                         <label for=\"rib_company\" class=\"form-label fw-semibold\">
  3027.                                             <i class=\"bi bi-building me-1\"></i>Nom de la structure
  3028.                                         </label>
  3029.                                         <input id=\"rib_company\" name=\"company\" class=\"form-control form-control-lg\" 
  3030.                                                placeholder=\"Ex: École Primaire Jean Moulin\" autocomplete=\"organization\">
  3031.                                     </div>
  3033.                                     <!-- Contexte pack (sera rempli dynamiquement) -->
  3034.                                     <input type=\"hidden\" name=\"pack_id\" id=\"rib_pack_id\" value=\"\">
  3036.                                     <div class=\"d-grid\">
  3037.                                         <button class=\"btn btn-info btn-lg py-3\" id=\"rib-submit\" type=\"submit\" data-cta=\"rib_request\" data-loc=\"wire\">
  3038.                                             <i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément
  3039.                                         </button>
  3040.                                     </div>
  3041.                                     
  3042.                                     <p class=\"text-muted text-center small mt-3 mb-0\">
  3043.                                         <i class=\"bi bi-shield-check me-1\"></i>
  3044.                                         Sécurisé • Données hébergées en France • Conforme RGPD
  3045.                                     </p>
  3046.                                 </form>
  3047.                             </div>
  3048.                         </div>
  3049.                     </div>
  3051.                     <!-- Colonne RIB -->
  3052.                     <div class=\"col-lg-7\">
  3053.                         <div id=\"rib-panel\" class=\"card border-info\" style=\"display: none;\">
  3054.                             <div class=\"card-header bg-info text-white\">
  3055.                                 <h6 class=\"mb-0\">
  3056.                                     <i class=\"bi bi-bank me-2\"></i>Coordonnées bancaires 5sur5séjour
  3057.                                 </h6>
  3058.                             </div>
  3059.                             <div class=\"card-body p-4\">
  3060.                                 <div class=\"row g-4\">
  3061.                                     <div class=\"col-md-6\">
  3062.                                         <div class=\"border-bottom pb-2 mb-2\">
  3063.                                             <div class=\"text-muted small text-uppercase fw-bold\">Titulaire du compte</div>
  3064.                                             <div class=\"h6 mb-0\">S.A.S. TRUST CONSEILS</div>
  3065.                                         </div>
  3066.                                     </div>
  3067.                                     <div class=\"col-md-6\">
  3068.                                         <div class=\"border-bottom pb-2 mb-2\">
  3069.                                             <div class=\"text-muted small text-uppercase fw-bold\">Banque</div>
  3070.                                             <div class=\"h6 mb-0\">CR CENTRE EST</div>
  3071.                                         </div>
  3072.                                     </div>
  3073.                                     <div class=\"col-12\">
  3074.                                         <div class=\"border-bottom pb-2 mb-2\">
  3075.                                             <div class=\"text-muted small text-uppercase fw-bold\">IBAN</div>
  3076.                                             <div class=\"d-flex align-items-center gap-3\">
  3077.                                                 <code id=\"iban-text\" class=\"user-select-all h6 mb-0 text-primary\">FR76 1780 6009 6304 1603 4748 776</code>
  3078.                                                 <button type=\"button\" class=\"btn btn-outline-primary\" data-cta=\"copy_iban\" aria-label=\"Copier l'IBAN\" onclick=\"copyToClipboard('iban-text', this)\">
  3079.                                                     <i class=\"bi bi-clipboard me-1\"></i>Copier
  3080.                                                 </button>
  3081.                                             </div>
  3082.                                         </div>
  3083.                                     </div>
  3084.                                     <div class=\"col-md-6\">
  3085.                                         <div class=\"border-bottom pb-2 mb-2\">
  3086.                                             <div class=\"text-muted small text-uppercase fw-bold\">Code BIC</div>
  3087.                                             <div class=\"d-flex align-items-center gap-3\">
  3088.                                                 <code id=\"bic-text\" class=\"user-select-all h6 mb-0 text-primary\">AGRIFRPP878</code>
  3089.                                                 <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" data-cta=\"copy_bic\" aria-label=\"Copier le BIC\" onclick=\"copyToClipboard('bic-text', this)\">
  3090.                                                     <i class=\"bi bi-clipboard\"></i>
  3091.                                                 </button>
  3092.                                             </div>
  3093.                                         </div>
  3094.                                     </div>
  3095.                                     <div class=\"col-md-6\">
  3096.                                         <div class=\"border-bottom pb-2 mb-2\">
  3097.                                             <div class=\"text-muted small text-uppercase fw-bold\">Référence à indiquer</div>
  3098.                                             <div class=\"h6 mb-0 text-success\">PACK-PRO-<span id=\"rib-ref-date\"></span></div>
  3099.                                         </div>
  3100.                                     </div>
  3101.                                 </div>
  3103.                                 <div class=\"alert alert-success mt-4\" role=\"alert\">
  3104.                                     <i class=\"bi bi-check-circle me-2\"></i>
  3105.                                     <strong>Email envoyé !</strong> Vous recevrez le RIB et la facture proforma à <span id=\"rib-email-echo\" class=\"fw-bold\">votre adresse</span>.
  3106.                                 </div>
  3108.                                 <div class=\"d-flex flex-wrap gap-3 mt-4\">
  3109.                                     <a class=\"btn btn-primary\" href=\"#\" id=\"proforma-download-link\" data-cta=\"download_proforma\">
  3110.                                         <i class=\"bi bi-download me-2\"></i>Télécharger la facture proforma
  3111.                                     </a>
  3112.                                     <a class=\"btn btn-outline-secondary\" href=\"https://calendly.com/5sur5sejour/demo\" target=\"_blank\" data-cta=\"book_call\">
  3113.                                         <i class=\"bi bi-telephone me-2\"></i>Planifier un appel
  3114.                                     </a>
  3115.                                 </div>
  3117.                                 <div class=\"text-muted small mt-3\">
  3118.                                     <i class=\"bi bi-info-circle me-1\"></i>
  3119.                                     Activation de votre compte sous 48h après réception du virement.
  3120.                                 </div>
  3121.                             </div>
  3122.                         </div>
  3124.                         <!-- Message d'attente -->
  3125.                         <div id=\"rib-waiting\" class=\"text-center p-5\">
  3126.                             <i class=\"bi bi-bank2 text-muted\" style=\"font-size: 4rem;\"></i>
  3127.                             <h5 class=\"text-muted mt-3\">Remplissez le formulaire pour obtenir le RIB</h5>
  3128.                             <p class=\"text-muted\">Vos coordonnées bancaires apparaîtront ici instantanément</p>
  3129.                         </div>
  3130.                     </div>
  3131.                 </div>
  3132.             </div>
  3133.         </div>
  3134.     </div>
  3135. </div>
  3137. <script>
  3138. document.addEventListener('DOMContentLoaded', function() {
  3139.     console.log('✅ Page Accueil - Modale checkout initialisée');
  3140.     
  3141.     // Mapping des packs
  3142.     const packLabels = {
  3143.         'access': 'Pack Accès',
  3144.         'serenite': 'Pack Sérénité',
  3145.         'pro_illimite': 'Partenariat à la performance ✨'
  3146.     };
  3147.     
  3148.     // Récupérer le pack sélectionné lors de l'ouverture de la modale
  3149.     const checkoutModal = document.getElementById('checkoutChoiceModal');
  3150.     const bankTransferModal = document.getElementById('bankTransferModal');
  3151.     let selectedPack = null;
  3152.     let selectedPackPrice = null;
  3153.     
  3154.     if (checkoutModal) {
  3155.         checkoutModal.addEventListener('show.bs.modal', function(event) {
  3156.             const button = event.relatedTarget;
  3157.             selectedPack = button.getAttribute('data-pack');
  3158.             selectedPackPrice = button.getAttribute('data-pack-price');
  3159.             console.log('📦 Pack sélectionné:', selectedPack, '- Prix:', selectedPackPrice + '€');
  3160.             
  3161.             // Afficher le récapitulatif du pack
  3162.             const packSummary = document.getElementById('packSummary');
  3163.             const packName = document.getElementById('packName');
  3164.             const packPrice = document.getElementById('packPrice');
  3165.             
  3166.             if (packSummary && packName && packPrice) {
  3167.                 packName.textContent = packLabels[selectedPack] || selectedPack;
  3168.                 packPrice.textContent = selectedPackPrice + ' € / an';
  3169.                 packSummary.style.display = 'flex';
  3170.             }
  3171.         });
  3172.     }
  3173.     
  3174.     // Transférer le pack sélectionné au modal RIB
  3175.     if (bankTransferModal) {
  3176.         bankTransferModal.addEventListener('show.bs.modal', function(event) {
  3177.             console.log('📦 Ouverture modal RIB avec pack:', selectedPack);
  3178.             // Remplir le champ caché avec le pack sélectionné
  3179.             const ribPackIdField = document.getElementById('rib_pack_id');
  3180.             if (ribPackIdField) {
  3181.                 ribPackIdField.value = selectedPack || '';
  3182.                 console.log('✅ Pack ID défini dans le formulaire:', ribPackIdField.value);
  3183.                 
  3184.                 // ALERTE SI PAS DE PACK SÉLECTIONNÉ
  3185.                 if (!selectedPack) {
  3186.                     console.warn('⚠️ ATTENTION: Aucun pack sélectionné ! La commande ne sera pas créée.');
  3187.                     alert('⚠️ DEBUG: Aucun pack sélectionné. Cliquez d\\'abord sur un bouton de pack (Sérénité ou Découverte) avant de demander le RIB.');
  3188.                 }
  3189.             }
  3190.         });
  3191.     }
  3192.     
  3193.     // =========================
  3194.     // GESTION DU FORMULAIRE RIB
  3195.     // =========================
  3196.     const ribForm = document.getElementById('rib-form');
  3197.     const ribSubmit = document.getElementById('rib-submit');
  3198.     const ribPanel = document.getElementById('rib-panel');
  3199.     const ribWaiting = document.getElementById('rib-waiting');
  3200.     const ribEmailEcho = document.getElementById('rib-email-echo');
  3201.     const ribRefDate = document.getElementById('rib-ref-date');
  3202.     const proformaDownloadLink = document.getElementById('proforma-download-link');
  3203.     
  3204.     if (ribForm && ribSubmit) {
  3205.         // Set current date for reference
  3206.         if (ribRefDate) {
  3207.             const now = new Date();
  3208.             const dateStr = now.getFullYear().toString().slice(-2) + 
  3209.                            (now.getMonth() + 1).toString().padStart(2, '0') + 
  3210.                            now.getDate().toString().padStart(2, '0');
  3211.             ribRefDate.textContent = dateStr;
  3212.         }
  3213.         
  3214.         ribForm.addEventListener('submit', function(e) {
  3215.             e.preventDefault();
  3216.             
  3217.             // Get form data
  3218.             const formData = new FormData(ribForm);
  3219.             const fullName = formData.get('full_name');
  3220.             const billingEmail = formData.get('billing_email');
  3221.             const company = formData.get('company');
  3222.             const packId = formData.get('pack_id');
  3223.             
  3224.             // Validation
  3225.             if (!fullName || fullName.trim().length < 2) {
  3226.                 showFieldError('rib_fullname', 'Veuillez saisir votre nom complet');
  3227.                 return;
  3228.             }
  3229.             
  3230.             if (!billingEmail || !isValidEmail(billingEmail)) {
  3231.                 showFieldError('rib_email', 'Veuillez saisir une adresse email valide');
  3232.                 return;
  3233.             }
  3234.             
  3235.             // Clear any previous errors
  3236.             clearFieldErrors();
  3237.             
  3238.             // Show loading state
  3239.             ribSubmit.disabled = true;
  3240.             ribSubmit.innerHTML = '<i class=\"bi bi-hourglass-split me-2\"></i>Envoi en cours...';
  3241.             
  3242.             // Send to backend
  3243.             fetch('";
  3244.         // line 2999
  3245.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("bank_transfer_request");
  3246.         yield "', {
  3247.                 method: 'POST',
  3248.                 body: formData
  3249.             })
  3250.             .then(res => res.json())
  3251.             .then(data => {
  3252.                 if (data.success) {
  3253.                     showRibSuccess(billingEmail, fullName, company, data.requestNumber);
  3254.                 } else {
  3255.                     throw new Error(data.message || 'Erreur lors de l\\'envoi');
  3256.                 }
  3257.             })
  3258.             .catch(err => {
  3259.                 alert('❌ Erreur : ' + err.message);
  3260.                 ribSubmit.disabled = false;
  3261.                 ribSubmit.innerHTML = '<i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément';
  3262.             });
  3263.         });
  3264.     }
  3265.     
  3266.     function showFieldError(fieldId, message) {
  3267.         const field = document.getElementById(fieldId);
  3268.         if (field) {
  3269.             field.classList.add('is-invalid');
  3270.             
  3271.             // Remove existing error message
  3272.             const existingError = field.parentNode.querySelector('.invalid-feedback');
  3273.             if (existingError) {
  3274.                 existingError.remove();
  3275.             }
  3276.             
  3277.             // Add new error message
  3278.             const errorDiv = document.createElement('div');
  3279.             errorDiv.className = 'invalid-feedback';
  3280.             errorDiv.textContent = message;
  3281.             field.parentNode.appendChild(errorDiv);
  3282.         }
  3283.     }
  3284.     
  3285.     function clearFieldErrors() {
  3286.         const invalidFields = document.querySelectorAll('.is-invalid');
  3287.         invalidFields.forEach(field => {
  3288.             field.classList.remove('is-invalid');
  3289.         });
  3290.         
  3291.         const errorMessages = document.querySelectorAll('.invalid-feedback');
  3292.         errorMessages.forEach(error => {
  3293.             error.remove();
  3294.         });
  3295.     }
  3296.     
  3297.     function showRibSuccess(email, name, company, requestNumber) {
  3298.         // Hide waiting message
  3299.         if (ribWaiting) {
  3300.             ribWaiting.style.display = 'none';
  3301.         }
  3302.         
  3303.         // Show RIB panel
  3304.         if (ribPanel) {
  3305.             ribPanel.style.display = 'block';
  3306.         }
  3307.         
  3308.         // Update email echo
  3309.         if (ribEmailEcho) {
  3310.             ribEmailEcho.textContent = email;
  3311.         }
  3312.         
  3313.         // Generate proforma download link
  3314.         if (proformaDownloadLink && requestNumber) {
  3315.             proformaDownloadLink.href = '/proforma-download/' + requestNumber;
  3316.         }
  3317.         
  3318.         // Scroll to RIB panel
  3319.         if (ribPanel) {
  3320.             ribPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
  3321.         }
  3322.         
  3323.         // Reset button
  3324.         if (ribSubmit) {
  3325.             ribSubmit.disabled = false;
  3326.             ribSubmit.innerHTML = '<i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément';
  3327.         }
  3328.         
  3329.         console.log('✅ RIB request submitted:', { name, email, company });
  3330.     }
  3331.     
  3332.     function isValidEmail(email) {
  3333.         const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  3334.         return emailRegex.test(email);
  3335.     }
  3336.     
  3337.     // Gérer le clic sur \"Payer & activer\" (Stripe)
  3338.     document.querySelector('[data-cta=\"checkout_online\"]')?.addEventListener('click', function() {
  3339.         alert('Paiement Stripe en cours de développement\\n\\nPack : ' + selectedPack + '\\nPrix : ' + selectedPackPrice + '€');
  3340.     });
  3341.     
  3342.     // Gérer le clic sur \"Recevoir le devis\"
  3343.     document.querySelector('[data-cta=\"checkout_quote\"]')?.addEventListener('click', function() {
  3344.         alert('Génération de devis en cours de développement\\n\\nPack : ' + selectedPack + '\\nPrix : ' + selectedPackPrice + '€');
  3345.     });
  3346. });
  3348. // Copy to clipboard function
  3349. function copyToClipboard(elementId, button) {
  3350.     const element = document.getElementById(elementId);
  3351.     if (element) {
  3352.         const text = element.textContent;
  3353.         navigator.clipboard.writeText(text).then(() => {
  3354.             // Show success feedback
  3355.             const originalText = button.innerHTML;
  3356.             button.innerHTML = '<i class=\"bi bi-check\"></i> Copié !';
  3357.             button.classList.remove('btn-outline-primary');
  3358.             button.classList.add('btn-success');
  3359.             
  3360.             setTimeout(() => {
  3361.                 button.innerHTML = originalText;
  3362.                 button.classList.remove('btn-success');
  3363.                 button.classList.add('btn-outline-primary');
  3364.             }, 2000);
  3365.         }).catch(err => {
  3366.             console.error('Erreur copie:', err);
  3367.             alert('Impossible de copier. Copiez manuellement : ' + text);
  3368.         });
  3369.     }
  3370. }
  3372. // Gestion du formulaire grand volume
  3373. const grandVolumeForm = document.getElementById('grandVolumeForm');
  3374. const formMessage = document.getElementById('formMessage');
  3376. if (grandVolumeForm) {
  3377.   grandVolumeForm.addEventListener('submit', function(e) {
  3378.     e.preventDefault();
  3379.     
  3380.     // Désactiver le bouton pendant l'envoi
  3381.     const submitBtn = grandVolumeForm.querySelector('button[type=\"submit\"]');
  3382.     const originalText = submitBtn.innerHTML;
  3383.     submitBtn.disabled = true;
  3384.     submitBtn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Envoi en cours...';
  3385.     
  3386.     // Masquer les messages précédents
  3387.     formMessage.innerHTML = '';
  3388.     formMessage.className = 'mt-3';
  3389.     
  3390.     // Récupérer les données du formulaire
  3391.     const formData = new FormData(grandVolumeForm);
  3392.     
  3393.     // Envoyer la requête
  3394.     fetch('/contact/grand-volume', {
  3395.       method: 'POST',
  3396.       body: formData,
  3397.       headers: {
  3398.         'X-Requested-With': 'XMLHttpRequest'
  3399.       }
  3400.     })
  3401.     .then(response => response.json())
  3402.     .then(data => {
  3403.       if (data.success) {
  3404.         // Fermer le modal du formulaire
  3405.         const formModal = bootstrap.Modal.getInstance(document.getElementById('grandVolumeModal'));
  3406.         if (formModal) formModal.hide();
  3407.         
  3408.         // Réinitialiser le formulaire
  3409.         grandVolumeForm.reset();
  3410.         
  3411.         // Afficher le modal de succès
  3412.         const successModal = new bootstrap.Modal(document.getElementById('grandVolumeSuccessModal'));
  3413.         successModal.show();
  3414.       } else {
  3415.         formMessage.className = 'mt-3 alert alert-danger';
  3416.         formMessage.innerHTML = `
  3417.           <div class=\"d-flex align-items-center\">
  3418.             <i class=\"bi bi-exclamation-triangle-fill me-2 fs-5\"></i>
  3419.             <div>
  3420.               <strong>Erreur :</strong><br>
  3421.               \${data.message || 'Une erreur est survenue. Veuillez réessayer.'}
  3422.             </div>
  3423.           </div>
  3424.         `;
  3425.       }
  3426.     })
  3427.     .catch(error => {
  3428.       console.error('Erreur:', error);
  3429.       formMessage.className = 'mt-3 alert alert-danger';
  3430.       formMessage.innerHTML = `
  3431.         <div class=\"d-flex align-items-center\">
  3432.           <i class=\"bi bi-exclamation-triangle-fill me-2 fs-5\"></i>
  3433.           <div>
  3434.             <strong>Erreur :</strong><br>
  3435.             Une erreur est survenue lors de l'envoi. Veuillez réessayer plus tard.
  3436.           </div>
  3437.         </div>
  3438.       `;
  3439.     })
  3440.     .finally(() => {
  3441.       submitBtn.disabled = false;
  3442.       submitBtn.innerHTML = originalText;
  3443.     });
  3444.   });
  3445. }
  3446. </script>
  3448. <!-- MODAL FORMULAIRE GRAND VOLUME -->
  3449.   <!-- MODAL FORMULAIRE GRAND VOLUME -->
  3450.   <div class=\"modal fade\" id=\"grandVolumeModal\" tabindex=\"-1\" aria-labelledby=\"grandVolumeModalLabel\" aria-hidden=\"true\">
  3451.     <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  3452.       <div class=\"modal-content\">
  3453.         <div class=\"modal-header border-0 pb-0\">
  3454.           <h5 class=\"modal-title w-100 text-center\" id=\"grandVolumeModalLabel\">
  3455.             <i class=\"bi bi-envelope me-2\"></i>Demande de devis - Grand volume (+25 séjours/an)
  3456.           </h5>
  3457.           <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  3458.         </div>
  3459.         <div class=\"modal-body px-4 py-4\">
  3460.           <p class=\"text-center text-muted mb-4\">Remplissez ce formulaire et notre équipe vous contactera rapidement pour vous proposer une offre personnalisée.</p>
  3461.           
  3462.           <form id=\"grandVolumeForm\" method=\"post\" action=\"/contact/grand-volume\">
  3463.             <div class=\"row g-3\">
  3464.               <div class=\"col-md-6\">
  3465.                 <label for=\"nom_structure\" class=\"form-label\">Nom de la structure <span class=\"text-danger\">*</span></label>
  3466.                 <input type=\"text\" class=\"form-control\" id=\"nom_structure\" name=\"nom_structure\" required>
  3467.               </div>
  3468.               <div class=\"col-md-6\">
  3469.                 <label for=\"type_structure\" class=\"form-label\">Type de structure <span class=\"text-danger\">*</span></label>
  3470.                 <select class=\"form-select\" id=\"type_structure\" name=\"type_structure\" required>
  3471.                   <option value=\"\">Sélectionnez...</option>
  3472.                   <option value=\"ecole\">École</option>
  3473.                   <option value=\"centre_loisirs\">Centre de loisirs</option>
  3474.                   <option value=\"association\">Association</option>
  3475.                   <option value=\"voyagiste\">Voyagiste</option>
  3476.                   <option value=\"autre\">Autre</option>
  3477.                 </select>
  3478.               </div>
  3479.               <div class=\"col-md-6\">
  3480.                 <label for=\"nombre_sejours\" class=\"form-label\">Nombre de séjours par an <span class=\"text-danger\">*</span></label>
  3481.                 <input type=\"number\" class=\"form-control\" id=\"nombre_sejours\" name=\"nombre_sejours\" min=\"26\" required placeholder=\"Ex: 30, 50, 100...\">
  3482.                 <div class=\"form-text\">Minimum 26 séjours par an</div>
  3483.               </div>
  3484.               <div class=\"col-md-6\">
  3485.                 <label for=\"contact_email\" class=\"form-label\">Email <span class=\"text-danger\">*</span></label>
  3486.                 <input type=\"email\" class=\"form-control\" id=\"contact_email\" name=\"contact_email\" required>
  3487.               </div>
  3488.               <div class=\"col-md-6\">
  3489.                 <label for=\"contact_telephone\" class=\"form-label\">Téléphone <span class=\"text-danger\">*</span></label>
  3490.                 <input type=\"tel\" class=\"form-control\" id=\"contact_telephone\" name=\"contact_telephone\" required>
  3491.               </div>
  3492.               <div class=\"col-12\">
  3493.                 <label for=\"message\" class=\"form-label\">Message (optionnel)</label>
  3494.                 <textarea class=\"form-control\" id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Décrivez vos besoins spécifiques, vos contraintes, vos questions...\"></textarea>
  3495.               </div>
  3496.               <div class=\"col-12\">
  3497.                 <div class=\"form-check\">
  3498.                   <input class=\"form-check-input\" type=\"checkbox\" id=\"accept_rgpd\" name=\"accept_rgpd\" required>
  3499.                   <label class=\"form-check-label\" for=\"accept_rgpd\">
  3500.                     J'accepte que mes données soient utilisées pour me recontacter concernant cette demande de devis. <span class=\"text-danger\">*</span>
  3501.                   </label>
  3502.                 </div>
  3503.               </div>
  3504.             </div>
  3505.             <div id=\"formMessage\" class=\"mt-3\"></div>
  3506.             <div class=\"d-grid gap-2 mt-4\">
  3507.               <button type=\"submit\" class=\"btn btn-primary btn-lg\">
  3508.                 <i class=\"bi bi-send me-2\"></i>Envoyer la demande
  3509.               </button>
  3510.               <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Annuler</button>
  3511.             </div>
  3512.           </form>
  3513.         </div>
  3514.       </div>
  3515.     </div>
  3516.   </div>
  3518.   </body>
  3519. </html>
  3520.     </div>
  3521.   </div>
  3523.   </body>
  3524. </html>
  3525.     </div>
  3526.   </div>
  3528.   </body>
  3529. </html>
  3530.     </div>
  3531.   </div>
  3533.   </body>
  3534. </html>";
  3535.         
  3536.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3538.         
  3539.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3541.         yield from [];
  3542.     }
  3544.     // line 2265
  3545.     /**
  3546.      * @return iterable<null|scalar|\Stringable>
  3547.      */
  3548.     public function block_Footer(array $context, array $blocks = []): iterable
  3549.     {
  3550.         $macros = $this->macros;
  3551.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3552.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  3554.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3555.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  3557.         // line 2266
  3558.         yield "            ";
  3559.         yield from $this->load("Accueil/_footer_premium.html.twig", 2266)->unwrap()->yield($context);
  3560.         // line 2267
  3561.         yield "        ";
  3562.         
  3563.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3565.         
  3566.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3568.         yield from [];
  3569.     }
  3571.     /**
  3572.      * @codeCoverageIgnore
  3573.      */
  3574.     public function getTemplateName(): string
  3575.     {
  3576.         return "Accueil/PageAccueil.html.twig";
  3577.     }
  3579.     /**
  3580.      * @codeCoverageIgnore
  3581.      */
  3582.     public function isTraitable(): bool
  3583.     {
  3584.         return false;
  3585.     }
  3587.     /**
  3588.      * @codeCoverageIgnore
  3589.      */
  3590.     public function getDebugInfo(): array
  3591.     {
  3592.         return array (  3561 => 2267,  3558 => 2266,  3545 => 2265,  3245 => 2999,  3007 => 2764,  2829 => 2589,  2822 => 2585,  2809 => 2575,  2783 => 2552,  2775 => 2547,  2752 => 2527,  2745 => 2523,  2627 => 2408,  2619 => 2403,  2611 => 2398,  2498 => 2288,  2494 => 2287,  2490 => 2286,  2486 => 2285,  2482 => 2284,  2478 => 2283,  2474 => 2282,  2470 => 2281,  2466 => 2280,  2462 => 2279,  2449 => 2268,  2447 => 2265,  2408 => 2229,  2306 => 2130,  2168 => 1995,  2160 => 1990,  2152 => 1985,  2130 => 1966,  2080 => 1919,  2067 => 1909,  2052 => 1897,  2020 => 1868,  2006 => 1857,  1845 => 1699,  1820 => 1677,  1740 => 1600,  1706 => 1569,  1695 => 1561,  1687 => 1556,  1681 => 1553,  1641 => 1516,  1637 => 1515,  1623 => 1504,  1574 => 1457,  1568 => 1456,  1559 => 1452,  1555 => 1450,  1552 => 1449,  1548 => 1448,  1543 => 1446,  1524 => 1430,  1511 => 1420,  486 => 398,  466 => 381,  449 => 367,  432 => 353,  327 => 251,  123 => 52,  116 => 48,  112 => 47,  108 => 46,  104 => 45,  100 => 44,  87 => 34,  83 => 33,  49 => 1,);
  3593.     }
  3595.     public function getSourceContext(): Source
  3596.     {
  3597.         return new Source("<!DOCTYPE html>
  3598. <!--
  3599. Template name: Nova
  3600. Template author: FreeBootstrap.net
  3601. Author website: https://freebootstrap.net/
  3602. License: https://freebootstrap.net/license
  3603. -->
  3604. <html lang=\"fr\">
  3605.   <head>
  3606.     <meta charset=\"utf-8\">
  3607.     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  3608. <title>5sur5Séjour — Créer un séjour scolaire en ligne (données hébergées en France)</title>
  3609. <meta name=\"description\" content=\"Partagez photos, vidéos et messages vocaux avec les familles. Gratuit pour les écoles publiques (hors option voix). Démo 15–30 min pour partenaires.\">
  3611. <!-- Open Graph / Twitter -->
  3612. <meta property=\"og:title\" content=\"Créer un séjour scolaire en ligne — 5sur5Séjour\">
  3613. <meta property=\"og:description\" content=\"Plateforme familles & écoles. Données en France. Démo 15–30 min.\">
  3614. <meta property=\"og:type\" content=\"website\">
  3615. <meta property=\"og:url\" content=\"https://5sur5sejour.fr/\">
  3616. <meta property=\"og:image\" content=\"https://5sur5sejour.fr/static/og/landing.jpg\">
  3617. <meta name=\"twitter:card\" content=\"summary_large_image\">
  3621. <!-- Robots -->
  3622. <meta name=\"robots\" content=\"index,follow,max-image-preview:large\">
  3624. <!-- Preload police/logo (si utilisés) -->
  3625. <link rel=\"preload\" href=\"/assets/fonts/inter-var.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>
  3626. <link rel=\"preload\" href=\"/static/og/creer-sejour.jpg\" as=\"image\">    <title>5sur5séjour - Plateforme de partage de photos, vidéos et messages vocaux</title>
  3627.      
  3628.     <!-- ======= Favicon =======-->
  3629.     <link rel=\"icon\" type=\"image/png\" href=\"{{ asset('favicon.png') }}\">
  3630.     <link rel=\"apple-touch-icon\" href=\"{{ asset('favicon.png') }}\">
  3631.     <!-- End Favicon-->
  3632.      
  3633.     <!-- ======= Google Font =======-->
  3634.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  3635.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  3636.     <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\" rel=\"stylesheet\">
  3637.     <!-- End Google Font-->
  3638.     
  3639.     <!-- ======= Styles =======-->
  3640.     <link href=\"{{ asset('Accueil/vendors/bootstrap/bootstrap.min.css') }}\" rel=\"stylesheet\">
  3641.     <link href=\"{{ asset('Accueil/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}\" rel=\"stylesheet\">
  3642.     <link href=\"{{ asset('Accueil/vendors/glightbox/glightbox.min.css') }}\" rel=\"stylesheet\">
  3643.     <link href=\"{{ asset('Accueil/vendors/swiper/swiper-bundle.min.css') }}\" rel=\"stylesheet\">
  3644.     <link href=\"{{ asset('Accueil/vendors/aos/aos.css') }}\" rel=\"stylesheet\">
  3645.     <!-- End Styles-->
  3646.     
  3647.     <!-- ======= Theme Style =======-->
  3648.     <link href=\"{{ asset('Accueil/css/style_nova.css') }}?v={{ \"now\"|date(\"Y-m-d-H-i-s\") }}\" rel=\"stylesheet\">
  3649.     <!-- End Theme Style-->
  3650.     <style>
  3651.     /* Section padding */
  3652. .py-6 { padding: 4rem 0; }
  3654. /* Card style premium */
  3655. .pricing-card {
  3656.     background: #ffffff;
  3657.     border-radius: 20px;
  3658.     border: 1px solid #eef2f4;
  3659.     transition: 0.25s;
  3660. }
  3662. .pricing-card:hover {
  3663.     transform: translateY(-6px);
  3664.     box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  3665. }
  3667. /* Highlight card */
  3668. .pricing-card.highlight {
  3669.     border: 2px solid #52c0b4;
  3670.     background: #f4fdfb;
  3671. }
  3673. .highlight-text {
  3674.     color: #1ea594;
  3675.     font-weight: 800;
  3676. }
  3678. /* Prices */
  3679. .amount {
  3680.     font-size: 2.4rem;
  3681.     font-weight: 700;
  3682.     color: #1d2d35;
  3683. }
  3685. .subtitle {
  3686.     font-size: 0.9rem;
  3687. }
  3689. /* Badges */
  3690. .badge-5sur5 {
  3691.     position: absolute;
  3692.     top: -12px;
  3693.     left: 50%;
  3694.     transform: translateX(-50%);
  3695.     background: #1ea594;
  3696.     padding: 6px 14px;
  3697.     border-radius: 30px;
  3698.     color: #fff;
  3699.     font-size: 0.75rem;
  3700.     font-weight: 600;
  3701. }
  3703. /* Buttons - Styles personnalisés conservés pour les cartes de pricing */
  3704. .btn-5sur5 {
  3705.     background: #1ea594;
  3706.     color: #fff;
  3707.     border-radius: 30px;
  3708.     padding: 12px 22px;
  3709.     font-weight: 600;
  3710. }
  3712. .btn-5sur5:hover {
  3713.     background: #178a7d;
  3714.     color: #fff;
  3715. }
  3717. .btn-5sur5-highlight {
  3718.     background: #169e8f;
  3719.     color: #fff;
  3720.     border-radius: 30px;
  3721.     padding: 12px 22px;
  3722.     font-weight: 600;
  3723. }
  3725. .btn-5sur5-highlight:hover {
  3726.     background: #127d72;
  3727.     color: #fff;
  3728. }
  3730. .btn-outline-5sur5 {
  3731.     border: 2px solid #1ea594;
  3732.     color: #1ea594;
  3733.     border-radius: 30px;
  3734.     padding: 12px 22px;
  3735.     font-weight: 600;
  3736. }
  3738. .btn-outline-5sur5:hover {
  3739.     background: #1ea594;
  3740.     color: #fff;
  3741. }
  3743. /* Styles différenciés pour les boutons CTA */
  3744. .cta-section .btn-outline-primary {
  3745.     border: 2px solid #41a2aa;
  3746.     color: #41a2aa;
  3747.     background: transparent;
  3748.     font-weight: 600;
  3749.     transition: all 0.3s ease;
  3750. }
  3752. .cta-section .btn-outline-primary:hover {
  3753.     background: #41a2aa;
  3754.     color: #fff;
  3755.     border-color: #41a2aa;
  3756.     transform: translateY(-2px);
  3757.     box-shadow: 0 4px 12px rgba(65, 162, 170, 0.3);
  3758. }
  3760. .cta-section .btn-secondary {
  3761.     font-weight: 600;
  3762.     transition: all 0.3s ease;
  3763. }
  3765. .cta-section .btn-secondary:hover {
  3766.     background-color: #e67e4a !important;
  3767.     border-color: #e67e4a !important;
  3768.     transform: translateY(-2px);
  3769.     box-shadow: 0 4px 12px rgba(240, 158, 122, 0.3);
  3770. }
  3772. .cta-section .btn-primary {
  3773.     font-weight: 600;
  3774.     transition: all 0.3s ease;
  3775.     background-color: #41a2aa;
  3776.     border-color: #41a2aa;
  3777. }
  3779. .cta-section .btn-primary:hover {
  3780.     background-color: #358a92;
  3781.     border-color: #358a92;
  3782.     transform: translateY(-2px);
  3783.     box-shadow: 0 4px 12px rgba(65, 162, 170, 0.3);
  3784. }
  3786.     
  3787.     </style>
  3789.     
  3790.     <!-- ======= Apply theme =======-->
  3791.     <script>
  3792.       // Apply the theme as early as possible to avoid flicker
  3793.       (function() {
  3794.         const storedTheme = localStorage.getItem('theme') || 'light';
  3795.         document.documentElement.setAttribute('data-bs-theme', storedTheme);
  3796.       })();
  3797.     </script>
  3798.   </head>
  3799.   <body>
  3800.     
  3801. <!-- MODALE -->
  3802. <div class=\"modal fade\" id=\"demoModal\" tabindex=\"-1\" aria-hidden=\"true\">
  3803.   <div class=\"modal-dialog modal-lg modal-dialog-centered\">
  3804.     <div class=\"modal-content\">
  3805.       <div class=\"modal-header\">
  3806.         <h5 id=\"demoTitle\" class=\"modal-title\">Demander une démo guidée</h5>
  3807.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  3808.       </div>
  3810.       <div class=\"modal-body\">
  3811.         <ul class=\"nav nav-tabs\" id=\"demoTabs\" role=\"tablist\">
  3812.           <li class=\"nav-item\" role=\"presentation\">
  3813.             <button class=\"nav-link active\" id=\"tab-calendar\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-calendar\" type=\"button\" role=\"tab\">
  3814.               Réserver un créneau
  3815.             </button>
  3816.           </li>
  3817.           <li class=\"nav-item\" role=\"presentation\">
  3818.             <button class=\"nav-link\" id=\"tab-callback\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-callback\" type=\"button\" role=\"tab\">
  3819.               Être rappelé
  3820.             </button>
  3821.           </li>
  3822.         </ul>
  3824.         <div class=\"tab-content pt-3\">
  3825.           <!-- Calendrier -->
  3826.           <div class=\"tab-pane fade show active\" id=\"pane-calendar\" role=\"tabpanel\">
  3827.             <div class=\"text-center mb-3\">
  3828.               <h6 class=\"mb-2\">Réservez votre créneau de démonstration</h6>
  3829.               <p class=\"text-muted small\">Choisissez un créneau qui vous convient pour une démo personnalisée</p>
  3830.             </div>
  3831.             <div class=\"ratio ratio-16x9 border rounded\">
  3832.               <iframe src=\"https://calendly.com/5sur5sejour/demo\" title=\"Calendrier de réservation\" loading=\"lazy\" frameborder=\"0\"></iframe>
  3833.             </div>
  3834.             <p class=\"small text-muted mt-2 mb-0\">
  3835.               <i class=\"bi bi-clock me-1\"></i> Créneau visio 15–30 min · 
  3836.               <i class=\"bi bi-check-circle me-1\"></i> Confirmation instantanée ·
  3837.               <i class=\"bi bi-shield-check me-1\"></i> 100% gratuit
  3838.             </p>
  3839.           </div>
  3841.           <!-- Formulaire callback -->
  3842.           <div class=\"tab-pane fade\" id=\"pane-callback\" role=\"tabpanel\">
  3843.             <div class=\"text-center mb-3\">
  3844.               <h6 class=\"mb-2\">Être rappelé par un expert</h6>
  3845.               <p class=\"text-muted small\">Laissez-nous vos coordonnées et nous vous rappelons sous 24h</p>
  3846.             </div>
  3847.             <form id=\"contactForm\" class=\"needs-validation\" method=\"post\" action=\"{{ path('app_contact') }}\" novalidate>
  3848.               <input type=\"hidden\" name=\"topic\" id=\"topic\" value=\"demo\">
  3849.               <input type=\"hidden\" name=\"pack\"  id=\"pack\"  value=\"\">
  3850.               <input type=\"hidden\" name=\"objet\" id=\"objet\" value=\"demo\">
  3851.               <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  3853.               <div class=\"row g-3\">
  3854.                 <div class=\"col-md-6\">
  3855.                   <label class=\"form-label\">Nom & prénom</label>
  3856.                   <input type=\"text\" class=\"form-control\" name=\"name\" required 
  3857.                          placeholder=\"Votre nom complet\">
  3858.                   <div class=\"invalid-feedback\">Veuillez saisir votre nom et prénom.</div>
  3859.                 </div>
  3860.                 <div class=\"col-md-6\">
  3861.                   <label class=\"form-label\">Établissement</label>
  3862.                   <input type=\"text\" class=\"form-control\" name=\"organization\" required 
  3863.                          placeholder=\"Nom de votre établissement\">
  3864.                   <div class=\"invalid-feedback\">Veuillez saisir le nom de votre établissement.</div>
  3865.                 </div>
  3866.                 <div class=\"col-md-6\">
  3867.                   <label class=\"form-label\">Email pro</label>
  3868.                   <input type=\"email\" class=\"form-control\" name=\"email\" required 
  3869.                          placeholder=\"votre.email@etablissement.fr\">
  3870.                   <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  3871.                 </div>
  3872.                 <div class=\"col-md-6\">
  3873.                   <label class=\"form-label\">Téléphone</label>
  3874.                   <input type=\"tel\" class=\"form-control\" name=\"telephone\" required 
  3875.                          placeholder=\"06 12 34 56 78\" pattern=\"[0-9\\s\\+\\-\\(\\)]{10,}\">
  3876.                   <div class=\"invalid-feedback\">Veuillez saisir un numéro de téléphone valide.</div>
  3877.                 </div>
  3878.                 <div class=\"col-md-6\">
  3879.                   <label class=\"form-label\">Nb. de séjours / an</label>
  3880.                   <select class=\"form-select\" name=\"sejours_count\" required>
  3881.                     <option value=\"\" selected>Choisir…</option>
  3882.                     <option value=\"1-3\">1–3</option>
  3883.                     <option value=\"4-10\">4–10</option>
  3884.                     <option value=\"11-30\">11–30</option>
  3885.                     <option value=\"30+\">30+</option>
  3886.                   </select>
  3887.                   <div class=\"invalid-feedback\">Veuillez sélectionner le nombre de séjours.</div>
  3888.                 </div>
  3889.                 <div class=\"col-12\">
  3890.                   <label class=\"form-label\">Message (optionnel)</label>
  3891.                   <textarea class=\"form-control\" name=\"message\" rows=\"3\"
  3892.                     placeholder=\"Décrivez brièvement vos besoins : type de séjours, nombre d'enfants, questions spécifiques...\"></textarea>
  3893.                 </div>
  3894.                 <div class=\"col-12\">
  3895.                   <div class=\"form-check\">
  3896.                     <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"consent\" name=\"consent\" required>
  3897.                     <label class=\"form-check-label\" for=\"consent\">J'accepte d'être contacté (RGPD).</label>
  3898.                     <div class=\"invalid-feedback\">Vous devez accepter d'être contacté pour continuer.</div>
  3899.                   </div>
  3900.                 </div>
  3901.                 <div class=\"col-12 d-grid d-sm-flex gap-2\">
  3902.                   <button id=\"submitBtn\" class=\"btn btn-primary px-4\" type=\"submit\">
  3903.                     <i class=\"bi bi-telephone me-2\"></i>Être rappelé sous 24h
  3904.                   </button>
  3905.                   <a class=\"btn btn-outline-secondary px-4\" href=\"mailto:contact@5sur5sejour.fr\">
  3906.                     <i class=\"bi bi-envelope me-2\"></i>Nous écrire
  3907.                   </a>
  3908.                 </div>
  3909.               </div>
  3911.               <p class=\"small text-muted mt-2 mb-0\">
  3912.                 Si la structure ne prend pas en charge <strong>Parent Premium</strong>, les familles peuvent l'activer (2,90 € / parent / séjour) pour l'accès complet, boîte vocale illimitée incluse. <span class=\"text-primary-emphasis\">Recommandé : prise en charge par la structure.</span>
  3913.               </p>
  3914.             </form>
  3915.           </div>
  3916.         </div>
  3917.       </div>
  3919.       <div class=\"modal-footer\">
  3920.         <p class=\"small text-muted mb-0\">Sans engagement · Données hébergées en France</p>
  3921.       </div>
  3922.     </div>
  3923.   </div>
  3924. </div>
  3926. <!-- MODALE CRÉER MON SÉJOUR -->
  3927. <div class=\"modal fade\" id=\"createSejourModal\" tabindex=\"-1\" aria-labelledby=\"createSejourTitle\" aria-hidden=\"true\">
  3928.   <div class=\"modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable\">
  3929.     <div class=\"modal-content\">
  3930.       <div class=\"modal-header border-bottom-0\">
  3931.         <div class=\"w-100\">
  3932.           <h5 id=\"createSejourTitle\" class=\"modal-title mb-2\">Créer mon espace séjour</h5>
  3933.           <div class=\"d-flex align-items-center gap-2\">
  3934.             <span id=\"stepLabel\" class=\"badge bg-primary\">Étape 1/2</span>
  3935.             <small class=\"text-muted\" id=\"stepDescription\">Choisissez votre profil</small>
  3936.           </div>
  3937.         </div>
  3938.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  3939.       </div>
  3941.       <div class=\"modal-body px-4\">
  3942.         <!-- ÉTAPE 1 : Choix du profil -->
  3943.         <div id=\"step1\" class=\"step-content\">
  3944.           <p class=\"lead text-center mb-4\">Sélectionnez l'option qui correspond à votre situation :</p>
  3945.           
  3946.           <div class=\"row g-3 mb-3\">
  3947.             <!-- Création simple -->
  3948.             <div class=\"col-md-4\">
  3949.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"{{ path('app_creation_simple_creer') }}\">
  3950.                 <div class=\"card-body text-center p-4\">
  3951.                   <div class=\"fs-1 mb-3\">✨</div>
  3952.                   <h6 class=\"card-title fw-bold mb-2\">Créer un  espace séjour</h6>
  3953.                   <p class=\"card-text small text-muted mb-3\">
  3954.                     Créez un séjour unique. Paiement flexible : par les parents ou par la structure. Prix unique de 39€ par séjour.
  3955.                   </p>
  3956.                   <span class=\"badge bg-primary\">🎯 Flexible</span>
  3957.                 </div>
  3958.               </a>
  3959.             </div>
  3961.             <!-- Pack Annuel - 25 séjours -->
  3962.  <div class=\"col-md-4\">
  3963.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"{{ path('pack_annuel_partenaires') }}\">
  3964.                 <div class=\"card-body text-center p-4\">
  3965.                   <div class=\"fs-1 mb-3\">📅</div>
  3966.                   <h6 class=\"card-title fw-bold mb-2\">En moyenne 25 séjours par an</h6>
  3967.                   <p class=\"card-text small text-muted mb-3\">
  3968.                     Pack Annuel idéal pour les structures organisant plusieurs séjours. Jusqu'à 25 séjours inclus, accompagnateurs illimités, support premium.
  3969.                   </p>
  3970.                   <span class=\"badge bg-info\">💼 Pack Annuel</span>
  3971.                 </div>
  3972.               </a>
  3973.             </div>
  3975.             <!-- Plus de 25 séjours - Partenaire -->
  3976.             <div class=\"col-md-4\">
  3977.               <a class=\"card h-100 border-2 hover-shadow text-decoration-none\" href=\"{{ path('nosPartenaires') }}\">
  3978.                 <div class=\"card-body text-center p-4\">
  3979.                   <div class=\"fs-1 mb-3\">🚀</div>
  3980.                   <h6 class=\"card-title fw-bold mb-2\">Plus de 25 séjours par an</h6>
  3981.                   <p class=\"card-text small text-muted mb-3\">
  3982.                     Devenez partenaire 5sur5 Séjour et bénéficiez d'une offre sur mesure avec tarif dégressif, accompagnement dédié et avantages exclusifs.
  3983.                   </p>
  3984.                   <span class=\"badge bg-purple\">🤝 Partenariat</span>
  3985.                 </div>
  3986.               </a>
  3987.             </div>
  3988.           </div>
  3990.           <!-- École publique - Plus discret -->
  3991.           <div class=\"text-center mt-4 pt-3 border-top\">
  3992.             <p class=\"small text-muted mb-2\">Vous êtes une école publique ?</p>
  3993.             <p class=\"small text-muted mb-2\">5sur5séjour offre son accès aux écoles publiques en France</p>
  3994.             <a href=\"{{ path('app_ecoles_publiques_creer') }}\" class=\"text-decoration-none d-inline-flex align-items-center gap-2 small fw-semibold text-primary\">
  3995.               <span>Accès gratuit à la plateforme</span>
  3996.               <span class=\"badge bg-success\">✅ Gratuit</span>
  3997.               <i class=\"bi bi-arrow-right\"></i>
  3998.             </a>
  3999.           </div>
  4000.         </div>
  4002.         <!-- ÉTAPE 2 : Formulaires selon le profil -->
  4003.         <div id=\"step2\" class=\"step-content d-none\">
  4004.           <!-- Panneau Partenaire -->
  4005.           <div id=\"pane-partenaire\" class=\"role-pane d-none\">
  4006.             <div class=\"alert alert-info mb-4\">
  4007.               <strong>🤝 Partenaire / Organisme</strong><br>
  4008.               <small>Démo 15–30 min · Accompagnement contrat & onboarding.</small>
  4009.             </div>
  4011.             <ul class=\"nav nav-tabs mb-3\" id=\"partenaireTabsNav\" role=\"tablist\">
  4012.               <li class=\"nav-item\" role=\"presentation\">
  4013.                 <button class=\"nav-link active\" id=\"tab-partenaire-demo\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-partenaire-demo\" type=\"button\" role=\"tab\">
  4014.                   Réserver une démo
  4015.                 </button>
  4016.               </li>
  4017.               <li class=\"nav-item\" role=\"presentation\">
  4018.                 <button class=\"nav-link\" id=\"tab-partenaire-callback\" data-bs-toggle=\"tab\" data-bs-target=\"#pane-partenaire-callback\" type=\"button\" role=\"tab\">
  4019.                   Être rappelé
  4020.                 </button>
  4021.               </li>
  4022.             </ul>
  4024.             <div class=\"tab-content\">
  4025.               <!-- Calendly pour démo partenaire -->
  4026.               <div class=\"tab-pane fade show active\" id=\"pane-partenaire-demo\" role=\"tabpanel\">
  4027.                 <div class=\"text-center mb-3\">
  4028.                   <p class=\"text-muted small mb-2\">Choisissez un créneau pour une démo personnalisée</p>
  4029.                 </div>
  4030.                 <div class=\"ratio ratio-16x9 border rounded\">
  4031.                   <iframe data-src=\"https://calendly.com/5sur5sejour/demo\" title=\"Calendrier de réservation partenaire\" loading=\"lazy\" frameborder=\"0\"></iframe>
  4032.                 </div>
  4033.                 <p class=\"small text-muted mt-2 mb-0\">
  4034.                   <i class=\"bi bi-clock me-1\"></i> Créneau visio 15–30 min · 
  4035.                   <i class=\"bi bi-check-circle me-1\"></i> Accompagnement contrat ·
  4036.                   <i class=\"bi bi-shield-check me-1\"></i> 100% gratuit
  4037.                 </p>
  4038.               </div>
  4040.               <!-- Formulaire rappel partenaire -->
  4041.               <div class=\"tab-pane fade\" id=\"pane-partenaire-callback\" role=\"tabpanel\">
  4042.                 <form id=\"formPartenaire\" method=\"post\" action=\"/contact/partenaire\" class=\"needs-validation\" novalidate>
  4043.                   <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  4044.                   
  4045.                   <div class=\"row g-3\">
  4046.                     <div class=\"col-md-6\">
  4047.                       <label class=\"form-label\">Nom & prénom <span class=\"text-danger\">*</span></label>
  4048.                       <input type=\"text\" class=\"form-control\" name=\"name\" required 
  4049.                              placeholder=\"Votre nom complet\">
  4050.                       <div class=\"invalid-feedback\">Veuillez saisir votre nom et prénom.</div>
  4051.                     </div>
  4052.                     <div class=\"col-md-6\">
  4053.                       <label class=\"form-label\">Structure <span class=\"text-danger\">*</span></label>
  4054.                       <input type=\"text\" class=\"form-control\" name=\"organization\" required 
  4055.                              placeholder=\"Nom de votre structure\">
  4056.                       <div class=\"invalid-feedback\">Veuillez saisir le nom de votre structure.</div>
  4057.                     </div>
  4058.                     <div class=\"col-md-6\">
  4059.                       <label class=\"form-label\">Email pro <span class=\"text-danger\">*</span></label>
  4060.                       <input type=\"email\" class=\"form-control\" name=\"email\" required 
  4061.                              placeholder=\"votre.email@structure.fr\">
  4062.                       <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  4063.                     </div>
  4064.                     <div class=\"col-md-6\">
  4065.                       <label class=\"form-label\">Téléphone (optionnel)</label>
  4066.                       <input type=\"tel\" class=\"form-control\" name=\"telephone\" 
  4067.                              placeholder=\"06 12 34 56 78\">
  4068.                     </div>
  4069.                     <div class=\"col-12\">
  4070.                       <label class=\"form-label\">Message (optionnel)</label>
  4071.                       <textarea class=\"form-control\" name=\"message\" rows=\"3\"
  4072.                         placeholder=\"Décrivez brièvement vos besoins...\"></textarea>
  4073.                     </div>
  4074.                     <div class=\"col-12\">
  4075.                       <div class=\"form-check\">
  4076.                         <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"consent_partenaire\" name=\"consent\" required>
  4077.                         <label class=\"form-check-label\" for=\"consent_partenaire\">
  4078.                           J'accepte d'être contacté (RGPD) <span class=\"text-danger\">*</span>
  4079.                         </label>
  4080.                         <div class=\"invalid-feedback\">Vous devez accepter d'être contacté.</div>
  4081.                       </div>
  4082.                     </div>
  4083.                     <div class=\"col-12 d-flex gap-2\">
  4084.                       <button type=\"submit\" class=\"btn btn-primary px-4\">
  4085.                         <i class=\"bi bi-telephone me-2\"></i>Être rappelé sous 24 h
  4086.                       </button>
  4087.                       <a class=\"btn btn-outline-secondary px-4\" href=\"mailto:contact@5sur5sejour.fr\">
  4088.                         Nous écrire
  4089.                       </a>
  4090.                     </div>
  4091.                   </div>
  4092.                 </form>
  4093.               </div>
  4094.             </div>
  4095.           </div>
  4097.           <!-- Panneau Création simple -->
  4098.           <div id=\"pane-autre\" class=\"role-pane d-none\">
  4099.             <div class=\"alert alert-primary mb-4\">
  4100.               <strong>✨ Créer un espace séjour</strong><br>
  4101.               <small>Type PP (Partenaire Payant) - Les familles peuvent activer Parent Premium (2,90 € / parent / séjour).</small>
  4102.             </div>
  4104.             <form id=\"formAutre\" method=\"post\" action=\"/Accompagnateur/register\" class=\"needs-validation\" novalidate>
  4105.               <input type=\"text\" name=\"website\" class=\"visually-hidden\" tabindex=\"-1\" autocomplete=\"off\">
  4106.               <input type=\"hidden\" name=\"type_user\" value=\"PP\">
  4107.               <input type=\"hidden\" name=\"connpay\" value=\"1\">
  4108.               
  4109.               <div class=\"row g-3\">
  4110.                 <div class=\"col-md-6\">
  4111.                   <label class=\"form-label\">Nom <span class=\"text-danger\">*</span></label>
  4112.                   <input type=\"text\" class=\"form-control\" name=\"nom_acc\" required 
  4113.                          placeholder=\"Votre nom\">
  4114.                   <div class=\"invalid-feedback\">Veuillez saisir votre nom.</div>
  4115.                 </div>
  4116.                 <div class=\"col-md-6\">
  4117.                   <label class=\"form-label\">Prénom <span class=\"text-danger\">*</span></label>
  4118.                   <input type=\"text\" class=\"form-control\" name=\"prenom_acc\" required 
  4119.                          placeholder=\"Votre prénom\">
  4120.                   <div class=\"invalid-feedback\">Veuillez saisir votre prénom.</div>
  4121.                 </div>
  4122.                 <div class=\"col-md-12\">
  4123.                   <label class=\"form-label\">Fonction <span class=\"text-danger\">*</span></label>
  4124.                   <select class=\"form-select\" name=\"fonction\" required>
  4125.                     <option value=\"\">Choisir votre fonction</option>
  4126.                     <option value=\"1\">Enseignant(e)</option>
  4127.                     <option value=\"2\">Principal(e)</option>
  4128.                     <option value=\"3\">Professeur(e)</option>
  4129.                     <option value=\"4\">CPE</option>
  4130.                     <option value=\"5\">Directeur(trice) d'école</option>
  4131.                     <option value=\"6\">Animateur(trice)</option>
  4132.                     <option value=\"7\">Directeur(trice) séjour</option>
  4133.                     <option value=\"8\">Directeur(trice) centre de loisirs / ALSH</option>
  4134.                     <option value=\"9\">Coordinateur(trice) enfance jeunesse</option>
  4135.                     <option value=\"10\">Educateur(trice)</option>
  4136.                     <option value=\"11\">Président(e)</option>
  4137.                     <option value=\"12\">Autre</option>
  4138.                   </select>
  4139.                   <div class=\"invalid-feedback\">Veuillez sélectionner votre fonction.</div>
  4140.                 </div>
  4141.                 <div class=\"col-md-12\">
  4142.                   <label class=\"form-label\">Structure / Organisme <span class=\"text-danger\">*</span></label>
  4143.                   <input type=\"text\" class=\"form-control\" name=\"etablisment\" required 
  4144.                          placeholder=\"Nom de votre structure ou organisation\">
  4145.                   <div class=\"invalid-feedback\">Veuillez saisir le nom de votre structure.</div>
  4146.                 </div>
  4147.                 <div class=\"col-md-12\">
  4148.                   <label class=\"form-label\">Adresse structure</label>
  4149.                   <input type=\"text\" class=\"form-control\" name=\"adressetablisment\" 
  4150.                          placeholder=\"Adresse de votre structure\">
  4151.                 </div>
  4152.                 <div class=\"col-md-6\">
  4153.                   <label class=\"form-label\">Code postal</label>
  4154.                   <input type=\"text\" class=\"form-control\" name=\"CODEpOSTALetablisment\" 
  4155.                          placeholder=\"Code postal\" maxlength=\"5\">
  4156.                 </div>
  4157.                 <div class=\"col-md-6\">
  4158.                   <label class=\"form-label\">Ville</label>
  4159.                   <input type=\"text\" class=\"form-control\" name=\"villeetablisment\" 
  4160.                          placeholder=\"Ville de votre structure\">
  4161.                 </div>
  4162.                 <div class=\"col-md-6\">
  4163.                   <label class=\"form-label\">N° de Téléphone mobile <span class=\"text-danger\">*</span></label>
  4164.                   <input type=\"tel\" class=\"form-control\" name=\"phone_acc\" required 
  4165.                          placeholder=\"06 12 34 56 78\" pattern=\"[0-9\\s\\+\\-\\(\\)]{10,}\">
  4166.                   <div class=\"invalid-feedback\">Veuillez saisir un numéro de téléphone valide.</div>
  4167.                 </div>
  4168.                 <div class=\"col-md-6\">
  4169.                   <label class=\"form-label\">Email <span class=\"text-danger\">*</span></label>
  4170.                   <input type=\"email\" class=\"form-control\" name=\"email\" required 
  4171.                          placeholder=\"votre.email@structure.fr\">
  4172.                   <div class=\"invalid-feedback\">Veuillez saisir une adresse email valide.</div>
  4173.                 </div>
  4175.                 <!-- Informations du séjour -->
  4176.                 <div class=\"col-12 mt-4\">
  4177.                   <h6 class=\"text-primary\">📍 Informations du séjour</h6>
  4178.                   <hr>
  4179.                 </div>
  4181.                 <div class=\"col-md-12\">
  4182.                   <label class=\"form-label\">Thème du séjour <span class=\"text-danger\">*</span></label>
  4183.                   <input type=\"text\" class=\"form-control\" name=\"theme_sejour\" required 
  4184.                          placeholder=\"Ex: Séjour ski, Camp d'été...\">
  4185.                   <div class=\"invalid-feedback\">Veuillez saisir le thème du séjour.</div>
  4186.                 </div>
  4187.                 <div class=\"col-md-12\">
  4188.                   <label class=\"form-label\">Adresse du séjour</label>
  4189.                   <input type=\"text\" class=\"form-control\" name=\"adress_sejour\" 
  4190.                          placeholder=\"Adresse du lieu de séjour\">
  4191.                 </div>
  4192.                 <div class=\"col-md-6\">
  4193.                   <label class=\"form-label\">Code postal</label>
  4194.                   <input type=\"text\" class=\"form-control\" name=\"codePostal\" 
  4195.                          placeholder=\"Code postal\" maxlength=\"5\">
  4196.                 </div>
  4197.                 <div class=\"col-md-6\">
  4198.                   <label class=\"form-label\">Pays <span class=\"text-danger\">*</span></label>
  4199.                   <select class=\"form-select\" name=\"pays\" required>
  4200.                     <option value=\"\">Choisir un pays</option>
  4201.                     <option value=\"France\" selected>France</option>
  4202.                     <option value=\"Belgique\">Belgique</option>
  4203.                     <option value=\"Suisse\">Suisse</option>
  4204.                     <option value=\"Espagne\">Espagne</option>
  4205.                     <option value=\"Italie\">Italie</option>
  4206.                     <option value=\"Allemagne\">Allemagne</option>
  4207.                     <option value=\"Royaume-Uni\">Royaume-Uni</option>
  4208.                     <option value=\"Autre\">Autre</option>
  4209.                   </select>
  4210.                   <div class=\"invalid-feedback\">Veuillez sélectionner un pays.</div>
  4211.                 </div>
  4212.                 <div class=\"col-md-6\">
  4213.                   <label class=\"form-label\">Ville du séjour</label>
  4214.                   <input type=\"text\" class=\"form-control\" name=\"ville\" 
  4215.                          placeholder=\"Ville du séjour\">
  4216.                 </div>
  4217.                 <div class=\"col-md-6\">
  4218.                   <label class=\"form-label\">Nombre de participants</label>
  4219.                   <input type=\"number\" class=\"form-control\" name=\"NbEnfant\" min=\"1\" 
  4220.                          placeholder=\"Nombre d'enfants\">
  4221.                 </div>
  4222.                 <div class=\"col-md-6\">
  4223.                   <label class=\"form-label\">Date début séjour <span class=\"text-danger\">*</span></label>
  4224.                   <input type=\"date\" class=\"form-control\" name=\"date_debut_sejour\" required>
  4225.                   <div class=\"invalid-feedback\">Veuillez saisir la date de début.</div>
  4226.                 </div>
  4227.                 <div class=\"col-md-6\">
  4228.                   <label class=\"form-label\">Date fin séjour <span class=\"text-danger\">*</span></label>
  4229.                   <input type=\"date\" class=\"form-control\" name=\"date_fin_sejour\" required>
  4230.                   <div class=\"invalid-feedback\">Veuillez saisir la date de fin.</div>
  4231.                 </div>
  4233.                 <div class=\"col-12 d-flex gap-2 mt-4\">
  4234.                   <button type=\"submit\" class=\"btn btn-primary px-4\">
  4235.                     <i class=\"bi bi-rocket me-2\"></i>Créer mon espace séjour (Type PP)
  4236.                   </button>
  4237.                   <a href=\"#\" class=\"btn btn-outline-secondary\" data-action=\"cta_demo\">
  4238.                     Besoin d'aide ? Démo
  4239.                   </a>
  4240.                 </div>
  4241.               </div>
  4242.             </form>
  4243.           </div>
  4245.           <button type=\"button\" id=\"backToStep1\" class=\"btn btn-link mt-3\">
  4246.             <i class=\"bi bi-arrow-left me-1\"></i> Retour au choix du profil
  4247.           </button>
  4248.         </div>
  4249.       </div>
  4251.       <div class=\"modal-footer border-top-0\">
  4252.         <p class=\"small text-muted mb-0\">Sans engagement · Données hébergées en France 🇫🇷</p>
  4253.       </div>
  4254.     </div>
  4255.   </div>
  4256. </div>
  4258. <style>
  4259. .select-role {
  4260.   cursor: pointer;
  4261.   transition: all 0.3s ease;
  4262. }
  4263. .select-role:hover,
  4264. .select-role:focus {
  4265.   transform: translateY(-5px);
  4266.   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  4267.   border-color: var(--bs-primary) !important;
  4268. }
  4269. .select-role:active {
  4270.   transform: translateY(-2px);
  4271. }
  4272. .hover-shadow {
  4273.   transition: box-shadow 0.3s ease;
  4274. }
  4275. .bg-purple {
  4276.   background-color: #6f42c1 !important;
  4277. }
  4278. </style>
  4280. <script>
  4281.   // Protection contre les erreurs de la toolbar Symfony
  4282.   (function() {
  4283.     // Désactiver complètement Sfjs
  4284.     window.Sfjs = {
  4285.       loadToolbar: function() { console.log('Sfjs.loadToolbar désactivé'); },
  4286.       showToolbar: function() { console.log('Sfjs.showToolbar désactivé'); },
  4287.       hideToolbar: function() { console.log('Sfjs.hideToolbar désactivé'); },
  4288.       initToolbar: function() { console.log('Sfjs.initToolbar désactivé'); }
  4289.     };
  4290.     
  4291.     // Désactiver les requêtes vers _wdt si elles échouent
  4292.     const originalFetch = window.fetch;
  4293.     window.fetch = function(...args) {
  4294.       const url = args[0];
  4295.       if (typeof url === 'string' && url.includes('/_wdt/')) {
  4296.         console.warn('Requête vers _wdt bloquée:', url);
  4297.         return Promise.reject(new Error('Toolbar Symfony désactivée'));
  4298.       }
  4299.       return originalFetch.apply(this, args);
  4300.     };
  4301.     
  4302.     // Désactiver XMLHttpRequest vers _wdt
  4303.     const originalXHROpen = XMLHttpRequest.prototype.open;
  4304.     const originalXHRSend = XMLHttpRequest.prototype.send;
  4305.     
  4306.     XMLHttpRequest.prototype.open = function(method, url, ...args) {
  4307.       this._url = url; // Stocker l'URL pour vérification dans send
  4308.       if (typeof url === 'string' && url.includes('/_wdt/')) {
  4309.         console.warn('Requête XHR vers _wdt bloquée:', url);
  4310.         this._blocked = true;
  4311.         return;
  4312.       }
  4313.       this._blocked = false;
  4314.       return originalXHROpen.apply(this, [method, url, ...args]);
  4315.     };
  4316.     
  4317.     XMLHttpRequest.prototype.send = function(payload) {
  4318.       if (this._blocked) {
  4319.         console.warn('Envoi XHR bloqué pour:', this._url);
  4320.         return; // Ne pas envoyer si bloqué
  4321.       }
  4322.       return originalXHRSend.apply(this, arguments);
  4323.     };
  4324.   })();
  4326.   // Supprimer complètement la toolbar Symfony du DOM
  4327.   function removeSymfonyToolbar() {
  4328.     const toolbar = document.querySelector('.sf-toolbar');
  4329.     if (toolbar) {
  4330.       toolbar.remove();
  4331.       console.log('Toolbar Symfony supprimée du DOM');
  4332.     }
  4333.     
  4334.     const clearer = document.querySelector('.sf-toolbar-clearer');
  4335.     if (clearer) {
  4336.       clearer.remove();
  4337.     }
  4338.     
  4339.     const minitoolbar = document.querySelector('.sf-minitoolbar');
  4340.     if (minitoolbar) {
  4341.       minitoolbar.remove();
  4342.     }
  4343.   }
  4344.   
  4345.   // Supprimer immédiatement
  4346.   removeSymfonyToolbar();
  4347.   
  4348.   // Observer pour supprimer la toolbar dès qu'elle apparaît
  4349.   const observer = new MutationObserver(function(mutations) {
  4350.     mutations.forEach(function(mutation) {
  4351.       if (mutation.type === 'childList') {
  4352.         mutation.addedNodes.forEach(function(node) {
  4353.           if (node.nodeType === 1) { // Element node
  4354.             if (node.classList && (node.classList.contains('sf-toolbar') || node.classList.contains('sf-minitoolbar'))) {
  4355.               node.remove();
  4356.               console.log('Toolbar Symfony supprimée par l\\'observer');
  4357.             }
  4358.             // Vérifier aussi les enfants
  4359.             const toolbars = node.querySelectorAll && node.querySelectorAll('.sf-toolbar, .sf-minitoolbar, .sf-toolbar-clearer');
  4360.             if (toolbars) {
  4361.               toolbars.forEach(tb => tb.remove());
  4362.             }
  4363.           }
  4364.         });
  4365.       }
  4366.     });
  4367.   });
  4368.   
  4369.   observer.observe(document.body, {
  4370.     childList: true,
  4371.     subtree: true
  4372.   });
  4373.   
  4374.   // Ajouter du CSS pour masquer la toolbar Symfony
  4375.   const style = document.createElement('style');
  4376.   style.textContent = `
  4377.     .sf-toolbar, .sf-toolbar-clearer, .sf-minitoolbar { 
  4378.       display: none !important; 
  4379.       visibility: hidden !important;
  4380.       opacity: 0 !important;
  4381.       height: 0 !important;
  4382.       width: 0 !important;
  4383.       overflow: hidden !important;
  4384.     }
  4385.   `;
  4386.   document.head.appendChild(style);
  4388.   // Masquer la toolbar Symfony si elle cause des problèmes
  4389.   document.addEventListener('DOMContentLoaded', function() {
  4390.     // Masquer la toolbar Symfony après 2 secondes si elle n'est pas chargée
  4391.     setTimeout(() => {
  4392.       const toolbar = document.querySelector('.sf-toolbar');
  4393.       if (toolbar && toolbar.classList.contains('sf-display-none')) {
  4394.         toolbar.style.display = 'none';
  4395.         console.log('Toolbar Symfony masquée pour éviter les erreurs 404');
  4396.       }
  4397.     }, 2000);
  4398.     // Ouvre la modale avec l'onglet adapté + pré-remplissage
  4399.     document.addEventListener('click', (e) => {
  4400.     // Éviter les conflits avec la toolbar Symfony
  4401.     if (e.target.closest('.sf-toolbar') || e.target.closest('[id^=\"sf\"]')) {
  4402.       return;
  4403.     }
  4404.     
  4405.     const a = e.target.closest('a[data-action=\"cta_demo\"], a[data-action=\"cta_expert\"]');
  4406.     if (!a) return;
  4407.     e.preventDefault();
  4409.     const isExpert = a.dataset.action === 'cta_expert';
  4410.     const pack = a.dataset.pack || '';
  4412.     document.getElementById('demoTitle').textContent = isExpert ? 'Parler à un expert' : 'Demander une démo guidée';
  4413.     document.getElementById('objet').value = isExpert ? 'expert' : 'demo';
  4414.     document.getElementById('topic').value = isExpert ? 'expert' : 'demo';
  4415.     document.getElementById('pack').value  = pack;
  4417.     // Onglet par défaut : expert => rappel / demo => calendrier
  4418.     const triggerId = isExpert ? 'tab-callback' : 'tab-calendar';
  4419.     const tabElement = document.getElementById(triggerId);
  4420.     
  4421.     if (tabElement) {
  4422.       // Désactiver tous les onglets
  4423.       document.querySelectorAll('#demoTabs .nav-link').forEach(tab => {
  4424.         tab.classList.remove('active');
  4425.         tab.setAttribute('aria-selected', 'false');
  4426.       });
  4427.       
  4428.       // Désactiver tous les panneaux
  4429.       document.querySelectorAll('.tab-pane').forEach(pane => {
  4430.         pane.classList.remove('show', 'active');
  4431.       });
  4432.       
  4433.       // Activer l'onglet sélectionné
  4434.       tabElement.classList.add('active');
  4435.       tabElement.setAttribute('aria-selected', 'true');
  4436.       
  4437.       // Activer le panneau correspondant
  4438.       const targetPane = document.querySelector(tabElement.getAttribute('data-bs-target'));
  4439.       if (targetPane) {
  4440.         targetPane.classList.add('show', 'active');
  4441.       }
  4442.     }
  4444.     const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('demoModal'));
  4445.     modal.show();
  4446.   });
  4448.   // Validation form + anti double-submit pour le formulaire de démo
  4449.   (function () {
  4450.     const form = document.getElementById('contactForm');
  4451.     const btn  = document.getElementById('submitBtn');
  4452.     if (!form || !btn) return;
  4454.     // Protection contre les soumissions multiples
  4455.     let isSubmitting = false;
  4456.     
  4457.     // Nettoyer les classes d'erreur quand l'utilisateur tape
  4458.     form.addEventListener('input', function(e) {
  4459.       if (e.target.classList.contains('is-invalid')) {
  4460.         e.target.classList.remove('is-invalid');
  4461.       }
  4462.     });
  4463.     
  4464.     form.addEventListener('submit', function(e){
  4465.       e.preventDefault(); // Toujours empêcher la soumission normale
  4466.       
  4467.       // Éviter les soumissions multiples
  4468.       if (isSubmitting) return;
  4469.       isSubmitting = true;
  4470.       
  4471.       // Nettoyer les messages précédents
  4472.       const existingAlerts = form.parentNode.querySelectorAll('.alert');
  4473.       existingAlerts.forEach(alert => alert.remove());
  4474.       
  4475.       if (!form.checkValidity()) {
  4476.         e.stopPropagation();
  4477.         form.classList.add('was-validated');
  4478.         
  4479.         // Afficher les messages d'erreur pour chaque champ invalide
  4480.         const invalidFields = form.querySelectorAll(':invalid');
  4481.         invalidFields.forEach(field => {
  4482.           field.classList.add('is-invalid');
  4483.         });
  4484.         
  4485.         // Afficher un message d'erreur général
  4486.         const errorAlert = document.createElement('div');
  4487.         errorAlert.className = 'alert alert-warning mt-3';
  4488.         errorAlert.innerHTML = `
  4489.           <div class=\"d-flex align-items-center\">
  4490.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  4491.             <div>
  4492.               <strong>Veuillez corriger les erreurs :</strong><br>
  4493.               Tous les champs marqués d'un astérisque (*) sont obligatoires.
  4494.             </div>
  4495.           </div>
  4496.         `;
  4497.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  4498.         
  4499.         // Supprimer le message après 5 secondes
  4500.         setTimeout(() => {
  4501.           if (errorAlert.parentNode) {
  4502.             errorAlert.parentNode.removeChild(errorAlert);
  4503.           }
  4504.         }, 5000);
  4505.         
  4506.         isSubmitting = false;
  4507.         return;
  4508.       } 
  4510.       // Désactiver le bouton pendant l'envoi
  4511.       btn.disabled = true; 
  4512.       const originalText = btn.textContent;
  4513.       btn.textContent = 'Envoi en cours…';
  4515.       // Récupérer les données du formulaire
  4516.       const formData = new FormData(form);
  4517.       
  4518.       // Debug : afficher les données envoyées
  4519.       console.log('=== DEBUG FORMULAIRE ===');
  4520.       console.log('Données du formulaire :');
  4521.       const formDataObj = {};
  4522.       for (let [key, value] of formData.entries()) {
  4523.         console.log(key + ': \"' + value + '\"');
  4524.         formDataObj[key] = value;
  4525.       }
  4526.       console.log('Objet complet:', formDataObj);
  4527.       
  4528.       // Vérifier les champs obligatoires
  4529.       const requiredFields = ['name', 'organization', 'email', 'telephone', 'sejours_count', 'consent'];
  4530.       const missingFields = [];
  4531.       requiredFields.forEach(field => {
  4532.         if (!formDataObj[field] || formDataObj[field].trim() === '') {
  4533.           missingFields.push(field);
  4534.         }
  4535.       });
  4536.       
  4537.       if (missingFields.length > 0) {
  4538.         console.error('Champs manquants:', missingFields);
  4539.         alert('Champs manquants: ' + missingFields.join(', '));
  4540.         isSubmitting = false;
  4541.         return;
  4542.       }
  4543.       
  4544.       console.log('Tous les champs obligatoires sont remplis ✅');
  4546.       // Envoyer la requête AJAX
  4547.       fetch(form.action, {
  4548.         method: 'POST',
  4549.         body: formData,
  4550.         headers: {
  4551.           'X-Requested-With': 'XMLHttpRequest'
  4552.         }
  4553.       })
  4554.       .then(response => response.json())
  4555.       .then(data => {
  4556.         if (data.success) {
  4557.           // Afficher le message de succès
  4558.           const successAlert = document.createElement('div');
  4559.           successAlert.className = 'alert alert-success mt-3';
  4560.           successAlert.innerHTML = `
  4561.             <div class=\"d-flex align-items-center\">
  4562.               <i class=\"bi bi-check-circle-fill me-2\"></i>
  4563.               <div>
  4564.                 <strong>Demande envoyée !</strong><br>
  4565.                 \${data.message}
  4566.               </div>
  4567.             </div>
  4568.           `;
  4569.           form.parentNode.insertBefore(successAlert, form.nextSibling);
  4570.           
  4571.           // Réinitialiser le formulaire
  4572.           form.reset();
  4573.           form.classList.remove('was-validated');
  4574.           
  4575.           // Fermer le modal après 3 secondes
  4576.           setTimeout(() => {
  4577.             const modal = bootstrap.Modal.getInstance(document.getElementById('demoModal'));
  4578.             if (modal) modal.hide();
  4579.           }, 3000);
  4580.         } else {
  4581.           // Afficher le message d'erreur
  4582.           const errorAlert = document.createElement('div');
  4583.           errorAlert.className = 'alert alert-danger mt-3';
  4584.           errorAlert.innerHTML = `
  4585.             <div class=\"d-flex align-items-center\">
  4586.               <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  4587.               <div>
  4588.                 <strong>Erreur :</strong><br>
  4589.                 \${data.message}
  4590.               </div>
  4591.             </div>
  4592.           `;
  4593.           form.parentNode.insertBefore(errorAlert, form.nextSibling);
  4594.           
  4595.           // Supprimer le message d'erreur après 8 secondes
  4596.           setTimeout(() => {
  4597.             if (errorAlert.parentNode) {
  4598.               errorAlert.parentNode.removeChild(errorAlert);
  4599.             }
  4600.           }, 8000);
  4601.         }
  4602.       })
  4603.       .catch(error => {
  4604.         console.error('Erreur:', error);
  4605.         const errorAlert = document.createElement('div');
  4606.         errorAlert.className = 'alert alert-danger mt-3';
  4607.         errorAlert.innerHTML = `
  4608.           <div class=\"d-flex align-items-center\">
  4609.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  4610.             <div>
  4611.               <strong>Erreur technique :</strong><br>
  4612.               Une erreur est survenue lors de l'envoi. Veuillez réessayer plus tard.
  4613.             </div>
  4614.           </div>
  4615.         `;
  4616.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  4617.         
  4618.         // Supprimer le message d'erreur après 10 secondes
  4619.         setTimeout(() => {
  4620.           if (errorAlert.parentNode) {
  4621.             errorAlert.parentNode.removeChild(errorAlert);
  4622.           }
  4623.         }, 10000);
  4624.       })
  4625.       .finally(() => {
  4626.         // Réactiver le bouton et le flag de soumission
  4627.         btn.disabled = false;
  4628.         btn.textContent = originalText;
  4629.         isSubmitting = false;
  4630.         
  4631.         // Supprimer les anciennes alertes après 5 secondes
  4632.         setTimeout(() => {
  4633.           const alerts = form.parentNode.querySelectorAll('.alert');
  4634.           alerts.forEach(alert => alert.remove());
  4635.         }, 5000);
  4636.       });
  4637.     });
  4638.   })();
  4640.   // ===== GESTION MODALE \"CRÉER MON SÉJOUR\" =====
  4641.   const createSejourModal = document.getElementById('createSejourModal');
  4642.   const step1 = document.getElementById('step1');
  4643.   const step2 = document.getElementById('step2');
  4644.   const stepLabel = document.getElementById('stepLabel');
  4645.   const stepDescription = document.getElementById('stepDescription');
  4646.   const backToStep1Btn = document.getElementById('backToStep1');
  4647.   
  4648.   let currentRole = null;
  4649.   let isSubmittingCreate = false;
  4651.   // Fonction helper pour le tracking GA4
  4652.   function trackEvent(eventName, params = {}) {
  4653.     if (typeof gtag === 'function') {
  4654.       gtag('event', eventName, params);
  4655.       console.log('📊 GA4 Event:', eventName, params);
  4656.     }
  4657.   }
  4659.   // Reset de la modale à l'ouverture
  4660.   createSejourModal.addEventListener('show.bs.modal', function () {
  4661.     // Reset aux valeurs initiales
  4662.     step1.classList.remove('d-none');
  4663.     step2.classList.add('d-none');
  4664.     stepLabel.textContent = 'Étape 1/2';
  4665.     stepDescription.textContent = 'Choisissez votre profil';
  4666.     currentRole = null;
  4667.     
  4668.     // Masquer tous les panneaux de formulaire
  4669.     document.querySelectorAll('.role-pane').forEach(pane => pane.classList.add('d-none'));
  4670.     
  4671.     // Reset de tous les formulaires
  4672.     ['formEcole', 'formPartenaire', 'formAutre'].forEach(formId => {
  4673.       const form = document.getElementById(formId);
  4674.       if (form) {
  4675.         form.reset();
  4676.         form.classList.remove('was-validated');
  4677.       }
  4678.     });
  4680.     // Focus sur le titre de la modale
  4681.     setTimeout(() => {
  4682.       document.getElementById('createSejourTitle').focus();
  4683.     }, 300);
  4684.   });
  4686.   // Gestion du clic sur les cartes de sélection de rôle
  4687.   document.querySelectorAll('.select-role').forEach(card => {
  4688.     card.addEventListener('click', function() {
  4689.       const role = this.dataset.role;
  4690.       selectRole(role);
  4691.     });
  4692.     
  4693.     // Support du clavier
  4694.     card.addEventListener('keypress', function(e) {
  4695.       if (e.key === 'Enter' || e.key === ' ') {
  4696.         e.preventDefault();
  4697.         const role = this.dataset.role;
  4698.         selectRole(role);
  4699.       }
  4700.     });
  4701.   });
  4703.   function selectRole(role) {
  4704.     currentRole = role;
  4705.     
  4706.     // Track event GA4
  4707.     trackEvent('step_select_role', { role: role });
  4708.     
  4709.     // Si école publique → Redirection directe vers /Accompagnateur/login avec type EF
  4710.     if (role === 'ecole_publique') {
  4711.       // Fermer la modale
  4712.       bootstrap.Modal.getInstance(createSejourModal)?.hide();
  4713.       
  4714.       // Rediriger vers la page de login avec le paramètre type EF et source
  4715.       window.location.href = '/Accompagnateur/login?type=EF&from=modal';
  4716.       return;
  4717.     }
  4718.     
  4719.     // Passage à l'étape 2 pour les autres profils
  4720.     step1.classList.add('d-none');
  4721.     step2.classList.remove('d-none');
  4722.     stepLabel.textContent = 'Étape 2/2';
  4723.     
  4724.     // Afficher le panneau correspondant
  4725.     document.querySelectorAll('.role-pane').forEach(pane => pane.classList.add('d-none'));
  4726.     
  4727.     let roleLabel = '';
  4728.     if (role === 'partenaire') {
  4729.       document.getElementById('pane-partenaire').classList.remove('d-none');
  4730.       roleLabel = 'Partenaire / Organisme';
  4731.       // Lazy load Calendly pour le partenaire
  4732.       lazyLoadCalendlyIfNeeded('#pane-partenaire-demo iframe');
  4733.     } else if (role === 'autre') {
  4734.       document.getElementById('pane-autre').classList.remove('d-none');
  4735.       roleLabel = 'Création simple';
  4736.       setTimeout(() => document.querySelector('#pane-autre input')?.focus(), 300);
  4737.     }
  4738.     
  4739.     stepDescription.textContent = roleLabel;
  4740.   }
  4742.   // Retour à l'étape 1
  4743.   backToStep1Btn.addEventListener('click', function() {
  4744.     step1.classList.remove('d-none');
  4745.     step2.classList.add('d-none');
  4746.     stepLabel.textContent = 'Étape 1/2';
  4747.     stepDescription.textContent = 'Choisissez votre profil';
  4748.     currentRole = null;
  4749.   });
  4751.   // Lazy load Calendly
  4752.   function lazyLoadCalendlyIfNeeded(selector) {
  4753.     const iframe = document.querySelector(selector);
  4754.     if (iframe && iframe.hasAttribute('data-src') && !iframe.src) {
  4755.       iframe.src = iframe.getAttribute('data-src');
  4756.       console.log('📅 Calendly chargé:', iframe.src);
  4757.     }
  4758.   }
  4760.   // Lazy load Calendly pour modale démo (onglet calendrier)
  4761.   const tabCalendar = document.getElementById('tab-calendar');
  4762.   if (tabCalendar) {
  4763.     tabCalendar.addEventListener('shown.bs.tab', function() {
  4764.       lazyLoadCalendlyIfNeeded('#pane-calendar iframe');
  4765.     });
  4766.   }
  4768.   // Lazy load Calendly pour modale créer séjour (onglet demo partenaire)
  4769.   const tabPartenaireDemo = document.getElementById('tab-partenaire-demo');
  4770.   if (tabPartenaireDemo) {
  4771.     tabPartenaireDemo.addEventListener('shown.bs.tab', function() {
  4772.       lazyLoadCalendlyIfNeeded('#pane-partenaire-demo iframe');
  4773.     });
  4774.   }
  4776.   // Gestion des radios \"qui paie\" avec tracking
  4777.   document.querySelectorAll('input[name=\"payer\"]').forEach(radio => {
  4778.     radio.addEventListener('change', function() {
  4779.       trackEvent('toggle_payer', { who_pays: this.value });
  4780.     });
  4781.   });
  4783.   // Fonction générique de soumission de formulaire avec AJAX
  4784.   function setupFormSubmission(formId, onSuccess) {
  4785.     const form = document.getElementById(formId);
  4786.     if (!form) return;
  4788.     form.addEventListener('submit', function(e) {
  4789.       e.preventDefault();
  4791.       // Éviter les doubles soumissions
  4792.       if (isSubmittingCreate) {
  4793.         return;
  4794.       }
  4796.       // Valider le formulaire
  4797.       if (!form.checkValidity()) {
  4798.         form.classList.add('was-validated');
  4799.         
  4800.         // Afficher un message d'avertissement
  4801.         const warningAlert = document.createElement('div');
  4802.         warningAlert.className = 'alert alert-warning mt-3';
  4803.         warningAlert.innerHTML = `
  4804.           <div class=\"d-flex align-items-center\">
  4805.             <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  4806.             <div>
  4807.               <strong>Veuillez corriger les erreurs :</strong><br>
  4808.               Tous les champs marqués d'un astérisque (*) sont obligatoires.
  4809.             </div>
  4810.           </div>
  4811.         `;
  4812.         form.parentNode.insertBefore(warningAlert, form.nextSibling);
  4813.         setTimeout(() => warningAlert.remove(), 5000);
  4814.         return;
  4815.       }
  4817.       isSubmittingCreate = true;
  4819.       // Track event GA4
  4820.       trackEvent('form_submit', { form_id: formId });
  4822.       // Désactiver le bouton
  4823.       const btn = form.querySelector('button[type=\"submit\"]');
  4824.       btn.disabled = true;
  4825.       const originalText = btn.textContent;
  4826.       btn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Envoi en cours…';
  4828.       // Soumettre via fetch
  4829.       const formData = new FormData(form);
  4831.       fetch(form.action, {
  4832.         method: 'POST',
  4833.         body: formData,
  4834.         headers: {
  4835.           'X-Requested-With': 'XMLHttpRequest'
  4836.         }
  4837.       })
  4838.       .then(response => response.json())
  4839.       .then(data => {
  4840.         if (data.idSejour) {
  4841.           // Succès ! Le séjour a été créé
  4842.           
  4843.           // Track event GA4 de succès
  4844.           trackEvent('create_sejour_success', {
  4845.             role: currentRole,
  4846.             sejour_id: data.idSejour,
  4847.             code_sejour: data.codeSejour || 'N/A'
  4848.           });
  4850.           // Afficher le message de succès
  4851.           const successAlert = document.createElement('div');
  4852.           successAlert.className = 'alert alert-success mt-3';
  4853.           successAlert.innerHTML = `
  4854.             <div class=\"d-flex align-items-center\">
  4855.               <i class=\"bi bi-check-circle-fill me-2\"></i>
  4856.               <div>
  4857.                 <strong>✅ Séjour créé avec succès !</strong><br>
  4858.                 \${data.codeSejour ? 'Code séjour : <strong>' + data.codeSejour + '</strong><br>' : ''}
  4859.                 Vous allez être redirigé vers votre espace...
  4860.               </div>
  4861.             </div>
  4862.           `;
  4863.           form.parentNode.insertBefore(successAlert, form.nextSibling);
  4865.           // Reset le formulaire
  4866.           form.reset();
  4867.           form.classList.remove('was-validated');
  4869.           // Rediriger après 2 secondes vers l'espace accompagnateur
  4870.           setTimeout(() => {
  4871.        
  4872.           }, 2000);
  4874.           // Callback optionnel
  4875.           if (onSuccess) onSuccess(data);
  4877.         } else if (data.success === false) {
  4878.           // Erreur métier
  4879.           const errorAlert = document.createElement('div');
  4880.           errorAlert.className = 'alert alert-danger mt-3';
  4881.           errorAlert.innerHTML = `
  4882.             <div class=\"d-flex align-items-center\">
  4883.               <i class=\"bi bi-x-circle-fill me-2\"></i>
  4884.               <div>
  4885.                 <strong>Erreur :</strong><br>
  4886.                 \${data.message || 'Une erreur est survenue lors de la création du séjour.'}
  4887.               </div>
  4888.             </div>
  4889.           `;
  4890.           form.parentNode.insertBefore(errorAlert, form.nextSibling);
  4891.           setTimeout(() => errorAlert.remove(), 7000);
  4892.         } else {
  4893.           // Réponse inattendue
  4894.           console.warn('Réponse inattendue:', data);
  4895.           const warningAlert = document.createElement('div');
  4896.           warningAlert.className = 'alert alert-warning mt-3';
  4897.           warningAlert.innerHTML = `
  4898.             <div class=\"d-flex align-items-center\">
  4899.               <i class=\"bi bi-exclamation-triangle-fill me-2\"></i>
  4900.               <div>
  4901.                 <strong>Attention :</strong><br>
  4902.                 La création du séjour a peut-être réussi. Vérifiez votre espace.
  4903.               </div>
  4904.             </div>
  4905.           `;
  4906.           form.parentNode.insertBefore(warningAlert, form.nextSibling);
  4907.           setTimeout(() => {
  4908.             window.location.href = '/Accompagnateur/login';
  4909.           }, 3000);
  4910.         }
  4911.       })
  4912.       .catch(error => {
  4913.         console.error('Erreur:', error);
  4914.         const errorAlert = document.createElement('div');
  4915.         errorAlert.className = 'alert alert-danger mt-3';
  4916.         errorAlert.innerHTML = `
  4917.           <div class=\"d-flex align-items-center\">
  4918.             <i class=\"bi bi-x-circle-fill me-2\"></i>
  4919.             <div>
  4920.               <strong>Erreur technique :</strong><br>
  4921.               Une erreur réseau est survenue. Veuillez réessayer plus tard.
  4922.             </div>
  4923.           </div>
  4924.         `;
  4925.         form.parentNode.insertBefore(errorAlert, form.nextSibling);
  4926.         setTimeout(() => errorAlert.remove(), 7000);
  4927.       })
  4928.       .finally(() => {
  4929.         btn.disabled = false;
  4930.         btn.innerHTML = originalText;
  4931.         isSubmittingCreate = false;
  4932.       });
  4933.     });
  4934.   }
  4936.   // Setup tous les formulaires de la modale \"Créer mon séjour\"
  4937.   // formEcole supprimé car redirection directe vers /Accompagnateur/login
  4938.   setupFormSubmission('formPartenaire');
  4939.   setupFormSubmission('formAutre');
  4941.   // Délégation d'événements pour tous les CTA avec data-action
  4942.   document.addEventListener('click', function(e) {
  4943.     // Éviter les conflits avec la toolbar Symfony
  4944.     if (e.target.closest('.sf-toolbar') || e.target.closest('[id^=\"sf\"]')) {
  4945.       return;
  4946.     }
  4948.     const target = e.target.closest('[data-action]');
  4949.     if (!target) return;
  4951.     const action = target.dataset.action;
  4952.     const pack = target.dataset.pack || '';
  4954.     // Track event GA4
  4955.     trackEvent('cta_open_modal', { action: action, pack: pack });
  4957.     if (action === 'cta_create') {
  4958.       // Ouvrir la modale \"Créer mon séjour\"
  4959.       e.preventDefault();
  4960.       const modal = new bootstrap.Modal(createSejourModal);
  4961.       modal.show();
  4962.     } else if (action === 'cta_demo' || action === 'cta_expert') {
  4963.       // Ouvrir la modale demo/expert existante
  4964.       e.preventDefault();
  4965.       const demoModal = document.getElementById('demoModal');
  4966.       const modal = new bootstrap.Modal(demoModal);
  4967.       
  4968.       const isExpert = action === 'cta_expert';
  4969.       
  4970.       // Changer le titre
  4971.       document.getElementById('demoTitle').textContent = isExpert ? 'Parler à un expert' : 'Demander une démo guidée';
  4972.       
  4973.       // Pré-remplir les champs cachés
  4974.       document.getElementById('objet').value = isExpert ? 'expert' : 'demo';
  4975.       document.getElementById('topic').value = isExpert ? 'expert' : 'demo';
  4976.       document.getElementById('pack').value = pack;
  4977.       
  4978.       // Activer le bon onglet
  4979.       const tabCalendar = document.getElementById('tab-calendar');
  4980.       const tabCallback = document.getElementById('tab-callback');
  4981.       const paneCalendar = document.getElementById('pane-calendar');
  4982.       const paneCallback = document.getElementById('pane-callback');
  4983.       
  4984.       if (isExpert) {
  4985.         // Expert → Onglet \"Être rappelé\"
  4986.         tabCalendar.classList.remove('active');
  4987.         tabCallback.classList.add('active');
  4988.         paneCalendar.classList.remove('show', 'active');
  4989.         paneCallback.classList.add('show', 'active');
  4990.       } else {
  4991.         // Démo → Onglet \"Réserver un créneau\"
  4992.         tabCallback.classList.remove('active');
  4993.         tabCalendar.classList.add('active');
  4994.         paneCallback.classList.remove('show', 'active');
  4995.         paneCalendar.classList.add('show', 'active');
  4996.         
  4997.         // Lazy load Calendly
  4998.         lazyLoadCalendlyIfNeeded('#pane-calendar iframe');
  4999.       }
  5000.       
  5001.       modal.show();
  5002.     }
  5003.   });
  5005.   }); // Fin du DOMContentLoaded
  5006. </script>
  5007.     <!-- ======= Site Wrap =======-->
  5008.     <div class=\"site-wrap\">
  5009.       
  5010.       <!-- ======= Header =======-->
  5011.       <header class=\"fbs__net-navbar navbar navbar-expand-lg dark\" aria-label=\"freebootstrap.net navbar\">
  5012.         <div class=\"container d-flex align-items-center justify-content-between\">
  5013.           
  5014.           <!-- Start Logo-->
  5015.           <a class=\"navbar-brand w-auto\" href=\"#\">
  5016.             <img class=\"logo dark img-fluid\" src=\"{{ asset('Accueil/imagesAccueil/logoHeader.png') }}\" alt=\"5sur5séjour logo\" style=\"height: 65px;\">
  5017.           </a>
  5018.           <!-- End Logo-->
  5019.           
  5020.           <!-- Start offcanvas-->
  5021.           <div class=\"offcanvas offcanvas-start w-75\" id=\"fbs__net-navbars\" tabindex=\"-1\" aria-labelledby=\"fbs__net-navbarsLabel\">
  5022.             
  5023.             <div class=\"offcanvas-header\">
  5024.               <div class=\"offcanvas-header-logo\">
  5025.                 <a class=\"logo-link\" id=\"fbs__net-navbarsLabel\" href=\"#\">
  5026.                   <img class=\"logo light img-fluid\" src=\"{{ asset('Accueil/imagesAccueil/logoHeader.png') }}\" alt=\"5sur5séjour logo\" style=\"height: 60px;\">
  5027.                 </a>
  5028.               </div>
  5029.               <button class=\"btn-close btn-close-black\" type=\"button\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
  5030.             </div>
  5031.             
  5032.             <div class=\"offcanvas-body align-items-lg-center\">
  5033.               
  5034.               <ul class=\"navbar-nav nav me-auto ps-lg-5 mb-2 mb-lg-0\">
  5035.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#about\">A propos</a></li>
  5036.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#how-it-works\">Comment ça marche</a></li>
  5037.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#pricing\">Nos offres</a></li>
  5038.                 <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"#contact\">Contact</a></li>
  5039.                 <li class=\"nav-item dropdown\">
  5040.                   <a class=\"nav-link dropdown-toggle\" href=\"#\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">Nos produits <i class=\"bi bi-chevron-down\"></i></a>
  5041.                   <ul class=\"dropdown-menu\">
  5042.                     <li class=\"nav-item\"><a class=\"nav-link\" href=\"{{ path('pack_annuel_partenaires') }}\">Pack Annuel Partenaires</a></li>
  5043.                     <li><hr class=\"dropdown-divider\"></li>
  5044.                                                 {% for produit in produit %}
  5045.                                                     {% if produit.labeleType!=\"Connexion\" %}
  5048.                                        <li class=\"nav-item\"><a class=\"nav-link scroll-link\" href=\"{{path('album',{'id':produit.labeleType})}}\"> {{produit.labeleType}}</a></li>
  5051.                                                     {% endif %}
  5052.                                                 {% endfor %}
  5053.                    
  5054.                   </ul>
  5055.                 </li>
  5056.               </ul>
  5057.               
  5058.             </div>
  5059.           </div>
  5060.           <!-- End offcanvas-->
  5061.           
  5062.           <div class=\"ms-auto w-auto\">
  5063.             
  5064.             <div class=\"header-social d-flex align-items-center gap-1\">
  5065.               <a class=\"btn btn-primary py-2\" href=\"#jemeconnecte\">Je me connecte</a>
  5066.               
  5067.               <button class=\"fbs__net-navbar-toggler justify-content-center align-items-center ms-auto\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#fbs__net-navbars\" aria-controls=\"fbs__net-navbars\" aria-label=\"Toggle navigation\" aria-expanded=\"false\">
  5068.                 <svg class=\"fbs__net-icon-menu\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5069.                   <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"></line>
  5070.                   <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"></line>
  5071.                   <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"></line>
  5072.                 </svg>
  5073.                 <svg class=\"fbs__net-icon-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5074.                   <path d=\"M18 6 6 18\"></path>
  5075.                   <path d=\"m6 6 12 12\"></path>
  5076.                 </svg>
  5077.               </button>
  5078.               
  5079.             </div>
  5080.             
  5081.           </div>
  5082.         </div>
  5083.       </header>
  5084.       <!-- End Header-->
  5085.       
  5086.       <!-- ======= Main =======-->
  5087.       <main>
  5088.        
  5089.            <!-- ======= Hero =======-->
  5090.         <section class=\"hero__v6 section\" id=\"home\">
  5091.           <div class=\"container\">
  5092.             <div class=\"row\">
  5093.               <div class=\"col-lg-6 mb-4 mb-lg-0\">
  5094.                 <div class=\"row\">
  5095.                   <div class=\"col-lg-11\">
  5096.                     <span class=\"hero-subtitle text-uppercase\" data-aos=\"fade-up\" data-aos-delay=\"0\">La solution sécurisée qui rassure les familles et libère vos équipes</span>
  5097.                     <h1 class=\"hero-title mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\"> Avec 5sur5Séjour, transformez chaque séjour en une expérience sereine et valorisante.</h1>
  5098.                     <p class=\"hero-description mb-4 mb-lg-5\" data-aos=\"fade-up\" data-aos-delay=\"200\">🤝 Un accompagnement humain dédié| 📞 Des appels vocaux automatiques aux familles | 🔒 100% conforme RGPD & hébergé en France</p>
  5099.                     <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  5100.               href=\"{{ path('pack_annuel_partenaires') }}\">
  5101.            Devenir partenaire
  5102.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  5103.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  5104.             </svg>
  5105.           </a>
  5106.                   </div>
  5107.                 </div>
  5108.               </div>
  5109.               <div class=\"col-lg-6\">
  5110.                 <div class=\"hero-img\">
  5111.                   <img class=\"img-card img-fluid\" style=\"background: radial-gradient(gray, transparent);border-radius: 30px;\" src=\"{{ asset('Accueil/imagesAccueil/demo3.png') }}\" alt=\"Image card\" data-aos=\"fade-down\" data-aos-delay=\"600\">
  5112.                   <img class=\"img-main img-fluid rounded-4\" src=\"{{ asset('images/smiling_5sur5.svg') }}\" alt=\"Hero Image\" data-aos=\"fade-in\" data-aos-delay=\"500\">
  5113.                 </div>
  5114.                   <!-- Bouton CTA -->
  5115.                     <!-- CTAs -->
  5116.         <div class=\"d-flex flex-wrap gap-3 align-items-center mb-2\" data-aos=\"fade-up\" data-aos-delay=\"250\"  style=\"margin-top:15%\">
  5117.           <a class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" href=\"#\" data-action=\"cta_create\" data-pack=\"creation\">
  5118.             Créer mon espace séjour 
  5119.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  5120.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  5121.             </svg>
  5122.           </a>
  5124.         
  5125.         </div>
  5127.     
  5129.         <!-- Preuve sociale courte -->
  5130.         <div class=\"logos mt-4\" data-aos=\"fade-up\" data-aos-delay=\"350\">
  5131.         <p class=\"text-primary-emphasis text-uppercase small mt-4 mb-0\">
  5132.   Déjà adopté par <strong>1 500+</strong> écoles, centres de loisirs et associations en France
  5133. </p>
  5134.         </div>
  5135.               </div>
  5136.     
  5137.             </div>
  5138.           </div>
  5139.           <!-- End Hero-->
  5140.         </section>
  5141.         <!-- End Hero-->
  5142.         
  5143.         <!-- ======= Vignettes Section =======-->
  5144.         <section class=\"about_wrap_area aboutWrapper mb-5\">
  5145.           <div class=\"container\" id=\"jemeconnecte\">
  5146.             <div class=\"row\">
  5147.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  5148.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5149.                   <img class=\"imageParent\" src=\"{{ asset('Accueil/imagesAccueil/son_sejour.svg') }}\" alt=\"Parent\">
  5150.                   <h3 class=\"titreVignette\">Vous êtes parent</h3>
  5151.                   <p class=\"txtVignette\">Consultez les photos et vidéos à tout moment, <b>et soyez appelé dès qu'un nouveau message vocal est déposé — restez connectés au séjour, où que vous soyez.</b> </p>
  5152.                   <a href=\"{{ path('app_back_Parent') }}\" class=\"btn btn-primary py-2\">Je me connecte</a>
  5153.                 </div>
  5154.               </div>
  5155.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  5156.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  5157.                   <img class=\"imageAcc\" src=\"{{ asset('Accueil/imagesAccueil/espceAcc.svg') }}\" alt=\"Accompagnateur\">
  5158.                   <h3 class=\"titreVignette titreAcc\">Vous êtes accompagnateur</h3>
  5159.                   <p class=\"txtVignette txtAcc\">Partagez facilement photos et messages pour rassurer les familles — créez et gérez vos séjours en toute simplicité. </p>
  5160.                   <a  data-bs-toggle=\"modal\" data-bs-target=\"#loginModal\"  class=\"btn btn-primary py-2\">Je me connecte</a>
  5161.                 </div>
  5162.               </div>
  5163.               <div class=\"col-xl-4 col-md-4 col-lg-4\">
  5164.                 <div class=\"single_service_wrap text-center vignetteContent\" data-aos=\"fade-up\" data-aos-delay=\"400\">
  5165.                   <img class=\"imagePartenaire\" src=\"{{ asset('Accueil/imagesAccueil/espcPart.svg') }}\" alt=\"Partenaire\">
  5166.                   <h3 class=\"titreVignette titrePartenaire\">Vous êtes partenaire</br></h3>
  5167.                   <p class=\"txtVignette txtPartenaire\">
  5168.                     <br/>Créez et gérez tous vos séjours depuis un espace dédié, avec un service client sur mesure et des outils pensés pour vous.</p>
  5169.                   <a data-bs-toggle=\"modal\" data-bs-target=\"#partnerLoginModal\" class=\"btn btn-primary py-2\">Je me connecte</a>
  5170.                 </div>
  5171.               </div>
  5172.             </div>
  5173.           </div>
  5174.         </section>
  5175.         <!-- End Vignettes -->
  5176.         
  5177.     
  5178.         <!-- ======= Pourquoi nous choisir =======-->
  5179.         <section class=\"section features__v2\" id=\"about\">
  5180.           <div class=\"container\">
  5181.             <div class=\"row\">
  5182.               <div class=\"col-12\">
  5183.                 <div class=\"d-lg-flex p-5 rounded-4 content\" data-aos=\"fade-in\" data-aos-delay=\"0\">
  5184.                   <div class=\"row\">
  5185.                     <div class=\"col-lg-5 mb-5 mb-lg-0\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5186.                       <div class=\"row\"> 
  5187.                         <div class=\"col-lg-11\">
  5188.                           <div class=\"h-100 flex-column justify-content-between d-flex\">
  5189.                             <div>
  5190.                               <h2 class=\"mb-4\">Pourquoi nous choisir pour vos séjours</h2>
  5191.                               <p class=\"mb-5\">5sur5séjour n'est pas qu'un outil pour les animateurs.
  5192. C'est une solution complète pour les professionnels qui veulent gagner du temps, rassurer les familles, et moderniser leur image.</p>
  5193.                             </div>
  5194.                             <div class=\"align-self-start\">
  5195.                                  <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  5196.               href=\"{{ path('pack_annuel_partenaires') }}\">
  5197.             Devenir partenaire
  5198.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  5199.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  5200.             </svg>
  5201.           </a>
  5202.                             </div>
  5203.                           </div>
  5204.                         </div>
  5205.                       </div>
  5206.                     </div>
  5207.                     <div class=\"col-lg-7\">
  5208.                       <div class=\"row justify-content-end\">
  5209.                         <div class=\"col-lg-11\">
  5210.                           <div class=\"row\">
  5211.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5212.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-shield-lock fs-4\"></i></div>
  5213.                               <h3 class=\"fs-6 fw-bold mb-3\">Partage sécurisé</h3>
  5214.                               <p>Galerie privée photos/vidéos, droits par groupes/classes, consentements intégrés.</p>
  5215.                             </div>
  5216.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5217.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-telephone-outbound fs-4\"></i></div>
  5218.                               <h3 class=\"fs-6 fw-bold mb-3\">Boîte vocale 5sur5   </h3>
  5219.                               <p>Un service historique, revient modernisé pour renforcer encore votre lien avec les familles.</p>
  5220.                             </div>
  5221.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  5222.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-clock fs-4\"></i></div>
  5223.                               <h3 class=\"fs-6 fw-bold mb-3\">Temps gagné</h3>
  5224.                               <p>Publication partagées automatiquement en 2 clics. Aucune intervention de votre part : votre équipe reste tranquille.</p>
  5225.                             </div>
  5226.                             <div class=\"col-sm-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  5227.                               <div class=\"icon text-center mb-4\"><i class=\"bi bi-headset fs-4\"></i></div>
  5228.                               <h3 class=\"fs-6 fw-bold mb-3\">Support humain</h3>
  5229.                               <p>Accompagnement à la mise en place et support dédié pendant vos séjours.</p>
  5230.                             </div>
  5231.                           </div>
  5232.                         </div>
  5233.                       </div>
  5234.                     </div>
  5235.                   </div>
  5236.                 </div>
  5237.               </div>
  5238.             </div>
  5239.           </div>
  5240.         </section>
  5241.         <!-- End Features-->
  5242.         <section class=\"section py-6 pro-offers\" id=\"pricing\">
  5243.           <div class=\"container position-relative\">
  5244.             <div class=\"text-center mb-5\">
  5245.               <span class=\"subtitle text-uppercase mb-2 tagSection d-inline-flex align-items-center gap-2\" data-aos=\"fade-up\">
  5246.                 <i class=\"bi bi-stars text-warning\"></i> Offres PRO 5sur5
  5247.               </span>
  5248.               <h2 class=\"mb-3\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  5249.                 Une tarification claire pour chaque structure
  5250.               </h2>
  5251.               <p class=\"text-muted mb-0\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5252.                 Plateforme photo & audio sécurisée, boîte vocale web intégrée, support humain basé en France.
  5253.               </p>
  5254.             </div>
  5256.             <div class=\"row g-4 align-items-stretch\">
  5257.               <!-- Séjour unique -->
  5258.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5259.                 <div class=\"pro-card h-100\">
  5260.                   <div class=\"pro-card__badge text-secondary\"><i class=\"bi bi-calendar4-week me-2\"></i>Séjour ponctuel</div>
  5261.                   <h3>Séjour Unique</h3>
  5262.                   <p class=\"pro-card__subtitle\">Idéal pour tester la plateforme</p>
  5263.                   <div class=\"pro-card__price\">
  5264.                     <span>39€</span>
  5265.                     <small>/ séjour</small>
  5266.                   </div>
  5267.                   <ul>
  5268.                     <li><i class=\"bi bi-check-circle-fill\"></i>Galerie photo + messages vocaux</li>
  5269.                     <li><i class=\"bi bi-check-circle-fill\"></i>Espace sécurisé pendant 60 jours</li>
  5270.                     <li><i class=\"bi bi-check-circle-fill\"></i>Aucun engagement, aucune surprise</li>
  5271.                     <li><i class=\"bi bi-check-circle-fill\"></i>Support pour l'accompagnateur</li>
  5272.                   </ul>
  5273.                   <a href=\"{{ path('app_creation_simple_creer') }}\" class=\"btn btn-outline-primary w-100\">
  5274.                     <i class=\"bi bi-plus-circle me-2\"></i>Créer mon séjour
  5275.                   </a>
  5276.                 </div>
  5277.               </div>
  5279.               <!-- Pack annuel -->
  5280.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">
  5281.                 <div class=\"pro-card pro-card--featured h-100 position-relative overflow-hidden\">
  5282.                   <span class=\"pro-card__badge pro-card__badge--featured\"><i class=\"bi bi-fire me-2\"></i>Le plus choisi</span>
  5283.                   <h3>Pack Annuel – 25 séjours</h3>
  5284.                   <p class=\"pro-card__subtitle\">Pour les structures qui partent toute l’année</p>
  5285.                   <div class=\"pro-card__price\">
  5286.                     <span>490€</span>
  5287.                     <small>/ an</small>
  5288.                   </div>
  5289.                   <ul>
  5290.                     <li><i class=\"bi bi-check-circle-fill\"></i>Jusqu’à 25 séjours inclus</li>
  5291.                     <li><i class=\"bi bi-check-circle-fill\"></i>Accompagnateurs & parents illimités</li>
  5292.                     <li><i class=\"bi bi-check-circle-fill\"></i>Mise en place en 24h + onboarding</li>
  5293.                     <li><i class=\"bi bi-check-circle-fill\"></i>Boîte vocale web intégrée</li>
  5294.                   </ul>
  5295.                   <a href=\"{{ path('pack_annuel_partenaires') }}\" class=\"btn btn-primary w-100\">
  5296.                     <i class=\"bi bi-rocket-takeoff me-2\"></i>Prendre le pack annuel
  5297.                   </a>
  5298.                 </div>
  5299.               </div>
  5301.               <!-- Offres sur mesure -->
  5302.               <div class=\"col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  5303.                 <div class=\"pro-card h-100\">
  5304.                   <div class=\"pro-card__badge text-secondary\"><i class=\"bi bi-building-up me-2\"></i>Grandes structures</div>
  5305.                   <h3>+25 séjours / an</h3>
  5306.                   <p class=\"pro-card__subtitle\">Partenariat sur mesure & tarifs dégressifs</p>
  5307.                   <div class=\"pro-card__price pro-card__price--quote\">
  5308.                     <span>Sur devis</span>
  5309.                  
  5310.                   </div>
  5311.                   <ul>
  5312.                     <li><i class=\"bi bi-check-circle-fill\"></i>Déploiement multi-sites & multi-équipes</li>
  5313.                     <li><i class=\"bi bi-check-circle-fill\"></i>Tableau de bord groupe</li>
  5314.                     <li><i class=\"bi bi-check-circle-fill\"></i>Contrat cadre + facturation centralisée</li>
  5315.                     <li><i class=\"bi bi-check-circle-fill\"></i>Support prioritaire 7j/7</li>
  5316.                   </ul>
  5317.                   <button type=\"button\" class=\"btn btn-outline-primary w-100\" data-bs-toggle=\"modal\" data-bs-target=\"#grandVolumeModal\">
  5318.                     <i class=\"bi bi-envelope-open me-2\"></i>Parler à un expert
  5319.                   </button>
  5320.                 </div>
  5321.               </div>
  5322.             </div>
  5324.             <div class=\"pro-offers__foot text-center mt-5\" data-aos=\"fade-up\">
  5325.               🎓 <strong>Écoles publiques :</strong> accès à la plateforme sans abonnement &nbsp;•&nbsp; Données hébergées en France &nbsp;•&nbsp; Activation en 24h
  5326.             </div>
  5327.           </div>
  5328.         </section>
  5330.         <style>
  5331.           .pro-offers {
  5332.             background: linear-gradient(135deg, #f5fbff 0%, #f0f5ff 100%);
  5333.             border-top: 1px solid rgba(65,162,170,0.1);
  5334.             border-bottom: 1px solid rgba(65,162,170,0.1);
  5335.           }
  5336.           .pro-card {
  5337.             background: #fff;
  5338.             border-radius: 24px;
  5339.             padding: 32px;
  5340.             box-shadow: 0 25px 60px rgba(15, 40, 77, 0.08);
  5341.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  5342.             height: 100%;
  5343.           }
  5344.           .pro-card:hover {
  5345.             transform: translateY(-6px);
  5346.             box-shadow: 0 30px 70px rgba(15, 40, 77, 0.16);
  5347.           }
  5348.           .pro-card h3 {
  5349.             font-weight: 700;
  5350.             color: #1f2b3a;
  5351.           }
  5352.           .pro-card__subtitle {
  5353.             color: #6b7b8d;
  5354.             margin-bottom: 1rem;
  5355.           }
  5356.           .pro-card__price {
  5357.             display: flex;
  5358.             align-items: baseline;
  5359.             gap: 8px;
  5360.             font-weight: 700;
  5361.             color: #1f2b3a;
  5362.             margin-bottom: 1.25rem;
  5363.           }
  5364.           .pro-card__price span {
  5365.             font-size: 2.4rem;
  5366.             color: #41a2aa;
  5367.           }
  5368.           .pro-card__price--quote span {
  5369.             font-size: 1.8rem;
  5370.           }
  5371.           .pro-card ul {
  5372.             list-style: none;
  5373.             padding: 0;
  5374.             margin: 0 0 1.5rem 0;
  5375.             color: #4b596b;
  5376.             font-size: 0.95rem;
  5377.           }
  5378.           .pro-card ul li {
  5379.             display: flex;
  5380.             gap: 10px;
  5381.             align-items: center;
  5382.             margin-bottom: 0.6rem;
  5383.           }
  5384.           .pro-card ul li i {
  5385.             color: #41a2aa;
  5386.           }
  5387.           .pro-card__badge {
  5388.             font-size: 0.75rem;
  5389.             text-transform: uppercase;
  5390.             letter-spacing: 0.08em;
  5391.             font-weight: 700;
  5392.             margin-bottom: 1rem;
  5393.             display: inline-flex;
  5394.             align-items: center;
  5395.             gap: 4px;
  5396.           }
  5397.           .pro-card--featured {
  5398.             border: 2px solid rgba(65,162,170,0.2);
  5399.             background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  5400.           }
  5401.           .pro-card__badge--featured {
  5402.             background: #fde2d6;
  5403.             color: #c15f29;
  5404.             padding: 0.35rem 0.9rem;
  5405.             border-radius: 999px;
  5406.           }
  5407.           .pro-offers__foot {
  5408.             font-size: 0.95rem;
  5409.             color: #4b596b;
  5410.             font-weight: 500;
  5411.           }
  5412.         </style>
  5413.           <!-- ======= About =======-->
  5414.         <section class=\"about__v4 section\" id=\"about\" style=\"padding: 100px 0;
  5415.     scroll-margin-top: 100px;\">
  5416.         <div class=\"container\">
  5417.     <div class=\"text-center mb-4\">
  5418.       <span class=\"subtitle text-uppercase mb-3 text-center tagSection\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5419. Et si vous retrouviez l’un des services historiques de 5sur5, repensé pour 2025 ?    </span>
  5421.       <h2 class=\"mb-2\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  5422.  La Boîte Vocale revient, plus simple, plus puissante, et entièrement intégrée à vos séjours    </h2>
  5424.       <p class=\"text-muted mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5425. Permettez aux familles de rester connectées au quotidien, grâce à une boîte vocale pensée pour rassurer sans solliciter. Simple, rapide et fluide.
  5426.    <br>  </p>
  5428.       
  5429.           <div class=\"container my-5\">
  5430.             <div class=\"row\">
  5431.             
  5432.               <div class=\"col-md-6 order-md-2\">
  5433.                   <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Service unique en France</span>
  5434.                     <h2 class=\"mb-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">La boîte vocale 5sur5 : vos messages, écoutés tout de suite</h2>
  5435.        
  5436.                 <div class=\"row justify-content-end\">
  5437.                   <div class=\"col-md-11 mb-4 mb-md-0\">
  5438.                              <div data-aos=\"fade-up\" data-aos-delay=\"200\">
  5439.                       <p>
  5440.                       
  5441.                      La Boîte Vocale 5sur5 fonctionne immédiatement : nous prenons en charge toute l’installation, la configuration et le support. 
  5442. Chaque message vocal déclenche automatiquement un appel aux parents créant un lien direct  sans perturbation .
  5443.  Aucune action ni intervention n’est requise de votre part.  </p>
  5444.                     </div>
  5445.                     <h4 class=\"small fw-bold mt-4 mb-3\" data-aos=\"fade-up\" data-aos-delay=\"300\">La voix est bien plus consultée qu'un SMS/mail.</h4>
  5446.                     <ul class=\"d-flex flex-row flex-wrap list-unstyled gap-3 features\" data-aos=\"fade-up\" data-aos-delay=\"400\">
  5447.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">–70% d’appels entrants</span></li>
  5448.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">moins de charges pour les animateurs</span></li>
  5449.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">parents rassurés sans effort</span></li>
  5450.                       <li class=\"d-flex align-items-center gap-2\"><span class=\"icon rounded-circle text-center\"><i class=\"bi bi-check\"></i></span><span class=\"text\">illimitée</span></li>
  5451.                     </ul>
  5452.                         <a  class=\"btn btn-lg btn-primary px-4 w-100 w-sm-auto\" style=\"background:color-mix(in srgb, var(--bs-secondary), transparent 70%);color:#41a2aa\"
  5453.                href=\"{{ path('boite_vocale') }}\">
  5454.             Commander une boite vocale
  5455.             <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
  5456.               <path d=\"M7 7h10v10\"></path><path d=\"M7 17 17 7\"></path>
  5457.             </svg>
  5458.           </a>
  5459.                   </div>
  5460.                 </div>
  5461.               </div>
  5462.               <div class=\"col-md-6\"> 
  5463.                 <div class=\"img-wrap position-relative\">
  5464.                   <img class=\"img-fluid rounded-4\" src=\"{{ asset('Accueil/imagesAccueil/feature.png') }}\" alt=\"Sécurité 5sur5séjour\" data-aos=\"fade-up\" data-aos-delay=\"0\" style=\"width: 100%; height: 300px; object-fit: cover;\">
  5465.                   <div class=\"mission-statement p-4 rounded-4 d-flex gap-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5466.                     <div class=\"mission-icon text-center rounded-circle\"><i class=\"bi bi-lightbulb fs-4\"></i></div>
  5467.                     <div>
  5468.                       <h3 class=\"text-uppercase fw-bold\">Notre mission</h3>
  5469.                       <p class=\"fs-5 mb-0\">Notre mission est de fournir aux structures une communication simple, fiable et professionnelle pour rassurer toutes les familles..</p>
  5470.                     </div>
  5471.                   </div>
  5472.                 </div>
  5473.               </div>
  5474.             </div>
  5475.           </div>
  5476.         </section>
  5478.         <!-- End About-->
  5479.         <!-- ======= How it works =======-->
  5480.         <section class=\"section howitworks__v1\" id=\"how-it-works\">
  5481.           <div class=\"container\">
  5482.             <div class=\"row mb-5\">
  5483.               <div class=\"col-md-6 text-center mx-auto\">
  5484.                 <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Comment ça marche</span>
  5485.                 <h2 data-aos=\"fade-up\" data-aos-delay=\"100\">Simple pour vous, magique pour les familles</h2>
  5486.                 <p data-aos=\"fade-up\" data-aos-delay=\"200\">Une plateforme complète qui centralise contenus et communications, pour partager le séjour avec les familles en toute simplicité, sans surcharge pour les équipes.</p>
  5487.               </div>
  5488.             </div>
  5489.             <div class=\"row g-md-5\">
  5490.               <div class=\"col-md-6 col-lg-3\">
  5491.                 <div class=\"step-card text-center h-100 d-flex flex-column justify-content-start position-relative\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5492.                   <div data-aos=\"fade-right\" data-aos-delay=\"500\">
  5493.                     <img class=\"arch-line\" src=\"{{ asset('Accueil/imagesAccueil/arch-line.png') }}\" alt=\"Flèche animation\">
  5494.                   </div>
  5495.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">1</span>
  5496.                   <div>
  5497.                     <h3 class=\"fs-5 mb-4\">Créez l'espace séjour</h3>
  5498.                     <p>Créez votre séjour en quelques clics… ou confiez-nous l'import de plusieurs séjours,<strong> on s'occupe de tout.</strong></p>
  5499.                   </div>
  5500.                 </div>
  5501.               </div>
  5502.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"600\">
  5503.                 <div class=\"step-card reverse text-center h-100 d-flex flex-column justify-content-start position-relative\">
  5504.                   <div data-aos=\"fade-right\" data-aos-delay=\"1100\">
  5505.                     <img class=\"arch-line reverse\" src=\"{{ asset('Accueil/imagesAccueil/arch-line-reverse.png') }}\" alt=\"Flèche animation\">
  5506.                   </div>
  5507.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">2</span>
  5508.                   <h3 class=\"fs-5 mb-4\">Invitez les familles</h3>
  5509.                   <p>Envoyez le code de séjour aux familles pour qu'ils rejoignent l'espace séjour. </p>
  5510.                 </div>
  5511.               </div>
  5512.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"1200\">
  5513.                 <div class=\"step-card text-center h-100 d-flex flex-column justify-content-start position-relative\">
  5514.                   <div data-aos=\"fade-right\" data-aos-delay=\"1700\">
  5515.                     <img class=\"arch-line\" src=\"{{ asset('Accueil/imagesAccueil/arch-line.png') }}\" alt=\"Flèche animation\">
  5516.                   </div>
  5517.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">3</span>
  5518.                   <h3 class=\"fs-5 mb-4\">Publiez en 2 clics</h3>
  5519.                   <p>Diffusez vos photos, vidéos et messages vocaux <strong>en toute simplicité.</strong></p>
  5520.                 </div>
  5521.               </div>
  5522.               <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"1800\">
  5523.                 <div class=\"step-card last text-center h-100 d-flex flex-column justify-content-start position-relative\">
  5524.                   <span class=\"step-number rounded-circle text-center fw-bold mb-5 mx-auto\">4</span>
  5525.                   <div>
  5526.                     <h3 class=\"fs-5 mb-4\">Bilan & archive</h3>
  5527.                     <p>À la fin du séjour, accédez à un bilan complet avec statistiques, et proposez aux familles des produits souvenir personnalisés.</p>
  5528.                   </div>
  5529.                 </div>
  5530.               </div>
  5531.             </div>
  5532.           </div>
  5533.         </section>
  5534.         <!-- End How it works-->
  5535.         
  5536.         <!-- ======= Pricing =======-->
  5537.      
  5538. <section class=\"py-5 bg-light d-none\" data-aos=\"fade-up\" data-aos-delay=\"50\">
  5539.   <div class=\"container text-center\" style=\"display:none\">
  5540.     <span class=\"subtitle text-uppercase mb-2 text-center tagSection\">Séjour ponctuel</span>
  5541.     <h2 class=\"mb-3\">Un séjour simple, tout compris</h2>
  5542.     <p class=\"text-muted mb-4 mx-auto\" style=\"max-width: 700px;\">
  5543.       Vous organisez un seul séjour dans l’année ?  
  5544.       5sur5Séjour vous permet de partager photos, vidéos et messages vocaux avec les familles  
  5545.       sans abonnement ni engagement.
  5546.     </p>
  5548.     <div class=\"p-5 bg-white shadow-sm rounded-4 mx-auto\" style=\"max-width: 600px;\">
  5549.       <div class=\"display-6 fw-semibold mb-1\" style=\"color: #41a2aa;\">
  5550.         <i class=\"bi bi-building-check\"></i> Prise en charge par la structure
  5551.       </div>
  5552.       <div class=\"text-muted mb-3 small\">
  5553.         Boîte vocale incluse · Tarif préférentiel partenaire
  5554.       </div>
  5555.       <ul class=\"list-unstyled text-start d-inline-block mb-4\">
  5556.         <li>✅ Accès complet à la plateforme pendant 60 jours</li>
  5557.         <li>✅ Galerie <strong>photos & vidéos</strong> sécurisée</li>
  5558.        
  5559.         <li>✅ Consentements <strong>RGPD</strong> hébergés en France</li>
  5560.         <li>➡️ Ajouter la Boîte Vocale pour appeler automatiquement les parents après chaque message <li>
  5561.       </ul>
  5562.       <a href=\"{{ path('app_creation_simple_creer') }}\" class=\"btn btn-primary px-4 py-2\">
  5563.         <i class=\"bi bi-calculator\"></i> Obtenir un devis
  5564.       </a>
  5565.       <p class=\"text-muted small mt-3\">Idéal pour un premier usage ou un séjour unique.</p>
  5566.     </div>
  5567.   </div>
  5568. </section>
  5572.   
  5573. <!-- BANDEAU CTA FINAL -->
  5574. <section class=\"py-5\">
  5575.   <div class=\"container\">
  5576.     <div class=\"cta-section p-4 p-md-5 text-center\" data-aos=\"fade-up\">
  5577.       <h3 class=\"fw-bold mb-2\">Prêt à gagner du temps et rassurer 100&nbsp;% des familles&nbsp;?</h3>
  5578.       <p class=\"text-muted mb-4\">Choisissez votre pack — on vous met en place en 24&nbsp;h, et on vous accompagne pas à pas.</p>
  5580.       <div class=\"d-flex flex-wrap justify-content-center gap-3\">
  5581.         <a href=\"{{ path('app_creation_simple_creer') }}\"
  5582.            class=\"btn btn-outline-primary btn-lg px-4\">
  5583.           <i class=\"bi bi-plus-circle me-2\"></i>Créer un séjour simple
  5584.         </a>
  5586.         <a href=\"{{ path('boite_vocale') }}\"
  5587.            class=\"btn btn-secondary btn-lg px-4\" >
  5588.           <i class=\"bi bi-telephone me-2\"></i>Commander boîte vocale
  5589.         </a>
  5591.         <a href=\"{{ path('pack_annuel_partenaires') }}\" style=\"background-color: #F09E7A; border-color: #F09E7A; color: #fff;\"
  5592.            class=\"btn btn-primary btn-lg px-4\">
  5593.           <i class=\"bi bi-rocket-takeoff me-2\"></i>Prendre le pack annuel
  5594.         </a>
  5595.       </div>
  5597.       <div class=\"mt-3 small \">
  5598.         <i class=\"bi bi-shield-lock me-1\"></i>Paiement sécurisé • <i class=\"bi bi-check2-circle ms-1 me-1\"></i>Mise en place totale par l'équipe 5sur5
  5599.       </div>
  5600.     </div>
  5601.   </div>
  5602. </section>
  5603.     
  5604.         <!-- ======= Stats =======-->
  5605.         <section class=\"stats__v3 section\">
  5606.           <div class=\"container\">
  5607.             <div class=\"row\">
  5608.               <div class=\"col-12\">
  5609.                 <div class=\"d-flex flex-wrap content rounded-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5610.                   <div class=\"rounded-borders\">
  5611.                     <div class=\"rounded-border-1\"></div>
  5612.                     <div class=\"rounded-border-2\"></div>
  5613.                     <div class=\"rounded-border-3\"></div>
  5614.                   </div>
  5615.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"80\">
  5616.                     <div class=\"stat-item\">
  5617.                       <h3 class=\"fs-1 fw-bold\">+<span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"90\" data-purecounter-duration=\"2\">0</span><span>%</span></h3>
  5618.                       <p class=\"mb-0\">des familles connectées dès J1
  5619. Invitation simple, lien sécurisé</p>
  5620.                     </div>
  5621.                   </div>
  5622.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  5623.                     <div class=\"stat-item\">
  5624.                       <h3 class=\"fs-1 fw-bold\"> > <span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"370\" data-purecounter-duration=\"2\">0</span><span>k+</span></h3>
  5625.                       <p class=\"mb-0\">enfants suivis
  5626. Confiance des établissements & associations</p>
  5627.                     </div>
  5628.                   </div>
  5629.                   <div class=\"col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  5630.                     <div class=\"stat-item\">
  5631.                       <h3 class=\"fs-1 fw-bold\"><span class=\"purecounter\" data-purecounter-start=\"0\" data-purecounter-end=\"20\" data-purecounter-duration=\"2\">0</span><span>K+</span></h3>
  5632.                       <p class=\"mb-0\">séjours accompagnés
  5633. Partout en France et à l'étranger</p>
  5634.                     </div>
  5635.                   </div>
  5636.                 </div>
  5637.               </div>
  5638.             </div>
  5639.           </div>
  5640.         </section>
  5641.         <!-- End Stats-->
  5642.         
  5643.         <!-- ======= Services =======-->
  5644.        <section class=\"section services__v3\" id=\"souvenirs\">
  5645.           <div class=\"container\">
  5646.             <div class=\"row mb-5\">
  5647.               <div class=\"col-md-8 mx-auto text-center\">
  5648.         <span class=\"subtitle text-uppercase mb-2\" data-aos=\"fade-up\" data-aos-delay=\"0\">Produits 5sur5</span>
  5649.         <h2 class=\"mb-2\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5650.           Souvenirs premium, <span class=\"whitespace-nowrap\">fabriqués en France</span> 
  5651.         </h2>
  5652.         <p class=\"text-muted\" data-aos=\"fade-up\" data-aos-delay=\"150\">
  5653.           Offrez aux familles un souvenir durable du séjour. Qualité premium, expédition rapide, et
  5654.           possibilité d'<strong>achat groupé –20%</strong> pour les établissements.
  5655.         </p>
  5656.               </div>
  5657.             </div>
  5659.             <div class=\"row g-4\">
  5660.       <!-- Carte 1 : Albums -->
  5661.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5662.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  5663.                   <div>
  5664.             <figure class=\"product-visual\" style=\"\"  width: 100%;
  5665.   height: 200px;                /* hauteur demandée */
  5666.   display: flex;
  5667.   align-items: center;
  5668.   justify-content: center;      /* image centrée */
  5669.   background: rgba(47,167,163,.06);
  5670.   border-radius: 16px;
  5671.   overflow: hidden;
  5672.   margin-bottom: 16px;>
  5673.         <img style=\" max-width: 100%;
  5674.   max-height: 100%;
  5675.   object-fit: contain;          /* garde le ratio, pas de crop */
  5676.   display: block;\"
  5677.           src=\"https://5sur5sejour.com/images/produit/LivreSouvenir5sur5-1.jpg\"
  5678.           alt=\"Album photo premium 5sur5\"
  5679.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  5680.           sizes=\"(min-width:992px) 330px, 90vw\">
  5681.       </figure>
  5682.             
  5683.             <h3 class=\"fs-5 mb-3\">Album photo premium</h3>
  5684.             <p class=\"mb-4\">
  5685.               Le souvenir incontournable du séjour. Qualité soignée, fabrication locale en France et
  5686.               <strong>livraison gratuite</strong> pour les familles.
  5687.             </p>
  5688.                   </div>
  5689.           <a class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"https://futur.5sur5sejour.fr/Accueil5sur5/album/Album%20photos\" target=\"_blank\">
  5690.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  5691.             <span>Voir les modèles d'albums</span>
  5692.                   </a>
  5693.                 </div>
  5694.               </div>
  5696.       <!-- Carte 2 : Tirages & souvenirs -->
  5697.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  5698.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  5699.                   <div>
  5700.            <figure class=\"product-visual\" style=\"\"  width: 100%;
  5701.   height: 200px;                /* hauteur demandée */
  5702.   display: flex;
  5703.   align-items: center;
  5704.   justify-content: center;      /* image centrée */
  5705.   background: rgba(47,167,163,.06);
  5706.   border-radius: 16px;
  5707.   overflow: hidden;
  5708.   margin-bottom: 16px;>
  5709.         <img style=\" max-width: 100%;
  5710.   max-height: 100%;
  5711.   object-fit: contain;          /* garde le ratio, pas de crop */
  5712.   display: block;\"
  5713.           src=\"https://5sur5sejour.com/images/produit/PochettePhoto5sur5-2.jpg\"
  5714.           alt=\"Album photo premium 5sur5\"
  5715.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  5716.           sizes=\"(min-width:992px) 330px, 90vw\">
  5717.       </figure>
  5718.             
  5719.            
  5720.             <h3 class=\"fs-5 mb-3\">Tirages & produits souvenirs</h3>
  5721.             <p class=\"mb-4\">
  5722.               Tirages photo et articles souvenirs 5sur5 pour prolonger l'expérience du séjour.
  5723.               Qualité premium, <strong>fabriqués en France</strong>.
  5724.             </p>
  5725.                   </div>
  5726.           <a class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"{{ path('boutique5sur5_Souvenir') }}\">
  5727.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  5728.             <span>Découvrir les souvenirs</span>
  5729.                   </a>
  5730.                 </div>
  5731.               </div>
  5733.       <!-- Carte 3 : Achat groupé -20% -->
  5734.               <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  5735.                 <div class=\"service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5\">
  5736.                   <div>
  5737.                <figure class=\"product-visual\" style=\"\"  width: 100%;
  5738.   height: 200px;                /* hauteur demandée */
  5739.   display: flex;
  5740.   align-items: center;
  5741.   justify-content: center;      /* image centrée */
  5742.   background: rgba(47,167,163,.06);
  5743.   border-radius: 16px;
  5744.   overflow: hidden;
  5745.   margin-bottom: 16px;>
  5746.         <img style=\" max-width: 100%;
  5747.   max-height: 100%;
  5748.   object-fit: contain;          /* garde le ratio, pas de crop */
  5749.   display: block;\"
  5750.           src=\"https://5sur5sejour.com/images/produit/Album5sur5-3.jpg\"
  5751.           alt=\"Album photo premium 5sur5\"
  5752.           width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\"
  5753.           sizes=\"(min-width:992px) 330px, 90vw\">
  5754.       </figure>
  5755.            
  5756.             <h3 class=\"fs-5 mb-3\">Achat groupé établissement –20%</h3>
  5757.             <p class=\"mb-4\">
  5758.               Activez l'option \"achat groupé\" pour la classe/le séjour et bénéficiez de
  5759.               <strong>–20% de réduction</strong> avec <strong>livraison gratuite</strong>. Simple à organiser, apprécié des familles.
  5760.             </p>
  5761.                   </div>
  5762.           <a  data-bs-toggle=\"modal\"
  5763.    data-bs-target=\"#groupBuyLite\"
  5764.    data-action=\"group_buy_open\" class=\"special-link d-inline-flex gap-2 align-items-center text-decoration-none\" href=\"#achat-groupe\">
  5765.                     <span class=\"icons\"><i class=\"icon-1 bi bi-arrow-right-short\"></i><i class=\"icon-2 bi bi-arrow-right-short\"></i></span>
  5766.             <span>Activer l'achat groupé</span>
  5767.                   </a>
  5768.                 </div>
  5769.               </div>
  5770.             </div>
  5772.     <!-- Micro-barre de réassurance (discrète) -->
  5773.     <div class=\"text-center text-muted small mt-4\">
  5774.       Fabriqué en France · Livraison gratuite · Qualité premium 5sur5 · Possibilité de <strong>partage des bénéfices</strong> pour les partenaires
  5775.     </div>
  5776.   </div>
  5777. </section>
  5779.       
  5781.         <!-- ======= Contact =======-->
  5782.         <section class=\"section contact__v2\" id=\"contact\">
  5783.           <div class=\"container\">
  5784.             <div class=\"row mb-5\">
  5785.               <div class=\"col-md-6 col-lg-7 mx-auto text-center\">
  5786.                 <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Contact</span>
  5787.                 <h2 class=\"h2 fw-bold mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Nous contacter</h2>
  5788.                 <p data-aos=\"fade-up\" data-aos-delay=\"100\">Nous sommes à votre écoute pour répondre à vos questions et vous aider à mieux comprendre nos services.</p>
  5789.               </div>
  5790.             </div>
  5791.             <div class=\"row\">
  5792.               <div class=\"col-md-6\">
  5793.                 <div class=\"d-flex gap-5 flex-column\">
  5794.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">
  5795.                     <div class=\"icon d-block\"><i class=\"bi bi-telephone\"></i></div>
  5796.                     <span>
  5797.                       <span class=\"d-block\">Téléphone</span>
  5798.                       <strong>05 36 28 29 30</strong>
  5799.                     </span>
  5800.                   </div>
  5801.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">
  5802.                     <div class=\"icon d-block\"><i class=\"bi bi-send\"></i></div>
  5803.                     <span>
  5804.                       <span class=\"d-block\">Email</span>
  5805.                       <strong>contact@5sur5sejour.com</strong>
  5806.                     </span>
  5807.                   </div>
  5808.                   <div class=\"d-flex align-items-start gap-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">
  5809.                     <div class=\"icon d-block\"><i class=\"bi bi-geo-alt\"></i></div>
  5810.                     <span>
  5811.                       <span class=\"d-block\">Adresse</span>
  5812.                       <address class=\"fw-bold\">5sur5séjour<br>France</address>
  5813.                     </span>
  5814.                   </div>
  5815.                 </div>
  5816.               </div>
  5817.               <div class=\"col-md-6\">
  5818.                 <div class=\"form-wrapper\" data-aos=\"fade-up\" data-aos-delay=\"300\">
  5819.                   <div class=\"text-center mb-4\">
  5820.                     <a href=\"#\" class=\"btn btn-primary btn-lg\" data-action=\"cta_expert\" data-pack=\"contact\">
  5821.                       Parler à un expert maintenant
  5822.                     </a>
  5823.                     <p class=\"text-muted mt-3 mb-0\">Ou utilisez le formulaire ci-dessous pour nous laisser un message</p>
  5824.                   </div>
  5825.                   <form id=\"contactFormSection\" action=\"{{ path('app_contact') }}\" method=\"POST\">
  5826.                     <div class=\"row gap-3 mb-3\">
  5827.                       <div class=\"col-md-12\">
  5828.                         <label class=\"mb-2\" for=\"name\">Nom</label>
  5829.                         <input class=\"form-control\" id=\"name\" type=\"text\" name=\"name\" required=\"\">
  5830.                       </div>
  5831.                       <div class=\"col-md-12\">
  5832.                         <label class=\"mb-2\" for=\"email\">Email</label>
  5833.                         <input class=\"form-control\" id=\"email\" type=\"email\" name=\"email\" required=\"\">
  5834.                       </div>
  5835.                     </div>
  5836.                     <div class=\"row gap-3 mb-3\">
  5837.                       <div class=\"col-md-12\">
  5838.                         <label class=\"mb-2\" for=\"subject\">Sujet</label>
  5839.                         <input class=\"form-control\" id=\"subject\" type=\"text\" name=\"subject\">
  5840.                       </div>
  5841.                     </div>
  5842.                     <div class=\"row gap-3 gap-md-0 mb-3\">
  5843.                       <div class=\"col-md-12\">
  5844.                         <label class=\"mb-2\" for=\"message\">Message</label>
  5845.                         <textarea class=\"form-control\" id=\"message\" name=\"message\" rows=\"5\" required=\"\"></textarea>
  5846.                       </div>
  5847.                     </div>
  5848.                     <button class=\"btn btn-primary fw-semibold\" type=\"submit\">Envoyer le message</button>
  5849.                   </form>
  5850.                   <div class=\"mt-3 d-none alert alert-success\" id=\"successMessageSection\">Message envoyé avec succès !</div>
  5851.                   <div class=\"mt-3 d-none alert alert-danger\" id=\"errorMessageSection\">Échec de l'envoi du message. Veuillez réessayer plus tard.</div>
  5852.                 </div>
  5853.               </div>
  5854.             </div>
  5855.           </div>
  5856.         </section>
  5857.         <!-- End Contact-->
  5858.         
  5859.         <!-- ======= Footer =======-->
  5860.     
  5861.         {%block Footer %}
  5862.             {% include 'Accueil/_footer_premium.html.twig' %}
  5863.         {% endblock %}
  5865.         <!-- End Footer-->
  5866.         
  5867.       </main>
  5868.     </div>
  5869.     
  5870.     <!-- ======= Back to Top =======-->
  5871.     <button id=\"back-to-top\"><i class=\"bi bi-arrow-up-short\"></i></button>
  5872.     <!-- End Back to top-->
  5873.     
  5874.     <!-- ======= Javascripts =======-->
  5875.     <script src=\"{{ asset('Accueil/vendors/bootstrap/bootstrap.bundle.min.js') }}\"></script>
  5876.     <script src=\"{{ asset('Accueil/vendors/gsap/gsap.min.js') }}\"></script>
  5877.     <script src=\"{{ asset('Accueil/vendors/imagesloaded/imagesloaded.pkgd.min.js') }}\"></script>
  5878.     <script src=\"{{ asset('Accueil/vendors/isotope/isotope.pkgd.min.js') }}\"></script>
  5879.     <script src=\"{{ asset('Accueil/vendors/glightbox/glightbox.min.js') }}\"></script>
  5880.     <script src=\"{{ asset('Accueil/vendors/swiper/swiper-bundle.min.js') }}\"></script>
  5881.     <script src=\"{{ asset('Accueil/vendors/aos/aos.js') }}\"></script>
  5882.     <script src=\"{{ asset('Accueil/vendors/purecounter/purecounter.js') }}\"></script>
  5883.     <script src=\"{{ asset('Accueil/js/js_nova.js') }}\"></script>
  5884.     <script src=\"{{ asset('Accueil/js/test-animations.js') }}\"></script>
  5885.     
  5886.     <!-- Initialize AOS -->
  5887.     <script>
  5888.       document.addEventListener('DOMContentLoaded', function() {
  5889.         console.log('DOM loaded, initializing AOS...');
  5890.         
  5891.         // Initialize AOS
  5892.         AOS.init({
  5893.           duration: 1000,
  5894.           easing: 'ease-in-out',
  5895.           once: true,
  5896.           mirror: false
  5897.         });
  5898.         
  5899.         console.log('AOS initialized');
  5900.         
  5901.         // Initialize PureCounter
  5902.         new PureCounter();
  5903.         
  5904.         // Initialize GLightbox
  5905.         const lightbox = GLightbox({
  5906.           selector: '.glightbox'
  5907.         });
  5908.         
  5909.         // Debug: Check if arch-line images are loaded
  5910.         const archLines = document.querySelectorAll('.arch-line');
  5911.         console.log('Found arch-line elements:', archLines.length);
  5912.         archLines.forEach((line, index) => {
  5913.           console.log(`Arch-line \${index + 1}:`, line.src, line.complete ? 'loaded' : 'loading...');
  5914.         });
  5915.         
  5916.         // Smooth scrolling for anchor links
  5917.         document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {
  5918.           anchor.addEventListener('click', function (e) {
  5919.             e.preventDefault();
  5920.             const target = document.querySelector(this.getAttribute('href'));
  5921.             if (target) {
  5922.               target.scrollIntoView({
  5923.                 behavior: 'smooth',
  5924.                 block: 'start'
  5925.               });
  5926.             }
  5927.           });
  5928.         });
  5929.         
  5930.         // Back to top button
  5931.         const backToTop = document.getElementById('back-to-top');
  5932.         if (backToTop) {
  5933.           window.addEventListener('scroll', function() {
  5934.             if (window.pageYOffset > 100) {
  5935.               backToTop.style.display = 'block';
  5936.             } else {
  5937.               backToTop.style.display = 'none';
  5938.             }
  5939.           });
  5940.           
  5941.           backToTop.addEventListener('click', function() {
  5942.             window.scrollTo({
  5943.               top: 0,
  5944.               behavior: 'smooth'
  5945.             });
  5946.           });
  5947.         }
  5948.         
  5949.         // Animation des flèches pour l'ancienne section
  5950.         function startArrowAnimation() {
  5951.           const arrowImg = document.querySelector('.MyImgFirstPosition');
  5952.           const lineImg = document.querySelector('.MyLineFirstPosition');
  5953.           
  5954.           if (arrowImg && lineImg) {
  5955.             // Démarrer l'animation après 1 seconde
  5956.             setTimeout(() => {
  5957.               arrowImg.classList.add('Myimg');
  5958.               lineImg.classList.add('MyLine');
  5959.             }, 1000);
  5960.           }
  5961.         }
  5962.         
  5963.         // Démarrer l'animation des flèches
  5964.         startArrowAnimation();
  5965.         
  5966.         // Slider simple (sans Owl Carousel pour l'instant)
  5967.         let currentSlide = 0;
  5968.         const slides = document.querySelectorAll('.single_slider');
  5969.         
  5970.         function showSlide(index) {
  5971.           slides.forEach((slide, i) => {
  5972.             slide.style.display = i === index ? 'flex' : 'none';
  5973.           });
  5974.         }
  5975.         
  5976.         function nextSlide() {
  5977.           currentSlide = (currentSlide + 1) % slides.length;
  5978.           showSlide(currentSlide);
  5979.         }
  5980.         
  5981.         // Initialiser le slider
  5982.         if (slides.length > 0) {
  5983.           showSlide(0);
  5984.           // Changer de slide toutes les 5 secondes
  5985.           setInterval(nextSlide, 5000);
  5986.         }
  5987.         
  5988.         // Nouveau slider functionality
  5989.         let currentHeroSlide = 0;
  5990.         const heroSlides = [
  5991.           {
  5992.             title: \"Révolutionnez la Communication\",
  5993.             description: \"Partagez vos aventures avec les familles en toute sécurité grâce à notre plateforme, agrémentée de photos, de vidéos et messages.\",
  5994.             image: \"{{ asset('Accueil/imagesAccueil/slider/child-laughing.jpg') }}\"
  5995.           },
  5996.           {
  5997.             title: \"La plateforme qui rassure les familles\",
  5998.             description: \"Partagez vos souvenirs en toute sécurité avec des photos, vidéos et messages vocaux.\",
  5999.             image: \"{{ asset('Accueil/imagesAccueil/secure.jpg') }}\"
  6000.           },
  6001.           {
  6002.             title: \"Messages vocaux et photos\",
  6003.             description: \"Restez connecté avec votre enfant tout au long du séjour grâce à notre technologie sécurisée.\",
  6004.             image: \"{{ asset('Accueil/imagesAccueil/slider/bg-slider.svg') }}\"
  6005.           }
  6006.         ];
  6007.         
  6008.         function changeSlide(direction) {
  6009.           currentHeroSlide = (currentHeroSlide + direction + heroSlides.length) % heroSlides.length;
  6010.           updateHeroSlider();
  6011.         }
  6012.         
  6013.         function updateHeroSlider() {
  6014.           const titleElement = document.querySelector('.hero-slider-title');
  6015.           const descriptionElement = document.querySelector('.hero-slider-description');
  6016.           const imageElement = document.querySelector('.hero-slider-image img');
  6017.           
  6018.           if (titleElement && descriptionElement && imageElement) {
  6019.             // Animation de transition
  6020.             titleElement.style.opacity = '0';
  6021.             descriptionElement.style.opacity = '0';
  6022.             
  6023.             setTimeout(() => {
  6024.               titleElement.textContent = heroSlides[currentHeroSlide].title;
  6025.               descriptionElement.textContent = heroSlides[currentHeroSlide].description;
  6026.               imageElement.src = heroSlides[currentHeroSlide].image;
  6027.               
  6028.               titleElement.style.opacity = '1';
  6029.               descriptionElement.style.opacity = '1';
  6030.             }, 300);
  6031.           }
  6032.         }
  6033.         
  6034.         // Auto-play pour le nouveau slider
  6035.         setInterval(() => {
  6036.           changeSlide(1);
  6037.         }, 6000);
  6038.         
  6039.         // Gestion du formulaire de contact de la section contact
  6040.         const contactFormSection = document.getElementById('contactFormSection');
  6041.         const successMessageSection = document.getElementById('successMessageSection');
  6042.         const errorMessageSection = document.getElementById('errorMessageSection');
  6043.         
  6044.         if (contactFormSection) {
  6045.           contactFormSection.addEventListener('submit', function(e) {
  6046.             e.preventDefault();
  6047.             
  6048.             // Masquer les messages précédents
  6049.             successMessageSection.classList.add('d-none');
  6050.             errorMessageSection.classList.add('d-none');
  6051.             
  6052.             // Désactiver le bouton pendant l'envoi
  6053.             const submitButton = contactFormSection.querySelector('button[type=\"submit\"]');
  6054.             const originalText = submitButton.textContent;
  6055.             submitButton.textContent = 'Envoi en cours...';
  6056.             submitButton.disabled = true;
  6057.             
  6058.             // Récupérer les données du formulaire
  6059.             const formData = new FormData(contactFormSection);
  6060.             
  6061.             // Envoyer la requête AJAX
  6062.             fetch(contactFormSection.action, {
  6063.               method: 'POST',
  6064.               body: formData,
  6065.               headers: {
  6066.                 'X-Requested-With': 'XMLHttpRequest'
  6067.               }
  6068.             })
  6069.             .then(response => response.json())
  6070.             .then(data => {
  6071.               if (data.success) {
  6072.                 // Afficher le message de succès
  6073.                 successMessageSection.textContent = data.message;
  6074.                 successMessageSection.classList.remove('d-none');
  6075.                 
  6076.                 // Réinitialiser le formulaire
  6077.                 contactFormSection.reset();
  6078.               } else {
  6079.                 // Afficher le message d'erreur
  6080.                 errorMessageSection.textContent = data.message;
  6081.                 errorMessageSection.classList.remove('d-none');
  6082.               }
  6083.             })
  6084.             .catch(error => {
  6085.               console.error('Erreur:', error);
  6086.               errorMessageSection.textContent = 'Une erreur est survenue lors de l\\'envoi du message. Veuillez réessayer plus tard.';
  6087.               errorMessageSection.classList.remove('d-none');
  6088.             })
  6089.             .finally(() => {
  6090.               // Réactiver le bouton
  6091.               submitButton.textContent = originalText;
  6092.               submitButton.disabled = false;
  6093.             });
  6094.           });
  6095.         }
  6096.         
  6097.       });
  6098.     </script>
  6099.     <!-- End JavaScripts-->
  6101. <!-- MODAL CONNEXION -->
  6102. <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">
  6103.   <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  6104.     <div class=\"modal-content rounded-4\">
  6105.       <div class=\"modal-header border-0\">
  6106.         <h5 class=\"modal-title fw-bold\">Accéder à mon espace de séjour </h5>
  6107.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  6108.       </div>
  6109.       <div class=\"modal-body p-4\">
  6110.         <div class=\"row g-4 align-items-center\">
  6111.           <div class=\"col-lg-5 text-center border-end\">
  6112.             <img src=\"/images/Accompagnateur/LogoEspaceAccom.svg\" alt=\"Espace accompagnateur\" class=\"img-fluid mb-3\" style=\"max-height: 120px;\">
  6113.             <p class=\"small text-muted mb-0\">
  6114.               Retrouvez votre séjour, publiez vos contenus et rassurez les familles en temps réel.
  6115.             </p>
  6116.           </div>
  6117.           <div class=\"col-lg-7\">
  6118.             <div class=\"titleAutre mb-3\">Vous êtes accompagnateur et disposez déjà d'un identifiant et d'un mot de passe.</div>
  6119.             <form method=\"post\" class=\"fomru\" action=\"{{ path('app_back_Acommpa') }}\">
  6120.               <div class=\"form-group d-grid gap-3\">
  6121.                 <input type=\"text\" value=\"\" name=\"email\" id=\"modalInputEmail\" class=\"form-control\" placeholder=\" Code séjour de l'accompagnateur * \">
  6122.                 <input type=\"password\" name=\"password\" id=\"modalInputPassword\" class=\"form-control\" placeholder=\"mot de passe fourni à l'organisme * \">
  6123.                 <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  6124.                 <div class=\"description\"><a href=\"#\" data-bs-toggle=\"modal\" data-bs-target=\"#mdpoblier\" style=\"color:#f09e7a;\">Vous avez oublié votre mot de passe</a></div>
  6125.               </div>
  6126.               <div class=\"d-grid mt-4\">
  6127.                 <button class=\"btn btn-primary rounded-3\" type=\"submit\">Je me connecte</button>
  6128.               </div>
  6129.             </form>
  6130.           </div>
  6131.         </div>
  6132.       </div>
  6133.     </div>
  6134.   </div>
  6135. </div>
  6137. <!-- MODAL MOT DE PASSE OUBLIÉ -->
  6138. <div class=\"modal fade\" id=\"mdpoblier\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">
  6139.   <div class=\"modal-dialog\" role=\"document\">
  6140.     <div class=\"modal-content\" style=\"border-radius: 0px;top: 50px;width: 55%;margin: auto;min-width: 270px;\">
  6141.       <div class=\"modal-header\">
  6142.         <button type=\"button\" class=\"close\" data-bs-dismiss=\"modal\" aria-label=\"Close\">
  6143.           <img src=\"{{ asset('images/Groupe_526.svg')}}\">
  6144.         </button>
  6145.       </div>
  6146.       <div class=\"modal-body\" style=\"text-align:center\">
  6147.         <h5 class=\"modal-title\" id=\"exampleModalLabel\" style=\"margin-left:15px; margin-bottom: 15px\">
  6148.           <img class=\"imageLogo2\" style=\"width: 58% !important;\" src=\"{{ asset('Accueil/imagesAccueil/logoHeader.svg')}}\">
  6149.         </h5>
  6150.         <div class=\"row no-margin\" style=\"padding-bottom: 40px;\">
  6151.           <div class=\"col-md-12 col-sm-12 col-xs-12 descTitre\">
  6152.             <strong>Vous avez oublié votre mot de passe ? Contactez notre équipe 5sur5sejour au 05 36 28 29 30.</strong>
  6153.           </div>
  6154.         </div>
  6155.       </div>
  6156.     </div>
  6157.   </div>
  6158. </div>
  6160. <!-- MODAL CONNEXION PARTENAIRE -->
  6161. <div class=\"modal fade\" id=\"partnerLoginModal\" tabindex=\"-1\" aria-hidden=\"true\">
  6162.   <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  6163.     <div class=\"modal-content rounded-4\">
  6164.       <div class=\"modal-header border-0\">
  6165.         <h5 class=\"modal-title fw-bold\">Espace Partenaire - Connexion</h5>
  6166.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  6167.       </div>
  6168.       <div class=\"modal-body p-4\">
  6169.         <div class=\"row g-4 align-items-center\">
  6170.           <div class=\"col-lg-5 text-center border-end\">
  6171.             <img src=\"{{ asset('Accueil/imagesAccueil/espcPart.svg') }}\" alt=\"Espace partenaire\" class=\"img-fluid mb-3\" style=\"max-height: 120px;\">
  6172.             <p class=\"small text-muted mb-0\">
  6173.               Créez et gérez tous vos séjours depuis un espace dédié, avec un service client sur mesure et des outils pensés pour vous.
  6174.             </p>
  6175.           </div>
  6176.           <div class=\"col-lg-7\">
  6177.             <div class=\"titleAutre mb-3\">Vous êtes partenaire</div>
  6178.             <div class=\"sous-titrecnx mb-3\">Bienvenue dans votre espace 5 sur 5 séjour</div>
  6179.             <div class=\"descriptioncnx mb-4\">Entrez votre identifiant et votre mot de passe afin d'entrer dans votre plateforme d'administration</div>
  6180.             
  6181.             <form method=\"post\" action=\"{{ path('app_login_back_Partenaire') }}\">
  6182.               <div class=\"form-group d-grid gap-3\">
  6183.                 <input type=\"text\" name=\"email\" id=\"partnerInputEmail\" class=\"form-control\" placeholder=\"Mail partenaire\" value=\"\">
  6184.                 <input type=\"password\" name=\"password\" id=\"partnerInputPassword\" class=\"form-control\" placeholder=\"Mot de passe\">
  6185.                 <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  6186.                 <div class=\"description\">
  6187.                   <a href=\"/forgotPasspatenaire\" style=\"color:#f09e7a;\">Vous avez oublié votre mot de passe</a>
  6188.                 </div>
  6189.               </div>
  6190.               <div class=\"d-grid mt-4\">
  6191.                 <button class=\"btn btn-primary rounded-3\" type=\"submit\">Je me connecte</button>
  6192.               </div>
  6193.             </form>
  6194.           </div>
  6195.         </div>
  6196.       </div>
  6197.     </div>
  6198.   </div>
  6199. </div>
  6201. <!-- Modale ultra-légère -->
  6202. <div class=\"modal fade\" id=\"groupBuyLite\" tabindex=\"-1\" aria-hidden=\"true\">
  6203.   <div class=\"modal-dialog modal-dialog-centered\">
  6204.     <div class=\"modal-content rounded-4\">
  6205.       <div class=\"modal-header\">
  6206.         <h5 class=\"modal-title\">Achat groupé — jusqu’à −20%</h5>
  6207.         <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  6208.       </div>
  6209.       <div class=\"modal-body\">
  6210.         <ul class=\"small text-muted ps-3\">
  6211.           <li>Remise automatique selon le volume (ex. −10% dès 5, −15% dès 10, −20% dès 20).</li>
  6212.           <li>Applicable sur albums, tirages et packs.</li>
  6213.           <li>La structure peut prendre en charge Parent Premium (tarif préférentiel, voix illimitée incluse).</li>
  6214.         </ul>
  6215.         <div class=\"alert alert-info small mb-0\">
  6216.           <i class=\"bi bi-info-circle me-1\"></i>
  6217.           La remise sera affichée sur la boutique. Munissez-vous du <strong>code séjour</strong> si demandé.
  6218.         </div>
  6219.       </div>
  6220.       <div class=\"modal-footer d-block\">
  6221.         <div class=\"d-grid d-sm-flex gap-2\">
  6222.           <!-- Redirection directe (aucun champ) -->
  6223.           <a class=\"btn btn-primary\"
  6224.              href=\"/boutique?groupbuy=1&utm_source=site&utm_medium=modal&utm_campaign=group_buy\"
  6225.              data-action=\"group_buy_continue\">
  6226.             Aller à la boutique
  6227.           </a>
  6228.           <button class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Plus tard</button>
  6229.         </div>
  6230.         <p class=\"small text-muted mt-2 mb-0\">
  6231.           Besoin d’aide ? <a href=\"#\" data-action=\"cta_expert\">Parler à un expert</a>
  6232.         </p>
  6233.       </div>
  6234.     </div>
  6235.   </div>
  6236. </div>
  6238. <!-- MODALE CHOIX DE PAIEMENT -->
  6239. <div class=\"modal fade\" id=\"checkoutChoiceModal\" tabindex=\"-1\" aria-labelledby=\"checkoutChoiceModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">
  6240.     <div class=\"modal-dialog modal-lg modal-dialog-centered\">
  6241.         <div class=\"modal-content\">
  6242.             <div class=\"modal-header border-0 pb-0\">
  6243.                 <h5 class=\"modal-title w-100 text-center\" id=\"checkoutChoiceModalLabel\">
  6244.                     <i class=\"bi bi-credit-card-2-front me-2\"></i>
  6245.                     Comment souhaitez-vous procéder ?
  6246.                 </h5>
  6247.                 <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  6248.             </div>
  6249.             <div class=\"modal-body px-5 py-4\">
  6250.                 <!-- Récapitulatif du pack sélectionné -->
  6251.                 <div class=\"alert alert-primary border-primary mb-4 d-flex align-items-center justify-content-between\" role=\"alert\" id=\"packSummary\" style=\"display: none !important;\">
  6252.                     <div class=\"d-flex align-items-center gap-3\">
  6253.                         <i class=\"bi bi-box-seam fs-3\"></i>
  6254.                         <div>
  6255.                             <div class=\"fw-bold mb-1\">Pack sélectionné</div>
  6256.                             <div class=\"h5 mb-0\" id=\"packName\">—</div>
  6257.                         </div>
  6258.                     </div>
  6259.                     <div class=\"text-end\">
  6260.                         <div class=\"text-muted small\">Montant annuel</div>
  6261.                         <div class=\"h4 mb-0 fw-bold\" id=\"packPrice\">—</div>
  6262.                     </div>
  6263.                 </div>
  6264.                 
  6265.                 <p class=\"text-center text-muted mb-4\">Choisissez le mode de souscription adapté à votre structure</p>
  6266.                 
  6267.                 <div class=\"row g-4\">
  6268.                     <!-- Card 1 — Souscription en ligne -->
  6269.                     <div class=\"col-lg-4 col-md-6\">
  6270.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"online\" tabindex=\"0\" role=\"button\">
  6271.                             <div class=\"card-body d-flex flex-column\">
  6272.                                 <div class=\"mb-3\">
  6273.                                     <span class=\"badge bg-success text-white mb-2\">Recommandé</span>
  6274.                                     <h4 class=\"card-title mb-2\">Souscrire en ligne</h4>
  6275.                                     <p class=\"text-muted small\">CB / SEPA — activation en 24 h. Facturation annuelle.</p>
  6276.                                 </div>
  6277.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  6278.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Stripe Checkout sécurisé</li>
  6279.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Facture et mandat SEPA automatiques</li>
  6280.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-success me-2\"></i>Planifier l'onboarding (30 min)</li>
  6281.                                 </ul>
  6282.                                 <button class=\"btn btn-primary w-100\" data-cta=\"checkout_online\" data-loc=\"modal\">
  6283.                                     <i class=\"bi bi-credit-card me-2\"></i>Payer & activer
  6284.                                 </button>
  6285.                             </div>
  6286.                         </div>
  6287.                     </div>
  6289.                     <!-- Card 2 — Virement bancaire -->
  6290.                     <div class=\"col-lg-4 col-md-6\">
  6291.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"bank_transfer\" tabindex=\"0\" role=\"button\">
  6292.                             <div class=\"card-body d-flex flex-column\">
  6293.                                 <div class=\"mb-3\">
  6294.                                     <span class=\"badge bg-info text-white mb-2\">Économique</span>
  6295.                                     <h4 class=\"card-title mb-2\">Virement bancaire</h4>
  6296.                                     <p class=\"text-muted small\">Paiement par virement — activation sous 48h après réception.</p>
  6297.                                 </div>
  6298.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  6299.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>RIB fourni automatiquement</li>
  6300.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>Facture proforma envoyée</li>
  6301.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-info me-2\"></i>Activation après réception</li>
  6302.                                 </ul>
  6303.                                 <button type=\"button\" class=\"btn btn-outline-info w-100\" data-bs-toggle=\"modal\" data-bs-target=\"#bankTransferModal\" data-bs-dismiss=\"modal\">
  6304.                                     <i class=\"bi bi-bank me-2\"></i>Demander le RIB
  6305.                                 </button>
  6306.                             </div>
  6307.                         </div>
  6308.                     </div>
  6310.                     <!-- Card 3 — Devis / Bon de commande -->
  6311.                     <div class=\"col-lg-4 col-md-6\">
  6312.                         <div class=\"card h-100 border-2 checkout-choice-card\" data-choice=\"quote\" tabindex=\"0\" role=\"button\">
  6313.                             <div class=\"card-body d-flex flex-column\">
  6314.                                 <div class=\"mb-3\">
  6315.                                     <h4 class=\"card-title mb-2 mt-4\">Demander un devis / BC</h4>
  6316.                                     <p class=\"text-muted small\">Adapté écoles publiques, collectivités, associations.</p>
  6317.                                 </div>
  6318.                                 <ul class=\"list-unstyled mb-4 flex-grow-1\">
  6319.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>Devis PDF instantané</li>
  6320.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>DPA/RGPD, RIB, CGV joints</li>
  6321.                                     <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill text-primary me-2\"></i>E‑signature & upload du BC</li>
  6322.                                 </ul>
  6323.                                 <button class=\"btn btn-outline-primary w-100\" data-cta=\"checkout_quote\" data-loc=\"modal\">
  6324.                                     <i class=\"bi bi-file-earmark-text me-2\"></i>Recevoir le devis
  6325.                                 </button>
  6326.                             </div>
  6327.                         </div>
  6328.                     </div>
  6329.                 </div>
  6330.             </div>
  6331.             <div class=\"modal-footer border-0 pt-0\">
  6332.                 <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Retour</button>
  6333.             </div>
  6334.         </div>
  6335.     </div>
  6336. </div>
  6338. <!-- MODALE VIREMENT BANCAIRE (RIB) -->
  6339. <div class=\"modal fade\" id=\"bankTransferModal\" tabindex=\"-1\" aria-labelledby=\"bankTransferModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">
  6340.     <div class=\"modal-dialog modal-xl modal-dialog-centered\">
  6341.         <div class=\"modal-content\">
  6342.             <div class=\"modal-header border-0 pb-2\">
  6343.                 <h5 class=\"modal-title w-100 text-center\" id=\"bankTransferModalLabel\">
  6344.                     <i class=\"bi bi-bank2 me-2 text-info\"></i>
  6345.                     Virement bancaire — RIB instantané
  6346.                 </h5>
  6347.                 <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  6348.             </div>
  6349.             <div class=\"modal-body p-4\">
  6350.                 <div class=\"row\">
  6351.                     <!-- Colonne formulaire -->
  6352.                     <div class=\"col-lg-5\">
  6353.                         <div class=\"card border-0 bg-light h-100\">
  6354.                             <div class=\"card-body p-4\">
  6355.                                 <h6 class=\"text-info mb-3\">
  6356.                                     <i class=\"bi bi-person-circle me-2\"></i>Vos informations
  6357.                                 </h6>
  6358.                                 <p class=\"text-muted small mb-4\">Nous vous enverrons le RIB et la facture proforma par email</p>
  6359.                                 
  6360.                                 <form id=\"rib-form\" method=\"post\" action=\"{{ path('bank_transfer_request') }}\" data-event=\"rib_request_submit\">
  6361.                                     <div class=\"mb-4\">
  6362.                                         <label for=\"rib_fullname\" class=\"form-label fw-semibold\">
  6363.                                             <i class=\"bi bi-person me-1\"></i>Nom & prénom *
  6364.                                         </label>
  6365.                                         <input id=\"rib_fullname\" name=\"full_name\" class=\"form-control form-control-lg\" required 
  6366.                                                placeholder=\"Ex: Marie Dupont\" autocomplete=\"name\">
  6367.                                     </div>
  6368.                                     
  6369.                                     <div class=\"mb-4\">
  6370.                                         <label for=\"rib_email\" class=\"form-label fw-semibold\">
  6371.                                             <i class=\"bi bi-envelope me-1\"></i>Email de facturation *
  6372.                                         </label>
  6373.                                         <input id=\"rib_email\" name=\"billing_email\" type=\"email\" class=\"form-control form-control-lg\" required 
  6374.                                                placeholder=\"Ex: comptabilite@ecole.fr\" autocomplete=\"email\">
  6375.                                     </div>
  6377.                                     <div class=\"mb-4\">
  6378.                                         <label for=\"rib_company\" class=\"form-label fw-semibold\">
  6379.                                             <i class=\"bi bi-building me-1\"></i>Nom de la structure
  6380.                                         </label>
  6381.                                         <input id=\"rib_company\" name=\"company\" class=\"form-control form-control-lg\" 
  6382.                                                placeholder=\"Ex: École Primaire Jean Moulin\" autocomplete=\"organization\">
  6383.                                     </div>
  6385.                                     <!-- Contexte pack (sera rempli dynamiquement) -->
  6386.                                     <input type=\"hidden\" name=\"pack_id\" id=\"rib_pack_id\" value=\"\">
  6388.                                     <div class=\"d-grid\">
  6389.                                         <button class=\"btn btn-info btn-lg py-3\" id=\"rib-submit\" type=\"submit\" data-cta=\"rib_request\" data-loc=\"wire\">
  6390.                                             <i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément
  6391.                                         </button>
  6392.                                     </div>
  6393.                                     
  6394.                                     <p class=\"text-muted text-center small mt-3 mb-0\">
  6395.                                         <i class=\"bi bi-shield-check me-1\"></i>
  6396.                                         Sécurisé • Données hébergées en France • Conforme RGPD
  6397.                                     </p>
  6398.                                 </form>
  6399.                             </div>
  6400.                         </div>
  6401.                     </div>
  6403.                     <!-- Colonne RIB -->
  6404.                     <div class=\"col-lg-7\">
  6405.                         <div id=\"rib-panel\" class=\"card border-info\" style=\"display: none;\">
  6406.                             <div class=\"card-header bg-info text-white\">
  6407.                                 <h6 class=\"mb-0\">
  6408.                                     <i class=\"bi bi-bank me-2\"></i>Coordonnées bancaires 5sur5séjour
  6409.                                 </h6>
  6410.                             </div>
  6411.                             <div class=\"card-body p-4\">
  6412.                                 <div class=\"row g-4\">
  6413.                                     <div class=\"col-md-6\">
  6414.                                         <div class=\"border-bottom pb-2 mb-2\">
  6415.                                             <div class=\"text-muted small text-uppercase fw-bold\">Titulaire du compte</div>
  6416.                                             <div class=\"h6 mb-0\">S.A.S. TRUST CONSEILS</div>
  6417.                                         </div>
  6418.                                     </div>
  6419.                                     <div class=\"col-md-6\">
  6420.                                         <div class=\"border-bottom pb-2 mb-2\">
  6421.                                             <div class=\"text-muted small text-uppercase fw-bold\">Banque</div>
  6422.                                             <div class=\"h6 mb-0\">CR CENTRE EST</div>
  6423.                                         </div>
  6424.                                     </div>
  6425.                                     <div class=\"col-12\">
  6426.                                         <div class=\"border-bottom pb-2 mb-2\">
  6427.                                             <div class=\"text-muted small text-uppercase fw-bold\">IBAN</div>
  6428.                                             <div class=\"d-flex align-items-center gap-3\">
  6429.                                                 <code id=\"iban-text\" class=\"user-select-all h6 mb-0 text-primary\">FR76 1780 6009 6304 1603 4748 776</code>
  6430.                                                 <button type=\"button\" class=\"btn btn-outline-primary\" data-cta=\"copy_iban\" aria-label=\"Copier l'IBAN\" onclick=\"copyToClipboard('iban-text', this)\">
  6431.                                                     <i class=\"bi bi-clipboard me-1\"></i>Copier
  6432.                                                 </button>
  6433.                                             </div>
  6434.                                         </div>
  6435.                                     </div>
  6436.                                     <div class=\"col-md-6\">
  6437.                                         <div class=\"border-bottom pb-2 mb-2\">
  6438.                                             <div class=\"text-muted small text-uppercase fw-bold\">Code BIC</div>
  6439.                                             <div class=\"d-flex align-items-center gap-3\">
  6440.                                                 <code id=\"bic-text\" class=\"user-select-all h6 mb-0 text-primary\">AGRIFRPP878</code>
  6441.                                                 <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" data-cta=\"copy_bic\" aria-label=\"Copier le BIC\" onclick=\"copyToClipboard('bic-text', this)\">
  6442.                                                     <i class=\"bi bi-clipboard\"></i>
  6443.                                                 </button>
  6444.                                             </div>
  6445.                                         </div>
  6446.                                     </div>
  6447.                                     <div class=\"col-md-6\">
  6448.                                         <div class=\"border-bottom pb-2 mb-2\">
  6449.                                             <div class=\"text-muted small text-uppercase fw-bold\">Référence à indiquer</div>
  6450.                                             <div class=\"h6 mb-0 text-success\">PACK-PRO-<span id=\"rib-ref-date\"></span></div>
  6451.                                         </div>
  6452.                                     </div>
  6453.                                 </div>
  6455.                                 <div class=\"alert alert-success mt-4\" role=\"alert\">
  6456.                                     <i class=\"bi bi-check-circle me-2\"></i>
  6457.                                     <strong>Email envoyé !</strong> Vous recevrez le RIB et la facture proforma à <span id=\"rib-email-echo\" class=\"fw-bold\">votre adresse</span>.
  6458.                                 </div>
  6460.                                 <div class=\"d-flex flex-wrap gap-3 mt-4\">
  6461.                                     <a class=\"btn btn-primary\" href=\"#\" id=\"proforma-download-link\" data-cta=\"download_proforma\">
  6462.                                         <i class=\"bi bi-download me-2\"></i>Télécharger la facture proforma
  6463.                                     </a>
  6464.                                     <a class=\"btn btn-outline-secondary\" href=\"https://calendly.com/5sur5sejour/demo\" target=\"_blank\" data-cta=\"book_call\">
  6465.                                         <i class=\"bi bi-telephone me-2\"></i>Planifier un appel
  6466.                                     </a>
  6467.                                 </div>
  6469.                                 <div class=\"text-muted small mt-3\">
  6470.                                     <i class=\"bi bi-info-circle me-1\"></i>
  6471.                                     Activation de votre compte sous 48h après réception du virement.
  6472.                                 </div>
  6473.                             </div>
  6474.                         </div>
  6476.                         <!-- Message d'attente -->
  6477.                         <div id=\"rib-waiting\" class=\"text-center p-5\">
  6478.                             <i class=\"bi bi-bank2 text-muted\" style=\"font-size: 4rem;\"></i>
  6479.                             <h5 class=\"text-muted mt-3\">Remplissez le formulaire pour obtenir le RIB</h5>
  6480.                             <p class=\"text-muted\">Vos coordonnées bancaires apparaîtront ici instantanément</p>
  6481.                         </div>
  6482.                     </div>
  6483.                 </div>
  6484.             </div>
  6485.         </div>
  6486.     </div>
  6487. </div>
  6489. <script>
  6490. document.addEventListener('DOMContentLoaded', function() {
  6491.     console.log('✅ Page Accueil - Modale checkout initialisée');
  6492.     
  6493.     // Mapping des packs
  6494.     const packLabels = {
  6495.         'access': 'Pack Accès',
  6496.         'serenite': 'Pack Sérénité',
  6497.         'pro_illimite': 'Partenariat à la performance ✨'
  6498.     };
  6499.     
  6500.     // Récupérer le pack sélectionné lors de l'ouverture de la modale
  6501.     const checkoutModal = document.getElementById('checkoutChoiceModal');
  6502.     const bankTransferModal = document.getElementById('bankTransferModal');
  6503.     let selectedPack = null;
  6504.     let selectedPackPrice = null;
  6505.     
  6506.     if (checkoutModal) {
  6507.         checkoutModal.addEventListener('show.bs.modal', function(event) {
  6508.             const button = event.relatedTarget;
  6509.             selectedPack = button.getAttribute('data-pack');
  6510.             selectedPackPrice = button.getAttribute('data-pack-price');
  6511.             console.log('📦 Pack sélectionné:', selectedPack, '- Prix:', selectedPackPrice + '€');
  6512.             
  6513.             // Afficher le récapitulatif du pack
  6514.             const packSummary = document.getElementById('packSummary');
  6515.             const packName = document.getElementById('packName');
  6516.             const packPrice = document.getElementById('packPrice');
  6517.             
  6518.             if (packSummary && packName && packPrice) {
  6519.                 packName.textContent = packLabels[selectedPack] || selectedPack;
  6520.                 packPrice.textContent = selectedPackPrice + ' € / an';
  6521.                 packSummary.style.display = 'flex';
  6522.             }
  6523.         });
  6524.     }
  6525.     
  6526.     // Transférer le pack sélectionné au modal RIB
  6527.     if (bankTransferModal) {
  6528.         bankTransferModal.addEventListener('show.bs.modal', function(event) {
  6529.             console.log('📦 Ouverture modal RIB avec pack:', selectedPack);
  6530.             // Remplir le champ caché avec le pack sélectionné
  6531.             const ribPackIdField = document.getElementById('rib_pack_id');
  6532.             if (ribPackIdField) {
  6533.                 ribPackIdField.value = selectedPack || '';
  6534.                 console.log('✅ Pack ID défini dans le formulaire:', ribPackIdField.value);
  6535.                 
  6536.                 // ALERTE SI PAS DE PACK SÉLECTIONNÉ
  6537.                 if (!selectedPack) {
  6538.                     console.warn('⚠️ ATTENTION: Aucun pack sélectionné ! La commande ne sera pas créée.');
  6539.                     alert('⚠️ DEBUG: Aucun pack sélectionné. Cliquez d\\'abord sur un bouton de pack (Sérénité ou Découverte) avant de demander le RIB.');
  6540.                 }
  6541.             }
  6542.         });
  6543.     }
  6544.     
  6545.     // =========================
  6546.     // GESTION DU FORMULAIRE RIB
  6547.     // =========================
  6548.     const ribForm = document.getElementById('rib-form');
  6549.     const ribSubmit = document.getElementById('rib-submit');
  6550.     const ribPanel = document.getElementById('rib-panel');
  6551.     const ribWaiting = document.getElementById('rib-waiting');
  6552.     const ribEmailEcho = document.getElementById('rib-email-echo');
  6553.     const ribRefDate = document.getElementById('rib-ref-date');
  6554.     const proformaDownloadLink = document.getElementById('proforma-download-link');
  6555.     
  6556.     if (ribForm && ribSubmit) {
  6557.         // Set current date for reference
  6558.         if (ribRefDate) {
  6559.             const now = new Date();
  6560.             const dateStr = now.getFullYear().toString().slice(-2) + 
  6561.                            (now.getMonth() + 1).toString().padStart(2, '0') + 
  6562.                            now.getDate().toString().padStart(2, '0');
  6563.             ribRefDate.textContent = dateStr;
  6564.         }
  6565.         
  6566.         ribForm.addEventListener('submit', function(e) {
  6567.             e.preventDefault();
  6568.             
  6569.             // Get form data
  6570.             const formData = new FormData(ribForm);
  6571.             const fullName = formData.get('full_name');
  6572.             const billingEmail = formData.get('billing_email');
  6573.             const company = formData.get('company');
  6574.             const packId = formData.get('pack_id');
  6575.             
  6576.             // Validation
  6577.             if (!fullName || fullName.trim().length < 2) {
  6578.                 showFieldError('rib_fullname', 'Veuillez saisir votre nom complet');
  6579.                 return;
  6580.             }
  6581.             
  6582.             if (!billingEmail || !isValidEmail(billingEmail)) {
  6583.                 showFieldError('rib_email', 'Veuillez saisir une adresse email valide');
  6584.                 return;
  6585.             }
  6586.             
  6587.             // Clear any previous errors
  6588.             clearFieldErrors();
  6589.             
  6590.             // Show loading state
  6591.             ribSubmit.disabled = true;
  6592.             ribSubmit.innerHTML = '<i class=\"bi bi-hourglass-split me-2\"></i>Envoi en cours...';
  6593.             
  6594.             // Send to backend
  6595.             fetch('{{ path(\"bank_transfer_request\") }}', {
  6596.                 method: 'POST',
  6597.                 body: formData
  6598.             })
  6599.             .then(res => res.json())
  6600.             .then(data => {
  6601.                 if (data.success) {
  6602.                     showRibSuccess(billingEmail, fullName, company, data.requestNumber);
  6603.                 } else {
  6604.                     throw new Error(data.message || 'Erreur lors de l\\'envoi');
  6605.                 }
  6606.             })
  6607.             .catch(err => {
  6608.                 alert('❌ Erreur : ' + err.message);
  6609.                 ribSubmit.disabled = false;
  6610.                 ribSubmit.innerHTML = '<i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément';
  6611.             });
  6612.         });
  6613.     }
  6614.     
  6615.     function showFieldError(fieldId, message) {
  6616.         const field = document.getElementById(fieldId);
  6617.         if (field) {
  6618.             field.classList.add('is-invalid');
  6619.             
  6620.             // Remove existing error message
  6621.             const existingError = field.parentNode.querySelector('.invalid-feedback');
  6622.             if (existingError) {
  6623.                 existingError.remove();
  6624.             }
  6625.             
  6626.             // Add new error message
  6627.             const errorDiv = document.createElement('div');
  6628.             errorDiv.className = 'invalid-feedback';
  6629.             errorDiv.textContent = message;
  6630.             field.parentNode.appendChild(errorDiv);
  6631.         }
  6632.     }
  6633.     
  6634.     function clearFieldErrors() {
  6635.         const invalidFields = document.querySelectorAll('.is-invalid');
  6636.         invalidFields.forEach(field => {
  6637.             field.classList.remove('is-invalid');
  6638.         });
  6639.         
  6640.         const errorMessages = document.querySelectorAll('.invalid-feedback');
  6641.         errorMessages.forEach(error => {
  6642.             error.remove();
  6643.         });
  6644.     }
  6645.     
  6646.     function showRibSuccess(email, name, company, requestNumber) {
  6647.         // Hide waiting message
  6648.         if (ribWaiting) {
  6649.             ribWaiting.style.display = 'none';
  6650.         }
  6651.         
  6652.         // Show RIB panel
  6653.         if (ribPanel) {
  6654.             ribPanel.style.display = 'block';
  6655.         }
  6656.         
  6657.         // Update email echo
  6658.         if (ribEmailEcho) {
  6659.             ribEmailEcho.textContent = email;
  6660.         }
  6661.         
  6662.         // Generate proforma download link
  6663.         if (proformaDownloadLink && requestNumber) {
  6664.             proformaDownloadLink.href = '/proforma-download/' + requestNumber;
  6665.         }
  6666.         
  6667.         // Scroll to RIB panel
  6668.         if (ribPanel) {
  6669.             ribPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
  6670.         }
  6671.         
  6672.         // Reset button
  6673.         if (ribSubmit) {
  6674.             ribSubmit.disabled = false;
  6675.             ribSubmit.innerHTML = '<i class=\"bi bi-bank me-2\"></i>Obtenir le RIB instantanément';
  6676.         }
  6677.         
  6678.         console.log('✅ RIB request submitted:', { name, email, company });
  6679.     }
  6680.     
  6681.     function isValidEmail(email) {
  6682.         const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  6683.         return emailRegex.test(email);
  6684.     }
  6685.     
  6686.     // Gérer le clic sur \"Payer & activer\" (Stripe)
  6687.     document.querySelector('[data-cta=\"checkout_online\"]')?.addEventListener('click', function() {
  6688.         alert('Paiement Stripe en cours de développement\\n\\nPack : ' + selectedPack + '\\nPrix : ' + selectedPackPrice + '€');
  6689.     });
  6690.     
  6691.     // Gérer le clic sur \"Recevoir le devis\"
  6692.     document.querySelector('[data-cta=\"checkout_quote\"]')?.addEventListener('click', function() {
  6693.         alert('Génération de devis en cours de développement\\n\\nPack : ' + selectedPack + '\\nPrix : ' + selectedPackPrice + '€');
  6694.     });
  6695. });
  6697. // Copy to clipboard function
  6698. function copyToClipboard(elementId, button) {
  6699.     const element = document.getElementById(elementId);
  6700.     if (element) {
  6701.         const text = element.textContent;
  6702.         navigator.clipboard.writeText(text).then(() => {
  6703.             // Show success feedback
  6704.             const originalText = button.innerHTML;
  6705.             button.innerHTML = '<i class=\"bi bi-check\"></i> Copié !';
  6706.             button.classList.remove('btn-outline-primary');
  6707.             button.classList.add('btn-success');
  6708.             
  6709.             setTimeout(() => {
  6710.                 button.innerHTML = originalText;
  6711.                 button.classList.remove('btn-success');
  6712.                 button.classList.add('btn-outline-primary');
  6713.             }, 2000);
  6714.         }).catch(err => {
  6715.             console.error('Erreur copie:', err);
  6716.             alert('Impossible de copier. Copiez manuellement : ' + text);
  6717.         });
  6718.     }
  6719. }
  6721. // Gestion du formulaire grand volume
  6722. const grandVolumeForm = document.getElementById('grandVolumeForm');
  6723. const formMessage = document.getElementById('formMessage');
  6725. if (grandVolumeForm) {
  6726.   grandVolumeForm.addEventListener('submit', function(e) {
  6727.     e.preventDefault();
  6728.     
  6729.     // Désactiver le bouton pendant l'envoi
  6730.     const submitBtn = grandVolumeForm.querySelector('button[type=\"submit\"]');
  6731.     const originalText = submitBtn.innerHTML;
  6732.     submitBtn.disabled = true;
  6733.     submitBtn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Envoi en cours...';
  6734.     
  6735.     // Masquer les messages précédents
  6736.     formMessage.innerHTML = '';
  6737.     formMessage.className = 'mt-3';
  6738.     
  6739.     // Récupérer les données du formulaire
  6740.     const formData = new FormData(grandVolumeForm);
  6741.     
  6742.     // Envoyer la requête
  6743.     fetch('/contact/grand-volume', {
  6744.       method: 'POST',
  6745.       body: formData,
  6746.       headers: {
  6747.         'X-Requested-With': 'XMLHttpRequest'
  6748.       }
  6749.     })
  6750.     .then(response => response.json())
  6751.     .then(data => {
  6752.       if (data.success) {
  6753.         // Fermer le modal du formulaire
  6754.         const formModal = bootstrap.Modal.getInstance(document.getElementById('grandVolumeModal'));
  6755.         if (formModal) formModal.hide();
  6756.         
  6757.         // Réinitialiser le formulaire
  6758.         grandVolumeForm.reset();
  6759.         
  6760.         // Afficher le modal de succès
  6761.         const successModal = new bootstrap.Modal(document.getElementById('grandVolumeSuccessModal'));
  6762.         successModal.show();
  6763.       } else {
  6764.         formMessage.className = 'mt-3 alert alert-danger';
  6765.         formMessage.innerHTML = `
  6766.           <div class=\"d-flex align-items-center\">
  6767.             <i class=\"bi bi-exclamation-triangle-fill me-2 fs-5\"></i>
  6768.             <div>
  6769.               <strong>Erreur :</strong><br>
  6770.               \${data.message || 'Une erreur est survenue. Veuillez réessayer.'}
  6771.             </div>
  6772.           </div>
  6773.         `;
  6774.       }
  6775.     })
  6776.     .catch(error => {
  6777.       console.error('Erreur:', error);
  6778.       formMessage.className = 'mt-3 alert alert-danger';
  6779.       formMessage.innerHTML = `
  6780.         <div class=\"d-flex align-items-center\">
  6781.           <i class=\"bi bi-exclamation-triangle-fill me-2 fs-5\"></i>
  6782.           <div>
  6783.             <strong>Erreur :</strong><br>
  6784.             Une erreur est survenue lors de l'envoi. Veuillez réessayer plus tard.
  6785.           </div>
  6786.         </div>
  6787.       `;
  6788.     })
  6789.     .finally(() => {
  6790.       submitBtn.disabled = false;
  6791.       submitBtn.innerHTML = originalText;
  6792.     });
  6793.   });
  6794. }
  6795. </script>
  6797. <!-- MODAL FORMULAIRE GRAND VOLUME -->
  6798.   <!-- MODAL FORMULAIRE GRAND VOLUME -->
  6799.   <div class=\"modal fade\" id=\"grandVolumeModal\" tabindex=\"-1\" aria-labelledby=\"grandVolumeModalLabel\" aria-hidden=\"true\">
  6800.     <div class=\"modal-dialog modal-dialog-centered modal-lg\">
  6801.       <div class=\"modal-content\">
  6802.         <div class=\"modal-header border-0 pb-0\">
  6803.           <h5 class=\"modal-title w-100 text-center\" id=\"grandVolumeModalLabel\">
  6804.             <i class=\"bi bi-envelope me-2\"></i>Demande de devis - Grand volume (+25 séjours/an)
  6805.           </h5>
  6806.           <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"></button>
  6807.         </div>
  6808.         <div class=\"modal-body px-4 py-4\">
  6809.           <p class=\"text-center text-muted mb-4\">Remplissez ce formulaire et notre équipe vous contactera rapidement pour vous proposer une offre personnalisée.</p>
  6810.           
  6811.           <form id=\"grandVolumeForm\" method=\"post\" action=\"/contact/grand-volume\">
  6812.             <div class=\"row g-3\">
  6813.               <div class=\"col-md-6\">
  6814.                 <label for=\"nom_structure\" class=\"form-label\">Nom de la structure <span class=\"text-danger\">*</span></label>
  6815.                 <input type=\"text\" class=\"form-control\" id=\"nom_structure\" name=\"nom_structure\" required>
  6816.               </div>
  6817.               <div class=\"col-md-6\">
  6818.                 <label for=\"type_structure\" class=\"form-label\">Type de structure <span class=\"text-danger\">*</span></label>
  6819.                 <select class=\"form-select\" id=\"type_structure\" name=\"type_structure\" required>
  6820.                   <option value=\"\">Sélectionnez...</option>
  6821.                   <option value=\"ecole\">École</option>
  6822.                   <option value=\"centre_loisirs\">Centre de loisirs</option>
  6823.                   <option value=\"association\">Association</option>
  6824.                   <option value=\"voyagiste\">Voyagiste</option>
  6825.                   <option value=\"autre\">Autre</option>
  6826.                 </select>
  6827.               </div>
  6828.               <div class=\"col-md-6\">
  6829.                 <label for=\"nombre_sejours\" class=\"form-label\">Nombre de séjours par an <span class=\"text-danger\">*</span></label>
  6830.                 <input type=\"number\" class=\"form-control\" id=\"nombre_sejours\" name=\"nombre_sejours\" min=\"26\" required placeholder=\"Ex: 30, 50, 100...\">
  6831.                 <div class=\"form-text\">Minimum 26 séjours par an</div>
  6832.               </div>
  6833.               <div class=\"col-md-6\">
  6834.                 <label for=\"contact_email\" class=\"form-label\">Email <span class=\"text-danger\">*</span></label>
  6835.                 <input type=\"email\" class=\"form-control\" id=\"contact_email\" name=\"contact_email\" required>
  6836.               </div>
  6837.               <div class=\"col-md-6\">
  6838.                 <label for=\"contact_telephone\" class=\"form-label\">Téléphone <span class=\"text-danger\">*</span></label>
  6839.                 <input type=\"tel\" class=\"form-control\" id=\"contact_telephone\" name=\"contact_telephone\" required>
  6840.               </div>
  6841.               <div class=\"col-12\">
  6842.                 <label for=\"message\" class=\"form-label\">Message (optionnel)</label>
  6843.                 <textarea class=\"form-control\" id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Décrivez vos besoins spécifiques, vos contraintes, vos questions...\"></textarea>
  6844.               </div>
  6845.               <div class=\"col-12\">
  6846.                 <div class=\"form-check\">
  6847.                   <input class=\"form-check-input\" type=\"checkbox\" id=\"accept_rgpd\" name=\"accept_rgpd\" required>
  6848.                   <label class=\"form-check-label\" for=\"accept_rgpd\">
  6849.                     J'accepte que mes données soient utilisées pour me recontacter concernant cette demande de devis. <span class=\"text-danger\">*</span>
  6850.                   </label>
  6851.                 </div>
  6852.               </div>
  6853.             </div>
  6854.             <div id=\"formMessage\" class=\"mt-3\"></div>
  6855.             <div class=\"d-grid gap-2 mt-4\">
  6856.               <button type=\"submit\" class=\"btn btn-primary btn-lg\">
  6857.                 <i class=\"bi bi-send me-2\"></i>Envoyer la demande
  6858.               </button>
  6859.               <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Annuler</button>
  6860.             </div>
  6861.           </form>
  6862.         </div>
  6863.       </div>
  6864.     </div>
  6865.   </div>
  6867.   </body>
  6868. </html>
  6869.     </div>
  6870.   </div>
  6872.   </body>
  6873. </html>
  6874.     </div>
  6875.   </div>
  6877.   </body>
  6878. </html>
  6879.     </div>
  6880.   </div>
  6882.   </body>
  6883. </html>", "Accueil/PageAccueil.html.twig", "/var/www/5sur5sejour/templates/Accueil/PageAccueil.html.twig");
  6884.     }
  6885. }