diff --git a/css/perso-modif.css b/css/perso-modif.css
new file mode 100644
index 0000000..fe7f0ac
--- /dev/null
+++ b/css/perso-modif.css
@@ -0,0 +1,1109 @@
+/* 
+ squelette Name: Chatons
+ Author:         Antoine Bardelli
+ Author URI:     https://bardelli.fr
+ License:        Code : GNU General Public License v3 or later
+ License URI:    http://www.gnu.org/licenses/gpl-3.0.html
+ Description:    un thème pour Chapril.org
+ Spip Version: SPIP 3.2.4 - 8 avril 2019.
+*/
+
+
+
+/*  ----------- CHARTE COULEURS 
+
+BLEU
+                    #153A6A |   Bleu foncé menu mobile
+rgb(46,82,129)   |  #2e5281 |   Bleu roi April
+rgb(102,170,238)  |  #66aaee  |   Bleu ciel
+rgb(176,203,232)  |  #b0cbe8  |  Bleu gris ciel 
+rgb(151,176,198)  |  #416687  |  Bleu gris ciel foncé
+rgb(91,198,242)    |  #5bc6f2  |  Bleu electrique
+
+rgb(95,95,95)  |  #5f5f5f |  Couleur du texte courant
+
+rgb(255,94,0)  |  #ff5e00  |  rolover
+rgb(255,151,89)  |  #ff9759  |  rolover bannière et fond foncé
+
+rgb(247,247,249)  |  #f7f7f9 |  fond de page
+
+rgb(0,81,132)  |  #005184  |  couleur des ombrage +- rayon 25%, opacité 15%
+
+degrade de l'appel d'acceuil en svg
+A rgb(24,120,195)
+B rgb(83,140,232)
+C rgb(129,193,255)
+-------------------- */
+/*  ------- FONT-dejavu-roman-italique-bold------- */
+@font-face {
+    font-family: 'dejavu_sanscondensed';
+    src: url('webfonts/DejaVuSansCondensed-webfont.eot');
+    src: url('webfonts/DejaVuSansCondensed-webfont.eot?#iefix') format('embedded-opentype'),
+         url('webfonts/DejaVuSansCondensed-webfont.woff') format('woff'),
+         url('webfonts/DejaVuSansCondensed-webfont.svg#dejavu_sanscondensed') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'dejavu_sanscondensed_oblique';
+    src: url('webfonts/DejaVuSansCondensed-Oblique-webfont.eot');
+    src: url('webfonts/DejaVuSansCondensed-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
+         url('webfonts/DejaVuSansCondensed-Oblique-webfont.woff') format('woff'),
+         url('webfonts/DejaVuSansCondensed-Oblique-webfont.svg#dejavu_sanscondensed_oblique') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'dejavu_sanscondensed_bold';
+    src: url('webfonts/DejaVuSansCondensed-Bold-webfont.eot');
+    src: url('webfonts/DejaVuSansCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('webfonts/DejaVuSansCondensed-Bold-webfont.woff') format('woff'),
+         url('webfonts/DejaVuSansCondensed-Bold-webfont.svg#dejavu_sanscondensed_bold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+/*  ------- RESET SPIP----------- */
+*{
+    margin:0px;
+    padding:0px;
+}
+a {
+    text-decoration: none;
+    color:#2e5281;
+}
+a:hover {
+    color:#ff5e00;
+}
+a:active {
+    color:#5bc6f2;
+}
+/*  ------- STYLE GÉNÉRIQUES----------- */
+body {
+    font-family: 'dejavu_sanscondensed', sans-serif;
+    color: #5f5f5f;
+    background-color: #f7f7f9;
+}
+p, li {
+    font-size: 14px;
+    line-height: 24px;
+}
+
+h1, h2, h3, H4{
+        color: #2e5281;
+        font-weight: normal;
+}
+h1 {
+    font-size: 32px;
+}
+h2 {
+    font-size: 24px;
+}
+h3 {
+    font-size: 21px;
+}
+H4 {
+    font-size: 19px;
+}
+a[href*] {
+    color: #2e5281;
+}
+
+/*  ------- HEADER ----------- */
+
+header {
+     /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 75px;
+    grid-template-columns: 15% 70% 15%;
+    background-color: rgb(0,81,132);
+    color: #fff;
+}
+header > a{
+     /*  ------- positionnement logo april */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    justify-self: flex-end;
+    align-self: center;
+    margin: 10px;
+    /*  ------- mise en forme */
+}
+header .spip_logos {
+    width: auto;
+    height: 45px;
+}
+
+/*  ------- MENU DEKSTOP ----------- */
+
+#navigation {
+     /*  ------- positionnement enfant*/
+    grid-column-start: 2;
+    grid-column-end: 3;
+    /*  ------- mise en forme */
+    list-style-type: none;
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 1px;
+      /*  ------- positionnement parent */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0,1fr));
+    justify-items: center;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    margin-right: 6rem;
+}
+header #navigation a {
+text-align: center;
+}
+/*  ------- MENU  MOBILE 1/2 ----------- */
+.menu-mobile-ouvre {
+    display: none;
+}
+.menu-mobile-ferme{
+    display: none;
+}
+header p {
+     /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 3;
+    grid-column-end: -1;
+    justify-self: flex-end;
+    align-self: center;
+    padding-right: 2rem;
+    /*  ------- mise en forme */
+}
+header nav a{
+    color: #fff;
+}
+header a:hover{
+    color: #ff9759;
+}
+header p{
+    /*  ------- positionnement */
+    margin: 0 10px 0 0;
+    /*  ------- mise en forme */
+    color:#e2edf9;
+    font-size: 11px;
+    line-height: 15px;
+}
+/*  -------  Accueil - BANNIERE ----------- */
+
+.banniere {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 440px;
+    grid-template-columns: 1fr;
+    /*  ------- mise en forme */
+   background:url("../img/bann-2-ecrans.png"), url("../img/bann-3-ecrans.png"),url("../img/bann-fond.png"), linear-gradient(to right, rgb(24,120,195), rgb(83,140,232), rgb(129,193,255));
+    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
+    background-position:bottom -240px right -50%, bottom -190px left 10%, bottom -230px center, center center;
+    background-size: 800px, 800px, 650px, 100%;
+}
+.banniere articles {
+    /*  ------- positionnement */
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row-start: 1;
+    grid-row-end: -1;
+    justify-self: center;
+    padding-top: 100px;
+    /*  ------- mise en forme */
+}
+.banniere articles h1{
+    color:#fff;
+    font-size: 35px;
+} 
+.banniere articles p{
+    /*  ------- positionnement */
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    padding-top:20px;
+}
+.banniere articles a {
+    margin: 1rem 3rem 0 0;
+    color:#fff;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: 'dejavu_sanscondensed_bold';
+    padding: 0.3rem 1rem;
+    background-color: #2e5281;
+    border-radius: 5px;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+}  
+.banniere articles a ~ a{
+    color:#2e5281;
+    background-color: #fff;
+    margin-right:0; 
+}
+.banniere articles a:hover{
+    color:#fff;
+    background-color: #ff5e00;
+}
+/*  ------- Accueil - presentation ----------- */
+
+.presentation {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 10% 40% 40% 10%;
+    /*  ------- mise en forme */
+}
+.presentation articles {
+    /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin: 0 50px;
+    /*  ------- mise en forme */   
+}
+.presentation articles + articles {
+    /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 3;
+    grid-column-end: 4;
+}
+.presentation articles h2{
+    /*  ------- positionnement */
+    padding: 3rem 0;
+}
+.presentation articles div p {
+    /*  ------- positionnement */
+}
+.bouton-simple{
+    text-transform: uppercase;
+    font-size: 13px;
+    font-family: 'dejavu_sanscondensed';
+    letter-spacing: 1px;
+    padding: 10px 0;
+    margin: 1rem 0;
+    display: block;
+    color: #416687;
+}
+articles div {
+    margin-bottom: 1.5rem;
+}
+.presentation articles + articles .spip_out, .bouton-utilise {
+     /*  ------- positionnement */
+    display: block;
+    max-width: 180px;
+    min-width: 100px;
+    margin-top: 0.7rem;
+    /*  ------- mise en forme */
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: 'dejavu_sanscondensed_bold';
+    background-color: #2e5281;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+    border-radius: 7px;
+    padding: 0.7rem 1rem;
+}
+.presentation articles + articles .spip_out:hover, .bouton-utilise:hover{
+    color:#fff;
+    background-color: #ff5e00;
+}
+.presentation blockquote.postscriptum p {
+    font-family: dejavu_sanscondensed_oblique;
+    font-size: 12px;
+    line-height: 17px;
+    margin: 0;
+    padding: 0.5rem 0rem;
+}
+
+/*  ------- Accueil - services ----------- */
+
+.derniers-services {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 10% 40% 40% 10%;
+    margin:4rem 0;
+}
+.sous-titre{
+    /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: -1;
+    /*  ------- mise en forme */
+    text-align: center;
+}
+.derniers-services articles{ 
+    /*  ------- positionnement */
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin: 20px 40px;
+    /*  ------- mise en forme */
+    text-align: center;
+    background-color: #fff;
+    border-radius: 8px;
+    border-top: 14px #b0cbe8 solid;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+}
+.derniers-services articles + articles{ 
+    /*  ------- positionnement */
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 3;
+    grid-column-end: 4;
+    /*  ------- mise en forme */ 
+}
+.derniers-services articles + articles + articles{ 
+    /*  ------- 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{ 
+    /*  ------- positionnement */
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 3;
+    grid-column-end: 4;
+    /*  ------- mise en forme */ 
+}
+.derniers-services .bouton-appel{ 
+    /*  ------- positionnement */
+    grid-column-start: 1;
+    grid-column-end: -1;
+    margin: 5rem auto;
+    /*  ------- mise en forme */ 
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: 'dejavu_sanscondensed_bold';
+    background-color: #2e5281;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+    border-radius: 10px;
+    padding: 1.2rem 2.5rem;
+    min-width: 250px;
+    max-width: 300px;
+}
+.derniers-services blockquote.postscriptum p {
+    font-family: 'dejavu_sanscondensed_oblique';
+    font-size: 12px;
+    line-height: 17px;
+    padding: 0.5rem 1rem 1rem;
+}
+/*  ------- pages services ------------------ */
+
+.master-rubrique .derniers-services {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 10% 80% 10%;
+    margin: 4rem 0;
+}
+.master-rubrique .sous-titre {
+    /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+.master-rubrique .tous-les-services {
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    /*  ------- positionnement enfants  - flux de services */
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+.master-rubrique .derniers-services articles {
+    width: 45%;
+    margin: 1rem;
+    /*  ------- mise en forme */
+    text-align: center;
+    background-color: #fff;
+    border-radius: 8px;
+    border-top: 14px #b0cbe8 solid;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+}
+.master-rubrique .derniers-services h2 {
+    padding: 1rem 0;
+    height: 2rem;
+}
+/*  ------- pages services ----------- */
+
+.derniers-services .bouton-appel:hover{ 
+    color:#fff;
+    background-color: #ff5e00;
+}
+.derniers-services h2, .derniers-services h1{
+    text-transform: lowercase;
+    height: 4rem;
+}
+.derniers-services h2::first-letter, .derniers-services h1::first-letter {
+    text-transform: uppercase;
+}
+.derniers-services h3 {
+    text-align: center;
+    margin: 2rem auto 0.7rem;
+}
+.derniers-services p {
+    text-align: left;
+    padding: 1rem;
+}
+.derniers-services img {
+    width: 90%;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+    height: auto;
+    margin: 0.5rem auto;
+}
+.derniers-services .bouton-utilise{
+   max-width: 120px;
+   margin: 1rem 1rem 1.5rem;
+}
+.engagements {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 10% 26.6666666% 26.6666666% 26.6666666% 10%;
+    /*  ------- mise en forme */
+    margin-bottom: 4rem;
+}
+.engagements articles{ 
+    /*  ------- positionnement */
+   grid-row-start: 1;
+   grid-row-end: -1;
+   grid-column-start: 2;
+   grid-column-end: 3;
+   margin: 0 1rem;
+}
+.engagements articles + articles{ 
+    /*  ------- positionnement */
+   grid-column-start: 3;
+   grid-column-end: 4;
+}
+.engagements articles + articles + articles{ 
+    /*  ------- positionnement */
+   grid-column-start: 4;
+   grid-column-end: 5;
+}
+.engagements articles img {
+    margin: 0 auto 2rem;
+    display: block;
+    width: auto;
+    height: 60px;
+}
+.engagements h2 {
+    padding-bottom: 1.5rem;
+    text-align: center;
+}
+/*  ------- footer ----------- */
+
+footer {
+    /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 80px;
+    grid-template-columns: 15% 42.5% 42.5%;
+    /*  ------- mise en forme */
+    background-color: rgb(0,81,132);
+    color: #fff;
+    margin-top: 6rem;
+}
+footer ul{
+     /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    align-self: center;
+    /*  ------- mise en forme */
+    list-style-type: none;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px
+}
+footer .signature-april{
+     /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 3;
+    grid-column-end: -1;
+    justify-self: flex-end;
+    align-self: center;
+    display:flex;
+    /*  ------- mise en forme */
+    margin-right: right;
+    height: 20px;
+}
+.signature-april p{
+    font-size: 11px;
+    line-height: 30px;
+}
+footer img{
+    margin: 0 2rem 0 1rem;
+    width: auto;
+    height: 30px;
+}
+footer ul a{
+    color: #fff;
+    font-size: 10px;
+}
+footer ul a:hover{
+    color: #ff9759;
+}
+
+/*  ------- conditions-d-utilisation ----------- */
+
+.contenu-texte{
+  /*  ------- positionnement */
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 15% 70% 15%;  
+}
+.contenu-texte articles {
+     /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    /*  ------- mise en forme */
+}
+.contenu-texte h1 {
+     /*  ------- positionnement */
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    /*  ------- mise en forme */
+    margin:4rem 0 0;
+}
+.contenu-texte h3{
+    margin: 3rem 0 1rem;
+}
+.contenu-texte strong {
+    margin: 2rem 0 0.5rem;
+    display: block;
+    font-size: 17px;
+    color: #2e5281;
+    font-family: 'dejavu_sanscondensed';
+}
+.contenu-texte ul {
+    list-style: none;
+    padding-left: 20px;
+}
+.contenu-texte li {
+    list-style-image: url("../img/fleche.png");
+    list-style-position: inside;
+    text-indent: -20px;
+    padding: 4px 0;
+}
+.contenu-texte li:first-child {
+padding-top: 10px;
+}
+
+.contenu-texte .suitedarticles {
+     /*  ------- positionnement */
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    /*  ------- decallage du footer poura article court */
+    min-height: 800px;
+}
+
+.contenu-texte h2{
+    margin: 3rem 0 1rem;
+}
+
+/* -------------------- MOBILE 1240 -------------------- */
+
+@media screen and (max-width: 1240px) {
+    .banniere {
+    background-position:bottom -240px right -1fr, bottom -190px left 10%, bottom -230px center, center center;
+}
+    .presentation articles {
+    margin: 0 25px;
+}
+    .derniers-services articles{ 
+    margin: 20px;
+    }
+}
+/* -------------------- MOBILE 1040 -------------------- */
+
+@media screen and (max-width: 1080px) {
+    .banniere {
+    background-position:bottom -240px left 290%, bottom -190px left -50%, bottom -230px center, center center;
+}
+    .derniers-services articles{ 
+    margin: 10px;
+    }
+header p {
+    padding-right: 5px;
+}
+/* -------------------- MOBILE 980 -------------------- */
+
+@media screen and (max-width: 980px) {
+    
+/*  ------- MENU MOBILE ----------- */
+    
+header {
+    grid-template-rows: 85px;
+    grid-template-columns: 100px auto 100px;
+    margin-top: -85px; /*  ------- cache le menu au départ */
+}
+#navigation {
+     /*  --- animation menu */
+	transition: all .5s ease-in;
+     /*  --- positionnement menu mobile */
+    grid-column-start:1;
+    grid-column-end: -1;
+    /*  --- positionnement des enfants */
+    text-align: center;
+    justify-items: stretch;
+    /*  ------- mise en forme navigation mobile */
+    background-color:#153A6A;
+}
+header #navigation a {
+    padding: 1.5rem;
+}
+header > a {
+    /*  ------- positionnement mobile logo april */
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    justify-self: center;
+    padding: 10px;
+    margin: 0;
+}
+header p {
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    padding-right: 20px;
+    margin: 0;
+}
+.menu-mobile-ouvre, .menu-mobile-ferme{
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 3;
+    grid-column-end: -1;
+    color: #66aaee;
+    font-size: inherit;
+    text-transform: uppercase;
+    border: 1px solid #66aaee;
+    padding: 5px; 
+}  
+    
+/*  ------- OUVERTURE / FERMETURE MENU MOBILE ----------- */
+    
+#navigation{
+    margin-top: 0px;
+    margin-right: 0rem;
+    justify-content: initial;
+}
+#menu:target{
+     margin-top: 0px; /*  ------- ouvre le menu lorsque l'on clique sur "menu"*/
+}
+    
+/*  ------- MASQUAGE BOUTON MENU+FERME ----------- */
+    
+.menu-mobile-ouvre{ /*  ------- Bouton FERME masqué au départ */
+    display: none;
+}
+.menu-mobile-ferme{ /*  ------- Bouton MENU visible au départ */
+    display: block;
+}
+#menu:target a.menu-mobile-ferme { /*  ------- Bouton MENU masqué à l'ouverture du menu */
+    display: none;
+}
+#menu:target a.menu-mobile-ouvre { /*  ------- Bouton FERME visible à l'ouverture du menu */
+    display: block;
+}
+#navigation:target + a.menu-mobile-ouvre { /*  ------- Bouton FERME masqué à la fermeture du menu */
+    display: none;
+}
+/*  ------- FIN OUVERTURE MENU ----------- */
+    
+ header nav a:hover, .menu-mobile:hover, .menu-mobile-ouvre:hover, .menu-mobile-ferme:hover{
+    color:#fff;
+    background-color: #ff5e00; 
+    border-color: #ff5e00; 
+} 
+/*  ------- ACCUEIL 980 ----------- */
+    
+    .banniere {
+    background-position: bottom -240px left 440%, bottom -190px left -120%, bottom -230px center, center center;
+}
+    .presentation {
+    grid-template-columns: 5% 45% 45% 5%;
+}
+    .presentation articles {
+    margin: 0 25px;
+}
+     .presentation articles + articles {
+    margin: 0 0 0 40px;
+}
+    .derniers-services {
+    grid-template-columns: 5% 45% 45% 5%;
+}
+    .contenu-texte, .apropos .contenu-texte {
+    grid-template-columns: 5% 90% 5%;
+}
+    .engagements {
+    grid-template-columns: 5% 30% 30% 30% 5%;
+}
+    footer {
+    grid-template-columns: 5% 47.5% 47.5%;
+}
+    footer .signature-april p {
+    line-height: 15px;
+    text-align: right;
+    font-size: 10px;
+}
+    /*  ------- pages services 980 ----------- */
+    .master-rubrique .derniers-services {
+    grid-template-columns: 5% 90% 5%;
+}
+}
+/*  -------------------------------- 760px ----------- */
+    /*  ------- ACCUEIL 760 ----------- */
+    
+    @media screen and (max-width: 760px) {
+
+.banniere {
+    grid-template-rows: 400px;
+    background-position: bottom -290px right 60%, bottom -210px left -120%, bottom -270px center, center top;
+}
+.banniere articles {
+    padding-top: 50px;
+}
+.banniere articles h1 {
+    color: #fff;
+    margin: 0 2rem;
+    text-align: center;
+    line-height: 50px;
+    font-size: 30px;
+}
+.banniere articles p {
+    padding-top: 20px;
+}
+ .presentation {
+    grid-template-columns: 7% 86% 7%;
+}
+.presentation articles {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin: 0 auto;
+    /*  ------- separateur 760 ----------- */
+    background-image: url("../img/chat-marche-bleu-ciel-filet.svg");
+    background-repeat:no-repeat;
+    background-position:bottom 0px center;
+    background-size: 1fr;
+}
+  .presentation articles + articles {
+    grid-row-start: 2;
+    grid-row-end: -1;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin: 2rem auto;
+    background-image: url("../img/chat-course-bleu-ciel-filet.svg");
+    /*  ------- positionnement enfant ----------- */
+    display: grid;
+    grid-template-rows: 100px 140px 140px 100px 140px;
+    grid-template-columns: 50% 50%;
+    justify-content: space-between;
+    align-items: flex-start;
+    column-gap: 1rem;
+    row-gap: 1rem;
+}
+    .presentation articles h2 {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .presentation articles + articles h2 {
+    padding: 1rem 0 3rem;
+}
+    .presentation blockquote.postscriptum p {
+    padding: 0.5rem 0rem 5rem;
+}
+    articles div {
+    /*  ------- positionnement ----------- */
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    /*  ------- mise en forme ----------- */
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 1rem;
+}
+    articles div + div {
+    /*  ------- positionnement ----------- */
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    grid-column-end: -1;
+}
+    articles div + div + div{
+    /*  ------- positionnement ----------- */
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 1;
+    grid-column-end: 2;
+}
+    .presentation articles + articles .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 {
+    grid-row-start: 4;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: -1;
+    /*  ------- positionnement ----------- */
+    margin: 3rem auto 0rem;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    letter-spacing: 1px;
+    font-family: 'dejavu_sanscondensed_bold';
+    background-color: #2e5281;
+    box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
+    border-radius: 10px;
+    padding: 1.2rem 2.5rem;
+    min-width: 250px;
+    max-width: 300px;
+}
+    .presentation articles + articles .bouton-simple:hover {
+    color: #fff;
+    background-color: #ff5e00;
+}
+    .presentation articles + articles .spip_out, .bouton-utilise {
+    max-width: 180px;
+    padding: 0.7rem;
+}
+    .derniers-services {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;   
+    margin: 2rem 0rem 1rem;
+}
+    .derniers-services articles  {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .derniers-services articles + articles {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .derniers-services articles + articles + articles {
+    grid-row-start: 4;
+    grid-row-end: 5;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .derniers-services articles + articles + articles + articles {
+    grid-row-start: 5;
+    grid-row-end: 6;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .derniers-services .bouton-appel {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    margin: 2rem auto 5rem;
+}
+    .derniers-services img {
+    width: 70%;
+}
+    .derniers-services articles {
+    margin: 2rem 4rem;
+}
+    .engagements {
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+}
+    .engagements articles {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: -1;
+    margin: 3rem 5rem 0.5rem;
+}
+    .engagements articles +  articles {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    .engagements articles +  articles +  articles{
+    grid-row-start: 3;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}  
+/*  ------- page services ----------- */
+.master-rubrique .derniers-services {
+ margin-top: 4rem;
+}
+ .master-rubrique .tous-les-services {
+    flex-flow: column wrap;
+}
+.master-rubrique .derniers-services articles {
+   width: initial;
+}
+}
+    /*  -------------------------------- 640px ----------- */
+    
+    @media screen and (max-width: 640px){
+   header #navigation a {
+    padding: 1.5rem 0.2rem;
+}  
+        header #navigation a:first-child {
+    margin-left: 0rem;
+}
+        header #navigation a:last-child {
+    margin-right: 0rem;
+}
+} 
+/*  -------------------------------- 512px ----------- */
+    /*  ------- ACCUEIL 512 ----------- */
+    
+    @media screen and (max-width: 512px) {
+    #navigation{
+            grid-template-columns: auto;
+    }
+     header #navigation a:first-child {
+          margin-left: 0;  
+        }
+     header #navigation a:last-child{
+          margin-right: 0;  
+        }
+    header #navigation a {
+    padding: 1rem;
+    border-bottom: 1px solid #2e5281;
+    font-size: 14px;
+}
+    .banniere {
+background-position: bottom -290px right 100%, bottom -180px left -20%, bottom -190px center, center center;
+background-size: 700px, 700px, 550px, 400%;
+}
+    .banniere articles a {
+    margin: 1rem 1rem 0 0;
+    }
+    .presentation articles h2 {
+    text-align: center;
+}
+    .presentation articles + articles .spip_out, .bouton-utilise {
+    margin: 1rem auto 0rem;
+}
+    .presentation articles + articles .bouton-simple, .derniers-services .bouton-appel {
+    padding: 1rem 0.1rem;
+}
+    .bouton-simple {
+    font-size: 11px;
+    padding: 7px 0;
+    margin: 2rem auto;
+    text-align: center;
+    border: 1px solid #97b0c6;
+    max-width: 150px;
+    border-radius: 5px;
+}
+    .bouton-simple:hover{
+     background-color: #ff5e00;
+     border-color: #ff5e00;
+     color: #fff;   
+}
+    .presentation articles {
+    background-size: 170%;
+}
+    .presentation articles + articles {
+    grid-template-rows: 100px 140px 140px 140px 190px;
+    grid-template-columns: 1fr;
+    background-repeat:no-repeat;
+    background-position:bottom 0px center;
+    background-size: 170%;
+    row-gap: 1rem;
+    column-gap: 0rem;
+}
+    .presentation articles h2 {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+    articles div {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end:-1;
+    text-align: center;
+}
+    articles div + div {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 1;
+    grid-column-end:-1;
+}
+    articles div + div {
+    grid-row-start: 4;
+    grid-row-end: 5;
+    grid-column-start: 1;
+    grid-column-end:-1;
+}
+ .presentation articles + articles .bouton-simple {
+    grid-row-start: 5;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+        
+  .derniers-services articles {
+    margin: 1rem 2rem;
+}
+   .derniers-services .bouton-utilise {
+    margin: 1rem auto 1.5rem;
+}
+    .engagements articles {
+    margin: 3rem 2rem 0.5rem;
+}
+    footer {
+    grid-template-columns: 1fr;
+}
+   footer ul{
+    display: none;
+}
+   footer .signature-april {
+    grid-row-start: 1;
+    grid-row-end: -1;
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+}  
+@media screen and (max-width: 500px) {
+  header {
+      grid-template-rows: 285px;
+    margin-top: -285px; /*  ------- cache le menu au départ */
+}
+}