/* ============================================================
   LE FILON — feuille de style partagée
   Tokens, composants, fiche, frame iPhone
   ============================================================ */
:root{
  /* Roche — fonds sombres, warm anthracite */
  --ore:        #14110c;
  --ore-2:      #1b1710;
  --ore-3:      #221d14;
  --ore-4:      #2a2318;
  --line:       #332b1d;
  --line-soft:  #271f15;
  /* Filon — l'or */
  --gold:       #e2a92f;
  --gold-bright:#f4cd6e;
  --gold-deep:  #b07d22;
  --gold-glow:  rgba(226,169,47,0.20);
  /* Texte sur roche */
  --text:       #ece3d2;
  --mute:       #988c73;
  --faint:      #6c6151;
  /* Papier — la fiche / le document */
  --paper:      #efe6d2;
  --paper-2:    #e7ddc6;
  --paper-ink:  #181410;
  --paper-mute: #8a7d60;
  --paper-line: #d8caab;
  /* L'essai — échelle colorée faible → très fort */
  --lvl1:       #c64a2c;
  --lvl2:       #e08a2a;
  --lvl3:       #e0b22c;
  --lvl4:       #4fa06e;

  --serif: 'Spectral', Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*{ box-sizing:border-box; }
.gold{ color:var(--gold); }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }

/* ---------- signe & marque ---------- */
.gem{ display:inline-block; vertical-align:middle; }
.gem path{ stroke:var(--gold); stroke-width:1.4; fill:none; }
.gem .facet{ fill:var(--gold); opacity:0.16; stroke:none; }
.wordmark{ font-family:var(--mono); letter-spacing:0.4em; text-transform:uppercase; color:var(--text); font-weight:500; }

/* ---------- veine décorative ---------- */
.vein{ display:block; width:100%; height:18px; overflow:visible; }
.vein path{ fill:none; stroke:var(--gold); stroke-width:1.4; opacity:0.5; }
.vein circle{ fill:var(--gold); }

/* ---------- pills ---------- */
.pill{ font-family:var(--mono); font-size:11.5px; padding:7px 13px; border-radius:20px; border:1px solid var(--line); color:#b8ad97; background:transparent; cursor:pointer; transition:all .15s; }
.pill:hover{ border-color:var(--gold-deep); color:var(--text); }
.pill.on{ background:var(--gold); color:var(--ore); border-color:var(--gold); }

/* ---------- boutons ---------- */
.btn{ font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; padding:11px 19px; border-radius:5px; border:1px solid var(--gold); background:var(--gold); color:var(--ore); cursor:pointer; transition:all .15s; font-weight:500; }
.btn:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--gold-deep); color:var(--gold-bright); }
.btn.deep{ background:transparent; color:var(--gold); border-color:var(--gold-deep); }

/* ---------- badge de signal ---------- */
.sig{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#fff; padding:5px 11px; border-radius:3px; }
.sig.fort{ background:#3f8a55; } .sig.moyen{ background:#cf9128; } .sig.faible{ background:#c0512e; }

/* ============================================================
   LA FICHE — document reçu (réutilisée partout)
   ============================================================ */
.fiche{ background:var(--paper); color:var(--paper-ink); border:1px solid var(--gold-deep); }
.f-banner{ background:var(--ore); padding:13px 38px; display:flex; align-items:center; justify-content:space-between; }
.f-banner .b-brand{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold-bright); }
.f-banner .b-wk{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); }
.gem-sm{ width:15px; height:15px; }
.gem-sm path{ stroke:var(--gold-bright); stroke-width:1.6; fill:none; }
.gem-sm .facet{ fill:var(--gold-bright); opacity:0.2; stroke:none; }

.f-pad{ padding:34px 38px; }
.f-title{ font-family:var(--serif); font-weight:700; font-size:43px; line-height:1.04; letter-spacing:-0.015em; color:var(--paper-ink); margin:0 0 13px; }
.f-kicker{ display:inline-block; font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ore); background:var(--gold); padding:6px 12px; border-radius:3px; margin-bottom:26px; }
.f-sec{ margin-bottom:22px; }
.f-lbl{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.f-lbl::before{ content:""; width:8px; height:8px; background:var(--gold); display:inline-block; transform:rotate(45deg); flex:none; }
.f-body{ font-family:var(--serif); font-size:16.5px; line-height:1.6; color:#211c14; }
.f-body b{ font-weight:600; color:var(--paper-ink); }
.f-rule{ height:1px; background:var(--paper-line); margin:26px 0; border:0; }

.f-steps{ margin-top:12px; }
.f-step{ display:flex; gap:15px; align-items:baseline; margin-bottom:13px; }
.f-step:last-child{ margin-bottom:0; }
.f-step .n{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--gold-deep); min-width:28px; }

/* L'essai — cartes colorées */
.eval-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.eval-card{ padding:15px 14px 16px; border-top:3px solid var(--paper-line); }
.eval-card .ev-lbl{ font-family:var(--mono); font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-mute); }
.eval-card .ev-val{ font-family:var(--serif); font-weight:700; font-size:21px; line-height:1; margin:10px 0 13px; text-transform:capitalize; }
.eval-card .bars{ display:flex; gap:4px; margin:0; }
.eval-card .bars i{ flex:1; height:6px; border-radius:1px; background:var(--paper-2); }
.eval-card.lvl1{ background:rgba(198,74,44,0.10); border-color:var(--lvl1); } .eval-card.lvl1 .ev-val{ color:var(--lvl1); } .eval-card.lvl1 .bars i.on{ background:var(--lvl1); }
.eval-card.lvl2{ background:rgba(224,138,42,0.11); border-color:var(--lvl2); } .eval-card.lvl2 .ev-val{ color:#b56f1c; } .eval-card.lvl2 .bars i.on{ background:var(--lvl2); }
.eval-card.lvl3{ background:rgba(224,178,44,0.15); border-color:var(--lvl3); } .eval-card.lvl3 .ev-val{ color:#9a7a16; } .eval-card.lvl3 .bars i.on{ background:var(--lvl3); }
.eval-card.lvl4{ background:rgba(79,160,110,0.14); border-color:var(--lvl4); } .eval-card.lvl4 .ev-val{ color:#3f8a5e; } .eval-card.lvl4 .bars i.on{ background:var(--lvl4); }
.eval-legend{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:15px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-mute); }
.eval-legend i{ width:13px; height:6px; border-radius:1px; display:inline-block; }
.eval-legend i.lvl1{ background:var(--lvl1); } .eval-legend i.lvl2{ background:var(--lvl2); } .eval-legend i.lvl3{ background:var(--lvl3); } .eval-legend i.lvl4{ background:var(--lvl4); }

/* variantes */
.f-variants{ background:var(--paper-2); padding:18px 20px; }
.f-variants .v{ display:flex; gap:12px; align-items:baseline; margin-bottom:11px; }
.f-variants .v:last-child{ margin-bottom:0; }
.f-variants .vk{ font-family:var(--mono); font-weight:600; font-size:12px; color:var(--gold-deep); min-width:16px; }
.f-variants .vt{ font-family:var(--serif); font-size:14.5px; line-height:1.5; color:#3a342a; }

/* sources */
.f-sources{ margin-top:26px; }
.f-src{ display:block; font-family:var(--mono); font-size:11.5px; color:#6e5e3a; text-decoration:none; border-left:2px solid var(--gold); padding:3px 0 3px 11px; margin-bottom:8px; line-height:1.45; }
.f-src:hover{ color:var(--gold-deep); }
.f-src span{ font-size:10px; }

/* ============================================================
   FRAME IPHONE — App & Widgets
   ============================================================ */
.iphone{ width:390px; height:844px; background:#08080a; border-radius:56px; padding:13px; position:relative;
  box-shadow:0 60px 120px -45px rgba(0,0,0,0.85), 0 0 0 2px #2c2c30, 0 0 0 7px #050506; }
.iphone .screen{ width:100%; height:100%; border-radius:44px; overflow:hidden; position:relative; background:var(--ore); }
.di{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:120px; height:34px; background:#000; border-radius:20px; z-index:60; }
.statusbar{ position:relative; z-index:55; height:52px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 30px 7px; font-family:var(--mono); font-weight:600; font-size:14.5px; color:#fff; }
.statusbar .sb-right{ display:flex; align-items:center; gap:6px; }
.sb-bars{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.sb-bars i{ width:3px; background:#fff; border-radius:1px; }
.sb-bars i:nth-child(1){ height:4px; } .sb-bars i:nth-child(2){ height:6px; } .sb-bars i:nth-child(3){ height:8px; } .sb-bars i:nth-child(4){ height:11px; }
.sb-wifi{ width:15px; height:11px; border-radius:0 0 50% 50%/0 0 100% 100%; border:2px solid #fff; border-top:none; opacity:0.95; }
.sb-batt{ width:24px; height:12px; border:1.5px solid rgba(255,255,255,0.6); border-radius:3px; position:relative; }
.sb-batt::after{ content:""; position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:70%; background:#fff; border-radius:1px; }
.sb-batt::before{ content:""; position:absolute; right:-3px; top:3.5px; width:2px; height:5px; background:rgba(255,255,255,0.6); border-radius:0 1px 1px 0; }

/* scrollbars discrets */
.thin-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.thin-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.thin-scroll::-webkit-scrollbar-track{ background:transparent; }