* {
    font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
    --primary: #cccc99 !important;
    --secondary: #e8ecc8;
    --member: #A47B92;
    --not-member: #9690A6;
    --bs-secondary :#6c757d;
    --tertiary :#b3b386;;
}
*{
    font-size: 14px!important;
}
html, body {
    width: 100%;
    height: 100%;
    background-color: background-color: var(--primary);
    font-size: 1rem; /* 16px par défaut, mais tu peux mettre 1.125rem (~18px) */
    font-size: 1rem;       /* 16px */
    line-height: 1.5;      /* standard lisible */
    font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
}
article {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}
main{
    width: 100%;
}

a, a b, a i, a span {
    color: #495057;
    text-decoration:underline;
    font-size: inherit!important;
}

.sommaire a, .sommaire a b, .sommaire a b, .sommaire a i, .sommaire a span {
        text-decoration:none;
}
.pointer{
    cursor:pointer;
}
.zoom-in[
    cursor:zoom-in;
]
article {
    min-height: 100%!important;
    display: grid!important;
    grid-template-rows: auto 1fr auto!important;
    grid-template-columns: 100%!important;
}
.nav-link.fs-5{
    font-size: 1.25rem !important;
    padding: inherit;
    padding-left:7px;
    padding-right:7px;
}
/*//                       RESPONSIVE*/
@media (min-width:768px) {
    font-size: 15px;
}
@media (min-width:992px) {
    font-size: 17px;
}
@media screen and (min-width:1280px) {
    .nav-link, .nav-link>.bi{
    font-size: 20px!important;
    }
}
.front-image{   
    max-height: 300px;
    width: auto;
}
#menu_fixe{
    position: fixed;
    left: 2px;
    top:102px;
    width: 18px;
    text-align:center;
}
#menu_fixe div{
    font-size:15px !important;
}
.resp_grid img{
    max-width:100%;
    height: auto;
}
.session-icon{
    font-size: 1.5rem!important;
}
@media (max-width:992px) {
    #article_content img, #census img{
        max-width:100% !important;
        height: auto !important;
    }
    #article_content table, #article_content tr, #article_content td, #census table, #census tr, #census td
    {
        max-width:370px !important;
        height: auto !important;
    }
    #census td{
        overflow-wrap: break-word !important;
    }
    #parish_map_maped{
        display : none;
    }
    #parish_map{
        display : block;
    }
    .col_logo_lg{
        display: none;
    }
    #menu_fixe{
        top:60px;
    }
    .pren_comment{
        margin-top: 3px;
        margin-bottom: 3px;
    }
    #entity img, .carousel-item img{
        max-width:100%;
        height:auto;
        max-height:400px;
    }
    .thumb_maj{
        width:90px;
    }
    .comm-carte{
        display : none;
    }
}
@media (min-width:993px) {
    #article_content table, #article_content tr, #article_content td, #census table, #census tr, #census td {
        max-width:100% !important;
        height: auto !important;
    }
    #parish_map_maped{
        display : block;
    }
    #parish_map{
        display : none;
    }
    #logo_admin{
        display: none;
    }
    #entity img{
        height:350px;
        width:auto;
    }
    .carousel-item img{
        height:500px;
        width:auto;
    }
    .comm-list{
        display : none;
    }
}

/*//                          CARTE COMMUNES*/
@media (min-width:993px) {
    #menu_bottom{
        display :inline-block !important;
    }
    #mapWindow{
        display :inline-block !important;
    }
}
/*//                          FORMULAIRES*/
input, select, option{
    background-color: var(--primary);
}
option{
    vertical-align: 6px;
}
/*main input{
    height:22px;
}*/
input[type="radio"], input[type="checkbox"]{
    vertical-align:-5px;
}
.form-select, .form-control:enabled, .input-group-text{
    background-color: inherit !important;
    border-color: var(--bs-secondary) !important;
}
.form-control:disabled{
    background-color: inherit !important;
}

.form-select option:hover{
    background-color: var(--bs-secondary) !important;
}
.form-select optgroup{
    background-color: var(--secondary) !important;
}
.form-control::placeholder{
    opacity: 0.5 !important;
}
textarea{
    background-color: var(--primary);
}
.date_input{
    width:80px !important;
}
/*//                          TEXTES*/
.small{
    font-size: 0.75rem !important;
}
.medium{
    font-size: 0.85rem !important;
}

/*//                          COULEURS*/
.bg-primary{
    background: var(--primary)!important;
}
.bg-secondary{
    background: var(--secondary)!important;
}
.bg-tertiary{
    background: var(--tertiary)!important;
}
.bg-member{
    background: var(--member)!important;
}
.bg-not-member{
    background: var(--not-member)!important;
}
.bs-border-color{
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/*//                          NAVS*/
.navbar-nav{
    --bs-nav-link-padding-y: 0px !important;
}
/*#brand{
    content:url("../img/LISA.png");
}
@media (min-width:992px) {
    #brand{
        content:url("../img/logo65.jpg");
    }
}
*/
#brand_light{
    content:url("../img/LISA.png");
}
.menu-large{
    min-width:280px;
}
/*//                          NAVS COLORS */
.nav-tabs, .nav-link.active{
    border-bottom-color: var(--bs-secondary) !important;
}
.nav-link:hover{
    border-color: var(--bs-secondary) !important;
}
.dropdown-menu a:hover{
    background: var(--secondary)!important;
}
.dropdown-menu a:active{
    background: var(--bs-secondary)!important;
}
.dropdown-item-text a:hover{
    background: inherit!important;
}
.dropstart:hover .dropdown-menu {
    display: block;
}
/*//                          MODAL*/
.modal-body, .modal-header,.modal-footer{
    padding-bottom: 10px;
    padding-top: 10px;
}
.modal-body .row{
    margin-bottom: 4px;
    margin-top: 4px;
}
.modal-header, .modal-footer {
    border-color: var(--bs-secondary)!important;
}
.dropdown-menu{
    background-color: var(--primary);
}
.label input {
    font-size: 1em;
    color: #111111;
    background: transparent;
    padding: 0.5rem 0.6rem;
    border-radius: 5px;
    border: 2px solid #7a7a7a;
    transition: all 0.2s;
}
.label input:focus {
    border-color: #ff4754;
}
/*Styling Selectbox*/
.drop_down {
    width: 310px;
    display: inline-block;
    background-color: var(--primary);
    border-radius: 2px;
    box-shadow: 0 0 2px rgb(204, 204, 204);
    transition: all .5s ease;
    position: relative;
    font-size: 14px;
    color: #474747;
    height: 100%;
    text-align: left
}
.drop_down .select {
    cursor: pointer;
    display: block;
    padding: 2px 5px 2px 5px;
}
.drop_down .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
/*    line-height: 20px*/
}
.drop_down:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.drop_down:active {
    background-color: #f8f8f8
}
.drop_down.active:hover,
.drop_down.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: inherit
}
.drop_down.active .select > i {
    transform: rotate(-90deg)
}
.drop_down .drop_down-menu {
    position: absolute;
    background-color: var(--primary);
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9;
    cursor: default;
}
.drop_down .drop_down-menu li {
/*    transition: all .2s ease-in-out;*/
/*        height:24px;*/
    padding-right: 10px;
} 
.drop_down .drop_down-menu {
    padding: 0;
    list-style: none;
}
.drop_down .drop_down-menu li:hover {
    background-color: #f2f2f2
}
.drop_down .drop_down-menu li:active {
    background-color: #e2e2e2
}
.disabled {
    pointer-events:none;
}

.expand, .show-image, .show-image-link{
    cursor: zoom-in;
}
/*//                        TOOLTIPS */
.toolt{
    text-decoration: underline dotted;
}
.info, .popup{
    display: inline-block;
    position: relative;
    text-decoration: underline dotted;
}
.info span, .popup span{		/* pour le .info, utilisé en connection avec le jquery + ajax ref_query.php */
    display: none;
    background-color: #dadada;
    text-align: left;
    font-style: normal;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    top: 20px;
    z-index: 1;
}
.info:hover span, .popup:hover span
{
    display:block;
    width: 200px;
    cursor:  default;
    z-index:1000;
}
/*//                          BLOCS SPÉCIAUX*/
.border-secondary{
    border-color : var(--bs-secondary)!important;
}
.nav-tabs .nav-link.active{
    background-color: var(--secondary)!important;
}
/*//                          TABLES */
.table tbody{
     border-top-color: black;
     border-top-width: 2px;
}
.table tr, td, th{
    background: var(--primary)!important;
    border-bottom-color: var(--bs-secondary)!important;
}
.result tr, td, th{
    background: var(--primary)!important;
}
.result thead{
    vertical-align: middle;
}
.citation{
    padding-left: 1.5rem!important;
/*    border-left: 3px solid var(--bs-secondary);*/
    margin-bottom: 10px;
}
/*FOOTER*/

footer{
    background-color: var(--tertiary);
    opacity: 0.75;
    border-top:1px groove;
}
footer a{
    color: #333 !important;
}
@media (max-width:750px) {
    .footer-col{
        border-right: none;
    }
}
@media (min-width:751px) {
    .footer-col{
        border-right: 1px groove;
    }
}

/*                            LOADERS*/
.loader_container{
    background: rgba(255, 255, 255, 0.2);
    cursor: wait;
    height: 100%;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
.loader{
    width: 100px;
    height: 100px;  
    top: 50%;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}

/* LOADER 1 */
#loader-1:before, #loader-1:after{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #3498db;
}
#loader-1:before{
    z-index: 100;
    animation: spin 1s infinite;
}
#loader-1:after{
    border: 10px solid #ccc;
}
@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* LOADER 3 */

#loader-3:before, #loader-3:after{
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  background-color: #666;
  animation: squaremove 1s ease-in-out infinite;
}

#loader-3:after{
  bottom: 0;
  animation-delay: 0.5s;
}

@keyframes squaremove{
  0%, 100%{
    -webkit-transform: translate(0,0) rotate(0);
    -ms-transform: translate(0,0) rotate(0);
    -o-transform: translate(0,0) rotate(0);
    transform: translate(0,0) rotate(0);
  }

  25%{
    -webkit-transform: translate(40px,40px) rotate(45deg);
    -ms-transform: translate(40px,40px) rotate(45deg);
    -o-transform: translate(40px,40px) rotate(45deg);
    transform: translate(40px,40px) rotate(45deg);
  }

  50%{
    -webkit-transform: translate(0px,80px) rotate(0deg);
    -ms-transform: translate(0px,80px) rotate(0deg);
    -o-transform: translate(0px,80px) rotate(0deg);
    transform: translate(0px,80px) rotate(0deg);
  }

  75%{
    -webkit-transform: translate(-40px,40px) rotate(45deg);
    -ms-transform: translate(-40px,40px) rotate(45deg);
    -o-transform: translate(-40px,40px) rotate(45deg);
    transform: translate(-40px,40px) rotate(45deg);
  }
}

/*// classes définits par Köhler*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}