/*
    Theme Name: Komichi
    Theme URI: https://komichi.ch
    Author: Elliott Chiaradia
    Author URI: https://karac.ch
    Version: 1.0
    Text Domain: komichi
*/

/* Fonts */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}
/* END Fonts */


/* Couleurs par défaut */
:root {
    --color-main-1: hsla(348, 100%, 37%, 1);
    --color-main-2: hsla(70, 9%, 13%, 1);
    --color-main-3: hsla(0, 0%, 100%, 1);
    --color-main-4: hsla(349, 8%, 57%, 1);
    --color-background-5: hsla(40, 100%, 97%, 1);
    /*--darkest: #1d1d1b;
    --medium: #f0f0f0;
    --lightest: #fff; */
}
/* END Couleurs */





/* COMPLEMENTS CLASS BOOTSTRAP 5 */


.fs-7 {
    font-size: 0.925rem;
}

.fs-8 {
    font-size: 0.875rem;
}

.fs-9 {
    font-size: 0.8rem;
}

.fs-10 {
    font-size: 0.75rem;
}

.pt-6 {
    padding-top: 6rem;
}

.my-6 {
    margin-top: 7.5rem;
    margin-bottom: 6rem;
}

.my-7 {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
}

.mt-6 {
    margin-top: 6rem;
}

.mt-7 {
    margin-top: 7.5rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.mb-7 {
    margin-bottom: 7.5rem;
}

.fw-lightbold {
    font-weight: 500;
}

.fw-extrabold {
    font-weight: 800;
}

/* END COMPLEMENTS CLASS BOOTSTRAP 5 */



/* General */

html {
    scroll-behavior: smooth;
    /* ce qui fait manger le bord avec un scroll sur le menu header en scroll haut et sur le footer en scroll vers le bas ?
    min-height: 100vh;
    */
}

body {
    font-family: "Inter", 'Arial Narrow Bold', sans-serif;
    color: var(--color-main-2);
    background-color: var(--color-background-5);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding-top: 90px;
    flex-grow: 1;
}

a {
    color: var(--color-main-2);
    text-decoration: none;
}

.content a, .informations p a {
   color: var(--color-main-1);
   text-decoration: underline;
}

/* MENU */

h1.logo {
    display: inline;
}

#menu {
    background-color: var(--color-background-5);
    box-shadow: 0 4px 8px #0000000d;
    z-index: 3010;
}

.w-90vw {
  width: 90vw;
}

.letter-spacing-none {
    letter-spacing: none;
}

.transition-all-03s {
    transition: all 0.3s ease;
}

.custom-hover-font-main-1:hover {
    color: var(--color-main-1);
    opacity: 80%;
}

.custom-hover-font-main-2:hover {
    color: var(--color-main-2);
    opacity: 80%;
    fill: color-mix(in srgb, var(--color-main-2) 70%, transparent)
}

.custom-hover-font-main-3:hover {
    color: var(--color-main-3);
    opacity: 80%;
}

.custom-color-main-1 {
    color: var(--color-main-1)!important;
}

.custom-border-color-main-1 {
    border-color: var(--color-main-1)!important;
}

.custom-background-color-main-1 {
    background-color: var(--color-main-1);
}

.custom-color-main-2 {
    color: var(--color-main-2)!important;
}

.custom-color-main-3 {
    color: var(--color-main-3);
}

.custom-background-color-main-3 {
    background-color: var(--color-main-3);
}

.custom-color-main-4 {
    color: var(--color-main-4)!important;
}

.custom-border-color-main-4 {
    color: var(--color-main-4);
}

/* END MENU */




/* Firefox */
* {
    scrollbar-color: var(--color-main-1) #f0f0f0;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    color: var(--color-main-1);
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: var(--color-main-1);
}

svg:not(footer svg) {
    height: auto;
    max-width: 20px;
}

.cls-1 {
    fill: none;
    stroke: #bd0026;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5px;
}

.custom-m-top-015 {
    margin-top: 0.15rem;
}

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

dl, ol, ul#menu-top, footer ul  {
    margin-bottom: 0px;
}



/* a tester pour rajotuer dynamiquement mes class sur les mb-x ET sur les mt-x par exemple)
a[class*="col-"] {
    display: block!important;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}
*/


:is(h1, h2, h3, h4, h5, h6, p:not(:has(a)), li)::first-letter {
    text-transform: uppercase; 
}

/*
.custom-h1 {
    font-size: clamp(4.5rem, 6vw, 8.25rem);
    line-height: clamp(5.5rem, 6vw, 9.25rem);
    font-weight: bold;
    letter-spacing: -2%;
}

.custom-h2 {
     selon maquette font-size: clamp(3.5rem, 5.5vw, 6.25rem); 
    font-size: clamp(3.5rem, 5vw, 5rem);
    line-height: clamp(3.37rem, 5.5vw, 5rem);
    font-weight: bold;
    letter-spacing: -2%;
}
*/

.min-h-100 {
    min-height: 100%;
}

:is(p, li, a):not(footer *), ul:not(#menu-top, #menu-bot, .content ul), ul:not(#menu-top, #menu-bot, .content li) li {
    color: var(--color-main-2);
    font-size: clamp(1rem, 6vw, 1.125rem);
    font-weight: 300;
    margin-bottom: 0px;
}

.fw-600 {
    font-weight: 600;
}

.fw-800 {
    font-weight: 800;
}


.line-height-1-6 {
    line-height: 1.6rem;
}

.custom-line-height-1-3 {
    line-height: 1.3rem;
}

.custom-letter-spacing-05 {
    letter-spacing: 0.05rem;
}

.custom-letter-spacing-10 {
    letter-spacing: 0.10rem;
}

.custom-letter-spacing-15 {
    letter-spacing: 0.15rem;
}

.custom-letter-spacing-20 {
    letter-spacing: 0.20rem;
}

.custom-letter-spacing-35 {
    letter-spacing: 0.35rem;
}

.texte-balance {
    text-wrap: balance;
}

hr {
    border: solid 1px var(--color-main-1);
    opacity: 100%;
}

hr.hr-title {
    border-width: 3px;
    width: 80%;
}

hr.hr-title-short {
    border-width: 2px;
    width: 25%;
}


/* FORMULAIRES */

.acf-button  {
    white-space: normal;
}

.acf-form-submit {
    padding: 15px 12px;
}

.acf-required {
    color: var(--color-main-1)!important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
    border-color: var(--color-main-1)!important;
    color: var(--color-main-1)!important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
    background-color: #e9e9e9 !important;
}

.acf-field .acf-label label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.ui-datepicker-title {
    display: flex;
}

.acf-accordion-title {
    margin: 0.5rem!important;
}

.acf-accordion-icon {
    font-size: 2rem;
    line-height: unset;
    color: var(--color-main-1);
}

.formulaire button {
    width: fit-content;
    text-align: center;
    background-color: var(--color-main-1);
    padding: 1.25rem 3rem;
    border: none;
    color: var(--color-main-3);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

.formulaire button:hover {
    background-color: color-mix(in srgb, var(--color-main-1) 80%, hsl(0deg 100% 50%));
}

.acf-field.acf-accordion, .acf-fields, .acf-fields > .acf-field  {
    border: none!important;
}

/* enlever la bordure automatique quand 2 input sur la meme ligne */
.acf-field[data-width] + .acf-field[data-width] {
    border: none!important;
}

a.ui-state-hover, a.ui-state-default.ui-state-highlight.ui-state-hover {
    background-color: var(--color-main-1)!important;
}

button.ui-datepicker-buttonpane {
    color: var(--color-main-1)!important;
    border-color: var(--color-main-1)!important;
}

.formulaire li label {
    font-size: 1rem;
    line-height: 1.8rem;
    display: flex!important;
    align-items: center!important;
    gap:0.4rem;
}

.formulaire li > label.selected {
    color: var(--color-main-1)!important;
    font-weight: normal!important;
}

/* changement select que pour gogole */
select,
select::picker(select) {
	appearance: base-select;
}

select {
    display: flex;
    align-items: center;
}

select::picker-icon {
	color: var(--color-main-1);
}

select option:hover {
	background-color: var(--color-main-1)!important;
    color: white!important;
    font-weight: 400;
}

input[type="password"] {
    color: var(--color-main-1);
}

input[type="checkbox"], input[type="radio"], input[type=range] {
  accent-color: var(--color-main-1); 
}

.form-check-input:checked {
    background-color: var(--color-main-1);
    border-color: var(--color-main-1);
}

input[type="number"] {
    min-width: 5.5rem!important;
}

.acf-input input:not([type="range"]), input.h-2-6-rem:not([type="range"]), .acf-input > select, option {
    min-height: 2.6rem!important;
    padding: 0 1rem!important;
    background-color: color-mix(in srgb, var(--color-background-5) 20%, white);
    font-weight: 300;
}

input.h-2-6-rem, textarea, select, input[type="number"] {
    /* border-radius: 0.4rem; */
    border: solid 2px color-mix(in srgb, var(--color-main-4) 50%, transparent);
    outline: none;
}

input.h-2-6-rem:focus, textarea:focus {
    /* a voir  border-radius: 0.4rem; */
    border: solid 2px var(--color-main-1);
}

.h-2-6-rem a {
    color: var(--color-main-1);
    text-decoration: underline;
}

.formulaire textarea {
    padding: 0.8rem 1rem!important;
    font-size: 1rem!important;
    line-height: 1.7rem!important;
    color: var(--color-main-2);
}

.acf-taxonomy-field .categorychecklist-holder {
    border: none!important;
}

/* Reset de l'affichage de base pour Safari et Chrome pour le slider de l'input range */

input[type=range], input[type=range]:focus {
    appearance: none;  
    border: none;
    background-color: unset;
    overflow: hidden; 
}

/* Affichage pour Safari Chrome */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--color-main-1); /* Couleur du curseur */
    cursor: pointer;
        margin-top: -6px;
}

/* Couleur pour le rond Safari Chrome*/
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--color-main-1) 50%, transparent)!important;
}


/* Affichage pour Firefox */
/* Couleur pour le rond */
input[type=range]::-moz-range-thumb{
    background: var(--color-main-1)!important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* Couleur pour la ligne avant le rond */
input[type=range]::-moz-range-progress {
    height: 8px;
    background-color: color-mix(in srgb, var(--color-main-1) 50%, transparent)!important; 
}

/* Couleur pour la ligne apres le rond */
input[type=range]::-moz-range-track{
    height: 8px;
    background: color-mix(in srgb, var(--color-main-1) 20%, transparent);
}





.custom-btn {
    width: 100%;
    text-align: center;
    background-color: var(--color-main-1);
    padding: 1.25rem 3rem;
    border: none;
    color: var(--color-main-3);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

.custom-btn:hover {
    background-color: color-mix(in srgb, var(--color-main-1) 80%, hsl(0deg 100% 50%));
}

.custom-w-fit-content {
    width: fit-content!important;
}




/* Coup de coeur et higlight a optimiser niveau ligne de code */

/* Coup de coeur et Highlight COULEURS */
.highlight-couleurs {
    background-color: var(--color-main-3);
    border: 1px solid var(--color-main-1);
}

.highlight-couleurs span {
    color: var(--color-main-1);
}

.coup-de-coeur-couleurs {
    background-color: var(--color-main-1);
    border: 1px solid var(--color-main-1);
}

.coup-de-coeur-couleurs span {
    color: var(--color-main-3);
}


/* page accueil DIMENSIONS*/
.coup-de-coeur-info-accueil, .highlight-info-accueil {
    display: flex;
    padding: clamp(0.2rem, 0.15vw, 1rem) clamp(0.4rem, 0.7vw, 2rem) clamp(0.2rem, 0.15vw, 1rem) clamp(0.4rem, 0.7vw, 2rem);
    width: fit-content;
    height: fit-content;
}

.highlight-info-accueil span, .coup-de-coeur-info-accueil span {
    font-size: clamp(0.5rem, 0.50vw, 0.8rem);
    font-weight: bold;
    letter-spacing: 10%;
    text-transform: uppercase;
}


/* pages template DIMENSIONS*/
.highlight-info-page-template {
    position: absolute;
    top: -1px;
    right: -1px;
    display: flex;
    margin-bottom: 1em;
    padding: clamp(0.4rem, 0.20vw, 1rem) clamp(0.6rem, 0.8vw, 2rem) clamp(0.4rem, 0.18vw, 1rem) clamp(0.6rem, 0.8vw, 2rem);
    width: fit-content;
}

.highlight-info-page-template span {
    font-size: clamp(0.6rem, 0.65vw, 0.8rem);
    font-weight: bold;
    letter-spacing: 20%;
    text-transform: uppercase;
}

.coup-de-coeur-info-page-template {
    position: absolute;
    top: -1px;
    left: -1px;
    display: flex;
    margin-bottom: 1em;
    padding: clamp(0.4rem, 0.20vw, 1rem) clamp(0.6rem, 0.8vw, 2rem) clamp(0.4rem, 0.18vw, 1rem) clamp(0.6rem, 0.8vw, 2rem);
    width: fit-content;
}

.coup-de-coeur-info-page-template span {
    font-size: clamp(0.6rem, 0.65vw, 0.8rem);
    font-weight: bold;
    letter-spacing: 20%;
    text-transform: uppercase;
}


/* pages single DIMENSIONS*/
.highlight-info-page-single {
    display: flex;
    padding: clamp(0.4rem, 0.25vw, 1.1rem) clamp(0.6rem, 0.8vw, 2rem) clamp(0.4rem, 0.18vw, 1rem) clamp(0.6rem, 0.8vw, 2rem);
    width: fit-content;
}

.highlight-info-page-single span {
    font-size: clamp(0.8rem, 0.70vw, 1rem);
    font-weight: bold;
    letter-spacing: 20%;
    text-transform: uppercase;
}

.coup-de-coeur-info-page-single {
    display: flex;
    padding: clamp(0.4rem, 0.25vw, 1.1rem) clamp(0.6rem, 0.8vw, 2rem) clamp(0.4rem, 0.18vw, 1rem) clamp(0.6rem, 0.8vw, 2rem);
    width: fit-content;
}

.coup-de-coeur-info-page-single span {
    font-size: clamp(0.8rem, 0.70vw, 1rem);
    font-weight: bold;
    letter-spacing: 20%;
    text-transform: uppercase;
}







.max-line-6 {
    display: -webkit-box;           
    -webkit-box-orient: vertical;   
    overflow: hidden;     
    -webkit-line-clamp: 6;        
}

.max-line-4 {
    display: -webkit-box;           
    -webkit-box-orient: vertical;   
    overflow: hidden;     
    -webkit-line-clamp: 4;        
}


/* END General */





/* MENU MOBILE */

.menu-burger {
    width: 35px;
    height: 25px;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3001;
}

.menu-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-main-2);
    transition: all 0.3s ease;
}

.menu-mobile-actif-fond {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2003;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#menu-top {
    transition: transform 0.35s ease;
}




/* END MENU MOBILE --- */




/* Interaction Général */

.custom-background {
    background-color: color-mix(in srgb, var(--color-background-5) 20%, white);
}

.custom-background-hover:hover {
    transition: 0.3s all;
    background-color: color-mix(in srgb, var(--color-background-5) 60%, #0000000d);
}

.custom-background-hover:hover h2 {
    transition: 0.4s all;
    opacity: 95%;
}

.custom-background-hover .fleche-contact {
    transition: 1s all;
}

.custom-background-hover:hover .fleche-contact {
    transition: 0.4s all;
    transform: translateX(10px);
}

/* END Interaction Général */


/* PAGE 404 */

.fs-quatre-cent-quatre {
    font-size: 7rem;
}

/* END PAGE 404 */




/* PAGE Accueil */



.min-h-cards-adress-accueil .fleche-cards-accueil {
     transition: 1s all;
     margin-right: 0.15rem;
}


.min-h-cards-adress-accueil:hover .fleche-cards-accueil {
    transition: 0.3s all;
    padding-left: 0.15rem;
     margin-right: 0rem;
}


.ratio-1-cover {
    aspect-ratio: 1;
    /* au cas ou pour changer la couleur de fond des images alignées 
    background: #d9d9d9;
    */
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.ratio-1-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* END PAGE Accueil --------------- */


/* PAGE Agenda */

.categorie-menu-actif {
    color: var(--color-main-1);
}

.custom-odd-order-switch > div.row {
    flex-direction: column-reverse;
}

.custom-event-category-mise-avant {
    bottom: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin-bottom: 2rem;
    margin-right: 2rem;
    background: linear-gradient( var(--color-main-1), var(--color-main-1)) center/5rem 5rem no-repeat;
}




/* menu category mobile */

.event-filtre {
    display: none;
}

.event-filtre.is-open {
    display: flex;
    flex-direction: column;
    gap: 1rem !important;
}

.event-filtre-toggle {
    width: 100%;
    border: 2px solid var(--color-main-1);
    background: transparent;
    color: var(--color-main-1);
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-filtre-arrow {
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.event-filtre-dropdown.is-open .event-filtre-arrow {
    transform: rotate(-90deg);
}

.custom-filtres-responsive.is-hidden {
    transform: translateY(100%);
    pointer-events: none;
}

.custom-me-en-avant {
    margin-right: clamp(3rem, 7vw, 10rem)
}



.filtres-mobile-actif-fond {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.filtres-mobile-actif-fond.is-open {
    opacity: 1;
    visibility: visible;
    z-index: 4000;
}

.custom-filtres-responsive {
    z-index: 2002;
}

/* ANIMATION AGENDA */


.avant-animation-events {
    opacity: 0;
    transform: translateY(25px);
}

.animation-events {
    animation: apparitionEvenements 0.45s ease forwards;
}

@keyframes apparitionEvenements {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* END PAGE Agenda --------- */






/* PAGES Single  */

.content p {
    margin-bottom: revert;
}



    /* Style pagination page suivantes précédentes  */

    .pagination .page-numbers.current {
        color: var(--color-main-1);
        font-weight: 500;
    }


/* END PAGE Single Event */





/* PAGE Template culture(oeuvres) */ 

.custom-max-width-img-70 {
    max-width: 70%;
}

.petit_plus_culture {
  position: relative;
  text-indent: 20px;
}

.petit_plus_culture::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: url('img/icons/icone-le-petit-plus-1-etoile.svg') no-repeat center / contain;
}



.ratio-1-contain {
    aspect-ratio: 1;
    /* au cas ou pour changer la couleur de fond des images alignées 
    background: #d9d9d9;
    */
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.ratio-1-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.description-oeuvre p {
    font-size: 0.875rem;
    display: -webkit-box;           
    -webkit-box-orient: vertical;   
    overflow: hidden;     
    -webkit-line-clamp: 4;  
}

/* END PAGE Template culture(oeuvres) ----- */



/* PAGE Template ACCUEIL  */ 

.w-20 {
    width: 20%;
}

.max-w-90vw {
    max-width: 90vw;
}

.custom-filtres-cantons {
    width: calc(50% - 0.5rem) !important;
    background-color: color-mix(in srgb, var(--color-main-3) 30%, antiquewhite);
    border: solid 1px color-mix(in srgb, var(--color-main-1) 5%, transparent);
}

.custom-filtres-cantons:hover {
    background-color: color-mix(in srgb, var(--color-main-3) 5%, antiquewhite);
}

.custom-filtres-cantons-selectionne {
    color: white;
    font-weight: 500;
    background-color: var(--color-main-1);
}

.custom-filtres-cantons-selectionne:hover {
    background-color: color-mix(in srgb, var(--color-main-1) 93%, black);
}


.custom-sticky-md-filtres .form-check-input {
    border-radius: 0px;
    background-color: var(--color-main-3);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.custom-sticky-md-filtres .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23BC002D'/%3e%3c/svg%3e");
}


.custom-filtres-mobile-toggle svg {
    fill: currentColor;
}

.min-h-cards-adress-accueil {
    min-height: clamp(260px, 30vh, 450px);
}

/* END PAGE Template ACCUEIL  */ 




/* Footer */

footer {
    background-color: var(--color-main-2);
} 

footer.main-footer :is(.menu-bot a li, p, a, h1, h2, h3, h4, h5, h6) {
    color: var(--color-main-3)!important;
}

footer svg {
    width: 35px;
    height: auto;
    fill: var(--color-main-3);
}

footer svg:hover {
    opacity: 70%;
}

/* END Footer */






/* Tailles Media Queries */

/*
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px



Classe	Valeur par défaut (Bootstrap 5)
mt-0	margin-top: 0;
mt-1	margin-top: 0.25rem; (≈ 4px)
mt-2	margin-top: 0.5rem; (≈ 8px)
mt-3	margin-top: 1rem; (≈ 16px)
mt-4	margin-top: 1.5rem; (≈ 24px)
mt-5	margin-top: 3rem; (≈ 48px)

*/






/* ACF MAP */

.map-accueil {
    width: 99%;
    min-height: 50vh;
    max-height: 600px;
    border: #ccc solid 1px;
}

.map-single-adresses {
    min-height: 400px;
    border: #ccc solid 1px;
}

/* Fixes potential theme css conflict. */
#map img {
   max-width: inherit !important;
}



/* Enlever le bouton qui permer de bouger sur la map au clique de souris sur des boutons */
gmp-internal-camera-control {
    display: none !important;
}

/* style popup markers map accueil */


.gm-style .gm-style-iw-c {
    padding:  1.3rem 0.7rem 1rem 0.7rem!important;
    min-width: 160px!important;
    max-width: 230px;
    border-radius: 4px;
}


    /* croix fermeture popup */

    .gm-style-iw-chr {
    height: 0 !important;
    min-height: 0 !important;
    }

    .gm-style-iw-ch {
        display: none !important;
    }

    .gm-ui-hover-effect {
        width: 28px !important;
        height: 28px !important;
        top: 0px !important;
        right: 3px !important;
        position: absolute !important;
    }

    .gm-ui-hover-effect span {
        width: 18px !important;
        height: 18px !important;
        margin: 5px !important;
    }




/* GALERIE des pages SINGLE */

.carousel-inner, .carousel-item {
    height: 600px;
}


.modal-backdrop.fade.show {
    opacity: 80%;
}

.modal-content {
    padding-bottom: 2rem;
}



.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}


#galerieCarousel {
    min-height: 650px;
}

.galerie-pagination {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: white;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.35rem 0.8rem;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
}



/* DEBUT Media Queries */

/* CI DESSOUS MIN WIDTH, DONC AU DESSUS de AFFICHAGE MOBILE */
/* Large md	≥768px */
@media (min-width: 768px) {

    
    
    /* Tailes et espacement Général */
    main {
        padding-top: 100px;
    }

    .w-md-auto {
        width: auto!important;
    }

    .fs-md-6 {
    font-size: 1rem!important;
    }

    .mb-md-6 {
        margin-bottom: 5rem!important;
    }

    .mt-md-6 {
        margin-top: 5rem!important;
    }

    .mb-md-7 {
        margin-bottom: 7.5rem!important;
    }


    /* ACCUEIL */
    .custom-sticky-md-filtres {
        position: -webkit-sticky;
        position: sticky;
        top: 170px;
        z-index: 1000;
    }

    .event-filtre {
        display: flex;
    }

    .min-h-cards-adress-accueil {
        min-height: clamp(250px, 33vw, 350px);
    }

    /* AGENDA */
    .event > a > div {
        height: 100%;
    }

    .custom-odd-order-switch > div.row {
        flex-direction: row;
    }

    .custom-odd-order-switch > div.row:nth-child(even) {
        flex-direction: row-reverse;
    }

    .custom-odd-order-switch .row:nth-of-type(even) .custom-event-category-mise-avant {
        right: unset;
        left: 0px;
        margin-left: 2rem;
    }

    /* PAGE SINGLE ADRESSE - Categories */




}

/* Large lg	≥992px */
@media (min-width: 992px) {

    header#menu {
        height: 80px;
    }

    .max-w-md-1000px {
    max-width: 1000px;
    }


    /* ACCUEIL */
    .w-lg-75 {
        width: 75%!important;
    }

    .min-h-cards-adress-accueil {
        min-height: clamp(250px, 14vw, 300px);
    }

    /*Pour filtres page accueil de mobile a desktop */

        .custom-filtres-responsive {
        width: 20%;
    }

    .map-accueil {
        min-height: 60vh;
    }




}




/* !!! Attention MAX WIDTH ICI (donc mobile only) */
@media (max-width: 768px) {

    .row.overflow-x-auto {
        margin-left: 0;
        margin-right: 0;
    }

}

/* !!! Attention MAX WIDTH ICI (donc mobile et petite tablette only) */
@media (max-width: 767px) {

    #menu-top {
        margin: 0rem;
        padding: 14rem 2rem 2rem 4rem !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 80vw;
        max-width: 340px;
        height: 100vh;
        background-color: var(--color-background-5);
        z-index: 3000;
        transform: translateX(100%);
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start;
        gap: 3rem !important;
    }

    #menu-top.is-open {
        transform: translateX(0);
    }

    .menu-mobile-actif-fond.is-open {
        opacity: 1;
        visibility: visible;
    }

    body.menu-is-open {
        overflow: hidden;
    }

    .menu-burger span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: var(--color-main-2);
        transition: all 0.3s ease;
    }

    /* état ouvert = croix */
    .menu-burger.is-open span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .menu-burger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-burger.is-open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }



    /* GALERIE PAGE SINGLE MODALE */

    .galerieCarousel {
        height: 620px;
    }


}


@media (max-width: 991px) {

    .custom-scroll-snap {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .custom-scroll-snap::-webkit-scrollbar {
        display: none; /* Pour Google et safari */
    }

    .custom-scroll-snap-item {
        flex: 0 0 auto;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .custom-slider-pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .custom-slider-dot {
        width: 8px;
        height: 8px;
        border: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--color-main-2);
        opacity: 0.3;
    }

    .custom-slider-dot.is-active {
        background: var(--color-main-1);
        opacity: 1;
    }

    .custom-w-container-md {
        width: 100%!important;
        max-width: 100%!important;
    }



    /* POUR FILTRE SUR MOBILE */

        .custom-filtres-responsive {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2002;

        background: var(--color-background-5);
        border-top: 1px solid var(--color-main-1);

        transform: translateY(calc(100% - 64px));
        transition: transform 0.3s ease;
    }


    .custom-filtres-responsive.is-open {
        transform: translateY(0);
        z-index: 4001;
    }

    .custom-filtres-mobile-toggle {
        width: 100%;
        height: 64px;

        border: 0;
        background: var(--color-main-1);
        color: var(--color-background-5);

        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
    }

    .custom-sticky-md-filtres {
        max-height: 70vh;
        overflow-y: auto;
        padding: 1.5rem;
    }




}



/* Spécial, entre 900 et 1000px plus souple sur le max width du container pour gagner de la place en largeur de contenu de page*/
@media screen and (min-width: 800px) and (max-width: 991px) {

    .custom-container-large-xs {
        max-width: 90%;
    }
}

/* Pareil entre 1200 et 1399px */
@media screen and (min-width: 1200px) and (max-width: 1399px) {

    .custom-container-large-xl {
        max-width: 95%;
    }
}


/* END Media Queries */