/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */
/*
 * Quark 2 — Cal.com-inspired design system atop PicoCSS
 * ----------------------------------------------------
 * Principles (per DESIGN.md):
 *  - Monochrome palette; color is foreign.
 *  - Cal Sans for display, Inter for body.
 *  - Shadow-first depth: ring + soft + contact.
 *  - Generous whitespace; 80-96px between sections.
 */

/* ---------- Tokens ---------- */

:root,
:root[data-theme="light"] {
  --q2-bg: #fbfbfc; /* page canvas — whisper-soft gray */
  --q2-bg-elev: #ffffff; /* cards / content surface */
/*  --q2-bg-muted: #f2f2f4; */ /* recessed */
  --q2-bg-muted: #f1ece7; /* recessed */
  --q2-bg-inverse: #111111;

  --q2-text: #242424;
/*  --q2-text-strong: #111111; */
  --q2-text-strong: #9a7f7f;
  --q2-text-muted: #898989;
  --q2-text-inverse: #ffffff;

  --qé-accent: #B6997E;

  --q2-border-ring: rgba(34, 42, 53, 0.08);
  --q2-border-strong: rgba(34, 42, 53, 0.14);
  --q2-divider: rgba(34, 42, 53, 0.08);

  --q2-shadow-card:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.08) 0 0 0 1px,
    rgba(34, 42, 53, 0.05) 0 4px 8px 0;
  --q2-shadow-raised:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.08) 0 12px 28px -8px;
  --q2-shadow-dropdown:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.12) 0 16px 32px -12px;
  --q2-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.16);
  --q2-shadow-hl: inset 0 2px 0 rgba(255, 255, 255, 0.15);

  --q2-radius-xs: 4px;
  --q2-radius-sm: 6px;
  --q2-radius: 8px;
  --q2-radius-md: 12px;
  --q2-radius-lg: 16px;
  --q2-radius-pill: 9999px;

  --q2-nav-bg: rgba(255, 255, 255, 0.78);
  --q2-nav-border: rgba(34, 42, 53, 0.08);
  /* Header row height. Override this and `header-transparent` keeps lining the
   * hero up with it, since the overlay offset is derived from the same value. */
  --q2-header-height: 72px;

  /* Pico overrides */
  --pico-font-family-sans-serif:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display:
    "Cal Sans", "Inter", sans-serif;

  /* Forum Pro headings. Without this the forum falls back to the body font for
   * its own headings while the unclassed ones under them keep Cal Sans, so a
   * page title ends up lighter than the subheadings beneath it. Hand it the
   * display face and forum headings speak the same voice as the rest of Quark. */
  --forum-font-display: var(--pico-font-family-display);
  --pico-font-family-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pico-font-size: 16px;
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-border-radius: var(--q2-radius);
  --pico-spacing: 1rem;
  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-h1-color: var(--q2-text);
  --pico-h2-color: var(--q2-text);
  --pico-h3-color: var(--q2-text);
  --pico-h4-color: var(--q2-text);
  --pico-h5-color: var(--q2-text);
  --pico-h6-color: var(--q2-text);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text);
  --pico-primary-hover: #000000;
  --pico-primary-focus: var(--q2-focus-ring);
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-secondary: var(--q2-text-muted);
  --pico-secondary-hover: var(--q2-text);
  --pico-contrast: var(--q2-text);
  --pico-contrast-hover: #000000;
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: var(--q2-shadow-card);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg);
  --pico-form-element-border-color: rgba(34, 42, 53, 0.16);
  --pico-form-element-color: var(--q2-text);
  --pico-form-element-focus-color: var(--q2-focus-ring);
  /* Pico draws checked checkbox/radio fill from these — point them at the accent */
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}

:root[data-theme="dark"] {
  --q2-bg: #08090b;
  --q2-bg-elev: #1d1f25; /* card surface — lifted for visibility */
  --q2-bg-muted: #2a2d34; /* recessed / hover state */
  --q2-bg-inverse: #f5f5f5;

  --q2-text: #f2f2f3;
  --q2-text-strong: #ffffff;
  --q2-text-muted: #9a9aa0;
  --q2-text-inverse: #111111;

  --q2-border-ring: rgba(255, 255, 255, 0.14);
  --q2-border-strong: rgba(255, 255, 255, 0.2);
  --q2-divider: rgba(255, 255, 255, 0.1);

  --q2-shadow-card:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.55) 0 4px 12px 0;
  --q2-shadow-raised:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.65) 0 14px 32px -8px;
  --q2-shadow-dropdown:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.75) 0 16px 32px -12px;
  --q2-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.5);
  --q2-shadow-hl: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --q2-nav-bg: rgba(11, 11, 12, 0.78);
  --q2-nav-border: rgba(255, 255, 255, 0.06);

  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text-strong);
  --pico-primary-hover: #ffffff;
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-contrast: var(--q2-text-strong);
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg-elev);
  --pico-form-element-border-color: rgba(255, 255, 255, 0.12);
  --pico-form-element-color: var(--q2-text);
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}

.chantier-infos h2 {
    /* color: #73514a; */
    color: #a0867e;
}
.chantier-infos ul {
    padding-left:20px !important;
}

.chantier-infos > ul > li > strong {
    color:#86756d;
}

h1,
.fiche-chantier h1 {
    color:#86756d;
}

#body-wrapper {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: #F6f2f0;
}

.dropmenu a.active {
    color: var(--q2-text-inverse);
    background: #9a7f7f;
}
.dropmenu a.active:hover {
    color: var(--q2-text-inverse);
    background: #896c6c;
}

.blog-page-header {
    text-align: justify;
}

.overlay .overlay-menu a {
    color: #9a7f7f;
}

.gfu { display: none; visibility: hidden; position: absolute; left: -9999px; }

body.header-light:not(.scrolled) #header,
body.header-light:not(.scrolled) #header .navbar-brand,
body.header-light:not(.scrolled) #header .theme-toggle,
body.header-light:not(.scrolled) #header .login-status-wrapper,
body.header-light:not(.scrolled) #header .dropmenu > ul > li > a {
  color: #9a7f7f;
}
body.header-light:not(.scrolled) #header .navbar-brand svg path {
  fill: #9a7f7f;
}