/*---------------------------------------reset*/

html {
    scroll-behavior: smooth;
}
html,
body,
header,
main,
footer {
    width: 100vw;
    margin: 0;
    padding: 0;
}
section,
article,
figure,
div {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul,
li,
a,
i {
    list-style: none;
    padding: 0;
    text-decoration: none;
    text-transform: none;
}
img {
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
dd,
dl,
dt {
    margin: 0;
    padding: 0;
}
a,
a:active {
    color: #000
}

/*---------------------------------------style généraux*/

body {
    background-color: white;
    font-size: 20px;
    line-height: 25px;
    font-family: 'Lato', sans-serif;
    color: #000;
}

main {
    min-width: 300px;
}

p,
ul,
li,
td {
    color: #000;
}


/*-------polices fonts*/

p {
    font-family: 'Lato', sans-serif;
    text-align: justify;
    line-height: 125%;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/*ici je permet de mettre tous les span dans les p en bold*/
p span {
    font-weight: bold;
}

.lato-bold {
    font-weight: bold;
}

h1,
h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

h3 {
    font-family: 'Merriweather', serif;
    font-weight: 600;
}

.radjhani {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: bold !important;
}

/*-------------------------composants*/
/*-------la nav*/

.nav-container {
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 5%;
    background-color: #ffebbe00;
}

.nav-logo img {
    float: left;
    width: 80px;
}

.nav-container nav {
    width: 100%;
}

.nav-container ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.menu li a {
    display: inline;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 20px;
    color: #000;
}

.nav-container ul li:hover {
    text-decoration: underline;

}

.responsive-hide {
    display: block;
}

.responsive-show {
    display: none;
}

.text-center {
    text-align: center;
    margin: 0;
}

.img-w-80 {
    width: 80%;
    padding: 0 10px 10px 0;
}

/* -------------------------les box*/

/* l'entête */

/*cette section s'applique à toutes les homes sur les pages*/
.home-section {
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.h1, .home-section h1{
    line-height: 90px;
    font-size: 100px;
}

.h1-span, .home-section > h1 > span {
    font-size: 80px;
}

/*cette classe marche pour la home sur le fichier index*/
.home > h1 {
    text-align: left;
    margin-top: -10%;
    margin-right: 30%;
}

.home > h1 > span {
    margin-right: 100px;
}

/*cette classe marche pour la home sur le fichier contact*/

.contact-h1 {
    font-size: 200px !important;
    margin-left: -10% !important;
}

/*img des background*/

.bc-home {
    background-image: url('../images/bc-home2.jpg');
}

.bc-club {
    background-image: url('../images/bc-sensei-bokken2.jpg');
}

.bc-cours {
    background-image: url('../images/bc-sensei-smile.jpg');
}

.bc-pratique {
    background-image: url('../images/bc-jy-smile.jpg');
}

.bc-pratique-2 {
    background-image: url('../images/bc-pratique-2.png');
}

.bc-pratique-3 {
    background-image: url('../images/bc-pratique-2.png');
}

.bc-contact {
    background-image: url('../images/bc-sensei-bokken2.jpg');
}

.bc-memory {
    background-image: url('../images/bc-memory.jpg');
}

.bc-hata-iai {
    background-image: url('../images/hatakeyama-iai.jpg');
}


/* les box de couleur */

/*ma box porte la couleur, elle fait 100%*/
.color-box {
    width: 100%;
}

/*ma box à la couleur de background*/
.color-box > article {
    width: 90%;
    margin: auto;
    padding: 5% 0;
}

.color-box > article div {
    width: 60%;
}

.color-box > article div div {
    width: 100%;
}

/*je rogne mon image*/
.color-box article figure {
    width: 40%;
    float: right;
    overflow: hidden;
}

.color-box article div h2 {
    font-size: 70px;
    margin: 10% 0 4%
}

.color-box article div h3 {
    font-size: 25px;
    margin-bottom: 6%;
}

.color-box article div p {
    font-size: 20px;
    margin-right: 6%;
    margin-bottom: 6%;
}

.iconetel {
    display: inline-block;
    width: 1em;
    margin-right: 2%;
}

.carte {
    width: 100%;
}



/* -------les befores et ornements*/

.before-noir:before {
    content: url('../images/before-noir.svg');
    padding-right: 30px;
}

.before-blanc:before {
    content: url('../images/before-blanc.svg');
    padding-right: 30px;
}

.puce-rose {
    width: 80%;
    margin-left: 20%;
}

.puce-rose li {
    margin-bottom: 7px;
}

.puce-rose li::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 5px;
    margin-right: 10px;
    padding: 5px;
    background-color: #D84154;
    border-radius: 50%;
}

.rond {
    display: inline-block;
    width: 200px !important;
    height: 200px;
    border-radius: 50%;
    background-color: #FCDCA1;
    z-index: -1;
    margin-bottom: -100px;
}

.next-rond {
    margin-left: 10%;
}

/* -------les grilles*/
.portrait-section {
    width: 80%;
    margin: 0 auto;
}

.portrait-section > h2 {
    font-size: 70px;
    line-height: 120%;
    margin: 10% 0 4%
}

.portrait-section > h3 {
    margin: 5% 0;

}

.sensei-responsive {
    width: 100% !important;
}

.portrait-conteneur {
    margin: 2% 2% 5% 2%;
    width: 46%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.portrait-conteneur > img {
    width: 40%;
}

.portrait-conteneur > div {
    margin-left: 5%;
    display: flex;
    flex-direction: column;
}

.portrait-conteneur div p {
    text-align: left;
    hyphens: inherit;
}

.portrait-conteneur div h4 {
    font-weight: bold;
    margin: 0 0 5%;
}

/* -------les menus internes*/

/* les figures hover*/

/*--------------les animations css*/

/* -------les bouton*/

.bouton {
    display: inline-block;
    white-space: nowrap;
    color: #fff;
    padding: 20px 40px;
    width: fit-content;
    background-color: #030936;
    margin: 20px 0.5%;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #000;
    -webkit-transition: ease-in-out 0.5s;
    -moz-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s;
}
/* les boutons hover et anim*/

.bouton:hover {
    color:#fff;
    background-color: #000;
    box-shadow: inset 400px 0 0 0 #000;
}

/* -------la liste dropdown*/
.dropdown-list-section {
    width: 100%;
    padding: 2% 0;
}

 .dropdown-list-section > article{
    width: 90%;
    margin: 2% auto;
}

.dropdown-list-section article > img {
    width: 40%;
}

.dropdown-list {
    width: 50%;
    margin-top: 5%;
}

.dropbtn {
    background-color: #A81B2D;
    text-align: left;
    color: #fff;
    width: 100%;
    padding: 7%;
    font-size: 22px;
    line-height: 150%;
    border: none;
    transition: 0.3s;
    transition-timing-function: ease;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: block;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.dropdown-content p, .dropdown-content ul{
    color: #000;
    font-size: 20px;
    padding: 7%;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
    height: auto;
    position: relative;
    overflow: hidden;
    background-color: #f1f1f1;
    min-width: 100%;
    z-index: 1;
}

.racine-panel-shown {
    display: block;
    height: auto;
    position: relative;
    background-color: #f1f1f1;
    min-width: 100%;
    z-index: 1; 
}

.racine-panel-shown p, .racine-panel-shown ul{
    color: #000;
    font-size: 20px;
    padding: 7%;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #D84154;
}

/* -------le menu aiki&image overlay*/

.menu-aiki {
    width: 80%;
    padding: 5%;
    margin: 0 auto;
}

.menu-aiki>div {
    margin-top: -2px;
}

.contenant_overlay {
    position: relative;
    margin: auto;
    overflow: hidden;
}

.contenant_overlay .overlay {
    background: rgba(0,0,0,0.7);
    position: absolute;
    height: 99%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.contenant_overlay:hover .overlay{
    opacity: 1;
}

.overlay>h3, .overlay>p {
    color: white;
    text-align: center;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: normal;
}

/* -------le menu mobile& overlay*/
.menu_mobile {
    display: none;
}

.lines{
    margin-left:5px;
    margin-top:6px;
    flex-shrink: 6}


.dot{
    width:14px;
    height:14px;
    background: #000;
    border-radius:7px;
}

.line{
    height:103px;
    width:2px;
    background: #000;
    margin-left:5.3px;
}

.timeline {
    display: flex;
    flex-direction: row;
    padding: 5%;
    width: 95%;
    height: fit-content;
    margin: auto;
}

.onglets {
    display: flex;
    flex-direction: column;
}

.onglet {
    background: #A81B2D;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 5%;
}

.onglet>h3 {
    color: #fff;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    font-weight: normal;
}

.image_onglet {
    width: 100px;
    margin-right: 5%;
}


/* -------le footer*/

footer {
    background-color: #000;
    width: 100%;
    height: 200px;
    padding: 2% 0;
}

footer div {
    width: 70%;
    margin: auto;
}

footer div nav,
footer div div {
    height: 180px;
    padding: 0 2%;

}

footer div nav {
    width: 30%;
}

footer div div {
    width: 40%;
}

footer div nav ul li a,
footer div div a,
footer div div p {
    color: #fff;
}

footer div nav ul li a:hover,
footer div div a:hover,
footer div div p:hover {
    color: #FFBFBE;
}

footer div div h4,
footer div nav ul h4 {
    font-family: 'Merriweather', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 5% 0 2%;
    color: #D84154;
}

.border-bottom {
    border-bottom: #D84154 1px dotted;
}

/*affichage des choses lors dy chargements*/
/** {transition: all 0.3s ease-in-out;}*/


/*---------------------------------------les dispositions (flex, margin, padding)*/

    /*display*/

    .flex {
        display: flex;
    }

        .inline {
            display: inline;
        }

        .block {
            display: block;
        }

        .inline-block {
            display: inline-block;
        }

        /*les flex*/

        /*-----flex directions*/

        .row {
            flex-direction: row;
        }

        .row-reverse {
            flex-direction: row-reverse;
        }

        .column {
            flex-direction: column;
        }

        .column-reverse {
            flex-direction: column-reverse;
        }

        /*-----wrap*/

        .wrap {
            flex-wrap: wrap;
        }

        .wrap-reverse {
            flex-wrap: wrap-reverse;
        }

        .column-wrap {
            flex-flow: column wrap;
        }

        /*-----flex justify-contents*/

        .justify-end {
            justify-content: end;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .justify-around {
            justify-content: space-around;
        }

        .justify-evently {
            justify-content: space-evenly;
        }

        /*-----flex align-items (justify content horizontale dans la div)*/

        .items-start {
            align-items: flex-start;
        }

        .items-end {
            align-items: flex-end;
        }

        .items-center {
            align-items: center;
        }

        .items-baseline {
            align-items: baseline;
        }

        .items-stretch {
            align-items: stretch;
        }

        /*-----flex align-content (justify content horizontale hors de la div)*/

        .content-start {
            align-content: flex-start;
        }

        .content-end {
            align-content: flex-end;
        }

        .content-center {
            align-content: center;
        }

        .content-stretch {
            align-content: stretch;
        }

        .content-space-between {
            align-content: space-between;
        }

        .content-space-around {
            align-content: space-around;
        }


/*---------------------------------------les couleurs, les fonts, les backgrounds*/

/*-------les couleurs */


/*-background*/

.bc-rouge-sombre {
    background-color: #8B0405;
}

.bc-rouge-clair {
    background-color: #A81B2D
}

.bc-rose {
    background-color: #D84154;
}

.bc-noir {
    background-color: #000;
}

.bc-bleu-marine {
    background-color: #101641;
}

.bc-jaune {
    background-color: #FCDCA1;
}

.bc-gris-clair {
    background-color: #F7F7F7;
}

.bc-jaune-clair {
    background-color: #FFEBBE;
}

/*-couleur font*/

.rouge-sombre {
    color: #8B0405;
}

.rose {
    color: #D84154;
}

.blanc {
    color: #fff;
}

.noir {
    color: #000;
}

.bleu-marine {
    color: #101641;
}




/*-------------------------ajustements*/
.width-100 {
    width: 100%;
}

.width-30-v {
    width: 30vw;
}

.m-left-20 {
    margin: 20px 20%;
}

.m-0-20 {
    margin: 0 2%;
}

.text-15px {
    font-size: 15px;
}

.text-30px {
    font-size: 30px;
    line-height: 0;
    padding: 0;
    margin: 0;
}

.text-left {
    text-align: left;
    hyphens: initial;
}

.margin-0 {
    margin: 0;
}

.margin-5 {
    margin: 5% 0;
}

.margin-10 {
    margin: 10% 0;
}

.m-right-2 {
    margin-right: 2%;
}

.padding-10 {
    padding: 10%;
}

.padding-5 {
    padding: 5%;
}

.padding-2 {
    padding: 2%;
}

.padding-5-10 {
    padding:5% 10%;
}

.ajust-bouton {
    margin: 5px auto;
    text-align: center;
}

.tab {
    font-family: inherit;
    margin-left: 1.8em
}
.icone-100px {
    width: auto;
    height: 60px;
    margin:  0 50px;
}

.icone-40px {
    width: auto;
    height: 50px;
    margin: 10px;
}

.width-300 {
    width: 300px;
    margin-left: 50px;
}

.padding-ajust {
    padding: 40px;
}

.line-125 {
    line-height: 125%;
}


/*---------------------------------------style particulier*/


/*---------------------------------------le responsive*/



/* pour les grands desktops */
@media screen and (max-width: 1140px) {

    body {
        font-size: 18px;
        line-height: 22px;
    }

    /*-------------------------composants*/
    /*-------la nav*/
    /* -------------------------les box*/
    /* l'entête */
    .home-section {
        width: 100%;
        height: auto;
        background-size: cover;
        padding: 20%;
    }


    .home-section > h1 {
        margin-top: -10%;
        margin-right: 10%;
        font-size: 80px;
    }

    .home-section > h1 > span {
        font-size: 60px;
    }


    /* les box de couleur */
    /*je rogne mon image*/
    .color-box article figure {
        width: 50%;
    }


    .color-box article div h2 {
        font-size: 50px;
    }

    .color-box article div h3 {
        font-size: 22px;
    }

    .before-noir:before {
        padding-right: 10px;
    }

    .puce-rose {
        width: 100%;
        margin-left: 0;
    }

    .m-left-20 {
        margin: 20px 0;
    }



}


/* pour les desktop */
@media screen and (max-width: 1085px) {

    /*-------------------------composants*/
    /*-------la nav*/
    .responsive-show {
        display: flex;
        flex-direction: row-reverse;
    }

    .menu ul {
        display: flex;
        flex-direction: column;
    }

    .menu ul li {
        margin: 1.5em 2em;
    }


    .menu ul li a {
        padding: 1rem 0;
        color: #fff;
    }

    /*--------------le menu burger*/
    .ham {
        position: absolute;
        /* keep the hamburger button above everything */
        z-index: 100;
        top: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
        padding: 2px;
        border: none;
        background: none;
        cursor: pointer;
    }

    .xIcon {
        display: none;
        color: #fff;
    }

    .menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: black;
        transform: translateY(-100%);
        transition: transform 0.2s;
        list-style: none;
        padding-top: 4rem;
        overflow: auto;
        z-index: 100;
    }

    .showMenu {
        transform: translateY(0);
    }

    .menuLink {
        display: inline;
        font-size: 2rem;
        color: white;
        text-decoration: none;
    }

    .menuLink:hover {
        text-decoration: underline;
    }

    /* -------------------------les box*/
    /* l'entête */

    .h1, .home-section > h1 {
        font-size: 60px;
        line-height: 60px;
    }

    .h1-span, .home-section > h1 > span {
        font-size: 50px;
    }

    .h1-span-left {
        margin-left: 0;
    }

    .contact-h1 {
        font-size: 150px !important;
        margin-left: -20% !important;
    }

    /* les box de couleur */
    .color-box-responsive {
        flex-direction: column;
    }

    .color-box > article {
        width: 98%;
        margin: auto;
    }

    .color-box > article div {
        width: 90%;
    }

    /*je rogne mon image*/
    .color-box article div p {
        font-size: 20px;
        margin-bottom: 5%;
    }

    /*je rogne mon image*/
    .color-box article figure {
        width: 98%;
        margin: 10vh 20px;
    }


    .color-box article div h2 {
        font-size: 40px;
    }

    .color-box article div h3 {
        font-size: 20px;
    }

    .before-noir:before {
        padding-right: 10px;
    }

    .double-list-responsive {
        display: flex;
        flex-direction: column;
    }

}

/* pour les tablettes */
@media screen and (max-width: 961px) {

    /* Ajustement page racines */
    .dropdown-list-section > article {
        width: 100%;
        margin: 2% auto;
    }

    .dropdown.padding-ajust {
        padding: 0;
    }


    /* l'entête */
    .home-section {
        padding: 20%;
    }


    .home-section > h1 {
        margin-top: -10%;
        font-size: 50px;
        line-height: 50px;
    }

    .home-section > h1 > span {
        font-size: 40px;
    }

    .contact-h1 {
        font-size: 100px !important;
        margin-left: -20% !important;
    }


    /* les box de couleur */
    /* je mets ma grille de portrait en responsive*/
    .portrait-section > h2 {
        font-size: 35px;
    }

    .portrait-conteneur {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .portrait-conteneur > img {
        width: 100%;
    }

    .portrait-conteneur > div {
        margin-left: 0;
    }

    /* ma color-box*/

    .color-box article div p {
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 20%;
    }

    .portrait-conteneur div h4 {
        margin: 5% 0;
    }

    /* ajustment*/
    .width-30-v {
        width: 50vw;
    }

}

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

    /* Ajustement page racines */
    .dropdown-list-section > article {
        width: 100%;
        margin: 2% auto;
    }

    .dropdown.padding-ajust {
        padding: 0;
    }

    /* l'entête */

    .home-section {
        background-size: contain;
        background-position: left bottom;
    }

    .home-section {
        padding: 20%;
    }


    .home-section > h1 {
        margin-left: -10%;
    }

    .contact-h1 {
        font-size: 80px !important;
        margin-left: 0 !important;
        padding: 20% !important;
    }


    /* mes row responsives, à réutiliser*/
    .row-responsive {
        display: flex;
        flex-direction: column;
    }

    .color-box article div p {
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 5%;
    }

    .row-responsive a,
    .row-responsive p {
        margin: 2% 10%;
    }

    .row-responsive a {
        margin: 0 auto 10%;
    }

    .before-noir:before, .before-blanc:before {
        content: '.';
        font-size: 80px;
        padding-right: 10px;
    }


    /* les textes en mobiles*/

    .color-box article div h2 {
        line-height: 105%;
        margin: 4% 10% 0;
    }

    h3 {
        margin:0 10%;
    }

    li {
        text-align: left;
    }

    /* je mets ma grille de portrait en responsive*/
    .portrait-conteneur {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .img-w-80 {
        width: 80%;
        padding: 10px;
        margin: auto;
    }

    /* ma liste dropdown*/

    .dropdown-list-section article > img {
        display: none;
    }

    .dropdown-list {
        width: 100%;
        margin-top: 5%;
    }

    .dropdown-content p{
        text-align: left;
    }


    /*le menu mobile*/

    .menu_mobile {
        display: block;
    }

    .menu-aiki {
        display: none;
    }

    /* ajustment*/

    .none-580 {
        display: none;
    }

    .width-300 {
        width: 100%;
        margin-left: 0;
        display: flex;
        justify-content: center;
    }

    /*footer*/
    footer {
        height: 500px;
    }

    footer div {
        width: 80%;
        margin: auto;
    }

    footer div nav,
    footer div div {
        width: 100%;
    }

    footer div nav,
    footer div nav ul li,
    footer div div,
    footer div div p {
        text-align: center;
    }

    footer div nav,
    footer div div {
        height: auto;
        padding: 2%;

    }


}

/* pour les mobiles */
@media screen and (max-width: 360px) {

    /* Ajustement page racines */
    .dropdown-list-section > article {
        width: 100%;
        margin: 2% auto;
    }

    .dropdown.padding-ajust {
        padding: 0;
    }


    /* les box de couleur */
    .color-box > article {
        padding: 15% 0 0;
        margin: auto;
    }

    .color-box article div h2 {
        margin: 0 0 6%
    }

    .color-box article div h3 {
        margin-bottom: 6%;
    }

    .rond {
        width: 100px !important;
        height: 100px;
        margin-bottom: -50px;
    }

    /* bouton*/
    .bouton {
        padding: 20px 25px;
    }

}

/** Page Actus **/
.color-box article.actus {
    padding: 2% 1%;
}

.color-box article.actus div {
    width: 100%;
}

.color-box article.actus div h2 {
    margin: 2% 0 3%;
}

.color-box article.actus .puce-rose {
    margin-left: 5%;
    width: 95%;
}

.color-box article.actus p {
    margin-bottom: 10px;
}

.color-box article.actus a {
    text-decoration: underline;
}