#supercats-dropdown {
    display: none;
}

/*==========================================================GLOBAL
Concerne les styles applicables à toutes les pages
*/
:root {
	--orange: #ff8b38;
	--orange-c: #d37531;
	--bleu: #0a5bb4;
	--bleu-c: #c5d8f5;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Evite les débordements : padding inclus dans la width */
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

main {
    flex: 1;
}

.page-container {
    width: 100%;
    max-width: 1740px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;
	padding-bottom: 15vh;
}

.page-container * {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .page-container {
        padding: 0 12px 15vh;
    }
}

h1, h2, h3, h4, h5, a, p, table{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
text-decoration: none;
color: inherit;
}

.page-title-container {
    text-align: center;
}

.firstcontent-below-page-title {
    text-align: center;
    margin-top: 32px;
}

.page-title-h1 {
    font-size: clamp(28px, 6vw, 64px);
}

.page-title-h2 {
    font-size: clamp(22px, 4.5vw, 48px);
}

.hr-full-width-menu {
    display: block;
    width: 100%;
    background-color: #ff8b38;
    border: none;
    height: 1px;
    margin: 0;
}

.hr-separator {
	margin: auto;
	margin-top: 32px;
	width: 50%;
}

/*=================================================================================MENU*/
.nav-menu-bouton-mobile {
	display: none;
}

.header-container {
}

    .nav-menu-header {
        display: flex;
        align-items: center;
        max-height: 120px;
        padding-top: 20px;
	    padding-bottom: 15px;
    }
	
.nav-menu-header > div:last-child {
        margin-left: auto;

    }

    .logo-header {
        width: 150px
    }

    .li-onglets-header {
        display: flex;  
        gap: 20px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .li-onglets-header > li > a {
        
        color: #ff8b38;
        background-color: white;
        font-size: clamp(14px, 2.5vw, 22px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border: 2px solid #ff8b38;
        border-radius: 10px;
        height: auto;
        line-height: 1;
        font-weight: 600;
        text-decoration: none;
    }

#changer-de-ville {
    color: var(--bleu);
    font-weight: 500;
    font-size: 0.8rem;
}

.menu-icone-categorie {
	margin-bottom:4px;
	width:25px;
}

#changer-de-ville:hover {
    text-decoration: underline;
}

    .disabled-link {
    border-color: #ddd !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6;
}

 .disabled-link-svg {
    border-color: #ddd !important;
    fill: #aaa !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6;
}

    .li-icones-header {
        display: flex;
        gap: 8px;
        list-style: none;
		margin-right: 16px;
    }

    .li-icones-header li a {
        fill: #ff8b38;
        background-color: white;
        padding: 5px;
        text-decoration: none;
        font-weight: bold;
        font-size: 18px;
    }

 	.li-icones-header li a svg {
		width: 16px; 	
 	}

/* ── Breakpoint tablette intermédiaire (768px–1024px) ───────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .li-onglets-header {
        gap: 8px;
    }

    .li-onglets-header > li > a {
        font-size: 13px;
        padding: 7px 10px;
    }
}

    /* Chevron aligné */
.supercats-toggle i {
    margin-top: 1px;
}

.menu-supercats { position: relative; }

.supercat-header {
    color: #ff8b38;
    font-weight: bold !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 8px 0px 8px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 6px;
}

.supercat-header:hover { background: #f3f3f3; }

.subcats-list {
    list-style: none;
    padding: 0px 0 0 10px;
    margin: 0;
    display: none;
}

.subcats-list li a {
    display: block;
    padding: 4px 6px;
    text-decoration: none;
    color: #ff8b38;
    font-size: 0.92rem;
}

.subcats-list li a:hover {
    background: #ff8b38;
    color: #fff;
}

#supercats-dropdown {
    display: none ; 
}
/* ===== MENU SUPER CATEGORIES ===== */

.menu-supercats {
    position: relative;
}

.supercat-block {
    margin-bottom: 10px;
}

.supercat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #ff8b38;
    cursor: pointer;
}

.subcats-list {
    list-style: none;
    padding-left: 10px;
    margin-top: 6px;
    display: none;
}

.subcats-list li a {
    font-size: 16px;
    color: #333;
}

/* Changer de ville : uniquement visible sur mobile */
.menu-changer-ville-mobile {
    display: none;
}

@media (max-width: 767px) {
    .menu-changer-ville-mobile {
        display: block;
    }
}

/* ── Scroll bloqué quand le menu mobile est ouvert ───────────────── */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 767px) {

    .nav-menu-bouton-mobile {
        display: block;
        position: fixed;
        top: 12px;
        right: 16px;
        z-index: 10001;
        background: white;
        border: 2px solid #ff8b38;
        border-radius: 8px;
        font-size: 22px;
        color: #ff8b38;
        width: 44px;
        height: 44px;
        cursor: pointer;
        line-height: 1;
    }

    header {
        position: static;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9998;
        cursor: pointer;
    }

    .nav-overlay.open {
        display: block;
    }

    .header-container {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 75vw;
        max-width: 320px;
        height: 100dvh;
        background: white;
        border-left: 2px solid #ff8b38;
        z-index: 9999;
        overflow-y: auto;
        transition: right 0.3s ease;
        padding: 60px 0 20px 0;
        pointer-events: none;
    }

    .header-container.open {
        right: 0;
        pointer-events: auto;
    }

    .nav-menu-header {
        flex-direction: column;
        max-height: none;
        width: 100%;
        padding: 0 16px;
    }

    .nav-menu-header > div:first-child {
        text-align: center;
        margin-bottom: 16px;
    }

    .logo-header {
        width: 100px;
		height: 100px;
    }

    .li-onglets-header {
        flex-direction: column;
        padding: 0;
        gap: 8px;
    }

    .li-onglets-header li {
        width: 100%;
    }

    .li-onglets-header li a {
        display: block;
        width: 100%;
        padding: 10px 8px;
        border: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .li-icones-header {
        margin-top: 16px;
        padding: 0;
        justify-content: center;
        gap: 16px;
    }

    .nav-menu-header > div:last-child {
        margin-left: 0;
    }

    .hr-full-width-menu {
        display: none;
    }
}

/*================================================MENU - RECHERCHE DE PRODUIT*/
#search-product-container {
    display:none;
    position:absolute;
    top: 100%;
    left: 0;
    background:#fff;
    border:1px solid #ccc;
    border-radius:8px;
    padding:10px;
    width:320px;
    z-index:1100;
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

#search-product-input {
    width:100%;
    padding:8px 10px;
    border:1px solid #ff8b38;
    border-radius:6px;
}

#search-product-results {
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
    max-height:300px;
    overflow:auto;
}

.spr-thumb {
    width:48px; height:48px;
    object-fit:cover;
    border-radius:6px;
    border:2px solid #ff8b38;
}

.search-product-store-container {
    border: 1px solid black;
    margin-bottom: 5px;
    padding: 5px;
}

/*=================================================================================FOOTER*/

 .footer-container {
     margin-top: clamp(64px, 10vw, 256px);
     padding-bottom: 32px;
 }

 .footer-reseaux {
     display: flex;
     justify-content: center;
     font-size: 0;
     gap: 8px;
 }

 .footer-reseaux-image {
     width: 35px;
 }

 .footer-copyright {
     text-align: center;
     color: gray;
     margin-top: 8px;
     font-size: 13px;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 4px;
 }

 .footer-links a, .footer-links p {
     color: gray;
     font-size: 13px;
 }


/*=================================================================================ACCUEIL - CHOIX DES VILLES*/

.choix-ville-texte-container {
    text-align: center;
    font-size: 36px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.choix-ville-container {
     display: flex;
     gap: 20px;
     max-width: 100%;
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 32px;
}

.ville-annecy-container {
    text-align: center;
    font-size: 14px;
    width: 25%;
    text-wrap: wrap;
    border: #ededed solid 1px;
    background-color: #fcfcfc;
    box-shadow: 2px 2px 3px #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}
.page-accueil-description {
    max-width: 520px;
    margin: 0 auto 1.5rem;
    padding: 14px 20px;
    background: #fff8f3;
    border-left: 4px solid #ff8b38;
    border-radius: 0 8px 8px 0;
    text-align: left;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .page-accueil-description {
        width: 95%;
        font-size: 0.9rem;
    }
}
.image-ville {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .5s ease;
}

.image-ville:hover {
    transform: scale(1.1);
}


/*===============================================================================PAGE ANNECY*/

.mise-en-avant-annecy-container {
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
}

#carouselMiseEnAvant {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.mise-en-avant-annecy-image {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
}

.mise-en-avant-annecy-text-container {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 10px 18px;
    width: 70%;
    border-radius: 8px;
}

.mise-en-avant-annecy-container h1 {
	font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #ff8b38;
    margin-bottom: 6px;	
}

.mise-en-avant-span-h1 {
	text-transform: capitalize;
}

.mise-en-avant-annecy-container h2 {
    color: #ff8b38;
    font-size: 48px;
    margin: 0;
}

.mise-en-avant-annecy-container h3 {
    color: #ff8b38;
    font-size: 24px;
    margin: 4px 0 0 0;
}

.mise-en-avant-bouton {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff8b38;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 5;
}

.mise-en-avant-bouton:hover {
    background-color: #FF6A00;
    color: white;
}

#carouselMiseEnAvant .carousel-control-prev,
#carouselMiseEnAvant .carousel-control-next {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    background-color: #ff8b38;
    border-radius: 50%;
    opacity: 1;
    margin: 0 12px;
}

#carouselMiseEnAvant .carousel-control-prev-icon,
#carouselMiseEnAvant .carousel-control-next-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

#carouselMiseEnAvant .carousel-control-prev:hover,
#carouselMiseEnAvant .carousel-control-next:hover {
    background-color: #FF6A00;
}

#carouselMiseEnAvant .carousel-indicators {
    bottom: 14px;
}

#carouselMiseEnAvant .carousel-indicators [data-bs-target] {
    background-color: #ff8b38;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.6;
    border: none;
}

#carouselMiseEnAvant .carousel-indicators .active {
    opacity: 1;
}

.mise-en-avant-bouton:hover {
    background-color: #FF6A00;
}


.liste-des-catégories-container {
    width: 90%;
    margin: auto;
    margin-top: 64px;
}

.titre-page-annecy-container {
    width: 50%;
    margin: auto;
    text-align: center;
}

.titre-page-annecy-container h2 {
    color: #ff8b38;
    font-weight: bold;
    font-size: 32px;
}

.titre-page-annecy-container h3 {
    color: black;
    font-weight: normal;
    font-size: 22px;
}

.liste-des-categories-grid-container {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 50% 50%;
    gap: 10px;
    height: 500px;
    margin-top: 32px;
    overflow: hidden;
}


.grid-image-1-container {
    grid-column: 1/2;
    grid-row: 1/3;
    position: relative;
}

.grid-image-1-container img {
    width:100%; 
    height: 100%; 
    object-fit: cover;
}

.grid-image-2-container {
    grid-column: 2/4;
    grid-row: 1/2;
    position: relative;
}

.grid-image-2-container img {
    width:100%; 
    height: 100%; 
    object-fit: cover;
}

.grid-image-3-container {
    grid-column: 2/3;
    grid-row: 2/3;
    position: relative;
}

.grid-image-3-container img {
    width:100%; 
    height: 100%; 
    object-fit: cover;
}

.grid-image-4-container {
    grid-column: 3/4;
    grid-row: 2/3;
    position: relative;
}

.grid-image-4-container img {
    width:100%; 
    height: 100%; 
    object-fit: cover;
}

.grid-nom-categories {
    color: #fff;
    background-color: #ff8b38;
    position: absolute;
    top: 5%;
    left: 5%;
    padding: 5px;
    transition: transform ease 0.2s;
    max-width: calc(90% - 10px);
	scrollbar-width: none;
	font-size: 1.3rem;
}


.liste-des-categories-grid-container > div > a:hover > h3 {
    color: white;
    background-color: var(--orange-c);
    transform: scale(1.05);
}

.liste-des-categories-button-container {
    margin-top: 32px;
    text-align: center;
}

.liste-des-categories-button {
    display: inline-block;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
    border-radius: 8px;
    border: none;
    padding: 12px 24px;
    background: linear-gradient(45deg, #ff8b38, #ff7033);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.liste-des-categories-button:hover {
    transform: scale(1.02);
}

.derniers-arrivants-container {
    margin-top: 64px;
}

.derniers-arrivants-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 90%;
    margin: auto;
    margin: 32px auto 0;
}

.derniers-arrivants-grid-commerces {
    text-align: center;
    text-decoration: none;
    background-color: #ff8b38;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 25px;
}

.derniers-arrivants-grid-commerces img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all ease 0.2s;
}

.derniers-arrivants-grid-commerces a {
    text-decoration: none;
}

.derniers-arrivants-grid-commerces h4 {
    color: white;
}

.derniers-arrivants-grid-commerces a:hover > img {
    transform: scale(1.02);
}

@media (max-width: 767px) {
#page-container-page-ville {
	padding-left: 0;
	padding-right: 0;
}

#carouselMiseEnAvant {
    border-radius: 0;
}

.mise-en-avant-annecy-container {
    width: 100%;
    margin-top: 0;
}

.mise-en-avant-annecy-image {
    width: 100%;
    height: 60vh;
    object-fit: cover;
}
	
.titre-page-annecy-container h {
    font-size: 22px;
	}
	
.titre-page-annecy-container h3 {
    font-size: 18px;
	}

.mise-en-avant-annecy-text-container {
    top: 28%;
    width: 85%;
    padding: 8px 12px;
}

.mise-en-avant-annecy-container h2 {
    font-size: 26px;
}

.mise-en-avant-annecy-container h3 {
    font-size: 14px;
}

.mise-en-avant-bouton {
    bottom: 30px;
    padding: 10px 20px;
    font-size: 14px;
}

.liste-des-categories-button {
	font-size:22px;
	
}

#carouselMiseEnAvant .carousel-control-prev,
#carouselMiseEnAvant .carousel-control-next {
    width: 36px;
    height: 36px;
    margin: 0 6px;
}

#carouselMiseEnAvant .carousel-control-prev-icon,
#carouselMiseEnAvant .carousel-control-next-icon {
    width: 16px;
    height: 16px;
}

.titre-page-annecy-container {
    width: 90%;
    margin-top: 48px
}

.liste-des-categories-grid-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
}

.liste-des-categories-grid-container > div > a > img {
    height: 200px;
}

.derniers-arrivants-grid-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 8px;
    padding-left: 5%;
    padding-right: 5%;
	scrollbar-width: none;
}

.derniers-arrivants-grid-commerces {
    flex: 0 0 45vw;
    scroll-snap-align: start;
}

}

/*=============================================================TOUTES LES CATEGORIES*/

.toutes-les-catégories-categorie-container {
    margin-top: 32px;
}

.toutes-les-catégories-catégorie-title {
    text-align: center;
    margin-top: 64px;
}

/*--------------------------------------------------ALIMENTATION*/
.toutes-les-catégories-grid-alimentaire {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 800px;
    gap: 10px;
    width: 90%;
    margin: auto;
    margin-top: 16px;
}

.toutes-les-catégories-grid-alimentaire-container-1 {
    grid-column: 1/3;
    grid-row: 1/3;
}

.toutes-les-catégories-grid-alimentaire-container-2 {
    grid-column: 3/5;
    grid-row: 1/2;
}

.toutes-les-catégories-grid-alimentaire-container-3 {
    grid-column: 1/3;
    grid-row: 3/4;
}

.toutes-les-catégories-grid-alimentaire-container-4 {
    grid-column: 3/4;
    grid-row: 2/4;
}

.toutes-les-catégories-grid-alimentaire-container-5 {
    grid-column: 4/5;
    grid-row: 2/4;
}

.toutes-les-catégories-grid-alimentaire > div {
    height: 100%;
    display: block;
    min-height: 0;
    position: relative;
}

.toutes-les-catégories-grid-alimentaire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.toutes-les-catégories-grid-alimentaire a {
    text-decoration: none;
}

.toutes-les-catégories-grid-alimentaire > div > a:hover > h3 {
    color: white;
    background-color: black;
    transform: scale(1.05);
}



/*--------------------------------------------------RESTAURATION*/
.toutes-les-catégories-grid-restauration {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 800px;
    gap: 10px;
    width: 90%;
    margin: auto;
    margin-top: 16px;
}

.toutes-les-catégories-grid-restauration-container-1 {
    grid-column: 1/2;
    grid-row: 1/3;
}

.toutes-les-catégories-grid-restauration-container-2 {
    grid-column: 2/3;
    grid-row: 1/2;
}

.toutes-les-catégories-grid-restauration-container-3 {
    grid-column: 2/3;
    grid-row: 2/3;
}


.toutes-les-catégories-grid-restauration > div {
    height: 100%;
    display: block;
    min-height: 0;
    position: relative;
}

.toutes-les-catégories-grid-restauration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.toutes-les-catégories-grid-restauration a {
    text-decoration: none;
}

.toutes-les-catégories-grid-restauration > div > a:hover > h3 {
    color: white;
    background-color: black;
    transform: scale(1.05);
}

/*--------------------------------------------------AUTRES COMMERCES*/
.toutes-les-catégories-grid-divers-commerces {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 800px;
    gap: 10px;
    width: 90%;
    margin: auto;
    margin-top: 16px;
}

.toutes-les-catégories-grid-divers-commerces-container-1 {
    grid-column: 1/3;
    grid-row: 1/3;
}

.toutes-les-catégories-grid-divers-commerces-container-2 {
    grid-column: 3/5;
    grid-row: 1/2;
}

.toutes-les-catégories-grid-divers-commerces-container-3 {
    grid-column: 1/3;
    grid-row: 3/4;
}

.toutes-les-catégories-grid-divers-commerces-container-4 {
    grid-column: 3/4;
    grid-row: 2/4;
}

.toutes-les-catégories-grid-divers-commerces-container-5 {
    grid-column: 4/5;
    grid-row: 2/4;
}

.toutes-les-catégories-grid-divers-commerces > div {
    height: 100%;
    display: block;
    min-height: 0;
    position: relative;
}

.toutes-les-catégories-grid-divers-commerces img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.toutes-les-catégories-grid-divers-commerces a {
    text-decoration: none;
}

.toutes-les-catégories-grid-divers-commerces > div > a:hover > h3 {
    color: white;
    background-color: black;
    transform: scale(1.05);
}


/* ── Responsive grids catégories ───────────────────────── */
@media (max-width: 1024px) {
    .toutes-les-catégories-grid-alimentaire,
    .toutes-les-catégories-grid-divers-commerces {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        height: auto;
    }

    .toutes-les-catégories-grid-restauration {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .toutes-les-catégories-grid-alimentaire > div,
    .toutes-les-catégories-grid-restauration > div,
    .toutes-les-catégories-grid-divers-commerces > div {
        grid-column: auto;
        grid-row: auto;
        height: 220px;
    }
}

@media (max-width: 767px) {
    .toutes-les-catégories-grid-alimentaire,
    .toutes-les-catégories-grid-restauration,
    .toutes-les-catégories-grid-divers-commerces {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
    }

    .toutes-les-catégories-grid-alimentaire > div,
    .toutes-les-catégories-grid-restauration > div,
    .toutes-les-catégories-grid-divers-commerces > div {
        grid-column: auto;
        grid-row: auto;
        height: 180px;
    }
}

/*==============================================================================TEMPLATE PAGE CATEGORIE*/

.url-path-page-catégorie {
    margin-top: 32px;
}

/* ── FIX : titre de page responsive ── */
.page-category-title {
    font-size: clamp(18px, 4vw, 32px);
    padding: 0 16px;
    text-align: center;
    margin: 24px auto 0;
    word-break: break-word;
}

@media (max-width: 767px) {
    .page-category-title {
        margin-top: 70px;
    }
}

.liste-des-commerces-page-categorie-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 128px;
    gap: 10px;
}

@media (max-width: 1024px) {
    .liste-des-commerces-page-categorie-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 48px;
    }
}

@media (max-width: 767px) {
    .liste-des-commerces-page-categorie-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 32px;
    }
}

.liste-des-commerces-page-categorie-grid > article {
    height: 350px;
    width: 100%;
}

.liste-des-commerces-page-categorie-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.page-categorie-texte-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    gap: 5px;
}

.page-categorie-texte-container p {
    font-size: 16px;
}

/*======================================================================TEMPLATE PAGE COMMERCE*/

.informations-principales-commerce-container {
    display: grid;
    width: 90%;
    margin: auto;
    gap: 0 32px;
    align-items: flex-start;
	grid-template-columns: 65% 35%;
}

.store-leftpart-container {
    width: 65%;
  }

.photo-commerce-container {
    flex: 0 0 65%;
}

.photo-commerce-container img {
}

.commerce-right-part-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    justify-content: flex-start;
    gap: 16px;
	grid-column: 2;
    grid-row: 1 / 3;
}

.url-path-description {
    color: gray;
    font-size: 12px;
}

.description-container {
    display: flex;
    flex-direction: column;
}

.breadcrumb-yuumi {
    padding: 10px 16px;
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.breadcrumb-yuumi a {
    color: #ff8b38;
    text-decoration: none;
}

.breadcrumb-yuumi a:hover {
    text-decoration: underline;
}

.breadcrumb-yuumi span {
    color: #bbb;
}

.breadcrumb-current {
    color: #555;
}

@media (max-width: 767px) {
    .breadcrumb-yuumi {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

.description-container h1 {
    font-size: 42px;
}

.hr-page-commerce {
    margin-top: 16px;
    border: none;
    border-top: 1px solid lightgray;
    width: 100%;
}

.description-nom-commerce {
    color: #ff8b38;
    font-weight: bold;
}

.description-principale {
    font-size: 20px;
    margin-top: 16px;
}

.description-secondaire {
    font-size: 16px;
    margin-top: 32px;
}


.itinéraire-commerce {
    margin-bottom: 3vh;
}
                                    

.button-1-description {
    display: block;
    font-weight: bold;
    border: solid #ff8b38 3px;
    width: 75%;
    margin: auto;
    padding: 5px;
    text-align: center;
}

.button-2-description {
    display: block;
    font-weight: bold;
    border: solid #ff8b38 3px;
    width: 75%;
    margin: auto;
    padding: 5px;
    text-align: center;
	margin-top: -18px;
}

.commerce-réseaux {
    display: flex;
    margin-top: 32px;
    gap: 20px;
    justify-content: center;
}

.commerce-réseaux img {
    width: 25px;
}

.commerce-wishlist {
    text-align: center;
    margin-top: 32px;
}

.commerce-wishlist button{
    background: none;
    border: 0;
    cursor: pointer;
}

.informations-secondaires-commerce-buttons-container button {
    background-color: white;
    color: black;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    border: solid #ff8b38 3px;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}



.infopratiques-container {
    padding: 15px; 
    background-color: #fff; 
    border: solid 5px #ff8b38; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box;
    margin-top: 16px;
}

.infopratiques-content-container {
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
}

.infopratiques-horaires-container {
    display: flex;
    flex-direction: column;
    width: 50%; 
    align-items: center;
    gap: 0;
}

.infopratiques-horaires-table {
    border-collapse: collapse;
}

.infopratiques-horaires-table th {
    text-align: center;
}

.infopratiques-horaires-table td {
    border-top: 1px solid black;
}

.infopratiques-miseajour {
    text-align: center; 
    margin-top: 16px;
    font-size: 14px;
}

.infopratiques-adresse-container {
    display: block; 
    width: 50%; 
    text-align: center; 
    margin-top: 60px;
}

.infopratiques-adresse-texte {
    font-size: 18px;
}

.galerie-container {
    padding: 15px; 
    background-color: #fff; 
    border: solid 5px #ff8b38; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box;
    margin-top: 16px;
    display: none;
	max-width: 100%;
}

.liste-produits-container {
}

.liste-produits-container table {
    border-spacing: 0; 
    table-layout: fixed; 
    border: solid #ff8b38 5px; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 32px;
    width: 100%;
}

.liste-produits-container tr {
    text-align: center;
}

.liste-produits-container th {
    text-align: center; 
    width: 100%; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    font-weight: bold; 
    background-color: #ff8b38; 
    color: white; 
    font-size: 16px;
}

.liste-produits-container td {
    border: 2px solid #ff8f38; 
    width: 25%; 
    padding: 3px; 
    hyphens: auto; 
    color: black;
}

/* ===========================
   GALERIE COMMERCE
=========================== */

.galerie-container {
    display: none;
    padding: 25px;
    border: 5px solid #ff8b38;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.galerie-title {
    font-size: 26px;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 3px solid #ff8b38;
    padding-bottom: 6px;
}

.galerie-description {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.6;
}

.galerie-main-wrapper {
    width: 100%;
    max-height: 420px;
    margin-bottom: 30px;
    overflow: hidden;
    border: 5px solid #ff8b38;
    border-radius: 14px;
    background: #fff;
}

.galerie-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.galerie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.galerie-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 4px solid #ff8b38;
    border-radius: 12px;
    background: #fff;
}

.galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.galerie-item img:hover {
    transform: scale(1.06);
}

.galerie-empty {
    text-align: center;
    color: #777;
    font-style: italic;
}

@media (max-width: 768px) {

    .galerie-title {
        font-size: 22px;
    }

    .galerie-main-wrapper {
        max-height: 260px;
    }

    .galerie-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
    }
}

/* ===========================
   LIGHTBOX GALERIE
=========================== */

.galerie-lightbox-wrapper {
    position: relative;
    display: inline-block;
}
.galerie-lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    border: 4px solid #ff8b38;
    border-radius: 14px;
    background: #fff;
    display: block;
}
.galerie-lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10002;
    transition: transform 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ff8b38' stroke-width='2.5' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}
.galerie-lightbox-close:hover {
    transform: scale(1.1);
}
.galerie-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}


/* ===========================
   PAGE COMMERCE — RESPONSIVE
=========================== */

@media (max-width: 767px) {
    .informations-principales-commerce-container {
        display: block;
        width: 100%;
    }

	.store-leftpart-container {
    width: 100%;
  }

    .photo-commerce-container {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .commerce-right-part-container {
        width: 100%;
        height: auto;
    }

    .description-container {
        display: block;
        text-align: center;
		padding: 0 20px;
    }

    .description-container h1 {
        font-size: 25px;
    }

    .description-principale {
        font-size: 16px;
    }

	.store-informations-secondaires-super-container {
		padding: 0 20px;
	}

    .informations-secondaires-commerce-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .informations-secondaires-commerce-buttons-container > button {
        width: 100%;
    }

    /* ── FIX : infos pratiques pleine largeur ── */
    .infopratiques-container {
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }

    /* ── FIX : colonnes horaires + adresse en colonne ── */
    .infopratiques-content-container {
        flex-direction: column;
        align-items: center;
    }

    .infopratiques-horaires-container {
        width: 100%;
    }

    .infopratiques-adresse-container {
        width: 100%;
        margin-top: 20px;
    }

    .galerie-container,
    .liste-produits-container {
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }

    /* ── FIX : bouton revendication responsive ── */
    .store-action-button {
        padding: 0 16px;
        margin-bottom: 10px;
    }

    .store-action-button button,
    .store-action-button .btn {
        width: 100%;
        box-sizing: border-box;
    }

    #claimTimer {
        text-align: center;
    }

    /* Zone de tap favoris suffisante */
    .commerce-wishlist button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    /* Icônes réseaux sociaux plus grandes */
    .commerce-réseaux img {
        width: 30px;
    }

    /* Titre commerce sans débordement */
    .description-container h1 {
        word-break: break-word;
    }
}


/*===========================================================CARTE INTERACTIVE*/

    .leaflet-popup.yuumi-popup {
        max-width: 380px !important;
    }

    .leaflet-popup-content-wrapper.yuumi-popup {
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .popup-content {
        display: block;
    }

    .popup-content a {
        text-decoration: none;
        color: #ff8b38;
        display: block;
    }

    .yuumi-popup-h3 {
        color: #ff8b38;
        font-size: 20px;
        text-align: center;
        margin: 0 0 6px;
    }

    .popup-content h3 span {
        color: #000;
        display: block;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
    }

    .parent-filter:hover {
        box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    }

    .parent-filter label {
        font-weight: 600;
        font-size: 1rem;
        color: #fff;
        cursor: pointer;
    }

    .toggle-children {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
        color: #ff8b38;
        transition: transform 0.3s ease;
    }

    .toggle-children.open {
        transform: rotate(90deg);
    }

    .child-buttons button.active {
        background: #ff8b38;
        color: #fff;
    }

	.carte-icones-img {
		position: absolute;
    	top: 7.5px;
    	left: 50%;
    	transform: translate(-50%, -25%);
    	width: 21px;
    	height: 21px;
    	object-fit: contain;
	}

/* ── FIX carte : filtres et boutons responsive ── */
@media (max-width: 767px) {
    #map {
        margin-top: 70px;
        width: 100%;
        height: 400px;
    }

    /* Boutons de catégorie : taille de texte réduite + padding compact */
    .child-buttons button {
        font-size: 12px;
        padding: 5px 10px;
        word-break: break-word;
        max-width: 100%;
    }

    .yuumi-popup-img {
        min-width: unset;
        width: 100%;
        max-height: 120px;
        object-fit: cover;
    }

    .yuumi-popup-h3 {
        font-size: 14px;
    }

    .leaflet-popup-content-wrapper {
        max-width: 180px !important;
    }

    .leaflet-popup-content {
        margin: 8px !important;
    }
}

/* =========================================================
   SEARCH PRODUCT — RESPONSIVE MOBILE
   ========================================================= */
@media (max-width: 767px) {
    #search-product-container {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 10px 0 0 0;
        background: transparent;
    }

    #search-product-input {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
    }

    #search-product-results {
        max-height: 35vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .search-product-store-container a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 4px;
        text-decoration: none;
        color: inherit;
    }
}

/* =========================================================
   CATEGORIES VILLES — FIX MASONRY
   ========================================================= */

.categ-ville-section {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
}

.categ-ville-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 28px;
    font-weight: 600;
}

.categ-ville-grid {
    column-count: 4;
    column-gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.categ-tile {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    break-inside: avoid;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.categ-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.23);
}

.categ-tile img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.categ-tile span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: #ffffff;
    border: 2px solid #ff8b38;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
}

/* ── FIX masonry : breakpoints sans trou ── */
@media (max-width: 767px) {
    .page-title-container { margin-top: 60px; }
}



@media (max-width: 900px) {
    .categ-ville-grid {
        column-count: 2;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .categ-ville-grid {
        column-count: 1;
        max-width: 100%;
    }
}


/* ── Leaflet : annuler les resets globaux ── */
.leaflet-container * {
    max-width: none;
    box-sizing: content-box;
}