/*
  AutoSpotter — feuille de style partagée (refonte design du 11 septembre
  2026, alignée sur la maquette de référence fournie par l'utilisateur :
  vert économie + terracotta, Inter + IBM Plex Mono).

  Remplace les blocs <style> précédemment dupliqués dans chaque page
  (assets/index.html, models/*.html, segments/*.html) — un seul fichier,
  chargé partout, plutôt que 9 copies divergentes du même système.

  Garde les NOMS de variables déjà en usage (--color-*, --space-*,
  --radius-*, --text-*, --font-*) pour que rien côté HTML n'ait besoin de
  changer au-delà des classes ajoutées ; seules les VALEURS changent.
*/

/*
  Polices auto-hébergées (15/09/2026, audit de sécurité du 13/09/2026 §4 —
  RGPD : plus aucune requête vers fonts.googleapis.com ni fonts.gstatic.com,
  l'adresse IP des visiteurs n'est plus transmise à Google pour afficher le
  texte). Fichiers et licences dans assets/fonts/ :
  - Inter : sous-ensembles latin et latin-ext tels que servis par Google
    Fonts (police variable, graisses 400 à 800), licence SIL OFL 1.1 sans
    nom de police réservé (LICENSE-Inter.txt) ;
  - IBM Plex Mono : fichiers officiels complets d'IBM (@ibm/plex-mono 2.5.0),
    non modifiés — sa licence OFL réserve le nom « Plex », ce qui exclut
    d'héberger une version retouchée comme les sous-ensembles de Google
    (LICENSE-IBMPlexMono.txt).
*/
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root, [data-theme="light"] {
  --color-bg: #F6F5F0;
  --color-surface: #FFFFFF;
  --color-surface-2: #FBFBF9;
  --color-surface-offset: #F1EFE9;
  --color-divider: #E1E0D5;
  --color-border: #E1E0D5;
  --color-text: #181A16;
  --color-text-muted: #5C5F55;
  --color-text-faint: #9A9C93;
  --color-text-inverse: #F6F5F0;

  --color-primary: #2F5D45;
  --color-primary-hover: #20402F;
  --color-primary-highlight: #E4ECE6;

  --color-accent: #B25D3F;
  --color-accent-hover: #954B33;
  --color-accent-highlight: #F1E1D8;

  --color-warning: #8F6F27;
  --color-warning-highlight: #EAE1C4;
  --color-error: #a12c7b;
  --color-error-highlight: #e0ced7;
  --color-success: #3D6A52;
  --color-success-highlight: #E4ECE6;

  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(24,26,22,0.06);
  --shadow-md: 0 4px 16px rgba(24,26,22,0.08);

  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --content: 1160px;
}

[data-theme="dark"] {
  --color-bg: #14160F; --color-surface: #1B1E17; --color-surface-2: #20241B;
  --color-surface-offset: #20241B; --color-divider: #2B2F24; --color-border: #2B2F24;
  --color-text: #E7E6E0; --color-text-muted: #A2A498; --color-text-faint: #6E7166;
  --color-text-inverse: #14160F;
  --color-primary: #6FA383; --color-primary-hover: #8CBB9E; --color-primary-highlight: #24352B;
  --color-accent: #D68A69; --color-accent-hover: #E0A387; --color-accent-highlight: #3A2A22;
  --color-warning: #D3AE5C; --color-warning-highlight: #3A331E;
  --color-error: #d163a7; --color-error-highlight: #4c3d46;
  --color-success: #6FA383; --color-success-highlight: #24352B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{ font-family:var(--font-body); font-size:var(--text-base); color:var(--color-text); background:var(--color-bg); line-height:1.65; min-height:100dvh; }
a{ color:var(--color-primary); text-decoration:none; }
a:hover{ color:var(--color-primary-hover); }
img,svg{ display:block; max-width:100%; height:auto; }
button,input,select{ font:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
p,li{ text-wrap:pretty; }
.num{ font-family:var(--font-mono); font-weight:600; }
.wrap{ max-width:var(--content); margin:auto; padding:var(--space-8) var(--space-6); }

/* Header */
.header{ position:sticky; top:0; z-index:20; background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.header-inner{ max-width:var(--content); margin:auto; padding:var(--space-4) var(--space-6); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.logo{ display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--color-text); }
.logo svg{ color:var(--color-primary); }
.logo .brand-accent{ color:var(--color-accent); }
.nav{ display:flex; gap:var(--space-6); flex-wrap:wrap; }
.nav a{ font-size:var(--text-sm); font-weight:500; color:var(--color-text); }
.nav a.active{ color:var(--color-primary); font-weight:700; }
.nav a:hover{ color:var(--color-primary); }

/* Buttons */
.cta,.ghost,.btn-outline{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:var(--space-3) var(--space-5); border-radius:var(--radius-lg); font-weight:700; font-size:var(--text-sm); border:none; cursor:pointer; font-family:inherit; }
.cta{ background:var(--color-primary); color:#fff; }
.cta:hover{ color:#fff; background:var(--color-primary-hover); }
.cta.accent{ background:var(--color-accent); }
.cta.accent:hover{ background:var(--color-accent-hover); }
.ghost{ border:1px solid var(--color-border); background:transparent; color:var(--color-text); }
.btn-outline{ border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); min-height:auto; padding:var(--space-2) var(--space-4); }

.input{ min-height:44px; padding:var(--space-2) var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-family:inherit; font-size:var(--text-sm); }
.input:focus{ outline:2px solid var(--color-primary); outline-offset:1px; }

/* Hero */
.hero{ padding:var(--space-12) var(--space-6); background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.hero-inner{ max-width:var(--content); margin:auto; }
.badge{ display:inline-flex; align-items:center; gap:var(--space-2); background:var(--color-accent-highlight); color:var(--color-accent); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--space-4); }
.hero h1{ font-size:var(--text-2xl); margin-bottom:var(--space-3); max-width:16ch; }
.hero p{ font-size:var(--text-lg); color:var(--color-text-muted); max-width:72ch; }

/* Sections / cards */
.section{ margin-bottom:var(--space-10); }
.section-head{ margin-bottom:var(--space-6); }
.section-head p{ color:var(--color-text-muted); font-size:var(--text-sm); margin-top:var(--space-1); }
.section-head.row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.section-title{ display:flex; align-items:center; gap:var(--space-3); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-divider); margin-bottom:var(--space-5); }
.section-title .num{ font-family:var(--font-display); width:28px; height:28px; border-radius:9999px; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); font-weight:700; }
h2.section-h{ font-size:1.6rem; font-weight:800; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
.grid2{ display:grid; grid-template-columns:1.4fr .6fr; gap:var(--space-8); }
@media (max-width:900px){ .grid3,.grid2{ grid-template-columns:1fr; } }
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.card h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); }
.muted{ color:var(--color-text-muted); }
.small{ font-size:var(--text-sm); }

/* Situations (segments) grid — home + page dédiée */
.sit-card{ display:flex; flex-direction:column; gap:var(--space-2); }
.sit-swatch{ width:34px; height:34px; border-radius:8px; background:var(--color-primary-highlight); margin-bottom:var(--space-1); }
.sit-count{ font-size:var(--text-xs); color:var(--color-accent); font-weight:700; margin-top:var(--space-1); }

/* Listing / model cards */
.listing-card{ border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; background:var(--color-surface); display:flex; flex-direction:column; }
.listing-photo{ height:150px; background:var(--color-primary-highlight); position:relative; }
.listing-photo .badge-good,.listing-photo .badge-warn{ position:absolute; left:13px; top:13px; margin-bottom:0; }
.listing-body{ padding:var(--space-4) var(--space-5) var(--space-5); }
.listing-body h3{ font-size:1rem; font-weight:700; margin-bottom:2px; }
.listing-divider{ height:1px; background:var(--color-divider); margin:var(--space-3) 0; }
.price-label{ font-size:var(--text-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:2px; }
.price-value{ font-size:1.25rem; font-weight:700; }

.badge-good,.badge-warn{ font-size:var(--text-xs); font-weight:700; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); display:inline-block; }
.badge-good{ background:var(--color-success-highlight); color:var(--color-success); }
.badge-warn{ background:var(--color-warning-highlight); color:var(--color-warning); }

/* KPI tiles */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kpi{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-2); text-align:center; overflow-wrap:break-word; }
.kpi strong{ display:block; font-family:var(--font-mono); font-size:var(--text-xl); color:var(--color-primary); }
.kpi span{ display:block; overflow-wrap:break-word; }

/* Budget / TCO breakdown */
.budget-row{ display:flex; justify-content:space-between; padding:var(--space-2) 0; font-size:var(--text-sm); border-bottom:1px solid var(--color-divider); }
.budget-row.total{ border-bottom:none; padding-top:var(--space-3); font-weight:700; font-size:var(--text-base); }
.budget-bar{ display:flex; height:10px; border-radius:5px; overflow:hidden; margin:var(--space-4) 0 var(--space-1); }

/* Lists — .list est la liste "brute" que app.js émet (fmtList()) pour
   points forts / pièges / check-list ; .list-check/.checklist sont des
   variantes visuelles plus riches, réservées au HTML statique (page
   guide, futures fiches) qui contrôle lui-même ses puces. */
.list{ display:flex; flex-direction:column; gap:var(--space-2); padding-left:1.1rem; font-size:var(--text-sm); }
.list-check, .checklist{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); font-size:var(--text-sm); }
.list-check li, .checklist li{ display:flex; gap:var(--space-2); align-items:flex-start; }
.list-check .tick{ color:var(--color-success); font-weight:700; }
.checklist .box{ width:16px; height:16px; border:1.5px solid var(--color-text-muted); border-radius:4px; flex-shrink:0; margin-top:2px; }
.callout-warn{ background:var(--color-warning-highlight); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); }
.callout-warn li{ color:#4A3B12; }
[data-theme="dark"] .callout-warn li{ color:var(--color-text); }
.callout-warn .tick{ color:var(--color-warning); }

/* Alerte collector — classes émises telles quelles par assets/app.js
   (renderModelPage), jamais renommées côté JS pour ce passage design. */
.alert{ padding:var(--space-4); border-radius:var(--radius-lg); border:1px solid; display:flex; gap:var(--space-3); font-size:var(--text-sm); }
.alert.warning{ background:var(--color-warning-highlight); border-color:var(--color-warning); color:var(--color-text); }
[data-theme="dark"] .alert.warning{ color:var(--color-text); }

/* Verdict / comparison columns */
.verdict-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.verdict-col{ border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); }
.verdict-col.win{ border:2px solid var(--color-success); }
.verdict-col h4{ font-size:var(--text-sm); font-weight:700; margin-bottom:var(--space-1); }
.verdict-col p{ font-size:var(--text-sm); color:var(--color-text-muted); }
.note-neutral{ background:var(--color-bg); border:1px dashed var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-text-muted); }

/* Filters (segment / catalogue pages) */
.filters{ display:flex; gap:var(--space-2); margin-top:var(--space-4); flex-wrap:wrap; }
.chip{ border:1px solid var(--color-border); background:var(--color-surface); font-size:var(--text-sm); font-weight:500; padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); }
.chip.active{ border-color:var(--color-accent); background:var(--color-accent-highlight); color:var(--color-accent); font-weight:700; }

/* Table (comparateur, endpoints, etc.) */
.table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.table th,.table td{ padding:var(--space-3); border-bottom:1px solid var(--color-divider); text-align:left; vertical-align:top; }
.table th{ background:var(--color-surface-offset); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); }

.pill{ display:inline-flex; align-items:center; padding:.35rem .65rem; border-radius:9999px; background:var(--color-surface-offset); font-size:var(--text-xs); color:var(--color-text-muted); font-weight:700; }
.breadcrumb{ font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-4); }
.breadcrumb a{ color:var(--color-text-muted); }
.breadcrumb .current{ color:var(--color-text); font-weight:600; }

/* Footer */
.footer{ background:var(--color-primary-hover); color:var(--color-text-inverse); padding:var(--space-10) var(--space-6) var(--space-6); margin-top:var(--space-10); }
[data-theme="dark"] .footer{ background:#0E140F; }
.footer-inner{ max-width:var(--content); margin:auto; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-8); padding-bottom:var(--space-8); }
.footer-brand p{ font-size:var(--text-sm); color:#C3D0C8; margin-top:var(--space-2); max-width:240px; }
.footer-cols{ display:flex; gap:var(--space-10); flex-wrap:wrap; }
.footer-col h4{ font-size:var(--text-xs); font-weight:700; color:#D9E3DC; margin-bottom:var(--space-2); text-transform:uppercase; letter-spacing:.05em; }
.footer-col a{ display:block; font-size:var(--text-sm); color:#C3D0C8; margin-bottom:var(--space-2); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:var(--space-4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); font-size:var(--text-xs); color:#9FB0A5; }
.footer-simple{ border-top:1px solid var(--color-divider); padding:var(--space-8) var(--space-6); text-align:center; color:var(--color-text-muted); font-size:var(--text-xs); }

/* Loading skeletons (préexistant, conservé à l'identique) */
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
.skeleton{ background:linear-gradient(90deg,var(--color-surface-offset) 25%,var(--color-divider) 50%,var(--color-surface-offset) 75%); background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite; border-radius:var(--radius-sm); }
.skeleton-text{ height:1em; margin-bottom:var(--space-2); }
.skeleton-heading{ height:1.4em; width:50%; margin-bottom:var(--space-4); }

.api-count{ margin-top:var(--space-4); }