@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
:root {
    --primary-color: #FFFFFF;
    --secondary-color: #961AB0 ;
    --complimentary-color: #DE55E6;
    --contrast-color: #F5D773;
    --light-color: #F191F7;
    --text-color:black;
}

/* :root {
  --primary-color: #C60FD6;
  --secondary-color: #35DB14 ;
  --complimentary-color: #ED5BF5;
  --contrast-color: #F5D773;
  --light-color: #F191F7;
  --text-color:black;
} */





/********************************Général *****************************/
* {
  box-sizing: border-box;
  margin:0;
  margin:0;
}

html {
  background-color: var(--primary-color);
}

p{
  padding-bottom: 10px;
}


h1 {
  background-color: var(--primary-color);
  text-decoration: none;
  color: var(--secondary-color);
  font-size: 1em;
  /* letter-spacing: 1.95px; */
  text-transform: none;
  padding: 10px 20px;
  border-radius: 50px;
  margin-bottom: 15px;
  display: inline-block;
  margin-top: 0;
}

h3 {
  line-height: 1.3;
  color: var(--text-color);
  margin-bottom: 10px;
}

p li{
  
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--text-color);
  
}
ul{
  margin-top: 10px;
}
li{
  list-style:circle;
  margin-left: 20px;
  ;

}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--primary-color);
  color: var(--text-color);
  font-size: 1.3em;
}
.myContainer {
  background: var(--primary-color);
  min-height: 100vh;
  font-family: 'Courgette', sans-serif;
}

.acronyme {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/***********menu gauche*****************/
.nav {
  
  left: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100vh;
  background: var(--primary-color);
}
.nav a {
  font-size: 2em;
  color: var(--secondary-color);
  text-decoration: none;
  padding: 20px;
  text-align: center;
}
/**************meu gauche ******************/

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}



/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 5%;
  min-width: 50px;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 95%; 
  /* padding-left: 20px; */
  
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.myRow:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/*page accueil*/

#first{
  background-image: url(../images/background.jpg);
  padding: 2em;
 
}

/* .menu {
   display: flex;
  justify-content: space-around;
  align-items: center; 
  margin-top: 10%; 
} */


.intro-bulle i {
  display: inline-block;
  border: 10px solid #35DB14;
  border-radius: 100%;
  
}
.intro p{
 padding-bottom: 1em; 
}
.intro-bulle
{
  position: relative;
  text-align: center;
}

.intro-bulle img {
  border-radius: 500%;
  width: 17em;
  height: 17em;
}

.centeredText {
  color: white;
  font-weight: bolder;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -70%);
  text-transform:capitalize;
  text-align: center;
  font-size: 1.5em;
  
}

/************************Autres pages***********************/

#therapeute{
  /* background-image: url(../images/background.jpg);*/
  padding-left: 5em;
  padding-top: 2em;
}

#therapeute .zone-texte  {
  color: white;
  position: absolute;
  top: 65%;
  left: 15%; 
  /* transform: translate(-60%, -10%); */
  background-color: var(--light-color);
  opacity: 90%;
  padding: 40px;
  border-radius: 20px;
  margin-right: 20px;
  
}

.tabs{
  font-size: 1.2em;
}
  
  

.bulle i {
  display: inline-block;
  border: 10px solid #DE55E6;
  border-radius: 100%;
  
}
.bulle
{
  position: relative;
  
  
}

.bulle img {
  border-radius: 500%;
  width: 20em;
  height: 20em;
}


.citation{
  font-style: italic ;
  font-weight: bold;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
  .nav{
    flex-direction: row;
    height: 50px;
  }
  .nav a {
    font-size: 20px;
    padding: 3px;
  }

}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
  .bulle img {
    border-radius: 500%;
    width: 10em;
    height: 10em;
  }
  #therapeute{
    padding-left: 0.1em;
    padding-top: 0.1em;
  }

  #therapeute .zone-texte  {
    color: white;
    position: inherit;
    top: 0;
    left: 0; 
    /* transform: translate(-60%, -10%); */
    background-color: var(--light-color);
    opacity: 90%;
    padding: 0px;
    border-radius: 20px;
    margin-right: 0;
    
    
  }
  
}



.myContainer:target {
  opacity: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.myContainer:target h1 {
  opacity: 0;
  animation: 2s fadeIn forwards .4s;
}


/**********************tabs**************************/
section {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 0;
  opacity: 0;
  /*transition: all ease-in .5s;*/
  /*transition: all linear .5s;*/

  display: flex;
  /* justify-content: center; */
  /* padding-left: 10%;
    padding-right: 10%;
    padding-top: 80px; */
  align-items: top;
}

.list ul,li
  {
 
  list-style: circle;
  /* list-style-image: url(' ');
  list-style-position: outside; */
  } 
 
section:target {
  opacity: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#tab-content div {
  display: none;
}

#tab-content div.is-active {
  display: block;
  color:var(--text-color);

}

.tabs.is-toggle li.is-active a {
	background-color: var(--complimentary-color);
	border-color: var(--primary-color);
	
}

.tabs.is-toggle li a:hover {
  background-color: var(--complimentary-color);
	border-color: var(--primary-color);
}

.tabs.is-toggle li a {
	border-color: var(--light-color);
	
}


/***********************************informations pratiques *****************/

.adresse{
  line-height: 2em;
  margin-right: 30px;
}

.adresse a {
  color: white;
  text-decoration: none;
}

.adresse a:hover {
  text-decoration: underline;
}


.adresse i {
  border-color: transparent;
  padding-right: 20px;
}

/************************************************************************/

#postit-tabs
{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  
}

#postit-tabs h2 {
  font-weight: bold;
  font-size: 2rem;
}
 
#postit-tabs p {
  font-family: 'Reenie Beanie';
  font-size: 2rem;
  font-weight: bold;
}
 
#postit-tabs ul,li{
  list-style:none;
  
}
#postit-tabs ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
}
#postit-tabs ul li a{
  border-radius: 40%;
  text-decoration:none;
  color: var(--text-color);
  background:var(--light-color);
  display:block;
  width:30em;
  padding:1em;
  box-shadow: 5px 5px 7px var(--secondary-color);
  transform: rotate(-6deg);
}
#postit-tabs ul li{
  margin:1em;
  
}
.ellipsis{
  display: none;
}
#postit-tabs ul li:nth-child(even) a{
  transform:rotate(4deg);
  position:relative;
  top:5px;
}
#postit-tabs ul li:nth-child(3n) a{
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
}
#postit-tabs ul li:nth-child(5n) a{
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}
#postit-tabs ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.1);
  width: 40em;
  border-radius: 5%;
  position:relative;
  z-index:5;
}
#postit-tabs ul li a:hover,ul li a:hover span.ellipsis{
  display: block;

}