/* --------------------------------------------------
Table of Contents
-----------------------------------------------------
* CH01 - Animations
* CH02 - Gestion row
*/
/* CH01 - ANIMATIONS
/* ---------------------------------------------------------------------------------- */
.animation,
.formulaire_newsletter input[type="submit"],
.formulaire_formidable input[type="submit"],
.article .btn-art a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/* CH02 - GESTION ROW
/* ---------------------------------------------------------------------------------- */
html {background:var(--main-color);}
body {
max-width:120rem;
margin:0 auto;
height:100%;
font:400 16px/1.5em "Work Sans", Helvetica, Arial, "sans-serif";
color:#000;
background:#f9f4f1;
}
/*ROW FIXES
/* -------------------------- */
.row-1920 .grid-x {max-width:120rem;}
.row-1560 .grid-x {max-width:97.5rem;}
.row-1440 .grid-x {max-width:90rem;}
.row-1200 .grid-x {max-width:75rem;}
.row-1120 .grid-x {max-width:70rem;}
.row-1920 .grid-x,
.row-1560 .grid-x,
.row-1440 .grid-x,
.row-1200 .grid-x,
.row-1120 .grid-x {margin:0 auto;}
/* CENTRER VERTICALEMENT
/* -------------------------- */
.vertical-center {
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
/* ===================================================================
* VARIABLES Spip
*
* ------------------------------------------------------------------- */
:root {
--main-bg-color:#f5f5f5;
--main-color: #15403d;
--main-txt-color: #444;
--txt-color: #333;
--txt-color-light: #888;
--color-focus: #e5745d;
--border-color:#dcccc1;
--main-padding:calc(8.33333% + 1.875rem);
--main-margin:calc(8.33333% + 1.875rem);
}
/* -------------------------------------------------------------------
* pace.js styles - minimal
* ------------------------------------------------------------------- */
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {display: none;}
.pace .pace-progress {
background:#6fb18a ;
position: fixed;
z-index: 900;
top: 0;
right: 100%;
width: 100%;
height: 5px;
}
/* ===================================================================
* 04. preloader - (_preloader-1.scss)
*
* ------------------------------------------------------------------- */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--main-color) url("/squelettes/design/logo-preloader.gif") no-repeat center center;
z-index: 800;
height: 100%;
width: 100%;
}
@media only screen and (max-width: 640px) {
#preloader {background-size: 260px auto;}
}
#preloader::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
height: 100%;
width: 100%;
}
.no-js #preloader,
.oldie #preloader {display: none;}
#loader {
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
width: 50px;
height: 50px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#loader:before {
content: "";
border-top: 4px solid rgba(255, 255, 255, 0.05);
border-right: 4px solid rgba(255, 255, 255, 0.05);
border-bottom: 4px solid rgba(255, 255, 255, 0.05);
border-left: 4px solid #FFFFFF;
-webkit-animation: load 1.1s infinite linear;
animation: load 1.1s infinite linear;
display: block;
border-radius: 50%;
width: 50px;
height: 50px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* ===================================================================
* COOKIES Bandeau
*
* ------------------------------------------------------------------- */
#cookieChoiceInfo {
top: inherit !important;
bottom: 0;
background: #222f76 !important;
padding: 20px !important;
box-shadow: -2px 0 10px rgba(0,0,0,0.3);
font-size: 0.813rem;
color: #FFF;
}
#cookieChoiceInfo a {
top: inherit !important;
padding: 4px 9px;
background:rgba(255,255,255,0.2);
border-radius: 3px;
color: #FFF;
}
/* ===================================================================
* MENU HEADER
*
* ------------------------------------------------------------------- */
#logo {
position: fixed;
z-index: 20;
top: 50px;
left: calc((20.833335% - 160px) / 2);
}
.logo > a {
position: relative;
display: block;
width: 115px;
height: 115px;
}
.logo > a img {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.logo > a:hover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.langues {
position: absolute;
top: -135px;
margin-bottom: 0;
}
.langues li {display: inline-block;}
.langues li + li {margin-left: 5px;}
.langues li a {
display: block;
height: 30px;
width: 30px;
border: 1px solid var(--border-color);
font-size:0.875rem;
font-style: italic;
line-height: 30px;
text-align: center;
color: var(--txt-color-light);
}
@media only screen and (min-width: 1920px) {#logo {left: calc(((100vw - 1937px) / 2) + 120px );} }
@media only screen and (max-width: 1024px) {
#logo {
position: relative;
left: inherit;
top: inherit;
margin-top: 40px;
}
.langues {
top: -10px;
right: 0;
}
.page_rubrique .langues {top: 0;}
}
.button_container {
position: fixed;
top: 40px;
right: 40px;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
@media only screen and (min-width: 1920px) {.button_container {right: calc(((100vw - 1937px) / 2) + 40px);} }
@media only screen and (max-width: 1024px) {.button_container {right:30px;} }
@media only screen and (max-width: 640px) {.button_container {right:15px;} }
.button_container:hover {opacity: .7;}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: var(--color-focus);
}
.button_container.active .middle {
opacity: 0;
background: var(--color-focus);
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: var(--color-focus);
}
.button_container span {
background: var(--main-color);
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {top: 11px;}
.button_container span:nth-of-type(3) {top: 22px;}
.overlay {
z-index: 50;
position: fixed;
background: var(--main-color);
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .95;
visibility: visible;
height: 100%;
}
.overlay .nav {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Playfair Display', serif;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
}
.overlay li {
display: block;
position: relative;
min-height: 25px;
/*height: calc(100% / 8);*/
opacity: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.overlay.open li:nth-child(2) {
-webkit-animation-delay: .25s;
animation-delay: .25s;
}
.overlay.open li:nth-child(3) {
-webkit-animation-delay: .30s;
animation-delay: .30s;
}
.overlay.open li:nth-child(4) {
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-child(5) {
-webkit-animation-delay: .40s;
animation-delay: .40s;
}
.overlay.open li:nth-child(6) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-child(7) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay.open li:nth-child(8) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay li a {
display: block;
position: relative;
font-size:2rem;
line-height:2.50em;
color: #FFF;
text-decoration: none;
}
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {color: #6fb18a;}
.overlay .title {
font-family: "Work Sans", Helvetica, Arial, "sans-serif";
font-weight: 600;
text-transform: uppercase;
font-size:1.125rem;
color: #6fb18a;
}
.overlay .title.first-of-type {
position:relative;
margin-top: 10px;
padding-top: 20px;
}
.overlay .title.first-of-type::after {
position:absolute;
content:"";
left: 0;
right: 0;
top: 0;
margin: 0 auto;
height: 3px;
width: 40px;
background: #6fb18a;
}
@media only screen and (max-width: 480px) {
.overlay li a {
line-height:1.750em;
font-size: 1.250rem;
}
.overlay .title {
margin-top: 10px;
padding-top: 15px;
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
/* ACCUEIL
/* ---------------------------------------------------------------------------------- */
.page_sommaire figure .cell {
position: relative;
min-height: 225px;
}
@media only screen and (max-width: 840px) {
.page_sommaire figure .cell { min-height: 130px;}
}
@media only screen and (max-width: 480px) {
.page_sommaire figure .cell { min-height: 100px;}
}
.page_sommaire .txt {
z-index: 5;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
color: #FFF;
}
.page_sommaire .txt h2 {
font-family:"Playfair Display", Georgia, "serif";
font-size: 3.5em;
font-weight: 700;
line-height: 1.35em;
}
@media only screen and (max-width: 1440px) {
.page_sommaire .txt h2 {font-size:2.750em;}
}
@media only screen and (max-width: 1024px) {
.page_sommaire .txt h2 {
margin-bottom:0;
font-size:2em;
}
}
@media only screen and (max-width: 640px) {
.page_sommaire .txt h2 {
padding-left: 15px;
padding-right: 15px;
margin-bottom:0;
font-size:1.375em;
}
}
.page_sommaire .txt p {
position: relative;
margin-bottom: 0;
font-size: .9375rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.page_sommaire .txt p::after {
position: absolute;
content: "";
margin: 0 auto;
left: 0;
right: 0;
bottom: -10px;
width: 15px;
height: 3px;
background: #FFF;
}
.page_sommaire .txt h2,
.page_sommaire .txt p {
text-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.page_sommaire a:hover .txt h2,
.page_sommaire a:hover .txt p {
text-shadow: 0 5px 10px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.4);
}
.page_sommaire figure .cell {overflow: hidden;}
.page_sommaire figure img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.page_sommaire figure a:hover img {
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
transform: scale(1.025);
}
.page_sommaire article header {padding-bottom: 105px;}
@media only screen and (max-width: 640px) {
.page_sommaire article header {padding-bottom:55px;}
.page_sommaire .txt p::after {background: none;}
.page_sommaire .txt p {
display: none;
font-size: 0.938rem;
font-weight: 600;
}
}
.page_sommaire article .supTitle {margin-bottom: 15px;}
.page_sommaire article header p {margin-bottom:35px;}
.page_sommaire article header .chapo + a {
font-size: 1.250em;
font-weight: 500;
border-bottom: 1px solid #dcccc1;
color:#6fb18a;
}
@media only screen and (max-width: 640px) {
.page_sommaire article header h1 { font-size: 2.750em;}
}
#background-video {
display: block;
position: relative;
height: 800px;
background-color:#631f21;
}
.loaded .ytplayer-container {display: block;}
.ytplayer-container {
bottom: 0;
height: 100%;
left: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.ytplayer-shield {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:0;
}
.ytplayer-player {
position: absolute;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top:50% !important;
}
@media only screen and (max-width: 1440px) {
#background-video {height: 700px;}
}
@media only screen and (max-width: 1152px) {
#background-video {
height: 500px;
background-image: url("/squelettes/design/amp_visuel-faq.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.background-video a {background:rgba(255,255,255,0.8);}
.loaded .ytplayer-container,
.ytplayer-container,
.ytplayer-shield {
display: none !important;
opacity: 0 !important;
}
}
@media only screen and (max-width: 840px) {
#background-video {height: 400px;}
}
@media only screen and (max-width: 640px) {
#background-video {height: 320px;}
}
@media only screen and (max-width: 480px) {
#background-video {height: 200px;}
}
/* CH?? - INSTAGRAM
/* ---------------------------------------------------------------------------------- */
#instagram {
position: relative;
padding:20px 0 40px ;
background: #e2dcda;
text-align:center;
}
#instagram .picto {
background:#e2dcda;
width:74px;
height: 74px;
margin:-57px auto 0;
padding-top:23px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#instagram p {
margin-bottom:0;
font-family:"Playfair Display", Georgia, "serif";
font-size: 1rem;
line-height: 1.35em;
color:var(--txt-color);
}
#instagram p a {
font-style:normal;
color: #000;
}
/* CH?? - FOOTER
/* ---------------------------------------------------------------------------------- */
footer {
padding: 110px 0;
font-size: 1.125rem;
line-height: 1.65em;
color:var(--txt-color-light);
background:var(--main-color);
}
footer .title {
margin-bottom: 10px;
font-size:.9375rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-focus);
}
footer .auteur {
font-family:"Playfair Display", Georgia, "serif";
font-weight:700;
color: #fff;
}
footer span {display:block;}
footer .tel a,
footer a.mail {color:var(--txt-color-light);}
footer a.mail {
display:inline-block;
line-height: 1em;
border-bottom: 1px solid var(--txt-color-light);
}
footer a:hover.tel,
footer a:hover.mail,
footer a:focus.tel,
footer a:focus.mail {color:var(--color-focus);}
footer .copyright .title {
margin-bottom: 15px;
color: #6fb18a;
}
footer .amp {margin-top: 30px;}
footer .amp img {margin-right: 5px;}
footer .amp {
font-size: 1.125rem;
text-transform: uppercase;
color:var(--txt-color-light);
}
footer .amp strong {
font-weight: 600;
color:#0379c3;
}
.designby,
.mentions {
font-size:0.813rem;
line-height: 1.65em;
color: var(--txt-color-light);
}
.designby a,
.mentions a {
color:var(--txt-color-light);
text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
footer {padding: 50px 0 25px;}
footer .content:last-child .auteur {margin-top: 30px;}
footer .bottom {
border-top: 1px solid rgba(255,255,255,.1);
margin-top: 50px;
padding-top: 25px;
}
.designby br {display: none;}
footer .copyright {float:left;}
footer .amp {float:right;}
}
@media only screen and (max-width: 640px) {
footer .adresse {margin-bottom: 35px;}
footer .contact .content {margin-top: 10px;}
footer .contact .title {margin-bottom: 0px;}
footer .content:last-child .auteur {margin-top: 0;}
}
@media only screen and (max-width: 480px) {
footer .copyright,
footer .amp {float:inherit;}
}
/* SHARE ADDTHIS
/* -------------------------- */
.share {
position: relative;
margin-top: 50px;
margin-bottom: 50px;
padding-top: 50px;
border-top: 1px solid var(--border-color);
font-family:"Playfair Display", Georgia, "serif";
font-size:1rem;
font-weight: 700;
text-align: right;
color: #6fb18a;
}
.share span {display: inline-block;}
.share > span {
margin-right: 10px;
vertical-align: middle;
}
.at-share-btn-elements a {
background: #6fb18a !important;
margin:0 3px !important;
}
.at-share-btn-elements a .at-icon {fill: #FFF !important;}
.addthis_inline_share_toolbox_te2h {
display:inline-block;
vertical-align: middle;
}
.scroll-picto {
position: absolute;
height: 24px;
width: 16px;
}
.scroll-picto img {
display: block !important;
width: 16px;
margin: 0 auto;
}
.anim-vertical {
-webkit-animation: vertical 3s ease infinite;
animation: vertical 3s ease infinite;
}
/* vertical animation */
@-webkit-keyframes vertical {
0%,
60%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
40% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes vertical {
0%,
60%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
40% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
/* CH?? - PAGE ARTICLE SÉLECTIONS ÉDITORIALES
/* ---------------------------------------------------------------------------------- */
.columns {margin-left:20.833335%;}
@media only screen and (max-width: 1024px) {
.columns {margin-left:8.33333%;}
}
@media only screen and (max-width: 640px) {
.columns {
margin-left:0.9375rem;
width: calc(100% - 1.875rem) !important;
}
}
main .content {
position:relative;
padding-bottom: 55px;
margin-bottom: 55px;
border-bottom: 1px solid var(--border-color);
}
main.main-content {padding-bottom: 70px;}
main .content::before {
position: absolute;
content: "";
left: -0.9375rem;
top: 0;
height: calc(100% - 55px);
width: 1px;
background: var(--border-color);
}
main .content:nth-child(3n+1)::before {background:none;}
@media only screen and (max-width: 1024px) {
main .content:nth-child(3n+1)::before {background:var(--border-color);}
main .content:nth-child(2n+1)::before {background:none;}
}
@media only screen and (max-width: 640px) {
main .content {
padding-bottom: 25px;
margin-bottom: 25px;
}
main .content::before {background:none;}
}
main .content h2 {
margin-bottom: 0.5em;
font-family:"Playfair Display", Georgia, "serif";
font-size:2.750em;
font-weight: 700;
line-height:1.35em;
}
main .content h2 a {color: var(--main-color);}
main .content h2 a:hover {color: var(--color-focus);}
@media only screen and (max-width: 1152px) {
main .content h2 {font-size: 2em;}
}
main .content h3 {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
font-family:"Work Sans", Helvetica, Arial, "sans-serif";
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5em;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--txt-color-light);
}
main .content h3::after {
position: absolute;
content: "";
left: 0;
top: 8px;
width: 13px;
height: 13px;
border:2px solid var(--main-color);
}
main .content ul {margin-bottom: 0;}
main .content p {
margin-bottom: 1.5em;
font-size:1.250em;
line-height: 1.55em;
color: var(--txt-color);
}
main .content ul + p {
margin-top: 0.5em;
margin-bottom: 0;
}
main .content p i {font-size:1.250rem;}
main .content li {
font-size: 1rem;
line-height: 1.65em;
color: var(--txt-color-light);
}
main .content p a,
main .content .see {
font-size:1em;
font-weight: 500;
color: #6fb18a;
border-bottom: 1px solid #dcccc1;
display: inline-block;
line-height: 0.95;
text-shadow:
1px 1px var(--main-bg-color),
1px -1px var(--main-bg-color),
-1px 1px var(--main-bg-color),
-1px -1px var(--main-bg-color);
}
main .content p a:hover,
main .content p a:focus {
color: #000;
outline: none;
background: #ddd;
text-shadow:
1px 1px #ddd,
1px -1px #ddd,
-1px 1px #ddd,
-1px -1px #ddd;
}
main .content p a:active {border-bottom: none;}
main .content .see {font-size:1.250em;}
/* CH?? - PAGE ARTICLE
/* ---------------------------------------------------------------------------------- */
article header,
section header {padding-top: 105px;}
article header > .cell,
section header > .cell {position: relative;}
article main,
section main {
padding: 125px 0;
background:#FFF;
}
article main {background:#f9f4f1;}
@media only screen and (max-width: 1440px) {
article header,
section header,
article main,
section main {font-size: 14px;}
}
@media only screen and (max-width: 1024px) {
article header,
section header {padding-top: 50px;}
article main,
section main {padding: 70px 0;}
main.main-content {padding-bottom: 15px;}
}
@media only screen and (max-width: 640px) {
article header,
section header,
article main,
section main {font-size: 12px;}
article main,
section main {padding: 55px 0;}
main.main-content {padding-bottom: 0;}
}
article figure.logo_art {margin-bottom:0;}
article .supTitle,
section .supTitle {
display: block;
margin-bottom: 10px;
padding-right: 95px;
font-family: "Work Sans", Helvetica, Arial, "sans-serif";
font-size: .9375rem;
font-weight: 500;
line-height: 1.25em;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-focus);
}
section .supTitle {padding-right: 0;}
article .supTitle .date,
section .supTitle .date {
display: inline-block;
color: var(--txt-color-light);
}
article h1,
section h1 {
margin-bottom: 0.75em;
font-family:"Playfair Display", Georgia, "serif";
font-size: 3.5em;
line-height: 1.5em;
font-weight: 700;
color: var(--main-color);
}
.page_404 article h1 {margin-bottom: 125px;}
.article h2 {
position: relative;
font-size:2.750em;
font-weight: 700;
font-family:"Playfair Display", Georgia, "serif";
color: var(--main-color);
}
.article h2::before {
position: absolute;
content: "";
left: 0;
top: -1.5em;
height: 2px;
width: 100%;
background:var(--border-color);
}
.article .container h2:first-of-type::before {background:none;}
.article h3 {font-size:1.750em;}
.article h4 {font-size:1.375em;}
.article h3,
.article h4 {
font-weight: 600;
line-height:1.5em;
color: #6fb18a;
}
.article h2 strong,
.article h3 strong {color: var(--color-focus);}
.art9 .article h3 { /* PAGE CONTACT */
font-family:"Work Sans", Helvetica, Arial, "sans-serif";
font-size:1.5em;
font-weight: 600;
text-transform: uppercase;
color: var(--color-focus);
}
@media only screen and (max-width: 1440px) {
article h1,
section h1 {font-size: 3.125em;}
}
@media only screen and (max-width: 840px) {
article h1,
section h1,
.article h2 {font-size: 2.750em;}
}
.article p,
.article ul {
font-size:1.250em;
line-height: 1.55em;
color: var(--main-txt-color);
}
.article h3,
.article h4,
.article p,
.article ul,
.article figure,
.article blockquote,
.article .flex-video,
.article .btn-contain,
.article .texteencadre-spip,
.formulaire_formidable {margin-left: var(--main-margin);}
.art9 .article p.boutons,
.article blockquote p {margin-left: 0;} /* PAGE CONTACT */
article .chapo p,
section .chapo p,
article .chapo ul,
section .chapo ul {
margin-bottom: 2.917em;
font-size:1.250em;
line-height: 1.55em;
column-count:2;
column-gap: 50px;
color: var(--txt-color);
}
@media only screen and (max-width: 1440px) {
.article h3,
.article h4,
.article p,
.article ul,
.article figure,
.article .flex-video,
.article .btn-contain,
.article .texteencadre-spip,
.formulaire_formidable {margin-left: inherit;}
article .chapo p,
section .chapo p,
article .chapo ul,
section .chapo ul {
column-count:inherit;
column-gap: inherit;
}
}
@media only screen and (max-width: 1024px) {
article .chapo p,
section .chapo p,
article .chapo ul,
section .chapo ul {
column-count:2;
column-gap: 35px;
}
}
@media only screen and (max-width: 840px) {
article .chapo p,
section .chapo p,
article .chapo ul,
section .chapo ul {
column-count:inherit;
column-gap: inherit;
}
}
article .chapo ul.spip,
section .chapo ul.spip,
.article ul.spip {list-style:none;}
article .chapo ul.spip li,
section .chapo ul.spip li,
.article ul.spip li {
position:relative;
padding-left: 20px;
}
article .chapo ul.spip li::after,
section .chapo ul.spip li::after,
.article ul.spip li::after {
position:absolute;
content:"•";
left: 0;
top:2px;
font-size: 1.250em;
color: #6fb18a;
}
article .chapo ul li,
section .chapo ul li,
.article ul li {margin-bottom:0.313em;}
article .chapo p strong,
section .chapo p strong,
.article p strong,
.article ul strong,
.article .texteencadre-spip strong {
color: var(--color-focus);
font-weight: 500;
}
article .chapo p i,
section .chapo p i,
article .chapo ul i,
section .chapo ul i,
.article p i,
.article ul i {
font-style: normal;
color:#000;
}
article .chapo p a,
section .chapo p a,
article .chapo ul a,
section .chapo ul a,
.article p a,
.article ul a {
color: #000;
font-weight: 500;
border-bottom: 1px solid var(--border-color);
display: inline-block;
line-height: 0.95;
}
article .chapo p a:active,
section .chapo p a:active,
article .chapo ul a:active,
section .chapo ul a:active,
.article p a:active,
.article ul a:active {border-bottom: none;}
article .chapo p a:hover,
section .chapo p a:hover,
article .chapo ul a:hover,
section .chapo ul a:hover,
.article p a:hover,
.article ul a:hover,
article .chapo p a:focus,
section .chapo p a:focus,
article .chapo ul a:focus,
section .chapo ul a:focus,
.article p a:focus,
.article ul a:focus {
color: var(--color-focus);
outline: none;
background: #eee;
}
.article hr {
max-width:inherit;
border-bottom: 2px solid var(--border-color)
}
.article blockquote {
border-left: 4px solid var(--border-color);
padding: 10px 30px;
quotes: "\201C""\201D""\2018""\2019";
}
.article blockquote:before {
color: var(--color-focus);
content: open-quote;
font-size: 6em;
line-height: 0.1em;
margin-right: 10px;
vertical-align: -0.35em;
}
.article blockquote p {display: inline;}
.article cite {
margin-top: 10px;
font-size: 1rem;
font-family:"Playfair Display", Georgia, "serif";
color: var(--color-txt-light);
}
/* TEXTE ENCADRE
/* -------------------------- */
.article .texteencadre-spip {
position: relative;
background: none;
border:10px solid var(--color-focus);
padding:35px;
font-size:1.250em;
font-weight: 400;
line-height: 1.55em;
color: var(--main-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
@media only screen and (max-width: 1440px) {
.article .texteencadre-spip {padding:25px;}
}
@media only screen and (max-width: 640px) {
.article .texteencadre-spip {padding:15px;}
}
.article .texteencadre-spip:hover {
box-shadow: 0 5px 10px rgba(0,0,0,0.20), 0 10px 10px rgba(0,0,0,0.17);
background: #f8f8f8;
}
.article .texteencadre-spip h2,
.article .texteencadre-spip h3,
.article .texteencadre-spip h4 {
font-family:"Work Sans", Helvetica, Arial, "sans-serif";
font-size:1em;
font-weight: 600;
text-transform: uppercase;
color: var(--color-focus);
}
.article .texteencadre-spip p,
.article .texteencadre-spip ul {font-size: 1em;}
.article .texteencadre-spip ul.spip li::after {color: var(--main-color);}
.article .texteencadre-spip h2,
.article .texteencadre-spip h3,
.article .texteencadre-spip h4,
.article .texteencadre-spip p,
.article .texteencadre-spip ul {margin-left:0;}
.article .texteencadre-spip strong {
font-weight: 600;
color: #f15931;
}
.article .texteencadre-spip i {
font-style: normal;
font-weight: 600;
color: #9c6865;
}
.article .texteencadre-spip a {
font-style: italic;
color: var(--color-focus);
border-bottom: 1px solid var(--color-focus);
display: inline-block;
line-height: 0.95;
text-shadow:
1px 1px var(--main-bg-color),
1px -1px var(--main-bg-color),
-1px 1px var(--main-bg-color),
-1px -1px var(--main-bg-color);
}
.article .texteencadre-spip a:active {border-bottom: none;}
.article .texteencadre-spip a:hover,
.article .texteencadre-spip a:focus {
color: #000;
outline: none;
background: #ddd;
text-shadow:
1px 1px #ddd,
1px -1px #ddd,
-1px 1px #ddd,
-1px -1px #ddd;
}
/* BLOCS OUVERTS FERMÉS
/* -------------------------- */
.article .cs_blocs h4,
.article .cs_blocs h5,
.article .cs_blocs p,
.article .cs_blocs ul,
.article .cs_blocs figure,
.article .cs_blocs .texteencadre-spip {margin-left:0;}
.article .cs_blocs + h2::before {background:none;}
.cs_blocs {
display: block;
border-bottom: 1px solid var(--border-color);
margin-left: var(--main-margin);
}
@media only screen and (max-width: 1440px) {
.cs_blocs {margin-left: inherit;}
}
.cs_blocs h3 {
font-family:"Playfair Display", Georgia, "serif";
font-size: 1.375rem;
line-height: 1.4em;
color: #000;
}
@media only screen and (max-width: 640px) {
.cs_blocs h3 {line-height: 1.15em;}
}
.cs_blocs h3 a {
position: relative;
display:block;
padding: 30px 120px 30px 30px;
font-family:"Work Sans", Helvetica, Arial, "sans-serif";
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
text-decoration: none !important;
color: var(--main-color);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.cs_blocs h3 a i {
font-style: normal;
color: var(--txt-color-light);
}
@media only screen and (max-width: 840px) {
.cs_blocs h3 a {font-size: 0.938em;}
}
.cs_blocs h3.blocs_replie a {
padding-left: 0;
}
.cs_blocs h3 a::after,
.cs_blocs h3.blocs_replie a::after {
position: absolute;
content:"";
right: 45px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size:1rem;
font-family: "Playfair Display", Georgia, "serif";
font-weight: 700;
text-transform: none;
color: var(--main-color);
}
.cs_blocs h3.blocs_replie a::after {color: #6fb18a;}
.blocs_destination {
padding:50px 8.33333%;
margin: 0 !important;
background: #FFF;
}
.cs_blocs .blocs_replie {
background: transparent url("/squelettes/design/croix@2x.gif") no-repeat scroll right 20px center !important;
background-size:15px 15px !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cs_blocs .blocs_titre {
padding: 0;
margin: 0;
background: #6fb18a url("/squelettes/design/croix-open@2x.gif") no-repeat scroll right 20px center;
background-size:15px 15px;
}
.article .cs_blocs h4,
.article .cs_blocs h5 {
font-family:"Work Sans", Helvetica, Arial, "sans-serif";
font-size:1.5em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #000;
}
/* BOUTON ARTICLE
/* -------------------------- */
.btn-contain {
margin-top: 45px;
text-align: center;
}
.article .btn-contain {margin-top: 35px;}
.blocs_destination .btn-contain {margin: 50px 0 25px;}
.article .btn-contain + h2,
.article .btn-contain + h3,
.article .btn-contain + h4,
.article .btn-contain + h5,
.article .btn-contain + p,
.article .btn-contain + ul,
.article .btn-contain + div {margin-top:3em;}
.article .btn-art a {
display:inline-block;
height:70px;
padding: 0 45px;
border: none;
border-radius: 0;
background: #EBC414;
font:600 1.5rem/70px "Work Sans", Helvetica, Arial, "sans-serif";
text-transform: uppercase;
letter-spacing: 2px;
color: #000;
}
.article .btn-art a:hover {
background:var(--color-focus);
color: #fff;
}
@media only screen and (max-width: 480px) {
.article .btn-art a {
display:block;
padding: 0 30px;
font-size: 1.250rem;
}
}
/* IMG FULL LARGE + FLEX-VIDEO
/* -------------------------- */
.article .flex-video {padding-bottom:55%;}
.article figure {
position: relative;
background:var(--main-bg-color) url(/squelettes/design/loading.gif) no-repeat center center;
min-height: 400px;
}
section .article figure {min-height: inherit;}
.article figure img {width:100%;}
.article .cs_blocs figure {background-color:#FFF;}
@media only screen and (max-width: 1280px) {.article figure {min-height: 320px;} }
@media only screen and (max-width: 960px) {.article figure {min-height: 270px;} }
@media only screen and (max-width: 720px) {.article figure {min-height: 185px;} }
@media only screen and (max-width: 480px) {.article figure {min-height: 145px;} }
/* TABLE
/* -------------------------- */
table {
margin-bottom: 40px;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
table thead {background: #5481c2; }
table thead th.firstCol {background: #15244f; }
table thead tr th {
font-size: 0.813rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
color:#FFF;
}
table tr th,
table tr td {
padding:0.938rem 0.688rem;
font-size: 0.875rem;
line-height: 1.125rem;
text-align: center;
color:#666;
}
table tr th {line-height: 1rem;}
table tbody tr:nth-child(2n) {background-color: #eee;}
table th.firstCol,
table td.firstCol {color: #15244f;}
table th.firstCol {color: #FFF;}
table tbody tr td {position: relative;}
table tbody tr td::after {
position: absolute;
content: "";
left: 0;
top:calc(50% - 8px);
height: 16px;
width:1px;
background: #ddd;
}
table tbody tr:nth-child(2n) td::after {background-color: #ccc;}
table tbody tr td.firstCol::after {background: none;}
table a {
display: inline-block;
padding:1px 6px 1px 8px;
border: 1px solid #ccc;
border-radius: 1px;
font-size: 0.750rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #ff315e;
}
table a:hover {color:#5481c2;}
@media screen and (max-width: 1024px) {
table.stack thead,
table.stack tfoot {display: none; }
table.stack tr,
table.stack th,
table.stack td {display: block; }
table.stack td {border-top: 0; }
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-size: 0.875rem;
text-transform: uppercase;
color: #5481c2;
}
table td.firstCol {
background: #15244f;
color: #fff;
}
table td.firstCol::before {color: #fff;}
table tbody tr td::after,
table tbody tr:nth-child(2n) td::after {background: none;}
table tbody tr td {
text-align: right;
border-bottom: 1px solid #eee;
}
table tbody tr:nth-child(2n) td {border-color: #ddd;}
table td:last-child {border-bottom: 0;}
.page_prive .main .heure {color:#57cbf5;}
}
@media only screen and (max-width: 640px) {
.table-scroll {overflow-x: auto;}
}
/* SUIVANT PRECEDENT
/* -------------------------- */
nav.article {margin-top:0;}
nav.article div {
max-width:90rem;
margin:0 auto;
padding-top: 25px;
padding-bottom: 25px;
margin-top:50px;
border-top: 1px solid #FFF;
}
nav.article a {
position: relative;
display: inline-block;
vertical-align: top;
width: calc(50% - 3px);
padding-top: 7px;
font-size:0.875rem;
line-height: 1.5em;
text-align: left;
text-decoration: none;
color: #000;
}
nav.article a.precedent {padding-left: 20px;}
nav.article a.suivant {
padding-right: 20px;
text-align: right;
width: 100%;
}
nav.article a.precedent + a.suivant {width: calc(50% - 3px);}
nav.article a.precedent::after{
position: absolute;
top: 6px;
left: 0;
content: "â†";
}
nav.article a.suivant::after {
position: absolute;
top: 6px;
right: 0;
content: "→";
}
@media only screen and (max-width: 640px) {
nav.article a,
nav.article a.precedent + a.suivant {
display:block;
width: 100%;
}
nav.article a.suivant {
margin-top: 15px;
border-top: 1px solid #fff;
padding-top: 15px;
}
nav.article a.suivant::after {top: 16px;}
}
/* NIVEAU DE LECTURE */
/* -------------------------- */
.article h2 {margin-bottom:1.125em;}
.article h3,
.article h4 {margin-bottom:0.5em;}
.article h5,
.article p,
.article ul {margin-bottom:0.750em;}
.article p + h2,
.article ul + h2,
.article blockquote + h2,
.article figure + h2,
.article .flex-video + h2,
.article .cs_blocs + h2,
.article .texteencadre-spip + h2,
.article .cs_blocs + h3 {margin-top:3em;}
.article p + h3,
.article ul + h3,
.article blockquote + h3,
.article figure + h3,
.article .flex-video + h3,
.article .texteencadre-spip + h3,
.article blockquote + .texteencadre-spip,
.article .cs_blocs + .texteencadre-spip {margin-top:1.875em;}
.article p + h4,
.article ul + h4,
.article blockquote + h4,
.article figure + h4,
.article .flex-video + h4,
.article .cs_blocs + h4,
.article .texteencadre-spip + h4,
.article p + h5,
.article ul + h5,
.article blockquote + h5,
.article figure + h5,
.article .flex-video + h5,
.article .cs_blocs + h5,
.article .texteencadre-spip + h5,
.article blockquote + p,
.article figure + p,
.article .flex-video + p,
.article .cs_blocs + p,
.article .texteencadre-spip + p {margin-top:1.5em;}
.article figure,
.article blockquote,
.article .cs_blocs,
.article .flex-video,
.article .texteencadre-spip {margin-bottom:1.5em;}
.article figure + figure {margin-top:-0.5em;}
.article .cs_blocs + .cs_blocs {margin-top:-1.5em;}
.article h2 + figure,
.article h3 + figure,
.article h4 + figure,
.article h5 + figure,
.article p + figure,
.article ul + figure,
.article h2 + blockquote,
.article h3 + blockquote,
.article h4 + blockquote,
.article h5 + blockquote,
.article p + blockquote,
.article ul + blockquote,
.article h2 + .texteencadre-spip,
.article h3 + .texteencadre-spip,
.article h4 + .texteencadre-spip,
.article h5 + .texteencadre-spip,
.article p + .texteencadre-spip,
.article ul + .texteencadre-spip,
.article h2 + .flex-video,
.article h3 + .flex-video,
.article h4 + .flex-video,
.article h5 + .flex-video,
.article p + .flex-video,
.article ul + .flex-video,
.article h2 + .cs_blocs,
.article h3 + .cs_blocs,
.article h4 + .cs_blocs,
.article h5 + .cs_blocs,
.article p + .cs_blocs,
.article ul + .cs_blocs {margin-top:1.5em;}
.article .texteencadre-spip + .cs_blocs,
.article .texteencadre-spip + .flex-video,
.article .texteencadre-spip + figure,
.article .texteencadre-spip + blockquote {margin-top:2em;}
.article hr + h2,
.article hr + h3,
.article hr + h4,
.article hr + h5 {margin-top:3rem;}
.article p + hr,
.article ul + hr {margin-top:3.5rem;}
.article .texteencadre-spip h2,
.article .texteencadre-spip h3,
.article .texteencadre-spip h4,
.article .texteencadre-spip h5,
.article .texteencadre-spip p,
.article .texteencadre-spip ul {margin-bottom:0;}
.article .texteencadre-spip h2 + p,
.article .texteencadre-spip h3 + p,
.article .texteencadre-spip h4 + p,
.article .texteencadre-spip h5 + p,
.article .texteencadre-spip h2 + ul,
.article .texteencadre-spip h3 + ul,
.article .texteencadre-spip h4 + ul,
.article .texteencadre-spip h5 + ul,
.article .texteencadre-spip p + p,
.article .texteencadre-spip ul + p {margin-top:0.75em;}
.article .texteencadre-spip p + ul {margin-top:0.5em;}
/* CH?? - FORMULAIRES
/* ---------------------------------------------------------------------------------- */
.formulaire_formidable {
margin-top:20px;
text-align: left;
}
.formulaire_formidable .explication {display:none;}
.formulaire_formidable br {display:none;}
.article .formulaire_formidable h2,
.article .formulaire_formidable h3 {
margin-bottom:1.125em;
font-size: 1.750em;
font-weight: 600;
font-family: "Work Sans", Helvetica, Arial, "sans-serif";
line-height: 1.5em;
color: #6fb18a;
}
label,
select {
display:block;
font-size:1.250rem;
color:#000;
}
fieldset,
.fieldset {
padding:0;
margin-top:50px;
border:none;
}
select {
height: 50px;
margin-bottom: 0.25em;
margin-top: 0.35em;
padding: 10px;
border:1px solid #ccc;
}
.formulaire_formidable fieldset .editer {
position: relative;
float:left;
width:48%;
margin-right:2%;
margin-top:10px;
list-style:none;
}
/* Arrangement Fieldset 2 */
.formulaire_formidable .fieldset_fieldset_2 .editer {
width:48%;
margin-right:0;
}
.formulaire_formidable .fieldset_fieldset_2 .editer:nth-child(2n+0) {
width:50%;
margin-left:0;
}
/*Fin */
.formulaire_formidable .saisie_textarea {
margin:1.125em 0 0;
width:100% !important;
}
textarea {min-height:200px;}
.formulaire_formidable textarea,
.formulaire_formidable input[type="text"],
.formulaire_formidable input[type="email"] {
float:none;
width:100%;
height:70px;
padding:0.750em;
margin-top:0.35em;
border:1px solid var(--border-color);
box-shadow:none;
border-radius:0;
background:#FFF;
font-size:1.125em;
color:#000;
}
.formulaire_spip input.date {width:100% !important;}
img.ui-datepicker-trigger {
display:inline-block !important;
margin-left: -25px !important;
}
.formulaire_formidable input[type="submit"] {
display:block;
cursor: pointer;
margin:40px auto 0;
width:250px;
height:70px;
padding: 0 45px;
border: none;
border-radius: 0;
background: var(--main-color);
font:600 1.5rem/70px "Work Sans", Helvetica, Arial, "sans-serif";
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-focus);
}
.formulaire_formidable input[type="submit"]:hover,
.formulaire_formidable input[type="submit"]:focus {
background:var(--color-focus);
color: var(--main-color);
}
.formulaire_formidable input[type="submit"]:focus {outline: none;}
.formulaire_formidable input[type="submit"]:active {transform: scale(0.95);}
@media only screen and (max-width: 640px) {
.formulaire_formidable fieldset .editer,
.formulaire_formidable fieldset .editer:nth-child(2n+0),
.formulaire_formidable .fieldset_fieldset_2 .editer {
float:none;
width:100%;
margin-left:0;
margin-right:0;
}
}
@media only screen and (max-width: 480px) {
.formulaire_formidable input[type="submit"] {width:100%;}
}
.formulaire_spip .choix {
background: #e5e3dc;
display: block;
margin-right: 0;
margin-top: 30px;
padding: 20px;
}
.reponse_formulaire_erreur p {
margin-bottom: 60px;
background:var(--main-color);
padding:25px !important;
color:#FFF ;
text-align: center;
}
.erreur_message {
position:absolute;
left:3px;
bottom:-13px;
font-size:1rem;
color:var(--main-color);
}
.erreur_message em {color:var(--txt-color);}
p.reponse_formulaire_ok {
padding-top: 5px;
font-family:"PT Serif", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size:13px;
font-style: italic;
color: #FFF;
}
p.reponse_formulaire_ok b {
font-weight:400;
color: #FFF;
}
/* ===================================================================
* COOKIES Bandeau
*
* ------------------------------------------------------------------- */
#cookieChoiceInfo {
top: inherit !important;
bottom: 0;
background: rgba(0,10,35,0.85) !important;
padding: 20px !important;
box-shadow: -2px 0 10px rgba(0,0,0,0.3);
font-family:"PT Serif", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 0.875rem;
color: #FFF;
}
#cookieChoiceInfo a {
top: inherit !important;
padding: 4px 9px;
background:#5481c2;
border-radius: 3px;
font-family:"PT Sans",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #15244f;
}
/* CH?? - PLAN DU SITE
/* ---------------------------------------------------------------------------------- */
.page_plan footer {margin-top:80px;}
.page_plan .article {background: #FFF;}
.page_plan .article h1 {margin-top: 1em;}
.page_plan .article a::after {background: none !important;}
.page_plan .article ul.spip {
list-style:none;
margin: 0;
}
.page_plan .article ul.spip li::after {
background:none;
content: "";
}
.page_plan .article ul.spip li h2 {
padding:0;
margin:0;
background:#eee;
font-size: 1rem;
}
.page_plan .article ul.spip li h2 a {
padding: 30px 20px;
text-decoration: none;
font-size: 1.750rem;
font-style: normal;
font-family:"PT Sans", Helvetica, Arial, sans-serif;
color: #000;
}
.page_plan .article ul.spip ul.spip {
padding:0;
font-size:1rem;
}
.page_plan .article ul.spip ul.spip h2 {
background: none;
margin:15px 0 0;
font-size:1rem;
}
.page_plan .article ul.spip ul.spip h2 a {
text-decoration: none;
padding:10px 20px;
font-size:1rem;
font-weight: 700;
color: #000;
}
.page_plan .article ul.spip a {border: none;}
.page_plan .article ul.spip li {
padding-left:0;
margin-bottom:0;
background:none;
font-size:1rem;
}
.page_plan .article ul.spip li a {
text-decoration: none;
display:block;
padding:15px 20px;
font-size:1rem;
font-style: normal;
color:#666;
text-shadow: none;
}
.page_plan .article > ul.spip > li {border-bottom:1px solid #ddd;}
.page_plan .article ul.spip li ul.spip li {
font-size: 1rem;
border-bottom:1px solid #ddd;
}
.page_plan .article ul.spip li ul.spip li:last-child {border-bottom: none;}
.page_plan .article ul.spip li ul.spip li a {display:block;}
/* CH?? - ADD TO ANY
/* ---------------------------------------------------------------------------------- */
.a2a_kit {
margin:0;
height: 30px;
width:auto;
font-size:0;
}
.a2a_button_facebook,
.a2a_button_twitter,
.a2a_button_google_plus,
.a2a_button_linkedin,
.a2a_button_youtube,
.a2a_button_instagram {
display:inline-block;
width:30px;
height:30px;
margin:0 5px;
line-height: 0 !important;
}
.a2a_button_facebook span,
.a2a_button_twitter span,
.a2a_button_google_plus span {display:none;}
.a2a_button_facebook,
.a2a_button_twitter,
.a2a_button_google_plus,
.a2a_button_linkedin,
.a2a_button_youtube,
.a2a_button_instagram {
background:transparent url("/squelettes/design/sprite-reseaux_circle@2x.png") no-repeat 0 center;
background-size:180px 30px;
}
.a2a_button_twitter {background-position:-30px center;}
.a2a_button_google_plus {background-position:-60px center;}
.a2a_button_linkedin {background-position:-90px center;}
.a2a_button_youtube {background-position:-120px center;}
.a2a_button_instagram {background-position:-150px center;}
/* CH?? - DIVERS
/* ---------------------------------------------------------------------------------- */
/* LAZY LOAD
/* -------------------------- */
img.lazy {
opacity: 0;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
transition: opacity .3s ease-in;
}
/* ANCHOR
/* -------------------------- */
.cd-top {
display: inline-block;
z-index:100;
height: 60px;
width: 60px;
position: fixed;
bottom: 15px;
right: 15px;
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #000 url("/squelettes/design/arrow-up@2x.png") no-repeat center center;
background-size:16px 9px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
transition: all 0.15s;
}
.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {opacity: .5;}
.cd-top:hover {
background-color: #000;
opacity: 1;
}
@media only screen and (max-width: 1024px) { .cd-top {bottom:70px;} }
@media only screen and (max-width: 640px) { .cd-top {bottom:15px;} }
/* CH?? - RESET SPIP
/* ---------------------------------------------------------------------------------- */
.markItUpContainer textarea {background:#FFF !important; color:#666 !important;}
#colorbox,
#cboxOverlay,
#cboxWrapper {
-moz-box-sizing:content-box !important;
-webkit-box-sizing:content-box !important;
box-sizing: content-box !important;
}
.spip-admin-float {
z-index:2000 !important;
right:5% !important;
}
.spip_documents_left,
.spip_documents_right {float:inherit !important}
/* CH?? - CLASS NETTOYEUR
/* ---------------------------------------------------------------------------------- */
.nettoyeur {
height:1px;
line-height:0;
clear:both;
}
/* CH?? - VISIBILITY
/* ---------------------------------------------------------------------------------- */
@media only screen and (min-width: 1921px) {
.show-for-960,
.show-for-840,
.show-for-medium-small,
.show-for-medium,
.show-for-small {display:none !important;}
}
/* XXX-large landscape > BREAKPOINT 1680PX */
@media only screen and (max-width: 1920px) {
.show-for-960,
.show-for-840,
.show-for-medium-small,
.show-for-medium,
.show-for-small {display:none !important;}
}
@media only screen and (max-width: 1024px) {
.show-for-medium-small,
.show-for-medium {display:block !important;}
.hide-for-medium,
.hide-for-medium-small {display:none !important;}
}
@media only screen and (max-width: 960px) {
.show-for-960 {display:block !important;}
.hide-for-960 {display:none !important;}
}
@media only screen and (max-width: 840px) {
.show-for-840 {display:block !important;}
.hide-for-840 {display:none !important;}
}
@media only screen and (max-width: 640px) {
.hide-for-medium,
.show-for-small {display:block !important;}
.show-for-medium,
.hide-for-small {display:none !important;}
}
/* CH?? - MEDIA QUERIE
/* ---------------------------------------------------------------------------------- */
@media only screen and (min-width: 1921px) {
/*body:after {content: "1921px and more";}*/
}
/* XXX-large landscape > BREAKPOINT 1680PX */
@media only screen and (max-width: 1920px) {
/*body:after {content: "1920px";}*/
}
/* X-large landscape > BREAKPOINT 1440PX */
@media only screen and (max-width: 1680px) {
/*body:after {content: "1680px";}*/
}
/* Widescreen landscape > BREAKPOINT 1280PX */
@media only screen and (max-width: 1440px) {
/*body:after {content: "1440px";}*/
}
/* Widescreen landscape > BREAKPOINT 1152PX */
@media only screen and (max-width: 1280px) {
/*body:after {content: "1280px";} */
}
/* ========== AJUSTEMENTS ========== */
@media only screen and (max-width: 1152px) {
/*body:after {content: "1152px";}*/
}
/* ============================== PASSAGE FORMAT MEDIUM ============================== */
@media only screen and (max-width: 1024px) {
/*body:after {content: "1024px";}*/
}
/* ========== AJUSTEMENTS ========== */
@media only screen and (max-width: 960px) {
/*body:after {content: "960px";}*/
}
@media only screen and (max-width: 840px) {
/*body:after {content: "840px";}*/
}
@media only screen and (max-width: 720px) {
/*body:after {content: "720px";}*/
}
/* ============================== PASSAGE FORMAT SMALL ============================== */
@media only screen and (max-width: 640px) {
/*body:after {content: "640px";}*/
}
@media only screen and (max-width: 480px) {
/*body:after {content: "480px";}*/
}