/*
 * REEP · Thème « verre Songhaï » pour le portail.
 * Surcharge la feuille compilée sans la modifier : chaque règle est préfixée par :root pour l’emporter.
 * Retrait : supprimer la ligne <link … songhai-verre.css> de dist/index.html.
 */
:root {
  --sv-vert: #206b45; --sv-vert-2: #2f8a5a; --sv-foret: #164831; --sv-or: #d9ab62; --sv-orange: #f26b1d; --sv-orange-2: #ff9348;
  --sv-encre: #14231a; --sv-encre-2: #38483e; --sv-doux: #6a786e; --sv-ligne: rgba(20, 60, 38, .1);
  /* verre : plus transparent, plus flou et plus saturé, avec un reflet diagonal et une arête lumineuse */
  --sv-verre: linear-gradient(135deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26));
  --sv-verre-2: linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(240, 247, 242, .4));
  --sv-pilule: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(236, 244, 238, .66));
  --sv-bord: rgba(255, 255, 255, .86);
  --sv-flou: blur(30px) saturate(210%) brightness(1.04);
  --sv-ombre: 0 24px 50px -26px rgba(10, 45, 28, .5), 0 2px 8px rgba(10, 45, 28, .06);
  --sv-reflet: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 22px 32px -26px rgba(255, 255, 255, .95);
  --sv-reflet-balaye: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  --sv-ease: cubic-bezier(.22, .8, .24, 1);
  --green: #206b45; --forest: #164831; --deep: #164831; --ink: #14231a; --muted: #5f6f64; --line: rgba(20, 60, 38, .1); --canvas: transparent; --soft: rgba(255, 255, 255, .55);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- police Helvetica partout (y compris les titres en serif du portail), sauf le code */
:root body, :root body *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--font) !important; }

/* ---------- fond vivant (perceptible à travers le verre) */
:root body { background: #e9f1ea; color: var(--sv-encre); font-family: var(--font); }
:root body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 92% -6%, rgba(47, 138, 90, .42), transparent 70%),
    radial-gradient(34vw 34vw at 4% 22%, rgba(217, 171, 98, .38), transparent 70%),
    radial-gradient(40vw 40vw at 60% 108%, rgba(31, 150, 140, .28), transparent 70%),
    radial-gradient(28vw 28vw at 30% 70%, rgba(242, 107, 29, .16), transparent 70%),
    linear-gradient(160deg, #eef5ef 0%, #e4eee6 100%); }
/* nappes de couleur qui flottent lentement derrière le verre (déplacées par transformation : peu coûteux) */
:root body::after { content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(22vw 22vw at 28% 30%, rgba(47, 138, 90, .26), transparent 70%),
    radial-gradient(18vw 18vw at 74% 62%, rgba(242, 107, 29, .13), transparent 70%),
    radial-gradient(24vw 24vw at 62% 18%, rgba(217, 171, 98, .24), transparent 70%),
    radial-gradient(20vw 20vw at 18% 82%, rgba(31, 150, 140, .2), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  :root body::before { animation: sv-derive 40s ease-in-out infinite alternate; background-size: 120% 120%; }
  :root body::after { animation: sv-flotte 34s ease-in-out infinite alternate; }
  @keyframes sv-derive { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }
  @keyframes sv-flotte { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.06); } 100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(.97); } }
}
:root .app-shell, :root .main-shell, :root .main { background: transparent; }
:root ::selection { background: rgba(242, 107, 29, .22); }

/* ---------- barre latérale : panneau vert vitré flottant */
:root .sidebar { background: linear-gradient(170deg, rgba(60, 154, 102, .88) 0%, rgba(31, 106, 67, .86) 40%, rgba(20, 64, 43, .92) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 26px 52px -26px rgba(10, 45, 28, .8), inset 0 1px 0 rgba(255, 255, 255, .38); scrollbar-color: rgba(255, 255, 255, .35) transparent; }
:root .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); }
@media (width >= 761px) {
  :root .sidebar { top: 12px; bottom: 12px; left: 12px; width: 236px; border-radius: 20px; }
  :root .main-shell { margin-left: 260px; }
}
@media (761px <= width <= 1120px) { :root .sidebar { width: 210px; } :root .main-shell { margin-left: 234px; } }
@media (761px <= width <= 860px) { :root .sidebar { width: 196px; } :root .main-shell { margin-left: 220px; } }
@media (width <= 760px) { :root .sidebar { border-radius: 0 20px 20px 0; } }
:root .sidebar .brand img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
:root .sidebar .brand-caption { color: rgba(255, 255, 255, .8); }
:root .sidebar .workspace { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .32); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
:root .sidebar .workspace span:not(.workspace-dot) { color: rgba(255, 255, 255, .78); }
:root .sidebar .workspace-icon { background: rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; }
:root .sidebar .workspace-dot { background: var(--sv-orange); box-shadow: 0 0 0 3px rgba(242, 107, 29, .25); }
:root .sidebar .nav-caption { color: #fff; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; opacity: .95; }
:root .sidebar .nav-item { position: relative; color: rgba(255, 255, 255, .92); border-radius: 11px; font-size: 13.5px; transition: background .2s; }
:root .sidebar .nav-item svg { color: rgba(255, 255, 255, .9); }
:root .sidebar .nav-item:hover { background: rgba(255, 255, 255, .12); }
:root .sidebar .nav-item.active { background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14)); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 8px 16px -10px rgba(0, 0, 0, .45); }
:root .sidebar .nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--sv-orange-2), var(--sv-orange)); }
:root .sidebar .nav-count { background: var(--sv-orange); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
:root .sidebar .sidebar-bottom { border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); }
:root .sidebar .sidebar-bottom * { color: inherit; }
:root .mobile-scrim { background: rgba(10, 35, 22, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- barre du haut : pilule verte brillante */
:root .topbar { position: sticky; top: 12px; z-index: 30; margin: 12px 14px 0 0; height: 56px; border-radius: 16px; color: #fff; border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(100deg, rgba(47, 138, 90, .92) 0%, rgba(32, 107, 69, .92) 45%, rgba(23, 79, 53, .94) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 16px 34px -20px rgba(10, 45, 28, .85), inset 0 1px 0 rgba(255, 255, 255, .35); overflow: hidden; }
:root .topbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .08) 45%, transparent 60%); }
:root .topbar > * { position: relative; }
@media (width <= 760px) { :root .topbar { margin: 8px 8px 0; } }
:root .topbar .breadcrumb, :root .topbar .breadcrumb * { color: #fff; }
:root .topbar .breadcrumb span { opacity: .8; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 700; }
:root .topbar .breadcrumb strong { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }
:root .topbar .private-label { color: rgba(255, 255, 255, .85); }
:root .topbar .icon-button, :root .topbar .account-profile { color: #fff; }
:root .topbar .icon-button:hover { background: rgba(255, 255, 255, .16); }
:root .topbar .language { background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
:root .topbar .language button { color: #fff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; }
:root .topbar .language .selected { background: linear-gradient(180deg, #fff, #e7f2eb); color: var(--sv-foret); box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .35); }
:root .topbar .avatar, :root .account-profile .avatar { background: linear-gradient(140deg, var(--sv-orange-2), var(--sv-orange)); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }

/* ---------- en-têtes de page : titre et trait orange */
:root .main { padding-top: 26px; }
:root .page-heading h1, :root .main > div > h1 { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; color: var(--sv-encre); }
:root .page-heading h1::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; margin-top: 9px; background: linear-gradient(90deg, var(--sv-orange), var(--sv-orange-2)); }
:root .page-heading p { color: var(--sv-encre-2); font-size: 13.5px; }
:root .eyebrow, :root .section-label, :root .fish-eyebrow, :root .hero-kicker, :root .chapter-tag { color: var(--sv-vert); letter-spacing: .12em; font-weight: 800; }

/* ---------- surfaces vitrées (cartes, panneaux, lignes) */
:root .panel, :root .record-card, :root .person-card, :root .source-row, :root .document-card, :root .workflow-card, :root .pilot-card, :root .working-note,
:root .fish-home-entry, :root .ecosystem, :root .fish-panel, :root .fish-lot-card, :root .fish-proof-card, :root .journey-panel, :root .journey-banner, :root .journey-toolbar,
:root .journey-summary, :root .mail-card, :root .history-entry, :root .invite-row, :root .library-intro, :root .process-intro, :root .ai-intro,
:root .fish-hero, :root .fish-demo-banner, :root .workflow-inspector, :root .search-result, :root .kanban-card, :root .timeline-content, :root .upcoming, :root .priorities,
:root .source-preview, :root .mail-page > section, :root .invitations > section {
  background: var(--sv-verre); -webkit-backdrop-filter: var(--sv-flou); backdrop-filter: var(--sv-flou); border: 1px solid var(--sv-bord); border-radius: 18px; box-shadow: var(--sv-ombre), var(--sv-reflet); }
/* conteneur de mise en page (bibliothèque, parcours, IA) : pas une carte, sinon verre dans le verre et texte collé au bord */
:root .knowledge-workspace { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; }
/* blocs devenus cartes vitrées : marges intérieures pour que rien ne touche le bord */
:root .process-intro { padding: 26px 30px 24px; }
:root .journey-toolbar { padding-left: 22px; padding-right: 22px; }
/* surfaces posées sur une autre surface vitrée : voile clair sans second flou (plus net, plus léger à afficher) */
:root .journey-panel .journey-summary, :root .history-panel .history-entry, :root .sources-list .source-row, :root .workflow-card .workflow-inspector {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(10, 45, 28, .06); border-color: rgba(255, 255, 255, .7); }
/* cartes cliquables : soulèvement et reflet qui balaie la surface au survol */
:root .record-card, :root .person-card, :root .document-card, :root .workflow-card, :root .kanban-card, :root .timeline-content, :root .search-result, :root .fish-lot-card, :root .fish-home-entry {
  background: var(--sv-reflet-balaye) -160% 0 / 260% 100% no-repeat, var(--sv-verre);
  transition: transform .28s var(--sv-ease), box-shadow .28s, background-position .9s var(--sv-ease), border-color .28s; }
:root .record-card:hover, :root .person-card:hover, :root .document-card:hover, :root .workflow-card:hover, :root .kanban-card:hover, :root .timeline-content:hover,
:root .search-result:hover, :root .fish-lot-card:hover, :root .fish-home-entry:hover {
  transform: translateY(-3px); background-position: 160% 0, 0 0, 0 0; border-color: #fff; box-shadow: 0 28px 52px -26px rgba(10, 45, 28, .6), 0 0 0 4px rgba(255, 255, 255, .28), var(--sv-reflet); }
:root .panel-head { border-bottom: 1px solid var(--sv-ligne); }
:root .panel-foot { border-top: 1px solid var(--sv-ligne); background: transparent; }
:root .kanban-col { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .22)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; }

/* ---------- indicateurs : cartes brillantes avec pastille */
:root .metrics { background: transparent; border: 0; box-shadow: none; gap: 14px; overflow: visible; }
:root .metric { background: var(--sv-verre-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--sv-bord); border-radius: 16px;
  box-shadow: 0 8px 18px -12px rgba(10, 45, 28, .45), var(--sv-reflet); transition: transform .22s cubic-bezier(.22, .8, .24, 1); }
:root .metric:hover { transform: translateY(-3px); background: var(--sv-verre-2); }
:root .metric-icon { background: linear-gradient(180deg, #fff, #e5f2ea); color: var(--sv-vert); border-radius: 13px; box-shadow: var(--sv-reflet), 0 4px 10px -6px rgba(10, 45, 28, .45); }
:root .metric strong, :root .metric b { font-weight: 600; color: var(--sv-encre); }

/* ---------- boutons en pilule */
:root .btn { border-radius: 999px; border: 1px solid rgba(20, 60, 38, .14); background: var(--sv-pilule); color: var(--sv-encre); font-weight: 600; padding-left: 18px; padding-right: 18px;
  box-shadow: 0 6px 14px -10px rgba(10, 45, 28, .5), var(--sv-reflet); transition: transform .18s cubic-bezier(.22, .8, .24, 1), box-shadow .18s; }
:root .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(10, 45, 28, .55), var(--sv-reflet); background: var(--sv-pilule); }
:root .btn:active { transform: scale(.98); }
:root .btn.primary { color: #fff; border-color: #174f35; background: linear-gradient(180deg, #3a9763 0%, #206b45 55%, #174f35 100%); box-shadow: 0 10px 20px -10px rgba(32, 107, 69, .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
:root .btn.subtle { background: rgba(255, 255, 255, .35); }
:root .btn.danger { color: #b03a2a; }
:root .text-button, :root .hero-link, :root .upcoming-link { color: var(--sv-vert); font-weight: 600; }
:root .fish-button, :root .journey-primary { border-radius: 999px; }

/* ---------- sélecteurs segmentés : pilule verte et trait orange */
:root .tabs, :root .view-switch, :root .fish-tabs, :root .invite-filters, :root .library-filters { background: linear-gradient(180deg, rgba(238, 244, 239, .85), rgba(229, 238, 231, .7)); border: 1px solid rgba(20, 60, 38, .12); border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(10, 45, 28, .08), var(--sv-reflet); padding: 4px; }
:root .fish-tabs { border-radius: 18px; }
:root .tabs button, :root .view-switch button, :root .fish-tabs button, :root .invite-filters button, :root .library-filters button { position: relative; border-radius: 999px; transition: background .25s, color .25s; }
:root .fish-tabs button { border-radius: 14px; }
:root .tabs button.active, :root .view-switch button.active, :root .fish-tabs button.active, :root .invite-filters button.active, :root .library-filters button.active,
:root .invite-filters button.selected, :root .library-filters button.selected {
  color: #fff; background: linear-gradient(180deg, #3a9763 0%, #206b45 60%, #174f35 100%); box-shadow: 0 6px 12px -6px rgba(32, 107, 69, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root .tabs button.active::after, :root .view-switch button.active::after, :root .fish-tabs button.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: var(--sv-orange); }
:root .fish-tabs button.active * { color: #fff; }
:root .workflow-tabs > button { border-radius: 16px; background: var(--sv-verre-2); border: 1px solid var(--sv-bord); box-shadow: var(--sv-reflet), 0 6px 12px -10px rgba(10, 45, 28, .5); }
:root .workflow-tabs > button.active { color: #fff; background: linear-gradient(180deg, #3a9763, #174f35); border-color: #174f35; box-shadow: 0 0 0 3px rgba(47, 138, 90, .2), 0 10px 20px -12px rgba(32, 107, 69, .7); }
:root .workflow-tabs > button.active * { color: #fff; }

/* ---------- numéros d’étape : cercles orange brillants */
:root .stage-number, :root .fish-step-number, :root .pole-num, :root .map-detail-number, :root .plot-number {
  background: radial-gradient(circle at 35% 30%, #ffad74, var(--sv-orange) 70%); color: #fff; box-shadow: 0 6px 12px -6px rgba(242, 107, 29, .9), inset 0 1px 0 rgba(255, 255, 255, .5); border: 0; }

/* ---------- pastilles d’état en pilule */
:root .badge, :root .blocked-pill, :root .document-status, :root .fish-status, :root .invite-state, :root .mail-state { border-radius: 999px; font-weight: 600; }
:root .badge.s-done, :root .badge.s-resolved, :root .badge.s-confirmed, :root .badge.s-received, :root .badge.s-occurred { background: #e4f5eb; color: #18904f; }
:root .badge.s-open, :root .badge.s-doing, :root .badge.s-review, :root .badge.s-partial, :root .badge.s-proposed, :root .badge.s-reported, :root .badge.s-planned, :root .badge.s-expected { background: #fdf0dd; color: #b8690a; }
:root .live-dot { background: var(--sv-orange); box-shadow: 0 0 0 3px rgba(242, 107, 29, .22); }

/* ---------- tableaux et listes */
:root .task-table, :root .journey-table, :root .sources-list { background: var(--sv-verre); -webkit-backdrop-filter: var(--sv-flou); backdrop-filter: var(--sv-flou); border: 1px solid var(--sv-bord); border-radius: 18px; box-shadow: var(--sv-ombre), var(--sv-reflet); overflow: hidden; }
:root .task-row { border-color: var(--sv-ligne); transition: background .2s; }
:root .task-row:hover { background: rgba(32, 107, 69, .05); }
:root table th { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; color: var(--sv-encre-2); }
:root .timeline-rail { background: linear-gradient(var(--sv-vert-2), var(--sv-or)); }
:root .timeline-dot { background: var(--sv-vert); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 5px rgba(32, 107, 69, .25); }
:root .timeline-content .lucide-arrow-up-right { transition: transform .28s var(--sv-ease), color .28s; }
:root .timeline-content:hover .lucide-arrow-up-right { transform: translate(3px, -3px); color: var(--sv-orange); }
:root .timeline-entry:hover .timeline-date b { color: var(--sv-vert); }
:root .timeline-date b { transition: color .25s; }

/* ---------- formulaires */
:root .field input, :root .field select, :root .field textarea, :root .searchbox, :root .record-form input, :root .record-form select, :root .record-form textarea,
:root .login-form input, :root .corpus-search input, :root .fish-search input, :root .journey-fields input, :root .journey-fields select, :root .mail-form-grid input, :root .invite-fields input {
  border-radius: 12px; border: 1px solid rgba(20, 60, 38, .16); background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 2px rgba(10, 45, 28, .06); }
:root .searchbox { border-radius: 999px; }
:root input:focus, :root select:focus, :root textarea:focus { outline: none; border-color: var(--sv-vert-2) !important; box-shadow: 0 0 0 4px rgba(47, 138, 90, .16) !important; }

/* ---------- tiroirs, dialogues, notifications */
:root .record-dialog, :root .document-dialog, :root .account-dialog, :root .journey-dialog, :root .fish-proof-dialog, :root .poster-dialog {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(245, 250, 246, .84)); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--sv-bord); box-shadow: 0 30px 70px -30px rgba(10, 35, 22, .6), var(--sv-reflet); }
@media (width >= 761px) { :root .record-dialog { inset: 12px 12px 12px auto; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; } }
:root dialog::backdrop { background: rgba(10, 35, 22, .25); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:root .account-scrim { background: rgba(10, 35, 22, .25); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:root .toast { color: var(--sv-encre); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(20, 60, 38, .1); border-left: 4px solid var(--sv-vert); border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(10, 35, 22, .5); }
:root .toast * { color: inherit; }

/* ---------- page de connexion */
:root .login-page { background: transparent; }
:root .login-panel { background: var(--sv-verre); -webkit-backdrop-filter: var(--sv-flou); backdrop-filter: var(--sv-flou); border-left: 1px solid var(--sv-bord); }
:root .login-brand { background: linear-gradient(160deg, rgba(60, 154, 102, .9), rgba(20, 64, 43, .94)); }
:root .login-form .btn.primary, :root .login-form button[type="submit"] { border-radius: 999px; }

/* ---------- entrée « parcours de bout en bout » ajoutée au menu */
:root .sidebar .nav-item.sv-parcours .sv-neuf { margin-left: auto; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sv-orange); box-shadow: 0 0 0 3px rgba(242, 107, 29, .3); }

/* ---------- cases à cocher en interrupteurs (rail brillant, bouton blanc qui glisse) */
:root input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 26px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer; vertical-align: middle;
  border: 1px solid rgba(20, 60, 38, .16); background: linear-gradient(180deg, rgba(222, 232, 225, .95), rgba(240, 246, 242, .9));
  box-shadow: inset 0 2px 4px rgba(10, 45, 28, .14), 0 1px 0 rgba(255, 255, 255, .9); transition: background .3s, border-color .3s, box-shadow .3s; }
:root input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fff 55%, #eef3ef 100%); box-shadow: 0 2px 5px rgba(10, 45, 28, .3), 0 0 0 .5px rgba(10, 45, 28, .08);
  transition: transform .32s cubic-bezier(.34, 1.4, .64, 1), width .2s; }
:root input[type="checkbox"]:checked { border-color: #174f35; background: linear-gradient(180deg, #3a9763 0%, #206b45 60%, #174f35 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 4px rgba(10, 45, 28, .25), 0 4px 10px -4px rgba(32, 107, 69, .7); }
:root input[type="checkbox"]:checked::before { transform: translateX(20px); }
:root input[type="checkbox"]:active::before { width: 24px; }
:root input[type="checkbox"]:checked:active::before { transform: translateX(16px); }
:root input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47, 138, 90, .25), inset 0 2px 4px rgba(10, 45, 28, .14) !important; }
:root input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
:root input[type="checkbox"]:indeterminate { background: linear-gradient(180deg, #e7b77a, var(--sv-or)); border-color: #b98a42; }
:root input[type="checkbox"]:indeterminate::before { transform: translateX(10px); }

/* ---------- animations
 * Les surfaces apparaissent quand elles entrent à l’écran (repérage par reep-integration.js : attribut data-sv-vu = rang dans la vague),
 * l’en-tête rejoue son entrée à chaque changement de vue (data-sv-page). Sans JavaScript ou en mouvement réduit : tout est visible, rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  /* apparition au défilement (le remplissage « backwards » laisse ensuite le survol libre de déplacer la carte) */
  html.sv-anim .main :is(.panel, .record-card, .person-card, .document-card, .workflow-card, .pilot-card, .working-note, .fish-home-entry, .ecosystem, .fish-panel, .fish-lot-card,
    .fish-proof-card, .journey-panel, .journey-banner, .journey-toolbar, .mail-card, .invite-row, .library-intro, .process-intro, .ai-intro, .fish-hero, .fish-demo-banner,
    .search-result, .kanban-col, .upcoming, .priorities, .metric, .task-table, .journey-table, .sources-list, .source-preview, .toolbar, .timeline-context):not([data-sv-vu]) { opacity: 0; }
  html.sv-anim .main [data-sv-vu] { animation: sv-revele .75s var(--sv-ease) backwards; animation-delay: var(--sv-r, 0s); }
  html.sv-anim .main [data-sv-vu="1"] { --sv-r: .07s; } html.sv-anim .main [data-sv-vu="2"] { --sv-r: .14s; } html.sv-anim .main [data-sv-vu="3"] { --sv-r: .21s; }
  html.sv-anim .main [data-sv-vu="4"] { --sv-r: .28s; } html.sv-anim .main [data-sv-vu="5"] { --sv-r: .35s; } html.sv-anim .main [data-sv-vu="6"] { --sv-r: .42s; } html.sv-anim .main [data-sv-vu="7"] { --sv-r: .49s; }
  @keyframes sv-revele { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

  /* en-tête de page : sur-titre, titre, trait orange qui s’allonge, description (deux noms d’animation pour pouvoir la rejouer) */
  html.sv-anim .main[data-sv-page="a"] > .page-heading > div > *, html.sv-anim .main[data-sv-page="a"] > .page-heading > .heading-actions { animation: sv-tete-a .6s var(--sv-ease) backwards; }
  html.sv-anim .main[data-sv-page="b"] > .page-heading > div > *, html.sv-anim .main[data-sv-page="b"] > .page-heading > .heading-actions { animation: sv-tete-b .6s var(--sv-ease) backwards; }
  html.sv-anim .main[data-sv-page] > .page-heading > div > :nth-child(2) { animation-delay: .06s; }
  html.sv-anim .main[data-sv-page] > .page-heading > div > :nth-child(3) { animation-delay: .14s; }
  html.sv-anim .main[data-sv-page] > .page-heading > .heading-actions { animation-delay: .18s; }
  html.sv-anim .main[data-sv-page="a"] .page-heading h1::after { animation: sv-trait-a .8s .2s var(--sv-ease) backwards; }
  html.sv-anim .main[data-sv-page="b"] .page-heading h1::after { animation: sv-trait-b .8s .2s var(--sv-ease) backwards; }
  @keyframes sv-tete-a { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
  @keyframes sv-tete-b { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
  @keyframes sv-trait-a { from { width: 0; opacity: 0; } }
  @keyframes sv-trait-b { from { width: 0; opacity: 0; } }

  /* chronologie : la date glisse, le rail se dessine vers le bas, le point surgit, la carte arrive par la droite */
  html.sv-anim .main .timeline-entry:not([data-sv-vu]) > * { opacity: 0; }
  html.sv-anim .main .timeline-entry[data-sv-vu] { animation: none; }
  html.sv-anim .main .timeline-entry[data-sv-vu] > .timeline-date { animation: sv-tl-date .6s var(--sv-ease) backwards; animation-delay: var(--sv-r, 0s); }
  html.sv-anim .main .timeline-entry[data-sv-vu] > .timeline-rail { transform-origin: 50% 0; animation: sv-tl-rail .7s var(--sv-ease) backwards; animation-delay: var(--sv-r, 0s); }
  html.sv-anim .main .timeline-entry[data-sv-vu] > .timeline-rail > span { animation: sv-tl-point .55s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--sv-r, 0s) + .32s); }
  html.sv-anim .main .timeline-entry[data-sv-vu] > .timeline-content { animation: sv-tl-carte .75s var(--sv-ease) backwards; animation-delay: calc(var(--sv-r, 0s) + .12s); }
  html.sv-anim .main .timeline-entry.past[data-sv-vu] .timeline-rail svg path { stroke-dasharray: 32; animation: sv-trace .5s ease-out backwards; animation-delay: calc(var(--sv-r, 0s) + .62s); }
  @keyframes sv-tl-date { from { opacity: 0; transform: translateX(-16px); } }
  @keyframes sv-tl-rail { from { transform: scaleY(0); } }
  @keyframes sv-tl-point { from { opacity: 0; transform: scale(0); } }
  @keyframes sv-tl-carte { from { opacity: 0; transform: translateX(36px) scale(.98); } }
  @keyframes sv-trace { from { stroke-dashoffset: 32; } }
  /* prochain jalon (le premier après les jalons passés) : halo orange qui pulse */
  :root .timeline-entry.past + .timeline-entry:not(.past) .timeline-rail > span { border-radius: 50%; animation: sv-pouls 2.4s 1.2s ease-out infinite; }
  html.sv-anim .main .timeline-entry.past + .timeline-entry:not(.past)[data-sv-vu] .timeline-rail > span { animation: sv-tl-point .55s cubic-bezier(.34, 1.56, .64, 1) backwards, sv-pouls 2.4s 1.2s ease-out infinite; animation-delay: calc(var(--sv-r, 0s) + .32s), 1.2s; }
  @keyframes sv-pouls { 0% { box-shadow: 0 0 0 0 rgba(242, 107, 29, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(242, 107, 29, 0); } }

  /* ambiance : reflet qui traverse la barre du haut, trait du menu actif, dialogues */
  :root .topbar::before { background-size: 100% 100%, 260% 100%; animation: sv-balaye 9s ease-in-out infinite; }
  @keyframes sv-balaye { 0%, 55% { background-position: 0 0, 130% 0; } 100% { background-position: 0 0, -130% 0; } }
  :root .sidebar .nav-item.active::before { animation: sv-barre .4s var(--sv-ease) backwards; }
  @keyframes sv-barre { from { transform: scaleY(0); opacity: 0; } }
  :root .sidebar .nav-item svg { transition: transform .25s var(--sv-ease); }
  :root .sidebar .nav-item:hover svg { transform: translateX(2px) scale(1.08); }
  :root .live-dot, :root .sidebar .workspace-dot, :root .sidebar .nav-item.sv-parcours .sv-neuf { animation: sv-pouls 2.6s ease-out infinite; }
  :root .metric-icon { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
  :root .metric:hover .metric-icon { transform: rotate(-6deg) scale(1.08); }
  :root .btn.primary { background-size: 100% 160%; background-position: 0 0; transition: transform .18s var(--sv-ease), box-shadow .18s, background-position .4s; }
  :root .btn.primary:hover { background-position: 0 100%; }
  :root .record-dialog[open] { animation: sv-glisse .45s var(--sv-ease) both; }
  @keyframes sv-glisse { from { opacity: 0; transform: translateX(48px); } }
  :root .toast { animation: sv-toast .45s cubic-bezier(.34, 1.4, .64, 1) backwards; }
  @keyframes sv-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } }
}