/*
Theme Name: Luapaul
Author: Paul Bazille
Description: Thème du site.
Version: 1.0
*/

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Light.woff2'),
         url('/fonts/Inter-Light.otf') format('otf'),
         url('/fonts/Inter-Light.ttf') format('truetype');
    font-weight: 100;
    font-display: block;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2'),
         url('/fonts/Inter-Regular.otf') format('otf'),
         url('/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.woff2'),
         url('/fonts/Inter-Bold.otf') format('otf'),
         url('/fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: block;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Black.woff2'),
         url('/fonts/Inter-Black.otf') format('otf'),
         url('/fonts/Inter-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: block;
}

* { font-family: "Inter"; }
html { overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
main { max-width: 1240px; padding: 0 20px; margin: 0 auto; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
a:hover { color: var(--wp--preset--color--primaire); }
main ul { padding-left: 14px; }
main ol { padding-left: 18px; }
main ol li::marker { font-weight: bold; }
:target { scroll-margin-top: 120px; }

/* HEADER */
.site-header { position: relative; /*background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);*/ background: white; height: 80px; width: 100%; top: 0; z-index: 10; box-sizing: border-box; transition: all 0.2s ease; }
.site-header.fixed { position: fixed; box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px; }
.site-header.fixed.admin { margin-top: 32px; }
.site-header.fixed.transparent { background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%); box-shadow: none; }
.site-header.fixed.transparent a, .site-header.fixed.transparent .slogan { color: white; }
.site-header.fixed.transparent .mobile, .site-header.fixed.transparent .menu-header .sub-menu { background-color: black; }
.site-header.fixed + main > *:first-child { padding-top: 120px; }

.flex-header { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1240px; padding: 0 20px; margin: 0 auto; }
.titre-site { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 10px 0; box-sizing: border-box; }
.custom-logo-link { height: 100%; box-sizing: border-box; }
.custom-logo { width: auto; height: 100%; transition: all 0.3s ease; }
a:hover .custom-logo { filter: brightness(0) saturate(0); }
.slogan { font-size: 13.5px; font-weight: 900; text-transform: uppercase; }
.fullscreen { display: flex; height: 100%; align-items: center; gap: 40px; }

/* Menus */
.site-header .menu { height: 100%; display: flex; align-items: center; margin: 0; list-style-type: none; gap: 10px 40px; }
.site-header .menu a { text-transform: uppercase; font-weight: bold; color: var(--wp--preset--color--contraste); font-size: 14px; }
.site-header .menu a:hover, .site-header .menu .current_page_item > a { color: var(--wp--preset--color--primaire) !important; }

/* Menu principal */
.menu-header { height: 100%; }
.menu-header li { height: 100%; display: flex; align-items: center; gap: 20px 10px; }
.menu-header li:hover > .sub-menu { display: block; opacity: 1; animation: normal 0.3s submenu; }
.menu-header .sub-menu { display: none; opacity: 0; background-color: var(--wp--preset--color--white); position: absolute; transition: all 0.2s ease; padding: 10px 20px 0; top: 100%; list-style-type: none; animation: reverse 0.3s submenu; }
@keyframes submenu {
    from { opacity: 0; display: none; }
    to { opacity: 1; display: block; }
}
.menu .sub-menu::before { content: ""; height: 100%; width: 3px; background-color: var(--wp--preset--color--primaire); display: block; position: absolute; left: 0; top: 0; border-radius: 3px; }
.menu-header .sub-menu li { padding: 0 0 10px; margin-bottom: 5px; }
.menu-header .sub-menu li a { color: var(--wp--preset--color--contraste); text-transform: uppercase; font-weight: normal; }

.site-header .widget { list-style-type: none; }

/* Burger */
.burger-menu { width: 170px; justify-content: flex-end; align-items: center; height: 100%; }
.bar { transition:0.2s; cursor:pointer; }
.bar-1, .bar-2, .bar-3 { width:5em; display: block; width: 33px; border-top: 5px solid var(--wp--preset--color--primaire); margin-top:6px; transition:0.2s; border-radius: 10px; }
.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 */
.site-header .mobile { position: absolute; top: 80px; left: 0; padding: 20px; background-color: white; z-index: 10; width: 100%; }
.site-header .menu-mobile ul { flex-wrap: wrap; padding-left: 0; }
.site-header .menu-mobile li { width: 100%; }
.site-header .menu-mobile a { text-transform: uppercase; font-weight: bold; color: var(--wp--preset--color--contraste); }
.site-header .menu-mobile a:hover { color: var(--wp--preset--color--primaire); }
.site-header .menu-mobile .sub-menu { padding: 0 10px; margin: 5px 0 0; position: relative; list-style-type: none; }
.site-header .menu-mobile .sub-menu li a { font-weight: normal; text-transform: uppercase; }
.site-header .mobile .widget { margin-top: 20px; }
.site-header .mobile, .burger-menu { display: none; }

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

/* BLOCS RÉCURENTS */
p, li { line-height: 1.5em; }
h1, h2, h3, h4 { font-weight: normal; }
h1 strong, h2 strong, h3 strong, h4 strong { font-weight: 900; }
h1 em, h2 em, h3 em, h4 em { font-style: normal; font-size: 2em; }

h1[style*="text-decoration:underline"], h2[style*="text-decoration:underline"], h3[style*="text-decoration:underline"] { text-decoration: none !important; }
h1[style*="text-decoration:underline"]::after, h2[style*="text-decoration:underline"]::after, h3[style*="text-decoration:underline"]::after { content: ""; background-color: currentColor; height: 3px; width: 70px; display: block; margin: 20px 0; }
h1.has-text-align-center::after, h2.has-text-align-center::after, h3.has-text-align-center::after { margin: 20px auto; }
h1.has-text-align-right::after, h2.has-text-align-right::after, h3.has-text-align-right::after { margin-left: auto; }
.wp-block-cover__inner-container > h2::after, .wp-block-cover__inner-container > h3::after { background-color: currentColor; }

main > div { margin-bottom: 80px; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--wp--preset--color--contraste) !important; border-color: var(--wp--preset--color--contraste); color: var(--wp--preset--color--claire) !important; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--contraste) !important; }
.wp-block-button.is-style-outline .wp-block-button__link::before { content: ">"; margin-right: 10px; font-weight: 700; transition: all 0.2s ease; }
.wp-block-button.is-style-outline .wp-block-button__link:hover::before { margin-right: 5px; padding-left: 5px; }

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

.wp-block-group-is-layout-flex { justify-content: space-between; }
.wp-block-group-is-layout-flex > .wp-block-group-is-layout-flow { position: relative; flex: 1; align-self: stretch; width: 48%; }
.wp-block-group-is-layout-flex > .wp-block-group-is-layout-flow > figure img { position: absolute; top: 0; height: 100%; object-fit: cover; }

.wp-block-column { overflow: hidden; }
.wp-block-column.has-background > *:not(.wp-block-post-featured-image) { margin: 0 20px 20px; }
.wp-block-column.has-background > *:first-child:not(.wp-block-post-featured-image) { margin-top: 20px; }

.wp-block-post-featured-image, .wp-block-column > .wp-block-image, .wp-block-column > .wp-block-cover { margin: 0 !important; margin-bottom: 20px !important; }
.wp-block-post-featured-image img, .wp-block-image a img { transition: all 0.2s ease; }
.wp-block-post-featured-image a, .wp-block-image a { overflow: hidden; }
.wp-block-post-featured-image a:hover img, .wp-block-image a:hover img { transform: scale(1.1); }
.wp-block-column > .wp-block-group[style*="border-radius"] { overflow: hidden; }

.rank-math-breadcrumb { text-transform: uppercase; }
.rank-math-breadcrumb a { font-weight: bold; }
.rank-math-breadcrumb .separator { color: var(--wp--preset--color--primaire); }

/* Formulaire */
.wpcf7 input, form textarea { width: 100%; border: 1px solid var(--wp--preset--color--contraste); border-radius: 20px 2px 20px 2px; padding: 10px; box-sizing: border-box; font-size: 14px; }
form textarea { resize: vertical; }
.wpcf7 p { margin: 0; margin-bottom: 20px; }
.wpcf7 p, .wpcf7 label, .wpcf7 span { display: inline-block; width: 100%; }
.wpcf7 .flex { display: flex; justify-content: space-between; }
.wpcf7 .flex p { width: 48%; }
.wpcf7 .wpcf7-acceptance span { margin: 0; }
.wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; }
.wpcf7 .wpcf7-acceptance input { width: fit-content; }
.wpcf7 .wpcf7-acceptance a { color: var(--wp--preset--color--primaire); }
.wpcf7 .wpcf7-acceptance a:hover { color: var(--wp--preset--color--contraste); }
.wpcf7 .wpcf7-submit { border: none; background-color: var(--wp--preset--color--primaire); text-transform: uppercase; color:  white; transition: all 0.2s ease; font-weight: 700; display: block; width: fit-content; margin-left: auto; padding: 10px 15px; }
.wpcf7 .wpcf7-submit:hover { background-color: var(--wp--preset--color--contraste); color: var(--wp--preset--color--claire); }


/* Blog */
.blog { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 80px 0; gap: 40px 5%; }
.blog .post { width: 30%; }
.blog .post .miniature a { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 9; background-color: var(--wp--preset--color--primaire); }
.blog .post .miniature a:hover { background-color: var(--wp--preset--color--contraste); }
.blog .post .miniature a img { width: 100%; height: 100%; object-fit: cover; transition: all 0.2s ease; }
.blog .post .miniature a:hover img { transform: scale(1.1); }
.blog .post h3 { font-weight: 700; text-transform: uppercase; text-align: left; }
.blog .post p { text-align: left; }

.nav-links { display: flex; justify-content: center; gap: 20px; font-weight: bold; margin-bottom: 40px; }
span.current { color: var(--wp--preset--color--primaire); }

.infos-article { text-align: right; }


/* Boutique */
.boutique { display: flex; flex-wrap: wrap; gap: 0 20px; }
.boutique .wp-block-cover { width: 100%; }
.boutique .wp-block-woocommerce-product-filters { width: 25%; }
.boutique > .blog { width: 72%; margin-top: 0; }
.boutique .blog { height: fit-content; }

.wc-block-product-filter-chips__item, .wc-block-product-filter-price-slider .text input[type="text"], .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item { border-radius: 20px; border: 1px solid var(--wp--preset--color--primaire); }
.wc-block-product-categories-list { list-style-type: none; padding: 0; display: flex; justify-content: center; gap: 10px 20px; font-weight: bold; }

.boutique .prix, .article .price { font-weight: bold; color: var(--wp--preset--color--primaire); text-align: left; }
.boutique .prix a:hover { color: var(--wp--preset--color--contraste); }
.boutique .prix ins { text-decoration: none; }
.boutique .blog .post { position: relative; padding-bottom: 50px; }
.boutique .blog .post .wp-block-button { position: absolute; bottom: 0; width: 100%; }

.boutique .article { margin: 40px 0; }
.article .produit-pres { display: flex; gap: 20px; position: relative; }
.article .produit-pres > span { position: absolute; background-color: var(--wp--preset--color--primaire); padding: 10px; border-radius: 20px; color: var(--wp--preset--color--claire); font-weight: 900; text-transform: uppercase; z-index: 5; left: 0; top: 0; }
.article .woocommerce-product-gallery { overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; width: 50%; }
.article .woocommerce-product-gallery__wrapper, .article .woocommerce-product-gallery__image, .article .wp-post-image { height: 100%; width: 100%; object-fit: cover; }
.article .wp-post-image { transition: all 0.2s ease; }
.article .wp-post-image:hover { transform: scale(1.1); }
.article .product_title, .boutique .article h2 { margin-top: 0; font-weight: 900; text-transform: uppercase; }
.star-rating { text-align: left; transition: all 0.2s ease; }
a:hover .star-rating { opacity: 0.5; }
.article .cart { display: flex; gap: 10px; flex-wrap: wrap; }
.article .quantity input { box-sizing: border-box; height: 100%; width: 100px; display: block; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--wp--preset--color--primaire); }
.article .single_add_to_cart_button { border: none; background-color: var(--wp--preset--color--primaire); text-transform: uppercase; color:  white; transition: all 0.2s ease; font-weight: 700; display: block; width: fit-content; padding: 10px 15px; border-radius: 20px; }
.article .single_add_to_cart_button:hover { background-color: var(--wp--preset--color--contraste); color: var(--wp--preset--color--claire); }
.article .out-of-stock { font-weight: 900; text-transform: uppercase; color: var(--wp--preset--color--primaire); }
.article .product_meta { display: flex; flex-direction: column; gap: 10px 0; }
.article .product_meta a { color: var(--wp--preset--color--primaire); font-weight: bold; }
.article .product_meta a:hover { color: var(--wp--preset--color--contraste); }

.article .woocommerce-tabs .tabs { list-style-type: none; padding: 0 0 10px; border-bottom: 2px solid var(--wp--preset--color--primaire); display: flex; gap: 10px 40px; }
.article .woocommerce-tabs .tabs li { text-transform: uppercase; font-weight: bold; }
.article .woocommerce-tabs .tabs .active { color: var(--wp--preset--color--primaire); }
.article .wc-tab { margin-bottom: 20px; }
.article .woocommerce-product-attributes { text-align: left; }

.article .related .blog { margin: 0; }

.wp-block-woocommerce-product-template { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.wc-block-product { width: 31%; margin: 0; }
.wc-block-components-product-sale-badge { right: 10px !important; top: 10px !important; }
.wc-block-grid__product-image a { overflow: hidden; }
.wc-block-grid__product-image a img { transition: all 0.2s ease; }
.wc-block-grid__product-image a:hover img { transform: scale(1.1); }
.wc-block-product h3::after { margin: 10px 0; }
.wc-block-components-product-button__button { border: none !important; padding: 0; }
.wp-block-query-pagination { gap: 0; }
.wp-block-query-pagination-numbers { display: flex; gap: 10px; }

/* Boutique Autres pages */
.wp-block-woocommerce-cart, .woocommerce { margin-top: 80px; }
.wp-block-woocommerce-mini-cart-contents { padding: 20px; }
h2.wc-block-mini-cart__title { margin-top: 50px !important; }
h2.wc-block-mini-cart__title::after { content: none; }
.woocommerce-MyAccount-navigation ul { display: flex; gap: 10px 20px; justify-content: space-between; list-style-type: none; padding: .0; padding-bottom: 10px; border-bottom: 2px solid var(--wp--preset--color--primaire); font-weight: bold; text-transform: uppercase; }
.woocommerce-MyAccount-navigation .is-active { color: var(--wp--preset--color--primaire); }
.woocommerce-MyAccount-navigation-link--customer-logout { color: var(--wp--preset--color--accent-1); }
.woocommerce mark { font-weight: bold; background: none; }
.woocommerce .button, .wc-block-mini-cart__footer-actions .wc-block-components-button, .wc-block-product-filters__open-overlay { border-radius: 20px !important; background-color: var(--wp--preset--color--primaire) !important; color: var(--wp--preset--color--claire) !important; transition: all 0.2s ease; }
.woocommerce .button:hover, .wc-block-mini-cart__footer-actions .wc-block-components-button:hover, .wc-block-product-filters__open-overlay:hover { background-color: var(--wp--preset--color--contraste) !important; color: var(--wp--preset--color--claire) !important; }


/* Commentaires */
#commentaires h3 { font-weight: bold; text-transform: uppercase; }
.comment-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.comment-form .logged-in-as { margin-bottom: 20px; }
.comment-form .logged-in-as input { display: inline-block; }
.comment-form input { border-radius: 20px; padding: 10px; border: 1px solid var(--wp--preset--color--primaire); margin-bottom: 20px; width: 46%; display: block; }
.comment-form textarea, #reviews .comment-form #comment { min-height: 100px; height: 100px; }

.comment-list { list-style-type: none; padding: 0; }
.comment-list ol.children { list-style-type: none; }
.comment-body, #reviews .review { background: var(--wp--preset--color--claire); border-radius: 20px; padding: 20px; margin-bottom: 20px; position: relative; }
.comment-author { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.comment-author a { font-style: initial; font-weight: bold; }
.comment-author .says { display: none; }
.comment-meta { color: var(--wp--preset--color--primaire); }
.comment-reply-link, .comment-form .submit { border: none; background-color: var(--wp--preset--color--primaire); color:  white; transition: all 0.2s ease; font-weight: 700; display: block; width: fit-content; padding: 5px 10px; border-radius: 20px; font-size: 14px; margin: 0; }
.comment-reply-link:hover, .comment-form .submit:hover { background-color: var(--wp--preset--color--contraste); color: var(--wp--preset--color--claire); }
.comment-edit-link { position: absolute; display: block; top: 20px; right: 20px; color: var(--wp--preset--color--primaire); font-weight: bold; }
.comment-edit-link:hover { color: var(--wp--preset--color--contraste); }
.comment-form .deconnexion { color: var(--wp--preset--color--primaire); font-weight: bold; }

#respond { position: relative; }
#respond #reply-title small { position: absolute; top: 0; right: 0; }
#respond #reply-title small a { color: var(--wp--preset--color--primaire); }
#respond #reply-title small a:hover { color: var(--wp--preset--color--contraste); }

/* Avis */
#reviews { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
#reviews h3 { font-weight: bold; text-transform: uppercase; }
#reviews .comment-form .comment-form-rating, #reviews .comment-form .comment-form-comment { width: 100%; }
#reviews .comment_container { display: flex; gap: 20px; }
#reviews .star-rating { color: var(--wp--preset--color--primaire); }

/* Etoiles */
.star-group { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-group input { display: none; }
.star-group label { cursor: pointer; }
.star-group label path { fill: var(--wp--preset--color--accent-4); transition: all 0.2s ease; }
.star-group label:hover path, .star-group input:checked + label path, .star-group input:checked ~ label path, .star-group label:hover ~ label path { fill: var(--wp--preset--color--primaire); }


/* Footer */
footer { background-color: var(--wp--preset--color--contraste); }
.contenu-footer { max-width: 1240px; margin: 0px auto; padding: 20px 20px; }
.contenu-footer a:hover { color: var(--wp--preset--color--primaire); }
.contenu-footer .wp-social-link { background-color: var(--wp--preset--color--primaire) !important; }
.contenu-footer .wp-block-image a:hover img { transform: none; filter: brightness(50) saturate(0); }
.contenu-footer .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: white !important; color: var(--wp--preset--color--primaire) !important; }
.contenu-footer .wp-block-columns { max-width: 1200px; margin: auto; }
.site-info { background-color: white; padding: 10px; }
.site-info a:hover { color: var(--wp--preset--color--primaire); }


/* Cookies */
#cmplz-document { max-width: inherit !important; }


/* RESPONSIVE */
@media screen and (max-width: 782px) {
    h1 { font-size: 30px !important; }
    h2 { font-size: 20px !important; }

    .wp-block-group > figure, .wp-block-group > .wp-block-group { flex-basis: 100%; }
    
    .wp-block-group-is-layout-flex > .wp-block-group-is-layout-flow > figure img { position: relative; }

    .wpcf7 .flex { flex-wrap: wrap; }
    .wpcf7 .flex p { width: 100%; }
    .comment-form input { width: 100%; }

    .blog .post { width: 100%; }

    .article .produit-pres, .article .woocommerce-tabs .tabs, .woocommerce-MyAccount-navigation ul { flex-wrap: wrap; }
    .boutique > .blog, .boutique .wp-block-woocommerce-product-filters, .article .woocommerce-product-gallery { width: 100%; }
    .wc-block-cart-items__row { display: flex !important; flex-wrap: wrap; width: calc(100vw - 40px); }

    footer .has-text-align-right { text-align: center; }
    footer h2::after, footer h3::after { margin-left: auto; margin-right: auto; }
    footer h2, footer h3 { text-align: center; }
    footer p { text-align: center; }
    footer .wp-block-social-links { justify-content: center; }
    footer .wp-block-buttons { justify-content: center !important; }
    .contenu-footer .wp-block-columns { padding-left: 0; padding-right: 0; }
}