@import url('hamburger.css');

@font-face {
    font-family: Open-sans;
    src: url(../fonts/Open-Sans.woff2);
}

@font-face {
    font-family: Rammetto-One;
    src: url(../fonts/RammettoOne-Regular.ttf);
}

html * {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: Open-sans;
}

html,
body {
    height: 100%;
    background-color: white;
    /* Prevent horizontal scrolling caused by elements using 100vw or positioned off-screen */
    /* overflow-x: hidden; */
}

body {
    min-height: 100vh;
}

:root {
    --color1: #1a3150;
    --color2: #385c8a;
    --color3: #b8d0dd;
    --color4: #d55c00;
}

/* Global styles */
main {
    /* Was `height: 100%`, which pinned main to exactly one viewport tall. The
       footer is laid out after main's BOX, not after its content — so on every
       page whose content ran past one screen, the overflow painted straight
       over the footer.

       min-height keeps the full-screen look on short pages while letting main
       grow when there is more to show. --header-height comes from script.js;
       the fallback covers the moment before it runs.

       No `height` here: body no longer establishes a flex/indefinite context
       (it's a plain block now), so `html, body { height: 100% }` gives body a
       definite 100vh — and a `height: 100%` on main would resolve against
       that and pin main to one viewport again, same as the original bug. */
    display: block;
    /* overflow: auto; */
    /* height: fit-content; */
    /* Apparenly this fixes the footer being cut by the images. 
    I don't see a differnence when it's not there but we will keep it for good measure */
    min-height: calc(100vh - var(--header-height, 208px));
    min-height: calc(100svh - var(--header-height, 208px));
    transition: opacity 0.5s, filter 0.5s;
}

body.no-scroll {
    overflow: hidden;
}

*:focus {
    outline: none;
}

p {
    color: #1a3150;
}

h1 {
    font-family: Rammetto-One;
    color: #1a3150;
}

h2 {
    color: #1a3150;

}

h3 {
    color: #1a3150;
}

h4 {
    color: #1a3150;
}

ul {
    color: #1a3150;
}

li {
    list-style: none;
}

a {
    color: var(--color1);
}

.main-title {
    font-size: 5rem;
    width: auto;
}

.titre {
    text-align: center;
    margin: 0 24px;
}

.titre h1 {
    margin-bottom: 16px;
}

.titre h2 {
    margin-bottom: 32px;
}

/* "Nos cours et stages" was demoted from h1 to h2 for SEO (one h1 per page),
   but should keep looking like the other section titles, not the subtitle
   that follows it. */
.titre-inscriptions h2:first-of-type {
    font-family: Rammetto-One;
    font-size: 2em;
    margin-bottom: 16px;
}

.pos-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* `left`/`top` position the margin edge, but the translate(-50%, -50%)
       that recenters it only shifts by the element's own border-box size —
       it doesn't know about any margin. Any class this combines with that
       sets a non-zero margin (e.g. .text-bubble-img-presentation's 28px,
       .button1's 12px) throws centering off by exactly that margin, most
       visible on narrow/mobile widths. Zeroing it out here removes that
       offset — !important because .pos-abs is a utility meant to override
       whatever margin the paired class sets, at equal specificity, from
       wherever in the cascade that class happens to be declared. */
    margin: 0 !important;
}

/* New Page Load Transition */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* background-color: rgba(255, 255, 255, 0.463); */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Start fully visible */
    opacity: 1;
    /* Block clicks while visible */
    pointer-events: auto;
    /* Animate the fade-out */
    transition: opacity 0.5s ease-out;
}

body.loaded::before {
    /* backdrop-filter: blur(0px);
    background-color: transparent; */
    opacity: 0;
    /* Allow clicks to pass through once it's invisible */
    pointer-events: none;
}

/* Button styles */
.button1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    transition: all 0.3s;
    width: 350px;
    font-size: 24px;
    font-weight: 600;

    padding: 12px;
    margin: 12px;
    border-radius: 12px;
}

.button1:hover {
    transform: scale(1.15);
    cursor: pointer;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    p {
        animation: textBlurBtn .6s cubic-bezier(.12, 0, .18, 1);
        animation-timing-function: ease;
    }
}

/* Edge case where we need to redfine the transform properties.
   Add the pos-abs class when using transform: translate */
.button1.pos-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button1.pos-abs:hover {
    transform: translate(-50%, -50%) scale(1.15);
    cursor: pointer;
}

.button1:not(:hover) {
    p {
        animation: textBlurBtnUnhover .6s cubic-bezier(.12, 0, .18, 1);
    }
}

.button1 button p {
    color: white;
}

.button1.small {
    width: auto;
    min-width: 0;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 8px;
}
.button1.medium{
    width: auto;
    min-width: 0;
    padding: 10px 20px;
    font-size: 1.2rem;
    text-decoration: none;
    margin-top: 8px;
}

.button2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    transition: all 0s;
    width: 320px;
    font-size: 24px;
    font-weight: 600;

    padding: 12px;
    margin: 12px;
    border-radius: 12px;



}

.button2 p {
    color: white;
}

.button2:hover {
    transform: scale(1.15);
    cursor: pointer;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    p {
        animation: textBlurBtn .6s cubic-bezier(.12, 0, .18, 1);
        animation-timing-function: ease;
    }
}

.button2:not(:hover) {
    p {
        animation: textBlurBtnUnhover .6s cubic-bezier(.12, 0, .18, 1);
    }
}

.button1.btn-bg-blue,
.button2.btn-bg-blue {
    background: var(--color1);

    p {
        color: white;
    }
}
.button1.btn-bg-orange,
.button2.btn-bg-orange{
    background: var(--color4);

    p {
        color: white;
    }
}


/* .button1.btn-bg-blue:hover, .button2.btn-bg-blue:hover { */

.textBlurButton {
    animation: textBlurBtn .6s cubic-bezier(.12, 0, .18, 1);
    animation-timing-function: ease;
}

.textBlurButtonUnhover {
    animation: textBlurBtnUnhover .6s cubic-bezier(.12, 0, .18, 1);
}

@keyframes textBlurBtn {
    25% {
        letter-spacing: 1px;

    }

    50% {
        /* filter: blur(8px); */

    }

    75% {
        /* filter: blur(0px); */
    }

    100% {
        letter-spacing: 0px;
        filter: blur(0px);
    }
}

@keyframes textBlurBtnUnhover {

    /* from{
        filter: blur(8px);
        letter-spacing: 1px;
    }
    to{
        letter-spacing: 0px;
        filter: blur(0px);
    } */
    25% {
        letter-spacing: -1px;

    }

    50% {
        /* filter: blur(8px); */

    }

    75% {
        /* filter: blur(0px); */
    }

    100% {
        letter-spacing: 0px;
        filter: blur(0px);
    }
}

/* Button hover light effect */
/* Add relative positioning and overflow hidden to button containers */
.button1,
.button2 {
    position: relative;
    overflow: hidden;
    /* Ensure other transitions still work as intended */
    transition: all 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
        /* cubic-bezier(.33, .22, .5, 1.35)*/
        , box-shadow 0.3s, backdrop-filter 0.3s;

}

/* Light effect pseudo-element */
.button1::before,
.button2::before {
    content: '';
    position: absolute;
    /* Position will be set by JS via CSS custom properties */
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.11) 20%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    transition: width 0.1s ease-out, height 0.1s ease-out, transform 0.1s ease-out, opacity 0.1s ease-out, top 50ms ease-out, left 50ms ease-out;
    opacity: 0;
    /* So it doesn't interfere with button events */
    pointer-events: none;
    /* Ensure it's behind the button text */
    z-index: 0;
}

/* Show and expand the light effect on hover */
.button1:hover::before,
.button2:hover::before {
    width: 350px;
    /* Adjust size of the light effect as needed */
    height: 350px;
    /* Adjust size of the light effect as needed */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Ensure button text stays above the light effect */
.button1 p,
.button2 p {
    position: relative;
    z-index: 1;
}


/* Header styles */
header {
    position: relative;
    z-index: 10000;
}

.top_header {
    height: 57.14px;
    background-color: #1a3150;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    color: #b8d0dd;
}

.top_header ul {
    display: flex;
    flex-direction: row;
}

.top_header li {
    list-style: none;
}

.top_header a {
    color: #b8d0dd;
    text-decoration: none;
    margin-right: 3vw;

}

.top_header input {
    background-color: #385c8a;
    border: #1a3150;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 2px #385c8a;
    padding: 5px;
    margin-right: 10vw;
    transition: all 0.3s;
    color: white;
    font-size: 1rem;
}

.top_header input:focus {
    transform: scale(1.1);
    box-shadow: 0px 0px 20px 2px #16283f;
}

.top_header input::placeholder {
    color: #a0b6c1b9;
    font-size: 1rem;
}

.top_header input:focus::placeholder {
    transition: all 0.3s;
    color: #ffffff;
}


.bottom_header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 3rem 0px;
}

.bottom_header ul {
    display: flex;
    flex-direction: row;
}

.bottom_header li {
    list-style: none;
    margin: 0px 2vw;
}


/* --- Text Wave Animation Styles --- */
.bottom_header nav ul li>a {
    /* Prepare the link for scaling and ensure spans are positioned correctly */
    text-align: center;
    display: inline-block;
    transition: transform 0.3s ease;
    /* min-width: 47.51px ; */
    /* Force elements to stay on the same row */
    white-space: nowrap;
}

.bottom_header nav ul li a span {
    /* Prepare each letter for animation */
    display: inline-block;
    position: relative;
}

.bottom_header nav ul li a:hover {
    /* On hover, scale the entire link up slightly */
    transform: scale(1.1);
}

.bottom_header nav ul li a[data-is-hovered="true"] span {
    /* Trigger the wave animation on the letters */
    /* Edit seconds to make the effect slower of faster */
    animation: textWave 0.25s ease-in-out forwards;
}

@keyframes textWave {
    0% {
        transform: scale(1);
        color: var(--color2);
        filter: blur(0px);
        text-shadow: none;

    }

    50% {
        transform: scale(1.5);
        /* Lighter tint at peak size */
        color: var(--color3);
        filter: blur(1px);
        text-shadow: 1px 2px 2px currentColor;
    }

    100% {
        transform: scale(1);
        color: var(--color2);
        filter: blur(0px);
        text-shadow: none;
    }
}

/* --- Header style and animations --- */

.bottom_header a {
    color: #385c8a;
    text-decoration: none;
    font-weight: 600;
}

.LeClub {
    transition: all 0.3s;
    z-index: 1;
}

.subnav-content {
    transition: all 0.3s;
    opacity: 0%;
    /* display: none; */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1a3150;
    background: rgba(255, 255, 255, 0.50);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-top: 5px;
    padding: 0 5px;
    position: absolute;
    z-index: 0;
}

.subnav-content.show {
    opacity: 100%;
    height: auto;
    z-index: 1;
    /* pointer-events: all; */
}

.subnav-content a {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    margin: 0px;
    z-index: 0;
    font-size: 2px;
    opacity: 0;
    /* Prevent interaction when element is hidden */
    pointer-events: none;

    /* filter: blur(12px); */
}

/* .subnav-content a{
    display: block;
} */
.subnav-content.show a {
    margin: 8px;
    color: #385c8a;
    z-index: 1;
    font-size: 1rem;
    pointer-events: all;


    /* filter: blur(0px); */
}


.subnav-content.show a {
    animation: LeClubLinkAnimationIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.subnav-content.show a:nth-of-type(1) {
    animation-delay: 0.1s
}

.subnav-content.show a:nth-of-type(2) {
    animation-delay: 0.2s;
}

.subnav-content.show a:nth-of-type(3) {
    animation-delay: 0.3s;
}

.subnav-content.show a:nth-of-type(4) {
    animation-delay: 0.4s;
}

.subnav-content.show a:nth-of-type(5) {
    animation-delay: 0.5s;
}

@keyframes LeClubLinkAnimationIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
        filter: blur(8px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }

}


/*
.subnav-content.show a:hover {
    animation: LeClubLinkHoverAnimationIn 0.3s ease forwards;
    opacity: 1;
}

.subnav-content.show a:not(:hover) {
    opacity: 1;
    animation: LeClubLinkHoverAnimationOut 0.3s ease forwards;
} */

/* Handle the move up link on hover with keyframes de to the fact that keyframes
 are already used for this element and normal animations don't work as intended*/
/*
@keyframes LeClubLinkHoverAnimationIn {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-5px);

    }
}

@keyframes LeClubLinkHoverAnimationOut {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(0px);
    }

} */

.events {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    color: #1a3150;
    margin-bottom: 100px;

}

.events div h1 {
    font-size: 3rem;
    font-family: Rammetto-One;

}

.events>div {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 35vw;
    min-width: 444px;
    margin: 0px 2vw;
    max-width: 650px;
}

.events .textEvent {
    min-height: 500px;
}

.events .textEvent>* {
    margin: 15px 0px;
}

.events p {
    font-size: 20px;
    font-weight: 700;
}

.events img {
    width: 35vw;
    min-width: 444px;
    max-width: 650px;
    margin-bottom: 50px;
}


/* General page styling */
.big-back-img {
    /* Same story as main: a fixed `height` pins this to one viewport and can't
       grow, so a section with a title above a full-height panel overflows by
       exactly the title's height — and that overflow doesn't push main or the
       footer down with it. min-height fills the screen when there is room and
       expands when there is not. */
    display: flex;
    flex-direction: column;
    min-height: 100vh !important;
}

#copyableText:hover {
    cursor: pointer;
}

.back-img-presentation {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Takes whatever height is left inside .big-back-img rather than a
       percentage of it — a percentage cannot resolve against a parent that is
       sized by min-height, and would have collapsed to auto.

       Grow, but never shrink: with flex-shrink at its default of 1 this was
       squeezed to fit the parent's min-height and its content spilled out the
       bottom over the footer. 0 makes the parent grow instead. */
    flex: 1 0 auto;
    width: 100%;
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



div.showPar {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    color: #1a3150;
    filter: blur(12px);
    opacity: 0;
}

div.unBlur {
    transition: all 0.3s;
    filter: blur(0px);
    opacity: 1;
}




.img-presentation {
    margin-top: 0px;
}


/* Text bubble styles */
.text-bubble-img-presentation {

    font-weight: 600;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin: 28px;
}

.text-bubble-img-presentation2 {
    font-weight: 600;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    border-radius: 90px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin: 28px;
}

.bubble-hover {
    transition: all 0.5s cubic-bezier(.12, 0, .18, 1);
}

.bubble-hover:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

}

.round-img-in-bubble {
    border-radius: 100%;
    width: min(30vw, 40vh);
    max-width: 300px;
    min-width: 200px;
    margin: 20px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes blurUnBlur {
    from {
        opacity: 0;
        line-height: 34px;
        filter: blur(12px);
    }

    to {
        opacity: 1;
        line-height: 23px;
        filter: blur(0px);
    }

}

@keyframes unBlurBlur {
    from {
        opacity: 1;
        line-height: 23px;
        filter: blur(0px);
    }

    to {
        opacity: 0;
        line-height: 34px;
        filter: blur(12px);
    }
}

.TCD_Logo_Square {
    display: none;
}

.bar {
    display: none;
}

/* Site footer with the site map. */
.site-footer {
    background-color: var(--color1);
    color: var(--color3);
    font-size: 0.9rem;
    padding: 48px 24px 0;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 12px
}

.site-footer p {
    color: var(--color3);
    margin: 0;
}

.footer-brand {
    flex: 1 1 240px;
    max-width: 300px;
}

.footer-logo {
    width: 64px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-column h2 {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.footer-column li {
    margin-bottom: 9px;
}

.site-footer a {
    color: var(--color3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
}

.site-footer a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.footer-legal {
    /* max-width: 1100px; */
    /* width: 50%; */
    margin: 40px auto 0;
    padding: 20px 0;
    border-top: 1px solid rgba(184, 208, 221, 0.25);
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.8;
}

@media screen and (max-width: 768px) {
    .site-footer {
        padding: 32px 20px 0;
    }

    .site-footer-inner {
        gap: 28px;
    }

    .footer-nav {
        gap: 28px 40px;
    }

    /* Left-aligned in the footer: these are link lists, and the global mobile
       `p { text-align: justify }` would otherwise stretch the tagline. */
    .site-footer p {
        text-align: left;
    }
}

/* Reveal on scroll effect (in agenda) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(150px);
    filter: blur(20px);
    transition: transform 0.5s cubic-bezier(0.29, 1.29, 0.64, 1)
        /* cubic-bezier(.11,.06,.55,1)*/
        , filter 0.35s linear, opacity 0.4s linear;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media screen and (max-width: 768px) {
    * {
        /* Prevent default browser usual effect when clicking on a link */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    p {
        text-align: justify;
    }

    h2 {
        text-align: justify;
    }

    .button1 {
        width: 80vw;
        max-width: 350px;
    }

    .text-bubble-img-presentation {
        width: 80vw;
    }

    .text-bubble-img-presentation:last-of-type {
        /* width: auto; */
    }

    .big-back-img {
        min-height: auto;
    }

    .back-img-presentation {
        min-height: 100vh;
    }

    .bubble-hover:hover {
        transform: none;
    }

    .top_header {
        justify-content: space-between;
        padding: 0px 20px;
        z-index: 2;
        position: relative;
    }

    .TCD_Logo_Square {
        display: block;
        width: 50px;
        border-radius: 5px;
    }

    .TCD_Logo {
        display: none;
    }

    .bar {
        display: block;
        position: relative;
        z-index: 3;
        width: 50px;
        cursor: pointer;
    }

    .bottom_header {
        align-items: center;

    }

    .bottom_header nav {
        /* display: none; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* transform: translate(-50%, -50%); */
        /* top: 50%;
        left: 50%; */
        top: 0;
        left: 0;
        height: 0;
        width: 100vw;
        background: rgba(255, 255, 255, 0.60);
        box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
        overflow: hidden;
        /* transition: none; */

        /* Initial hidden state */
        height: 0;
        opacity: 0.2;
        visibility: hidden;
        /* Hide from screen readers and interactions */


        /* Replace animations with transitions for smooth interruption */
        transition: height 0.5s ease-out, opacity 0.4s ease-in, visibility 0s linear 0.4s;

        /* Add a mask to create a fade-out effect at the bottom */
        -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    }

    .bottom_header nav.show {
        /* display: flex; */
        opacity: 1;
        /* Set target properties for the open state */
        height: 115vh;
        /* Use 115vh for a full screen menu */
        /* animation: menuBackgroundSlideDown 0.5s ease-out forwards, backgroundFadeIn 0.5s linear forwards; */
        visibility: visible;
        /* Make it visible */
        transition: height 0.4s ease-out, opacity 0.3s ease-in;
        /* Transition for opening */
    }

    /* Not using keyframes for interrupt animations */
    @keyframes menuBackgroundSlideDown {

        from {
            height: 0;
        }

        to {
            height: 115vh;
        }
    }

    @keyframes backgroundFadeIn {
        from {
            opacity: 0.5;
        }

        to {
            opacity: 1;
        }

    }

    /* .bottom_header nav.closing {
        animation: menuBackgroundSlideUp 0.4s ease-in forwards;
    }

    @keyframes menuBackgroundSlideUp {

        from {
            height: 115vh;
            opacity: 1;
        }

        to {
            height: 0;
            opacity: 0.5;
        }
    } */

    .bottom_header nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        width: 100%;
        margin: auto;
        padding-top: 15vh;
    }

    .bottom_header nav ul li {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .bottom_header nav ul li a {
        /* Define the "out" state (hidden) as the default */
        opacity: 0;
        transform: translateY(-40px);
        filter: blur(8px);

        /* opacity: 1; */
        width: 75%;
        text-align: center;
        margin: auto;
        font-size: 25px;
        font-weight: 700;
        background: none;
        color: var(--color1);
        padding: 15px 0;

        /* This transition will now handle both opening and closing smoothly */
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.2s ease,
            /* also works : opacity 0.4 cubic-bezier(0.34, 1.56, 0.64, 1) */
            filter 0.3s ease;
    }

    .bottom_header nav.show ul li a {
        /* Define the target "in" state (visible) */
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
        /*      animation: linkAnimationIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
    }




    .bottom_header nav.show ul li:nth-of-type(1) a {
        /* animation-delay: 0.2s; */
        transition-delay: 0.2s
    }

    .bottom_header nav.show ul li:nth-of-type(2) a {
        /* animation-delay: 0.3s; */
        transition-delay: 0.3s
    }

    .bottom_header nav.show ul li:nth-of-type(3) a {
        /* animation-delay: 0.4s; */
        transition-delay: 0.4s
    }

    .bottom_header nav.show ul li:nth-of-type(4) a {
        /* animation-delay: 0.5s; */
        transition-delay: 0.5s
    }

    .bottom_header nav.show ul li:nth-of-type(5) a {
        /* animation-delay: 0.6s; */
        transition-delay: 0.6s
    }

    .bottom_header nav.closing ul li a {
        /* animation: linkAnimationOut 0.4s ease forwards; */

    }

    @keyframes linkAnimationIn {
        from {
            transform: translateY(-40px);
            opacity: 0;
            filter: blur(8px);
        }

        to {
            transform: translateY(0);
            opacity: 1;
            filter: blur(0px);
        }
    }

    @keyframes linkAnimationOut {
        from {
            transform: translateY(0);
            opacity: 1;
            filter: blur(0px);
        }

        to {
            transform: translateY(-40px);
            opacity: 0;
            filter: blur(8px);
        }

    }

    /* --- Subnav Mobile Styles --- */
    .bottom_header nav .LeClub>a {
        display: flex;
        /* To align caret icon */
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .bottom_header nav .LeClub .fa-caret-down {
        transition: transform 0.3s ease;
    }

    .bottom_header nav .LeClub.subnav-open .fa-caret-down {
        transform: rotate(180deg);
    }

    .bottom_header .subnav-content {
        /* Override desktop styles for mobile accordion */
        position: relative;
        opacity: 1;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        border: none;
        margin-top: 0;
        padding: 0;
        /* Hide by default and prepare for transition */
        /* max-height: 0; */
        height: 0px;
        overflow: hidden;
        /* transition: max-height 0.4s cubic-bezier(.33, .22, .5, 1.35); */
        /* transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); */
        transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

        /* transition: height 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6); */
        /* transition: max-height 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); */


    }

    .bottom_header .LeClub.subnav-open .subnav-content {
        /* Check height with auto and then set exact number for best result and animation */
        height: 236.67px;
        /* Adjust if you have more items */
    }

    .bottom_header .subnav-content a {
        /* Override desktop styles for mobile */
        font-size: 20px;
        color: var(--color2);
        padding: 10px 0;

        pointer-events: none;
        /* Prevent interaction when hidden */

        /* This transition will now handle both opening and closing smoothly */
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.2s ease,
            /* also works : opacity 0.4 cubic-bezier(0.34, 1.56, 0.64, 1) */
            filter 0.3s ease;
        /* The delay is 0s by default, so the closing animation is immediate */
    }

    .bottom_header .LeClub.subnav-open .subnav-content a {
        /* animation: subnavLinkAnimationIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
        /* opacity: 0; */
        /* Define the out state */
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
        pointer-events: all;

        /* transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
            filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); */
    }

    .bottom_header .LeClub:not(.subnav-open) .subnav-content {
        transition: height 0.5s ease;
    }

    .bottom_header .LeClub:not(.subnav-open) .subnav-content a {
        /* animation: subnavLinkAnimationOut 0.4s ease forwards; */
        /* Define target invisible state (before showing) */
        transform: translateY(-20px);
        opacity: 0;
        filter: blur(8px);
        padding: 0px;
        transition-delay: 0s;

    }

    .bottom_header .LeClub.subnav-open .subnav-content a:nth-of-type(1) {
        /* animation-delay: 0.1s; */
        transition-delay: 0.1s;
    }

    .bottom_header .LeClub.subnav-open .subnav-content a:nth-of-type(2) {
        /* animation-delay: 0.2s; */
        transition-delay: 0.2s;
    }

    .bottom_header .LeClub.subnav-open .subnav-content a:nth-of-type(3) {
        /* animation-delay: 0.3s; */
        transition-delay: 0.3s;
    }

    .bottom_header .LeClub.subnav-open .subnav-content a:nth-of-type(4) {
        /* animation-delay: 0.4s; */
        transition-delay: 0.4s;
    }

    .bottom_header .LeClub.subnav-open .subnav-content a:nth-of-type(5) {
        /* animation-delay: 0.5s; */
        transition-delay: 0.5s;
    }


    /* This new animation is for the sub-menu. It fades and slides links up from *within* the container, avoiding the clipping issue. */
    @keyframes subnavLinkAnimationIn {
        from {
            transform: translateY(-20px);
            opacity: 0;
            filter: blur(8px);
        }

        to {
            transform: translateY(0px);
            opacity: 1;
            filter: blur(0px);
        }
    }

    @keyframes subnavLinkAnimationOut {
        from {

            transform: translateY(0);
            opacity: 1;
            filter: blur(0px);
            /* .bottom_header .subnav-content {
                overflow: visible;
            } */
        }

        to {
            transform: translateY(-60px);
            opacity: 0;
            filter: blur(8px);
            padding: 0px;
            /* .bottom_header .subnav-content {
                overflow: hidden;
            } */
        }

    }



    .bottom_header .subnav-content a {
        /* Override desktop styles for mobile */
        font-size: 20px;
        /* Slightly smaller than main links */
        /* filter: none;
        opacity: 1; */
        /* Should be visible with parent */
        color: var(--color2);
        /* Different color to show it's a sub-item */
        padding: 10px 0;
        /* background-color: rgba(26, 49, 80, 0.1); */
        /* Slight background to group them */
    }

    .bottom_header .subnav-content.show a {
        /* This rule is for desktop, reset it for mobile */
        margin: 0;
        font-size: 20px;
        filter: none;
    }

    /* --- End Subnav Mobile Styles --- */
    .events {
        margin: auto;
        width: 80vw;
        min-width: 100px;


    }

    .events div h1 {
        font-size: 2rem;
    }

    .events>div {
        width: 100%;
        min-width: 100px;
    }

    .events img {
        width: 100%;
        max-width: 650px;
        min-width: 200px;
    }

}

/* ==========================================================================
   Card components — reusable across any page, not tied to one section.
   Originally built for the home page's "Cours" and "Au club" sections;
   generalized here (and out of home.css) so other pages can use them too.
   ========================================================================== */

/* Generic section padding wrapper — put a heading + a *-card-grid inside. */
.main-section-primary {
    position: relative;
    z-index: 1;
    padding: 40px 24px 80px;
}

/* Same, just a bit less top padding — meant to sit right under a .courses
   section (as on the home page), but works fine on its own. */
.main-section-secondary {
    position: relative;
    z-index: 1;
    padding: 60px 24px 80px;
}

@media screen and (max-width: 768px) {
    .courses {
        padding: 24px 16px 60px;
    }

    .info {
        padding: 40px 16px 60px;
    }
}

/* --- Big card: full content block — illustration, heading, list, link --- */

.big-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.big-card {
    display: flex;
    flex-direction: column;
    /* Two per row on desktop, one per row once there is no longer space. */
    flex: 1 1 420px;
    max-width: 520px;
    padding: 28px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.big-card .illustration {
    /* Artwork is expected to sit on white, like the home hero decoration. */
    mix-blend-mode: multiply;
    align-self: center;
    width: auto;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 16px;
}

.big-card .body {
    display: flex;
    flex-direction: column;
    /* Lets the link sit on the baseline of the tallest card in a row, so
       every card's link lines up even when their text differs in length. */
    flex: 1;
}

.big-card h3 {
    font-family: Rammetto-One;
    font-size: 1.5rem;
    text-align: center;
}

.big-card .subtitle {
    text-align: center;
    font-weight: 700;
    color: var(--color2);
    margin-top: 4px;
}

.big-card .list {
    margin: 20px 0 0;
}

.big-card .list li {
    position: relative;
    color: var(--color1);
    line-height: 1.6;
    padding: 6px 0 6px 22px;
}

.big-card .list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 14px;
    height: 14px;
    background: url("../img/shared/tennisballBullet.webp") center / contain no-repeat;
}

.big-card .note {
    margin-top: 16px;
    font-weight: 700;
    color: var(--color4);
    text-align: center;
}

.big-card .link {
    /* .button1 is 350px wide by default, which overflows a card on narrow
       screens. */
    width: 100%;
    max-width: 320px;
    text-decoration: none;
}

/* 
.big-card .link p {
    color: var(--color1);
    font-weight: 700;
} */

/* --- Small card: compact side-photo card that dissolves into its text --- */

.small-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.small-card {
    position: relative;
    display: flex;
    flex: 1 1 440px;
    max-width: 520px;
    min-height: 220px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* --- The dissolving photo -------------------------------------------------
   Absolutely positioned so it fills the card's full height and the text can
   start over its tail. Three stacked copies of the same image, each blurrier
   than the last and each masked to begin further right, give a blur that grows
   across the image — CSS has no gradient blur, and stacking is far cheaper
   here than the equivalent backdrop-filter layers (which Safari renders
   inconsistently when nested). The photos are 200px squares, so the extra
   copies cost almost nothing.

   The wrapper's own mask fades the whole thing out before the text gets
   dense. --image-url is set per card in the markup. */
.small-card .media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 62%;
}

.small-card .media img,
.small-card .media::before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The blurred copy is the actual <img>, faded out late (70-100%) so it
   lingers. The sharp copy is the ::before duplicate, layered on top via
   z-index and faded out early (40-90%) so it thins out first — revealing
   the blur underneath in the overlap before both reach transparent. */
.small-card .media img {
    filter: blur(12px);
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
    mask-image: linear-gradient(to right, #000 70%, transparent 100%);
}

.small-card .media::before {
    z-index: 1;
    content: '';
    background-image: var(--image-url);
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 90%);
    mask-image: linear-gradient(to right, #000 40%, transparent 90%);
}

.small-card .body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    /* Starts inside the photo's fade so the two overlap rather than sit side
       by side; by here the image is nearly gone. */
    padding: 24px 24px 24px 46%;
}

.small-card h3 {
    font-family: Rammetto-One;
    font-size: 1.2rem;
}

.small-card .link {
    width: auto;
    min-width: 0;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none;
    margin-top: auto;
}

.small-card .link p {
    font-weight: 700;
}

.medium-card-grid {
    display: flex;
    flex-wrap: wrap;
    /* stretch is default for flex wrap. make it flex-start for every card to take only the necessary size to it's own content. */
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.medium-card {
    display: flex;
    position: relative;
    flex-direction: column;
    flex: 1 1 440px;
    max-width: 520px;
    /* padding: 28px; */
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.medium-card .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 24px 24px;
}

.medium-card h3 {
    font-family: Rammetto-One;
    font-size: 1.2rem;
}

.medium-card .link {
    width: auto;
    min-width: 0;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 8px;
}

.medium-card .link p {
    font-weight: 700;
}

/* Same dissolving-image trick as .small-card, rotated 90deg: the photo
   fades and blurs into the card's bottom edge instead of its right edge,
   so it blends into the translucent body below rather than ending in a
   hard line. */
.medium-card .media {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
}

.medium-card .media img,
.medium-card .media::before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* One shared mask on the sharp image and the blurred copy beneath it: as
   both fade out together, the sharp layer thins first (it's on top) and
   lets the blur show through in the middle of the fade, before everything
   reaches transparent. No separate "blur band" vs "fade band" needed. */
.medium-card .media img
 {
    filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.medium-card .media::before {

    z-index : 1;
    content: '';
    background-image: var(--image-url);
    background-size: cover;
    background-position: center;
    /* filter: blur(12px); */
    mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
    /* object-position: 0 30% */


}

.medium-card.card-expandable {}

@media screen and (max-width: 768px) {
    .big-card {
        padding: 20px;
    }

    .big-card-illustration {
        height: 150px;
    }

    /* Stack: side-on leaves the text about 150px wide on a phone, so the
       photo goes across the top and dissolves downward instead of
       rightward. */
    .small-card {
        flex-direction: column;
        text-align: center;
        min-height: 0;
    }

    .small-card .media {
        position: relative;
        width: 100%;
        height: 170px;
    }

    /* Same blurred-img-under-sharp-::before trick as the desktop layout,
       rotated to fade downward instead of rightward. */
    .small-card .media img {
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    }

    .small-card .media::before {
        -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
        mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
    }

    .small-card .body {
        align-items: center;
        /* Pulled up under the photo's fade, same overlap as the desktop
           layout has horizontally. */
        padding: 36px 20px 24px;
        margin-top: -32px;
    }

    /* The global mobile `p { text-align: justify }` stretches these short
       lines badly once they are centred. */
    .small-card p {
        text-align: center;
    }
    .small-card .link{
        margin: 0px;
        margin-top: 6px
    }

    /* Touch has no hover: on mobile the "grow" hover feedback is replaced
       by a "shrink" press feedback instead, using :active. The hover rules
       are neutralised here so a lingering :hover after tap can't fight
       with :active. Same letter-compress text animation either way. */
    .button1:hover,
    .button2:hover {
        transform: none;
    }

    .button1:hover p,
    .button2:hover p {
        animation: none;
    }

    .button1:active {
        transform: scale(0.9);
        animation: transform .6s cubic-bezier(.11,.06,.55,1);
        cursor: pointer;
        box-shadow: 0 0px 30px rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .button1.pos-abs:active {
        transform: translate(-50%, -50%) scale(0.9);
        cursor: pointer;
    }

    .button2:active {
        transform: scale(0.9);
        cursor: pointer;
        box-shadow: 0 0px 30px rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .button1:active p,
    .button2:active p {
        animation: textBlurBtnUnhover .6s cubic-bezier(.12, 0, .18, 1);
        animation-timing-function: ease;
    }

    .button1:not(:active) p,
    .button2:not(:active) p {
        animation: textBlurBtn .6s cubic-bezier(.12, 0, .18, 1);
    }
}