/* 
Theme Name: Carto Saint-Ouent (2025)
Theme URI: #
Description: ..
Author: Pi communication
Author URI: #
Template: hello-elementor
Version: 1.0.1
Text Domain: cartoso
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: #
*/

/*
    Add your custom styles here
*/

body, .leaflet-popup-content, #my_off_container {
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

body.single #h_row2,
body.page-template-default:not(.home) #h_row2,
body.page-template-default:not(.home) #right-switch-menu,
body.page-template-default:not(.home) #left-menu-filter-cta {display: none;}
body.single-so_action .elementor-element h4 {margin-bottom: 0;}
body.single-so_action .elementor-element p {margin-top: 5px;}


.hwl {opacity: 0 !important; transition: opacity ease 500ms;}
.hwl.loaded {opacity: 1 !important;}
.hal.loaded {opacity: 0 !important; display: none; transition: opacity ease 500ms;}

.loaderinline {
  height: 15px;
  aspect-ratio: 5;
  -webkit-mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
  background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
  animation: l48 .75s infinite linear;
}
@keyframes l48 {
  100% {background-position: 36.36%}
}

#filterName {
    margin: 0;
      padding: 8px 20px;
      height: 28px;
      background-color: #fff;
     border: 1px solid #D9D9D9;
      box-shadow: 0 0 0 0 #b5b5b5 inset;
      border-radius: 30px;
      font-family: "Barlow", Sans-serif;
        font-size: 15px;
        font-weight: normal;
        color: #000 !important;
        line-height: 100% !important;
        width: calc(100% - 42px);
}
#cta_filtresavances.active {
    background-color: #FEE6F3;
      border: 1px solid #fee6f3;
}
.elementor-widget-n-menu .e-n-menu-title.e-current, 
.elementor-widget-n-menu .e-n-menu-title.e-current a,
.elementor-widget-n-menu svg {
    color: #636265 !important; fill:#636265 !important;
}
#mm_tous.active .e-n-menu-title-text,
#mm_tous.active svg,
#mm_tous:hover .e-n-menu-title-text,
#mm_tous:hover svg {
    color:#B33F7D !important; fill:#B33F7D !important;
}
#mm_scolarite.active .e-n-menu-title-text,
#mm_scolarite.active svg,
#mm_scolarite:hover .e-n-menu-title-text,
#mm_scolarite:hover svg {
    color: rgb(24, 145, 252) !important; fill:rgb(24, 145, 252) !important;
}

#mm_loisirs.active .e-n-menu-title-text,
#mm_loisirs.active svg,
#mm_loisirs:hover .e-n-menu-title-text,
#mm_loisirs:hover svg {
    color: rgb(250, 127, 0) !important; fill:rgb(250, 127, 0) !important;
}

#mm_sante.active .e-n-menu-title-text,
#mm_sante.active svg,
#mm_sante:hover .e-n-menu-title-text,
#mm_sante:hover svg {
    color: rgb(141, 172, 65) !important; fill:rgb(141, 172, 65) !important;
}

#mm_social.active .e-n-menu-title-text,
#mm_social.active svg,
#mm_social:hover .e-n-menu-title-text,
#mm_social:hover svg {
    color: rgb(243, 10, 134) !important; fill:rgb(243, 10, 134) !important;
}

#mm_pro.active .e-n-menu-title-text,
#mm_pro.active svg,
#mm_pro:hover .e-n-menu-title-text,
#mm_pro:hover svg {
    color: rgb(178, 109, 255) !important; fill:rgb(178, 109, 255) !important;
}

#mm_public.active .e-n-menu-title-text,
#mm_public.active svg,
#mm_public:hover .e-n-menu-title-text,
#mm_public:hover svg,
#mm_quartier.active .e-n-menu-title-text,
#mm_quartier.active svg,
#mm_quartier:hover .e-n-menu-title-text,
#mm_quartier:hover svg {
    color:#B33F7D !important; fill:#B33F7D !important;
}


.leaflet-popup-content .elementor-icon {
  color: #B13B79;
  font-size: 20px;
}
.leaflet-popup-content .elementor-icon svg * {fill:#B13B79;}
.leaflet-popup-content .flpop {display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-start; margin: 20px 0 0; border-bottom: solid 1px #D9D9D9; padding-bottom: 15px;}
.popcontentholder > .flpop:last-child {border-bottom: solid 0px #D9D9D9; }
.leaflet-popup-content h3 {font-size:18px; font-weight:bold;}
.leaflet-popup-content .cta_more {font-size:16px; line-height: 26px; font-weight:500; background: #F30A86; border-radius: 99em; text-align: center; color: #FFF; display: flex; align-items: center; justify-content: center; border:solid 1px #F30A86;padding: 8px 10px; }
.leaflet-popup-content .cta_more:hover { background: #fff;  color: #F30A86; }
.leaflet-popup-content .desc {font-size:16px; line-height: 26px; font-weight:500; color:#636265; margin:10px 0 10px 0; }
.leaflet-popup-content .adr {font-size:16px; line-height: 26px; font-weight:500; color:#3C3B3F}
.leaflet-container a {color: #3C3B3F; color: #F30A86;}
.leaflet-container h3 a {color: #3C3B3F; }
.leaflet-container h3 a:hover {color: #F30A86; }
.leaflet-container .adr a { color: #F30A86; text-decoration: underline}
.leaflet-container .adr a:hover { color: #3C3B3F; text-decoration: none}
.leaflet-popup-content-wrapper .leaflet-popup-content {padding: 0 25px 25px 25px; margin: 0; 
    min-width: 320px;}
.leaflet-container a.leaflet-popup-close-button {
top: 10px; right: 10px;
}
.leaflet-container a.leaflet-popup-close-button:hover { color: #F30A86;}
.popcontent {color: #636265}
.popcontent a, .popcontent a:visited {color: #F30A86; text-decoration: underline;}
.popcontent a:hover {color: #F30A86; text-decoration: none;}
.popcontent h4 {margin: 20px 0 0 0; font-weight: 600; color: var( --e-global-color-a7e45d5 );}

.popcontent p {margin: 0 0 0 0;}
 #my_off_container h2 {font-size:36px; line-height: auto;}

 .label_filters {transition: all ease 250ms;}
 .label_filters.unchecked {opacity: .55}
 
 .tags {list-style-type:none; display:flex; gap:10px; padding:0; margin:0 0 10px 0; font-family: var( --e-global-typography-text-font-family ), Sans-serif;font-weight: var( --e-global-typography-text-font-weight );
     flex-wrap: wrap;
 }
 .label {display:flex; border-radius: 99em; padding: 8px 15px; color: var( --e-global-color-primary );background-color: #F2F2F3;flex-wrap:wrap; font-size:16px; line-height: 26px; border:solid 1px #F2F2F3;}
 .tags li {display:flex; gap:10px;  }
 .label-domaine {background-color: #ecdbff; border-color: #F2F2F3;}
 .label-quartier {background-color: #fff; border-color: #B8BABF;}
 
 
 
#map {z-index: 1;} 
#loading_over_map {animation: all ease 500ms; opacity: 1; width: 100%;  height: calc(100vh - 137px); position: absolute; z-index: 2; background: rgba(255,255,255,.55); backdrop-filter: blur(5px); display: flex; flex-direction: column; align-items: center; justify-content: center; }

#loading_choosetext {display: none;}
#loading_choosetext.visible {display: block;}

#loading_choosetext h3 {font-weight:600 !important; font-size:30px; line-height:120%; text-align:center;}
#loading_choosetext h3 small {display:block; text-align:center; font-weight:normal !important; font-size:30px; }



#loading_over_search { animation: all ease 500ms; opacity: 1; width: 100%;  height: calc(100vh ); 
position: fixed; 
z-index: 200; 
top:0;
left:0;
background: rgba(255,255,255,.55); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center;}

#loading_over_map > div:first-child, #loading_over_search > div {width: 120px; height: 120px; display: block; margin: -60px 0 0 0; display: flex; justify-content: center;
      align-items: center;}
 
 #loading_over_search > div {width:300px; height: 300px; margin: -50vh 0 0 0; flex-direction: column; font-size: 14px; font-weight: 500; color: #000; text-align: center; justify-content: center; align-items: center;}     
 
#loading_over_map.hidden { opacity: 0; z-index: 0}

#loading_over_map .invisible {display: none !important;}


.post-type-archive .label,  .leaflet-popup-content .label {font-size:14px; line-height: 14px;      padding: 6px 10px;}
.label.label-domaine-loisir {background-color: #FFE6CC; border-color: #FFE6CC; /* orange clair */}
.label.label-domaine-sante {background-color: #E6EED3; border-color: #E6EED3; /* vert clair */}
.label.label-domaine-scolarite {background-color: #E0EEFA; border-color: #E0EEFA; /* bleu clair */}
.label.label-domaine-social {background-color: #FEE6F3; border-color: #FEE6F3; /* rose clair */}

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background-color: #F30A8636 !important;
}

.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background-color: #F30A8650 !important;
  color: #fff !important;
}


.filters_list {margin: 0; padding: 0; list-style-type: none;display: flex;  flex-direction: column; }
.filters_list li, .filters_list li label, .filters_list li > div, .adrop {display: flex; align-items: center; justify-content: start; gap: 10px; width:100%;}
.adrop, .adrop strong {font-weight: 600; color: inherit; font-size: 18px; text-transform: uppercase; }
    .ico_scolarite .adrop, .ico_scolarite  .adrop strong {color: #1891FC /* bleu flash */}
    .ico_loisir .adrop, .ico_loisir  .adrop strong {color: #FA7F00 /* orange flash */}
    .ico_sante .adrop, .ico_sante  .adrop strong {color: #8DAC41 /* vert flash */}
    .ico_emploi .adrop, .ico_emploi  .adrop strong {color: #B26DFF /* violet flash */}
    .ico_social .adrop, .ico_social  .adrop strong {color: #F30A86 /* rose flash */}
.filters_list li > div.sub { padding-left: 40px;  padding-right: 20px; display: flex; max-height: 0px; height:0px; transition: all ease 350ms; overflow: hidden; align-items:start;}
.filters_list li > div.sub.open { display: flex; max-height: 350px; height:350px; overflow: auto; }
.filters_list li {flex-direction: column;align-items: start;}
.ico label > span,  .adrop > span {display: inline-flex; width: 20px; height: 20px; }
.ico label > span > img, .adrop > span > img {display: inline-flex; width: 20px; height: 20px; }

#filtersHolderMap .filters_list {flex-direction: row; white-space: nowrap; gap: 10px;}
.archive #filtersHolderMap .filters_list, .search  #filtersHolderMap .filters_list {display: none;}
.adrop.adropmenu { border:solid 1px #fff; border-radius:99em; color:#3C3B3F; /* noir CE */ 
    font-size: 16px;
      font-weight: 500;
      display: flex; height: 38px; padding: 0 10px;
}
.adrop.adropmenu strong {  color:#636265 /* gris 3 */ }
.adrop.adropmenu svg {  color:#636265; fill:#636265; /* gris 3 */ }
.ico_scolarite .adrop.adropmenu.active, .ico_scolarite .adrop.adropmenu:hover,
.ico_scolarite  .adrop.adropmenu.active strong {color: #1891FC; border-color:#1891FC; /* bleu flash */}
.ico_loisir .adrop.adropmenu.active, .ico_loisir .adrop.adropmenu:hover,
.ico_loisir  .adrop.adropmenu.active strong {color: #FA7F00; border-color:#FA7F00; /* orange flash */}
.ico_sante .adrop.adropmenu.active, .ico_sante .adrop.adropmenu:hover,
.ico_sante  .adrop.adropmenu.active strong {color: #8DAC41; border-color:#8DAC41; /* vert flash */}
.ico_emploi .adrop.adropmenu.active, .ico_emploi .adrop.adropmenu:hover,
.ico_emploi  .adrop.adropmenu.active strong {color: #B26DFF; border-color:#B26DFF; /* violet flash */}
.ico_emploi  .adrop.adropmenu.active svg,.ico_emploi  .adrop.adropmenu:hover svg {fill: #B26DFF;}
.ico_social .adrop.adropmenu.active, .ico_social .adrop.adropmenu:hover,
.ico_social  .adrop.adropmenu.active strong {color: #F30A86; border-color:#F30A86; /* rose flash */}

.ico_hidden {display: none !important;}


.all .adrop.adropmenu.adropwp:hover, .all .adrop.adropmenu.adropwp.active {color: #F30A86; border-color:#F30A86; /* rose flash */}

.adrop.adropmenu.adropwp, .adrop.adropmenu.adropwp svg {
   transition: all ease 250ms;
}

.popcontentholder {
    max-height: 55vh;
      overflow: auto;
      margin-bottom: 20px;
      position: relative;
      padding-bottom:60px;
}
.popcontentholder::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 45px;
  background: ;
  background: linear-gradient(rgba(255,255,255,.5),#fff);
  z-index: 1;
  left: 0;
  bottom: 80px;
}

.horaires_short {border-collapse: collapse; border: solid 0px #ccc; width: 100%}
.horaires_short td {padding: 5px; text-align: center; border-bottom:solid 1px #ccc; border-right: solid 1px #ccc; width: 21%; border: solid 1px #ccc;}
.horaires_short tr td:first-child { text-align: left; font-size: smaller;}
.horaires_short thead tr th {border:solid 1px #ccc }

.horaires_short thead tr th:first-child {border-top:none; border-left:none; }
.horaires_short thead tr th:first-child, .horaires_short tr td:first-child { width: 16%;}
/*.horaires_short tr td:first-child {  border-left:none;}
.horaires_short tr td:last-child {  border-right:none;}*/

.leaflet-popup-content .horaires {width: auto;}
.leaflet-popup-content .horaires thead tr th {
 
  white-space: nowrap;
  padding: 10px;
}
.leaflet-popup-content .horaires td, .horaires td {
    border-left: none;
      border-right: none;
      height: 40px;
      vertical-align: middle;
}
.leaflet-popup-content .horaires tr td:first-child, .horaires tr td:first-child {
 border-right: solid 1px #ccc;   vertical-align: middle;
}
.horaires_short thead tr th {
    border: none; 
}
#holder_navs .elementor-pagination {
    text-align: center;
    font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
      font-weight: var( --e-global-typography-secondary-font-weight );
      display: flex;
        gap: 10px;
        align-items: center;
}
#holder_navs .elementor-pagination .page-numbers:not(.dots) {
    color: var( --e-global-color-2c51dbe );
}
#holder_navs .elementor-pagination .page-numbers.current {
  background-color: #ECDBFF;
  border-radius: 99em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  width: 38px;
  height: 38px;
}

@media (max-width:767px) {
.e-n-menu-heading {height: 50px !important; flex-wrap: nowrap !important; overflow-x:auto !important; }
.elementor-widget-n-menu .e-n-menu-content > .e-con {display: none !important;}
.popcontentholder {
    max-height: 38vh;
     
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
  padding: 0 25px 25px 25px;
  margin: 0;
  min-width: auto;
  max-width: 80vw;
}
}