﻿
/* Page de contenu ***/
.clic-bloc .contentpage {
    margin-top: -30px;
    height: 310px;
    width: 300px;
    background: url(../media/contentpage300-vide.png) top no-repeat;
}

    .clic-bloc .contentpage .contentpageimage
    {
        width: 100%;
        height: inherit;
    }
    
    .clic-bloc .contentpage .contentpageimage .div-image-titre {
        float: left;
    }

    .clic-bloc .contentpage h1 {
        font-size: 1.8em;
        padding-top: 200px;
        color: #5c93c1;
    }
    
    .clic-bloc .contentpage .petitTitreEntete {
        font-size: 1.3em;
        color: #5c93c1;
        /*text-align: left*/
    }
    
.clic-content {
    position: relative;
    margin: 0px auto;
}

    /*.clic-content > div {
        text-align: left;
    }*/
    
    /* Colonne de gauche ***/
    .clic-content .marge {
        padding: 10px 10px 10px 0px;
        text-align: left;
        /*border-top: solid 1px #5c93c1;*/
        position: relative;
        margin: auto;
        display: block;
    }

        .clic-content .marge > div {
            text-align: left;
        }

        .clic-content .marge .clic-h1, .clic-h2 {
            font-size: 1.5em;
        }

        .clic-content .marge .titre-marge {
            font-size: 1.5em;
            color: #5c93c1; /* bleu */
            padding: 20px 10px 0px 0px;
        }

        .clic-content .marge .texte-marge {
            font-size: 1.1em;
            text-align: justify;
            color: #5c93c1; /* bleu */
            padding: 5px 10px;
            margin-top: 20px;
        }

        .clic-content .marge a h3 {
            font-size: 12px;
            text-align: left;
            color: #312e2d; /*noir */
            content: '';
            background: url(../media/icons/arrowA.png) no-repeat left center;
            padding: 5px 20px;
            display: block;
            border-top: solid 1px #5c93c1;
        }

        .clic-content .marge .imgEntrust {
            margin-top: 30px;
            display: inline-block;
            line-height: 33px;
            text-align: center;
            height: 33px;
            width: 70px;
            float: left;
        }
        
        .clic-content .marge .txtImportant {
            margin-top: 30px;
            display: inline-block;
            text-align: left;
            width: 70%;
            color: #312e2d; /*noir */
            font-style: italic;
            font-size: 0.9em;
        }
        
        .clic-content .marge .counter {
            margin-top: 20px;
            background: url(../media/icons/ol-circle.png) no-repeat center;
            font-size: 1.5em;
            color: white;
            display: inline-block;
            line-height: 33px;
            text-align: center;
            height: 33px;
            width: 53px;
            float: left;
        }

        .clic-content .marge .item {
            margin-top: 20px;
            display: inline-block;
            text-align: left;
            width: 60%;
        }

        .clic-content .marge .sep {
            clear: both;
        }

        .clic-content .marge ul {
            padding: 0px;
            padding-bottom: 20px;
            font-size: 1.2em;
            list-style: none;
            text-align: justify;
            border-top: solid 1px #5c93c1;
        }

            .clic-content .marge ul li a {
                content: '';
                background: url(../media/icons/arrowA.png) no-repeat left center;
                padding: 5px 20px;
                display: block;
                border-bottom: solid 1px #5c93c1;
            }

    /* Colonne de droite ***/
    .clic-content .contenu {
        padding: 0px 20px;
        position: relative;
        margin-top: 0px;
        border-top: solid 1px #5c93c1;
        padding-top: 20px;
    }
    
    .contenu2 {
        padding: 0px 20px;
        position: relative;
        margin-top: 0px;
        padding-top: 20px;
    }

        .clic-content .contenu .clic-h1, .titre-contenu {
            font-weight: 700;
            font-size: 1.5em;
            text-align: left;
        }

        .clic-content .contenu .txtSeo 
        {
            margin-bottom: 20px;
            text-align: justify;
            font-size: 1.5em;
            line-height: 1.1;
        }

        .clic-content .contenu .clic-h2 {
            margin: 15px 0 10px 0px;
            text-align: left;
            font-weight: 700;
            font-size: 1.5em;
            color: #5c93c1; /* bleu */
        }

        .clic-content .contenu ul {
            padding: 0px;
            font-size: 1.2em;
            list-style: none;
            text-align: justify;
            line-height: 1;
        }

            .clic-content .contenu ul li {
                content: '';
                background: url(../media/icons/ul-circle.png) no-repeat left center;
                padding: 5px 0px 0px 20px;
                display: block;
                border-bottom: inherit 1px solid;
            }

                .clic-content .contenu ul li label {
                  display: inline-block;
                  max-width: 100%;
                  margin-bottom: 5px;
                  font-weight: normal;
                  font-size: 1.2em;
                }

        .clic-content .contenu p, .texte-contenu {
            padding: 20px 0px;
            text-align: left;
            font-size: 1.2em;
        }

        .clic-content .contenu * {
            text-align: left;
        }
        
        .clic-content .contenu .txtGaucheSansPadding {
            padding: 0px 0px;
            text-align: left;
            font-size: 1.2em;
            white-space: nowrap;
        }

        .clic-content .contenu .txtConfidentialite {
            padding: 0px 0px 0px 40px;
            text-align: left;
            font-size: 1em;
            font-style: italic;
        }

        .clic-content .contenu .codePostal {
            padding: 20px 0px;
            text-align: left;
            font-size: 1.2em;
        }

        .clic-content .contenu .btnDebuter {
            margin: 0px 0px 30px;
            text-align: left;
        }

        .clic-content .contenu .condition {
            white-space: nowrap;
        }

        .clic-content .contenu .condition a {
            white-space: nowrap;
            display: none;
        }

        .clic-content .contenu .lienTermesConditions 
        {
            margin-bottom:15px;
            margin-top: 0px;
            display: inherit;
        }

.error-card {
    padding: 1rem;
    border: solid 2px red;
    border-style: groove;
    text-align: center;
}

@media (min-width: 500px) {

    /*.clic-bloc .contentpage {
        width: 500px;
        height: 175px;
        background: url(../media/contentpage500-vide.png) bottom no-repeat;
    }*/

    /*.clic-content .marge .item {
        width: 80%;
    }*/

    /*.clic-content {
        width: 500px;
    }*/
    
    .clic-content .contenu .condition a {
        white-space: nowrap;
        display: inherit;
    }
    
    .clic-content .contenu .lienTermesConditions {
    }
    
}

@media (min-width: 992px) {
    .clic-bloc .contentpage {
        width: 969px;
        height: 175px;
        background: url(../media/contentpage-vide.png) bottom no-repeat;
        text-align: left;
    }

    .clic-bloc .contentpage .contentpageimage {
        float: left;
    }

    .clic-bloc .contentpage .contentpageimage .div-titre .div_petittitre
    {
        text-align: left;
        padding-left: 350px; /* utilisé pour mettre le texte à droite de l'image */
    }
    
    .clic-bloc .contentpage h1 {
        font-size: 2.5em;
        margin-top: 60px;
        color: #5c93c1;
        text-align: left; /* utilisé pour mettre le texte à droite de l'image */
        padding-left: 350px; /* utilisé pour mettre le texte à droite de l'image */
        padding-top: 0px;
    }
    
    .clic-bloc .contentpage .petitTitreEntete {
        font-size: 1.8em;
        color: #5c93c1;
        text-align: left; /* utilisé pour mettre le texte à droite de l'image */
        /*padding-left: 50px;*/ /* utilisé pour mettre le texte à droite de l'image */
    }
    
    /*.clic-bloc .contentpage > div {
        padding-left: 350px; */ /* utilisé pour mettre le texte à droite de l'image */
        /*text-align: left;
    }*/
    
    .clic-content {
        width: 969px;
    }

        .clic-content .marge {
            min-width: 300px;
            width: 33%;
            float: left;
            padding: 0px 10px 10px 0px;
        }

            .clic-content .marge .titre-marge {
                padding: 0px 10px;
            }

            .clic-content .marge .item {
                width: 200px;
            }

        .clic-content .contenu {
            margin-top: 0px;
            border-top: none;
            padding-top: 0px;
            width: 66%;
            float: right;
        }
}