:root {
      --main_color: #eb4178;
      --main_bkg_color: #280931;
      }

/*=======================================================================================================*/
/*==========================================  BODY HTML  ================================================*/
    html{scroll-behavior:smooth; overflow-y: scroll; overflow-x: hidden;}
    body{
      font-family:'Roboto', sans-serif;
      display: flex;
      flex-direction: column;
      height: 100vh;
      line-height:1.8;}
      body .fullbkg{overflow:hidden; position:absolute; height:100%; width:100%;}
      body .fullbkg::after{content:''; position:absolute; height:100%; width:100%; background-size:cover;}

/*cible les très petits écran de téléphone ou tablette*/
@media screen and (max-width: 320px) and (orientation: portrait),
       screen and (max-height: 320px) and (pointer: coarse) {

}



/*=======================================================================================================*/
/*============================================  EFFECTS  ================================================*/
    /*interactions*/
    .noselect {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
    /* visuel */
    .blured {filter: blur(20px); transform:scale(110%); background-size:cover;}
    .opac_3 {opacity:.3;}

/*=======================================================================================================*/
/*============================================  TEXTS  ==================================================*/

    h1,h2,h3{text-align:left;}
    /*txt*/
    .page_title1 {font-size:1.2em; margin-bottom:30px; }
    .white {color:#fff;}

    /* liens */
    a.arrow {position:relative; display:block;}
    a.arrow > span{position:relative; display:inline-block; color:var(--main_color); margin-left:25px;}
    a.arrow > span::after{position:absolute; content:'\279C'; left:-23px; transition:left 0.3s;}
    a.arrow > span::before{position:absolute; content:''; background:var(--main_color); width:100%; height:1px; left:0; bottom:-3px; opacity:0; transition:all 0.3s;}
    a.arrow:hover > span::after{left:-20px;}
    a.arrow:hover > span::before{bottom:2px; opacity:1;}

    .styled_links a {position:relative; display:inline-block; color:var(--main_color); transition:all 0.3s;}
    .styled_links a::after{position:absolute; content:''; background:var(--main_color); width:100%; height:1px; left:0; bottom:-5px; opacity:0; transition:all 0.3s;}
    .styled_links a:hover::after{bottom:2px; opacity:1;}


/*=======================================================================================================*/
/*============================================  SPACES  =================================================*/

    :root {
      /*taille de page et marge */
      --gouttiere: calc(8px + 8vw);
      --gouttiere_sm: calc(15px + 3.5vw);
      --page_max_w: 900px;
    }

    /* sections & gouttieres */
    section {position:relative; width:100%;}
      section .center_bloc {position:relative; width:100%;}
      section .gouttiere {position:relative; width:100%; padding:0 var(--gouttiere); max-width:var(--page_max_w); transition:padding 1s;}
      /*target safari*/
      @media all and (-webkit-min-device-pixel-ratio: 0){section .gouttiere {transition:none;}}
        .gouttiere_center {position:relative; width:100%; padding:0;}
          .gouttiere_center .part{position:relative; display:flex; text-align:center; text-align:center;}

    /* blocs */
    .bkg {height:100%; width:100%; position:absolute; background-position:center; background-repeat:no-repeat; background-size:cover; box-sizing:border-box}
    .absolute {position:absolute; height:100%; width:100%;}
    .flex_center {display:flex; align-items:center; justify-content:center;}
    .flex_space-between {display:flex; align-items:center; justify-content:space-between;}
    .absolute_flex_center {position:absolute; height:100%; width:100%; display:flex; align-items:center; justify-content:center;}
    @media screen and (max-width: 767px),
           screen and (max-height: 700px) {
            section .gouttiere {padding:0 var(--gouttiere_sm);}
            section .absolute_flex_center { position:relative;}
            section .absolute_flex_center.strip { display:none; }
    }
    .half_col{display:grid; grid-gap: 20px; grid-template-columns: auto auto ;}
      .half_col > .half2{text-align:right;}
      .half_col .half2{padding-top:8px;}
      .half_col .half2 a{margin-bottom:6px;}
        @media screen and (max-width: 767px) {
          .half_col{grid-gap: 0px; grid-template-columns: 1fr ;}
          .half_col > .half2{text-align:left;}
          .half_col .half2 a{display:inline-block; margin-right:30px;}
        }
        @media screen and (max-device-width: 767px) and (orientation: portrait) {
          .half2{ margin-top:15px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
        }

    /*margins */
    .mt10 {margin-top: 10px} .pt10 {padding-top: 10px} .mb10 {margin-bottom: 10px} .pb10 {padding-bottom: 10px}
    .mr10 {margin-right: 10px} .pr10 {padding-right: 10px} .ml10 {margin-left: 10px} .pl10 {padding-left: 10px}
    .mt20 {margin-top: 20px} .pt20 {padding-top: 20px} .mb20 {margin-bottom: 20px} .pb20 {padding-bottom: 20px}
    .mr20 {margin-right: 20px} .pr20 {padding-right: 20px} .ml20 {margin-left: 20px} .pl20 {padding-left: 20px}
    .mt30 {margin-top: 30px} .pt30 {padding-top: 30px} .mb30 {margin-bottom: 30px} .pb30 {padding-bottom: 30px}
    .mr30 {margin-right: 30px} .pr30 {padding-right: 30px} .ml30 {margin-left: 30px} .pl30 {padding-left: 30px}

/*=======================================================================================================*/
/*===============================================  TRAME  ===============================================*/

    .trame{height:100%; width:100%; position:absolute; background-position:center; background-size:cover; box-sizing:border-box;
      background-image: url("../svg/trame_magenta.svg"); background-size:150px 150px; background-repeat:repeat; position:absolute; content:''; opacity: 0.02;
      animation: opacityAnimation 20s infinite, moveBackground 60s linear infinite;}
    .trame.on_video{z-index:3;}
    /*
    .trame.gradient{
        -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0.6))); 
        mask-image: gradient(linear, left 90%, left bottom, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0.6))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0.25; }
    */


      @keyframes opacityAnimation {
          0% { opacity: 0.02; }
          45% { opacity: 0.05; }
          50% { opacity: 0.1; }
          60% { opacity: 0.05; }
          100% { opacity: 0.02; }
      }
      
      @keyframes moveBackground {
          0% { background-position: center top; }
          100% { background-position: center bottom; }
      }

        
/*=======================================================================================================*/
/*===============================================  STRIP  ===============================================*/


  .strip {position:absolute; height:15px; bottom:0; width:100%; opacity:.16; transition:all 0.5s;
  background: -moz-linear-gradient(left,  rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%);}
  .strip div {background-image: url("../svg/home-strip.svg"); background-size:40px 45px; background-repeat:repeat; position:absolute; width:100%; animation:stripintro 0.8s ease 0s 1 normal forwards; content:'';}
  .strip_line {background:var(--main_color); opacity:0.8; position:absolute; transition:all 0.5s; width:2px; height:0px;}
  .strip.strip_on_banner{bottom:calc(10px + 1vh); opacity:.25;}
    body.home_index .strip{display:none;}


  @keyframes stripintro {
  0%   { height:0; bottom:50%;}
  100% { height:100%; bottom:0;}
  }

  @media screen and (max-width: 767px),
  screen and (max-height: 700px) {
    section a .txt > .strip {display:block; top:0; bottom:auto;}
  }
  @media screen and (max-device-width: 767px) and (orientation: portrait) {
    .strip div {background-size:30px 33px;}
  }

/*=======================================================================================================*/
/*===========================================  PAGE - INDEX  =============================================*/
    :root {
      /* hauteur des banners */
      --index_banner_h: 22vh;
      --index_banner_min_h: 150px;
      --index_banner_max_h: 300px;
    }

    /* liens (creations) -------------------------- */
    #page_index {position:relative; min-height:calc(100vh - 100px); display:flex; align-items:flex-start; justify-content:center; overflow:hidden;}

    #page_index .bkg {background-image: url("../img/home/home_1920x1080.jpg"); background-size:cover;}
    #page_index .interior {position:relative; height:100%; padding:calc(80px + 8vh) 0 calc(50px + 2vh) 0;}
      #page_index a.banner {position:relative; width:100%; height:var(--index_banner_h); min-height:var(--index_banner_min_h); max-height:var(--index_banner_max_h); margin-bottom:calc(5px + 1.5vh);
                            display:grid; column-gap: 16px; grid-template-columns: minmax(calc(180px + 3vw), calc(80px + 14vw)) auto; overflow:hidden;}
        /*bkg*/
        #page_index a.banner .full {position:absolute; width:100%; height:100%; background-position:center; background-repeat: no-repeat; }
        #page_index a.banner .full.blured {opacity:.24; transition:opacity 0.4s}
        #page_index a.banner:hover .full.blured {opacity:0;}
        /*img*/
        #page_index a.banner .left{position:relative; height:100%; box-sizing:border-box; overflow:hidden;}
          #page_index a.banner .main_img {position:absolute; transition:all 0.4s; width:100%; height:100%; background-size:cover; background-position:center; background-repeat: no-repeat; }
          #page_index a.banner:hover .main_img{transform:scale3d(1.07,1.07,1.07);filter: brightness(122%);}
        /*txt*/
        #page_index a.banner .right{transition: background 0.4s; position:relative; height:100%; padding:20px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
        #page_index a.banner:hover .right{background:rgba(255,255,255,.05);}
          #page_index .strip_line {height:0%; left:0; width:2px;}
          #page_index a:hover .strip_line {height:100%;}
          #page_index a.banner .right .txt_place{text-align:left; position:relative; width:100%; left:-16px; transition:all 0.4s;}
          #page_index a.banner:hover .right .txt_place{left:0px;}
            #page_index a.banner .right .txt_place h3 {width:100%;}
            #page_index a.banner .strip{position:relative; top:-15px;}
            #page_index a.banner:hover .strip {width:0%;}
            #page_index a.banner h3.dates {position:relative; color:var(--main_color); font-weight:300;}


/*=======================================================================================================*/
/*==========================================  PAGE - DETAIL  ==============================================*/


    /* BANNER -------------------------- */
    :root {
    /* hauteur des banners */
    --page_banner_h: 40vh;
    --page_banner_min_h: 320px;
    --page_banner_max_h: 500px;
    }

    #page_banner {background:#000; position:relative; width:100%; height:var(--page_banner_h); min-height:var(--page_banner_min_h); max-height:var(--page_banner_max_h); overflow:hidden; display:flex; justify-content:center;}
    #page_banner .full {position:absolute; width:100%; height:100%; background-position:center; background-repeat: no-repeat; }
    #page_banner .banner_center{position:relative; z-index:3; height:100%; width:90%; max-width:1200px; margin:0 auto;}
    #page_banner .banner_center a.btn{position:absolute; top:0; bottom:0; width:20vw; max-width:100px; display:block; overflow:hidden;}
    #page_banner .banner_center a.prev{left:0;}
    #page_banner .banner_center a.next{right:0;}
    #page_banner .banner_center a.btn::after{opacity:0.3; transform:scale(1); display:flex; position:absolute; top:0; bottom:0; width:100%; background-size:40%; background-position:center; background-repeat:no-repeat; content:''; transition:all .4s;}
    #page_banner .banner_center a.prev::after{background-image:url("../svg/prev_img.svg");}
    #page_banner .banner_center a.next::after{background-image:url("../svg/next_img.svg");}
    #page_banner .banner_center a.btn:hover::after{opacity:1;  transform:scale(1.05);}
    #page_banner .overlay {background:#000; opacity:.6;}
    #page_banner .main_img {background-size:contain;}

    @media screen and (max-width: 767px) {
      #page_banner .banner_center {width:100%; }
      #page_banner .main_img {background-size:cover;}
    }
    @media screen and (max-device-width: 767px) and (orientation: portrait) {
      #page_banner {height:38vh; min-height:230px; max-height:400px;}
      #page_banner .banner_center a.prev::after{background-position:15% center;}
      #page_banner .banner_center a.next::after{background-position:85% center;}
    }

/* PREV NEXT -------------------------- */

    #prev_next {background:#000; position:relative; width:100%; height:65px; display:flex; align-items:center; justify-content:center;}
      #prev_next .part {position:relative; height:100%; padding:0 27px; display:flex; align-items:center; justify-content:center;}
        #prev_next a {transition:all 0.4s; font-size:0.7em; color:#777;}
        #prev_next a::after {background:#777; opacity:0.7; transition:all 0.4s; mask-repeat:no-repeat; mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; content:''; position:absolute; width:40px; height:40px;}
        #prev_next a:hover {font-size:0.7em; color:var(--main_color);}
        #prev_next a:hover::after {opacity:1; background:var(--main_color);}
        #prev_next a:first-child::after {right:-10px; mask-image:url("../svg/prev.svg"); -webkit-mask-image:url("../svg/prev.svg");}
        #prev_next a:last-child::after {left:-10px; mask-image:url("../svg/next.svg"); -webkit-mask-image:url("../svg/next.svg");}
        #prev_next a:hover:first-child::after {right:-5px;}
        #prev_next a:hover:last-child::after {left:-5px;}
        #prev_next h2 {font-size:1.2em; color:#fff;}

        @media screen and (max-width: 767px) {
          #prev_next a, #prev_next a:active {font-size:0.9em; color:#999;}
        }

/* TEXTE -------------------------- */
    :root {
    /* espace texte avec banner et footer */
    --page_interior_padding: calc(12px + 4vh) 0 calc(20px + 5vh) 0;
    }

    .page_paddings .page_interior {position:relative; padding:var(--page_interior_padding); text-align:justify;}
    @media screen and (max-width: 767px) {
    .page_paddings .page_interior {padding:8vh 0 8vh 0; margin: 0 auto;}
    }
      #page_detail .page_container{display:flex;}
        #page_detail .page_row{position:relative; width:100%;}
          #page_detail .pdf-container {position:absolute; right:0; height:70px; padding:10px 20px; min-width:50px; display:flex; align-items:center; border:1px solid #ddd; background:rgb(245, 245, 245); border-radius:5px;}
            #page_detail .label_pdf{position:relative; display:inline-block; text-align:right; margin-right:8px; font-size:.8em; color:#777; line-height:1.4}
            #page_detail .pdf-container a{transform:scale(1.3); background-image:url('../img/icons/pdf_icon.png'); display:inline-block; height:100%; width:40px; margin:0 0 0 12px; background-size:contain; background-position:center; background-repeat:no-repeat; transition:all .4s;}
            #page_detail .pdf-container a:hover{transform:scale(1.5);}
          #page_detail h1{color:#111; margin:0 0 5px 0; font-size:2.2em; line-height:1.1;}
          #page_detail .baseline{color:#000; margin: 0 0 30px 0; font-weight:bold; text-align:left;}
          #page_detail .inter{display:inline-block; color:var(--main_color); margin: 0 20px; font-size:1em; transform:scaleY(2);}
          #page_detail .title-color{color:#111; margin: 50px 0 5px 0; font-size:1.1em; font-weight:bold; transition:color 0.3s}
            #page_detail .show-description:hover {color:var(--main_color); cursor:pointer;}
            #page_detail .title-color span{color:#777; font-weight:normal; font-size:0.7em;}
          #page_detail ul{position:relative; left:12px; list-style-image: url('../img/web/list-style.gif'); padding: 0;}
          #page_detail li{margin: 4px 0 6px 5px;}
          #page_detail .description{border:1px solid #aaa; margin-top:20px; border-radius:3px; margin-bottom:20px;  padding:40px 60px 40px 60px;}
          @media screen and (max-width: 767px) {
            .page_paddings .page_interior {padding:35px 0 45px 0;}
            #page_detail h1{font-size:1.8em;}
            #page_detail .description{padding:20px 0 0 0; border:none; border-top:1px solid #888; border-radius:none;}
          }
          @media screen and (max-device-width: 767px) and (orientation: portrait) {
            #page_detail .inter{margin: 0 10px;}
          }
          #page_detail .date_table{display:grid; grid-template-columns: auto auto auto 1fr; line-height:2.5;}
          #page_detail .date_table span.inactive{color:#888;}
          #page_detail .date_table a.date_web{color:var(--main_color); position:relative; display:inline-block; margin-left:40px; }
          #page_detail .date_table a.date_web::after{position:absolute; content:'\279C'; left:-24px; transition:left 0.4s;}
          #page_detail .date_table a.date_web:hover{color:green;}
          #page_detail .date_table a.date_web:hover::after{left:-19px;}
          #page_detail .date_table span.border{display:inline-block; border-bottom:1px solid #888; padding-right:calc(16px + 3vw)}
          #page_detail .date_table span.border:nth-last-child(-n+4){border-bottom:none;}

          @media screen and (max-width: 767px) {
            #page_detail .date_table{grid-template-columns: 1fr; line-height:1.8;}
            #page_detail .date_table span.border{border-bottom:none;}
            #page_detail .date_table span.border:nth-of-type(4n-1){border-bottom:1px solid #888; padding-bottom:0.7em}
            #page_detail .date_table span.border:nth-of-type(4n-3){ padding-top:0.7em}
            #page_detail .date_table span.border:first-child{border-top:1px solid #888;}
          }


/*=======================================================================================================*/
/*=============================================  LIGHTBOX  ==============================================*/

#lightbox {position:fixed; width:100%; height:100%; background:rgba(0,0,0,1);z-index:990;}
  #lightbox .gouttiere{position:relative; width:100%; height:100%;}
    #lightbox .frame{position:relative; width:100%; height:100%; flex-direction:column;}
      #lightbox .frame .close{position:relative; width:60px; height:60px; margin-bottom:20px; background:rgba(255,255,255,0); border:1px solid rgba(255,255,255,0); border-radius:50%; cursor:pointer; transition:all .4s;}
      #lightbox .frame .close::before,
      #lightbox .frame .close::after{position:absolute; content:''; top:50%; left:25%; width:50%; height:1.5px; background:#777; transform:scale(1) rotate(45deg); transition:all .4s;}
      #lightbox .frame .close::before{transform:scale(1) rotate(-45deg);}
      #lightbox .frame .close:hover{border:1px solid rgba(255,255,255,.2);}
      #lightbox .frame .close:hover::before{transform:scale(1.15) rotate(135deg);}
      #lightbox .frame .close:hover::after{transform:scale(1.15) rotate(225deg);}
      #lightbox_frame{position:relative; background:rgba(255,255,255,.05);  border:1px solid rgba(255,255,255,.05); width:100%; border-radius:5px; height:0; padding-bottom: 56.25%; overflow:hidden; }
        #lightbox_frame iframe,
        #lightbox_frame object,
        #lightbox_frame embed {position: absolute; top:0; left:0; width:100%; height:100%; border-radius:5px;}