/*
 * Phones and tablets (the site no longer uses WPtouch), video page and scrollbar.
 * Computers (1024 px wide and more) keep the original layout of style.css: the phone and tablet rules
 * only apply below 1024 px, the same width as in js/integration.js (no popup below it).
 */


/* Scrollbar: thin and grey as with niceScroll, but the browser scrolls natively */
html{ scrollbar-width:thin; scrollbar-color:#545353 #000; }
html::-webkit-scrollbar{ width:6px; background:#000; }
html::-webkit-scrollbar-thumb{ background:#545353; }


/* Elements of phones and tablets, hidden on computers */
.tb-mobile-bar, .tb-mobile-search, .tb-mobile-menu, .tb-mobile-overlay, .tb-mobile-title{ display:none; }


/* Video page: the player, then the title, the credits and a way back */
body .content-video{ padding:110px 15px 140px; }
body .content-video .tb-video-page{ max-width:calc((100vh - 400px) * 16 / 9); min-width:480px; } /* computers: player and credits fit between the top and the footer */
body .tb-video-player{ position:relative; aspect-ratio:16 / 9; background:#000; }
body .tb-video-player iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
body .tb-video-infos{ padding-top:25px; color:#fff; }
body .tb-video-infos .tb-video-title{ margin:0; color:#fff; font-family:"AlrightSans-Medium"; font-size:16px; font-weight:bold; text-transform:uppercase; }
body .tb-video-infos .tb-video-meta{ margin:4px 0 0; color:#7F7F7F; font-family:"AlrightSans-Medium"; font-size:12px; text-transform:uppercase; }
body .tb-video-infos .tb-video-description{ margin-top:12px; color:rgba(255,255,255,0.8); font-size:12px; line-height:1.5; }
body .tb-video-infos .tb-video-description p{ margin:0 0 4px; }
body .tb-video-infos .tb-video-retour{ display:inline-block; margin-top:25px; padding-bottom:3px; color:#fff; border-bottom:1px solid #fff; font-size:13px; text-transform:uppercase; text-decoration:none; }
body .tb-video-infos .tb-video-retour::before{ content:""; display:inline-block; width:6px; height:6px; margin:0 8px 2px 1px; border-left:1px solid #fff; border-bottom:1px solid #fff; transform:rotate(45deg); }
body .tb-video-infos .tb-video-retour:hover{ color:#7F7F7F; }


@media screen and (max-width: 1023px) {

    /* Top bar: search, logo, menu (the side column of computers is hidden) */
    body #page{ padding-top:54px; }
    body #page #masthead, body #page .banniere{ display:none; }
    body #page .tb-mobile-bar{ display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; right:0; z-index:30; height:54px; padding:0 6px; background:#000; border-bottom:1px solid #222; }
    body #page .tb-mobile-bar button, body #page .tb-mobile-search button{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; text-shadow:none; color:#fff; cursor:pointer; }
    body #page .tb-mobile-bar button:focus-visible, body #page .tb-mobile-search button:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
    body #page .tb-mobile-logo img{ display:block; width:auto; height:34px; }
    body #page .tb-mobile-menu-toggle path{ stroke:currentColor; stroke-width:2.6; stroke-linecap:round; transform-box:view-box; transform-origin:12px 12px; transition:transform 0.25s ease, opacity 0.2s ease; }
    body.tb-menu-open #page .tb-mobile-menu-toggle .tb-burger-top{ transform:rotate(45deg) translateY(6.5px); }
    body.tb-menu-open #page .tb-mobile-menu-toggle .tb-burger-middle{ opacity:0; }
    body.tb-menu-open #page .tb-mobile-menu-toggle .tb-burger-bottom{ transform:rotate(-45deg) translateY(-6.5px); }

    /* Search, slides down under the bar */
    body #page .tb-mobile-search{ display:flex; align-items:center; position:fixed; top:54px; left:0; right:0; z-index:25; padding:10px 6px 10px 14px; background:#111; border-bottom:1px solid #222; transform:translateY(-100%); visibility:hidden; transition:transform 0.25s ease, visibility 0s 0.25s; }
    body.tb-search-open #page .tb-mobile-search{ transform:none; visibility:visible; transition:transform 0.25s ease; }
    body #page .tb-mobile-search input{ flex:1; min-width:0; height:40px; margin:0 6px 0 0; padding:0 12px; border:1px solid #333; border-radius:0; background:#000; color:#fff; font-size:16px; -webkit-appearance:none; appearance:none; box-sizing:border-box; }
    body #page .tb-mobile-search input:focus{ border-color:#7F7F7F; outline:0; }

    /* Menu, slides in from the right like the WPtouch one */
    body #page .tb-mobile-menu{ display:block; position:fixed; top:54px; right:0; bottom:0; z-index:25; width:270px; max-width:85vw; overflow-y:auto; background:#1a1a1a; transform:translateX(100%); visibility:hidden; transition:transform 0.25s ease, visibility 0s 0.25s; }
    body.tb-menu-open #page .tb-mobile-menu{ transform:none; visibility:visible; transition:transform 0.25s ease; }
    body #page .tb-mobile-menu ul{ list-style:none; margin:0; padding:0; }
    body #page .tb-mobile-menu li{ margin:0; }
    body #page .tb-mobile-menu a{ display:block; padding:14px 20px; border-bottom:1px solid #262626; color:#fff; font-size:16px; text-transform:uppercase; text-decoration:none; }
    body #page .tb-mobile-menu .sub-menu a{ padding:11px 20px 11px 36px; color:#aaa; font-size:13px; }
    body #page .tb-mobile-menu .current-menu-item > a{ background:#262626; }
    body #page .tb-mobile-overlay{ display:block; position:fixed; top:54px; left:0; right:0; bottom:0; z-index:20; background:rgba(0,0,0,0.6); opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0s 0.25s; }
    body.tb-menu-open #page .tb-mobile-overlay, body.tb-search-open #page .tb-mobile-overlay{ opacity:1; visibility:visible; transition:opacity 0.25s ease; }
    body.tb-menu-open{ overflow:hidden; }

    /* Content over the whole width */
    body #page .wrap_container{ width:auto; height:auto; }
    body #page #content.site-content, body #page #content.site-content-special{ position:static; top:auto; left:auto; width:auto; margin:0; padding:0; }
    body #page #content.site-content-special{ padding:0 20px 10px; }
    body #page .site-content-special #primary{ display:block; top:auto; }
    body #page .content-page, body #page .content-about, body #page .content-search{ top:auto; height:auto; overflow:visible; }
    body #page .tb-mobile-title{ display:block; margin:0; padding:22px 20px; color:#fff; font-size:22px; font-weight:bold; text-align:center; text-transform:uppercase; }

    /* Lists of videos: picture over the whole width, then title and author */
    body #page .archive-main{ margin:0; }
    body #page .archive-main .block_wrap{ width:auto; margin:0; }
    body #page .archive-main .block_wrap article.hentry{ margin:0; }
    body #page .archive-main .block_wrap article a{ text-decoration:none; }
    body #page .archive-main .block_wrap article .block_img_wrap{ float:none; position:relative; top:auto; left:auto; right:auto; width:auto; height:auto; margin:0; opacity:1; z-index:auto; }
    body #page .archive-main .block_wrap article .block_img_wrap img{ display:block; width:100%; height:auto; max-width:100%; }
    body #page .archive-main .block_wrap article .block_img_wrap .border_thumbnail{ display:none; }
    body #page .archive-main .block_wrap article .block_content_wrap{ float:none; position:relative; width:auto; height:auto; margin:0; padding:16px 56px 22px 25px; background:#000; line-height:normal; text-align:left; }
    body #page .archive-main .block_wrap article .block_content_wrap::after{ content:""; position:absolute; top:50%; right:24px; width:10px; height:10px; margin-top:-6px; border-top:2px solid #888; border-right:2px solid #888; transform:rotate(45deg); }
    body #page .archive-main .block_wrap article .block_content_wrap .wrapper{ display:block; width:auto; line-height:normal; }
    body #page .archive-main .block_wrap article .block_content_wrap h1{ width:auto; margin:0; color:#fff; font-family:"AlrightSans-Medium"; font-size:15px; font-weight:bold; line-height:1.3; }
    body #page .archive-main .block_wrap article .block_content_wrap p{ margin:3px 0 0; color:#888; font-size:11px; }
    body #page .archive-main .block_wrap article a:hover .block_content_wrap h1{ font-size:15px; }
    body #page .content-archive .block_wrap_0, body #page .archive-main .block_wrap:nth-last-child(2){ margin:0; }

    /* Search results */
    body #page .content-search .page-header{ width:auto; margin:0; padding:20px 50px 0; }
    body #page .content-search .page-header div{ padding-bottom:12px; font-size:18px; }
    body #page .content-search .page-header .back_home::after{ top:26px; right:22px; }

    /* Video page: the player over the whole width */
    body #page .content-video{ padding:0 0 10px; }
    body #page .content-video .tb-video-page{ max-width:none; min-width:0; }
    body #page .tb-video-infos{ padding:18px 20px 0; }
    body #page .tb-video-infos .tb-video-title{ font-size:17px; }
    body #page .tb-video-infos .tb-video-meta{ font-size:13px; }
    body #page .tb-video-infos .tb-video-description{ font-size:14px; }

    /* About */
    body #page .content-about .site-about h2{ margin:25px 0; text-align:center; }
    body #page .content-about .site-about p{ font-size:15px; }
    body #page .content-about .site-about .about_content .about_content_youtube .youtube_content{ padding:14px 0 16px; }
    body #page .content-about .site-about .about_content .about_content_youtube .youtube_content .img_youtube_vues{ display:block; width:40px; height:40px; margin:0 auto 4px; }
    body #page .content-about .site-about h3.about_youtube{ display:block; margin:0; }
    body #page .content-about .site-about .tb-vues{ display:block; margin-top:4px; font-size:18px; }

    /* Contact (16 px fields: iPhones do not zoom in when the visitor types) */
    body #page .content-page .entry-header{ margin-top:25px; }
    body #page .content-page .entry-content{ width:auto; }
    body #page .content-page .entry-content > p:first-child{ width:auto; }
    body #page .content-page .entry-content form .left, body #page .content-page .entry-content form .right{ display:block; width:100%; margin-right:0; }
    body #page .content-page .entry-content form input, body #page .content-page .entry-content form textarea{ font-size:16px; }
    body #page .content-page .entry-content form textarea{ width:100%; }
    body #page .content-page .entry-content form .wpcf7-response-output{ margin-top:30px; }

    /* Page not found */
    body #page .content-error .container{ margin-top:40px; padding:0 20px; }
    body #page .content-error .container h1{ font-size:6em; }

    /* Footer: the social networks (the links of the computer footer are in the menu) */
    body #page #colophon{ position:static; width:auto; height:auto; margin:0; left:auto; bottom:auto; padding:24px 20px 32px; background:none; line-height:normal; text-align:center; }
    body #page #colophon ul#social_bar{ display:block; left:auto; bottom:auto; margin:0; }
    body #page #colophon ul#social_bar li{ padding:0; }
    body #page #colophon ul#social_bar li a{ display:inline-block; padding:10px 12px; }
    body #page #colophon .site-info{ display:none; }
}

/* Tablets: slightly bigger titles under the wider pictures */
@media screen and (min-width: 600px) and (max-width: 1023px) {
    body #page .archive-main .block_wrap article .block_content_wrap{ padding:20px 64px 24px 30px; }
    body #page .archive-main .block_wrap article .block_content_wrap h1, body #page .archive-main .block_wrap article a:hover .block_content_wrap h1{ font-size:18px; }
    body #page .archive-main .block_wrap article .block_content_wrap p{ font-size:12px; }
    body #page .tb-video-infos{ padding:22px 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
    body #page .tb-mobile-search, body #page .tb-mobile-menu, body #page .tb-mobile-overlay, body #page .tb-mobile-menu-toggle path{ transition:none !important; }
}