:root,
html:not(.phcla-dark-mode) {
    --phcla-bg: #f0f0f1;
    --phcla-bg-card: #ffffff;
    --phcla-bg-header: #ffffff;
    --phcla-bg-secondary: #e9e9ea;
    --phcla-text: #1d2327;
    --phcla-text-secondary: #50575e;
    --phcla-border: #dcdcde;
    --phcla-primary: #2ecc71;
    --phcla-primary-dark: #27ae60;
    --phcla-shadow: rgba(0, 0, 0, 0.08);
}
html.phcla-dark-mode {
    --phcla-bg: #1e1e1e;
    --phcla-bg-card: #2c2c2c;
    --phcla-bg-header: #2c2c2c;
    --phcla-bg-secondary: #3a3a3a;
    --phcla-text: #f0f0f1;
    --phcla-text-secondary: #a7aaaf;
    --phcla-border: #444444;
    --phcla-primary: #2ecc71;
    --phcla-primary-dark: #27ae60;
    --phcla-shadow: rgba(0, 0, 0, 0.4);
}
.phcla-catalog-wrapper * {
    box-sizing: border-box;
}
.phcla-catalog-wrapper {
    background-color: var(--phcla-bg);
    color: var(--phcla-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}
.phcla-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    gap: 24px;
}
.phcla-sidebar {
    flex: 0 0 250px;
}
.phcla-main-content {
    flex: 1;
}
.phcla-header {
    background-color: var(--phcla-primary);
    padding: 16px 24px;
    border-bottom: 1px solid var(--phcla-primary-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
}

/* On s'assure que le contenu reste centré */
.phcla-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
}
.phcla-header .phcla-logo {
    color: #000000;
    font-weight: bold;
    font-size: 20px;
}
/* On adapte le style du champ de recherche pour le fond vert */
.phcla-header .phcla-search-input {
    background-color: rgba(255, 255, 255, 0.2); /* Fond blanc semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; /* Texte blanc */
}

.phcla-header .phcla-search-input::placeholder {
    color: rgba(255, 255, 255, 0.8); /* Placeholder légèrement plus clair */
}
/* On adapte le bouton de changement de thème */
.phcla-header .phcla-theme-toggle {
    background-color: transparent; /* Fond transparent */
    border-color: rgba(255, 255, 255, 0.5); /* Bordure blanche semi-transparente */
}

.phcla-header .phcla-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Effet de survol subtil */
}

/* Les icônes du bouton de thème doivent être blanches */
.phcla-header .phcla-theme-toggle svg {
    color: #fff;
}
.phcla-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 20px;
    color: var(--phcla-text);
}
.phcla-logo-desktop { height: 40px; width: auto; display: block; }
.phcla-logo-mobile { height: 32px; width: auto; display: none; }
.phcla-header-controls { display: flex; align-items: center; gap: 16px; }
.phcla-search-container { width: 250px; position: relative; }
.phcla-search-input {
    width: 100%; padding: 10px; border-radius: 8px;
    border: 1px solid var(--phcla-border);
    background-color: var(--phcla-bg);
    color: var(--phcla-text);
    transition: background-color 250ms, border-color 250ms, color 250ms;
}
.phcla-search-input::placeholder { color: var(--phcla-text-secondary); }
.phcla-filter-group {
    background-color: var(--phcla-bg-card);
    padding: 16px;
    border-radius: 8px;
    transition: background-color 250ms;
    overflow: hidden; 
}
.phcla-filter-title {
    background-color: var(--phcla-primary); 
    color: #fff;
    font-size: 16px; font-weight: 600; text-align: center;
    padding: 10px; margin: -16px -16px 16px -16px;
    border-radius: 8px 8px 0 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
html.phcla-dark-mode .phcla-filter-title {
    background-color: var(--phcla-primary-dark);
    color: var(--phcla-text); 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.phcla-filter-list { list-style: none; padding: 0; margin: 0; }
.phcla-filter-list li { margin-bottom: 8px; }
.phcla-filter-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.phcla-category-count { color: var(--phcla-text-secondary); font-size: 12px; }
.phcla-results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: var(--phcla-text-secondary); }
.phcla-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.phcla-product-card {
    background-color: var(--phcla-bg-card);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--phcla-shadow);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease-in-out;
}
.phcla-product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.phcla-card-header, .phcla-card-body, .phcla-card-footer { padding: 16px; }
.phcla-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.phcla-card-body { flex-grow: 1; }
.phcla-product-name { font-size: 18px; margin: 0 0 8px 0; color: var(--phcla-text); }
.phcla-product-description { font-size: 14px; color: var(--phcla-text-secondary); margin: 0 0 16px 0; line-height: 1.5; }
.phcla-product-meta { display: flex; justify-content: space-between; align-items: center; }
.phcla-product-price { font-size: 18px; font-weight: bold; color: var(--phcla-primary); }
.phcla-product-location-wrapper { display: flex; flex-direction: column; align-items: flex-start; }
.phcla-product-location { font-size: 12px; color: var(--phcla-text-secondary); }
.phcla-location-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--phcla-primary-dark); text-decoration: none; margin-top: 4px; opacity: 0.8; transition: opacity 0.2s; }
.phcla-location-link:hover { text-decoration: underline; opacity: 1; }
.phcla-location-icon { flex-shrink: 0; }
.phcla-badge-category { background-color: var(--phcla-bg); color: var(--phcla-text-secondary); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.phcla-card-badges { display: flex; gap: 8px; }
.phcla-badge-ordonnance, .phcla-badge-mutuelle { font-size: 11px; padding: 4px 8px; border-radius: 12px; color: white; }
.phcla-badge-ordonnance { background-color: #e74c3c; }
.phcla-badge-mutuelle { background-color: #3498db; }
.phcla-btn { padding: 10px; border-radius: 8px; text-align: center; text-decoration: none; font-weight: bold; transition: background-color 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.phcla-btn-primary { background-color: var(--phcla-primary); color: white; }
.phcla-btn-primary:hover { background-color: var(--phcla-primary-dark); }
.phcla-btn-secondary { background-color: var(--phcla-bg-secondary); color: var(--phcla-text); border: 1px solid var(--phcla-border); }
.phcla-btn-secondary:hover { background-color: var(--phcla-border); }
.phcla-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/*
 * [CORRECTION DÉFINITIVE]
 * Règle unique et consolidée pour le footer de la carte produit.
 * Supprime toute ambiguïté et garantit une grille à 3 colonnes.
*/
.phcla-card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr auto; 
    gap: 8px;
    border-top: 1px solid var(--phcla-border);
    transition: border-color 250ms;
    align-items: center; 
}

.phcla-share-container {
    position: relative;
    display: flex;
    justify-content: center;
}
.phcla-share-btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--phcla-border);
    background-color: var(--phcla-bg-secondary);
    color: var(--phcla-text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.phcla-share-btn:hover {
    background-color: var(--phcla-border);
    color: var(--phcla-text);
}

/*
 * [CORRECTION DÉFINITIVE]
 * Positionnement robuste du menu de partage pour mobile et desktop.
*/
.phcla-share-menu {
    position: absolute;
    bottom: 100%; 
    right: 0;
    transform: translateY(0); 
    display: flex;
    gap: 8px;
    background-color: var(--phcla-bg-card);
    padding: 8px;
    border-radius: 50px; 
    box-shadow: 0 4px 12px var(--phcla-shadow);
    border: 1px solid var(--phcla-border);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
    min-width: 180px; 
    justify-content: center;
}
.phcla-share-container.active .phcla-share-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(-10px);
}

.phcla-share-link {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-block; background-size: 20px;
    background-position: center; background-repeat: no-repeat;
    transition: transform 0.2s; border: none; cursor: pointer;
}
.phcla-share-link:hover { transform: scale(1.1); }
.phcla-share-whatsapp { background-color: #25D366; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.894 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.433-9.89-9.889-9.89-5.452 0-9.887 4.434-9.889 9.891.001 2.23 1.056 3.987 1.838 5.611l.002.002-1.072 3.932 4.036-1.052.002.002zm5.72-6.575c-.225-.113-1.328-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.242-1.554s-.012-.354.1-.464c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a.97.97 0 0 0-.465-.006s-.42.056-.618.305c-.198.249-.76.729-.76 1.771s.78 2.051.889 2.199c.112.148 1.582 2.415 3.832 3.387.535.231.954.368 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.328-.542 1.518-1.066.19-.524.19-1.043.13-1.141-.058-.098-.19-.146-.412-.259z"/></svg>'); }
.phcla-share-facebook { background-color: #1877F2; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-1.5c-1 0-1 .5-1 1v2h2.5l-.5 3h-2v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>'); }
.phcla-share-twitter { background-color: #1DA1F2; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13a4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.333.57-.523 1.24-.523 1.954 0 1.616.823 3.043 2.072 3.878a4.63 4.63 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.738 4.566c-.69.186-1.42.224-2.164.085a4.66 4.66 0 0 0 4.35 3.234 9.348 9.348 0 0 1-5.786 1.995c-.376 0-.747-.022-1.112-.065a13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.45 9.45 0 0 0 2.323-2.41z"/></svg>'); }
.phcla-share-copy { background-color: #6c757d; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>'); }

.phcla-theme-toggle {
    width: 40px; height: 40px; border: none; background-color: var(--phcla-bg);
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 200ms; flex-shrink: 0; border: 1px solid var(--phcla-border);
}
.phcla-theme-toggle:hover { background-color: var(--phcla-bg-secondary); transform: scale(1.1) rotate(15deg); }
.phcla-theme-toggle svg { color: var(--phcla-text); }
.phcla-icon-moon { display: none; }
html.phcla-dark-mode .phcla-icon-sun { display: none; }
html.phcla-dark-mode .phcla-icon-moon { display: block; }

@media (max-width: 1023px) {
    .phcla-product-grid { grid-template-columns: repeat(2, 1fr); }
    .phcla-sidebar { display: none; }
}
@media (max-width: 767px) {
    .phcla-header-content { flex-direction: column; gap: 12px; }
    .phcla-search-input { width: 100%; }
    .phcla-container { flex-direction: column; }
    .phcla-sidebar { flex-basis: auto; width: 100%; }
    .phcla-product-grid { grid-template-columns: 1fr; }
    .phcla-logo-desktop { display: none; }
    .phcla-logo-mobile { display: block; }
    .phcla-logo { font-size: 18px; }
    .phcla-header-controls { width: 100%; gap: 12px; }
    .phcla-header-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .phcla-search-container {
        width: 100%;
        max-width: none;
        flex-grow: 1;
    }
}