@font-face {
    font-family: 'race';
    src        : url('../webfonts/Race_Sport.woff2') format('woff2');
    font-weight: normal;
    font-style : normal;
}

@font-face {
    font-family: 'antry';
    src        : url('../webfonts/AntrySans.woff2') format('woff2');
    font-weight: normal;
    font-style : normal;
}

@font-face {
    font-family: 'montserrat';
    src        : url('../webfonts/montserrat-regular.woff2') format('woff2');
    font-weight: normal;
    font-style : normal;
}

html {
    scroll-behavior: smooth;
    min-height     : 100vh;
}

body {
    min-height           : 100vh;
    position             : relative;
    flex-direction       : column;
    grid-template-columns: 1fr;

}

#whole_wrapper {
    min-height        : 100vh;
    display           : grid;
    grid-template-rows: min-content 1fr min-content;
    margin            : 0 auto;
    position          : relative;
    overflow-x        : hidden;
}

.home #whole_wrapper {
    grid-template-rows: min-content min-content 1fr min-content;
}

#totop {
    display      : block;
    padding      : 8px;
    font-size    : 2rem;
    position     : fixed;
    right        : 20px;
    bottom       : 20px;
    background   : #000;
    color        : rgb(255, 255, 255) !important;
    z-index      : 40;
    line-height  : 1 !important;
    border-radius: 6px;
    transition   : opacity .3s;
    opacity      : .4;
}

#totop:hover {
    opacity: 1;
}

.container-fluid {
    width  : 100% !important;
    padding: 0;
}

figure,
media,
audio,
img {
    max-width: 100% !important;
}

.container {
    width    : min(1200px, 100%) !important;
    max-width: unset;
}

#main {
    padding-block: 3.25rem;
}

h1,
h2,
h3,
h4 {
    font-family: 'montserrat';
}

.lys {
    font-family: 'race';
    font-size  : 2rem;
}

.musiques {
    color: #fb430a
}

.nav-item,
#transition,
footer {
    text-align: left
}

#top_logo {
    width  : 100px;
    display: block;
}

#top_logo2 {
    width  : 200px;
    display: block;
}

.top_logo_title {
    display: flex;
    gap    : 1rem;
}

#bigtitle {
    display        : flex;
    flex-direction : column;
    justify-content: center;
}

#bigtitle h1,
#bigtitle h2,
#bigtitle h3 {
    font-family   : 'race';
    text-transform: uppercase;
}

#bigtitle h1 {
    font-size: clamp(1.88rem, 1.33rem + 2.08vw, 2.5rem);

}

#bigtitle h2 {
    font-size: clamp(1.25rem, 0.7rem + 2.08vw, 1.875rem);
}

#containerbandeau img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
p,
a {
    font-family: 'montserrat';
}

h1,
h2,
h3,
h4 {
    font-weight      : 800;
    font-variant-caps: small-caps;
}

h5 {
    color     : #fb430a;
    font-size : 2rem;
    text-align: center;
}

ul {
    list-style: none;
}

.trombi {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.vignette {
    display              : grid;
    gap                  : 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.vignette img {
    margin-bottom: .4rem;
}

.vignette h4 {
    line-height  : 1;
    margin-bottom: .1rem;
}

.vignette p:last-of-type {
    margin-bottom: .2rem;
}

.containerhome {
    position             : relative;
    display              : grid;
    gap                  : 2.8rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding-inline       : 1.25rem;
}

/* @media (min-width: 768px) {
    .containerhome {
        grid-template-columns: repeat(2, 1fr);
    }
} */

.infoshome {
    margin        : 0;
    padding-bottom: 0;
}

.tlc p {
    text-align: center;
    font-size : 12px;
}

footer {
    position: relative;
    width   : 100%;
}

.event,
.bureau,
.infos {
    padding-bottom: 20px;
    list-style    : none;
    padding-right : 30px;
}

.lieu,
.date {
    font-size: 20px;
}

iframe {
    max-width: 100% !important;
}

#mainnav {
    position  : fixed;
    left      : 0;
    top       : 0;
    width     : 100%;
    height    : 100vh;
    background: #2d2d2d;
    z-index   : 1000;
    padding   : 40px 20px;
    text-align: center;
    transform : translateX(-100%);
    transition: transform .5s ease-in-out;
    color     : white;
}

#mainnav.open {
    display  : block;
    transform: translateX(0);
}

#mainnav ul {
    margin: 0;
}

#mainnav li {
    display  : block;
    margin   : 0 0 15px 0;
    font-size: 1.5rem;
}

#mainnav li::last-child {
    margin-right: 0;
}

#openmenu,
#closemenu {
    font-size: 2rem;
    color    : rgb(255, 255, 255);
}

#openmenu {
    position: absolute;
    top     : 1rem;
    right   : 1rem;
}

@media (min-width: 768px) {
    #mainnav {
        position       : static;
        height         : auto;
        background     : #2d2d2d;
        z-index        : 1000;
        padding        : 0;
        text-align     : left;
        display        : flex;
        justify-content: end;
        width          : min(1200px, 100%);
        padding-inline : 1.5rem;
        opacity        : 1;
        margin         : 1rem auto 0 auto;
        transform      : none;
    }

    #mainnav ul {
        margin: 0;
    }

    #mainnav li {
        display  : inline-block;
        margin   : 0 10px 0 0;
        font-size: 1rem;
    }

    #mainnav li::last-child {
        margin-right: 0;
    }
}

#headpart {
    background-color: #2d2d2d;
    color           : rgba(255, 255, 255, .8);
}

#mainnav li a {
    color          : #ffffff;
    text-decoration: none;
}

#mainnav li a:hover,
#mainnav li a.activ {
    color: #ff0000;
}

.figure {
    margin: 100px;
}

footer {
    background-color: #2d2d2d;
    color           : rgba(255, 255, 255, .8);
    font-size       : .9rem;
    height          : 50px;
}

footer a {
    color          : rgba(255, 255, 255, .8);
    text-decoration: none;
}

footer a:hover {
    color          : rgba(255, 255, 255, .8);
    text-decoration: underline;
}

footer .sep {
    display: inline-block;
    margin : 0 5px;
}


/***********HEADER*************/

header {
    width: 100%;

}

.anim {
    position  : absolute;
    top       : 50px;
    left      : 450px;
    z-index   : 10;
    /* padding: 10px; */
}


header h1 {
    animation: titre ease 2s;
    font-size: calc(1, 5rem + 1.5vw);
    color    : #e93313;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2.5rem;
    }
}

@keyframes titre {
    0% {
        opacity  : 0;
        transform: translateY(180px);
    }

    100% {
        opacity  : 1;
        transform: translateY(0px);
    }
}

.lg-sub-html p {
    font-size: 1.2rem !important;
    color    : #333;
}

#formcontact {
    /* Uniquement centrer le formulaire sur la page */
    margin       : 0 auto;
    width        : 100%;
    /* Encadré pour voir les limites du formulaire */
    padding      : 3rem 10%;
    border       : 1px solid rgb(0, 0, 0);
    border-radius: 1em;
}

form {
    margin: 0 auto;
}

#formulaire {
    width    : 100%;
    max-width: 900px;
    margin   : 0 auto;
    padding  : 0 5%;
}

form div+div {
    margin-top: 1em;
}

input,
textarea {
    /* Pour s'assurer que tous les champs texte ont la même police.
       Par défaut, les textarea ont une police monospace */
    font      : 1em sans-serif;
    /* Pour que tous les champs texte aient la même dimension */
    width     : 100%;
    box-sizing: border-box;
    /* Pour harmoniser le look & feel des bordures des champs texte */
    border    : 1px solid #999;
}

input:focus,
textarea:focus {
    /* Pour souligner légèrement les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
    vertical-align: top;
    /* Pour donner assez de place pour écrire du texte */
    height        : 5em;
}

.button {
    /* Pour placer le bouton à la même position que les champs texte */
    padding-left: 90px;
    /* même taille que les étiquettes */
}

button {
    /* Cette marge supplémentaire représente grosso modo le même espace que celui
       entre les étiquettes et les champs texte */
    margin-left: .5em;
}

.boxgroupe,
.infos {
    border-radius: 5px;
    margin-bottom: 20 px;
    max-width    : 1200px;
    margin       : auto;
}

.titlegr {
    padding-top: 15px;
}

.imagegr {
    width: 400px;
}

.gal_grid {
    position      : relative;
    padding-bottom: 50px;
}

hr {
    border: 2px solid black;
}

/* TIMELINE */

.timeline {
    --shadow-color  : #6060609b;
    --elem-bg       : #fff;
    --defaut-puce-bg: orange;
    --trait-color   : #666;
    --arrow-width   : 16px;
    --puce-width    : 60px;
    --trait-width   : 5px;
    width           : 100%;
    overflow-x      : clip;
}

.timeline ul {
    position: relative;
    padding : 0;
    margin  : 0;
}

.timeline ul::before {
    content   : '';
    position  : absolute;
    width     : var(--trait-width);
    height    : 100%;
    top       : 0;
    left      : calc(var(--puce-width) / 2 - var(--trait-width) / 2);
    background: var(--trait-color);
}

.timeline li {
    list-style-type: none;
    position       : relative;
    width          : 100%;
    display        : flex;
    margin         : 0 auto;
    padding-block  : calc(var(--arrow-width) * 2) calc(var(--puce-width) / 2 - var(--arrow-width));
}

.timeline li::before {
    content      : '';
    font-family  : "Font Awesome 6 Pro";
    color        : #fff;
    font-size    : 2.2rem;
    line-height  : 1;
    font-weight  : 700;
    position     : absolute;
    text-align   : center;
    left         : 0;
    bottom       : 0;
    width        : var(--puce-width);
    height       : var(--puce-width);
    padding      : 10px;
    border-radius: 50%;
    background   : var(--defaut-puce-bg);
    z-index      : 2;
}

.timeline li div {
    margin-left  : auto;
    margin-right : 15px;
    position     : relative;
    bottom       : 0;
    width        : calc(100% - (var(--puce-width) + var(--arrow-width) * 2.5) );
    padding      : 15px;
    background   : var(--elem-bg);
    border-radius: 9px;
    box-shadow   : 0 0 20px var(--shadow-color);
    opacity      : 0;
    transition   : all 0.5s ease-in-out;
}

.timeline li div::before {
    content       : "";
    position      : absolute;
    bottom        : calc(var(--arrow-width) / 2);
    width         : 0;
    height        : 0;
    border-style  : solid;
    left          : calc(var(--arrow-width) * -1);
    border-width  : calc(var(--arrow-width) / 2) var(--arrow-width) calc(var(--arrow-width) / 2) 0;
    border-color  : transparent var(--elem-bg) transparent transparent;
    -webkit-filter: drop-shadow(calc(var(--arrow-width) / -2) 0 calc(var(--arrow-width) / 2) var(--shadow-color));
    filter        : drop-shadow(calc(var(--arrow-width) / -2) 0 calc(var(--arrow-width) / 2) var(--shadow-color));
}

.timeline li div {
    transform: translate3d(200px, 0, 0);
}

.timeline li.biking::before {
    content   : '\f84a';
    font-size : 2rem;
    background: blue;
}

.timeline li.cars::before {
    content   : '\f1b9';
    background: green;
}

.timeline li.footing::before {
    content   : '\f70c';
    font-size : 2.5rem;
    background: orange;
}

@media (min-width: 800px) {

    .timeline ul::before {
        left: calc(50% - var(--trait-width) / 2);
    }

    .timeline li div {
        margin-left : auto;
        margin-right: 15px;
        width       : calc(50% - calc(var(--puce-width) + (var(--arrow-width) / 2)));
        padding     : 15px;
    }

    .timeline li::before {
        left: calc(100% / 2 - var(--puce-width) / 2);
    }

    .timeline li:nth-child(even) div {
        margin-left : 15px;
        margin-right: auto;
        transform   : translate3d(-200px, 0, 0);
    }

    .timeline li:nth-child(even) div::before {
        left          : 100%;
        border-width  : calc(var(--arrow-width) / 2) 0 calc(var(--arrow-width) / 2) var(--arrow-width);
        border-color  : transparent transparent transparent var(--elem-bg);
        -webkit-filter: drop-shadow(calc(var(--arrow-width) / 2) 0 calc(var(--arrow-width) / 2) var(--shadow-color));
        filter        : drop-shadow(calc(var(--arrow-width) / 2) 0 calc(var(--arrow-width) / 2) var(--shadow-color));
    }
}

.timeline li.in-view div {
    transform: none;
    opacity  : 1;
}

/* MENU DES GALERIES */

/*


#gal_menu ul::before {
    content   : '';
    position  : absolute;
    width     : var(--trait-width);
    height    : 100%;
    top       : 0;
    left      : calc(var(--puce-width) / 2 - var(--trait-width) / 2);
    background: var(--trait-color);
}

#gal_menu li {
    list-style-type: none;
    position       : relative;
    width          : 100%;
    display        : flex;
    margin         : 0 auto;
}

#gal_menu li div {
    margin-left  : auto;
    margin-right : 15px;
    bottom       : 0;
    width        : calc(100% - (var(--puce-width) + var(--arrow-width) * 2.5) );
    padding      : 15px;
   transition   : all 0.5s ease-in-out;
}

#gal_menu li div::before {
    content       : "";
    position      : absolute;
    width         : 0;
    height        : 0;
    border-style  : solid;
   border-color  : transparent var(--elem-bg) transparent transparent;
}

  */

#gal_menu {
    width       : min(900px, 100%);
    margin      : 0 auto;
    
    --defaut-puce-bg: rgb(29, 57, 96);
    --left_space: clamp(3rem, 2.33rem + 3.33vw, 4rem);
}

#gal_menu h2 {
    font-size: clamp(1.25rem, 0.75rem + 2.5vw, 2rem);
}

#gal_menu a {
    text-decoration: none;
    color: grey;
}

#gal_menu ul {
    position: relative;
    padding : 0;
}

#gal_menu ul::before {
    content   : '';
    position  : absolute;
    left      : 1rem;
    top       : 0;
    width     : 2px;
    height    : 100%;
    background: gray;
}

#gal_menu ul li {
    position    : relative;
    padding-left: var(--left_space);
    margin-block: 1.5rem;
}

#gal_menu ul li::before {
    content      : '\f21c';
    position     : absolute;
    left         : 0;
    top          : 50%;
    font-family  : "Font Awesome 6 Pro";
    font-size    : 1rem;
    font-weight  : 700;
    line-height  : 1;
    color        : #fff;
    display      : grid;
    place-content: center;
    background   : var(--defaut-puce-bg);
    width        : 2rem;
    aspect-ratio : 1/1;
    border-radius: 50%;
    transform    : translateY(-50%);
    z-index      : 2;
}

#gal_menu ul li::after {
    content   : '';
    position  : absolute;
    left      : 0;
    top       : 50%;
    background: gray;
    width     : calc(var(--left_space) - .4rem);
    height    : 2px;
    transform : translateY(-50%);
    z-index   : 1;
}


#gal_menu ul li a:hover .char {
    animation      : mumuse 0.1s linear both;
    animation-delay: calc(0.03s * var(--char-index));
}

.retour {
    text-align: center;
}
.retour a {
    text-decoration: none;
    color: rgb(41, 65, 121) ;
}
.retour a:hover .char{
    text-decoration: none;
    animation: mumuse 0.1s linear both;
    animation-delay: calc(0.03s * var(--char-index));
}

@keyframes mumuse {
    from {
        opacity: 0.5;
        color  : gray;
    }
}