/**
 * Theme Name: Millie en ville
 * Description: Blocksy Child theme
 * Author: Studio CAD
 * Template: blocksy
 * Text Domain: blocksy
 */

body, h1, h2, h3, h4, h5, h6, label, figcaption, blockquote, blockquote p, .menu a, .site-title, .entry-meta, .mobile-menu, .widget-title, .ct-post-title, .ct-breadcrumbs, .ct-header-text, .site-description, .page-description, .ct-footer-copyright, .ct-widget>*:not(.widget-title){
	/*color: var(--theme-palette-color-1);*/
}


/* =========================================
   MISE EN PAGE GLOBALE (2/3 Carte, 1/3 Liste)
   ========================================= */

.store-locator-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* --- LA CARTE (2/3) --- */
.acf-map {
    /* flex: grow shrink basis. On utilise calc() pour soustraire la moitié du gap */
    flex: 1 1 calc(65% - 15px); 
    height: 600px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0; 
}

/* --- LA LISTE (1/3 avec Scroll) --- */
.store-list {
    flex: 1 1 calc(35% - 15px); 
    height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 15px;
}

/* --- DESIGN DE LA BARRE DE SCROLL --- */
.store-list::-webkit-scrollbar {
    width: 6px;
}
.store-list::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}
.store-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.store-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================
   LISTE DES BOUTIQUES (Structure Flexbox)
   ========================================= */

.store-item {
    display: flex;
	align-items:flex-start;
	flex-direction:column;
    padding: 20px;
    border: 1px solid var(--theme-palette-color-6);
    border-radius: 20px;
    background-color: var(--theme-palette-color-8);
	cursor:pointer;
}

.store_logo {
    width: auto;
    height: 80px;
    object-fit: contain; 
    border-radius: 4px;
}


/* --- Lignes de contact (Adresse et Téléphone) --- */
.store-item .adresse,
.store-item .desc-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    font-size: 16px;
}
.store-item .adresse p,
.store-item .desc-contact a{
	color : var(--theme-palette-color-3);
	transition: all 0.2s ease;
	margin-bottom:0;
}

.store-item .desc-contact a:hover, .store-item .adresse p:hover {
	color : var(--theme-palette-color-9);
}

.store-item .adresse i,
.store-item .desc-contact i {
    color: var(--theme-palette-color-9);
    font-size: 16px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* --- La bulle "Copié !" --- */
.store-item .adresse {
	position: relative;
}
.copy-feedback {
    position: absolute;
    bottom: 120%; /* Place la bulle juste au-dessus du texte */
    left: 25px; /* Aligne la bulle après l'icône */
    background-color: #10b981; /* Vert succès */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.copy-feedback::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: #10b981 transparent transparent transparent;
}

.copy-feedback.show {
    opacity: 1 !important;
    transform: translateY(0);
}


.store-item .store-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background-color: var(--theme-palette-color-9);
    color:var(--theme-palette-color-8);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.store-item .store-link:hover {
    background-color: var(--theme-palette-color-3);
}


.badge-horaires {
    display: inline-block; 
    background-color: rgba(255, 65, 93, 0.05); 
    color: var(--theme-palette-color-9); 
    padding: 6px 14px;
    border-radius: 20px; 
    border: 1px solid var(--theme-palette-color-9); 
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.badge-horaires p {
    margin: 0;
}

.store-item.active {
    border-color: var(--theme-palette-color-3); 
    border: 3px solid var(--theme-palette-color-3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 
	padding:18px;
}

/* style du logo sur la carte */
.custom-logo-marker {
    transform: translate(-50%, -50%); 
}
.custom-logo-marker img {
    width: 50px;
    height: 50px;
    
    border-radius: 50%; 
    object-fit: cover; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 
    transition: transform 0.2s ease; 
    cursor: pointer;
}



/* =========================================
  	Tableau guide des tailles
   ========================================= */ 
.tableau_guide_taille tbody tr td {
    border-bottom: 1px solid var(--theme-palette-color-3) !important;
}

 .tableau_guide_taille tbody tr td:first-child{
	background-color: #F2F5F7 !important;
}

.tableau_guide_taille tbody tr td, .tableau_guide_taille thead tr th {
	padding: 16px !important;
}

.tableau_guide_taille thead tr {
	background-color:var(--theme-palette-color-3);
	color:white;
}

.wp-block-table table:not(.has-border-color) th, .wp-block-table table:not(.has-border-color) td {
	border-color : transparent !important;
}

#ct-size-guide-modal .ct-panel-inner {
	align-self:flex-end;
	transform:translate3d(var(--theme-panel-reveal-right,0), 0, 0);
}



/* =========================================
  	Page retours
   ========================================= */ 
.etape-retour {
	padding
}

.etape-retour>.stk-inner-blocks {
	grid-template-columns: var(--line-dot-size,16px) 1fr;
	column-gap : 50px;
	align-items:flex-start;
}

.etape-retour .stk-block-timeline__date {
	display:none;
}


.etape-retour>.stk-inner-blocks:after {
	inset-inline-start : 50px;
}

/* Le conteneur qui englobe tous les .etape-retour */
.conteneur {
  counter-reset: timeline;
}

/* On incrémente sur chaque .etape-retour */
.etape-retour {
  counter-increment: timeline;
}

/* Le ::before s'applique sur le .stk-block-timeline__middle à l'intérieur */
.etape-retour .stk-block-timeline__middle::before {
	content: counter(timeline);
	position: absolute;
	z-index:2;
	top:50%;
	left:50%;
	transform:translatex(-50%) translatey(-50%);
	font-size: 46px;
	line-height: 1;
	color: white;
	font-weight: bold;	
}

.etape-retour .stk-block-timeline__middle:after {
	display:none;
}
.etape-retour>.stk-inner-blocks:after {
	z-index:1;
}


/* =========================================
  	Page single article
   ========================================= */ 

.single-post .entry-content {
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
}
.single-post .entry-content > * {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================
  	Page accueil section box + icon
   ========================================= */ 
.points-forts .stk--has-background-overlay:before {
	border-radius:20px;
}
.loupe {
	transform:scale(0);
}



/* =========================================
  	Bouton video produit
   ========================================= */ 
.video-open-button {
    position: absolute;
    z-index: 9;
    top: 20px;
    inset-inline-end: 80px;
    width: auto;
    height: 40px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2872fa;
    color: #ffffff;
    font-size: 18px;
	padding:8px 12px;
	gap:8px;
}



/* -----------------------------------------
   RESPONSIVE (Tablettes & Mobiles)
   ----------------------------------------- */
@media (min-width: 1025px) {
	.hide-for-desktop {
		display:none !important;
	}
}
@media (max-width: 992px) {
	.store-item {
		align-items:flex-start;
		text-align:left;
	}
	.store-locator-container {
        flex-direction: column;
        gap: 20px;
    }

    .acf-map, .store-list {
        flex: none; 
        width: 100%;
    }

    .acf-map {
        height: 300px; 
    }

    .store-list {
        height: auto; 
        max-height: 500px; 
        padding-right: 5px;
    }
}

@media (min-width: 689.99px) and (max-width: 1024px){
	.points-forts .stk-animate {
		transform:none;
	}
	.hide-for-tablet{
		display: none;
	}
}

@media (min-width: 689.99px) and (max-width: 960px){
	
	
}

@media (max-width: 768px){
 
}


@media (min-width: 768px) and (max-width: 1024px){

	
}
@media (max-width: 689.98px){
	.points-forts .stk-animate {
		transform:none;
	}
	.hide-for-mobile{
		display: none;
	}
	
}