/* ============================================================================
   VAVI — Design system unifié (COMPLIGENT & SYNTHETIZOR)
   Issu du prototype de navigation V5. Source de vérité unique de la charte.
   ----------------------------------------------------------------------------
   RÈGLE D'USAGE — À LIRE AVANT DE MIGRER UNE PAGE
   ----------------------------------------------------------------------------
   Ce fichier N'EST PAS compatible Bootstrap et ne doit JAMAIS être chargé sur
   une page qui charge encore Bootstrap. Les noms de classes du prototype
   (.card, .btn, .badge, .alert, .row, .nav, .nav-item, .tabs, .chip, .tag)
   entrent en collision frontale avec ceux de Bootstrap 5 — notamment .row,
   qui est ici un flex horizontal et là une rangée de grille.

   Conséquence pratique, pendant toute la durée de la migration :
     - une page migrée hérite de `_shell.html` et NE charge PAS Bootstrap ;
     - une page non migrée reste un document autonome avec son Bootstrap et
       NE charge PAS ce fichier.
   Les deux régimes cohabitent sans se voir. Aucune page ne doit charger les
   deux : c'est la seule règle à ne pas enfreindre.

   Ce choix est délibéré. Conserver les noms de classes du prototype permet de
   coller le balisage des maquettes tel quel, sans réécriture — c'est ce qui
   rend le reste de la migration mécanique plutôt qu'artisanale.
   ============================================================================ */

/* ============ 1. JETONS DE CHARTE — RÉFÉRENTIEL V17 ============
   Toute couleur écrite en dur dans un gabarit est un défaut : elle échappe au
   thème et rend impossible tout changement global. Passer par une variable.

   ----------------------------------------------------------------------------
   NORME DE RISQUE — TROIS COULEURS, UN SEUL SENS
   ----------------------------------------------------------------------------
   --risk-high  ROUGE   gravité ou importance élevée
   --risk-mid   ORANGE  situation intermédiaire
   --risk-ok    VERT    validation, résultat positif

   Trois règles qui ne se négocient pas :
     1. ces trois couleurs ne servent JAMAIS de décoration ni d'accent produit ;
     2. l'or ne porte JAMAIS un statut — il ne signale que COMPLIGENT ;
     3. aucun dégradé, aucune transparence de couleur.
   Tous les états de l'application dérivent de ces trois jetons : les redéfinir
   ailleurs romprait le contrat de lecture.
   ---------------------------------------------------------------------------- */
:root{
  /* ---- norme de risque : source unique ---- */
  --risk-high:#C4231B;
  --risk-mid:#E2660A;
  --risk-ok:#177A3C;

  /* ---- marque : rampe bleue, saturation 100 % sur la teinte 219° ---- */
  --nav-bg:#0054F0;        /* bleu de référence · menu, survol, liens */
  --vavi-navy:#00379E;     /* même teinte en profondeur · boutons, titres */
  --vavi-indigo:#0054F0;
  --navy-deep:#00256B;
  --vavi-white:#FFFFFF;
  --vavi-surface:#F1F1F3;  /* neutre · surfaces, fonds de blocs */
  --vavi-ink:#303030;
  --navy-soft:#EBF2FF;
  --indigo-soft:#EBF2FF;
  --line:#E4E4E7;
  --line-2:#D1D1D6;
  --muted:#5F6068;
  --muted-2:#8E8F98;
  --paper:#F7F7F8;

  /* ---- SYNTHETIZOR — le monde documentaire ---- */
  --sy-primary:#0054F0;
  --sy-secondary:#75A5FF;
  --sy-surface:#EBF2FF;

  /* ---- COMPLIGENT — le monde réglementaire ---- */
  --co-primary:#9A7415;    /* or foncé · texte et contours */
  --co-gold:#F0C54C;       /* or · signature produit seule */
  --co-gold-ink:#2E2405;   /* encre sur fond or */
  --co-amber:#8A6D2A;
  --co-surface:#FEF8E8;

  /* ---- états : dérivés de la norme, jamais redéfinis ailleurs ---- */
  --success:var(--risk-ok);   --success-bg:#E7F3EB;     --success-line:#B4D8C1;
  --warning:var(--risk-mid);  --warning-bg:#FDF0E5;     --warning-line:#F5CDA8;
  --danger:var(--risk-high);  --danger-bg:#FCEDEC;      --danger-line:#F1BDBA;
  --information:#0054F0;      --information-bg:#EBF2FF; --information-line:#C2D7FF;

  /* ---- teintes de texte accessibles sur fond teinté ---- */
  --ink-green:#146633; --ink-orange:#B84E05; --ink-red:#C4231B;
  --ink-blue:#0047CC;  --ink-gold:#75590F;

  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(18,20,26,.05), 0 3px 12px rgba(18,20,26,.05);
  --sh-2:0 2px 6px rgba(18,20,26,.07), 0 16px 40px rgba(18,20,26,.11);
  --nav-w:264px;
  --ff:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-display:"Fraunces",Georgia,serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;background:var(--paper);color:var(--vavi-ink);
  font-family:var(--ff);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--vavi-navy);letter-spacing:-.015em;line-height:1.2}
h1{font-size:29px;font-weight:700}
h2{font-size:19px;font-weight:700}
h3{font-size:15.5px;font-weight:700}
h4{font-size:13px;font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(37,107,237,.5);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Filet de sécurité sur les icônes ----------------------------------
   Un <svg> sans largeur ni hauteur, posé en enfant direct d'un conteneur
   flex, n'a aucune taille intrinsèque : il s'étire jusqu'à remplir la place
   disponible. C'est ainsi qu'une icône de 16 px devient un aplat de 300 px,
   et le défaut ne se voit qu'à l'écran — jamais dans un test de gabarit.

   `:where()` annule la spécificité : cette règle ne pose qu'un DÉFAUT. La
   moindre règle de composant (`.btn svg`, `.intent-ico svg`, `.empty-ico svg`)
   la surcharge sans effort, et un `style="width:…"` en ligne aussi. On répare
   donc la classe de défaut au lieu d'en rustiner les occurrences une à une.

   Le sprite d'icônes est exclu : c'est un `<svg width="0">` qui ne sert qu'à
   porter les définitions. En CSS, une largeur déclarée l'emporte sur
   l'attribut de présentation — sans cette exclusion, le sprite reprendrait
   16 px et afficherait une icône parasite en haut de chaque page. */
:where(svg:not([aria-hidden="true"][width="0"])){width:16px;height:16px;flex:0 0 auto}

/* ============ 3. UTILITAIRES ============ */
.mono{font-family:var(--ff-mono);font-size:.86em;letter-spacing:-.02em}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.lede{color:var(--muted);font-size:14.5px;max-width:70ch}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.row-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.stack{display:grid;gap:6px}
/* .grid2 est référencé par les points de rupture du prototype sans y être
   défini — on le déclare ici pour que la bascule responsive ait un effet. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ============ 4. COQUILLE ============ */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr)}
.skip{position:fixed;top:8px;left:8px;z-index:200;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--vavi-navy);color:#fff;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}

/* --- Navigation latérale : bleu nuit VAVI --- */
.nav{
  position:sticky;top:0;height:100vh;z-index:40;display:flex;flex-direction:column;
  background:var(--nav-bg);color:#FFFFFF;
}
.nav-brand{display:flex;align-items:center;gap:11px;padding:19px 18px 17px;border-bottom:1px solid rgba(255,255,255,.10);
  text-decoration:none}
.logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 36px;
  background:#fff;color:var(--vavi-navy);font-weight:800;font-size:14px;letter-spacing:-.06em;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain}
.brand-t{font-weight:700;font-size:16.5px;letter-spacing:.10em;color:#fff}
.brand-s{display:block;font-size:10.5px;color:#9394B4;letter-spacing:.05em;margin-top:-2px}
.nav-scroll{flex:1;overflow-y:auto;padding:14px 11px 6px}
.nav-scroll::-webkit-scrollbar{width:6px}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.nav-group{margin-bottom:15px}
.nav-title{margin:0 0 6px 11px;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#FFFFFF}
/* Les items sont des <a href> et non des <button> : dans un outil où l'on
   compare deux textes côte à côte, le clic-milieu et « copier le lien » ne
   sont pas des agréments mais des gestes de travail. */
.nav-item{
  width:100%;display:flex;align-items:center;gap:11px;padding:9px 11px;min-height:41px;
  border:0;border-radius:var(--r-sm);background:transparent;color:#FFFFFF;cursor:pointer;text-align:left;
  font-size:14px;text-decoration:none;transition:background .13s,color .13s
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--co-gold)}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;opacity:.9}
/* Écran pas encore construit : on le montre pour que la carte du produit soit
   lisible, mais on ne fabrique pas un lien mort. */
.nav-item.soon{opacity:.42;cursor:default;pointer-events:none}
.nav-item.soon:hover{background:transparent;color:#FFFFFF}
.nav-soon{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#FFFFFF;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xs);padding:1px 5px}
.nav-count{margin-left:auto;min-width:21px;height:21px;padding:0 6px;display:grid;place-items:center;
  border-radius:999px;font-size:11px;font-weight:700;font-family:var(--ff-mono)}
.nav-count.co{background:var(--co-gold);color:var(--co-gold-ink)}
.nav-count.dg{background:var(--danger);color:#fff}
.nav-foot{padding:11px;border-top:1px solid rgba(255,255,255,.10)}
.nav-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.06)}
.nav-user a{color:#9394B4;text-decoration:none}
.nav-user a:hover{color:#fff}
.avatar{width:29px;height:29px;flex:0 0 29px;border-radius:50%;display:grid;place-items:center;
  background:var(--co-gold);color:var(--co-gold-ink);font-weight:800;font-size:12px}

/* --- Barre supérieure --- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:11px 26px;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)
}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.dossier{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 10px;border:1px solid var(--line-2);
  border-radius:999px;background:#fff;cursor:pointer;min-height:38px;text-decoration:none}
.dossier:hover{border-color:var(--vavi-indigo)}
.dossier b{font-size:13.5px;color:var(--vavi-navy)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--success)}
.dot.off{background:var(--line-2)}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.crumb a{color:var(--vavi-indigo);text-decoration:underline;text-underline-offset:2px}
.crumb span[aria-current]{color:var(--vavi-navy);font-weight:600}

/* --- Chemin macro « votre parcours » --- */
.path{display:flex;align-items:center;gap:0;padding:9px 26px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.path-s{display:flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;border:0;background:transparent;
  cursor:pointer;white-space:nowrap;font-size:12.5px;color:var(--muted-2);font-weight:600;text-decoration:none}
.path-s .n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--vavi-surface);color:var(--muted-2);font-size:10.5px;font-weight:700;font-family:var(--ff-mono)}
.path-s .sub{font-weight:400;font-size:11.5px;color:var(--muted-2)}
.path-s:hover{background:var(--vavi-surface)}
.path-s.done{color:var(--vavi-ink)} .path-s.done .n{background:var(--success);color:#fff}
.path-s.on{background:var(--navy-soft);color:var(--vavi-navy)} .path-s.on .n{background:var(--vavi-navy);color:#fff}
.path-sep{color:var(--line-2);font-size:12px;padding:0 2px}
.path-lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  margin-right:12px;flex:0 0 auto}

/* --- Zone principale --- */
.main{min-width:0;display:flex;flex-direction:column}
.view{padding:26px 26px 70px;max-width:1360px;width:100%;margin:0 auto;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.view-head{margin-bottom:20px}
.view-head h1{margin-bottom:5px}

/* Bandeau d'environnement (démo, recette, données de test). */
.demo{display:flex;align-items:center;gap:9px;padding:7px 26px;background:var(--sy-surface);
  border-bottom:1px solid var(--sy-secondary);font-size:12px;color:var(--sy-primary);font-weight:600}

/* ============ 5. COMPOSANTS DE BASE ============ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card-p{padding:18px}
.card-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-head h2,.card-head h3{flex:1;min-width:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--vavi-navy);
  font-size:14px;font-weight:600;cursor:pointer;transition:.13s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--vavi-indigo);background:var(--indigo-soft)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--vavi-navy);border-color:var(--vavi-navy);color:#fff}
.btn-primary:hover{background:var(--vavi-indigo);border-color:var(--vavi-indigo);color:#fff}
.btn-outline{background:#fff;border-color:var(--vavi-indigo);color:var(--vavi-indigo)}
.btn-co{background:var(--co-surface);border-color:#F7E4AE;color:var(--co-primary)}
.btn-co:hover{background:#FCF0D2;border-color:var(--co-primary)}
.btn-danger{background:#fff;border-color:var(--danger-line);color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-sm{min-height:32px;padding:4px 11px;font-size:13px;border-radius:var(--r-xs)}
.btn-lg{min-height:46px;padding:11px 22px;font-size:15px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--vavi-surface);border-color:transparent}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* Badges produit — signature d'origine, jamais une surface pleine : ils disent
   quel moteur a produit le résultat, ils ne colorent pas l'écran. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.badge-co{background:var(--co-surface);color:var(--co-primary)}
.badge-co::before{background:var(--co-gold)}
.badge-sy{background:var(--sy-surface);color:var(--sy-primary)}
.badge-sy::before{background:var(--sy-secondary)}
.badge-va{background:var(--navy-soft);color:var(--vavi-navy)}
.badge-va::before{background:var(--vavi-indigo)}

/* Statuts — les 4 états du classifieur de conformité, jamais une couleur seule :
   toujours accompagnés de leur libellé, pour rester lisibles en daltonisme et
   en impression noir et blanc (un dossier de conformité finit imprimé).
   ok = conforme · part = partiel · gap = non_conforme · none = a_verifier */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill svg{width:13px;height:13px;flex:0 0 13px}
.pill-ok{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.pill-part{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-line)}
.pill-gap{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.pill-info{background:var(--information-bg);color:var(--information);border-color:var(--information-line)}
.pill-none{background:var(--vavi-surface);color:var(--muted);border-color:var(--line-2)}

.tag{display:inline-block;padding:2px 8px;border-radius:var(--r-xs);background:var(--vavi-surface);
  border:1px solid var(--line);font-size:11.5px;color:var(--muted);font-weight:500}

/* ============ 6. ÉTATS — CHARGEMENT, VIDE, ERREUR ============
   Absents du prototype, qui ne montre que des résultats terminés. La réalité
   de l'application est un worker, une file de tâches et des analyses longues :
   sans ces états, chaque écran migré ment sur ce qui est en train de se passer. */
.empty{display:grid;place-items:center;gap:9px;padding:52px 24px;text-align:center}
.empty-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--vavi-surface);color:var(--muted-2)}
.empty-ico svg{width:26px;height:26px}
.empty h3{color:var(--vavi-navy)}
.empty p{color:var(--muted);font-size:13.5px;max-width:52ch}

.err{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--ink-red);font-size:13.5px}
.err svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--danger)}
.err b{display:block;color:var(--danger);margin-bottom:2px}

.note{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--information-bg);border:1px solid var(--information-line);font-size:12.8px;color:var(--ink-blue)}
.note svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}

.spin{width:16px;height:16px;flex:0 0 16px;border-radius:50%;display:inline-block;
  border:2px solid var(--line-2);border-top-color:var(--vavi-indigo);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Barre de progression d'une tâche longue (indexation, diagnostic, campagne). */
.prog{height:6px;border-radius:999px;background:var(--vavi-surface);border:1px solid var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--vavi-indigo);border-radius:999px;transition:width .3s ease}
.prog.ind i{width:35%;animation:ind 1.3s ease-in-out infinite}
@keyframes ind{0%{margin-left:-35%}100%{margin-left:100%}}

/* Squelette de chargement — préserve la hauteur pour éviter le saut de mise
   en page quand le contenu réel arrive. */
.skel{border-radius:var(--r-xs);background:linear-gradient(90deg,var(--vavi-surface) 25%,#E9E9EC 37%,var(--vavi-surface) 63%);
  background-size:400% 100%;animation:skel 1.4s ease infinite;min-height:13px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============ 7. TABLEAUX ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{padding:10px 14px;text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);background:var(--paper)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--paper)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--ff-mono);text-align:right;letter-spacing:-.02em}
/* Un tableau large défile dans son conteneur : la page, elle, ne défile
   jamais horizontalement. */
.tbl-wrap{overflow-x:auto}

/* ============ 8. INDICATEURS ============ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{padding:17px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);text-align:left;cursor:pointer;transition:.15s;border-left:4px solid var(--line-2);
  text-decoration:none;display:block}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kpi.ok{border-left-color:var(--success)} .kpi.part{border-left-color:var(--warning)}
.kpi.gap{border-left-color:var(--danger)} .kpi.none{border-left-color:var(--line-2)}
.kpi-v{font-family:var(--ff-mono);font-size:31px;font-weight:600;color:var(--vavi-navy);letter-spacing:-.04em;line-height:1.05}
.kpi-t{font-size:14px;font-weight:700;color:var(--vavi-navy);margin-top:5px}
.kpi-s{font-size:12.5px;color:var(--muted);margin-top:2px}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.metric{display:flex;align-items:center;gap:13px;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);text-align:left;cursor:pointer;box-shadow:var(--sh-1);text-decoration:none}
.metric:hover{border-color:var(--vavi-indigo);transform:translateY(-2px);box-shadow:var(--sh-2)}
.metric-v{font-family:var(--ff-mono);font-size:26px;font-weight:600;color:var(--vavi-navy);letter-spacing:-.04em;line-height:1}
.metric-l{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.metric-i{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:11px;font-weight:700;margin-left:auto}
.mi-co{background:var(--co-surface);color:var(--co-primary)} .mi-sy{background:var(--sy-surface);color:var(--sy-primary)}
.mi-va{background:var(--navy-soft);color:var(--vavi-navy)} .mi-dg{background:var(--danger-bg);color:var(--danger)}

.mini{padding:14px 15px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-align:left;cursor:pointer}
.mini:hover{border-color:var(--vavi-indigo)}
.mini .eyebrow{margin-bottom:5px}
.mini-v{font-size:23px;font-weight:700;color:var(--vavi-navy);font-family:var(--ff-mono);letter-spacing:-.03em}
.mini-l{font-size:12.5px;color:var(--muted);margin-top:1px}
.mini2{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.mini2 div{padding:10px 12px;border-right:1px solid var(--line)}
.mini2 div:last-child{border-right:0}
.mini2 .k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);display:block}
.mini2 .v{font-size:13px;font-weight:600;color:var(--vavi-navy);margin-top:2px;display:block}

/* ============ 9. SIGNATURE — LA DOUBLE JAUGE ============
   Le composant le plus important du produit. Il sépare deux choses que
   l'interface historique confondait : le taux de conformité (readiness_rate,
   calculé sur ce qui a PU être tranché) et la couverture de preuve
   (evidence_coverage_rate, la part du texte réellement tranchable).
   78 % de conformité sur 39 % de couverture n'est pas un bon résultat : c'est
   un résultat partiel. Les deux chiffres ne se lisent jamais séparément. */
.gauge{display:grid;gap:7px}
.gauge-top{display:flex;align-items:baseline;gap:8px}
.gauge-v{font-family:var(--ff-mono);font-size:26px;font-weight:600;color:var(--vavi-navy);letter-spacing:-.04em}
.gauge-l{font-size:12.5px;color:var(--muted)}
.track{position:relative;height:11px;border-radius:999px;background:var(--vavi-surface);overflow:hidden;border:1px solid var(--line)}
.track i{position:absolute;inset:0 auto 0 0;display:block;border-radius:999px}
.f-ok{background:var(--success)} .f-part{background:var(--warning)} .f-gap{background:var(--danger)} .f-none{background:var(--line-2)}
.track.stack i{position:relative;float:left;height:100%;border-radius:0}
.legend{display:flex;flex-wrap:wrap;gap:5px 15px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

.dual{display:grid;gap:14px;padding:16px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.dual-row{display:grid;gap:6px}
.dual-h{display:flex;align-items:baseline;gap:8px}
.dual-h b{font-size:13.5px;color:var(--vavi-navy)}
.dual-h .mono{margin-left:auto;font-size:15px;font-weight:600;color:var(--vavi-navy)}
.dual-note{display:flex;gap:9px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--information-bg);border:1px solid var(--information-line);font-size:12.8px;color:var(--ink-blue)}
.dual-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}

/* ============ 10. CHAÎNE DE PREUVE ============ */
.chain{display:flex;align-items:stretch;gap:0;padding:5px;background:#fff;border:1px solid var(--line);
  border-radius:999px;overflow-x:auto;box-shadow:var(--sh-1)}
.chain-s{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--muted-2);white-space:nowrap;background:transparent;border:0;cursor:pointer}
.chain-s .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:0 0 19px;
  background:var(--vavi-surface);color:var(--muted-2);font-size:10.5px;font-weight:700;font-family:var(--ff-mono)}
.chain-s.done{color:var(--vavi-ink)}
.chain-s.done .n{background:var(--success);color:#fff}
.chain-s.on{background:var(--navy-soft);color:var(--vavi-navy)}
.chain-s.on.co{background:var(--co-surface);color:var(--co-primary)}
.chain-s.on.co .n{background:var(--co-gold);color:var(--co-gold-ink)}
.chain-s.on.sy{background:var(--sy-surface);color:var(--sy-primary)}
.chain-s.on.sy .n{background:var(--sy-primary);color:#fff}
.chain-s.on.va .n{background:var(--vavi-navy);color:#fff}
.chain-sep{align-self:center;color:var(--line-2);font-size:13px}

/* ============ 11. « POURQUOI ? » ============
   Un système qui affirme sans justifier n'est pas opposable. Chaque verdict,
   chaque recommandation porte son repli explicatif. */
.why{margin-top:9px}
.why summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--vavi-indigo);padding:3px 0}
.why summary::-webkit-details-marker{display:none}
.why summary::before{content:"?";width:16px;height:16px;border-radius:50%;flex:0 0 16px;display:grid;place-items:center;
  background:var(--indigo-soft);color:var(--vavi-indigo);font-size:11px;font-weight:800}
.why[open] summary{margin-bottom:7px}
.why-body{padding:12px 14px;border-radius:var(--r-sm);background:var(--indigo-soft);
  border:1px solid var(--information-line);font-size:13px;color:var(--navy-deep)}
.why-body ul{margin:7px 0 0;padding-left:17px}
.why-body li{margin-bottom:3px}

/* ============ 12. « ET MAINTENANT ? » ============
   Aucun écran ne se termine sur un constat : il se termine sur l'action
   suivante. */
.next{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:22px;padding:17px 20px;
  border-radius:var(--r);background:var(--vavi-navy);color:#fff}
.next h3{color:#fff;font-size:15.5px;margin-bottom:2px}
.next p{color:#C2D7FF;font-size:13px}
.next .btn{background:#fff;border-color:#fff;color:var(--vavi-navy)}
.next .btn:hover{background:var(--co-gold);border-color:var(--co-gold);color:var(--co-gold-ink)}
.next .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.next .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.nextstep{display:flex;gap:17px;align-items:flex-start;padding:19px 21px;border-radius:var(--r);
  border:1px solid var(--information-line);border-left:5px solid var(--vavi-indigo);
  background:linear-gradient(100deg,var(--navy-soft),#fff 62%);margin-bottom:18px}

/* ============ 13. ACCUEIL — CARTES D'INTENTION ============ */
.hero{text-align:center;padding:12px 0 26px}
.hero h1{font-family:var(--ff-display);font-size:40px;font-weight:600;letter-spacing:-.02em}
.hero p{margin-top:9px;color:var(--muted);font-size:15.5px}

.reco{
  display:flex;gap:16px;align-items:flex-start;padding:18px 20px;margin-bottom:22px;
  border:1px solid #F7E4AE;border-left:5px solid var(--co-gold);border-radius:var(--r);
  background:linear-gradient(100deg,var(--co-surface),#fff 62%)
}
.reco-ico{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:grid;place-items:center;
  background:#fff;border:1px solid #F7E4AE;color:var(--co-primary)}
.reco-ico svg{width:21px;height:21px}
.reco h2{font-size:17px;margin-bottom:3px}

.intents{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.intent{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:19px;text-align:left;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-1);cursor:pointer;transition:.15s;text-decoration:none
}
.intent:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.intent.co{border-top-color:var(--co-gold)}
.intent.sy{border-top-color:var(--sy-secondary)}
.intent.va{border-top-color:var(--vavi-indigo)}
.intent.mix{border-top-color:transparent;background:
  linear-gradient(90deg,var(--co-gold) 0 50%,var(--sy-secondary) 50% 100%) top/100% 4px no-repeat,#fff}
.intent-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.intent-ico svg{width:20px;height:20px}
.co .intent-ico{background:var(--co-surface);color:var(--co-primary)}
.sy .intent-ico{background:var(--sy-surface);color:var(--sy-primary)}
.va .intent-ico,.mix .intent-ico{background:var(--navy-soft);color:var(--vavi-navy)}
.intent h3{font-size:16px}
.intent-goal{color:var(--muted);font-size:13.5px;line-height:1.45}
.intent-out{
  display:flex;gap:7px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--vavi-surface);font-size:12.5px;color:var(--vavi-ink);margin-top:2px
}
.intent-out b{color:var(--vavi-navy);font-weight:600}
.intent-foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:11px}
.intent-cta{font-size:13.5px;font-weight:700;color:var(--vavi-navy);display:inline-flex;align-items:center;gap:6px}
.intent:hover .intent-cta{color:var(--vavi-indigo)}
.state{position:absolute;top:14px;right:14px}

/* Estimation portée par une carte : résultat / préparation / durée.
   La durée doit venir des temps réellement mesurés (table `taches`), jamais
   d'une valeur écrite à la main — sinon l'interface promet ce que le moteur
   ne tient pas. */
.estim{display:flex;gap:0;margin-top:2px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.estim div{flex:1;padding:8px 10px;border-right:1px solid var(--line);min-width:0}
.estim div:last-child{border-right:0}
.estim .k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.estim .v{display:block;font-size:12.5px;font-weight:600;color:var(--vavi-navy);margin-top:2px;line-height:1.3}
.rolebadge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-xs);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.rb-1{background:var(--co-surface);color:var(--co-primary)}
.rb-2{background:var(--vavi-surface);color:var(--muted)}
.rb-3{background:var(--sy-surface);color:var(--sy-primary)}

.summary{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:13px}

.way{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh-1)}
.way-s{padding:15px 16px;border-right:1px solid var(--line);position:relative;background:#fff;
  text-align:left;text-decoration:none;border-top:0;border-bottom:0;border-left:0;cursor:pointer}
.way-s:last-child{border-right:0}
.way-s .n{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;
  font-family:var(--ff-mono);font-size:11px;font-weight:700;margin-bottom:8px}
.way-s.co .n{background:var(--co-surface);color:var(--co-primary)}
.way-s.sy .n{background:var(--sy-surface);color:var(--sy-primary)}
.way-s.va .n{background:var(--navy-soft);color:var(--vavi-navy)}
.way-s b{display:block;font-size:13.5px;color:var(--vavi-navy);line-height:1.3}
.way-s span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.way-s::after{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.way-s.co::after{background:var(--co-gold)} .way-s.sy::after{background:var(--sy-secondary)}
.way-s.va::after{background:var(--vavi-indigo)}

/* ============ 14. LISTES ET DRILL-DOWN ============ */
.reg-row{display:grid;grid-template-columns:1fr 260px 150px auto;gap:16px;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  background:#fff;border-left:4px solid transparent;width:100%;border-top:0;border-right:0;text-decoration:none}
.reg-row:hover{background:var(--co-surface);border-left-color:var(--co-gold)}
.reg-row:last-child{border-bottom:0}
.reg-n{display:flex;align-items:center;gap:10px}
.reg-n b{font-size:15px;color:var(--vavi-navy)}
.reg-meta{font-size:11.5px;color:var(--muted-2);margin-top:2px}
.expo{font-family:var(--ff-mono);font-size:13px;color:var(--co-amber);font-weight:600;text-align:right}
.expo small{display:block;font-family:var(--ff);font-size:10.5px;color:var(--muted-2);font-weight:400}

.rowline{display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;padding:13px 17px;
  border-bottom:1px solid var(--line);background:#fff;text-align:left;width:100%;border-left:0;border-right:0;border-top:0;
  text-decoration:none}
.rowline:last-child{border-bottom:0}
.rowline:hover{background:var(--paper)}
.rowline .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:11px;font-weight:700}
.rowline b{display:block;font-size:14px;color:var(--vavi-navy);line-height:1.35}
.rowline p{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Obligation dépliable : question → constat → preuve citée → base juridique →
   action. C'est la chaîne qui rend un constat défendable. */
.oblig{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden;
  border-left:4px solid var(--line-2)}
.oblig.ok{border-left-color:var(--success)} .oblig.part{border-left-color:var(--warning)}
.oblig.gap{border-left-color:var(--danger)} .oblig.none{border-left-color:var(--line-2)}
.oblig-h{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;width:100%;background:0;border:0;
  cursor:pointer;text-align:left}
.oblig-h:hover{background:var(--paper)}
.chev{transition:transform .18s}
.oblig-h[aria-expanded="true"] .chev{transform:rotate(180deg)}
.oblig-q{flex:1;min-width:0}
.oblig-q .art{font-family:var(--ff-mono);font-size:11.5px;font-weight:600;color:var(--co-primary);
  background:var(--co-surface);padding:1px 7px;border-radius:var(--r-xs);margin-right:7px}
.oblig-q p{font-size:14.5px;color:var(--vavi-navy);font-weight:500;line-height:1.45;margin-top:6px}
.oblig-body{padding:0 17px 17px;border-top:1px solid var(--line);margin-top:0;display:grid;gap:14px}
.finding{padding:13px 15px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);font-size:13.5px}

/* Bloc de preuve — SYNTHETIZOR. Ne jamais y afficher un score de confiance
   fabriqué : la seule qualité mesurable ici est la complétude de la source
   (document + page), exposée par `source_complete`. */
.evid{padding:0;border-radius:var(--r-sm);border:1px solid var(--sy-secondary);background:var(--sy-surface);overflow:hidden}
.evid-h{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#fff;border-bottom:1px solid var(--sy-secondary)}
.evid-q{padding:13px 15px;font-size:13.5px;font-style:italic;color:var(--vavi-navy);border-left:3px solid var(--sy-primary);margin:11px 13px;background:#fff;border-radius:0 var(--r-xs) var(--r-xs) 0}
.evid-f{display:flex;flex-wrap:wrap;gap:8px;padding:0 13px 12px;font-size:11.5px;color:var(--muted)}
.action-box{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--navy-soft);border:1px solid var(--information-line)}
/* L'icône est un enfant direct du conteneur flex : sans taille explicite elle
   s'étirerait. Déclarée ici plutôt qu'en style en ligne, pour que les deux
   écrans qui utilisent ce bloc — Mes écarts et le détail d'un règlement —
   s'accordent sans se recopier. */
.action-box > svg{width:20px;height:20px;flex:0 0 20px;color:var(--vavi-indigo);margin-top:1px}
.sev{padding:1px 8px;border-radius:var(--r-xs);font-size:10.5px;font-weight:800;letter-spacing:.06em}
.sev-maj{background:var(--danger-bg);color:var(--danger)} .sev-min{background:var(--warning-bg);color:var(--warning)}

.verdict{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.verdict:last-child{border-bottom:0}
.verdict-n b{font-size:15px;color:var(--vavi-navy)}

/* ============ 15. FILTRES ET ONGLETS ============ */
.filters{display:flex;gap:7px;flex-wrap:wrap;padding:12px 0}
.chip{padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;min-height:34px;text-decoration:none;
  display:inline-flex;align-items:center}
.chip:hover{border-color:var(--vavi-indigo)}
.chip[aria-pressed="true"],.chip.on{background:var(--vavi-navy);border-color:var(--vavi-navy);color:#fff}

.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tab{padding:9px 15px;border:0;border-bottom:3px solid transparent;background:0;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none;display:inline-flex;
  align-items:center}
.tab:hover{color:var(--vavi-navy)}
.tab[aria-selected="true"]{color:var(--vavi-navy);border-bottom-color:var(--co-gold)}
.tab .c{font-family:var(--ff-mono);font-size:11.5px;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--vavi-surface);color:var(--muted)}
.tab[aria-selected="true"] .c{background:var(--co-surface);color:var(--co-primary)}

/* ============ 16. ASSISTANTS PAS-À-PAS ============ */
.wiz{max-width:840px;margin:0 auto}
.wiz-bar{display:flex;gap:6px;margin-bottom:26px}
.wiz-bar i{flex:1;height:5px;border-radius:999px;background:var(--line)}
.wiz-bar i.on{background:var(--co-gold)} .wiz-bar i.done{background:var(--success)}
.wiz-step{text-align:center;margin-bottom:22px}
.wiz-step .eyebrow{color:var(--co-primary)}
.wiz-step h1{font-family:var(--ff-display);font-weight:600;font-size:31px;margin:7px 0 8px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:var(--r);background:#fff;cursor:pointer;text-align:left;min-height:56px;transition:.13s}
.opt:hover{border-color:var(--co-primary);background:var(--co-surface)}
.opt[aria-pressed="true"]{border-color:var(--co-primary);background:var(--co-surface);box-shadow:0 0 0 3px var(--co-gold)}
.opt-box{width:21px;height:21px;flex:0 0 21px;border:1.5px solid var(--line-2);border-radius:5px;display:grid;place-items:center;background:#fff}
.opt[aria-pressed="true"] .opt-box{background:var(--co-primary);border-color:var(--co-primary);color:#fff}
.opt-box svg{width:13px;height:13px;opacity:0}
.opt[aria-pressed="true"] .opt-box svg{opacity:1}
.opt b{font-size:14.5px;color:var(--vavi-navy);display:block}
.opt small{font-size:12.5px;color:var(--muted)}
.wiz-foot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

.score{display:flex;align-items:center;gap:20px;padding:19px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.ring{position:relative;width:96px;height:96px;flex:0 0 96px}
.ring svg{transform:rotate(-90deg)}
.ring-t{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring-t b{font-family:var(--ff-mono);font-size:26px;color:var(--vavi-navy);letter-spacing:-.04em;line-height:1}
.ring-t span{font-size:10.5px;color:var(--muted-2)}
.changes{padding:16px 18px;border-radius:var(--r);background:var(--sy-surface);border:1px solid var(--sy-secondary)}
.changes b{color:var(--sy-primary);font-size:11px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:5px}

/* ============ 17. FICHE CAS D'USAGE ============ */
.uc{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.uc-h{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;padding:17px 19px;border-bottom:1px solid var(--line)}
.uc-n{font-family:var(--ff-mono);font-size:19px;font-weight:600;color:var(--co-primary)}
.uc-two{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.uc-two > div{padding:15px 19px}
.uc-two > div:first-child{border-right:1px solid var(--line)}
.uc-list{padding:15px 19px;border-bottom:1px solid var(--line)}
.uc-list ul{margin:8px 0 0;padding-left:19px}
.uc-list li{font-size:13.5px;color:var(--muted);margin-bottom:4px}
.uc-reg{padding:14px 19px;border-left:4px solid var(--co-gold);background:var(--co-surface);font-size:13px;color:var(--ink-gold)}

/* ============ 18. PROFIL UTILISATEUR ============ */
.me-bar{display:flex;align-items:center;gap:13px;padding:13px 17px;border-radius:var(--r);
  background:var(--vavi-navy);color:#fff;margin-bottom:18px;flex-wrap:wrap}
.me-bar .avatar{background:var(--co-gold)}
.me-bar b{color:#fff;font-size:14.5px}
.me-bar .r{font-size:12.5px;color:#C2D7FF}
.me-tag{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11.5px;color:#fff;font-weight:600}
.me-bar .btn{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.me-bar .btn:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}

.blocks{display:grid;gap:11px}
.block{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r)}
.block .bn{font-family:var(--ff-mono);font-size:13px;font-weight:600;color:var(--co-primary);
  background:var(--co-surface);border-radius:var(--r-xs);height:26px;display:grid;place-items:center}
.block h3{margin-bottom:4px}
.block p{font-size:13.5px;color:var(--muted);line-height:1.55}
.block .anch{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 11px;border-radius:var(--r-sm);
  background:var(--vavi-surface);border:1px solid var(--line);font-size:12.5px;color:var(--vavi-navy);cursor:pointer;
  text-decoration:none}
.block .anch:hover{border-color:var(--vavi-indigo);background:var(--indigo-soft)}

.sim{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.sim-in{display:grid;gap:17px}
.sim-f label{display:flex;align-items:baseline;gap:9px;font-size:13.5px;font-weight:600;color:var(--vavi-navy);margin-bottom:7px}
.sim-f label span{margin-left:auto;font-family:var(--ff-mono);font-size:16px;color:var(--sy-primary);font-weight:600}
.sim-f input[type=range]{width:100%;accent-color:var(--vavi-navy);height:6px}
.sim-out{padding:19px;border-radius:var(--r);background:var(--navy-soft);border:1px solid var(--information-line);text-align:center}
.sim-out .eyebrow{color:var(--vavi-indigo)}
.sim-v{font-family:var(--ff-mono);font-size:36px;font-weight:600;color:var(--vavi-navy);letter-spacing:-.04em;line-height:1.05;margin:7px 0 2px}
.sim-u{font-size:13.5px;color:var(--vavi-navy);font-weight:600}
.sim-d{font-size:12.5px;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px solid var(--information-line)}

/* ============ 19. ALERTES ============ */
.alert{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:16px 18px;
  border-bottom:1px solid var(--line);background:#fff}
.alert:last-child{border-bottom:0}
.alert-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 36px}
.alert-ico svg{width:18px;height:18px}
.a-hi{background:var(--danger-bg);color:var(--danger)} .a-md{background:var(--warning-bg);color:var(--warning)}
.a-lo{background:var(--vavi-surface);color:var(--muted)}
.alert b{font-size:14.5px;color:var(--vavi-navy);display:block;line-height:1.4}
/* « Ce que ça change pour vous » : une alerte sans impact qualifié n'est
   qu'une notification de plus. */
.impact{margin-top:9px;padding:11px 13px;border-radius:var(--r-sm);background:var(--co-surface);
  border:1px solid #F7E4AE;font-size:13px}
.impact b{font-size:12px;color:var(--co-primary);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}

/* ============ 20. PLAN D'ACTION — TABLEAU À COLONNES ============ */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.bcol{background:var(--vavi-surface);border:1px solid var(--line);border-radius:var(--r);padding:11px;
  min-height:150px;transition:background .15s,border-color .15s}
.bcol.over{background:var(--co-surface);border-color:var(--co-gold);box-shadow:inset 0 0 0 2px var(--co-gold)}
.bcol-h{display:flex;align-items:center;gap:9px;padding:2px 4px 11px;border-bottom:1px solid var(--line);margin-bottom:11px}
.bcol-h i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.bcol-h b{flex:1;font-size:13px;color:var(--vavi-navy)}
.bcol-h .n{font-family:var(--ff-mono);font-size:11.5px;color:var(--muted);background:#fff;
  padding:1px 8px;border-radius:999px;border:1px solid var(--line)}
.bcol-empty{padding:22px 10px;text-align:center;font-size:12.5px;color:var(--muted-2);
  border:1px dashed var(--line-2);border-radius:var(--r-sm);background:rgba(255,255,255,.6)}

.bcard{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:var(--r-sm);padding:12px;margin-bottom:9px;
  box-shadow:var(--sh-1);cursor:pointer;transition:box-shadow .15s,transform .1s}
.bcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.bcard:active{cursor:grabbing}
.bcard.maj{border-left-color:var(--danger)} .bcard.min{border-left-color:var(--warning)}
.bcard.clos{border-left-color:var(--success)}
.bcard.dragging{opacity:.4;transform:rotate(1.5deg)}
.bcard-t{display:block;font-size:13.5px;font-weight:600;color:var(--vavi-navy);line-height:1.38;margin:7px 0 0}
.bcard-m{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.bcard-late{color:var(--danger);font-weight:700}
.grip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted-2);margin-left:auto}
.grip svg{width:12px;height:12px}
.who{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-soft);color:var(--vavi-navy);font-size:10px;font-weight:800;font-family:var(--ff-mono)}

.acard{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:11px;border-left:4px solid var(--line-2);overflow:hidden}
.acard.maj{border-left-color:var(--danger)} .acard.min{border-left-color:var(--warning)}
.acard.done{border-left-color:var(--success);opacity:.75}
.acard-h{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;padding:15px 17px;
  width:100%;background:0;border:0;cursor:pointer;text-align:left}
.acard-h:hover{background:var(--paper)}
.acard-h b{font-size:14.5px;color:var(--vavi-navy);display:block;line-height:1.4}
.acard-b{padding:0 17px 16px;display:grid;gap:12px;border-top:1px solid var(--line)}
.forme{padding:12px 14px;border-radius:var(--r-sm);background:var(--co-surface);border:1px solid #F7E4AE;font-size:13px}
.forme b{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--co-primary);margin-bottom:4px}

/* ============ 21. EXPOSITION FINANCIÈRE ============
   Toujours présentée comme un ordre de grandeur adossé à des décisions
   publiées comparables — jamais comme une prévision de sanction. */
.expo-h{padding:17px 19px;border-radius:var(--r);border:1px solid #F7E4AE;background:var(--co-surface);margin-bottom:14px}
.expo-v{font-family:var(--ff-mono);font-size:27px;font-weight:600;color:var(--co-amber);letter-spacing:-.03em;line-height:1.1}
.expo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.expo-c{padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  border-left:4px solid var(--co-gold);text-align:left;cursor:pointer;box-shadow:var(--sh-1);text-decoration:none;display:block}
.expo-c:hover{border-color:var(--co-primary);box-shadow:var(--sh-2)}
.expo-c b{font-size:15px;color:var(--vavi-navy);display:block;margin-bottom:8px}
.expo-c .l{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.expo-c .m{font-family:var(--ff-mono);font-size:13.5px;font-weight:600;color:var(--co-amber)}
.expo-c .m small{display:block;font-family:var(--ff);font-size:10.5px;color:var(--muted-2);font-weight:400}

.vkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.vkpi{padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  text-align:left;cursor:pointer;box-shadow:var(--sh-1);border-top:3px solid var(--line-2);transition:.15s;
  text-decoration:none;display:block}
.vkpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.vkpi.hi{border-top-color:var(--danger)}
.vkpi.hi[aria-expanded="true"]{background:var(--danger-bg);border-color:var(--danger-line)}
.vkpi .k{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.vkpi.hi .k{color:var(--danger)}
.vkpi .v{font-family:var(--ff-mono);font-size:29px;font-weight:600;color:var(--vavi-navy);
  letter-spacing:-.04em;line-height:1.05;margin:5px 0 2px}
.vkpi .s{font-size:12px;color:var(--muted)}
.vkpi.hi .s{color:var(--danger);font-weight:600}
.hilist{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:16px;margin-top:13px;
  border:1px solid var(--danger-line);border-radius:var(--r);background:var(--danger-bg)}
.hiitem{display:flex;align-items:center;gap:11px;padding:10px 13px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;text-align:left;text-decoration:none}
.hiitem:hover{border-color:var(--danger)}
.hiitem b{display:block;font-size:13px;color:var(--vavi-navy);line-height:1.3}

/* ============ 22. INGESTION DOCUMENTAIRE ============ */
.ingest{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--vavi-navy);margin-bottom:6px}
.field select,.field input[type=text],.field textarea{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:#fff;font-size:13.5px;color:var(--vavi-ink)}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--vavi-indigo);outline:none;box-shadow:0 0 0 3px rgba(37,107,237,.18)}
.drop{grid-column:1/-1;padding:26px;border:2px dashed var(--sy-secondary);border-radius:var(--r);
  background:var(--sy-surface);text-align:center}
.drop.over{background:#E7E7FD;border-color:var(--sy-primary)}
.drop svg{width:30px;height:30px;color:var(--sy-primary);margin-bottom:9px}
.filelist{grid-column:1/-1;display:grid;gap:7px}
.filerow{display:flex;align-items:center;gap:11px;padding:9px 13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.filerow .fi{width:28px;height:28px;flex:0 0 28px;border-radius:7px;background:var(--sy-surface);color:var(--sy-primary);display:grid;place-items:center}
.filerow .fi svg{width:14px;height:14px}
.note-sy{grid-column:1/-1;display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--sy-surface);border:1px solid var(--sy-secondary);font-size:12.8px;color:var(--vavi-navy)}
.note-sy svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}

/* ============ 23. FOURNISSEURS ET TIERS ============ */
.sup-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.sup-row{display:grid;grid-template-columns:2fr 130px 1fr 110px 120px auto;gap:14px;align-items:center;
  padding:14px 17px;border-bottom:1px solid var(--line);background:#fff;text-align:left;width:100%;
  border-left:4px solid transparent;border-top:0;border-right:0;cursor:pointer;text-decoration:none}
.sup-row:last-child{border-bottom:0}
.sup-row:hover{background:var(--paper)}
.sup-row.r-hi{border-left-color:var(--danger)} .sup-row.r-md{border-left-color:var(--warning)}
.sup-row.r-lo{border-left-color:var(--success)}
.sup-n{display:flex;align-items:center;gap:11px}
.sup-av{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:var(--navy-soft);color:var(--vavi-navy);font-weight:800;font-size:12px}
.sup-n b{font-size:14.5px;color:var(--vavi-navy);display:block}
.sup-n span{font-size:11.5px;color:var(--muted-2)}
.sc{font-family:var(--ff-mono);font-size:19px;font-weight:600;letter-spacing:-.03em}
.sc-hi{color:var(--danger)} .sc-md{color:var(--warning)} .sc-lo{color:var(--success)}
.spark{display:flex;align-items:flex-end;gap:3px;height:30px}
.spark i{flex:1;background:var(--vavi-indigo);border-radius:2px 2px 0 0;opacity:.75;min-height:3px}
.legend-chart{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:11px}

/* ============ 24. PARAMÉTRAGE ============ */
.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.set{padding:17px;background:#fff;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;text-align:left;
  text-decoration:none;display:block}
.set:hover{border-color:var(--vavi-indigo);box-shadow:var(--sh-1)}
.set-ico{width:36px;height:36px;border-radius:10px;background:var(--navy-soft);color:var(--vavi-navy);
  display:grid;place-items:center;margin-bottom:11px}
.set-ico svg{width:18px;height:18px}

/* ============ 25. SURCOUCHES — TIROIR, MODALE, TOAST ============ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(18,20,26,.42);opacity:0;pointer-events:none;transition:.2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;background:#fff;
  border-left:1px solid var(--line);box-shadow:var(--sh-2);transform:translateX(102%);transition:.24s;
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);
  background:var(--vavi-navy);color:#fff}
.drawer-h h2{color:#fff;font-size:16px;flex:1}
.drawer-b{flex:1;overflow-y:auto;padding:18px;display:grid;gap:12px;align-content:start;background:var(--paper)}
.drawer-f{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:9px}
.msg{padding:12px 14px;border-radius:var(--r);font-size:13.5px;max-width:88%}
.msg.ai{background:#fff;border:1px solid var(--line)}
.msg.me{background:var(--vavi-navy);color:#fff;justify-self:end}
.ctx{padding:9px 12px;border-radius:var(--r-sm);background:var(--co-surface);border:1px solid #F7E4AE;
  font-size:12px;color:var(--co-primary);font-weight:600}
.inp{flex:1;min-height:40px;padding:8px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff}

.dlg-scrim{position:fixed;inset:0;z-index:100;background:rgba(18,20,26,.5);opacity:0;pointer-events:none;transition:.18s}
.dlg-scrim.on{opacity:1;pointer-events:auto}
.dlg{position:fixed;z-index:110;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(920px,94vw);max-height:88vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:.2s;border-left:5px solid var(--line-2)}
.dlg.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.dlg.maj{border-left-color:var(--danger)} .dlg.min{border-left-color:var(--warning)}
.dlg.clos{border-left-color:var(--success)}
.dlg-h{position:sticky;top:0;background:#fff;padding:19px 22px 15px;border-bottom:1px solid var(--line);
  border-radius:var(--r-lg) 0 0 0;z-index:2}
.dlg-h h2{font-size:19px;margin:9px 0 0}
.dlg-b{padding:18px 22px;display:grid;gap:14px}
.dlg-f{position:sticky;bottom:0;background:#fff;padding:14px 22px;border-top:1px solid var(--line);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.dlg-x{position:absolute;top:15px;right:16px}
.move{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line)}
.move label{font-size:12.5px;font-weight:600;color:var(--vavi-navy)}
.move select{flex:1;max-width:230px;min-height:36px;padding:6px 10px;border:1px solid var(--line-2);
  border-radius:var(--r-xs);background:#fff;font-size:13px}

.pop{position:fixed;z-index:110;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(760px,94vw);max-height:88vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:.2s;border-top:5px solid var(--vavi-navy)}
.pop.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pop.co{border-top-color:var(--co-gold)} .pop.sy{border-top-color:var(--sy-primary)}
.pop-h{position:sticky;top:0;background:#fff;padding:19px 22px 15px;border-bottom:1px solid var(--line);z-index:2}
.pop-b{padding:18px 22px;display:grid;gap:13px}
.pop-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pop-x{position:absolute;top:15px;right:16px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);z-index:120;max-width:min(560px,92vw);
  padding:13px 19px;border-radius:var(--r);background:var(--vavi-navy);color:#fff;font-size:13.5px;
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:.2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger)}

/* ============ 26. RESPONSIVE ============
   Règle : le contenu large (tableau, tableau d'actions, diagramme) défile dans
   son propre conteneur. Le corps de page ne défile jamais horizontalement. */
@media (max-width:1180px){
  .grid2{grid-template-columns:1fr}
  .intents{grid-template-columns:repeat(2,1fr)}
  .kpis,.summary-grid{grid-template-columns:repeat(2,1fr)}
  .set-grid{grid-template-columns:repeat(2,1fr)}
  .reg-row{grid-template-columns:1fr 200px;row-gap:10px}
  .expo{text-align:left}
  .sim{grid-template-columns:1fr}
  .uc-two,.mini2{grid-template-columns:1fr}
  .uc-two > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .mini2 div{border-right:0;border-bottom:1px solid var(--line)}
  .mini2 div:last-child{border-bottom:0}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .way{grid-template-columns:repeat(2,1fr)} .way-s{border-bottom:1px solid var(--line)}
  .metrics,.vkpis,.expo-grid{grid-template-columns:repeat(2,1fr)}
  .sup-grid,.ingest{grid-template-columns:1fr}
  .sup-row{grid-template-columns:1fr 110px 100px;row-gap:10px}
  .hilist{grid-template-columns:1fr}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .nav{position:fixed;left:0;top:0;width:min(280px,86vw);transform:translateX(-102%);transition:.24s}
  .nav.on{transform:none;box-shadow:var(--sh-2)}
  .burger{display:grid;place-items:center}
  .view{padding:18px 15px 60px}
  .topbar{padding:9px 15px;flex-wrap:wrap}
  .demo{padding:7px 15px}
  .crumb{width:100%;order:5}
  .hero h1{font-size:29px}
  .intents,.kpis,.summary-grid,.set-grid,.opts.two,.opts.three{grid-template-columns:1fr}
  .reg-row{grid-template-columns:1fr}
  .alert{grid-template-columns:auto 1fr}
  .next{flex-direction:column;align-items:stretch}
  .path{padding:8px 15px}
  .estim{flex-direction:column}
  .estim div{border-right:0;border-bottom:1px solid var(--line)}
  .estim div:last-child{border-bottom:0}
  .block{grid-template-columns:1fr}
  .board{grid-template-columns:1fr}
  .dlg{width:96vw;max-height:92vh}
  .way,.metrics,.vkpis,.expo-grid{grid-template-columns:1fr}
  .sup-row{grid-template-columns:1fr} .nextstep{flex-direction:column}
  .score{flex-direction:column;text-align:center}
}

/* ============ 27. IMPRESSION ============
   Un dossier de conformité finit imprimé ou exporté en PDF pour une revue.
   La coquille n'a alors aucune raison d'être. */
@media print{
  .nav,.topbar,.path,.demo,.drawer,.scrim,.toast,.skip{display:none!important}
  .shell{display:block}
  .view{padding:0;max-width:none}
  .card,.oblig{box-shadow:none;break-inside:avoid}
  a[href]::after{content:""}
}


/* ============================================================================
   28. V17 — SYSTÈME DE BOUTONS
   ----------------------------------------------------------------------------
   Règle sans exception : fond bleu profond, texte TOUJOURS blanc, survol au
   bleu de référence. Une seule variante, COMPLIGENT : fond or, encre foncée,
   survol bleu de référence.

   Ces règles sont volontairement placées en fin de feuille. Le prototype
   contient des règles scopées (.home-v5, .concern-section, .strategy-section)
   plus spécifiques que les règles génériques : toute règle de bouton ajoutée
   ensuite doit être vérifiée par résolution de cascade, pas par simple position.
   ============================================================================ */
.btn,.btn-primary,.btn-outline,.btn-sm,.btn-lg,
.card .btn,.me-bar .btn,.strategy-overview .btn{
  background:var(--vavi-navy);border-color:var(--vavi-navy);color:#FFFFFF}
.btn:hover,.btn-primary:hover,.btn-outline:hover,.btn-sm:hover,.btn-lg:hover,
.card .btn:hover,.me-bar .btn:hover,.strategy-overview .btn:hover{
  background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
.btn *,.btn-primary *{color:inherit}
.btn-ghost{background:transparent;border-color:transparent;color:var(--vavi-navy)}
.btn-ghost:hover{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
.btn-ghost:hover *{color:#FFFFFF}
.btn-co,.btn-gold{background:var(--co-gold);border-color:var(--co-primary);color:var(--co-gold-ink)}
.btn-co:hover,.btn-gold:hover{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
.btn-co:hover *,.btn-gold:hover *{color:#FFFFFF}
.next .btn{background:#FFFFFF;border-color:#FFFFFF;color:var(--vavi-navy)}
.next .btn:hover{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
.next .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.next .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-danger{background:#fff;border-color:var(--danger-line);color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
/* Bouton « modifier » : transparent, cerclé, bleu au survol. */
.btn-clear,.me-bar .btn.btn-clear{background:transparent;border:1px solid var(--vavi-navy);color:var(--vavi-navy)}
.btn-clear:hover,.me-bar .btn.btn-clear:hover{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
/* Texte centré, sans exception. */
.btn,.btn-sm,.btn-lg,.btn-primary,.btn-outline,.btn-ghost,.btn-co,.btn-gold,.intent-cta{
  justify-content:center;text-align:center}

/* Le libellé d'action d'une carte prend l'apparence d'un bouton sans en être
   un : la carte entière est cliquable, un <button> imbriqué serait invalide. */
.intent-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:6px 14px;border-radius:var(--r-sm);
  background:var(--vavi-navy);border:1px solid var(--vavi-navy);color:#FFFFFF;
  font-size:13px;font-weight:600;gap:0;transition:background .13s,border-color .13s}
.intent:hover .intent-cta{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
.intent.co .intent-cta{background:var(--co-gold);border-color:var(--co-primary);color:var(--co-gold-ink)}
.intent.co:hover .intent-cta{background:var(--nav-bg);border-color:var(--nav-bg);color:#FFFFFF}
/* Parcours mixte : liseré au bleu de référence, aucun dégradé. */
.intent.va,.intent.mix{border-top:1px solid var(--line);border-left:4px solid var(--vavi-navy);background:#fff}
.badge-va::before{background:var(--nav-bg)}

/* ============ 29. V17 — BOUTON D'ALERTE PERMANENT ============
   Remplace l'icône discrète : un compteur ne se remarque que s'il est nommé. */
.alert-button{
  min-height:38px;padding:6px 9px 6px 11px;border:1px solid var(--danger);
  background:var(--danger-bg);color:var(--vavi-navy);font-weight:750}
.alert-button svg{width:19px;height:19px;color:var(--danger)}
.alert-button:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.alert-button:hover svg{color:#fff}
.alert-label{font-size:13px}
.alert-count{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--danger);color:#fff;font:800 11px var(--ff-mono)}
.alert-button:hover .alert-count{background:#fff;color:var(--danger)}

/* ============ 30. V17 — ACCUEIL EN TROIS SECTIONS ============
   Système volontairement limité à quatre couleurs :
   VAVI #00379E · SYNTHETIZOR #0054F0 · COMPLIGENT #F0C54C · neutre #F1F1F3 */
.home-v5{display:grid;gap:30px;max-width:1240px}
.home-v5 .hero{text-align:left;padding:28px 2px 4px;background:transparent;border:0}
.home-v5 .hero .eyebrow{color:var(--nav-bg);margin-bottom:7px}
.home-v5 .hero h1{font-family:var(--ff-display);font-size:42px;font-weight:600;
  letter-spacing:-.03em;margin:0 0 9px;max-width:820px}
.home-v5 .hero p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:70ch}

.home-section{position:relative;overflow:hidden;background:var(--vavi-surface);
  border:1px solid rgba(18,20,26,.15);border-radius:20px;box-shadow:0 12px 32px rgba(18,20,26,.08)}
.home-section::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--vavi-navy)}
.home-section-head{display:flex;align-items:flex-start;gap:17px;padding:25px 28px 19px;border:0}
.home-section-head > .section-index{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  flex:0 0 38px;background:var(--vavi-navy);color:#fff;font:700 13px var(--ff-mono)}
.home-section-head h2{font-family:var(--ff-display);font-size:26px;font-weight:600;margin-bottom:5px}
.home-section-head p{font-size:13.5px;color:var(--muted);max-width:76ch}
.home-section-body{padding:0 28px 28px}

.strategy-overview{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:16px 18px;
  background:#fff;border:1px solid rgba(18,20,26,.14);border-radius:13px}
.strategy-overview > div{flex:1;min-width:260px}
.strategy-overview h3{font-family:var(--ff-display);font-size:21px;font-weight:600;margin-bottom:4px}
.strategy-overview p{font-size:13.5px;color:var(--muted)}
.home-decision-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.home-decision-grid .mini{position:relative;min-height:112px;text-align:left;padding:15px 56px 16px 16px;
  background:#fff;border:1px solid rgba(18,20,26,.14);border-radius:13px;box-shadow:none;
  text-decoration:none;display:block}
.home-decision-grid .mini::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--vavi-navy);border-radius:3px 3px 0 0}
.home-decision-grid .mini:hover{border-color:var(--nav-bg);background:#fff}
.home-decision-grid .mini .eyebrow{color:var(--vavi-navy)}
.home-decision-grid .mini-v{font-size:29px;color:var(--vavi-navy)}
.home-decision-grid .mini-l{font-size:12px;color:var(--muted)}
/* Carrés de repère : la couleur suit la norme de risque, jamais l'esthétique. */
.mini-i{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;font-family:var(--ff-mono);font-size:10.5px;font-weight:700;letter-spacing:-.02em}
.mini-i.mi-co{background:var(--co-surface);color:var(--ink-gold)}
.mini-i.mi-high{background:var(--danger-bg);color:var(--risk-high)}
.mini-i.mi-mid{background:var(--warning-bg);color:var(--ink-orange)}
.mini-i.mi-ok{background:var(--success-bg);color:var(--ink-green)}

.recommendation-label{display:flex;align-items:center;gap:10px;margin:23px 0 10px}
.recommendation-label span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--co-gold);color:var(--vavi-navy)}
.recommendation-label svg{width:16px;height:16px}
.recommendation-label h3{font-size:14px;color:var(--vavi-navy)}
.strategy-section .reco{margin:0;border:1px solid rgba(18,20,26,.14);border-left:5px solid var(--co-gold);
  border-radius:13px;box-shadow:none;background:#fff}
.strategy-section .reco-ico{background:var(--vavi-surface);border-color:var(--co-gold);color:var(--vavi-navy)}
.strategy-section .reco .eyebrow{color:var(--vavi-navy)!important}
.strategy-section .reco .estim{background:var(--vavi-surface);border-color:rgba(18,20,26,.12)}
.strategy-section .reco .estim div{border-color:rgba(18,20,26,.12)}

.actions-section .home-section-head{align-items:center}
.actions-section .home-section-head > div{flex:1;min-width:240px}
.home-products{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-left:auto;
  font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--vavi-navy)}
.home-products span{display:inline-flex;align-items:center;gap:7px}
.home-products i{width:9px;height:9px;border-radius:50%;background:var(--vavi-navy)}
.home-products .product-sy i{background:var(--nav-bg)}
.home-products .product-co i{background:var(--co-gold)}
.home-v5 .intents{gap:14px}
.home-v5 .intent{gap:9px;padding:19px;background:#fff;box-shadow:none;
  border:1px solid rgba(18,20,26,.14);border-left:4px solid var(--vavi-navy);border-top-width:1px}
.home-v5 .intent.co{border-left-color:var(--co-gold)}
.home-v5 .intent.sy{border-left-color:var(--nav-bg)}
.home-v5 .intent.va,.home-v5 .intent.mix{border-left-color:var(--vavi-navy);background:#fff}
.home-v5 .intent:hover{transform:translateY(-2px);border-color:var(--vavi-navy);box-shadow:0 9px 22px rgba(18,20,26,.09)}
.home-v5 .intent-ico{background:var(--vavi-surface);color:var(--vavi-navy)}
.home-v5 .intent.sy .intent-ico{color:var(--nav-bg)}
.home-v5 .intent.co .intent-ico{color:var(--vavi-navy);box-shadow:inset 0 0 0 2px var(--co-gold)}
.home-v5 .estim{background:var(--vavi-surface);border-color:rgba(18,20,26,.12)}
.home-v5 .estim div{border-color:rgba(18,20,26,.12)}

/* ============ 31. V17 — CHEMIN VAVI ============
   Cinq blocs arrondis sans cadre, espacés. Pastilles 1–2 en bleu profond
   (ce que vous posez), 3–5 en bleu de référence (ce que l'application produit). */
.journey-card{margin:16px 0 0;border:1px solid var(--information-line);border-radius:13px;
  background:#FFFFFF;box-shadow:none;overflow:hidden}
.journey-card .j-head{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--information-line);background:#fff}
.journey-card .j-head p{font-size:13px;color:var(--muted);margin-top:3px}
.journey-card .j-head .intent-ico{width:36px;height:36px;background:var(--vavi-surface);color:var(--vavi-navy)}
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px 20px;background:#fff}
.j-step{position:relative;background:#DCE8FF;border:0;border-radius:12px;
  padding:15px 15px 16px 48px;text-align:left;cursor:pointer;transition:background .13s;
  text-decoration:none;display:block}
.j-step:hover{background:#C7DAFF}
.j-step .n{position:absolute;left:15px;top:15px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;font:700 11px var(--ff-mono);background:var(--vavi-navy);color:#FFFFFF}
.j-step:nth-child(n+3) .n{background:var(--nav-bg)}
.j-step b{display:block;color:var(--vavi-navy);font-size:13px}
.j-step small{display:block;color:var(--muted);line-height:1.35;margin-top:3px}
.j-note{padding:14px 20px;border-top:1px solid var(--information-line);font-size:13px;
  color:var(--muted);line-height:1.6;background:#fff}
.j-note b{color:var(--vavi-navy)}
.j-note .ex{display:block;margin-top:8px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--information-bg);border-left:3px solid var(--nav-bg);color:var(--navy-deep)}

/* ============ 32. V17 — FICHES DE PROFIL JUMELLES ============
   Deux blocs construits à l'identique : moi, puis mon organisation. Chacun met
   ses trois priorités en évidence ; les critères détaillés partent en pop-up,
   pour que la fiche reste lisible d'un coup d'œil. */
.profile-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.profile-col{display:flex;flex-direction:column;min-width:0}
.profile-duo .blocklabel{margin:0 0 8px 2px}
.blocklabel{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 8px 2px}
.profile-duo .me-bar{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0;
  padding:17px 18px;background:#fff;color:var(--vavi-navy);border:1px solid rgba(18,20,26,.14);box-shadow:none}
.profile-duo .me-bar b{color:var(--vavi-navy)}
.profile-duo .me-bar .r{color:var(--muted)}
.fiche-top{display:flex;align-items:flex-start;gap:12px}
.fiche-top .me-id{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline}
.fiche-top .me-id b{font-size:15.5px}
.fiche-detail{flex:0 0 auto;white-space:nowrap}
.me-id{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0;min-width:180px}
.me-sep{margin:0 8px;color:var(--muted-2);font-size:13px;line-height:1}
.avatar.av-co{background:var(--co-gold);color:var(--co-gold-ink)}

.prio-zone{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:var(--r);
  background:var(--vavi-surface)}
.prio-label{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.prio-item{display:grid;grid-template-columns:9px 1fr;gap:11px;align-items:start}
.prio-item i{width:5px;height:100%;min-height:21px;border-radius:3px;background:var(--vavi-navy);display:block}
.prio-item i.p-hi{background:var(--risk-high)}
.prio-item i.p-mid{background:var(--risk-mid)}
.prio-item i.p-low{background:var(--nav-bg)}
.prio-item b{font-size:16.5px;font-weight:650;color:var(--vavi-navy);line-height:1.3;letter-spacing:-.01em}
.prio-item small{grid-column:2;display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}

/* Repère d'origine : dit si la fiche vient d'une réponse réelle ou d'un défaut. */
.src{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;align-self:flex-start}
.src-ok{color:var(--ink-green);background:var(--success-bg);padding:3px 10px;border-radius:999px}
.src-todo{color:var(--ink-orange);background:var(--warning-bg);padding:3px 10px;border-radius:999px}
.me-actions{display:flex;align-items:center;gap:9px;margin-left:auto;justify-content:flex-end;flex-wrap:wrap}
.profile-duo .me-actions{width:100%;margin:auto 0 0;padding-top:2px;justify-content:flex-end}

/* Fenêtre des critères retenus */
.crit-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.crit{display:grid;grid-template-columns:minmax(150px,32%) 1fr;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:#fff}
.crit:nth-child(even){background:var(--paper)}
.crit:last-child{border-bottom:0}
.crit-k{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.crit-v{font-size:13.5px;color:var(--vavi-navy);font-weight:600}

/* ============ 33. V17 — BIENVENUE ============ */
.onboarding-home{max-width:1140px;padding-top:48px}
.onboarding-shell{overflow:hidden;background:var(--vavi-surface);border:1px solid var(--line);
  border-top:6px solid var(--vavi-navy);border-radius:22px;box-shadow:0 18px 48px rgba(18,20,26,.10)}
.onboarding-intro{text-align:center;padding:44px 34px 30px}
.onboarding-intro h1{margin:13px 0 10px;font-family:var(--ff-display);font-size:43px;font-weight:600;letter-spacing:-.03em}
.onboarding-intro p{max-width:780px;margin:0 auto;color:var(--muted);font-size:16.5px;line-height:1.6}
.onboarding-note{display:block;margin-top:14px;color:var(--vavi-navy);font-size:12.5px;font-weight:650}
.onboarding-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 28px 28px}
.onboarding-choice{display:grid;grid-template-columns:56px minmax(0,1fr);gap:17px;padding:24px;
  border:1px solid var(--line);border-top:4px solid var(--vavi-navy);border-radius:16px;background:#fff;
  text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none}
.onboarding-choice:hover{transform:translateY(-2px);border-color:var(--vavi-navy);box-shadow:0 12px 28px rgba(18,20,26,.10)}
.onboarding-choice.choice-company{border-top-color:var(--co-gold)}
.onboarding-choice.choice-company:hover{border-color:var(--co-gold)}
.choice-mark{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--vavi-navy);color:#fff}
.choice-company .choice-mark{background:var(--co-gold);color:var(--vavi-navy)}
.choice-mark svg{width:25px;height:25px}
.choice-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.choice-copy > strong{margin:5px 0;color:var(--vavi-navy);font:600 25px/1.2 var(--ff-display)}
.choice-lede{color:var(--muted);font-size:13.5px;line-height:1.5;min-height:41px}
.choice-impact{display:grid;gap:3px;width:100%;margin-top:17px;padding:13px 14px;border-radius:10px;
  background:var(--vavi-surface);color:var(--muted);font-size:12.5px;line-height:1.45}
.choice-impact b{color:var(--vavi-navy);font-size:12px}
.choice-cta{display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:var(--vavi-navy);
  font-size:13.5px;font-weight:750}
.choice-cta svg{width:16px;height:16px}
.choice-company .choice-cta{border-bottom:3px solid var(--co-gold)}
.onboarding-bottom{display:flex;align-items:center;gap:18px;padding:19px 28px;border-top:1px solid var(--line);background:#fff}
.remember-choice{display:flex;align-items:flex-start;gap:11px;cursor:pointer;color:var(--vavi-navy)}
.remember-choice input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--vavi-navy)}
.remember-choice span{display:grid;line-height:1.35}
.remember-choice b{font-size:13px}
.remember-choice small{color:var(--muted);font-size:11.5px}
.onboarding-bottom .btn{margin-left:auto}
/* Rappel « passer cette étape » en tête de questionnaire */
.skiprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;
  padding:12px 16px;background:var(--vavi-surface);border-radius:var(--r)}
.skiprow .lbl{font-size:13px;color:var(--muted)}
.skiprow .remember{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.skiprow .remember input{accent-color:var(--vavi-navy);width:16px;height:16px}

/* ============ 34. V17 — CARTOUCHE D'EXPOSITION ============ */
.exposure{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:center;padding:19px;
  border:1px solid #F7E4AE;border-radius:var(--r-lg);background:var(--co-surface)}
.exposure-score{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;text-align:center;
  margin:auto;background:conic-gradient(var(--co-gold) 0 68%,#FCF0D2 68% 100%);position:relative}
.exposure-score::after{content:"";position:absolute;inset:15px;background:#fff;border-radius:50%}
.exposure-score span{position:relative;z-index:1;font:600 31px var(--ff-mono);color:var(--vavi-navy)}
.exposure-score small{display:block;font:600 11px var(--ff);color:var(--muted)}
.change-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.change-card{padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.change-card b{display:block;color:var(--vavi-navy);margin:5px 0}
.change-card p{font-size:12.5px;color:var(--muted)}

/* ============ 35. V17 — TABLEAUX ET BLOCS DE TRAVAIL ============ */
.context-banner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:14px;margin:0 0 18px}
.context-panel{padding:17px 19px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.context-panel.next-step{border-left:5px solid var(--co-gold);background:var(--co-surface)}
.situation-line{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.situation-line .score{font:600 31px var(--ff-mono);color:var(--vavi-navy)}
.situation-line .score small{font:600 12px var(--ff);color:var(--muted)}
.filtered-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin:18px 0 12px}
.fusion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:left;background:var(--paper);padding:10px 12px;border-bottom:1px solid var(--line)}
.data-table td{font-size:13px;padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tr:hover td{background:var(--paper)}
.data-table tbody tr.clickable{cursor:pointer}
.ref-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font:700 11px var(--ff-mono);background:var(--co-surface);color:var(--co-primary)}
.ref-icon.sy{background:var(--sy-surface);color:var(--sy-primary)}
.worktabs{display:flex;gap:4px;overflow:auto;border-bottom:1px solid var(--line);margin:18px 0 14px}
.worktabs button,.worktabs a{padding:9px 13px;border:0;background:transparent;border-bottom:3px solid transparent;
  color:var(--muted);font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer}
.worktabs button[aria-selected=true],.worktabs a[aria-selected=true]{color:var(--vavi-navy);border-bottom-color:var(--co-gold)}
.entity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.entity-card-v4{border:1px solid var(--line);border-top:4px solid var(--vavi-indigo);border-radius:var(--r);
  background:#fff;padding:17px;box-shadow:var(--sh-1)}
.entity-card-v4.active{border-top-color:var(--co-gold);background:var(--co-surface)}
.entity-head-v4{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.entity-stats-v4{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:var(--r-sm);margin:14px 0;overflow:hidden}
.entity-stats-v4 div{padding:9px;border-right:1px solid var(--line);text-align:center}
.entity-stats-v4 div:last-child{border-right:0}
.entity-stats-v4 b{display:block;font:600 17px var(--ff-mono);color:var(--vavi-navy)}
.entity-stats-v4 small{color:var(--muted)}
.audit-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.audit-type{padding:17px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  border-top:4px solid var(--vavi-indigo)}
.audit-type.sy{border-top-color:var(--sy-primary)}
.audit-type.mix{border-top-color:var(--co-gold)}
.upload-zone{border:2px dashed var(--information-line);border-radius:var(--r-lg);padding:24px;
  text-align:center;background:var(--sy-surface)}
.upload-zone .upload-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  margin:0 auto 10px;background:var(--sy-primary);color:#fff}
.risk-badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}
.risk-high{background:var(--danger-bg);color:var(--danger)}
.risk-med{background:var(--warning-bg);color:var(--ink-orange)}
.risk-low{background:var(--success-bg);color:var(--success)}
.v4-note{font-size:12.5px;color:var(--muted);padding:10px 12px;background:var(--vavi-surface);
  border-left:3px solid var(--vavi-indigo);border-radius:0 var(--r-sm) var(--r-sm) 0}

/* Compteur dépliable — modèle « Criticité haute ». */
.nv-stat-v4{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;box-shadow:var(--sh-1);cursor:pointer}
.nv-stat-v4 .label{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.085em;text-transform:uppercase}
.nv-stat-v4 .value{display:block;color:var(--risk-high);font:600 38px var(--ff-mono);margin:8px 0 4px}
.nv-stat-v4 .hint{color:var(--muted);font-size:12.8px}
.critical-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.critical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}
.critical-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;text-decoration:none;text-align:left}
.critical-item b{font-size:12.5px;color:var(--vavi-navy);flex:1}
.critical-item .mono{font-size:10.5px}
.critical-item .risk-badge{flex:0 0 auto}

/* ============ 36. V17 — RESPONSIVE DES NOUVEAUX BLOCS ============ */
@media (max-width:1180px){
  .journey{grid-template-columns:repeat(3,1fr);gap:14px}
  .entity-grid,.fusion-grid,.audit-types,.critical-kpis{grid-template-columns:repeat(2,1fr)}
  .context-banner{grid-template-columns:1fr}
  .profile-duo{grid-template-columns:1fr}
}
@media (max-width:1120px){
  .home-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-products{width:100%;margin-left:55px}
}
@media (max-width:860px){
  .onboarding-home{padding-top:26px}
  .onboarding-intro{padding:34px 22px 24px}
  .onboarding-intro h1{font-size:34px}
  .onboarding-choice-grid{grid-template-columns:1fr;padding:0 18px 18px}
  .onboarding-choice{grid-template-columns:46px minmax(0,1fr);padding:20px}
  .choice-mark{width:46px;height:46px}
  .onboarding-bottom{align-items:flex-start;flex-direction:column;padding:18px}
  .onboarding-bottom .btn{margin-left:0;width:100%}
  .crit{grid-template-columns:1fr;gap:3px}
  .exposure{grid-template-columns:1fr}
}
@media (max-width:760px){
  .home-v5{gap:22px}
  .home-v5 .hero h1{font-size:33px}
  .home-section-head,.home-section-body{padding-left:20px;padding-right:20px}
  .home-products{margin-left:0}
  .home-decision-grid{grid-template-columns:1fr}
  .journey,.entity-grid,.fusion-grid,.audit-types,.change-grid,.critical-grid,.critical-kpis{grid-template-columns:1fr}
}