/* ═══════════════════════════════════════════════════════════
   COMMERCIFY AD DETAILS - TYPOGRAPHY
   Police standard du design system (--cfy-font-family) sur tous les
   breakpoints ; tailles progressives mobile → tablette → desktop.
   ═══════════════════════════════════════════════════════════ */

/* ============================================================
   MOBILE (< 576px) — base légèrement agrandie par rapport au défaut
   ============================================================ */
.product-info .product-title,
.product-info h2.product-title {
    font-family: var(--cfy-font-family) !important;
    font-size: 2.1rem !important;
    font-weight: 600 !important;
    color: #B8860B !important;
    text-shadow: none !important;
}

.product-details.entry p {
    font-family: var(--cfy-font-family) !important;
    font-size: 1.3rem !important;
    font-weight: 400;
    line-height: 1.7 !important;
    color: #666 !important;
}

.product-details.entry .row.g-2 .d-flex.flex-column .mb-1,
.product-details.entry .row.g-2 .badge,
.product-details.entry ul.d-flex.flex-wrap.g-1 .badge,
.product-details.entry > ul.d-flex.flex-wrap.g-1 li .badge,
.product-details.entry ul.d-flex.flex-wrap.g-1 li .badge[style*="padding: 8px 16px"] {
    font-family: var(--cfy-font-family) !important;
    font-size: 1.15rem !important;
    font-weight: 500;
}

.product-details.entry h3.nk-block-title.page-title {
    font-family: var(--cfy-font-family) !important;
    font-size: 1.9rem !important;
    font-weight: 600;
}

.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li,
.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li span[style*="background: rgba(218,165,32,0.15)"],
.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=category"],
.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=scategory"],
.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=rayon"],
.product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=srayon"] {
    font-family: var(--cfy-font-family) !important;
    font-size: 1.35rem !important;
    font-weight: 500;
}

/* ============================================================
   TABLETTE (576px – 991.98px) — palier intermédiaire
   ============================================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
    .product-info .product-title,
    .product-info h2.product-title {
        font-size: 2.4rem !important;
    }

    .product-details.entry p {
        font-size: 1.5rem !important;
    }

    .product-details.entry .row.g-2 .d-flex.flex-column .mb-1,
    .product-details.entry .row.g-2 .badge,
    .product-details.entry ul.d-flex.flex-wrap.g-1 .badge,
    .product-details.entry > ul.d-flex.flex-wrap.g-1 li .badge,
    .product-details.entry ul.d-flex.flex-wrap.g-1 li .badge[style*="padding: 8px 16px"] {
        font-size: 1.3rem !important;
    }

    .product-details.entry h3.nk-block-title.page-title {
        font-size: 2.2rem !important;
    }

    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li,
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li span[style*="background: rgba(218,165,32,0.15)"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=category"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=scategory"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=rayon"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=srayon"] {
        font-size: 1.55rem !important;
    }
}

/* ============================================================
   DESKTOP (≥ 992px) — tailles maximales de la page de détail
   ============================================================ */
@media (min-width: 992px) {
    /* Cibler uniquement le titre dans product-info (page de détail), JAMAIS dans les vignettes */
    .product-info .product-title,
    .product-info h2.product-title {
        font-family: var(--cfy-font-family) !important;
        font-size: 3rem !important; /* ~48px - titre principal plus grand que les autres */
        font-weight: 600 !important;
        color: #B8860B !important;
        text-shadow: none !important;
    }

    .product-details.entry p {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.85rem !important; /* ~29.6px */
        font-weight: 400;
        line-height: 1.7 !important;
        color: #666 !important;
    }

    .product-details.entry .row.g-2 .d-flex.flex-column .mb-1 {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.5rem !important; /* ~24px */
        font-weight: 500;
        color: #666 !important;
    }

    .product-details.entry .row.g-2 .badge {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.5rem !important; /* ~24px */
        font-weight: 500;
    }

    .product-details.entry ul.d-flex.flex-wrap.g-1 .badge {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.4rem !important; /* ~22.4px */
        font-weight: 500;
    }

    /* Badge à fond sombre exclu au niveau du badge (et non de la liste par :has) : un :has() testant
       l'attribut style re-vérifie tout le document à chaque changement de style inline. */
    .product-details.entry ul.d-flex.flex-wrap.g-1 li .badge.badge:not([style*="background-color: #1f2937"]),
    .product-details.entry > ul.d-flex.flex-wrap.g-1 li .badge {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.5rem !important; /* ~24px */
        font-weight: 500;
    }

    .product-details.entry ul.d-flex.flex-wrap.g-1 li .badge[style*="padding: 8px 16px"] {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.5rem !important; /* ~24px */
        font-weight: 500;
    }

    /* Titres des sections (Description, Spécifications, Tags, Localité, Livraison, Infos) */
    .product-details.entry h3.nk-block-title.page-title {
        font-family: var(--cfy-font-family) !important;
    }

    .product-details.entry h3.nk-block-title.page-title[style*="font-size: 1.5rem"] {
        font-size: 2.7rem !important; /* ~43.2px - titre "Infos" */
        font-weight: 600;
    }

    .product-details.entry h3.nk-block-title.page-title:not([style*="font-size: 1.5rem"]) {
        font-size: 2.5rem !important; /* ~40px - autres titres de section */
        font-weight: 600;
    }

    /* Section Infos */
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.85rem !important; /* ~29.6px */
        font-weight: 400;
    }

    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li span[style*="background: rgba(218,165,32,0.15)"] {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.85rem !important; /* ~29.6px */
        font-weight: 500;
    }

    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=category"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=scategory"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=rayon"],
    .product-details.entry ul.list.list-sm.list-checked[style*="list-style: none"] li a[href*="catalog=srayon"] {
        font-family: var(--cfy-font-family) !important;
        font-size: 1.85rem !important; /* ~29.6px */
        font-weight: 500;
    }

    /* Suppression de l'effet de flou (desktop) */
    .price-details,
    .price-value,
    .price-currency {
        filter: none !important;
        -webkit-filter: none !important;
    }

    .product-details.entry .row.g-2 .badge {
        filter: none !important;
        -webkit-filter: none !important;
    }

    .product-details.entry ul.d-flex.flex-wrap.g-1 .badge {
        filter: none !important;
        -webkit-filter: none !important;
    }

    .product-details.entry ul.d-flex.flex-wrap.g-1 li .badge[style*="padding: 8px 16px"] {
        filter: none !important;
        -webkit-filter: none !important;
    }
}

/* ============================================================
   SUPPRESSION DE L'EFFET DE FLOU (TOUS ÉCRANS)
   ============================================================ */
.price-details,
.price-value,
.price-currency {
    filter: none !important;
    -webkit-filter: none !important;
}

.product-details.entry .row.g-2 .badge {
    filter: none !important;
    -webkit-filter: none !important;
}

.product-details.entry ul.d-flex.flex-wrap.g-1 .badge {
    filter: none !important;
    -webkit-filter: none !important;
}

.product-details.entry ul.d-flex.flex-wrap.g-1 li .badge[style*="padding: 8px 16px"] {
    filter: none !important;
    -webkit-filter: none !important;
}

.cfy-loc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 6 tuiles : 2 rangées de 3 */
    gap: 0.5rem;
    max-width: 1280px;
}



.cfy-loc-tile {
    position: relative;
    display: grid;
    grid-template-columns: var(--cfy-img-loc-w, 144px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0.65rem;
    align-items: start;
    min-width: 0;
    padding: 0.45rem;
    background: var(--cfy-t-surface-2);
    border: 1px solid var(--cfy-t-line);
    border-radius: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cfy-loc-tile:hover,
.cfy-loc-tile:focus-within {
    border-color: var(--cfy-t-accent);
    box-shadow: inset 0 -2px 0 var(--cfy-t-fill);
}

.cfy-loc-media {
    grid-row: 1 / 4;
    display: block;
    position: relative;
    width: var(--cfy-img-loc-w, 144px);
    height: var(--cfy-img-loc-h, 108px);
    overflow: hidden;
    background: var(--cfy-t-surface-3);
    border: 1px solid var(--cfy-t-line);
}

.cfy-loc-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Drapeau et carte de ville remplissent la tuile ; les mini-cartes hpgeo (silhouette sur fond
   transparent) restent entières. */
.cfy-loc-img--flag,
.cfy-loc-img--map {
    object-fit: cover;
}

.cfy-loc-tile:hover .cfy-loc-img {
    transform: scale(1.05);
}

/* Placeholder (pas d'image générée) : ni zoom ni plein cadre, présence atténuée. */
.cfy-loc-media--placeholder .cfy-loc-img {
    object-fit: contain;
    padding: 0.25rem;
    opacity: 0.85;
}

.cfy-loc-tile:hover .cfy-loc-media--placeholder .cfy-loc-img {
    transform: none;
}

.cfy-loc-level {
    display: block;
    font-size: var(--cfy-fs-caption);
    font-weight: var(--cfy-fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfy-t-muted);
}

.cfy-loc-name {
    display: block;
    font-size: var(--cfy-fs-base);
    font-weight: var(--cfy-fw-semibold);
    line-height: 1.3;
    color: var(--cfy-t-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Pays : drapeau sur la ligne du nom */
.cfy-loc-name--flag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Infos : langue de l'annonce avec son drapeau et son code */
.cfy-ad-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cfy-ad-lang-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cfy-ad-lang-link:hover,
.cfy-ad-lang-link:focus-visible {
    opacity: 0.8;
}

.cfy-lang-code {
    font-weight: var(--cfy-fw-semibold);
}

/* Toute la tuile est cliquable (lien étiré) */
a.cfy-loc-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

a.cfy-loc-name:hover,
a.cfy-loc-name:focus-visible,
.cfy-loc-tile:hover a.cfy-loc-name {
    color: var(--cfy-t-accent);
}

a.cfy-loc-name:focus-visible {
    outline: none;
}

.cfy-loc-code {
    display: block;
    font-size: var(--cfy-fs-caption);
    font-weight: var(--cfy-fw-regular);
    color: var(--cfy-t-muted);
}

/* Code postal : lien propre, au-dessus du lien étiré de la tuile */
.cfy-loc-sublink {
    position: relative;
    z-index: 1;
    color: var(--cfy-t-accent);
    text-decoration: none;
}

.cfy-loc-sublink:hover,
.cfy-loc-sublink:focus-visible {
    text-decoration: underline;
}

@media (max-width: 1199.98px) {
    .cfy-loc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    /* 2 colonnes, image au-dessus du texte : 4 rangées au lieu de 7 */
    .cfy-loc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }
    .cfy-loc-tile {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        align-content: start;
        row-gap: 0.3rem;
        justify-items: center;
        text-align: center;
    }
    .cfy-loc-media {
        grid-row: auto;
    }
    .cfy-loc-name--flag {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   ALIGNEMENT BLOC IMAGE / GALERIE - PAGE DÉTAIL ANNONCE (Publisher AD Index)
   Aligner le bord du bloc image avec le bord des boutons (bookmark, etc.)
   et avec le bloc description/spécifications — LTR: gauche, RTL: droite (côté menu).
   On ne touche pas aux boutons ; seul le bloc .product-gallery est ramené au bord.
   ═══════════════════════════════════════════════════════════ */
.publisher-ad-action-buttons ~ .product-gallery {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION INFOS - PAGE DÉTAIL ANNONCE (Publisher AD Index)
   Boutons copier-lien (Slug/Slup), badges catalogue dynamiques, et lien
   sous-catégorie/sous-rayon démarqué par un soulignement (navigation à 2 niveaux :
   catalog=category|rayon = niveau parent, catalog=scategory|srayon = sous-niveau).
   ═══════════════════════════════════════════════════════════ */
.cfy-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0; /* charte : angles droits partout */
    border: 1px solid rgba(218, 165, 32, 0.4);
    background: rgba(218, 165, 32, 0.12);
    color: #DAA520;
    font-family: var(--cfy-font-family);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.cfy-copy-btn svg {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
}

.cfy-copy-btn:hover:not(:disabled),
.cfy-copy-btn:focus-visible:not(:disabled) {
    background: #DAA520;
    color: #1a1a1a;
    border-color: #DAA520;
    transform: translateY(-1px);
}

.cfy-copy-btn:active:not(:disabled) {
    transform: translateY(0);
}

.cfy-copy-btn.cfy-copy-btn-done {
    background: #2f9e44;
    color: #fff;
    border-color: #2f9e44;
}

/* Bouton Slup : reste pleinement actif visuellement (même style que Slug) — le clic est
   neutralisé côté JS (pas d'attribut "disabled"/grisé), avec un état transitoire distinct
   du succès "Copié !" pour ne pas mentir sur ce qui vient de se passer. */
.cfy-copy-btn.cfy-copy-btn-neutralized {
    background: #B8860B;
    color: #1a1a1a;
    border-color: #B8860B;
}

.cfy-copy-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    background: rgba(120, 120, 120, 0.12);
    color: #888;
    border-color: rgba(120, 120, 120, 0.3);
}

.cfy-infos-sublink {
    text-decoration: underline;
    text-decoration-color: rgba(218, 165, 32, 0.6);
    text-underline-offset: 3px;
}

/* Même style de caractères/couleurs que les autres valeurs de la liste Infos
   (Slug, Date, Vues, Qty, Devise...) — pas le badge sombre des Tags/Specs. */
.cfy-infos-catalog-badge {
    display: inline-block;
    background: rgba(218, 165, 32, 0.15);
    color: #DAA520;
    padding: 0.3rem 0.8rem;
    border-radius: 0;
    font-size: 0.9rem;
    margin: 2px 4px 2px 0;
}

.cfy-infos-catalog-badge-empty {
    color: #888;
    background: rgba(136, 136, 136, 0.12);
}

@media (max-width: 400px) {
    .cfy-copy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Bouton "Voir le catalogue public" sous le compteur d'annonces du bloc "Les autres
   annonces de @éditeur" — même langage visuel que .cfy-copy-btn (angles droits,
   accent doré), classe séparée car sémantiquement un lien de navigation, pas une
   action de copie. */
.cfy-catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 0;
    border: 1px solid rgba(218, 165, 32, 0.4);
    background: rgba(218, 165, 32, 0.12);
    color: #DAA520;
    font-family: var(--cfy-font-family);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cfy-catalog-btn svg {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
}

.cfy-catalog-btn:hover,
.cfy-catalog-btn:focus-visible {
    background: #DAA520;
    color: #1a1a1a;
    border-color: #DAA520;
    transform: translateY(-1px);
}