/* Reset et généralités */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'PublicSans';
    font-weight: 100;
    font-size: 18px;
    line-height: 1.44em;
    font-variant-ligatures: no-common-ligatures;
    /* évite bug de rendu de ff et fi */
    background: white;
    color: #171717;
    overflow-y: scroll;
    min-width: 290px;
}

main,
header,
footer,
aside,
section,
article,
nav {
    display: block;
}

b,
strong {
    font-family: 'PublicSans';
    font-weight: 500;
}

.std-width {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1380px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width:1440px) {
    .std-width.without-left-padding {
        padding-left: 0;
    }

    .std-width.without-right-padding {
        padding-right: 0;
    }
}

.std-section-padding {
    padding-top: 90px;
    padding-bottom: 90px;
}

.std-section-padding.page-title {
    padding-bottom: 0;
}

.std-section-padding.page-title+main {
    padding-top: 20px;
}

.title-outside-wysiwyg {
    font-family: 'PublicSans';
    font-weight: 600;
    font-size: 44px;
    line-height: 1.05em;
    color: black;
    margin-bottom: 30px;
}

.anchor {
    position: absolute;
    margin-top: -100px;
}


/* Formulaires */
.contact-form {
    margin-top: 2em;
}

.contact-form label {
    font-weight: normal;
    font-family: 'PublicSans';
    margin-top: 0.25em;
}

.grunion-field-textarea-wrap label {
    visibility: hidden;
}

input:not([type="checkbox"]),
textarea {
    font-family: 'PublicSans';
    font-weight: 100;
    font-size: 16px;
    background: white;
    color: #909090;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    box-sizing: border-box;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="url"] {
    height: 50px;
    padding: 0 0 0 20px;
}

textarea {
    padding: 20px 20px;
}

input::placeholder {
    color: #AAAAAA;
    opacity: 1;
}

input:-ms-input-placeholder {
    color: #AAAAAA;
}

input::-ms-input-placeholder {
    color: #AAAAAA;
}

textarea::placeholder {
    color: #AAAAAA;
    opacity: 1;
}

textarea:-ms-input-placeholder {
    color: #AAAAAA;
}

textarea::-ms-input-placeholder {
    color: #AAAAAA;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
    box-shadow: 0 0 7px #6B94FF;
    outline: none;
}

input[type="buttom"],
input[type="submit"],
button,
.primary-btn {
    position: relative;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-family: 'PublicSans';
    font-size: 20px;
    background: #FA6400;
    color: white;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    text-decoration: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    outline: none;
}

input[type="buttom"]:hover,
input[type="submit"]:hover,
button:hover,
.primary-btn:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

input[type="buttom"]:hover:before,
input[type="submit"]:hover:before,
button:hover:before,
.primary-btn:hover:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .15);
}

input[type="buttom"]:focus:before,
input[type="submit"]:focus:before,
button:focus:before,
.primary-btn:focus:before {
    display: none;
}

input[type="buttom"]:focus,
input[type="submit"]:focus,
button:focus,
.primary-btn:focus {
    box-shadow: 0 0 7px #6B94FF;
    outline: none;
}

input[type="buttom"]:active,
input[type="submit"]:active,
button:active,
.primary-btn:active {
    background: #E15A00;
    box-shadow: none;
}

.contact-submit {
    text-align: right;
}

.contact-submit button {
    padding-left: 3em;
    padding-right: 3em;
    border-radius: 5px;
}

.secondary-btn {
    position: relative;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 20px;
    background: none;
    color: #FA6400;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    border: 1px solid #FA6400;
    border-radius: 5px;
    text-decoration: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
    transition: all .2s linear;
}

.secondary-btn:hover {
    border-color: #FB7B26;
    background: #FB7B26;
    color: white;
}

.secondary-btn:focus {
    box-shadow: 0 0 7px #6B94FF;
    outline: none;
}

.secondary-btn:active {
    border-color: #E15A00;
    background: #E15A00;
    color: white;
}

.secondary-btn.locked {
    border-color: black;
    color: black;
    opacity: .1;
}


/* Date-range-picker */
.date-picker-wrapper {
    padding: 0;
    border: none;
    background: none;
}

.date-picker-wrapper.no-topbar {
    padding-top: 0;
}

.date-picker-wrapper.no-shortcuts {
    padding-bottom: 0;
}

.date-picker-wrapper.inline-wrapper {
    display: block;
}

.date-picker-wrapper .month-wrapper {
    border: none;
    border-radius: 0;
    padding: 0;
    width: auto !important;
}

.date-picker-wrapper .month-wrapper table {
    float: none;
    width: calc(100% - 24px);
    margin: 0 12px;
    table-layout: fixed;
}

.date-picker-wrapper .month-wrapper table th {
    line-height: 1em;
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 36px;
    line-height: 36px;
    text-transform: none;
    background: #FBFBFB;
}

.date-picker-wrapper .month-wrapper table .week-name th:first-child,
.date-picker-wrapper .month-wrapper table .week-name th:last-child {
    position: relative;
}

.date-picker-wrapper .month-wrapper table .week-name th:first-child:before {
    content: '';
    background: #FBFBFB;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}

.date-picker-wrapper .month-wrapper table .week-name th:last-child:before {
    content: '';
    background: #FBFBFB;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -12px;
    width: 12px;
}

.date-picker-wrapper .month-wrapper table .week-name th {
    font-size: 18px;
    line-height: inherit;
    font-weight: 300;
    color: black;
    width: calc(100% / 7);
}

.date-picker-wrapper .month-name {
    text-transform: none;
    font-size: 18px;
    line-height: 60px;
    font-weight: 300;
    color: black;
}

.date-picker-wrapper .month-name select {
    border: 0;
    padding: 0 10px;
}

.date-picker-wrapper table .caption {
    height: 60px;
}

.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
    width: auto;
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
    font-size: 0;
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url(../img/calendar-arrow.svg) no-repeat center center;
}

.date-picker-wrapper table .caption .next {
    transform: rotateZ(180deg);
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
    background-color: #FBFBFB;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background: none;
}

.date-picker-wrapper .month-wrapper table tbody tr:first-child td {
    padding-top: 8px;
}

.date-picker-wrapper .month-wrapper table tbody tr:first-child td .first-date-selected:before,
.date-picker-wrapper .month-wrapper table tbody tr:first-child td .last-date-selected:before {
    margin-top: 4px;
}

.date-picker-wrapper .month-wrapper table tbody tr:last-child td {
    padding-bottom: 8px;
}

.date-picker-wrapper .month-wrapper table tbody tr:last-child td .first-date-selected:before,
.date-picker-wrapper .month-wrapper table tbody tr:last-child td .last-date-selected:before {
    margin-top: -4px;
}

.date-picker-wrapper .month-wrapper table tbody td {
    position: relative;
    height: 52px;
    vertical-align: middle;
}

.date-picker-wrapper .month-wrapper table .day {
    font-size: 18px;
    color: black;
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
    display: block;
    color: #9B9B9B;
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
    background: rgba(255, 102, 0, .1);
}

.date-picker-wrapper .month-wrapper table td:last-child .day.real-today.checked:not(.last-date-selected):not(.first-date-selected),
.date-picker-wrapper .month-wrapper table td:last-child .day.real-today.hovering:not(.last-date-selected):not(.first-date-selected) {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.date-picker-wrapper .month-wrapper table td:first-child .day.real-today.checked:not(.last-date-selected):not(.first-date-selected),
.date-picker-wrapper .month-wrapper table td:first-child .day.real-today.hovering:not(.last-date-selected):not(.first-date-selected) {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected {
    border-radius: 21px;
    width: 42px;
    height: 42px;
    line-height: 42px !important;
    display: inline-block !important;
    padding: 0 !important;
    background: rgba(255, 102, 0, 1) !important;
}

.date-picker-wrapper .first-date-selected:before,
.date-picker-wrapper .last-date-selected:before {
    content: "";
    background: rgba(255, 102, 0, .1);
    position: absolute;
    top: calc(50% - 14px);
    height: 27px;
    width: calc(50% - 13px);
    right: 0;
}

.date-picker-wrapper .last-date-selected:before {
    left: 0;
    right: auto;
}



/* Navigation top bar */
@media (min-width:1024px) {
    #header {
        background: #005dc4;
        color: white;
    }

    #header .nav-bar {
        display: flex;
        justify-content: space-between;
        height: 170px;
        align-items: flex-end;
    }

    #header .logo-wrapper a {
        display: inline-block;
        margin-bottom: 45px;
        text-decoration: none;
        color: white;
        font-family: 'PublicSans';
        font-size: 24px;
    }

    #header .logo-wrapper a.burger-btn {
        display: none;
    }

    #header .logo-wrapper a .mobile {
        display: none;
    }

    #header .logo-wrapper a .desktop {
        vertical-align: bottom;
        margin-right: 32px;
    }

    #header .logo-wrapper .blog-name {
        display: inline-block;
        height: 48px;
        line-height: 46px;
        vertical-align: middle;
        color: rgba(255, 255, 255, .4);
    }

    #header .main-menu-wrapper>* {
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
    }

    #header .menu-primary-container ul {
        list-style: none;
        display: flex;
    }

    #header .menu a {
        position: relative;
        display: inline-block;
        font-family: 'PublicSans';
        font-weight: 500;
        font-size: 20px;
        line-height: 1em;
        text-decoration: none;
        color: white;
        margin-right: 40px;
        padding-bottom: 61px;
    }

    #header .menu a:after {
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: rgba(255, 255, 255, 0);
        transition: all .2s linear;
    }

    #header .menu .current_page_item>a:after {
        height: 8px;
        background: rgba(255, 255, 255, .5);
    }

    #header .menu a:hover:after {
        height: 8px;
        background: rgba(255, 255, 255, .75);
    }

    #header .menu-item-search {
        position: relative;
        top: -2px;
        right: -4px;
        margin-left: -14px;
        font-size: 0;
    }

    #header .goto-search-btn {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
    }

    #header .goto-search-btn img {
        position: absolute;
        width: 22px;
        height: 22px;
        top: calc(50% - 11px);
        left: calc(50% - 11px);
        opacity: 1;
        transition: all .5s linear;
    }

    body:not(.search-opened) #header .goto-search-btn .close {
        opacity: 0;
        transform: rotate3d(0, 1, 0, 90deg);
    }

    body.search-opened #header .goto-search-btn .close {
        opacity: 1;
    }

    body.search-opened #header .goto-search-btn .open {
        opacity: 0;
        transform: rotate3d(0, 1, 0, -90deg);
    }

    #header .search-form-wrapper {
        height: 0;
        overflow-y: hidden;
        background: #ECF1FF;
        transition: height .4s ease-out;
    }

    body.search-opened #header .search-form-wrapper {
        height: 190px;
    }

    #header .search-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 190px;
    }

    #header .search-form .close-mobile {
        display: none;
    }

    #header .search-form .field {
        width: calc(100% - 100px);
        height: auto;
        padding: 0;
        font-size: 60px;
        line-height: 1em;
        vertical-align: middle;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        border-radius: 0;
    }

    #header .search-form .field:hover {
        box-shadow: none;
    }

    #header .search-form .field:focus {
        box-shadow: none;
        border-bottom: 1px solid rgba(107, 148, 255, .1);
    }

    #header .search-form .submit {
        display: none;
    }

    #header .search-form .submit-btn {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 0;
    }

    #header .search-form .submit-btn img {
        display: inline-block;
        vertical-align: middle;
    }
}

/* Bannière page */
.page-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #38569C no-repeat center top;
    background-size: cover;
    height: calc(92vh - 190px);
    min-height: 480px;
}

.page-banner .scroll-notice {
    position: absolute;
    bottom: -60px;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url(../img/scroll-notice.svg) center center no-repeat;
    transition: background .5s ease-out, opacity 1s linear;
    cursor: pointer;
}

.page-banner .scroll-notice:hover {
    background-position: center 20px;
}

body.hide-scroll-notice .page-banner .scroll-notice {
    opacity: 0;
    cursor: default;
}

body.admin-bar .page-banner {
    height: calc(92vh - 190px - 32px);
}

body.admin-bar .page-banner:not(.has-description) {
    max-height: 600px;
}

.page-banner:before {
    position: absolute;
    z-index: 10;
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .30);
}

body.home .page-banner:before {
    background: rgba(0, 0, 0, 0);
}

.page-banner .banner-content {
    position: relative;
    z-index: 20;
    margin-bottom: 7vh;
}

.page-banner .title {
    font-family: 'PublicSans';
    font-weight: 600;
    font-size: 90px;
    line-height: 1.05em;
    color: white;
    max-width: 700px;
}

@media (max-height:730px) {
    .page-banner .title {
        font-size: 72px;
        top: -7px;
        max-width: 530px;
    }
}

.page-banner.has-description .title {
    position: relative;
    z-index: 20;
    margin-left: 60px;
}

.page-banner .description {
    position: relative;
    z-index: 10;
    margin-top: -35px;
    box-sizing: border-box;
    padding: 8vh 20px 6vh 240px;
    background: rgba(0, 0, 0, .5);
    color: white;
    font-family: 'PublicSans';
    font-size: 24px;
    line-height: 1.4em;
}

.page-banner .description>* {
    max-width: 670px;
}

.page-banner .description:before {
    content: ' ';
    position: absolute;
    left: 60px;
    top: calc(8vh + 17px);
    width: 150px;
    height: 1px;
    border-top: .5px solid white;
}


/* Bannière article */
.single-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #38569C no-repeat top center;
    background-size: cover;
    margin-bottom: 48px;
}

.single-banner.with-bg-image {
    height: 60vw;
    max-height: 100vh;
}

.single-banner.with-bg-image:before {
    position: absolute;
    z-index: 10;
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .15);
}

.single-banner .banner-content {
    position: relative;
    top: 48px;
    z-index: 20;
}

.single-banner .categories {
    display: flex;
    flex-wrap: wrap;
}

.single-banner .categories a {
    text-decoration: none;
    background: #233D7A;
    color: white;
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 18px;
    line-height: 1em;
    padding: .5em 1.5em;
    margin-right: .4em;
    white-space: nowrap;
}

.single-banner .categories a:hover {
    box-shadow: 0 0 100px rgba(0, 0, 0, .1) inset;
}

.single-banner .categories a:active {
    box-shadow: 0 0 100px rgba(0, 0, 0, .2) inset;
}

.single-banner .categories a.most-viewed {
    background: #6B94FF;
}

.single-banner .title {
    font-family: 'PublicSans';
    font-weight: 600;
    font-size: 90px;
    line-height: 1.05em;
    color: white;
    max-width: 850px;
    margin: .15em 0 .5em;
}

.single-banner .author {
    display: flex;
    align-items: center;
    background: #262626;
    color: #808080;
    font-size: 18px;
}

.single-banner .avatar {
    width: 96px;
    height: 96px;
    margin-right: 24px;
}

.single-banner .avatar a {
    display: block;
    text-decoration: none;
    font-size: 0;
    line-height: 0;
    opacity: .93;
    transition: opacity .2s linear;
}

.single-banner .avatar a:hover {
    opacity: 1;
}

.single-banner a.author-link {
    display: inline;
    text-decoration: none;
    color: #FA6400;
}

.single-banner a.author-link:hover {
    color: #FA873A;
}


/* Liste des derniers articles */
.latest-posts {
    margin-bottom: 90px;
}

/* liste des catégories */
.browse-categories {
    display: flex;
    justify-content: space-between;
}

.browse-categories .title {
    margin-bottom: 0 !important;
}

.browse-categories .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 932px;
}

.browse-categories .items a {
    width: 212px;
    margin-left: 20px;
    margin-bottom: 10px;
    background: white;
    border-radius: 7px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    white-space: nowrap;
    color: #FA6400;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    transition: all .2s linear;
}

.browse-categories .items a img {
    vertical-align: middle;
    margin-right: .5em;
}

.browse-categories .items a:hover {
    box-shadow: 1px 1px 6px rgba(200, 200, 200, .6);
}

.browse-categories .items a:focus {
    box-shadow: 1px 1px 6px rgba(125, 162, 255, 1);
    outline: 0;
}

.browse-categories .items a:active {
    background: #E5E5E5;
}


/* Articles les plus vus */
.most-viewed .tile .categories a.most-viewed {
    display: none;
}


/* Une tuile */
.tile {
    position: relative;
    cursor: pointer;
    width: 447px;
    box-sizing: border-box;
    padding: 45px 30px 275px;
    background: #ECF1FF;
    margin: 40px 20px 40px 0;
}

.tile.link-as-tile {
    padding-bottom: 80px;
}

.tile .categories {
    display: flex;
    overflow: hidden;
    position: absolute;
    top: -15px;
    left: 30px;
    right: 0;
}

.tile .categories a {
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 18px;
    line-height: 1em;
    padding: .5em .7em;
    margin-right: .7em;
    text-decoration: none;
    background: #233D7A;
    color: white;
    transition: background .2s linear;
    white-space: nowrap;
}

.tile .categories a.most-viewed {
    background: #6B94FF;
}

.tile .categories a:hover {
    background: #445A8E;
}

.tile .categories a:active {
    background: #192C59;
}

.tile .categories a.most-viewed:hover {
    background: #81A4FF;
}

.tile .categories a.most-viewed:active {
    background: #6389EC;
}

.tile .title {
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25em;
    overflow: hidden;
    max-height: 5em;
    /* = 4 x line-height */
    margin-bottom: .33em;
}

.tile.link-as-tile .title {
    margin-bottom: 30px;
}

.tile .title a {
    display: block;
    max-width: 70%;
    text-decoration: none;
    color: black;
}

.tile .infos {
    font-size: 18px;
    color: #535353;
    line-height: 1em;
    white-space: nowrap;
    margin-bottom: 1.2em;
    padding-bottom: .2em;
    overflow: hidden;
}

.tile .excerpt {
    font-size: 18px;
    color: black;
    line-height: 1.25em;
    overflow: hidden;
    max-height: 7.5em;
    /* 6 x 1.25 */
}

.tile .banner {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    height: 230px;
    background: no-repeat center center;
    background-size: cover;
    transition: all .2s linear;
}

.tile:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, .1) inset;
}

.tile:hover .banner {
    filter: brightness(106%);
}


/* Flèche animée dans le coin inférieur droit d'un bloc (tuile ou autre) */
.goto-arrow {
    display: block;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    bottom: -15px;
    right: 0;
    width: 60px;
    height: 60px;
    background: #FA6400 url(../img/goto-arrow.svg) repeat-x;
    background-size: 60px 60px;
    background-position: 0px 0px;
    transition: background .2s ease-out;
}

.goto-arrow:hover,
.tile:hover .goto-arrow {
    background-color: #FB7B26;
    background-position: 60px 0px;
}

.goto-arrow:active {
    background-color: #D75600;
}



/* Thèmes couleurs pour les sections et les tuiles */
body.archive,
body.blog,
.light-blue-theme {
    background: #ECF1FF;
}

body.blog #blog-subscription,
body.archive #blog-subscription,
.light-blue-theme .tile {
    background: white;
}

.dark-theme {
    background: #262626;
    color: white;
}

.dark-theme .title-outside-wysiwyg {
    color: white;
}

.dark-theme .tile {
    background: #181818;
}

.dark-theme .tile .title a {
    color: white;
}

.dark-theme .tile .infos {
    color: #727272;
}

.dark-theme .tile .excerpt {
    color: white;
}

.dark-theme .tile .categories a {
    background: white;
    color: black;
}

.dark-theme .tile .categories a:hover {
    background: #D9D9D9;
}

.dark-theme .tile .categories a:active {
    background: #B2B2B2;
}


/* Liste de tuiles sous forme de grille */
.tiles.grid {
    overflow: hidden;
}

.tiles.grid .items {
    display: flex;
    flex-wrap: wrap;
    margin-right: -40px;
}


/* Liste de tuiles sous forme d'un bandeau défilant */
.tiles.slideshow {
    margin-top: 50px;
    margin-bottom: 50px;
    overflow-x: hidden;
}

.tiles.slideshow .items {
    margin-left: calc((100% - 1340px) / 2);
    display: flex;
    justify-content: flex-start;
    font-size: 18px;
    white-space: normal;
}

.tiles.slideshow .items .tile {
    width: 433px;
}

.tiles.slideshow.imd-slideshow .nav-layers>* {
    bottom: 90px;
    width: calc((100% - 1340px) / 2);
}

.tiles.slideshow .slideshow-footer {
    margin-top: 15px;
}


/***** Page ALL POSTS et CATEGORY et posts d'un auteur *****/

#all-posts .filters {
    margin-bottom: 45px;
}

#all-posts .filters .form {
    background: white;
    display: table;
    table-layout: fixed;
    width: 100%;
}

#all-posts .filters .form>* {
    display: table-cell;
    height: 93px;
    vertical-align: middle;
    position: relative;
}

#all-posts .filters .form>*:not(:first-child) {
    border-left: 2px solid #ECF1FF;
}

#all-posts .filters .form>.title {
    width: 132px;
    text-align: center;
    font-size: 24px;
    color: #4A4A4A;
}

#all-posts .filters .form label {
    font-family: 'PublicSans';
    font-size: 24px;
    color: #FA6400;
    display: inline-block;
    white-space: nowrap;
    padding: 0 20px;
    cursor: pointer;
}

#all-posts .filters .form .search-widget .prefix.mobile {
    display: none;
}

#all-posts .filters .form .search-widget[data-slug="date"] label {
    white-space: normal;
}

#all-posts .filters .form .search-widget[data-slug="date"] label span {
    display: inline-block;
    font-size: 12px;
    color: #C0C0C0;
    width: 32px;
    text-align: right;
}

#all-posts .filters .form .search-widget[data-slug="date"] label div {
    white-space: nowrap;
}

#all-posts .filters .actions.mobile {
    display: none;
}

#all-posts .filters .reset.desktop {
    cursor: not-allowed;
    width: 93px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #A5A5A5;
}

#all-posts .filters.is-filtering .reset.desktop {
    cursor: pointer;
    color: #FA6400;
}

#all-posts .filters:not(.is-filtering) .reset.desktop .if-filtering,
#all-posts .filters.is-filtering .reset.desktop .if-not-filtering {
    display: none;
}

#all-posts .filters .search-widget {
    cursor: pointer;
}

#all-posts .filters .expand {
    position: absolute;
    top: calc(50% - 11px);
    right: 20px;
}

#all-posts .filters .search-widget.with-icon {
    padding-left: 40px;
    background: no-repeat 20px center;
}

#all-posts .filters .search-widget[data-slug="author"] {
    background-image: url(../img/icon-author.svg);
}

#all-posts .filters .search-widget[data-slug="date"] {
    background-image: url(../img/icon-calendar.svg);
    padding-left: 44px;
}

#all-posts .filters .most-viewed {
    cursor: pointer;
}

#all-posts .filters .most-viewed.checked {
    background: #FA6400;
}

#all-posts .filters .most-viewed.checked label {
    color: white;
}


.search-popup {
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    padding-top: 20px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: opacity .2s linear, max-height .4s linear;
    background: white;
    box-shadow: 0 8px 10px rgba(130, 130, 130, .2);
}

.search-popup.opened {
    max-height: 600px;
    opacity: 1;
}

.search-popup[data-slug="category"] {
    width: 510px;
}

.search-popup[data-slug="author"] {
    width: 680px;
}

.search-popup[data-slug="date"] {
    width: 430px;
    padding-top: 5px;
}

.search-popup .head-mobile {
    display: none;
}

.search-popup .body.list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px 0 72px;
}

.search-popup .body.list .option {
    width: 50%;
    margin-bottom: 20px;
}

.search-popup[data-slug="author"] .body.list .option {
    width: 33%;
}

.search-popup .body.list .option span {
    display: inline-block;
    padding: 0 16px;
    margin-left: -16px;
    white-space: nowrap;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    border-radius: 18px;
    cursor: pointer;
    transition: background .2s linear;
}

.search-popup .body.list .option span:hover {
    background: #F6F6F6;
}

.search-popup .body.list .option.current span {
    background: #FA6400;
    color: white;
}

.search-popup .manual-dates {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    background: #EEEEEE;
}

.search-popup .manual-dates>* {
    position: relative;
    width: calc(50% - 10px);
}

.search-popup .manual-dates label {
    position: absolute;
    z-index: 20;
    left: 20px;
    top: 10px;
    text-transform: uppercase;
    font-size: 12px;
    color: black;
}

.search-popup .manual-dates input {
    position: relative;
    z-index: 10;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: white;
    height: 75px;
    padding-top: 20px;
    font-size: 18px;
    line-height: 1em;
    color: #FA6400;
}

.search-popup .clear-filter {
    background: #FBFBFB;
    padding: 0 20px 0 72px;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    cursor: pointer;
    transition: background .2s linear;
}

.search-popup .clear-filter:hover {
    background: #F0F0F0;
}


#all-posts.has-results .if-no-results,
#all-posts:not(.has-results) .if-has-results {
    display: none;
}

#all-posts:not(.has-more) a.load-more {
    display: none;
}

#all-posts .load-more {
    padding-left: 3em;
    padding-right: 3em;
}

#all-posts .load-more-wrapper {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 75px;
}

#all-posts .tile:not(.existing) {
    transform: scale(.5);
    opacity: 0;
    filter: blur(2px);
}

#all-posts .tile {
    transition: all .5s ease-out;
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
}


/***** END : Page ALL POSTS et CATEGORY et posts d'un auteur *****/



/* Auteurs */
#authors {
    overflow: hidden;
}

#authors .items {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-top: 2em;
    margin-bottom: 2.5em;
}

#authors .author-tile {
    width: 320px;
    margin: 0 20px 22px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ECF1FF;
    overflow: hidden;
}

#authors .author-tile .avatar {
    height: 320px;
    margin-left: -1px;
    margin-right: -1px;
    background: no-repeat center center;
    background-size: cover;
}

#authors .author-tile>*>*:not(.avatar) {
    margin-left: 30px;
    margin-right: 30px;
}

#authors .author-tile .name {
    margin-top: 22px;
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 20px;
}

#authors .author-tile .job {
    font-size: 20px;
    color: #535353;
    height: 1em;
}

#authors .author-tile .biography {
    font-size: 18px;
    margin-top: 2.5em;
}

#authors .author-tile .footer {
    padding-top: 2em;
    padding-bottom: 2.5em;
    box-sizing: border-box;
    min-height: 182px;
}

#authors .author-tile .more a {
    position: relative;
    font-size: 20px;
}

#authors .author-tile .more a svg {
    position: absolute;
    right: -32px;
    top: 8px;
    transition: right .2s ease-out;
}

#authors .author-tile .more a:visited svg path {
    fill: #BE4C00;
}

#authors .author-tile .more a:hover svg {
    right: -40px;
}

#authors .author-tile .links {
    display: flex;
    flex-wrap: wrap;
    margin: calc(2em - 7px) 23px -7px;
}

#authors .author-tile .links a {
    width: 38px;
    height: 38px;
    margin: 7px;
    background: no-repeat center center;
}

#authors .author-tile .links a:hover {
    opacity: .9;
}

#authors .author-tile .links a.facebook {
    background-image: url(../img/facebook.svg);
}

#authors .author-tile .links a.twitter {
    background-image: url(../img/twitter.svg);
}

#authors .author-tile .links a.linkedin {
    background-image: url(../img/linkedin.svg);
}

#authors .author-tile .links a.wordpress {
    background-image: url(../img/wordpress.svg);
}

#authors .author-tile .links a.website {
    background-image: url(../img/website.svg);
}



/* Partage social */
.sharedaddy.sd-sharing-enabled {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    padding: 2.5em 0 0 0;
    margin-top: 3em;
    border-top: 1px solid #979797;
}

.sharedaddy.sd-sharing-enabled .sd-title {
    margin-bottom: .5em;
}

.sharedaddy.sd-sharing-enabled .sd-content ul {
    list-style: none;
    display: flex;
}

.sharedaddy.sd-sharing-enabled .sd-content ul>li {
    margin: 0 !important;
    padding: 0 !important;
}

.sharedaddy.sd-sharing-enabled .sd-content li a {
    text-decoration: none;
    font-size: 0;
    display: inline-block;
    width: 38px;
    height: 38px;
    margin-right: 17px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: filter .2s linear;
}

.sharedaddy.sd-sharing-enabled .sd-content li a:hover {
    filter: brightness(110%);
}

.sharedaddy a.share-facebook {
    background-image: url(../img/share-facebook.svg);
}

.sharedaddy a.share-linkedin {
    background-image: url(../img/share-linkedin.svg);
}

.sharedaddy a.share-twitter {
    background-image: url(../img/share-twitter.svg);
}

.sharedaddy a.share-jetpack-whatsapp {
    background-image: url(../img/share-whatsapp.svg);
}

@media (min-width:861px) {
    .sharedaddy li.share-jetpack-whatsapp {
        display: none;
    }
}

div.sharedaddy h3.sd-title {
    padding: 0;
    margin: 0;
    line-height: 1em;
    font-size: 24px;
    font-weight: 300;
}

div.sharedaddy h3.sd-title:before {
    display: none;
}


/* Like post */
.like-box {
    position: relative;
    z-index: 40;
    margin-bottom: calc(140px + 3em);
}

.like-box .inner {
    position: absolute;
    right: 20px;
    top: 7.85em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.like-box .inner .counter {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 400;
    background: #FEEFE5;
    color: black;
    border-radius: 6px;
    padding: 0 1em;
    margin-right: 9px;
}

.like-box .inner .btn {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 500;
    background: #FA6400;
    color: white;
    border-radius: 6px;
    padding: 0 3.5em;
    cursor: pointer;
}

.like-box .inner .btn i {
    font-size: 16px;
}

.like-box.liked .if-not-liked,
.like-box:not(.liked) .if-liked {
    display: none;
}



/* Bloc Gutenberg : liens vers les réseaux */
.gutenberg-social-networks {
    display: flex;
    justify-content: space-between;
    margin-top: 3em;
    margin-right: 80px;
}

.gutenberg-social-networks a.icon {
    font-size: 0 !important;
    width: 38px;
    height: 38px;
    background: center center no-repeat;
    transition: filter .2s linear;
}

.gutenberg-social-networks a.icon.face {
    background-image: url(../img/facebook.svg);
}

.gutenberg-social-networks a.icon.twit {
    background-image: url(../img/twitter.svg);
}

.gutenberg-social-networks a.icon.link {
    background-image: url(../img/linkedin.svg);
}

.gutenberg-social-networks a.icon.yout {
    background-image: url(../img/youtube.svg);
}

.gutenberg-social-networks a.icon.inst {
    background-image: url(../img/instagram.svg);
}

.gutenberg-social-networks a.icon:hover {
    filter: brightness(110%);
}

.gutenberg-social-networks a.icon:after {
    display: none !important;
}

.gutenberg-social-networks a.icon:focus:before {
    display: none !important;
}



/* Pagination (search results) */
.navigation.pagination {
    margin-top: 2em;
    margin-bottom: 2em;
}

.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
}

.navigation.pagination .page-numbers {
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background: #FAFAFA no-repeat center center;
    color: black;
    color: #FA6400;
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 18px;
    margin-left: 2px;
    margin-right: 2px;
}

.navigation.pagination .page-numbers:not(.current):hover {
    background-color: #F6F6F6;
}

.navigation.pagination .page-numbers:not(.current):active {
    background-color: #F0F0F0;
}

.navigation.pagination .page-numbers.current {
    color: black;
}

.navigation.pagination .next {
    font-size: 0;
    background-image: url(../img/author-more.svg);
}

.navigation.pagination .prev {
    font-size: 0;
    background-image: url(../img/author-more.svg);
    transform: rotateZ(180deg);
}


/* Commentaires */
#comments {
    padding-top: 5em;
    padding-bottom: 5em;
}

#comments h2.title-outside-wysiwyg {
    margin-bottom: .75em;
}

#comments h2.title-outside-wysiwyg .counter {
    font-family: 'PublicSans';
    font-weight: 100;
    display: inline-block;
    margin-left: .4em;
}

#comments .items+.comment-respond {
    margin-top: 3em;
}

#comments .comment-reply-title {
    font-family: 'PublicSans';
    font-weight: 100;
    font-size: 24px;
    line-height: 1em;
    margin-bottom: .75em;
}

#comments .comment {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

#comments .comment .body {
    position: relative;
    z-index: 20;
    box-sizing: border-box;
    width: calc(100% - 116px);
    padding: 30px;
    background: white;
}

#comments .comment .body:before {
    content: '';
    position: absolute;
    z-index: 10;
    top: 22px;
    left: -9px;
    width: 24px;
    height: 24px;
    background: white;
    transform: rotateZ(45deg);
}

#comments .comment .body p {
    font-family: 'PublicSans';
}

#comments .comment .body .infos {
    margin-top: 15px;
}


/* Widget : blog subscription */
body.hide-subscription-form #blog-subscription {
    display: none;
}

body.hide-subscription-form main.wysiwyg {
    min-height: 300px;
}

body.hide-subscription-form #footer {
    padding-top: 60px;
}

#blog-subscription {
    position: relative;
    z-index: 20;
    background: #ECF1FF;
    padding: 50px;
    margin-bottom: -88px;
}

#blog-subscription .widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#blog-subscription .widgettitle {
    font-size: 40px;
    line-height: 1em;
    font-weight: normal;
    color: black;
    padding-bottom: .2em;
}

#blog-subscription .form {
    display: flex;
    justify-content: flex-end;
}

#blog-subscription input[type=email] {
    border-radius: 0;
    border-color: #FA6400;
    width: 500px;
    max-width: calc(50vw - 230px);
}

#blog-subscription .submit {
    width: 172px;
}

#blog-subscription .message {
    font-size: 16px;
    line-height: 1.3em;
    margin-top: .3em;
    color: black;
}

#blog-subscription #subscribe-email .message {
    display: none;
}

#blog-subscription .form-wrapper.red .message {
    color: #EA0000;
}

#blog-subscription .form-wrapper.error .form {
    box-shadow: 0 0 5px rgba(250, 100, 0, .9);
}

#blog-subscription .form-wrapper button.submit {
    transition: background .3s linear;
}

#blog-subscription .form-wrapper.success button.submit {
    background: #60BD5B;
    font-size: 0;
}

#blog-subscription .form-wrapper .field {
    transition: border-color .3s linear;
}

#blog-subscription .form-wrapper.success .field {
    border-color: #60BD5B;
}

#blog-subscription #subscribe-submit {
    position: relative;
}

#blog-subscription #subscribe-submit .tick {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 12px);
    width: 0;
    overflow: hidden;
    background: no-repeat left center url(../img/tick.svg);
    background-size: 24px 24px;
}

#blog-subscription .form-wrapper.success #subscribe-submit .tick {
    transition: width 1.4s linear;
    width: 24px;
}



/* Footer, partie bleue */
#footer {
    position: relative;
    z-index: 10;
    padding: 155px 0 40px;
    background: #005dc4;
    color: white;
}

#footer .body {
    display: flex;
    justify-content: space-between;
}

@media (min-width:960px) {
    #footer a.logo {
        display: inline-block;
        margin-top: 43px;
        margin-bottom: 40px;
        text-decoration: none;
        color: white;
        font-family: 'PublicSans';
        font-size: 24px;
    }

    #footer a.logo .mobile {
        display: none;
    }

    #footer a.logo .desktop {
        vertical-align: bottom;
        width: 432px;
        height: auto;
    }

    #footer a.logo .blog-name {
        display: inline-block;
        height: 68px;
        line-height: 68px;
        vertical-align: middle;
        border-left: 1px solid white;
        padding-left: 34px;
    }
}

#footer .slogan {
    font-size: 24px;
    line-height: 1.37;
}

#footer .columns {
    display: flex;
    justify-content: space-between;
    width: 45%;
    padding-top: 36px;
    padding-right: 26px;
}

#footer .column h4 {
    font-family: 'PublicSans';
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

#footer .column .groups-of-links {
    display: flex;
    flex-direction: column;
}

#footer .column .links {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

#footer .column a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: white;
}

#footer .column a:hover {
    text-decoration: underline;
}


#footer .foot {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding-top: 32px;
    margin-top: 60px;
    font-size: 16px;
}

#footer .foot .copyright {
    color: rgba(255, 255, 255, .5);
}

#footer .foot .copyright strong {
    font-family: 'PublicSans';
    font-weight: 100;
    color: white;
}

#footer .foot .links {
    display: flex;
}

#footer .foot .links a {
    color: white;
    text-decoration: none;
    margin-left: 60px;
}

#footer .foot .links a:hover {
    text-decoration: underline;
}


/* Cookie notice */
#cookie-notice {
    background: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-out;
}

#cookie-notice.opened {
    max-height: 120px;
}

#cookie-notice+.std-section-padding,
#cookie-notice+.page-title {
    border-top: 1px solid #E0E0E0;
}

#cookie-notice .wysiwyg {
    position: relative;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

#cookie-notice .wysiwyg .inner {
    padding-right: 75px;
}

#cookie-notice .close {
    position: absolute;
    right: 20px;
    top: calc(50% - 30px);
    display: inline-block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background: #FA6400 url(../img/cookie-notice-close.svg) no-repeat center center;
}

#cookie-notice .close:hover {
    background-color: #FB7B26;
}

#cookie-notice .close:active {
    background-color: #E15A00;
}

.ot-floating-button__front {
    margin-top: -2px;
}