/*********************
CSS ESPACE PUBLIC
*********************/



/*********************
RESET CSS
*********************/
body > script {display: none !important;}

    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        text-size-adjust: none;
    }

    footer, header, nav, section, main{
        display: block;
    }

    body{
        line-height: 1;
    }

    ol, ul{
        list-style: none;
    }

    blockquote, q{
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after{
        content: '';
        content: none;
    }

    table{
        border-collapse: collapse;
        border-spacing: 0;
    }

    input{
        border-radius: 0;
    }

    a img { border: 0; }

    img {
    	width: auto;
    	height: auto;
    	vertical-align: middle;
        max-width:100%;
    }



/*********************
GLOBAL
*********************/

html {
    scroll-behavior: smooth;
}
body {
  /*font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-family: 'Open Sans', sans-serif; 
/*  font-size: 100%;*/
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; 
  color: #333;
  margin:0;
}

#page.espace-public {
	position: relative;
	width: 100%;
    overflow-x: clip;	
}
.main-wrap {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 25px;

}
#page.espace-public:has(#wpadminbar){
	padding-top: 32px;
}


/*********************
LINK STYLES
*********************/
a {
	transition: color ease-out .4s;
}
a, a:visited {
	color: #333;
	text-decoration: underline;
}
a:hover, a:focus, a:visited:hover, a:visited:focus {
	color:#f7850c;
	text-decoration: none;
}
a:link, a:visited:link {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); 
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  position: relative;
}
h1 span, h2 span, h3 span, h4 span, h5 span {
    font-weight: 700;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
text-decoration: none; }

h1, .h1 {
  font-size: 2.5em;
  line-height: 1.333em; 
  margin-bottom: 40px;
}
h2, .h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 40px; 
}
h3, .h3 {
  font-size: 1.285em; 
}
h4, .h4 {
  font-size: 1.1em;
  font-weight: 700; 
  margin-top: 45px;
}
h5, .h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; 
}
.half-p {
    max-width: 600px;
    width: 100%;
}
p {
    margin-bottom: 25px;
}

ul.disc {
    list-style: circle;
    padding-left: 20px;
    margin-bottom: 30px;
}
strong {
    font-weight: 700;
}

@media (max-width:1200px) {

    h1, .h1 {
      font-size: 2.2em;
    }
}
@media (max-width:1000px) {

    h1, .h1 {
      font-size: 2em;
    }
    h2, .h2 {
      font-size: 1.5em; 
    }
}
@media (max-width:500px) {
    h1, .h1 {
      font-size: 1.75em;
    }
    h2, .h2 {
      font-size: 1.4em; 
    }
}

/*********************
BUTTONS
*********************/

.button-container {
    display: flex;
    gap:15px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}
@media (max-width:600px) {
    .button-container {
        flex-flow: wrap;
        justify-content: center;
        gap: 5px;
         margin-bottom: 45px;
    }
}
a.button, #main-menu li.menu-item:last-child a, 
.wp-block-button__link {
    font-family: 'Montserrat', sans-serif;
	display: inline-block;
    border-radius: 50px;
    padding: 18px 30px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.4s;
    text-decoration: none;
    background-color: #ffda00;
    color: #5d2d1a;
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}
a.button:link, a.button:visited,
#main-menu li.menu-item:last-child a:link, 
#main-menu  li.menu-item:last-child a:visited,
.wp-block-button__link:link, .wp-block-button__link:visited {
    color: #5d2d1a;
}
a.button:hover, a.button:active,
#main-menu  li.menu-item:last-child a:hover, 
#main-menu  li.menu-item:last-child a:active,
.wp-block-button__link:hover,
.wp-block-button__link:active {
    transform: translate(0px,-5px);
    box-shadow: 0px 5px 0px rgba(0,0,0,.9);
}

a.button.alt {
    background-color: transparent;
    border: 2px solid #5b220b;
}

@media  (max-width:1000px) {
    .header-container {
            flex-direction: column;
            gap: 30px;
    }
}
@media  (max-width:700px) {
    .header-menu-container {
        flex-direction: column;
    }
    .header-menu-container ul {
        flex-direction: column;
    }
    #cross-site-menu-icon {
        position: absolute !important;
        top: 40px;
        right: 20px;
    }
    #logo {
        padding-right: 30px;
    }
}

/*********************
HEADER
*********************/

header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-top:25px;
	padding-bottom:25px;
}
header .header-container {
	width: 100%;
}
header .header-menu-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
header #logo {
	max-width: 356px;
    height: auto;
    width:100%;
/*	height: 92px;*/
}

#responsive-menu-popup {
	display: none;
}

#main-menu ul {
	display: flex;
	align-items: center;
	gap:25px;
}

#main-menu ul li a {
	text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
} 

/*********************
BLOC INTRO
*********************/

section.bloc-intro {

}
.bloc-intro-text-container {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/*********************
FOOTER
*********************/
#prefooter {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100px;
}
#logo-footer {
    width: 356px;
    height: 92px;
    margin-bottom: 30px;
}
#footer-logo {
    height: auto;
    margin-bottom: 25px;
}
footer {
    position: relative;
    z-index: 2;
    background-color: #141414;
/*    background: linear-gradient(200deg, #ff5200 0%, #141414 23%);*/
    color: white;
    overflow: hidden;
}
footer .main-wrap {
    position: relative;
    z-index: 11;
}
footer a.button {
    padding: 14px 25px;
    display: inline-block;
    width: 185px;
    text-align: center;
}
footer .gradient {
    position: absolute;
    
    width: 100%;
    min-height: 400px;
/*    background-color: linear-gradient();*/
}
footer a:link, footer a:visited {
    color: #BBB;
    text-decoration: none;
}
footer a:active, footer a:hover, footer a:not(.button):visited:hover {
    color: #ffda00;
}
#menu-footer-2 li {
    list-style: none;
}
footer .source-org.copyright {
    color: #979797;
    font-size: 15px;
    font-style: italic;
}
.footer-nav-1, .footer-nav-2 {
    
}
.footer-nav-1 li, .footer-nav-2 li {
    text-align: left;
    list-style: none;
    display: list-item;
}

.arrow-down {
    position: fixed;
    bottom: 35px;
    right: 35px;

    width:50px;
    height:50px;
    background-color: #f9bb35;
    border-radius: 50px;
    padding-top: 14px;
    padding-left: 20px;
    cursor: pointer;

    opacity:0.5;
    transition: opacity .5s;

    z-index:700;
}
.arrow-down:hover {
    opacity:1;  
}
.arrow-down.transparent, .arrow-down.transparent:hover {
    opacity: 0; 
}
.arrow-down i { 
    height: 15px;
    width: 1px;
    display: inline-block;
    border-left: 1px solid #333;
}
.arrow-down i.left {
    transform: rotate(45deg);
}
.arrow-down i.right {
    transform: rotate(-45deg) translate(4px, 4px);
}

.grecaptcha-badge {
    display: none;
}

@media (max-width:500px) {
    .radial-circle {
        display: none;
    }
}

/*********************
COOKIE BANNER
*********************/

#cookie-notice .cookie-notice-container {
    background-color: #141414;
}

#cn-accept-cookie {
    background-color: #ffda00;
}

/*********************
PAGE AVERTISSEMENT ANNUAIRE 
*********************/

.annuaire-avertissement {
      height: 350px;
    overflow-y: scroll;
    border: 1px solid #CCC;
    padding: 20px;
}

/*********************
POPUP WARNING
*********************/

#popup-warning {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
/*    background-color: rgba(0,0,0,.5);*/
    z-index:10005;
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease-out, visibility .4s ease-out;

    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(12px);
    background-color: rgb(189 189 189 / 30%);
}

#popup-warning.hide {
    visibility: hidden;
    opacity: 0;
}

/*#popup-warning .popup-overlay {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
}*/

#popup-warning .inner-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    background-color: white;
    width: 90%;
    max-width: 900px;
    height: 80%;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    transition: transform .4s ease-out;
    padding: 15px;
    border-radius: 20px;
    font-size: 14px;
}
#popup-warning.hide .inner-popup {
    transform: translate(-50%, -50px);
}

#popup-warning .annuaire-avertissement {
    height: 70%;    
    background-color: #f3f3f3;
}
#popup-warning h2.wp-block-heading {
    margin-top:0;
    margin-bottom:15px;
    font-size: 22px;
    
}
#popup-warning h4.wp-block-heading {
    margin-top: 20px;
    margin-bottom: 0px;
    text-align: center;
    font-weight: 500;
}
#popup-warning .wp-block-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*********************
BREADCRUMBS
*********************/
#breadcrumbs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
#breadcrumbs .item-current strong {
    white-space: nowrap;        /* empêche le retour à la ligne */
  overflow: hidden;           /* cache ce qui dépasse */
  text-overflow: ellipsis;    /* affiche "…" si le texte est coupé */

  /* et surtout, l’élément doit avoir une largeur contrainte */
  max-width: 400px; 
  width:100%;           /* ou width: 200px; ou flex-basis, etc. */
  display: block;             /* ou inline-block / flex item */
}


/*********************
RADIAL CIRCLE
*********************/

.radial-circle {
    position: absolute;
    z-index: 10;
}
.radial-circle.small {
    width: 75px;
    height: 75px;
}
.radial-circle {
    width: 120px;
    height: 120px;
}
.radial-circle.large {
    width: 200px;
    height: 200px;
}
.radial-circle.big {
    width: 300px;
    height: 300px;
}
.radial-circle.red {
    background: radial-gradient(circle,#ef5c3d 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.terra {
    background: radial-gradient(circle,#eb6709 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.blue {
    background: radial-gradient(circle,#7cb7ff 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.aqua {
    background: radial-gradient(circle,#29b397 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.yellow {
    background: radial-gradient(circle,#edd41f 0%, rgba(255,255,255, 0) 70%);
}
.radial-circle.green {
    background: radial-gradient(circle,#8dc139 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.orange {
    background: radial-gradient(circle,#eb9309 0%, rgba(255, 255, 255, 0) 70%);
}
.radial-circle.purple {
    background: radial-gradient(circle,#a462df 0%, rgba(255, 255, 255, 0) 70%);
}

.img-bubble {
    position: relative;
    text-align: center;
}
.img-bubble img {
    position: relative;
    border-radius: 15px;
    z-index: 20;
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

section {
    position: relative;
}
section .section-circle-left {
    left: 0;
    top: 0;
    transform: translate(-170px,120px);
}
section .section-circle-right {
    right: 0;
    top: 0;
    transform: translate(170px,60px);
}
@media (max-width:1500px) {
    section .section-circle-left,
    section .section-circle-right {
        display: none;
    }
}

/*********************
PRESENTATIONE ESPACE PUBLIC
*********************/
#presentation-espace-public {
    position: relative;
}
#presentation-espace-public .img-bubble .red {
    left: 0;
    top: 0;
    transform: translate(-80px,-20px);
}
#presentation-espace-public .img-bubble .orange {
    right: 0;
    top: 0;
    transform: translate(100px,-80px);
}
#presentation-espace-public .img-bubble .purple {
    right: 0;
    bottom: 0;
    transform: translate(-100px,35px);
}


/*********************
CATEGORIES D EVENEMENTS
*********************/
.evenements-libres-categories {
    display: flex;
    gap:40px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.evenements-libres-categories .categorie-thumb {
    position: relative;
}
.evenements-libres-categories .categorie-thumb .thumb-label {
    position: absolute;
    bottom : 10px;
    right: 10px;
    color: white;
    font-weight: bold;
    max-width: 200px;
    text-align: right;
    text-shadow: 1px 1px 4px rgba(0,0,0,.5);
}
.evenements-libres-categories .categorie-thumb a:hover .thumb-label {
    display: none;
}

.evenements-libres-categories .categorie-thumb .cat-hover {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.evenements-libres-categories .categorie-thumb .cat-hover .color-bg {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: .8;
    z-index: 1;
}
.evenements-libres-categories .categorie-thumb .cat-hover span {
    position: relative;
    z-index: 2;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: white;
    width: 80%;
    transform: translateY(25px);
    opacity: 0;
    transition: transform .3s ease-out, opacity .3s ease-out;
}
.evenements-libres-categories .categorie-thumb a:hover .cat-hover {
    opacity: 1;
}
.evenements-libres-categories .categorie-thumb a:hover .cat-hover span {
    transform: translateY(0);
    opacity: 1;
}
.cat-hover .color-bg.orange {background-color: #ff8d00;}
.cat-hover .color-bg.red {background-color: red;}
.cat-hover .color-bg.terra {background-color: #e03e00;}
.cat-hover .color-bg.green {background-color: #1f8a59;}
.cat-hover .color-bg.grass {background-color: #639239;}
.cat-hover .color-bg.purple {background-color: #7c167c;}
.cat-hover .color-bg.blue {background-color: #1e6ce0;}

.evenements-libres-categories .categorie-thumb img {
    border-radius: 15px;
}

/*********************
LIST EVENEMENTS LIBRES 
*********************/

#list_event {
    list-style: none;
    padding-left: 0;
}


#list_event li {
    /*display: flex;
    gap:20px;*/
    position: relative;
    padding-left: 110px;
}
#list_event li h2 {
    font-size: 1.45em;
    margin-top: 0;
    margin-bottom: 20px;
}
#list_event li h2 a:hover, #list_event li h2 a:active {
    color: #e56c00;
}
#list_event a.button {
    float: right;
}
#list_event .bloc-date-container {
    
    position: absolute;
    left: 0;
    top:0;
}
#list_event .bloc-date {
    background-color: white;
    color: #636363;
    display: inline-block;
    width:70px;
    border-radius: 10px;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #636363;
}
#list_event .bloc-date span.day {
    width: 100%;
    padding:10px;
    display: inline-block;
    color: white;
    background-color: #636363;
    border-radius: 7px 7px 0px 0px;
}
#list_event .bloc-date span {
    padding:6px;
    display: inline-block;
}
#list_event a.button {
    margin-top:20px;
    margin-bottom: 50px;
}
#list_lieux li a {
    font-weight: bold;
}
#list_lieux li {
    margin-bottom: 20px;
}

.leaflet-map {
    aspect-ratio:16/9;
    max-width: 800px;
}

@media (max-width:1000px) {
    #list_event {
        max-width: 750px;
        width: 100%;
    }
    .list_event_col {
        align-items: center;
    }
}

@media (max-width: 750px) { 
    #list_event .bloc-date-container {
        height:100px;
        margin:0;
        float: none;
        width: 90px;
    }
    #list_event .bloc-date {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    #list_event h2 {
        margin-bottom: 20px;
    }
    #list_event a.button {
        float: none;
        text-align: center;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        float: none;
    }
}

/*********************
SIDEBAR
*********************/
#sidebar-pubilc {
    position: sticky;
    top: 1rem;
    max-width: 471px;
    width: 100%;  
}
#sidebar-pubilc .radial-circle {
    z-index: 2;
    right: 0;
}
#sidebar-pubilc .sidebar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 30px;
}
#sidebar-pubilc ul {
    padding-left: 20px;
}
#sidebar-pubilc ul li {
    list-style: circle;
    margin-bottom: 5px;
}
#sidebar-pubilc ul li a:link, #sidebar-pubilc ul li a:visited{
    text-decoration: none;
}
#mini-encart-recherche {
    position: relative;
    z-index:3;
    margin-bottom: 40px;
    transition: transform .3s ease-out;
}
#mini-encart-recherche:hover {
    transform: translateY(-10px);
}
#mini-encart-recherche a:hover, #mini-encart-recherche a:active {
    color: inherit;
}
#mini-encart-recherche img {
/*    opacity: .8;*/
}
#mini-encart-recherche span {
    position: absolute;
    top:30px;
    left: 30px;
}
#mini-encart-recherche span strong {
    font-weight: 700;
}

#sidebar-categories {
    position: relative;
    z-index:3;
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    background-color: rgba(245,245, 245, .3); 
    border-radius:25px; 
    border:1px solid #DDD; 
}

/*********************
CROSS SITE MENU 
*********************/
#cross-site-menu-icon {
	position: relative;
	display: inline;
	height: 23px;
    z-index: 100;
}
#cross-site-menu {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 735px;
	top: 45px;
	right: 0;
	background-color: white;
	border-radius: 25px;
	border: 1px solid #c9c9c9;
    padding: 30px;
    box-shadow: -3px 5px 15px rgba(0,0,0,.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: transform .4s ease-out, opacity .4s ease-out, vibility .4s ease-out;
}
#cross-site-menu.opened {
	opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (max-width:775px) {
	#cross-site-menu {
		width: 400px;
	}
}
@media (max-width:500px) {
	#cross-site-menu {
		width: 330px;
		padding: 15px;
	}
}

#cross-site-menu h4 {
	margin-top: 0px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #838383;
}
#cross-site-menu {
	font-size: 14px;
}
#cross-site-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}
#cross-site-menu li {
	width: 100%;
    max-width: 320px;
    position: relative;
    padding-left: 70px;
}
#cross-site-menu li img {
	position: absolute;
	left: 0;
	top:0;
	border:0;
}
#cross-site-menu li a {
	text-decoration: none;
/*	font-style: italic;*/
}
#cross-site-menu li p {
	color: #777;
	font-size: 13px;
}

@media (max-width:500px) {

    #cross-site-menu {
        height: 80vh;
        overflow-y: scroll;
    }
}

/*********************
HOME
*********************/

#home-map .main-wrap{
    position: relative;
    z-index: 2;
}

#home-map-bg {
    position: absolute;
    top:0;
    right: -220px;
    z-index: 1;
}

#home-categories {
    position: relative;
    z-index: 2;
}
@media (max-width:1200px) {
    #home-map-bg {
        top:100px;
        right: -320px;
    }
}
@media (max-width:700px) {
    #home-map-bg {
        max-width: 800px;
        top:200px;
    }
}
@media (max-width:500px) {
    #home-map-bg {
        max-width: 700px;
        top:350px;
    }
}

/*********************
MAP PRATICIENS
*********************/