/* Généralités */
@media (max-width:1023px) {
    .title-outside-wysiwyg {
        font-size:33px; margin-bottom:15px;
    }
    .std-section-padding {
        padding-top:50px; padding-bottom:50px;
    }
}


/* Colonnes Gutenberg et contact form */
@media (min-width:861px) {
    .wp-block-column {
        flex-basis: calc(50% - 80px);
    }
    .wp-block-column:not(:first-child) {
        margin-left:160px;
    }
}
@media (max-width:860px) {
    .wp-block-columns {
        display: block;
    }
    .wp-block-column {
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .wp-block-column + .wp-block-column {
        margin-top:3em;
    }
    .contact-submit button {
        width:100%;
        padding-left:0; padding-right:0;
    }
}


/* Bloc Gutenberg : liens vers les réseaux */
@media (max-width:860px) {
    .gutenberg-social-networks {
        justify-content:flex-start;
        flex-wrap:wrap;
        margin-top:1em;
        margin-right:0;
    }
    .gutenberg-social-networks a {
        margin-right:17%;
        margin-bottom:40px;
    }
}


/* Tuiles */
@media (max-width:1450px) {
    .tiles.grid .tile {
        width:calc((100% - 80px) / 3);
    }
}
@media (max-width:1400px) {
    .tiles.slideshow .items {
        margin-left:20px;
    }
}
@media (max-width:1140px) {
    .tiles.grid .tile {
        width:calc((100% - 60px) / 2);
    }
}
@media (max-width:1023px) {
    .tile {
        margin-top:30px; margin-bottom:30px;
    }
    .tile .title {
        font-size:22px;
    }
    .tile .infos {
        font-size:16px;
    }
    .tile .excerpt {
        font-size:16px;
    }
}
@media (max-width:860px) {
    .sharedaddy.sd-sharing-enabled {
        left:20px; right:20px;
    }
}
@media (max-width:768px) {
    .tile {
        padding-bottom:30px;
    }
    .tile .title a {
        max-width:none;
    }
    .tile .categories {
        top:-18px;
    }
    .tile .categories a {
        padding:.7em;
    }
    .tile .banner {
        position:static; margin-top:30px; margin-bottom:-30px; margin-left:-30px;
        width:calc(100% + 60px); height:calc((100vw - 40px) / 2);
    }
    .tiles.grid .items {
        margin-right:0;
    }
    .tiles.grid .tile {
        width:100%; margin-right:0;
    }
    .latest-posts .tiles.grid .items > div:nth-child(n+4) {
        display:none;
    }
    .tiles.slideshow {
        margin-top:20px; margin-bottom:20px;
    }
    .tiles.slideshow .items.images {
        position:static; left:0 !important;
        flex-direction:column; width:auto !important;
    }
    .tiles.slideshow .items > div:nth-child(n+4) {
        display:none;
    }
    .tiles.slideshow .items .tile {
        width:auto !important;
    }
    .tiles.slideshow .nav-layers,
    .tiles.slideshow .slideshow-footer {
        display:none;
    }
    .sharedaddy.sd-sharing-enabled .sd-content li a {
        margin-left:0; margin-right:30px;
    }
}
@media (max-width:600px) {
    .sharedaddy.sd-sharing-enabled {
        position:static; margin-left:20px; margin-right:20px;
    }
    .sharedaddy.sd-sharing-enabled .sd-content ul > li.share-end {
        display:none;
    }
    .like-box {
        margin-bottom:.5em;
    }
    .like-box .inner {
        position:static; justify-content:flex-start; margin-top:2.5em;
    }
}



/* Page AUTEURS */
@media (max-width:1398px) {
    #authors .author-tile {
        width:calc((100% - 80px) / 4);
    }
    #authors .author-tile .avatar {
        height:calc((100vw - 120px) / 4);
    }
}
@media (max-width:1100px) {
    #authors .author-tile {
        width:calc((100% - 60px) / 3);
    }
    #authors .author-tile .avatar {
        height:calc((100vw - 100px) / 3);
    }
}
@media (max-width:760px) {
    #authors .author-tile {
        width:calc((100% - 40px) / 2);
    }
    #authors .author-tile .avatar {
        height:calc((100vw - 80px) / 2);
    }
}
@media (max-width:580px) {
    #authors .items {
        margin-right:0;
    }
    #authors .author-tile {
        width:100%; margin-right:0; margin-bottom:35px;
    }
    #authors .author-tile .avatar {
        height:calc(100vw - 40px);
    }
    #authors .author-tile .biography {
        margin-top:1.5em;
    }
    #authors .author-tile .footer {
        min-height:0;
        padding-top:1.5em; padding-bottom:2em;
    }
}



/* HOME */
@media (max-width:1400px) {
    .latest-posts {
        margin-bottom:50px;
    }
    .browse-categories {
        flex-direction: column;
    }
    .browse-categories .title {
        margin-bottom:30px !important;
    }
    .browse-categories .items {
        max-width:none; margin-left:-10px; margin-right:-10px;
    }
    .browse-categories .items a {
        margin-left:10px; margin-right:10px;
        width:calc((100% - 100px) / 5);
    }
}
@media (max-width:1200px) {
    .browse-categories .items a {
        width:calc((100% - 80px) / 4);
    }
}
@media (max-width:1060px) {
    .browse-categories .items a {
        width:calc((100% - 60px) / 3);
    }
}
@media (max-width:880px) {
    .browse-categories .items a {
        width:calc((100% - 40px) / 2);
    }
}
@media (max-width:880px) {
    .browse-categories .items a {
        height:80px; line-height:1.25em;
        display:flex; flex-direction:column; justify-content:center; align-items:center;
        margin-bottom:20px;
    }
    .browse-categories .items a img {
        margin-bottom:5px;
    }
}


@media (max-width:1140px) {
    #header .logo-wrapper .blog-name {display:none;}
}
@media (max-width:1023px) {
    #header .logo-wrapper .blog-name {display:inline-block;}
}


/* Navigation top bar */
@media (max-width:1023px) {
    #header {
        position:fixed; z-index:999999;
        top:0; left:0; width:100%; box-sizing:border-box;
        overflow-y:hidden; height:64px; transition:height .3s ease-out;
        background:rgba(0,0,0,.5);
        box-shadow:0 1px 1px rgba(0,0,0,.2);
    }
    body {
        padding-top:64px;
    }
    body.admin-bar #header {
        top:32px;
    }
    body.admin-bar #wpadminbar {
        position:fixed;
    }
    body.burger-opened #header {
        height:100vh;
    }
    body.admin-bar.burger-opened #header {
        height:calc(100vh - 32px);
    }
    #header .nav-bar {
        background:#233D7A;
    }
    #header .logo-wrapper {
        display:flex; justify-content:space-between;
        height:64px; align-items:center;
    }
    #header .logo-wrapper a {
        text-decoration:none; font-size:0;
    }
    #header .logo-wrapper .logo {
        color:white;
    }
    #header .logo-wrapper .logo > * {
        display:inline-block; vertical-align:bottom;
    }
    #header .logo > img.mobile {
        width:140px; height:auto;
    }
    #header .logo > img.desktop {
        display:none;
    }
    #header .logo .blog-name {
        font-family:'DINPro-Regular'; font-size:16px; line-height:22px;
        border-left:2px solid rgba(255,255,255,.25); color:rgba(255,255,255,.4);
        padding-left:10px; margin-left:12px;
    }
    #header a.burger-btn {
        position:relative; left:14px;
        width:50px; height:50px; font-size:0;
    }
    #header a.burger-btn img {
        position:absolute; width:22px; height:22px;
        top:calc(50% - 11px); left:calc(50% - 11px);
        opacity:1;
        transition:all .5s linear;
    }
    body:not(.burger-opened) #header .burger-btn .close {
        opacity:0; transform:rotate3d(0,1,0,90deg);
    }
    body.burger-opened #header .burger-btn .close {
        opacity:1;
    }
    body.burger-opened #header .burger-btn .open {
        opacity:0; transform:rotate3d(0,1,0,-90deg);
    }
    #header .main-menu-wrapper {
        margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px;
        background:#172C5C;
    }
    body.search-opened #header .menu-primary-container {
        overflow:hidden; max-height:0;
    }
    #header .menu-primary-container ul {
        list-style:none; display:flex; flex-direction:column;
    }
    #header a.goto-search-btn,
    #header .menu a {
        display:block; color:white; text-decoration:none;
        font-family:'DINPro Medium'; font-size:20px;
        height:64px; line-height:64px; vertical-align:middle;
        border-bottom:1px solid #233D7A;
        white-space:nowrap; overflow:hidden;
        transition:all .3s ease-out;
    }
    #header a.goto-search-btn {
        border-bottom:none; position:relative;
    }
    #header a.goto-search-btn:active,
    #header .menu a:active {
        background:rgba(0,0,0,.2);
    }
    #header a.goto-search-btn .open {
        position:absolute; right:0; top:calc(50% - 11px);
    }
    #header a.goto-search-btn .close {
        display:none;
    }
    #header .menu-item-search {
        perspective:128px; perspective-origin:top center;
    }
    body.search-opened #header a.goto-search-btn {
        height:0; transform:rotate3d(1,0,0,90deg) scale(.8);
    }
    #header .search-form-wrapper .std-width {
        perspective:128px; perspective-origin:bottom center;
    }
    #header .search-form {
        position:relative;
        height:0; transform:rotate3d(1,0,0,-90deg) scale(.8);
        transition:all .5s ease-out;
    }
    body.search-opened #header .search-form {
        height:64px; transform:rotate3d(1,0,0,0deg) scale(1);
    }
    body.burger-opened.search-opened #header .burger-btn .close {
        opacity:0;
    }
    #header .search-form-wrapper .field {
        display:block; box-sizing:border-box;
        width:calc(100% + 40px); padding:0 20px; margin:0 -20px;
        background:white; color:black;
        font-family:'DINPro Light'; font-size:20px;
        height:64px; line-height:64px; vertical-align:middle;
        -webkit-appearance:none; border:none; box-shadow:none; outline:none;
        border-radius:0;
    }
    #header .search-form-wrapper .submit,
    #header .search-form-wrapper .submit-btn {
        display:none;
    }
    #header .search-form .close-mobile {
        position:absolute; cursor:pointer; background:white;
        width:50px; height:50px; line-height:50px; right:-14px; top:7px;
        text-align:center; font-size:0;
    }
    #header .search-form .close-mobile img {
        vertical-align:middle;
    }
}
@media (max-height:550px) {
    body.burger-opened #header {
        overflow-y:scroll;
    }
}
@media (max-width:782px) {
    body.admin-bar #header {
        top:46px;
    }
    body.admin-bar.burger-opened #header {
        height:calc(100vh - 46px);
    }
}


/* Bannière des pages et des articles */
@media (min-width:1024px) {
    .page-banner .title.mobile {
        display:none;
    }
    .page-title .mobile {
        display:none;
    }
}
@media (max-width:1023px) {
    .page-banner {
        justify-content:center; height:auto !important; min-height:0;
    }
    .page-title .desktop {
        display:none;
    }
    body.home .page-banner:before,
    .page-banner:before {
        background:rgba(38,38,38,.85);
    }
    .page-banner .banner-content {
        margin-top:58px; margin-bottom:48px;
    }
    .page-banner.has-description .title {
        margin-left:0;
    }
    .page-banner .title:not(.mobile) {
        display:none;
    }
    .page-banner .title {
        font-size:44px; line-height:1.22em; margin-bottom:.6em;
    }
    .page-banner .description {
        background:none; padding:0; margin-top:0;
        font-family:'DINPro Light'; font-size:16px;
    }
    .page-banner .description:before {
        display:none;
    }
    .single-banner {
        margin-bottom:44px;
    }
    .single-banner.with-bg-image:before {
        background:rgba(26,26,26,.85);
    }
    .single-banner.with-bg-image {
        height:auto; max-height:none;
    }
    .single-banner .banner-content {
        top:44px;
    }
    .single-banner .categories a {
        padding:.5em; margin-bottom:.4em;
    }
    .single-banner .title {
        font-size:44px; line-height:1.1em;
        margin:22px 0 35px 0;
    }
    .single-banner .author {
        line-height:1.2em;
    }
    .single-banner .author .sep {
        display:block; font-size:0; line-height:0;
    }
    .single-banner .avatar {
        width:64px; height:64px;
    }
    .single-banner .avatar img {
        width:100%; height:auto;
    }
}



/* All Posts : gestion des FILTRES */
@media (max-width:1280px) {
    #all-posts .filters {
        position:fixed; z-index:999999; top:100%; height:100%; left:0; right:0;
        margin-bottom:0;
        transition:top .3s ease-out, background .4s linear;
    }
    #all-posts .filters .form {
        position:absolute; top:0; left:0; right:0;
        display:flex; flex-direction:column;
        padding:0 20px; width:auto;
    }
    #all-posts .filters .form > .title {
        position:absolute; top:-64px; left:calc(50% - 79px);
        width:158px; height:45px; border-radius:22.5px;
        line-height:45px; vertical-align:middle;
        background:#233D7A; color:white; font-size:22px;
        cursor:pointer;
    }
    #all-posts .filters .form > .title .suffix {
        font-size:0; display:inline-block; vertical-align:middle;
        margin-left:5px;
        width:16px; height:8px; background:url(../img/expand-white.svg) center center no-repeat;
        transform:rotateX(180deg);
        transition:all .5s ease-out;
    }
    #all-posts .filters .expand {
        transform:rotateZ(-90deg); right:0; height:14px; top:calc(50% - 7px);
    }
    #all-posts .filters .search-widget {
        border-bottom:1px solid #EEEEEE; opacity:0;
    }
    #all-posts .filters .search-widget.with-icon {
        padding-left:0;
        background:none !important;
    }
    #all-posts .filters .form > * {
        height:auto;
    }
    #all-posts .filters .form > *:not(:first-child) {
        border-left:0;
    }
    #all-posts .filters .form label {
        height:20px; line-height:20px;
        padding:0;
        font-size:18px;
        color:black;
        transition:all .3s ease-out;
    }
    #all-posts .filters .most-viewed label,
    #all-posts .filters .form .search-widget:not(.active) > label {
        color:black; font-family:'DINPro Light';
    }
    #all-posts .filters .form .search-widget.active > .prefix.mobile {
        display:inline-block; margin-right:.5em;
    }
    #all-posts .filters .most-viewed {
        position:relative;
    }
    #all-posts .filters .most-viewed.checked label {
        color:black;
    }
    #all-posts .filters .most-viewed:before {
        content:"";
        position:absolute; right:0; top:calc(50% - 11px);
        width:21px; height:21px;
        border:1px solid #FA6400;
    }
    #all-posts .filters .most-viewed.checked {
        background:none;
    }
    #all-posts .filters .most-viewed.checked label {
        font-family:'DINPro-Regular';
    }
    #all-posts .filters .most-viewed.checked:after {
        content:"";
        position:absolute; right:3px; top:calc(50% - 8px);
        width:17px; height:17px;
        background:#FA6400;
    }
    #all-posts .filters .reset.desktop {
        display:none;
    }
    #all-posts .filters .actions.mobile {
        display:flex; justify-content:space-between;
        margin-top:7px; margin-bottom:20px;
    }
    #all-posts .filters .actions .reset {
        flex:4; padding-left:.5em; padding-right:.5em;
        font-family:'DINPro Light';
    }
    #all-posts .filters .actions .close {
        flex:6; margin-left:20px;
        padding-left:.5em; padding-right:.5em;
        border-radius:5px;
    }
    #all-posts .filters:not(.is-filtering) .actions .reset {
        cursor:not-allowed;
        color:#C0C0C0; border-color:#C0C0C0; background:none;
    }

    body.filters-opened #all-posts .filters {
        top:0; background:rgba(0,0,0,.5);
    }
    body.filters-opened #all-posts .filters .form {
        top:auto; bottom:0;
    }
    body.filters-opened #all-posts .filters .form > .title .suffix {
        transform:rotateX(0deg);
    }
    body.filters-opened #all-posts .filters .form label {
        line-height:70px; height:70px;
    }
    body.filters-opened #all-posts .filters .search-widget {
        opacity:1;
    }

    .search-popup {
        z-index:1000000;
        left:auto !important; right:0; width:100% !important; max-width:0;
        top:auto !important; bottom:0; max-height:none !important;
        padding-top:0;
        transition:max-width .3s ease-out, opacity .3s ease-out;
    }
    .search-popup.opened {
        max-width:100%;
    }
    .search-popup .head-mobile {
        display:flex; justify-content:space-between;
        margin:0 20px; border-bottom:1px solid #EEEEEE;
    }
    .search-popup .head-mobile > * {
        height:70px; line-height:70px; vertical-align:middle; white-space:nowrap;
        cursor:pointer;
    }
    .search-popup .head-mobile .back-wrapper {
        font-size:22px; font-family:'DINPro Medium';
    }
    .search-popup .head-mobile .back {
        width:auto; height:13px; margin-right:16px;
        transform:rotateZ(90deg);
    }
    .search-popup .body.list {
        margin:14px 20px; justify-content:space-between;
    }
    .search-popup .body.list .option {
        width:calc(50% - 8px) !important; margin-bottom:7px;
    }
    .search-popup[data-slug="author"] .body.list .option {
        margin-bottom:4px;
    }
    .search-popup .body.list .option span {
        overflow:hidden; text-overflow:ellipsis; max-width:100%;
    }
    .search-popup .clear-filter {
        background:none;
    }
    .search-popup .inner > .clear-filter {
        display:none;
    }
    .date-picker-wrapper .month-wrapper table tbody td {
        height:44px;
    }
    .date-picker-wrapper .month-wrapper table .week-name th {
        font-size:14px;
    }
    .search-popup .manual-dates {
        padding:20px;
    }
    #all-posts .filters .form .search-widget[data-slug="date"] label div {
        display:inline-block; margin-right:.5em;
    }
    #all-posts .filters .form .search-widget[data-slug="date"] label div:last-child {
        margin-right:0; text-transform:lowercase;
    }
    #all-posts .filters .form .search-widget[data-slug="date"] label span {
        color:black; font-size:inherit; width:auto;
        font-family:'DINPro Light';
    }
}


@media (max-width:640px) {
    #header .logo .blog-name {
        font-size:14px;
    }
    main.wysiwyg .wp-block-table {
        overflow-x:auto;
    }
    main.wysiwyg .no-head-on-mobile table thead {
        display:none;
    }
    main.wysiwyg .one-col-on-mobile > table tbody tr,
    main.wysiwyg .one-col-on-mobile > table tbody tr > td {
        display:block;
    }
    main.wysiwyg .one-col-on-mobile table tbody tr > td:first-child {
        background:#EEEEEE;
    }
}


@media (max-width:360px) {
    #header .logo > img.mobile {
        width:125px; height:auto;
    }
}



/* Commentaires */
@media (max-width:768px) {
    #comments {
        padding-top:3em; padding-bottom:3em;
    }
    #comments .comment img.avatar {
        width:60px; height:60px;
    }
    #comments .comment .body {
        padding:18px 24px;
        width:calc(100% - 82px);
    }
    #comments .comment .body:before {
        top:35px;
    }
}



/* Widget Jetpack : blog subscription */
@media (max-width:1400px) {
    #blog-subscription {
        margin-left:20px; margin-right:20px; width:auto; box-sizing:border-box;
    }
}
@media (max-width:1023px) {
    #blog-subscription {
        padding:20px;
    }
    #blog-subscription .widget {
        flex-direction:column; align-items:flex-start;
    }
    #blog-subscription .widget > * {
        width:100%;
    }
    #blog-subscription .widgettitle {
        font-size:28px; margin-bottom:24px; padding-bottom:0;
    }
    #blog-subscription #subscribe-email {
        flex:3;
    }
    #blog-subscription #subscribe-submit {
        flex:1;
    }
    #blog-subscription input[type=email] {
        max-width:none; width:100%;
    }
    #blog-subscription .submit {
        width:100%;
    }
}
@media (max-width:767px) {
    #blog-subscription {
        margin-bottom:-146px;
    }
    #footer {
        padding-top:192px;
    }
    #blog-subscription .form {
        flex-direction:column;
    }
    #blog-subscription .form > * {
        width:100%;
    }
    #blog-subscription input[type=email] {
        margin-bottom:12px;
    }
    #blog-subscription .form-wrapper.error .form {
        box-shadow:none;
    }
    #blog-subscription .form-wrapper.error .form .field {
        box-shadow:0 0 5px rgba(250,100,0,.9);
    }
    #blog-subscription .form-wrapper.message-filled #subscribe-email .message {
        display:block; margin-top:-.3em; margin-bottom:1.6em;
    }
    #blog-subscription .form-wrapper > .message {
        display:none;
    }
}


/* Footer, partie bleue */
@media (max-width:959px) {
    #footer .body {
        display:block;
    }
    #footer a.logo {
        text-decoration:none; font-size:0;
    }
    #footer a.logo {
        display:inline-block; margin-top:20px; color:white;
    }
    #footer a.logo > * {
        display:inline-block; vertical-align:bottom;
    }
    #footer a.logo > img.mobile {
        width:174px; height:auto;
    }
    #footer a.logo > img.desktop {
        display:none;
    }
    #footer a.logo .blog-name {
        font-family:'DINPro-Regular'; font-size:18px; line-height:22px;
        border-left:1px solid white; color:white;
        padding-left:10px; margin-left:12px;
    }
    #footer .slogan {
        display:none;
    }
    #footer .columns {
        width:auto; justify-content:flex-start; padding-top:24px;
    }
    #footer .column {
        flex:1;
    }
    #footer .column .links {
        margin-top:0;
    }
    #footer .column .links + .links {
        margin-top:44px;
    }
    #footer .column h4 {
        font-size:14px; line-height:44px;
    }
    #footer .column a {
        font-size:16px; line-height:44px;
    }
    #footer .foot {
        margin-top:44px; flex-direction:column;
    }
    #footer .foot .links {
        margin-top:1em;
    }
    #footer .foot .links a {
        margin-left:0; margin-right:60px;
    }
}
@media (max-width:639px) {
    #footer .columns {
        padding-top:32px; padding-right:0; flex-wrap:wrap;
    }
    #footer .column {
        flex:none; margin-bottom:24px;
    }
    #footer .column .groups-of-links {
        flex-direction:row;
    }
    #footer .column .links + .links {
        margin-top:0;
    }
    #footer .column .links {
        width:calc(50vw - 30px);
    }
    #footer .foot {
        margin-top:20px;
    }
}


/* Cookie notice */
@media (max-width:960px) {
    #cookie-notice.opened {
        max-height:160px;
    }
}
@media (max-width:600px) {
    #cookie-notice.opened {
        max-height:210px;
    }
}
@media (max-width:400px) {
    #cookie-notice.opened {
        max-height:270px;
    }
}
@media (max-width:639px) {

    #cookie-notice .wysiwyg .inner {
        padding-right:0;
    }
    #cookie-notice .wysiwyg p {
        text-align:justify;
    }
    #cookie-notice .wysiwyg .inner br {
        display:none;
    }
    #cookie-notice .close {
        position:static; float:right;
        margin-right:-20px; margin-top:-1.5em; margin-left:2em;
    }
}