/*
Theme Name: Multivers
Author: Moi
*/

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Regular.woff2');
    src: local('☺'),
        url('fonts/Raleway-Regular.woff') format('woff'),
        url('fonts/Raleway-Regular.otf') format('otf'),
        url('fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Bold.woff2');
    src: local('☺'),
        url('fonts/Raleway-Bold.woff') format('woff'),
        url('fonts/Raleway-Bold.otf') format('otf'),
        url('fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Black.woff2');
    src: local('☺'),
        url('fonts/Raleway-Black.woff') format('woff'),
        url('fonts/Raleway-Black.otf') format('otf'),
        url('fonts/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
}

* { font-family: "Raleway"; }
html { overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
:root { --principal: #7F43CB; --personnages: #D73227; --lieux: #4370C8; --objets: /*#53c4be*/#D73227; --evenements: #4370C8; --irl: /*#4fb160#e7ab14*/#7F43CB; --episodes: #7F43CB; --series: #7F43CB; }
:target { scroll-margin-top: 40px; }
p a, ul a, ol a { font-weight: 700; color: var(--principal); }
.personnages p a, .personnages ul a, .personnages ol a { color: var(--personnages); }
.lieux p a, .lieux ul a, .lieux ol a { color: var(--lieux); }
.objets p a, .objets ul a, .objets ol a { color: var(--objets); }
.evenements p a, .evenements ul a, .evenements ol a { color: var(--evenements); }
.irl p a, .irl ul a, .irl ol a { color: var(--irl); }
.episodes p a, .episodes ul a, .episodes ol a { color: var(--episodes); }
.content p a:hover { color: #333; }



/* VARIABLES */

.fond:hover { background: #333 !important; }



/* HEADER */

.admin { margin-top: 30px; }

.site-header { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%); padding: 0 20px; height: 80px; position: absolute; width: 100%; top: 0; z-index: 10; box-sizing: border-box; }
.custom-logo { width: 200px; height: auto; }
.custom-logo-link { width: 170px; }
.menuprinc, #menu-menu-principal, #menu-menu-principal > li { height: 100%; display: flex; align-items: center; margin: 0; }
#menu-menu-principal { display: flex; list-style-type: none; gap: 40px; }
#menu-menu-principal a { text-transform: uppercase; font-weight: bold; color: white; transition: all 0.2s ease; }
#menu-menu-principal a:hover { color: black }

/* Sub-menu */
#menu-menu-principal .sub-menu { display: none; border-radius: 3px; background-color: rgba(255,255,255,0.9); position: absolute; transition: all 0.2s ease; padding: 10px 10px 0; top: 60px; list-style-type: none; }
#menu-menu-principal .sub-menu li.menu-item { padding: 0 0 10px; }
#menu-menu-principal .sub-menu li a, #menu-menu-principal .sub-menu li a strong { color: black; text-transform: initial; font-weight: lighter; }
#menu-menu-principal li.menu-item:hover > a:not(.devis) { color: black; }
#menu-menu-principal li.menu-item:hover > .sub-menu { display: block; opacity: 1; animation: normal 0.3s submenu; }
@keyframes submenu {
    from { opacity: 0; display: none; }
    to { opacity: 1; display: block; }
}

/* Burger */
.bar { transition:0.2s; cursor:pointer; }
.bar-1, .bar-2, .bar-3 { width:5em; display: block; width: 33px; border-top: 5px solid white; margin-top:6px; transition:0.2s; border-radius: 10px; }
.inverted .bar span { border-color: var(--grism); }
.change .bar-1 { -webkit-transform: rotate(-45deg) translate(-10px, 5px); transform: rotate(-45deg) translate(-4px, 8px); }
.change .bar-2 { opacity:0; }
.change .bar-3 { -webkit-transform: rotate(45deg) translate(-10px, 5px); transform: rotate(45deg) translate(-8px, -12px); }
.menu-mobile, .burger-menu { display: none; }
.burger-menu { width: 170px; justify-content: flex-end; }

/* Menu Mobile */
.menu-mobile { position: absolute; top: 82px; left: 0; padding: 20px; width: 100%; background-color: white; }
.menu-mobile .menu { display: flex; flex-wrap: wrap; gap: 15px 20px; list-style-type: none; }
.menu-mobile .menu-item { width: 100%; }
.menu-mobile .menu-item a { text-transform: uppercase; font-weight: bold; }
.menu-mobile .menu-item a:hover { color: black; }
.menu-mobile .sub-menu { padding: 0 10px; margin: 5px 0 0; position: relative; list-style-type: none; }
.menu-mobile .sub-menu::before { content: ""; height: 100%; width: 3px; background-color: black; display: block; position: absolute; left: 0; top: 0; border-radius: 2px; }
.menu-mobile .sub-menu .menu-item a, .menu-mobile .sub-menu .menu-item a strong { font-weight: lighter; text-transform: inherit; }

@media screen and (max-width: 1000px) {
    .menuprinc{ display: none; }
    .burger-menu { display: flex; }
}

/* Search bar */
.barre-recherche { width: 200px; }
.barre-recherche li { list-style-type: none; }
.wp-block-search__button { margin-left: 0; }
.barre-recherche .wp-block-search__inside-wrapper { border: none; }



/* MAIN */
.content { margin: 0 auto; max-width: 1240px; padding: 0 20px; }
.page .content { margin-top: 50px; }
.page .wp-block-columns { margin-bottom: 50px; }
.wp-block-button__link { transition: all 0.2s ease; }
.wp-block-button__link:hover { background-color: #333 !important; }

.wp-block-cover { overflow: visible; padding: 40px 0; position: relative; }
.wp-block-cover > span { position: absolute; top: 0; bottom: 0; }
.wp-block-cover .wp-block-cover__inner-container { position: relative; }
.wp-block-cover > span, .wp-block-cover .wp-block-cover__image-background, .wp-block-cover .wp-block-cover__video-background { width: 100vw !important; margin: 0 calc(50% - 50vw) !important; }



/* HOME */
.home .content .wp-block-cover:first-child { padding-top: 100px; }



/* ARCHIVES */
.posts { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px 5%; }
.posts, .post-en-avant { margin: 30px 0; padding: 30px 0; }
.posts .post { width: 30%; }
.post .miniature { position: relative; width: 100%; height: auto; overflow: hidden; border-radius: 5px; }
.post .miniature img, .post .miniature a:not(.fond) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: all 0.2s ease; }
.post .miniature img, .post .miniature .no-thumbnail { background-color: lightgrey; }
.post .miniature a:hover img { transform: scale(1.1); filter: brightness(0.7); }
.post .miniature .no-thumbnail:hover { background-color: #333; }
.post .type-article { color: white; font-weight: 900; padding: 10px; border-radius: 5px 0 5px 0; text-transform: uppercase; position: absolute; left: 0; top: 0; z-index: 2; }
.post h3 { text-transform: uppercase; font-size: 20px; margin: 10px 0; font-weight: 900; }
.post p { margin: 10px 0; }
.post .decouvrir { text-transform: uppercase; text-align: right; font-weight: 900; display: block; width: max-content; margin-left: auto; }
.post .decouvrir:hover { color: #333 !important; }

.post-en-avant .post { display: flex; gap: 2%; }
.post-en-avant .post .miniature, .post-en-avant .post .infos-article { width: 48%; }
.post-en-avant h3 { font-size: 30px; }
.post-en-avant .post .infos-article { display: flex; flex-direction: column; justify-content: center; }
.post-en-avant .post .infos-article p br { margin-bottom: 10px; }
.post-en-avant .post .miniature, .post-en-avant .post .miniature img, .post-en-avant .post .miniature a:not(.fond) { height: auto; aspect-ratio: 16 / 9; }

.last-episode { background-color: #EEE1FF; width: 100vw; margin: 30px calc(50% - 50vw); }
.last-episode > div { max-width: 1240px; padding: 0 30px; margin: auto; }
.last-episode h2 { margin-top: 0; font-size: 30px; text-transform: uppercase; }



/* SINGLE */
.single h2 { margin: 0; font-size: 30px; }

.bandeau { width: 100%; position: relative; height: 400px; overflow: hidden; display: flex; justify-content: center; align-items: center; border-bottom: 5px solid; background: lightgray; margin: 0; z-index: 6; }

.bandeau h1 { position: relative; z-index: 2; color: white; text-align: center; max-width: 1200px; text-transform: uppercase; font-weight: 400; font-size: 30px; text-shadow: 0 0 4px black; }
.bandeau h1 strong { font-weight: 900; font-size: 60px; text-shadow: 0 0 6px black; }
.bandeau .image-bandeau { position: absolute; top: 0; left: 0; z-index: 1; object-fit: cover; width: 100%; min-height: 100%; }
.bandeau .type-article { position: absolute; bottom: 0; left: 20px; z-index: 2; color: white; padding: 7px; text-transform: uppercase; font-size: 16px; font-weight: 700; border-radius: 5px 5px 0 0; line-height: 1; }
.bandeau .categories { position: absolute; z-index: 2; bottom: 0; right: 20px; color: white; }
.bandeau .categories a img { transition: all 0.2s ease; filter: brightness(2); width: 50px; }
.bandeau .categories a:hover img { filter: brightness(0.9) invert(1); }

.home .bandeau { border: none; margin-bottom: 40px; }

.infos { display: flex; justify-content: center; gap: 30px; list-style-type: none; margin: 50px 0; padding: 0; flex-wrap: wrap; }
.infos li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.infos li b { text-transform: uppercase; font-size: 18px; }
.infos li a:hover { color: var(--principal); }

.single figcaption { font-style: italic; position: absolute; bottom: -40px; }

.single blockquote { width: fit-content; margin: auto; }
.single blockquote p { font-size: 30px; margin-bottom: 0; }
.single blockquote p::before { content: "« "; }
.single blockquote p::after { content: " »"; }
.single blockquote cite { font-style: normal; font-weight: 900; }
.single .content > h2, .single blockquote { margin-top: 40px; margin-bottom: 40px; }
.single .wp-block-column li { margin-bottom: 10px; }

.single .wp-block-embed iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; border-radius: 5px; }

.single .wp-block-image { margin: 30px 0; position: relative; }
.wp-block-image img { border-radius: 5px; }

/* Relations */
.relations .contenant { position: relative; width: fit-content; max-width: 100%; height: 100%; }
.relations button { position: absolute; border: none; background: none; cursor: pointer; top: 45px; font-size: 20px; font-weight: bold; }
.relations button.slideLeft { left: -30px; }
.relations button.slideRight { right: -30px; }

.relations h2 img { width: 50px; filter: brightness(0.9) invert(1); margin: 0 0 -15px 10px; transition: all 0.3s ease; }
.relations h2 a:hover img { filter: brightness(0.5) invert(1); }
.relations h2 a:hover, .relations h3 a:hover { color: var(--principal); }
.relations a:hover { color: white; }

.relations .posts { flex-wrap: nowrap; margin: 10px 0; padding: 0 0 30px; overflow-x:auto; gap: 25px; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; max-width: 100%; width: fit-content; }
.relations .posts::-webkit-scrollbar { display: none; }

.relations .posts .post { min-width: 200px; max-width: 200px; }
.relations .posts .post h3 { font-size: 15px; }
.relations .post .type-article, .relations .post .decouvrir { font-size: 12px; padding: 7px; }

/* Sommaire */
#rank-math-toc { position: fixed; top: 0; bottom: 0; margin: auto; height: fit-content; left: -340px; width: 300px; padding: 20px; background: white; border-radius: 0 0 5px 0; z-index: 5; box-shadow: 0 0 5px rgba(0, 0, 0, 0.50); transition: all 0.3s ease; }
#rank-math-toc:hover { left: 0; }

#rank-math-toc::before { content:""; position: absolute; right: -27px; padding: 10px; top: 0; background: white; box-shadow: 5px 0px 5px 0px rgba(0,0,0,0.5); border-radius: 0 5px 5px 0; width: 10px; height: 10px; cursor: pointer; }
#rank-math-toc::after { content:">"; position: absolute; right: -27px; padding: 10px; top: -4px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
#rank-math-toc:hover::after { rotate: 180deg; }

.single #rank-math-toc h2 { font-size: 20px; }
#rank-math-toc ol { padding-left: 20px; }
#rank-math-toc li { margin-bottom: 10px; }
#rank-math-toc a { transition: all 0.3s ease; }
#rank-math-toc a:hover { color: var(--principal); }



/* FOOTER */
.petit-peton { background: url('https://www.minecraft-multivers.fr/wp-content/uploads/2023/08/theme-e1692199962647.jpg'); background-position: center; background-size: 100%; background-repeat: none; background-clip: border-box; background-blend-mode: multiply; background-color: #535353; }
.petit-peton .widget { max-width: 1240px; padding: 0 20px; margin: auto; list-style-type: none; }
.petit-peton .widget .footer { margin: 0 auto; max-width: 1000px; justify-content: space-evenly; }
.petit-peton .widget .footer > div { flex-basis: initial !important; flex-grow: initial !important; max-width: 200px; }
.petit-peton p, .petit-peton a, .petit-peton h2 { color: #e9e9e9; }
.petit-peton a, .petit-peton p a { transition: 0.3s ease; color: #e9e9e9; }
.petit-peton p a { font-weight: initial; }
.petit-peton p strong a { font-weight: 700; }
.petit-peton a:hover, .petit-peton p a:hover { color: var(--principal); }
.petit-peton .site-info { margin: 0; padding: 10px 0; background: #333; }
.petit-peton .site-info p { margin: 0; }



/* COOKIES */
body #cmplz-document { max-width: inherit; }

/* GENERAL */
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright { display: block; }





/* RESPONSIVE */
@media screen and (max-width: 800px) {

    .post-en-avant .post { flex-wrap: wrap; }
    .post-en-avant .post .miniature, .post-en-avant .post .infos-article { width: 100%; }
    .posts .post p { display: none; }
    .posts .post h3 { font-size: 20px; }
    .post .type-article, .post .decouvrir { font-size: 12px; }

    .bandeau { flex-direction: column; }
    
}

@media screen and (max-width: 781px) {
    .content .wp-block-columns.inverse { flex-wrap: wrap-reverse !important; }
}

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

    .posts .post { width: 100%; margin-bottom: 20px; }
    .post h3 { font-size: 20px; }
    .post p, .single p { font-size: 14px; }

    .bandeau h1 { font-size: 20px; }
    .bandeau h1 strong { font-size: 30px; }
    
}