@charset "UTF-8";
h3 {
  margin-bottom:0.6rem;
  font-size: 1.1rem;
  color: #aaa;
  
}

p {
	margin-bottom:3rem;
	& span.titre {
		color:#000;
		display:block;
		font-style: italic;
		margin:0 0 0.2rem 0;
		font-size: 1.8rem;
		line-height: 1.2rem;}
	& span.lieu, span.ville {}
	& span.lieu {&:after {content:" – 	"}}
	& span.infos {display:block;margin-top:	0.2rem}
}

.lesExpos {

  margin: 0 0 0.7rem 0;
  list-style-type: none;
  font-size: 0.9rem;

	& li {color: #777;font-size: 0.8rem;margin: 0 0 0.4rem 0;line-height: 1rem;}
	& span.annee {font-weight: normal;display: inline-block;padding-right: 0.5rem;
	}
	& span.titre { color:#000;&:after {content:" – 	"};font-style: italic;font-size: 0.9rem;}
	& span.lieu {&:after {content:" – 	"}}
	& span.infos {&:before {content:" – "}}
}


@media screen and (max-width: 700px), screen and (max-width: 770px) and (orientation: portrait) {

.lesExpos {
	& span.annee,
	  span.titre,
	  span.lieu { display: block;&:after {content:""}  }

  & li {
    padding: 0rem 0;
    margin: 0 0 0.5rem 0;
    line-height: 1rem;
  }

}