/* ==========================================================================
   SYSTÈME WEB — ajouts post-maquettes (app + public). Tokens & esthétique
   hérités ci-dessus. Source de vérité : DESIGN.md. Rendu vivant : /styleguide.
   ========================================================================== */

/* Boutons (les maquettes étaient statiques : aucun bouton n'était défini) */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, filter .15s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.07); }
.btn-ghost { background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-danger { background:var(--bad); color:#fff; }
.btn-danger:hover { filter:brightness(1.07); }
.site-header .cta-group { display:flex; gap:10px; align-items:center; margin-left:14px; }
/* Sans la nav (masquée en prod), c'est le groupe d'actions qui est poussé à droite. */
.site-header .nav + .cta-group { margin-left:14px; }
.site-header .brand + .cta-group { margin-left:auto; }
/* Lien « Tarifs » toujours visible dans le groupe d'actions (même look que les liens de nav). */
.site-header .cta-group .nav-link {
  font-size:13px; font-weight:600; color:var(--muted); padding:6px 12px; border-radius:20px;
  transition:background .15s, color .15s;
}
.site-header .cta-group .nav-link:hover { background:var(--surface-2); color:var(--ink); }
.mobile-menu { display:none; }

/* ---- Shell APP : sidebar calme + contenu ---- */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.app-sidebar { background:var(--surface); border-right:1px solid var(--line); padding:16px 12px;
  display:flex; flex-direction:column; gap:2px; }
.app-sidebar .brand { padding:6px 10px 14px; color:var(--ink); text-decoration:none; }
.app-sidebar .brand:hover, .app-sidebar .brand:visited { color:var(--ink); text-decoration:none; }
.app-nav-label { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); padding:14px 10px 4px; }
.app-nav-heading { display:flex; align-items:center; justify-content:space-between; padding:14px 10px 4px;
  color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.app-nav-heading a { width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  color:var(--accent-ink); background:var(--accent-soft); text-decoration:none; font-size:18px;
  line-height:1; transition:filter .15s; }
.app-nav-heading a:hover { filter:brightness(.96); }
.app-nav-item { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:8px 10px; border-radius:var(--radius-sm); }
.app-nav-item > span:first-child { min-width:0; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.app-nav-item:hover { background:var(--surface-2); color:var(--ink); }
.app-nav-item.active { background:var(--accent-soft); color:var(--accent-ink); }
.app-nav-item .pill { font-size:12px; font-weight:700; }
.app-main { padding:28px 32px; max-width:1040px; }
.app-spacer { margin-top:auto; }
/* Sidebar app : pill de présence, bloc compte, pied (langue + déconnexion). */
.app-nav-item .pill { color:var(--faint); font-variant-numeric:tabular-nums; }
.app-nav-item.add { color:var(--accent-ink); }
.sidebar-quota { margin-top:4px; font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.sidebar-quota.is-out { color:var(--warn); }
.app-account-menu { position:relative; border-top:1px solid var(--line); padding-top:10px; margin-top:8px; }
.app-account-menu > summary { list-style:none; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; gap:9px; padding:8px; border-radius:var(--radius-sm); cursor:pointer; }
.app-account-menu > summary::-webkit-details-marker { display:none; }
.app-account-menu > summary:hover, .app-account-menu[open] > summary { background:var(--surface-2); }
.account-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:13px; font-weight:800; }
.account-meta { min-width:0; display:flex; flex-direction:column; }
.account-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.account-meta small { color:var(--muted); font-size:11.5px; font-weight:600; }
.account-meta .sidebar-quota { font-size:inherit; }
.account-chevron { color:var(--faint); transition:transform .15s; }
.app-account-menu[open] .account-chevron { transform:rotate(180deg); }
.account-popover { position:absolute; z-index:20; left:0; right:0; bottom:58px; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.account-email { padding:8px 10px 10px; color:var(--faint); font-size:11.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid var(--line); margin-bottom:4px; }
.account-popover > a, .account-popover button { display:block; width:100%; padding:8px 10px;
  border:0; border-radius:8px; background:transparent; color:var(--ink); text-decoration:none;
  text-align:left; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.account-popover > a:hover, .account-popover button:hover { background:var(--surface-2); }
.account-popover form { margin:0; }
.account-languages { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); margin-top:4px; }
.account-languages .lang-switch { margin:0; }

/* ---- Tableau de bord : priorités + portefeuille de radars ---- */
.dashboard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:24px; }
.dashboard-head h1 { margin:4px 0 4px; font-size:30px; line-height:1.2; letter-spacing:-.025em; }
.dashboard-head p:last-child { color:var(--muted); font-size:14px; }
.dashboard-summary { display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:28px; overflow:hidden; }
.dashboard-summary > div { min-width:0; flex:1; padding:17px 20px; border-right:1px solid var(--line); }
.dashboard-summary > div:last-child { border-right:0; }
.dashboard-summary strong { display:block; font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums; }
.dashboard-summary span { display:block; color:var(--muted); font-size:12px; margin-top:5px; }
.dashboard-section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.dashboard-section-head h2 { margin-top:3px; font-size:18px; letter-spacing:-.01em; }
.dashboard-count { min-width:25px; height:25px; display:grid; place-items:center; border-radius:20px;
  color:var(--warn); background:var(--warn-soft); font-size:12px; font-weight:800; }
.dashboard-attention { margin-bottom:30px; }
.attention-list { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.attention-list > a { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center;
  gap:12px; padding:13px 16px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.attention-list > a:last-child { border-bottom:0; }
.attention-list > a:hover { background:var(--surface-2); }
.attention-list strong, .attention-list small { display:block; }
.attention-list strong { font-size:13.5px; }
.attention-list small { margin-top:1px; color:var(--muted); font-size:12px; }
.attention-action { color:var(--accent-ink); font-size:12.5px; font-weight:700; }
.status-dot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--faint); }
.status-dot.ready, .status-dot.running { background:var(--good); }
.status-dot.warning, .status-dot.incomplete, .status-dot.new { background:var(--warn); }
.status-dot.failed { background:var(--bad); }
.dashboard-radar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dashboard-radar-card { display:flex; flex-direction:column; min-height:225px; padding:19px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.radar-card-top, .radar-card-title, .radar-card-foot { display:flex; align-items:center; }
.radar-card-top { justify-content:space-between; align-items:flex-start; gap:12px; }
.radar-card-title { min-width:0; gap:10px; }
.radar-card-title > div { min-width:0; }
.radar-card-title h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.radar-card-title p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.status-label { flex:none; padding:4px 8px; border-radius:20px; background:var(--surface-2);
  color:var(--muted); font-size:10.5px; font-weight:700; }
.status-label.ready, .status-label.running { color:var(--good); background:var(--good-soft); }
.status-label.warning, .status-label.incomplete, .status-label.new { color:var(--warn); background:var(--warn-soft); }
.status-label.failed { color:var(--bad); background:var(--bad-soft); }
.radar-card-metric { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  min-height:95px; padding:22px 0 18px; }
.radar-card-metric > div > span { display:block; color:var(--muted); font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; }
.radar-card-metric strong { display:block; margin-top:3px; font-size:32px; line-height:1; font-variant-numeric:tabular-nums; }
.radar-card-metric strong small { color:var(--faint); font-size:13px; font-weight:600; }
.radar-card-metric .observatory-metric { min-width:0; }
.radar-card-metric .observatory-metric strong { overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:19px; line-height:1.25; }
.radar-card-metric .observatory-score { flex:none; color:var(--ink); font-size:28px;
  font-weight:800; font-variant-numeric:tabular-nums; }
.radar-card-metric .observatory-score small { color:var(--faint); font-size:13px; }
.radar-card-metric .rc-trend { display:flex; align-items:center; gap:7px; padding-bottom:2px; }
.radar-card-placeholder { color:var(--muted); font-size:13px; }
.radar-card-foot { justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid var(--line); }
.radar-card-foot > span { color:var(--faint); font-size:11.5px; }
.radar-card-foot a { flex:none; color:var(--accent-ink); font-size:12.5px; font-weight:700; text-decoration:none; }
.dashboard-empty { max-width:620px; padding:56px 48px; margin-top:28px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.dashboard-empty h2 { margin:5px 0 8px; font-size:22px; }
.dashboard-empty > p:not(.sec-kicker) { max-width:48ch; margin:0 auto 20px; color:var(--muted); font-size:14px; }
.empty-visual { display:flex; align-items:flex-end; justify-content:center; gap:6px; height:42px; margin-bottom:18px; }
.empty-visual span { width:10px; border-radius:4px 4px 2px 2px; background:var(--accent-soft); }
.empty-visual span:nth-child(1) { height:17px; }.empty-visual span:nth-child(2) { height:30px; background:var(--accent); }.empty-visual span:nth-child(3) { height:23px; }

/* ---- Carte radar (liste / accueil app) ---- */
.radar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; }
.radar-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block;
  transition:border-color .15s; }
.radar-card:hover { border-color:var(--accent); }
.radar-card .rc-name { font-size:15px; font-weight:700; }
.radar-card .rc-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.radar-card .rc-score { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.rc-trend { font-size:13px; font-weight:700; }
.rc-trend.up { color:var(--good); } .rc-trend.down { color:var(--bad); } .rc-trend.flat { color:var(--faint); }

/* ---- Sparkline ---- */
.spark { display:inline-block; vertical-align:middle; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }

/* ---- Mesure en cours (run timeline + coût live) ---- */
.run { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); }
.run-steps { display:flex; margin:20px 0 16px; }
.run-step { flex:1; text-align:center; position:relative; font-size:12.5px; color:var(--muted); }
.run-step .dot { width:16px; height:16px; border-radius:50%; background:var(--line);
  margin:0 auto 8px; position:relative; z-index:1; }
.run-step.done .dot { background:var(--good); }
.run-step.active .dot { background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.run-step::before { content:""; position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--line); }
.run-step:first-child::before { display:none; }
.run-step.done::before, .run-step.active::before { background:var(--good); }
.run-models { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); margin:8px 0 16px; }
.run-cost { display:flex; justify-content:space-between; font-size:13px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:14px; }
.run-cost b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- "Ce qui a bougé" (monitoring) ---- */
.changed { display:flex; flex-direction:column; gap:10px; }
.changed-row { display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:baseline; font-size:14px; }
.changed-row .ar { font-weight:800; }
.changed-row.up .ar { color:var(--good); } .changed-row.down .ar { color:var(--bad); } .changed-row.flat .ar { color:var(--faint); }
.changed-row .val { font-variant-numeric:tabular-nums; color:var(--muted); }

/* ---- État vide (chaleur + action principale) ---- */
.empty { text-align:center; padding:40px 20px; max-width:520px; margin:0 auto; }
.empty h3 { font-size:18px; margin-bottom:8px; }
.empty p { color:var(--muted); margin-bottom:18px; }

/* ---- Public : observatoire (classement AEO-friendly) ---- */
.ranking { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ranking th, .ranking td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.ranking tr:last-child td { border-bottom:none; }
.ranking th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.ranking td.rank { font-weight:800; color:var(--accent-ink); width:44px; }
.ranking td.num { text-align:right; font-variant-numeric:tabular-nums; }
.methodo { font-size:13px; color:var(--muted); background:var(--surface-2);
  border:1px dashed var(--line); border-radius:12px; padding:14px 16px; }
.claim-cta { background:var(--accent-soft); border-radius:var(--radius); padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.claim-cta p { color:var(--accent-ink); font-weight:600; }

/* ---- Badge embeddable ---- */
.badge-embed { display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13px; box-shadow:var(--shadow); }
.badge-embed .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); }
.badge-embed b { font-variant-numeric:tabular-nums; }

/* ---- Page /styleguide (dev) ---- */
.sg-section { padding:30px 0; border-bottom:1px solid var(--line); }
.sg-section > h2 { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:18px; }
.swatches { display:flex; flex-wrap:wrap; gap:14px; }
.swatch { width:118px; font-size:12px; }
.swatch .chip-color { height:46px; border-radius:10px; border:1px solid var(--line); margin-bottom:6px; }
.swatch code { font-size:11px; color:var(--muted); }
.sg-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---- Responsive app : la sidebar devient une barre supérieure compacte ---- */
@media (max-width:820px) {
  .app { grid-template-columns:1fr; }
  .app-sidebar { flex-direction:row; align-items:center; flex-wrap:nowrap; gap:4px;
    overflow-x:auto; padding:8px 10px;
    border-right:none; border-bottom:1px solid var(--line); }
  /* En ligne, chaque item garde sa taille : sinon le bloc compte (email + word-break)
     s'effondre à quelques px de large et s'empile sur des centaines de px de haut. */
  .app-sidebar > * { flex:none; }
  .app-sidebar .brand { padding:6px 8px; white-space:nowrap; }
  .app-nav-item { white-space:nowrap; padding:8px 10px; }
  /* En barre : label de section, ressort et bloc compte (email) n'ont pas leur place. */
  .app-sidebar .app-nav-label, .app-sidebar .app-nav-heading, .app-spacer { display:none; }
  .app-account-menu { border:0; padding:0; margin:0; }
  .app-account-menu > summary { grid-template-columns:34px; padding:5px; }
  .app-account-menu .account-meta, .app-account-menu .account-chevron { display:none; }
  .account-popover { position:fixed; left:12px; right:12px; top:64px; bottom:auto; }
  /* Marges latérales resserrées : 64px de padding mangent un écran de 390px. */
  .app-main { padding:20px 16px; }
  .dashboard-head { align-items:center; }
  .dashboard-summary { display:grid; grid-template-columns:1fr 1fr; }
  .dashboard-summary > div { border-bottom:1px solid var(--line); }
  .dashboard-radar-grid { grid-template-columns:1fr; }
}

@media (max-width:560px) {
  .dashboard-head { align-items:flex-start; flex-direction:column; }
  .dashboard-head .btn { width:100%; justify-content:center; }
  .dashboard-summary > div { padding:14px 16px; }
  .attention-action { font-size:0; }
  .attention-action span { font-size:16px; }
  .radar-card-top { flex-direction:column; }
  .dashboard-empty { padding:40px 22px; }
}

/* ---- Responsive : contenu de rapport sur petit écran (app + page publique) ---- */
@media (max-width:560px) {
  .wrap { padding:0 16px; }
  section.block { padding:28px 0; }
  .card { padding:18px 16px; }
}

/* Navigation publique compacte : le header desktop ne doit jamais imposer sa largeur au viewport. */
@media (max-width:820px) {
  .site-header .wrap { height:60px; gap:12px; position:relative; }
  .site-header .nav, .site-header .cta-group { display:none; }
  .site-header .brand { min-width:0; }
  .mobile-menu { display:block; margin-left:auto; }
  .mobile-menu > summary {
    min-width:44px; min-height:44px; display:grid; place-items:center; cursor:pointer;
    list-style:none; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--ink); font-size:13px; font-weight:700;
  }
  .mobile-menu > summary::-webkit-details-marker { display:none; }
  .mobile-menu[open] > summary { background:var(--accent-soft); color:var(--accent-ink); }
  .mobile-menu-panel {
    position:absolute; top:60px; left:0; right:0; padding:12px 16px 16px;
    background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .mobile-menu-panel nav { display:flex; flex-direction:column; }
  .mobile-menu-panel nav a {
    padding:11px 4px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:650;
    border-bottom:1px solid var(--line);
  }
  .mobile-menu-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:14px; }
  .mobile-menu-foot .lang-switch { margin-right:auto; }
}

/* Polish : le brand est un lien — pas de soulignement, couleur d'encre. */
.site-header .brand { color: var(--ink); text-decoration: none; }
.site-header .nav a, .site-header .cta-group a { text-decoration: none; }

/* ── Auth (Phase 1) : formulaires inscription / connexion ─────────────────── */
.auth-wrap { display:flex; justify-content:center; }
.auth-card { width:100%; max-width:420px; }
.form { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field > span { font-size:13px; font-weight:600; color:var(--muted); }
.field input, .field textarea, .field select {
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; outline:none;
  width:100%; box-sizing:border-box; }
.field textarea { resize:vertical; line-height:1.5; min-height:44px; }
/* Carte d'édition (ex. moments) : rythme vertical régulier entre les groupes de champs. */
.moment { display:flex; flex-direction:column; gap:14px; }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); opacity:.7; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.form .btn { margin-top:4px; justify-content:center; }
.form-error { background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad);
  border:1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; margin-bottom:6px; }
.form-ok { background:color-mix(in srgb, var(--good) 10%, transparent); color:var(--good);
  border:1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; margin-bottom:6px; }
.form-alt { margin-top:16px; font-size:13px; color:var(--muted); }
.form-alt a { color:var(--accent); font-weight:600; }
/* Acceptation des CGV : case alignée sur la première ligne du libellé (le texte passe sur 2-3
   lignes), zone de clic = tout le libellé (c'est un <label>). */
.field-check { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted);
  line-height:1.5; cursor:pointer; }
.field-check input { margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.field-check a { color:var(--accent); font-weight:600; }
/* Mention légale sous le bouton Google (acceptation sans formulaire). */
.form-legal { margin-top:10px; font-size:12px; color:var(--faint); line-height:1.5; text-align:center; }
.form-legal a { color:var(--muted); text-decoration:underline; }

/* Bannière « confirmez votre email » (EMAILS.md Inc 1) — sur toutes les pages app tant que non vérifié. */
.verify-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:14px; margin-bottom:18px; }
.verify-banner form { margin:0; }
.verify-banner-btn { background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent); font-weight:600; font-size:14px; text-decoration:underline; }

/* Séparateur « ou » (entre le formulaire mot de passe et le bouton Google). */
.or-sep { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.or-sep::before, .or-sep::after { content:""; flex:1; height:1px; background:var(--line); }
/* Bouton Google : ghost pleine largeur, logo G multicolore à gauche. */
.btn-google { width:100%; justify-content:center; }
.btn-google .g-logo { flex:none; }

/* ── Saisie à puces (concurrents) + cases de langue ───────────────────────── */
.chips-edit { display:flex; flex-wrap:wrap; gap:8px; align-items:center; cursor:text;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; background:var(--surface); }
.chips-edit:focus-within { border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.chip-tag { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:20px; padding:4px 6px 4px 12px; }
.chip-tag .chip-x { border:none; background:transparent; color:var(--accent-ink); cursor:pointer;
  font-size:16px; line-height:1; padding:0 2px; border-radius:50%; }
.chip-tag .chip-x:hover { background:color-mix(in srgb, var(--accent) 22%, transparent); }
/* L'input de saisie ne suit PAS le style large `.field input` (pas de bordure, largeur auto). */
.chips-edit .chip-add { flex:1; min-width:140px; width:auto; border:none; box-shadow:none;
  padding:4px; background:transparent; }
.chips-edit .chip-add:focus { border:none; box-shadow:none; }

.lang-choices { display:flex; flex-wrap:wrap; gap:10px; }
.lang-choice { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 14px; background:var(--surface);
  transition:border-color .12s, background .12s; }
.lang-choice input { width:auto; }
.lang-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft);
  color:var(--accent-ink); font-weight:600; }

/* Choix du panel de modèles sondés (eco | flagship) — cartes radio empilées */
.tier-choices { display:flex; flex-direction:column; gap:10px; }
.tier-choice { display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  background:var(--surface); transition:border-color .12s, background .12s; }
.tier-choice input { width:auto; margin-top:3px; }
.tier-choice .tier-body { display:flex; flex-direction:column; gap:2px; }
.tier-choice .tier-body small { font-weight:400; color:var(--muted); line-height:1.45; }
.tier-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.tier-choice:has(input:checked) strong { color:var(--accent-ink); }
.tier-warning { display:block; margin-top:8px; color:var(--warn); }

/* ── Onglet Enjeux : éditeur de moments ───────────────────────────────────── */
.moments-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.moments-list { display:flex; flex-direction:column; gap:12px; margin:8px 0 4px; }
.moment.card { padding:16px 18px; border-left:3px solid var(--accent-soft);
  transition:border-color .12s, box-shadow .12s; }
.moment.card:hover { border-left-color:var(--accent); }
.moment .m-head { display:flex; align-items:flex-start; gap:14px; }
.m-index { flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-ink); font-weight:800; font-size:13px; display:grid; place-items:center;
  font-variant-numeric:tabular-nums; margin-top:1px; }
.m-body { flex:1; min-width:0; }
/* Angle que sert la situation (lien Angles ↔ Situations, cf. docs/ANGLES.md). */
.m-angle { display:inline-flex; align-items:baseline; gap:6px; margin-bottom:8px; font-size:12px;
  font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border-radius:20px;
  padding:3px 11px; max-width:100%; }
.m-angle-k { text-transform:uppercase; font-size:10px; letter-spacing:.06em; opacity:.65; }
.m-summary { margin:0; font-size:15px; color:var(--ink); line-height:1.45; }
.m-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.m-chip { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; max-width:100%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted); }
.m-chip.aud { background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); }
.m-meta-empty { font-size:12.5px; color:var(--faint); font-style:italic; }
/* Compteur de sondes liées à l'enjeu : lien en bas à droite de la carte (→ onglet Sondes filtré). */
.m-foot { margin-top:12px; text-align:right; }
.m-sondes { font-size:13px; font-weight:700; color:var(--accent-ink); text-decoration:none; }
.m-sondes:hover { text-decoration:underline; }
.m-actions { flex:none; display:flex; align-items:center; gap:4px; }
/* En édition : on masque le résumé lecture seule (situation + chips), seul le formulaire reste ;
   les actions (Fermer / Supprimer) restent calées à droite. */
.moment.editing .m-body, .moment.editing .m-foot { display:none; }
.moment.editing .m-actions { margin-left:auto; }
.m-remove { border:none; background:none; color:var(--faint); font-size:13px; font-weight:600;
  cursor:pointer; padding:6px 10px; border-radius:8px; transition:color .12s, background .12s; }
.m-remove:hover { color:var(--bad); background:var(--bad-soft); }
/* Formulaire d'édition déplié : rythme régulier + séparateur du résumé (l'espace au-dessus
   vient du gap:14px de `.moment`). */
.moment-edit:not([hidden]) { display:flex; flex-direction:column; gap:12px;
  padding-top:14px; border-top:1px solid var(--line); }

/* ── Liste des radars : carte cliquable + icône de suppression en coin ─────── */
.radar-card { position: relative; }
.radar-card-link { display: block; text-decoration: none; color: inherit; }
.radar-card-link h3 { padding-right: 28px; }   /* place pour l'icône en haut à droite */
.radar-del { position: absolute; top: 10px; right: 10px; margin: 0; }
.radar-del-btn { display: grid; place-items: center; width: 28px; height: 28px; border: none;
  background: transparent; color: var(--faint); cursor: pointer; border-radius: 8px; opacity: .55;
  transition: opacity .12s, color .12s, background .12s; }
.radar-card:hover .radar-del-btn, .radar-del-btn:focus-visible { opacity: 1; }
.radar-del-btn:hover { color: var(--bad); background: var(--bad-soft); }

/* Popup modale de confirmation (<dialog> natif) — remplace confirm(). */
/* Centrage explicite : le reset global `* { margin:0 }` annule le `margin:auto` que le navigateur
   applique par défaut au <dialog> → on recentre via inset:0 + margin:auto + height:fit-content. */
.modal { position: fixed; inset: 0; margin: auto; height: fit-content;
  max-width: 420px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow: auto;
  border: none; padding: 0; border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--surface); color: var(--ink); }
.modal::backdrop { background: rgba(20, 25, 40, .45); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .14s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-card { margin: 0; padding: 22px 24px; }
.modal-title { margin: 0 0 8px; font-size: 17px; }
.modal-msg { margin: 0 0 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Récap des angles mesurés (en tête de l'onglet Situations, après profilage). */
.angles-summary { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.angles-summary-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.a-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Onglet Situations : écran « Choisir les angles » (avant profilage, cf. docs/ANGLES.md) ── */
.angles-list { display:flex; flex-direction:column; gap:10px; margin:8px 0 4px; }
.angle.card { display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
  border-left:3px solid var(--accent-soft); transition:border-color .12s, opacity .12s; }
.angle.card:hover { border-left-color:var(--accent); }
.angle .a-sel { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.angle:not(:has(.a-sel:checked)) { opacity:.55; }            /* angle non retenu → grisé */
.angle.risk { border-left-color:var(--warn); }
.a-main { flex:1; min-width:0; }
.a-label { margin:0; font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.a-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.a-chip { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; max-width:100%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted); }
.a-chip.enjeu { background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); }
.a-chip.risk-chip { background:color-mix(in srgb, var(--warn) 14%, transparent);
  border-color:transparent; color:var(--warn); }
.a-edit:not([hidden]) { margin-top:10px; }
.a-edit .a-label-input { width:100%; box-sizing:border-box; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; outline:none; }
.a-edit .a-label-input:focus { border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.a-actions { flex:none; display:flex; align-items:center; gap:4px; }
.a-remove { border:none; background:none; color:var(--faint); font-size:13px; font-weight:600;
  cursor:pointer; padding:6px 10px; border-radius:8px; transition:color .12s, background .12s; }
.a-remove:hover { color:var(--bad); background:var(--bad-soft); }

/* Bannière de filtre (onglet Sondes filtré sur un enjeu). */
.filter-banner { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--radius-sm);
  padding:12px 16px; font-size:14px; }
.filter-banner strong { color:var(--accent-ink); }

/* ── Onglet Prompts : éditeur (édition/suppression inline) + lien mesures ─────── */
.prompts-list { list-style:none; display:flex; flex-direction:column; }
.prompt-card { border-top:1px solid var(--line); padding:12px 0; }
.prompt-card.deleted { display:none; }
.prompt-view { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.prompt-text { flex:1; min-width:0; font-size:14px; line-height:1.5; }
.prompt-actions { flex:none; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.prompt-remove { border:none; background:none; color:var(--faint); font-size:13px; font-weight:600;
  cursor:pointer; padding:6px 10px; border-radius:8px; transition:color .12s, background .12s; }
.prompt-remove:hover { color:var(--bad); background:var(--bad-soft); }
/* Mode sélection (plafond « prompts suivis » du plan) : case par prompt + compteur live. */
.prompt-pick { flex:none; margin-top:3px; width:16px; height:16px; accent-color:var(--accent);
  cursor:pointer; }
.prompt-card.unpicked .prompt-text { color:var(--muted); opacity:.6; }
.pick-counter { font-size:13px; font-weight:600; color:var(--muted); }
.pick-counter strong { color:var(--ink); }
.pick-counter.over, .pick-counter.over strong { color:var(--bad); }
.pick-over { font-size:13px; font-weight:600; color:var(--bad); }
/* Slider admin « limiter le nombre de prompts » (contrôle de coût, non persisté). */
.admin-cap label { display:block; margin-bottom:10px; font-size:14px; }
.admin-cap-row { display:flex; align-items:center; gap:14px; }
.admin-cap-row input[type=range] { flex:1; min-width:0; accent-color:var(--accent); cursor:pointer; }
.admin-cap-row output { flex:none; font-size:14px; font-weight:600; color:var(--muted);
  min-width:120px; text-align:right; }
.admin-cap-row output strong { color:var(--ink); font-size:16px; }
.admin-cap #admin-cap-cost { margin-top:8px; }
.admin-cap #admin-cap-cost strong { color:var(--accent-ink); }
.prompt-mesures { font-size:13px; font-weight:700; color:var(--accent-ink); text-decoration:none; }
.prompt-mesures:hover { text-decoration:underline; }
.prompt-edit { margin-top:10px; }
.prompt-edit .prompt-input { width:100%; box-sizing:border-box; font:inherit; font-size:14px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; resize:vertical; line-height:1.5; }
.prompt-edit .prompt-input:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

/* ── Vue mesures d'un prompt : une carte par modèle, texte brut ───────────────── */
.measure-card { margin-top:14px; }
.measure-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
/* Réponse dépliée : le nom du modèle reste épinglé sous la situation + le prompt en scrollant. */
#measures-all .measure-card.expanded .measure-head { position:sticky;
  top:calc(var(--sit-h, 44px) + var(--prompt-h, 0px)); z-index:1;
  background:var(--surface); box-shadow:0 6px 6px -6px rgba(20,25,40,.10); }
.measure-model { font-size:13px; font-weight:800; color:var(--ink); }
.measure-tags { display:flex; flex-wrap:wrap; gap:6px; }
/* Réponse rendue en markdown (prose compacte). */
.measure-text.md { font-size:14px; line-height:1.6; color:var(--ink); }
.measure-text.md p { margin:0 0 10px; }
.measure-text.md p:last-child, .measure-text.md ul:last-child, .measure-text.md ol:last-child { margin-bottom:0; }
.measure-text.md ul, .measure-text.md ol { margin:0 0 10px 22px; display:flex; flex-direction:column; gap:4px; }
.measure-text.md h3, .measure-text.md h4, .measure-text.md h5, .measure-text.md h6 { font-size:14px; margin:12px 0 6px; }
.measure-text.md strong { color:var(--ink); }
.measure-text.md code { font-size:13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 5px; }
/* Replié : on borne la hauteur et on estompe le bas (mask) ; « Voir plus » lève la limite. */
.measure-text.clamped { max-height:8.4em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 65%, transparent);
  mask-image:linear-gradient(180deg, #000 65%, transparent); }
.measure-toggle { margin-top:8px; border:none; background:none; color:var(--accent-ink);
  font-size:13px; font-weight:700; cursor:pointer; padding:0; }
.measure-toggle:hover { text-decoration:underline; }
/* Surlignage des mentions dans les réponses : marque (accent) vs concurrents (ambre). */
mark.mark-target, mark.mark-competitor { padding:0 3px; border-radius:4px; font-weight:600; }
mark.mark-target { background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent-ink); }
mark.mark-competitor { background:var(--warn-soft); color:var(--warn); }
.measure-legend { font-size:13px; color:var(--muted); margin:14px 0 0; display:flex;
  align-items:center; gap:8px; flex-wrap:wrap; }
.measure-prompt { font-size:13px; color:var(--muted); font-style:italic; margin:0 0 10px;
  border-left:3px solid var(--line); padding-left:12px; }
/* Barre de filtres rapides de la vue Réponses (filtrage client). */
.measure-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0 4px; }
.measure-filters select { font:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 10px; cursor:pointer; }
.measure-filters select:focus { outline:none; border-color:var(--accent); }
.f-count { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:auto; }
/* Groupement Situation → Prompt → réponses (vue Réponses). En-têtes COLLANTS : en scrollant, la
   situation reste en haut et le prompt juste en dessous (fond opaque = couleur de page). */
.resp-situation { margin-top:28px; }
.resp-sit-title { position:sticky; top:0; z-index:3; background:var(--bg);
  font-size:15px; font-weight:700; color:var(--ink); margin:0; padding:12px 0 8px;
  border-bottom:1px solid var(--line); box-shadow:0 6px 6px -6px rgba(20,25,40,.12); }
.signup-choice {
  display:flex; align-items:center; gap:7px; margin:-4px 0 14px; padding:9px 11px;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-ink); font-size:13px;
}
.resp-prompt { margin-top:16px; }
/* `top` = hauteur réelle de l'en-tête de situation (variable car libellés multi-lignes), posée par
   JS sur `.resp-situation` → le prompt (multi-lignes possible) se cale dessous sans être recouvert. */
.resp-prompt-text { position:sticky; top:var(--sit-h, 44px); z-index:2; background:var(--bg);
  font-size:14px; font-weight:600; color:var(--accent-ink); margin:0; padding:8px 0; }
.resp-prompt .measure-card { margin-top:10px; }

/* ── Sélecteur de langue (i18n) ───────────────────────────────────────────── */
.lang-switch { display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:600;
  margin-right:4px; }
.lang-switch a { color:var(--muted); text-decoration:none; padding:2px 4px; border-radius:6px; }
.lang-switch a:hover { color:var(--ink); background:var(--surface-2); }
.lang-switch .lang-active { color:var(--accent); padding:2px 4px; }

/* ── Revue des sondes : barre d'actions collante (liste longue) ───────────── */
.review-actions { gap:12px; margin-top:24px; position:sticky; bottom:0;
  background:linear-gradient(180deg, transparent, var(--bg) 30%); padding:16px 0 12px; }

/* Ligne de sonde entièrement cliquable (le <label> bascule la case). Survol + état rejeté. */
.review-sonde { transition: background .12s; }
.review-sonde:hover { background: var(--surface-2); }
.review-sonde .sonde-text { transition: color .12s, opacity .12s; }
.review-sonde:has(input[name="reject"]:checked) { background: var(--bad-soft); }
.review-sonde:has(input[name="reject"]:checked) .sonde-text {
  text-decoration: line-through; color: var(--muted); opacity: .6; }

/* ── Rapport : rendu prose du markdown ────────────────────────────────────── */
.report { line-height:1.65; }
.report h1 { font-size:24px; margin:0 0 14px; letter-spacing:-.01em; }
.report h2 { font-size:19px; margin:28px 0 10px; padding-top:18px; border-top:1px solid var(--line); }
.report h3 { font-size:15px; margin:20px 0 8px; }
.report p { margin:0 0 12px; }
.report ul, .report ol { margin:0 0 14px 22px; display:flex; flex-direction:column; gap:6px; }
.report strong { color:var(--ink); }
.report code { font-size:13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 5px; }
.report table { width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:14px; }
.report th, .report td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.report th { color:var(--muted); font-weight:600; }
.report tr td:not(:first-child), .report tr th:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.report blockquote { margin:0 0 14px; padding:8px 14px; border-left:3px solid var(--accent);
  color:var(--muted); background:var(--surface-2); border-radius:0 8px 8px 0; }

/* ── Onglets de la fiche radar (config / enjeux / sondes / mesures / rapport) ─ */
.tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  margin:18px 0 26px; }
.tabs a { padding:10px 16px; font-size:14px; font-weight:600; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s; }
.tabs a:hover { color:var(--ink); }
.tabs a.active { color:var(--ink); border-bottom-color:var(--accent); }
.tabs a .tab-dot { display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:6px; vertical-align:middle; }

/* ── Bannière d'avertissement (ex. profil obsolète après édition de la config) ─ */
.notice { display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color:var(--warn); border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin:0 0 22px; }
.notice p { color:var(--warn); font-weight:600; margin:0; }
.notice .btn { flex:none; }


/* ── Barre de progression du job actif (partial _job_status.html) ───────────────
   Déterminée quand la ligne de progression porte un « N/M » (parsé côté serveur en
   `progress.pct`) ; indéterminée (bande animée) pour les phases sans compteur. */
.progress { display:flex; align-items:center; gap:12px; margin-top:12px; }
.progress-track { flex:1; height:8px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:999px;
  transition:width .4s ease; }
.progress-label { flex:none; font-size:12px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.progress-fill.is-indeterminate { width:40%; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:progress-slide 1.2s ease-in-out infinite; }
@keyframes progress-slide {
  0%   { margin-left:-40%; }
  100% { margin-left:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .progress-fill.is-indeterminate { animation:none; width:100%;
    background:var(--accent-soft); }
}