/* Juste — édition « Nocturne ». Dernière couche, commune à l'extension, à la page CV, à l'export et à l'appli mobile.
   Inspirée des landing pages horlogères haut de gamme : fond vert-noir profond, très grands titres larges dont la fin
   passe en gris, nom de la marque en filigrane, cartes arrondies avec un fin trait lumineux, boutons et étiquettes en pilule,
   score en jauge. Les couleurs restent celles de la marque : vert sapin, surligneur jaune, stylo rouge.
   Titres : Archivo (SIL Open Font License), embarquée — aucune ressource externe. */

@font-face {
  font-family: "Archivo Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-wdth-wght-normal.woff2") format("woff2-variations"), url("fonts/archivo-latin-wdth-wght-normal.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;
}

/* Jetons propres à l'édition (version claire : les sections blanches) */
:root {
  --display: "Archivo Display", var(--font);
  --rayon: 20px; --rayon-s: 12px;
  --texte-3: #a2aca7;
  --ghost: rgba(11, 15, 13, .045);
  --bord: #e1e7e3;
  --verre: linear-gradient(#fff, #fff);
  --lueur: #1f5a46;
  --btn-1-bg: #1f5a46; --btn-1-fg: #fff;
  --btn-2-bd: #c3cec8;
  --pill-on-bg: #0b0f0d; --pill-on-fg: #fff;
  --halo: none;
  --jauge-piste: #e1e7e3;
}
:root[data-theme="light"] { --fond: #f2f4f2; --papier: #fff; --papier-2: #f6f8f7; --texte: #0b0f0d; --texte-2: #56635d; }

/* Version sombre, par défaut à l'écran : vert-noir, accents menthe et surligneur */
@media screen {
  :root:not([data-theme="light"]) {
    --fond: #070b09; --papier: #0d1311; --papier-2: #131b18; --trait: #1c2723; --trait-fort: #2b3933;
    --texte: #f2f5f3; --texte-2: #97a7a0; --texte-3: #56655f;
    --sapin: #7fd1b0; --sapin-fonce: #a6e0c8; --sapin-clair: #10241c; --entete: rgba(7, 11, 9, .86);
    --surligneur: #ffe066; --surligneur-doux: #29230f; --surligneur-trait: #d8b23c; --surligneur-texte: #ffe9a0; --surligneur-plein: #f2c230;
    --stylo: #ff7d8f; --stylo-clair: #2a1117; --stylo-trait: #5c2531;
    --m-ok-mark: rgba(255, 224, 102, .28); --m-part-mark: rgba(255, 224, 102, .12);
    --ombre: none; --ombre-haute: 0 30px 60px -30px rgba(0, 0, 0, .9);
    --ghost: rgba(255, 255, 255, .03);
    --bord: rgba(255, 255, 255, .075);
    --verre: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    --lueur: #7fd1b0;
    --btn-1-bg: #ffe066; --btn-1-fg: #141100;
    --btn-2-bd: rgba(255, 255, 255, .24);
    --pill-on-bg: #f2f5f3; --pill-on-fg: #070b09;
    --halo: radial-gradient(95% 55% at 100% -8%, rgba(31, 90, 70, .55), transparent 68%), radial-gradient(70% 40% at -10% 35%, rgba(31, 90, 70, .2), transparent 70%);
    --jauge-piste: #1c2723;
    color-scheme: dark;
  }
  body { background: var(--halo), var(--fond) !important; background-repeat: no-repeat !important; background-size: 100% 900px, 100% 100%, auto !important; }
}

/* Titres larges ; la fin de la phrase passe en gris */
.hero-empty h1, .loading-copy h1, .loading h1, .job-title, .hero h1, .ob-hero h1, .workspace-intro h1 {
  font-family: var(--display) !important; font-stretch: 118%; font-weight: 760 !important; letter-spacing: -.035em !important; line-height: 1.02 !important;
}
.hero-empty h1 { font-size: 31px; max-width: 13ch; }
.ton { color: var(--texte-3); }
.score-label, .jury-title h3, .match-head h2, .errors h3, .qa h3, .persona h3, .card h2, .ob-card h2, .design-copy strong {
  font-family: var(--display) !important; font-stretch: 108%; letter-spacing: -.02em !important;
}
.score-num, .jury-score, .j-note b, .tab-count, .count { font-family: var(--display); font-stretch: 112%; }

/* Le nom en filigrane, derrière les titres d'accueil */
.hero-empty, .loading, .hero, .ob-hero, .workspace-intro { position: relative; isolation: isolate; overflow: hidden; }
.hero-empty::before, .loading::before, .hero::before, .ob-hero::before, .workspace-intro::before {
  content: "juste"; position: absolute; z-index: -1; left: -.04em; top: -.2em; pointer-events: none; white-space: nowrap;
  font: 820 clamp(96px, 34vw, 190px)/1 var(--display); font-stretch: 125%; letter-spacing: -.05em; color: var(--ghost);
}

/* En-tête : verre sombre, filet discret */
.top, .ob-top { background: var(--entete) !important; -webkit-backdrop-filter: saturate(140%) blur(14px) !important; backdrop-filter: saturate(140%) blur(14px) !important; border-bottom: 1px solid var(--bord) !important; }
.brand, .ob-brand { font-family: var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.icon-btn, .quota-pill, .new-analysis-command { border-radius: 999px !important; border-color: rgba(255, 255, 255, .22) !important; }

/* Boutons en pilule */
.btn, .toolbar button { border-radius: 999px !important; font-weight: 650; }
.btn-primary, .toolbar .primary { background: var(--btn-1-bg) !important; color: var(--btn-1-fg) !important; border-color: transparent !important; box-shadow: none !important; }
.btn-primary:not(:disabled):hover, .toolbar .primary:hover:not(:disabled) { background: var(--btn-1-bg) !important; color: var(--btn-1-fg) !important; filter: brightness(1.07); }
.btn-ghost, .toolbar button:not(.primary) { background: transparent !important; border: 1px solid var(--btn-2-bd) !important; color: var(--texte) !important; }
.btn-ghost:not(:disabled):hover, .toolbar button:not(.primary):hover:not(:disabled) { border-color: var(--texte) !important; color: var(--texte) !important; }
.btn-coral { background: var(--surligneur) !important; color: #141100 !important; border-color: transparent !important; }
#save.ready { box-shadow: 0 0 0 4px rgba(255, 224, 102, .25) !important; }
textarea, input[type="text"], input[type="email"], input[type="tel"], input:not([type]) { border-radius: 14px !important; background: var(--papier-2) !important; border-color: var(--trait-fort) !important; }
textarea:focus, input:focus { border-color: var(--sapin) !important; box-shadow: 0 0 0 3px rgba(127, 209, 176, .16) !important; }

/* Cartes : verre sombre arrondi, un fin trait lumineux sur le bord bas */
.card, .profile-tile, .score-wrap, .score-card, .persona, .item, .match, .qa, .guarantee, .jury-line, .ob-card, .ob-quality, .quality, .design-card, .design-option, .share-card, .upgrade-bar, .tip {
  background: linear-gradient(90deg, transparent, var(--lueur), transparent) 50% 100% / 64% 1px no-repeat, var(--verre), var(--papier) !important;
  border: 1px solid var(--bord) !important; border-radius: var(--rayon) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
.upgrade-bar { border-radius: 22px 22px 0 0 !important; }
.item.ecart, .item.gap, .jury-card, #profile-review, .tip { border-left: 1px solid var(--bord) !important; }
.item.ecart::before, .item.gap::before { content: ""; justify-self: start; width: 28px; height: 3px; border-radius: 999px; background: var(--surligneur-plein); }
.design-option:has(input:checked), .design-card:has(:checked) { border-color: var(--sapin) !important; box-shadow: inset 0 0 0 1px var(--sapin) !important; }
.drop { border-radius: var(--rayon) !important; background: var(--papier-2) !important; border-color: var(--trait-fort) !important; }

/* Étiquettes en pilule */
.mchip, .chips span, .pill, .tab-count, .count, .sev, .kw-state, .j-verdict, .qa-badge, .ob-checks span, .checks span, .ob-formats i { border-radius: 999px !important; }
.chips span { padding: 4px 11px !important; background: var(--papier-2) !important; border-color: var(--bord) !important; }
.match-bar { border-radius: 999px !important; height: 8px !important; overflow: hidden; }
.jd { border-radius: 999px !important; }

/* Onglets : une rangée de pilules, celle ouverte en blanc */
.tabs { display: flex !important; overflow-x: auto !important; scrollbar-width: none; gap: 4px !important; padding: 9px 10px !important; border-bottom: 1px solid var(--bord) !important; background: var(--entete) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs::-webkit-scrollbar { display: none; }
.view > * { min-width: 0; }
.tabs button { flex: 1 0 auto !important; min-height: 34px !important; padding: 5px 8px !important; border-radius: 999px !important; background: var(--papier-2) !important; border: 1px solid var(--bord) !important; color: var(--texte-2) !important; font-size: 12px !important; font-weight: 600 !important; gap: 4px !important; }
.tabs button.active { background: var(--pill-on-bg) !important; color: var(--pill-on-fg) !important; border-color: transparent !important; font-weight: 700 !important; }
.tabs button.active::after { display: none !important; }
.tabs .tab-count, .tabs .count { min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px !important; background: rgba(255, 255, 255, .07) !important; border: 0 !important; color: inherit !important; }
.tabs button.active .tab-count, .tabs button.active .count { background: rgba(0, 0, 0, .12) !important; }

/* Score : une jauge en demi-cercle, du vert sapin au surligneur */
.score-wrap, .score-card { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 4px !important; padding: 20px 18px 18px !important; }
.score-wrap > *, .score-card > * { grid-column: 1 / -1 !important; }
.score-caption { font-size: 12.5px !important; font-weight: 600 !important; color: var(--texte-2) !important; }
.score-orbit { position: relative !important; width: min(250px, 100%) !important; height: auto !important; margin-top: 4px; }
.score-orbit .ring.gauge { display: block !important; width: 100% !important; height: auto !important; transform: none !important; overflow: visible; }
.gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 163.36 400 !important; }
.gauge .track { stroke: var(--jauge-piste) !important; stroke-dashoffset: 0 !important; }
.gauge .bar { stroke: url(#gauge-grad) !important; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
:root:not([data-theme="light"]) .gauge .bar { filter: drop-shadow(0 0 5px rgba(127, 209, 176, .35)); }
.gauge-tick { stroke: var(--texte); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.score-num { position: absolute !important; inset: auto 0 -4px 0 !important; justify-content: center !important; background: none !important; padding: 0 !important; color: var(--texte); }
.score-num span { font-size: 58px !important; font-weight: 760; letter-spacing: -.05em; }
.score-num small { font-size: 22px !important; color: var(--texte-2) !important; font-weight: 600 !important; margin-left: 3px !important; }
.score-copy { justify-items: center; text-align: center; padding: 6px 0 0 !important; }
.score-label { font-size: 19px !important; font-weight: 760 !important; color: var(--texte) !important; }
#score-sub, #result-job, .resume { text-align: center !important; }
.score-scale { display: none !important; }
.score-disclaimer, .disclaimer { text-align: center; color: var(--texte-3) !important; }

/* Parcours en trois temps, en escalier */
.journey { gap: 8px !important; align-items: start; }
.journey li { border: 1px solid var(--bord) !important; border-radius: 16px; background: var(--papier); padding: 10px 11px !important; font-size: 12px !important; display: grid; gap: 2px; }
.journey li::before { content: counter(step, decimal-leading-zero) !important; font: 700 17px/1 var(--display); font-stretch: 115%; color: var(--texte-3); }
.journey li:nth-child(2) { margin-top: 10px; } .journey li:nth-child(3) { margin-top: 20px; }
.journey li.done::before { color: var(--sapin); }
.journey li.current { border-color: var(--surligneur-trait) !important; }
.journey li.current::before { color: var(--surligneur); }
:root[data-theme="light"] .journey li.current::before { color: #b48a00; }

/* Jury : grands chiffres, pastilles */
.jury-score { border-radius: 999px !important; width: 78px !important; height: 78px !important; background: var(--papier-2) !important; box-shadow: inset 0 0 0 1.5px var(--trait-fort), 0 0 24px -6px rgba(127, 209, 176, .35) !important; }
.jury-score b { font-size: 36px !important; letter-spacing: -.05em; }
.judge { border-radius: 18px !important; border-color: var(--bord) !important; background: var(--verre), var(--papier) !important; }
.j-num { border-radius: 999px !important; }
.jury-line { border-left: 1px solid var(--bord) !important; }

/* Erreurs : une liste numérotée « 01. » à filets fins, la gravité sur le numéro */
.err-group ol { gap: 0 !important; border-top: 1px solid var(--bord); }
.err { position: relative; background: none !important; border: 0 !important; border-bottom: 1px solid var(--bord) !important; border-radius: 0 !important; padding: 13px 4px 13px 44px !important; }
.err-n { position: absolute; left: 4px; top: 13px; font: 650 13px/1.35 var(--display); font-stretch: 110%; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.err-bloquant .err-n { color: var(--stylo); } .err-majeur .err-n { color: var(--surligneur-trait); }
.err strong { font-size: 13.5px !important; }

/* Page CV et onboarding */
.workspace-heading { background: var(--entete) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord) !important; }
.workspace-intro h1 { font-size: clamp(30px, 4vw, 44px) !important; max-width: 22ch !important; }
.ob-hero h1 { font-size: clamp(30px, 4vw, 44px) !important; }
.ob-step { border-radius: 999px !important; }
.ob-savebar, .sticky-bar { background: rgba(13, 19, 17, .86) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; border-top: 1px solid var(--bord) !important; }
:root[data-theme="light"] .ob-savebar, :root[data-theme="light"] .sticky-bar { background: rgba(255, 255, 255, .9) !important; }
.sticky-cta { background: linear-gradient(transparent, var(--fond) 30%) !important; border-top: 0 !important; }

@media (prefers-reduced-motion: reduce) { .gauge .bar { transition: none; } }
@media (max-width: 380px) { .tabs { gap: 3px !important; padding-inline: 8px !important; } .tabs button { padding: 5px 6px !important; } }
/* Le logo « L surligné » porte déjà ses coins arrondis */
.brand img, .ob-brand img, .workspace-heading .brand img { border-radius: 23% !important; box-shadow: none !important; }
/* Le nom « juste » en minuscules larges, comme le logo */
.brand, .ob-brand { text-transform: lowercase; letter-spacing: -.02em !important; font-stretch: 125% !important; font-weight: 800 !important; font-size: 18px !important; }