:root {
  --motion-fast: 150ms;
  --motion-ui: 220ms;
  --motion-enter: 320ms;
  --ease-ui: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --font-display: 'Sora', var(--font-sans);
  --weight-display: 800;
  --type-h1: clamp(26px, 2.25vw, 36px);
  --type-h1-lh: 1.12;
  --type-h1-ls: -.04em;
  --type-h1-compact: clamp(26px, 6vw, 32px);
  --type-h2: clamp(19px, 1.5vw, 24px);
  --type-h2-lh: 1.2;
  --type-h2-ls: -.035em;
  --type-h3: 17px;
  --type-h3-lh: 1.3;
  --type-h3-ls: -.02em;
  --type-h4: 15px;
  --type-h4-lh: 1.3;
  --type-h4-ls: -.01em;
  --type-lead: 16px;
  --type-lead-lh: 1.6;
  --type-eyebrow: 12px;
  --type-eyebrow-ls: .1em;
  --type-body: 16px;
  --type-body-lh: 1.5;
  --type-cal-dense: 13px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --pad-card: var(--space-6) var(--space-7);
  --pad-card-lg: var(--space-8) var(--space-9);
  --pad-dialog: var(--space-12);
  --logo-word-ratio: .48;
  --logo-gap-ratio: .12;
  --logo-badge-gap-ratio: .12;
  --footer-heart: #e53e3e;
  --logo-tile: 44px;
  --logo-header-tile: 32px;
  --logo-footer-tile: 24px;
  --logo-height-ratio: 1.28;
  --logo-ratio: 3.006868131868132;
  --logo-start-clearance-ratio: 0.24725274725274726;
  --logo-end-clearance-ratio: 0.2445054945054945;
  --logo-word-center-offset-ratio: 0.07005494505494506;
  --logo-badge-bg: #eef0f2;
  --logo-badge-bg: var(--header-badge-bg);
  --logo-badge-min: 8px;
  --logo-badge-size-ratio: .135;
  --logo-badge-weight: 600;
  --logo-badge-pad: .3em .42em;
}
:root {
  --accent-purple: #a855f7;
  --accent-gold: #906800;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --accent-purple: #c4a7ff;
  --accent-gold: #e0b44a;
  }
}
:root[data-theme="dark"] {
  --accent-purple: #c4a7ff;
  --accent-gold: #e0b44a;
}
/* Replis : une page autonome (brand-blanc, brand-explorations) n'attache pas
   styles.css. Le repli habille la chrome sans jamais écraser le thème de la
   page — si elle définit le jeton, c'est le sien qui gagne. */
/* Shared application chrome. Embedded by sync-brand-foundations.mjs so the
   plan and presentation remain usable as standalone documents. */
:root {
  --layout-width: 2200px;
  --layout-gutter: clamp(16px, 4vw, 40px);
  --layout-header-height: 64px;
  --layout-section-gap: 32px;
  --layout-content-top: clamp(16px, 1.8vw, 24px);
  --control-gap: 8px;
  --control-height: 44px;
  --type-control: 13px;
  --header-h: var(--layout-header-height);
  --admin-topbar-h: var(--layout-header-height);
  --header-bg: var(--nota-blue-950);
  --header-ink: #f4f8fa;
  --header-muted: var(--nota-blue-200, #c8dbe3);
  --header-border: var(--nota-blue-800);
  --header-badge-bg: var(--nota-blue-100, #e5eef3);
  --header-badge-ink: var(--nota-blue-950);
  /* The transparent selected master keeps its white lettering on the same
     navy canvas in both page themes. The canvas belongs to existing scenes,
     never to a new plate around the artwork. */
  --brand-canvas-bg: var(--nota-blue-950);
  --brand-canvas-glow: color-mix(in srgb, var(--nota-blue-800) 24%, var(--brand-canvas-bg));
  --brand-canvas-gradient: radial-gradient(ellipse at 34% 38%, var(--brand-canvas-glow), var(--brand-canvas-bg) 72%);
  --brand-canvas-ink: var(--header-ink);
  --brand-canvas-muted: var(--header-muted);
  --brand-canvas-border: var(--header-border);
  --brand-word-ink: var(--header-ink);
}

/* The outer bar spans the viewport. Its contents align with the page rail. */
.nota-header {
  --logo-tile: var(--logo-header-tile);
  --action-ink: color-mix(in srgb, var(--action-accent, var(--header-ink)) 45%, var(--header-ink));
  --action-tint: color-mix(in srgb, var(--action-accent, var(--header-ink)) 12%, var(--header-bg));
  --control-surface: color-mix(in srgb, var(--header-ink) 12%, var(--header-bg));
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--brand-canvas-bg);
  background-image: var(--brand-canvas-gradient);
  border: 0;
  box-shadow: var(--shadow, 0 2px 6px -3px rgb(16 27 38 / .07), 0 16px 36px -20px rgb(16 27 38 / .2));
  backdrop-filter: none;
}
/* Each half of the chrome names its logo size once, here: no consumer recopies
   a tile (the documents' footer painted the 44 px :root tile until 2026-10-03). */
.nota-footer {
  --logo-tile: var(--logo-footer-tile);
  --ink: var(--brand-canvas-ink);
  --ink-muted: var(--brand-canvas-muted);
  --action-ink: var(--brand-canvas-ink);
  --border: var(--brand-canvas-border);
  background-color: var(--brand-canvas-bg);
  background-image: var(--brand-canvas-gradient);
}
.nota-header-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  width: 100%;
  min-height: var(--layout-header-height);
  height: auto;
  padding: 0 max(var(--layout-gutter), calc((100% - var(--layout-width)) / 2 + var(--layout-gutter)));
  margin: 0;
}
.site-header.nota-header .nota-header-inner {
  max-width: var(--layout-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  height: var(--layout-header-height);
}
/* Owner, 2026-10-03: the header logo aligns left like the footer's. The
   visible N tile, not the master's transparent leading canvas, starts on the
   page rail (same clearance as .footer-brand, at the header's logo height). */
.nota-header :is(.brand, .admin-brand, .lockup, .plan-brand) {
  --lockup-tile: var(--logo-tile);
  color: var(--header-ink);
  margin-block: 0;
  margin-inline-start: calc(var(--logo-tile) * var(--logo-height-ratio) * var(--logo-start-clearance-ratio) * -1);
  text-decoration: none;
  flex-shrink: 0;
  min-height: var(--control-height);
}
.nota-header :is(.brand, .admin-brand) {
  --lockup-word: calc(var(--lockup-tile) * var(--logo-word-ratio));
  --lockup-gap: calc(var(--lockup-tile) * var(--logo-gap-ratio));
  --lockup-badge-gap: calc(var(--lockup-tile) * var(--logo-badge-gap-ratio));
}
.nota-header :is(.lockup, .plan-brand),
[data-nota-surface="pitch"] .nota-header .brand {
  --lockup-word: var(--logo-word-ratio);
  --lockup-gap: var(--logo-gap-ratio);
  --lockup-badge-gap: var(--logo-badge-gap-ratio);
}
.nota-header :is(.admin-brand-sub, .brand-region, .plan-brand-region) {
  /* Taille, graisse et garde viennent de styles.css par le générateur : le
     badge n'est décrit qu'à UN endroit (--lockup-badge-*). Le logo de
     l'en-tête public ne porte plus de badge QUÉBEC (propriétaire, 2026-10-03,
     header-logo-badge.test.mjs). */
  font-size: max(var(--logo-badge-min), calc(var(--logo-tile) * var(--logo-badge-size-ratio)));
  font-family: var(--font-sans);
  font-weight: var(--logo-badge-weight);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--logo-badge-pad);
  color: var(--header-badge-ink);
  background: var(--header-badge-bg);
  border-radius: var(--radius-xs, 3px);
}
/* Shared navigation compensates the artwork's transparent trailing canvas.
   The introductory consumer applies the same clearance at its own larger scale.
   The documents' footer shows its region badge (.plan-brand-region): it takes
   the same compensation as the header's, never the canvas twice. */
.nota-header :is(.admin-brand-sub, .brand-region, .plan-brand-region),
.nota-footer :is(.brand-sub, .brand-region, .plan-brand-region) {
  margin-inline-start: calc(var(--logo-tile) * var(--logo-height-ratio) * var(--logo-end-clearance-ratio) * -1);
}
.nota-header-actions {
  --surface-inset: transparent;
  --surface: var(--control-surface);
  --surface-hover: var(--control-surface);
  --ink: var(--header-ink);
  --ink-muted: var(--header-muted);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap);
  margin-left: auto;
  min-width: 0;
}
.nota-menu { margin-left: auto; }
.nota-menu > summary { color: var(--header-muted); display: none; }
.nota-menu > .nota-header-actions { display: flex; }
/* A closed <details> puts its content in a ::details-content box that Blink keeps
   off the renderer, so the box measures zero: a header that leaves its rail inline
   (drawer never opened) drew that rail outside its own box. At the narrow laise the
   rail is display:none until opened, so releasing the wrapper costs nothing. */
.nota-menu::details-content { content-visibility: visible; }
.nota-header .nota-header-actions :is(a, button):not(.tswitch) {
  /* Le glyphe et le libellé d'une porte tiennent sur UNE ligne : la règle
     s'écrit en rangée, comme l'onglet du carnet qu'elle imite (24-09-27). */
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  font-family: var(--font-sans);
  font-size: var(--type-control);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--header-muted);
  /* The doors are controls, not prose links: on the standalone pages (no
     styles.css) the browser underline showed through (audit 2026-09-22). */
  text-decoration: none;
}
/* L'icône de porte ne se laisse ni écraser ni étirer par le tiroir. Elle est
   dimensionnée ICI, en CSS, parce que la salle pose `svg{width:100%}` sur tout
   son balisage (feuille minifiée) : les attributs width/height du SVG, seuls
   au carnet, n'y résistent pas — mesuré le 2026-09-27, les quatre glyphes se
   peignaient à ~90 px et mangeaient les libellés. */
.nota-header .nav-tab-icon { flex: none; width: 16px; height: 16px; }
.nota-header .nota-header-actions :is(a, button):is(:hover, :focus-visible) { color: var(--action-ink, var(--header-ink)); }
/* La cellule pressée s'écrit à (0,4,1) : la règle des portes juste au-dessus
   pèse (0,3,1) et gardait la cellule FR pressée à --header-muted sur toute
   page dont le rail vit dans le tiroir (salle, brand, agenda-demo — mesuré le
   2026-09-23), quand le carnet, dont le rail est hors tiroir, la lit à
   --header-ink. */
.nota-header .nota-header-actions :is(a, button)[aria-pressed="true"] { background: var(--control-surface); color: var(--header-ink); border-color: var(--header-border); }
/* Le rail FR|EN se lit sur la barre, jamais sur une surface de page. La salle
   (signature.css, `.language-toggle.mini-seg`) posait SON --surface-soft sous
   des boutons encrés pour la nuit : en clair, « EN » mesurait 1,23:1 sur un
   lavis clair dans un tiroir minuit (e2e/interaction-palette.spec.js). Son
   correctif de parité était ancré sur `.topbar`, une classe que plus aucun
   élément ne porte. --surface-inset vaut transparent dans ce rail (ci-dessus) ;
   dit ici, à une spécificité qu'une feuille de page ne dépasse pas, il tient
   sur toutes les pages qui portent la chrome, dans les deux thèmes. */
.nota-header .nota-header-actions .mini-seg { background: var(--surface-inset); }

/* Content rails share their outer margins; long prose retains its own measure. */
[data-nota-surface="brand"] .page,
[data-nota-surface="plan"] > main,
[data-nota-surface="pitch"] > main {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-width);
  margin-inline: auto;
  padding: var(--layout-content-top) var(--layout-gutter) calc(var(--layout-section-gap) * 2);
}
[data-nota-surface="brand"] .hero { padding-top: 0; }
/* Existing guide scenes carry the navy ground around the unchanged master. */
[data-nota-surface="brand"] :is(.hero, .lockup-specimen, .usage-specimen) {
  --ink: var(--brand-canvas-ink);
  --ink-muted: var(--brand-canvas-muted);
  --border: var(--brand-canvas-border);
  color: var(--brand-canvas-ink);
  background-color: var(--brand-canvas-bg);
  background-image: var(--brand-canvas-gradient);
}
[data-nota-surface="brand"] .hero {
  --brand: var(--brand-canvas-ink);
  --action-ink: var(--brand-canvas-ink);
  --action-tint: color-mix(in srgb, var(--brand-canvas-ink) 12%, var(--brand-canvas-bg));
  --subtitle-ink: var(--header-badge-ink);
  --brand-tint-solid: var(--header-badge-bg);
}
[data-nota-surface="brand"] .section { margin-top: var(--layout-section-gap); padding-top: var(--layout-section-gap); }
[data-nota-surface="brand"] .section-head { margin-bottom: 16px; gap: 24px; }
[data-nota-surface="brand"] .section-head p { font-size: var(--type-body); line-height: var(--type-body-lh); }
[data-nota-surface="brand"] .lede { max-width: 47ch; }
[data-nota-surface="pitch"] .deck-head h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
[data-nota-surface="pitch"] .deck-head p:not(.deck-kicker) { font-size: var(--type-lead); line-height: var(--type-lead-lh); }
[data-nota-surface="plan"] :is(.section-body, .french-summary) > :is(p, ul, ol) { max-width: 76ch; }

/* Document commands fold below 1024px. The product owns its narrower 900px
   breakpoint in styles.css because its navigation has a different width budget. */
@media (max-width: 1023.98px) {
  .nota-header.nota-header-inner { flex-wrap: wrap; }
  .nota-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
    min-height: var(--control-height);
    min-width: var(--control-height);
    padding-inline: 8px;
    color: var(--header-muted);
    cursor: pointer;
    font: 600 var(--type-control)/1 var(--font-sans);
    list-style: none;
  }
  .nota-menu > summary::-webkit-details-marker { display: none; }
  .nota-menu:not([open]) > .nota-header-actions { display: none; }
  .nota-menu > .nota-header-actions {
    position: absolute;
    top: 100%;
    inset-inline: var(--layout-gutter);
    padding: 16px;
    margin: 0;
    border: 1px solid var(--header-border);
    border-radius: var(--radius);
    background: var(--header-bg);
    box-shadow: var(--shadow, 0 2px 6px -3px rgb(16 27 38 / .07), 0 16px 36px -20px rgb(16 27 38 / .2));
  }
  .nota-header .top-links { flex-direction: row; align-items: center; }
}
@media print {
  .nota-header { position: static; box-shadow: none; }
  .nota-header-actions { display: none; }
}

[data-nota-surface="acquisition"] .search-page { max-width: var(--layout-width); padding: var(--layout-content-top) var(--layout-gutter) 64px; }
[data-nota-surface="acquisition"] .search-page :is(p, ol, ul) { max-width: 76ch; }
.nota-header > .lang-link { display: inline-flex; align-items: center; min-height: var(--control-height); padding-inline: 12px; color: var(--header-muted); }

/* LES RÈGLES DE BASE DU VERROU, pour les pages qui n'attachent pas styles.css.
   Elles sont volontairement portées par `.nota-header`/`.nota-footer` : sur une
   page QUI attache styles.css (le carnet, la salle), ses propres règles, plus
   anciennes dans la cascade mais de spécificité égale ou supérieure, restent en
   place — rien ne bouge là-bas. */
.nota-header .brand-lockup,
.nota-footer .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-tile) * var(--logo-gap-ratio));
  flex: none;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.nota-header .brand-logo-svg,
.nota-footer .brand-logo-svg {
  display: block;
  height: calc(var(--logo-tile) * var(--logo-height-ratio));
  width: calc(var(--logo-tile) * var(--logo-height-ratio) * var(--logo-ratio));
  flex: none;
}
/* The selected artwork keeps its original white lettering in both themes. */
.nota-header .visually-hidden,
.nota-footer .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Le verrou et son badge sur UNE ligne, avec la garde décidée le 2026-09-14. */
.nota-header .brand,
.nota-header .lockup,
.nota-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-tile) * var(--logo-badge-gap-ratio));
  text-decoration: none;
}
/* Le N visible du pied s'aligne sur la colonne Produit (propriétaire,
   2026-10-03 : « le logo doit être aligné sur la colonne produit »). Le bord
   mesuré est celui du N enregistré, pas celui de la toile transparente du
   maître : la marge rend exactement mark.x à l'échelle de l'artwork peint
   ci-dessus (même --logo-tile, même --logo-height-ratio). La règle vit dans le
   bloc généré qui émet --logo-start-clearance-ratio : une page ne peut porter
   l'une sans l'autre, et la rangée d'identité ne garde aucun retrait propre à
   un document (le pied du pitch posait 6 px à tous ses liens sous 500 px).
   Le carnet, la salle, la console, le guide, les pages de recherche et les
   trois documents lisent ce même pied (footer-brand-alignment.test.mjs). */
.nota-footer .footer-brand {
  padding-inline-start: 0;
  margin-inline-start: calc(var(--logo-tile) * var(--logo-height-ratio) * var(--logo-start-clearance-ratio) * -1);
}