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

1295 lines
19 KiB
CSS

@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:400;
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:400;
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:400;
font-style:normal
}
*
{
margin:0;
padding:0
}
a
{
text-decoration:none;
color:#2e5281
}
a:hover
{
color:#ff5e00
}
a:active
{
color:#5bc6f2
}
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:400
}
h1
{
font-size:32px
}
h2
{
font-size:24px
}
h3
{
font-size:21px
}
H4
{
font-size:19px
}
a[href*]
{
color:#2e5281
}
header
{
display:grid;
grid-template-rows:75px;
grid-template-columns:15% 70% 15%;
background-color:#005184;
color:#fff
}
header > a
{
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
}
header p a
{
color:#fff
}
header .spip_logos, header .spip_logo
{
width:auto;
height:45px
}
#navigation
{
grid-column-start:2;
grid-column-end:3;
list-style-type:none;
text-transform:uppercase;
font-size:12px;
letter-spacing:1px;
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-ouvre
{
display:none
}
.menu-mobile-ferme
{
display:none
}
header p
{
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
}
header nav a
{
color:#fff
}
header a:hover
{
color:#ff9759
}
header p
{
margin:0 10px 0 0;
color:#e2edf9;
font-size:11px;
line-height:15px
}
.banniere
{
display:grid;
grid-template-rows:440px;
grid-template-columns:1fr;
background:url(../img/bann-2-ecrans.png),url(../img/bann-3-ecrans.png),url(../img/bann-fond.png),linear-gradient(to right,#1878c3,#538ce8,#81c1ff);
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
{
grid-column-start:1;
grid-column-end:-1;
grid-row-start:1;
grid-row-end:-1;
justify-self:center;
padding-top:100px
}
.banniere article h1
{
color:#fff;
font-size:35px
}
.banniere article p
{
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:.3rem 1rem;
background-color:#2e5281;
border-radius:5px;
box-shadow:0 0 5px 0 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
}
.presentation
{
display:grid;
grid-template-rows:1fr;
grid-template-columns:10% 40% 40% 10%
}
.presentation article
{
grid-row-start:1;
grid-row-end:-1;
grid-column-start:2;
grid-column-end:3;
margin:0 50px
}
.presentation article + article
{
grid-row-start:1;
grid-row-end:-1;
grid-column-start:3;
grid-column-end:4;
padding-bottom: 100px;
}
.presentation article h2
{
padding:3rem 0
}
.presentation h3
{
margin-bottom: 0.5rem;
}
.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
}
.bouton-utilise
{
display:block;
max-width:200px;
min-width:100px;
margin-top:.7rem;
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 0 rgba(0,81,132,0.5);
border-radius:7px;
padding:.7rem 1rem
}
.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:.5rem 0
}
.derniers-services
{
display:grid;
grid-template-rows:1fr;
grid-template-columns:10% 40% 40% 10%;
margin:4rem 0
}
.sous-titre
{
grid-row-start:1;
grid-row-end:2;
grid-column-start:1;
grid-column-end:-1;
text-align:center
}
.derniers-services article
{
grid-row-start:2;
grid-row-end:3;
grid-column-start:2;
grid-column-end:3;
margin:20px 40px;
text-align:center;
background-color:#fff;
border-radius:8px;
border-top:14px #b0cbe8 solid;
box-shadow:0 0 5px 0 rgba(0,81,132,0.5)
}
.derniers-services article + article
{
grid-row-start:2;
grid-row-end:3;
grid-column-start:3;
grid-column-end:4
}
.derniers-services article + article + article
{
grid-row-start:3;
grid-row-end:4;
grid-column-start:2;
grid-column-end:3
}
.derniers-services article + article + article + article
{
grid-row-start:3;
grid-row-end:4;
grid-column-start:3;
grid-column-end:4
}
.derniers-services .bouton-appel
{
grid-column-start:1;
grid-column-end:-1;
margin:5rem auto;
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 0 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:.5rem 1rem 1rem
}
.master-rubrique .derniers-services
{
display:grid;
grid-template-rows:1fr;
grid-template-columns:10% 80% 10%;
margin:4rem 0
}
.master-rubrique .sous-titre
{
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;
display:flex;
flex-flow:row wrap;
justify-content:space-between
}
.master-rubrique .derniers-services article
{
width:45%;
margin:1rem;
text-align:center;
background-color:#fff;
border-radius:8px;
border-top:14px #b0cbe8 solid;
box-shadow:0 0 5px 0 rgba(0,81,132,0.5)
}
.master-rubrique .derniers-services h2
{
padding:1rem 0;
height:2rem
}
.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 .7rem
}
.derniers-services p
{
text-align:left;
padding:1rem
}
.derniers-services img
{
width:90%;
box-shadow:0 0 5px 0 rgba(0,81,132,0.5);
height:auto;
margin:.5rem auto
}
.derniers-services .bouton-utilise
{
max-width:120px;
margin:1rem auto 1.5rem
}
.engagements
{
display:grid;
grid-template-rows:1fr;
grid-template-columns:10% 26.6666666% 26.6666666% 26.6666666% 10%;
margin-bottom:4rem
}
.engagements article
{
grid-row-start:1;
grid-row-end:-1;
grid-column-start:2;
grid-column-end:3;
margin:0 1rem
}
.engagements article + article
{
grid-column-start:3;
grid-column-end:4
}
.engagements article + article + article
{
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
{
display:grid;
grid-template-rows:80px;
grid-template-columns:15% 42.5% 42.5%;
background-color:#005184;
color:#fff;
margin-top:6rem
}
footer ul
{
grid-row-start:1;
grid-row-end:-1;
grid-column-start:2;
grid-column-end:3;
align-self:center;
list-style-type:none;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px
}
footer .signature-april
{
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;
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
}
.contenu-texte
{
display:grid;
grid-template-rows:1fr;
grid-template-columns:15% 70% 15%
}
.contenu-texte article
{
grid-row-start:1;
grid-row-end:-1;
grid-column-start:2;
grid-column-end:3
}
.contenu-texte h1
{
grid-row-start:1;
grid-row-end:2;
grid-column-start:2;
grid-column-end:3;
margin:4rem 0 0
}
.contenu-texte h3
{
margin:3rem 0 1rem
}
.contenu-texte strong
{
margin:2rem 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
{
grid-row-start:2;
grid-row-end:-1;
grid-column-start:2;
grid-column-end:3;
min-height:800px;
text-align:left
}
.contenu-texte h2
{
margin:3rem 0 1rem
}
.contenu-texte p
{
padding-bottom:6px
}
@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
}
}
@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
}
}
@media screen and (max-width: 980px) {
header
{
grid-template-rows:85px;
grid-template-columns:100px auto 100px;
margin-top:-85px
}
#navigation
{
transition:all .5s ease-in;
grid-column-start:1;
grid-column-end:-1;
text-align:center;
justify-items:stretch;
background-color:#153A6A
}
header #navigation a
{
padding:1.5rem
}
header > a
{
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:#6ae;
font-size:inherit;
text-transform:uppercase;
border:1px solid #6ae;
padding:5px
}
#navigation
{
margin-top:0;
margin-right:0;
justify-content:initial
}
#menu:target
{
margin-top:0
}
.menu-mobile-ouvre
{
display:none
}
.menu-mobile-ferme
{
display:block
}
#menu:target a.menu-mobile-ferme
{
display:none
}
#menu:target a.menu-mobile-ouvre
{
display:block
}
#navigation:target + a.menu-mobile-ouvre
{
display:none
}
header nav a:hover,.menu-mobile:hover,.menu-mobile-ouvre:hover,.menu-mobile-ferme:hover
{
color:#fff;
background-color:#ff5e00;
border-color:#ff5e00
}
.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
}
.master-rubrique .derniers-services
{
grid-template-columns:5% 90% 5%
}
}
@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;
background-image:url(../img/chat-marche-bleu-ciel-filet.svg);
background-repeat:no-repeat;
background-position:bottom 0 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);
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:.5rem 0 5rem
}
article > div
{
grid-row-start:2;
grid-row-end:3;
grid-column-start:1;
grid-column-end:2;
background-color:#fff;
border-radius:5px;
padding:1rem
}
article div + div
{
grid-row-start:2;
grid-row-end:3;
grid-column-start:2;
grid-column-end:-1
}
article div + div + div
{
grid-row-start:3;
grid-row-end:4;
grid-column-start:1;
grid-column-end:2
}
.presentation article + article .postscriptum
{
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;
margin:3rem auto 0;
text-align:center;
color:#fff;
font-size:14px;
letter-spacing:1px;
font-family:'dejavu_sanscondensed_bold';
background-color:#2e5281;
box-shadow:0 0 5px 0 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
}
.bouton-utilise
{
max-width:180px;
padding:.7rem
}
.derniers-services
{
grid-template-rows:1fr;
grid-template-columns:1fr;
margin:2rem 0 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 .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
}
.master-rubrique .derniers-services
{
margin-top:4rem
}
.master-rubrique .tous-les-services
{
flex-flow:column wrap
}
.master-rubrique .derniers-services article
{
width:initial
}
}
@media screen and (max-width: 640px) {
header #navigation a
{
padding:1.5rem .2rem
}
header #navigation a:first-child
{
margin-left:0
}
header #navigation a:last-child
{
margin-right:0
}
}
@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:0.65rem;
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 + article .spip_out,.bouton-utilise
{
margin:1rem auto 0
}
.presentation article + article .bouton-simple,.derniers-services .bouton-appel
{
padding:1rem .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
{
display: block;
}
.presentation article h2
{
text-align:center
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;
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 .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
}
header
{
grid-template-rows:285px;
margin-top:-285px
}
}