/* Tableau grille tarifaire : */

/* Block global - surcharge : */
.block-content-benefits{
    margin: 0;
    padding: 0;
    width: 100%;
}

.block-content-benefits > .text-block-content > .text-block{
    width: 100%;
    margin: 0;
    padding: 0;
}

/* En-tête du tableau : */

/*En-tête global : */
.block-content-benefits > .text-block-content > .text-block > .table-benefit-header{
    /*border: solid thin red;*/
    background-color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    font-size: 100%;
}

/*Titre du tableau : */
.table-benefit-title{
    font-family: 'font1', sans-serif;
    font-size: 180%;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*Les titres 2eme ligne : */
.block-content-benefits > .text-block-content > .text-block > .table-benefit-header > .table-benefit-colon .header-title{
    /*border: solid thin black;*/
    font-family: 'font1', sans-serif;
    font-size: 150%;
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
}
/*Retrait des sous-titres : */
.block-content-benefits > .text-block-content > .text-block > .table-benefit-header > .table-benefit-colon > .table-rate-colon > .header-title{
    position: relative;
    width: 100%;
}
/*Les sous-titres (3eme ligne) : */
.block-content-benefits > .text-block-content > .text-block > .table-benefit-header > .table-benefit-colon > .table-rate-colon > .rate-sub-titles .sub-title{
    /*border: solid thin black;*/
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    float: left;
}

/*1er titre : */
.category.colon-title.header-title{
    background-color: #eee;
    width: 25.8%;
}
/*2eme titre : */
.table-benefit-colon .benefit.colon-title.header-title{
    background-color: #e6e6e6;
    width: 36%;
}
/*3eme titre : */
.table-benefit-colon .period.colon-title.header-title{
    background-color: #eee;
    width: 18.75%;
}
/*4eme titre : */
.table-rate-colon{
    background-color: #e6e6e6;
    width: 18.75%;
    position: relative;
    float: left;
}
/*1er sous-titre du 4eme titre : */
.rate-sub-titles .sub-title.color-0{
    background-color: #ddd;
}
/*2eme sous-titre du 4eme titre : */
.rate-sub-titles .sub-title.color-1{
    background-color: #eee;
}

/************************/

/* Ligne Catégorie : */

/*Conteneur global pour une ligne : */
.benefit-category-element{
    /*border: solid thin red;*/
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100px;
    text-align: center;
    text-decoration: none;
    color: #000;
}
/*a.benefit-category-element:hover{
    background-color: #0088CC;
}*/
.benefit-category-element .btn-block{
    margin: 0;
    padding: 0;
    display: block;
    background-color: rgba(255,255,255,0);
    position: absolute;
    top: 0;
    left: 0;
    width: 25.5%;
    height: 100%;
}
.benefit-category-element .btn-block:hover{
    background-color: rgba(255,255,255,0.3);
}

/* 1ere colonne (1er block de la ligne) : */
.benefit-category-element > .category{
    position: relative;
    width: 25%;
    height: 100%;
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*block centré contenant les éléments textes + icone : */
.benefit-category-element > .category.helper > .category.container{
    /*border: solid thin red;*/
    height: 100px;
    bottom: 50px;
    float: none;
}
/*Le block parent qui centre le block contenant les éléments : */
.category.helper{
    /*border: solid thin red;*/
    position: absolute;
    top: 50%;
    left: 0;
    width: 25.5%;
    height: 0;
    margin: 0;
    padding: 0;
}

/*Eléments de la 1ere colonne : */
.benefit-category-element > .category.helper > .container >.title,
.benefit-category-element > .category.helper > .container > .clarification{
    /*border: solid thin black;*/
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: 'font5', sans-serif;
    color: #FFFFFF;
}
/*Titre Catégorie : */
.benefit-category-element > .category.helper > .container > .title{
    font-size: 120%;
}
/*Sous-titre Catégorie (précisions) : */
.benefit-category-element > .category.helper > .container > .clarification{
    font-size: 95%;
}
/*Icone : */
.icon-benefit-category{
    /*border: solid thin blue;*/
    position: relative;
    margin-left: 0;
    margin-top: 5px;
    width: 60px;
}

/************************/

/* Les fonds plus ou moins transparent de la catégorie (colonnes) : */

/* La ligne globale : */
.benefit.row-bkg{
    /*border: solid thin green;*/
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    left: 1%;
    width: 98%;
    height: 100%;
}
/* La colonne Périodicité : */
.period.row-bkg{
    /*border: solid thin green;*/
    position: absolute;
    background-color: rgba(255,255,255,0.3);
    left: 49%;
    width: 25%;
    height: 100%;
}
/* La colonne Tarif : */
.rate.row-bkg{
    /*border: solid thin green;*/
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    left: 74%;
    width: 25%;
    height: 100%;
}
/* La colonne Client : */
.row-bkg.n-0{
    /*border: solid thin green;*/
    position: absolute;
    /*background-color: red;*/
    left: 0;
    width: 50%;
    height: 100%;
}
/* La colonne Adhérent : */
.row-bkg.n-1{
    /*border: solid thin green;*/
    position: absolute;
    background-color: rgba(255,255,255,0.3);
    left: 50%;
    width: 50%;
    height: 100%;
}

/************************/

/* Les blocks pour une ligne (champs Prestation, Périodicité et tarif : */

/* Le block contenant toutes les lignes de prestation
pour une catégorie (mais sans la colonne catégorie) : */
.benefit-list{
    /*border: solid thin violet;*/
    position: relative;
    width: 75%;
    height: 100%;
    display: inline-block;
}
/*La ligne globale (sans colonne catégorie) : */
.benefit-element{
    /*border: solid thin red;*/
    position: relative;
    width: 98%;
    height: 100%;
    display: inline-block;
}

.benefit-element.color-0.btn-block,
.benefit-element.color-1.btn-block{
    /*margin: 0;
    padding: 0;*/
    position: relative;
    width: 98%;
    height: 100%;
    display: inline-block;
    color: #000;
}
.benefit-element.color-0.btn-block:hover,
.benefit-element.color-1.btn-block:hover{
    background-color: rgba(255,255,255,0.8);
}

/* Les couleurs suivant la position de la ligne : */
.benefit-element.color-0{
    background-color: rgba(255,255,255,0);
}
.benefit-element.color-1{
    background-color: rgba(255,255,255,0.5);
}

/* Le block principal pour chaque partie Prestation/Périodicité/Tarif : */
.container{
    /*border: solid thin blue;*/
    position: relative;
    display: inline-block;
    height: 100%;
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
.benefit.container{
    width: 49%;
    text-align: left;
    float: none;
}
.period.container{
    width: 25.5%;
    font-family: 'font3', sans-serif;
    font-size: 90%;
}
.rate-list.container{
    /*border: solid thin orange;*/
    width: 25.5%;
}

/*La ligne affichant l'info pour un tarif Client ou Adhérent : */
.rate-list > .rate{
    /*border: solid thin green;*/
    position: relative;
    width: 50%;
    float: left;
}

/************************/

/* Les styles des blocks texte : */

.info-plus{
    position: relative;
    right: 5px;
    font-family: 'font3i', sans-serif;
    font-size: 80%;
    width: auto;
    margin-left: 50px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;

    background-color: #222;
    border-radius: 10px;
    color: #fff;

    /*float: right;*/
}

.line{
    /*border: solid thin cadetblue;*/
    width: 96%;
    float: left;
}

.benefit-title{
    /*border: solid thin red;*/
    font-family: 'font3', sans-serif;
    padding-left: 20px;
}
.benefit-offer{
    font-family: 'font3i', sans-serif;
    font-size: 90%;
    width: auto;
    margin-left: 50px;
    padding-left: 10px;
    padding-right: 10px;
}
.benefit-option{
    font-family: 'font3', sans-serif;
    font-size: 85%;
    padding-left: 20px;
    padding-right: 20px;
}
.benefit-clarification{
    font-family: 'font2', sans-serif;
    font-size: 80%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Styles des offres : */

.offer-silver{
    background-color: #999;
    border-radius: 10px;
    color: #fff;
}
.offer-gold{
    background-color: #e5a809;
    border-radius: 10px;
    color: #fff;
}
.offer-platinum{
    background-color: #fff;
    border-radius: 10px;
    color: #999;
}

/* Styles des champs tarifaires : */

.rate.row{
    width: 100%;
    display: block;
}

/*Le block parent centrant le cartouche .benefit-rate-access.line : */
.benefit-rate-access.helper{
    /*border: solid thin red;*/
    display: block;
    width: 0;
    margin-left: 50%;
}
/*Le cartouche "compris dans la cotisation / non accessible aux clients : */
.benefit-rate-access.line{
    position: relative;
    border-radius: 10px;

    font-family: 'font3', sans-serif;
    font-size: 80%;
    color: #fff;

    width: 95px;
    height: 100%;
    padding: 5px;
    margin-left: -52px;
}
/* Les fonds de couleur suivant le type d'accès : */
.benefit-rate-access.line.color-0{
    background-color: #25d017;
}
.benefit-rate-access.line.color-1{
    background-color: #ff6400;
}

.benefit-rate-price{
    font-family: 'font4', sans-serif;
    font-size: 110%;
}
.benefit-rate-comment{
    font-family: 'font2i', sans-serif;
    font-size: 100%;
}

/* Le style des enfants des prestations : */

.sub-benefit-list{
    /*border: solid thin red;*/
    position: relative;
    background-color: rgba(255,255,255,0);
    width: 100%;
    height: 100%;
    float: left;
}

.sub-benefit-element{
    border-top: solid thin #000;
    /*border: solid thin blue;*/
    position: relative;
    width: 93%;
    height: 100%;
    float: left;
    margin-left: 7%;
}

.benefit-element > .sub-benefit-list > .sub-benefit-element > .benefit.container{
    /*border: solid thin green;*/
    width: 45%;
}
.benefit-element > .sub-benefit-list > .sub-benefit-element > .period.container{
    /*border: solid thin green;*/
    width: 27.5%;
}
.benefit-element > .sub-benefit-list > .sub-benefit-element > .rate-list.container{
    /*border: solid thin green;*/
    width: 27.3%;
}

/***** Surcharges des styles sur le tableau contenu de la cotisation : ******/

.table-benefit-body.subscription .benefit-category-element .benefit-list .benefit-element .benefit.container{
    width: 100%;
}

.table-benefit-body.subscription .benefit-rate-access.line{
    background-color: #25d017;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 15px;
    margin-right: 10px;
    /*float: right;*/
}
.table-benefit-body.subscription .benefit-rate-price.line,
.table-benefit-body.subscription .benefit-rate-comment.line{
    margin-right: 10px;
    float: right;
    /*text-align: right;*/
}
.table-benefit-body.subscription .benefit-rate-price.line{
    font-size: 150%;
}

/*********************************/

/**/

.benefit.info{
    background-color: rgba(255,255,255,.7);
}
.benefit.info.close{
    display: none;
}
.benefit.info.open{
    display: block;
}
.table-benefit-body .paragraph{
    background-color: transparent;
}

.benefit-element-info{
    position: relative;
    float: right;
    display: inline-block;
}
.info-aperture{
    position: relative;
    right: 5px;
    font-family: 'font4', sans-serif;
    font-size: 80%;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    text-align: center;

    background-color: #222;
    border-radius: 10px;
    color: #fff;
}

.benefit-category-element.subscription{
    width: 100%;
    height: 100%;
    min-height: inherit;
}
.benefit-list.subscription,
.benefit-list.subscription .benefit.row-bkg,
.benefit-list.subscription .benefit-element.subscription,
.benefit-list.subscription .benefit-title.line{
    background-color: transparent;
    width: 100%;
    height: 100%;
    min-height: inherit;
    left: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}

.benefit-list.subscription .benefit-title.line{
    font-family: 'font4i', sans-serif;
    font-size: 200%;
    color: #fff;
}

.benefit-info{
    width: 100%;

}
.benefit-info .benefit-title.line{
    /*border: solid thin red;*/
    position: relative;
    width: 70%;
    min-height: 33px;
    float: left;
    font-size: 110%;
}
.benefit-info .rate.row{
    /*border: solid thin green;*/
    position: relative;
    width: 25%;
    float: left;
    text-align: right;
}
.benefit-info .rate.row span{
    text-align: right;
    display: inline-block;
}
.benefit-info .rate.row span span.benefit-rate-access.line{
    text-align: center;
    margin: 0;
}