/**************************************
 *
 *   ici les styles statiques hors less 
 *
 *
 *
 *
 *
 **************************************/


/**************** SOMMAIRE*******************/


/* mini bloc */
.home-2cols,
.home-3cols, 
.home-4cols,
.home-6cols {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-between;  
}

.home-2col {
   width:calc(49% - 1rem);      
   padding-right:1rem;
   margin-bottom:2rem;
}

.home-2col-item2 {
  border-right:none;
  padding-right:0;
}

.home-3col {
   width:31.5%;
}

.home-4col {
   width:21.75%;
}

.home-6col {
   width:14.5%;
}

.publieu {
  height:12rem;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50%; 
  margin-bottom:2em;
}

.publieu a {
  display:flex;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;

  position:relative;
}

.publieu-texte {  
  text-align:center;
  font-family: "aa_btp", Arial, sans-serif;
  font-size:1.8rem;  
  color:#fff;
  line-height:1.2em;
  text-transform:uppercase;
  pointer-events: none;

  height:auto;
  z-index:5;
}


.publieu-cover {
    position:absolute;
    
    width:100%;
    height:100%;   
    opacity:0.85;
    z-index:1; 
}

.home-4col .publieu-cover,
.home-6col .publieu-cover {
   opacity:1;
}

.publieu-cover:hover {
    opacity:0.3;
}


/**** col 2 *****/
.home-2col {
  font-size:1rem;
}
.home-2col h3 {
  text-align:center;
  text-transform:uppercase;
  margin-top:0;
}

.home-2col a:hover, 
.home-2col a.spip_out:hover {
  color:#000;
  text-decoration:none;
}

/**** col 4/6  / publieu *****/
.home-4col.publieu,
.home-6col.publieu {
  height:5rem;
}

.home-4col.publieu a,
.home-6col.publieu a {
  width:auto;
}

.home-4col a,
.home-6col a {
  display:flex;
  border:5px solid;
}


.home-4col .publieu-texte,
.home-6col .publieu-texte {
  font-size:0.8rem;

  display:flex;
  flex-wrap:wrap;
  flex-grow:1;
  justify-content:center;
  align-items:center;  
  height:92%;  
}

.home-4col a:hover .publieu-texte,
.home-6col a:hover .publieu-texte {
  border-color:#ffffff;
}

@media (max-width: 767px) {
  .home-2col,
  .home-3col,
  .home-4col,
  .home-6col {
    width:100%;
  } 

  .home-2col {
    padding:0;
    border:none;
  }

  .home-4col.publieu,
  .home-6col.publieu {
    height:4rem;
  }
}


/*************** soutenez moe ******************/
.home-support {  
  margin-bottom:2rem;

  position:relative;
}
.home-cercle {
  width:250px;
  height:250px;  
  border-radius:200%;
  margin:2em auto;
  
  position:relative;
}

.home-cercle-slogan {
  display:block;
  position:absolute;  
  text-align:center;
  text-transform:uppercase;
  font-family: 'aa_btp';
  z-index:4;
  text-shadow: 2px 0 0 #ffffff, 0 2px 0 #ffffff, 0 -2px 0 #ffffff, -2px 0 0 #ffffff, 2px 2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, -2px -2px 0 #ffffff;

  font-size:4rem;
  line-height:1.2em;
  width:100%;   
  top:100px;
}

.home-cercle-slogan  a {
  display:block;
  max-width:500px;
  margin:auto; 
  color:#000;  
}

@media (max-width: 979px) {
  .home-cercle {
    width:200px;
    height:200px;
  }
  .home-cercle-slogan {
      font-size:2rem;
      top:120px;
  }
}


/******* diapo news *********************/
.news-agenda .span10 {  
  margin-left:0; /* desactive grille bootstrap*/
}


/******* row-home-final ****************/
.row-home-finals {
  display:flex;  
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-between;
}

.row-home-final-col {
  width:calc(31% - 1rem);
  padding:0 0 0 1rem;  
}

.row-home-final-col1 {
  border-left:none;
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) { 
  .row-home-final-col  {
    width:100%;
    padding:0;
    border:none;
  } 
}

.row-home-final-col h3 {
  text-align:center;
  margin:0 0 1rem 0;
  font-size:1rem; 
  text-transform:uppercase;
}

.row-home-final-col h4,
.row-home-final-col p {
  text-align:left;
  font-size:0.95rem; 
} 
.row-home-final-col p {
  margin-bottom:0;
}


/*row-home-final > formulaire */
.row-home-final-col label, 
.row-home-final-col input.submit {
  display:none;
}

.row-home-final-col input {
  width:100%;    
  color:#fff;
  border-radius:0;

}

.row-home-final-col form,
.row-home-final-col .editer-groupe, 
.row-home-final-col .editer-groupe li {
  padding:0;
  margin:0;
}


.row-home-final-col input:focus:invalid:focus,
.row-home-final-col textarea:focus:invalid:focus,
.row-home-final-col select:focus:invalid:focus {
    border-color: #d9edf7;
}

.big-legend sup {
  top:-2rem;
  font-size:3.5rem;
}

/*************** page resident espace ******************/
.resident {
  height:8rem;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50%; 
  margin-bottom:2.0rem;
}

.resident.espace {
  height:22rem;
}

.resident a {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;

  position:relative;
}


.resident-texte {  
  text-align:center;
  font-family: "aa_btp", Arial, sans-serif;
  font-size:1.0rem; 
  margin:0 .2em; 
  line-height:120%;
  color:#fff;  
  text-transform:uppercase;
  pointer-events: none;

  height:auto;
  z-index:5;
}

.resident.espace .resident-texte {
  font-size:1.8rem;
}


.resident-cover {
    position:absolute;
    top:0; /* bug FF */
    left:0;  /* bug FF */
    
    width:100%;
    height:100%;   
    opacity:0.85;
    z-index:1;
}

.resident-cover:hover {
    opacity:0; /*0.3;*/    
}
.resident:hover {
  text-shadow: 1px 1px #000;
}



/************* divers ******************/

/* supprimer outline ... tant pas accessibilite */
a, a:active, a:focus {
  outline: none !important;
}

/* big-controls fixed !!!! fuck bootstrap */
.big-control {
  height:100%;
  margin:0;
  top:0;
  pointer-events:none;
}

.big-control a {
  position:absolute;
  border:2px solid #000;
  background:#fff;
  top:46%;
  pointer-events:initial;
}

.big-control a.nextControl {
  right:5px;
}
.big-control a.prevControl {
  left:5px;
}

