/*
Theme Name: Eclats du Rire
Theme URI: https://eclatsdurire.lille3000.com/
Author: Festival Eclats du Rire
Author URI: https://eclatsdurire.lille3000.com/
Description: Thème enfant du thème Twenty Twenty-Five pour le site de l'expo Eclats du Rire.
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eclats-du-rire
*/

#wpadminbar {
    top: unset;
    bottom: 0;
}

html {
    margin-top: 0 !important;
}

:where(.wp-site-blocks :focus) {
    outline-width: none;
    outline-style: none
}

/* Menus classiques (Apparence > Menus), un par langue via Polylang. */
.primary-navigation__menu,
.footer-navigation__menu,
.legal-navigation__menu,
.comm-navigation__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--wp--preset--spacing--30, 1rem);

}

.legal-navigation__menu {
    gap: var(--wp--preset--spacing--10, 0.5rem);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.primary-navigation__menu a,
.footer-navigation__menu a,
.legal-navigation__menu a,
.comm-navigation__menu a {
    text-decoration: none;
}

.primary-navigation__menu a:hover,
.footer-navigation__menu a:hover,
.legal-navigation__menu a:hover,
.comm-navigation__menu a:hover {
    text-decoration: underline;
}

.primary-navigation .current-menu-item>a,
.footer-navigation .current-menu-item>a,
.legal-navigation .current-menu-item>a,
.comm-navigation .current-menu-item>a {
    font-weight: 600;
}

/*
 * Sous-menus (items avec enfants dans Apparence > Menus, ex. "Exposition").
 * Affichage en menu déroulant au survol/focus, fermé par défaut.
 */
.primary-navigation__menu .menu-item-has-children,
.footer-navigation__menu .menu-item-has-children {
    position: relative;
}

.primary-navigation__menu .sub-menu,
.footer-navigation__menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    flex-direction: column;
    min-width: 200px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    gap: 0;
    background: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #111);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    border-radius: 0.25rem;
}

.primary-navigation__menu .menu-item-has-children:hover>.sub-menu,
.primary-navigation__menu .menu-item-has-children:focus-within>.sub-menu,
.footer-navigation__menu .menu-item-has-children:hover>.sub-menu,
.footer-navigation__menu .menu-item-has-children:focus-within>.sub-menu {
    display: flex;
}

.primary-navigation__menu .sub-menu a,
.footer-navigation__menu .sub-menu a {
    display: block;
    padding: 0.4rem 1rem;
    white-space: nowrap;
}

.primary-navigation__menu {
    font-weight: 300;
    overflow-x: hidden;
}

.primary-navigation__menu li:has(.sub-menu)>a {
    padding-right: 5px;
}

.primary-navigation__menu li:has(.sub-menu)>a:after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border: 1px #000 solid;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    bottom: 5px;
    left: 5px;
    position: relative;
}

.primary-navigation__menu li:last-child:hover .sub-menu {
    left: auto;
    right: 0;
}

.primary-navigation__menu .sub-menu {
    display: block;
    transition: ease 1s transform, ease 1s opacity;
    left: -9999px;
    opacity: 0;
    transform: translateY(10%);
}

.primary-navigation__menu li:hover .sub-menu {
    display: block;
    transition: cubic-bezier(.39, 3, .8, 1) 0.4s transform, ease 1s opacity;
    left: 0;
    opacity: 1;
    transform: translateY(0%);
}

.primary-navigation__menu li:has(.sub-menu li.current_page_item) {
    font-weight: 700;
}

.primary-navigation__menu li .sub-menu li {
    font-weight: 300;
}

.wp-block-polylang-language-switcher select {
    background: var(--wp--preset--color--accent-1);
    color: #111;
    border: none;
    padding: 5px 8px;
    border-radius: 2rem;
}


.header-logo-lille3000 img {
    width: 80px;
}

@media screen and (max-width: 768px) {
    .header-logo-lille3000 img {
        width: 52px;
    }
}

.header-logo-site img {
    width: 210px;
}

/*
 * Icônes réseaux sociaux.
 * Usage : class="ico ico-facebook" ou class="ico ico-facebook-blanc"
 * Source SVG : assets/img/ico/
 */
.ico {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1em;
    text-indent: -9999px;
    overflow: hidden;
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: bottom;
}

.ico-facebook {
    background-image: url(assets/img/ico/ico-facebook.svg);
}

.ico-facebook-blanc {
    background-image: url(assets/img/ico/ico-facebook-blanc.svg);
}

.ico-instagram {
    background-image: url(assets/img/ico/ico-instagram.svg);
}

.ico-instagram-blanc {
    background-image: url(assets/img/ico/ico-instagram-blanc.svg);
}

.ico-linkedin {
    background-image: url(assets/img/ico/ico-linkedin.svg);
}

.ico-linkedin-blanc {
    background-image: url(assets/img/ico/ico-linkedin-blanc.svg);
}

.ico-tiktok {
    background-image: url(assets/img/ico/ico-tiktok.svg);
}

.ico-tiktok-blanc {
    background-image: url(assets/img/ico/ico-tiktok-blanc.svg);
}

.ico-youtube {
    background-image: url(assets/img/ico/ico-youtube.svg);
}

.ico-youtube-blanc {
    background-image: url(assets/img/ico/ico-youtube-blanc.svg);
}


/*
NAVIGATION
*/

.close-nav {
    display: none;
}

.image-affiche {
    position: relative;
    z-index: 9;
}

.image-affiche:before {
    content: "";
    position: absolute;
    left: 50%;
    background: #fff;
    width: 80%;
    aspect-ratio: 1;
    transform-origin: center;
    transform: translate(-55%, -10%);
    border-radius: 50%;
    z-index: -1;
}

.wp-block-latest-posts__featured-image {
    width: 100%;
    max-height: 200px;
    height: 200px;
    position: relative;
}

.wp-block-latest-posts__featured-image a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 2rem;
}

.wp-block-latest-posts__featured-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100% !important;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.wp-block-latest-posts__list li {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.wp-block-latest-posts__post-date {
    font-size: 10px;
}

.wp-block-latest-posts__post-title {
    font-weight: 700;
    font-size: 1.2em;
    display: block;
}

/*HOME*/

@media screen and (min-width: 1050px) {
    #home-entete {
        margin-top: -100px;
    }
}

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

    #navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        overflow: scroll;
        background: #000;
        color: #fff;
        z-index: 88888;
        transform: translateX(-100%);
        transition: all .5s ease;
    }

    #navigation-content {
        align-items: start;
        padding: 1.5rem;
    }

    .menu_active #navigation {
        transform: translateX(0%);
    }

    .primary-navigation {
        width: 100%;
        padding: 2rem 0;
        font-size: 1.5em;
    }

    .primary-navigation ul.primary-navigation__menu {
        flex-direction: column !important;
        align-items: start;
        width: 100%;
    }

    .primary-navigation ul.primary-navigation__menu>li>a {
        font-size: 1em;
    }

    .primary-navigation ul.primary-navigation__menu .sub-menu a {
        font-size: 1em;
        color: #fff;
    }

    /*
     * En mobile, le survol n'existe pas : le sous-menu s'ouvre/se ferme au
     * clic (classe .open togglée par script.js) plutôt que de dépendre
     * d'un hover.
     *
     * Ouverture animée sur la hauteur réelle du contenu via
     * grid-template-rows: 0fr → 1fr plutôt qu'un height:0 → height:auto/
     * fit-content (valeurs non interpolables, donc non transitionnables en
     * CSS — d'où le recours à un max-height arbitraire type "3000px" sinon).
     * Le conteneur (li) passe en grille à une ligne, dont la hauteur de
     * piste anime de 0fr à 1fr ; min-height:0 sur le sous-menu est
     * nécessaire pour qu'il accepte de se réduire à 0 (sans ça, la taille
     * minimale intrinsèque d'un item de grille empêche le repli complet).
     */
    .primary-navigation ul.primary-navigation__menu>.menu-item-has-children {
        display: grid;
        grid-template-rows: auto 0fr;
        transition: grid-template-rows .4s ease;
    }

    .primary-navigation ul.primary-navigation__menu>.menu-item-has-children.open {
        grid-template-rows: auto 1fr;
    }

    .primary-navigation ul.primary-navigation__menu .sub-menu {
        display: flex;
        flex-direction: column;
        position: static;
        box-shadow: none;
        background: transparent;
        min-height: 0;
        overflow: hidden;
        padding: 0 0 0 1rem;
        opacity: 0;
        transition: opacity .3s ease;
    }

    .primary-navigation ul.primary-navigation__menu>.menu-item-has-children.open .sub-menu {
        opacity: 1;
        transition: opacity .4s ease .1s;
        /* léger délai pour arriver après l'ouverture */
    }

    .primary-navigation__menu li:has(.sub-menu)>a:after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border: 1px #fff solid;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
        bottom: 5px;
        left: 5px;
        position: relative;
    }

    .close-nav {
        display: block;
        position: fixed;
        z-index: 99999;
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        top: 4rem;
        right: 1rem;
        transition: top .3s cubic-bezier(.39, 3, .8, 1) .3s;
    }

    body.is-scrolled .close-nav {
        top: 1rem;
    }

    .close-nav:after,
    .close-nav:before {
        position: absolute;
        content: '';
        display: block;
        height: 3px;
        width: 40px;
        background: #111;
        margin: 0;
        padding: 0;
        transition: cubic-bezier(.39, 3, .8, 1) .3s all;
    }

    .close-nav:before {
        top: 10px;
    }

    .close-nav:after {
        top: 25px;
    }

    .menu_active #navigation {
        transform: translateX(0%);
    }

    .menu_active .close-nav {
        top: 1rem;
    }

    .menu_active .close-nav:before {
        top: 20px;
        transform: rotate(45deg);
        background: #fff;
    }

    .menu_active .close-nav:after {
        top: 20px;
        transform: rotate(-45deg);
        background: #fff;
    }
}