/* Le même système que les autres études de cas : les surfaces s'éclaircissent en montant (fond, feuille, champ),
   les rayons sont concentriques (feuille 20, marge 8, champ 12), une seule famille de caractères, quatre instruments
   puis une feuille à huit colonnes, et des rangées coupées trois pour deux. Chaque aplat a un seul rôle, et sa
   force dit à quel point la quantité est ferme : ardoise pour ce qui est déjà là ou observé, cobalt pour ce qui
   est engagé maintenant, sa teinte pour ce qui est planifié, un contour pointillé pour ce qui est reporté, encre
   pour ce qui manque ou déborde. The brand colour is Eight Sleep's black, on the wordmark and the share button only. */
:root {
  --ground: #E3E7ED; --sheet: #F1F3F7; --field: #FFFFFF; --well: #DCE1E9;
  --ink: #121923; --ink2: #414B59; --ink3: #5D6776;
  --line: #E1E5EB; --line2: #98A2B1;
  --slate: #5A6676; --slate2: #B7BFCA; --cobalt: #2146D6; --tint: #A9B9F2; --wash: #E8EDFC;
  --brand: #121923;
  --lift: 0 1px 2px rgba(18, 25, 35, .12);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); }
body { font-family: var(--font); font-size: 15px; line-height: 22px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
.app { display: flex; flex-direction: column; gap: 16px; max-width: 1536px; margin: 0 auto; padding: 28px clamp(12px, 3.6vw, 56px) 40px; }
.cob, .good { color: var(--cobalt); } .muted { color: var(--ink3); }
.attente { padding: 80px 24px; text-align: center; color: var(--ink3); font-weight: 500; }

/* en-tête : une barre contenue (marque, vues, actions ; tout à 40 px), puis une rangée avec le sélecteur de la vue à
   gauche, les données et l'auteur à droite. Rien ne flotte sur le fond. */
.topbar { position: sticky; top: 12px; z-index: 10; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 12px 12px 20px; border-radius: 20px; background: var(--field); box-shadow: var(--lift), 0 8px 24px -18px rgba(18, 25, 35, .4); }
/* La marque ne passe jamais sous les vues : faute de place, la barre se met sur deux rangs (voir plus bas), et si
   même cela ne suffit pas, le nom se coupe par des points de suspension au lieu de déborder. */
.brand { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: max-content; padding: 0; border: 0; background: none; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.logo { width: 57px; height: 24px; flex: none; color: var(--ink); }
.brand b { font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; margin-left: -2px; border-left: 1px solid var(--slate2); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink3); }
.views { display: flex; align-items: center; gap: 2px; }
.views .suite { white-space: pre; }
.views button { display: flex; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink2); font-weight: 500; white-space: nowrap; cursor: pointer; }
.views button:hover { color: var(--ink); background: var(--sheet); }
.views button[aria-current="true"] { color: var(--cobalt); background: var(--wash); font-weight: 600; }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 0; min-width: max-content; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--sheet); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--well); }
.btn.share { padding: 0 18px; background: var(--brand); color: var(--field); }
.btn.share:hover { background: var(--ink2); }
.btn.cta { background: var(--cobalt); color: #fff; }
.btn.cta:hover { background: var(--ink); color: #fff; }
.btn .s { display: none; }
.btn.copy { padding: 0 14px 0 12px; background: var(--sheet); color: var(--ink); }
.btn.copy:hover { background: var(--well); }
.btn.quiet { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--well); font-size: 14px; }
.btn.quiet:hover { background: var(--slate2); }
.btn.quiet[aria-pressed="true"] { background: var(--ink); color: var(--field); }
.link { border: 0; padding: 0; background: none; color: var(--cobalt); font-weight: 600; cursor: pointer; text-decoration: none; font-size: 14px; }
.titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 56px; }
.switch { display: flex; align-items: center; height: 56px; padding: 4px; border-radius: 16px; background: var(--well); }
.switch button { display: flex; flex: none; align-items: center; justify-content: center; min-width: 160px; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink2); font-weight: 500; white-space: nowrap; cursor: pointer; }
.switch.dense button { min-width: 128px; }
.switch button[aria-pressed="true"] { background: var(--field); color: var(--ink); font-weight: 600; box-shadow: 0 2px 7px rgba(18, 25, 35, .08); }
.switch.small { height: 40px; padding: 3px; border-radius: 12px; }
.switch.small button { min-width: 0; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 14px; }
.meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.meta .chip { min-width: 0; }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; background: rgba(255, 255, 255, .7); color: var(--ink2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.person img { width: 32px; height: 32px; border-radius: 16px; object-fit: cover; }

/* feuilles et champs */
/* La page est le repère de largeur des rangées coupées trois pour deux : une rangée dont les tableaux ne tiennent
   plus côte à côte s'empile, au lieu de couper leur dernière colonne. */
main { container: page / inline-size; display: flex; flex-direction: column; gap: 8px; }
.sheet { display: grid; gap: 8px; padding: 8px; border-radius: 20px; background: var(--sheet); }
.sheet.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet.s1 { grid-template-columns: minmax(0, 1fr); }
.sheet.s2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sheet.s32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.field { min-width: 0; border-radius: 12px; background: var(--field); overflow: hidden; }
.field.scroll { overflow-x: auto; }
.field.col { display: flex; flex-direction: column; }
.pad { padding: 0 20px 18px 16px; }
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: 60px; padding: 8px 20px 8px 24px; }
.tbar h2 { display: inline; margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; white-space: nowrap; }
.ctx { margin-left: 12px; font-size: 14px; font-weight: 500; color: var(--ink3); }
.tbar .right { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.key { display: flex; align-items: center; gap: 8px 18px; font-size: 14px; font-weight: 500; color: var(--ink3); flex-wrap: wrap; }
.key span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key i.k-line { width: 22px; height: 0; border-top: 1.5px dashed var(--ink2); border-radius: 0; }
.key i.k-rep { background: var(--wash); border: 1.5px dashed var(--tint); }
.note { padding: 4px 24px 18px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink2); }
.note b { font-weight: 600; color: var(--ink); }
.field.col .note { margin-top: auto; }
.note .tete, .learn .tete { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.note .link, .learn .link { margin-top: 6px; }
/* d'où vient un chiffre : observé (plein), estimé (à moitié), simulé (contour pointillé) */
.nat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink3); white-space: nowrap; }
.nat svg, .key svg { flex: none; }

/* instrument : le nom, la valeur, une barre à l'échelle, l'écart et sa référence */
/* Chaque carte est son propre repère de largeur : étroite, elle empile ses lignes au lieu de les couper. */
.inst { container: carte / inline-size; padding: 18px 24px 20px; }
.inst .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; white-space: nowrap; }
.inst .top b { font-size: 16px; line-height: 24px; font-weight: 600; }
.inst .top span { font-size: 14px; font-weight: 500; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; }
.inst .val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; white-space: nowrap; }
.inst .val b { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -.03em; color: var(--cobalt); }
.inst.ink .val b { color: var(--ink); }
.inst .val span { font-size: 16px; font-weight: 500; color: var(--ink3); }
.rail { position: relative; display: flex; gap: 3px; height: 12px; margin-top: 14px; }
.rail i { min-width: 5px; border-radius: 6px; transition: flex-grow .25s ease; }
.rail i.c { background: var(--cobalt); } .rail i.t { background: var(--tint); } .rail i.s { background: var(--slate); } .rail i.s2 { background: var(--slate2); } .rail i.k { background: var(--ink); } .rail i.w { background: var(--well); }
.rail u { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--field); }
.inst .gap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; margin-top: 12px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.inst .gap b { font-weight: 600; }
.inst .gap span { overflow: hidden; text-overflow: ellipsis; }
@container carte (max-width: 281px) {
  .inst .top, .inst .gap { flex-direction: column; align-items: flex-start; gap: 0; }
  .inst .top span, .inst .gap span { max-width: 100%; }
}
.inst .gap span { font-weight: 500; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; }

/* graphiques */
svg { display: block; overflow: visible; }
svg text { font-family: var(--font); font-variant-numeric: tabular-nums lining-nums; }
.t-tk { fill: var(--ink3); font-size: 13px; font-weight: 500; }
.t-tk.strong { fill: var(--ink); font-weight: 600; }
.t-lb { fill: var(--ink3); font-size: 14px; font-weight: 500; }
.t-lb.ink { fill: var(--ink2); } .t-lb.strong { fill: var(--ink); font-weight: 600; }
.t-v { fill: var(--ink); font-size: 15px; font-weight: 600; paint-order: stroke; stroke: var(--field); stroke-width: 4px; stroke-linejoin: round; }
.t-grp { fill: var(--slate); font-size: 14px; font-weight: 600; }
.t-on { fill: var(--field); font-size: 13px; font-weight: 600; }
.t-cel { font-size: 13px; font-weight: 600; fill: var(--ink); }
.t-cel.on { fill: var(--field); }
svg text.cob { fill: var(--cobalt); } svg text.quiet { fill: var(--ink3); }
.l-g { stroke: var(--line); stroke-width: 1; }
.l-a { stroke: var(--line2); stroke-width: 1; }
.l-d { stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.l-cap { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.l-obs { fill: none; stroke: var(--slate); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-cad { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-sc { fill: none; stroke: var(--tint); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.l-sc.on { stroke: var(--cobalt); stroke-width: 2.5; }
.l-fit { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.l-lien { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dot { stroke: var(--field); stroke-width: 2; }
.f-ink { fill: var(--ink); } .f-slate { fill: var(--slate); } .f-slate2 { fill: var(--slate2); } .f-cob { fill: var(--cobalt); } .f-tint { fill: var(--tint); } .f-well { fill: var(--well); } .f-wash { fill: var(--wash); }
.o-rep { fill: var(--wash); stroke: var(--tint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.o-trop { fill: none; stroke: var(--ink); stroke-width: 2; }
.z-ext { fill: var(--sheet); }
.z-susp { fill: var(--well); opacity: .7; }
.pt { fill: var(--slate); fill-opacity: .55; }
.pt.neuf { fill: var(--cobalt); fill-opacity: 1; stroke: var(--field); stroke-width: 1.5; }

/* la feuille principale : un graphique, puis une ligne par stratégie sous les mêmes colonnes de mois */
.wk { position: relative; min-width: 1004px; padding-bottom: 6px; }
.wk-band { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: var(--sheet); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.wk > svg, .wk-head, .wk-row { position: relative; }
.wk-head { display: flex; align-items: center; height: 34px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--ink3); white-space: nowrap; }
.wk-head .c { text-align: center; }
.wk-row { display: flex; align-items: stretch; height: 103px; border-top: 1px solid var(--line); cursor: pointer; }
.wk-row:hover { background: color-mix(in oklab, var(--sheet) 70%, var(--field)); }
.wk-row.sel { background: color-mix(in oklab, var(--wash) 55%, var(--field)); }
.wk .nm { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 24px; min-width: 0; }
.wk .nm b { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.wk .nm span { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-right: 28px; }
.mini b { font-weight: 600; line-height: 18px; }
.dv, .lv { position: relative; height: 6px; border-radius: 3px; background: var(--well); }
.dv::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; margin-left: -.75px; background: var(--line2); }
.dv i { position: absolute; top: 0; bottom: 0; }
.dv i.r { left: 50%; border-radius: 0 3px 3px 0; } .dv i.l { right: 50%; border-radius: 3px 0 0 3px; }
.dv i.k { background: var(--ink); } .dv i.c { background: var(--cobalt); }
.lv i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--slate); }
.lv i.c { background: var(--cobalt); }
.lv u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--field); }
/* la répartition en trois segments : engagé, planifié, reporté */
.mini3 { display: inline-flex; gap: 2px; width: 72px; height: 8px; flex: none; }
.mini3 i { display: block; height: 100%; border-radius: 2px; }
.mini3 i.a { background: var(--cobalt); } .mini3 i.b { background: var(--tint); } .mini3 i.c { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--tint); }

/* carte des répartitions : chaque case est une répartition, on clique pour la choisir */
.cel { cursor: pointer; }
.cel.c0 { fill: var(--cobalt); } .cel.c1 { fill: var(--cobalt); fill-opacity: .68; } .cel.c2 { fill: var(--cobalt); fill-opacity: .42; } .cel.c3 { fill: var(--cobalt); fill-opacity: .22; }
.cel.frag { fill: var(--slate2); fill-opacity: .75; }
.cel.non { fill: var(--line); }
.cel:hover, .cel:focus-visible { stroke: var(--ink2); stroke-width: 1.5; outline: none; }
.mk-sel { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; }
.mk-reco { fill: var(--field); pointer-events: none; }
.mk-ref { fill: var(--field); stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.cq { container: champ / inline-size; }
.split { display: grid; grid-template-columns: minmax(349px, 1fr) minmax(300px, 372px); gap: 0 8px; align-items: start; }
@container champ (max-width: 660px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split .carte { padding: 0 8px 4px 16px; }
.cles { display: grid; gap: 10px; margin: 8px 16px 0 24px; padding-top: 16px; border-top: 1px solid var(--line); }
/* carte du mouvement : la sélection coûte moins (cobalt) ou plus (encre) que la comparaison */
.hm.n0 { fill: var(--cobalt); fill-opacity: .14; } .hm.n1 { fill: var(--cobalt); fill-opacity: .38; } .hm.n2 { fill: var(--cobalt); fill-opacity: .7; } .hm.n3 { fill: var(--cobalt); }
.hm.p0 { fill: var(--ink); fill-opacity: .07; } .hm.p1 { fill: var(--ink); fill-opacity: .2; } .hm.p2 { fill: var(--ink); fill-opacity: .5; } .hm.p3 { fill: var(--ink); fill-opacity: .85; }
.hm.z { fill: var(--sheet); }

/* tableaux, faits pour être lus : pas de cadre, un filet entre les lignes, les chiffres à droite, l'unité une fois
   dans l'en-tête, un trait au-dessus du total, une barre dans la cellule quand une colonne est le sujet */
.dt { padding: 0 12px 12px; font-size: 15px; line-height: 22px; }
.dt-r { display: grid; grid-template-columns: var(--cols); align-items: center; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--line); }
.dt-r > * { min-width: 0; padding: 7px 0 7px 12px; font-weight: 500; }
.dt-r > :first-child { padding-left: 0; font-weight: 600; }
.dt.serre .dt-r > :not(:first-child) { padding-left: 8px; }
.dt-r .n { text-align: right; white-space: nowrap; }
.dt-r b { font-weight: 600; }
.dt-r small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink3); }
.dt-r .wrap { white-space: normal; }
/* an interval under a figure in a narrow column breaks after « to » rather than running into the next column */
.dt.ctr .dt-r > .n small { white-space: normal; padding: 0 5px; }
.dt-r .une { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.dt-r .une b { white-space: nowrap; }
.dt-r .une small { display: block; min-width: 0; }
.dt-h, .dt-sp { border-top: 0; align-items: end; }
.dt-h { min-height: 34px; } .dt-sp { min-height: 24px; }
.dt-r.dt-h > * { padding-top: 4px; padding-bottom: 8px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink3); white-space: normal; }
.dt-r.dt-sp > * { padding-top: 6px; padding-bottom: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--slate); white-space: nowrap; }
.dt-r.dt-h > .cob, .dt-r.dt-sp > .cob { color: var(--cobalt); font-weight: 600; }
.dt-r.dt-h > .on { color: var(--ink); font-weight: 600; }
.dt-g { min-height: 46px; align-items: end; border-top-color: var(--line2); }
.dt-r.dt-g > * { padding-top: 14px; padding-bottom: 6px; font-weight: 600; }
.dt-g + .dt-r { border-top: 0; }
.dt-h + .dt-g { border-top-color: var(--line); }
.dt-s > :first-child { padding-left: 16px; font-weight: 500; color: var(--ink2); }
.dt-t { border-top: 1.5px solid var(--ink2); }
.dt-t > *, .dt-u > * { font-weight: 600; }
.dt-u > :first-child { padding-left: 16px; }
.dt-r.sel { background: color-mix(in oklab, var(--wash) 55%, var(--field)); }
.dt-r.hors > .n { color: var(--ink3); }
.dt-r[data-partage], .dt-r[data-origine], .dt-r[data-scenario] { cursor: pointer; }
.dt-r[data-partage]:hover, .dt-r[data-origine]:hover, .dt-r[data-scenario]:hover { background: color-mix(in oklab, var(--sheet) 70%, var(--field)); }
.dt-r.sel:hover { background: color-mix(in oklab, var(--wash) 55%, var(--field)); }
.dt .wb { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dt .tg { display: flex; justify-content: flex-end; align-items: center; }
.dt .tg.l { justify-content: flex-start; }
.dt .ctl { display: flex; justify-content: flex-end; align-items: center; }
.dt .sp { display: flex; justify-content: flex-end; }
.dt .bar { display: block; height: 6px; border-radius: 3px; background: var(--slate); }
.dt .bar.c { background: var(--cobalt); } .dt .bar.k { background: var(--ink); } .dt .bar.t { background: var(--tint); }
.dt .cob { color: var(--cobalt); } .dt .strong { font-weight: 600; } .dt .quiet { color: var(--ink3); } .dt .on { font-weight: 600; }
.dash { color: var(--slate2); }
.dt .txt { font-size: 14px; line-height: 20px; color: var(--ink2); }
.dt .dv { display: block; width: 72px; }
/* un tableau sur les colonnes mêmes d'un graphique : les chiffres finissent là où finissent les barres */
.onaxis { padding: 0 12px 12px; }
.onaxis .dt { padding: 0; }
.onaxis .dt-r { padding: 0; }
.onaxis .dt-r > * { padding-left: 0; }
.onaxis .dt-r > :first-child { padding-left: 12px; }
.onaxis .dt-r > .n { padding-right: var(--pr, 0); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px; background: var(--ink); color: var(--field); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.tag.cob { background: var(--wash); color: var(--cobalt); }
.tag.quiet { background: var(--sheet); color: var(--ink2); }
.tag.out { background: var(--field); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink2); }

/* compteurs : un réglage par ligne, la valeur entre un moins et un plus */
.sw { position: relative; display: block; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: var(--well); cursor: pointer; flex: none; transition: background-color .2s ease; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; background: var(--field); box-shadow: var(--lift); transition: transform .2s ease; }
.sw[aria-checked="true"] { background: var(--ink); }
.sw[aria-checked="true"]::after { transform: translateX(16px); }
.steps { display: flex; flex-direction: column; padding: 0 16px 8px 24px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 6px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.step b i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.step small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink3); }
.stepper { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--well); }
.stepper button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font-size: 18px; font-weight: 600; cursor: pointer; }
.stepper button:hover { background: var(--field); color: var(--ink); }
.stepper button:disabled { color: var(--slate2); cursor: default; background: transparent; }
.stepper output { min-width: 76px; text-align: center; font-weight: 600; font-size: 16px; white-space: nowrap; }
.stepper output.moved { color: var(--cobalt); }
.step .res { min-width: 76px; padding-right: 14px; text-align: right; font-size: 20px; line-height: 28px; font-weight: 600; white-space: nowrap; }
.stepper.s { padding: 3px; border-radius: 10px; }
.stepper.s button { width: 28px; height: 28px; border-radius: 7px; font-size: 16px; }
.stepper.s output { min-width: 66px; font-size: 14px; }
.learn { margin-top: auto; padding: 16px 24px 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink2); }
.learn b { font-weight: 600; color: var(--ink); }

/* méthode */
.defs { padding: 0 24px 16px; }
.defs div { display: grid; grid-template-columns: var(--tw, 148px) minmax(0, 1fr); gap: 16px; padding: 7px 0; }
.defs b { font-weight: 600; }
.defs span { font-weight: 500; color: var(--ink2); }
.defs a, .note a, .dt a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 4px 12px; padding: 0 24px 16px; }
.legend > div { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.legend i { display: block; width: 40px; height: 22px; flex: none; border-radius: 5px; }
.legend span { font-weight: 500; color: var(--ink2); }
.formule { margin: 0 24px 10px; padding: 14px 18px; border-radius: 10px; background: var(--sheet); color: var(--ink2); font-family: var(--mono); font-size: 12.5px; line-height: 20px; white-space: pre-wrap; }

footer { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 4px 4px 0; font-size: 14px; font-weight: 500; color: var(--ink2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--field); font-weight: 600; box-shadow: 0 6px 24px rgba(25, 25, 25, .25); }

/* Sous 1 400 px, les boutons d'un sélecteur se resserrent pour que la rangée de réglages tienne sur une ligne. */
@media (max-width: 1400px) {
  .switch button { min-width: 112px; padding: 0 14px; }
  .switch.dense button { min-width: 92px; }
}
@media (max-width: 1180px) {
  .inst { padding: 16px 18px 18px; }
  .inst .val b { font-size: 40px; line-height: 44px; }
}
/* La marque (logo, filet, nom), les quatre vues et les deux boutons demandent 1 135 px de barre sur un seul rang :
   en dessous, les vues passent sur un second rang. */
@media (max-width: 1340px) {
  .views { gap: 0; }
  .views button { padding: 0 10px; font-size: 14px; }
  .btn.share { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .chip { height: auto; min-height: 40px; padding: 8px 16px; white-space: normal; line-height: 20px; }
}
/* Under 900 px the bar takes two rows: the name and the buttons, then the views under a hairline. The control row
   keeps the switch on its own line and the data chip and the author together on the next. */
.topbar.two { flex-wrap: wrap; row-gap: 8px; padding: 10px 10px 8px 16px; }
.topbar.two .views { order: 3; flex: 0 0 calc(100% + 26px); min-width: 0; margin: 0 -10px 0 -16px; padding: 8px 10px 0; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.topbar.two .views::-webkit-scrollbar { display: none; }
.views.fr { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.views.fl { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.views.fl.fr { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (max-width: 900px) {
  .topbar { position: static; }
  .titlerow > .meta { width: 100%; }
  .meta .chip { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .btn.cta .l { display: none; } .btn.cta .s { display: inline; }
  .btn.copy { padding: 0 11px; } .btn.copy span { display: none; }
  .person span { display: none; }
}
@media (max-width: 380px) {
  .brand b { font-size: 17px; }
}
/* Sous 760 px, les boutons d'un sélecteur prennent leur largeur naturelle : les cinq scénarios tiennent sans défiler. */
@media (max-width: 760px) {
  .switch button, .switch.dense button { min-width: 0; }
}
@container page (max-width: 1394px) { .sheet.s32.large { grid-template-columns: minmax(0, 1fr); } }
@container page (max-width: 1199px) { .sheet.s32.moyen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .sheet.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet.s2, .sheet.s32 { grid-template-columns: minmax(0, 1fr); }
  .field { overflow-x: auto; }
  .switch { max-width: 100%; overflow-x: auto; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .sheet.k4 { grid-template-columns: minmax(0, 1fr); }
  .switch button, .switch.dense button { min-width: 0; padding: 0 12px; font-size: 14px; }
  .views .suite { display: none; }
  .views button { padding: 0 10px; }
  .chip { height: auto; min-height: 40px; padding: 8px 16px; white-space: normal; }
  .defs div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Sur un très petit écran, un compteur passe sous son libellé. */
@media (max-width: 400px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .step .stepper, .step .res { justify-self: start; }
  .step .res { padding-right: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* lines of the cumulative chart and the break-even curves */
.ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ln.a { stroke: var(--cobalt); } .ln.b { stroke: var(--slate); } .ln.c { stroke: var(--slate2); stroke-dasharray: 5 5; } .ln.k { stroke: var(--ink); } .ln.faint { stroke: var(--line2); stroke-width: 1.5; }
.t-lb { fill: var(--ink2); font-size: 14px; font-weight: 500; }
.t-on { fill: var(--field); font-size: 13px; font-weight: 600; }
.dot { fill: var(--cobalt); stroke: var(--field); stroke-width: 2; }
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 8px; padding: 0 24px 20px; }
.idea { padding: 14px 16px 16px; border-radius: 12px; background: var(--sheet); font-size: 14px; line-height: 20px; color: var(--ink2); }
.idea b { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.l-grid { stroke: var(--line); stroke-width: 1; }
.dot.q { fill: var(--slate); }
.tag.soft { background: var(--well); color: var(--ink2); }

/* A chart and the table under it on the same columns (rule 7): the label column at the left, n equal columns, a
   margin at the right end; a figure ends where the line crosses its column's edge. */
.keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 0 24px 10px; }
.key i.ln-a, .key i.ln-b, .key i.ln-sel, .key i.ln-faint, .key i.ln-rev { width: 22px; height: 0; border-radius: 0; }
.key i.ln-a { border-top: 2.5px solid var(--cobalt); } .key i.ln-b { border-top: 2.5px solid var(--slate); }
.key i.ln-sel { border-top: 2.5px solid var(--ink); } .key i.ln-faint { border-top: 1.5px solid var(--slate2); } .key i.ln-rev { border-top: 1.5px dashed var(--line2); }
.key i.ar-pod { background: var(--wash); } .key i.ar-chili { background: var(--well); } .key i.ar-s { background: var(--slate); }
.key i.sleeve { background: none; border: 1.5px dashed var(--line2); } .key i.tick { width: 2px; height: 14px; border-radius: 1px; background: var(--ink); }
/* the gap between the two cumulative lines, tinted (rule 4): cobalt wash where the Pod has cost more, grey where the Chilipad has */
.ar.pod { fill: var(--wash); } .ar.chili { fill: var(--well); }
.ln.sel { stroke: var(--ink); } .ln.rev { stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dot.k { fill: var(--ink); }
.dt .bar.s2 { background: var(--slate2); }
/* a bar in the cell on one scale, with the tax part as a dashed outline when it is taken out and an ink tick at the reference */
.mb { position: relative; width: 120px; height: 12px; margin-bottom: 2px; }
.mb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--slate); }
.mb i.sleeve { background: none; border: 1.5px dashed var(--line2); border-left: 0; border-radius: 0 3px 3px 0; }
.mb u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--field); }
/* a stepper in a title bar: the name, then the value between a minus and a plus (rule 11: the control on its chart) */
.stp { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink3); white-space: nowrap; }

/* A menu inside a line of text, on the row whose figures it changes (rule 11): a quiet chip with a chevron. */
.menu { appearance: none; -webkit-appearance: none; height: 24px; margin: 3px 0 1px; padding: 0 24px 0 8px; border: 0; border-radius: 7px; background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23414B59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--ink); font: inherit; font-size: 13px; line-height: 24px; font-weight: 600; cursor: pointer; }
.menu:hover { background-color: var(--slate2); }
.dt-r small .menu { vertical-align: baseline; }

/* A scale inside a table (rules 7 and 8): the header carries the ticks, each row its gridlines and marks, all in
   percent of the column. The cell stretches to the row's height so the lines run from row to row. */
.dt-r > .scc { align-self: stretch; position: relative; padding: 0; min-height: 40px; }
.scc .sc { position: absolute; left: 12px; right: 8px; top: 0; bottom: 0; }
.sc b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.sc b.ref { width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; }
.sc b.zero { width: 0; background: none; border-left: 1.5px dashed var(--line2); }
.sc i { position: absolute; top: 50%; display: block; }
.sc i.bar { left: 0; height: 12px; margin-top: -6px; border-radius: 0 3px 3px 0; background: var(--slate); }
.sc i.bar.k { background: var(--ink); }
.sc i.sleeve { height: 12px; margin-top: -6px; border: 1.5px dashed var(--line2); border-left: 0; border-radius: 0 3px 3px 0; }
.sc i.seg { height: 2px; margin-top: -1px; background: var(--slate2); }
.sc i.pt { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 5px; background: var(--ink); box-shadow: 0 0 0 2px var(--field); z-index: 3; }
.dt-r.sel .sc i.pt { box-shadow: 0 0 0 2px color-mix(in oklab, var(--wash) 55%, var(--field)); }
.dt-r.dt-h > .sch { position: relative; align-self: stretch; padding: 0; }
.sc-h { position: absolute; left: 12px; right: 8px; bottom: 8px; height: 18px; }
.sc-h span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink3); }
.sc-h span.first { transform: none; } .sc-h span.last { transform: translateX(-100%); }
.dt-r[data-alt] { cursor: pointer; }
.dt-r[data-alt]:hover { background: color-mix(in oklab, var(--sheet) 70%, var(--field)); }

/* A total drawn as the sum of its parts (rule 4), in the colours of the cards' rails. */
.stack { display: flex; gap: 2px; height: 6px; }
.stack i { display: block; min-width: 3px; border-radius: 3px; }
.stack i.c { background: var(--cobalt); } .stack i.t { background: var(--tint); } .stack i.s { background: var(--slate); } .stack i.s2 { background: var(--slate2); }
.stack i.x { background: var(--well); box-shadow: inset 0 0 0 1px var(--line2); }
.dt .wbl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* a link under a note sits on its own line */
.note > .link { display: block; margin-top: 6px; }

/* The house's marks: group labels, a row name, a big figure, a dashed outline for the setting not shown, an ink
   line where a bar ends, the revenue-only tick. */
.t-grp.ink { fill: var(--ink); } svg text.t-grp.cob { fill: var(--cobalt); }
.t-row { fill: var(--ink); font-size: 15px; font-weight: 600; }
.t-big { fill: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.t-big.cob { fill: var(--cobalt); }
.o-grey { fill: none; stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.l-ink { stroke: var(--ink); stroke-width: 2; }
.l-rev { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg .alt { cursor: pointer; }
svg .alt .hit { fill: transparent; }
svg .alt:hover .hit { fill: var(--sheet); }
/* rows under a hero: each figure centred under its bar */
.onaxis .dt.ctr .dt-r > .n { text-align: center; padding-left: 0; padding-right: 0; }
.onaxis .dt.ctr .dt-r > .n small { text-align: center; }
/* key swatches, one per fill */
.key i.sw-cob { background: var(--cobalt); } .key i.sw-tint { background: var(--tint); } .key i.sw-slate { background: var(--slate); }
.key i.sw-slate2 { background: var(--slate2); } .key i.sw-ink { background: var(--ink); } .key i.sw-dash { background: none; border: 1.5px dashed var(--line2); }

/* The three beds, drawn in Paper and inlined: each in its own column with callouts that carry the figures
   (a pin on the part, a leader to the label). Nothing moves for visitors who ask for reduced motion. */
.beds { display: block; padding: 0 12px 8px; }
.beds svg { display: block; }
.leader { fill: none; stroke: var(--line2); stroke-width: 1.25; }
.pin { fill: var(--slate); stroke: var(--field); stroke-width: 2; }
.pin.c { fill: var(--cobalt); }
.callout .c-name { fill: var(--ink); font-size: 15px; font-weight: 600; }
.callout .c-fig { fill: var(--ink3); font-size: 14px; font-weight: 500; }
.callout .c-fig.cob { fill: var(--cobalt); }
.beds .dt.ctr .dt-r > .n.txt, .beds .dt.ctr .dt-r > .n.wrap { white-space: normal; }
svg .alt { outline: none; }
svg .alt:focus-visible .hit { fill: var(--wash); }
/* the proposal: one sentence and one action */
.pitch { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 0 24px 20px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink2); }
.pitch span { flex: 1 1 520px; max-width: 920px; }
.pitch .btn { flex: none; }

/* ---------- the café study ---------- */
.brand .mark { width: 30px; height: 30px; flex: none; color: var(--cobalt); }
.key i.sw-well { background: var(--well); box-shadow: inset 0 0 0 1px var(--line2); }
.dotm { stroke: var(--field); stroke-width: 2; }
svg text.t-v.cob { fill: var(--cobalt); }
.lead { stroke: var(--slate2); stroke-width: 1.5; }
/* the drawings of the café study: the curve's knob, the dashed proposal, chalk on the board, levers, big figures */
.washfill { fill: var(--wash); } .tintfill { fill: var(--wash); }
.o-dash { fill: none; stroke: var(--cobalt); stroke-width: 1.5; stroke-dasharray: 5 4; }
.o-ink { fill: var(--field); stroke: var(--ink); stroke-width: 1.5; }
.l-s { stroke: var(--cobalt); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.halo { fill: var(--cobalt); opacity: .16; } .knob { fill: var(--cobalt); stroke: var(--field); stroke-width: 3; }
.t-chalk { fill: #EEF1F5; font-weight: 600; letter-spacing: .01em; }
.duo { display: flex; gap: 8px; padding: 0 12px 6px 12px; } .duo > svg { flex: 1 1 0; min-width: 0; }
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding: 6px 24px 10px; }
.big3 b { display: block; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.big3 b.cob { color: var(--cobalt); } .big3 span { display: block; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink3); }
.dec { min-width: 560px; padding: 0 8px 10px; }
.dec-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 104px 140px; align-items: center; min-height: 66px; padding: 0 16px 0 12px; border-radius: 10px; }
.dec-row.head { min-height: 26px; font-size: 14px; font-weight: 500; color: var(--ink3); text-align: right; }
.dec-row.hot { background: var(--sheet); }
.dec-row b { font-weight: 600; }
.dec-row small { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec-row .num { text-align: right; font-size: 17px; font-weight: 600; } .dec-row .num.cob { color: var(--cobalt); } .dec-row .num .nil { color: var(--line2); font-weight: 500; }
.dec-row.sum { border-top: 1.5px solid var(--ink2); border-radius: 0; min-height: 48px; }
.sw { position: relative; display: block; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: var(--well); cursor: pointer; transition: background-color .2s ease; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; background: var(--field); box-shadow: var(--lift); transition: transform .2s ease; }
.sw[aria-checked="true"] { background: var(--cobalt); } .sw[aria-checked="true"]::after { transform: translateX(16px); }

.menu.big { height: 48px; margin: 0; padding: 0 44px 0 18px; border-radius: 14px; font-size: 15px; font-weight: 600; color: var(--ink); background-position: right 16px center; }
.switch.pair { gap: 8px; background: none; padding: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; padding: 0 12px 6px; } .grid2 > svg { min-width: 0; }
.dt .tg.c { justify-content: center; }
.dt .ctl .stepper { margin: -4px 0; }
.dt-r .set { display: flex; justify-content: flex-end; }
.link.danger { color: var(--ink2); }
.ctx .menu { vertical-align: middle; }

@media (max-width: 1340px) { .brand span { display: none; } }
@media (max-width: 900px) { .dec-row small { white-space: normal; } }
.grid2.one { grid-template-columns: minmax(0, 1fr); }

/* the settings: a number typed or stepped, a text, a choice */
.stepper input.num { width: 76px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; text-align: center; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); -moz-appearance: textfield; }
.stepper input.num::-webkit-outer-spin-button, .stepper input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input.num:focus { outline: 2px solid var(--cobalt); outline-offset: -2px; border-radius: 6px; }
.stepper input.num.moved { color: var(--cobalt); }
input.text { height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--well); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; width: 100%; }
input.text:focus { outline: 2px solid var(--cobalt); }
.dt .set { display: flex; justify-content: flex-end; }
.dt .set.l { justify-content: flex-start; }
.winrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.winrow .sw { flex: none; }
/* in a table the stepper fills its column: the buttons keep their size, the number takes what is left */
.dt .set .stepper.s { flex: 1 1 auto; width: 100%; max-width: 168px; min-width: 0; padding: 2px; gap: 0; }
.dt .set .stepper.s button { flex: none; width: 26px; height: 26px; }
.dt .set .stepper.s input.num { flex: 1 1 0; width: 0; min-width: 0; height: 26px; }
.dt .set .menu { width: 100%; min-width: 0; max-width: 240px; margin: 2px 0; height: 30px; line-height: 30px; }