/* ************** */
/* CSS global     */
/* ************** ************** ************** ************** */

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

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

.maximg, .maximg img {
    max-width: 100%;
    max-height: 100%;
}

a {
    font-family: 'Castoro', sans-serif;
    font-weight: 100;
    color: #9CBDE2;
    text-decoration: none;
}

h1 {
    font-family: 'Castoro', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    margin: 5% 0 10% 0;
}

h2 {
    font-family: 'Castoro', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 5%;
}

.center {
    text-align: center;
}

body .maxlarge{
    max-width: 800px;
    margin: 0 auto;
}

sup {
    font-size: 0.6em;
    vertical-align: super;
}

/* ************** */
/* CSS header */
/* ************** */

header .menu {
    width: 200px;
    --centrage: calc(50% - 100px); /* créer une variable pour pouvoir centrer le menu */
    display: inline-block;
    margin: 0 var(--centrage) 0 var(--centrage);
    color: #9CBDE2;
}

header .bouton-menu {
    position: relative; /* mettre en relative pour pouvoire maitre les trapèse en absolut */
    padding: 0 10px 10px 10px;
    text-align: center;
}

header .menu .menu-texte {
    position: absolute;
    margin: 0 0;
    width: 80px;
    height: 25px;
    left: 60px;
    z-index: 4;
}

header .trapese { /* créer un trapèse comme menu, la div est sous le menu et c'est la bordure du haut qui donne cet effet */
    position: absolute;
    top: -20px;
    height: 0;
    width: 120px;
    border-top: 60px solid RGB(0, 0, 0); /* hauteur et couleur de la bordure */
    border-left: 30px solid transparent; /* de combien la bordure est plus large en haut*/
    border-right: 30px solid transparent;
    z-index: 3; /* placer le trapèse derrière le texte */
}

header .trapese2 { /* créer un trapèse un peut plus grand pour faire la l'effet de la bordure bleu*/
    position: absolute;
    top: -20px;
    left: 6px;
    height: 0;
    width: 128px;
    border-top: 64px solid RGB(0, 0, 255);
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    z-index: 2;
}

header .scroll-menu {
    width: 175px;
    display: none;
    text-align: center;
}

header .scroll-menu ul {
    padding: 0;
    margin: 5px 0;
}

header .scroll-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 35px;
}

header .scroll-menu ul a {
    padding: 0 20px;
}

header .menu:hover .scroll-menu {
    display: inline;
    position: absolute;
    top: -60px;
    background-color: black;
    padding: 110px 10px 0 10px;
    border: 4px solid RGB(0, 0, 255);
    z-index: 1;
}

/* ************** */
/* CSS main */
/* ************** */
main .titre {
    position: relative;
    height: 65px;
    padding: 10px 0 0 0;
    width: 90%;
    margin: 0 auto 15px auto;
    border: #ffd332 solid;
    border-width: 0 0 5px 0;
    z-index: -1;
}

main .titre h1 {
    margin: 20px 0 0 0;
    z-index: -1;
}

main .titre svg {
    position: absolute;
    z-index: -1;
}

main h2 {
    margin: 20px 0 5px 0;
}

main {
    margin: 40px 0 0 0;
    width: 100%;
}

main .bordure {
    width: 90%;
    margin: 0 5%;
    padding: 0 0;
}

/* ************** */
/* CSS footer commun */
/* ************** */

footer {
    margin: 0 0;
    padding: 0 20px 20px 0;
    height: 80px;
}

footer .verlehaut {
    width: 50px;
    fill: #9CBDE2;
    float: right;
}

/* ************** ************** ************** ************** */
/* CSS Spécificité */
/* ************** */

.specifite .titre svg {
    max-width: 2.6em;
    fill: #ffc000;
    top: 5px;
    right: 1px;
}

.specifite .parag-icon {
    position: relative;
}

.specifite .with-abc p:nth-of-type(1) {
    position: absolute;
    left: 0;
    width: 30px;
    margin: 0;
}

.specifite .with-abc p:nth-of-type(2) {
    margin-left: 30px;
    margin-right: 0;
}

.specifite .with-line p:nth-of-type(1) {
    position: absolute;
    left: 30px;
    width: 30px;
    margin: 0;
}

.specifite .with-line p:nth-of-type(2) {
    margin-left: 60px;
    margin-right: 0;
}

/* ************** ************** ************** ************** */
/* CSS Philosophie */
/* ************** */

.philosophie .titre svg {
    max-width: 2.3em;
    fill: #ffc000;
    top: 5px;
    right: 1px;
}

.philosophie main .funakoshi {
    width: 90%;
    margin: 5px auto;
}

.philosophie main .txt-funakoshi {
    font-size: 2rem;
    color: #FFC000;
}

.philosophie .dicton-philo {
    position: relative;
}

.philosophie .dicton-philo p:nth-of-type(1) {
    position: absolute;
    left: 10px;
    width: 20px;
    margin: 0;
}

.philosophie .dicton-philo p:nth-of-type(2) {
    margin-left: 30px;
    margin-right: 0;
}

/* ************** ************** ************** ************** */
/* CSS Techniques */
/* ************** */

.technique .titre svg {
    max-width: 3em;
    fill: #ffc000;
    top: 5px;
    right: 1px;
}

.technique main .img-2par-l {
    width: 100%;
    position: relative;
    z-index: -1;
}

.technique main .img-2par-l .technique1 {
    position: relative;
    background: url("../img/Karate-arme.png");
    background-size: cover;
    background-position: top 0 left 50%;
    display: inline-block;
    width: 50%;
    height: 45vw;
    max-height: 400px;
}

.technique main .img-2par-l .technique2 {
    position: relative;
    background: url("../img/self-defense.jpg");
    background-size: cover;
    background-position: center;
    display: inline-block;
    width: 50%;
    height: 45vw;
    max-height: 400px;
}

/* liste des point de contact */
.technique main .point-contact li {
    position: relative;
}

.technique main .point-contact .img{
    width: 100%;
    max-height: 280px;
    background-color: #FFFFFF;
    text-align: center;
}

.technique main .point-contact img{
    max-width: 200px;
    max-height: 200px;
}

.technique main .point-contact button {
    border: none;
    background: none;
    color: #9CBDE2
}

/* explication général des technique ******** ******** ******** */
.technique main .exemple-technique img {
    width: 85vw;
    max-width: 650px;
    height: 45vw;
    max-height: 300px;
    padding: 0 0;
    margin: 0 0;
}

.technique main .exemple-technique {
    display: block;
    background-color: #FFFFFF;
    color: black;
    text-align: center;
    max-width: 720px;
    width: 85vw;
    max-height: 335px;
    height: calc(45vw + 35px);
}

/* table des katas ******** ******** ******** ******** ******** */
.technique main .icon-info {
    width: 2rem;
    fill: white;
    margin: 0 10px auto 0;
}

.technique main .table-info {
    position: relative;
    padding: 10px 0 2px 0;
}

.technique main .table-info .info-tactile {
    display: none;
}

.technique main .table-kata {
    position: relative;
    margin: 5px 0 20px 5%;
    padding: 0 0 0 0;
    width: calc(95% - 5px);
    overflow: auto;
}

.technique main .table-kata .txt-success {
    position: absolute;
    z-index: 1;
    color: white;
    background-color: black;
    width: 220px;
    top: 100px;
    left: 800px;
    font-size: 1.4em;
    padding: 25px 20px 10px 5px;
}

.technique main table {
    background-color: #FFFFFF;
    border-collapse: collapse;
    border: 5px solid #002aff;
    color: black;
    width: 970px;
    margin: 0 5% 0 0;
    padding: 0 5% 0 0;
}

.technique main table th,
.technique main table td {
    position: relative;
    height: 50px;
    min-width: 85px;
    max-width: 130px;
}

.technique main table .icon-play {
    position: absolute;
    width: 20px;
    bottom: 10px;
    right: 10px;
    fill: red;
}

.technique main table .parent-info{
    position: relative;
}

.technique main table .drop-titre{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 20%;
    left: 10%;
    background-color: rgb(255, 183, 123);
    font-size: 0.8rem;
    color: black;
    padding: 0 4px;
    white-space: nowrap;
    transition: opacity 0.25s ease-in-out;
}

.technique main table .parent-info:hover .drop-titre{
    opacity: 1;
    visibility: visible;
    transition-delay: 0.5s;
    z-index: 1;
}

.technique main table a {
    display:block;
    height: 50px;
    width: 90px;
    padding: 10px 10px;
    margin: 0 0;
}

.technique main table .bleu a, .maron a, .noir a {
    color: #FFFFFF;
}

.technique main table .noir, .noir a {
    background-color: black;
    color: #FFFFFF;
}

.technique main table .ecartplus a{
    padding: 0;
    margin: 0;
}

.technique main table .ecartplus a{
    color: #000000;
    pointer-events: none;
    text-decoration: none;
    width: 130px;
}

.technique main table .blanc a, .jaune a, .orange a, .vert a {
    color: black;
}

.technique main table .jaune {
    background-color: #ffdd00;
}

.technique main table .orange {
    background-color: #ff6f00;
}

.technique main table .vert {
    background-color: #006200;
}

.technique main table .bleu {
    background-color: #0800ff;
    color: #FFFFFF;
}

.technique main table .maron {
    background-color: #692e0f;
    color: #FFFFFF;
}

/* ************** ************** ************** ************** */
/* matériel */
/* ************** */

.materiel .titre svg {
    max-width: 2.2em;
    fill: #ffc000;
    top: 4px;
    right: 1px;
}

.materiel main .img-2par-l {
    width: 90%;
    position: relative;
    z-index: -1;
    background-color: #FFFFFF;
    padding: 0 0;
    margin: 0 5%;
}

.materiel main .img-2par-l .materiel1 {
    position: relative;
    background: url("../img/GiKarate.jpg") no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 50%;
    height: 25vw;
}

.materiel main .img-2par-l .materiel2 {
    position: relative;
    background: url("../img/Cinture.jpg") no-repeat  center;
    background-size: contain;
    display: inline-block;
    width: 50%;
    height: 25vw;
}

/* ************** ************** ************** ************** */
/* athlete */
/* ************** */

.athlete .titre svg {
    max-width: 2.4em;
    fill: #ffc000;
    top: 5px;
    right: 1px;
}

.athlete h2{
    margin: 2% 5%;
}

.athlete main ul {
    width: 85%;
    margin: 0 5% 0 10%;
}
/* ************** ************** ************** ************** */
/* Santé */
/* ************** */

.sante .titre svg {
    max-width: 1.8em;
    fill: #ffc000;
    top: 5px;
    right: 1px;
}

.sante main img{
    width: 90%;
    padding: 0;
    margin: 5%;
}