/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

:root {
    --beige: #ac9066;
    --violet: #633e74;
    --mauve: #94769c;
    --blanc: #e7e7e7;
    --noir: #1C1D1F; 
    --grisfonce: #343538;
    --violetfonce: #453c47;
    --turquoise: #75f7da;
    --or: #c69a47;

    /*--larg-max: 1366px;*/
  }


  /*[data-parallax=container] {
    height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 300px;
    perspective-origin: center;
  }
  
  [data-parallax=group] {
    height: 700px;
    position: relative;
    transform-style: preserve-3d;
  }
  
  [data-parallax=layer] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform-origin: center;
  }
  
  [data-parallax=none] {
    position: relative;
    transform: translateZ(0);
    z-index: 10;
  }
  
  [data-parallax-speed=front] {
    transform: translateZ(90px) scale(0.7);
    z-index: 1;
  }
  
  [data-parallax-speed=base] {
    transform: translateZ(0);
    z-index: 4;
  }
  
  [data-parallax-speed=slow] {
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }
  
  [data-parallax-speed=slower] {
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }
  
  [data-parallax-speed=slowest] {
    transform: translateZ(-900px) scale(4);
    z-index: 1;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  [data-image=dojo],
  [data-image=aikiotoshi] {
    width: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }
  
  [data-image=dojo] {
    left: 0vw;
    background-image: url("../img/photos/aikiotoshi2.jpg");
  
  }
  
  [data-image=aikiotoshi] {
    left: 0vw;
    background-image: url("../img/photos/aikiotoshi-sf.png");
    background-position: top center;
  }
*/


body { 
    background-color: var(--noir); 
    font-family: "Garett Extrabold", "Trebuchet MS", "Impact", sans-serif; 
    font-size: 16px; 
    color: var(--blanc);
    
}



/*
.preamble,
.parallax,
.plot--content,
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10vmin;
}
@media (min-width: 60rem) {
  .preamble,
.parallax,
.plot--content,
footer {
    padding-top: 20vmin;
    padding-bottom: 20vmin;
  }
}

header[data-parallax=group] {
  height: 100vh;
}
*/

img {
    vertical-align: middle;
    border-style: none;
}

@media only screen and (max-device-width: 1366px) {
  img.gd-image {
    max-width: 30vh;
  }
}

/* Image en fond | effet de parallaxe */
.parallax {
    height: 80vh;
    background-attachment: fixed;       /* Fixe l'image pendant le scroll */
    background-position: center;        /* Centre la position de l'image */
    background-repeat: no-repeat;       /* Empêche l'image de se répéter en fonction de la taille d'écran */
    background-size: cover;             /* L'image prendra 100% de l'espace, quitte à la crop */
    background-image: url("../img/photos/aikiotoshi-nb.jpg");
  }




  /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax {
      background-attachment: scroll;
      height: 90vh;
    }
  }

  /* réduire un peu le logo pour les telephones */
  @media only screen and (max-device-width: 1366px) {
    img#logo {
        max-height: 50vh;
    }
  }


/* titres*/
h1, .quotes, .quotes_rouge { 
    font-size: 30px; 
    color: var(--mauve); 
    text-shadow: var(--violet) 1px 0 10px;
    text-transform: uppercase;
    font-style: italic;
}

span.mauve { color: var(--mauve); }
.surligne { color: var(--mauve);  }

h2 { 
    font-size: 20px; 
    color: var(--or); 
    /*text-shadow: var(--violet) 1px 0 10px;*/
    text-transform: uppercase;
    font-style: italic;
    /*background-color: var(--beige);
    padding: 2px;*/
    /*display: inline;*/
    /*border: var(--beige);
    border-radius: 5px;*/
}

h3 { font-size: 18px; color: var(--mauve); }

q { 
    color: var(--mauve); 
    font-style: italic; 
}

i {
  text-align: center;
}

.preamble {
    background-color: var(--noir);
    box-shadow: 0 0 10vh rgba(0, 0, 0, 0.8);
}

/* Completer les styles ".quotes" */
.quotes, quotes_rouge { font-style:italic; }
.quotes_rouge { color: #cc0033; }

/* tableaux */
table { border-collapse: collapse; }

/* Entete de tableau    */
th { font-size: 18px; color:var(--violet); text-transform: uppercase;}

td { padding: 5px; }


/* liens standard */
a { transition: color 0.5s; }

a:link, a:visited {
	/*font-size: 20px;*/
	color: var(--violet);
	text-decoration: none;
}

a:hover { color: var(--mauve); }*/

/* boutons */
a.bouton { transition: color 0.5s; background: 0.5s; padding: 10px; }

a.bouton:link, a.bouton:visited {
	color: white;
	background-color: #555;
}

a.bouton:hover {
	/*color: #FF4A4A;
	background-color: #505050;
	box-shadow: 5px 5px 3px black;*/
	background-color: black;
}

a.bouton:active { color: white; font-size: 18px; }


/* toutes les listes */
ul { list-style-type: none; }

/* liste sur une même ligne */
ul.ligne { display: flex; }
@media only screen and (max-device-width: 1366px) {
    ul.ligne { display: inline; }
}


/* �l�ments centr�s */
.centre {
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10vmin;
}


/* barre de navigation */
nav {
    width: 100%;
    margin: 0 auto;
    position: sticky;
    top: 0px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    float: left;    /* les uns a cote des autres */
    width: 14%;
    text-align: center;
    /* pour replacer les sous-menus correctement sous leur onglet correspondant et pour     
    qu'ils fassent bien la meme taille, appliquer une position : relative aux elements du menu principal.*/
    position: relative;     
    transition: width 0.5s;
}

/* sur les mobiles, prendre toute la largeur de l'écran */
@media only screen and (max-device-width: 1366px) {
  nav ul li { 
    width: 20%; 
    font-size: 12px;
  }
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    /*font-size: 15px;*/
	color: var(--blanc);
    font-weight: bold;
    text-transform : uppercase;
    display: block;
    /*background-color: transparent;*/
    background-color: var(--noir);
	/*border-radius: 20px;*/
    padding: 10px;
	border-bottom: 3px solid transparent;
  transition: color 0.5s, border-bottom 0.5s;
}



nav a:link, nav a:visited {
    color: var(--blanc);
}

/* Change the link color on hover */
nav a:hover { 
  border-bottom-color: var(--violet); 
  color: var(--or); /*box-shadow: #F47133 1px 0 10px;*/ 
}

/* sous-menu */
.sous {
    display: none;  /* cache par defaut */
    font-size: 13px;
    /*box-shadow: 0px 1px 2px #CCC;*/
    background-color: #1C1D1F;
    position: absolute; /* Les sous-menus n'impacteront plus le contenu suivant le menu. */
    width: 100%;
    z-index: 1000;  /* Pour que les sous-menus ne passent pas derriere le contenu qui suit le menu, definir un z-index eleve */
    padding-left: 0;
}

@media only screen and (max-device-width: 1366px) {
  .sous { font-size: 10px; }
}


/* cibler un sous menu .sous lorsqu'un utilisateur passe sa souris sur un �l�ments li de la liste repr�sentant notre menu principal. */
nav > ul li:hover .sous {
    display: block; /* affich� quand on passe la souris */
    color: var(--or);
}

.sous li {
    float: none;    /* les uns en dessous des autres */
    width: 100%;    /* tout l'espace dispo dans leur conteneur */
    text-align: left;
}

/*petite fl�che � c�t� des textes des onglets de menu qui contiennent des sous-menus : symbole ? apr�s le texte en utilisant le pseudo-�l�ment ::after, ce qui va �galement nous permettre de d�finir la taille du symbole.*/
.deroulant > a::after {
    content: " \25BC";  
}

a.deroulant > h3::after {
    content: " \25BC";  
}

/* bandeau gauche */
div#bandeau-gauche { 
    display: block; 
    width: 10%;
}

ul.enligne { width: 100%; display: block; position: static; }
ul.enligne li { float: left; padding: 5px; }


.resp-container { 
  position: relative; 
  overflow: hidden; 
  padding-top: 56.25%; 
}

.resp-iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}


/* image principale, carroussel */
img#ipb { display:none; }

div#slider { width: 50%; max-width: 1000px; overflow: hidden; }

div#slider figure {
position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 15s slidy infinite;
}

div#slider figure img { width: 20%; height: auto; float: left; }

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}


/* Toutes les listes */
ul#liste li, ul#encart li, ul#info li {
	font-size: 16px;
	color: var(--blanc);
	/*background-color: var(--grisfonce);*/
  /*background-image: linear-gradient(135deg, var(--noir), var(--grisfonce), var(--violetfonce), var(--grisfonce));*/
  /*border-radius: 5px;*/
	padding: 5px;
	margin: 10px;
	width: 90%;
  column-span: none;
  display: block;
  /*min-height: 25vh;*/
  
	
  /*display: none;*/	/* il sera affich� progressivement */
  transition: all 0.5s;
  
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
        page-break-inside: avoid; /* Firefox */
              break-inside: avoid; /* IE 10+ */
              break-inside: avoid-column; /* W3C */ 
    
}

/* dégradé quand on passe la souris sur un élément de liste */
/*ul#liste li:hover, ul#encart li:hover, ul#info li:hover {
  background-image: linear-gradient(135deg, var(--noir), var(--grisfonce), var(--noir));
}*/

/* encarts de la 1e page, par thème */
div#dojo, div#prof, div#pourquoi {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
}

div#dojo {
  background-image: url("../img/photos/tatami.jpg");
}

div#prof {
  background-image: url("../img/photos/portrait-fab-bk.jpg");
}

div#pourquoi {
  background-image: url("../img/photos/nikyo.jpg");
}


/* 2 colonnes uniquement sur PC */
ul#encart { column-count: 2; }
@media only screen and (max-device-width: 1366px) {
  ul#encart { column-count: 1; }
}

ul#liste li { max-width: 90%; }

/*ul#liste li:hover , ul#encart li:hover { box-shadow: 10px 10px 5px var(--grisfonce); }*/

/* les images figurant dans une liste */
ul#liste li img { max-width: 120%; }

/* liste des stages */
.flex-container { 
    display: flex; 
    width: 100%; 
    /*background-attachment: fixed;
    background-image: url("../img/soleil.png");
    background-repeat: no-repeat;
    background-position: absolute;
    /*z-index: 2;* /
    background-position-x: 80%;
    background-position-y: 5%;
    opacity: 0.7;*/
}


 .vignette_date {
	background-color: #1C1D1F;
    text-shadow: #F47133 1px 0 10px;
	color: #F47133;
	margin: 0px;
	text-align:center;
	font-weight: bold;
	padding: 5px;
	border: none;
	width: 80px;
	max-height: 90px;
}

ul#liste li table { width: 90%; }

.info_stage { width: 60%; }
	
.jour { font-size: 40px; }

.mois { font-size: 18px; color: white; }

.col2 { column-count: 2; }

/* news */
/*div.resume { }*/
div.corps { display: none; }



/* tableaux */
table.donnee tr:nth-child(even) {
  background-color: var(--noir);
}

table.donnee tr:nth-child(odd) {
  background-color: var(--grisfonce);
}





/* texte anim�  */


.scroll-left {
     height: 50px;	
     overflow: hidden;
     position: relative;
     /*background: yellow;
     color: orange;
     border: 1px solid orange;*/
}
.scroll-left p {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     line-height: 50px;
     text-align: center;
     /* Starting position */
     transform:translateX(100%);
     /* Apply animation to this element */
     animation: scroll-left 15s linear infinite;
    font-size: 18px;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
    transform: translateX(100%); 		
 }
 100% {
    transform: translateX(-100%); 
 }
}

.clignote  {
   animation-duration: 1.5s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}





#container {
    position: absolute;
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;

    filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
    position: absolute;
    width: 100%;
    display: inline-block;

    font-family: "Raleway", sans-serif;
    font-size: 80pt;

    text-align: center;
    color: white;

    user-select: none;
}


/* barre de liens */
div#liens { 
    margin-left: 10%; 
    display: block;
    text-align: center;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  /*width: 200px;
  height: 200px;*/
  border: 0px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: var(--noir);
  color: white;
}

/* Style the back side */
.flip-card-back {
  background-color: var(--grisfonce);
  color: white;
  transform: rotateY(180deg);
}