/*
Theme Name: Monsieur Madame Child theme
Template: twentytwentyfour
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Child theme for Monsieur Madame website - 2025
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
    --wp--style--basegap: 40px;
    --wp--style--global--content-size: 1240px;
    --wp--style--global--wide-size: 1240px;

    @media screen and (max-width: 1024px) {
        --wp--style--basegap: 20px;
        --wp--style--global--content-size: 100vw;
        --wp--style--global--wide-size: 100vw;
    }

}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .main-article {
        padding-top: calc(2*var(--wp--style--basegap));
        gap: 0;
    }

    .entry-content,
    footer .wp-block-group.has-background,
    #a-propos.has-background {
        padding-left: calc(2*var(--wp--style--basegap));
        padding-right: calc(2*var(--wp--style--basegap));
    }

    .has-global-padding>.alignfull {
        margin-left: calc(var(--wp--style--basegap) * -2);
        margin-right: calc(var(--wp--style--basegap) * -2);
    }

}

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

    .entry-content.has-global-padding, footer .has-base-2-color.has-global-padding {
        padding-left: var(--wp--style--basegap) !important;
        padding-right: var(--wp--style--basegap) !important;
    }

    .article-block {
        padding-top: var(--wp--style--basegap) !important;
    }

    .main-article {
        padding-top: 66px;
        gap: 0;
    }

    .wp-block-navigation__responsive-container-close {
        top: calc(-2rem + -15px);
        background-color: #1B1818;
        color: #EBD8BB;
    }

    .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
        margin-top: 0;
    }

    .wp-container-core-columns-is-layout-d3e06b52 {
        gap: calc(2 * var(--wp--style--basegap));
    }

    #modal-1 {
        background-color: transparent;
        color: #1B1818;
        padding-left: 15px;
        padding-right: 15px;
    }

    #modal-1-content {
        background-color: #fff;
        padding: var(--wp--style--basegap);
        margin-top: calc(2rem + 18px);
    }

    #modal-1-content ul.wp-block-navigation__container {
        width: 100%;
        gap: 0;
    }

    #modal-1-content li {
        width: 100%;
        padding-top: var(--wp--style--basegap);
        padding-bottom: var(--wp--style--basegap);
    }

    #modal-1-content li:not(:last-child) {
        border-bottom: 1px solid black;
    }

    .wp-block-navigation__responsive-container-close {
        top: calc(-2rem + -14px);
        right: 5px;
        background-color: #000;
        color: #fff;
    }

    .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
        margin-top: 0;
    }

    #modal-1-content li.wp-block-navigation-submenu .wp-block-navigation-item__content {
        padding-bottom: 20px;
    }

    #modal-1-content li.wp-block-navigation-submenu ul .wp-block-navigation-item__content {
        padding-bottom: 0;
    }

    .wp-block-navigation__submenu-container {
        width: calc(100% - 32px) !important;
        margin-left: 30px;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 30px !important;
        border-top: 1px solid #000 !important;
    }

    .wp-block-navigation__submenu-container li:last-child {
        padding-bottom: 0 !important;
    }
}

.main-article {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

.main-article .wp-block-group {
    padding: 0;
}

:root :where(.is-layout-constrained)>* {
    margin-block-start: 20px;
}

:where(.wp-site-blocks :focus) {
    outline-width: 0;
    text-decoration: underline;
}

@font-face {
    font-family: 'Steelfish';
    src: url('fonts/Steelfish_Bd.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px !important;

    @media screen and (max-device-width : 1024px) {
        font-size: 15px !important;
    }
}

hr,
.wp-block-group.is-vertical.is-layout-flex.wp-container-core-group-is-layout-634a1b30.wp-block-group-is-layout-flex {
    width: 100% !important;
}

header {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#galerie,
#evenements {
    padding: calc(2 * var(--wp--style--basegap)) 0;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 54px;
    font-weight: 800;

    @media screen and (max-width: 1024px) {
        font-size: 30px;
    }
}

h2,
.brand {
    font-family: 'Steelfish', sans-serif;
}

h2 {
    font-size: 60px;

    @media screen and (max-width: 1024px) {
        font-size: 42px;
    }

}

h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

h3 {
    font-size: 20px;
}

.brand {
    font-size: 24px;
}

nav a {
    font-weight: 600;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 14px;
    padding: 20px;

    @media screen and (max-width: 1024px) {
        padding: 0;
    }
}

.page-id-XX .entry-title {
    display: none;
}

.hero-text {
    gap: var(--wp--style--basegap);

    @media screen and (max-device-width : 768px) {
        padding: 0 var(--wp--style--basegap);
    }

    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        padding: 0 calc(2*var(--wp--style--basegap));
        flex-wrap: nowrap;
    }
}

.hero-text figure {
    @media screen and (max-width: 1024px) {
        max-width: 50%;
    }
}

.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container {
    position: absolute;
    bottom: var(--wp--style--basegap);

    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        bottom: calc(2*var(--wp--style--basegap));
    }
}

main {
    margin-top: 0;
}


.wp-block-button__link,
.wpcf7-form-control.wpcf7-submit,
.events-style .events-button {
    background-color: #E80000;
    box-shadow: 4px 4px 0 #FFF;
    border-radius: 0;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 600;
    padding: 8px 50px;

    @media screen and (max-width: 1100px) {
        font-size: 1rem;
    }
}

.wp-block-button__link:hover,
.wpcf7-form-control.wpcf7-submit:hover,
.events-style .events-button:hover {
    background-color: #c50000;
}

.events-style .events-button {
    background-color: #E80000;
    color: #FFF;
    box-shadow: 4px 4px 0 #000;
    padding: 3px 10px;
}

.events-style .wp-block-button__link:hover {
    background-color: #2c2c2c;
}

.is-style-logos-only svg {
    width: 36px !important;
    height: 36px !important;
}

.field-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.field-wrapper::after {
    content: "*";
    color: red;
    position: absolute;
    top: 14px;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    font-weight: bold;
}

::placeholder {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #B8B8B8
}

.wp-block-contact-form-7-contact-form-selector {
    width: 100%;
}

.wpcf7-form p {
    margin: 0;
}

.wpcf7-form-control {
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #FFF;
    color: #FFF;
    background-color: transparent;
    padding-bottom: 10px;
}

textarea[name="your-message"] {
    height: 100px;
}

.field-wrapper {
    margin: 20px 0;
}

.wp-block-group {
    margin-top: 0 !important;
}

header .has-global-padding,
.article-block {
    @media screen and (max-device-width : 1024px) {
        padding-left: var(--wp--style--basegap) !important;
        padding-right: var(--wp--style--basegap) !important;
    }
}



footer {
    margin-block-start: 0;
}

footer .wp-block-group {
    width: 100%;
}

.footer-content {
    padding-top: 20px;
}

.group-content {
    padding-top: var(--wp--style--basegap);

    @media screen and (max-device-width : 1024px) {
        padding-top: calc(var(--wp--style--basegap) * 2);
    }
}

.events-style {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 20px;

}

.events-style li {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 33.3333%;

    @media screen and (max-width: 758px) {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.events-style h3 {
    font-size: 30px;
    font-weight: 800;
    text-decoration: none;

    @media screen and (max-width: 768px) {
        font-size: 25px;
    }
}

time {
    font-size: 20px;
    font-weight: 800;
    background-color: #000;
    color: #FFF;
    padding: 5px 10px;
    width: auto;
    margin-right: auto;

    @media screen and (max-width: 768px) {
        font-size: 16px;
    }
}

figure img {
    border-radius: 0 !important;
}

.events-style .block-group {
    display: grid;
    grid-template-rows: 1fr;
    border: 1px solid #000;
    padding: 20px;
}

.events-style figure,
.events-style figure img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.articles-main {
    display: flex;
    align-items: center;
}


h1.article-title {
    font-family: 'Steelfish', sans-serif;
    font-size: 60px !important;
}