/*
  Direction : « plan d'architecte ». Papier froid, encre, un bleu-ardoise
  (confiance, blueprint) comme accent principal. Une seule couleur chaude,
  réservée strictement aux BAISSES DE PRIX — le moment fort de la chasse.
*/
:root {
  /* --- Thème CLAIR (défaut) --- */
  --paper: #F5F4F1;
  --card: #FFFFFF;
  --ink: #1B1D1E;
  --muted: #6B6E70;
  --line: #E4E2DC;
  --slate: #34535F;   /* accent principal */
  --slate-2: #253d47; /* hover */
  --drop: #C2410C;    /* baisse de prix — le seul accent chaud, rare et signifiant */

  /* Tokens sémantiques (thématisables) */
  --on-accent: #FFFFFF;              /* texte sur fond accent (slate/drop/statut) */
  --ok: #2F7D55;                     /* vert : contacté / vu / succès */
  --gold: #E6B800;                   /* or : étoiles de note */
  --shadow: rgba(0,0,0,.14);         /* ombres (cartes, popovers, modales) */
  --overlay: rgba(0,0,0,.45);        /* fond des dialogs (backdrop) */
  /* Couleurs de statut (source unique, cf. lib/statusMeta.ts) */
  --st-a_visiter: #2F7D55;
  --st-a_creuser: #B8860B;
  --st-planifiee: #2563EB;
  --st-visite: #2F7D55;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  color-scheme: light;
}

/* --- Thème SOMBRE ---
   Le script anti-flash (app.html) pose data-theme="dark|light" avant le paint.
   Le media query sert de repli si JS est désactivé (sauf choix explicite "light"). */
:root[data-theme="dark"] {
  --paper: #14181A;
  --card: #1C2225;
  --ink: #ECEAE3;
  --muted: #9AA7AC;
  --line: #2E363B;
  --slate: #7FA6B4;   /* accent éclairci pour rester lisible sur fond sombre */
  --slate-2: #9BC0CC;
  --drop: #E0793F;
  --on-accent: #10171A;  /* texte SOMBRE sur accent clair (slate/drop éclaircis) */
  --ok: #55B083;
  --gold: #ECC155;
  --shadow: rgba(0,0,0,.5);
  --overlay: rgba(0,0,0,.62);
  --st-a_visiter: #5FB585;
  --st-a_creuser: #D9A93A;
  --st-planifiee: #6EA0FF;
  --st-visite: #5FB585;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14181A;
    --card: #1C2225;
    --ink: #ECEAE3;
    --muted: #9AA7AC;
    --line: #2E363B;
    --slate: #7FA6B4;
    --slate-2: #9BC0CC;
    --drop: #E0793F;
    --on-accent: #10171A;
    --ok: #55B083;
    --gold: #ECC155;
    --shadow: rgba(0,0,0,.5);
    --overlay: rgba(0,0,0,.62);
    --st-a_visiter: #5FB585;
    --st-a_creuser: #D9A93A;
    --st-planifiee: #6EA0FF;
    --st-visite: #5FB585;
    color-scheme: dark;
  }
}

/*
  Breakpoints — système UNIQUE (mobile-first). Les media queries CSS ne peuvent pas
  lire var(), on les documente donc ici comme convention à respecter partout :
    --bp-sm : 560px  (téléphone → 1 colonne : grilles de cartes)
    --bp-md : 720px  (fiche annonce 2 colonnes → 1)
    --bp-lg : 960px  (contenu large)
  Les tokens ci-dessous servent au JS (matchMedia) et de mémo ; en CSS, écrire la
  valeur littérale correspondante (560 / 720 / 960), pas d'autres seuils ad hoc.
*/
:root {
  --bp-sm: 560px;
  --bp-md: 720px;
  --bp-lg: 960px;
  --header-h: 62px;   /* hauteur ~ du header sticky (desktop) — pour caler les sous-headers collants */
}
@media (max-width: 640px) {
  :root { --header-h: calc(48px + env(safe-area-inset-top)); }
}

* { box-sizing: border-box; }
/* Fond posé sur html ET body : l'OS échantillonne le fond du body pour teinter la barre
   système du bas (PWA), et c'est aussi ce qui transparaît derrière la tab bar floutée. */
html, body { background: var(--paper); }
body {
  margin: 0; font-family: var(--body); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* @mention colorée dans les commentaires / le chat. Lisible sur fond clair
   comme sur une bulle « mienne » (fond accent). */
.mention { color: var(--slate); font-weight: 600; }
.cmsg.mine .mention, .msg.mine .mention { color: var(--on-accent); text-decoration: underline; text-underline-offset: 2px; }

  .pwa.svelte-jazd01 {
    position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px));
    display: flex; align-items: center; gap: 14px; justify-content: space-between;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
  }
  .txt.svelte-jazd01 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .txt.svelte-jazd01 b:where(.svelte-jazd01) { font-size: 14px; }
  .txt.svelte-jazd01 span:where(.svelte-jazd01) { font-size: 12px; color: var(--muted); }
  .act.svelte-jazd01 { display: flex; gap: 8px; flex: none; }
  .act.svelte-jazd01 button:where(.svelte-jazd01) { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px; border: none;
                background: var(--slate); color: var(--on-accent); font-weight: 600; cursor: pointer; white-space: nowrap; }
  .act.svelte-jazd01 .ghost:where(.svelte-jazd01) { background: none; color: var(--muted); border: 1px solid var(--line); }
  /* Au-dessus de la tab bar sur mobile */
  @media (max-width: 640px) { .pwa.svelte-jazd01 { bottom: calc(72px + env(safe-area-inset-bottom)); } }

  .np-title.svelte-1lov9vg { display: inline-flex; align-items: center; gap: 6px; }
  .np.svelte-1lov9vg {
    position: fixed; z-index: 41; left: 50%; transform: translateX(-50%);
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px));
    display: flex; align-items: center; gap: 14px; justify-content: space-between;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
  }
  .txt.svelte-1lov9vg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .txt.svelte-1lov9vg b:where(.svelte-1lov9vg) { font-size: 14px; }
  .txt.svelte-1lov9vg span:where(.svelte-1lov9vg) { font-size: 12px; color: var(--muted); }
  .act.svelte-1lov9vg { display: flex; gap: 8px; flex: none; }
  .act.svelte-1lov9vg button:where(.svelte-1lov9vg) { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px; border: none;
                background: var(--slate); color: var(--on-accent); font-weight: 600; cursor: pointer; white-space: nowrap; }
  .act.svelte-1lov9vg .ghost:where(.svelte-1lov9vg) { background: none; color: var(--muted); border: 1px solid var(--line); }
  /* Au-dessus de la tab bar (et de la bannière PWA) sur mobile */
  @media (max-width: 640px) { .np.svelte-1lov9vg { bottom: calc(140px + env(safe-area-inset-bottom)); } }

  /* Barre de progression fine en haut, animée tant que la navigation est en cours. */
  .navprogress.svelte-12qhfyh { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
    background: linear-gradient(90deg, transparent, var(--slate), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: svelte-12qhfyh-navslide 1s linear infinite; }
  @keyframes svelte-12qhfyh-navslide {
    0% { background-position: -40% 0; }
    100% { background-position: 140% 0; }
  }
  @media (prefers-reduced-motion: reduce) { .navprogress.svelte-12qhfyh { animation: none; opacity: .6; } }

  header.svelte-12qhfyh {
    display: flex; align-items: center; gap: 24px;
    padding: 18px 28px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(6px); z-index: 10;
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .brand.svelte-12qhfyh { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--ink);
           display: inline-flex; align-items: center; gap: 8px; }
  .brand.svelte-12qhfyh .logo:where(.svelte-12qhfyh) { height: 26px; width: auto; display: block; }
  .brand.svelte-12qhfyh .wm:where(.svelte-12qhfyh) { display: inline-flex; align-items: baseline; gap: 4px; }
  .brand.svelte-12qhfyh .amp:where(.svelte-12qhfyh) { font-style: normal; font-weight: 500; color: var(--muted); } /* esperluette droite, discrète */
  .brand.svelte-12qhfyh .ac:where(.svelte-12qhfyh) { color: var(--slate); font-style: italic; }
  nav.svelte-12qhfyh { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
  nav.svelte-12qhfyh a:where(.svelte-12qhfyh) { font-size: 14px; color: var(--muted); text-decoration: none;
          display: inline-flex; align-items: center; gap: 5px; }
  nav.svelte-12qhfyh a:where(.svelte-12qhfyh) svg { opacity: .8; }
  nav.svelte-12qhfyh a:where(.svelte-12qhfyh):hover { color: var(--ink); }
  .badge.svelte-12qhfyh { font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
           background: var(--drop, #d64545); color: var(--on-accent); border-radius: 999px; padding: 2px 6px; min-width: 8px; text-align: center; }
  .headright.svelte-12qhfyh { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .themebtn.svelte-12qhfyh { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
              border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; }
  .themebtn.svelte-12qhfyh:hover { border-color: var(--slate); color: var(--ink); }
  .tabbar.svelte-12qhfyh .ti:where(.svelte-12qhfyh) { position: relative; display: inline-flex; }
  .tabbar.svelte-12qhfyh .badge.dot:where(.svelte-12qhfyh) { position: absolute; top: -6px; left: 12px; padding: 1px 5px; }
  .user.svelte-12qhfyh { display: flex; align-items: center; gap: 10px; }
  .who.svelte-12qhfyh { font-size: 13px; color: var(--ink); font-weight: 500; }
  .user.svelte-12qhfyh button:where(.svelte-12qhfyh) { font: inherit; font-size: 12px; padding: 5px 12px; border: 1px solid var(--line);
                 border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer;
                 display: inline-flex; align-items: center; gap: 5px; }
  .user.svelte-12qhfyh button:where(.svelte-12qhfyh):hover { border-color: var(--slate); color: var(--ink); }
  main.svelte-12qhfyh { max-width: 1536px; margin: 0 auto; padding: 28px;
         padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  main.full.svelte-12qhfyh { max-width: none; padding: 0; }

  /* Tab bar mobile : cachée par défaut (desktop). */
  .tabbar.svelte-12qhfyh { display: none; }

  @media (max-width: 640px) {
    header.svelte-12qhfyh { gap: 14px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
             align-items: center; }
    .brand.svelte-12qhfyh { font-size: 20px; }
    header.svelte-12qhfyh nav:where(.svelte-12qhfyh) { display: none; }          /* le menu du haut passe en bas */
    /* Réserve = hauteur réelle de la tab bar (~58px) + safe-area iOS, pas un chiffre en dur. */
    main.svelte-12qhfyh { padding: 16px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

    .tabbar.svelte-12qhfyh {
      display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
      /* Fond opaque de repli (thématisé) SOUS le fond translucide : rien de blanc ne
         transparaît derrière le flou, y compris dans la safe-area du bas. */
      background: var(--paper);
      background: color-mix(in srgb, var(--card) 94%, transparent);
      backdrop-filter: blur(8px); border-top: 1px solid var(--line);
      padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom));
      justify-content: space-around;
    }
    .tabbar.svelte-12qhfyh a:where(.svelte-12qhfyh) {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 4px 0; font-size: 10.5px; color: var(--muted); text-decoration: none;
    }
    .tabbar.svelte-12qhfyh a.on:where(.svelte-12qhfyh) { color: var(--slate); }
    .tabbar.svelte-12qhfyh a.on:where(.svelte-12qhfyh) svg { stroke-width: 2.4; }
  }