p{
    font-size: 14px;
    color: $bleuFonce;
}

h1{
    color: $blanc;
}

h2{
    color: $bleuFonce;
    &.lineLeft{
        position: relative;
        &:after{
            content:'';
            position: absolute;
            height: 1px;
            width: 25px;
            background-color: $bleuFonce;
            left: -40px;
            top: 20px;
        }
    }
}

h3{
    color: $bleuFonce;
}

.btn{
    display: inline-block;
    color: $blanc;
    padding:7px 65px;
    @include border-radius(18px);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: $bleu;
    @include transition-property(opacity, transform);
    @include transition-duration(0.3s);
    @include transition-timing-function(ease);
    @include transform(scale(1));
    &.orange{
        @include background-image(linear-gradient(to top, darken($orangeFonce,5%), lighten($orange,5%)));
    }
    &.vert{
        background-color: $vert;
    }
    &:hover{
        opacity:0.7;
        @include transform(scale(0.98));
    }
}

.label{
    font-size: 10px;
    display: inline-block;
    color: $blanc;
    padding:3px 15px;
    @include border-radius(3px);
    background-color: $bleu;
    margin-right: 5px;
    text-transform: uppercase;
    font-weight: 600;
    &.orange{
        @include background-image(linear-gradient(to top, darken($orangeFonce,5%), lighten($orange,5%)));
    }
    &.vert{
        background-color: $vert;
    }
}

.pagination{
    width: 100%;
    background-color: $blanc;
    text-align: center;
    padding: 20px;
    li{
        display: inline-block;
        vertical-align: middle;
        line-height:30px;
        height: 30px;
        @include transition-property(opacity);
        @include transition-duration(0.3s);
        @include transition-timing-function(ease);
        &.active{
            @include background-image(linear-gradient(to right, darken($orangeFonce,5%), lighten($orange,5%)));
            p{
                color: $blanc;
            }
        }
        &:hover{
            opacity:0.5;
        }
    }
    a,p{
        font-size: 12px;
        text-transform: uppercase;
        display: block;
        color: $bleuFonce;
    }
}

.paginationFirst, .paginationLast{
    a{
        color: $orange;
        font-weight: 600;
    }
}

.paginationFirst{ float: left; }
.paginationLast{ float: right; }

.paginationNumber{
    background-color: $blanc;
    width: 30px;
    text-align: center;
    @include border-radius(50%);
}

.form-group{
    margin-bottom: 20px;
    label{
        color: $bleuText;
        font-size: 11px;
        font-weight: 600;
        display: block;
        padding-bottom: 7px;
        text-transform: uppercase;
    }
}

.hidden{
    display: none;
}

.form-elem{
    background-color: $blanc;
    @include border-radius(22px);
    border: 1px solid rgba($gris,0.4);
    padding:10px 10px 10px 18px;
    color: darken($gris,15%);
    width: 100%;
    @include input-placeholder {
        color: darken($gris,15%);
    }
}

.form-mention{
    padding-top: 10px;
    p{
        font-size: 13px;
        color: $gris;
    }
}

.form-legende{
    font-size: 12px;
    color: $gris;
}

textarea.form-elem{
    @include border-radius(0px);
    height: 180px;
}

.form-submit{
    color: $blanc;
    padding:7px 65px;
    @include border-radius(18px);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: $bleu;
    cursor: pointer;
    @include transition-property(opacity);
    @include transition-duration(0.3s);
    @include transition-timing-function(ease);
    border:none;
    &.orange{
        @include background-image(linear-gradient(to top, darken($orangeFonce,5%), lighten($orange,5%)));
    }
    &.vert{
        background-color: $vert;
    }
    &:hover{
        opacity:0.7;
    }
}

.elem-checkbox{
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    height: 20px;
    width: 20px;
    border: 2px solid $bleu;
    background-color: $blanc;
    cursor: pointer;
    @include transition-property(background-color);
    @include transition-duration(0.3s);
    @include transition-timing-function(ease);
    @include border-radius(2px);
    &.checked{
        background-color:$bleu;
        background-image: url(../img/layout/checked.png);
        background-repeat:no-repeat;
        background-position: center center;
    }
    &.orange{
        border: 2px solid $orange;
        &.checked{
            background-color:$orange;
        }
    }
    &.vert{
        border: 2px solid $vert;
        &.checked{
            background-color:$vert;
        }
    }
}

.message{
    width: 100%;
    padding: 20px 20px 20px 35px;
    margin-bottom: 30px;
    background-color: #fff;
    position: relative;
    h3{
        padding-bottom: 5px;
    }
    &.medium{
        width: 290px;
    }
    &.big{
        width: 490px;
    }
    &.small{
        width: 170px;
    }
    &#erreur{
        h3{ color: $orange; }
        span{ background-color: $orange; }
    }
    &#succes{
        h3{ color: $vert }
        span{ background-color: $vert; }
    }
    &#infos{
        h3{ color: $bleu }
        span{ background-color: $bleu; }
    }
    p{
        font-size: 13px;
    }
}

.messageCouleur{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 6px;
    display: block;
}

.wysiwyg{
    p{
        margin-bottom: 15px;
        line-height:28px;
    }
    ol,ul{
        margin: 0px 0px 15px 20px;
        li{
            font-size: 14px;
            color: $bleu;
        }
    }
    a{
        color: $orange;
        text-decoration: underline;
        @include transition-property(opacity);
        @include transition-duration(0.4s);
        @include transition-timing-function(ease);
        &:hover{
            opacity:0.6;
        }
    }
    h2{
        color: $bleu;
        margin-bottom: 15px;
        font-size: 35px;
        line-height:35px;
    }
    h3{
        color: $bleu;
        margin-bottom: 15px;
        font-size: 25px;
        line-height:25px;
    }
    h4{
        color: $bleu;
        margin-bottom: 15px;
        font-size: 20px;
        line-height:20px;
        cursor: pointer;
    }
    img{
        max-width: 100%;
        height:auto;
    }
}