var/cache/dev/twig/29/299c57f6539e406b9583214e04ee9505.php line 42

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  16. /* Theme/Produit/Service/Service/departement.html.twig */
  17. class __TwigTemplate_77f2cbdefe44c123b77dff816dcc5cb3 extends Template
  18. {
  19.     private $source;
  20.     private $macros = [];
  22.     public function __construct(Environment $env)
  23.     {
  24.         parent::__construct($env);
  26.         $this->source = $this->getSourceContext();
  28.         $this->blocks = [
  29.             'meta' => [$this, 'block_meta'],
  30.             'title' => [$this, 'block_title'],
  31.             'userblog_body' => [$this, 'block_userblog_body'],
  32.             'javascripttemplate' => [$this, 'block_javascripttemplate'],
  33.         ];
  34.     }
  36.     protected function doGetParent(array $context)
  37.     {
  38.         // line 1
  39.         return "Theme/Users/User/layoutbase.html.twig";
  40.     }
  42.     protected function doDisplay(array $context, array $blocks = [])
  43.     {
  44.         $macros = $this->macros;
  45.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  46.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Service/Service/departement.html.twig"));
  48.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  49.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Service/Service/departement.html.twig"));
  51.         $this->parent = $this->loadTemplate("Theme/Users/User/layoutbase.html.twig", "Theme/Produit/Service/Service/departement.html.twig", 1);
  52.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  53.         
  54.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  56.         
  57.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  59.     }
  61.     // line 2
  62.     public function block_meta($context, array $blocks = [])
  63.     {
  64.         $macros = $this->macros;
  65.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  66.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  68.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  69.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  71.         // line 3
  72.         yield "\t";
  73.         yield from $this->yieldParentBlock("meta", $context, $blocks);
  74.         yield "
  75. \t<meta name=\"keywords\" content=\"";
  76.         // line 4
  77.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 4, $this->source); })()), "html", null, true);
  78.         yield ", \"/>
  79. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  80. \t<meta name=\"description\" content=\"";
  81.         // line 6
  82.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 6, $this->source); })()), "html", null, true);
  83.         yield "\" />
  84. ";
  85.         
  86.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  88.         
  89.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  91.         return; yield '';
  92.     }
  94.     // line 9
  95.     public function block_title($context, array $blocks = [])
  96.     {
  97.         $macros = $this->macros;
  98.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  99.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  101.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  102.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  104.         // line 10
  105.         yield "\t";
  106.         yield from $this->yieldParentBlock("title", $context, $blocks);
  107.         yield " - Détails du service ..
  108. ";
  109.         
  110.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  112.         
  113.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  115.         return; yield '';
  116.     }
  118.     // line 13
  119.     public function block_userblog_body($context, array $blocks = [])
  120.     {
  121.         $macros = $this->macros;
  122.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  123.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  125.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  126.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  128.         // line 14
  129.         yield "<style>
  130.     /* Table List */
  131.     ul {
  132.         list-style-type: none;
  133.         padding: 0;
  134.     }
  135.     .list-check li {
  136.         display: flex;
  137.         align-items: center;
  138.         margin: 15px 0;
  139.         padding: 10px;
  140.         border-radius: 5px;
  141.         background-color: #fff; 
  142.         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  143.         transition: transform 0.2s; /* Effet de transition */
  144.     }
  145.     li:hover {
  146.         transform: scale(1.02); /* Agrandissement au survol */
  147.     }
  148.     .icon {
  149.         font-size: 28px; 
  150.         color: blue;
  151.         margin-right: 15px;
  152.     }
  153.     .text {
  154.         font-size: 18px;
  155.     }
  156.     .hero__v6 {
  157.         display: flex; /* Utiliser Flexbox pour la mise en page */
  158.         align-items: center; /* Aligne les éléments au centre */
  159.     }
  160.     .img-departement {
  161.         width: auto;  /* Largeur automatique pour garder le ratio */
  162.         height: 100%; /* Prend la hauteur du conteneur */
  163.         object-fit: cover; /* Remplit l'espace de manière appropriée */
  164.     }
  166.     .stat-item i {
  167.       font-size: 100px; /* Ajuste la taille selon tes besoins */
  168.       color: #fff; /* Change la couleur si nécessaire */
  169.     }
  171.   /*  btn */
  172.   .btn-3 {
  173.   color: #fff;
  174.   border: 1px solid #fff;
  175.   background-color: transparent;
  176.   font-weight: 500;
  177.   border-radius: 30px;
  178.   padding: 0px 15px 5px 15px;
  179. }
  180. .btn-3::after {
  181.   content: \"➤\";
  182.   margin-left: 10px;
  183.   font-size: 22px;
  184.   position: relative;
  185.   top: 3px;
  186. }
  187. .btn-3:hover {
  188.   background-color: #77cd0dff;
  189.   transform: translateY(-2px);
  190.   color: white;
  191. }
  196. /* btn-call */
  198. .btn-call {
  199.     background: #38a3fd;
  200.     border: 2px solid #38a3fd;
  201.     border-radius: 50%;
  202.     box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
  203.     cursor: pointer;
  204.     height: 60px;
  205.     width: 60px;
  206.     text-align: center;
  207.     position: fixed;
  208.     right: 50px;
  209.     bottom: 50px;
  210.     z-index: 999;
  211.     transition: .3s;
  212.     -webkit-animation: hoverWave linear 1s infinite;
  213.     animation: hoverWave linear 1s infinite;
  214.     display: flex;
  215.     justify-content: center;
  216.     align-items: center;
  217. \t\ttext-decoration: none;
  218. }
  220. .btn-call__ico {
  221.     display: flex;
  222.     justify-content: center;
  223.     align-items: center;
  224.     animation: 1200ms ease 0s normal none 1 running shake;
  225.     animation-iteration-count: infinite;
  226.     -webkit-animation: 1200ms ease 0s normal none 1 running shake;
  227.     -webkit-animation-iteration-count: infinite;
  228.     color: white;
  229.     font-size: 30px;
  230.     padding-top: 5px;
  231.     transition: .3s all;
  232. }
  234. .btn-call:hover {
  235.     background-color: #fff;
  236. }
  238. .btn-call:hover .btn-call__ico {
  239.     color: #38a3fd;
  240. }
  242. @-webkit-keyframes hoverWave {
  243.     0% {
  244.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  245.     }
  247.     40% {
  248.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  249.     }
  251.     80% {
  252.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  253.     }
  255.     100% {
  256.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  257.     }
  258. }
  260. @keyframes hoverWave {
  261.     0% {
  262.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  263.     }
  265.     40% {
  266.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  267.     }
  269.     80% {
  270.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  271.     }
  273.     100% {
  274.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  275.     }
  276. }
  278. /* animations icon */
  280. @keyframes shake {
  281.     0% {
  282.         transform: rotateZ(0deg);
  283.         -ms-transform: rotateZ(0deg);
  284.         -webkit-transform: rotateZ(0deg);
  285.     }
  287.     10% {
  288.         transform: rotateZ(-30deg);
  289.         -ms-transform: rotateZ(-30deg);
  290.         -webkit-transform: rotateZ(-30deg);
  291.     }
  293.     20% {
  294.         transform: rotateZ(15deg);
  295.         -ms-transform: rotateZ(15deg);
  296.         -webkit-transform: rotateZ(15deg);
  297.     }
  299.     30% {
  300.         transform: rotateZ(-10deg);
  301.         -ms-transform: rotateZ(-10deg);
  302.         -webkit-transform: rotateZ(-10deg);
  303.     }
  305.     40% {
  306.         transform: rotateZ(7.5deg);
  307.         -ms-transform: rotateZ(7.5deg);
  308.         -webkit-transform: rotateZ(7.5deg);
  309.     }
  311.     50% {
  312.         transform: rotateZ(-6deg);
  313.         -ms-transform: rotateZ(-6deg);
  314.         -webkit-transform: rotateZ(-6deg);
  315.     }
  317.     60% {
  318.         transform: rotateZ(5deg);
  319.         -ms-transform: rotateZ(5deg);
  320.         -webkit-transform: rotateZ(5deg);
  321.     }
  323.     70% {
  324.         transform: rotateZ(-4.28571deg);
  325.         -ms-transform: rotateZ(-4.28571deg);
  326.         -webkit-transform: rotateZ(-4.28571deg);
  327.     }
  329.     80% {
  330.         transform: rotateZ(3.75deg);
  331.         -ms-transform: rotateZ(3.75deg);
  332.         -webkit-transform: rotateZ(3.75deg);
  333.     }
  335.     90% {
  336.         transform: rotateZ(-3.33333deg);
  337.         -ms-transform: rotateZ(-3.33333deg);
  338.         -webkit-transform: rotateZ(-3.33333deg);
  339.     }
  341.     100% {
  342.         transform: rotateZ(0deg);
  343.         -ms-transform: rotateZ(0deg);
  344.         -webkit-transform: rotateZ(0deg);
  345.     }
  346. }
  348. @-webkit-keyframes shake {
  349.     0% {
  350.         transform: rotateZ(0deg);
  351.         -ms-transform: rotateZ(0deg);
  352.         -webkit-transform: rotateZ(0deg);
  353.     }
  355.     10% {
  356.         transform: rotateZ(-30deg);
  357.         -ms-transform: rotateZ(-30deg);
  358.         -webkit-transform: rotateZ(-30deg);
  359.     }
  361.     20% {
  362.         transform: rotateZ(15deg);
  363.         -ms-transform: rotateZ(15deg);
  364.         -webkit-transform: rotateZ(15deg);
  365.     }
  367.     30% {
  368.         transform: rotateZ(-10deg);
  369.         -ms-transform: rotateZ(-10deg);
  370.         -webkit-transform: rotateZ(-10deg);
  371.     }
  373.     40% {
  374.         transform: rotateZ(7.5deg);
  375.         -ms-transform: rotateZ(7.5deg);
  376.         -webkit-transform: rotateZ(7.5deg);
  377.     }
  379.     50% {
  380.         transform: rotateZ(-6deg);
  381.         -ms-transform: rotateZ(-6deg);
  382.         -webkit-transform: rotateZ(-6deg);
  383.     }
  385.     60% {
  386.         transform: rotateZ(5deg);
  387.         -ms-transform: rotateZ(5deg);
  388.         -webkit-transform: rotateZ(5deg);
  389.     }
  391.     70% {
  392.         transform: rotateZ(-4.28571deg);
  393.         -ms-transform: rotateZ(-4.28571deg);
  394.         -webkit-transform: rotateZ(-4.28571deg);
  395.     }
  397.     80% {
  398.         transform: rotateZ(3.75deg);
  399.         -ms-transform: rotateZ(3.75deg);
  400.         -webkit-transform: rotateZ(3.75deg);
  401.     }
  403.     90% {
  404.         transform: rotateZ(-3.33333deg);
  405.         -ms-transform: rotateZ(-3.33333deg);
  406.         -webkit-transform: rotateZ(-3.33333deg);
  407.     }
  409.     100% {
  410.         transform: rotateZ(0deg);
  411.         -ms-transform: rotateZ(0deg);
  412.         -webkit-transform: rotateZ(0deg);
  413.     }
  414. }
  416. /* Services css */
  417. /* reset default */
  418. *,
  419. *::before,
  420. *::after {
  421.   margin: 0;
  422.   padding: 0;
  423.   box-sizing: border-box;
  424. }
  426. :root {
  427.   --white: #efe;
  428.   --blackish: #23252f;
  429.   --black-light: #3d3b36;
  430.   --black-dark: #1c1c1c;
  431.   --beige-sand-light: #f9eedc;
  432.   --beige-sand-dark: #d6bb9a;
  433.   --pink-light: #fcdcdd;
  434.   --neon-green: #64ed85;
  435.   --transparent: rgba(255, 255, 255, 0);
  436.   --transition-duration: 0.5s;
  437.   --blue: #0ffbf9;
  438.   --red: #cc0f39;
  439.   --twitter: #1c96e9;
  440.   --font-size-p: clamp(1rem, 1.2vw, 1.3rem);
  441.   --font-size-h2: clamp(1.5rem, (2vw + 1rem), 2rem);
  442. }
  444. /* *********************** */
  446. ";
  447.         // line 337
  448.         yield "
  449. .carte {
  450.   /*width: clamp(230px, 45%, 920px);*/
  451.   /* border: solid rgba(0, 0, 0, 0.2); */
  452.   max-height: 1000px;
  453.   margin: 1rem 0.8rem;
  454.   flex-grow: 0.5;
  455.   /*padding: 1rem;
  456.   border-radius: 5px;
  457.   box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);*/
  458.   transition: 0.3s;
  459. }
  461. .carte:hover {
  462.   /*box-shadow: 0 5px 9px rgba(0, 0, 0, 0.4);*/
  463.   transition: 0.3s;
  464.   /* overflow: hidden; */
  465. }
  467. .img {
  468.   overflow: hidden;
  469.   /* border: solid red; */
  470.   display: block;
  471.   margin-bottom: 0.6rem;
  472.   border-radius: 4px 4px 4px 4px;
  473.   position: relative;
  474. }
  476. .img::before {
  477.   content: \"\";
  478.   position: absolute;
  479.   width: 100%;
  480.   height: 100%;
  481.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  482.   left: 0;
  483.   top: 0;
  484.   z-index: 2;
  485. }
  486. .carte:hover .img::before {
  487.   /* backdrop-filter: blur(1px); */
  488.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  489. }
  491. img {
  492.    /*display: inline-block;*/
  493.   /*display: block;*/
  494.    width: 100%; /* Ajuste la largeur selon tes besoins */
  495.       height: 250px; /* Ajuste la hauteur selon tes besoins */
  496.       object-fit: cover;
  497.   transition: transform 0.3s;
  498.   transform: scale(1);
  499.   filter: saturate(70%);
  500. }
  502. .carte:hover img {
  503.   transform: scale(1.1);
  504.   /* overflow: hidden; */
  505.   transition: transform 0.3s;
  506.   filter: saturate(100%);
  507. }
  509. .text-box {
  510.   overflow: hidden;
  511. }
  513. .description {
  514.   font-size: var(--font-size-p);
  515.   color: var(--black-light);
  516. }
  518. .titre {
  519.   font-size: 20px;
  520.   font-weight: bold;
  521.   color: #268dcf;
  522.   margin-bottom: 1.2rem;
  523.   position: relative;
  524. }
  526. .titre::before {
  527.   content: \"\";
  528.   position: absolute;
  529.   width: 30%;
  530.   height: 2px;
  531.   /* width: 100%;
  532.   height: 100%; */
  533.   /* background: red; */
  534.   border-bottom: 2.2px solid var(--beige-sand-dark);
  535.   transition: var(--transition-duration);
  536.   top: 100%;
  537.   left: -100%;
  538. }
  540. .carte:hover .titre::before {
  541.   transition: var(--transition-duration);
  542.   animation: move-to-right 1s forwards;
  543. }
  545. @keyframes move-to-right {
  546.   0% {
  547.     left: -50%;
  548.   }
  549.   40% {
  550.     left: 50%;
  551.   }
  552.   70% {
  553.     left: -20%;
  554.   }
  555.   100% {
  556.     left: 0;
  557.   }
  558. }
  560. a {
  561.   text-decoration: none;
  562.   /* color: var(--black-dark); */
  563.   font-weight: bold;
  564.   color: #007bffff;
  565. }
  567. ";
  568.         // line 457
  569.         yield "    .section-head.center.wt-small-separator-outer {
  570.         margin-bottom: 50px;
  571.         text-align: center;
  572.     }
  573.     .section-head {
  574.         position: relative;
  575.     }
  576.     .site-text-primary, .wt-small-separator {
  577.         color: #ea130e;
  578.     }
  579.     .wt-small-separator {
  580.         font-family: \"Heebo\", sans-serif;
  581.         text-transform: uppercase;
  582.         letter-spacing: 1px;
  583.         padding-right: 40px;
  584.         font-size: 26px;
  585.         line-height: 26px;
  586.         margin-bottom: 15px;
  587.         position: relative;
  588.         display: inline-block;
  589.         font-weight: 700;
  590.     }
  591.     .section-head.center .wt-small-separator div.sep-leaf-left {
  592.         position: relative;
  593.     }
  594.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  595.         background-color: #ea130e;
  596.     }
  597.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  598.         right: -20px;
  599.         width: 10px;
  600.     }
  601.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  602.         position: absolute;
  603.         content: '';
  604.         height: 22px;
  605.         bottom: 0px;
  606.         top: 0px;
  607.         transform: skew(-20deg);
  608.     }
  609.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  610.         right: -27px;
  611.         width: 4px;
  612.     }
  613.     .section-head.center.wt-small-separator-outer h2 {
  614.         max-width: 630px;
  615.         margin: 0px auto;
  616.     }
  618. </style>
  620. <main>
  621.   <!-- ======= Hero =======-->
  622.   <div class=\"content\" style=\"\">
  623.       <div class=\"wrap\">
  624.         <div class=\"container\">
  625.           <ol class=\"breadcrumb\">
  626.             <li href=\"#\">
  627.               <a>Home</a>
  628.             </li>
  629.             <li href=\"#\">
  630.               <a>Départements</a>
  631.             </li>
  632.             <li href=\"#\">
  633.               <a>Département</a>
  634.             </li>
  635.           </ol>
  636.         </div>
  637.       </div>
  638.     </div>
  639.   <section class=\"hero__v6 section\" id=\"home\" style=\"margin-top: -60px;\">
  640.     <div class=\"container\">
  641.       <div class=\"row\">
  642.         <div class=\"col-lg-6 mb-4 mb-lg-0\">
  643.           <div class=\"row\">
  644.             <div class=\"col-lg-11\">
  645.               <span class=\"hero-subtitle text-uppercase\" data-aos-delay=\"0\">Solutions Syscofie Innovantes</span>
  646.               <h1 class=\"hero-title mb-3\">";
  647.         // line 534
  648.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, (isset($context["depart"]) || array_key_exists("depart", $context) ? $context["depart"] : (function () { throw new RuntimeError('Variable "depart" does not exist.', 534, $this->source); })()), "name", [], "any", false, false, false, 534), "html", null, true);
  649.         yield "</h1>
  650.               <p class=\"hero-description\">";
  651.         // line 535
  652.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, (isset($context["depart"]) || array_key_exists("depart", $context) ? $context["depart"] : (function () { throw new RuntimeError('Variable "depart" does not exist.', 535, $this->source); })()), "description", [], "any", false, false, false, 535), "html", null, true);
  653.         yield "</p>
  654.               <h1 class=\"hero-title mb-1\">Objectifs</h1>
  655.               <ul class=\"list-check\">
  656.                 ";
  657.         // line 538
  658.         $context['_parent'] = $context;
  659.         $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, (isset($context["depart"]) || array_key_exists("depart", $context) ? $context["depart"] : (function () { throw new RuntimeError('Variable "depart" does not exist.', 538, $this->source); })()), "objectifs", [], "any", false, false, false, 538), 0, 4));
  660.         $context['_iterated'] = false;
  661.         foreach ($context['_seq'] as $context["_key"] => $context["object"]) {
  662.             // line 539
  663.             yield "                  <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">";
  664.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["object"], "nombase", [], "array", false, false, false, 539), "html", null, true);
  665.             yield "</span></li>
  666.                 ";
  667.             $context['_iterated'] = true;
  668.         }
  669.         if (!$context['_iterated']) {
  670.             // line 541
  671.             yield "                  <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Assurer une réactivité dans les services proposés</span></li>
  672.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Garantir la conformité avec les obligations fiscales</span></li>
  673.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Faciliter une meilleure prise de décision pour les clients</span></li>
  674.                 ";
  675.         }
  676.         $_parent = $context['_parent'];
  677.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['object'], $context['_parent'], $context['loop']);
  678.         $context = array_intersect_key($context, $_parent) + $_parent;
  679.         // line 545
  680.         yield "
  681.               </ul>
  682.             </div>
  683.           </div>
  684.         </div>
  685.         <div class=\"col-lg-6\">
  686.           <div class=\"hero-img\" style=\"height: 100%;\">
  687.             <img class=\"img-departement img-fluid rounded-4\" src=\"";
  688.         // line 552
  689.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Vich\UploaderBundle\Twig\Extension\UploaderExtensionRuntime')->asset((isset($context["depart"]) || array_key_exists("depart", $context) ? $context["depart"] : (function () { throw new RuntimeError('Variable "depart" does not exist.', 552, $this->source); })())), "html", null, true);
  690.         yield "\" alt=\"Hero Image\" style=\"height: 570px; width:100%;\">
  691.           </div>
  692.         </div>
  693.       </div>
  694.     </div>
  695.   </section>
  696.     <!-- End Hero-->
  697.     
  698.   <!-- ======= How it works =======-->
  699.   <section class=\"section howitworks__v1\" id=\"how-it-works\">
  700.     <div class=\"container\">
  701.       ";
  702.         // line 571
  703.         yield "
  704.       <div class=\"section-head center wt-small-separator-outer\">
  705.         <div class=\"wt-small-separator site-text-primary\">
  706.           <div class=\"sep-leaf-left\"></div>
  707.           <div>Equipes</div>
  708.         </div>
  709.         <h1 class=\"wt-title\">Notre Equipe de Collaborations</h1>
  710.         ";
  711.         // line 579
  712.         yield "        <p>Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p>
  713.       </div>
  715.     </div>
  716.     
  717.   </section>
  718.     <!-- End How it works-->
  719.     
  720.     <!-- ======= Stats =======-->
  721.   <section class=\"stats__v3 section\" style=\"background-color: #268dcf; margin-top: -40px;\">
  722.     <div class=\"container\">
  723.       <div class=\"row\">
  724.         <div class=\"col-lg-12\">
  725.           <div class=\"d-flex flex-wrap content rounded-4\">
  726.             <div class=\"rounded-borders\">
  727.               <div class=\"rounded-border-1\"></div>
  728.               <div class=\"rounded-border-2\"></div>
  729.               <div class=\"rounded-border-3\"></div>
  730.             </div>
  731.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\">
  732.               <div class=\"stat-item\">
  733.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  734.                 <p class=\"mb-0\">Responsable du Département</p>
  735.               </div>
  736.             </div>
  737.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\">
  738.               <div class=\"stat-item\">
  739.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  740.                 <p class=\"mb-0\">Assistant comptable</p>
  741.               </div>
  742.             </div>
  743.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\" >
  744.               <div class=\"stat-item\">
  745.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  746.                 <p class=\"mb-0\">Contrôleur Qualité Comptable</p>
  747.               </div>
  748.             </div>
  749.           </div>
  750.         </div>
  751.       </div>
  752.       <div class=\"text-center bd-highlight mb-3\">
  753.   \t\t  <button type=\"button\" class=\"framed-buttons btn-3 text-center\">Je souhaite échanger avec un expert</button>
  754.   \t  </div>
  755.     </div>
  756.   </section>
  757.     <!-- End Stats-->
  758.     
  759.     <!-- ======= Start Services =======-->
  760.   <section class=\"section services__v3\" id=\"services\" style=\"margin-bottom: 40px;\">
  761.     <div class=\"container\">
  762.       ";
  763.         // line 635
  764.         yield "      <div class=\"section-head center wt-small-separator-outer mt-5\">
  765.         <div class=\"wt-small-separator site-text-primary\">
  766.           <div class=\"sep-leaf-left\"></div>
  767.           <div>Nos Services</div>
  768.         </div>
  769.         <h1 class=\"wt-title\">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h1>
  770.         ";
  771.         // line 642
  772.         yield "        ";
  773.         // line 643
  774.         yield "      </div>
  775.       <div class=\"row\" style=\"margin-top: -40px;\">
  776.         ";
  777.         // line 645
  778.         $context['_parent'] = $context;
  779.         $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::slice($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, (isset($context["depart"]) || array_key_exists("depart", $context) ? $context["depart"] : (function () { throw new RuntimeError('Variable "depart" does not exist.', 645, $this->source); })()), "getSousService", [], "method", false, false, false, 645), 0, 3));
  780.         $context['_iterated'] = false;
  781.         foreach ($context['_seq'] as $context["_key"] => $context["scat"]) {
  782.             // line 646
  783.             yield "        <div class=\"col-lg-4 col-md-6 col-sm-12\">
  784.           <div class=\"carte\">
  785.             <a href=\"";
  786.             // line 648
  787.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_service", ["id" => CoreExtension::getAttribute($this->env, $this->source, $context["scat"], "id", [], "any", false, false, false, 648)]), "html", null, true);
  788.             yield "\">
  789.               <div class=\"img\">
  790.                 <img src=\"";
  791.             // line 650
  792.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/rapport-fin.jpg"), "html", null, true);
  793.             yield "\" alt=\"Nataliya Vaitkevich\">
  794.               </div>
  795.               <div class=\"text-box \">
  796.                 <h2 class=\"titre\">";
  797.             // line 653
  798.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["scat"], "name", [], "any", false, false, false, 653), "html", null, true);
  799.             yield "</h2>
  800.                   En savoir plus
  801.               </div>
  802.             </a>
  803.           </div>
  804.         </div>
  805.         ";
  806.             $context['_iterated'] = true;
  807.         }
  808.         if (!$context['_iterated']) {
  809.             // line 660
  810.             yield "        <div class=\"col-lg-4 col-md-6 col-sm-12\">
  811.           <div class=\"carte\">
  812.             <a href=\"\">
  813.               <div class=\"img\">
  814.                 <img src=\"";
  815.             // line 664
  816.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/scene-bureau-ordinateur-portable.jpg"), "html", null, true);
  817.             yield "\" alt=\"Nataliya Vaitkevich\">
  818.               </div>
  819.               <div class=\"text-box \">
  820.                 <h1 class=\"titre\">Préparation des déclarations fiscales et sociales</h1>
  821.                   En savoir plus
  822.               </div>
  823.             </a>
  824.           </div>
  825.         </div>
  826.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  827.           <div class=\"carte\">
  828.             <a href=\"\">
  829.               <div class=\"img\">
  830.                 <img src=\"";
  831.             // line 677
  832.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/hero-img-2-min.jpg"), "html", null, true);
  833.             yield "\" alt=\"Nataliya Vaitkevich\">
  834.               </div>
  835.               <div class=\"text-box \">
  836.                 <h1 class=\"titre\">Collecte et classement des pièces comptables</h1>
  837.                   En savoir plus
  838.               </div>
  839.             </a>
  840.           </div>
  841.         </div>
  842.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  843.           <div class=\"carte\">
  844.             <a href=\"\">
  845.               <div class=\"img\">
  846.                 <img src=\"";
  847.             // line 690
  848.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/tablette.jpg"), "html", null, true);
  849.             yield "\" alt=\"Nataliya Vaitkevich\">
  850.               </div>
  851.               <div class=\"text-box \">
  852.                 <h1 class=\"titre\">Suivi des comptes tiers</h1>
  853.                 En savoir plus
  854.               </div>
  855.             </a>
  856.           </div>
  857.         </div>
  858.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  859.           <div class=\"carte\">
  860.             <a href=\"\">
  861.               <div class=\"img\">
  862.                 <img src=\"";
  863.             // line 703
  864.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/hero-bg-1-min.jpg"), "html", null, true);
  865.             yield "\" alt=\"Nataliya Vaitkevich\">
  866.               </div>
  867.               <div class=\"text-box \">
  868.                 <h1 class=\"titre\">Revision periodique des comptes et ajustements</h1>
  869.                   En savoir plus
  870.               </div>
  871.             </a>
  872.           </div>
  873.         </div>
  874.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  875.           <div class=\"carte\">
  876.             <a href=\"\">
  877.               <div class=\"img\">
  878.                 <img src=\"";
  879.             // line 716
  880.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/images/presentation.jpg"), "html", null, true);
  881.             yield "\" alt=\"Nataliya Vaitkevich\">
  882.               </div>
  883.               <div class=\"text-box \">
  884.                 <h1 class=\"titre\">Communication régulière avec les clients pour les alertes et reporting</h1>
  885.                 ";
  886.             // line 725
  887.             yield "                En savoir plus
  888.               </div>
  889.             </a>
  890.           </div>
  891.         </div>
  892.         ";
  893.         }
  894.         $_parent = $context['_parent'];
  895.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['scat'], $context['_parent'], $context['loop']);
  896.         $context = array_intersect_key($context, $_parent) + $_parent;
  897.         // line 731
  898.         yield "      </div>
  899.     </div>
  900.   </section>
  901. </main>
  902. <a href=\"tel: 8 888 888 88 88\" rel=\"nofollow\" class=\"btn-call\">
  903. \t<div class=\"btn-call__ico\">
  904. \t\t<i class=\"bi bi-telephone-fill\"></i>
  905. \t</div>
  906. </a>
  910. <div class=\"text-center\" style=\"margin-top: 10px; margin-bottom: 60px;\">
  911. \t";
  912.         // line 789
  913.         yield "
  914. \t\t";
  915.         // line 797
  916.         yield "\t\t\t";
  917.         // line 800
  918.         yield "\t\t";
  919.         // line 801
  920.         yield "\t\t";
  921.         // line 810
  922.         yield "\t<div class=\"btn-group text-center\" role=\"group\" aria-label=\"Basic example\">
  923. \t\t<a href=\"#\" title=\"Première page\" class=\"btn btn-outline-primary mx-2\">
  924. \t\t\t<span><i class=\"bi bi-chevron-double-left\"></i></span>
  925. \t\t</a>
  926. \t\t<a href=\"#\" title=\"Page précedente\" class=\"btn btn-outline-primary mx-2\">
  927. \t\t\t<span><i class=\"bi bi-chevron-left\"></i></span>
  928. \t\t</a>
  930. \t\t<a href=\"#\" class=\"btn btn-outline-primary mx-2 active\" style=\"margin: 0px 0px;\">1</a>
  932. \t\t<a href=\"#\" title=\"Page suivante\" class=\"btn btn-outline-primary mx-2\">
  933. \t\t\t<span><i class=\"bi bi-chevron-right\"></i></span>
  934. \t\t</a>
  935. \t\t<a href=\"#\" title=\"Dernière page\" class=\"btn btn-outline-primary mx-2\">
  936. \t\t\t<span><i class=\"bi bi-chevron-double-right\"></i></spam>
  937. \t\t</a>
  938. \t</div>
  940. \t<script>
  941. \tvar swiperFade = new Swiper(\".swiperFade\", {
  942. \tloop: true,
  943. \teffect: 'fade',
  944. \tnavigation: {
  945. \t  nextEl: \".swiper-button-next\",
  946. \t  prevEl: \".swiper-button-prev\"
  947. \t},
  948. \tpagination: {
  949. \t  el: \".swiper-pagination\",
  950. \t},
  951. \t});
  953. \tvar swiperVertical = new Swiper(\".swiperVertical\", {
  954. \t  loop: true,
  955. \t  effect: 'fade',
  956. \t  direction: \"vertical\",
  957. \t  pagination: {
  958. \t    el: \".swiper-pagination\",
  959. \t    clickable: true,
  960. \t  }
  961. \t});
  963. \tvar swiperEffect = new Swiper(\".swiperEffect\", {
  964. \t  loop: true,
  965. \t  effect: \"cards\",
  966. \t  grabCursor: true,
  967. \t  navigation: {
  968. \t    nextEl: \".swiper-button-next\",
  969. \t    prevEl: \".swiper-button-prev\"
  970. \t  },
  971. \t  pagination: {
  972. \t    el: \".swiper-pagination\",
  973. \t  },
  974. \t});
  975. </script>
  976. </div>
  977. ";
  978.         
  979.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  981.         
  982.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  984.         return; yield '';
  985.     }
  987.     // line 867
  988.     public function block_javascripttemplate($context, array $blocks = [])
  989.     {
  990.         $macros = $this->macros;
  991.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  992.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  994.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  995.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  997.         // line 868
  998.         yield "
  999. ";
  1000.         
  1001.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1003.         
  1004.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1006.         return; yield '';
  1007.     }
  1009.     /**
  1010.      * @codeCoverageIgnore
  1011.      */
  1012.     public function getTemplateName()
  1013.     {
  1014.         return "Theme/Produit/Service/Service/departement.html.twig";
  1015.     }
  1017.     /**
  1018.      * @codeCoverageIgnore
  1019.      */
  1020.     public function isTraitable()
  1021.     {
  1022.         return false;
  1023.     }
  1025.     /**
  1026.      * @codeCoverageIgnore
  1027.      */
  1028.     public function getDebugInfo()
  1029.     {
  1030.         return array (  998 => 868,  988 => 867,  922 => 810,  920 => 801,  918 => 800,  916 => 797,  913 => 789,  898 => 731,  887 => 725,  880 => 716,  864 => 703,  848 => 690,  832 => 677,  816 => 664,  810 => 660,  798 => 653,  792 => 650,  787 => 648,  783 => 646,  778 => 645,  774 => 643,  772 => 642,  764 => 635,  712 => 579,  703 => 571,  689 => 552,  680 => 545,  671 => 541,  663 => 539,  658 => 538,  652 => 535,  648 => 534,  569 => 457,  448 => 337,  129 => 14,  119 => 13,  105 => 10,  95 => 9,  82 => 6,  77 => 4,  72 => 3,  62 => 2,  39 => 1,);
  1031.     }
  1033.     public function getSourceContext()
  1034.     {
  1035.         return new Source("{% extends \"Theme/Users/User/layoutbase.html.twig\" %}
  1036. {% block meta %}
  1037. \t{{ parent() }}
  1038. \t<meta name=\"keywords\" content=\"{{ site }}, \"/>
  1039. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  1040. \t<meta name=\"description\" content=\"{{ site }}\" />
  1041. {% endblock %}
  1043. {% block title %}
  1044. \t{{ parent() }} - Détails du service ..
  1045. {% endblock %}
  1047. {% block userblog_body %}
  1048. <style>
  1049.     /* Table List */
  1050.     ul {
  1051.         list-style-type: none;
  1052.         padding: 0;
  1053.     }
  1054.     .list-check li {
  1055.         display: flex;
  1056.         align-items: center;
  1057.         margin: 15px 0;
  1058.         padding: 10px;
  1059.         border-radius: 5px;
  1060.         background-color: #fff; 
  1061.         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  1062.         transition: transform 0.2s; /* Effet de transition */
  1063.     }
  1064.     li:hover {
  1065.         transform: scale(1.02); /* Agrandissement au survol */
  1066.     }
  1067.     .icon {
  1068.         font-size: 28px; 
  1069.         color: blue;
  1070.         margin-right: 15px;
  1071.     }
  1072.     .text {
  1073.         font-size: 18px;
  1074.     }
  1075.     .hero__v6 {
  1076.         display: flex; /* Utiliser Flexbox pour la mise en page */
  1077.         align-items: center; /* Aligne les éléments au centre */
  1078.     }
  1079.     .img-departement {
  1080.         width: auto;  /* Largeur automatique pour garder le ratio */
  1081.         height: 100%; /* Prend la hauteur du conteneur */
  1082.         object-fit: cover; /* Remplit l'espace de manière appropriée */
  1083.     }
  1085.     .stat-item i {
  1086.       font-size: 100px; /* Ajuste la taille selon tes besoins */
  1087.       color: #fff; /* Change la couleur si nécessaire */
  1088.     }
  1090.   /*  btn */
  1091.   .btn-3 {
  1092.   color: #fff;
  1093.   border: 1px solid #fff;
  1094.   background-color: transparent;
  1095.   font-weight: 500;
  1096.   border-radius: 30px;
  1097.   padding: 0px 15px 5px 15px;
  1098. }
  1099. .btn-3::after {
  1100.   content: \"➤\";
  1101.   margin-left: 10px;
  1102.   font-size: 22px;
  1103.   position: relative;
  1104.   top: 3px;
  1105. }
  1106. .btn-3:hover {
  1107.   background-color: #77cd0dff;
  1108.   transform: translateY(-2px);
  1109.   color: white;
  1110. }
  1115. /* btn-call */
  1117. .btn-call {
  1118.     background: #38a3fd;
  1119.     border: 2px solid #38a3fd;
  1120.     border-radius: 50%;
  1121.     box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
  1122.     cursor: pointer;
  1123.     height: 60px;
  1124.     width: 60px;
  1125.     text-align: center;
  1126.     position: fixed;
  1127.     right: 50px;
  1128.     bottom: 50px;
  1129.     z-index: 999;
  1130.     transition: .3s;
  1131.     -webkit-animation: hoverWave linear 1s infinite;
  1132.     animation: hoverWave linear 1s infinite;
  1133.     display: flex;
  1134.     justify-content: center;
  1135.     align-items: center;
  1136. \t\ttext-decoration: none;
  1137. }
  1139. .btn-call__ico {
  1140.     display: flex;
  1141.     justify-content: center;
  1142.     align-items: center;
  1143.     animation: 1200ms ease 0s normal none 1 running shake;
  1144.     animation-iteration-count: infinite;
  1145.     -webkit-animation: 1200ms ease 0s normal none 1 running shake;
  1146.     -webkit-animation-iteration-count: infinite;
  1147.     color: white;
  1148.     font-size: 30px;
  1149.     padding-top: 5px;
  1150.     transition: .3s all;
  1151. }
  1153. .btn-call:hover {
  1154.     background-color: #fff;
  1155. }
  1157. .btn-call:hover .btn-call__ico {
  1158.     color: #38a3fd;
  1159. }
  1161. @-webkit-keyframes hoverWave {
  1162.     0% {
  1163.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  1164.     }
  1166.     40% {
  1167.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  1168.     }
  1170.     80% {
  1171.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  1172.     }
  1174.     100% {
  1175.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  1176.     }
  1177. }
  1179. @keyframes hoverWave {
  1180.     0% {
  1181.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  1182.     }
  1184.     40% {
  1185.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  1186.     }
  1188.     80% {
  1189.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  1190.     }
  1192.     100% {
  1193.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  1194.     }
  1195. }
  1197. /* animations icon */
  1199. @keyframes shake {
  1200.     0% {
  1201.         transform: rotateZ(0deg);
  1202.         -ms-transform: rotateZ(0deg);
  1203.         -webkit-transform: rotateZ(0deg);
  1204.     }
  1206.     10% {
  1207.         transform: rotateZ(-30deg);
  1208.         -ms-transform: rotateZ(-30deg);
  1209.         -webkit-transform: rotateZ(-30deg);
  1210.     }
  1212.     20% {
  1213.         transform: rotateZ(15deg);
  1214.         -ms-transform: rotateZ(15deg);
  1215.         -webkit-transform: rotateZ(15deg);
  1216.     }
  1218.     30% {
  1219.         transform: rotateZ(-10deg);
  1220.         -ms-transform: rotateZ(-10deg);
  1221.         -webkit-transform: rotateZ(-10deg);
  1222.     }
  1224.     40% {
  1225.         transform: rotateZ(7.5deg);
  1226.         -ms-transform: rotateZ(7.5deg);
  1227.         -webkit-transform: rotateZ(7.5deg);
  1228.     }
  1230.     50% {
  1231.         transform: rotateZ(-6deg);
  1232.         -ms-transform: rotateZ(-6deg);
  1233.         -webkit-transform: rotateZ(-6deg);
  1234.     }
  1236.     60% {
  1237.         transform: rotateZ(5deg);
  1238.         -ms-transform: rotateZ(5deg);
  1239.         -webkit-transform: rotateZ(5deg);
  1240.     }
  1242.     70% {
  1243.         transform: rotateZ(-4.28571deg);
  1244.         -ms-transform: rotateZ(-4.28571deg);
  1245.         -webkit-transform: rotateZ(-4.28571deg);
  1246.     }
  1248.     80% {
  1249.         transform: rotateZ(3.75deg);
  1250.         -ms-transform: rotateZ(3.75deg);
  1251.         -webkit-transform: rotateZ(3.75deg);
  1252.     }
  1254.     90% {
  1255.         transform: rotateZ(-3.33333deg);
  1256.         -ms-transform: rotateZ(-3.33333deg);
  1257.         -webkit-transform: rotateZ(-3.33333deg);
  1258.     }
  1260.     100% {
  1261.         transform: rotateZ(0deg);
  1262.         -ms-transform: rotateZ(0deg);
  1263.         -webkit-transform: rotateZ(0deg);
  1264.     }
  1265. }
  1267. @-webkit-keyframes shake {
  1268.     0% {
  1269.         transform: rotateZ(0deg);
  1270.         -ms-transform: rotateZ(0deg);
  1271.         -webkit-transform: rotateZ(0deg);
  1272.     }
  1274.     10% {
  1275.         transform: rotateZ(-30deg);
  1276.         -ms-transform: rotateZ(-30deg);
  1277.         -webkit-transform: rotateZ(-30deg);
  1278.     }
  1280.     20% {
  1281.         transform: rotateZ(15deg);
  1282.         -ms-transform: rotateZ(15deg);
  1283.         -webkit-transform: rotateZ(15deg);
  1284.     }
  1286.     30% {
  1287.         transform: rotateZ(-10deg);
  1288.         -ms-transform: rotateZ(-10deg);
  1289.         -webkit-transform: rotateZ(-10deg);
  1290.     }
  1292.     40% {
  1293.         transform: rotateZ(7.5deg);
  1294.         -ms-transform: rotateZ(7.5deg);
  1295.         -webkit-transform: rotateZ(7.5deg);
  1296.     }
  1298.     50% {
  1299.         transform: rotateZ(-6deg);
  1300.         -ms-transform: rotateZ(-6deg);
  1301.         -webkit-transform: rotateZ(-6deg);
  1302.     }
  1304.     60% {
  1305.         transform: rotateZ(5deg);
  1306.         -ms-transform: rotateZ(5deg);
  1307.         -webkit-transform: rotateZ(5deg);
  1308.     }
  1310.     70% {
  1311.         transform: rotateZ(-4.28571deg);
  1312.         -ms-transform: rotateZ(-4.28571deg);
  1313.         -webkit-transform: rotateZ(-4.28571deg);
  1314.     }
  1316.     80% {
  1317.         transform: rotateZ(3.75deg);
  1318.         -ms-transform: rotateZ(3.75deg);
  1319.         -webkit-transform: rotateZ(3.75deg);
  1320.     }
  1322.     90% {
  1323.         transform: rotateZ(-3.33333deg);
  1324.         -ms-transform: rotateZ(-3.33333deg);
  1325.         -webkit-transform: rotateZ(-3.33333deg);
  1326.     }
  1328.     100% {
  1329.         transform: rotateZ(0deg);
  1330.         -ms-transform: rotateZ(0deg);
  1331.         -webkit-transform: rotateZ(0deg);
  1332.     }
  1333. }
  1335. /* Services css */
  1336. /* reset default */
  1337. *,
  1338. *::before,
  1339. *::after {
  1340.   margin: 0;
  1341.   padding: 0;
  1342.   box-sizing: border-box;
  1343. }
  1345. :root {
  1346.   --white: #efe;
  1347.   --blackish: #23252f;
  1348.   --black-light: #3d3b36;
  1349.   --black-dark: #1c1c1c;
  1350.   --beige-sand-light: #f9eedc;
  1351.   --beige-sand-dark: #d6bb9a;
  1352.   --pink-light: #fcdcdd;
  1353.   --neon-green: #64ed85;
  1354.   --transparent: rgba(255, 255, 255, 0);
  1355.   --transition-duration: 0.5s;
  1356.   --blue: #0ffbf9;
  1357.   --red: #cc0f39;
  1358.   --twitter: #1c96e9;
  1359.   --font-size-p: clamp(1rem, 1.2vw, 1.3rem);
  1360.   --font-size-h2: clamp(1.5rem, (2vw + 1rem), 2rem);
  1361. }
  1363. /* *********************** */
  1365. {# .flex-center {
  1366.   display: flex;
  1367.   justify-content: center;
  1368.   align-items: center;
  1369.   flex-wrap: wrap;
  1370. } #}
  1372. .carte {
  1373.   /*width: clamp(230px, 45%, 920px);*/
  1374.   /* border: solid rgba(0, 0, 0, 0.2); */
  1375.   max-height: 1000px;
  1376.   margin: 1rem 0.8rem;
  1377.   flex-grow: 0.5;
  1378.   /*padding: 1rem;
  1379.   border-radius: 5px;
  1380.   box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);*/
  1381.   transition: 0.3s;
  1382. }
  1384. .carte:hover {
  1385.   /*box-shadow: 0 5px 9px rgba(0, 0, 0, 0.4);*/
  1386.   transition: 0.3s;
  1387.   /* overflow: hidden; */
  1388. }
  1390. .img {
  1391.   overflow: hidden;
  1392.   /* border: solid red; */
  1393.   display: block;
  1394.   margin-bottom: 0.6rem;
  1395.   border-radius: 4px 4px 4px 4px;
  1396.   position: relative;
  1397. }
  1399. .img::before {
  1400.   content: \"\";
  1401.   position: absolute;
  1402.   width: 100%;
  1403.   height: 100%;
  1404.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  1405.   left: 0;
  1406.   top: 0;
  1407.   z-index: 2;
  1408. }
  1409. .carte:hover .img::before {
  1410.   /* backdrop-filter: blur(1px); */
  1411.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  1412. }
  1414. img {
  1415.    /*display: inline-block;*/
  1416.   /*display: block;*/
  1417.    width: 100%; /* Ajuste la largeur selon tes besoins */
  1418.       height: 250px; /* Ajuste la hauteur selon tes besoins */
  1419.       object-fit: cover;
  1420.   transition: transform 0.3s;
  1421.   transform: scale(1);
  1422.   filter: saturate(70%);
  1423. }
  1425. .carte:hover img {
  1426.   transform: scale(1.1);
  1427.   /* overflow: hidden; */
  1428.   transition: transform 0.3s;
  1429.   filter: saturate(100%);
  1430. }
  1432. .text-box {
  1433.   overflow: hidden;
  1434. }
  1436. .description {
  1437.   font-size: var(--font-size-p);
  1438.   color: var(--black-light);
  1439. }
  1441. .titre {
  1442.   font-size: 20px;
  1443.   font-weight: bold;
  1444.   color: #268dcf;
  1445.   margin-bottom: 1.2rem;
  1446.   position: relative;
  1447. }
  1449. .titre::before {
  1450.   content: \"\";
  1451.   position: absolute;
  1452.   width: 30%;
  1453.   height: 2px;
  1454.   /* width: 100%;
  1455.   height: 100%; */
  1456.   /* background: red; */
  1457.   border-bottom: 2.2px solid var(--beige-sand-dark);
  1458.   transition: var(--transition-duration);
  1459.   top: 100%;
  1460.   left: -100%;
  1461. }
  1463. .carte:hover .titre::before {
  1464.   transition: var(--transition-duration);
  1465.   animation: move-to-right 1s forwards;
  1466. }
  1468. @keyframes move-to-right {
  1469.   0% {
  1470.     left: -50%;
  1471.   }
  1472.   40% {
  1473.     left: 50%;
  1474.   }
  1475.   70% {
  1476.     left: -20%;
  1477.   }
  1478.   100% {
  1479.     left: 0;
  1480.   }
  1481. }
  1483. a {
  1484.   text-decoration: none;
  1485.   /* color: var(--black-dark); */
  1486.   font-weight: bold;
  1487.   color: #007bffff;
  1488. }
  1490. {# css indice sections  #}
  1491.     .section-head.center.wt-small-separator-outer {
  1492.         margin-bottom: 50px;
  1493.         text-align: center;
  1494.     }
  1495.     .section-head {
  1496.         position: relative;
  1497.     }
  1498.     .site-text-primary, .wt-small-separator {
  1499.         color: #ea130e;
  1500.     }
  1501.     .wt-small-separator {
  1502.         font-family: \"Heebo\", sans-serif;
  1503.         text-transform: uppercase;
  1504.         letter-spacing: 1px;
  1505.         padding-right: 40px;
  1506.         font-size: 26px;
  1507.         line-height: 26px;
  1508.         margin-bottom: 15px;
  1509.         position: relative;
  1510.         display: inline-block;
  1511.         font-weight: 700;
  1512.     }
  1513.     .section-head.center .wt-small-separator div.sep-leaf-left {
  1514.         position: relative;
  1515.     }
  1516.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  1517.         background-color: #ea130e;
  1518.     }
  1519.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  1520.         right: -20px;
  1521.         width: 10px;
  1522.     }
  1523.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  1524.         position: absolute;
  1525.         content: '';
  1526.         height: 22px;
  1527.         bottom: 0px;
  1528.         top: 0px;
  1529.         transform: skew(-20deg);
  1530.     }
  1531.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  1532.         right: -27px;
  1533.         width: 4px;
  1534.     }
  1535.     .section-head.center.wt-small-separator-outer h2 {
  1536.         max-width: 630px;
  1537.         margin: 0px auto;
  1538.     }
  1540. </style>
  1542. <main>
  1543.   <!-- ======= Hero =======-->
  1544.   <div class=\"content\" style=\"\">
  1545.       <div class=\"wrap\">
  1546.         <div class=\"container\">
  1547.           <ol class=\"breadcrumb\">
  1548.             <li href=\"#\">
  1549.               <a>Home</a>
  1550.             </li>
  1551.             <li href=\"#\">
  1552.               <a>Départements</a>
  1553.             </li>
  1554.             <li href=\"#\">
  1555.               <a>Département</a>
  1556.             </li>
  1557.           </ol>
  1558.         </div>
  1559.       </div>
  1560.     </div>
  1561.   <section class=\"hero__v6 section\" id=\"home\" style=\"margin-top: -60px;\">
  1562.     <div class=\"container\">
  1563.       <div class=\"row\">
  1564.         <div class=\"col-lg-6 mb-4 mb-lg-0\">
  1565.           <div class=\"row\">
  1566.             <div class=\"col-lg-11\">
  1567.               <span class=\"hero-subtitle text-uppercase\" data-aos-delay=\"0\">Solutions Syscofie Innovantes</span>
  1568.               <h1 class=\"hero-title mb-3\">{{ depart.name }}</h1>
  1569.               <p class=\"hero-description\">{{ depart.description }}</p>
  1570.               <h1 class=\"hero-title mb-1\">Objectifs</h1>
  1571.               <ul class=\"list-check\">
  1572.                 {% for object in depart.objectifs|slice(0,4) %}
  1573.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">{{ object[\"nombase\"] }}</span></li>
  1574.                 {% else %}
  1575.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Assurer une réactivité dans les services proposés</span></li>
  1576.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Garantir la conformité avec les obligations fiscales</span></li>
  1577.                   <li><i class=\"bi bi-check-circle icon\"></i><span class=\"text\">Faciliter une meilleure prise de décision pour les clients</span></li>
  1578.                 {% endfor %}
  1580.               </ul>
  1581.             </div>
  1582.           </div>
  1583.         </div>
  1584.         <div class=\"col-lg-6\">
  1585.           <div class=\"hero-img\" style=\"height: 100%;\">
  1586.             <img class=\"img-departement img-fluid rounded-4\" src=\"{{ vich_uploader_asset(depart) }}\" alt=\"Hero Image\" style=\"height: 570px; width:100%;\">
  1587.           </div>
  1588.         </div>
  1589.       </div>
  1590.     </div>
  1591.   </section>
  1592.     <!-- End Hero-->
  1593.     
  1594.   <!-- ======= How it works =======-->
  1595.   <section class=\"section howitworks__v1\" id=\"how-it-works\">
  1596.     <div class=\"container\">
  1597.       {# 
  1598.         <div class=\"row\">
  1599.           <div class=\"col-md-6 text-center mx-auto\"><span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Equipes</span>
  1600.             <h2 data-aos=\"fade-up\" data-aos-delay=\"100\">Membres de Collaborations</h2>
  1601.             <p data-aos=\"fade-up\" data-aos-delay=\"200\">Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p>
  1602.           </div>
  1603.         </div> 
  1604.       #}
  1606.       <div class=\"section-head center wt-small-separator-outer\">
  1607.         <div class=\"wt-small-separator site-text-primary\">
  1608.           <div class=\"sep-leaf-left\"></div>
  1609.           <div>Equipes</div>
  1610.         </div>
  1611.         <h1 class=\"wt-title\">Notre Equipe de Collaborations</h1>
  1612.         {# <h2 class=\"mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">Notre Equipe de Collaborations</h2> #}
  1613.         <p>Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p>
  1614.       </div>
  1616.     </div>
  1617.     
  1618.   </section>
  1619.     <!-- End How it works-->
  1620.     
  1621.     <!-- ======= Stats =======-->
  1622.   <section class=\"stats__v3 section\" style=\"background-color: #268dcf; margin-top: -40px;\">
  1623.     <div class=\"container\">
  1624.       <div class=\"row\">
  1625.         <div class=\"col-lg-12\">
  1626.           <div class=\"d-flex flex-wrap content rounded-4\">
  1627.             <div class=\"rounded-borders\">
  1628.               <div class=\"rounded-border-1\"></div>
  1629.               <div class=\"rounded-border-2\"></div>
  1630.               <div class=\"rounded-border-3\"></div>
  1631.             </div>
  1632.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\">
  1633.               <div class=\"stat-item\">
  1634.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  1635.                 <p class=\"mb-0\">Responsable du Département</p>
  1636.               </div>
  1637.             </div>
  1638.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\">
  1639.               <div class=\"stat-item\">
  1640.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  1641.                 <p class=\"mb-0\">Assistant comptable</p>
  1642.               </div>
  1643.             </div>
  1644.             <div class=\"col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center\" >
  1645.               <div class=\"stat-item\">
  1646.                 <span class=\"fw-bold\"><i class=\"bi bi-person-fill\"></i></span>
  1647.                 <p class=\"mb-0\">Contrôleur Qualité Comptable</p>
  1648.               </div>
  1649.             </div>
  1650.           </div>
  1651.         </div>
  1652.       </div>
  1653.       <div class=\"text-center bd-highlight mb-3\">
  1654.   \t\t  <button type=\"button\" class=\"framed-buttons btn-3 text-center\">Je souhaite échanger avec un expert</button>
  1655.   \t  </div>
  1656.     </div>
  1657.   </section>
  1658.     <!-- End Stats-->
  1659.     
  1660.     <!-- ======= Start Services =======-->
  1661.   <section class=\"section services__v3\" id=\"services\" style=\"margin-bottom: 40px;\">
  1662.     <div class=\"container\">
  1663.       {# <div class=\"row mt-5\">
  1664.         <div class=\"col-md-8 mx-auto text-center\">
  1665.           <span class=\"subtitle text-uppercase mb-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">Nos Services</span>
  1666.           <h2 class=\"mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h2>
  1667.         </div>
  1668.       </div> #}
  1669.       <div class=\"section-head center wt-small-separator-outer mt-5\">
  1670.         <div class=\"wt-small-separator site-text-primary\">
  1671.           <div class=\"sep-leaf-left\"></div>
  1672.           <div>Nos Services</div>
  1673.         </div>
  1674.         <h1 class=\"wt-title\">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h1>
  1675.         {# <h2 class=\"mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h2> #}
  1676.         {# <p data-aos=\"fade-up\" data-aos-delay=\"200\">Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p> #}
  1677.       </div>
  1678.       <div class=\"row\" style=\"margin-top: -40px;\">
  1679.         {% for scat in depart.getSousService()|slice(0,3) %}
  1680.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1681.           <div class=\"carte\">
  1682.             <a href=\"{{ path('produit_service_service', {'id': scat.id}) }}\">
  1683.               <div class=\"img\">
  1684.                 <img src=\"{{ asset('templateSyscofie/images/rapport-fin.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1685.               </div>
  1686.               <div class=\"text-box \">
  1687.                 <h2 class=\"titre\">{{ scat.name }}</h2>
  1688.                   En savoir plus
  1689.               </div>
  1690.             </a>
  1691.           </div>
  1692.         </div>
  1693.         {% else %}
  1694.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1695.           <div class=\"carte\">
  1696.             <a href=\"\">
  1697.               <div class=\"img\">
  1698.                 <img src=\"{{ asset('templateSyscofie/images/scene-bureau-ordinateur-portable.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1699.               </div>
  1700.               <div class=\"text-box \">
  1701.                 <h1 class=\"titre\">Préparation des déclarations fiscales et sociales</h1>
  1702.                   En savoir plus
  1703.               </div>
  1704.             </a>
  1705.           </div>
  1706.         </div>
  1707.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1708.           <div class=\"carte\">
  1709.             <a href=\"\">
  1710.               <div class=\"img\">
  1711.                 <img src=\"{{ asset('templateSyscofie/images/hero-img-2-min.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1712.               </div>
  1713.               <div class=\"text-box \">
  1714.                 <h1 class=\"titre\">Collecte et classement des pièces comptables</h1>
  1715.                   En savoir plus
  1716.               </div>
  1717.             </a>
  1718.           </div>
  1719.         </div>
  1720.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1721.           <div class=\"carte\">
  1722.             <a href=\"\">
  1723.               <div class=\"img\">
  1724.                 <img src=\"{{ asset('templateSyscofie/images/tablette.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1725.               </div>
  1726.               <div class=\"text-box \">
  1727.                 <h1 class=\"titre\">Suivi des comptes tiers</h1>
  1728.                 En savoir plus
  1729.               </div>
  1730.             </a>
  1731.           </div>
  1732.         </div>
  1733.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1734.           <div class=\"carte\">
  1735.             <a href=\"\">
  1736.               <div class=\"img\">
  1737.                 <img src=\"{{ asset('templateSyscofie/images/hero-bg-1-min.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1738.               </div>
  1739.               <div class=\"text-box \">
  1740.                 <h1 class=\"titre\">Revision periodique des comptes et ajustements</h1>
  1741.                   En savoir plus
  1742.               </div>
  1743.             </a>
  1744.           </div>
  1745.         </div>
  1746.         <div class=\"col-lg-4 col-md-6 col-sm-12\">
  1747.           <div class=\"carte\">
  1748.             <a href=\"\">
  1749.               <div class=\"img\">
  1750.                 <img src=\"{{ asset('templateSyscofie/images/presentation.jpg') }}\" alt=\"Nataliya Vaitkevich\">
  1751.               </div>
  1752.               <div class=\"text-box \">
  1753.                 <h1 class=\"titre\">Communication régulière avec les clients pour les alertes et reporting</h1>
  1754.                 {# <p class=\"description\">
  1755.                   Delicate petals unfurl, carrying secrets on the gentle
  1756.                   breeze. Discover the ephemeral beauty of the fleeting
  1757.                   moment.
  1758.                 </p> #}
  1759.                 En savoir plus
  1760.               </div>
  1761.             </a>
  1762.           </div>
  1763.         </div>
  1764.         {% endfor %}
  1765.       </div>
  1766.     </div>
  1767.   </section>
  1768. </main>
  1769. <a href=\"tel: 8 888 888 88 88\" rel=\"nofollow\" class=\"btn-call\">
  1770. \t<div class=\"btn-call__ico\">
  1771. \t\t<i class=\"bi bi-telephone-fill\"></i>
  1772. \t</div>
  1773. </a>
  1777. <div class=\"text-center\" style=\"margin-top: 10px; margin-bottom: 60px;\">
  1778. \t{# {% if nombrepage > 0 %}
  1780. \t\t{% if page > 1 and page <= nombrepage %}
  1781. \t\t\t{% set pagepre = page - 1 %}
  1782. \t\t{% else %}
  1783. \t\t\t{% set pagepre = nombrepage %}
  1784. \t\t{% endif %}
  1786. \t\t{% if page < nombrepage %}
  1787. \t\t\t{% set pagesuiv = page + 1 %}
  1788. \t\t{% else %}
  1789. \t\t\t{% set pagesuiv =  1 %}
  1790. \t\t{% endif %}
  1792. \t\t{% if nombrepage < 5 %}
  1793. \t\t\t{% set debut = 1 %}
  1794. \t\t\t{% set fin = nombrepage %}
  1795. \t\t{% else %}
  1796. \t\t\t{% if page > 2 and page < (nombrepage - 2) %}
  1797. \t\t\t\t{% set debut = page - 2 %}
  1798. \t\t\t\t{% if page + 2 >= nombrepage %}
  1799. \t\t\t\t\t{% set fin = nombrepage %}
  1800. \t\t\t\t{% else %}
  1801. \t\t\t\t\t{% set fin = page + 2 %}
  1802. \t\t\t\t{% endif %}
  1803. \t\t\t{% else %}
  1804. \t\t\t\t{% if page <= 2 %}
  1805. \t\t\t\t\t{% if page == 1 %}
  1806. \t\t\t\t\t\t{% set debut = 1 %}
  1807. \t\t\t\t\t\t{% set fin = page + 3 %}
  1808. \t\t\t\t\t{% else %}
  1809. \t\t\t\t\t\t{% set debut = 1 %}
  1810. \t\t\t\t\t\t{% set fin = page + 2 %}
  1811. \t\t\t\t\t{% endif %}
  1812. \t\t\t\t{% else %}
  1813. \t\t\t\t\t{% set debut = page - 2 %}
  1814. \t\t\t\t\t{% if page + 2 >= nombrepage %}
  1815. \t\t\t\t\t\t{% set fin = nombrepage %}
  1816. \t\t\t\t\t{% else %}
  1817. \t\t\t\t\t\t{% set fin = page + 2 %}
  1818. \t\t\t\t\t{% endif %}
  1819. \t\t\t\t{% endif %}
  1820. \t\t\t{% endif %}
  1822. \t\t{% endif %} #}
  1824. \t\t{# <div class=\"btn-group mb-4 text-center\" role=\"group\" aria-label=\"Basic example\">
  1825. \t\t\t<a href=\"#\" title=\"Première page\" class=\"btn btn-outline-primary mx-2\">
  1826. \t\t\t\t<span><i class=\"bi bi-chevron-double-left\"></i></span>
  1827. \t\t\t</a>
  1828. \t\t\t<a href=\"#\" title=\"Page précedente\" class=\"btn btn-outline-primary mx-2\">
  1829. \t\t\t\t<span><i class=\"bi bi-chevron-left\"></i></span>
  1830. \t\t\t</a> #}
  1831. \t\t\t{# {% for p in debut..fin %}
  1832. \t\t\t\t<a href=\"#\" value=\"{{ p }}\" class=\"btn btn-outline-primary mx-2 {% if p == page %}active{% endif %}\">{{ p }}</a>
  1833. \t\t\t</li> #}
  1834. \t\t{# {% endfor %} #}
  1835. \t\t{# <a href=\"#\" title=\"Page suivante\" class=\"btn btn-outline-primary mx-2\">
  1836. \t\t\t<span><i class=\"bi bi-chevron-right\"></i></span>
  1837. \t\t</a>
  1838. \t\t<a href=\"#\" title=\"Dernière page\" class=\"btn btn-outline-primary mx-2\">
  1839. \t\t\t<span><i class=\"bi bi-chevron-double-right\"></i></spam>
  1840. \t\t</a>
  1841. \t</div>
  1842. \t<div class=\"clearfix\"></div> #}
  1843. {# {% else %} #}
  1844. \t<div class=\"btn-group text-center\" role=\"group\" aria-label=\"Basic example\">
  1845. \t\t<a href=\"#\" title=\"Première page\" class=\"btn btn-outline-primary mx-2\">
  1846. \t\t\t<span><i class=\"bi bi-chevron-double-left\"></i></span>
  1847. \t\t</a>
  1848. \t\t<a href=\"#\" title=\"Page précedente\" class=\"btn btn-outline-primary mx-2\">
  1849. \t\t\t<span><i class=\"bi bi-chevron-left\"></i></span>
  1850. \t\t</a>
  1852. \t\t<a href=\"#\" class=\"btn btn-outline-primary mx-2 active\" style=\"margin: 0px 0px;\">1</a>
  1854. \t\t<a href=\"#\" title=\"Page suivante\" class=\"btn btn-outline-primary mx-2\">
  1855. \t\t\t<span><i class=\"bi bi-chevron-right\"></i></span>
  1856. \t\t</a>
  1857. \t\t<a href=\"#\" title=\"Dernière page\" class=\"btn btn-outline-primary mx-2\">
  1858. \t\t\t<span><i class=\"bi bi-chevron-double-right\"></i></spam>
  1859. \t\t</a>
  1860. \t</div>
  1862. \t<script>
  1863. \tvar swiperFade = new Swiper(\".swiperFade\", {
  1864. \tloop: true,
  1865. \teffect: 'fade',
  1866. \tnavigation: {
  1867. \t  nextEl: \".swiper-button-next\",
  1868. \t  prevEl: \".swiper-button-prev\"
  1869. \t},
  1870. \tpagination: {
  1871. \t  el: \".swiper-pagination\",
  1872. \t},
  1873. \t});
  1875. \tvar swiperVertical = new Swiper(\".swiperVertical\", {
  1876. \t  loop: true,
  1877. \t  effect: 'fade',
  1878. \t  direction: \"vertical\",
  1879. \t  pagination: {
  1880. \t    el: \".swiper-pagination\",
  1881. \t    clickable: true,
  1882. \t  }
  1883. \t});
  1885. \tvar swiperEffect = new Swiper(\".swiperEffect\", {
  1886. \t  loop: true,
  1887. \t  effect: \"cards\",
  1888. \t  grabCursor: true,
  1889. \t  navigation: {
  1890. \t    nextEl: \".swiper-button-next\",
  1891. \t    prevEl: \".swiper-button-prev\"
  1892. \t  },
  1893. \t  pagination: {
  1894. \t    el: \".swiper-pagination\",
  1895. \t  },
  1896. \t});
  1897. </script>
  1898. </div>
  1899. {% endblock %}
  1901. {% block javascripttemplate %}
  1903. {% endblock %}", "Theme/Produit/Service/Service/departement.html.twig", "/home/syscofie/public_html/syscofie/templates/Theme/Produit/Service/Service/departement.html.twig");
  1904.     }
  1905. }