templates/Accueil/pack_annuel_partenaires.html.twig line 1

Open in your IDE?
  1. {% extends "Accueil/layoutAccueil.html.twig" %}
  3. {% block title %}Pack Annuel 25 Séjours — 5sur5 Séjour{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <style>
  8. /* ==========================================================================
  9.    PACK ANNUEL B2B - Page de vente premium 2026
  10.    Structure : Stripe/Notion pour collectivités
  11.    ========================================================================== */
  13. :root {
  14.     --pack-teal: #41A2AA;
  15.     --pack-teal-dark: #359BA3;
  16.     --pack-teal-light: rgba(65, 162, 170, 0.08);
  17.     --pack-orange: #F56040;
  18.     --pack-orange-light: rgba(245, 96, 64, 0.1);
  19.     --pack-text: #1A1A1A;
  20.     --pack-text-secondary: #5A6B7A;
  21.     --pack-text-muted: #8A99A8;
  22.     --pack-bg: #F9FBFC;
  23.     --pack-bg-alt: #F4F7F9;
  24.     --pack-white: #FFFFFF;
  25.     --pack-border: #E8EEF2;
  26.     --pack-shadow: 0 8px 25px rgba(15, 52, 71, 0.06);
  27.     --pack-shadow-hover: 0 12px 35px rgba(15, 52, 71, 0.1);
  28.     --pack-radius: 16px;
  29.     --pack-radius-sm: 10px;
  30. }
  32. /* Base */
  33. .pack-page {
  34.     background: var(--pack-bg);
  35.     min-height: 100vh;
  36. }
  38. .pack-section {
  39.     padding: 80px 24px;
  40. }
  42. .pack-container {
  43.     max-width: 1140px;
  44.     margin: 0 auto;
  45. }
  47. /* Typography */
  48. .pack-badge {
  49.     display: inline-flex;
  50.     align-items: center;
  51.     gap: 6px;
  52.     background: var(--pack-teal-light);
  53.     color: var(--pack-teal);
  54.     font-size: 13px;
  55.     font-weight: 600;
  56.     padding: 8px 16px;
  57.     border-radius: 50px;
  58.     margin-bottom: 20px;
  59. }
  61. .pack-badge-orange {
  62.     background: var(--pack-orange-light);
  63.     color: var(--pack-orange);
  64. }
  66. .pack-h1 {
  67.     font-size: clamp(32px, 5vw, 48px);
  68.     font-weight: 700;
  69.     color: var(--pack-text);
  70.     line-height: 1.15;
  71.     margin: 0 0 20px;
  72. }
  74. .pack-h2 {
  75.     font-size: clamp(26px, 4vw, 36px);
  76.     font-weight: 700;
  77.     color: var(--pack-text);
  78.     line-height: 1.25;
  79.     margin: 0 0 16px;
  80. }
  82. .pack-h3 {
  83.     font-size: 20px;
  84.     font-weight: 600;
  85.     color: var(--pack-text);
  86.     margin: 0 0 12px;
  87. }
  89. .pack-lead {
  90.     font-size: 18px;
  91.     color: var(--pack-text-secondary);
  92.     line-height: 1.6;
  93.     margin: 0;
  94. }
  96. .pack-text {
  97.     font-size: 15px;
  98.     color: var(--pack-text-secondary);
  99.     line-height: 1.7;
  100. }
  102. .pack-text-center {
  103.     text-align: center;
  104. }
  106. /* Buttons */
  107. .btn-pack-primary {
  108.     display: inline-flex;
  109.     align-items: center;
  110.     justify-content: center;
  111.     gap: 8px;
  112.     background: var(--pack-teal);
  113.     color: white;
  114.     font-size: 16px;
  115.     font-weight: 600;
  116.     padding: 16px 32px;
  117.     border-radius: var(--pack-radius-sm);
  118.     border: none;
  119.     cursor: pointer;
  120.     transition: all 0.25s ease;
  121.     text-decoration: none;
  122. }
  124. .btn-pack-primary:hover {
  125.     background: var(--pack-teal-dark);
  126.     color: white;
  127.     transform: translateY(-2px);
  128.     box-shadow: 0 8px 25px rgba(65, 162, 170, 0.35);
  129. }
  131. .btn-pack-outline {
  132.     display: inline-flex;
  133.     align-items: center;
  134.     justify-content: center;
  135.     gap: 8px;
  136.     background: transparent;
  137.     color: var(--pack-teal);
  138.     font-size: 16px;
  139.     font-weight: 600;
  140.     padding: 16px 32px;
  141.     border-radius: var(--pack-radius-sm);
  142.     border: 2px solid var(--pack-teal);
  143.     cursor: pointer;
  144.     transition: all 0.25s ease;
  145.     text-decoration: none;
  146. }
  148. .btn-pack-outline:hover {
  149.     background: var(--pack-teal);
  150.     color: white;
  151. }
  153. .btn-pack-sm {
  154.     padding: 12px 24px;
  155.     font-size: 14px;
  156. }
  158. /* Cards */
  159. .pack-card {
  160.     background: var(--pack-white);
  161.     border-radius: var(--pack-radius);
  162.     box-shadow: var(--pack-shadow);
  163.     padding: 32px;
  164.     transition: all 0.3s ease;
  165. }
  167. .pack-card:hover {
  168.     box-shadow: var(--pack-shadow-hover);
  169. }
  171. /* ==========================================================================
  172.    1. HERO SECTION
  173.    ========================================================================== */
  174. .pack-hero {
  175.     background: linear-gradient(180deg, var(--pack-white) 0%, var(--pack-bg) 100%);
  176.     padding: 60px 24px 80px;
  177. }
  179. .pack-hero-grid {
  180.     display: grid;
  181.     grid-template-columns: 1fr 420px;
  182.     gap: 60px;
  183.     align-items: center;
  184. }
  186. .pack-hero-content {
  187.     max-width: 580px;
  188. }
  190. .pack-hero-list {
  191.     list-style: none;
  192.     padding: 0;
  193.     margin: 28px 0 0;
  194. }
  196. .pack-hero-list li {
  197.     display: flex;
  198.     align-items: flex-start;
  199.     gap: 12px;
  200.     padding: 10px 0;
  201.     font-size: 16px;
  202.     color: var(--pack-text-secondary);
  203. }
  205. .pack-hero-list li i {
  206.     color: var(--pack-teal);
  207.     font-size: 20px;
  208.     flex-shrink: 0;
  209.     margin-top: 2px;
  210. }
  212. /* Pricing Card */
  213. .pack-pricing-card {
  214.     background: var(--pack-white);
  215.     border-radius: var(--pack-radius);
  216.     box-shadow: var(--pack-shadow);
  217.     padding: 40px;
  218.     text-align: center;
  219.     position: relative;
  220.     border: 2px solid transparent;
  221. }
  223. .pack-pricing-card::before {
  224.     content: '';
  225.     position: absolute;
  226.     top: -2px;
  227.     left: -2px;
  228.     right: -2px;
  229.     bottom: -2px;
  230.     background: linear-gradient(135deg, var(--pack-teal) 0%, var(--pack-orange) 100%);
  231.     border-radius: calc(var(--pack-radius) + 2px);
  232.     z-index: -1;
  233.     opacity: 0;
  234.     transition: opacity 0.3s ease;
  235. }
  237. .pack-pricing-card:hover::before {
  238.     opacity: 1;
  239. }
  241. .pack-pricing-tag {
  242.     position: absolute;
  243.     top: -14px;
  244.     left: 50%;
  245.     transform: translateX(-50%);
  246.     background: var(--pack-orange);
  247.     color: white;
  248.     font-size: 12px;
  249.     font-weight: 700;
  250.     padding: 6px 16px;
  251.     border-radius: 50px;
  252.     text-transform: uppercase;
  253.     letter-spacing: 0.5px;
  254. }
  256. .pack-pricing-title {
  257.     font-size: 22px;
  258.     font-weight: 700;
  259.     color: var(--pack-text);
  260.     margin: 16px 0 24px;
  261. }
  263. .pack-pricing-amount {
  264.     font-size: 52px;
  265.     font-weight: 700;
  266.     color: var(--pack-teal);
  267.     line-height: 1;
  268. }
  270. .pack-pricing-period {
  271.     font-size: 16px;
  272.     color: var(--pack-text-muted);
  273.     font-weight: 500;
  274.     margin-top: 8px;
  275. }
  277. .pack-pricing-desc {
  278.     font-size: 14px;
  279.     color: var(--pack-text-secondary);
  280.     margin: 20px 0 28px;
  281.     line-height: 1.6;
  282. }
  284. .pack-pricing-ctas {
  285.     display: flex;
  286.     flex-direction: column;
  287.     gap: 12px;
  288. }
  290. .pack-pricing-micro {
  291.     font-size: 13px;
  292.     color: var(--pack-text-muted);
  293.     margin-top: 20px;
  294.     line-height: 1.5;
  295. }
  297. .pack-pricing-micro a {
  298.     color: var(--pack-teal);
  299.     text-decoration: underline;
  300. }
  302. /* Trust badges */
  303. .pack-trust-bar {
  304.     display: flex;
  305.     flex-wrap: wrap;
  306.     justify-content: center;
  307.     gap: 32px;
  308.     margin-top: 48px;
  309.     padding-top: 32px;
  310.     border-top: 1px solid var(--pack-border);
  311. }
  313. .pack-trust-item {
  314.     display: flex;
  315.     align-items: center;
  316.     gap: 10px;
  317.     font-size: 14px;
  318.     color: var(--pack-text-muted);
  319. }
  321. .pack-trust-item i {
  322.     color: var(--pack-teal);
  323.     font-size: 18px;
  324. }
  326. /* ==========================================================================
  327.    2. SECTION "Pourquoi ce pack existe"
  328.    ========================================================================== */
  329. .pack-why {
  330.     background: var(--pack-white);
  331. }
  333. .pack-why-intro {
  334.     text-align: center;
  335.     max-width: 720px;
  336.     margin: 0 auto 48px;
  337. }
  339. .pack-compare-grid {
  340.     display: grid;
  341.     grid-template-columns: 1fr 1fr;
  342.     gap: 32px;
  343. }
  345. .pack-compare-card {
  346.     padding: 32px;
  347.     border-radius: var(--pack-radius);
  348. }
  350. .pack-compare-card.negative {
  351.     background: #FEF7F6;
  352.     border: 1px solid #FCDDD9;
  353. }
  355. .pack-compare-card.positive {
  356.     background: #F0FAFA;
  357.     border: 1px solid #C8E8EA;
  358. }
  360. .pack-compare-title {
  361.     display: flex;
  362.     align-items: center;
  363.     gap: 10px;
  364.     font-size: 18px;
  365.     font-weight: 600;
  366.     margin-bottom: 20px;
  367. }
  369. .pack-compare-card.negative .pack-compare-title {
  370.     color: #C53030;
  371. }
  373. .pack-compare-card.positive .pack-compare-title {
  374.     color: var(--pack-teal);
  375. }
  377. .pack-compare-list {
  378.     list-style: none;
  379.     padding: 0;
  380.     margin: 0;
  381. }
  383. .pack-compare-list li {
  384.     display: flex;
  385.     align-items: flex-start;
  386.     gap: 12px;
  387.     padding: 10px 0;
  388.     font-size: 15px;
  389.     color: var(--pack-text-secondary);
  390. }
  392. .pack-compare-card.negative .pack-compare-list li i {
  393.     color: #C53030;
  394. }
  396. .pack-compare-card.positive .pack-compare-list li i {
  397.     color: var(--pack-teal);
  398. }
  400. /* ==========================================================================
  401.    3. SECTION "Ce que le pack apporte"
  402.    ========================================================================== */
  403. .pack-benefits {
  404.     background: var(--pack-bg);
  405. }
  407. .pack-benefits-grid {
  408.     display: grid;
  409.     grid-template-columns: repeat(3, 1fr);
  410.     gap: 28px;
  411.     margin-top: 48px;
  412. }
  414. .pack-benefit-card {
  415.     background: var(--pack-white);
  416.     border-radius: var(--pack-radius);
  417.     padding: 36px 28px;
  418.     text-align: center;
  419.     border: 1px solid var(--pack-border);
  420.     transition: all 0.3s ease;
  421. }
  423. .pack-benefit-card:hover {
  424.     border-color: var(--pack-teal);
  425.     transform: translateY(-4px);
  426.     box-shadow: var(--pack-shadow);
  427. }
  429. .pack-benefit-icon {
  430.     width: 64px;
  431.     height: 64px;
  432.     border-radius: 16px;
  433.     background: var(--pack-teal-light);
  434.     display: inline-flex;
  435.     align-items: center;
  436.     justify-content: center;
  437.     margin-bottom: 20px;
  438. }
  440. .pack-benefit-icon i {
  441.     font-size: 28px;
  442.     color: var(--pack-teal);
  443. }
  445. .pack-benefit-stat {
  446.     font-size: 32px;
  447.     font-weight: 700;
  448.     color: var(--pack-teal);
  449.     margin-bottom: 8px;
  450. }
  452. /* ==========================================================================
  453.    4. SECTION "Impact mesuré"
  454.    ========================================================================== */
  455. .pack-metrics {
  456.     background: var(--pack-bg-alt);
  457. }
  459. .pack-metrics-grid {
  460.     display: grid;
  461.     grid-template-columns: repeat(6, 1fr);
  462.     gap: 24px;
  463.     margin-top: 48px;
  464. }
  466. .pack-metric-item {
  467.     text-align: center;
  468.     padding: 24px 16px;
  469.     background: var(--pack-white);
  470.     border-radius: var(--pack-radius-sm);
  471.     border: 1px solid var(--pack-border);
  472. }
  474. .pack-metric-value {
  475.     font-size: 36px;
  476.     font-weight: 700;
  477.     color: var(--pack-teal);
  478.     line-height: 1.1;
  479. }
  481. .pack-metric-label {
  482.     font-size: 13px;
  483.     color: var(--pack-text-muted);
  484.     margin-top: 8px;
  485.     line-height: 1.4;
  486. }
  488. /* ==========================================================================
  489.    5. SECTION "Ils nous font confiance"
  490.    ========================================================================== */
  491. .pack-testimonials {
  492.     background: var(--pack-white);
  493. }
  495. .pack-testimonials-grid {
  496.     display: grid;
  497.     grid-template-columns: repeat(3, 1fr);
  498.     gap: 28px;
  499.     margin-top: 48px;
  500. }
  502. .pack-testimonial-card {
  503.     background: var(--pack-bg);
  504.     border-radius: var(--pack-radius);
  505.     padding: 32px;
  506.     position: relative;
  507. }
  509. .pack-testimonial-card::before {
  510.     content: '"';
  511.     position: absolute;
  512.     top: 20px;
  513.     left: 24px;
  514.     font-size: 64px;
  515.     color: var(--pack-teal);
  516.     opacity: 0.15;
  517.     font-family: Georgia, serif;
  518.     line-height: 1;
  519. }
  521. .pack-testimonial-quote {
  522.     font-size: 15px;
  523.     color: var(--pack-text-secondary);
  524.     line-height: 1.7;
  525.     font-style: italic;
  526.     margin-bottom: 24px;
  527.     position: relative;
  528.     z-index: 1;
  529. }
  531. .pack-testimonial-author {
  532.     display: flex;
  533.     align-items: center;
  534.     gap: 12px;
  535.     padding-top: 16px;
  536.     border-top: 1px solid var(--pack-border);
  537. }
  539. .pack-testimonial-avatar {
  540.     width: 44px;
  541.     height: 44px;
  542.     border-radius: 50%;
  543.     background: var(--pack-teal);
  544.     display: flex;
  545.     align-items: center;
  546.     justify-content: center;
  547.     color: white;
  548.     font-weight: 600;
  549.     font-size: 16px;
  550. }
  552. .pack-testimonial-name {
  553.     font-size: 14px;
  554.     font-weight: 600;
  555.     color: var(--pack-text);
  556. }
  558. .pack-testimonial-role {
  559.     font-size: 13px;
  560.     color: var(--pack-text-muted);
  561. }
  563. /* ==========================================================================
  564.    6. SECTION "Option Boîte Vocale"
  565.    ========================================================================== */
  566. .pack-voicemail {
  567.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.04) 0%, rgba(245, 96, 64, 0.04) 100%);
  568.     border-top: 1px solid var(--pack-border);
  569.     border-bottom: 1px solid var(--pack-border);
  570. }
  572. .pack-voicemail-grid {
  573.     display: grid;
  574.     grid-template-columns: 1fr 360px;
  575.     gap: 48px;
  576.     align-items: center;
  577. }
  579. .pack-voicemail-list {
  580.     list-style: none;
  581.     padding: 0;
  582.     margin: 24px 0 0;
  583. }
  585. .pack-voicemail-list li {
  586.     display: flex;
  587.     align-items: flex-start;
  588.     gap: 14px;
  589.     padding: 14px 0;
  590.     font-size: 15px;
  591.     color: var(--pack-text-secondary);
  592. }
  594. .pack-voicemail-list li i {
  595.     color: var(--pack-orange);
  596.     font-size: 20px;
  597.     flex-shrink: 0;
  598. }
  600. .pack-voicemail-cta {
  601.     background: var(--pack-white);
  602.     border-radius: var(--pack-radius);
  603.     padding: 32px;
  604.     text-align: center;
  605.     border: 2px dashed var(--pack-border);
  606. }
  608. .pack-voicemail-cta-title {
  609.     font-size: 16px;
  610.     font-weight: 600;
  611.     color: var(--pack-text);
  612.     margin-bottom: 12px;
  613. }
  615. .pack-voicemail-cta-text {
  616.     font-size: 14px;
  617.     color: var(--pack-text-muted);
  618.     margin-bottom: 20px;
  619. }
  621. /* ==========================================================================
  622.    7. SECTION FAQ
  623.    ========================================================================== */
  624. .pack-faq {
  625.     background: var(--pack-white);
  626. }
  628. .pack-faq-list {
  629.     max-width: 800px;
  630.     margin: 48px auto 0;
  631. }
  633. .pack-faq-item {
  634.     border-bottom: 1px solid var(--pack-border);
  635. }
  637. .pack-faq-question {
  638.     width: 100%;
  639.     background: none;
  640.     border: none;
  641.     padding: 24px 0;
  642.     display: flex;
  643.     align-items: center;
  644.     justify-content: space-between;
  645.     gap: 16px;
  646.     cursor: pointer;
  647.     text-align: left;
  648. }
  650. .pack-faq-question h3 {
  651.     font-size: 17px;
  652.     font-weight: 600;
  653.     color: var(--pack-text);
  654.     margin: 0;
  655. }
  657. .pack-faq-question i {
  658.     color: var(--pack-teal);
  659.     font-size: 20px;
  660.     transition: transform 0.3s ease;
  661. }
  663. .pack-faq-question[aria-expanded="true"] i {
  664.     transform: rotate(180deg);
  665. }
  667. .pack-faq-answer {
  668.     padding: 0 0 24px;
  669. }
  671. .pack-faq-answer p {
  672.     font-size: 15px;
  673.     color: var(--pack-text-secondary);
  674.     line-height: 1.7;
  675.     margin: 0;
  676. }
  678. /* ==========================================================================
  679.    8. SECTION FINALE CTA
  680.    ========================================================================== */
  681. .pack-cta-final {
  682.     background: linear-gradient(135deg, var(--pack-teal) 0%, #359BA3 100%);
  683.     color: white;
  684.     text-align: center;
  685. }
  687. .pack-cta-final .pack-h2 {
  688.     color: white;
  689. }
  691. .pack-cta-final .pack-lead {
  692.     color: rgba(255, 255, 255, 0.85);
  693.     max-width: 540px;
  694.     margin: 0 auto 32px;
  695. }
  697. .pack-cta-buttons {
  698.     display: flex;
  699.     justify-content: center;
  700.     gap: 16px;
  701.     flex-wrap: wrap;
  702. }
  704. .btn-pack-white {
  705.     background: white;
  706.     color: var(--pack-teal);
  707.     font-size: 16px;
  708.     font-weight: 600;
  709.     padding: 16px 32px;
  710.     border-radius: var(--pack-radius-sm);
  711.     border: none;
  712.     cursor: pointer;
  713.     transition: all 0.25s ease;
  714.     text-decoration: none;
  715.     display: inline-flex;
  716.     align-items: center;
  717.     gap: 8px;
  718. }
  720. .btn-pack-white:hover {
  721.     background: #F0F0F0;
  722.     color: var(--pack-teal-dark);
  723.     transform: translateY(-2px);
  724. }
  726. .btn-pack-ghost {
  727.     background: transparent;
  728.     color: white;
  729.     font-size: 16px;
  730.     font-weight: 600;
  731.     padding: 16px 32px;
  732.     border-radius: var(--pack-radius-sm);
  733.     border: 2px solid rgba(255, 255, 255, 0.4);
  734.     cursor: pointer;
  735.     transition: all 0.25s ease;
  736.     text-decoration: none;
  737.     display: inline-flex;
  738.     align-items: center;
  739.     gap: 8px;
  740. }
  742. .btn-pack-ghost:hover {
  743.     background: rgba(255, 255, 255, 0.1);
  744.     border-color: white;
  745.     color: white;
  746. }
  748. .pack-cta-contact {
  749.     margin-top: 28px;
  750.     font-size: 15px;
  751.     color: rgba(255, 255, 255, 0.8);
  752. }
  754. .pack-cta-contact a {
  755.     color: white;
  756.     font-weight: 600;
  757. }
  759. /* ==========================================================================
  760.    RESPONSIVE
  761.    ========================================================================== */
  762. @media (max-width: 1024px) {
  763.     .pack-hero-grid {
  764.         grid-template-columns: 1fr;
  765.         gap: 40px;
  766.     }
  767.     
  768.     .pack-hero-content {
  769.         max-width: 100%;
  770.         text-align: center;
  771.     }
  772.     
  773.     .pack-hero-list li {
  774.         justify-content: center;
  775.     }
  776.     
  777.     .pack-pricing-card {
  778.         max-width: 420px;
  779.         margin: 0 auto;
  780.     }
  781.     
  782.     .pack-benefits-grid {
  783.         grid-template-columns: 1fr;
  784.     }
  785.     
  786.     .pack-metrics-grid {
  787.         grid-template-columns: repeat(3, 1fr);
  788.     }
  789.     
  790.     .pack-testimonials-grid {
  791.         grid-template-columns: 1fr;
  792.     }
  793.     
  794.     .pack-voicemail-grid {
  795.         grid-template-columns: 1fr;
  796.     }
  797. }
  799. @media (max-width: 768px) {
  800.     .pack-section {
  801.         padding: 60px 20px;
  802.     }
  803.     
  804.     .pack-compare-grid {
  805.         grid-template-columns: 1fr;
  806.     }
  807.     
  808.     .pack-metrics-grid {
  809.         grid-template-columns: repeat(2, 1fr);
  810.     }
  811.     
  812.     .pack-trust-bar {
  813.         gap: 20px;
  814.     }
  815.     
  816.     .pack-cta-buttons {
  817.         flex-direction: column;
  818.         align-items: center;
  819.     }
  820.     
  821.     .btn-pack-primary,
  822.     .btn-pack-outline,
  823.     .btn-pack-white,
  824.     .btn-pack-ghost {
  825.         width: 100%;
  826.         max-width: 320px;
  827.     }
  828. }
  830. @media (max-width: 480px) {
  831.     .pack-hero {
  832.         padding: 40px 16px 60px;
  833.     }
  834.     
  835.     .pack-section {
  836.         padding: 48px 16px;
  837.     }
  838.     
  839.     .pack-pricing-card {
  840.         padding: 28px 20px;
  841.     }
  842.     
  843.     .pack-pricing-amount {
  844.         font-size: 42px;
  845.     }
  846. }
  847. </style>
  848. {% endblock %}
  850. {% block Content %}
  851. <div class="pack-page">
  853.     {# ==========================================================================
  854.        1. HERO SECTION
  855.        ========================================================================== #}
  856.     <section class="pack-hero">
  857.         <div class="pack-container">
  858.             <div class="pack-hero-grid">
  859.                 
  860.                 {# Colonne gauche : Contenu #}
  861.                 <div class="pack-hero-content">
  862.                     <span class="pack-badge">
  863.                         <i class="bi bi-star-fill"></i>
  864.                         Pack recommandé pour les structures multi-séjours
  865.                     </span>
  866.                     
  867.                     <h1 class="pack-h1">Passez vos séjours en pilote automatique.</h1>
  868.                     
  869.                     <p class="pack-lead">
  870.                         Un forfait annuel qui couvre tous vos séjours. Zéro dépassement, zéro surcharge de travail.
  871.                     </p>
  872.                     
  873.                     <ul class="pack-hero-list">
  874.                         <li>
  875.                             <i class="bi bi-check-circle-fill"></i>
  876.                             <span>Jusqu'à <strong>25 séjours inclus</strong> par an</span>
  877.                         </li>
  878.                         <li>
  879.                             <i class="bi bi-check-circle-fill"></i>
  880.                             <span><strong>+90 %</strong> de parents connectés</span>
  881.                         </li>
  882.                         <li>
  883.                             <i class="bi bi-check-circle-fill"></i>
  884.                             <span>Moins d'appels, plus de sérénité pour vos équipes</span>
  885.                         </li>
  886.                         <li>
  887.                             <i class="bi bi-check-circle-fill"></i>
  888.                             <span>Installation gérée par l'équipe 5sur5</span>
  889.                         </li>
  890.                     </ul>
  891.                 </div>
  892.                 
  893.                 {# Colonne droite : Carte pricing #}
  894.                 <div class="pack-pricing-card">
  895.                     <span class="pack-pricing-tag">Le plus choisi</span>
  896.                     
  897.                     <h2 class="pack-pricing-title">Pack Annuel — 25 séjours</h2>
  898.                     
  899.                     <div class="pack-pricing-amount">490 € <small style="font-size: 20px; font-weight: 500;">HT</small></div>
  900.                     <div class="pack-pricing-period">/ an / structure</div>
  901.                     
  902.                     <p class="pack-pricing-desc">
  903.                         Tous vos séjours inclus, support prioritaire, déploiement par l'équipe 5sur5.
  904.                     </p>
  905.                     
  906.                     <div class="pack-pricing-ctas">
  907.                         <a href="#" class="btn-pack-primary" data-bs-toggle="modal" data-bs-target="#packConfirmModal">
  908.                             <i class="bi bi-lightning-fill"></i>
  909.                             Activer le Pack Annuel
  910.                         </a>
  911.                         <a href="#" class="btn-pack-outline" data-bs-toggle="modal" data-bs-target="#devisModal">
  912.                             <i class="bi bi-file-earmark-text"></i>
  913.                             Demander un devis collectivité
  914.                         </a>
  915.                     </div>
  916.                     
  917.                     <p class="pack-pricing-micro">
  918.                         Option complémentaire : <a href="#option-boite-vocale">Boîte Vocale automatique</a> pour rassurer instantanément les parents.
  919.                     </p>
  920.                 </div>
  921.             </div>
  922.             
  923.             {# Trust bar #}
  924.             <div class="pack-trust-bar">
  925.                 <div class="pack-trust-item">
  926.                     <i class="bi bi-shield-check"></i>
  927.                     <span>RGPD & données en France</span>
  928.                 </div>
  929.                 <div class="pack-trust-item">
  930.                     <i class="bi bi-clock-history"></i>
  931.                     <span>Déploiement sous 24h</span>
  932.                 </div>
  933.                 <div class="pack-trust-item">
  934.                     <i class="bi bi-people-fill"></i>
  935.                     <span>300+ séjours accompagnés</span>
  936.                 </div>
  937.                 <div class="pack-trust-item">
  938.                     <i class="bi bi-heart-fill"></i>
  939.                     <span>97% de satisfaction</span>
  940.                 </div>
  941.             </div>
  942.         </div>
  943.     </section>
  945.     {# ==========================================================================
  946.        2. SECTION "Pourquoi ce pack existe"
  947.        ========================================================================== #}
  948.     <section class="pack-section pack-why">
  949.         <div class="pack-container">
  950.             <div class="pack-why-intro">
  951.                 <h2 class="pack-h2">Le pack conçu pour les structures qui gèrent plusieurs séjours par an.</h2>
  952.                 <p class="pack-lead">
  953.                     Sans solution dédiée, chaque séjour génère appels, mails, demandes d'infos et stress côté familles comme côté équipes.
  954.                 </p>
  955.             </div>
  956.             
  957.             <div class="pack-compare-grid">
  958.                 <div class="pack-compare-card negative">
  959.                     <div class="pack-compare-title">
  960.                         <i class="bi bi-x-circle-fill"></i>
  961.                         Sans solution dédiée
  962.                     </div>
  963.                     <ul class="pack-compare-list">
  964.                         <li>
  965.                             <i class="bi bi-exclamation-triangle-fill"></i>
  966.                             <span>Des dizaines d'appels quotidiens de parents inquiets</span>
  967.                         </li>
  968.                         <li>
  969.                             <i class="bi bi-exclamation-triangle-fill"></i>
  970.                             <span>Des informations dispersées entre mails, SMS et fichiers</span>
  971.                         </li>
  972.                         <li>
  973.                             <i class="bi bi-exclamation-triangle-fill"></i>
  974.                             <span>Peu de visibilité pour la direction sur ce qui se passe</span>
  975.                         </li>
  976.                         <li>
  977.                             <i class="bi bi-exclamation-triangle-fill"></i>
  978.                             <span>Accompagnateurs submergés par les sollicitations</span>
  979.                         </li>
  980.                     </ul>
  981.                 </div>
  982.                 
  983.                 <div class="pack-compare-card positive">
  984.                     <div class="pack-compare-title">
  985.                         <i class="bi bi-check-circle-fill"></i>
  986.                         Avec le Pack Annuel 5sur5
  987.                     </div>
  988.                     <ul class="pack-compare-list">
  989.                         <li>
  990.                             <i class="bi bi-check-lg"></i>
  991.                             <span>Tous vos séjours gérés dans une même interface</span>
  992.                         </li>
  993.                         <li>
  994.                             <i class="bi bi-check-lg"></i>
  995.                             <span>Parents informés en temps réel, sans solliciter vos équipes</span>
  996.                         </li>
  997.                         <li>
  998.                             <i class="bi bi-check-lg"></i>
  999.                             <span>Direction avec une vision claire sur l'ensemble des séjours</span>
  1000.                         </li>
  1001.                         <li>
  1002.                             <i class="bi bi-check-lg"></i>
  1003.                             <span>Accompagnateurs concentrés sur les enfants</span>
  1004.                         </li>
  1005.                     </ul>
  1006.                 </div>
  1007.             </div>
  1008.         </div>
  1009.     </section>
  1011.     {# ==========================================================================
  1012.        3. SECTION "Ce que le pack apporte"
  1013.        ========================================================================== #}
  1014.     <section class="pack-section pack-benefits">
  1015.         <div class="pack-container">
  1016.             <div class="pack-text-center">
  1017.                 <h2 class="pack-h2">Ce que le Pack Annuel apporte à votre structure</h2>
  1018.             </div>
  1019.             
  1020.             <div class="pack-benefits-grid">
  1021.                 <div class="pack-benefit-card">
  1022.                     <div class="pack-benefit-icon">
  1023.                         <i class="bi bi-emoji-smile"></i>
  1024.                     </div>
  1025.                     <div class="pack-benefit-stat">–70 %</div>
  1026.                     <h3 class="pack-h3">Des équipes libérées</h3>
  1027.                     <p class="pack-text">
  1028.                         Moins d'appels des familles. Animateurs concentrés sur les enfants, pas sur le téléphone.
  1029.                     </p>
  1030.                 </div>
  1031.                 
  1032.                 <div class="pack-benefit-card">
  1033.                     <div class="pack-benefit-icon">
  1034.                         <i class="bi bi-phone-vibrate"></i>
  1035.                     </div>
  1036.                     <div class="pack-benefit-stat">+90 %</div>
  1037.                     <h3 class="pack-h3">Des parents rassurés</h3>
  1038.                     <p class="pack-text">
  1039.                         Photos, messages vocaux et notifications poussent l'info proactivement. Les familles suivent le séjour sans relancer.
  1040.                     </p>
  1041.                 </div>
  1042.                 
  1043.                 <div class="pack-benefit-card">
  1044.                     <div class="pack-benefit-icon">
  1045.                         <i class="bi bi-graph-up-arrow"></i>
  1046.                     </div>
  1047.                     <div class="pack-benefit-stat">100 %</div>
  1048.                     <h3 class="pack-h3">Direction en contrôle</h3>
  1049.                     <p class="pack-text">
  1050.                         Vue globale sur tous vos séjours. Données hébergées en France, conformité RGPD garantie.
  1051.                     </p>
  1052.                 </div>
  1053.             </div>
  1054.         </div>
  1055.     </section>
  1057.     {# ==========================================================================
  1058.        4. SECTION "Impact mesuré"
  1059.        ========================================================================== #}
  1060.     <section class="pack-section pack-metrics">
  1061.         <div class="pack-container">
  1062.             <div class="pack-text-center">
  1063.                 <h2 class="pack-h2">Un impact mesuré sur le terrain</h2>
  1064.                 <p class="pack-lead">Résultats observés auprès de nos partenaires.</p>
  1065.             </div>
  1066.             
  1067.             <div class="pack-metrics-grid">
  1068.                 <div class="pack-metric-item">
  1069.                     <div class="pack-metric-value">–70%</div>
  1070.                     <div class="pack-metric-label">d'appels au standard</div>
  1071.                 </div>
  1072.                 <div class="pack-metric-item">
  1073.                     <div class="pack-metric-value">+90%</div>
  1074.                     <div class="pack-metric-label">de parents connectés</div>
  1075.                 </div>
  1076.                 <div class="pack-metric-item">
  1077.                     <div class="pack-metric-value">300+</div>
  1078.                     <div class="pack-metric-label">séjours accompagnés</div>
  1079.                 </div>
  1080.                 <div class="pack-metric-item">
  1081.                     <div class="pack-metric-value">10k+</div>
  1082.                     <div class="pack-metric-label">parents informés</div>
  1083.                 </div>
  1084.                 <div class="pack-metric-item">
  1085.                     <div class="pack-metric-value">25+</div>
  1086.                     <div class="pack-metric-label">structures partenaires</div>
  1087.                 </div>
  1088.                 <div class="pack-metric-item">
  1089.                     <div class="pack-metric-value">97%</div>
  1090.                     <div class="pack-metric-label">satisfaction parents</div>
  1091.                 </div>
  1092.             </div>
  1093.         </div>
  1094.     </section>
  1096.     {# ==========================================================================
  1097.        5. SECTION "Ils nous font confiance"
  1098.        ========================================================================== #}
  1099.     <section class="pack-section pack-testimonials">
  1100.         <div class="pack-container">
  1101.             <div class="pack-text-center">
  1102.                 <h2 class="pack-h2">Ils nous font confiance</h2>
  1103.                 <p class="pack-lead">Extraits de retours de mairies, écoles et centres de loisirs.</p>
  1104.             </div>
  1105.             
  1106.             <div class="pack-testimonials-grid">
  1107.                 <div class="pack-testimonial-card">
  1108.                     <p class="pack-testimonial-quote">
  1109.                         "Le pack annuel simplifie vraiment notre organisation : tous nos séjours sont gérés dans une seule interface. Les parents adorent recevoir les photos en temps réel."
  1110.                     </p>
  1111.                     <div class="pack-testimonial-author">
  1112.                         <div class="pack-testimonial-avatar">MC</div>
  1113.                         <div>
  1114.                             <div class="pack-testimonial-name">Marie C.</div>
  1115.                             <div class="pack-testimonial-role">Directrice école primaire — 45 familles</div>
  1116.                         </div>
  1117.                     </div>
  1118.                 </div>
  1119.                 
  1120.                 <div class="pack-testimonial-card">
  1121.                     <p class="pack-testimonial-quote">
  1122.                         "On a divisé par deux les sollicitations téléphoniques. L'équipe 5sur5 crée nos séjours pour nous : un vrai gain de temps au quotidien."
  1123.                     </p>
  1124.                     <div class="pack-testimonial-author">
  1125.                         <div class="pack-testimonial-avatar">PD</div>
  1126.                         <div>
  1127.                             <div class="pack-testimonial-name">Philippe D.</div>
  1128.                             <div class="pack-testimonial-role">Responsable centre de loisirs — 30 familles</div>
  1129.                         </div>
  1130.                     </div>
  1131.                 </div>
  1132.                 
  1133.                 <div class="pack-testimonial-card">
  1134.                     <p class="pack-testimonial-quote">
  1135.                         "Rapport qualité/prix imbattable. Parents ravis, encadrants sereins. On renouvelle chaque année sans hésiter."
  1136.                     </p>
  1137.                     <div class="pack-testimonial-author">
  1138.                         <div class="pack-testimonial-avatar">SL</div>
  1139.                         <div>
  1140.                             <div class="pack-testimonial-name">Sophie L.</div>
  1141.                             <div class="pack-testimonial-role">Présidente association — 60 familles</div>
  1142.                         </div>
  1143.                     </div>
  1144.                 </div>
  1145.             </div>
  1146.         </div>
  1147.     </section>
  1149.     {# ==========================================================================
  1150.        6. SECTION "Option Boîte Vocale"
  1151.        ========================================================================== #}
  1152.     <section class="pack-section pack-voicemail" id="option-boite-vocale">
  1153.         <div class="pack-container">
  1154.             <div class="pack-voicemail-grid">
  1155.                 <div>
  1156.                     <span class="pack-badge pack-badge-orange">
  1157.                         <i class="bi bi-mic-fill"></i>
  1158.                         Option recommandée
  1159.                     </span>
  1160.                     
  1161.                     <h2 class="pack-h2">Boîte Vocale automatique</h2>
  1162.                     <p class="pack-lead">
  1163.                         Pour rassurer immédiatement les familles et réduire encore les appels.
  1164.                     </p>
  1165.                     
  1166.                     <ul class="pack-voicemail-list">
  1167.                         <li>
  1168.                             <i class="bi bi-telephone-outbound-fill"></i>
  1169.                             <span>Chaque message vocal déclenche un appel automatique vers les parents</span>
  1170.                         </li>
  1171.                         <li>
  1172.                             <i class="bi bi-clock-fill"></i>
  1173.                             <span>Les familles écoutent le message quand elles le souhaitent, 24h/24</span>
  1174.                         </li>
  1175.                         <li>
  1176.                             <i class="bi bi-gear-fill"></i>
  1177.                             <span>Aucune configuration technique pour vos équipes</span>
  1178.                         </li>
  1179.                     </ul>
  1180.                 </div>
  1181.                 
  1182.                 <div class="pack-voicemail-cta">
  1183.                     <div class="pack-voicemail-cta-title">Option tarifée en complément</div>
  1184.                     <p class="pack-voicemail-cta-text">
  1185.                         Activez la boîte vocale pour rendre vos séjours encore plus sereins pour les familles.
  1186.                     </p>
  1187.                     <a href="{{ path('boite_vocale') }}" class="btn-pack-outline btn-pack-sm">
  1188.                         <i class="bi bi-arrow-right"></i>
  1189.                         Découvrir la Boîte Vocale
  1190.                     </a>
  1191.                 </div>
  1192.             </div>
  1193.         </div>
  1194.     </section>
  1196.     {# ==========================================================================
  1197.        7. SECTION FAQ
  1198.        ========================================================================== #}
  1199.     <section class="pack-section pack-faq">
  1200.         <div class="pack-container">
  1201.             <div class="pack-text-center">
  1202.                 <h2 class="pack-h2">Questions fréquentes</h2>
  1203.             </div>
  1204.             
  1205.             <div class="pack-faq-list">
  1206.                 <div class="pack-faq-item">
  1207.                     <button class="pack-faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
  1208.                         <h3>Combien de séjours sont inclus dans le Pack Annuel ?</h3>
  1209.                         <i class="bi bi-chevron-down"></i>
  1210.                     </button>
  1211.                     <div id="faq1" class="collapse show">
  1212.                         <div class="pack-faq-answer">
  1213.                             <p>Le Pack Annuel à <strong>490 € HT / an</strong> inclut <strong>jusqu'à 25 séjours</strong> dans votre abonnement. Si vous organisez plus de 25 séjours par an, contactez-nous pour une offre sur mesure avec tarif dégressif.</p>
  1214.                         </div>
  1215.                     </div>
  1216.                 </div>
  1217.                 
  1218.                 <div class="pack-faq-item">
  1219.                     <button class="pack-faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
  1220.                         <h3>Y a-t-il une limite d'accompagnateurs ?</h3>
  1221.                         <i class="bi bi-chevron-down"></i>
  1222.                     </button>
  1223.                     <div id="faq2" class="collapse">
  1224.                         <div class="pack-faq-answer">
  1225.                             <p>Non, vous pouvez ajouter <strong>autant d'accompagnateurs que nécessaire</strong> pour tous vos séjours, sans limite ni frais supplémentaires.</p>
  1226.                         </div>
  1227.                     </div>
  1228.                 </div>
  1229.                 
  1230.                 <div class="pack-faq-item">
  1231.                     <button class="pack-faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
  1232.                         <h3>Comment se passe la mise en place ?</h3>
  1233.                         <i class="bi bi-chevron-down"></i>
  1234.                     </button>
  1235.                     <div id="faq3" class="collapse">
  1236.                         <div class="pack-faq-answer">
  1237.                             <p><strong>Mise en place par l'équipe 5sur5 — aucune action de votre part.</strong> Notre équipe s'occupe de tout : création de vos séjours, paramétrage et formation. Déploiement sous 24h.</p>
  1238.                         </div>
  1239.                     </div>
  1240.                 </div>
  1241.                 
  1242.                 <div class="pack-faq-item">
  1243.                     <button class="pack-faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4">
  1244.                         <h3>Peut-on résilier le pack ?</h3>
  1245.                         <i class="bi bi-chevron-down"></i>
  1246.                     </button>
  1247.                     <div id="faq4" class="collapse">
  1248.                         <div class="pack-faq-answer">
  1249.                             <p>Le pack est <strong>sans engagement pluriannuel</strong>. Il est renouvelable chaque année. Vous pouvez ne pas renouveler à l'échéance, sans frais ni pénalité.</p>
  1250.                         </div>
  1251.                     </div>
  1252.                 </div>
  1253.                 
  1254.                 <div class="pack-faq-item">
  1255.                     <button class="pack-faq-question" type="button" data-bs-toggle="collapse" data-bs-target="#faq5" aria-expanded="false" aria-controls="faq5">
  1256.                         <h3>Où sont hébergées les données ?</h3>
  1257.                         <i class="bi bi-chevron-down"></i>
  1258.                     </button>
  1259.                     <div id="faq5" class="collapse">
  1260.                         <div class="pack-faq-answer">
  1261.                             <p>Toutes les données sont <strong>hébergées en France</strong> chez OVH, en conformité totale avec le <strong>RGPD</strong>. Les photos et contenus de séjour sont automatiquement supprimés 2 mois après la fin du séjour.</p>
  1262.                         </div>
  1263.                     </div>
  1264.                 </div>
  1265.             </div>
  1266.         </div>
  1267.     </section>
  1269.     {# ==========================================================================
  1270.        8. SECTION FINALE CTA
  1271.        ========================================================================== #}
  1272.     <section class="pack-section pack-cta-final">
  1273.         <div class="pack-container">
  1274.             <h2 class="pack-h2">Prêt à moderniser vos séjours ?</h2>
  1275.             <p class="pack-lead">
  1276.                 Rejoignez les structures qui ont simplifié la communication avec les familles.
  1277.             </p>
  1278.             
  1279.             <div class="pack-cta-buttons">
  1280.                 <a href="#" class="btn-pack-white" data-bs-toggle="modal" data-bs-target="#packConfirmModal">
  1281.                     <i class="bi bi-lightning-fill"></i>
  1282.                     Activer le Pack Annuel
  1283.                 </a>
  1284.                 <a href="tel:0536282930" class="btn-pack-ghost">
  1285.                     <i class="bi bi-calendar-check"></i>
  1286.                     Programmer une démonstration
  1287.                 </a>
  1288.             </div>
  1289.             
  1290.             <p class="pack-cta-contact">
  1291.                 Ou contactez-nous au <a href="tel:0536282930">05 36 28 29 30</a> pour en parler avec notre équipe.
  1292.             </p>
  1293.         </div>
  1294.     </section>
  1296. </div>
  1298. {# ==========================================================================
  1299.    MODALS
  1300.    ========================================================================== #}
  1302. {# Modal Confirmation Pack #}
  1303. <div class="modal fade" id="packConfirmModal" tabindex="-1" aria-labelledby="packConfirmModalLabel" aria-hidden="true">
  1304.     <div class="modal-dialog modal-dialog-centered">
  1305.         <div class="modal-content" style="border-radius: 16px; border: none;">
  1306.             <div class="modal-header" style="border-bottom: 1px solid #E8EEF2; padding: 24px 28px 20px;">
  1307.                 <h5 class="modal-title" id="packConfirmModalLabel" style="font-weight: 700; font-size: 20px;">Confirmer votre choix</h5>
  1308.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  1309.             </div>
  1310.             <div class="modal-body" style="padding: 28px;">
  1311.                 <div style="background: #F9FBFC; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
  1312.                     <div style="font-weight: 600; font-size: 18px; color: #1A1A1A; margin-bottom: 4px;">Pack Annuel</div>
  1313.                     <div style="font-size: 14px; color: #5A6B7A;">Abonnement annuel • Jusqu'à 25 séjours inclus</div>
  1314.                     <div style="font-size: 28px; font-weight: 700; color: #41A2AA; margin-top: 12px;">490 € HT</div>
  1315.                 </div>
  1316.                 <div style="padding: 16px 0; border-top: 1px solid #E8EEF2;">
  1317.                     <label style="display: flex; align-items: flex-start; gap: 12px; cursor: pointer;">
  1318.                         <input type="checkbox" checked style="margin-top: 4px;">
  1319.                         <span style="font-size: 14px; color: #5A6B7A;">Je souhaite l'onboarding live (inclus)</span>
  1320.                     </label>
  1321.                 </div>
  1322.             </div>
  1323.             <div class="modal-footer" style="border-top: 1px solid #E8EEF2; padding: 20px 28px;">
  1324.                 <a href="{{ path('app_back_Acommpa') }}" class="btn-pack-primary" style="width: 100%;">
  1325.                     <i class="bi bi-arrow-right"></i>
  1326.                     Passer à l'étape suivante
  1327.                 </a>
  1328.             </div>
  1329.         </div>
  1330.     </div>
  1331. </div>
  1333. {# Modal Devis #}
  1334. <div class="modal fade" id="devisModal" tabindex="-1" aria-labelledby="devisModalLabel" aria-hidden="true">
  1335.     <div class="modal-dialog modal-dialog-centered modal-lg">
  1336.         <div class="modal-content" style="border-radius: 16px; border: none;">
  1337.             <div class="modal-header" style="border-bottom: 1px solid #E8EEF2; padding: 24px 28px 20px;">
  1338.                 <h5 class="modal-title" id="devisModalLabel" style="font-weight: 700; font-size: 20px;">Demande de devis — Grand volume (+25 séjours/an)</h5>
  1339.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  1340.             </div>
  1341.             <form action="#" method="POST">
  1342.                 <div class="modal-body" style="padding: 28px;">
  1343.                     <p style="font-size: 14px; color: #5A6B7A; margin-bottom: 24px;">
  1344.                         Remplissez ce formulaire et notre équipe vous contactera rapidement pour vous proposer une offre personnalisée.
  1345.                     </p>
  1346.                     <div class="row g-3">
  1347.                         <div class="col-md-6">
  1348.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Nom de la structure *</label>
  1349.                             <input type="text" class="form-control" required style="border-radius: 8px; padding: 12px 16px;">
  1350.                         </div>
  1351.                         <div class="col-md-6">
  1352.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Type de structure *</label>
  1353.                             <select class="form-select" required style="border-radius: 8px; padding: 12px 16px;">
  1354.                                 <option value="">Sélectionnez...</option>
  1355.                                 <option>École</option>
  1356.                                 <option>Centre de loisirs</option>
  1357.                                 <option>Association</option>
  1358.                                 <option>Mairie</option>
  1359.                                 <option>Voyagiste</option>
  1360.                                 <option>Autre</option>
  1361.                             </select>
  1362.                         </div>
  1363.                         <div class="col-md-6">
  1364.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Nombre de séjours par an *</label>
  1365.                             <input type="number" class="form-control" min="26" required style="border-radius: 8px; padding: 12px 16px;" placeholder="Minimum 26 séjours">
  1366.                         </div>
  1367.                         <div class="col-md-6">
  1368.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Email *</label>
  1369.                             <input type="email" class="form-control" required style="border-radius: 8px; padding: 12px 16px;">
  1370.                         </div>
  1371.                         <div class="col-md-6">
  1372.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Téléphone *</label>
  1373.                             <input type="tel" class="form-control" required style="border-radius: 8px; padding: 12px 16px;">
  1374.                         </div>
  1375.                         <div class="col-12">
  1376.                             <label class="form-label" style="font-weight: 500; font-size: 14px;">Message (optionnel)</label>
  1377.                             <textarea class="form-control" rows="3" style="border-radius: 8px; padding: 12px 16px;"></textarea>
  1378.                         </div>
  1379.                         <div class="col-12">
  1380.                             <label style="display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: #5A6B7A;">
  1381.                                 <input type="checkbox" required style="margin-top: 3px;">
  1382.                                 <span>J'accepte que mes données soient utilisées pour me recontacter concernant cette demande de devis. *</span>
  1383.                             </label>
  1384.                         </div>
  1385.                     </div>
  1386.                 </div>
  1387.                 <div class="modal-footer" style="border-top: 1px solid #E8EEF2; padding: 20px 28px; gap: 12px;">
  1388.                     <button type="button" class="btn-pack-outline btn-pack-sm" data-bs-dismiss="modal">Annuler</button>
  1389.                     <button type="submit" class="btn-pack-primary btn-pack-sm">
  1390.                         <i class="bi bi-send"></i>
  1391.                         Envoyer la demande
  1392.                     </button>
  1393.                 </div>
  1394.             </form>
  1395.         </div>
  1396.     </div>
  1397. </div>
  1399. {% endblock %}