www.chapril.org-spip/css/perso-modif.css

/* 
 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 p a {
    color: white;
}

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 article {
    /*  ------- 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 article h1{
    color:#fff;
    font-size: 35px;
} 
.banniere article p{
    /*  ------- positionnement */
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding-top:20px;
}
.banniere article 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 article a ~ a{
    color:#2e5281;
    background-color: #fff;
    margin-right:0; 
}
.banniere article 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 article {
    /*  ------- positionnement */
    grid-row-start: 1;
    grid-row-end: -1;
    grid-column-start: 2;
    grid-column-end: 3;
    margin: 0 50px;
    /*  ------- mise en forme */   
}
.presentation article + article {
    /*  ------- positionnement */
    grid-row-start: 1;
    grid-row-end: -1;
    grid-column-start: 3;
    grid-column-end: 4;
}
.presentation article h2{
    /*  ------- positionnement */
    padding: 3rem 0;
}
.presentation article 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 article + article .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 article + article .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 article{ 
    /*  ------- 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 article + article{ 
    /*  ------- positionnement */
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
    /*  ------- mise en forme */ 
}
.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 article + article + article + article{ 
    /*  ------- 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 article {
    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 article{ 
    /*  ------- positionnement */
   grid-row-start: 1;
   grid-row-end: -1;
   grid-column-start: 2;
   grid-column-end: 3;
   margin: 0 1rem;
}
.engagements article + article{ 
    /*  ------- positionnement */
   grid-column-start: 3;
   grid-column-end: 4;
}
.engagements article + article + article{ 
    /*  ------- positionnement */
   grid-column-start: 4;
   grid-column-end: 5;
}
.engagements article 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 article {
     /*  ------- 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;
    padding-bottom: 6px;
}
.contenu-texte ul 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 ol {
    padding-left: 20px;
    padding-bottom: 6px;
}
.contenu-texte ol li {
    padding: 4px 0;
}

.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;
    text-align: left;
}

.contenu-texte h2{
    margin: 3rem 0 1rem;
}

.contenu-texte p {
    padding-bottom: 6px;
}

/* -------------------- 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 article {
    margin: 0 25px;
}
    .derniers-services article{ 
    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 article{ 
    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 article {
    margin: 0 25px;
}
     .presentation article + article {
    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 article {
    padding-top: 50px;
}
.banniere article h1 {
    color: #fff;
    margin: 0 2rem;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
}
.banniere article p {
    padding-top: 20px;
}
 .presentation {
    grid-template-columns: 7% 86% 7%;
}
.presentation article {
    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 article + article {
    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 article h2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
}
    .presentation article + article h2 {
    padding: 1rem 0 3rem;
}
    .presentation blockquote.postscriptum p {
    padding: 0.5rem 0rem 5rem;
}
    article 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;
}
    article div + div {
    /*  ------- positionnement ----------- */
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: -1;
}
    article div + div + div{
    /*  ------- positionnement ----------- */
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
}
    .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 article + article .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 article + article .bouton-simple:hover {
    color: #fff;
    background-color: #ff5e00;
}
    .presentation article + article .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 article  {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: -1;
}
    .derniers-services article + article {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: -1;
}
    .derniers-services article + article + article {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: -1;
}
    .derniers-services article + article + article + article {
    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 article {
    margin: 2rem 4rem;
}
    .engagements {
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr;
}
    .engagements article {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
    margin: 3rem 5rem 0.5rem;
}
    .engagements article +  article {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: -1;
}
    .engagements article +  article +  article{
    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 article {
   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 article a {
    margin: 1rem 1rem 0 0;
    }
    .presentation article h2 {
    text-align: center;
}
    .presentation article + article .spip_out, .bouton-utilise {
    margin: 1rem auto 0rem;
}
    .presentation article + article .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 article {
    background-size: 170%;
}
    .presentation article + article {
    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 article h2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
}
    article div {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end:-1;
    text-align: center;
}
    article div + div {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end:-1;
}
    article div + div {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end:-1;
}
 .presentation article + article .bouton-simple {
    grid-row-start: 5;
    grid-row-end: -1;
    grid-column-start: 1;
    grid-column-end: -1;
}
        
  .derniers-services article {
    margin: 1rem 2rem;
}
   .derniers-services .bouton-utilise {
    margin: 1rem auto 1.5rem;
}
    .engagements article {
    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 */
}
}