/* =====================================================================
   page-localisation.css
   Localisation pages — "Nous trouver" category (city cards) + single
   city article layout. Built on the oacom design tokens.
   ===================================================================== */

.loc-cat,
.loc-article {
    --loc-ink: var(--oa-color-dark, #4A5458);
    --loc-accent: var(--oa-color-primary, #ffc901);
    --loc-paper: var(--oa-color-white, #fff);
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 9vw, 8rem);
    color: var(--oa-color-text, #495057);
}

/* ---------- shared hero typography ---------- */
.loc-cat__eyebrow,
.loc-hero__eyebrow {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--oa-color-grey-blue, #717F85);
    margin: 0 0 1rem;
}

.loc-cat__title,
.loc-hero__city {
    font-family: var(--oa-font-heading, 'PolicePrincipale', sans-serif);
    color: var(--loc-ink);
    line-height: 0.95;
    margin: 0;
    letter-spacing: -0.01em;
}

.loc-cat__title {
    font-size: clamp(2.6rem, 7vw, 5rem);
}

.loc-hero__city {
    font-size: clamp(3rem, 11vw, 7.5rem);
    text-transform: capitalize;
}

.loc-cat__rule,
.loc-hero__rule {
    display: block;
    width: 88px;
    height: 6px;
    margin: 1.5rem 0 1.75rem;
    background: var(--loc-accent);
    border-radius: 999px;
}

.loc-cat__hero,
.loc-hero {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.loc-cat__desc,
.loc-body {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.7;
    max-width: 60ch;
}

.loc-cat__desc { color: var(--oa-color-grey-blue, #717F85); }

/* =====================================================================
   CATEGORY — "Nous trouver" two-column find block (address + carousel)
   ===================================================================== */
.loc-find {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.loc-find__cols {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: start;
}

/* min-width:0 lets the carousel column shrink instead of forcing overflow */
.loc-find__left,
.loc-find__right {
    min-width: 0;
}

/* ---------- left: atelier address card ---------- */
.loc-find__left { position: relative; }

.loc-address-card {
    position: sticky;
    top: 2rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--loc-paper);
    border: 1px solid rgba(74, 84, 88, 0.10);
    border-radius: 22px;
    box-shadow: 0 28px 60px -42px rgba(74, 84, 88, 0.55);
}

.loc-address-card__eyebrow {
    display: block;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    color: var(--oa-color-grey-blue, #717F85);
    margin-bottom: 0.75rem;
}

/* Brand font set explicitly (NOT via .policeprincipale class — that class
   on h1/h2 is reserved for 8–10rem display headings). */
.loc-address-card__title {
    font-family: 'PolicePrincipale', var(--oa-font-heading), sans-serif;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--loc-ink);
    margin: 0 0 0.35rem;
}

.loc-address-card__sub {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--oa-color-grey-blue, #717F85);
    margin: 0 0 1.5rem;
}

.loc-address {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-style: normal;
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--oa-color-text, #495057);
}

.loc-address i {
    color: var(--loc-accent);
    margin-top: 0.2rem;
    font-size: 1.05rem;
}

.loc-address__map {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--loc-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.loc-address__map:hover {
    border-bottom-color: var(--loc-accent);
    color: var(--oa-color-grey-blue, #717F85);
}

.loc-address__divider {
    border: 0;
    border-top: 1px solid rgba(74, 84, 88, 0.12);
    margin: 1.75rem 0;
}

.loc-address__lede {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 1rem;
    color: var(--loc-ink);
    font-weight: 600;
    margin: 0 0 1.1rem;
}

.loc-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.loc-cta-group .loc-btn {
    justify-content: center;
}

/* ---------- right: cities carousel ---------- */
.loc-carousel { position: relative; }

.loc-carousel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.loc-carousel__eyebrow {
    display: block;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    color: var(--oa-color-grey-blue, #717F85);
    margin-bottom: 0.4rem;
}

.loc-carousel__title {
    font-family: var(--oa-font-display, 'Gothiks', sans-serif);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.05;
    color: var(--loc-ink);
    margin: 0;
}

.loc-carousel__nav {
    display: flex;
    gap: 0.6rem;
    flex: none;
}

.loc-carousel__btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1.5px solid rgba(74, 84, 88, 0.25);
    background: var(--loc-paper);
    color: var(--loc-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, opacity .25s ease;
}

.loc-carousel__btn:hover:not(:disabled) {
    background: var(--loc-accent);
    border-color: var(--loc-accent);
    color: var(--oa-color-black, #000);
    transform: translateY(-2px);
}

.loc-carousel__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.loc-carousel.is-static .loc-carousel__nav {
    display: none;
}

.loc-carousel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.loc-carousel__track::-webkit-scrollbar { display: none; }

.loc-carousel__track.is-dragging {
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

/* One card visible at a time — each slide fills the track width. */
.loc-slide {
    scroll-snap-align: center;
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: clamp(2rem, 3.5vw, 3rem);
    background: var(--loc-paper);
    border: 1px solid rgba(74, 84, 88, 0.10);
    border-radius: 22px;
    box-shadow: 0 28px 60px -42px rgba(74, 84, 88, 0.55);
}

.loc-slide__kicker {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    color: var(--oa-color-grey-blue, #717F85);
}

/* Brand font set explicitly (avoids the h1/h2.policeprincipale 10rem rule). */
.loc-slide__city {
    font-family: 'PolicePrincipale', var(--oa-font-heading), sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--loc-ink);
    text-transform: capitalize;
    margin: 0.4rem 0 1rem;
}

.loc-slide__excerpt {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.6;
    color: var(--oa-color-text, #495057);
    flex: 1 1 auto;
    margin: 0;
    max-width: 52ch;
}

.loc-slide__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    margin-top: 1.75rem;
}

/* Primary action: the itinerary */
.loc-slide__map {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: var(--loc-accent);
    color: var(--oa-color-black, #000);
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.loc-slide__map:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -16px rgba(255, 201, 1, 0.9);
}

/* Secondary action: the city page */
.loc-slide__cta {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--loc-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.loc-slide__cta i { transition: transform .3s ease; }
.loc-slide__cta:hover { border-bottom-color: var(--loc-accent); }
.loc-slide__cta:hover i { transform: translateX(4px); }

/* dots indicator */
.loc-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.loc-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(74, 84, 88, 0.25);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, width .25s ease;
}

.loc-carousel__dot.is-active {
    width: 26px;
    background: var(--loc-accent);
}

@media (max-width: 880px) {
    .loc-find__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .loc-address-card {
        position: static;
    }
}

/* =====================================================================
   CATEGORY — grid of city cards
   ===================================================================== */
.loc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.loc-card {
    position: relative;
}

.loc-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--loc-paper);
    border: 1px solid rgba(74, 84, 88, 0.10);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}

.loc-card__link:hover,
.loc-card__link:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -24px rgba(74, 84, 88, 0.55);
    border-color: transparent;
    outline: none;
}

/* yellow corner flourish that grows on hover */
.loc-card__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: var(--loc-accent);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    transition: width .35s ease, height .35s ease;
}

.loc-card__link:hover .loc-card__corner,
.loc-card__link:focus-visible .loc-card__corner {
    width: 84px;
    height: 84px;
}

.loc-card__kicker {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--oa-color-grey-blue, #717F85);
}

.loc-card__city {
    font-family: var(--oa-font-heading, 'PolicePrincipale', sans-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    color: var(--loc-ink);
    text-transform: capitalize;
    margin: 0.35rem 0 0.85rem;
}

.loc-card__excerpt {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--oa-color-text, #495057);
    flex: 1 1 auto;
}

.loc-card__cta {
    margin-top: 1.5rem;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--loc-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.loc-card__cta i {
    transition: transform .3s ease;
}

.loc-card__link:hover .loc-card__cta i,
.loc-card__link:focus-visible .loc-card__cta i {
    transform: translateX(5px);
}

.loc-cat__empty {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    color: var(--oa-color-grey-blue, #717F85);
}

/* =====================================================================
   ARTICLE — single city page
   ===================================================================== */
.loc-body p { margin: 0 0 1.1rem; }
.loc-body strong { color: var(--loc-ink); }

.loc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 2.5rem 0 0;
}

.loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.95rem 1.8rem;
    border-radius: 999px;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.loc-btn--primary {
    background: var(--loc-accent);
    color: var(--oa-color-black, #000);
}

.loc-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -16px rgba(255, 201, 1, 0.9);
}

.loc-btn--ghost {
    background: transparent;
    color: var(--loc-ink);
    border: 1.5px solid rgba(74, 84, 88, 0.30);
}

.loc-btn--ghost:hover {
    border-color: var(--loc-ink);
    transform: translateY(-3px);
}

/* other implantations */
.loc-others {
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: 2rem;
    border-top: 1px solid rgba(74, 84, 88, 0.12);
}

.loc-others__label {
    display: block;
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    color: var(--oa-color-grey-blue, #717F85);
    margin-bottom: 1rem;
}

.loc-others__list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.loc-pill {
    display: inline-block;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: var(--oa-color-bg, #f0f4fb);
    color: var(--loc-ink);
    text-decoration: none;
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 0.92rem;
    text-transform: capitalize;
    transition: background .25s ease, color .25s ease;
}

.loc-pill:hover {
    background: var(--loc-accent);
    color: var(--oa-color-black, #000);
}

.loc-others__all {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    font-weight: 600;
    color: var(--loc-ink);
    text-decoration: none;
    font-size: 0.95rem;
}

.loc-others__all:hover { color: var(--oa-color-grey-blue, #717F85); }

@media (max-width: 600px) {
    .loc-actions { flex-direction: column; align-items: stretch; }
    .loc-btn { justify-content: center; }
}

/* =====================================================================
   ARTICLE — SEO content block (city-aware) + mini sitemap
   ===================================================================== */
.loc-seo {
    margin-top: clamp(2.75rem, 6vw, 4rem);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--oa-color-bg, #f0f4fb);
    border-radius: 20px;
}

.loc-seo__title {
    font-family: var(--oa-font-display, 'Gothiks', sans-serif);
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    line-height: 1.1;
    color: var(--loc-ink);
    margin: 0 0 1rem;
}

.loc-seo__title span { color: var(--oa-color-grey-blue, #717F85); }

.loc-seo__lede,
.loc-seo__sub {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 68ch;
    margin: 0 0 1rem;
}

.loc-seo__sub {
    font-weight: 600;
    color: var(--loc-ink);
    margin-top: 1.5rem;
}

.loc-seo__services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 0.5rem 1.5rem;
}

.loc-seo__services li {
    position: relative;
    padding-left: 1.4rem;
}

.loc-seo__services li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--loc-accent);
    font-weight: 700;
}

.loc-seo__services a {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    color: var(--loc-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.loc-seo__services a:hover {
    color: var(--oa-color-grey-blue, #717F85);
    border-bottom-color: var(--loc-accent);
}

/* mini sitemap */
.loc-sitemap {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid rgba(74, 84, 88, 0.12);
}

.loc-sitemap__intro {
    font-family: var(--oa-font-accent, 'Meutas', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    color: var(--oa-color-grey-blue, #717F85);
    margin: 0 0 1.5rem;
}

.loc-sitemap__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 2rem;
}

.loc-sitemap__heading {
    font-family: var(--oa-font-display, 'Gothiks', sans-serif);
    font-size: 1rem;
    color: var(--loc-ink);
    margin: 0 0 0.85rem;
}

.loc-sitemap__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.loc-sitemap__col li { margin-bottom: 0.5rem; }

.loc-sitemap__col a {
    font-family: var(--oa-font-body, 'New Atten', sans-serif);
    font-size: 0.95rem;
    color: var(--oa-color-text, #495057);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}

.loc-sitemap__col a:hover {
    color: var(--loc-ink);
    padding-left: 4px;
}