@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


body{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

p{
    margin-bottom: 0px !important;
}

/* ===========================
   Barre du calendrier en haut
   =========================== */

.year-strip {
    width: 100%;
    overflow-x: auto;
    padding: 10px 0 6px;
    margin: 12px 0 20px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.year-strip .months-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 10px;
    padding: 0 6px;
    direction: ltr;
}
.month-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 8px 10px;
    min-width: 180px;
}
.month-card .month-header {
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
}
.month-card .chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    gap: 6px;
    height: 110px; /* hauteur du graphe */
    padding: 8px 2px 4px;
}
.month-card .bar {
    background: #034A5E;
    border-radius: 4px 4px 0 0;
    height: 0; /* défini inline */
    transition: height .15s ease, transform .05s ease, background-color .15s ease;
    position: relative;
    cursor: pointer;
}
.month-card .bar:hover {
    background: #33A0BE;
    transform: translateY(-1px);
}
.month-card .weeks-labels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
    padding-top: 4px;
    user-select: none;
    text-align: center;
}
/* Optionnel: indicateur de zéro */
.month-card .bar.zero {
    background: #e5e7eb;
    cursor: default;
}

/* Scrollbar discrète */
.year-strip::-webkit-scrollbar { height: 8px; }
.year-strip::-webkit-scrollbar-track { background: transparent; }
.year-strip::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }

.year-timeline {
    width: 100%;
    padding: 12px 0 4px;
    margin: 12px 0 20px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.year-timeline .timeline-grid {
    display: grid;
    grid-template-columns: repeat(<?php echo count($weeks); ?>, 1fr);
    gap: 2px;
    align-items: end;
}
.year-timeline .months {
    display: grid;
    grid-template-columns: inherit;
    gap: 2px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #374151;
    line-height: 1;
    user-select: none;
}
.year-timeline .month {
    text-align: center;
    background: #f3f4f6;
    padding: 6px 0;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}
.year-timeline .bars {
    display: grid;
    grid-template-columns: inherit;
    gap: 2px;
    height: 56px; /* hauteur du graphe */
    align-items: end;
}
.year-timeline .bar {
    height: 4px; /* sera surchargé en inline selon le count */
    background: #034A5E;
    border-radius: 3px 3px 0 0;
    transition: height .15s ease, background-color .15s ease, transform .05s ease;
    position: relative;
}
.year-timeline .bar:hover {
    background: #034A5E;
    transform: translateY(-1px);
}
.year-timeline .legend {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}
.year-timeline .legend .dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 999px; background: #034A5E; margin-right: 6px; vertical-align: middle;
}
/* Optionnel : curseur + tooltip natif (title) */
.year-timeline .bar { cursor: pointer; }

/* ===========================
   Barre du header 
   =========================== */

header{
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    margin-top:20px;
}

.logo-bp {
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}


/* ===========================
   Barre de filtres 
   =========================== */

#filters {
    flex: 3 1;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    height:100px;
    padding: 20px;
    margin: 0px 20px;
    background: #034A5E;
    border-radius: 25px;
}

#filters label{
    color:white;
    font-weight: 700;
}

.filtre-date {
    flex:1 1;
    padding: 0px 20px;
}

.filtre-date input::placeholder{
    color:black;
    font-family: 'Montserrat', sans-serif;
}

.filtre-region {
    flex:1 1;
    padding: 0px 20px;
}

.filtre-villes {
    flex:1 1;
    padding: 0px 20px;
}

option{
    font-size:13px;
    font-family: 'Montserrat', sans-serif;
}

option:hover{
    background-color: red !important;
}

/* ===========================
   Côté gauche map
   =========================== */

.dates-display{
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5F5F5;
}


.date-debut-display{
    flex:1 1;
    display: flex;
    flex-direction: column;
    padding-left:10px;
}

.date-debut-display span{
    font-weight: 500;
    color:#000;
    font-size: 12px;
}

.date-fin-display{
    flex:1 1;
    display: flex;
    flex-direction: column;
    padding-left:10px;
}

.date-fin-display span{
    font-weight: 500;
    color:#000;
    font-size: 12px;
}

.lieu-display{
    font-size: 13px;
    color:#696969;
    margin-left:10px;
    font-weight: 400;
}

.lieu-display i {
    color:#034A5E;
    margin-right:10px;
}

.map-content {
    display: flex;
    flex-direction: row;
    height: 700px !important;
    margin-top: 10px;
    margin-bottom: 0;
    overflow: hidden;
}

#event-list {
    width: 55%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; /* mettre tous les elements à gauche  */
    height: 700px;
    overflow-y: auto;
    margin-left:15px;
}

.event-item {
    width: calc((100% - 60px) / 3);
    background: #fff;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 10px;
    align-self:self-start;
    margin:10px;
    padding:5px;
    box-shadow: #00000010 0px 0px 10px;
}

.event-item .img-item {
    position: relative;
    width: 100%;
    aspect-ratio: 320 / 190;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 10px;
}

.icone-calendrier{
    font-size: 10px;
}

.icone-calendrier::before {
    content:"";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    right:5px;
    top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2014%2015%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%200C4.55313%200%205%200.446875%205%201V2H9V1C9%200.446875%209.44687%200%2010%200C10.5531%200%2011%200.446875%2011%201V2H12C13.1031%202%2014%202.89688%2014%204V13C14%2014.1031%2013.1031%2015%2012%2015H2C0.896875%2015%200%2014.1031%200%2013V4C0%202.89688%200.896875%202%202%202H3V1C3%200.446875%203.44687%200%204%200ZM7%206C6.58437%206%206.25%206.33437%206.25%206.75V8.25H4.75C4.33437%208.25%204%208.58437%204%209C4%209.41563%204.33437%209.75%204.75%209.75H6.25V11.25C6.25%2011.6656%206.58437%2012%207%2012C7.41563%2012%207.75%2011.6656%207.75%2011.25V9.75H9.25C9.66563%209.75%2010%209.41563%2010%209C10%208.58437%209.66563%208.25%209.25%208.25H7.75V6.75C7.75%206.33437%207.41563%206%207%206Z%22%20fill%3D%22%2333A0BE%22/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.icone-calendrier-end::before {
    content:"";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    right:5px;
    top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2014%2015%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%200C4.55313%200%205%200.446875%205%201V2H9V1C9%200.446875%209.44687%200%2010%200C10.5531%200%2011%200.446875%2011%201V2H12C13.1031%202%2014%202.89688%2014%204V13C14%2014.1031%2013.1031%2015%2012%2015H2C0.896875%2015%200%2014.1031%200%2013V4C0%202.89688%200.896875%202%202%202H3V1C3%200.446875%203.44687%200%204%200ZM4.75%208.25C4.33437%208.25%204%208.58437%204%209C4%209.41563%204.33437%209.75%204.75%209.75H9.25C9.66563%209.75%2010%209.41563%2010%209C10%208.58437%209.66563%208.25%209.25%208.25H4.75Z%22%20fill%3D%22%2333A0BE%22/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.event-item .icone-lieu::before {
    content:"";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    right:5px;
    top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2213%22%20viewBox%3D%220%200%2012%2013%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5.57909%2013C4.57407%2012.4455%203.63876%2011.7808%202.79172%2011.0191C2.04036%2010.3562%201.39459%209.58976%200.875348%208.74461C0.319973%207.85189%200.0191419%206.83323%200.00338806%205.79201C-0.0490105%204.3112%200.508125%202.8706%201.55297%201.78522C2.59782%200.699833%204.04536%200.0579783%205.57909%200C7.11289%200.0579803%208.56053%200.699804%209.60553%201.78516C10.6505%202.87051%2011.2079%204.31111%2011.1558%205.79201C11.14%206.83324%2010.8392%207.85191%2010.2838%208.74461C9.76425%209.58983%209.11816%2010.3563%208.36645%2011.0191C7.5197%2011.7807%206.58374%2012.4454%205.57909%2013ZM5.57909%203.62784C5.13362%203.61911%204.69555%203.73865%204.32075%203.97123C3.94595%204.20381%203.6514%204.53887%203.47466%204.9337C3.29793%205.32853%203.24702%205.76522%203.32843%206.1881C3.40984%206.61097%203.61988%207.00085%203.93176%207.30802C4.24364%207.61519%204.64322%207.82573%205.07956%207.91279C5.5159%207.99985%205.96921%207.95949%206.38168%207.79684C6.79416%207.6342%207.1471%207.35665%207.39551%206.99958C7.64392%206.64252%207.77652%206.22213%207.77642%205.79201C7.78185%205.22388%207.55351%204.67689%207.14153%204.27113C6.72955%203.86537%206.16761%203.63401%205.57909%203.62784Z%22%20fill%3D%22%23034A5E%22/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.custom-infowindow {
    border: none !important;
    box-shadow: 10px;
}

.custom-infowindow h3 {
    color: #034A5E;
    font-size: 14px;
    margin-bottom: 10px;
    padding-left:10px;
    font-weight: 900;
}

.event-item h3 {
    color: #33A0BE;
    font-size: 14px;
    margin-top:10px;
    font-weight: 700;
    padding: 0px !important;
    margin-left: 10px;
}

.event-item .description {
    padding:0px !important;
    margin-top:-10px !important;
    margin-bottom:20px !important;
    margin-right:10px;
    margin-left:10px;
    font-size: 12px;
}


#acf-map {
    flex:1 1;
    border-radius: 25px 0px 0px 25px;
    width: 50%;
    height: 700px;
}

.reset-button {
    background-color: #034A5E;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    margin: 10px;
    transition: 0.3s;
}
.reset-button:hover {
    background-color: #1BCEC8;
}
.highlight {
    background-color: #034A5E10;
    transition: background-color 0.3s ease;
}

.custom-infowindow {
    width: 200px;
}


@media (min-width: 922px) {
    .site-content .ast-container {
        display: block !important;
    }
}

.gm-style-iw button {
    display: none !important; /* Masque le bouton de fermeture */
}