@import "../../../Commun/css/monbootstrap.css";
@import "./table.css";
@import "./main_bord.css";
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");


:root {
    --background-footer  : #181818;
    --couleurdefond      : #fcfcfc;
    --orange             : #fab94a;
    --or                 : #ffbf00;
    --jauneclair         : #ecfc96;
    --jaunefonce         : #e1f18c;
    --orangefonce        : #fa9018;
    --rougeclair         : #ff4343;
    --rose         : #F9C5EB;
    --rougebrique        : #ef7d60;
    --rougemoyen         : #c71d1d;
    --vertclair          : #5fc657;
    --vertfonce          : #007232;
    --cyan               : #7aebb2;
    --bleuclair          : #d6d6f3;
    --bleu               : #6b90da;
    --bleuciel           : #61d0e5;
    --bleupastel         : #dcecfd;
    --bleucielfonce      : #00afe7;
    --violet             : #af82af;
    --parme              : #d2c8e7;
    --ocean              : #3eb3b3;
    --grisextraleger     : #f0efef;
    --grisleger          : #d3d3d3;
    --grismoyen          : #808080;
    --grisfonce          : #5a5959;
    --gristransparent    : #ffffffcc;


    /*couleur pour test couleur dans tableau*/
    --rougepale          : #fdb6b6;
    --vertpastel         : #bde5bd;
    /* couleurboard */
    --fondboard          : #f5f5fa;
    --fondbody           : #f5f4f4;
    --fondtab            : #f5f4f4;
    /* degrade header up et dep */
    --trans-rougefonce   : #bb0d0dc2;
    --trans-orangefonce  : #eb6c04a2;
    --trans-rougeprofond : #b30404b3;
    --trans-marron       : #f356188a;
    /*couleurs departements*/
    --couleur01          : #33dffd;
    --couleur06          : #33dffd;;
    --couleur08          : #33dffd;
    --couleur11          : #33dffd;
    --couleur30          : #33dffd;
    --couleur34          : #33dffd;
    --couleur57          : #33dffd;
    --couleur66          : #33dffd;
    --couleur74          : #33dffd;
    --couleur83          : #33dffd;
    /*font*/
    --mafont             : 'Open sans';
}

* { font-family : var(--mafont);}

body {
    background-color : var(--fondbody);
    min-width        : 350px !important;
}
#bandeau_consent {
    background-color:var(--grisextraleger);
    color:var(--grisfonce);
    font-size:14px;
    position:fixed;
    width:100%;
    bottom:0px;
    z-index:100;
    box-shadow : 0px 0px 15px 2px rgba(0, 0, 0, 0.7);
}

#image-cookie {
    max-width:50px;
}


#choix_consent {
     text-align:center;
     margin:auto;
}

/* #btn_acceptercookies , #btn_personnaliser {position:relative; top: -50px;} */
#box_choix { 
    padding-left:160px;
    margin-bottom:12px;
}
#box_choix label {
   line-height:22px;
}
#choix_consent input[type=checkbox] {
    height:0;
    width:0;
    visibility :hidden;
}

#choix_consent label {
    margin-bottom:0px;
    text-indent:-180px;
    width:44px;
    height:22px;
    background:lightgrey;
    display:block;
    border-radius:100px;
    position : relative;
    cursor:pointer;
}
.media-body p {
    margin-bottom:0px;
}
#choix_consent label:after {
    content:'';
    position:absolute;
    top:2px;
    left:2px; 
    width:18px;
    height:18px;
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;
}

#choix_consent input:checked + label{
background:#66ce63;}

#choix_consent input:checked + label:after{
    left: calc(54% ); 
}


.table-cookie {
    font-size:12px; 
}
.table-cookie tr, .table-cookie th {
  padding:5px;
    vertical-align:middle;
 
  
}
.table-cookie td {
    vertical-align:middle;
    padding:2px 25px;
}
.table-cookie th {
    text-align:center;
}

.modal-body .titre_tableau_cookie{
    color:white;
    background-color:var(--grismoyen);
    padding: 4px 10px;
    border-radius: 7px;
    margin-bottom:5px;
    max-width:380px;
    text-align:center;
}
nav, .navbar {
    min-width : 350px;
}

li {
    list-style-type : none;
}

ul.list-styled li{
    list-style-type : circle;
}

.container {
    max-width : 98%;
}

.container-menu-footerDep {
    min-height : 43vh;
}

.container-footerUp {
    min-height : 68vh;
}

.container-menu-footerUp {
    min-height : 62vh;
}

.row {
    margin  : 0;
    padding : 0;
}

.hidden {
    display : none;
}

.visible {
    display : block;
}

.border-1 {
    border-bottom : 1px solid var(--grisleger);
}

.border-3 {
    border-width : 3px !important;
}

.border-4 {
    border-width : 4px !important;
}

/* reCaptcha */
.grecaptcha-badge {
    visibility: hidden;
}


/*suppression outline*/
.btn:focus,
.btn.focus {
    box-shadow : 0 0 0 0rem rgba(0, 123, 255, 0.25);
}

.form-control:focus {
    border-color     : #f1f2f3;
    outline          : 1;
    background-color : var(--grisextraleger);
    box-shadow       : 0 0 0 0rem rgba(0, 123, 255, 0.25);
}

.btn-rouge:not(:disabled):not(.disabled):active:focus,
.btn-rouge:not(:disabled):not(.disabled).active:focus,
.show > .btn-rouge.dropdown-toggle:focus {
    box-shadow : 0 0 0 0rem rgba(233, 35, 35, 0.5);
}
/* Loader */
.loader {
    position: relative;
    width: 100%;
    min-height: 80vh;
    padding: 20px;
    display: none; /* Managed by JS */
}

/* Loading Bar */
.loading-bar-container {
    position: absolute;
    top: 20px; /* Offset to align with 40px header given 20px margin-top on container */
    left: 0;
    width: 100%;
    height: 5px;
    background-color: transparent;
    z-index: 999;
    pointer-events: none;
}

.loading-bar {
    height: 100%;
    width: 0;
    background-color: var(--rougemoyen);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    /* Transition handled by JS */
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton Styles */
.skeleton-block {
    background: #f5f5f5; /* Lighter base */
    background: linear-gradient(90deg, #f5f5f5 25%, #eaeaea 50%, #f5f5f5 75%); /* Very subtle gradient */
    background-size: 200% 100%;
    animation: shimmer 2.5s infinite linear; /* Slower animation */
    border-radius: 4px;
}

/* Form Skeleton */
.card-header.skeleton-block {
    height: 50px;
    border-bottom: 1px solid #e9ecef;
}

.skeleton-label {
    height: 14px;
    width: 30%;
    margin-bottom: 6px;
    background: #f5f5f5;
    background: linear-gradient(90deg, #f5f5f5 25%, #eaeaea 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer 2.5s infinite linear;
    border-radius: 2px;
}

.skeleton-input {
    height: 38px;
    width: 100%;
    margin-bottom: 15px;
    background: #f5f5f5;
    background: linear-gradient(90deg, #f5f5f5 25%, #eaeaea 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer 2.5s infinite linear;
    border-radius: 4px;
    border: 1px solid #eee;
}

/* Astuces */
.astuces-container {
    position: fixed;
    bottom: 30px; /* Fixed at the bottom */
    left: 0;
    width: 100%; /* Default full width (mobile or closed menu) */
    text-align: center;
    z-index: 1000; /* Ensure visibility over content */
    pointer-events: none; /* Allow clicks to pass through */
    transition: left 0.3s ease, width 0.3s ease; /* Smooth transition when menu toggles */
}

/* Adjust position when sidebar is open (Desktop) */
#conteneur-central.col-md-10 .astuces-container {
    left: 16.666667%; /* Matches col-md-offset-2 */
    width: 83.333333%; /* Matches col-md-10 */
    z-index: 1;
}

.loader .astuces {
    display: inline-block;
    padding: 15px 25px 25px 25px;
    background-color: #fff;
    border-radius: 6px;
    /* font-style: italic; Removed, handled in HTML */
    font-family: "Montserrat", sans-serif;
    /* font-size: 15px; Handled in HTML */
    color: var(--grisfonce);
    border: none;
    border-left: 5px solid var(--yellow);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 800px; /* Increased from 600px */
    width: 90%; /* Responsive fallback */
    pointer-events: auto;
    text-align: left; /* Align text inside the box */
    position: relative;
}

.btn-next-tip {
    position: absolute;
    bottom: 2px;
    right: 10px;
    background: none;
    border: none;
    color: var(--grismoyen);
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: 5px;
    z-index: 2;
    outline: none !important;
}

.btn-next-tip:hover {
    color: var(--rougefonce);
}



/************PAGE INDEX *******************/
.container-index {
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding-bottom  : 100px ; /* prevent footer overlap */
}

.header-up {
    box-sizing          : border-box;
    color               : white;
    background-image    : linear-gradient(
            to left,
            var(--trans-rougeprofond),
            var(--trans-marron)
    ),
    url("../../Data/Images/banniere-index.jpg");
    background-size     : cover;
    background-position : bottom;
    background-repeat   : no-repeat;
}

.maintext {
    padding-left : 30px;
}

.header-up h1 {
    letter-spacing : 2px;
    font-weight    : bold;
}

.header-up .header-icon {
    font-size : 85px;
    color     : white;
}

.header-up header h5 {
    letter-spacing : 2px;
}

.reseau-liens i, .reseau-liens svg {
    color : white;
}

/*CARD*/
#lien-ris {
    font-weight : bold;
    color : var(--rougefonce);
}


/*CARTE DEPARTEMENTS */
#map {
    max-width  : 100%;
    max-height : 100%;
}

.dep-non-adherent {
    fill         : var(--grisleger);
    stroke       : #ffffff;
    stroke-width : 0.2;
    transition   : fill 0.2s, stroke 0.3s;
}

#map path:hover {
    fill   : var(--orange);
    stroke : var(--orange);
}

.dep-adherent {
    fill         : var(--rougefonce);
    stroke       : white;
    stroke-width : 0.2;
}

#encart2 {
    z-index          : 2;
    padding          : 8px 8px 10px 8px;
    position         : absolute;
    font-size        : 14px;
    width            : 180px;
    height           : 80px;
    background-color : white;
    border-radius    : 2px;
    display          : none;
    box-shadow       : gray 5px 5px 20px;
    font-weight      : bold;
    color            : var(--grisfonce);
    text-align:center;
    border-radius:8px;

}

#encart {
    display          : none;
    max-width        :100px;
    max-height       : 80px;
    z-index          : 2;
    position         : absolute;
    font-size        : 14px;
    color            : white;
    font-weight      : bold;
    background-color : var(--rougefonce);
}

.indexDepMobile {
    display : none;
}

.cardindex {
    max-width     : 500px;
    margin-bottom : 4vh;
}

@media (max-width : 992px) {
    .cardindex {
        margin-top : 4vh;
    }
}

@media (min-width : 450px) {
    #carte-mobile {
        display:none;
    }
}

@media (max-width :450px) {

    #carte-desktop {
        display:none;
    }
    
    .maintext {
        padding-left  : 10px;
        padding-right : 10px;
    }

    #map {
        position : relative;
        top      : -200px;
    }

    .indexDepMobile {
        display  : block;
        position : relative;
        top : -220px;
    }

    .cardindex {
        max-width  : 800px;
        margin-top : 0;
    }
}

/**********page Departements********************/

.container-accueil {
    display         : flex;
    justify-content : center;
    align-items     : center;
    min-height      : 44vh;
}

/*header*/
.header-dep {
    min-height          : 25vh;
    color               : white;
    background-image    : linear-gradient(
            to left,
            var(--trans-rougefonce),
            var(--trans-orangefonce)
    ),
    url("../../Data/Images/banniere-accueil.jpg");
    background-size     : cover;
    background-position : center;
}

.header-dep h4,
.header-dep h6 {
    letter-spacing : 2px;
    font-weight    : bold;
}

.header-dep .header-icon {
    font-size : 85px;
    color     : white;
}

.header-dep h5 {
    letter-spacing : 2px;
}

.header-dep .btn-outline-light:hover {
    color : var(--grismoyen) !important;
}

.fond-logo-dep {
    width: 160px;
    max-height:140px;
    margin-bottom:5vh;
}

@media (max-width : 768px) {
    .header-dep {
        position : none;
    }
}

/*navbar dep*/
.navbar {
    background-color : white;
}

#navbar-acc-dep  a svg, #navbar-acc-dep a i {
    color : var(--grismoyen);
}

#navbar-acc-dep a svg:hover, #navbar-acc-dep a i:hover {
    color : black;
}

#navbar-acc-dep .btn svg,#navbar-acc-dep .connexion, #navbar-acc-dep .btn:hover svg{
    color        : white;
    margin-right : 5px;
}

.dropdown-item a {
    color : var(--grismoyen);
}

/*card*/
.card-container {
    margin    : auto;
    max-width : 70%;
}

.card-dep .card-text {
    font-size : 0.8em;
}

.card-dep .card {
    min-width : 200px;
}

.card-dep .bandeau {
    background-color : var(--gristransparent);
    backdrop-filter: blur(2px);
    color            : var(--grisfonce);
}

.card-dep .bandeau h4 {
    letter-spacing : 1px;
    font-weight    : bold;
    color          : var(--grisfonce);
}

.card-dep .bandeau p {
    font-weight    : bold;
    letter-spacing : 1px;
}

.badge-user-accueil{
    text-align: center;
    background-color: white;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    display:inline-block;
    border: 1px solid darkgray;
    color: black;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 5px;
    right: 5px;
}

/*encart reseaux sociaux*/
.reseaux-sociaux {
    margin:0 15px;
    border:1px solid var(--grisleger); 
    border-radius:4px;
}

.reseaux-sociaux h4 {
    font-weight:bold; 
    letter-spacing:1px; 
    color:var(--grisfonce);
}

.reseaux-sociaux div {
    background-color:var(--grisextraleger);
}

.reseaux-sociaux img {
    box-shadow: 3px 3px 3px darkgray;
    border-radius: 60px;
}

/*modal*/
.login-modal .modal-header, .aide-modal .modal-header,#modal-gestion-cookie .modal-header {
    width            : 100%;
    background-color : var(--rougefonce);
    color            : white;
    text-align       : center;
    font-size        : 2em;
}

.login-modal .modal-footer, .aide-modal .modal-footer  {
    background-color : #f9f9f9;
}

.login-modal .modal-footer ul {
    font-size : 0.8em;
}

@media (max-width : 768px) {
    .col-lg-6 {
        padding-right : 0px;
        padding-left  : 0px;
    }

    .card-dep {
        margin-top : 4vh;
    }

    .card-dep .bandeau h4 {
        font-size      : 1px;
        padding-bottom : 1vh;
    }
    #reseaux-sociaux h4 {
        font-size:16px;
        font-weight:bold; 
        letter-spacing:1px; 
        color:var(--grisfonce);
    }
}


@media (max-width : 1200px) {
    .card-dep .card-title {
        display : none;
    }
}

@media (max-width : 1920px) {
    .card-dep .pro_text{
        display : none;
    }

    .card-dep .card-title {
        font-size      : 1.2rem;
    }

    .card-dep .card-text {
        font-size: 0.7rem;
    }
}

@media (max-width : 1000px) {
    .card-dep .card-text {
        font-size: 0.8rem;
    }

    .card-dep .pro_text{
        display : inline;
    }
}


@media (max-width : 576px) {
    .card-dep .card-text {
        display : none;
    }
}

/*map footer*/
.leaflet-control-container a {
    text-decoration:none !important;
}

/*FORMULAIRE*/
.formcard .card-header {
    text-align       : center;
    background-color : white;
    color            : var(--rouge);
    border-bottom    : 1px solid lightpink;
    text-shadow: 1px 1px gainsboro;
}

.formcard {
    box-shadow : 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    overflow: auto;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Effet au survol */
.formcard:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/*STATISTIQUES*/

 /*.statistiques-card {
    box-shadow : 0px 6px 10px 0px rgba(0, 0, 0, 0.1); 
}*/
/*FOOTER*/


.footer {
    min-height       : 85px;
    width            : 100%;
    position: fixed;
    bottom: 0;
    color            : var(--grismoyen);
    background-color : var(--background-footer);
    margin           : 0;
}

@media (max-width : 576px) {
    .footer {min-height:120px;}
    .footer a { line-height:2;}
}

.footer-up {
    min-height : 250px;
    position   : relative;
}

.footer a:hover,
.footer .rs i:hover {
    color : white;
}

.footer a {
    color           : var(--grismoyen);
    text-decoration : underline;
}

.footer #openmap {
    filter : grayscale(60%);
    height : 190px;
}

h6 {
    padding-bottom : 1vh;
}

.sousfooter {
    width            : 100%;
    position         : absolute;
    bottom           : 0px;
    background-color : black;
    color            : var(--grismoyen);
    font-size        : 12px;
}

.contacts {
    font-size : 14px;
}

/*couleurs departements */
.bg-couleur01 {
    background-color : var(--couleur01);
}

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

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

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

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

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

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

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

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

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

.txt-couleur01 {
    color : var(--couleur01);
}

.txt-couleur06 {
    color : var(--couleur06);
}

.txt-couleur08 {
    color : var(--couleur08);
}

.txt-couleur11 {
    color : var(--couleur11);
}

.txt-couleur30 {
    color : var(--couleur30);
}

.txt-couleur34 {
    color : var(--couleur34);
}

.txt-couleur57 {
    color : var(--couleur57);
}

.txt-couleur66 {
    color : var(--couleur66);
}

.txt-couleur74 {
    color : var(--couleur74);
}

.txt-couleur83 {
    color : var(--couleur83);
}

.green{
    color: green;
}

.red{
    color: red;
}

.orange{
    color: darkorange;
}

.ocean{
    color: var(--ocean);
}

.blue{
    color: var(--bleu);
}

.violet{
    color: var(--violet);
}

.blink {
   animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.blink_slow {
   animation: blinker 3s linear infinite;
}

.field-icon-password {
    cursor: pointer;
    float: right;
    margin-right: 7px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
    color: grey;
}

.sticky-bottom-custom {
    position: -webkit-sticky; position: sticky; bottom: 0;
}

:root {
    --sand: #a88d71;
    --brown: #7a3c17;
}

.table-bordered thead th,
.table-bordered thead td {
    position: sticky;
    top: 0;
    background-color: white;
}

.btn-rouge {
    background: linear-gradient(135deg, #ee2c2c, #c91818);
    transition: all 0.25s ease;
}

.btn-rouge:hover {
    background: linear-gradient(135deg, #f33a3a, #b51212);
    transform: translateY(-1px);
}

.card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.card-img-top {
    min-height: 30vh;
    object-fit: cover;
}

.badge-orange {
    color: #fff;
    background-color: var(--orangefonce);
}

.badge-transparent {
    background-color: rgba(0,0,0,0);
}

.badge-pink {
    color: #fff;
    background-color: #f9acf6;
}

.badge-bleuClair {
    color: #fff;
    background-color: #25aaff;
}

.modal-xl {
    max-width: 1600px;
}