/* CSS Document s*/
h1 {margin:0; padding:0;}
.mdl-cp .warpper { margin-left: -15px; margin-right: -15px; }
.mdl-cp .img-fluid { max-width: 100%; height: auto; }
.mdl-cp .container { background-color: rgba(211, 240, 240, 0) !important; }
.mdl-cp { margin: 0; padding: 0; font-weight: 400; border: 0px solid black; background-color: #FFFFFF; font-size: 16px; /*font-family: 'Open Sans', sans-serif;*/ color: #333; }
.mdl-cp .lead { color: #333; font-weight: normal; margin-bottom: 0.5em; font-size: 1.5em; }
.mdl-cp h1, .mdl-cp h2, .mdl-cp h3, .mdl-cp h4, .mdl-cp h5 { color: #014479; margin: 0px 0px 16px 0px; line-height: normal; }
.mdl-cp .h1, .mdl-cp .h2, .mdl-cp .h3, .mdl-cp .h4, .mdl-cp .h5, .mdl-cp .h6 { color: #014479; /*font-family: 'proxima_nova_ltsemibold';*/ margin: 0px 0px 16px 0px; }
.mdl-cp .content-bleu-vert h1, .mdl-cp .content-bleu-vert h2, .mdl-cp .content-bleu-vert h3, .mdl-cp .content-bleu-vert h4, .mdl-cp .content-bleu-vert h5 { color: #FFFFFF; }
.mdl-cp h2 { font-size: 2em; color: #014479; }
.mdl-cp .h1 { font-size: 3em; }
.mdl-cp .display-1 { font-size: 2.25em; color: #014479; }
.mdl-cp .display-2 { font-size: 1.5em; color: #014479; }
.mdl-cp hr { margin-top: 2rem; margin-bottom: 2rem; border: 0; border-top: 1px solid #E5F7F7; }
.mdl-cp .bleu-vert { color: #11A6A6; }
.mdl-cp pre { font-size: 12px; font-style: italic; font-family: 'Open Sans', sans-serif; margin-top: -1.5em; }
.mdl-cp audio { width: 100%; }
.mdl-cp blockquote { padding: 1em 2em; margin: 0 1em 1em; background: #E5F7F7; background: -moz-linear-gradient(left, #E5F7F7 0%, #FFFFFF 100%); background: -webkit-linear-gradient(left, #E5F7F7 0%, #FFFFFF 100%); background: linear-gradient(to right, #E5F7F7 0%, #FFFFFF 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f7f7', endColorstr='#ffffff',GradientType=1 ); /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; position: relative; overflow: hidden; }
.mdl-cp blockquote::before { content: " ” "; color: #FFFFFF; display: block; font-size: 12em; font-style: normal; line-height: 0.6; position: absolute; height: 80px; top: 0; left: 16px; width: 105px; }
.mdl-cp cite { font-size: 1.25em; font-weight: normal; display: block; margin-bottom: 0.5em; margin-top: 0.5em; }
.mdl-cp b, .mdl-cp strong { font-weight: 600; }
.mdl-cp a { color: #1262B2; text-decoration: underline; }
.mdl-cp a.btn { /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; /*+box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25);*/ -moz-box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25); font-size: 14px; text-decoration: none; padding: 6px 10px 8px; border: 0px solid black; line-height: normal; }
.mdl-cp a.btn.btn-lg { padding: 16px 24px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; /*font-size: 24px;*/ font-size: 14px;  }
.mdl-cp a.btn.btn-md { padding: 16px 8px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; font-size: 24px; }
.mdl-cp .item .btn { font-size: 0.8em; margin: 0.5em; }
.mdl-cp .item .outline.pack { font-size: 0.75em; }
.mdl-cp .item .btn span { padding: 0; margin: 0; display: block; font-size: 0.8em; }
.mdl-cp a:hover { color: #12B3B3; text-decoration: underline; }
.mdl-cp p { }
.mdl-cp p.small { font-size: 0.7em; }
.mdl-cp .alignleft { float: left; margin: 0 1em 0.5em 0; }
.mdl-cp .alignright { float: right; margin: 0 0 0.5em 1em; }
.mdl-cp .aligncenter { margin: 0 auto 1em; display: block; }
.mdl-cp .tag { padding: 0.5em; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
.mdl-cp .list-inline.cta li { margin: 0px 0px 8px 0px; }
/*ESPACEMENT GRID SUPPLEMENTAIRE A 6REM -------------------------------*/
.m-6 { margin: 6rem !important; }
.mt-6, .my-6 { margin-top: 4rem !important; }/*modif 6rem*/
.mr-6, .mx-6 { margin-right: 6rem !important; }
.mb-6, .my-6 { margin-bottom: 6rem !important; }
.ml-6, .mx-6 { margin-left: 6rem !important; }
/*-------------------------------*/
.p-6 { padding: 6rem !important; }
.pt-6, .py-6 { padding-top: 6rem !important; }
.pr-6, .px-6 { padding-right: 6rem !important; }
.pb-6, .py-6 { padding-bottom: 6rem !important; }
.pl-6, .px-6 { padding-left: 6rem !important; }
/*COULEURS -------------------------------*/
.content-blanc { background-color: #FFFFFF; /*padding-top: 3em;*/ /*padding-bottom: 3em;*/ }
/*-------------------------------*/
.content-bleu { background-color: #014479; /*padding-top: 2.5em;*/ /*padding-bottom: 2.5em;*/ }
.content-bleu h1, .content-bleu h2, .content-bleu h3, .content-bleu p { color: #FFFFFF; }
.content-bleu p { margin: 0 !important; }
.content-bleu h1 a, .content-bleu h2 a, .content-bleu h3 a, .content-bleu p a { color: #FFFFFF; }
/*-------------------------------*/
.content-bleu-vert { background-color: #11A6A6; /*padding-top: 2.5em;*/ /*padding-bottom: 2.5em;*/ }
.content-bleu-vert h1, .content-bleu-vert h2, .content-bleu-vert h3, .content-bleu-vert p { color: #FFFFFF; }
.content-bleu-vert h1 a, .content-bleu-vert h2 a, .content-bleu-vert h3 a, .content-bleu-vert p a { color: #FFFFFF; }
.content-bleu-vert p { margin: 0 !important; }
.content-bleu-clair { background: #FFFFFF; background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#dae9f2),color-stop(100%,#FFFFFF)); background: -webkit-linear-gradient(#DAE9F2, #FFFFFF); background: -moz-linear-gradient(#DAE9F2, #FFFFFF); background: -o-linear-gradient(#DAE9F2, #FFFFFF); background: linear-gradient(#DAE9F2, #FFFFFF); /*padding-top: 3em;*/ /*padding-bottom: 3em;*/ }
/*-------------------------------*/
.bg-blanc { background-color: #FFFFFF; }
.blanc { color: #FFFFFF; }
/*-------------------------------*/
.bg-bleu { background-color: #014479; color: #FFFFFF; }
.bleu { color: #014479; }
.bg-bleu h1, .bg-bleu h2, .bg-bleu h3, .bg-bleu p { color: #FFFFFF; }
.bg-bleu h1 a, .bg-bleu h2 a, .bg-bleu h3 a, .bg-bleu p a { color: #FFFFFF; }
.bg-bleu p { margin: 0 !important; }
/*-------------------------------*/
.bg-bleu-vert { background-color: #11A6A6; color: #FFFFFF; }
.bleu-vert { color: #11A6A6; }
.bg-bleu-vert h1, .bg-bleu-vert h2, .bg-bleu-vert h3, .bg-bleu-vert p { color: #FFFFFF; }
.bg-bleu-vert h1 a, .bg-bleu-vert h2 a, .bg-bleu-vert h3 a, .bg-bleu-vert p a { color: #FFFFFF; }
.bg-bleu-vert p { margin: 0 !important; }
/*-------------------------------*/
.bg- { background-color: #E5F7F7; }
.bleu-clair { color: #E5F7F7; }
/*-------------------------------*/
.bg-orange { background-color: #FF9934; color: #FFFFFF; }
.orange { color: #FF9934; }
/*-------------------------------*/
.bg-erreur { background-color: #F6E4E4; }
.erreur { color: #B21212; }
/*-------------------------------*/
.bg-succes { background-color: #E4F6E4; }
.succes { color: #12B212; }
/*-------------------------------*/
.bg-attention { background-color: #F6F2E4; }
.attention { color: #B28A12; }
/*-------------------------------*/
.shadow-img, .shadow { /*+border-radius: 4px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; /*+box-shadow: 1px 6px 16px rgba(8, 42, 76, 0.1);*/ -moz-box-shadow: 1px 6px 16px rgba(8, 42, 76, 0.1); -webkit-box-shadow: 1px 6px 16px rgba(8, 42, 76, 0.1); box-shadow: 1px 6px 16px rgba(8, 42, 76, 0.1); }
.img-top-crop { margin-top: -5em !important; }
/*-----------------------*/
.btn:hover { border: 1px solid rgba(255, 255, 255, 0); background-color: #777777; color: #FFFFFF; text-decoration: none !important; }
.btn.shadow { padding: 0.75em 1.25em !important; /*+box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2) !important;*/ -moz-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2) !important; box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2) !important; border: 0px solid black !important; }
.btn.shadow:hover { background-color: #1677D8; color: #FFFFFF; /*+box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2);*/ -moz-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2); box-shadow: inset 0px -4px rgba(0, 0, 0, 0.2); border: 0px solid black; }
.text-left .btn i { float: left; margin-right: 8px; text-align: center; padding-right: 4px; }
.text-right .btn i { float: right; margin-left: 8px; text-align: center; padding-left: 4px; }
.text-left .btn { text-align: left; }
.text-right .btn { text-align: right; }
.btn.sm { font-size: 0.75em; }
.btn.md { font-size: 1.125em; }
.btn.lg { font-size: 1.5em; line-height: 1; padding: 0.5em 1em; }
.btn.bleu { background-color: #1262B1; color: #FFFFFF !important; }
.btn.bleu:hover { background-color: #1677D8; }
.btn.violet { background-color: #9564A8; color: #FFFFFF !important; }
.btn.violet:hover { background-color: #AC87BA; }
.btn.orange { background-color: #EC6607; color: #FFFFFF !important; }
.btn.orange:hover { background-color: #F98532; }
.btn.rouge { background-color: #D35055; color: #FFFFFF !important; }
.btn.rouge:hover { background-color: #DB7377; }
.btn.bleuc { background-color: #2CB8C5; color: #FFFFFF !important; }
.btn.bleuc:hover { background-color: #44C9D5; }
.btn.vert { background-color: #4CA65F; color: #FFFFFF !important; }
.btn.vert:hover { background-color: #68BA79; }
.btn.facebook { background-color: #4267B2; color: #FFFFFF !important; }
.btn.facebook:hover { background-color: #3B5DA0; }
.btn.outline { background-color: #FFFFFF; border: 1px solid #1262B2; color: #1262B2; font-weight: normal; }
.btn.outline:hover { background-color: #FFF; border: 1px solid #00B0AD; color: #00B0AD !important; }
.btn.outline-blanc { background-color: rgba(255, 255, 255, 0); border: 1px solid #FFFFFF; color: #FFFFFF !important; font-weight: normal; }
.btn.outline-blanc:hover { background-color: rgba(255, 255, 255, 0); border: 1px solid #FFFFFF; color: #FFFFFF; }
.btn.blanc { background-color: #FFFFFF; color: #333 !important; }
.btn.blanc:hover { background-color: rgba(255, 255, 255, 0.707); }
.btn.erreur { background-color: #B31111; color: #FFFFFF !important; }
.btn.erreur:hover { background-color: #C60000; }
.btn.succes { background-color: #11B311; color: #FFFFFF !important; }
.btn.succes:hover { background-color: #00A700; }
.btn.attention { background-color: #B28A12; color: #FFFFFF !important; }
.btn.attention:hover { background-color: #E5A900; }
.btn.link { background-color: transparent; border: 0px solid #1262B2; color: #1262B2; font-weight: normal; padding: 0 !important; text-decoration: underline !important; }
.btn.link:hover { background-color: transparent; border: 0px solid #00B0AD; color: #00B0AD !important; }
/*-----------------------*/
/*-----------------------*/
#methodes .bloc-methode { margin: 16px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; overflow: hidden; /*(*+box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);*)
-moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);*/ background-color: #014479; }
#methodes .bloc-methode .entete { color: #FFFFFF; }
#mdl-cp.mdl-cp #methodes a { text-decoration: none; }
#methodes .bloc-methode .entete .titre { padding: 16px 8px; margin: 0; text-align: center; font-weight: 400; line-height: 1.25 !important; font-size: 23px; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.155); }
#methodes .bloc-methode .choix { padding: 16px 8px; text-align: center; font-weight: bold; position: relative; text-transform: uppercase; color: #FFFFFF; border-top: 1px dashed rgba(255, 255, 255, 0.5); }
#methodes .bloc-methode .choix:after { position: absolute; content: " "; width: 100%; bottom: -48px; left: 0; height: 64px; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
#methodes .bloc-methode:hover .choix:after { position: absolute; content: " "; width: 100%; bottom: -64px; left: 0; height: 64px; }
#methodes .bloc-methode.calimots .choix:after { background: url('img/fleche.svg') center no-repeat; }
#methodes .bloc-methode.piano .choix:after { background: url('img/fleche-2.svg') center no-repeat; }
#methodes .bloc-methode.album .choix:after { background: url('img/fleche-3.svg') center no-repeat; }
#methodes .bloc-methode .choix .optez { padding: 0; margin: 0; text-align: center; font-weight: bold; font-size: 1.1em; }
#methodes .bloc-methode .corps { background-color: #FFFFFF; padding: 8px; text-align: center; font-weight: bold; }
#methodes .bloc-methode .corps .feature { padding: 16px; font-weight: bold; font-style: italic; text-align: center; color: #666; }
#methodes .bloc-methode.calimots .corps .feature { padding: 16px; font-weight: bold; font-style: italic; text-align: center; color: #12B3B3; }
#methodes .bloc-methode.album .corps .feature { padding: 16px; font-weight: bold; font-style: italic; text-align: center; color: #EC6607; }
#methodes .bloc-methode.calimots { background-color: #12B3B3; }
#methodes .bloc-methode.piano { background-color: #9664A9; }
#methodes .bloc-methode.calimots .corps { background-color: #CBFAFA; background: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF 0%, #CBFAFA 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #CBFAFA 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #CBFAFA 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cbfafa',GradientType=0 ); /*+box-shadow: inset 0px -4px rgba(10, 87, 87, 0.138);*/ -moz-box-shadow: inset 0px -4px rgba(10, 87, 87, 0.138); -webkit-box-shadow: inset 0px -4px rgba(10, 87, 87, 0.138); box-shadow: inset 0px -4px rgba(10, 87, 87, 0.138); }
#methodes .bloc-methode.piano .corps { background: #E4D7E9; background: -moz-linear-gradient(top, #FFFFFF 0%, #E4D7E9 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #E4D7E9 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #E4D7E9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4d7e9',GradientType=0 ); /*+box-shadow: inset 0px -4px rgba(49, 10, 87, 0.138);*/ -moz-box-shadow: inset 0px -4px rgba(49, 10, 87, 0.138); -webkit-box-shadow: inset 0px -4px rgba(49, 10, 87, 0.138); box-shadow: inset 0px -4px rgba(49, 10, 87, 0.138); }
#methodes .bloc-methode.album .corps { background-color: #FDE5D5; background: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF 0%, #FDE5D5 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #FDE5D5 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #FDE5D5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fde5d5',GradientType=0 ); /*+box-shadow: inset 0px -4px rgba(87, 49, 10, 0.138);*/ -moz-box-shadow: inset 0px -4px rgba(87, 49, 10, 0.138); -webkit-box-shadow: inset 0px -4px rgba(87, 49, 10, 0.138); box-shadow: inset 0px -4px rgba(87, 49, 10, 0.138); }
#methodes .bloc-methode.album { background-color: #EC6607; }
.bloc-methode.calimots .corps .collection { font-family: 'proxima_nova_altbold'; color: #12B3B3; font-size: 32px; line-height: 24px; }
.bloc-methode.piano .corps .collection { font-family: 'Varela Round', sans-serif; text-transform: uppercase; color: #9664A9; font-size: 24px; line-height: 24px; }
.bloc-methode.album .corps .collection { font-family: 'Acme', sans-serif; color: #EC6607; font-size: 32px; line-height: 24px; }
#methodes .bloc-methode { -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; /*+box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);*/ -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); }
#methodes .bloc-methode:hover { /*+box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2);*/ -moz-box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); -webkit-box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); margin-top: 0px; margin-bottom: 10px; }
#methodes .bloc-methode .corps .collection { text-align: center; font-weight: bold; margin-top: 54px; line-height: normal; }
#methodes .bloc-methode .corps .visuel { }
/*-----------------------*/
/*.methode-item { margin-bottom: 1em; }*/
/*.methode-item .bloc-methode1 { background-color: #FFF; position: relative; padding: 24px; margin-right: 80px; font-size: 1.5em; color: #333; }*/
/*.methode-item .bloc-methode1:after { position: absolute; content: " "; width: 80px; top: 0; right: -80px; height: 100%; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background: url('img/fleche.svg') center no-repeat; padding: 0; margin: 0; }*/
/*.methode-item .bloc-methode2 { position: relative; padding: 24px; color: #FFFFFF; line-height: 24px; }*/
/*.methode-item.calimots .bloc-methode2 { font-family: 'proxima_nova_altbold'; font-size: 3em; }*/
/*.methode-item.piano .bloc-methode2 { font-family: 'Varela Round', sans-serif; font-size: 2.25em; }*/
/*.methode-item.album .bloc-methode2 { font-family: 'Acme', sans-serif; font-size: 2em; }*/
/*.methode-item.calimots .row .row { background-color: #12B3B3; margin: 0; (*+border-radius: 8px;*) -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }*/
/*.methode-item.piano .row .row { background-color: #9664A9; margin: 0; (*+border-radius: 8px;*) -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }*/
/*.methode-item.album .row .row { background-color: #EC6607; margin: 0; (*+border-radius: 8px;*) -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }*/
/*.methode-item .bloc-methode3 { position: relative; font-size: 1.5em; text-align: center; }*/
/*.methode-item .bloc-methode3 .visuel-methode { padding: 8px; }*/
/*.methode-item .bloc-methode3 .visuel-methode .img-fluid { width: 150px; }*/
/*@media (min-width: 769px) and (max-width: 991px) {
.methode-item .bloc-methode3 .visuel-methode .img-fluid { width: auto; }
}*/
.methode-item.header { padding: 0; margin: 0; }
.methode-item.header .display-1, .methode-item.header .display-2 { width: 50%; text-align: center; margin-top: 24px; font-size: 32px; font-weight: bold; }
.lafleche { fill:#014479; }
.methode-item { display: flex; position: relative; padding-top: 60px; }
.methode-item.calimots { margin-top: -30px; }
.methode-item .number-item { margin: -4px 8px 0px 0px; padding: 0; z-index: 999; width: 60px; height: 60px; /*+border-radius: 280px;*/ -moz-border-radius: 280px; -webkit-border-radius: 280px; -khtml-border-radius: 280px; border-radius: 280px; text-align: center; line-height: 1.3; font-size: 2em; font-weight: bold; bottom: 20px; float: left; }
.methode-item.calimots .number-item { border: 1px solid #00A3A6; background-color: #00A3A6; color: #FFFFFF; }
.methode-item.piano .number-item { border: 1px solid #9664A9; background-color: #9664A9; color: #FFFFFF; }
.methode-item.album .number-item { border: 1px solid #EC6607; background-color: #EC6607; color: #FFFFFF; }
.methode-item .question-methode { float: left; display: block; position: relative; width: 50%; padding: 24px 16px; font-size: 21px; line-height: normal; background-color: #FFFFFF; color: #014479; /*+border-radius: 4px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; /*+box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103);*/ -moz-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); -webkit-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); }
.methode-item .fleche-methode { float: left; display: block; position: relative; width: 80px; height: 106px; padding-top: 8px; }
.methode-item .content-methode { float: left; background-color: #9B9B9B; display: block; position: relative; /*+border-radius: 4px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; /*+box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103);*/ -moz-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); -webkit-box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); box-shadow: inset 0px -4px rgba(0, 0, 0, 0.103); -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.methode-item .titre-methode { display: block; position: relative; float: left; width: 310px; padding: 32px 16px; text-align: center; }
.methode-item .couv-methode { display: block; position: relative; float: left; width: 160px; margin-top: -60px; }
.methode-item.calimots .content-methode { background-color: #12B3B3; color: #FFFFFF; font-family: 'proxima_nova_altbold'; font-size: 40px; line-height: 1; }
.methode-item.calimots:hover .content-methode { background-color: #14C4C4; }
.methode-item.piano .content-methode { background-color: #9664A9; color: #FFFFFF; font-family: 'Varela Round', sans-serif; text-transform: uppercase; font-size: 32px; line-height: 1.4; }
.methode-item.piano:hover .content-methode { background-color: #A378B3; }
.methode-item.album .content-methode { background-color: #EC6607; color: #FFFFFF; font-family: 'Acme', sans-serif; font-size: 32px; line-height: 1.4; }
.methode-item.album:hover .content-methode { background-color: #F97D25; }
.methode-item .content-methode .img-fluid { -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.methode-item:hover .content-methode .img-fluid { margin-top: -8px; }
.methode-item .fleche-methode .lafleche { -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.methode-item.calimots:hover .fleche-methode .lafleche { fill:#14C4C4; }
.methode-item.piano:hover .fleche-methode .lafleche { fill:#9664A9; }
.methode-item.album:hover .fleche-methode .lafleche { fill:#EC6607; }
@media (max-width: 1199px)
{
.methode-item.calimots { margin-top: 0px; }
.methode-item.header { display: none; }
.methode-item { width: 100%; display: block; margin: 0px; padding: 10px; float: none; }
.methode-item .content-methode { width: 100%; margin-bottom: 24px; }
.methode-item .question-methode { width: 100%; text-align: left; }
.methode-item .fleche-methode { display: none; }
.methode-item .titre-methode { width: 100%; padding: 8px 8px; text-align: center; }
.methode-item .couv-methode { width: 100%; margin-top: 0px; text-align: center; }
.methode-item .content-methode .couv-methode .img-fluid { width: 200px; margin-bottom: 24px; }
.methode-item .content-methode:hover .img-fluid { margin-top: 0px; }
}
/*-----------------------*/
#calimots .bloc-methode { color: #666; }
#calimots .bloc-methode .container { }
#calimots .bloc-methode .h1 { font-weight: bold; font-size: 4em; margin-top: 0; color: #00A3A6; font-family: 'Proxima Nova'; }
#calimots .bloc-methode h3 { font-weight: 400; margin-top: 0; color: #00A3A6; }
#calimots .bloc-methode .container .row { margin: 16px; background-color: #12B3B3; background-color: #CBFAFA; background: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF 0%, #CBFAFA 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #CBFAFA 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #CBFAFA 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cbfafa',GradientType=0 ); padding: 32px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border-bottom: 4px solid #B7E6E6; }
/*-----------------------*/
#piano .bloc-methode { color: #666; }
#piano .bloc-methode .container { }
#piano .bloc-methode .h1 { font-weight: bold; font-size: 3em; margin-top: 0; color: #9664A9; font-family: 'Varela Round', sans-serif; text-transform: uppercase; }
#piano .bloc-methode h3 { font-weight: 400; margin-top: 0; color: #9664A9; }
#piano .bloc-methode .container .row { margin: 16px; background-color: #9664A9; background: #E4D7E9; background: -moz-linear-gradient(top, #FFFFFF 0%, #E4D7E9 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #E4D7E9 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #E4D7E9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4d7e9',GradientType=0 ); padding: 32px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border-bottom: 4px solid #C9B8CF; }
/*-----------------------*/
#album .bloc-methode { color: #666; }
#album .bloc-methode .container { }
#album .bloc-methode .h1 { font-weight: bold; font-size: 3em; margin-top: 0; color: #EC6607; margin-bottom: 0; font-family: 'Acme', sans-serif; }
#album .bloc-methode .h2 { font-size: 2em; margin-top: 0; color: #EC6607; font-family: 'Acme', sans-serif; }
#album .bloc-methode h3 { font-weight: 400; margin-top: 0; color: #EC6607; }
#album .bloc-methode .container .row { margin: 16px; background-color: #EC6607; background-color: #FDE5D5; background: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF 0%, #FDE5D5 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #FDE5D5 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #FDE5D5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fde5d5',GradientType=0 ); padding: 32px; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border-bottom: 4px solid #EBCEBC; }
/*-----------------------*/
.comparison.desktop { /*max-width: 940px;*/ margin: 0 auto; text-align: center; padding: 0px; border: 0px solid black; background-color: #FFFFFF; /*+border-radius: 8px;*/ -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; overflow: hidden; position: relative; }
.comparison p { margin: 0; font-size: 14px; text-align: left; }
.comparison ul { padding-left: 16px; margin-bottom: 0; }
.comparison ul li { text-align: left; font-size: 14px; }
.comparison table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; border-bottom: 1px solid #FFFFFF; }
.comparison td, .comparison th { border-right: 1px solid #FFFFFF; empty-cells: show; padding: 16px; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; white-space: normal !important; }
.comparison th:first-of-type { border-right: 1px solid #FFFFFF; empty-cells: show; padding: 10px; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; background-color: #FFFFFF; }
.compare-heading { font-size: 18px; font-weight: bold !important; border-bottom: 0 !important; padding-top: 10px !important; }
.comparison tbody tr:nth-child(odd) { /*display: none;*/ }
.comparison .compare-row { /*background: #EFF7FD;*/ }
.comparison.desktop tr { background-color: #F6F6F6; }
/*.comparison.desktop table td:nth-of-type(2) { background-color: #CBFAFA; }
.comparison.desktop table td:nth-of-type(3) { background-color: #F1D9F9; }
.comparison.desktop table td:nth-of-type(4) { background-color: #FFF0BD; }*/
.comparison.desktop table td:nth-of-type(2) { background-color: #F1D9F9; }
.comparison.desktop table td:nth-of-type(3) { background-color: #CBFAFA; }
.comparison .tickblue { color: #0078C1; }
.comparison .tickgreen { color: #009E2C; }
.comparison span.tickgreen { display: block; font-size: 40px; }
.comparison th { font-weight: normal; padding: 0; border-bottom: 1px solid #FFFFFF; }
.comparison.desktop tr td:first-child { text-align: left; font-weight: bold; color: #014479; }
.comparison .price-info { padding: 15px 15px 15px 15px; }
.comparison .price-info.calimot { background-color: #00A3A6; }
.comparison .price-info.piano { background-color: #9664A9; }
.comparison .price-info.album { background-color: #EC6607; }
.comparison .price-now, .comparison .price-now span { text-align: center; }
.comparison .price-now span.calimot { color: #FFFFFF; font-family: 'proxima_nova_altbold'; font-size: 2em; line-height: 1; }
.comparison .price-now span.piano { color: #FFFFFF; font-family: 'Varela Round', sans-serif; text-transform: uppercase; font-size: 1.6em; line-height: 1; }
.comparison .price-now span.album { color: #FFFFFF; font-family: 'Acme', sans-serif; font-size: 1.6em; line-height: 1; }
.comparison .price-now span { font-size: 24px; }
.comparison .price-small { font-size: 18px !important; position: relative; top: -11px; left: 2px; }
.comparison .price-buy { background: #FF5406; padding: 10px 20px; font-size: 12px; display: inline-block; color: #FFF; text-decoration: none; border-radius: 3px; text-transform: uppercase; margin: 5px 0 10px 0; }
.comparison .price-try { font-size: 12px; }
.comparison .price-try a { color: #202020; }
.comparison .prix { background-color: #ADC326; font-weight: bold; color: #FFFFFF !important; margin: 8px; display: inline-block; font-size: 1.5em; border: 0px solid black; text-shadow: 0 2px rgba(0, 0, 0, 0.1); }
.comparison .prix:hover { background-color: #9BB114; }
.comparison .bleue { background-color: #2CB8C5; font-weight: bold; color: #FFFFFF !important; margin: 8px 4px; display: inline-block; font-size: 1.5em; border: 0px solid black; text-shadow: 0 2px rgba(0, 0, 0, 0.1); }
.comparison .bleue:hover { background-color: #9BB114; }
.comparison .jaune { background-color: #E99B00; font-weight: bold; color: #FFFFFF !important; margin: 8px 4px; display: inline-block; font-size: 1.5em; border: 0px solid black; text-shadow: 0 2px rgba(0, 0, 0, 0.1); }
.comparison .jaune:hover { background-color: #9BB114; }
/*RESPONSIVE*/
@media screen and (max-width: 991px)
{
.comparison.desktop { overflow: auto; }
.comparison td, .comparison th { width: 260px; }
/*.comparison td:first-child, .comparison th:first-child { display: none; }*/
}
.comparison.mobile { display: none; }
.comparison.mobile table { margin-bottom: 16px; }
.comparison.mobile table td { background-color: #F6F6F6; }
.comparison.mobile table.tab-calimots td { background-color: #DDF9FA; }
.comparison.mobile table.tab-piano td { background-color: #EAE0EE; }
.comparison.mobile table.tab-album td { background-color: #FAE6D8; }
/*-----------------------*/
@media (max-width: 991px)
{
#mdl-cp .bloc-methode { margin: 0px; }
#mdl-cp .bloc-methode .container .row { margin: 8px; padding: 8px; }
#methodes .bloc-methode { margin-bottom: 10px; }
#methodes .bloc-methode:hover { /*+box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2);*/ -moz-box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); -webkit-box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); box-shadow: 0px 16px 32px rgba(60, 99, 127, 0.2); margin-top: 0px; margin-bottom: 10px; }
}
@media (min-width: 640px) and (max-width: 767px)
{
.comparison p, .comparison ul li { font-size: 12px; }
.comparison tbody tr:nth-child(odd) { display: table-row; background: #F7F7F7; }
.comparison .row { background: #FFF; }
.comparison td, .comparison th { border: 1px solid #FFF; }
.price-info { border-top: 0 !important; }
}
@media (max-width: 639px)
{
#mdl-cp .bloc-methode .container .row { margin: 8px; padding: 16px; }
#mdl-cp .display-1 { font-size: 1.8em; }
#mdl-cp .h1 { font-size: 2.2em !important; text-align: center; }
#mdl-cp h2 { font-size: 1.6em; }
#mdl-cp .h2 { font-size: 1.6em !important; }
#mdl-cp h3 { font-size: 1em !important; }
.comparison .price-buy { padding: 5px 10px; }
.comparison td, .comparison th { }
.comparison .hide-mobile { display: none; }
.comparison .price-now span { font-size: 16px; }
.comparison .price-small { font-size: 16px !important; top: 0; left: 0; }
.comparison .qbse, .comparison .qbo { font-size: 12px; padding: 10px 5px; }
.comparison .price-buy { margin-top: 10px; }
.compare-heading { font-size: 13px; }
}
/*-----------------------*/
/* SCROLL */
/* ::-webkit-scrollbar { width: 24px !important; } */
/* ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; -webkit-border-radius: 10px !important; border-radius: 10px !important; } */
/* ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #375972 !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } */
/* ::-webkit-scrollbar-thumb:window-inactive { background: #A6A6A6 !important; } */