@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/CenturyGothic.eot');
    src: url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CenturyGothic.woff') format('woff'),
         url('../fonts/CenturyGothic.ttf') format('truetype'),
         url('../fonts/CenturyGothic.svg#Century-Gothic-Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Century-Gothic';
    src: url('../fonts/Century-Gothic-Bold.eot');
    src: url('../fonts/Century-Gothic-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Century-Gothic-Bold.woff') format('woff'),
         url('../fonts/Century-Gothic-Bold.ttf') format('truetype'),
         url('../fonts/Century-Gothic-Bold.svg#Century-Gothic-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}


:root {
    --primary-color: #31459E; /*bleu*/
    --primary-color--lighten: rgba(49,69,158,0.15); /*bleu opacity 15%*/
    --secondary-color: #CC8729; /*orange*/
    --tertiary-color: #995D2D; /*marron*/
    --tertiary-color--darken: #3D170F;/*marron foncé*/
    --quaternary-color: #DAB328; /*jaune*/
    --gray: #C2C2C2;
    --gray--lighten: rgba(93, 93, 92, 0.15);
    --text-color: #3F3F3E;
    --yellow: #f2b310;
    --green: #4e8329;
    --brown: #7e3731;
    
    --pane-padding: 5px 42px;
    --regular-font: 'Century Gothic';
    --bold-font: 'Century-Gothic';
}

header{
    border-bottom: 4px solid var(--green);
}

.page_sommaire header {
    margin-bottom:0px!important;
}

body{
    font-family: var(--regular-font);
    color: var(--text-color);
    background-color: #FFFFFF;
}

h1,h2,h3,h4,h5, .h1,.h2,.h3,.h4,.h5{
    font-family: var(--bold-font);
}


h1.spip_logo_site, .h1.spip_logo_site a, .h1.spip_logo_site a:hover{
    color: var(--tertiary-color);
    text-decoration: none;
}

h1, .h1, h2, .h2, h3, .h3{
    color: var(--tertiary-color);
}

ul {
    list-style: square outside none;
}

a {
    color: var(--brown);
}

a:hover {
    color: var(--tertiary-color--darken);
}
h1 {
    /* text-align: center; */
    text-transform: uppercase;
    color: var(--yellow);
}
h2{
    text-align: left;
    color: var(--green);
    text-transform: uppercase;
    font-size: 2em;
}
h2.spip {
    text-transform: none;
}
h3{
    color: var(--brown);
    font-family: var(--bold-font);
}

strong{
    font-family: var(--bold-font);
}
.text-brown {
    color: var(--brown);
}
.text-green {
    color: var(--green);
}
.text-yellow {
    color: var(--yellow);
}
.bg-yellow {
    background-color: var(--yellow);
}

.fw-bold{
    font-family: var(--bold-font);
}

div.alert{
    margin: 20px 0px;
}

div.alert-green{
    background-color: var(--green);
    border-radius: 0px;
    color: white;
    font-family: var(--bold-font);
}


/* FORMIDALE FORM */
.formulaire_formidable .editer {
    margin-bottom: 1rem;
}


.formulaire_formidable input,
.formulaire_formidable textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.formulaire_formidable input:focus,
.formulaire_formidable textarea {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.formulaire_formidable label {
    margin-bottom: .5rem;
}

.formulaire_formidable select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.formulaire_formidable span.obligatoire {
    color: var(--brown);
    font-style: italic;
}   
.formulaire_formidable .submit {
    color: white;
    background-color: var(--brown);
    border: 1px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: var(--bold-font);
    font-weight: bold;
}

#formulaire_formidable-1{
    width: 50%;
}

#slogan{
    color: var(--secondary-color);
    font-size: 20px;
    font-family: var(--bold-font);
}

#hashtag {
    color: var(--brown);
    font-family: var(--bold-font);
    font-weight: bold;
    font-style: italic;
}

/* GLOBAL */
.page {
    margin: 0;
}

.page_article .page,
.page_rubrique .page, 
.page_sommaire .page {
    margin:auto;
}

.pagination-items.pagination_page{
    display:flex;
    flex-flow: row nowrap;
    padding:0;
}

.pagination-items.pagination_page li{
    margin-right: 10px;
}

/* FICHE SUBSTANCE */
#detail {
    padding: 10px;
    border:1px solid var(--yellow);
    position: relative;
    padding-left: 45px;
    margin-top: 10px;
    margin-bottom: 30px;
}

#detail:before{
    background-color: white;
    background-image: url('../images/fiole_jaune.png');
    background-repeat: no-repeat;
    content: "";
    display: block;
    position: absolute;
    height: 86px;
    width: 67px;
    left: calc( 0% - 24px);
    top: calc(50% - 43px);
}

#detail p {
    margin-bottom: 10px;
}
#detail p span{
    font-weight: bold;
    font-family: var(--bold-font);
}
#detail a.selection{
    background-color: var(--brown);
    color: white;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--bold-font);
    padding: 05px 10px;
    padding-left: 40px;
    border-radius: 50px;
    margin-top:10px;
    margin-bottom:10px;
}

#detail a.selection:before{
    content: "";
    background-color: white;
    background-image: url('../images/picto_main.png');
    background-repeat: no-repeat;
    left: calc(0% - 10px);
    top: calc( 50% - 20px);
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    border-radius: 50%;
}

#recommandations h3.ne-pas-faire, #recommandations h3.bonnes-pratiques{
    padding-bottom: 10px;
    padding-left: 70px;
    position:relative;
}
#recommandations h3.ne-pas-faire {
    border-bottom: 3px solid var(--yellow);
}
#recommandations h3.bonnes-pratiques {
    border-bottom: 3px solid var(--green);
}
#recommandations h3.bonnes-pratiques:before, #recommandations h3.ne-pas-faire:before{
    content: "";
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    left: calc(0%);
    top: calc( 50% - 34px);
    width: 50px;
    height: 67px;
    display: block;
    position: absolute;
}
#recommandations h3.bonnes-pratiques:before {
    background-image: url('../images/visuel_bonnes_pratiques.png');
    left: calc(0%);
    top: calc( 50% - 17px);
}
#recommandations h3.ne-pas-faire:before {
    background-image: url('../images/visuel_pas_faire.png');
    top: calc( 50% - 25px);
}

.notice {
    background-color: var(--green);
    padding: 20px;
    color: white;
    font-weight: bold;
    font-family: var(--bold-font);
}

.notice a {
    color: white;
}

#alerte h2 {
    text-transform: initial;
    color: white;
}

#alerte .notice{
    padding-left: 100px;
    position:relative;
    background-color: var(--yellow);
    /* color: black; */
}

#alerte .notice:before {
    content: "";
    background-repeat: no-repeat;
    left: calc(0% + 15px);
    top: calc( 50% - 58px);
    width: 78px;
    height: 117px;
    display: block;
    position: absolute;
    background-image: url('../images/visuel_point_exclam_vert.png');
}

.bg-yellow {
    background: var(--yellow);
    color: white;
}

#classification a.classification, 
#classification a.classification:hover {
    padding : 10px;
    background-color: var(--brown);
    color: white;
    text-transform: uppercase;
    display: block;
    font-family: var(--bold-font);
    margin:auto;
    text-decoration: none;
    border-radius: 15px;
    text-align: center;
    font-size: 14px;
}

.description-exposition, .description-danger {
    position: relative;
}
.description-exposition{
    border: 2px solid var(--green);
}
.description-danger{
    border: 2px solid var(--brown);
}
.description-danger h3, .description-exposition h3 {
    text-transform: uppercase;
    position: absolute;
    top: -18px;
    left: 10px;
    background-color: white;
    display:inline-block;
    width: auto;
}
.description-danger h3{
    color: var(--brown);
}
.description-exposition h3{
    color: var(--green);
}

.critere {
    padding: 20px;
    margin: 20px;
    background-color: #f9f5f4;
    width: 100%;
}

#danger .critere h4, 
#danger .critere h4 a {
    text-align: center;
    color: var(--brown);
    text-decoration: none;
}
#exposition .critere h4, 
#exposition .critere h4 a{
    text-align: center;
    color: var(--green);
    text-decoration: none;
}

/* LISTES SUBSTANCES */

.alpha-filter{
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.alpha-filter a{
    margin: 5px 10px;
    text-decoration: none;
    color: white;
    font-family: var(--bold-font);
    padding: 5px;
}

.alpha-filter a.active,
.alpha-filter a:hover{
    background-color: white;
    color: var(--brown);
    font-weight:bold;
    font-family: var(--bold-font);
    transform: scale(1.2);
    /* text-decoration:underline; */
}

table p.no-result {
    text-align:center;
    margin: 15px 0px;
}

.dataTables_length{
    padding-top: 10px;
}

.label-grade{
    border-radius: 20%;
    padding: 10px;
    color: white;
    font-weight:bold;
    display: inline-block;
}

/* canvas + canvas {
    display:none;
} */

.color-grade-A{
    background-color: #b0d136;
}
.color-grade-B{
    background-color: #f3eb0c;
    color: black;
}
.color-grade-C{
    background-color: #fdae19;
}
.color-grade-D{
    background-color: #f04922;
}
.color-grade-E{
    background-color: #ee1f25;
}
.placeholder-image{
    max-height: 80px;
    width:auto;
}
/* div.plus, div.egal {
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    font-family: var(--bold-font);
    background-color: var(--yellow);
    border-radius: 50px;
    padding: 10px;
    height: 50px;
    width: 50px;
    line-height: 27px;
    margin: 20px auto;
} */

div.plus{
    width: 75%;
    display:block;
    margin: 30px auto;
    position: relative;
    border-bottom: 2px solid black;
}
div.plus:before{
    content: "ET";
    padding: 10px;
    font-family: var(--bold-font);
    color: black;
    font-size: 23px;
    line-height: 27px;
    position: absolute;
    left: calc(50% - 21px);
    top: calc(50% - 24px);
    background-color: white;
}


/* LIST  */
div.alphabet {
    display: table;
    width: 100%;
    margin-bottom: 1em;
}

div.alphabet span {
    display: table-cell;
    color: #3174c7;
    cursor: pointer;
    text-align: center;
    width: 3.5%
}

div.alphabet span:hover {
    text-decoration: underline;
}

div.alphabet span.active {
    color: black;
}

.form-control.is-valid, .was-validated .form-control:valid{
    border-color: black;
    background-image: none;
}

.notes-fiche{
    margin-top: 90px;
}

/* MA SELECTION */

.card.card-selection {
    max-width: 400px;
}

.card-selection .card-header, .card-selection .card-footer{
    background-color: var(--yellow);
    color: var(--brown);
}

.card-selection .card-header h5.card-title{
    text-align: center;
}
.card-selection .card-header h5.card-title a{
    text-decoration: none;
}

.card-selection .card-header .btn-close{
    background: none;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    background-color: var(--green);
    opacity: 1;
    cursor: pointer;
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    font-family: var(--bold-font);
}

.card-selection .card-header .btn-close:hover{
    cursor: pointer;
}

.card-selection .card-footer a{
    color: white;
    text-decoration: none;
    text-align: center;
    font-family: var(--bold-font);
}

.card-selection p.usage{
    border-bottom: 2px solid var(--yellow);
    text-align: center;
    padding-bottom: 10px;
}

/* CARD ACTU */

.card-actu .card-footer,
.card-actu .card-title{
    background-color: var(--yellow);
    color: white;
}

.card-actu h5.card-title{
    text-align: center;
    padding: 10px;
    margin-bottom: 0;
}

.card-actu .date {
    /* position: absolute;
    left:0; */
    color: var(--brown);
    font-family: var(--bold-font);
    text-align: right;
}

.card-actu .card-text, .card-actu .mots {
    line-height: 1.1em;
    font-size: .9em;
}

.card-actu .card-footer a{
    color: white;
    text-decoration: none;
    text-align: center;
    font-family: var(--bold-font);
    display: block;
}

.card-actu .card-thema{
    position: absolute;
    background-color: var(--brown);
    padding: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    color: white;
    font-family: var(--bold-font);
    border-radius: 0 0 0 15px;
    padding-left: 10px;
    padding-bottom: 10px;
    right: 0;
}

.card {
    max-width: 300px;
}

#blog_navigation ul {
    list-style: none;
}
#blog_navigation span.label{
    text-decoration: none;
    font-family: var(--bold-font);
}
#blog_navigation a{
    text-decoration: none;
}

/* PAGINATION */
.pagination-items{
    list-style: none;
}

.pagination-items li a, 
.pagination-items li span{
    font-family: var(--bold-font);
    text-decoration: none;
}

/* FORM LIST SUBSTANCE */
#substance-form #accordionFilter .accordion-header .accordion-button {
    background-color: var(--yellow);
    color: white;
}
#substance-form #accordionFilter input.form-check-input:checked {
    background-color: var(--yellow);
}

#substance-form input[type=submit] {
    background-color: var(--brown);
    color: white;
    border: 2px solid var(--brown);
    padding: 5px 10px;
    border-radius: 10px;
    font-family: var(--bold-font);
}
#substance-form input[type=submit]:hover {
    background-color: white;
    color: var(--brown);
    border: 2px solid var(--brown);
}


#list-substances_paginate a.paginate_button.current,
#list-substances_paginate .paginate_button:hover
{
    font-family: var(--bold-font)!important;
    color: var(--brown)!important;
    border:none!important;
}


#list-substances_wrapper tr.odd {
    background-color: rgba(224, 207, 205, 0.6);
}

#list-substances_wrapper .paginate_button{
    background: none;    
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: none;
    font-family: var(--bold-font);
    color: var(--brown)!important;
}

/* AUTOCOMPLETE WIDGET */
ul.ui-widget{
    background-color: white;
    list-style: none;
    padding-left: 0px;
}
.ui-widget li.ui-menu-item{
    border-bottom: 1px solid var(--gray);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left:15px;
}
.ui-widget li.ui-menu-item:hover{
    /* font-family: var(--bold-font); */
    background-color: var(--gray--lighten);
    cursor: pointer;
}
.ui-widget li.ui-menu-item .autocomplete-description{
    color: var(--text-color);
    font-family: var(--regular-font);
    font-style: italic;
}

.date_actu {
    font-family: var(--bold-font);
    color: var(--brown);
    font-style: italic;
    margin-bottom:0px;
    text-align: right;
}

html .ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
html .ui-autocomplete {
    height: 300px;
}

#search-ajax > .form-group {
    border:1px solid white;
    border-radius: 25px;
    padding: 15px;
    padding-left: 90px;
    position: relative;
}

#search-ajax > .form-group::before {
    content: "";
    background-repeat: no-repeat;
    background-color: var(--yellow);
    background-image: url('../images/fiole_blanche.png');
    position: absolute;
    left: calc(0% + -2px);
    top: calc(50% - 42px);
    background-size: 100%;
    width: 66px;
    height: 84px;
}

#search-ajax > .form-group label{
    margin-bottom: 10px;
    font-family: var(--bold-font);
}
#search-ajax > .form-group .chosen-single{
    border-radius: 25px;
    background-color: white;
}

.page_sommaire #search-ajax > .form-group{
    padding: 15px;
    border: none;
}
.page_sommaire #search-ajax > .form-group::before {
    background: none;
}

.page_sommaire #search-ajax > .form-group label {
    margin-bottom: 10px;
    font-family: var(--bold-font);
    display: block;
    margin:auto;
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
    padding: 20px;
}
.page_sommaire #search-ajax > .form-group label img{
    max-height: 60px;
    width:auto;
}

.page_sommaire #form-accueil {
    position: relative;
}

.page_sommaire #form-accueil > i {
    position: absolute;
    top: -26px;
    left: 50%;
}
.page_sommaire input#substance{
    border-radius: 15px;
    max-width: 50%;
    display: block;
    margin: auto;
}


/* LIST SUBSTANCES SHOW MORE */
/* .container-show-more {

} */

.cadran {
    position: relative;
}

.cadran img {
    display: block;
    margin:auto;
}

.cadran .note-cadran-toxiscore{
    position: absolute;
    top: calc(50% - 18px);
    left: calc(50% - 18px);
}
.cadran .note-cadran-toxiscore .label-grade{
    font-size: 23px;
    font-family: var(--bold-font);
}

/* FOOTER */

footer {
    border-top: 1px solid var(--brown);
    padding-top: 10px;
}

footer .colophon{
    text-align: center;
}
footer #partenaires .text{
    text-align: center;
}

#footer-logo p {
    font-family: var(--bold-font);
    text-align: center;
    color: var(--brown);
}

#footer-logo > div {
    border-right: 1px solid var(--brown);
}

#footer-logo > div:last-child{
    border-right:none;
}

#footer-logo img{
    margin: auto;
}

footer #partenaires #wrapper-logo-partenaires img{
    display:block;
    margin:15px;
}
.custom-btn {
    color: white;
    text-transform: uppercase;
    font-family: var(--bold-font);
    background-color: var(--primary-color);
    border-radius: 25px;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 0.8em;
}
.custom-btn.custom-btn-brown {
    background-color: var(--brown);
    color: white;
    border: 1px solid white;
}
.custom-btn.custom-btn-brown:hover {
    background-color: white;
    color: var(--brown);
    border: 1px solid var(--brown);
}
.custom-btn.custom-btn-green {
    background-color: var(--green);
    color: white;
    border: 1px solid white;
}
.custom-btn.custom-btn-green:hover {
    background-color: white;
    color: var(--green);
    border: 1px solid var(--green);
}


.progress-bar{
    position: relative;
    width: 250px;
    height: 25px;
    overflow: visible;

    background: linear-gradient(to right, 
        #b0d136 0% 20%, 
        #f3eb0c 20% 40%, 
        #fdae19 40% 60%,
        #f04922 60% 80%,
        #ee1f25 80% 100%                
    ); 
}

.progress-bar.green{
    background: linear-gradient(to right, 
    #4f8329 0% 20%,              
    #709b52 20% 40%,
    #92b27a 40% 60%,
    #b3caa3 60% 80%, 
    #d5e1cb 80% 100% 
    ); 
}
.progress-bar.brown{
    background: linear-gradient(to right, 
    #7e3730 0% 20%,                
    #965d57 20% 40%,
    #af837e 40% 60%,
    #c7a9a6 60% 80%, 
    #e0cfcd 80% 100% 
    ); 
}

.card-body .progress-bar {
    width: 200px;
    display:block;
    margin:auto;
}

.progress-bar span.indicator{
    /* position: absolute;
    top: -10%;
    padding: 5px;
    background-color: white;
    border: 1px solid grey;
    color: black;
    font-size: 0.8em; */

    position: absolute;
    top: -35%;
    padding: 8px;
    background-color: white;
    border: 1px solid grey;
    color: black;
    font-size: 0.8em;
    font-size: 18px;
    font-family: var(--bold-font);
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 4px 2px 3px 0px rgba(50, 50, 50, 0.40);
}

.articles-accueil #container-1.container{
    position: relative;
}

.articles-accueil #container-1.container:after{
    content: "";
    position: absolute;
    width: 204px;
    height: 360px;
    background-image: url('../images/point_interro.png');
    background-repeat: no-repeat;
    background-position: center center;
    top: 50%;
    right: calc(0% - 204px);
}

#comment-ca-marche {
    background-color: var(--green);
}
#comment-ca-marche .texte{
    color: white;
}
#comment-ca-marche h2, #comment-trouver h2{
    color: var(--yellow);
}
#comment-ca-marche img{
    border:1px solid var(--yellow);
}
#comment-trouver {
    background-color: white;
}
#comment-trouver .texte{
    color: black;
}
#comment-trouver img{
    border:1px solid var(--green);
}
#comment-trouver a, 
#comment-ca-marche a{
    color: white;
}


@media only screen and (max-width: 768px) {
    #formulaire_formidable-1{
        width: 100%;
    }
    #footer-logo > div {
        border-right: none;
    }
    .page_sommaire input#substance{
        max-width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    header img.logo{
        margin:auto;
        display: block;
    }

    header #slogan {
        width: 80%;
        display:block;
        margin:auto;
        font-size: 15px;
    }

    header .wrapper-toggler{
        width:80%;
        display:block;
        margin:auto;
    }
}