/* ==========================================================================
   MarcheGros — Supplier Detail (Desktop V2)

   Same brand system as the geographic directory: pure white + near-black +
   the site's brand green + neutral grays. Big whitespace, hairline rules
   instead of shadows, no gradients, no blue CTA, no badges beyond the one
   ownership line.

   Like geo-directory.css this file keeps its own --sp-* palette: the active
   site theme is `french_blue_mint`, which paints a blue-grey page and a blue
   primary button, while the supplier profile is specified as white/black.
   The single accent is NOT reinvented here — it is read from --mg-accent, so
   the profile carries the same green as the rest of the public site (today
   #35B77A) and follows it if the theme is changed. Only the accent is shared;
   the page ground stays white.

   The shell width is intentionally the SAME as the geo directory
   (--geo-shell: 1180px) so no public page introduces a third content width.
   ========================================================================== */

:root {
    --sp-white: #ffffff;
    --sp-ink: #171717;
    /* Link / text accent: the brand green (--mg-secondary). Buttons are black
       with lime text instead (see .sp-btn / .spv3-btn). The literal is only a fallback for the
       (unexpected) case where the layout's theme tokens are absent. */
    --sp-accent: var(--mg-secondary, #2d6a4f);
    /* Flat hover tone — never a gradient. A shade of that same accent, mixed
       with the page's own ink, so no second green enters the system. */
    --sp-accent-deep: color-mix(in srgb, var(--sp-accent) 85%, var(--sp-ink));

    --sp-muted: #6b6b6b;
    --sp-faint: #9a9a9a;
    --sp-line: #e8e8e6;
    --sp-wash: #fafafa;

    /* 1220px: inside the 1180–1240px desktop composition band, and still a
       single shared shell width with the geo directory. */
    --sp-shell: 1220px;
}

/* Keep the page pure white even though the site shell tints the body
   blue-grey. Scoped to pages that actually contain a .sp-shell. */
html:has(.sp-shell),
body:has(.sp-shell) {
    background: var(--sp-white);
}

.sp-shell {
    max-width: var(--sp-shell);
    margin: 0 auto;
    /* Mobile-first rhythm: 20px at 390px (unchanged so Mobile V2 is not
       regressed), widening on larger screens. */
    padding: 1.75rem 1.25rem 4rem;
    background: var(--sp-white);
    color: var(--sp-ink);
}

@media (min-width: 768px) {
    .sp-shell {
        padding: 2.5rem 1.5rem 6rem;
    }
}

/* --------------------------------------------------------------------------
   Breadcrumbs — same treatment as the geo directory
   -------------------------------------------------------------------------- */

.sp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 2.25rem;
    font-size: 0.75rem;
    color: var(--sp-faint);
}

.sp-crumbs a {
    color: var(--sp-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.sp-crumbs a:hover {
    color: var(--sp-accent);
    border-bottom-color: var(--sp-accent);
}

.sp-crumbs [aria-current="page"] {
    color: var(--sp-ink);
}

/* --------------------------------------------------------------------------
   Identity
   -------------------------------------------------------------------------- */

.sp-eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sp-accent);
}

.sp-eyebrow-muted {
    color: var(--sp-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.sp-h1 {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sp-ink);
}

.sp-sub {
    margin: 0.65rem 0 0;
    font-size: 1.0625rem;
    color: var(--sp-muted);
}

.sp-legal {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--sp-faint);
}

/* Referenced / claimed — one line, black text, a hairline rule. It states a
   fact about the record (built from the public registry vs claimed by its
   owner); it is deliberately not a coloured pill. */
.sp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    border-left: 2px solid var(--sp-line);
    padding-left: 0.75rem;
    font-size: 0.875rem;
    color: var(--sp-muted);
}

.sp-status svg {
    flex: 0 0 auto;
    color: var(--sp-muted);
}

/* Pageview V1. A plain total — no icon, no live dot, no trend arrow, no
   animation. Rendered only once the count reaches
   App\Services\SupplierPageViewService::MIN_DISPLAYED. */
.sp-chip {
    display: inline-flex;
    align-items: center;
    margin-top: 0.85rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    color: var(--sp-muted);
    font-variant-numeric: tabular-nums;
}

.sp-lede {
    margin: 2rem 0 0;
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--sp-ink);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sp-section {
    margin-top: 3.5rem;
    border-top: 1px solid var(--sp-line);
    padding-top: 2rem;
}

@media (min-width: 1024px) {
    .sp-section {
        margin-top: 4.5rem;
        padding-top: 2.25rem;
    }
}

.sp-h2 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-ink);
}

/* Content 2/3 + locator 1/3 on desktop. Single column on tablet/mobile, where
   the map then takes full width at a restrained height. */
.sp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .sp-split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* --------------------------------------------------------------------------
   Address
   -------------------------------------------------------------------------- */

.sp-address {
    margin: 1.25rem 0 0;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sp-ink);
}

.sp-address-line {
    display: block;
}

.sp-facts {
    margin: 1.25rem 0 0;
}

.sp-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--sp-line);
    font-size: 0.9375rem;
}

.sp-fact dt {
    color: var(--sp-muted);
}

.sp-fact dd {
    margin: 0;
    text-align: right;
    color: var(--sp-ink);
}

.sp-fact a {
    color: var(--sp-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sp-line);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.sp-fact a:hover {
    color: var(--sp-accent);
    border-bottom-color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   Map — a locator, never half the page
   -------------------------------------------------------------------------- */

.sp-map {
    margin-top: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 2px;
}

.sp-map iframe {
    display: block;
    width: 100%;
    /* Restrained: 220px on mobile (full width), 260px in the 1/3 desktop
       column. The old full-bleed h-80 block took over the page. */
    height: 220px;
}

@media (min-width: 1024px) {
    .sp-map iframe {
        height: 260px;
    }
}

.sp-note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sp-faint);
}

/* Small vertical offset for notes that follow a block rather than a map. */
.sp-mt {
    margin-top: 1rem;
}

/* Real cover photo only — never used as a placeholder surface. */
.sp-cover {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border: 1px solid var(--sp-line);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Editorial rows — nearby suppliers. Hairlines, not a card grid.
   -------------------------------------------------------------------------- */

.sp-rows {
    margin-top: 1.25rem;
    border-top: 1px solid var(--sp-line);
}

@media (min-width: 768px) {
    .sp-rows {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}

.sp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--sp-line);
    text-decoration: none;
    color: var(--sp-ink);
    transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.sp-row:hover,
.sp-row:focus-visible {
    background: var(--sp-wash);
    padding-left: 0.6rem;
    outline: none;
}

.sp-row-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sp-ink);
    transition: color 0.18s ease;
}

.sp-row:hover .sp-row-name,
.sp-row:focus-visible .sp-row-name {
    color: var(--sp-accent);
}

.sp-row-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sp-muted);
}

.sp-row-arrow {
    font-size: 0.875rem;
    color: var(--sp-accent);
    transition: transform 0.18s ease;
}

.sp-row:hover .sp-row-arrow,
.sp-row:focus-visible .sp-row-arrow {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mg-accent, #c8f24a);
    background: var(--sp-ink);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.sp-btn:hover {
    background: #23261f;
}

.sp-btn-ghost {
    background: transparent;
    color: var(--sp-ink);
    border: 1px solid var(--sp-ink);
}

.sp-btn-ghost:hover {
    color: var(--sp-accent);
    border-color: var(--sp-accent);
    background: transparent;
}

.sp-link {
    color: var(--sp-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease;
}

.sp-link:hover {
    border-bottom-color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   Claim invitation — the quiet closing block on an unclaimed record.
   No urgency, no countdown, no invented buyer demand.
   -------------------------------------------------------------------------- */

.sp-claim {
    margin-top: 4rem;
    border-top: 1px solid var(--sp-line);
    padding-top: 2.25rem;
}

.sp-claim-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sp-ink);
}

.sp-claim-copy {
    margin: 0.6rem 0 0;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sp-muted);
}

.sp-claim .sp-btn {
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Claimed profile — logo, description, specialties
   -------------------------------------------------------------------------- */

.sp-identity {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.sp-logo {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 2px;
    object-fit: contain;
    background: var(--sp-white);
}

.sp-desc {
    margin: 0;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sp-muted);
    white-space: pre-line;
}

.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.sp-chip-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8125rem;
    color: var(--sp-muted);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.sp-chip-link:hover {
    color: var(--sp-accent);
    border-color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   Products — real rows only. Scoped overrides normalise the shared
   <x-product-card> component (which carries its own theme tokens) so a
   product card cannot reintroduce blue accents inside this page.
   -------------------------------------------------------------------------- */

.sp-products {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 1024px) {
    .sp-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* Specificity note: the component is styled with single Tailwind utility
   classes (0,1,0). The scoped selectors below are (0,2,1)+ so the blue-ish
   theme tokens inside the card lose to these rules — a product card cannot
   reintroduce a blue accent on a white page with a green accent. */
.sp-products a {
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.18s ease;
}

.sp-products a:hover {
    border-color: var(--sp-accent);
}

.sp-products [class*="aspect-"] {
    background: var(--sp-wash);
}

.sp-products span,
.sp-products p {
    color: var(--sp-ink);
}

/* "Voir le produit →" — the link affordance carries the brand colour. */
.sp-products a > div + div > span {
    color: var(--sp-accent);
}

.sp-empty {
    margin-top: 1.25rem;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sp-muted);
}

.sp-empty strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sp-ink);
}

/* --------------------------------------------------------------------------
   Motion — honour the OS preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sp-row,
    .sp-row-arrow,
    .sp-row-name,
    .sp-btn,
    .sp-crumbs a,
    .sp-chip-link,
    .sp-fact a,
    .sp-products a {
        transition: none !important;
    }

    .sp-row:hover,
    .sp-row:focus-visible {
        padding-left: 0.25rem;
    }

    .sp-row:hover .sp-row-arrow,
    .sp-row:focus-visible .sp-row-arrow {
        transform: none;
    }
}

/* ==========================================================================
   Desktop V3 — Supplier profile (claimed / full profile)

   A full recomposition of the CLAIMED page only. The V2 atoms above are still
   used by parts/referenced.blade.php and are left untouched so the unclaimed
   layout keeps rendering until it is redesigned in its own pass.

   Design system: white ground, warm near-black ink, warm neutral grays, one
   brand accent — the site's own green (--mg-accent, #35B77A today), not a
   supplier-specific orange — reserved for the primary action. Hairlines
   instead of shadows, spacing instead of boxes, one warm wash surface for the
   hero panel. No gradient, no blue, no rounded card wall, no full-width rules
   cutting the page into strips.

   Composition: hero 65/35, body 70/30, both real desktop grids — the content
   no longer sits in a narrow left column with dead space on the right.
   ========================================================================== */

.spv3 {
    /* Warm neutrals: the page must read as paper/editorial, not as a blue-grey
       software surface. */
    --v3-ink: #17150f;
    --v3-ink-soft: #3c382f;
    --v3-muted: #6e685f;
    --v3-faint: #9c958a;
    --v3-line: #e7e2d9;
    --v3-line-strong: #d8d2c6;
    --v3-wash: #faf8f4;
    /* Same brand green as the V2 half of this file and as the rest of the
       public site — one accent, one source (see --sp-accent above). */
    --v3-accent: var(--sp-accent, #35b77a);
    --v3-accent-deep: color-mix(in srgb, var(--v3-accent) 85%, var(--v3-ink));

    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   01 — HERO
   -------------------------------------------------------------------------- */

.spv3-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .spv3-hero {
        /* ~65 / ~35 inside a 1220px shell */
        grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

.spv3-logo {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 0 1.4rem;
    padding: 0.5rem;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--v3-line);
    border-radius: 4px;
}

.spv3-eyebrow {
    margin: 0 0 1.1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v3-accent);
}

.spv3-h1 {
    margin: 0;
    font-size: clamp(2.25rem, 4.1vw, 3.375rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--v3-ink);
}

.spv3-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    font-size: 0.9375rem;
    color: var(--v3-muted);
}

.spv3-meta-sep {
    color: var(--v3-line-strong);
}

/* Ownership line: near-black dot, no pill, no colour. Claimed is a statement
   about who edits the record — it must never borrow the visual language of
   verification. */
.spv3-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.15rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--v3-ink);
}

.spv3-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--v3-ink);
}

.spv3-lead {
    margin: 1.35rem 0 0;
    max-width: 36rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--v3-ink-soft);
}

.spv3-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Buttons — one brand-green primary, everything else recedes
   -------------------------------------------------------------------------- */

.spv3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mg-accent, #c8f24a);
    background: var(--v3-ink);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.spv3-btn:hover {
    background: #23261f;
    color: var(--mg-accent, #c8f24a);
}

.spv3-btn--ghost {
    background: #ffffff;
    color: var(--v3-ink);
    border: 1px solid var(--v3-line-strong);
}

.spv3-btn--ghost:hover {
    background: #ffffff;
    color: var(--v3-ink);
    border-color: var(--v3-ink);
}

.spv3-btn--block {
    width: 100%;
}

.spv3-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v3-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--v3-line-strong);
    padding-bottom: 1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.spv3-link:hover {
    color: var(--v3-accent);
    border-bottom-color: var(--v3-accent);
}

/* --------------------------------------------------------------------------
   Hero aside — a real cover, or the practical-facts panel. Never empty.
   -------------------------------------------------------------------------- */

.spv3-cover {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: var(--v3-wash);
}

.spv3-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.spv3-panel {
    background: var(--v3-wash);
    border: 1px solid var(--v3-line);
    border-radius: 4px;
    padding: 1.5rem;
}

.spv3-panel-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v3-faint);
}

.spv3-panel-rows {
    margin: 1.15rem 0 0;
    display: grid;
    gap: 1.05rem;
}

.spv3-k {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v3-faint);
}

.spv3-v {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--v3-ink);
}

.spv3-v a {
    color: var(--v3-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--v3-line-strong);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.spv3-v a:hover {
    color: var(--v3-accent);
    border-bottom-color: var(--v3-accent);
}

/* Masked phone. The full number only exists after a click (see the inline
   reveal script in parts/claimed.blade.php). */
.spv3-phone-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.spv3-phone-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.spv3-phone-btn {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v3-accent);
    cursor: pointer;
    text-decoration: none;
}

.spv3-phone-btn:hover {
    color: var(--v3-accent-deep);
}

.spv3-panel-foot {
    margin: 1.35rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--v3-line);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   02 — BODY GRID  (70 / 30)
   -------------------------------------------------------------------------- */

.spv3-main {
    margin-top: 3.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .spv3-main {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 4rem;
    }

    .spv3-col-side {
        position: sticky;
        top: 5.5rem;
        display: grid;
        gap: 2.5rem;
    }
}

.spv3-col-side {
    display: grid;
    gap: 2.25rem;
}

.spv3-sec + .spv3-sec {
    margin-top: 3.25rem;
}

.spv3-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.spv3-sec-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v3-ink);
}

.spv3-sec-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--v3-faint);
}

/* --------------------------------------------------------------------------
   03 — À propos : editorial measure, no box
   -------------------------------------------------------------------------- */

.spv3-body {
    margin: 1.15rem 0 0;
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--v3-ink-soft);
    white-space: pre-line;
}

.spv3-body--muted {
    color: var(--v3-muted);
}

.spv3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.spv3-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8125rem;
    color: var(--v3-muted);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.spv3-chip:hover {
    color: var(--v3-accent);
    border-color: var(--v3-accent);
}

/* --------------------------------------------------------------------------
   04 — Produits : marketplace rhythm, minimal chrome
   -------------------------------------------------------------------------- */

.spv3-products {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .spv3-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

.spv3-product {
    display: block;
    text-decoration: none;
    color: inherit;
}

.spv3-pmedia {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--v3-wash);
}

.spv3-pmedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.spv3-product:hover .spv3-pmedia img {
    transform: scale(1.035);
}

.spv3-pname {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--v3-ink);
}

.spv3-pmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--v3-muted);
}

.spv3-pprice {
    font-weight: 600;
    color: var(--v3-ink);
}

.spv3-pmoq {
    font-variant-numeric: tabular-nums;
}

.spv3-pcta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v3-accent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease;
}

.spv3-product:hover .spv3-pcta {
    border-bottom-color: var(--v3-accent);
}

/* --------------------------------------------------------------------------
   05 — Side column blocks
   -------------------------------------------------------------------------- */

.spv3-block-title {
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v3-faint);
}

.spv3-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.spv3-note {
    margin: 0.9rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--v3-faint);
}

.spv3-facts {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.spv3-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--v3-line);
    font-size: 0.8125rem;
    color: var(--v3-muted);
}

.spv3-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.spv3-fact dd {
    margin: 0;
    font-weight: 600;
    color: var(--v3-ink);
    text-align: right;
}

.spv3-address {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--v3-ink);
}

.spv3-map {
    overflow: hidden;
    border: 1px solid var(--v3-line);
    border-radius: 4px;
    background: var(--v3-wash);
}

.spv3-map iframe {
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
}

/* --------------------------------------------------------------------------
   07 — Nearby : compact list, not a card grid
   -------------------------------------------------------------------------- */

.spv3-nearby {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--v3-line);
}

@media (min-width: 768px) {
    .spv3-nearby {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

.spv3-nearby-item {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--v3-line);
    text-decoration: none;
    color: inherit;
}

.spv3-nearby-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v3-ink);
    transition: color 0.18s ease;
}

.spv3-nearby-item:hover .spv3-nearby-name {
    color: var(--v3-accent);
}

.spv3-nearby-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--v3-muted);
}

/* --------------------------------------------------------------------------
   Discovery — "Autres grossistes à {ville}" / "Grossistes similaires"
   Compact editorial rows in a real grid. No card chrome, no logo wall: a
   directory list of names that a buyer can scan, not a gallery of boxes.
   -------------------------------------------------------------------------- */

.spv3-sec-tail {
    margin-top: 3.5rem;
}

.spv3-disc {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--v3-line);
}

@media (min-width: 768px) {
    .spv3-disc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .spv3-disc {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 3rem;
    }
}

.spv3-disc-item {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--v3-line);
    text-decoration: none;
    color: inherit;
}

.spv3-disc-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--v3-ink);
    transition: color 0.18s ease;
}

.spv3-disc-item:hover .spv3-disc-name {
    color: var(--v3-accent);
}

.spv3-disc-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--v3-muted);
}

.spv3-disc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.spv3-disc-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--v3-ink);
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

/* Restrained ownership signal — wording only, no colour, no icon. */
.spv3-disc-tag-quiet {
    font-weight: 400;
    color: var(--v3-muted);
}

.spv3-disc-foot {
    margin: 1.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Owner claim band — visible, but a band rather than a SaaS card
   -------------------------------------------------------------------------- */

.spv3-claim {
    margin-top: 4rem;
    background: var(--v3-wash);
    border: 1px solid var(--v3-line);
    border-radius: 4px;
    padding: 2.25rem;
}

@media (min-width: 768px) {
    .spv3-claim {
        padding: 2.75rem 3rem;
    }
}

.spv3-claim-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v3-ink);
}

.spv3-claim-copy {
    margin: 0.6rem 0 0;
    max-width: 38rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--v3-muted);
}

.spv3-claim .spv3-btn {
    margin-top: 1.6rem;
}

.spv3-eyebrow-muted {
    color: var(--v3-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.spv3-panel .spv3-map {
    margin-top: 1.1rem;
}

.spv3-panel-address {
    margin: 0.9rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--v3-ink);
}

@media (prefers-reduced-motion: reduce) {
    .spv3-btn,
    .spv3-link,
    .spv3-chip,
    .spv3-disc-name,
    .spv3-pmedia img,
    .spv3-v a,
    .spv3-nearby-name {
        transition: none !important;
    }

    .spv3-product:hover .spv3-pmedia img {
        transform: none;
    }
}