.btn {
    font-size: 17px; border-radius: 7px; position: relative; border: none; padding: 6px 20px;
    @include media("<=sm") {
        white-space: normal !important; 
    }
}

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); text-decoration: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
a.btn, a.btn:visited, a.btn:visited:hover, button.btn, button.btn:visited, button.btn:visited:hover { color: #fff; }
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default .badge,
.btn-primary .badge,
.btn-success .badge,
.btn-info .badge,
.btn-warning .badge,
.btn-danger .badge {
  text-shadow: none;
}
.btn:active,
.btn.active {
  background-image: none;
}


.btn-blanc, a.btn.btn-blanc, .btn-blanc:visited, a.btn.btn-blanc:visited {
    color: $color-primary; background-color: transparent; text-decoration: none; border: 3px solid $color-primary; transition: background-color 0.3s, color 0.3s;
    span {
        position: relative; z-index: 2;
    }
    &::before, &::after {
        content: ''; z-index: 1; border-radius: inherit; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        transition: transform 0.5s, opacity 0.5s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    &::before {
        border: 1px solid $color-primary; opacity: 0; transform: scale3d(1.4, 1.6, 1);
    }
    &::after {
        background: #fff;
    }
    &:hover {
        border: 3px solid #fff; color: #fff; background-color: $color-primary;
        &::before {
            transform: scale3d(1.08, 1.35, 0.9); opacity: 1;
        }
        &::after {
            transform: scale3d(0.2, 0.2, 1); opacity: 0;
        }
    }
    &.btn-inverted {
        border-color: #fff; background-color: #fff; 
    }
    &.btn-inverted::before {
        border-color: #fff; 
    }
    &.btn-inverted:hover {
        color: $color-primary;
    }
}


.btn-noir, a.btn.btn-noir, .btn-noir:visited, a.btn.btn-noir:visited {
    color: #fff; background: rgb(0,0,0); text-decoration: none; border: 3px solid transparent; transition: background-color 0.3s, color 0.3s;
    span {
        position: relative; z-index: 2;
    }
    &::before, &::after {
        content: ''; z-index: 1; border-radius: inherit; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        transition: transform 0.5s, opacity 0.5s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    &::before {
        border: 1px solid $color-primary; opacity: 0; transform: scale3d(1.4, 1.6, 1);
    }
    &:hover {
        border: 3px solid #fff; color: #fff; background-color: rgba(0,0,0,.5);
        &::before {
            transform: scale3d(1.08, 1.35, 0.9); opacity: 1;
        }
        &::after {
            transform: scale3d(0.2, 0.2, 1); opacity: 0;
        }
    }
    &.btn-inverted:hover {
        &::before, &::after {
            border-color: #fff;
        }
    }
    &.btn-noir-opacite-40 {
        background: rgba(0,0,0,.4);
        &:hover {
            background: rgba(0,0,0,1);
        }
        &::before, &::after {
            border-color: #fff;
        }
    }
}




/* Pour enlever le padding aux colonnes. A appliquer aux class="row" */
.no-gutter {
    margin: 0;
    & > [class*='col-'] {
        padding-right:0; padding-left:0;
    }
}



/**** Accordion *****/


.panel-group .panel {
    border-radius: 0; margin-bottom: 0; box-shadow: none;
}
.panel-group .panel.repeatable {
    padding: 0;
}
.panel-group .panel h4 {
    margin: 0;
    a, a:visited {
        text-decoration: none; color: $color-primary;
    }
}
.panel-group .panel+.panel {
    margin-top: 0px;
}
.panel-body {
    padding: 0px 0 16px 30px; margin-top: -5px;
}
.accordion_header {
    display: block; padding: 16px 0 16px 30px; text-decoration: none; position: relative; cursor: pointer; color: $color-primary; text-transform: uppercase;
    &::before {
        position: absolute; content: '+';  top: 7px; left: 0; transition: all 500ms ease-out; z-index: 1;
        color: $color-primary; font-size: 28px; font-style: normal; text-align: center; line-height: 37px;
    }
    @include media(">=md") { 
        &:hover {
            color: $color-primary;
            &::before{
                font-size: 40px; font-style: normal; transform: scale(1.03); transform-origin: center;
            }
        }
    }
    &:focus, &:active {
        outline: none;
    }
    &:visited {
        color: $color-primary;

    }
}
.accordion_header.collapsed {
    &::before {
        content: '-'; line-height: 33px;
    }
}

.panel-group.texte-orange .panel h4 {
    color: $color-secondary;
}
.texte-orange .accordion_header::before {
    color: $color-secondary;
}

//Pour l'édition des pages dans Surreal CMS
.is-cms .collapse {
    display: block; height: auto !important;
}







.thumbnail {
    @include media("<=xs") { width: 100%; }
}



.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: $color-light-grey;
}
.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
    padding: 4px 8px; border: none;
}


/* Tableau adaptatif sur mobile - Cell qui stack - Pratique pour les tableaux que les clients utilisent pour faire de la mise en page */
@include media("<=lg") {
    table td[class*="col-lg"], table th[class*="col-lg"] {
        display: block;
    }
}
@include media("<=md") {
    table td[class*="col-md"], table th[class*="col-md"] {
        display: block;
    }
}
@include media("<=sm") {
    table td[class*="col-sm"], table th[class*="col-sm"] {
        display: block;
    }
}



@include media("<=xs-large") {
    .hidden-xs-large {
        display: none !important;
    }
    .visible-xs-large-block {
        display: block !important;
    }
}