/* ============================================================================
   bellestone.css — Design system Bellestone (« Édition Arche · Terracotta »)
   Chargé en DERNIER (après theme/app/pages/admin.css) : porte les tokens de la
   charte (brand book variante terracotta) et re-skinne navbar, sidebar,
   footer et home page.

   Idée directrice : la rencontre du digital (net, précis) et de l'humain
   (chaleureux, organique). Motif signature : l'arche. Jamais de noir pur,
   ombres diffuses teintées terracotta, base blush qui respire. Le terracotta
   n'est qu'un flash (~3 %) : logo, italiques, touches — jamais un aplat.
   ============================================================================ */

:root {
    /* --- Palette de base --- */
    --blush:  #FBF6F4;   /* fond signature */
    --blanc:  #FFFFFF;   /* surfaces, cartes */
    --poudre: #F3DED2;   /* argile poudre — rares moments chaleureux (~8 %) */
    --sable:  #E4DACE;   /* sable — alternance de section par défaut */
    --rose:   #C96A4E;   /* terracotta flash — logo, italiques, touches (~3 %) */
    --rose-deep: #A34E35;/* nuance d'appui — dégradés & ombres uniquement */
    --sauge:  #7C9885;   /* accent rare — statut « en ligne » */
    --encre:  #2F211D;   /* anthracite chaud — titres, CTA */
    --kaki:   #A3A38B;   /* texte secondaire */

    /* --- Dérivés alpha --- */
    --encre-40: rgba(47, 33, 29, 0.38);
    --encre-72: rgba(47, 33, 29, 0.72);
    --line:     rgba(47, 33, 29, 0.12);
    --rose-08:  rgba(201, 106, 78, 0.08);
    --rose-14:  rgba(201, 106, 78, 0.14);
    --sauge-14: rgba(124, 152, 133, 0.14);

    /* --- Typographies : serif = l'humain, sans = le digital, mono = la précision --- */
    --font-serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Rayons — l'arche : haut arrondi, base nette --- */
    --r-bst-sm: 16px;
    --r-bst:    26px;
    --r-bst-lg: 46px;
    --r-pill:   100px;
    --arch:      999px 999px 18px 18px;
    --arch-soft: 130px 130px 18px 18px;

    /* --- Ombres diffuses teintées terracotta — jamais dures ni grises --- */
    --shadow-bst:     0 30px 70px -30px rgba(163, 78, 53, 0.35), 0 10px 26px -16px rgba(47, 33, 29, 0.14);
    --shadow-bst-sm:  0 14px 34px -18px rgba(163, 78, 53, 0.28);
    --shadow-bst-key: 0 0 0 4px rgba(201, 106, 78, 0.14);

    /* --- Mouvement --- */
    --ease-brand: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* --- Rebrand Bootstrap : sans Hanken Grotesk, texte encre chaud --- */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--encre);
    --bs-body-color-rgb: 47, 33, 29;
    --bs-border-color-translucent: rgba(47, 33, 29, 0.08);
}

::selection { background: var(--rose); color: var(--blush); }

/* Animations de marque */
@keyframes bs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(124, 152, 133, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(124, 152, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 152, 133, 0); }
}
@keyframes bst-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .bst-marquee-track { animation: none !important; }
    .bst-online-dot { animation: none !important; }
}

/* ============================================================================
   Primitives
   ============================================================================ */

/* Eyebrow — kicker mono capitales kaki + filet terracotta */
.bst-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--kaki);
}
.bst-eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--rose); flex: none; }
.bst-eyebrow--center { justify-content: center; }

/* Titres serif — casse de phrase, emphase italique rose via <em> */
.bst-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.05;
    color: var(--encre);
}
.bst-title em { font-style: italic; color: var(--rose); }
.bst-ink-section .bst-title { color: var(--blush); }

/* Boutons pilule — primary = encre, accent = rose, secondary = blanc hairline */
.btn-bst {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-brand), box-shadow 0.35s var(--ease-brand), background 0.35s var(--ease-brand);
}
.btn-bst:hover { transform: translateY(-2px); }
.btn-bst:active { transform: translateY(0); }
.btn-bst:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.btn-bst-sm { padding: 9px 18px; font-size: 13px; }
.btn-bst-lg { padding: 16px 34px; font-size: 16.5px; }

.btn-bst-ink { background: var(--encre); border-color: var(--encre); color: var(--blush); }
.btn-bst-ink:hover { background: var(--encre); color: var(--blush); box-shadow: var(--shadow-bst-sm); }
.btn-bst-rose { background: var(--rose); border-color: var(--rose); color: var(--blush); }
.btn-bst-rose:hover { background: var(--rose); color: var(--blush); box-shadow: var(--shadow-bst-sm); }
.btn-bst-outline { background: var(--blanc); border-color: var(--line); color: var(--encre); }
.btn-bst-outline:hover { background: var(--blush); color: var(--encre); }
.btn-bst-ghost { background: transparent; border-color: transparent; color: var(--encre); }
.btn-bst-ghost:hover { background: var(--rose-08); color: var(--encre); }

/* Badge mono (Exclusivité / Nouveau…) */
.bst-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--poudre);
    color: var(--rose-deep);
}
.bst-badge--sauge { background: var(--sauge-14); color: #5B7663; }
.bst-badge--ink   { background: var(--encre); color: var(--blush); }
.bst-badge--blanc { background: rgba(255, 255, 255, 0.92); color: var(--encre); }

/* Chip / pilule sélectionnable (pills SEO) */
.bst-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 9px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--blanc);
    color: var(--encre-72);
    text-decoration: none;
    transition: background 0.2s var(--ease-brand), color 0.2s var(--ease-brand), transform 0.2s var(--ease-brand);
}
.bst-chip:hover { background: var(--poudre); color: var(--encre); transform: translateY(-2px); }
.bst-chip .bst-chip-arrow { opacity: 0; transform: translateX(-4px); transition: all 0.2s var(--ease-brand); }
.bst-chip:hover .bst-chip-arrow { opacity: 1; transform: translateX(0); color: var(--rose); }

/* Carte — surface blanche très arrondie, sans bordure dure, ombre diffuse */
.bst-card {
    background: var(--blanc);
    border-radius: var(--r-bst);
    box-shadow: var(--shadow-bst-sm);
    transition: transform 0.35s var(--ease-brand), box-shadow 0.35s var(--ease-brand);
}
.bst-card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-bst); }

/* Tuile d'icône en arche */
.bst-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 86px;
    border-radius: var(--arch);
    transition: transform 0.35s var(--ease-brand), background 0.35s var(--ease-brand), box-shadow 0.35s var(--ease-brand);
}
.bst-icon-tile svg { width: 28px; height: 28px; stroke-width: 1.8; }
/* Icônes en anthracite dans les tuiles claires — le terracotta n'est qu'un flash */
.bst-tile-blush  { background: var(--blush);  color: var(--encre); }
.bst-tile-poudre { background: var(--poudre); color: var(--encre); }
.bst-tile-sable  { background: var(--sable);  color: var(--encre); }
.bst-tile-sauge  { background: var(--sauge);  color: var(--blanc); }
.bst-tile-rose   { background: var(--rose);   color: var(--blush); }
.bst-tile-blush:hover, .bst-tile-sable:hover { background: var(--sable); }
.bst-icon-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-bst-sm); }

/* Cadre photo en arche (placeholder dégradé de marque si pas de photo) */
.bst-arch-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--arch-soft);
    aspect-ratio: 4 / 5;
    background: linear-gradient(165deg, var(--poudre) 0%, var(--rose) 78%, var(--rose-deep) 130%);
    box-shadow: var(--shadow-bst);
}
.bst-arch-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* AdvisorBadge — le composant signature : avatar + prénom + rôle + point « en ligne » */
.bst-advisor {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--blush);
    color: var(--encre);
    border-radius: var(--r-pill);
    padding: 10px 26px 10px 10px;
    box-shadow: var(--shadow-bst-sm);
}
.bst-advisor-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    background: var(--poudre);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--rose);
}
.bst-advisor-name { font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; display: block; line-height: 1.15; }
.bst-advisor-role { font-size: 0.8rem; color: var(--kaki); display: flex; align-items: center; gap: 7px; }
.bst-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sauge);
    display: inline-block;
    flex: none;
    animation: bs-pulse 2.4s infinite;
}

/* Marquee éditorial */
.bst-marquee { overflow: hidden; background: var(--blanc); border-block: 1px solid var(--line); padding: 16px 0; }
.bst-marquee-track { display: flex; width: max-content; animation: bst-marquee 30s linear infinite; }
.bst-marquee-item {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--encre);
    white-space: nowrap;
    padding-right: 52px;
    display: flex;
    align-items: center;
    gap: 52px;
}
.bst-marquee-item .bst-star { color: var(--rose); font-style: normal; }

/* ============================================================================
   Layout de page (home)
   ============================================================================ */
.bst-page { background: var(--blush); }
.bst-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 64px); }
.bst-section { padding-block: clamp(56px, 7vw, 110px); }
.bst-section--sable { background: var(--sable); }   /* alternance neutre par défaut */
.bst-section--poudre { background: var(--poudre); } /* réservée aux rares moments chaleureux (~8 %) */
.bst-ink-section { background: var(--encre); color: var(--blush); }
.bst-ink-section p { color: rgba(251, 246, 244, 0.72); }

.bst-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bst-hero h1 { font-size: clamp(2.7rem, 6vw, 4.9rem); line-height: 1; letter-spacing: -0.02em; margin: 18px 0 20px; }
.bst-baseline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    color: var(--encre);
    max-width: 28ch;
}
@media (max-width: 991.98px) {
    .bst-hero { grid-template-columns: 1fr; }
    .bst-hero .bst-arch-frame { max-width: 340px; margin-inline: auto; }
}

/* ============================================================================
   Navbar (partials/header) — translucide blush + blur, hairline
   ============================================================================ */
#site-nav.bst-nav {
    background: rgba(251, 246, 244, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line) !important;
}
#site-nav.bst-nav.shadow { box-shadow: var(--shadow-bst-sm) !important; }
.bst-brand { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1; color: var(--encre); }
.bst-nav .link-nav { color: var(--encre); font-weight: 500; }
.bst-nav .link-nav:hover, .bst-nav .link-nav:focus { color: var(--rose); }
.bst-nav .bst-nav-phone { font-family: var(--font-mono); letter-spacing: 0.02em; }
.bst-nav .icon-circle.bg-light { background: var(--blanc) !important; border: 1px solid var(--line); color: var(--rose); }
.bst-nav .dropdown-menu {
    border-radius: var(--r-bst-sm);
    border-color: var(--line);
    box-shadow: var(--shadow-bst-sm);
    background: var(--blanc);
}
.bst-nav .btn-white { --bs-btn-bg: transparent; --bs-btn-border-color: var(--line); border-radius: var(--r-pill); }
.bst-nav .btn-white:hover { --bs-btn-hover-bg: var(--blanc); --bs-btn-hover-border-color: var(--line); }

/* ============================================================================
   Moteur de recherche (/trouver-un-logement) — barre de filtres, cartes
   d'offres en arche, carte interactive
   ============================================================================ */

/* Barre de filtres — sticky sous la navbar, translucide blush + blur */
.bst-filterbar {
    position: sticky;
    top: 4rem;
    z-index: 1030;
    background: rgba(251, 246, 244, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
/* Version compacte des chips dans la barre, pour tenir sur une seule ligne */
.bst-filterbar .bst-chip { padding: 8px 13px; font-size: 0.84rem; gap: 6px; }
.bst-filterbar .bst-seg { padding: 3px; }
.bst-filterbar .bst-seg .bst-seg-opt { padding: 7px 16px; font-size: 0.84rem; }
@media (min-width: 1200px) {
    .bst-filterbar form { flex-wrap: nowrap !important; }
}

/* Segmented Location / Achat — pilule blanche, choix actif en encre */
.bst-seg { display: inline-flex; align-items: center; background: var(--blanc); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.bst-seg label { margin: 0; cursor: pointer; }
.bst-seg .bst-seg-opt {
    display: block;
    padding: 8px 20px;
    border-radius: var(--r-pill);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--encre-72);
    transition: background 0.2s var(--ease-brand), color 0.2s var(--ease-brand);
}
.bst-seg input:checked + .bst-seg-opt { background: var(--encre); color: var(--blush); }
.bst-seg input:focus-visible + .bst-seg-opt { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Déclinaison bouton des chips (triggers de filtres) */
button.bst-chip { cursor: pointer; }
.bst-chip svg { flex: none; }
.bst-chip--on { background: var(--rose-08); border-color: var(--rose-14); color: var(--rose-deep); }

/* Panneau de filtre déroulant */
.bst-panel {
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--r-bst-sm);
    box-shadow: var(--shadow-bst-sm);
}
.bst-flabel {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kaki);
}
.bst-sort-opt { transition: background 0.15s var(--ease-brand); }
.bst-sort-opt:hover { background: var(--blush); }
.bst-sort-opt.on { color: var(--rose-deep); font-weight: 600; }

/* Chip de localité (poudre argile) */
.bst-loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--poudre);
    color: var(--rose-deep);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--r-pill);
    padding: 4px 4px 4px 12px;
}
.bst-loc-chip .locality-remove { border: 0; background: transparent; color: var(--rose-deep); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 4px; cursor: pointer; }
.bst-loc-chip .locality-remove:hover { background: rgba(163, 78, 53, 0.14); }

/* Carte d'offre — photo en dôme d'arche, prix serif, specs mono */
.bst-offer-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--blanc);
    border-radius: var(--r-bst);
    overflow: hidden;
    box-shadow: var(--shadow-bst-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.35s var(--ease-brand), box-shadow 0.35s var(--ease-brand);
}
.bst-offer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-bst); color: inherit; opacity: 1; }
.bst-offer-card.map-highlight { box-shadow: var(--shadow-bst-key), var(--shadow-bst); }
.bst-offer-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sable);
}
.bst-offer-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-brand); }
.bst-offer-card:hover .bst-offer-cover img { transform: scale(1.04); }
.bst-offer-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--encre); transition: color 0.2s var(--ease-brand); }
.bst-offer-card:hover .bst-offer-title { color: var(--rose); }
.bst-offer-price { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.1; color: var(--encre); }
.bst-offer-price small { font-family: var(--font-sans); font-size: 0.85rem; color: var(--kaki); }
.bst-offer-specs { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--kaki); display: flex; gap: 14px; flex-wrap: wrap; }

/* Bouton favori sur photo — cœur kaki, terracotta une fois favori */
.bst-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--kaki);
    cursor: pointer;
    transition: color 0.2s var(--ease-brand), background 0.2s var(--ease-brand), transform 0.2s var(--ease-brand);
}
.bst-fav:hover { color: var(--rose); transform: scale(1.08); }
.bst-fav.is-favorite { background: var(--poudre); color: var(--rose); }
/* Variante hors photo (en-tête de fiche) : dans le flux, fond blanc hairline */
.bst-fav--static { position: static; background: var(--blanc); border: 1px solid var(--line); }

/* Cadre de la carte interactive */
.bst-map-frame {
    border-radius: var(--r-bst);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-bst-sm);
    background: var(--sable);
}

/* ============================================================================
   Footer — base blush, labels mono rose, hairlines chaudes
   ============================================================================ */
.bst-footer { background: var(--blush); border-top: 1px solid var(--line); }
.bst-footer-title {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kaki);
}
.bst-footer-link { font-size: 0.9rem; color: var(--encre-72); text-decoration: none; transition: color 0.2s var(--ease-brand); }
.bst-footer-link:hover, .bst-footer-link:focus { color: var(--rose); }
.bst-footer-baseline { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--encre); }
.bst-footer-social {
    background: var(--poudre);
    color: var(--rose);
    transition: background 0.2s var(--ease-brand), color 0.2s var(--ease-brand), transform 0.2s var(--ease-brand);
}
.bst-footer-social:hover { background: var(--rose); color: var(--blush); transform: translateY(-2px); }
.bst-footer-bottom { border-top: 1px solid var(--line); }
.bst-footer-caption {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kaki);
}
.bst-input {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 11px 20px 11px 44px;
    transition: box-shadow 0.2s var(--ease-brand), border-color 0.2s var(--ease-brand);
}
.bst-input::placeholder { color: var(--kaki); }
.bst-input:focus { outline: none; border-color: var(--rose); box-shadow: var(--shadow-bst-key); }

/* ============================================================================
   Sidebar rail — surfaces chaudes, actif rose, hairlines
   ============================================================================ */
.app-sidebar { background: var(--blanc); border-right-color: var(--line); }
.app-sidebar .border-bottom, .app-sidebar .border-top { border-color: var(--line) !important; }
.sidebar-summary { color: var(--encre); }
.sidebar-summary:hover { background: var(--blush); color: var(--encre); }
.sidebar-summary.active { background: var(--rose-08); color: var(--rose); }
.sidebar-summary.active svg { color: var(--rose) !important; }
.sidebar-child-link { color: var(--encre-72); }
.sidebar-child-link:hover { background: var(--blush); color: var(--encre); }
.sidebar-child-link.active { background: var(--rose-08); color: var(--rose); font-weight: 600; }
.bst-dot-active { background: var(--rose); }
.bst-sidebar-foot { background: var(--blush); }
.bst-avatar {
    background: var(--poudre) !important;
    color: var(--rose) !important;
    font-family: var(--font-serif);
    font-size: 0.9rem !important;
}