templates/Accompagnateur/creation-simple_creer_sejour.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Créer un séjour — 39€ HT | 5sur5 Séjour</title>
  7.     <meta name="description" content="Créez un espace séjour professionnel. Prix unique 39€ HT, jusqu'à 45 enfants.">
  8.     
  9.     <link rel="shortcut icon" type="image/x-icon" href="/images/Logo.png">
  10.     <link rel="preconnect" href="https://fonts.googleapis.com">
  11.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  13.     <link href="{{ asset('Accueil/vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
  14.     <link href="{{ asset('Accueil/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
  15.     
  16.     <style>
  17.     :root {
  18.         --teal: #41A2AA;
  19.         --orange: #F56040;
  20.         --dark: #1a1a1a;
  21.         --gray: #687276;
  22.         --gray-light: #f8f9fa;
  23.         --border: #e9ecef;
  24.         --white: #ffffff;
  25.     }
  26.     
  27.     * { box-sizing: border-box; }
  28.     
  29.     body {
  30.         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  31.         color: var(--dark);
  32.         background: var(--white);
  33.         line-height: 1.6;
  34.         -webkit-font-smoothing: antialiased;
  35.     }
  36.     
  37.     /* ========== HEADER MINIMAL ========== */
  38.     .header-minimal {
  39.         position: sticky;
  40.         top: 0;
  41.         z-index: 100;
  42.         background: rgba(255,255,255,0.95);
  43.         backdrop-filter: blur(10px);
  44.         border-bottom: 1px solid var(--border);
  45.         padding: 16px 0;
  46.     }
  47.     
  48.     .header-minimal .container {
  49.         display: flex;
  50.         align-items: center;
  51.         justify-content: space-between;
  52.     }
  53.     
  54.     .header-logo {
  55.         height: 32px;
  56.     }
  57.     
  58.     .header-links {
  59.         display: flex;
  60.         align-items: center;
  61.         gap: 32px;
  62.     }
  63.     
  64.     .header-link {
  65.         font-size: 14px;
  66.         font-weight: 500;
  67.         color: var(--gray);
  68.         text-decoration: none;
  69.         transition: color 0.2s;
  70.     }
  71.     
  72.     .header-link:hover {
  73.         color: var(--dark);
  74.     }
  75.     
  76.     .header-cta {
  77.         font-size: 14px;
  78.         font-weight: 600;
  79.         color: var(--white);
  80.         background: var(--dark);
  81.         padding: 10px 20px;
  82.         border-radius: 8px;
  83.         text-decoration: none;
  84.         transition: all 0.2s;
  85.     }
  86.     
  87.     .header-cta:hover {
  88.         background: #333;
  89.         color: var(--white);
  90.     }
  91.     
  92.     /* ========== HERO ========== */
  93.     .hero {
  94.         padding: 80px 0 60px;
  95.         text-align: center;
  96.     }
  97.     
  98.     .hero-label {
  99.         display: inline-block;
  100.         font-size: 13px;
  101.         font-weight: 500;
  102.         color: var(--teal);
  103.         background: rgba(65, 162, 170, 0.1);
  104.         padding: 6px 14px;
  105.         border-radius: 20px;
  106.         margin-bottom: 24px;
  107.     }
  108.     
  109.     .hero-title {
  110.         font-size: 48px;
  111.         font-weight: 700;
  112.         color: var(--dark);
  113.         letter-spacing: -0.02em;
  114.         margin: 0 0 16px;
  115.         line-height: 1.1;
  116.     }
  117.     
  118.     .hero-subtitle {
  119.         font-size: 20px;
  120.         color: var(--gray);
  121.         max-width: 560px;
  122.         margin: 0 auto 40px;
  123.         font-weight: 400;
  124.     }
  125.     
  126.     .hero-cta {
  127.         display: inline-flex;
  128.         align-items: center;
  129.         gap: 8px;
  130.         font-size: 16px;
  131.         font-weight: 600;
  132.         color: var(--white);
  133.         background: var(--teal);
  134.         padding: 16px 32px;
  135.         border-radius: 10px;
  136.         text-decoration: none;
  137.         transition: all 0.2s;
  138.     }
  139.     
  140.     .hero-cta:hover {
  141.         background: #3a9199;
  142.         transform: translateY(-1px);
  143.         color: var(--white);
  144.     }
  145.     
  146.     /* ========== PRICE CARD ========== */
  147.     .price-section {
  148.         padding: 40px 0 80px;
  149.         background: var(--gray-light);
  150.     }
  151.     
  152.     .price-card {
  153.         max-width: 420px;
  154.         margin: 0 auto;
  155.         background: var(--white);
  156.         border: 1px solid var(--border);
  157.         border-radius: 16px;
  158.         padding: 40px;
  159.         text-align: center;
  160.     }
  161.     
  162.     .price-amount {
  163.         font-size: 56px;
  164.         font-weight: 700;
  165.         color: var(--dark);
  166.         letter-spacing: -0.02em;
  167.         line-height: 1;
  168.     }
  169.     
  170.     .price-amount span {
  171.         font-size: 24px;
  172.         font-weight: 500;
  173.     }
  174.     
  175.     .price-details {
  176.         font-size: 14px;
  177.         color: var(--gray);
  178.         margin-top: 8px;
  179.         margin-bottom: 32px;
  180.     }
  181.     
  182.     .price-features {
  183.         text-align: left;
  184.         margin: 0;
  185.         padding: 0;
  186.         list-style: none;
  187.     }
  188.     
  189.     .price-features li {
  190.         display: flex;
  191.         align-items: flex-start;
  192.         gap: 12px;
  193.         padding: 12px 0;
  194.         font-size: 15px;
  195.         color: var(--dark);
  196.         border-bottom: 1px solid var(--border);
  197.     }
  198.     
  199.     .price-features li:last-child {
  200.         border-bottom: none;
  201.     }
  202.     
  203.     .price-features li::before {
  204.         content: '✓';
  205.         color: var(--teal);
  206.         font-weight: 600;
  207.         flex-shrink: 0;
  208.     }
  209.     
  210.     /* ========== FEATURES ========== */
  211.     .features {
  212.         padding: 80px 0;
  213.     }
  214.     
  215.     .features-grid {
  216.         display: grid;
  217.         grid-template-columns: repeat(3, 1fr);
  218.         gap: 40px;
  219.     }
  220.     
  221.     .feature {
  222.         text-align: center;
  223.     }
  224.     
  225.     .feature-icon {
  226.         width: 48px;
  227.         height: 48px;
  228.         background: var(--gray-light);
  229.         border-radius: 12px;
  230.         display: flex;
  231.         align-items: center;
  232.         justify-content: center;
  233.         margin: 0 auto 16px;
  234.     }
  235.     
  236.     .feature-icon i {
  237.         font-size: 22px;
  238.         color: var(--teal);
  239.     }
  240.     
  241.     .feature-title {
  242.         font-size: 16px;
  243.         font-weight: 600;
  244.         color: var(--dark);
  245.         margin: 0 0 8px;
  246.     }
  247.     
  248.     .feature-text {
  249.         font-size: 14px;
  250.         color: var(--gray);
  251.         margin: 0;
  252.     }
  253.     
  254.     /* ========== FORM ========== */
  255.     .form-section {
  256.         padding: 80px 0;
  257.         background: var(--gray-light);
  258.     }
  259.     
  260.     .form-card {
  261.         max-width: 680px;
  262.         margin: 0 auto;
  263.         background: var(--white);
  264.         border: 1px solid var(--border);
  265.         border-radius: 16px;
  266.         padding: 48px;
  267.     }
  268.     
  269.     .form-header {
  270.         text-align: center;
  271.         margin-bottom: 40px;
  272.     }
  273.     
  274.     .form-title {
  275.         font-size: 28px;
  276.         font-weight: 700;
  277.         color: var(--dark);
  278.         margin: 0 0 8px;
  279.     }
  280.     
  281.     .form-subtitle {
  282.         font-size: 15px;
  283.         color: var(--gray);
  284.         margin: 0;
  285.     }
  286.     
  287.     .form-section-label {
  288.         font-size: 12px;
  289.         font-weight: 600;
  290.         color: var(--teal);
  291.         text-transform: uppercase;
  292.         letter-spacing: 0.05em;
  293.         margin-bottom: 16px;
  294.         padding-top: 24px;
  295.     }
  296.     
  297.     .form-section-label:first-of-type {
  298.         padding-top: 0;
  299.     }
  300.     
  301.     .form-label {
  302.         font-size: 14px;
  303.         font-weight: 500;
  304.         color: var(--dark);
  305.         margin-bottom: 6px;
  306.     }
  307.     
  308.     .form-control {
  309.         padding: 12px 14px;
  310.         font-size: 15px;
  311.         border: 1px solid var(--border);
  312.         border-radius: 8px;
  313.         transition: border-color 0.2s, box-shadow 0.2s;
  314.     }
  315.     
  316.     .form-control:focus {
  317.         border-color: var(--teal);
  318.         box-shadow: 0 0 0 3px rgba(65, 162, 170, 0.1);
  319.         outline: none;
  320.     }
  321.     
  322.     .form-control.is-invalid {
  323.         border-color: #dc3545;
  324.     }
  325.     
  326.     .form-divider {
  327.         height: 1px;
  328.         background: var(--border);
  329.         margin: 32px 0;
  330.     }
  331.     
  332.     /* Payment choice */
  333.     .payment-choice {
  334.         background: var(--gray-light);
  335.         border-radius: 12px;
  336.         padding: 24px;
  337.         margin: 24px 0;
  338.     }
  339.     
  340.     .payment-option {
  341.         display: flex;
  342.         align-items: flex-start;
  343.         gap: 12px;
  344.         padding: 16px;
  345.         background: var(--white);
  346.         border: 1px solid var(--border);
  347.         border-radius: 8px;
  348.         margin-bottom: 12px;
  349.         cursor: pointer;
  350.         transition: border-color 0.2s;
  351.     }
  352.     
  353.     .payment-option:last-child {
  354.         margin-bottom: 0;
  355.     }
  356.     
  357.     .payment-option:hover {
  358.         border-color: var(--teal);
  359.     }
  360.     
  361.     .payment-option.selected {
  362.         border-color: var(--teal);
  363.         background: rgba(65, 162, 170, 0.03);
  364.     }
  365.     
  366.     .payment-option-content {
  367.         flex: 1;
  368.     }
  369.     
  370.     .payment-option-title {
  371.         font-size: 15px;
  372.         font-weight: 600;
  373.         color: var(--dark);
  374.         margin: 0 0 2px;
  375.     }
  376.     
  377.     .payment-option-text {
  378.         font-size: 13px;
  379.         color: var(--gray);
  380.         margin: 0;
  381.     }
  382.     
  383.     .payment-badge {
  384.         font-size: 12px;
  385.         font-weight: 600;
  386.         color: var(--white);
  387.         background: var(--teal);
  388.         padding: 4px 10px;
  389.         border-radius: 4px;
  390.     }
  391.     
  392.     /* Submit */
  393.     .btn-submit {
  394.         width: 100%;
  395.         padding: 16px;
  396.         font-size: 16px;
  397.         font-weight: 600;
  398.         color: var(--white);
  399.         background: var(--teal);
  400.         border: none;
  401.         border-radius: 10px;
  402.         cursor: pointer;
  403.         transition: background 0.2s;
  404.         margin-top: 24px;
  405.     }
  406.     
  407.     .btn-submit:hover {
  408.         background: #3a9199;
  409.     }
  410.     
  411.     .form-footer {
  412.         display: flex;
  413.         justify-content: center;
  414.         gap: 24px;
  415.         margin-top: 20px;
  416.         font-size: 13px;
  417.         color: var(--gray);
  418.     }
  419.     
  420.     .form-footer span {
  421.         display: flex;
  422.         align-items: center;
  423.         gap: 6px;
  424.     }
  425.     
  426.     /* ========== TRUST ========== */
  427.     .trust {
  428.         padding: 60px 0;
  429.         text-align: center;
  430.     }
  431.     
  432.     .trust-label {
  433.         font-size: 13px;
  434.         color: var(--gray);
  435.         margin-bottom: 24px;
  436.     }
  437.     
  438.     .trust-stats {
  439.         display: flex;
  440.         justify-content: center;
  441.         gap: 64px;
  442.     }
  443.     
  444.     .trust-stat {
  445.         text-align: center;
  446.     }
  447.     
  448.     .trust-stat-value {
  449.         font-size: 32px;
  450.         font-weight: 700;
  451.         color: var(--dark);
  452.     }
  453.     
  454.     .trust-stat-label {
  455.         font-size: 14px;
  456.         color: var(--gray);
  457.     }
  458.     
  459.     /* ========== FAQ ========== */
  460.     .faq {
  461.         padding: 80px 0;
  462.         background: var(--gray-light);
  463.     }
  464.     
  465.     .faq-header {
  466.         text-align: center;
  467.         margin-bottom: 48px;
  468.     }
  469.     
  470.     .faq-title {
  471.         font-size: 28px;
  472.         font-weight: 700;
  473.         color: var(--dark);
  474.         margin: 0;
  475.     }
  476.     
  477.     .faq-list {
  478.         max-width: 640px;
  479.         margin: 0 auto;
  480.     }
  481.     
  482.     .faq-item {
  483.         background: var(--white);
  484.         border: 1px solid var(--border);
  485.         border-radius: 10px;
  486.         margin-bottom: 12px;
  487.         overflow: hidden;
  488.     }
  489.     
  490.     .faq-question {
  491.         width: 100%;
  492.         padding: 20px 24px;
  493.         font-size: 15px;
  494.         font-weight: 600;
  495.         color: var(--dark);
  496.         background: transparent;
  497.         border: none;
  498.         text-align: left;
  499.         cursor: pointer;
  500.         display: flex;
  501.         justify-content: space-between;
  502.         align-items: center;
  503.     }
  504.     
  505.     .faq-question::after {
  506.         content: '+';
  507.         font-size: 20px;
  508.         color: var(--gray);
  509.         transition: transform 0.2s;
  510.     }
  511.     
  512.     .faq-question[aria-expanded="true"]::after {
  513.         transform: rotate(45deg);
  514.     }
  515.     
  516.     .faq-answer {
  517.         padding: 0 24px 20px;
  518.         font-size: 14px;
  519.         color: var(--gray);
  520.         line-height: 1.7;
  521.     }
  522.     
  523.     /* ========== FOOTER ========== */
  524.     .footer {
  525.         padding: 48px 0;
  526.         border-top: 1px solid var(--border);
  527.     }
  528.     
  529.     .footer-content {
  530.         display: flex;
  531.         justify-content: space-between;
  532.         align-items: center;
  533.     }
  534.     
  535.     .footer-logo {
  536.         height: 28px;
  537.         opacity: 0.6;
  538.     }
  539.     
  540.     .footer-links {
  541.         display: flex;
  542.         gap: 24px;
  543.     }
  544.     
  545.     .footer-link {
  546.         font-size: 13px;
  547.         color: var(--gray);
  548.         text-decoration: none;
  549.     }
  550.     
  551.     .footer-link:hover {
  552.         color: var(--dark);
  553.     }
  554.     
  555.     .footer-copy {
  556.         font-size: 13px;
  557.         color: var(--gray);
  558.     }
  559.     
  560.     /* ========== RESPONSIVE ========== */
  561.     @media (max-width: 768px) {
  562.         .hero-title { font-size: 32px; }
  563.         .hero-subtitle { font-size: 17px; }
  564.         .features-grid { grid-template-columns: 1fr; gap: 32px; }
  565.         .trust-stats { flex-direction: column; gap: 24px; }
  566.         .form-card { padding: 32px 24px; }
  567.         .header-links { display: none; }
  568.         .footer-content { flex-direction: column; gap: 24px; text-align: center; }
  569.         .footer-links { flex-wrap: wrap; justify-content: center; }
  570.     }
  571.     
  572.     /* Hidden fields */
  573.     .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  574.     </style>
  575. </head>
  576. <body>
  578. <!-- HEADER MINIMAL -->
  579. <header class="header-minimal">
  580.     <div class="container">
  581.         <a href="{{ path('page_Accueil') }}">
  582.             <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" class="header-logo">
  583.         </a>
  584.         <div class="header-links">
  585.             <a href="{{ path('boite_vocale') }}" class="header-link">Boîte vocale</a>
  586.             <a href="{{ path('Besoindaide_5sur5_accueil') }}" class="header-link">Aide</a>
  587.             <a href="{{ path('app_back_Acommpa') }}" class="header-cta">Connexion</a>
  588.         </div>
  589.     </div>
  590. </header>
  592. <!-- HERO -->
  593. <section class="hero">
  594.     <div class="container">
  595.         <span class="hero-label">Création simple</span>
  596.         <h1 class="hero-title">Créez un espace séjour professionnel</h1>
  597.         <p class="hero-subtitle">Partagez photos et vidéos avec les familles. Prix unique, sans surprise.</p>
  598.         <a href="#form" class="hero-cta">
  599.             Créer mon séjour — 39€ HT
  600.         </a>
  601.     </div>
  602. </section>
  604. <!-- PRICE CARD -->
  605. <section class="price-section">
  606.     <div class="container">
  607.         <div class="price-card">
  608.             <div class="price-amount">39<span>€ HT</span></div>
  609.             <p class="price-details">Séjour jusqu'à 45 enfants — sans engagement</p>
  610.             
  611.             <ul class="price-features">
  612.                 <li>Conçu pour les séjours jusqu'à 45 enfants</li>
  613.                 <li>Photos, vidéos et messages illimités</li>
  614.                 <li>Hébergement sécurisé 100% France</li>
  615.                 <li>Boîte vocale web incluse</li>
  616.                 <li>Accès accompagnateurs illimités</li>
  617.             </ul>
  618.         </div>
  619.     </div>
  620. </section>
  622. <!-- FEATURES -->
  623. <section class="features">
  624.     <div class="container">
  625.         <div class="features-grid">
  626.             <div class="feature">
  627.                 <div class="feature-icon"><i class="bi bi-shield-check"></i></div>
  628.                 <h3 class="feature-title">Sécurisé</h3>
  629.                 <p class="feature-text">Données hébergées en France, conformité RGPD</p>
  630.             </div>
  631.             <div class="feature">
  632.                 <div class="feature-icon"><i class="bi bi-phone"></i></div>
  633.                 <h3 class="feature-title">Simple</h3>
  634.                 <p class="feature-text">Publiez depuis votre téléphone en quelques secondes</p>
  635.             </div>
  636.             <div class="feature">
  637.                 <div class="feature-icon"><i class="bi bi-people"></i></div>
  638.                 <h3 class="feature-title">Illimité</h3>
  639.                 <p class="feature-text">Autant d'accompagnateurs et de parents que nécessaire</p>
  640.             </div>
  641.         </div>
  642.     </div>
  643. </section>
  645. <!-- FORM -->
  646. <section class="form-section" id="form">
  647.     <div class="container">
  648.         <div class="form-card">
  649.             <div class="form-header">
  650.                 <h2 class="form-title">Créer mon espace séjour</h2>
  651.                 <p class="form-subtitle">Remplissez ce formulaire, votre séjour sera prêt en quelques minutes</p>
  652.             </div>
  653.             
  654.             <form method="post" action="{{ path('accomp_register') }}" novalidate id="creationSejourForm">
  655.                 <input type="hidden" name="type_user" id="type_user_creation" value="PE">
  656.                 <input type="hidden" name="idUser" value="PE">
  657.                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  658.                 <input type="hidden" name="payer" id="payer_type" value="parents">
  660.                 <!-- Coordonnées -->
  661.                 <div class="form-section-label">Vos coordonnées</div>
  662.                 
  663.                 <div class="row g-3">
  664.                     <div class="col-md-6">
  665.                         <label class="form-label">Nom <span class="text-danger">*</span></label>
  666.                         <input type="text" class="form-control" id="nomAccompagnature" name="nom_acc" required>
  667.                     </div>
  668.                     <div class="col-md-6">
  669.                         <label class="form-label">Prénom <span class="text-danger">*</span></label>
  670.                         <input type="text" class="form-control" id="prenomAccompagnature" name="prenom_acc" required>
  671.                     </div>
  672.                     <div class="col-md-6">
  673.                         <label class="form-label">Email <span class="text-danger">*</span></label>
  674.                         <input type="email" class="form-control" id="mail" name="email" required>
  675.                         <p style="display:none;color:#dc3545;font-size:13px;margin-top:4px;" id="eroor">Email déjà utilisé</p>
  676.                         <div id="notification" style="display:none;color:#dc3545;font-size:13px;margin-top:4px;">Email invalide</div>
  677.                     </div>
  678.                     <div class="col-md-6">
  679.                         <label class="form-label">Téléphone <span class="text-danger">*</span></label>
  680.                         <input type="text" class="form-control masktelph" id="NumTelAcc" name="phone_acc" required>
  681.                     </div>
  682.                     <div class="col-md-6">
  683.                         <label class="form-label">Fonction</label>
  684.                         <select class="form-control" id="fonction" name="fonction">
  685.                             <option value="">Sélectionner</option>
  686.                             {% for fct in listeFonctions %}
  687.                             <option value="{{ fct.id }}">{{ fct.name }}</option>
  688.                             {% endfor %}
  689.                         </select>
  690.                     </div>
  691.                 </div>
  693.                 <div class="form-divider"></div>
  695.                 <!-- Structure -->
  696.                 <div class="form-section-label">Structure organisatrice</div>
  697.                 
  698.                 <div class="row g-3">
  699.                     <div class="col-md-6">
  700.                         <label class="form-label">Nom de la structure</label>
  701.                         <input type="text" class="form-control" id="etablisment" name="etablisment">
  702.                     </div>
  703.                     <div class="col-md-6">
  704.                         <label class="form-label">Ville</label>
  705.                         <input type="text" class="form-control" id="villeetablisment" name="villeetablisment">
  706.                     </div>
  707.                     <div class="col-md-8">
  708.                         <label class="form-label">Adresse</label>
  709.                         <input type="text" class="form-control" id="adressetablisment" name="adressetablisment">
  710.                     </div>
  711.                     <div class="col-md-4">
  712.                         <label class="form-label">Code postal</label>
  713.                         <input type="text" class="form-control masktetcode" id="CODEpOSTALetablisment" name="CODEpOSTALetablisment">
  714.                     </div>
  715.                 </div>
  717.                 <div class="form-divider"></div>
  719.                 <!-- Séjour -->
  720.                 <div class="form-section-label">Informations du séjour</div>
  721.                 
  722.                 <div id="accompSeulSejour">
  723.                     <div class="row g-3">
  724.                         <div class="col-md-6">
  725.                             <label class="form-label">Thème du séjour <span class="text-danger">*</span></label>
  726.                             <input type="text" id="themeSejour" name="theme_sejour" class="form-control" required>
  727.                         </div>
  728.                         <div class="col-md-6">
  729.                             <label class="form-label">Nombre de participants</label>
  730.                             <input type="number" min="1" max="45" id="NbEnfant" name="NbEnfant" class="form-control">
  731.                         </div>
  732.                         <div class="col-md-8">
  733.                             <label class="form-label">Adresse du séjour</label>
  734.                             <input type="text" id="AddresseSejour" name="adress_sejour" class="form-control">
  735.                         </div>
  736.                         <div class="col-md-4">
  737.                             <label class="form-label">Code postal</label>
  738.                             <input type="text" id="Codeposte" name="codePostal" class="form-control masktetcode">
  739.                         </div>
  740.                         <div class="col-md-6">
  741.                             <label class="form-label">Pays <span class="text-danger">*</span></label>
  742.                             <select id="selectPays" class="form-control" name="pays" required>
  743.                                 <option value="">Choisir</option>
  744.                                 <option value="France" selected>France</option>
  745.                                 <option value="Belgique">Belgique</option>
  746.                                 <option value="Suisse">Suisse</option>
  747.                                 <option value="Espagne">Espagne</option>
  748.                                 <option value="Italie">Italie</option>
  749.                                 <option value="Allemagne">Allemagne</option>
  750.                                 <option value="Autre">Autre</option>
  751.                             </select>
  752.                         </div>
  753.                         <div class="col-md-6">
  754.                             <label class="form-label">Ville du séjour</label>
  755.                             <input type="text" id="VilleSejour" name="ville" class="form-control">
  756.                         </div>
  757.                         <div class="col-md-6">
  758.                             <label class="form-label">Date de début <span class="text-danger">*</span></label>
  759.                             <input type="date" id="date-range200" name="date_debut_sejour" class="form-control" required>
  760.                         </div>
  761.                         <div class="col-md-6">
  762.                             <label class="form-label">Date de fin <span class="text-danger">*</span></label>
  763.                             <input type="date" id="date-range201" name="date_fin_sejour" class="form-control" required>
  764.                         </div>
  765.                         <div class="col-12">
  766.                             <label class="form-label">Âge des enfants</label>
  767.                             <select id="selectAgeGroupe" class="form-control" name="age_dugroupe_sejour">
  768.                                 <option value="">Sélectionner</option>
  769.                                 <option value="entre 3 et 5">3 à 5 ans</option>
  770.                                 <option value="entre 5 et 8">5 à 8 ans</option>
  771.                                 <option value="entre 8 et 10">8 à 10 ans</option>
  772.                                 <option value="entre 10 et 15ans">10 à 15 ans</option>
  773.                                 <option value="Plus de 15ans">Plus de 15 ans</option>
  774.                             </select>
  775.                         </div>
  776.                     </div>
  777.                     <div id="dom-id"></div>
  778.                 </div>
  780.                 <input type="hidden" id="srcLogo" name="srcLogo">
  782.                 <div class="form-divider"></div>
  784.                 <!-- Payment choice -->
  785.                 <div class="form-section-label">Paiement</div>
  786.                 
  787.                 <div class="payment-choice">
  788.                     <label class="payment-option selected" for="payer-structure">
  789.                         <input class="form-check-input" type="radio" name="payer" id="payer-structure" value="structure" checked style="margin-top:3px;">
  790.                         <div class="payment-option-content">
  791.                             <p class="payment-option-title">La structure prend en charge</p>
  792.                             <p class="payment-option-text">Paiement unique de 39€ HT</p>
  793.                         </div>
  794.                         <span class="payment-badge">39€ HT</span>
  795.                     </label>
  796.                     
  797.                     <label class="payment-option" for="payer-parents">
  798.                         <input class="form-check-input" type="radio" name="payer" id="payer-parents" value="parents" style="margin-top:3px;">
  799.                         <div class="payment-option-content">
  800.                             <p class="payment-option-title">Les parents paient</p>
  801.                             <p class="payment-option-text">Création gratuite</p>
  802.                         </div>
  803.                     </label>
  804.                 </div>
  806.                 <!-- Billing (structure only) -->
  807.                 <div id="structure-billing-fields" class="d-none">
  808.                     <div class="form-section-label">Facturation</div>
  809.                     <div class="row g-3 mb-3">
  810.                         <div class="col-md-6">
  811.                             <label class="form-label">Email facturation <span class="text-danger">*</span></label>
  812.                             <input type="email" class="form-control" id="billing_email" name="billing_email">
  813.                         </div>
  814.                         <div class="col-md-6">
  815.                             <label class="form-label">Contact facturation <span class="text-danger">*</span></label>
  816.                             <input type="text" class="form-control" id="billing_contact" name="billing_contact">
  817.                         </div>
  818.                     </div>
  819.                     
  820.                     <div class="row g-3">
  821.                         <div class="col-12">
  822.                             <div class="form-check">
  823.                                 <input class="form-check-input" type="radio" name="payment_method_structure" id="payment_carte" value="carte" checked>
  824.                                 <label class="form-check-label" for="payment_carte">Carte bancaire — activation immédiate</label>
  825.                             </div>
  826.                         </div>
  827.                         <div class="col-12">
  828.                             <div class="form-check">
  829.                                 <input class="form-check-input" type="radio" name="payment_method_structure" id="payment_virement" value="virement">
  830.                                 <label class="form-check-label" for="payment_virement">Virement bancaire — activation sous 48h</label>
  831.                             </div>
  832.                         </div>
  833.                     </div>
  834.                 </div>
  836.                 <button type="submit" class="btn-submit" id="btnCreationAccoSejour">
  837.                     Créer mon espace séjour
  838.                 </button>
  839.                 
  840.                 <div class="form-footer">
  841.                     <span><i class="bi bi-shield-check"></i> Paiement sécurisé</span>
  842.                     <span><i class="bi bi-geo-alt"></i> Données en France</span>
  843.                 </div>
  844.             </form>
  845.         </div>
  846.     </div>
  847. </section>
  849. <!-- TRUST -->
  850. <section class="trust">
  851.     <div class="container">
  852.         <p class="trust-label">Ils nous font confiance depuis 2018</p>
  853.         <div class="trust-stats">
  854.             <div class="trust-stat">
  855.                 <div class="trust-stat-value">500+</div>
  856.                 <div class="trust-stat-label">Écoles</div>
  857.             </div>
  858.             <div class="trust-stat">
  859.                 <div class="trust-stat-value">100K+</div>
  860.                 <div class="trust-stat-label">Familles</div>
  861.             </div>
  862.             <div class="trust-stat">
  863.                 <div class="trust-stat-value">4.7/5</div>
  864.                 <div class="trust-stat-label">Note moyenne</div>
  865.             </div>
  866.         </div>
  867.     </div>
  868. </section>
  870. <!-- FAQ -->
  871. <section class="faq">
  872.     <div class="container">
  873.         <div class="faq-header">
  874.             <h2 class="faq-title">Questions fréquentes</h2>
  875.         </div>
  876.         
  877.         <div class="faq-list">
  878.             <div class="faq-item">
  879.                 <button class="faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="false">
  880.                     Pour combien d'enfants ?
  881.                 </button>
  882.                 <div class="collapse" id="faq1">
  883.                     <div class="faq-answer">
  884.                         La création simple est conçue pour les séjours jusqu'à 45 enfants. Idéal pour les classes vertes et voyages scolaires.
  885.                     </div>
  886.                 </div>
  887.             </div>
  888.             
  889.             <div class="faq-item">
  890.                 <button class="faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false">
  891.                     Que comprend le prix ?
  892.                 </button>
  893.                 <div class="collapse" id="faq2">
  894.                     <div class="faq-answer">
  895.                         39€ HT inclut : galerie photos/vidéos illimitée, boîte vocale web, accès accompagnateurs illimités, hébergement sécurisé en France.
  896.                     </div>
  897.                 </div>
  898.             </div>
  899.             
  900.             <div class="faq-item">
  901.                 <button class="faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false">
  902.                     Mes données sont-elles sécurisées ?
  903.                 </button>
  904.                 <div class="collapse" id="faq3">
  905.                     <div class="faq-answer">
  906.                         Oui. Données hébergées en France, conformité RGPD, chiffrement SSL, sauvegardes quotidiennes.
  907.                     </div>
  908.                 </div>
  909.             </div>
  910.         </div>
  911.     </div>
  912. </section>
  914. <!-- FOOTER -->
  915. <footer class="footer">
  916.     <div class="container">
  917.         <div class="footer-content">
  918.             <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" class="footer-logo">
  919.             <div class="footer-links">
  920.                 <a href="{{ path('Mentionlegale_5sur5') }}" class="footer-link">Mentions légales</a>
  921.                 <a href="{{ path('Conditons_generales_5sur5') }}" class="footer-link">CGU</a>
  922.                 <a href="{{ path('Politique_Confidentialite_5sur5') }}" class="footer-link">Confidentialité</a>
  923.                 <a href="{{ path('Besoindaide_5sur5_accueil') }}" class="footer-link">Aide</a>
  924.             </div>
  925.             <span class="footer-copy">© 2025 5sur5 Séjour</span>
  926.         </div>
  927.     </div>
  928. </footer>
  930. <!-- Scripts -->
  931. <script src="{{ asset('Accueil/vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>
  932. <script src="{{ asset('js/create-flow.js') }}"></script>
  934. <script>
  935. document.addEventListener('DOMContentLoaded', function() {
  936.     const options = document.querySelectorAll('.payment-option');
  937.     const structureRadio = document.getElementById('payer-structure');
  938.     const parentsRadio = document.getElementById('payer-parents');
  939.     const typeField = document.getElementById('type_user_creation');
  940.     const billingFields = document.getElementById('structure-billing-fields');
  941.     
  942.     options.forEach(opt => {
  943.         opt.addEventListener('click', function() {
  944.             options.forEach(o => o.classList.remove('selected'));
  945.             this.classList.add('selected');
  946.             this.querySelector('input[type="radio"]').checked = true;
  947.             updateType();
  948.         });
  949.     });
  950.     
  951.     function updateType() {
  952.         typeField.value = structureRadio.checked ? 'PF' : 'EP';
  953.         document.getElementById('payer_type').value = structureRadio.checked ? 'structure' : 'parents';
  954.         
  955.         if (structureRadio.checked) {
  956.             billingFields.classList.remove('d-none');
  957.             document.getElementById('billing_email').required = true;
  958.             document.getElementById('billing_contact').required = true;
  959.         } else {
  960.             billingFields.classList.add('d-none');
  961.             document.getElementById('billing_email').required = false;
  962.             document.getElementById('billing_contact').required = false;
  963.         }
  964.     }
  965.     
  966.     updateType();
  967.     
  968.     // Masks
  969.     document.querySelectorAll('.masktelph').forEach(el => {
  970.         el.addEventListener('input', function() {
  971.             let v = this.value.replace(/\D/g, '').slice(0, 10);
  972.             let f = '';
  973.             for (let i = 0; i < v.length; i++) {
  974.                 if (i > 0 && i % 2 === 0) f += ' ';
  975.                 f += v[i];
  976.             }
  977.             this.value = f;
  978.         });
  979.     });
  980.     
  981.     document.querySelectorAll('.masktetcode').forEach(el => {
  982.         el.addEventListener('input', function() {
  983.             this.value = this.value.replace(/\D/g, '').slice(0, 5);
  984.         });
  985.     });
  986. });
  987. </script>
  988. </body>
  989. </html>