

/* ------------------- Collapser  -------------------- */

.accordion-wrapper a.accordion-toggle {
    display: block;
    float: left;
    height: 25px; width: 25px;
    border: 1px solid #ccc;
    border-right: 0;
    background: url(../images/icon-more.png) no-repeat center;
    }
    .accordion-wrapper a.accordion-toggle:hover {
        background-color: #ccc;
    }
    .accordion-wrapper.open a.accordion-toggle {
        background-image: url(../images/icon-less.png);
    }

.accordion-wrapper .accordion {
    margin-left: 26px;
    max-height: 25px;
    border: 1px solid;
    overflow: hidden;
    transition: max-height .5s;
    }
    .accordion-wrapper.open .accordion {
        max-height: 50em;
    }
    .accordion-wrapper h2 {
        margin: .25em 10px 1em;
        cursor: pointer;
    }

/* Tableau liens calendrier */
#calendarLinks {
    border: 0;
    }
    #calendarLinks tr:hover td {
        background-color: #f5f5f5;
    }
    #calendarLinks td.date {
        width: 160px;
    }
    #calendarLinks td.start-time {
        width: 50px;
    }
    #calendarLinks td.end-time {
        width: 50px;
    }
    #calendarLinks td.date a,
    #calendarLinks td.start-time a,
    #calendarLinks td.end-time a {
        font-size: 12px;
        font-weight: bold;
    }
    #calendarLinks a {
        display: block;
        color: #747474;
        line-height: 20px;
        }
        #calendarLinks a.link {
            color: #c62222;
            }
            #calendarLinks a.link:hover {
                color: #8a2929;
            }

    @media only screen and (max-width: 760px) {
        #calendarLinks tr {
            position: relative;
            border-top: 1px solid;
            padding: 5px 0;
            display: block;
            }
            #calendarLinks tr:hover td {
                background-color: transparent;
            }
            #calendarLinks tr:first-child {
                border-top: 0;
            }
            #calendarLinks td {
                display: block;
                line-height: 1;
                padding: 0 8px;
                }
                #calendarLinks td.start-time {
                    position: absolute;
                    top: 5px; right: 50px;
                }
                #calendarLinks td.end-time {
                    position: absolute;
                    top: 5px; right: 0;
                }
    }

/* Légende */
.legende {
    float: left;
    margin: 0 20px 0 10px;
    }
    .legende h3 {
        margin-top: 0;
        padding-top: 0;
    }
    .legende dt {
        width: 3em;
    }
    .legende dd {
        padding-left: 3em;
        border: 0;
    }

    .legende.legende-inline {
        float: none;
        margin: 20px 0;
        }
        .legende-inline h3,
        .legende-inline dl,
        .legende-inline dt,
        .legende-inline dd {
            display: inline-block;
            float: none;
            margin: 0 1em 0 0;
            padding: 0;
            width: auto;
        }


/* ------------------- Agenda -------------------- */

.text-center {
    text-align: center;
    }
    .text-center .btn-red {
        display: inline-block;
    }

.agenda {
    width: 100%;
    margin: 1em 0;
    }

    /* header */
    .agenda th {
        padding: .75em 1em;
        width: 14.28%;
        font-size: 0.929em;
        font-weight: normal;
        vertical-align: bottom;
        line-height: 1.2;
        }
        @media only screen and (max-width: 450px) {
            .agenda th {
                padding: .5em;
            }
        }
        .agenda tr.month th {
            padding-bottom: 0;
            }
            .agenda th h2 {
                color: #fff;
                font-size: 1.385em;
                font-weight: bold;
                margin: 0;
            }
        .agenda tr.day th {
            padding-top: 0;
            }
            .agenda tr.day .abbr {
                display: none;
            }
            @media only screen and (max-width: 760px) {
                .agenda tr.day .abbr {
                    display: block;
                }
                .agenda tr.day .full {
                    display: none;
                }
            }

    /* cellule */
    .agenda td {
        border: 1px solid #e9e9e9;
        padding: .5em 0;
        height: 7em;
        vertical-align: top;
        }
        @media only screen and (max-width: 760px) {
            .agenda td {
                height: 10vw;
            }
        }
    .agenda span.date {
        display: block;
        padding: 0 1em;
        border-bottom: 3px solid transparent;
        }
        @media only screen and (max-width: 450px) {
            .agenda span.date {
                padding: 0 .5em;
            }
        }
        .agenda td.day7 {
            background-color: #f4f4f4;
            }
            .agenda td.day7 span.date {
                color: #b4b4b4;
            }

        .agenda td.today span.date {
            color: #c62222;
            font-weight: bold;
        }
        .agenda td.highlight span.date {
            border-bottom-color: #c62222;
            position: relative;
            margin-right: -1px;
        }
        .agenda td.highlight.highlight-last span.date:after {
            content: "";
            position: absolute;
            right: -3px; bottom: -6px;
            width: 7px; height: 7px;
            background-color: #c62222;
            border-radius: 6px;
        }

    /* cours */
    .agenda .detail-box-wrapper {
        float: left;
        width: 20%;
        min-width: 28px;
        }
        @media only screen and (max-width: 760px) {
            .agenda .detail-box-wrapper {
                position: static;
                float: none;
                width: auto;
                max-width: 45px;
                display: block;
                margin: 0 auto;
                }
        }
        .no-touch .agenda .detail-box-wrapper:hover {
            background-color: #e6e6e6;
            z-index: 4;
        }
        .agenda .detail-box-wrapper > a {
            display: block;
            position: relative;
            margin: 0;
            padding: 2px 2px 18px;
            font-size: 0.83em;
            font-weight: bold;
            text-align: center;
            background-repeat: no-repeat;
            background-position: center center;
            }
            .agenda .detail-box-wrapper.active > a:after,
            .no-touch .agenda .detail-box-wrapper:hover > a:after {
                content: "";
                position: absolute;
                z-index: 3;
                left: 50%; top: 30px;
                width: 40px; height: 20px;
                margin-left: -20px;
                background: url('../images/box-detail-arrow-top.png') no-repeat center bottom;
            }
            
            .agenda a.gris {        color: #828282; }
            .agenda a.violet {      color: #8e22e1; }
            .agenda a.turquoise {   color: #22e1bf; }
            .agenda a.bleu {        color: #4987cd; }

            .agenda a.dispo-0.auto { background-image: url('../images/auto-rouge.png'); }
            .agenda a.dispo-1.auto { background-image: url('../images/auto-orange.png'); }
            .agenda a.dispo-2.auto { background-image: url('../images/auto-vert.png'); }

            .agenda a.dispo-0.camion { background-image: url('../images/camion-rouge.png'); }
            .agenda a.dispo-1.camion { background-image: url('../images/camion-orange.png'); }
            .agenda a.dispo-2.camion { background-image: url('../images/camion-vert.png'); }

            .agenda a.dispo-0.moto { background-image: url('../images/moto-rouge.png'); }
            .agenda a.dispo-1.moto { background-image: url('../images/moto-orange.png'); }
            .agenda a.dispo-2.moto { background-image: url('../images/moto-vert.png'); }

            .agenda .active > a {
                background-color: #747474;
                color: #fff !important;
                }
                .agenda .active a.auto { background-image: url('../images/auto-active.png'); }
                .agenda .active a.camion { background-image: url('../images/camion-active.png'); }
                .agenda .active a.moto { background-image: url('../images/moto-active.png'); }

        /* infobulle */
        .agenda .detail-box {
            margin-top: 1em;
            bottom: auto;
            }
            .lt-ie8 .agenda .detail-box {
                margin-top: 0;
            }
            @media only screen and (max-width: 760px) {
                .agenda .detail-box {
                    width: 90% !important;
                    left: 5%;
                    margin-left: 0 !important;
                    box-sizing: border-box;
                }
            }
            .agenda .detail-box:after {
                content: normal;
            }
            .agenda td.day1 .detail-box,
            .agenda td.day2 .detail-box {
                margin-left: -2em;
            }
            .agenda td.day6 .detail-box,
            .agenda td.day7 .detail-box {
                margin-left: -27em;
            }

            /* large */
            .agenda .detail-box.large {
                width: 42em;
                margin-left: -23em;
                }
                .agenda td.day6 .detail-box.large,
                .agenda td.day7 .detail-box.large {
                    margin-left: -44em;
                }
                .agenda .detail-box.large dt {
                    width: 30%;
                }
                .agenda .detail-box.large dd {
                    padding-left: 30%;
                }
                @media only screen and (max-width: 900px) {
                    .agenda td.day3 .detail-box.large {
                        margin-left: -12em;
                    }
                    .agenda td.day5 .detail-box.large {
                        margin-left: -33em;
                    }
                }

            /* Contenu infobulle */
            .agenda .detail-box h3 {
                font-size: 1.231em;
                font-weight: bold;
                color: #333;
                line-height: 1.2;
                padding: 0;
                }
                .agenda .detail-box h3 i {
                    display: inline-block;
                    height: 22px;
                    vertical-align: bottom;
                }

            .agenda .detail-box .btn-close {
                position: static;
                float: right;
                margin-top: 1.75em;
                font-weight: bold;
                font-size: 0.923em;
                }
                .agenda .detail-box .btn-close img {
                    vertical-align: -1px;
                    margin-left: 2px;
                }

            .agenda .detail-box .btn-green {
                padding: 8px;
                display: block;
                width: 7em;
                text-align: center;
                margin: 1.5em auto 0.5em;
                font-size: 0.923em;
            }
