/*! PromptForge — feuille de style unique, sans dépendance. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: dark;
  --bg: #0b0b10;
  --bg-glow: radial-gradient(1100px 520px at 18% -8%, rgba(139,123,255,.16), transparent 62%),
             radial-gradient(900px 480px at 92% 4%, rgba(55,214,214,.10), transparent 60%);
  --surface: #131319;
  --surface-2: #1a1a22;
  --surface-3: #22222c;
  --border: #272733;
  --border-strong: #3a3a4a;
  --text: #f3f3f7;
  --text-2: #a9a9b8;
  --muted: #838394;
  --accent: #8b7bff;
  --accent-hover: #9d90ff;
  --accent-ink: #0b0b10;
  --accent-soft: rgba(139,123,255,.15);
  --accent-2: #37d6d6;

  /* palette d'état, identique dans les deux thèmes */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.28);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
  /* Encres : la même couleur ne peut pas servir à la fois de fond et de texte.
     Ces variantes-ci sont calibrées pour être LUES sur le fond du thème, et
     atteignent toutes 4,6:1 au pire cas mesuré (texte sur pastille teintée).
     Les jetons sans suffixe restent réservés aux fonds et aux bordures. */
  --good-ink: #3fb950;
  --warning-ink: #d29922;
  --serious-ink: #ec835a;
  --critical-ink: #dc6f6f;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f4;
  --bg-glow: radial-gradient(1000px 480px at 15% -10%, rgba(91,70,229,.10), transparent 60%),
             radial-gradient(900px 460px at 95% 0%, rgba(20,160,160,.08), transparent 58%);
  --surface: #ffffff;
  --surface-2: #f4f4f1;
  --surface-3: #eaeae5;
  --border: #e3e3dd;
  --border-strong: #c9c9c1;
  --text: #14141a;
  --text-2: #55555f;
  --muted: #6d6d79;
  --accent: #5b46e5;
  --accent-hover: #4a35d6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91,70,229,.10);
  --accent-2: #0f9c9c;
  --shadow: 0 1px 2px rgba(20,20,26,.05), 0 10px 28px rgba(20,20,26,.07);
  --good-ink: #277231;
  --warning-ink: #815e15;
  --serious-ink: #ac3f14;
  --critical-ink: #b82c2c;
}


/* Texte grossi : un lecteur qui double la taille des caractères ne rétrécit
   pas sa fenêtre. Les seuils en pixels ne se déclenchent donc pas, et tout ce
   qui ne sait ni couper un mot ni passer à la ligne sort de l'écran. */
h1, h2, h3, h4, h5, h6, p, li, td, th, summary, label, dt, dd, figcaption,
.lede, .tag, .etiq, .verdict, .brand-text, .card, .card-top {
  overflow-wrap: break-word;
}
/* Césure. Là où le navigateur embarque un dictionnaire pour la langue
   déclarée par l'attribut lang, il coupe aux syllabes avec un trait d'union
   — « anonyme- / ment » au lieu de « anonymem / ent ». Là où il n'en a pas,
   cette ligne ne fait rien : vérifié, le Chromium de nos contrôles n'a pas
   de dictionnaire français et ne coupe rien de lui-même.

   C'est donc un bonus, pas une garantie. Ce qui est garanti, et mesuré, c'est
   la règle du dessus : overflow-wrap empêche le débordement dans tous les
   cas, avec ou sans dictionnaire. */
h1, h2, h3, .lede, p, li {
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Ni dans du code, ni dans un champ : une césure y changerait le sens. */
code, pre, kbd, samp, input, textarea, .mono, [class*="mono"] {
  -webkit-hyphens: none;
  hyphens: none;
}
.card-top { flex-wrap: wrap; }
.card-top > * { min-width: 0; }
.tag { max-width: 100%; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f7f7f4; --surface: #ffffff; --surface-2: #f4f4f1; --surface-3: #eaeae5;
    --border: #e3e3dd; --border-strong: #c9c9c1; --text: #14141a; --text-2: #55555f;
    --muted: #6d6d79; --accent: #5b46e5; --accent-hover: #4a35d6; --accent-ink: #ffffff;
    --accent-soft: rgba(91,70,229,.10); --accent-2: #0f9c9c;
    --shadow: 0 1px 2px rgba(20,20,26,.05), 0 10px 28px rgba(20,20,26,.07);
  }
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit gagner sur nos display: grid / flex. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-glow);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.02em; font-weight: 640; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.muted { color: var(--muted); font-size: .86rem; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(16px, (100vw - var(--maxw)) / 2);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
  min-width: 0;
}
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px; color: var(--accent-ink);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15;
  min-width: 0;
}
.brand-text strong { font-size: 1.02rem; letter-spacing: -.02em; }
.brand-text small { color: var(--muted); font-size: .74rem; }

.site-nav { display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.site-nav > a {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text-2); font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.site-nav > a:hover { background: var(--surface-2); color: var(--text); }
.nav-tools { display: flex; gap: 6px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border); }

.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  transition: border-color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .icon-sun { display: none; }
  :root:not([data-theme]) .icon-moon { display: block; }
}

@media (max-width: 760px) {
  /* Les liens passent sur une deuxième ligne au lieu d'être masqués : sans eux,
     les outils n'étaient atteignables depuis aucun téléphone. L'en-tête cesse
     d'être collant, sinon deux lignes mangeraient le haut de l'écran en
     permanence — il défile avec la page, comme le reste. */
  .site-header {
    position: static;
    flex-wrap: wrap;
    padding-left: 14px; padding-right: 14px; gap: 10px 12px;
  }
  .site-nav { flex-wrap: wrap; gap: 2px; width: 100%; }
  .site-nav > a { display: block; padding: 6px 10px; font-size: .85rem; }
  .nav-tools { margin-left: auto; padding-left: 10px; }
  .brand-text small { display: none; }
}

/* ----------------------------------------------------------------- hero */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 80px; }

.hero { padding: 64px 0 40px; max-width: 800px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--text-2); letter-spacing: .01em;
  border: 1px solid var(--border); background: var(--surface);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); max-width: 17ch; }
.hero .lede { margin-top: 18px; color: var(--text-2); font-size: 1.06rem; max-width: 62ch; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 30px 0 0; }
.hero-stats li {
  display: flex; align-items: baseline; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 999px; font-size: .84rem; color: var(--text-2);
}
.hero-stats b { font-size: 1.02rem; color: var(--text); }

/* ------------------------------------------------------------ workspace */
.workspace {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  scroll-margin-top: 90px;
}
@media (max-width: 1020px) { .workspace { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.composer { position: sticky; top: 88px; }
@media (max-width: 1020px) { .composer { position: static; } }

.panel-head h2 { font-size: 1.04rem; }
.panel-hint { color: var(--muted); font-size: .84rem; margin-top: 3px; }

.field-textarea { margin-top: 14px; }
textarea, input[type="text"], input[type="password"], input[type="url"], input[type="search"], select {
  width: 100%; padding: 11px 13px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s ease, background .15s ease;
}
textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
#request { font-size: 1rem; min-height: 132px; }
textarea:hover, input:hover, select:hover { border-color: var(--border-strong); }
textarea:focus, input:focus, select:focus { border-color: var(--accent); background: var(--surface); }
::placeholder { color: var(--muted); opacity: 1; }
select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; min-height: 24px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.chip-domain { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); background: var(--accent-soft); }

.composer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 17px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font-size: .9rem; font-weight: 560; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); flex: 1 1 auto;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-small { padding: 7px 12px; font-size: .82rem; }
.btn kbd {
  font-family: var(--mono); font-size: .72rem; padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}
@media (max-width: 480px) { .btn kbd { display: none; } }

.settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .78rem; color: var(--text-2); font-weight: 560; }

.advanced { margin-top: 14px; }
.advanced > summary {
  cursor: pointer; font-size: .85rem; color: var(--text-2); font-weight: 560;
  padding: 8px 10px; border-radius: 8px; background: var(--surface-2); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸"; font-size: .8em; transition: transform .15s ease; }
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced > summary:hover { background: var(--surface-3); color: var(--text); }
.advanced-body { display: grid; gap: 12px; padding-top: 14px; }

.toggles { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.switch { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--text-2); cursor: pointer; }
.switch input { appearance: none; width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(16px); background: var(--accent-ink); }
.switch input:checked + span { color: var(--text); }

/* -------------------------------------------------------------- result */
.result { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tab {
  border: 0; background: transparent; padding: 10px 16px; border-radius: 8px 8px 0 0;
  color: var(--text-2); font-size: .88rem; font-weight: 560; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); background: var(--surface); border-bottom-color: var(--accent); }

.tabpanel { display: none; padding: 16px 20px 20px; flex: 1 1 auto; min-width: 0; }
.tabpanel.is-active { display: block; }

.result-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.format-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.format-chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  padding: 5px 11px; border-radius: 999px; font-size: .79rem; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.format-chip:hover { color: var(--text); border-color: var(--border-strong); }
.format-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); }
.format-chip .rec { color: var(--accent); font-size: .9em; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.format-help { margin-top: 9px; min-height: 20px; }

.output-wrap { position: relative; margin-top: 12px; }
#output {
  margin: 0; padding: 18px; min-height: 340px; max-height: min(62vh, 700px); overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .845rem; line-height: 1.68;
  white-space: pre-wrap; word-break: break-word; tab-size: 2;
}
#output:empty { display: none; }
.empty-state {
  display: grid; place-content: center; text-align: center; gap: 8px;
  min-height: 340px; padding: 24px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}
.empty-state h3 { font-size: 1rem; }
.empty-state p { color: var(--muted); font-size: .88rem; max-width: 42ch; margin: 0 auto; }

/* ------------------------------------------------------------ analysis */
.score-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
  padding: 20px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.score-figure { display: flex; flex-direction: column; gap: 2px; }
.score-figure .value { font-size: 3.2rem; font-weight: 680; line-height: 1; letter-spacing: -.04em; }
.score-figure .label { font-size: .8rem; color: var(--muted); }
.score-arrow { color: var(--muted); font-size: 1.4rem; }
.score-figure.after .value { color: var(--good-ink); }
.score-grade {
  font-size: .78rem; padding: 3px 10px; border-radius: 999px; align-self: flex-start;
  border: 1px solid currentColor; font-weight: 600;
}
.grade-critical { color: var(--critical-ink); }
.grade-serious  { color: var(--serious-ink); }
.grade-warning  { color: var(--warning-ink); }
.grade-good     { color: var(--good-ink); }
.score-gain { margin-left: auto; text-align: right; }
.score-gain b { font-size: 1.5rem; color: var(--good-ink); }

.analysis-block { margin-top: 22px; }
.analysis-block > h3 { font-size: .93rem; margin-bottom: 4px; }
.analysis-block > p.muted { margin-bottom: 12px; }

.meters { display: grid; gap: 11px; margin-top: 12px; }
.meter { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(90px, 2fr) 40px; align-items: center; gap: 12px; }
.meter .name { font-size: .84rem; color: var(--text-2); }
.meter .track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--meter) 20%, var(--surface-3)); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--meter); min-width: 4px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
:root[data-theme="light"] .meter .fill { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.meter .val { font-family: var(--mono); font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.meter.is-critical { --meter: var(--critical); }
.meter.is-serious  { --meter: var(--serious); }
.meter.is-warning  { --meter: var(--warning); }
.meter.is-good     { --meter: var(--good); }
@media (max-width: 560px) { .meter { grid-template-columns: 1fr 44px; } .meter .track { grid-column: 1 / -1; order: 3; } }

.tips { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.tips li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: .87rem;
}
.tips .tip-tag { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }

.signal-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 12px; }
.signal { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.signal .k { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.signal .v { font-size: .87rem; margin-top: 3px; word-break: break-word; }

/* ------------------------------------------------------- history/library */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.section-head .lede { color: var(--text-2); margin-top: 6px; max-width: 60ch; font-size: .95rem; }

.history, .library, .method { margin-top: 72px; scroll-margin-top: 90px; }

.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.history-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.history-list li { min-width: 0; }
.history-list .h-text { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.history-list .h-req { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-list .h-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.filter {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 6px 13px; border-radius: 999px; font-size: .82rem; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover { color: var(--text); border-color: var(--border-strong); }
.filter[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); }
.search input { max-width: 260px; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow); }
.card .card-top { display: flex; align-items: center; gap: 9px; }
.card .card-icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: .95rem;
}
.card h3 { font-size: .96rem; }
.card p { color: var(--text-2); font-size: .85rem; }
.card .card-domain { font-size: .74rem; color: var(--muted); margin-top: auto; padding-top: 6px; }

.method-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.method-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.method-card .num { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.method-card h3 { font-size: .97rem; margin: 8px 0 6px; }
.method-card p { color: var(--text-2); font-size: .88rem; }

/* --------------------------------------------------------------- offres */
.offers { margin-top: 72px; scroll-margin-top: 90px; }

.offer-card { text-decoration: none; color: inherit; }
.offer-card.is-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--surface);
}
.offer-card .offer-note { color: var(--muted); font-size: .78rem; }
.offer-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.offer-price { font-size: .95rem; }
.offer-cta { color: var(--accent); font-size: .85rem; font-weight: 600; }
.offer-card:hover .offer-cta { text-decoration: underline; }

/* rappel de configuration — visible uniquement en local, jamais pour un visiteur */
.offers-setup {
  padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); display: grid; gap: 8px;
}
.offers-setup h3 { font-size: .97rem; }
.offers-setup p { color: var(--text-2); font-size: .88rem; }

/* --------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 80px;
  padding: 28px max(16px, (100vw - var(--maxw)) / 2);
  display: grid; gap: 6px; color: var(--text-2); font-size: .87rem;
}
.site-footer a { color: var(--accent); }

/* --------------------------------------------------------------- dialog */
.dialog {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0;
  background: var(--surface); color: var(--text);
  max-width: 540px; width: calc(100% - 32px); box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.dialog::backdrop { background: rgba(5,5,10,.62); backdrop-filter: blur(3px); }
.dialog-body { padding: 22px; display: grid; gap: 13px; }
.dialog-body h2 { font-size: 1.1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.warning {
  font-size: .8rem; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
}
.dialog-error {
  font-size: .84rem; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--critical) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--critical) 50%, var(--border));
  word-break: break-word;
}

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 60; padding: 11px 19px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); font-size: .88rem; font-weight: 540;
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media print {
  .site-header, .site-nav, .composer, .tabs, .result-toolbar, .library, .method, .history, .site-footer, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  #output { border: 0; background: #fff; max-height: none; }
}

/* ------------------------------------------------------ liste de diffusion */
.liste { margin-top: 72px; scroll-margin-top: 90px; }
.liste-box {
  padding: 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; gap: 13px; justify-items: start; max-width: 62ch;
}
.liste-box .btn-primary { text-decoration: none; }
.liste-direct {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .88rem;
}
.liste-direct code {
  font-family: var(--mono); font-size: .86rem; color: var(--text);
  padding: 5px 9px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  word-break: break-all;
}
.liste-honest, .liste-local { font-size: .84rem; line-height: 1.55; }
.liste-local { color: var(--muted); }