/*******************************************************************************
 * Auteur: PIX (Particule Informatique Xaruf)
 * version: 1.0
 *******************************************************************************/
 
:root{
    --pix-red         : #B13C2E;
    --pix-red-dark    : #591e17; /* #841f0e;*/
    --pix-red-light   : #ea5841;

    --pix-black       : #000000;
    --pix-black-light : #333333;

    --pix-yellow-light: #fcd057; /*#e2c496;*/
    --pix-yellow      : #FBC42C; /*#e05616;*/
    --pix-yellow-dark : #ae8004; /*#a04622;*/

    --pix-but-center-yellow: #ef7915;
    --pix-but-anime-yellow-light: #f0f3b0;
    --link-prim: #64b3f4;
    --link-second: #c2e59c;
    --link-tier: #0c4cae;

    --pix-green      : #698c6f; /* 3da48f #63a341;*/
    --pix-green-light: #a4bba8; /*#6db348;*/
    --pix-green-dark : #3f5443; /*#47752f;*/
    
    --pix-blue       : #85b2f7;
    --pix-blue-light : #c2d9fb;
    --pix-blue-dark  : #0c4cae;

    --pix-cancel     : #f0b105;
    --pix-canceled   : #ae8004;
    
    --pix-bg-error   : #BFF0E0;
    --pix-fg-error   : #9E1035;
    
    --pix-validate   : #172E40;
    --pix-valided    : #768189;
    
    --pix-logout     : #718598;

    --pix-bg-disabled : #98A7B5;
    --pix-fg-disabled : #ae8004;

    --pix-footer-infos-a: #2F4F4F;
    --pix-up-btn        : #333333;

    --pix-grey:  #c3bdbe;

    --pix-bg-tips:  #1d1d1d;
    --pix-fg-tips:  #00a170;

}

.pix-theme-l5 {color:#000 !important; background-color:#eef2f9 !important}
.pix-theme-l4 {color:#000 !important; background-color:#c7d5eb !important}
.pix-theme-l3 {color:#000 !important; background-color:#8fabd6 !important}
.pix-theme-l2 {color:#fff !important; background-color:#5681c2 !important}
.pix-theme-l1 {color:#fff !important; background-color:#365c96 !important}
.pix-theme-d1 {color:#fff !important; background-color:#1e3454 !important}
.pix-theme-d2 {color:#fff !important; background-color:#1b2e4b !important}
.pix-theme-d3 {color:#fff !important; background-color:#182842 !important}
.pix-theme-d4 {color:#fff !important; background-color:#142338 !important}
.pix-theme-d5 {color:#fff !important; background-color:#111d2f !important}
.pix-theme-light {color:#000 !important; background-color:#eef2f9 !important}
.pix-theme-dark {color:#fff !important; background-color:#111d2f !important}
.pix-theme-action {color:#fff !important; background-color:#111d2f !important}
.pix-theme {color:#fff !important; background-color:#223a5e !important}
.pix-text-theme {color:#223a5e !important}
.pix-border-theme {border-color:#223a5e !important}
.pix-hover-theme:hover {color:#fff !important; background-color:#223a5e !important}
.pix-hover-text-theme:hover {color:#223a5e !important}
.pix-hover-border-theme:hover {border-color:#223a5e !important}

/* pour debug  */
.borders{
    border      : solid;
    border-width: 1px;
    border-color: black;
}
.red-border{
    border      : solid;
    border-width: 3px;
    border-color: red;
}
.pink-border{
    border      : solid;
    border-width: 3px;
    border-color: palevioletred;
}
.blue-border{
    border      : solid;
    border-width: 3px;
    border-color: blue;
}
.green-border{
    border      : solid;
    border-width: 3px;
    border-color: green;
}
.gray-border{
    border      : solid;
    border-width: 3px;
    border-color: gray;
}
.yellow-border{
    border      : solid;
    border-width: 3px;
    border-color: #f3ff33;
}
.col-100{
    width: 100%!important;
}
.li-erreur-label,
.control-erreur,
.erreur-label{
    color: darkred;
    font-size: 0.9rem;
    /* font-weight: 700; */
    background-color: whitesmoke;
    margin-top: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    text-align: left;
}
.erreur-input:focus{
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    color:  var(--pix-fg-error);
    font-size: 1em;

}
.li-erreur-label{
    text-decoration: none!important;
}
.hide-elem{
    display: none!important;
}
.show-elem{
    display: block!important;
}
.select-users{
    width: 100%;
}
.h-top-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0 inset;
    border-top: 2px solid #121212;
    width: 100%;
}
.h-bottom-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0 inset;
    border-bottom: 1px solid #121212;
    width: 100%;
}
.v-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0 inset;
    border-left: 1px solid #121212;
}
.h-separate{
    height: 4px;
    min-height: 4px;
    max-height: 4px;
}
.round-5{
    border-radius: 8px;
}
.round-t-5{
    border-top-left-radius : 8px;
    border-top-right-radius: 8px;
}
.round-b-5{
    border-bottom-left-radius : 8px;
    border-bottom-right-radius: 8px;
}
.round-t-l-5{
    border-top-left-radius: 8px;
}
.round-b-r-5{
    border-bottom-right-radius: 8px;
}
.title-span{
    text-align: center!important;
    font-size: 1.5rem!important;
}
.text-hide{
    display: none!important;
}
.text-ib{
    font-style: italic;
    font-weight: bold;
}
.text-b{
    font-weight: bold;
}
.text-i{
    font-style: italic;
}
.text-u-dot{
    text-decoration: underline dotted red!important;
}
.finger{
    transition-duration: all .55s;
}
.finger:hover{
    cursor             : pointer;
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px #ffffff; /* #555 */
    transform          : scale(1.015);
    transition-property: transform;
    transition-duration: .10s;
    /*transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.self-center{
    align-self: center;
}
/* profil card */
.container-card{
    display: flex!important;
    justify-content: center!important;
}
.profile-card{
    align-self: center;
    width: auto!important;
    max-width: 400px!important;
    text-align: center;
    border-radius: 1rem;
  /*overflow: hidden;*/
}
@media screen and (max-width: 511px){
    .profile-card{
        width: auto!important;
        max-width: 95%!important;
    }
}
@media screen and (min-width: 512px){
    .profile-card{
        width: auto!important;
        max-width: 400px!important;
    }
}

.profile-card .card-header{
    background: #2c3a47;
    padding: 2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.profile-card .pic{
    display: inline-block;
    padding: 1rem;
    background: linear-gradient(130deg, #74b9ff, #e66767);
    margin: auto;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: animated-gradient 2s linear infinite;
}

@keyframes animated-gradient{
    25%{
    background-position: left bottom;
    }
    50%{
    background-position: right bottom;
    }
    75%{
    background-position: right top;
    }
    100%{
    background-position: left top;
    }
}

.profile-card .pic img{
    display: flex;
    align-items: start;
    justify-content: center;
    width: 150px;
    height: auto;
    border-radius: 50%;
}

.profile-card .name{
    color: #f2f2f2;
    font-size: 2rem;
    font-weight: 600;
    margin: 1.25rem 0;
    text-align: center;
}

.profile-card .desc{
    font-size: 1.5rem;
    color: #e66767;
}

.profile-card .sm{
    display: flex;
    justify-content: center;
    margin: 2rem;
}

.profile-card .sm a{
    color: #f2f2f2;
    width: 56px;
    font-size: 22px;
    transition: .3s linear;
}

.profile-card .sm a:hover{
    color: #e66767;
}

.profile-card .contact-btn{
    display: inline-block;
    padding: 12px 50px;
    color: #e66767;
    border: 2px solid #e66767;
    border-radius: 6px;
    margin-top: 16px;
    transition: .3s linear;
}

.profile-card .contact-btn:hover{
    background: #e66767;
    color: #f2f2f2;
    text-decoration: none;
}

.profile-card .card-footer{
    display: flex;
    justify-content: center;
    background: #f4f4f4;
    padding: 1rem 1.5rem;
    height: auto;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.profile-card .item{
    flex: 1;
    text-transform: uppercase;
    font-size: 13px;
    color: #e66767;
}

.profile-card .item span{
    display: block;
    color: #2c3a47;
    font-size: 30px;
}

.profile-card .border{
    width: 1px;
    height: 30px;
    background: #bbb;
}
/* couleurs */
.pix-bg-black{
    background-color: var(--pix-black)!important;
}
.pix-bg-red{
    background-color: var(--pix-red)!important;
}
.pix-bg-red-light-hover:hover{
    background-color: var(--pix-red-light)!important;
}
.pix-bg-yellow{
    background-color: var(--pix-yellow)!important;
}
.pix-bg-yellow-dark{
    background-color: var(--pix-yellow-dark)!important;
}
.pix-bg-yellow-dark-hover:hover{
    background-color: var(--pix-yellow-dark)!important;
}
.pix-bg-yellow-hover:hover{
    background-color: var(--pix-yellow)!important;
}
.pix-bg-red-dark{
    background-color: var(--pix-red-dark)!important;
}
.pix-bg-white{
    background-color: white!important;
}
.pix-bg-white-hover:hover{
    background-color: white!important;
}
.pix-fg-black{
    color: var(--pix-black)!important;
}
.pix-fg-black-hover:hover{
    color: var(--pix-black)!important;   
}
.pix-fg-red{
    color: var(--pix-red)!important;
}
.pix-fg-red-dark{
    color: var(--pix-red-dark)!important;
}
.pix-fg-red-dark-hover:hover{
    color: var(--pix-red-dark)!important;
}
.pix-fg-red-light{
    color: var(--pix-red-light)!important;
}
.pix-fg-yellow-light{
    color: var(--pix-yellow-light)!important;
}
.pix-fg-yellow{
    color: var(--pix-yellow)!important;
}
.pix-fg-yellow-dark{
    color: var(--pix-yellow-dark)!important;
}
.pix-fg-yellow-hover:hover{
    color: var(--pix-yellow)!important;
}
.pix-fg-yellow-dark-hover:hover{
    color: var(--pix-yellow-dark)!important;
}
.pix-fg-green{
    color: var(--pix-green)!important;
}
.pix-fg-green-dark{
    color: var(--pix-green-dark)!important;
}
.pix-fg-blue{
    color: var(--pix-blue)!important;
}
.pix-fg-grey{
    color: var(--pix-grey)!important;
}
/* text select  */
::-moz-selection{ /* Code for Firefox */
    color     : red;
    background: yellow;
}
::selection{
    color     : var(--pix-red);
    background: yellow;
}
.to-selected{
    color     : var(--pix-yellow)!important;
}
.halo-1{
    /* décalage droite, bas et dégradé */
    box-shadow: 1px 1px 12px #555;
}
.bo-header-title,
.about-header-title{
    color      : var(--pix-red)!important;
    text-shadow: 0.02em 0.08em 0em #000000;
}
.mentions-header-title{
    color      : var(--pix-red)!important;
    text-shadow: 0.02em 0.08em 0em #000000!important;
}
.name-app{
    color: var(--pix-green);
}
.name-app:hover{
    color: var(--pix-red-light)!important;
}
/* perso link */
.link-cover{
   /* RESET */
   text-decoration: none;
   line-height    : 1;
   position       : relative;
   z-index        : 0;
   display        : inline-block;
   padding        : 4px 0px;
   overflow       : hidden;
   vertical-align : bottom;
   transition     : color .45s ease-out;
}
.link-cover::before{
   content   : "";
   position  : absolute;
   z-index   : -1;
   top       : 0;
   left      : 0;
   transform : translateY(calc(100% - 2px));
   width     : 100%;
   height    : 100%;
   transition: transform .25s ease-out;
}
.link-cover:hover::before{
   transform : translateY(0);
   transition: transform .25s ease-out;
}
a.link-persist{ transition: all .33s ease-in-out; }
.link-presentation,
.item-footer,
.link-public{
    padding-top   : auto!important;
    padding-bottom: auto!important;
    vertical-align: center!important;
    transition: all .33s ease-in-out;
}
.link-cover{
   color: var(--link-prim);
}
.link-cover::before{
   content: "";
   background-image: linear-gradient(60deg, var(--link-prim) 0%, var(--link-second) 100%); /* 60deg, #64b3f4 0%, #c2e59c 100% */
}
.link-cover:hover{ 
   /*color: #fff;*/
   color: var(--link-tier);
   /*text-decoration: none;*/
}
.link-public{
    color: var(--pix-green)!important;
}
.item-footer{
  color: #00758f!important;
}
.link-public:hover,
.item-top-bar:hover,
.item-footer:hover{
    color: var(--pix-yellow)!important;
}
a.link-persist,
a.link-persist:link,
a.link-reset-passwd,
a.link-reset-passwd:link{
    color: var(--link-second)!important;
}
a.link-persist:visited,
a.link-reset-passwd:visited{
    color: var(--link-second)!important;
}
a.link-persist:hover,
a.link-persist:focus,
a.link-persist:active,
a.link-reset-passwd:hover,
a.link-reset-passwd:focus,
a.link-reset-passwd:active{
    color: var(--pix-yellow)!important;
}
a.item-footer:link{
  color: #00758f;
}
a.item-footer:visited{
  color: var(--pix-logout)!important;
  font-style: italic!important;
}
a.item-footer:hover{
  color: var(--pix-yellow)!important;
}
a.item-footer:active {
   color: var(--pix-red-dark)!important;
}