//  *** Définition des couleurs *** nav ul.navbar-nav 

@import "bootstrap/bootstrap.less";
// @import "datepicker.less";

@brand-primary: #006d82; // couleur des H2 ; bordeau
@brand-secondary: #8a364f; // Couleur des H3 ; violet
@brand-danger: #8d363f; // @couleurErreur 

@h4-color: #e0b86d; // Couleur des H4 
@h5-color: @brand-secondary; // Couleur des H5

@link-color: @brand-secondary; // @brand-primary par défaut. Couleur des liens
// @couleur1: @brand-primary;      // Couleur des H2
// @couleur2: @brand-secondary;    // Couleur des H3
// @couleur3: @h4-color;           // Couleur des H4
// @couleurErreur: @brand-danger;

@border-color: #bbb; // Couleur de bordures
@menu-color: #ffffff; // Couleur du texte de la barre de menu  
@menu-bg: @link-color; // Couleur du fond de la barre de menu

// @couleurBordure1: @border-color;
// @couleurMenu1:  @menu-color;      // Couleur du texte de la barre de menu

@body-bg: #fff; // Couleur du fond de page exterieure ; 
@container-bg: #fff; // Couleur du fond de page #main bg ; blanc

// @couleurFondMenu1: @brand-primary;   // Couleur du fond de la barre de menu
// @couleurFond1: @container-bg;        // Couleur du fond de page #main bg
@couleurFond2: @body-bg;

@btn-primary-bg: @brand-primary; // @couleurFondBouton : par déf. @link-color
@btn-success-bg: @h4-color;
@btn-info-bg: @brand-secondary;
@btn-danger-bg: @brand-danger;

// Programme
@couleurHoraire: grey;
@couleurSession: black;
@couleurParrainage: darken(spin(saturate(@brand-primary, 100%), 180), 30%); // complémentaire de @brand-primary


// *** surcharge variable.less ***
@horizontalComponentOffset: 180px; // *** a voir ***

@font-family-base: 'Montserrat', "Helvetica Neue", Helvetica, sans-serif; // voir i-head.php ;
@headings-font-family: 'Montserrat', "Helvetica Neue", Helvetica, sans-serif; // voir i-head.php ;
@headings-font-weight: 600;

@headings-line-height: 1.25;

@navbar-height: 36px;

@navbar-default-color: @menu-color;

// @navbar-default-bg: @brand-primary;         // si .navbar n'a pas de background: url("../images/barremenu.jpg");
@navbar-default-bg: @brand-secondary; // si .navbar a un background: url("../images/barremenu.jpg");


@navbar-default-link-color: lighten(@menu-color, 6%);
@navbar-default-link-hover-color: lighten(@menu-color, 20%);
@navbar-default-link-active-bg: @navbar-default-bg;
@navbar-default-link-active-color: @navbar-default-link-color;

// @dropdown-bg: @brand-primary;
@dropdown-bg: fade(#eee, 95%);

@dropdown-link-hover-bg: #9c6727; // @brand-primary couleur du menu survolé
@dropdown-link-hover-color: #eee; // couleur du lien survolé
@dropdown-link-color: #111;
@dropdown-link-active-bg: darken(@dropdown-bg, 6%);
@dropdown-link-active-color: @navbar-default-bg;

@grid-columns: 14;
@grid-gutter-width: 26px;

@body-max-width: 1020px;


.couleur1 {
  color: @brand-primary;
}

.couleur2 {
  color: @brand-secondary;
}

.couleur3 {
  color: #cb7e54;
}

.couleur4 {
  color: @h4-color; // #4ba0ba; bleu plus fonçé du H4
}

.couleur5 {
  color: @h4-color; // #4ba0ba; bleu plus fonçé du H4
}

.couleur6 {
  color: @h4-color; // #4ba0ba; bleu plus fonçé du H4
}

.couleur7 {
  color: white;
}

small,
.small {
  // font-size: 13px;
  font-size: @font-size-small;
  line-height: 16px;
  color: @gray;
}

.small2 {
  // font-size: 13px;
  font-size: @font-size-small;
  line-height: 30px;
  color: @gray;
}

.big {
  /* @font-size-h4 */
  font-size: ceil((@font-size-base * 1.15));

  >strong {
    color: @brand-danger;
    font-weight: 600;
  }
}



strong, {
  font-weight: 600;
}

.grasCouleur1 {
  .couleur1;
  font-weight: 600;
}

.grasCouleur2 {
  .couleur2;
  font-weight: 600;
}

.grasCouleur3 {
  .couleur3;
  font-weight: 600;
}

.grasCouleur4 {
  .couleur4;
  font-weight: 600;
}

.grasCouleur5 {
  .couleur5;
  font-weight: 600;
}

.grasCouleur6 {
  .couleur6;
  font-weight: 600;
}

.grasCouleur7 {
  .couleur7;
  font-weight: 600;
}

.grasCouleur8 {
  color: #1b8824; // #5fa84d
  font-weight: 600;
  font-size: 18px;
}

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
  /* Précaution pour IE 7 */
}

.margintop10 {
  margin-top: 10px;
}

// *** Définition des styles ***

body {
  font-family: @font-family-base;
  font-size: @font-size-base; // 14px

  @media (min-width: @screen-sm-min) {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  // background-color: @container-bg;
}

#topBar {
  // voir i-top-bar.php : visitez le nouveau site
  .btn-danger; // blanc sur fond rouge
  position: relative;
  margin-bottom: 10px;
  padding: 10px 0 9px 0;

  p {
    margin: 0;
    text-align: center;
    font-size: 14px;
  }

  a {
    color: @brand-secondary;
  }
}


.language {
  // voir i-language.php // pour drapeaux de langue
  max-width: @body-max-width;
  padding: 8px 50px 0px 50px;
  border-left: 1px solid @border-color;
  border-right: 1px solid @border-color;
  margin-top: 0px;
  margin-bottom: -30px;
  text-align: right;
  background-color: @container-bg;

  .pipe {
    color: @brand-secondary;
    font-size: 18px;
  }
}


.topBar {
  // voir i-top-bar.php // pour drapeaux de langue
  max-width: @body-max-width;
  padding: 5px 20px;
  margin-bottom: 10px;
  text-align: right;

  .pipe {
    color: #ccc;
  }
}

header {
  max-width: @body-max-width;
  text-indent: -9999px;
  border-left: 1px solid @border-color;
  border-right: 1px solid @border-color;
  border-top: 1px solid @border-color;
  border-bottom: none;
  border-radius: 0px 0px 0 0;

  &.container {
    padding-left: 0px;
    padding-right: 0px;
  }

  h1,
  p {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  img {
    border-radius: 0px 0px 0 0;

    &.home {
      margin-top: -1px;
      border-radius: 0;
    }
  }
}

footer {
  margin: 10px 0;
  text-align: center;
}

.pager {
  font-family: @headings-font-family;
}


nav {
  max-width: @body-max-width;
  border-left: 1px solid @border-color;
  border-right: 1px solid @border-color;
  // border-top: 1px solid @border-color;
  border-bottom: 0;
  border-radius: 0;
  padding: 0 10 0 10 0px;
  font-family: @headings-font-family;
  font-size: 14px;
  // letter-spacing: 1px;
  font-weight: 500;

  ul.navbar-nav {
    @media (max-width: @screen-sm-min) {
      margin: 4px;
    }

    @media (min-width: @screen-sm-min) {
      margin: 6px -4px 2px -4px;
      // background-color: red;
    }
  }

  .glyphicon {
    font-size: ceil(@font-size-base * 0.85);
    font-weight: normal;

    &:empty {
      width: 1.8em;
    }
  }

  .small.navbar-brand {
    font-size: @font-size-small;
    line-height: 20px;
  }

  .nav-header {
    padding: 3px 20px;
  }

  .barremenu {
    //background: url("../images/barremenu.jpg");
    border: 0;
    border-left: 1px solid @border-color;
    border-right: 1px solid @border-color;
  }

  &.navbar {
    min-height: 0;
    margin-bottom: 0;
    border-radius: 0;

    .barremenu;

    & .navbar-collapse {
      padding: 0;

      @media (min-width: @screen-sm-min) {
        text-align: center;
      }

      & .dropdown-menu {
        text-align: left;
      }
    }

    & .navbar-nav {
      >li {
        @media (min-width: @screen-sm-min) {
          // border-left: 1px solid lighten(@navbar-default-bg, 32%);
          border-left: 1px solid @menu-color;

          &:first-child {
            border-left: 0;
          }

          &:last-child {
            border-right: 0;
          }
        }

        >.dropdown-menu {
          margin-top: 4px;
          // letter-spacing: 0px;
        }

        >a {
          padding-top: 4px;
          padding-bottom: 4px;

          @media (min-width: @screen-sm-min) {
            // padding: 0 6px 0 4px;   // si des icones à chaque menu
            padding-top: 0;
            padding-bottom: 0;
          }
        }

      }

      @media (min-width: @screen-sm-min) {
        display: inline-block;
        float: none;
      }
    }

  }
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: transparent;
}

.fond-gauche {
  // background-image: url("../images/ronds.jpg");
  background-repeat: no-repeat;
  background-position: 0% 40px;
}

.fond-droit {
  // background-image: url("../images/ronds2.jpg");
  background-repeat: no-repeat;
  background-position: 100% 40px;
}

#main {
  max-width: @body-max-width;
  padding: 15px 40px 25px 40px; // haut droite bas gauche
  background-color: @container-bg;
  border-left: 1px solid @border-color;
  border-right: 1px solid @border-color;
  border-bottom: 1px solid @border-color;
  border-radius: 0 0 0px 0px;

  &.fond {
    .fond-droit;
  }

  &.fond-gauche {
    .fond-gauche;
  }

  h2, h3, h4 {
    font-family: @headings-font-family;
    font-weight: 600;
  }

  // h2 {
  //   font-size: 22px;
  //   color: @brand-primary;
  //   border-bottom: 2px solid @brand-primary;
  //   margin-bottom: 10px;
  //   padding-top: 0px;
  //   padding-left: 0px;
  // }

  h2 {
    font-weight: 300;
    font-size: 35px;
    color: @brand-primary;
    letter-spacing: 0.25px;
    //font-style: italic;
    //background: url("../images/fond-titre.png") no-repeat;
    // border-bottom: 2px solid @brand-primary;
    //height: 50px;
    padding-top: 0px;
    padding-left: 0px;
    margin-bottom: 20px;
    margin-left: -3px;
    //margin-right: 5px;
  }

  h3 {
    font-size: 17px;
    color: @brand-secondary;
    margin-top: 25px;
    margin-bottom: 4px;

    img {
      vertical-align: baseline;
      margin-right: 5px;
    }
  }


  .boxed-green2 {
    background: #5fa84d;
    padding: 15px;
  }

  .boxed-green3 {
    background: #e5f1d0;
    padding: 30px;
  }

  .tourne {
    transform: rotate(-8deg);
    /* Équivalent à rotateZ(45deg) */
  }

  .boxed-grey {
    background: #fef8f2;
    padding: 20px;
  }

  h4 {
    font-size: 14px;
    color: @h4-color;
    margin-top: 25px;
    margin-bottom: 5px;

    img {
      vertical-align: bottom;
      margin-right: 5px;
    }
  }

  &.liens h4 {
    margin-bottom: 0;
  }


  h3+h4 {
    margin-top: 10px;
  }


  h6 {
    font-size: 14px;
    color: #cb7e54;
    margin-top: 0px;
    margin-bottom: 5px;

    img {
      vertical-align: bottom;
      margin-right: 5px;
    }
  }

  &.liens h6 {
    margin-bottom: 0;
  }


  h3+h4 {
    margin-top: 10px;
  }


  h5 {
    margin-top: 20px;
    margin-bottom: 5px;
    color: @h5-color;

    &.label-primary {
      margin-bottom: 10px;
      padding: 5px 5px 5px 8px;
      color: white;
    }

    &.label-bleu {
      background-color: @brand-primary;
      font-weight: 500;
      letter-spacing: 1px;
      margin-bottom: 10px;
      padding: 5px 5px 4px 8px;
      color: white;
    }

    &.label-rouge {
      background-color: @brand-secondary;
      font-weight: 500;
      letter-spacing: 1px;
      margin-bottom: 10px;
      padding: 5px 5px 4px 8px;
      color: white;
    }
  }


  .label-theme25 {
    background-color: @brand-primary;
    font-size: 15px;
    display: inline;
    margin-bottom: 12px;
    padding: 4px 10px 4px 10px;
    color: white;
  }

  p {
    &.label-bloc9 {
    background-color: #97bd63;
    font-weight: 600;
    font-size: 14px;
    display: inline;
    margin-bottom: 30px;
    padding: 4px 10px 4px 10px;
    color: white;
    }
  }

  p {
    &.label-bloc12 {
    background-color: @brand-secondary;
    font-weight: 600;
    font-size: 14px;
    display: inline;
    margin-bottom: 30px;
    padding: 4px 10px 4px 10px;
    color: white;
    }
  }

  p {
    &.label-bloc1 {
    background-color: #e57f45;
    font-weight: 600;
    font-size: 14px;
    display: inline;
    margin-bottom: 30px;
    padding: 4px 10px 4px 10px;
    color: white;
    }
  }

  
 
 p {
  &.label-bloc4 {
  background-color: #774d44;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc6 {
  background-color: #dfb743;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc11 {
  background-color: #293d84;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc8 {
  background-color: #926977;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc2 {
  background-color: #049fbe;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc10 {
  background-color: #a62f8a;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc0 {
  background-color: #ab584d;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc14 {
  background-color: #844d34dd;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}


p {
  &.label-bloc15 {
  background-color: #5f1867;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc3 {
  background-color: #d672a6;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc5 {
  background-color: #007d96;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

p {
  &.label-bloc7 {
  background-color: #c32024;
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-bottom: 30px;
  padding: 4px 10px 4px 10px;
  color: white;
  }
}

.label-dates {
  background-color: @brand-secondary;
  font-size: 15px;
  display: block;
  margin-bottom: 12px;
  padding: 8px 10px 4px 10px;
  color: white;
  font-weight: normal;
}

  .label-theme26 {
    background-color: @brand-secondary;
    letter-spacing: 0.5px;
    font-size: 15px;
    display: inline;
    margin-bottom: 12px;
    padding: 4px 10px 4px 10px;
    color: white;
    font-weight: 400;
  }

  .label-theme27 {
    background-color: @h4-color;
    font-size: 15px;
    display: inline;
    margin-bottom: 12px;
    padding: 4px 10px 4px 10px;
    color: white;
  }

  .derouleur {
    font-weight: 600;
    margin-left: 40px;
    padding: 4px 0px;
    background: #aaa;
    color: #fff;
    width: 40px;
    float: left;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
  }

  .attr_texte {
    margin-left: 10px;
    margin-right: 20px;
    text-align: justify;
  }

  .cadre {
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 8px 8px 8px 10px;
    border: 1px solid @border-color;
    border-radius: 6px;

    p:first-child,
    h3:first-child,
    h4:first-child,
    ul:first-child {
      margin-top: 0;
    }

    p:last-child,
    h3:last-child,
    h4:last-child,
    ul:last-child {
      margin-bottom: 0;
    }
  }

  .cadre3 {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid @border-color;
  }

  .cadrecoul {
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 4px 8px 8px 10px;
    border: none;
    background: #f0edee; // #d8a380;
    border-radius: 0px;
  }

  .filet {
    border-top: 1px solid @border-color;
    margin-top: 10px;
    padding-top: 15px;
  }


  .numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc);
    /* remove if you don't care about IE8 */
    width: 30px;
    height: 30px;
    padding: -0px;
    background: #fff;
    border: 2px solid black;
    color: black;
    font-weight: 600;
    text-align: center;
    font: 22px Helvetica;
    display: inline-block;
  }

  .menu-like {
    background-color: @navbar-default-bg;
    color: white;
    letter-spacing: 1px;
    padding: 5px 5px 5px 8px;
  }

  .padding-vert {
    padding: 8px 0;
  }

  hr {
    border-top: 1px solid @border-color;
  }

  hr.dashed {
    border-top: 1px dashed darken(@border-color, 10%);
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .session {
    color: @couleurSession; // H4 désaturé
    .make-sm-column(12); //  sur 12/14 de .rangee

    p:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child {
      margin-top: 0;
      // color:red;
    }
  }

  &.sponsoring {

    ul {
      margin: 50px; //20px 0 0 0
      padding: -50px;
      text-align: center;

      li {
        margin: 50px;
        padding: -50px; // 0
        width: 350px;
        list-style-type: none;
        display: inline-block;

        img {
          border: none;
          vertical-align: middle;
        }
      }
    }
  }

  #themes {
    ul {
      margin: 20px 0 0 0;
      padding: 0;
      text-align: center;

      li {
        margin: 20px 30px 10px 0;
        padding: 0;
        width: 500px;
        list-style-type: none;
        display: inline-block;
        vertical-align: top;

        img {
          border: none;
          vertical-align: top;
          margin-bottom: 10px;
        }
      }
    }
  }


  &.edito {
    h3 {
      font-size: 18px;
    }

    img {
      border: 1px solid @border-color;
      margin-top: 15px;
    }
    
    .cadre2 {
      margin-top: 0px;
      margin-bottom: 15px;
      padding: 8px 8px 8px 10px;
      border: 1px solid;
      color: #e32a30;
      border-radius: 0px;
    }


    .newspaper2 ul li {
      // list-style-type: circle;
      margin-left: -20px;
      font-size: 14px;
      line-height: 20px;
      list-style-type: disc;
    }

    .newspaper ul {
      // list-style-type: circle;
      margin-left: -30px;
      font-size: 14px;
      line-height: 20px;
    }

    li {
      //list-style-type: circle;
      list-style-size: 40%;
      margin-bottom: 5px;
    }


    /* Columns */
    @media (min-width: 768px) {
      .newspaper ul {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
      }
    }

    h4 {
      font-size: 15px;
      color: @brand-primary;
    }

    .contenu {
      text-align: justify;
    }
  }

  &.programme {

    date {
      margin: 10px 0;
      text-align: right;
    }

    p.sousreserve {
      margin: -20px 0;
    }

    span.sousreserve {
      float: right;
      margin-top: 10px;
      font-size: @font-size-small;
      font-weight: 400;
      color: @gray;

    }

    h2 {
      margin-bottom: 30px;
    }

    h3 {
      color: #ac584d;
      font-size: 16px;
    }

    h4 {
      // color: lighten(@brand-secondary, 20%);
      color: @h4-color; // bleu ciel
      margin-bottom: 4px;
      font-size: 15px;
      //   margin-top: 15px;
    }



    hr {
      border-top: 1px solid @border-color;
      margin-top: 8px;
      margin-bottom: 12px;
    }

    h4 span {
      float: right;
      display: block;
      margin-top: -2px;
      padding: 1px 4px 1px 4px;
      font-size: 13px;
      font-style: normal;
      font-weight: normal;
      color: @brand-primary;
      border: 1px solid @brand-primary;
      border-radius: 6px;
    }

    .salle {
      color: grey;
      border: 1px solid grey;
    }

    .titreS {
      font-size: 14px;
      margin-top: -8px;
      margin-bottom: 5px;
      font-weight: 600;
      color: @brand-secondary;
    }

    .titreS2 {
      font-size: 15px;
      margin-top: -8px;
      margin-bottom: 0px;
      font-weight: 600;
      color: @brand-secondary;
    }

    h6 {
      color: #cb7e54;
      margin-bottom: 4px;
      font-size: 15px;
    }

    h6 span {
      float: right;
      display: block;
      margin-top: -2px;
      padding: 1px 4px 1px 4px;
      font-size: 13px;
      font-style: normal;
      font-weight: normal;
      color: @brand-primary;
      border: 1px solid @brand-primary;
      border-radius: 6px;
    }

    .salle {
      color: grey;
      border: 1px solid grey;
    }

    hr.dashed {
      border-top: 1px dashed darken(@border-color, 10%);
      margin-top: 3px;
      margin-bottom: 20px;
    }

    h7 {
      color: black;
      margin-bottom: 8px;
      font-size: 14px;
      margin-top: 12px;
    }

    .salle-atelier {
      margin-top: 5px;
      margin-bottom: 7px;
      padding: 1px 4px;
      float: left;
      font-size: 13px;
      font-weight: normal;
      color: grey;
      border-radius: 6px;
      // border: 2px solid darken(@border-color,10%);
      border: 1px solid grey;
    }

    .gris {
      color: @brand-primary;
    }

    .label-1 {
      background-color: #e57f45;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-2 {
      background-color: #00acc9;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-q {
      //background-color: white;
      display: inline;
      font-size: 13px;
      margin-bottom: 12px;
      padding: 2px 8px 2px 8px;
      border: 1px solid #981d25;
      border-radius: 6px;
      color: #981d25;
    }

    .label-q2 {
      //background-color: white;
      display: inline;
      font-size: 13px;
      margin-bottom: 12px;
      padding: 2px 8px 2px 8px;
      border: 1px solid #981d25;
      border-radius: 6px;
      color: #981d25;
    }

    .label-3 {
      background-color: #d672a6;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-4 {
      background-color: #774d44;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-mm {
      background-color: #774d44dd;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-5 {
      background-color: #007d96;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-6 {
      background-color: #dfb743;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-7 {
      background-color: #c32024;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-8 {
      background-color: #926977;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-16 {
      background-color: #1fa658;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-9 {
      background-color: #97bd63;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-10 {
      background-color: #a62f8a;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-11 {
      background-color: #293d84;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-12 {
      background-color: @brand-secondary;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-0 {
      background-color:#ab584d;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-13 {
      background-color: #0e6e83;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-14 {
      background-color: #b87b4e;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-15 {
      background-color: #5f1867;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-jm {
      background-color: grey;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-h {
      background-color: #e8a76c;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-p {
      background-color: #9f9ca2;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    .label-b {
      background-color: #5d5b60;
      font-size: 15px;
      display: inline;
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 4px 10px 4px 10px;
      color: white;
    }

    h5 {
      // color: #ed6708;
      margin-bottom: 5px;
      font-size: 15px;
      // display: inline;
      // border-radius: 6px;
      // margin-bottom: 12px;
      // padding: 2px 10px 4px 10px;
      color: black;

      &.label-work {
        background-color: #9f9ca2;
        display: block;
        border-radius: 6px;
        margin-top: 20px;
        margin-bottom: 16px;
        padding: 4px 10px 4px 10px;
        color: white;
      }

      &.label-grippe {
        color: @brand-primary;
        border: 1px solid @brand-primary;
        display: block;
        border-radius: 6px;
        margin-top: 20px;
        margin-bottom: 16px;
        padding: 2px 10px 4px 10px;
        //color: white;
      }

      &.label-work2 {
        background-color: #9f9ca2;
        display: inline;
        border-radius: 6px;
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 4px 10px 4px 10px;
        color: white;
      }

      &.label-p {
        background-color: #9f9ca2;
        display: inline;
      }

      &.label-0 {
        background-color: #ab584d;
        display: inline;
      }

      &.label-1 {
        background-color: #dc7d52;
        display: inline;
      }

      &.label-2 {
        background-color: #049fbe;
        display: inline;
      }

      &.label-3 {
        background-color: #cc84b2;
        display: inline;
      }

      &.label-4 {
        background-color: #60302a;
        display: inline;
      }

      &.label-5 {
        background-color: #45869b;
        display: inline;
      }

      &.label-6 {
        background-color: #ddba78;
        display: inline;
      }

      &.label-7 {
        background-color: #c32024;
        display: inline;
      }

      &.label-8 {
        background-color: #926977;
        display: inline;
      }

      &.label-9 {
        background-color: #97bd63;
        display: inline;
      }

      &.label-10 {
        background-color: #87569c;
        display: inline;
      }

      &.label-b {
        background-color: #5d5b60;
        display: inline;
      }

      &.label-11 {
        background-color: #3f4d91;
        display: inline;
      }

      &.label-12 {
        background-color: #ea983e;
        display: inline;
      }

      &.label-13 {
        background-color: #0e6e83;
        display: inline;
      }

      &.label-14 {
        background-color: #b87b4e;
        display: inline;
      }

      &.label-15 {
        background-color: #3b9bbf;
        display: inline;
      }

      &.label-jm {
        background-color: grey;
        display: inline;
      }

      &.label-h {
        background-color: #e8a76c;
        display: inline;
      }
    }

    .horaire {
      // Colonne "horaires"
      color: @couleurHoraire; // desaturate(@brand-primary, 30%);
      .make-sm-column(2); //  sur 2/14 de .rangee
      font-size: @font-size-small;
      padding-top: 3px; // FL le 4/09/2023
      margin-bottom: 5px;

      @media (min-width: @screen-sm-min) {
        text-align: right;
      }
    }

    .pause {
      color: #cd152b; // du danger
    }

    .session {}

    .theme {
      color: @brand-primary;
      margin-top: 22px;
      margin-bottom: 15px;
    }

    .pause1 {
      color: #cc5321;
      margin-top: 20px;
      margin-bottom: 15px;
    }

    .animation {
      color: #2b5d43;
    }

    .evenement {
      color: @brand-primary;
    }

    .assemblee {
      color: #82c74f;
    }

    h4+ul,
    h4+ol,
    h5+p {
      margin-top: 5px;
    }

    .rangee {
      // une rangée
      .make-row();
    }

    h2,
    h3,
    h4 {
      &.couleur1 {
        .couleur1;
      }

      &.couleur2 {
        .couleur2;
      }
    }
  }

  .flotteADroite {
    float: right;
    margin: 0 0 20px 20px;
  }

  .flotteCenter {
    float: middle;
    //margin: 0 0 20px 20px;
  }

  .hidden {
    display: none;
  }

  .parrainage {
    margin-top: 0;
    border-radius: 6px;
    float: left;
    padding: 2px 6px;
    color: @couleurParrainage; // desaturate(@brand-primary, 30%);
    // border: 2px solid darken(@border-color,10%);
    border: 1px solid @couleurParrainage;
  }

  .contenu {
    .make-sm-column(10); //  sur 3/14 de .rangee
    margin-top: 15px;
    padding-left: 0px;
    padding-right: 35px;

    img {
      border: 1px solid @border-color;
      margin-top: 15px;
    }

    @media (min-width: @screen-sm-min) {
      border-right: 1px solid @border-color;
    }

  }

  .bande-droite {
    .make-sm-column(4);   //  sur 3/14 de .rangee

    img {
      border: 0.5px solid @border-color;
    }

   margin-left: -1px; // pour superposer le filet vertical avec celui du .contenu
   @media (min-width: @screen-sm-min) {
      border-left: 1px solid @border-color;
    }
    @media (max-width: @screen-sm-min) {
      border-top: 2px solid darken(@border-color, 8%);
      padding-top: 24px;
      div {
        max-width: 300px;
        margin: auto;
      }
    }
    padding-left: 32px;
    padding-right: 0px;
    margin-top: 16px;
    // font-size: 13px;
    line-height: 19px;

    hr {
      margin-top: 10px;
      margin-bottom: 13px;
    }
  }


  #sponsoring {
    ul {
      margin: 20px -20px 50px -20px;
      padding: 0px;
      text-align: center;

      li {
        margin: 30px -20px 20px -20px;
        padding: 0px;
        width: 320px;
        list-style-type: none;
        display: inline-block;

        img {
          border: none;
          vertical-align: middle;
        }
      }
    }
  }

  @import "form.less";

}

// Fin de #main

// *** AngularJS ***

[ng-cloak] {
  display: none;
}