CINXE.COM

<!doctype html><html amp lang="fr" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="Ce guide fournit des instructions et des bonnes pratiques pour afficher des annonces sur vos pages AMP. Ainsi, pour afficher des publicités dans AMP, vous devez ajouter le composant amp-ad personnalisé..."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Ce guide fournit des instructions et des bonnes pratiques pour afficher des annonces sur vos pages AMP. Ainsi, pour afficher des publicités dans AMP, vous devez ajouter le composant amp-ad personnalisé..."><meta name="twitter:title" content="Comment générer rentabiliser votre page AMP avec des publicités"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:title" content="Comment générer rentabiliser votre page AMP avec des publicités"><meta property="og:url" content="https://amp.dev/fr/documentation/guides-and-tutorials/develop/monetization/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites"><meta name="page-locale" content="fr"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><script custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" crossorigin="anonymous" custom-element="amp-youtube"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/fr/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="de" href="https://amp.dev/de/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="ru" href="https://amp.dev/ru/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="pl" href="https://amp.dev/pl/documentation/guides-and-tutorials/develop/monetization/"><link rel="alternate" hreflang="vi" href="https://amp.dev/vi/documentation/guides-and-tutorials/develop/monetization/"><title>Comment générer rentabiliser votre page AMP avec des publicités - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/fr/documentation/guides-and-tutorials/develop/monetization/ ","name":"amp.dev","headline":"Comment générer rentabiliser votre page AMP avec des publicités","description":"Ce guide fournit des instructions et des bonnes pratiques pour afficher des annonces sur vos pages AMP. Ainsi, pour afficher des publicités dans AMP, vous devez ajouter le composant amp-ad personnalisé...","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-guide-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-tutorial-progress{position:absolute;top:0;left:-4px;height:100%;width:2px;background-color:#e2e5e6}.ap-m-tutorial-progress-finished{background-color:#09a600}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}.ap-a-video{margin:0 -15px 32px 0}@media(min-width:768px){.ap-a-video{margin-right:-30px;max-width:100%}}@media(min-width:1024px){.ap-a-video{margin-right:0}}.ap-a-video-video{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}.ap-a-video-caption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;padding-top:10px}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-breadcrumbs,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-un:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-un:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uo .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.-lf{display:none}.-ll.amp-active~.-lf{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-ll.amp-active~.-lf{display:block}}.-ll.amp-active~.-lf .-lc{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-ll.amp-active~.-lf .-lc{padding:0 15px}}.-ll.amp-active~.-lf .-lc:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-ll.amp-active~.-lf .-lh{flex:1 0;padding-right:10px}.-ll.amp-active~.-lf .-lp{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-ll.amp-active~.-lf .-lp svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-ft .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-ft .-tf{padding:0 15px}.-ft .-tf>div,.-ft .-tf section{min-width:0}}@media(min-width:768px){.-ft .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ft .-tf{padding:0 15px}}.-ft .-t,.-ft .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:7/25}.-ft .-t p.limit,.-ft .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:8/25;padding-left:30px;padding-right:30px;padding-bottom:60px}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:6/24;padding-left:30px;padding-bottom:60px}}.-ft .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ft .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ft .-uc{grid-column:1/6}}.-ft .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ft .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ft .ap--toc{grid-column:8/25}.-ft .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ft .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ft .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-uc+.-t,.-ft .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ft .-uc+.-t,.-ft .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ft .-uc+.-t:nth-of-type(2),.-ft .-uc+.-t:nth-of-type(3),.-ft .ap--toc+.-t:nth-of-type(2),.-ft .ap--toc+.-t:nth-of-type(3){grid-row:1}}@media(max-width:767px){.-ft .-uc~.-t,.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-t amp-anim{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}@media screen and (max-width:575px){.-ft .-t figure{min-width:50vw}}.-ft .-t figure.alignment-wrapper{margin-top:1.6rem}.-ft .-t figure.left{text-align:left}.-ft .-t figure.center{text-align:center}.-ft .-t figure.right{text-align:right}@media(min-width:768px){.-ft .-t figure.half amp-img{width:50%}}.-ft .-t figure.third amp-img{width:50%}@media(min-width:768px){.-ft .-t figure.third amp-img{width:33%}}.-ft .-t figure.shadow amp-img{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}.-ft .-t figure amp-img{margin:0 auto}.-ft .-t figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;padding-top:20px;max-width:300px}.-ft .ap--chapter-indicator{display:flex;justify-content:space-between}.-ft .ap--chapter-indicator .ap-a-btn{margin:0 auto}.-ft .ap--chapter-indicator .ap--previous .-i{transform:scaleX(-1)}.-ft .ap--chapter-indicator .ap--next{justify-self:flex-end}.-ft .ap--chapter-indicator .ap--next .-i{margin-left:.625em;margin-right:0}.-ft .noshowtoc{display:none}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="angle-down-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M0.662 19.607c-0.441-0.412-0.662-0.927-0.662-1.494s0.221-1.082 0.662-1.494c0.883-0.825 2.317-0.825 3.2 0l28.138 26.28 28.138-26.28c0.883-0.825 2.317-0.825 3.2 0s0.883 2.164 0 2.989l-29.738 27.775c-0.883 0.825-2.317 0.825-3.2 0l-29.738-27.775z"/> </symbol><symbol id="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"><path fill="#005af0" d="M19.5 1.8h-1.4V.5c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1h-5.9c-.7 0-1.4.3-1.8.9C9.6.4 8.9.1 8.2.1H2.3c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v1.3H.5c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v10.7c0 .1 0 .2.1.3s.2.1.3.1H5c2.5 0 3.3.7 4.6 2.5.1.1.2.2.4.2s.3-.1.4-.2c1.4-1.8 2.2-2.5 3.7-2.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.2c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.4-.1zM11.8.9h5.5v9.8h-5c-.7 0-1.3.3-1.8.8V2.2c0-.7.6-1.3 1.3-1.3zM2.7.9h5.5c.8 0 1.4.6 1.4 1.3v9.3c-.5-.5-1.1-.9-1.8-.9h-5V.9zm16.4 11.5h-5c-1.9 0-2.9.9-4.1 2.4-1.2-1.5-2.3-2.4-5-2.4H.9V2.6h.9V11c0 .1 0 .2.1.3s.2.1.3.1h5.5c.7 0 1.5.8 1.9 1.5.1.2.2.2.4.2h.1c.1 0 .2-.1.3-.2.4-.7 1.1-1.5 1.9-1.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.6h.9v9.8zm-5.6-8.5c-.3 0-.5-.2-.5-.4s.2-.4.5-.4.5.2.5.4c-.1.2-.3.4-.5.4zm0 4.7c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V5.5c0-.2.2-.4.5-.4s.5.2.5.4v2.7c0 .1 0 .2-.1.3s-.4.1-.5.1zm-9-3.7c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5z"/></symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/fr/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> À propos <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/fr/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">Sites Web AMP</div> <div class="ap-o-header-flyout-item-description">Créez des expériences Web sans défaut</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/fr/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Stories empilables pour tous</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/fr/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">Annonces AMP</div> <div class="ap-o-header-flyout-item-description">Annonces ultra rapides sur le Web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/fr/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">E-mail AMP</div> <div class="ap-o-header-flyout-item-description">L'e-mail nouvelle génération</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/how-amp-works/">Comment AMP fonctionne</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/mission-and-vision/">Vision et mission</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/use-cases/">Cas d'utilisation</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/success-stories/">Exemples de réussite</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Documentation <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/documentation/">Commencer</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Guides et tutoriels</div> <div class="ap-o-header-flyout-item-description">Premiers pas avec AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Composants</div> <div class="ap-o-header-flyout-item-description">La bibliothèque AMP complète</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Exemples</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Cours</div> <div class="ap-o-header-flyout-item-description">Apprenez à utiliser AMP grâce à des cours gratuits</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Modèles</div> <div class="ap-o-header-flyout-item-description">Prêts à l'emploi</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Outils</div> <div class="ap-o-header-flyout-item-description">Commencez à créer</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Communauté <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/documentation/guides-and-tutorials/contribute/">Contribuer</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/roadmap/">Feuille de route</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/governance/">Gouvernance</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/working-groups/access-subscriptions/">Groupes de travail</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Événements <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/events/amp-roadshow/">Tournée AMP</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Assistance <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/support/">Aide</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Sélectionner une langue" tabindex="-1"> <span class="-tw">FR</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/guides-and-tutorials/develop/monetization/" role="listitem">English</a> <a class="-tw" href="/de/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Deutsch</a> <a class="-tw" href="/ar/documentation/guides-and-tutorials/develop/monetization/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/guides-and-tutorials/develop/monetization/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/guides-and-tutorials/develop/monetization/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/guides-and-tutorials/develop/monetization/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/guides-and-tutorials/develop/monetization/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Menu à tiroir" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> À propos </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/websites/"> Sites Web AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/ads/"> Annonces AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/email/"> E-mail AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/how-amp-works/"> Comment AMP fonctionne </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/mission-and-vision/"> Vision et mission </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/use-cases/"> Cas d'utilisation </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/success-stories/"> Exemples de réussite </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Documentation </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/"> Commencer </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/guides-and-tutorials/"> Guides et tutoriels </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/components/"> Composants </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/examples/"> Exemples </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/courses/"> Cours </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/templates/"> Modèles </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/tools/"> Outils </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Communauté </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/guides-and-tutorials/contribute/"> Contribuer </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/roadmap/"> Feuille de route </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/governance/"> Gouvernance </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/working-groups/access-subscriptions/"> Groupes de travail </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Événements </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/events/amp-roadshow/"> Tournée AMP </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/fr/support/"> Aide </a> </li> </ul> </nav> <div class="-ui"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-ll i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-lf" aria-hidden="true"> <div class="-lc"> <div class="-lh">Sélectionnez votre format pour une expérience plus rationalisée</div> <button class="-lp" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -ft"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">Table des matières</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#comment-ajouter-des-annonces-à-votre-page">Comment ajouter des annonces à votre page</a><ul> <li><a href="#étape-1:-ajoutez-le-script-amp-ad">Étape 1: ajoutez le script amp-ad</a></li> <li><a href="#étape-2:-ajoutez-le-tag-amp-ad-à-votre-page-amp">Étape 2: ajoutez le tag amp-ad à votre page AMP</a></li> <li><a href="#étape-3:-spécifiez-la-taille-du-bloc-d'annonce">Étape 3: spécifiez la taille du bloc d'annonce</a></li> <li><a href="#étape-4:-définissez-les-paramètres-du-réseau-publicitaire">Étape 4: définissez les paramètres du réseau publicitaire</a></li> <li><a href="#étape-5:-spécifiez-un-caractère-de-remplacement-(facultatif)">Étape 5: spécifiez un caractère de remplacement (facultatif)</a></li> <li><a href="#étape-6:-spécifiez-une-solution-de-secours-(facultatif)">Étape 6: spécifiez une solution de secours (facultatif)</a></li> </ul> </li> <li><a href="#diffusion-d'annonces-amphtml-à-vente-directe">Diffusion d'annonces AMPHTML à vente directe</a></li> <li><a href="#comment-augmenter-les-données-de-ciblage-sur-les-demandes-d'annonces">Comment augmenter les données de ciblage sur les demandes d'annonces</a></li> <li><a href="#bonnes-pratiques">Bonnes pratiques</a><ul> <li><a href="#emplacement-et-contrôles:-optimisez-l'emplacement-de-vos-annonces">Emplacement et contrôles: optimisez l'emplacement de vos annonces</a></li> <li><a href="#demande-et-tarification:-obtenez-le-bon-prix-pour-vos-annonces">Demande et tarification: obtenez le bon prix pour vos annonces</a></li> <li><a href="#types-d'annonces:-diffusez-les-meilleurs-types-d'annonces">Types d'annonces: diffusez les meilleurs types d'annonces</a></li> <li><a href="#innovation:-proposez-les-produits-publicitaires-les-plus-attrayants">Innovation: proposez les produits publicitaires les plus attrayants</a></li> </ul> </li> <li><a href="#ressources-supplémentaires">Ressources supplémentaires</a></li></ul> </div> </section> <section class="-t"> <label class="-uo -ur ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Afficher/masquer la barre latérale</span> </label> <label class="-uo -ul ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Afficher/masquer la barre latérale</span> </label> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/fr/documentation/">Documentation</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/fr/documentation/guides-and-tutorials/">Guides et tutoriels</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <div class="ap-m-breadcrumbs-crumb">Monetize your AMP pages</div> </nav> <h1>Comment générer rentabiliser votre page AMP avec des publicités</h1> <p>Ce guide fournit des instructions et des bonnes pratiques pour afficher des annonces sur vos pages AMP.</p> <h2 id="comment-ajouter-des-annonces-à-votre-page">Comment ajouter des annonces à votre page</h2> <p>Avec les pages non AMP (HTML traditionnel), si vous souhaitez afficher des annonces sur votre page, vous devez inclure un extrait de code JavaScript pour diffuser des annonces à partir de votre réseau publicitaire. Pour des raisons de performances et de sécurité, vous ne pouvez pas ajouter du JavaScript tiers sur les pages AMP. Par conséquent, pour afficher des annonces dans AMP, vous devez ajouter le composant <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> personnalisé à votre page AMP.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> <strong>CONSEIL –</strong> Voir <a href="/fr/documentation/components/amp-ad/">AMP par l'exemple pour une démo en direct</a> qui montre comment ajouter une balise amp-ad à une page AMP. </div> </div><p></p> <p>Passons en revue les étapes d'ajout du composant afin de vous permettre d'afficher des annonces sur votre page AMP.</p> <h3 id="étape-1:-ajoutez-le-script-amp-ad">Étape 1: ajoutez le script amp-ad</h3> <p>Le composant <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> est une extension d'annonce personnalisée de la bibliothèque AMP. Sous <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> se cache du JavaScript personnalisé soigneusement conçu pour optimiser les performances. Pour exécuter le composant <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a>, vous devez ajouter le JavaScript requis pour ce composant dans la section <code>head</code> de votre page AMP:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-ad"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-ad-0.1.js"</span> <span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> <h3 id="étape-2:-ajoutez-le-tag-amp-ad-à-votre-page-amp">Étape 2: ajoutez le tag amp-ad à votre page AMP</h3> <p>Plus de 100 <a href="/fr/documentation/guides-and-tutorials/develop/monetization/ads_vendors/">serveurs et réseaux publicitaires</a> offrent des intégrations intégrées avec AMP. Pour ajouter une annonce pour un réseau publicitaire donné, ajoutez la balise <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> et spécifiez le réseau dans l'attribut <code>type</code>.</p> <p>Dans cet exemple, nous ajoutons un espace publicitaire pour diffuser des annonces depuis le réseau a9:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">type</span><span class="o">=</span><span class="s">"a9"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </code></pre></div> <h3 id="étape-3:-spécifiez-la-taille-du-bloc-d'annonce">Étape 3: spécifiez la taille du bloc d'annonce</h3> <p>Ajoutez les attributs <code>width</code> et <code>height</code> à la balise <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a>. Cela spécifie la taille de l'annonce sur votre page AMP:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">type</span><span class="o">=</span><span class="s">"a9"</span><span class="p">></span> width="300" height="250" <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </code></pre></div> <h3 id="étape-4:-définissez-les-paramètres-du-réseau-publicitaire">Étape 4: définissez les paramètres du réseau publicitaire</h3> <p>Chaque réseau possède des attributs de données spécifiques dont il a besoin pour diffuser des annonces. Consultez la documentation <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> du réseau publicitaire et ajoutez les attributs nécessaires. Dans l'exemple suivant, le réseau a9 demande des paramètres supplémentaires pour spécifier la taille de l'annonce et d'autres détails:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">type</span><span class="o">=</span><span class="s">"a9"</span> <span class="na">width</span><span class="o">=</span><span class="s">"300"</span> <span class="na">height</span><span class="o">=</span><span class="s">"250"</span> <span class="na">data-aax_size</span><span class="o">=</span><span class="s">"300x250"</span> <span class="na">data-aax_pubname</span><span class="o">=</span><span class="s">"test123"</span> <span class="na">data-aax_src</span><span class="o">=</span><span class="s">"302"</span> <span class="p">></span> <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </code></pre></div> <h3 id="étape-5:-spécifiez-un-caractère-de-remplacement-(facultatif)">Étape 5: spécifiez un caractère de remplacement (facultatif)</h3> <p>En fonction du réseau publicitaire, vous pouvez choisir d'afficher un caractère de remplacement jusqu'à ce que l'annonce soit disponible à la visualisation. Cela offre une meilleure expérience utilisateur en évitant les vides. Pour spécifier un caractère de remplacement, ajoutez un élément enfant avec l'attribut <code>placeholder</code>. Plus de détails dans la section <a href="/fr/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/">Caractères de remplacement et solutions de secours</a>.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">type</span><span class="o">=</span><span class="s">"a9"</span> <span class="na">width</span><span class="o">=</span><span class="s">"300"</span> <span class="na">height</span><span class="o">=</span><span class="s">"250"</span> <span class="na">data-aax_size</span><span class="o">=</span><span class="s">"300x250"</span> <span class="na">data-aax_pubname</span><span class="o">=</span><span class="s">"test123"</span> <span class="na">data-aax_src</span><span class="o">=</span><span class="s">"302"</span> <span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">placeholder</span> <span class="na">src</span><span class="o">=</span><span class="s">"placeholder-image.jpg"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </code></pre></div> <h3 id="étape-6:-spécifiez-une-solution-de-secours-(facultatif)">Étape 6: spécifiez une solution de secours (facultatif)</h3> <p>En fonction du réseau publicitaire, vous pouvez choisir d'afficher un élément de secours si aucune annonce n'est disponible pour être diffusée. Pour spécifier une solution de secours, ajoutez un élément enfant avec l'attribut <code>fallback</code>. Plus de détails dans la section <a href="/fr/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/">Caractères de remplacement et solutions de secours</a>.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">type</span><span class="o">=</span><span class="s">"a9"</span> <span class="na">width</span><span class="o">=</span><span class="s">"300"</span> <span class="na">height</span><span class="o">=</span><span class="s">"250"</span> <span class="na">data-aax_size</span><span class="o">=</span><span class="s">"300x250"</span> <span class="na">data-aax_pubname</span><span class="o">=</span><span class="s">"test123"</span> <span class="na">data-aax_src</span><span class="o">=</span><span class="s">"302"</span> <span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">fallback</span> <span class="na">src</span><span class="o">=</span><span class="s">"fallback-image.jpg"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </code></pre></div> <p>Félicitations! Vous diffusez maintenant des annonces sur votre page AMP!</p> <h2 id="diffusion-d'annonces-amphtml-à-vente-directe">Diffusion d'annonces AMPHTML à vente directe</h2> <p>Le composant <a href="/fr/documentation/components/amp-ad/"><code>amp-ad</code></a> diffuse les annonces depuis le réseau que vous spécifiez. Ces annonces peuvent être des annonces HTML standard ou des annonces AMPHTML, à condition que le réseau publicitaire prenne en charge les annonces AMPHTML. Pour diffuser vos annonces à vente directe sous forme d'annonces AMPHTML, créez l'annonce au format AMP HTML conformément aux exigences des <a href="/fr/documentation/guides-and-tutorials/learn/a4a_spec/">spécifications d'annonce AMPHTML</a> et utilisez un <a href="https://github.com/ampproject/amphtml/blob/main/ads/google/a4a/docs/a4a-readme.md#publishers">serveur publicitaire qui diffuse des annonces</a> AMPHTML.</p> <h2 id="comment-augmenter-les-données-de-ciblage-sur-les-demandes-d'annonces">Comment augmenter les données de ciblage sur les demandes d'annonces</h2> <p>Dans le cadre du mécanisme de diffusion Fast Fetch, la fonctionnalité Real-Time Config (RTC) permet aux éditeurs d'augmenter les demandes d'annonces avec des informations de ciblage propriétaires et tierces qui sont récupérées au moment de l'exécution. RTC autorise jusqu'à 5 appels vers des serveurs de ciblage pour chaque espace publicitaire individuel, dont les résultats sont ajoutés à la demande d'annonce. Pour utiliser RTC sur vos annonces, le réseau publicitaire que vous utilisez doit prendre en charge RTC et Fast Fetch.</p> <p>Vous trouverez plus de détails sur RTC dans cette vidéo YouTube:</p> <p> </p><figure class="ap-a-video"> <amp-youtube class="ap-a-video-video i-amphtml-layout-responsive i-amphtml-layout-size-defined" data-videoid="mvAmvKiWPfA" layout="responsive" width="16" height="9" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer></amp-youtube> <figcaption class="ap-a-video-caption">Watch Effective AMP Monetization with Header Bidding.</figcaption> </figure><p></p> <p>Ou alors consultez les ressources RTC suivantes:</p> <ul> <li><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md">Guide d'implémentation de l'éditeur AMP RTC</a></li> <li><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-documentation.md">Configuration AMP en temps réel</a></li> </ul> <h2 id="bonnes-pratiques">Bonnes pratiques</h2> <p>Voici quelques conseils pour optimiser l'efficacité des annonces sur vos pages AMP:</p> <h3 id="emplacement-et-contrôles:-optimisez-l'emplacement-de-vos-annonces">Emplacement et contrôles: optimisez l'emplacement de vos annonces</h3> <ul> <li><strong>Placez le même nombre d'annonces</strong> sur les pages AMP que sur vos pages non AMP pour générer un maximum de revenus par page.</li> <li><strong>Placez la première annonce juste en dessous de la première fenêtre</strong> (« sous le pli ») pour offrir une expérience utilisateur optimale.</li> <li>À moins que vous utilisiez des requêtes CSS ou multimédias avancées, <strong>assurez-vous que vos blocs d'annonces sont centrés sur la page</strong> pour offrir à vos utilisateurs une expérience Web mobile optimale.</li> <li>Activez <a href="https://github.com/ampproject/amphtml/blob/main/ads/README.md#support-for-multi-size-ad-requests">les demandes d'annonces multi-tailles</a> dans votre inventaire AMP pour augmenter la pression des enchères publicitaires et générer des revenus.</li> </ul> <h3 id="demande-et-tarification:-obtenez-le-bon-prix-pour-vos-annonces">Demande et tarification: obtenez le bon prix pour vos annonces</h3> <ul> <li><strong>Vendez des blocs d'annonces sur vos pages AMP sur tous les canaux de vente</strong>, y compris les canaux directs et indirects, afin d'optimiser la concurrence de votre inventaire sur les pages AMP.</li> <li><strong>Sur les pages AMP, fixez les prix de votre inventaire publicitaire</strong> comme vous le faites sur les pages non AMP. Surveillez les performances et ajustez les prix en conséquence.</li> <li><strong>Assurez-vous que tous les canaux de demande publicitaire sont en concurrence</strong> pour l'inventaire publicitaire sur vos pages AMP afin de stimuler la concurrence.</li> </ul> <h3 id="types-d'annonces:-diffusez-les-meilleurs-types-d'annonces">Types d'annonces: diffusez les meilleurs types d'annonces</h3> <ul> <li><strong>Évitez les publicités lourdes</strong> conformément aux <a href="http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf">directives IAB</a>.</li> <li><strong>Évitez les interstitiels</strong> ou autres formats d'annonces qui provoquent la rediffusion du contenu lors du chargement des annonces.</li> <li><strong>Optimisez la visibilité</strong> en définissant la stratégie de chargement des données sur préférer la visibilité par rapport aux vues.</li> <li><strong>Placez des annonces dans votre contenu vidéo</strong> via les <a href="/fr/documentation/components/#media">lecteurs pris en charge</a> ou <a href="/fr/documentation/components/amp-iframe-v1.0/"><code>amp-iframe</code></a> pour générer des revenus sur tous les types de contenu.</li> <li><strong>Implémentez des annonces natives</strong> pour concurrencer les annonces graphiques à l'aide de demandes d'annonces de multi-tailles, ce qui augmente la pression de la demande tout en offrant à vos lecteurs une expérience utilisateur optimale.</li> </ul> <h3 id="innovation:-proposez-les-produits-publicitaires-les-plus-attrayants">Innovation: proposez les produits publicitaires les plus attrayants</h3> <ul> <li><strong>implémentez des publicités sur les pages AMP auxiliaires</strong> pour générer des revenus supplémentaires:</li> <li><a href="/fr/documentation/examples/style-layout/carousel_ad/">Annonces dans un carrousel</a></li> <li><a href="/fr/documentation/examples/style-layout/lightbox_ad/">Annonces dans une lightbox</a></li> <li>... et <a href="/fr/documentation/examples/">plus</a></li> <li><strong>Implémentez de nouveaux formats d'annonces à vente directe</strong> pour équiper votre équipe de vente de produits publicitaires innovants à fort impact:</li> <li><a href="/fr/documentation/examples/components/amp-sticky-ad/">Annonces collantes</a></li> <li><a href="/fr/documentation/examples/components/amp-fx-flying-carpet/">Tapis volant</a></li> </ul> <h2 id="ressources-supplémentaires">Ressources supplémentaires</h2> <ul> <li><a href="/fr/documentation/examples/">Modèles d'annonces AMPHTML</a></li> <li><a href="/fr/documentation/components/amp-ad/">Démo: comment ajouter <code>amp-ad</code> à votre page AMP</a></li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/fr/documentation/guides-and-tutorials/stories/develop/monetization/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/fr/documentation/guides-and-tutorials/ads/develop/monetization/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/fr/documentation/guides-and-tutorials/email/develop/monetization/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>Commencer</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/"> <span>Créer votre page AMP</span> <span class="nav-link-lastword">HTML<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/basic_markup/"> Créer votre page AMP HTML </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/include_image/"> Include an image </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/presentation_layout/"> Modifier la présentation et la mise en page </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/prepare_for_discovery/"> Préparer votre page pour la détection et la distribution </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/create/publish/"> Final steps before publishing </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/"> <span>Convert HTML to</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/setting-up/"> Configuration </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/building-page/"> Créer une page HTML standard </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/resolving-errors/"> Résoudre les erreurs de validation </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/discoverable/"> Rendre votre page visible </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/converting/congratulations/"> Félicitations! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/"> <span>Add advanced AMP</span> <span class="nav-link-lastword">features<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/setting_up/"> Configuration </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/review_code/"> Révision du code de démarrage </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/adding_components/"> Ajout de composants AMP étendus </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/adding_carousels/"> Ajouter des carrousels </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/tracking_data/"> Suivi de l'engagement grâce aux analyses </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/navigating/"> Naviguer sur votre site </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/fonts/"> Ajout de polices </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/start/add_advanced/congratulations/"> Félicitations ! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Apprendre</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-actions-and-events/"> Actions et événements </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/common_attributes/"> Attributs d'élément communs </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Spécification HTML AMP</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/spec/amphtml/"> Spécification AMP HTML </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/spec/amp-boilerplate/"> Code du modèle AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/spec/release-schedule/"> Calendrier de publication AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/experimental/"> Activer les fonctionnalités expérimentales </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> Système de mise en page AMPHTML </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Flux de validation</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/validation-workflow/validate_amp/"> Valider les pages AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/validation-workflow/validation_errors/"> Erreurs de validation AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Caches AMP & CORS</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> Comment les pages AMP sont mises en cache </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-debugging/"> Déboguer les problèmes de cache AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-urls/"> Format d'URL du cache AMP et traitement des demandes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cors-requests/"> CORS avec AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/learn/combine-amp-pwa/"> Lien entre AMP et PWA </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>Développer</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/"> <span>Créer des pages AMP responsives</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/style_pages/"> CSS compatibles </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/control_layout/"> Mises en page compatibles </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/placeholders/"> Caractères de remplacement et solutions de secours </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/art_direction/"> Images interactives avec les attributs srcset, sizes et heights </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/responsive_design/"> Comment créer des pages AMP interactives </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/style_and_layout/custom_fonts/"> Comment ajouter des polices personnalisées </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> Ajouter des images et vidéos </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/third_party_components/"> Inclure du contenu tiers </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/iframes/"> Comment inclure les iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Animation et transition</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/animations/triggering_css_animations/"> Déclencher des animations et des transitions CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/animations/introduction_to_animations/"> Introduction aux animations complexes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item active level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/monetization/"> <span>Monetize your AMP pages</span> </a> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item active level-3" autoscroll> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/monetization/"> Comment générer rentabiliser votre page AMP avec des publicités </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/monetization/ads_vendors/"> Fournisseurs d'annonces </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/monetization/content_encryption/"> Comment protéger le contenu de votre abonnement avec le chiffrement côté client </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/"> <span>Create interactive AMP</span> <span class="nav-link-lastword">pages<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/prereqs-setup/"> Configuration </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/get-familiar/"> Initiation au code de démarrage </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/advanced-interactivity/"> Comment améliorer l'interactivité </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/remote-data/"> Comment travailler avec des données distantes </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/interactivity/wrapping-up/"> Résumé </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/login_requiring/login/"> Connexion </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/login_requiring/add_comment/"> Comment ajouter un commentaire </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/login_requiring/logout/"> Déconnexion </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/login_requiring/summary/"> Résumé </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/live_blog/"> Créer un blog en direct <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/develop/seatmap/"> Créer un plan de siège <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Intégrer</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/amp-in-pwa/"> Utiliser AMP comme source de données pour votre PWA </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/amp-to-pwa/"> Préchargez votre PWA depuis vos pages AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/integrate-with-apps/"> Intégrer AMP à votre application </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/embed-stories/"> Intégrer des stories dans des pages Web </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Optimiser et mesurer</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/publishing_checklist/"> Liste de contrôle de publication AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/explainer/"> Comment fonctionne un optimiseur AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Guide de l'optimisation AMP Node.js </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/"> <span>Configuration d'Analytics</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics-vendors/"> Analytics Vendors </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: principes de base </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/deep_dive_analytics/"> Deep dive into AMP analytics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/use_cases/"> Cas d'utilisation </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-managing-user-state/"> Gérer l'état des utilisateurs non authentifiés avec AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/signed-exchange/"> Fournir AMP à l'aide d'échanges signés </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/discovery/"> Rendre votre page visible </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/engagement/"> Comment améliorer l'engagement des utilisateurs </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/optimize_amp/"> Comment optimiser vos pages AMP hébergées </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/secure-pages/"> Comment rester à l'abri des attaques tierces </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp_to_pwa/"> Transformer votre site AMP en PWA <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-as-pwa/"> Accès hors ligne facile et performances améliorées </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/optimize-and-measure/tracking-engagement/"> Comment configurer des analyses basiques pour vos pages AMP <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/"> <span>Participer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/"> Comment contribuer </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/websites/"> Types de documentation </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/websites/"> Terminologie AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/websites/"> Formatting guides & tutorials </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/integrate-your-analytics-tools/"> Comment intégrer votre outil d'analyse à AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/fr/documentation/guides-and-tutorials/websites/contribute/translations/"> Contribute translations </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Ce site a évidemment été créé avec AMP !</div> <div class="-l"> <h5 class="-c">Suivez-nous</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Vue d'ensemble</h5> <ul class="-y"> <li class="-b"><a href="/fr/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Framework AMP</a></li> <li class="-b"><a href="/fr/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Cas d'utilisation</a></li> <li class="-b"><a href="/fr/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Exemples de réussite</a></li> <li class="-b"><a href="/fr/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Fonctionnalité</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Documents</h5> <ul class="-y"> <li class="-b"><a href="/fr/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Commencer</a></li> <li class="-b"><a href="/fr/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guides et tutoriels</a></li> <li class="-b"><a href="/fr/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Composants</a></li> <li class="-b"><a href="/fr/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Exemples</a></li> <li class="-b"><a href="/fr/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Modèles de conception</a></li> <li class="-b"><a href="/fr/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Outils</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Communauté</h5> <ul class="-y"> <li class="-b"><a href="/fr/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Plateformes et fournisseurs partenaires</a></li> <li class="-b"><a href="/fr/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Contribuer</a></li> <li class="-b"><a href="/fr/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Feuille de route</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Événements</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/fr/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">Matériaux de la marque AMP</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Guide de style</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Politique de confidentialité</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"guides-and-tutorials","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Fermer la fenêtre de consentement"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accepter l'utilisation de cookies">Compris !</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>