easylinux/EasyCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1c2b707ce847ee59348849f43bf0ac43ddcad131
EasyCloud/Sources/webAduc/Documentation/Utilisation de Twig, un moteur de templates !.htm
Serge NOEL 1c2b707ce8 Ajout projet webAduc
2020-11-20 13:56:16 +01:00

1116 lines
307 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="js supports no-touchevents cssfilters" prefix="og: http://ogp.me/ns#" style="" lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/300lo.json"></script><script type="text/javascript" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/_ate.config_resp"></script>
<title>Utilisation de Twig, un moteur de templates !</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta charset="utf-8"><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/2080865.js" type="text/javascript" id="messages-2080865"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/rules-p-d1D4hSPec1QW4.js"></script><script type="text/javascript" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/90dc06697a"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/linkid.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/quant.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/2080865_002.js" id="hs-analytics"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/gtm.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/analytics.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/identity.js" async=""></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/1570554156513134.js" async=""></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/fbevents.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/track.js" id="cio-tracker" data-site-id="46e8e9c18365c4bba6c1"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/blueshift.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/bat.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/amplitude-3.js"></script><script type="text/javascript" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/conversion_async.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/nr-1026.js"></script><script type="text/javascript" id="analytics-js" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/analytics_002.js"></script><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={xpid:"VQQOUlNSCRACVFJSBQAHUQ=="};window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o||n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({1:[function(t,n,e){function r(t){try{s.console&&console.log(t)}catch(n){}}var o,i=t("ee"),a=t(15),s={};try{o=localStorage.getItem("__nr_flags").split(","),console&&"function"==typeof console.log&&(s.console=!0,o.indexOf("dev")!==-1&&(s.dev=!0),o.indexOf("nr_dev")!==-1&&(s.nrDev=!0))}catch(c){}s.nrDev&&i.on("internal-error",function(t){r(t.stack)}),s.dev&&i.on("fn-err",function(t,n,e){r(e.stack)}),s.dev&&(r("NR AGENT IN DEVELOPMENT MODE"),r("flags: "+a(s,function(t,n){return t}).join(", ")))},{}],2:[function(t,n,e){function r(t,n,e,r,o){try{d?d-=1:i("err",[o||new UncaughtException(t,n,e)])}catch(s){try{i("ierr",[s,c.now(),!0])}catch(u){}}return"function"==typeof f&&f.apply(this,a(arguments))}function UncaughtException(t,n,e){this.message=t||"Uncaught error with no additional information",this.sourceURL=n,this.line=e}function o(t){i("err",[t,c.now()])}var i=t("handle"),a=t(16),s=t("ee"),c=t("loader"),f=window.onerror,u=!1,d=0;c.features.err=!0,t(1),window.onerror=r;try{throw new Error}catch(l){"stack"in l&&(t(8),t(7),"addEventListener"in window&&t(5),c.xhrWrappable&&t(9),u=!0)}s.on("fn-start",function(t,n,e){u&&(d+=1)}),s.on("fn-err",function(t,n,e){u&&(this.thrown=!0,o(e))}),s.on("fn-end",function(){u&&!this.thrown&&d>0&&(d-=1)}),s.on("internal-error",function(t){i("ierr",[t,c.now(),!0])})},{}],3:[function(t,n,e){t("loader").features.ins=!0},{}],4:[function(t,n,e){function r(t){}if(window.performance&&window.performance.timing&&window.performance.getEntriesByType){var o=t("ee"),i=t("handle"),a=t(8),s=t(7),c="learResourceTimings",f="addEventListener",u="resourcetimingbufferfull",d="bstResource",l="resource",p="-start",h="-end",m="fn"+p,w="fn"+h,v="bstTimer",y="pushState",g=t("loader");g.features.stn=!0,t(6);var b=NREUM.o.EV;o.on(m,function(t,n){var e=t[0];e instanceof b&&(this.bstStart=g.now())}),o.on(w,function(t,n){var e=t[0];e instanceof b&&i("bst",[e,n,this.bstStart,g.now()])}),a.on(m,function(t,n,e){this.bstStart=g.now(),this.bstType=e}),a.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),this.bstType])}),s.on(m,function(){this.bstStart=g.now()}),s.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),"requestAnimationFrame"])}),o.on(y+p,function(t){this.time=g.now(),this.startPath=location.pathname+location.hash}),o.on(y+h,function(t){i("bstHist",[location.pathname+location.hash,this.startPath,this.time])}),f in window.performance&&(window.performance["c"+c]?window.performance[f](u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["c"+c]()},!1):window.performance[f]("webkit"+u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["webkitC"+c]()},!1)),document[f]("scroll",r,{passive:!0}),document[f]("keypress",r,!1),document[f]("click",r,!1)}},{}],5:[function(t,n,e){function r(t){for(var n=t;n&&!n.hasOwnProperty(u);)n=Object.getPrototypeOf(n);n&&o(n)}function o(t){s.inPlace(t,[u,d],"-",i)}function i(t,n){return t[1]}var a=t("ee").get("events"),s=t(18)(a,!0),c=t("gos"),f=XMLHttpRequest,u="addEventListener",d="removeEventListener";n.exports=a,"getPrototypeOf"in Object?(r(document),r(window),r(f.prototype)):f.prototype.hasOwnProperty(u)&&(o(window),o(f.prototype)),a.on(u+"-start",function(t,n){var e=t[1],r=c(e,"nr@wrapped",function(){function t(){if("function"==typeof e.handleEvent)return e.handleEvent.apply(e,arguments)}var n={object:t,"function":e}[typeof e];return n?s(n,"fn-",null,n.name||"anonymous"):e});this.wrapped=t[1]=r}),a.on(d+"-start",function(t){t[1]=this.wrapped||t[1]})},{}],6:[function(t,n,e){var r=t("ee").get("history"),o=t(18)(r);n.exports=r,o.inPlace(window.history,["pushState","replaceState"],"-")},{}],7:[function(t,n,e){var r=t("ee").get("raf"),o=t(18)(r),i="equestAnimationFrame";n.exports=r,o.inPlace(window,["r"+i,"mozR"+i,"webkitR"+i,"msR"+i],"raf-"),r.on("raf-start",function(t){t[0]=o(t[0],"fn-")})},{}],8:[function(t,n,e){function r(t,n,e){t[0]=a(t[0],"fn-",null,e)}function o(t,n,e){this.method=e,this.timerDuration="number"==typeof t[1]?t[1]:0,t[0]=a(t[0],"fn-",this,e)}var i=t("ee").get("timer"),a=t(18)(i),s="setTimeout",c="setInterval",f="clearTimeout",u="-start",d="-";n.exports=i,a.inPlace(window,[s,"setImmediate"],s+d),a.inPlace(window,[c],c+d),a.inPlace(window,[f,"clearImmediate"],f+d),i.on(c+u,r),i.on(s+u,o)},{}],9:[function(t,n,e){function r(t,n){d.inPlace(n,["onreadystatechange"],"fn-",s)}function o(){var t=this,n=u.context(t);t.readyState>3&&!n.resolved&&(n.resolved=!0,u.emit("xhr-resolved",[],t)),d.inPlace(t,w,"fn-",s)}function i(t){v.push(t),h&&(g=-g,b.data=g)}function a(){for(var t=0;t<v.length;t++)r([],v[t]);v.length&&(v=[])}function s(t,n){return n}function c(t,n){for(var e in t)n[e]=t[e];return n}t(5);var f=t("ee"),u=f.get("xhr"),d=t(18)(u),l=NREUM.o,p=l.XHR,h=l.MO,m="readystatechange",w=["onload","onerror","onabort","onloadstart","onloadend","onprogress","ontimeout"],v=[];n.exports=u;var y=window.XMLHttpRequest=function(t){var n=new p(t);try{u.emit("new-xhr",[n],n),n.addEventListener(m,o,!1)}catch(e){try{u.emit("internal-error",[e])}catch(r){}}return n};if(c(p,y),y.prototype=p.prototype,d.inPlace(y.prototype,["open","send"],"-xhr-",s),u.on("send-xhr-start",function(t,n){r(t,n),i(n)}),u.on("open-xhr-start",r),h){var g=1,b=document.createTextNode(g);new h(a).observe(b,{characterData:!0})}else f.on("fn-end",function(t){t[0]&&t[0].type===m||a()})},{}],10:[function(t,n,e){function r(t){var n=this.params,e=this.metrics;if(!this.ended){this.ended=!0;for(var r=0;r<d;r++)t.removeEventListener(u[r],this.listener,!1);if(!n.aborted){if(e.duration=a.now()-this.startTime,4===t.readyState){n.status=t.status;var i=o(t,this.lastSize);if(i&&(e.rxSize=i),this.sameOrigin){var c=t.getResponseHeader("X-NewRelic-App-Data");c&&(n.cat=c.split(", ").pop())}}else n.status=0;e.cbTime=this.cbTime,f.emit("xhr-done",[t],t),s("xhr",[n,e,this.startTime])}}}function o(t,n){var e=t.responseType;if("json"===e&&null!==n)return n;var r="arraybuffer"===e||"blob"===e||"json"===e?t.response:t.responseText;return h(r)}function i(t,n){var e=c(n),r=t.params;r.host=e.hostname+":"+e.port,r.pathname=e.pathname,t.sameOrigin=e.sameOrigin}var a=t("loader");if(a.xhrWrappable){var s=t("handle"),c=t(11),f=t("ee"),u=["load","error","abort","timeout"],d=u.length,l=t("id"),p=t(14),h=t(13),m=window.XMLHttpRequest;a.features.xhr=!0,t(9),f.on("new-xhr",function(t){var n=this;n.totalCbs=0,n.called=0,n.cbTime=0,n.end=r,n.ended=!1,n.xhrGuids={},n.lastSize=null,p&&(p>34||p<10)||window.opera||t.addEventListener("progress",function(t){n.lastSize=t.loaded},!1)}),f.on("open-xhr-start",function(t){this.params={method:t[0]},i(this,t[1]),this.metrics={}}),f.on("open-xhr-end",function(t,n){"loader_config"in NREUM&&"xpid"in NREUM.loader_config&&this.sameOrigin&&n.setRequestHeader("X-NewRelic-ID",NREUM.loader_config.xpid)}),f.on("send-xhr-start",function(t,n){var e=this.metrics,r=t[0],o=this;if(e&&r){var i=h(r);i&&(e.txSize=i)}this.startTime=a.now(),this.listener=function(t){try{"abort"===t.type&&(o.params.aborted=!0),("load"!==t.type||o.called===o.totalCbs&&(o.onloadCalled||"function"!=typeof n.onload))&&o.end(n)}catch(e){try{f.emit("internal-error",[e])}catch(r){}}};for(var s=0;s<d;s++)n.addEventListener(u[s],this.listener,!1)}),f.on("xhr-cb-time",function(t,n,e){this.cbTime+=t,n?this.onloadCalled=!0:this.called+=1,this.called!==this.totalCbs||!this.onloadCalled&&"function"==typeof e.onload||this.end(e)}),f.on("xhr-load-added",function(t,n){var e=""+l(t)+!!n;this.xhrGuids&&!this.xhrGuids[e]&&(this.xhrGuids[e]=!0,this.totalCbs+=1)}),f.on("xhr-load-removed",function(t,n){var e=""+l(t)+!!n;this.xhrGuids&&this.xhrGuids[e]&&(delete this.xhrGuids[e],this.totalCbs-=1)}),f.on("addEventListener-end",function(t,n){n instanceof m&&"load"===t[0]&&f.emit("xhr-load-added",[t[1],t[2]],n)}),f.on("removeEventListener-end",function(t,n){n instanceof m&&"load"===t[0]&&f.emit("xhr-load-removed",[t[1],t[2]],n)}),f.on("fn-start",function(t,n,e){n instanceof m&&("onload"===e&&(this.onload=!0),("load"===(t[0]&&t[0].type)||this.onload)&&(this.xhrCbStart=a.now()))}),f.on("fn-end",function(t,n){this.xhrCbStart&&f.emit("xhr-cb-time",[a.now()-this.xhrCbStart,this.onload,n],n)})}},{}],11:[function(t,n,e){n.exports=function(t){var n=document.createElement("a"),e=window.location,r={};n.href=t,r.port=n.port;var o=n.href.split("://");!r.port&&o[1]&&(r.port=o[1].split("/")[0].split("@").pop().split(":")[1]),r.port&&"0"!==r.port||(r.port="https"===o[0]?"443":"80"),r.hostname=n.hostname||e.hostname,r.pathname=n.pathname,r.protocol=o[0],"/"!==r.pathname.charAt(0)&&(r.pathname="/"+r.pathname);var i=!n.protocol||":"===n.protocol||n.protocol===e.protocol,a=n.hostname===document.domain&&n.port===e.port;return r.sameOrigin=i&&(!n.hostname||a),r}},{}],12:[function(t,n,e){function r(){}function o(t,n,e){return function(){return i(t,[f.now()].concat(s(arguments)),n?null:this,e),n?void 0:this}}var i=t("handle"),a=t(15),s=t(16),c=t("ee").get("tracer"),f=t("loader"),u=NREUM;"undefined"==typeof window.newrelic&&(newrelic=u);var d=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],l="api-",p=l+"ixn-";a(d,function(t,n){u[n]=o(l+n,!0,"api")}),u.addPageAction=o(l+"addPageAction",!0),u.setCurrentRouteName=o(l+"routeName",!0),n.exports=newrelic,u.interaction=function(){return(new r).get()};var h=r.prototype={createTracer:function(t,n){var e={},r=this,o="function"==typeof n;return i(p+"tracer",[f.now(),t,e],r),function(){if(c.emit((o?"":"no-")+"fn-start",[f.now(),r,o],e),o)try{return n.apply(this,arguments)}finally{c.emit("fn-end",[f.now()],e)}}}};a("setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(t,n){h[n]=o(p+n)}),newrelic.noticeError=function(t){"string"==typeof t&&(t=new Error(t)),i("err",[t,f.now()])}},{}],13:[function(t,n,e){n.exports=function(t){if("string"==typeof t&&t.length)return t.length;if("object"==typeof t){if("undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer&&t.byteLength)return t.byteLength;if("undefined"!=typeof Blob&&t instanceof Blob&&t.size)return t.size;if(!("undefined"!=typeof FormData&&t instanceof FormData))try{return JSON.stringify(t).length}catch(n){return}}}},{}],14:[function(t,n,e){var r=0,o=navigator.userAgent.match(/Firefox[\/\s](\d+\.\d+)/);o&&(r=+o[1]),n.exports=r},{}],15:[function(t,n,e){function r(t,n){var e=[],r="",i=0;for(r in t)o.call(t,r)&&(e[i]=n(r,t[r]),i+=1);return e}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],16:[function(t,n,e){function r(t,n,e){n||(n=0),"undefined"==typeof e&&(e=t?t.length:0);for(var r=-1,o=e-n||0,i=Array(o<0?0:o);++r<o;)i[r]=t[n+r];return i}n.exports=r},{}],17:[function(t,n,e){n.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],18:[function(t,n,e){function r(t){return!(t&&t instanceof Function&&t.apply&&!t[a])}var o=t("ee"),i=t(16),a="nr@original",s=Object.prototype.hasOwnProperty,c=!1;n.exports=function(t,n){function e(t,n,e,o){function nrWrapper(){var r,a,s,c;try{a=this,r=i(arguments),s="function"==typeof e?e(r,a):e||{}}catch(f){l([f,"",[r,a,o],s])}u(n+"start",[r,a,o],s);try{return c=t.apply(a,r)}catch(d){throw u(n+"err",[r,a,d],s),d}finally{u(n+"end",[r,a,c],s)}}return r(t)?t:(n||(n=""),nrWrapper[a]=t,d(t,nrWrapper),nrWrapper)}function f(t,n,o,i){o||(o="");var a,s,c,f="-"===o.charAt(0);for(c=0;c<n.length;c++)s=n[c],a=t[s],r(a)||(t[s]=e(a,f?s+o:o,i,s))}function u(e,r,o){if(!c||n){var i=c;c=!0;try{t.emit(e,r,o,n)}catch(a){l([a,e,r,o])}c=i}}function d(t,n){if(Object.defineProperty&&Object.keys)try{var e=Object.keys(t);return e.forEach(function(e){Object.defineProperty(n,e,{get:function(){return t[e]},set:function(n){return t[e]=n,n}})}),n}catch(r){l([r])}for(var o in t)s.call(t,o)&&(n[o]=t[o]);return n}function l(n){try{t.emit("internal-error",n)}catch(e){}}return t||(t=o),e.inPlace=f,e.flag=a,e}},{}],ee:[function(t,n,e){function r(){}function o(t){function n(t){return t&&t instanceof r?t:t?c(t,s,i):i()}function e(e,r,o,i){if(!l.aborted||i){t&&t(e,r,o);for(var a=n(o),s=h(e),c=s.length,f=0;f<c;f++)s[f].apply(a,r);var d=u[y[e]];return d&&d.push([g,e,r,a]),a}}function p(t,n){v[t]=h(t).concat(n)}function h(t){return v[t]||[]}function m(t){return d[t]=d[t]||o(e)}function w(t,n){f(t,function(t,e){n=n||"feature",y[e]=n,n in u||(u[n]=[])})}var v={},y={},g={on:p,emit:e,get:m,listeners:h,context:n,buffer:w,abort:a,aborted:!1};return g}function i(){return new r}function a(){(u.api||u.feature)&&(l.aborted=!0,u=l.backlog={})}var s="nr@context",c=t("gos"),f=t(15),u={},d={},l=n.exports=o();l.backlog=u},{}],gos:[function(t,n,e){function r(t,n,e){if(o.call(t,n))return t[n];var r=e();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,n,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return t[n]=r,r}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],handle:[function(t,n,e){function r(t,n,e,r){o.buffer([t],r),o.emit(t,n,e)}var o=t("ee").get("handle");n.exports=r,r.ee=o},{}],id:[function(t,n,e){function r(t){var n=typeof t;return!t||"object"!==n&&"function"!==n?-1:t===window?0:a(t,i,function(){return o++})}var o=1,i="nr@id",a=t("gos");n.exports=r},{}],loader:[function(t,n,e){function r(){if(!x++){var t=b.info=NREUM.info,n=l.getElementsByTagName("script")[0];if(setTimeout(u.abort,3e4),!(t&&t.licenseKey&&t.applicationID&&n))return u.abort();f(y,function(n,e){t[n]||(t[n]=e)}),c("mark",["onload",a()+b.offset],null,"api");var e=l.createElement("script");e.src="https://"+t.agent,n.parentNode.insertBefore(e,n)}}function o(){"complete"===l.readyState&&i()}function i(){c("mark",["domContent",a()+b.offset],null,"api")}function a(){return E.exists&&performance.now?Math.round(performance.now()):(s=Math.max((new Date).getTime(),s))-b.offset}var s=(new Date).getTime(),c=t("handle"),f=t(15),u=t("ee"),d=window,l=d.document,p="addEventListener",h="attachEvent",m=d.XMLHttpRequest,w=m&&m.prototype;NREUM.o={ST:setTimeout,CT:clearTimeout,XHR:m,REQ:d.Request,EV:d.Event,PR:d.Promise,MO:d.MutationObserver};var v=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1026.min.js"},g=m&&w&&w[p]&&!/CriOS/.test(navigator.userAgent),b=n.exports={offset:s,now:a,origin:v,features:{},xhrWrappable:g};t(12),l[p]?(l[p]("DOMContentLoaded",i,!1),d[p]("load",r,!1)):(l[h]("onreadystatechange",o),d[h]("onload",r)),c("mark",["firstbyte",s],null,"api");var x=0,E=t(17)},{}]},{},["loader",2,10,4,3]);</script>
<meta name="application-name" content="OpenClassrooms">
<meta name="msapplication-TileColor" content="#e95325">
<meta name="msapplication-TileImage" content="/fav-icon.png?v=1">
<meta name="theme-color" content="#E95325">
<link rel="icon" sizes="144x144" href="https://openclassrooms.com/fav-icon.png?v=1">
<link rel="apple-touch-icon" href="https://openclassrooms.com/apple-touch-icon.png">
<link rel="apple-touch-icon" href="https://openclassrooms.com/apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://openclassrooms.com/apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://openclassrooms.com/apple-touch-icon-iphone-retina-display.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://openclassrooms.com/apple-touch-icon-ipad-retina-display.png">
<link rel="apple-touch-icon-precomposed" href="https://openclassrooms.com/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="https://openclassrooms.com/favicon.ico?55e135e">
<link href="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/master-50071247.css" type="text/css" rel="stylesheet" media="all">
<link href="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/main-49192b3f.css" type="text/css" rel="stylesheet" media="all">
<script>
/*! modernizr 3.3.1 (Custom Build) | MIT *
* https://modernizr.com/download/?-cssfilters-touchevents-setclasses !*/
!function(e,n,t){function o(e,n){return typeof e===n}function r(){var e,n,t,r,s,i,a;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],n=C[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(r=o(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=r:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=r),g.push((r?"":"no-")+a.join("-"))}}function s(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(){var e=n.body;return e||(e=i(x?"svg":"body"),e.fake=!0),e}function l(e,t,o,r){var s,l,u,f,p="modernizr",c=i("div"),d=a();if(parseInt(o,10))for(;o--;)u=i("div"),u.id=r?r[o]:p+(o+1),c.appendChild(u);return s=i("style"),s.type="text/css",s.id="s"+p,(d.fake?d:c).appendChild(s),d.appendChild(c),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(n.createTextNode(e)),c.id=p,d.fake&&(d.style.background="",d.style.overflow="hidden",f=w.style.overflow,w.style.overflow="hidden",w.appendChild(d)),l=t(c,e),d.fake?(d.parentNode.removeChild(d),w.style.overflow=f,w.offsetHeight):c.parentNode.removeChild(c),!!l}function u(e,n){return!!~(""+e).indexOf(n)}function f(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function p(e,n){return function(){return e.apply(n,arguments)}}function c(e,n,t){var r;for(var s in e)if(e[s]in n)return t===!1?e[s]:(r=n[e[s]],o(r,"function")?p(r,t||n):r);return!1}function d(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function m(n,o){var r=n.length;if("CSS"in e&&"supports"in e.CSS){for(;r--;)if(e.CSS.supports(d(n[r]),o))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];r--;)s.push("("+d(n[r])+":"+o+")");return s=s.join(" or "),l("@supports ("+s+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function h(e,n,r,s){function a(){p&&(delete k.style,delete k.modElem)}if(s=o(s,"undefined")?!1:s,!o(r,"undefined")){var l=m(e,r);if(!o(l,"undefined"))return l}for(var p,c,d,h,v,y=["modernizr","tspan","samp"];!k.style&&y.length;)p=!0,k.modElem=i(y.shift()),k.style=k.modElem.style;for(d=e.length,c=0;d>c;c++)if(h=e[c],v=k.style[h],u(h,"-")&&(h=f(h)),k.style[h]!==t){if(s||o(r,"undefined"))return a(),"pfx"==n?h:!0;try{k.style[h]=r}catch(g){}if(k.style[h]!=v)return a(),"pfx"==n?h:!0}return a(),!1}function v(e,n,t,r,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+j.join(i+" ")+i).split(" ");return o(n,"string")||o(n,"undefined")?h(a,n,r,s):(a=(e+" "+E.join(i+" ")+i).split(" "),c(a,n,t))}function y(e,n,o){return v(e,t,t,n,o)}var g=[],C=[],S={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),_=S._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];S._prefixes=_;var b="CSS"in e&&"supports"in e.CSS,T="supportsCSS"in e;Modernizr.addTest("supports",b||T);var z=S.testStyles=l;Modernizr.addTest("touchevents",function(){var t;if("ontouchstart"in e||e.DocumentTouch&&n instanceof DocumentTouch)t=!0;else{var o=["@media (",_.join("touch-enabled),("),"heartz",")","{#modernizr{top:9px;position:absolute}}"].join("");z(o,function(e){t=9===e.offsetTop})}return t});var P="Moz O ms Webkit",j=S._config.usePrefixes?P.split(" "):[];S._cssomPrefixes=j;var E=S._config.usePrefixes?P.toLowerCase().split(" "):[];S._domPrefixes=E;var N={elem:i("modernizr")};Modernizr._q.push(function(){delete N.elem});var k={style:N.elem.style};Modernizr._q.unshift(function(){delete k.style}),S.testAllProps=v,S.testAllProps=y,Modernizr.addTest("cssfilters",function(){if(Modernizr.supports)return y("filter","blur(2px)");var e=i("a");return e.style.cssText=_.join("filter:blur(2px); "),!!e.style.length&&(n.documentMode===t||n.documentMode>9)}),r(),s(g),delete S.addTest,delete S.addAsyncTest;for(var A=0;A<Modernizr._q.length;A++)Modernizr._q[A]();e.Modernizr=Modernizr}(window,document);
</script>
<script type="text/javascript">
var App = {
startTime: (new Date()).getTime(),
pageGenerationDate: 1493979845000
};
App.user = {
isPremium: false
};
App.preferences = {
debug: false,
assetVersion: '55e135e',
contactMail: 'hello\x40openclassrooms.com',
adyenPublicKey: '10001\x7C889EBFD4D434B82683E21DCA26E77C3E20E0EE09A5ECE3830B0ED51F2FA721A2F7E9EC871C6AB9A1E12C4492F4717673047757E02C5256D8E265CD51E413E5EFCCFEAC41B39C662A424ADC13EE187C38C372A7FCCEC1EA5DF841989437D78B252A8EB51008E60BB55B1E55A7A80DE1A9D60D998C128A576BFAE1DDB97D514AF0A073AEDDE84CEE40D1F8F6ECE85D0FFA50C95C06DB274021C1371376C6EB16561FD65C5E2704B570A7504D617D0F3820F176A0609F6162BDF5890533289FDC3DA7DB03B50BB3BD60A613E1FF72060F22987627E8F1A29F0128A94EC4C8FF7CF6B7AB9558D8433BF86D7A388AB927641CD6C02689139CEE3AAC9ACBFFE83806CB',
cdnImage: true,
layer: {
appId: 'layer\x3A\x2F\x2F\x2Fapps\x2Fstaging\x2F7757c53a\x2Db2ba\x2D11e5\x2Db2a6\x2D2584730b1501',
identityProviderUrl: '\x2Fajax\x2Fconversations\x2Fget\x2Didentity\x2Dtoken'
},
algolia: {
appId: 'JGRXRFVQM0',
apiKey: 'dfbdea500cb0b5f46e449ad334916c44', indexName: 'prod_v2_COURSES_fr'
},
routes: {
COURSE_EVENT: '/components/courses/:courseId',
COURSE_PART_EVENT: '/components/courses/:courseId/parts/:partId',
ACCEPT_COOKIE: '\x2Fcomponents\x2Fuser\x2Daccept\x2Dconsent\x2Dcookie'
},
};
App.preferences.navigationPreference = {
};
App.preferences.modules = {
'smiley': {
basePath: '/bundles/common/images/smiley/'
}
};
App.notifications = {};
App.scripts = [];
</script>
<script>
App.data = App.data || {};
App.data.currentCourse = {"courseId":442495,"courseTitle":"Utilisation de Twig, un moteur de templates !","courseSlug":"utilisation-de-twig-un-moteur-de-templates","courseLanguage":"fr","isIntroduction":true,"isCertifying":false};
App.preferences.modules['view/currentCoursePage'] = App.data.currentCourse;
</script>
<script type="application/ld+json">
{"@context":"http:\/\/schema.org","@type":"Course","name":"Utilisation de Twig, un moteur de templates !","description":"Utilisation de Twig, un moteur de templates !","provider":{"@type":"Organization","name":"OpenClassrooms","sameAs":"https:\/\/openclassrooms.com\/"}}
</script>
<meta property="og:locale" content="fr">
<meta property="og:type" content="website">
<meta property="og:title" content="Utilisation de Twig, un moteur de templates ! @OpenClassrooms">
<meta property="og:url" content="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates">
<meta property="og:site_name" content="OpenClassrooms">
<meta property="og:image" content="">
<meta property="og:description" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@OpenClassrooms">
<meta name="twitter:title" content="Utilisation de Twig, un moteur de templates ! @OpenClassrooms">
<meta name="twitter:description" content="">
<style type="text/css">.fancybox-margin{margin-right:17px;}</style><style id="ace_editor.css">.ace_editor {position: relative;overflow: hidden;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;}.ace_scroller {position: absolute;overflow: hidden;top: 0;bottom: 0;background-color: inherit;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;cursor: text;}.ace_content {position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 100%;}.ace_dragging .ace_scroller:before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';background: rgba(250, 250, 250, 0.01);z-index: 1000;}.ace_dragging.ace_dark .ace_scroller:before{background: rgba(0, 0, 0, 0.01);}.ace_selecting, .ace_selecting * {cursor: text !important;}.ace_gutter {position: absolute;overflow : hidden;width: auto;top: 0;bottom: 0;left: 0;cursor: default;z-index: 4;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;}.ace_gutter-active-line {position: absolute;left: 0;right: 0;}.ace_scroller.ace_scroll-left {box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;}.ace_gutter-cell {padding-left: 19px;padding-right: 6px;background-repeat: no-repeat;}.ace_gutter-cell.ace_error {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: 2px center;}.ace_gutter-cell.ace_warning {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAmVBMVEX///8AAAD///8AAAAAAABPSzb/5sAAAAB/blH/73z/ulkAAAAAAAD85pkAAAAAAAACAgP/vGz/rkDerGbGrV7/pkQICAf////e0IsAAAD/oED/qTvhrnUAAAD/yHD/njcAAADuv2r/nz//oTj/p064oGf/zHAAAAA9Nir/tFIAAAD/tlTiuWf/tkIAAACynXEAAAAAAAAtIRW7zBpBAAAAM3RSTlMAABR1m7RXO8Ln31Z36zT+neXe5OzooRDfn+TZ4p3h2hTf4t3k3ucyrN1K5+Xaks52Sfs9CXgrAAAAjklEQVR42o3PbQ+CIBQFYEwboPhSYgoYunIqqLn6/z8uYdH8Vmdnu9vz4WwXgN/xTPRD2+sgOcZjsge/whXZgUaYYvT8QnuJaUrjrHUQreGczuEafQCO/SJTufTbroWsPgsllVhq3wJEk2jUSzX3CUEDJC84707djRc5MTAQxoLgupWRwW6UB5fS++NV8AbOZgnsC7BpEAAAAABJRU5ErkJggg==");background-position: 2px center;}.ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=");background-position: 2px center;}.ace_dark .ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC");}.ace_scrollbar {position: absolute;right: 0;bottom: 0;z-index: 6;}.ace_scrollbar-inner {position: absolute;cursor: text;left: 0;top: 0;}.ace_scrollbar-v{overflow-x: hidden;overflow-y: scroll;top: 0;}.ace_scrollbar-h {overflow-x: scroll;overflow-y: hidden;left: 0;}.ace_print-margin {position: absolute;height: 100%;}.ace_text-input {position: absolute;z-index: 0;width: 0.5em;height: 1em;opacity: 0;background: transparent;-moz-appearance: none;appearance: none;border: none;resize: none;outline: none;overflow: hidden;font: inherit;padding: 0 1px;margin: 0 -1px;text-indent: -1em;-ms-user-select: text;-moz-user-select: text;-webkit-user-select: text;user-select: text;white-space: pre!important;}.ace_text-input.ace_composition {background: inherit;color: inherit;z-index: 1000;opacity: 1;text-indent: 0;}.ace_layer {z-index: 1;position: absolute;overflow: hidden;word-wrap: normal;white-space: pre;height: 100%;width: 100%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;pointer-events: none;}.ace_gutter-layer {position: relative;width: auto;text-align: right;pointer-events: auto;}.ace_text-layer {font: inherit !important;}.ace_cjk {display: inline-block;text-align: center;}.ace_cursor-layer {z-index: 4;}.ace_cursor {z-index: 4;position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;border-left: 2px solid;transform: translatez(0);}.ace_slim-cursors .ace_cursor {border-left-width: 1px;}.ace_overwrite-cursors .ace_cursor {border-left-width: 0;border-bottom: 1px solid;}.ace_hidden-cursors .ace_cursor {opacity: 0.2;}.ace_smooth-blinking .ace_cursor {-webkit-transition: opacity 0.18s;transition: opacity 0.18s;}.ace_editor.ace_multiselect .ace_cursor {border-left-width: 1px;}.ace_marker-layer .ace_step, .ace_marker-layer .ace_stack {position: absolute;z-index: 3;}.ace_marker-layer .ace_selection {position: absolute;z-index: 5;}.ace_marker-layer .ace_bracket {position: absolute;z-index: 6;}.ace_marker-layer .ace_active-line {position: absolute;z-index: 2;}.ace_marker-layer .ace_selected-word {position: absolute;z-index: 4;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.ace_line .ace_fold {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;height: 11px;margin-top: -2px;vertical-align: middle;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACJJREFUeNpi+P//fxgTAwPDBxDxD078RSX+YeEyDFMCIMAAI3INmXiwf2YAAAAASUVORK5CYII=");background-repeat: no-repeat, repeat-x;background-position: center center, top left;color: transparent;border: 1px solid black;border-radius: 2px;cursor: pointer;pointer-events: auto;}.ace_dark .ace_fold {}.ace_fold:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi+P//fz4TAwPDZxDxD5X4i5fLMEwJgAADAEPVDbjNw87ZAAAAAElFTkSuQmCC");}.ace_tooltip {background-color: #FFF;background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));border: 1px solid gray;border-radius: 1px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: black;max-width: 100%;padding: 3px 4px;position: fixed;z-index: 999999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: default;white-space: pre;word-wrap: break-word;line-height: normal;font-style: normal;font-weight: normal;letter-spacing: normal;pointer-events: none;}.ace_folding-enabled > .ace_gutter-cell {padding-right: 13px;}.ace_fold-widget {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0 -12px 0 1px;display: none;width: 11px;vertical-align: top;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: center;border-radius: 3px;border: 1px solid transparent;cursor: pointer;}.ace_folding-enabled .ace_fold-widget {display: inline-block; }.ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42m3HwQkAMAhD0YzsRchFKI7sAikeWkrxwScEB0nh5e7KTPWimZki4tYfVbX+MNl4pyZXejUO1QAAAABJRU5ErkJggg==");}.ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==");}.ace_fold-widget:hover {border: 1px solid rgba(0, 0, 0, 0.3);background-color: rgba(255, 255, 255, 0.2);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);}.ace_fold-widget:active {border: 1px solid rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.05);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);}.ace_dark .ace_fold-widget {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2P4//8/AzoGEQ7oGCaLLAhWiSwB146BAQCSTPYocqT0AAAAAElFTkSuQmCC");}.ace_dark .ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAH0lEQVQIW2P4//8/AxQ7wNjIAjDMgC4AxjCVKBirIAAF0kz2rlhxpAAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAHElEQVQIW2P4//+/AxAzgDADlOOAznHAKgPWAwARji8UIDTfQQAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget:hover {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);background-color: rgba(255, 255, 255, 0.1);}.ace_dark .ace_fold-widget:active {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);}.ace_fold-widget.ace_invalid {background-color: #FFB4B4;border-color: #DE5555;}.ace_fade-fold-widgets .ace_fold-widget {-webkit-transition: opacity 0.4s ease 0.05s;transition: opacity 0.4s ease 0.05s;opacity: 0;}.ace_fade-fold-widgets:hover .ace_fold-widget {-webkit-transition: opacity 0.05s ease 0.05s;transition: opacity 0.05s ease 0.05s;opacity:1;}.ace_underline {text-decoration: underline;}.ace_bold {font-weight: bold;}.ace_nobold .ace_bold {font-weight: normal;}.ace_italic {font-style: italic;}.ace_error-marker {background-color: rgba(255, 0, 0,0.2);position: absolute;z-index: 9;}.ace_highlight-marker {background-color: rgba(255, 255, 0,0.2);position: absolute;z-index: 8;}.ace_br1 {border-top-left-radius : 3px;}.ace_br2 {border-top-right-radius : 3px;}.ace_br3 {border-top-left-radius : 3px; border-top-right-radius: 3px;}.ace_br4 {border-bottom-right-radius: 3px;}.ace_br5 {border-top-left-radius : 3px; border-bottom-right-radius: 3px;}.ace_br6 {border-top-right-radius : 3px; border-bottom-right-radius: 3px;}.ace_br7 {border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}.ace_br8 {border-bottom-left-radius : 3px;}.ace_br9 {border-top-left-radius : 3px; border-bottom-left-radius: 3px;}.ace_br10{border-top-right-radius : 3px; border-bottom-left-radius: 3px;}.ace_br11{border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br12{border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br13{border-top-left-radius : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br14{border-top-right-radius : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br15{border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
/*# sourceURL=ace/css/ace_editor.css */</style><style id="ace-tm">.ace-tm .ace_gutter {background: #f0f0f0;color: #333;}.ace-tm .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-tm .ace_fold {background-color: #6B72E6;}.ace-tm {background-color: #FFFFFF;color: black;}.ace-tm .ace_cursor {color: black;}.ace-tm .ace_invisible {color: rgb(191, 191, 191);}.ace-tm .ace_storage,.ace-tm .ace_keyword {color: blue;}.ace-tm .ace_constant {color: rgb(197, 6, 11);}.ace-tm .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-tm .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-tm .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-tm .ace_invalid {background-color: rgba(255, 0, 0, 0.1);color: red;}.ace-tm .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-tm .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {color: rgb(109, 121, 222);}.ace-tm .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-tm .ace_string {color: rgb(3, 106, 7);}.ace-tm .ace_comment {color: rgb(76, 136, 107);}.ace-tm .ace_comment.ace_doc {color: rgb(0, 102, 255);}.ace-tm .ace_comment.ace_doc.ace_tag {color: rgb(128, 159, 191);}.ace-tm .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-tm .ace_variable {color: rgb(49, 132, 149);}.ace-tm .ace_xml-pe {color: rgb(104, 104, 91);}.ace-tm .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-tm .ace_heading {color: rgb(12, 7, 255);}.ace-tm .ace_list {color:rgb(185, 6, 144);}.ace-tm .ace_meta.ace_tag {color:rgb(0, 22, 142);}.ace-tm .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-tm .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-tm.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}.ace-tm .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-tm .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-tm .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-tm .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-tm .ace_gutter-active-line {background-color : #dcdcdc;}.ace-tm .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-tm .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}
/*# sourceURL=ace/css/ace-tm */</style><style> .error_widget_wrapper { background: inherit; color: inherit; border:none } .error_widget { border-top: solid 2px; border-bottom: solid 2px; margin: 5px 0; padding: 10px 40px; white-space: pre-wrap; } .error_widget.ace_error, .error_widget_arrow.ace_error{ border-color: #ff5a5a } .error_widget.ace_warning, .error_widget_arrow.ace_warning{ border-color: #F1D817 } .error_widget.ace_info, .error_widget_arrow.ace_info{ border-color: #5a5a5a } .error_widget.ace_ok, .error_widget_arrow.ace_ok{ border-color: #5aaa5a } .error_widget_arrow { position: absolute; border: solid 5px; border-top-color: transparent!important; border-right-color: transparent!important; border-left-color: transparent!important; top: -5px; }</style><style type="text/css">.at-icon{fill:#fff;border:0}.at-icon-wrapper{display:inline-block;overflow:hidden}a .at-icon-wrapper{cursor:pointer}.at-rounded,.at-rounded-element .at-icon-wrapper{border-radius:12%}.at-circular,.at-circular-element .at-icon-wrapper{border-radius:50%}.addthis_32x32_style .at-icon{width:2pc;height:2pc}.addthis_24x24_style .at-icon{width:24px;height:24px}.addthis_20x20_style .at-icon{width:20px;height:20px}.addthis_16x16_style .at-icon{width:1pc;height:1pc}#at16lb{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1001;background-color:#000;opacity:.001}#at_complete,#at_error,#at_share,#at_success{position:static!important}.at15dn{display:none}#at15s,#at16p,#at16p form input,#at16p label,#at16p textarea,#at_share .at_item{font-family:arial,helvetica,tahoma,verdana,sans-serif!important;font-size:9pt!important;outline-style:none;outline-width:0;line-height:1em}* html #at15s.mmborder{position:absolute!important}#at15s.mmborder{position:fixed!important;width:250px!important}#at15s{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);float:none;line-height:1em;margin:0;overflow:visible;padding:5px;text-align:left;position:absolute}#at15s a,#at15s span{outline:0;direction:ltr;text-transform:none}#at15s .at-label{margin-left:5px}#at15s .at-icon-wrapper{width:1pc;height:1pc;vertical-align:middle}#at15s .at-icon{width:1pc;height:1pc}.at4-icon{display:inline-block;background-repeat:no-repeat;background-position:top left;margin:0;overflow:hidden;cursor:pointer}.addthis_16x16_style .at4-icon,.addthis_default_style .at4-icon,.at4-icon,.at-16x16{width:1pc;height:1pc;line-height:1pc;background-size:1pc!important}.addthis_32x32_style .at4-icon,.at-32x32{width:2pc;height:2pc;line-height:2pc;background-size:2pc!important}.addthis_24x24_style .at4-icon,.at-24x24{width:24px;height:24px;line-height:24px;background-size:24px!important}.addthis_20x20_style .at4-icon,.at-20x20{width:20px;height:20px;line-height:20px;background-size:20px!important}.at4-icon.circular,.circular .at4-icon,.circular.aticon{border-radius:50%}.at4-icon.rounded,.rounded .at4-icon{border-radius:4px}.at4-icon-left{float:left}#at15s .at4-icon{text-indent:20px;padding:0;overflow:visible;white-space:nowrap;background-size:1pc;width:1pc;height:1pc;background-position:top left;display:inline-block;line-height:1pc}.addthis_vertical_style .at4-icon,.at4-follow-container .at4-icon{margin-right:5px}html>body #at15s{width:250px!important}#at15s.atm{background:none!important;padding:0!important;width:10pc!important}#at15s_inner{background:#fff;border:1px solid #fff;margin:0}#at15s_head{position:relative;background:#f2f2f2;padding:4px;cursor:default;border-bottom:1px solid #e5e5e5}.at15s_head_success{background:#cafd99!important;border-bottom:1px solid #a9d582!important}.at15s_head_success a,.at15s_head_success span{color:#000!important;text-decoration:none}#at15s_brand,#at15sptx,#at16_brand{position:absolute}#at15s_brand{top:4px;right:4px}.at15s_brandx{right:20px!important}a#at15sptx{top:4px;right:4px;text-decoration:none;color:#4c4c4c;font-weight:700}#at15sptx:hover{text-decoration:underline}#at16_brand{top:5px;right:30px;cursor:default}#at_hover{padding:4px}#at_hover .at_item,#at_share .at_item{background:#fff!important;float:left!important;color:#4c4c4c!important}#at_share .at_item .at-icon-wrapper{margin-right:5px}#at_hover .at_bold{font-weight:700;color:#000!important}#at_hover .at_item{width:7pc!important;padding:2px 3px!important;margin:1px;text-decoration:none!important}#at_hover .at_item.athov,#at_hover .at_item:focus,#at_hover .at_item:hover{margin:0!important}#at_hover .at_item.athov,#at_hover .at_item:focus,#at_hover .at_item:hover,#at_share .at_item.athov,#at_share .at_item:hover{background:#f2f2f2!important;border:1px solid #e5e5e5;color:#000!important;text-decoration:none}.ipad #at_hover .at_item:focus{background:#fff!important;border:1px solid #fff}.at15t{display:block!important;height:1pc!important;line-height:1pc!important;padding-left:20px!important;background-position:0 0;text-align:left}.addthis_button,.at15t{cursor:pointer}.addthis_toolbox a.at300b,.addthis_toolbox a.at300m{width:auto}.addthis_toolbox a{margin-bottom:5px;line-height:initial}.addthis_toolbox.addthis_vertical_style{width:200px}.addthis_button_facebook_like .fb_iframe_widget{line-height:100%}.addthis_button_facebook_like iframe.fb_iframe_widget_lift{max-width:none}.addthis_toolbox a.addthis_button_counter,.addthis_toolbox a.addthis_button_facebook_like,.addthis_toolbox a.addthis_button_facebook_send,.addthis_toolbox a.addthis_button_facebook_share,.addthis_toolbox a.addthis_button_foursquare,.addthis_toolbox a.addthis_button_google_plusone,.addthis_toolbox a.addthis_button_linkedin_counter,.addthis_toolbox a.addthis_button_pinterest_pinit,.addthis_toolbox a.addthis_button_stumbleupon_badge,.addthis_toolbox a.addthis_button_tweet{display:inline-block}.at-share-tbx-element .google_plusone_iframe_widget>span>div{vertical-align:top!important}.addthis_toolbox span.addthis_follow_label{display:none}.addthis_toolbox.addthis_vertical_style span.addthis_follow_label{display:block;white-space:nowrap}.addthis_toolbox.addthis_vertical_style a{display:block}.addthis_toolbox.addthis_vertical_style.addthis_32x32_style a{line-height:2pc;height:2pc}.addthis_toolbox.addthis_vertical_style .at300bs{margin-right:4px;float:left}.addthis_toolbox.addthis_20x20_style span{line-height:20px}.addthis_toolbox.addthis_32x32_style span{line-height:2pc}.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact,.addthis_toolbox.addthis_pill_combo_style a{float:left}.addthis_toolbox.addthis_pill_combo_style a.addthis_button_tweet{margin-top:-2px}.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact{margin-right:4px}.addthis_default_style .addthis_separator{margin:0 5px;display:inline}div.atclear{clear:both}.addthis_default_style .addthis_separator,.addthis_default_style .at4-icon,.addthis_default_style .at300b,.addthis_default_style .at300bo,.addthis_default_style .at300bs,.addthis_default_style .at300m{float:left}.at300b img,.at300bo img{border:0}a.at300b .at4-icon,a.at300m .at4-icon{display:block}.addthis_default_style .at300b,.addthis_default_style .at300bo,.addthis_default_style .at300m{padding:0 2px}.at300b,.at300bo,.at300bs,.at300m{cursor:pointer}.addthis_button_facebook_like.at300b:hover,.addthis_button_facebook_like.at300bs:hover,.addthis_button_facebook_send.at300b:hover,.addthis_button_facebook_send.at300bs:hover{opacity:1}.addthis_20x20_style .at15t,.addthis_20x20_style .at300bs{overflow:hidden;display:block;height:20px!important;width:20px!important;line-height:20px!important}.addthis_32x32_style .at15t,.addthis_32x32_style .at300bs{overflow:hidden;display:block;height:2pc!important;width:2pc!important;line-height:2pc!important}.at300bs{overflow:hidden;display:block;background-position:0 0;height:1pc;width:1pc;line-height:1pc!important}.addthis_default_style .at15t_compact,.addthis_default_style .at15t_expanded{margin-right:4px}#at_share .at_item{width:123px!important;padding:4px;margin-right:2px;border:1px solid #fff}#at16p{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);z-index:10000001;position:absolute;top:50%;left:50%;width:300px;padding:10px;margin:0 auto;margin-top:-185px;margin-left:-155px;font-family:arial,helvetica,tahoma,verdana,sans-serif;font-size:9pt;color:#5e5e5e}#at_share{margin:0;padding:0}#at16pt{position:relative;background:#f2f2f2;height:13px;padding:5px 10px}#at16pt a,#at16pt h4{font-weight:700}#at16pt h4{display:inline;margin:0;padding:0;font-size:9pt;color:#4c4c4c;cursor:default}#at16pt a{position:absolute;top:5px;right:10px;color:#4c4c4c;text-decoration:none;padding:2px}#at15sptx:focus,#at16pt a:focus{outline:thin dotted}#at15s #at16pf a{top:1px}#_atssh{width:1px!important;height:1px!important;border:0!important}.atm{width:10pc!important;padding:0;margin:0;line-height:9pt;letter-spacing:normal;font-family:arial,helvetica,tahoma,verdana,sans-serif;font-size:9pt;color:#444;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);padding:4px}.atm-f{text-align:right;border-top:1px solid #ddd;padding:5px 8px}.atm-i{background:#fff;border:1px solid #d5d6d6;padding:0;margin:0;box-shadow:1px 1px 5px rgba(0,0,0,.15)}.atm-s{margin:0!important;padding:0!important}.atm-s a:focus{border:transparent;outline:0;-webkit-transition:none;transition:none}#at_hover.atm-s a,.atm-s a{display:block;text-decoration:none;padding:4px 10px;color:#235dab!important;font-weight:400;font-style:normal;-webkit-transition:none;transition:none}#at_hover.atm-s .at_bold{color:#235dab!important}#at_hover.atm-s a:hover,.atm-s a:hover{background:#2095f0;text-decoration:none;color:#fff!important}#at_hover.atm-s .at_bold{font-weight:700}#at_hover.atm-s a:hover .at_bold{color:#fff!important}.atm-s a .at-label{vertical-align:middle;margin-left:5px;direction:ltr}.at_PinItButton{display:block;width:40px;height:20px;padding:0;margin:0;background-image:url(//s7.addthis.com/static/t00/pinit00.png);background-repeat:no-repeat}.at_PinItButton:hover{background-position:0 -20px}.addthis_toolbox .addthis_button_pinterest_pinit{position:relative}.at-share-tbx-element .fb_iframe_widget span{vertical-align:baseline!important}#at16pf{height:auto;text-align:right;padding:4px 8px}.at-privacy-info{position:absolute;left:7px;bottom:7px;cursor:pointer;text-decoration:none;font-family:helvetica,arial,sans-serif;font-size:10px;line-height:9pt;letter-spacing:.2px;color:#666}.at-privacy-info:hover{color:#000}.body .wsb-social-share .wsb-social-share-button-vert{padding-top:0;padding-bottom:0}.body .wsb-social-share.addthis_counter_style .addthis_button_tweet.wsb-social-share-button{padding-top:40px}.body .wsb-social-share.addthis_counter_style .addthis_button_google_plusone.wsb-social-share-button{padding-top:0}.body .wsb-social-share.addthis_counter_style .addthis_button_facebook_like.wsb-social-share-button{padding-top:21px}@media print{#at4-follow,#at4-share,#at4-thankyou,#at4-whatsnext,#at4m-mobile,#at15s,.at4,.at4-recommended{display:none!important}}@media screen and (max-width:400px){.at4win{width:100%}}@media screen and (max-height:700px) and (max-width:400px){.at4-thankyou-inner .at4-recommended-container{height:122px;overflow:hidden}.at4-thankyou-inner .at4-recommended .at4-recommended-item:first-child{border-bottom:1px solid #c5c5c5}}</style><style type="text/css">.at-branding-logo{font-family:helvetica,arial,sans-serif;text-decoration:none;font-size:10px;display:inline-block;margin:2px 0;letter-spacing:.2px}.at-branding-logo .at-branding-icon{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////+GlNUkcc1QAAAB1JREFUeNpiYIQDBjQmAwMmkwEM0JnY1WIxFyDAABGeAFEudiZsAAAAAElFTkSuQmCC")}.at-branding-logo .at-branding-icon,.at-branding-logo .at-privacy-icon{display:inline-block;height:10px;width:10px;margin-left:4px;margin-right:3px;margin-bottom:-1px;background-repeat:no-repeat}.at-branding-logo .at-privacy-icon{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAMAAABR24SMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF8fr9ot/xXcfn2/P5AKva////////AKTWodjhjAAAAAd0Uk5T////////ABpLA0YAAAA6SURBVHjaJMzBDQAwCAJAQaj7b9xifV0kUKJ9ciWxlzWEWI5gMF65KUTv0VKkjVeTerqE/x7+9BVgAEXbAWI8QDcfAAAAAElFTkSuQmCC")}.at-branding-logo span{text-decoration:none}.at-branding-logo .at-branding-addthis,.at-branding-logo .at-branding-powered-by{color:#666}.at-branding-logo .at-branding-addthis:hover{color:#333}.at-cv-with-image .at-branding-addthis,.at-cv-with-image .at-branding-addthis:hover{color:#fff}a.at-branding-logo:visited{color:initial}.at-branding-info{display:inline-block;padding:0 5px;color:#666;border:1px solid #666;border-radius:50%;font-size:10px;line-height:9pt;opacity:.7;transition:all .3s ease;text-decoration:none}.at-branding-info span{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.at-branding-info:before{content:'i';font-family:Times New Roman}.at-branding-info:hover{color:#0780df;border-color:#0780df}</style><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/theme-monokai.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/mode-php.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/mode-html.js"></script><style id="ace-monokai">.ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}
/*# sourceURL=ace/css/ace-monokai */</style><style>.ace_static_highlight {font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;font-size: 12px;white-space: pre-wrap}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;}.ace_static_highlight.ace_show_gutter .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line { position: relative; }.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}.ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}</style><script async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/satismeter.js"></script><style type="text/css"></style><script type="text/javascript" charset="utf-8" async="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/layers.js"></script><style type="text/css">.at-share-dock.atss{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;z-index:1000200;box-shadow:0 0 1px 1px #e2dfe2}.at-share-dock.at-share-dock-zindex-hide{z-index:-1!important}.at-share-dock.atss-top{bottom:auto;top:0}.at-share-dock a{width:auto;-webkit-transition:none;transition:none;color:#fff;text-decoration:none;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.at-share-dock a:hover{width:auto}.at-share-dock .at4-count{height:43px;padding:5px 0 0;line-height:20px;background:#fff;font-family:Helvetica neue,arial}.at-share-dock .at4-count span{width:100%}.at-share-dock .at4-count .at4-share-label{color:#848484;font-size:10px;letter-spacing:1px}.at-share-dock .at4-count .at4-counter{top:2px;position:relative;display:block;color:#222;font-size:22px}.at-share-dock.at-shfs-medium .at4-count{height:36px;line-height:1pc;padding-top:4px}.at-share-dock.at-shfs-medium .at4-count .at4-counter{font-size:18px}.at-share-dock.at-shfs-medium .at-share-btn .at-icon-wrapper,.at-share-dock.at-shfs-medium a .at-icon-wrapper{padding:6px 0}.at-share-dock.at-shfs-small .at4-count{height:26px;line-height:1;padding-top:3px}.at-share-dock.at-shfs-small .at4-count .at4-share-label{font-size:8px}.at-share-dock.at-shfs-small .at4-count .at4-counter{font-size:14px}.at-share-dock.at-shfs-small .at-share-btn .at-icon-wrapper,.at-share-dock.at-shfs-small a .at-icon-wrapper{padding:4px 0}</style><style type="text/css">#at4m-mobile-container{z-index:9999999;position:fixed}#at4m-menu{-webkit-transition-timing-function:linear;transition-timing-function:linear}#at4-searchClear{cursor:pointer}#at4m-dock{position:fixed;left:0;width:100%;-o-box-shadow:0 -1px 4px rgba(0,0,0,.15);box-shadow:0 -1px 4px rgba(0,0,0,.15);font-family:helvetica neue,helvetica,arial,sans-serif;font-size:14px;font-weight:300;color:#000}.at4m-dock{background:#ebebeb}.at4m-dock-bottom{top:auto;bottom:0}.at4m-dock-top{top:0;bottom:auto}.at4m-dock a:link,.at4m-dock a:visited{display:block;border:none;margin:0;padding:0;height:45px;line-height:45px;text-align:center;text-decoration:none;text-shadow:none;font-weight:700;color:#555;cursor:pointer;float:left;zoom:1}.at4m-dock a:active,.at4m-dock a:hover,.at4m-dock-toggle a:hover{background-color:#e2e2e2;color:#000;cursor:pointer}.at4m-dock a i{display:inline-block;height:45px;line-height:45px;vertical-align:middle;opacity:.2}.at4m-dock a:active i,.at4m-dock a:hover i{opacity:.9}.at4m-dock a i.at4m-dock-share{background:url(//s7.addthis.com/static/0cdf7a36b49e9150e4ddd7ce01143fdc.png) no-repeat 0 0;background-image:url(//s7.addthis.com/static/c4ee1ef2025cac1d2377de864e802791.svg),none;background-position:0 -2px;width:30px}.at4m-dock a i.at4m-dock-follow{background:url(//s7.addthis.com/static/34c65ab171688e81111b0c5219405376.png) no-repeat 0 0;background-image:url(//s7.addthis.com/static/2f9e800dffd36b9ae492670a4340386e.svg),none;background-position:0 -2px;width:26px}.at4m-dock.at4-ma1 a{display:inline-block;width:86%}.at4m-dock.at4-ma2 a{display:inline-block;width:43%}.at4m-dock.at4-ma2 a:first-child{border-right:1px solid #ccc}.at4m-dock-toggle{position:fixed;left:auto;right:0;width:14%;min-width:40px;height:45px}.at4m-dock-toggle-bottom{top:auto;bottom:0}.at4m-dock-toggle-top{bottom:auto;top:0}.at4m-dock-toggle a{display:block;background:url(//s7.addthis.com/static/6f026d41cd1a08a0f124517f4a4b6381.png) no-repeat center;background-image:url(//s7.addthis.com/static/6ac59ac63a78f7c0ecfe9bbc05ee16af.svg),none;border-left:1px solid #ccc;height:44px;line-height:44px;overflow:hidden;text-indent:-9999em;text-align:center;padding:0;margin:0;opacity:.35}.at4m-dock-toggle a.at4-dock-toggle-active{background:url(//s7.addthis.com/static/edb81de4c71c0bc5e7093002607fb828.png) no-repeat center;background-image:url(//s7.addthis.com/static/958b6ad449d91a582198eaaa1013e4a8.svg),none;background-color:#fff;border-top:1px solid #ccc}.at4m-dock-toggle.ats-dark,.at4m-dock.ats-dark{background:#262b30;border-color:#1b1b1b;color:#fff}.at4m-dock.ats-dark a{color:#f2f2f2}.at4m-dock.ats-dark a i{opacity:.25}.at4m-dock.at4-ma2.ats-dark a:first-child{border-right:1px solid #3e4247}.at4m-dock-toggle.ats-dark a:active,.at4m-dock-toggle.ats-dark a:hover,.at4m-dock.ats-dark a:active,.at4m-dock.ats-dark a:hover{background-color:#1b1e22}.at4m-dock.ats-dark a i.at4m-dock-share{background:url(//s7.addthis.com/static/969412d543656390654b7a1fbad5c052.png) no-repeat left center;background-image:url(//s7.addthis.com/static/d0b50381e6dff723034c9fb045fa5579.svg),none;background-position:0 -2px}.at4m-dock.ats-dark a i.at4m-dock-follow{background:url(//s7.addthis.com/static/031cd90bcb2cf1bc5d0514d6df32e08b.png) no-repeat left center;background-image:url(//s7.addthis.com/static/9b6c210d20bea1e6b56e800331c32bff.svg),none;background-position:0 -2px}.at4m-dock-toggle.ats-dark a{background:url(//s7.addthis.com/static/bd94d63e97308ccebb29a220dcc82c2c.png) no-repeat center;background-image:url(//s7.addthis.com/static/066d11a3dfa049803336eba1abb50292.svg),none;border-color:#676d73}.at4m-dock-toggle.ats-dark a.at4-dock-toggle-active{background:url(//s7.addthis.com/static/6ff05a92b143930d8fcc6a7d47a6859b.png) no-repeat center;background-image:url(//s7.addthis.com/static/fd9202254cfad377dad0ecc0eb38d503.svg),none}.at4m-dock-toggle.top,.at4m-dock.top{top:0;bottom:auto}.at4m-dock-toggle.top a{background:url(//s7.addthis.com/static/edb81de4c71c0bc5e7093002607fb828.png) no-repeat center;background-image:url(//s7.addthis.com/static/958b6ad449d91a582198eaaa1013e4a8.svg),none}.at4m-dock-toggle.top a.at4-dock-toggle-active{background:url(//s7.addthis.com/static/6f026d41cd1a08a0f124517f4a4b6381.png) no-repeat center;background-image:url(//s7.addthis.com/static/6ac59ac63a78f7c0ecfe9bbc05ee16af.svg),none}.at4m-dock-toggle.top.ats-dark a{background:url(//s7.addthis.com/static/6ff05a92b143930d8fcc6a7d47a6859b.png) no-repeat center;background-image:url(//s7.addthis.com/static/fd9202254cfad377dad0ecc0eb38d503.svg),none;border-color:#676d73}.at4m-dock-toggle.top.ats-dark a.at4-dock-toggle-active{background:url(//s7.addthis.com/static/bd94d63e97308ccebb29a220dcc82c2c.png) no-repeat center;background-image:url(//s7.addthis.com/static/066d11a3dfa049803336eba1abb50292.svg),none}.at4m-dock.ats-gray{border-top:1px solid #dbdbdb}.at4m-dock.ats-gray a:first-child{border-right:1px solid #dadada}.at4m-dock.ats-gray a{color:#444}.at4m-dock.ats-gray a i{opacity:.25}.at4m-dock-toggle.ats-gray a{border-color:#b2b2b2}.at4m-dock-toggle.ats-gray a.at4-dock-toggle-active{background-color:#e2e2e2;border-color:#b2b2b2}.at4m-dock-toggle.ats-light a:active,.at4m-dock-toggle.ats-light a:hover,.at4m-dock.ats-light a:active,.at4m-dock.ats-light a:hover{background-color:#f5f5f5}.at4m-dock-toggle.ats-light a.at4-dock-toggle,.at4m-dock-toggle.ats-light a.at4-dock-toggle-active{background-color:#fff;border-color:#dadada}.at4m-menu{position:fixed;background:#fff;top:0;left:0;right:0;bottom:0;font-family:helvetica neue,helvetica,arial,sans-serif;font-size:14px;font-weight:300;display:none;opacity:0}.at4m-menu.abs{position:absolute}.at4m-menu .at4m-menu-inner{position:relative;width:100%;height:100%;overflow:auto}.at4m-menu .at4m-menu-inner .at4m-menu-header{position:fixed;top:0;left:0;right:0;width:100%;background:#fff;-o-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1);font-family:helvetica neue,helvetica,arial,sans-serif;font-weight:700;color:#444;cursor:default}.at4m-menu .at4m-menu-inner .at4m-menu-header .at4m-menu-header-inner{position:relative;height:44px;text-align:left;line-height:44px;padding:0 44px 0 15px}.at4m-menu .at4m-menu-inner .at4m-menu-header .at4m-menu-header-inner a.at4m-menu-cancel{position:absolute;top:0;right:0;display:block;background:url(//s7.addthis.com/static/56b9cf44789a75f4822ae4677c0809f0.png) no-repeat center center;background-image:url(//s7.addthis.com/static/fc0122e3c71ae79db7be2a7ccfcd419c.svg),none;width:42px;height:44px;overflow:hidden;text-indent:-9999em;opacity:.74}#at4m-menu-body{top:45px;bottom:35px;left:0;overflow-y:scroll}#at4m-menu-body,#at4m-scroller{position:absolute;width:100%}.at4m-hidden-overflow{overflow:hidden}.at4m-scroll-overflow{overflow-y:auto!important}.at4m-menu .at4m-menu-inner .at4m-menu-search{position:relative;background:#f5f5f5;border-bottom:1px solid #e7e9ec;height:44px}.at4m-menu .at4m-menu-inner .at4m-menu-search input[type=text]{position:absolute;top:7px;left:13px;right:15px;width:auto;background:transparent;border:none;height:24px;line-height:1.14em;padding:4px 4px 4px 22px;font-size:1.14em;font-weight:300;outline:0;margin-bottom:0}.at4m-menu .at4m-menu-inner .at4m-menu-search input[type=submit]{position:absolute;top:11px;left:14px;width:1pc;height:1pc;background:url(//s7.addthis.com/static/3fc4b18bbb046f074de86a3cb5398353.svg),none;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NDQxMjk0RDkzRjIxMUUyODgyNEMyRjRCOUU5QTdDNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NDQxMjk0RTkzRjIxMUUyODgyNEMyRjRCOUU5QTdDNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU0NDEyOTRCOTNGMjExRTI4ODI0QzJGNEI5RTlBN0M2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU0NDEyOTRDOTNGMjExRTI4ODI0QzJGNEI5RTlBN0M2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+RlRfxAAAAOhJREFUeNrEU+0NgkAM5YwD4Aa6AUygTuAIwASck8hNAG7CBrKBjIAT4CvpkSb2/Ag/bNL0CH3vXj/OjOMYLbFVtNDW/mCMmWJVVVuEXOS01tpWgqRq4z+IAOALjla5qAFJoRHMJQCcM7iDHwEgSSkpIEVM/mKzAufcHSGG7wAeZBLAN4QEvqF/qgLYlqUOykVXjsmnKTwCzR6+GSMlZZAbK3kZx/4dgeMyak9CEV7jeKDmorw+2EQeYy12oFNqnsYZ3AMxzhNPxDdwL4ibsiyLIEHIhLoOBOnPb4E38UxLpvbgb6/xKcAAtbllO+gwy6kAAAAASUVORK5CYII=");background-repeat:no-repeat;background-position:0 0;background-position:center bottom\9;border:none;overflow:hidden;text-indent:-9999em;cursor:pointer;opacity:.22}.at4m-menu .at4m-menu-inner .at4m-menu-search input[type=cancel]{position:absolute;top:9pt;right:20px;width:18px;height:18px;background:url(//s7.addthis.com/static/f048274431eaef1b46f80d94f1c18af6.png) no-repeat center center;background-image:url(//s7.addthis.com/static/666b87d14e4d4e526b57292ab8adc465.svg),none;background-size:18px 18px;border:none;overflow:hidden;text-indent:-9999em;opacity:.14}.at4m-menu .at4m-menu-inner .at4m-menu-footer{position:fixed;bottom:0;left:0;right:0;width:100%;height:30px;background:#fff;text-align:left;line-height:1pc;-o-box-shadow:0 -2px 4px rgba(0,0,0,.1);box-shadow:0 -2px 4px rgba(0,0,0,.1)}.at4m-menu .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner{position:relative;height:26px;padding:5px 15px}.at4m-menu .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner .at4m-menu-footer-logo{background:url(//s7.addthis.com/static/5432e2206e5cb0b11874ad11e5a22186.png);background-image:url(//s7.addthis.com/static/f1a5a53cfb4afc0b8231b342c9e39ece.svg),none;background-repeat:no-repeat;background-position:left 2px;background-size:9px 9px;padding-left:9pt}.at4m-menu .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner .at4m-menu-footer-privacy{position:absolute;top:7px;right:15px;background:url(//s7.addthis.com/static/7450d2e11bef7d7c140b197429765a62.png);background-image:url(//s7.addthis.com/static/d714fde79b61d3f511dd5c11ad366e68.svg),none;background-repeat:no-repeat;background-position:right 3px;background-size:8px 9px;padding-right:13px}.at4m-menu .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner a:link,.at4m-menu .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner a:visited{font-size:.714em;text-decoration:none;color:#666}.at4m-menu.abs{border-top:.5px solid #efefef}.at4m-menu.abs,.at4m-menu.abs .at4m-menu-inner .at4m-menu-footer,.at4m-menu.abs .at4m-menu-inner .at4m-menu-header{position:absolute}.at4m-menu .at4m-menu-content{position:relative;padding:0 0 27px}.at4m-menu .at4m-menu-content ul{margin:0;padding:0}.at4m-menu .at4m-menu-content ul li{background:#fff;list-style:none;margin:0;padding:0;border-bottom:1px solid #e7e9ec;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.at4m-menu .at4m-menu-content ul li:hover{background:#f5f5f5}.at4m-menu .at4m-menu-content ul li a{position:relative;display:block;height:2pc;line-height:2pc;padding:9pt 20px 9pt 14px;text-decoration:none;text-align:left;font-family:helvetica neue,helvetica,arial,sans-serif;font-size:1.07em;font-weight:300;color:#444;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.at4m-menu .at4m-menu-content ul li a:active{background-color:#f9f9f9}.at4m-menu .at4m-menu-content ul li a span.at-icon-wrapper{margin:0 9px 0 0;float:left}.at4m-menu .at4m-menu-content ul li a span.at4-label{display:inline-block;height:2pc;line-height:2pc;margin-left:10px}.at4m-menu .at4m-menu-content ul li a span.at4-label.atservice-preferred{font-weight:700}.at4m-menu .at4m-menu-content ul li a span.at4-arrow{display:inline-block;position:absolute;right:5px;background:url(//s7.addthis.com/static/745bc30b589d20aeba08481e06fae159.png);background-image:url(//s7.addthis.com/static/f4d5547a72831e67681d82122e1d563f.svg),none;background-repeat:no-repeat;background-position:center center;width:2pc;height:2pc;text-indent:-9999em;overflow:hidden;opacity:.22}.at4m-menu.ats-dark .at4m-menu-footer,.at4m-menu.ats-dark .at4m-menu-header{background:#262b30;color:#fff}.at4m-menu.ats-dark .at4m-menu-inner .at4m-menu-header button{background:#000;border-color:#333;color:#fff}.at4m-menu.ats-dark .at4m-menu-inner .at4m-menu-header .at4m-menu-header-inner a.at4m-menu-cancel{background:url(//s7.addthis.com/static/5092b14c9020eaa68c3de74da2219940.png) no-repeat center center;background-image:url(//s7.addthis.com/static/fb08f6d50887bd0caacc86a62bcdcf68.svg),none}.at4m-menu.ats-dark .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner a:link,.at4m-menu.ats-dark .at4m-menu-inner .at4m-menu-footer .at4m-menu-footer-inner a:visited{color:#ccc}#at4m-dock:hover{cursor:pointer}#at4m-dock.ats-dark{background:#262b30;border-color:#1b1b1b;color:#fff}#at4m-dock.ats-light{background:#fff;border-color:#c5c5c5}.at4m-dock.ats-dark a,.at4m-dock.ats-dark a:first-child{color:#fff}.at4m-dock.ats-dark a:active,.at4m-dock.ats-dark a:hover{background:#1b1e22}.at-expandedmenu-component .at4m-dock,.at-expandedmenu-component .at4m-dock-toggle{display:none}</style><style type="text/css">#at4-drawer-outer-container{top:0;width:20pc;position:fixed}#at4-drawer-outer-container.at4-drawer-inline{position:relative}#at4-drawer-outer-container.at4-drawer-inline.at4-drawer-right{float:right;right:0;left:auto}#at4-drawer-outer-container.at4-drawer-inline.at4-drawer-left{float:left;left:0;right:auto}#at4-drawer-outer-container.at4-drawer-shown,#at4-drawer-outer-container.at4-drawer-shown *{z-index:999999}#at4-drawer-outer-container,#at4-drawer-outer-container .at4-drawer-outer,#at-drawer{height:100%;overflow-y:auto;overflow-x:hidden}.at4-drawer-push-content-right-back{position:relative;right:0}.at4-drawer-push-content-right{position:relative;left:20pc!important}.at4-drawer-push-content-left-back{position:relative;left:0}.at4-drawer-push-content-left{position:relative;right:20pc!important}#at4-drawer-outer-container.at4-drawer-right{left:auto;right:-20pc}#at4-drawer-outer-container.at4-drawer-left{right:auto;left:-20pc}#at4-drawer-outer-container.at4-drawer-shown.at4-drawer-right{left:auto;right:0}#at4-drawer-outer-container.at4-drawer-shown.at4-drawer-left{right:auto;left:0}#at-drawer{top:0;z-index:9999999;height:100%;-webkit-animation-duration:.4s;animation-duration:.4s}#at-drawer.drawer-push.at-right{right:-20pc}#at-drawer.drawer-push.at-left{left:-20pc}#at-drawer .at-recommended-label{padding:0 0 0 20px;color:#999;line-height:3pc;font-size:18px;font-weight:300;cursor:default}#at-drawer-arrow{width:30px;height:5pc}#at-drawer-arrow.ats-dark{background:#262b30}#at-drawer-arrow.ats-gray{background:#f2f2f2}#at-drawer-open-arrow{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAABcCAYAAAC1OT8uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3ODNCQjdERUQ3QjExRTM5NjFGRUZBODc3MTIwMTNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk3ODNCQjdFRUQ3QjExRTM5NjFGRUZBODc3MTIwMTNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTc4M0JCN0JFRDdCMTFFMzk2MUZFRkE4NzcxMjAxM0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTc4M0JCN0NFRDdCMTFFMzk2MUZFRkE4NzcxMjAxM0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kstzCAAAB4ElEQVR42uyWv0oDQRDGb9dYimgVjliID2Ca9AGfwtZob2Grja1PIFj7EhGCYK99VPBPOkVMp8X5rc6FeN7dfjOksMjAxwXZ3667OzvfLKRr682l5ZV9aDh+fxsnRHhoDzqGLjFBi4XOoFtoAxowoB893o/w7WpAl/+QgQMBwwRdTPhUC2lAV/wDA7qy5WOgq9psHejqTqkKdLE7KYCv0JZjMgBgB58raBG6mP1K6j2pT099T+qMUOeeOss1wDcEIA1PnQXy576rAUI0oFMoC7VCnn40Gs8Pd4lAiXNUKmJ0lh1mPzGEWiyUCqAGW3Pwv4IvUJsFO9CHgP3Zr6Te0xwgAf3LxaAjS241pbikCRkOg+nSJdV4p8HOPl3vvRYI5dtrgVDvvcWovcWovcWovcWovcWovcWovQChWNywNpqvdAKtQp/QNmPUIQ6kwwqt2Xmsxf6GMPM1Pptsbz45CPmXqKb+15Gz4J/LZcDSNIqBlQlbB0afe1mmUDWiCNKFZRq0VKMeXY1CTDq2sJLWsCmoaBBRqNRR6qBKC6qCaj2rDIqaXBGiXHEaom00h1S+K3fVlr6HNuqgvgCh0+owt21bybQn8+mZ78mcEebcM2e5+T2ZX24ZqCph0qn1vgQYAJ/KDpLQr2tPAAAAAElFTkSuQmCC);background-repeat:no-repeat;width:13px;height:23px;margin:28px 0 0 8px}.at-left #at-drawer-open-arrow{background-position:0 -46px}.ats-dark #at-drawer-open-arrow{background-position:0 -23px}.ats-dark.at-left #at-drawer-open-arrow{background-position:0 -69px}#at-drawer-arrow.at4-drawer-modern-browsers{position:fixed;top:40%;background-repeat:no-repeat;background-position:0 0!important;z-index:9999999}.at4-drawer-inline #at-drawer-arrow{position:absolute}#at-drawer-arrow.at4-drawer-modern-browsers.at-right{right:0}#at-drawer-arrow.at4-drawer-modern-browsers.at-left{left:0}.at4-drawer-push-animation-left{-webkit-transition:left .4s ease-in-out .15s;transition:left .4s ease-in-out .15s}.at4-drawer-push-animation-right{-webkit-transition:right .4s ease-in-out .15s;transition:right .4s ease-in-out .15s}#at-drawer.drawer-push.at4-drawer-push-animation-right{right:0}#at-drawer.drawer-push.at4-drawer-push-animation-right-back{right:-20pc!important}#at-drawer.drawer-push.at4-drawer-push-animation-left{left:0}#at-drawer.drawer-push.at4-drawer-push-animation-left-back{left:-20pc!important}#at-drawer .at4-closebutton.drawer-close{content:'X';color:#999;display:block;position:absolute;margin:0;top:0;right:0;width:3pc;height:45px;line-height:45px;overflow:hidden;opacity:.5}#at-drawer.ats-dark .at4-closebutton.drawer-close{color:#fff}#at-drawer .at4-closebutton.drawer-close:hover{opacity:1}#at-drawer.ats-dark.at4-recommended .at4-logo-container a{color:#666}#at-drawer.at4-recommended .at4-recommended-vertical{padding:0}#at-drawer.at4-recommended .at4-recommended-item .sponsored-label{margin:2px 0 0 21px;color:#ddd}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item{position:relative;padding:0;width:20pc;height:180px;margin:0}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img a:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:1000000;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item.at-hover .at4-recommended-item-img a:after{background:rgba(0,0,0,.8)}#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img,#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img a,#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img img{width:20pc;height:180px;float:none}#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption{width:100%;position:absolute;bottom:0;left:0;height:70px}#at-drawer .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4{color:#fff;position:absolute;height:52px;top:0;left:20px;right:20px;margin:0;padding:0;line-height:25px;font-size:20px;font-weight:600;z-index:1000001;text-decoration:none;text-transform:none}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 a:hover{text-decoration:none}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4 a:link{color:#fff}#at-drawer.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption small{position:absolute;top:auto;bottom:10px;left:20px;width:auto;color:#ccc}#at-drawer.at4-recommended .at4-logo-container{margin-left:20px}#at-drawer.ats-dark.at4-recommended .at4-logo-container a:hover{color:#fff}#at-drawer.at4-recommended .at-logo{margin:0}</style><style type="text/css">.at4-follow.at-mobile{display:none!important}.at4-follow{position:fixed;top:0;right:0;font-weight:400;color:#666;cursor:default;z-index:10001}.at4-follow .at4-follow-inner{position:relative;padding:10px 24px 10px 15px}.at4-follow-inner,.at-follow-open-control{border:0 solid #c5c5c5;border-width:1px 0 1px 1px;margin-top:-1px}.at4-follow .at4-follow-container{margin-left:9pt}.at4-follow.at4-follow-24 .at4-follow-container{height:24px;line-height:23px;font-size:13px}.at4-follow.at4-follow-32 .at4-follow-container{width:15pc;height:2pc;line-height:2pc;font-size:14px}.at4-follow .at4-follow-container .at-follow-label{display:inline-block;height:24px;line-height:24px;margin-right:10px;padding:0;cursor:default;float:left}.at4-follow .at4-follow-container .at-icon-wrapper{height:24px;width:24px}.at4-follow.ats-transparent .at4-follow-inner,.at-follow-open-control.ats-transparent{border-color:transparent}.at4-follow.ats-dark .at4-follow-inner,.at-follow-open-control.ats-dark{background:#262b30;border-color:#000;color:#fff}.at4-follow.ats-dark .at-follow-close-control{background-color:#262b30}.at4-follow.ats-light .at4-follow-inner{background:#fff;border-color:#c5c5c5}.at4-follow.ats-gray .at4-follow-inner,.at-follow-open-control.ats-gray{background:#f2f2f2;border-color:#c5c5c5}.at4-follow.ats-light .at4-follow-close-control,.at-follow-open-control.ats-light{background:#e5e5e5}.at4-follow .at4-follow-inner .at4-follow-close-control{position:absolute;top:0;bottom:0;left:0;width:20px;cursor:pointer;display:none}.at4-follow .at4-follow-inner .at4-follow-close-control div{display:block;line-height:20px;text-indent:-9999em;margin-top:calc(50% + 1px);overflow:hidden}.at-follow-open-control div.at4-arrow.at-left{background-position:0 -2px}.at-follow-open-control{position:fixed;height:35px;top:0;right:0;padding-top:10px;z-index:10002}.at-follow-btn{margin:0 5px 5px 0;padding:0;outline-offset:-1px;display:inline-block;box-sizing:content-box;transition:all .2s ease-in-out}.at-follow-btn:focus,.at-follow-btn:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.at4-follow-24 .at-follow-btn{height:25px;line-height:0;width:25px}</style><style type="text/css">.at-follow-tbx-element .at300b,.at-follow-tbx-element .at300m{display:inline-block;width:auto;padding:0;margin:0 2px 5px;outline-offset:-1px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.at-follow-tbx-element .at300b:focus,.at-follow-tbx-element .at300b:hover,.at-follow-tbx-element .at300m:focus,.at-follow-tbx-element .at300m:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.at-follow-tbx-element .addthis_vertical_style .at300b,.at-follow-tbx-element .addthis_vertical_style .at300m{display:block}.at-follow-tbx-element .addthis_vertical_style .at300b .addthis_follow_label,.at-follow-tbx-element .addthis_vertical_style .at300b .at-icon-wrapper,.at-follow-tbx-element .addthis_vertical_style .at300m .addthis_follow_label,.at-follow-tbx-element .addthis_vertical_style .at300m .at-icon-wrapper{display:inline-block;vertical-align:middle;margin-right:5px}.at-follow-tbx-element .addthis_vertical_style .at300b:focus,.at-follow-tbx-element .addthis_vertical_style .at300b:hover,.at-follow-tbx-element .addthis_vertical_style .at300m:focus,.at-follow-tbx-element .addthis_vertical_style .at300m:hover{-webkit-transform:none;transform:none}</style><style type="text/css">.at4-jumboshare .at-share-btn{display:inline-block;margin-right:13px;margin-top:13px}.at4-jumboshare .at-share-btn .at-icon{float:left}.at4-jumboshare .at-share-btn .at300bs{display:inline-block;float:left;cursor:pointer}.at4-jumboshare .at4-mobile .at-share-btn .at-icon,.at4-jumboshare .at4-mobile .at-share-btn .at-icon-wrapper{margin:0;padding:0}.at4-jumboshare .at4-mobile .at-share-btn{padding:0}.at4-jumboshare .at4-mobile .at-share-btn .at-label{display:none}.at4-jumboshare .at4-count{font-size:60px;line-height:60px;font-family:Helvetica neue,arial;font-weight:700}.at4-jumboshare .at4-count-container{display:table-cell;text-align:center;min-width:200px;vertical-align:middle;border-right:1px solid #ccc;padding-right:20px}.at4-jumboshare .at4-share-container{display:table-cell;vertical-align:middle;padding-left:20px}.at4-jumboshare .at4-share-container.at-share-tbx-element{padding-top:0}.at4-jumboshare .at4-title{position:relative;font-size:18px;line-height:18px;bottom:2px}.at4-jumboshare .at4-spacer{height:1px;display:block;visibility:hidden;opacity:0}.at4-jumboshare .at-share-btn{display:inline-block;margin:0 2px;line-height:0;padding:0;overflow:hidden;text-decoration:none;text-transform:none;color:#fff;cursor:pointer;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border:0;background-color:transparent}.at4-jumboshare .at-share-btn:focus,.at4-jumboshare .at-share-btn:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);color:#fff;text-decoration:none}.at4-jumboshare .at-label{font-family:helvetica neue,helvetica,arial,sans-serif;font-size:9pt;padding:0 15px 0 0;margin:0;height:2pc;line-height:2pc;background:none}.at4-jumboshare .at-share-btn:hover,.at4-jumboshare .at-share-btn:link{text-decoration:none}.at4-jumboshare .at-share-btn::-moz-focus-inner{border:0;padding:0}.at4-jumboshare.at-mobile .at-label{display:none}</style><style type="text/css">div.at-share-close-control.ats-dark,div.at-share-open-control-left.ats-dark,div.at-share-open-control-right.ats-dark{background:#262b30}div.at-share-close-control.ats-light,div.at-share-open-control-left.ats-light,div.at-share-open-control-right.ats-light{background:#fff}div.at-share-close-control.ats-gray,div.at-share-open-control-left.ats-gray,div.at-share-open-control-right.ats-gray{background:#f2f2f2}.atss{position:fixed;top:20%;width:3pc;z-index:100020;background:none}.at-share-close-control{position:relative;width:3pc;overflow:auto}.at-share-open-control-left{position:fixed;top:20%;z-index:100020;left:0;width:22px}.at-share-close-control .at4-arrow.at-left{float:right}.atss-left{left:0;float:left;right:auto}.atss-right{left:auto;float:right;right:0}.atss-right.at-share-close-control .at4-arrow.at-right{position:relative;right:0;overflow:auto}.atss-right.at-share-close-control .at4-arrow{float:left}.at-share-open-control-right{position:fixed;top:20%;z-index:100020;right:0;width:22px;float:right}.atss-right .at-share-close-control .at4-arrow{float:left}.atss.atss-right a{float:right}.atss.atss-right .at4-share-title{float:right;overflow:hidden}.atss .at-share-btn,.atss a{position:relative;display:block;width:3pc;margin:0;outline-offset:-1px;text-align:center;float:left;-webkit-transition:width .15s ease-in-out;transition:width .15s ease-in-out;overflow:hidden;background:#e8e8e8;z-index:100030;cursor:pointer}.at-share-btn::-moz-focus-inner{border:0;padding:0}.atss-right .at-share-btn{float:right}.atss .at-share-btn{border:0;padding:0}.atss .at-share-btn:focus,.atss .at-share-btn:hover,.atss a:focus,.atss a:hover{width:4pc}.atss .at-share-btn .at-icon-wrapper,.atss a .at-icon-wrapper{display:block;padding:8px 0}.atss .at-share-btn:last-child,.atss a:last-child{border:none}.atss .at-share-btn span .at-icon,.atss a span .at-icon{position:relative;top:0;left:0;display:block;background-repeat:no-repeat;background-position:50% 50%;width:2pc;height:2pc;line-height:2pc;border:none;padding:0;margin:0 auto;overflow:hidden;cursor:pointer;cursor:hand}.at4-share .at-custom-sidebar-counter{font-family:Helvetica neue,arial;vertical-align:top;margin-right:4px;display:inline-block;text-align:center}.at4-share .at-custom-sidebar-count{font-size:17px;line-height:1.25em;color:#222}.at4-share .at-custom-sidebar-text{font-size:9px;line-height:1.25em;color:#888;letter-spacing:1px}.at4-share .at4-share-count-container{position:absolute;left:0;right:auto;top:auto;bottom:0;width:100%;color:#fff;background:inherit}.at4-share .at4-share-count,.at4-share .at4-share-count-container{line-height:1pc;font-size:10px}.at4-share .at4-share-count{text-indent:0;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:200;width:100%;height:1pc}.at4-share .at4-share-count-anchor{padding-bottom:8px;text-decoration:none;-webkit-transition:padding .15s ease-in-out .15s,width .15s ease-in-out;transition:padding .15s ease-in-out .15s,width .15s ease-in-out}</style><style type="text/css">.at4-recommendedbox-outer-container{display:inline}.at4-recommended-outer{position:static}.at4-recommended{top:20%;margin:0;text-align:center;font-weight:400;font-size:13px;line-height:17px;color:#666}.at4-recommended.at-inline .at4-recommended-horizontal{text-align:left}.at4-recommended-recommendedbox{padding:0;z-index:inherit}.at4-recommended-recommended{padding:40px 0}.at4-recommended-horizontal{max-height:340px}.at4-recommended.at-medium .at4-recommended-horizontal{max-height:15pc}.at4-recommended.at4-minimal.at-medium .at4-recommended-horizontal{padding-top:10px;max-height:230px}.at4-recommended-text-only .at4-recommended-horizontal{max-height:130px}.at4-recommended-horizontal{padding-top:5px;overflow-y:hidden}.at4-minimal{background:none;color:#000;border:none!important;box-shadow:none!important}@media screen and (max-width:900px){.at4-recommended-horizontal .at4-recommended-item,.at4-recommended-horizontal .at4-recommended-item .at4-recommended-item-img{width:15pc}}.at4-recommended.at4-minimal .at4-recommended-horizontal .at4-recommended-item .at4-recommended-item-caption{padding:0 0 10px}.at4-recommended.at4-minimal .at4-recommended-horizontal .at4-recommended-item-caption{padding:20px 0 0!important}.addthis-smartlayers .at4-recommended .at-h3.at-recommended-label{margin:0;padding:0;font-weight:300;font-size:18px;line-height:24px;color:#464646;width:100%;display:inline-block;zoom:1}.addthis-smartlayers .at4-recommended.at-inline .at-h3.at-recommended-label{text-align:left}#at4-thankyou .addthis-smartlayers .at4-recommended.at-inline .at-h3.at-recommended-label{text-align:center}.at4-recommended .at4-recommended-item{display:inline-block;zoom:1;position:relative;background:#fff;border:1px solid #c5c5c5;width:200px;margin:10px}.addthis_recommended_horizontal .at4-recommended-item{border:none}.at4-recommended .at4-recommended-item .sponsored-label{color:#666;font-size:9px;position:absolute;top:-20px}.at4-recommended .at4-recommended-item-img .at-tli,.at4-recommended .at4-recommended-item-img a{position:absolute;left:0}.at4-recommended.at-inline .at4-recommended-horizontal .at4-recommended-item{margin:10px 20px 0 0}.at4-recommended.at-medium .at4-recommended-horizontal .at4-recommended-item{margin:10px 10px 0 0}.at4-recommended.at-medium .at4-recommended-item{width:140px;overflow:hidden}.at4-recommended .at4-recommended-item .at4-recommended-item-img{position:relative;text-align:center;width:100%;height:200px;line-height:0;overflow:hidden}.at4-recommended .at4-recommended-item .at4-recommended-item-img a{display:block;width:100%;height:200px}.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-img,.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-img a{height:140px}.at4-recommended .at4-recommended-item .at4-recommended-item-img img{position:absolute;top:0;left:0;min-height:0;min-width:0;max-height:none;max-width:none;margin:0;padding:0}.at4-recommended .at4-recommended-item .at4-recommended-item-caption{height:74px;overflow:hidden;padding:20px;text-align:left;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption{height:50px;padding:15px}.at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4{height:54px;margin:0 0 5px;padding:0;overflow:hidden;word-wrap:break-word;font-size:14px;font-weight:400;line-height:18px;text-align:left}.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption .at-h4{font-size:9pt;line-height:1pc;height:33px}.at4-recommended .at4-recommended-item:hover .at4-recommended-item-caption .at-h4{text-decoration:underline}.at4-recommended a:link,.at4-recommended a:visited{text-decoration:none;color:#464646}.at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4 a:hover{text-decoration:underline;color:#000}.at4-recommended .at4-recommended-item .at4-recommended-item-caption small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#666}.at4-recommended.at-medium .at4-recommended-item .at4-recommended-item-caption small{font-size:9px}.at4-recommended .at4-recommended-vertical{padding:15px 0 0}.at4-recommended .at4-recommended-vertical .at4-recommended-item{display:block;width:auto;max-width:100%;height:60px;border:none;margin:0 0 15px;box-shadow:none;background:none}.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img,.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-img img{width:60px;height:60px;float:left}.at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption{border-top:none;margin:0;height:60px;padding:3px 5px}.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption .at-h4{height:38px;margin:0}.at4-recommended .at4-recommended-vertical .at4-recommended-item .at4-recommended-item-caption small{position:absolute;bottom:0}.at4-recommended .at-recommended-label.at-vertical{text-align:left}.at4-no-image-light-recommended,.at4-no-image-minimal-recommended{background-color:#f2f2f2!important}.at4-no-image-gray-recommended{background-color:#e6e6e5!important}.at4-no-image-dark-recommended{background-color:#4e555e!important}.at4-recommended .at4-recommended-item-placeholder-img{background-repeat:no-repeat!important;background-position:center!important;width:100%!important;height:100%!important}.at4-recommended-horizontal .at4-no-image-dark-recommended .at4-recommended-item-placeholder-img{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAfCAYAAACCox+xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNUUyQTg3MTI0RDExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNUUyQTg4MTI0RDExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU1RTJBODUxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU1RTJBODYxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6oCfPiAAABfUlEQVR42uyWTU/DMAyGm3bdBxp062hHe+PC//9HCIkDYpNAO7CPAuWN5Eohyhpno2GHWqq8pO78xHHsiLquH4L/l6cwuBAZaOPKs//YBFIJIR59UiAt7huYi90aE/UQakTDLaL26RUEAAJqiefm93T9Bpj1X4O0bY0OIUXCpYBJvYDAUWyAUCWliHGTcnpqRMaM72ImRAJVknYG+eb4YEDIBeU0zGnsBLK1ODogYSsLhDwIJeVVk18lzfNA4ERGZNXi59UCIQhiYDilpSm/jp4awLxDvWhlf4/nGe8+LLuSt+SZul28ggaHG6gNVhDR+IuRFzOoxGKWwG7vVFm5AAQxgcqYpzrjFjR9zwPH5LSuT7XlNr2MQm5LzqjLpncNNaM+s8M27Y60g3FwhoSMzrtUQllgLtRs5pZ2cB4IhbvQbGRZv1NsrhyS8+SI5Mo9RJWpjAI1xqKL+0iEP180vy214JbeR12AyOgsHI7e0NfFyKv0ID1ID+IqPwIMAOeljGQOryBmAAAAAElFTkSuQmCC)!important}.at4-recommended-vertical .at4-no-image-dark-recommended .at4-recommended-item-placeholder-img{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTM2MTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTM3MTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDNEQzI1MzQxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDNEQzI1MzUxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5GfbtkAAAAxklEQVR42qRSTQvCMAxduk53mEOHKFPP/v8/5cGTiIibivVFUomlG7gFHvloXpKmJefcPhkmNyvGEWj+IOZA6ckPImoxxVwOLvCvXUzkpayNCpRQK64IbOBnAYGAXMeMslNlU+CzrIEdCkxi5DPAoz6BE8ZuVNdKJuL8rS9sv62IXlCHyP0KqKUKZXK9uwkSLVArfwpVR3b225kXwovibcP+jC4jUtfWPZmfqJJnYlkAM128j1z0nHWKSUbIKDL/msHktwADAPptQo+vkZNLAAAAAElFTkSuQmCC)!important}.at4-recommended-horizontal .at4-no-image-gray-recommended .at4-recommended-item-placeholder-img,.at4-recommended-horizontal .at4-no-image-light-recommended .at4-recommended-item-placeholder-img,.at4-recommended-horizontal .at4-no-image-minimal-recommended .at4-recommended-item-placeholder-img{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAfCAYAAACCox+xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTMyMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTMzMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU1RTJBODkxMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU1RTJBOEExMjREMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6dfDQvAAABg0lEQVR42uyWS0vDQBDH82jaKNW0qUltbl68e/Di98eLBz+CCB5EBaWIpUat/4UJLMuame1j7SEDYbqbKfPLvHbDi8ur8+D/5T4K9kR6xrr27D+xgdS3N9d3PilQFmcNzN6mxkbdhxrQcoGofXkFAUAINcVzrG2vsP8KmJdtg7SlxoRQouBywOReQOAosUDoklPEpEU5XDciqeB/iRAig6pIO4P8CHysBBDqg0palrR2Alkwjj5RsDUDoRqhorpq6quifRkInKiIPLf4eWIgQoLoWbq0stXXn10DmDeoR2PsL/E84N0Hk5Wypc70dMkGGhzOoeb4gpjW34K6GEFljFkGu6XTZJUCEMQBVCHs6kI60MycB47FyUmo20oPvYJCzhVnvIsR3zg5ghoRTNpyHKTBBhIJTt6pFsoZ9iLDZswcB5uBULhnho0a66eazaFDca59Hym1e4guQ4rCO4Fu/T4Sw8Gk+c3MghN6H+8CRKVg4tB6fV8XI6/SgXQgHYir/AowAMU5TskhKVUNAAAAAElFTkSuQmCC)!important}.at4-recommended-vertical .at4-no-image-gray-recommended .at4-recommended-item-placeholder-img,.at4-recommended-vertical .at4-no-image-light-recommended .at4-recommended-item-placeholder-img,.at4-recommended-vertical .at4-no-image-minimal-recommended .at4-recommended-item-placeholder-img{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzREMyNTNBMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzREMyNTNCMTI0RjExRTM4NzAwREJDRjlCQzAyMUVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDNEQzI1MzgxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDNEQzI1MzkxMjRGMTFFMzg3MDBEQkNGOUJDMDIxRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Fr9cAAAA0ElEQVR42qRRuQrCQBDd3SSaIgYNosSrtLew8f+xsfAnYmEVRMR4YHwjExjCbsBk4DHHzptjR2+2u7VqJ3efjTNQ/EEMgbgiv46H/QNTDPnhCv/mYiLPI21EIIaaUEVgBj+oETQQypgRtidsXfNJpsACBXo28gWgUd9AjrEL0TXhiSh/XhWudlZI/kCdLPtFUGMRCni9p6kl+kAq/D5UavmzX2fNd87obsCSfztnrOR0rjvTiRImkoyAQQNRyZ2jhjenGNVBOpF1WZatyV8BBgBJ+irgS/KHdAAAAABJRU5ErkJggg==)!important}#at-drawer.ats-dark,.at4-recommended.ats-dark .at4-recommended-horizontal .at4-recommended-item-caption,.at4-recommended.ats-dark .at4-recommended-vertical .at4-recommended-item-caption{background:#262b30}#at-drawer.ats-gray,.at4-recommended.ats-gray .at4-recommended-horizontal .at4-recommended-item-caption{background:#f2f2f2}#at-drawer.ats-light,.at4-recommended.ats-light .at4-recommended-horizontal .at4-recommended-item-caption{background:#fff}.at4-recommended.ats-dark .at4-recommended-vertical .at4-recommended-item{background:none}.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:hover,.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:link,.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption a:visited,.at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption small,.at4-recommended.ats-dark .at4-recommended-item-caption,.at4-recommended.ats-dark .at-logo a:hover,.at4-recommended.ats-dark .at-recommended-label.at-vertical{color:#fff}.at4-recommended-vertical-logo{padding-top:0;text-align:left}.at4-recommended-vertical-logo .at4-logo-container{line-height:10px}.at4-recommended-horizontal-logo{text-align:center}.at4-recommended.at-inline .at4-recommended-horizontal-logo{text-align:left}#at4-thankyou .at4-recommended.at-inline .at4-recommended-horizontal{text-align:center}.at4-recommended .at-logo{margin:10px 0 0;padding:0;height:25px;overflow:auto;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.at4-recommended.at-inline .at4-recommended-horizontal .at-logo{text-align:left}.at4-recommended .at4-logo-container a.at-sponsored-link{color:#666}.at4-recommended-class .at4-logo-container a:hover,.at4-recommendedbox-outer-container .at4-recommended-recommendedbox .at4-logo-container a:hover{color:#000}</style><style type="text/css">.at-recommendedjumbo-outer-container{margin:0;padding:0;border:0;background:none;color:#000}.at-recommendedjumbo-footer{position:relative;width:100%;height:510px;overflow:hidden;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.at-mobile .at-recommendedjumbo-footer{height:250px}.at-recommendedjumbo-footer #bg-link:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75)}.at-recommendedjumbo-footer:hover #bg-link:after{background:rgba(0,0,0,.85)}.at-recommendedjumbo-footer *,.at-recommendedjumbo-footer :after,.at-recommendedjumbo-footer :before{box-sizing:border-box}.at-recommendedjumbo-footer:hover #at-recommendedjumbo-footer-bg{-webkit-animation:atRecommendedJumboAnimatedBackground 1s ease-in-out 1;animation:atRecommendedJumboAnimatedBackground 1s ease-in-out 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.at-recommendedjumbo-footer #at-recommendedjumbo-top-holder{position:absolute;top:0;padding:0 40px;width:100%}.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-top-holder{padding:0 20px}.at-recommendedjumbo-footer .at-recommendedjumbo-footer-inner{position:relative;text-align:center;font-family:helvetica,arial,sans-serif;z-index:2;width:100%}.at-recommendedjumbo-footer #at-recommendedjumbo-label-holder{margin:40px 0 0;max-height:30px}.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-label-holder{margin:20px 0 0;max-height:20px}.at-recommendedjumbo-footer #at-recommendedjumbo-label{font-weight:300;font-size:24px;line-height:24px;color:#fff;margin:0}.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-label{font-weight:150;font-size:14px;line-height:14px}.at-recommendedjumbo-footer #at-recommendedjumbo-title-holder{margin:20px 0 0;min-height:3pc;max-height:78pt}.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-title-holder{margin:10px 0 0;min-height:24px;max-height:54px}.at-recommendedjumbo-footer #at-recommendedjumbo-content-title{font-size:3pc;line-height:52px;font-weight:700;margin:0}.at-mobile .at-recommendedjumbo-footer #at-recommendedjumbo-content-title{font-size:24px;line-height:27px}.at-recommendedjumbo-footer a{text-decoration:none;color:#fff}.at-recommendedjumbo-footer a:visited{color:#fff}.at-recommendedjumbo-footer small{margin:20px 0 0;display:inline-block;height:2pc;line-height:2pc;font-size:14px;color:#ccc;cursor:default}.at-mobile .at-recommendedjumbo-footer small{margin:10px 0 0;height:14px;line-height:14px;font-size:9pt}.at-recommendedjumbo-footer .at-logo-container{position:absolute;bottom:20px;margin:auto;left:0;right:0}.at-mobile .at-recommendedjumbo-footer .at-logo-container{bottom:10px}.at-recommendedjumbo-footer a.at-sponsored-link{color:#ccc}.at-recommendedjumbo-footer div #at-recommendedjumbo-logo-link{padding:2px 0 0 11px;text-decoration:none;line-height:20px;font-family:helvetica,arial,sans-serif;font-size:9px;color:#ccc}@-webkit-keyframes atRecommendedJumboAnimatedBackground{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}}@keyframes atRecommendedJumboAnimatedBackground{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}}</style><style type="text/css">.at-resp-share-element{position:relative;padding:0;margin:0;font-size:0;line-height:0}.at-resp-share-element:after,.at-resp-share-element:before{content:" ";display:table}.at-resp-share-element.at-mobile .at4-share-count-container,.at-resp-share-element.at-mobile .at-label{display:none}.at-resp-share-element .at-share-btn{display:inline-block;*display:inline;*zoom:1;margin:0 2px 5px;padding:0;overflow:hidden;line-height:0;text-decoration:none;text-transform:none;color:#fff;cursor:pointer;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border:0;font-family:helvetica neue,helvetica,arial,sans-serif;background-color:transparent}.at-resp-share-element .at-share-btn::-moz-focus-inner{border:0;padding:0}.at-resp-share-element .at-share-btn:focus,.at-resp-share-element .at-share-btn:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);color:#fff;text-decoration:none}.at-resp-share-element .at-share-btn .at-icon-wrapper{float:left}.at-resp-share-element .at-share-btn.at-share-btn.at-svc-compact:hover{-webkit-transform:none;transform:none}.at-resp-share-element .at-share-btn .at-label{font-family:helvetica neue,helvetica,arial,sans-serif;font-size:9pt;padding:0 15px 0 0;margin:0 0 0 5px;height:2pc;line-height:2pc;background:none}.at-resp-share-element .at-icon,.at-resp-share-element .at-label{cursor:pointer}.at-resp-share-element .at4-share-count-container{text-decoration:none;float:right;padding-right:15px;font-size:9pt}.at-mobile .at-resp-share-element .at-label{display:none}.at-resp-share-element.at-mobile .at-share-btn{margin-right:5px}.at-mobile .at-resp-share-element .at-share-btn{padding:5px;margin-right:5px}</style><style type="text/css">.at-share-tbx-element{position:relative;margin:0;color:#fff;font-size:0}.at-share-tbx-element,.at-share-tbx-element .at-share-btn{font-family:helvetica neue,helvetica,arial,sans-serif;padding:0;line-height:0}.at-share-tbx-element .at-share-btn{cursor:pointer;margin:0 5px 5px 0;display:inline-block;overflow:hidden;border:0;text-decoration:none;text-transform:none;background-color:transparent;color:inherit;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.at-share-tbx-element .at-share-btn:focus,.at-share-tbx-element .at-share-btn:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);outline-offset:-1px;color:inherit}.at-share-tbx-element .at-share-btn::-moz-focus-inner{border:0;padding:0}.at-share-tbx-element .at-share-btn.at-share-btn.at-svc-compact:hover{-webkit-transform:none;transform:none}.at-share-tbx-element .at-icon-wrapper{vertical-align:middle}.at-share-tbx-element .at4-share-count,.at-share-tbx-element .at-label{margin:0 7.5px 0 2.5px;text-decoration:none;vertical-align:middle;display:inline-block;background:none;height:0;font-size:inherit;line-height:inherit;color:inherit}.at-share-tbx-element.at-mobile .at4-share-count,.at-share-tbx-element.at-mobile .at-label{display:none}.at-share-tbx-element .at_native_button{vertical-align:middle}.at-share-tbx-element .addthis_counter.addthis_bubble_style{margin:0 2px;vertical-align:middle;display:inline-block}.at-share-tbx-element .fb_iframe_widget{display:block}.at-share-tbx-element.at-share-tbx-native .at300b{vertical-align:middle}.at-style-responsive .at-share-btn{padding:5px}.at-style-jumbo{display:table}.at-style-jumbo .at4-spacer{height:1px;display:block;visibility:hidden;opacity:0}.at-style-jumbo .at4-count-container{display:table-cell;text-align:center;min-width:200px;vertical-align:middle;border-right:1px solid #ccc;padding-right:20px}.at-style-jumbo .at4-count{font-size:60px;line-height:60px;font-weight:700}.at-style-jumbo .at4-count-title{position:relative;font-size:18px;line-height:18px;bottom:2px}.at-style-jumbo .at-share-btn-elements{display:table-cell;vertical-align:middle;padding-left:20px}.at_flat_counter{cursor:pointer;font-family:helvetica,arial,sans-serif;font-weight:700;text-transform:uppercase;display:inline-block;position:relative;vertical-align:top;height:auto;margin:0 5px;padding:0 6px;left:-1px;background:#ebebeb;color:#32363b;-webkit-transition:all .2s ease;transition:all .2s ease}.at_flat_counter:after{top:30%;left:-4px;content:"";position:absolute;border-width:5px 8px 5px 0;border-style:solid;border-color:transparent #ebebeb transparent transparent;display:block;width:0;height:0;-webkit-transform:translateY(360deg);transform:translateY(360deg)}.at_flat_counter:hover{background:#e1e2e2}</style><style type="text/css">.at4-thankyou-background{top:0;right:0;left:0;bottom:0;-webkit-overflow-scrolling:touch;z-index:9999999;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpizCuu/sRABGBiIBKMKqSOQoAAAwC8KgJipENhxwAAAABJRU5ErkJggg==);background:hsla(217,6%,46%,.95)}.at4-thankyou-background.at-thankyou-shown{position:fixed}.at4-thankyou-inner{position:absolute;width:100%;top:10%;left:50%;margin-left:-50%;text-align:center}.at4-thankyou-mobile .at4-thankyou-inner{top:5%}.thankyou-description{font-weight:400}.at4-thankyou-background .at4lb-inner{position:relative;width:100%;height:100%}.at4-thankyou-background .at4lb-inner .at4x{position:absolute;top:15px;right:15px;display:block;width:20px;height:20px;padding:20px;margin:0;cursor:pointer;-webkit-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.4;background:url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTMvMTKswDp5AAAAd0lEQVQ4jb2VQRLAIAgDE///Z3qqY1FAhalHMCsCIkVEAIAkkVgvp2lDBgYAnAyHkWotLccNrEd4A7X2TqIdqLfnWBAdaF5rJdyJfjtPH5GT37CaGhoVq3nOm/XflUuLUto2pY1d+vRKh0Pp+MrAVtDe2JkvYNQ+jVSEEFmOkggAAAAASUVORK5CYII=") no-repeat center center;overflow:hidden;text-indent:-99999em;border:1px solid transparent}.at4-thankyou-background .at4lb-inner .at4x:focus,.at4-thankyou-background .at4lb-inner .at4x:hover{border:1px solid #fff;border-radius:50%;outline:0}.at4-thankyou-background .at4lb-inner #at4-palogo{position:absolute;bottom:10px;display:inline-block;text-decoration:none;font-family:helvetica,arial,sans-serif;font-size:11px;cursor:pointer;-webkit-transition:opacity .25s ease-in;moz-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.5;z-index:100020;color:#fff;padding:2px 0 0 13px}.at4-thankyou-background .at4lb-inner #at4-palogo .at-branding-addthis,.at4-thankyou-background .at4lb-inner #at4-palogo .at-branding-info{color:#fff}.at4-thankyou-background .at4lb-inner #at4-palogo:hover,.at4-thankyou-background.ats-dark .at4lb-inner a#at4-palogo:hover{text-decoration:none;color:#fff;opacity:1}.at4-thankyou-background.ats-dark{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgeMZABGBiIBKMKqSOQoAAAwB+cQD6hqlbCwAAAABJRU5ErkJggg==");background:rgba(0,0,0,.85)}.at4-thankyou-background .thankyou-title{color:#fff;font-size:38.5px;margin:10px 20px;line-height:38.5px;font-family:helvetica neue,helvetica,arial,sans-serif;font-weight:300}.at4-thankyou-background.ats-dark .thankyou-description,.at4-thankyou-background.ats-dark .thankyou-title{color:#fff}.at4-thankyou-background .thankyou-description{color:#fff;font-size:18px;margin:10px 0;line-height:24px;padding:0;font-family:helvetica neue,helvetica,arial,sans-serif;font-weight:300}.at4-thankyou-background .at4-thanks-icons{padding-top:10px}.at4-thankyou-mobile *{-webkit-overflow-scrolling:touch}#at4-thankyou .at4-recommended-recommendedbox .at-logo{display:none}.at4-thankyou .at-h3{height:49px;line-height:49px;margin:0 50px 0 20px;padding:1px 0 0;font-family:helvetica neue,helvetica,arial,sans-serif;font-size:1pc;font-weight:700;color:#fff;text-shadow:0 1px #000}.at4-thanks{padding-top:50px;text-align:center}.at4-thanks label{display:block;margin:0 0 15px;font-size:1pc;line-height:1pc}.at4-thanks .at4-h2{background:none;border:none;margin:0 0 10px;padding:0;font-family:helvetica neue,helvetica,arial,sans-serif;font-size:28px;font-weight:300;color:#000}.at4-thanks .at4-thanks-icons{position:relative;height:2pc}.at4-thanks .at4-thanks-icons .at-thankyou-label{display:block;padding-bottom:10px;font-size:14px;color:#666}.at4-thankyou-layer .at-follow .at-icon-wrapper{width:2pc;height:2pc}</style><style type="text/css">.at4-recommended-toaster{position:fixed;top:auto;bottom:0;right:0;z-index:100021}.at4-recommended-toaster.ats-light{border:1px solid #c5c5c5;background:#fff}.at4-recommended-toaster.ats-gray{border:1px solid #c5c5c5;background:#f2f2f2}.at4-recommended-toaster.ats-dark{background:#262b30;color:#fff}.at4-recommended-toaster .at4-recommended-container{padding-top:0;margin:0}.at4-recommended.at4-recommended-toaster div.at-recommended-label{line-height:1pc;font-size:1pc;text-align:left;padding:20px 0 0 20px}.at4-toaster-outer .at4-recommended .at4-recommended-item .at4-recommended-item-caption .at-h4{font-size:11px;line-height:11px;margin:10px 0 6px;height:30px}.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-gray,.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-light{color:#464646}.at4-recommended.at4-recommended-toaster div.at-recommended-label.ats-dark{color:#fff}.at4-toaster-close-control{position:absolute;top:0;right:0;display:block;width:20px;height:20px;line-height:20px;margin:5px 5px 0 0;padding:0;text-indent:-9999em}.at4-toaster-open-control{position:fixed;right:0;bottom:0;z-index:100020}.at4-toaster-outer .at4-recommended-item{width:90pt;border:0;margin:9px 10px 0}.at4-toaster-outer .at4-recommended-item:first-child{margin-left:20px}.at4-toaster-outer .at4-recommended-item:last-child{margin-right:20px}.at4-toaster-outer .at4-recommended-item .at4-recommended-item-img{max-height:90pt;max-width:90pt}.at4-toaster-outer .at4-recommended-item .at4-recommended-item-img img{height:90pt;width:90pt}.at4-toaster-outer .at4-recommended-item .at4-recommended-item-caption{height:30px;padding:0;margin:0;height:initial}.at4-toaster-outer .ats-dark .at4-recommended-item .at4-recommended-item-caption{background:#262b30}.at4-toaster-outer .at4-recommended .at4-recommended-item .at4-recommended-item-caption small{width:auto;line-height:14px;margin:0}.at4-toaster-outer .at4-recommended.ats-dark .at4-recommended-item .at4-recommended-item-caption small{color:#fff}.at4-recommended-toaster .at-logo{margin:0 0 3px 20px;text-align:left}.at4-recommended-toaster .at-logo .at4-logo-container.at-sponsored-logo{position:relative}.at4-toaster-outer .at4-recommended-item .sponsored-label{text-align:right;font-size:10px;color:#666;float:right;position:fixed;bottom:6px;right:20px;top:initial;z-index:99999}</style><style type="text/css">.at4-whatsnext{position:fixed;bottom:0!important;right:0;background:#fff;border:1px solid #c5c5c5;margin:-1px;width:390px;height:90pt;overflow:hidden;font-size:9pt;font-weight:400;color:#000;z-index:1800000000}.at4-whatsnext a{color:#666}.at4-whatsnext .at-whatsnext-content{height:90pt;position:relative}.at4-whatsnext .at-whatsnext-content .at-branding{position:absolute;bottom:15px;right:10px;padding-left:9px;text-decoration:none;line-height:10px;font-family:helvetica,arial,sans-serif;font-size:10px;color:#666}.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-inner{position:absolute;top:15px;right:20px;bottom:15px;left:140px;text-align:left;height:105px}.at4-whatsnext .at-whatsnext-content-inner a{display:inline-block}.at4-whatsnext .at-whatsnext-content-inner div.at-h6{text-align:left;margin:0;padding:0 0 3px;font-size:11px;color:#666;cursor:default}.at4-whatsnext .at-whatsnext-content .at-h3{text-align:left;margin:5px 0;padding:0;line-height:1.2em;font-weight:400;font-size:14px;height:3pc}.at4-whatsnext .at-whatsnext-content-inner a:link,.at4-whatsnext .at-whatsnext-content-inner a:visited{text-decoration:none;font-weight:400;color:#464646}.at4-whatsnext .at-whatsnext-content-inner a:hover{color:#000}.at4-whatsnext .at-whatsnext-content-inner small{position:absolute;bottom:15px;line-height:10px;font-size:11px;color:#666;cursor:default;text-align:left}.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-img{position:absolute;top:0;left:0;width:90pt;height:90pt;overflow:hidden}.at4-whatsnext .at-whatsnext-content .at-whatsnext-content-img img{position:absolute;top:0;left:0;max-height:none;max-width:none}.at4-whatsnext .at-whatsnext-close-control{position:absolute;top:0;right:0;display:block;width:20px;height:20px;line-height:20px;margin:0 5px 0 0;padding:0;text-indent:-9999em}.at-whatsnext-open-control{position:fixed;right:0;bottom:0;z-index:100020}.at4-whatsnext.ats-dark{background:#262b30}.at4-whatsnext.ats-dark .at-whatsnext-content .at-h3,.at4-whatsnext.ats-dark .at-whatsnext-content a.at4-logo:hover,.at4-whatsnext.ats-dark .at-whatsnext-content-inner a:link,.at4-whatsnext.ats-dark .at-whatsnext-content-inner a:visited{color:#fff}.at4-whatsnext.ats-light{background:#fff}.at4-whatsnext.ats-gray{background:#f2f2f2}.at4-whatsnext.at-whatsnext-nophoto{width:270px}.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content-img{display:none}.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner{top:15px;right:0;left:20px}.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner.addthis_32x32_style{top:0;right:0;left:0;padding:45px 20px 0;font-size:20px}.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .at4-icon,.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .at4-icon-fw,.at4-whatsnext.at-whatsnext-nophoto .at-whatsnext-content .at-whatsnext-content-inner .whatsnext-msg{vertical-align:middle}.at-whatsnext-img,.at-whatsnext-img-lnk{position:absolute;left:0}</style><style type="text/css">.at4-whatsnextmobile{position:fixed;bottom:0;right:0;left:0;background:#fff;z-index:9999998;height:170px;font-size:28px}.at4-whatsnextmobile .col-2{height:100%;font-size:1em}.at4-whatsnextmobile .col-2:first-child{max-width:200px;display:inline-block;float:left}.at4-whatsnextmobile .col-2:last-child{position:absolute;left:200px;right:50px;top:0;bottom:0;display:inline-block}.at4-whatsnextmobile .at-whatsnext-content-inner{font-size:1em}.at4-whatsnextmobile .at-whatsnext-content-img img{height:100%;width:100%}.at4-whatsnextmobile .at-close-control{font-size:1em;position:absolute;top:0;right:0;width:50px;height:50px}.at4-whatsnextmobile .at-close-control button{width:100%;height:100%;font-size:1em;font-weight:400;text-decoration:none;opacity:.5;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.at4-whatsnextmobile .at-h3,.at4-whatsnextmobile .at-h6{font-size:1em;margin:0;color:#a1a1a1;margin-left:2.5%;margin-top:25px}.at4-whatsnextmobile .at-h3{font-size:1em;line-height:1em;font-weight:500;height:50%}.at4-whatsnextmobile .at-h3 a{font-size:1em;text-decoration:none}.at4-whatsnextmobile .at-h6{font-size:.8em;line-height:.8em;font-weight:500}.at4-whatsnextmobile .footer{position:absolute;bottom:2px;left:200px;right:0;padding-left:2.5%;font-size:1em;line-height:.6em}.at4-whatsnextmobile .footer small{font-size:.6em;color:#a1a1a1}.at4-whatsnextmobile .footer small:first-child{margin-right:5%;float:left}.at4-whatsnextmobile .footer small:last-child{margin-right:2.5%;float:right}.at4-whatsnextmobile .at-whatsnext-content{height:100%}.at4-whatsnextmobile.ats-dark{background:#262b30;color:#fff}.at4-whatsnextmobile .at-close-control button{color:#bfbfbf}.at4-whatsnextmobile.ats-dark a:link,.at4-whatsnextmobile.ats-dark a:visited{color:#fff}.at4-whatsnextmobile.ats-gray{background:#f2f2f2;color:#262b30}.at4-whatsnextmobile.ats-light{background:#fff;color:#262b30}.at4-whatsnextmobile.ats-dark .footer a:link,.at4-whatsnextmobile.ats-dark .footer a:visited,.at4-whatsnextmobile.ats-gray .footer a:link,.at4-whatsnextmobile.ats-gray .footer a:visited,.at4-whatsnextmobile.ats-light .footer a:link,.at4-whatsnextmobile.ats-light .footer a:visited{color:#a1a1a1}.at4-whatsnextmobile.ats-gray a:link,.at4-whatsnextmobile.ats-gray a:visited,.at4-whatsnextmobile.ats-light a:link,.at4-whatsnextmobile.ats-light a:visited{color:#262b30}@media only screen and (min-device-width:320px) and (max-device-width:480px){.at4-whatsnextmobile{height:85px;font-size:14px}.at4-whatsnextmobile .col-2:first-child{width:75pt}.at4-whatsnextmobile .col-2:last-child{right:25px;left:75pt}.at4-whatsnextmobile .footer{left:75pt}.at4-whatsnextmobile .at-close-control{width:25px;height:25px}.at4-whatsnextmobile .at-h3,.at4-whatsnextmobile .at-h6{margin-top:12.5px}}</style><style type="text/css">.at-custom-mobile-bar{left:0;right:0;width:100%;height:56px;position:fixed;text-align:center;z-index:100020;background:#fff;overflow:hidden;box-shadow:0 0 10px 0 rgba(0,0,0,.2);font:initial;line-height:normal;top:auto;bottom:0}.at-custom-mobile-bar.at-custom-mobile-bar-zindex-hide{z-index:-1!important}.at-custom-mobile-bar.atss-top{top:0;bottom:auto}.at-custom-mobile-bar.atss-bottom{top:auto;bottom:0}.at-custom-mobile-bar .at-custom-mobile-bar-btns{display:inline-block;text-align:center}.at-custom-mobile-bar .at-custom-mobile-bar-counter,.at-custom-mobile-bar .at-share-btn{margin-top:4px}.at-custom-mobile-bar .at-share-btn{display:inline-block;text-decoration:none;-webkit-transition:none;transition:none;box-sizing:content-box}.at-custom-mobile-bar .at-custom-mobile-bar-counter{font-family:Helvetica neue,arial;vertical-align:top;margin-left:4px;margin-right:4px;display:inline-block}.at-custom-mobile-bar .at-custom-mobile-bar-count{font-size:26px;line-height:1.25em;color:#222}.at-custom-mobile-bar .at-custom-mobile-bar-text{font-size:9pt;line-height:1.25em;color:#888;letter-spacing:1px}.at-custom-mobile-bar .at-icon-wrapper{text-align:center;height:3pc;width:3pc;margin:0 4px}.at-custom-mobile-bar .at-icon{vertical-align:top;margin:8px;width:2pc;height:2pc}.at-custom-mobile-bar.at-shfs-medium{height:3pc}.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-counter{margin-top:6px}.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-count{font-size:18px}.at-custom-mobile-bar.at-shfs-medium .at-custom-mobile-bar-text{font-size:10px}.at-custom-mobile-bar.at-shfs-medium .at-icon-wrapper{height:40px;width:40px}.at-custom-mobile-bar.at-shfs-medium .at-icon{margin:6px;width:28px;height:28px}.at-custom-mobile-bar.at-shfs-small{height:40px}.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-counter{margin-top:3px}.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-count{font-size:1pc}.at-custom-mobile-bar.at-shfs-small .at-custom-mobile-bar-text{font-size:10px}.at-custom-mobile-bar.at-shfs-small .at-icon-wrapper{height:2pc;width:2pc}.at-custom-mobile-bar.at-shfs-small .at-icon{margin:4px;width:24px;height:24px}</style><style type="text/css">.at-custom-sidebar{top:20%;width:58px;position:fixed;text-align:center;z-index:100020;background:#fff;overflow:hidden;box-shadow:0 0 10px 0 rgba(0,0,0,.2);font:initial;line-height:normal;top:auto;bottom:0}.at-custom-sidebar.at-custom-sidebar-zindex-hide{z-index:-1!important}.at-custom-sidebar.atss-left{left:0;right:auto;float:left;border-radius:0 4px 4px 0}.at-custom-sidebar.atss-right{left:auto;right:0;float:right;border-radius:4px 0 0 4px}.at-custom-sidebar .at-custom-sidebar-btns{display:inline-block;text-align:center;padding-top:4px}.at-custom-sidebar .at-custom-sidebar-counter{margin-bottom:8px}.at-custom-sidebar .at-share-btn{display:inline-block;text-decoration:none;-webkit-transition:none;transition:none;box-sizing:content-box}.at-custom-sidebar .at-custom-sidebar-counter{font-family:Helvetica neue,arial;vertical-align:top;margin-left:4px;margin-right:4px;display:inline-block}.at-custom-sidebar .at-custom-sidebar-count{font-size:21px;line-height:1.25em;color:#222}.at-custom-sidebar .at-custom-sidebar-text{font-size:10px;line-height:1.25em;color:#888;letter-spacing:1px}.at-custom-sidebar .at-icon-wrapper{text-align:center;margin:0 4px}.at-custom-sidebar .at-icon{vertical-align:top;margin:9px;width:2pc;height:2pc}.at-custom-sidebar .at-icon-wrapper{position:relative}.at-custom-sidebar .at4-share-count,.at-custom-sidebar .at4-share-count-container{line-height:1pc;font-size:10px}.at-custom-sidebar .at4-share-count{text-indent:0;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:200;width:100%;height:1pc}.at-custom-sidebar .at4-share-count-anchor .at-icon{margin-top:3px}.at-custom-sidebar .at4-share-count-container{position:absolute;left:0;right:auto;top:auto;bottom:0;width:100%;color:#fff;background:inherit}</style><style type="text/css">.at-image-sharing-mobile-icon{position:absolute;background:#000 url(//s7.addthis.com/static/44a36d35bafef33aa9455b7d3039a771.png) no-repeat top center;background-color:rgba(0,0,0,.9);background-image:url(//s7.addthis.com/static/10db525181ee0bbe1a515001be1c7818.svg),none;border-radius:3px;width:50px;height:40px;top:-9999px;left:-9999px}.at-image-sharing-tool{display:block;position:absolute;text-align:center;z-index:9001;background:none;overflow:hidden;top:-9999px;left:-9999px;font:initial;line-height:0}.at-image-sharing-tool.addthis-animated{-webkit-animation-duration:.15s;animation-duration:.15s}.at-image-sharing-tool.at-orientation-vertical .at-share-btn{display:block}.at-image-sharing-tool.at-orientation-horizontal .at-share-btn{display:inline-block}.at-image-sharing-tool.at-image-sharing-tool-size-big .at-icon{width:43px;height:43px}.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-share-btn{margin:0!important}.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-icon-wrapper{height:60px;width:100%;border-radius:0!important}.at-image-sharing-tool.at-image-sharing-tool-size-mobile .at-icon{max-width:100%;height:54px!important;width:54px!important}.at-image-sharing-tool .at-custom-shape.at-image-sharing-tool-btns{margin-right:8px;margin-bottom:8px}.at-image-sharing-tool .at-custom-shape .at-share-btn{margin-top:8px;margin-left:8px}.at-image-sharing-tool .at-share-btn{line-height:0;text-decoration:none;-webkit-transition:none;transition:none;box-sizing:content-box}.at-image-sharing-tool .at-icon-wrapper{text-align:center;height:100%;width:100%}.at-image-sharing-tool .at-icon{vertical-align:top;width:2pc;height:2pc;margin:3px}</style><style type="text/css">.at-expanding-share-button{box-sizing:border-box;position:fixed;z-index:9999}.at-expanding-share-button[data-position=bottom-right]{bottom:10px;right:10px}.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-bg,.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-btn[data-name]:after,.at-expanding-share-button[data-position=bottom-right] .at-icon-wrapper,.at-expanding-share-button[data-position=bottom-right] [data-name]:after{float:right}.at-expanding-share-button[data-position=bottom-right] [data-name]:after{margin-right:10px}.at-expanding-share-button[data-position=bottom-right] .at-expanding-share-button-toggle-btn[data-name]:after{margin-right:5px}.at-expanding-share-button[data-position=bottom-right] .at-icon-wrapper{margin-right:-3px}.at-expanding-share-button[data-position=bottom-left]{bottom:10px;left:10px}.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-bg,.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-btn[data-name]:after,.at-expanding-share-button[data-position=bottom-left] .at-icon-wrapper,.at-expanding-share-button[data-position=bottom-left] [data-name]:after{float:left}.at-expanding-share-button[data-position=bottom-left] [data-name]:after{margin-left:10px}.at-expanding-share-button[data-position=bottom-left] .at-expanding-share-button-toggle-btn[data-name]:after{margin-left:5px}.at-expanding-share-button *,.at-expanding-share-button :after,.at-expanding-share-button :before{box-sizing:border-box}.at-expanding-share-button .at-expanding-share-button-services-list{display:none;list-style:none;margin:0 5px;overflow:visible;padding:0}.at-expanding-share-button .at-expanding-share-button-services-list>li{display:block;height:45px;position:relative;overflow:visible}.at-expanding-share-button .at-expanding-share-button-toggle-btn,.at-expanding-share-button .at-share-btn{-webkit-transition:.1s;transition:.1s;text-decoration:none}.at-expanding-share-button .at-share-btn{display:block;height:40px;padding:0 3px 0 0}.at-expanding-share-button .at-expanding-share-button-toggle-btn{position:relative;overflow:auto}.at-expanding-share-button .at-expanding-share-button-toggle-btn.at-expanding-share-button-hidden[data-name]:after{display:none}.at-expanding-share-button .at-expanding-share-button-toggle-bg{box-shadow:0 2px 4px 0 rgba(0,0,0,.3);border-radius:50%;position:relative}.at-expanding-share-button .at-expanding-share-button-toggle-bg>span{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3Eshare%3C%2Ftitle%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M26%2C13.4285714%20C26%2C13.6220248%2025.9293162%2C13.7894338%2025.7879464%2C13.9308036%20L20.0736607%2C19.6450893%20C19.932291%2C19.786459%2019.7648819%2C19.8571429%2019.5714286%2C19.8571429%20C19.3779752%2C19.8571429%2019.2105662%2C19.786459%2019.0691964%2C19.6450893%20C18.9278267%2C19.5037195%2018.8571429%2C19.3363105%2018.8571429%2C19.1428571%20L18.8571429%2C16.2857143%20L16.3571429%2C16.2857143%20C15.6279725%2C16.2857143%2014.9750773%2C16.3080355%2014.3984375%2C16.3526786%20C13.8217977%2C16.3973217%2013.2488868%2C16.477306%2012.6796875%2C16.5926339%20C12.1104882%2C16.7079619%2011.6157015%2C16.8660704%2011.1953125%2C17.0669643%20C10.7749235%2C17.2678581%2010.3824423%2C17.5264121%2010.0178571%2C17.8426339%20C9.65327199%2C18.1588557%209.35565592%2C18.534596%209.125%2C18.9698661%20C8.89434408%2C19.4051361%208.71391434%2C19.9203839%208.58370536%2C20.515625%20C8.45349637%2C21.1108661%208.38839286%2C21.7842224%208.38839286%2C22.5357143%20C8.38839286%2C22.9449425%208.40699386%2C23.4025272%208.44419643%2C23.9084821%20C8.44419643%2C23.9531252%208.45349693%2C24.0405499%208.47209821%2C24.1707589%20C8.4906995%2C24.3009679%208.5%2C24.3995532%208.5%2C24.4665179%20C8.5%2C24.5781256%208.46837829%2C24.6711306%208.40513393%2C24.7455357%20C8.34188956%2C24.8199408%208.25446484%2C24.8571429%208.14285714%2C24.8571429%20C8.02380893%2C24.8571429%207.9196433%2C24.7938994%207.83035714%2C24.6674107%20C7.77827355%2C24.6004461%207.72991094%2C24.5186017%207.68526786%2C24.421875%20C7.64062478%2C24.3251483%207.59040206%2C24.2135423%207.53459821%2C24.0870536%20C7.47879436%2C23.9605648%207.43973225%2C23.87128%207.41741071%2C23.8191964%20C6.47246551%2C21.6986501%206%2C20.0208395%206%2C18.7857143%20C6%2C17.3050521%206.19717065%2C16.0662252%206.59151786%2C15.0691964%20C7.79688103%2C12.0706695%2011.0520568%2C10.5714286%2016.3571429%2C10.5714286%20L18.8571429%2C10.5714286%20L18.8571429%2C7.71428571%20C18.8571429%2C7.52083237%2018.9278267%2C7.35342333%2019.0691964%2C7.21205357%20C19.2105662%2C7.07068382%2019.3779752%2C7%2019.5714286%2C7%20C19.7648819%2C7%2019.932291%2C7.07068382%2020.0736607%2C7.21205357%20L25.7879464%2C12.9263393%20C25.9293162%2C13.067709%2026%2C13.2351181%2026%2C13.4285714%20L26%2C13.4285714%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:center center;background-repeat:no-repeat;-webkit-transition:transform .4s ease;transition:transform .4s ease;border-radius:50%;display:block}.at-expanding-share-button .at-icon-wrapper{box-shadow:0 2px 4px 0 rgba(0,0,0,.3);border-radius:50%;display:inline-block;height:40px;line-height:40px;text-align:center;width:40px}.at-expanding-share-button .at-icon{display:inline-block;height:34px;margin:3px 0;vertical-align:top;width:34px}.at-expanding-share-button [data-name]:after{box-shadow:0 2px 4px 0 rgba(0,0,0,.3);-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition:.4s;transition:.4s;background-color:#fff;border-radius:3px;color:#666;content:attr(data-name);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:9pt;line-height:9pt;font-weight:500;opacity:0;padding:3px 5px;position:relative;top:20px;white-space:nowrap}.at-expanding-share-button.at-expanding-share-button-show-icons .at-expanding-share-button-services-list{display:block}.at-expanding-share-button.at-expanding-share-button-animate-in .at-expanding-share-button-toggle-bg>span{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3Cpath%20d%3D%22M18%2014V8h-4v6H8v4h6v6h4v-6h6v-4h-6z%22%20fill-rule%3D%22evenodd%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:center center;background-repeat:no-repeat}.at-expanding-share-button.at-expanding-share-button-animate-in [data-name]:after{opacity:1}.at-expanding-share-button.at-hide-label [data-name]:after{display:none}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle{height:50px}.at-expanding-share-button.at-expanding-share-button-desktop .at-icon-wrapper:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg{height:50px;line-height:50px;width:50px}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span{height:50px;width:50px}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg:after{box-shadow:0 2px 5px 0 rgba(0,0,0,.2);-webkit-transition:opacity .2s ease;transition:opacity .2s ease;border-radius:50%;content:'';height:100%;opacity:0;position:absolute;top:0;left:0;width:100%}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg:hover:after{opacity:1}.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-btn[data-name]:after{top:25px}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-services-list{margin:0}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-btn,.at-expanding-share-button.at-expanding-share-button-mobile .at-share-btn{outline:0}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle{height:40px;-webkit-tap-highlight-color:transparent}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span{height:40px;line-height:40px;width:40px}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:transform ease,opacity ease-in;transition:transform ease,opacity ease-in;background-color:hsla(0,0%,100%,.3);border-radius:50%;height:40px;opacity:1;position:absolute;width:40px;z-index:10000}.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash.at-expanding-share-button-click-flash-animate{-webkit-transform:scale(1);transform:scale(1);opacity:0}.at-expanding-share-button.at-expanding-share-button-mobile+.at-expanding-share-button-mobile-overlay{-webkit-transition:opacity ease;transition:opacity ease;bottom:0;background-color:hsla(0,0%,87%,.7);display:block;height:auto;left:0;opacity:0;position:fixed;right:0;top:0;width:auto;z-index:9998}.at-expanding-share-button.at-expanding-share-button-mobile+.at-expanding-share-button-mobile-overlay.at-expanding-share-button-hidden{height:0;width:0;z-index:-10000}.at-expanding-share-button.at-expanding-share-button-mobile.at-expanding-share-button-animate-in+.at-expanding-share-button-mobile-overlay{-webkit-transition:opacity ease;transition:opacity ease;opacity:1}</style><style type="text/css">.at-tjin-element .at300b,.at-tjin-element .at300m{display:inline-block;width:auto;padding:0;margin:0 2px 5px;outline-offset:-1px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.at-tjin-element .at300b:focus,.at-tjin-element .at300b:hover,.at-tjin-element .at300m:focus,.at-tjin-element .at300m:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.at-tjin-element .addthis_tjin_label{display:none}.at-tjin-element .addthis_vertical_style .at300b,.at-tjin-element .addthis_vertical_style .at300m{display:block}.at-tjin-element .addthis_vertical_style .at300b .addthis_tjin_label,.at-tjin-element .addthis_vertical_style .at300b .at-icon-wrapper,.at-tjin-element .addthis_vertical_style .at300m .addthis_tjin_label,.at-tjin-element .addthis_vertical_style .at300m .at-icon-wrapper{display:inline-block;vertical-align:middle;margin-right:5px}.at-tjin-element .addthis_vertical_style .at300b:focus,.at-tjin-element .addthis_vertical_style .at300b:hover,.at-tjin-element .addthis_vertical_style .at300m:focus,.at-tjin-element .addthis_vertical_style .at300m:hover{-webkit-transform:none;transform:none}.at-tjin-element .at-tjin-btn{margin:0 5px 5px 0;padding:0;outline-offset:-1px;display:inline-block;box-sizing:content-box;transition:all .2s ease-in-out}.at-tjin-element .at-tjin-btn:focus,.at-tjin-element .at-tjin-btn:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.at-tjin-element .at-tjin-title{margin:0 0 15px}</style><style type="text/css">#addthissmartlayerscssready{color:#bada55!important}.addthis-smartlayers,div#at4-follow,div#at4-share,div#at4-thankyou,div#at4-whatsnext{padding:0;margin:0}#at4-follow-label,#at4-share-label,#at4-whatsnext-label,.at4-recommended-label.hidden{padding:0;border:none;background:none;position:absolute;top:0;left:0;height:0;width:0;overflow:hidden;text-indent:-9999em}.addthis-smartlayers .at4-arrow:hover{cursor:pointer}.addthis-smartlayers .at4-arrow:after,.addthis-smartlayers .at4-arrow:before{content:none}a.at4-logo{background:url(data:image/gif;base64,R0lGODlhBwAHAJEAAP9uQf///wAAAAAAACH5BAkKAAIALAAAAAAHAAcAAAILFH6Ge8EBH2MKiQIAOw==) no-repeat left center}.at4-minimal a.at4-logo{background:url(data:image/gif;base64,R0lGODlhBwAHAJEAAP9uQf///wAAAAAAACH5BAkKAAIALAAAAAAHAAcAAAILFH6Ge8EBH2MKiQIAOw==) no-repeat left center!important}button.at4-closebutton{position:absolute;top:0;right:0;padding:0;margin-right:10px;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;font-size:19px;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}button.at4-closebutton:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.5}div.at4-arrow{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAYAAABpYH0BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV1JREFUeNrsmesOgyAMhQfxwfrofTM3E10ME2i5Oeppwr9a5OMUCrh1XV+wcvNAAIAA+BiAzrmtUWln27dbjEcC3AdODfo0BdEPhmcO4nIDvDNELi2jggk4/k8dT7skfeKzWIEd4VUpMQKvNB7X+OZSmAZkATWC1xvipbpnLmOosbJZC08CkAeA4E6qFUEMwLAGnlSBPCE8lW8CYnZTcimH2HoT7kSFOx5HBmCnDhTIu1p5s98G+QZrxGPhZVMY1vgyAQaAAAiAAAgDQACcBOD+BvJtBWfRy7NpJK5tBe4FNzXokywV734wPHMQlxvgnSGyNoUP/2ACjv/7iSeYKO3YWKzAjvCqlBiBVxqPa3ynexNJwOsN8TJbzL6JNIYYXWpMv4lIIAZgWANPqkCeEJ7KNwExu8lpLlSpAVQarO77TyKdBsyRPuwV0h0gmoGnTWFYzVkYBoAA+I/2FmAAt6+b5XM9mFkAAAAASUVORK5CYII=);background-repeat:no-repeat;width:20px;height:20px;margin:0;padding:0;overflow:hidden;text-indent:-9999em;text-align:left;cursor:pointer}#at4-recommendedpanel-outer-container .at4-arrow.at-right,div.at4-arrow.at-right{background-position:-20px 0}#at4-recommendedpanel-outer-container .at4-arrow.at-left,div.at4-arrow.at-left{background-position:0 0}div.at4-arrow.at-down{background-position:-60px 0}div.at4-arrow.at-up{background-position:-40px 0}.ats-dark div.at4-arrow.at-right{background-position:-20px -20px}.ats-dark div.at4-arrow.at-left{background-position:0 -20px}.ats-dark div.at4-arrow.at-down{background-position:-60px -20px}.ats-dark div.at4-arrow.at-up{background-position:-40px -20}.at4-opacity-hidden{opacity:0!important}.at4-opacity-visible{opacity:1!important}.at4-visually-hidden{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;overflow:hidden}.at4-hidden-off-screen,.at4-hidden-off-screen *{position:absolute!important;top:-9999px!important;left:-9999px!important}.at4-show{display:block!important;opacity:1!important}.at4-show-content{opacity:1!important;visibility:visible}.at4-hide{display:none!important;opacity:0!important}.at4-hide-content{opacity:0!important;visibility:hidden}.at4-visible{display:block!important;opacity:0!important}.at-wordpress-hide{display:none!important;opacity:0!important}.addthis-animated{-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:ease-out;-webkit-animation-duration:.3s;animation-duration:.3s}.slideInDown.addthis-animated,.slideInLeft.addthis-animated,.slideInRight.addthis-animated,.slideInUp.addthis-animated,.slideOutDown.addthis-animated,.slideOutLeft.addthis-animated,.slideOutRight.addthis-animated,.slideOutUp.addthis-animated{-webkit-animation-duration:.4s;animation-duration:.4s}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}to{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(1500px)}0%,to{opacity:1}to{-webkit-transform:translateY(0)}}@keyframes slideInUp{0%{transform:translateY(1500px)}0%,to{opacity:1}to{transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}.slideInUp.addthis-animated{-webkit-animation-duration:.4s;animation-duration:.4s}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-850px)}0%,to{opacity:1}to{-webkit-transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-850px)}0%,to{opacity:1}to{transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0)}0%,to{opacity:1}to{-webkit-transform:translateY(-250px)}}@keyframes slideOutUp{0%{transform:translateY(0)}0%,to{opacity:1}to{transform:translateY(-250px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes slideOutUpFast{0%{-webkit-transform:translateY(0)}0%,to{opacity:1}to{-webkit-transform:translateY(-1250px)}}@keyframes slideOutUpFast{0%{transform:translateY(0)}0%,to{opacity:1}to{transform:translateY(-1250px)}}#at4m-menu.slideOutUp{-webkit-animation-name:slideOutUpFast;animation-name:slideOutUpFast}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0)}0%,to{opacity:1}to{-webkit-transform:translateY(350px)}}@keyframes slideOutDown{0%{transform:translateY(0)}0%,to{opacity:1}to{transform:translateY(350px)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutDownFast{0%{-webkit-transform:translateY(0)}0%,to{opacity:1}to{-webkit-transform:translateY(1250px)}}@keyframes slideOutDownFast{0%{transform:translateY(0)}0%,to{opacity:1}to{transform:translateY(1250px)}}#at4m-menu.slideOutDown{-webkit-animation-name:slideOutDownFast;animation-name:slideOutDownFast}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-850px);transform:translateX(-850px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-850px);transform:translateX(-850px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(1250px);transform:translateX(1250px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(1250px);transform:translateX(1250px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-250px);transform:translateX(-250px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-350px);transform:translateX(-350px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(350px);transform:translateX(350px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(350px);transform:translateX(350px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}.at4win{margin:0 auto;background:#fff;border:1px solid #ebeced;width:25pc;box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:8px;font-family:helvetica neue,helvetica,arial,sans-serif;text-align:left;z-index:9999}.at4win .at4win-header{position:relative;border-bottom:1px solid #f2f2f2;background:#fff;height:49px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;border-top-left-radius:8px;border-top-right-radius:8px;cursor:default}.at4win .at4win-header .at-h3,.at4win .at4win-header h3{height:49px;line-height:49px;margin:0 50px 0 0;padding:1px 0 0;margin-left:20px;font-family:helvetica neue,helvetica,arial,sans-serif;font-size:1pc;font-weight:700;text-shadow:0 1px #fff;color:#333}.at4win .at4win-header .at-h3 img,.at4win .at4win-header h3 img{display:inline-block;margin-right:4px}.at4win .at4win-header .at4-close{display:block;position:absolute;top:0;right:0;background:url("data:image/gif;base64,R0lGODlhFAAUAIABAAAAAP///yH5BAEAAAEALAAAAAAUABQAAAIzBIKpG+YMm5Enpodw1HlCfnkKOIqU1VXk55goVb2hi7Y0q95lfG70uurNaqLgTviyyUoFADs=") no-repeat center center;background-repeat:no-repeat;background-position:center center;border-left:1px solid #d2d2d1;width:49px;height:49px;line-height:49px;overflow:hidden;text-indent:-9999px;text-shadow:none;cursor:pointer;opacity:.5;border:0;-webkit-transition:opacity .15s ease-in;transition:opacity .15s ease-in}.at4win .at4win-header .at4-close::-moz-focus-inner{border:0;padding:0}.at4win .at4win-header .at4-close:hover{opacity:1;background-color:#ebeced;border-top-right-radius:7px}.at4win .at4win-content{position:relative;background:#fff;min-height:220px}#at4win-footer{position:relative;background:#fff;border-top:1px solid #d2d2d1;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;height:11px;line-height:11px;padding:5px 20px;font-size:11px;color:#666;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}#at4win-footer a{margin-right:10px;text-decoration:none;color:#666}#at4win-footer a:hover{text-decoration:none;color:#000}#at4win-footer a.at4-logo{top:5px;padding-left:10px}#at4win-footer a.at4-privacy{position:absolute;top:5px;right:10px;padding-right:14px}.at4win.ats-dark{border-color:#555;box-shadow:none}.at4win.ats-dark .at4win-header{background:#1b1b1b;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;border-top-left-radius:6px;border-top-right-radius:6px}.at4win.ats-dark .at4win-header .at4-close{background:url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTMvMTKswDp5AAAAd0lEQVQ4jb2VQRLAIAgDE///Z3qqY1FAhalHMCsCIkVEAIAkkVgvp2lDBgYAnAyHkWotLccNrEd4A7X2TqIdqLfnWBAdaF5rJdyJfjtPH5GT37CaGhoVq3nOm/XflUuLUto2pY1d+vRKh0Pp+MrAVtDe2JkvYNQ+jVSEEFmOkggAAAAASUVORK5CYII=") no-repeat center center;background-image:url(//s7.addthis.com/static/fb08f6d50887bd0caacc86a62bcdcf68.svg),none;border-color:#333}.at4win.ats-dark .at4win-header .at4-close:hover{background-color:#000}.at4win.ats-dark .at4win-header .at-h3,.at4win.ats-dark .at4win-header h3{color:#fff;text-shadow:0 1px #000}.at4win.ats-gray .at4win-header{background:#fff;border-color:#d2d2d1;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;border-top-left-radius:6px;border-top-right-radius:6px}.at4win.ats-gray .at4win-header a.at4-close{border-color:#d2d2d1}.at4win.ats-gray .at4win-header a.at4-close:hover{background-color:#ebeced}.at4win.ats-gray #at4win-footer{border-color:#ebeced}.at4win .clear{clear:both}.at4win ::selection{background:#fe6d4c;color:#fff}.at4win ::-moz-selection{background:#fe6d4c;color:#fff}.at4-icon-fw{display:inline-block;background-repeat:no-repeat;background-position:0 0;margin:0 5px 0 0;overflow:hidden;text-indent:-9999em;cursor:pointer;padding:0;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}.at44-follow-container a.aticon{height:2pc;margin:0 5px 5px 0}.at44-follow-container .at4-icon-fw{margin:0}</style><style type="text/css">.nps-fade{opacity:1;-webkit-transition:opacity 500ms;transition:opacity 500ms}.nps-fade-enter,.nps-fade-leave{opacity:0}.nps-slide-enter,.nps-slide-leave{bottom:-600px !important}.nps-next{-webkit-transition:height 500ms;transition:height 500ms}.nps-next>div{-webkit-transition:top 500ms;transition:top 500ms}.nps-next>div>div{-webkit-transition:opacity 500ms;transition:opacity 500ms}.nps-expand{max-height:800px;overflow:hidden;-webkit-transition:max-height 500ms, opacity 500ms;transition:max-height 500ms, opacity 500ms}.nps-expand-enter,.nps-expand-leave{max-height:0px;opacity:0}.nps-Bar{position:fixed;bottom:0;left:0;right:0;text-align:center;-webkit-transition:bottom 500ms;transition:bottom 500ms;z-index:2147483647;padding:0 20px;max-height:100vh;overflow:auto}.nps-embed .nps-Bar{position:absolute;max-height:100%}.nps-Bar .nps-PoweredBy{position:absolute;bottom:10px;right:20px}.nps-embed .nps-Bar .nps-PoweredBy{display:none}@media (max-width: 700px){.nps-Bar .nps-PoweredBy{display:none}}.nps-Bar .nps-Scale{margin-left:auto;margin-right:auto}.nps-Bar .nps-Survey-bounding{max-width:600px;margin:20px auto}.nps-Bar .nps-Title{font-size:14px}.nps-Dialog{background-color:white;border-width:2px;border-style:solid;margin:auto;padding:20px;position:fixed;width:417px;z-index:2147483647;-webkit-transition:all 500ms;transition:all 500ms;box-sizing:border-box}.nps-embed .nps-Dialog{position:absolute}.nps-Dialog--top{top:20px}.nps-Dialog--middle{top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.nps-Dialog--bottom{bottom:20px}.nps-Dialog--left{-webkit-transition:left 500ms;transition:left 500ms;left:20px}.nps-Dialog--left.nps-show-enter,.nps-Dialog--left.nps-show-leave{left:-500px}.nps-Dialog--center{left:0;right:0}.nps-Dialog--center.nps-Dialog--top.nps-show-enter,.nps-Dialog--center.nps-Dialog--top.nps-show-leave{top:-500px}.nps-Dialog--center.nps-Dialog--middle{-webkit-transform:translate(0, -50%) scale(1);transform:translate(0, -50%) scale(1)}.nps-Dialog--center.nps-Dialog--middle.nps-show-enter,.nps-Dialog--center.nps-Dialog--middle.nps-show-leave{-webkit-transform:translate(0, -50%) scale(0);transform:translate(0, -50%) scale(0)}.nps-Dialog--center.nps-Dialog--bottom{bottom:20px}.nps-Dialog--center.nps-Dialog--bottom.nps-show-enter,.nps-Dialog--center.nps-Dialog--bottom.nps-show-leave{bottom:-500px}.nps-Dialog--right{right:20px}.nps-Dialog--right.nps-show-enter,.nps-Dialog--right.nps-show-leave{right:-500px}.nps-Dialog .nps-Title{margin-right:20px}.nps-Dialog-close{float:right;font-weight:bold;padding:0;cursor:pointer;background:transparent;border:0;font-size:16px;width:30px;height:30px;color:white;position:absolute;right:0;top:0}.nps-Dialog-close:focus{outline:0}.nps-Dialog-FeedbackPoweredBy{position:absolute;bottom:0;line-height:30px;left:0}.nps-Feedback{text-align:left}.nps-Feedback-reason{margin-top:10px}.nps-Feedback-reason label{display:block;font-weight:normal}.nps-Feedback-reason input{margin-right:8px;margin-left:4px;position:relative;top:-2px}.nps-Feedback-submit{margin-top:10px;float:right}.nps-Panel{border-width:2px;border-style:solid;background-color:white}.nps-Panel{font-size:16px;color:#333;max-width:600px;min-width:375px;margin:20px auto;padding:20px}@media (max-width: 480px){.nps-Survey .nps-Panel{border-width:0;min-width:initial;font-size:14px;box-shadow:none}}.nps-Panel .nps-Survey--powered-by{line-height:38px}.nps-Panel .nps-Title{font-size:18px}.nps-Panel .nps-Rating{margin-bottom:20px}.nps-PoweredBy{font-size:12px;margin-top:20px}.nps-PoweredBy>a{text-decoration:none;font-weight:bold}.nps-Survey{color:#333;font-family:sans-serif;font-weight:normal;font-size:14px;line-height:1.42857143}.nps-Survey-buttons{float:right;margin-top:14px}.nps-Survey-bounding{position:relative;overflow:hidden}.nps-Survey-content{position:relative;top:0}.nps-Title{font-size:16px}.nps-cf:before,.nps-cf:after{content:" ";display:table}.nps-cf:after{clear:both}.nps-left{text-align:left}.nps-center{text-align:center}.nps-margin-t20{margin-top:20px}.nps-Button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;font-size:100%;padding:0.5em 1em;text-decoration:none;border:0}.nps-Button::-moz-focus-inner{padding:0;border:0}.nps-Button:focus{outline:0}.nps-Button[disabled]{border:none;background-image:none;opacity:0.40;cursor:default;box-shadow:none}.nps-Button--simple{border:0;cursor:pointer;padding:10px}.nps-Button--icon{width:30px;height:30px;padding:0}.nps-Button--simple:focus,.nps-Button--simple:hover{outline:none}.nps-Link{padding:0.5em 1em;text-decoration:none}.nps-Textarea{margin-top:14px;height:80px;border-width:2px;border-style:solid;font-size:14px;padding:7px 10px;width:100%;resize:vertical;box-sizing:border-box;-webkit-transition:border-color 300ms, background-color 300ms;transition:border-color 300ms, background-color 300ms}.nps-Textarea:focus{outline:0}.nps-Scale{margin-top:14px;display:inline-block}.nps-Scale-values{margin-bottom:4px;text-align:center}.nps-Scale-value{display:inline-block;padding-right:2px;vertical-align:middle;line-height:1;font-size:1.5em}.nps-Scale-value:last-of-type{padding-right:0}.nps-Scale-value:hover{cursor:pointer}.nps-Scale-button{border-radius:50%;width:32px;height:32px;text-align:center;line-height:32px;font-size:12px}@media (max-width: 480px){.nps-Scale-button{width:22px;height:22px;line-height:22px}}.nps-small .nps-Scale-button{width:22px;height:22px;line-height:22px}.nps-Scale-hint{font-size:12px;font-style:italic}.nps-Scale-hint--unlikely{float:left;padding-right:10px}.nps-Scale-hint--likely{float:right;padding-left:10px}.nps-Survey[dir="rtl"] .nps-Scale-hint--unlikely{float:right}.nps-Survey[dir="rtl"] .nps-Scale-hint--likely{float:left}</style></head>
<body class="course oc-body ">
<div id="react_root"></div>
<script id="_EVENTS-PAGE" type="application/json">
{
"type": "page",
"integrations": {
"HubSpot": false
}
}
</script>
<header id="oc-header" class="js-tabs-mobile mainHeader " data-widget="tabs">
<!--[if lt IE 9]>
<div class="disclaimer disclaimer-error">
Vous utilisez un navigateur obsolète, veuillez le <a href="http://browsehappy.com/">mettre à jour</a>.
</div>
<![endif]-->
<noscript>
<div class="disclaimer disclaimer--error">
Veuillez utiliser un <a href="http://browsehappy.com/">navigateur internet moderne</a> avec JavaScript activé pour naviguer sur OpenClassrooms.com
</div>
</noscript>
<div class="disclaimer disclaimer--info js-cookie-disclaimer" data-widget="dismissibleElement">
<div class="disclaimer__wrapper">
<span class="disclaimer__content">
Bienvenue sur OpenClassrooms ! En poursuivant votre navigation, vous acceptez l'utilisation de cookies. <a href="https://openclassrooms.com/privacy-policy#personal-data-gathering">En savoir plus</a>
</span>
<span class="disclaimer__actions">
<a href="#" class="disclaimer__button js-close-button">ok</a>
</span>
</div>
</div>
<div class="mainHeader__wrapper">
<div class="mainHeader__inner">
<a href="https://openclassrooms.com/" class="mainHeader__logo" title="OpenClassrooms.com">
OpenClassrooms.com
</a>
<div class="mainHeader__content">
<div id="tab-main" class="mainHeader__tabs">
<div class="mainHeader__container mainHeader__container--mainMenu">
<nav>
<ul class="mainTopNav">
<li class="mainTopNav__itemContainer">
<a class="mainTopNav__item" href="https://openclassrooms.com/paths/">Parcours</a>
</li>
<li class="mainTopNav__itemContainer">
<a class="mainTopNav__item" href="https://openclassrooms.com/courses">Cours</a>
</li>
<li class="mainTopNav__itemContainer">
<a class="mainTopNav__item" href="https://openclassrooms.com/forum/">Forums</a>
</li>
<li class="mainTopNav__itemContainer">
<a class="mainTopNav__item" href="https://openclassrooms.com/premium">Premium</a>
</li>
<li class="mainTopNav__itemContainer">
<a class="mainTopNav__item u--colorBusiness" href="https://openclassrooms.com/for-business">For Business</a>
</li>
</ul>
</nav>
</div>
<div class="mainHeader__container mainHeader__container--search">
<div id="tab-search" class="mainHeader__search js-header-searchContainer"><div class="js-courseSearch topSearchBox" data-widget="courseSearch">
<form tabindex="0" class="js-courseSearch-form oc-form" action="https://openclassrooms.com/courses" method="get">
<div class="js-courseSearch-inputGroup oc-form__widget inputGroup topSearchBox__inner u--block">
<i class="topSearchBox__icon icon-search"></i>
<input id="algolia-search-input" class="js-courseSearch-input oc-form__control inputGroup__input topSearchBox__input" title="Rechercher" autocomplete="off" data-option_source="https://openclassrooms.com/components/courses/search?q=&lt;%= term %&gt;" placeholder="Rechercher" aria-label="Rechercher" name="q" type="search">
</div>
</form>
</div>
</div>
</div>
<div class="mainHeader__container mainHeader__container--login">
<a href="https://openclassrooms.com/register" class="mainHeader__actionButton button button--primary button--compact js-popin-activator" data-popin-selector="#popin-sign-in">
S'inscrire
</a>
<a href="https://openclassrooms.com/login" class="mainHeader__actionButton button button--compact js-popin-activator" data-popin-selector="#popin-log-in">
Se connecter
</a>
</div>
<aside tabindex="-1" role="dialog" aria-labelledby="popin-sign-in_popin_title" class="popin popin--small js-popin" id="popin-sign-in">
<i class="popin__close-button icon-close js-close-button"></i>
<div class="popin__inner">
<div class="popin__mainContainer">
<h3 id="popin-sign-in_popin_title" class="popin__title js-popin-title">Inscription</h3>
<div class="popin__content js-popin-content">
<div class="popin__contentWrapper">
<div class="formLogin formLogin--smallSize">
<ul class="table table--fullwidth u--noMargin">
<li class="formLogin__column">
<a class="button button--facebook button--fullwidth formLogin__facebook" href="https://www.facebook.com/v2.7/dialog/oauth?client_id=277769842283905&amp;state=9ead23ec28362655c7a33b35faff4754&amp;response_type=code&amp;sdk=php-sdk-5.4.4&amp;redirect_uri=https%3A%2F%2Fopenclassrooms.com%2Flogin_check_facebook&amp;scope=public_profile%2Cemail%2Cuser_birthday">
<i class="icon-facebook"></i>S'inscrire avec Facebook
</a>
<a class="button button--google button--fullwidth formLogin__google" href="https://accounts.google.com/o/oauth2/auth?response_type=code&amp;access_type=online&amp;client_id=132418960718-jdnmpug3g9e6ub2p41ergcci1492qh82.apps.googleusercontent.com&amp;redirect_uri=https%3A%2F%2Fopenclassrooms.com%2Flogin_check_google&amp;state&amp;scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&amp;approval_prompt=auto">
<i class="icon-google"></i>S'inscrire avec Google
</a>
</li>
<li class="formLogin__column">
<form name="register" method="post" action="https://openclassrooms.com/register" class="js-registerForm oc-form" data-widget="formEvents">
<div class="accessibility-hidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Wonder&nbsp;
<abbr class="oc-form__required js-form-required wonder oc-form__required-hidden" title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><input id="register_wonder" name="register[wonder]" aria-label=" " class=" textInput textInput--text" type="text"></span></label>
</div>
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Prénom&nbsp;
<abbr class="oc-form__required js-form-required firstName " title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><input id="register_firstName" name="register[firstName]" required="required" maxlength="100" autofocus="autofocus" aria-label=" " class=" textInput textInput--text" type="text"></span></label>
</div>
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Nom&nbsp;
<abbr class="oc-form__required js-form-required lastName " title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><input id="register_lastName" name="register[lastName]" required="required" maxlength="100" aria-label=" " class=" textInput textInput--text" type="text"></span></label>
</div>
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Adresse email&nbsp;
<abbr class="oc-form__required js-form-required email " title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><span><!-- react-empty: 1 --></span><input id="register_email" name="register[email]" required="required" maxlength="80" aria-label=" " data-check-email="1" class=" textInput textInput--email" type="email"></span></label>
<p>
<em>
Vous recevrez votre mot de passe sur cette adresse email.
</em>
</p>
</div>
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row oc-form__row--reversed "><span class="oc-form__widget"><span class="ocCheckbox"><input id="register_terms" name="register[terms]" required="required" aria-label=" " class="" value="1" type="checkbox"><span class="ocCheckbox__check"></span></span></span><span class="oc-form__label-text"><span class="oc-form__label-text ">
J'ai lu et j'accepte les <a target="_blank" href="https://openclassrooms.com/terms-conditions">Conditions Générales d'Utilisation</a>.&nbsp;
<abbr class="oc-form__required js-form-required terms " title="requis"><span>*</span></abbr></span></span></label>
</div>
<div class="oc-form__group center-text">
<button type="submit" id="register_create" name="register[create]" class="button button--primary button"> S'inscrire</button>
</div>
<input id="register__target_path" name="register[_target_path]" class=" textInput textInput--hidden" value="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates" type="hidden"><input id="register__token" name="register[_token]" class=" textInput textInput--hidden" value="Gkc3xEnENYutOXuvQiAqd6SBgn7JeTmHapO20_nZdtA" type="hidden"></form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</aside>
<aside tabindex="-1" role="dialog" aria-labelledby="popin-log-in_popin_title" class="popin popin--small js-popin" id="popin-log-in">
<i class="popin__close-button icon-close js-close-button"></i>
<div class="popin__inner">
<div class="popin__mainContainer">
<h3 id="popin-log-in_popin_title" class="popin__title js-popin-title">Connexion</h3>
<div class="popin__content js-popin-content">
<div class="popin__contentWrapper">
<div class="formLogin formLogin--smallSize">
<ul class="table table--fullwidth u--noMargin">
<li class="formLogin__column">
<a class="button button--facebook button--fullwidth formLogin__facebook" href="https://www.facebook.com/v2.7/dialog/oauth?client_id=277769842283905&amp;state=9ead23ec28362655c7a33b35faff4754&amp;response_type=code&amp;sdk=php-sdk-5.4.4&amp;redirect_uri=https%3A%2F%2Fopenclassrooms.com%2Flogin_check_facebook&amp;scope=public_profile%2Cemail%2Cuser_birthday"><i class="icon-facebook"></i> Se connecter avec Facebook</a>
<a class="button button--google button--fullwidth formLogin__google" href="https://accounts.google.com/o/oauth2/auth?response_type=code&amp;access_type=online&amp;client_id=132418960718-jdnmpug3g9e6ub2p41ergcci1492qh82.apps.googleusercontent.com&amp;redirect_uri=https%3A%2F%2Fopenclassrooms.com%2Flogin_check_google&amp;state&amp;scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&amp;approval_prompt=auto"><i class="icon-google"></i> Se connecter avec Google</a>
</li>
<li class="formLogin__column">
<form name="" method="post" action="https://openclassrooms.com/login_check" class=" oc-form">
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Adresse email ou nom d'utilisateur&nbsp;
<abbr class="oc-form__required js-form-required _username " title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><input id="_username" name="_username" required="required" autofocus="autofocus" aria-label=" " class=" textInput textInput--text" type="text"></span></label>
</div>
<div class="oc-form__group oc-form--requiredHidden">
<label class="oc-form__row "><span class="oc-form__label-text ">
Mot de passe&nbsp;
<abbr class="oc-form__required js-form-required _password " title="requis"><span>*</span></abbr></span><span class="oc-form__widget formWidget "><input id="_password" name="_password" required="required" aria-label=" " class=" textInput textInput--password" type="password"></span></label>
</div>
<div class="oc-form__group">
<label class="oc-form__row oc-form__row--reversed "><span class="oc-form__widget"><span class="ocCheckbox"><input id="_remember_me" name="_remember_me" aria-label=" " class="" value="1" checked="checked" type="checkbox"><span class="ocCheckbox__check"></span></span></span><span class="oc-form__label-text"><span class="oc-form__label-text ">
Se souvenir de moi&nbsp;
<abbr class="oc-form__required js-form-required _remember_me oc-form__required-hidden" title="requis"><span>*</span></abbr></span></span></label>
</div>
<div class="oc-form__group right-text">
<a href="https://openclassrooms.com/set-new-password">Mot de passe oublié</a>
</div>
<div class="oc-form__group center-text">
<input id="_target_path" name="_target_path" class=" textInput textInput--hidden" value="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates" type="hidden"><div>
<button type="submit" id="login" name="login" class="button--primary button"> Se connecter</button></div><input id="_csrf_token" name="_csrf_token" class=" textInput textInput--hidden" value="ibqjl_NwAinZkiKkQ53zB2dQmV53WYoUzeuXOULXi5I" type="hidden">
</div>
</form>
</li>
</ul>
<p class="text-center space-top">
Pas encore membre ? <a href="https://openclassrooms.com/register">Inscrivez-vous gratuitement</a> en 30s.
</p>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<nav role="navigation" class="icoTabs mainHeader__tabSet">
<div class="mainHeader__mobileNav">
<span class="icoTabs__tab mainHeader__tabLogin">
<a href="https://openclassrooms.com/register" class="mainHeader__actionButton button button--primary button--compact js-popin-activator" data-popin-selector="#popin-sign-in">
S'inscrire
</a>
<a href="https://openclassrooms.com/login" class="mainHeader__actionButton button button--compact js-popin-activator" data-popin-selector="#popin-log-in">
Se connecter
</a>
</span>
<a class="js-tabs-tab icoTabs__tab mainHeader__tabSearch" href="#tab-search">
<span class="accessibility-hidden">Rechercher</span>
<i class="icon-search icoTabs__icon"></i>
</a>
<a class="js-tabs-tab icoTabs__tab mainHeader__tabCourseMenu" href="#tab-courseMenu">
<span class="accessibility-hidden">Cours</span>
<i class="icon-plus icoTabs__icon"></i>
</a>
<a class="js-tabs-tab icoTabs__tab is-disabled" href="#tab-courseEditMenu">
<span class="accessibility-hidden">Créer un cours</span>
<i class="icon-plus icoTabs__icon"></i>
</a>
<a class="js-tabs-tab icoTabs__tab is-disabled" data-tabs-default="true" href="#tab-searchMenu">
<span class="accessibility-hidden">Rechercher</span>
<i class="icon-search icoTabs__icon"></i>
</a>
<a class="js-tabs-tab icoTabs__tab" href="#tab-main">
<span class="accessibility-hidden">Menu principal</span>
<i class="icon-menu icoTabs__icon"></i>
</a>
</div>
</nav>
<div class="js-tabs-content mainHeader__content"></div>
</div>
</div>
</header>
<div class="centered">
<div id="mainSearch" class="mainSearch"><div data-reactroot=""><button class="mainSearch__close" aria-label="Bouton fermer"><i class="icon-cross"></i></button><input class="mainSearch__input" placeholder="Web, Design, etc." aria-label="Chercher un cours" type="text"><div class="searchFacetsPopup space-bottom"><div class="searchFacetsPopup__overlay"></div><p class="searchFacetsPopup__selectedCategory"><!-- react-text: 8 -->dans<!-- /react-text --><a class="searchFacetsPopup__selectedCategoryLink"></a></p><div class="searchFacetsPopup__content"><div></div></div></div><a class="mainSearch__uncertificateFilter hidden"><span class="bullet bullet--small bullet--grey bullet--smallIcon"><i class="icon-close"></i></span><!-- react-text: 15 --> <!-- /react-text --><!-- react-text: 16 -->avec les cours non certifiants<!-- /react-text --></a><div></div><div></div><p class="space-top"><!-- react-text: 20 -->Voir aussi les<!-- /react-text --><!-- react-text: 21 --> <!-- /react-text --><a><!-- react-text: 23 -->...<!-- /react-text --><!-- react-text: 24 --> <!-- /react-text --><!-- react-text: 25 -->cours non certifiants<!-- /react-text --></a><!-- react-text: 26 --> <!-- /react-text --><!-- react-text: 27 -->correspondant à cette recherche<!-- /react-text --></p></div></div>
</div>
<div id="mainContentWithHeader">
<div id="pre-main-part">
<section class="inset no-padding">
<div class="centered">
<h6 class="accessibility-hidden">Fil d'Ariane</h6>
<nav class="breadcrumb">
<ul class="breadcrumb__trail">
<li class="breadcrumb__item breadcrumb__item--home " itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://openclassrooms.com/" itemprop="url">
<span itemprop="title">Accueil</span>
</a>
</li>
<li class="breadcrumb__item " itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://openclassrooms.com/courses" itemprop="url">
<span itemprop="title">Cours</span>
</a>
</li>
<li class="breadcrumb__item breadcrumb__item--current" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
Utilisation de Twig, un moteur de templates !
</li>
</ul>
</nav>
</div>
</section>
</div>
<div class="claire clearfix">
<article itemscope="" itemtype="http://schema.org/Article">
<header class="course-header" xmlns="http://www.w3.org/1999/html">
<div class="centered"><div class="course-header__topPart"><div class="course-header__info"><a itemprop="url" href="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates"><h1 data-course-title="Utilisation de Twig, un moteur de templates !">Utilisation de Twig, un moteur de templates !</h1></a><span class="course-header__updatedTime visible-l">Mis à jour le mardi 4 avril 2017</span></div></div></div><div class="course-header__details-container"><div class="centered"><div class="row"><div class="col12"><div class="course-header__details iconBar"><div class="course-header__detailsGroup course-header__detailsGroup--formats iconBar__group"><ul data-option_popinselector="#popin-formats-availables" class="course-types iconBar__list js-course-formats-bar" data-widget="courseFormatsBar"><li class="iconBar__item course-types__item js-tooltip" title="Ce cours est visible gratuitement en ligne."><a href="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates"><i class="icon-desktop course-types__icon"></i><span class="course-header__format-current"></span></a></li><li class="iconBar__item course-types__item iconBar__item--dimmed js-tooltip" title="Ce cours n'est pas encore en vidéo."><span><i class="icon-video course-types__icon"></i></span></li><li class="iconBar__item course-types__item iconBar__item--dimmed js-tooltip" title="Ce cours n'existe pas encore en livre papier."><a href="" target="_blank"><i class="icon-book course-types__icon"></i></a></li><li class="iconBar__item course-types__item iconBar__item--dimmed js-tooltip" title="Ce cours n'existe pas encore en eBook."><a href=""><i class="icon-ebook course-types__icon"></i></a></li><li class="iconBar__item course-types__item iconBar__item--dimmed js-tooltip" title="Vous ne pouvez pas encore obtenir de certificat de réussite à l'issue de ce cours."><a><i class="icon-badge course-types__icon"></i></a></li><li class="iconBar__item course-types__item iconBar__item--dimmed js-tooltip" title="Ce cours n'est pas encore diplômant et ne vous permet pas d'obtenir des crédits universitaires européens (ECTS)."><span><i class="icon-hat course-types__icon"></i></span></li></ul></div><div class="course-header__detailsGroup course-header__detailsGroup--info iconBar__group"><ul class="iconBar__list"><li class="iconBar__item"><i class="icon-duration iconBar__icon js-tooltip" title="Ce cours demande en moyenne 30 minutes de travail pour être réussi."></i><span class="iconBar__label">30 minutes</span></li><li class="iconBar__item"><i class="icon-level iconBar__icon"></i><span class="iconBar__label">
Facile
</span></li></ul></div><div class="course-header__detailsGroup course-header__detailsGroup--licences iconBar__group"><a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/2.0"><span class="iconBar__label">Licence</span><ul class="iconBar__list"><li class="iconBar__item"><i class="icon-cc iconBar__icon" title="CC"></i></li><li class="iconBar__item"><i class="icon-ccby iconBar__icon" title="BY"></i></li><li class="iconBar__item"><i class="icon-ccnc iconBar__icon" title="NC"></i></li><li class="iconBar__item"><i class="icon-ccsa iconBar__icon" title="SA"></i></li></ul></a></div></div></div></div></div></div>
<div id="popin-formats-availables" class="popin popin--course-formats-availables">
<i class="popin__close-button icon-close js-close-button"></i>
<div class="course-types course-types--withSpace">
<a class="course-types__item" href="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates">
<i class="icon-desktop course-types__icon"></i>
</a>
</div>
<p>Ce cours est visible <a href="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates">gratuitement en ligne</a>.</p>
<a class="button button--primary js-close-button" href="#">J'ai tout compris !</a>
</div>
</header>
<div class="centered">
<div class="contentWithSidebar spacer js-contentWithSidebar" data-widget="contentWithSidebar">
<main class="contentWithSidebar__content">
<div class="relative js-sidebar-container">
<div class="static">
<div class="row">
<div class="col9 col11-s col__small-padding--right">
<div class="tooltipMessage tooltipMessage--noArrow">
<i class="tooltipMessage__icon icon-lock"></i>
<a href="https://openclassrooms.com/login" class="js-popin-activator" data-popin-selector="#popin-log-in">Connectez-vous</a> ou <a href="https://openclassrooms.com/register" class="js-popin-activator" data-popin-selector="#popin-sign-in">inscrivez-vous</a> pour bénéficier de toutes les fonctionnalités de ce cours !
</div>
<h2 class="accessibility-hidden">Introduction du cours</h2>
<div class="text-center spacer-big">
<div>
<a href="https://openclassrooms.com/login" class="button button--primary js-popin-activator" data-popin-selector="#popin-log-in">
<i class="icon-lock"></i>
Commencer le cours
</a>
</div>
<a class="button button--link" href="https://openclassrooms.com/how-does-it-work">
<span>Comment ça marche ?</span>
</a>
</div>
<section>
<div itemprop="articleBody" data-page-indentifier="/courses/utilisation-de-twig-un-moteur-de-templates" class="js-isRestrictablePage js-course-container js-smilize js-course-content">
<div class="userContent userContent--smallCourse js-userContent">
<p id="r-442288" data-claire-element-id="442288">Bonjour à tous,</p><p id="r-442289" data-claire-element-id="442289" class="">Aujourd'hui
je vous propose de découvrir un moteur de templates du nom de Twig.
Twig est le moteur de templates présent dans le célèbre <a href="http://www.siteduzero.com/tutoriel-3-517569-symfony2-un-tutoriel-pour-debuter-avec-le-framework-symfony2.html">framework Symfony</a>.
Ce cours portera sur son utilisation "seule" (c'est-à-dire sans
Symfony) mais il faut savoir que la syntaxe que vous apprendrez à mettre
dans vos templates sera valable pour ce cours et pour l'utilisation des
templates avec Symfony (ou si le moteur est intégré dans un autre
framework).</p><p id="r-442290" data-claire-element-id="442290">Twig est
un moteur de templates PHP. Je vous conseille donc d'avoir de bonnes
bases en PHP et si possible en orienté objet (bien que ça ne soit pas
indispensable). Une petite note : la syntaxe du moteur est énormément
inspirée de <a href="http://jinja.pocoo.org/">Jinja</a>, le moteur de templates du framework web Python <a href="http://www.django-fr.org/">Django</a>. Un <a href="http://www.siteduzero.com/tutoriel-3-329045-developpez-vos-applications-web-avec-django.html">cours</a> est d'ailleurs disponible sur le site.</p><p id="r-442291" data-claire-element-id="442291">Je vous souhaite une agréable lecture !</p><div class="foldable" id="ui-id-1" data-widget="foldable"><h2 id="r-442320" data-claire-element-id="442320" class="foldable__button secondTitle js-foldable-button">Qu'est ce qu'un moteur de templates ?<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442292" data-claire-element-id="442292">Twig
n'est pas le seul moteur de templates qui existe, et ce n'est pas non
plus le meilleur. C'est un moteur parmi tant d'autres. Au même titre que
Twig, ce cours n'est pas le seul à traiter du sujet. Vous pouvez
également lire ces tutoriels :</p><ul id="r-442297" data-claire-element-id="442297"><li id="r-442294" data-claire-element-id="442294"><p id="r-442293" data-claire-element-id="442293"><a href="http://www.siteduzero.com/tutoriel-3-31259-utilisation-d-un-moteur-de-templates-talus-tpl.html">Utilisation d'un moteur de templates : Talus' TPL</a></p></li><li id="r-442296" data-claire-element-id="442296"><p id="r-442295" data-claire-element-id="442295"><a href="http://www.siteduzero.com/tutoriel-3-360073-un-moteur-de-template-smarty.html">Un moteur de template : Smarty</a></p></li></ul><h3 id="r-442307" data-claire-element-id="442307">Présentation</h3><p id="r-442298" data-claire-element-id="442298">Je
vais ici vous expliquer le fonctionnement d'un "moteur de templates".
Pour cela, je vous propose un exemple : la création d'un blog basique.
L'organisation des fichiers que je vous propose ici est personnelle,
c'est normal si pour vous la conception d'un blog est différente. Les
grandes lignes sont là.</p><p id="r-442299" data-claire-element-id="442299">Pour
créer votre blog, vous allez d'abord récupérer votre contenu stocké en
base de données. Vous allez ensuite afficher via une boucle les
différents articles. Dans certains cas, vous incluez aussi un en-tête et
un pied de page.</p><pre id="r-442300" data-claire-element-id="442300" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php include 'inc/header.php'; ?&gt;\n\n&lt;?php \n \n $articles = $db-&gt;query('SELECT * FROM blog');\n \n while($article = $articles-&gt;fetch()) {\n\n\t ?&gt;\n &lt;div class=\&quot;article\&quot;&gt;\n\n &lt;div class=\&quot;title\&quot;&gt;&lt;?php echo $article['title']; ?&gt;&lt;/div&gt; \n &lt;div class=\&quot;content\&quot;&gt;\n &lt;?php echo $article['content']; ?&gt;\n &lt;/div&gt;\n\n &lt;/div&gt;\n }\n \n\n&lt;?php include 'inc/footer.php'; ?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">include</span> <span class="ace_string">'inc/header.php'</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_variable">$articles</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$db</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">query</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'SELECT * FROM blog'</span><span class="ace_paren ace_rparen">)</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_keyword">while</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable">$article</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$articles</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">fetch</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">))</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_support ace_php_tag">?&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"article"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"title"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">echo</span> <span class="ace_variable">$article</span><span class="ace_paren ace_lparen">[</span><span class="ace_string">'title'</span><span class="ace_paren ace_rparen">]</span>; <span class="ace_support ace_php_tag">?&gt;</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml"> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"content"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">echo</span> <span class="ace_variable">$article</span><span class="ace_paren ace_lparen">[</span><span class="ace_string">'content'</span><span class="ace_paren ace_rparen">]</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> }</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">include</span> <span class="ace_string">'inc/footer.php'</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442301" data-claire-element-id="442301">Je n'explique pas ce code. Il est relativement simple.</p><p id="r-442302" data-claire-element-id="442302">Le
moteur de templates va vous obliger à utiliser deux fichiers (plus si
vous utilisez le modèle MVC). Vous allez d'une part avoir un fichier PHP
avec l'obtention du contenu en base de données, des variables, la
gestion des sessions, etc. et un fichier template qui gérera l'affichage
de vos pages. Normalement, plus aucun code HTML ne doit apparaître dans
vos fichiers PHP.</p><p id="r-442303" data-claire-element-id="442303">Voici donc ce que <strong>pourrait</strong> donner notre exemple précédent avec un moteur de templates :</p><pre id="r-442304" data-claire-element-id="442304" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php include 'inc/header.php'; ?&gt;\n\n\n &lt;?php \n\n $articlesQuery = $db-&gt;query('SELECT * FROM blog');\n $articles = $articlesQuery-&gt;fetchAll();\n\n $template = $twig-&gt;loadTemplate('blog.twig');\n echo $template-&gt;render(array(\n\t\t 'articles' =&gt; $articles,\n\t ));\n ?&gt;\n&lt;?php include 'inc/footer.php'; ?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">include</span> <span class="ace_string">'inc/header.php'</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_variable">$articlesQuery</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$db</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">query</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'SELECT * FROM blog'</span><span class="ace_paren ace_rparen">)</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_variable">$articles</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$articlesQuery</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">fetchAll</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_variable">$template</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">loadTemplate</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'blog.twig'</span><span class="ace_paren ace_rparen">)</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_support ace_function">echo</span> <span class="ace_variable">$template</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">render</span><span class="ace_paren ace_lparen">(</span><span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_string">'articles'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_variable">$articles</span>,
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">))</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_support ace_php_tag">?&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_support ace_function">include</span> <span class="ace_string">'inc/footer.php'</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><pre id="r-442305" data-claire-element-id="442305" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% for key, article in articles %}\n\t&lt;div class=\&quot;article\&quot;&gt;\n\n &lt;div class=\&quot;title\&quot;&gt;{{ article.title }}&lt;/div&gt; \n &lt;div class=\&quot;content\&quot;&gt;\n {{ article.content }}\n &lt;/div&gt;\n\n &lt;/div&gt;\n{% endfor %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% for key, article in articles %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"article"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"title"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{{ article.title }}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml"> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"content"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> {{ article.content }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfor %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442306" data-claire-element-id="442306">Je n'explique pas ce code pour le moment car vous allez apprendre cette syntaxe dans la suite du cours.</p><h3 id="r-442319" data-claire-element-id="442319">Pourquoi utiliser un moteur de templates ?</h3><p id="r-442308" data-claire-element-id="442308">Depuis
tout à l'heure je vous parle de Twig et je viens même de vous montrer
les grandes lignes de son fonctionnement. Mais vous vous demandez
peut-être pourquoi utiliser un moteur de templates ? Quel(s) avantage(s)
peut-on avoir à l'utiliser par rapport à du PHP "classique" ?.</p><p id="r-442309" data-claire-element-id="442309">On peut y voir plusieurs avantages notables :</p><ul id="r-442316" data-claire-element-id="442316"><li id="r-442311" data-claire-element-id="442311"><p id="r-442310" data-claire-element-id="442310">Le code est plus clair : on sait où est le code HTML et on ne doit pas chercher après dans le code PHP</p></li><li id="r-442313" data-claire-element-id="442313"><p id="r-442312" data-claire-element-id="442312">Pour
reprendre la phrase du dessus on peut noter le fait que vous savez quel
fichier éditer quand vous savez d'où vient l'erreur. De plus pour
reprendre l'exemple du blog, si un jour vous voulez modifier simplement
l'affichage des billets, vous savez quelle partie du code éditer et vous
n'avez pas à chercher.</p></li><li id="r-442315" data-claire-element-id="442315"><p id="r-442314" data-claire-element-id="442314">Si
vous travaillez avec un graphiste, c'est un réel plus. Les graphistes
connaissent généralement HTML et CSS et pas toujours PHP. Le graphiste
s'y retrouve donc beaucoup plus facilement.</p></li></ul><p id="r-442317" data-claire-element-id="442317">Je
pourrais en citer d'autres mais je pense que ce sont les plus
importants qui m'ont fait adopter un tel système pour des sites de
petites et moyennes tailles.</p><p id="r-442318" data-claire-element-id="442318">Si je vous ai convaincu, je vous propose de lire la suite de ce cours pour voir comment mettre en place Twig.</p></div></div><div class="foldable" id="ui-id-2" data-widget="foldable"><h2 id="r-442354" data-claire-element-id="7730194" class="foldable__button secondTitle js-foldable-button">Mise en place<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442321" data-claire-element-id="442321">Avant
de mettre en place le moteur sur votre site, il vous faut le
télécharger. Je vous propose donc de lire la partie qui vous concerne
pour le faire. Si vous ne savez pas laquelle choisir, lisez la partie
juste en dessous.</p><h4 id="r-442325" data-claire-element-id="442325">Via une archive</h4><p id="r-442322" data-claire-element-id="442322">Pour télécharger Twig via une archive rien de plus simple, rendez vous sur <a href="http://twig.sensiolabs.org/">le site</a>
et cliquez sur le lien "Install now". Choisissez ensuite votre archive
(en tar ou en zip). Si vous ne savez pas trop, je vous conseille de
prendre tar si vous êtes sur un système (de type) UNIX et zip sur un
système Windows.</p><p id="r-442323" data-claire-element-id="442323">Vous
devez maintenant décompresser l'archive et copier les fichiers dans un
dossier nommé "twig" dans le dossier de votre site. Vous pouvez, si vous
le souhaitez, l'appeler différemment ; en sachant que dans ce cours je
pars du principe que vous avez appelé votre dossier contenant ces
sources "twig".</p><p id="r-442324" data-claire-element-id="442324">Vous pouvez vous rendre à la partie "Mise en place"</p><h4 id="r-442329" data-claire-element-id="442329">Via git</h4><p id="r-442326" data-claire-element-id="442326">Si vous voulez passer par Git, il vous suffit de vous placer dans le répertoire de votre site et de faire :</p><pre id="r-442327" data-claire-element-id="442327"><samp>git&nbsp;clone&nbsp;http://github.com/fabpot/twig</samp></pre><p id="r-442328" data-claire-element-id="442328">Un dossier twig contenant les fichiers sources va être créé. Vous pouvez vous rendre à la partie "Mise en place"</p><h4 id="r-442333" data-claire-element-id="442333">Via Subversion</h4><p id="r-442330" data-claire-element-id="442330">Pour cloner le dépôt SVN, placez-vous dans le répertoire de votre projet et tapez :</p><pre id="r-442331" data-claire-element-id="442331"><samp>svn&nbsp;co&nbsp;http://svn.twig-project.org/trunk/&nbsp;twig</samp></pre><p id="r-442332" data-claire-element-id="442332">Un dossier twig contenant les fichiers sources va être créé. Vous pouvez vous rendre à la partie "Mise en place"</p><h4 id="r-442353" data-claire-element-id="7730191">Installation via PEAR</h4><p id="r-442334" data-claire-element-id="442334">Pour les fans de PEAR, vous pouvez vous rendre sur <a href="http://pear.twig-project.org/">la page dédiée à PEAR</a>.</p><p id="r-442335" data-claire-element-id="442335"><strong>Note</strong> : à ma connaissance il n'existe pas de dépôt pour Mercurial ou pour CVS.</p><h3 id="r-442352" data-claire-element-id="7730193">Mise en place</h3><p id="r-442336" data-claire-element-id="442336">Si
vous le souhaitez, vous pouvez supprimer tous les fichiers et dossiers
sauf le dossier lib et son contenu. Je vous conseille de laisser le
dossier tel quel et de ne pas changer les fichiers de place.</p><p id="r-442337" data-claire-element-id="442337">Twig
est un moteur de templates réalisé avec le langage PHP en orienté
objet. Il va donc falloir créer une instance des classes en question.
Voici donc le code que vous devez mettre en début de chaque fichier (que
je vous conseille de charger via include).</p><p id="r-442338" data-claire-element-id="442338">Avant tout, je vous demanderais de créer un dossier "templates" contenant les templates de votre site.</p><pre id="r-442339" data-claire-element-id="7730192" class="code-block"><code data-claire-semantic="php" data-code="{&quot;language&quot;:&quot;php&quot;,&quot;source&quot;:&quot;&lt;?php\n require_once __DIR__ . '/vendor/autoload.php';\n \n $loader = new Twig_Loader_Filesystem('templates'); // Dossier contenant les templates\n $twig = new Twig_Environment($loader, array(\n 'cache' =&gt; false\n ));&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_support ace_function">require_once</span> <span class="ace_constant ace_language">__DIR__</span> . <span class="ace_string">'/vendor/autoload.php'</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_variable">$loader</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Loader_Filesystem</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'templates'</span><span class="ace_paren ace_rparen">)</span>; <span class="ace_comment">// Dossier contenant les templates</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_variable">$twig</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Environment</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable">$loader</span>, <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_string">'cache'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_constant ace_language">false</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">))</span>;
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442340" data-claire-element-id="442340">Le
code ici est assez simple. On inclut le fichier Autoloader.php.
Ensuite, on indique le fichier où se trouvent nos templates. Pour finir,
on demande à Twig d'aller chercher les templates dans le dossier
indiqué précédemment et on lui indique quelques options pour plus de
"souplesse" pendant le développement de notre projet.</p><p id="r-442341" data-claire-element-id="442341">D'ailleurs, ici je n'ai mis que le cache mais il y a d'autres options possibles :</p><ul id="r-442348" data-claire-element-id="442348"><li id="r-442343" data-claire-element-id="442343"><p id="r-442342" data-claire-element-id="442342">cache
: prend en argument le dossier où vous stockez les templates en cache
ou bien false pour ne pas s'en servir. Je me permet de vous donner un
conseil : en production, le cache peut être une bonne chose mais en
développement le mieux est de le mettre à false.</p></li><li id="r-442345" data-claire-element-id="442345"><p id="r-442344" data-claire-element-id="442344">charset : par défaut à utf-8, définit l'encodage de votre projet.</p></li><li id="r-442347" data-claire-element-id="442347"><p id="r-442346" data-claire-element-id="442346">autoescape : échappe automatiquement les variables. Le code HTML contenu dedans n'est donc pas interprété. Par défaut à true.</p></li></ul><p id="r-442349" data-claire-element-id="442349">Pour plus d'options, je vous renvoie vers <a href="http://twig.sensiolabs.org/doc/api.html#environment-options">cette section</a> de la documentation.</p><p id="r-442350" data-claire-element-id="442350">Sachez
aussi que si vous le souhaitez, vous pouvez mettre plusieurs dossiers
contenants les templates. En sachant que Twig va d'abord regarder dans
le premier, puis le suivant et ainsi de suite. Je vous montre ici un
code demandant à Twig d'aller chercher dans deux dossiers différents,
mais vous pouvez en mettre plus :</p><pre id="r-442351" data-claire-element-id="442351" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\n$loader = new Twig_Loader_Filesystem(array('templates', 'views'));&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_variable">$loader</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Loader_Filesystem</span><span class="ace_paren ace_lparen">(</span><span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'templates'</span>, <span class="ace_string">'views'</span><span class="ace_paren ace_rparen">))</span>;
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre></div></div><div class="foldable" id="ui-id-3" data-widget="foldable"><h2 id="r-442369" data-claire-element-id="442369" class="foldable__button secondTitle js-foldable-button">Notre premier template<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442355" data-claire-element-id="442355">Je
vous propose maintenant de voir la création de notre premier template.
Avant toutes choses, créez un fichier appelé index.twig dans le dossier
dans lequel vous stockez vos templates.</p><aside id="r-442357" data-claire-element-id="442357" data-claire-semantic="information"><p id="r-442356" data-claire-element-id="442356">Ici
j'ai mis "twig" comme extension mais en fait vous pouvez mettre ce que
vous voulez. La plupart du temps, il s'agit de html ou tpl mais vous
pouvez mettre txt, etc.</p></aside><p id="r-442358" data-claire-element-id="442358">Ouvrez ce fichier avec votre éditeur favori et mettez-y le code suivant :</p><pre id="r-442359" data-claire-element-id="442359" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;Vous venez de créer votre premier template avec {{ moteur_name }} !&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">Vous venez de créer votre premier template avec {{ moteur_name }} !</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442360" data-claire-element-id="442360">Nous
reviendrons juste après sur cette portion de code. Ensuite, créez un
fichier à la racine de votre site appelé index.php et mettez-y le code
suivant (n'oubliez pas d'y inclure le fichier contenant le code qui
instancie le moteur).</p><pre id="r-442361" data-claire-element-id="442361" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\n $template = $twig-&gt;loadTemplate('index.twig');\n echo $template-&gt;render(array(\n\t'moteur_name' =&gt; 'Twig'\n )); \n?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_variable">$template</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">loadTemplate</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'index.twig'</span><span class="ace_paren ace_rparen">)</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_support ace_function">echo</span> <span class="ace_variable">$template</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">render</span><span class="ace_paren ace_lparen">(</span><span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">'moteur_name'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_string">'Twig'</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">))</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442362" data-claire-element-id="442362">Vous pouvez aussi écrire ce qu'il y a au dessus de cette façon :</p><pre id="r-442363" data-claire-element-id="442363" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\n echo $twig-&gt;render('index.twig', array(\n 'moteur_name' =&gt; 'Twig'\n ));\n?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_support ace_function">echo</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">render</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'index.twig'</span>, <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_string">'moteur_name'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_string">'Twig'</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">))</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442364" data-claire-element-id="442364">Il n'y a pas énormément de différences mais cette portion de code est plus courte que la précédente.</p><p id="r-442365" data-claire-element-id="442365">Quand
vous ouvrez le fichier, vous voyez "Vous venez de créer votre premier
template avec Twig". En fait, dans le template le {{ moteur_name }} est
le nom de la variable que vous avez passé à Twig lors de l'affichage du
template. Il s'agit de cette portion de code.</p><pre id="r-442366" data-claire-element-id="442366" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\necho $template-&gt;render(array(\n\t'moteur_name' =&gt; 'Twig'\n )); \n?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_function">echo</span> <span class="ace_variable">$template</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">render</span><span class="ace_paren ace_lparen">(</span><span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">'moteur_name'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_string">'Twig'</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">))</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442367" data-claire-element-id="442367">Dans cet exemple, j'ai mis du texte entre guillemets, mais rien ne vous empêche de mettre des variables, des tableaux, etc.</p><p id="r-442368" data-claire-element-id="442368">Pour
l'instant c'est plus que basique. Heureusement, Twig nous permet de
faire bien plus de choses que ça. Je vous propose donc de voir les
possibilités que nous offre Twig dans la partie suivante.</p></div></div><div class="foldable" id="ui-id-4" data-widget="foldable"><h2 id="r-442432" data-claire-element-id="442432" class="foldable__button secondTitle js-foldable-button">Syntaxe de base<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442370" data-claire-element-id="442370">Cette
partie est certainement la plus importante de ce cours. Vous allez
apprendre à remplir vos templates avec la syntaxe proposée par le
moteur. Vous pourrez donc faire des opérations complexes comme les
conditions, les boucles, etc.</p><h3 id="r-442378" data-claire-element-id="442378">Affichage des variables et tableaux</h3><p id="r-442371" data-claire-element-id="442371">Lors
de l'affichage d'un template (vu un petit peu plus haut), vous passez
en argument des variables, des tableaux, etc. Voyons un peu l'affichage
côté template.</p><pre id="r-442372" data-claire-element-id="442372" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;Votre nom est : {{ name }}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">Votre nom est : {{ name }}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442373" data-claire-element-id="442373">Pour afficher une variable, il faut la placer entre accolades.</p><aside id="r-442375" data-claire-element-id="442375" data-claire-semantic="information"><p id="r-442374" data-claire-element-id="442374">Note
: si vous comptez utiliser Twig par la suite pour vos projets, je vous
conseille de mettre un raccourci dans votre éditeur pour les doubles
accolades et le tag {% ... %} que nous verrons après.</p></aside><p id="r-442376" data-claire-element-id="442376">Supposons que vous voulez passer un tableau à votre template, il vous suffit de faire :</p><pre id="r-442377" data-claire-element-id="442377" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{{ array['key'] }} \n{{ array.key }} &lt;!-- fait exactement la même chose qu'au dessus --&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{{ array['key'] }} </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{{ array.key }} </span><span class="ace_comment ace_xml">&lt;!-- fait exactement la même chose qu'au dessus --&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h3 id="r-442399" data-claire-element-id="442399">Les filtres</h3><p id="r-442379" data-claire-element-id="442379">Les
filtres sont un concept que vous ne connaissez peut-être pas. En fait,
un filtre agit comme une fonction. Il sont déjà définis mais vous pouvez
créer les vôtres si vous le souhaitez. Pour appliquer un filtre à une
variable, il faut séparer le nom de la variable et celui du filtre par
un <em>pipe</em> ( | ). Je vous propose ici de voir quelques filtres utiles.</p><ul id="r-442390" data-claire-element-id="442390"><li id="r-442381" data-claire-element-id="442381"><p id="r-442380" data-claire-element-id="442380">upper : met la chaîne de caractères qui le concerne en majuscule ;</p></li><li id="r-442383" data-claire-element-id="442383"><p id="r-442382" data-claire-element-id="442382">lower : fait exactement l'inverse d'upper et va mettre toutes les lettres en minuscule ;</p></li><li id="r-442385" data-claire-element-id="442385"><p id="r-442384" data-claire-element-id="442384">title : met la première lettre de chaque mot de la chaîne de caractère en majuscule. Comme un titre de noblesse ;</p></li><li id="r-442387" data-claire-element-id="442387"><p id="r-442386" data-claire-element-id="442386">length : retourne le nombre de caractères dont la chaîne se compose ;</p></li><li id="r-442389" data-claire-element-id="442389"><p id="r-442388" data-claire-element-id="442388">escape
&amp; e : pour échapper du code HTML vous pouvez utiliser escape ou e.
Tous deux font la même chose mais l'un est plus court que l'autre.</p></li></ul><p id="r-442391" data-claire-element-id="442391">Il y a encore beaucoup d'autres filtres proposés par Twig, en voici <a href="http://twig.sensiolabs.org/doc/filters/index.html">la liste</a>.</p><h4 id="r-442398" data-claire-element-id="442398">Les filtres sur les blocs</h4><p id="r-442392" data-claire-element-id="442392">Si
vous le souhaitez, plutôt que d'appliquer un filtre à chacune de vos
variables, si vous comptez le faire sur beaucoup de variables ou une
partie de votre site en particulier, je vous conseille de passer par
cette méthode :</p><pre id="r-442393" data-claire-element-id="442393" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% filter upper %}\n je vais être écrit en majuscule\n {{ moi_aussi }}\n{% endfilter %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% filter upper %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> je vais être écrit en majuscule</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {{ moi_aussi }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfilter %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442394" data-claire-element-id="442394">Vous pouvez aussi chaîner les filtres en en mettant plusieurs à la suite :</p><pre id="r-442395" data-claire-element-id="442395" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% filter upper|escape %}\n je vais être écrit en majuscule &lt;em&gt;et échappé&lt;/em&gt;\n{% endfilter %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% filter upper|escape %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> je vais être écrit en majuscule </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">em</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">et échappé</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">em</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfilter %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442396" data-claire-element-id="442396">Concernant
le filtre escape, un bloc spécial a été prévu à cet effet. Ainsi, si
par exemple vous avez mis lors de l'initialisation de Twig autoespace à
true, vous pouvez faire ceci :</p><pre id="r-442397" data-claire-element-id="442397" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% autoescape false %}\n&lt;strong&gt;Je vais être affiché en gras&lt;/strong&gt;\n{% endautoescape %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% autoescape false %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">strong</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">Je vais être affiché en gras</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">strong</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endautoescape %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h3 id="r-442402" data-claire-element-id="442402">Les commentaires</h3><p id="r-442400" data-claire-element-id="442400">Ici,
c'est juste un petit plus. Ça n'est pas vraiment utile (c'est moins
intuitif, dira-t-on) si vous n'avez pas l'habitude de les utiliser.
C'est un plus pour ceux qui utilisent Django par exemple :</p><pre id="r-442401" data-claire-element-id="442401" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{# Je suis un commentaire #}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{# Je suis un commentaire #}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h3 id="r-442417" data-claire-element-id="442417">Les conditions</h3><p id="r-442403" data-claire-element-id="442403">Pour faire des conditions, rien de plus simple :</p><pre id="r-442404" data-claire-element-id="442404" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% if online &gt; 1 %}\n Il y a {{ online }} membres en ligne\n{% elseif online == 1 %}\n Il n'y a qu'un seul utilisateur en ligne (Vous !)\n{% else %}\n Il n'y a aucun utilisateur en ligne. Cette phrase ne sera, en principe, jamais lue sauf par toi. Ô grand développeur !.\n{% endif %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% if online &gt; 1 %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Il y a {{ online }} membres en ligne</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% elseif online == 1 %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Il n'y a qu'un seul utilisateur en ligne (Vous !)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% else %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Il n'y a aucun utilisateur en ligne. Cette phrase ne sera, en principe, jamais lue sauf par toi. Ô grand développeur !.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endif %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h4 id="r-442406" data-claire-element-id="442406">Les tests utiles (built-in tests)</h4><p id="r-442405" data-claire-element-id="442405">Les
tests utiles vous permettent de réaliser des conditions plus "poussées"
et plus intuitives. Par exemple, avec, vous pouvez savoir si une
variable est divisible par 10 ou si une variable est définie.</p><h4 id="r-442409" data-claire-element-id="442409">defined</h4><p id="r-442407" data-claire-element-id="442407">Celui-ci vous permet de savoir si une variable est définie ou pas. Il renverra true si c'est le cas et false si ça ne l'est pas.</p><pre id="r-442408" data-claire-element-id="442408" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% if session.pseudo is defined %}\n Votre pseudo est {{ session.pseudo}} .\n{% endif %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% if session.pseudo is defined %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Votre pseudo est {{ session.pseudo}} .</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endif %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h4 id="r-442412" data-claire-element-id="442412">divisibleby</h4><p id="r-442410" data-claire-element-id="442410">Une test très intéressant est celui de savoir si votre variable est divisible par un certain nombre.</p><pre id="r-442411" data-claire-element-id="442411" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% if equipe.volley is divisibleby(6) %}\n L'équipe sera divisé en 2 équipes de 6.\n{% endif %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% if equipe.volley is divisibleby(6) %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> L'équipe sera divisé en 2 équipes de 6.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endif %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h4 id="r-442416" data-claire-element-id="442416">empty</h4><p id="r-442413" data-claire-element-id="442413">Verifie si une variable est vide ou pas.</p><pre id="r-442414" data-claire-element-id="442414" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% if equipe.volley is empty %}\n Le match est annulé.\n{% endif %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% if equipe.volley is empty %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Le match est annulé.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endif %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442415" data-claire-element-id="442415">Il y a encore beaucoup d'autres test-utiles mais je pense que vous avez compris le principe. Je vous renvoie donc vers <a href="http://twig.sensiolabs.org/doc/tests/index.html">la liste</a> de ces tests.</p><h3 id="r-442426" data-claire-element-id="442426">La boucle for</h3><p id="r-442418" data-claire-element-id="442418">Ici rien de bien compliqué. Je vais surtout vous donner des exemples car il n'y a pas grand-choses à dire sur cette boucle.</p><pre id="r-442419" data-claire-element-id="442419" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% for i in 0..50 %}\n Ceci est la ligne {{ i }}\n{% enfor %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% for i in 0..50 %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Ceci est la ligne {{ i }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% enfor %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442420" data-claire-element-id="442420">En sachant que ce que je viens de vous montrer marche aussi avec des lettres :</p><pre id="r-442421" data-claire-element-id="442421" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% for lettre in 'a'..'z' %}\n La lettre {{ letter }} est lettre numéro {{ loop.index }} de l'alphabet.\n \n{% endfor %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% for lettre in 'a'..'z' %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> La lettre {{ letter }} est lettre numéro {{ loop.index }} de l'alphabet.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfor %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442422" data-claire-element-id="442422">Si
vous vous demandez d'où je sors le loop.index, il contient en fait le
numéro de tour de boucle actuel. Vous pouvez voir d'autres variables de
ce type <a href="http://twig.sensiolabs.org/doc/tags/for.html">ici</a> (en scrollant un peu selon la taille de votre écran ; il s'agit du tableau).<br> Vous pouvez également parcourir vos tableaux avec :</p><pre id="r-442423" data-claire-element-id="442423" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% for joueur in club %}\n Le joueur {{ joueur.nom }} joue dans l'équipe {{ joueur.equipe }}\n{% endfor %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% for joueur in club %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Le joueur {{ joueur.nom }} joue dans l'équipe {{ joueur.equipe }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfor %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442424" data-claire-element-id="442424">Depuis
la version 1.2 de Twig, il est possible de lancer une boucle selon une
condition dans le même "bloc". Ce n'est pas très clair alors je vous
propose un exemple.</p><pre id="r-442425" data-claire-element-id="442425" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% for joueur in club if equipe is not empty %}\n Le joueur {{ joueur.nom }} joue dans l'équipe {{ joueur.equipe }}\n{% endfor %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% for joueur in club if equipe is not empty %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Le joueur {{ joueur.nom }} joue dans l'équipe {{ joueur.equipe }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endfor %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h3 id="r-442431" data-claire-element-id="442431">Définir des variables</h3><p id="r-442427" data-claire-element-id="442427">J'ai
décidé de mettre cette partie en dernier pour une raison bien
particulière. La logique d'un moteur de template veut qu'on sépare les
variables et les fonctions php de l'affichage du contenu. Déclarer des
variables dans un template casse la logique du système. Je vous le
montre quand même car c'est quand même vous qui allez entretenir le code
que vous écrivez par la suite (en principe) et vous faîtes comme vous
le souhaitez.</p><pre id="r-442428" data-claire-element-id="442428" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% set var = \&quot;val\&quot; %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% set var = "val" %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442429" data-claire-element-id="442429">Vous
pouvez aussi définir des variables comme en Javascript. C'est à dire en
mettant une seule fois "set" et en mettant à la suite les différentes
variables séparées par des virgules :</p><pre id="r-442430" data-claire-element-id="442430" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% set mascotte, os = 'beastie', 'bsd' %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% set mascotte, os = 'beastie', 'bsd' %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre></div></div><div class="foldable" id="ui-id-5" data-widget="foldable"><h2 id="r-442457" data-claire-element-id="442457" class="foldable__button secondTitle js-foldable-button">Quelques ajouts pratiques<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442433" data-claire-element-id="442433">Voici quelques fonctions, pas indispensables, mais qui peuvent se révéler utiles.</p><h3 id="r-442444" data-claire-element-id="442444">Les includes</h3><p id="r-442434" data-claire-element-id="442434">Vous pouvez aussi inclure des templates comme avec la fonction include de PHP. Pas besoin de vous écrire un roman :</p><pre id="r-442435" data-claire-element-id="442435" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% include 'header.twig' %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include 'header.twig' %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442436" data-claire-element-id="442436">Une chose que j'ai vraiment adorée c'est de pouvoir inclure des pages en leur restreignant l'accès à certaines variables.</p><pre id="r-442437" data-claire-element-id="442437" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% include 'fichier.twig' with {'var': 'val'} only %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include 'fichier.twig' with {'var': 'val'} only %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442438" data-claire-element-id="442438">Ici,
la page n'aura accès qu'à la variable var. Le only lui empêche
d'accéder aux autres. Vous pouvez bien évidemment enlever le only pour
que la page accède aux autres variables.</p><p id="r-442439" data-claire-element-id="442439">Une chose que j'ai aussi beaucoup aimée c'est la possibilité d'inclure des pages selon une condition. Par exemple :</p><pre id="r-442440" data-claire-element-id="442440" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% include online ? 'options.twig' : 'connexion.twig' %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include online ? 'options.twig' : 'connexion.twig' %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442441" data-claire-element-id="442441">Un
dernier point sur les include est le fait que vous pouvez inclure un
template, lui passer des variables ou lui restreindre l'accès à
certaines et indiquer à Twig que si le template est inexistant, aucune
erreur ne sera renvoyée.</p><pre id="r-442442" data-claire-element-id="442442" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% include \&quot;sidebar.html\&quot; ignore missing %}\n{% include \&quot;sidebar.html\&quot; ignore missing with {'foo': 'bar} %}\n{% include \&quot;sidebar.html\&quot; ignore missing only %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include "sidebar.html" ignore missing %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include "sidebar.html" ignore missing with {'foo': 'bar} %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% include "sidebar.html" ignore missing only %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442443" data-claire-element-id="442443">Cet exemple est tiré de la documentation.</p><h3 id="r-442451" data-claire-element-id="442451">Les imports</h3><p id="r-442445" data-claire-element-id="442445">On passe maintenant à une fonctionnalité que j'apprécie énormément : les imports.</p><p id="r-442446" data-claire-element-id="442446">Twig
vous propose de créer un système équivalent aux helpers. Je vous copie
le code de la documentation que je trouve tout simplement génial !<br> Supposons que cette page s'appelle forms.html :</p><pre id="r-442447" data-claire-element-id="442447" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% macro input(name, value, type, size) %}\n &lt;input type=\&quot;{{ type|default('text') }}\&quot; name=\&quot;{{ name }}\&quot; value=\&quot;{{ value|e }}\&quot; size=\&quot;{{ size|default(20) }}\&quot; /&gt;\n{% endmacro %}\n\n{% macro textarea(name, value, rows) %}\n &lt;textarea name=\&quot;{{ name }}\&quot; rows=\&quot;{{ rows|default(10) }}\&quot; cols=\&quot;{{ cols|default(40) }}\&quot;&gt;{{ value|e }}&lt;/textarea&gt;\n{% endmacro %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% macro input(name, value, type, size) %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_form ace_tag-name ace_xml">input</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">type</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ type|default('text') }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">name</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ name }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">value</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ value|e }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">size</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ size|default(20) }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">/&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endmacro %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% macro textarea(name, value, rows) %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_form ace_tag-name ace_xml">textarea</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">name</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ name }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">rows</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ rows|default(10) }}"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">cols</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"{{ cols|default(40) }}"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{{ value|e }}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_form ace_tag-name ace_xml">textarea</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endmacro %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442448" data-claire-element-id="442448">Et maintenant dans votre template, mettez le code suivant :</p><pre id="r-442449" data-claire-element-id="442449" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% import 'forms.html' as forms %}\n\n&lt;dl&gt;\n &lt;dt&gt;Username&lt;/dt&gt;\n &lt;dd&gt;{{ forms.input('username') }}&lt;/dd&gt;\n &lt;dt&gt;Password&lt;/dt&gt;\n &lt;dd&gt;{{ forms.input('password', none, 'password') }}&lt;/dd&gt;\n&lt;/dl&gt;\n&lt;p&gt;{{ forms.textarea('comment') }}&lt;/p&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% import 'forms.html' as forms %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dl</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dt</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">Username</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dt</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dd</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{{ forms.input('username') }}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dd</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dt</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">Password</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dt</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dd</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{{ forms.input('password', none, 'password') }}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dd</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">dl</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">p</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{{ forms.textarea('comment') }}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">p</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442450" data-claire-element-id="442450">Les
formulaires sont un aspect récurrent et assez prise de tête quelques
fois. Cette fonctionnalité permet un réel gain de temps !</p><h3 id="r-442456" data-claire-element-id="442456">Héritage</h3><p id="r-442452" data-claire-element-id="442452">Une
autre fonctionnalité qui m'a beaucoup plu est la possibilité d'héritage
entre templates. Dans la plupart des cas, vous avez une charte définie
pour votre site et à part le contenu, peu de choses changent dans la
présentation de votre page. Avec Twig, vous pouvez définir un template
avec votre header, votre footer (ce n'est qu'un exemple) et faire un
héritage entre les deux templates (celui qui affiche le contenu et celui
contenant le header et le footer) pour que vous n'ayez qu'à modifier un
seul fichier si vous voulez changer la structure de votre site. Je vous
prends encore un exemple de la documentation. En premier le template
parent et en second le template qui hérite du premier (l'enfant).</p><pre id="r-442453" data-claire-element-id="442453" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;&lt;!DOCTYPE HTML PUBLIC \&quot;-//W3C//DTD HTML 4.01//EN\&quot;&gt;\n&lt;html lang=\&quot;en\&quot;&gt;\n&lt;head&gt;\n {% block head %}\n &lt;link rel=\&quot;stylesheet\&quot; href=\&quot;style.css\&quot; /&gt;\n &lt;title&gt;{% block title %}{% endblock %} - My Webpage&lt;/title&gt;\n {% endblock %}\n&lt;/head&gt;\n&lt;body&gt;\n &lt;div id=\&quot;content\&quot;&gt;{% block content %}{% endblock %}&lt;/div&gt;\n &lt;div id=\&quot;footer\&quot;&gt;\n {% block footer %}\n &amp;copy; Copyright 2009 by &lt;a href=\&quot;http://domain.invalid/\&quot;&gt;you&lt;/a&gt;.\n {% endblock %}\n &lt;/div&gt;\n&lt;/body&gt;\n&lt;/html&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_xml-pe ace_doctype ace_xml">&lt;!</span><span class="ace_xml-pe ace_doctype ace_xml">DOCTYPE</span><span class="ace_text ace_whitespace ace_xml"> </span><span class="ace_xml-pe ace_xml">HTML</span><span class="ace_text ace_whitespace ace_xml"> </span><span class="ace_xml-pe ace_xml">PUBLIC</span><span class="ace_text ace_whitespace ace_xml"> </span><span class="ace_string ace_xml">"-//W3C//DTD HTML 4.01//EN"</span><span class="ace_xml-pe ace_doctype ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">html</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">lang</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"en"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">head</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {% block head %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">link</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">rel</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"stylesheet"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">href</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"style.css"</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">/&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">title</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{% block title %}{% endblock %} - My Webpage</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">title</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {% endblock %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">head</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">body</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">id</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"content"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">{% block content %}{% endblock %}</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">id</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"footer"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {% block footer %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_text ace_xml"> </span><span class="ace_constant ace_language ace_escape ace_reference ace_xml">&amp;copy;</span><span class="ace_text ace_xml"> Copyright 2009 by </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_anchor ace_tag-name ace_xml">a</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">href</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"http://domain.invalid/"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">you</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_anchor ace_tag-name ace_xml">a</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {% endblock %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">div</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">body</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">html</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><pre id="r-442454" data-claire-element-id="442454" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;{% extends \&quot;base.html\&quot; %}\n\n{% block title %}Index{% endblock %}\n{% block head %}\n {{ parent() }}\n &lt;style type=\&quot;text/css\&quot;&gt;\n .important { color: #336699; }\n &lt;/style&gt;\n{% endblock %}\n{% block content %}\n &lt;h1&gt;Index&lt;/h1&gt;\n &lt;p class=\&quot;important\&quot;&gt;\n Welcome on my awesome homepage.\n &lt;/p&gt;\n{% endblock %}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% extends "base.html" %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% block title %}Index{% endblock %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% block head %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> {{ parent() }}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_style ace_tag-name ace_xml">style</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">type</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"text/css"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_variable">.important</span> <span class="ace_paren ace_lparen">{</span> <span class="ace_support ace_type">color</span>: <span class="ace_constant ace_numeric">#336699</span>; <span class="ace_paren ace_rparen">}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_style ace_tag-name ace_xml">style</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endblock %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% block content %}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">h1</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span><span class="ace_text ace_xml">Index</span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">h1</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">p</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_entity ace_other ace_attribute-name ace_xml">class</span><span class="ace_keyword ace_operator ace_attribute-equals ace_xml">=</span><span class="ace_string ace_attribute-value ace_xml">"important"</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> Welcome on my awesome homepage.</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_end-tag-open ace_xml">&lt;/</span><span class="ace_meta ace_tag ace_tag-name ace_xml">p</span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{% endblock %}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442455" data-claire-element-id="442455">Dans
cet exemple, le template parent s'appelle base.html. Un petit point
dans le template enfant. Dans le block head, il y a un {{ parent() }}.
Cette fonction signifie que le bloc n'est pas nettoyé et le contenu du
bloc head sera celui présent dans le template parent et le template
enfant. Pratique non ?</p></div></div><div class="foldable" id="ui-id-6" data-widget="foldable"><h2 id="r-442494" data-claire-element-id="442494" class="foldable__button secondTitle js-foldable-button">Fonctionnalités côté PHP<i class="foldable__icon icon-next"></i></h2><div class="foldable__content"><p id="r-442458" data-claire-element-id="442458">Pour
l'instant je vous ai montré des fonctionnalités en majorité valables
pour les templates. Je vous propose ici de voir certains points
intéressants côté PHP.</p><h3 id="r-442464" data-claire-element-id="442464">Modifier les tags</h3><p id="r-442459" data-claire-element-id="442459">Par
défaut, Twig utilise la syntaxe des templates jinja. Pour afficher une
variable il faut faire {{ variable }} et pour des instructions comme la
boucle for, ou les conditions il faut faire {% if confition %}. Twig
vous permet de modifier ces tags. Vous pouvez par exemple mettre les
tags erb (moteur de template Ruby présent dans <a href="http://rubyonrails.org/">Ruby on Rails</a> et <a href="http://www.sinatrarb.com/">Sinatra</a> pour ne citer qu'eux) :</p><pre id="r-442460" data-claire-element-id="442460" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\n$syntaxe = new Twig_Lexer($twig, array(\n 'tag_comment' =&gt; array('#', '#'),\n 'tag_block' =&gt; array('&lt;%', '%&gt;'),\n 'tag_variable' =&gt; array('&lt;%=', '%&gt;')\n));&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_variable">$syntaxe</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Lexer</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable">$twig</span>, <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">'tag_comment'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'#'</span>, <span class="ace_string">'#'</span><span class="ace_paren ace_rparen">)</span>,
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">'tag_block'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'&lt;%'</span>, <span class="ace_string">'%&gt;'</span><span class="ace_paren ace_rparen">)</span>,
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">'tag_variable'</span> <span class="ace_keyword ace_operator">=&gt;</span> <span class="ace_keyword">array</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'&lt;%='</span>, <span class="ace_string">'%&gt;'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">))</span>;
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442461" data-claire-element-id="442461">Ensuite, il faut indiquer au moteur que vous voulez modifier la syntaxe dans vos templates.</p><pre id="r-442462" data-claire-element-id="442462" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php $twig-&gt;setLexer($syntaxe); ?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">setLexer</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable">$syntaxe</span><span class="ace_paren ace_rparen">)</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442463" data-claire-element-id="442463">La
variable $twig représente l'instance de la classe Twig_Environnement().
Si votre instance de la classe s'appelle différemment, changez en
conséquence.</p><h3 id="r-442493" data-claire-element-id="442493">Étendre Twig</h3><p id="r-442465" data-claire-element-id="442465">Les
personnes utilisant des moteurs de templates sont nombreuses. Mais tout
le monde ne l'utilise pas pour des projets de même taille. Twig peut
donc être "étendu", c'est-à-dire qu'on peut lui rajouter des
fonctionnalités très simplement grâce à des méthodes qui font tout le
travail à notre place. Ça nous évite de toucher au code source pour
ajouter un simple filtre par exemple.</p><p id="r-442466" data-claire-element-id="442466">Je vous propose ici de voir comment ajouter vos propres filtres et objets.</p><h4 id="r-442474" data-claire-element-id="442474">Ajouter un objet "global"</h4><p id="r-442467" data-claire-element-id="442467">Un
objet global, avec Twig, est un objet accessible depuis n'importe quel
template. La documentation montre, par exemple, comment rajouter un
objet "text" ayant une méthode lipsum. Je vous propose ici de voir
comment intégrer cet objet.</p><p id="r-442468" data-claire-element-id="442468">Tout d'abord, il faut créer un fichier contenant une nouvelle classe :</p><pre id="r-442469" data-claire-element-id="442469" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php\nclass Text {\n\n public $lipsum_text = 'Lorem ipsum dolor sit amet';\n\n\n /**\n * @param none\n * @return lipsum_text\n */\n\n public function lipsum() {\n \n return $this-&gt;lipsum_text;\n \n }\n}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_keyword">class</span> <span class="ace_identifier">Text</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_keyword">public</span> <span class="ace_variable">$lipsum_text</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_string">'Lorem ipsum dolor sit amet'</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_comment ace_doc">/**</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_comment ace_doc"> * </span><span class="ace_comment ace_doc ace_tag">@param</span><span class="ace_comment ace_doc"> none</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_comment ace_doc"> * </span><span class="ace_comment ace_doc ace_tag">@return</span><span class="ace_comment ace_doc"> lipsum_text</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span><span class="ace_comment ace_doc"> */</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_keyword">public</span> <span class="ace_keyword">function</span> <span class="ace_identifier">lipsum</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_indent-guide"> </span> <span class="ace_support ace_function">return</span> <span class="ace_variable">$this</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">lipsum_text</span>;
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442470" data-claire-element-id="442470">Ensuite,
indiquez à Twig que vous voulez ajouter votre objet dans les templates
(il faut que le fichier contenant la classe soit inclus dans le fichier
contenant cette instruction).</p><pre id="r-442471" data-claire-element-id="442471" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php $twig-&gt;addGlobal('text', new Text());&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">addGlobal</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'text'</span>, <span class="ace_keyword">new</span> <span class="ace_support ace_class">Text</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">))</span>;
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442472" data-claire-element-id="442472">Le
premier argument représente le nom de votre objet dans les templates et
le second est une instance de la classe que vous avez précédemment
créée. Et maintenant dans vos templates vous pouvez faire :</p><pre id="r-442473" data-claire-element-id="442473" class="code-block"><code data-claire-semantic="html" data-code="{&quot;language&quot;:&quot;html&quot;,&quot;source&quot;:&quot;Voici un texte : &lt;br /&gt;\n{{ text.lipsum() }}&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">Voici un texte : </span><span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt;</span><span class="ace_meta ace_tag ace_tag-name ace_xml">br</span><span class="ace_text ace_tag-whitespace ace_xml"> </span><span class="ace_meta ace_tag ace_punctuation ace_tag-close ace_xml">/&gt;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_text ace_xml">{{ text.lipsum() }}</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><h4 id="r-442492" data-claire-element-id="442492">Ajouter des filtres</h4><p id="r-442475" data-claire-element-id="442475">Maintenant
que vous avez compris le principe pour les objets, les filtres vont
aller tout seuls. C'est la même marche à suivre que précédemment. Ici
vous créez une fonction (pas forcément une méthode de classe) et vous
demandez à Twig de l'ajouter au parseur. Ici je vais vous montrer
comment ajouter le filtre lower (même s'il existe déjà, c'est juste pour
l'exemple).</p><pre id="r-442476" data-claire-element-id="442476" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php $twig-&gt;addFilter('lower', new Twig_Filter_Function('strtolower')); ?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">addFilter</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'lower'</span>, <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Filter_Function</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'strtolower'</span><span class="ace_paren ace_rparen">))</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442477" data-claire-element-id="442477">Ici,
je n'ai pas eu à créer la fonction car elle est native mais vous pouvez
mettre les vôtres sans aucun problème. Vous pouvez aussi appeler la
méthode d'une classe mais <strong>attention</strong>, il faut que la méthode soit statique. Par exemple :</p><pre id="r-442478" data-claire-element-id="442478" class="code-block"><code data-claire-semantic="html+php" data-code="{&quot;language&quot;:&quot;html+php&quot;,&quot;source&quot;:&quot;&lt;?php $twig-&gt;addFilter('monfiltre', new Twig_Filter_Function('MaClasse::MaMethode')); ?&gt;&quot;}" class="ace" data-widget="codeBlock"><div class="ace-monokai"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_support ace_php_tag">&lt;?php</span> <span class="ace_variable">$twig</span><span class="ace_keyword ace_operator">-&gt;</span><span class="ace_identifier">addFilter</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'monfiltre'</span>, <span class="ace_keyword">new</span> <span class="ace_support ace_class">Twig_Filter_Function</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'MaClasse::MaMethode'</span><span class="ace_paren ace_rparen">))</span>; <span class="ace_support ace_php_tag">?&gt;</span>
</div></div></div></code><textarea class="code-block--raw-code"></textarea></pre><p id="r-442479" data-claire-element-id="442479">Ce
cours s'achève là. Je vous invite à poster un commentaire si vous avez
des suggestions, des points que vous ne trouvez pas clairs, etc. Pour ce
qui est de l'aide, je vous renvoie vers le <a href="http://www.siteduzero.com/forum-81-123-php.html">forum php</a>.</p><p id="r-442480" data-claire-element-id="442480">Avant de vous quitter, je peux vous conseiller quelques liens :</p><ul id="r-442491" data-claire-element-id="442491"><li id="r-442482" data-claire-element-id="442482"><p id="r-442481" data-claire-element-id="442481"><a href="http://www.siteduzero.com/tutoriel-3-517569-symfony2-un-tutoriel-pour-debuter-avec-le-framework-symfony2.html">Symfony2 - Un tutoriel pour débuter avec le framework Symfony2</a> : un cours sur le célèbre framework Symfony dans sa version 2. Le framework utilise Twig.</p></li><li id="r-442484" data-claire-element-id="442484"><p id="r-442483" data-claire-element-id="442483"><a href="http://twig.sensiolabs.org/documentation">La documentation Twig</a> : à mettre en favoris si vous comptez utiliser le moteur.</p></li><li id="r-442486" data-claire-element-id="442486"><p id="r-442485" data-claire-element-id="442485"><a href="http://blog.twig.sensiolabs.org/">Le blog</a> : Vous pouvez voir ici les actualités sur Twig (dans 90% des cas, il s'agit de l'annonce d'une nouvelle version).</p></li><li id="r-442488" data-claire-element-id="442488"><p id="r-442487" data-claire-element-id="442487"><a href="https://github.com/fabpot/Twig/issues">La page de rapports de bug</a></p></li><li id="r-442490" data-claire-element-id="442490"><p id="r-442489" data-claire-element-id="442489"><a href="https://github.com/fabpot/Twig">Dépôt Github</a> : ce dépôt contient les sources du projet. Ça peut être intéressant de voir comment fonctionne le moteur.</p></li></ul></div></div>
</div>
<div class="js-courseSelementActions sideActions" data-widget="courseElementActions" style="height: 113px; top: 239.5px; left: -37.5px;">
<ul class="sideActions__container">
<li>
<a class="sideActions__item js-courseElementActions-copyUrl js-tooltip" href="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates#/id/r-442289" data-tooltip="Copier le lien" data-tooltip-done="Lien copié !" data-clipboard-text="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates#/id/r-442289">
#
</a>
</li>
</ul>
</div>
</div>
</section>
<aside tabindex="-1" role="dialog" aria-labelledby="popin-view-restriction_popin_title" class="popin popin--illustrated js-popin" id="popin-view-restriction">
<i class="popin__close-button icon-close js-close-button"></i>
<div class="popin__inner">
<div class="popin__illustrationWrapper">
<div class="popin__illustration illustration--balloon"></div>
</div>
<div class="popin__mainContainer">
<h3 id="popin-view-restriction_popin_title" class="popin__title js-popin-title">Waouh&nbsp;!</h3>
<div class="popin__content js-popin-content">
<div class="popin__contentWrapper">
<p>
Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues
aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant
un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !
</p>
<p>
Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.
</p>
</div>
</div>
<div class="popin__actions js-popin-actions">
<span class="u--inlineBlock">
<a class="button button--primary " href="https://openclassrooms.com/register">S'inscrire</a>
</span>
<span class="u--inlineBlock">
<a class="button button " href="https://openclassrooms.com/login">Se connecter</a>
</span>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
<div id="popin-not-certifying-yet_481669" class="popin" data-popin-title="Vous ne pouvez pas encore obtenir de certificat de réussite à l'issue de ce cours.
&lt;a href='/premium'&gt;&lt;i class='icon-star'&gt;&lt;/i&gt; Devenez Premium&lt;/a&gt;
">
<img alt="Exemple de certificat de réussite" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/certif.jpg">
</div>
<div id="popin-not-certifying-yet_188246" class="popin" data-popin-title="Vous ne pouvez pas encore obtenir de certificat de réussite à l'issue de ce cours.
&lt;a href='/premium'&gt;&lt;i class='icon-star'&gt;&lt;/i&gt; Devenez Premium&lt;/a&gt;
">
<img alt="Exemple de certificat de réussite" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/certif.jpg">
</div>
</main>
<aside class="contentWithSidebar__sidebar js-contentWithSidebar-slidingElement">
<nav>
<div id="tab-courseMenu" class="col-nav__inner js-sidebar-inner">
<div class="col-nav__block col-nav__block--premium">
<strong class="not-certifying col-nav__notCertifying">Vous ne pouvez pas encore obtenir de certificat de réussite à l'issue de ce cours.</strong>
</div>
<div class="col-nav__block col-nav__block--institution">
<h2>Créé par</h2>
<a href="https://openclassrooms.com/partners/openclassrooms" target="_blank">
<span data-image-cdn-attr-src="//sdz-upload.s3.amazonaws.com/prod/partners/img/logo_logo-oc.png" data-image-cdn-attr-alt="logo OpenClassrooms" data-image-cdn-attr-class="col-nav__institutionLogo"><img data-reactroot="" srcset="https://oc-upload.imgix.net/prod/partners/img/logo_logo-oc.png?auto=compress&amp;dpr=1 1x,https://oc-upload.imgix.net/prod/partners/img/logo_logo-oc.png?auto=compress&amp;dpr=2 2x" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/logo_logo-oc.png" class="col-nav__institutionLogo" alt="logo OpenClassrooms"></span>
<p class="col-nav__block--institutionDescription">
OpenClassrooms, Leading <span class="nowrap">E-Learning<span> Platform in Europe
</span></span></p>
</a>
</div>
<div class="socialNetwork col-nav__block">
<ul class="socialButtons js-socialButtons" data-options="
title: 'Utilisation de Twig, un moteur de templates ! @OpenClassrooms',
mailTitle: 'Cours &quot;Utilisation de Twig, un moteur de templates !&quot; sur OpenClassrooms',
mailContent: 'Découvrez le cours &quot;Utilisation de Twig, un moteur de templates !&quot; sur OpenClassrooms.'" data-widget="socialButtons">
<li>
<a class="roundIcon roundIcon--twitter addthis_button_twitter js-socialButtons-btn js-tooltip at300b" data-tooltip="Partagez sur Twitter" addthis:url="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates?lang=fr" addthis:title="Utilisation de Twig, un moteur de templates ! @OpenClassrooms" title="Twitter" href="#">
<i class="roundIcon__icon icon-twitter"></i>
</a>
</li>
<li>
<a class="roundIcon roundIcon--facebook addthis_button_facebook js-socialButtons-btn js-tooltip at300b" data-tooltip="Partagez sur Facebook" addthis:url="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates?lang=fr" addthis:title="Utilisation de Twig, un moteur de templates ! @OpenClassrooms" title="Facebook" href="#">
<i class="roundIcon__icon icon-facebook"></i>
</a>
</li>
<li>
<a class="roundIcon roundIcon--googlePlus addthis_button_google_plusone_share js-socialButtons-btn js-tooltip at300b" data-tooltip="Partagez sur Google+" addthis:url="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates?lang=fr" addthis:title="Utilisation de Twig, un moteur de templates ! @OpenClassrooms" target="_blank" title="Google+" href="#">
<i class="roundIcon__icon icon-google"></i>
</a>
</li>
<li>
<a class="roundIcon addthis_button_email js-socialButtons-btn js-socialButtons-email js-tooltip at300b" data-tooltip="Partagez par e-mail" addthis:url="https://openclassrooms.com/courses/utilisation-de-twig-un-moteur-de-templates?lang=fr" addthis:ui_email_title="Utilisation de Twig, un moteur de templates ! @OpenClassrooms" addthis:ui_email_note="Découvrez le cours &quot;Utilisation de Twig, un moteur de templates !&quot; sur OpenClassrooms." addthis:title="Cours &quot;Utilisation de Twig, un moteur de templates !&quot; sur OpenClassrooms" target="_blank" title="Email" href="#">
<i class="roundIcon__icon icon-letter"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</aside>
</div>
</div>
<footer class="alt-section">
<div class="centered">
<div class="row">
<div class="col4 course-bottom__category">
<h2 class="highlighted">
L'auteur
</h2>
<div>
<a itemprop="author" itemscope="" itemtype="http://schema.org/Person" href="https://openclassrooms.com/membres/robin850-43587" class="no-underlined">
<div class="course-bottom__text-illustrated">
<span data-author="Robin Dupret" data-image-cdn-background-image="//user.oc-static.com/files/302001_303000/302781.png" style="background-image: url(&quot;https://oc-user.imgix.net/files/302001_303000/302781.png?auto=compress&quot;);"></span>
<h4 itemprop="name">Robin Dupret</h4>
</div>
</a>
</div>
</div>
<div class="col8 course-bottom__category">
<h2 class="highlighted">Découvrez aussi ce cours en...</h2>
<ul class="course-bottom__format">
<li>
<a href="https://openclassrooms.com/old-courses-pdf" class="text-decoration-none">
<div class="circle circle--x-small">
<span class="circle__content"></span>
<i class="icon-pdf"></i>
</div>
<div class="course-bottom__format-entitled">PDF</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</article>
</div>
</div>
<footer class="footer">
<div class="centered">
<div class="row">
<div class="col3 col6-s footer__item linksList foldable js-foldable is-closed is-forceOpened" data-options="mobileOnly: true, disableOnLargeScreen: true, initialState: 'closed'" data-widget="foldable">
<h2 class="linksList__title footer__title foldable__button js-foldable-button">
OpenClassrooms
<i class="icon-next foldable__icon"></i>
</h2>
<ul class="linksList__content foldable__content">
<li>
<a href="https://openclassrooms.com/about-us" class="footer__link">Qui sommes-nous ?</a>
</li>
<li>
<a href="https://openclassrooms.com/how-does-it-work" class="footer__link">Fonctionnement de nos cours</a>
</li>
<li>
<a href="http://jobs.openclassrooms.com/" target="_blank" class="footer__link">Recrutement</a>
</li>
<li>
<a href="#" class="js-zendesk-show footer__link">Nous contacter</a>
</li>
</ul>
</div>
<div class="col3 col6-s footer__item linksList foldable js-foldable is-closed is-forceOpened" data-options="mobileOnly: true, disableOnLargeScreen: true, initialState: 'closed'" data-widget="foldable">
<h2 class="linksList__title footer__title foldable__button js-foldable-button">
Professionnels
<i class="icon-next foldable__icon"></i>
</h2>
<ul class="linksList__content foldable__content">
<li>
<a href="https://openclassrooms.com/affiliation" class="footer__link">
Affiliation
</a>
</li>
<li>
<a href="https://openclassrooms.com/partners" class="footer__link">Partenaires</a>
</li>
</ul>
</div>
<div class="col3 col6-s footer__item linksList foldable js-foldable is-closed is-forceOpened" data-options="mobileOnly: true, disableOnLargeScreen: true, initialState: 'closed'" data-widget="foldable">
<h2 class="linksList__title footer__title foldable__button js-foldable-button">
En plus
<i class="icon-next foldable__icon"></i>
</h2>
<ul class="linksList__content foldable__content">
<li>
<a href="https://openclassrooms.com/new-teachers" class="footer__link">Créer un cours</a>
</li>
<li>
<a href="https://openclassrooms.com/courses/courselab" class="footer__link">CourseLab</a>
</li>
<li>
<strong>
<a href="https://openclassrooms.com/terms-conditions" class="footer__link">
Conditions Générales d'Utilisation
</a>
</strong>
</li>
</ul>
</div>
<div class="col3 col6-s footer__item linksList foldable js-foldable is-closed is-forceOpened" data-options="mobileOnly: true, disableOnLargeScreen: true, initialState: 'closed'" data-widget="foldable">
<h2 class="linksList__title footer__title foldable__button js-foldable-button">
Suivez-nous
<i class="icon-next foldable__icon"></i>
</h2>
<ul class="linksList__content foldable__content">
<li>
<a href="http://blog.openclassrooms.com/" class="footer__link">Le blog OpenClassrooms</a>
</li>
<li>
<ul class="footer__socialNetwork">
<li>
<a href="https://www.facebook.com/openclassrooms" target="_blank" class="roundIcon roundIcon--facebook footer__socialButtons">
<span class="hidden">Facebook</span>
<i class="icon-facebook roundIcon__icon"></i>
</a>
</li>
<li>
<a href="https://twitter.com/openclassrooms" target="_blank" class="roundIcon roundIcon--twitter footer__socialButtons">
<span class="hidden">Twitter</span>
<i class="icon-twitter roundIcon__icon"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/+OpenClassrooms/posts" target="_blank" class="roundIcon roundIcon--youtube footer__socialButtons">
<span class="hidden">Google Plus</span>
<i class="icon-google roundIcon__icon"></i>
</a>
</li>
<li>
<a href="https://instagram.com/openclassrooms" target="_blank" class="roundIcon roundIcon--instagram footer__socialButtons">
<span class="hidden">Instagram</span>
<i class="icon-instagram roundIcon__icon"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/user/TheOpenClassrooms" target="_blank" class="roundIcon roundIcon--googlePlus footer__socialButtons">
<span class="hidden">Youtube</span>
<i class="icon-youtube roundIcon__icon"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/openclassrooms" target="_blank" class="roundIcon roundIcon--linkedin footer__socialButtons">
<span class="hidden">Linkedin</span>
<i class="icon-linkedin roundIcon__icon"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="text-right u--positionRelative">
<hr>
<div class="footer__onlineStatus" id="react_conversation_onlineStatus"><!-- react-empty: 1 --></div>
<ul class="no-decoration inline">
<li>
<a class="footer__link" href="https://openclassrooms.com/change-locale/en/hmByGG2N-v8mhYde09OYyxPg-q1UBwcEPogiIbiTY_k">English</a>
</li>
<li>
<a class="footer__link" href="https://openclassrooms.com/change-locale/es/hmByGG2N-v8mhYde09OYyxPg-q1UBwcEPogiIbiTY_k">Español</a>
</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript">
window.analytics=window.analytics||[],window.analytics.methods=["identify","group","track","page","pageview","alias","ready","on","once","off","trackLink","trackForm","trackClick","trackSubmit"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var key=window.analytics.methods[i];window.analytics[key]=window.analytics.factory(key)}window.analytics.load=function(t){if(!document.getElementById("analytics-js")){var a=document.createElement("script");a.type="text/javascript",a.id="analytics-js",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.io/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)}},window.analytics.SNIPPET_VERSION="2.0.9",
window.analytics.load('mou95e6tdn');
</script>
<script>App.scripts.push("https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes,Intl.~locale.fr");</script>
<script>App.scripts.push("/js/oc/packages/vendors-d45201d4.js");</script>
<script>App.scripts.push("/js/oc/packages/common-e476c1d1.js");</script>
<script>App.scripts.push("/js/oc/packages/courseView-a8a0b522.js");</script>
<script>
(function () {
function loadScripts(cb) {
App.scripts.forEach(function (src, index) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.body.appendChild(script);
if (cb && index === App.scripts.length - 1) {
script.onload = cb;
}
});
}
function boot() {
loadScripts(function () {
if (App.modules) {
App.modules.startAll();
}
});
}
if (window.addEventListener) {
window.addEventListener('load', boot, false);
} else if (window.attachEvent) {
window.attachEvent('onload', boot);
} else {
window.onload = boot;
}
}());
</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"90dc06697a","applicationID":"20302107","transactionName":"NANaYkJXC0ICAhdYVw1Je0NDQgpcTA4AblsPB1FEVWkGXhYTEFRnAAlNRENTOlIMFBFCXTwQUVNH","queueTime":0,"applicationTime":105,"atts":"GERZFApNGEw=","errorBeacon":"bam.nr-data.net","agent":""}</script>
<script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/polyfill.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/vendors-d45201d4.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/common-e476c1d1.js"></script><script src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/courseView-a8a0b522.js"></script><div><!-- react-empty: 1 --></div><div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div><div style="visibility: hidden; height: 1px; width: 1px; position: absolute; top: -9999px; z-index: 100000;" id="_atssh"><iframe id="_atssh825" title="AddThis utility frame" style="height: 1px; width: 1px; position: absolute; top: 0px; z-index: 100000; border: 0px none; left: 0px;" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/sh.htm"></iframe></div><style id="service-icons-0"></style><div style="width:0px; height:0px; display:none; visibility:hidden;" id="batBeacon0.5590372546755106"><img style="width:0px; height:0px; display:none; visibility:hidden;" id="batBeacon0.5312658410029008" alt="" src="Utilisation%20de%20Twig,%20un%20moteur%20de%20templates%20%21_fichiers/0.txt" width="0" height="0"></div><script type="text/javascript" id="">(function(){window.satismeter=window.satismeter||function(){(window.satismeter.q=window.satismeter.q||[]).push(arguments)};window.satismeter.l=1*new Date;var a=document.createElement("script"),b=document.getElementsByTagName("script")[0].parentNode;a.async=1;a.src="https://app.satismeter.com/satismeter.js";b.appendChild(a)})();
satismeter({writeKey:"gJsvzWYbMoPRGrAA",userId:"undefined",language:"undefined",traits:{email:"undefined",name:"undefined",createdAt:"undefined",country:"undefined",gender:"undefined",premiumType:"undefined",premium:"false",typeNPS:"global",language:"undefined",locale:"undefined"}});</script></body></html>
Reference in New Issue View Git Blame Copy Permalink