/* ==========================================================================
   Variables
   ========================================================================== */

   :root {
    --vert-pins: #5CB8B2;
    --pêche-pins : #F3CFB3;
    --violet-pins : #93328E;
    --pêche-feuillet: #ffc29e ;
    --bleu-feuillet: #9FC1D3 ;
    --vert-feuillet: #A6DEC1 ;
    --jaune-feuillet: #FEF380 ;
    --mauve-feuillet: #D6BFDD ;
    --vert-web: #A6DEC1 ;
    --pêche-web: #F3CFB3 ;
    --jaune-web: #fffaa1 ;


}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'U001';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/ziselp-u001-reg-webfont.woff') format('woff');
}

@font-face {
  font-family: 'U001';
  font-weight: normal;
  font-style: italic;
  src: url('fonts/zizelp-u001-ita-webfont.woff') format('woff');
}

@font-face {
  font-family: 'U001';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/ziselp-u001-bol-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Comic';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/ComicNeue-Bold.woff') format('woff');
}

@font-face {
  font-family: 'QTBengal';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/ziselp-qtbengal-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Ziselp';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/ziselp-fill-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Wremena';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/ziselp-wremena-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: normal;
  font-style: italic;
  src: url('fonts/ziselp-spectral-italic-webfont.woff') format('woff');
}


body {
    font-family: 'U001';
    margin: 1em 3em;
    
}

p, li {
   font-size: 1.5em;
   line-height: 1.3em;
   letter-spacing: -0.02em;
}

p + p {
  text-indent: 2em;
  }


.ziselp {
font-family: 'Ziselp' !important;
font-size:3em;
color:white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}

.univers, .bengual,.wremena, .spectral, .comic, .{
  font-size:2.2em;
}
.univers {
  font-family: 'U001' !important;
}
.bengual {
  font-family: 'QTBengal' !important;
}
.wremena {
  font-family: 'Wremena' !important;
  font-size:1.6em;

}
.spectral {
  font-family: 'Spectral' !important;
  font-size:1.6em;

}
.comic {
  font-family: 'Comic' !important;
  text-transform: uppercase;
}

.ziselp span {
  color:black;
  -webkit-text-stroke-width: 0px !important;
  -webkit-text-stroke-color: none;

}




a, a:active {
  color:black;
  text-decoration: underline;
}



#ul {
  margin: 0; 
  padding: 0;
}


ul li::before {
  content: "— ";
}

figure {
  width: 100%;
}
img {
  width: 100%;
  margin: 1em 0 1em 0;
}
.logo-iselp {
    width: 25%;
    float: left;

}
.logo-iselp-contexte {
width: 40%;
display: inline-block;
margin: 10px;

}
img::before {
  color: red;
}

/*img[alt="iselp-logo1"], img[alt="iselp-logo2"], img[alt="iselp-logo3"], img[alt="iselp-logo4"]{
size: 50%;
}*/
img[alt="programme-iselp-77-78-1-recto"],
img[alt="programme-iselp-77-78-1-verso"],
img[alt="programme-iselp-77-78-2-recto"],
img[alt="programme-iselp-77-78-2-verso"]{
  /* max-height: 600px; */
  width: 100%;
}
img[alt="iselp-logo1"] {
  width: 87%;
}
img[alt="iselp-logo4"] {
  width: 81%;
}
/*img[alt="programme-iselp-77-78-2-recto"]{
  max-width:  30%;
  float: left;

}
img[alt="programme-iselp-77-78-2-verso"]{
  max-width:  33%;
  float: left;

}
img[alt="programme-iselp-77-78-1-recto"]{
  max-width:  30%;
  float: left;

}
img[alt="programme-iselp-77-78-1-verso"]{
  max-width:  30%;
  float: left;

}*/
.programmes {
    max-width:  25%;
      float: left;
}
.fleche {
  max-width: 25%;
}
.insta {
  max-width: 100%;
  width: auto;
}
.insta img{
  max-width: max-content;
  width: auto;
}
figure + p,
figure + h2 {
  clear: both;

}
h1 {
    font-family: 'Ziselp';
    color:white;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
    font-size: 6em;
    margin-bottom: line-height: calc(2 * var(--line-height));
}

h1+ul {
  position: fixed;
  left: 15px !important;
  top: 15px !important;
}
    
h2 {
    font-size: 2.8em;
    margin-top: 1em;
    margin-bottom: 0.3em;
    padding-top: 1em;
    font-weight: normal;
    letter-spacing: -0.02em;
    }

h3 {
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  clear: both;
  text-indent: 2.5em;
}

h4 {
  font-size: 1em;
  font-weight: normal;
}

#vert-pin-s, #vert-pin-s+ul {
    background-color: var(--vert-pins);
    padding: 0.3em;
}
#p-che-pin-s, #p-che-pin-s+ul {
  background-color: var(--pêche-pins);
  padding: 0.3em;

}
#violet-pin-s, #violet-pin-s+ul {
  background-color: var(--violet-pins);
  padding: 0.3em;

}

#p-che, #p-che+ul {
    background-color: var(--pêche-feuillet);
    padding: 0.3em;
}
#bleu, #bleu+ul {
  background-color: var(--bleu-feuillet);
  padding: 0.3em;

}
#vert, #vert+ul {
  background-color: var(--vert-feuillet);
  padding: 0.3em;

}

#jaune, #jaune+ul {
    background-color: var(--jaune-feuillet);
    padding: 0.3em;
}
#mauve, #mauve+ul {
  background-color: var(--mauve-feuillet);
  padding: 0.3em;

}
#vert-web{
  background-color: var(--vert-web);
  padding: 0.3em;

}

#p-che-web {
  background-color: var(--pêche-web);
  padding: 0.3em;

}
#jaune-web {
  background-color: var(--jaune-web);
  padding: 0.3em;

}


/* exemple sur web */

#expo article {

}
article.expo {
  width: 100%;
  display: flex;
  border-bottom: 3px solid #000;
  border-top: 3px solid #000;
}
article.expo img {
float: left;
width: 100%;
display: block;
height: auto;
height: 100%;
}

article.expo .container {
  float: left;
  display: block;
  /*width: 50%;*/
  max-width: 820px;
  padding: 1% 2%;
  height: fit-content;
}

article.expo .container .cat {
  background: none;
  margin-bottom: 10px;
  font-size: 1.5vw;
  line-height: 1.5vw;
  font-weight: bold;
}
article.expo .container h2 {
  font-size: 5vw;
  line-height: 5vw;
  font-family: 'Comic';
  -webkit-text-stroke: 0.2vw black;
  margin: 10px 0;
  color: #fff;
  text-transform: uppercase;
}
article h3,
article .container .date {
font-size: 1.4vw;
line-height: 1.5vw;
text-transform: initial;
font-weight: initial;
letter-spacing: -0.03em;
font-weight: bold;

}
article .excerpt p,
article .container .cat,
#content_home section h1,
#residences h1,
#labo h1  {
font-size: 1.1vw;
line-height: 1.25vw;
letter-spacing: -0.03em;
font-weight: normal;
margin-top: 10px;
font-family: u001;
text-transform: initial;
}
#residences h1,
#labo h1 {
  padding-left: 5%;
}
section#recherche #residences {
  width: 90%;
  margin-left: 7%;
  padding: 5% 0 0%;
  position: relative;
  z-index: 1;
  min-width: 90%;
}
section#recherche #labo {
  width: 90%;
  margin-left: 7%;
  padding: 5% 0 0;
  position: relative;
  z-index: 1;
} 
section#recherche {
  background: #edd2ae;
  width: 100%;
  position: relative;
  margin: 0 0 10%;
  float: left;
  padding-bottom: 50px;
}
article.postype.residences {
  padding: 2% 5% 2% 2%;
  max-width: 90%;
  padding: 2% !important;
  width: 98% !important;
  height: max-content;
  -webkit-box-shadow: 5px 5px 0 0 transparent !important;
  box-shadow: -5px 5px 0 0 transparent !important;
  border: 3px solid transparent !important;
  -webkit-transition: all 0s ease !important;
  -moz-transition: all 0s ease !important;
  -ms-transition: all 0s ease !important;
  -o-transition: all 0s ease !important;
  transition: all 0s ease !important;
}
article.postype.residences .container {
  width: 100% !important;
  padding: 0 !important;
  background: unset;
}
article.postype.residences .container .date {
  float: right;
  margin: -13% 20px 0 0;
  font-size: 2vw;
  line-height: 2vw;
}
article.expo .container .date.first,
article.expo .container .cat,
article.events .container .date.first,
article.events .container .cat.second  {
  display: none;
}
.arrow:before {
content: " — " ;


}
article.expo .container .date span{
  font-size: 2.5vw;
  line-height: 2.7vw;
    text-transform: capitalize;
    font-weight:  bold;
    margin-top: 10px;

}
/*article .container .date {
  font-family: 'u001';
  text-transform: capitalize;
  font-size: 1.5vw;
  line-height: 1.7vw;
  font-weight: bold;
}*/
h1 + ul{

  position: fixed;
  left: 0;
  top: 0;

}
main {
  margin-left: 25%;
  max-width: 55vw;
}
section {
    border-bottom: 3px solid #000;
display: flex;
}
article.events {
  width: 40%;
  float: left;
}

article .container .cat.first {
  background: #fff;
  position: absolute;
  top: -22px;
  left: 0px;
  padding: 10px 20px;
  margin-top: 0;
}
article.events img {
  width: 100%;
  display: block;
  height: auto;
}

article.cat_evenements .container {
  width: 90%;
  padding: 5%;
  background: #fff;
}
article .container {
  position: relative;
  padding: 2%;
  background: #fff;
}
article.cat_evenements .container h2 {
  font-family: 'Comic';
  margin: 5px 0;
  font-size: 2vw;
  text-transform: uppercase;
  font-weight:  bold;
}
article.cat_evenements .container .titre h3 {
  margin: 5px 0;
}





a, a:link, a:active, a:visited {
  color: black;
  text-decoration: none;
}
a[target="_blank"]:hover,
a:hover,
a[target="_blank"] {
  color: #93328E;
  text-decoration: underline;
}
article a {
  width: 100%;
  display: block;
}


.clearer {
  clear: both;
  display: table;
  width: 100%;
}

}
section#pedagogie {

    background: #edd2ae;
    width: 100%;
    position: relative;
    margin: 0 0 10%;
    padding-bottom: 50px;

}
article.postype.residences,
article.postype.labo {
  padding: 2% 5% 2% 2%;
  max-width: 90%;
  padding: 2% !important;
  width: 98% !important;
  height: max-content;
  -webkit-box-shadow: 5px 5px 0 0 transparent !important;
  box-shadow: -5px 5px 0 0 transparent !important;
  border: 3px solid transparent !important;
  -webkit-transition: all 0s ease !important;
  -moz-transition: all 0s ease !important;
  -ms-transition: all 0s ease !important;
  -o-transition: all 0s ease !important;
  transition: all 0s ease !important;
}
article.postype.residences .container,
article.postype.labo .container {
  width: 100% !important;
  padding: 0 !important;
  background: unset;
}
article.postype .container .titre h2 {
  font-family: 'Wremena';
  margin-bottom: 5px;
  display: block;
font-size: 4.5vw;
line-height: 4.5vw;

}