/* STYLES.CSS */



/*          /^^                                    /^^
/^                                       /^^
/^/^ /^        /^^         /^^ /^^       /^/^ /^      /^^^^
/^^        /^^  /^^       /^^  /^^       /^^       /^^
/^^       /^^    /^^      /^^  /^^       /^^         /^^^
/^^        /^^  /^^       /^^  /^^       /^^           /^^
/^^          /^^         /^^^  /^^        /^^      /^^ /^^
*/


/* @font-face {
font-family: "RobotoCondensed-Regular";
src: url("../fonts/RobotoCondensed-Regular/Muli-ExtraLight.ttf") format('truetype');
}
@font-face {
font-family: "RobotoCondensed-Bold";
src: url("../fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf") format('truetype');
}
@font-face {
font-family: "RobotoCondensed-BoldItalic";
src: url("../fonts/Roboto_Condensed/RobotoCondensed-BoldItalic.ttf") format('truetype');
}
@font-face {
font-family: "RobotoCondensed-Light";
src: url("../fonts/Roboto_Condensed/RobotoCondensed-Light.ttf") format('truetype');
} */


/*

/^^                     /^^
/^          /^^                     /^^      /^
/^^        /^^  /^^                  /^^        /^^          /^^             /^^ /^^          /^^          /^^^^
/^^  /^^     /^^  /^^     /^^      /^^ /^^      /^   /^^       /^^     /^^      /^^  /^^      /^   /^^      /^^
/^^   /^^     /^^  /^^     /^^     /^   /^^     /^^^^^ /^^      /^^     /^^      /^^  /^^     /^^^^^ /^^       /^^^
/^^  /^^     /^^  /^^     /^^     /^   /^^     /^              /^^     /^^      /^^  /^^     /^                 /^^
/^^        /^^/^^     /^^      /^^ /^^       /^^^^        /^^^     /^^     /^^^  /^^       /^^^^        /^^ /^^
/^^


*/

/*Reset */
html{ height: 100%; }
body{ width: 100%; color:#000; height: 100%; background: #FFF; font-family: 'Noto Sans', sans-serif;margin: 0; padding: 0}
* {  box-sizing: border-box; position: relative; }
img{ max-width: 100%; height: auto;}
ul{ margin: 0; display: block; text-align: left; padding: 0;  }
li{ margin: 0.2em 0 ;  list-style: none; min-height:1.36em; padding-left: 6px; }
::selection { background:rgba(0,0,0,0.05) }
div, section{  box-sizing: border-box; position: relative; display: block;  }
p{ font-family: 'Noto Sans', sans-serif; font-size: 15px; line-height: 1.25; font-weight: 300; margin-block-start:0em;   margin-block-end: 12px; }
h1{ font-family: 'Noto Sans', sans-serif;  margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; }
h2{ font-family: 'Noto Sans', sans-serif; margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; }
a{text-decoration: none; color:#000; outline: none}
/* a:focus{color:var(--colorRed)} */
blockquote { margin-inline-start: 0px; margin-inline-end: 0px; }
strong{ font-weight: bold}
.bold{ font-weight: bolder}
.bolditalic{ font-weight: bold; font-style: italic;}
.invisible{ display: none; }
sup {
    vertical-align: super;
    font-size: smaller;
    line-height: 1;
}


/* dev */

/* .dev div{background-color:#f0F0F0} */
.dev #menu{background:rgba(200, 0, 0, 0.15)}
:root {
  --largmenu: 24.4vw;
  --largSidebar: 24.4vw;
  --colorRed : #cd171a; /*cd171a e1001a*/
}
@media (max-width: 1024px) {
  :root {
    --largmenu: 250px;
    --largSidebar: 250px;
  }

}
@media (min-width: 1228px) {
  :root {
    --largmenu: 300px;
    --largSidebar: 300px;
  }
}

/* layout */
#menu{width: var(--largmenu);;position: absolute;;top: 0;left: 0;padding-bottom: 30px}
#barba-wrapper{width:calc(100% - var(--largmenu)); position: absolute; min-height: 100%;top: 0; left:var(--largmenu); max-width: 1200px}
div.partie_centrale{width:calc(100% - var(--largSidebar)); float: left;}
aside.sidebar{width:var(--largSidebar); float: left; min-height: calc(-15px + 100vh);}
aside.sidebar{padding-top: 15px; padding-left: 15px; padding-right: 15px; max-width: 300px}
.site_container{ margin: 0 auto; max-width: 1600px;}
/* menu */


#menu .menu_content{text-align: center; margin-top:50px}
#menu .menu_header{width: 100%; text-align: center;margin-top:50px;}
#menu .menu_header .logo{width:130px;height: auto;margin: auto}
#menu{font-weight: 700; font-size: 15px}
#menu nav ol{margin:0; padding: 0}

#menu .auteur:after{content:''; position: absolute; width: 200px; height: 1px; background:#000; display: block; left: 50%; transform: translateX(-50%) scaleY(.5);top: 25px; }
#menu a:hover {color:var(--colorRed)}

#menu nav.main_menu{padding:50px 0; text-transform: uppercase;}
#menu nav.main_menu li{padding: 0 0 10px; }
#menu nav.main_menu li.active a{color:var(--colorRed)}
#menu nav.main_menu li a{padding-bottom:10px}
#menu nav.main_menu li a:hover{color:var(--colorRed)}
#menu nav.main_menu a:after{content:''; position: absolute; width: 100px; height: 1px; background:#000; display: block; left: 50%; transform: translateX(-50%) scaleY(.5);top: 25px; }

#menu nav.footer_menu{padding:20px 0 0 }
#menu nav.footer_menu:before{content:''; position: absolute; width: 200px; height: 1px; background:#000; left: 50%; transform:translateX(-50%) scaleY(.5);margin: auto; margin-top:-10px; display: inline-block;}
#menu nav.footer_menu:after{content:''; position: absolute; width: 200px; height: 1px; background:#000; left: 50%; transform:translateX(-50%) scaleY(.5);margin: auto; margin-top:5px; display: inline-block;}
#menu nav.footer_menu .lang{font-size: 12px; font-weight: 300}

#menu nav.contact_menu{margin-top:30px; font-weight: 100; font-size: 12px}
#menu a.link_social:hover .pict{fill: var(--colorRed);}

/* swiper */
div.swiper-slide img{min-width: 100%;min-height: 100%; object-fit: cover;}

/* grid */
.grid-item { width: 200px; }

/* home */
div.galerie_photos_home{height:500px;width: calc(100% - 150px); min-width: calc(1024px - var(--largmenu)); margin-left: 0; overflow: hidden;}
div.galerie_photos_home .swiper-slide{width: calc(100% - 75px)}
div.galerie_photos_home .swiper-slide a {display: block;width: 100%;height: 100%;
}

.home div.navigation{position: absolute; top: 518px; left: calc(100% - 225px);width: 75px}


.home div.navigation .swiper-button-prev{left: 3px; outline: none;}
.home div.navigation .swiper-button-next{right: 3px; outline: none;}
.home div.navigation .swiper-button-prev:after, .home div.navigation .swiper-button-next:after{font-size: 16px;color: #000;}


div.events_en_avant {width: calc(100% - 150px); height:170px; margin:0;  min-width: calc(1024px - var(--largmenu));}
div.events_en_avant .swiper-slide{background: #FFF}

div.events_en_avant .swiper-slide{opacity: 0; transition: opacity 1s; display: none;left: 0}
div.events_en_avant .swiper-slide.activ{opacity: 1; transition: opacity 1s; display: block; left: 0}

div.events_en_avant .col1{width:45%;float: left; padding-right: 5%;}
div.events_en_avant .col2{width:55%;float: left;}
div.events_en_avant .col2::before{content:''; position: absolute; width: 1px; height: 120px; background:#000; display: block; transform: scaleX(.5); margin-top:10px; margin-left: -10px}

div.events_en_avant h1{font-size: 36px; font-weight: 600; min-height:20px; font-family: "fira sans", sans-serif;line-height: 32px;margin-top:12px; margin-bottom: 4px}
div.events_en_avant .sous_titre{font-size: 14px;}
div.events_en_avant h3{font-size:16px;font-style: italic;margin:10px 0 5px; font-weight: normal; color:var(--colorRed)}
 .dates_list{font-size: 14px; margin-bottom: 0}
 .date_item{font-size: 14px; font-weight: 600;}
 .horaire_item{font-size: 14px;  font-weight: 600;}
 .text_item{font-size: 14px;}
 .mention{font-size: 14px;  color:var(--colorRed)}
 .mention:before{content:'['}
 .mention:after{content:']'}
/* AGENDA */

div.agenda_header{height: 135px;margin-bottom: 25px; }

div.agenda_header .mois_annee{bottom:0px; position: absolute;display: block; font-size: 14px; text-transform: uppercase; display: inline-block; }
div.agenda_header .mois_annee .annee::before{content:''; width: 80%; height: 1px; background:#000; display: block; transform: scaleY(.5);margin:0 auto 7px}
div.agenda_header .mois_annee .mois::after{content:''; width: 80%; height: 1px; background:#000; display: block; transform: scaleY(.5);margin: 7px auto 0}
div.agenda_header .mois_annee a{padding:5px; color:var(--colorRed)}

div.filtre {
  position: absolute;
  bottom: 0;
  right: 25px;
  left: calc(210px * 3);
  transform: translateX(-100%);
  width: 350px;
}
@media (min-width:1110px) {
  div.filtre {left: calc(210px * 4);}
}
@media (min-width:1350px) {
  div.filtre {left: calc(210px * 5);}
}
div.filters {font-size: 14px; color: #999; text-align: right;}
div.filters button{background: none; border: none; cursor: pointer;font-size: 14px; color: #999; text-transform: uppercase;}
div.filters button::after{content:""; display: inline-block; width: 7px; height: 7px; border:1px solid #999; margin-left: 8px}
div.filters button.is-checked::after{background: #000; border-color: #fff;}
div.filters button.is-checked{color: #000; }

.grid{min-width: 640px;}
.grid-item{margin-left: 10px; width:200px; min-height: 320px;}
.grid-item div.img {height:150px; background:center center; background-size:cover}
.grid-item div.img a{width: 100%; height: 100%; display: block;}

.grid-item h2{ font-family: "fira sans", sans-serif; font-size: 16px; line-height: 1.1; margin-top: 10px}
.grid-item h3{font-size:12px;font-style: italic;margin:5px 0 5px; font-weight: normal; color:var(--colorRed)}
.grid-item .dates_list{font-size: 12px; margin-bottom: 0}
.grid-item .date_item{font-size: 12px; font-weight: 700;}
.grid-item .horaire_item{font-size: 12px;  font-weight: 700;}
.grid-item .text_item{font-size: 12px;}
.grid-item .mention{font-size: 12px;  color:var(--colorRed)}


/* Event */
div.galerie_photos{height: 400px;width: 100%;overflow: hidden;}
div.gal_photo{height: 400px;width: 100%;}
div.gal_photo img{width: 100%; height: 100%; object-fit: cover;}

div.partie_centrale{padding-bottom: 50px}

div.partie_centrale div.header{margin-bottom: 20px}
div.partie_centrale h1{font-size: 36px; font-weight: 600; font-family: "fira sans", sans-serif;line-height: 32px;margin-top:12px; margin-bottom: 4px}
div.partie_centrale .sous_titre{font-size: 14px;}
div.partie_centrale .contenu_central{padding-right: 30px}
div.partie_centrale .contenu_central:after{content:''; position: absolute; width: 1px; height: 100%; background:#000; display: block; transform: scaleX(.5); right: 0; top: 0}

div.partie_centrale section{margin-bottom: 40px}
div.partie_centrale .liens h3:after{content:''; position: absolute; width: 18px; height: 2px; background:#000; display: block; margin-top:5px}
div.partie_centrale .liens ul li{padding: 0}

div.partie_centrale .liens ul li a:hover {color:var(--colorRed)}
div.partie_centrale a:hover {color:var(--colorRed)}

div.partie_centrale .paragraphe ul {margin-left: 15px;}
div.partie_centrale .paragraphe ul li{list-style: disc; padding-left: 0}
div.partie_centrale .quote blockquote{margin-bottom: 0}
div.partie_centrale .quote blockquote p:last-child{margin-bottom: 5px}
div.partie_centrale .informations{font-size: 12px; line-height: 1.25; color:#333; }
div.partie_centrale .informations ol{padding-left: 5px;}
div.partie_centrale .informations li{list-style: none; counter-increment: li}
div.partie_centrale .informations li::before {content: counter(li); color:var(--colorRed);
  display: inline-block; width: 1em; margin-left: -1.5em;
  margin-right: 0.5em; text-align: right; direction: rtl}
  aside.sidebar .sections{margin-bottom: 60px; margin-top:5px}
  aside.sidebar section{margin-bottom: 30px}
  aside.sidebar section.informations p{font-size: 12px; line-height: 1.35; color:#555; margin:0; }
  aside.sidebar section.infos_dates{font-size: 14px; line-height: 1.25;}
  aside.sidebar section.infos_dates h3{font-size: 20px; line-height: 1.25; font-weight: normal; color:#cd171a; font-style: italic; margin:0; margin-bottom: 12px}
  aside.sidebar a:hover {color:var(--colorRed)}

  aside.sidebar .nav_next_prev{margin-bottom: 30px; font-size: 12px; bottom: -25px; position: absolute;}
  aside.sidebar .nav_next_prev a{color:#888;}
  aside.sidebar .nav_next_prev a:hover span{border-bottom: 1px solid #888;}
  aside.sidebar .nav_next_prev .sep{margin:0 7px}

  .dates_workshops{margin-bottom: 20px;font-size: 12px;font-weight: bold;}
  .dates_workshops a{margin-bottom: 5px;}
  .dates_workshops a span:after{content: '}';font-size: 22px;display: inline-block;margin-top: -8px;vertical-align: top;margin-bottom: 10px;}
  .dates_workshops a:hover{color:var(--colorRed)}


  /* EVENT / DATES & WORSHOPS */

  .eventdates .header{margin-bottom: 50px;}
  .eventdates h1{font-size: 36px; font-weight: 600; font-family: "fira sans", sans-serif;line-height: 32px;margin-top:12px; margin-bottom: 4px}
  .eventdates .sous_titre{font-size: 14px;}
  .bandeau_img{width: 300px;height: 200px;overflow: hidden;}
  .bandeau_img img{width: 100%;height: 100%;object-fit: cover;}
  .sommaire {  width: 150px;  float: left;}
  .sommaire a{color:#999; font-style:italic;font-size: 18px;margin-bottom:5px; display: inline-block;}
  .sommaire a.active{color:var(--colorRed)}
  .contenu_lateral{display: block;float: left;padding-left: 20px;width: calc(100% - 150px); margin-bottom: 50px}
  .contenu_lateral::before {content: '';position: absolute;width: 1px;height: 100%;background: #000;display: block;transform: scaleX(.5);left: 0;top: 0; min-height: 60px;}
    .contenu_lateral *:first-child{margin-top:0}

  /* Events */
  .events div.frise_verticale{height: 100vh; width: 200px;margin:0; position: fixed; top:0}
  .events div.frise_verticale a{width: 100%; height: 100%; display: block;}
  .events div.frise_verticale .swiper-slide{height:180px;}
  .events div.titres{position: relative; padding:30px 0; left: 250px;}
  .events div.titres{display: table-cell; vertical-align: middle; height: calc(100vh - 17px)}

  .events div.titres a:hover{color:var(--colorRed)}
  .events div.titres .titre{font-size: 32px; line-height: 30px; font-weight: 600; font-family: "fira sans", sans-serif; }
  .events div.titres .sous_titre{font-size: 14px; font-weight: 300}


  /* a PROPOS */

  .apropos section{}
    .apropos section h3{font-size: 15px; line-height: 1.25; font-weight: normal;color:var(--colorRed); font-style: italic; margin:0; margin-bottom: 12px; text-transform: uppercase;}

    /* .apropos section div.col{width: 50%;float: left;} */
    /* .apropos section.imagebio div.col .content{padding-left: 7px}
    .apropos section div.col img{max-width: 100%;} */

    .apropos section.equipe div.col1_4{width: 33%;float: left;}
    .apropos section.equipe div.col1_4 img{max-width: 90%}
    .apropos section.equipe div.membres{clear: both;}

    .apropos section.espacepro input{border:1px solid #999; background: white; border-radius: none; padding:5px 10px}
    .apropos section.espacepro input[type=submit]{cursor: pointer;}
    .apropos section.espacepro input[type=submit]:hover{color:#fff; background: #000; border:1px solid #000; }
    div.clear{clear: both;}

    .apropos .sidebar {padding-top:70px}
    .apropos .sidebar section.equipe div img{max-width: 90%}
    .apropos .sidebar section.equipe p{font-size: 12px;line-height: 1.35;color: #555;}


    @media (max-width: 1023px) {
      .events div.frise_verticale{
        display: none;
        width:100%;
        height:400px;
        display: block;
        position: relative;
      }
      .events div.frise_verticale .swiper-slide {
          height:100%;
      }
      div.partie_centrale{width:calc(100%); float: none;}

      div.partie_centrale .contenu_central::after {content: '';
        position: relative;
        width: 100%;
        height: 1px;
        background: #000;
        display: block;
        transform: scaleY(.5);
        right: 0;
        top: 30px;
      }
      .events div.titres {
        position: relative;
        padding: 50px 0;
        left: 0;
        width: 100%;
        display:block;
        height: auto;
      }

      aside.sidebar {
        margin-top: 15px;
        padding-left: 0;
        padding-right: 15px;
        max-width: 100%;
        width: 100%;
      }
      .home div.navigation{left: calc(1024px - var(--largmenu) - 75px);}

      .grid{
        width: 430px;
        min-width: 0;
      }
      div.agenda_header {
          height: auto;
          margin-bottom: 25px;
          padding-top: 50px;
          max-width: 430px;
      }
      div.agenda_header .mois_annee {
        width: 100%;
        position: relative;
        margin-top: 30px;
        text-align: center;
      }
      div.filtre {
        position: relative;
        margin-top: 12px;
        text-align: center;
        right: auto;
        left: auto;
        transform:none;
        width: 100%;
      }
      div.filtre div.filters {
        text-align: center;
      }

      /* home */
      div.galerie_photos_home {
        height: 500px;
        width: 100%;
        min-width: 100%;
        margin-left: 0;
      }
      div.events_en_avant {
        padding-top:30px;
        width: 100%;
        height: 300px;
        margin: 0;
        min-width:  100%;
        padding-bottom:50px;
      }
      div.events_en_avant .col1{
        padding: 0 15px;
        width: 100%;
        float: none;;
      }
      div.events_en_avant .col2 {
        padding: 0 15px;
        width: 100%;
        float: none;
      }
      .home div.navigation {
        left: auto;
        right: 0px;
      }
      div.events_en_avant .col2::before {
        display:none;
      }

      aside.sidebar {
          padding-bottom: 60px;
          min-height: auto;
      }

      /* events */
      aside.sidebar .nav_next_prev {
          bottom: auto;
          position: relative;
      }

      /* Toutes les dates */
        .bandeau_img{width: 100%;height: 200px;}
        .sommaire {width: 100%;float: none;text-align: center; margin-bottom: 20px;}
        .sommaire a{margin-right: 10px}
        .contenu_lateral {display: block;float: none;padding: 0 15px;width: auto;margin-bottom: 50px;}
        .contenu_lateral::before{content: none}
  }


  @media (max-width: 600px) {
    #menu_toggle {
      display: block;
      position: absolute;
      top: 20px;
      right: 0px;
      height: 22px;
      width: 30px;
      transform: translateX(-50%);
      cursor: pointer;
    }
    #menu_toggle span { display: block; position: absolute; left: 0; height: 1px; width: 100%; background: #000; transition: transform .3s ease, left .3s ease; }
    #menu_toggle span:nth-child(1) { top: 0; transform-origin: top left; }
    #menu_toggle span:nth-child(2) { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
    #menu_toggle span:nth-child(3) { bottom: 0; transform-origin: bottom left; }

    .open #menu_toggle span:nth-child(1) { transform: rotate(45deg); }
    .open #menu_toggle span:nth-child(2) { transform: scale(0); }
    .open #menu_toggle span:nth-child(3) { transform: rotate(-45deg); }
    .open #menu_toggle span:nth-child(1) { left: 4px;  }
    .open #menu_toggle span:nth-child(3) { left: 4px;  }

    #menu .menu_header .logo {
      margin-top: 0px;
      margin-bottom: 0px;
        width: 150px;
    }
    #menu {
      margin-bottom: 0px;
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      padding-bottom: 30px;
      height: 230px;
      transition: height .4s;
      overflow: hidden;
    }
    #menu.open{
      height: 800px;
    }
    #barba-wrapper {
      width: 100%;
      position: relative;
      min-height: 100%;
      top: auto;
      left: 0;
    }
    div.header{padding: 0 15px;}
    div.partie_centrale .contenu_central{padding: 0 15px;}
    aside.sidebar {padding: 0 15px; min-height: auto;}
    aside.sidebar .nav_next_prev {
      position: absolute;
      bottom: -110px;
      padding-bottom: 35px;
      text-align: center;
      width: 100%;
      left: 0;
      padding-top: 20px;
    }
    .events div.frise_verticale{display: none;
      width:100%;
      height:300px;
      display: block;
      position: relative;
    }
    .events div.frise_verticale .swiper-slide{height:auto;}
    .events div.titres {
      margin-top:50px;
      margin-bottom:50px;
      left: 0;
      display: block;
      height: auto;
    }
    /* home */
    div.galerie_photos_home {
      height: 500px;
      width: 100%;
      min-width: 100%;
      margin-left: 0;
    }
    div.events_en_avant {
      padding-top:30px;
      width: 100%;
      height: 300px;
      margin: 0;
      min-width:  100%;
      padding-bottom:50px;
    }
    div.events_en_avant .col1{
      padding: 0 15px;
      width: 100%;
      float: none;;
    }
    div.events_en_avant .col2 {
      padding: 0 15px;
      width: 100%;
      float: none;
    }
    .home div.navigation {
      left: auto;
      right: 0px;
    }
    div.events_en_avant .col2::before {
      display:none;
    }

    /* agenda */
    .grid{
      width: 100%;
    }
    div.agenda_header {
        max-width: 100%;
        margin-bottom: 70px;
    }
    div.agenda_header .mois_annee {
      width: 100%;
      position: relative;
      margin-top: 30px;
      text-align: center;
    }

    div.filtre {
      position: relative;
      margin-top: 12px;
      text-align: center;
      right: auto;
      left: auto;
      transform:none;
      width: 100%;
    }
    div.filtre div.filters {
      text-align: center;
    }

    .grid-item{
      margin-left:0 ;
      width: 100%;
      min-height: auto;
      margin-bottom: 25px;
    }
    .grid-item div.img{
      height: 200px;
    }
    .grid-item .text_item{
    font-size: 15px;
    line-height: 1.25;
    }
    .grid-item .date_item{font-size: 15px;}
    .grid-item h3 {font-size: 17px;}
    .grid-item h2 {font-size: 20px;}
    .grid-item h2, .grid-item h3, .grid-item p{margin-left:15px;margin-right:15px;}

  }