templates/components/drawer-sejour.html.twig line 1

Open in your IDE?
  1. {# 
  2.     Drawer "Créer mon espace séjour" - Premium Flow
  3.     Stripe-level UX · Conversion max · Sans pitié
  4. #}
  6. <!-- Overlay -->
  7. <div class="s5-drawer-overlay" id="s5DrawerOverlay"></div>
  9. <!-- Drawer -->
  10. <div class="s5-drawer" id="s5Drawer" role="dialog" aria-modal="true" aria-labelledby="s5DrawerTitle">
  11.     
  12.     <!-- Header (fixed) -->
  13.     <header class="s5-drawer-header">
  14.         <div class="s5-drawer-header-content">
  15.             <div class="s5-drawer-step-badge" id="s5StepBadge">Étape 1/2</div>
  16.             <h2 class="s5-drawer-title" id="s5DrawerTitle">Créez votre séjour</h2>
  17.             <p class="s5-drawer-subtitle">Activation sans frais pour votre structure. Les accès familles peuvent être proposés en option… ou offerts par vous.</p>
  18.         </div>
  19.         <button type="button" class="s5-drawer-close" id="s5DrawerClose" aria-label="Fermer">
  20.             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  21.                 <path d="M18 6L6 18M6 6l12 12"/>
  22.             </svg>
  23.         </button>
  24.     </header>
  26.     <!-- Body (scrollable) -->
  27.     <div class="s5-drawer-body" id="s5DrawerBody">
  28.         
  29.         <!-- STEP 1 -->
  30.         <div class="s5-step" data-step="1" id="s5Step1">
  31.             
  32.             <!-- Profile Selector -->
  33.             <div class="s5-section">
  34.                 <label class="s5-section-label">Vous êtes :</label>
  35.                 <div class="s5-pills" role="radiogroup" aria-label="Type de structure">
  36.                     <button type="button" class="s5-pill active" data-profile="ecole_publique" role="radio" aria-checked="true">
  37.                         École publique
  38.                     </button>
  39.                     <button type="button" class="s5-pill" data-profile="ecole_privee" role="radio" aria-checked="false">
  40.                         École privée
  41.                     </button>
  42.                     <button type="button" class="s5-pill" data-profile="organisme" role="radio" aria-checked="false">
  43.                         Organisme / Mairie
  44.                     </button>
  45.                     <button type="button" class="s5-pill" data-profile="autre" role="radio" aria-checked="false">
  46.                         Autre
  47.                     </button>
  48.                 </div>
  49.             </div>
  51.             <!-- Free notice for public schools -->
  52.             <div class="s5-free-notice" id="s5FreeNotice">
  53.                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  54.                     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
  55.                     <polyline points="22 4 12 14.01 9 11.01"/>
  56.                 </svg>
  57.                 <span>Soutien aux écoles publiques : service offert</span>
  58.             </div>
  60.             <!-- Plans -->
  61.             <div class="s5-section">
  62.                 <label class="s5-section-label">Choisissez votre formule</label>
  63.                 <div class="s5-plans">
  64.                     
  65.                     <!-- Plan: Séjour unique -->
  66.                     <button type="button" class="s5-plan-card active" data-plan="sejour_unique" data-base-price="0" aria-pressed="true">
  67.                         <div class="s5-plan-header">
  68.                             <span class="s5-plan-name">Séjour unique</span>
  69.                         </div>
  70.                         <ul class="s5-plan-features">
  71.                             <li>
  72.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  73.                                 Photos & vidéos illimitées
  74.                             </li>
  75.                             <li>
  76.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  77.                                 Localisation en temps réel
  78.                             </li>
  79.                             <li>
  80.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  81.                                 Jusqu'à 45 enfants
  82.                             </li>
  83.                         </ul>
  84.                         <div class="s5-plan-check">
  85.                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
  86.                         </div>
  87.                     </button>
  89.                     <!-- Plan: Pack annuel -->
  90.                     <button type="button" class="s5-plan-card" data-plan="pack_annuel" data-base-price="490" aria-pressed="false">
  91.                         <div class="s5-plan-badge">Recommandé</div>
  92.                         <div class="s5-plan-header">
  93.                             <span class="s5-plan-name">Pack annuel</span>
  94.                         </div>
  95.                         <ul class="s5-plan-features">
  96.                             <li>
  97.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  98.                                 Jusqu'à 25 séjours / an
  99.                             </li>
  100.                             <li>
  101.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  102.                                 Boîte vocale incluse
  103.                             </li>
  104.                             <li>
  105.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  106.                                 Support prioritaire
  107.                             </li>
  108.                         </ul>
  109.                         <div class="s5-plan-check">
  110.                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
  111.                         </div>
  112.                     </button>
  114.                 </div>
  115.             </div>
  117.             <!-- Enterprise link -->
  118.             <a href="/Accueil5sur5/devenir_partenaire" class="s5-enterprise-link">
  119.                 Plus de 25 séjours/an ? <span>Nous contacter →</span>
  120.             </a>
  122.         </div>
  124.         <!-- STEP 2 -->
  125.         <div class="s5-step" data-step="2" id="s5Step2" style="display:none;">
  126.             
  127.             <div class="s5-section">
  128.                 <label class="s5-section-label">Options</label>
  129.                 
  130.                 <!-- Voice Option -->
  131.                 <div class="s5-option-card" id="s5VoiceOption">
  132.                     <div class="s5-option-content">
  133.                         <div class="s5-option-icon">
  134.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  135.                                 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
  136.                             </svg>
  137.                         </div>
  138.                         <div class="s5-option-text">
  139.                             <span class="s5-option-title">Boîte vocale téléphonique</span>
  140.                             <span class="s5-option-desc">À chaque message vocal publié, les parents reçoivent un appel.</span>
  141.                         </div>
  142.                         <div class="s5-option-right">
  143.                             <label class="s5-toggle">
  144.                                 <input type="checkbox" id="s5VoiceToggle" aria-label="Ajouter boîte vocale">
  145.                                 <span class="s5-toggle-slider"></span>
  146.                             </label>
  147.                         </div>
  148.                     </div>
  149.                     <div class="s5-option-tiers" id="s5VoiceTiers" style="display:none;">
  150.                         <button type="button" class="s5-tier active" data-tier="35" data-price="40">
  151.                             <span class="s5-tier-label">Jusqu'à 35 enfants</span>
  152.                         </button>
  153.                         <button type="button" class="s5-tier" data-tier="70" data-price="70">
  154.                             <span class="s5-tier-label">Jusqu'à 70 enfants</span>
  155.                         </button>
  156.                     </div>
  157.                 </div>
  159.             </div>
  161.             <!-- Summary card -->
  162.             <div class="s5-summary-card">
  163.                 <div class="s5-summary-row">
  164.                     <span>Formule</span>
  165.                     <span id="s5SummaryPlan">Séjour unique</span>
  166.                 </div>
  167.                 <div class="s5-summary-row" id="s5SummaryVoiceRow" style="display:none;">
  168.                     <span>Boîte vocale</span>
  169.                     <span id="s5SummaryVoice">Activée</span>
  170.                 </div>
  171.             </div>
  173.         </div>
  175.     </div>
  177.     <!-- Footer (sticky) -->
  178.     <footer class="s5-drawer-footer">
  179.         <div class="s5-footer-recap">
  180.             <span id="s5FooterRecap">Séjour unique</span>
  181.             <span class="s5-footer-total" id="s5FooterTotal">Activation gratuite</span>
  182.         </div>
  183.         <div class="s5-footer-actions">
  184.             <button type="button" class="s5-btn-back" id="s5BtnBack" style="display:none;">
  185.                 ← Retour
  186.             </button>
  187.             <button type="button" class="s5-btn-primary" id="s5BtnContinue">
  188.                 Créer mon séjour
  189.                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
  190.             </button>
  191.         </div>
  192.         <p class="s5-footer-trust">Activation sans frais pour votre structure. Les accès familles peuvent être proposés en option… ou offerts par vous.</p>
  193.     </footer>
  195. </div>
  197. <style>
  198. /* ========================================
  199.    5sur5 DRAWER - Premium Flow
  200.    Scoped styles: .s5-drawer-*
  201. ======================================== */
  203. /* Variables */
  204. .s5-drawer,
  205. .s5-drawer-overlay {
  206.     --s5-teal: #41a2aa;
  207.     --s5-teal-dark: #2d8a91;
  208.     --s5-teal-light: rgba(65, 162, 170, 0.08);
  209.     --s5-teal-border: rgba(65, 162, 170, 0.3);
  210.     --s5-orange: #f09e7a;
  211.     --s5-text: #1a1a1a;
  212.     --s5-text-secondary: #5f6368;
  213.     --s5-text-muted: #80868b;
  214.     --s5-border: #e8eaed;
  215.     --s5-bg: #ffffff;
  216.     --s5-bg-hover: #f8f9fa;
  217.     --s5-radius: 14px;
  218.     --s5-radius-sm: 8px;
  219.     --s5-shadow: 0 24px 80px -12px rgba(0,0,0,0.25);
  220.     --s5-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  221. }
  223. /* Overlay */
  224. .s5-drawer-overlay {
  225.     position: fixed;
  226.     inset: 0;
  227.     background: rgba(0, 0, 0, 0.4);
  228.     backdrop-filter: blur(4px);
  229.     z-index: 10000;
  230.     opacity: 0;
  231.     visibility: hidden;
  232.     transition: opacity 0.3s ease, visibility 0.3s ease;
  233. }
  234. .s5-drawer-overlay.active {
  235.     opacity: 1;
  236.     visibility: visible;
  237. }
  239. /* Drawer */
  240. .s5-drawer {
  241.     position: fixed;
  242.     top: 0;
  243.     right: 0;
  244.     width: 480px;
  245.     max-width: 100%;
  246.     height: 100%;
  247.     background: var(--s5-bg);
  248.     z-index: 10001;
  249.     display: flex;
  250.     flex-direction: column;
  251.     box-shadow: var(--s5-shadow);
  252.     transform: translateX(100%);
  253.     transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  254.     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  255.     -webkit-font-smoothing: antialiased;
  256. }
  257. .s5-drawer.active {
  258.     transform: translateX(0);
  259. }
  261. /* Header */
  262. .s5-drawer-header {
  263.     padding: 20px 24px 16px;
  264.     border-bottom: 1px solid var(--s5-border);
  265.     position: relative;
  266.     flex-shrink: 0;
  267. }
  268. .s5-drawer-header-content {
  269.     padding-right: 40px;
  270. }
  271. /* Masquer tout bouton "Je me connecte" dans le drawer */
  272. .s5-drawer .btn-primary[data-bs-target="#modal-login"],
  273. .s5-drawer [data-bs-target="#modal-login"],
  274. .s5-drawer a[href*="modal-login"],
  275. .s5-drawer .s5-drawer-header .btn,
  276. .s5-drawer .s5-drawer-header-content .btn {
  277.     display: none !important;
  278. }
  279. .s5-drawer-step-badge {
  280.     display: inline-block;
  281.     padding: 4px 10px;
  282.     background: var(--s5-teal-light);
  283.     color: var(--s5-teal);
  284.     font-size: 12px;
  285.     font-weight: 600;
  286.     border-radius: 100px;
  287.     margin-bottom: 8px;
  288. }
  289. .s5-drawer-title {
  290.     font-size: 22px;
  291.     font-weight: 700;
  292.     color: var(--s5-text);
  293.     margin: 0 0 4px;
  294.     line-height: 1.2;
  295. }
  296. .s5-drawer-subtitle {
  297.     font-size: 14px;
  298.     color: var(--s5-text-secondary);
  299.     margin: 0;
  300. }
  301. .s5-drawer-close {
  302.     position: absolute;
  303.     top: 16px;
  304.     right: 16px;
  305.     width: 36px;
  306.     height: 36px;
  307.     border: none;
  308.     background: transparent;
  309.     color: var(--s5-text-muted);
  310.     cursor: pointer;
  311.     border-radius: 8px;
  312.     display: flex;
  313.     align-items: center;
  314.     justify-content: center;
  315.     transition: var(--s5-transition);
  316. }
  317. .s5-drawer-close:hover {
  318.     background: var(--s5-bg-hover);
  319.     color: var(--s5-text);
  320. }
  322. /* Body */
  323. .s5-drawer-body {
  324.     flex: 1;
  325.     overflow-y: auto;
  326.     padding: 20px 24px;
  327. }
  329. /* Steps */
  330. .s5-step {
  331.     animation: s5FadeIn 0.25s ease;
  332. }
  333. @keyframes s5FadeIn {
  334.     from { opacity: 0; transform: translateY(8px); }
  335.     to { opacity: 1; transform: translateY(0); }
  336. }
  338. /* Sections */
  339. .s5-section {
  340.     margin-bottom: 20px;
  341. }
  342. .s5-section-label {
  343.     display: block;
  344.     font-size: 13px;
  345.     font-weight: 600;
  346.     color: var(--s5-text-secondary);
  347.     text-transform: uppercase;
  348.     letter-spacing: 0.5px;
  349.     margin-bottom: 10px;
  350. }
  352. /* Pills */
  353. .s5-pills {
  354.     display: flex;
  355.     flex-wrap: wrap;
  356.     gap: 8px;
  357. }
  358. .s5-pill {
  359.     padding: 8px 14px;
  360.     font-size: 13px;
  361.     font-weight: 500;
  362.     color: var(--s5-text-secondary);
  363.     background: var(--s5-bg);
  364.     border: 1.5px solid var(--s5-border);
  365.     border-radius: 100px;
  366.     cursor: pointer;
  367.     transition: var(--s5-transition);
  368.     white-space: nowrap;
  369. }
  370. .s5-pill:hover {
  371.     border-color: var(--s5-teal-border);
  372.     color: var(--s5-teal);
  373. }
  374. .s5-pill.active {
  375.     background: var(--s5-teal);
  376.     border-color: var(--s5-teal);
  377.     color: #fff;
  378. }
  380. /* Free notice */
  381. .s5-free-notice {
  382.     display: flex;
  383.     align-items: center;
  384.     gap: 8px;
  385.     padding: 10px 14px;
  386.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.08), rgba(65, 162, 170, 0.04));
  387.     border-radius: var(--s5-radius-sm);
  388.     font-size: 13px;
  389.     font-weight: 500;
  390.     color: var(--s5-teal-dark);
  391.     margin-bottom: 20px;
  392. }
  393. .s5-free-notice svg {
  394.     color: var(--s5-teal);
  395.     flex-shrink: 0;
  396. }
  397. .s5-free-notice.hidden {
  398.     display: none;
  399. }
  401. /* Plans */
  402. .s5-plans {
  403.     display: flex;
  404.     flex-direction: column;
  405.     gap: 12px;
  406. }
  407. .s5-plan-card {
  408.     position: relative;
  409.     width: 100%;
  410.     padding: 18px 20px;
  411.     background: var(--s5-bg);
  412.     border: 2px solid var(--s5-border);
  413.     border-radius: var(--s5-radius);
  414.     cursor: pointer;
  415.     transition: var(--s5-transition);
  416.     text-align: left;
  417.     display: flex;
  418.     flex-direction: column;
  419.     gap: 8px;
  420. }
  421. .s5-plan-card:hover {
  422.     border-color: var(--s5-teal-border);
  423. }
  424. .s5-plan-card.active {
  425.     border-color: var(--s5-teal);
  426.     background: var(--s5-teal-light);
  427. }
  428. .s5-plan-badge {
  429.     position: absolute;
  430.     top: -10px;
  431.     right: 16px;
  432.     padding: 4px 10px;
  433.     background: var(--s5-orange);
  434.     color: #fff;
  435.     font-size: 11px;
  436.     font-weight: 600;
  437.     text-transform: uppercase;
  438.     letter-spacing: 0.3px;
  439.     border-radius: 100px;
  440. }
  441. .s5-plan-header {
  442.     display: flex;
  443.     align-items: center;
  444.     justify-content: space-between;
  445. }
  446. .s5-plan-name {
  447.     font-size: 16px;
  448.     font-weight: 600;
  449.     color: var(--s5-text);
  450. }
  451. .s5-plan-price {
  452.     display: none;
  453.     align-items: baseline;
  454.     gap: 6px;
  455.     flex-wrap: wrap;
  456. }
  457. .s5-price-original {
  458.     font-size: 18px;
  459.     font-weight: 500;
  460.     color: var(--s5-text-muted);
  461.     text-decoration: line-through;
  462.     display: none;
  463. }
  464. .s5-price-original.visible {
  465.     display: inline;
  466. }
  467. .s5-price-value {
  468.     font-size: 28px;
  469.     font-weight: 700;
  470.     color: var(--s5-text);
  471.     line-height: 1;
  472. }
  473. .s5-price-value.free {
  474.     color: var(--s5-teal);
  475. }
  476. .s5-price-period {
  477.     font-size: 13px;
  478.     color: var(--s5-text-muted);
  479. }
  480. .s5-price-badge {
  481.     display: none;
  482.     padding: 3px 8px;
  483.     background: linear-gradient(135deg, var(--s5-teal), var(--s5-teal-dark));
  484.     color: #fff;
  485.     font-size: 11px;
  486.     font-weight: 600;
  487.     text-transform: uppercase;
  488.     letter-spacing: 0.3px;
  489.     border-radius: 100px;
  490.     margin-left: 4px;
  491. }
  492. .s5-price-badge.visible {
  493.     display: inline-block;
  494. }
  495. .s5-plan-features {
  496.     list-style: none;
  497.     padding: 0;
  498.     margin: 4px 0 0;
  499.     display: flex;
  500.     flex-direction: column;
  501.     gap: 6px;
  502. }
  503. .s5-plan-features li {
  504.     display: flex;
  505.     align-items: center;
  506.     gap: 8px;
  507.     font-size: 13px;
  508.     color: var(--s5-text-secondary);
  509. }
  510. .s5-plan-features svg {
  511.     color: var(--s5-teal);
  512.     flex-shrink: 0;
  513. }
  514. .s5-plan-check {
  515.     position: absolute;
  516.     top: 18px;
  517.     right: 16px;
  518.     width: 24px;
  519.     height: 24px;
  520.     color: var(--s5-teal);
  521.     opacity: 0;
  522.     transform: scale(0.8);
  523.     transition: var(--s5-transition);
  524. }
  525. .s5-plan-card.active .s5-plan-check {
  526.     opacity: 1;
  527.     transform: scale(1);
  528. }
  530. /* Enterprise link */
  531. .s5-enterprise-link {
  532.     display: block;
  533.     text-align: center;
  534.     font-size: 13px;
  535.     color: var(--s5-text-muted);
  536.     text-decoration: none;
  537.     padding: 12px 0;
  538.     transition: var(--s5-transition);
  539. }
  540. .s5-enterprise-link span {
  541.     color: var(--s5-teal);
  542.     font-weight: 500;
  543. }
  544. .s5-enterprise-link:hover {
  545.     color: var(--s5-text-secondary);
  546. }
  547. .s5-enterprise-link:hover span {
  548.     text-decoration: underline;
  549. }
  551. /* Option Card */
  552. .s5-option-card {
  553.     background: var(--s5-bg);
  554.     border: 2px solid var(--s5-border);
  555.     border-radius: var(--s5-radius);
  556.     overflow: hidden;
  557.     transition: var(--s5-transition);
  558. }
  559. .s5-option-card.active {
  560.     border-color: var(--s5-teal);
  561. }
  562. .s5-option-content {
  563.     display: flex;
  564.     align-items: center;
  565.     gap: 14px;
  566.     padding: 16px 18px;
  567. }
  568. .s5-option-icon {
  569.     width: 44px;
  570.     height: 44px;
  571.     background: var(--s5-teal-light);
  572.     border-radius: 10px;
  573.     display: flex;
  574.     align-items: center;
  575.     justify-content: center;
  576.     color: var(--s5-teal);
  577.     flex-shrink: 0;
  578. }
  579. .s5-option-text {
  580.     flex: 1;
  581.     min-width: 0;
  582. }
  583. .s5-option-title {
  584.     display: block;
  585.     font-size: 14px;
  586.     font-weight: 600;
  587.     color: var(--s5-text);
  588.     margin-bottom: 2px;
  589. }
  590. .s5-option-desc {
  591.     display: block;
  592.     font-size: 12px;
  593.     color: var(--s5-text-muted);
  594.     line-height: 1.4;
  595. }
  596. .s5-option-right {
  597.     display: flex;
  598.     flex-direction: column;
  599.     align-items: flex-end;
  600.     gap: 8px;
  601. }
  602. .s5-option-price {
  603.     display: none;
  604.     font-size: 15px;
  605.     font-weight: 600;
  606.     color: var(--s5-teal);
  607. }
  609. /* Toggle */
  610. .s5-toggle {
  611.     position: relative;
  612.     width: 44px;
  613.     height: 24px;
  614.     cursor: pointer;
  615. }
  616. .s5-toggle input {
  617.     opacity: 0;
  618.     width: 0;
  619.     height: 0;
  620. }
  621. .s5-toggle-slider {
  622.     position: absolute;
  623.     inset: 0;
  624.     background: var(--s5-border);
  625.     border-radius: 100px;
  626.     transition: var(--s5-transition);
  627. }
  628. .s5-toggle-slider::before {
  629.     content: '';
  630.     position: absolute;
  631.     width: 18px;
  632.     height: 18px;
  633.     left: 3px;
  634.     bottom: 3px;
  635.     background: #fff;
  636.     border-radius: 50%;
  637.     transition: var(--s5-transition);
  638.     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  639. }
  640. .s5-toggle input:checked + .s5-toggle-slider {
  641.     background: var(--s5-teal);
  642. }
  643. .s5-toggle input:checked + .s5-toggle-slider::before {
  644.     transform: translateX(20px);
  645. }
  647. /* Voice Tiers */
  648. .s5-option-tiers {
  649.     display: flex;
  650.     gap: 8px;
  651.     padding: 0 18px 16px;
  652. }
  653. .s5-tier {
  654.     flex: 1;
  655.     padding: 10px 12px;
  656.     background: var(--s5-bg-hover);
  657.     border: 1.5px solid var(--s5-border);
  658.     border-radius: var(--s5-radius-sm);
  659.     cursor: pointer;
  660.     transition: var(--s5-transition);
  661.     text-align: center;
  662. }
  663. .s5-tier:hover {
  664.     border-color: var(--s5-teal-border);
  665. }
  666. .s5-tier.active {
  667.     border-color: var(--s5-teal);
  668.     background: var(--s5-teal-light);
  669. }
  670. .s5-tier-label {
  671.     display: block;
  672.     font-size: 12px;
  673.     color: var(--s5-text-secondary);
  674.     margin-bottom: 2px;
  675. }
  676. .s5-tier-price {
  677.     display: none;
  678.     font-size: 14px;
  679.     font-weight: 600;
  680.     color: var(--s5-text);
  681. }
  683. /* Summary Card */
  684. .s5-summary-card {
  685.     background: var(--s5-bg-hover);
  686.     border-radius: var(--s5-radius-sm);
  687.     padding: 14px 16px;
  688.     margin-top: 20px;
  689. }
  690. .s5-summary-row {
  691.     display: flex;
  692.     justify-content: space-between;
  693.     font-size: 13px;
  694.     color: var(--s5-text-secondary);
  695.     padding: 4px 0;
  696. }
  697. .s5-summary-row span:last-child {
  698.     font-weight: 500;
  699.     color: var(--s5-text);
  700. }
  702. /* Footer */
  703. .s5-drawer-footer {
  704.     padding: 16px 24px 20px;
  705.     border-top: 1px solid var(--s5-border);
  706.     background: var(--s5-bg);
  707.     flex-shrink: 0;
  708. }
  709. .s5-footer-recap {
  710.     display: flex;
  711.     justify-content: space-between;
  712.     align-items: center;
  713.     font-size: 13px;
  714.     color: var(--s5-text-secondary);
  715.     margin-bottom: 12px;
  716. }
  717. .s5-footer-total {
  718.     color: var(--s5-text);
  719. }
  720. .s5-footer-total strong {
  721.     font-size: 18px;
  722.     font-weight: 700;
  723.     color: var(--s5-teal);
  724. }
  725. .s5-footer-actions {
  726.     display: flex;
  727.     gap: 10px;
  728.     margin-bottom: 12px;
  729. }
  730. .s5-btn-back {
  731.     padding: 12px 18px;
  732.     font-size: 14px;
  733.     font-weight: 500;
  734.     color: var(--s5-text-secondary);
  735.     background: transparent;
  736.     border: 1.5px solid var(--s5-border);
  737.     border-radius: var(--s5-radius-sm);
  738.     cursor: pointer;
  739.     transition: var(--s5-transition);
  740. }
  741. .s5-btn-back:hover {
  742.     border-color: var(--s5-text-muted);
  743.     color: var(--s5-text);
  744. }
  745. .s5-btn-primary {
  746.     flex: 1;
  747.     display: flex;
  748.     align-items: center;
  749.     justify-content: center;
  750.     gap: 8px;
  751.     padding: 14px 24px;
  752.     font-size: 15px;
  753.     font-weight: 600;
  754.     color: #fff;
  755.     background: var(--s5-teal);
  756.     border: none;
  757.     border-radius: var(--s5-radius-sm);
  758.     cursor: pointer;
  759.     transition: var(--s5-transition);
  760. }
  761. .s5-btn-primary:hover {
  762.     background: var(--s5-teal-dark);
  763. }
  764. .s5-btn-primary:active {
  765.     transform: scale(0.98);
  766. }
  767. .s5-footer-trust {
  768.     font-size: 11px;
  769.     color: var(--s5-text-muted);
  770.     text-align: center;
  771.     margin: 0;
  772. }
  774. /* Mobile */
  775. @media (max-width: 540px) {
  776.     .s5-drawer {
  777.         width: 100%;
  778.     }
  779.     .s5-drawer-header {
  780.         padding: 16px 20px 14px;
  781.     }
  782.     .s5-drawer-title {
  783.         font-size: 20px;
  784.     }
  785.     .s5-drawer-body {
  786.         padding: 16px 20px;
  787.     }
  788.     .s5-drawer-footer {
  789.         padding: 14px 20px 16px;
  790.     }
  791.     .s5-pills {
  792.         gap: 6px;
  793.     }
  794.     .s5-pill {
  795.         padding: 7px 12px;
  796.         font-size: 12px;
  797.     }
  798.     .s5-plan-card {
  799.         padding: 14px 16px;
  800.     }
  801.     .s5-price-value {
  802.         font-size: 24px;
  803.     }
  804. }
  805. </style>
  807. <script>
  808. (function() {
  809.     'use strict';
  811.     // DOM Elements
  812.     const overlay = document.getElementById('s5DrawerOverlay');
  813.     const drawer = document.getElementById('s5Drawer');
  814.     const closeBtn = document.getElementById('s5DrawerClose');
  815.     const step1 = document.getElementById('s5Step1');
  816.     const step2 = document.getElementById('s5Step2');
  817.     const stepBadge = document.getElementById('s5StepBadge');
  818.     const btnContinue = document.getElementById('s5BtnContinue');
  819.     const btnBack = document.getElementById('s5BtnBack');
  820.     const freeNotice = document.getElementById('s5FreeNotice');
  821.     const priceUnique = document.getElementById('s5PriceUnique');
  822.     const priceOriginal = document.getElementById('s5PriceOriginal');
  823.     const priceBadge = document.getElementById('s5PriceBadge');
  824.     const voiceToggle = document.getElementById('s5VoiceToggle');
  825.     const voiceTiers = document.getElementById('s5VoiceTiers');
  826.     const voicePrice = document.getElementById('s5VoicePrice');
  827.     const voiceOptionCard = document.getElementById('s5VoiceOption');
  828.     const footerRecap = document.getElementById('s5FooterRecap');
  829.     const footerTotal = document.getElementById('s5FooterTotal');
  830.     const summaryPlan = document.getElementById('s5SummaryPlan');
  831.     const summaryVoiceRow = document.getElementById('s5SummaryVoiceRow');
  832.     const summaryVoice = document.getElementById('s5SummaryVoice');
  834.     // State
  835.     let currentStep = 1;
  836.     let state = {
  837.         profile: 'ecole_publique',
  838.         plan: 'sejour_unique',
  839.         voiceEnabled: false,
  840.         voiceTier: 35,
  841.         voicePrice: 40
  842.     };
  844.     // Pricing rules
  845.     const pricing = {
  846.         sejour_unique: {
  847.             ecole_publique: 0,
  848.             ecole_privee: 39,
  849.             organisme: 39,
  850.             autre: 39
  851.         },
  852.         pack_annuel: 490,
  853.         voice: { 35: 40, 70: 70 }
  854.     };
  856.     // Open drawer
  857.     window.openSejourDrawer = function() {
  858.         overlay.classList.add('active');
  859.         drawer.classList.add('active');
  860.         document.body.style.overflow = 'hidden';
  861.         drawer.querySelector('button').focus();
  862.     };
  864.     // Close drawer
  865.     window.closeSejourDrawer = function() {
  866.         overlay.classList.remove('active');
  867.         drawer.classList.remove('active');
  868.         document.body.style.overflow = '';
  869.         resetState();
  870.     };
  872.     function resetState() {
  873.         currentStep = 1;
  874.         state = {
  875.             profile: 'ecole_publique',
  876.             plan: 'sejour_unique',
  877.             voiceEnabled: false,
  878.             voiceTier: 35,
  879.             voicePrice: 40
  880.         };
  881.         showStep(1);
  882.         updateUI();
  883.     }
  885.     // Events
  886.     overlay.addEventListener('click', closeSejourDrawer);
  887.     closeBtn.addEventListener('click', closeSejourDrawer);
  889.     // Escape key
  890.     document.addEventListener('keydown', (e) => {
  891.         if (e.key === 'Escape' && drawer.classList.contains('active')) {
  892.             closeSejourDrawer();
  893.         }
  894.     });
  896.     // Profile pills
  897.     document.querySelectorAll('.s5-pill').forEach(pill => {
  898.         pill.addEventListener('click', () => {
  899.             document.querySelectorAll('.s5-pill').forEach(p => {
  900.                 p.classList.remove('active');
  901.                 p.setAttribute('aria-checked', 'false');
  902.             });
  903.             pill.classList.add('active');
  904.             pill.setAttribute('aria-checked', 'true');
  905.             state.profile = pill.dataset.profile;
  906.             updateUI();
  907.         });
  908.     });
  910.     // Plan cards
  911.     document.querySelectorAll('.s5-plan-card').forEach(card => {
  912.         card.addEventListener('click', () => {
  913.             document.querySelectorAll('.s5-plan-card').forEach(c => {
  914.                 c.classList.remove('active');
  915.                 c.setAttribute('aria-pressed', 'false');
  916.             });
  917.             card.classList.add('active');
  918.             card.setAttribute('aria-pressed', 'true');
  919.             state.plan = card.dataset.plan;
  920.             updateUI();
  921.         });
  922.     });
  924.     // Voice toggle
  925.     voiceToggle.addEventListener('change', () => {
  926.         state.voiceEnabled = voiceToggle.checked;
  927.         voiceTiers.style.display = state.voiceEnabled ? 'flex' : 'none';
  928.         voiceOptionCard.classList.toggle('active', state.voiceEnabled);
  929.         updateUI();
  930.     });
  932.     // Voice tiers
  933.     document.querySelectorAll('.s5-tier').forEach(tier => {
  934.         tier.addEventListener('click', () => {
  935.             document.querySelectorAll('.s5-tier').forEach(t => t.classList.remove('active'));
  936.             tier.classList.add('active');
  937.             state.voiceTier = parseInt(tier.dataset.tier);
  938.             state.voicePrice = parseInt(tier.dataset.price);
  939.             updateUI();
  940.         });
  941.     });
  943.     // Continue button
  944.     btnContinue.addEventListener('click', () => {
  945.         if (currentStep === 1) {
  946.             // If Pack annuel, redirect directly
  947.             if (state.plan === 'pack_annuel') {
  948.                 window.location.href = '/Accueil5sur5/Pack_Annuel_Partenaires';
  949.                 return;
  950.             }
  951.             showStep(2);
  952.         } else {
  953.             // Step 2 -> Submit
  954.             submitForm();
  955.         }
  956.     });
  958.     // Back button
  959.     btnBack.addEventListener('click', () => {
  960.         showStep(1);
  961.     });
  963.     function showStep(step) {
  964.         currentStep = step;
  965.         if (step === 1) {
  966.             step1.style.display = 'block';
  967.             step2.style.display = 'none';
  968.             stepBadge.textContent = 'Étape 1/2';
  969.             btnBack.style.display = 'none';
  970.             btnContinue.innerHTML = 'Créer mon séjour <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>';
  971.         } else {
  972.             step1.style.display = 'none';
  973.             step2.style.display = 'block';
  974.             stepBadge.textContent = 'Étape 2/2';
  975.             btnBack.style.display = 'inline-flex';
  976.             btnContinue.innerHTML = 'Créer mon séjour <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>';
  977.         }
  978.         updateUI();
  979.     }
  981.     function updateUI() {
  982.         const isSchool = ['ecole_publique', 'ecole_privee'].includes(state.profile);
  983.         const isPublicSchool = state.profile === 'ecole_publique';
  985.         // Free notice
  986.         freeNotice.classList.toggle('hidden', !isPublicSchool);
  988.         // Hide price displays
  989.         if (priceOriginal) priceOriginal.style.display = 'none';
  990.         if (priceUnique) priceUnique.style.display = 'none';
  991.         if (priceBadge) priceBadge.style.display = 'none';
  993.         // Calculate plan label
  994.         let planLabel = '';
  995.         if (state.plan === 'sejour_unique') {
  996.             planLabel = 'Séjour unique';
  997.         } else {
  998.             planLabel = 'Pack annuel';
  999.         }
  1001.         // Update footer
  1002.         let recapText = planLabel;
  1003.         if (state.plan === 'sejour_unique' && state.voiceEnabled) {
  1004.             recapText += ' + Boîte vocale';
  1005.         }
  1006.         footerRecap.textContent = recapText;
  1007.         
  1008.         // Always show "Activation gratuite" for footer
  1009.         footerTotal.textContent = 'Activation gratuite';
  1011.         // Step 2 summary
  1012.         summaryPlan.textContent = planLabel;
  1013.         summaryVoiceRow.style.display = state.voiceEnabled ? 'flex' : 'none';
  1014.         if (summaryVoice) summaryVoice.textContent = 'Activée';
  1015.     }
  1017.     function submitForm() {
  1018.         const params = new URLSearchParams();
  1019.         params.set('profile', state.profile);
  1020.         
  1021.         if (state.voiceEnabled) {
  1022.             params.set('voice_pack', state.voiceTier.toString());
  1023.         }
  1025.         let url = '/creation-simple/creer';
  1026.         
  1027.         // Special redirect for public schools
  1028.         if (state.profile === 'ecole_publique') {
  1029.             url = '/ecoles-publiques/creer';
  1030.         }
  1032.         window.location.href = url + '?' + params.toString();
  1033.     }
  1035.     // Initialize
  1036.     updateUI();
  1037.     
  1038.     // S'assurer qu'aucun bouton "Je me connecte" n'apparaît dans le drawer
  1039.     const observer = new MutationObserver(() => {
  1040.         const drawer = document.getElementById('s5Drawer');
  1041.         if (drawer) {
  1042.             const loginButtons = drawer.querySelectorAll('[data-bs-target="#modal-login"], a[href*="modal-login"], .btn-primary[href*="#modal-login"]');
  1043.             loginButtons.forEach(btn => btn.remove());
  1044.         }
  1045.     });
  1046.     observer.observe(document.body, { childList: true, subtree: true });
  1048. })();
  1049. </script>