/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Author: Patrick Lainesse
Description: Thème développé pour CDC de la Pointe-de-l'île
Version: 1.0
*/

@media screen and (max-width: 781px) {
    .cache-mobile {
        display: none !important;
    }
}

/*** Navigation ***/
header nav ul.wp-block-navigation li {
    border-bottom: 4px solid transparent;
}

header nav ul.wp-block-navigation:not(.wp-block-navigation__submenu-container)>li {
    padding-bottom: 6px;
}

header nav ul.wp-block-navigation:not(.wp-block-navigation__submenu-container)>li:hover,
header nav ul.wp-block-navigation:not(.wp-block-navigation__submenu-container)>li.current-menu-item {
    border-bottom: 4px solid var(--wp--preset--color--accent-2);

    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    font-weight: bold;
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
    text-decoration: none;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    margin-left: .75em;
}

/* Sous-menu */
.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
    border-radius: 20px;
}

header nav ul.wp-block-navigation__submenu-container {
    padding: 15px;
}

header nav ul.wp-block-navigation__submenu-container>li:hover {
    background-color: var(--wp--preset--color--accent-3);
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

header nav ul.wp-block-navigation__submenu-container>li {
    font-weight: normal;
    border-radius: 10px;
}

header nav ul.wp-block-navigation__submenu-container>li a span::after {
    content: "❯";
    margin-left: 10px;
    font-size: .8em;
}

/*** Pied-de-page ***/
footer .wp-block-navigation {
    gap: 0;
}

@media screen and (max-width: 781px) {
    footer .wp-block-column {
        border: none;
    }

    footer *,
    footer nav,
    footer .wp-block-social-links {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    footer nav {
        align-items: center !important;
    }

    footer .wp-block-group {
        justify-content: center;
    }
}


/* Formulaire Mailchimp */
.embed-submit-field {
    position: relative;
}

.embed-submit-field input:not(.enveloppe) {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid;
    font-size: 16px;
}

.embed-submit-field .enveloppe {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;

    -webkit-appearance: none;
    -moz-appearance: none;

    border-left: 2px solid;
    background: var(--wp--preset--color--accent-3);
    border-radius: 0 12px 12px 0;
    padding: 10px;
    height: 100%;
    transition: all .2s;
    background-image: url('assets/svg/PaperPlane.svg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.embed-submit-field .enveloppe:hover {
    background-color: var(--wp--preset--color--accent-2);
    cursor: pointer;
}


/*** Éléments ***/
/* Liens */
.wp-child-theme-twentytwentyfive-child a {
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em;
}

@media screen and (min-width: 782px) {
    .desactive {
        pointer-events: none;
        cursor: default;
    }
}

/* Bouton flèche */
.hover-pale svg:hover {
    fill: var(--wp--preset--color--accent-2);
}

.wp-block-button.is-style-outline a:hover {
    background-color: var(--wp--preset--color--accent-2) !important;
}

.ombre {
    position: relative;
}

.no-decoration,
.lien-retour a {
    text-decoration: none;
}

.lien-retour a:hover {
    text-decoration: underline;
}

/* Source Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow */
.ombre::before {
    content: "";
    position: absolute;
    inset: 10px;
    /* control the spread */
    transform: translate(0, 0);
    /* control the offsets */
    z-index: -1;
    background: linear-gradient(90deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--accent-2) 16%);
    filter: blur(9.3px);
    /* control the blur */
}

.ligne-verticale::after {
    content: ' ';
    position: relative;
    height: 40px;
    width: 0;
    border-left: 3px solid;
    display: block;
    left: 50%;
    bottom: -20px;
}

/*
.phylactere::before {
    left: -30px;
    bottom: 50%;
    border: 15px solid;
    border-color: #333 red blue orange;

    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
}
    */

body:not(.block-editor-page) .phylactere::after {
    left: -85px;
    top: 95px;
    border: 45px solid;
    border-color: transparent white transparent transparent;

    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
}


body:not(.block-editor-page) .phylactere {
    position: relative;
}

@media screen and (max-width: 781px) {
    .phylactere {
        display: none;
    }
}


/* ??? effet générique de film
.sealoff {
    postion: relative;
    width: 100%;

    height: 80vh;
    overflow:hidden;
}

.wrapper {
    position: relative;
    top: 100%;
    left: 0%;
    width: 100%;

    animation: 60s credits linear infinite;
    animation-direction: unset;
}

@keyframes credits {
    0% {
        top: 100%;
    }

    100% {
        top: -500%;
    }
}
***/

/*** Fioritures ***/
/* Classe à ajouter au groupe ou bloc qui héberge un svg à insérer entre le contenu et l'arrière plan */
body:not(.block-editor-page) .z-index-fix {
    z-index: -10;
}

body:not(.block-editor-page) .z-index-fix * {
    z-index: 0;
}

/* La classe classe-svg est liée à l'extension SVG Support, dans la section Réglages */
.classe-svg {
    display: block;
    margin-block-start: 0;
    margin: 0;
}

body:not(.block-editor-page) .classe-svg svg {
    display: block;
}

@media screen and (max-width: 1920px) {
    .classe-svg svg {
        max-width: 100%;
    }
}

.arriere-plein {
    background-size: 100vw auto !important;
    background-position: 0;
}

.classe-svg.arrondi {
    z-index: -10;
    position: relative;
}

.equerres {
    position: relative;
    padding: 40px;
}

.equerres .classe-svg {
    position: absolute;
}

.equerre1 {
    top: 0;
    right: 0;
    rotate: 180deg;
}

.equerre2 {
    bottom: 0;
    left: 0;
}

body:not(.block-editor-page) .fioriture {
    height: 0;
}

.post-type-archive-tribe_events .tribe-common.tribe-events.tribe-events-view {
    background: url(../../uploads/2026/07/demi-lune.svg);
    background-repeat: no-repeat;
    background-position: bottom;
}

/* Pour éviter le translate à l'avenir, exporter des SVG sans fraction de pixels dans le path */
.haut-section svg {
    max-width: 100vw;
    width: 100vw;
    height: auto;
    z-index: -5;
    translate: 0 1px;
}

.bas-section svg {
    position: absolute;
    bottom: 0;
    max-width: 100vw;
    width: 100vw;
    height: auto;
    z-index: -5;
}

.classe-svg.bas-section {
    position: relative;
    z-index: -5;
}

.haut-gauche svg {
    position: absolute;
    left: -50px;
    top: -50px;
}

body:not(.block-editor-page) .haut-gauche-2 svg {
    position: absolute;
    translate: 65px 20px;
}

body:not(.block-editor-page) .rotate120 {
    rotate: 120deg;
}

.rotate180 {
    rotate: 180deg;
}

@media screen and (max-width: 1080px) {
    .haut-gauche-2 {
        display: none;
    }
}


@media screen and (min-width: 1800px) {
    .translate-120-30 {
        translate: 120px 30px;
    }
}

@media screen and (max-width: 1500px) {
    .translate-120-30 {
        display: none;
    }
}

.jaune-100 svg path {
    fill: var(--wp--preset--color--jaune-100);
}

.rouge-100 svg path {
    fill: var(--wp--preset--color--rouge-100);
}

.mauve-100 svg path {
    fill: var(--wp--preset--color--mauve-100);
}

.accent-5 svg path {
    fill: var(--wp--preset--color--accent-5);
}

/* ??? backup
.haut-droite svg {
    position: absolute;
    right: -90px;
    top: -90px;
}
*/

@media screen and (max-width: 781px) {
    .derriere-mobile svg {
        z-index: -1;
    }
}

.ancre-fioriture {
    position: relative;
}

.haut-droite svg {
    position: absolute;
    right: -90px;
    top: -90px;
}

.bas-droit svg {
    position: absolute;
    right: -50px;
    bottom: 0;
}

.inner-droit svg {
    right: 50px;
}

.inner-droite svg {
    right: 50px;
}

.derriere {
    z-index: 0;
}

.derriere svg {
    z-index: -1;
}

@media screen and (min-width: 782px) {
    .vague-grise {
        background: url(https://staging.patricklainesse.ca/wp-content/uploads/2026/08/vague-grise-2.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-size: 125vw;
        background-position-y: 30%;
        background-position-x: center;
    }
}

/*** Arrière-plan / Images de fond ***/

.bg-centre-gauche {
    background-size: 75% !important;
    background-repeat: no-repeat;
    background-position: left;
}

/* ???
@media screen and (max-width: 1200px) {
    .classe-svg.arrondi {
        translate: 0px -45vh;
    }
}

@media screen and (max-width: 700px) {
    .classe-svg.arrondi {
        translate: 0px -450px;
    }
} */

/*** Corrections du thème ***/
:where(.wp-site-blocks :focus) {
    outline-style: none !important;
}

/* Coins arrondis aux vidéos Youtube ??? mettre à tous? */
.coins-arrondis iframe {
    border-radius: 30px;
}

/* Enlever la marge avant les éléments qui ont un fond */
footer,
.has-background {
    margin-block-start: 0;
}

/*** PAGES ***/
/*** Actualités / Nouvelles ***/
.single-post .wp-block-heading {
    margin-block-start: 1.2em;
}

/*** Accueil ***/
.nouvelles>li {
    background-color: var(--wp--preset--color--accent-2);
    border-radius: 30px 0 30px 30px;
}

.nouvelles>li:hover {
    background-color: var(--wp--preset--color--accent-3);
}

.nouvelles>li>a {
    padding: 24px;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    color: var(--wp--preset--color--accent-4);
}

.nouvelles img {
    border-radius: 30px 0 0 0;
}

.nouvelles .wp-block-latest-posts__featured-image {
    margin-bottom: 0;
}

.ressources a {
    text-decoration: none;
}

.ressources.wp-block-group {
    margin-block-start: 0;
}

.ressources>.wp-block-group:hover {
    background-color: var(--wp--preset--color--jaune-pale);
    border-bottom: 2px solid var(--wp--preset--color--accent-3) !important;
}

/*** Équipe ***/
@media screen and (max-width: 781px) {

    .page-id-116 .entry-content .wp-block-heading,
    .page-id-116 .entry-content .wp-block-paragraph {
        text-align: center;
    }
}

/*** Nos membres ***/
@media screen and (max-width: 781px) {
    .membres .wp-block-column {
        max-width: 295px;
        max-height: 196px;
        margin: auto;
    }
}

/*** Développement social ***/
.separateur-fonctionnement {
    border-width: 3px 3px 0 3px;
    height: 30px;
    border-color: var(--wp--preset--color--contrast);
}

.rangee-fonctionnement h3 {
    padding: 1em;
}

.rangee-fonctionnement a {
    text-decoration: none;
}

.rangee-fonctionnement .wp-block-group {
    min-height: 102px;
}

.coordonees img {
    min-width: 54px;
}

/*** Calendrier d'événements / Activités ***/
:root {
    --tec-color-text-secondary-event-date: var(--wp--preset--color--contrast) !important;
    --tec-font-family-sans-serif: var(--wp--preset--font-family--figtree) !important;
    --tec-font-size-2: 18px !important;
    --tec-font-size-4: 20px !important;
}

.tribe-events .tribe-events-c-events-bar__filter-button-text {
    text-transform: none;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week {
    border-top: 1px solid var(--tec-color-border-secondary-month-grid) !important;
}

.tribe-common-l-container {
    background-color: var(--wp--preset--color--base);
    border-radius: 15px;
    padding: 20px !important;
}

.tribe-events-calendar-month__calendar-event-datetime {
    font-weight: 600 !important;
}

.tribe-venue,
.tribe-events-single-section a {
    color: var(--wp--preset--color--accent-3);
    font-weight: 600;
}

.cat_reserve .tribe-events-calendar-month__multiday-event-bar-inner,
.cat_reserve .tribe-events-calendar-month__calendar-event-details,
.tribe-events-calendar-list .cat_reserve header {

    background-color: #d4602e;
    padding: 0.5em;
}

.cat_ouvert .tribe-events-calendar-month__multiday-event-bar-inner,
.cat_ouvert .tribe-events-calendar-month__calendar-event-details,
.tribe-events-calendar-list .cat_ouvert header {
    background-color: #88bfa8;
    padding: 0.5em;
}

.tribe-events-calendar-month .tribe-events-calendar-month__calendar-event-details {
    border-radius: 10px;
}

.tribe-events-calendar-month article {
    padding: 0 !important;
}

.tribe-filter-bar-c-pill__pill.tribe-common-b2 .tribe-filter-bar-c-pill__pill-label {
    display: none !important;
}

/* Changer les étiquettes ou libellés de la barre de filtre d'événements */
.tribe-filter-bar__filters-slide .tribe-filter-bar-c-pill__pill.tribe-common-b2:first-child:after {
    content: "Public visé" !important;
}

.tribe-filter-bar__filters-slide:first-child .tribe-filter-bar-c-pill__pill.tribe-common-b2:first-child:after {
    content: "Catégorie" !important;
}

.tribe-filter-bar-c-filter__filters-fieldset legend {
    display: none;
}

/* Vue liste */
.tribe-events-calendar-list [class*="cat_"] header {
    padding: 1em;
    border-radius: 10px;
}

/* Événement seul */
.tribe-events-single .tribe-events-event-categories-label,
.tribe-event-tags-label,
.tribe-events-single .tribe-events-event-categories,
.tribe-event-tags {
    display: none;
}

@media (min-width: 768px) {
    .tribe-events-venue-map {
        width: 600px;
    }
}

.tribe-venue-url {
    display: none;
}

.tribe-events-single .cat_reserve:before {
    content: "Événement réservé";
    font-size: 1.5em;
    background: #f4a81d;
    padding: 10px;
    border-radius: 30px;
    margin: 20px 0 40px 0;
}

.tribe-events-single .tribe-related-events,
.tribe-events-single .tribe-events-related-events-title,
.tribe-events-single .tribe-events-schedule {
    display: none !important;
}