templates/Accueil/besoindaide_5sur5_accueil.html.twig line 1

Open in your IDE?
  1. {% extends "Accueil/layoutAccueil.html.twig" %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4.     <link rel="stylesheet" href="{{ asset('css/premium-pages.css') }}">
  5.     
  6.     <style>
  7.         :root {
  8.             --teal-5sur5: #41A2AA;
  9.             --teal-light: rgba(65, 162, 170, 0.08);
  10.             --teal-hover: rgba(65, 162, 170, 0.12);
  11.             --orange-5sur5: #F56040;
  12.             --orange-light: rgba(245, 96, 64, 0.08);
  13.             --text-dark: #1A1A1A;
  14.             --text-secondary: #6B7280;
  15.             --text-muted: #9CA3AF;
  16.             --border-light: #E7F2F3;
  17.             --bg-page: #FAFBFC;
  18.             --bg-white: #FFFFFF;
  19.         }
  21.         /* Page Container */
  22.         .help-center-container {
  23.             min-height: 100vh;
  24.             background: var(--bg-page);
  25.             padding-bottom: 60px;
  26.         }
  28.         /* Hero Header */
  29.         .help-hero {
  30.             background: linear-gradient(135deg, rgba(65, 162, 170, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
  31.             padding: 60px 24px;
  32.             text-align: center;
  33.             border-bottom: 1px solid var(--border-light);
  34.         }
  36.         .help-hero-inner {
  37.             max-width: 700px;
  38.             margin: 0 auto;
  39.         }
  41.         .help-hero-icon {
  42.             width: 72px;
  43.             height: 72px;
  44.             border-radius: 20px;
  45.             background: var(--teal-light);
  46.             display: inline-flex;
  47.             align-items: center;
  48.             justify-content: center;
  49.             margin-bottom: 24px;
  50.         }
  52.         .help-hero-icon i {
  53.             font-size: 32px;
  54.             color: var(--teal-5sur5);
  55.         }
  57.         .help-hero-title {
  58.             font-size: 32px;
  59.             font-weight: 700;
  60.             color: var(--text-dark);
  61.             margin-bottom: 12px;
  62.             letter-spacing: -0.5px;
  63.         }
  65.         .help-hero-subtitle {
  66.             font-size: 17px;
  67.             color: var(--text-secondary);
  68.             margin-bottom: 28px;
  69.             line-height: 1.6;
  70.         }
  72.         .help-hero-contact {
  73.             display: inline-flex;
  74.             align-items: center;
  75.             gap: 12px;
  76.             padding: 14px 24px;
  77.             background: var(--bg-white);
  78.             border: 1px solid var(--border-light);
  79.             border-radius: 14px;
  80.             font-size: 15px;
  81.             color: var(--text-dark);
  82.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  83.         }
  85.         .help-hero-contact i {
  86.             color: var(--teal-5sur5);
  87.             font-size: 20px;
  88.         }
  90.         .help-hero-contact strong {
  91.             color: var(--teal-5sur5);
  92.         }
  94.         /* Main Content */
  95.         .help-content {
  96.             max-width: 900px;
  97.             margin: 0 auto;
  98.             padding: 40px 24px;
  99.         }
  101.         /* FAQ Section */
  102.         .faq-section {
  103.             margin-bottom: 32px;
  104.         }
  106.         .faq-section-header {
  107.             display: flex;
  108.             align-items: center;
  109.             gap: 14px;
  110.             margin-bottom: 16px;
  111.             padding-bottom: 12px;
  112.             border-bottom: 2px solid var(--teal-light);
  113.         }
  115.         .faq-section-icon {
  116.             width: 40px;
  117.             height: 40px;
  118.             border-radius: 10px;
  119.             background: var(--teal-light);
  120.             display: flex;
  121.             align-items: center;
  122.             justify-content: center;
  123.             flex-shrink: 0;
  124.         }
  126.         .faq-section-icon i {
  127.             font-size: 18px;
  128.             color: var(--teal-5sur5);
  129.         }
  131.         .faq-section-title {
  132.             font-size: 18px;
  133.             font-weight: 600;
  134.             color: var(--text-dark);
  135.             margin: 0;
  136.         }
  138.         /* FAQ Accordion */
  139.         .faq-accordion {
  140.             background: var(--bg-white);
  141.             border: 1px solid var(--border-light);
  142.             border-radius: 14px;
  143.             overflow: hidden;
  144.         }
  146.         .faq-item {
  147.             border-bottom: 1px solid var(--border-light);
  148.         }
  150.         .faq-item:last-child {
  151.             border-bottom: none;
  152.         }
  154.         .faq-question {
  155.             display: flex;
  156.             align-items: center;
  157.             justify-content: space-between;
  158.             padding: 18px 20px;
  159.             cursor: pointer;
  160.             transition: background 0.2s ease;
  161.             gap: 16px;
  162.         }
  164.         .faq-question:hover {
  165.             background: var(--teal-light);
  166.         }
  168.         .faq-question-text {
  169.             font-size: 15px;
  170.             font-weight: 500;
  171.             color: var(--text-dark);
  172.             flex: 1;
  173.             line-height: 1.5;
  174.         }
  176.         .faq-chevron {
  177.             width: 28px;
  178.             height: 28px;
  179.             border-radius: 8px;
  180.             background: var(--teal-light);
  181.             display: flex;
  182.             align-items: center;
  183.             justify-content: center;
  184.             flex-shrink: 0;
  185.             transition: transform 0.3s ease, background 0.2s ease;
  186.         }
  188.         .faq-chevron i {
  189.             font-size: 14px;
  190.             color: var(--teal-5sur5);
  191.             transition: transform 0.3s ease;
  192.         }
  194.         .faq-item.active .faq-chevron i {
  195.             transform: rotate(180deg);
  196.         }
  198.         .faq-item.active .faq-question {
  199.             background: var(--teal-light);
  200.         }
  202.         .faq-answer {
  203.             display: none;
  204.             padding: 0 20px 20px 20px;
  205.             font-size: 14px;
  206.             color: var(--text-secondary);
  207.             line-height: 1.7;
  208.         }
  210.         .faq-answer a {
  211.             color: var(--teal-5sur5);
  212.             text-decoration: none;
  213.             font-weight: 500;
  214.         }
  216.         .faq-answer a:hover {
  217.             text-decoration: underline;
  218.         }
  220.         .faq-item.active .faq-answer {
  221.             display: block;
  222.             animation: fadeIn 0.3s ease;
  223.         }
  225.         @keyframes fadeIn {
  226.             from { opacity: 0; transform: translateY(-8px); }
  227.             to { opacity: 1; transform: translateY(0); }
  228.         }
  230.         /* Tips Section */
  231.         .tips-section {
  232.             background: linear-gradient(135deg, rgba(245, 96, 64, 0.04) 0%, rgba(65, 162, 170, 0.04) 100%);
  233.             border: 1px solid var(--border-light);
  234.             border-radius: 16px;
  235.             padding: 28px;
  236.             margin-bottom: 40px;
  237.         }
  239.         .tips-header {
  240.             display: flex;
  241.             align-items: center;
  242.             gap: 12px;
  243.             margin-bottom: 20px;
  244.         }
  246.         .tips-icon {
  247.             font-size: 28px;
  248.         }
  250.         .tips-title {
  251.             font-size: 18px;
  252.             font-weight: 600;
  253.             color: var(--text-dark);
  254.             margin: 0;
  255.         }
  257.         .tips-list {
  258.             list-style: none;
  259.             padding: 0;
  260.             margin: 0;
  261.             display: grid;
  262.             gap: 12px;
  263.         }
  265.         .tips-list li {
  266.             display: flex;
  267.             align-items: flex-start;
  268.             gap: 12px;
  269.             font-size: 14px;
  270.             color: var(--text-secondary);
  271.             line-height: 1.6;
  272.         }
  274.         .tips-list li::before {
  275.             content: '✓';
  276.             color: var(--teal-5sur5);
  277.             font-weight: 700;
  278.             flex-shrink: 0;
  279.             margin-top: 1px;
  280.         }
  282.         /* CTA Section */
  283.         .cta-section {
  284.             background: var(--bg-white);
  285.             border: 1px solid var(--border-light);
  286.             border-radius: 16px;
  287.             padding: 32px;
  288.             text-align: center;
  289.         }
  291.         .cta-title {
  292.             font-size: 20px;
  293.             font-weight: 600;
  294.             color: var(--text-dark);
  295.             margin-bottom: 8px;
  296.         }
  298.         .cta-subtitle {
  299.             font-size: 14px;
  300.             color: var(--text-secondary);
  301.             margin-bottom: 24px;
  302.         }
  304.         .cta-buttons {
  305.             display: flex;
  306.             justify-content: center;
  307.             gap: 16px;
  308.             flex-wrap: wrap;
  309.         }
  311.         .cta-btn {
  312.             display: inline-flex;
  313.             align-items: center;
  314.             gap: 10px;
  315.             padding: 14px 28px;
  316.             font-size: 14px;
  317.             font-weight: 600;
  318.             border-radius: 12px;
  319.             text-decoration: none;
  320.             transition: all 0.2s ease;
  321.         }
  323.         .cta-btn-primary {
  324.             background: var(--teal-5sur5);
  325.             color: white;
  326.             box-shadow: 0 4px 14px rgba(65, 162, 170, 0.3);
  327.         }
  329.         .cta-btn-primary:hover {
  330.             background: #359BA3;
  331.             transform: translateY(-2px);
  332.             box-shadow: 0 6px 20px rgba(65, 162, 170, 0.35);
  333.             color: white;
  334.         }
  336.         .cta-btn-secondary {
  337.             background: var(--bg-white);
  338.             color: var(--text-dark);
  339.             border: 1px solid var(--border-light);
  340.         }
  342.         .cta-btn-secondary:hover {
  343.             background: var(--teal-light);
  344.             border-color: var(--teal-5sur5);
  345.             color: var(--teal-5sur5);
  346.         }
  348.         .cta-btn i {
  349.             font-size: 18px;
  350.         }
  352.         .contact-info {
  353.             margin-top: 24px;
  354.             padding-top: 20px;
  355.             border-top: 1px solid var(--border-light);
  356.             display: flex;
  357.             justify-content: center;
  358.             gap: 32px;
  359.             flex-wrap: wrap;
  360.         }
  362.         .contact-item {
  363.             display: flex;
  364.             align-items: center;
  365.             gap: 8px;
  366.             font-size: 14px;
  367.             color: var(--text-secondary);
  368.         }
  370.         .contact-item i {
  371.             color: var(--teal-5sur5);
  372.             font-size: 16px;
  373.         }
  375.         .contact-item a {
  376.             color: var(--teal-5sur5);
  377.             text-decoration: none;
  378.             font-weight: 500;
  379.         }
  381.         .contact-item a:hover {
  382.             text-decoration: underline;
  383.         }
  385.         /* Responsive */
  386.         @media (max-width: 768px) {
  387.             .help-hero {
  388.                 padding: 40px 16px;
  389.             }
  391.             .help-hero-title {
  392.                 font-size: 26px;
  393.             }
  395.             .help-content {
  396.                 padding: 24px 16px;
  397.             }
  399.             .faq-question {
  400.                 padding: 14px 16px;
  401.             }
  403.             .faq-answer {
  404.                 padding: 0 16px 16px 16px;
  405.             }
  407.             .cta-buttons {
  408.                 flex-direction: column;
  409.             }
  411.             .cta-btn {
  412.                 width: 100%;
  413.                 justify-content: center;
  414.             }
  416.             .contact-info {
  417.                 flex-direction: column;
  418.                 gap: 12px;
  419.                 align-items: center;
  420.             }
  421.         }
  422.     </style> 
  423. {% endblock %}
  425. {% block contenu %}
  426. <div class="help-center-container">
  427.     
  428.     {# Hero Header #}
  429.     <div class="help-hero">
  430.         <div class="help-hero-inner">
  431.             <div class="help-hero-icon">
  432.                 <i class="bi bi-headset"></i>
  433.             </div>
  434.             <h1 class="help-hero-title">Besoin d'aide pour gérer votre séjour ?</h1>
  435.             <p class="help-hero-subtitle">Votre support 5sur5 est disponible du Lundi au Vendredi de 09h à 17h. Trouvez rapidement des réponses à vos questions ou contactez notre équipe.</p>
  436.             <div class="help-hero-contact">
  437.                 <i class="bi bi-telephone-fill"></i>
  438.                 <span>Appelez-nous : <strong>05 36 28 29 30</strong></span>
  439.             </div>
  440.         </div>
  441.     </div>
  443.     {# Main Content #}
  444.     <div class="help-content">
  446.         {# Section 1: Débuter avec 5sur5 #}
  447.         <div class="faq-section">
  448.             <div class="faq-section-header">
  449.                 <div class="faq-section-icon">
  450.                     <i class="bi bi-rocket-takeoff"></i>
  451.                 </div>
  452.                 <h2 class="faq-section-title">Débuter avec 5sur5</h2>
  453.             </div>
  454.             <div class="faq-accordion">
  455.                 <div class="faq-item">
  456.                     <div class="faq-question">
  457.                         <span class="faq-question-text">Comment créer mon premier séjour ?</span>
  458.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  459.                     </div>
  460.                     <div class="faq-answer">
  461.                         Créez votre compte accompagnateur sur 5sur5sejour.com, renseignez les informations de votre séjour (dates, destination, thème) et vous recevrez immédiatement votre code séjour unique à partager avec les familles.
  462.                     </div>
  463.                 </div>
  464.                 <div class="faq-item">
  465.                     <div class="faq-question">
  466.                         <span class="faq-question-text">Comment transmettre le code séjour aux familles ?</span>
  467.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  468.                         </div> 
  469.                     <div class="faq-answer">
  470.                         Plusieurs options s'offrent à vous : transférez l'email de confirmation reçu de 5sur5Séjour, utilisez le cahier de liaison, ou téléchargez le PDF "Mode d'emploi parents" depuis votre espace accompagnateur et distribuez-le aux familles.
  471.                             </div>
  472.                         </div>
  473.                 <div class="faq-item">
  474.                     <div class="faq-question">
  475.                         <span class="faq-question-text">Que faire si j'ai perdu mon code séjour ou mot de passe ?</span>
  476.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  477.                     </div>
  478.                     <div class="faq-answer">
  479.                         Utilisez la fonction "Mot de passe oublié" sur la page de connexion. Si vous avez perdu votre code séjour, contactez-nous au <a href="tel:+33536282930">05 36 28 29 30</a> ou par email à <a href="mailto:contact@5sur5sejour.com">contact@5sur5sejour.com</a>.
  480.                             </div>
  481.                         </div>
  482.                             </div>   
  483.                         </div>
  485.         {# Section 2: Publier du contenu #}
  486.         <div class="faq-section">
  487.             <div class="faq-section-header">
  488.                 <div class="faq-section-icon">
  489.                     <i class="bi bi-cloud-upload"></i>
  490.                 </div>
  491.                 <h2 class="faq-section-title">Publier du contenu (photos, vidéos, vocaux)</h2>
  492.                             </div>
  493.             <div class="faq-accordion">
  494.                 <div class="faq-item">
  495.                     <div class="faq-question">
  496.                         <span class="faq-question-text">Comment télécharger mes photos ?</span>
  497.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  498.                         </div>
  499.                     <div class="faq-answer">
  500.                         Depuis votre espace accompagnateur, cliquez sur le jour souhaité puis sur "Ajouter photo". Sélectionnez les images depuis votre smartphone ou ordinateur. Nous vous conseillons de télécharger par lots de 50 à 100 photos pour un chargement optimal.
  501.                             </div>
  502.                         </div>
  503.                 <div class="faq-item">
  504.                     <div class="faq-question">
  505.                         <span class="faq-question-text">Comment ajouter des vidéos ?</span>
  506.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  507.                             </div>
  508.                     <div class="faq-answer">
  509.                         Cliquez sur "Ajouter vidéo" dans votre espace séjour. Les formats MP4 et MOV sont acceptés. Pour une meilleure expérience, privilégiez des vidéos de moins de 2 minutes.
  510.                         </div>
  511.                             </div>
  512.                 <div class="faq-item">
  513.                     <div class="faq-question">
  514.                         <span class="faq-question-text">Comment enregistrer un message vocal ?</span>
  515.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  516.                         </div>
  517.                     <div class="faq-answer">
  518.                         Cliquez sur "Message vocal", autorisez l'accès au microphone, puis appuyez sur "Enregistrer". Vous pouvez réécouter votre message avant de le publier. Durée maximale : 5 minutes par message.
  519.                             </div>
  520.                         </div>
  521.                 <div class="faq-item">
  522.                     <div class="faq-question">
  523.                         <span class="faq-question-text">Y a-t-il une limite au nombre de publications ?</span>
  524.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  525.                             </div>
  526.                     <div class="faq-answer">
  527.                         Non, le nombre de photos, vidéos et messages vocaux est illimité. Plus vous partagez, plus les familles sont rassurées et heureuses de suivre l'aventure de leurs enfants !
  528.                         </div>
  529.                             </div>
  530.                 <div class="faq-item">
  531.                     <div class="faq-question">
  532.                         <span class="faq-question-text">Comment supprimer un contenu publié ?</span>
  533.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  534.                         </div>
  535.                     <div class="faq-answer">
  536.                         Sélectionnez la photo, vidéo ou message à supprimer et cliquez sur l'icône poubelle. Confirmez la suppression. Le contenu sera immédiatement retiré pour les familles également.
  537.                             </div>
  538.                         </div>
  539.                             </div>
  540.                         </div>
  542.         {# Section 3: Boîte vocale #}
  543.         <div class="faq-section d-none">
  544.             <div class="faq-section-header">
  545.                 <div class="faq-section-icon">
  546.                     <i class="bi bi-voicemail"></i>
  547.                             </div>
  548.                 <h2 class="faq-section-title">Module Boîte vocale</h2>
  549.                         </div>
  550.             <div class="faq-accordion">
  551.                 <div class="faq-item">
  552.                     <div class="faq-question">
  553.                         <span class="faq-question-text">Qu'est-ce que la boîte vocale 5sur5 ?</span>
  554.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  555.                             </div>
  556.                     <div class="faq-answer">
  557.                         La boîte vocale permet aux parents de laisser des messages audio à leur enfant. Vous recevez ces messages dans votre espace et pouvez les faire écouter aux enfants au moment opportun. Un lien unique entre les familles et leurs enfants !
  558.                         </div>
  559.                             </div>
  560.                 <div class="faq-item">
  561.                     <div class="faq-question">
  562.                         <span class="faq-question-text">Comment activer la boîte vocale pour mon séjour ?</span>
  563.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  564.                         </div>
  565.                     <div class="faq-answer">
  566.                         La boîte vocale est automatiquement disponible pour tous les séjours. Les parents y accèdent depuis leur espace en cliquant sur "Envoyer un message vocal à mon enfant".
  567.                     </div>
  568.                 </div>
  569.                 <div class="faq-item">
  570.                     <div class="faq-question">
  571.                         <span class="faq-question-text">Comment écouter et gérer les messages reçus ?</span>
  572.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  573.                         </div>  
  574.                     <div class="faq-answer">
  575.                         Les messages des parents apparaissent dans la section "Boîte vocale" de votre espace. Vous pouvez les écouter, les marquer comme "écoutés par l'enfant" ou les supprimer si nécessaire.
  576.                             </div>  
  577.                         </div>
  578.                             </div>  
  579.                         </div>
  581.         {# Section 4: Albums & Commandes groupées #}
  582.         <div class="faq-section">
  583.             <div class="faq-section-header">
  584.                 <div class="faq-section-icon">
  585.                     <i class="bi bi-book"></i>
  586.                 </div>
  587.                 <h2 class="faq-section-title">Albums & Commandes groupées</h2>
  588.                             </div> 
  589.             <div class="faq-accordion">
  590.                 <div class="faq-item">
  591.                     <div class="faq-question">
  592.                         <span class="faq-question-text">Qu'est-ce que l'album accompagnateur ?</span>
  593.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  594.                         </div>
  595.                     <div class="faq-answer">
  596.                         C'est un album photo que vous créez à partir des meilleures photos du séjour. Une fois sauvegardé, il est proposé aux familles qui peuvent le personnaliser et le commander. <strong>L'album accompagnateur vous est offert gratuitement !</strong>
  597.                             </div>  
  598.                         </div>
  599.                 <div class="faq-item">
  600.                     <div class="faq-question">
  601.                         <span class="faq-question-text">Comment créer une commande groupée ?</span>
  602.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  603.                     </div>
  604.                     <div class="faq-answer">
  605.                         Depuis votre espace, cliquez sur l'icône "Albums & Livres" puis "Commande groupée". Choisissez le produit, remplissez les informations et partagez le lien avec les familles. Plus il y a de participants, plus la réduction est importante (jusqu'à -20%) !
  606.                             </div>   
  607.                         </div>
  608.                 <div class="faq-item">
  609.                     <div class="faq-question">
  610.                         <span class="faq-question-text">Combien de photos faut-il pour créer un livre ?</span>
  611.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  612.                     </div>
  613.                     <div class="faq-answer">
  614.                         Minimum 32 photos partagées pour créer un Livre Souvenirs, et 20 photos pour un Album photo. Plus vous avez de photos, plus vos créations seront riches et variées !
  615.                             </div>
  616.                         </div>
  617.                 <div class="faq-item">
  618.                     <div class="faq-question">
  619.                         <span class="faq-question-text">Comment recevoir mon album gratuit ?</span>
  620.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  621.                     </div>
  622.                     <div class="faq-answer">
  623.                         Créez votre album depuis "Mes créations", personnalisez-le si vous le souhaitez, puis commandez-le. La livraison est offerte en France métropolitaine. Un album offert par code séjour.
  624.                             </div>
  625.                         </div>
  626.                             </div>
  627.                         </div>
  629.         {# Section 5: Problèmes courants #}
  630.         <div class="faq-section">
  631.             <div class="faq-section-header">
  632.                 <div class="faq-section-icon">
  633.                     <i class="bi bi-wrench-adjustable"></i>
  634.                             </div>
  635.                 <h2 class="faq-section-title">Problèmes courants (solutions rapides)</h2>
  636.                         </div>
  637.             <div class="faq-accordion">
  638.                 <div class="faq-item">
  639.                     <div class="faq-question">
  640.                         <span class="faq-question-text">Mes photos ne se téléchargent pas, que faire ?</span>
  641.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  642.                             </div>
  643.                     <div class="faq-answer">
  644.                         Vérifiez votre connexion internet. Si le problème persiste, essayez de télécharger par lots plus petits (10-20 photos). Les formats acceptés sont JPEG et PNG, 30 Mo max par photo.
  645.                         </div> 
  646.                             </div>
  647.                 <div class="faq-item">
  648.                     <div class="faq-question">
  649.                         <span class="faq-question-text">Je n'ai pas de connexion internet sur place</span>
  650.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  651.                         </div>
  652.                     <div class="faq-answer">
  653.                         Demandez à un collègue de partager sa connexion (partage de connexion smartphone). Sinon, vous pourrez publier vos contenus dès que vous aurez à nouveau accès à internet. Les familles comprendront !
  654.                             </div>
  655.                         </div>
  656.                 <div class="faq-item">
  657.                     <div class="faq-question">
  658.                         <span class="faq-question-text">Je n'ai pas de micro sur mon ordinateur</span>
  659.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  660.                             </div>
  661.                     <div class="faq-answer">
  662.                         Utilisez votre smartphone pour enregistrer les messages vocaux. L'application web fonctionne parfaitement sur mobile et utilise le micro intégré.
  663.                         </div>
  664.                             </div>
  666.                         </div>
  667.                     </div>  
  669.         {# Section 6: Gestion du compte #}
  670.         <div class="faq-section">
  671.             <div class="faq-section-header">
  672.                 <div class="faq-section-icon">
  673.                     <i class="bi bi-person-gear"></i>
  674.                 </div>
  675.                 <h2 class="faq-section-title">Gestion du compte</h2>
  676.             </div>
  677.             <div class="faq-accordion">
  678.                 <div class="faq-item">
  679.                     <div class="faq-question">
  680.                         <span class="faq-question-text">Comment modifier mes informations personnelles ?</span>
  681.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  682.                     </div>
  683.                     <div class="faq-answer">
  684.                         Accédez à "Mes paramètres" depuis le menu de votre profil. Cliquez sur "Modifier" pour chaque section, effectuez vos changements puis enregistrez.
  685.             </div>  
  686.         </div>
  687.                 <div class="faq-item">
  688.                     <div class="faq-question">
  689.                         <span class="faq-question-text">Puis-je gérer plusieurs séjours ?</span>
  690.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  691.                     </div>
  692.                     <div class="faq-answer">
  693.                         Oui ! Depuis votre tableau de bord, vous pouvez créer et gérer autant de séjours que nécessaire. Chaque séjour dispose de son propre code unique.
  694.                     </div>
  695.                 </div>
  696.                 <div class="faq-item">
  697.                     <div class="faq-question">
  698.                         <span class="faq-question-text">Combien de temps les contenus sont-ils conservés ?</span>
  699.                         <div class="faq-chevron"><i class="bi bi-chevron-down"></i></div>
  700.                     </div>
  701.                     <div class="faq-answer">
  702.                         Les photos, vidéos et messages sont conservés 60 jours après la date de fin du séjour. Pensez à commander vos albums souvenirs avant cette date !
  703.                     </div>
  704.                 </div>
  705.             </div>
  706.         </div>
  708.         {# Tips Section #}
  709.         <div class="tips-section">
  710.             <div class="tips-header">
  711.                 <span class="tips-icon">💡</span>
  712.                 <h3 class="tips-title">Conseils pour un séjour réussi</h3>
  713.             </div>
  714.             <ul class="tips-list">
  715.                 <li>Publiez au moins une photo et un message vocal chaque jour pour rassurer les familles</li>
  716.                 <li>Variez les contenus : activités, repas, moments de détente, paysages...</li>
  717.                 <li>Utilisez des photos de groupe plutôt qu'individuelles pour impliquer tous les enfants</li>
  718.                 <li>Un message vocal de 30 secondes peut faire toute la différence pour les parents</li>
  719.                 <li>Téléchargez le PDF "Mode d'emploi parents" et distribuez-le avant le départ</li>
  720.                 <li>Pensez à créer votre album accompagnateur dès le retour pour ne rien oublier</li>
  721.             </ul>
  722.         </div>
  724.         {# CTA Section #}
  725.         <div class="cta-section">
  726.             <h3 class="cta-title">Vous n'avez pas trouvé votre réponse ?</h3>
  727.             <p class="cta-subtitle">Notre équipe support est disponible 7j/7 pour vous accompagner.</p>
  728.             <div class="cta-buttons">
  729.                 <a href="mailto:contact@5sur5sejour.com" class="cta-btn cta-btn-primary">
  730.                     <i class="bi bi-envelope"></i>
  731.                     Contacter le support
  732.                 </a>
  733.                 <a href="https://wa.me/33536282930" target="_blank" class="cta-btn cta-btn-secondary">
  734.                     <i class="bi bi-whatsapp"></i>
  735.                     WhatsApp
  736.                 </a>
  737.             </div>
  738.             <div class="contact-info">
  739.                 <div class="contact-item">
  740.                     <i class="bi bi-telephone"></i>
  741.                     <a href="tel:+33536282930">05 36 28 29 30</a>
  742.                 </div>
  743.                 <div class="contact-item">
  744.                     <i class="bi bi-envelope"></i>
  745.                     <a href="mailto:contact@5sur5sejour.com">contact@5sur5sejour.com</a>
  746.                 </div>
  747.                 <div class="contact-item">
  748.                     <i class="bi bi-clock"></i>
  749.                     <span>Disponible 7j/7</span>
  750.                 </div>
  751.             </div>
  752.         </div>
  754.         </div>
  755.     </div>
  756. {% endblock %}