@charset "UTF-8";

/*Cette règle a pour fonction de faire disparaître le panier lorqu'on est sur la page connexion mais sans être connecté, cas qui n'est pas géré par l'affichage de la page : privé*/
.page-profil.section-profil.anonymous-user #nav-wrapper li.menu-panier {
    display: none;
}

//HEADER
div#header {
     //padding: 0 0 $header-banner-height;
}
h1#logo {
    padding: calc((#{$header-banner-height} - #{$header-logo-height}) / 2) 0 0 calc((#{$header-banner-height} - #{$header-logo-height}) / 2);
}
    //to avoid a's height > image's height
h1#logo a {
    font-size: 0; //because h1 font-size (2em/26px) causes an overflow of the a
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
}

    //to show only "Connexion" in toplinks
body.anonymous-user #toplinks {
    display: block;
    & .login > * {
        display: none;
    }
    & :first-child {
        display: block;
    }
}
    //no little green areo in connexion page
.section-profil.anonymous-user #header #toplinks {
    display: none;
}

//NAV
div#nav ul li a,
div#nav ul li.selected a {
    font-weight: bold;
}

/*
div#nav > ul > li a,
div#nav > ul > li.selected a,
div#nav > ul > li a:hover {
    color: $title-color;
}
*/

//LINKS in CONTENT
#Mot_de_passe a {
    color: $primary-color;
    &:hover {
        color: $secondary-color;
    }
}

div#columns .cell a::before,
#Mot_de_passe form > p.text::before,
#footer-wrapper a::before {
    content: $cell-links-bullet;
    padding: 0 0.25em 0 0;
    position: relative;
    bottom: 0.1em;
}

div#columns .cell a::before {
    color: $primary-color;
}

div#columns .cell a.move-to-top::before {
    content: "\0025B2";
}

#Mot_de_pass form > p.text::before {
    color: $primary-color;
}

#footer-wrapper {
    padding: 1ex 0 5ex 0;
    max-width: $width;
    margin: 0 auto;
    & a::before {
        color: $secondary-color;
    }
    & a:hover {
        border-bottom: 2px solid $secondary-color;
    }
}

//BUTTON MIXINS
@mixin button-normal {
    color: #FFF;
    background: $primary-color;
    box-shadow: 1px 0 px 5px rgba(0, 0, 0, 0.21);
    transition: all 0.2s ease;
    display: inline-block;
}
@mixin button-hover {
    color: $primary-color;
    background: #FFF;
    box-shadow: 0px 0px 5px #777;
}

//ACCUEIL BUTTON
.section-index .button-area {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.section-index .button-area .bloc {
    background-color: transparentize($secondary-color, 0.95); 
    padding: 0.75em 1em 0.75em 1em;
    width: 200px;
    text-align: center;
    margin: 2em 1em;
}
.section-index .button-area .bloc p.bloctext {
    color: $primary-color;
    text-transform: uppercase;
    font-weight: bold;
}
div#columns .cell .button-area .bloc p {
    margin: 1em;
}
div#columns .cell .button-area .bloc a {
    @include button-normal;
    width: 80%;
    padding: 0.75em 0;
    &::before {
        color: $secondary-color;
    }
    &:hover,
    &:focus {
        @include button-hover;
    }
}

//OTHER BUTTON
div#receipt-intro a, #summary a#disclose-dataview, .back-home-button a {
    padding: 10px 15px;
    margin-right: 1em;
    @include button-normal;
}
div#receipt-intro a:hover, #summary a#disclose-dataview:hover, .back-home-button a:hover {
    @include button-hover;
}

//BUTTON FOCUS
div#receipt-intro a:focus,
#summary a#disclose-dataview:focus,
.back-home-button a:focus
.fargo-pick-popup button:focus,
button.ui-button:focus,
a.pk-button:focus,
a.pk-big-button:focus,
a#a2-continue:focus,
div.gru-content button:focus,
div#content button:focus,
input[type="submit"]:focus,
div.buttons input:focus
{
    @include button-hover;
}

//CONNEXION
#Mot_de_passe, #Carte_eID {
    background: transparentize($secondary-color, 0.95);
}

//BESOIN D'AIDE
.section-besoin-daide .textcell img {
    max-width: 450px;
    width: 100%;
}

//PANIER
.section-panier div#columns .cell a#new-command:before {
    content: "";
}
.section-panier div#columns .cell a#new-command {
    color: #FFF;
}
.section-panier div#columns .cell a#new-command:hover {
    box-shadow: 0px 0px 5px #777;
    color: $primary-color;
    background: #FFF;
}
