@font-face {
font-family: "Woulien Script";
src:
url("fonts/Woulien Script.otf") format("opentype"),
url("fonts/Woulien Script.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Patrick Hand";
src: url("fonts/PatrickHand-Regular.woff2") format("woff2");
font-style: normal;
}

/* ==================== /
/ RESET /
/ ==================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
font-size: 16px;
}

/* ==================== /
/ BODY /
/ ==================== */

body {
height: 100vh;
background: url("assets/fond.png") center/cover no-repeat #000;
padding: 3vh 3vw;
display: flex;
flex-direction: column;
}

/* ==================== /
/ HEADER /
/ ==================== */

.header {
height: 15vh;
max-height: 120px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}

.logo-container {
position: fixed;
top: -5px;
left: -5px;
width: 35vw;
max-width: 450px;
height: 15vh;
pointer-events: none;
min-height: 100px;
}

.logo-fond,
.logo-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left top;
padding-right: 5%;
}

.logo-fond {
opacity: .9;
}

.logo-image {
left: 5px;
top: 10px;
width: 80%;
height: 80%;
}

/* ==================== /
/ RESEAUX /
/ ==================== */

.social {
display: flex;
gap: 2vw;
align-self: flex-end;
}

.social a {
color: white;
font-size: clamp(60px, 3vw, 72px);
text-shadow:
0 0 .8vw rgba(0, 0, 0, .5);
}

/* ==================== /
/ GALERIE /
/ ==================== */

.gallery {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2vw;
}

.gallery img {
max-width: 45%;
height: auto;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.layout {
    display: flex;
    width: 100%;
    gap: 3vw;
    padding-top: 3vh;
    align-items: flex-start;
}


/* =========================================================
   PLANCHE ÉVÉNEMENTS
   ========================================================= */

/*
   Le SVG fait 600 x 1000.
   On conserve donc exactement son ratio 3:5.
*/

.events-panel {
    position: relative;

    width: clamp(420px, 25vw, 450px);
    aspect-ratio: 600 / 1000;

    flex: 0 0 auto;
}


/* Image SVG de la planche */

.planche {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}


/* =========================================================
   CONTENU DE LA PLANCHE
   ========================================================= */

/*
   Le rectangle intérieur du SVG est :

   x = 43
   y = 43
   largeur = 490
   hauteur = 890

   Donc :

   gauche  = 43 / 600  = 7.17%
   droite  = 67 / 600  = 11.17%
   haut    = 43 / 1000 = 4.30%
   bas     = 67 / 1000 = 6.70%
*/

.events-content {
    position: absolute;

    top: 4.3%;
    right: 11.17%;
    bottom: 6.7%;
    left: 7.17%;

    display: flex;
    flex-direction: column;

    min-height: 0;

    font-family: "Patrick Hand", cursive;
}


/* =========================================================
   TITRE
   ========================================================= */

.events-content h2 {
    flex: 0 0 auto;

    margin: 0;

    padding: 0;

    text-align: center;

    font-family: "Woulien Script", cursive;
    font-size: 2.4rem;
    font-weight: normal;

    line-height: 1;

    color: #000;
}


/* =========================================================
   CALENDRIER
   ========================================================= */

.calendar {
    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: .45em;

    margin: .35rem 0 .8rem 0;
    padding: 0;

    line-height: 1.1;
}

.calendar i {
    flex: 0 0 auto;
}

.calendar a {
    color: #6f3e1c;

    font-size: 1rem;

    text-decoration: underline;
}


/* =========================================================
   ZONE DE LISTE
   ========================================================= */

/*
   Toute la hauteur restante de la planche est consacrée
   aux événements.
*/

.events-scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: .2rem .5rem .2rem 0;

    box-sizing: border-box;
}


/* =========================================================
   LISTE
   ========================================================= */

#events-list {
    list-style: none;
    text-align: center;
    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   CARTE D'ÉVÉNEMENT
   ========================================================= */

/*
   On donne à chaque carte une vraie hauteur.

   La zone de liste est conçue pour afficher environ
   5 cartes à la fois.

   La hauteur est donc calculée par rapport à la hauteur
   disponible dans la planche, et non par rapport au texte.
*/

#events-list li {
    width: 100%;
    text-align: left;
    min-height: 0;

    margin: 0 0 .75rem 0;
    padding: .55rem .7rem;

    box-sizing: border-box;

    background: rgba(255, 245, 220, .55);

    border-radius: 12px;

    box-shadow:
        0 3px 6px rgba(0, 0, 0, .25),
        inset 0 1px 2px rgba(255, 255, 255, .4);

    transform: rotate(-3.5deg);

    overflow: hidden;
}


/* =========================================================
   CONTENU DE LA CARTE
   ========================================================= */

.event-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    gap: .5rem;
}


/* =========================================================
   TEXTE
   ========================================================= */

.event-info {
    flex: 1 1 auto;

    min-width: 0;

    width: auto;

    margin: 0;
    padding: 0;

    color: #9A1E3A;

    text-decoration: none;

    font-size: 1rem;
    font-weight: 500;

    line-height: 1.15;

    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.event-info:hover {
    text-decoration: underline;
}


/* =========================================================
   ICÔNE COUVERTS
   ========================================================= */

.event-info::before {
    content: "";

    display: inline-block;

    width: 1.25em;
    height: 1.25em;

    margin-right: .15em;

    background:
        url("assets/couverts.svg")
        center / contain
        no-repeat;

    vertical-align: -.2em;
}


/* =========================================================
   LOCALISATION
   ========================================================= */

.event-location {
    flex: 0 0 1.7rem;

    width: 1.7rem;
    height: 1.7rem;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    text-decoration: none !important;

    transform: rotate(3.5deg);
}


.event-location span {
    display: block;

    width: 1.4rem;
    height: 1.4rem;

    background:
        url("assets/localisation.png")
        center / contain
        no-repeat;

    transition: transform .2s ease;
}

.event-location:hover span {
    transform: scale(1.15);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

@supports (-moz-appearance: none) {

    .events-scroll {
        scrollbar-width: thin;
        scrollbar-color: #A75E2A #6f3e1c;
    }
}


.events-scroll::-webkit-scrollbar {
    width: 28px;
}

.events-scroll::-webkit-scrollbar-track {
    background-image: url("assets/scroll-track.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200% 100%;
}

.events-scroll::-webkit-scrollbar-thumb {
    background:
        url("assets/cuillere.svg")
        center / contain
        no-repeat;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    html,
    body {
        overflow: hidden;
    }


    body {
        height: 100dvh;
        min-height: 100dvh;

        padding: 2vh 5vw;

        background:
            url("assets/fond_neutre.png")
            center / cover
            no-repeat #000;
    }


    /* HEADER */

    .header {
        height: 10vh;
        flex-shrink: 0;
    }


    .logo-container {
        width: 70vw;
        max-width: 70vw;
    }


    /* RESEAUX */

    .social {
        gap: 5vw;
    }

    .social a {
        font-size: clamp(32px, 9vw, 60px);
    }


    /* LAYOUT */

    .layout {
        width: 100%;
        height: auto;

        padding-top: 1dvh;

        align-items: flex-start;
    }


    /* GALERIE */

    .gallery {
        display: none;
    }


    /* PLANCHE */

    .events-panel {
        width: min(95%, 51dvh);
        min-width: 0;

        height: auto;

        aspect-ratio: 600 / 1000;
        flex: 0 1 auto;
    }


    /* TITRE */

    .events-content h2 {
        font-size: 2.4rem;
    }


    /* CALENDRIER */

    .calendar {
        margin-top: .3rem;
        margin-bottom: .7rem;
    }

    .calendar a {
        font-size: 1rem;
    }


    /* ÉVÉNEMENT */

    .event-info {
        font-size: 1rem;
        line-height: 1.15;
    }


    /* LOCALISATION */

    .event-location {
        flex-basis: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
    }

    .event-location span {
        width: 1.3rem;
        height: 1.3rem;
    }


    /* SCROLLBAR */

    .events-scroll::-webkit-scrollbar-track {
        background-size: 125% 100%;
    }
}


/* DON + MENTIONS LÉGALES — adaptation à la hauteur disponible */
body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.header { flex: 0 0 auto; }
.layout {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 1vh;
    align-items: center;
}
.events-column {
    height: 100%;
    min-height: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1vh, 10px);
}
.donate-button {
    visibility: hidden;
    width: clamp(300px, 20vw, 425px);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 5px 22px;
    border: 2px solid #6f3e1c;
    border-radius: 999px;
    background: #9A1E3A;
    color: #fff8e8;
    font-family: "Patrick Hand", cursive;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    transition: transform .2s ease, background-color .2s ease;
}
.donate-button:hover, .donate-button:focus-visible {
    background: #7f1730;
    transform: translateY(-1px);
}
.events-panel {
    height: calc(100% - 44px);
    width: auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 600 / 1000;
}
.gallery {
    height: 100%;
    min-height: 0;
    align-items: center;
}
.gallery img {
    max-height: 100%;
    max-width: 45%;
    width: auto;
    object-fit: contain;
}
.site-footer {
    color: white;
    flex: 0 0 auto;
    width: 100%;
    padding-top: 2px;
    text-align: center;
    line-height: 1;
    font-size: 12px;
}
.site-footer a { color: white; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }

@media (max-width: 800px) {
    .layout {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        padding-top: 1dvh;
        align-items: center;
        justify-content: center;
    }
    .events-column { height: 100%; max-width: 100%; gap: 4px; }
    .donate-button { min-height: 50px; padding: 3px 18px; font-size: 1rem; }
    .events-panel {
        height: calc(100% - 34px);
        width: auto;
        max-width: 100%;
        min-height: 0;
        flex: 0 1 auto;
        aspect-ratio: 600 / 1000;
    }
    .site-footer { font-size: 11px; padding-top: 1px; }
}