/**
Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {font-family: "DalekPinpointBold";
    src: url("../fonts/DalekPinpointBold.eot"); /* IE9*/
    src: url("../fonts/DalekPinpointBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/DalekPinpointBold.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/DalekPinpointBold.woff") format("woff"), /* chrome、firefox */
    url("../fonts/Bungee/Bungee-Regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/DalekPinpointBold.svg#DalekPinpointBold") format("svg"); /* iOS 4.1- */
}

/**
Common
 */
 
:root {
    --backgroundColor: #013833;
    --primaryColor: #f43260;
    --secondColor: #dedfda;
    --backgroundColorAlt: #afba9d;
}
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: 'Reggae One', sans-serif;
    font-size: 14px;
    background-color: var(--backgroundColor);
    scroll-behavior: smooth;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/**
Landing section
 */
section.landing {
    height: 100vh;
    width: 100%;
    background-size: cover;
    /*background: url(../images/background/landing.png) no-repeat center;*/
    /* Le dégradé utilise maintenant la variable CSS --backgroundColor pour matcher le background global */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, var(--backgroundColor)),
                url(../images/2026/background/landing.png) no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
}

section.landing > img {
    /*min-width: 280px;*/
    width: 30%; /* This might limit the size of the image */
    height: auto;    /* This maintains the aspect ratio */
}
section.landing .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}

h1 {
    font-family: "Chewy", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.6rem;
    margin: 0px;
    color: #ffffff;
    text-align: center;
    /* color: #FFC265; */
}

section.landing .heading > h4 {
    margin: 0px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
    
}

section.landing .heading > h5 {
    margin: 30px 0px 0px;
    font-weight: 600;
    font-family: 'Yeseva One', serif;
    text-align: center;
}

.svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.navIcon{
    width: 80%;
    height: 80%;
}

/**
Sponsors section
 */
.sponsors {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #FFFFFF;
}
.sponsors .sponsorsList {
    width: 65%;
    margin: 8vh 0%;
    min-width: 650px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    grid-template-columns: repeat(2, 1fr);
}
.sponsors .sponsorsList .sponsor {
    background-color: var(--backgroundColorAlt);
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
    height: 600px;
}
.sponsors .sponsorsList .sponsor .leftPart {
    display: flex;
    align-items: center;
    /* height: 70%; */
    justify-content: center;
    /* flex-grow: 1; */
    width: 90%;
    flex-direction: column;
    align-items: baseline;
    padding: 5% 5% 5% 3%;
    box-sizing: border-box;
}
.sponsors .sponsorsList .sponsor .logo {
    height: 30%;
    width: 100%;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 2vw;
    box-sizing: border-box;
    background: #fefefe;
    position: relative;
    border-bottom: 8px solid var(--backgroundColor);
}
.sponsors .sponsorsList .sponsor .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sponsors .sponsorsList .sponsor p {
    margin: 0px;
}
.sponsors .sponsorsList .sponsor a {
    background-color: var(--backgroundColor);
    color: #FFFFFF;
    text-decoration: none;
    padding: 3% 5%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.35s ease-in-out;
    margin-top: 30px;
}
.sponsors .sponsorsList .sponsor a:hover {
    background-color: var(--primaryColor);
}
/**
Team section
 */
.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #FFFFFF;
}
.team > img {
    width: 65%;
    display: flex;
    justify-content: center;
    height: 100%;

    margin: 8vh 0%;
    min-width: 650px;
}
/**
Informations section
 */
.informations {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #ffffff;
}
.informations .cardsView {
    width: 70%;
    display: flex;
    justify-content: center;
    height: 100%;
    margin: 8vh 0%;
    min-width: 650px;
    align-items: start;
}
.informations .cardsView .infosCard {
    display: flex;
    flex-direction: column;
    width: 48%;
    background-color: var(--backgroundColorAlt);
    padding: 3% 3%;
    box-sizing: border-box;
    border-radius: 20px;
    margin-right: 1vw;
}
.informations .cardsView .infosCard .columns {
    display: flex;
    margin-top: 16px;
    align-items: center;
    width: 100%;
}
.informations .cardsView .infosCard .columns > img {
    width: 45%;
    border-radius: 5px;
}
.informations .cardsView .infosCard .columns > p {
    margin: 0px 0px 0px 20px;
    color: #FFFFFF;
}
/**
TRANSPORT
CARDS
 */
.transport {
    color: #FFFFFF;
}
.transportsView {
    width: 85%;
    max-width: 1500px;
    margin: 8vh 0%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    grid-template-columns: repeat(5, 1fr);
}
.transportsView .transportCard {
    width: unset;
    margin: unset;
    grid-template-rows: 3fr 7fr;
}
.transportsView .transportCard .heading {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.transportsView .transportCard .heading .location {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 15px;
}
.transportsView .transportCard .heading .location > img {
    height: 28px;
}
.transportsView .transportCard .heading .location > span {
    font-weight: 400;
    margin-left: 5px;
    font-size: 1.4rem;
}
.informations .cardsView .prices {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}
.priceCard {
    background-color: var(--backgroundColorAlt);
    border-radius: 20px;
    width: 50%;
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 6fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.priceCard--fond{
    /* Fond semi-transparent basé sur --backgroundColor */
    background-color: var(--backgroundColor-rgb);
}
.priceCard .heading {
    width: 100%;
    /* Ajout d'un overlay sombre pour améliorer la lisibilité du texte au-dessus */
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../images/2026/background/price.png);
    background-size: cover;
    background-position: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    align-items: flex-end;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 5%;
    box-sizing: border-box;
    position: relative;
}
.priceCard .heading .soldout {
    position: absolute;
    top: 0px;
    right:0px;
    width: 40%;
}
.priceCard .heading > h4 {
    margin: 0px;
    font-size: 1.4rem;
    font-weight: 300;
}
.priceCard .body {
    padding-top: 8%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 8%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.priceCard .body a {
    background-color: var(--backgroundColor);
    width: 100%;
    color: #FFFFFF;
    text-decoration: none;
    padding: 5% 8%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.35s ease-in-out;
}
.priceCard .body a:hover {
    background-color: var(--primaryColor);
}
/**
Footer
 */
footer {
    width: 100%;
    height: 25vh;
    min-height: 350px;
    display: flex;
    background-color: var(--backgroundColorAlt);
    padding: 2% 3%;
    box-sizing: border-box;
    justify-content: space-between;
    color: #FFFFFF;
}

footer .leftPart {
    display: flex;
    align-items: center;
}
footer .rightPart {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: end;
}
footer .leftPart > img {
    height: 65%;
}
footer .leftPart .social {
    display: flex;
    flex-direction: column;
    margin-left: 25px;
}
footer .leftPart .social h2 {
    margin: 0px 0px 15px;
}
footer .socialList {
    display: flex;
}
footer .socialList > a {
    margin-right: 1vw;
}
footer .socialList > a img {
    height: 50px;
    width: auto;
}
/**
Program section
 */
.program {
    padding-top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.program .programContainer {
    width: 95%;
    background-color: var(--backgroundColorAlt);
    display: flex;
    border-radius: 20px;
    margin: 8vh 0%;
    overflow: hidden;
    min-width: 700px;
    max-width: 1100px;
}
.program .programContainer .parts {
    display: flex;
    flex-direction: column;
    border-right: 8px solid var(--backgroundColor);
}
.program .programContainer .parts .part {
    display: flex;
    align-items: center;
    padding: 2vw;
    box-sizing: border-box;
    color: #FFFFFF;
    justify-content: flex-start;
    cursor: pointer;
    transition: background-color 0.35s ease-in-out;
}
.program .programContainer .parts .part:nth-child(2) {
    border-top: 8px solid var(--backgroundColor);
    border-bottom: 8px solid var(--backgroundColor);
}
.program .programContainer .parts .part > img {
    width: auto;
    margin-right: 30px;
    height: 100%;
    object-fit: contain;
    height: 6vh;
}
.program .programContainer .parts .part .infos {
    display: flex;
    flex-direction: column;
}
h5 {
    margin: 0px;
    font-size: 1.4rem;
    font-weight: 300;
    color: #FFFFFF;
}
.program .programContainer .programContent h4 {
    font-size: 2rem;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0px 0px 20px;
}
.program .programContainer .programContent .programLine {
    display: flex;
    margin-bottom: 8px;
    flex-grow: 1;
}
.program .programContainer .programContent.programBlock {
    flex-direction: row;
    padding: unset;
}
.program .programContainer .programContent.programBlock > div {
    display: flex;
    flex-direction: column;
    padding: 2%;
    box-sizing: border-box;
    justify-content: center;
    flex-grow: 1;
}
.program .programContainer .programContent.programBlock p {
    margin: 0px;
    color: #FFFFFF;
    line-height: 118%;
    text-align: left;
    width: 100%;
}
.program .programContainer .programContent.programBlock img {
    height: 100%;
    width: 30%;
    object-fit: cover;
}
.program .programContainer .programContent .programLine .lineElement {
    background-color: var(--backgroundColor);
    padding: 3%;
    box-sizing: border-box;
    color: #FFFFFF;
    flex-grow: 1;
}
.program .programContainer .programContent .programLine .lineElement:first-of-type {
    margin-right: 8px;
}
.program .programContainer .programContent .programLine .lineElement.large {
    flex-grow: 2;
}
.program .programContainer .programContent .programLine .lineElement h6 {
    margin: 0px;
    font-size: 1.4rem;
    font-weight: 300;
}
.sponsors hr,
.informations hr,
.program .programContainer hr {
    width: 16%;
    min-width: 28px;
    border: none;
    margin: 6px 0px 15px 0px;
    height: 4px;
    background-color: var(--secondColor);
}

.program .programContainer .parts .part .infos > p {
    margin: 0px;
    font-size: 0.9rem;
}
.program .programContainer .parts .part:hover,
.program .programContainer .parts .part.active {
    background-color: var(--primaryColor);
}
.program .programContainer .programContent {
    padding: 2%;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}
.program .programContainer .programContent.active {
    display: flex;
}
/**
Header
 */
header {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 90vh;
}
header .navContainer {
    width: auto;
    display: flex;
    background: var(--backgroundColorAlt);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    align-items: center;
    height: 24vh;
    min-height: 180px;
}
header .navContainer .navElement {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 15000;
    position: relative;
}
header .navContainer .navElement .bg {
    width: 100%;
    display: flex;
    width: 10vw;
    max-width: 200px;
    transition: border-top-color 0.35s ease-in-out;
    height: 75%;
}
header .navContainer .navElement .bg > svg {
    height: 100%;
}
header .navContainer .navElement .bg > span {
    height: 100%;
    background-color: var(--backgroundColorAlt);
    flex-grow: 1;
    transition: background-color 0.35s ease-in-out;
}
header .navContainer .navElement .bg svg path {
    fill: var(--backgroundColorAlt);
    transition: fill 0.35s ease-in-out;
}
header .navContainer .navElement .bg svg.small {
    display: none;
}
/*header .navContainer .navElement .top {
    width: 100%;
    height: 2vh;
    background-color: var(--backgroundColorAlt);
    transition: background-color 0.35s ease-in-out;
}*/
header .navContainer .navElement:hover .bg svg path,
header .navContainer .navElement.active .bg svg path,
header .navContainer .navElement:hover .top,
header .navContainer .navElement.active .top,
header .navContainer .navElement:hover .bottom,
header .navContainer .navElement.active .bottom,
header .navContainer .navElement:hover .bg > span,
header .navContainer .navElement.active .bg > span{
    background-color: var(--primaryColor);
    fill: var(--primaryColor);

}
header .navContainer .navElement .bottom {
    width: 100%;
    flex-grow: 1;
    background-color: var(--backgroundColoralt);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.35s ease-in-out;
}
header .navContainer .navElement .bottom h6 {
    margin: 0px;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
}

@media screen and (min-width: 700px) {
    header.fixed {
        position: fixed;
        top: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        z-index: 50000;
    }
    header.fixed .navContainer {
        height: 12vh;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        min-height: 100px;
    }
    /*header.fixed .navContainer .navElement .top {
        height: 0.5vh;
    }*/
    header.fixed .navBackground {
        top: 0.5vh;
        height: 65%;
    }
    header.fixed .navContainer .navElement .bg svg.small {
        display: block;
    }
    header.fixed .navContainer .navElement .bg svg.normal {
        display: none;
    }
    header.fixed .navContainer .navElement .bg {
        height: 65%;
    }
}

@media screen and (min-width: 700px) and (max-width: 1400px) {
    header .navContainer .navElement .bg {
        width: 18vw;
    }
    header.fixed .navContainer .navElement .bg {
        height: 60%;

    }
    header.fixed .navBackground {
        /* todo à check */
        height: 65%;
        top: 0%;
    }
    .sponsors .sponsorsList {
        width: 85%;
        grid-column-gap: 3vw;
        grid-row-gap: 3vw;
    }
}

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

    h1{
        font-size: 2.5rem;
        max-width: 90vw;
    }

    .transportsView {
        width: 90%;
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 3vw;
        grid-column-gap: 3vw;
    }
    .priceCard {
        display: flex;
        flex-direction: column;
    }
    .priceCard .heading {
        min-height: 18vh;
    }
    .priceCard .body {
        flex-grow: 1;
    }
    header {
        display: none;
    }
    .informations .cardsView {
        width: 90%;
        flex-direction: column;
        min-width: unset;
        align-items: center;
    }
    .informations .cardsView .infosCard {
        width: 100%;
        margin-bottom: 3vh;
        padding: 6%;
        margin-right: 0px;
    }
    .informations .cardsView .prices {
        width: 100%;
    }
    .priceCard {
        margin: 0px;
        width: 100%;
    }
    .informations .cardsView .priceCard:first-of-type {
        margin-right: 3vw;
    }
    .program .programContainer .parts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        border-right: none;
        border-bottom: 8px solid var(--backgroundColor);
    }
    .program .programContainer .parts .part:nth-child(2) {
        border: none;
    }
    .program .programContainer .parts .part {
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .program .programContainer .parts .part > img {
        margin-right: 0px;
        height: unset;
        width: 40%;
        margin-top: 15px;

    }
    .program .programContainer .programContent.programBlock {
        flex-direction: column;
    }
    .program .programContainer .programContent.programBlock img {
        height: 15vh;
        width: 100%;
    }
    footer {
        flex-direction: column;
        height: unset;
        min-height: unset;
        padding: 5% 5%;
    }
    footer .leftPart {
        flex-direction: column;
    }
    footer .leftPart > img {
        width: 40%;
        height: unset;
    }
    footer .leftPart .social {
        margin:0px;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    footer .rightPart {
        text-align: center;
    }
    footer .socialList {
        justify-content: center;
    }
    footer .socialList > a {
        margin: 5%;
    }
    .program .programContainer {
        flex-direction: column;
    }
    .program .programContainer,
    .team > img {
        min-width: unset;
        width: 90%;
    }
    .sponsors .sponsorsList {
        width: 90%;
        display: flex;
        flex-direction: column;
        min-width: unset;
    }
    .sponsors .sponsorsList .sponsor {
        flex-direction: column;
        margin-bottom: 5vw;
    }
    .sponsors .sponsorsList .sponsor .logo {
        width: 100%;
        border: none;
    }
    .sponsors .sponsorsList .sponsor .logo img {
        width: 60%;
    }
    .sponsors .sponsorsList .sponsor .leftPart {
        padding: 6%;
        width: 100%;
    }
    .program .programContainer .programContent.programBlock > div {
        padding: 6%;
    }

    .priceCard--fond{
        display: none;
    }
}

@media screen and (min-width: 1120px) {
    section.landing > img {
        max-width: 550px; /* This might limit the size of the image */
        height: auto;    /* This maintains the aspect ratio */
    }
}