:root {
    --PrimaryColor1: #DA291C;
    --PrimaryColor2: #57718A;
    --PrimaryColor2-1: #9DC7E0;
    --PrimaryColor2-1-alpha: rgba(157, 199, 224, .5);
    --PrimaryColor3: #3B3938;
    --SecondaryColor1: #796f6e;
    --SecondaryColor2: #a19a99;
    --SecondaryColor3: #cac6c5;
    --SecondaryColor4: #e4e2e2;
    --SecondaryColor6: #f5f5f5;
    --SecondaryColor7: #ffffff;
    --SecondaryColor7-alpha: rgba(255, 255, 255, .6);
    --GreenColor1: #09aa59;
    --OrangeColor1: #ff8f26;
    --RedColor1: #e0302d;
    --bold: 'CitroenBold';
    --black: 'CitroenBlack';
    --regular: 'CitroenRegular';
    --light: 'CitroenLight';
    --PSAbold: 'PSA Groupe HMI Sans JK Bold';
    --PSAregular: 'PSA Groupe HMI Sans JK';
    --PSAlight: 'PSA Groupe HMI Sans JK Light';
    --radius1: 15px;
    --radius2: 13px;
    --radius3: 24px;
    --radius4: 10px;
}


/* defaut */
body, div, p, dl, dt, dd, h1, h2, h3, h4, h5, h6, li, img, a, form, input {
    margin: 0;
    padding: 0;
}

table, tr, td {
    border: none;
}

a img {
    border: none;
}

a:active, a:focus {
    outline-style: none;
    outline-width: 0;
}

input:active, input:focus {
    outline-style: none;
    outline-width: 0;
}

a {
    color: #525151;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a img {
    border: none;
}

.clearer {
    clear: both;
    font-size: 0px;
    height: 0px;
}

/* FONTS */
@font-face {
    font-family: 'CitroenLight';
    src: url('fonts/citroen2/CitroenType-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'CitroenRegular';
    src: url('fonts/citroen2/CitroenType-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'CitroenItalic';
    src: url('fonts/citroen2/CitroenType-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'CitroenBold';
    src: url('fonts/citroen2/CitroenType-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'CitroenBoldItalic';
    src: url('fonts/citroen2/CitroenType-BoldItalic.woff2') format('woff2');
}
@font-face {
    font-family: 'CitroenBlack';
    src: url('fonts/citroen2/CitroenType-Black.woff2') format('woff2');
}

/* ********** STRUCTURE ********* */
html, body {
    height: 100%;
}

body {
    background: #fff;
    font-family: var(--regular);
    color: #646464;
    font-weight: normal;
    font-size: 12px;
}

.mep {
    min-height: 100%;
    width: 1009px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.main {
    position: relative;
    padding: 62px 10px 60px;
    min-height: 200px;
    height: calc(100vh - 210px);
}

#doczone {
    float: right;
    width: 762px;
    height: 470px;
    background: #f3f3f3;
}

.footer {
    position: fixed;
    left: 38px;
    bottom: 18px;
    color: var(--PrimaryColor2);
    font-weight: normal;
    font-size: 11px;
}

.footer a {
    color: var(--PrimaryColor2);
    font-weight: normal;
    text-decoration: none;
}

.footer a:hover {
}

/* ********** HEADER ********** */
.header {
    height: 84px;
    background: url(bg_container.png) repeat-y left;
    position: relative;
    z-index: 1000;
}
#eguide_addendum {
    background-color: var(--PrimaryColor2);
}
/* GROUPEPDF */
.groupepdf_box {
    position: absolute;
    top: 0;
    right: 183px;
}

.groupepdf_box .groupepdf {
    float: right;
    position: relative;
    cursor: pointer;
    padding-right: 1px;
    background: url(groupepdf_sep.gif) no-repeat right top;
    color: #2a6b94;
}

.groupepdf_box .groupepdf.first {
    background: none;
    padding: 0;
}

.groupepdf_box .select {
    width: 329px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -163px;
    display: none;
    z-index: 10;
}

.groupepdf_box .select_top {
    height: 32px;
    background: url(bg_groupepdf_select_top2.png) no-repeat left bottom;
}

.groupepdf_box .select_bottom {
    height: 19px;
    background: url(bg_groupepdf_select_bottom2.png) no-repeat left top;
}

.groupepdf_box .listlabel {
    margin: 0;
    padding: 3px 10px;
    background: #ffffff;
    border: 2px solid #57718a;
    color: #57718a;
    border-radius: 24px;
    font-weight: bold;
    text-align: center;
    text-transform: UPPERCASE;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
    word-break: break-word;
}
.groupepdf_box .listlabel:hover {
    border: 2px solid #3b3938;
    color: #3b3938;
}

.groupepdf_box .list {
    margin: 0;
    padding: 0 12px 1px 10px;
    background: url(bg_groupepdf_list2.png) repeat-y left center;
}

.groupepdf_box .list li {
    list-style: none;
    padding-top: 2px;
}

.groupepdf_box .list li .pdf_a {
    display: block;
    background: #fff;
    font-size: 12px;
    line-height: 1.2em;
    color: #767676;
    text-decoration: none;
    padding: 10px 10px 9px 50px;
    background: #fff url(pdf.png) no-repeat 13px center;
}

.groupepdf_box .list li .pdf_a.paire {
    background-color: #ebebeb;
}

.groupepdf_box .list li .pdf_a:hover {
    color: #369;
}

.groupepdf_box .list li .exclaim_a {
    display: block;
    background: #fff;
    font-size: 12px;
    line-height: 1.2em;
    color: #767676;
    text-decoration: none;
    padding: 10px 10px 9px 50px;
    background: #fff url(exclaim.png) no-repeat 13px center;
}

.groupepdf_box .list li .exclaim_a.paire {
    background-color: #ebebeb;
}

.groupepdf_box .list li .exclaim_a:hover {
    color: #369;
}

/* LANGUES */
.langbox {
    position: absolute;
    right: 22px;
    top: 8px;
    background: url(dark_down.gif) no-repeat right 7px;
    z-index: 1001;
}

.langbox #t_lang {
    color: #939598;
    font-size: 10px;
    text-transform: uppercase;
    padding: 0 59px 0 25px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
}

.langbox:hover #t_lang {
    color: #231f20;
}

.langbox .langselect {
    position: absolute;
    right: -45px;
    top: 14px;
    width: 318px;
    padding-top: 12px;
    background: url(transparent.gif);
}

.langbox .langselect .langselect_top {
    width: 100%;
    height: 10px;
    background: url(bg_langselect_top.png) no-repeat center bottom;
}

.langbox .langselect .langselect_bottom {
    width: 100%;
    height: 10px;
    background: url(bg_langselect_bottom.png) no-repeat center top;
}

.langbox .langselect .langlist {
    background: url(bg_langlist.png) repeat-y center;
    padding: 5px 0 5px 18px;
}

.langbox .langselect .langlist a {
    color: #939598;
    font-size: 10px;
    text-transform: uppercase;
    width: 108px;
    padding-left: 25px;
    margin: 0 0 5px 10px;
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
    vertical-align: top;
}

.langbox .langselect .langlist a:hover {
    color: #231f20;
    text-decoration: none;
}

.logo {
    position: absolute;
    left: 30px;
    top: 11px;
}

.logo a {
    display: inline-block;
    margin-right: 10px;
}

.nompage {
    position: absolute;
    left: 250px;
    bottom: 15px;
}

.nompage_line1 {
    color: var(--SecondaryColor2);
    font-size: 14px;
    line-height: 12px;
    /* text-transform: uppercase; */
    font-family: var(--regular);
}

.nompage_line2 {
    color: var(--PrimaryColor3);
    font-size: 27px;
    line-height: 24px;
    /* text-transform: uppercase; */
    font-family: var(--bold);
}

/* langues */
.langbox .fr_fr {
    background-image: url(../images/flags/fr.gif);
}

.langbox .hr_hr {
    background-image: url(../images/flags/hr.gif);
}

.langbox .en_us {
    background-image: url(../images/flags/gb.gif);
}

.langbox .sl_si {
    background-image: url(../images/flags/si.gif);
}

.langbox .es_es {
    background-image: url(../images/flags/es.gif);
}

.langbox .bg_bg {
    background-image: url(../images/flags/bg.gif);
}

.langbox .de_de {
    background-image: url(../images/flags/de.gif);
}

.langbox .et_ee {
    background-image: url(../images/flags/ee.gif);
}

.langbox .it_it {
    background-image: url(../images/flags/it.gif);
}

.langbox .lv_lv {
    background-image: url(../images/flags/lv.gif);
}

.langbox .nl_nl {
    background-image: url(../images/flags/nl.gif);
}

.langbox .lt_lt {
    background-image: url(../images/flags/lt.gif);
}

.langbox .pt_pt {
    background-image: url(../images/flags/pt.gif);
}

.langbox .sk_sk {
    background-image: url(../images/flags/sk.gif);
}

.langbox .da_dk {
    background-image: url(../images/flags/dk.gif);
}

.langbox .sr_yu {
    background-image: url(../images/flags/rs.gif);
}

.langbox .sv_se {
    background-image: url(../images/flags/se.gif);
}

.langbox .tr_tr {
    background-image: url(../images/flags/tr.gif);
}

.langbox .no_no {
    background-image: url(../images/flags/no.gif);
}

.langbox .ru_ru {
    background-image: url(../images/flags/ru.gif);
}

.langbox .fi_fi {
    background-image: url(../images/flags/fi.gif);
}

.langbox .id_id {
    background-image: url(../images/flags/id.gif);
}

.langbox .el_gr {
    background-image: url(../images/flags/gr.gif);
}

.langbox .ja_jp {
    background-image: url(../images/flags/jp.gif);
}

.langbox .cs_cz {
    background-image: url(../images/flags/cz.gif);
}

.langbox .es_ar {
    background-image: url(../images/flags/ar.gif);
}

.langbox .hu_hu {
    background-image: url(../images/flags/hu.gif);
}

.langbox .pt_br {
    background-image: url(../images/flags/br.gif);
}

.langbox .pl_pl {
    background-image: url(../images/flags/pl.gif);
}

.langbox .ro_ro {
    background-image: url(../images/flags/ro.gif);
}

.langbox .uk_ua {
    background-image: url(../images/flags/ua.gif);
}

.langbox .he_il {
    background-image: url(../images/flags/il.gif);
}

.langbox .ar_tn {
    background-image: url(../images/flags/ar_tn.gif);
}

.langbox .ca_es {
    background-image: url(../images/flags/catalonia.gif);
}
.langbox .mk_mk { background-image: url(../images/flags/mk.gif); }
.langbox .sq_al { background-image: url(../images/flags/al.gif); }

/* ********** CARNAV ********** */
.carnav {
    padding: 0 9px;
    background: url(bg_container.png) repeat-y left;
    position: absolute;
    top: 84px;
    z-index: 10;
}

.carnav .carnavmask {
    position: relative;
    overflow: hidden;
    height: auto;
    background: #f4f4f4;
}

.carnav .carnavmask .carnavcontent {
    background: #f4f4f4;
    padding: 25px 0;
    width: 991px;
}

.carnav .carnavmask .carnavcontent .nav_clearer {
    clear: both;
    font-size: 0px;
    height: 54px;
}

/* SELECTBAR */
.selectbar {
    height: 43px;
    width: 1009px;
    padding-bottom: 5px;
    background: url(bg_selectbar.png) no-repeat left top;
    position: absolute;
    top: 100%;
    left: 0;
}

.selectbox {
    height: 43px;
    position: absolute;
    right: 32px;
    top: 0;
}

.selectbox_left {
    height: 43px;
    width: 20px;
    float: left;
    background: url(bg_selectbox_left.png) no-repeat right top;
}

.selectbox_right {
    height: 43px;
    width: 20px;
    float: left;
    background: url(bg_selectbox_right.png) no-repeat left top;
}

.selectbox_content {
    height: 14px;
    padding: 10px 2px 18px 8px;
    float: left;
    background: url(bg_selectbox_content.png) repeat-x top;
}

.carselect {
    color: #939598;
    cursor: pointer;
    background: url(up-down.gif) no-repeat right top;
    display: inline-block;
    padding-right: 25px;
    margin-right: 25px;
}

.carselect:hover {
    color: #231f20;
    text-decoration: none;
}

.periodselect {
    color: #369;
    font-size: 11px;
    cursor: pointer;
    background: url(up-down.gif) no-repeat right bottom;
    display: inline-block;
    padding-right: 25px;
}

.periodselect:hover {
    text-decoration: none;
}

/* VEHICULES */
.choisissez {
    margin: 0 0 10px 40px;
    height: 0;
    overflow: hidden;
}

.carline {
    padding: 0 0 0 20px;
    clear: both;
}

.carbox {
    float: left;
    width: 150px;
    height: 90px;
    text-align: center;
    padding: 8px;
    margin-right: 18px;
    margin-bottom: 18px;
    position: relative;
    z-index: 11;
    border-radius: var(--radius2);
    cursor:pointer;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--SecondaryColor7);
    border: 4px solid var(--SecondaryColor7);
}

.carbox.hover {
    /*background: url(bg_carbox.gif) no-repeat center top;*/
    z-index: 12;
    border-color: var(--PrimaryColor1);
}
.carbox>img{
    height:50px;
    flex:1 0 auto;
    overflow: hidden;
}
.carbox .carnum {
    font-family: var(--bold);
    color: var(--PrimaryColor3);
    font-size: 16px;
    padding-top: 6px;
    text-transform: uppercase;
    width:100%;
    height:100%;
    flex:1 1 auto;
}

.carbox.hover .carnum {
    color: var(--PrimaryColor2);
}

/* SILHOUETTES */
.carbox .cartypebox {
    position: absolute;
    top: 93px;
    left: 50%;
    display: none; /**/
    z-index: 100;
}

.carbox .cartypebox .cartypemask {
    position: absolute;
    background: url(bg_cartypemask.png) no-repeat center top;
    height: 18px;
    width: 118px;
    left: 50%;
    margin-left: -59px;
    top: -9px;
}

.carbox .cartypebox .cartypecontent {
    height: 50px;
    padding: 10px 0 12px;
    background: url(bg_cartype_content.png) repeat-x top;
    white-space: nowrap;
}

.carbox .cartypebox .cartypeleft {
    position: absolute;
    left: -16px;
    top: 0;
    width: 16px;
    height: 72px;
    background: url(bg_cartype_left.png) no-repeat right top;
}

.carbox .cartypebox .cartyperight {
    position: absolute;
    right: -16px;
    top: 0;
    width: 16px;
    height: 72px;
    background: url(bg_cartype_right.png) no-repeat right top;
}

.carbox .cartypebox .cartype {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.carbox .cartypebox .cartype img {
    position: relative;
    margin: 0 5px;
}

.carbox .cartypebox .cartype_first img {
    margin-left: 0;
}

.carbox .cartypebox .cartype_last img {
    margin-right: 0;
}

.carbox .cartypebox .cartype:hover img {
    top: -50px;
}

/* PERIOD BOX */
.carperiod {
    background: url(bg_carperiodcontent.png) no-repeat left top;
    width: 217px;
    height: 268px;
    padding: 20px 22px 0;
    position: absolute;
    z-index: 2000;
    display: none; /**/
}

.carperiod .carperiod_left {
    height: 34px;
    width: 40px;
    padding: 35px 0 31px;
    position: absolute;
    right: 250px;
    top: 94px;
    text-align: right;
    background: url(transparent.gif);
    display: none;
}

.carperiod .carperiod_left .puce_carperiod_left {
    display: inline-block;
    width: 22px;
    height: 34px;
    background: url(puce_carperiod_left.png) no-repeat right center;
}

.carperiod .carperiod_right {
    height: 34px;
    width: 40px;
    padding: 35px 0 31px;
    position: absolute;
    left: 250px;
    top: 94px;
    text-align: left;
    background: url(transparent.gif);
    display: none;
}

.carperiod .carperiod_right .puce_carperiod_right {
    display: inline-block;
    width: 22px;
    height: 34px;
    background: url(puce_carperiod_right.png) no-repeat left center;
}

.carperiod .carperiodtitle {
    text-align: left;
    color: var(--PrimaryColor2);
    font-family: var(--bold);
    font-size: 16px;
    line-height: 17px;
    padding-bottom: 6px;
}

.carperiod .carperiodlist {
    color: #646464;
    font-size: 11px;
    line-height: 17px;
    text-align: left;
}

.carperiod .carperiodlist #licarperiodelist {
    margin: 8px 0 0 0;
    padding: 0;
    height: 192px;
    overflow: auto;
}

.carperiod .carperiodlist ul li {
    list-style: none;
    height: 17px;
    margin: 2px 0;
    padding-left: 20px;
    background: url(puce_periodlist.gif) no-repeat 7px center;
    font-size: 14px;
}

.carperiod .carperiodlist ul li.line_a {
    background-color: #ebebeb;
}

.carperiod .carperiodlist ul li a {
    color: #939598;
    text-decoration: none;
}

.carperiod .carperiodlist ul li a:hover {
    color: #369;
}

.carperiod .carperiodlist .carperiodlist_up {
    background: url(fleche_periode_haut.gif) no-repeat center center;
    height: 14px;
    display: none;
}

.carperiod .carperiodlist .carperiodlist_up.off {
    background-image: url(fleche_periode_haut_off.gif);
}

.carperiod .carperiodlist .carperiodlist_down {
    background: url(fleche_periode_bas.gif) no-repeat center center;
    height: 14px;
    display: none;
}

.carperiod .carperiodlist .carperiodlist_down.off {
    background-image: url(fleche_periode_bas_off.gif);
}

/* ********** SOMMAIRE ********** */
.sommairepdf {
    float: left;
    height: 470px;
    width: 219px;
    background: #f3f3f3;
}

.sommairepdf .pdfsommaire {
    color: #58595b;
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 12px 7px;
    text-decoration: none;
    display: block;
}

.sommairepdf .pdfsommaire:hover {
    text-decoration: none;
}

/* ********** SOMMAIRE V2 ********** */
.sommairelist {
    height: 370px;
    margin-right: 6px;
    overflow: auto;
    font-size: 11px;
}

.sommaireheader {
    text-align: left;
}

.sommaireheader #pdfvehiculenomv2 {
    font-family: PeugeotStyle, Arial, Helvetica, sans-serif;
    color: #231f20;
    font-size: 26px;
    text-align: center;
    margin: 10px 6px 0;
}

.sommaireheader .vehiculeimage {
    display: none;
}

.sommairepdf .pdfsommaire {
    margin: 14px 16px 6px;
    font-weight: bold;
    font-size: 17px;
}

.sommairelist ul {
    margin: 1px 0 0 16px;
    padding: 0;
}

.sommairelist ul li {
    list-style: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: -1px;
    padding: 5px 2px 5px 15px;
    width: 157px;
    background-color: #f3f3f3;
}

.sommairelist ul li a {
    color: #58595b;
    margin-right: 10px;
    text-decoration: none;
    display: block;
}

.sommairelist ul li a:hover {
    color: #231f20;
}

.sommairelist ul li ul {
    height: auto;
    display: none;
    margin: 5px 0 0 0;
}

.sommairelist ul li ul li {
    border-bottom: none;
    border-top: 1px dashed #a3a3a3;
    font-size: 10px;
    line-height: 14px;
    width: auto;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 3px 0 3px 12px;
}

.sommairelist ul li ul li a {
}

.sommairelist ul li ul li ul {
    margin: 3px 5px 0 0;
}

.sommairelist ul li ul li ul li {
    border-top: 1px dotted #a3a3a3;
    padding: 2px 0 2px 10px;
}

.sommairelist ul li ul li ul li a {
    color: #58595b;
}

/*.sommairepdf li.hover > ul { display: block; }*/ /* pb ie6 -> JS */
.sommairelist .isparent {
    cursor: pointer;
    background-image: url(puce_sommaire_undev.gif);
    background-repeat: no-repeat;
    background-position: 0px 9px;
}

.sommairelist ul li ul .isparent {
    background-position: 0px 6px;
}

.sommairelist .isparenthover {
    cursor: pointer;
    background: url(puce_sommaire_dev.gif) no-repeat 0px 9px;
}

.sommairelist ul li ul .isparenthover {
    background-position: 0px 6px;
}

.sommairelist .pdfselected {
    color: #369;
}

.langbox {
    position: absolute;
    right: 22px;
    top: 0;
    z-index: 1001;
    width: 155px;
    border: none;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-position: center right;
}

.langbox .langselect {
    margin-top: 25px;
}

.langbox .he_il {
    background-image: url(../images/flags/il.gif);
}

.langbox .ar_tn {
    background-image: url(../images/flags/ar_tn.gif);
}


@media screen and (min-width: 1279px) {
    body[data-content-mode="eGuide"] .mep {
        width: 1280px;
    }

    body[data-content-mode="eGuide"] .header {
        width: 1009px;
        margin: 0 auto;
    }

    body[data-content-mode="eGuide"] #id_carnav {
        width: 991px;
        left: 50%;
        margin-left: -504px;
    }

    body[data-content-mode="eGuide"] iframe[name="eGuide"] {
        width: 100%;
    }

    body[data-content-mode="pdfsimple"] .mep {
        width: 1280px;
    }

    body[data-content-mode="pdfsimple"] .header {
        width: 1009px;
        margin: 0 auto;
    }

    body[data-content-mode="pdfsimple"] #id_carnav {
        width: 991px;
        left: 50%;
        margin-left: -504px;
    }

    body[data-content-mode="pdfsimple"] iframe[name="pdfsimple"] {
        width: 100%;
    }
}