integration novueaux retours

cese.html

@@ -16,53 +16,92 @@
                 <a href="https://lustrac-en-transition.coop/" target="_blank"><img src="img/logo_scic-lustrac.png" alt="logo SCIC Quartier Rural en transition de Lustrac" /></a>
             </p>
             <p>organisent le séminaire</p>
-            <h1>&laquo; Vivre, Entreprendre et Investir en Milieu Rural &raquo;</h1>
-            <p>en partenariat avec le <a href="https://www.lecese.fr/" target="_blank"><img src="img/logo_cese_grand.png" alt="logo du CESE" /></a></p>
-            <p>et en présence de Mme la Ministre déléguée <br />
-            chargée des Collectivités Territoriales et de la Ruralité</p>
+            <h1>Vivre, Entreprendre et Investir en Milieu Rural</h1>
+            <div class="flex-box">
+                <div id="cese"><p>en partenariat avec le <a href="https://www.lecese.fr/" target="_blank"><img src="img/logo_cese_grand.png" alt="logo du CESE" /></a></p></div>
+                <div id="ministre"><p>et en présence de <span>M<sup>me</sup> Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</span></p></div>
+            </div>
             <p id="date">lundi 13 mars 2023 (13h30-19h)</p>
             <p id="adresse">9, place d’Iéna, 75016 Paris</p>
         </header>
         <div id="intro">
-            <a id="button" href="https://framaforms.org/vivre-en-milieu-rural-1676148073">Inscriptions jusqu'au 24 février 2023<br /><span>(80 places maximum en présentiel)</span></a>
+            <a class="button" href="https://framaforms.org/vivre-en-milieu-rural-1676148073">Inscrivez-vous avant le 24 février<br /><span>(80 places maximum en présentiel)</span></a>
 
-            <p>Aujourd’hui, <span class="extra-bold">Vivre, entreprendre et investir en milieu rural est plus que jamais difficile voire impossible dans nos Zones de Revitalisation Rurales</span> (ZRR).</p>
+            <p class="first">Aujourd’hui, <span class="extra-bold">Vivre, entreprendre et investir en milieu rural est plus que jamais difficile voire impossible dans nos Zones de Revitalisation Rurales</span> (ZRR).</p>
             <p><span class="extra-bold">Pour identifier les effets leviers sur les enjeux climatiques, écologiques et sociaux ainsi que les freins à lever pour faciliter cette transition vitale pour notre société</span>, un séminaire est organisé <span class="extra-bold">lundi 13 mars 2023 à 13h30</span>, en présence de la Ministre déléguée chargée des Collectivités territoriales et de la Ruralité, Mme Dominique FAURE, et du Président du CESE, M. Thierry BEAUDET.</p>
         </div>
         <div id="programme">
-            <h2>Programme prévisionnel</h2>
             <div class="flex-box">
                 <div class="column">
-                    <h3 id="evt1">13h30 : Ouverture des portes et accueil</h3>
+                    <h2>Programme prévisionnel</h2>
+
+                    <div class="clock-title">
+                        <img src="img/clock1.png" alt="horloge indiquant 13h30" />
+                        <h3>13h30 : Ouverture des portes et accueil</h3>
+                    </div>
 
-                    <h3 id="evt2">14h-14h15 : INTRODUCTION</h3>
+                    <div class="clock-title">
+                        <img src="img/clock2.png" alt="horloge indiquant 14h" />
+                        <h3>14h-14h15 : OUVERTURE</h3>
+                    </div>
                     <p>14h : Ouverture par M. Thierry Beaudet, Président du CESE<sup>1</sup></p>
-                    <p>14h05 : Présentation du séminaire par Mme Marie-Hélène Muller (Association TERA)</p>
-                    <p>14h10 : Introduction par Mme Dominique Faure, Ministre déléguée chargée des Collectivités Territoriales et de la Ruralité</p>
+                    <p>14h05 : Introduction par M<sup>me</sup> Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</p>
+                    <p>14h10 : Présentation du séminaire par M<sup>me</sup> Marie-Hélène Muller, Association TERA & M. Stéphane Bugat, journaliste</p>
 
-                    <h3 id="evt3">14h15-15h45 : 1ère Table ronde &laquo; VIVRE ET ENTREPRENDRE EN MILIEU RURAL &raquo; co-animée par Mme Marie-Hélène Muller, Association TERA & M. Stéphane Bugat, journaliste</h3>
-                    <p>Mme Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</p>
-                    <p>M. Pascal Mayol, Président du Groupe &laquo; Environnement et Nature &raquo; du CESE</p>
-                    <p>Mme Mélanie Tisserant-Berger, Présidente du Centre des Jeunes Dirigeants</p>
+                    <div class="clock-title">
+                        <img src="img/clock3.png" alt="horloge indiquant 14h15" />
+                        <h3>14h15-14h45 : 1<sup>ère</sup> Séquence &laquo; CONTEXTE ET ENJEUX EN MILIEU RURAL &raquo;</h3>
+                    </div>
+                    <p class="underline">Intervenants</p>
                     <p>M. Jean-Jacques Marty, Administrateur de l’Association des Maires Ruraux de France (AMRF<sup>2</sup>)</p>
-                    <p>Mme Alexia Noyon, Directrice Générale de l’association La Chartreuse de Neuville</p>
+                    <p>M. Bernard Delcros, sénateur, Président du parlement rural ou son représentant</p>
+                    <p>M. Pascal Mayol, Président du Groupe &laquo; Environnement et Nature &raquo; du CESE ou un intervenant du CESE</p>
+
+                    <div class="clock-title">
+                        <img src="img/clock4.png" alt="horloge indiquant 14h45" />
+                        <h3>14h45-15h45 : 2<sup>ème</sup> Séquence &laquo; VIVRE ET ENTREPRENDRE EN MILIEU RURAL &raquo;</h3>
+                    </div>
+                    <p class="underline">Témoins</p>
+                    <p>M<sup>me</sup> Marie-Hélène Muller, l’Écosystème Coopératif Territorial TERA, Référente de son conseil scientifique, Présidente SCIC SA QRTL</p>
+                    <p>M<sup>me</sup> Alexia Noyon, Association La Chartreuse de Neuville, Directrice Générale</p>
                     <p>M. Tarek Daher, Délégué général du mouvement des Régies de territoire</p>
+
+                    <a class="button" href="https://framaforms.org/vivre-en-milieu-rural-1676148073">Inscrivez-vous avant le 24 février<br /><span>(80 places maximum en présentiel)</span></a>
+                    <p id="inscriptions"><span class="extra-bold">Attention</span>, le nombre de places au Palais d’Iéna est <span class="extra-bold">limité à 80</span>, possibilité d'assister en <span class="extra-bold">visioconférence</span>.</p>
                 </div>
 
                 <div class="column">
-                    <h3 id="evt4">15h45-17h15 : 2ème Table ronde &laquo; INVESTIR EN MILIEU RURAL &raquo; co-animée par M. Frédéric Bosquet, Association TERA & M. Stéphane Bugat, journaliste</h3>
-                    <p>Mme Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</p>
-                    <p>M. Christophe Genter, Directeur du Département Cohésion Sociale et Territoriale de la Caisse des Dépôts et Consignations</p>
-                    <p>Mme Simone Saillant, Directrice du Programme Ruralité à l’ANCT (Agence Nationale de la Cohésion des Territoires)</p>
-                    <p>M. Mathieu Labonne, Président Directeur Généralde Coopérative OASIS</p>
-                    <p>Mme Marion Ben Hammo, Cheffe de projet Missions Transverses Fondation de France</p>
-                    <p>M. Jérôme Saddier, Président Crédit Coopératif, ESS France et Avise (En attente de confirmation)</p>
+                    <p class="underline">Intervenants</p>
+                    <p>M. Christian du Tertre : Directeur scientifique du laboratoire de recherche ATEMIS, membre du conseil scientifique de Tera</p>
+                    <p>M<sup>me</sup> Sophie Swaton, Chercheuse à l’Université de Lausanne, Fondatrice et Présidente de la Fondation Zoein</p>
+                    <p>M<sup>me</sup> Mélanie Tisserant-Berger, Présidente du Centre des Jeunes Dirigeants</p>
+                    <p>M<sup>me</sup> Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</p>
+
+                    <div class="clock-title">
+                        <img src="img/clock5.png" alt="horloge indiquant 15h45" />
+                        <h3>15h45-17h15 : 3<sup>ème</sup> Séquence &laquo; INVESTIR EN MILIEU RURAL &raquo;</h3>
+                    </div>
+                    <p class="underline">Témoins</p>
+                    <p>M. Mathieu Labonne, Président Directeur Général de Coopérative OASIS</p>
+                    <p>M<sup>me</sup> Marion Ben Hammo, responsable expérimentations et innovation sociale, Fondation de France</p>
+                    <p>M. Frédéric Bosqué, l’Écosystème Coopératif Territorial TERA, Fondateur, Directeur Général, SCIC SA QRTL</p>
+                    <p>M<sup>me</sup> Alexia Noyon, Association La Chartreuse de Neuville, Directrice Générale</p>
 
-                    <h3 id="evt5">17h15-17h30 : Clôture du séminaire, par M. Frédéric Bosqué, Association TERA</h3>
+                    <p class="underline">Intervenants</p>
+                    <p>M. Jérôme Saddier, Président du Crédit Coopératif, d'ESS France et de Bouge ton Coq</p>
+                    <p>M. Christophe Genter, Directeur du Département Cohésion Sociale et Territoriale de la Caisse des Dépôts et Consignations</p>
+                    <p>M<sup>me</sup> Simone Saillant, Directrice du Programme Ruralité à l’ANCT (Agence Nationale de la Cohésion des Territoires)</p>
+                    <p>M<sup>me</sup> Dominique Faure, Ministre déléguée chargée des Collectivités territoriales et de la Ruralité</p>
 
-                    <h3 id="evt6">17h30-18h45 : Buffet</h3>
+                    <div class="clock-title">
+                        <img src="img/clock6.png" alt="horloge indiquant 17h15" />
+                        <h3>17h15-17h30 : Conclusion et clôture du séminaire</h3>
+                    </div>
 
-                    <h3 id="evt7">18h45 : fin du séminaire</h3>
+                    <div class="clock-title">
+                        <img src="img/clock7.png" alt="horloge indiquant 17h30" />
+                        <h3>17h30-18h45 : Buffet</h3>
+                    </div>
 
                     <div id="notes">
                         <hr />
@@ -71,10 +110,6 @@
                     </div>
                 </div>
             </div>
-            <div id="inscriptions">
-                <p>Vous souhaitez participer à ce séminaire en présentiel au Palais d’Iéna à Paris ou bien à distance en visioconférence ? <span class="extra-bold">Merci de vous inscrire avant le 24 février</span> 2023 <a href="https://framaforms.org/vivre-en-milieu-rural-1676148073">ici</a></p>
-                <p>Attention, le nombre de places au Palais d’Iéna est <span class="extra-bold">limité à 80</span>.</p>
-            </div>
         </div>
     </body>
 </html>

style.css

@@ -7,6 +7,16 @@
   src: url(fonts/DIN-BLAA.otf);
   font-weight: bold;
 }
+@font-face {
+  font-family: din;
+  src: url(fonts/DIN-MEDA.otf);
+  font-weight: 600;
+}
+@font-face {
+  font-family: din;
+  src: url(fonts/DIN-LIGA.otf);
+  font-weight: 300;
+}
 
 @font-face {
   font-family: fira;
@@ -42,12 +52,21 @@ p {
     margin: 10px 0;
 }
 
+
+.flex-box {
+    display: flex;
+}
+
 .extra-bold {
     font-weight: 900;
 }
 
+.underline {
+    text-decoration: underline;
+}
+
 header {
-    padding-top: 40px;
+    padding: 40px 0;
     background-color: #dcf094;
     text-align: center;
     font-family: din;
@@ -55,14 +74,20 @@ header {
 
 header h1 {
     color: #e7580f;
-    margin: 15px 0 0 0;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
     font-size: 51px;
     font-weight: bold;
+    border-bottom: 2px solid #e7580f;
+    width: fit-content;
+    padding-bottom: 10px;
 }
 
 header p {
-    font-size: 36px;
-    line-height: 45px;
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 300;
 }
 
 header img {
@@ -70,10 +95,38 @@ header img {
     vertical-align: middle;
 }
 
+
+header .flex-box {
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0 6rem;
+}
+
+header .flex-box #cese {
+    width: fit-content;
+    text-align: right;
+    flex-shrink: 0;
+    margin-right: 20px;
+    line-height: 38px;
+}
+
+header .flex-box #ministre {
+    text-align: left;
+    flex-shrink: 3;
+    width: 40%;
+    line-height: 38px;
+}
+
+header .flex-box #ministre span {
+    font-weight: 600;
+}
+
 p#date {
     margin-top: 30px;
     margin-bottom: 0px;
     font-weight: bold;
+    font-size: 36px;
 }
 
 p#adresse {
@@ -81,54 +134,65 @@ p#adresse {
     margin-bottom: 0px;
     color: #e7580f;
     font-weight: bold;
+    font-size: 36px;
 }
 
 #intro {
-    padding: 440px 18rem 30px 8rem;
+    padding: 0 13rem 30px 8rem;
     background-color: #dcf094;
     font-size: 23px;
     line-height: 32px;
-    background: no-repeat top right url("img/fond.png");
+    background: no-repeat top 40px right url("img/fond.png");
     background-color: #dcf094;
     font-family: fira;
     letter-spacing: 1px;
 }
 
-#intro #button {
+.button {
     display: block;
-    padding: 10px 0;
-    margin: 0 0 100px 0;
-    width: 500px;
+    padding: 10px 30px;
+    width: fit-content;
     background-color: #e7580f;
     color: #fff;
     text-decoration: none;
     border-radius: 20px;
     box-shadow: 0 0 2px 0 #44a4be;
     text-align: center;
-    font-weight: bold;
-    font-size: 26px;
+    font-weight: 900;
+    font-size: 30px;
+    line-height: 32px;
+    letter-spacing: 1px;
 }
 
-#intro #button:hover {
+.button:hover {
     background-color: #e7824f;
     color: #fff;
 }
 
-#intro #button span {
-    font-size: 18px;
+.button span {
+    font-size: 20px;
+    line-height: 24px;
     font-weight: normal;
 }
 
+#intro .button {
+    margin: 0 0 520px 0;
+    position: absolute;
+    right: 46rem;
+}
+
 #intro p {
     margin-bottom: 30px;
 }
 
-#intro p:first-child {
-    padding-right: 5rem;
+#intro p.first {
+    padding-top: 600px;
+    padding-right: 22rem;
+    margin-top: 0;
 }
 
 #programme {
-    padding: 30px 9rem;
+    padding: 50px 9rem;
     background-color: #fff;
     font-family: fira;
 }
@@ -136,54 +200,40 @@ p#adresse {
 #programme h2 {
     color: #e7580f;
     font-size: 29px;
-    margin: 20px 0 0 0;
+    margin: 0;
     letter-spacing: 1px;
 }
 
+#programme .clock-title {
+    display: flex;
+    align-items: center;
+    margin: 10px 0 4px -40px;
+}
+
+#programme .clock-title img {
+    width: 31px;
+    height: 31px;
+    margin-right: 8px;
+}
+
 #programme h3 {
-    margin: 10px 0 0px -40px;
-    padding: 4px 0 4px 40px;
+    margin: 0;
     font-size: 18px;
     line-height: 26px;
     font-weight: 600;
 }
 
 #programme p {
-    margin: 0 0 8px 0;
+    margin: 0 0 6px 0;
     font-size: 18px;
     line-height: 23px;
 }
 
-#evt1 {
-    background: no-repeat top left url("img/clock1.png");
-}
-
-#evt2 {
-    background: no-repeat top left url("img/clock2.png");
+#programme p.underline {
+    margin-bottom: 2px;
 }
 
-#evt3 {
-    background: no-repeat top left url("img/clock3.png");
-}
-
-#evt4 {
-    background: no-repeat top left url("img/clock4.png");
-}
-
-#evt5 {
-    background: no-repeat top left url("img/clock5.png");
-}
-
-#evt6 {
-    background: no-repeat top left url("img/clock6.png");
-}
-
-#evt7 {
-    background: no-repeat top left url("img/clock7.png");
-}
-
-.flex-box {
-    display: flex;
+#programme .flex-box {
     justify-content: center;
 }
 
@@ -200,7 +250,7 @@ p#adresse {
 }
 
 #notes {
-    margin-top: 20px;
+    margin-top: 25px;
     color: #6acbe8;
     font-style: italic;
     font-size: 16px;
@@ -208,30 +258,30 @@ p#adresse {
 }
 
 #notes hr {
-  border-width: 0;
-  height: 2px;
-  color: #6acbe8;
-  background-color: #6acbe8;
-  width: 18%;
-  text-align: left;
-  margin-left: 0;
-  margin-bottom: 14px;
+    border-width: 0;
+    height: 2px;
+    color: #6acbe8;
+    background-color: #6acbe8;
+    width: 18%;
+    text-align: left;
+    margin-left: 0;
+    margin-bottom: 10px;
 }
 
-#inscriptions {
-    color: #e7580f; 
-    margin-top: 50px;
+#notes p {
+    margin-bottom: 0;
 }
 
-#inscriptions p {
+#programme .button {
+    margin: auto;
+    margin-top: 30px;
+}
+
+#programme #inscriptions {
     margin-bottom: 30px;
-    font-size: 23px;
+    font-size: 22px;
     line-height: 32px;
+    color: #e7580f; 
+    margin-top: 50px;
     letter-spacing: 1px;
-}
-
-#inscriptions a {
-    color: #e7580f;
-    font-size: 32px;
-    font-weight: 900;
 }