@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 } }