/* ==========================================================================
   MarcheGros — Geographic Directory
   Brand system: pure white + near-black + MarcheGros brand green (#2D6A4F; was orange #FF750F, the
   project's existing landing-page brand colour) + neutral grays.

   This file deliberately does NOT read --mg-* for its own palette: the active
   site theme is `french_blue_mint`, which paints a blue-grey page. The geo
   directory is specified as white/black/green, so the brand tokens are
   redeclared locally as --geo-* and everything below uses only those. The rest
   of the site keeps its theme untouched.
   ========================================================================== */

:root {
    /* brand */
    --geo-white: #ffffff;
    --geo-ink: #171717;
    --geo-orange: #2d6a4f;
    /* Hover/press tone for orange surfaces. Kept as a flat hex, not a
       gradient, per the brand rules. */
    --geo-orange-deep: #245a41;

    /* neutral grays: secondary text, borders, subtle states only */
    --geo-muted: #6b6b6b;
    --geo-faint: #9a9a9a;
    --geo-line: #e8e8e6;
    --geo-wash: #fafafa;

    /* map density ramp: neutral light gray -> brand green */
    --geo-map-0: #f1f1ef;
    --geo-map-1: #e6efd9;
    --geo-map-2: #b9d4bd;
    --geo-map-3: #6fa585;
    --geo-map-4: #2d6a4f;

    --geo-shell: 1180px;
}

.geo-shell {
    max-width: var(--geo-shell);
    margin: 0 auto;
    /* Mobile-first horizontal rhythm: 20px at 390px, widening on larger
       screens. Owner target for the primary viewport was 18-22px. */
    padding: 1.75rem 1.25rem 4rem;
    background: var(--geo-white);
    color: var(--geo-ink);
}

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

/* Keep the page itself pure white even though the site shell may tint it.
   `body` is the element the layout paints (bg-[var(--mg-bg)]), and the active
   `french_blue_mint` theme resolves that to a cold blue-grey. Scoped to pages
   that actually contain a .geo-shell so no other page is affected. */
html:has(.geo-shell),
body:has(.geo-shell) {
    background: var(--geo-white);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.geo-crumbs {
    font-size: 0.75rem;
    color: var(--geo-faint);
    margin-bottom: 2.25rem;
}

.geo-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.geo-crumbs a:hover {
    color: var(--geo-orange);
    border-bottom-color: var(--geo-orange);
}

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

/* --------------------------------------------------------------------------
   Hero  (index: text left ~55% / map right ~45%)
   -------------------------------------------------------------------------- */

.geo-hero {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    /* Mobile: the map sits under the text and search. The gap is generous
       enough that the map's top edge lands below the fold on a 390x844
       screen, so the first screen belongs to "what is this + search". */
    gap: 3rem;
    align-items: center;
    margin-bottom: 2rem;
}

@media (min-width: 900px) {
    .geo-hero {
        grid-template-columns: 55fr 45fr;
        justify-items: stretch;
        gap: 3rem;
        margin-bottom: 2.75rem;
    }
}

.geo-hero-text {
    max-width: 34rem;
}

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

.geo-h1 {
    margin: 0 0 0.85rem;
    /* Mobile-first: 32px floor keeps "Grossistes en France" to two clean
       lines at 390px; the vw term lets it breathe on tablets before capping. */
    font-size: clamp(2rem, 7vw, 3.25rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--geo-ink);
}

.geo-intro {
    margin: 0 0 1.4rem;
    max-width: 30rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--geo-muted);
}

@media (min-width: 768px) {
    .geo-intro {
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.geo-search {
    display: flex;
    max-width: 30rem;
    border: 1px solid var(--geo-ink);
    background: var(--geo-white);
}

.geo-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    /* 16px on mobile: anything smaller makes iOS Safari zoom on focus, which
       then breaks the 390px layout. */
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
    color: var(--geo-ink);
    background: transparent;
}

.geo-search input::placeholder {
    color: var(--geo-faint);
}

.geo-search input:focus {
    outline: none;
}

.geo-search button {
    flex: 0 0 auto;
    border: 0;
    /* 44px keeps the tap target usable without turning the control into a
       rounded App-style pill. */
    min-height: 44px;
    padding: 0.8rem 1.15rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--geo-white);
    /* Primary action carries the brand orange; hover deepens it.
       Flat colour only — no gradient. */
    background: var(--geo-orange);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.geo-search button:hover {
    background: var(--geo-orange-deep);
}

.geo-search:focus-within {
    border-color: var(--geo-orange);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.14);
}

/* --------------------------------------------------------------------------
   France map  — sits directly on the white page: no card, no border box,
   no background block.
   -------------------------------------------------------------------------- */

.geo-map {
    position: relative;
    /* The map is a locator, not a hero illustration: cap it so it sits in the
       right-hand column and cannot push the page past one screen. */
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .geo-map {
        max-width: 420px;
        margin: 0;
        justify-self: center;
    }
}

.geo-map-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    overflow: visible;
}

.geo-map-shape {
    /* Declared on the base rule as well as the [data-level] rules below: if the
       data attribute were ever missing, the region still gets an explicit pale
       fill instead of falling back to the SVG default of black. */
    fill: var(--geo-map-0);
    stroke: var(--geo-white);
    stroke-width: 1.4;
    stroke-linejoin: round;
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 0.2s ease, opacity 0.2s ease, transform 0.22s ease;
}

/* Density ramp. Each level is also targeted with the bare attribute selector so
   it cannot be beaten by specificity elsewhere. */
.geo-map-shape[data-level="1"],
path.geo-map-shape[data-level="1"] {
    fill: var(--geo-map-1);
}

.geo-map-shape[data-level="2"],
path.geo-map-shape[data-level="2"] {
    fill: var(--geo-map-2);
}

.geo-map-shape[data-level="3"],
path.geo-map-shape[data-level="3"] {
    fill: var(--geo-map-3);
}

.geo-map-shape[data-level="4"],
path.geo-map-shape[data-level="4"] {
    fill: var(--geo-map-4);
}

.geo-map-shape:focus-visible {
    outline: none;
    stroke: var(--geo-ink);
    stroke-width: 2;
}

/* Dim the others while one region is active (hover or keyboard focus). */
.geo-map[data-active] .geo-map-shape:not(.is-active) {
    opacity: 0.42;
}

.geo-map-shape.is-active,
path.geo-map-shape.is-active {
    fill: #c8f24a;
    stroke: var(--geo-ink);
    stroke-width: 1.4;
}

/* On click, a brief emphasis before navigating. */
.geo-map.is-leaving .geo-map-shape.is-active {
    transform: scale(1.035);
}

/* Tooltip -------------------------------------------------------------- */

.geo-map-tip {
    position: absolute;
    z-index: 5;
    /* max-width keeps the tooltip inside a 350px map on a 390px screen
       instead of spilling past the viewport edge. */
    max-width: min(11rem, 78%);
    min-width: 8rem;
    padding: 0.6rem 0.75rem;
    background: var(--geo-white);
    border: 1px solid var(--geo-ink);
    pointer-events: none;
    /* Hidden until a region is hovered. `visibility` as well as `opacity` so it
       is never announced or clickable while dormant. */
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 0.6rem));
    transition: opacity 0.16s ease;
}

.geo-map-tip.is-visible {
    visibility: visible;
    opacity: 1;
}

.geo-map-tip-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--geo-ink);
}

.geo-map-tip-count {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--geo-muted);
}

.geo-map-tip-go {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--geo-orange);
}

/* Legend removed on Owner review: the tooltip already carries the exact count,
   and a stray "Explorer →" was floating under the map. Explorer now appears
   only inside the hover tooltip. */

/* Shown only inside <noscript>. */
.geo-map-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--geo-faint);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Sections & region list
   -------------------------------------------------------------------------- */

.geo-section {
    /* Tight enough that "Régions" reads as the continuation of the hero
       rather than a separate section far down the page, and tightened further
       on mobile where vertical space is the scarce resource. */
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .geo-section {
        margin-top: 2.5rem;
    }
}

.geo-section:first-of-type {
    margin-top: 0;
}

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

.geo-stat {
    margin: 0 0 2rem;
    font-size: 0.9375rem;
    color: var(--geo-muted);
}

.geo-stat strong {
    color: var(--geo-orange);
    font-weight: 700;
}

/* The region list doubles as the SEO / no-JS navigation and as the map's
   hover-sync surface, so it stays a plain list of real <a href>.

   Desktop uses a 3-column editorial grid so 13-14 regions read as a single
   band instead of a long single-column ladder; mobile stays one column. */
.geo-list {
    border-top: 1px solid var(--geo-line);
}

/* Progressive columns: 2 on tablet, 3 on desktop, 1 on mobile.
   Each cell keeps its own bottom border, so with a grid the rules read as
   per-column separators rather than one line ruled across the whole band. */
@media (min-width: 640px) {
    .geo-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

@media (min-width: 900px) {
    .geo-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}

.geo-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    /* ~52px total on mobile: a comfortable tap target that still keeps the
       region list compact when there are 14 of them. */
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--geo-line);
    text-decoration: none;
    color: var(--geo-ink);
    transition: background-color 0.18s ease, padding-left 0.18s ease;
}

/* Hover stays deliberately quiet: a faint wash and a small indent. The row
   name does NOT turn orange — only the count and the arrow carry the accent,
   which keeps the name reading as black editorial text. */
.geo-row:hover,
.geo-row:focus-visible,
.geo-row.is-active {
    background: var(--geo-wash);
    padding-left: 0.6rem;
    outline: none;
}

/* The name only warms slightly towards orange on hover — enough to register
   the row, far short of an orange card or an orange row. */
.geo-row:hover .geo-row-name,
.geo-row:focus-visible .geo-row-name,
.geo-row.is-active .geo-row-name {
    color: var(--geo-orange);
}

.geo-row-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--geo-ink);
    transition: color 0.18s ease;
}

.geo-count {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--geo-orange);
}

.geo-row-arrow {
    font-size: 0.875rem;
    color: var(--geo-orange);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

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

/* --------------------------------------------------------------------------
   Supplier list — editorial, not a card grid
   -------------------------------------------------------------------------- */

.geo-suppliers {
    border-top: 1px solid var(--geo-line);
}

/* Mobile-first: the whole row is a tap target and the CTA drops below the
   company block. On a 390px screen a side-by-side layout squeezed the
   company name into a narrow column next to "Voir la fiche", so the stack
   is the primary shape and the inline layout only appears once there is room
   for it (see the 768px block below).

   The company name and the CTA are both anchors to the SAME supplier URL; the
   stretched pseudo-element makes the whole row clickable without nesting one
   <a> inside another or touching routing. */
.geo-supplier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Stacked on mobile: name, activity/place, then the CTA. Padding is what
       brings the row into the ~90-120px band -- type size is left alone so
       the company name stays readable without becoming a headline. */
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--geo-line);
}

.geo-supplier-main {
    min-width: 0;
}

@media (min-width: 768px) {
    .geo-supplier {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 0.7rem 0.25rem;
    }
}

.geo-supplier-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--geo-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.geo-supplier-name:hover {
    color: var(--geo-orange);
    border-bottom-color: var(--geo-orange);
}

/* Whole row is tappable: the name anchor is stretched over the row so the
   full height and width are clickable while the markup stays one valid
   <a> per link (no nested anchors, routing untouched). */
.geo-supplier-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.geo-supplier:hover .geo-supplier-name {
    color: var(--geo-orange);
}

/* The CTA sits above the stretched overlay so it stays selectable and
   keeps its own underline affordance. */
.geo-cta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--geo-orange);
    text-decoration: none;
    border-bottom: 1px solid var(--geo-line);
    transition: color 0.18s ease, border-color 0.18s ease;
}

@media (min-width: 768px) {
    .geo-cta {
        align-self: auto;
    }
}

.geo-cta:hover {
    color: var(--geo-orange-deep);
    border-bottom-color: var(--geo-orange);
}

.geo-supplier-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    margin-top: 0.1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--geo-muted);
}

/* Industry label: plain secondary typography — no chip, no background,
   no uppercase forcing. */
.geo-supplier-industry {
    color: var(--geo-muted);
}

.geo-supplier-place {
    color: var(--geo-muted);
}

.geo-claimed {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--geo-orange);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.geo-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.geo-pager a,
.geo-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--geo-line);
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--geo-ink);
    background: var(--geo-white);
}

.geo-pager a:hover {
    border-color: var(--geo-orange);
    color: var(--geo-orange);
}

.geo-pager .is-current {
    border-color: var(--geo-ink);
    background: var(--geo-ink);
    color: var(--geo-white);
}

.geo-pager .is-disabled {
    color: var(--geo-faint);
    background: var(--geo-wash);
}

/* --------------------------------------------------------------------------
   Header CTA — "Vous etes grossiste ?" pulled into the brand palette
   -------------------------------------------------------------------------- */

.geo-sell-cta {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--geo-orange) !important;
    color: var(--geo-ink) !important;
    background: transparent;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.geo-sell-cta:hover,
.geo-sell-cta:focus-visible {
    background: var(--geo-orange) !important;
    color: var(--geo-white) !important;
}

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

@media (prefers-reduced-motion: reduce) {
    .geo-map-shape,
    .geo-map-tip,
    .geo-row,
    .geo-row-arrow {
        transition: none !important;
    }

    .geo-map.is-leaving .geo-map-shape.is-active {
        transform: none;
    }

    .geo-row:hover,
    .geo-row:focus-visible,
    .geo-row.is-active {
        padding-left: 0.25rem;
    }
}