/* ══════════════════════════════════════════════════════════
   WARAP — Design System
   Fonts: DM Sans (body), Caveat Brush (display/brand), JetBrains Mono (eyebrow)
   ══════════════════════════════════════════════════════════ */

/* Fonts and Bootstrap are loaded in Blade layout before this stylesheet. */

/* ── Design tokens ─────────────────────────────────────── */
:root {
    --warap-cream:      #F5EBD7;
    --warap-aubergine:  #2D1432;
    --warap-terracotta: #D4622A;
    --warap-ochre:      #E5A845;
    --warap-baobab:     #A0341F;
    --warap-leaf:       #6B7A3A;
    --warap-ink:        #1F1418;

    --ink:            #1F1418;
    --ink-2:          #4A3A38;
    --ink-3:          #7A6760;
    --cream:          var(--warap-cream);
    --cream-2:        #EFE3C8;
    --cream-3:        #E8D9B5;
    --ochre:          var(--warap-ochre);
    --ochre-2:        #C98A2A;
    --terracotta:     var(--warap-terracotta);
    --terracotta-2:   #B84F1E;
    --aubergine:      var(--warap-aubergine);
    --aubergine-2:    #3D1F3D;
    --aubergine-soft: #4A2A4F;
    --baobab:         var(--warap-baobab);
    --leaf:           var(--warap-leaf);
    --line:           rgba(45, 20, 50, 0.12);
    --line-strong:    rgba(45, 20, 50, 0.20);
    --shadow-sm:      0 1px 2px rgba(45,20,50,0.06), 0 2px 8px rgba(45,20,50,0.04);
    --shadow-md:      0 4px 12px rgba(45,20,50,0.08), 0 12px 32px rgba(45,20,50,0.08);
    --shadow-lg:      0 12px 40px rgba(45,20,50,0.18);

    /* Type system */
    --font-display: 'Caveat Brush', 'Permanent Marker', cursive;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Bootstrap overrides */
    --bs-body-font-family: var(--font-body);
    --bs-body-bg:         var(--cream);
    --bs-body-color:      var(--ink);
    --bs-primary:         var(--aubergine);
    --bs-secondary:       var(--terracotta);
    --bs-primary-rgb:     45, 20, 50;
    --bs-border-color:    var(--line);
    --bs-link-color:      var(--terracotta);
    --bs-link-hover-color: var(--terracotta-2);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ── Base ──────────────────────────────────────────────── */
body.warap-landing {
    min-height: 100vh;
    background-color: var(--cream);
    color: var(--ink);
}

/* ── Typography helpers ────────────────────────────────── */

/* — Display / brand : Caveat Brush — */
.brush      { font-family: var(--font-display); font-weight: 400; line-height: 0.92; letter-spacing: 0.01em; }
.brush-xl   { font-family: var(--font-display); font-size: 96px;  line-height: 0.9;  font-weight: 400; }
.brush-lg   { font-family: var(--font-display); font-size: 72px;  line-height: 0.92; font-weight: 400; }
.brush-md   { font-family: var(--font-display); font-size: 56px;  line-height: 0.95; font-weight: 400; }
.brush-sm   { font-family: var(--font-display); font-size: 36px;  line-height: 1;    font-weight: 400; }

/* — Structural titles : DM Sans — */
.display-warap {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.display-heading {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aubergine);
    line-height: 1.05;
}

/* — Eyebrow / mono : JetBrains Mono — */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta-2);
    display: block;
    margin-bottom: 0.75rem;
}

.mono     { font-family: var(--font-mono); }
.mono-ref { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; }

/* ── Decorative patterns ───────────────────────────────── */
.kente-band {
    height: 14px;
    width: 100%;
    background: repeating-linear-gradient(
        90deg,
        var(--terracotta)   0px  12px,
        var(--aubergine)    12px 18px,
        var(--ochre)        18px 30px,
        var(--baobab)       30px 36px,
        var(--leaf)         36px 48px,
        var(--aubergine)    48px 54px
    );
}

.diamond-border {
    height: 18px;
    background:
    linear-gradient(135deg, transparent 46%, rgba(45, 20, 50, 0.55) 46%, rgba(45, 20, 50, 0.55) 54%, transparent 54%) 0 0 / 18px 18px,
    linear-gradient(45deg,  transparent 46%, rgba(45, 20, 50, 0.55) 46%, rgba(45, 20, 50, 0.55) 54%, transparent 54%) 0 0 / 18px 18px;
}

/* ── Slider pleine largeur ──────────────────────────────── */
.warap-slider {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.warap-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.warap-slider__slide {
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--aubergine);
    position: relative;
    display: flex;
    align-items: center;
}
.warap-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,8,24,0.72) 0%, rgba(20,8,24,0.3) 60%, transparent 100%);
}
.warap-slider__content {
    position: relative;
    z-index: 2;
    max-width: 580px;
    color: var(--cream);
    padding-left: 48px;
}
.warap-slider__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 12px;
}
.warap-slider__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    color: #fff;
    margin-bottom: 16px;
    -webkit-text-stroke: 0.4px #fff;
}
.warap-slider__sub {
    font-size: 1rem;
    color: rgba(245,235,215,0.85);
    margin-bottom: 28px;
    max-width: 440px;
    line-height: 1.6;
}

/* Flèches */
.warap-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(245,235,215,0.15);
    border: 1px solid rgba(245,235,215,0.3);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}
.warap-slider__arrow:hover { background: rgba(245,235,215,0.28); }
.warap-slider__arrow--prev { left: 20px; }
.warap-slider__arrow--next { right: 20px; }

/* Pastilles */
.warap-slider__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.warap-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245,235,215,0.4);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.warap-slider__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* ── Ticker cards métiers ───────────────────────────────── */
.metiers-ticker-cards {
    width: 100%;
    overflow: hidden;
    padding: 24px 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.metiers-ticker-cards__track {
    display: inline-flex;
    gap: 14px;
    animation: ticker-cards-scroll 55s linear infinite;
    will-change: transform;
}
.metiers-ticker-cards:hover .metiers-ticker-cards__track {
    animation-play-state: paused;
}
.metiers-ticker-cards__card {
    flex: 0 0 auto;
    width: 180px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
.metiers-ticker-cards__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.metiers-ticker-cards__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.metiers-ticker-cards__count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}
.metiers-ticker-cards__icon {
    font-size: 1.25rem;
    line-height: 1;
}
@keyframes ticker-cards-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Navbar ────────────────────────────────────────────── */
.warap-navbar {
    background: rgba(245, 235, 215, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 0.8px solid var(--line);
    height: 77px;
}

.warap-navbar .navbar-brand { color: var(--ink); }

/* Barre de recherche navbar scindée */
.warap-navbar .navbar-collapse {
    flex-grow: 0;
}
.navbar-search {
    flex: 1;
    max-width: none;
    margin: 0 24px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0;
    height: 40px;
    transition: box-shadow 0.18s, border-color 0.18s;
    overflow: hidden;
}
.navbar-search:focus-within {
    border-color: var(--aubergine);
    box-shadow: 0 0 0 3px rgba(45,20,50,0.08);
}
.navbar-search__field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    flex: 1;
    min-width: 0;
    color: var(--ink-3);
    height: 100%;
}
.navbar-search__field--place {
    flex: 0 1 180px;
}
.navbar-search__divider {
    width: 1px;
    height: 20px;
    background: var(--line);
    flex-shrink: 0;
}
.navbar-search__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--ink);
    min-width: 0;
}
.navbar-search__input::placeholder { color: var(--ink-3); }
.navbar-search__btn {
    background: var(--aubergine);
    color: var(--cream);
    border: none;
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
    margin: 4px;
}
.navbar-search__btn:hover { background: var(--aubergine-2); }
.warap-navbar .navbar-brand:hover { color: var(--ink); }

.warap-brand-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background-color: var(--aubergine);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.warap-navbar .nav-link {
    color: var(--ink-2);
    font-weight: 500;
    font-size: 0.9375rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.warap-navbar .nav-link:hover,
.warap-navbar .nav-link:focus { color: var(--ink); }

/* Menu mobile (< 992px) : panneau déroulant plein écran sous la navbar,
   avec son propre fond opaque + flou — sinon le contenu du collapse
   déborde de la hauteur fixe (77px) de la navbar et s'affiche sur fond
   transparent (contenu de la page visible derrière). */
@media (max-width: 991.98px) {
    .warap-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: rgba(245, 235, 215, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 0.8px solid var(--line);
        box-shadow: var(--shadow-lg);
        padding: 8px 6vw 24px;
        max-height: calc(100vh - var(--warap-navbar-height, 77px));
        overflow-y: auto;
    }
    .warap-navbar .navbar-nav {
        flex-direction: column;
        width: 100%;
        margin: 0 0 12px;
        gap: 0;
    }
    .warap-navbar .navbar-nav .nav-link {
        padding: 0.875rem 0.25rem;
        border-bottom: 1px solid var(--line);
    }
    .warap-navbar .navbar-collapse > .d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .warap-navbar .navbar-collapse > .d-flex > a {
        width: 100%;
    }
}

/* ── Buttons ───────────────────────────────────────────── */
/* Primary — aubergine pill */
.btn-primary {
    --bs-btn-bg:                 var(--aubergine);
    --bs-btn-border-color:       var(--aubergine);
    --bs-btn-color:              var(--cream);
    --bs-btn-hover-bg:           var(--aubergine-2);
    --bs-btn-hover-border-color: var(--aubergine-2);
    --bs-btn-hover-color:        var(--cream);
    --bs-btn-active-bg:          var(--aubergine-2);
    --bs-btn-focus-shadow-rgb:   45, 20, 50;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 0 rgba(45, 20, 50, 0.4);
}
.btn-primary.btn-sm {
    padding: 0.25rem 1rem;
    box-shadow: 0 2px 0 rgba(45, 20, 50, 0.4);
}

/* Ghost — transparent aubergine border */
.btn-ghost {
    background: transparent;
    border: 0.8px solid var(--aubergine);
    border-radius: 999px;
    color: var(--aubergine);
}
.btn-ghost:hover {
    background: rgba(45, 20, 50, 0.06);
    border-color: var(--aubergine);
    color: var(--aubergine);
}

/* Ghost light — for dark backgrounds */
.btn-ghost-light {
    background: transparent;
    border: 0.8px solid rgba(245, 235, 215, 0.5);
    border-radius: 999px;
    color: var(--cream);
}
.btn-ghost-light:hover {
    background: rgba(245, 235, 215, 0.1);
    border-color: rgba(245, 235, 215, 0.7);
    color: var(--cream);
}

/* Accent — terracotta pill */
.btn-accent {
    background: var(--terracotta);
    border: none;
    border-radius: 999px;
    color: #fff;
    padding: 12px 20px;
    font-weight: 600;
    box-shadow: 0 4px 0 rgba(212, 98, 42, 0.4);
}
.btn-accent:hover {
    background: var(--terracotta-2);
    color: #fff;
}

/* ── Avatar ────────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.avatar.terra { background: var(--terracotta); color: #fff; }
.avatar.auber  { background: var(--aubergine);  color: var(--cream); }
.avatar.ochre  { background: var(--ochre);       color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.hero-section {
    padding: 60px 0 48px;
    position: relative;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: rgba(245, 235, 215, 0.7);
    color: var(--ink-2);
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--leaf);
    flex-shrink: 0;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--aubergine);
    margin: 0;
}

.hero-title .accent-word { color: var(--terracotta); }

.hero-lead {
    font-size: 1.0625rem;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 46ch;
}

/* Search */
.hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 6px;
}

.hero-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
}

.hero-search-divider {
    width: 1px;
    height: 28px;
    background: var(--line);
    flex-shrink: 0;
}

.hero-search-field input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--ink);
    width: 100%;
}
.hero-search-field input::placeholder { color: var(--ink-3); }

.hero-search-field svg { color: var(--ink-3); flex-shrink: 0; }

.hero-search .btn-submit {
    background: var(--aubergine);
    color: var(--cream);
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s;
    flex-shrink: 0;
}
.hero-search .btn-submit:hover { background: var(--aubergine-2); }

/* Stats */
.stat-block {
    display: flex;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.stat-item__value {
    font-family: var(--font-body);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.stat-item__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px;
}

/* Hero visual */
.hero-visual {
    position: relative;
}

.hero-visual__placeholder {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
}

.hero-visual__placeholder img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

.hero-floating-card {
    position: absolute;
    background: rgba(245, 235, 215, 0.94);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: var(--shadow-md);
    min-width: 180px;
    z-index: 2;
}

.hero-floating-card--top    { top: 10%; left: -6%; }
.hero-floating-card--bottom { bottom: 10%; right: -4%; }

/* ── Categories ────────────────────────────────────────── */
.categories-section { padding: 56px 0 24px; }

.category-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

.category-card__name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 4px;
}

.category-card__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}

.category-card__icon {
    font-size: 1.375rem;
    line-height: 1;
    color: var(--ink-3);
}

/* ── Map + How it works ────────────────────────────────── */
.how-section { padding: 56px 0; }

.map-panel {
    background: var(--aubergine);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Leaflet map teaser ─────────────────────────────────── */
#warap-map-teaser {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 20px;
}

/* Teinte bordeaux/aubergine appliquée aux tuiles Leaflet.
   sepia(1)           → neutralise les teintes bleues → chaud (~35°)
   hue-rotate(250deg) → 35+250 = 285° ≈ violet/bordeaux de #2D1432
   saturate(2.8)      → amplifie la couleur
   brightness(0.42)   → obscurcit pour coller à la noirceur de l'aubergine */
#warap-map-teaser .leaflet-tile-pane {
    filter: sepia(1) hue-rotate(250deg) saturate(2.8) brightness(0.42);
}

/* Boutons zoom — style WARAP */
#warap-map-teaser .leaflet-control-zoom {
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    margin: 16px;
}
#warap-map-teaser .leaflet-control-zoom a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(45, 20, 50, 0.88);   /* aubergine semi-opaque */
    color: #F5EBD7;                        /* cream */
    border: 1px solid rgba(245, 235, 215, 0.18);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s;
}
#warap-map-teaser .leaflet-control-zoom a:hover {
    background: rgba(212, 98, 42, 0.85);   /* terracotta au survol */
    color: #fff;
}
#warap-map-teaser .leaflet-control-zoom-in  { border-bottom: 1px solid rgba(245, 235, 215, 0.12) !important; }
#warap-map-teaser .leaflet-control-zoom-out { border-top: none !important; }

/* Dégradé du bas : fond carte → aubergine opaque du panel.
   Garantit la lisibilité du badge et de la footer-card. */
.map-gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        var(--aubergine)        0%,
        rgba(45, 20, 50, 0.55) 38%,
        transparent             65%
    );
    pointer-events: none;
    border-radius: 20px;
}

.map-panel__location {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(245, 235, 215, 0.92);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.map-node {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    z-index: 10;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.map-node--lg { width: 52px; height: 52px; font-size: 1.125rem; background: var(--terracotta); }
.map-node--sm { width: 40px; height: 40px; font-size: 0.875rem; background: var(--ochre); color: var(--ink); }

.map-nearby-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    z-index: 10;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 10px;
    display: block;
    position: relative;
    z-index: 1;
}

.map-footer-card {
    background: rgba(245, 235, 215, 0.08);
    border: 1px solid rgba(245, 235, 215, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    position: relative;
    z-index: 10;
}

/* Steps */
.step-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.step-number {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--terracotta);
    line-height: 1;
    flex-shrink: 0;
    width: 2.5rem;
}

.step-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 4px;
}

.step-body {
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ── CTA artisan ───────────────────────────────────────── */
.cta-section { padding: 24px 0 56px; }

.cta-card {
    background: var(--aubergine);
    border-radius: 28px;
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
    color: var(--cream);
}

.cta-card .diamond-border-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background:
        linear-gradient(135deg, transparent 46%, rgba(245,235,215,0.25) 46%, rgba(245,235,215,0.25) 54%, transparent 54%) 0 0 / 16px 16px,
        linear-gradient(45deg,  transparent 46%, rgba(245,235,215,0.25) 46%, rgba(245,235,215,0.25) 54%, transparent 54%) 0 0 / 16px 16px;
}

.cta-card .diamond-border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    background:
        linear-gradient(45deg,  transparent 46%, rgba(245,235,215,0.25) 46%, rgba(245,235,215,0.25) 54%, transparent 54%) 0 0 / 16px 16px,
        linear-gradient(135deg, transparent 46%, rgba(245,235,215,0.25) 46%, rgba(245,235,215,0.25) 54%, transparent 54%) 0 0 / 16px 16px;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--ochre);
    line-height: 1.05;
    margin-bottom: 1rem;
}

.cta-body {
    color: rgba(245, 235, 215, 0.85);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 44ch;
}

.testimonial-card {
    background: rgba(245, 235, 215, 0.06);
    border: 1px solid rgba(245, 235, 215, 0.15);
    border-radius: 16px;
    padding: 28px;
}

.testimonial-text {
    font-size: 1.0625rem;
    color: var(--cream);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1.25rem;
}

.testimonial-name  { font-weight: 600; font-size: 0.875rem; color: var(--cream); }
.testimonial-role  { font-size: 0.8125rem; color: rgba(245,235,215,0.6); }

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
    padding: 32px 0;
    border-top: 1px solid var(--line);
}

.footer-copy { color: var(--ink-3); font-size: 0.875rem; }

.footer-links a {
    color: var(--ink-3);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.18s;
}
.footer-links a:hover { color: var(--ink); }

/* ── Responsive tweaks ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .hero-visual { height: 300px; margin-top: 2rem; }
    .hero-floating-card--top  { top: 6%;  left: 0; }
    .hero-floating-card--bottom { bottom: 6%; right: 0; }
    .stat-block { gap: 1.5rem; }
    .cta-card { padding: 40px 24px; }
    .hero-search { flex-wrap: wrap; }
    .hero-search-divider { display: none; }
    .hero-search-field { width: 100%; }

    .warap-slider { height: 520px; }
    .warap-slider__content { max-width: 100%; padding-left: 28px; padding-right: 28px; }
    .map-panel { min-height: 340px; padding: 20px; }
}

@media (max-width: 575.98px) {
    .warap-slider { height: 440px; }
    .warap-slider__content { padding-left: 20px; padding-right: 20px; }
    .warap-slider__sub { font-size: 0.9rem; max-width: 100%; }
    .warap-slider__arrow { width: 38px; height: 38px; }
    .warap-slider__arrow--prev { left: 10px; }
    .warap-slider__arrow--next { right: 10px; }

    .cta-card { padding: 28px 18px; }
    .map-panel { min-height: 300px; padding: 16px; }
    .map-footer-card { padding: 12px 14px; }
}

/* ══════════════════════════════════════════════════════════
   WARAP APP — body class for inner pages
   ══════════════════════════════════════════════════════════ */
body.warap-app {
    min-height: 100vh;
    background-color: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════
   PAGE: CARTE / DÉCOUVERTE
   ══════════════════════════════════════════════════════════ */

/* Full-height split layout: sidebar + map */
.carte-layout {
    display: flex;
    height: calc(100vh - var(--warap-navbar-height, 77px));
    padding-top: 0;
    overflow: hidden;
}

/* Left sidebar */
.carte-sidebar {
    width: 400px;
    min-width: 340px;
    max-width: 440px;
    background: var(--cream);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.carte-sidebar__search {
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.carte-sidebar__filters {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    user-select: none;
}
.filter-chip:hover  { border-color: var(--aubergine); color: var(--aubergine); }
.filter-chip.active { background: var(--aubergine); border-color: var(--aubergine); color: var(--cream); }
.filter-chip .chip-count { font-size: 0.75rem; opacity: 0.75; }

.carte-sidebar__header {
    padding: 14px 16px 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.carte-sidebar__zone {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.carte-sidebar__zone small {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--terracotta-2);
    margin-bottom: 4px;
}
.carte-sidebar__count {
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.carte-sidebar__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 24px;
}
.carte-sidebar__list::-webkit-scrollbar { width: 4px; }
.carte-sidebar__list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

/* Artisan result card */
.artisan-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow 0.18s, transform 0.18s;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.artisan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.artisan-card.is-active { border-color: var(--aubergine); box-shadow: 0 0 0 2px var(--aubergine); }

.artisan-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}

.artisan-card__badge-top {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--ochre);
    color: var(--ink);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.artisan-card__name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.2;
}
.artisan-card__dist {
    font-size: 0.8125rem;
    color: var(--ink-3);
    font-weight: 500;
}
.artisan-card__specialty {
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin: 3px 0;
}
.artisan-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}
.artisan-card__stars { color: var(--ochre); letter-spacing: -1px; }
.artisan-card__rating { font-weight: 600; color: var(--ink); }
.artisan-card__reviews { color: var(--ink-3); }
.artisan-card__open  { color: #22a25a; font-weight: 600; font-size: 0.75rem; margin-left: auto; }
.artisan-card__closed { color: var(--baobab); font-weight: 600; font-size: 0.75rem; margin-left: auto; }

/* Map area */
.carte-map {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--aubergine);
}

/* ── Leaflet plein écran — page /carte ────────────────────── */
/* Position absolute + inset:0 pour remplir .carte-map (position:relative).
   Les overlays custom (controls, legend, badge) sont frères de ce div,
   donc dans le stacking context de .carte-map et non de Leaflet. */
#warap-map-carte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}


/* Contrôles natifs Leaflet masqués — on utilise les boutons custom */
#warap-map-carte .leaflet-control-container { display: none; }

.carte-map__controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}
.carte-map__btn {
    width: 40px;
    height: 40px;
    background: rgba(245, 235, 215, 0.92);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 700;
    transition: background 0.18s;
}
.carte-map__btn:hover { background: var(--cream); }
.carte-map__btn--locate {
    width: auto;
    padding: 0 14px;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.carte-map__btn--loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}
.carte-map__btn--loading svg {
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.carte-locate-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--ink);
    color: var(--cream);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    max-width: 360px;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}
.carte-locate-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Barre de recherche ── */
.carte-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-3);
    padding: 2px 6px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.carte-search__clear:hover { color: var(--ink); background: rgba(0,0,0,0.06); }

.carte-search__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    list-style: none;
    margin: 0; padding: 6px 0;
    z-index: 50;
    overflow: hidden;
}
.carte-search__suggestions li {
    padding: 9px 16px;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.12s;
}
.carte-search__suggestions li:hover,
.carte-search__suggestions li:focus { background: var(--cream-2, #f0e6d0); outline: none; }
.carte-search__suggestions li mark {
    background: none;
    color: var(--terracotta);
    font-weight: 600;
}

/* ── Skeleton loading ── */
.carte-sidebar__loading { padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; }
.carte-sidebar__skeleton {
    height: 72px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ede4d4 25%, #f5edd8 50%, #ede4d4 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── État vide ── */
.carte-sidebar__empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 40px 20px; text-align: center;
    color: var(--ink-3);
}
.carte-sidebar__empty svg { opacity: 0.45; }
.carte-sidebar__empty p { font-size: 0.9rem; margin: 0; line-height: 1.5; }
.carte-empty__reset {
    background: none; border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 16px;
    font-size: 0.8125rem; cursor: pointer; color: var(--ink);
    transition: background 0.15s;
}
.carte-empty__reset:hover { background: var(--cream-2, #f0e6d0); }

.carte-map__location-badge {
    position: absolute;
    bottom: 24px;
    left: 20px;
    background: rgba(245, 235, 215, 0.92);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.carte-legend {
    position: absolute;
    bottom: 24px;
    right: 20px;
    background: rgba(245, 235, 215, 0.92);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    z-index: 5;
}
.carte-legend__title {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.carte-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin-bottom: 5px;
}
.carte-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Detail panel floating card */
.carte-detail-panel {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    z-index: 20;
}
.carte-detail-panel__cover {
    height: 80px;
    background: var(--terracotta);
    border-radius: 12px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.carte-detail-panel__cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 46%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0.12) 54%, transparent 54%) 0 0 / 14px 14px,
        linear-gradient(45deg,  transparent 46%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0.12) 54%, transparent 54%) 0 0 / 14px 14px;
}
.carte-detail-panel__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.carte-detail-panel__actions .btn { flex: 1; font-size: 0.8125rem; padding: 8px 10px; }

/* Map pins */
.map-pin {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.18s;
    z-index: 3;
}
.map-pin:hover { transform: scale(1.15); }
.map-pin--lg { width: 54px; height: 54px; font-size: 1rem; background: var(--terracotta); }
.map-pin--md { width: 44px; height: 44px; font-size: 0.875rem; background: var(--ochre); color: var(--ink); }
.map-pin--sm { width: 36px; height: 36px; font-size: 0.8125rem; background: var(--aubergine-soft); }

/* ══════════════════════════════════════════════════════════
   PAGE: CATÉGORIES DE MÉTIERS
   ══════════════════════════════════════════════════════════ */

.categories-page-hero {
    padding: 60px 0 40px;
}

.categories-page-hero .hero-title {
    font-size: clamp(3rem, 8vw, 7rem);
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.filter-tab {
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.filter-tab:hover { border-color: var(--aubergine); color: var(--aubergine); }
.filter-tab.active { background: var(--aubergine); border-color: var(--aubergine); color: var(--cream); }

/* Large category card */
.metier-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.metier-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); color: inherit; }

.metier-card__visual {
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metier-card__num {
    font-family: var(--font-body);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.12;
    color: #fff;
    position: absolute;
    bottom: -8px;
    right: 12px;
    pointer-events: none;
}

.metier-card__body {
    padding: 16px 18px;
    border-top: 1px solid var(--line);
}

.metier-card__name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink);
    margin-bottom: 4px;
}

.metier-card__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metier-card__arrow {
    color: var(--terracotta);
    font-size: 1rem;
    font-weight: 700;
}

/* Metier card color themes */
.metier-card--couture   .metier-card__visual { background: linear-gradient(135deg, #D4622A 0%, #B84F1E 100%); }
.metier-card--meca      .metier-card__visual { background: linear-gradient(135deg, #2D1432 0%, #4A2A4F 100%); }
.metier-card--menuisier .metier-card__visual { background: linear-gradient(135deg, #A0341F 0%, #7a2514 100%); }
.metier-card--soudure   .metier-card__visual { background: linear-gradient(135deg, #E5A845 0%, #C98A2A 100%); }
.metier-card--coiffure  .metier-card__visual { background: linear-gradient(135deg, #6B7A3A 0%, #4d5929 100%); }
.metier-card--maconnerie .metier-card__visual { background: linear-gradient(135deg, #4A3A38 0%, #2e2220 100%); }
.metier-card--electro   .metier-card__visual { background: linear-gradient(135deg, #E5A845 0%, #2D1432 100%); }
.metier-card--plomberie .metier-card__visual { background: linear-gradient(135deg, #2D1432 0%, #D4622A 100%); }
.metier-card--cuisine   .metier-card__visual { background: linear-gradient(135deg, #D4622A 0%, #E5A845 100%); }
.metier-card--peinture  .metier-card__visual { background: linear-gradient(135deg, #6B7A3A 0%, #E5A845 100%); }
.metier-card--cordo     .metier-card__visual { background: linear-gradient(135deg, #A0341F 0%, #E5A845 100%); }
.metier-card--barbier   .metier-card__visual { background: linear-gradient(135deg, #2D1432 0%, #6B7A3A 100%); }

/* ══════════════════════════════════════════════════════════
   PAGE: PROFIL ARTISAN
   ══════════════════════════════════════════════════════════ */

.profil-cover {
    height: 220px;
    background: var(--terracotta);
    position: relative;
    overflow: hidden;
    margin-top: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profil-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 46%, rgba(255,255,255,0.08) 46%, rgba(255,255,255,0.08) 54%, transparent 54%) 0 0 / 20px 20px,
        linear-gradient(45deg,  transparent 46%, rgba(255,255,255,0.08) 46%, rgba(255,255,255,0.08) 54%, transparent 54%) 0 0 / 20px 20px;
}

.profil-cover .kente-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
}

.profil-header {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 0 0 24px;
}

.profil-header__inner {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-top: -40px;
    padding: 0 24px;
}

.profil-avatar-wrap {
    flex-shrink: 0;
    position: relative;
}

.profil-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.profil-top-badge {
    position: absolute;
    bottom: 2px;
    right: -4px;
    background: var(--ochre);
    color: var(--ink);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 2px solid var(--cream);
}

.profil-header__meta {
    flex: 1;
    padding-top: 44px;
}

.profil-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.profil-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
}
.profil-badge--verified { color: #22a25a; border-color: rgba(34,162,90,0.25); background: rgba(34,162,90,0.06); }
.profil-badge--years    { color: var(--ink-3); }
.profil-badge--open     { color: #22a25a; }

.profil-name {
    font-family: var(--font-body);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
}

.profil-specialty {
    color: var(--ink-2);
    font-size: 1rem;
    margin-bottom: 10px;
}

.profil-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--ink-2);
}
.profil-meta-row svg { color: var(--terracotta); }

.profil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px 0;
}

/* Profile tabs */
.profil-tabs {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 77px;
    z-index: 20;
}

.profil-tabs__list {
    display: flex;
    gap: 0;
    padding: 0 24px;
    list-style: none;
    margin: 0;
}

.profil-tabs__item a {
    display: block;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.profil-tabs__item a:hover { color: var(--ink); }
.profil-tabs__item.active a { color: var(--aubergine); border-bottom-color: var(--aubergine); }

/* Profile body layout */
.profil-body {
    padding: 32px 0;
}

.profil-body .container-xl { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }

/* About section */
.profil-about__quote {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aubergine);
    margin-bottom: 12px;
    font-style: italic;
}

.profil-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-2);
    margin: 4px;
    text-decoration: none;
}
.profil-tag:hover { border-color: var(--aubergine); color: var(--aubergine); }

/* Gallery */
.profil-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.profil-gallery__item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    position: relative;
    cursor: pointer;
    background: var(--cream-2);
    border: 1px solid var(--line);
    display: flex;
    align-items: flex-end;
}

.profil-gallery__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(31,20,24,0.8));
    padding: 24px 10px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.profil-gallery__color {
    position: absolute;
    inset: 0;
}

/* Review cards */
.review-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
}

.review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-card__name { font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.review-card__date { font-size: 0.8125rem; color: var(--ink-3); }
.review-card__text { color: var(--ink-2); line-height: 1.6; font-size: 0.9375rem; }

/* Info sidebar */
.profil-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.profil-info-card__title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}

.profil-info-card h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
}

.profil-map-mini {
    height: 120px;
    background: var(--aubergine);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
}

.profil-map-mini__grid {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background:
        linear-gradient(rgba(245,235,215,0.6) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(245,235,215,0.6) 1px, transparent 1px) 0 0 / 24px 24px;
}

.profil-map-mini__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: var(--terracotta);
    border-radius: 50%;
    border: 3px solid var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.horaires-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
}
.horaires-row:last-child { border-bottom: none; }
.horaires-row.today { font-weight: 700; color: var(--ink); }
.horaires-row .closed { color: var(--ink-3); }

.tarif-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
}
.tarif-row:last-child { border-bottom: none; }
.tarif-row .price {
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font-body);
}

/* ══════════════════════════════════════════════════════════
   PAGE: DASHBOARD ARTISAN
   ══════════════════════════════════════════════════════════ */

body.warap-dashboard {
    min-height: 100vh;
    background-color: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.dashboard-layout {
    display: flex;
    padding-top: 0;
    min-height: 100vh;
}

/* Dashboard sidebar */
.dashboard-sidebar {
    width: 260px;
    min-width: 220px;
    background: var(--cream);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 77px;
    height: calc(100vh - 77px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
}
.dashboard-sidebar::-webkit-scrollbar { width: 3px; }

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    position: relative;
    margin-bottom: 2px;
}
.dash-nav-item:hover { background: rgba(45,20,50,0.05); color: var(--ink); }
.dash-nav-item.active { background: var(--aubergine); color: var(--cream); }
.dash-nav-item.active:hover { background: var(--aubergine-2); }

.dash-nav-item svg { flex-shrink: 0; opacity: 0.8; }
.dash-nav-item.active svg { opacity: 1; }

.dash-badge {
    background: var(--terracotta);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: auto;
}

.dashboard-boost-card {
    margin-top: auto;
    background: rgba(229,168,69,0.12);
    border: 1px solid rgba(229,168,69,0.3);
    border-radius: 14px;
    padding: 16px;
}
.dashboard-boost-card h6 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--aubergine);
    margin-bottom: 6px;
}
.dashboard-boost-card p {
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.4;
    margin: 0;
}

/* Dashboard main */
.dashboard-main {
    flex: 1;
    padding: 32px 32px 48px;
    overflow: hidden;
    min-width: 0;
}

.dashboard-greeting {
    margin-bottom: 28px;
}

.dashboard-greeting__date {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terracotta-2);
    margin-bottom: 6px;
    display: block;
}

.dashboard-greeting h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--aubergine);
    line-height: 1.1;
    margin-bottom: 8px;
}

.dashboard-greeting__sub {
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.dashboard-greeting__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
}

.stat-card__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
    display: block;
}

.stat-card__value {
    font-family: var(--font-body);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-card__change {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #22a25a;
}
.stat-card__change.neutral { color: var(--ink-3); }

/* Dashboard panels */
.dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.dash-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.dash-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.dash-panel__header h3 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    margin: 0;
}

.dash-panel__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--terracotta);
    text-decoration: none;
}
.dash-panel__link:hover { color: var(--terracotta-2); }

/* Request items */
.request-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s;
}
.request-item:last-child { border-bottom: none; }
.request-item:hover { background: rgba(245,235,215,0.5); }

.request-item__info { flex: 1; min-width: 0; }
.request-item__name { font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.request-item__msg  { font-size: 0.875rem; color: var(--ink-2); margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-item__time { font-size: 0.8125rem; color: var(--ink-3); }

.request-badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.request-badge--new     { background: rgba(212,98,42,0.12); color: var(--terracotta); }
.request-badge--pending { background: rgba(229,168,69,0.15); color: var(--ochre-2); }
.request-badge--replied { background: rgba(107,122,58,0.12); color: var(--leaf); }

.request-item__actions { display: flex; align-items: center; gap: 6px; }

/* Dashboard map panel */
.dash-map-panel {
    padding: 20px;
}
.dash-map-panel__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
    display: block;
}
.dash-map-panel h3 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 14px;
}
.dash-map-mini {
    height: 160px;
    background: var(--aubergine);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
}
.dash-map-mini__grid {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background:
        linear-gradient(rgba(245,235,215,0.6) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(245,235,215,0.6) 1px, transparent 1px) 0 0 / 28px 28px;
}
.dash-map-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed rgba(229,168,69,0.6);
    background: rgba(229,168,69,0.08);
}
.dash-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--terracotta);
    border-radius: 50%;
    border: 3px solid var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}
.dash-map-radius-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dash-map-radius-val {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

/* Responsive for pages */
@media (max-width: 1199.98px) {
    .dashboard-panels { grid-template-columns: 1fr; }
    .profil-body .container-xl { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .carte-layout { flex-direction: column; height: auto; }
    .carte-sidebar { width: 100%; max-width: 100%; height: auto; }
    .carte-map { height: 400px; }
    .dashboard-layout { flex-direction: column; }
    .dashboard-sidebar { position: static; height: auto; width: 100%; }
    .dashboard-main { padding: 20px 16px; }
    .profil-header__inner { flex-wrap: wrap; }
    .profil-body .container-xl { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   CHAT PANEL — slide-in depuis la droite (page /carte)
   ══════════════════════════════════════════════════════════ */

.carte-chat-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--cream);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.28s ease, min-width 0.28s ease;
    position: relative;
    z-index: 10;
}

.carte-chat-panel.is-open {
    width: 320px;
    min-width: 320px;
}

/* Header du chat */
.carte-chat__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    flex-shrink: 0;
}

.carte-chat__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.carte-chat__artisan {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.carte-chat__name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-chat__meta {
    font-size: 0.75rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-chat__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-3);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.carte-chat__close:hover { background: var(--cream-2); color: var(--ink); }

/* Zone messages */
.carte-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.carte-chat__messages::-webkit-scrollbar { width: 3px; }
.carte-chat__messages::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* Bulles de message */
.chat-msg {
    max-width: 82%;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 9px 13px;
    border-radius: 14px;
    word-break: break-word;
}

.chat-msg--artisan {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}

.chat-msg--user {
    align-self: flex-end;
    background: var(--aubergine);
    color: var(--cream);
    border-bottom-right-radius: 4px;
}

.chat-msg__time {
    font-size: 0.625rem;
    opacity: 0.6;
    margin-top: 4px;
    text-align: right;
}

/* Zone de saisie */
.carte-chat__input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--cream);
    flex-shrink: 0;
}

.carte-chat__input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color 0.18s;
}
.carte-chat__input::placeholder { color: var(--ink-3); }
.carte-chat__input:focus { border-color: var(--aubergine); }

.carte-chat__send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--aubergine);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s;
    font-size: 1rem;
}
.carte-chat__send:hover { background: var(--aubergine-2); }

/* Prompt connexion dans le chat */
.chat-auth-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    gap: 10px;
    flex: 1;
    color: var(--ink-2);
}
.chat-auth-prompt p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 6px;
    color: var(--ink-2);
}
.btn-chat-login {
    display: block;
    width: 100%;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--aubergine);
    color: var(--cream);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    transition: background 0.18s;
}
.btn-chat-login:hover { background: var(--aubergine-2); color: var(--cream); }
.btn-chat-register {
    display: block;
    width: 100%;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(45,20,50,0.2);
    background: transparent;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    transition: background 0.18s, color 0.18s;
}
.btn-chat-register:hover { background: rgba(45,20,50,0.06); color: var(--aubergine); }

/* ══════════════════════════════════════════════════════════
   MODAL DEMANDE — /carte
   ══════════════════════════════════════════════════════════ */
.demande-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(20,10,25,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.demande-modal {
    background: #fff;
    border-radius: 18px;
    width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    overflow: hidden;
    position: relative;
}
.demande-modal__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--line);
}
.demande-modal__eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--terracotta);
    font-family: var(--font-mono); margin-bottom: 3px;
}
.demande-modal__title {
    font-family: var(--font-display); font-size: 1.25rem;
    font-weight: 400; color: var(--ink); line-height: 1.2;
}
.demande-modal__close {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: transparent; cursor: pointer; color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .14s;
}
.demande-modal__close:hover { background: var(--cream); color: var(--ink); }
.demande-modal__body { padding: 18px 20px 14px; }
.demande-modal__label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--ink-2); margin-bottom: 8px;
}
.demande-modal__textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; font-size: .875rem; color: var(--ink);
    background: var(--cream); resize: vertical; font-family: inherit;
    outline: none; transition: border-color .15s; min-height: 90px;
}
.demande-modal__textarea:focus { border-color: var(--terracotta); background: #fff; }
.demande-modal__hint { font-size: .72rem; color: var(--ink-3); margin-top: 6px; }
.demande-modal__footer {
    display: flex; gap: 8px; padding: 0 20px 20px;
}
.demande-modal__cancel {
    flex: 1; padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent;
    font-size: .85rem; color: var(--ink-2); cursor: pointer;
    font-family: inherit; transition: background .14s;
}
.demande-modal__cancel:hover { background: var(--cream); }
.demande-modal__submit {
    flex: 2; padding: 9px 16px; border-radius: 999px;
    border: none; background: var(--terracotta); color: #fff;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: opacity .14s;
    display: flex; align-items: center; justify-content: center;
}
.demande-modal__submit:hover:not(:disabled) { opacity: .85; }
.demande-modal__submit:disabled { opacity: .5; cursor: default; }
.demande-modal__feedback {
    margin: 0 20px 16px; padding: 10px 14px;
    border-radius: 8px; font-size: .82rem; font-weight: 500;
}
.demande-modal__feedback--ok  { background: rgba(107,122,58,.12); color: #4a5a1a; }
.demande-modal__feedback--err { background: rgba(212,98,42,.10); color: var(--terracotta); }

/* ══════════════════════════════════════════════════════════
   LEAFLET POPUP — style WARAP (page /carte)
   ══════════════════════════════════════════════════════════ */

.warap-popup .leaflet-popup-content-wrapper {
    background: var(--cream);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    border: none;
    padding: 0;
    min-width: 260px;
    overflow: hidden;
}

.warap-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}

.warap-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.warap-popup .leaflet-popup-tip {
    background: var(--cream);
    box-shadow: none;
}

.warap-popup .leaflet-popup-close-button {
    color: var(--ink-3);
    font-size: 1.125rem;
    top: 8px;
    right: 8px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
}
.warap-popup .leaflet-popup-close-button:hover { background: var(--cream-2); color: var(--ink); }

/* Contenu interne du popup — noms de classes générés par le JS */
.map-leaflet-popup {
    padding: 16px;
    min-width: 260px;
}

.map-leaflet-popup__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.map-leaflet-popup__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.map-leaflet-popup__name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.2;
}

.map-leaflet-popup__meta {
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.map-leaflet-popup__stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.map-leaflet-popup__actions {
    display: flex;
    gap: 8px;
}

.map-popup-btn-demande {
    flex: 1;
    padding: 5px 10px;
    border-radius: 999px;
    border: none;
    background: var(--terracotta);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: opacity 0.18s;
    text-align: center;
}
.map-popup-btn-demande:hover { opacity: 0.85; }

.map-popup-btn-chat {
    flex: 1;
    padding: 5px 10px;
    border-radius: 999px;
    border: none;
    background: rgba(45,20,50,0.08);
    color: var(--aubergine);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.18s;
    text-align: center;
}
.map-popup-btn-chat:hover { background: rgba(45,20,50,0.15); }

.map-popup-btn-profil {
    flex: 1;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(45,20,50,0.18);
    background: transparent;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.18s, color 0.18s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-popup-btn-profil:hover { background: rgba(45,20,50,0.06); color: var(--aubergine); }

/* ── Avatar utilisateur connecté (topbar) ────────────────────────────────── */
.warap-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--aubergine, #2d1432);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-body);
    user-select: none;
    border: none;
    padding: 0;
    overflow: hidden;
}
.warap-user-avatar:hover,
.warap-user-avatar[aria-expanded="true"] {
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(45, 20, 50, 0.3);
    color: #fff;
}
.warap-user-dropdown {
    min-width: 210px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(45, 20, 50, 0.12);
    padding: 4px 0;
    background: #fff;
}
.warap-user-dropdown .dropdown-item {
    font-size: 0.875rem;
    color: var(--ink);
    padding: 9px 16px;
    border-radius: 0;
    transition: background 0.12s ease;
}
.warap-user-dropdown .dropdown-item:hover {
    background: var(--cream);
    color: var(--ink);
}
.warap-user-dropdown .dropdown-divider {
    margin: 4px 0;
}