From 8d11e2d8287d4fa5693c16df3957b431a7cd40e9 Mon Sep 17 00:00:00 2001
From: Vincent Calame <vincent.calame@exemole.fr>
Date: Thu, 12 Dec 2019 19:57:12 +0100
Subject: [PATCH] Correction de <articles> en <article>

---
 css/perso-modif.css | 126 ++++++++++++++++++++++----------------------
 inclure/head.html   |   2 +-
 rubrique.html       |   8 +--
 sommaire.html       |  16 +++---
 4 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/css/perso-modif.css b/css/perso-modif.css
index fe7f0ac..d93742c 100644
--- a/css/perso-modif.css
+++ b/css/perso-modif.css
@@ -202,7 +202,7 @@ header p{
     background-position:bottom -240px right -50%, bottom -190px left 10%, bottom -230px center, center center;
     background-size: 800px, 800px, 650px, 100%;
 }
-.banniere articles {
+.banniere article {
     /*  ------- positionnement */
     grid-column-start: 1;
     grid-column-end: -1;
@@ -212,18 +212,18 @@ header p{
     padding-top: 100px;
     /*  ------- mise en forme */
 }
-.banniere articles h1{
+.banniere article h1{
     color:#fff;
     font-size: 35px;
 } 
-.banniere articles p{
+.banniere article p{
     /*  ------- positionnement */
     display: flex;
     justify-content: center;
     flex-direction: row;
     padding-top:20px;
 }
-.banniere articles a {
+.banniere article a {
     margin: 1rem 3rem 0 0;
     color:#fff;
     font-size: 11px;
@@ -235,12 +235,12 @@ header p{
     border-radius: 5px;
     box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
 }  
-.banniere articles a ~ a{
+.banniere article a ~ a{
     color:#2e5281;
     background-color: #fff;
     margin-right:0; 
 }
-.banniere articles a:hover{
+.banniere article a:hover{
     color:#fff;
     background-color: #ff5e00;
 }
@@ -253,7 +253,7 @@ header p{
     grid-template-columns: 10% 40% 40% 10%;
     /*  ------- mise en forme */
 }
-.presentation articles {
+.presentation article {
     /*  ------- positionnement */
     grid-row-start: 1;
     grid-row-end: -1;
@@ -262,18 +262,18 @@ header p{
     margin: 0 50px;
     /*  ------- mise en forme */   
 }
-.presentation articles + articles {
+.presentation article + article {
     /*  ------- positionnement */
     grid-row-start: 1;
     grid-row-end: -1;
     grid-column-start: 3;
     grid-column-end: 4;
 }
-.presentation articles h2{
+.presentation article h2{
     /*  ------- positionnement */
     padding: 3rem 0;
 }
-.presentation articles div p {
+.presentation article div p {
     /*  ------- positionnement */
 }
 .bouton-simple{
@@ -289,7 +289,7 @@ header p{
 articles div {
     margin-bottom: 1.5rem;
 }
-.presentation articles + articles .spip_out, .bouton-utilise {
+.presentation article + article .spip_out, .bouton-utilise {
      /*  ------- positionnement */
     display: block;
     max-width: 180px;
@@ -307,7 +307,7 @@ articles div {
     border-radius: 7px;
     padding: 0.7rem 1rem;
 }
-.presentation articles + articles .spip_out:hover, .bouton-utilise:hover{
+.presentation article + article .spip_out:hover, .bouton-utilise:hover{
     color:#fff;
     background-color: #ff5e00;
 }
@@ -337,7 +337,7 @@ articles div {
     /*  ------- mise en forme */
     text-align: center;
 }
-.derniers-services articles{ 
+.derniers-services article{ 
     /*  ------- positionnement */
     grid-row-start: 2;
     grid-row-end: 3;
@@ -351,7 +351,7 @@ articles div {
     border-top: 14px #b0cbe8 solid;
     box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
 }
-.derniers-services articles + articles{ 
+.derniers-services article + article{ 
     /*  ------- positionnement */
     grid-row-start: 2;
     grid-row-end: 3;
@@ -359,14 +359,14 @@ articles div {
     grid-column-end: 4;
     /*  ------- mise en forme */ 
 }
-.derniers-services articles + articles + articles{ 
+.derniers-services article + article + article{ 
     /*  ------- positionnement */
     grid-row-start: 3;
     grid-row-end: 4;
     grid-column-start: 2;
     grid-column-end: 3;
     /*  ------- mise en forme */ 
-}.derniers-services articles + articles + articles + articles{ 
+}.derniers-services article + article + article + article{ 
     /*  ------- positionnement */
     grid-row-start: 3;
     grid-row-end: 4;
@@ -425,7 +425,7 @@ articles div {
     flex-flow: row wrap;
     justify-content: space-between;
 }
-.master-rubrique .derniers-services articles {
+.master-rubrique .derniers-services article {
     width: 45%;
     margin: 1rem;
     /*  ------- mise en forme */
@@ -478,7 +478,7 @@ articles div {
     /*  ------- mise en forme */
     margin-bottom: 4rem;
 }
-.engagements articles{ 
+.engagements article{ 
     /*  ------- positionnement */
    grid-row-start: 1;
    grid-row-end: -1;
@@ -486,17 +486,17 @@ articles div {
    grid-column-end: 3;
    margin: 0 1rem;
 }
-.engagements articles + articles{ 
+.engagements article + article{ 
     /*  ------- positionnement */
    grid-column-start: 3;
    grid-column-end: 4;
 }
-.engagements articles + articles + articles{ 
+.engagements article + article + article{ 
     /*  ------- positionnement */
    grid-column-start: 4;
    grid-column-end: 5;
 }
-.engagements articles img {
+.engagements article img {
     margin: 0 auto 2rem;
     display: block;
     width: auto;
@@ -569,7 +569,7 @@ footer ul a:hover{
     grid-template-rows: 1fr;
     grid-template-columns: 15% 70% 15%;  
 }
-.contenu-texte articles {
+.contenu-texte article {
      /*  ------- positionnement */
     grid-row-start: 1;
     grid-row-end: -1;
@@ -630,10 +630,10 @@ padding-top: 10px;
     .banniere {
     background-position:bottom -240px right -1fr, bottom -190px left 10%, bottom -230px center, center center;
 }
-    .presentation articles {
+    .presentation article {
     margin: 0 25px;
 }
-    .derniers-services articles{ 
+    .derniers-services article{ 
     margin: 20px;
     }
 }
@@ -643,7 +643,7 @@ padding-top: 10px;
     .banniere {
     background-position:bottom -240px left 290%, bottom -190px left -50%, bottom -230px center, center center;
 }
-    .derniers-services articles{ 
+    .derniers-services article{ 
     margin: 10px;
     }
 header p {
@@ -748,10 +748,10 @@ header p {
     .presentation {
     grid-template-columns: 5% 45% 45% 5%;
 }
-    .presentation articles {
+    .presentation article {
     margin: 0 25px;
 }
-     .presentation articles + articles {
+     .presentation article + article {
     margin: 0 0 0 40px;
 }
     .derniers-services {
@@ -785,23 +785,23 @@ header p {
     grid-template-rows: 400px;
     background-position: bottom -290px right 60%, bottom -210px left -120%, bottom -270px center, center top;
 }
-.banniere articles {
+.banniere article {
     padding-top: 50px;
 }
-.banniere articles h1 {
+.banniere article h1 {
     color: #fff;
     margin: 0 2rem;
     text-align: center;
     line-height: 50px;
     font-size: 30px;
 }
-.banniere articles p {
+.banniere article p {
     padding-top: 20px;
 }
  .presentation {
     grid-template-columns: 7% 86% 7%;
 }
-.presentation articles {
+.presentation article {
     grid-row-start: 1;
     grid-row-end: 2;
     grid-column-start: 2;
@@ -813,7 +813,7 @@ header p {
     background-position:bottom 0px center;
     background-size: 1fr;
 }
-  .presentation articles + articles {
+  .presentation article + article {
     grid-row-start: 2;
     grid-row-end: -1;
     grid-column-start: 2;
@@ -829,19 +829,19 @@ header p {
     column-gap: 1rem;
     row-gap: 1rem;
 }
-    .presentation articles h2 {
+    .presentation article h2 {
     grid-row-start: 1;
     grid-row-end: 2;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    .presentation articles + articles h2 {
+    .presentation article + article h2 {
     padding: 1rem 0 3rem;
 }
     .presentation blockquote.postscriptum p {
     padding: 0.5rem 0rem 5rem;
 }
-    articles div {
+    article div {
     /*  ------- positionnement ----------- */
     grid-row-start: 2;
     grid-row-end: 3;
@@ -852,28 +852,28 @@ header p {
     border-radius: 5px;
     padding: 1rem;
 }
-    articles div + div {
+    article div + div {
     /*  ------- positionnement ----------- */
     grid-row-start: 2;
     grid-row-end: 3;
     grid-column-start: 2;
     grid-column-end: -1;
 }
-    articles div + div + div{
+    article div + div + div{
     /*  ------- positionnement ----------- */
     grid-row-start: 3;
     grid-row-end: 4;
     grid-column-start: 1;
     grid-column-end: 2;
 }
-    .presentation articles + articles .postscriptum {
+    .presentation article + article .postscriptum {
     /*  ------- positionnement SI contenu présent----------- */
     grid-row-start: 3;
     grid-row-end: 4;
     grid-column-start: 2;
     grid-column-end: -1;
 }
-    .presentation articles + articles .bouton-simple {
+    .presentation article + article .bouton-simple {
     grid-row-start: 4;
     grid-row-end: -1;
     grid-column-start: 1;
@@ -892,11 +892,11 @@ header p {
     min-width: 250px;
     max-width: 300px;
 }
-    .presentation articles + articles .bouton-simple:hover {
+    .presentation article + article .bouton-simple:hover {
     color: #fff;
     background-color: #ff5e00;
 }
-    .presentation articles + articles .spip_out, .bouton-utilise {
+    .presentation article + article .spip_out, .bouton-utilise {
     max-width: 180px;
     padding: 0.7rem;
 }
@@ -905,25 +905,25 @@ header p {
     grid-template-columns: 1fr;   
     margin: 2rem 0rem 1rem;
 }
-    .derniers-services articles  {
+    .derniers-services article  {
     grid-row-start: 2;
     grid-row-end: 3;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    .derniers-services articles + articles {
+    .derniers-services article + article {
     grid-row-start: 3;
     grid-row-end: 4;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    .derniers-services articles + articles + articles {
+    .derniers-services article + article + article {
     grid-row-start: 4;
     grid-row-end: 5;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    .derniers-services articles + articles + articles + articles {
+    .derniers-services article + article + article + article {
     grid-row-start: 5;
     grid-row-end: 6;
     grid-column-start: 1;
@@ -937,27 +937,27 @@ header p {
     .derniers-services img {
     width: 70%;
 }
-    .derniers-services articles {
+    .derniers-services article {
     margin: 2rem 4rem;
 }
     .engagements {
     grid-template-rows: 1fr 1fr 1fr;
     grid-template-columns: 1fr;
 }
-    .engagements articles {
+    .engagements article {
     grid-row-start: 1;
     grid-row-end: 2;
     grid-column-start: 1;
     grid-column-end: -1;
     margin: 3rem 5rem 0.5rem;
 }
-    .engagements articles +  articles {
+    .engagements article +  article {
     grid-row-start: 2;
     grid-row-end: 3;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    .engagements articles +  articles +  articles{
+    .engagements article +  article +  article{
     grid-row-start: 3;
     grid-row-end: -1;
     grid-column-start: 1;
@@ -970,7 +970,7 @@ header p {
  .master-rubrique .tous-les-services {
     flex-flow: column wrap;
 }
-.master-rubrique .derniers-services articles {
+.master-rubrique .derniers-services article {
    width: initial;
 }
 }
@@ -1009,16 +1009,16 @@ header p {
 background-position: bottom -290px right 100%, bottom -180px left -20%, bottom -190px center, center center;
 background-size: 700px, 700px, 550px, 400%;
 }
-    .banniere articles a {
+    .banniere article a {
     margin: 1rem 1rem 0 0;
     }
-    .presentation articles h2 {
+    .presentation article h2 {
     text-align: center;
 }
-    .presentation articles + articles .spip_out, .bouton-utilise {
+    .presentation article + article .spip_out, .bouton-utilise {
     margin: 1rem auto 0rem;
 }
-    .presentation articles + articles .bouton-simple, .derniers-services .bouton-appel {
+    .presentation article + article .bouton-simple, .derniers-services .bouton-appel {
     padding: 1rem 0.1rem;
 }
     .bouton-simple {
@@ -1035,10 +1035,10 @@ background-size: 700px, 700px, 550px, 400%;
      border-color: #ff5e00;
      color: #fff;   
 }
-    .presentation articles {
+    .presentation article {
     background-size: 170%;
 }
-    .presentation articles + articles {
+    .presentation article + article {
     grid-template-rows: 100px 140px 140px 140px 190px;
     grid-template-columns: 1fr;
     background-repeat:no-repeat;
@@ -1047,45 +1047,45 @@ background-size: 700px, 700px, 550px, 400%;
     row-gap: 1rem;
     column-gap: 0rem;
 }
-    .presentation articles h2 {
+    .presentation article h2 {
     grid-row-start: 1;
     grid-row-end: 2;
     grid-column-start: 1;
     grid-column-end: -1;
 }
-    articles div {
+    article div {
     grid-row-start: 2;
     grid-row-end: 3;
     grid-column-start: 1;
     grid-column-end:-1;
     text-align: center;
 }
-    articles div + div {
+    article div + div {
     grid-row-start: 3;
     grid-row-end: 4;
     grid-column-start: 1;
     grid-column-end:-1;
 }
-    articles div + div {
+    article div + div {
     grid-row-start: 4;
     grid-row-end: 5;
     grid-column-start: 1;
     grid-column-end:-1;
 }
- .presentation articles + articles .bouton-simple {
+ .presentation article + article .bouton-simple {
     grid-row-start: 5;
     grid-row-end: -1;
     grid-column-start: 1;
     grid-column-end: -1;
 }
         
-  .derniers-services articles {
+  .derniers-services article {
     margin: 1rem 2rem;
 }
    .derniers-services .bouton-utilise {
     margin: 1rem auto 1.5rem;
 }
-    .engagements articles {
+    .engagements article {
     margin: 3rem 2rem 0.5rem;
 }
     footer {
diff --git a/inclure/head.html b/inclure/head.html
index 6b8869d..81d37ab 100644
--- a/inclure/head.html
+++ b/inclure/head.html
@@ -4,6 +4,6 @@
 [(#REM) 2. appel du nom de site avec filtre ]
 <meta name="description" content="[(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)]"/>
 [(#REM) Feuilles de style perso]   
-<link href="#CHEMIN{css/perso.css}" rel="stylesheet"  type="text/css" />
+<link href="#CHEMIN{css/perso-modif.css}" rel="stylesheet"  type="text/css" />
 <link rel="shortcut icon" href="#CHEMIN{css/favicon.ico}" type="image/x-icon">
 <link href="#CHEMIN{css/ajout.css}" rel="stylesheet"  type="text/css" />
diff --git a/rubrique.html b/rubrique.html
index 373ff34..a5b6780 100644
--- a/rubrique.html
+++ b/rubrique.html
@@ -16,9 +16,9 @@
                 <h1 class="sous-titre">#TITRE</h1>
                 <div class="tous-les-services">
                 <BOUCLES_articles (ARTICLES) {id_rubrique}{par num titre}>
-                <articles>
+                <article>
                     <h2>#TITRE</h2> #LOGO_ARTICLE #TEXTE <a class="bouton-utilise" href="#URL_SITE">#NOM_SITE</a> <blockquote class="postscriptum">#PS</blockquote>
-                </articles>
+                </article>
                 </BOUCLES_articles>
                 </div>
             
@@ -26,8 +26,8 @@
         <div class="engagements">
         [(#REM) inclure les 3 engagements ]
               <BOUCLES_trois-engagements (ARTICLES) {id_rubrique=10}{0,3}{par num titre}>
-                    <articles>#LOGO_ARTICLE <h2>#TITRE</h2> #CHAPO <a class="bouton-simple" href="#URL_SITE">#NOM_SITE</a>
-                </articles>
+                    <article>#LOGO_ARTICLE <h2>#TITRE</h2> #CHAPO <a class="bouton-simple" href="#URL_SITE">#NOM_SITE</a>
+                </article>
               </BOUCLES_trois-engagements>
          </div>
          [(#REM) inclure le footer ]
diff --git a/sommaire.html b/sommaire.html
index b868a0c..0f3c9af 100644
--- a/sommaire.html
+++ b/sommaire.html
@@ -13,8 +13,8 @@
         <div class="banniere">
             <BOUCLES_banniere (RUBRIQUES) {id_rubrique=8}>
                 <BOUCLES_accroche (ARTICLES) {id_rubrique}>
-                    <articles><h1>#TITRE</h1> #TEXTE
-                    </articles>
+                    <article><h1>#TITRE</h1> #TEXTE
+                    </article>
                 </BOUCLES_accroche>
             </BOUCLES_banniere>
         </div>
@@ -22,9 +22,9 @@
         <div class="presentation">
         <BOUCLES_introduction (RUBRIQUES) {id_rubrique=1}>
             <BOUCLES_intro-texte (ARTICLES) {id_rubrique} {par date}{0,4}>
-                <articles><h2>#TITRE</h2> 
+                <article><h2>#TITRE</h2> 
                     #TEXTE <a class="bouton-simple" href="#URL_SITE">#NOM_SITE</a> <blockquote class="postscriptum">#PS</blockquote>
-                </articles>
+                </article>
             </BOUCLES_intro-texte>
         </BOUCLES_introduction>
         </div>
@@ -33,8 +33,8 @@
         <BOUCLES_rubrique (RUBRIQUES) {id_rubrique=3} >
             <h2 class="sous-titre">Les derniers #TITRE</h2>
             <BOUCLES_derniers_services (ARTICLES) {id_rubrique} {!par date}{0,4}>
-                <articles><h3>#TITRE</h3> #TEXTE #LOGO_ARTICLE <a class="bouton-utilise" href="#URL_SITE">#NOM_SITE</a> <blockquote class="postscriptum">#PS</blockquote>
-                </articles>
+                <article><h3>#TITRE</h3> #TEXTE #LOGO_ARTICLE <a class="bouton-utilise" href="#URL_SITE">#NOM_SITE</a> <blockquote class="postscriptum">#PS</blockquote>
+                </article>
             </BOUCLES_derniers_services>
         </BOUCLES_rubrique>
         [(#REM) inclure le bouton d'appel vers service ]
@@ -43,8 +43,8 @@
         <div class="engagements">        
         [(#REM) inclure les 3 engagements ]
                 <BOUCLES_trois-engagements (ARTICLES) {id_rubrique=10}{0,3}{par num titre}>
-                    <articles>#LOGO_ARTICLE <h2>#TITRE</h2> #CHAPO <a class="bouton-simple" href="#URL_SITE">#NOM_SITE</a>
-                </articles>
+                    <article>#LOGO_ARTICLE <h2>#TITRE</h2> #CHAPO <a class="bouton-simple" href="#URL_SITE">#NOM_SITE</a>
+                </article>
                 </BOUCLES_trois-engagements>
          </div>    
     [(#REM) inlcure le footer]