templates/blog/article/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set title = '' %}
  3. {% set description = '' %}
  4. {% for blog in blogs %}
  5.     {% set title = blog.title %}
  6.     {% set description = blog.description %}
  8. {% endfor %}
  10. {% block title %}{{ title }}{% endblock %}
  11. {% block meta_date_desc %}
  13.     <script type="application/ld+json">
  14.         {
  15.             "@context" : "https://schema.org",
  16.             "@type" : "WebSite",
  17.             "name" : "WorkDispo",
  18.             "url" : "https://www.workdispo.com/",
  19.         {% if blogs and blogs[0].getCreatedAt() is not empty %}
  20.                       "datePublished": "{{ blogs[0].getCreatedAt()|date('c') }}",
  21.                     {% endif %}
  23.                     {% if blogs and blogs[0].getUpdatedAt() is not empty %}
  24.                       "dateModified": "{{ blogs[0].getUpdatedAt()|date('c') }}"
  25.                     {% endif %}
  26.         }
  27.     </script>
  28. {% endblock %}
  29. {% block meta %}
  30.     <meta name="description" content="{{ description }}">
  31.     <meta name="keywords" content="{{ blogs[0].keywords }}">
  32.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
  33.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  34.     <script type="text/javascript">(window.NREUM || (NREUM = {})).init = {ajax: {deny_list: ["bam.nr-data.net"]}};
  35.         (window.NREUM || (NREUM = {})).loader_config = {
  36.             licenseKey: "NRJS-8c6c895b97ea60d5ee0",
  37.             applicationID: "1333848373"
  38.         };
  39.         window.NREUM || (NREUM = {}), __nr_require = function (t, e, n) {
  40.             function r(n) {
  41.                 if (!e[n]) {
  42.                     var i = e[n] = {exports: {}};
  43.                     t[n][0].call(i.exports, function (e) {
  44.                         var i = t[n][1][e];
  45.                         return r(i || e)
  46.                     }, i, i.exports)
  47.                 }
  48.                 return e[n].exports
  49.             }
  51.             if ("function" == typeof __nr_require) return __nr_require;
  52.             for (var i = 0; i < n.length; i++) r(n[i]);
  53.             return r
  54.         }({
  55.             1: [function (t, e, n) {
  56.                 function r() {
  57.                 }
  59.                 function i(t, e, n, r) {
  60.                     return function () {
  61.                         return s.recordSupportability("API/" + e + "/called"), o(t + e, [u.now()].concat(c(arguments)), n ? null : this, r), n ? void 0 : this
  62.                     }
  63.                 }
  65.                 var o = t("handle"), a = t(9), c = t(10), f = t("ee").get("tracer"), u = t("loader"), s = t(4),
  66.                     d = NREUM;
  67.                 "undefined" == typeof window.newrelic && (newrelic = d);
  68.                 var p = ["setPageViewName", "setCustomAttribute", "setErrorHandler", "finished", "addToTrace", "inlineHit", "addRelease"],
  69.                     l = "api-", v = l + "ixn-";
  70.                 a(p, function (t, e) {
  71.                     d[e] = i(l, e, !0, "api")
  72.                 }), d.addPageAction = i(l, "addPageAction", !0), d.setCurrentRouteName = i(l, "routeName", !0), e.exports = newrelic, d.interaction = function () {
  73.                     return (new r).get()
  74.                 };
  75.                 var m = r.prototype = {
  76.                     createTracer: function (t, e) {
  77.                         var n = {}, r = this, i = "function" == typeof e;
  78.                         return o(v + "tracer", [u.now(), t, n], r), function () {
  79.                             if (f.emit((i ? "" : "no-") + "fn-start", [u.now(), r, i], n), i) try {
  80.                                 return e.apply(this, arguments)
  81.                             } catch (t) {
  82.                                 throw f.emit("fn-err", [arguments, this, t], n), t
  83.                             } finally {
  84.                                 f.emit("fn-end", [u.now()], n)
  85.                             }
  86.                         }
  87.                     }
  88.                 };
  89.                 a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","), function (t, e) {
  90.                     m[e] = i(v, e)
  91.                 }), newrelic.noticeError = function (t, e) {
  92.                     "string" == typeof t && (t = new Error(t)), s.recordSupportability("API/noticeError/called"), o("err", [t, u.now(), !1, e])
  93.                 }
  94.             }, {}], 2: [function (t, e, n) {
  95.                 function r(t) {
  96.                     if (NREUM.init) {
  97.                         for (var e = NREUM.init, n = t.split("."), r = 0; r < n.length - 1; r++) if (e = e[n[r]], "object" != typeof e) return;
  98.                         return e = e[n[n.length - 1]]
  99.                     }
  100.                 }
  102.                 e.exports = {getConfiguration: r}
  103.             }, {}], 3: [function (t, e, n) {
  104.                 var r = !1;
  105.                 try {
  106.                     var i = Object.defineProperty({}, "passive", {
  107.                         get: function () {
  108.                             r = !0
  109.                         }
  110.                     });
  111.                     window.addEventListener("testPassive", null, i), window.removeEventListener("testPassive", null, i)
  112.                 } catch (o) {
  113.                 }
  114.                 e.exports = function (t) {
  115.                     return r ? {passive: !0, capture: !!t} : !!t
  116.                 }
  117.             }, {}], 4: [function (t, e, n) {
  118.                 function r(t, e) {
  119.                     var n = [a, t, {name: t}, e];
  120.                     return o("storeMetric", n, null, "api"), n
  121.                 }
  123.                 function i(t, e) {
  124.                     var n = [c, t, {name: t}, e];
  125.                     return o("storeEventMetrics", n, null, "api"), n
  126.                 }
  128.                 var o = t("handle"), a = "sm", c = "cm";
  129.                 e.exports = {
  130.                     constants: {SUPPORTABILITY_METRIC: a, CUSTOM_METRIC: c},
  131.                     recordSupportability: r,
  132.                     recordCustom: i
  133.                 }
  134.             }, {}], 5: [function (t, e, n) {
  135.                 function r() {
  136.                     return c.exists && performance.now ? Math.round(performance.now()) : (o = Math.max((new Date).getTime(), o)) - a
  137.                 }
  139.                 function i() {
  140.                     return o
  141.                 }
  143.                 var o = (new Date).getTime(), a = o, c = t(11);
  144.                 e.exports = r, e.exports.offset = a, e.exports.getLastTimestamp = i
  145.             }, {}], 6: [function (t, e, n) {
  146.                 function r(t, e) {
  147.                     var n = t.getEntries();
  148.                     n.forEach(function (t) {
  149.                         "first-paint" === t.name ? l("timing", ["fp", Math.floor(t.startTime)]) : "first-contentful-paint" === t.name && l("timing", ["fcp", Math.floor(t.startTime)])
  150.                     })
  151.                 }
  153.                 function i(t, e) {
  154.                     var n = t.getEntries();
  155.                     if (n.length > 0) {
  156.                         var r = n[n.length - 1];
  157.                         if (u && u < r.startTime) return;
  158.                         var i = [r], o = a({});
  159.                         o && i.push(o), l("lcp", i)
  160.                     }
  161.                 }
  163.                 function o(t) {
  164.                     t.getEntries().forEach(function (t) {
  165.                         t.hadRecentInput || l("cls", [t])
  166.                     })
  167.                 }
  169.                 function a(t) {
  170.                     var e = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  171.                     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
  172.                 }
  174.                 function c(t) {
  175.                     if (t instanceof y && !w) {
  176.                         var e = Math.round(t.timeStamp), n = {type: t.type};
  177.                         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])
  178.                     }
  179.                 }
  181.                 function f(t) {
  182.                     "hidden" === t && (u = v.now(), l("pageHide", [u]))
  183.                 }
  185.                 if (!("init" in NREUM && "page_view_timing" in NREUM.init && "enabled" in NREUM.init.page_view_timing && NREUM.init.page_view_timing.enabled === !1)) {
  186.                     var u, s, d, p, l = t("handle"), v = t("loader"), m = t(8), g = t(3), y = NREUM.o.EV;
  187.                     if ("PerformanceObserver" in window && "function" == typeof window.PerformanceObserver) {
  188.                         s = new PerformanceObserver(r);
  189.                         try {
  190.                             s.observe({entryTypes: ["paint"]})
  191.                         } catch (h) {
  192.                         }
  193.                         d = new PerformanceObserver(i);
  194.                         try {
  195.                             d.observe({entryTypes: ["largest-contentful-paint"]})
  196.                         } catch (h) {
  197.                         }
  198.                         p = new PerformanceObserver(o);
  199.                         try {
  200.                             p.observe({type: "layout-shift", buffered: !0})
  201.                         } catch (h) {
  202.                         }
  203.                     }
  204.                     if ("addEventListener" in document) {
  205.                         var w = !1, b = ["click", "keydown", "mousedown", "pointerdown", "touchstart"];
  206.                         b.forEach(function (t) {
  207.                             document.addEventListener(t, c, g(!1))
  208.                         })
  209.                     }
  210.                     m(f)
  211.                 }
  212.             }, {}], 7: [function (t, e, n) {
  213.                 function r(t, e) {
  214.                     if (!i) return !1;
  215.                     if (t !== i) return !1;
  216.                     if (!e) return !0;
  217.                     if (!o) return !1;
  218.                     for (var n = o.split("."), r = e.split("."), a = 0; a < r.length; a++) if (r[a] !== n[a]) return !1;
  219.                     return !0
  220.                 }
  222.                 var i = null, o = null, a = /Version\/(\S+)\s+Safari/;
  223.                 if (navigator.userAgent) {
  224.                     var c = navigator.userAgent, f = c.match(a);
  225.                     f && c.indexOf("Chrome") === -1 && c.indexOf("Chromium") === -1 && (i = "Safari", o = f[1])
  226.                 }
  227.                 e.exports = {agent: i, version: o, match: r}
  228.             }, {}], 8: [function (t, e, n) {
  229.                 function r(t) {
  230.                     function e() {
  231.                         t(c && document[c] ? document[c] : document[o] ? "hidden" : "visible")
  232.                     }
  234.                     "addEventListener" in document && a && document.addEventListener(a, e, i(!1))
  235.                 }
  237.                 var i = t(3);
  238.                 e.exports = r;
  239.                 var o, a, c;
  240.                 "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")
  241.             }, {}], 9: [function (t, e, n) {
  242.                 function r(t, e) {
  243.                     var n = [], r = "", o = 0;
  244.                     for (r in t) i.call(t, r) && (n[o] = e(r, t[r]), o += 1);
  245.                     return n
  246.                 }
  248.                 var i = Object.prototype.hasOwnProperty;
  249.                 e.exports = r
  250.             }, {}], 10: [function (t, e, n) {
  251.                 function r(t, e, n) {
  252.                     e || (e = 0), "undefined" == typeof n && (n = t ? t.length : 0);
  253.                     for (var r = -1, i = n - e || 0, o = Array(i < 0 ? 0 : i); ++r < i;) o[r] = t[e + r];
  254.                     return o
  255.                 }
  257.                 e.exports = r
  258.             }, {}], 11: [function (t, e, n) {
  259.                 e.exports = {exists: "undefined" != typeof window.performance && window.performance.timing && "undefined" != typeof window.performance.timing.navigationStart}
  260.             }, {}], ee: [function (t, e, n) {
  261.                 function r() {
  262.                 }
  264.                 function i(t) {
  265.                     function e(t) {
  266.                         return t && t instanceof r ? t : t ? u(t, f, a) : a()
  267.                     }
  269.                     function n(n, r, i, o, a) {
  270.                         if (a !== !1 && (a = !0), !l.aborted || o) {
  271.                             t && a && t(n, r, i);
  272.                             for (var c = e(i), f = m(n), u = f.length, s = 0; s < u; s++) f[s].apply(c, r);
  273.                             var p = d[w[n]];
  274.                             return p && p.push([b, n, r, c]), c
  275.                         }
  276.                     }
  278.                     function o(t, e) {
  279.                         h[t] = m(t).concat(e)
  280.                     }
  282.                     function v(t, e) {
  283.                         var n = h[t];
  284.                         if (n) for (var r = 0; r < n.length; r++) n[r] === e && n.splice(r, 1)
  285.                     }
  287.                     function m(t) {
  288.                         return h[t] || []
  289.                     }
  291.                     function g(t) {
  292.                         return p[t] = p[t] || i(n)
  293.                     }
  295.                     function y(t, e) {
  296.                         l.aborted || s(t, function (t, n) {
  297.                             e = e || "feature", w[n] = e, e in d || (d[e] = [])
  298.                         })
  299.                     }
  301.                     var h = {}, w = {}, b = {
  302.                         on: o,
  303.                         addEventListener: o,
  304.                         removeEventListener: v,
  305.                         emit: n,
  306.                         get: g,
  307.                         listeners: m,
  308.                         context: e,
  309.                         buffer: y,
  310.                         abort: c,
  311.                         aborted: !1
  312.                     };
  313.                     return b
  314.                 }
  316.                 function o(t) {
  317.                     return u(t, f, a)
  318.                 }
  320.                 function a() {
  321.                     return new r
  322.                 }
  324.                 function c() {
  325.                     (d.api || d.feature) && (l.aborted = !0, d = l.backlog = {})
  326.                 }
  328.                 var f = "nr@context", u = t("gos"), s = t(9), d = {}, p = {}, l = e.exports = i();
  329.                 e.exports.getOrSetContext = o, l.backlog = d
  330.             }, {}], gos: [function (t, e, n) {
  331.                 function r(t, e, n) {
  332.                     if (i.call(t, e)) return t[e];
  333.                     var r = n();
  334.                     if (Object.defineProperty && Object.keys) try {
  335.                         return Object.defineProperty(t, e, {value: r, writable: !0, enumerable: !1}), r
  336.                     } catch (o) {
  337.                     }
  338.                     return t[e] = r, r
  339.                 }
  341.                 var i = Object.prototype.hasOwnProperty;
  342.                 e.exports = r
  343.             }, {}], handle: [function (t, e, n) {
  344.                 function r(t, e, n, r) {
  345.                     i.buffer([t], r), i.emit(t, e, n)
  346.                 }
  348.                 var i = t("ee").get("handle");
  349.                 e.exports = r, r.ee = i
  350.             }, {}], id: [function (t, e, n) {
  351.                 function r(t) {
  352.                     var e = typeof t;
  353.                     return !t || "object" !== e && "function" !== e ? -1 : t === window ? 0 : a(t, o, function () {
  354.                         return i++
  355.                     })
  356.                 }
  358.                 var i = 1, o = "nr@id", a = t("gos");
  359.                 e.exports = r
  360.             }, {}], loader: [function (t, e, n) {
  361.                 function r() {
  362.                     if (!M++) {
  363.                         var t = T.info = NREUM.info, e = m.getElementsByTagName("script")[0];
  364.                         if (setTimeout(u.abort, 3e4), !(t && t.licenseKey && t.applicationID && e)) return u.abort();
  365.                         f(x, function (e, n) {
  366.                             t[e] || (t[e] = n)
  367.                         });
  368.                         var n = a();
  369.                         c("mark", ["onload", n + T.offset], null, "api"), c("timing", ["load", n]);
  370.                         var r = m.createElement("script");
  371.                         0 === t.agent.indexOf("http://") || 0 === t.agent.indexOf("https://") ? r.src = t.agent : r.src = l + "://" + t.agent, e.parentNode.insertBefore(r, e)
  372.                     }
  373.                 }
  375.                 function i() {
  376.                     "complete" === m.readyState && o()
  377.                 }
  379.                 function o() {
  380.                     c("mark", ["domContent", a() + T.offset], null, "api")
  381.                 }
  383.                 var a = t(5), c = t("handle"), f = t(9), u = t("ee"), s = t(7), d = t(2), p = t(3),
  384.                     l = d.getConfiguration("ssl") === !1 ? "http" : "https", v = window, m = v.document,
  385.                     g = "addEventListener", y = "attachEvent", h = v.XMLHttpRequest, w = h && h.prototype, b = !1;
  386.                 NREUM.o = {
  387.                     ST: setTimeout,
  388.                     SI: v.setImmediate,
  389.                     CT: clearTimeout,
  390.                     XHR: h,
  391.                     REQ: v.Request,
  392.                     EV: v.Event,
  393.                     PR: v.Promise,
  394.                     MO: v.MutationObserver
  395.                 };
  396.                 var E = "" + location, x = {
  397.                     beacon: "bam.nr-data.net",
  398.                     errorBeacon: "bam.nr-data.net",
  399.                     agent: "js-agent.newrelic.com/nr-1216.min.js"
  400.                 }, O = h && w && w[g] && !/CriOS/.test(navigator.userAgent), T = e.exports = {
  401.                     offset: a.getLastTimestamp(),
  402.                     now: a,
  403.                     origin: E,
  404.                     features: {},
  405.                     xhrWrappable: O,
  406.                     userAgent: s,
  407.                     disabled: b
  408.                 };
  409.                 if (!b) {
  410.                     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");
  411.                     var M = 0
  412.                 }
  413.             }, {}], "wrap-function": [function (t, e, n) {
  414.                 function r(t, e) {
  415.                     function n(e, n, r, f, u) {
  416.                         function nrWrapper() {
  417.                             var o, a, s, p;
  418.                             try {
  419.                                 a = this, o = d(arguments), s = "function" == typeof r ? r(o, a) : r || {}
  420.                             } catch (l) {
  421.                                 i([l, "", [o, a, f], s], t)
  422.                             }
  423.                             c(n + "start", [o, a, f], s, u);
  424.                             try {
  425.                                 return p = e.apply(a, o)
  426.                             } catch (v) {
  427.                                 throw c(n + "err", [o, a, v], s, u), v
  428.                             } finally {
  429.                                 c(n + "end", [o, a, p], s, u)
  430.                             }
  431.                         }
  433.                         return a(e) ? e : (n || (n = ""), nrWrapper[p] = e, o(e, nrWrapper, t), nrWrapper)
  434.                     }
  436.                     function r(t, e, r, i, o) {
  437.                         r || (r = "");
  438.                         var c, f, u, s = "-" === r.charAt(0);
  439.                         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))
  440.                     }
  442.                     function c(n, r, o, a) {
  443.                         if (!v || e) {
  444.                             var c = v;
  445.                             v = !0;
  446.                             try {
  447.                                 t.emit(n, r, o, e, a)
  448.                             } catch (f) {
  449.                                 i([f, n, r, o], t)
  450.                             }
  451.                             v = c
  452.                         }
  453.                     }
  455.                     return t || (t = s), n.inPlace = r, n.flag = p, n
  456.                 }
  458.                 function i(t, e) {
  459.                     e || (e = s);
  460.                     try {
  461.                         e.emit("internal-error", t)
  462.                     } catch (n) {
  463.                     }
  464.                 }
  466.                 function o(t, e, n) {
  467.                     if (Object.defineProperty && Object.keys) try {
  468.                         var r = Object.keys(t);
  469.                         return r.forEach(function (n) {
  470.                             Object.defineProperty(e, n, {
  471.                                 get: function () {
  472.                                     return t[n]
  473.                                 }, set: function (e) {
  474.                                     return t[n] = e, e
  475.                                 }
  476.                             })
  477.                         }), e
  478.                     } catch (o) {
  479.                         i([o], n)
  480.                     }
  481.                     for (var a in t) l.call(t, a) && (e[a] = t[a]);
  482.                     return e
  483.                 }
  485.                 function a(t) {
  486.                     return !(t && t instanceof Function && t.apply && !t[p])
  487.                 }
  489.                 function c(t, e) {
  490.                     var n = e(t);
  491.                     return n[p] = t, o(t, n, s), n
  492.                 }
  494.                 function f(t, e, n) {
  495.                     var r = t[e];
  496.                     t[e] = c(r, n)
  497.                 }
  499.                 function u() {
  500.                     for (var t = arguments.length, e = new Array(t), n = 0; n < t; ++n) e[n] = arguments[n];
  501.                     return e
  502.                 }
  504.                 var s = t("ee"), d = t(10), p = "nr@original", l = Object.prototype.hasOwnProperty, v = !1;
  505.                 e.exports = r, e.exports.wrapFunction = c, e.exports.wrapInPlace = f, e.exports.argsToArray = u
  506.             }, {}]
  507.         }, {}, ["loader"]);</script>
  508.     <meta property="og:image"
  509.           content="{{ blogs and blogs[0].blogimage ? asset('uploads/img/' ~ blogs[0].blogimage.path) : absolute_url(asset('images/logo_freelance_new.png')) }}">
  511.     <meta property="og:image:secure_url"
  512.           content="{{ blogs and blogs[0].blogimage ? asset('uploads/img/' ~ blogs[0].blogimage.path) : absolute_url(asset('images/logo_freelance_new.png')) }}">
  513.     <meta property="og:title"
  514.           content="Freelance: missions {{ 'now'|date('Y') }} sur toute la France | WorkDispo"/>
  515.     <meta property="og:type" content="WorkDispo"/>
  516.     <meta property="og:url" content="{{ app.request.getBaseURL() }}"/>
  518.     <meta name="Content-Language" content="fr">
  519.     <meta name="author" content="www.workdispo.com">
  520.     <meta name="revisit-after" content="revisit-after">
  521.     <meta name="pragma" content="no-cache">
  522.     <meta name="classification" content="WorkDispo: des missions sans commission">
  523.     <meta property="og:site_name" data-js-id="meta-og_site_name" content="WorkDispo">
  524.     <meta http-equiv="Cache-Control" content="max-age=31536000">
  525. {% endblock %}
  526. {% block stylesheets %}
  527.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
  528.           integrity="sha384-jLKHWMFR2JTbi9pi0bwyzQFsL53L3Y9fz2A3bQ7NVK/Ee5TV04R5tT7/3Xi4XlGZ" crossorigin="anonymous">
  530.     <style>
  531.         .blog-post-content h1 {
  532.             color: black;
  533.         }
  535.         .mobile-device {
  536.             display: none;
  537.         }
  539.         .large-device {
  540.             display: block;
  541.         }
  543.         .ez-toc-link {
  544.             position: relative;
  545.             padding-left: 24px; /* Adjust based on the width of the icon */
  546.             text-decoration: none; /* Remove underline */
  547.             color: blue; /* Default color */
  548.         }
  550.         .ez-toc-link .icon {
  551.             position: absolute;
  552.             left: 0;
  553.             top: 50%;
  554.             transform: translateY(-50%);
  555.             display: none; /* Hide icon by default */
  556.             fill: #2a41e8;
  557.         }
  559.         .ez-toc-link.active .icon,
  560.         .ez-toc-link.visited .icon {
  561.             display: block; /* Show icon when active or visited */
  562.         }
  564.         .ez-toc-link.active {
  565.             color: blue; /* Color when active */
  566.         }
  568.         .ez-toc-link.active a {
  569.             color: #2a41e8;
  570.         }
  572.         .ez-toc-link.visited {
  573.             color: gray; /* Color when visited */
  574.         }
  577.         .sidebar-sticky {
  578.             overflow-y: hidden;
  579.         }
  581.         .toc-title {
  582.             color: #000000;
  583.             font-size: 1.8rem;
  584.             font-weight: 700;
  585.             text-align: center;
  586.             margin-bottom: 1.5rem;
  588.         }
  590.         .ez-toc-container-direction {
  591.             display: flex;
  592.             flex-direction: column;
  593.             height: 100%;
  594.         }
  596.         .toc-content {
  597.             overflow: hidden; /* Cache la scrollbar horizontale */
  598.         }
  600.         .ez-toc-list {
  601.             max-height: 200px; /* Définissez la hauteur maximale de la liste défilante selon votre besoin */
  602.             overflow-y: auto; /* Permet le défilement vertical */
  603.             padding-right: 15px; /* Pour compenser la disparition de la scrollbar */
  604.             scrollbar-width: none; /* Cacher la scrollbar pour Firefox */
  605.         }
  607.         #sidebar-container::-webkit-scrollbar {
  608.             /*display: none; !* Cacher la scrollbar pour les navigateurs Webkit *!*/
  609.         }
  611.         .sidebar-sticky {
  612.             border: 3px solid #f1f1f1;
  613.             border-radius: 10px;
  614.             padding: 20px 0 10px 0;
  615.             margin-bottom: 8px;
  616.             position: sticky;
  617.             top: 14%;
  618.         }
  620.         #sidebar-container {
  621.             max-height: 230px !important;
  622.         }
  624.         .toc-container {
  625.             overflow-y: scroll;
  626.         }
  628.         .ez-toc-list::-webkit-scrollbar {
  629.             display: none;
  630.         }
  632.         .ez-toc-list li {
  633.             list-style: none;
  634.             position: relative;
  635.             padding-left: 25px;
  636.             margin-bottom: 10px;
  637.         }
  639.         .ez-toc-page-1 a.ez-toc-link {
  640.             color: gray;
  641.             text-decoration: none; /* Enlève la décoration du texte (soulignement) */
  642.             font-size: medium;
  643.         }
  645.         .ez-toc-page-1 a.ez-toc-link.active {
  646.             color: #2a41e8;
  647.         }
  649.         div.clicked-link a {
  650.             color: grey;
  651.             opacity: 0.8;
  652.         }
  655.         /*.ez-toc-list li:before {*/
  656.         /*    content: "\f00c"; !* Code Unicode pour l'icône de coche de Font Awesome *!*/
  657.         /*    font-family: "Font Awesome 5 Free"; !* Police de Font Awesome *!*/
  658.         /*    font-weight: 900; !* Pour la version solide de l'icône *!*/
  659.         /*    color: green; !* Couleur de l'icône, vous pouvez la changer selon vos besoins *!*/
  660.         /*    position: absolute;*/
  661.         /*    left: 0;*/
  662.         /*    top: 0;*/
  663.         /*}*/
  666.         .widget-content {
  667.             position: relative;
  668.         }
  671.         .breadcrumb-container {
  672.             font-size: 11px;
  673.             color: white;
  674.             position: absolute;
  675.             top: 0px; /* Ajustez la valeur selon votre besoin */
  676.             left: 10px; /* Ajustez la valeur selon votre besoin */
  677.             z-index: 100; /* Assurez-vous que cette valeur est plus élevée que celle de l'image */
  678.         }
  680.         .breadcrumb {
  682.             /*background-color: white;*/
  683.             padding: 10px 16px;
  684.             list-style: none;
  685.             display: flex;
  686.             align-items: center;
  687.             border-radius: 5px; /* Ajoutez des bordures arrondies si nécessaire */
  688.         }
  691.         .breadcrumb-item a {
  692.             color: white; /* Couleur du texte du lien */
  693.             text-decoration: none; /* Supprime le soulignement du lien */
  694.             cursor: pointer; /* Assure que le curseur devient une main */
  695.         }
  697.         .breadcrumb-item a:hover {
  698.             text-decoration: none; /* Soulignement au survol */
  699.         }
  701.         .breadcrumb-item.active {
  702.             color: white; /* Couleur du texte pour l'élément actif */
  703.             font-size: 12px;
  704.             text-decoration: underline;
  705.             text-decoration-color: blue; /* Couleur du soulignement */
  706.             text-decoration-thickness: 2px; /* Épaisseur du soulignement */
  707.             text-underline-offset: 4px; /* Espace entre le texte et le soulignement */
  708.         }
  710.         .breadcrumb-item.active a {
  711.             text-decoration: none; /* Supprime le soulignement pour l'élément actif */
  712.             cursor: default; /* Coursur de texte pour l'élément actif */
  713.         }
  716.         .blog-post-content ol {
  717.             margin: 0 0 0 20px !important;
  718.         }
  720.         .blog-post-content h2 {
  721.             font-weight: bold;
  722.             scroll-margin-top: 80px; /* Pour que le scroll auto s'arrête juste au début du h2 */
  723.         }
  725.         .blog-post-content h3 {
  726.             color: black !important;
  727.             font-size: 20px !important;
  728.             font-weight: bold;
  729.             display: inline-block; /* Assure que l'élément h3 ne prend que la largeur nécessaire */
  730.             text-decoration: underline; /* Soulignement du texte */
  731.             text-decoration-color: #2a41e8; /* Couleur du soulignement */
  732.             text-underline-position: under;
  733.         }
  735.         .closeButtonContainer {
  736.             display: flex;
  737.             justify-content: flex-end;
  738.         }
  740.         .scroll-block {
  741.             position: fixed;
  742.             bottom: 0; /* Initially hidden below the screen */
  743.             left: 5%;
  744.             width: 90%;
  745.             background-color: #333;
  746.             color: #fff;
  747.             padding: 12px 20px 41px 20px;
  748.             transition: bottom 0.3s ease; /* Smooth transition for hiding */
  749.             transform: translateY(100%); /* Le bloc est déplacé vers le bas de l'écran */
  750.             display: none;
  751.         }
  753.         .visible {
  754.             transform: translateY(0);
  755.         }
  757.         .hidden {
  758.             transform: translateY(100%);
  759.         }
  761.         .hidden_btn {
  762.             transform: translateY(100%) !important;
  763.         }
  765.         @media only screen and (max-width: 500px) {
  766.             #wrapper {
  767.                 width: -webkit-fill-available;
  768.             }
  770.             .sidebar-sticky {
  771.                 position: static !important;
  772.                 margin-bottom: 1rem;
  773.             }
  775.             .ez-toc-list li {
  776.                 list-style-type: none !important; /* Remove bullets from the list */
  777.                 padding-left: 9px !important; /* Remove padding from the list */
  778.             }
  780.             .mobile-device {
  781.                 display: block;
  782.             }
  784.             .large-device {
  785.                 display: none;
  786.             }
  788.             .scroll-block {
  789.                 display: block;
  790.                 border-radius: 20px;
  791.                 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);
  792.                 background-size: cover;
  793.                 color: white;
  794.                 z-index: 200 !important;
  795.                 flex-direction: column;
  796.                 margin-bottom: -12px;
  797.             }
  798.         }
  800.         .btn-mission-spec {
  801.             border-radius: 50px !important;
  802.             padding: 12px 24px !important;
  803.             font-size: 20px !important;
  804.             font-weight: 500 !important;
  805.             background-clip: padding-box;
  806.             background-color: rgb(33 99 139) !important;
  807.         }
  809.         .btn-mission-spec-flottant {
  810.             border-radius: 50px !important;
  811.             padding: 10px 24px !important;
  812.             font-size: 20px !important;
  813.             font-weight: 500 !important;
  814.             background-clip: padding-box;
  815.             background-color: #2a41e8 !important;
  816.         }
  818.         #breadcrumbs {
  819.             transform: translateY(-190%);
  820.             right: 1.2% !important;
  821.         }
  823.         #breadcrumbs ul {
  824.             display: flex;
  825.         }
  828.         .btn-mission-spec:hover {
  829.             background-color: #2a41e8 !important; /* Utilisation de RGBA avec une opacité de 1 (complètement opaque) */
  831.         }
  833.         .spec-breadcrumbs {
  834.             bottom: -5rem !important;
  835.             top: auto !important;
  836.         }
  838.         .end-list-crumbs::before {
  839.             display: none !important;
  840.         }
  842.         .blog-post-content ul {
  843.             list-style-type: none; /* Supprimer les puces par défaut */
  844.         }
  846.         .blog-post-content ul li::before {
  847.             content: "\2022"; /* Code Unicode pour un point (•) */
  848.             color: #2a41e8; /* Couleur bleue pour les puces */
  849.             display: inline-block;
  850.             width: 1em; /* Espacement entre la puce et le texte */
  851.             margin-left: -1em; /* Pour aligner la puce avec le texte */
  852.         }
  854.         .blog-post-content ol {
  855.             list-style-type: decimal; /* Style de numéro par défaut pour les listes ordonnées */
  856.         }
  858.         /* Styles pour les listes ordonnées */
  859.         .blog-post-content ol {
  860.             list-style-type: none; /* Supprimer les numéros par défaut */
  861.             margin: 0; /* Supprimer les marges */
  862.             padding: 0; /* Supprimer les paddings */
  863.         }
  865.         .blog-post-content ol::marker {
  866.             color: #2a41e8; /* Couleur bleue pour les numéros */
  867.         }
  869.         .blog-post-content ol > li {
  870.             counter-increment: my-counter;
  871.         }
  873.         .blog-post-content ol > li::before {
  874.             content: counter(my-counter) "."; /* Utiliser le compteur pour les listes ordonnées avec un point */
  875.             color: #2a41e8; /* Couleur bleue pour les numéros */
  876.             font-weight: bold; /* Pour rendre les numéros en gras */
  877.             margin-right: 0.5em; /* Espacement entre le numéro et le texte */
  878.         }
  880.         .blog-post-content ol > li > *:first-child {
  881.             display: contents; /* Appliquer display: contents; à la première balise enfant de chaque li */
  882.         }
  884.         .blog-post-content h2,
  885.         .blog-post-content h3 {
  886.             color: #2a41e8;
  887.         }
  889.         .widget-content.active:before, .widget-content:hover:before {
  890.             opacity: 0.8 !important;
  891.         }
  894.         @media (max-width: 980px) {
  895.             .spec {
  896.                 flex-basis: 100% !important;
  897.                 max-width: 100% !important;
  898.             }
  900.             .spec:last-child {
  901.                 margin-top: 16px !important; /* Ajoute une marge supérieure de 16px uniquement au dernier élément spécifique */
  902.             }
  904.             .spec-breadcrumbs {
  905.                 bottom: auto !important;
  906.                 top: 50% !important;
  907.             }
  909.             .article-right-flottant {
  910.                 max-width: 100% !important;
  911.                 margin: 0 !important;
  912.                 padding: 1rem 2rem !important;
  913.             }
  915.             .blog-post.single-post.spec {
  916.                 margin: 3rem 0rem !important;
  917.             }
  919.             #breadcrumbs {
  920.                 transform: translateY(-20%) translateX(-26px);
  921.             }
  923.             .blog-post.single-post .blog-post-thumbnail {
  924.                 width: 100%;
  925.                 height: 250px;
  926.             }
  929.         }
  931.         @media screen and (max-width: 500px) {
  933.             .container {
  934.                 padding: 0;
  935.                 overflow-x: hidden;
  936.             }
  938.             .blog-post-content h1 {
  939.                 font-size: 46px !important;
  940.             }
  942.             .blog-post-content {
  943.                 padding: 32px;
  944.             }
  946.             .blog-post-content ul {
  947.                 padding-inline-start: 20px;
  948.             }
  950.             .blog-post, .single-page-header .header-image {
  951.                 box-shadow: none !important;
  952.             }
  954.             #breadcrumbs {
  955.                 font-size: 12px !important;
  956.             }
  958.             .blog-post.single-post.spec {
  959.                 margin: 0 !important;
  960.             }
  962.             .blog-post-content {
  963.                 padding: 20px 2rem !important;
  964.             }
  965.         }
  966.     </style>
  967. {% endblock %}
  969. {% block body %}
  970.     <div class="container">
  973.         <div class="row">
  974.             <div class="col-md-12 margin-bottom-16 margin-top-16" style="padding: 0 32px;">
  975.                 <div class="widget-content active text-center" style="border-radius: 20px; position: relative;">
  976.                     <img src="{{ asset('uploads/img/6287a440d1176.jpg') }}" alt="" class="widget-image">
  977.                     <div class="overlay"></div>
  978.                     {% for blog in blogs %}
  979.                         <nav aria-label="breadcrumb" class="breadcrumb-container">
  980.                             <ol class="breadcrumb">
  981.                                 <li class="breadcrumb-item"><a href="{{ path('blog') }}">Blog</a></li>
  982.                                 &nbsp;>&nbsp;
  983.                                 <li class="breadcrumb-item active" aria-current="page">{{ blog.breadcrumb }}</li>
  984.                             </ol>
  985.                         </nav>
  986.                     {% endfor %}
  987.                     <div class="widget-text">
  988.                         <p style="font-size: 30px; line-height: 45px; color: white; font-weight: 600;">Offres d'emploi
  989.                             et missions freelance sans commission en France</p>
  990.                         <a href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE') and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('offre_search') }}">
  991.                             <span class="btn-mission-spec">Voir les offres</span>
  992.                         </a>
  993.                     </div>
  994.                 </div>
  996.             </div>
  997.             {#             <div class="col-md-12"> #}
  998.             {#                 {% for blog in blogs %} #}
  999.             {#                     <nav id="breadcrumbs" class="dark spec-breadcrumbs" #}
  1000.             {#                          style="top: 0;right: 16px;bottom: -5rem;"> #}
  1001.             {#                         <ul> #}
  1002.             {#                             <li><a href="{{ path('blog') }}">Blog</a></li> #}
  1003.             {#                             <li>{{ blog.breadcrumb }}</li> #}
  1004.             {#                         </ul> #}
  1005.             {#                     </nav> #}
  1006.             {#                 {% endfor %} #}
  1007.             {#             </div> #}
  1009.         </div>
  1010.         <div class="row d-flex flex-wrap margin-bottom-16">
  1012.             <div class="blog-post single-post spec"
  1013.                  style="border-radius: 20px; flex: 2; margin: 0 1rem; -webkit-box-flex: 2;max-width: calc(66.666% - 2rem);">
  1014.                 <!-- Blog Post Content -->
  1015.                 <div class="blog-post-content">
  1016.                     {% for blog in blogs %}
  1017.                         <h1 class="margin-bottom-10" style="line-height: 1.2;font-size: 50px">{{ blog.bigtitle }}</h1>
  1019.                         <div class="blog-post-info-list margin-bottom-20">
  1020.                             <span class="meta-date 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="13"
  1023.                                     height="13"
  1024.                                     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
  1025.                                         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 = {
  1026.                                         "January": "Janvier",
  1027.                                         "February": "Février",
  1028.                                         "March": "Mars",
  1029.                                         "April": "Avril",
  1030.                                         "May": "Mai",
  1031.                                         "June": "Juin",
  1032.                                         "July": "Juillet",
  1033.                                         "August": "Août",
  1034.                                         "September": "Septembre",
  1035.                                         "October": "Octobre",
  1036.                                         "November": "Novembre",
  1037.                                         "December": "Décembre"
  1038.                                     } %}{% if blog.getUpdatedAt() is empty or blog.getUpdatedAt()==blog.getCreatedAt() %}Publiée le {{ blog.getCreatedAt()|date("d") }} {{ trans_month_hash[blog.getCreatedAt()|date("F")] }} {{ blog.getCreatedAt()|date("Y") }}{% else %}Mis à jour le {{ blog.getUpdatedAt()|date("d") }} {{ trans_month_hash[blog.getUpdatedAt()|date("F")] }} {{ blog.getUpdatedAt()|date("Y") }}{% endif %}</span></span>
  1039.                             <span class="meta-views blog-post-info "
  1040.                                   style="width: fit-content;font-size: 12px;padding: 1px 5px;"><svg
  1041.                                     style="margin-right: 5px;vertical-align: sub;opacity: 0.3" width="13"
  1042.                                     height="13"
  1043.                                     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
  1044.                                         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>{{ blog.view }} vues</span></span>
  1045.                             <span class="meta-rtime blog-post-info "
  1046.                                   style="width: fit-content;font-size: 12px;padding: 1px 5px;"><svg
  1047.                                     style="margin-right: 5px;vertical-align: sub;opacity: 0.3" width="13"
  1048.                                     height="13"
  1049.                                     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
  1050.                                         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>{{ blog.rtTime }}min</span></span>
  1051.                         </div>
  1053.                         <div class="sidebar-sticky mobile-device" style="height: 260px;">
  1055.                             <div id="sidebar-container" class="sidebar-content toc-wrapper">
  1057.                                 <div class="toc-title-container">
  1059.                                     <p class="toc-title">
  1061.                                         Sommaire
  1062.                                     </p>
  1063.                                 </div>
  1064.                                 <div id="toc-container" class="toc-content">
  1065.                                     <div id="ez-toc-container"
  1066.                                          class="ez-toc-v2_0_37 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction">
  1067.                                         <div class="ez-toc-title-container">
  1068.                                                      <span class="ez-toc-title-toggle"><a
  1069.                                                              class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle"
  1070.                                                              style="display: none;"><span
  1071.                                                                  style="display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;"><svg
  1072.                                                                      style="fill: #999;color:#999"
  1073.                                                                      xmlns="http://www.w3.org/2000/svg"
  1074.                                                                      class="list-377408" width="20px" height="20px"
  1075.                                                                      viewBox="0 0 24 24"
  1076.                                                                      fill="none"><path
  1077.                                                                          d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z"
  1078.                                                                          fill="currentColor"></path></svg><svg
  1079.                                                                      style="fill: #999;color:#999"
  1080.                                                                      class="arrow-unsorted-368013"
  1081.                                                                      xmlns="http://www.w3.org/2000/svg" width="10px"
  1082.                                                                      height="10px"
  1083.                                                                      viewBox="0 0 24 24" version="1.2"
  1084.                                                                      baseProfile="tiny"><path
  1085.                                                                          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>
  1086.                                         </div>
  1087.                                         <nav>
  1088.                                             {% set h2_titles = blogs[0].content|extract_h2 %}
  1090.                                             <ul class="ez-toc-list ez-toc-list-level-1"
  1091.                                                 style="margin-bottom: 0 !important;    padding-left: 0 !important;">
  1092.                                                 {% for title in h2_titles %}
  1093.                                                      {% set anchor = title|slugify|lower %}
  1094.                                                     <li class="ez-toc-page-1">
  1096.                                                         <a onclick="applyStyle(this)" class="ez-toc-link"
  1097.                                                            href="#{{ anchor }}"
  1098.                                                            title="{{ title }}">
  1099.                                                             <svg class="icon" style="fill: #2a41e8 ;margin-right: 5px"
  1100.                                                                  width="16" height="16"
  1101.                                                                  xmlns="http://www.w3.org/2000/svg"
  1102.                                                                  viewBox="0 0 448 512">
  1103.                                                                 <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1104.                                                                 <path
  1105.                                                                     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"/>
  1106.                                                             </svg> {% if title|length > 30 %}
  1107.                                                                 {{ title|slice(0, 30) }}...
  1108.                                                             {% else %}
  1109.                                                                 {{ title }}
  1110.                                                             {% endif %}</a>
  1111.                                                     </li>
  1112.                                                 {% endfor %}
  1113.                                             </ul>
  1114.                                         </nav>
  1115.                                     </div>
  1116.                                 </div>
  1117.                                 <div class="toc-footer">
  1118.                                     <div class="social-section">
  1119.                                         <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://reassurez-moi.fr/guide/banque"
  1120.                                            target="_blank">
  1121.                                             <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
  1122.                                         </a>
  1123.                                         <a href="https://twitter.com/share?url=https://reassurez-moi.fr/guide/banque"
  1124.                                            target="_blank">
  1125.                                             <i class="fa-brands fa-twitter" aria-hidden="true"></i>
  1126.                                         </a>
  1127.                                     </div>
  1128.                                 </div>
  1129.                             </div>
  1130.                             <div id="fix-sidebar-content" class="mt-2"></div>
  1131.                             <div id="sidebar-advertblock-container" class="mt-2"></div>
  1132.                         </div>
  1133.                         <!-- Blog Post Thumbnail -->
  1134.                         <div class="blog-post-thumbnail">
  1135.                             <div class="blog-post-thumbnail-inner">
  1136.                                 <img
  1137.                                     src="{{ asset( blog.blogimage ? 'uploads/img/'~blog.blogimage.path : 'images/blog-04.jpg') }}"
  1138.                                     alt="{{ blog.blogimage ? blog.blogimage.name : '' }}">
  1139.                             </div>
  1140.                         </div>
  1141.                         {% set blog_content_with_anchors = blog.content|add_h2_anchors %}
  1143.                         <!-- Blog Post Content -->
  1145.                         {{ blog_content_with_anchors | replace({'<li><p>': '<li>', '</p></li>': '</li>'})
  1146.                         | replace({'https://www.freelance-dispo.fr': 'https://www.workdispo.com'})
  1147.                         | raw }}
  1148.                         <!-- Share Buttons -->
  1149.                         {% include 'common/social_share.html.twig' %}
  1150.                         <div class="task-tags d-flex col-md-12" style="gap: 2px;flex-wrap: wrap">
  1151.                             {% if blog.getSousThematique() is not empty %}
  1152.                                 {% for sous_thematique in blog.getSousThematique() %}
  1153.                                     <a style="background-color: rgba(42, 65, 232, .07)"
  1154.                                        href="{{ path('blog_show',{sousThematique:sous_thematique.getSlug()}) }}">
  1155.                                         <span
  1156.                                             style="color: #2a41e8 !important;font-size: 16px;">{{ sous_thematique.getName() }}</span>
  1157.                                     </a>
  1158.                                 {% endfor %}
  1159.                             {% else %}
  1160.                                 {% for thematique in blog.getThematique() %}
  1161.                                     <a style="background-color: rgba(42, 65, 232, .07)"
  1162.                                        href="{{ path('blog_show',{thematique:thematique.getSlug()}) }}">
  1163.                                         <span
  1164.                                             style="color: #2a41e8 !important;font-size: 16px;"> {{ thematique.getName() }}</span>
  1165.                                     </a>
  1166.                                 {% endfor %}
  1167.                             {% endif %}
  1168.                         </div>
  1169.                     {% endfor %}
  1170.                 </div>
  1171.             </div>
  1172.             <div class="article-right-flottant"
  1173.                  style="border-radius: 20px; flex: 1; margin: 0; -webkit-box-flex: 1;max-width: calc(33.333% - 2rem);padding:  0;position: relative;">
  1174.                 <div class="margin-bottom-4">
  1175.                     <script src="https://platform.linkedin.com/in.js"
  1176.                             type="text/javascript"> lang: fr_FR</script>
  1177.                     <script type="IN/FollowCompany" data-id="35595945"
  1178.                             data-counter="right"></script>
  1179.                 </div>
  1180.                 <div class="sidebar-sticky large-device" style="height: 260px;">
  1181.                     <div id="sidebar-container" class="sidebar-content toc-wrapper">
  1182.                         <div class="toc-title-container">
  1184.                             <p class="toc-title">
  1185.                                 Sommaire
  1186.                             </p>
  1187.                         </div>
  1188.                         <div id="toc-container" class="toc-content">
  1189.                             <div id="ez-toc-container"
  1190.                                  class="ez-toc-v2_0_37 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction">
  1191.                                 <div class="ez-toc-title-container">
  1192.                                                      <span class="ez-toc-title-toggle"><a
  1193.                                                              class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle"
  1194.                                                              style="display: none;"><span
  1195.                                                                  style="display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;"><svg
  1196.                                                                      style="fill: #999;color:#999"
  1197.                                                                      xmlns="http://www.w3.org/2000/svg"
  1198.                                                                      class="list-377408" width="20px" height="20px"
  1199.                                                                      viewBox="0 0 24 24"
  1200.                                                                      fill="none"><path
  1201.                                                                          d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z"
  1202.                                                                          fill="currentColor"></path></svg><svg
  1203.                                                                      style="fill: #999;color:#999"
  1204.                                                                      class="arrow-unsorted-368013"
  1205.                                                                      xmlns="http://www.w3.org/2000/svg" width="10px"
  1206.                                                                      height="10px"
  1207.                                                                      viewBox="0 0 24 24" version="1.2"
  1208.                                                                      baseProfile="tiny"><path
  1209.                                                                          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>
  1210.                                 </div>
  1211.                                 <nav>
  1212.                                     {% set h2_titles = blogs[0].content|extract_h2 %}
  1213.                                     
  1215.                                     <ul class="ez-toc-list ez-toc-list-level-1"
  1216.                                         style="margin-bottom: 0 !important;    padding-left: 0 !important;">
  1217.                                         {% for title in h2_titles %}
  1218.                                              {% set anchor = title|slugify|lower %}
  1219.                                             
  1220.                                             <li class="ez-toc-page-1">
  1222.                                                 <a onclick="applyStyle(this)" class="ez-toc-link" href="#{{ anchor }}"
  1223.                                                    title="{{ title }}">
  1224.                                                     <svg class="icon" style="fill: #2a41e8 ;margin-right: 5px"
  1225.                                                          width="16" height="16"
  1226.                                                          xmlns="http://www.w3.org/2000/svg"
  1227.                                                          viewBox="0 0 448 512">
  1228.                                                         <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1229.                                                         <path
  1230.                                                             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"/>
  1231.                                                     </svg> {% if title|length > 30 %}
  1232.                                                         {{ title|slice(0, 30) }}...
  1233.                                                     {% else %}
  1234.                                                         {{ title }}
  1235.                                                     {% endif %}</a>
  1236.                                             </li>
  1237.                                         {% endfor %}
  1238.                                     </ul>
  1239.                                 </nav>
  1240.                             </div>
  1241.                         </div>
  1242.                         <div class="toc-footer">
  1243.                             <div class="social-section">
  1244.                                 <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://reassurez-moi.fr/guide/banque"
  1245.                                    target="_blank">
  1246.                                     <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
  1247.                                 </a>
  1248.                                 <a href="https://twitter.com/share?url=https://reassurez-moi.fr/guide/banque"
  1249.                                    target="_blank">
  1250.                                     <i class="fa-brands fa-twitter" aria-hidden="true"></i>
  1251.                                 </a>
  1252.                             </div>
  1253.                         </div>
  1254.                     </div>
  1255.                     <div id="fix-sidebar-content" class="mt-2"></div>
  1256.                     <div id="sidebar-advertblock-container" class="mt-2"></div>
  1257.                 </div>
  1258.                 <div class="blog-post single-post sticky-bottom"
  1259.                      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;">
  1260.                     {# <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;"> #}
  1261.                     <h3 style="text-align: center;margin: 1rem;color:white;font-size:23px;">Missions et emplois
  1262.                         disponibles</h3>
  1263.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1264.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1265.                              xmlns="http://www.w3.org/2000/svg"
  1266.                              viewBox="0 0 448 512">
  1267.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1268.                             <path
  1269.                                 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"/>
  1270.                         </svg>
  1271.                         </span>
  1272.                         <span>Emplois et missions freelance</span>
  1273.                     </div>
  1274.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1275.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1276.                              xmlns="http://www.w3.org/2000/svg"
  1277.                              viewBox="0 0 448 512">
  1278.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1279.                             <path
  1280.                                 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"/>
  1281.                         </svg>
  1282.                         </span>
  1283.                         <span>Emplois et missions avec du télétravail</span>
  1284.                     </div>
  1285.                     <div class="d-flex align-items-center" style="padding-left: 24px;margin: 5px 0;">
  1286.                         <svg style="fill: #2a41e8 ;margin-right: 5px" width="16" height="16"
  1287.                              xmlns="http://www.w3.org/2000/svg"
  1288.                              viewBox="0 0 448 512">
  1289.                             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  1290.                             <path
  1291.                                 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"/>
  1292.                         </svg>
  1293.                         </span>
  1294.                         <span>Des offres sur toute la France</span>
  1295.                     </div>
  1296.                     <span style="margin: 1rem auto"><a
  1297.                             href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE') and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('offre_search') }}"><span
  1298.                                 class="btn-mission-spec-flottant"
  1299.                                 style="color: #FFFFFF">Voir les offres</span></a></span>
  1302.                 </div>
  1303.             </div>
  1304.         </div>
  1305.         <!-- Scroll detection block -->
  1308.         <div id="scrollBlock" class="scroll-block hidden"
  1309.             {# style="padding: 12px;display: flex;flex-direction: column;margin-bottom: -12px;" #}
  1310.         >
  1311.             <div style="text-align:center;">
  1312.                 <div class="closeButtonContainer">
  1313.                     <button onclick="closeScrollBlock()" id="closeButton">&times;</button>
  1314.                 </div>
  1315.                 <p style="color:white;font-size:20px;font-weight:700;margin-bottom: 32px;">Missions freelance
  1316.                     disponibles</p>
  1317.                 <span style="margin: 2rem auto">
  1318.                     <a
  1319.                         href="{{ not is_granted('ROLE_ADMIN') and is_granted('ROLE_FREELANCE')
  1320.                         and app.user.uniqueProfile.id == null ? '#complete-cv-dialog' : path('mission_search_default') }}"
  1321.                     >
  1322.                         <span class="btn-mission-spec-flottant" style="color: #FFFFFF">Voir les missions</span>
  1323.                     </a>
  1324.                 </span>
  1325.             </div>
  1326.         </div>
  1328.     </div>
  1330. {% endblock %}
  1332. {% block javascripts %}
  1333.     <script>
  1334.         document.addEventListener("DOMContentLoaded", function () {
  1335.             // JavaScript to handle scroll event
  1336.             window.addEventListener('scroll', function () {
  1337.                 // Get the scroll position
  1338.                 var scrollPosition = window.scrollY;
  1340.                 // Define the threshold to show the block
  1341.                 var threshold = 300; // Adjust as needed
  1343.                 // Get the scroll block element
  1344.                 var scrollBlock = document.getElementById('scrollBlock');
  1346.                 // Show or hide the block based on scroll position
  1347.                 if (scrollPosition > threshold) {
  1348.                     scrollBlock.classList.remove('hidden');
  1349.                     scrollBlock.classList.add('visible');
  1350.                 } else {
  1351.                     scrollBlock.classList.remove('visible');
  1352.                     scrollBlock.classList.add('hidden');
  1353.                 }
  1354.             });
  1355.         });
  1357.         // Fonction pour fermer le bloc de détection du défilement
  1358.         function closeScrollBlock() {
  1359.             console.log("Fermeture du bloc de détection du défilement");
  1360.             var scrollBlock = document.getElementById('scrollBlock');
  1361.             scrollBlock.classList.remove('visible');
  1362.             scrollBlock.classList.add('hidden_btn');
  1363.         }
  1365.         document.addEventListener('scroll', function () {
  1366.             const container = document.querySelector('.article-right-flottant');
  1367.             const stickyBottom = document.querySelector('.sticky-bottom');
  1369.             const containerRect = container.getBoundingClientRect();
  1370.             const windowHeight = window.innerHeight;
  1371.             const contentHeight = containerRect.height;
  1372.             // Assuming scrollPosition is the current vertical scroll position
  1373.             const scrollPosition = window.scrollY;
  1375.             // Fixed threshold of 250 pixels
  1376.             const fixedThreshold = 5;
  1378.             // Calculate how close we are to the bottom of the content
  1379.             const distanceToBottom = contentHeight - (scrollPosition + windowHeight);
  1380.             console.log(Math.abs(distanceToBottom))
  1381.             if (distanceToBottom < 0) {
  1382.                 if (Math.abs(distanceToBottom) >= 357 || window.scrollY <= 199) {
  1383.                     stickyBottom.style.display = 'none';
  1384.                 } else {
  1385.                     stickyBottom.style.display = 'flex';
  1386.                 }
  1387.             } else {
  1388.                 // Check if we are within 250 pixels from the bottom
  1389.                 if (distanceToBottom <= fixedThreshold || window.scrollY <= 199) {
  1390.                     stickyBottom.style.display = 'none';
  1391.                 } else {
  1392.                     stickyBottom.style.display = 'flex';
  1393.                 }
  1394.             }
  1397.         });
  1399.         function applyStyle(element) {
  1400.             // Supprimer la classe 'active' de tous les liens
  1401.             const links = document.querySelectorAll('.large-device .ez-toc-link');
  1402.             links.forEach(link => link.classList.remove('active'));
  1404.             if (window.innerWidth <= 500) {
  1405.                 const links_mobile = document.querySelectorAll('.mobile-device .ez-toc-link');
  1406.                 links_mobile.forEach(link => link.classList.remove('active'));
  1407.             }
  1410.             // Ajouter la classe 'active' au lien cliqué
  1411.             element.classList.add('active');
  1413.             // Appliquez le style à l'élément <a> lorsque le lien est cliqué
  1414.             // element.style.color = 'grey';
  1415.             // element.style.opacity = '0.8';
  1416.             element.classList.add('clicked-link');
  1419.         }
  1421.         // Sélectionnez tous les liens de votre sommaire
  1422.         const links = document.querySelectorAll('.large-device .ez-toc-list a');
  1423.         const sections = Array.from(links).map(link => {
  1424.             const sectionId = link.getAttribute('href').substring(1);
  1425.             return document.getElementById(sectionId);
  1426.         });
  1428.         let currentActiveSection = null;
  1429.         let isScrollingToLink = false;
  1431.         function scrollToElement(element, container) {
  1432.             if (!isElementInViewport(element, container) && !isScrollingToLink) {
  1433.                 isScrollingToLink = true;
  1434.                 document.body.style.overflow = 'hidden';
  1436.                 element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  1438.                 setTimeout(() => {
  1439.                     document.body.style.overflow = '';
  1440.                     isScrollingToLink = false;
  1441.                 }, 100);
  1442.             }
  1443.         }
  1445.         function isElementInViewport(element, container) {
  1446.             var elementRect = element.getBoundingClientRect();
  1447.             var containerRect = container.getBoundingClientRect();
  1449.             return (
  1450.                 elementRect.top >= containerRect.top &&
  1451.                 elementRect.left >= containerRect.left &&
  1452.                 elementRect.bottom <= containerRect.bottom &&
  1453.                 elementRect.right <= containerRect.right
  1454.             );
  1455.         }
  1457.         function updateActiveLink() {
  1458.             if (isScrollingToLink) return;
  1460.             const scrollPosition = window.scrollY || window.pageYOffset;
  1461.             let newActiveSection = null;
  1463.             sections.some(section => {
  1464.                 const sectionTop = section.offsetTop;
  1465.                 const sectionHeight = section.offsetHeight;
  1467.                 if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
  1468.                     newActiveSection = section;
  1469.                     return true;
  1470.                 }
  1471.             });
  1473.             if (newActiveSection && newActiveSection !== currentActiveSection) {
  1474.                 currentActiveSection = newActiveSection;
  1476.                 links.forEach(link => {
  1477.                     const sectionId = link.getAttribute('href').substring(1);
  1478.                     const section = document.getElementById(sectionId);
  1479.                     const sommaire = document.querySelector('.large-device .ez-toc-list');
  1481.                     if (section === currentActiveSection) {
  1482.                         link.classList.add('active');
  1483.                         scrollToElement(link, sommaire);
  1484.                     } else {
  1485.                         link.classList.remove('active');
  1486.                     }
  1487.                 });
  1488.             }
  1489.         }
  1491.         window.addEventListener('scroll', updateActiveLink);
  1493.         document.addEventListener('DOMContentLoaded', () => {
  1494.             const links = document.querySelectorAll('.large-device .ez-toc-link');
  1495.             if (links.length > 0) {
  1496.                 links[0].classList.add('active');
  1497.             }
  1498.             if (window.innerWidth <= 500) {
  1499.                 const links_mobile = document.querySelectorAll('.mobile-device .ez-toc-link');
  1500.                 if (links_mobile.length > 0) {
  1501.                     links_mobile[0].classList.add('active');
  1502.                 }
  1503.             }
  1504.         });
  1505.         // window.addEventListener('scroll', () => {
  1506.         //     const stickyBottom = document.querySelector('.sticky-bottom');
  1507.         //     // console.log(window.scrollY); // ou window.pageYOffset
  1508.         //
  1509.         // });
  1512.     </script>
  1515. {% endblock %}