templates/Theme/Produit/Service/Service/supportscenter.html.twig line 863

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutoffert.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, {{ keywords }}"/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ metier }}, {{ site }}"/>
  8.     
  9. {% endblock %}
  11. {% block title %}
  12. {{ parent() }} {{ site }}
  13. {% endblock %}
  15. {% block stylesheets %}
  16. {{ parent() }}
  18. <style>
  19.     /*  */
  20. .small-text {color:#2c2b0c;}
  21. .heading{color:#000; font-size:39px; font-weight:700;}
  22. .work-process-section { width: 100%; display: block; padding: 90px 0px 100px; background: #f7f6e2 ; background-size: cover; background-position: center; }
  23. .work-process-section .heading-block { width: 100%; display: block; max-width: 600px; margin: 0px auto 60px; text-align: center; }
  24. .work-process-section .heading-block .description { font-size: 16px; color: #666666; margin-bottom: 0px; }
  25. .work-process-block { max-width: 1600px; width: 100%; margin: 0px auto; /* height: 450px; */ }
  27. .work-process-layout1 .work-process-top .number { display:inline-block; width:80px; height:80px; text-align:center; border:5px solid; font-size:26px; font-weight:700; line-height:73px; margin-left:40px; margin-bottom:25px; background-color: #b9b533 !important; border-radius: 50%; position: relative; -webkit-transition: all ease 0.4s; transition: all ease 0.4s; }
  28. .work-process-layout1 .work-process-top { text-align:center; position:relative }
  29. .work-process-layout1 .work-process-top .shape { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  display:inline-block; position:absolute; left:25px; top:63px; width:100%; height:270px; max-width:270px; -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); border-radius:10px; z-index:0; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); background-color: #b9b533; }
  31. .work-process-layout1 .vs-work-process-2 .shape { background: #99962a !important; }
  32. .work-process-layout1 .vs-work-process-2 .number{ background: #99962a !important; }
  33. .work-process-layout1 .vs-work-process-2  .work-process-content { border-color: #99962a !important; }
  35. /* .work-process-layout1 .vs-work-process-3 .shape { background: #008dc4  !important; }
  36. .work-process-layout1 .vs-work-process-3 .number{ background: #008dc4  !important; }
  37. .work-process-layout1 .vs-work-process-3 .work-process-content { border-color: #008dc4  !important; }
  38. */
  39. .work-process-layout1 .vs-work-process-4 .shape { background: #90acd1  !important; }
  40. .work-process-layout1 .vs-work-process-4 .number{ background: #90acd1  !important; }
  41. .work-process-layout1 .vs-work-process-4 .work-process-content { border-color: #90acd1 !important; }
  43. .work-process-layout1 .work-process-content { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  border-radius:10px; box-shadow:0px 3px 0px 0px rgba(17,180,245,0.004),0px 3px 50px 0px rgba(17,180,245,0.1); background-color:rgba(255,255,255,0.969); padding:35px 20px; padding-bottom:30px; max-width:270px; border-bottom:3px solid #b9b533; position: relative;}
  44. .work-process-layout1 .work-process-content.odd-block { border-color: #d9d675; }
  45. .work-process-layout1 .work-process-content .icon { width: 45px; height: 45px; margin: 0px auto 20px; }
  46. .work-process-layout1 .work-process-content .icon img{ width: 100%; height: 100%; }
  47. .work-process-layout1 .work-process-content .process-title { color: #1d165c; font-size: 20px; line-height: 30px; transition: all 500ms ease; font-weight:600;  margin-bottom: 12px;  }
  48. .work-process-layout1 .work-process-content .text {  position: relative; font-size: 14px; line-height: 24px; color: #666666; transition: all 500ms ease; margin-bottom: 0px;  }
  49. .work-process-layout1 .vs-work-process:hover .work-process-top .shape {-webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
  50. .work-process-layout1 .vs-work-process:hover .work-process-top .number { margin-bottom:0px;  margin-left:0% }
  53. /*================= Beging Article =================*/
  54. .card {
  55.     display: flex;
  56.     margin-bottom: 30px;
  57.     width: 100%;
  58.   }
  59.   .card .card-icon-top {
  60.     font-size: 4.5rem;
  61.     margin-top: 3rem;
  62.   }
  63.   .card .card-tags {
  64.     color: #097d6c;
  65.     display: inline-block;
  66.     font-weight: 700;
  67.     margin-bottom: 1rem;
  68.   }
  69.   .card .card-tags:before {
  70.     content: "";
  71.     background-color: #097d6c;
  72.     width: 0.75em;
  73.     height: 0.75em;
  74.     border-radius: 100%;
  75.     display: inline-block;
  76.     margin-right: 0.5rem;
  77.   }
  78.   .card .card-date {
  79.     display: inline-block;
  80.     padding-bottom: 1rem;
  81.   }
  82.   .card .card-title {
  83.     color: #212529;
  84.     display: block;
  85.     font-weight: 700;
  86.     font-size: 1.5rem;
  87.     line-height: 1.33333;
  88.     margin-bottom: 1rem;
  89.   }
  90.   .card .card-title:last-child {
  91.     margin-bottom: 0;
  92.   }
  93.   .card .card-label {
  94.     color: #212529;
  95.     display: block;
  96.     font-size: 1.5rem;
  97.     line-height: 1.33333;
  98.     font-weight: 700;
  99.   }
  100.   .card .card-body {
  101.     padding: 2rem 2rem 2rem 2rem;
  102.     align-self: center;
  103.     width: 100%;
  104.   }
  105.   .card .card-body .popover-wrapper.right {
  106.     position: absolute;
  107.     right: 0;
  108.   }
  109.   .card .card-metadata {
  110.     min-width: 10rem;
  111.   }
  112.   .card .card-footer {
  113.     border-top: none;
  114.     padding: 0 2rem 2rem 2rem;
  115.     background-color: inherit;
  116.     display: flex;
  117.     align-items: center;
  118.   }
  119.   .card .card-footer .vfi {
  120.     color: #097d6c;
  121.     font-size: 2.5rem;
  122.     padding-left: 0.5rem;
  123.   }
  124.   .card .vfi {
  125.     color: #097d6c;
  126.   }
  127.   .card > a {
  128.     border-bottom: none;
  129.     color: #637381;
  130.     display: flex;
  131.     flex-direction: column;
  132.     height: 100%;
  133.   }
  134.   .card > a:hover,
  135.   .card > a:active {
  136.     color: #fff;
  137.     background: #097d6c;
  138.     text-decoration: none;
  139.   }
  140.   .card > a:hover .card-title,
  141.   .card > a:hover .card-icon-top,
  142.   .card > a:hover .card-footer .vfi,
  143.   .card > a:hover .card-tags,
  144.   .card > a:active .card-title,
  145.   .card > a:active .card-icon-top,
  146.   .card > a:active .card-footer .vfi,
  147.   .card > a:active .card-tags {
  148.     color: #fff;
  149.   }
  150.   .card > a:hover .text-muted,
  151.   .card > a:active .text-muted {
  152.     color: #fff !important;
  153.   }
  154.   .card > a:hover .card-tags:before,
  155.   .card > a:active .card-tags:before {
  156.     background-color: #fff;
  157.   }
  158.   .card2 {
  159.     -webkit-transition: all 100ms ease-in-out;
  160.     transition: all 100ms ease-in-out;
  161.     border: none;
  162.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  163.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  164.   }
  165.   .card2:hover {
  166.     transform: scale(1.04);
  167.     border: none;
  168.   }
  169.   .card2 > a:hover,
  170.   .card2 > a:active {
  171.     color: inherit;
  172.     background: #fff;
  173.     text-decoration: none;
  174.   }
  175.   .card2 > a:hover .card-icon-top,
  176.   .card2 > a:hover .card-footer .vfi,
  177.   .card2 > a:hover .card-tags,
  178.   .card2 > a:active .card-icon-top,
  179.   .card2 > a:active .card-footer .vfi,
  180.   .card2 > a:active .card-tags {
  181.     color: inherit;
  182.   }
  183.   .card2 > a:hover .card-title,
  184.   .card2 > a:active .card-title {
  185.     color: #097d6c;
  186.   }
  187.   .card2 > a:hover .text-muted,
  188.   .card2 > a:active .text-muted {
  189.     color: #fff !important;
  190.   }
  191.   .card2 > a:hover .card-tags:before,
  192.   .card2 > a:active .card-tags:before {
  193.     background-color: #fff;
  194.   }
  195.   .card3 {
  196.     -webkit-transition: all 200ms ease-in-out;
  197.     transition: all 200ms ease-in-out;
  198.   }
  199.   .card3:hover {
  200.     border: 1px solid #0cb097;
  201.   }
  202.   .card3 > a:hover,
  203.   .card3 > a:active {
  204.     color: inherit;
  205.     background: #fff;
  206.     text-decoration: none;
  207.   }
  208.   .card3 > a:hover .card-icon-top,
  209.   .card3 > a:hover .card-footer .vfi,
  210.   .card3 > a:hover .card-tags,
  211.   .card3 > a:active .card-icon-top,
  212.   .card3 > a:active .card-footer .vfi,
  213.   .card3 > a:active .card-tags {
  214.     color: inherit;
  215.   }
  216.   .card3 > a:hover .card-title,
  217.   .card3 > a:active .card-title {
  218.     color: #212529;
  219.   }
  220.   .card3 > a .card-icon-top,
  221.   .card3 > a .card-icon-top {
  222.     -webkit-transition: all 200ms ease-in-out;
  223.     transition: all 200ms ease-in-out;
  224.   }
  225.   .card3 > a:hover .card-icon-top,
  226.   .card3 > a:active .card-icon-top {
  227.     transform: scale(1.4);
  228.   }
  229.   .card3 > a:hover .text-muted,
  230.   .card3 > a:active .text-muted {
  231.     color: #fff !important;
  232.   }
  233.   .card3 > a:hover .card-tags:before,
  234.   .card3 > a:active .card-tags:before {
  235.     background-color: #fff;
  236.   }
  237.   .card4 {
  238.     -webkit-transition: all 200ms ease-in-out;
  239.     transition: all 200ms ease-in-out;
  240.     border: 0;
  241.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  242.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  243.   }
  244.   .card4 > a:hover,
  245.   .card4 > a:active {
  246.     background: #ffffff;
  247.     color: inherit;
  248.     text-decoration: none;
  249.     cursor: url(https://dl.dropbox.com/s/2nmb5ja0g888q8n/arrow.png) 0 0, auto;
  250.   }
  251.   .card4 > a:hover:before,
  252.   .card4 > a:active:before {
  253.     content: "";
  254.     display: block;
  255.     width: 100%;
  256.     height: 100%;
  257.     background: rgba(0, 0, 0, 0.3);
  258.     position: absolute;
  259.   }
  261.   .card4 > a:hover .card-icon-top,
  262.   .card4 > a:hover .card-footer .vfi,
  263.   .card4 > a:hover .card-tags,
  264.   .card4 > a:active .card-icon-top,
  265.   .card4 > a:active .card-footer .vfi,
  266.   .card4 > a:active .card-tags {
  267.     color: inherit;
  268.   }
  269.   .card4 > a:hover .card-title,
  270.   .card4 > a:active .card-title {
  271.     color: #212529;
  272.   }
  273.   .card4 > a .card-icon-top,
  274.   .card4 > a .card-icon-top {
  275.     -webkit-transition: all 200ms ease-in-out;
  276.     transition: all 200ms ease-in-out;
  277.   }
  278.   .card4 > a:hover .text-muted,
  279.   .card4 > a:active .text-muted {
  280.     color: #fff !important;
  281.   }
  282.   .card4 > a:hover .card-tags:before,
  283.   .card4 > a:active .card-tags:before {
  284.     background-color: #fff;
  285.   }
  286.   .card.card-row-layout .card-body {
  287.     text-align: left;
  288.   }
  290.   @media (min-width: 500px) {
  291.     .gradien-color-height{
  292.       height: 180px!important;
  293.     }
  294.   }
  295.   @media (max-width: 500px) {
  296.     .gradien-color-height{
  297.       height: 260px!important;
  298.     }
  299.   }
  300.   @media screen and (max-width: 450px){
  301.   #page, #masthead, #content {
  302.       width: 100%!important;;
  303.       overflow: visible!important;;
  304.   }
  305.   }
  307.   @media (min-width: 992px) {
  308.     .card.card-row-layout {
  309.       flex-direction: row;
  310.       align-items: center;
  311.     }
  312.     .card.card-row-layout .card-icon-top {
  313.       margin-top: 0;
  314.       margin-left: 2rem;
  315.     }
  316.     .card.card-row-layout .card-icon-top.card-icon-right {
  317.       order: 100;
  318.       margin-right: 2rem;
  319.     }
  320.     .card.card-row-layout .card-body {
  321.       text-align: left;
  322.     }
  323.     .card.card-row-layout .card-footer {
  324.       padding: 2rem;
  325.     }
  326.     .card.card-row-layout .card-footer .vfi {
  327.       font-size: 3.6rem;
  328.     }
  329.     .card.card-row-layout > a {
  330.       flex-direction: row;
  331.       align-items: center;
  332.       width: 100%;
  333.     }
  334.   }
  335.   .card.card-large .card-title,
  336.   .card.card-featured .card-title {
  337.     color: #212529;
  338.     display: block;
  339.     font-weight: 700;
  340.     font-size: 1.5rem;
  341.     line-height: 1.33333;
  342.   }
  343.   .card.card-large .card-body,
  344.   .card.card-featured .card-body {
  345.     text-align: left;
  346.   }
  347.   @media (min-width: 992px) {
  348.     .card.card-fw .card-img-top {
  349.       margin-left: 1rem;
  350.       max-width: 300px;
  351.       order: 100;
  352.     }
  353.   }
  354.   .card.card-large.card-row-layout .card-body {
  355.     text-align: center;
  356.   }
  357.   @media (min-width: 992px) {
  358.     .card.card-large.card-row-layout .card-body {
  359.       text-align: left;
  360.     }
  361.   }
  362.   @media (min-width: 992px) {
  363.     .card.card-large.card-fw .card-img-top {
  364.       margin-left: 1rem;
  365.       max-width: 400px;
  366.       order: 100;
  367.     }
  368.     .card.card-large.card-fw .vfi {
  369.       color: #fff;
  370.     }
  371.   }
  372.   @media (min-width: 1200px) {
  373.     .card.card-large.card-fw .card-img-top {
  374.       max-width: 500px;
  375.     }
  376.   }
  377.   .card.card-featured .card-body .text-muted {
  378.     display: inline-block;
  379.     margin-bottom: 1.5rem;
  380.   }
  381.   .card.card-featured .card-body .card-footer {
  382.     padding: 0;
  383.   }
  384.   @media (min-width: 992px) {
  385.     .card.card-featured .card-img-top {
  386.       flex: 0 0 50%;
  387.       max-width: 50%;
  388.       margin: 0;
  389.       align-self: start;
  390.     }
  391.     .card.card-featured .card-body {
  392.       display: flex;
  393.       flex-flow: column nowrap;
  394.       height: 100%;
  395.     }
  396.     .card.card-featured .card-body .card-footer {
  397.       margin-top: auto;
  398.     }
  399.   }
  400.   .card.card-label-content .card-title {
  401.     font-weight: 700;
  402.   }
  403.   .card.card-label-content .card-label {
  404.     font-size: 1rem;
  405.   }
  406.   .card .rounded-circle {
  407.     margin: 2rem auto 1rem auto;
  408.     width: 61.5%;
  409.   }
  410.   .card[data-toggle="modal"] {
  411.     cursor: pointer;
  412.   }
  413.   .cards > div,
  414.   .cards .card-item {
  415.     display: flex;
  416.   }
  417.   .cards .card.bg-gray-sky {
  418.     border: none;
  419.   }
  420.   .cards.bg-gray-sky {
  421.     background-color: transparent;
  422.   }
  423.   .cards.bg-gray-sky .card {
  424.     background-color: #f4f6f8;
  425.     border: none;
  426.   }
  427.   .cards.bg-gray-sky .card .vfi {
  428.     color: #097d6c;
  429.   }
  430.   .cards.bg-gray-sky .card a:hover .vfi {
  431.     color: #fff;
  432.   }
  433.   .cards.cards-bs-grid {
  434.     display: flex;
  435.     flex-wrap: wrap;
  436.     margin-right: -15px;
  437.     margin-left: -15px;
  438.   }
  439.   .cards.cards-bs-grid .card-item {
  440.     position: relative;
  441.     width: 100%;
  442.     min-height: 1px;
  443.     padding-right: 15px;
  444.     padding-left: 15px;
  445.     flex: 0 0 100%;
  446.     max-width: 100%;
  447.   }
  448.   @media (min-width: 768px) {
  449.     .cards.cards-bs-grid .card-item {
  450.       flex: 0 0 50%;
  451.       max-width: 50%;
  452.     }
  453.   }
  454.   @media (min-width: 992px) {
  455.     .cards.cards-bs-grid .card-item {
  456.       flex: 0 0 33.33333%;
  457.       max-width: 33.33333%;
  458.     }
  459.   }
  462. /* ============Start Article ========*/
  463. .banner {
  464.   display: block;
  465.   text-decoration: none;
  466.   color: inherit;
  467.   overflow: hidden;
  468.   background-color: hsl(0, 0%, 100%);
  469.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  470.     0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
  471.     0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
  472.     0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  473.   border-radius: 0.375em;
  474.   transition: 0.3s;
  475.   width: 100%;
  476.   margin-inline: auto;
  477. }
  479. .banner__grid {
  480.   display: flex;
  481.   flex-direction: column;
  482. }
  484. .banner__grid > * {
  485.   min-width: 0;
  486. }
  488. .banner__link {
  489.   position: relative;
  490.   text-decoration: none;
  491.   color: hsl(250, 84%, 54%);
  492.   display: inline-block;
  493.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  494.   transform-origin: left bottom;
  495. }
  497. .banner__link i {
  498.   /* label */
  499.   position: relative;
  500.   z-index: 2;
  501.   display: inline-block;
  502.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  503. }
  505. .banner__link::after {
  506.   /* animated border */
  507.   content: "";
  508.   background-color: currentColor;
  509.   height: 2px;
  510.   width: 100%;
  511.   position: absolute;
  512.   z-index: 1;
  513.   bottom: 0;
  514.   left: 0;
  515.   -webkit-clip-path: inset(0% round 0.1875em);
  516.   clip-path: inset(0% round 0.1875em);
  517.   opacity: 0.15;
  518.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  519. }
  521. .banner__figure {
  522.   height: 0;
  523.   width: 100%;
  524.   padding-bottom: 50%;
  525.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  526.   background-position: center center;
  527.   background-repeat: no-repeat;
  528.   background-size: cover;
  529. }
  531. .banner__text {
  532.   padding: 1.5rem;
  533. }
  535. .banner__link-wrapper {
  536.   margin-top: 1rem;
  537. }
  539. .banner:hover {
  540.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  541.     0 0.9px 1.25px hsla(230, 13%, 9%, 0.025), 0 3px 5px hsla(230, 13%, 9%, 0.05),
  542.     0 12px 20px hsla(230, 13%, 9%, 0.09);
  543. }
  545. .banner:hover .banner__link {
  546.   transform: scale(1.3);
  547. }
  549. .banner:hover .banner__link i {
  550.   transform: scale(0.7);
  551. }
  553. .banner:hover .banner__link::after {
  554.   height: 100%;
  555. }
  557. .banner:hover .banner__figure {
  558.   transform: scale(1.05);
  559. }
  561. @media (min-width: 64rem) {
  562.   .banner__grid {
  563.     flex-direction: row-reverse;
  564.   }
  566.   .banner__grid > * {
  567.     width: 50%;
  568.   }
  570.   .banner__figure {
  571.     height: 100%;
  572.     padding-bottom: 0;
  573.     -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  574.     clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  575.   }
  577.   .banner__text {
  578.     padding: 3rem;
  579.   }
  581.   .banner__link-wrapper {
  582.     margin-top: 1.5rem;
  583.   }
  585.   .banner--invert .banner__grid {
  586.     flex-direction: row;
  587.   }
  589.   .banner--invert .banner__figure {
  590.     -webkit-clip-path: polygon(
  591.       0% 0%,
  592.       calc(100% - 100px) 0%,
  593.       calc(100% - 50px) 100%,
  594.       0% 100%
  595.     );
  596.     clip-path: polygon(
  597.       0% 0%,
  598.       calc(100% - 100px) 0%,
  599.       calc(100% - 50px) 100%,
  600.       0% 100%
  601.     );
  602.   }
  604.   .banner--invert .banner__text {
  605.     text-align: right;
  606.   }
  608.   .banner--invert .banner__link {
  609.     transform-origin: right bottom;
  610.   }
  612.   .banner:hover .banner__figure {
  613.     -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  614.     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  615.   }
  616. }
  618. /* ------------------------ Watermark (Please Ignore) ----------------------- */
  619. .watermark-ctr {
  620.   --clr-button-bg: #141414;
  621.   --clr-button: 72, 39, 236;
  622.   --clr-text: #ffffff;
  624.   position: fixed;
  625.   bottom: 1.5rem;
  626.   right: 1.5rem;
  627.   z-index: 1000;
  628. }
  629. .watermark-ctr a {
  630.   text-decoration: none;
  631.   color: inherit;
  632.   display: flex;
  633. }
  634. .generate-button {
  635.   --generate-button-star-1-opacity: 0.25;
  636.   --generate-button-star-1-scale: 1;
  637.   --generate-button-star-2-opacity: 1;
  638.   --generate-button-star-2-scale: 1;
  639.   --generate-button-star-3-opacity: 0.5;
  640.   --generate-button-star-3-scale: 1;
  641.   --generate-button-dots-opacity: 0;
  642.   appearance: none;
  643.   outline: none;
  644.   border: none;
  645.   padding: 14px 24px 14px 20px;
  646.   border-radius: 29px;
  647.   margin: 0;
  648.   background-color: var(--clr-button-bg);
  649.   color: var(--clr-text);
  650.   display: flex;
  651.   align-items: center;
  652.   justify-content: center;
  653.   position: relative;
  654.   cursor: pointer;
  655.   -webkit-tap-highlight-color: transparent;
  656.   z-index: 1;
  657.   transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  658.   box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent),
  659.     0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1),
  660.     inset 0px 1px 1px
  661.       var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)),
  662.     0 0 0 var(--generate-button-shadow-outline, 0px)
  663.       rgba(var(--clr-button), 0.4);
  664.   transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
  665. }
  666. .generate-button:before {
  667.   content: "";
  668.   display: block;
  669.   position: absolute;
  670.   right: 20%;
  671.   height: 20px;
  672.   left: 20%;
  673.   bottom: -10px;
  674.   background: rgba(204, 204, 204, 0.4);
  675.   filter: blur(12.5px);
  676.   z-index: 2;
  677.   clip-path: inset(-200% -30% 10px -30% round 29px);
  678.   opacity: 0;
  679.   transition: opacity 0.4s;
  680.   transform: translateZ(0);
  681. }
  682. .generate-button span {
  683.   position: relative;
  684.   z-index: 1;
  685.   font-family: "Poppins", Arial;
  686.   font-weight: 600;
  687.   font-size: 16px;
  688.   letter-spacing: 0.005em;
  689.   display: block;
  690.   user-select: none;
  691. }
  692. .generate-button .stroke {
  693.   mix-blend-mode: hard-light;
  694. }
  695. .generate-button .stroke svg {
  696.   position: absolute;
  697.   inset: 0;
  698.   width: 100%;
  699.   height: 100%;
  700.   fill: none;
  701.   stroke-width: 0.75px;
  702.   stroke: #e2d9ff;
  703.   stroke-dasharray: 1.5 14;
  704.   stroke-dashoffset: 22;
  705.   opacity: 0;
  706. }
  707. .generate-button .stroke svg:nth-child(2) {
  708.   stroke-width: 1px;
  709.   stroke-opacity: 0.5;
  710.   filter: blur(3px);
  711. }
  713. .generate-button svg.icon {
  714.   width: 18px;
  715.   height: 20px;
  716.   margin-right: 10px;
  717.   fill: currentColor;
  718. }
  719. .generate-button svg.icon path:nth-child(1) {
  720.   opacity: var(--generate-button-star-1-opacity);
  721.   transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
  722.   transform-origin: 25% 14.58%;
  723. }
  724. .generate-button svg.icon path:nth-child(2) {
  725.   opacity: var(--generate-button-star-2-opacity);
  726.   transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
  727.   transform-origin: 60.42% 50%;
  728. }
  729. .generate-button svg.icon path:nth-child(3) {
  730.   opacity: var(--generate-button-star-3-opacity);
  731.   transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
  732.   transform-origin: 25% 85.42%;
  733. }
  734. .generate-button:hover {
  735.   --generate-button-scale: 1.01;
  736.   --generate-button-shadow-wide: rgba(var(--clr-button), 0.4);
  737.   --generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
  738.   --generate-button-shadow-outline: 3px;
  739.   color: var(--clr-text);
  740.   background-color: rgba(var(--clr-button));
  741. }
  742. .generate-button:hover .stroke svg {
  743.   animation: stroke 2s linear infinite;
  744. }
  745. .generate-button:hover:before {
  746.   opacity: 1;
  747. }
  748. .generate-button:hover span:before {
  749.   opacity: 0;
  750. }
  751. .generate-button:hover:active {
  752.   --generate-button-scale: 1.05;
  753. }
  754. @keyframes stroke {
  755.   0% {
  756.     opacity: 0;
  757.   }
  758.   25%,
  759.   75% {
  760.     opacity: 1;
  761.   }
  762.   95%,
  763.   100% {
  764.     stroke-dashoffset: 6;
  765.     opacity: 0;
  766.   }
  767. }
  772. .pagination {
  773.     font-weight: bold;
  774.     font-size: 16px;
  775.     font-family: "helvetica neue", helvetica, arial, sans-serif;
  776.   }
  777.   .pagination a {
  778.     padding: 3px;
  779.     border: 1px solid #262626;
  780.     border-radius: 3px;
  781.     margin: 3px;
  782.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3e3), color-stop(100%, #b8b8b8));
  783.     background: -moz-linear-gradient(top, #e3e3e3, #b8b8b8);
  784.     background: -webkit-linear-gradient(top, #e3e3e3, #b8b8b8);
  785.     background: linear-gradient(to bottom, #e3e3e3, #b8b8b8);
  786.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.4);
  787.     color: #333;
  788.     text-decoration: none;
  789.     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
  790.   }
  791.   .pagination a:hover {
  792.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d90073), color-stop(100%, #a00056));
  793.     background: -moz-linear-gradient(top, #d90073, #a00056);
  794.     background: -webkit-linear-gradient(top, #d90073, #a00056);
  795.     background: linear-gradient(to bottom, #d90073, #a00056);
  796.     color: #260014;
  797.   }
  798.   .pagination a.active {
  799.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00add9), color-stop(100%, #00708c));
  800.     background: -moz-linear-gradient(top, #00add9, #00708c);
  801.     background: -webkit-linear-gradient(top, #00add9, #00708c);
  802.     background: linear-gradient(to bottom, #00add9, #00708c);
  803.     color: #001e26;
  804.   }
  805.   .pagination a.active:hover {
  806.     cursor: default;
  807.   }
  808.   .pagination .prev:before {
  809.     content: "« ";
  810.     font-weight: normal;
  811.   }
  812.   .pagination .next:after {
  813.     content: " »";
  814.     font-weight: normal;
  815.   }
  816.   .pagination .next:hover, .pagination .prev:hover {
  817.     border-color: #141414;
  818.     background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  819.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262626), color-stop(100%, #1a1a1a));
  820.     background: -moz-linear-gradient(top, #262626, #1a1a1a);
  821.     background: -webkit-linear-gradient(top, #262626, #1a1a1a);
  822.     background: linear-gradient(to bottom, #262626, #1a1a1a);
  823.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.1);
  824.     color: #ebebeb;
  825.     text-shadow: none;
  826.   }
  827. </style>
  828. {% endblock %}
  830. {% block userblog_body %}
  832. <div style="background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%);">
  835. {% if position == 'aide' %}
  836.     {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesdemo", {'position': position, 'page': page})) }}
  837. {% else %}
  838.     {% if position == 'faq' %}
  839.         {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesfaq", {'position': position, 'page': page})) }}
  840.     {% else %}
  841.         {% if position == 'blog' %}
  842.             {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesblog", {'position': position, 'page': page})) }}
  843.         {% else %}
  844.             {% if position == 'presentation' %}
  845.                 {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articleapropos", {'position': position, 'page': page})) }}
  846.             {% else %}
  847.                 {% if position == 'garantie' %}
  848.                     {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesengagement", {'position': position, 'page': page})) }}
  849.                 {% else %}
  850.                     {% if position == 'toutinclus' %}
  851.                         {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlestoutinclus", {'position': position, 'page': page})) }}
  852.                     {% else %}
  853.                         {% if position == 'modepaiement' %}
  854.                             {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesmodepaiement", {'position': position, 'page': page})) }}
  855.                         {% else %}
  856.                             {% if position == 'cgu' %}
  857.                                 {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlescgu", {'position': position, 'page': page})) }}
  858.                             {% else %}
  859.                                 {% if position == 'confidentialite' %}
  860.                                     {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:articlesconfidentialite", {'position': position, 'page': page})) }}
  861.                                 {% else %}
  862.                                     
  863.                                         {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:itemaide", {'position': 'menuaide'})) }}
  864.                                         
  865.                                 {% endif %}
  866.                             {% endif %}
  867.                         {% endif %}
  868.                     {% endif %}
  869.                 {% endif %}
  870.             {% endif %}
  871.         {% endif %}
  872.     {% endif %}
  873. {% endif %}
  874. </div>
  875. {% include 'Theme/General/Template/Menu/contacts.html.twig' %}
  877. <div style="border-top: 2px solid #ddd; background: #fff;">
  878.     <div class="container">
  879.     {{ render(controller("App\\Controller\\Users\\User\\BilletController:aviscarousel")) }}
  880.     </div>
  881. </div>
  884. <div class="modal fade" data-backdrop="false" id="modalArticlesDetail" style="margin-top: -75px;">
  885. <div class="modal-dialog modal-md">
  886. <div class="modal-content">
  887. <div class="modal-header color-bottom" style="border-bottom: 4px solid #37c0fb; display: block;">
  888.     <button type="button" class="close" data-dismiss="modal" style="float: right;">&times;</button>
  889.     <h3 class="modal-title custom-title-modal" style="text-transform: capitalize; text-align: left;"> {{ position }} <span class=" fa fa-chevron-right" style="font-size: 20px;"></span> Article #{{ id }}</h3>
  890. </div>
  891. <div class="modal-body">
  892.     <div class="row">
  893.       <div class="col-md-12">
  894.         <div class="wait-chargement-content-module-article" style="text-align: center;">
  895.             Patientez un moment pendant le chargement de l'article</br>
  896.             <img src="{{ asset('template/images/loader1.gif') }}" alt="image" style="height: 40px; width: 40px;">
  897.         </div>
  899.         <div class="content-module-loading-article" style="display: none;">
  900.         
  901.         </div>
  902.       </div>
  903.     </div>
  904. </div>
  905. <div class="modal-footer color-top" style="text-align: right; border-top: 4px solid #37c0fb; display: block;">
  906. {% include "Theme/General/Template/Menu/social.html.twig" %}
  907. </div>
  908. </div>
  909. </div>
  910. </div>
  912. {% endblock %}
  914. {% block srcjavascripttemplate %}
  916. {% endblock %}
  918. {% block javascripttemplate %}
  920. {% for infos in app.session.flashbag.get('information') %}
  921. {% if loop.first %}
  922.     resetNotif();
  923.     alertify.alert("{{ infos }}");
  924. {% endif %}
  925. {% endfor %}
  927. $('a').tooltip();
  929. $('.div-tab-mod').hide();
  930. $('.div-tab-mod:first').show();
  931. $('.tabs-nav li:first').addClass('tab-active');
  933. // Change tab class and display content
  934. $('.tabs-nav a').on('click', function(event){
  935.   event.preventDefault();
  936.   $('.tabs-nav li').removeClass('tab-active');
  937.   $(this).parent().addClass('tab-active');
  938.   $('.div-tab-mod').hide();
  939.   $($(this).attr('href')).show();
  940. });
  942. $(".open").click(function(){
  943.   var container = $(this).parents(".topic");
  944.   var answer = container.find(".answer");
  945.   var trigger = container.find(".faq-t");
  946.   
  947.   answer.slideToggle(200);
  948.   
  949.   if (trigger.hasClass("faq-o")) {
  950.     trigger.removeClass("faq-o");
  951.   }
  952.   else {
  953.     trigger.addClass("faq-o");
  954.   }
  955.   
  956.   if (container.hasClass("expanded")) {
  957.     container.removeClass("expanded");
  958.   }
  959.   else {
  960.     container.addClass("expanded");
  961.   }
  962. });
  964. $('.item-app').hover(function(){
  965.   $(this).find('.popover').stop(true, true).delay(200).fadeIn(200);
  966.   }, function(){
  967.   $(this).find('.popover').stop(true, true).delay(200).fadeOut(200);
  968. });  
  970. $('.open-content-article-reponse').click(function(){
  971.     var id = $(this).attr('value');
  972.     openarticlesupport(id);
  973. });    
  975. function openarticlesupport(id)
  976. {
  977.     $('#modalArticlesDetail').modal('show');
  978.     $('.wait-chargement-content-module-article').show();
  979.     $('.content-module-loading-article').hide();
  980.     $('.custom-title-modal').html('<img src="{{ asset('template/images/diplome.jpg') }}" alt="image" style="height: 40px; width: 40px;"/> {{ position }} <span class="fa fa-gg" style="font-size: 20px;"></span> Article <span class=" fa fa-gg" style="font-size: 20px;"></span> '+id*87);
  981.     $.post('{{ path('produit_service_detail_article_support') }}',{ id: id }, function(data){
  982.         $('.wait-chargement-content-module-article').hide();
  983.         $('.content-module-loading-article').show();
  984.         $('.content-module-loading-article').html(data);
  985.     });
  986. }
  987. {% if id > 0 %}
  988.     openarticlesupport({{ id }});
  989. {% endif %}
  990. {% endblock %}