/* ============================================================================ 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 */ /* ---- CE QUE LA V38 DÉCLARE, ET CE QU'ELLE PEINT ---- Sa seconde couche contredit ses propres jetons en !important. Trois fois, et il faut suivre la PEINTURE, pas la déclaration : jeton déclaré ce qui arrive à l'écran --vavi-ink:#303030 -> body{color:#1F2937!important} --navy-deep:#00256B -> h1,h2,h3,h4{color:#102A56!important} --muted:#62656E -> p,.lede,.muted,small{color:#657286} Les jetons gardent la valeur de la V38 (ils servent ailleurs) ; les trois valeurs peintes vivent dans leurs propres noms ci-dessous. Aligner `--navy-deep` sur #00256B ET peindre les titres avec, comme je l'ai fait un instant, change la couleur de tous les titres de l'application. */ --vavi-ink:#1F2937; --ink-titre:#102A56; /* h1..h4 — la couleur que la V38 REND */ --ink-texte:#657286; /* p, .lede, .muted, small — idem */ --navy-soft:#EBF2FF; --indigo-soft:#EBF2FF; --line:#D9DAE0; --line-2:#D1D1D6; --muted:#62656E; --muted-2:#8E8F98; --paper:#F5F7FA; /* ---- latérale : habillage V26 réel — BLANCHE ---- Ces onze valeurs sont la SEULE chose qui distingue les deux habillages. Les règles .nav-* ne connaissent qu'elles, jamais un blanc ou un rgba en dur : c'est ce qui permet de changer d'habillage avec un attribut sur plutôt qu'en rouvrant la feuille. Les valeurs sont relevées sur la DERNIÈRE définition de .v18-sidebar dans sa feuille, pas la première. Le fichier empile cinq habillages successifs et seul le dernier s'affiche : le dégradé bleu qu'on lit en haut du fichier est mort depuis trois réécritures. */ --nav-surface:#FFFFFF; --nav-fg:#48586D; --nav-fg-soft:var(--muted); --nav-hover:#F3F6FA; --nav-active-bg:#0054F0; --nav-active-fg:#FFFFFF; --nav-edge:#DDE3EA; --nav-edge-strong:#D8E0EA; --nav-panel:#F7F9FC; --nav-chip:#FFFFFF; --nav-invert-bg:#00379E; --nav-invert-fg:#FFFFFF; --nav-shadow:3px 0 16px rgba(11,40,83,.035); --nav-active-shadow:0 5px 14px rgba(0,84,240,.18); /* ---- 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; /* Ombres de la V38 : deux couches, neutres (rgba(18,20,26)) et non teintées de bleu. On avait une seule couche bleutée, plus sèche — d'où des cartes « découpées dans » la page là où la maquette les pose dessus. */ --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; /* ---- LES ALIAS DE LA V38 ---- La maquette pose un SECOND jeu de noms, plus courts, dans son deuxième `:root` : `--vavi`, `--blue`, `--gold`, `--ink`, `--radius`, `--shadow`… Nous ne les déclarions nulle part — et nos fichiers les utilisaient quand même (`var(--gold)`, `var(--ink)`, `var(--shadow)`, 8 appels). Un `var()` sans déclaration ne retombe pas sur une valeur voisine : il ne rend RIEN, et la propriété prend son initiale. C'est une des sources des couleurs qui « ne sont pas les bonnes » sans qu'on trouve la règle fautive. Valeurs reprises telles quelles de la V38. Elles doublent volontairement des jetons ci-dessus (`--blue` = `--vavi-indigo`) : c'est le prix pour que tout balisage copié de la maquette s'affiche sans retouche. */ --vavi:#00379E; --vavi-active:#0054F0; --blue:#0054F0; --blue-soft:#EDF4FF; --deep:#00256B; --neutral:#F0F3F7; --gold:#F0C54C; --gold-soft:#FFF9E8; --surface:#FFFFFF; --ink:#25272C; --radius:12px; --radius-sm:9px; --shadow:0 1px 2px rgba(16,42,86,.03); --shadow-raised:0 16px 42px rgba(16,42,86,.14); /* La grammaire d'accueil de la maquette. */ --home-navy:#00379E; --home-blue:#0054F0; --home-gold:#F0C54C; --home-neutral:#F1F1F3; } /* ============ 2. BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{color-scheme:light} body{ margin:0;background:var(--paper);color:var(--vavi-ink); /* Inter, pas Inter Tight : c'est ce que la V38 force sur `body` et sur les champs de formulaire. `--ff` garde sa valeur (elle sert encore aux légendes `.expo small`, où la maquette la conserve aussi). */ font-family:Inter,"Segoe UI",Arial,sans-serif;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} /* Titre de page à la V26 : 36 px sur le bleu profond, et non plus 29 sur le bleu de marque. Le clamp reprend la valeur mobile de sa propre feuille plutôt qu'une requête média séparée — même résultat, une règle de moins. */ h1{font-size:clamp(29px,1.55rem + 1.1vw,36px);font-weight:700;line-height:1.12;color:var(--navy-deep)} 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 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 `` 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} /* Surtitre V26 : bleu d'action et poids 900. Chez nous il était gris et discret ; là il annonce le module, et c'est ce qui donne son rythme à chaque en-tête. */ .eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--vavi-indigo)} .lede{color:var(--muted);font-size:14px;line-height:1.55;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 : habillage piloté par les tokens --nav-* --- */ .nav{ position:sticky;top:0;height:100vh;z-index:40;display:flex;flex-direction:column; background:var(--nav-surface);color:var(--nav-fg); } .nav-brand{display:flex;align-items:center;gap:11px;padding:19px 18px 17px;border-bottom:1px solid var(--nav-edge); text-decoration:none} .logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 36px; background:var(--nav-invert-bg);color:var(--nav-invert-fg);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:var(--nav-fg)} .brand-s{display:block;font-size:10.5px;color:var(--nav-fg-soft);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:var(--nav-edge-strong);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:var(--nav-fg)} /* Groupe repliable. C'est un
/ : le clavier, l'état déplié annoncé aux lecteurs d'écran et la persistance du repli sont ceux du navigateur, pas d'un script à maintenir. Le chevron est le seul ajout. */ summary.nav-title{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none; padding:3px 0;border-radius:var(--r-xs)} summary.nav-title::-webkit-details-marker{display:none} summary.nav-title::after{content:"";width:0;height:0;margin-left:auto;margin-right:11px; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.65;transition:transform .14s} details[open] > summary.nav-title::after{transform:rotate(180deg)} summary.nav-title:hover{opacity:.82} summary.nav-title:focus-visible{outline:2px solid var(--nav-active-fg);outline-offset:2px} /* Un groupe replié n'a plus besoin de l'écart qui le séparait de ses entrées. */ details.nav-group:not([open]){margin-bottom:6px} @media (prefers-reduced-motion: reduce){ summary.nav-title::after{transition:none} } /* Les items sont des et non des
, et sur un span reste en ligne `height` et `overflow` ne s'appliquent pas — le fond pale s'affichait, les segments colores s'echappaient. Six ecrans montraient une barre vide alors que le calcul etait juste (conformite, qualiopi/conformite, qualiopi/niveaux, campagne_detail, fournisseurs/panel, relecture/atelier). Les variantes en
marchaient : c'est ce qui a rendu la panne invisible. */ .track{display:block;width:100%;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} /* ---- Anneau de pourcentage ---- Le composant .v26-kpi-ring-card de la V26 du métier, porté ici, avec la règle qui va avec : un POURCENTAGE devient un anneau, un VOLUME reste un nombre. La distinction n'est pas cosmétique — un anneau suppose un tout dont la valeur est une part. « 1 448 fiches » n'a pas de tout, en faire un anneau inventerait un dénominateur. Un anneau ne sait pas dire « je ne sais pas » : à 0 % il dessine un cercle vide, que l'œil lit comme un résultat nul. Or ici l'absence de mesure est fréquente et ne vaut PAS zéro — d'où .kpi-ring.vide, qui n'affiche aucun arc. */ .kpi-card{min-height:132px;display:grid;grid-template-columns:82px minmax(0,1fr); grid-template-rows:auto auto;column-gap:14px;align-content:center;align-items:center; padding:15px 17px;border:1px solid var(--line);border-top:4px solid var(--vavi-navy); border-radius:var(--r);background:#fff} .kpi-card.t-ok{border-top-color:var(--risk-ok)} .kpi-card.t-gold{border-top-color:var(--co-gold)} .kpi-card>b{grid-column:2;grid-row:1;align-self:end;font-size:13.5px;color:var(--vavi-navy)} .kpi-card>p{grid-column:2;grid-row:2;align-self:start;margin:4px 0 0} .kpi-ring{--value:0;--tone:var(--vavi-indigo); grid-column:1;grid-row:1 / span 2;position:relative;isolation:isolate;align-self:center; width:76px;height:76px;display:grid;place-items:center;border-radius:50%; background:conic-gradient(var(--tone) calc(var(--value) * 1%), var(--line) 0); color:var(--navy-deep);font-family:var(--ff-mono);font-size:17px;font-weight:700; font-variant-numeric:tabular-nums} /* Peint après le fond de l'anneau, avant son texte : c'est ce qui creuse le disque en anneau sans découper d'image. */ .kpi-ring::before{content:"";position:absolute;z-index:-1;inset:10px;border-radius:50%;background:#fff} .kpi-ring.vide{background:var(--vavi-surface);color:var(--muted-2);font-size:15px} @media (max-width:520px){ .kpi-card{grid-template-columns:68px minmax(0,1fr)} .kpi-ring{width:64px;height:64px;font-size:15px} .kpi-ring::before{inset:9px} } .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} /* Le h1 global est borné à 30ch (couche typo, l.1780) SANS marges auto : dans ce bloc centré, la boîte restait collée à gauche et le titre paraissait décentré (constat du 24/08/2026, matin de démo). */ .hero h1{font-family:var(--ff-display);font-size:40px;font-weight:600;letter-spacing:-.02em;margin-inline:auto} .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. */ /* V36 (raffinement v29) : le statut n'est plus une bordure mais un RAIL détaché, arrondi, en pleine hauteur. Même information, geste de la dernière maquette — et le rail survit au survol là où la bordure se fondait. */ .oblig{position:relative;border:1px solid var(--line);border-radius:var(--r);background:#fff; margin-bottom:10px;overflow:hidden;padding-left:8px} .oblig::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:4px; border-radius:3px;background:var(--line-2)} .oblig.ok::before{background:var(--success)} .oblig.part::before{background:var(--warning)} .oblig.gap::before{background:var(--danger)} .oblig.none::before{background: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)} /* ---- Arbitrer un « à confirmer » ---- Le moteur rend trois verdicts, et le troisième dit exactement « je ne sais pas, quelqu'un doit répondre ». Les deux boutons ne changent pas la règle : ils enregistrent une DÉCISION, datée et signée, par-dessus une règle qui s'abstient. Ces règles vivaient dans le `