/*
Theme Name: Twenty Twenty-Four (enfant)
Description: Thème enfant pour Twenty Twenty-Four
Author: Jonathan BESSON
Author URI: https://www.jonathan-besson.fr/
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfourchild
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* DEBUT DU CODE CSS : */

/* faites appel à un fichier externe pour organiser votre code CSS : */
@import url(./_partials/_variables.css);

/* 
OU (les deux sont compatible et s'utilise en fonction de vos choix d'organisation) 
écrivez directement votre code CSS ci-dessous : 
*/
:root :where(body) {
    /* test par l'application, modification de la variable de couleur du fond de page du thème parent */
    --wp--preset--color--base: white;
}

/*Suppression du gap entre le header et la bannière*/
:where(.wp-site-blocks) > * {
    /* test par l'application, modification de la variable de couleur du texte du thème parent */
    margin-block-start: 0rem;
}

/* -------------------------- PERSONNALISATION GENERALE -------------------------- */

/*FOOTER*/
/*Icônes réseaux sociaux*/
.wp-block-social-link {
    border-radius: 10px 10px;
}

.wp-block-social-links .wp-social-link svg {
    width: 1.5rem;
    height: 1.5rem;
}

.wp-block-social-links.has-normal-icon-size.has-icon-color.has-icon-background-color.is-style-default.is-content-justification-left.is-layout-flex.wp-container-core-social-links-is-layout-83c34f0d.wp-block-social-links-is-layout-flex {
    padding-top: 1.813rem;
}

/*BOUTONS ET LIENS*/
/* Changement du hover des boutons*/
.wp-element-button:hover,
.wp-block-button__link:hover {
    --wp--preset--color--contrast-2: black;
}

.wp-element-button:active,
.wp-block-button__link:active {
    --wp--preset--color--contrast: #a9a9a9;
    color: black;
}

.wp-block-read-more:hover {
    color: black !important;
}

/* Animation des boutons section 3*/
.has-custom-gris-color:hover {
    color: black !important;
    font-weight: 700;
}

.has-custom-gris-color:active {
    color: grey !important;
    font-weight: 700;
    text-decoration: underline;
}

/*Boutons de formulaire de contact*/
div.wpforms-container-full button[type="submit"]:hover {
    background-color: black !important;
    font-weight: 700;
}

div.wpforms-container-full button[type="submit"]:active {
    background-color: #a9a9a9 !important;
    font-weight: 700;
    border: none !important;
}

/*Modifications des coins des colonnes &*/
.wp-block-column,
.wp-block-cover.aligncenter:not(.wp-block-cover.is-light),
.wp-block-cover:not(.wp-block-cover.is-light) {
    border-radius: 20px;
}

/*Bordure FAQ*/
.wp-block-details.is-style-default.has-border-color.has-custom-noir-border-color.is-layout-flow.wp-block-details-is-layout-flow,
.wp-block-details.has-border-color.has-custom-noir-border-color.has-jost-font-family.is-layout-flow.wp-block-details-is-layout-flow,
.wp-block-details.has-border-color.has-custom-noir-border-color.is-layout-flow.wp-block-details-is-layout-flow,
.wp-container-core-columns-is-layout-1ca43582 {
    border-radius: 15px;
}

/*Puce formulaire de contact & FAQ - flèche*/
details > summary {
    list-style: none;
}

details > summary::after {
    content: url("./dist/arrow_right.webp");
    width: 1.2em;
    color: black;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 9%;
}

details[open] > summary::after {
    content: url("./dist/arrow_down.webp");
}

/*FAQ - Articles de blog*/
.postid-617 details > summary::after,
.postid-1379 details > summary::after,
.postid-1399 details > summary::after,
.postid-1422 details > summary::after,
.postid-1442 details > summary::after,
.postid-1459 details > summary::after,
.postid-1559 details > summary::after,
.postid-1575 details > summary::after,
.postid-1583 details > summary::after {
    right: 4%;
}

/* Page Politique des cookies */
.page-id-1979 p {
    padding: 1rem 0rem;
}

.page-id-1979 .cmplz-document {
    max-width: auto;
}

.page-id-1979 details > summary::after,
.page-id-1979 details[open] > summary::after {
    content: none;
}

.wp-block-post-excerpt__excerpt {
    padding: 0rem;
}

/*Images*/
img {
    border-radius: 20px;
}

/* Style des listes */
ul {
    list-style: none;
}

.page-id-260 ul,
.page-id-264 ul {
    list-style: disc;
}

/*Formulaire de commentaire - article de blog*/
#reply-title {
    margin-top: 0rem;
}

#respond {
    --wp--preset--spacing--20: 0rem;
}

.logged-in-as,
.comment-form-comment,
.form-submit,
.comment-notes,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent {
    padding: 0rem;
}

.wp-block-group.is-vertical.is-content-justification-stretch.is-layout-flex.wp-container-core-group-is-layout-24d6bc4a.wp-block-group-is-layout-flex {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

/*Padding paragraphes du carrousel*/
.uagb-post__inner-wrap p {
    padding: 0rem !important;
}

/*Carrousel - supression des ronds de navigation*/
.swiper-pagination-bullet {
    visibility: hidden;
}

/*Animation galerie "Notre Boutique" & "A propos"*/
.has-custom-masque-dopacit-noir-background-color {
    border-radius: 20px;
}

/* -------------------------- VERSION DESKTOP -------------------------- */

@media only screen and (min-width: 1280px) {
    /*Marges latérales du site
  main:not(.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow.has-background) {
    padding-right: 80px;
    padding-left: 80px;
  } */

    /*Animations des photos*/
    .page-id-27 .wp-block-cover:hover {
        transform: scale(1.05);
    }

    /*FORMULAIRE*/
    .wpforms-container input.wpforms-field-medium {
        max-width: 100%;
    }

    .wpforms-container .wpforms-field-label {
        font-weight: 400;
    }

    div.wpforms-container-full input[type="date"],
    div.wpforms-container-full input[type="datetime"],
    div.wpforms-container-full input[type="datetime-local"],
    div.wpforms-container-full input[type="email"],
    div.wpforms-container-full input[type="month"],
    div.wpforms-container-full input[type="number"],
    div.wpforms-container-full input[type="password"],
    div.wpforms-container-full input[type="range"],
    div.wpforms-container-full input[type="search"],
    div.wpforms-container-full input[type="tel"],
    div.wpforms-container-full input[type="text"],
    div.wpforms-container-full input[type="time"],
    div.wpforms-container-full input[type="url"],
    div.wpforms-container-full input[type="week"],
    div.wpforms-container-full select,
    div.wpforms-container-full textarea,
    .wp-core-ui div.wpforms-container-full input[type="date"],
    .wp-core-ui div.wpforms-container-full input[type="datetime"],
    .wp-core-ui div.wpforms-container-full input[type="datetime-local"],
    .wp-core-ui div.wpforms-container-full input[type="email"],
    .wp-core-ui div.wpforms-container-full input[type="month"],
    .wp-core-ui div.wpforms-container-full input[type="number"],
    .wp-core-ui div.wpforms-container-full input[type="password"],
    .wp-core-ui div.wpforms-container-full input[type="range"],
    .wp-core-ui div.wpforms-container-full input[type="search"],
    .wp-core-ui div.wpforms-container-full input[type="tel"],
    .wp-core-ui div.wpforms-container-full input[type="text"],
    .wp-core-ui div.wpforms-container-full input[type="time"],
    .wp-core-ui div.wpforms-container-full input[type="url"],
    .wp-core-ui div.wpforms-container-full input[type="week"],
    .wp-core-ui div.wpforms-container-full select,
    .wp-core-ui div.wpforms-container-full textarea {
        color: black;
        font-size: 1.125rem;
    }

    .wpforms-container .wpforms-field {
        padding: 5px 0px;
    }

    /*Formulaire de contact - Hauteur des champs*/
    .wpforms-field-medium.wpforms-field-required {
        height: 3.12rem;
        padding: 0rem 1.87rem;
    }

    /* #wpforms-form-671 {
      margin: 1.68rem !important;
    } */

    /*Animation des textes sur les bannières - Page "Notre boutique"*/
    .page-id-60 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow p,
    .page-id-60 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow p,
    .page-id-255 .page-id-255 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow p,
    .page-id-255 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow p {
        display: none;
    }

    .page-id-60 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow:hover p,
    .page-id-60 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover p,
    .page-id-255 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow:hover p,
    .page-id-255 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover p {
        display: block;
        opacity: 1;
        visibility: visible;
        transition: ease-out 0.3s;
    }

    .page-id-60 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow,
    .page-id-60 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow,
    .page-id-255 .wp-block-cover__inner-container.is-layout-flow.wp-container-core-cover-is-layout-c4bdaf6d.wp-block-cover-is-layout-flow,
    .page-id-255 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
        /*background: rgba(0, 0, 0, 50);*/
        border-radius: 20px;
    }

    .page-id-255.wp-block-cover__inner-container,
    .page-id-60.wp-block-cover__inner-container {
        background-color: black;
        border-radius: 20px;
    }

    /* Onglet sur la page d'accueil - Alignement des colonnes "Maquillage" */
    .wp-block-image.aligncenter.size-large.is-style-rounded.is-style-rounded--11 {
        padding-top: 3rem;
    }

    #maquillage p.has-text-align-center.has-jost-font-family {
        padding-bottom: 0rem !important;
    }
}

/* -------------------------- VERSION TABLETTE -------------------------- */
/*----MENU DE NAVIGATION ----*/
@media only screen and (min-width: 600px) and (max-width: 1236px) {
    /* Afficher le menu burger aussi sur tablette */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        overflow: hidden;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-group .alignwide.has-small-font-size.is-content-justification-center.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-4e5d10eb.wp-block-group-is-layout-flex {
        gap: 450px;
    }

    /* Masquer le contenu principal quand le menu est ouvert */
    .has-modal-open main {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    /* Empêche le scroll du body quand le menu est ouvert */
    body.has-navigation-open {
        overflow: hidden;
    }

    /*Centrage du menu de navigation*/
    .wp-block-navigation.items-justified-right {
        --navigation-layout-justification-setting: center;
    }

    /* Taille des liens hypertexte*/
    .wp-block-navigation-item__label {
        font-size: 2vh;
    }
    
    /*Mise en avant des pages parentes*/
    .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content {
    font-weight: 700
    }
    
    /*Espacement des liens*/
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    gap : 3rem
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    gap :1rem
  }
}

@media only screen and (max-width: 1279px) {
    .wp-block-group.has-custom-masque-dopacit-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
    .wp-block-media-text__content,
    .wp-block-group.alignfull.has-custom-beige-background-color {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    /*HEADER*/

    .wp-block-site-logo {
        padding-right: 0rem !important;
    }

    .wp-block-media-text {
        gap: 1.56rem;
    }

    /*Section - Page "Notre Boutique"*/
    .page-id-60 article {
        padding-bottom: 8%;
    }

    /*FAQ - Icône flèche*/
    details > summary::after {
        right: 6.5rem;
    }

    /*FAQ - Articles de blog*/
    .postid-617 details > summary::after,
    .postid-1379 details > summary::after,
    .postid-1399 details > summary::after,
    .postid-1422 details > summary::after,
    .postid-1442 details > summary::after,
    .postid-1459 details > summary::after,
    .postid-1559 details > summary::after,
    .postid-1575 details > summary::after,
    .postid-1583 details > summary::after {
        right: 6%;
    }

    /*FORMULAIRE*/
    .wpforms-container input[type="text"] {
        min-width: 100%;
    }

    .wpforms-container input.wpforms-field-medium {
        max-width: none;
    }

    /*Formulaire de contact - Hauteur des champs*/
    .wpforms-field-medium.wpforms-field-required {
        height: 3.12rem;
    }

    /*Carrousel*/
    .slick-arrow {
        visibility: hidden;
        display: none;
    }

    /* Onglet sur la page d'accueil - Alignement onglets au centre */
    .uagb-tabs__wrap.uagb-tabs__hstyle5-tablet ul.uagb-tabs__panel {
        justify-content: center;
    }
}

/* -------------------------- VERSION MOBILE -------------------------- */

@media only screen and (max-width: 767px) {
    .wp-block-group.has-custom-masque-dopacit-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
    .wp-block-media-text__content,
    .wp-block-group.alignfull.has-custom-beige-background-color,
    .wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-427f8962.wp-block-columns-is-layout-flex {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    /*HEADER*/
    header {
        position: relative;
        z-index: 1000;
        background-color: var(--wp--preset--color--base);
    }

    .wp-block-site-logo img {
        max-width: 100%;
        height: auto;
    }

  /*MENU DE NAVIGATION*/

    /* Taille des liens hypertexte*/
    .wp-block-navigation-item__label {
        font-size: 2vh;
    }
    
        /*Mise en avant des pages parentes*/
    .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content {
    font-weight: 700
    }
    
    /*Espacement des liens*/
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    gap : 2rem
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    gap :0.5rem
  }

    .wp-block-group.alignwide.has-base-2-background-color.has-background.has-medium-font-size.is-horizontal.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-c859ffe1.wp-block-group-is-layout-flex {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .wp-block-navigation.items-justified-right {
        --navigation-layout-justification-setting: center;
    }

    /*FOOTER*/
    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    .wp-block-social-links.has-normal-icon-size.has-icon-color.has-icon-background-color.is-style-default.is-content-justification-left.is-layout-flex.wp-container-core-social-links-is-layout-83c34f0d.wp-block-social-links-is-layout-flex {
        padding-top: 1.813rem;
        padding-bottom: 11rem;
    }

    /* Alignement des boutons */
    .wp-container-core-group-is-layout-dc446233 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    .wp-block-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Alignement des textes */
    .has-text-align-center {
        text-align: left;
    }

    /*Alignement des textes sur les bannières*/
    .wp-block-cover .wp-block-cover__inner-container,
    .wp-block-group.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-cf009ec1.wp-block-group-is-layout-constrained,
    :root :where(.wp-block-cover h3:not(.has-text-color)) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .wp-block-group.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-96fd8c6a.wp-block-group-is-layout-constrained,
    .has-text-align-center.has-custom-brun-color.has-text-color.has-link-color.has-jost-font-family.wp-elements-bb4db1d3f7f40b9395c5386ff4474544,
    .has-text-align-center.has-custom-brun-color.has-text-color.has-link-color.has-jost-font-family.wp-elements-d40f5b79896ab6d78345ad59595f4431,
    .wp-block-columns.has-contrast-color.has-text-color.has-link-color.wp-elements-7f264dfb04f4037033a74c77b3599a90.is-layout-flex.wp-container-core-columns-is-layout-2baf0d4d.wp-block-columns-is-layout-flex,
    .wp-block-group.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-6c80b997.wp-block-group-is-layout-constrained {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /*FORMULAIRE*/

    .wp-block-column.has-base-2-background-color.has-background.has-global-padding.is-layout-constrained.wp-container-core-column-is-layout-2e36e05d.wp-block-column-is-layout-constrained {
        padding-top: 2.5% !important;
        padding-right: 5% !important;
        padding-bottom: 2.5% !important;
        padding-left: 5% !important;
    }

    .wpforms-container .wpforms-submit-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /*Formulaire de contact - Hauteur des champs*/
    .wpforms-container input.wpforms-field-medium {
        height: 3.12rem;
    }

    /*FAQ*/
    .wp-block-group.has-jost-font-family.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-32dc3ae8.wp-block-group-is-layout-constrained {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .wp-block-details.is-style-default.has-border-color.has-custom-noir-border-color.is-layout-flow.wp-block-details-is-layout-flow,
    .wp-block-details.has-border-color.has-custom-noir-border-color.has-jost-font-family.is-layout-flow.wp-block-details-is-layout-flow,
    .wp-block-details.has-border-color.has-custom-noir-border-color.is-layout-flow.wp-block-details-is-layout-flow {
        padding: 2.06rem 0.62rem !important;
    }

    .wp-block-details summary {
        white-space: break-spaces;
    }

    details > summary::after {
        right: -1%;
        padding: 0px 20px;
        display: inline-flex;
        flex-wrap: wrap;
        align-content: flex-end;
        justify-content: space-evenly;
    }

    summary {
        padding-right: 20px;
    }

    /*FAQ - Articles de blog
.postid-617 details > summary::after,
.postid-1379 details > summary::after,
.postid-1399 details > summary::after,
.postid-1422 details > summary::after,
.postid-1442 details > summary::after,
.postid-1459 details > summary::after,
.postid-1559 details > summary::after,
.postid-1575 details > summary::after,
.postid-1583 details > summary::after {
  right: 9%;
}*/

    /*Formulaire de commentaire - article de blog*/
    .wp-block-cover__inner-container.has-global-padding.is-layout-constrained.wp-block-cover-is-layout-constrained {
        text-align: left;
    }
    .wp-block-group.is-vertical.is-layout-flex.wp-container-core-group-is-layout-9f9edd92.wp-block-group-is-layout-flex {
        margin: 0rem !important;
        text-align: left !important;
    }

    /*Carrousel*/
    .slick-arrow {
        visibility: hidden;
        display: none;
    }

    /*Section - Page "Notre Boutique"*/
    .page-id-60 article {
        padding-bottom: 15%;
    }
}