1110 lines
27 KiB
CSS
1110 lines
27 KiB
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 .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;
|
|
}
|
|
.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 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 */
|
|
}
|
|
}
|