@import '../../publik-base-theme/static/includes/fonts/opensans';

body {
    background-color: #ece4e0;

    #page {

        #header-wrapper {

            #header {
                background-color: white;
                border-bottom: 20px solid white;
                padding: 0;

                #top {
                    .col.left {
                        float: left;
                        width: 25%;

                        .wrapper {
                            padding: 3.5%;

                            .cca-logo {
                                margin: 0 0 7%;
                                width: 100%;
                                padding-top: 30%;
                                background: url('img/CCA-logo.png') top left no-repeat transparent;
                                background-size: contain;
                            }

                            #logo {
                                margin: 0;
                                width: 100%;
                                max-width: 220px;
                                text-transform: uppercase;
                                font-family: OpenSans-Bold,Arial,sans-serif;
                                font-size: 30px;
								line-height: 1.1em;

                                a {
                                    color: $secondary-color;
                                }
                            }
                        }
                    }
                    .col.right {
                        float: right;
                        width: 75%;
                        padding-top: 24%;
						background: url('img/banniere.jpg') bottom right no-repeat transparent;
                        background-size: contain;
                    }

                    #toplinks {
                        clear: both;
                        position: static;
                        border: none;
                        border-radius: 0;
                        box-shadow: none;
                        text-align: right;
                        background: #f39200;
                        padding: 7px 15px 10px;
                        font-size: 0.8em;
                        font-weight: bold;

                        a {
                            color: #333333;
                            text-decoration: underline;
                        }
                        a::after {
                            display: inline-block;
                            content: ' | ';
                            color: #333333;
                            text-decoration: none;
                        }
                        a:last-child::after {
                            content: '';
                            display: none;
                        }
                    }
                }
            }
        }

        #nav {
            height: 3em;
            background: white;

            > ul {
                width: 84.5%;
                float: left;
                margin: 0;
                text-transform: uppercase;
                background: $tertiary-color;
            }

            .cca-link-wrapper {
                box-sizing: content-box;
                width: 14%;
                float: right;
	            border-left: 10px solid white;

                .cca-link {
                    background: $primary-color;
                    padding: 8px 0 10px;
                    font-size: 1.3em;
                    font-weight: bold;
                    text-align: center;

                    a {
                        color: white;

                        .arrow {
                            background: url('img/iconfinder_aiga_lefnddownarrow.png') center left no-repeat transparent;
                            width: 16px;
                            height: 16px;
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        #nav::after {
            content: '';
            display: block;
            clear: both;
        }

        #main-content-wrapper {

            #main-content {

                #content {
                    background: white;
					padding-bottom: 15px;
                    button {
                        box-shadow: none;
                    }

                    #sidebar {
                        border-right: 1px solid $secondary-color;

                        > .cell {
                            margin: 1em;
                        }

                        > .cell.trackingcodeinputcell {
                            margin: 1ex 0 0;
                            background: $primary-color;
                            color: black;

                            h2 {
                                background: $primary-color;
                                color: black;
                                font-family: OpenSans-Medium,Arial,sans-serif;
                                font-weight: bold;
                                font-size: 1em;
                                padding: 1em 0 0 1em;
                            }

                            button {
                                background: #fefefe;
                                color: black;
                                border-radius: 0;
                                box-shadow: none;
                                font-weight: bold;
                                padding: 8px 10px;
                                margin-top: 10px;
                            }
                        }

                        > .cell.textcell:first-child {
                            margin-bottom: 0;
                            margin-top: 1ex;

                            h2, p strong {
                                color: black;
                                font-family: OpenSans-Bold,Arial,sans-serif;
                                font-weight: bold;
                                font-size: 1em;
                            }
                        }

                        > .cell.linkcell {
                            margin: 1.5em;
                            border-top: 1px solid $secondary-color;
                        }
                        > .cell.linkcell:first-child, > .cell.linkcell.mon-profil {
                            border-top: none;
                        }
                        > .cell.linkcell.mon-profil,
                        > .cell.linkcell.mes-demarches,
                        > .cell.linkcell.mes-paiements {
                            margin: 0.2em 1.5em;

                            a {
                                display: block;
                                padding: 1em 0.1ex 0.5em;
                            }
                            a::before {
                                content: '';
                                display: block;
                                float: left;
                                width: 24px;
                                height: 24px;
                                background-repeat: no-repeat;
                                background-size: contain;
                                margin-right: 10px;
                            }
                            a:hover {
                                background: none;
                                color: $primary-color;
                            }
                        }
                        > .cell.linkcell.mon-profil a::before {
                            background-image: url('img/PICTO-profil.jpg');
                        }
                        > .cell.linkcell.mes-demarches a::before {
                            background-image: url('img/PICTO-demarches.jpg');
                        }
                        > .cell.linkcell.mes-paiements a::before {
                            background-image: url('img/PICTO-paiements.jpg');
                        }

                        .wcscurrentdraftscell {
                            a {
                                padding: 0.7em 1em 0.3em;
                            }
                            > div > div > ul > li {
                                margin: 0.5em 0;
                            }
                            > div > div > ul > li:nth-child(even) {
                                background: white;
                            }
                            > div > div > ul > li:nth-child(odd) {
                                background: #F8F8F8;
                            }
                        }
                    }

                    #columns {
                        align-items: stretch;

                        #gauche {
                            margin: 0;
                            border-right: 1px solid $secondary-color;
                            height: 100%;

                            #tracking-code {
                                margin-bottom: 0;
                                background-color: $primary-color;

                                h3 {
                                    color: #333;
                                    background: none;
                                    font-weight: bold;
                                    padding: 1em 1em 0.2em;
                                    font-size: 1em;
                                }

                                a {
                                    color: $secondary-color;
                                    padding: 0 1rem 0.5em;
                                    font-weight: normal;
                                    font-size: 1.2em;
                                    font-style: italic;
                                }
                            }

                        }

                        .cell {
                            margin-left: 1.5em;
                            margin-right: 1.5em;
                        }

                        .cell.wcsformsofcategorycell {

                            > div > h2 {
                                color: $secondary-color;
                                border-bottom: 2px solid $primary-color;
                                padding: 1em 0 0.5em;
                                font-weight: bold;
                                margin-bottom: 0.5em;
                            }

                            > div > div {
                                padding: 0.2em 0.5em;

                                > ul > li > a {
                                    font-size: 0.9em;
                                    text-decoration: underline;
                                    padding: 3px 0;
                                }
                                > ul > li > a:hover {
                                    background: none;
                                }
                            }
                        }

                        .cell.wcscurrentformscell, .cell.wcscurrentdraftscell {
                            h2 {
                                text-align: left;
                                color: $secondary-color;
                                padding: 1em 1em 1ex 0;
                                border-bottom: 2px solid #ccc;
                                margin: 0 1.5em 1em 0;
                                font-family: OpenSans-Bold,Arial,sans-serif;
                            }
                            h3, h4, h5 {
                                color: $primary-color;
                            }

                            .links-list {
                                > ul > li > a {
                                    padding: 0;
                                    margin: 0.4em 1.5em 0.4em 1em;
                                }
                                > ul > li:nth-child(even) {
                                    background: white;
                                }
                                > ul > li:nth-child(odd) {
                                    background: #F8F8F8;
                                }
                            }
                        }

                        div#rub_service {
                            margin-bottom: 3em;

                            h2 {
                                text-align: left;
                                padding: 1em 1em 1ex 0;
                                border-bottom: 2px solid #ccc;
                                margin: 0 1.5em 1em 0;
                                font-family: OpenSans-Bold,Arial,sans-serif;
                            }
                            h3, h4, h5 {
                                color: $primary-color;
                            }

                            .title label {
                                font-weight: bold;
                            }

                            .buttons {
                                display: flex;
                                justify-content: space-between;

                                .submit-button {
                                    order: 10;
                                    margin-right: 2em;
                                }

                                button {
                                    font-weight: bold;
                                }
                            }
                        }
                    }

                    .cell h1,
                    .cell h2,
                    .cell h3,
                    .cell h4,
                    .cell h5 {
                        color: $primary-color;
                    }

                    .cell h1 {
                        text-transform: uppercase;
                    }

					.cell h2 {
						@extend %title;
					}

                    .cell h3,
                    .cell h4,
                    .cell h5,
                    .cell p,
                    .cell table {
                        margin-left: 0;
                    }

                }

                > br.clear {
                    display: block;
                }
            }
        }

        #footer-wrapper {
            padding: 0;

            #footer {
                padding: 0;
                background: $secondary-color;
                min-height: 160px;

                div.columns {
                    padding-left: 0.5em;

                    div.col {
                        float: left;
                        width: 25%;
                        padding: 0;
                        min-width: 220px;
                        min-height: 80px;

						h1, h2, h3 {
							text-transform: uppercase;
						}
                        .cell.linkcell {
                            a {
                                color: white;
                                padding: 3px 0.5em;
                                text-decoration: underline;
                                font-size: 0.8em;
                            }
                            a:hover {
								color: #e2dad5;
                                background: none;
                            }
                        }
                    }

                    .cca-logo {
                        margin: 28% 1em 1em;
                        padding: 0;
                        width: 100%;
                        height: 100%;
                        max-width: 220px;
                        max-height: 60px;
                        min-height: 60px;
                        background: url('img/marque_CCA-blanc_transparent.png') bottom right no-repeat transparent;
                        background-size: contain;
                    }
                }
                div.columns::after {
                    content: '';
                    clear: both;
                    display: block;
                }
            }
        }
    }
}

/* ajustements petits écrans (mobiles) */
@media screen and ($max-mobile-viewport){

body #page {
    background: white;

    #header-wrapper #header #top {
        .col.left {
            float: none;
            width: 100%;
            padding-top: 10px;

            .wrapper {
                display: flex;
                justify-content: space-between;
                padding: 1em;

                .cca-logo {
                    order: 2;
                    flex-basis: 30%;
                    margin: 0 20px 10px 0;
                    padding-top: 7%;
                }

                #logo {
                    order: 1;
                    flex-basis: 70%;
                    margin: 0 20px 10px 10px;
                    padding-left: 0;
                    padding-top: 10px;
                    width: auto;
                    max-width: none;
                    
                }
            }
        }

        #header-pictures {
            display: none;
        }

        #toplinks {
            padding: 16px 0;
            max-width: none;
            width: 100%;

            > * {
                margin-right: 15px;
            }
        }
    }
    #nav-wrapper {
        margin-top: -70px;

        #nav {
            > ul {
                width: 100%;
                position: relative;
                z-index: 200;
                border-bottom: 10px solid white;

                > li:last-child {
                    border-bottom: none;
                }
            }
            .cca-link-wrapper {
                width: auto;
                position: relative;

                .cca-link {
                    padding: 8px 25px 10px;
                }
            }
        }
    }

    #main-content-wrapper #main-content #content {

        #sidebar {
            border:none;
        }

        #columns #gauche {
            border:none;
            height: auto;

            #tracking-code {
                order: 1;
                margin-top: 1em;

                h3 {
                    margin-left: 3em;
                }
                a {
                    margin-left: 2em;
                }
            }


        }
    }
}

}

// Steps
.wcs-steps {
    font-size: 1.4em;
    order: 2;
    clear: both;
    margin-top: 12px;
}
.wcs-step {
    &--marker {
        font-family: OpenSans-Bold,Arial,sans-serif;
        font-weight: 700;
    }
    &--label {
        font-style: italic;
        margin: 1em;
        font-size: .7em;
    }
}

@include desktop-vertical-steps() {
    .wcs-step {
        font-size: 1.2em;
        &.current {
            background-color: $primary-color;
            color: #fff;
        }
        &--label {
            margin: 0;
            font-size: 0.54em;
            color: inherit !important;
        }
    }
}