@charset "UTF-8";
/* CSS Document */
html {
  width: 100%;
  right: 0em;
}
/*	structure */
@media screen and (min-width:750px) {
  html {
    width: 100% !important;
    right: 0em;
  }
}
body {
  margin: 0px !important;
}
/*	nav */
nav {
  color: #333333;
  text-decoration: none;
  margin: 0px;
  text-transform: uppercase;
  border-top: 3px solid #333333;
  font: 700 2.441rem/1.75rem 'Roboto', sans-serif;
  padding: 0.5em 0.2em 0.5em 0.6em;
}
nav li {
  list-style: none;
}
li a {
  color: #333333;
  text-decoration: underline;
}
li a:hover {
  color: #448cca;
  text-decoration: underline;
}
li a:active {
  color: #448cca;
}
li a:visited {
  color: #016634;
}
li a:visited:hover {
  color: #ff6633;
}
li a::after {
  content: "\002794";
  padding: 0.8em 0.3em 0.2em;
  text-decoration: none;
}
/*	H */
.portefolio h1 {
  color: #333333;
  text-transform: uppercase;
  font: 700 2.441rem/1.75rem 'Roboto', sans-serif;
  padding: 0.4em 0.6em 0.5em 0.6em;
  text-decoration: underline;
  border-top: 3px solid #333333;
  border-bottom: 3px solid #333333;
}
.portefolio h2 {
  text-decoration: underline;
  color: #333333;
  font: 700 3.052rem/1.75rem 'Roboto', sans-serif;
  padding: 0.8em 0.6em 0.5em 0.6em;
}
.portefolio h3 {
  color: #333333;
  font: 900 20px/30px'Roboto', sans-serif;
  padding: 0.4em 0.6em 0.5em 0.6em;
}
      .portefolio h4 {
    padding: 0.8em 0.6em 0.5em 1.4em;
    transition: all .3s ease;
          text-decoration: underline;
  }
.portefolio h6 {
  color: #333333;
  font: 400 25px/47px 'Roboto', sans-serif;
  padding: 1em 1em 0em 1.1em;
}
/*	Paragraphe */
.portefolio p {
  padding: 0.1em 1.3em 1.4em 1.3em;
  margin: 0em 0em 0em 0.5em;
font: 400 1.25rem/1.75rem 'roboto', sans-serif, Arial;
}
.portefolio p a {
  text-decoration: underline;
  color: #333333;
}
.portefolio p a:hover {
  color: #448cca;
}
.portefolio p a:active {
  color: #448cca;
}
.portefolio p a:visited {
  color: #016634;
}
.portefolio p a:visited:hover {
  color: #ff6633;
}
.span-ref{
font-style: italic;
    font-family: 'Roboto', sans-serif;
	font-weight: 600;
}
.span-yellow {
  background-color: #ffffcc;
  border-radius: 2%;
    overflow: hidden;
}
.span-blue {
  background-color: #d0e9f0;
  border-radius: 2%;
    overflow: hidden;
}
.span-grey {
  background-color: #cdcccc;
  border-radius: 2%;
    overflow: hidden;
}
.span-sun {
  background-color: #ffcc00;
  border-radius: 2%;
}
.portefolio .light {
    font: 700 30px/40px 'Roboto', sans-serif;
  padding: 1em;
  margin: 0.8em 2em 2em 2em;
  border-left: 3px solid #333333;
    color: #333333;
}
.portefolio .light-etroit{
	    font: 700 30px/40px 'Roboto', sans-serif;
  padding: 1em;
  margin: 0.8em 2em 2em 2em;
  border-left: 3px solid #333333;
    color: #333333;
}
.portefolio .auteur {
  color: #333333;
  font: 400 1rem/1rem 'Roboto', sans-serif;
  padding: 0em 1.6em 0em 1.6em;
}
.portefolio .auteur span {
  text-decoration: underline;
      font: 600 1rem/1rem 'Roboto', sans-serif;
}
.portefolio .date {
  color: #333333;
  font: 400 18px/20px 'Roboto', sans-serif;
    margin: 0em 1.6em 3em 1.6em;
  padding: 0em;
}
.portefolio .date span {
  text-decoration: underline;
  background-color: white;
  font: 600 18px/47px 'Roboto', sans-serif;
}
.portefolio .resume {
  font: 600 45px/50px 'Roboto', sans-serif; 
    padding: 1.1em 0.6em 0.8em 0.6em;
    color: #333333; 
}
.list li {
  font: 500 28px/29px 'roboto', sans-serif, Arial;
  padding: 0.5em 0.2em 0.5em 0.3em;
}
.audio-player{
	width: 100%;
margin: auto;
padding: 50px;
}
.player{
	margin: 40px;
}
.align{
  display: flex;
  flex: 2;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
}
.image-reduite{
	width: 100%;
	display: block;
	padding: 2em 1em 0em 1em;
	margin: auto;
	border-radius: 50%;
}
/*	Figure */
figure {
  font: 300 18px/30px 'Roboto', sans-serif;
  padding: 0em;
  margin: 0em 1em 1em 1.2em;
}
figure span {
  text-decoration: underline;
  font: 600 1rem/1rem 'Roboto', sans-serif;
}
figure::before {
  content: "\002794";
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  margin-right: 10px;
}
balise p{
	font: 400 1rem/1.75rem 'Roboto', sans-serif !important;
margin: 0.1em 1.3em 0em 1.6em !important;
padding: 0.1em 1.3em 0em 1.6em !important;
    }
balise{
    margin: 0em 0em 2em 0em !important;
}
.ref-note{
     font: 300 20px/20px 'Roboto', sans-serif;  
    }
.paragraph{
    margin-bottom: 60px;
}
.portefolio img svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin: 1em 1.3em 1em 1.3em;
  padding: 0em;
}
.portefolio .bandeau img {
  display: inline-block;
  width: auto;
  max-height: 100%;
  overflow: hidden;
  margin: 0em 1.3em 0em 1.3em;
  padding: 0em;
    background-color: red;
}
.pin {
  max-width: 2rem;
  position: relative;
  left: 28px;
  bottom: 10px;
    column-count: 2;
        column-gap: 50px;
}
.portefolio .img-row{
    display: flex;
}
.portefolio .img-row .img-column{
    flex: 50%;
margin: 10px !important;
}
ol {
        list-style-type: lower-alpha;
}
.list li{
    font: 700 1.25rem/30px 'roboto', sans-serif, Arial;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0em 1em 0em 3em;
}
.mobil-none{
    display: none;
}
.group-photo{
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  /*box-shadow: 0 20px 30px rgba(0,0,0,.1);*/
  line-height: 0;
}

.box > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover; 
  transition: .5s;
}

/*.box > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}*/

.box:hover { flex: 1 1 50%; }
.box:hover > img {
  width: 100%;
  height: 100%;
}
span{
	font: 700 1rem/1.75rem 'Roboto', sans-serif;
}
@media screen and (min-width:750px) {
  .portefolio h1 {
    padding: 0.6em 0.6em 0.6em 1.2em;
    transition: all .3s ease;
  }
  .portefolio h2 {
    padding: 1.5em 0.2em 0.5em 1.1em;
    transition: all .3s ease;
  }
          .portefolio h4 {
    padding: 3em 0.6em 0.5em 3em;
    }
  .portefolio p {
    padding: 0.1em 2.3em 0.4em 2.3em;
  }
  nav {
    padding: 0.5em 0.2em 0.5em 1.2em;
  }
  .portefolio .auteur {
    padding: 0em 1.6em 0em 3.2em;
    margin: 0px;
  }
  .portefolio .date {
    margin: 0em 1.6em 3em 3em;
  }
  .portefolio .bandeau img {
    margin: 0em 2.3em 0em 2.5em;
  }
.portefolio .resume {
  font: 700 2.441rem/3rem 'Roboto', sans-serif; 
    padding: 1.1em 0.6em 0.8em 0.8em;
}
  .portefolio img svg {
    margin: 1em 1.3em 1em 2.3em;
  }
    .portefolio .light {
  font: 700 1.953rem/2.5rem 'Roboto', sans-serif;
    }
.portefolio .light-etroit{
font: 700 35px/47px 'Roboto', sans-serif;
  margin: 0.8em 2em 0em 2em;
}
    .list li{
    margin: 0em 1em 0em 4em;
}
    .column-text{
        column-count: 3;
        column-gap: 50px;
        column-rule: 3px solid #333333;
        padding: 3em 4em 3em 4em !important;
          font: 400 18px/26px 'roboto', sans-serif, Arial !important;
    }
	.audio-player{
	width: 50%;
	}
	.image-reduite{
	width: 50%;
}
  figure {
    font: 400 1rem/1rem 'Roboto', sans-serif;
    padding: 0em;
    margin: 0em 1em 1em 3em;
  }
  .pin {
    left: 110px;
    transition: all .3s ease;
  }
    .mobil-none{
    display: flex;
	  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
balise p{
    margin: 0em 0.1em 0em 2.1em !important;
    }
.columnphoto{
    float: left;
  width: 33.33%;
    }
}

/* 3 columns IMAGES */
/* Create three equal columns that floats next to each other */
.column-3im {
  float: left;
  width: 30%;
  padding: 20px;
  height: 650px; /* Should be removed. Only for demonstration */
}
.column-3im img{
}

/* Clear floats after the columns */
.row-3im:after {
  content: "";
  display: table;
  clear: both;
}
.p-3im{
   padding: 0.1em 2.3em 0.4em 0.6em !important; 
}
.column-3imV2 {
  float: left;
  width: 30%;
  padding: 20px;
  height: 890px; /* Should be removed. Only for demonstration */
}
/*
  /* Player audio */
  .container-player {
    margin: 26px auto;
    max-width: 500px;
  }