templates/Accueil/boite_vocale.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Boîte Vocale 5sur5 : –70% d'appels entrants — Service unique en France</title>
  7.   <meta name="description" content="Réduisez de 70% vos appels entrants. La Boîte Vocale 5sur5 rassure automatiquement les parents sans effort de vos équipes. Service clé-en-main, activation immédiate.">
  8.   
  9.   <!-- Google Fonts -->
  10.   <link rel="preconnect" href="https://fonts.googleapis.com">
  11.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12.   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
  13.   
  14.   <!-- Bootstrap 5 -->
  15.   <link href="{{ asset('Accueil/vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
  16.   <link href="{{ asset('Accueil/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
  17.   <link href="{{ asset('Accueil/vendors/aos/aos.css') }}" rel="stylesheet">
  18.   
  19.   <style>
  20.     :root {
  21.       --color-primary: #00A5A5;
  22.       --color-secondary: #FFB88C;
  23.       --color-success: #28a745;
  24.       --color-light: #f8f9fa;
  25.       --color-dark: #153643;
  26.       --border-radius: 12px;
  27.       --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  28.       --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  29.     }
  30.     
  31.     body {
  32.       font-family: 'Inter', sans-serif;
  33.       color: var(--color-dark);
  34.       line-height: 1.6;
  35.     }
  36.     
  37.     /* Header Logo */
  38.     .header-logo {
  39.       position: absolute;
  40.       top: 20px;
  41.       right: 20px;
  42.       z-index: 10;
  43.     }
  44.     
  45.     .header-logo img {
  46.       height: 50px;
  47.       width: auto;
  48.       filter: brightness(0) invert(1);
  49.     }
  50.     
  51.     @media (max-width: 768px) {
  52.       .header-logo {
  53.         top: 15px;
  54.         right: 15px;
  55.       }
  56.       
  57.       .header-logo img {
  58.         height: 40px;
  59.       }
  60.     }
  61.     
  62.     /* Hero Section */
  63.    /* HERO PREMIUM */
  64. .hero-section-premium {
  65.     background: #F7FBFB;
  66.     padding: 120px 0 80px;
  67.     position: relative;
  68. }
  70. .header-logo-premium {
  71.     position: absolute;
  72.     top: 25px;
  73.     right: 30px;
  74.     z-index: 10;
  75. }
  77. .header-logo-premium img {
  78.     height: 48px;
  79.     width: auto;
  80. }
  82. .hero-wrapper {
  83.     padding-top: 40px;
  84. }
  86. .hero-badge {
  87.     display: inline-block;
  88.     background: #E2F3F3;
  89.     color: #007C7C;
  90.     padding: 8px 20px;
  91.     border-radius: 50px;
  92.     font-size: 14px;
  93.     font-weight: 700;
  94.     margin-bottom: 25px;
  95.     text-transform: uppercase;
  96.     letter-spacing: 0.5px;
  97. }
  99. .hero-title-premium {
  100.     font-size: 3rem;
  101.     font-weight: 800;
  102.     color: #0E2A32;
  103.     line-height: 1.1;
  104.     margin-bottom: 25px;
  105. }
  107. .text-gradient {
  108.     background: linear-gradient(135deg, #00A5A5, #006F6F);
  109.     -webkit-background-clip: text;
  110.     -webkit-text-fill-color: transparent;
  111. }
  113. .hero-sub-premium {
  114.     font-size: 1.25rem;
  115.     color: #35545A;
  116.     line-height: 1.7;
  117.     margin-bottom: 35px;
  118.     max-width: 520px;
  119. }
  121. .hero-bullets-premium {
  122.     list-style: none;
  123.     padding: 0;
  124.     margin: 0 0 35px 0;
  125. }
  127. .hero-bullets-premium li {
  128.     display: flex;
  129.     align-items: center;
  130.     gap: 12px;
  131.     font-size: 1.15rem;
  132.     font-weight: 500;
  133.     color: #0E2A32;
  134.     margin-bottom: 14px;
  135. }
  137. .hero-bullets-premium i {
  138.     color: #00A5A5;
  139.     font-size: 22px;
  140. }
  142. .btn-premium-primary {
  143.     background: #00A5A5;
  144.     color: white;
  145.     padding: 16px 34px;
  146.     font-size: 1.15rem;
  147.     font-weight: 700;
  148.     border-radius: 12px;
  149.     display: inline-block;
  150.     text-decoration: none;
  151.     transition: all .25s ease;
  152. }
  154. .btn-premium-primary:hover {
  155.     background: #008989;
  156.     transform: translateY(-3px);
  157.     box-shadow: 0 8px 22px rgba(0, 165, 165, 0.28);
  158. }
  160. .btn-premium-secondary {
  161.     background: transparent;
  162.     border: 2px solid #00A5A5;
  163.     color: #00A5A5;
  164.     padding: 16px 34px;
  165.     font-size: 1.15rem;
  166.     font-weight: 700;
  167.     border-radius: 12px;
  168.     display: inline-block;
  169.     margin-left: 12px;
  170.     text-decoration: none;
  171.     transition: all .25s ease;
  172. }
  174. .btn-premium-secondary:hover {
  175.     background: #00A5A5;
  176.     color: white;
  177.     transform: translateY(-3px);
  178. }
  179. .hero-section-premium {
  180.     background: linear-gradient(
  181.         135deg,
  182.         #F8FEFE 0%,
  183.         #F1F7F7 45%,
  184.         #EBF3F3 100%
  185.     );
  186.     padding: 120px 0 80px;
  187.     position: relative;
  188.     overflow: hidden;
  189. }
  191. /* Halo turquoise */
  192. .hero-section-premium::before {
  193.     content: '';
  194.     position: absolute;
  195.     top: -120px;
  196.     left: -160px;
  197.     width: 420px;
  198.     height: 420px;
  199.     background: radial-gradient(
  200.         circle,
  201.         rgba(0,165,165,0.12),
  202.         transparent 70%
  203.     );
  204.     filter: blur(40px);
  205.     border-radius: 50%;
  206.     z-index: 0;
  207. }
  209. /* Halo orange léger */
  210. .hero-section-premium::after {
  211.     content: '';
  212.     position: absolute;
  213.     bottom: -140px;
  214.     right: -140px;
  215.     width: 380px;
  216.     height: 380px;
  217.     background: radial-gradient(
  218.         circle,
  219.         rgba(255,184,140,0.12),
  220.         transparent 65%
  221.     );
  222.     filter: blur(45px);
  223.     border-radius: 50%;
  224.     z-index: 0;
  225. }
  228. @media (max-width: 768px) {
  229.     .hero-title-premium {
  230.         font-size: 2.2rem;
  231.     }
  233.     .hero-img-premium {
  234.         margin-top: 40px;
  235.     }
  237.     .btn-premium-primary,
  238.     .btn-premium-secondary {
  239.         width: 100%;
  240.         margin: 0 0 12px 0;
  241.     }
  243.     .header-logo-premium img {
  244.         height: 40px;
  245.     }
  246. }
  248.     
  249.     .badge-unique {
  250.       display: inline-block;
  251.       background: rgba(255,255,255,0.2);
  252.       backdrop-filter: blur(10px);
  253.       color: white;
  254.       padding: 10px 24px;
  255.       border-radius: 50px;
  256.       font-size: 14px;
  257.       font-weight: 700;
  258.       margin-bottom: 24px;
  259.       border: 1px solid rgba(255,255,255,0.3);
  260.       text-transform: uppercase;
  261.       letter-spacing: 0.5px;
  262.     }
  263.     
  264.     .hero-title {
  265.       font-size: 3.5rem;
  266.       font-weight: 800;
  267.       margin-bottom: 28px;
  268.       line-height: 1.1;
  269.     }
  270.     
  271.     .hero-subtitle {
  272.       font-size: 1.4rem;
  273.       margin-bottom: 40px;
  274.       opacity: 0.95;
  275.       line-height: 1.6;
  276.       font-weight: 400;
  277.     }
  278.     
  279.     .hero-bullets {
  280.       background: rgba(255,255,255,0.12);
  281.       padding: 30px 40px;
  282.       border-radius: var(--border-radius);
  283.       margin: 40px 0;
  284.       border-left: 4px solid var(--color-secondary);
  285.     }
  286.     
  287.     .hero-bullets ul {
  288.       list-style: none;
  289.       padding: 0;
  290.       margin: 0;
  291.     }
  292.     
  293.     .hero-bullets li {
  294.       display: flex;
  295.       align-items: center;
  296.       gap: 12px;
  297.       margin-bottom: 16px;
  298.       font-size: 1.1rem;
  299.       font-weight: 500;
  300.     }
  301.     
  302.     .hero-bullets li:last-child {
  303.       margin-bottom: 0;
  304.     }
  305.     
  306.     .hero-bullets li i {
  307.       font-size: 24px;
  308.       color: var(--color-secondary);
  309.     }
  310.     
  311.     .btn-hero-primary {
  312.       background: white;
  313.       color: var(--color-primary);
  314.       padding: 18px 48px;
  315.       font-size: 1.2rem;
  316.       font-weight: 700;
  317.       border-radius: var(--border-radius);
  318.       border: none;
  319.       transition: all 0.3s ease;
  320.       text-decoration: none;
  321.       display: inline-block;
  322.       margin-right: 16px;
  323.       margin-bottom: 12px;
  324.     }
  325.     
  326.     .btn-hero-primary:hover {
  327.       background: var(--color-secondary);
  328.       color: white;
  329.       transform: translateY(-3px);
  330.       box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  331.     }
  332.     
  333.     .btn-hero-secondary {
  334.       background: transparent;
  335.       color: white;
  336.       padding: 18px 48px;
  337.       font-size: 1.2rem;
  338.       font-weight: 600;
  339.       border-radius: var(--border-radius);
  340.       border: 2px solid white;
  341.       transition: all 0.3s ease;
  342.       text-decoration: none;
  343.       display: inline-block;
  344.       margin-bottom: 12px;
  345.     }
  346.     
  347.     .btn-hero-secondary:hover {
  348.       background: white;
  349.       color: var(--color-primary);
  350.       transform: translateY(-3px);
  351.     }
  352.     
  353.     /* Section Styles */
  354.     .section-padding {
  355.       padding: 100px 0;
  356.     }
  357.     
  358.     .section-title {
  359.       font-size: 2.8rem;
  360.       font-weight: 800;
  361.       color: var(--color-dark);
  362.       margin-bottom: 24px;
  363.       text-align: center;
  364.       line-height: 1.2;
  365.     }
  366.     
  367.     .section-subtitle {
  368.       font-size: 1.3rem;
  369.       color: #6c757d;
  370.       text-align: center;
  371.       margin-bottom: 60px;
  372.       max-width: 800px;
  373.       margin-left: auto;
  374.       margin-right: auto;
  375.       font-weight: 400;
  376.     }
  377.     
  378.     /* Benefits Section */
  379.     .benefit-card {
  380.       background: white;
  381.       padding: 50px 40px;
  382.       border-radius: var(--border-radius);
  383.       box-shadow: var(--shadow-sm);
  384.       height: 100%;
  385.       transition: transform 0.3s ease, box-shadow 0.3s ease;
  386.       border: 1px solid #e9ecef;
  387.       position: relative;
  388.     }
  389.     
  390.     .benefit-card:hover {
  391.       transform: translateY(-8px);
  392.       box-shadow: var(--shadow-md);
  393.       border-color: var(--color-primary);
  394.     }
  395.     
  396.     .benefit-icon {
  397.       width: 80px;
  398.       height: 80px;
  399.       background: linear-gradient(135deg, var(--color-primary), #008a8a);
  400.       border-radius: 18px;
  401.       display: flex;
  402.       align-items: center;
  403.       justify-content: center;
  404.       color: white;
  405.       font-size: 36px;
  406.       margin-bottom: 28px;
  407.     }
  408.     
  409.     .benefit-title {
  410.       font-size: 1.5rem;
  411.       font-weight: 700;
  412.       color: var(--color-dark);
  413.       margin-bottom: 20px;
  414.       line-height: 1.3;
  415.     }
  416.     
  417.     .benefit-text {
  418.       color: #495057;
  419.       line-height: 1.8;
  420.       font-size: 1.05rem;
  421.     }
  422.     
  423.     .benefit-highlight {
  424.       color: var(--color-primary);
  425.       font-weight: 700;
  426.     }
  427.     
  428.     /* Functioning Section */
  429.     .functioning-section {
  430.       background: var(--color-light);
  431.     }
  432.     
  433.     .functioning-intro {
  434.       text-align: center;
  435.       max-width: 900px;
  436.       margin: 0 auto 70px;
  437.       font-size: 1.2rem;
  438.       color: #495057;
  439.       font-weight: 500;
  440.     }
  441.     
  442.     .functioning-card {
  443.       background: white;
  444.       padding: 50px 40px;
  445.       border-radius: var(--border-radius);
  446.       box-shadow: var(--shadow-sm);
  447.       height: 100%;
  448.       border: 2px solid transparent;
  449.       transition: all 0.3s ease;
  450.     }
  451.     
  452.     .functioning-card:hover {
  453.       border-color: var(--color-primary);
  454.       box-shadow: var(--shadow-md);
  455.     }
  456.     
  457.     .functioning-header {
  458.       display: flex;
  459.       align-items: center;
  460.       gap: 24px;
  461.       margin-bottom: 40px;
  462.       padding-bottom: 24px;
  463.       border-bottom: 3px solid var(--color-light);
  464.     }
  465.     
  466.     .functioning-icon {
  467.       width: 70px;
  468.       height: 70px;
  469.       background: linear-gradient(135deg, var(--color-secondary), #ff9d6b);
  470.       border-radius: 16px;
  471.       display: flex;
  472.       align-items: center;
  473.       justify-content: center;
  474.       color: white;
  475.       font-size: 32px;
  476.     }
  477.     
  478.     .functioning-title {
  479.       font-size: 1.8rem;
  480.       font-weight: 700;
  481.       color: var(--color-dark);
  482.       margin: 0;
  483.     }
  484.     
  485.     .functioning-step {
  486.       display: flex;
  487.       align-items: flex-start;
  488.       gap: 24px;
  489.       margin-bottom: 28px;
  490.       padding: 24px;
  491.       background: var(--color-light);
  492.       border-radius: var(--border-radius);
  493.       transition: all 0.3s ease;
  494.     }
  495.     
  496.     .functioning-step:hover {
  497.       background: #e9ecef;
  498.       transform: translateX(5px);
  499.     }
  500.     
  501.     .step-number {
  502.       width: 48px;
  503.       height: 48px;
  504.       background: var(--color-primary);
  505.       color: white;
  506.       border-radius: 50%;
  507.       display: flex;
  508.       align-items: center;
  509.       justify-content: center;
  510.       font-weight: 800;
  511.       font-size: 1.2rem;
  512.       flex-shrink: 0;
  513.     }
  514.     
  515.     .step-text {
  516.       flex: 1;
  517.       color: var(--color-dark);
  518.       font-size: 1.1rem;
  519.       line-height: 1.7;
  520.       font-weight: 500;
  521.     }
  522.     
  523.     /* Features Section */
  524.     .features-section {
  525.       background: white;
  526.     }
  527.     
  528.     .feature-item {
  529.       display: flex;
  530.       align-items: center;
  531.       gap: 24px;
  532.       padding: 32px;
  533.       background: var(--color-light);
  534.       border-radius: var(--border-radius);
  535.       box-shadow: var(--shadow-sm);
  536.       margin-bottom: 24px;
  537.       transition: all 0.3s ease;
  538.       border-left: 4px solid transparent;
  539.     }
  540.     
  541.     .feature-item:hover {
  542.       transform: translateX(8px);
  543.       border-left-color: var(--color-primary);
  544.       box-shadow: var(--shadow-md);
  545.       background: white;
  546.     }
  547.     
  548.     .feature-icon {
  549.       width: 60px;
  550.       height: 60px;
  551.       background: linear-gradient(135deg, var(--color-primary), #008a8a);
  552.       border-radius: 14px;
  553.       display: flex;
  554.       align-items: center;
  555.       justify-content: center;
  556.       color: white;
  557.       font-size: 28px;
  558.       flex-shrink: 0;
  559.     }
  560.     
  561.     .feature-text {
  562.       font-size: 1.15rem;
  563.       color: var(--color-dark);
  564.       font-weight: 600;
  565.       margin: 0;
  566.     }
  567.     
  568.     /* Pricing Section */
  569.     .pricing-section {
  570.       background: var(--color-light);
  571.     }
  572.     
  573.     .pricing-card {
  574.       background: white;
  575.       border-radius: var(--border-radius);
  576.       box-shadow: var(--shadow-sm);
  577.       padding: 50px 40px;
  578.       text-align: center;
  579.       height: 100%;
  580.       transition: all 0.3s ease;
  581.       border: 3px solid transparent;
  582.       position: relative;
  583.     }
  584.     
  585.     .pricing-card:hover {
  586.       transform: translateY(-10px);
  587.       box-shadow: var(--shadow-md);
  588.       border-color: var(--color-primary);
  589.     }
  590.     
  591.     .pricing-card.featured {
  592.       border-color: var(--color-primary);
  593.       background: linear-gradient(135deg, white 0%, #f0fdfd 100%);
  594.       transform: scale(1.05);
  595.     }
  596.     
  597.     .pricing-card.featured:hover {
  598.       transform: scale(1.05) translateY(-10px);
  599.     }
  600.     
  601.     .pricing-badge {
  602.       position: absolute;
  603.       top: -16px;
  604.       left: 50%;
  605.       transform: translateX(-50%);
  606.       background: linear-gradient(135deg, var(--color-secondary), #ff9d6b);
  607.       color: white;
  608.       padding: 8px 24px;
  609.       border-radius: 50px;
  610.       font-size: 13px;
  611.       font-weight: 700;
  612.       text-transform: uppercase;
  613.       letter-spacing: 0.5px;
  614.       box-shadow: 0 4px 12px rgba(255,184,140,0.4);
  615.     }
  616.     
  617.     .pricing-title {
  618.       font-size: 1.6rem;
  619.       font-weight: 700;
  620.       color: var(--color-dark);
  621.       margin-bottom: 20px;
  622.     }
  623.     
  624.     .pricing-price {
  625.       font-size: 3.5rem;
  626.       font-weight: 800;
  627.       color: var(--color-primary);
  628.       margin: 30px 0;
  629.       line-height: 1;
  630.     }
  631.     
  632.     .pricing-price-small {
  633.       font-size: 1.3rem;
  634.       color: #6c757d;
  635.       font-weight: 500;
  636.     }
  637.     
  638.     .pricing-description {
  639.       color: #495057;
  640.       margin-bottom: 35px;
  641.       line-height: 1.8;
  642.       min-height: 100px;
  643.       font-size: 1.05rem;
  644.     }
  645.     
  646.     .pricing-features {
  647.       list-style: none;
  648.       padding: 0;
  649.       margin: 35px 0;
  650.       text-align: left;
  651.     }
  652.     
  653.     .pricing-features li {
  654.       padding: 12px 0;
  655.       color: var(--color-dark);
  656.       display: flex;
  657.       align-items: center;
  658.       gap: 12px;
  659.       font-size: 1.05rem;
  660.     }
  661.     
  662.     .pricing-features li i {
  663.       color: var(--color-success);
  664.       font-size: 22px;
  665.     }
  666.     
  667.     .btn-pricing {
  668.       width: 100%;
  669.       padding: 16px 30px;
  670.       font-size: 1.15rem;
  671.       font-weight: 700;
  672.       border-radius: var(--border-radius);
  673.       border: none;
  674.       transition: all 0.3s ease;
  675.       text-decoration: none;
  676.       display: inline-block;
  677.       text-align: center;
  678.     }
  679.     
  680.     .btn-pricing-primary {
  681.       background: var(--color-primary);
  682.       color: white;
  683.     }
  684.     
  685.     .btn-pricing-primary:hover {
  686.       background: #008a8a;
  687.       color: white;
  688.       transform: translateY(-3px);
  689.       box-shadow: 0 6px 20px rgba(0,165,165,0.4);
  690.     }
  691.     
  692.     .btn-pricing-outline {
  693.       background: transparent;
  694.       color: var(--color-primary);
  695.       border: 3px solid var(--color-primary);
  696.     }
  697.     
  698.     .btn-pricing-outline:hover {
  699.       background: var(--color-primary);
  700.       color: white;
  701.       transform: translateY(-3px);
  702.     }
  703.     
  704.     /* CTA Section */
  705.     .cta-section {
  706.       background: linear-gradient(135deg, var(--color-primary) 0%, #008a8a 100%);
  707.       color: white;
  708.       padding: 100px 0;
  709.       text-align: center;
  710.     }
  711.     
  712.     .cta-title {
  713.       font-size: 3rem;
  714.       font-weight: 800;
  715.       margin-bottom: 28px;
  716.       line-height: 1.2;
  717.     }
  718.     
  719.     .cta-text {
  720.       font-size: 1.3rem;
  721.       margin-bottom: 50px;
  722.       opacity: 0.95;
  723.       max-width: 700px;
  724.       margin-left: auto;
  725.       margin-right: auto;
  726.       line-height: 1.7;
  727.     }
  728.     
  729.     .cta-bullets {
  730.       list-style: none;
  731.       padding: 0;
  732.       margin: 0 0 50px 0;
  733.       display: flex;
  734.       flex-wrap: wrap;
  735.       justify-content: center;
  736.       gap: 30px;
  737.     }
  738.     
  739.     .cta-bullets li {
  740.       display: flex;
  741.       align-items: center;
  742.       gap: 10px;
  743.       font-size: 1.1rem;
  744.       font-weight: 500;
  745.     }
  746.     
  747.     .cta-bullets li i {
  748.       font-size: 24px;
  749.       color: var(--color-secondary);
  750.     }
  751.     
  752.     .btn-cta {
  753.       padding: 20px 50px;
  754.       font-size: 1.2rem;
  755.       font-weight: 700;
  756.       border-radius: var(--border-radius);
  757.       margin: 0 12px 12px;
  758.       transition: all 0.3s ease;
  759.       text-decoration: none;
  760.       display: inline-block;
  761.     }
  762.     
  763.     .btn-cta-primary {
  764.       background: white;
  765.       color: var(--color-primary);
  766.     }
  767.     
  768.     .btn-cta-primary:hover {
  769.       background: var(--color-secondary);
  770.       color: white;
  771.       transform: translateY(-3px);
  772.       box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  773.     }
  774.     
  775.     .btn-cta-outline {
  776.       background: transparent;
  777.       color: white;
  778.       border: 3px solid white;
  779.     }
  780.     
  781.     .btn-cta-outline:hover {
  782.       background: white;
  783.       color: var(--color-primary);
  784.       transform: translateY(-3px);
  785.     }
  786.     
  787.     /* Footer */
  788.     .footer-simple {
  789.       background: var(--color-dark);
  790.       color: white;
  791.       padding: 50px 0;
  792.     }
  793.     
  794.     .footer-content {
  795.       text-align: center;
  796.     }
  797.     
  798.     .footer-item {
  799.       margin: 18px 0;
  800.       color: rgba(255,255,255,0.85);
  801.       font-size: 1.05rem;
  802.     }
  803.     
  804.     .footer-item a {
  805.       color: white;
  806.       text-decoration: none;
  807.       transition: color 0.3s ease;
  808.     }
  809.     
  810.     .footer-item a:hover {
  811.       color: var(--color-secondary);
  812.     }
  813.     
  814.     /* Responsive */
  815.     @media (max-width: 768px) {
  816.       .hero-title {
  817.         font-size: 2.2rem;
  818.       }
  819.       
  820.       .hero-subtitle {
  821.         font-size: 1.15rem;
  822.       }
  823.       
  824.       .section-title {
  825.         font-size: 2rem;
  826.       }
  827.       
  828.       .section-padding {
  829.         padding: 60px 0;
  830.       }
  831.       
  832.       .pricing-price {
  833.         font-size: 2.8rem;
  834.       }
  835.       
  836.       .cta-title {
  837.         font-size: 2.2rem;
  838.       }
  839.       
  840.       .btn-hero-primary,
  841.       .btn-hero-secondary {
  842.         width: 100%;
  843.         margin-right: 0;
  844.       }
  845.     }
  846.   </style>
  847. </head>
  848. <body>
  850.   <!-- HERO SECTION -->
  851.  <!-- HERO PREMIUM SECTION -->
  852. <section class="hero-section-premium">
  853.     <div class="header-logo-premium">
  854.         <img src="{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}" alt="5sur5 Séjour">
  855.     </div>
  857.     <div class="container">
  858.         <div class="row align-items-center hero-wrapper">
  860.             <!-- Text -->
  861.             <div class="col-lg-6" data-aos="fade-right">
  863.                 <div class="hero-badge">Service unique en France</div>
  865.                 <h1 class="hero-title-premium">
  866.                     Réduisez <span class="text-gradient">70% des appels</span>.  
  867.                     Rassurez instantanément les parents.
  868.                 </h1>
  870.                 <p class="hero-sub-premium">
  871.                     Une Boîte Vocale automatique qui appelle les familles dès qu’un message est enregistré.
  872.                     Sans application, sans configuration. Vos équipes gagnent du temps dès aujourd’hui.
  873.                 </p>
  875.                 <ul class="hero-bullets-premium">
  876.                     <li><i class="bi bi-check-circle-fill"></i> Appels automatiques aux parents</li>
  877.                     <li><i class="bi bi-check-circle-fill"></i> Activation en 2 minutes</li>
  878.                     <li><i class="bi bi-check-circle-fill"></i> Zéro charge pour vos équipes</li>
  879.                 </ul>
  881.                 <div class="hero-cta mt-4">
  882.                     <a href="{{ path('checkout_boite_vocale', {'pack': '35'}) }}" class="btn-premium-primary">
  883.                         <i class="bi bi-cart-plus me-2"></i>Activer la Boîte Vocale
  884.                     </a>
  886.                     <a href="#contact" class="btn-premium-secondary">
  887.                         <i class="bi bi-telephone me-2"></i>Parler à un conseiller
  888.                     </a>
  889.                 </div>
  890.             </div>
  892.             <!-- Image -->
  893.             <div class="col-lg-6 text-center" data-aos="fade-left">
  894.                 <img src="{{ asset('Accueil/imagesAccueil/feature.png') }}" alt="Boîte Vocale 5sur5" class="hero-img-premium">
  895.             </div>
  896.         </div>
  897.     </div>
  898. </section>
  901.   <!-- BENEFITS SECTION -->
  902.   <section class="section-padding">
  903.     <div class="container">
  904.       <h2 class="section-title" data-aos="fade-up">Pourquoi les structures choisissent la Boîte Vocale 5sur5 ?</h2>
  905.       <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
  906.         Quatre bénéfices concrets qui transforment la gestion de vos séjours
  907.       </p>
  908.       
  909.       <div class="row g-4">
  910.         <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
  911.           <div class="benefit-card">
  912.             <div class="benefit-icon">
  913.               <i class="bi bi-telephone-inbound"></i>
  914.             </div>
  915.             <h3 class="benefit-title">Moins d'appels = équipes libérées</h3>
  916.             <p class="benefit-text">
  917.               Jusqu'à <span class="benefit-highlight">–70% d'appels entrants</span>. Vos animateurs ne sont plus dérangés par les questions répétitives. Les parents sont informés automatiquement dès qu'un message est enregistré. Vos équipes se concentrent sur l'encadrement, pas sur le téléphone.
  918.             </p>
  919.           </div>
  920.         </div>
  921.         
  922.         <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
  923.           <div class="benefit-card">
  924.             <div class="benefit-icon">
  925.               <i class="bi bi-heart-pulse"></i>
  926.             </div>
  927.             <h3 class="benefit-title">Parents rassurés automatiquement</h3>
  928.             <p class="benefit-text">
  929.               Chaque message vocal déclenche <span class="benefit-highlight">un appel automatique</span> aux parents. Pas besoin de les contacter : ils reçoivent l'information instantanément. Ils peuvent réécouter le message autant de fois qu'ils le souhaitent, 24h/24. La voix rassure mieux qu'un SMS.
  930.             </p>
  931.           </div>
  932.         </div>
  933.         
  934.         <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
  935.           <div class="benefit-card">
  936.             <div class="benefit-icon">
  937.               <i class="bi bi-hand-thumbs-up"></i>
  938.             </div>
  939.             <h3 class="benefit-title">Ultra simple : 1 bouton = 1 message</h3>
  940.             <p class="benefit-text">
  941.               <span class="benefit-highlight">Aucun outil à installer</span>, aucune formation nécessaire. L'accompagnateur appelle un numéro, enregistre son message, c'est tout. Le message est publié automatiquement. Vos équipes l'adoptent en 30 secondes.
  942.             </p>
  943.           </div>
  944.         </div>
  945.         
  946.         <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
  947.           <div class="benefit-card">
  948.             <div class="benefit-icon">
  949.               <i class="bi bi-headset"></i>
  950.             </div>
  951.             <h3 class="benefit-title">Support 5sur5 : installation, configuration, accompagnateurs, parents</h3>
  952.             <p class="benefit-text">
  953.               <span class="benefit-highlight">Service 100% clé-en-main</span>. Nous installons, configurons, formons vos accompagnateurs et assistons les parents. Vous n'avez rien à faire. Support illimité pendant toute la durée du séjour.
  954.             </p>
  955.           </div>
  956.         </div>
  957.       </div>
  958.     </div>
  959.   </section>
  961.   <!-- FUNCTIONING SECTION -->
  962.   <section class="section-padding functioning-section">
  963.     <div class="container">
  964.       <h2 class="section-title" data-aos="fade-up">Comment ça fonctionne ?</h2>
  965.       <p class="functioning-intro" data-aos="fade-up" data-aos-delay="100">
  966.         Deux numéros distincts : un pour vos accompagnateurs (enregistrement), un pour les familles (écoute). Simple, sécurisé, efficace.
  967.       </p>
  968.       
  969.       <div class="row g-4">
  970.         <div class="col-lg-6" data-aos="fade-right">
  971.           <div class="functioning-card">
  972.             <div class="functioning-header">
  973.               <div class="functioning-icon">
  974.                 <i class="bi bi-person-badge"></i>
  975.               </div>
  976.               <h3 class="functioning-title">Côté accompagnateur</h3>
  977.             </div>
  978.             <div class="functioning-step">
  979.               <div class="step-number">1</div>
  980.               <div class="step-text"><strong>Appeler le numéro dédié</strong> — Numéro privé fourni par 5sur5</div>
  981.             </div>
  982.             <div class="functioning-step">
  983.               <div class="step-number">2</div>
  984.               <div class="step-text"><strong>Enregistrer le message</strong> — Parler naturellement, comme un SMS vocal</div>
  985.             </div>
  986.             <div class="functioning-step">
  987.               <div class="step-number">3</div>
  988.               <div class="step-text"><strong>Publier automatiquement</strong> — Le message est immédiatement disponible pour les parents</div>
  989.             </div>
  990.           </div>
  991.         </div>
  992.         
  993.         <div class="col-lg-6" data-aos="fade-left">
  994.           <div class="functioning-card">
  995.             <div class="functioning-header">
  996.               <div class="functioning-icon">
  997.                 <i class="bi bi-people"></i>
  998.               </div>
  999.               <h3 class="functioning-title">Côté parents</h3>
  1000.             </div>
  1001.             <div class="functioning-step">
  1002.               <div class="step-number">1</div>
  1003.               <div class="step-text"><strong>Recevoir un appel automatique</strong> — Dès qu'un nouveau message est enregistré</div>
  1004.             </div>
  1005.             <div class="functioning-step">
  1006.               <div class="step-number">2</div>
  1007.               <div class="step-text"><strong>Appeler le numéro du séjour</strong> — Numéro public communiqué aux familles</div>
  1008.             </div>
  1009.             <div class="functioning-step">
  1010.               <div class="step-number">3</div>
  1011.               <div class="step-text"><strong>Écouter et réécouter en illimité</strong> — 24h/24, autant de fois qu'ils le souhaitent</div>
  1012.             </div>
  1013.           </div>
  1014.         </div>
  1015.       </div>
  1016.       
  1017.       <div class="row mt-5">
  1018.         <div class="col-12" data-aos="fade-up">
  1019.           <img src="{{ asset('Accueil/imagesAccueil/vocal_fonctionnement.png') }}" alt="Fonctionnement Boîte Vocale 5sur5" class="img-fluid rounded w-100">
  1020.         </div>
  1021.       </div>
  1022.     </div>
  1023.   </section>
  1025.   <!-- FEATURES SECTION -->
  1026.   <section class="section-padding features-section">
  1027.     <div class="container">
  1028.       <h2 class="section-title" data-aos="fade-up">Une solution simple, automatique et sans charge</h2>
  1029.       <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
  1030.         Tout ce dont vous avez besoin, sans contrainte
  1031.       </p>
  1032.       
  1033.       <div class="row">
  1034.         <div class="col-lg-6" data-aos="fade-right">
  1035.           <div class="feature-item">
  1036.             <div class="feature-icon">
  1037.               <i class="bi bi-calendar-check"></i>
  1038.             </div>
  1039.             <p class="feature-text">Disponible toute la durée du séjour — Activation immédiate, désactivation automatique</p>
  1040.           </div>
  1041.         </div>
  1042.         
  1043.         <div class="col-lg-6" data-aos="fade-left">
  1044.           <div class="feature-item">
  1045.             <div class="feature-icon">
  1046.               <i class="bi bi-infinity"></i>
  1047.             </div>
  1048.             <p class="feature-text">Messages illimités — Aucune restriction, enregistrez autant de messages que nécessaire</p>
  1049.           </div>
  1050.         </div>
  1051.         
  1052.         <div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
  1053.           <div class="feature-item">
  1054.             <div class="feature-icon">
  1055.               <i class="bi bi-telephone-forward"></i>
  1056.             </div>
  1057.             <p class="feature-text">Appels automatiques aux parents — Chaque nouveau message déclenche un appel immédiat</p>
  1058.           </div>
  1059.         </div>
  1060.         
  1061.         <div class="col-lg-6" data-aos="fade-left" data-aos-delay="100">
  1062.           <div class="feature-item">
  1063.             <div class="feature-icon">
  1064.               <i class="bi bi-clock-history"></i>
  1065.             </div>
  1066.             <p class="feature-text">Écoute illimitée 24h/24 — Les parents écoutent quand ils veulent, où ils veulent</p>
  1067.           </div>
  1068.         </div>
  1069.         
  1070.         <div class="col-lg-6" data-aos="fade-right" data-aos-delay="200">
  1071.           <div class="feature-item">
  1072.             <div class="feature-icon">
  1073.               <i class="bi bi-shield-lock"></i>
  1074.             </div>
  1075.             <p class="feature-text">RGPD & données hébergées en France — Conformité totale, sécurité maximale</p>
  1076.           </div>
  1077.         </div>
  1078.         
  1079.         <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
  1080.           <div class="feature-item">
  1081.             <div class="feature-icon">
  1082.               <i class="bi bi-phone"></i>
  1083.             </div>
  1084.             <p class="feature-text">Zéro application à installer — Fonctionne avec n'importe quel téléphone</p>
  1085.           </div>
  1086.         </div>
  1087.         
  1088.         <div class="col-lg-12" data-aos="fade-up" data-aos-delay="300">
  1089.           <div class="feature-item">
  1090.             <div class="feature-icon">
  1091.               <i class="bi bi-key"></i>
  1092.             </div>
  1093.             <p class="feature-text">Service 100% clé-en-main pour les structures — Installation, configuration, support : tout est géré par 5sur5</p>
  1094.           </div>
  1095.         </div>
  1096.       </div>
  1097.     </div>
  1098.   </section>
  1100.   <!-- PRICING SECTION -->
  1101.   <section class="section-padding pricing-section">
  1102.     <div class="container">
  1103.       <h2 class="section-title" data-aos="fade-up">Nos offres</h2>
  1104.       <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
  1105.         Une tarification simple, adaptée à la taille de votre séjour. Rentabilisé dès le premier séjour.
  1106.       </p>
  1107.       
  1108.       <div class="row g-4">
  1109.         <!-- Pack 35 enfants -->
  1110.         <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
  1111.           <div class="pricing-card">
  1112.             <h3 class="pricing-title">Pack 35 enfants</h3>
  1113.             <div class="pricing-price">
  1114.               40€ HT
  1115.             </div>
  1116.             <p class="pricing-description">
  1117.               <strong>Rentabilisé dès le premier séjour.</strong> Boîte vocale illimitée pour toute la durée du séjour. Service complet, activation en moins de 2 minutes. Aucun engagement.
  1118.             </p>
  1119.             <ul class="pricing-features">
  1120.               <li><i class="bi bi-check-circle-fill"></i> Messages illimités</li>
  1121.               <li><i class="bi bi-check-circle-fill"></i> Appels automatiques</li>
  1122.               <li><i class="bi bi-check-circle-fill"></i> Support inclus</li>
  1123.               <li><i class="bi bi-check-circle-fill"></i> Activation immédiate</li>
  1124.             </ul>
  1125.             <a href="{{ path('checkout_boite_vocale', {'pack': '35'}) }}" class="btn btn-pricing btn-pricing-primary">Commander</a>
  1126.           </div>
  1127.         </div>
  1128.         
  1129.         <!-- Pack 70 enfants -->
  1130.         <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
  1131.           <div class="pricing-card featured">
  1132.             <span class="pricing-badge">Le plus choisi</span>
  1133.             <h3 class="pricing-title">Pack 70 enfants</h3>
  1134.             <div class="pricing-price">
  1135.               70€ HT
  1136.             </div>
  1137.             <p class="pricing-description">
  1138.               <strong>Idéal pour les groupes intermédiaires.</strong> Messages illimités, appels automatiques, support prioritaire. Configuration rapide, aucun engagement. Le meilleur rapport qualité-prix.
  1139.             </p>
  1140.             <ul class="pricing-features">
  1141.               <li><i class="bi bi-check-circle-fill"></i> Messages illimités</li>
  1142.               <li><i class="bi bi-check-circle-fill"></i> Appels automatiques</li>
  1143.               <li><i class="bi bi-check-circle-fill"></i> Support prioritaire</li>
  1144.               <li><i class="bi bi-check-circle-fill"></i> Configuration rapide</li>
  1145.               <li><i class="bi bi-check-circle-fill"></i> Activation en moins de 2 minutes</li>
  1146.             </ul>
  1147.             <a href="{{ path('checkout_boite_vocale', {'pack': '70'}) }}" class="btn btn-pricing btn-pricing-primary">Commander</a>
  1148.           </div>
  1149.         </div>
  1150.         
  1151.         <!-- Grand séjour -->
  1152.         <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
  1153.           <div class="pricing-card">
  1154.             <h3 class="pricing-title">Grand séjour</h3>
  1155.             <div class="pricing-price">
  1156.               Sur<span class="pricing-price-small"> devis</span>
  1157.             </div>
  1158.             <p class="pricing-description">
  1159.               <strong>Solution adaptée aux grands groupes ou séjours multiples.</strong> Tarif personnalisé, accompagnement dédié, séjours multiples. Contactez-nous pour un devis sur mesure.
  1160.             </p>
  1161.             <ul class="pricing-features">
  1162.               <li><i class="bi bi-check-circle-fill"></i> Tarif personnalisé</li>
  1163.               <li><i class="bi bi-check-circle-fill"></i> Accompagnement dédié</li>
  1164.               <li><i class="bi bi-check-circle-fill"></i> Séjours multiples</li>
  1165.               <li><i class="bi bi-check-circle-fill"></i> Support premium</li>
  1166.             </ul>
  1167.             <button type="button" class="btn btn-pricing btn-pricing-outline" data-bs-toggle="modal" data-bs-target="#boiteVocaleDevisModal">Demander un devis</button>
  1168.           </div>
  1169.         </div>
  1170.       </div>
  1171.     </div>
  1172.   </section>
  1174.   <!-- CTA SECTION -->
  1175.   <section class="cta-section">
  1176.     <div class="container">
  1177.       <h2 class="cta-title" data-aos="fade-up">Prêt à activer votre Boîte Vocale ?</h2>
  1178.       <p class="cta-text" data-aos="fade-up" data-aos-delay="100">
  1179.         Commandez en ligne ou contactez un conseiller. Activation immédiate, aucune installation nécessaire, service clé-en-main. Vos équipes gagnent du temps dès aujourd'hui.
  1180.       </p>
  1181.       
  1182.       <ul class="cta-bullets" data-aos="fade-up" data-aos-delay="200">
  1183.         <li><i class="bi bi-lightning-charge-fill"></i> Activation immédiate</li>
  1184.         <li><i class="bi bi-x-circle-fill"></i> Aucune installation nécessaire</li>
  1185.         <li><i class="bi bi-key-fill"></i> Service clé-en-main</li>
  1186.       </ul>
  1187.       
  1188.       <div data-aos="fade-up" data-aos-delay="300">
  1189.         <a href="{{ path('checkout_boite_vocale', {'pack': '35'}) }}" class="btn-cta btn-cta-primary">
  1190.           <i class="bi bi-cart-plus me-2"></i>Commander une Boîte Vocale
  1191.         </a>
  1192.         <a href="#contact" class="btn-cta btn-cta-outline">
  1193.           <i class="bi bi-telephone me-2"></i>Parler à un conseiller
  1194.         </a>
  1195.       </div>
  1196.     </div>
  1197.   </section>
  1199.   <!-- FOOTER -->
  1200.   <footer class="footer-simple">
  1201.     <div class="container">
  1202.       <div class="footer-content">
  1203.         <div class="footer-item">
  1204.           <i class="bi bi-telephone me-2"></i><strong>05 36 28 29 30</strong>
  1205.         </div>
  1206.         <div class="footer-item">
  1207.           <i class="bi bi-envelope me-2"></i><a href="mailto:contact@5sur5sejour.fr">contact@5sur5sejour.fr</a>
  1208.         </div>
  1209.         <div class="footer-item">
  1210.           <i class="bi bi-geo-alt me-2"></i>Trust Conseils – 199 Avenue Francis de Pressensé, 69200 Vénissieux
  1211.         </div>
  1212.         <div class="footer-item">
  1213.           <i class="bi bi-globe me-2"></i><a href="https://www.5sur5sejour.com" target="_blank">www.5sur5sejour.com</a>
  1214.         </div>
  1215.       </div>
  1216.     </div>
  1217.   </footer>
  1219.   <!-- MODAL FORMULAIRE DEVIS BOÎTE VOCALE -->
  1220.   <div class="modal fade" id="boiteVocaleDevisModal" tabindex="-1" aria-labelledby="boiteVocaleDevisModalLabel" aria-hidden="true">
  1221.     <div class="modal-dialog modal-dialog-centered modal-lg">
  1222.       <div class="modal-content">
  1223.         <div class="modal-header border-0 pb-0">
  1224.           <h5 class="modal-title w-100 text-center" id="boiteVocaleDevisModalLabel">
  1225.             <i class="bi bi-envelope me-2"></i>Demande de devis - Boîte Vocale (Grand séjour)
  1226.           </h5>
  1227.           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  1228.         </div>
  1229.         <div class="modal-body px-4 py-4">
  1230.           <p class="text-center text-muted mb-4">Remplissez ce formulaire et notre équipe vous contactera rapidement pour vous proposer une offre personnalisée.</p>
  1231.           
  1232.           <form id="boiteVocaleDevisForm" method="post" action="/contact/boite-vocale-devis">
  1233.             <div class="row g-3">
  1234.               <div class="col-md-6">
  1235.                 <label for="nom_structure_bv" class="form-label">Nom de la structure <span class="text-danger">*</span></label>
  1236.                 <input type="text" class="form-control" id="nom_structure_bv" name="nom_structure" required>
  1237.               </div>
  1238.               <div class="col-md-6">
  1239.                 <label for="type_structure_bv" class="form-label">Type de structure <span class="text-danger">*</span></label>
  1240.                 <select class="form-select" id="type_structure_bv" name="type_structure" required>
  1241.                   <option value="">Sélectionnez...</option>
  1242.                   <option value="ecole">École</option>
  1243.                   <option value="centre_loisirs">Centre de loisirs</option>
  1244.                   <option value="association">Association</option>
  1245.                   <option value="voyagiste">Voyagiste</option>
  1246.                   <option value="autre">Autre</option>
  1247.                 </select>
  1248.               </div>
  1249.               <div class="col-md-6">
  1250.                 <label for="nombre_participants_bv" class="form-label">Nombre de participants <span class="text-danger">*</span></label>
  1251.                 <input type="number" class="form-control" id="nombre_participants_bv" name="nombre_participants" min="71" required placeholder="Ex: 100, 150, 200...">
  1252.                 <div class="form-text">Plus de 70 participants</div>
  1253.               </div>
  1254.               <div class="col-md-6">
  1255.                 <label for="date_debut_bv" class="form-label">Date de début du séjour <span class="text-danger">*</span></label>
  1256.                 <input type="date" class="form-control" id="date_debut_bv" name="date_debut" required>
  1257.               </div>
  1258.               <div class="col-md-6">
  1259.                 <label for="date_fin_bv" class="form-label">Date de fin du séjour <span class="text-danger">*</span></label>
  1260.                 <input type="date" class="form-control" id="date_fin_bv" name="date_fin" required>
  1261.               </div>
  1262.               <div class="col-md-6">
  1263.                 <label for="theme_sejour_bv" class="form-label">Thème du séjour <span class="text-danger">*</span></label>
  1264.                 <input type="text" class="form-control" id="theme_sejour_bv" name="theme_sejour" required placeholder="Ex: Classe verte, Camp d'été">
  1265.               </div>
  1266.               <div class="col-md-6">
  1267.                 <label for="contact_email_bv" class="form-label">Email <span class="text-danger">*</span></label>
  1268.                 <input type="email" class="form-control" id="contact_email_bv" name="contact_email" required>
  1269.               </div>
  1270.               <div class="col-md-6">
  1271.                 <label for="contact_telephone_bv" class="form-label">Téléphone <span class="text-danger">*</span></label>
  1272.                 <input type="tel" class="form-control" id="contact_telephone_bv" name="contact_telephone" required>
  1273.               </div>
  1274.               <div class="col-12">
  1275.                 <label for="message_bv" class="form-label">Message (optionnel)</label>
  1276.                 <textarea class="form-control" id="message_bv" name="message" rows="4" placeholder="Décrivez vos besoins spécifiques, vos contraintes, vos questions..."></textarea>
  1277.               </div>
  1278.               <div class="col-12">
  1279.                 <div class="form-check">
  1280.                   <input class="form-check-input" type="checkbox" id="accept_rgpd_bv" name="accept_rgpd" required>
  1281.                   <label class="form-check-label" for="accept_rgpd_bv">
  1282.                     J'accepte que mes données soient utilisées pour me recontacter concernant cette demande de devis. <span class="text-danger">*</span>
  1283.                   </label>
  1284.                 </div>
  1285.               </div>
  1286.             </div>
  1287.             <div id="formMessageBV" class="mt-3"></div>
  1288.             <div class="d-grid gap-2 mt-4">
  1289.               <button type="submit" class="btn btn-primary btn-lg">
  1290.                 <i class="bi bi-send me-2"></i>Envoyer la demande
  1291.               </button>
  1292.               <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
  1293.             </div>
  1294.           </form>
  1295.         </div>
  1296.       </div>
  1297.     </div>
  1298.   </div>
  1300.   <!-- Modal de succès pour boîte vocale -->
  1301.   <div class="modal fade" id="boiteVocaleSuccessModal" tabindex="-1" aria-labelledby="boiteVocaleSuccessModalLabel" aria-hidden="true">
  1302.     <div class="modal-dialog modal-dialog-centered">
  1303.       <div class="modal-content">
  1304.         <div class="modal-body text-center p-5">
  1305.           <div class="mb-4">
  1306.             <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
  1307.           </div>
  1308.           <h4 class="fw-bold mb-3">Votre demande a bien été envoyée</h4>
  1309.           <p class="text-muted mb-4">Nous reviendrons vers vous dans les plus brefs délais.</p>
  1310.           <button type="button" class="btn btn-primary btn-lg px-5" data-bs-dismiss="modal">Fermer</button>
  1311.         </div>
  1312.       </div>
  1313.     </div>
  1314.   </div>
  1316.   <!-- Scripts -->
  1317.   <script src="{{ asset('Accueil/vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>
  1318.   <script src="{{ asset('Accueil/vendors/aos/aos.js') }}"></script>
  1319.   <script>
  1320.     AOS.init({
  1321.       duration: 800,
  1322.       easing: 'ease-in-out',
  1323.       once: true,
  1324.       mirror: false
  1325.     });
  1327.     // Gestion du formulaire devis boîte vocale
  1328.     const boiteVocaleDevisForm = document.getElementById('boiteVocaleDevisForm');
  1329.     const formMessageBV = document.getElementById('formMessageBV');
  1330.     
  1331.     // Validation de la date de fin après la date de début
  1332.     const dateDebutBV = document.getElementById('date_debut_bv');
  1333.     const dateFinBV = document.getElementById('date_fin_bv');
  1334.     
  1335.     if (dateDebutBV && dateFinBV) {
  1336.       dateDebutBV.addEventListener('change', function() {
  1337.         if (this.value) {
  1338.           dateFinBV.setAttribute('min', this.value);
  1339.         }
  1340.       });
  1341.     }
  1342.     
  1343.     if (boiteVocaleDevisForm) {
  1344.       boiteVocaleDevisForm.addEventListener('submit', function(e) {
  1345.         e.preventDefault();
  1346.         
  1347.         // Désactiver le bouton pendant l'envoi
  1348.         const submitBtn = boiteVocaleDevisForm.querySelector('button[type="submit"]');
  1349.         const originalText = submitBtn.innerHTML;
  1350.         submitBtn.disabled = true;
  1351.         submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Envoi en cours...';
  1352.         
  1353.         // Masquer les messages précédents
  1354.         formMessageBV.innerHTML = '';
  1355.         formMessageBV.className = 'mt-3';
  1356.         
  1357.         // Validation des dates
  1358.         if (dateDebutBV.value && dateFinBV.value && dateFinBV.value < dateDebutBV.value) {
  1359.           formMessageBV.className = 'mt-3 alert alert-danger';
  1360.           formMessageBV.innerHTML = `
  1361.             <div class="d-flex align-items-center">
  1362.               <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
  1363.               <div>
  1364.                 <strong>Erreur :</strong><br>
  1365.                 La date de fin doit être postérieure à la date de début.
  1366.               </div>
  1367.             </div>
  1368.           `;
  1369.           submitBtn.disabled = false;
  1370.           submitBtn.innerHTML = originalText;
  1371.           return;
  1372.         }
  1373.         
  1374.         // Récupérer les données du formulaire
  1375.         const formData = new FormData(boiteVocaleDevisForm);
  1376.         
  1377.         // Envoyer la requête
  1378.         fetch('/contact/boite-vocale-devis', {
  1379.           method: 'POST',
  1380.           body: formData,
  1381.           headers: {
  1382.             'X-Requested-With': 'XMLHttpRequest'
  1383.           }
  1384.         })
  1385.         .then(response => response.json())
  1386.         .then(data => {
  1387.           if (data.success) {
  1388.             // Fermer le modal du formulaire
  1389.             const formModal = bootstrap.Modal.getInstance(document.getElementById('boiteVocaleDevisModal'));
  1390.             if (formModal) formModal.hide();
  1391.             
  1392.             // Réinitialiser le formulaire
  1393.             boiteVocaleDevisForm.reset();
  1394.             
  1395.             // Afficher le modal de succès
  1396.             const successModal = new bootstrap.Modal(document.getElementById('boiteVocaleSuccessModal'));
  1397.             successModal.show();
  1398.           } else {
  1399.             formMessageBV.className = 'mt-3 alert alert-danger';
  1400.             formMessageBV.innerHTML = `
  1401.               <div class="d-flex align-items-center">
  1402.                 <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
  1403.                 <div>
  1404.                   <strong>Erreur :</strong><br>
  1405.                   ${data.message || 'Une erreur est survenue. Veuillez réessayer.'}
  1406.                 </div>
  1407.               </div>
  1408.             `;
  1409.           }
  1410.         })
  1411.         .catch(error => {
  1412.           console.error('Erreur:', error);
  1413.           formMessageBV.className = 'mt-3 alert alert-danger';
  1414.           formMessageBV.innerHTML = `
  1415.             <div class="d-flex align-items-center">
  1416.               <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
  1417.               <div>
  1418.                 <strong>Erreur :</strong><br>
  1419.                 Une erreur est survenue lors de l'envoi. Veuillez réessayer plus tard.
  1420.               </div>
  1421.             </div>
  1422.           `;
  1423.         })
  1424.         .finally(() => {
  1425.           submitBtn.disabled = false;
  1426.           submitBtn.innerHTML = originalText;
  1427.         });
  1428.       });
  1429.     }
  1430.   </script>
  1431. </body>
  1432. </html>