templates/page/page.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} {{ publication.title }} | WorkDispo {% endblock %}
  4. {% block meta_date_desc %}
  6.     <script type="application/ld+json">
  7.         {
  8.             "@context" : "https://schema.org",
  9.             "@type" : "WebSite",
  10.             "name" : "WorkDispo",
  11.             "url" : "https://www.workdispo.com/",
  12.         {% if publication and publication.getCreatedAt() is not empty %}
  13.                       "datePublished": "{{ publication.getCreatedAt()|date('c') }}",
  14.                     {% endif %}
  16.                     {% if publication and publication.getUpdatedAt() is not empty %}
  17.                       "dateModified": "{{ publication.getUpdatedAt()|date('c') }}"
  18.                     {% endif %}
  19.         }
  20.     </script>
  21. {% endblock %}
  22. {% block meta %}
  23.     <meta charset="utf-8">
  24.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
  25.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  26.     <script type="text/javascript">(window.NREUM || (NREUM = {})).init = {ajax: {deny_list: ["bam.nr-data.net"]}};
  27.         (window.NREUM || (NREUM = {})).loader_config = {
  28.             licenseKey: "NRJS-8c6c895b97ea60d5ee0",
  29.             applicationID: "1333848373"
  30.         };
  31.         window.NREUM || (NREUM = {}), __nr_require = function (t, e, n) {
  32.             function r(n) {
  33.                 if (!e[n]) {
  34.                     var i = e[n] = {exports: {}};
  35.                     t[n][0].call(i.exports, function (e) {
  36.                         var i = t[n][1][e];
  37.                         return r(i || e)
  38.                     }, i, i.exports)
  39.                 }
  40.                 return e[n].exports
  41.             }
  43.             if ("function" == typeof __nr_require) return __nr_require;
  44.             for (var i = 0; i < n.length; i++) r(n[i]);
  45.             return r
  46.         }({
  47.             1: [function (t, e, n) {
  48.                 function r() {
  49.                 }
  51.                 function i(t, e, n, r) {
  52.                     return function () {
  53.                         return s.recordSupportability("API/" + e + "/called"), o(t + e, [u.now()].concat(c(arguments)), n ? null : this, r), n ? void 0 : this
  54.                     }
  55.                 }
  57.                 var o = t("handle"), a = t(9), c = t(10), f = t("ee").get("tracer"), u = t("loader"), s = t(4),
  58.                     d = NREUM;
  59.                 "undefined" == typeof window.newrelic && (newrelic = d);
  60.                 var p = ["setPageViewName", "setCustomAttribute", "setErrorHandler", "finished", "addToTrace", "inlineHit", "addRelease"],
  61.                     l = "api-", v = l + "ixn-";
  62.                 a(p, function (t, e) {
  63.                     d[e] = i(l, e, !0, "api")
  64.                 }), d.addPageAction = i(l, "addPageAction", !0), d.setCurrentRouteName = i(l, "routeName", !0), e.exports = newrelic, d.interaction = function () {
  65.                     return (new r).get()
  66.                 };
  67.                 var m = r.prototype = {
  68.                     createTracer: function (t, e) {
  69.                         var n = {}, r = this, i = "function" == typeof e;
  70.                         return o(v + "tracer", [u.now(), t, n], r), function () {
  71.                             if (f.emit((i ? "" : "no-") + "fn-start", [u.now(), r, i], n), i) try {
  72.                                 return e.apply(this, arguments)
  73.                             } catch (t) {
  74.                                 throw f.emit("fn-err", [arguments, this, t], n), t
  75.                             } finally {
  76.                                 f.emit("fn-end", [u.now()], n)
  77.                             }
  78.                         }
  79.                     }
  80.                 };
  81.                 a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","), function (t, e) {
  82.                     m[e] = i(v, e)
  83.                 }), newrelic.noticeError = function (t, e) {
  84.                     "string" == typeof t && (t = new Error(t)), s.recordSupportability("API/noticeError/called"), o("err", [t, u.now(), !1, e])
  85.                 }
  86.             }, {}], 2: [function (t, e, n) {
  87.                 function r(t) {
  88.                     if (NREUM.init) {
  89.                         for (var e = NREUM.init, n = t.split("."), r = 0; r < n.length - 1; r++) if (e = e[n[r]], "object" != typeof e) return;
  90.                         return e = e[n[n.length - 1]]
  91.                     }
  92.                 }
  94.                 e.exports = {getConfiguration: r}
  95.             }, {}], 3: [function (t, e, n) {
  96.                 var r = !1;
  97.                 try {
  98.                     var i = Object.defineProperty({}, "passive", {
  99.                         get: function () {
  100.                             r = !0
  101.                         }
  102.                     });
  103.                     window.addEventListener("testPassive", null, i), window.removeEventListener("testPassive", null, i)
  104.                 } catch (o) {
  105.                 }
  106.                 e.exports = function (t) {
  107.                     return r ? {passive: !0, capture: !!t} : !!t
  108.                 }
  109.             }, {}], 4: [function (t, e, n) {
  110.                 function r(t, e) {
  111.                     var n = [a, t, {name: t}, e];
  112.                     return o("storeMetric", n, null, "api"), n
  113.                 }
  115.                 function i(t, e) {
  116.                     var n = [c, t, {name: t}, e];
  117.                     return o("storeEventMetrics", n, null, "api"), n
  118.                 }
  120.                 var o = t("handle"), a = "sm", c = "cm";
  121.                 e.exports = {
  122.                     constants: {SUPPORTABILITY_METRIC: a, CUSTOM_METRIC: c},
  123.                     recordSupportability: r,
  124.                     recordCustom: i
  125.                 }
  126.             }, {}], 5: [function (t, e, n) {
  127.                 function r() {
  128.                     return c.exists && performance.now ? Math.round(performance.now()) : (o = Math.max((new Date).getTime(), o)) - a
  129.                 }
  131.                 function i() {
  132.                     return o
  133.                 }
  135.                 var o = (new Date).getTime(), a = o, c = t(11);
  136.                 e.exports = r, e.exports.offset = a, e.exports.getLastTimestamp = i
  137.             }, {}], 6: [function (t, e, n) {
  138.                 function r(t, e) {
  139.                     var n = t.getEntries();
  140.                     n.forEach(function (t) {
  141.                         "first-paint" === t.name ? l("timing", ["fp", Math.floor(t.startTime)]) : "first-contentful-paint" === t.name && l("timing", ["fcp", Math.floor(t.startTime)])
  142.                     })
  143.                 }
  145.                 function i(t, e) {
  146.                     var n = t.getEntries();
  147.                     if (n.length > 0) {
  148.                         var r = n[n.length - 1];
  149.                         if (u && u < r.startTime) return;
  150.                         var i = [r], o = a({});
  151.                         o && i.push(o), l("lcp", i)
  152.                     }
  153.                 }
  155.                 function o(t) {
  156.                     t.getEntries().forEach(function (t) {
  157.                         t.hadRecentInput || l("cls", [t])
  158.                     })
  159.                 }
  161.                 function a(t) {
  162.                     var e = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  163.                     if (e) return e.type && (t["net-type"] = e.type), e.effectiveType && (t["net-etype"] = e.effectiveType), e.rtt && (t["net-rtt"] = e.rtt), e.downlink && (t["net-dlink"] = e.downlink), t
  164.                 }
  166.                 function c(t) {
  167.                     if (t instanceof y && !w) {
  168.                         var e = Math.round(t.timeStamp), n = {type: t.type};
  169.                         a(n), e <= v.now() ? n.fid = v.now() - e : e > v.offset && e <= Date.now() ? (e -= v.offset, n.fid = v.now() - e) : e = v.now(), w = !0, l("timing", ["fi", e, n])
  170.                     }
  171.                 }
  173.                 function f(t) {
  174.                     "hidden" === t && (u = v.now(), l("pageHide", [u]))
  175.                 }
  177.                 if (!("init" in NREUM && "page_view_timing" in NREUM.init && "enabled" in NREUM.init.page_view_timing && NREUM.init.page_view_timing.enabled === !1)) {
  178.                     var u, s, d, p, l = t("handle"), v = t("loader"), m = t(8), g = t(3), y = NREUM.o.EV;
  179.                     if ("PerformanceObserver" in window && "function" == typeof window.PerformanceObserver) {
  180.                         s = new PerformanceObserver(r);
  181.                         try {
  182.                             s.observe({entryTypes: ["paint"]})
  183.                         } catch (h) {
  184.                         }
  185.                         d = new PerformanceObserver(i);
  186.                         try {
  187.                             d.observe({entryTypes: ["largest-contentful-paint"]})
  188.                         } catch (h) {
  189.                         }
  190.                         p = new PerformanceObserver(o);
  191.                         try {
  192.                             p.observe({type: "layout-shift", buffered: !0})
  193.                         } catch (h) {
  194.                         }
  195.                     }
  196.                     if ("addEventListener" in document) {
  197.                         var w = !1, b = ["click", "keydown", "mousedown", "pointerdown", "touchstart"];
  198.                         b.forEach(function (t) {
  199.                             document.addEventListener(t, c, g(!1))
  200.                         })
  201.                     }
  202.                     m(f)
  203.                 }
  204.             }, {}], 7: [function (t, e, n) {
  205.                 function r(t, e) {
  206.                     if (!i) return !1;
  207.                     if (t !== i) return !1;
  208.                     if (!o) return !1;
  209.                     for (var n = o.split("."), r = e.split("."), a = 0; a < r.length; a++) if (r[a] !== n[a]) return !1;
  210.                     return !0
  211.                 }
  213.                 var i = null, o = null, a = /Version\/(\S+)\s+Safari/;
  214.                 if (navigator.userAgent) {
  215.                     var c = navigator.userAgent, f = c.match(a);
  216.                     f && c.indexOf("Chrome") === -1 && c.indexOf("Chromium") === -1 && (i = "Safari", o = f[1])
  217.                 }
  218.                 e.exports = {agent: i, version: o, match: r}
  219.             }, {}], 8: [function (t, e, n) {
  220.                 function r(t) {
  221.                     function e() {
  222.                         t(c && document[c] ? document[c] : document[o] ? "hidden" : "visible")
  223.                     }
  225.                     "addEventListener" in document && a && document.addEventListener(a, e, i(!1))
  226.                 }
  228.                 var i = t(3);
  229.                 e.exports = r;
  230.                 var o, a, c;
  231.                 "undefined" != typeof document.hidden ? (o = "hidden", a = "visibilitychange", c = "visibilityState") : "undefined" != typeof document.msHidden ? (o = "msHidden", a = "msvisibilitychange") : "undefined" != typeof document.webkitHidden && (o = "webkitHidden", a = "webkitvisibilitychange", c = "webkitVisibilityState")
  232.             }, {}], 9: [function (t, e, n) {
  233.                 function r(t, e) {
  234.                     var n = [], r = "", o = 0;
  235.                     for (r in t) i.call(t, r) && (n[o] = e(r, t[r]), o += 1);
  236.                     return n
  237.                 }
  239.                 var i = Object.prototype.hasOwnProperty;
  240.                 e.exports = r
  241.             }, {}], 10: [function (t, e, n) {
  242.                 function r(t, e, n) {
  243.                     e || (e = 0), "undefined" == typeof n && (n = t ? t.length : 0);
  244.                     for (var r = -1, i = n - e || 0, o = Array(i < 0 ? 0 : i); ++r < i;) o[r] = t[e + r];
  245.                     return o
  246.                 }
  248.                 e.exports = r
  249.             }, {}], 11: [function (t, e, n) {
  250.                 e.exports = {exists: "undefined" != typeof window.performance && window.performance.timing && "undefined" != typeof window.performance.timing.navigationStart}
  251.             }, {}], ee: [function (t, e, n) {
  252.                 function r() {
  253.                 }
  255.                 function i(t) {
  256.                     function e(t) {
  257.                         return t && t instanceof r ? t : t ? u(t, f, a) : a()
  258.                     }
  260.                     function n(n, r, i, o, a) {
  261.                         if (a !== !1 && (a = !0), !l.aborted || o) {
  262.                             t && a && t(n, r, i);
  263.                             for (var c = e(i), f = m(n), u = f.length, s = 0; s < u; s++) f[s].apply(c, r);
  264.                             var p = d[w[n]];
  265.                             return p && p.push([b, n, r, c]), c
  266.                         }
  267.                     }
  269.                     function o(t, e) {
  270.                         h[t] = m(t).concat(e)
  271.                     }
  273.                     function v(t, e) {
  274.                         var n = h[t];
  275.                         if (n) for (var r = 0; r < n.length; r++) n[r] === e && n.splice(r, 1)
  276.                     }
  278.                     function m(t) {
  279.                         return h[t] || []
  280.                     }
  282.                     function g(t) {
  283.                         return p[t] = p[t] || i(n)
  284.                     }
  286.                     function y(t, e) {
  287.                         l.aborted || s(t, function (t, n) {
  288.                             e = e || "feature", w[n] = e, e in d || (d[e] = [])
  289.                         })
  290.                     }
  292.                     var h = {}, w = {}, b = {
  293.                         on: o,
  294.                         addEventListener: o,
  295.                         removeEventListener: v,
  296.                         emit: n,
  297.                         get: g,
  298.                         listeners: m,
  299.                         context: e,
  300.                         buffer: y,
  301.                         abort: c,
  302.                         aborted: !1
  303.                     };
  304.                     return b
  305.                 }
  307.                 function o(t) {
  308.                     return u(t, f, a)
  309.                 }
  311.                 function a() {
  312.                     return new r
  313.                 }
  315.                 function c() {
  316.                     (d.api || d.feature) && (l.aborted = !0, d = l.backlog = {})
  317.                 }
  319.                 var f = "nr@context", u = t("gos"), s = t(9), d = {}, p = {}, l = e.exports = i();
  320.                 e.exports.getOrSetContext = o, l.backlog = d
  321.             }, {}], gos: [function (t, e, n) {
  322.                 function r(t, e, n) {
  323.                     if (i.call(t, e)) return t[e];
  324.                     var r = n();
  325.                     if (Object.defineProperty && Object.keys) try {
  326.                         return Object.defineProperty(t, e, {value: r, writable: !0, enumerable: !1}), r
  327.                     } catch (o) {
  328.                     }
  329.                     return t[e] = r, r
  330.                 }
  332.                 var i = Object.prototype.hasOwnProperty;
  333.                 e.exports = r
  334.             }, {}], handle: [function (t, e, n) {
  335.                 function r(t, e, n, r) {
  336.                     i.buffer([t], r), i.emit(t, e, n)
  337.                 }
  339.                 var i = t("ee").get("handle");
  340.                 e.exports = r, r.ee = i
  341.             }, {}], id: [function (t, e, n) {
  342.                 function r(t) {
  343.                     var e = typeof t;
  344.                     return !t || "object" !== e && "function" !== e ? -1 : t === window ? 0 : a(t, o, function () {
  345.                         return i++
  346.                     })
  347.                 }
  349.                 var i = 1, o = "nr@id", a = t("gos");
  350.                 e.exports = r
  351.             }, {}], loader: [function (t, e, n) {
  352.                 function r() {
  353.                     if (!M++) {
  354.                         var t = T.info = NREUM.info, e = m.getElementsByTagName("script")[0];
  355.                         if (setTimeout(u.abort, 3e4), !(t && t.licenseKey && t.applicationID && e)) return u.abort();
  356.                         f(x, function (e, n) {
  357.                             t[e] || (t[e] = n)
  358.                         });
  359.                         var n = a();
  360.                         c("mark", ["onload", n + T.offset], null, "api"), c("timing", ["load", n]);
  361.                         var r = m.createElement("script");
  362.                         0 === t.agent.indexOf("http://") || 0 === t.agent.indexOf("https://") ? r.src = t.agent : r.src = l + "://" + t.agent, e.parentNode.insertBefore(r, e)
  363.                     }
  364.                 }
  366.                 function i() {
  367.                     "complete" === m.readyState && o()
  368.                 }
  370.                 function o() {
  371.                     c("mark", ["domContent", a() + T.offset], null, "api")
  372.                 }
  374.                 var a = t(5), c = t("handle"), f = t(9), u = t("ee"), s = t(7), d = t(2), p = t(3),
  375.                     l = d.getConfiguration("ssl") === !1 ? "http" : "https", v = window, m = v.document,
  376.                     g = "addEventListener", y = "attachEvent", h = v.XMLHttpRequest, w = h && h.prototype, b = !1;
  377.                 NREUM.o = {
  378.                     ST: setTimeout,
  379.                     SI: v.setImmediate,
  380.                     CT: clearTimeout,
  381.                     XHR: h,
  382.                     REQ: v.Request,
  383.                     EV: v.Event,
  384.                     PR: v.Promise,
  385.                     MO: v.MutationObserver
  386.                 };
  387.                 var E = "" + location, x = {
  388.                     beacon: "bam.nr-data.net",
  389.                     errorBeacon: "bam.nr-data.net",
  390.                     agent: "js-agent.newrelic.com/nr-1216.min.js"
  391.                 }, O = h && w && w[g] && !/CriOS/.test(navigator.userAgent), T = e.exports = {
  392.                     offset: a.getLastTimestamp(),
  393.                     now: a,
  394.                     origin: E,
  395.                     features: {},
  396.                     xhrWrappable: O,
  397.                     userAgent: s,
  398.                     disabled: b
  399.                 };
  400.                 if (!b) {
  401.                     t(1), t(6), m[g] ? (m[g]("DOMContentLoaded", o, p(!1)), v[g]("load", r, p(!1))) : (m[y]("onreadystatechange", i), v[y]("onload", r)), c("mark", ["firstbyte", a.getLastTimestamp()], null, "api");
  402.                     var M = 0
  403.                 }
  404.             }, {}], "wrap-function": [function (t, e, n) {
  405.                 function r(t, e) {
  406.                     function n(e, n, r, f, u) {
  407.                         function nrWrapper() {
  408.                             var o, a, s, p;
  409.                             try {
  410.                                 a = this, o = d(arguments), s = "function" == typeof r ? r(o, a) : r || {}
  411.                             } catch (l) {
  412.                                 i([l, "", [o, a, f], s], t)
  413.                             }
  414.                             c(n + "start", [o, a, f], s, u);
  415.                             try {
  416.                                 return p = e.apply(a, o)
  417.                             } catch (v) {
  418.                                 throw c(n + "err", [o, a, v], s, u), v
  419.                             } finally {
  420.                                 c(n + "end", [o, a, p], s, u)
  421.                             }
  422.                         }
  424.                         return a(e) ? e : (n || (n = ""), nrWrapper[p] = e, o(e, nrWrapper, t), nrWrapper)
  425.                     }
  427.                     function r(t, e, r, i, o) {
  428.                         r || (r = "");
  429.                         var c, f, u, s = "-" === r.charAt(0);
  430.                         for (u = 0; u < e.length; u++) f = e[u], c = t[f], a(c) || (t[f] = n(c, s ? f + r : r, i, f, o))
  431.                     }
  433.                     function c(n, r, o, a) {
  434.                         if (!v || e) {
  435.                             var c = v;
  436.                             v = !0;
  437.                             try {
  438.                                 t.emit(n, r, o, e, a)
  439.                             } catch (f) {
  440.                                 i([f, n, r, o], t)
  441.                             }
  442.                             v = c
  443.                         }
  444.                     }
  446.                     return t || (t = s), n.inPlace = r, n.flag = p, n
  447.                 }
  449.                 function i(t, e) {
  450.                     e || (e = s);
  451.                     try {
  452.                         e.emit("internal-error", t)
  453.                     } catch (n) {
  454.                     }
  455.                 }
  457.                 function o(t, e, n) {
  458.                     if (Object.defineProperty && Object.keys) try {
  459.                         var r = Object.keys(t);
  460.                         return r.forEach(function (n) {
  461.                             Object.defineProperty(e, n, {
  462.                                 get: function () {
  463.                                     return t[n]
  464.                                 }, set: function (e) {
  465.                                     return t[n] = e, e
  466.                                 }
  467.                             })
  468.                         }), e
  469.                     } catch (o) {
  470.                         i([o], n)
  471.                     }
  472.                     for (var a in t) l.call(t, a) && (e[a] = t[a]);
  473.                     return e
  474.                 }
  476.                 function a(t) {
  477.                     return !(t && t instanceof Function && t.apply && !t[p])
  478.                 }
  480.                 function c(t, e) {
  481.                     var n = e(t);
  482.                     return n[p] = t, o(t, n, s), n
  483.                 }
  485.                 function f(t, e, n) {
  486.                     var r = t[e];
  487.                     t[e] = c(r, n)
  488.                 }
  490.                 function u() {
  491.                     for (var t = arguments.length, e = new Array(t), n = 0; n < t; ++n) e[n] = arguments[n];
  492.                     return e
  493.                 }
  495.                 var s = t("ee"), d = t(10), p = "nr@original", l = Object.prototype.hasOwnProperty, v = !1;
  496.                 e.exports = r, e.exports.wrapFunction = c, e.exports.wrapInPlace = f, e.exports.argsToArray = u
  497.             }, {}]
  498.         }, {}, ["loader"]);</script>
  499.     <meta property="og:type" content="WorkDispo"/>
  501.     <meta property="og:image"
  502.           content="{{ asset( publication.publicationImage ? 'uploads/img/'~publication.publicationImage.path : 'images/blog-04.jpg') }}">
  503.     <meta name="description" content="{{ publication.description }}">
  504.     <meta name="keywords" content="{{ publication.keywodrs }}">
  505.     <meta property="og:title" content="{{ publication.title }}"/>
  507.     {% if publication.updatedAt %}
  508.         <meta name="revised" content="{{ publication.updatedAt|date('d/m/Y') }}"/>
  509.     {% else %}
  510.         <meta name="revised" content="{{ publication.createdAt|date('d/m/Y') }}"/>
  511.     {% endif %}
  512. {% endblock %}
  513. {% block stylesheets %}
  514.     <style>
  515.         .blog-post-content h1 {
  516.             color: black !important;
  517.         }
  519.         .mobile-device {
  520.             display: none;
  521.         }
  523.         .large-device {
  524.             display: block;
  525.         }
  527.         .ez-toc-link {
  528.             position: relative;
  529.             padding-left: 24px; /* Adjust based on the width of the icon */
  530.             text-decoration: none; /* Remove underline */
  531.             color: blue; /* Default color */
  532.         }
  534.         .ez-toc-link .icon {
  535.             position: absolute;
  536.             left: 0;
  537.             top: 50%;
  538.             transform: translateY(-50%);
  539.             display: none; /* Hide icon by default */
  540.             fill: #2a41e8;
  541.         }
  543.         .ez-toc-link.active .icon,
  544.         .ez-toc-link.visited .icon {
  545.             display: block; /* Show icon when active or visited */
  546.         }
  548.         .ez-toc-link.active {
  549.             color: blue; /* Color when active */
  550.         }
  552.         .ez-toc-link.active a {
  553.             color: #2a41e8;
  554.         }
  556.         .ez-toc-link.visited {
  557.             color: gray; /* Color when visited */
  558.         }
  561.         .sidebar-sticky {
  562.             overflow-y: hidden;
  563.         }
  565.         .toc-title {
  566.             color: #000000;
  567.             font-size: 1.8rem;
  568.             font-weight: 700;
  569.             text-align: center;
  570.             margin-bottom: 1.5rem;
  572.         }
  574.         .ez-toc-container-direction {
  575.             display: flex;
  576.             flex-direction: column;
  577.             height: 100%;
  578.         }
  580.         .toc-content {
  581.             overflow: hidden; /* Cache la scrollbar horizontale */
  582.         }
  584.         .ez-toc-list {
  585.             max-height: 200px; /* Définissez la hauteur maximale de la liste défilante selon votre besoin */
  586.             overflow-y: auto; /* Permet le défilement vertical */
  587.             padding-right: 15px; /* Pour compenser la disparition de la scrollbar */
  588.             scrollbar-width: none; /* Cacher la scrollbar pour Firefox */
  589.         }
  591.         #sidebar-container::-webkit-scrollbar {
  592.             /*display: none; !* Cacher la scrollbar pour les navigateurs Webkit *!*/
  593.         }
  595.         .sidebar-sticky {
  596.             border: 3px solid #f1f1f1;
  597.             border-radius: 10px;
  598.             padding: 20px 0 10px 0;
  599.             margin-bottom: 8px;
  600.             position: sticky;
  601.             top: 14%;
  602.         }
  604.         #sidebar-container {
  605.             max-height: 230px !important;
  606.         }
  608.         .toc-container {
  609.             overflow-y: scroll;
  610.         }
  612.         .ez-toc-list::-webkit-scrollbar {
  613.             display: none;
  614.         }
  616.         .ez-toc-list li {
  617.             list-style: none;
  618.             position: relative;
  619.             padding-left: 25px;
  620.             margin-bottom: 10px;
  621.         }
  623.         .ez-toc-page-1 a.ez-toc-link {
  624.             color: gray;
  625.             text-decoration: none; /* Enlève la décoration du texte (soulignement) */
  626.             font-size: medium;
  627.         }
  629.         .ez-toc-page-1 a.ez-toc-link.active {
  630.             color: #2a41e8;
  631.         }
  633.         div.clicked-link a {
  634.             color: grey;
  635.             opacity: 0.8;
  636.         }
  639.         /*.ez-toc-list li:before {*/
  640.         /*    content: "\f00c"; !* Code Unicode pour l'icône de coche de Font Awesome *!*/
  641.         /*    font-family: "Font Awesome 5 Free"; !* Police de Font Awesome *!*/
  642.         /*    font-weight: 900; !* Pour la version solide de l'icône *!*/
  643.         /*    color: green; !* Couleur de l'icône, vous pouvez la changer selon vos besoins *!*/
  644.         /*    position: absolute;*/
  645.         /*    left: 0;*/
  646.         /*    top: 0;*/
  647.         /*}*/
  650.         .widget-content {
  651.             position: relative;
  652.         }
  655.         .breadcrumb-container {
  656.             font-size: 11px;
  657.             color: white;
  658.             position: absolute;
  659.             top: 0px; /* Ajustez la valeur selon votre besoin */
  660.             left: 10px; /* Ajustez la valeur selon votre besoin */
  661.             z-index: 100; /* Assurez-vous que cette valeur est plus élevée que celle de l'image */
  662.         }
  664.         .breadcrumb {
  666.             /*background-color: white;*/
  667.             padding: 10px 16px;
  668.             list-style: none;
  669.             display: flex;
  670.             align-items: center;
  671.             border-radius: 5px; /* Ajoutez des bordures arrondies si nécessaire */
  672.         }
  675.         .breadcrumb-item a {
  676.             color: white; /* Couleur du texte du lien */
  677.             text-decoration: none; /* Supprime le soulignement du lien */
  678.             cursor: pointer; /* Assure que le curseur devient une main */
  679.         }
  681.         .breadcrumb-item a:hover {
  682.             text-decoration: none; /* Soulignement au survol */
  683.         }
  685.         .breadcrumb-item.active {
  686.             color: white; /* Couleur du texte pour l'élément actif */
  687.             font-size: 12px;
  688.             text-decoration: underline;
  689.             text-decoration-color: blue; /* Couleur du soulignement */
  690.             text-decoration-thickness: 2px; /* Épaisseur du soulignement */
  691.             text-underline-offset: 4px; /* Espace entre le texte et le soulignement */
  692.         }
  694.         .breadcrumb-item.active a {
  695.             text-decoration: none; /* Supprime le soulignement pour l'élément actif */
  696.             cursor: default; /* Coursur de texte pour l'élément actif */
  697.         }
  700.         .blog-post-content ol {
  701.             margin: 0 0 0 20px !important;
  702.         }
  704.         .blog-post-content h2 {
  705.             font-weight: bold;
  706.             scroll-margin-top: 80px; /* Pour que le scroll auto s'arrête juste au début du h2 */
  707.         }
  709.         .blog-post-content h3 {
  710.             color: black !important;
  711.             font-size: 20px !important;
  712.             font-weight: bold;
  713.             display: inline-block; /* Assure que l'élément h3 ne prend que la largeur nécessaire */
  714.             text-decoration: underline; /* Soulignement du texte */
  715.             text-decoration-color: #2a41e8; /* Couleur du soulignement */
  716.             text-underline-position: under;
  717.         }
  719.         .closeButtonContainer {
  720.             display: flex;
  721.             justify-content: flex-end;
  722.         }
  724.         .scroll-block {
  725.             position: fixed;
  726.             bottom: 0; /* Initially hidden below the screen */
  727.             left: 5%;
  728.             width: 90%;
  729.             background-color: #333;
  730.             color: #fff;
  731.             padding: 12px 20px 41px 20px;
  732.             transition: bottom 0.3s ease; /* Smooth transition for hiding */
  733.             transform: translateY(100%); /* Le bloc est déplacé vers le bas de l'écran */
  734.             display: none;
  735.         }
  737.         .visible {
  738.             transform: translateY(0);
  739.         }
  741.         .hidden {
  742.             transform: translateY(100%);
  743.         }
  745.         .hidden_btn {
  746.             transform: translateY(100%) !important;
  747.         }
  749.         @media only screen and (max-width: 500px) {
  750.             #wrapper {
  751.                 width: -webkit-fill-available;
  752.             }
  754.             .sidebar-sticky {
  755.                 position: static !important;
  756.                 margin-bottom: 1rem;
  757.             }
  759.             .ez-toc-list li {
  760.                 list-style-type: none !important; /* Remove bullets from the list */
  761.                 padding-left: 9px !important; /* Remove padding from the list */
  762.             }
  764.             .mobile-device {
  765.                 display: block;
  766.             }
  768.             .large-device {
  769.                 display: none;
  770.             }
  772.             .scroll-block {
  773.                 display: block;
  774.                 border-radius: 20px;
  775.                 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://www.abcportage.fr/wp-content/themes/abcportage/assets/build/img/img_cta_right_small.jpg);
  776.                 background-size: cover;
  777.                 color: white;
  778.                 z-index: 200 !important;
  779.                 flex-direction: column;
  780.                 margin-bottom: -12px;
  781.             }
  782.         }
  784.         .btn-mission-spec {
  785.             border-radius: 50px !important;
  786.             padding: 12px 24px !important;
  787.             font-size: 20px !important;
  788.             font-weight: 500 !important;
  789.             background-clip: padding-box;
  790.             background-color: rgb(33 99 139) !important;
  791.         }
  793.         .btn-mission-spec-flottant {
  794.             border-radius: 50px !important;
  795.             padding: 10px 24px !important;
  796.             font-size: 20px !important;
  797.             font-weight: 500 !important;
  798.             background-clip: padding-box;
  799.             background-color: #2a41e8 !important;
  800.         }
  802.         #breadcrumbs {
  803.             transform: translateY(-190%);
  804.             right: 1.2% !important;
  805.         }
  807.         #breadcrumbs ul {
  808.             display: flex;
  809.         }
  812.         .btn-mission-spec:hover {
  813.             background-color: #2a41e8 !important; /* Utilisation de RGBA avec une opacité de 1 (complètement opaque) */
  815.         }
  817.         .spec-breadcrumbs {
  818.             bottom: -5rem !important;
  819.             top: auto !important;
  820.         }
  822.         .end-list-crumbs::before {
  823.             display: none !important;
  824.         }
  826.         .blog-post-content ul {
  827.             list-style-type: none; /* Supprimer les puces par défaut */
  828.         }
  830.         .blog-post-content ul li::before {
  831.             content: "\2022"; /* Code Unicode pour un point (•) */
  832.             color: #2a41e8; /* Couleur bleue pour les puces */
  833.             display: inline-block;
  834.             width: 1em; /* Espacement entre la puce et le texte */
  835.             margin-left: -1em; /* Pour aligner la puce avec le texte */
  836.         }
  838.         .blog-post-content ol {
  839.             list-style-type: decimal; /* Style de numéro par défaut pour les listes ordonnées */
  840.         }
  842.         /* Styles pour les listes ordonnées */
  843.         .blog-post-content ol {
  844.             list-style-type: none; /* Supprimer les numéros par défaut */
  845.             margin: 0; /* Supprimer les marges */
  846.             padding: 0; /* Supprimer les paddings */
  847.         }
  849.         .blog-post-content ol::marker {
  850.             color: #2a41e8; /* Couleur bleue pour les numéros */
  851.         }
  853.         .blog-post-content ol > li {
  854.             counter-increment: my-counter;
  855.         }
  857.         .blog-post-content ol > li::before {
  858.             content: counter(my-counter) "."; /* Utiliser le compteur pour les listes ordonnées avec un point */
  859.             color: #2a41e8; /* Couleur bleue pour les numéros */
  860.             font-weight: bold; /* Pour rendre les numéros en gras */
  861.             margin-right: 0.5em; /* Espacement entre le numéro et le texte */
  862.         }
  864.         .blog-post-content ol > li > *:first-child {
  865.             display: contents; /* Appliquer display: contents; à la première balise enfant de chaque li */
  866.         }
  868.         .blog-post-content h1,
  869.         .blog-post-content h2,
  870.         .blog-post-content h3 {
  871.             color: #2a41e8;
  872.         }
  874.         .widget-content.active:before, .widget-content:hover:before {
  875.             opacity: 0.8 !important;
  876.         }
  879.         @media (max-width: 980px) {
  880.             .spec {
  881.                 flex-basis: 100% !important;
  882.                 max-width: 100% !important;
  883.             }
  885.             .spec:last-child {
  886.                 margin-top: 16px !important; /* Ajoute une marge supérieure de 16px uniquement au dernier élément spécifique */
  887.             }
  889.             .spec-breadcrumbs {
  890.                 bottom: auto !important;
  891.                 top: 50% !important;
  892.             }
  894.             .article-right-flottant {
  895.                 max-width: 100% !important;
  896.                 margin: 0 !important;
  897.                 padding: 1rem 2rem !important;
  898.             }
  900.             .blog-post.single-post.spec {
  901.                 margin: 3rem 0rem !important;
  902.             }
  904.             #breadcrumbs {
  905.                 transform: translateY(-20%) translateX(-26px);
  906.             }
  908.             .blog-post.single-post .blog-post-thumbnail {
  909.                 width: 100%;
  910.                 height: 250px;
  911.             }
  914.         }
  916.         @media screen and (max-width: 500px) {
  917.             .blog-post-content h1 {
  918.                 font-size: 46px !important;
  919.             }
  921.             .blog-post-content {
  922.                 padding: 32px;
  923.             }
  925.             .blog-post-content ul {
  926.                 padding-inline-start: 20px;
  927.             }
  929.             .blog-post, .single-page-header .header-image {
  930.                 box-shadow: none !important;
  931.             }
  933.             #breadcrumbs {
  934.                 font-size: 12px !important;
  935.             }
  937.             .blog-post.single-post.spec {
  938.                 margin: 0 !important;
  939.             }
  941.             .blog-post-content {
  942.                 padding: 20px 2rem !important;
  943.             }
  944.         }
  945.     </style>
  946. {% endblock %}
  948. {% block body %}
  949.     <div class="container">
  951.         <div class="row">
  952.             <div class="col-md-12 margin-bottom-16 margin-top-16" style="padding: 0 32px;">
  953.                 <div class="widget-content active text-center" style="border-radius: 20px;position:relative">
  954.                     <img src={{ asset('uploads/img/6287a440d1176.jpg') }} alt="">
  955.                     <div class="overlay"></div>
  956.                     <nav aria-label="breadcrumb" class="breadcrumb-container">
  957.                         <ol class="breadcrumb">
  958.                             <li class="breadcrumb-item"><a href="{{ path('homepage') }}">Accueil</a></li>
  959.                             &nbsp;>&nbsp;
  960.                             <li class="breadcrumb-item active" aria-current="page">{{ publication.breadcrumbs }}</li>
  961.                         </ol>
  962.                     </nav>
  963.                     <div class="widget-text">
  964.                         <p style="font-size: 30px; line-height: 45px; color: white; font-weight: 600;">Offres d'emploi et missions freelance sans commission en France</p>
  965.                         <a href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE') and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('offre_search') }}">
  966.                             <span class="btn-mission-spec">Voir les offres</span>
  967.                         </a>
  968.                     </div>
  969.                 </div>
  970.             </div>
  971.             {#             <div class="col-md-12"> #}
  972.             {#                 <nav id="breadcrumbs" class="dark spec-breadcrumbs" #}
  973.             {#                      style="top: 0;right: 16px;bottom: -5rem;"> #}
  974.             {#                     <ul> #}
  975.             {#                         <li><a href="/">Accueil</a></li> #}
  976.             {#                         {% if publication.breadcrumbs %} #}
  977.             {#                             <li>{{ publication.breadcrumbs }}</li> #}
  978.             {#                         {% endif %} #}
  979.             {#                     </ul> #}
  980.             {#                 </nav> #}
  981.             {#             </div> #}
  983.         </div>
  984.         <div class="row d-flex flex-wrap margin-bottom-16">
  986.             <div class="blog-post single-post spec"
  987.                  style="border-radius: 20px; flex: 2; margin: 0 1rem; -webkit-box-flex: 2;max-width: calc(66.666% - 2rem);">
  988.                 <!-- Blog Post Content -->
  989.                 <div class="blog-post-content">
  991.                     <h1 class="margin-bottom-10"
  992.                         style="line-height: 1.2;font-size: 50px">{{ publication.bigtitle }}</h1>
  994.                     <div class="blog-post-info-list margin-bottom-20">
  995.                             <span class="meta-date blog-post-info "
  996.                                   style="width: fit-content;font-size: 12px;padding: 1px 5px;"><svg
  997.                                     style="margin-right: 5px;vertical-align: sub;opacity: 0.3" width="16"
  998.                                     height="16"
  999.                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
  1000.                                         d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg> <span> {% set trans_month_hash = {
  1001.                                         "January": "Janvier",
  1002.                                         "February": "Février",
  1003.                                         "March": "Mars",
  1004.                                         "April": "Avril",
  1005.                                         "May": "Mai",
  1006.                                         "June": "Juin",
  1007.                                         "July": "Juillet",
  1008.                                         "August": "Août",
  1009.                                         "September": "Septembre",
  1010.                                         "October": "Octobre",
  1011.                                         "November": "Novembre",
  1012.                                         "December": "Décembre"
  1013.                                     } %}{% if publication.getUpdatedAt() is empty or publication.getCreatedAt() == publication.getUpdatedAt() %}Publiée le {{ publication.getCreatedAt()|date("d") }} {{ trans_month_hash[publication.getCreatedAt()|date("F")] }} {{ publication.getCreatedAt()|date("Y") }}{% else %}Mis à jour le {{ publication.getUpdatedAt()|date("d") }} {{ trans_month_hash[publication.getUpdatedAt()|date("F")] }} {{ publication.getUpdatedAt()|date("Y") }}{% endif %}</span></span>
  1014.                         <span class="meta-views blog-post-info "
  1015.                               style="width: fit-content;font-size: 12px;padding: 1px 5px;"><svg
  1016.                                 style="margin-right: 5px;vertical-align: sub;opacity: 0.3" width="16"
  1017.                                 height="16"
  1018.                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
  1019.                                     d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg><span>{{ publication.view }} vues</span></span>
  1020.                         <span class="meta-rtime blog-post-info "
  1021.                               style="width: fit-content;font-size: 12px;padding: 1px 5px;"><svg
  1022.                                 style="margin-right: 5px;vertical-align: sub;opacity: 0.3" width="16"
  1023.                                 height="16"
  1024.                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
  1025.                                     d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg><span>{{ publication.rtTime }}min</span></span>
  1026.                     </div>
  1027.                     <div class="sidebar-sticky mobile-device" style="height: 260px;">
  1028.                         <div id="sidebar-container" class="sidebar-content toc-wrapper">
  1029.                             <div class="toc-title-container">
  1030.                                 <p class="toc-title">
  1031.                                     Sommaire
  1032.                                 </p>
  1033.                             </div>
  1034.                             <div id="toc-container" class="toc-content">
  1035.                                 <div id="ez-toc-container"
  1036.                                      class="ez-toc-v2_0_37 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction">
  1037.                                     <div class="ez-toc-title-container">
  1038.                                                      <span class="ez-toc-title-toggle"><a
  1039.                                                              class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle"
  1040.                                                              style="display: none;"><span
  1041.                                                                  style="display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;"><svg
  1042.                                                                      style="fill: #999;color:#999"
  1043.                                                                      xmlns="http://www.w3.org/2000/svg"
  1044.                                                                      class="list-377408" width="20px" height="20px"
  1045.                                                                      viewBox="0 0 24 24"
  1046.                                                                      fill="none"><path
  1047.                                                                          d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z"
  1048.                                                                          fill="currentColor"></path></svg><svg
  1049.                                                                      style="fill: #999;color:#999"
  1050.                                                                      class="arrow-unsorted-368013"
  1051.                                                                      xmlns="http://www.w3.org/2000/svg" width="10px"
  1052.                                                                      height="10px"
  1053.                                                                      viewBox="0 0 24 24" version="1.2"
  1054.                                                                      baseProfile="tiny"><path
  1055.                                                                          d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"></path></svg></span></a></span>
  1056.                                     </div>
  1057.                                     <nav>
  1058.                                         {% set h2_titles = publication.content|extract_h2 %}
  1060.                                         <ul class="ez-toc-list ez-toc-list-level-1"
  1061.                                             style="margin-bottom: 0 !important;    padding-left: 0 !important;">
  1062.                                             {% for title in h2_titles %}
  1063.                                                 {% set anchor = title|slugify %}
  1064.                                                 <li class="ez-toc-page-1">
  1066.                                                     <a onclick="applyStyle(this)" class="ez-toc-link"
  1067.                                                        href="#{{ anchor }}"
  1068.                                                        title="{{ title }}">
  1069.                                                         <svg class="icon" style="fill: #2a41e8 ;margin-right: 5px"
  1070.                                                              width="16" height="16"
  1071.                                                              xmlns="http://www.w3.org/2000/svg"
  1072.                                                              viewBox="0 0 448 512">
  1073.                                                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1074.                                                             <path
  1075.                                                                 d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
  1076.                                                         </svg> {% if title|length > 30 %}
  1077.                                                             {{ title|slice(0, 30) }}...
  1078.                                                         {% else %}
  1079.                                                             {{ title }}
  1080.                                                         {% endif %}</a>
  1081.                                                 </li>
  1082.                                             {% endfor %}
  1083.                                         </ul>
  1084.                                     </nav>
  1085.                                 </div>
  1086.                             </div>
  1087.                             <div class="toc-footer">
  1088.                                 <div class="social-section">
  1089.                                     <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://reassurez-moi.fr/guide/banque"
  1090.                                        target="_blank">
  1091.                                         <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
  1092.                                     </a>
  1093.                                     <a href="https://twitter.com/share?url=https://reassurez-moi.fr/guide/banque"
  1094.                                        target="_blank">
  1095.                                         <i class="fa-brands fa-twitter" aria-hidden="true"></i>
  1096.                                     </a>
  1097.                                 </div>
  1098.                             </div>
  1099.                         </div>
  1100.                         <div id="fix-sidebar-content" class="mt-2"></div>
  1101.                         <div id="sidebar-advertblock-container" class="mt-2"></div>
  1102.                     </div>
  1103.                     <!-- Post Thumbnail -->
  1104.                     <div class="blog-post-thumbnail">
  1105.                         <div class="blog-post-thumbnail-inner">
  1107.                             <img
  1108.                                 src="{{ asset( publication.publicationImage ? 'uploads/img/'~publication.publicationImage.path : 'images/blog-04.jpg') }}"
  1109.                                 alt="{{ publication.publicationImage ? publication.publicationImage.name : '' }}">
  1110.                         </div>
  1111.                     </div>
  1113.                     <!--  Post Content -->
  1114.                     {% set publication_content_with_anchors =publication.content|add_h2_anchors %}
  1116.                     <!-- Blog Post Content -->
  1118.                     {{ publication_content_with_anchors  | replace({'<li><p>': '<li>', '</p></li>': '</li>'})
  1119.                     | replace({'https://www.freelance-dispo.fr': 'https://www.workdispo.com'})
  1120.                     | raw }}
  1122.                     {#                    {{ publication.content | replace({'<li><p>': '<li>', '</p></li>': '</li>'}) | raw }} #}
  1124.                     <!-- Share Buttons -->
  1125.                     {% include 'common/social_share.html.twig' %}
  1128.                 </div>
  1129.             </div>
  1130.             <div class="article-right-flottant"
  1131.                  style="border-radius: 20px; flex: 1; margin: 0; -webkit-box-flex: 1;max-width: calc(33.333% - 2rem);padding:  0;position: relative;">
  1132.                 <div class="margin-bottom-4">
  1133.                     <script src="https://platform.linkedin.com/in.js"
  1134.                             type="text/javascript"> lang: fr_FR</script>
  1135.                     <script type="IN/FollowCompany" data-id="35595945"
  1136.                             data-counter="right"></script>
  1137.                 </div>
  1138.                 <div class="sidebar-sticky large-device" style="height: 260px;">
  1139.                     <div id="sidebar-container" class="sidebar-content toc-wrapper">
  1140.                         <div class="toc-title-container">
  1141.                             <p class="toc-title">
  1142.                                 Sommaire
  1143.                             </p>
  1144.                         </div>
  1145.                         <div id="toc-container" class="toc-content">
  1146.                             <div id="ez-toc-container"
  1147.                                  class="ez-toc-v2_0_37 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction">
  1148.                                 <div class="ez-toc-title-container">
  1149.                                                      <span class="ez-toc-title-toggle"><a
  1150.                                                              class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle"
  1151.                                                              style="display: none;"><span
  1152.                                                                  style="display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;"><svg
  1153.                                                                      style="fill: #999;color:#999"
  1154.                                                                      xmlns="http://www.w3.org/2000/svg"
  1155.                                                                      class="list-377408" width="20px" height="20px"
  1156.                                                                      viewBox="0 0 24 24"
  1157.                                                                      fill="none"><path
  1158.                                                                          d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z"
  1159.                                                                          fill="currentColor"></path></svg><svg
  1160.                                                                      style="fill: #999;color:#999"
  1161.                                                                      class="arrow-unsorted-368013"
  1162.                                                                      xmlns="http://www.w3.org/2000/svg" width="10px"
  1163.                                                                      height="10px"
  1164.                                                                      viewBox="0 0 24 24" version="1.2"
  1165.                                                                      baseProfile="tiny"><path
  1166.                                                                          d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"></path></svg></span></a></span>
  1167.                                 </div>
  1168.                                 <nav>
  1169.                                     {% set h2_titles = publication.content|extract_h2 %}
  1171.                                     <ul class="ez-toc-list ez-toc-list-level-1"
  1172.                                         style="margin-bottom: 0 !important;    padding-left: 0 !important;">
  1173.                                         {% for title in h2_titles %}
  1174.                                             {% set anchor = title|slugify %}
  1175.                                             <li class="ez-toc-page-1">
  1177.                                                 <a onclick="applyStyle(this)" class="ez-toc-link"
  1178.                                                    href="#{{ anchor }}"
  1179.                                                    title="{{ title }}">
  1180.                                                     <svg class="icon" style="fill: #2a41e8 ;margin-right: 5px"
  1181.                                                          width="16" height="16"
  1182.                                                          xmlns="http://www.w3.org/2000/svg"
  1183.                                                          viewBox="0 0 448 512">
  1184.                                                         <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1185.                                                         <path
  1186.                                                             d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
  1187.                                                     </svg> {% if title|length > 30 %}
  1188.                                                         {{ title|slice(0, 30) }}...
  1189.                                                     {% else %}
  1190.                                                         {{ title }}
  1191.                                                     {% endif %}</a>
  1192.                                             </li>
  1193.                                         {% endfor %}
  1194.                                     </ul>
  1195.                                 </nav>
  1196.                             </div>
  1197.                         </div>
  1198.                         <div class="toc-footer">
  1199.                             <div class="social-section">
  1200.                                 <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://reassurez-moi.fr/guide/banque"
  1201.                                    target="_blank">
  1202.                                     <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
  1203.                                 </a>
  1204.                                 <a href="https://twitter.com/share?url=https://reassurez-moi.fr/guide/banque"
  1205.                                    target="_blank">
  1206.                                     <i class="fa-brands fa-twitter" aria-hidden="true"></i>
  1207.                                 </a>
  1208.                             </div>
  1209.                         </div>
  1210.                     </div>
  1211.                     <div id="fix-sidebar-content" class="mt-2"></div>
  1212.                     <div id="sidebar-advertblock-container" class="mt-2"></div>
  1213.                 </div>
  1214.                 <div class="blog-post single-post sticky-bottom"
  1215.                      style="margin-bottom: 0;display: none; flex-direction: column; padding: 12px; border-radius: 20px; position: sticky; top: 53%; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://www.abcportage.fr/wp-content/themes/abcportage/assets/build/img/img_cta_right_small.jpg); background-size: cover; color: white;">
  1216.                     {# <div class="blog-post single-post" style=";display: flex;flex-direction: column;padding: 12px;border-radius: 20px;position: sticky;top: 50%;background-image: url('{{ absolute_url(asset('images/anthony-riera-kylWNDQFd5A-unsplash.jpg')) }}');background-size:cover;color:white;"> #}
  1217.                     <h3 style="text-align: center;margin: 1rem;color:white;font-size:23px;">Missions et emplois
  1218.                         disponibles</h3>
  1219.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1220.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1221.                              xmlns="http://www.w3.org/2000/svg"
  1222.                              viewBox="0 0 448 512">
  1223.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1224.                             <path
  1225.                                 d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
  1226.                         </svg>
  1227.                         </span>
  1228.                         <span>Emplois et missions freelance</span>
  1229.                     </div>
  1230.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1231.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1232.                              xmlns="http://www.w3.org/2000/svg"
  1233.                              viewBox="0 0 448 512">
  1234.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1235.                             <path
  1236.                                 d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
  1237.                         </svg>
  1238.                         </span>
  1239.                         <span>Emplois et missions avec du télétravail</span>
  1240.                     </div>
  1241.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1242.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1243.                              xmlns="http://www.w3.org/2000/svg"
  1244.                              viewBox="0 0 448 512">
  1245.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1246.                             <path
  1247.                                 d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
  1248.                         </svg>
  1249.                         </span>
  1250.                         <span>Des offres sur toute la France</span>
  1251.                     </div>
  1252.                     <span style="margin: 1rem auto"><a
  1253.                             href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE') and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('offre_search') }}"><span
  1254.                                 class="btn-mission-spec-flottant"
  1255.                                 style="color: #FFFFFF">Voir les offres</span></a></span>
  1258.                 </div>
  1259.             </div>
  1260.         </div>
  1261.         <!-- Scroll detection block -->
  1264.         <div id="scrollBlock" class="scroll-block hidden"
  1265.             {# style="padding: 12px;display: flex;flex-direction: column;margin-bottom: -12px;" #}
  1266.         >
  1267.             <div style="text-align:center;">
  1268.                 <div class="closeButtonContainer">
  1269.                     <button onclick="closeScrollBlock()" id="closeButton">&times;</button>
  1270.                 </div>
  1271.                 <p style="color:white;font-size:20px;font-weight:700;margin-bottom: 32px;">Mission WorkDisponibles</p>
  1272.                 <span style="margin: 2rem auto">
  1273.                     <a
  1274.                         href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE')
  1275.                         and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('mission_search_default') }}"
  1276.                     >
  1277.                         <span class="btn-mission-spec-flottant" style="color: #FFFFFF">Voir les missions</span>
  1278.                     </a>
  1279.                 </span>
  1280.             </div>
  1281.         </div>
  1282.     </div>
  1284. {% endblock %}
  1285. {% block javascripts %}
  1286.     <script>
  1287.         document.addEventListener("DOMContentLoaded", function () {
  1288.             // JavaScript to handle scroll event
  1289.             window.addEventListener('scroll', function () {
  1290.                 // Get the scroll position
  1291.                 var scrollPosition = window.scrollY;
  1293.                 // Define the threshold to show the block
  1294.                 var threshold = 300; // Adjust as needed
  1296.                 // Get the scroll block element
  1297.                 var scrollBlock = document.getElementById('scrollBlock');
  1299.                 // Show or hide the block based on scroll position
  1300.                 if (scrollPosition > threshold) {
  1301.                     scrollBlock.classList.remove('hidden');
  1302.                     scrollBlock.classList.add('visible');
  1303.                 } else {
  1304.                     scrollBlock.classList.remove('visible');
  1305.                     scrollBlock.classList.add('hidden');
  1306.                 }
  1307.             });
  1308.         });
  1310.         // Fonction pour fermer le bloc de détection du défilement
  1311.         function closeScrollBlock() {
  1312.             console.log("Fermeture du bloc de détection du défilement");
  1313.             var scrollBlock = document.getElementById('scrollBlock');
  1314.             scrollBlock.classList.remove('visible');
  1315.             scrollBlock.classList.add('hidden_btn');
  1316.         }
  1318.         document.addEventListener('scroll', function () {
  1319.             const container = document.querySelector('.article-right-flottant');
  1320.             const stickyBottom = document.querySelector('.sticky-bottom');
  1322.             const containerRect = container.getBoundingClientRect();
  1323.             const windowHeight = window.innerHeight;
  1324.             const contentHeight = containerRect.height;
  1325.             // Assuming scrollPosition is the current vertical scroll position
  1326.             const scrollPosition = window.scrollY;
  1328.             // Fixed threshold of 250 pixels
  1329.             const fixedThreshold = 5;
  1331.             // Calculate how close we are to the bottom of the content
  1332.             const distanceToBottom = contentHeight - (scrollPosition + windowHeight);
  1333.             console.log(Math.abs(distanceToBottom))
  1334.             if (distanceToBottom < 0) {
  1335.                 if (Math.abs(distanceToBottom) >= 357 || window.scrollY <= 199) {
  1336.                     stickyBottom.style.display = 'none';
  1337.                 } else {
  1338.                     stickyBottom.style.display = 'flex';
  1339.                 }
  1340.             } else {
  1341.                 // Check if we are within 250 pixels from the bottom
  1342.                 if (distanceToBottom <= fixedThreshold || window.scrollY <= 199) {
  1343.                     stickyBottom.style.display = 'none';
  1344.                 } else {
  1345.                     stickyBottom.style.display = 'flex';
  1346.                 }
  1347.             }
  1350.         });
  1352.         function applyStyle(element) {
  1353.             // Supprimer la classe 'active' de tous les liens
  1354.             const links = document.querySelectorAll('.large-device .ez-toc-link');
  1355.             links.forEach(link => link.classList.remove('active'));
  1357.             if (window.innerWidth <= 500) {
  1358.                 const links_mobile = document.querySelectorAll('.mobile-device .ez-toc-link');
  1359.                 links_mobile.forEach(link => link.classList.remove('active'));
  1360.             }
  1363.             // Ajouter la classe 'active' au lien cliqué
  1364.             element.classList.add('active');
  1366.             // Appliquez le style à l'élément <a> lorsque le lien est cliqué
  1367.             // element.style.color = 'grey';
  1368.             // element.style.opacity = '0.8';
  1369.             element.classList.add('clicked-link');
  1372.         }
  1374.         // Sélectionnez tous les liens de votre sommaire
  1375.         const links = document.querySelectorAll('.large-device .ez-toc-link');
  1376.         const headings = Array.from(links).map(link => {
  1377.             const id = link.getAttribute('href').substring(1);
  1378.             return document.getElementById(id);
  1379.         });
  1381.         let currentActiveSection = null;
  1382.         let isScrollingToLink = false;
  1384.         function scrollToElement(element, container) {
  1385.             if (!isElementInViewport(element, container) && !isScrollingToLink) {
  1386.                 isScrollingToLink = true;
  1387.                 document.body.style.overflow = 'hidden';
  1389.                 element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  1391.                 setTimeout(() => {
  1392.                     document.body.style.overflow = '';
  1393.                     isScrollingToLink = false;
  1394.                 }, 500);
  1395.             }
  1396.         }
  1399.         function isElementInViewport(element, container) {
  1400.             var elementRect = element.getBoundingClientRect();
  1401.             var containerRect = container.getBoundingClientRect();
  1403.             return (
  1404.                 elementRect.top >= containerRect.top &&
  1405.                 elementRect.left >= containerRect.left &&
  1406.                 elementRect.bottom <= containerRect.bottom &&
  1407.                 elementRect.right <= containerRect.right
  1408.             );
  1409.         }
  1411.         function updateActiveLink() {
  1412.             let indexToActivate = -1;
  1413.             // Parcours du bas vers le haut
  1414.             for (let i = headings.length - 1; i >= 0; i--) {
  1415.                 const heading = headings[i];
  1416.                 if (heading) {
  1417.                     const rect = heading.getBoundingClientRect();
  1418.                     if (rect.top <= 0) { // 0px du haut de la fenêtre
  1419.                         indexToActivate = i;
  1420.                         break;
  1421.                     }
  1422.                 }
  1423.             }
  1424.             links.forEach(link => link.classList.remove('active'));
  1425.             if (indexToActivate !== -1) {
  1426.                 links[indexToActivate].classList.add('active');
  1427.                 // Scroll le menu pour garder le lien actif visible
  1428.                 const activeLink = links[indexToActivate];
  1429.                 const tocList = activeLink.closest('.ez-toc-list');
  1430.                 if (tocList && activeLink) {
  1431.                     const linkRect = activeLink.getBoundingClientRect();
  1432.                     const listRect = tocList.getBoundingClientRect();
  1433.                     if (linkRect.top < listRect.top || linkRect.bottom > listRect.bottom) {
  1434.                         tocList.scrollTop += linkRect.top - listRect.top - listRect.height / 2 + linkRect.height / 2;
  1435.                     }
  1436.                 }
  1437.             }
  1438.         }
  1440.         window.addEventListener('scroll', updateActiveLink);
  1442.         document.addEventListener('DOMContentLoaded', () => {
  1443.             const links = document.querySelectorAll('.large-device .ez-toc-link');
  1444.             if (links.length > 0) {
  1445.                 links[0].classList.add('active');
  1446.             }
  1447.             if (window.innerWidth <= 500) {
  1448.                 const links_mobile = document.querySelectorAll('.mobile-device .ez-toc-link');
  1449.                 if (links_mobile.length > 0) {
  1450.                     links_mobile[0].classList.add('active');
  1451.                 }
  1452.             }
  1453.         });
  1454.         // window.addEventListener('scroll', () => {
  1455.         //     const stickyBottom = document.querySelector('.sticky-bottom');
  1456.         //     // console.log(window.scrollY); // ou window.pageYOffset
  1457.         //
  1458.         // });
  1461.     </script>
  1464. {% endblock %}