/* ===========================  
       FONTS
========================== */
@font-face {
    font-family: 'martinaregular';
    src: url('../fonts/Martina/martina_regular-webfont.eot');
    src: url('../fonts/Martina/martina_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Martina/martina_regular-webfont.woff') format('woff'),
         url('../fonts/Martina/martina_regular-webfont.svg#martinaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ===========================  
       Global
========================== */
.container {width: 1180px; max-width: 100%; margin-right: auto; margin-left: auto;}
body {font-family: 'Lato', sans-serif;}
img {max-width: 100%; height: auto;}

.btn-cta {width: 100%; text-align: center;}
.btn-cta a {font-weight: bold; font-size: 20px; text-align: center; display: inline-block; margin: auto; text-decoration: none; color: black; background-color: #f2e400; padding: 20px 30px;}
.btn-cta a:hover {background-color: rgba(242, 228, 0, 0.8);}

.tac {text-align: center;}
.tal {text-align: left;}

.yellow {color: #f2e400;}
.white {color: white;}

li {list-style-type: none;}

/* ===========================  
       HOME
========================== */

header {position: relative;}
.home header {height: 100vh; width: 100%; background: url(../img/bg-header-diet-and-coach.jpg) no-repeat center center; background-size: cover; display: flex; flex-direction: column; justify-content: space-around; align-items: center;}
.home header>img {background-color: rgba(255, 255, 255, 0.8); padding: 4%; max-width: 50vw;}
.home header h1 {font-family: 'martinaregular'; max-width: 100%; font-size: 60px; background-color: rgba(255, 255, 255, 0.8); width: 25%; text-align: center; padding: 1%; position: relative; width: calc(385px + 6%); padding: 1%; margin: 0 0 75px 0;}
#primary-menu {width: 100%; position: absolute; bottom: 0; left: 0; background-color: white; height: 75px; -webkit-box-shadow: 0px 3px 5px 0px rgba(163,163,163,1); -moz-box-shadow: 0px 3px 5px 0px rgba(163,163,163,1); box-shadow: 0px 3px 5px 0px rgba(163,163,163,1);}
#primary-menu.fixed-top {position: fixed; top: 0; z-index: 1000;}
#primary-menu div {display: flex; justify-content: space-between; align-items: center; height: 100%;}
#primary-menu ul {display: flex; list-style-type: none; padding: 0; width: 55%; justify-content: space-between;}
#primary-menu ul li {position: relative;}
#primary-menu ul a {text-decoration: none; font-size: 16px; color: black; z-index: 1; position: relative;}
#primary-menu ul li:not(:last-of-type):hover {background: url("../img/trait-hover-menu.png") no-repeat center center; background-size: cover;}
#primary-menu ul .social a {padding-right: 15px; font-size: 18px;}
#primary-menu .menu-burger {display: none;}
.fab.fa-facebook-square {color: #4267b2;}
.fab.fa-youtube {color: #e62117;}

.home section h2, .page-editorial header h2, .page-listing-recettes h1, .page-temoignage h1, #le-concept h2 {font-family: 'martinaregular'; font-size: 40px; display: flex; align-items: center;}
.home section h2 i, .page-editorial header h2 i, .page-listing-recettes h1 i, .page-temoignage h1 i, #le-concept h2 i {font-size: 70px; color: #f2e400; padding-right: 25px;}

section#actu {position: relative; display: flex; justify-content: space-around; align-items: center; margin: 100px auto;}
section#actu .bg-new-actu {position: absolute; top: 0; left: 0;}
section#actu .bg-new-atu-reverse {transform: rotate(180deg); position: absolute; right: 0; bottom: 0;}
section#actu .image-actu {padding: 60px; max-width: 40%;}
section#actu div.youtube {margin: 60px; width: 100%;}
section#actu div.youtube:after {content: ''; padding-top: 56.25%; display: block;}
section#actu div.play-button {padding: 0;}
section#actu div:not(.play-button) {padding: 60px; width: 100%;}
section#actu div h2 {text-align: center;}

div.mots-cles {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 130px 0 100px 0; position: relative; background: url("../img/bg-mots-cles.png") no-repeat center center; background-size: 100%; margin-bottom: 75px;}
div.mots-cles span {padding: 10px; position: relative;}

.times {font-family: 'Times New Roman', Times, serif;}
.fs2 {font-size: 2em;}
.fs25 {font-size: 25px;}
.fs30 {font-size: 30px;}
.fs40 {font-size: 40px;}
.fs45 {font-size: 45px;}
.bold {font-weight: bold;}
.bolder {font-weight: bolder;}
.lighter {font-weight: lighter;}
.normal {font-weight: normal;}
.italic {font-style: italic;}

#le-concept {background: url(../img/bg-le-concept-diet-and-coach.png) no-repeat top 100px center; background-size: cover; padding-bottom: 35px;}
#le-concept>article>div:first-of-type {background-color: rgba(255, 255, 255, 0.75); padding-left: 120px; padding-right: 60px; max-width: 685px; margin: auto;}
#le-concept article>div:first-of-type div:nth-of-type(1) {width: 40%; display: inline-block; margin-right: 10%;}
#le-concept article>div:first-of-type div:nth-of-type(2) {display: flex; margin-top: 15px;}
#le-concept article>div:first-of-type div:nth-of-type(2) p {width: 40%; display: inline-block; margin-right: 10%;}
#le-concept article h2 {text-align: center; font-size: 35px; padding-bottom: 35px; justify-content: center;}
#le-concept article h2.titre {padding-bottom: 0;}

#recettes {position: relative; margin: 75px auto;}
#recettes article {align-items: center;}
#recettes > .btn-cta {margin: 90px auto;}
#recettes article .btn-cta a {font-size: 18px; display: block;}
#recettes .bg-recettes-home {position: absolute; top: 0; left: 5%;}
#recettes .bg-recettes-home-reverse {position: absolute; bottom: 0; right: 5%; transform: rotate(180deg);}
#recettes h2 {justify-content: center;}
#recettes h3 {font-weight: lighter; width: 100%; text-align: center;}
#recettes h3 a {text-decoration: none; color: black;}
.home-recette, .page-temoignage .home-recette {display: flex; justify-content: space-between; margin-bottom: 30px;}
.home-recette-reverse {display: flex; flex-direction: row-reverse; justify-content: space-between;}
#recettes article div.youtube {width: 50%;}
#recettes article div.youtube:after {content: ''; display: block; padding-top: 56.25%;}
#recettes article>div {width: 24%;}
#recettes article>div:first-of-type {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.home #recettes article>div:first-of-type:hover {cursor: pointer;}
/*#recettes article>div:last-of-type {display: flex; justify-content: space-around; flex-direction: column;}*/

#map {height: 690px;}

#contact h2 {justify-content: center;}
#contact .coordonnees {text-align: center; background-color: #f2e400; position: relative; font-weight: bold; font-size: 25px; color: #393939; line-height: 40px;}
#contact .coordonnees .container {position: relative;}
#contact .coordonnees p {padding: 40px 0; display: inline-block; margin: 0 0 0 80px;}
#contact .coordonnees p i {transform: rotate(90deg);}
#contact .coordonnees img {position: absolute; bottom: 0; left: 0;}
#contact .contact-form {display: flex; justify-content: space-between; align-items: center; background: url(../img/bg-contact-diet-and-coach-trait.png) no-repeat center center;}
#contact .contact-form form {display: flex; flex-direction: column; align-items: center; width: 100%;}
#contact input, #contact input::placeholder, #contact textarea, #contact textarea::placeholder {color: #b9b9b9;; font-size: 16px;}
#contact input, #contact textarea {border: 2px solid #b9b9b9;}
#contact .contact-form form input:not([type="submit"]), textarea {width: 390px; max-width: 100%; margin-bottom: 10px; padding: 15px; max-width: 90%;}
#contact .contact-form form input:not([type="submit"]) {height: 15px;}
#contact .contact-form form input[type="submit"] {background-color: #f2e400; width: 170px; height: 50px; border: none; font-size: 18px; color: #393939; font-weight: bold;}

footer {height: 80px; background-color: #393939; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: auto;}
footer>div {display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid white;}
footer>div>p {color: white; font-style: italic;}
footer>div img {height: 100px;}
footer .social i.fab.fa-facebook-square, footer .social i.fab.fa-youtube  {color: #f2e400;}
footer .social a {margin: 5px; font-size: 20px;}
footer ul {display: flex; justify-content: flex-end; align-items: center; padding: 0;}
footer ul a, footer ul span {color: white; text-decoration: none;}
footer ul span {margin: 0 5px;}
/* ===========================
     PAGE EDITORIAL
========================== */
.page-editorial header>div, .page-listing-recettes header>div, .page-temoignage header>div {background-color: #f2e400; display: flex; justify-content: center; align-items: center; height: 110px; margin: 107px 0 65px 0;}
.page-editorial header>div h2, .page-listing-recettes header>div h1, .page-temoignage header>div h1, .page-temoignage header>div h1 {background-color: white; height: 100%; padding: 0 30px;}
/* ===========================
     LISTING RECETTES
========================== */
.ctn-filter-recettes, .ctn-filter-diaporama {display: flex; justify-content: flex-end; margin-bottom: 65px;}
.ctn-filter-recettes .filter-recette, .ctn-filter-diaporama .filter-diaporama {margin-left: 15px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; color: #393939; width: 150px; height: 50px;}
.ctn-filter-recettes .filter-recette:hover, .ctn-filter-diaporama .filter-diaporama:hover {cursor: pointer;}
.ctn-filter-recettes .filter-recette.active, .ctn-filter-diaporama .filter-diaporama.active {background-color: #f2e400;}
.ctn-filter-recettes .filter-recette img {height: 35px; width: auto; margin-right: 15px;}

.page-listing-recettes section:first-of-type {display: flex; justify-content: flex-start; flex-wrap: wrap;}
.page-listing-recettes section:first-of-type article {width: 30%; margin: 0 1.66% 40px 1.66%; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; cursor: pointer; position: relative;}
.page-listing-recettes .article-listing-recette figure, aside figure {margin: 0; width: 100%; height: 300px; max-height: 30vw;}
.page-listing-recettes .article-listing-recette figure img, aside figure img {object-fit: cover; width: 100%; height: 100%;}
.page-listing-recettes .titre-recette {display: flex; justify-content: flex-start; align-items: center; width: 85%;}
.page-listing-recettes .titre-recette img {padding: 10px;}
.page-listing-recettes .titre-recette h3 {text-align: center;}
.page-listing-recettes .titre-recette h3 a {text-decoration: none; font-weight: lighter; font-size: 14px; color: #000;}
.page-listing-recettes .bg-hover-recettes {position: absolute; top: 5%; left: 5%; display: none;}
.page-listing-recettes .bg-hover-recettes-reverse {position: absolute; bottom: 130px; right: 5%; transform: rotate(180deg); display: none;}
.page-listing-recettes .bg-hover-recettes {position: absolute; top: 5%; left: 5%; display: none;}
.page-listing-recettes .bg-hover-recettes.active, .page-listing-recettes .bg-hover-recettes-reverse.active {display: block;}
/* ===========================
     PAGE TEMOIGNAGE
========================== */
.intro-temoignage {position: relative; display: flex; justify-content: center; align-items: center;}
.intro-temoignage-left {width: 55%; position: relative; padding: 0 3%; display: inline-block;}
.intro-coaching-right {height: 180px; width: auto; display: inline-block; }
.guillemets-ouverts {position: absolute; top: 0; left: 0; height: 110px;}
.guillemets-fermes {position: absolute; bottom: 0; right: 0; height: 110px;}
.on-en-parle {padding-top: 40px;}
.l-exemple {margin: 75px 0; background-color: #393939; padding: 50px 0; text-align: center; padding: 20px 0;}
.l-exemple .container { position: relative; padding: 20px 0 30px 0;}
.l-exemple .container div {max-width: 880px; margin: auto;}
.l-exemple i {color: #f2e400; font-size: 4em; margin-bottom: 15px;}
/* .page-temoignage .home-recette {align-items: flex-start;} */
.page-temoignage #recettes article {align-items: center;}
.page-temoignage .home-recette-reverse {margin-bottom: 30px;}
.page-temoignage #recettes {padding: 75px 0;}
.page-temoignage #recettes hr {width: 33%; min-width: 200px; border-bottom: 2px solid #f2e400; border-top: none; border-left: none; border-right: none;}
.page-temoignage #recettes hr:last-of-type {display: none;}
.page-temoignage #recettes article div:not(.play-button) {min-width: 24%;}
.page-temoignage #recettes article>div:first-of-type {width: auto; justify-content: center; min-width: 24%; margin: 0 1%;}
.page-temoignage #recettes article>div:first-of-type p {width: 100%;}
.page-temoignage #recettes article h3 img.mini-quote, .page-temoignage #recettes article h3 img.mini-quote-reverse {height: 40px; vertical-align: middle; margin: 0 15px;}
/*
.page-temoignage .home-recette>div:first-of-type {background: url("../img/quotations.png") no-repeat top 50% left; background-size: contain; background-size: auto 100px;}
.page-temoignage .home-recette-reverse>div:first-of-type {background: url("../img/quotations-reverse.png") no-repeat top 50% right; background-size: auto 100px;}
*/
.page-temoignage #recettes article>div:last-of-type {min-width: 24%; margin: 0 1%;}
.page-temoignage #recettes article div.youtube {min-width: 49%;}
.page-temoignage #recettes article div.youtube:after {content: ''; display: block; padding-top: 56.25%;}
/* ===========================
     PAGE DETAIL RECETTE
========================== */

.btn-precedent {position: fixed; left: 10px; top: 50%; color: #f2e400; text-decoration: none; z-index: 10;}
.btn-suivant {position: fixed; right: 10px; top: 50%; color: #f2e400; text-decoration: none; z-index: 10;}
.btn-precedent i, .btn-suivant i {font-size: 70px;}


.page-detail-recette .recette-title {width: 100%; margin: auto; display: flex; align-items: center; text-align: center; justify-content: center; background: url("../img/bg-titre-recette.png") no-repeat center center; min-height: 204px;}
.page-detail-recette .recette-title img {margin-right: 15px;}
.page-detail-recette .recette-title h1 {font-size: 25px; text-align: center; font-weight: bold; max-width: 400px;}
.page-detail-recette article {position: relative; margin-bottom: 50px; margin-top: 15px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.page-detail-recette>article>div:last-of-type {display: flex; align-items: flex-start; margin-top: 50px; width: 100%;}
.page-detail-recette>article>div:last-of-type div:not(.youtube):not(.play-button) {width: 50%;}
.page-detail-recette>article>div:last-of-type>div:first-of-type {margin-right: 15px;}
.page-detail-recette>article>div:last-of-type div iframe {width: 100%;}
.page-detail-recette .youtube {width: 100%;}
.page-detail-recette .youtube:after {content: ''; display: block; padding-top: 56.25%;}
.page-detail-recette>article>div:last-of-type div:last-of-type {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom: 50px;}
.page-detail-recette>article>div:last-of-type div:last-of-type:not(.youtube) img {margin-bottom: 15px; max-width: 80%;}
.page-detail-recette>article>div:last-of-type div:last-of-type .btn-cta {width: auto; margin-bottom: 0;}
.page-detail-recette>article>div:last-of-type div:last-of-type .btn-cta a {margin: 0;}
.page-detail-recette>article>img {transform: rotate(180deg); position: absolute; bottom: 0; right: 0;}
.page-detail-recette>h2 {font-family: martinaregular; font-size: 30px;}
aside {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

aside article {width: 30%; margin: 1.66%; cursor: pointer; }

/* ===========================
     PAGE COACHING
========================== */
.div-intro-coaching {display: flex; justify-content: space-between; align-items: center;}
.div-intro-coaching>div { background: url("../img/bg-contact-diet-and-coach-trait.png") no-repeat center center; background-size: contain;}
.div-intro-coaching>img {max-width: 40%; height: auto;}
.intro-coaching {width: 75%; margin-left: auto; margin-right: auto;}
#prochain-coaching {position: relative; margin: 50px auto; padding: 50px; width: 60%; display: flex; justify-content: space-around; align-items: center;}
#prochain-coaching div:first-of-type {display: flex; flex-direction: column;}
#prochain-coaching div:first-of-type span:first-of-type {color: #f2e400; font-size: 100px; font-weight: bolder; text-align: center;}
#prochain-coaching div:first-of-type span:last-of-type {text-align: center; font-size: 25px;}
#prochain-coaching div:last-of-type {width: 60%;}
#prochain-coaching>img:first-of-type {position: absolute; top: 0; left: 0;}
#prochain-coaching>img:last-of-type {position: absolute; bottom: 0; right: 0; transform: rotate(180deg);}

.lieu-type-coaching {margin: 50px auto; background-color: #393939;}
.lieu-type-coaching article {margin: 50px auto; display: flex; justify-content: space-around; align-items: flex-start; position: relative; z-index: 1; padding: 50px 0;}
.lieu-type-coaching div {text-align: center; width: 50%; margin-bottom: 20px; color: white;}
.lieu-type-coaching .trait-biseau {position: absolute; z-index: 10; top: 0; left: 0; width: 50%; height: 100%; border-right: solid 10px #f2e400; transform: skewX(-20deg);}
.lieu-type-coaching div i {color: #f2e400; font-size: 4em; margin-bottom: 15px;}
.lieu-type-coaching div p {display: block; width: 50%; margin: auto;}
.lieu-type-coaching div p strong {color: #f2e400; font-weight: normal;}

.diaporama-coaching {height: 400px; margin-bottom: 50px; position: relative;}
.diaporama-coaching.owl-carousel .owl-stage-outer {max-height: 100%;}
.diaporama-coaching.owl-carousel .owl-item {display: flex; justify-content: center; align-items: center;}
.diaporama-coaching.owl-carousel .owl-item img {height: 400px; width: auto;}
.diaporama-coaching .owl-prev span {position: absolute; top: 30%; left: 10px; color: #f2e400; font-size: 8em; background-color: rgba(255, 255, 255, 0.8); padding-bottom: 20px;}
.diaporama-coaching .owl-next span {position: absolute; top: 30%; right: 10px; color: #f2e400; font-size: 8em; background-color: rgba(255, 255, 255, 0.8); padding-bottom: 20px;}

.ctn-filter-diaporama {margin-top: 50px;}

/* ===========================
     RESPONSIVE
========================== */
@media screen and (max-width: 1280px) {
     .container {margin-left: 2%; margin-right: 2%; width: auto;}
}
@media screen and (max-width: 1220px) {
    section#actu div {padding-left: 0;}
}
@media screen and (max-width: 1185px) {
    .l-exemple .container div {margin: 80px auto;}
}
@media screen and (max-width: 1180px) {
    /*#indy-masonry-container {display: none;}*/
}
@media screen and (max-width: 1150px) {
     #contact .coordonnees img {width: 35%;}
     #contact .contact-form {padding: 30px 0;}
     #contact .contact-form>img {max-width: 50%;}
}
@media screen and (max-width: 1100px) {
     #primary-menu ul {width: 60%;}
     section#actu div {padding-left: 0;}
     section#actu .image-actu {padding-right: 30px;}
    #recettes article iframe {width: 45%;}
}
@media screen and (max-width: 1000px) {
    .page-detail-recette>article>div:last-of-type div:last-of-type .btn-cta {padding-bottom: 75px;}

    .page-temoignage #recettes article {flex-wrap: wrap;}
    .page-temoignage #recettes article>:nth-child(1):not(.trait-biseau), .page-temoignage article>:nth-child(2):not(.trait-biseau) {width: 49%!important;}
    .page-temoignage #recettes article>div.full-size {width: 100%!important;}
    .page-temoignage #recettes article>:nth-child(3) {width: 99%;}

    .lieu-type-coaching div p {width: 65%;}

    .page-temoignage #recettes article>div:first-of-type {margin: 0;}

}
@media screen and (max-width: 950px) {
     #primary-menu ul {width: 70%;}
    div.mots-cles span {padding: 5px;}
     #contact .contact-form {justify-content: space-around;}
     #contact .contact-form form {width: 45%;}
    #contact .coordonnees .container {display: flex; justify-content: space-around; align-items: center;}
    #contact .coordonnees img {position: relative; height: 100%; width: auto;}
    #contact .coordonnees p {margin: 0;}
}
@media screen and (max-width: 900px) {
     #contact .contact-form {justify-content: space-around;}
     #contact .contact-form form {width: 45%;}

    .div-intro-coaching {flex-direction: column;}
    .div-intro-coaching>img {max-width: 75%;}

}
@media screen and (max-width: 880px) {
    #le-concept>article>div:first-of-type {margin: 0 2%;}
    #le-concept .btn-cta {width: auto; margin: 0 6%;}
}
@media screen and (max-width: 850px) {
    .home-recette, .page-temoignage .home-recette {flex-wrap: wrap;}
    #recettes article>div {width: 50%;}
    #recettes article div:nth-of-type(3) {width: 100%;}
    .home-recette-reverse {flex-wrap: wrap;}
}
@media screen and (max-width: 830px) {
    #contact .contact-form {flex-direction: column;}
    #contact .contact-form form {margin-bottom: 35px; width: 100%;}
    #contact .contact-form>img {max-width: 100%;}
}
@media screen and (max-width: 800px) {
    #primary-menu ul.responsive {display: none; flex-direction: column; width: 100%; position: absolute; top: calc(75px - 16px); left: 0; background-color: white; z-index: 10; height: calc(100vh - 75px); background-color: #393939;}
    #primary-menu ul.responsive li {padding: 10px 2%; margin: 0 3%;}
    #primary-menu ul.responsive li:not(:last-of-type) {border-bottom: 1px solid #f2e400;}
    #primary-menu ul.responsive li.social {display: flex; justify-content: center;}
    #primary-menu ul.responsive li.social a {font-size: 23px;}
    #primary-menu ul.responsive li.social a i {color: white;}
    #primary-menu ul li:not(:last-of-type):hover {background: none;}
    #primary-menu ul.responsive li a {font-size: 18px; font-weight: bold; display: block; color: white;}
    #primary-menu ul li:hover {background: none;}
    #primary-menu ul.responsive .social {display: block; padding: 10px 3%;}
    #primary-menu .menu-burger {display: block; font-size: 30px;}
    .page-temoignage #recettes .bg-recettes-home, .page-temoignage #recettes .bg-recettes-home-reverse {display: none;}

    section#actu {flex-direction: column;}
    section#actu .image-actu, section#actu div.youtube {max-width: 75%; padding-bottom: 0;}
    section#actu div.youtube {margin-bottom: 0;}
    section#actu div:not(.play-button) {padding-right: 0; width: 75%; padding-top: 0; padding-left: 0;}
    #le-concept>article>div:first-of-type {padding-right: 50px; padding-left: 100px;}

    #recettes h2 {padding-top: 70px;}
    #recettes > .btn-cta {padding-bottom: 60px;}

    #prochain-coaching {width: 75%;}
    .lieu-type-coaching article {flex-direction: column;}
    .lieu-type-coaching div {width: 75%; min-width: 300px; margin: 45px auto;}
    .lieu-type-coaching .trait-biseau {width: 100%; transform: skew(0deg, -10deg); height: calc(50% - 68px); border-bottom: 5px solid #f2e400; border-right: 400px;}
}
@media screen and (max-width: 780px) {
    #contact .coordonnees .container {flex-direction: column-reverse; padding-bottom: 40px;}
    #contact .coordonnees img {max-width: 100%; height: auto;}

    .page-listing-recettes section:first-of-type article, aside article {width: 45%; margin: 0 2.5% 40px 2.5%;}
    .page-listing-recettes .article-listing-recette figure, aside article figure {max-height: 45vw;}
}
@media screen and (max-width: 770px) {
    section#actu {margin: 100px auto 50px auto;}
     #le-concept>article>div:first-of-type {padding-right: 30px; padding-left: 60px;}

    .page-detail-recette>article>div:last-of-type {flex-direction: column; align-items: center;}
    .page-detail-recette>article>div:last-of-type div:not(.youtube):not(.play-button) {width: 75%; margin: 0 2%;}
    .page-detail-recette>article>div:last-of-type div:last-of-type {align-items: center;}
    .page-detail-recette>article>img {display: none;}
    .page-detail-recette>article>div:last-of-type div:last-of-type img {max-width: 100%;}

}
@media screen and (max-width: 715px) {
    .l-exemple .container div {margin: 105px auto;}
    div.mots-cles {margin-bottom: 0; padding: 13% 0;}
}
@media screen and (max-width: 705px) {
    #le-concept article>div:first-of-type div:nth-of-type(1) {width: 45%; margin-right: 4%;}
    .fs25 {font-size: 13px;}
    .fs30 {font-size: 15px;}
    .fs40 {font-size: 20px;}
    .fs45 {font-size: 23px;}
}
@media screen and (max-width: 660px) {
    #le-concept article>div:first-of-type div:nth-of-type(2) p {margin-right: 5%; width: 45%;}
}
@media screen and (max-width: 650px) {
    #prochain-coaching {flex-direction: column;}
    #prochain-coaching div:last-of-type {width: 75%; margin-top: 20px;}
    /*#prochain-coaching div:last-of-type h3 {text-align: center;}*/

}
@media screen and (max-width: 640px) {
    #le-concept>article>div:first-of-type {display: block; padding-right: 10%; padding-left: 10%;}
    #le-concept>article>div:first-of-type img {margin-right: auto; margin-left: auto; display: block;}
    #le-concept article>div:first-of-type div:nth-of-type(1), #le-concept article>div:first-of-type div:nth-of-type(2) p {width: 100%; margin-right: 0;}
    #le-concept article>div:first-of-type div:nth-of-type(2) {flex-direction: column;}
}
@media screen and (max-width: 600px) {
    section#actu {margin-bottom: 10px;}
    .page-detail-recette>article>div:last-of-type div:not(.youtube):not(.play-button) {width: 100%; margin: 0 2%;}
    .btn-precedent i, .btn-suivant i {font-size: 50px;}
}
@media screen and (max-width: 550px) {
    .ctn-filter-recettes, .ctn-filter-diaporama {justify-content: space-around; flex-wrap: wrap;}
    .ctn-filter-recettes .filter-recette, .ctn-filter-diaporama .filter-diaporama {margin: 2%; width: auto; min-width: 100px;}

    .article-temoignage {flex-direction: column;}
    .page-temoignage #recettes article.article-temoignage>div:nth-child(1), .page-temoignage #recettes article.article-temoignage>div:nth-child(2), .page-temoignage #recettes article.article-temoignage iframe {width: 100%!important;}
    .intro-temoignage {flex-direction: column;}
    .intro-temoignage-left {width: 98%;}
}
@media screen and (max-width: 500px) {
    .home header h1 {font-size: 40px; padding-right: 0; padding-left: 0;}
    #recettes article>div {width: 100%;}

    .page-listing-recettes section:first-of-type article, aside article {width: 90%; margin: 0 5% 40px 5%;}
    .page-listing-recettes .article-listing-recette figure, aside article figure {max-height: 90vw;}

    .page-temoignage #recettes article>:nth-child(1), .page-temoignage article>:nth-child(2), .page-temoignage article>:nth-child(3) {width: 100%!important;}

    .page-detail-recette .recette-title {background-size: contain;}
}
@media screen and (max-width: 400px) {
    /*.page-editorial header>div, .page-listing-recettes header>div, .page-temoignage header>div {background-color: transparent;}*/
    .page-editorial header>div h2, .page-listing-recettes header>div h1, .page-temoignage header>div h1, .page-temoignage header>div h1 {font-size: 25px; padding: 0 20px;}
    .home section h2 i, .page-editorial header h2 i, .page-listing-recettes h1 i, .page-temoignage h1 i, #le-concept h2 i {font-size: 50px;}
    #recettes .bg-recettes-home-reverse {display: none;}

    footer ul.container li {display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; margin: 0 auto; height: 80%;}
    footer ul span {display: none;}

    #prochain-coaching {padding: 80px 35px;}
}

/*-----------------------------
       CSS MASONRY
----------------------------*/


/* Masonry grid */
.masonry {
    transition: all .5s ease-in-out;
    column-gap: 30px;
    column-fill: initial;
    margin: 50px auto;
}

/* Masonry item */
.masonry .brick {
    margin-bottom: 30px;
    display: inline-block; /* Fix the misalignment of items */
    vertical-align: top; /* Keep the item on the very top */
    float: left;
}

.masonry .brick img {width: 100%;}

/* Bordered masonry */
.masonry.bordered {
    column-rule: 1px solid #eee;
    column-gap: 50px;
}

.masonry.bordered .brick {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
}

/* Gutterless masonry */
.masonry.gutterless {
    column-gap: 0;
}

.masonry.gutterless .brick {
    margin-bottom: 0;
}

/* Masonry on tablets */
@media screen and (max-width: 1000px) {
    .masonry {
        column-count: 2;
    }
}

@media screen and (max-width: 500px) {
    .masonry {
        column-count: 1;
    }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
    .desc {
        font-size: 1.25em;
    }

    .intro {
        letter-spacing: 1px;
    }

    .masonry {
        column-count: 3;
    }
}

/* youtube */
.youtube {
    background-color: #000;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube>img {height: 100%; width: auto; margin: auto; top: 0; bottom: 0; right: 0; left: 0; }
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}