diff --git a/static/src/css/ethikis_survey.css b/static/src/css/ethikis_survey.css
index c19106e9b09754c14c5deb3493dd25f77e3975ba..afb40d9939cf129ff0f31ddc0e687ade7a172feb 100644
--- a/static/src/css/ethikis_survey.css
+++ b/static/src/css/ethikis_survey.css
@@ -1,6 +1,40 @@
/* © 2020 Le Filament (<http://www.le-filament.com>)
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). */
+#wrapwrap {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-attachment: fixed;
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ width: 100%;
+ min-height: 100%;
+}
+
+#wrapwrap header {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+#wrapwrap main {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 0 auto;
+ flex: 1 0 auto;
+ display: grid;
+}
+
+#wrapwrap footer {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
.ethikis-survey {
font-family: 'Montserrat', sans-serif;
padding: 20px;
diff --git a/templates/layout.xml b/templates/layout.xml
index 08dfe674aaef807353e1d8d85a32867802b2f776..49903b5a59e11c3e6f246010d0a22d0ccf435052 100644
--- a/templates/layout.xml
+++ b/templates/layout.xml
@@ -8,52 +8,53 @@
<!-- remplace le body pour supprimer le header et ajouter le footer -->
<xpath expr="//body" position="replace">
<body>
- <header>
- </header>
- <main>
- <t t-set="title">Longtime | Ethikis</t>
- <t t-raw="0"/>
- </main>
- <footer>
- <div class="ethikis-footer">
- <div class="container">
- <div class="row text-white">
- <div class="col-4 my-auto">
- <div class="pb-4 pt-4">
- <span><a href="https://longtimelabel.com">Le label LONGTIME®</a></span>
- <br/>
- <span><a href="https://longtimelabel.com/annuaire-des-produits-longtime/">Annuaire des produits</a></span>
- <br/>
- <span><a href="https://longtimelabel.com/pourquoi-choisir-longtime/">Pourquoi choisir des produits labellisés ?</a></span>
- <br/>
- <span><a href="https://longtimelabel.com/comment-obtenir-le-label/">Comment obtenir le label ?</a></span>
- <br/>
- <span><a href="https://longtimelabel.com/qui-sommes-nous/">Qui sommes-nous ?</a></span>
+ <div id="wrapwrap">
+ <header>
+ </header>
+ <main>
+ <t t-set="title">Longtime | Ethikis</t>
+ <t t-raw="0"/>
+ </main>
+ <footer>
+ <div class="ethikis-footer">
+ <div class="container">
+ <div class="row text-white">
+ <div class="col-4 my-auto">
+ <div class="pb-4 pt-4">
+ <span><a href="https://longtimelabel.com">Le label LONGTIME®</a></span>
+ <br/>
+ <span><a href="https://longtimelabel.com/annuaire-des-produits-longtime/">Annuaire des produits</a></span>
+ <br/>
+ <span><a href="https://longtimelabel.com/pourquoi-choisir-longtime/">Pourquoi choisir des produits labellisés ?</a></span>
+ <br/>
+ <span><a href="https://longtimelabel.com/comment-obtenir-le-label/">Comment obtenir le label ?</a></span>
+ <br/>
+ <span><a href="https://longtimelabel.com/qui-sommes-nous/">Qui sommes-nous ?</a></span>
+ </div>
</div>
- </div>
- <div class="col-4 my-auto">
- <div class="pb-4 pt-4 text-center">
- <h5>Suivez-nous sur les réseaux</h5>
- <a href="https://www.facebook.com/LongtimeEthikis/" class="fa fa-facebook"/>
- <a href="https://twitter.com/Ethikis1" class="fa fa-twitter"/>
- <a href="https://www.instagram.com/ethikis.civis/" class="fa fa-instagram"/>
- <a href="https://www.linkedin.com/company/18599056/"
- class="fa fa-linkedin"/>
- <div class="text-center pt-5" itemscope="itemscope" itemtype="https://schema.org/Organization">
- Copyright &copy; <span t-field="res_company.name" itemprop="name">Company name</span>
+ <div class="col-4 my-auto">
+ <div class="pb-4 pt-4 text-center">
+ <h5>Suivez-nous sur les réseaux</h5>
+ <a href="https://www.facebook.com/LongtimeEthikis/" class="fa fa-facebook"/>
+ <a href="https://twitter.com/Ethikis1" class="fa fa-twitter"/>
+ <a href="https://www.instagram.com/ethikis.civis/" class="fa fa-instagram"/>
+ <a href="https://www.linkedin.com/company/18599056/"
+ class="fa fa-linkedin"/>
+ <div class="text-center pt-5" itemscope="itemscope" itemtype="https://schema.org/Organization">
+ Copyright &copy; <span t-field="res_company.name" itemprop="name">Company name</span>
+ </div>
</div>
</div>
- </div>
- <div class="col-4 my-auto">
- <div class="pb-4 pt-4 text-center">
- <h5>Newsletter</h5>
- <span>Recevez les nouvelles du label</span>
+ <div class="col-4 my-auto">
+ <div class="pb-4 pt-4 text-center">
+ <h5><a href="https://longtimelabel.com/contact-longtime/">Contactez-nous</a></h5>
+ </div>
</div>
</div>
</div>
</div>
- </div>
- </footer>
+ </footer>
+ </div>
</body>
</xpath>