/* ************** */
/* CSS accueil / index */
/* ************** ************** ************** ************** */

/* Style text */
@import "text.css";

body {
    font-size: 1.2em;
    line-height: 1.6;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 400;
    min-width: 300px;
}

/* ************** */
/* CSS accueil body*/
/* ************** */

body.accueil {
    background: #9CBDE2 url(../img/Brouillard.jpg) no-repeat;
    background-size: 1100px;
}

/* ************** */
/* CSS logo + titre index */
/* ************** */

/* ensemble */
.titre-ensemble {

}

/* logo */
.accueil header div.logo-ensemble {
    width: 50%;
    padding: 0 0;
    margin: 10px 10px;
    position: relative;
}

.accueil header div .logo-kanji {
    margin: 10% 10%;
    width: 10%;
    top: 1%;
    left: 0;
}

.accueil header div .logo-combat {
    position: absolute;
    margin: 5% 0;
    width: 38%;
    top: 5%;
    left: 30%;
    z-index: 1;
}

.accueil header div .logo-solei {
    margin: 5% 0;
    width: 28%;
    position: absolute;
    top: 10%;
    left: 38%;
}

/* titre */
.accueil .titre-entete {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 50%;
    transform: translate(0, -50%);
    color: black;
}

/* ************** */
/* CSS accueil menu */
/* ************** */
.accueil header {
    max-width: 800px;
    margin: 0 auto;
}

.accueil header a {
    color: #003268;
    font-weight: 600;
    text-decoration: none;
}

.accueil header ul.menu-liste {
    margin: 20px 10% 0 5%;
    list-style-type: none;
    padding: 0;
}

.accueil header ul.menu-liste li {
    width: 100%;
    height: 2.8em;
    margin: 2.5% 0;
    background: rgba(230, 220, 243, 0.33);
    border: 3px solid #9CBDE2;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.accueil header ul.menu-liste div {
    padding: 0.8rem 0 0 0.8rem;
}

.accueil header ul.menu-liste span {
    font-size: 1.2rem;
}

/* régler les icons de la liste du menu */
.accueil header ul.menu-liste svg {
    margin: -0.4rem 1.2rem 0 0;
    width: 1.2rem;
    fill: black;
    float: right;
}

.accueil header ul.menu-liste .yoko-geri {
    margin: -0.4rem 1.2rem 0 0;
    width: 1.5rem;
}

.accueil header ul.menu-liste .giakusuki {
    margin: -0.4rem 1.2rem 0 0;
    width: 1.8rem;
}

.accueil header ul.menu-liste .shoto-uke {
    margin: -0.5rem 1.2rem 0 0;
    width: 1.4rem;
}

.accueil header ul.menu-liste .gedan-barai {
    margin: -0.4rem 1.2rem 0 0;
    width: 1.4rem;
}

.accueil header ul.menu-liste .suki {
    margin: -0.4rem 1.2rem 0 0;
    width: 1rem;
}

/* ************** */
/* CSS accueil main */
/* ************** */

body.accueil main {
    padding: 30px 20px 60px 20px;
    min-height: 500px;
    background: linear-gradient(transparent, #DFD6DC, #DFD6DC, #9CBDE2, #9CBDE2, #9CBDE2, #9CBDE2, #9CBDE2, #87A881, #87A881, #9CBDE2, transparent);
    color: black;
}

body.accueil main .sentrage {
    max-width: 800px;
    margin: 0 auto;
}

:root {
    --hauteur: 770px;
}

/* à alignéer yu fond */
body.accueil main div .tour-image {
    padding: 0 0 0 0;
    width: 300px;
    height: var(--hauteur);
    float: right;
    shape-outside: polygon(300px calc(var(--hauteur) - 370px), 300px var(--hauteur), 0 var(--hauteur), 0 calc(var(--hauteur) - 60px), 35px calc(var(--hauteur) - 80px), 39px calc(var(--hauteur) - 140px), 141px calc(var(--hauteur) - 210px), 156px calc(var(--hauteur) - 290px), 180px calc(var(--hauteur) - 340px), 225px calc(var(--hauteur) - 370px));
}

/* ************** */
/* CSS accueil footer */
/* ************** */

body.accueil .pseudofooter{
    position: relative;
    margin: 0 0 0 0;
    height: 0;
}

body.accueil .pseudofooter img {
    position: absolute;
    top: calc(var(--hauteur) - 380px);
    right: 2px;
    width: 300px;
}

body.accueil .pseudofooter a.verlehaut {
    position: absolute;
    top: calc(var(--hauteur) - 120px);
    right: 20px;
    width: 50px;
    fill: #425B79;
}