var/cache/dev/twig/6f/6fadf116a2b95524ef48b67fa9360239af6592f1d5604d4f4de6d05377107662.php line 51

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* Theme/Produit/Produit/Produit/programmefinnacement.html.twig */
  16. class __TwigTemplate_9459f6a4ca76ecb2984da80fa0d39259e82f3917c09622adc557c75da4f61965 extends Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'meta' => [$this, 'block_meta'],
  29.             'title' => [$this, 'block_title'],
  30.             'userblog_body' => [$this, 'block_userblog_body'],
  31.             'javascripttemplate' => [$this, 'block_javascripttemplate'],
  32.         ];
  33.     }
  35.     protected function doGetParent(array $context)
  36.     {
  37.         // line 1
  38.         return "Theme/Users/User/layoutoffert.html.twig";
  39.     }
  41.     protected function doDisplay(array $context, array $blocks = [])
  42.     {
  43.         $macros = $this->macros;
  44.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  45.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Produit/Produit/programmefinnacement.html.twig"));
  47.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  48.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Produit/Produit/programmefinnacement.html.twig"));
  50.         $this->parent = $this->loadTemplate("Theme/Users/User/layoutoffert.html.twig", "Theme/Produit/Produit/Produit/programmefinnacement.html.twig", 1);
  51.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  52.         
  53.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  55.         
  56.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  58.     }
  60.     // line 2
  61.     public function block_meta($context, array $blocks = [])
  62.     {
  63.         $macros = $this->macros;
  64.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  65.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  67.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  68.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  70.         // line 3
  71.         echo "\t";
  72.         $this->displayParentBlock("meta", $context, $blocks);
  73.         echo "
  74. \t<meta name=\"keywords\" content=\"";
  75.         // line 4
  76.         echo twig_escape_filter($this->env, (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);
  77.         echo ", ";
  78.         echo twig_escape_filter($this->env, (isset($context["keywords"]) || array_key_exists("keywords", $context) ? $context["keywords"] : (function () { throw new RuntimeError('Variable "keywords" does not exist.', 4, $this->source); })()), "html", null, true);
  79.         echo "\"/>
  80. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  81. \t<meta name=\"description\" content=\"";
  82.         // line 6
  83.         echo twig_escape_filter($this->env, (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);
  84.         echo " - ";
  85.         echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["souscategorie"]) || array_key_exists("souscategorie", $context) ? $context["souscategorie"] : (function () { throw new RuntimeError('Variable "souscategorie" does not exist.', 6, $this->source); })()), "nom", [], "any", false, false, false, 6), "html", null, true);
  86.         echo "\"/>
  87. ";
  88.         
  89.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  91.         
  92.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  94.     }
  96.     // line 9
  97.     public function block_title($context, array $blocks = [])
  98.     {
  99.         $macros = $this->macros;
  100.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  101.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  103.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  104.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  106.         // line 10
  107.         echo "\t";
  108.         $this->displayParentBlock("title", $context, $blocks);
  109.         echo " - ";
  110.         echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["souscategorie"]) || array_key_exists("souscategorie", $context) ? $context["souscategorie"] : (function () { throw new RuntimeError('Variable "souscategorie" does not exist.', 10, $this->source); })()), "nom", [], "any", false, false, false, 10), "html", null, true);
  111.         echo "
  112. ";
  113.         
  114.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  116.         
  117.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  119.     }
  121.     // line 13
  122.     public function block_userblog_body($context, array $blocks = [])
  123.     {
  124.         $macros = $this->macros;
  125.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  126.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  128.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  129.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  131.         // line 14
  132.         echo "
  133. <style>
  134. \t.mzp-c-details .is-summary button:before, details .is-summary button:before, summary:before{
  135. \t\tdisplay: none!important;
  136. \t}
  137. </style>
  138. <div style=\"background: #90acd1; min-height: 200px;\">
  139. <div class=\"container\" style=\"overflow: hidden;\">
  140. \t<div class=\"row\" style=\"margin-top: 15px;\">
  141. \t<div class=\"col-md-8\">
  142. \t";
  143.         // line 24
  144.         if ($this->extensions['App\Service\Servicetext\TwigExtensions']->is_mobile()) {
  145.             // line 25
  146.             echo "\t<ol class=\"c-navigation-breadcrumbs__directory\">
  147. \t\t<!-- Duplicating the \"Home\" link in both the global navigation and the breadcrumb trail is not recommended. -->
  148. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  149. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  150. \t\t\t<span class=\"u-visually-hidden\" property=\"name\"><span class=\"fa fa-home\"> </span> Accueil</span>
  151. \t\t  </a>
  152. \t\t  <meta property=\"position\" content=\"1\">
  153. \t\t</li>
  155. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  156. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  157. \t\t\t<span property=\"name\"> L'entreprise</span>
  158. \t\t  </a>
  159. \t\t  <meta property=\"position\" content=\"2\">
  160. \t\t</li>
  162. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  163. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"#!\" property=\"item\" aria-current=\"location\">
  164. \t\t\t<span property=\"name\">À propos de  nous </span>
  165. \t\t  </a>
  166. \t\t  <meta property=\"position\" content=\"3\">
  167. \t\t</li>
  168. \t</ol>
  169. \t";
  170.         } else {
  171.             // line 49
  172.             echo "\t<div style=\"padding: 20px 0px;\">
  173. \t\t<ul class=\"breadcrumbs\">
  174. \t\t  <li><a href=\"";
  175.             // line 51
  176.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("users_user_acces_plateforme");
  177.             echo "\"><span class=\"fa fa-home\"></span> Accueil</a></li>
  178. \t\t  <li><a > L'entreprise</a></li>
  179. \t\t  <li>À propos de nous</li>
  180. \t\t</ul>
  181. \t</div>
  182. \t";
  183.         }
  184.         // line 57
  185.         echo "\t
  186. \t<div>
  187. \t\t<h2 style=\"color: #fff;\">";
  188.         // line 59
  189.         echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["souscategorie"]) || array_key_exists("souscategorie", $context) ? $context["souscategorie"] : (function () { throw new RuntimeError('Variable "souscategorie" does not exist.', 59, $this->source); })()), "nom", [], "any", false, false, false, 59), "html", null, true);
  190.         echo "</h2>
  191. \t\t<div style=\"color: #fff;\">";
  192.         // line 60
  193.         echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["souscategorie"]) || array_key_exists("souscategorie", $context) ? $context["souscategorie"] : (function () { throw new RuntimeError('Variable "souscategorie" does not exist.', 60, $this->source); })()), "description", [], "any", false, false, false, 60), "html", null, true);
  194.         echo "</div>
  195.     </div>
  196.   </div>
  197.   
  198. \t<!-- div class=\"col-md-4\">
  199. \t\t<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\" class=\"my-svg\">
  200. \t\t  <defs>
  201. \t\t\t<filter id=\"goo\">
  202. \t\t\t  <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" />
  203. \t\t\t  <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7\" result=\"goo\" />
  204. \t\t\t  <feBlend in=\"SourceGraphic\" in2=\"goo\" />
  205. \t\t\t</filter>
  206. \t\t  </defs>
  207. \t\t</svg>
  208. \t\t<div class=\"demo\">
  209. \t\t  <div class=\"demo__buttons\">
  210. \t\t\t<div class=\"demo__social-btn-4 demo__social-btn\"><i class=\"fa fa-snapchat\"></i></div>
  211. \t\t\t<div class=\"demo__social-btn-3 demo__social-btn\"><i class=\"fa fa-instagram\"></i></div>
  212. \t\t\t<div class=\"demo__social-btn-2 demo__social-btn\"><i class=\"fa fa-facebook\"></i></div>
  213. \t\t\t<div class=\"demo__social-btn-1 demo__social-btn\"><i class=\"fa fa-twitter\"></i></div>
  214. \t\t\t<div class=\"demo__open-btn\"><i class=\"fa fa-share-alt\"></i></div>
  215. \t\t  </div>
  216. \t\t  <h2 class=\"text-center\" style=\"color: #fff;\">Share and win</h2>
  217. \t\t</div>
  218. \t</div -->
  219.   
  220.   </div>
  222.   
  223. </div>
  224. </div>
  226. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); background: #f2f2f2;\">
  227. \t<div class=\"container\" style=\"height: 100px;\">
  228. \t  
  229. \t</div>
  230. </div>
  232. <style>
  233. \t.brand-wrap {
  234. \t  position: relative;
  235. \t  z-index: 2;
  236. \t}
  237. \t
  238. \t@media (max-width: 991px) {
  239. \t\t.brand-wrap {
  240. \t\t  padding: 20px 0;
  241. \t\t} 
  242. \t}
  243. \t
  244. \t.brand-wrap .owl-carousel .owl-item img {
  245. \t\twidth: auto !important; 
  246. \t}
  247. \t
  248. \t.brand-wrap .single-brand {
  249. \t\ttext-align: center;
  250. \t\t-webkit-filter: grayscale(100%);
  251. \t\t-moz-filter: grayscale(100%);
  252. \t\t-ms-filter: grayscale(100%);
  253. \t\t-o-filter: grayscale(100%);
  254. \t\tfilter: grayscale(100%);
  255. \t\topacity: .5;
  256. \t\t-webkit-transition: all 0.3s ease 0s;
  257. \t\t-moz-transition: all 0.3s ease 0s;
  258. \t\t-o-transition: all 0.3s ease 0s;
  259. \t\ttransition: all 0.3s ease 0s; 
  260. \t}
  261. \t
  262. \t.brand-wrap .single-brand:hover{
  263. \t  -webkit-filter: grayscale(0%);
  264. \t  -moz-filter: grayscale(0%);
  265. \t  -ms-filter: grayscale(0%);
  266. \t  -o-filter: grayscale(0%);
  267. \t  filter: grayscale(0%);
  268. \t  opacity: 1; 
  269. \t }
  270. </style>
  272. <div style=\"background: transparent; margin-bottom: -140px;\">
  273. <div class=\"container\" style=\"background: transparent;\">
  275.   <div class=\"row\" style=\"margin-top: 25px; background: transparent;\">
  276. \t<div class=\"col-md-12\">
  277. \t<div style=\"overflow: hidden; position: relative; top: -140px!important;  padding: 15px 7px; border-radius: 7px; border-top: 2px solid #ddd; border-radius: 15px; background: #fff;\">
  279. \t\t<h2>Services</h2>
  280. \t\t<div class=\"boxC12\">
  281. \t\t\t
  282. \t\t\t<details>
  283. \t\t\t\t<summary>
  284. \t\t\t\t<p> service.nom </p><span class=\"plusminus\"></span>
  285. \t\t\t\t</summary>
  286. \t\t\t\t<p>
  287. \t\t\t\t\t\tservice.description|raw
  288. \t\t\t\t
  289. \t\t\t\t\t
  290. \t\t\t\t\t<div class=\"box\">
  291. \t\t\t\t\t\t<div class=\"title-bold\">
  292. \t\t\t\t\t\t\t<span> scat.nom </span>
  293. \t\t\t\t\t\t</div>
  294. \t\t\t\t\t\t<div class=\"inner-profile\">
  295. \t\t\t\t\t\t\t\tscat.description|raw 
  296. \t\t\t\t\t\t</div>
  297. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  298. \t\t\t\t\t</div>
  300. \t\t\t\t</p>
  301. \t\t\t</details>
  303. \t\t</div>
  305. \t</div>
  306. \t</div>
  307.   </div>
  308.   
  309. </div>
  310. </div>
  312. <div class=\"mzp-l-content\" style=\"margin-top: -50px;\">
  313. \t<div class=\"container\">
  314. \t\t<div class=\"row\">
  315. \t\t  <div class=\"col-xl-3 col-lg-6\">
  316. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  317. \t\t\t  <div class=\"card-body\">
  318. \t\t\t\t<div class=\"row\">
  319. \t\t\t\t  <div class=\"col\">
  320. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Opérations</h5>
  321. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">350,897</span>
  322. \t\t\t\t  </div>
  323. \t\t\t\t  <div class=\"col-auto\">
  324. \t\t\t\t\t<div class=\"icon icon-shape bg-danger text-white rounded-circle shadow\">
  325. \t\t\t\t\t  <i class=\"fa fa-chart-bar\"></i>
  326. \t\t\t\t\t</div>
  327. \t\t\t\t  </div>
  328. \t\t\t\t</div>
  329. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  330. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 3.48%</span>
  331. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  332. \t\t\t\t</p>
  333. \t\t\t  </div>
  334. \t\t\t</div>
  335. \t\t  </div>
  336. \t\t  <div class=\"col-xl-3 col-lg-6\">
  337. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  338. \t\t\t  <div class=\"card-body\">
  339. \t\t\t\t<div class=\"row\">
  340. \t\t\t\t  <div class=\"col\">
  341. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Intervenants</h5>
  342. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">2,356</span>
  343. \t\t\t\t  </div>
  344. \t\t\t\t  <div class=\"col-auto\">
  345. \t\t\t\t\t<div class=\"icon icon-shape bg-warning text-white rounded-circle shadow\">
  346. \t\t\t\t\t  <i class=\"fa fa-chart-pie\"></i>
  347. \t\t\t\t\t</div>
  348. \t\t\t\t  </div>
  349. \t\t\t\t</div>
  350. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  351. \t\t\t\t  <span class=\"text-danger mr-2\"><i class=\"fa fa-arrow-down\"></i> 3.48%</span>
  352. \t\t\t\t  <span class=\"text-nowrap\">Since last week</span>
  353. \t\t\t\t</p>
  354. \t\t\t  </div>
  355. \t\t\t</div>
  356. \t\t  </div>
  357. \t\t  <div class=\"col-xl-3 col-lg-6\">
  358. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  359. \t\t\t  <div class=\"card-body\">
  360. \t\t\t\t<div class=\"row\">
  361. \t\t\t\t  <div class=\"col\">
  362. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Rapports</h5>
  363. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">924</span>
  364. \t\t\t\t  </div>
  365. \t\t\t\t  <div class=\"col-auto\">
  366. \t\t\t\t\t<div class=\"icon icon-shape bg-yellow text-white rounded-circle shadow\">
  367. \t\t\t\t\t  <i class=\"fa fa-users\"></i>
  368. \t\t\t\t\t</div>
  369. \t\t\t\t  </div>
  370. \t\t\t\t</div>
  371. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  372. \t\t\t\t  <span class=\"text-warning mr-2\"><i class=\"fa fa-arrow-down\"></i> 1.10%</span>
  373. \t\t\t\t  <span class=\"text-nowrap\">Since yesterday</span>
  374. \t\t\t\t</p>
  375. \t\t\t  </div>
  376. \t\t\t</div>
  377. \t\t  </div>
  378. \t\t  <div class=\"col-xl-3 col-lg-6\">
  379. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  380. \t\t\t  <div class=\"card-body\">
  381. \t\t\t\t<div class=\"row\">
  382. \t\t\t\t  <div class=\"col\">
  383. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Crédibilité</h5>
  384. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">49,65%</span>
  385. \t\t\t\t  </div>
  386. \t\t\t\t  <div class=\"col-auto\">
  387. \t\t\t\t\t<div class=\"icon icon-shape bg-info text-white rounded-circle shadow\">
  388. \t\t\t\t\t  <i class=\"fa fa-percent\"></i>
  389. \t\t\t\t\t</div>
  390. \t\t\t\t  </div>
  391. \t\t\t\t</div>
  392. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  393. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 12%</span>
  394. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  395. \t\t\t\t</p>
  396. \t\t\t  </div>
  397. \t\t\t</div>
  398. \t\t  </div>
  399. \t\t</div>
  400. \t  </div>
  401. </div>
  403. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); margin-bottom: 30px;\">
  404. <div class=\"container\" style=\"padding-top: 25px; padding-bottom: 25px;\">
  405.    
  406. \t<section style=\"margin-top: -20px;\">
  407. \t\t<div style=\"width: 100%; margin: 0px auto;\">
  408. \t\t<link href=\"";
  409.         // line 274
  410.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/tyfy.css"), "html", null, true);
  411.         echo "\" rel=\"stylesheet\"/>
  412. \t\t<style>
  413. \t\t  div.demotabs {
  414. \t\t\tborder: 2px dashed #e6e6e6;
  415. \t\t\tborder-radius: .8125rem;
  416. \t\t\tbox-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  417. \t\t\tmargin-top: 1.625rem;
  418. \t\t\tpadding: 15px;
  419. \t\t\tbackground: #fff;
  420. \t\t  }
  421. \t\t  .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  422. \t\t</style>
  423. \t\t
  424. \t\t
  425. \t\t<div class=\"demotabs\">
  426. \t\t\t<div class=\"mzp-l-content\">
  427. \t\t  <div class=\"links-underlined\">
  428. \t\t\t  <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  429. \t\t\t  <p>  This is my implementation of responsive tabs. It is being incorporated into my <a href=\"https://github.com/aaronpinero/typography\">Tyfy framework</a>.</p>
  430. \t\t  </div>
  431. \t\t  <div class=\"tabs-container\">
  432. \t\t\t  <h2 class=\"tab-label\">Présentation</h2>
  433. \t\t\t  <p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>
  434. \t\t\t  <p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>
  435. \t\t\t  
  436. \t\t\t  <h2 class=\"tab-label collapsed\">Eligibilité</h2>
  437. \t\t\t  <p>Facilis error corrupti dolor eaque. 
  438. \t\t\t  <a id=\"anchor\">Occaecati</a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>
  439. \t\t\t  <p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>
  440. \t\t\t  
  441. \t\t\t  <h2 class=\"tab-label collapsed\">Rapport</h2>
  442. \t\t\t  <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  443. \t\t\t  
  444. \t\t\t  <h2 class=\"tab-label collapsed\">Historique</h2>
  445. \t\t\t  <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  446. \t\t\t  
  447. \t\t  </div>
  448. \t\t
  449. \t\t<h2>Notes</h2>
  450. \t\t<p>I've relied on CSS Flexbox for the visual tabs. Flexbox is <a href=\"https://caniuse.com/#search=flex\">a problem for just about any version of Internet <strike>Exploder</strike> Explorer</a>. At some point, I'll need to figure out an alternative way to present the tabs that will work for IE.</p>
  451. \t  </div>
  452. \t  </div>
  453. \t\t
  454. \t  <script>
  455. \t\t  \$(document).ready(function(){
  456. \t
  457. \t\t\tGoToAnchor = function(){
  458. \t\t\t  // find the anchor and any tab it might be in
  459. \t\t\t  selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  460. \t\t\t\t  selected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  461. \t\t\t  parent_tab = selected_anchor.parents('.tab-panel');
  462. \t\t\t  // account for an anchor in a label
  463. \t\t\t  parent_label = selected_anchor.parents('.tab-label');
  464. \t\t\t  if (parent_label.length) {
  465. \t\t\t\tparent_tab = parent_label.next('.tab-panel');
  466. \t\t\t  }
  467. \t\t\t  // do the steps of this function only if we have an anchor link and a tab panel
  468. \t\t\t  if (selected_anchor.length && parent_tab.length) {
  469. \t\t\t\tparent_tab_label = parent_tab.prev('.tab-label');
  470. \t\t\t\t\tparent_tab_index = parent_tab_label.attr('data-tabindex');
  471. \t\t\t\tparent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  472. \t\t\t\tif (parent_tab.hasClass('collapsed')) {
  473. \t\t\t\t  parent_tab.removeClass('collapsed');
  474. \t\t\t\t  parent_tab_label.removeClass('collapsed');
  475. \t\t\t\t}
  476. \t\t\t\t// scroll to the anchor
  477. \t\t\t\tvar s = selected_anchor.offset().top - 50; // console.log(s);
  478. \t\t\t\t\$('body,html').animate({'scrollTop':s},500,'swing');
  479. \t\t\t\t  }
  480. \t\t\t};
  481. \t\t\t
  482. \t\t\t// prepare HTML structure for each tab container
  483. \t\t\t\$('.tabs-container').each(function(){
  484. \t\t\t  if (!\$(this).hasClass('tabs-processed')) {
  485. \t\t\t\t// find the headings that are tab labels
  486. \t\t\t\tmy_tablabels = \$(this).find('.tab-label');
  487. \t\t\t\t// create tabs
  488. \t\t\t\tif (\$(this).find('ul.tabs').length === 0) {
  489. \t\t\t\t  \$(this).prepend('<ul class=\"tabs\"></ul>');
  490. \t\t\t\t  var x;
  491. \t\t\t\t  for (x=0;x<my_tablabels.length;x++) {
  492. \t\t\t\t\t\$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  493. \t\t\t\t  }
  494. \t\t\t\t}
  495. \t\t\t\t// structure all labels and wrap all tab panels
  496. \t\t\t\tif (\$(this).find('.tab-panel').length === 0) {
  497. \t\t\t\t  my_tablabels.each(function(i){
  498. \t\t\t\t\t\$(this).attr('data-tabindex',i);
  499. \t\t\t\t\t\$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  500. \t\t\t\t\tkids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  501. \t\t\t\t\t// default state class for when tabs are collapsable sections
  502. \t\t\t\t\t\$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  503. \t\t\t\t  });    
  504. \t\t\t\t}
  505. \t\t\t\t// open initial tab
  506. \t\t\t\t\$(this).find('ul.tabs li').eq(0).addClass('open');
  507. \t\t\t\tmy_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  508. \t\t\t\t// tab click events
  509. \t\t\t\t\$('.tabs-container ul.tabs li').each(function(i){
  510. \t\t\t\t  \$(this).click(function(){
  511. \t\t\t\t\tif (!\$(this).hasClass('open')) {
  512. \t\t\t\t\t  \$('.tabs-container .open').removeClass('open');
  513. \t\t\t\t\t  my_tabindex = \$(this).attr('data-tabindex');
  514. \t\t\t\t\t  \$(this).addClass('open');
  515. \t\t\t\t\t  \$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  516. \t\t\t\t\t  \$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  517. \t\t\t\t\t}
  518. \t\t\t\t  });
  519. \t\t\t\t});
  520. \t\t\t\t// collapsable header click event
  521. \t\t\t\t\$('.tabs-container .tab-label').click(function(){
  522. \t\t\t\t  if (!\$(this).hasClass('transition')) {
  523. \t\t\t\t\tkids = \$(this).next('.tab-panel');
  524. \t\t\t\t\tkids.removeClass('collapsed');
  525. \t\t\t\t\tvar fullHeight = kids.outerHeight();
  526. \t\t\t\t\t\$(this).addClass('transition');
  527. \t\t\t\t\tkids.addClass('transition');
  528. \t\t\t\t\tif (\$(this).hasClass('collapsed')) {
  529. \t\t\t\t\t  kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  530. \t\t\t\t\t\theight:fullHeight+'px',
  531. \t\t\t\t\t\tpaddingBottom:'32px',
  532. \t\t\t\t\t\tpaddingTop:'16px',
  533. \t\t\t\t\t  },500,function(){
  534. \t\t\t\t\t\t\$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  535. \t\t\t\t\t  });
  536. \t\t\t\t\t}
  537. \t\t\t\t\telse {
  538. \t\t\t\t\t  kids.css('height',fullHeight+'px').animate({
  539. \t\t\t\t\t\theight:'0px',
  540. \t\t\t\t\t\tpaddingBottom:'0px',
  541. \t\t\t\t\t\tpaddingTop:'0px',
  542. \t\t\t\t\t  },500,function(){
  543. \t\t\t\t\t\t\$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  544. \t\t\t\t\t  });
  545. \t\t\t\t\t}
  546. \t\t\t\t  }
  547. \t\t\t\t}); 
  548. \t\t\t\t// indicate state of readiness
  549. \t\t\t\t\$(this).addClass('tabs-processed');
  550. \t\t\t  }  
  551. \t\t\t});
  552. \t\t\t// if there are tabs and someone has linked to an anchor inside a tab
  553. \t\t\tconsole.log(window.location.hash);
  554. \t\t\tif (window.location.hash != '') {
  555. \t\t\t  GoToAnchor();
  556. \t\t\t}
  557. \t\t\t// handle case when page is already loaded
  558. \t\t\t\$(window).on('hashchange',function(){
  559. \t\t\t  GoToAnchor();
  560. \t\t\t});
  561. \t\t  });
  562. \t\t</script>
  563. \t\t</div>
  564. \t</section>
  566. </div>
  567. </div>
  570. <style>
  573. body {
  574. /* Colors */
  575. \t--color-blue-50: #0a84ff;
  576. \t--color-blue-60: #0060df;
  577. \t--color-blue-70: #003eaa;
  578. \t--color-blue-80: #002275;
  579. \t--color-gray-10: #f9f9fa;
  580. \t--color-gray-20: #ededf0;
  581. \t--color-gray-30: #d7d7db;
  582. \t--color-gray-40: #b1b1b3;
  583. \t--color-gray-50: #737373;
  584. \t--color-gray-60: #4a4a4f;
  585. \t--color-gray-70: #38383d;
  586. \t--color-gray-80: #2a2a2e;
  587. \t--color-gray-90: #0c0c0d;
  588. \t--color-green-70: #058b00;
  589. \t--color-teal-50: #00feff;
  590. \t--color-teal-60: #00c8d7;
  591. \t--color-teal-70: #008ea4;
  593. /* Icons */
  594. \t--icon-context-menu: url(";
  595.         // line 457
  596.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/twitter.png"), "html", null, true);
  597.         echo ");
  598. \t--icon-dismiss: url(";
  599.         // line 458
  600.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/twitter.png"), "html", null, true);
  601.         echo ");
  603.   --background-color: #F9F9FA;
  604.   --border-primary-color: #B1B1B3;
  606. /* Primary Action */
  607.   --primary-action-default: var(--color-blue-60);
  608.   --primary-action-hover: var(--color-blue-70);
  609.   --primary-action-active: var(--color-blue-80);
  610.   --primary-action-text-color: #fff;
  612. /* Secondary Action */
  613.   --secondary-action-default: var(--color-gray-20);
  614.   --secondary-action-hover: var(--color-gray-30);
  615.   --secondary-action-active: var(--color-gray-40);
  616.   --secondary-action-text-color: var(--color-gray-80);
  618. /* Ghost Action */
  619. \t--ghost-action-hover: var(--color-gray-20);
  620. \t--ghost-action-active: var(--color-gray-30);
  621. \t--ghost-action-text-color: var(--color-gray-80);
  623. /* Forms */
  624. \t--label-text-color: var(--text-secondary);
  625. \t--text-field-border-color: var(--color-gray-30);
  626. \t--text-field-hover-border-color: var(--color-gray-40);
  627. \t--text-field-focus-border-color: var(--color-gray-40);
  628. \t--text-field-bg-color: #fff;
  629. /* Focus */
  630.   --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 132, 255, 0.5);
  632. /* Cards */
  633.   --rasied-card-bg-color: #FFF;
  634.   --rasied-card-border-radius: 8px;
  635.   --box-shadow-10: 0px 0px 8px 0 rgba(12, 12, 13, 0.05);
  636.   --raised-card-hover: 0 0 0 4px var(--secondary-action-default);
  637.     
  638.   /* Typography */
  639.   --base-font-size: 15px;
  640.   --small-font-size: 13px;
  641.   --base-line-height: 24px;
  642.   
  643.   /* Text Colors */
  644.   --text-primary: var(--color-gray-90);
  645.   --text-secondary: var(--color-gray-50);
  646. }
  650. .meta {
  651. \tcolor: var(--text-secondary);
  652. \tfont-size: var(--small-font-size);
  653. \tline-height: var(--base-line-height);
  654. }
  656. .small {
  657. \tfont-size: var(--small-font-size);
  658. \tline-height: 20px;
  659. }
  661. .text-muted {
  662. \tcolor: var(--text-secondary);
  663. }
  665. .sr-only {
  666. \tdisplay: none;
  667. }
  669. /* Default Link */
  670. a {
  671. \t background-color: transparent;
  672. \t color: var(--color-blue-60);
  673. \t text-decoration: none;
  674. }
  675. a:hover {
  676. \ttext-decoration: underline;
  677. }
  678. a:active {
  679. \tcolor: var(--color-blue-70);
  680. \ttext-decoration:underline;
  681. }
  682. a:focus {
  683. \tbox-shadow: ;
  684. }
  685. a:not([href]):not([tabindex]) {
  686. \tcolor: inherit;
  687. \ttext-decoration: none;
  688. }
  690. /* Buttons */
  691. .btn {
  692. \tborder: none;
  693. \tcursor: pointer;
  694. \tfont-weight: 500;
  695. \ttransition: background-color 150ms, transform 150ms;
  696. \ttransition-duration: 150ms;
  697. }
  699. .btn:active {
  700. \ttransform: scale(0.97);
  701. }
  703. .btn:focus {
  704. \tbox-shadow: var(--focus-box-shadow);
  705. }
  707. .btn.disabled {
  708. \tcursor: default;
  709. \topacity: 0.4;
  710. }
  712. /* Primary Button */
  713. .btn--primary {
  714. \tbackground-color: var(--primary-action-default);
  715. \tcolor: var(--primary-action-text-color);
  716. \tfill: var(--primary-action-text-color);
  717. \t-moz-context-properties: fill;
  718. }
  720. .btn--primary:hover {
  721. \tbackground-color: var(--primary-action-hover);
  722. }
  724. .btn--primary:active {
  725. \tbackground-color: var(--primary-action-active);
  726. }
  728. .btn--primary:disabled,
  729. .btn--primary.disabled {
  730. \tbackground-color: var(--primary-action-default);
  731. \tcolor: var(--primary-action-text-color);
  732. \tfill: var(--primary-action-text-color);
  733. \t-moz-context-properties: fill;
  734. }
  736. /* Secondary Button */
  737. .btn--secondary {
  738. \tbackground-color: var(--secondary-action-default);
  739. \tcolor: var(--secondary-action-text-color);
  740. \tfill: var(--secondary-action-text-color);
  741. \t-moz-context-properties: fill;
  742. }
  744. .btn--secondary:hover {
  745. \tbackground-color: var(--secondary-action-hover);
  746. }
  748. .btn--secondary:active {
  749. \tbackground-color: var(--secondary-action-active);
  750. }
  752. .btn--secondary:disabled,
  753. .btn--secondary.disabled {
  754. \tbackground-color: var(--secondary-action-default);
  755. \tcolor: var(--secondary-action-text-color);
  756. \tfill: var(--secondary-action-text-color);
  757. \t-moz-context-properties: fill;
  758. }
  760. /* Pill Button */
  761. .btn--pill {
  762. \tborder-radius: 16px;
  763. \tline-height: 32px;
  764. \tmin-height: 32px;
  765. \tpadding: 0 16px;
  766. \tvertical-align: middle;
  767. }
  769. .btn--pill-icon-only {
  770. \tbackground-position: 50%;
  771. \tbackground-repeat: no-repeat;
  772. \tbackground-size: 16px;
  773. \twidth: 32px;
  774. }
  776. /* Form Button */
  777. .btn--form {
  778. \tborder-radius: 4px;
  779. \tmin-height: 40px;
  780. \tmin-width: 96px;
  781. \tpadding: 0 8px;
  782. }
  784. /* Ghost Button */
  785. .btn--ghost {
  786. \tbackground-color: transparent;
  787. \tcolor: var(--ghost-action-text-color);
  788. \tfill: var(--ghost-action-text-color);
  789. \t-moz-context-properties: fill;
  790. }
  792. .btn--ghost:hover {
  793. \tbackground-color: var(--ghost-action-hover);
  794. }
  796. .btn--ghost:active {
  797. \tbackground-color: var(--ghost-action-active);
  798. }
  800. .btn--ghost:disabled,
  801. .btn--ghost.disabled {
  802. \tbackground-color: transparent;
  803. \tcolor: var(--ghost-action-text-color);
  804. \tfill: var(--ghost-action-text-color);
  805. \t-moz-context-properties: fill;
  806. }
  810. .card .context-menu-btn {
  811. \topacity: 0;
  812. \tposition: absolute;
  813. \tright: -16px;
  814. \ttop: -16px;
  815. \ttransform: scale(0.25);
  816. \ttransition-duration: 150ms;
  817. \ttransition-property: transform, opacity;\t
  818. }
  820. /* Cards */
  821. .card-raised {
  822. \tbackground: var(--rasied-card-bg-color);
  823. \tborder-radius: var(--rasied-card-border-radius);
  824. \tborder: 1px inset rgba(12, 12, 13, 0.07);
  825. \tbox-shadow: var(--box-shadow-10);
  826. \ttransition: box-shadow 250ms, transform 150ms;
  827. \tposition: relative;
  828. }
  830. .card-raised:hover {
  831. \tbox-shadow: var(--box-shadow-10), var(--raised-card-hover);\t
  832. }
  835. .card-raised:hover .context-menu-btn {
  836.     opacity: 1;
  837.     transform: scale(1);
  838.     transition-delay: 200ms;
  839. }
  841. .card-raised:hover .title {
  842. \tcolor: var(--primary-action-default);
  843. \ttext-decoration: underline;
  844. \tcursor: pointer;
  845. }
  847. .card-raised:active {\t
  848. \ttransform: scale(0.97);
  849. }
  851. .card-raised:focus {
  852. \tbox-shadow: var(--box-shadow-10), 0 0 0 3px #fff, 0 0 0 6px rgba(10, 132, 255, 0.5);
  853. }
  855. /*
  856. .card-img {
  857. \tborder: 1px inset rgba(0, 0, 0, 0.15);
  858. }
  859. */
  861. .card-raised .card-img-top {
  862. \tborder-top-left-radius: var(--rasied-card-border-radius);
  863. \tborder-top-right-radius: var(--rasied-card-border-radius);
  864. }
  866. .card-body {
  867. \tpadding: 12px 16px;
  868. }
  870. .card-footer {
  871. \tpadding: 12px 16px;
  872. }
  875. /* Snippet */
  876. .snippet {
  877. \tbackground-color: #fff;
  878. \tbottom: 0;
  879. \tbox-shadow: var(--box-shadow-10);
  880. \tpadding: 24px 0;
  881. \tposition: fixed;
  882. \twidth: 100%;
  883. \tz-index: 200;
  884. }
  886. .snippet .wrapper {
  887. \tdisplay: flex;
  888. }
  890. .snippet-promo-image,
  891. .snippet-content {
  892. \tmargin-right: 24px;
  893. }
  895. .snippet-promo-image img {
  896. \twidth: 48px;
  897. }
  899. .snippet-content {
  900. \tflex-grow: 1;
  901. }
  903. .snippet-content .body {
  904. \tmax-width: 600px;\t
  905. }
  907. .snippet .btn {
  908. \theight: 32px;\t
  909. }
  911. .icon-dark-theme {
  912. \tdisplay: none;
  913. }
  915. .search-wrapper {
  916.   padding: 24px 0; }
  917.   .only-search .search-wrapper {
  918.     padding: 0 0 64px; }
  919.   .search-wrapper .logo-and-wordmark {
  920.     align-items: center;
  921.     display: flex;
  922.     justify-content: center;
  923.     margin-bottom: 49px; }
  924.     .search-wrapper .logo-and-wordmark .logo {
  925.       background: url(\"chrome://branding/content/icon128.png\") no-repeat center center;
  926.       background-size: 97px;
  927.       display: inline-block;
  928.       height: 97px;
  929.       width: 97px; }
  930.     .search-wrapper .logo-and-wordmark .wordmark {
  931.       background: url(\"../data/content/assets/firefox-wordmark.svg\") no-repeat center center;
  932.       background-size: 142px;
  933.       -moz-context-properties: fill;
  934.       display: inline-block;
  935.       fill: var(--search-wordmark-color);
  936.       height: 97px;
  937.       margin-inline-start: 15px;
  938.       width: 142px; }
  939.     @media (max-width: 609px) {
  940.       .search-wrapper .logo-and-wordmark .logo {
  941.         background-size: 64px;
  942.         height: 64px;
  943.         width: 64px; }
  944.       .search-wrapper .logo-and-wordmark .wordmark {
  945.         background-size: 100px;
  946.         height: 64px;
  947.         width: 100px; } }
  948.   
  949.   .search-wrapper .search-inner-wrapper {
  950.     cursor: default;
  951.     display: flex;
  952.     height: 48px;
  953.     margin: 0 auto;
  954.     position: relative;
  955.     width: 224px; }
  956.     @media (min-width: 610px) {
  957.       .search-wrapper .search-inner-wrapper {
  958.         width: 480px; } }
  959.     @media (min-width: 866px) {
  960.       .search-wrapper .search-inner-wrapper {
  961.         width: 736px; } }
  962.   
  963.   .search-wrapper input {
  964.     background: var(--text-field-bg-color) /* var(--search-icon) 12px center no-repeat */;
  965.     background-size: 24px;
  966.     border: solid 1px var(--text-field-border-color);
  967.     border-radius: 4px;
  968. /*     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); */
  969.     font-size: 15px;
  970.     -moz-context-properties: fill;
  971.     fill: var(--search-icon-color);
  972.     padding: 0;
  973.     padding-inline-end: 48px;
  974.     padding-inline-start: 46px;
  975.     width: 100%; }
  976.     
  977.     .search-wrapper input:dir(rtl) {
  978.       background-position-x: right 12px; }
  979.   
  980. /*
  981.   .search-wrapper:hover input {
  982.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  983. */
  984.   
  985.   .search-wrapper .search-inner-wrapper:active input,
  986.   .search-wrapper input:focus {
  987.     border: 1px solid var(--text-field-focus-border-color);
  988.     box-shadow: var(--focus-box-shadow); }
  989.   
  990.   .search-wrapper .search-button {
  991.     background: url(\"chrome://browser/skin/forward.svg\") no-repeat center center;
  992.     background-size: 16px 16px;
  993.     border: 0;
  994.     border-radius: 0 3px 3px 0;
  995.     -moz-context-properties: fill;
  996.     fill: var(--search-icon-color);
  997.     height: 100%;
  998.     inset-inline-end: 0;
  999.     position: absolute;
  1000.     width: 48px; }
  1001.     .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
  1002.       background-color: rgba(12, 12, 13, 0.1);
  1003.       cursor: pointer; }
  1004.     .search-wrapper .search-button:active {
  1005.       background-color: rgba(12, 12, 13, 0.2); }
  1006.     .search-wrapper .search-button:dir(rtl) {
  1007.       transform: scaleX(-1); }
  1009. .non-collapsible-section + .below-search-snippet-wrapper {
  1010.   margin-top: -48px; }
  1012. @media (max-height: 700px) {
  1013. /*
  1014.   .search-wrapper {
  1015.     padding: 0 0 30px; }
  1016. */
  1017.   .non-collapsible-section + .below-search-snippet-wrapper {
  1018.     margin-top: -14px; }
  1019.   .below-search-snippet-wrapper {
  1020.     min-height: 0; } }
  1022. .search-handoff-button {
  1023.   background: var(--textbox-background-color) var(--search-icon) 12px center no-repeat;
  1024.   background-size: 24px;
  1025.   border: solid 1px var(--search-border-color);
  1026.   border-radius: 3px;
  1027.   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
  1028.   cursor: text;
  1029.   font-size: 15px;
  1030.   padding: 0;
  1031.   padding-inline-end: 48px;
  1032.   padding-inline-start: 46px;
  1033.   opacity: 1;
  1034.   transition: opacity 500ms;
  1035.   width: 100%; }
  1036.   .search-handoff-button:dir(rtl) {
  1037.     background-position-x: right 12px; }
  1038.   .search-handoff-button:hover {
  1039.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  1040.   .fake-focus .search-handoff-button {
  1041.     border: 1px solid var(--textbox-focus-color);
  1042.     box-shadow: var(--textbox-focus-boxshadow); }
  1043.     .fake-focus .search-handoff-button .fake-caret {
  1044.       display: block; }
  1045.   .search-hidden .search-handoff-button {
  1046.     opacity: 0;
  1047.     visibility: hidden; }
  1048.   .search-handoff-button .fake-editable:focus {
  1049.     outline: none;
  1050.     caret-color: transparent; }
  1051.   .search-handoff-button .fake-editable {
  1052.     color: transparent;
  1053.     height: 100%;
  1054.     opacity: 0;
  1055.     position: absolute;
  1056.     top: 0;
  1057.     left: 0;
  1058.     right: 0;
  1059.     bottom: 0; }
  1060.   .search-handoff-button .fake-textbox {
  1061.     opacity: 0.54;
  1062.     text-align: start; }
  1063.   .search-handoff-button .fake-caret {
  1064.     animation: caret-animation 1.3s steps(5, start) infinite;
  1065.     background: var(--text-primary-color);
  1066.     display: none;
  1067.     inset-inline-start: 47px;
  1068.     height: 17px;
  1069.     position: absolute;
  1070.     top: 16px;
  1071.     width: 1px; }
  1073. @keyframes caret-animation {
  1074.   to {
  1075.     visibility: hidden; } }
  1077. @media (min-height: 701px) {
  1078.   body:not(.inline-onboarding) .fixed-search main {
  1079.     padding-top: 146px; }
  1080.   body:not(.inline-onboarding) .fixed-search .search-wrapper {
  1081.     background-color: var(--search-header-background-color);
  1082.     border-bottom: solid 1px var(--border-secondary-color);
  1083.     height: 95px;
  1084.     left: 0;
  1085.     padding: 30px 0;
  1086.     position: fixed;
  1087.     top: 0;
  1088.     width: 100%;
  1089.     z-index: 9; }
  1090.     body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
  1091.       height: 35px; }
  1092.     body:not(.inline-onboarding) .fixed-search .search-wrapper input {
  1093.       background-position-x: 16px;
  1094.       background-size: 16px; }
  1095.       body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
  1096.         background-position-x: right 16px; }
  1097.   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
  1098.     background-position-x: 12px;
  1099.     background-size: 24px; }
  1100.     body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
  1101.       background-position-x: right 12px; }
  1102.     body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
  1103.       top: 10px; } }
  1105. .contentSearchSuggestionTable {
  1106.   background-color: var(--search-dropdown-color);
  1107.   border: 0;
  1108.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
  1109.   transform: translateY(4px); }
  1110.   .contentSearchSuggestionTable .contentSearchHeader {
  1111.     background-color: var(--search-dropdown-header-color);
  1112.     color: var(--text-secondary-color); }
  1113.   .contentSearchSuggestionTable .contentSearchHeader,
  1114.   .contentSearchSuggestionTable .contentSearchSettingsButton {
  1115.     border-color: var(--border-secondary-color); }
  1116.   .contentSearchSuggestionTable .contentSearchSuggestionsList {
  1117.     border: 0; }
  1118.   .contentSearchSuggestionTable .contentSearchOneOffsTable {
  1119.     background-color: var(--search-dropdown-header-color);
  1120.     border-top: solid 1px var(--border-secondary-color); }
  1121.   .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
  1122.     color: var(--text-primary-color); }
  1123.   .contentSearchSuggestionTable .contentSearchSuggestionsContainer {
  1124.     background-color: var(--search-dropdown-color); }
  1125.   .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
  1126.     background: var(--element-hover-color);
  1127.     color: var(--text-primary-color); }
  1128.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
  1129.       background: var(--element-active-color); }
  1130.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
  1131.       fill: var(--icon-secondary-color); }
  1132.   .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer {
  1133.     background-color: var(--search-dropdown-header-color); }
  1134.   .contentSearchSuggestionTable .contentSearchOneOffItem {
  1135.     background-image: none;
  1136.     border-image: linear-gradient(transparent 18%, var(--border-secondary-color) 18%, var(--border-secondary-color) 82%, transparent 82%) 1;
  1137.     border-inline-end: 1px solid;
  1138.     position: relative; }
  1139.     .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  1140.       background: var(--element-hover-color); }
  1141.     .contentSearchSuggestionTable .contentSearchOneOffItem:active {
  1142.       background: var(--element-active-color); }
  1143.   .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
  1144.     background: var(--element-hover-color);
  1145.     color: var(--text-primary-color); }
  1147. .contentSearchHeaderRow > td > img,
  1148. .contentSearchSuggestionRow > td > .historyIcon {
  1149.   margin-inline-start: 7px;
  1150.   margin-inline-end: 15px; }
  1151.  
  1152.  
  1153. .popover {
  1154.   position: relative;
  1155.   z-index: 1;
  1156.   box-sizing: border-box;
  1157.   padding: 1em;
  1158.   border: 1px solid #dadada;
  1159.   background: #fff;
  1160.   min-width: 100%;
  1161. }
  1163. .popover, .popover:before {
  1164.   box-shadow: 0 0 2px rgba(0,0,0,0.2);  
  1165. }
  1167. .popover:before,
  1168. .popover:after {
  1169.   content: '';
  1170.   display: block;
  1171.   position: absolute;
  1172.   width: 15px;
  1173.   height: 15px;
  1174.   border: 1px solid #dadada;
  1175.   background: #fff;
  1176.   -webkit-transform: rotate(45deg);
  1177.   -moz-transform: rotate(45deg);
  1178.   -ms-transform: rotate(45deg);
  1179.   -o-transform: rotate(45deg);
  1180.   transform: rotate(45deg);
  1181. }
  1183. .popover:before {
  1184.   z-index: -1;
  1185. }
  1187. .popover.arrow-top:before,
  1188. .popover.arrow-top:after {
  1189.   bottom: 100%;
  1190.   left: 20px;
  1191.   margin-bottom: -7px; 
  1192.   border-bottom: 0;
  1193.   border-right: 0;
  1194. }
  1196. .popover.arrow-bottom:before,
  1197. .popover.arrow-bottom:after {
  1198.   top: 100%;
  1199.   left: 20px;
  1200.   margin-top: -7px; 
  1201.   border-top: 0;
  1202.   border-left: 0;
  1203. }
  1205. .popover.arrow-right:before,
  1206. .popover.arrow-right:after {
  1207.   top: 20px;
  1208.   left: 100%;
  1209.   margin-left: -7px; 
  1210.   border-bottom: 0;
  1211.   border-left: 0;
  1212. }
  1214. .popover.arrow-left:before,
  1215. .popover.arrow-left:after {
  1216.   top: 20px;
  1217.   left: 0;
  1218.   margin-left: -9px; 
  1219.   border-top: 0;
  1220.   border-right: 0;
  1221. }
  1224. </style>
  1227. <section class=\"news-section\">
  1229. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  1230. \t\t\t\t<div class=\"text-left\">
  1231. \t\t\t\t\t<h3>
  1232. \t\t\t\t\t\tNos programmes
  1233. \t\t\t\t\t</h3>
  1234. \t\t\t\t\t
  1235. \t\t\t\t\t<div>
  1236. \t\t\t\t\t\tLa transparence 
  1237. \t\t\t\t\t</div>
  1238. \t\t\t\t</div>
  1240. \t\t\t\t   <div class=\"row posts-list\">
  1242. \t\t\t  
  1243. \t\t\t\t\t   <!--Single Blog Start-->
  1244. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1246. \t\t\t\t\t\t<article>
  1247. \t\t\t\t\t\t\t<div class=\"post-img\">
  1248. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1249. \t\t\t\t\t\t\t</div>
  1250. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1251. \t\t\t\t\t\t\t<h2 class=\"title\">
  1252. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  1253. \t\t\t\t\t\t\t</h2>
  1254. \t\t\t\t
  1255. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1256. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1257. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1258. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1259. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1260. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1261. \t\t\t\t\t\t\t\t</div>
  1262. \t\t\t\t\t\t\t\t</div>
  1263. \t\t\t\t\t\t\t</div>
  1264. \t\t\t\t\t\t</article>
  1266. \t\t\t\t\t   </div>
  1267. \t\t\t\t\t   <!--Single Blog End-->
  1268. \t\t\t\t\t   <!--Single Blog Start-->
  1269. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1271. \t\t\t\t\t\t<article>
  1272. \t\t\t\t\t\t\t<div class=\"post-img\">
  1273. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1274. \t\t\t\t\t\t\t</div>
  1275. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1276. \t\t\t\t\t\t\t<h2 class=\"title\">
  1277. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  1278. \t\t\t\t\t\t\t</h2>
  1279. \t\t\t\t
  1280. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1281. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1282. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1283. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1284. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1285. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1286. \t\t\t\t\t\t\t\t</div>
  1287. \t\t\t\t\t\t\t\t</div>
  1288. \t\t\t\t\t\t\t</div>
  1289. \t\t\t\t\t\t</article>
  1291. \t\t\t\t\t   </div>
  1292. \t\t\t\t\t   <!--Single Blog Start-->
  1293. \t\t\t\t\t   <!--Single Blog Start-->
  1294. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1296. \t\t\t\t\t\t<article>
  1297. \t\t\t\t\t\t\t<div class=\"post-img\">
  1298. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1299. \t\t\t\t\t\t\t</div>
  1300. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1301. \t\t\t\t\t\t\t<h2 class=\"title\">
  1302. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  1303. \t\t\t\t\t\t\t</h2>
  1304. \t\t\t\t
  1305. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1306. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1307. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1308. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1309. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1310. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1311. \t\t\t\t\t\t\t\t</div>
  1312. \t\t\t\t\t\t\t\t</div>
  1313. \t\t\t\t\t\t\t</div>
  1314. \t\t\t\t\t\t</article>
  1316. \t\t\t\t\t   </div>
  1317. \t\t\t\t\t   <!--Single Blog Start-->
  1318. \t\t\t\t\t   
  1319. \t\t\t\t   </div>
  1320. \t\t\t   </div>
  1321. \t\t   </div>
  1322.    </section>
  1324. ";
  1325.         
  1326.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1328.         
  1329.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1331.     }
  1333.     // line 1183
  1334.     public function block_javascripttemplate($context, array $blocks = [])
  1335.     {
  1336.         $macros = $this->macros;
  1337.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1338.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1340.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1341.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1343.         // line 1184
  1344.         echo "\$(document).ready(function() {
  1345.   const \$buttons = \$(\".demo__buttons\");
  1346.   const \$toggle = \$(\".demo__open-btn\");
  1347.   let delay = 200;
  1348.   let steps = [];
  1349.   let open = false;
  1350.   
  1351.   let curStep = 0;
  1353.   for (let i = 0; i <= 3; i++) {
  1354.     steps[i] = \"demo__step-\" + i;
  1355.   }
  1357.   function setStep(index) {    
  1358.     \$buttons.removeClass(\"step-1 step-0 step-3 step-2\").addClass(\"step-\" + curStep);   
  1359.   }
  1360.   
  1361.   let lastTimeout;
  1363.   function animate() {
  1364.     if (curStep >= 4) {
  1365.       curStep = 0;
  1366.       return;
  1367.     }
  1369.     open = true;
  1370.     setStep(curStep);    
  1371.     curStep++;
  1372.     lastTimeout = setTimeout(animate, delay);
  1373.   }
  1375.   \$toggle.on(\"click\", function() {
  1376.     if (!open) animate();
  1377.     else {
  1378.       \$buttons.removeClass(\"step-1 step-0 step-3 step-2\");
  1379.       clearTimeout(lastTimeout);
  1380.       open = false;
  1381.       curStep = 0;
  1382.     }
  1383.   });
  1384. });
  1385. ";
  1386.         
  1387.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1389.         
  1390.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1392.     }
  1394.     public function getTemplateName()
  1395.     {
  1396.         return "Theme/Produit/Produit/Produit/programmefinnacement.html.twig";
  1397.     }
  1399.     public function isTraitable()
  1400.     {
  1401.         return false;
  1402.     }
  1404.     public function getDebugInfo()
  1405.     {
  1406.         return array (  1344 => 1184,  1334 => 1183,  600 => 458,  596 => 457,  410 => 274,  193 => 60,  189 => 59,  185 => 57,  176 => 51,  172 => 49,  146 => 25,  144 => 24,  132 => 14,  122 => 13,  107 => 10,  97 => 9,  83 => 6,  76 => 4,  71 => 3,  61 => 2,  38 => 1,);
  1407.     }
  1409.     public function getSourceContext()
  1410.     {
  1411.         return new Source("{% extends \"Theme/Users/User/layoutoffert.html.twig\" %}
  1412. {% block meta %}
  1413. \t{{ parent() }}
  1414. \t<meta name=\"keywords\" content=\"{{ site }}, {{ keywords }}\"/>
  1415. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  1416. \t<meta name=\"description\" content=\"{{ site }} - {{ souscategorie.nom }}\"/>
  1417. {% endblock %}
  1419. {% block title %}
  1420. \t{{ parent() }} - {{ souscategorie.nom }}
  1421. {% endblock %}
  1423. {% block userblog_body %}
  1425. <style>
  1426. \t.mzp-c-details .is-summary button:before, details .is-summary button:before, summary:before{
  1427. \t\tdisplay: none!important;
  1428. \t}
  1429. </style>
  1430. <div style=\"background: #90acd1; min-height: 200px;\">
  1431. <div class=\"container\" style=\"overflow: hidden;\">
  1432. \t<div class=\"row\" style=\"margin-top: 15px;\">
  1433. \t<div class=\"col-md-8\">
  1434. \t{% if is_mobile() %}
  1435. \t<ol class=\"c-navigation-breadcrumbs__directory\">
  1436. \t\t<!-- Duplicating the \"Home\" link in both the global navigation and the breadcrumb trail is not recommended. -->
  1437. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1438. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  1439. \t\t\t<span class=\"u-visually-hidden\" property=\"name\"><span class=\"fa fa-home\"> </span> Accueil</span>
  1440. \t\t  </a>
  1441. \t\t  <meta property=\"position\" content=\"1\">
  1442. \t\t</li>
  1444. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1445. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  1446. \t\t\t<span property=\"name\"> L'entreprise</span>
  1447. \t\t  </a>
  1448. \t\t  <meta property=\"position\" content=\"2\">
  1449. \t\t</li>
  1451. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1452. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"#!\" property=\"item\" aria-current=\"location\">
  1453. \t\t\t<span property=\"name\">À propos de  nous </span>
  1454. \t\t  </a>
  1455. \t\t  <meta property=\"position\" content=\"3\">
  1456. \t\t</li>
  1457. \t</ol>
  1458. \t{% else %}
  1459. \t<div style=\"padding: 20px 0px;\">
  1460. \t\t<ul class=\"breadcrumbs\">
  1461. \t\t  <li><a href=\"{{ path('users_user_acces_plateforme') }}\"><span class=\"fa fa-home\"></span> Accueil</a></li>
  1462. \t\t  <li><a > L'entreprise</a></li>
  1463. \t\t  <li>À propos de nous</li>
  1464. \t\t</ul>
  1465. \t</div>
  1466. \t{% endif %}
  1467. \t
  1468. \t<div>
  1469. \t\t<h2 style=\"color: #fff;\">{{ souscategorie.nom }}</h2>
  1470. \t\t<div style=\"color: #fff;\">{{ souscategorie.description }}</div>
  1471.     </div>
  1472.   </div>
  1473.   
  1474. \t<!-- div class=\"col-md-4\">
  1475. \t\t<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\" class=\"my-svg\">
  1476. \t\t  <defs>
  1477. \t\t\t<filter id=\"goo\">
  1478. \t\t\t  <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" />
  1479. \t\t\t  <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7\" result=\"goo\" />
  1480. \t\t\t  <feBlend in=\"SourceGraphic\" in2=\"goo\" />
  1481. \t\t\t</filter>
  1482. \t\t  </defs>
  1483. \t\t</svg>
  1484. \t\t<div class=\"demo\">
  1485. \t\t  <div class=\"demo__buttons\">
  1486. \t\t\t<div class=\"demo__social-btn-4 demo__social-btn\"><i class=\"fa fa-snapchat\"></i></div>
  1487. \t\t\t<div class=\"demo__social-btn-3 demo__social-btn\"><i class=\"fa fa-instagram\"></i></div>
  1488. \t\t\t<div class=\"demo__social-btn-2 demo__social-btn\"><i class=\"fa fa-facebook\"></i></div>
  1489. \t\t\t<div class=\"demo__social-btn-1 demo__social-btn\"><i class=\"fa fa-twitter\"></i></div>
  1490. \t\t\t<div class=\"demo__open-btn\"><i class=\"fa fa-share-alt\"></i></div>
  1491. \t\t  </div>
  1492. \t\t  <h2 class=\"text-center\" style=\"color: #fff;\">Share and win</h2>
  1493. \t\t</div>
  1494. \t</div -->
  1495.   
  1496.   </div>
  1498.   
  1499. </div>
  1500. </div>
  1502. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); background: #f2f2f2;\">
  1503. \t<div class=\"container\" style=\"height: 100px;\">
  1504. \t  
  1505. \t</div>
  1506. </div>
  1508. <style>
  1509. \t.brand-wrap {
  1510. \t  position: relative;
  1511. \t  z-index: 2;
  1512. \t}
  1513. \t
  1514. \t@media (max-width: 991px) {
  1515. \t\t.brand-wrap {
  1516. \t\t  padding: 20px 0;
  1517. \t\t} 
  1518. \t}
  1519. \t
  1520. \t.brand-wrap .owl-carousel .owl-item img {
  1521. \t\twidth: auto !important; 
  1522. \t}
  1523. \t
  1524. \t.brand-wrap .single-brand {
  1525. \t\ttext-align: center;
  1526. \t\t-webkit-filter: grayscale(100%);
  1527. \t\t-moz-filter: grayscale(100%);
  1528. \t\t-ms-filter: grayscale(100%);
  1529. \t\t-o-filter: grayscale(100%);
  1530. \t\tfilter: grayscale(100%);
  1531. \t\topacity: .5;
  1532. \t\t-webkit-transition: all 0.3s ease 0s;
  1533. \t\t-moz-transition: all 0.3s ease 0s;
  1534. \t\t-o-transition: all 0.3s ease 0s;
  1535. \t\ttransition: all 0.3s ease 0s; 
  1536. \t}
  1537. \t
  1538. \t.brand-wrap .single-brand:hover{
  1539. \t  -webkit-filter: grayscale(0%);
  1540. \t  -moz-filter: grayscale(0%);
  1541. \t  -ms-filter: grayscale(0%);
  1542. \t  -o-filter: grayscale(0%);
  1543. \t  filter: grayscale(0%);
  1544. \t  opacity: 1; 
  1545. \t }
  1546. </style>
  1548. <div style=\"background: transparent; margin-bottom: -140px;\">
  1549. <div class=\"container\" style=\"background: transparent;\">
  1551.   <div class=\"row\" style=\"margin-top: 25px; background: transparent;\">
  1552. \t<div class=\"col-md-12\">
  1553. \t<div style=\"overflow: hidden; position: relative; top: -140px!important;  padding: 15px 7px; border-radius: 7px; border-top: 2px solid #ddd; border-radius: 15px; background: #fff;\">
  1555. \t\t<h2>Services</h2>
  1556. \t\t<div class=\"boxC12\">
  1557. \t\t\t
  1558. \t\t\t<details>
  1559. \t\t\t\t<summary>
  1560. \t\t\t\t<p> service.nom </p><span class=\"plusminus\"></span>
  1561. \t\t\t\t</summary>
  1562. \t\t\t\t<p>
  1563. \t\t\t\t\t\tservice.description|raw
  1564. \t\t\t\t
  1565. \t\t\t\t\t
  1566. \t\t\t\t\t<div class=\"box\">
  1567. \t\t\t\t\t\t<div class=\"title-bold\">
  1568. \t\t\t\t\t\t\t<span> scat.nom </span>
  1569. \t\t\t\t\t\t</div>
  1570. \t\t\t\t\t\t<div class=\"inner-profile\">
  1571. \t\t\t\t\t\t\t\tscat.description|raw 
  1572. \t\t\t\t\t\t</div>
  1573. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  1574. \t\t\t\t\t</div>
  1576. \t\t\t\t</p>
  1577. \t\t\t</details>
  1579. \t\t</div>
  1581. \t</div>
  1582. \t</div>
  1583.   </div>
  1584.   
  1585. </div>
  1586. </div>
  1588. <div class=\"mzp-l-content\" style=\"margin-top: -50px;\">
  1589. \t<div class=\"container\">
  1590. \t\t<div class=\"row\">
  1591. \t\t  <div class=\"col-xl-3 col-lg-6\">
  1592. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  1593. \t\t\t  <div class=\"card-body\">
  1594. \t\t\t\t<div class=\"row\">
  1595. \t\t\t\t  <div class=\"col\">
  1596. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Opérations</h5>
  1597. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">350,897</span>
  1598. \t\t\t\t  </div>
  1599. \t\t\t\t  <div class=\"col-auto\">
  1600. \t\t\t\t\t<div class=\"icon icon-shape bg-danger text-white rounded-circle shadow\">
  1601. \t\t\t\t\t  <i class=\"fa fa-chart-bar\"></i>
  1602. \t\t\t\t\t</div>
  1603. \t\t\t\t  </div>
  1604. \t\t\t\t</div>
  1605. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  1606. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 3.48%</span>
  1607. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  1608. \t\t\t\t</p>
  1609. \t\t\t  </div>
  1610. \t\t\t</div>
  1611. \t\t  </div>
  1612. \t\t  <div class=\"col-xl-3 col-lg-6\">
  1613. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  1614. \t\t\t  <div class=\"card-body\">
  1615. \t\t\t\t<div class=\"row\">
  1616. \t\t\t\t  <div class=\"col\">
  1617. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Intervenants</h5>
  1618. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">2,356</span>
  1619. \t\t\t\t  </div>
  1620. \t\t\t\t  <div class=\"col-auto\">
  1621. \t\t\t\t\t<div class=\"icon icon-shape bg-warning text-white rounded-circle shadow\">
  1622. \t\t\t\t\t  <i class=\"fa fa-chart-pie\"></i>
  1623. \t\t\t\t\t</div>
  1624. \t\t\t\t  </div>
  1625. \t\t\t\t</div>
  1626. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  1627. \t\t\t\t  <span class=\"text-danger mr-2\"><i class=\"fa fa-arrow-down\"></i> 3.48%</span>
  1628. \t\t\t\t  <span class=\"text-nowrap\">Since last week</span>
  1629. \t\t\t\t</p>
  1630. \t\t\t  </div>
  1631. \t\t\t</div>
  1632. \t\t  </div>
  1633. \t\t  <div class=\"col-xl-3 col-lg-6\">
  1634. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  1635. \t\t\t  <div class=\"card-body\">
  1636. \t\t\t\t<div class=\"row\">
  1637. \t\t\t\t  <div class=\"col\">
  1638. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Rapports</h5>
  1639. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">924</span>
  1640. \t\t\t\t  </div>
  1641. \t\t\t\t  <div class=\"col-auto\">
  1642. \t\t\t\t\t<div class=\"icon icon-shape bg-yellow text-white rounded-circle shadow\">
  1643. \t\t\t\t\t  <i class=\"fa fa-users\"></i>
  1644. \t\t\t\t\t</div>
  1645. \t\t\t\t  </div>
  1646. \t\t\t\t</div>
  1647. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  1648. \t\t\t\t  <span class=\"text-warning mr-2\"><i class=\"fa fa-arrow-down\"></i> 1.10%</span>
  1649. \t\t\t\t  <span class=\"text-nowrap\">Since yesterday</span>
  1650. \t\t\t\t</p>
  1651. \t\t\t  </div>
  1652. \t\t\t</div>
  1653. \t\t  </div>
  1654. \t\t  <div class=\"col-xl-3 col-lg-6\">
  1655. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  1656. \t\t\t  <div class=\"card-body\">
  1657. \t\t\t\t<div class=\"row\">
  1658. \t\t\t\t  <div class=\"col\">
  1659. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Crédibilité</h5>
  1660. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">49,65%</span>
  1661. \t\t\t\t  </div>
  1662. \t\t\t\t  <div class=\"col-auto\">
  1663. \t\t\t\t\t<div class=\"icon icon-shape bg-info text-white rounded-circle shadow\">
  1664. \t\t\t\t\t  <i class=\"fa fa-percent\"></i>
  1665. \t\t\t\t\t</div>
  1666. \t\t\t\t  </div>
  1667. \t\t\t\t</div>
  1668. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  1669. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 12%</span>
  1670. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  1671. \t\t\t\t</p>
  1672. \t\t\t  </div>
  1673. \t\t\t</div>
  1674. \t\t  </div>
  1675. \t\t</div>
  1676. \t  </div>
  1677. </div>
  1679. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); margin-bottom: 30px;\">
  1680. <div class=\"container\" style=\"padding-top: 25px; padding-bottom: 25px;\">
  1681.    
  1682. \t<section style=\"margin-top: -20px;\">
  1683. \t\t<div style=\"width: 100%; margin: 0px auto;\">
  1684. \t\t<link href=\"{{ asset('template/css/tyfy.css') }}\" rel=\"stylesheet\"/>
  1685. \t\t<style>
  1686. \t\t  div.demotabs {
  1687. \t\t\tborder: 2px dashed #e6e6e6;
  1688. \t\t\tborder-radius: .8125rem;
  1689. \t\t\tbox-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  1690. \t\t\tmargin-top: 1.625rem;
  1691. \t\t\tpadding: 15px;
  1692. \t\t\tbackground: #fff;
  1693. \t\t  }
  1694. \t\t  .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  1695. \t\t</style>
  1696. \t\t
  1697. \t\t
  1698. \t\t<div class=\"demotabs\">
  1699. \t\t\t<div class=\"mzp-l-content\">
  1700. \t\t  <div class=\"links-underlined\">
  1701. \t\t\t  <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  1702. \t\t\t  <p>  This is my implementation of responsive tabs. It is being incorporated into my <a href=\"https://github.com/aaronpinero/typography\">Tyfy framework</a>.</p>
  1703. \t\t  </div>
  1704. \t\t  <div class=\"tabs-container\">
  1705. \t\t\t  <h2 class=\"tab-label\">Présentation</h2>
  1706. \t\t\t  <p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>
  1707. \t\t\t  <p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>
  1708. \t\t\t  
  1709. \t\t\t  <h2 class=\"tab-label collapsed\">Eligibilité</h2>
  1710. \t\t\t  <p>Facilis error corrupti dolor eaque. 
  1711. \t\t\t  <a id=\"anchor\">Occaecati</a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>
  1712. \t\t\t  <p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>
  1713. \t\t\t  
  1714. \t\t\t  <h2 class=\"tab-label collapsed\">Rapport</h2>
  1715. \t\t\t  <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  1716. \t\t\t  
  1717. \t\t\t  <h2 class=\"tab-label collapsed\">Historique</h2>
  1718. \t\t\t  <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  1719. \t\t\t  
  1720. \t\t  </div>
  1721. \t\t
  1722. \t\t<h2>Notes</h2>
  1723. \t\t<p>I've relied on CSS Flexbox for the visual tabs. Flexbox is <a href=\"https://caniuse.com/#search=flex\">a problem for just about any version of Internet <strike>Exploder</strike> Explorer</a>. At some point, I'll need to figure out an alternative way to present the tabs that will work for IE.</p>
  1724. \t  </div>
  1725. \t  </div>
  1726. \t\t
  1727. \t  <script>
  1728. \t\t  \$(document).ready(function(){
  1729. \t
  1730. \t\t\tGoToAnchor = function(){
  1731. \t\t\t  // find the anchor and any tab it might be in
  1732. \t\t\t  selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  1733. \t\t\t\t  selected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  1734. \t\t\t  parent_tab = selected_anchor.parents('.tab-panel');
  1735. \t\t\t  // account for an anchor in a label
  1736. \t\t\t  parent_label = selected_anchor.parents('.tab-label');
  1737. \t\t\t  if (parent_label.length) {
  1738. \t\t\t\tparent_tab = parent_label.next('.tab-panel');
  1739. \t\t\t  }
  1740. \t\t\t  // do the steps of this function only if we have an anchor link and a tab panel
  1741. \t\t\t  if (selected_anchor.length && parent_tab.length) {
  1742. \t\t\t\tparent_tab_label = parent_tab.prev('.tab-label');
  1743. \t\t\t\t\tparent_tab_index = parent_tab_label.attr('data-tabindex');
  1744. \t\t\t\tparent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  1745. \t\t\t\tif (parent_tab.hasClass('collapsed')) {
  1746. \t\t\t\t  parent_tab.removeClass('collapsed');
  1747. \t\t\t\t  parent_tab_label.removeClass('collapsed');
  1748. \t\t\t\t}
  1749. \t\t\t\t// scroll to the anchor
  1750. \t\t\t\tvar s = selected_anchor.offset().top - 50; // console.log(s);
  1751. \t\t\t\t\$('body,html').animate({'scrollTop':s},500,'swing');
  1752. \t\t\t\t  }
  1753. \t\t\t};
  1754. \t\t\t
  1755. \t\t\t// prepare HTML structure for each tab container
  1756. \t\t\t\$('.tabs-container').each(function(){
  1757. \t\t\t  if (!\$(this).hasClass('tabs-processed')) {
  1758. \t\t\t\t// find the headings that are tab labels
  1759. \t\t\t\tmy_tablabels = \$(this).find('.tab-label');
  1760. \t\t\t\t// create tabs
  1761. \t\t\t\tif (\$(this).find('ul.tabs').length === 0) {
  1762. \t\t\t\t  \$(this).prepend('<ul class=\"tabs\"></ul>');
  1763. \t\t\t\t  var x;
  1764. \t\t\t\t  for (x=0;x<my_tablabels.length;x++) {
  1765. \t\t\t\t\t\$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  1766. \t\t\t\t  }
  1767. \t\t\t\t}
  1768. \t\t\t\t// structure all labels and wrap all tab panels
  1769. \t\t\t\tif (\$(this).find('.tab-panel').length === 0) {
  1770. \t\t\t\t  my_tablabels.each(function(i){
  1771. \t\t\t\t\t\$(this).attr('data-tabindex',i);
  1772. \t\t\t\t\t\$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  1773. \t\t\t\t\tkids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  1774. \t\t\t\t\t// default state class for when tabs are collapsable sections
  1775. \t\t\t\t\t\$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  1776. \t\t\t\t  });    
  1777. \t\t\t\t}
  1778. \t\t\t\t// open initial tab
  1779. \t\t\t\t\$(this).find('ul.tabs li').eq(0).addClass('open');
  1780. \t\t\t\tmy_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  1781. \t\t\t\t// tab click events
  1782. \t\t\t\t\$('.tabs-container ul.tabs li').each(function(i){
  1783. \t\t\t\t  \$(this).click(function(){
  1784. \t\t\t\t\tif (!\$(this).hasClass('open')) {
  1785. \t\t\t\t\t  \$('.tabs-container .open').removeClass('open');
  1786. \t\t\t\t\t  my_tabindex = \$(this).attr('data-tabindex');
  1787. \t\t\t\t\t  \$(this).addClass('open');
  1788. \t\t\t\t\t  \$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  1789. \t\t\t\t\t  \$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  1790. \t\t\t\t\t}
  1791. \t\t\t\t  });
  1792. \t\t\t\t});
  1793. \t\t\t\t// collapsable header click event
  1794. \t\t\t\t\$('.tabs-container .tab-label').click(function(){
  1795. \t\t\t\t  if (!\$(this).hasClass('transition')) {
  1796. \t\t\t\t\tkids = \$(this).next('.tab-panel');
  1797. \t\t\t\t\tkids.removeClass('collapsed');
  1798. \t\t\t\t\tvar fullHeight = kids.outerHeight();
  1799. \t\t\t\t\t\$(this).addClass('transition');
  1800. \t\t\t\t\tkids.addClass('transition');
  1801. \t\t\t\t\tif (\$(this).hasClass('collapsed')) {
  1802. \t\t\t\t\t  kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  1803. \t\t\t\t\t\theight:fullHeight+'px',
  1804. \t\t\t\t\t\tpaddingBottom:'32px',
  1805. \t\t\t\t\t\tpaddingTop:'16px',
  1806. \t\t\t\t\t  },500,function(){
  1807. \t\t\t\t\t\t\$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  1808. \t\t\t\t\t  });
  1809. \t\t\t\t\t}
  1810. \t\t\t\t\telse {
  1811. \t\t\t\t\t  kids.css('height',fullHeight+'px').animate({
  1812. \t\t\t\t\t\theight:'0px',
  1813. \t\t\t\t\t\tpaddingBottom:'0px',
  1814. \t\t\t\t\t\tpaddingTop:'0px',
  1815. \t\t\t\t\t  },500,function(){
  1816. \t\t\t\t\t\t\$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  1817. \t\t\t\t\t  });
  1818. \t\t\t\t\t}
  1819. \t\t\t\t  }
  1820. \t\t\t\t}); 
  1821. \t\t\t\t// indicate state of readiness
  1822. \t\t\t\t\$(this).addClass('tabs-processed');
  1823. \t\t\t  }  
  1824. \t\t\t});
  1825. \t\t\t// if there are tabs and someone has linked to an anchor inside a tab
  1826. \t\t\tconsole.log(window.location.hash);
  1827. \t\t\tif (window.location.hash != '') {
  1828. \t\t\t  GoToAnchor();
  1829. \t\t\t}
  1830. \t\t\t// handle case when page is already loaded
  1831. \t\t\t\$(window).on('hashchange',function(){
  1832. \t\t\t  GoToAnchor();
  1833. \t\t\t});
  1834. \t\t  });
  1835. \t\t</script>
  1836. \t\t</div>
  1837. \t</section>
  1839. </div>
  1840. </div>
  1843. <style>
  1846. body {
  1847. /* Colors */
  1848. \t--color-blue-50: #0a84ff;
  1849. \t--color-blue-60: #0060df;
  1850. \t--color-blue-70: #003eaa;
  1851. \t--color-blue-80: #002275;
  1852. \t--color-gray-10: #f9f9fa;
  1853. \t--color-gray-20: #ededf0;
  1854. \t--color-gray-30: #d7d7db;
  1855. \t--color-gray-40: #b1b1b3;
  1856. \t--color-gray-50: #737373;
  1857. \t--color-gray-60: #4a4a4f;
  1858. \t--color-gray-70: #38383d;
  1859. \t--color-gray-80: #2a2a2e;
  1860. \t--color-gray-90: #0c0c0d;
  1861. \t--color-green-70: #058b00;
  1862. \t--color-teal-50: #00feff;
  1863. \t--color-teal-60: #00c8d7;
  1864. \t--color-teal-70: #008ea4;
  1866. /* Icons */
  1867. \t--icon-context-menu: url({{ asset('template/images/twitter.png') }});
  1868. \t--icon-dismiss: url({{ asset('template/images/twitter.png') }});
  1870.   --background-color: #F9F9FA;
  1871.   --border-primary-color: #B1B1B3;
  1873. /* Primary Action */
  1874.   --primary-action-default: var(--color-blue-60);
  1875.   --primary-action-hover: var(--color-blue-70);
  1876.   --primary-action-active: var(--color-blue-80);
  1877.   --primary-action-text-color: #fff;
  1879. /* Secondary Action */
  1880.   --secondary-action-default: var(--color-gray-20);
  1881.   --secondary-action-hover: var(--color-gray-30);
  1882.   --secondary-action-active: var(--color-gray-40);
  1883.   --secondary-action-text-color: var(--color-gray-80);
  1885. /* Ghost Action */
  1886. \t--ghost-action-hover: var(--color-gray-20);
  1887. \t--ghost-action-active: var(--color-gray-30);
  1888. \t--ghost-action-text-color: var(--color-gray-80);
  1890. /* Forms */
  1891. \t--label-text-color: var(--text-secondary);
  1892. \t--text-field-border-color: var(--color-gray-30);
  1893. \t--text-field-hover-border-color: var(--color-gray-40);
  1894. \t--text-field-focus-border-color: var(--color-gray-40);
  1895. \t--text-field-bg-color: #fff;
  1896. /* Focus */
  1897.   --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 132, 255, 0.5);
  1899. /* Cards */
  1900.   --rasied-card-bg-color: #FFF;
  1901.   --rasied-card-border-radius: 8px;
  1902.   --box-shadow-10: 0px 0px 8px 0 rgba(12, 12, 13, 0.05);
  1903.   --raised-card-hover: 0 0 0 4px var(--secondary-action-default);
  1904.     
  1905.   /* Typography */
  1906.   --base-font-size: 15px;
  1907.   --small-font-size: 13px;
  1908.   --base-line-height: 24px;
  1909.   
  1910.   /* Text Colors */
  1911.   --text-primary: var(--color-gray-90);
  1912.   --text-secondary: var(--color-gray-50);
  1913. }
  1917. .meta {
  1918. \tcolor: var(--text-secondary);
  1919. \tfont-size: var(--small-font-size);
  1920. \tline-height: var(--base-line-height);
  1921. }
  1923. .small {
  1924. \tfont-size: var(--small-font-size);
  1925. \tline-height: 20px;
  1926. }
  1928. .text-muted {
  1929. \tcolor: var(--text-secondary);
  1930. }
  1932. .sr-only {
  1933. \tdisplay: none;
  1934. }
  1936. /* Default Link */
  1937. a {
  1938. \t background-color: transparent;
  1939. \t color: var(--color-blue-60);
  1940. \t text-decoration: none;
  1941. }
  1942. a:hover {
  1943. \ttext-decoration: underline;
  1944. }
  1945. a:active {
  1946. \tcolor: var(--color-blue-70);
  1947. \ttext-decoration:underline;
  1948. }
  1949. a:focus {
  1950. \tbox-shadow: ;
  1951. }
  1952. a:not([href]):not([tabindex]) {
  1953. \tcolor: inherit;
  1954. \ttext-decoration: none;
  1955. }
  1957. /* Buttons */
  1958. .btn {
  1959. \tborder: none;
  1960. \tcursor: pointer;
  1961. \tfont-weight: 500;
  1962. \ttransition: background-color 150ms, transform 150ms;
  1963. \ttransition-duration: 150ms;
  1964. }
  1966. .btn:active {
  1967. \ttransform: scale(0.97);
  1968. }
  1970. .btn:focus {
  1971. \tbox-shadow: var(--focus-box-shadow);
  1972. }
  1974. .btn.disabled {
  1975. \tcursor: default;
  1976. \topacity: 0.4;
  1977. }
  1979. /* Primary Button */
  1980. .btn--primary {
  1981. \tbackground-color: var(--primary-action-default);
  1982. \tcolor: var(--primary-action-text-color);
  1983. \tfill: var(--primary-action-text-color);
  1984. \t-moz-context-properties: fill;
  1985. }
  1987. .btn--primary:hover {
  1988. \tbackground-color: var(--primary-action-hover);
  1989. }
  1991. .btn--primary:active {
  1992. \tbackground-color: var(--primary-action-active);
  1993. }
  1995. .btn--primary:disabled,
  1996. .btn--primary.disabled {
  1997. \tbackground-color: var(--primary-action-default);
  1998. \tcolor: var(--primary-action-text-color);
  1999. \tfill: var(--primary-action-text-color);
  2000. \t-moz-context-properties: fill;
  2001. }
  2003. /* Secondary Button */
  2004. .btn--secondary {
  2005. \tbackground-color: var(--secondary-action-default);
  2006. \tcolor: var(--secondary-action-text-color);
  2007. \tfill: var(--secondary-action-text-color);
  2008. \t-moz-context-properties: fill;
  2009. }
  2011. .btn--secondary:hover {
  2012. \tbackground-color: var(--secondary-action-hover);
  2013. }
  2015. .btn--secondary:active {
  2016. \tbackground-color: var(--secondary-action-active);
  2017. }
  2019. .btn--secondary:disabled,
  2020. .btn--secondary.disabled {
  2021. \tbackground-color: var(--secondary-action-default);
  2022. \tcolor: var(--secondary-action-text-color);
  2023. \tfill: var(--secondary-action-text-color);
  2024. \t-moz-context-properties: fill;
  2025. }
  2027. /* Pill Button */
  2028. .btn--pill {
  2029. \tborder-radius: 16px;
  2030. \tline-height: 32px;
  2031. \tmin-height: 32px;
  2032. \tpadding: 0 16px;
  2033. \tvertical-align: middle;
  2034. }
  2036. .btn--pill-icon-only {
  2037. \tbackground-position: 50%;
  2038. \tbackground-repeat: no-repeat;
  2039. \tbackground-size: 16px;
  2040. \twidth: 32px;
  2041. }
  2043. /* Form Button */
  2044. .btn--form {
  2045. \tborder-radius: 4px;
  2046. \tmin-height: 40px;
  2047. \tmin-width: 96px;
  2048. \tpadding: 0 8px;
  2049. }
  2051. /* Ghost Button */
  2052. .btn--ghost {
  2053. \tbackground-color: transparent;
  2054. \tcolor: var(--ghost-action-text-color);
  2055. \tfill: var(--ghost-action-text-color);
  2056. \t-moz-context-properties: fill;
  2057. }
  2059. .btn--ghost:hover {
  2060. \tbackground-color: var(--ghost-action-hover);
  2061. }
  2063. .btn--ghost:active {
  2064. \tbackground-color: var(--ghost-action-active);
  2065. }
  2067. .btn--ghost:disabled,
  2068. .btn--ghost.disabled {
  2069. \tbackground-color: transparent;
  2070. \tcolor: var(--ghost-action-text-color);
  2071. \tfill: var(--ghost-action-text-color);
  2072. \t-moz-context-properties: fill;
  2073. }
  2077. .card .context-menu-btn {
  2078. \topacity: 0;
  2079. \tposition: absolute;
  2080. \tright: -16px;
  2081. \ttop: -16px;
  2082. \ttransform: scale(0.25);
  2083. \ttransition-duration: 150ms;
  2084. \ttransition-property: transform, opacity;\t
  2085. }
  2087. /* Cards */
  2088. .card-raised {
  2089. \tbackground: var(--rasied-card-bg-color);
  2090. \tborder-radius: var(--rasied-card-border-radius);
  2091. \tborder: 1px inset rgba(12, 12, 13, 0.07);
  2092. \tbox-shadow: var(--box-shadow-10);
  2093. \ttransition: box-shadow 250ms, transform 150ms;
  2094. \tposition: relative;
  2095. }
  2097. .card-raised:hover {
  2098. \tbox-shadow: var(--box-shadow-10), var(--raised-card-hover);\t
  2099. }
  2102. .card-raised:hover .context-menu-btn {
  2103.     opacity: 1;
  2104.     transform: scale(1);
  2105.     transition-delay: 200ms;
  2106. }
  2108. .card-raised:hover .title {
  2109. \tcolor: var(--primary-action-default);
  2110. \ttext-decoration: underline;
  2111. \tcursor: pointer;
  2112. }
  2114. .card-raised:active {\t
  2115. \ttransform: scale(0.97);
  2116. }
  2118. .card-raised:focus {
  2119. \tbox-shadow: var(--box-shadow-10), 0 0 0 3px #fff, 0 0 0 6px rgba(10, 132, 255, 0.5);
  2120. }
  2122. /*
  2123. .card-img {
  2124. \tborder: 1px inset rgba(0, 0, 0, 0.15);
  2125. }
  2126. */
  2128. .card-raised .card-img-top {
  2129. \tborder-top-left-radius: var(--rasied-card-border-radius);
  2130. \tborder-top-right-radius: var(--rasied-card-border-radius);
  2131. }
  2133. .card-body {
  2134. \tpadding: 12px 16px;
  2135. }
  2137. .card-footer {
  2138. \tpadding: 12px 16px;
  2139. }
  2142. /* Snippet */
  2143. .snippet {
  2144. \tbackground-color: #fff;
  2145. \tbottom: 0;
  2146. \tbox-shadow: var(--box-shadow-10);
  2147. \tpadding: 24px 0;
  2148. \tposition: fixed;
  2149. \twidth: 100%;
  2150. \tz-index: 200;
  2151. }
  2153. .snippet .wrapper {
  2154. \tdisplay: flex;
  2155. }
  2157. .snippet-promo-image,
  2158. .snippet-content {
  2159. \tmargin-right: 24px;
  2160. }
  2162. .snippet-promo-image img {
  2163. \twidth: 48px;
  2164. }
  2166. .snippet-content {
  2167. \tflex-grow: 1;
  2168. }
  2170. .snippet-content .body {
  2171. \tmax-width: 600px;\t
  2172. }
  2174. .snippet .btn {
  2175. \theight: 32px;\t
  2176. }
  2178. .icon-dark-theme {
  2179. \tdisplay: none;
  2180. }
  2182. .search-wrapper {
  2183.   padding: 24px 0; }
  2184.   .only-search .search-wrapper {
  2185.     padding: 0 0 64px; }
  2186.   .search-wrapper .logo-and-wordmark {
  2187.     align-items: center;
  2188.     display: flex;
  2189.     justify-content: center;
  2190.     margin-bottom: 49px; }
  2191.     .search-wrapper .logo-and-wordmark .logo {
  2192.       background: url(\"chrome://branding/content/icon128.png\") no-repeat center center;
  2193.       background-size: 97px;
  2194.       display: inline-block;
  2195.       height: 97px;
  2196.       width: 97px; }
  2197.     .search-wrapper .logo-and-wordmark .wordmark {
  2198.       background: url(\"../data/content/assets/firefox-wordmark.svg\") no-repeat center center;
  2199.       background-size: 142px;
  2200.       -moz-context-properties: fill;
  2201.       display: inline-block;
  2202.       fill: var(--search-wordmark-color);
  2203.       height: 97px;
  2204.       margin-inline-start: 15px;
  2205.       width: 142px; }
  2206.     @media (max-width: 609px) {
  2207.       .search-wrapper .logo-and-wordmark .logo {
  2208.         background-size: 64px;
  2209.         height: 64px;
  2210.         width: 64px; }
  2211.       .search-wrapper .logo-and-wordmark .wordmark {
  2212.         background-size: 100px;
  2213.         height: 64px;
  2214.         width: 100px; } }
  2215.   
  2216.   .search-wrapper .search-inner-wrapper {
  2217.     cursor: default;
  2218.     display: flex;
  2219.     height: 48px;
  2220.     margin: 0 auto;
  2221.     position: relative;
  2222.     width: 224px; }
  2223.     @media (min-width: 610px) {
  2224.       .search-wrapper .search-inner-wrapper {
  2225.         width: 480px; } }
  2226.     @media (min-width: 866px) {
  2227.       .search-wrapper .search-inner-wrapper {
  2228.         width: 736px; } }
  2229.   
  2230.   .search-wrapper input {
  2231.     background: var(--text-field-bg-color) /* var(--search-icon) 12px center no-repeat */;
  2232.     background-size: 24px;
  2233.     border: solid 1px var(--text-field-border-color);
  2234.     border-radius: 4px;
  2235. /*     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); */
  2236.     font-size: 15px;
  2237.     -moz-context-properties: fill;
  2238.     fill: var(--search-icon-color);
  2239.     padding: 0;
  2240.     padding-inline-end: 48px;
  2241.     padding-inline-start: 46px;
  2242.     width: 100%; }
  2243.     
  2244.     .search-wrapper input:dir(rtl) {
  2245.       background-position-x: right 12px; }
  2246.   
  2247. /*
  2248.   .search-wrapper:hover input {
  2249.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  2250. */
  2251.   
  2252.   .search-wrapper .search-inner-wrapper:active input,
  2253.   .search-wrapper input:focus {
  2254.     border: 1px solid var(--text-field-focus-border-color);
  2255.     box-shadow: var(--focus-box-shadow); }
  2256.   
  2257.   .search-wrapper .search-button {
  2258.     background: url(\"chrome://browser/skin/forward.svg\") no-repeat center center;
  2259.     background-size: 16px 16px;
  2260.     border: 0;
  2261.     border-radius: 0 3px 3px 0;
  2262.     -moz-context-properties: fill;
  2263.     fill: var(--search-icon-color);
  2264.     height: 100%;
  2265.     inset-inline-end: 0;
  2266.     position: absolute;
  2267.     width: 48px; }
  2268.     .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
  2269.       background-color: rgba(12, 12, 13, 0.1);
  2270.       cursor: pointer; }
  2271.     .search-wrapper .search-button:active {
  2272.       background-color: rgba(12, 12, 13, 0.2); }
  2273.     .search-wrapper .search-button:dir(rtl) {
  2274.       transform: scaleX(-1); }
  2276. .non-collapsible-section + .below-search-snippet-wrapper {
  2277.   margin-top: -48px; }
  2279. @media (max-height: 700px) {
  2280. /*
  2281.   .search-wrapper {
  2282.     padding: 0 0 30px; }
  2283. */
  2284.   .non-collapsible-section + .below-search-snippet-wrapper {
  2285.     margin-top: -14px; }
  2286.   .below-search-snippet-wrapper {
  2287.     min-height: 0; } }
  2289. .search-handoff-button {
  2290.   background: var(--textbox-background-color) var(--search-icon) 12px center no-repeat;
  2291.   background-size: 24px;
  2292.   border: solid 1px var(--search-border-color);
  2293.   border-radius: 3px;
  2294.   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
  2295.   cursor: text;
  2296.   font-size: 15px;
  2297.   padding: 0;
  2298.   padding-inline-end: 48px;
  2299.   padding-inline-start: 46px;
  2300.   opacity: 1;
  2301.   transition: opacity 500ms;
  2302.   width: 100%; }
  2303.   .search-handoff-button:dir(rtl) {
  2304.     background-position-x: right 12px; }
  2305.   .search-handoff-button:hover {
  2306.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  2307.   .fake-focus .search-handoff-button {
  2308.     border: 1px solid var(--textbox-focus-color);
  2309.     box-shadow: var(--textbox-focus-boxshadow); }
  2310.     .fake-focus .search-handoff-button .fake-caret {
  2311.       display: block; }
  2312.   .search-hidden .search-handoff-button {
  2313.     opacity: 0;
  2314.     visibility: hidden; }
  2315.   .search-handoff-button .fake-editable:focus {
  2316.     outline: none;
  2317.     caret-color: transparent; }
  2318.   .search-handoff-button .fake-editable {
  2319.     color: transparent;
  2320.     height: 100%;
  2321.     opacity: 0;
  2322.     position: absolute;
  2323.     top: 0;
  2324.     left: 0;
  2325.     right: 0;
  2326.     bottom: 0; }
  2327.   .search-handoff-button .fake-textbox {
  2328.     opacity: 0.54;
  2329.     text-align: start; }
  2330.   .search-handoff-button .fake-caret {
  2331.     animation: caret-animation 1.3s steps(5, start) infinite;
  2332.     background: var(--text-primary-color);
  2333.     display: none;
  2334.     inset-inline-start: 47px;
  2335.     height: 17px;
  2336.     position: absolute;
  2337.     top: 16px;
  2338.     width: 1px; }
  2340. @keyframes caret-animation {
  2341.   to {
  2342.     visibility: hidden; } }
  2344. @media (min-height: 701px) {
  2345.   body:not(.inline-onboarding) .fixed-search main {
  2346.     padding-top: 146px; }
  2347.   body:not(.inline-onboarding) .fixed-search .search-wrapper {
  2348.     background-color: var(--search-header-background-color);
  2349.     border-bottom: solid 1px var(--border-secondary-color);
  2350.     height: 95px;
  2351.     left: 0;
  2352.     padding: 30px 0;
  2353.     position: fixed;
  2354.     top: 0;
  2355.     width: 100%;
  2356.     z-index: 9; }
  2357.     body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
  2358.       height: 35px; }
  2359.     body:not(.inline-onboarding) .fixed-search .search-wrapper input {
  2360.       background-position-x: 16px;
  2361.       background-size: 16px; }
  2362.       body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
  2363.         background-position-x: right 16px; }
  2364.   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
  2365.     background-position-x: 12px;
  2366.     background-size: 24px; }
  2367.     body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
  2368.       background-position-x: right 12px; }
  2369.     body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
  2370.       top: 10px; } }
  2372. .contentSearchSuggestionTable {
  2373.   background-color: var(--search-dropdown-color);
  2374.   border: 0;
  2375.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
  2376.   transform: translateY(4px); }
  2377.   .contentSearchSuggestionTable .contentSearchHeader {
  2378.     background-color: var(--search-dropdown-header-color);
  2379.     color: var(--text-secondary-color); }
  2380.   .contentSearchSuggestionTable .contentSearchHeader,
  2381.   .contentSearchSuggestionTable .contentSearchSettingsButton {
  2382.     border-color: var(--border-secondary-color); }
  2383.   .contentSearchSuggestionTable .contentSearchSuggestionsList {
  2384.     border: 0; }
  2385.   .contentSearchSuggestionTable .contentSearchOneOffsTable {
  2386.     background-color: var(--search-dropdown-header-color);
  2387.     border-top: solid 1px var(--border-secondary-color); }
  2388.   .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
  2389.     color: var(--text-primary-color); }
  2390.   .contentSearchSuggestionTable .contentSearchSuggestionsContainer {
  2391.     background-color: var(--search-dropdown-color); }
  2392.   .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
  2393.     background: var(--element-hover-color);
  2394.     color: var(--text-primary-color); }
  2395.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
  2396.       background: var(--element-active-color); }
  2397.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
  2398.       fill: var(--icon-secondary-color); }
  2399.   .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer {
  2400.     background-color: var(--search-dropdown-header-color); }
  2401.   .contentSearchSuggestionTable .contentSearchOneOffItem {
  2402.     background-image: none;
  2403.     border-image: linear-gradient(transparent 18%, var(--border-secondary-color) 18%, var(--border-secondary-color) 82%, transparent 82%) 1;
  2404.     border-inline-end: 1px solid;
  2405.     position: relative; }
  2406.     .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  2407.       background: var(--element-hover-color); }
  2408.     .contentSearchSuggestionTable .contentSearchOneOffItem:active {
  2409.       background: var(--element-active-color); }
  2410.   .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
  2411.     background: var(--element-hover-color);
  2412.     color: var(--text-primary-color); }
  2414. .contentSearchHeaderRow > td > img,
  2415. .contentSearchSuggestionRow > td > .historyIcon {
  2416.   margin-inline-start: 7px;
  2417.   margin-inline-end: 15px; }
  2418.  
  2419.  
  2420. .popover {
  2421.   position: relative;
  2422.   z-index: 1;
  2423.   box-sizing: border-box;
  2424.   padding: 1em;
  2425.   border: 1px solid #dadada;
  2426.   background: #fff;
  2427.   min-width: 100%;
  2428. }
  2430. .popover, .popover:before {
  2431.   box-shadow: 0 0 2px rgba(0,0,0,0.2);  
  2432. }
  2434. .popover:before,
  2435. .popover:after {
  2436.   content: '';
  2437.   display: block;
  2438.   position: absolute;
  2439.   width: 15px;
  2440.   height: 15px;
  2441.   border: 1px solid #dadada;
  2442.   background: #fff;
  2443.   -webkit-transform: rotate(45deg);
  2444.   -moz-transform: rotate(45deg);
  2445.   -ms-transform: rotate(45deg);
  2446.   -o-transform: rotate(45deg);
  2447.   transform: rotate(45deg);
  2448. }
  2450. .popover:before {
  2451.   z-index: -1;
  2452. }
  2454. .popover.arrow-top:before,
  2455. .popover.arrow-top:after {
  2456.   bottom: 100%;
  2457.   left: 20px;
  2458.   margin-bottom: -7px; 
  2459.   border-bottom: 0;
  2460.   border-right: 0;
  2461. }
  2463. .popover.arrow-bottom:before,
  2464. .popover.arrow-bottom:after {
  2465.   top: 100%;
  2466.   left: 20px;
  2467.   margin-top: -7px; 
  2468.   border-top: 0;
  2469.   border-left: 0;
  2470. }
  2472. .popover.arrow-right:before,
  2473. .popover.arrow-right:after {
  2474.   top: 20px;
  2475.   left: 100%;
  2476.   margin-left: -7px; 
  2477.   border-bottom: 0;
  2478.   border-left: 0;
  2479. }
  2481. .popover.arrow-left:before,
  2482. .popover.arrow-left:after {
  2483.   top: 20px;
  2484.   left: 0;
  2485.   margin-left: -9px; 
  2486.   border-top: 0;
  2487.   border-right: 0;
  2488. }
  2491. </style>
  2494. <section class=\"news-section\">
  2496. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  2497. \t\t\t\t<div class=\"text-left\">
  2498. \t\t\t\t\t<h3>
  2499. \t\t\t\t\t\tNos programmes
  2500. \t\t\t\t\t</h3>
  2501. \t\t\t\t\t
  2502. \t\t\t\t\t<div>
  2503. \t\t\t\t\t\tLa transparence 
  2504. \t\t\t\t\t</div>
  2505. \t\t\t\t</div>
  2507. \t\t\t\t   <div class=\"row posts-list\">
  2509. \t\t\t  
  2510. \t\t\t\t\t   <!--Single Blog Start-->
  2511. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2513. \t\t\t\t\t\t<article>
  2514. \t\t\t\t\t\t\t<div class=\"post-img\">
  2515. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2516. \t\t\t\t\t\t\t</div>
  2517. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2518. \t\t\t\t\t\t\t<h2 class=\"title\">
  2519. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  2520. \t\t\t\t\t\t\t</h2>
  2521. \t\t\t\t
  2522. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2523. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2524. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2525. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2526. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2527. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2528. \t\t\t\t\t\t\t\t</div>
  2529. \t\t\t\t\t\t\t\t</div>
  2530. \t\t\t\t\t\t\t</div>
  2531. \t\t\t\t\t\t</article>
  2533. \t\t\t\t\t   </div>
  2534. \t\t\t\t\t   <!--Single Blog End-->
  2535. \t\t\t\t\t   <!--Single Blog Start-->
  2536. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2538. \t\t\t\t\t\t<article>
  2539. \t\t\t\t\t\t\t<div class=\"post-img\">
  2540. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2541. \t\t\t\t\t\t\t</div>
  2542. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2543. \t\t\t\t\t\t\t<h2 class=\"title\">
  2544. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  2545. \t\t\t\t\t\t\t</h2>
  2546. \t\t\t\t
  2547. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2548. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2549. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2550. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2551. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2552. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2553. \t\t\t\t\t\t\t\t</div>
  2554. \t\t\t\t\t\t\t\t</div>
  2555. \t\t\t\t\t\t\t</div>
  2556. \t\t\t\t\t\t</article>
  2558. \t\t\t\t\t   </div>
  2559. \t\t\t\t\t   <!--Single Blog Start-->
  2560. \t\t\t\t\t   <!--Single Blog Start-->
  2561. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2563. \t\t\t\t\t\t<article>
  2564. \t\t\t\t\t\t\t<div class=\"post-img\">
  2565. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2566. \t\t\t\t\t\t\t</div>
  2567. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2568. \t\t\t\t\t\t\t<h2 class=\"title\">
  2569. \t\t\t\t\t\t\t\t<a href=\"/detail/article/19\" data-original-title=\"\" title=\"\">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  2570. \t\t\t\t\t\t\t</h2>
  2571. \t\t\t\t
  2572. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2573. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2574. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2575. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2576. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2577. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2578. \t\t\t\t\t\t\t\t</div>
  2579. \t\t\t\t\t\t\t\t</div>
  2580. \t\t\t\t\t\t\t</div>
  2581. \t\t\t\t\t\t</article>
  2583. \t\t\t\t\t   </div>
  2584. \t\t\t\t\t   <!--Single Blog Start-->
  2585. \t\t\t\t\t   
  2586. \t\t\t\t   </div>
  2587. \t\t\t   </div>
  2588. \t\t   </div>
  2589.    </section>
  2591. {% endblock %}
  2593. {% block javascripttemplate %}
  2594. \$(document).ready(function() {
  2595.   const \$buttons = \$(\".demo__buttons\");
  2596.   const \$toggle = \$(\".demo__open-btn\");
  2597.   let delay = 200;
  2598.   let steps = [];
  2599.   let open = false;
  2600.   
  2601.   let curStep = 0;
  2603.   for (let i = 0; i <= 3; i++) {
  2604.     steps[i] = \"demo__step-\" + i;
  2605.   }
  2607.   function setStep(index) {    
  2608.     \$buttons.removeClass(\"step-1 step-0 step-3 step-2\").addClass(\"step-\" + curStep);   
  2609.   }
  2610.   
  2611.   let lastTimeout;
  2613.   function animate() {
  2614.     if (curStep >= 4) {
  2615.       curStep = 0;
  2616.       return;
  2617.     }
  2619.     open = true;
  2620.     setStep(curStep);    
  2621.     curStep++;
  2622.     lastTimeout = setTimeout(animate, delay);
  2623.   }
  2625.   \$toggle.on(\"click\", function() {
  2626.     if (!open) animate();
  2627.     else {
  2628.       \$buttons.removeClass(\"step-1 step-0 step-3 step-2\");
  2629.       clearTimeout(lastTimeout);
  2630.       open = false;
  2631.       curStep = 0;
  2632.     }
  2633.   });
  2634. });
  2635. {% endblock %}", "Theme/Produit/Produit/Produit/programmefinnacement.html.twig", "/home/afhunt/domains/factory.afhunt.com/public_html/factory/templates/Theme/Produit/Produit/Produit/programmefinnacement.html.twig");
  2636.     }
  2637. }