/* La page vitrine de Northsystems (C-112) : références Stripe / Ramp, en clair. La DA du produit
   (docs/reference/DA_NORTHSYSTEMS_FR.md) : le fond de §2, la palette, les surfaces opaques sous tout texte, les rayons,
   les ombres teintées. Ajouts réservés à la vitrine (DA §4 « La page vitrine ») : l'échelle d'affichage --t8 / --t9, et
   les écrans du produit redessinés en HTML (les « scènes », plus bas), qui tiennent EN ENTIER dans leur cadre à toute
   largeur (requêtes de conteneur). Points de rupture : 640 / 900 / 1100 px, et aucun autre. */

:root { --t8: 56px; --t9: 72px; }

@font-face { font-family: "Schibsted Grotesk Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url("/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--s7) + var(--s5)); }
body {
  margin: 0; min-height: 100vh;
  background: var(--fond); background-attachment: fixed; background-color: var(--pn2);
  color: var(--tx); font-family: var(--font-texte); font-size: var(--t2); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ac-txt); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--tx); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ac-txt); outline-offset: 2px; border-radius: var(--r1); }

.cadre { width: min(1180px, 100% - 2 * var(--s5)); margin-inline: auto; }

.evitement { position: absolute; left: var(--s4); top: calc(-1 * var(--s7) * 2); z-index: 30; padding: var(--s2) var(--s3); background: var(--pn); color: var(--tx); border-radius: var(--r1); box-shadow: var(--e2); }
.evitement:focus { top: var(--s4); }

/* ---------- Commandes : le relief pressé (DA §3.6), MIROIR de client-web-app/src/styles/coque.css .btn ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: var(--r1);
  font: inherit; font-size: var(--t2); font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ln2); background: var(--pn); color: var(--tx); box-shadow: var(--ctl);
}
.btn:hover { border-color: var(--tx3); }
.btn.primary { background: var(--ac-fill); color: var(--on-fill); border-color: transparent; }
.btn.primary:hover { background: var(--ac-fill-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx2); box-shadow: none; }
.btn.ghost:hover { background: var(--snk); color: var(--tx); }
.btn.grand { padding: var(--s3) var(--s5); font-size: var(--t3); }
.btn.petit { padding: var(--s1) var(--s2); font-size: var(--t1); }
.btn.faux { cursor: default; pointer-events: none; font-size: var(--t1); padding: var(--s2) var(--s3); }

/* Les pastilles et les points de niveau, MIROIR des pastilles de l'app (DA §3.3) : le niveau se dit par un fond ou un
   point, jamais par la couleur d'un texte nu. */
.pastille { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s0) var(--s2); border-radius: var(--r1); font-size: var(--t0); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pastille.neutre { background: var(--neutre-bg); color: var(--neutre-tx); }
.pastille.accent { background: var(--accent-bg); color: var(--accent-tx); }
.pastille.favorable { background: var(--favorable-bg); color: var(--favorable-tx); }
.pastille.vigilance { background: var(--vigilance-bg); color: var(--vigilance-tx); }
.pastille.blocage { background: var(--blocage-bg); color: var(--blocage-tx); }
.pt { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: var(--r1); background: var(--tx3); }
.pt.favorable { background: var(--favorable-tx); }
.pt.vigilance { background: var(--vigilance-tx); }
.pt.blocage { background: var(--blocage-tx); }
.pastille .pt { width: 6px; height: 6px; background: currentColor; }
/* Les étapes du pipeline : MIROIR de client-web-app/src/services/dealStages.ts:BUILTIN_DEAL_STAGES (couleurs de la palette). */
.pt.etape-0 { background: var(--tx2); }
.pt.etape-1 { background: var(--sky-600); }
.pt.etape-2 { background: var(--sky-700); }
.pt.etape-3 { background: var(--sky-800); }

/* ---------- En-tête : une barre de verre qui flotte (DA §2 : libellés seulement, --tx2 au minimum) ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: var(--verre); backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou); border-bottom: 1px solid var(--verre-filet); }
.entete-ligne { display: flex; align-items: center; gap: var(--s6); min-height: 68px; }
.marque { display: inline-flex; align-items: center; gap: var(--s2); color: var(--tx); font-size: var(--t4); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.marque img { width: 36px; height: 36px; }
.entete-nav { display: flex; gap: var(--s5); }
.entete-nav a, .lien-discret { color: var(--tx2); font-size: var(--t2); font-weight: 600; text-decoration: none; }
.entete-nav a:hover, .lien-discret:hover { color: var(--tx); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.btn .court { display: none; }

.langues { position: relative; }
.langues summary { list-style: none; cursor: pointer; color: var(--tx2); font-size: var(--t1); font-weight: 600; padding: var(--s1) var(--s2); border-radius: var(--r1); }
.langues summary:hover { background: var(--pn); color: var(--tx); }
.langues summary::-webkit-details-marker { display: none; }
.langues ul { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 5; margin: 0; padding: var(--s1); list-style: none; min-width: 160px; background: var(--pn); border-radius: var(--r2); box-shadow: var(--e3); }
.langues a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r1); color: var(--tx); font-size: var(--t2); text-decoration: none; }
.langues a:hover { background: var(--snk); }
.langues a[aria-current="true"] { background: var(--accent-bg); color: var(--accent-tx); font-weight: 600; }

/* ---------- Titres en deux tons (DA §4 « La page vitrine ») : l'affirmation, puis sa suite en --tx2 ---------- */
.titre2 { font-size: var(--t7); line-height: 1.08; letter-spacing: -0.03em; font-weight: 650; max-width: 24ch; }
.titre2 > span { display: block; }
.titre2 .suite { color: var(--tx2); }
.ouverture .titre2 { font-size: var(--t9); line-height: 1.02; letter-spacing: -0.04em; max-width: none; }

/* ---------- Ouverture ---------- */
.ouverture { padding-top: var(--s7); }
.ouverture-texte { display: grid; gap: var(--s5); }
.ouverture-accroche { font-size: var(--t5); line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; color: var(--tx); max-width: 36ch; }
.ouverture-detail { font-size: var(--t4); line-height: 1.5; color: var(--tx2); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.acces { font-size: var(--t1); color: var(--tx2); }
.centre { justify-content: center; text-align: center; }

.grande-capture { position: relative; margin: var(--s7) 0 0; }
.cadre-capture { border-radius: var(--r3); box-shadow: var(--e3); overflow: hidden; }

/* ---------- Sections ---------- */
.bloc { margin-top: calc(var(--s7) * 2); }
.bloc > .titre2 { margin-bottom: var(--s4); }
.bloc-texte { font-size: var(--t3); line-height: 1.6; color: var(--tx2); max-width: 40em; margin-bottom: var(--s6); }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: center; }
.colonne-texte { display: grid; gap: var(--s5); align-content: start; }
.colonne-texte p { font-size: var(--t3); line-height: 1.6; color: var(--tx2); max-width: 38em; }

/* Le cadre d'une scène : la surface creuse sur laquelle l'écran se pose, tout entier. */
.cadre-scene { padding: var(--s4); background: var(--snk); border-radius: var(--r3); }
.cadre-scene > .scene > * { box-shadow: var(--e2); }

/* La pré-analyse : trois qualités, puis le comparatif avec le tri manuel. */
.atouts { margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.atouts div { display: grid; gap: var(--s1); padding-top: var(--s4); border-top: 1px solid var(--ln2); }
.atouts dt { font-size: var(--t3); font-weight: 650; }
.atouts dd { margin: 0; color: var(--tx2); }
.comparatif-cadre { margin-top: var(--s7); padding: var(--s3) var(--s4); background: var(--pn); border-radius: var(--r3); }
.comparatif { width: 100%; border-collapse: collapse; font-size: var(--t2); }
.comparatif th, .comparatif td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ln); }
.comparatif thead th { font-size: var(--t2); font-weight: 650; color: var(--tx2); }
.comparatif thead th.nous { color: var(--accent-tx); }
.comparatif tbody th { font-weight: 600; color: var(--tx); width: 20%; }
.comparatif.trois tbody th { width: 16%; }
.comparatif.trois tbody td { width: 28%; }
.comparatif.trois thead td { width: 16%; }
.comparatif td { color: var(--tx2); }
.comparatif td.nous { color: var(--tx); font-weight: 600; background: var(--accent-bg); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }

/* La plateforme : quatre étapes (une vraie suite, d'où les numéros). */
.etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); margin-top: var(--s7); }
.etape { display: grid; align-content: start; gap: var(--s3); }
.etape-tete { display: flex; align-items: center; gap: var(--s3); }
.etape h3 { font-size: var(--t5); font-weight: 650; letter-spacing: -0.015em; }
.etape > p { color: var(--tx2); max-width: 44ch; }
.etape .cadre-scene { margin-top: var(--s2); }
.etape-num { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r3); background: var(--accent-bg); color: var(--accent-tx); font-family: var(--font-chiffres); font-size: var(--t1); font-weight: 500; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.points li { position: relative; padding-left: var(--s5); font-size: var(--t3); }
.points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 2px; border-radius: var(--r1); background: var(--sky-500); }

/* La mise en place : trois étapes numérotées, et la grille d'un fonds. */
.etapes-liste { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: var(--s4); }
.etapes-liste li { counter-increment: etape; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); }
.etapes-liste li::before { content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r3); background: var(--accent-bg); color: var(--accent-tx); font-family: var(--font-chiffres); font-size: var(--t1); font-weight: 500; }
.etapes-liste b { font-size: var(--t3); font-weight: 650; }
.etapes-liste span { color: var(--tx2); }

.grille { margin: 0; display: grid; gap: var(--s3); padding: var(--s5); background: var(--snk); border-radius: var(--r3); }
.grille-tete { font-size: var(--t3); font-weight: 650; }
.grille table { width: 100%; border-collapse: collapse; background: var(--pn); border-radius: var(--r2); overflow: hidden; font-size: var(--t2); }
.grille th { text-align: left; font-size: var(--t1); font-weight: 600; color: var(--tx3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--ln); }
.grille th:last-child, .grille td:last-child { text-align: right; }
.grille td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--ln); }
.grille tr:last-child td { border-bottom: 0; }
.grille-poids { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s3); width: 100%; }
.grille-poids b { font-family: var(--font-chiffres); font-weight: 500; min-width: 3.2em; text-align: right; }
.grille-barre { flex: 1; max-width: 140px; min-width: 32px; height: 6px; background: var(--snk); border-radius: var(--r1); overflow: hidden; }
.grille-barre i { display: block; height: 100%; width: var(--v); background: var(--sky-500); border-radius: var(--r1); }
.grille-alertes { display: grid; gap: var(--s2); }
.grille-alertes > span { font-size: var(--t1); font-weight: 600; color: var(--tx2); }
.grille-alertes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.grille-alertes .pastille { font-size: var(--t1); padding: var(--s1) var(--s2); }

.securite-liste { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.securite-liste div { padding-top: var(--s4); border-top: 1px solid var(--ln2); }
.securite-liste dt { font-size: var(--t4); font-weight: 650; letter-spacing: -0.01em; }
.securite-liste dd { margin: var(--s2) 0 0; font-size: var(--t2); color: var(--tx2); }

/* La démonstration de la pré-analyse : le processus, coché étape par étape, à côté de la fiche qu'il produit. */
.analyse-demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: start; }
.processus-cadre { display: grid; gap: var(--s4); padding: var(--s5); background: var(--pn); border-radius: var(--r3); }
.processus-tete { display: flex; align-items: center; gap: var(--s2); font-size: var(--t2); font-weight: 650; }
.processus-tete::before { content: ""; width: 8px; height: 8px; border-radius: var(--r1); background: var(--sky-500); }
.processus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.processus li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); }
.processus li > span { display: grid; gap: var(--s0); }
.processus b { font-size: var(--t2); font-weight: 650; }
.processus li > span > span { font-size: var(--t1); color: var(--tx2); }
.coche { width: 22px; height: 22px; flex: none; padding: var(--s1); border-radius: var(--r3); background: var(--favorable-bg); fill: none; stroke: var(--favorable-tx); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* North AI : quinze exemples rangés par thème, la demande, les outils utilisés, un rendu propre à chaque exemple
   (recherche web, graphique, liste, comparaison, mémo, frise, pipeline, vote, tâches, agenda, e-mail, trésorerie, réseau,
   chiffres de la semaine), puis la réponse. */
.deux-colonnes.haut { align-items: start; }
.na-demo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s5); padding: var(--s5); background: var(--snk); border-radius: var(--r3); }
.na-exemples { display: grid; align-content: start; gap: var(--s0); }
.na-categorie { padding: var(--s3) var(--s3) var(--s1); font-size: var(--t0); font-weight: 600; color: var(--tx2); }
.na-categorie:first-child { padding-top: 0; }
.na-exemples button { padding: var(--s2) var(--s3); border: 0; border-radius: var(--r1); background: transparent; color: var(--tx2); font: inherit; font-size: var(--t1); font-weight: 600; text-align: left; cursor: pointer; }
.na-exemples button:hover { background: var(--pn2); color: var(--tx); }
.na-exemples button[aria-selected="true"] { background: var(--pn); color: var(--tx); box-shadow: var(--e2); }
.na-scene { min-width: 0; container-type: inline-size; }
.na-panneau { display: grid; gap: var(--s3); min-height: 560px; align-content: start; }
.na-panneau[hidden] { display: none; }
.na-msg { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--t2); }
.na-msg > span { font-size: var(--t1); font-weight: 600; color: var(--tx2); }
.na-msg.moi { justify-self: end; max-width: 88%; background: var(--bulle-moi); }
.na-travail { display: grid; gap: var(--s3); padding: var(--s4); background: var(--pn); border-radius: var(--r2); }
.na-qui { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t1); font-weight: 600; color: var(--tx2); }
.na-qui svg { width: 14px; height: 14px; flex: none; fill: var(--sky-500); }
.na-outils { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.na-outils li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2); font-size: var(--t1); color: var(--tx2); }
.na-outils .coche { width: 18px; height: 18px; }
.na-reponse { padding-top: var(--s3); border-top: 1px solid var(--ln); font-size: var(--t2); }
.na-boutons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); }
.na-rendu { display: grid; gap: var(--s2); padding: var(--s3); background: var(--pn2); border: 1px solid var(--ln); border-radius: var(--r2); }
.na-rendu-titre { font-size: var(--t2); font-weight: 650; }

/* La recherche web : les requêtes, puis les sources numérotées. */
.na-requetes { display: flex; flex-wrap: wrap; gap: var(--s1); }
.na-requetes span { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); background: var(--pn); border: 1px solid var(--ln); border-radius: var(--r1); font-size: var(--t0); color: var(--tx2); }
.na-requetes svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.na-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.na-source { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s2); padding: var(--s2); background: var(--pn); border-radius: var(--r1); }
.na-source b { display: block; font-size: var(--t0); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.na-source small { font-size: var(--t0); color: var(--tx3); }
.na-source-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r1); background: var(--accent-bg); color: var(--accent-tx); font-family: var(--font-chiffres); font-size: var(--t0); }

/* Le graphique : des barres empilées qui montent, mois par mois. */
.na-barres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); height: 150px; align-items: end; }
.na-pile { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s1); height: 100%; }
.na-pile-barres { display: flex; flex-direction: column-reverse; gap: var(--s0); min-height: 0; overflow: hidden; }
.na-pile i { display: block; border-radius: var(--r1); transform-origin: bottom; transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d); }
.na-pile span { text-align: center; font-size: var(--t0); color: var(--tx3); }
.serie-0 { background: var(--sky-700); }
.serie-1 { background: var(--sky-500); }
.serie-2 { background: var(--sky-200); }
.na-legende { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--t0); color: var(--tx2); }
.na-legende span { display: inline-flex; align-items: center; gap: var(--s1); }
.na-legende i { width: 10px; height: 10px; border-radius: var(--r1); }
.anime [data-demo]:not(.fini) .na-graphe:not(.vu) .na-pile i { transform: scaleY(0); }

/* La liste filtrée et la comparaison. */
.na-filtres { display: flex; flex-wrap: wrap; gap: var(--s1); }
.na-lignes { display: grid; }
.na-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--ln); }
.na-comp-tete, .na-comp-ligne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); align-items: center; gap: var(--s3); font-size: var(--t1); }
.na-comp-tete b { font-size: var(--t1); }
.na-comp-ligne > span:first-child { color: var(--tx2); }
.na-jauge { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.na-jauge i { display: block; height: 8px; border-radius: var(--r1); background: linear-gradient(90deg, var(--sky-500) var(--v), var(--snk) var(--v)); transform-origin: left; transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.na-jauge.b i { background: linear-gradient(90deg, var(--sky-300) var(--v), var(--snk) var(--v)); }
.na-jauge b { font-family: var(--font-chiffres); font-size: var(--t0); font-weight: 500; }
.anime [data-demo]:not(.fini) .na-comparaison:not(.vu) .na-jauge i { transform: scaleX(0); }

/* Le mémo et le brief, la frise d'un dossier déjà vu. */
.na-doc { gap: var(--s3); }
.na-frise { list-style: none; margin: 0; display: grid; gap: var(--s3); }
.na-frise li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--s3); font-size: var(--t1); }
.na-frise li + li { padding-top: var(--s3); border-top: 1px solid var(--ln); }
.na-frise-date { font-family: var(--font-chiffres); font-size: var(--t0); color: var(--tx2); }

/* Le deal qui passe d'une étape à la suivante. */
.na-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
.na-pipe .sc-deal { grid-column: 1; grid-row: 2; transition: transform 800ms cubic-bezier(0.3, 0.6, 0.2, 1), opacity 400ms ease; transform: translateX(calc(100% + var(--s3))); }
.anime [data-demo]:not(.fini) .na-pipe .na-mobile:not(.vu) { opacity: 1; transform: translateX(0); }

/* Les tâches, l'agenda de la semaine, l'e-mail. */
.na-taches { gap: var(--s2); }
.na-tache { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--pn); border-radius: var(--r1); }
.na-tache b { display: block; font-size: var(--t1); font-weight: 600; }
.na-tache small { font-size: var(--t0); color: var(--tx3); }
.na-case { width: 16px; height: 16px; border: 1.5px solid var(--ln2); border-radius: var(--r1); }
.na-agenda { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); }
.na-jour { display: grid; grid-template-rows: auto 1fr; gap: var(--s1); }
.na-jour > span { font-size: var(--t0); font-weight: 600; color: var(--tx2); text-align: center; }
.na-creneaux { position: relative; height: 170px; background: var(--pn); border-radius: var(--r1); }
.na-evenement { position: absolute; left: var(--s1); right: var(--s1); top: 18%; display: grid; gap: var(--s0); padding: var(--s2); background: var(--ac-fill); border-radius: var(--r1); }
.na-evenement b { font-size: var(--t0); font-weight: 600; color: var(--on-fill); overflow-wrap: anywhere; hyphens: auto; }
.na-evenement small { font-family: var(--font-chiffres); font-size: var(--t0); color: var(--on-fill); }
.na-avatars { display: flex; }
.na-avatars .sc-avatar { width: 14px; height: 14px; margin-left: calc(-1 * var(--s0)); border: 1.5px solid var(--ac-fill); background: var(--sky-200); font-size: 0; }
.na-avatars .sc-avatar:first-child { margin-left: 0; }
.na-occupe { position: absolute; left: var(--s1); right: var(--s1); top: 12%; height: 22%; background: var(--snk); border-radius: var(--r1); }
.na-occupe.bas { top: 60%; }
.na-mail { gap: var(--s1); background: var(--pn); }
.na-mail > span:first-child { font-size: var(--t0); color: var(--tx3); }
.na-mail b { font-size: var(--t1); }
.na-mail p { font-size: var(--t1); color: var(--tx2); }
.na-lien { justify-self: start; padding: var(--s1) var(--s3); border-radius: var(--r1); background: var(--ac-fill); color: var(--on-fill); font-size: var(--t0); font-weight: 600; }

/* La trésorerie face au seuil, le chemin d'introduction, les chiffres de la semaine. */
.na-treso { position: relative; gap: var(--s3); padding-bottom: var(--s6); }
.na-treso-ligne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; align-items: center; gap: var(--s3); font-size: var(--t1); }
.na-treso-ligne b { font-family: var(--font-chiffres); font-size: var(--t0); font-weight: 500; white-space: nowrap; }
.na-treso-barre { height: 10px; background: var(--snk); border-radius: var(--r1); overflow: hidden; }
.na-treso-barre i { display: block; height: 100%; width: var(--v); background: var(--sky-500); border-radius: var(--r1); transform-origin: left; transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.na-treso-barre.sous i { background: var(--blocage-tx); }
.na-seuil { position: absolute; bottom: var(--s2); left: var(--s3); font-size: var(--t0); font-weight: 600; color: var(--blocage-tx); }
.anime [data-demo]:not(.fini) .na-treso:not(.vu) .na-treso-barre i { transform: scaleX(0); }
.na-reseau svg { width: 100%; height: auto; }
.na-lien-gris { fill: none; stroke: var(--ln2); stroke-width: 1.5; }
.na-chemin { fill: none; stroke: var(--sky-500); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms cubic-bezier(0.3, 0.6, 0.2, 1); transition-delay: 300ms; }
.anime [data-demo]:not(.fini) .na-reseau:not(.vu) .na-chemin { stroke-dashoffset: 1; }
.na-noeud { fill: var(--pn); stroke: var(--ln2); stroke-width: 1.5; }
.na-reseau .sc-n-vous { fill: var(--ac-fill); }
.na-noeud.fort { stroke: var(--sky-500); stroke-width: 2.5; }
.na-reseau-noms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--t0); font-weight: 600; color: var(--tx2); }
.na-reseau-noms span:nth-child(2) { text-align: center; }
.na-reseau-noms span:nth-child(3) { text-align: right; }
.na-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.na-tuile { display: grid; gap: var(--s0); padding: var(--s2) var(--s3); background: var(--pn); border-radius: var(--r1); }
.na-tuile b { font-size: var(--t6); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; color: var(--ac-txt); }
.na-tuile span { font-size: var(--t0); color: var(--tx2); }

/* Les démonstrations (DA §4, C-114) : sous `html.anime`, une étape attend son tour ; jouée, elle se pose. Sans script,
   avec le mouvement réduit, ou une fois la démonstration finie, tout est affiché. */
[data-etape] { transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), stroke-dashoffset 1400ms cubic-bezier(0.3, 0.6, 0.2, 1); }
.anime [data-demo]:not(.fini) [data-etape]:not(.vu) { opacity: 0; transform: translateY(8px); }
.anime [data-demo]:not(.fini) .sc-courbe:not(.vu) { opacity: 1; transform: none; stroke-dashoffset: 1; }
.sc-courbe { stroke-dasharray: 1; stroke-dashoffset: 0; }
.anime [data-demo]:not(.fini) .sc-repere td { background: transparent; }
.sc-deal.arrive { border-color: var(--sky-300); }

/* Ce que le fonds reçoit : le mémo, et la liste des livrables. */
.livrables { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; margin-top: var(--s6); }
.livrables-texte { display: grid; gap: var(--s4); }
.livrables-texte h3 { font-size: var(--t5); font-weight: 650; letter-spacing: -0.015em; }
.livrables-liste, .garanties { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.livrables-liste li, .garanties li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); font-size: var(--t3); }

/* North AI : ce qu'il sait faire, et ses garanties. */
.etendue { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); margin-top: var(--s7); }
.etendue p { font-size: var(--t4); line-height: 1.4; color: var(--tx2); max-width: 40ch; }
.capacites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.capacite { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--ln2); }
.capacite h3 { font-size: var(--t4); font-weight: 650; letter-spacing: -0.01em; }
.capacite p { color: var(--tx2); }
.garanties { margin-top: var(--s6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.garanties li { font-size: var(--t2); font-weight: 600; }

/* La sécurité : les deux engagements sur l'IA en tête, puis trois points. */
.vedettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.vedette { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); background: var(--pn); border-radius: var(--r3); }
.vedette-zero { font-size: var(--t9); line-height: 1; font-weight: 650; letter-spacing: -0.04em; color: var(--ac-txt); font-variant-numeric: tabular-nums; }
.vedette h3 { font-size: var(--t5); font-weight: 650; letter-spacing: -0.015em; }
.vedette p { color: var(--tx2); font-size: var(--t3); line-height: 1.6; max-width: 44ch; }

/* L'appel final : une démonstration, et contact@. */
.final { margin-top: calc(var(--s7) * 2); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; padding: var(--s7); background: var(--pn); border-radius: var(--r3); }
.final-actions { display: grid; gap: var(--s3); justify-items: start; }
.final-mail { color: var(--tx2); }
.final-mail a { font-weight: 600; text-decoration: none; }
.final-mail a:hover { text-decoration: underline; }

/* ---------- Pied ---------- */
.pied { margin-top: calc(var(--s7) * 2); padding-block: var(--s7); background: var(--pn); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.pied-marque { display: grid; gap: var(--s3); align-content: start; }
.pied-marque p { color: var(--tx2); max-width: 30ch; }
.pied-col { display: grid; gap: var(--s2); align-content: start; }
.pied-col span { font-size: var(--t2); font-weight: 650; margin-bottom: var(--s1); }
.pied-col a { color: var(--tx2); font-size: var(--t2); text-decoration: none; overflow-wrap: anywhere; }
.pied-col a:hover { color: var(--tx); }

/* ---------- Pages légales et 404 : une colonne de lecture sobre ---------- */
.texte-legal, .introuvable { display: grid; gap: var(--s6); margin-top: var(--s7); padding: var(--s7); background: var(--pn); border-radius: var(--r3); max-width: 820px; }
.texte-legal h1, .introuvable h1 { font-size: var(--t6); letter-spacing: -0.02em; }
.texte-legal section { display: grid; gap: var(--s2); }
.texte-legal h2 { font-size: var(--t3); }
.texte-legal p, .introuvable p { color: var(--tx2); max-width: 44em; }
mark { background: var(--vigilance-bg); color: var(--vigilance-tx); padding: 0 var(--s1); border-radius: var(--r1); }

/* ======================================================= les scènes du produit ======================================================= */
/* Les écrans de l'app redessinés (DA §4) avec ses composants : menu, tableau, pastilles, anneaux de note, colonnes du
   pipeline, vote du comité. Le texte suit l'app (--t0 / --t1 / --t2) ; tout texte est posé sur une surface opaque.
   Chaque scène est un conteneur : elle s'adapte à SA largeur (requêtes de conteneur aux mêmes seuils que la page), et
   rien n'est jamais rogné. */
.scene { container-type: inline-size; color: var(--tx); font-size: var(--t1); line-height: 1.4; text-align: left; letter-spacing: 0; }
.scene b { font-weight: 600; }
.sc-nav svg, .sc-champ svg, .sc-bouton svg, .sc-fichier svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-titre { font-size: var(--t4); font-weight: 650; letter-spacing: -0.01em; }
.sc-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.sc-sous { display: flex; align-items: center; flex-wrap: wrap; color: var(--tx2); }
.sep { display: inline-block; width: 1px; height: 12px; margin-inline: var(--s2); background: var(--ln2); }
.sc-tag { display: inline-flex; padding: var(--s0) var(--s2); border-radius: var(--r1); background: var(--accent-bg); color: var(--accent-tx); font-size: var(--t0); font-weight: 600; white-space: nowrap; }
.sc-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--r3); background: var(--snk); color: var(--tx2); font-size: var(--t0); font-weight: 600; }
.sc-note { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-chiffres); font-size: var(--t2); font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-note.faible { color: var(--tx3); }
.sc-chiffre { font-family: var(--font-chiffres); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sc-panneau { display: grid; align-content: start; gap: var(--s3); min-width: 0; padding: var(--s4); background: var(--pn); border-radius: var(--r2); }
.sc-barre { display: flex; align-items: center; gap: var(--s3); }
.sc-barre .sc-titre { margin-right: auto; }
.sc-champ { display: inline-flex; align-items: center; gap: var(--s2); width: 200px; padding: var(--s1) var(--s3); border: 1px solid var(--ln2); border-radius: var(--r1); color: var(--tx3); }
.sc-bouton { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border: 1px solid var(--ln2); border-radius: var(--r1); background: var(--pn); box-shadow: var(--ctl); font-weight: 600; white-space: nowrap; }
.sc-bouton.primaire { background: var(--ac-fill); color: var(--on-fill); border-color: transparent; box-shadow: none; }
.sc-compte { font-size: var(--t0); color: var(--tx3); }

.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { padding: var(--s2) var(--s3); text-align: left; font-size: var(--t0); font-weight: 600; color: var(--tx3); border-bottom: 1px solid var(--ln); white-space: nowrap; }
.sc-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ln); vertical-align: middle; }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-soc b { display: block; font-size: var(--t2); }
.sc-soc span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); font-size: var(--t0); color: var(--tx3); }
.sc-pf .sc-soc span { gap: var(--s2); }

/* L'app entière, sur le fond de l'app : le menu en deux blocs, la liste, North AI ouvert à droite. */
.sc-app { display: grid; grid-template-columns: 196px minmax(0, 1fr) 290px; gap: var(--s3); padding: var(--s3); background: var(--fond); border: 1px solid var(--pn); border-radius: var(--r3); }
.sc-app .sc-panneau { padding: var(--s4) var(--s5); }
.sc-cote { display: grid; align-content: start; gap: var(--s3); }
.sc-marque { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--pn); border-radius: var(--r2); }
.sc-marque img { width: 28px; height: 28px; }
.sc-marque b { display: block; font-size: var(--t1); }
.sc-marque small { display: block; font-size: var(--t0); color: var(--tx3); }
.sc-nav { display: grid; gap: var(--s0); padding: var(--s2); background: var(--pn); border-radius: var(--r2); }
.sc-nav small { padding: var(--s2) var(--s2) var(--s1); font-size: var(--t0); font-weight: 600; color: var(--tx3); }
.sc-nav span { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--r1); color: var(--tx2); }
.sc-nav span.actif { background: var(--accent-bg); color: var(--accent-tx); font-weight: 600; box-shadow: inset 2px 0 0 var(--ac-fill); }
.sc-repere td { background: var(--accent-bg); transition: background-color 600ms ease; }
.sc-ia { display: grid; align-content: start; gap: var(--s3); padding: var(--s4); background: var(--pn); border-radius: var(--r2); }
.sc-ia svg { width: 14px; height: 14px; flex: none; fill: var(--sky-500); }
.sc-ia-tete { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--ln); font-size: var(--t2); font-weight: 650; }
.sc-bulle { display: grid; gap: var(--s1); padding: var(--s3); border-radius: var(--r2); font-size: var(--t1); line-height: 1.5; }
.sc-bulle > span { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t0); font-weight: 600; color: var(--tx2); }
.sc-bulle.moi { justify-self: end; max-width: 92%; background: var(--bulle-moi); }
.sc-bulle.ia { background: var(--bulle-autre); }

/* Le formulaire de candidature aux couleurs d'un fonds client : le vert est celui du fonds d'exemple (le formulaire
   prend la marque du fonds, DA §4), le blanc posé dessus garde un contraste de 7,6. */
.sc-form { --marque-fonds: #1d5c45; display: grid; background: var(--pn); border-radius: var(--r2); overflow: hidden; }
.sc-form-tete { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--marque-fonds); color: var(--on-fill); font-size: var(--t2); }
.sc-form-logo { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r1); background: var(--on-fill); color: var(--marque-fonds); font-weight: 700; }
.sc-form-corps { display: grid; gap: var(--s3); padding: var(--s4); }
.sc-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
.sc-etapes i { height: 4px; border-radius: var(--r1); background: var(--snk); }
.sc-etapes i.fait { background: var(--marque-fonds); }
.sc-champ-form { display: grid; gap: var(--s1); }
.sc-champ-form > span:first-child { font-size: var(--t0); font-weight: 600; color: var(--tx2); }
.sc-saisie, .sc-fichier { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--ln2); border-radius: var(--r1); }
.sc-fichier > span { min-width: 0; overflow-wrap: anywhere; }
.sc-fichier small { margin-left: auto; color: var(--tx3); font-size: var(--t0); white-space: nowrap; }
.sc-recu { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t0); font-weight: 600; color: var(--favorable-tx); }
.sc-recu .coche { width: 18px; height: 18px; }
.sc-form-envoyer { justify-self: start; padding: var(--s2) var(--s4); border-radius: var(--r1); background: var(--marque-fonds); color: var(--on-fill); font-weight: 600; }

/* La fiche d'un dossier : la note, puis un bloc par critère (anneau, points, justification). */
.sc-fiche { gap: var(--s4); }
.sc-fiche-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--ln); }
.sc-fiche-id { display: grid; gap: var(--s1); margin-right: auto; }
.sc-anneau { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; }
.sc-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-anneau circle { fill: none; stroke-width: 5; }
.sc-anneau-fond { stroke: var(--snk); }
.sc-anneau-arc { stroke: var(--sky-500); stroke-linecap: round; }
.sc-anneau b { position: relative; font-family: var(--font-chiffres); font-size: var(--t0); font-weight: 500; }
.sc-anneau.grand { width: 76px; height: 76px; }
.sc-anneau.grand b { font-family: var(--font-texte); font-size: var(--t5); font-weight: 700; }
.sc-criteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.sc-critere { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ln); }
.sc-critere-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s2); }
.sc-critere-tete span { font-family: var(--font-chiffres); font-size: var(--t0); color: var(--tx2); white-space: nowrap; }
.sc-critere p { margin-top: var(--s1); font-size: var(--t0); line-height: 1.45; color: var(--tx2); }

/* Le mémo d'un dossier : synthèse, points forts et de vigilance, questions, sources. */
.sc-memo { gap: var(--s4); }
.sc-memo-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--ln); }
.sc-memo-bloc { display: grid; gap: var(--s1); }
.sc-memo-bloc > span { font-size: var(--t0); font-weight: 600; color: var(--tx3); }
.sc-memo-bloc p, .sc-memo-bloc li { font-size: var(--t1); line-height: 1.5; color: var(--tx2); }
.sc-memo-bloc ul, .sc-memo-bloc ol { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s1); }
.sc-memo-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.sc-memo-sources { font-size: var(--t0); color: var(--tx3); }

/* Le pipeline : une colonne par étape (couleur de l'étape en point), une carte par deal. */
.sc-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: var(--s3); background: var(--pn2); border-radius: var(--r2); }
.sc-colonne { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.sc-col-tete { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s1) var(--s2); }
.sc-col-tete b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-pipe .sc-col-tete b { white-space: normal; }
.sc-deal .sc-ligne { flex-wrap: nowrap; }
.sc-col-tete span { margin-left: auto; font-family: var(--font-chiffres); font-size: var(--t0); color: var(--tx2); }
.sc-deal { display: grid; gap: var(--s2); padding: var(--s3); background: var(--pn); border: 1px solid var(--ln); border-radius: var(--r2); }
.sc-deal .sc-avatar { margin-left: auto; }

/* Le comité : chaque associé et son vote, puis la majorité. */
.sc-comite-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--ln); }
.sc-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sc-votes li { display: flex; align-items: center; gap: var(--s3); }
.sc-votes li > span:nth-child(2) { margin-right: auto; }
.sc-resultat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s3); background: var(--favorable-bg); color: var(--favorable-tx); border-radius: var(--r1); }

/* Le portefeuille : trois indicateurs, la courbe de la valeur, les participations. */
.sc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sc-kpis div { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); background: var(--pn2); border-radius: var(--r1); }
.sc-kpis span { font-size: var(--t0); color: var(--tx2); }
.sc-kpis b { font-size: var(--t5); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-graphe { display: grid; gap: var(--s2); }
.sc-graphe-titre { font-size: var(--t0); font-weight: 600; color: var(--tx2); }
.sc-graphe svg { width: 100%; height: auto; }
.sc-grille { fill: none; stroke: var(--ln); stroke-width: 1; }
.sc-aire { fill: url(#sc-degrade); }
.sc-courbe { fill: none; stroke: var(--sky-500); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-point { fill: var(--pn); stroke: var(--sky-500); stroke-width: 3; }
.sc-annees { position: relative; height: 16px; font-family: var(--font-chiffres); font-size: var(--t0); color: var(--tx3); }
.sc-annees span { position: absolute; top: 0; transform: translateX(-50%); }

/* Les scènes à leur largeur (requêtes de conteneur, aux seuils de la DA). */
@container (max-width: 1100px) {
  .sc-app { grid-template-columns: minmax(0, 1fr) 270px; }
  .sc-cote { display: none; }
}
@container (max-width: 900px) {
  .sc-app { grid-template-columns: minmax(0, 1fr); }
  .sc-ia { order: -1; }
}
@container (max-width: 640px) {
  .sc-app { padding: var(--s2); }
  .sc-app .sc-panneau { padding: var(--s3); }
  .sc-champ, .sc-barre .sc-bouton, .sc-col-secteur, .sc-col-tour, .sc-soc .sep, .sc-soc .sc-ville { display: none; }
  .sc-table th, .sc-table td { padding: var(--s2); }
  .sc-criteres, .sc-memo-colonnes { grid-template-columns: minmax(0, 1fr); }
  .sc-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-colonne:nth-child(1), .sc-colonne:nth-child(4) { display: none; }
  .sc-kpis { gap: var(--s2); }
  .sc-kpis b { font-size: var(--t3); }
  .na-agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .na-jour:nth-child(1), .na-jour:nth-child(2) { display: none; }
  .na-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-sources { grid-template-columns: minmax(0, 1fr); }
}

/* La réponse de North AI qui s'écrit en flux (DA §4) : les mots cachés gardent leur place ; un curseur au bout. */
.anime [data-flux] .jeton { opacity: 0; transition: opacity 120ms ease-out; }
.anime [data-flux] .jeton.vu, .anime .fini [data-flux] .jeton { opacity: 1; }
.curseur { display: inline-block; width: var(--s0); height: 1em; margin-right: calc(-1 * var(--s0)); vertical-align: -0.15em; background: var(--ac-txt); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Points de rupture de la DA : 1100, 900, 640 ---------- */
@media (max-width: 1100px) {
  .ouverture .titre2 { font-size: var(--t8); }
  .deux-colonnes, .analyse-demo, .livrables, .na-demo, .final { grid-template-columns: minmax(0, 1fr); }
  .na-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .na-categorie { grid-column: 1 / -1; }
  .na-panneau { min-height: 0; }
  .capacites, .garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .entete-nav, .lien-discret { display: none; }
  .titre2 { font-size: var(--t6); }
  .ouverture .titre2 { font-size: var(--t7); }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .na-panneau { min-height: 0; }
}
@media (max-width: 640px) {
  .cadre { width: min(1180px, 100% - 2 * var(--s4)); }
  .entete-ligne { gap: var(--s3); }
  .marque { flex: none; }
  .entete-actions { gap: var(--s2); }
  .entete-actions .btn.primary { padding: var(--s2) var(--s3); font-size: var(--t1); }
  .btn .long { display: none; }
  .btn .court { display: inline; }
  .langues summary { display: inline-flex; align-items: center; min-height: 40px; padding: var(--s2) var(--s3); }
  .pied-col a, .final-mail a { display: inline-block; padding-block: var(--s2); }
  .ouverture .titre2 { font-size: var(--t6); }
  .ouverture-detail { font-size: var(--t3); }
  .ouverture-accroche { font-size: var(--t4); }
  .titre2, .etape h3 { font-size: var(--t5); }
  .atouts { grid-template-columns: minmax(0, 1fr); }
  .securite-liste, .pied-grille, .vedettes, .capacites, .garanties { grid-template-columns: minmax(0, 1fr); }
  /* North AI : les exemples en une rangée qui défile de côté, juste au-dessus de leur rendu. */
  .na-demo { padding: var(--s3); gap: var(--s3); }
  .na-exemples { display: flex; flex-wrap: nowrap; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s1); }
  .na-exemples::-webkit-scrollbar { display: none; }
  .na-categorie { display: none; }
  .na-exemples button { flex: none; min-height: 44px; padding: var(--s2) var(--s4); background: var(--pn); border: 1px solid var(--ln); white-space: nowrap; }
  .na-exemples button[aria-selected="true"] { background: var(--ac-fill); color: var(--on-fill); border-color: transparent; box-shadow: none; }
  .na-scene { scroll-margin-top: calc(68px + var(--s3)); }
  .vedette { padding: var(--s5); }
  .vedette-zero { font-size: var(--t8); }
  .final, .texte-legal, .introuvable { padding: var(--s5); }
  .processus-cadre { padding: var(--s4); }
  .cadre-scene { padding: var(--s2); }
  .comparatif { font-size: var(--t1); }
  /* Au téléphone, les comparatifs se lisent critère par critère : chaque valeur porte le nom de sa colonne. */
  .comparatif-cadre { padding: var(--s2) var(--s4); }
  .comparatif thead { display: none; }
  .comparatif tbody tr { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--ln); }
  .comparatif tbody tr:last-child { border-bottom: 0; }
  .comparatif tbody th, .comparatif tbody td, .comparatif.trois tbody th, .comparatif.trois tbody td { display: block; width: auto; padding: 0; border-bottom: 0; }
  .comparatif tbody th { font-size: var(--t2); }
  .comparatif tbody td::before { content: attr(data-col); display: block; font-size: var(--t0); font-weight: 600; color: var(--tx3); }
  .comparatif tbody td.nous { padding: var(--s2) var(--s3); border-radius: var(--r1); }
  .comparatif tbody td.nous::before { color: var(--accent-tx); }
}