/* ============================================================================
   QuietMeta — design system
   No remote font, no remote asset: the page must render identically with the
   network switched off, exactly like the desktop build.
   ========================================================================= */

:root {
  /* Neutrals — warm slate, easier on the eye than pure grey */
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f5f7f9; --n-100:#eceff3; --n-200:#dde2e9;
  --n-300:#c3ccd6; --n-400:#94a1b0; --n-500:#6b7787; --n-600:#4e5865;
  --n-700:#39424e; --n-800:#242c36; --n-900:#151b22; --n-950:#0d1116;

  /* Accent — a calm mint. "Cleared", not "go" */
  --a-50:#e8faf3; --a-100:#c6f2e2; --a-300:#6bd9b4; --a-500:#10a37f;
  --a-600:#0a8467; --a-700:#0a6952;

  --amber-50:#fef6e7; --amber-500:#b7791f; --amber-600:#8f5f14;
  --rose-50:#fdeeee; --rose-500:#c53030; --rose-600:#9b2626;

  --bg: var(--n-25);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --line: var(--n-200);
  --line-soft: var(--n-100);
  --text: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --accent: var(--a-600);
  --accent-soft: var(--a-50);
  --accent-line: var(--a-100);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-sm: 0 1px 2px rgba(16,24,32,.05), 0 1px 3px rgba(16,24,32,.04);
  --shadow-md: 0 4px 12px rgba(16,24,32,.06), 0 2px 4px rgba(16,24,32,.04);
  --shadow-lg: 0 18px 40px rgba(16,24,32,.10), 0 4px 12px rgba(16,24,32,.05);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--n-950); --surface: var(--n-900); --surface-2: var(--n-800);
    --line: #2b333d; --line-soft: #222932;
    --text: var(--n-50); --text-2: var(--n-300); --text-3: var(--n-400);
    --accent: var(--a-300); --accent-soft: rgba(16,163,127,.12); --accent-line: rgba(16,163,127,.3);
    --amber-50: rgba(183,121,31,.14); --amber-500:#e0a33e;
    --rose-50: rgba(197,48,48,.14); --rose-500:#f08a8a;
    --shadow-sm:none; --shadow-md:none;
    --shadow-lg: 0 20px 50px rgba(0,0,0,.45);
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.022em; font-weight:650; }
p { margin:0; }
a { color: inherit; }

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem); }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display:flex; align-items:center; gap:1.5rem; height:60px; }
.logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:640; letter-spacing:-.02em; font-size:1.02rem; }
.logo svg { width:26px; height:26px; display:block; }
.logo span strong { font-weight:750; }
.nav-links { display:flex; gap:1.4rem; margin-left:auto; align-items:center; }
.nav-links a { text-decoration:none; color: var(--text-2); font-size:.9rem; font-weight:500; }
.nav-links a:hover { color: var(--text); }
@media (max-width:640px){ .nav-links a.hide-sm{display:none} }

/* --------------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid transparent; border-radius: var(--r-sm);
  padding:.62rem 1.05rem; font:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--n-900); color: var(--n-0); }
.btn-primary:hover { background: var(--n-800); }
@media (prefers-color-scheme: dark){ .btn-primary{background:var(--n-50);color:var(--n-950)} .btn-primary:hover{background:var(--n-0)} }
.btn-accent { background: var(--a-600); color:#fff; }
.btn-accent:hover { background: var(--a-700); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--n-300); }
.btn-quiet { background:transparent; color: var(--text-2); }
.btn-quiet:hover { color: var(--text); background: var(--surface-2); }
.btn-lg { padding:.8rem 1.4rem; font-size:.98rem; border-radius: var(--r-md); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn svg { width:16px; height:16px; }

/* ----------------------------------------------------------------- hero */
.hero { padding: clamp(2.5rem,7vw,4.5rem) 0 1.5rem; text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1.1rem;
  padding:.3rem .75rem; border-radius:99px; background: var(--accent-soft);
  border:1px solid var(--accent-line); color: var(--accent);
  font-size:.78rem; font-weight:600;
}
.eyebrow .dot { width:6px;height:6px;border-radius:50%;background:currentColor; }
.hero h1 { font-size: clamp(2rem,5.2vw,3.25rem); letter-spacing:-.035em; }
.hero h1 .soft { color: var(--text-3); }
.hero .lede { margin:1.1rem auto 0; max-width:56ch; color: var(--text-2); font-size:clamp(1rem,2vw,1.1rem); }

/* ------------------------------------------------------------- dropzone */
.dz-wrap { margin: 2.25rem 0 0; }
.dropzone {
  position:relative; display:grid; place-items:center;
  min-height: 260px; padding: 2rem 1.5rem;
  background: var(--surface); border:2px dashed var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  cursor:pointer; text-align:center;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.dropzone:hover,.dropzone:focus-visible { border-color: var(--a-500); box-shadow: var(--shadow-lg); outline:none; }
.dropzone.is-over { border-color: var(--a-500); background: var(--accent-soft); }
.dz-icon { width:52px;height:52px;color:var(--text-3);margin-bottom:.9rem }
.dropzone:hover .dz-icon { color: var(--a-500); }
.dz-title { font-size:1.15rem; font-weight:640; }
.dz-sub { margin-top:.35rem; color: var(--text-3); font-size:.88rem; }
.dz-formats { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; }
.fmt { padding:.15rem .5rem; border-radius:5px; background: var(--surface-2); border:1px solid var(--line-soft);
       font-family: var(--mono); font-size:.7rem; color: var(--text-3); letter-spacing:.02em; }
.dz-privacy { margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; color: var(--accent); font-size:.83rem; font-weight:560; }
.dz-privacy svg { width:15px;height:15px }

.trustrow { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; margin-top:1.5rem; color:var(--text-3); font-size:.83rem; }
.trustrow span { display:inline-flex; align-items:center; gap:.4rem; }
.trustrow svg { width:14px;height:14px;color:var(--accent) }

.status { min-height:1.4rem; margin-top:1rem; text-align:center; color: var(--text-3); font-size:.88rem; }

/* -------------------------------------------------------------- results */
.results { padding-bottom: 4rem; }
.verdict {
  margin: 2rem 0 1.5rem; padding: 1.5rem 1.6rem;
  border-radius: var(--r-lg); border:1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-md);
  display:grid; grid-template-columns: 92px 1fr; gap:1.3rem; align-items:center;
}
@media (max-width:560px){ .verdict{grid-template-columns:1fr} .verdict .thumb{display:none} }
.verdict .thumb {
  width:92px;height:92px;border-radius:var(--r-md);object-fit:cover;
  border:1px solid var(--line); background: var(--surface-2);
}
.verdict h2 { font-size:1.3rem; }
.verdict .sub { margin-top:.4rem; color: var(--text-2); font-size:.92rem; }
.verdict .file-meta { margin-top:.6rem; font-family:var(--mono); font-size:.75rem; color:var(--text-3); }

.section-label { margin: 2rem 0 .85rem; font-size:.78rem; font-weight:680; letter-spacing:.07em;
                 text-transform:uppercase; color: var(--text-3); }

.cards { display:grid; gap:.7rem; }
.card {
  border:1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding:1rem 1.15rem; box-shadow: var(--shadow-sm);
}
.card-head { display:flex; align-items:flex-start; gap:.7rem; }
.card-icon { flex:0 0 26px; width:26px;height:26px;border-radius:7px; display:grid;place-items:center; margin-top:1px; }
.card-icon svg { width:15px;height:15px }
.card h3 { font-size:.96rem; font-weight:620; }
.card .body { margin-top:.2rem; color: var(--text-2); font-size:.88rem; }
.card .limitation {
  display:block; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--line);
  color: var(--text-3); font-size:.81rem;
}
.lv-info .card-icon{background:var(--accent-soft);color:var(--accent)}
.lv-attention .card-icon{background:var(--amber-50);color:var(--amber-500)}
.lv-warning .card-icon{background:var(--amber-50);color:var(--amber-500)}
.lv-error .card-icon{background:var(--rose-50);color:var(--rose-500)}

.kv { margin:.85rem 0 0; display:grid; gap:.28rem; }
.kv div { display:grid; grid-template-columns: minmax(0,13rem) 1fr; gap:.75rem; font-size:.81rem; }
@media (max-width:560px){ .kv div{grid-template-columns:1fr;gap:.1rem} }
.kv dt { color: var(--text-3); font-family: var(--mono); font-size:.76rem; }
.kv dd { margin:0; word-break:break-word; font-family: var(--mono); font-size:.78rem; }

.gps-callout {
  margin-top:.85rem; padding:.75rem .9rem; border-radius: var(--r-sm);
  background: var(--rose-50); border:1px solid color-mix(in srgb,var(--rose-500) 22%, transparent);
  font-size:.84rem;
}
.gps-callout strong { color: var(--rose-500); }
.gps-coords { font-family:var(--mono); font-size:.82rem; margin-top:.2rem; display:block; }

/* ---------------------------------------------------------------- panel */
.panel { margin-top:1.6rem; border:1px solid var(--line); border-radius: var(--r-lg);
         background: var(--surface); padding:1.5rem 1.6rem; box-shadow: var(--shadow-md); }
.panel > h3 { font-size:1.12rem; }
.panel .panel-sub { margin-top:.35rem; color: var(--text-2); font-size:.89rem; max-width:64ch; }

.toggles { margin:1.25rem 0; display:grid; gap:.15rem; }
.toggle {
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:1rem;
  padding:.7rem .2rem; border-bottom:1px solid var(--line-soft); cursor:pointer;
}
.toggle:last-child{border-bottom:none}
.toggle.is-absent { opacity:.42; cursor:default; }
.toggle-text strong { display:block; font-size:.9rem; font-weight:580; }
.toggle-text em { display:block; font-style:normal; font-size:.79rem; color: var(--text-3); margin-top:.1rem; }

/* Les valeurs réelles qui vont disparaître, pas seulement leur décompte. */
.toggle-values { display:block; margin-top:.5rem; padding-left:.7rem; border-left:2px solid var(--line); }
.tv-line { display:grid; grid-template-columns:minmax(0,10rem) 1fr; gap:.6rem; padding:.1rem 0; }
@media (max-width:560px){ .tv-line{grid-template-columns:1fr;gap:0} }
.tv-line b { font-weight:500; font-family:var(--mono); font-size:.72rem; color:var(--text-3); }
.tv-line i { font-style:normal; font-family:var(--mono); font-size:.75rem; color:var(--text-2); word-break:break-word; }
.tv-more { display:block; margin-top:.2rem; font-size:.72rem; color:var(--text-3); }
.absent-note { margin:.9rem 0 0; font-size:.8rem; color:var(--text-3); }
.switch { position:relative; width:38px; height:22px; flex:none; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track { position:absolute; inset:0; background: var(--n-300); border-radius:99px; transition: background .18s; }
.switch .thumb { position:absolute; top:3px; left:3px; width:16px;height:16px; background:#fff; border-radius:50%;
                 box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.switch input:checked ~ .track { background: var(--a-600); }
.switch input:checked ~ .thumb { transform: translateX(16px); }
.switch input:disabled ~ .track { background: var(--n-200); }
.switch input:focus-visible ~ .track { outline:2px solid var(--a-500); outline-offset:2px; }

.gate { margin:1.1rem 0; padding:1rem 1.1rem; border-radius: var(--r-md);
        background: var(--amber-50); border:1px solid color-mix(in srgb,var(--amber-500) 30%, transparent); }
.gate .toggle { border:none; padding:0; }
.gate .toggle-text strong { color: var(--amber-600); }
@media (prefers-color-scheme: dark){ .gate .toggle-text strong{color:var(--amber-500)} }

.fineprint { margin-top:1rem; color: var(--text-3); font-size:.79rem; max-width:70ch; }

/* --------------------------------------------------------------- result */
.done-head { display:flex; align-items:center; gap:.8rem; }
.done-check { width:34px;height:34px;border-radius:50%;background:var(--a-600);color:#fff;display:grid;place-items:center;flex:none }
.done-check svg{width:19px;height:19px}
.facts { margin:1.1rem 0 0; display:grid; gap:.45rem; }
.fact { display:flex; gap:.6rem; align-items:flex-start; font-size:.87rem; color: var(--text-2); }
.fact svg { width:15px;height:15px;color:var(--accent);flex:none;margin-top:.22rem }

/* ------------------------------------------------------------- upsell */
.upsell {
  margin-top:1.6rem; border-radius: var(--r-lg); padding:1.75rem 1.8rem;
  background: linear-gradient(135deg, var(--n-900), var(--n-800));
  color: var(--n-50); box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark){ .upsell{background:linear-gradient(135deg,#1c2530,#141a21);border:1px solid var(--line)} }
.upsell h3 { font-size:1.25rem; color:#fff; }
.upsell p { margin-top:.5rem; color: var(--n-300); font-size:.92rem; max-width:58ch; }
.upsell-grid { margin:1.3rem 0 1.5rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem 1.6rem; }
.upsell-item { display:flex; gap:.6rem; align-items:flex-start; }
.upsell-item svg { width:17px;height:17px;color:var(--a-300);flex:none;margin-top:.18rem }
.upsell-item strong { display:block; font-size:.88rem; color:#fff; font-weight:580; }
.upsell-item span { display:block; font-size:.8rem; color: var(--n-400); }
.upsell .actions { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.upsell .price { color: var(--n-400); font-size:.83rem; }

/* --------------------------------------------------------------- ad slot */
/* Prepared, not enabled. See docs: revisit after a month of real traffic. */
.ad-slot { display:none; margin:2rem 0; min-height:90px; border:1px dashed var(--line);
           border-radius: var(--r-md); display:none; place-items:center; color:var(--text-3); font-size:.78rem; }
body[data-ads="on"] .ad-slot { display:grid; }

/* --------------------------------------------------------------- content */
.page { padding: 3rem 0 5rem; }
.page h1 { font-size: clamp(1.8rem,4vw,2.4rem); margin-bottom:.7rem; }
.page .updated { color: var(--text-3); font-size:.85rem; margin-bottom:2.2rem; }
.prose { max-width:70ch; }
.prose h2 { font-size:1.2rem; margin:2.2rem 0 .6rem; }
.prose h3 { font-size:1rem; margin:1.5rem 0 .4rem; }
.prose p, .prose li { color: var(--text-2); font-size:.93rem; }
.prose p + p { margin-top:.8rem; }
.prose ul { margin:.6rem 0; padding-left:1.2rem; }
.prose li { margin:.25rem 0; }
.prose strong { color: var(--text); font-weight:620; }
.prose a { color: var(--accent); }
.prose table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.86rem; }
.prose th,.prose td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); }
.prose th { color: var(--text-3); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.callout { margin:1.2rem 0; padding:1rem 1.15rem; border-radius:var(--r-md);
           background: var(--surface-2); border:1px solid var(--line); font-size:.89rem; color:var(--text-2); }

/* -------------------------------------------------------------- download */
.dl-hero { text-align:center; padding: 3rem 0 2rem; }
.dl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:2.5rem 0; }
.dl-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
           padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); }
.dl-card .ic { width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
               display:grid;place-items:center;margin-bottom:.85rem }
.dl-card .ic svg{width:19px;height:19px}
.dl-card h3 { font-size:1rem; margin-bottom:.35rem; }
.dl-card p { color: var(--text-2); font-size:.87rem; }

.compare { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem; }
.compare th,.compare td { padding:.75rem .9rem; border-bottom:1px solid var(--line); text-align:left; }
.compare thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.compare td.c { text-align:center; width:110px; }
.compare .yes { color: var(--accent); font-weight:700; }
.compare .no { color: var(--text-3); }

/* --------------------------------------------------------------- footer */
.footer { border-top:1px solid var(--line-soft); padding:2.5rem 0; margin-top:auto; background: var(--surface-2); }
.footer-in { display:grid; grid-template-columns: 1.4fr repeat(2,1fr); gap:2rem; }
@media (max-width:640px){ .footer-in{grid-template-columns:1fr 1fr} }
.footer h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-3); margin-bottom:.7rem; }
.footer a { display:block; text-decoration:none; color: var(--text-2); font-size:.87rem; padding:.16rem 0; }
.footer a:hover { color: var(--text); }
.footer .about { color: var(--text-3); font-size:.85rem; max-width:34ch; margin-top:.6rem; }
.footer-bottom { margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--line-soft);
                 display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
                 color: var(--text-3); font-size:.8rem; }

body { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; }

/* ----------------------------------------------------------------- gate */
.lock { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.lock-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
             border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow-lg); text-align:center; }
.lock-card h1 { font-size:1.25rem; margin-bottom:.4rem; }
.lock-card p { color:var(--text-2); font-size:.88rem; margin-bottom:1.4rem; }
.lock-card input { width:100%; padding:.7rem .85rem; border:1px solid var(--line); border-radius:var(--r-sm);
                   background:var(--bg); color:var(--text); font:inherit; font-size:.95rem; margin-bottom:.8rem; }
.lock-card input:focus { outline:2px solid var(--a-500); outline-offset:1px; border-color:transparent; }
.lock-err { color: var(--rose-500); font-size:.84rem; margin-bottom:.8rem; }

/* ------------------------------------------------------- consentement */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(16,24,32,.10);
}
.consent-in {
  max-width: var(--maxw); margin: 0 auto; padding: 1.1rem clamp(1rem,4vw,2rem);
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
}
@media (max-width: 760px) { .consent-in { grid-template-columns: 1fr; gap: .9rem; } }
.consent-text strong { display: block; font-size: .92rem; margin-bottom: .2rem; }
.consent-text p { color: var(--text-2); font-size: .84rem; max-width: 70ch; }
.consent-text a { color: var(--accent); }
/* Refuser doit peser autant qu'accepter : même taille, même rangée. */
.consent-actions { display: flex; gap: .6rem; }
.consent-actions .btn { min-width: 104px; }

/* Formats : séparer ce qu'on inspecte de ce qu'on sait nettoyer. */
.fmt-label { font-size: .7rem; color: var(--text-3); text-transform: uppercase;
             letter-spacing: .06em; margin-right: .15rem; align-self: center; }
.fmt-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.dz-legend { margin-top:.5rem; font-size:.73rem; color:var(--text-3); }

/* ------------------------------------------------------------------ hidden
   Le garde-fou qui manquait, et qui a coute trois defauts en une journee.

   L'attribut `hidden` du HTML n'est applique par le navigateur que via une
   regle de sa propre feuille, `[hidden] { display: none }`. La moindre
   declaration D'AUTEUR qui pose `display` sur le meme element l'emporte, par
   simple priorite de cascade — et l'element cache par le code reste VISIBLE.

   Ca s'est produit trois fois ici : un interrupteur en `display: grid`, un
   avertissement en `display: flex`, un bouton d'annulation en
   `display: inline-flex`. Aucun n'a produit d'erreur ; l'utilisateur voyait
   simplement un controle qui n'aurait pas du etre la, et pouvait cliquer
   dessus. Une regle globale coute une ligne et ferme la classe entiere. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- boutons
   Un bouton reste un bouton, meme au milieu d'un bloc de prose.

   `.prose a { color: var(--accent) }` (specificite 0,1,1) l'emportait sur
   `.btn-accent { color:#fff }` (0,1,0) : dans la section « Getting it » de la
   page de telechargement, le libelle du bouton d'achat devenait VERT SUR VERT,
   donc illisible. Le bouton paraissait vide.

   On remonte la specificite au lieu de bricoler un !important : ces regles
   valent 0,2,1 et gagnent sans ambiguite, dans la prose comme ailleurs. */
.prose a.btn-accent  { color:#fff; }
.prose a.btn-primary { color:#fff; }
.prose a.btn-outline { color: var(--text); }
.prose a.btn-quiet   { color: var(--text-2); }