var/cache/dev/twig/84/8408706ecf03503a2beadb92354b8e942b8bb72daa7e99010cafa0179be0be92.php line 41

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/businessretenu.html.twig */
  16. class __TwigTemplate_19f9a1de08802a36c037cfa43745e0e7c576fc5b35b399e09e731e250e770ad4 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/businessretenu.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/businessretenu.html.twig"));
  50.         $this->parent = $this->loadTemplate("Theme/Users/User/layoutoffert.html.twig", "Theme/Produit/Produit/Produit/businessretenu.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 "
  72. \t";
  73.         // line 4
  74.         $this->displayParentBlock("meta", $context, $blocks);
  75.         echo "
  76. \t<meta name=\"keywords\" content=\"";
  77.         // line 5
  78.         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.', 5, $this->source); })()), "html", null, true);
  79.         echo ", ";
  80.         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.', 5, $this->source); })()), "html", null, true);
  81.         echo "\"/>
  82. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  83. \t<meta name=\"description\" content=\"";
  84.         // line 7
  85.         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.', 7, $this->source); })()), "html", null, true);
  86.         echo " - ";
  87.         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.', 7, $this->source); })()), "nom", [], "any", false, false, false, 7), "html", null, true);
  88.         echo "\"/>
  89. \t
  90. ";
  91.         
  92.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  94.         
  95.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  97.     }
  99.     // line 11
  100.     public function block_title($context, array $blocks = [])
  101.     {
  102.         $macros = $this->macros;
  103.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  104.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  106.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  107.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  109.         // line 12
  110.         echo "\t";
  111.         $this->displayParentBlock("title", $context, $blocks);
  112.         echo " - ";
  113.         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.', 12, $this->source); })()), "nom", [], "any", false, false, false, 12), "html", null, true);
  114.         echo "
  115. ";
  116.         
  117.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  119.         
  120.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  122.     }
  124.     // line 15
  125.     public function block_userblog_body($context, array $blocks = [])
  126.     {
  127.         $macros = $this->macros;
  128.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  129.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  131.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  132.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  134.         // line 16
  135.         echo "<style>
  136. \t.mzp-c-details .is-summary button:before, details .is-summary button:before, summary:before{
  137. \t\tdisplay: none!important;
  138. \t}
  139. </style>
  140. <div style=\"background: #90acd1; min-height: 200px;\">
  141. <div class=\"container\" style=\"overflow: hidden;\">
  142. \t<div class=\"row\" style=\"margin-top: 15px;\">
  143. \t<div class=\"col-md-8\">
  144. \t";
  145.         // line 25
  146.         if ($this->extensions['App\Service\Servicetext\TwigExtensions']->is_mobile()) {
  147.             // line 26
  148.             echo "\t<ol class=\"c-navigation-breadcrumbs__directory\">
  149. \t\t<!-- Duplicating the \"Home\" link in both the global navigation and the breadcrumb trail is not recommended. -->
  150. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  151. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  152. \t\t\t<span class=\"u-visually-hidden\" property=\"name\"><span class=\"fa fa-home\"> </span> Accueil</span>
  153. \t\t  </a>
  154. \t\t  <meta property=\"position\" content=\"1\">
  155. \t\t</li>
  157. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  158. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  159. \t\t\t<span property=\"name\"> L'entreprise</span>
  160. \t\t  </a>
  161. \t\t  <meta property=\"position\" content=\"2\">
  162. \t\t</li>
  164. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  165. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"#!\" property=\"item\" aria-current=\"location\">
  166. \t\t\t<span property=\"name\">À propos de  nous </span>
  167. \t\t  </a>
  168. \t\t  <meta property=\"position\" content=\"3\">
  169. \t\t</li>
  170. \t</ol>
  171. \t";
  172.         } else {
  173.             // line 50
  174.             echo "\t<div style=\"padding: 20px 0px;\">
  175. \t\t<ul class=\"breadcrumbs\">
  176. \t\t  <li><a href=\"";
  177.             // line 52
  178.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("users_user_acces_plateforme");
  179.             echo "\"><span class=\"fa fa-home\"></span> Accueil</a></li>
  180. \t\t  <li><a > L'entreprise</a></li>
  181. \t\t  <li>À propos de nous</li>
  182. \t\t</ul>
  183. \t</div>
  184. \t";
  185.         }
  186.         // line 58
  187.         echo "\t
  188. \t<div>
  189. \t\t<h2 style=\"color: #fff;\">";
  190.         // line 60
  191.         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); })()), "nom", [], "any", false, false, false, 60), "html", null, true);
  192.         echo "</h2>
  193. \t\t<div style=\"color: #fff;\">";
  194.         // line 61
  195.         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.', 61, $this->source); })()), "description", [], "any", false, false, false, 61), "html", null, true);
  196.         echo "</div>
  197.     </div>
  198.   </div>
  199.   
  200. \t<!-- div class=\"col-md-4\">
  201. \t\t<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\" class=\"my-svg\">
  202. \t\t  <defs>
  203. \t\t\t<filter id=\"goo\">
  204. \t\t\t  <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" />
  205. \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\" />
  206. \t\t\t  <feBlend in=\"SourceGraphic\" in2=\"goo\" />
  207. \t\t\t</filter>
  208. \t\t  </defs>
  209. \t\t</svg>
  210. \t\t<div class=\"demo\">
  211. \t\t  <div class=\"demo__buttons\">
  212. \t\t\t<div class=\"demo__social-btn-4 demo__social-btn\"><i class=\"fa fa-snapchat\"></i></div>
  213. \t\t\t<div class=\"demo__social-btn-3 demo__social-btn\"><i class=\"fa fa-instagram\"></i></div>
  214. \t\t\t<div class=\"demo__social-btn-2 demo__social-btn\"><i class=\"fa fa-facebook\"></i></div>
  215. \t\t\t<div class=\"demo__social-btn-1 demo__social-btn\"><i class=\"fa fa-twitter\"></i></div>
  216. \t\t\t<div class=\"demo__open-btn\"><i class=\"fa fa-share-alt\"></i></div>
  217. \t\t  </div>
  218. \t\t  <h2 class=\"text-center\" style=\"color: #fff;\">Share and win</h2>
  219. \t\t</div>
  220. \t</div -->
  221.   
  222.   </div>
  224.   
  225. </div>
  226. </div>
  228. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); background: #f2f2f2;\">
  229. \t<div class=\"container\" style=\"height: 100px;\">
  230. \t  
  231. \t</div>
  232. </div>
  234. <style>
  235. \t.brand-wrap {
  236. \t  position: relative;
  237. \t  z-index: 2;
  238. \t}
  239. \t
  240. \t@media (max-width: 991px) {
  241. \t\t.brand-wrap {
  242. \t\t  padding: 20px 0;
  243. \t\t} 
  244. \t}
  245. \t
  246. \t.brand-wrap .owl-carousel .owl-item img {
  247. \t\twidth: auto !important; 
  248. \t}
  249. \t
  250. \t.brand-wrap .single-brand {
  251. \t\ttext-align: center;
  252. \t\t-webkit-filter: grayscale(100%);
  253. \t\t-moz-filter: grayscale(100%);
  254. \t\t-ms-filter: grayscale(100%);
  255. \t\t-o-filter: grayscale(100%);
  256. \t\tfilter: grayscale(100%);
  257. \t\topacity: .5;
  258. \t\t-webkit-transition: all 0.3s ease 0s;
  259. \t\t-moz-transition: all 0.3s ease 0s;
  260. \t\t-o-transition: all 0.3s ease 0s;
  261. \t\ttransition: all 0.3s ease 0s; 
  262. \t}
  263. \t
  264. \t.brand-wrap .single-brand:hover{
  265. \t  -webkit-filter: grayscale(0%);
  266. \t  -moz-filter: grayscale(0%);
  267. \t  -ms-filter: grayscale(0%);
  268. \t  -o-filter: grayscale(0%);
  269. \t  filter: grayscale(0%);
  270. \t  opacity: 1; 
  271. \t }
  272. </style>
  274. <div style=\"background: transparent; margin-bottom: -140px;\">
  275. <div class=\"container\" style=\"background: transparent;\">
  277.   <div class=\"row\" style=\"margin-top: 25px; background: transparent;\">
  278. \t<div class=\"col-md-12\">
  279. \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;\">
  281. \t\t<h2>Services</h2>
  282. \t\t<div class=\"boxC12\">
  283. \t\t\t
  284. \t\t\t<details>
  285. \t\t\t\t<summary>
  286. \t\t\t\t<p> service.nom </p><span class=\"plusminus\"></span>
  287. \t\t\t\t</summary>
  288. \t\t\t\t<p>
  289. \t\t\t\t\t\tservice.description|raw
  290. \t\t\t\t
  291. \t\t\t\t\t
  292. \t\t\t\t\t<div class=\"box\">
  293. \t\t\t\t\t\t<div class=\"title-bold\">
  294. \t\t\t\t\t\t\t<span> scat.nom </span>
  295. \t\t\t\t\t\t</div>
  296. \t\t\t\t\t\t<div class=\"inner-profile\">
  297. \t\t\t\t\t\t\t\tscat.description|raw 
  298. \t\t\t\t\t\t</div>
  299. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  300. \t\t\t\t\t</div>
  302. \t\t\t\t</p>
  303. \t\t\t</details>
  305. \t\t</div>
  307. \t</div>
  308. \t</div>
  309.   </div>
  310.   
  311. </div>
  312. </div>
  314. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); margin-bottom: 30px;\">
  315. \t<div class=\"container\" style=\"padding-top: 25px; padding-bottom: 25px;\">
  316. \t   
  317. \t\t<section style=\"margin-top: -20px;\">
  318. \t\t\t<div style=\"width: 100%; margin: 0px auto;\">
  319. \t\t\t<link href=\"";
  320.         // line 184
  321.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/tyfy.css"), "html", null, true);
  322.         echo "\" rel=\"stylesheet\"/>
  323. \t\t\t<style>
  324. \t\t\t  div.demotabs {
  325. \t\t\t\tborder: 2px dashed #e6e6e6;
  326. \t\t\t\tborder-radius: .8125rem;
  327. \t\t\t\tbox-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  328. \t\t\t\tmargin-top: 1.625rem;
  329. \t\t\t\tpadding: 15px;
  330. \t\t\t\tbackground: #fff;
  331. \t\t\t  }
  332. \t\t\t  .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  333. \t\t\t</style>
  334. \t\t\t
  335. \t\t\t
  336. \t\t\t<div class=\"demotabs\">
  337. \t\t\t\t<div class=\"mzp-l-content\">
  338. \t\t\t  <div class=\"links-underlined\">
  339. \t\t\t\t  <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  340. \t\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>
  341. \t\t\t  </div>
  342. \t\t\t  <div class=\"tabs-container\">
  343. \t\t\t\t  <h2 class=\"tab-label\">Présentation</h2>
  344. \t\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>
  345. \t\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>
  346. \t\t\t\t  
  347. \t\t\t\t  <h2 class=\"tab-label collapsed\">Eligibilité</h2>
  348. \t\t\t\t  <p>Facilis error corrupti dolor eaque. 
  349. \t\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>
  350. \t\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>
  351. \t\t\t\t  
  352. \t\t\t\t  <h2 class=\"tab-label collapsed\">Rapport</h2>
  353. \t\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>
  354. \t\t\t\t  
  355. \t\t\t\t  <h2 class=\"tab-label collapsed\">Historique</h2>
  356. \t\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>
  357. \t\t\t\t  
  358. \t\t\t  </div>
  359. \t\t\t
  360. \t\t\t<h2>Notes</h2>
  361. \t\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>
  362. \t\t  </div>
  363. \t\t  </div>
  364. \t\t\t
  365. \t\t  <script>
  366. \t\t\t  \$(document).ready(function(){
  367. \t\t
  368. \t\t\t\tGoToAnchor = function(){
  369. \t\t\t\t  // find the anchor and any tab it might be in
  370. \t\t\t\t  selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  371. \t\t\t\t\t  selected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  372. \t\t\t\t  parent_tab = selected_anchor.parents('.tab-panel');
  373. \t\t\t\t  // account for an anchor in a label
  374. \t\t\t\t  parent_label = selected_anchor.parents('.tab-label');
  375. \t\t\t\t  if (parent_label.length) {
  376. \t\t\t\t\tparent_tab = parent_label.next('.tab-panel');
  377. \t\t\t\t  }
  378. \t\t\t\t  // do the steps of this function only if we have an anchor link and a tab panel
  379. \t\t\t\t  if (selected_anchor.length && parent_tab.length) {
  380. \t\t\t\t\tparent_tab_label = parent_tab.prev('.tab-label');
  381. \t\t\t\t\t\tparent_tab_index = parent_tab_label.attr('data-tabindex');
  382. \t\t\t\t\tparent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  383. \t\t\t\t\tif (parent_tab.hasClass('collapsed')) {
  384. \t\t\t\t\t  parent_tab.removeClass('collapsed');
  385. \t\t\t\t\t  parent_tab_label.removeClass('collapsed');
  386. \t\t\t\t\t}
  387. \t\t\t\t\t// scroll to the anchor
  388. \t\t\t\t\tvar s = selected_anchor.offset().top - 50; // console.log(s);
  389. \t\t\t\t\t\$('body,html').animate({'scrollTop':s},500,'swing');
  390. \t\t\t\t\t  }
  391. \t\t\t\t};
  392. \t\t\t\t
  393. \t\t\t\t// prepare HTML structure for each tab container
  394. \t\t\t\t\$('.tabs-container').each(function(){
  395. \t\t\t\t  if (!\$(this).hasClass('tabs-processed')) {
  396. \t\t\t\t\t// find the headings that are tab labels
  397. \t\t\t\t\tmy_tablabels = \$(this).find('.tab-label');
  398. \t\t\t\t\t// create tabs
  399. \t\t\t\t\tif (\$(this).find('ul.tabs').length === 0) {
  400. \t\t\t\t\t  \$(this).prepend('<ul class=\"tabs\"></ul>');
  401. \t\t\t\t\t  var x;
  402. \t\t\t\t\t  for (x=0;x<my_tablabels.length;x++) {
  403. \t\t\t\t\t\t\$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  404. \t\t\t\t\t  }
  405. \t\t\t\t\t}
  406. \t\t\t\t\t// structure all labels and wrap all tab panels
  407. \t\t\t\t\tif (\$(this).find('.tab-panel').length === 0) {
  408. \t\t\t\t\t  my_tablabels.each(function(i){
  409. \t\t\t\t\t\t\$(this).attr('data-tabindex',i);
  410. \t\t\t\t\t\t\$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  411. \t\t\t\t\t\tkids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  412. \t\t\t\t\t\t// default state class for when tabs are collapsable sections
  413. \t\t\t\t\t\t\$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  414. \t\t\t\t\t  });    
  415. \t\t\t\t\t}
  416. \t\t\t\t\t// open initial tab
  417. \t\t\t\t\t\$(this).find('ul.tabs li').eq(0).addClass('open');
  418. \t\t\t\t\tmy_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  419. \t\t\t\t\t// tab click events
  420. \t\t\t\t\t\$('.tabs-container ul.tabs li').each(function(i){
  421. \t\t\t\t\t  \$(this).click(function(){
  422. \t\t\t\t\t\tif (!\$(this).hasClass('open')) {
  423. \t\t\t\t\t\t  \$('.tabs-container .open').removeClass('open');
  424. \t\t\t\t\t\t  my_tabindex = \$(this).attr('data-tabindex');
  425. \t\t\t\t\t\t  \$(this).addClass('open');
  426. \t\t\t\t\t\t  \$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  427. \t\t\t\t\t\t  \$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  428. \t\t\t\t\t\t}
  429. \t\t\t\t\t  });
  430. \t\t\t\t\t});
  431. \t\t\t\t\t// collapsable header click event
  432. \t\t\t\t\t\$('.tabs-container .tab-label').click(function(){
  433. \t\t\t\t\t  if (!\$(this).hasClass('transition')) {
  434. \t\t\t\t\t\tkids = \$(this).next('.tab-panel');
  435. \t\t\t\t\t\tkids.removeClass('collapsed');
  436. \t\t\t\t\t\tvar fullHeight = kids.outerHeight();
  437. \t\t\t\t\t\t\$(this).addClass('transition');
  438. \t\t\t\t\t\tkids.addClass('transition');
  439. \t\t\t\t\t\tif (\$(this).hasClass('collapsed')) {
  440. \t\t\t\t\t\t  kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  441. \t\t\t\t\t\t\theight:fullHeight+'px',
  442. \t\t\t\t\t\t\tpaddingBottom:'32px',
  443. \t\t\t\t\t\t\tpaddingTop:'16px',
  444. \t\t\t\t\t\t  },500,function(){
  445. \t\t\t\t\t\t\t\$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  446. \t\t\t\t\t\t  });
  447. \t\t\t\t\t\t}
  448. \t\t\t\t\t\telse {
  449. \t\t\t\t\t\t  kids.css('height',fullHeight+'px').animate({
  450. \t\t\t\t\t\t\theight:'0px',
  451. \t\t\t\t\t\t\tpaddingBottom:'0px',
  452. \t\t\t\t\t\t\tpaddingTop:'0px',
  453. \t\t\t\t\t\t  },500,function(){
  454. \t\t\t\t\t\t\t\$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  455. \t\t\t\t\t\t  });
  456. \t\t\t\t\t\t}
  457. \t\t\t\t\t  }
  458. \t\t\t\t\t}); 
  459. \t\t\t\t\t// indicate state of readiness
  460. \t\t\t\t\t\$(this).addClass('tabs-processed');
  461. \t\t\t\t  }  
  462. \t\t\t\t});
  463. \t\t\t\t// if there are tabs and someone has linked to an anchor inside a tab
  464. \t\t\t\tconsole.log(window.location.hash);
  465. \t\t\t\tif (window.location.hash != '') {
  466. \t\t\t\t  GoToAnchor();
  467. \t\t\t\t}
  468. \t\t\t\t// handle case when page is already loaded
  469. \t\t\t\t\$(window).on('hashchange',function(){
  470. \t\t\t\t  GoToAnchor();
  471. \t\t\t\t});
  472. \t\t\t  });
  473. \t\t\t</script>
  474. \t\t\t</div>
  475. \t\t</section>
  476. \t
  477. \t</div>
  478. \t</div>
  481. <style>
  484. body {
  485. /* Colors */
  486. \t--color-blue-50: #0a84ff;
  487. \t--color-blue-60: #0060df;
  488. \t--color-blue-70: #003eaa;
  489. \t--color-blue-80: #002275;
  490. \t--color-gray-10: #f9f9fa;
  491. \t--color-gray-20: #ededf0;
  492. \t--color-gray-30: #d7d7db;
  493. \t--color-gray-40: #b1b1b3;
  494. \t--color-gray-50: #737373;
  495. \t--color-gray-60: #4a4a4f;
  496. \t--color-gray-70: #38383d;
  497. \t--color-gray-80: #2a2a2e;
  498. \t--color-gray-90: #0c0c0d;
  499. \t--color-green-70: #058b00;
  500. \t--color-teal-50: #00feff;
  501. \t--color-teal-60: #00c8d7;
  502. \t--color-teal-70: #008ea4;
  504. /* Icons */
  505. \t--icon-context-menu: url(";
  506.         // line 367
  507.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/twitter.png"), "html", null, true);
  508.         echo ");
  509. \t--icon-dismiss: url(";
  510.         // line 368
  511.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/twitter.png"), "html", null, true);
  512.         echo ");
  514.   --background-color: #F9F9FA;
  515.   --border-primary-color: #B1B1B3;
  517. /* Primary Action */
  518.   --primary-action-default: var(--color-blue-60);
  519.   --primary-action-hover: var(--color-blue-70);
  520.   --primary-action-active: var(--color-blue-80);
  521.   --primary-action-text-color: #fff;
  523. /* Secondary Action */
  524.   --secondary-action-default: var(--color-gray-20);
  525.   --secondary-action-hover: var(--color-gray-30);
  526.   --secondary-action-active: var(--color-gray-40);
  527.   --secondary-action-text-color: var(--color-gray-80);
  529. /* Ghost Action */
  530. \t--ghost-action-hover: var(--color-gray-20);
  531. \t--ghost-action-active: var(--color-gray-30);
  532. \t--ghost-action-text-color: var(--color-gray-80);
  534. /* Forms */
  535. \t--label-text-color: var(--text-secondary);
  536. \t--text-field-border-color: var(--color-gray-30);
  537. \t--text-field-hover-border-color: var(--color-gray-40);
  538. \t--text-field-focus-border-color: var(--color-gray-40);
  539. \t--text-field-bg-color: #fff;
  540. /* Focus */
  541.   --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 132, 255, 0.5);
  543. /* Cards */
  544.   --rasied-card-bg-color: #FFF;
  545.   --rasied-card-border-radius: 8px;
  546.   --box-shadow-10: 0px 0px 8px 0 rgba(12, 12, 13, 0.05);
  547.   --raised-card-hover: 0 0 0 4px var(--secondary-action-default);
  548.     
  549.   /* Typography */
  550.   --base-font-size: 15px;
  551.   --small-font-size: 13px;
  552.   --base-line-height: 24px;
  553.   
  554.   /* Text Colors */
  555.   --text-primary: var(--color-gray-90);
  556.   --text-secondary: var(--color-gray-50);
  557. }
  561. .meta {
  562. \tcolor: var(--text-secondary);
  563. \tfont-size: var(--small-font-size);
  564. \tline-height: var(--base-line-height);
  565. }
  567. .small {
  568. \tfont-size: var(--small-font-size);
  569. \tline-height: 20px;
  570. }
  572. .text-muted {
  573. \tcolor: var(--text-secondary);
  574. }
  576. .sr-only {
  577. \tdisplay: none;
  578. }
  580. /* Default Link */
  581. a {
  582. \t background-color: transparent;
  583. \t color: var(--color-blue-60);
  584. \t text-decoration: none;
  585. }
  586. a:hover {
  587. \ttext-decoration: underline;
  588. }
  589. a:active {
  590. \tcolor: var(--color-blue-70);
  591. \ttext-decoration:underline;
  592. }
  593. a:focus {
  594. \tbox-shadow: ;
  595. }
  596. a:not([href]):not([tabindex]) {
  597. \tcolor: inherit;
  598. \ttext-decoration: none;
  599. }
  601. /* Buttons */
  602. .btn {
  603. \tborder: none;
  604. \tcursor: pointer;
  605. \tfont-weight: 500;
  606. \ttransition: background-color 150ms, transform 150ms;
  607. \ttransition-duration: 150ms;
  608. }
  610. .btn:active {
  611. \ttransform: scale(0.97);
  612. }
  614. .btn:focus {
  615. \tbox-shadow: var(--focus-box-shadow);
  616. }
  618. .btn.disabled {
  619. \tcursor: default;
  620. \topacity: 0.4;
  621. }
  623. /* Primary Button */
  624. .btn--primary {
  625. \tbackground-color: var(--primary-action-default);
  626. \tcolor: var(--primary-action-text-color);
  627. \tfill: var(--primary-action-text-color);
  628. \t-moz-context-properties: fill;
  629. }
  631. .btn--primary:hover {
  632. \tbackground-color: var(--primary-action-hover);
  633. }
  635. .btn--primary:active {
  636. \tbackground-color: var(--primary-action-active);
  637. }
  639. .btn--primary:disabled,
  640. .btn--primary.disabled {
  641. \tbackground-color: var(--primary-action-default);
  642. \tcolor: var(--primary-action-text-color);
  643. \tfill: var(--primary-action-text-color);
  644. \t-moz-context-properties: fill;
  645. }
  647. /* Secondary Button */
  648. .btn--secondary {
  649. \tbackground-color: var(--secondary-action-default);
  650. \tcolor: var(--secondary-action-text-color);
  651. \tfill: var(--secondary-action-text-color);
  652. \t-moz-context-properties: fill;
  653. }
  655. .btn--secondary:hover {
  656. \tbackground-color: var(--secondary-action-hover);
  657. }
  659. .btn--secondary:active {
  660. \tbackground-color: var(--secondary-action-active);
  661. }
  663. .btn--secondary:disabled,
  664. .btn--secondary.disabled {
  665. \tbackground-color: var(--secondary-action-default);
  666. \tcolor: var(--secondary-action-text-color);
  667. \tfill: var(--secondary-action-text-color);
  668. \t-moz-context-properties: fill;
  669. }
  671. /* Pill Button */
  672. .btn--pill {
  673. \tborder-radius: 16px;
  674. \tline-height: 32px;
  675. \tmin-height: 32px;
  676. \tpadding: 0 16px;
  677. \tvertical-align: middle;
  678. }
  680. .btn--pill-icon-only {
  681. \tbackground-position: 50%;
  682. \tbackground-repeat: no-repeat;
  683. \tbackground-size: 16px;
  684. \twidth: 32px;
  685. }
  687. /* Form Button */
  688. .btn--form {
  689. \tborder-radius: 4px;
  690. \tmin-height: 40px;
  691. \tmin-width: 96px;
  692. \tpadding: 0 8px;
  693. }
  695. /* Ghost Button */
  696. .btn--ghost {
  697. \tbackground-color: transparent;
  698. \tcolor: var(--ghost-action-text-color);
  699. \tfill: var(--ghost-action-text-color);
  700. \t-moz-context-properties: fill;
  701. }
  703. .btn--ghost:hover {
  704. \tbackground-color: var(--ghost-action-hover);
  705. }
  707. .btn--ghost:active {
  708. \tbackground-color: var(--ghost-action-active);
  709. }
  711. .btn--ghost:disabled,
  712. .btn--ghost.disabled {
  713. \tbackground-color: transparent;
  714. \tcolor: var(--ghost-action-text-color);
  715. \tfill: var(--ghost-action-text-color);
  716. \t-moz-context-properties: fill;
  717. }
  721. .card .context-menu-btn {
  722. \topacity: 0;
  723. \tposition: absolute;
  724. \tright: -16px;
  725. \ttop: -16px;
  726. \ttransform: scale(0.25);
  727. \ttransition-duration: 150ms;
  728. \ttransition-property: transform, opacity;\t
  729. }
  731. /* Cards */
  732. .card-raised {
  733. \tbackground: var(--rasied-card-bg-color);
  734. \tborder-radius: var(--rasied-card-border-radius);
  735. \tborder: 1px inset rgba(12, 12, 13, 0.07);
  736. \tbox-shadow: var(--box-shadow-10);
  737. \ttransition: box-shadow 250ms, transform 150ms;
  738. \tposition: relative;
  739. }
  741. .card-raised:hover {
  742. \tbox-shadow: var(--box-shadow-10), var(--raised-card-hover);\t
  743. }
  746. .card-raised:hover .context-menu-btn {
  747.     opacity: 1;
  748.     transform: scale(1);
  749.     transition-delay: 200ms;
  750. }
  752. .card-raised:hover .title {
  753. \tcolor: var(--primary-action-default);
  754. \ttext-decoration: underline;
  755. \tcursor: pointer;
  756. }
  758. .card-raised:active {\t
  759. \ttransform: scale(0.97);
  760. }
  762. .card-raised:focus {
  763. \tbox-shadow: var(--box-shadow-10), 0 0 0 3px #fff, 0 0 0 6px rgba(10, 132, 255, 0.5);
  764. }
  766. /*
  767. .card-img {
  768. \tborder: 1px inset rgba(0, 0, 0, 0.15);
  769. }
  770. */
  772. .card-raised .card-img-top {
  773. \tborder-top-left-radius: var(--rasied-card-border-radius);
  774. \tborder-top-right-radius: var(--rasied-card-border-radius);
  775. }
  777. .card-body {
  778. \tpadding: 12px 16px;
  779. }
  781. .card-footer {
  782. \tpadding: 12px 16px;
  783. }
  786. /* Snippet */
  787. .snippet {
  788. \tbackground-color: #fff;
  789. \tbottom: 0;
  790. \tbox-shadow: var(--box-shadow-10);
  791. \tpadding: 24px 0;
  792. \tposition: fixed;
  793. \twidth: 100%;
  794. \tz-index: 200;
  795. }
  797. .snippet .wrapper {
  798. \tdisplay: flex;
  799. }
  801. .snippet-promo-image,
  802. .snippet-content {
  803. \tmargin-right: 24px;
  804. }
  806. .snippet-promo-image img {
  807. \twidth: 48px;
  808. }
  810. .snippet-content {
  811. \tflex-grow: 1;
  812. }
  814. .snippet-content .body {
  815. \tmax-width: 600px;\t
  816. }
  818. .snippet .btn {
  819. \theight: 32px;\t
  820. }
  822. .icon-dark-theme {
  823. \tdisplay: none;
  824. }
  826. .search-wrapper {
  827.   padding: 24px 0; }
  828.   .only-search .search-wrapper {
  829.     padding: 0 0 64px; }
  830.   .search-wrapper .logo-and-wordmark {
  831.     align-items: center;
  832.     display: flex;
  833.     justify-content: center;
  834.     margin-bottom: 49px; }
  835.     .search-wrapper .logo-and-wordmark .logo {
  836.       background: url(\"chrome://branding/content/icon128.png\") no-repeat center center;
  837.       background-size: 97px;
  838.       display: inline-block;
  839.       height: 97px;
  840.       width: 97px; }
  841.     .search-wrapper .logo-and-wordmark .wordmark {
  842.       background: url(\"../data/content/assets/firefox-wordmark.svg\") no-repeat center center;
  843.       background-size: 142px;
  844.       -moz-context-properties: fill;
  845.       display: inline-block;
  846.       fill: var(--search-wordmark-color);
  847.       height: 97px;
  848.       margin-inline-start: 15px;
  849.       width: 142px; }
  850.     @media (max-width: 609px) {
  851.       .search-wrapper .logo-and-wordmark .logo {
  852.         background-size: 64px;
  853.         height: 64px;
  854.         width: 64px; }
  855.       .search-wrapper .logo-and-wordmark .wordmark {
  856.         background-size: 100px;
  857.         height: 64px;
  858.         width: 100px; } }
  859.   
  860.   .search-wrapper .search-inner-wrapper {
  861.     cursor: default;
  862.     display: flex;
  863.     height: 48px;
  864.     margin: 0 auto;
  865.     position: relative;
  866.     width: 224px; }
  867.     @media (min-width: 610px) {
  868.       .search-wrapper .search-inner-wrapper {
  869.         width: 480px; } }
  870.     @media (min-width: 866px) {
  871.       .search-wrapper .search-inner-wrapper {
  872.         width: 736px; } }
  873.   
  874.   .search-wrapper input {
  875.     background: var(--text-field-bg-color) /* var(--search-icon) 12px center no-repeat */;
  876.     background-size: 24px;
  877.     border: solid 1px var(--text-field-border-color);
  878.     border-radius: 4px;
  879. /*     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); */
  880.     font-size: 15px;
  881.     -moz-context-properties: fill;
  882.     fill: var(--search-icon-color);
  883.     padding: 0;
  884.     padding-inline-end: 48px;
  885.     padding-inline-start: 46px;
  886.     width: 100%; }
  887.     
  888.     .search-wrapper input:dir(rtl) {
  889.       background-position-x: right 12px; }
  890.   
  891. /*
  892.   .search-wrapper:hover input {
  893.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  894. */
  895.   
  896.   .search-wrapper .search-inner-wrapper:active input,
  897.   .search-wrapper input:focus {
  898.     border: 1px solid var(--text-field-focus-border-color);
  899.     box-shadow: var(--focus-box-shadow); }
  900.   
  901.   .search-wrapper .search-button {
  902.     background: url(\"chrome://browser/skin/forward.svg\") no-repeat center center;
  903.     background-size: 16px 16px;
  904.     border: 0;
  905.     border-radius: 0 3px 3px 0;
  906.     -moz-context-properties: fill;
  907.     fill: var(--search-icon-color);
  908.     height: 100%;
  909.     inset-inline-end: 0;
  910.     position: absolute;
  911.     width: 48px; }
  912.     .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
  913.       background-color: rgba(12, 12, 13, 0.1);
  914.       cursor: pointer; }
  915.     .search-wrapper .search-button:active {
  916.       background-color: rgba(12, 12, 13, 0.2); }
  917.     .search-wrapper .search-button:dir(rtl) {
  918.       transform: scaleX(-1); }
  920. .non-collapsible-section + .below-search-snippet-wrapper {
  921.   margin-top: -48px; }
  923. @media (max-height: 700px) {
  924. /*
  925.   .search-wrapper {
  926.     padding: 0 0 30px; }
  927. */
  928.   .non-collapsible-section + .below-search-snippet-wrapper {
  929.     margin-top: -14px; }
  930.   .below-search-snippet-wrapper {
  931.     min-height: 0; } }
  933. .search-handoff-button {
  934.   background: var(--textbox-background-color) var(--search-icon) 12px center no-repeat;
  935.   background-size: 24px;
  936.   border: solid 1px var(--search-border-color);
  937.   border-radius: 3px;
  938.   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
  939.   cursor: text;
  940.   font-size: 15px;
  941.   padding: 0;
  942.   padding-inline-end: 48px;
  943.   padding-inline-start: 46px;
  944.   opacity: 1;
  945.   transition: opacity 500ms;
  946.   width: 100%; }
  947.   .search-handoff-button:dir(rtl) {
  948.     background-position-x: right 12px; }
  949.   .search-handoff-button:hover {
  950.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  951.   .fake-focus .search-handoff-button {
  952.     border: 1px solid var(--textbox-focus-color);
  953.     box-shadow: var(--textbox-focus-boxshadow); }
  954.     .fake-focus .search-handoff-button .fake-caret {
  955.       display: block; }
  956.   .search-hidden .search-handoff-button {
  957.     opacity: 0;
  958.     visibility: hidden; }
  959.   .search-handoff-button .fake-editable:focus {
  960.     outline: none;
  961.     caret-color: transparent; }
  962.   .search-handoff-button .fake-editable {
  963.     color: transparent;
  964.     height: 100%;
  965.     opacity: 0;
  966.     position: absolute;
  967.     top: 0;
  968.     left: 0;
  969.     right: 0;
  970.     bottom: 0; }
  971.   .search-handoff-button .fake-textbox {
  972.     opacity: 0.54;
  973.     text-align: start; }
  974.   .search-handoff-button .fake-caret {
  975.     animation: caret-animation 1.3s steps(5, start) infinite;
  976.     background: var(--text-primary-color);
  977.     display: none;
  978.     inset-inline-start: 47px;
  979.     height: 17px;
  980.     position: absolute;
  981.     top: 16px;
  982.     width: 1px; }
  984. @keyframes caret-animation {
  985.   to {
  986.     visibility: hidden; } }
  988. @media (min-height: 701px) {
  989.   body:not(.inline-onboarding) .fixed-search main {
  990.     padding-top: 146px; }
  991.   body:not(.inline-onboarding) .fixed-search .search-wrapper {
  992.     background-color: var(--search-header-background-color);
  993.     border-bottom: solid 1px var(--border-secondary-color);
  994.     height: 95px;
  995.     left: 0;
  996.     padding: 30px 0;
  997.     position: fixed;
  998.     top: 0;
  999.     width: 100%;
  1000.     z-index: 9; }
  1001.     body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
  1002.       height: 35px; }
  1003.     body:not(.inline-onboarding) .fixed-search .search-wrapper input {
  1004.       background-position-x: 16px;
  1005.       background-size: 16px; }
  1006.       body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
  1007.         background-position-x: right 16px; }
  1008.   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
  1009.     background-position-x: 12px;
  1010.     background-size: 24px; }
  1011.     body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
  1012.       background-position-x: right 12px; }
  1013.     body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
  1014.       top: 10px; } }
  1016. .contentSearchSuggestionTable {
  1017.   background-color: var(--search-dropdown-color);
  1018.   border: 0;
  1019.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
  1020.   transform: translateY(4px); }
  1021.   .contentSearchSuggestionTable .contentSearchHeader {
  1022.     background-color: var(--search-dropdown-header-color);
  1023.     color: var(--text-secondary-color); }
  1024.   .contentSearchSuggestionTable .contentSearchHeader,
  1025.   .contentSearchSuggestionTable .contentSearchSettingsButton {
  1026.     border-color: var(--border-secondary-color); }
  1027.   .contentSearchSuggestionTable .contentSearchSuggestionsList {
  1028.     border: 0; }
  1029.   .contentSearchSuggestionTable .contentSearchOneOffsTable {
  1030.     background-color: var(--search-dropdown-header-color);
  1031.     border-top: solid 1px var(--border-secondary-color); }
  1032.   .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
  1033.     color: var(--text-primary-color); }
  1034.   .contentSearchSuggestionTable .contentSearchSuggestionsContainer {
  1035.     background-color: var(--search-dropdown-color); }
  1036.   .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
  1037.     background: var(--element-hover-color);
  1038.     color: var(--text-primary-color); }
  1039.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
  1040.       background: var(--element-active-color); }
  1041.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
  1042.       fill: var(--icon-secondary-color); }
  1043.   .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer {
  1044.     background-color: var(--search-dropdown-header-color); }
  1045.   .contentSearchSuggestionTable .contentSearchOneOffItem {
  1046.     background-image: none;
  1047.     border-image: linear-gradient(transparent 18%, var(--border-secondary-color) 18%, var(--border-secondary-color) 82%, transparent 82%) 1;
  1048.     border-inline-end: 1px solid;
  1049.     position: relative; }
  1050.     .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  1051.       background: var(--element-hover-color); }
  1052.     .contentSearchSuggestionTable .contentSearchOneOffItem:active {
  1053.       background: var(--element-active-color); }
  1054.   .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
  1055.     background: var(--element-hover-color);
  1056.     color: var(--text-primary-color); }
  1058. .contentSearchHeaderRow > td > img,
  1059. .contentSearchSuggestionRow > td > .historyIcon{
  1060.   margin-inline-start: 7px;
  1061.   margin-inline-end: 15px;
  1062. }
  1063. </style>
  1066. <section class=\"news-section\">
  1068. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  1069. \t\t\t\t<div class=\"text-left\">
  1070. \t\t\t\t\t<h3>
  1071. \t\t\t\t\t\tNos programmes
  1072. \t\t\t\t\t</h3>
  1073. \t\t\t\t\t
  1074. \t\t\t\t\t<div>
  1075. \t\t\t\t\t\tLa transparence 
  1076. \t\t\t\t\t</div>
  1077. \t\t\t\t</div>
  1079. \t\t\t\t   <div class=\"row posts-list\">
  1081. \t\t\t  
  1082. \t\t\t\t\t   <!--Single Blog Start-->
  1083. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1085. \t\t\t\t\t\t<article>
  1086. \t\t\t\t\t\t\t<div class=\"post-img\">
  1087. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1088. \t\t\t\t\t\t\t</div>
  1089. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1090. \t\t\t\t\t\t\t<h2 class=\"title\">
  1091. \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>
  1092. \t\t\t\t\t\t\t</h2>
  1093. \t\t\t\t
  1094. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1095. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1096. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1097. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1098. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1099. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1100. \t\t\t\t\t\t\t\t</div>
  1101. \t\t\t\t\t\t\t\t</div>
  1102. \t\t\t\t\t\t\t</div>
  1103. \t\t\t\t\t\t</article>
  1105. \t\t\t\t\t   </div>
  1106. \t\t\t\t\t   <!--Single Blog End-->
  1107. \t\t\t\t\t   <!--Single Blog Start-->
  1108. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1110. \t\t\t\t\t\t<article>
  1111. \t\t\t\t\t\t\t<div class=\"post-img\">
  1112. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1113. \t\t\t\t\t\t\t</div>
  1114. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1115. \t\t\t\t\t\t\t<h2 class=\"title\">
  1116. \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>
  1117. \t\t\t\t\t\t\t</h2>
  1118. \t\t\t\t
  1119. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1120. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1121. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1122. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1123. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1124. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1125. \t\t\t\t\t\t\t\t</div>
  1126. \t\t\t\t\t\t\t\t</div>
  1127. \t\t\t\t\t\t\t</div>
  1128. \t\t\t\t\t\t</article>
  1130. \t\t\t\t\t   </div>
  1131. \t\t\t\t\t   <!--Single Blog Start-->
  1132. \t\t\t\t\t   <!--Single Blog Start-->
  1133. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1135. \t\t\t\t\t\t<article>
  1136. \t\t\t\t\t\t\t<div class=\"post-img\">
  1137. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1138. \t\t\t\t\t\t\t</div>
  1139. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1140. \t\t\t\t\t\t\t<h2 class=\"title\">
  1141. \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>
  1142. \t\t\t\t\t\t\t</h2>
  1143. \t\t\t\t
  1144. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1145. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1146. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1147. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1148. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1149. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1150. \t\t\t\t\t\t\t\t</div>
  1151. \t\t\t\t\t\t\t\t</div>
  1152. \t\t\t\t\t\t\t</div>
  1153. \t\t\t\t\t\t</article>
  1155. \t\t\t\t\t   </div>
  1156. \t\t\t\t\t   <!--Single Blog Start-->
  1157. \t\t\t\t\t   
  1158. \t\t\t\t   </div>
  1159. \t\t\t   </div>
  1160. \t\t   </div>
  1161.    </section>
  1163. ";
  1164.         
  1165.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1167.         
  1168.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1170.     }
  1172.     // line 1021
  1173.     public function block_javascripttemplate($context, array $blocks = [])
  1174.     {
  1175.         $macros = $this->macros;
  1176.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1177.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1179.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1180.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1182.         // line 1022
  1183.         echo "\$(document).ready(function() {
  1184.   const \$buttons = \$(\".demo__buttons\");
  1185.   const \$toggle = \$(\".demo__open-btn\");
  1186.   let delay = 200;
  1187.   let steps = [];
  1188.   let open = false;
  1189.   
  1190.   let curStep = 0;
  1192.   for (let i = 0; i <= 3; i++) {
  1193.     steps[i] = \"demo__step-\" + i;
  1194.   }
  1196.   function setStep(index) {    
  1197.     \$buttons.removeClass(\"step-1 step-0 step-3 step-2\").addClass(\"step-\" + curStep);   
  1198.   }
  1199.   
  1200.   let lastTimeout;
  1202.   function animate() {
  1203.     if (curStep >= 4) {
  1204.       curStep = 0;
  1205.       return;
  1206.     }
  1208.     open = true;
  1209.     setStep(curStep);    
  1210.     curStep++;
  1211.     lastTimeout = setTimeout(animate, delay);
  1212.   }
  1214.   \$toggle.on(\"click\", function() {
  1215.     if (!open) animate();
  1216.     else {
  1217.       \$buttons.removeClass(\"step-1 step-0 step-3 step-2\");
  1218.       clearTimeout(lastTimeout);
  1219.       open = false;
  1220.       curStep = 0;
  1221.     }
  1222.   });
  1223. });
  1224. ";
  1225.         
  1226.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1228.         
  1229.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1231.     }
  1233.     public function getTemplateName()
  1234.     {
  1235.         return "Theme/Produit/Produit/Produit/businessretenu.html.twig";
  1236.     }
  1238.     public function isTraitable()
  1239.     {
  1240.         return false;
  1241.     }
  1243.     public function getDebugInfo()
  1244.     {
  1245.         return array (  1183 => 1022,  1173 => 1021,  511 => 368,  507 => 367,  321 => 184,  195 => 61,  191 => 60,  187 => 58,  178 => 52,  174 => 50,  148 => 26,  146 => 25,  135 => 16,  125 => 15,  110 => 12,  100 => 11,  85 => 7,  78 => 5,  74 => 4,  71 => 3,  61 => 2,  38 => 1,);
  1246.     }
  1248.     public function getSourceContext()
  1249.     {
  1250.         return new Source("{% extends \"Theme/Users/User/layoutoffert.html.twig\" %}
  1251. {% block meta %}
  1253. \t{{ parent() }}
  1254. \t<meta name=\"keywords\" content=\"{{ site }}, {{ keywords }}\"/>
  1255. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  1256. \t<meta name=\"description\" content=\"{{ site }} - {{ souscategorie.nom }}\"/>
  1257. \t
  1258. {% endblock %}
  1260. {% block title %}
  1261. \t{{ parent() }} - {{ souscategorie.nom }}
  1262. {% endblock %}
  1264. {% block userblog_body %}
  1265. <style>
  1266. \t.mzp-c-details .is-summary button:before, details .is-summary button:before, summary:before{
  1267. \t\tdisplay: none!important;
  1268. \t}
  1269. </style>
  1270. <div style=\"background: #90acd1; min-height: 200px;\">
  1271. <div class=\"container\" style=\"overflow: hidden;\">
  1272. \t<div class=\"row\" style=\"margin-top: 15px;\">
  1273. \t<div class=\"col-md-8\">
  1274. \t{% if is_mobile() %}
  1275. \t<ol class=\"c-navigation-breadcrumbs__directory\">
  1276. \t\t<!-- Duplicating the \"Home\" link in both the global navigation and the breadcrumb trail is not recommended. -->
  1277. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1278. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  1279. \t\t\t<span class=\"u-visually-hidden\" property=\"name\"><span class=\"fa fa-home\"> </span> Accueil</span>
  1280. \t\t  </a>
  1281. \t\t  <meta property=\"position\" content=\"1\">
  1282. \t\t</li>
  1284. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1285. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"\" property=\"item\" typeof=\"WebPage\">
  1286. \t\t\t<span property=\"name\"> L'entreprise</span>
  1287. \t\t  </a>
  1288. \t\t  <meta property=\"position\" content=\"2\">
  1289. \t\t</li>
  1291. \t\t<li class=\"c-navigation-breadcrumbs__item\" property=\"itemListElement\" typeof=\"ListItem\">
  1292. \t\t  <a class=\"c-navigation-breadcrumbs__link\" href=\"#!\" property=\"item\" aria-current=\"location\">
  1293. \t\t\t<span property=\"name\">À propos de  nous </span>
  1294. \t\t  </a>
  1295. \t\t  <meta property=\"position\" content=\"3\">
  1296. \t\t</li>
  1297. \t</ol>
  1298. \t{% else %}
  1299. \t<div style=\"padding: 20px 0px;\">
  1300. \t\t<ul class=\"breadcrumbs\">
  1301. \t\t  <li><a href=\"{{ path('users_user_acces_plateforme') }}\"><span class=\"fa fa-home\"></span> Accueil</a></li>
  1302. \t\t  <li><a > L'entreprise</a></li>
  1303. \t\t  <li>À propos de nous</li>
  1304. \t\t</ul>
  1305. \t</div>
  1306. \t{% endif %}
  1307. \t
  1308. \t<div>
  1309. \t\t<h2 style=\"color: #fff;\">{{ souscategorie.nom }}</h2>
  1310. \t\t<div style=\"color: #fff;\">{{ souscategorie.description }}</div>
  1311.     </div>
  1312.   </div>
  1313.   
  1314. \t<!-- div class=\"col-md-4\">
  1315. \t\t<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\" class=\"my-svg\">
  1316. \t\t  <defs>
  1317. \t\t\t<filter id=\"goo\">
  1318. \t\t\t  <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" />
  1319. \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\" />
  1320. \t\t\t  <feBlend in=\"SourceGraphic\" in2=\"goo\" />
  1321. \t\t\t</filter>
  1322. \t\t  </defs>
  1323. \t\t</svg>
  1324. \t\t<div class=\"demo\">
  1325. \t\t  <div class=\"demo__buttons\">
  1326. \t\t\t<div class=\"demo__social-btn-4 demo__social-btn\"><i class=\"fa fa-snapchat\"></i></div>
  1327. \t\t\t<div class=\"demo__social-btn-3 demo__social-btn\"><i class=\"fa fa-instagram\"></i></div>
  1328. \t\t\t<div class=\"demo__social-btn-2 demo__social-btn\"><i class=\"fa fa-facebook\"></i></div>
  1329. \t\t\t<div class=\"demo__social-btn-1 demo__social-btn\"><i class=\"fa fa-twitter\"></i></div>
  1330. \t\t\t<div class=\"demo__open-btn\"><i class=\"fa fa-share-alt\"></i></div>
  1331. \t\t  </div>
  1332. \t\t  <h2 class=\"text-center\" style=\"color: #fff;\">Share and win</h2>
  1333. \t\t</div>
  1334. \t</div -->
  1335.   
  1336.   </div>
  1338.   
  1339. </div>
  1340. </div>
  1342. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); background: #f2f2f2;\">
  1343. \t<div class=\"container\" style=\"height: 100px;\">
  1344. \t  
  1345. \t</div>
  1346. </div>
  1348. <style>
  1349. \t.brand-wrap {
  1350. \t  position: relative;
  1351. \t  z-index: 2;
  1352. \t}
  1353. \t
  1354. \t@media (max-width: 991px) {
  1355. \t\t.brand-wrap {
  1356. \t\t  padding: 20px 0;
  1357. \t\t} 
  1358. \t}
  1359. \t
  1360. \t.brand-wrap .owl-carousel .owl-item img {
  1361. \t\twidth: auto !important; 
  1362. \t}
  1363. \t
  1364. \t.brand-wrap .single-brand {
  1365. \t\ttext-align: center;
  1366. \t\t-webkit-filter: grayscale(100%);
  1367. \t\t-moz-filter: grayscale(100%);
  1368. \t\t-ms-filter: grayscale(100%);
  1369. \t\t-o-filter: grayscale(100%);
  1370. \t\tfilter: grayscale(100%);
  1371. \t\topacity: .5;
  1372. \t\t-webkit-transition: all 0.3s ease 0s;
  1373. \t\t-moz-transition: all 0.3s ease 0s;
  1374. \t\t-o-transition: all 0.3s ease 0s;
  1375. \t\ttransition: all 0.3s ease 0s; 
  1376. \t}
  1377. \t
  1378. \t.brand-wrap .single-brand:hover{
  1379. \t  -webkit-filter: grayscale(0%);
  1380. \t  -moz-filter: grayscale(0%);
  1381. \t  -ms-filter: grayscale(0%);
  1382. \t  -o-filter: grayscale(0%);
  1383. \t  filter: grayscale(0%);
  1384. \t  opacity: 1; 
  1385. \t }
  1386. </style>
  1388. <div style=\"background: transparent; margin-bottom: -140px;\">
  1389. <div class=\"container\" style=\"background: transparent;\">
  1391.   <div class=\"row\" style=\"margin-top: 25px; background: transparent;\">
  1392. \t<div class=\"col-md-12\">
  1393. \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;\">
  1395. \t\t<h2>Services</h2>
  1396. \t\t<div class=\"boxC12\">
  1397. \t\t\t
  1398. \t\t\t<details>
  1399. \t\t\t\t<summary>
  1400. \t\t\t\t<p> service.nom </p><span class=\"plusminus\"></span>
  1401. \t\t\t\t</summary>
  1402. \t\t\t\t<p>
  1403. \t\t\t\t\t\tservice.description|raw
  1404. \t\t\t\t
  1405. \t\t\t\t\t
  1406. \t\t\t\t\t<div class=\"box\">
  1407. \t\t\t\t\t\t<div class=\"title-bold\">
  1408. \t\t\t\t\t\t\t<span> scat.nom </span>
  1409. \t\t\t\t\t\t</div>
  1410. \t\t\t\t\t\t<div class=\"inner-profile\">
  1411. \t\t\t\t\t\t\t\tscat.description|raw 
  1412. \t\t\t\t\t\t</div>
  1413. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  1414. \t\t\t\t\t</div>
  1416. \t\t\t\t</p>
  1417. \t\t\t</details>
  1419. \t\t</div>
  1421. \t</div>
  1422. \t</div>
  1423.   </div>
  1424.   
  1425. </div>
  1426. </div>
  1428. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); margin-bottom: 30px;\">
  1429. \t<div class=\"container\" style=\"padding-top: 25px; padding-bottom: 25px;\">
  1430. \t   
  1431. \t\t<section style=\"margin-top: -20px;\">
  1432. \t\t\t<div style=\"width: 100%; margin: 0px auto;\">
  1433. \t\t\t<link href=\"{{ asset('template/css/tyfy.css') }}\" rel=\"stylesheet\"/>
  1434. \t\t\t<style>
  1435. \t\t\t  div.demotabs {
  1436. \t\t\t\tborder: 2px dashed #e6e6e6;
  1437. \t\t\t\tborder-radius: .8125rem;
  1438. \t\t\t\tbox-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  1439. \t\t\t\tmargin-top: 1.625rem;
  1440. \t\t\t\tpadding: 15px;
  1441. \t\t\t\tbackground: #fff;
  1442. \t\t\t  }
  1443. \t\t\t  .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  1444. \t\t\t</style>
  1445. \t\t\t
  1446. \t\t\t
  1447. \t\t\t<div class=\"demotabs\">
  1448. \t\t\t\t<div class=\"mzp-l-content\">
  1449. \t\t\t  <div class=\"links-underlined\">
  1450. \t\t\t\t  <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  1451. \t\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>
  1452. \t\t\t  </div>
  1453. \t\t\t  <div class=\"tabs-container\">
  1454. \t\t\t\t  <h2 class=\"tab-label\">Présentation</h2>
  1455. \t\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>
  1456. \t\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>
  1457. \t\t\t\t  
  1458. \t\t\t\t  <h2 class=\"tab-label collapsed\">Eligibilité</h2>
  1459. \t\t\t\t  <p>Facilis error corrupti dolor eaque. 
  1460. \t\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>
  1461. \t\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>
  1462. \t\t\t\t  
  1463. \t\t\t\t  <h2 class=\"tab-label collapsed\">Rapport</h2>
  1464. \t\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>
  1465. \t\t\t\t  
  1466. \t\t\t\t  <h2 class=\"tab-label collapsed\">Historique</h2>
  1467. \t\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>
  1468. \t\t\t\t  
  1469. \t\t\t  </div>
  1470. \t\t\t
  1471. \t\t\t<h2>Notes</h2>
  1472. \t\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>
  1473. \t\t  </div>
  1474. \t\t  </div>
  1475. \t\t\t
  1476. \t\t  <script>
  1477. \t\t\t  \$(document).ready(function(){
  1478. \t\t
  1479. \t\t\t\tGoToAnchor = function(){
  1480. \t\t\t\t  // find the anchor and any tab it might be in
  1481. \t\t\t\t  selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  1482. \t\t\t\t\t  selected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  1483. \t\t\t\t  parent_tab = selected_anchor.parents('.tab-panel');
  1484. \t\t\t\t  // account for an anchor in a label
  1485. \t\t\t\t  parent_label = selected_anchor.parents('.tab-label');
  1486. \t\t\t\t  if (parent_label.length) {
  1487. \t\t\t\t\tparent_tab = parent_label.next('.tab-panel');
  1488. \t\t\t\t  }
  1489. \t\t\t\t  // do the steps of this function only if we have an anchor link and a tab panel
  1490. \t\t\t\t  if (selected_anchor.length && parent_tab.length) {
  1491. \t\t\t\t\tparent_tab_label = parent_tab.prev('.tab-label');
  1492. \t\t\t\t\t\tparent_tab_index = parent_tab_label.attr('data-tabindex');
  1493. \t\t\t\t\tparent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  1494. \t\t\t\t\tif (parent_tab.hasClass('collapsed')) {
  1495. \t\t\t\t\t  parent_tab.removeClass('collapsed');
  1496. \t\t\t\t\t  parent_tab_label.removeClass('collapsed');
  1497. \t\t\t\t\t}
  1498. \t\t\t\t\t// scroll to the anchor
  1499. \t\t\t\t\tvar s = selected_anchor.offset().top - 50; // console.log(s);
  1500. \t\t\t\t\t\$('body,html').animate({'scrollTop':s},500,'swing');
  1501. \t\t\t\t\t  }
  1502. \t\t\t\t};
  1503. \t\t\t\t
  1504. \t\t\t\t// prepare HTML structure for each tab container
  1505. \t\t\t\t\$('.tabs-container').each(function(){
  1506. \t\t\t\t  if (!\$(this).hasClass('tabs-processed')) {
  1507. \t\t\t\t\t// find the headings that are tab labels
  1508. \t\t\t\t\tmy_tablabels = \$(this).find('.tab-label');
  1509. \t\t\t\t\t// create tabs
  1510. \t\t\t\t\tif (\$(this).find('ul.tabs').length === 0) {
  1511. \t\t\t\t\t  \$(this).prepend('<ul class=\"tabs\"></ul>');
  1512. \t\t\t\t\t  var x;
  1513. \t\t\t\t\t  for (x=0;x<my_tablabels.length;x++) {
  1514. \t\t\t\t\t\t\$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  1515. \t\t\t\t\t  }
  1516. \t\t\t\t\t}
  1517. \t\t\t\t\t// structure all labels and wrap all tab panels
  1518. \t\t\t\t\tif (\$(this).find('.tab-panel').length === 0) {
  1519. \t\t\t\t\t  my_tablabels.each(function(i){
  1520. \t\t\t\t\t\t\$(this).attr('data-tabindex',i);
  1521. \t\t\t\t\t\t\$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  1522. \t\t\t\t\t\tkids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  1523. \t\t\t\t\t\t// default state class for when tabs are collapsable sections
  1524. \t\t\t\t\t\t\$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  1525. \t\t\t\t\t  });    
  1526. \t\t\t\t\t}
  1527. \t\t\t\t\t// open initial tab
  1528. \t\t\t\t\t\$(this).find('ul.tabs li').eq(0).addClass('open');
  1529. \t\t\t\t\tmy_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  1530. \t\t\t\t\t// tab click events
  1531. \t\t\t\t\t\$('.tabs-container ul.tabs li').each(function(i){
  1532. \t\t\t\t\t  \$(this).click(function(){
  1533. \t\t\t\t\t\tif (!\$(this).hasClass('open')) {
  1534. \t\t\t\t\t\t  \$('.tabs-container .open').removeClass('open');
  1535. \t\t\t\t\t\t  my_tabindex = \$(this).attr('data-tabindex');
  1536. \t\t\t\t\t\t  \$(this).addClass('open');
  1537. \t\t\t\t\t\t  \$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  1538. \t\t\t\t\t\t  \$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  1539. \t\t\t\t\t\t}
  1540. \t\t\t\t\t  });
  1541. \t\t\t\t\t});
  1542. \t\t\t\t\t// collapsable header click event
  1543. \t\t\t\t\t\$('.tabs-container .tab-label').click(function(){
  1544. \t\t\t\t\t  if (!\$(this).hasClass('transition')) {
  1545. \t\t\t\t\t\tkids = \$(this).next('.tab-panel');
  1546. \t\t\t\t\t\tkids.removeClass('collapsed');
  1547. \t\t\t\t\t\tvar fullHeight = kids.outerHeight();
  1548. \t\t\t\t\t\t\$(this).addClass('transition');
  1549. \t\t\t\t\t\tkids.addClass('transition');
  1550. \t\t\t\t\t\tif (\$(this).hasClass('collapsed')) {
  1551. \t\t\t\t\t\t  kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  1552. \t\t\t\t\t\t\theight:fullHeight+'px',
  1553. \t\t\t\t\t\t\tpaddingBottom:'32px',
  1554. \t\t\t\t\t\t\tpaddingTop:'16px',
  1555. \t\t\t\t\t\t  },500,function(){
  1556. \t\t\t\t\t\t\t\$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  1557. \t\t\t\t\t\t  });
  1558. \t\t\t\t\t\t}
  1559. \t\t\t\t\t\telse {
  1560. \t\t\t\t\t\t  kids.css('height',fullHeight+'px').animate({
  1561. \t\t\t\t\t\t\theight:'0px',
  1562. \t\t\t\t\t\t\tpaddingBottom:'0px',
  1563. \t\t\t\t\t\t\tpaddingTop:'0px',
  1564. \t\t\t\t\t\t  },500,function(){
  1565. \t\t\t\t\t\t\t\$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  1566. \t\t\t\t\t\t  });
  1567. \t\t\t\t\t\t}
  1568. \t\t\t\t\t  }
  1569. \t\t\t\t\t}); 
  1570. \t\t\t\t\t// indicate state of readiness
  1571. \t\t\t\t\t\$(this).addClass('tabs-processed');
  1572. \t\t\t\t  }  
  1573. \t\t\t\t});
  1574. \t\t\t\t// if there are tabs and someone has linked to an anchor inside a tab
  1575. \t\t\t\tconsole.log(window.location.hash);
  1576. \t\t\t\tif (window.location.hash != '') {
  1577. \t\t\t\t  GoToAnchor();
  1578. \t\t\t\t}
  1579. \t\t\t\t// handle case when page is already loaded
  1580. \t\t\t\t\$(window).on('hashchange',function(){
  1581. \t\t\t\t  GoToAnchor();
  1582. \t\t\t\t});
  1583. \t\t\t  });
  1584. \t\t\t</script>
  1585. \t\t\t</div>
  1586. \t\t</section>
  1587. \t
  1588. \t</div>
  1589. \t</div>
  1592. <style>
  1595. body {
  1596. /* Colors */
  1597. \t--color-blue-50: #0a84ff;
  1598. \t--color-blue-60: #0060df;
  1599. \t--color-blue-70: #003eaa;
  1600. \t--color-blue-80: #002275;
  1601. \t--color-gray-10: #f9f9fa;
  1602. \t--color-gray-20: #ededf0;
  1603. \t--color-gray-30: #d7d7db;
  1604. \t--color-gray-40: #b1b1b3;
  1605. \t--color-gray-50: #737373;
  1606. \t--color-gray-60: #4a4a4f;
  1607. \t--color-gray-70: #38383d;
  1608. \t--color-gray-80: #2a2a2e;
  1609. \t--color-gray-90: #0c0c0d;
  1610. \t--color-green-70: #058b00;
  1611. \t--color-teal-50: #00feff;
  1612. \t--color-teal-60: #00c8d7;
  1613. \t--color-teal-70: #008ea4;
  1615. /* Icons */
  1616. \t--icon-context-menu: url({{ asset('template/images/twitter.png') }});
  1617. \t--icon-dismiss: url({{ asset('template/images/twitter.png') }});
  1619.   --background-color: #F9F9FA;
  1620.   --border-primary-color: #B1B1B3;
  1622. /* Primary Action */
  1623.   --primary-action-default: var(--color-blue-60);
  1624.   --primary-action-hover: var(--color-blue-70);
  1625.   --primary-action-active: var(--color-blue-80);
  1626.   --primary-action-text-color: #fff;
  1628. /* Secondary Action */
  1629.   --secondary-action-default: var(--color-gray-20);
  1630.   --secondary-action-hover: var(--color-gray-30);
  1631.   --secondary-action-active: var(--color-gray-40);
  1632.   --secondary-action-text-color: var(--color-gray-80);
  1634. /* Ghost Action */
  1635. \t--ghost-action-hover: var(--color-gray-20);
  1636. \t--ghost-action-active: var(--color-gray-30);
  1637. \t--ghost-action-text-color: var(--color-gray-80);
  1639. /* Forms */
  1640. \t--label-text-color: var(--text-secondary);
  1641. \t--text-field-border-color: var(--color-gray-30);
  1642. \t--text-field-hover-border-color: var(--color-gray-40);
  1643. \t--text-field-focus-border-color: var(--color-gray-40);
  1644. \t--text-field-bg-color: #fff;
  1645. /* Focus */
  1646.   --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 132, 255, 0.5);
  1648. /* Cards */
  1649.   --rasied-card-bg-color: #FFF;
  1650.   --rasied-card-border-radius: 8px;
  1651.   --box-shadow-10: 0px 0px 8px 0 rgba(12, 12, 13, 0.05);
  1652.   --raised-card-hover: 0 0 0 4px var(--secondary-action-default);
  1653.     
  1654.   /* Typography */
  1655.   --base-font-size: 15px;
  1656.   --small-font-size: 13px;
  1657.   --base-line-height: 24px;
  1658.   
  1659.   /* Text Colors */
  1660.   --text-primary: var(--color-gray-90);
  1661.   --text-secondary: var(--color-gray-50);
  1662. }
  1666. .meta {
  1667. \tcolor: var(--text-secondary);
  1668. \tfont-size: var(--small-font-size);
  1669. \tline-height: var(--base-line-height);
  1670. }
  1672. .small {
  1673. \tfont-size: var(--small-font-size);
  1674. \tline-height: 20px;
  1675. }
  1677. .text-muted {
  1678. \tcolor: var(--text-secondary);
  1679. }
  1681. .sr-only {
  1682. \tdisplay: none;
  1683. }
  1685. /* Default Link */
  1686. a {
  1687. \t background-color: transparent;
  1688. \t color: var(--color-blue-60);
  1689. \t text-decoration: none;
  1690. }
  1691. a:hover {
  1692. \ttext-decoration: underline;
  1693. }
  1694. a:active {
  1695. \tcolor: var(--color-blue-70);
  1696. \ttext-decoration:underline;
  1697. }
  1698. a:focus {
  1699. \tbox-shadow: ;
  1700. }
  1701. a:not([href]):not([tabindex]) {
  1702. \tcolor: inherit;
  1703. \ttext-decoration: none;
  1704. }
  1706. /* Buttons */
  1707. .btn {
  1708. \tborder: none;
  1709. \tcursor: pointer;
  1710. \tfont-weight: 500;
  1711. \ttransition: background-color 150ms, transform 150ms;
  1712. \ttransition-duration: 150ms;
  1713. }
  1715. .btn:active {
  1716. \ttransform: scale(0.97);
  1717. }
  1719. .btn:focus {
  1720. \tbox-shadow: var(--focus-box-shadow);
  1721. }
  1723. .btn.disabled {
  1724. \tcursor: default;
  1725. \topacity: 0.4;
  1726. }
  1728. /* Primary Button */
  1729. .btn--primary {
  1730. \tbackground-color: var(--primary-action-default);
  1731. \tcolor: var(--primary-action-text-color);
  1732. \tfill: var(--primary-action-text-color);
  1733. \t-moz-context-properties: fill;
  1734. }
  1736. .btn--primary:hover {
  1737. \tbackground-color: var(--primary-action-hover);
  1738. }
  1740. .btn--primary:active {
  1741. \tbackground-color: var(--primary-action-active);
  1742. }
  1744. .btn--primary:disabled,
  1745. .btn--primary.disabled {
  1746. \tbackground-color: var(--primary-action-default);
  1747. \tcolor: var(--primary-action-text-color);
  1748. \tfill: var(--primary-action-text-color);
  1749. \t-moz-context-properties: fill;
  1750. }
  1752. /* Secondary Button */
  1753. .btn--secondary {
  1754. \tbackground-color: var(--secondary-action-default);
  1755. \tcolor: var(--secondary-action-text-color);
  1756. \tfill: var(--secondary-action-text-color);
  1757. \t-moz-context-properties: fill;
  1758. }
  1760. .btn--secondary:hover {
  1761. \tbackground-color: var(--secondary-action-hover);
  1762. }
  1764. .btn--secondary:active {
  1765. \tbackground-color: var(--secondary-action-active);
  1766. }
  1768. .btn--secondary:disabled,
  1769. .btn--secondary.disabled {
  1770. \tbackground-color: var(--secondary-action-default);
  1771. \tcolor: var(--secondary-action-text-color);
  1772. \tfill: var(--secondary-action-text-color);
  1773. \t-moz-context-properties: fill;
  1774. }
  1776. /* Pill Button */
  1777. .btn--pill {
  1778. \tborder-radius: 16px;
  1779. \tline-height: 32px;
  1780. \tmin-height: 32px;
  1781. \tpadding: 0 16px;
  1782. \tvertical-align: middle;
  1783. }
  1785. .btn--pill-icon-only {
  1786. \tbackground-position: 50%;
  1787. \tbackground-repeat: no-repeat;
  1788. \tbackground-size: 16px;
  1789. \twidth: 32px;
  1790. }
  1792. /* Form Button */
  1793. .btn--form {
  1794. \tborder-radius: 4px;
  1795. \tmin-height: 40px;
  1796. \tmin-width: 96px;
  1797. \tpadding: 0 8px;
  1798. }
  1800. /* Ghost Button */
  1801. .btn--ghost {
  1802. \tbackground-color: transparent;
  1803. \tcolor: var(--ghost-action-text-color);
  1804. \tfill: var(--ghost-action-text-color);
  1805. \t-moz-context-properties: fill;
  1806. }
  1808. .btn--ghost:hover {
  1809. \tbackground-color: var(--ghost-action-hover);
  1810. }
  1812. .btn--ghost:active {
  1813. \tbackground-color: var(--ghost-action-active);
  1814. }
  1816. .btn--ghost:disabled,
  1817. .btn--ghost.disabled {
  1818. \tbackground-color: transparent;
  1819. \tcolor: var(--ghost-action-text-color);
  1820. \tfill: var(--ghost-action-text-color);
  1821. \t-moz-context-properties: fill;
  1822. }
  1826. .card .context-menu-btn {
  1827. \topacity: 0;
  1828. \tposition: absolute;
  1829. \tright: -16px;
  1830. \ttop: -16px;
  1831. \ttransform: scale(0.25);
  1832. \ttransition-duration: 150ms;
  1833. \ttransition-property: transform, opacity;\t
  1834. }
  1836. /* Cards */
  1837. .card-raised {
  1838. \tbackground: var(--rasied-card-bg-color);
  1839. \tborder-radius: var(--rasied-card-border-radius);
  1840. \tborder: 1px inset rgba(12, 12, 13, 0.07);
  1841. \tbox-shadow: var(--box-shadow-10);
  1842. \ttransition: box-shadow 250ms, transform 150ms;
  1843. \tposition: relative;
  1844. }
  1846. .card-raised:hover {
  1847. \tbox-shadow: var(--box-shadow-10), var(--raised-card-hover);\t
  1848. }
  1851. .card-raised:hover .context-menu-btn {
  1852.     opacity: 1;
  1853.     transform: scale(1);
  1854.     transition-delay: 200ms;
  1855. }
  1857. .card-raised:hover .title {
  1858. \tcolor: var(--primary-action-default);
  1859. \ttext-decoration: underline;
  1860. \tcursor: pointer;
  1861. }
  1863. .card-raised:active {\t
  1864. \ttransform: scale(0.97);
  1865. }
  1867. .card-raised:focus {
  1868. \tbox-shadow: var(--box-shadow-10), 0 0 0 3px #fff, 0 0 0 6px rgba(10, 132, 255, 0.5);
  1869. }
  1871. /*
  1872. .card-img {
  1873. \tborder: 1px inset rgba(0, 0, 0, 0.15);
  1874. }
  1875. */
  1877. .card-raised .card-img-top {
  1878. \tborder-top-left-radius: var(--rasied-card-border-radius);
  1879. \tborder-top-right-radius: var(--rasied-card-border-radius);
  1880. }
  1882. .card-body {
  1883. \tpadding: 12px 16px;
  1884. }
  1886. .card-footer {
  1887. \tpadding: 12px 16px;
  1888. }
  1891. /* Snippet */
  1892. .snippet {
  1893. \tbackground-color: #fff;
  1894. \tbottom: 0;
  1895. \tbox-shadow: var(--box-shadow-10);
  1896. \tpadding: 24px 0;
  1897. \tposition: fixed;
  1898. \twidth: 100%;
  1899. \tz-index: 200;
  1900. }
  1902. .snippet .wrapper {
  1903. \tdisplay: flex;
  1904. }
  1906. .snippet-promo-image,
  1907. .snippet-content {
  1908. \tmargin-right: 24px;
  1909. }
  1911. .snippet-promo-image img {
  1912. \twidth: 48px;
  1913. }
  1915. .snippet-content {
  1916. \tflex-grow: 1;
  1917. }
  1919. .snippet-content .body {
  1920. \tmax-width: 600px;\t
  1921. }
  1923. .snippet .btn {
  1924. \theight: 32px;\t
  1925. }
  1927. .icon-dark-theme {
  1928. \tdisplay: none;
  1929. }
  1931. .search-wrapper {
  1932.   padding: 24px 0; }
  1933.   .only-search .search-wrapper {
  1934.     padding: 0 0 64px; }
  1935.   .search-wrapper .logo-and-wordmark {
  1936.     align-items: center;
  1937.     display: flex;
  1938.     justify-content: center;
  1939.     margin-bottom: 49px; }
  1940.     .search-wrapper .logo-and-wordmark .logo {
  1941.       background: url(\"chrome://branding/content/icon128.png\") no-repeat center center;
  1942.       background-size: 97px;
  1943.       display: inline-block;
  1944.       height: 97px;
  1945.       width: 97px; }
  1946.     .search-wrapper .logo-and-wordmark .wordmark {
  1947.       background: url(\"../data/content/assets/firefox-wordmark.svg\") no-repeat center center;
  1948.       background-size: 142px;
  1949.       -moz-context-properties: fill;
  1950.       display: inline-block;
  1951.       fill: var(--search-wordmark-color);
  1952.       height: 97px;
  1953.       margin-inline-start: 15px;
  1954.       width: 142px; }
  1955.     @media (max-width: 609px) {
  1956.       .search-wrapper .logo-and-wordmark .logo {
  1957.         background-size: 64px;
  1958.         height: 64px;
  1959.         width: 64px; }
  1960.       .search-wrapper .logo-and-wordmark .wordmark {
  1961.         background-size: 100px;
  1962.         height: 64px;
  1963.         width: 100px; } }
  1964.   
  1965.   .search-wrapper .search-inner-wrapper {
  1966.     cursor: default;
  1967.     display: flex;
  1968.     height: 48px;
  1969.     margin: 0 auto;
  1970.     position: relative;
  1971.     width: 224px; }
  1972.     @media (min-width: 610px) {
  1973.       .search-wrapper .search-inner-wrapper {
  1974.         width: 480px; } }
  1975.     @media (min-width: 866px) {
  1976.       .search-wrapper .search-inner-wrapper {
  1977.         width: 736px; } }
  1978.   
  1979.   .search-wrapper input {
  1980.     background: var(--text-field-bg-color) /* var(--search-icon) 12px center no-repeat */;
  1981.     background-size: 24px;
  1982.     border: solid 1px var(--text-field-border-color);
  1983.     border-radius: 4px;
  1984. /*     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); */
  1985.     font-size: 15px;
  1986.     -moz-context-properties: fill;
  1987.     fill: var(--search-icon-color);
  1988.     padding: 0;
  1989.     padding-inline-end: 48px;
  1990.     padding-inline-start: 46px;
  1991.     width: 100%; }
  1992.     
  1993.     .search-wrapper input:dir(rtl) {
  1994.       background-position-x: right 12px; }
  1995.   
  1996. /*
  1997.   .search-wrapper:hover input {
  1998.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  1999. */
  2000.   
  2001.   .search-wrapper .search-inner-wrapper:active input,
  2002.   .search-wrapper input:focus {
  2003.     border: 1px solid var(--text-field-focus-border-color);
  2004.     box-shadow: var(--focus-box-shadow); }
  2005.   
  2006.   .search-wrapper .search-button {
  2007.     background: url(\"chrome://browser/skin/forward.svg\") no-repeat center center;
  2008.     background-size: 16px 16px;
  2009.     border: 0;
  2010.     border-radius: 0 3px 3px 0;
  2011.     -moz-context-properties: fill;
  2012.     fill: var(--search-icon-color);
  2013.     height: 100%;
  2014.     inset-inline-end: 0;
  2015.     position: absolute;
  2016.     width: 48px; }
  2017.     .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
  2018.       background-color: rgba(12, 12, 13, 0.1);
  2019.       cursor: pointer; }
  2020.     .search-wrapper .search-button:active {
  2021.       background-color: rgba(12, 12, 13, 0.2); }
  2022.     .search-wrapper .search-button:dir(rtl) {
  2023.       transform: scaleX(-1); }
  2025. .non-collapsible-section + .below-search-snippet-wrapper {
  2026.   margin-top: -48px; }
  2028. @media (max-height: 700px) {
  2029. /*
  2030.   .search-wrapper {
  2031.     padding: 0 0 30px; }
  2032. */
  2033.   .non-collapsible-section + .below-search-snippet-wrapper {
  2034.     margin-top: -14px; }
  2035.   .below-search-snippet-wrapper {
  2036.     min-height: 0; } }
  2038. .search-handoff-button {
  2039.   background: var(--textbox-background-color) var(--search-icon) 12px center no-repeat;
  2040.   background-size: 24px;
  2041.   border: solid 1px var(--search-border-color);
  2042.   border-radius: 3px;
  2043.   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
  2044.   cursor: text;
  2045.   font-size: 15px;
  2046.   padding: 0;
  2047.   padding-inline-end: 48px;
  2048.   padding-inline-start: 46px;
  2049.   opacity: 1;
  2050.   transition: opacity 500ms;
  2051.   width: 100%; }
  2052.   .search-handoff-button:dir(rtl) {
  2053.     background-position-x: right 12px; }
  2054.   .search-handoff-button:hover {
  2055.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  2056.   .fake-focus .search-handoff-button {
  2057.     border: 1px solid var(--textbox-focus-color);
  2058.     box-shadow: var(--textbox-focus-boxshadow); }
  2059.     .fake-focus .search-handoff-button .fake-caret {
  2060.       display: block; }
  2061.   .search-hidden .search-handoff-button {
  2062.     opacity: 0;
  2063.     visibility: hidden; }
  2064.   .search-handoff-button .fake-editable:focus {
  2065.     outline: none;
  2066.     caret-color: transparent; }
  2067.   .search-handoff-button .fake-editable {
  2068.     color: transparent;
  2069.     height: 100%;
  2070.     opacity: 0;
  2071.     position: absolute;
  2072.     top: 0;
  2073.     left: 0;
  2074.     right: 0;
  2075.     bottom: 0; }
  2076.   .search-handoff-button .fake-textbox {
  2077.     opacity: 0.54;
  2078.     text-align: start; }
  2079.   .search-handoff-button .fake-caret {
  2080.     animation: caret-animation 1.3s steps(5, start) infinite;
  2081.     background: var(--text-primary-color);
  2082.     display: none;
  2083.     inset-inline-start: 47px;
  2084.     height: 17px;
  2085.     position: absolute;
  2086.     top: 16px;
  2087.     width: 1px; }
  2089. @keyframes caret-animation {
  2090.   to {
  2091.     visibility: hidden; } }
  2093. @media (min-height: 701px) {
  2094.   body:not(.inline-onboarding) .fixed-search main {
  2095.     padding-top: 146px; }
  2096.   body:not(.inline-onboarding) .fixed-search .search-wrapper {
  2097.     background-color: var(--search-header-background-color);
  2098.     border-bottom: solid 1px var(--border-secondary-color);
  2099.     height: 95px;
  2100.     left: 0;
  2101.     padding: 30px 0;
  2102.     position: fixed;
  2103.     top: 0;
  2104.     width: 100%;
  2105.     z-index: 9; }
  2106.     body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
  2107.       height: 35px; }
  2108.     body:not(.inline-onboarding) .fixed-search .search-wrapper input {
  2109.       background-position-x: 16px;
  2110.       background-size: 16px; }
  2111.       body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
  2112.         background-position-x: right 16px; }
  2113.   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
  2114.     background-position-x: 12px;
  2115.     background-size: 24px; }
  2116.     body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
  2117.       background-position-x: right 12px; }
  2118.     body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
  2119.       top: 10px; } }
  2121. .contentSearchSuggestionTable {
  2122.   background-color: var(--search-dropdown-color);
  2123.   border: 0;
  2124.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
  2125.   transform: translateY(4px); }
  2126.   .contentSearchSuggestionTable .contentSearchHeader {
  2127.     background-color: var(--search-dropdown-header-color);
  2128.     color: var(--text-secondary-color); }
  2129.   .contentSearchSuggestionTable .contentSearchHeader,
  2130.   .contentSearchSuggestionTable .contentSearchSettingsButton {
  2131.     border-color: var(--border-secondary-color); }
  2132.   .contentSearchSuggestionTable .contentSearchSuggestionsList {
  2133.     border: 0; }
  2134.   .contentSearchSuggestionTable .contentSearchOneOffsTable {
  2135.     background-color: var(--search-dropdown-header-color);
  2136.     border-top: solid 1px var(--border-secondary-color); }
  2137.   .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
  2138.     color: var(--text-primary-color); }
  2139.   .contentSearchSuggestionTable .contentSearchSuggestionsContainer {
  2140.     background-color: var(--search-dropdown-color); }
  2141.   .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
  2142.     background: var(--element-hover-color);
  2143.     color: var(--text-primary-color); }
  2144.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
  2145.       background: var(--element-active-color); }
  2146.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
  2147.       fill: var(--icon-secondary-color); }
  2148.   .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer {
  2149.     background-color: var(--search-dropdown-header-color); }
  2150.   .contentSearchSuggestionTable .contentSearchOneOffItem {
  2151.     background-image: none;
  2152.     border-image: linear-gradient(transparent 18%, var(--border-secondary-color) 18%, var(--border-secondary-color) 82%, transparent 82%) 1;
  2153.     border-inline-end: 1px solid;
  2154.     position: relative; }
  2155.     .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  2156.       background: var(--element-hover-color); }
  2157.     .contentSearchSuggestionTable .contentSearchOneOffItem:active {
  2158.       background: var(--element-active-color); }
  2159.   .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
  2160.     background: var(--element-hover-color);
  2161.     color: var(--text-primary-color); }
  2163. .contentSearchHeaderRow > td > img,
  2164. .contentSearchSuggestionRow > td > .historyIcon{
  2165.   margin-inline-start: 7px;
  2166.   margin-inline-end: 15px;
  2167. }
  2168. </style>
  2171. <section class=\"news-section\">
  2173. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  2174. \t\t\t\t<div class=\"text-left\">
  2175. \t\t\t\t\t<h3>
  2176. \t\t\t\t\t\tNos programmes
  2177. \t\t\t\t\t</h3>
  2178. \t\t\t\t\t
  2179. \t\t\t\t\t<div>
  2180. \t\t\t\t\t\tLa transparence 
  2181. \t\t\t\t\t</div>
  2182. \t\t\t\t</div>
  2184. \t\t\t\t   <div class=\"row posts-list\">
  2186. \t\t\t  
  2187. \t\t\t\t\t   <!--Single Blog Start-->
  2188. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2190. \t\t\t\t\t\t<article>
  2191. \t\t\t\t\t\t\t<div class=\"post-img\">
  2192. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2193. \t\t\t\t\t\t\t</div>
  2194. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2195. \t\t\t\t\t\t\t<h2 class=\"title\">
  2196. \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>
  2197. \t\t\t\t\t\t\t</h2>
  2198. \t\t\t\t
  2199. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2200. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2201. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2202. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2203. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2204. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2205. \t\t\t\t\t\t\t\t</div>
  2206. \t\t\t\t\t\t\t\t</div>
  2207. \t\t\t\t\t\t\t</div>
  2208. \t\t\t\t\t\t</article>
  2210. \t\t\t\t\t   </div>
  2211. \t\t\t\t\t   <!--Single Blog End-->
  2212. \t\t\t\t\t   <!--Single Blog Start-->
  2213. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2215. \t\t\t\t\t\t<article>
  2216. \t\t\t\t\t\t\t<div class=\"post-img\">
  2217. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2218. \t\t\t\t\t\t\t</div>
  2219. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2220. \t\t\t\t\t\t\t<h2 class=\"title\">
  2221. \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>
  2222. \t\t\t\t\t\t\t</h2>
  2223. \t\t\t\t
  2224. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2225. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2226. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2227. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2228. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2229. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2230. \t\t\t\t\t\t\t\t</div>
  2231. \t\t\t\t\t\t\t\t</div>
  2232. \t\t\t\t\t\t\t</div>
  2233. \t\t\t\t\t\t</article>
  2235. \t\t\t\t\t   </div>
  2236. \t\t\t\t\t   <!--Single Blog Start-->
  2237. \t\t\t\t\t   <!--Single Blog Start-->
  2238. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  2240. \t\t\t\t\t\t<article>
  2241. \t\t\t\t\t\t\t<div class=\"post-img\">
  2242. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  2243. \t\t\t\t\t\t\t</div>
  2244. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  2245. \t\t\t\t\t\t\t<h2 class=\"title\">
  2246. \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>
  2247. \t\t\t\t\t\t\t</h2>
  2248. \t\t\t\t
  2249. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  2250. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  2251. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  2252. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  2253. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  2254. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  2255. \t\t\t\t\t\t\t\t</div>
  2256. \t\t\t\t\t\t\t\t</div>
  2257. \t\t\t\t\t\t\t</div>
  2258. \t\t\t\t\t\t</article>
  2260. \t\t\t\t\t   </div>
  2261. \t\t\t\t\t   <!--Single Blog Start-->
  2262. \t\t\t\t\t   
  2263. \t\t\t\t   </div>
  2264. \t\t\t   </div>
  2265. \t\t   </div>
  2266.    </section>
  2268. {% endblock %}
  2270. {% block javascripttemplate %}
  2271. \$(document).ready(function() {
  2272.   const \$buttons = \$(\".demo__buttons\");
  2273.   const \$toggle = \$(\".demo__open-btn\");
  2274.   let delay = 200;
  2275.   let steps = [];
  2276.   let open = false;
  2277.   
  2278.   let curStep = 0;
  2280.   for (let i = 0; i <= 3; i++) {
  2281.     steps[i] = \"demo__step-\" + i;
  2282.   }
  2284.   function setStep(index) {    
  2285.     \$buttons.removeClass(\"step-1 step-0 step-3 step-2\").addClass(\"step-\" + curStep);   
  2286.   }
  2287.   
  2288.   let lastTimeout;
  2290.   function animate() {
  2291.     if (curStep >= 4) {
  2292.       curStep = 0;
  2293.       return;
  2294.     }
  2296.     open = true;
  2297.     setStep(curStep);    
  2298.     curStep++;
  2299.     lastTimeout = setTimeout(animate, delay);
  2300.   }
  2302.   \$toggle.on(\"click\", function() {
  2303.     if (!open) animate();
  2304.     else {
  2305.       \$buttons.removeClass(\"step-1 step-0 step-3 step-2\");
  2306.       clearTimeout(lastTimeout);
  2307.       open = false;
  2308.       curStep = 0;
  2309.     }
  2310.   });
  2311. });
  2312. {% endblock %}", "Theme/Produit/Produit/Produit/businessretenu.html.twig", "/home/afhunt/domains/factory.afhunt.com/public_html/factory/templates/Theme/Produit/Produit/Produit/businessretenu.html.twig");
  2313.     }
  2314. }