/* On importe le fichier LESS qui liste toutes les variables : */
@import "variables.less";

#main-slider {
    position:relative;
    z-index:2;

    .caroufredsel_wrapper {
        width:100%;
        .home-carousel {
            width:100%;
            article {
              width: 752px;
              margin: 0 auto;
              height: 425px;
              display: block;
              float: left;
            
              &.next,&.prev {
                opacity: 0.5;
              }

              &.active .slide-picture-text {
                    visibility: visible;
              }
              
              .slide-picture-text {
                visibility: hidden;
                position: relative;
                top: -23px;
                left: 31px;
                z-index: 2;
                .field-name-field-hi-cm-copyright {
                    @copyright;
                }

                .soutenez,.parrainez {
                    position: relative;
                    top: -80px;
                }
              }

              &:hover {
                cursor:pointer;
              }
            }
        }
    }
    #pager {
        width: 692px;
        margin: 0 0 0 -346px;
        position: absolute;
        top: 385px;
        left: 50%;
        z-index: 100;
        text-align: center;

        a {
            .box-shadow(0px 0px 5px #000);
            border-radius: 15px;
            background-color: #A2A19F; /* fallback IE for unsupported rgba */
            /*background-color: rgba(255,255,255,0.5);*/
            display: inline-block;
            width: 15px;
            height: 15px;
            margin: 0 20px 0 0;

            &.selected {
               background-color: #fff;
            }

            span {
                display: none;
            }
        }
    }
}

 /*---------- = bouton parrainez/ soutenez ----------*/
    #main-slider {
      .slide-picture-text {
        .btn {
          @box-sizing; @relative; min-height:43px; padding:13px 53px 8px 35px;
          .boutonMColor (#fff, right 10px top -1848px @orange);
          .s(1em); @ArialBk; @normal;

          &:before {content:""; @absolute; .w(70px); .h(60px); }
        }
      }

      .soutenez, .parrainez{/*@absolute; bottom:236px; right:0; */@f-right;
        a{margin-bottom:0;}
      }

      .soutenez {
        .btn:before {top:-12px;left:-27px; .spriteDon(left -369px);/*bg main moyenne orange*/}
      }

      .parrainez {
        .btn { padding-left:45px;
          &:before {top:-12px;left:-27px; .spriteDon(left -710px);/*bg coeur gros orange*/}
        }
      }
    }

  /* Urgence */
    #main-slider {
      .urgence {
        .slide-picture-text .btn{ background-color:@red;}
        .soutenez .btn:before { .spriteDon(left -427px);/*bg main moyenne rouge*/}
        .parrainez .btn:before {.spriteDon(left -647px);/*bg coeur moyen rouge*/}
      }
    }


/*--------- = Refonte HOME - ticket 226 ----------*/
    .front .titre-section {
      .s(2.5em);
    }

    .front #content {
       background: none;
       margin-top:-32px;
       z-index:1;
       @relative;
       .section-content{
         padding-top:32px;
       }
     }
     #field-words {
       background: @greyLight;
     }


/*---------- = Paroles de terrain ----------*/
    /* structure */
    .news-refs, .homepage-right-column{@inlineB; vertical-align:top;}
    .block-two-col{overflow:hidden; padding-bottom:65px;}

    .news-refs{max-width:74.02%;
      img{.radius;}
    }

    .homepage-right-column{max-width:22.52%; margin-left:2.72%; float:right;}

    /* news */
    .news-ref-item{.separation(0 0 3px 0); padding:10px 0; clear:both; overflow:hidden;
      .country{ @bold; .s(.688em); @maj; line-height:1em; color:@blue; @block;}
      .date{@bitterI; .s(.750em); color:@blue;}
      .title{.s(1em); 
        a{color:@txtdarkBlue; }
      }
      .teaser{.s(.813em);
        p:last-child{margin-bottom:0;}
      }
      .news-ref-small_thumb{float:right; margin-left:5px;}

      &.first{padding-top:0;
        .title{.s(1.375em);}
      }
    }
    .all-link{@maj; float:right; .s(.875em); @bold; margin-top:5px;
      a{.bk(url('../images/fleche.png') right 4px no-repeat); padding-right:19px;}
      span{@ArialBk; @normal;}
    }

    /* news mise en avant */
    .list-news-ref{float:left; .w(41%);}
    .news-ref-big-thumb{float:left; margin-left:32px; @relative; 
      &:before{content:''; .w(28px); .h(76px); .sprite(left -2965px); /* triangle blanc déco à droite */ @absolute; top:75px; left:-1px;}
      .copyright{@copyright; @absolute; bottom:10px; right:10px;}
    }


  /*---------- = Engagement ----------*/
    .engagement{text-align:center; margin-bottom:73px;
      img{.radius;}
      .engagement-item{@inlineB; max-width:205px; margin-left:50px; vertical-align:top; .w(24.5%); @relative; @box-sizing; padding-bottom:60px;
        &:first-child{margin-left:0;}
        
        .field-name-field-hi-homepage-engage-picture{
          a[target="_blank"]:after {content:none; .w(inherit); .h(inherit);  background-image:none;}
        }
        .field-name-field-hi-homepage-engage-title{@bold; .s(.938em); @maj; color:@blue; margin-top:12px;}
        .equalize-height{padding-bottom:5px;}
        .field-name-field-hi-homepage-engage-text{@bitterI; color:@txtdarkBlue; .s(.875em); margin-top:5px;
          p{margin-bottom:2px;}
        }
        .field-name-field-hi-homepage-engage-link{@absolute; bottom:0; .w(100%);
          a[target="_blank"]:after {content:none; .w(inherit); .h(inherit);  background-image:none;}
        }
        .btn{.w(100%); text-align:left;}

        &.don{
          .field-name-field-hi-homepage-engage-title{color:#d14904;}
          .field-name-field-hi-homepage-engage-link{text-align:right; right:0; .w(85%);}
          .btn{margin-bottom:9px;
            background-color:@orange; text-align:right;@relative;
            @ArialBk; @normal; .s(1.125em);
            &:before {content:""; @absolute; .w(56px); .h(51px); top:-10px; left:-29px; .spriteDon(left -373px);/*bg main petite orange*/}
          }
        }
      }
    }
    /* bouton version urgence */
    .urgence .engagement{
      .engagement-item.don{
        .field-type-text{color:@red;}
        .btn{background-color:@red;
          &:before {.spriteDon(left -430px);/*bg main petite rouge*/}
        }
      }
    }
  



/* --------------------------------------------
 * COL DROITE - 2 blocs col droites - home paroles terrain
 ------------------------------------------- */
  /* ---------- = commun  ----------*/
  #homepage-news-by-country,
  #simple-newsletter{
    .fieldset-legend{color:#fff; text-align:center; .w(100%);}
  }

  /*---------- =  nos actions  ----------*/
  #homepage-news-by-country{
   
    .fieldset-legend{.s(1.125em);
      .big{@block; @maj;}
      span{@ArialBk;}
    }
   
    legend {@block; @a-center; .w(100%);}
   
    .map_link{.btColor(#fff, right 12px top -1943px); margin-bottom: 6px; background-color:#00577b; .radius(4px) ;
      a{.sprite(left 9px top -308px); /* picto monde */ 
        @box-sizing; .w(100%); padding:9px 30px 11px 40px; margin-bottom:0;
        .s(.75em); line-height:1.3em; 
        span{@ArialBk; @block;}
      }
    }

    /* select personnalisé - cas particulier  ----------*/
    .chosen-container{vertical-align:bottom; .w(100%);}

    .chosen-container-single{
      .chosen-single{border-color:#fff; min-height:26px; padding:3px 0 0 4px; .radius(4px 0 0 4px);
        div b{
          background-image:url('../images/select.png');
          background-position:0 10px;
        }
      }
    }

    .chosen-container-active.chosen-with-drop .chosen-single{.radius(4px 0 0 0);
      div b{background-position:4px 10px; .transform(180deg); }
    }
  }

  /*---------- =  inscription newsletter  ----------*/
  #simple-newsletter{
    .blocCouleur(@lightBlue);
    legend{@box-sizing; .w(100%); text-align:center;}
    .fieldset-legend{@bold; .s(1.125em);
      span{@Arialbk; @maj; @block;}
    }
    .form-item{margin:12px 0 11px 0;
      /* champ email */
      input{color:#2c3e50; .s(.813em); border:none; .radius(4px); min-height:26px;}
    }
    /* btn sumbit - picto enveloppe */
    .form-submit-wrapper{.sprite(@position-couleur: 9px -193px); background-color:@blue; .radius(4px);
      .form-submit{background-color:transparent;}
    }
  }



/* --------------------------------------------
 * HEADER
  ------------------------------------------- */
  

/* --------------------------------------------
 * NAVIGATION
  ------------------------------------------- */
  

/* --------------------------------------------
 * GENERAUX
  ------------------------------------------- */


/*
------------------------------------------------------------------------------------------------
= WebKit Safari et Chrome
------------------------------------------------------------------------------------------------
*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* col bloc nos actions / NL home, si float, repasse à la ligne */
  .homepage-right-column{float:none;}

  /* home "nos actions pays par pays" select personnalisé */
  #homepage-news-by-country .chosen-container-single .chosen-single{
    min-height:24px;
  }
}


/* 
------------------------------------------------------------------------------------------------
= VERSION MOBILE
------------------------------------------------------------------------------------------------
*/

@media screen and @screen-mobile {

  /*---------- = Slider ----------*/
    
#main-slider {
    border-bottom: 6px solid @grey;
    margin-bottom: 2em;
    .caroufredsel_wrapper {
        width:100%;
        height:auto;
        .home-carousel {
            width:100%;
            article {
              width: auto;
              margin: 0 auto;
              height:auto;
              img {
                max-height: 100%;
                max-width: 100%;
              }
              .slide-picture-text {
                top:0;
                left:0;
                padding: 0 5px;
                .field-name-field-hi-cm-copyright {
                    color: @defaut;
                    text-shadow: none;
                }
                .mobile-header {
                    margin: 1em auto 2em;
                }

                .field-name-field-hi-slide-mobile-title {
                    .s(2em);
                    line-height:1.1em; 
                    @bitterI;
                    text-align:center;
                    span {
                        .s(.694em);
                    }
                }
                .field-name-field-hi-slide-mobile-text {
                    margin-top:10px; .s(.875em);
                }
                
                .soutenez,.parrainez {
                    position: inherit;
                    top: 0;
                    right: none;
                }
              }
            }
       }
    }
    .slide-picture-text {
        .btn {
          .boutonMColor (#fff, right 10px top -1848px @orange);
        }
      }
    #pager {
        width:100%;
        //top: 210px;
        text-align: center;
    }
}
 /*---------- = Paroles de terrain ----------*/
    /* structure */
    .block-two-col{padding-bottom:24px;}
    .news-refs{max-width:100%; .w(100%);}
    .homepage-right-column{max-width:100%; margin-left:0; float:none;}
    .front .titre-section {.titreMobile;}
    /* grande image haut de page home */
    .field-name-field-hi-homepage-picture-mobile{
      img{.w(100%);}
    }

    /* news */
    .news-ref-item{margin-left:15px; margin-right:15px;
      .title{text-align:left; margin-left:0; margin-right:0; padding-left:0; padding-right:0;}
      &.first{
        .title{.s(1em);}
      }

      .news-country-list, .tag-list{text-align:left;}
    }
    .all-link{.separation(0 0 5px 0); float:none; text-align:right;
      a{margin:20px 15px 20px 0; @block;}
    }

    /* news mise en avant */
    .list-news-ref{float:none; .w(100%); padding:15px 0;}
    .news-ref-big-thumb{@none}


  /*---------- = colonne droite home ----------*/

    #homepage-news-by-country{@none;}

    .front #simple-newsletter{
      margin-right:30px;
      margin-left:30px;
    }

    #node-sidebar #simple-newsletter {margin-bottom:1.3em;}

  /*---------- = Engagement ----------*/
  .engagement{@paddingCote15;
    .engagement-item{.w(100%); max-width:100%; .separation(0 0 2px 0); padding-bottom:0; margin-left:0; margin-bottom:20px;
      img{.w(100%);}
      .field-name-field-hi-homepage-engage-title,
      .equalize-height,
      .field-name-field-hi-homepage-engage-text{padding-left:15px; padding-right:15px;}
      .field-name-field-hi-homepage-engage-link{@static; margin-bottom:20px; max-width:100%;}
      .field-name-field-hi-homepage-engage-picture{
        img{.h(auto); .w(auto !important);}
      }
      .btn{margin-bottom:0;}


      &.don{border:none;
        .btn{text-align:center; .w(80%); margin-right:-29px;}
        .field-name-field-hi-homepage-engage-link{.w(100%); text-align:center;}
      }
    }
  }

}/* fin média */