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

1115 lines
27 KiB
CSS
Raw Normal View History

2019-10-11 19:27:35 +02:00
/*
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 */
}
2019-12-13 13:37:17 +01:00
header p a {
color: white;
}
2019-10-11 19:27:35 +02:00
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 */
}
}