/* ============================================================
   DAR KOUTOUBIA — « Édition Claire »
   Éditorial photo-first : papier ivoire chaud, encre chaude,
   UN accent ocre employé avec retenue, cartes flottantes.
   S'active quand la couche cobalt est désactivée.
   ============================================================ */

:root {
  /* Surfaces — papier chaud, sections blanches */
  --noir: #FAF6EF;            /* fond principal — papier */
  --noir-deep: #F2EADC;       /* bandes douces */
  --bordeaux: #FFFFFF;        /* sections blanches */
  --bordeaux-deep: #FFFFFF;   /* cartes blanches */

  /* Encre chaude, presque noire (sophistiquée, neutre) */
  --ivoire: #2A211E;
  --ivoire-dim: rgba(42, 33, 30, 0.66);
  --ivoire-faint: rgba(42, 33, 30, 0.40);

  /* UN accent : ocre de Marrakech, assombri pour le contraste */
  --cuivre: #A4623A;
  --cuivre-hl: #8A4F2C;
  --terracotta: #B8603A;

  /* Filets capillaires */
  --line: rgba(42, 33, 30, 0.13);
  --line-soft: rgba(42, 33, 30, 0.07);

  --majorelle: #2D6CB0;
  --hero-tone: #FAF6EF;

  --card-shadow: 0 1px 2px rgba(42, 33, 30, 0.04), 0 18px 38px -22px rgba(42, 33, 30, 0.32);
}

::selection { background: var(--cuivre); color: #FFF; }
select option { color: #2A211E; background: #FFFDF8; }

/* ---------- Placeholders : papier clair ---------- */
.ph {
  background:
    repeating-linear-gradient(-45deg, rgba(42,33,30,0.045) 0px, rgba(42,33,30,0.045) 1px, transparent 1px, transparent 9px),
    linear-gradient(160deg, #ECE2D2 0%, #E3D6C2 100%);
}
.ph::after { color: rgba(42, 33, 30, 0.4); }

/* ---------- Champs ---------- */
.search-field select, .filter-field select,
.visit-field input, .visit-field select, .visit-field textarea,
.calc-input-group input, .calc-input-group select,
.est-field input, .est-field select,
.contact-field input, .contact-field select, .contact-field textarea,
.alert-form input {
  background: #FFFDF8; border-color: rgba(42,33,30,0.16); color: #2A211E;
}
.search-field select:focus, .filter-field select:focus,
.visit-field input:focus, .visit-field select:focus, .visit-field textarea:focus,
.calc-input-group input:focus, .calc-input-group select:focus,
.est-field input:focus, .est-field select:focus,
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus,
.alert-form input:focus { border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(164,98,58,0.12); }
.alert-form input::placeholder, .visit-field input::placeholder, .visit-field textarea::placeholder,
.contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(42,33,30,0.4); }

/* ---------- Logo : ocre d'origine ---------- */
.brand-mark { background: url("img/logo-dk-header.png") center/cover no-repeat, #1a0d10; color: transparent; border-color: var(--cuivre); }
.hero-mark { background: url("img/favicon-512.png") center/cover no-repeat, #1a0d10; color: transparent; border-color: var(--cuivre); }

/* ---------- Header : barre claire constante (lisible partout) ---------- */
.site-header { background: transparent; border-bottom: none; }
.site-header.is-scrolled { background: rgba(250,246,239,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(42,33,30,0.1); }
.site-header:not(.is-scrolled) .brand-name,
.site-header:not(.is-scrolled) .main-nav a,
.site-header:not(.is-scrolled) .header-utils,
.site-header:not(.is-scrolled) .util-select,
.site-header:not(.is-scrolled) .burger {
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.85);
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(255, 253, 248, 0.6), 0 1px 10px rgba(255, 253, 248, 0.35);
}
.main-nav a:hover { color: var(--cuivre); }
.main-nav a[aria-current] { color: var(--cuivre-hl); }
.util-select:hover { color: var(--cuivre); }

/* ---------- Boutons ---------- */
.btn { border-color: rgba(42,33,30,0.28); }
.btn:hover { border-color: var(--cuivre); color: var(--cuivre-hl); }
.btn--solid { background: var(--cuivre); color: #FFF; border-color: var(--cuivre); }
.btn--solid:hover { background: var(--cuivre-hl); border-color: var(--cuivre-hl); color: #FFF; }
.btn--ghost { border-color: rgba(42,33,30,0.28); color: var(--ivoire); }
.btn--ghost:hover { border-color: var(--cuivre); color: var(--cuivre-hl); }
.link-line { color: var(--cuivre-hl); }
.link-line:hover { color: var(--cuivre); }
.link-line::after { background: var(--cuivre); }

/* ---------- Hero : photo pleine, texte ivoire (standard prestige) ---------- */
.hero-veil {
  background: linear-gradient(180deg, rgba(18,22,42,0.58) 0%, rgba(18,22,42,0.42) 42%, rgba(18,22,42,0.68) 100%);
}
/* Le hero reste une zone « photo + texte clair » ; le reste du site est clair */
.hero-content h1, .hero-content .hero-sub { color: #F8F1E6; }
.hero-content .hero-tagline { color: #C68A54; }
.hero-content h1 em { color: #EBB683; }
.search-panel { background: rgba(255,253,248,0.9); border-color: rgba(42,33,30,0.12); box-shadow: var(--card-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.search-tabs button.is-active { color: var(--cuivre-hl); border-color: var(--cuivre); }

/* ---------- Hero éditorial ---------- */
.vm-hero-overlay { background: linear-gradient(to top, #FAF6EF 0%, rgba(250,246,239,0.4) 48%, rgba(42,33,30,0.08) 100%); }
.vm-topic-pill { background: rgba(255,253,248,0.85); color: var(--ivoire-dim); border-color: rgba(42,33,30,0.16); }
.vm-topic-pill:hover { border-color: var(--cuivre); color: var(--cuivre-hl); }
.vm-topic-pill:hover svg { stroke: var(--cuivre); }

/* ---------- Sur photos : restent sombres ---------- */
.badge { background: rgba(26,18,16,0.78); color: #F4EBE0; }
.badge--verified .dot { background: var(--cuivre-hl); }
.badge--excl { background: var(--cuivre); color: #FFF; border-color: var(--cuivre); }
.fav-btn { background: rgba(26,18,16,0.55); color: rgba(255,255,255,0.85); }
.fav-btn:hover, .fav-btn.is-active { color: #fff; }
.fav-btn.is-active svg { fill: var(--cuivre); stroke: var(--cuivre); }
.gallery-btn { background: rgba(26,18,16,0.8); color: #F4EBE0; }
.blog-tag { background: rgba(26,18,16,0.8); color: #F4EBE0; }

/* ---------- Cartes flottantes (pas de filet, ombre douce) ---------- */
.prop-card, .blog-card, .vm-theme-card, .team-card {
  background: #FFFFFF; border: 1px solid var(--line-soft); box-shadow: var(--card-shadow);
}
.prop-card:hover, .blog-card:hover, .vm-theme-card:hover, .team-card:hover {
  border-color: var(--line); box-shadow: 0 2px 4px rgba(42,33,30,0.05), 0 26px 50px -24px rgba(42,33,30,0.4);
  transform: translateY(-4px);
}
.prop-foot { background: rgba(42,33,30,0.025); }

/* ---------- Filtres ---------- */
.filter-bar.is-stuck { background: rgba(250,246,239,0.95); }
.chip { border-color: rgba(164,98,58,0.4); color: var(--cuivre-hl); }
.chip:hover { border-color: var(--cuivre); }
.tab-btn.is-active { border-bottom-color: var(--cuivre); color: var(--cuivre-hl); }
.audience-pill.is-active { border-color: var(--cuivre); color: var(--cuivre-hl); background: rgba(164,98,58,0.1); }
.pagination button[aria-current] { border-color: var(--cuivre); color: var(--cuivre-hl); }
.pagination button:hover { color: var(--cuivre-hl); border-color: rgba(164,98,58,0.4); }

/* ---------- Carte des quartiers : papier, accent ocre ---------- */
.map-container { background: repeating-linear-gradient(-45deg, rgba(42,33,30,0.035) 0px, rgba(42,33,30,0.035) 1px, transparent 1px, transparent 12px), linear-gradient(160deg, #F0E7D7 0%, #E7DAC6 100%); border-color: var(--line); }
.map-pin-dot { background: #FFFDF8; border-color: var(--cuivre); }
.map-pin:hover .map-pin-dot, .map-pin.is-active .map-pin-dot { background: var(--cuivre); border-color: var(--cuivre); box-shadow: 0 0 0 6px rgba(164,98,58,0.18); }
.map-pin:hover .map-pin-label, .map-pin.is-active .map-pin-label { color: var(--cuivre-hl); }
.map-tooltip { background: rgba(255,253,248,0.98); box-shadow: 0 14px 44px rgba(42,33,30,0.16); }
.map-tooltip::after { border-top-color: rgba(255,253,248,0.98); }
.map-nav-item.is-active { border-left-color: var(--cuivre); background: rgba(164,98,58,0.08); }
.map-nav-item:hover { background: rgba(164,98,58,0.05); }
.map-nav-arrow { stroke: var(--cuivre); }
.tt-cta { color: var(--cuivre); }
.tt-cta:hover { color: var(--cuivre-hl); }
.q-stat:nth-child(even) strong, .quartier-stat:nth-child(even) strong { color: var(--terracotta); }

/* ---------- Bandes douces ---------- */
.section--ivory, .q-faq, .guide-faq { background: #F2E8D8; color: #2A211E; }
.faq-item { border-color: rgba(42,33,30,0.14); }
.faq-item summary { color: #2A211E; }
.faq-item summary:hover { color: var(--terracotta); }
.faq-item summary::after { color: var(--terracotta); }
.faq-answer { color: rgba(42,33,30,0.7); }

/* ---------- Process / valeurs / citations ---------- */
.process-step:nth-child(even) .process-num { color: var(--terracotta); }
.value-item:nth-child(even) .value-icon { border-color: var(--cuivre); }
.value-item:nth-child(even) .value-icon svg { stroke: var(--cuivre); }
.info-box--majorelle { border-left-color: var(--majorelle); background: rgba(45,108,176,0.07); }
.info-box--majorelle h4 { color: var(--majorelle); }
.vm-quote svg { stroke: var(--cuivre) !important; }
.vm-quote cite { color: var(--cuivre-hl); }
.star8 { stroke: var(--cuivre); }
li:nth-child(even) .star8 { stroke: var(--majorelle); }

/* ---------- Lightbox (reste sombre) ---------- */
.lightbox { background: rgba(26,18,16,0.97); }
.lightbox .ph { background: repeating-linear-gradient(-45deg, rgba(164,98,58,0.08) 0px, rgba(164,98,58,0.08) 1px, transparent 1px, transparent 10px), linear-gradient(160deg, #3A2A22 0%, #241712 100%); }
.lightbox .ph::after { color: rgba(235,182,131,0.5); }
.lightbox-close { color: #F4EBE0; border-color: rgba(235,182,131,0.4); }
.lightbox-nav button { border-color: rgba(235,182,131,0.4); color: #EBB683; }
.lightbox-nav button:hover { background: var(--cuivre); color: #fff; }

/* ---------- Concierge ---------- */
.concierge-fab { background: var(--cuivre); border-color: var(--cuivre); color: #fff; box-shadow: 0 8px 28px rgba(42,33,30,0.28); }
.concierge-fab:hover { background: var(--cuivre-hl); }
.chat-msg--user { background: var(--cuivre); color: #fff; }

/* ---------- Footer : encre chaude profonde (ancrage) ---------- */
.site-footer {
  --bordeaux: #2A211E; --bordeaux-deep: #221A18; --noir: #1E1714; --noir-deep: #1A1310;
  --ivoire: #F4EBE0; --ivoire-dim: rgba(244,235,224,0.62); --ivoire-faint: rgba(244,235,224,0.38);
  --cuivre: #D98E54; --cuivre-hl: #EBB683; --line: rgba(217,142,84,0.24); --line-soft: rgba(217,142,84,0.12);
  background: #221A18;
  border-top: 3px solid; border-image: linear-gradient(90deg, var(--cuivre) 0%, var(--terracotta) 100%) 1;
}
.mobile-menu {
  --bordeaux: #2A211E; --bordeaux-deep: #221A18; --noir: #1E1714;
  --ivoire: #F4EBE0; --ivoire-dim: rgba(244,235,224,0.62); --ivoire-faint: rgba(244,235,224,0.38);
  --cuivre: #D98E54; --cuivre-hl: #EBB683; --line: rgba(217,142,84,0.24); --line-soft: rgba(217,142,84,0.12);
  background: #1E1714;
}
.site-footer .brand-mark, .mobile-menu .brand-mark { background: url("img/logo-dk-header.png") center/cover no-repeat, #1a0d10; color: transparent; border-color: #D98E54; }
.site-footer a:hover, .footer-langs a[aria-current] { color: #EBB683; }

/* ---------- Filet dégradé sous en-têtes ---------- */
.page-head, .pg-hero, .q-hero, .guide-hero { position: relative; }
.page-head::after, .pg-hero::after, .q-hero::after, .guide-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--cuivre) 0%, var(--terracotta) 70%, transparent 100%); opacity: 0.5; pointer-events: none;
}

/* ---------- Range / divers ---------- */
input[type="range"]::-webkit-slider-thumb { background: var(--cuivre); border-color: #FFFDF8; }
input[type="range"]::-moz-range-thumb { background: var(--cuivre); border-color: #FFFDF8; }
.testimonial { background: #FFFFFF; border: 1px solid var(--line-soft); box-shadow: var(--card-shadow); }
.testimonial blockquote { color: #2A211E; }
.testimonial figcaption strong { color: #2A211E; }
.testimonial figcaption > span:not(.verified) { color: rgba(42,33,30,.72); }
.testimonial .verified { color: #8A4F2C; }
.concierge-band { background: linear-gradient(120deg, #F2E8D8, #F7F0E3); }
.breadcrumb a:hover { color: var(--cuivre-hl); }

/* En-têtes de page sur fond papier (au lieu de bordeaux/cobalt) */
.page-head, .pg-hero, .q-hero, .guide-hero { background: #FFFFFF; }
.page-head, .pg-hero, .q-hero, .guide-hero { background-image: radial-gradient(ellipse 600px 280px at 85% 0%, rgba(184,96,58,0.06), transparent 70%); }