/**
 * Lite UI - v2 Visual Language
 * Deep navy dominant, light blue accents, 12px radius cards, gradient badges
 */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    /* Canonical color names — use these (gh- prefix) in all new code.
       Keep PHP LiteColors constants in sync (lite/emails/LiteColors.php). */
    --gh-blue: #0b4874;
    --gh-blue-light: #e8f4fc;
    --gh-blue-dark: #093d63;
    --gh-navy: #1a365d;
    --gh-text: #2d3748;
    --gh-text-light: #4a5568;
    --gh-text-muted: #718096;
    --gh-border: #e2e8f0;
    --gh-bg: #f7fafc;
    --gh-white: #fff;
    --gh-success: #38a169;
    --gh-success-light: #c6f6d5;
    --gh-error: #e53e3e;
    --gh-error-light: #fed7d7;

    /* Legacy aliases — kept until full sweep. Do not use in new code. */
    --blue: var(--gh-blue);
    --blue-light: var(--gh-blue-light);
    --blue-dark: var(--gh-blue-dark);
    --navy: var(--gh-navy);
    --text: var(--gh-text);
    --text-light: var(--gh-text-light);
    --border: var(--gh-border);
    --bg: var(--gh-bg);
    --white: var(--gh-white);
    --success: var(--gh-success);
    --success-light: var(--gh-success-light);
    --error: var(--gh-error);
    --error-light: var(--gh-error-light);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 24px;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.15);
    --container: 1140px;

    /* === Extended palette (CSS-only tokens; NOT mirrored in LiteColors) === */
    --accent-royal: #1550c8;
    --accent-royal-dark: #1040a8;
    --accent-royal-tint: #e8effd;
    --ink: #0c1e35;
    --black: #000;
    --critical: #c8321a;
    --critical-light: #fef0ee;
    --info: #17a2b8;
    --gold: #d4af37;
    /* Semantic accent — swap this one line to move the whole site off gold (e.g. to --orange). */
    --accent: var(--gold);
    --pink: #db2777;
    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-light: #fef3c7;
    --warning-border: #fde68a;
    --success-strong: #16a34a;
    --success-dark: #166534;
    --success-bg: #e6f4ea;
    --success-border: #a5d6a7;
    --error-strong: #ef4444;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --blue-tint: #f4f7fa;
    --blue-tint-2: #e8eff5;
    --border-blue: #c8d6e0;
    --border-blue-strong: #bdd0f8;
    --text-muted: var(--gh-text-muted);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --footer-bg: #333;
    --footer-text: #8d8d8d;
    --off-white: #fafaf8;
    --sand: #c8c4bb;
    --orange: #f6993c;
    --purple: #4a2d7a;
    --purple-light: #e2d5f1;
    --info-light: #d1ecf1;
    --rgb-black: 0,0,0;
    --rgb-white: 255,255,255;
    --rgb-navy: 26,54,93;
    --rgb-blue: 11,72,116;
    --rgb-royal: 21,80,200;
    --rgb-red: 239,68,68;
    --rgb-blue-deep: 11,48,80;
    --rgb-slate: 15,23,42;
    /* soft-override aliases (resolve here unless an ancestor overrides) */
    --primary: var(--ink);
    --border-color: var(--gray-200);
}

/* ==========================================================================
   Typography — Larsseit variant mapping
   Weight is baked into font-family; use font-weight: normal everywhere.
   ========================================================================== */

/* Bold: primary headings, badges, CTAs — plus <strong>/<b>, the one place the
   browser picks the weight for us. The Larsseit build ships one family per weight,
   each registered at font-weight:normal, so `font-weight:700` inside Larsseit-Light
   finds no bold face and the browser fakes one — invisible on a Light. Swapping the
   family is the same move legacy makes in v4.css (`.container strong`). */
h1, h2, strong, b, .section-title, .hero-name {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

/* Medium: card titles, labels */
h3, .card-info h3, .article-card-content h3 {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

.status-phase, .btn-cta, .btn-filter.active {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

.btn-filter, .card-type-locality, .article-category {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    line-height: 1.3;
    color: var(--navy);
}

/* ==========================================================================
   Container
   ========================================================================== */
.lite-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Hero Carousel
   ========================================================================== */
.hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 400px;
    overflow: hidden;
    background: var(--navy);
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide.active {
    opacity: 1;
}

/* Slide 0 is a real <img> (LCP element) filling the fixed-height hero box; the box
   already reserves space (height:75vh), so object-fit:cover keeps CLS at 0. */
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--rgb-black), 0.7) 0%, rgba(var(--rgb-black), 0.1) 50%, rgba(var(--rgb-black), 0.2) 100%);
}

.hero-caption {
    position: absolute;
    bottom: 80px;
    left: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--white);
    text-decoration: none;
    z-index: 2;
}

.hero-caption:hover {
    text-decoration: none;
}

.hero-location {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.hero-name {
    font-size: 2.5rem;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(var(--rgb-black), 0.3);
}

.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--rgb-white), 0.4);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.hero-dot.active {
    background: var(--white);
    transform: scale(1.2);
}

.hero-dot:hover {
    background: rgba(var(--rgb-white), 0.8);
}

/* ==========================================================================
   Hero Panoramic
   ========================================================================== */
/* overflow stays visible: the search suggestions dropdown hangs below the hero box
   and would be clipped otherwise. The pan animation is clipped by .hero-slide below. */
.hero--pano {
    height: 75vh;
    min-height: 400px;
    overflow: visible;
}

.hero--pano .hero-slide {
    overflow: hidden;
}

.hero--pano .hero-slide.active {
    animation: heroPan 8s ease-in-out forwards;
}

@keyframes heroPan {
    from { background-position: 45% center; }
    to   { background-position: 55% center; }
}

/* Slide 0 pans via transform (it is an <img>, not a background) to match heroPan. */
.hero--pano .hero-slide.active .hero-img {
    animation: heroPanImg 8s ease-in-out forwards;
}

@keyframes heroPanImg {
    from { transform: scale(1.06) translateX(-1.2%); }
    to   { transform: scale(1.06) translateX(1.2%); }
}

.hero--pano .hero-slide {
    transition: opacity 1.2s ease;
}

.hero--pano .hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(var(--rgb-black), 0.25) 0%,
        rgba(var(--rgb-black), 0.35) 30%,
        rgba(var(--rgb-black), 0.30) 50%,
        rgba(var(--rgb-black), 0.15) 75%,
        rgba(var(--rgb-black), 0.25) 100%
    );
}

/* Hide header search on home — hero has its own */
.page-home .header-searchwrap {
    display: none !important;
}

.hero--pano .hero-caption {
    top: auto;
    left: auto;
    bottom: 14px;
    right: 20px;
    gap: 1px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    border: none;
    text-align: right;
    opacity: 0.75;
}

.hero-type {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero--pano .hero-location {
    font-size: 10px;
    letter-spacing: 2px;
}

.hero--pano .hero-name {
    font-size: 0.8rem;
    line-height: 1.15;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    text-shadow: 0 1px 4px rgba(var(--rgb-black), 0.3);
}

.hero-headline {
    text-align: center;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(var(--rgb-black), 0.4);
    margin: 0 0 16px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.hero-search {
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 90%;
    max-width: 600px;
}

.hero-search::before {
    content: '';
    position: absolute;
    inset: -50px -80px;
    background: radial-gradient(ellipse, rgba(var(--rgb-black), 0.30) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.hero-search-box {
    position: relative;
}

.hero-search-input {
    width: 100%;
    padding: 14px 20px 14px 44px;
    font-size: 16px;
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    border: none;
    border-radius: 4px;
    background: rgba(var(--rgb-white), 0.92) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--text);
    box-shadow: 0 4px 20px rgba(var(--rgb-black), 0.15);
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.hero-search-input:focus {
    background: var(--white) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
    box-shadow: 0 4px 30px rgba(var(--rgb-black), 0.25);
}

.hero-search-input::placeholder {
    color: var(--text-light);
}

.hero-search-box .suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Hero city pills */
.hero-cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 2px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1;
}

.hero-cities a {
    color: rgba(var(--rgb-white), 0.75);
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.2s;
}

.hero-cities a:hover {
    color: var(--white);
    text-decoration: underline;
}

.hero-cities-sep {
    color: rgba(var(--rgb-white), 0.35);
    font-size: 10px;
}

/* Hero "Près de moi" geolocation pill */
.hero-near-me {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 14px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    background: rgba(var(--rgb-black), 0.35);
    border: 1px solid rgba(var(--rgb-white), 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.hero-near-me svg {
    fill: currentColor;
    flex-shrink: 0;
}

.hero-near-me:hover {
    background: rgba(var(--rgb-black), 0.5);
    border-color: rgba(var(--rgb-white), 0.6);
}

.hero-near-me.is-locating {
    opacity: 0.65;
    pointer-events: none;
}

@media (min-width: 768px) {
    .hero-headline {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    .hero--pano .hero-caption {
        bottom: 18px;
        right: 40px;
        gap: 2px;
    }
    .hero-search {
        max-width: 700px;
        bottom: auto;
        top: 36%;
        transform: translate(-50%, -50%);
    }
    .hero-search-input {
        padding: 16px 24px 16px 48px;
        font-size: 17px;
    }
}

.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(var(--rgb-white), 0.15);
    z-index: 3;
}

.hero-progress-bar {
    height: 100%;
    background: var(--white);
    width: 0;
}

.hero-progress-bar.animating {
    animation: heroProgress 8s linear forwards;
}

@keyframes heroProgress {
    from { width: 0; }
    to   { width: 100%; }
}

@media (min-width: 576px) {
    .hero--pano .hero-name {
        font-size: 0.82rem;
    }
}

@media (min-width: 768px) {
    .hero--pano .hero-name {
        font-size: 0.85rem;
    }
    .hero--pano .hero-location {
        font-size: 11px;
    }
    .hero-type {
        font-size: 11px;
    }
}

@media (min-width: 1200px) {
    .hero-headline {
        font-size: 2.2rem;
    }
    .hero--pano .hero-name {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero--pano .hero-slide.active {
        animation: none;
        background-position: center;
    }
    .hero--pano .hero-slide.active .hero-img {
        animation: none;
        transform: none;
    }
    .hero-progress-bar.animating {
        animation: none;
        width: 100%;
    }
}

/* ==========================================================================
   Home Sections
   ========================================================================== */
.home-section {
    padding: 50px 0;
}

.home-section:nth-of-type(even) {
    background: var(--blue-tint);
}

/* Directory self-definition band (home) — the WHERE-family citation surface.
   A plain div (not a .home-section) so it stays out of the alternating tint count. */
.home-directory {
    padding: 40px 0;
}

.home-directory-lead {
    max-width: 68ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Directory title sits a step paler than other section titles — the hero H1
   already carries the strong navy, so this band reads as a quieter subheading. */
.home-directory .section-title {
    color: var(--text-light);
}

.section-title {
    font-size: 13px;
    color: var(--navy);
    margin-bottom: 30px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--navy);
    display: inline-block;
}

.section-title-wrap {
    margin-bottom: 0;
    text-align: left;
}

.section-title a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.section-title a::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231a365d' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    vertical-align: middle;
    transition: transform 0.2s;
}

.section-title a:hover::after {
    transform: translateX(4px);
}

/* Opt-out of the trailing arrow (e.g. the province region-tiles header). */
.section-title--noarrow a::after {
    content: none;
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.reveal .card-slider,
.reveal .articles-grid {
    min-height: 200px;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.section-title a:hover {
    color: var(--blue);
    text-decoration: none;
}

/* ==========================================================================
   Card Slider
   ========================================================================== */
.card-slider {
    position: relative;
    padding: 0 40px;
}

.slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-track > .project-card {
    scroll-snap-align: start;
    flex: 0 0 280px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow);
    font-size: 20px;
    color: var(--navy);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, background 0.2s;
}

.slider-arrow:hover {
    box-shadow: var(--shadow-hover);
    background: var(--blue-light);
}

.slider-prev {
    left: 0;
}

.slider-next {
    right: 0;
}

/* ==========================================================================
   Project Card (shared slider + grid)
   ========================================================================== */
.project-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.project-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-card a:hover {
    text-decoration: none;
}

/* Card subtitle facet link (rail galleries): reads like the type·locality subtitle, but is its own
   link to the {type}/{city} listing — inline-block so the hover underline hugs the text, not the row. */
.card-facet-link {
    display: inline-block;
}

.card-facet-link:hover {
    text-decoration: underline;
}

.project-card .img-wrap {
    position: relative;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: var(--border);
}

.project-card .img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.project-card:hover .img-wrap img {
    transform: scale(1.05);
}

/* Card price line */
.card-price {
    font-size: 14px;
    color: var(--text);
    margin-top: 8px;
}

/* Card bedrooms line */
.card-bedrooms {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

.card-distance {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}

/* Card status line */
.card-status {
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 0;
}

.status-phase {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.phase-presale { color: var(--blue); }
.phase-construction { color: var(--text); }
.phase-ready { color: var(--success); }
.phase-rental { color: var(--text-light); }

.status-sep {
    margin: 0 6px;
    color: var(--text-light);
}

.status-delivery {
    font-size: 12px;
    color: var(--text-light);
}

/* Card info */
.card-info {
    padding: 16px 18px;
}

.card-type-locality {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-info h3 {
    font-size: 16px;
    color: var(--navy);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid card is wider */
.project-card.grid {
    min-width: 0;
}

/* ==========================================================================
   Region Grid (home page)
   ========================================================================== */
.region-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .region-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.region-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--navy);
    text-decoration: none;
    color: var(--white);
}

.region-card:hover {
    text-decoration: none;
    /* Keep the label white on hover — overrides Bootstrap's leaking a:hover blue. */
    color: var(--white);
}

/* Stretched cover link — the whole tile clicks through to the region overview.
   The content layer sits above it but is pointer-transparent, so clicks fall
   through to the cover; only the segment links opt back into pointer events. */
.region-card-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.region-card-content {
    z-index: 2;
    pointer-events: none;
}

/* Hover reveal (Option A): the "N projets" line cross-fades to the type breakdown.
   Both share the same slot (breakdown absolute over the count) so nothing shifts.
   Hover-only, so it never surfaces on touch. */
.region-card-meta {
    position: relative;
    display: block;
}
.region-card-count,
.region-card-breakdown {
    transition: opacity 0.25s ease;
}
.region-card-count {
    display: block;
}
.region-card-breakdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    opacity: 0;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.region-card:hover .region-card-count {
    opacity: 0;
}
.region-card:hover .region-card-breakdown {
    opacity: 0.95;
}

/* Clickable segments — spaced out, with a middot divider in the gap. Only
   pointer-active while the tile is hovered (so they never intercept the
   region cover click when hidden). */
.region-bd-link {
    position: relative;
    color: var(--white);
    text-decoration: none;
}
.region-bd-link:not(:first-child) {
    margin-left: 20px;
}
.region-bd-link:not(:first-child)::before {
    content: '·';
    position: absolute;
    left: -12px;
    opacity: 0.6;
    pointer-events: none;
}
.region-card:hover .region-bd-link {
    pointer-events: auto;
}
.region-bd-link:hover {
    color: var(--white);
    text-decoration: underline;
}

.region-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.region-card:hover img {
    transform: scale(1.06);
}

.region-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--rgb-black), 0.6) 0%,
        rgba(var(--rgb-black), 0.15) 50%,
        rgba(var(--rgb-black), 0.05) 100%
    );
    transition: background 0.3s;
}

.region-card:hover .region-card-overlay {
    background: linear-gradient(
        to top,
        rgba(var(--rgb-black), 0.7) 0%,
        rgba(var(--rgb-black), 0.25) 50%,
        rgba(var(--rgb-black), 0.1) 100%
    );
}

.region-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.region-card-name {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(var(--rgb-black), 0.3);
}

.region-card-count {
    font-size: 12px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

@media (min-width: 768px) {
    .region-card-content {
        padding: 20px;
    }
    .region-card-name {
        font-size: 1.25rem;
    }
    .region-card-count {
        font-size: 13px;
    }
}

/* ==========================================================================
   Articles Section
   ========================================================================== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.article-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.article-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.article-card a:hover {
    text-decoration: none;
}

.article-image {
    position: relative;
    padding-bottom: 60%;
    overflow: hidden;
    background: var(--border);
}

.article-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.article-card:hover .article-image img {
    transform: scale(1.04);
}

.article-card-content {
    padding: 14px 16px 18px;
}

.article-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue);
}

.article-card-content h3 {
    font-size: 16px;
    color: var(--navy);
    margin: 6px 0 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-excerpt {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Article Filters (listing page)
   ========================================================================== */
.listing-page--blog header {
    border-bottom: none;
}

.listing-page--blog .listing-header {
    margin-bottom: 8px;
}

.listing-page--blog .listing-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

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

.article-filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.article-filter-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.article-filter-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* Article filter links (no button appearance change needed) */
.article-filter-btn {
    text-decoration: none;
}

/* ==========================================================================
   Article Sections (hub page)
   ========================================================================== */
.article-section {
    margin-bottom: 48px;
}

.article-section:last-child {
    margin-bottom: 24px;
}

/* Discover projects at bottom of articles/capsules pages */
.discover-projects-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.article-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.article-section-header h2 {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 0.95rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

.article-section-link {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.article-section-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Article Detail Page
   ========================================================================== */
.article-page {
    padding-bottom: 40px;
}

.article-breadcrumb {
    padding: 12px 0;
    font-size: 13px;
}

.article-breadcrumb a {
    color: var(--blue);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    text-decoration: underline;
}

.article-hero {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
    background: var(--border);
}

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

/* Imageless hero (e.g. promoteur profiles): branded gradient band, title preserved */
.article-hero--noimage {
    aspect-ratio: 21 / 9;
    min-height: 180px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent-royal) 100%);
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
}

.article-content h2 {
    font-size: 24px;
    color: var(--navy);
    margin: 32px 0 16px;
}

.article-content h3 {
    font-size: 20px;
    color: var(--navy);
    margin: 24px 0 12px;
}

.article-content p {
    margin: 0 0 20px;
}

.article-content ul {
    margin: 0 0 20px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content a {
    color: var(--blue);
    text-decoration: underline;
}

.article-content a:hover {
    color: var(--blue-dark);
}

.article-content blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--blue);
    background: var(--bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--text-light);
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px 0;
}

.article-content table,
.project-description table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.article-content table th,
.article-content table td,
.project-description table th,
.project-description table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.article-content table th,
.project-description table th {
    background: var(--bg);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    color: var(--navy);
}

.article-content table tr:last-child td,
.project-description table tr:last-child td {
    border-bottom: none;
}

.article-info-box {
    margin: 24px 0;
    padding: 24px;
    background: var(--bg);
    border-left: 4px solid var(--blue);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-info-box h2,
.article-info-box h3,
.article-info-box h4 {
    margin-top: 0;
    color: var(--navy);
}

.article-info-box p:last-child {
    margin-bottom: 0;
}

.article-figure {
    margin: 24px 0;
}

.article-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    cursor: pointer;
}

.article-footer {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    color: var(--text);
}

.article-tags {
    display: flex;
    gap: 8px;
}

.article-tag {
    padding: 4px 12px;
    background: var(--bg);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--text-light);
    text-decoration: none;
}

.article-tag:hover {
    background: var(--blue-light);
    color: var(--blue);
    text-decoration: none;
}

.article-last-modified {
    font-size: 13px;
    color: var(--text-light);
}

.article-page .alert-subscribe {
    margin-top: 40px;
}

.related-articles {
    background: var(--bg);
    padding: 40px 0;
    margin-top: 40px;
}

.related-articles h2 {
    font-size: 24px;
    color: var(--navy);
    margin: 0 0 24px;
}

/* Cross-links: project → article */
.related-article-plain {
    color: var(--blue);
    text-decoration: none;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}

.related-article-plain:hover {
    text-decoration: underline;
}

/* Featured "À lire sur ce projet" — project-specific hero link above the description */
.project-article-hero {
    display: block;
    color: var(--navy);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.project-article-hero:hover {
    color: var(--blue);
}

.project-articles-more-label {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin: 8px 0 6px;
}

/* Cross-links: article → project */
.related-project-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-top: 24px;
}

.related-project-label {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.related-project-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.related-project-link:hover {
    text-decoration: underline;
}

/* ── Notification Page ── */
.notification-page {
    padding-bottom: 40px;
}

.notif-breadcrumb {
    padding: 12px 0 4px;
    font-size: 14px;
}

.notif-breadcrumb a {
    color: var(--blue);
    text-decoration: none;
}

.notif-breadcrumb a:hover {
    text-decoration: underline;
}

.notif-title {
    font-size: 26px;
    line-height: 1.3;
    color: var(--black);
    margin: 8px 0 16px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
}

.notif-hero {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--border);
}

/* No forced ratio: an alert visual is usually an authored poster, and the corpus is
   mixed (600x449 `l-`, 1110x624 `pano-`, square). Cropping it to a house ratio cuts
   off exactly what the promoter put at the edges — dates, hours, price. Show it whole,
   like legacy does. */
.notif-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.notif-cta-bar {
    margin-bottom: 28px;
}

.notif-content {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 28px;
}

.notif-content p {
    margin: 0 0 14px;
}

.notif-content ul {
    margin: 0 0 14px;
    padding-left: 24px;
}

.notif-content li {
    margin-bottom: 4px;
}

.notif-content a {
    color: var(--blue);
    text-decoration: underline;
}

.notif-content a:hover {
    color: var(--blue-dark);
}

.notif-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 15px;
}

.notif-content table td,
.notif-content table th {
    padding: 8px 12px;
    border: 1px solid var(--border);
}

.notif-cta-bottom {
    text-align: center;
    margin: 0 0 28px;
}

.notif-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--text-light);
}

.notif-date {
    color: var(--text-light);
}

.notif-footer-sep {
    color: var(--border);
}

.notif-parent-link {
    color: var(--blue);
    text-decoration: none;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
}

.notif-parent-link:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .notif-title {
        font-size: 22px;
    }
    .notif-footer {
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .article-content {
        font-size: 16px;
    }

    .article-content blockquote {
        padding: 16px 18px;
    }

    .article-content table th,
    .article-content table td,
    .project-description table th,
    .project-description table td {
        padding: 10px 12px;
        font-size: 14px;
    }

    .article-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-filters {
        gap: 6px;
    }

    .article-filter-btn {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ==========================================================================
   Around Mode (geolocation proximity)
   ========================================================================== */
.around-prompt {
    text-align: center;
    padding: 60px 20px;
}

.around-prompt-icon {
    margin-bottom: 16px;
}

.around-prompt p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.around-locating {
    text-align: center;
    padding: 60px 20px;
}

.around-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: aroundSpin 0.8s linear infinite;
}

@keyframes aroundSpin {
    to { transform: rotate(360deg); }
}

.around-locating p {
    color: var(--text-light);
    font-size: 15px;
}

.around-denied {
    text-align: center;
    padding: 40px 20px;
}

.around-denied p {
    color: var(--text-light);
    font-size: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.around-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ==========================================================================
   Home Alert Wrap
   ========================================================================== */
.home-alert-wrap {
    padding: 40px 0;
    background: var(--bg);
}

/* ==========================================================================
   CTA Button
   ========================================================================== */
.cta-section {
    text-align: center;
    padding: 40px 0 60px;
}

.btn-cta {
    display: inline-block;
    padding: 14px 40px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 16px;
    transition: background 0.2s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn-cta:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--white);
}

/* ==========================================================================
   Filter Bar (Listing)
   ========================================================================== */
.filters-nav {
    background: var(--white);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-dropdown {
    position: relative;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.btn-filter:hover {
    border-color: var(--blue);
    background: var(--blue-light);
}

.btn-filter.active {
    background: var(--white);
    color: var(--navy);
    border-color: var(--navy);
}

.btn-filter .chevron {
    font-size: 10px;
    transition: transform 0.2s;
}

.btn-filter.open .chevron {
    transform: rotate(180deg);
}

.dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    z-index: 1000;
    padding: 6px 0;
}

.dropdown-panel.open {
    display: block;
}

.dropdown-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--blue-light);
    text-decoration: none;
}

.dropdown-item.active {
    color: var(--blue);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    background: var(--blue-light);
}

.dropdown-item .count {
    color: var(--text-light);
    font-size: 12px;
}

.dropdown-divider {
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.dropdown-header {
    font-size: 12px;
    color: var(--text-light);
    padding: 6px 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--text-light);
    font-size: 13px;
    border-radius: var(--radius-pill);
    transition: color 0.2s;
}

.filter-reset:hover {
    color: var(--navy);
    text-decoration: none;
}

/* Mobile filter toggle */
.btn-filter-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 8px;
}

.btn-filter-toggle:hover {
    border-color: var(--blue);
    background: var(--blue-light);
}

/* ==========================================================================
   Listing Results
   ========================================================================== */
.listing-page {
    padding-bottom: 40px;
}

.listing-header {
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.listing-header h1 {
    font-size: 1.8rem;
    color: var(--navy);
    margin: 0;
    line-height: 1.2;
}

/* Around mode: a stacked title + explanatory subtitle, no side-by-side map button */
.listing-header--around {
    display: block;
}

.listing-subtitle {
    margin: 6px 0 0;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.4;
    max-width: 560px;
}

.listing-split .listing-type {
    display: block;
    font-size: 0.7rem;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--text-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding-bottom: 0;
    border-bottom: none;
    width: fit-content;
}

.listing-split .listing-location {
    display: block;
    font-size: 2.2rem;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.listing-filter {
    font-weight: normal;
    font-style: italic;
    opacity: 0.7;
}

.results-count {
    font-size: 13px;
    color: var(--text-light);
    display: block;
    margin-bottom: 12px;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

/* ==========================================================================
   No Results
   ========================================================================== */
.no-results-text {
    color: var(--text-light);
    font-size: 15px;
    padding: 16px 0;
    margin: 0;
}

/* Tighten only when the hint follows — a lone "Aucun projet trouvé" keeps its own
   breathing room (articles/blog listings never emit the hint). */
.no-results-text:has(+ .no-results-hint) {
    padding-bottom: 4px;
}

.no-results-hint {
    color: var(--text-muted);
    font-size: 15px;
    padding: 0 0 16px;
    margin: 0;
}

/* ==========================================================================
   Islands (preserved from Phase 0)
   ========================================================================== */
.island {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.island-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--blue);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.form-message--success {
    background: var(--success-light);
    color: var(--success);
}

.form-message--error {
    background: var(--error-light);
    color: var(--error);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover {
    background: var(--blue-dark);
    text-decoration: none;
    color: var(--white);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Post Styles (single pages)
   ========================================================================== */
.post-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.post-gallery {
    margin-bottom: 1.5rem;
}

.gallery-single img,
.gallery-grid img {
    width: 100%;
    border-radius: var(--radius);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.gallery-item--main {
    grid-column: span 2;
    grid-row: span 2;
}

.post-description {
    margin-bottom: 1.5rem;
}

.post-features {
    margin-bottom: 1.5rem;
}

.features-list {
    columns: 2;
    column-gap: 1.5rem;
}

.features-list li {
    margin-bottom: 0.5rem;
}

.post-meta {
    color: var(--text-light);
    font-size: 0.875rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.25rem;
    color: var(--text-light);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Admin Bar
   ========================================================================== */
.admin-bar {
    background: var(--navy);
    color: var(--white);
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.admin-bar .lite-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-bar a {
    color: var(--white);
}

/* ==========================================================================
   Page Layout (list, post)
   ========================================================================== */
.page-content {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    max-width: 800px;
}

.page-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 12px;
    color: var(--navy);
}

.page-content h2:first-child {
    margin-top: 0;
}

.page-content p {
    margin: 0 0 14px;
}

.page-content ul {
    margin: 0 0 14px;
    padding-left: 24px;
}

.page-content li {
    margin-bottom: 4px;
}

.page-content a {
    color: var(--blue);
    text-decoration: underline;
}

.page-content a:hover {
    color: var(--blue-dark);
}

.page-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 20px 0;
    padding: 12px 20px;
    background: var(--bg);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.page-content blockquote p {
    font-style: italic;
    margin-bottom: 8px;
}

.page-content blockquote footer {
    font-size: 14px;
    color: var(--text-light);
    font-style: normal;
}

.page-content .page-lead {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ==========================================================================
   Contact Page
   ========================================================================== */
.contact-tracks {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

.contact-track {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contact-track h2 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 20px;
    color: var(--navy);
    margin: 0 0 12px;
}

.contact-track--promoter {
    border-left: 4px solid var(--blue);
}

.contact-track--promoter .contact-phone {
    margin: 16px 0 4px;
}

.contact-track--promoter .contact-phone a {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 24px;
    color: var(--blue);
    text-decoration: none;
}

.contact-track--promoter .contact-phone a:hover {
    color: var(--blue-dark);
}

.contact-track--promoter .contact-hours {
    font-size: 14px;
    color: var(--text-light);
    margin: 0 0 16px;
}

.contact-track--promoter .btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 14px;
}

.contact-track--promoter .btn:hover {
    background: var(--blue-dark);
}

.contact-qa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.contact-qa-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.contact-qa-item summary {
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 15px;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-qa-item summary::after {
    content: '+';
    font-size: 18px;
    color: var(--text-light);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s ease;
}

.contact-qa-item[open] summary::after {
    content: '-';
}

.contact-qa-item summary::-webkit-details-marker {
    display: none;
}

.contact-qa-item p {
    padding: 0 16px 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-light);
}

.contact-qa-item a {
    display: inline-block;
    margin: 0 16px 12px 16px;
    font-size: 14px;
    color: var(--blue);
    text-decoration: none;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
}

.contact-qa-item a:hover {
    text-decoration: underline;
}

.contact-reveal {
    text-align: center;
}

.contact-reveal .btn-secondary {
    display: inline-block;
    padding: 10px 24px;
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 14px;
}

.contact-reveal .btn-secondary:hover {
    background: var(--blue-light);
}

.page-page .island--contact-form {
    max-width: 600px;
    margin-top: 32px;
}

@media (min-width: 768px) {
    .contact-tracks {
        grid-template-columns: 1fr 2fr;
    }
}

/* ==========================================================================
   Advertise Page
   ========================================================================== */
.page-content:has(.adv-hero) {
    max-width: none;
}

.adv-hero {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    color: var(--white);
    padding: 40px 32px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    text-align: center;
}

.adv-hero h2 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 28px;
    margin: 0 0 8px;
    color: var(--white);
}

.adv-hero p {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.adv-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.adv-stat {
    background: var(--white);
    padding: 20px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.adv-stat-number {
    display: block;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 24px;
    color: var(--blue);
    margin-bottom: 4px;
}

.adv-stat-label {
    font-size: 13px;
    color: var(--text-light);
}

.adv-section-title {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 22px;
    color: var(--navy);
    margin: 0 0 16px;
}

.adv-columns {
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
}

.adv-column {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.adv-column h3 {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 18px;
    color: var(--navy);
    margin: 0 0 12px;
}

.adv-column ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.adv-column li {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 6px;
}

.adv-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: var(--navy);
    padding: 24px 16px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    text-align: center;
}

.adv-trust-number {
    display: block;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 24px;
    color: var(--white);
    margin-bottom: 4px;
}

.adv-trust-label {
    font-size: 13px;
    color: rgba(var(--rgb-white), 0.7);
}

.adv-builders {
    margin-bottom: 32px;
}

.adv-builders-pills {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adv-builders-pills.is-collapsed {
    max-height: 168px;
    overflow: hidden;
}

.adv-builders-pills.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

.adv-builder-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: var(--shadow);
    color: var(--navy);
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.adv-builders-toggle {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    padding: 4px 12px;
    background: none;
    border: none;
    color: var(--blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.adv-builders-toggle:hover {
    text-decoration: underline;
}

/* Home FAQ (Q3) — live promoter wall inside the .contact-qa accordion. Aligns the
   reused .adv-builders-pills with the answer text's horizontal padding. */
.home-faq-builders {
    padding: 0 16px 12px;
}

/* Advertise — final CTA band + qualified promoter form */
.adv-cta {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
    padding: 28px 24px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.adv-cta-pitch h2 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 22px;
    color: var(--navy);
    margin: 0 0 10px;
}

.adv-cta-pitch p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 18px;
}

.adv-cta-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--blue-light);
    border-radius: var(--radius-sm);
}

.adv-cta-contact-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.adv-cta-contact-name {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 17px;
    color: var(--navy);
}

.adv-cta-phone {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 20px;
    color: var(--blue);
    text-decoration: none;
}

.adv-cta-phone:hover {
    text-decoration: underline;
}

.adv-cta-hours {
    font-size: 13px;
    color: var(--text-light);
}

.adv-cta-promise {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-dark);
}

@media (min-width: 768px) {
    .adv-cta {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        padding: 36px 32px;
        gap: 32px;
    }

    .adv-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .adv-columns {
        grid-template-columns: 1fr 1fr;
    }

    .adv-columns--three {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .adv-hero h2 {
        font-size: 32px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .hero {
        height: 50vh;
        min-height: 300px;
    }

    .hero-name {
        font-size: 1.6rem;
    }

    .hero-caption {
        left: 20px;
        bottom: 60px;
    }

    .home-section {
        padding: 30px 0;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .card-slider {
        padding: 0 10px;
    }

    .slider-arrow {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .slider-track > .project-card {
        flex: 0 0 240px;
    }

    .listings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .listing-header {
        padding: 0;
    }

    .listing-header h1 {
        font-size: 1.6rem;
    }

    .listing-split .listing-location {
        font-size: 1.6rem;
    }

    .results-count {
        margin-bottom: 8px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item--main {
        grid-column: span 2;
        grid-row: span 1;
    }

    .features-list {
        columns: 1;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .btn-filter {
        white-space: nowrap;
    }

    .btn-filter-toggle {
        display: inline-flex;
    }

    .filter-row {
        display: none;
    }

    .filter-row.show {
        display: flex;
    }
}

@media (max-width: 576px) {
    /* Tighter margins — maximize image width on phone */
    .lite-container {
        padding: 0 12px;
    }

    .listing-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero {
        height: 40vh;
        min-height: 250px;
    }

    .hero-name {
        font-size: 1.3rem;
    }

    .hero-caption {
        left: 16px;
        bottom: 50px;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .slider-track > .project-card {
        flex: 0 0 220px;
    }

    .listing-header {
        padding: 0;
    }

    .listing-split .listing-location {
        font-size: 1.4rem;
    }

    .btn-filter {
        font-size: 13px;
        padding: 6px 12px;
    }

    /* Taller portrait images on mobile */
    .project-card .img-wrap {
        padding-bottom: 85%; /* taller on phone */
    }

    /* Readable text on mobile */
    .card-info {
        padding: 14px 16px;
    }

    .card-info h3 {
        font-size: 17px;
    }

    .card-type-locality {
        font-size: 13px;
    }

    .card-price {
        font-size: 15px;
    }

    .card-bedrooms {
        font-size: 14px;
    }

    .card-status {
        font-size: 13px;
    }

    .status-phase {
        font-size: 12px;
    }

    .status-delivery {
        font-size: 13px;
    }

    .listings-grid {
        gap: 14px;
    }
}


/* ==========================================================================
   NEARBY PROJECTS SECTION
   ========================================================================== */

.nearby-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.nearby-section h2 {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 26px;
    font-weight: normal;
    color: var(--navy, var(--navy));
    margin: 0 0 20px;
}

.nearby-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.nearby-loading {
    color: var(--text-light);
    font-size: 15px;
}

.nearby-more {
    display: inline-block;
    padding: 10px 32px;
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.nearby-more:hover {
    background: var(--navy, var(--navy));
}

@media (max-width: 991px) {
    .nearby-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .nearby-grid {
        grid-template-columns: 1fr;
    }

    .nearby-section h2 {
        font-size: 19px;
    }
}

/* ==========================================================================
   MAP PAGE (mobile-first)
   ========================================================================== */

.map-layout {
    height: calc(100vh - 60px);
    overflow: hidden;
}

.map-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Map top header (reuses listing-header classes) */
.map-top {
    background: var(--white);
    border-bottom: none;
    padding: 16px 0;
    flex-shrink: 0;
}

/* Map body: sidebar + canvas */
.map-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Sidebar — hidden on mobile, shown on desktop via min-width:768 */
.map-sidebar {
    display: none;
    flex-direction: column;
    background: var(--white);
    overflow-y: auto;
}

.sidebar-header {
    font-size: 13px;
    color: var(--text-light);
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
}

.project-list {
    flex: 1;
    overflow-y: auto;
}

/* Map card favorite indicator */
.fav-map-dot {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.fav-map-dot svg {
    width: 12px;
    height: 12px;
    fill: var(--error);
    vertical-align: -1px;
}

/* Map card (horizontal layout) */
.map-card {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s, border-left 0.15s;
    border-left: 3px solid transparent;
}

.map-card:hover {
    background: var(--blue-light);
}

.map-card.active {
    background: var(--blue-light);
    border-left-color: var(--blue);
}

.map-card img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.map-card-info {
    flex: 1;
    min-width: 0;
}

.map-card-type {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-card-name {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--navy);
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-card-locality {
    font-size: 12px;
    color: var(--text-light);
}

.map-card-price {
    font-size: 13px;
    color: var(--text);
    margin-top: 4px;
}

.map-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
    font-size: 11px;
}

.map-card-phase {
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.map-card-beds {
    color: var(--text-light);
}

/* Map canvas */
#map-canvas {
    flex: 1;
    min-height: 300px;
}

/* ---- Épingles de la carte de listing (MapLibre) ----------------------------
   La couleur vit ICI, pas en JS : le SVG est peint en `currentColor`, donc une
   règle CSS suffit à basculer l'état actif. `transform-origin` en bas pour que
   l'agrandissement ne décolle pas la pointe du lieu qu'elle marque. */
.map-pin {
    color: var(--blue);
    line-height: 0;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform 120ms ease, color 120ms ease;
}
.map-pin svg path {
    stroke: var(--white);
    stroke-width: 1.5;
}
.map-pin.active {
    color: var(--error);
    transform: scale(1.23);
    z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
    .map-pin { transition: none; }
}

/* Repli si les bibliothèques de carte ne chargent pas : le volet latéral reste
   une liste utilisable, on ne laisse pas un cadre vide sans explication. */
#map-canvas.map-unavailable {
    background: var(--bg);
}

/* Info window */
.iw {
    max-width: 280px;
    font-family: 'Larsseit-Light', system-ui, sans-serif;
}

.iw img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    display: block;
}

.iw-body {
    padding: 10px 12px;
}

.iw-type {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iw-name {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--navy);
    margin: 4px 0;
}

.iw-price {
    font-size: 13px;
    color: var(--text);
}

.iw-link {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 16px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 12px;
    text-decoration: none;
}

.iw-link:hover {
    background: var(--blue-dark);
    text-decoration: none;
    color: var(--white);
}

/* "View map" link on listing page */
.btn-map {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--blue);
    white-space: nowrap;
    margin-left: auto;
}

.btn-map:hover {
    color: var(--blue-dark);
    text-decoration: underline;
}

.btn-map svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ==========================================================================
   MAP PAGE — Tablet+ (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .map-sidebar {
        display: flex;
        width: 400px;
        border-right: 1px solid var(--border);
    }

    .map-card img {
        width: 110px;
        height: 90px;
    }
}

/* ==========================================================================
   PROJECT DETAIL PAGE — Luxury Minimal (mobile-first)
   Hero overlay, no border separators, navy palette, small-caps titles.
   ========================================================================== */

.project-page {
    padding-bottom: 60px;
    background: var(--white);
}

.project-page .lite-container {
    /* Column flex lets .project-summary sit early in the source (after the h1,
       for crawlers/LLMs) yet render visually last via `order`. */
    display: flex;
    flex-direction: column;
}

/* Flex disables margin-collapse: nearby-section's margin-top would stack on top
   of the preceding section's margin-bottom (30+30). Drop the top margin here —
   the preceding section's margin-bottom restores the original 30px gap, and the
   border-top + padding-top keep the internal separation. Scoped to the project
   flex column so nearby-section on other pages is untouched. */
.project-page .lite-container .nearby-section {
    margin-top: 0;
}

/* Section spacing — margin-bottom like v2 */
.project-page .section {
    margin-bottom: 30px;
    padding: 0;
    border-bottom: none;
}

.project-page .section:last-child {
    margin-bottom: 30px;
}

.project-page .section-title {
    font-size: 26px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--navy);
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: none;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    text-align: left;
}

/* Description sub-headings: must be smaller than section titles */
.accordion-body h3,
.disclose-content h3 {
    font-size: 20px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    color: var(--navy);
    margin: 28px 0 12px;
}

.accordion-body h3:first-child,
.disclose-content h3:first-child {
    margin-top: 0;
}

/* ---- Breadcrumb above gallery (v2 pattern) ---- */
.project-breadcrumb {
    padding: 12px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 0;
}

.project-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.project-breadcrumb a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.project-breadcrumb a:last-child {
    color: var(--navy);
}

.breadcrumb-sep {
    margin: 0 8px;
    color: var(--text-light);
    font-size: 16px;
    opacity: 0.5;
}

/* ---- Gallery caption (frosted glass, top-left) ---- */
.gallery-caption {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(var(--rgb-black), 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 16px 22px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--rgb-white), 0.08);
    color: var(--white);
    pointer-events: none;
    max-width: 75%;
}

/* Clickable type+locality facet inside the caption. The caption itself is
   pointer-events:none (so it never eats gallery swipes); this link re-enables
   pointer events for itself only. Column layout keeps type + locality on their
   own lines, matching the non-linked caption look. */
.gallery-caption-facet {
    display: flex;
    flex-direction: column;
    gap: inherit;
    color: var(--white);
    text-decoration: none;
    pointer-events: auto;
}

/* Keep it white on hover — overrides Bootstrap's leaking a:hover blue. */
.gallery-caption-facet:hover {
    color: var(--white);
}

.gallery-caption-facet:hover .gallery-caption-type,
.gallery-caption-facet:hover .gallery-caption-locality {
    text-decoration: underline;
}

.gallery-caption-type {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.8;
}

.gallery-caption-locality {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0.85;
}

.gallery-caption-name {
    color: var(--white);
    font-size: 1.4rem;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    margin: 2px 0 0;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(var(--rgb-black), 0.25);
}

@media (min-width: 768px) {
    .gallery-caption {
        top: 24px;
        left: 24px;
        padding: 20px 28px;
        gap: 6px;
    }
    .gallery-caption-type {
        font-size: 12px;
    }
    .gallery-caption-locality {
        font-size: 13px;
    }
    .gallery-caption-name {
        font-size: 2.2rem;
    }
}

/* Article hero card — translucent overlay used on /lite/{articleId}.
   Same look-and-feel as the project page's .gallery-caption (transparent,
   blurred, white-on-dark). Distinct class name avoids collision with the
   unrelated .hero-card used elsewhere for the project-summary panel. */
.article-hero-card {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(var(--rgb-black), 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 16px 22px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--rgb-white), 0.08);
    color: var(--white);
    pointer-events: none;
    max-width: 75%;
}

.article-hero-card__title {
    color: var(--white);
    font-size: 1.4rem;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    margin: 2px 0 0;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(var(--rgb-black), 0.25);
}

.article-hero-card__divider {
    width: 64px;
    height: 1px;
    background: rgba(var(--rgb-white), 0.45);
    border: 0;
    margin: 16px 0 12px;
}

.article-hero-card__byline {
    font-size: 13px;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

@media (min-width: 768px) {
    .article-hero-card {
        top: 24px;
        left: 24px;
        padding: 20px 28px;
        gap: 6px;
    }
    .article-hero-card__title {
        font-size: 2.2rem;
    }
    .article-hero-card__byline {
        font-size: 14px;
    }
}

/* ---- Fallback header (no pano) ---- */
.project-header {
    padding: 16px 0 8px;
}

.project-header h1 {
    font-size: 1.6rem;
    margin: 0 0 6px;
    color: var(--navy);
    line-height: 1.2;
}

.project-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light);
}

.project-type-badge {
    background: var(--blue-light);
    color: var(--blue);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

/* ---- Actions ---- */
.project-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 0 0;
}

/* ---- Action buttons — secondary sibling of .btn-cta-primary ---- */
/* Deliberately mirrors .btn-cta-primary's geometry (radius, font, padding) so the
   two stack as one pair: same block, graded by fill rather than by shape. Change
   one and change the other. */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 32px;
    /* An inset ring, not a border: a border would add its 3px to the box and leave
       this button taller than the borderless CTA it is paired with. */
    box-shadow: inset 0 0 0 1.5px var(--blue);
    border: none;
    border-radius: var(--radius);
    font-size: 18px;
    font-family: 'Larsseit-Bold', 'Larsseit-Medium', sans-serif;
    font-weight: normal;
    text-decoration: none;
    color: var(--blue);
    background: transparent;
    transition: background-color 0.2s, color 0.2s;
}

.btn-action:hover {
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
}

/* Play glyph — answers the ↗ on the primary CTA. U+FE0E forces text presentation
   so platforms that default U+25B6 to colour emoji still draw a flat triangle. */
.btn-action-icon {
    font-size: 13px;
    line-height: 1;
}

/* ---- CTA primary — full-width hero button ---- */
.btn-cta-primary {
    display: block;
    width: 100%;
    padding: 18px 32px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius);
    font-size: 18px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.3px;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(var(--rgb-blue), 0.3);
}

.btn-cta-primary:hover {
    background: var(--blue-dark);
    color: var(--white);
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(var(--rgb-blue), 0.4);
    transform: translateY(-1px);
}

.btn-cta-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--rgb-blue), 0.3);
}

.delivery-tag {
    font-size: 13px;
    color: var(--text-light);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    padding: 10px 0;
}

/* ---- Gallery (inside container, v2 style) ---- */
.gallery {
    margin-top: 0;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--border);
}

.gallery-viewport {
    position: relative;
    overflow: hidden;
}

#galleryHero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* ---- Gallery dots (v2 style) ---- */
.gallery-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

/* A signal that a gallery exists, not a control: no pointer, no click target.
   flex: none keeps 20 dots from being squeezed into ovals on a narrow screen. */
.gallery-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(var(--rgb-white), 0.5);
    transition: background 0.2s;
}

.gallery-dot.active {
    background: var(--white);
}

/* ---- Section header (title + actions on same row) ---- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.section-header .section-title {
    margin-bottom: 0;
}

/* ---- Price layout — table + CTA side by side on desktop ---- */
.price-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.price-layout .section-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .price-layout {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
    }

    .price-layout .price-cards {
        flex: 7;
    }

    .price-layout .section-actions {
        flex: 3;
        justify-content: center;
    }

    .price-layout .btn-cta-primary {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Standalone section-actions (no price-layout) ---- */
.section-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

/* ---- Price Cards — clean table ---- */
.price-cards {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 14px;
}

/* Mobile-first: stacked rows */
.price-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    gap: 2px 0;
}

.price-card:last-child {
    border-bottom: none;
}

.price-card-label {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--text);
    width: 100%;
    margin-bottom: 2px;
}

.price-card-amount {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 15px;
    color: var(--navy);
}

.price-from {
    font-size: 14px;
    color: var(--text-light);
    font-family: 'Larsseit-Light', sans-serif;
    font-weight: normal;
}

.price-card-calc {
    margin-left: auto;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Desktop: single row */
@media (min-width: 576px) {
    .price-card {
        flex-wrap: nowrap;
        align-items: center;
        padding: 14px 20px;
        gap: 0;
    }

    .price-card-label {
        width: auto;
        min-width: 120px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .price-card-amount {
        flex: 1;
        text-align: right;
    }

    .price-card-calc {
        margin-left: 24px;
    }
}

.calc-link {
    color: var(--blue);
    text-decoration: none;
    border: 1px solid var(--border-blue);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 13px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.calc-link:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.calc-sep {
    display: none;
}

/* ---- Calculator dialog ---- */
.calc-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(600px, 94vw);
    max-width: 600px;
    max-height: 92vh;
    box-shadow: 0 12px 40px rgba(var(--rgb-black), 0.25);
    overflow: hidden;
}

.calc-dialog::backdrop {
    background: rgba(var(--rgb-black), 0.4);
}

.calc-dialog-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    background: var(--bg);
}

.calc-dialog-close {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
    padding: 4px 8px;
}

.calc-dialog-close:hover {
    color: var(--text);
}

.calc-dialog iframe {
    width: 100%;
    height: 70vh;                 /* fallback; JS fits the frame to the calc's content height */
    max-height: calc(92vh - 44px);
    border: none;
    display: block;
    background: var(--bg);
}

/* Mobile: edge-to-edge full-width sheet */
@media (max-width: 575px) {
    .calc-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
    }
    .calc-dialog iframe {
        height: calc(100dvh - 44px);
        max-height: calc(100dvh - 44px);
    }
}

/* ---- Video dialog ---- */
/* Same shell as the calculator dialog, but the player is cross-origin: it can't be
   measured, so the frame holds a fixed 16:9 box instead of being fitted by JS. */
.video-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(900px, 94vw);
    max-width: 900px;
    box-shadow: 0 12px 40px rgba(var(--rgb-black), 0.25);
    overflow: hidden;
    background: var(--text);
}

.video-dialog::backdrop {
    background: rgba(var(--rgb-black), 0.7);
}

.video-dialog-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    background: var(--text);
}

.video-dialog-close {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--bg);
    line-height: 1;
    padding: 4px 8px;
}

.video-dialog-close:hover {
    color: var(--white);
}

.video-dialog iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(92vh - 44px);
    border: none;
    display: block;
    background: var(--text);
}

/* Mobile: edge-to-edge full-width sheet */
@media (max-width: 575px) {
    .video-dialog {
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }
}

/* ---- Features — pills ---- */
.features-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feature-pill {
    padding: 8px 16px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: var(--radius-pill);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
}

/* ---- Hero card (project summary + pills) ---- */
.hero-card {
    background: linear-gradient(135deg, var(--blue-tint) 0%, var(--blue-tint) 100%);
    border: 1px solid var(--border-blue);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 20px 0;
}
.hero-card-title {
    font-size: 17px;
    font-family: 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--navy, var(--blue));
    line-height: 1.5;
    margin: 0 0 16px;
    text-align: left;
    border: none;
    padding: 0;
}
.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.3;
    background: var(--white);
    border: 1px solid var(--border-blue);
    color: var(--text, var(--footer-bg));
}
.hero-pill--price {
    background: var(--navy, var(--blue));
    color: var(--white);
    border-color: var(--navy, var(--blue));
    font-weight: 600;
}
.hero-pill--delivery {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-strong);
}
.hero-pill--seller {
    background: var(--warning-light);
    border-color: var(--warning-border);
    color: var(--warning-dark);
}

/* ---- Project summary (bottom reference zone) ----
   Lives early in the HTML source (right after the h1) for crawlers/LLMs, but
   `order` pushes it to the visual bottom of the project-page flex column. */
.project-summary {
    order: 99;
    position: relative;
    margin: 32px 0 0;
    padding: 24px 28px;
    background: linear-gradient(160deg, var(--blue-tint) 0%, var(--blue-tint) 100%);
    border-top: 3px solid var(--navy, var(--blue));
    border-radius: 0 0 12px 12px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-light);
    letter-spacing: 0.01em;
}
/* Summary header: keyword H2 (left) + "Sommaire du projet" label. Mobile-first —
   label stacks above the H2; on desktop it floats to the right at the baseline. */
.project-summary-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
/* Real body heading (was a CSS ::before label, invisible to crawlers/LLMs).
   Mirrors .listing-summary-title. */
.project-summary-title {
    margin: 0;
    font-family: 'Larsseit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy, var(--blue));
}
.project-summary-label {
    order: -1;
    font-family: 'Larsseit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy, var(--blue));
    opacity: 0.7;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .project-summary-header {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }
    .project-summary-label {
        order: 0;
    }
}
.project-summary strong {
    color: var(--navy, var(--blue));
    font-weight: 600;
}

/* Listing aggregate summary — mirrors .project-summary. Column flex lets the
   block sit early in the source (after the h1, for crawlers/LLMs) yet render
   visually last via `order`. Scoped to .listing-content so only the content
   container in listing mode is made flex (not the header). */
.listing-page .lite-container.listing-content {
    display: flex;
    flex-direction: column;
}
.listing-content .nearby-section {
    margin-top: 0;
}
.listing-summary {
    order: 99;
    position: relative;
    margin: 32px 0 0;
    padding: 24px 28px;
    background: linear-gradient(160deg, var(--blue-tint) 0%, var(--blue-tint) 100%);
    border-top: 3px solid var(--navy, var(--blue));
    border-radius: 0 0 12px 12px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-light);
    letter-spacing: 0.01em;
}
.listing-summary-title {
    margin: 0 0 10px;
    font-family: 'Larsseit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy, var(--blue));
}

/* ---- Comparison table ("Voir le tableau comparatif") ---- */
.cmp-details {
    margin-top: 16px;
}
.cmp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: 'Larsseit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy, var(--blue));
    list-style: none;
    user-select: none;
}
.cmp-toggle::-webkit-details-marker { display: none; }
.cmp-toggle::before {
    content: '\25B8'; /* ▸ */
    font-size: 12px;
    transition: transform 0.15s ease;
}
.cmp-details[open] .cmp-toggle::before {
    transform: rotate(90deg);
}
.cmp-scroll {
    position: relative;
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    background: var(--white);
}
.cmp-hint {
    display: block;
    padding: 4px 2px;
    font-size: 11px;
    color: var(--text-light);
    text-align: right;
}
.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--white);
}
.cmp-caption {
    caption-side: top;
    padding: 0 0 8px;
    font-size: 12px;
    color: var(--text-light);
    text-align: left;
}
.cmp-table th,
.cmp-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--blue-tint);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.cmp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--blue-tint);
    color: var(--navy, var(--blue));
    font-family: 'Larsseit', sans-serif;
    font-weight: 600;
}
/* Sticky first column (Projet) — stays pinned while prices/builder scroll. */
.cmp-table th.cmp-col-project {
    position: sticky;
    left: 0;
    z-index: 3;
    max-width: 180px;
    background: var(--white);
    font-weight: 600;
    white-space: normal;
}
.cmp-table thead th.cmp-col-project {
    z-index: 4;
    background: var(--blue-tint);
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
    border-bottom: none;
}
.cmp-table a {
    color: var(--blue);
    text-decoration: none;
}
.cmp-table a:hover {
    text-decoration: underline;
}
/* Stacked sub-tables (À vendre / À louer) — breathing room between them. */
.cmp-details .cmp-scroll + .cmp-scroll {
    margin-top: 20px;
}
/* Row hover — light the whole row (incl. the sticky Projet cell) so the eye
   can track one project across the wide matrix. */
.cmp-table tbody tr:hover td,
.cmp-table tbody tr:hover th.cmp-col-project {
    background: var(--blue-tint);
}

.map-address {
    font-size: 15px;
    color: var(--text, var(--footer-bg));
    margin: 0 0 12px;
}

/* ---- Accordion sections (structured data) ---- */
.structured-accordions { margin: 20px 0 30px; }
.accordion-section { border-bottom: 2px solid var(--blue-tint); }
.structured-accordions .accordion-section { border-bottom: none; }
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.accordion-header:focus,
.accordion-header:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.accordion-title {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    flex: 1;
}
.accordion-icon {
    font-size: 12px;
    color: var(--navy, var(--blue));
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
    align-self: center;
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}
.accordion-body {
    padding: 0 0 20px;
}
.accordion-body[hidden] {
    display: none;
}
/* ── Progressive disclosure (Caractéristiques / Description) ──────────────
   Content renders in full so bots/LLMs read everything. When JS runs and the
   content overflows the preview height, it clamps to a teaser with a fade and
   reveals a full-width toggle. No JS = full content, no button. */
.disclose {
    --disclose-max: 120px;
}
.disclose-content {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.disclose--collapsed .disclose-content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(to bottom, rgba(var(--rgb-white), 0), var(--white));
    pointer-events: none;
}
.disclose-toggle {
    display: none;
}
.disclose.is-enhanced .disclose-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: 14px 0 0;
    padding: 9px 18px;
    background: var(--white);
    border: 1px solid var(--border-blue);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--rgb-blue), 0.06);
    color: var(--navy, var(--blue));
    font-family: 'Larsseit-Medium', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.disclose.is-enhanced .disclose-toggle:hover {
    background: var(--bg);
    border-color: var(--navy, var(--blue));
    box-shadow: 0 2px 6px rgba(var(--rgb-blue), 0.12);
}
.disclose-chevron::before {
    content: '\2304';
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.disclose:not(.disclose--collapsed) .disclose-chevron::before {
    transform: rotate(180deg);
}
.disclose-less {
    display: none;
}
.disclose:not(.disclose--collapsed) .disclose-more {
    display: none;
}
.disclose:not(.disclose--collapsed) .disclose-less {
    display: inline;
}
/* ── "Section à venir" note ──────────────────────────────────────────────
   Shown when admin extracted data but the client hasn't reviewed it yet
   (phase = admin_extracted). A quiet two-line note with a clean stroke
   line-icon — no fake skeleton — so it reads as intentional, not broken. */
.coming-soon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
}
/* Invitation à ouvrir le wizard Enrichir, sous le bloc « Section à venir ».
   Ne paraît qu'aux gestionnaires de la fiche (voir templates/post/project.php) :
   l'habillage vient de .btn-action, on ne pose ici que le détachement. */
.coming-soon-cta {
    display: inline-block;
    margin-top: 14px;
}
.coming-soon-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--primary, var(--ink));
    opacity: 0.65;
}
.coming-soon-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.coming-soon-title {
    font-family: 'Larsseit-Medium', sans-serif;
    font-size: 16px;
    color: var(--text, var(--ink));
}
.coming-soon-sub {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-light, var(--text-muted));
}
.accordion-list {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
}
.accordion-list li {
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text, var(--footer-bg));
}
/* ---- Status / Avancement ---- */
.status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}
.status-step {
    color: var(--gray-400);
}
.status-step--active {
    color: var(--text);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
}
.status-sep {
    color: var(--gray-400);
    font-size: 18px;
}
.status-updated {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--gray-400);
}

/* ---- Description ---- */
.project-description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
}

.desc-summary {
    margin-top: 6px;
}

.desc-summary h3 {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: var(--navy);
    margin: 20px 0 8px;
}

.desc-summary h3:first-child {
    margin-top: 0;
}

.desc-summary ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.desc-summary li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

/* "Aux environs" — categories render as bulleted list items (like the other
   sections), each foldable to reveal its nearby places. */
.nearby-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
}
.nearby-group > summary::-webkit-details-marker { display: none; }
/* Prominent, easy-to-tap unfold chevron, right of the count. */
.nearby-group > summary::after {
    content: '\25B8';
    margin-left: 4px;
    color: var(--blue);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.nearby-group[open] > summary::after { transform: rotate(90deg); }
.nearby-group > summary:hover::after { opacity: 0.7; }
.nearby-count {
    color: var(--text-light);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.nearby-count::before { content: '('; }
.nearby-count::after { content: ')'; }
.nearby-places li { font-size: 14px; line-height: 1.55; }
.nearby-map-link { margin: 14px 0 0; }
.nearby-map-link a {
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.nearby-map-link a:hover { text-decoration: underline; }

.island--project-contact .section-title {
    border-bottom: none;
}

/* ---- Contact Info (inside gray card in v2) ---- */
/* Contact info header — light card (Option A + enhancements 1+4) */
.contact-info-header {
    background: linear-gradient(135deg, var(--blue-tint) 0%, var(--border) 100%);
    padding: 22px 26px;
    border-radius: 0;
    margin: -28px -30px 24px -30px;
    border-bottom: 1px solid var(--border-blue);
}

.contact-info-primary {
    margin-bottom: 2px;
}

.contact-info-title {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 17px;
    color: var(--navy);
    margin-bottom: 4px;
}

.contact-info-detail {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.contact-info-detail .contact-phone {
    color: var(--blue);
}

.contact-info-people {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-blue);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.contact-person {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text);
}

.contact-person-name {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    color: var(--navy);
}

.contact-phone {
    color: var(--blue);
    font-family: 'Larsseit-Light', sans-serif;
    cursor: pointer;
    margin-left: 8px;
}

.contact-phone:first-child {
    margin-left: 0;
}

.contact-person .contact-phone {
    color: var(--blue);
    margin-left: 4px;
}

/* ---- Contact island: no card wrapper on project page ---- */
.project-page .island--project-contact {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Extra breathing room before the contact/conversion section */
.island--project-contact.section,
.section:has(.island--project-contact) {
    margin-top: 16px;
}

/* ---- Contact Form ---- */
.contact-box {
    background: var(--blue-tint);
    padding: 28px 30px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-blue);
    box-shadow: 0 4px 16px rgba(var(--rgb-navy), 0.12);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Floating label fields */
.contact-field {
    position: relative;
    margin-bottom: 12px;
}

.contact-field label {
    position: absolute;
    left: 16px;
    top: 14px;
    font-size: 15px;
    color: var(--text-light);
    transition: all 0.2s ease;
    pointer-events: none;
    background: transparent;
    padding: 0;
}

.contact-field .contact-input:focus + label,
.contact-field .contact-input:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: 11px;
    background: var(--blue-tint);
    padding: 0 4px;
    color: var(--blue);
}

/* Textarea floating label starts higher */
.contact-field .contact-textarea + label {
    top: 14px;
}

.contact-field .contact-textarea:focus + label,
.contact-field .contact-textarea:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: 11px;
    background: var(--blue-tint);
    padding: 0 4px;
    color: var(--blue);
}

.contact-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-blue);
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Larsseit-Light', sans-serif;
    color: var(--text);
    background: var(--white);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(var(--rgb-blue), 0.15);
}

.contact-input::placeholder {
    color: transparent;
}

.contact-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* Two-column row: Name + Phone */
.contact-row {
    display: flex;
    gap: 12px;
}

@media (max-width: 575px) {
    .contact-row {
        flex-direction: column;
        gap: 0;
    }
}

.contact-row .contact-field {
    flex: 1;
}

/* Subscribe highlighted card */
.contact-subscribe-card {
    background: linear-gradient(135deg, var(--blue-tint-2) 0%, var(--blue-tint) 100%);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0 8px;
    transition: background 0.2s;
}

.contact-subscribe-card:hover {
    background: linear-gradient(135deg, var(--blue-tint-2) 0%, var(--blue-tint-2) 100%);
}

.contact-subscribe {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    line-height: 1.5;
}

.contact-subscribe input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.contact-subscribe-title {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 15px;
    color: var(--navy);
}

.contact-subscribe-benefit {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}

/* Trust line */
.contact-trust {
    text-align: center;
    font-size: 13px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    color: var(--navy);
    margin: 12px 0 4px;
}

.contact-disclaimer {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 4px 0 0;
}

/* Elevated CTA button (Option A + proposal 4) */
.btn-contact-submit {
    display: block;
    width: 100%;
    padding: 20px 30px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    margin-top: 4px;
    box-shadow: 0 4px 16px rgba(var(--rgb-navy), 0.30);
    animation: contactPulse 2s ease-in-out 1s 1;
}

@keyframes contactPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(var(--rgb-navy), 0.30); }
    50% { box-shadow: 0 6px 24px rgba(var(--rgb-blue), 0.45); }
}

.btn-contact-submit::after {
    content: " \2192";
}

.btn-contact-submit:hover {
    box-shadow: 0 6px 20px rgba(var(--rgb-navy), 0.40);
    transform: translateY(-2px);
}

.btn-contact-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--rgb-navy), 0.25);
}

/* Confirmation card (shown after submit) */
.contact-confirmation {
    text-align: center;
    padding: 40px 20px;
}

.contact-confirmation-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success-strong);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.contact-confirmation-title {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 8px;
}

.contact-confirmation p {
    color: var(--text);
    font-size: 15px;
    margin: 0 0 16px;
}

.contact-confirmation-link {
    color: var(--blue);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
}

.contact-confirmation-link:hover {
    text-decoration: underline;
}

/* ---- Cookie Consent Modal ---- */
.cookie-consent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.cookie-consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--rgb-black), 0.5);
}

.cookie-consent-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 24px;
    width: calc(100% - 32px);
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(var(--rgb-black), 0.25);
}

.cookie-consent-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.cookie-consent-title {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 18px;
    color: var(--navy);
    margin: 0 0 10px;
}

.cookie-consent-text {
    font-size: 14px;
    color: var(--text-light);
    margin: 0 0 14px;
    line-height: 1.5;
}

.cookie-consent-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.cookie-consent-benefits li {
    font-size: 14px;
    color: var(--text);
    padding: 6px 0 6px 22px;
    position: relative;
}

.cookie-consent-benefits li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
}

.cookie-consent-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-cookie-accept {
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cookie-accept:hover {
    background: var(--blue-dark);
}

.btn-cookie-decline {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
    transition: border-color 0.2s;
}

.btn-cookie-decline:hover {
    border-color: var(--text-light);
}

@media (min-width: 576px) {
    .cookie-consent-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ---- Promoter Section ---- */
.promoter-subtitle {
    font-size: 16px;
    margin-bottom: 15px;
}

.promoter-subtitle a {
    color: var(--blue);
    text-decoration: none;
}

.promoter-subtitle a:hover {
    text-decoration: underline;
}

.promoter-count {
    color: var(--text-light);
}

/* ---- Promoter Projects ---- */
.promoter-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

/* ---- Carte « Localisation » — une carte, une épingle.
   L'aperçu statique, la pastille pulsante et le teaser « Explorer » ont été
   retirés le 2026-08-08 : ils n'existaient que pour retarder le chargement de
   Google Maps. Le fond vient maintenant de nos tuiles PMTiles, la carte s'ouvre
   seule, et « voir plus grand » passe par le contrôle plein écran de MapLibre —
   d'où la disparition de l'état .expanded. ---- */
/* Le cadre ne fixe plus la hauteur : c'est #loc-canvas qui la porte (voir
   l'avertissement à sa règle). Le cadre ne garde que l'habillage — bordure,
   arrondi, ombre — et le rognage des coins de la carte. */
.project-map-frame {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(var(--rgb-black), 0.06);
}

/* ---- Carte-2 (proximity, DEV only) — flux normal, pas de cadre en position
   absolue : la carte est ouverte d'emblée, il n'y a rien à révéler. Le mount
   réserve sa hauteur pour que l'injection asynchrone ne pousse pas la page (CLS).
   Le fragment fixe la hauteur interne de #proximity-map-2 (460 / 600 px) ; on
   ajoute ici la légende et le crédit. À revoir à la mesure si l'un des deux change. ---- */
.pmap-mount {
    width: 100%;
    min-height: 560px;
    /* Cible d'ancre. #pmap-container est visé depuis la fiche elle-même
       (« Tout voir sur la carte ») ET depuis l'admin (« Voir la carte publique »).
       Sans cette marge, le saut colle la section au bord supérieur, sous l'en-tête,
       et on arrive sur une carte à moitié cachée. Même compensation de 90 px que
       ghScrollToMap(), qui la fait en JS pour son défilement animé. */
    scroll-margin-top: 90px;
}
@media (min-width: 641px) {
    .pmap-mount { min-height: 700px; }
}
.pmap-canvas {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Toile de la carte « Localisation ».
   ⚠️ SÉLECTEUR D'ID ET HAUTEUR EXPLICITE — ce n'est pas un caprice de style.
   MapLibre pose la classe `maplibregl-map` sur son conteneur, et `maplibre-gl.css`
   la déclare `position: relative`. Cette feuille est injectée dans le <head> à
   l'exécution, donc APRÈS style.css : à spécificité égale (une classe contre une
   classe) c'est elle qui gagne. Tout dimensionnement reposant sur
   `position: absolute; inset: 0` est donc écrasé, la hauteur s'effondre à zéro et
   la carte disparaît sans la moindre erreur (vécu le 2026-08-08). Un ID bat la
   classe, et une hauteur explicite ne dépend pas du positionnement : c'est le
   patron que carte-2 utilise déjà pour `#proximity-map-2`. Ne pas « simplifier »
   en une classe. */
#loc-canvas {
    width: 100%;
    height: 280px;
    background: var(--bg);
}

@media (min-width: 640px) {
    #loc-canvas { height: 320px; }
}

.map-google-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--blue);
    text-decoration: none;
    font-size: 14px;
}

.map-google-link:hover {
    text-decoration: underline;
}

.proximity-empty {
    padding: 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    color: var(--warning-dark);
    font-size: 14px;
}

/* ==========================================================================
   PROJECT PAGE — Lightbox
   ========================================================================== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.lightbox.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--rgb-black), 0.95);
}

.lightbox-slides {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    z-index: 1;
}

.lightbox-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--white);
    font-size: 36px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.lightbox-close:hover {
    opacity: 0.7;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(var(--rgb-white), 0.2);
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-nav:hover {
    background: rgba(var(--rgb-white), 0.3);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* Shown only while the current xl- image is still downloading. Reuses the
   aroundSpin keyframes; white-on-dark because it sits over the lightbox scrim. */
.lightbox-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(var(--rgb-white), 0.25);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: aroundSpin 0.8s linear infinite;
    z-index: 3;
}

.lightbox.is-loading .lightbox-spinner {
    display: block;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(var(--rgb-white), 0.7);
    font-size: 14px;
    z-index: 3;
}

/* ==========================================================================
   PROJECT PAGE — Tablet+ (min-width: 768px)
   ========================================================================== */
@media (min-width: 576px) {
    #galleryHero img {
        aspect-ratio: auto;
        height: 280px;
    }
}

@media (min-width: 768px) {
    #galleryHero img {
        height: 654px;
    }

    .project-header h1 {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ALERT SUBSCRIBE — mobile-first
   ========================================================================== */

/* Override .island wrapper for admin-bar — strip card chrome */
.island.island--admin-bar {
    background: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Override .island wrapper for alert-subscribe — make wrapper invisible */
/* Double class for specificity: inline <style> in layout also defines .island */
.island.island--alert-subscribe {
    background: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    margin: 20px 0 30px;
}

.alert-subscribe {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
}

/* Carousel (left / top on mobile) */
.alert-subscribe-carousel {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--navy);
}

.alert-subscribe-carousel .as-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.alert-subscribe-carousel .as-slide.active {
    opacity: 1;
}

.alert-subscribe-carousel .as-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alert-subscribe-carousel .as-slide .as-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--rgb-black), 0.1) 0%, rgba(var(--rgb-black), 0.5) 100%);
}

.alert-subscribe-carousel .as-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(var(--rgb-white), 0.06) 0px,
        rgba(var(--rgb-white), 0.06) 2px,
        transparent 2px,
        transparent 14px
    );
    pointer-events: none;
    z-index: 1;
}

/* Navy panel (right / bottom on mobile) */
.alert-subscribe-panel {
    background: var(--navy);
    color: var(--white);
    padding: 28px 24px;
}

.alert-subscribe-panel h4 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--white);
}

.alert-subscribe-panel p {
    font-size: 15px;
    margin: 0 0 16px;
    opacity: 0.9;
    line-height: 1.4;
}

.alert-subscribe-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.alert-subscribe-panel li {
    font-size: 14px;
    margin-bottom: 6px;
    opacity: 0.9;
}

.alert-diamond {
    color: var(--accent);
    margin-right: 6px;
    font-size: 10px;
}

/* Input row */
.alert-subscribe-input-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

@media (min-width: 576px) {
    .alert-subscribe-input-row {
        flex-direction: row;
    }
}

.alert-subscribe-input-row input[type="email"] {
    flex: 1;
    background: rgba(var(--rgb-white), 0.1);
    border: 1px solid rgba(var(--rgb-white), 0.35);
    border-radius: var(--radius-sm);
    color: var(--white);
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.alert-subscribe-input-row input[type="email"]::placeholder {
    color: rgba(var(--rgb-white), 0.5);
}

.alert-subscribe-input-row input[type="email"]:focus {
    border-color: rgba(var(--rgb-white), 0.8);
    background: rgba(var(--rgb-white), 0.15);
}

.alert-subscribe-input-row button {
    background: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--navy);
    padding: 12px 24px;
    font-size: 14px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
}

.alert-subscribe-input-row button:hover {
    background: var(--border);
}

.alert-subscribe-input-row button:active {
    transform: scale(0.97);
}

/* Disclaimer */
.alert-subscribe-disclaimer {
    display: block;
    font-size: 11px;
    opacity: 0.6;
    line-height: 1.4;
}

.alert-subscribe-disclaimer a {
    color: var(--white);
    text-decoration: underline;
}

/* Confirmation state */
.alert-subscribe-confirmation {
    text-align: center;
    padding: 20px 0;
}

.alert-subscribe-check {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--rgb-white), 0.15);
    color: var(--success);
    font-size: 24px;
    line-height: 48px;
    margin: 0 auto 12px;
}

.alert-subscribe-success-text {
    font-size: 18px;
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    margin-bottom: 8px;
}

.alert-subscribe-edit-link {
    color: rgba(var(--rgb-white), 0.7);
    font-size: 14px;
    text-decoration: none;
}

.alert-subscribe-edit-link:hover {
    color: var(--white);
}

/* Form message inside alert subscribe */
.alert-subscribe-form .form-message {
    margin-top: 8px;
    font-size: 13px;
}

/* Desktop: two-column layout */
@media (min-width: 768px) {
    .alert-subscribe {
        flex-direction: row;
        min-height: 320px;
    }

    .alert-subscribe-carousel {
        width: 50%;
        height: auto;
    }

    .alert-subscribe-panel {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 36px 32px;
    }
}

@media (min-width: 1200px) {
    .alert-subscribe-panel {
        padding: 40px 48px;
    }

    .alert-subscribe-panel h4 {
        font-size: 26px;
    }
}

/* ==========================================================================
   FAVORITES — Hearts, Badge, Favorites Page
   ========================================================================== */

/* Heart button (shared base) */
.fav-heart {
    position: absolute;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(var(--rgb-black), 0.35);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, background 0.2s ease;
}

.fav-heart svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
    stroke: var(--white);
    stroke-width: 0;
    transition: fill 0.2s ease;
}

.fav-heart.fav-active svg {
    fill: var(--error);
    stroke: var(--error);
}

.fav-heart:hover {
    background: rgba(var(--rgb-black), 0.55);
}

/* Card heart — top-right of .img-wrap */
.fav-card {
    top: 8px;
    right: 8px;
}

/* Desktop: show on hover only for grid cards */
@media (min-width: 768px) {
    .project-card.grid .fav-card {
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .project-card.grid:hover .fav-card,
    .project-card.grid .fav-card.fav-active {
        opacity: 1;
    }
}

/* Project page heart — top-right of gallery viewport */
.fav-project {
    top: 16px;
    right: 16px;
    background: rgba(var(--rgb-black), 0.5);
    pointer-events: auto;
}

.gallery-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Header favorites link */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Inline primary nav — desktop only; on mobile these live in the slide menu */
.header-nav {
    display: none;
    align-items: center;
    gap: 24px;
}

.header-nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    padding: 6px 0;
    transition: color .2s;
}

.header-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

.header-nav a:hover {
    color: var(--blue);
}

.header-nav a:hover::after {
    transform: scaleX(1);
}

@media (min-width: 992px) {
    .header-nav {
        display: flex;
        margin-left: auto;
    }
    /* No hamburger on desktop — nav is inline, account is an icon, near-me is the pin. */
    .navbar-toggler {
        display: none;
    }
    /* Primary nav is inline on desktop — drop the duplicate from the (unreachable) menu. */
    .menuSlide .nav-item--primary {
        display: none;
    }
}

.fav-header-link {
    display: none;
    align-items: center;
    position: relative;
    color: var(--text-light);
    text-decoration: none;
}

.fav-header-link.has-favs {
    display: flex;
}

.fav-header-link svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 1.2;
    transition: stroke 0.2s ease;
}

.fav-header-link:hover svg {
    stroke: var(--blue);
}

/* Pulse on the header heart when a favorite is added */
@keyframes fav-header-pulse {
    0%   { transform: scale(1);    fill: none;    stroke: var(--navy); }
    25%  { transform: scale(1.4);  fill: var(--error); stroke: var(--error); }
    50%  { transform: scale(0.95); fill: var(--error); stroke: var(--error); }
    75%  { transform: scale(1.15); fill: var(--error); stroke: var(--error); }
    100% { transform: scale(1);    fill: none;    stroke: var(--navy); }
}

.fav-header-link.fav-header-pulse svg {
    animation: fav-header-pulse 0.7s ease-in-out;
    transform-origin: center;
}

/* Badge: tiny navy dot */
.fav-badge-count {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--accent-royal);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--white);
}

/* Favorites page */
.favorites-page {
    min-height: 60vh;
}

.favorites-header {
    margin-bottom: 28px;
}

.favorites-header h1 {
    margin-bottom: 4px;
}

.favorites-header h1 #favorites-count {
    font-family: 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--text-light);
    font-size: 0.7em;
}

.favorites-subtitle {
    color: var(--text-light);
    font-size: 15px;
    margin: 0;
}

.favorites-loader {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
    font-size: 15px;
}

/* "No longer available" placeholder card — IDs-only storage means no name/image */
.fav-unavailable {
    opacity: 0.65;
}

.fav-unavailable .card-info h3 {
    color: var(--text-light);
    font-size: 15px;
    font-style: italic;
}

.favorites-empty {
    text-align: center;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.favorites-empty-heart svg {
    fill: none;
    stroke: var(--border-blue);
    stroke-width: 1;
    margin-bottom: 20px;
    animation: fav-pulse 2.5s ease-in-out infinite;
}

@keyframes fav-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

.favorites-empty-text {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 28px;
}

.favorites-empty .btn-cta {
    display: inline-block;
    padding: 14px 32px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-family: 'Larsseit-Bold', sans-serif;
    font-weight: normal;
    transition: background 0.2s ease, transform 0.2s ease;
}

.favorites-empty .btn-cta:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
}

/* Hidden description for Schema.org — ready for tooltip styling later */
.tooltip_gh { display: none; }

/* ==========================================================================
   BUILDER PROFILE PAGE — mobile-first
   ========================================================================== */

.builder-page {
    max-width: var(--container);
    margin: 0 auto;
}

/* ---- Hero with project image ---- */
.builder-hero {
    position: relative;
    height: 240px;
    background-color: var(--navy); /* reserved-box placeholder behind the hero <img> */
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

/* Real hero <img> (replaces the old CSS background-image so it can be preloaded / prioritized).
   Absolute fill behind the overlay; object-fit mirrors the old background-size/position:center. */
.builder-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.builder-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--rgb-blue-deep), 0.85) 0%, rgba(var(--rgb-blue-deep), 0.3) 50%, rgba(var(--rgb-black), 0.1) 100%);
    display: flex;
    align-items: flex-end;
}

.builder-hero-content {
    padding: 24px 20px;
    width: 100%;
}

.builder-hero-label {
    display: inline-block;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(var(--rgb-white), 0.7);
    margin-bottom: 6px;
}

.builder-hero h1 {
    color: var(--white);
    font-size: 28px;
    margin: 0;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(var(--rgb-black), 0.3);
}

/* ---- Profile section ---- */
.builder-profile {
    padding: 20px;
}

.builder-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-light);
    margin-bottom: 20px;
}

.builder-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.builder-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--blue);
    border-radius: var(--radius-pill);
    color: var(--blue);
    text-decoration: none;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
    align-self: flex-start;
}

.builder-phone svg {
    flex-shrink: 0;
}

.builder-phone:hover {
    background: var(--blue);
    color: var(--white);
}

.builder-phone:hover svg {
    stroke: var(--white);
}

.builder-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.builder-actions .btn-visit-website {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
}

.builder-actions .btn-visit-website svg {
    flex-shrink: 0;
    stroke: var(--white);
}

.builder-actions .builder-phone {
    margin: 0;
}

/* ---- Stats row with dividers ---- */
.builder-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.builder-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--border);
}

.builder-stat:first-child {
    padding-left: 0;
}

.builder-stat:last-child {
    border-right: none;
}

.builder-stat-val {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 20px;
    color: var(--navy);
    white-space: nowrap;
    line-height: 1.2;
}

.builder-stat-label {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    white-space: nowrap;
}

/* ---- Projects section ---- */
.builder-page .section {
    padding: 0 20px 20px;
}

.builder-page .section-title {
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 16px;
    text-align: center;
}

/* Tablet+ */
@media (min-width: 576px) {
    .builder-hero {
        height: 300px;
    }

    .builder-hero h1 {
        font-size: 34px;
    }

    .builder-stat {
        padding: 0 20px;
    }

    .builder-stat-val {
        font-size: 22px;
    }

    .builder-stat-label {
        font-size: 11px;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .builder-hero {
        height: 360px;
        border-radius: var(--radius);
        margin: 16px 16px 0;
    }

    .builder-hero-content {
        padding: 32px;
    }

    .builder-hero-label {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .builder-hero h1 {
        font-size: 40px;
    }

    .builder-profile {
        padding: 28px 32px;
    }

    .builder-desc {
        font-size: 15px;
    }

    .builder-meta {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .builder-stat {
        padding: 0 24px;
    }

    .builder-page .section {
        padding: 0 16px 32px;
    }
}

@media (min-width: 1024px) {
    .builder-hero h1 {
        font-size: 46px;
    }
}

/* ==========================================================================
   LAYOUT — structural styles (moved from inline <style> in layout.php)
   ========================================================================== */

body {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    color: var(--text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.5;
}

.container {
    max-width: 1140px;
}

header {
    padding: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

header .navbar {
    padding: 8px 0;
    display: flex;
    align-items: center;
}

header .navbar > .lite-container {
    width: 100%;
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

header .navbar-brand {
    display: block;
    padding: 0;
}

header .navbar-brand img {
    width: 195px;
    height: 33px;
}

/* homz.io wordmark is more compact (3.2:1) than guidehabitation (6:1) — size to its
   own ratio and a touch shorter so its heavier glyphs sit visually level with the FR logo */
html[lang="en"] header .navbar-brand img {
    width: auto;
    height: 27px;
}

.header-searchwrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-search {
    flex: 1 1 auto;
    min-width: 0;
}

/* Account icon — desktop only; on mobile "Mon compte" lives in the slide menu */
.header-account {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    text-decoration: none;
    transition: color .2s;
}

.header-account:hover {
    color: var(--blue);
}

.header-account svg {
    width: 22px;
    height: 22px;
}

/* Account icon shows on desktop only. Placed after the base rule above so it
   wins the cascade (the earlier >=992 block is out-ordered by that base). */
@media (min-width: 992px) {
    .header-account {
        display: inline-flex;
    }
}

.header-search .search-box {
    width: 100%;
}

.header-search input {
    width: 100%;
    height: 46px;
    padding: 0 18px 0 44px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 16px;
    color: var(--text);
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.header-search .search-ic {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--text-light);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}

.header-search input:focus {
    outline: none;
    border-color: var(--accent-royal);
    box-shadow: 0 0 0 4px var(--accent-royal-tint);
}

.header-search input::placeholder {
    color: var(--text-light);
}

.navbar-toggler {
    width: 30px;
    height: 25px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    margin-left: 8px;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-custom-icon {
    display: inline-block;
    width: 30px;
    height: 20px;
    background: url('https://www.guidehabitation.ca/wp-content/themes/gh/img/navigation/ghab_icon_menu50.svg') no-repeat center;
    background-size: contain;
}

.menuSlide {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: var(--navy);
    z-index: 1050;
    transition: right .3s ease;
    overflow-y: auto;
}

.menuSlide.open {
    right: 0;
}

.menuSlide .navbar {
    padding: 15px;
}

.menuSlide .nav-link {
    color: var(--white);
    font-size: 18px;
    padding: 10px 0;
}

.menuSlide .nav-link:hover {
    color: rgba(var(--rgb-white), .8);
}

.btn-close-menu {
    background: transparent;
    border: 0;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.btn-close-menu svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

h1.title-post {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-size: 30px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 30px 0;
    color: var(--text);
}

.btn-info {
    background: var(--info);
    border-color: var(--info);
}

footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 40px 0 0;
}

footer a {
    color: var(--footer-text);
}

footer a:hover {
    color: var(--white);
    text-decoration: none;
}

.footer-logo {
    margin-bottom: 0;
}

.footer-logo img {
    height: 34px;
    width: auto;
    display: block;
}

/* homz.io wordmark is chunkier than guidehabitation — trim a touch to match its weight */
html[lang="en"] .footer-logo img {
    height: 28px;
}

.footer-bottom {
    color: var(--footer-text);
    margin-top: 28px;
    padding: 0 0 28px;
    font-size: 14px;
}

/* Bottom bar: hairline divider, legal left, language switch bold + right-aligned */
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(var(--rgb-white), .1);
    padding-top: 20px;
}

.footer-lang-switch {
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}

.footer-lang-switch:hover {
    color: var(--white);
    text-decoration: underline;
}

.form-control {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 12px;
}

textarea.form-control {
    min-height: 120px;
}

.island {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto 25px;
}

.island:last-child {
    margin-bottom: 0;
}

/* Back to top button (moved from inline <style> in footer.php) */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--rgb-blue), 0.7);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: background .2s, opacity .2s;
    box-shadow: 0 2px 10px rgba(var(--rgb-black), 0.2);
}

.back-to-top:hover {
    background: rgba(var(--rgb-blue), 0.9);
}

.back-to-top.visible {
    display: flex;
}

@media (max-width: 767px) {
    /* Search bar drops to a full-width row under the logo/hamburger (legacy mobile
       layout). Home stays hidden via `.page-home .header-search` — hero owns search. */
    header .navbar > .lite-container {
        row-gap: 10px;
    }
    .navbar-brand {
        order: 1;
    }
    .header-actions {
        order: 2;
    }
    .header-searchwrap {
        order: 3;
        flex-basis: 100%;
    }
    .header-search .search-box,
    .header-search input {
        width: 100%;
    }

    .menuSlide {
        width: 100%;
        right: -100%;
    }
}

/* ================================================================
   ACTIVATION PAGE — Bilingual preview
   ================================================================ */
.activation-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px 18px;
    padding: 22px 0 4px;
}
.activation-nav-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gh-text-muted);
}
.activation-nav-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--gh-blue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color .2s ease, color .2s ease;
}
.activation-nav-link:hover,
.activation-nav-link:focus {
    color: var(--gh-blue-dark);
    border-bottom-color: var(--accent);
}

.activation-header {
    text-align: center;
    padding: 30px 0 10px;
}
.activation-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}
.activation-subtitle {
    color: var(--gray-500);
    font-size: 15px;
    margin: 0;
}
.activation-lang-section {
    margin: 30px 0;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}
.activation-lang-label {
    background: var(--navy, var(--navy));
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
}

/* Activation preview: hide nearby/other-projects sections */
.activation-page .promoter-projects,
.activation-page .promoter-count,
.activation-page .nearby-section { display: none; }

/* Alerte projet : le courriel réel, dans son propre document (voir
   post/article-activation.php). 640 px = la largeur des tables du gabarit
   d'infolettre ; la hauteur de départ est généreuse parce que l'ajustement
   onload échoue en silence si le document met du temps à se poser. */
.activation-email-frame {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 1400px;
    margin: 16px auto;
    border: 0;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(var(--rgb-black), .12);
}
.activation-email-missing {
    color: var(--gray-500);
    font-size: 14px;
    padding: 20px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT PORTAL
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────── */
.client-layout { display: flex; min-height: calc(100vh - 60px); }
.client-main { flex: 1; padding: 24px 28px; max-width: 1100px; }

/* ── Sidebar ────────────────────────────────────────────────── */
.client-sidebar {
    width: 220px; flex-shrink: 0;
    background: var(--white); border-right: 1px solid var(--border-color, var(--gray-200));
    padding: 16px 10px; display: flex; flex-direction: column; gap: 2px;
}
.client-sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px 14px; border-bottom: 1px solid var(--border-color, var(--gray-200)); margin-bottom: 8px;
}
.client-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-royal); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.client-user-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.client-user-name { font-size: 12px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-user-email { font-size: 10px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-nav-section {
    font-size: 10px; font-weight: 600; color: var(--gray-400);
    letter-spacing: .06em; text-transform: uppercase; padding: 10px 8px 4px;
}
.client-nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 7px;
    font-size: 12px; color: var(--gray-600); text-decoration: none;
    transition: background .12s, color .12s;
}
.client-nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
.client-nav-item.active { background: var(--accent-royal-tint); color: var(--accent-royal); font-weight: 500; }
.client-nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .65; }
.client-nav-item.active .client-nav-icon { opacity: 1; }
.client-nav-spacer { flex: 1; }
.client-nav-logout { margin-top: auto; color: var(--gray-400); }
.client-nav-logout:hover { color: var(--error-strong); background: var(--error-bg); }

/* ── Login ──────────────────────────────────────────────────── */
.client-login-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 60px); padding: 20px;
}
.client-login-card {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 12px; padding: 32px; width: 100%; max-width: 400px;
    box-shadow: 0 4px 16px rgba(var(--rgb-black), .06);
}
.client-login-card h1 {
    font-size: 20px; font-weight: 700; color: var(--ink);
    margin-bottom: 4px; letter-spacing: -.3px;
}
.client-login-subtitle { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
.client-login-error {
    background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 8px;
    padding: 10px 14px; font-size: 12px; color: var(--error-strong); margin-bottom: 16px;
}
.client-login-success {
    background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 8px;
    padding: 10px 14px; font-size: 13px; color: var(--success-dark); margin-bottom: 16px;
}
.client-login-email-readonly {
    padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: 8px; font-size: 14px; color: var(--gray-700);
}

/* ── Profile (Mon compte) ───────────────────────────── */
.profile-page { max-width: 720px; }
.profile-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 20px; }
.profile-card-stack { display: flex; flex-direction: column; gap: 12px; }
.profile-version-switch { align-self: flex-end; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: -6px; }
.profile-version-switch:hover { text-decoration: underline; }
.profile-admin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-admin-link { padding: 6px 14px; border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white); color: var(--accent-royal); font-size: 13px; font-weight: 600; text-decoration: none; }
.profile-admin-link:hover { background: var(--gray-50); border-color: var(--accent-royal); text-decoration: none; }
.profile-sim { border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px; background: var(--gray-50); }
.profile-sim-active { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 10px; color: var(--ink); }
.profile-sim-stop { font-size: 13px; color: var(--error-strong); text-decoration: underline; white-space: nowrap; }
.profile-sim-label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.profile-sim-row { display: flex; gap: 8px; }
.profile-sim-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; }
.profile-sim-button { padding: 8px 14px; border: none; border-radius: 6px; background: var(--ink); color: var(--white); font-size: 14px; cursor: pointer; white-space: nowrap; }
/* ProfileProjects island — "Mes projets & alertes" (mobile-first) */
.pp { display: flex; flex-direction: column; gap: 18px; }
.pp__error { font-size: 13px; color: var(--error-strong); background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 6px; padding: 8px 10px; }
.pp__actionbar { display: flex; flex-direction: column; gap: 6px; }
.pp__add {
    align-self: flex-start; display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: 6px;
    background: var(--white); border: 1px solid var(--gray-300); color: var(--accent-royal);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.pp__add:hover { background: var(--gray-50); border-color: var(--accent-royal); text-decoration: none; }
.pp__add-note { font-size: 12px; color: var(--text-muted); }
.pp__section { display: flex; flex-direction: column; gap: 8px; }
.pp__title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pp__count { font-size: 13px; font-weight: 400; color: var(--gray-500); }
.pp__list { display: flex; flex-direction: column; gap: 8px; }
.pp__more {
    align-self: flex-start; margin-top: 2px; padding: 7px 14px;
    border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white);
    color: var(--ink); font-size: 13px; cursor: pointer; font-family: inherit;
}
.pp__more:hover { background: var(--gray-50); }
.pp__more:disabled { opacity: .6; cursor: default; }

.pp-card {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 12px 14px;
}
.pp-card__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-card__badge {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 2px 8px; border-radius: 4px; background: var(--gray-100); color: var(--gray-600);
    text-transform: uppercase;
}
.pp-card__title { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--accent-royal); text-decoration: none; overflow-wrap: anywhere; }
.pp-card__title:hover { text-decoration: underline; }
.pp-card__title--plain { color: var(--gray-600); }
.pp-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-card__action {
    font-size: 11px; padding: 3px 9px; border-radius: 4px;
    background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-500);
    cursor: default;
}
.pp-card__action--link {
    background: var(--white); border-color: var(--gray-300); color: var(--accent-royal);
    text-decoration: none; cursor: pointer;
}
.pp-card__action--link:hover { background: var(--gray-50); border-color: var(--accent-royal); text-decoration: none; }

/* Per-bucket badge tints, keyed off the section's data-section attribute. Past sections
   keep the neutral default badge; upcoming/online/drafts get a distinct accent. */
.pp__section[data-section="alertsUpcoming"] .pp-card__badge { background: var(--warning-light); color: var(--warning-dark); }
.pp__section[data-section="projectsOnline"] .pp-card__badge { background: var(--success-bg); color: var(--success-dark); }
.pp__section[data-section="drafts"] .pp-card__badge { background: var(--blue-tint); color: var(--blue-dark); }

@media (min-width: 768px) {
    .pp-card { flex-direction: row; align-items: center; justify-content: space-between; }
    .pp-card__main { flex: 1 1 auto; }
    .pp-card__actions { flex: 0 0 auto; }
}

.profile-row {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 14px 18px; font-size: 14px; color: var(--gray-700);
}
.profile-row-label { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.profile-row-value { font-size: 14px; color: var(--gray-900); }
.profile-row--loggedout { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.profile-loggedout-msg { margin: 0; color: var(--gray-600); }
.profile-login-button {
    display: inline-block; padding: 10px 18px; background: var(--accent-royal); color: var(--white);
    border-radius: 8px; font-weight: 600; text-decoration: none;
}
.profile-login-button:hover { background: var(--accent-royal-dark); }
.profile-row--logout { display: flex; align-items: center; }
.profile-logout-button {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent-royal); font-size: 14px; font-weight: 500; font-family: inherit;
}
.profile-logout-button:hover { text-decoration: underline; }
.profile-logout-icon { color: var(--error-strong); font-size: 18px; line-height: 1; }
.profile-language-display { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-language-edit-link { color: var(--accent-royal); text-decoration: none; font-size: 13px; }
.profile-language-edit-link:hover { text-decoration: underline; }
.profile-language-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.profile-language-label { font-size: 12px; color: var(--gray-500); }
.profile-language-select {
    padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 8px;
    font-size: 14px; font-family: inherit; max-width: 240px;
}
.profile-language-actions { display: flex; gap: 8px; }
.profile-language-save {
    padding: 8px 16px; border: none; border-radius: 8px;
    background: var(--accent-royal); color: var(--white); font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}
.profile-language-save:hover { background: var(--accent-royal-dark); }
.profile-language-cancel {
    padding: 8px 16px; border: 1px solid var(--gray-300); border-radius: 8px;
    background: var(--white); color: var(--gray-700); font-size: 13px; font-family: inherit; cursor: pointer;
}
.profile-language-cancel:hover { background: var(--gray-50); }
.profile-language-status { font-size: 12px; color: var(--gray-500); }

/* ── /profile/alerts/ — "Mes abonnements" subscription manager ─── */
.alerts-manage-page { background: var(--gh-bg); padding: 28px 32px; border-radius: 16px; max-width: 760px; margin: 0 auto; }
.alerts-manage-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.alerts-manage-title { font-size: 28px; font-weight: 600; color: var(--gh-text); margin: 0 0 8px; line-height: 1.2; }
/* Embedded in Mon compte: one section of the profile card stack, so the type scale
   drops to the same level as .pp__title (ProfileProjects) instead of page scale. */
.alerts-manage-form--embedded { gap: 12px; }
.alerts-manage-form--embedded .alerts-manage-title { font-size: 15px; color: var(--ink); margin: 0; }
.alerts-manage-form--embedded .alerts-manage-intro { font-size: 14px; }
.alerts-manage-form--embedded .alerts-manage-section-title { font-size: 14px; margin: 4px 0 0; }
.alerts-manage-form--embedded .alerts-manage-item label { font-size: 14px; }
.alerts-manage-intro { margin: 0; color: var(--gh-text); font-size: 16px; line-height: 1.4; }
.alerts-manage-features { margin: 0 0 8px 24px; padding: 0; color: var(--gh-text); font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.alerts-manage-features li { margin: 4px 0; }
.alerts-manage-section-title { font-size: 22px; font-weight: 500; color: var(--gh-text); margin: 12px 0 4px; }
.alerts-manage-secteurs { display: flex; flex-direction: column; gap: 14px; }
.alerts-manage-column { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.alerts-manage-item { margin: 0; }
.alerts-manage-item label { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 16px; color: var(--gh-text); }
.alerts-manage-item input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    width: 24px; height: 24px; border: 1px solid var(--gh-border); border-radius: 4px;
    background: var(--gh-white); cursor: pointer; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s, border-color .12s;
}
.alerts-manage-item input[type=checkbox]:checked {
    background: var(--gh-blue); border-color: var(--gh-blue);
}
.alerts-manage-item input[type=checkbox]:checked::after {
    content: ''; width: 7px; height: 12px;
    border: solid var(--gh-white); border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.alerts-manage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.alerts-manage-save {
    padding: 10px 20px; border: none; border-radius: 6px;
    background: var(--gh-blue); color: var(--gh-white);
    font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.alerts-manage-save:hover { background: var(--gh-blue-dark); }
.alerts-manage-unsuball {
    padding: 10px 20px; border: none; border-radius: 6px;
    background: var(--gh-text-light); color: var(--gh-white);
    font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.alerts-manage-unsuball:hover { background: var(--gh-text); }
.alerts-manage-disclaimer { margin: 12px 0 0; color: var(--gh-text); font-size: 13px; line-height: 1.5; }
.alerts-manage-disclaimer a { color: var(--gh-blue); text-decoration: underline; }
.alerts-manage-status { font-size: 13px; color: var(--gh-text-light); margin-top: 4px; }

@media (min-width: 640px) {
    .alerts-manage-secteurs { flex-direction: row; gap: 32px; }
}

.client-form-group { margin-bottom: 16px; }
.client-form-label { display: block; font-size: 12px; font-weight: 500; color: var(--gray-700); margin-bottom: 5px; }
.client-form-input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--gray-900);
    transition: border-color .15s;
}
.client-form-input:focus { outline: none; border-color: var(--accent-royal); box-shadow: 0 0 0 3px rgba(var(--rgb-royal), .1); }
.client-form-submit {
    width: 100%; padding: 11px; border: none; border-radius: 8px;
    background: var(--accent-royal); color: var(--white); font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background .15s;
}
.client-form-submit:hover { background: var(--accent-royal-dark); }
.client-cookie-notice {
    margin-top: 14px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--gray-700);
    line-height: 1.5;
    text-align: left;
}
.client-cookie-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--gray-700);
    cursor: pointer;
}
.client-cookie-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Dashboard ──────────────────────────────────────────────── */
.client-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.client-page-title { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.client-welcome { font-size: 13px; color: var(--gray-500); }
.client-project-grid { display: flex; flex-direction: column; gap: 12px; }
.client-project-card {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 12px; padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .06);
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
/* La carte EST le bouton (Denis, 2026-08-19) : sans métriques à droite, plus
   rien ne signalait qu'on peut cliquer. Le survol INVERSE les couleurs — fond
   d'accent, texte blanc — plutôt que d'accumuler ombre, décalage et teinte de
   texte : trois effets discrets se lisent moins bien qu'un seul franc.

   🔴 `text-decoration: none` est OBLIGATOIRE ici. La carte est un <a>, et la
   règle globale `a:hover { text-decoration: underline }` (ligne 158) souligne
   sinon TOUT son contenu — nom et méta compris. C'est ce qu'on voyait le
   2026-08-19 avant correction. Toute carte-lien de ce fichier doit la
   neutraliser explicitement. */
.client-project-card:hover {
    background: var(--accent-royal); border-color: var(--accent-royal);
    box-shadow: 0 4px 16px rgba(var(--rgb-black), .12);
    text-decoration: none;
}
.client-project-card:hover .client-project-name { color: var(--white); }
/* Blanc translucide plutôt qu'un gris : un --gray-400 sur fond royal tombe sous
   le seuil de contraste, alors que le blanc à 80 % garde la hiérarchie. */
.client-project-card:hover .client-project-meta { color: var(--white); opacity: .8; }
.client-project-card:hover .client-project-go { color: var(--white); }
.client-project-card:focus-visible { outline: 2px solid var(--accent-royal); outline-offset: 2px; }
/* Le chevron remplace le bouton disparu : il porte à lui seul l'affordance. */
.client-project-go {
    flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--gray-400);
    transition: color .15s;
}
.client-project-info { flex: 1; min-width: 0; }
.client-project-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.client-project-meta { font-size: 11px; color: var(--gray-400); }
.client-project-stats { display: flex; gap: 16px; flex-shrink: 0; }
.client-stat-mini { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.client-stat-mini-val { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1; }
.client-stat-mini-lbl { font-size: 9px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; }
.client-quality-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.client-quality-badge.good { background: var(--success-bg); color: var(--success-dark); }
.client-quality-badge.mid { background: var(--warning-light); color: var(--warning-dark); }
.client-quality-badge.bad { background: var(--critical-light); color: var(--critical); }
.client-no-data { text-align: center; padding: 40px 20px; color: var(--gray-400); font-size: 14px; }

/* ── Project Detail ─────────────────────────────────────────── */
/* ── Single-project workspace: full-width + role-gated tab bar ───── */
.client-layout--full { display: block; }
.client-layout--full .client-main { margin: 0 auto; }
/* Le tableau de bord ne porte plus qu'un nom et un bouton par fiche : 1100px de
   large etirait une carte de deux lignes sur toute la page (Denis, 2026-08-19). */
.client-main--narrow { max-width: 720px; }

/* ── Légende des métriques (onglet Statistiques) ─────────────────────────
   Repliée par défaut : elle sert à qui doute d'un chiffre, pas à qui le lit. */
.client-legend { margin: 22px 0 4px; border-top: 1px solid var(--border-color, var(--gray-200)); padding-top: 14px; }
.client-legend-summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-royal);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.client-legend-summary::-webkit-details-marker { display: none; }
.client-legend-summary::before { content: '\25B8'; font-size: 10px; transition: transform .15s ease; }
.client-legend[open] .client-legend-summary::before { transform: rotate(90deg); }
.client-legend-list { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.client-legend-term { font-size: 12px; font-weight: 700; color: var(--ink); }
.client-legend-def { margin: 0; font-size: 12px; line-height: 18px; color: var(--gray-500); }
.client-legend-foot { margin: 14px 0 0; font-size: 11px; line-height: 17px; color: var(--gray-400); }
@media (max-width: 575px) {
    /* Deux colonnes deviennent illisibles sous 575px : le terme passe au-dessus. */
    .client-legend-list { grid-template-columns: 1fr; gap: 2px; }
    .client-legend-def { margin-bottom: 8px; }
}
/* La deconnexion a suivi la disparition de la barre laterale — discrete, a
   droite du titre, la ou vivait « Bienvenue, {nom} ». */
.client-header-logout { font-size: 13px; color: var(--gray-500); text-decoration: none; }
.client-header-logout:hover { color: var(--accent-royal); text-decoration: underline; }

.client-tabs {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.client-tabs-list { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.client-tab {
    flex: 0 0 auto; padding: 10px 14px; font-size: 13px; font-weight: 600;
    color: var(--gray-500); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.client-tab:hover { color: var(--ink); }
.client-tab.is-active { color: var(--accent-royal); border-bottom-color: var(--accent-royal); }
.client-tabs-logout { flex: 0 0 auto; font-size: 12px; color: var(--gray-400); text-decoration: none; }
.client-tabs-logout:hover { color: var(--ink); text-decoration: underline; }

.client-tab-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.client-tab-h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.client-month-select {
    font-size: 13px; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer;
}

/* ── Dashboard tab: three cards (Aperçu · Prix · Complétude) ──
   House style: white card, muted uppercase label / bold value, a text-only
   status pill (colour carries meaning — no icons), primary + ghost buttons. */
.client-dash { display: grid; gap: 16px; }

/* Shared card shell. */
.client-dash-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
}
.client-dash-card-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; margin: 0; }

/* Card 1 · Aperçu — photo + label/value fields. */
.client-dash-overview { display: flex; flex-direction: column; gap: 16px; }
.client-dash-media {
    display: block; border-radius: var(--radius-sm); overflow: hidden;
    line-height: 0; background: var(--gray-100);
}
.client-dash-media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.client-dash-overview-body { display: grid; gap: 14px; flex: 1; align-content: start; justify-items: start; }
.client-dash-fields { margin: 0; display: grid; gap: 10px; }
.client-dash-field { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.client-dash-field dt {
    margin: 0; flex-shrink: 0; color: var(--text-muted); align-self: center;
    text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
}
.client-dash-field dd { margin: 0; color: var(--ink); font-weight: 700; }

.client-dash-meta { margin: 12px 0 0 0; font-size: 12.5px; color: var(--text-muted); }

/* Status band — full-bleed coloured header on a dashboard card. On Prix it is
   graded by freshness level (red = périmé … green = à jour); on Complétude it
   carries the binary state (red = incomplète, green = complète). Colour alone
   conveys urgency, at a glance. */
.client-dash-urgency {
    margin: -20px -22px 16px; padding: 12px 22px;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    font-size: 13.5px;
}
.client-dash-urgency .u-kicker {
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
    padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(var(--rgb-black), .18);
}
.client-dash-urgency .u-msg { font-weight: 700; }
.client-dash-urgency .u-sub { font-weight: 400; opacity: .88; }
.client-dash-urgency.is-crit { background: var(--critical); color: var(--white); }
.client-dash-urgency.is-warn { background: var(--warning); color: var(--white); }
.client-dash-urgency.is-info { background: var(--accent-royal-tint); color: var(--accent-royal); }
.client-dash-urgency.is-ok   { background: var(--success-strong); color: var(--white); }
.client-dash-urgency.is-mute { background: var(--gray-100); color: var(--gray-500); }
.client-dash-prices-title { margin-bottom: 12px; }

/* Actions — primary + ghost buttons. */
.client-dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.client-dash-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 9px 18px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: background .2s ease, border-color .2s ease;
}
.client-dash-btn-primary { background: var(--accent-royal); color: var(--white); }
.client-dash-btn-primary:hover { background: var(--ink); }
.client-dash-btn-ghost { background: var(--white); color: var(--accent-royal); border-color: var(--border-blue-strong); }
.client-dash-btn-ghost:hover { background: var(--accent-royal-tint); }

/* ── Inline price/progress/delivery editor (managers) ───────────────────── */
.client-dash-editor { display: flex; flex-direction: column; gap: 18px; }
.cde-group { border: 0; padding: 0; margin: 0; }
.cde-legend {
    padding: 0; margin: 0 0 10px 0; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.cde-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.cde-check {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: 13px; color: var(--ink); transition: border-color .2s ease, background .2s ease;
}
.cde-check:has(input:checked) { border-color: var(--accent-royal); background: var(--accent-royal-tint); }
.cde-check input, .cde-dispo input { width: 16px; height: 16px; accent-color: var(--accent-royal); cursor: pointer; }

.cde-room { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.cde-room:first-of-type { border-top: 0; }
.cde-dispo { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 1 1 auto; font-size: 14px; color: var(--ink); }
.cde-price {
    flex: 0 0 auto; width: 130px; min-height: 38px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; color: var(--ink); background: var(--white); text-align: right;
}
.cde-price:focus { outline: none; border-color: var(--accent-royal); }
.cde-price:disabled { background: var(--gray-100); color: var(--text-muted); }

.cde-select {
    width: 100%; min-height: 40px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; color: var(--ink); background: var(--white); cursor: pointer;
}
.cde-select:focus { outline: none; border-color: var(--accent-royal); }

.cde-hint { margin: 10px 0 0 0; font-size: 12px; color: var(--text-muted); }
.cde-error { margin: 4px 0 0 0; font-size: 13px; font-weight: 600; color: var(--critical); }

.client-dash-readonly { margin: 2px 0 0 0; font-size: 12px; color: var(--text-muted); font-style: italic; }

.client-tab-empty { text-align: center; padding: 48px 16px; color: var(--gray-500); }
.client-tab-empty-text { font-size: 14px; margin-top: 6px; }

@media (min-width: 768px) {
    /* Aperçu becomes a row: photo left, fields right. With no photo the body
       flexes to full width, so the layout holds either way. */
    .client-dash-overview { flex-direction: row; align-items: stretch; }
    .client-dash-media { width: 240px; flex-shrink: 0; }
    .client-dash-media img { height: 100%; min-height: 160px; }
}

.client-project-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px;
}
.client-project-back {
    display: inline-block; font-size: 12px; color: var(--gray-500);
    text-decoration: none; margin-bottom: 6px; transition: color .12s;
}
.client-project-back:hover { color: var(--accent-royal); }
.client-project-header-info h1 { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; margin-bottom: 2px; }
.client-project-header-meta { font-size: 12px; color: var(--gray-500); }
.client-project-permalink {
    font-size: 12px; color: var(--accent-royal); text-decoration: none;
    border: 1px solid var(--border-blue-strong); border-radius: 6px; padding: 5px 12px;
    transition: background .12s;
}
.client-project-permalink:hover { background: var(--accent-royal-tint); }

/* KPI row */
.client-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr) 180px; gap: 12px; margin-bottom: 20px; }
.client-stat-card {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    position: relative; overflow: hidden;
}
.client-stat-card::before { content: ''; display: block; height: 3px; border-radius: 3px 3px 0 0; position: absolute; top: 0; left: 0; right: 0; }
.client-stat-card.c-blue::before { background: var(--accent-royal); }
.client-stat-card.c-green::before { background: var(--success-strong); }
.client-stat-card.c-amber::before { background: var(--warning); }
.client-stat-label { font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; margin-top: 6px; }
.client-stat-value { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; line-height: 1; }
.client-stat-sub { font-size: 11px; color: var(--gray-600); margin-top: 4px; }

/* Quality card */
.client-quality-card {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    position: relative; overflow: hidden;
}
.client-quality-card::before {
    content: ''; display: block; height: 3px; border-radius: 3px 3px 0 0;
    position: absolute; top: 0; left: 0; right: 0;
    background: linear-gradient(to right, var(--critical) 0%, var(--warning) 50%, var(--success-dark) 100%);
}
.client-quality-score-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.client-quality-score-main { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.client-quality-score-max { font-size: 14px; color: var(--gray-400); }
.client-quality-bar { height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.client-quality-bar-fill { height: 100%; border-radius: 3px; }

/* Action cards */
.client-actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.client-action-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 14px 16px;
    text-decoration: none; color: var(--ink);
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    transition: box-shadow .15s, border-color .15s;
}
.client-action-card:hover { box-shadow: 0 4px 12px rgba(var(--rgb-black), .08); border-color: var(--accent-royal); }
.client-action-icon { font-size: 20px; flex-shrink: 0; }
.client-action-label { font-size: 13px; font-weight: 600; }
.client-action-arrow { margin-left: auto; color: var(--gray-400); font-size: 16px; }

/* Section header */
.client-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.client-section-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.client-section-count { font-size: 12px; color: var(--gray-400); }
.client-section-link { color: var(--accent-royal); text-decoration: none; font-weight: 600; }
.client-section-link:hover { text-decoration: underline; }

/* Leads table */
.client-table-wrap {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    margin-bottom: 24px;
}
.client-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.client-table thead th {
    padding: 10px 16px; text-align: left;
    font-size: 10px; font-weight: 600; color: var(--gray-400);
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--gray-50); border-bottom: 1px solid var(--border-color, var(--gray-200));
}
.client-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .1s; }
.client-table tbody tr:last-child { border-bottom: none; }
.client-table tbody tr:hover { background: var(--off-white); }
.client-table tbody td { padding: 11px 16px; vertical-align: middle; }
.client-table .td-name { font-weight: 600; color: var(--ink); }
.client-table .td-email { font-size: 11px; color: var(--accent-royal); }
.client-table .td-phone { font-size: 11px; color: var(--gray-500); }
.client-table .td-date { font-size: 11px; color: var(--gray-400); }
.client-table .td-msg { font-size: 11px; color: var(--gray-500); max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quality issues */
.client-issues-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.client-issue {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 8px; padding: 10px 14px; font-size: 12px;
}
.client-issue-badge {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; border-radius: 4px; padding: 2px 7px; flex-shrink: 0;
}
.client-issue-badge.critical { background: var(--critical-light); color: var(--critical); }
.client-issue-badge.warning { background: var(--warning-light); color: var(--warning-dark); }
.client-issue-badge.info { background: var(--accent-royal-tint); color: var(--accent-royal); }
.client-issue-text { color: var(--gray-700); flex: 1; }

/* ── Project leads dashboard (mobile-first) ─────────────────── */

.client-leads-back { margin-bottom: 12px; }
.client-leads-back-link {
    font-size: 12px; color: var(--accent-royal); text-decoration: none;
    border: 1px solid var(--border-blue-strong); border-radius: 6px; padding: 4px 10px;
    display: inline-block; transition: background .12s;
}
.client-leads-back-link:hover { background: var(--accent-royal-tint); }

.client-leads-header {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 18px;
}
.client-leads-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px 0; letter-spacing: -.2px; }
.client-leads-subtitle { font-size: 13px; color: var(--gray-600); }
.client-leads-current { color: var(--warning); font-size: 11px; font-weight: 600; margin-left: 6px; }

.client-leads-month-form { display: flex; align-items: center; gap: 8px; }
.client-leads-month-label {
    font-size: 10px; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .04em;
}
.client-leads-month-select {
    padding: 6px 28px 6px 12px; border-radius: 8px;
    border: 1px solid var(--border-color, var(--gray-200)); background: var(--white);
    font-size: 13px; color: var(--ink); font-family: inherit;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.client-leads-month-select:focus { outline: 2px solid var(--accent-royal); outline-offset: 1px; }

/* KPI strip — 2 cols mobile, 5 cols desktop */
.client-leads-kpi {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin-bottom: 20px;
}
.client-leads-kpi-card {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    position: relative; overflow: hidden;
}
.client-leads-kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; border-radius: 3px 3px 0 0;
}
.client-leads-kpi-card.c-blue::before  { background: var(--accent-royal); }
.client-leads-kpi-card.c-teal::before  { background: var(--info); }
.client-leads-kpi-card.c-green::before { background: var(--success-strong); }
.client-leads-kpi-card.c-amber::before { background: var(--warning); }
.client-leads-kpi-card.c-pink::before  { background: var(--pink); }
.client-leads-kpi-label {
    font-size: 10px; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 4px; margin-top: 4px;
}
.client-leads-kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; line-height: 1; }
.client-leads-kpi-delta { font-size: 11px; margin-top: 4px; min-height: 14px; }
.client-leads-kpi-delta .delta-up   { color: var(--success-strong); }
.client-leads-kpi-delta .delta-down { color: var(--critical); }
.client-leads-kpi-delta .delta-flat { color: var(--gray-400); }

/* ── Engagement strip — "l'intérêt au-delà des demandes" ──────────
   Deliberately quieter than the KPI cards above: this is supporting
   evidence, not a sixth headline number. Bars are relative to the
   strongest signal of the period, so the shape reads at a glance. */
.client-engage {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 14px; margin-bottom: 20px;
}
.client-engage-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.client-engage-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.client-engage-total {
    font-size: 11px; font-weight: 600; color: var(--accent-royal);
    white-space: nowrap;
}
.client-engage-intro,
.client-engage-empty { font-size: 12px; color: var(--gray-400); margin: 0 0 12px; }
.client-engage-empty { margin-bottom: 0; }
.client-engage-list { list-style: none; margin: 0; padding: 0; }
.client-engage-row {
    display: grid; grid-template-columns: 1fr 34px;
    align-items: center; gap: 4px 10px; padding: 5px 0;
}
.client-engage-label { font-size: 12px; color: var(--ink); }
.client-engage-value {
    font-size: 13px; font-weight: 700; color: var(--ink);
    text-align: right; line-height: 1;
}
.client-engage-bar {
    grid-column: 1 / -1; display: block; height: 4px;
    background: var(--gray-100, var(--gray-200)); border-radius: 2px; overflow: hidden;
}
.client-engage-fill {
    display: block; height: 100%; background: var(--accent-royal); border-radius: 2px;
}
.client-engage-row.is-zero .client-engage-label,
.client-engage-row.is-zero .client-engage-value { color: var(--gray-400); }
.client-engage-people {
    font-size: 12px; font-weight: 600; color: var(--ink);
    margin: 12px 0 3px; padding-top: 11px;
    border-top: 1px solid var(--border-color, var(--gray-200));
}
.client-engage-note { font-size: 11px; line-height: 16px; color: var(--gray-400); margin: 0; }

/* Section header */
.client-leads-section-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.client-leads-section-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.client-leads-section-count { font-size: 12px; color: var(--gray-400); }

.client-leads-empty {
    background: var(--white); border: 1px dashed var(--border-color, var(--gray-200));
    border-radius: 10px; padding: 24px;
    text-align: center; color: var(--gray-500); font-size: 13px;
}

/* Leads table */
.client-leads-table-wrap {
    background: var(--white); border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 12px; overflow-x: auto;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), .04);
    margin-bottom: 24px;
}
.client-leads-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.client-leads-table thead th {
    padding: 10px 14px; text-align: left;
    font-size: 10px; font-weight: 600; color: var(--gray-400);
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--gray-50); border-bottom: 1px solid var(--border-color, var(--gray-200));
}
.client-leads-row { border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background .1s; }
.client-leads-row:hover { background: var(--off-white); }
.client-leads-row td { padding: 11px 14px; vertical-align: middle; }
.client-leads-table .cell-name  { font-weight: 600; color: var(--ink); }
.client-leads-table .cell-date  { color: var(--gray-400); white-space: nowrap; }
.client-leads-table .cell-phone { color: var(--gray-500); white-space: nowrap; }
.client-leads-table .cell-email { color: var(--gray-500); }
.client-leads-table .cell-msg {
    color: var(--gray-500); max-width: 260px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.client-leads-table .cell-rt { font-weight: 600; text-align: right; white-space: nowrap; }
.client-leads-table .cell-rt.rt-fast   { color: var(--success-strong); }
.client-leads-table .cell-rt.rt-medium { color: var(--warning); }
.client-leads-table .cell-rt.rt-slow   { color: var(--critical); }
.client-leads-table .cell-rt.rt-none   { color: var(--gray-400); }
.client-leads-table .cell-rt.rt-na     { color: var(--gray-300); font-weight: 500; }
.client-leads-table .cell-chevron { color: var(--gray-400); text-align: right; width: 24px; transition: transform .15s; }
.client-leads-row.is-open .cell-chevron { transform: rotate(180deg); }
.client-leads-row.is-legacy { opacity: .72; }

/* Invoices tab (consultation) — reuses .client-leads-table chrome */
.client-invoices-table { min-width: 640px; }
.client-invoices-row { border-bottom: 1px solid var(--gray-100); transition: background .1s; }
.client-invoices-row:hover { background: var(--off-white); }
.client-invoices-row td { padding: 11px 14px; vertical-align: middle; }
.client-invoices-table .cell-date { color: var(--gray-500); white-space: nowrap; }
.client-invoices-table .cell-invoice-no { font-weight: 600; color: var(--ink); white-space: nowrap; }
.client-invoices-table .cell-amount { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.client-invoices-table .cell-invoice-status { white-space: nowrap; }
.client-invoices-table .cell-invoice-actions { text-align: right; white-space: nowrap; }
.invoice-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.invoice-badge.is-paid     { color: var(--success-dark); background: var(--success-bg); border-color: var(--success-border); }
.invoice-badge.is-unpaid   { color: var(--warning-dark); background: var(--warning-light); border-color: var(--warning-border); }
.invoice-badge.is-refunded { color: var(--error-strong); background: var(--error-bg); border-color: var(--error-border); margin-left: 4px; }
.invoice-badge.is-refunded-partial { color: var(--warning-dark); background: var(--warning-light); border-color: var(--warning-border); margin-left: 4px; }
.invoice-link {
    font-size: 12px; color: var(--accent-royal); text-decoration: none;
    padding: 4px 10px; border: 1px solid var(--border-blue-strong); border-radius: 6px;
    transition: background .12s;
}
.invoice-link:hover { background: var(--accent-royal-tint); }
.invoice-link--pdf { margin-left: 6px; }

/* Invoices sub-tabs (Factures pour … / Toutes les factures) */
.client-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.client-subtab {
    flex: 0 0 auto; padding: 8px 12px; font-size: 12px; font-weight: 600;
    color: var(--gray-500); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.client-subtab:hover { color: var(--ink); }
.client-subtab.is-active { color: var(--accent-royal); border-bottom-color: var(--accent-royal); }
.client-invoices-table .cell-invoice-project a { color: var(--accent-royal); text-decoration: none; }
.client-invoices-table .cell-invoice-project a:hover { text-decoration: underline; }

/* "Voir plus" for the all-projects invoice list */
.client-invoices-more { text-align: center; margin: 4px 0 24px; }
.invoice-more-btn {
    display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-royal);
    text-decoration: none; padding: 8px 18px; border: 1px solid var(--border-blue-strong);
    border-radius: 8px; transition: background .12s;
}
.invoice-more-btn:hover { background: var(--accent-royal-tint); }

/* Leads load-more control + "showing" sub-line */
.client-leads-limit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.client-leads-limit-label { font-size: 12px; color: var(--gray-500); }
.client-leads-limit-opt {
    font-size: 12px; color: var(--gray-500); text-decoration: none;
    padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
}
.client-leads-limit-opt:hover { color: var(--ink); border-color: var(--gray-400); }
.client-leads-limit-opt.is-active { color: var(--white); background: var(--accent-royal); border-color: var(--accent-royal); }
.client-leads-section-sub { color: var(--gray-400); }
.client-leads-detail-inner .thread-unavailable {
    font-size: 12px; color: var(--gray-500); font-style: italic; padding: 8px 12px;
    background: var(--white); border-radius: 8px; display: inline-block;
}

.client-leads-detail-row td { padding: 0; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.client-leads-detail-inner { padding: 16px; min-height: 60px; }
.client-leads-detail-inner .thread-loading,
.client-leads-detail-inner .thread-error {
    font-size: 12px; color: var(--gray-500); padding: 8px 12px;
    background: var(--white); border-radius: 8px; display: inline-block;
}
.client-leads-detail-inner .thread-error { color: var(--critical); }

/* Chat thread (mobile-first) */
.thread { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.thread-msg { display: flex; align-items: flex-end; gap: 8px; }
.thread-msg.incoming { flex-direction: row; }
.thread-msg.outgoing { flex-direction: row-reverse; }
.thread-avatar {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--white);
    letter-spacing: .04em; user-select: none;
}
.thread-avatar.visitor  { background: var(--gray-500); }
.thread-avatar.promoter { background: var(--accent-royal); }
.thread-bubble {
    max-width: calc(100% - 44px);
    border-radius: 12px; padding: 10px 14px;
    border: 1px solid var(--border-color, var(--gray-200));
    box-shadow: 0 1px 2px rgba(var(--rgb-black), .03);
}
.thread-msg.incoming .thread-bubble { background: var(--blue-tint); border-color: var(--border-blue-strong); border-top-left-radius: 4px; }
.thread-msg.outgoing .thread-bubble { background: var(--warning-light); border-color: var(--warning-border); border-top-right-radius: 4px; }
.thread-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; margin-bottom: 4px;
}
.thread-sender { font-weight: 600; color: var(--ink); }
.thread-time   { color: var(--gray-400); }
.thread-text {
    font-size: 13px; color: var(--ink); line-height: 1.45;
    word-break: break-word; overflow-wrap: anywhere;
}
.thread-text a { color: var(--accent-royal); }
.thread-text p { margin: 0 0 6px 0; }
.thread-text p:last-child { margin-bottom: 0; }
.thread-text blockquote {
    margin: 6px 0; padding: 4px 10px;
    border-left: 3px solid rgba(var(--rgb-black), .08);
    color: var(--gray-600);
}
.thread-empty-text { color: var(--gray-400); font-style: italic; }

/* Collapsed remainder: relay header, signature, quoted history. */
.thread-extra { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.thread-extra-toggle {
    cursor: pointer; list-style: none; user-select: none;
    font-size: 11px; font-weight: 600; letter-spacing: .03em;
    color: var(--gray-500);
}
.thread-extra-toggle::-webkit-details-marker { display: none; }
.thread-extra-toggle::before { content: "▸ "; }
.thread-extra[open] .thread-extra-toggle::before { content: "▾ "; }
.thread-quoted { margin-top: 8px; color: var(--gray-600); }

@media (min-width: 640px) {
    .thread-bubble { max-width: 78%; }
}

@media (min-width: 640px) {
    .client-leads-header { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
    .client-leads-title { font-size: 22px; }
}
@media (min-width: 900px) {
    .client-leads-kpi { grid-template-columns: repeat(5, 1fr); }
    /* Room for the bar on its own track once the column is wide enough. */
    .client-engage-row { grid-template-columns: 190px 1fr 44px; }
    .client-engage-bar { grid-column: auto; }
}

/* ── Admin bar + Simulation ──────────────────────────────────── */
.client-admin-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ink); border-radius: 10px; padding: 8px 16px; margin-bottom: 12px;
}
.client-admin-link {
    font-size: 12px; font-weight: 600; color: rgba(var(--rgb-white), .8);
    text-decoration: none; white-space: nowrap;
    transition: color .12s;
}
.client-admin-link:hover { color: var(--white); }
.client-sim-form { display: flex; align-items: center; gap: 6px; }
.client-sim-input {
    padding: 5px 10px; border: 1px solid rgba(var(--rgb-white), .2); border-radius: 6px;
    background: rgba(var(--rgb-white), .1); color: var(--white); font-size: 12px; font-family: inherit;
    width: 220px; transition: border-color .15s;
}
.client-sim-input::placeholder { color: rgba(var(--rgb-white), .4); }
.client-sim-input:focus { outline: none; border-color: rgba(var(--rgb-white), .5); background: rgba(var(--rgb-white), .15); }
.client-sim-btn {
    padding: 5px 12px; border: none; border-radius: 6px;
    background: var(--accent-royal); color: var(--white); font-size: 11px; font-weight: 600;
    font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.client-sim-btn:hover { background: var(--accent-royal-dark); }
.client-sim-stop {
    padding: 5px 10px; border-radius: 6px;
    background: rgba(var(--rgb-red), .2); color: var(--error-border); font-size: 11px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background .12s;
}
.client-sim-stop:hover { background: rgba(var(--rgb-red), .35); color: var(--white); }
.client-sim-banner {
    background: var(--warning-light); border: 1px solid var(--warning-border); border-radius: 8px;
    padding: 8px 16px; font-size: 12px; color: var(--warning-dark); margin-bottom: 12px;
}
.client-sim-badge { font-size: 9px; color: var(--warning); font-style: italic; }
.client-avatar.simulated { background: var(--warning); }

/* ── CRM tab: lead-relay configuration (LeadRelay, multi-CRM) ── */
.client-crm {
    background: var(--white); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 20px; max-width: 560px; display: grid; gap: 14px;
}
.client-crm-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
/* "beta" badge — the royal-tint info tone. */
.client-crm-beta {
    display: inline-block; margin-left: 8px; vertical-align: 2px;
    font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .04em;
    padding: 4px 8px; border-radius: var(--radius-pill);
    background: var(--accent-royal-tint); color: var(--accent-royal);
}
.client-crm-intro { margin: 0; font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.client-crm-form { display: grid; gap: 14px; }
.client-crm-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.client-crm-field { display: grid; gap: 5px; }
.client-crm-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--gray-500);
}
.client-crm-input {
    font: inherit; font-size: 13px; color: var(--ink);
    border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
    background: var(--white);
}
.client-crm-input:focus { outline: none; border-color: var(--accent-royal); }
.client-crm-hint { font-size: 11.5px; color: var(--gray-400); }
.client-crm-toggle {
    display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink);
    cursor: pointer;
}
.client-crm-toggle input { margin-top: 2px; }
.client-crm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.client-crm-btn {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: 6px; padding: 8px 16px; transition: background .12s;
}
.client-crm-btn:disabled { opacity: .55; cursor: default; }
.client-crm-btn.is-primary {
    background: var(--accent-royal); color: var(--white); border: 1px solid var(--accent-royal);
}
.client-crm-btn.is-secondary {
    background: var(--white); color: var(--accent-royal); border: 1px solid var(--border-blue-strong);
}
.client-crm-btn.is-secondary:hover:not(:disabled) { background: var(--accent-royal-tint); }
.client-crm-result { border-radius: 8px; padding: 10px 14px; font-size: 13px; display: grid; gap: 6px; }
.client-crm-result.is-ok      { background: var(--success-bg); color: var(--success-dark); }
.client-crm-result.is-error   { background: var(--critical-light); color: var(--critical); }
.client-crm-result.is-pending { background: var(--gray-100); color: var(--gray-500); }
.client-crm-result-detail { font-size: 12px; opacity: .85; overflow-wrap: anywhere; }
.client-crm-result-detail code { font-size: 11.5px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .client-layout { flex-direction: column; }
    .client-sidebar { width: 100%; flex-direction: row; overflow-x: auto; gap: 4px; padding: 8px; border-right: none; border-bottom: 1px solid var(--border-color, var(--gray-200)); }
    .client-sidebar-user { display: none; }
    .client-nav-section { display: none; }
    .client-nav-spacer { display: none; }
    .client-nav-item { white-space: nowrap; padding: 6px 12px; }
    .client-main { padding: 16px; }
    .client-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .client-actions-row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   HOME GALLERY ARCHETYPES  (RAIL · SPOTLIGHT · GRID · COMPACT · SEO-LINKS)
   + credibility stat strip. Reuse .project-card for every card. Tokens only.
   NOTE: GRID container is .home-grid (NOT .gallery-grid — that is the post
   photo gallery). Do not reintroduce .gallery-grid here.
   ========================================================================== */

/* ---- Shared: section head (title) --------------------------------------- */
.gallery-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 30px;
}
.gallery-head .section-title {
    margin-bottom: 0;
}

/* ---- Shared: anti-CLS reservation for lazy (below-fold) galleries ------- */
.reveal .home-grid {
    min-height: 200px;
}

/* ==========================================================================
   RAIL — reuses .card-slider / .slider-track / .slider-arrow + shared JS.
   ========================================================================== */
/* Contained rail — the scroll area stays inside the page container, so card #1
   lines up with the title above and the tiles/subscription below. No full-bleed
   and no edge fade (Denis 2026-07-02): the next card is simply clipped sharp at
   the container edge as the "scroll for more" cue. Drop the base .card-slider
   40px inset so cards align to the container edge, not 40px inside it. */
.gallery-rail .card-slider {
    padding: 0;
}
/* Arrows straddle the container edge, sitting half in the side gutter. */
.gallery-rail .slider-prev {
    left: -18px;
}
.gallery-rail .slider-next {
    right: -18px;
}
.gallery-rail .slider-arrow:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ==========================================================================
   GRID — static finite catalogue: 1 col (phone) -> 2 (>=576) -> 3 (>=1024).
   ========================================================================== */
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}
.home-grid .project-card {
    height: 100%;
}
.home-grid .project-card > a {
    display: block;
    height: 100%;
}
@media (min-width: 576px) {
    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media (min-width: 1024px) {
    .home-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.gallery-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}
.gallery-more::after {
    content: '\2192';
    transition: transform 0.2s;
}
.gallery-more:hover {
    color: var(--blue);
}
.gallery-more:hover::after {
    transform: translateX(4px);
}

/* ==========================================================================
   ALGO STRIPS — main home galleries (region×type strips).
   ========================================================================== */
.algo-strips {
    margin-top: 24px;
}

/* ==========================================================================
   "See all" end card (idea #1): big facet count + SEO sentence over a fan of
   blurred thumbnails. A .project-card inside the slider track; recurs in the loop.
   ========================================================================== */
.card-see-all {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    background: linear-gradient(140deg, var(--navy) 0%, var(--blue) 70%, var(--blue-dark) 100%);
    color: var(--white);
}

.card-see-all .see-all-fan {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.22;
    filter: blur(4px);
}

.card-see-all .see-all-thumb {
    position: absolute;
    width: 58%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.card-see-all .see-all-thumb:nth-child(1) { transform: rotate(-9deg) translateX(-30%); }
.card-see-all .see-all-thumb:nth-child(2) { z-index: 1; transform: scale(1.06); }
.card-see-all .see-all-thumb:nth-child(3) { transform: rotate(9deg) translateX(30%); }

.card-see-all .see-all-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 22px;
}

.card-see-all,
.card-see-all:hover {
    color: var(--white);
}

.card-see-all .see-all-count {
    font-family: 'Larsseit-Bold', sans-serif;
    font-size: 40px;
    line-height: 1;
}

.card-see-all .see-all-unit {
    font-family: 'Larsseit-Medium', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.card-see-all .see-all-label {
    font-family: 'Larsseit-Medium', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    max-width: 16ch;
}

.card-see-all .see-all-arrow {
    margin-top: 12px;
    width: 36px;
    height: 36px;
    line-height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--rgb-white), 0.5);
    font-size: 20px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.card-see-all:hover .see-all-arrow {
    transform: translateX(3px);
    background: rgba(var(--rgb-white), 0.15);
}

/* ==========================================================================
   DUO — premium 2-up "featured" gallery. Same container width as every gallery,
   but only two cards, each ~2x the rail card: cinematic image, gold featured cue,
   large title, revealed description lead, prominent price. Reuses .project-card.grid
   markup (Schema.org + facet subtitle link). Mobile-first: stacked → two-up @768.
   ========================================================================== */
/* Big featured cards inside the shared .card-slider: 1 + peek on mobile, 2-up filling the
   gallery width from tablet. (The slider mechanism/animation is inherited from .card-slider.) */
.gallery-duo .slider-track > .project-card {
    flex: 0 0 86%;
}

@media (min-width: 768px) {
    .gallery-duo .slider-track > .project-card {
        flex: 0 0 calc(50% - 16px);
    }
}

.gallery-duo .project-card.grid {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-duo .project-card.grid:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* Cinematic, taller image than the standard 4:3 card. */
.gallery-duo .img-wrap {
    padding-bottom: 60%;
}

.gallery-duo .card-info {
    padding: 22px 26px 24px;
}

/* Eyebrow / type·locality facet link — larger, more tracking. */
.gallery-duo .card-type-locality {
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

/* Feature title — big Larsseit-Bold, up to two lines. */
.gallery-duo .card-info h3 {
    font-size: 24px;
    line-height: 1.2;
}

/* Reveal the description (normally a hidden tooltip) as an editorial lead. */
.gallery-duo .tooltip_gh {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-light);
}

/* Prominent price, set off by a hairline. */
.gallery-duo .card-price {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 18px;
    color: var(--navy);
}

@media (min-width: 1024px) {
    .gallery-duo .card-info h3 {
        font-size: 26px;
    }
}

/* ==========================================================================
   TRIO — horizontal sliding gallery showing exactly 3 cards per view on desktop.
   Reuses .card-slider / .slider-track / .slider-arrow + shared home.js (like RAIL);
   only the card width differs. Mobile-first: 1-with-peek → 2-up @576 → 3-up @1024.
   ========================================================================== */
/* Align cards to the container edge (drop the base 40px inset), like the rail. */
.gallery-trio .card-slider {
    padding: 0;
}
/* Arrows straddle the container edge, half in the side gutter. */
.gallery-trio .slider-prev {
    left: -18px;
}
.gallery-trio .slider-next {
    right: -18px;
}
.gallery-trio .slider-arrow:disabled {
    opacity: 0.3;
    pointer-events: none;
}
/* Phone: one card with a peek of the next as the "scroll for more" cue. */
.gallery-trio .slider-track > .project-card {
    flex: 0 0 88%;
}
@media (min-width: 576px) {
    /* Tablet: two cards (track gap is 20px → subtract one gap). */
    .gallery-trio .slider-track > .project-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}
@media (min-width: 1024px) {
    /* Desktop: exactly three cards (two 20px gaps). */
    .gallery-trio .slider-track > .project-card {
        flex: 0 0 calc((100% - 40px) / 3);
    }
}

/* =========================================================================
   Lazy-image fade-in (Module F — shared image-loading standard)
   Gated on html.js so a JS failure never leaves images stuck invisible.
   Applied ONLY to below-the-fold lazy card/gallery/tile images — never to
   an LCP/eager image (fading the LCP would delay the very metric).
   Space is already reserved by the card/tile boxes (padding-bottom /
   aspect-ratio), so this only cross-fades opacity — it never shifts layout.
   ========================================================================= */
html.js .img-fade { opacity: 0; transition: opacity 0.4s ease; }
html.js .img-fade.is-loaded { opacity: 1; }

/* =========================================================================
   SURVEY POLL ISLAND (islands/SurveyPoll) — one-question opinion poll on
   listing/search pages. Ported from the legacy FormSurvey widget.
   Tokens only (see :root) — no raw hex. Mobile-first.
   ========================================================================= */
/* No card chrome here: the .island--survey-poll wrapper already supplies the
   card (background, padding, radius, shadow). Drawing another would box-in-box. */
.survey-poll__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gh-blue);
    margin-bottom: 0.4rem;
}
.survey-poll__question {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gh-text);
    margin: 0 0 1rem;
}
.survey-poll__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.survey-poll__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    color: var(--gh-text);
    background: var(--gh-bg);
    border: 1px solid var(--gh-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.survey-poll__option:hover {
    background: var(--gh-blue-light);
    border-color: var(--gh-blue);
}
.survey-poll__option:disabled {
    cursor: default;
    opacity: 0.7;
}
.survey-poll__result {
    padding: 0.55rem 0.15rem;
}
.survey-poll__result-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--gh-text-light);
    margin-bottom: 0.35rem;
}
.survey-poll__result.is-chosen .survey-poll__result-head {
    color: var(--gh-blue);
    font-weight: 600;
}
.survey-poll__result-pct {
    flex: none;
    font-variant-numeric: tabular-nums;
}
.survey-poll__bar {
    height: 8px;
    background: var(--gh-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.survey-poll__bar-fill {
    height: 100%;
    background: var(--gray-300);
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
}
.survey-poll__result.is-chosen .survey-poll__bar-fill {
    background: var(--gh-blue);
}
.survey-poll__thanks {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--gh-text-light);
}

@media (min-width: 768px) {
    .survey-poll__question {
        font-size: 1.25rem;
    }
    /* Desktop: options hug their content and flow as chips (full-width rows
       read as empty for short answers like Oui/Non). */
    .survey-poll__options {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .survey-poll__option {
        width: auto;
        min-width: 88px;
        text-align: center;
    }
    /* Results always stay stacked full-width so the bars remain readable. */
    .survey-poll__options.is-results {
        flex-direction: column;
    }
    .survey-poll__options.is-results .survey-poll__result {
        width: 100%;
    }
}

.cx-two { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.cx-card { padding: 1.75rem; }
.cx-text { font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: 1rem; line-height: 1.55; color: var(--text); margin: 0 0 1.1rem; }
.cx-phone { margin: 0 0 .2rem; }
.cx-phone a { font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; font-size: 1.55rem; color: var(--gh-blue); text-decoration: none; }
.cx-hours { font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: .9rem; color: var(--text-muted); margin: 0 0 1.25rem; }
.cx-qa { margin-bottom: 1.4rem; border-top: 1px solid var(--border); }
.cx-qa-item { border-bottom: 1px solid var(--border); }
.cx-qa-item summary { list-style: none; cursor: pointer; padding: .85rem 1.6rem .85rem 0; position: relative; font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .98rem; color: var(--ink); }
.cx-qa-item summary::-webkit-details-marker { display: none; }
.cx-qa-item summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); color: var(--gh-blue); font-size: 1.2rem; }
.cx-qa-item[open] summary::after { content: "\2013"; }
.cx-qa-body { padding: 0 0 1rem; }
.cx-qa-body p { font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: .93rem; line-height: 1.55; color: var(--text); margin: 0 0 .5rem; }
.cx-qa-link { font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .85rem; color: var(--gh-blue); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }

/* Annoncez preview */
.adv2-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; margin-top: 1.5rem; }
.adv2-stat { text-align: center; }
.adv2-stat-num { display: block; font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; font-size: 1.9rem; color: var(--ink); line-height: 1; }
.adv2-stat-num::after { content: ""; display: block; width: 26px; height: 3px; background: var(--accent); margin: .5rem auto 0; }
.adv2-stat-lab { display: block; font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }
.cx-value { padding: 1.5rem; }
.cx-value-title { font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; font-weight: normal; font-size: 1.1rem; color: var(--ink); margin: 0 0 .8rem; }
.cx-value-list { list-style: none; padding: 0; margin: 0; }
.cx-value-list li { position: relative; padding-left: 1.1rem; font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: .93rem; line-height: 1.5; color: var(--text); margin-bottom: .6rem; }
.cx-value-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gh-blue); }
.cx-cta-band { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; }

@media (min-width: 768px) {
    .cx-two { grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start; }
    .adv2-stats { grid-template-columns: repeat(4, 1fr); }
    .cx-cta-band { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =========================================================================
   About GOLD preview (templates/pages/about-apercu.php) — namespaced .abg-* copy
   Deep-blue institutional identity, gold accent used with restraint, Larsseit
   type. Full-bleed bands; each band has an inner .abg-wrap for readable width.
   Named color tokens only.
   ========================================================================= */
.abg-fw {
    /* cancel the .py-4 (1.5rem) top/bottom padding of the full-width <main> so
       the hero sits flush under the header and the CTA meets the footer. */
    margin: -1.5rem 0;
    color: var(--text);
}
.abg-wrap {
    /* Match .lite-container exactly so the hero text left-edge aligns with the header logo. */
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* Draft banner (DEV only) */
.abg-draft {
    background: var(--accent);
    color: var(--ink);
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .8rem;
    line-height: 1.4;
    text-align: center;
    padding: .55rem 1.25rem;
}
.abg-draft strong { font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; }

/* Shared type devices */
.abg-eyebrow {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--text-muted);
}
.abg-eyebrow--gold { color: var(--accent); }

/* Hero — full-bleed deep blue */
.abg-hero {
    background: var(--gh-blue);
    background-image: linear-gradient(160deg, var(--gh-blue) 0%, var(--gh-blue-dark) 100%);
    color: var(--gh-white);
}
.abg-hero-inner {
    padding-top: 4.5rem;
    padding-bottom: 4rem;
}
.abg-hero .abg-eyebrow--gold { color: var(--accent); }
.abg-h1 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    color: var(--gh-white);
    font-size: 2.3rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    max-width: 18ch;
}
.abg-lead {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--gh-blue-light);
    max-width: 54ch;
    margin: 0 0 1.75rem;
}
.abg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.abg-chip {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .8rem;
    color: var(--gh-white);
    border: 1px solid rgba(var(--rgb-white), .35);
    border-radius: var(--radius-pill);
    padding: .32rem .85rem;
}

/* Coverage — full-bleed ink: the regions we index + housing types */
.abg-cover { background: var(--ink); color: var(--gh-white); padding: 2.75rem 0; }
.abg-cover-regions {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: 1rem;
    line-height: 2.1;
    color: var(--gh-white);
    margin-bottom: 1.75rem;
    max-width: 60ch;
}
.abg-cover-regions a { color: var(--gh-white); text-decoration: none; white-space: nowrap; }
.abg-cover-regions a:hover { color: var(--accent); }
.abg-cover-sep { color: var(--gh-blue-light); opacity: .45; margin: 0 .5rem; }
.abg-cover-types { display: flex; flex-wrap: wrap; gap: .6rem; }
.abg-cover-type {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .9rem;
    color: var(--gh-white);
    text-decoration: none;
    border: 1px solid rgba(var(--rgb-white), .35);
    border-radius: var(--radius-pill);
    padding: .5rem 1.15rem;
}
.abg-cover-type:hover { color: var(--accent); border-color: var(--accent); }

/* Definition + differentiators */
.abg-band { padding: 3.5rem 0; background: var(--off-white); }
.abg-statement {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--ink);
    max-width: 30ch;
    margin: 0 0 2.75rem;
}
.abg-diff {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
.abg-diff-rule {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--accent);
    margin-bottom: .9rem;
}
.abg-diff-title {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 .4rem;
}
.abg-diff-text {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
    max-width: 34ch;
}

/* Team — full-bleed alternating horizontal rows */
.abg-team { padding: 3.5rem 0 1rem; background: var(--gh-white); }
.abg-team-head { margin-bottom: 2.5rem; }
.abg-h2 {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.9rem;
    line-height: 1.12;
    color: var(--ink);
    margin: 0;
    max-width: 20ch;
}
.abg-row { padding: 1.25rem 0; }
.abg-row:nth-child(even) { background: var(--gh-bg); }
.abg-row-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.abg-portrait {
    flex: 0 0 auto;
    width: 200px;
    align-self: center;
    background: linear-gradient(180deg, var(--gh-blue-light) 0%, var(--off-white) 100%);
    border: 1px solid var(--border-blue);
    border-radius: var(--radius);
    overflow: hidden;
}
.abg-portrait img { display: block; width: 100%; height: auto; }
.abg-person { flex: 1 1 auto; text-align: center; }
.abg-role {
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 .35rem;
}
.abg-name {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0 0 .7rem;
}
.abg-bio {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 auto 1rem;
    max-width: 46ch;
}
.abg-linkedin {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .85rem;
    color: var(--gh-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
}
.abg-linkedin:hover { color: var(--ink); }

/* CTA — full-bleed deep blue */
.abg-cta {
    background: var(--gh-blue);
    background-image: linear-gradient(160deg, var(--gh-blue-dark) 0%, var(--gh-blue) 100%);
    color: var(--gh-white);
    padding: 3.5rem 0;
}
.abg-cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.abg-cta-card {
    border: 1px solid rgba(var(--rgb-white), .22);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.abg-cta-title {
    font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif;
    font-weight: normal;
    font-size: 1.25rem;
    color: var(--gh-white);
    margin: 0 0 .6rem;
}
.abg-cta-text {
    font-family: 'Larsseit-Light', system-ui, sans-serif;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--gh-blue-light);
    margin: 0 0 1.25rem;
    max-width: 40ch;
}
.abg-btn {
    display: inline-block;
    font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif;
    font-size: .92rem;
    background: var(--accent);
    color: var(--ink);
    text-decoration: none;
    padding: .65rem 1.4rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent);
}
.abg-btn--ghost {
    background: transparent;
    color: var(--gh-white);
    border-color: rgba(var(--rgb-white), .5);
}
.abg-btn:hover { opacity: .92; }

@media (min-width: 768px) {
    .abg-hero-inner { padding-top: 6rem; padding-bottom: 5.5rem; }
    .abg-h1 { font-size: 3.5rem; }
    .abg-lead { font-size: 1.25rem; }
    .abg-cover { padding: 3.25rem 0; }
    .abg-cover-regions { font-size: 1.15rem; }
    .abg-statement { font-size: 2rem; max-width: 24ch; }
    .abg-diff { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
    .abg-h2 { font-size: 2.4rem; }
    .abg-row-inner {
        flex-direction: row;
        align-items: center;
        gap: 3.5rem;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .abg-row--flip .abg-row-inner { flex-direction: row-reverse; }
    .abg-portrait { width: 240px; }
    .abg-person { text-align: left; }
    .abg-bio { margin-left: 0; }
    .abg-cta-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .abg-linkedin { transition: color .15s ease; }
    .abg-btn { transition: opacity .15s ease; }
}

/* Gold About preview: wrap the region list (mirrors the live-About fix) */
.abg-cover-regions { display: flex; flex-wrap: wrap; align-items: center; row-gap: .35rem; }
.abg-cover-regions a { white-space: nowrap; }
.abg-cover-sep { margin: 0 .5rem; }

/* =========================================================================
   Accent on the real pages — always-on, scoped by page-type body class.
   Gold (var(--accent)) stays on tiny elements only; no HTML changes.
   Home: section eyebrows get a short accent rule (replacing the navy underline).
   Project: section titles get a small accent square marker (Denis, image #2).
   Listing: eyebrow rule + active-filter liseré + card hover.
   ========================================================================= */
/* HOME — section eyebrow: keep only the accent rule (drop the navy border) */
.page-home .section-title { border-bottom: none; }
.page-home .section-title::after { content: ""; display: block; width: 32px; height: 2px; background: var(--accent); margin-top: 8px; }
.page-home .project-card { border: 1px solid transparent; }
.page-home .project-card:hover { border-color: var(--accent); }
.page-home .card-facet-link:hover { text-decoration-color: var(--accent); }

/* PROJECT — titled sections become gold-railed blocks: the accent now spans the
   whole block (grouping its content under one rail) + more rhythm between blocks.
   Replaces the floating square, which decorated but never separated (Denis, image #2). */
.page-project .section:has(.section-title) {
    border-left: 3px solid var(--accent);
    padding-left: 22px;
    margin-bottom: 44px;
}

/* LISTING — eyebrow rule + active-filter liseré + card hover */
.page-listing .listing-type { display: inline-block; }
.page-listing .listing-type::after { content: ""; display: block; width: 32px; height: 2px; background: var(--accent); margin: 6px 0 4px; }
.page-listing .btn-filter.active,
.page-listing .article-filter-btn.active { border-color: var(--accent); }
.page-listing .project-card { border: 1px solid transparent; }
.page-listing .project-card:hover { border-color: var(--accent); }
.page-listing .card-facet-link:hover { text-decoration-color: var(--accent); }

/* Annoncez preview — stats inside the dark band + value bullet lists (About .abg- signature) */
.abg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; margin-top: 1.25rem; }
.abg-stat { text-align: center; }
.abg-stat-num { display: block; font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; font-size: 2.1rem; color: var(--gh-white); line-height: 1; }
.abg-stat-num::after { content: ""; display: block; width: 26px; height: 3px; background: var(--accent); margin: .55rem auto 0; }
.abg-stat-lab { display: block; font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .8rem; color: var(--gh-blue-light); margin-top: .55rem; }
.abg-diff-list { list-style: none; padding: 0; margin: .3rem 0 0; }
.abg-diff-list li { position: relative; padding-left: 1.1rem; font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: .93rem; line-height: 1.5; color: var(--text); margin-bottom: .5rem; }
.abg-diff-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gh-blue); }
@media (min-width: 768px) {
    .abg-stats { grid-template-columns: repeat(4, 1fr); }
    .abg-stat-num { font-size: 2.75rem; }
}

/* Contact — promoter dark band (phone) + on-light ghost button (About .abg- signature) */
.abg-cover-lead { font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: 1.05rem; line-height: 1.55; color: var(--gh-blue-light); max-width: 52ch; margin: 0 0 1.25rem; }
.abg-phone { display: inline-block; font-family: 'Larsseit-Bold', 'Larsseit-Light', sans-serif; font-size: 2rem; color: var(--gh-white); text-decoration: none; border-bottom: 3px solid var(--accent); padding-bottom: 2px; margin: 0 0 .5rem; }
.abg-hours { font-family: 'Larsseit-Light', system-ui, sans-serif; font-size: .9rem; color: var(--gh-blue-light); margin: 0 0 1.5rem; }
.abg-btn--onlight { background: transparent; color: var(--gh-blue); border-color: var(--border-blue); margin-top: 1.4rem; }
.abg-btn--onlight:hover { background: var(--gh-blue); color: var(--gh-white); border-color: var(--gh-blue); }

/* Contact — static (non-foldable) Q&A question heading */
.cx-qa-q { font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .98rem; color: var(--ink); margin: 0; padding: .85rem 0 .4rem; }

/* Annoncez — client/builder trust pills (elegant, restrained): white chips, navy
   outline, gold hover; collapsed to ~2 rows with a gold-underlined toggle. */
.abg-builders .adv-builders-pills { display: flex; flex-wrap: wrap; gap: .5rem; overflow: hidden; margin-top: 1.25rem; }
.abg-builders .adv-builders-pills.is-collapsed { max-height: 5.1rem; }
.abg-builders .adv-builder-pill { font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .82rem; color: var(--gh-blue); background: var(--gh-white); border: 1px solid var(--border-blue); border-radius: var(--radius-pill); padding: .32rem .85rem; }
.abg-builders .adv-builder-pill:hover { border-color: var(--accent); }
.abg-builders .adv-builders-toggle { margin-top: 1rem; font-family: 'Larsseit-Medium', 'Larsseit-Light', sans-serif; font-size: .85rem; color: var(--gh-blue); background: none; border: 0; cursor: pointer; border-bottom: 2px solid var(--accent); padding: 0 0 2px; }