/* =========================================================
   Bernistian — app.css (SENIOR STRUCTURE PASS — CSS STEP 3)
   ---------------------------------------------------------
   Goals:
   - Keep visuals identical (no cascade/order changes)
   - Improve maintainability (clear sections + conventions)
   - Prepare for optional future split (base/components/pages)
   ---------------------------------------------------------
   This pass:
   - Adds a clear table of contents + section separators
   - Normalizes whitespace (no selector/property changes)
   - Keeps all rules in the SAME order as before
   ========================================================= */

/* ===============================
   TABLE OF CONTENTS
   ===============================
   1) Design Tokens (CSS Variables)
   2) Base / Typography
   3) Layout (Header / Footer / Grids)
   4) Components (Buttons / Cards / Forms / Modals)
   5) Utilities
   6) Animations
   7) Page Sections (Analyse / Historique)
   8) Responsive
   =============================== */


/* =========================================================
   Bernistian — app.css (FINAL STRUCTURED CSS)
   ---------------------------------------------------------
   Goal: improve readability/maintainability WITHOUT changing
   any visual behavior (no cascade/order changes).

   What this pass does:
   - Add a global header + table of contents
   - Keep existing rules in the exact same order
   - Keep the consolidated :root tokens as the single source of truth

   Tip: When we later split pages (Analyse / Historique), we can
   safely extract page-specific blocks into separate files while
   keeping this file as base + components.
   ========================================================= */

/* ===============================
   TABLE OF CONTENTS
   -------------------------------
   1) Design tokens (:root)
   2) Base / Typography
   3) Layout (Header / Footer / Grid)
   4) Components (Cards / Buttons / Forms / Modals)
   5) Utilities
   6) Page-specific tweaks (Analyse / Historique)
   7) Responsive / Mobile fixes
   =============================== */


/* ===============================
   Design tokens (single source of truth)
   Consolidated :root variables (no visual change)
   =============================== */
:root{
  --bg: #fbfaf8;
  --ink: #0b1220;
  --navy: #0b1b33;
  --navy-2: #132a4a;
  --muted: #5b6472;
  --line: rgba(15,23,42,.10);
  --beige: #eadfce;
  --accent: #0b6b6d;
  --accent2: #b55334;
  --brand: #086B6D;
  --brand-2: #C67536;
  --bern-accent: #086B6D;
  --bern-accent2: #b55334;
  --bern-navy: #13213a;
  --bern-line: #e9e3d9;
  --bern-beige: #eadfce;
  --bern-teal: #086B6D;
  --card: #ffffff;
  --surface: rgba(255,255,255,.70);
  --border: rgba(15,23,42,.10);
  --radius: 18px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 14px;
  --shadow: 0 2px 8px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.07);
  --shadow-1: 0 2px 8px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.07);
  --shadow-2: 0 4px 16px rgba(16,24,40,.08), 0 12px 36px rgba(16,24,40,.09);
  --shadow-soft: 0 10px 26px rgba(2,6,23,.08);
  --shadowSoft2: 0 10px 26px rgba(20,20,20,.08);
  --shadowLift2: 0 14px 36px rgba(20,20,20,.12);
  --ring: 0 0 0 4px rgba(8, 107, 109, .14);
  --app-height: 100vh;
  --baseline-shift: +0.09rem;
  --btn-primary: var(--navy);
  --bgClean: #F7F6F3;
  --border2: rgba(18,22,33,.10);
  --cardBd: rgba(20,20,20,.08);
  --cardBg: #FFFFFF;
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.08'/></svg>");
  --shadowLift: 0 18px 50px rgba(18,22,33,.14);
  --shadowSoft: 0 10px 30px rgba(18,22,33,.10);
  --surface2: rgba(255,255,255,.90);
}

/* ===== Chat modal — top bar compact ===== */
.chat-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 10px;
}

.chat-top-left{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:min(520px, 100%);
}

.chat-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.btn.icon{
  width:36px;
  height:36px;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.chat-photos-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in oklab, var(--bg), #fff 55%);
  white-space:nowrap;
}

#triChatStatus{
  margin-left:6px;
  white-space:nowrap;
}

@media (max-width:640px){
  .btn.icon{ width:34px; height:34px; }
  .chat-photos-pill{ padding:5px 9px; font-size:12px; }
}

/* ===== style ===== */

/* ===============================
   Design system (unique source of truth)
   =============================== */

*{box-sizing:border-box}
html,body{height:100%}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif;color:var(--navy);letter-spacing:.2px}
a{text-decoration:none;color:inherit}
.small{font-size:13px;color:var(--muted)}

/* ===============================
   Header (parité avec index)
   =============================== */
header{position:sticky;top:0;background:rgba(255,253,248,.9);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
.wrap{max-width:1100px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:10px}
.logo{height:72px;width:auto}
.brand{display:flex;flex-direction:column;gap:6px}
.brand .name{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;letter-spacing:.8px;text-transform:uppercase;font-size:26px;line-height:1;margin:0
}
.brand .baseline{
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:12px;line-height:1.1;color:var(--muted);margin:0
}

/* Nav */
nav.primary{margin-left:auto;display:flex;gap:24px;font-weight:600}
nav.primary a{
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.9px;font-weight:600
}
nav.primary a:hover{border-color:var(--accent2);color:var(--accent2)}
nav.primary a.active{color:var(--accent2);border-bottom-color:var(--accent2)}

/* Burger */
.burger{
  margin-left:auto;display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid color-mix(in oklab, var(--line), var(--navy) 8%);border-radius:10px;background:#fff;
  cursor:pointer;transition:background .2s;
}
.burger:hover{background:color-mix(in oklab, var(--beige), white 40%)}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:transform .25s, background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s,top .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}
@media (max-width:900px){ nav.primary{display:none} .burger{display:flex} }

/* Mobile panel */
.panel{position:fixed;inset:0;background:transparent;z-index:200;pointer-events:none}
.panel.open{pointer-events:auto}

.sheet{
  position:absolute;top:0;left:0;right:0;width:100vw;max-width:100vw;height:auto;background:var(--bg);
  border-left:none;border-bottom:1px solid var(--line);
  padding:0;display:flex;flex-direction:column;gap:0;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  transform:translateY(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.panel.open .sheet{transform:translateY(0)}
.sheet header{position:relative;border:none;background:transparent;padding:0;margin:0 0 10px}
.sheet .title{font-weight:800;color:var(--navy);font-size:18px;margin:0}
.sheet .close{
  position:absolute;top:-6px;right:-6px;width:36px;height:36px;border:1px solid var(--line);
  border-radius:10px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;
  color:var(--muted);
}
.sheet .close:hover{background:color-mix(in oklab, var(--beige), white 40%)}
.sheet .close svg{width:18px;height:18px;stroke:currentColor}
.panel .sheet a{font-weight:800;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
#menu-panel .linklike{display:block;width:100%;text-align:left;font-weight:600;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line);background:none;border:0;cursor:pointer}
#menu-panel .linklike:hover{text-decoration:underline;color:var(--accent2)}
body>header::after{background:var(--accent2);opacity:.9;height:2px;bottom:-1px;content:"";position:absolute;left:0;right:0}

/* ===============================
   Layout
   =============================== */
main{max-width:1100px;margin:24px auto 96px;padding:0 18px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.grid{grid-template-columns:420px 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border:1px solid color-mix(in oklab, var(--navy), white 12%);border-radius:999px;
  font-weight:800;background:#fff;color:var(--navy);cursor:pointer;transition:background .2s,filter .2s,box-shadow .2s,transform .05s;
  -webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 rgba(0,0,0,.04)
}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--beige)}
a.btn,a.btn:visited{color:var(--navy);text-decoration:none}
    .btn.primary{background:var(--accent2);color:#fff;border-color:color-mix(in oklab, var(--accent2), black 12%)}
.btn.primary:hover{filter:brightness(1.03)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Remove navigateur "bleu" (tap highlight / focus rings) + focus propre */
*{ -webkit-tap-highlight-color: transparent; }
button, input, select, textarea{ font: inherit; }
button, .btn{ -webkit-appearance:none; appearance:none; }
button:focus, input:focus, select:focus, textarea:focus{ outline:none; }
.btn:focus-visible{
  border-color: color-mix(in oklab, var(--accent2), var(--line) 35%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 80%), 0 1px 0 rgba(0,0,0,.04);
}

/* Inputs / selects : focus discret (pas d’halo bleu) */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color: color-mix(in oklab, var(--accent2), var(--line) 25%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 84%);
}

/* Dropzone & thumbs */
.drop{border:1.5px dashed rgba(183,140,100,.28);background:linear-gradient(160deg,rgba(255,252,248,1) 0%,rgba(251,246,239,1) 100%);border-radius:18px;min-height:160px;display:grid;place-items:center;text-align:center;padding:28px 24px;transition:background .2s,border-color .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(16,24,40,.04),inset 0 1px 0 rgba(255,255,255,.9)}
.drop.active{border-color:#c67536;background:linear-gradient(160deg,rgba(255,249,242,1) 0%,rgba(252,241,228,1) 100%);box-shadow:0 2px 12px rgba(198,117,54,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.drop .hint{color:#9ca3af;font-size:13px}
.count{font-size:12px;color:#6b7280;margin-left:auto;display:flex;align-items:center}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px;width:100%}
.thumb{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#faf7f0;height:180px}
.thumb img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block;background:transparent}
.x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:999px;border:1px solid #e5dfd6;background:#fff;color:#374151;display:grid;place-items:center;cursor:pointer}

/* Inputs & actions */
.input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;background:#fff}
.input:focus{outline:none;border-color:color-mix(in oklab, var(--accent2), var(--line) 25%);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%)}
/* Themed checkbox (no default blue) */
.check{
  -webkit-appearance:none;
  appearance:none;
  width:18px;height:18px;
  border-radius:5px;
  border:1.5px solid var(--line);
  background:#fff;
  display:inline-grid;
  place-content:center;
  margin:0;
}
.check:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.check:checked::after{
  content:"";
  width:9px;height:5px;
  border:2px solid #fff;
  border-top:0;border-right:0;
  transform:rotate(-45deg);
  margin-top:-1px;
}
.check:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%);
  border-color:color-mix(in oklab, var(--accent2), var(--line) 25%);
}

.indice-exemples{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.indice-exemples{font-size:13px}}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.controls .spacer{flex:1 1 auto}
.actions{
  position: sticky;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 5;
  padding-top: 10px;
  background: transparent;
}

.actions .bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}
.privacy{font-size:12px;color:#6b7280;margin-top:6px}

/* KPIs & tags */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.k{border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center;background:#fff9f0}
.k b{font-size:20px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.tag{border:1px solid #eadfce;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:#475569}
.desc{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;white-space:pre-line;line-height:1.55}

.desc .desc-h{display:block;margin-top:14px;margin-bottom:4px;font-weight:800;color:#b5451b;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.desc .desc-bullet{font-weight:500;color:var(--accent)}
.desc-h{display:block;margin-top:14px;font-weight:800;color:#b5451b;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.desc-h:first-child{margin-top:0}


/* Loading box */
.loading-box{
  display:flex;align-items:center;gap:10px;
  border:1px solid color-mix(in oklab, var(--accent2), #d9d2c6 35%);
  background:linear-gradient(180deg,#fff,#fff9f0);
  color:var(--accent2);border-radius:14px;padding:12px 14px;font-weight:700
}
.loading-box .dot{width:10px;height:10px;border-radius:999px;background:currentColor;opacity:.85;animation:pulse .9s ease-in-out infinite}
.loading-box .pct{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:color-mix(in oklab, var(--accent2), #111 20%);opacity:.95}
.loading-box .bar{flex:1;height:8px;border-radius:999px;background:#f2e9dc;overflow:hidden;position:relative}
.loading-box .bar .fill{height:100%;width:0%;background:currentColor;opacity:.35;transition:width .28s ease}
.loading-box .bar.indeterminate::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in oklab, var(--accent2), white 50%),transparent);
  animation:shimmer 1.2s infinite linear
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* === UX: feedback immédiat au clic (mobile + desktop) === */
.btn.primary.is-loading{
  opacity:.9;
  pointer-events:none;
}
.btn.primary.is-loading::before{
  content:"";
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  border-radius:999px;
  margin-right:10px;
  vertical-align:-2px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.btn-status{
  margin-left:12px;
  color: var(--muted);
  min-height: 1.2em;
}

/* Actions (mobile) */
@media (max-width: 820px){
  .actions .bar{ flex-direction: column; align-items: stretch; gap:10px; }
  .actions .bar .btn{ width:100%; }
}

/* ===============================
   Aesthetic upgrade (Bernistian)
   - plus premium, plus lisible
   - sans casser la structure
   =============================== */


/* Fond + rythme visuel */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(8,107,109,.10), rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(198,117,54,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff, #fbfaf8);
}

/* Conteneur : un peu plus “studio” */
.wrap{
  max-width: 1160px;
}

/* Cartes : effet flottant sans bordure */
.card{
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: 0 2px 8px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.07);
  background: #ffffff;
  backdrop-filter: none;
}
.card:hover{
  box-shadow: 0 4px 16px rgba(16,24,40,.08), 0 12px 36px rgba(16,24,40,.09);
}

/* Titres : moins “bloc”, plus élégant */
h1, h2, .result-title{
  letter-spacing: -0.02em;
}
.result-title{
  line-height: 1.08;
}

/* Icône copy : plus discret, mieux intégré */
.iconbtn{
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
}
.iconbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(16,24,40,.10);
}
.iconbtn:focus{
  outline: none;
  box-shadow: var(--ring), 0 14px 28px rgba(16,24,40,.10);
}

/* Boutons : plus “produit” */
.btn.primary{
  background: linear-gradient(180deg, rgba(8,107,109,1), rgba(6,90,92,1));
  border: 1px solid rgba(6,90,92,1);
  box-shadow: 0 12px 26px rgba(8,107,109,.22);
}
.btn.primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.btn.primary:active{ transform: translateY(0px); }
.btn.ghost{
  border: 1px solid rgba(198,117,54,.50);
  background: rgba(255,255,255,.85);
}
.btn.ghost:hover{
  background: rgba(255,255,255,1);
  box-shadow: 0 10px 18px rgba(198,117,54,.10);
}

.drop strong{ letter-spacing:-0.01em; }

/* Tags : plus “chip”, plus propre */
.tags .tag{
  border: 1px solid rgba(198,117,54,.22);
  background: rgba(255,255,255,.80);
}
.tags .tag:hover{
  background: rgba(255,255,255,1);
  border-color: rgba(198,117,54,.35);
}

/* KPIs prix : plus cartes */
.kpis .k{
  border-radius: var(--radius-md);
  border: 1px solid rgba(16,24,40,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,250,248,.95));
  box-shadow: 0 10px 22px rgba(16,24,40,.06);
}
.kpis .k b{
  letter-spacing: -0.01em;
}
.kpis .k .small{
  color: rgba(16,24,40,.65);
}

/* Bloc texte : plus lisible */
.box{
  border-radius: var(--radius-lg);
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.07);
}

/* Accordéons : plus “clean” */
details{
  border-radius: var(--radius-lg);
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.07);
}
summary{
  padding: 14px 16px;
}
details[open] summary{
  border-bottom: 1px solid rgba(16,24,40,.08);
}

/* Mobile : titres plus compacts, respiration */
@media (max-width: 760px){
  .result-title{
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.06;
  }
  .kpis .k{ padding: 12px 10px; }
}

/* KPI alignment fix: equal heights + centered content (prices won't shift) */
.kpis{
  align-items: stretch;
}
.kpis .k{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 132px; /* keeps grid stable */
  padding: 14px 12px;
}
.kpis .k .small{
  margin-bottom: 8px;
}
.kpis .k b{
  display:block;
  margin: 0;
}
.kpis .k .pillwrap{
  margin-top: 10px;
  min-height: 44px; /* reserves room for confidence pill */
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ===============================
   Modern UI pass (tech + broc)
   - KPIs centered (real)
   - Median highlighted
   - Better hierarchy & spacing
   =============================== */


/* make right column feel like a product panel */
/* Title area */
.title-row{
  align-items:flex-start !important;
  gap: 14px !important;
}
.result-title{
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
}

/* Chips */
.tags .tag{
  border: 1px solid rgba(198,117,54,.20) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 6px 16px rgba(2,6,23,.04);
}

/* KPI grid as modern cards */
.kpis{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* REAL vertical centering */
.kpis .k{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  min-height: 150px !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,250,248,.96)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 16px 14px !important;
}

/* Label / value spacing */
.kpis .k .small{
  margin: 0 0 10px 0 !important;
  font-weight: 600;
  color: rgba(15,23,42,.62) !important;
  letter-spacing: .02em;
}
.kpis .k b{
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

/* Reserve space for confidence pill; keep centered */
.kpis .k .pillwrap{
  margin-top: 12px !important;
  min-height: 44px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

/* Highlight the Median card (2nd KPI) */
.kpis .k:nth-child(2){
  border-color: rgba(8,107,109,.28) !important;
  box-shadow: 0 18px 50px rgba(8,107,109,.18) !important;
  transform: translateY(-2px);
}
.kpis .k:nth-child(2)::after{
  content:"Référence";
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,107,109,.10);
  border: 1px solid rgba(8,107,109,.22);
  color: rgba(8,107,109,1);
  font-weight: 700;
}
.kpis .k:nth-child(2){ position: relative; }

/* Confidence pill style boost */
.pill{
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  border-width: 1px !important;
}

/* Make the description box feel like an "output" */
.box{
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Mobile: 2x2 KPIs */
@media (max-width: 760px){
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis .k{ min-height: 142px !important; }
  .kpis .k b{ font-size: 26px !important; }
  .kpis .k:nth-child(2){ transform: translateY(0px); }
  .kpis .k:nth-child(2)::after{ top: 10px; right: 10px; }
}

/* === Mobile UX fixes === */
/* Prevent iOS Safari zoom on focus (needs >= 16px on form fields) */
input, textarea, select { font-size: 16px; }

@media (max-width: 640px){
  /* Slightly smaller buttons on mobile (less tall, still thumb-friendly) */
  .actions .btn{
    padding: 12px 14px;
    font-size: 15px;
  }
}

/* === iOS keyboard: keep layout stable === */
/* Prevent iOS Safari zoom on focus (needs >=16px on the focused field) */
#hint, textarea#hint, input#hint,
textarea[name="hint"], input[name="hint"],
textarea.hint, input.hint,
.hint textarea, .hint input{
  font-size: 16px !important;
}
@media (max-width: 900px){
  input, textarea, select{ font-size: 16px !important; }
}

/* Use a JS-updated viewport height to avoid iOS "blank band" after keyboard close */

body{ min-height: var(--app-height); }

/* === Nicer "Prendre une photo" / "Galerie" buttons (secondary actions) === */
#btnCamera, #btnGallery{
  border-color: color-mix(in oklab, var(--accent2), var(--line) 55%);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92),
      color-mix(in oklab, var(--beige), #fff 65%)
    );
  color: var(--navy);
  box-shadow: 0 10px 20px rgba(15,27,45,.06);
}

#btnCamera:hover, #btnGallery:hover{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98),
      color-mix(in oklab, var(--beige), #fff 55%)
    );
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,27,45,.08);
}

#btnCamera:active, #btnGallery:active{
  transform: translateY(0px);
}

#btnCamera:focus-visible, #btnGallery:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 85%), 0 10px 20px rgba(15,27,45,.06);
}

/* Mobile: two equal buttons, nicer spacing */
@media (max-width: 640px){
  .controls{
    gap: 10px;
  }
  #btnCamera, #btnGallery{
    flex: 1 1 calc(50% - 10px);
    padding: 12px 14px;
    font-size: 15px;
  }
}

/* Stronger mobile fix: make query pills full-width and box-sized */
.query-variant,
.query-pill{
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Prevent any parent overflow */
.query-examples,
#queryExamples{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.search-card,
.search-box,
.internet-help,
#internetHelp,
#internetBox{
  overflow: hidden;
}
/* --- Modal close button (no iOS blue) --- */
.modal-close{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a;
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.modal-close:hover{ background:rgba(15,23,42,.04); }
.modal-close:active{ transform:scale(.98); }
.modal-close:focus,
.modal-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,23,42,.12);
  color:#0f172a;
}

/* Confidence bar */
.cbar{
  width: 86%;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.10);
  overflow: hidden;
  margin-top: 10px;
}
.cbar > i{
  display:block;
  height: 100%;
  width: var(--p, 50%);
  background: linear-gradient(90deg, rgba(8,107,109,.85), rgba(198,117,54,.65));
  border-radius: 999px;
}
.cnote{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

/* --- KPI layout refinements --- */
.kpi{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Prevent € from wrapping */
.kpi .k b{
  white-space: nowrap;
}

/* Confidence bar centering */
.cbar{
  margin: 10px auto 0;
}

/* Mobile: 3 prix sur ligne 1, Reconnaissance pleine largeur en dessous */
@media (max-width: 640px){
  /* Le kpi sort des marges de la card pour occuper toute la largeur */
  .kpi{
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: calc(100% + 0px);
  }
  .kpi .k{
    padding: 14px 4px;
    min-width: 0;
    box-sizing: border-box;
  }
  .kpi .k .small{
    font-size: 11px;
    margin-bottom: 5px;
  }
  .kpi .k b{
    font-size: clamp(15px, 5.8vw, 24px);
    letter-spacing: -0.5px;
    white-space: nowrap;
    display: block;
  }
  .kpi .k:nth-child(4){
    grid-column: 1 / -1;
    padding: 14px 16px;
  }
  .kpi .k:nth-child(4) b{
    font-size: clamp(22px, 6vw, 30px);
  }
  .cbar{
    width: min(520px, 92%);
    margin: 12px auto 0;
  }
}

/* --- KPI : ultra-small phones fix --- */
.kpi{ max-width:100%; width:100%; box-sizing:border-box; }
.kpi .k{ min-width:0; }
@media (max-width: 420px){
  .kpi{ gap:4px; }
  .kpi .k{ padding:12px 2px; }
  .kpi .k .small{ font-size:10px; }
  .kpi .k b{ font-size: clamp(13px, 5.5vw, 20px); letter-spacing:-0.5px; }
  .kpi .k:nth-child(4) b{ font-size: clamp(20px, 5.5vw, 26px); }
}

/* === Mobile: clearer selection checkbox in history === */
.history-select-mobile{
  display:flex;
  align-items:center;
  gap:6px;
}
.history-select-mobile .select-label{
  display:none;
  font-size:13px;
  color:var(--ink);
  opacity:.75;
}
@media (max-width:860px){
  .history-select-mobile .select-label{
    display:inline;
  }
}

/* === Historique (mobile) : préfixe "Catégorie :" (le tableau n’a pas d’en-tête sur mobile) === */
.history-cat-mobile{ display:none; }
@media (max-width:860px){
  .history-cat-desktop{ display:none; }
  .history-cat-mobile{ display:inline; }
  .history-cat-mobile::before{ content:"Catégorie : "; }
}

/* ===== style id=bern-v3-overrides ===== */

/* === Bernistian Estimation — v3 overrides === */

/* --- Remove native "blue" highlights (mobile + desktop) while keeping an accessible focus ring --- */
:where(a,button,input,select,textarea){
  -webkit-tap-highlight-color: transparent;
}
:where(button,input,select,textarea){
  -webkit-appearance:none;
  appearance:none;
}
:where(a,button,input,select,textarea):focus{ outline:none; }
:where(a,button,input,select,textarea):focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), white 70%);
  border-color: color-mix(in oklab, var(--accent2), white 30%);
}
/* iOS inputs sometimes add inner shadow */
input, select, textarea{ box-shadow:none; }

/* Thumbs: compact grid, instagram-like cover, no extra margins */
#left{ padding:12px 12px 16px !important; }
#dropZone{ margin-bottom:10px !important; }
#thumbs, .thumbs{
  display:grid !important;
  grid-auto-rows: 1fr !important;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  margin:10px 0 0 0 !important;
}
@media(min-width:980px){
  #thumbs, .thumbs{ grid-template-columns: repeat(auto-fill, minmax(140px,1fr)) !important; gap:10px !important; }
}
.thumb{
  position:relative !important;
  height: 120px !important;
  border-radius:12px !important;
  border:1px solid var(--line) !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  background:#f6f2e9 !important;
}
@media(min-width:980px){ .thumb{ height: 150px !important; } }
.thumb img{
  width:100% !important; height:100% !important;
  object-fit: cover !important;          /* Instagram-like */
  object-position: center center !important;
  display:block !important;
  background:transparent !important;
}
.x{ top:6px !important; right:6px !important; }

/* Remove perceived margins around the thumbnails area */
.card{ max-width:100% !important; }
#thumbs{ margin-inline:0 !important; }

/* Results mobile centering & no overflow */
#out{ width:100% !important; margin:0 !important; box-sizing:border-box !important; }
#out *{ max-width:100% !important; }
#out .kpi, #out .desc, #out .list, #out .tags{ margin-left:0 !important; margin-right:0 !important; }
html, body{ max-width:100% !important; overflow-x:hidden !important; }

/* Title style (uppercase Montserrat, lighter) */
main > h1{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size: clamp(20px, 4.6vw, 28px) !important;
  line-height:1.2 !important;
  color: var(--navy) !important;
  margin:4px 0 6px !important;
}

/* Slightly tighter tags & KPI */
.tags{ gap:6px !important; }
.kpi{ gap:8px !important; }
.k b{ font-size:18px !important; }

/* ===== style id=bern-copy-toast ===== */

/* Copy buttons (round, subtle) */
.copy-btn{
  --bd: color-mix(in oklab, var(--line), var(--navy) 10%);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:999px !important;
  border:1px solid var(--bd) !important;
  background:#fff !important;
  color:var(--navy);
  cursor:pointer;
  transition:background .15s, transform .05s, box-shadow .2s;
  box-shadow:0 1px 0 rgba(0,0,0,.04);

  /* iOS/Safari: éviter les styles natifs (ovales/gris) */
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color: transparent;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
}

.copy-btn:hover{ background:color-mix(in oklab, var(--beige), white 45%); }
.copy-btn:active{ transform:translateY(1px); }
.copy-btn svg{ width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2; }

/* Placement in title row */
.title-row{ display:flex; align-items:flex-start; gap:10px; }
.title-row .right-tools{ display:flex; align-items:center; gap:8px; }

/* Description box with anchored copy button */
.desc-wrap{ position:relative; }
.desc-copy{
  position:absolute; right:10px; bottom:10px;
}

/* Toast (bottom center, mobile-friendly) */
/* Pills (confidence + source type) */
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;line-height:1;border:1px solid var(--line);background:#fff;color:var(--navy)}
.pill.good{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.pill.medium{background:#fff7ed;border-color:#fed7aa;color:#7c2d12}
.pill.low{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.src-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--muted);white-space:nowrap}

.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:#fff; color:var(--navy); border:1px solid #d9d2c6;
  border-radius:999px; padding:10px 14px; font-weight:700; box-shadow:0 10px 22px rgba(0,0,0,.08);
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .2s ease;
  z-index:10002; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Chat post-analyse (léger) ===== */
.chat-box{margin-top:16px;border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.chat-title{font-weight:500;color:var(--navy)}
.chat-meta{font-size:12px;color:var(--muted);margin-top:2px}
.chat-thread{border:1px solid var(--line);border-radius:14px;padding:10px;background:color-mix(in oklab, var(--bg), white 45%);max-height:320px;overflow:auto}
.chat-msg{display:flex;margin:8px 0}
.chat-msg.user{justify-content:flex-end}
.chat-msg.assistant{justify-content:flex-start}
.chat-msg .bubble{max-width:88%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;white-space:pre-wrap}
.chat-msg.user .bubble{background:color-mix(in oklab, var(--beige), white 45%)}
.chat-input{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.chat-input textarea{
  flex:1;
  min-height:64px;
  max-height:240px;
  resize:vertical;
  border-radius:14px;
  border:1px solid var(--line);
  padding:12px 12px;
  font:inherit;
  line-height:1.4;
}
.chat-input .btn{align-self:stretch;min-height:64px}
@media (max-width:640px){
  .chat-input{flex-direction:column;align-items:stretch}
  .chat-input .btn{width:100%}
  .chat-input textarea{min-height:92px}
}

.chat-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px}

/* ===== Chat: composer style "iMessage" ===== */
.chat-box{ display:flex; flex-direction:column; }
.chat-thread{ flex:1; overflow:auto; }
.chat-compose{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius:0 0 18px 18px;
}
.chat-compose-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.chat-compose textarea{
  flex:1;
  min-height:44px;
  max-height:160px;
  resize:vertical;
  border-radius:18px;
  border:1px solid var(--line);
  padding:10px 12px;
  font:inherit;
  line-height:1.35;
}
.chat-attach-btn{
  width:44px;
  min-width:44px;
  height:44px;
  border-radius:999px;
}
.chat-send-btn{
  min-height:44px !important;
  border-radius:999px !important;
  padding:10px 14px !important;
}

/* === Chat composer: icon buttons (desktop + mobile) === */
.chat-compose{
  --chat-btn-size: 44px;
  --chat-icon-size: 18px;
}

/* Icon-only style for attach (+) and send (arrow) */
.chat-compose .chat-attach-btn,
.chat-compose .chat-send-btn{
  width: var(--chat-btn-size) !important;
  min-width: var(--chat-btn-size) !important;
  height: var(--chat-btn-size) !important;
  padding: 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius: 999px !important;
  line-height: 0 !important;
  font-size: 0 !important; /* hide inner text (+ / Envoyer) without changing markup */
}

.chat-compose .chat-attach-btn::before,
.chat-compose .chat-send-btn::before{
  content: "";
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  display:block;
  background: currentColor;
}

/* Plus icon */
.chat-compose .chat-attach-btn::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* Send arrow (paper plane) */
.chat-compose .chat-send-btn::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 2L11 13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M22 2L15 22l-4-9-9-4 20-7Z' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 2L11 13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M22 2L15 22l-4-9-9-4 20-7Z' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Mobile sizing */
@media (max-width:640px){
  .chat-compose{
    --chat-btn-size: 36px;
    --chat-icon-size: 16px;
  }
}
.chat-compose-meta{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-compose.dragover{
  outline:2px dashed color-mix(in oklab, var(--accent), white 35%);
  outline-offset:2px;
}
.chat-attach-strip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:8px;
}
.chat-attach-strip .thumb{
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.chat-attach-strip .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chat-attach-strip .thumb::after{
  content:"×";
  position:absolute;
  top:4px;
  right:6px;
  width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  font-weight:500;
  font-size:12px;
  color:var(--navy);
}
@media (max-width:640px){
  .chat-compose{ padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-send-btn{ padding:10px 12px !important; }
}
@media (max-width:640px){
  .chat-compose{ padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-send-btn{ padding:10px 12px !important; }
}

@media (max-width:640px){
  .chat-compose-row{ gap:8px; }
  .chat-attach-btn{ width:40px; min-width:40px; height:40px; }
  /* iMessage-like: send becomes an icon so the textarea uses the full width */
  .chat-send-btn{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0 !important;
    border-radius:999px !important;
    font-size:0 !important;
    line-height:0 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .chat-send-btn::before{
    content:"➤";
    font-size:16px;
    line-height:1;
  }
  .chat-compose textarea{
    min-height:40px;
    padding:10px 12px;
  }
}

/* iPhone / très petits écrans : encore un peu plus de place pour la zone de texte */
@media (max-width:430px){
  .chat-compose{ padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .chat-compose-row{ gap:6px; }
  .chat-attach-btn{ width:36px; min-width:36px; height:36px; }
  .chat-send-btn{ width:36px; min-width:36px; height:36px; }
  .chat-send-btn::before{ font-size:15px; }
  .chat-compose textarea{ min-height:36px; padding:9px 10px; border-radius:16px; }
}

/* --- Chat: idées de messages (chips) --- */
.chat-prompts{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.chat-prompts .chip{
  cursor:pointer;
}
button.chip{
  font: inherit;
  cursor:pointer;
}
@media (max-width:640px){
  .chat-prompts{ gap:6px; }
  .chat-prompts .chip{ padding:6px 10px; font-size:13px; }
}


.chat-prompts-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chat-quick-select{
  display:none;
  font:inherit;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  max-width:190px;
}

/* iOS/Safari: empêcher le select d'apparaître en bleu */
.chat-quick-select{
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color: transparent;
  outline:none !important;
  box-shadow:none !important;
}
.chat-quick-select option{ color: var(--navy); }
.chat-quick-select:focus,
.chat-quick-select:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
@media (max-width:640px){
  .chat-prompts-chips{ display:none; }
  .chat-quick-select{ display:block; max-width:170px; padding:8px 10px; font-size:13px; }
}

/* === Chat controls compact mode (mobile) === */
@media (max-width:640px){
  .chat-actions{ gap:8px; }
  .chat-actions .btn{
    padding:6px 10px !important;
    font-size:13px !important;
    min-height:auto !important;
    border-radius:10px !important;
  }
}

/* Toggle button in chat header */
.chat-compact-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  background:#fff;
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  -webkit-tap-highlight-color:transparent;
}
.chat-compact-btn:hover{
  background:color-mix(in oklab, var(--beige), white 40%);
}
.chat-box.compact .chat-actions{
  display:none !important;
}

.chat-photos{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chat-photos .chip{cursor:pointer}

/* --- Chat: repliable (fiche de tri + post-analyse) --- */
.chat-box .chat-toggle{
  padding:8px 12px;
  white-space:nowrap;
}
.chat-box .chat-body{ margin-top: 2px; }
.chat-box.collapsed .chat-body{ display:none; }

/* When collapsed, tighten header spacing a bit */
.chat-box.collapsed .chat-head{ margin-bottom:0; }


/* ===== Chat modal plein écran ===== */
dialog.chatModal{
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  margin:0;
  border:0;
  padding:0;
  border-radius:0;
  background:var(--bg);
}
dialog.chatModal::backdrop{ background: rgba(15,23,42,.55); }
.chatModal .cmWrap{ height:100%; display:flex; flex-direction:column; }
.chatModal .cmHead{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chatModal .cmTitle{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
}
.chatModal .cmSub{ font-size:12px; color:var(--muted); margin-top:2px; }
.chatModal .cmBody{
  flex:1;
  overflow:hidden;
  padding:0;
}
.chatModal .cmInner{ max-width: 980px; margin:0 auto; height:100%; padding:16px; }


/* ===== style id=bern-header-from-index-v9 ===== */

/* === Header cloned from index.html (v9 keep original body styles) === */


    *{box-sizing:border-box}
    html,body{ -webkit-tap-highlight-color: transparent; }
    button, a{ -webkit-tap-highlight-color: transparent; }
    html,body{ -webkit-tap-highlight-color: transparent; }
    button, a{ -webkit-tap-highlight-color: transparent; }
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif;color:var(--navy);letter-spacing:.2px}
    a{text-decoration:none;color:inherit}

    /* Header */
    header{position:sticky;top:0;background:rgba(255,253,248,.9);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
    .wrap{max-width:1100px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:10px}
    .logo{height:72px;width:auto}
    .brand{display:flex;flex-direction:column;gap:6px}
    .name{font-weight:800;color:var(--navy);font-size: 30px;line-height:1}
    .baseline{font-size:12px;color:var(--muted);line-height:1}

    /* Buttons */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:11px 16px;border:1px solid var(--navy);border-radius:var(--radius);
      font-weight:800;background:#fff;color:var(--navy);cursor:pointer;
      transition:background .2s,border-color .2s,transform .05s,filter .2s,box-shadow .2s;
      -webkit-tap-highlight-color: transparent;
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      border-color: color-mix(in oklab, var(--navy), white 12%);
    }
    .btn:active{ transform:translateY(1px) }
    a.btn,a.btn:visited{color:var(--navy);text-decoration:none}
    .btn.primary{background:var(--accent2);color:#fff;border-color:color-mix(in oklab, var(--accent2), black 12%)}
    .btn:hover{ background:var(--beige) }
    .btn.primary:hover{ filter:brightness(1.03) }
    .btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px }

    /* Desktop nav */
    nav.primary{margin-left:auto;display:flex;gap:24px;font-weight:700}
    nav.primary a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
    nav.primary a:hover{border-color:var(--accent2); color:var(--accent2)}
    nav.primary a.active{color:var(--accent);border-color:var(--accent)}

    /* Burger */
    .burger{
      margin-left:auto;display:none;align-items:center;justify-content:center;
      width:42px;height:42px;border:1px solid color-mix(in oklab, var(--line), var(--navy) 8%);border-radius:10px;background:#fff;
      cursor:pointer;transition:background .2s;
    }
    .burger:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:transform .25s, background .2s}
    .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s, opacity .2s, top .25s}
    .burger span::before{top:-6px}.burger span::after{top:6px}
    .burger[aria-expanded="true"] span{background:transparent}
    .burger[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
    .burger[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}

    /* Mobile panel */
    .panel{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999}
    
    .sheet{
      position:absolute;top:0;left:0;right:0;width:100vw;max-width:100vw;height:auto;background:var(--bg);
      border-left:1px solid var(--line);padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;
      box-shadow:-10px 0 30px rgba(0,0,0,.06)
    }
    .sheet header{position:relative;border:none;background:transparent;padding:0;margin:0 0 10px}
    .sheet .title{font-weight:800;color:var(--navy);font-size:18px;margin:0}
    .sheet .close{
      position:absolute;top:-6px;right:-6px;width:36px;height:36px;border:1px solid var(--line);
      border-radius:10px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;
      color:var(--muted);
    }
    .sheet .close:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .sheet .close svg{width:18px;height:18px;stroke:currentColor}
    .panel .sheet a{font-weight:800;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px}

    /* Hero (clean, no grey banner) */
    .hero{max-width:960px;margin:46px auto 34px;padding:0 18px;text-align:center}
    .hero h1{font-size:clamp(30px,7vw,54px);margin:0 0 14px}
    .hero .tagline{font-size:20px;color:var(--navy);margin:0}
    .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
#collection .cta { justify-content: center !important; }

    /* Sections */
    .section-title{max-width:1100px;margin:8px auto 8px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .section-title h2{margin:0}
    .chip{
      display:inline-block;border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:14px;
      color:#475569;background:color-mix(in oklab, var(--beige), white 55%);white-space:nowrap;
      border-color:color-mix(in oklab, var(--beige), var(--line) 40%);
    }

    /* Rail */
    .rail-wrap{max-width:1100px;margin:0 auto;padding:0 18px 14px;position:relative}
    .rail{
      display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
      -webkit-overflow-scrolling:touch;
      mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
    .rail::-webkit-scrollbar{height:8px}.rail::-webkit-scrollbar-thumb{background:#e1d8c8;border-radius:8px}
    .card{
      flex:0 0 320px;border:1px solid color-mix(in oklab, var(--line), var(--navy) 5%);border-radius:18px;background:#fff;
      padding:18px;display:flex;flex-direction:column;gap:10px;align-items:center;scroll-snap-align:start;
      transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease, filter .25s ease;
    }
    .img-wrap{width:100%;display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,#fff 0%, #fff9f0 100%);border:1px dashed #efe8dc;border-radius:14px;overflow:hidden}
    .card img{max-width:100%;height:240px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08)); transition:transform .25s ease}
    .card h3{margin:6px 0 2px;font-size:18px;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
    .card p{margin:0;color:var(--muted);text-align:center}
    .card:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.06);
      border-color:color-mix(in oklab, var(--line), var(--navy) 14%);
      filter:saturate(1.02)
    }
    .card:hover img{ transform:scale(1.03) }

    .about,.contact{max-width:900px;margin:0 auto;padding:18px}
    .about p{margin:10px 0;color:var(--muted)}

    /* Footer */
    footer.foot{
      max-width:1100px;margin:38px auto 16px;padding:14px 18px;border-top:1px solid var(--line);
      color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap
    }
    .foot .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .foot .right{margin-left:auto}
    .foot .btn{padding:8px 12px;font-weight:800}

    /* Mentions (modal) */
    .modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);z-index:10000}
    .modal.open{display:block}
    .modal .box{
      position:relative;max-width:820px;margin:7vh auto;background:var(--bg);border:1px solid var(--line);
      border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:22px;
      animation:pop .18s ease-out;
    }
    @keyframes pop{from{transform:translateY(6px) scale(.98);opacity:.0}to{transform:translateY(0) scale(1);opacity:1}}
    .modal h2{margin:0 0 8px}
    .legal{max-height:70vh;overflow:auto;padding-right:6px}
    .modal .close{
      position:absolute;top:10px;right:10px;border:1px solid var(--line);background:#fff;border-radius:10px;
      width:36px;height:36px;display:grid;place-items:center;cursor:pointer;transition:background .2s;
      color:var(--muted);
    }
    .modal .close:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .modal .close svg{width:18px;height:18px;stroke:currentColor}

    /* Mentions légales: texte plus léger (évite l'effet "trop gras") */
    #legal-modal .legal{ font-weight:400; }
    #legal-modal .legal p{ color:var(--muted); font-weight:400; }
    #legal-modal .legal a{ font-weight:600; }
    #legal-modal .legal h3{ margin:18px 0 6px; font-weight:700; }

          .name{font-size:20px}
      .card{flex:0 0 85vw}
      .card img{height:200px}
      .sheet .close svg, .modal .close svg{ display:block; margin:auto; }
      .sheet .close, .modal .close{ display:flex; align-items:center; justify-content:center; padding:0; }
      .to-top .btn{ width:40px; height:40px; }
      .to-top.lift{ bottom:96px; } /* more lift on small screens */
  h2 {
    font-size: 18px !important;
    line-height: 1.3;
  }
  nav.primary a {
    font-size: 14px;
    border-bottom-width: 2px;
  }
@media (max-width:860px){
  nav.primary { display: none; }
  .burger { display: flex; }
}

/* Ajustement des titres */
.section-title h2,
.about h2,
#collection h2,
#apropos h2,
#contact h2 {
  font-size: 42px; /* plus gros sur desktop */
}

/* h3 plus discrets */
.about h3,
#collection h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* ---- STYLE DES TITRES ---- */
.section-title h2,
.about h2,
#collection h2,
#apropos h2,
#contact h2 {
  font-size: 34px !important; /* desktop */
  font-weight: 700;
  text-align: left;
  position: relative;
  margin: 32px 0 18px;
  padding-bottom: 8px;
  letter-spacing: 0.5px;
}

.section-title h2::after,
.about h2::after,
#collection h2::after,
#apropos h2::after,
#contact h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Ajustement mobile */
@media (max-width:600px){
  .section-title h2,
  .about h2,
  #collection h2,
  #apropos h2,
  #contact h2 {
    font-size: 24px !important;
    margin: 36px 0 18px;
  }
}

/* Indication scroll (mobile) — pastille animée permanente */
.rail-wrap{ position:relative; }
.rail-wrap::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:#fff;
  border:1px solid #d9d2c6;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2313213a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  opacity:.9;
  animation: nudge 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes nudge{
  0%,60% { transform: translateY(-50%) translateX(0); box-shadow:0 6px 18px rgba(0,0,0,.10); }
  78%    { transform: translateY(-50%) translateX(6px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
  100%   { transform: translateY(-50%) translateX(0); box-shadow:0 6px 18px rgba(0,0,0,.10); }
}

@media (prefers-reduced-motion: reduce){
  .rail-wrap::after{ animation: none; }
}

/* Masquer sur desktop */
@media (min-width:768px){
  .rail-wrap::after{ display:none; }
}

/* === Precise alignment: put the first letter width of .name into --b-offset, and pad baseline by it === */
.brand { position: relative; }
.brand .name { margin: 0; padding: 0; line-height: 1; }
.brand .baseline {
  margin: 0; padding: 0;
  line-height: 1.1;
  padding-left: var(--b-offset, 0px); /* auto-calculated */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.brand .name .first-letter { display:inline-block; }

/* === Baseline manual fine-tune: pull slightly left so B aligns under B === */
.brand .baseline{
  padding-left: 0 !important;
  margin-left: -0.06rem; /* fine tune leftward */
}


.brand .baseline {
  margin-left: var(--baseline-shift) !important;
}

/* === Bernistian — Modernisation typographique (Montserrat + Source Sans 3) === */
/* On ne change AUCUN texte, seulement le rendu visuel. */
/* Palette validée : --accent2 (terre cuite) conservée et réappliquée sur nav, h2, header, chips. */

 /* sécurité */

.brand .name{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1;
}
.baseline{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
  font-size: 10px;
  color: color-mix(in oklab, var(--ink), var(--accent2) 22%);
}

/* Navigation : uppercase fin + ocre en hover/actif */
nav.primary a{
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 600;
  border-bottom-width: 2px;
}
nav.primary a:hover{ color: var(--accent2); border-bottom-color: var(--accent2) !important; }
nav.primary a.active{ color: var(--accent2) !important; border-bottom-color: var(--accent2) !important; }

/* Liseré ocre sous le header (identité) */
body > header::after{ background: var(--accent2) !important; opacity: .9; height: 2px; bottom: -1px; content:""; position:absolute; left:0; right:0; }

/* Titres : Montserrat, caps fines, pas trop gros */
h1,h2,h3,
.section-title h2,
.about h2, #collection h2, #apropos h2, #contact h2{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}
/* Taille contrôlée (plus petite qu'avant) */
.section-title h2,
.about h2, #collection h2, #apropos h2, #contact h2{
  font-size: 24px !important;
  margin: 24px 0 14px !important;
  padding-bottom: 8px !important;
}
@media (max-width:600px){
  .section-title h2,
  .about h2, #collection h2, #apropos h2, #contact h2{
    font-size: 20px !important;
    margin: 22px 0 12px !important;
  }
}

/* Soulignement animé / coloré en ocre */
.section-title h2::after,
.about h2::after, #collection h2::after, #apropos h2::after, #contact h2::after{
  background: var(--accent2) !important;
}
.section-title h2, .about h2, #collection h2, #apropos h2, #contact h2{
  background-image: linear-gradient(90deg, var(--accent2), var(--accent2)) !important;
  background-repeat: no-repeat !important;
  background-size: 0 2px !important;
  background-position: left bottom !important;
  transition: background-size .45s ease !important;
}
.reveal-underline{ background-size: 60px 2px !important; }

/* Hero : tagline sobre */
.hero .tagline{
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  color: color-mix(in oklab, var(--navy), var(--accent2) 18%) !important;
}

/* Flèche mobile (pastille) recolorée en ocre */
.rail-wrap::after{
  border-color: color-mix(in oklab, var(--accent2), #d9d2c6 30%) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b55334' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") !important;
}

/* Chips/boutons : garder le grain + typo Source Sans 3 */
.chip, .chips-collection .btn, .btn:not(.primary){
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  border-color: color-mix(in oklab, var(--accent2), #d9d2c6 40%) !important;
}

/* Offset précis pour les ancres du menu principal */
#trouvailles,
#apropos,
#collection,
#contact,
#historyCard {
  scroll-margin-top: 140px; /* même valeur que pour #collection-categories */
}

@media (max-width: 640px) {
  #trouvailles,
  #apropos,
  #collection,
  #contact,
  #historyCard {
    scroll-margin-top: 110px; /* header un peu plus bas sur mobile */
  }
}

#collection-title {
  scroll-margin-top: 90px;   /* desktop */
}
@media (max-width: 640px) {
  #collection-title {
    scroll-margin-top: 120px; /* mobile : plus haut pour compenser le header */
  }
}

/* ===== style id=bern-v12-drop-anim ===== */

/* === v12: Dropzone wider (desktop) + livelier loading animation === */

/* 1) Make the left column (uploader) wider on desktop to visually widen the drop rectangle */
@media (min-width: 980px){
  .grid{ grid-template-columns: 520px 1fr !important; }
}

/* Optional: ensure the drop rectangle itself uses full width of its card */
#dropZone{ width:100% !important; }

/* 2) Livelier loading animation (shimmer + pulse) */
.loading-box{
  border:1px solid color-mix(in oklab, var(--accent2), #d9d2c6 35%) !important;
  background: linear-gradient(180deg,#fff,#fff9f0) !important;
  color: var(--accent2) !important;
}
.loading-box .dot{
  opacity:.9 !important;
  animation: pulse-v12 .9s ease-in-out infinite !important;
}
.loading-box .bar{
  position:relative; overflow:hidden; background:#f2e9dc !important;
}
.loading-box .bar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent2), white 45%), transparent);
  transform: translateX(-100%);
  animation: shimmer-v12 1.05s infinite linear;
}

/* Keyframes: faster shimmer & punchier pulse */
@keyframes shimmer-v12{
  0%{ transform: translateX(-100%); opacity:.85; }
  50%{ opacity:1; }
  100%{ transform: translateX(100%); opacity:.85; }
}
@keyframes pulse-v12{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.35); opacity:1; }
}

/* ===== style id=bern-mobile-tap-fixes ===== */

  /* Neutralize hover on touch devices — but DO NOT break .btn.primary */
  @media (hover:none) and (pointer:coarse){
    /* Only neutralize non-primary buttons */
    .btn:not(.primary):hover{ background: inherit !important; filter:none !important; }
    /* Keep primary buttons stable on tap */
    .btn.primary:hover{ background: var(--btn-primary) !important; filter:none !important; }
  }
  /* Remove focus background/rings that look like highlight; keep accessibility reasonable */
  .btn:focus{ outline: none; }
  .btn:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; }
  /* Extra safety for WebKit tap overlay */
  .btn{ -webkit-tap-highlight-color: transparent; }

  /* Subtle tap feedback on mobile (scale + shadow) */
  @media (hover:none) and (pointer:coarse){
    .btn{ transition: transform 120ms ease, box-shadow 120ms ease; }
    .btn:active{ transform: scale(0.98); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  }

  /* Stronger mobile tap effect (ripple) */
  @media (hover:none) and (pointer:coarse){
    .btn{ position: relative; overflow: hidden; }
    .btn::after{
      content:"";
      position:absolute;
      left:50%; top:50%;
      width:0; height:0;
      border-radius:50%;
      background: rgba(0,0,0,0.12);
      transform: translate(-50%, -50%);
      opacity:0;
      transition: opacity 220ms ease, width 220ms ease, height 220ms ease;
      pointer-events:none;
    }
    .btn:active::after{
      opacity:1;
      width:220%;
      height:220%;
      transition: none;
    }
    @media (prefers-reduced-motion: reduce){
      .btn{ transition: none !important; }
      .btn::after{ transition: opacity 120ms linear !important; }
    }
  }

/* ===== style id=bern-copy-visibility-fix ===== */

  /* Hide copy buttons by default */
  .copy-btn{ display:none !important; }
  /* Show copy buttons only when we have a real result */
  html.has-result .copy-btn{ display:inline-flex !important; }

/* ===== style ===== */

/* Force close button icon grey (no blue) */
#lbx .x svg path { stroke:#334155 !important; fill:none !important; }
.img-modal .close svg path { stroke:#334155 !important; fill:none !important; }
#oa-lightbox .oa-close svg path { stroke:#334155 !important; fill:none !important; }

/* ===== style ===== */


    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif;color:var(--navy);letter-spacing:.2px}
    a{text-decoration:none;color:inherit}

    /* Header */
    header{position:sticky;top:0;background:rgba(255,253,248,.9);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
    .wrap{max-width:1100px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:10px}
    .logo{height:72px;width:auto}
    .brand{display:flex;flex-direction:column;gap:6px}
    .name{font-weight:800;color:var(--navy);font-size: 30px;line-height:1}
    .baseline{font-size:12px;color:var(--muted);line-height:1}

    /* Buttons */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:11px 16px;border:1px solid var(--navy);border-radius:var(--radius);
      font-weight:800;background:#fff;color:var(--navy);cursor:pointer;
      transition:background .2s,border-color .2s,transform .05s,filter .2s,box-shadow .2s;
      -webkit-tap-highlight-color: transparent;
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      border-color: color-mix(in oklab, var(--navy), white 12%);
    }
    .btn:active{ transform:translateY(1px) }
    a.btn,a.btn:visited{color:var(--navy);text-decoration:none}
    .btn.primary{background:var(--accent2);color:#fff;border-color:color-mix(in oklab, var(--accent2), black 12%)}
    .btn:hover{ background:var(--beige) }
    .btn.primary:hover{ filter:brightness(1.03) }
    .btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px }

    /* Desktop nav */
    nav.primary{margin-left:auto;display:flex;gap:24px;font-weight:700}
    nav.primary a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
    nav.primary a:hover{border-color:var(--accent2); color:var(--accent2)}
    nav.primary a.active{color:var(--accent);border-color:var(--accent)}

    /* Burger */
    .burger{
      margin-left:auto;display:none;align-items:center;justify-content:center;
      width:42px;height:42px;border:1px solid color-mix(in oklab, var(--line), var(--navy) 8%);border-radius:10px;background:#fff;
      cursor:pointer;transition:background .2s;
    }
    .burger:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:transform .25s, background .2s}
    .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s, opacity .2s, top .25s}
    .burger span::before{top:-6px}.burger span::after{top:6px}
    .burger[aria-expanded="true"] span{background:transparent}
    .burger[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
    .burger[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}

    /* Mobile panel */
    .panel{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999}
    
    .sheet{
      position:absolute;top:0;left:0;right:0;width:100vw;max-width:100vw;height:auto;background:var(--bg);
      border-left:1px solid var(--line);padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;
      box-shadow:-10px 0 30px rgba(0,0,0,.06)
    }
    .sheet header{position:relative;border:none;background:transparent;padding:0;margin:0 0 10px}
    .sheet .title{font-weight:800;color:var(--navy);font-size:18px;margin:0}
    .sheet .close{
      position:absolute;top:-6px;right:-6px;width:36px;height:36px;border:1px solid var(--line);
      border-radius:10px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;
      color:var(--muted);
    }
    .sheet .close:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .sheet .close svg{width:18px;height:18px;stroke:currentColor}
    .panel .sheet a{font-weight:800;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px}

    /* Hero (clean, no grey banner) */
    .hero{max-width:960px;margin:46px auto 34px;padding:0 18px;text-align:center}
    .hero h1{font-size:clamp(30px,7vw,54px);margin:0 0 14px}
    .hero .tagline{font-size:20px;color:var(--navy);margin:0}
    .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
#collection .cta { justify-content: center !important; }

    /* Sections */
    .section-title{max-width:1100px;margin:8px auto 8px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .section-title h2{margin:0}
    .chip{
      display:inline-block;border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:14px;
      color:#475569;background:color-mix(in oklab, var(--beige), white 55%);white-space:nowrap;
      border-color:color-mix(in oklab, var(--beige), var(--line) 40%);
    }

    /* Rail */
    .rail-wrap{max-width:1100px;margin:0 auto;padding:0 18px 14px;position:relative}
    .rail{
      display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
      -webkit-overflow-scrolling:touch;
      mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
    .rail::-webkit-scrollbar{height:8px}.rail::-webkit-scrollbar-thumb{background:#e1d8c8;border-radius:8px}
    .card{
      flex:0 0 320px;border:1px solid color-mix(in oklab, var(--line), var(--navy) 5%);border-radius:18px;background:#fff;
      padding:18px;display:flex;flex-direction:column;gap:10px;align-items:center;scroll-snap-align:start;
      transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease, filter .25s ease;
    }
    .img-wrap{width:100%;display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,#fff 0%, #fff9f0 100%);border:1px dashed #efe8dc;border-radius:14px;overflow:hidden}
    .card img{max-width:100%;height:240px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08)); transition:transform .25s ease}
    .card h3{margin:6px 0 2px;font-size:18px;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
    .card p{margin:0;color:var(--muted);text-align:center}
    .card:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.06);
      border-color:color-mix(in oklab, var(--line), var(--navy) 14%);
      filter:saturate(1.02)
    }
    .card:hover img{ transform:scale(1.03) }

    .about,.contact{max-width:900px;margin:0 auto;padding:18px}
    .about p{margin:10px 0;color:var(--muted)}

    /* Footer */
    footer.foot{
      max-width:1100px;margin:38px auto 16px;padding:14px 18px;border-top:1px solid var(--line);
      color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap
    }
    .foot .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .foot .right{margin-left:auto}
    .foot .btn{padding:8px 12px;font-weight:800}

    /* Mentions (modal) */
    .modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);z-index:10000}
    .modal.open{display:block}
    .modal .box{
      position:relative;max-width:820px;margin:7vh auto;background:var(--bg);border:1px solid var(--line);
      border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:22px;
      animation:pop .18s ease-out;
    }
    @keyframes pop{from{transform:translateY(6px) scale(.98);opacity:.0}to{transform:translateY(0) scale(1);opacity:1}}
    .modal h2{margin:0 0 8px}
    .legal{max-height:70vh;overflow:auto;padding-right:6px}
    .modal .close{
      position:absolute;top:10px;right:10px;border:1px solid var(--line);background:#fff;border-radius:10px;
      width:36px;height:36px;display:grid;place-items:center;cursor:pointer;transition:background .2s;
      color:var(--muted);
    }
    .modal .close:hover{ background:color-mix(in oklab, var(--beige), white 40%) }
    .modal .close svg{width:18px;height:18px;stroke:currentColor}

    .legal p{color:var(--muted)}
    .legal h3{margin:18px 0 6px}

          .name{font-size:20px}
      .card{flex:0 0 85vw}
      .card img{height:200px}
      .sheet .close svg, .modal .close svg{ display:block; margin:auto; }
      .sheet .close, .modal .close{ display:flex; align-items:center; justify-content:center; padding:0; }
      .to-top .btn{ width:40px; height:40px; }
      .to-top.lift{ bottom:96px; } /* more lift on small screens */
  h2 {
    font-size: 18px !important;
    line-height: 1.3;
  }
  nav.primary a {
    font-size: 14px;
    border-bottom-width: 2px;
  }
@media (max-width:860px){
  nav.primary { display: none; }
  .burger { display: flex; }
}

/* Ajustement des titres */
.section-title h2,
.about h2,
#collection h2,
#apropos h2,
#contact h2 {
  font-size: 42px; /* plus gros sur desktop */
}

/* h3 plus discrets */
.about h3,
#collection h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* ---- STYLE DES TITRES ---- */
.section-title h2,
.about h2,
#collection h2,
#apropos h2,
#contact h2 {
  font-size: 34px !important; /* desktop */
  font-weight: 700;
  text-align: left;
  position: relative;
  margin: 32px 0 18px;
  padding-bottom: 8px;
  letter-spacing: 0.5px;
}

.section-title h2::after,
.about h2::after,
#collection h2::after,
#apropos h2::after,
#contact h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Ajustement mobile */
@media (max-width:600px){
  .section-title h2,
  .about h2,
  #collection h2,
  #apropos h2,
  #contact h2 {
    font-size: 24px !important;
    margin: 36px 0 18px;
  }
}

/* Indication scroll (mobile) — pastille animée permanente */
.rail-wrap{ position:relative; }
.rail-wrap::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:#fff;
  border:1px solid #d9d2c6;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2313213a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  opacity:.9;
  animation: nudge 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes nudge{
  0%,60% { transform: translateY(-50%) translateX(0); box-shadow:0 6px 18px rgba(0,0,0,.10); }
  78%    { transform: translateY(-50%) translateX(6px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
  100%   { transform: translateY(-50%) translateX(0); box-shadow:0 6px 18px rgba(0,0,0,.10); }
}

@media (prefers-reduced-motion: reduce){
  .rail-wrap::after{ animation: none; }
}

/* Masquer sur desktop */
@media (min-width:768px){
  .rail-wrap::after{ display:none; }
}

/* === Precise alignment: put the first letter width of .name into --b-offset, and pad baseline by it === */
.brand { position: relative; }
.brand .name { margin: 0; padding: 0; line-height: 1; }
.brand .baseline {
  margin: 0; padding: 0;
  line-height: 1.1;
  padding-left: var(--b-offset, 0px); /* auto-calculated */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.brand .name .first-letter { display:inline-block; }

/* === Baseline manual fine-tune: pull slightly left so B aligns under B === */
.brand .baseline{
  padding-left: 0 !important;
  margin-left: -0.06rem; /* fine tune leftward */
}


.brand .baseline {
  margin-left: var(--baseline-shift) !important;
}

/* ===== style ===== */

.gallery-cta{ margin-top:14px }
.cta-note{ margin:0 0 6px; color:#64748b; font-size:14px }

/* ===== style ===== */

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin: 12px 0 6px; }
.btn-collection{ display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none; border:1px solid #e9e3d9; background:#fff; color:#0f172a; font-weight:600; }
.btn-collection:hover{ background:#f4f0e8 }
.btn-collection.secondary{ border-color:#d4cec2; font-weight:600 }
@media (max-width:640px){ .cta-row{ gap:10px } }

/* ===== style ===== */

@media (max-width:640px){
  .cta.buttons-collection a{ width:100%; text-align:center; }
  .chips-collection{ gap:8px !important; }
  .chips-collection a{ font-size:15px !important; padding:10px 14px !important; }
}

/* ===== style ===== */

/* Chips: grille responsive avec 3 en haut / 2 en dessous (tailles identiques) */
.chips-collection{
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px !important;
  margin: 12px auto 18px !important;
  max-width: 1200px;
}
.chips-collection a{ width: 100%; text-align: center; }

@media (min-width:1025px){
  .chips-collection a:nth-child(1){ grid-column: 1 / span 4; }
  .chips-collection a:nth-child(2){ grid-column: 5 / span 4; }
  .chips-collection a:nth-child(3){ grid-column: 9 / span 4; }
  .chips-collection a:nth-child(4){ grid-column: 3 / span 4; } /* centré */
  .chips-collection a:nth-child(5){ grid-column: 7 / span 4; } /* centré */
}

/* Tablette : 2 colonnes */
@media (max-width:1024px){
  .chips-collection{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    max-width: 820px;
  }
}

/* Mobile : 1 colonne pleine largeur */
@media (max-width:640px){
  .chips-collection{
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 12px !important;
  }
}

/* ===== style ===== */

/* Offset précis pour ancre des catégories de la collection */
#collection-categories { scroll-margin-top: 140px; }
@media (max-width: 640px){
  #collection-categories { scroll-margin-top: 110px; }
}

/* ===== style ===== */

/* === Bernistian — Modernisation typographique (Montserrat + Source Sans 3) === */
/* On ne change AUCUN texte, seulement le rendu visuel. */
/* Palette validée : --accent2 (terre cuite) conservée et réappliquée sur nav, h2, header, chips. */

 /* sécurité */

.brand .name{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1;
}
.baseline{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
  font-size: 10px;
  color: color-mix(in oklab, var(--ink), var(--accent2) 22%);
}

/* Navigation : uppercase fin + ocre en hover/actif */
nav.primary a{
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 600;
  border-bottom-width: 2px;
}
nav.primary a:hover{ color: var(--accent2); border-bottom-color: var(--accent2) !important; }
nav.primary a.active{ color: var(--accent2) !important; border-bottom-color: var(--accent2) !important; }

/* Liseré ocre sous le header (identité) */
body > header::after{ background: var(--accent2) !important; opacity: .9; height: 2px; bottom: -1px; content:""; position:absolute; left:0; right:0; }

/* Titres : Montserrat, caps fines, pas trop gros */
h1,h2,h3,
.section-title h2,
.about h2, #collection h2, #apropos h2, #contact h2{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}
/* Taille contrôlée (plus petite qu'avant) */
.section-title h2,
.about h2, #collection h2, #apropos h2, #contact h2{
  font-size: 24px !important;
  margin: 24px 0 14px !important;
  padding-bottom: 8px !important;
}
@media (max-width:600px){
  .section-title h2,
  .about h2, #collection h2, #apropos h2, #contact h2{
    font-size: 20px !important;
    margin: 22px 0 12px !important;
  }
}

/* Soulignement animé / coloré en ocre */
.section-title h2::after,
.about h2::after, #collection h2::after, #apropos h2::after, #contact h2::after{
  background: var(--accent2) !important;
}
.section-title h2, .about h2, #collection h2, #apropos h2, #contact h2{
  background-image: linear-gradient(90deg, var(--accent2), var(--accent2)) !important;
  background-repeat: no-repeat !important;
  background-size: 0 2px !important;
  background-position: left bottom !important;
  transition: background-size .45s ease !important;
}
.reveal-underline{ background-size: 60px 2px !important; }

/* Hero : tagline sobre */
.hero .tagline{
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  color: color-mix(in oklab, var(--navy), var(--accent2) 18%) !important;
}

/* Flèche mobile (pastille) recolorée en ocre */
.rail-wrap::after{
  border-color: color-mix(in oklab, var(--accent2), #d9d2c6 30%) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b55334' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") !important;
}

/* Chips/boutons : garder le grain + typo Source Sans 3 */
.chip, .chips-collection .btn, .btn:not(.primary){
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  border-color: color-mix(in oklab, var(--accent2), #d9d2c6 40%) !important;
}

/* ===== style ===== */

/* === Ajustements spécifiques === */

/* Hero h1 (Objets & curiosités) un peu plus petit */
.hero h1{
  font-size: clamp(26px, 6vw, 42px) !important;
  line-height: 1.2 !important;
}

/* Tagline: pas italique, plus grande */
.hero .tagline{
  font-style: normal !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: color-mix(in oklab, var(--navy), var(--accent2) 20%) !important;
}

/* ===== style ===== */

/* Offset précis pour les ancres du menu principal */
#trouvailles,
#apropos,
#collection,
#contact {
  scroll-margin-top: 140px; /* même valeur que pour #collection-categories */
}

@media (max-width: 640px) {
  #trouvailles,
  #apropos,
  #collection,
  #contact {
    scroll-margin-top: 110px; /* header un peu plus bas sur mobile */
  }
}

/* ===== style ===== */

    /* Back to top — style aligné sur la galerie */
    .to-top{
      position: fixed;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: #fff;
      color: var(--navy);
      border: 1px solid #d9d2c6;
      box-shadow: 0 6px 18px rgba(0,0,0,.08);
      display: grid;
      place-items: center;
      cursor: pointer;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, bottom .2s ease;
      z-index: 10001;
    }
    .to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto }
    .to-top:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.10) }
    .to-top.lift{ bottom: calc(96px + env(safe-area-inset-bottom)); } /* remonte au-dessus des mentions/boutons sur mobile */

    .to-top .btn{
      all: unset;
      display: contents; /* l'icône capte le clic */
    }
    .to-top svg{
      width: 18px; height: 18px;
      stroke: currentColor; fill: none;
      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    }

/* ===== style ===== */

/* ==== Bandeau full-bleed pour la section Collection ==== */

.band{ position:relative; margin:34px 0 }
.band::before{
  content:""; position:absolute; inset:0; left:50%; transform:translateX(-50%);
  width:100vw;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background-blend-mode:multiply;
}
.band .inner{ position:relative; max-width:1100px; margin:0 auto; padding:22px 18px }

.band--collection::before{
  background:
    var(--paper-noise),
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent), white 88%) 0%,
      color-mix(in oklab, var(--accent), white 94%) 100%
    );
}

/* Titre & texte inchangés, on respecte la charte; pas de sur-stylage ici */

/* Rail hint: montrer la suite à droite (desktop) */
.rail-wrap{ overflow:visible }
@media (min-width: 900px){
  .rail{ scroll-snap-type:x proximity; padding-right:42px }
  .card{ flex: 0 0 360px }
}

/* ===== style ===== */


/* ===== style ===== */

#collection-title {
  scroll-margin-top: 90px;   /* desktop */
}
@media (max-width: 640px) {
  #collection-title {
    scroll-margin-top: 120px; /* mobile : plus haut pour compenser le header */
  }
}

/* ===== style ===== */

/* ===== style id=bern-burger-mobile-fix ===== */

/* Rendu identique à index : allège le poids de la police sur mobile */
@media (max-width:900px) {
  .sheet a {
    font-size: 15px !important;
    font-weight: 600 !important; /* allégé par rapport à 800 */
    letter-spacing: 0.3px !important;
  }
  .sheet .title {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
}


body{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(31,120,74,.10), transparent 60%),
    radial-gradient(700px 360px at 90% 10%, rgba(200,75,55,.10), transparent 55%),
    var(--bg);
}

main{max-width: 1180px}
.hero{margin-bottom: 14px}
.hero h1{letter-spacing:-.02em}

.grid{
  gap: 22px;
  align-items: start;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(8px);
}

.card:hover{box-shadow: var(--shadowLift)}

.cardHead{
  padding: 16px 18px 10px 18px;
  border-bottom: 1px solid rgba(18,22,33,.06);
}
.cardTitle{font-weight:800; font-size: 14px; letter-spacing:.01em}
.cardSub{margin-top:4px; font-size:12px; color: var(--muted)}

#left{padding-top:0}
#out{padding-top:0}

.drop{
  background: var(--surface2);
  border: 1px dashed rgba(18,22,33,.18);
  border-radius: 16px;
}
.drop:hover{border-color: rgba(31,120,74,.38)}

.thumbs{
  margin-top: 10px;
  background: transparent;
  border: 0;
}
.thumbs .thumb{
  border-radius: 14px;
  border: 1px solid rgba(18,22,33,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 6px 16px rgba(18,22,33,.08);
}

.controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 12px;
}
.btn{
  border-radius: 14px;
  border: 1px solid rgba(18,22,33,.10);
  background: rgba(255,255,255,.72);
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  border: 0;
  box-shadow: 0 10px 22px rgba(31,120,74,.25);
}

.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em}
textarea.input{
  min-height: 96px;
  resize: vertical;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(18,22,33,.10);
  border-radius: 14px;
  line-height: 1.4;
  padding-top: 10px;
}

.indice-exemples{
  margin-top: 8px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 14px;
  padding: 10px 12px;
}

.actionsbar{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(18,22,33,.08);
}

.kpis .kpi{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 16px;
}

.acc summary{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 16px;
}

@media (min-width: 980px){
  .grid{grid-template-columns: 470px 1fr}
  .card{border-radius: 20px}
  .cardHead{border-top-left-radius: 20px; border-top-right-radius: 20px}
  .drop{min-height: 170px}
}

@media (max-width: 640px){
  main{padding-left:16px;padding-right:16px}
  .grid{display:grid;grid-template-columns:1fr;justify-items:stretch}
  .card{width:100%;margin-left:auto;margin-right:auto}
  #out,#left{width:100%}
  .cardHead{padding: 14px 14px 10px 14px}
  .btn{flex:1 1 auto}
  /* KPI: évite le décalage et garde un rendu compact */
  .kpi{grid-template-columns:repeat(2,1fr)}
  .kpi .k{min-height:92px}
}

/* =========================
   Bernistian – UI polish v3
   Objectif: plus "app tech", plus lisible, moins chargé
   (HTML/CSS only, no worker/logic changes)
   ========================= */


/* Typo: plus "produit" (sans dépendre d’une font externe) */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(31,120,74,.10), transparent 60%),
    radial-gradient(700px 360px at 90% 10%, rgba(200,75,55,.10), transparent 55%),
    var(--bg);
}
input, textarea, button{font-family:inherit}

main{max-width: 1180px}
.hero{margin-bottom: 14px}
.hero h1{letter-spacing:-.02em}

.grid{gap:22px;align-items:start}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(8px);
}
.card:hover{box-shadow: var(--shadowLift)}
.cardHead{
  padding: 16px 18px 10px 18px;
  border-bottom: 1px solid rgba(18,22,33,.06);
}
.cardTitle{font-weight:850;font-size:14px;letter-spacing:.01em;color:var(--navy)}
.cardSub{margin-top:4px;font-size:12px;color:var(--muted)}

#left{padding-top:0}
#out{padding-top:0}

/* Dropzone */
.drop{
  background: var(--surface2);
  border: 1px dashed rgba(18,22,33,.18);
  border-radius: 16px;
}
.drop:hover{border-color: rgba(31,120,74,.38)}

/* Thumbs */
.thumbs{margin-top:10px}
.thumbs .thumb{
  border-radius: 14px;
  border: 1px solid rgba(18,22,33,.10);
  background: rgba(255,255,255,.60);
  box-shadow: 0 6px 16px rgba(18,22,33,.08);
}

/* Controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn{
  border-radius: 14px;
  border: 1px solid rgba(18,22,33,.10);
  background: rgba(255,255,255,.72);
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{border:0;box-shadow:0 10px 22px rgba(31,120,74,.22)}

/* Indice field */
.field{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:left}
.label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em}
textarea.input{
  width:100%;
  min-height: 120px;
  resize: vertical;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(18,22,33,.10);
  border-radius: 14px;
  line-height: 1.45;
  font-size: 14px;
  padding-top: 10px;
}

/* Exemples: cachés par défaut (réduit la charge visuelle) */
.hintDetails{margin-top:10px}
.hintDetails summary{
  cursor:pointer;
  font-weight:800;
  font-size:12px;
  color:var(--navy);
  list-style:none;
  user-select:none;
  padding:8px 10px;
  border:1px solid rgba(18,22,33,.08);
  border-radius:14px;
  background: rgba(255,255,255,.60);
}
.hintDetails[open] summary{background: rgba(255,255,255,.78)}
.hintDetails summary::-webkit-details-marker{display:none}
.hintDetails .indice-exemples{
  margin-top:8px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}

/* KPI: plus clean, moins "boîtes vides", et on retire la Confiance (trompeuse visuellement ici) */
.kpi{gap:12px;margin:14px 0}
.kpi .k{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:16px 12px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 16px;
  min-height: 92px;
}
@media (max-width:640px){
  .kpi .k{ padding:14px 8px; min-height:0; }
  .kpi .k b{ font-size:clamp(14px,5.5vw,22px); letter-spacing:-0.4px; white-space:nowrap; }
}
.kpi .k b{font-size:22px;line-height:1}
/* .kpi .k:nth-child(4){display:none} */
.kpi{grid-template-columns:repeat(4,1fr)}

/* Accordéons */
.acc summary{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(18,22,33,.08);
  border-radius: 16px;
}

/* Desktop layout: colonne outil stable + résultat large */
@media (min-width: 980px){
  .grid{grid-template-columns: 470px 1fr}
  .card{border-radius: 20px}
  .cardHead{border-top-left-radius: 20px; border-top-right-radius: 20px}
  .drop{min-height: 170px}
}

/* Mobile: boutons plus confortables */
@media (max-width: 640px){
  .cardHead{padding: 14px 14px 10px 14px}
  .btn{flex:1 1 auto}
}

/* --- Micro-ajustements UI --- */
.loading-box{margin-top:6px}
.loading-box{padding:16px 18px}
.loading-box .bar{margin-top:12px}
#out .small{line-height:1.35}

/* Photos helper text: moins d'espace */
.cardSub{line-height:1.25}
.cardSub{max-width: 44ch}

/* Copy button breathing */
.right-tools{padding-right:4px;padding-top:4px}
.copy-btn{width:36px;height:36px}

/* KPI center + spacing */
.kpi{margin-top:16px}
.kpi .k .small{margin-bottom:2px}

#out{padding-bottom:18px}
#out .loading-box{border-radius:16px}

/* =========================
   Bernistian – UI polish v5 (clean mode)
   Objectif: SaaS tech, fond discret, focus contenu
   ========================= */


/* Fond: neutre, peu de décor (desktop léger, mobile plat) */
body{
  background: linear-gradient(#F7F6F3, #F5F4F1) !important;
}

@media (min-width: 980px){
  body{
    background:
      radial-gradient(900px 420px at 22% 0%, rgba(31,120,74,.08), transparent 62%),
      radial-gradient(700px 360px at 88% 10%, rgba(200,75,55,.07), transparent 58%),
      linear-gradient(#F7F6F3, #F5F4F1) !important;
  }
}

@media (max-width: 640px){
  body{ background: var(--bgClean) !important; }
}

/* Cards: plus nettes, moins "flottantes" */
.card{
  background: var(--cardBg) !important;
  border: 1px solid var(--cardBd) !important;
  box-shadow: var(--shadowSoft2) !important;
  backdrop-filter: none !important;
}
.card:hover{ box-shadow: var(--shadowLift2) !important; }

.cardHead{
  border-bottom: 1px solid rgba(20,20,20,.06) !important;
}

/* Dropzone et champs: plus "tool" */
.drop{
  background: #FFFFFF !important;
  border: 1px dashed rgba(20,20,20,.18) !important;
}
textarea.input{
  background:#FFFFFF !important;
  border: 1px solid rgba(20,20,20,.12) !important;
}

/* KPI: assise + centrage visuel */
.kpi .k{
  background: #FFFFFF !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  box-shadow: 0 6px 16px rgba(20,20,20,.06);
}

/* Copy button: respiration sans coller aux bords */
.right-tools{ padding-right: 8px !important; padding-top: 6px !important; }

/* Mobile centering: évite toute sensation de décalage */
@media (max-width: 640px){
  main{ padding-left:14px !important; padding-right:14px !important; }
  .grid{ justify-items: center !important; }
  .card{ width: min(100%, 560px) !important; }
  #out,#left{ width:100% !important; }
  /* Head: align gauche mais contenu centré globalement */
  .cardHead{ padding-left:14px !important; padding-right:14px !important; }
}

/* =========================
   Bernistian – UI polish v5.1 (palette native + centrage mobile)
   Objectif: garder le thème existant, corriger la perception "à droite"
   ========================= */

/* Fond: uniquement palette existante (bg + accents), très discret */
body{
  background:
    radial-gradient(900px 420px at 22% 0%, color-mix(in oklab, var(--accent), transparent 88%), transparent 62%),
    radial-gradient(700px 360px at 88% 10%, color-mix(in oklab, var(--accent2), transparent 90%), transparent 58%),
    linear-gradient(color-mix(in oklab, var(--bg), white 8%), var(--bg)) !important;
}

/* Neutralise tout décalage horizontal perceptif */
html, body{ overflow-x:hidden; }

/* Mobile/tablette: centrage hard, sans changer le layout desktop */
@media (max-width: 820px){
  main{
    width:100% !important;
    max-width: 720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    justify-items:stretch !important;
  }
  .card{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #left, #out{ width:100% !important; }
}

/* Mobile petit: réduit le "vide" latéral */
@media (max-width: 480px){
  main{ padding-left:12px !important; padding-right:12px !important; }
}

/* ===== style id=bern-v52-fix ===== */

/* =========================
   Bernistian – v5.2 (mobile centering after result render)
   ========================= */

/* iOS safe-area: padding symétrique et stable */
main{
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
}

/* Pare-feu anti "débordement" dans le rendu résultat */
#out, #out *{ max-width: 100%; }
#out{ overflow-wrap:anywhere; word-break:break-word; }
#out .kpi, #out .kpis{ width:100%; }
#out .head, #out .result-head{ flex-wrap:wrap; min-width:0; }
#out .right-tools{ right: 12px; }
#out .tags, #out .chips{ min-width:0; }
#out .tags > *, #out .chips > *{ min-width:0; }

/* Mobile: largeur pleine + centrage strict (même après injection) */
@media (max-width: 640px){
  main{
    width:100% !important;
    max-width: 720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
  .grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    justify-items:stretch !important;
  }
  .card{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  html, body{ overflow-x:hidden; }
}

/* Dropzone highlight (drag over) */
.drop.dragover{
  border-color: color-mix(in oklab, var(--accent), rgba(20,20,20,.22) 35%) !important;
  background: color-mix(in oklab, var(--accent), white 92%) !important;
}
.drop.dragover .dropTitle{ color: var(--navy) !important; }

/* =========================
   Résultat : caché tant qu'il n'y a rien à afficher
   Objectif:
   - sur desktop: pas de colonne "vide" inutile
   - sur mobile: scroll automatique quand le résultat arrive
   ========================= */

/* Par défaut, on masque le panneau */
#out{ display:none; }

/* Dès qu'une estimation démarre (loading) ou qu'un résultat est rendu */
html.show-out #out{ display:block; }

/* Desktop: tant que #out est caché, on repasse en 1 colonne */
@media (min-width: 980px){
  html:not(.show-out) .grid{ grid-template-columns: 1fr !important; }
  html:not(.show-out) #left{ max-width: 720px; margin-left:auto; margin-right:auto; }
}

/* ===== style id=bern-unified-v3 ===== */

/* ===== style id=bern-desktop-unified-single-column ===== */
/* Desktop UX: comme mobile -> une seule colonne, résultat sous les photos
   Objectif: éviter le "shift" centre -> gauche et réduire la charge visuelle.
   (CSS only, aucune logique JS modifiée) */
@media (min-width: 980px){
  /* Force une seule colonne même quand #out est visible */
  .grid{ grid-template-columns: 1fr !important; }

  /* Largeur confortable et centrée */
  #left, #out{
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Un peu d’air entre upload et résultat */
  #out{ margin-top: 14px; }
}

/* On conserve aussi le centrage quand le résultat est caché */
@media (min-width: 980px){
  html:not(.show-out) #left{ max-width: 820px !important; }
}


/* === Bernistian Unified UI v3 (aesthetic only) === */


/* Background: warm + subtle depth */
body{
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(11,107,109,.12), rgba(255,255,255,0) 55%),
    radial-gradient(900px 520px at 92% 0%, rgba(181,83,52,.12), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff, var(--bg));
  color:var(--ink);
}

/* Typography polish */
h1,h2,h3{ letter-spacing:-0.02em; }
.small{ color: color-mix(in oklab, var(--muted), var(--ink) 10%); }

/* Header: glass + brand gradient line */
header{
  background: rgba(251,250,248,.82) !important;
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
body>header::after{
  background: linear-gradient(90deg, var(--accent2), var(--accent)) !important;
  opacity: 1 !important;
  height: 2px !important;
}

/* Cards: cleaner, premium */
.card{
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px);
}

/* Buttons: modern product feel */
.btn{
  border-radius: 999px !important;
  border-color: rgba(11,27,51,.18) !important;
}
.btn:not(.primary):hover{ background: rgba(11,27,51,.06) !important; }
.btn.primary{
  background: linear-gradient(180deg, var(--accent), #065a5c) !important;
  border-color: rgba(6,90,92,1) !important;
  box-shadow: 0 16px 40px rgba(11,107,109,.22) !important;
}
.btn.primary:hover{ transform: translateY(-1px); filter:none !important; }
.btn.primary:active{ transform: translateY(0px); }

/* Focus ring */
.input:focus, .btn:focus-visible, .check:focus-visible, .copy-btn:focus{
  box-shadow: 0 0 0 4px rgba(11,107,109,.14) !important;
  outline: none !important;
}

/* Chips/tags: slightly elevated */
.chip, .tag, .tags .tag{
  border-color: rgba(181,83,52,.22) !important;
  background: rgba(255,255,255,.88) !important;
}

/* Nav hover/active: terracotta */
nav.primary a:hover{ color: var(--accent2) !important; border-bottom-color: var(--accent2) !important; }
nav.primary a.active{ color: var(--accent2) !important; border-bottom-color: var(--accent2) !important; }

/* Dropzone: cleaner */
.drop{
  border-color: rgba(11,27,51,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(251,250,248,.92)) !important;
}

/* === Estimation page v3 touches (navy accents) === */
/* KPI cards: modern */
.kpis{ gap:14px !important; }
.kpis .k{
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(11,27,51,.03)) !important;
  box-shadow: var(--shadow-soft) !important;
}
/* highlight median/2nd */
.kpis .k:nth-child(2){
  border-color: rgba(11,107,109,.28) !important;
  box-shadow: 0 18px 50px rgba(11,107,109,.18) !important;
}

/* ===== style id=burger-fix-v4 ===== */

/* v4: Fix burger menu on mobile (class name conflict: .panel used elsewhere) */
#menu-panel{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  background:rgba(0,0,0,.45) !important;
  z-index:10050 !important;
}
#menu-panel.open{ display:block !important; }
#menu-panel .sheet{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  height:100% !important;
  width:100vw !important; max-width:100vw !important; left:0 !important; right:0 !important;
  background:var(--bg) !important;
  border-left:1px solid var(--line) !important;
  padding:18px 20px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  box-shadow:-10px 0 30px rgba(0,0,0,.06) !important;
  border-radius:0 !important;
}
#menu-panel .sheet header{
  position:relative !important;
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 0 10px !important;
}

/* ===== style id=bern-actions-floating-fix ===== */

/* === v7: actions bar — compact, no overflow, 3 buttons responsive === */

.actions{
  background: transparent !important;
  padding-top: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  display:flex !important;
  justify-content:center !important;
}

/* Default (desktop/tablet): 3 columns grid, balanced */
.actions .bar{
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
  width: min(760px, 100%);
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  align-items: center;
}

/* Buttons inside the bar: slightly smaller + stable (no hover pop outside the pill) */
.actions .bar .btn{
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}
.actions .bar .btn.primary:hover{ transform: none !important; }
.actions .bar .btn.primary{ box-shadow: 0 10px 20px rgba(8,107,109,.18) !important; }

/* While analyzing: hide "Plus tard" and keep a compact 2-col layout (primary + reset) */
/* While analyzing: keep actions bar stable; disable buttons via JS (no hiding). */
.actions .bar.is-loading{
  /* no layout change */
}

/* Mobile: 2 columns; primary spans full width, the 2 others side-by-side */
@media (max-width: 820px){
  .actions{
    width: 100% !important;
    justify-content: stretch !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .actions .bar{
    width: 100% !important;
    grid-template-columns: 1fr 1fr;
    border-radius: 18px !important;
    padding: 12px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
  }
  #go{ grid-column: 1 / -1; }
  .actions .bar .btn{
    padding: 12px 12px !important;
    font-size: 15px !important;
  }
  .actions .bar.is-loading{
    grid-template-columns: 1fr auto;
  }
}

/* Small phones: allow wrapping if needed (very narrow widths) */
@media (max-width: 360px){
  .actions .bar{ grid-template-columns: 1fr !important; }
  #go, #goLater, #reset{ grid-column: 1 / -1; }
}
/* === Mobile fix: chips must wrap (no overflow) === */
.internet-help .chip,
#internetHelp .chip,
#internetBox .chip,
.chips .chip{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
  text-align: left !important;
  line-height: 1.25 !important;
  height: auto !important;
}

.internet-help,
#internetHelp,
#internetBox{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ===== style id=history-ui ===== */

/* ===============================
   Historique — recherche / filtres / dossiers
   =============================== */
.history-controls .hc-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hc-search{
  flex:1 1 420px;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;
  padding:10px 14px;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.hc-search svg{width:18px;height:18px;stroke:#64748b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-search input{border:0;outline:none;box-shadow:none !important;width:100%;font:inherit;background:transparent;-webkit-appearance:none;appearance:none;}
.hc-filters{display:flex;gap:10px;flex:2 1 520px;flex-wrap:wrap;justify-content:flex-end}
.hc-filters select, .hc-range input{
  border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:10px 12px;font:inherit;color:var(--navy);
}
.hc-range{display:flex;align-items:center;gap:8px}
.hc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hc-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid color-mix(in oklab, var(--accent2), var(--line) 55%);
  background:color-mix(in oklab, var(--beige), white 65%);
  color:var(--navy);
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
  max-width:100%;
}
.hc-chip-text{
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.hc-chip button{
  all:unset;cursor:pointer;display:grid;place-items:center;
  margin-left:auto;flex:0 0 auto;
  width:18px;height:18px;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent2), transparent 60%);
  background:#fff;
}
.hc-chip button:hover{background:color-mix(in oklab, var(--beige), white 45%)}
.hc-chip svg{width:12px;height:12px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round}

.hc-reset{
  all:unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  padding:10px 6px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.hc-reset:hover{ color: var(--accent2); }
.hc-reset:focus,
.hc-reset:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%); border-radius:10px; }

.history-table-wrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.history-table{width:100%;border-collapse:separate;border-spacing:0}
.history-table thead th{
  text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#475569;background:linear-gradient(180deg,#fff,#fff9f0);
  border-bottom:1px solid var(--line);
  padding:12px 12px;
}
.history-table tbody td{
  border-bottom:1px solid color-mix(in oklab, var(--line), white 35%);
  padding:12px 12px;vertical-align:top;
}
.history-table tbody tr:hover td{background:color-mix(in oklab, var(--beige), white 78%)}
.history-thumb{
  width:48px;height:48px;border-radius:12px;border:1px solid var(--line);
  background:#faf7f0;display:grid;place-items:center;overflow:hidden;
}
.history-thumb img{width:100%;height:100%;object-fit:cover}
.history-title{font-weight:800;color:var(--navy);line-height:1.2;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:10px 0;margin:0;cursor:pointer;text-align:left}
.history-title-text{flex:1;min-width:0}
.history-title-chev{flex:0 0 auto;color:color-mix(in oklab, var(--muted), var(--navy) 10%);opacity:.65;transform:translateY(var(--baseline-shift))}
.history-title:hover .history-title-text{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in oklab, var(--accent2), transparent 55%)}
.history-title:active{filter:saturate(1.02)}
.history-title:active .history-title-chev{opacity:.85}

.history-title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%);border-radius:10px}
.history-sub{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.35}
.folder-input{
  width:100%;
  border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:#fff;
}

  .dateField{ position:relative; }

  @media (hover:none) and (pointer:coarse){
    .dateField .dateHint{ display:block; }
    .dateField[data-filled="1"] .dateHint,
    .dateField:focus-within .dateHint{ display:none; }
  }
.folder-input:focus{outline:none;border-color:color-mix(in oklab, var(--accent2), var(--line) 25%);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%)}

.ms{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:9px 10px;
  cursor:pointer;
  user-select:none;
  min-width: 190px;
}
.ms:focus{outline:none;border-color:color-mix(in oklab, var(--accent2), var(--line) 25%);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%)}
.ms-label{font-size:12px;font-weight:500;color:var(--muted)}
.ms-value{font-size:12px;font-weight:500;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;flex:1 1 auto}
@media (max-width:880px){ .ms{min-width:unset;flex:1 1 auto} }

/* --- Combobox Notion/Airtable (folders & subfolders) --- */
.combo-input{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 10px;
  background:#fff;
}
.combo-input:focus{outline:none;border-color:color-mix(in oklab, var(--accent2), var(--line) 25%);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%)}
.combo-input[disabled]{background:color-mix(in oklab,#fff,var(--line) 25%);color:#94a3b8;cursor:not-allowed}

.combo-pop{
  position:fixed;
  z-index:10050;
  min-width:220px;
  max-width:min(420px, calc(100vw - 24px));
  max-height:280px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(2,6,23,.14);
  padding:6px;
}
.combo-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  color:var(--navy);
}
.combo-item small{color:var(--muted);font-weight:700}
.combo-item:hover{background:rgba(15,23,42,.04)}
.combo-item[aria-selected="true"]{background:color-mix(in oklab,var(--accent2),white 88%)}

.bulkbar{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in oklab,#fff,var(--line) 18%);
}
.bulk-left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bulk-check{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--navy);font-weight:800}
.bulk-count{font-size:12px;color:var(--muted);font-weight:800}
.bulk-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bulk-actions .btn{padding:6px 12px;font-size:12px;border-radius:999px}

/* --- Historique : barre d'avancement IA par ligne (sélection / multi-sélection) --- */
.airow-wrap{margin-top:8px;}
.airow-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.airow-state{font-size:12px;color:var(--muted);font-weight:800;}
.airow-state b{color:var(--navy)}
.airow-bar{height:8px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab, #fff, var(--line) 22%);overflow:hidden;}
.airow-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg, color-mix(in oklab, var(--accent2), #fff 18%), var(--accent2));transition:width .28s ease;}
.airow-queued .airow-fill{background:linear-gradient(90deg, color-mix(in oklab, var(--navy), #fff 76%), color-mix(in oklab, var(--navy), #fff 62%));}

.pill.queued{background:color-mix(in oklab, var(--navy), #fff 88%);border-color:color-mix(in oklab, var(--navy), var(--line) 70%);color:var(--navy);}

.btn.danger{border-color:color-mix(in oklab, #ef4444, var(--line) 70%);color:#b91c1c}
.btn.danger:hover{background:color-mix(in oklab, #ef4444, #fff 92%)}

.history-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;position:relative}
.menu{
  position:fixed;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 -8px 44px rgba(2,6,23,.14);
  padding:6px;
  z-index:99999;
  min-width:220px;
  max-height:80vh;
  overflow-y:auto;
}















.menu-item{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  color:var(--navy);
  font-weight:800;
}
.menu-item:hover{background:rgba(15,23,42,.04)}
.menu-item:focus,
.menu-item:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(15,23,42,.10); }
.menu-sep{ height:1px; background:color-mix(in oklab, var(--line), var(--navy) 8%); margin:6px 6px; border-radius:1px; }

/* --- Organiser (drag & drop) --- */
.orgSheet{padding:18px}
.orgTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.orgModes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.orgModeBtn[aria-selected="true"]{background:color-mix(in oklab, var(--beige), #fff 35%);border-color:color-mix(in oklab, var(--navy), var(--line) 60%)}
.orgGrid{display:grid;grid-template-columns:300px 1fr;gap:14px}
.orgNav,.orgMain{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(2,6,23,06);overflow:hidden}
.orgNav{padding:12px;max-height:min(70vh,720px);overflow:auto}
.orgMain{padding:12px;max-height:min(70vh,720px);overflow:auto}
.orgSec{margin:0 0 12px}
.orgSec:last-child{margin-bottom:0}
.orgSecTitle{font-weight:500;color:var(--navy);font-size:13px;margin:8px 4px}
.orgTarget{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:12px;border:1px solid var(--line);background:color-mix(in oklab, #fff, var(--line) 14%);cursor:default;margin:6px 0}
.orgTarget small{color:var(--muted);font-weight:700}
.orgTarget.sub{margin-left:14px}
.orgTarget:hover{background:color-mix(in oklab, var(--beige), #fff 55%)}
.orgTarget.dropover{outline:0;box-shadow:0 0 0 3px rgba(15,23,42,12);border-color:color-mix(in oklab, var(--navy), var(--line) 60%)}
.orgTarget.active{background:color-mix(in oklab, var(--beige), #fff 40%);border-color:color-mix(in oklab, var(--navy), var(--line) 60%);box-shadow:0 0 0 3px rgba(15,23,42,10)}
.orgTreeRow{display:flex;align-items:center;gap:8px}
.orgTreeToggle{width:26px;height:26px;border-radius:10px;border:1px solid var(--line);background:color-mix(in oklab, #fff, var(--line) 10%);display:grid;place-items:center;font-weight:500;color:var(--navy);cursor:pointer;flex:0 0 auto;user-select:none}
.orgTreeToggle:hover{background:color-mix(in oklab, var(--beige), #fff 55%)}
.orgTreeToggle.ghost{opacity:0;pointer-events:none}
.orgSearch{position:sticky;top:0;background:#fff;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid color-mix(in oklab, var(--line), #fff 20%);z-index:2}
.orgList{display:flex;flex-direction:column;gap:10px}
.orgItem{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:grab}
.orgItem:active{cursor:grabbing}
.orgItem:hover{background:color-mix(in oklab, var(--beige), #fff 70%)}
.orgThumb{width:46px;height:46px;border-radius:12px;background:color-mix(in oklab, var(--beige), #fff 55%);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.orgThumb img{width:100%;height:100%;object-fit:cover;display:block}
.orgMeta{min-width:0;flex:1}
.orgTitle{font-weight:500;color:var(--navy);line-height:1.2;margin:0 0 2px;word-break:break-word}
.orgBadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.orgBadge{font-size:12px;font-weight:800;color:var(--navy);border:1px solid var(--line);background:color-mix(in oklab, #fff, var(--line) 16%);padding:4px 8px;border-radius:999px}
@media (max-width:900px){
  .orgGrid{grid-template-columns:1fr}
  .orgNav{order:2}
  .orgMain{order:1}
}

.row-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.history-empty{padding:22px;text-align:center;background:#fff}
@media (max-width:880px){
  .history-table thead{display:none}
  .history-table, .history-table tbody, .history-table tr, .history-table td{display:block;width:100%}
  .history-table tbody td{border-bottom:none;padding:10px 12px}
  .history-table tbody tr{border-bottom:1px solid var(--line)}
  .row-actions{justify-content:flex-start}
}

/* === ORGANISER — Arborescence gauche (plus élégant, dans le style B comme Broc) === */
/* Objectif :
   - garder la logique (drag & drop + filtre) intacte
   - utiliser l’ocre (accent2) pour l’état actif
   - éviter la “barre” centrale entre colonnes
*/

/* Supprime l’effet de “séparateur” trop foncé entre nav et liste */
:is(#organizerModal,#organize-modal) .orgGrid{ gap: 14px !important; }
:is(#organizerModal,#organize-modal) .orgNav,
:is(#organizerModal,#organize-modal) .orgMain{
  box-shadow: none !important;              /* évite la barre sombre au centre */
  background: #fff !important;
}
:is(#organizerModal,#organize-modal) .orgNav{ padding-right: 0 !important; }
:is(#organizerModal,#organize-modal) .orgMain{ padding-left: 0 !important; }
@media (max-width: 900px){
  :is(#organizerModal,#organize-modal) .orgGrid{ gap: 0 !important; }
}

/* Titres de sections (discrets) */
:is(#organizerModal,#organize-modal) .orgSecTitle{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy), var(--muted) 42%);
  margin: 12px 6px 8px;
}

/* Cartes “cibles” */
:is(#organizerModal,#organize-modal) .orgTarget{
  position: relative;
  padding: 11px 12px;
  padding-left: 20px; /* laisse de l'air entre le liseré actif et le texte */
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--line), var(--navy) 8%);
  background: #fff;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* Hover : léger, beige */
:is(#organizerModal,#organize-modal) .orgTarget:hover{
  background: color-mix(in oklab, var(--beige), #fff 78%);
  border-color: color-mix(in oklab, var(--line), var(--navy) 14%);
  transform: translateY(-.5px);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}

:is(#organizerModal,#organize-modal) .orgTarget small{
  font-weight: 800;
  color: color-mix(in oklab, var(--muted), var(--navy) 18%);
}

/* Hint de drop (visible seulement quand on survole pendant un drag) */
:is(#organizerModal,#organize-modal) .orgTarget .dropHint{
  display:none;
  margin-top:6px;
  font-size:12px;
  font-weight:500;
  color: color-mix(in oklab, var(--navy), var(--muted) 22%);
}
:is(#organizerModal,#organize-modal) .orgTarget.dropover .dropHint{ display:block; }

/* Actif : ocre (accent2) mais doux */
:is(#organizerModal,#organize-modal) .orgTarget.active{
  background: color-mix(in oklab, var(--accent2), #fff 92%);
  border-color: color-mix(in oklab, var(--accent2), var(--line) 64%);
  box-shadow: 0 12px 22px rgba(2,6,23,.08);
}

/* Barre active : plus fine + moins “présente” */
:is(#organizerModal,#organize-modal) .orgTarget.active::before{
  content:"";
  position:absolute;
  left: 12px; /* un peu plus à gauche = moins collé à la 1ère lettre */
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent2), #fff 10%);
  opacity: .9;
}

/* Sous-dossiers : indentation + repère très discret */
:is(#organizerModal,#organize-modal) .orgTarget.sub{
  margin-left: 18px;
  padding-left: 20px;
}
:is(#organizerModal,#organize-modal) .orgTarget.sub::after{
  content:"";
  position:absolute;
  left: -10px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: color-mix(in oklab, var(--line), var(--navy) 8%);
  border-radius: 1px;
}

/* Toggle d’arborescence : discret (pas de “bouton” gris) */
#organize-modal .orgTreeRow{ gap: 10px; }
#organize-modal .orgTreeToggle{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: color-mix(in oklab, var(--muted), var(--navy) 18%);
  box-shadow: none;
}
#organize-modal .orgTreeToggle:hover{
  background: color-mix(in oklab, var(--beige), #fff 76%);
  color: var(--navy);
}
#organize-modal .orgTreeToggle:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent2), #fff 65%);
  outline-offset: 2px;
}

/* ===== style id=history-ui-fix-v2 ===== */

/* === Historique v2: desktop wrap + no clipping === */

/* Make filters row wrap nicely on desktop; allow scroll if needed */
#historyCard .hc-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Ensure selects / custom chips don't overflow */
#historyCard .hc-filters select,
#historyCard .hc-filters .ms{
  max-width: 100%;
}

/* In case some parent has overflow hidden, allow filters area to breathe */
#historyCard details.history-filters,
#historyCard details.history-filters > div,
#historyCard #historyBody{
  overflow: visible;
}

/* Table wrapper should scroll instead of clipping */
#historyCard .history-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* Slightly reduce the minimum pill width to avoid truncation */
#historyCard .ms{
  min-width: 160px;
}
@media (min-width: 980px){
  #historyCard .ms{ min-width: 190px; }
}

/* Make summary line not get a thick focus outline look (details can show browser outline) */
#historyCard details.history-filters:focus,
#historyCard details.history-filters summary:focus{
  outline:none;
}

/* ===== style id=ui-tuning-v3 ===== */

/* --- Historique header: better centering + smaller buttons --- */
#historyCard .history-head{ gap:14px; }
#historyCard .history-head-actions{ justify-content:center; }
#historyCard .cardTitle{ text-transform:uppercase; font-size:16px; letter-spacing:.06em; }

/* Boutons taille fixe uniforme */
#historyCard .history-head-actions .btn{
  padding: 9px 0;
  font-size: 15px;
  border-radius: 999px;
  width: 130px;
  text-align: center;
  justify-content: center;
}

/* Center the whole header block on medium/small screens */
@media (max-width: 980px){
  #historyCard .history-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #historyCard .history-head > div{ width:100%; }
  #historyCard .history-head-actions{
    width:100%;
    justify-content:center;
  }
}

/* Desktop: keep title left, actions right but vertically aligned */
@media (min-width: 981px){
  #historyCard .history-head{
    align-items: flex-start;
  }
  #historyCard .history-head-actions{
    margin-left: auto;
  }
}

/* --- Fiche viewer: remove green look, match Bernistian style --- */


/* If fiche is opened inside same document (modal/overlay) */
#ficheBar .btn.primary,
#ficheBar .btn.print,
button#printPdf,
button#printPDF,
button#print,
a#printPdf,
a#printPDF{
  background: var(--bern-accent) !important;
  border-color: color-mix(in oklab, var(--bern-accent), black 12%) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(8,107,109,.22) !important;
}
#ficheBar .btn.primary:hover,
#ficheBar .btn.print:hover,
button#printPdf:hover,
button#printPDF:hover,
button#print:hover,
a#printPdf:hover,
a#printPDF:hover{
  filter: brightness(1.03) !important;
}

/* If fiche is generated as standalone HTML (export fiches) */
.fiche-topbar .btn.primary,
.fiche-topbar button.primary,
.fiche-topbar .print-btn{
  background: var(--bern-accent) !important;
  border: 1px solid color-mix(in oklab, var(--bern-accent), black 12%) !important;
  color:#fff !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}
.fiche-topbar .btn:not(.primary){
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}

/* ===== style id=ui-tuning-v4 ===== */

/* --- Header spacing: keep buttons away from subtitle --- */
@media (max-width: 980px){
  #historyCard .history-head-actions{ margin-top: 10px; }
  #historyCard .cardSub{ margin-bottom: 6px; }
}

/* --- Make Date & Trier selects look like the MS pills --- */
#historyCard .hc-filters select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(2,6,23,06);
  line-height: 1.1;
  min-height: 48px;
}

/* Add a subtle chevron to selects (like other pills) */
#historyCard .hc-filters select{
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* Keep same width behavior as MS blocks */
#historyCard .hc-filters select{ min-width: 190px; }
@media (max-width: 980px){
  #historyCard .hc-filters select{ min-width: 160px; }
}

/* ===== style id=ui-tuning-v5 ===== */

/* Fix: Date/Trier selects should match the .ms pills (no giant shadow/rounded pill) */
#historyCard .hc-filters select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#fff !important;
  padding:9px 10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:var(--navy) !important;
  box-shadow:none !important;
  min-height:auto !important;
  line-height:1.15 !important;
  background-image:none !important;
  padding-right:10px !important;
  min-width:190px !important;
}
@media (max-width:880px){
  #historyCard .hc-filters select{ min-width:unset !important; flex:1 1 auto !important; }
}

/* Focus style like .ms */
#historyCard .hc-filters select:focus{
  outline:none !important;
  border-color:color-mix(in oklab, var(--accent2), var(--line) 25%) !important;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%) !important;
}

/* ===== style id=ui-tuning-v6 ===== */

/* Align all filter pills to the same height and baseline */
#historyCard .hc-filters{ align-items: stretch !important; }

/* Force a consistent control height */
#historyCard .hc-filters .ms,
#historyCard .hc-filters select{
  height: 48px !important;
}

/* Ensure contents are vertically centered */
#historyCard .hc-filters select{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display:flex !important;
  align-items:center !important;
}

#historyCard .hc-filters .ms{
  display:flex !important;
  align-items:center !important;
}

/* Make MS internals not change height */
#historyCard .hc-filters .ms-label,
#historyCard .hc-filters .ms-value{
  line-height: 1.1 !important;
}

/* ===== style id=ui-tuning-v7 ===== */

/* === Fix duplication of filters === */
/* Keep only MS pills for Category / Folder / Subfolder */
#historyCard select#historyCategory,
#historyCard select#historyFolder,
#historyCard select#historySubfolder,
#historyCard select#historyStatus,
#historyCard select#historyOrigin,
#historyCard select#historyRecog{
  display:none !important;
}

/* Date & Sort: keep ONLY the select, ensure no duplicate labels */
#historyCard .hc-filters .ms[data-ms="historyCategory"],
#historyCard .hc-filters .ms[data-ms="historyFolder"],
#historyCard .hc-filters .ms[data-ms="historySubfolder"],
#historyCard .hc-filters .ms[data-ms="historyStatus"],
#historyCard .hc-filters .ms[data-ms="historyOrigin"]{
  display:flex !important;
}

/* Ensure no accidental cloned labels appear */
#historyCard .hc-filters .duplicate,
#historyCard .hc-filters [data-duplicate]{
  display:none !important;
}

/* ===== style id=ui-tuning-v8 ===== */

/* Make Category/Folder/Subfolder text black like Date/Trier */
#historyCard .hc-filters .ms-label,
#historyCard .hc-filters .ms-value{
  color: var(--navy) !important;
}

/* Optional: match select weight */
#historyCard .hc-filters .ms-label{ font-weight: 900 !important; }
#historyCard .hc-filters .ms-value{ font-weight: 900 !important; }

/* If the UI intentionally had label lighter, keep slight separation via opacity */
#historyCard .hc-filters .ms-label{ opacity: .9 !important; }

/* ===== style id=ui-tuning-v9 ===== */

/* Add colon after MS labels to match Date / Trier */
#historyCard .hc-filters .ms-label::after{
  content: " :";
}

/* ===== style id=ui-tuning-v10 ===== */

/* Re-center text vertically inside filter pills (avoid touching bottom border) */
#historyCard .hc-filters .ms,
#historyCard .hc-filters select{
  display:flex !important;
  align-items:center !important;
}

/* Add comfortable vertical padding */
#historyCard .hc-filters .ms{
  padding: 0 16px !important;
}
#historyCard .hc-filters select{
  padding: 0 16px !important;
  line-height: 1.2 !important;
}

/* Ensure label/value sit on optical center */
#historyCard .hc-filters .ms-label,
#historyCard .hc-filters .ms-value{
  line-height: 1.15 !important;
}

/* ===== style id=filters-spacing-fix ===== */

/* Remonter visuellement les "pills" des filtres (éviter l’effet collé à la ligne du bas) */
#historyCard details.history-filters .hc-filters{
  padding-bottom: 22px !important; /* plus d’air sous les boutons */
}

/* Optionnel : si la ligne sous les filtres est trop proche, on espace aussi le bloc suivant */
#historyCard #historyChips{
  margin-top: 12px !important;
}

/* ===== style id=history-header-polish ===== */

/* --- Header spacing: breathe between subtitle and buttons --- */
#historyCard .cardSub{
  margin-bottom: 14px !important;
}

#historyCard .history-head-actions{
  margin-top: 10px !important;
}

/* --- Buttons taille fixe uniforme --- */
#historyCard .history-head-actions .btn{
  padding: 10px 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border-width: 2px !important;
  letter-spacing: .2px;
  width: 130px !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Subtle hover */
#historyCard .history-head-actions .btn:hover{
  background: color-mix(in oklab, var(--accent2), transparent 92%) !important;
  transform: translateY(-1px);
}

/* Keep things centered nicely on small screens */
@media (max-width: 900px){
  #historyCard .history-head{
    gap: 10px !important;
  }
}

    /* Tri sheet (fiche de tri) */
    .triDialog{border:none;border-radius:18px;max-width:760px;width:calc(100% - 28px);padding:0;box-shadow:0 30px 90px rgba(2,6,23,.22)}
    .triDialog::backdrop{background:rgba(2,6,23,.45)}
    .triHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
    .triTitle{font-weight:500;color:var(--navy);font-size:16px}
    .triBody{position:relative;padding:14px 16px}
    .triTop{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:start;margin-bottom:12px}
    .triThumb{width:88px;height:88px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
    .triThumb.is-drop{border-style:dashed;border-color:color-mix(in oklab, var(--accent2), var(--line) 35%);background:color-mix(in oklab,#fff,var(--accent2) 6%);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%)}

    .triThumbBox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
    .triThumbActions{display:flex;gap:8px}

/* === Fiche de tri : actions photo — overlay (mobile + desktop) === */
/* Objectif : remplacer les boutons "Modifier / Retirer" par 2 icônes compactes sur la vignette. */

/* Le conteneur de la photo sert de repère */
.triThumbBox{ position: relative; }

/* Overlay exactement à la taille de la vignette (évite tout chevauchement) */
.triThumbActions{
  position:absolute;
  left:0; top:0;
  width:88px; height:88px;
  margin:0 !important;
  padding:0 !important;
  display:block;
  pointer-events:none; /* seules les icônes sont cliquables */
}

/* Boutons ronds, compacts */
.triThumbActions .btn{
  pointer-events:auto;
  position:absolute;
  width:28px; height:28px;
  padding:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 8px 16px rgba(2,6,23,.12) !important;
  font-size:0 !important;
  line-height:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden;
  transform: translateZ(0);
}

/* Placement (dans les coins, sans gêner la photo) */
#triThumbChange{ right:5px; bottom:5px; }
#triThumbRemove{ right:5px; top:5px; }

/* Couleurs (plus contrastées, moins “gris”) */
#triThumbChange{
  border:1px solid color-mix(in oklab, var(--navy), #ffffff 56%) !important;
}
#triThumbRemove{
  border:1px solid color-mix(in oklab, var(--accent2), #ffffff 40%) !important;
  background: color-mix(in oklab, var(--accent2), #ffffff 90%) !important; /* léger tint */
}

/* Feedback */
.triThumbActions .btn:hover{ filter: brightness(1.02); }
.triThumbActions .btn:active{ transform: scale(.96); }
.triThumbActions .btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%), 0 8px 16px rgba(2,6,23,.12) !important;
}

/* Icônes (SVG inline) */
#triThumbChange::before{
  content:"";
  width:14px;height:14px;
  background: no-repeat center/14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313213a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>");
}
#triThumbRemove::before{
  content:"";
  width:14px;height:14px;
  background: no-repeat center/14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b55334' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='M6 6l12 12'/></svg>");
}

/* Align pseudo-icons perfectly in round buttons */
.triThumbActions .btn::before{ display:block; }

/* Cache le texte (accessibilité conservée via aria-label côté HTML si présent) */
#triThumbChange, #triThumbRemove{ color: transparent !important; }

/* Quand la vignette est plus petite (mobile), on réduit encore */
@media (max-width:560px){
  .triThumbActions{ width:64px; height:64px; }
  .triThumbActions .btn{ width:24px; height:24px; }
  #triThumbChange{ right:4px; bottom:4px; }
  #triThumbRemove{ right:4px; top:4px; }
  #triThumbChange::before, #triThumbRemove::before{ width:12px; height:12px; background-size:12px 12px; }
}
.triThumbActions .btn{padding:8px 10px;font-size:13px}
    .triThumb[role="button"]{cursor:pointer}
    .triThumb:focus{outline:none;box-shadow:0 0 0 3px rgba(15,23,42,.12)}
    .triThumb img{width:100%;height:100%;object-fit:cover;display:block}
    .triMeta{color:var(--muted);font-size:12px;line-height:1.35;margin-top:4px}
    .triGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .triGrid .full{grid-column:1 / -1}
    .triField label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin:0 0 6px}
    .triActions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:color-mix(in oklab,#fff,var(--line) 14%)}
    @media (max-width:560px){
      .triTop{grid-template-columns:64px 1fr}
      .triThumb{width:64px;height:64px;border-radius:12px}
      .triGrid{grid-template-columns:1fr}

      /* Mobile: make bottom action buttons more compact (Tri only) */
      #dlg-tri .triActions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:10px 12px;
      }
      #dlg-tri .triActions .btn{
        padding:10px 12px;
        font-size:14px;
        border-radius:14px;
      }
      #dlg-tri .triActions .btn.primary{
        border-radius:18px;
      }
    }

/* ===== style id=tri-suggest-css ===== */

/* Tri sheet: dropdown suggestions (open on click even if field has text) */
.triSuggest{
  overscroll-behavior: contain;
  position:absolute; z-index:10000;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(2,6,23,.18);
  max-height:240px;
  overflow:auto;
  padding:6px;
  min-width:220px;
}
.triSuggest button{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight: 500;
  color:var(--navy);
  font-size:14px;
}
.triSuggest button:hover{
  background:color-mix(in oklab,#fff,var(--line) 24%);
}

.triSuggest button[aria-selected="true"]{
  background:color-mix(in oklab,#fff,var(--line) 18%);
  font-weight:700;
}
.triSuggest button[aria-selected="true"]::before{
  content:"✓";
  display:inline-block;
  width:18px;
  margin-right:6px;
  color:var(--navy);
}
.triSuggest button[aria-selected="false"]::before{
  content:"";
  display:inline-block;
  width:18px;
  margin-right:6px;
}

.triSuggestCreate{
  border-top:1px solid color-mix(in oklab,#fff,var(--line) 55%);
  margin-top:6px;
  padding-top:6px;
}
.triSuggestCreate button.create{
  font-weight:500;
  color:var(--navy);
}
.triSuggestCreate .triCreateLabel{color:var(--muted); font-weight:500;}
.triSuggestCreate .triCreateValue{color:var(--navy); font-weight:500;}

.triSuggestCreate.top{
  border-top:0;
  margin-top:0;
  padding-top:0;
  border-bottom:1px solid color-mix(in oklab,#fff,var(--line) 55%);
  padding-bottom:6px;
  margin-bottom:6px;
}

/* Mobile: show suggestions as a bottom sheet for better visibility */
@media (max-width:640px){
  .triSuggestOverlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background: rgba(15,23,42,.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display:flex;
    align-items:flex-end;
    justify-content:stretch;
    /* keep the sheet above iOS keyboard using --vvb (visualViewport bottom inset) */
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px) + var(--vvb, 0px));
    box-sizing:border-box;
  }
  .triSuggest.triSuggestSheet{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    /* keyboard-safe height */
    max-height: min(62vh, calc(var(--vvh, 100vh) - 120px)) !important;
    min-width: 0 !important;
    border-radius: 18px;
    padding: 10px;
    overflow:auto;
    box-shadow: 0 22px 70px rgba(2,6,23,.30);
    overscroll-behavior: contain;
  }
  .triSuggest.triSuggestSheet button{
    padding: 12px 12px;
    font-size: 15px;
  }
}

/* ===== style id=hc-filters-centering-fix ===== */

/* Center "Filtres avancés" pills and keep comfortable side margins (desktop + mobile) */
#historyCard .hc-filters{
  justify-content: center !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
@media (min-width: 980px){
  #historyCard .hc-filters{
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ===== style id=history-search-filters-inline-v1 ===== */

/* Search + Filters button on the same row */
#historyCard .history-search-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
#historyCard .history-search-row .hc-search{ flex:1 1 auto; }
#historyCard #historyFiltersBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  height:48px;
  padding:0 12px;
}
#historyCard .hcFCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,12);
  background: color-mix(in oklab, var(--beige), #fff 70%);
  font-weight:500;
  color:var(--navy);
  font-size:12px;
  line-height:1;
}
@media (max-width:520px){
  #historyCard .history-search-row{ flex-wrap:wrap; }
  #historyCard #historyFiltersBtn{ width:100%; justify-content:center; }
}

/* Keep filters panel controlled by the button (hide the native summary row) */
#historyCard #historyFilters > summary{ display:none; }

/* ===== style id=date-height-fix ===== */

/* === Fix hauteur champs date (mobile iOS) === */
input[type="date"]{
  height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 16px;
}

/* ===== style id=bern-disable-ripple-mobile ===== */

/* Fix iOS Safari: prevent occasional "oval" artifacts caused by the mobile ripple (::after) on buttons */
@media (hover:none) and (pointer:coarse){
  .btn::after,
  .btn:active::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
  }
}

/* ===== style id=bern-burger-and-x-center-only ===== */

/* === PATCH: burger perfectly aligned (3 equal lines) + thumbnail delete cross centered === */
/* (No other behavior changes) */

/* Burger: force equal line widths & centering (fix iOS rendering) */
.burger{ position:relative; }
.burger span{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:18px !important;
  height:2px !important;
  background:var(--ink) !important;
  border-radius:2px !important;
  transform:translate(-50%,-50%) !important;
}
.burger span::before,
.burger span::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  width:18px !important;
  height:2px !important;
  background:var(--ink) !important;
  border-radius:2px !important;
  transform:translateX(-50%) !important;
}
.burger span::before{ top:-6px !important; }
.burger span::after{ top: 6px !important; }

.burger[aria-expanded="true"] span{ background:transparent !important; }
.burger[aria-expanded="true"] span::before{
  top:0 !important;
  transform:translateX(-50%) rotate(45deg) !important;
}
.burger[aria-expanded="true"] span::after{
  top:0 !important;
  transform:translateX(-50%) rotate(-45deg) !important;
}

/* Delete cross on thumbnails: center icon/text perfectly (iOS baseline quirks) */
.x{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
}
.x svg{
  display:block !important;
}

/* --- List manager --- */

/* --- Synthèse (filtres) --- */
#dlg-synthese .helpDialogBody{padding:14px 16px;max-height:min(70vh,560px);overflow:auto}
.synTop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.synKpis{display:flex;gap:10px;flex-wrap:wrap}
.synKpi{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:12px;padding:10px 12px;box-shadow:0 6px 18px rgba(19,33,58,.05)}
.synKpi .k{font-size:12px;color:var(--muted);line-height:1.2}
.synKpi .v{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;color:var(--navy);font-size:16px;line-height:1.15;margin-top:2px}
.synGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media (max-width:760px){.synGrid{grid-template-columns:1fr}}

/* synthèse : carousel horizontal */
.synCarousel{position:relative;margin-top:10px}
.synTrack{
  display:flex;gap:12px;overflow:auto;padding:2px 34px 8px;
  scroll-snap-type:x mandatory;scroll-padding:34px;
  -webkit-overflow-scrolling:touch;
}
.synTrack::-webkit-scrollbar{height:10px}
.synTrack::-webkit-scrollbar-thumb{background:rgba(15,23,42,0.18);border-radius:999px}
.synTrack > .synCard{flex:0 0 min(520px, calc(100% - 2px));scroll-snap-align:start}
.synNav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:999px;border:1px solid rgba(15,23,42,0.12);
  background:#fff;color:var(--navy);font-weight:500;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(19,33,58,0.12);
  cursor:pointer;z-index:3;
}
.synNav:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
.synNav:disabled{opacity:.35;cursor:default}
.synPrev{left:6px}
.synNext{right:6px}

/* synthèse : camembert + légende */
.synPieWrap{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center}
@media (max-width:520px){.synPieWrap{grid-template-columns:1fr;justify-items:center}}
.synPie{width:140px;height:140px;display:block}
.synLegend{display:grid;gap:6px}
.synLegendRow{
  display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;
  padding:6px 8px;border-radius:10px;cursor:pointer;
}
.synLegendRow:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
.synSwatch{width:12px;height:12px;border-radius:4px;border:1px solid rgba(15,23,42,0.10)}
.synLegendLab{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.synLegendVal{font-size:12px;color:var(--muted);white-space:nowrap}
.synCard{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;box-shadow:0 6px 18px rgba(19,33,58,.05);padding:12px}
.synCard h4{margin:0 0 8px;font-size:14px}
.synRow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed rgba(15,23,42,.08)}
.synRow:first-child{border-top:none}
.synLab{font-size:13px;color:var(--ink)}
.synBar{height:10px;background:rgba(19,33,58,.08);border-radius:999px;overflow:hidden}
.synBar > span{display:block;height:100%;background:var(--accent);border-radius:999px}
.synVal{font-size:12px;color:var(--muted);white-space:nowrap}
.synEmpty{padding:12px 0;color:var(--muted)}
/* synthèse : KPIs dans l'entête */
#dlg-synthese .helpDialogHead{justify-content:flex-start}
#dlg-synthese .synHeadKpis{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#dlg-synthese .synHeadKpi{
  background:#fff;border:1px solid rgba(15,23,42,08);border-radius:999px;
  padding:6px 10px;display:flex;align-items:baseline;gap:8px;
  box-shadow:0 6px 18px rgba(19,33,58,05)
}
#dlg-synthese .synHeadKpi .k{font-size:11px;color:var(--muted);white-space:nowrap;line-height:1}
#dlg-synthese .synHeadKpi .v{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;color:var(--navy);font-size:14px;white-space:nowrap;line-height:1}
@media (max-width:520px){#dlg-synthese .synHeadKpi .k{display:none}}

/* === Synthèse: remove shadow from top KPI buttons === */
#dlg-synthese .synHeadKpi{
  box-shadow: none !important;
  background: #fff !important;
}
#dlg-synthese .synHeadKpiClick:hover{
  box-shadow: none !important;
}


#dlg-synthese .synHeadKpiClick{cursor:pointer}
#dlg-synthese .synHeadKpiClick:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
#dlg-synthese .synHeadKpiClick:active{background:color-mix(in oklab,#fff,var(--line) 28%)}

/* === iOS/mobile: empêcher le contour bleu sur la KPI cliquable (Plus-value) === */
/* (élément = div tabindex=0 role=button, donc il peut recevoir le focus) */
#dlg-synthese .synHeadKpiClick{
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#dlg-synthese .synHeadKpiClick:focus{ outline: none; }
/* On garde un focus accessible au clavier (pas de bleu iOS) */
#dlg-synthese .synHeadKpiClick:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--accent2), var(--line) 35%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%);
}


/* synthèse : rappel des filtres actifs (chips) */
.synFilters{margin-top:10px;display:grid;gap:8px;max-width:720px}
.synFHdr{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.synFCount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(15,23,42,12);
  background: color-mix(in oklab, var(--beige), #fff 70%);
  font-weight:800;color:var(--navy);line-height:1
}
.synFChips{display:flex;flex-wrap:wrap;gap:8px}
.synChip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(15,23,42,12);background:#fff;border-radius:999px;
  padding:6px 10px;font-size:12px;color:var(--muted);
  max-width:100%
}
.synChipK{color:var(--navy);font-weight:800;white-space:nowrap}
.synChipSep{opacity:.6}
.synChipV{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
@media (max-width:640px){.synChipV{max-width:220px}}
.synFEmpty{font-size:12px;color:var(--muted)}


/* synthèse: lignes cliquables + toggle métrique */
.synRow{cursor:pointer}
.synRow:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
.synRow:active{background:color-mix(in oklab,#fff,var(--line) 28%)}
.synToggle{display:inline-flex;gap:6px;align-items:center;border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:999px;padding:4px}
.synTBtn{
  appearance:none;border:0;background:transparent;color:var(--navy);
  padding:8px 10px;border-radius:999px;font-weight:750;cursor:pointer;font-size:12px;
}
.synTBtn:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
.synTBtn.active{background:rgba(0,126,125,.12);color:var(--navy)}
/* Détail synthèse */
#dlg-syn-details .helpDialogBody{padding:14px 16px;max-height:min(70vh,560px);overflow:auto}
.synDTop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.synDTop .small{margin-top:2px}
.synDList{margin-top:10px;border-top:1px dashed rgba(15,23,42,.10)}
.synDItem{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(15,23,42,.10);cursor:pointer}
.synDItem:hover{background:color-mix(in oklab,#fff,var(--line) 18%)}
.synDThumb{width:44px;height:44px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
.synDThumb img{width:100%;height:100%;object-fit:cover;display:block}
.synDTitle{font-weight:800;color:var(--navy);font-size:13px;line-height:1.25}
.synDMeta{color:var(--muted);font-size:12px;line-height:1.25;margin-top:2px}
.synDVal{font-size:12px;color:var(--muted);white-space:nowrap}

#dlg-lists .helpDialogBody{padding:14px 16px;max-height:min(70vh,520px);overflow:auto}
.lmSection{padding:12px 0;border-bottom:1px dashed var(--line)}
.lmSection:last-child{border-bottom:none}
.lmHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lmTitle{font-weight:500;color:var(--navy)}
.lmAdd{display:flex;gap:8px;flex-wrap:wrap}
.lmAdd input{flex:1;min-width:220px}
.lmChips{display:flex;flex-wrap:wrap;gap:8px}
.lmChip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-weight:750}
.lmChip button{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.lmChip button:hover{color:var(--navy)}
.lmEmpty{color:var(--muted);font-size:13px}

/* ===== style id=organiser-fullscreen-upgrade ===== */

/* === ORGANISER — Fullscreen mode === */
#organizerModal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(0,0,0,.35);
}

#organizerModal.open{
  display: block;
}

#organizerModal .organizer-box{
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  animation: none;
}

#organizerModal .organizer-header{
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
}

#organizerModal .organizer-body{
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
}

#organizerModal .organizer-sidebar{
  border-right: 1px solid var(--line);
  padding: 20px;
  overflow-y: auto;
}

#organizerModal .organizer-content{
  padding: 24px;
  overflow-y: auto;
}

#organizerModal .close{
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}

/* ===== style id=organiser-fullscreen-upgrade-v2 ===== */

/* === ORGANISER — Fullscreen (v2) === */
/* Note: the actual modal id is #organize-modal (not #organizerModal). */
#organize-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(0,0,0,.35) !important;
}

/* Ensure the inner sheet truly fills the screen (override inline styles) */
#organize-modal .orgSheet{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  margin: 0 !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;

  padding: 22px 22px 18px !important;
  background: var(--bg) !important;
}

/* Make the top header area feel like an app header */
#organize-modal .orgTop{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 16px !important;
}

/* Close button stays top-right */
#organize-modal #closeOrganize{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
}

/* Main body becomes 2 columns (sidebar + list) */
#organize-modal .orgGrid{
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 16px !important;
  height: calc(100% - 88px) !important; /* header space */
  overflow: hidden !important;
}

#organize-modal .orgTargets{
  border-right: 1px solid var(--line) !important;
  padding-right: 16px !important;
  overflow: auto !important;
}

#organize-modal .orgItems{
  padding-left: 6px !important;
  overflow: auto !important;
}

/* Mobile: stack */
@media (max-width: 900px){
  #organize-modal .orgGrid{
    grid-template-columns: 1fr !important;
    height: calc(100% - 104px) !important;
  }
  #organize-modal .orgTargets{
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
  }
  #organize-modal .orgItems{
    padding-left: 0 !important;
  }
}

/* ===== style id=organiser-v3-fix2-centering-close ===== */

/* === ORGANISER — Fix2: keep JS opening working (uses style.display='block') === */
/* Do NOT force display:none; instead, when JS sets display:block, we turn it into flex for centering */
#organize-modal[style*="display: block"],
#organize-modal[style*="display:block"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 32px 28px !important;
}

/* Centered "app window" */
#organize-modal .orgSheet{
  position:relative !important;
  width: min(1400px, 96vw) !important;
  height: min(900px, 92vh) !important;
  max-width:none !important;
  margin:0 !important;
  inset:auto !important;
  border-radius: 22px !important;
  overflow:hidden !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18) !important;
}

/* Header spacing (less "too high") */
#organize-modal .orgTop{
  padding: 26px 30px 16px 30px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Close button: never overlaps mode buttons */
#organize-modal #closeOrganize{
  position:absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 20 !important;
}

/* Reserve space on the right inside the header for the close button */
#organize-modal .orgModes{
  padding-right: 56px !important;
}

/* Body grid height: account for header */
#organize-modal .orgGrid{
  height: calc(100% - 92px) !important;
}

/* Mobile: fullscreen */
@media (max-width: 900px){
  #organize-modal[style*="display: block"],
  #organize-modal[style*="display:block"]{
    padding: 0 !important;
  }
  #organize-modal .orgSheet{
    width:100% !important;
    height:100% !important;
    border-radius: 0 !important;
  }
}

/* ===== style id=organiser-search-nonsticky-mobile-disable ===== */

/* === ORGANISER — UX tweaks === */
/* Search bar should scroll with the list (no sticky header inside the scroll) */
#organize-modal .orgSearch{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
/* Mobile: Organiser is intentionally disabled (too small / unreadable) */
@media (max-width: 820px){
  #historyOrganize{ display:none !important; }
  #organize-modal{ display:none !important; }
}
<style id="organiser-mode-buttons">
/* === ORGANISER — Mode toggle (Vue filtrée / Sélection) === */
#organize-modal .orgModes{
  display:inline-flex !important;
  align-items:center !important;
  gap: 0 !important;
  background: rgba(15,23,42,.06) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

/* keep the "reserve close button space" */
#organize-modal .orgModes{ padding-right: 56px !important; }

#organize-modal .orgModes .orgModeBtn{
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#organize-modal .orgModes .orgModeBtn:hover{
  background: rgba(15,23,42,.06) !important;
}

#organize-modal .orgModes .orgModeBtn[aria-selected="true"]{
  background: var(--accent2) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17,24,39,.16) !important;
}

#organize-modal .orgModes .orgModeBtn[aria-selected="true"]::before{
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  transform: translateY(-.5px);
}

#organize-modal .orgModes .orgModeBtn:focus-visible{
  outline: 3px solid rgba(99,102,241,.35);
  outline-offset: 2px;
}

@media (max-width: 900px){
  #organize-modal .orgModes{ width: 100% !important; }
  #organize-modal .orgModes .orgModeBtn{ flex: 1 1 0; text-align:center; }
}

/* ===== style id=organizer-input-spacing-fix ===== */

/* === Organiser – Champs plus respirants === */
#organizerModal input,
#organizerModal textarea,
#organizerModal select {
  padding: 14px 18px !important;
  border-radius: 14px !important;
}

/* Barre de recherche */
#organizerModal .search input {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ===== style id=organizer-spacing-v2 ===== */

/* === Organiser (modal réel #organize-modal) — plus d’air autour des contenus === */
#organize-modal .orgNav{
  padding-left: 16px !important;
  padding-right: 16px !important; /* on garde une respiration, même si border-right est supprimé */
}
#organize-modal .orgMain{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Champs (recherche / inputs) dans le modal #organize-modal */
#organize-modal input,
#organize-modal textarea,
#organize-modal select{
  padding: 14px 18px !important;
  border-radius: 14px !important;
}

/* Barre de recherche : un peu plus large */
#organize-modal .orgSearch input,
#organize-modal .search input{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ===== style id=organizer-contextmenu-v1 ===== */

/* === Organiser — "+" + menu contextuel dossiers === */
#organize-modal .orgSecTitleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
#organize-modal .orgAddBtn{
  width:28px;height:28px;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--line), var(--navy) 10%);
  background:#fff;color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:500;cursor:pointer;line-height:0;
  -webkit-appearance:none;appearance:none;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
#organize-modal .orgAddBtn:hover{background:color-mix(in oklab, var(--beige), #fff 70%)}
#organize-modal .orgCtx{
  position:fixed;z-index:10050;min-width:220px;
  background:rgba(255,255,255,.96);
  border:1px solid color-mix(in oklab, var(--line), var(--navy) 10%);
  border-radius:14px;
  box-shadow:0 18px 46px rgba(2,6,23,.16);
  padding:6px;
  display:none;
}
#organize-modal .orgCtx.open{display:block}
#organize-modal .orgCtx button{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border:0;background:transparent;
  font-weight:800;color:var(--navy);
  border-radius:10px;cursor:pointer;
}
#organize-modal .orgCtx button:hover{background:color-mix(in oklab, var(--beige), #fff 75%)}
#organize-modal .orgCtx .danger{color:color-mix(in oklab, var(--accent2), #000 12%)}
#organize-modal .orgCtx .sep{height:1px;background:color-mix(in oklab, var(--line), #000 4%);margin:6px 6px;border-radius:1px}

#organize-modal .orgItem{position:relative}
#organize-modal .orgItem{ position:relative; transition: background .15s, box-shadow .18s, border-color .18s; }

#organize-modal .orgItem.is-selected{
  border-color: color-mix(in oklab, var(--accent2), var(--line) 55%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent2), transparent 82%), var(--shadow);
  background: color-mix(in oklab, var(--beige), #fff 76%);
}
#organize-modal .orgItem.is-selected::before{
  content:"";
  position:absolute; left:10px; top:10px;
  width:10px; height:10px; border-radius:999px;
  background: var(--accent2);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent2), transparent 86%);
}

/* When selection mode is active on touch devices, show a subtle cue */
html.org-selecting #organize-modal .orgHint{
  display:block !important;
}

/* ===== style id=drag-size-reduction ===== */

/* === Reduce drag preview size === */
.drag-preview,
.dragging,
.item-drag-ghost {
  transform: scale(0.78) !important;
  transform-origin: top left !important;
  max-width: 420px !important;
  opacity: 0.95 !important;
}

/* If using custom clone container */
body.dragging .card {
  transform: scale(0.78) !important;
  transform-origin: top left !important;
}

/* ===== style id=bern-drag-badge ===== */

/* === Drag preview badge (small, premium) === */
.bern-drag-badge{
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 280px;
  max-width: 280px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--line), var(--navy) 12%);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(2,6,23,.14);
  backdrop-filter: blur(6px);
  padding: 10px 10px;
  display:flex;
  gap:10px;
  align-items:center;
  color: var(--navy);
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.bern-drag-badge .bthumb{
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #faf7f0;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.bern-drag-badge .bthumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.bern-drag-badge .bmeta{ min-width:0; flex:1 1 auto; }
.bern-drag-badge .btitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.bern-drag-badge .bsub{
  margin-top: 4px;
  font-size: 12px;
  color: color-mix(in oklab, var(--ink), var(--muted) 45%);
  display:flex;
  align-items:center;
  gap:8px;
}
.bern-drag-badge .bcount{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent2), var(--line) 55%);
  background: color-mix(in oklab, var(--beige), #fff 70%);
  font-weight: 800;
  white-space: nowrap;
}
.bern-drag-badge .bdot{
  width:8px;height:8px;border-radius:999px;
  background: var(--accent2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 84%);
}

/* ===== style id=fix-hide-historyRecog ===== */

#historyRecog{display:none !important;}

/* ===== style id=bern-tophelp ===== */

    .topHelp{margin:0;padding:0;border:none;background:none;height:0;overflow:visible}
    .topHelpLead{max-width:860px;margin:0 auto;line-height:1.5;text-align:left}
    /* inline help (compact) */
    .topHelpInline{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .helpInfoBtn{
      appearance:none;border:1px solid var(--line);background:#fff;color:var(--muted);
      width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
      font-weight:600;font-style:normal;font-size:11px;cursor:pointer;flex:0 0 auto;
      box-shadow:none;
      -webkit-tap-highlight-color:transparent;
    }
    .helpInfoBtn:hover{box-shadow:0 12px 30px rgba(2,6,23,.08)}
    .helpInfoBtn:focus{outline:none;box-shadow:0 0 0 4px rgba(0,126,125,.14), 0 10px 26px rgba(2,6,23,.06)}


    /* compact, centered action pills */
    .topHelpActions{max-width:860px;margin:12px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
    .helpPill{
      appearance:none;border:1px solid var(--line);background:#fff;color:var(--navy);
      border-radius:999px;padding:10px 14px;font-weight:650;cursor:pointer;
      box-shadow:0 10px 26px rgba(2,6,23,.06);
    }
    .helpPill:hover{box-shadow:0 12px 30px rgba(2,6,23,.08)}
    .helpPill:focus{outline:none;box-shadow:0 0 0 4px rgba(0,126,125,.14), 0 10px 26px rgba(2,6,23,.06)}

    /* dialog */
    .helpDialog{border:none;border-radius:18px;max-width:720px;width:calc(100% - 28px);padding:0;box-shadow:0 30px 90px rgba(2,6,23,.22)}
    .helpDialog::backdrop{background:rgba(2,6,23,.45)}
    .helpDialogHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
    .helpDialogTitle{font-weight:800;color:var(--navy);font-size:16px}
    .helpX{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(15,23,42,.14) !important;
  background:#fff !important;

  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;

  border-radius:999px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
}
.helpX:visited{ color:#0f172a !important; }
.helpX:hover{ background:rgba(15,23,42,.04) !important; }
.helpX:active{ transform:scale(.98); }
.helpX:focus,
.helpX:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,23,42,.12) !important;
}

.helpDialogBody{padding:14px 18px 16px;color:#0f172a}
    .helpDialog ul,.helpDialog ol{margin:8px 0 0 18px;padding:0}
    .helpDialog li{margin:7px 0}

    @media(max-width:640px){
      .topHelpLead{font-size:14px}
      .topHelpActions{justify-content:center}
      .helpPill{width:100%;text-align:left}
    }


/* ===== Sections "À propos" & "Parlons-nous" (plus élégants, sans gros rectangles) ===== */
.section{
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 18px;
}

.section .section-inner{
  position: relative;
  border-radius: 22px;
  border: 1px solid color-mix(in oklab, var(--line), var(--navy) 10%);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 22px 22px;
}

.section h2{ margin: 0 0 10px; }

/* À PROPOS : fond “papier” + liseré vertical */
.section-about .section-inner{
  background:
    radial-gradient(900px 260px at 10% 0%, color-mix(in oklab, var(--accent), transparent 88%), transparent 55%),
    radial-gradient(900px 260px at 90% 12%, color-mix(in oklab, var(--accent2), transparent 90%), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
}

.section-about .section-inner::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  opacity: .9;
}

.section-about .section-body{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

/* CONTACT : format “callout” (2 colonnes) */
.section-contact .section-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 20px 22px;
  background:
    radial-gradient(900px 300px at 15% 20%, color-mix(in oklab, var(--accent), transparent 86%), transparent 60%),
    radial-gradient(900px 300px at 85% 0%, color-mix(in oklab, var(--accent2), transparent 86%), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.84));
}

.section-contact .contact-body{
  min-width: min(620px, 100%);
}

.section-contact .contact-lead{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.section-contact .contact-cta{
  display:flex;
  justify-content:flex-end;
}

/* CTA plus “premium” dans le contact (sans toucher aux autres boutons) */
.section-contact .contact-cta .btn{
  background: linear-gradient(180deg, var(--accent2), color-mix(in oklab, var(--accent2), #000 12%));
  color:#fff;
  border-color: color-mix(in oklab, var(--accent2), #000 12%);
  box-shadow: 0 12px 26px color-mix(in oklab, var(--accent2), transparent 70%);
}
.section-contact .contact-cta .btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.section-contact .contact-cta .btn:active{ transform: translateY(0); }

@media (max-width: 820px){
  .section-contact .section-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .section-contact .contact-cta{ justify-content: flex-start; }
  .section-contact .contact-cta .btn{ width: fit-content; }
}

/* === Chat composer: mobile width fix (v2) === */
@media (max-width:640px){
  .chat-compose{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius:0 0 18px 18px;
    --chat-btn-size: 36px;
    --chat-icon-size: 16px;
  }
  .chat-compose-row{
    gap:6px !important;
    align-items:flex-end;
  }
  .chat-compose textarea{
    min-height:36px !important;
    padding:9px 10px !important;
    border-radius:16px !important;
    width:100% !important;
  }
  .chat-attach-strip .thumb{ width:42px; height:42px; }
}


/* === PDF Edit Mode — Dotted field refinement === */

.print-edit-mode .editable-field,
.print-edit-mode .editable-inline,
.print-edit-mode .editable-block{
  border: 1.5px dashed rgba(181, 83, 52, 0.55);
  border-radius: 14px;
  padding: 6px 10px;
  background: rgba(181, 83, 52, 0.04);
  transition: border-color .2s ease, background .2s ease;
}

.print-edit-mode .editable-field:hover,
.print-edit-mode .editable-inline:hover,
.print-edit-mode .editable-block:hover{
  border-color: rgba(181, 83, 52, 0.85);
  background: rgba(181, 83, 52, 0.07);
}

.print-edit-mode .tag{
  border: 1px dashed rgba(181, 83, 52, 0.55);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(181, 83, 52, 0.05);
}


/* === PDF Edit Mode — prevent outline overlap on title & pills === */
/* NOTE: in this file, PDF edit mode = html.pdf-edit + [contenteditable="true"] */

html.pdf-edit [contenteditable="true"]{
  outline: 1.5px dashed rgba(181, 83, 52, 0.55) !important;
  outline-offset: 3px !important;         /* smaller so it feels tighter */
  border-radius: 14px !important;
  background: rgba(181, 83, 52, 0.04);    /* subtle field surface */
}

/* Hover / focus feedback */
html.pdf-edit [contenteditable="true"]:hover,
html.pdf-edit [contenteditable="true"]:focus{
  outline-color: rgba(181, 83, 52, 0.85) !important;
  background: rgba(181, 83, 52, 0.07);
}

/* IMPORTANT: title should wrap its content (not full-width),
   so the outline doesn't visually "cover" folder/subfolder pills below. */
html.pdf-edit main h2[contenteditable="true"]{
  display: inline-block !important;
  max-width: 100% !important;
  width: fit-content !important;
  white-space: normal !important;
  margin-bottom: 10px !important; /* breathing room before pills line */
  padding: 6px 10px !important;   /* consistent with other fields */
}

/* Keep header title consistent too */
html.pdf-edit header h1[contenteditable="true"]{
  display: inline-block !important;
  max-width: 100% !important;
  width: fit-content !important;
  white-space: normal !important;
  padding: 6px 10px !important;
}


@media print {
  /* Nettoyage PDF fiches */
  header { display: none !important; }     /* cache la barre d’actions (Imprimer/Éditer/Fermer) */
  .editbar { display: none !important; }   /* cache les paramètres (checkbox + estimation + hint) */
}


/* Bouton flottant + Organiser */
.fab-add-object {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: #111;
    color: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 999;
}

.fab-add-object:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.fab-add-object:active {
    transform: scale(0.95);
}


/* === Fiche – Checkboxes propres (suppression bleu navigateur) === */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

input[type="checkbox"]:checked{
  background: var(--accent2);
  border-color: var(--accent2);
}

input[type="checkbox"]:checked::after{
  content:"";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  margin-top: -1px;
}

input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%);
}


/* Fix scroll mobile – modale Déplacer */
#move-modal{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#move-modal .sheet{
  max-height: 90vh;
  overflow-y: auto;
}


@media (max-width: 768px) {
  .chat-input {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: #ffffff;
    z-index: 5;
  }
}


/* ===== Harmonisation À propos & Contact ===== */

.section{
  max-width:1100px !important;
  margin:28px auto 0 !important;
  padding:0 18px !important;
}

.section .section-inner{
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:var(--shadow) !important;
  padding:20px 22px !important;
}

.section-about .section-inner::before{
  display:none !important;
}

.section-about .section-body{
  color:var(--muted) !important;
  font-size:16px !important;
  line-height:1.7 !important;
}

.section-contact .section-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  background:#fff !important;
}

.section-contact .contact-lead{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:16px !important;
}

.section-contact .contact-cta .btn{
  background:#fff !important;
  color:var(--navy) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
}

.section-contact .contact-cta .btn:hover{
  background:var(--beige) !important;
  transform:translateY(-1px);
}

@media (max-width:820px){
  .section-contact .section-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}


/* === FIX: chat composer mobile - textarea trop étroite === */
.chat-compose-row textarea{
  min-width: 0;
  flex: 1 1 auto;
}

.chat-compose-row .chat-attach-btn,
.chat-compose-row .chat-send-btn{
  flex: 0 0 auto;
  padding: 0 !important;
}

@media (max-width:640px){
  .chat-compose-row .chat-attach-btn,
  .chat-compose-row .chat-send-btn{
    padding: 0 !important;
  }
}


/* === PDF Edit Mode — Dotted field refinement === */

.print-edit-mode .editable-field,
.print-edit-mode .editable-inline,
.print-edit-mode .editable-block{
  border: 1.5px dashed rgba(181, 83, 52, 0.55);
  border-radius: 14px;
  padding: 6px 10px;
  background: rgba(181, 83, 52, 0.04);
  transition: border-color .2s ease, background .2s ease;
}

.print-edit-mode .editable-field:hover,
.print-edit-mode .editable-inline:hover,
.print-edit-mode .editable-block:hover{
  border-color: rgba(181, 83, 52, 0.85);
  background: rgba(181, 83, 52, 0.07);
}

.print-edit-mode .tag{
  border: 1px dashed rgba(181, 83, 52, 0.55);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(181, 83, 52, 0.05);
}


/* === PDF Edit Mode — prevent outline overlap on title & pills === */
/* NOTE: in this file, PDF edit mode = html.pdf-edit + [contenteditable="true"] */

html.pdf-edit [contenteditable="true"]{
  outline: 1.5px dashed rgba(181, 83, 52, 0.55) !important;
  outline-offset: 3px !important;         /* smaller so it feels tighter */
  border-radius: 14px !important;
  background: rgba(181, 83, 52, 0.04);    /* subtle field surface */
}

/* Hover / focus feedback */
html.pdf-edit [contenteditable="true"]:hover,
html.pdf-edit [contenteditable="true"]:focus{
  outline-color: rgba(181, 83, 52, 0.85) !important;
  background: rgba(181, 83, 52, 0.07);
}

/* IMPORTANT: title should wrap its content (not full-width),
   so the outline doesn't visually "cover" folder/subfolder pills below. */
html.pdf-edit main h2[contenteditable="true"]{
  display: inline-block !important;
  max-width: 100% !important;
  width: fit-content !important;
  white-space: normal !important;
  margin-bottom: 10px !important; /* breathing room before pills line */
  padding: 6px 10px !important;   /* consistent with other fields */
}

/* Keep header title consistent too */
html.pdf-edit header h1[contenteditable="true"]{
  display: inline-block !important;
  max-width: 100% !important;
  width: fit-content !important;
  white-space: normal !important;
  padding: 6px 10px !important;
}


@media print {
  /* Nettoyage PDF fiches */
  header { display: none !important; }     /* cache la barre d’actions (Imprimer/Éditer/Fermer) */
  .editbar { display: none !important; }   /* cache les paramètres (checkbox + estimation + hint) */
}


/* Bouton flottant + Organiser */
.fab-add-object {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: #111;
    color: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 999;
}

.fab-add-object:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.fab-add-object:active {
    transform: scale(0.95);
}


/* === Fiche – Checkboxes propres (suppression bleu navigateur) === */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

input[type="checkbox"]:checked{
  background: var(--accent2);
  border-color: var(--accent2);
}

input[type="checkbox"]:checked::after{
  content:"";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  margin-top: -1px;
}

input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent2), transparent 82%);
}


/* Fix scroll mobile – modale Déplacer */
#move-modal{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#move-modal .sheet{
  max-height: 90vh;
  overflow-y: auto;
}


@media (max-width: 768px) {
  .chat-input {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: #ffffff;
    z-index: 5;
  }
}


/* ===== Harmonisation À propos & Contact ===== */

.section{
  max-width:1100px !important;
  margin:28px auto 0 !important;
  padding:0 18px !important;
}

.section .section-inner{
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:var(--shadow) !important;
  padding:20px 22px !important;
}

.section-about .section-inner::before{
  display:none !important;
}

.section-about .section-body{
  color:var(--muted) !important;
  font-size:16px !important;
  line-height:1.7 !important;
}

.section-contact .section-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  background:#fff !important;
}

.section-contact .contact-lead{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:16px !important;
}

.section-contact .contact-cta .btn{
  background:#fff !important;
  color:var(--navy) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
}

.section-contact .contact-cta .btn:hover{
  background:var(--beige) !important;
  transform:translateY(-1px);
}

@media (max-width:820px){
  .section-contact .section-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}


/* === FIX: chat composer mobile - textarea trop étroite === */
.chat-compose-row textarea{
  min-width: 0;
  flex: 1 1 auto;
}

.chat-compose-row .chat-attach-btn,
.chat-compose-row .chat-send-btn{
  flex: 0 0 auto;
  padding: 0 !important;
}

@media (max-width:640px){
  .chat-compose-row .chat-attach-btn,
  .chat-compose-row .chat-send-btn{
    padding: 0 !important;
  }
}


/* === Patch (assainissement) : Boutons "Analyser" / "Fiche" dans l'historique — couleur Bernistian (teal) === */


#historyCard button.btn.primary[data-print],
#historyCard button.btn.primary[data-run-ai],
#historyTbody button.btn.primary[data-print],
#historyTbody button.btn.primary[data-run-ai]{
  background: var(--bern-teal) !important;
  border-color: color-mix(in oklab, var(--bern-teal), black 12%) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(8,107,109,.22) !important;
}
#historyCard button.btn.primary[data-print]:hover,
#historyCard button.btn.primary[data-run-ai]:hover,
#historyTbody button.btn.primary[data-print]:hover,
#historyTbody button.btn.primary[data-run-ai]:hover{
  filter: brightness(1.03) !important;
}
/* ============================================================
   Override: boutons principaux en BLEU MARINE (footer navy)
   Objectif: remplacer tous les verts/gradients sur les CTA
   (Analyse / Fiche / Affiner analyse / etc.) sans toucher
   aux boutons secondaires (ghost / outline).
   ============================================================ */


/* CTA principaux */
.btn.primary,
button.btn.primary,
a.btn.primary{
  background: var(--btn-primary) !important;
  border-color: color-mix(in oklab, var(--btn-primary), black 10%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--btn-primary), transparent 78%) !important;
}

/* Hover/active */
.btn.primary:hover,
button.btn.primary:hover,
a.btn.primary:hover{
  filter: brightness(1.05) !important;
  transform: translateY(-1px);
}
.btn.primary:active,
button.btn.primary:active,
a.btn.primary:active{
  transform: translateY(0px);
}

/* Focus ring cohérent */
.btn.primary:focus-visible,
button.btn.primary:focus-visible,
a.btn.primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--btn-primary), transparent 82%),
    0 12px 26px color-mix(in oklab, var(--btn-primary), transparent 78%) !important;
  border-color: color-mix(in oklab, var(--btn-primary), white 12%) !important;
}


/* ============================
   DATE FIELDS – Centered hints
   ============================ */

.hc-range .dateField{
  position: relative;
  flex: 1;
  min-width: 0;
}

.hc-range .dateField input{
  width: 100%;
}
/* Mobile: hide the gear icon next to "Filtres" in Historique (renders as emoji on iPhone) */
@media (max-width: 880px){
  #historyFiltersBtn > span[aria-hidden="true"]{ display:none !important; }
}


/* === PATCH: Chat buttons without circles (better centering) === */
.chat-compose {
  --chat-icon-size: 22px;
}

.chat-compose .chat-attach-btn{
  width:auto;
  height:auto;
  border:none;
  background:transparent;
  padding:0 6px;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.chat-compose .chat-send-btn{
  width:auto;
  height:auto;
  border:none;
  background:transparent;
  padding:0 6px;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* stabilize icon rendering */
.chat-compose .chat-attach-btn::before,
.chat-compose .chat-send-btn::before{
  transform: translateZ(0);
}


/* === PATCH: Organiser > Ajouter dossier : remove circle === */
.organiser .btn.icon,
.btn-add-folder{
  width:auto !important;
  height:auto !important;
  border-radius:10px !important;
  padding:6px 10px !important;
}

/* keep + icon visually centered */
.organiser .btn.icon svg,
.btn-add-folder svg{
  width:18px;
  height:18px;
}


/* === PATCH v2: Organiser (#organize-modal) add folder "+" button: no circle === */
#organize-modal .orgAddBtn{
  width:auto !important;
  height:auto !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  line-height:1 !important;
}

/* make the "+" look crisp */
#organize-modal .orgAddBtn{
  font-size:18px !important;
}


/* === UX Patch : Harmoniser "Enregistrer" (fiche de tri) avec le style "PDF" (teal) ===
   Objectif: éviter 2 CTA navy côte à côte (Enregistrer + Affiner l'analyse).
   - "Affiner l'analyse" reste en primary navy.
   - "PDF" (data-print) et "Enregistrer" (#triSave) passent en teal.
   Aucune logique JS modifiée.
*/
#triSave.btn.primary,
button#triSave.btn.primary{
  background: var(--bern-teal) !important;
  border-color: color-mix(in oklab, var(--bern-teal), black 12%) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(8,107,109,.22) !important;
}
#triSave.btn.primary:hover,
button#triSave.btn.primary:hover{
  filter: brightness(1.03) !important;
}

/* Garder le bouton PDF (historique) sur le même style */
#historyCard button.btn.primary[data-print],
#historyTbody button.btn.primary[data-print]{
  background: var(--bern-teal) !important;
  border-color: color-mix(in oklab, var(--bern-teal), black 12%) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(8,107,109,.22) !important;
}
#historyCard button.btn.primary[data-print]:hover,
#historyTbody button.btn.primary[data-print]:hover{
  filter: brightness(1.03) !important;
}

/* === KPI mobile : force pleine largeur, supprime min-height === */
@media (max-width: 640px){
  .kpi{ grid-template-columns: repeat(3, 1fr) !important; gap:6px !important; }
  .kpi .k{ min-height:0 !important; padding:14px 4px !important; }
  .kpi .k b{ font-size:clamp(11px,3.6vw,14px) !important; letter-spacing:-0.5px; white-space:nowrap; }
  .kpi .k:nth-child(4){ grid-column:1/-1 !important; padding:14px 16px !important; }
  .kpi .k:nth-child(4) b{ font-size:clamp(14px,4vw,17px) !important; }
}

/* === Livre de Police === */
.policeDialog{ max-width: 680px; width: 96vw; }
.policeBody{ display:flex; flex-direction:column; gap:0; max-height:68vh; overflow-y:auto; padding-right:4px; }
.policeSection{ padding:16px 0; border-bottom:1px solid var(--line); }
.policeSection:last-child{ border-bottom:none; }
.policeSectionTitle{ font-family:var(--font-head,Montserrat,sans-serif); font-size:13px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.policeGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.policeField{ display:flex; flex-direction:column; gap:4px; }
.policeField.full{ grid-column:1/-1; }
.policeField label{ font-size:12px; font-weight:600; color:var(--muted); }
.police-required{ color:#e05c3a; }
.police-history{ display:flex; flex-direction:column; gap:6px; }
.police-history-entry{ font-size:12px; color:var(--muted); background:var(--bg-alt,#f6f2e9); border-radius:8px; padding:6px 10px; font-family:monospace; }
.police-history-empty{ font-size:13px; color:var(--muted); font-style:italic; }
@media(max-width:560px){
  .policeGrid{ grid-template-columns:1fr; }
  .policeField.full{ grid-column:1; }
}

/* ============================================================
   UX REFRESH — Zone upload + boutons action
   ============================================================ */

/* --- cardHead : titre section Photos plus aéré --- */
.cardHead {
  padding: 20px 20px 14px;
  border-bottom: none;
}
.cardTitle {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}
.cardSub {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .01em;
}

/* --- Zone drop épurée --- */
.drop {
  border: 1.5px dashed rgba(192,97,74,.28) !important;
  background: linear-gradient(150deg, #fffdf8 0%, #fdf5ef 100%) !important;
  border-radius: 16px !important;
  min-height: 120px !important;
  transition: border-color .2s, background .2s !important;
}
.drop:hover, .drop.active {
  border-color: var(--accent) !important;
  background: rgba(8,107,109,.04) !important;
}
.drop > div > div:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.drop .hint {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 4px;
}

/* --- Boutons action bar --- */
.actions .bar {
  border-radius: 16px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(15,23,42,.08) !important;
}

/* Analyse — plus affirmé */
#go.btn.primary {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
}

/* Brouillon — discret */
#goLater.btn {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  border-color: rgba(15,23,42,.12) !important;
  background: transparent !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
}
#goLater.btn:hover {
  background: rgba(15,23,42,.04) !important;
  color: var(--navy) !important;
}

/* Réinitialiser — encore plus discret, texte seul */
#reset.btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
  opacity: .7;
}
#reset.btn:hover {
  opacity: 1;
  color: var(--accent2) !important;
  background: transparent !important;
}


/* ─── DROP ZONE DESKTOP REDESIGN ─── */
#dropZone {
  min-height: 160px;
  border: 2px dashed color-mix(in oklab, var(--accent2), transparent 42%);
  border-radius: 16px;
  background: linear-gradient(150deg, #fffdf8 0%, #fdf0e8 100%);
  transition: border-color .2s, background .2s, box-shadow .2s;
  cursor: pointer;
}
#dropZone:hover, #dropZone.active {
  border-color: var(--accent2);
  background: linear-gradient(160deg, #fff, color-mix(in oklab, var(--beige), #fff 40%));
  box-shadow: 0 6px 24px color-mix(in oklab, var(--accent2), transparent 85%);
}

.drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px;
}
.drop-icon {
  width: 40px;
  height: 40px;
  color: color-mix(in oklab, var(--accent2), var(--navy) 30%);
  opacity: .7;
  transition: opacity .2s, transform .2s;
}
#dropZone:hover .drop-icon, #dropZone.active .drop-icon {
  opacity: 1;
  transform: translateY(-2px);
}
.drop-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -.01em;
}
.drop-sub {
  font-size: 12px;
  color: var(--muted);
}

/* ─── BOUTON IMPORTER DESKTOP ─── */
@media (min-width: 641px) {
  #btnGallery.btn-import {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--accent2);
    border: 1.5px solid var(--accent2);
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: none;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
  }
  #btnGallery.btn-import:hover {
    background: color-mix(in oklab, var(--accent2), transparent 93%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in oklab, var(--accent2), transparent 82%);
  }
  #btnGallery.btn-import:active {
    transform: translateY(0);
    background: color-mix(in oklab, var(--accent2), transparent 88%);
  }
}

/* ─── Accessibilité ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── TOOLBAR INVENTAIRE ─── */
#historyCard .history-head-actions .btn,
#historyCard .history-head-actions .inv-btn {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border-width: 1px !important;
  width: auto !important;
  letter-spacing: .01em !important;
  color: var(--navy) !important;
  background: #fff !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  transition: background .13s, color .13s, border-color .13s, transform .1s !important;
}
@media (hover: hover) {
  #historyCard .history-head-actions .btn:hover,
  #historyCard .history-head-actions .inv-btn:hover {
    background: var(--beige) !important;
    border-color: color-mix(in oklab, var(--line), var(--navy) 12%) !important;
    transform: none !important;
  }
}

/* Secondaires : plus discrets */
#historyCard .inv-btn--muted {
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}
@media (hover: hover) {
  #historyCard .inv-btn--muted:hover {
    color: var(--navy) !important;
    background: var(--beige) !important;
    border-color: var(--line) !important;
  }
}

/* Options : encore plus léger */
#historyCard .inv-btn--ghost {
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  font-weight: 500 !important;
}
@media (hover: hover) {
  #historyCard .inv-btn--ghost:hover {
    color: var(--navy) !important;
    background: color-mix(in oklab, var(--beige), transparent 50%) !important;
  }
}

/* Séparateurs */
.inv-sep { display: none; }

#historyCard .history-head-actions {
  gap: 4px !important;
}

/* ─── BARRE DE RECHERCHE INVENTAIRE ─── */

/* Focus : anneau terracotta doux à la place du rectangle bleu */
.hc-search:focus-within {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent2), transparent 45%) !important;
  outline: none !important;
}
.hc-search input:focus {
  outline: none;
}

/* Croix native du type=search : style unifié */
#historySearch::-webkit-search-cancel-button,
#orgSearchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%239e8f7d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s;
}
#historySearch::-webkit-search-cancel-button:hover,
#orgSearchInput::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* ─── Suppression outline natif navigateur sur la recherche ─── */
#historySearch {
  outline: none !important;
  box-shadow: none !important;
}
#historySearch:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── ACTIONS TABLEAU INVENTAIRE — ligne unique compacte ─── */
.row-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  align-items: center !important;
}
.row-actions .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border-width: 1px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}
/* PDF : primary sobre */
.row-actions .btn.primary {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
.row-actions .btn.primary:hover {
  background: var(--navy-2) !important;
}
/* Autres : discrets */
.row-actions .btn:not(.primary) {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
.row-actions .btn:not(.primary):hover {
  background: var(--beige) !important;
  color: var(--navy) !important;
  border-color: color-mix(in oklab, var(--line), var(--navy) 15%) !important;
}
@media (max-width: 880px) {
  .row-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
}

/* ═══════════════════════════════
   FOOTER — styles uniques
   ═══════════════════════════════ */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  margin-top: 0;
}
.site-footer .f-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer .f-left {
  color: var(--muted);
  font-size: 13px;
}
.site-footer .f-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer .f-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s;
}
.site-footer .f-nav a:hover { color: var(--navy); }
.site-footer .f-nav .linklike,
.site-footer .linklike {
  border: none;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s;
}
.site-footer .f-nav .linklike:hover,
.site-footer .linklike:hover { color: var(--navy); }

/* Mobile */
@media (max-width: 640px) {
  .site-footer .f-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 20px 32px;
    gap: 16px;
  }
  .site-footer .f-left {
    margin: 0;
    text-align: center;
  }
  .site-footer .f-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 0;
  }
  .site-footer .f-nav a,
  .site-footer .f-nav .linklike,
  .site-footer .linklike {
    text-align: center;
    width: auto;
    display: block;
  }
}

/* ─── Masquer le trait header sur landing et about (mobile) ─── */
@media (max-width: 640px) {
  body > header::after {
    display: none !important;
  }
}

/* ─── Fond footer identique au body sur mobile ─── */
@media (max-width: 640px) {
  .site-footer {
    background: var(--bg) !important;
  }
}

/* ─── Safe area iOS : couvrir la zone sous la barre Safari ─── */
.site-footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 640px) {
  .site-footer .f-wrap {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── BURGER MENU : animation glissement depuis la droite ─── */

/* Fond sombre : fondu */
.panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.panel.open {
  opacity: 1;
  visibility: visible;
  display: block !important;
}

/* Panneau : glisse depuis la droite */
.panel .sheet {
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.panel.open .sheet {
  transform: translateX(0);
}

/* Liens : apparition en cascade */
.panel.open .sheet a,
.panel.open .sheet .linklike {
  opacity: 0;
  animation: menuItemIn .22s ease forwards;
}
.panel.open .sheet a:nth-child(1) { animation-delay: .12s; }
.panel.open .sheet a:nth-child(2) { animation-delay: .17s; }
.panel.open .sheet a:nth-child(3) { animation-delay: .22s; }
.panel.open .sheet a:nth-child(4) { animation-delay: .27s; }
.panel.open .sheet .linklike      { animation-delay: .32s; }

@keyframes menuItemIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── TOOLBAR INVENTAIRE : pas de focus-visible résiduel sur mobile ─── */
#historyCard .history-head-actions .inv-btn:focus-visible,
#historyCard .history-head-actions .btn:focus-visible {
  border-color: var(--line) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ─── TOOLBAR INVENTAIRE : désactive ripple + active résiduel sur mobile ─── */
#historyCard .history-head-actions .inv-btn,
#historyCard .history-head-actions .btn {
  -webkit-tap-highlight-color: transparent !important;
  overflow: visible !important;
}
#historyCard .history-head-actions .inv-btn::after,
#historyCard .history-head-actions .btn::after {
  display: none !important;
}
#historyCard .history-head-actions .inv-btn:active,
#historyCard .history-head-actions .btn:active {
  transform: none !important;
  box-shadow: none !important;
  background: var(--beige) !important;
}

/* ─── TOOLBAR INVENTAIRE : bloque hover résiduel iOS ─── */
#historyCard .history-head-actions .inv-btn.no-hover,
#historyCard .history-head-actions .btn.no-hover {
  background: transparent !important;
  border-color: transparent !important;
}
#historyCard .history-head-actions .inv-btn--muted.no-hover,
#historyCard .history-head-actions .inv-btn--ghost.no-hover {
  background: transparent !important;
  border-color: transparent !important;
}



/* === FIX définitif : modale Déplacer visible ===
   La classe générique .sheet sert aussi au menu mobile et lui applique:
   position:absolute + transform:translateY(-100%).
   Il faut donc neutraliser ces styles pour #move-modal .sheet.
*/
#move-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(15,23,42,.22) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px !important;
}

#move-modal .sheet{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transition: none !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  margin: 6vh auto !important;
  display: block !important;
  padding: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: var(--bg) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
}

@media (max-width: 640px){
  #move-modal{
    padding: 12px !important;
  }
  #move-modal .sheet{
    width: calc(100vw - 24px) !important;
    margin: 4vh auto !important;
    max-height: 90vh !important;
  }
}


/* =========================================================
   FIX — Modale "Dossiers / Organiser"
   ========================================================= */

/* empêcher .sheet de pousser la modale hors écran */
#organize-modal .orgSheet{
  transform: none !important;
  transition: none !important;
}

/* centrage propre de la modale */
#organize-modal{
  display:flex;
  align-items:center;
  justify-content:center;
}

#organize-modal .orgSheet{
  margin:0 !important;
}


/* ===== style id=filters-ux-v4 =====
   Pills une seule ligne, label + " : " + valeur, tout identique.
   ================================================ */

/* Respiration du conteneur */
#historyCard details.history-filters{
  padding: 14px 0 4px !important;
}
#historyCard details.history-filters .hc-filters{
  padding-top: 10px !important;
  padding-bottom: 14px !important;
  gap: 10px 12px !important;
}

/* Hauteur uniforme */
#historyCard .hc-filters .ms,
#historyCard .hc-filters select{
  height: 44px !important;
  border-radius: 14px !important;
}

/* Pills .ms : ligne unique, centré verticalement */
#historyCard .hc-filters .ms{
  padding: 0 18px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* Label */
#historyCard .hc-filters .ms-label{
  display: inline !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* " : " entre label et valeur */
#historyCard .hc-filters .ms-label::after{
  content: "\00a0:\00a0" !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}

/* Valeur */
#historyCard .hc-filters .ms-value{
  display: inline !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Selects natifs — même gabarit */
#historyCard .hc-filters select{
  padding: 0 14px 0 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}

/* Réinitialiser */
#historyCard .hc-reset{
  margin-top: 2px !important;
  font-size: 13px !important;
}

/* Mobile */
@media (max-width: 640px){
  #historyCard details.history-filters .hc-filters{
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
}

/* ===== QUICK ORGANIZE MODAL FIX ===== */
#quick-organize-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(15,23,42,.45) !important;
  z-index:10000 !important;
}

#quick-organize-modal.open{
  display:flex !important;
}

#quick-organize-modal .modal-card{
  width:min(520px,92vw) !important;
  background:#fff !important;
  border-radius:18px !important;
  padding:22px 24px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.18) !important;
}

/* Supprime l'espace blanc sous la recherche quand les filtres sont masqués */
#historyCard #historyFilters:not([open]) {
  padding: 0 !important;
  margin: 0 !important;
}