templates/Theme/Produit/Service/Service/cabinets.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutbase.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, "/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }}"/>
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }}
  11.     - Détails du service ..
  12. {% endblock %}
  13.   
  14. {% block userblog_body %}
  15. <style>
  16. {# ---------------------------------------------- css separator ---------------------------------------------------- #}
  17.      .section-head.center.wt-small-separator-outer {
  18.         margin-bottom: 50px;
  19.         text-align: left;
  20.     }
  22.     .section-head.center.wt-small-separator-outer1 {
  23.         margin-bottom: 50px;
  24.         text-align: center;
  25.     }
  26.     .section-head {
  27.         position: relative;
  28.     }
  29.     .site-text-primary, .wt-small-separator {
  30.         color: #ea130e;
  31.     }
  32.     .wt-small-separator {
  33.         font-family: "Heebo", sans-serif;
  34.         text-transform: uppercase;
  35.         letter-spacing: 1px;
  36.         padding-right: 40px;
  37.         font-size: 26px;
  38.         line-height: 26px;
  39.         margin-bottom: 15px;
  40.         position: relative;
  41.         display: inline-block;
  42.         font-weight: 700;
  43.     }
  44.     .section-head.center .wt-small-separator div.sep-leaf-left {
  45.         position: relative;
  46.     }
  47.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  48.         background-color: #ea130e;
  49.     }
  50.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  51.         right: -20px;
  52.         width: 10px;
  53.     }
  54.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  55.         position: absolute;
  56.         content: '';
  57.         height: 22px;
  58.         bottom: 0px;
  59.         top: 0px;
  60.         transform: skew(-20deg);
  61.     }
  62.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  63.         right: -27px;
  64.         width: 4px;
  65.     }
  66.     .section-head.center.wt-small-separator-outer h2 {
  67.         max-width: 630px;
  68.         margin: 0px auto;
  69.     }
  71. {# ----------------------------------------------- css baniere ------------------------------------------------------ #}
  72.         button {
  73.   margin: 20px;
  74. }
  75. .custom-btn {
  76.   width: 130px;
  77.   height: 40px;
  78.   color: #fff;
  79.   border-radius: 5px;
  80.   padding: 10px 25px;
  81.   font-family: 'Lato', sans-serif;
  82.   font-weight: 500;
  83.   background: transparent;
  84.   cursor: pointer;
  85.   transition: all 0.3s ease;
  86.   position: relative;
  87.   display: inline-block;
  88.    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  89.    7px 7px 20px 0px rgba(0,0,0,.1),
  90.    4px 4px 5px 0px rgba(0,0,0,.1);
  91.   outline: none;
  92. }
  93. .btn-5 {
  94.   width: 130px;
  95.   height: 40px;
  96.   line-height: 42px;
  97.   padding: 0;
  98.   border: none;
  99.   background: rgb(255,27,0);
  100. background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
  101. }
  102. .btn-5:hover {
  103.   color: #f0094a;
  104.   background: transparent;
  105.    box-shadow:none;
  106. }
  107. .btn-5:before,
  108. .btn-5:after{
  109.   content:'';
  110.   position:absolute;
  111.   top:0;
  112.   right:0;
  113.   height:2px;
  114.   width:0;
  115.   background: #f0094a;
  116.   box-shadow:
  117.    -1px -1px 5px 0px #fff,
  118.    7px 7px 20px 0px #0003,
  119.    4px 4px 5px 0px #0002;
  120.   transition:400ms ease all;
  121. }
  122. .btn-5:after{
  123.   right:inherit;
  124.   top:inherit;
  125.   left:0;
  126.   bottom:0;
  127. }
  128. .btn-5:hover:before,
  129. .btn-5:hover:after{
  130.   width:100%;
  131.   transition:800ms ease all;
  132. }
  134. {# ----------------------------------------------- css image cabinet ------------------------------------------------------ #}
  135.   .news-container {
  136.   position: relative;
  137.   display: inline-block;
  138.   box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px,
  139.     rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
  140. }
  142. .news-container .img-fluid {
  143.   float: left;
  144.   height: 450px;
  145.   width: 800px;
  146.   margin-left: none;
  147. }
  150. .news-container .news-overlay {
  151.   position: absolute;
  152.   top: 0;
  153.   left: 0;
  154.   width: 100%;
  155.   height: 100%;
  156.   background: rgba(29, 154, 182, 0.67);
  157.   opacity: 0.8;
  158.   transition: opacity 500ms ease-in-out;
  159. }
  160. .news-container:hover .news-overlay {
  161.   opacity: 0.9;
  162. }
  163. .news-overlay span {
  164.   position: absolute;
  165.   top: 50%;
  166.   left: 50%;
  167.   transform: translate(-50%, -50%);
  168.   color: #fff;
  169.   margin: -5px -20px;
  170. }
  172. /* ----------------------------------------- css faq ------------------------------------ */
  173. .wrapper {
  174.   width: 60%;
  175. }
  178. .container-faq {
  179.   background-color: #268ecfce ;
  180.   color: black;
  181.   border-radius: 20px;
  182.   box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
  183.   margin: 20px 0;
  184. }
  186. .question {
  187.   color : white;
  188.   font-size: 1.2rem;
  189.   font-weight: 600;
  190.   padding: 20px 80px 20px 20px;
  191.   position: relative;
  192.   display: flex;
  193.   align-items: center;
  194.   cursor: pointer;
  195. }
  197. .question::after {
  198.   content: "\002B";
  199.   font-size: 2.2rem;
  200.   position: absolute;
  201.   right: 20px;
  202.   transition: 0.2s;
  203. }
  205. .question.active::after {
  206.   transform: rotate(45deg);
  207. }
  209. .answercont {
  210.   max-height: 0;
  211.   overflow: hidden;
  212.   transition: 0.3s;
  213. }
  215. .answer {
  216.   padding: 0 20px 20px;
  217.   line-height: 1.5rem;
  218. }
  220. .question.active + .answercont {
  221. }
  223. @media screen and (max-width: 790px){
  224.   html {
  225.     font-size: 14px;
  226.   }
  227.   .wrapper {
  228.   width: 80%;
  229. }
  230. }
  232. .answercont .answer a { 
  233.   color: white;
  234. }
  236. .answercont .answer a:hover { 
  237.   color: red;
  238. }
  240. {# css contenu right image cabinet  #}
  241. .blockquote {
  242.   padding: 1rem 2rem;
  243.   border-inline-start: 9px solid hsl(245, 80%, 80%);
  244. }
  246. .blockquote p {
  247.   font-family: var(--prismatica-font-tertiary);
  248.   font-size: 1.5rem;
  249. }
  251. /*** visual badge label only, not for form labels ***/
  252. .badge {
  253.   position: relative;
  254.   top: 0;
  255.   vertical-align: top;
  257.   width: auto;
  258.   min-height: 0.8rem;
  260.   display: inline-flex;
  261.   align-items: center;
  262.   justify-content: center;
  263.   flex-direction: column;
  265.   font-family: var(--prismatica-font-primary);
  266.   font-size: 0.6rem;
  267.   line-height: 1;
  268.   font-weight: 600;
  269.   text-transform: uppercase;
  270.   letter-spacing: 1px;
  271.   color: hsl(180, 80%, 20%);
  273.   background-color: hsl(180, 80%, 60%);
  275.   padding: 0.4rem;
  276.   margin-block: 0.5rem;
  278.   border-radius: 4px;
  279. }
  281. .section1 a {
  282.   text-decoration: none;
  283.   color: none;
  284. }
  286. .section1 a:hover {
  287.   text-decoration: none;
  288.   color: #d513199b;
  289. }
  291. .overlayImg {
  292.   position: absolute;
  293.   top: 60;
  294.   left: 0;
  295.   right: 0;
  296.   bottom: -60;
  297.   background-color: rgba(0, 0, 0, 0.5); /* Couleur sombre avec transparence */
  298. }        
  300. .hero__text {
  301.   position: relative;
  302.   z-index: 1; /* Pour que le texte soit au-dessus de l'overlay */
  303.   color: white;
  304.   text-align: center;
  305.   padding: 20px;
  306. }
  308. .hero__image-wrapper {
  309.   background-size: cover;
  310. }
  313. </style>
  315.     <section class="hero">
  316.         <div class="hero__image-wrapper">
  317.             {#<img style="opacity: 0.5" id="hero__image" src="https://picsum.photos/1280/720" alt="Picsum placeholder image"/>#}
  318.             <img style="opacity: 1" id="hero__image" src="{{ asset('templateSyscofie/images/graphiques-financiers.jpg') }}" alt="Picsum placeholder image"/>
  319.         </div>
  320.     <div class="overlayImg"></div>
  321.         <div class="hero__text">
  322.             <h1>Cabinets de Comptabilité : Votre Partenaire pour la Gestion Financière</h1>
  323.             <p>Explorez notre répertoire de cabinets de comptabilité pour bénéficier d'une expertise professionnelle dans la gestion de vos finances et l'optimisation fiscale.</p>
  324.             <button id="hero__img-refresh">Glissez pour explorez <i class="bi bi-arrow-down"></i></button>
  325.         </div>
  326.     </section>
  327.     <section class="mt-4" style="padding-top: 60px; padding-bottom: 30px; background-color: #84858223;">
  328.         <div class="container">
  329.             <div class="row g-4">
  330.                 <div class="col-12 col-md-4">
  331.                     <div class="bg-white p-3 rounded-4 shadow-sm d-flex align-items-center section1">
  332.                         <div class="bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" style="width: 65px; height: 48px; margin-right: 1rem;">
  333.                             <i class="bi bi-folder" style="font-size: 30px;"></i>
  334.                         </div>
  335.               <a href="{{ path('produit_service_services') }}">
  336.                             <div>
  337.                                 <h3 class="fw-bold mb-1">Services Offerts</h3>
  338.                                 <p>Découvrez les services proposés par nos différents cabinets.</p>
  339.                             </div>
  340.               </a>
  341.                     </div>
  342.                 </div>
  343.                 <div class="col-12 col-md-4">
  344.                     <div class="bg-white p-3 rounded-4 shadow-sm d-flex align-items-center section1">
  345.                         <div class="bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 48px; margin-right: 1rem;">
  346.                             <i class="bi bi-check-circle" style="font-size: 30px;"></i>
  347.                         </div>
  348.             <a href="{{ path('produit_service_galery') }}">
  349.                           <div>
  350.                               <h3 class="fw-bold mb-1">Nos Interventions</h3>
  351.                               <p>Exemples concrets de succès avec nos clients.</p>
  352.                           </div>
  353.             </a>
  354.                     </div>
  355.                 </div>
  356.                 <div class="col-12 col-md-4">
  357.                     <div class="bg-white p-3 rounded-4 shadow-sm d-flex align-items-center section1">
  358.                         <div class="bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 48px; margin-right: 1rem;">
  359.                             <i class="bi bi-book" style="font-size: 30px;"></i>
  360.                         </div>
  361.             <a href="{{ path('produit_service_blog_pagine') }}">
  362.                           <div>
  363.                               <h3 class="fw-bold mb-1">Blog et Ressources</h3>
  364.                               <p>Articles et conseils pour optimiser votre gestion</p>
  365.                           </div>
  366.                         </a>
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.         </div>
  371.     </section>
  373.     <section class="section services__v3" id="services" style="background-color: #ffff;">
  374.         <section class=" section services__v3" id="services" style="">
  375.             <div class="section-head center wt-small-separator-outer container">
  376.             <div class="wt-small-separator site-text-primary">
  377.                 <div class="sep-leaf-left"></div>
  378.                 <div>Cabinet Yaounde</div>
  379.             </div>
  380.             {# <h1 class="wt-title">cabinet Yaounde</h1> #}
  382.         </div>
  383.             {# <div class="container">
  384.                 <div class="row align-items-center">
  385.                     <div class="col-auto">
  386.                         <img src="{{ asset('templateSyscofie/images/person-sq-2-min.jpg') }}" alt="Description de l'image" class="img-fluid" style="width: 300px; height: 100%;">
  387.                     </div>
  388.                     <div class="col text-center">
  389.                         <h3 class="fw-bold">Comment nous retrouver ?</h3>
  390.                         <p class="text-muted">Ceci est une description ou un texte explicatif.</p>
  391.                     </div>
  392.                     <div class="col-auto">
  393.                         <button class="custom-btn btn-5"><span>Nous joindre</span></button>
  394.                     </div>
  395.                 </div>
  396.             </div> #}
  397.       <div class="container">
  398.         <div class="row" style="margin-top: -40px;">
  399.           <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 mt-3">
  400.             <div class="news-container">
  401.               <a href="#">
  402.                 <img class="img-fluid rounded mb-md-0" src="{{ asset('templateSyscofie/images/cabinet1.jpg') }}" alt="alt">
  403.               </a>
  404.               <div class="news-overlay rounded">
  405.                 <span>
  406.                   <h3 style="font-weight: bold;">Yaounde</h3>
  407.                   {# <p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p> #}
  408.                   <p style="font-weight: bold;">
  409.                     <i class="bi bi-phone"></i> 656 56 00 14</p>
  410.                   <p style="font-weight: bold;"><i class="bi bi-geo-alt"> </i>Carrefour terre rouge</p>
  411.                   <a class="btn btn-primary" href="#">Notre cabinet à Yaounde
  412.                     <i class="bi bi-chevron-right"></i>
  413.                   </a>
  414.                 </span>
  415.               </div>
  416.             </div>
  417.           </div>
  418.           <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 mt-3">
  419.             <div class="">
  420.               <h1 class="wt-title">Expertise Comptable Locale pour un Succès Global à Yaounde avec Syscofie</h1>
  421.               <p>Notre équipe d'experts à Yaoundé combine une expertise locale avec une vision globale. Nous vous aidons à naviguer dans le monde complexe de la comptabilité tout en vous permettant de vous concentrer sur votre développement.</p>
  422.               <div class="badge">
  423.                 <span>C1</span>
  424.               </div>
  425.               <h6>
  426.                 Mots du cabinet
  427.               </h6>
  428.               <blockquote class="blockquote">
  429.                 <p>
  430.                   “Syscofie : Votre Expertise Comptable Locale pour Réussir Globalement à Yaoundé.”
  431.                 </p>
  432.                 <p>
  433.                   <cite>― La maison du contribuable</cite>
  434.                 </p>
  435.               </blockquote>
  436.             </div>
  437.           </div>
  438.         </div>
  439.       </div>
  440.     </section>
  442.     <section class=" section services__v3" id="services" style="margin-top: 40px;">
  443.             <div class="section-head center wt-small-separator-outer container">
  444.             <div class="wt-small-separator site-text-primary">
  445.                 <div class="sep-leaf-left"></div>
  446.                 <div>Cabinet Douala</div>
  447.             </div>
  449.         </div>
  451.       <div class="container">
  452.         <div class="row" style="margin-top: -40px;">
  453.           <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 mt-3">
  454.             <div class="news-container">
  455.               <a href="#">
  456.                 <img class="img-fluid rounded mb-md-0" src="{{ asset('templateSyscofie/images/formateur-explique-specificites-du-logiciel-au-nouvel-employe_74855-1666.jpg') }}" alt="alt">
  457.               </a>
  458.               <div class="news-overlay rounded">
  459.                 <span>
  460.                   <h3 style="font-weight: bold;">Douala</h3>
  461.                   <div class="shorttextlength">
  462.                     {# <p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> #}
  463.                     <p style="font-weight: bold;">
  464.                       <i class="bi bi-phone"></i> 656 56 00 14</p>
  465.                     <p style="font-weight: bold;"> <i class="bi bi-geo-alt"></i> Akwa</p>
  466.                   </div>
  467.                   <a class="btn btn-primary" href="#">Notre cabinet à Douala
  468.                     <i class="bi bi-chevron-right"></i>
  469.                   </a>
  470.                 </span>
  471.               </div>
  472.             </div>
  473.           </div>
  474.           <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 mt-3">
  475.             <div class="">
  476.               <h1 class="wt-title">Cabinet Comptable Syscofie : Ancré dans Douala pour mieux vous servir</h1>
  477.               <p>Fort de notre connaissance approfondie de l'économie locale, notre cabinet, situé à Douala, est dédié à répondre aux défis uniques de votre entreprise. Nous sommes là pour vous accompagner à chaque étape de votre croissance.</p>
  478.               <div class="badge">
  479.                 <span>C2</span>
  480.               </div>
  481.               <h6>
  482.                 Mots du cabinet
  483.               </h6>
  484.               <blockquote class="blockquote">
  485.                 <p>
  486.                   “Votre croissance, notre priorité : expertise locale pour relever vos défis uniques.”
  487.                 </p>
  488.                 <p>
  489.                   <cite>― La maison du contribuable</cite>
  490.                 </p>
  491.               </blockquote>
  492.             </div>
  493.           </div>
  494.         </div>
  495.       </div>
  496.     </section>
  498.     <section class=" section services__v3" id="services" style="margin-top: 40px;">
  499.             <div class="section-head center wt-small-separator-outer container">
  500.             <div class="wt-small-separator site-text-primary">
  501.                 <div class="sep-leaf-left"></div>
  502.                 <div>Cabinet Bafoussam</div>
  503.             </div>
  505.         </div>
  506.       <div class="container">
  507.         <div class="row" style="margin-top: -40px;">
  508.           <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 mt-3">
  509.             <div class="news-container">
  510.               <a href="#">
  511.                 <img class="img-fluid rounded mb-md-0" src="{{ asset('templateSyscofie/images/cabinet2.jpg') }}" alt="alt">
  512.               </a>
  513.               <div class="news-overlay rounded">
  514.                 <span class="btn-cab">
  515.                   <h3 style="font-weight: bold;">Bafoussam</h3>
  516.                   {# <p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> #}
  517.                   <p style="font-weight: bold;">
  518.                     <i class="bi bi-phone"></i> 656 56 00 14</p>
  519.                   <p style="font-weight: bold;"> <i class="bi bi-geo-alt"></i> Carrefour terre rouge</p>
  520.                   <a class="btn btn-primary" href="#">Notre cabinet à Bafoussam
  521.                     <i class="bi bi-chevron-right"></i>
  522.                   </a>
  523.                 </span>
  524.               </div>
  525.             </div>
  526.           </div>
  527.           <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 mt-3">
  528.             <div class="">
  529.               <h1 class="wt-title">Développez Votre Activité avec Nos Experts de Bafoussam</h1>
  530.               <p>Avec notre équipe d'experts basée à Bafoussam, vous bénéficiez d'un accompagnement stratégique pour faire croître votre entreprise. Nous sommes là pour vous aider à identifier des opportunités et à surmonter les défis financiers.</p>
  531.               <div class="badge">
  532.                 <span>C3</span>
  533.               </div>
  534.               <h6>
  535.                 Mots du cabinet
  536.               </h6>
  537.               <blockquote class="blockquote">
  538.                 <p>
  539.                   “Élevez votre activité avec l'expertise inégalée de nos spécialistes à Bafoussam.”
  540.                 </p>
  541.                 <p>
  542.                   <cite>― La maison du contribuable</cite>
  543.                 </p>
  544.               </blockquote>
  545.             </div>
  546.           </div>
  547.         </div>
  548.       </div>
  549.     </section>
  550.   </section>
  552.   <section class=" section services__v3" id="services" style="margin-top: 40px;">
  553.         <div class="section-head center wt-small-separator-outer1 container">
  554.         <div class="wt-small-separator site-text-primary">
  555.             <div class="sep-leaf-left"></div>
  556.             <div>FAQ</div>
  557.         </div>
  558.       <h1 class="wt-title">Questions fréquentes sur comment trouver un cabinet comptable pour son entreprise</h1>
  559.     </div>
  560.     <div class="container my-4">
  561.       <div class="text-center mb-3">
  562.           <img class="img-fluid rounded" src="{{ asset('templateSyscofie/images/SVG/FAQ.svg') }}" alt="alt">
  563.       </div>
  564.       <div class="row">
  566.         <div class="col-md-6">
  567.           <div class="container-faq">
  568.             <div class="question">
  569.               Quels sont les avantages d'une collaboration à long terme avec un cabinet comptable ?
  570.             </div>
  571.             <div class="answercont">
  572.               <div class="answer">
  573.                 Une relation à long terme favorise la compréhension approfondie de votre entreprise, permettant ainsi des conseils plus adaptés et une gestion proactive des enjeux financiers.<br><br>
  575.                 <a href="#">Plus de questions? Contactez-nous</a>
  576.               </div>
  577.             </div>
  578.           </div>
  579.         </div>
  581.         <div class="col-md-6">
  582.           <div class="container-faq">
  583.             <div class="question">
  584.               Comment un cabinet comptable peut-il m’aider en matière de stratégie fiscale ?
  585.             </div>
  586.             <div class="answercont">
  587.               <div class="answer">
  588.                 Ils peuvent analyser votre situation financière pour identifier des opportunités d’optimisation fiscale, minimiser les impôts dus et planifier des investissements stratégiques.<br><br>
  590.                 <a href="#">Plus de questions? Contactez-nous</a>
  591.               </div>
  592.             </div>
  593.           </div>
  594.         </div>
  596.         <div class="col-md-6">
  597.           <div class="container-faq">
  598.             <div class="question">
  599.               Comment un cabinet d'expertise comptable peut-il contribuer à la croissance de mon entreprise ?
  600.             </div>
  601.             <div class="answercont">
  602.               <div class="answer">
  603.                  En fournissant des analyses financières régulières, des conseils stratégiques et en vous aidant à prendre des décisions basées sur des données solides<br><br>
  605.                 <a href="#">Plus de questions? Contactez-nous</a>
  606.               </div>
  607.             </div>
  608.           </div>
  609.         </div>
  611.         <div class="col-md-6">
  612.           <div class="container-faq">
  613.             <div class="question">
  614.               Quelles sont les principales missions d’un cabinet d'expertise comptable ?
  615.             </div>
  616.             <div class="answercont">
  617.               <div class="answer">
  618.                 Les missions incluent la tenue de la comptabilité, la préparation des déclarations fiscales, le conseil en gestion, l’audit et l’assistance lors de contrôles fiscaux.<br><br>
  620.                 <a href="#">Plus de questions? Contactez-nous</a>
  621.               </div>
  622.             </div>
  623.           </div>
  624.         </div>
  626.         <div class="row">
  627.           <div class="col-md-12 mt-3 mb-5">
  628.             <h3 class="text-center">SYSCOFIE CONSULTING<h3>
  629.           </div>
  630.         </div>
  632.       </div>
  635.     </div>
  636.   </section>
  637.     
  638.     <script>
  639.         {# var imgRefreshBtn = document.getElementById("hero__img-refresh");
  640.             // Update the picsum image source on btn click
  641.             imgRefreshBtn.onclick = function () {
  642.               //document.getElementById("hero__image").src =
  643.             //"https://picsum.photos/1280/720?rand=" + new Date().getTime();
  644.         }; #}
  646.     {#let question = document.querySelectorAll(".question");
  647.     question.forEach(question => {
  648.       question.addEventListener("click", event => {
  649.         const active = document.querySelector(".question.active");
  650.         if(active && active !== question ) {
  651.           active.classList.toggle("active");
  652.           active.nextElementSibling.style.maxHeight = 0;
  653.         }
  654.         question.classList.toggle("active");
  655.         const answer = question.nextElementSibling;
  656.         if(question.classList.contains("active")){
  657.           answer.style.maxHeight = answer.scrollHeight + "px";
  658.         } else {
  659.           answer.style.maxHeight = 0;
  660.         }
  661.       })
  662.     })#}
  664.     let questions = document.querySelectorAll(".question");
  665.       questions.forEach(question => {
  666.       // Ajoutez la classe active par défaut
  667.       question.classList.add("active");
  668.       const answer = question.nextElementSibling;
  669.       answer.style.maxHeight = answer.scrollHeight + "px"; // Ouvre toutes les réponses
  671.       question.addEventListener("click", event => {
  672.         const active = document.querySelector(".question.active");
  673.         if (active && active !== question) {
  674.             active.classList.toggle("active");
  675.             active.nextElementSibling.style.maxHeight = 0; // Ferme la réponse active
  676.         }
  677.         question.classList.toggle("active");
  678.         if (question.classList.contains("active")) {
  679.             answer.style.maxHeight = answer.scrollHeight + "px"; // Ouvre la réponse
  680.         } else {
  681.             answer.style.maxHeight = 0; // Ferme la réponse
  682.         }
  683.       });
  684.     });
  686.     </script>
  687. {% endblock %}