*{padding:0;margin:0;border:0;box-sizing:border-box;font-family:inherit}

body {
    font-family:    'Roboto',arial,sans-serif;
    color:          #000;
    background:     var(--textblue);
    font-size:      4vw;

    --textblue:     #013B6F;
    --textdarkblue: #0E2835;
    --textyellow:   #F1EF3B;
}

h1 { font-size: 2.2em }
h2 { font-size: 2.0em }
h3 { font-size: 1.8em }
h4 { font-size: 1.6em }
h5 { font-size: 1.4em }
h6 { font-size: 1.2em }



section {
    display:        flex;
    flex-direction: column;
    flex-wrap:      nowrap;
    align-items:    center;
    justify-content: center;
    padding:        1.5em 1em 1em 1em;
    width:          100%;
    height:         100%;
    color:          #fff;
    text-align:     center;
    background-repeat:  no-repeat;
    background-position: center;
    background-size:cover;
}


h1,h2,h3 {
    text-shadow:    0 0 .15em rgba(0,0,0,.7);
}
section h1 {

}
section h2 {
    margin-bottom:  1.5em;
    text-align:     center;
    font-weight:    normal;
}
section h3 {

}


a em, .hide { display: none }

a.button {
    display:        inline-block;
    padding:        .9em 1.5em;
    color:          var(--textblue);
    width:          auto;
    text-decoration:none;
    text-transform: uppercase;
    font-weight:    bolder;
    background:     #fff;
    border-radius:  2em;
    box-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}

.main__wrapper {
    width:      100%;
}


#main {
    background: #fff;
}



/*********************/
/*** HEADER & MENU ***/
/*********************/

#header {
    position:       fixed;
    z-index:        2;
    top:            0;
    left:           0;
    width:          100%;
    text-align:     right;
    backdrop-filter: blur(.5em);
    background:     rgba(0,0,0,.2);
}
#header ol {
    display:        flex;
    flex-direction: column;
    flex-wrap:      nowrap;
    justify-content: center;
    gap:            1.5em;
    height:         100%;
}
#header ol li {
    list-style:     none;
    padding:        .5em 0;
    animation:      menuIn 200ms cubic-bezier(0,.4,.6,1);
}
#header ol li:nth-child(2) { animation-duration: 250ms }
#header ol li:nth-child(3) { animation-duration: 300ms }
#header ol li:nth-child(4) { animation-duration: 350ms }
#header ol li:nth-child(5) { animation-duration: 400ms }

#header ol li a {
    display:        block;
    padding:        .5em;
    font-size:      1.25em;
    text-transform: uppercase;
}
#header ol li:last-child a {
    display:        inline-block;
    padding:        1em 2em;
    width:          auto;
    color:          var(--textblue);
    background:     #fff;
    border-radius:  2em;
}
#header__menu {
    display:        flex;
    flex-direction: column;
    text-align:     center;
}
#header > button {
    display:        inline-flex;
    color:          #fff;
    padding:        .6em;
    font-size:      1.6em;
    background:     transparent;
}
#header > button::after {
    content:        '';
    display:        inline-block;
    margin-left:    .5em;
    width:          1.1em;
    height:         1.1em;
    background-position:    top left;
    background-repeat:      repeat-y;
    background-image:       linear-gradient(180deg, #fff 0%,#fff 40%,transparent 40%, transparent 100%);
    background-size:        100% .44em;
}
#header__menu ol {

}
#header__menu ol a {
    color:          #fff;
    text-decoration: none;
}








/******************/
/*** INTRO ********/
/******************/

#intro {
    min-height:     80vh;
    padding:        3em 0 1em 0;
    background-image:   url(./images/ZmV395PJMXg-600.jpg);
}
#intro h1 {
    font-size:      2.4em;
    padding:        .6em;
}
#intro h3 {
    font-size:      1.2em;
    padding:        0 1em 1em 1em;
    font-weight:    normal;
}
#intro a {
    display:        inline-block;
    margin-top:     2em;
    font-size:      1.2em;
    background:     #fff;
    box-shadow:    .1em .1em .4em rgba(0,0,0,.3);
    opacity:        .9;
}
#intro a:hover,#intro a:active {
    opacity:        1;
    transform:      scale(1.02);
}







/******************/
/*** CLUB *********/
/******************/

#club {
    text-align:         left;
    background-position: top center;
    background-image:   url(./images/ukhdhgqs-600.jpg);
}

#club__keypoints {
    text-align:     center;
}
#club__keypoints p {
    display:        inline-block;
    vertical-align: top;
    margin-bottom:  .5em;
    width:          32%;
    height:         10em;
    font-size:      .9em;
}
#club__keypoints p::before {
    content:        '';
    display:        block;
    width:          100%;
    height:         5em;
    background-position: center;
    background-repeat:  no-repeat;
    background-size:    auto 80%;
}
#club__keypoints p:nth-child(1)::before { background-image:   url(./images/club-terrain.png); }
#club__keypoints p:nth-child(2)::before { background-image:   url(./images/club-adherents.png); }
#club__keypoints p:nth-child(3)::before { background-image:   url(./images/club-repartition.png); }
#club__keypoints p:nth-child(4)::before { background-image:   url(./images/club-pingpong.png); }
#club__keypoints p:nth-child(5)::before { background-image:   url(./images/club-raclette.png); }


#club__gallery,
#club__board {
    display:        flex;
    width:          100%;
    flex-wrap:      wrap;
    flex-direction: row;
    margin:         2em 0;
    align-content:  flex-start;
    justify-content: space-between;
}

#club__gallery--wrapper p {
    line-height:    1.3em;
    padding:        .5em 0;
    text-shadow:    0 0 .3em #000;
}

#club__gallery a,
#club__board a {
    display:        inline-block;
    vertical-align: top;
    margin-bottom:  .5em;
    width:          31%;
    aspect-ratio:   1;
    text-align:     center;
    text-decoration: none;
    color:          #fff;
}
#club__board a {
    width:          47%;
    margin-top:     2em;
}
#club__board a strong {
    display:        block;
}
#club__gallery a img,
#club__board a img {
    display:        block;
    margin-bottom:  .5em;
    width:          100%;
    box-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}




/******************/
/*** COURS ********/
/******************/

#cours {
    background-position: top center;
    background-image:   url(./images/iahdksqdq-600.jpg);
}

#cours a.button {
    color:              var(--textdarkblue);
    background-color:   var(--textyellow);
}
#cours__posters {
    display:        flex;
    width:          100%;
    flex-wrap:      wrap;
    flex-direction: row;
    margin:         2em 0;
    align-content:  flex-start;
    justify-content: space-between;
}
#cours__posters a {
    display:        inline-block;
    vertical-align: top;
    margin-top:     2em;
    width:          47%;
    height:         auto;
    text-align:     center;
    text-decoration: none;
    color:          #fff;
}
#cours__posters a strong {
    text-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}
#cours__posters a img {
    display:        inline-block;
    margin-bottom:  .5em;
    width:          90%;
    box-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}






/******************/
/*** TOURNOIS *****/
/******************/

#tournois {
    padding-bottom:  3em;
    background:     #a0bb32 url(./images/jkdqsldqdz.png) no-repeat bottom right;
    background-size: 120% auto;
}
#tournois h2,
#tournois p {
    text-align:     left;
    text-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}
#tournois p {
    line-height:    1.3em;
    padding-bottom:  2em;
    text-shadow:    0 0 .3em #000;
}
#tournois p a {
    color: #fff!important;
}
#tournois a.button {
    display:        inline-block;
    margin-bottom:  3em;
    text-align:     center;
    width:          90%;
}
#tournois img {
    width:          90%;
    box-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}







/******************/
/*** CONTACT ******/
/******************/

#contact {
    padding-bottom: 3em;
}
#contact h2 {
    color:      var(--textblue);
    text-shadow: 0 0 .2em rgba(0,0,0,.2);
}
#contact form {
    width:      100%;
    text-align: left;
}
#contact form p {
    padding:    .5em 0 .8em 0;
}
#contact form label {
    display:        block;
    color:          #000;
    width:          100%;
    padding-bottom: .2em;
}
#contact form input,
#contact form textarea {
    padding:        .65em;
    font-family:    inherit;
    font-size:      inherit;
    width:          100%;
    color:          #000;
    background:     #E8E8E8;
    border-bottom:  .2em solid #006BCB;
}
#contact form input[type="submit"]{
    padding:        1em;
    color:          var(--textdarkblue);
    font-weight:    bolder;
    font-size:      1em;
    background:     #fff;
    border-radius:  2em;
    border:         0;
    box-shadow:     .1em .1em .4em rgba(0,0,0,.3);
}
#contact form input[disabled] {
    opacity:        .4;
}

#contact figure {
    color:          #000;
    text-align:     left;
    margin-top:     2em;
}
#contact figure,
#contact figure img {
    width:          100%;
}
#contact figcaption {
    padding-top:    1em;
}

#contact small {
    color:          #aaa;
}







/******************/
/*** SPONSORS ******/
/******************/

#sponsors {
    text-align:     left;
    color:          #000;
    padding-bottom: 3em;
}

#sponsors #sponsors_logos {
    display:        flex;
    flex-wrap:      wrap;
    flex-direction: row;
    justify-content: space-between;
    gap:            1vw;
    margin-top:     1em;
}
#sponsors #sponsors_logos a {
    width:          44vw;
}
#sponsors #sponsors_logos a img {
    display:        block;
    width:          100%;
}



/******************/
/*** FOOTER *******/
/******************/


#footer {
    padding:        3em 0;
    text-align:     center;
    color:          #eee;
    background:     #252525;
}
#footer div {
    padding:        .5em 0;
}
#footer a {
    color:          #fff;
    text-decoration: none;
}
#footer address {
    font-style:     normal;
}
#footer .footer-fb,
#footer .footer-ig {
    display:        inline-block;
    vertical-align: top;
    margin:         .5em;
    width:          2.5em;
    height:         2.5em;
    background-position: center;
    background-repeat:  no-repeat;
    background-size:    auto 90%;
}
#footer .footer-fb {
    background-image: url(./images/icon-facebook.svg);
}
#footer .footer-ig {
    background-image: url(./images/icon-instagram.svg);
}




#prompt {
    position:       fixed;
    z-index:        9;
    top:            0;
    left:           0;
    padding:        10vh 5vw;
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          100%;
    height:         100%;
    background:     rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}
#prompt.hide {
    display:        none;
}
#prompt div {
    position:       relative;
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
    max-width:      35em;
    height:         20em;
    background:     #fff;
    border-radius: 1em;
    overflow:       hidden;
    box-shadow:     0 0 .8em #000;
}
#prompt #prompt-close {
    position:       absolute;
    z-index:        2;
    top:            .1em;
    right:          .1em;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:          1em;
    height:         1em;
    font-size:      2em;
    color:          #fff;
    background:     #000;
    border-radius:  1em;
    transform:      rotate(45deg);
    cursor:         pointer;
}
#prompt div figure, #prompt div p {
    width:          50%;
}
#prompt div figure img {
    display:        block;
    width:          100%;
    height:         100%;
    object-fit:     scale-down;
    background:     #ddd;
}
#prompt div p {
    padding:        2em .6em .6em .6em;
    font-size:      1.2em;
}
#prompt div p a {
    display:        inline;
}
#prompt div p a.btn {
    display: inline-block;
    padding: .4em .8em;
    text-align: center;
    width: 100%;
    color: #fff;
    background: #333;
    border-radius: 2em;
    text-decoration: none;
}



@media (orientation:landscape) {
    #intro      { background-image: url(./images/ZmV395PJMXg-1600.jpg) }
    #club       { background-image: url(./images/ukhdhgqs-1600.jpg) }
    #cours      { background-image: url(./images/iahdksqdq-1600.jpg) }
}
@media (max-width: 40rem){
    #header__menu {
        display:    none;
    }
    #header.show #header__menu {
        display:    initial;
    }

    #header.show {
        position:   fixed;
        z-index:    10;
        top:        0;
        left:       0;
        width:      100vw;
        height:     100vh;
        color:      #fff;
        background: var(--textblue);
    }
    #header.show > button {
        display:    none;
    }

}

@media (min-width: 40rem){
    body {
        font-size:      1.05em;
    }

    section {
        padding-top:    3em;
        padding-bottom: 3em;
    }

    #header > button,
    #intro a {
        display:        none;
    }
    #header__menu {
        display:        flex;
    }
    #header ol {
        gap:            1em;
        padding:        0 .5em;
        justify-content: flex-end;
        flex-direction: row;
        align-items:    center;
    }
    #header ol li {
        padding:        .5em 0;
        animation:      none;
    }
    #header ol li a {
        font-size:      .8em;
    }
    #header ol li:last-child a {
        padding:        1em;
    }


    #intro {
        min-height:     90vh;
        background-position: top center;
    }
    #intro h1 { font-size: 3em }
    #intro h3 { font-size: 1.4em }


    #club {
        padding-bottom: 4.5em;
    }
    #club__keypoints {
        display:    flex;
    }
    #club__keypoints p {
        width:      20%;
        margin-bottom:  2em;
    }
    #club__gallery--wrapper {
        display:    flex;
        flex-direction: column;
        gap:        1.5em;
        align-items:    center;
    }
    #club__gallery--wrapper div {
        margin:     0;
    }
    #club__gallery {
        align-content: center;
        gap:        1em;
    }
    #club__gallery a,
    #club__gallery a img {
        margin:     0;
    }
    #club__gallery a {
        width:      31%;
        aspect-ratio: 1;
    }

    #club__board a {
        width:      22%;
    }

    #cours__posters a {
        width:      22%;
    }


    #tournois {
        padding:        4em 1.5em;
        background-size: 60% auto;
    }
    #tournois .main__wrapper {
        display:        flex;
        flex-direction: row-reverse;
        gap:            2em;
    }
    #tournois h2 {
        margin-bottom:  .5em;
    }
    #tournois a.button {
        width:          auto;
    }
    #tournois__desc {
        text-align:     left;
    }
    #tournois__desc {
        width:          60%;
    }
    #tournois__poster {
        width:          40%;
    }
    #tournois img {
        width:          100%;
    }


    #contact {
        padding-bottom:  4em;
    }
    #contact .main__wrapper {
        display:        flex;
        flex-direction: row-reverse;
        gap:            2em;
    }
    #contact form,
    #contact figure {
        width:          30%;
    }
    #contact form {
        margin-left:    10%;
        width:          60%;
    }

    #sponsors #sponsors_logos a {
        width:          25vw;
    }

    #footer {
        display:        flex;
        flex-direction: row;
    }
    #footer div {
        padding:        1em;
        width:          50%;
        text-align:     left;
    }
    #footer div:nth-child(2) {
        text-align:     right;
    }

}

@media (min-width: 60rem){
    section h2 { font-size: 3em }

    #header ol {
        gap:        1.5em;
        padding:    0 1em;
    }
    #header ol li {
        padding:    1em 0;
    }

    #intro h1 { font-size: 4em }
    #intro h3 { font-size: 2em }


    #club__gallery a {
        width:      15%;
    }
    #club__board a {
        width:      22%;
    }
    #tournois__desc {
        width:          70%;
    }
    #tournois__poster {
        width:          28%;
        margin-right:   2%;
    }

    #sponsors #sponsors_logos a {
        width:          26vw;
    }
}

@media (min-width: 70rem){
    .main__wrapper {
        width:      60em;
    }
    #intro {
        padding:    0;
        min-height: 50em;
    }

    #sponsors #sponsors_logos {
        gap:        0;
    }
    #sponsors #sponsors_logos a {
        width:      9.5em;
    }

    #footer {
        justify-content: center;
    }
    #footer div {
        padding:    0;
        width:      30em;
    }
}


@keyframes menuIn {
    0%   { opacity: 0; transform: translate3d(0,100%,0) }
    100% { opacity: 1; transform: translate3d(0,0,0) }
}