/* /Features/Access/ContentAccessTest.razor.rz.scp.css */
.access-tree[b-koivjmda2i] { list-style: none; padding: 0; margin: 0; }
.access-tree li[b-koivjmda2i] { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem .3rem calc(.5rem + var(--depth, 0) * 1.25rem); border-bottom: 1px solid var(--nrc-gris-200, #e9ecef); }
.access-tree li.hidden[b-koivjmda2i] { color: var(--nrc-gris-500, #6c757d); background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, .03) 6px 12px); }
.access-tree li.hidden .title[b-koivjmda2i] { text-decoration: line-through; }
.access-tree .reason[b-koivjmda2i] { margin-left: auto; font-size: .85em; font-style: italic; }
/* /Features/Access/NodeAccessEditor.razor.rz.scp.css */
/* Who may see a node: the two radios, the group boxes indented under the second one (greyed while « Tous » is on),
   and the inherited restriction named above them. */
.access-editor[b-kxxje0jxgj] { display: flex; flex-direction: column; gap: 0.35rem; }
.access-inherited[b-kxxje0jxgj] { display: flex; gap: 0.5rem; margin: 0 0 0.4rem; padding: 0.5rem 0.65rem; font-size: 0.82rem; line-height: 1.45; color: var(--nrc-gris-700); background: var(--nrc-gris-50); border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); }
.access-inherited > i[b-kxxje0jxgj] { flex-shrink: 0; color: var(--nrc-gris-500); }
.access-groups[b-kxxje0jxgj] { display: flex; flex-direction: column; gap: 0.3rem; margin-left: 1.6rem; padding-top: 0.15rem; }
.access-groups.is-off[b-kxxje0jxgj] { opacity: 0.55; }
.access-group[b-kxxje0jxgj] { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); cursor: pointer; }
.access-group:hover[b-kxxje0jxgj] { background: var(--nrc-gris-50); }
.access-group.is-on[b-kxxje0jxgj] { border-color: rgba(13, 110, 253, 0.4); background: #eef4ff; }
.access-group .form-check-input[b-kxxje0jxgj] { margin-top: 0.2rem; flex-shrink: 0; }
.access-group-text[b-kxxje0jxgj] { display: flex; flex-direction: column; min-width: 0; }
.access-group-name[b-kxxje0jxgj] { font-weight: 600; font-size: 0.9rem; }
.access-group-desc[b-kxxje0jxgj] { font-size: 0.78rem; color: var(--nrc-gris-500); }
.access-note[b-kxxje0jxgj] { margin: 0; font-size: 0.82rem; color: var(--nrc-gris-500); font-style: italic; }
.access-warn[b-kxxje0jxgj] { margin: 0.2rem 0 0; font-size: 0.8rem; color: #9a6700; }
/* /Features/Builder/AdminContentTree.razor.rz.scp.css */
/* The tree page: the tree on the left, the panel of the selected node on the right (stacked under lg). The right
   column sticks while the tree scrolls, and scrolls on its own when the panel is taller than the window
   (.app-main is the scrolling box of the shell). */
.tree-layout[b-eeop61u5og] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 992px) {
    .tree-layout[b-eeop61u5og] { grid-template-columns: minmax(22rem, 5fr) minmax(24rem, 6fr); }
    .panel-column[b-eeop61u5og] { position: sticky; top: 0; max-height: calc(100vh - 2rem); overflow: auto; }
}
.tree-header[b-eeop61u5og] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.tree-body[b-eeop61u5og] { padding: 0.6rem 0.6rem; }
.tree-hint[b-eeop61u5og] { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--nrc-gris-500); font-style: italic; }

/* The notices of the right column (a page just created, unsaved changes held back). */
.admin-notice.created-notice[b-eeop61u5og] { border-left-color: var(--nrc-vert); }
.admin-notice.is-warning[b-eeop61u5og] { border-left-color: #ffc107; }

/* The create form (a child being added) above the panel. */
.create-card[b-eeop61u5og] { margin-bottom: 1rem; }
.create-card .panel-body[b-eeop61u5og] { display: flex; flex-direction: column; gap: 0.9rem; }
.create-where[b-eeop61u5og] { margin: 0; font-size: 0.85rem; color: var(--nrc-gris-500); }
.create-file-row[b-eeop61u5og] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.create-file[b-eeop61u5og] { font-size: 0.9rem; }
/* /Features/Builder/AdminContentTreeNodes.razor.rz.scp.css */
/* The content tree's rows (AdminContentTreeNodes): a branch renders this same component for its children, so the
   nested lists share this scope. The page (AdminContentTree.razor.css) only lays the columns out. */
.tree[b-26iiyqlonc] { list-style: none; margin: 0; padding: 0; }
.tree-children[b-26iiyqlonc] { margin-left: 1.1rem; padding-left: 0.35rem; border-left: 1px solid var(--nrc-gris-200); }

.tree-row[b-26iiyqlonc] { display: flex; align-items: center; gap: 0.25rem; min-height: 2.25rem; padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); user-select: none; }
.tree-row:hover[b-26iiyqlonc] { background: var(--nrc-gris-100); }
.tree-row.selected[b-26iiyqlonc] { background: #e8f1ff; box-shadow: inset 3px 0 0 var(--nrc-bleu); }
.tree-row.dragging[b-26iiyqlonc] { opacity: 0.4; }
.tree-row.drop-into[b-26iiyqlonc] { background: rgba(13, 110, 253, 0.12); outline: 2px dashed rgba(13, 110, 253, 0.65); outline-offset: -2px; }
.tree-row.unpublished .tree-title[b-26iiyqlonc] { color: var(--nrc-gris-500); }
.tree-row-pending[b-26iiyqlonc] { outline: 1px dashed rgba(13, 110, 253, 0.7); outline-offset: -1px; color: var(--nrc-gris-700); }
.tree-row-confirm[b-26iiyqlonc] { background: #fff5f5; box-shadow: inset 3px 0 0 var(--nrc-rouge); gap: 0.5rem; flex-wrap: wrap; }
.tree-confirm-text[b-26iiyqlonc] { flex: 1 1 12rem; font-size: 0.9rem; }

/* The grip is the drag handle's picture, not the handle: the whole row drags. */
.tree-grip[b-26iiyqlonc] { width: 0.9rem; flex-shrink: 0; font-size: 0.85rem; color: var(--nrc-gris-500); opacity: 0; cursor: grab; }
.tree-row:hover .tree-grip[b-26iiyqlonc] { opacity: 0.7; }

.tree-toggle[b-26iiyqlonc], .tree-toggle-spacer[b-26iiyqlonc] { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.tree-toggle.btn-sm[b-26iiyqlonc] { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; line-height: 1; color: var(--nrc-gris-500); background: transparent; }
.tree-toggle.btn-sm:hover[b-26iiyqlonc] { color: var(--nrc-gris-900); }
.tree-toggle .bi[b-26iiyqlonc] { font-size: 0.75rem; }

/* The label is a button, so the keyboard reaches every row; it looks like text. */
.tree-label[b-26iiyqlonc] { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; padding: 0.15rem 0.25rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.tree-label:focus-visible[b-26iiyqlonc] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
/* The ↳ before every row but the root: the row hangs from the one above. */
.tree-corner[b-26iiyqlonc] { flex-shrink: 0; font-size: 0.8rem; color: var(--nrc-gris-400); }
.tree-title[b-26iiyqlonc] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-badge[b-26iiyqlonc] { flex-shrink: 0; font-weight: 500; }
.tree-lock[b-26iiyqlonc] { flex-shrink: 0; font-size: 0.8rem; color: var(--nrc-gris-700); cursor: help; }

/* The tools show under the pointer or the keyboard focus (the open « Ajouter » menu keeps the focus in the row). */
.tree-tools[b-26iiyqlonc] { flex-shrink: 0; opacity: 0; transition: opacity 0.12s ease-in-out; }
.tree-row:hover .tree-tools[b-26iiyqlonc], .tree-row:focus-within .tree-tools[b-26iiyqlonc] { opacity: 1; }
.tree-tools .btn[b-26iiyqlonc] { --bs-btn-padding-y: 0.05rem; --bs-btn-padding-x: 0.35rem; --bs-btn-font-size: 0.8rem; line-height: 1.3; }
.tree-tools .dropdown-item[b-26iiyqlonc] { font-size: 0.9rem; }

/* Insertion bands, only in the DOM while a drag is in flight: 10px straddling a row boundary, pulled back by a
   negative margin so starting a drag never shifts the tree under the cursor. */
.tree-gap[b-26iiyqlonc] { position: relative; z-index: 3; height: 10px; margin-bottom: -10px; }
.tree-gap.trailing[b-26iiyqlonc] { margin-top: -10px; margin-bottom: 0; }
.tree-gap[b-26iiyqlonc]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; }
.tree-gap.trailing[b-26iiyqlonc]::after { top: auto; bottom: 0; }
.tree-gap.active[b-26iiyqlonc]::after { background: var(--nrc-bleu); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); }
/* /Features/Builder/Blocks/BlockFrame.razor.rz.scp.css */
/* A block's frame (BlockFrame.razor): a border that shows on hover or focus, a small head (grip, kind, ×) that
   fades until then, the editor under it. The dragged one fades as a whole (its image travels with the pointer). */
.block-frame[b-lcyhs5m662] { position: relative; border: 1px solid transparent; border-radius: var(--radius-md); background: #fff; transition: border-color 0.12s ease, background-color 0.12s ease, opacity 0.12s ease; }
.block-frame:hover[b-lcyhs5m662], .block-frame:focus-within[b-lcyhs5m662] { border-color: var(--nrc-gris-300); }
.block-frame.is-dragged[b-lcyhs5m662] { opacity: 0.4; }
.block-head[b-lcyhs5m662] { display: flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.35rem 0.15rem 0.2rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--nrc-gris-500); opacity: 0.55; transition: opacity 0.12s ease; }
.block-frame:hover .block-head[b-lcyhs5m662], .block-frame:focus-within .block-head[b-lcyhs5m662] { opacity: 1; }
/* A head that is a handle says so over its whole width; the grip inside it keeps the same pointer it always had. */
.block-head[draggable="true"][b-lcyhs5m662] { cursor: grab; }
.block-head[draggable="true"]:active[b-lcyhs5m662] { cursor: grabbing; }
.block-grip[b-lcyhs5m662] { display: inline-flex; align-items: center; padding: 0.2rem 0.1rem; border-radius: 3px; color: var(--nrc-gris-400); cursor: grab; line-height: 1; font-size: 1rem; }
.block-grip:hover[b-lcyhs5m662] { color: var(--nrc-gris-700); background: var(--nrc-gris-100); }
.block-grip:active[b-lcyhs5m662] { cursor: grabbing; }
.block-kind[b-lcyhs5m662] { display: inline-flex; align-items: center; gap: 0.3rem; }
.block-kind i[b-lcyhs5m662] { font-size: 0.95rem; }
.block-head-fill[b-lcyhs5m662] { flex: 1 1 0; }
/* Inline: the head IS the block's line — the grip, the block itself, the × — and the block holds the page's own text,
   so the head's small caps stop at the grip and the ×. The fade does too: it cannot be the line's, because a child
   is never less transparent than its parent and the text would fade with them. The line's items sit at its top, so
   the grip and the × stay where they are as the text grows. */
.block-frame.is-inline .block-head[b-lcyhs5m662] { align-items: flex-start; padding-top: 0.4rem; padding-bottom: 0.3rem; font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: inherit; opacity: 1; }
.block-frame.is-inline .block-grip[b-lcyhs5m662], .block-frame.is-inline .block-close[b-lcyhs5m662] { opacity: 0.55; transition: opacity 0.12s ease; }
/* A surface (Grab): the frame lights up whole under the pointer and says a click opens it. Its outline is
   :focus-visible rather than :focus-within — the × inside holds the focus for removing the block, not for opening
   it. The grip keeps the pointer it always had: it is still the thing that says a block can be dragged. */
.block-frame.is-grab[b-lcyhs5m662] { cursor: pointer; }
.block-frame.is-grab:hover[b-lcyhs5m662] { border-color: var(--nrc-gris-300); background: var(--nrc-gris-50); }
.block-frame.is-grab:focus-visible[b-lcyhs5m662] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.block-frame.is-inline:hover .block-grip[b-lcyhs5m662], .block-frame.is-inline:hover .block-close[b-lcyhs5m662],
.block-frame.is-inline:focus-within .block-grip[b-lcyhs5m662], .block-frame.is-inline:focus-within .block-close[b-lcyhs5m662] { opacity: 1; }
/* The × is a smaller mark than the grip and would sit higher than it on the line: it comes down to meet it. */
.block-frame.is-inline .block-close[b-lcyhs5m662] { margin-top: 0.2rem; }
.block-fill[b-lcyhs5m662] { flex: 1 1 0; min-width: 0; }
/* What the block puts in its own head, at the right before the × — read as buttons, not as the head's small caps. */
.block-tools[b-lcyhs5m662] { display: flex; align-items: center; gap: 0.3rem; margin-right: 0.15rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.block-close[b-lcyhs5m662] { font-size: 0.6rem; opacity: 0.6; }
.block-close:hover[b-lcyhs5m662] { opacity: 1; }
.block-body[b-lcyhs5m662] { padding: 0.2rem 0.5rem 0.5rem; }
/* The block at its max width and place (BlockWidth, the same rule as the page's .page-block). */
.block-width-box[data-align="center"][b-lcyhs5m662] { margin-inline: auto; }
.block-width-box[data-align="right"][b-lcyhs5m662] { margin-left: auto; }
/* /Features/Builder/Blocks/BlockWidthPicker.razor.rz.scp.css */
/* A block's max width and alignment (BlockWidthPicker.razor): a quiet button in the frame's head — an outline once a
   width is set — and its panel, read as a form rather than as the head's small caps. */
.block-width-toggle[b-nz7y99d58j] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.4rem; font-size: 0.8rem; color: var(--nrc-gris-700); border: 1px solid transparent; }
.block-width-toggle:hover[b-nz7y99d58j], .block-width-toggle[data-set][b-nz7y99d58j] { border-color: var(--nrc-gris-300); }
.block-width-toggle[data-set][b-nz7y99d58j] { background: #fff; }
.block-width-menu[b-nz7y99d58j] { min-width: 15rem; padding: 0.6rem 0.75rem 0.7rem; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.875rem; color: var(--nrc-gris-900); }
.block-width-label[b-nz7y99d58j] { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--nrc-gris-500); }
.block-width-label:not(:first-child)[b-nz7y99d58j] { margin-top: 0.7rem; }
.block-width-custom[b-nz7y99d58j] { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.block-width-custom .form-control[b-nz7y99d58j] { width: 6rem; }
.block-width-custom span[b-nz7y99d58j] { font-size: 0.8rem; color: var(--nrc-gris-500); }
.block-width-hint[b-nz7y99d58j] { margin-top: 0.35rem; font-size: 0.75rem; color: var(--nrc-gris-500); }
/* /Features/Builder/Blocks/ChildrenBlockEditor.razor.rz.scp.css */
/* The sub-pages block's editor (ChildrenBlockEditor.razor): the style, the tiles a row, their picture size,
   their own size and the descriptions' switch on one line, apart. */
.children-editor-tools[b-y5s3hx9l7b] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.children-columns[b-y5s3hx9l7b] { display: inline-flex; align-items: center; gap: 0.3rem; }
.children-columns > .bi[b-y5s3hx9l7b] { color: var(--nrc-gris-500); }
.children-columns .form-select[b-y5s3hx9l7b] { width: auto; }
.children-desc[b-y5s3hx9l7b] { margin: 0; }
/* /Features/Builder/Blocks/ImageBlockEditor.razor.rz.scp.css */
/* The image block's editor (ImageBlockEditor.razor): the empty tile inside its drop zone (a child component's root,
   hence ::deep), the picture with its tools and its resize handles on it, the subtitle under it. No fields grid any
   more (2026-09-18): the block is the picture.

   The empty tile and the round tools are the page panel's picture input (NodePanel.razor.css, .node-picture*) drawn
   again here: CSS isolation gives each component its own stylesheet, so the idiom is copied rather than shared.
   Whoever changes one changes the other — or promotes both to app.css. The resize frame is not copied: its handles
   are drawn by the global wwwroot/css/rich-text.css, the same ones the text editor shows around a selected picture. */

/* The zone is no more than the room around the tile: it keeps MediaDropZone's own drag-over ring, having nothing
   of its own left to light up now that the tile is the frame. */
[b-qsh4et19ls] .image-drop { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; border-radius: var(--radius-sm); }
[b-qsh4et19ls] .image-drop .media-drop-notices { align-self: stretch; text-align: left; }
.image-empty[b-qsh4et19ls] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    width: 160px; aspect-ratio: 16 / 9; padding: 0; border: 1px dashed var(--nrc-gris-200); border-radius: var(--radius-sm);
    background: var(--nrc-gris-50); color: var(--nrc-gris-500); font: inherit; font-size: 0.75rem; cursor: pointer;
}
.image-empty .bi[b-qsh4et19ls] { font-size: 1.4rem; }
.image-empty:hover[b-qsh4et19ls], .image-empty:focus-visible[b-qsh4et19ls] { border-color: var(--nrc-bleu); color: var(--nrc-bleu); background: #eef4ff; }

.image-editor[b-qsh4et19ls] { display: flex; flex-direction: column; gap: 0.4rem; }
.image-stage[b-qsh4et19ls] { display: flex; }
.image-stage[data-align="left"][b-qsh4et19ls] { justify-content: flex-start; }
.image-stage[data-align="center"][b-qsh4et19ls] { justify-content: center; }
.image-stage[data-align="right"][b-qsh4et19ls] { justify-content: flex-end; }
.image-stage[data-align="full"] .image-figure[b-qsh4et19ls], .image-stage[data-align="full"] .image-box[b-qsh4et19ls] { width: 100%; }
.image-stage[data-align="full"] img[b-qsh4et19ls] { width: 100% !important; }
/* The figure shrinks to the picture (the reader's own figure does the same), so the subtitle under it takes the
   picture's width and no more. The box is the picture's own room: what the tools and the handles hang on. */
.image-figure[b-qsh4et19ls] { width: fit-content; max-width: 100%; }
.image-box[b-qsh4et19ls] { position: relative; display: inline-flex; max-width: 100%; }
/* The picture at the size the page will give it — no cap of its own: a picture whose shown size were not its real
   one would make the handles lie, since a drag starts from what is on the screen. The column caps the width. */
.image-box img[b-qsh4et19ls] { display: block; max-width: 100%; height: auto; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); background: var(--nrc-gris-50); }
/* The eight handles of js/richtext/resize-frame.js, drawn by wwwroot/css/rich-text.css: the frame is the picture's
   box. Sized rather than inset, because a drag writes its width and height on it. */
.image-box .resize-frame[b-qsh4et19ls] { top: 0; left: 0; width: 100%; height: 100%; }

/* The tools and the handles are the block's, not the page's: they show while the block is under the pointer or
   holds the focus, and the block rests as the picture alone. Hidden, they keep taking the pointer — which changes
   nothing, since a pointer on one of them is a pointer on the block, and the block is then no longer resting.
   A resize carries on outside the block (the pointer is captured): the frame stays while it does, or the shade and
   the preview it is showing would go with it. */
.image-overlay[b-qsh4et19ls], .image-box .resize-frame[b-qsh4et19ls] { opacity: 0; transition: opacity 0.12s ease; }
.image-editor:hover .image-overlay[b-qsh4et19ls], .image-editor:focus-within .image-overlay[b-qsh4et19ls],
.image-editor:hover .resize-frame[b-qsh4et19ls], .image-editor:focus-within .resize-frame[b-qsh4et19ls],
.image-box .resize-frame.resizing[b-qsh4et19ls] { opacity: 1; }
/* A tool holding its menu open stays, whether or not the pointer is still on the block and whether or not the
   browser gave the button the focus when it was clicked (Firefox does not). */
.image-overlay:has(.dropdown-menu.show)[b-qsh4et19ls] { opacity: 1; }

.image-overlay[b-qsh4et19ls] { position: absolute; top: 0.3rem; right: 0.3rem; z-index: 3; display: flex; gap: 0.25rem; }
.image-tool[b-qsh4et19ls] { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--nrc-gris-800); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 0.75rem; }
.image-tool:hover[b-qsh4et19ls], .image-tool:focus-visible[b-qsh4et19ls] { background: #fff; color: var(--nrc-bleu); }
.image-tool.is-danger:hover[b-qsh4et19ls], .image-tool.is-danger:focus-visible[b-qsh4et19ls] { color: var(--nrc-rouge); }
/* A link is set: the tool says so without opening. */
.image-tool.is-set[b-qsh4et19ls] { background: var(--nrc-bleu); color: #fff; }
.image-tool.is-set:hover[b-qsh4et19ls], .image-tool.is-set:focus-visible[b-qsh4et19ls] { background: var(--nrc-bleu); color: #fff; }
.image-tool-menu[b-qsh4et19ls] { min-width: 0; padding: 0.35rem; }
.image-link-menu[b-qsh4et19ls] { min-width: 18rem; }
/* The layout goes on .show, never on the menu itself: Bootstrap hides a menu with display:none and shows it with
   display:block, and a scoped rule outranks both — a display here would leave the field on the page at all times. */
.image-link-menu.show[b-qsh4et19ls] { display: flex; flex-direction: column; gap: 0.25rem; }
.image-link-menu label[b-qsh4et19ls] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nrc-gris-500); font-weight: 600; }

.image-missing[b-qsh4et19ls] { margin: 0; font-size: 0.85rem; color: var(--nrc-rouge); }

/* The subtitle sits under the picture, on the picture's side, in the size and the colour the page gives a
   figcaption (ImageBlockView.razor.css) so it reads here as it will read there — a full-width picture's caption
   reads from the left, as the reader's does. Dimmed and named while there is none, the text once there is one, its
   field and two buttons in its place while it is written. */
.image-caption[b-qsh4et19ls] { display: flex; margin-top: 0.4rem; }
.image-caption[data-align="left"][b-qsh4et19ls], .image-caption[data-align="full"][b-qsh4et19ls] { justify-content: flex-start; }
.image-caption[data-align="center"][b-qsh4et19ls] { justify-content: center; }
.image-caption[data-align="right"][b-qsh4et19ls] { justify-content: flex-end; }
.caption-view[b-qsh4et19ls] { max-width: 100%; padding: 0.15rem 0.35rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--nrc-gris-500); font: inherit; font-size: 0.875rem; text-align: inherit; cursor: pointer; }
.caption-view:hover[b-qsh4et19ls] { border-color: var(--nrc-gris-200); background: var(--nrc-gris-50); }
.caption-view:focus-visible[b-qsh4et19ls] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.caption-view.is-empty[b-qsh4et19ls] { color: var(--nrc-gris-400); font-style: italic; }
.caption-edit[b-qsh4et19ls] { display: flex; align-items: center; gap: 0.15rem; width: 100%; min-width: 0; }
.caption-edit input[b-qsh4et19ls] { flex: 1 1 auto; min-width: 0; }
/* /Features/Builder/Blocks/LinksBlockEditor.razor.rz.scp.css */
/* The documents-and-links block's editor (LinksBlockEditor.razor): the zone around everything (a child component's
   root, hence ::deep — it lights up while files hover), then a row per entry, in one of two states, and the last
   row — the entry not made yet. List or tiles is chosen in the frame's head, not here.

   At rest (is-view): the grip, the preview — the page's own ContentTiles, whose scoped rules draw it — and
   « Retirer », always there. A rule under each row separates them in the list style; in the tiles style the tiles
   separate themselves, and the grip and the tools sit over the two top corners of the one under the pointer.

   Open (is-editing): the row as it has always been — a lead cell down the left (thumbnail or pictogram), the fields
   stacked in the middle — what the entry names, the title behind its icon button, the description — capped in width
   since a title is short, and ✓ garder / ✗ annuler side by side down the right, the row framed so it stands out.

   Dragged: the row leaves the flow (is-dragged) and the ghost holds its room at the spot the drop would take; the
   halves that claim the spots are laid over the rows, hit-testable only while the builder's root says a drag is on
   (.dragging-link, PageBuilder.razor.js). Same shape as the procedure editor's sections (Procedures.Web). */
[b-a7028ctdtn] .links-zone { padding: 0.25rem; border-radius: var(--radius-md); }
.links-list[b-a7028ctdtn] { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; }
.links-item[b-a7028ctdtn] { position: relative; display: grid; gap: 0.6rem; align-items: center; }
.links-tools[b-a7028ctdtn] { display: flex; flex-direction: row; gap: 0.15rem; }

/* ---- A row at rest ---- */
.links-item.is-view[b-a7028ctdtn] { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.1rem 0.15rem; border-bottom: 1px solid var(--nrc-gris-200); }
.links-item.is-view:hover[b-a7028ctdtn], .links-item.is-view:focus-within[b-a7028ctdtn] { background: var(--nrc-gris-50); }
.links-item.is-view.is-missing[b-a7028ctdtn] { background: #fff7f7; }
.links-item.is-view[b-a7028ctdtn] { cursor: pointer; }
.links-item.is-view:focus-visible[b-a7028ctdtn] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.links-view[b-a7028ctdtn] { min-width: 0; border-radius: var(--radius-sm); }
/* A picture in a preview is a picture the browser would rather drag than the row holding it: it takes no pointer,
   so a press on it is a press on the row. The preview itself keeps hers — a tile still lifts under the pointer. */
.links-view[b-a7028ctdtn]  img { pointer-events: none; }
/* The preview's own rules would double the row's: the list is separated here, once, by the row itself. */
.links-view[b-a7028ctdtn]  .content-list { border-top: 0; }
.links-view[b-a7028ctdtn]  .content-list-item { border-bottom: 0; }
.links-flag[b-a7028ctdtn] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.45rem 0.5rem; font-size: 0.88rem; color: #9e1d1a; }

/* ---- The grip: the row is moved by it (PageBuilder.razor.js reads data-drag-grip) ---- */
.links-grip[b-a7028ctdtn] { display: flex; align-items: center; padding: 0 0.15rem; cursor: grab; color: var(--nrc-gris-300); line-height: 1; }
.links-grip:active[b-a7028ctdtn] { cursor: grabbing; }
.links-item:hover .links-grip[b-a7028ctdtn] { color: var(--nrc-gris-700); }
.links-grip.is-empty[b-a7028ctdtn] { visibility: hidden; }

/* ---- A row open on its fields ---- */
.links-item.is-editing[b-a7028ctdtn] {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: start; margin: 0.35rem 0; padding: 0.55rem;
    border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm);
}
.links-item.is-editing.is-missing[b-a7028ctdtn] { border-color: #f5b5b5; background: #fff7f7; }
/* The square on the left is the icon picker (IconPicker, ButtonOnly — 2026-09-18): the button is given the room
   the preview had, and the panel hangs from here, this being what is positioned now that the title's input group
   is gone. The picker's root draws no box (display: contents), so the button is this square's own child. */
.links-lead[b-a7028ctdtn] { position: relative; display: flex; }
.links-lead[b-a7028ctdtn]  .icon-picker-button { width: 3.2rem; height: 4rem; border-radius: var(--radius-sm); font-size: 1.6rem; color: var(--nrc-gris-500); background: var(--nrc-gris-50); }
.links-lead[b-a7028ctdtn]  .icon-picker-button:hover, .links-lead[b-a7028ctdtn]  .icon-picker-button:focus-visible { color: var(--nrc-bleu); border-color: var(--nrc-bleu); background: #eef4ff; }
.links-fields[b-a7028ctdtn] { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; max-width: 40rem; }
.links-target[b-a7028ctdtn] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex-wrap: wrap; font-size: 0.88rem; }
.links-target > .form-control[b-a7028ctdtn] { flex: 1 1 12rem; min-width: 0; }
/* An address is two lines: what it is, then whether it opens in a new tab — which is about the address and not a
   second thing on the same line as it. */
.links-target[data-kind="url"][b-a7028ctdtn] { flex-direction: column; align-items: stretch; gap: 0.35rem; }
.links-url[b-a7028ctdtn] { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.links-url > .form-control[b-a7028ctdtn] { flex: 1 1 auto; min-width: 0; }
/* What the entry points at, said before its name: a row shows a document and a page the same way. */
.links-kind[b-a7028ctdtn] { color: var(--nrc-gris-500); }
.links-name[b-a7028ctdtn] { font-weight: 600; overflow-wrap: anywhere; }
.links-size[b-a7028ctdtn] { color: var(--nrc-gris-500); font-size: 0.8rem; }
.links-filename[b-a7028ctdtn] { font-family: monospace; font-size: 0.75rem; color: var(--nrc-gris-500); }
.links-newtab[b-a7028ctdtn] { margin: 0; white-space: nowrap; font-size: 0.85rem; align-self: flex-start; }
.links-warn[b-a7028ctdtn] { font-size: 0.8rem; color: #9e1d1a; }

/* ---- The last row: an entry that does not exist yet ---- */
/* A place for an entry rather than one, so it is hatched rather than filled — the same diagonal the procedure
   editor's « Ajouter une section » carries — and it darkens under the pointer. Clicked, it shows the three kinds
   in its place; it stops hatching then, being a row one is choosing on rather than a place to click. */
.links-new[b-a7028ctdtn] {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.15rem; cursor: pointer;
    color: var(--nrc-gris-500); font-size: 0.88rem;
    background-image: repeating-linear-gradient(45deg, #fff 0 0.45rem, var(--nrc-gris-100) 0.45rem 0.9rem);
    transition: color 0.12s ease-out, background-image 0.12s ease-out;
}
.links-new:hover[b-a7028ctdtn] {
    color: var(--nrc-gris-800);
    background-image: repeating-linear-gradient(45deg, var(--nrc-gris-100) 0 0.45rem, var(--nrc-gris-200) 0.45rem 0.9rem);
}
.links-new:focus-visible[b-a7028ctdtn] { outline: 2px solid var(--nrc-bleu); outline-offset: -2px; }
.links-new.is-open[b-a7028ctdtn], .links-new.is-open:hover[b-a7028ctdtn] { cursor: default; background-image: none; background: var(--nrc-gris-50); }
.links-new-label[b-a7028ctdtn] { display: flex; align-items: center; gap: 0.4rem; min-width: 0; white-space: nowrap; }
.links-new-label i[b-a7028ctdtn] { color: var(--nrc-vert); }
.links-new-choices[b-a7028ctdtn] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* The × sits at the far right of the row, whatever the three kinds take. */
.links-new-cancel[b-a7028ctdtn] { margin-left: auto; }

/* ---- The drag: the halves, the ghost, the row that left the flow ---- */
.links-item.is-dragged[b-a7028ctdtn] { display: none; }
.links-half[b-a7028ctdtn] { position: absolute; left: 0; right: 0; height: calc(50% + 2px); z-index: 25; pointer-events: none; display: block; }
.links-half.before[b-a7028ctdtn] { top: -2px; }
.links-half.after[b-a7028ctdtn] { bottom: -2px; }
.dragging-link .links-half[b-a7028ctdtn] { pointer-events: auto; }
.links-ghost[b-a7028ctdtn] { position: relative; height: 2.5rem; margin: 0.25rem 0; border: 2px dashed var(--nrc-bleu); border-radius: var(--radius-sm); background: #eef4ff; }
/* Its own margins are part of what it holds: a release there lands on the ghost, not between two rows. */
.links-ghost[b-a7028ctdtn]::before { content: ""; position: absolute; inset: -0.25rem 0; }

/* ---- The tiles style: the rows lay out as the page's own tiles grid (--tiles-columns, the very columns
   ContentTiles uses); a row is one tile with its grip and its tools over the corners, and the row open on its
   fields takes the whole width. The halves split a tile left and right, the way they split a line top and bottom. ---- */
.links-list.is-tiles[b-a7028ctdtn] { display: grid; grid-template-columns: var(--tiles-columns); gap: 1rem; align-items: stretch; }
.links-list.is-tiles .links-item.is-view[b-a7028ctdtn] { display: block; position: relative; padding: 0; border-bottom: 0; background: none; }
/* After the rule above, and as specific: a dragged tile leaves the grid like a dragged line leaves the list. */
.links-list.is-tiles .links-item.is-dragged[b-a7028ctdtn] { display: none; }
.links-list.is-tiles .links-item.is-editing[b-a7028ctdtn] { grid-column: 1 / -1; margin: 0; }
/* Over the tile's two top corners — a tile AT REST only. An open row is a form spanning the grid, and its ✓ and
   ✗ belong in its last column: floated to the corner they stood on the fields, the address running under them. */
.links-list.is-tiles .links-item.is-view .links-grip[b-a7028ctdtn] { position: absolute; z-index: 2; top: 0.3rem; left: 0.3rem; background: #fff; border-radius: var(--radius-sm); }
.links-list.is-tiles .links-item.is-view .links-tools[b-a7028ctdtn] { position: absolute; z-index: 2; top: 0.3rem; right: 0.3rem; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.links-list.is-tiles .links-half[b-a7028ctdtn] { top: 0; bottom: 0; left: auto; right: auto; width: calc(50% + 2px); height: auto; }
.links-list.is-tiles .links-half.before[b-a7028ctdtn] { left: -2px; }
.links-list.is-tiles .links-half.after[b-a7028ctdtn] { right: -2px; }
.links-list.is-tiles .links-ghost[b-a7028ctdtn] { height: auto; min-height: 8rem; margin: 0; }
.links-list.is-tiles .links-new[b-a7028ctdtn] { flex-direction: column; justify-content: center; gap: 0.4rem; min-height: 8rem; text-align: center; }
/* As a tile the row is a column, not a line: the three kinds stack, each as wide as the tile, rather than wrapping
   two-and-one across a width that was never meant to hold them side by side. Their labels read from the middle,
   as everything else on the tile does. */
.links-list.is-tiles .links-new-choices[b-a7028ctdtn] { flex-direction: column; align-self: stretch; }
.links-list.is-tiles .links-new-cancel[b-a7028ctdtn] { margin-left: 0; }
/* /Features/Builder/Blocks/TextBlockEditor.razor.rz.scp.css */
/* The text block's editor (TextBlockEditor.razor), in one of two states.

   At rest: the text as the page will show it (TextBlockView's .rich-text, styled by the global css/rich-text.css),
   inert — the frame around it is what lights up, what takes the click and what starts the drag (BlockFrame Grab);
   an empty block says so in its place. Open:
   the Wordgard editor in the very place the text was, with ✓ garder and ✗ annuler to its right — under it they would
   be behind the menu bar, which hangs from the box while the caret is in it. Both states fill the frame's head
   (BlockFrame Inline), so nothing moves when one gives way to the other. */
.text-view[b-hjmjonqdep] { padding: 0.25rem 0.4rem; }
/* The text at rest is a picture of the page, not the page: nothing in it is followed, selected or dragged on its own
   — every press lands on the frame, which is what opens the block and what moves it. It is also what keeps a picture
   in the text from being dragged away as a picture from a block the pointer meant to move. */
.text-view[b-hjmjonqdep]  .rich-text { pointer-events: none; }
.text-view.is-empty[b-hjmjonqdep] { color: var(--nrc-gris-500); font-size: 0.88rem; font-style: italic; }
.text-empty[b-hjmjonqdep] { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0; }

/* The editor takes the line's room, the two buttons what they need, at the top so they stay put as the text grows. */
.text-edit[b-hjmjonqdep] { display: flex; align-items: flex-start; gap: 0.35rem; }
.text-edit[b-hjmjonqdep]  .media-drop-zone { flex: 1 1 0; min-width: 0; }
.text-tools[b-hjmjonqdep] { display: flex; flex-direction: row; gap: 0.15rem; flex: 0 0 auto; }
/* /Features/Builder/Blocks/TileImageSizePicker.razor.rz.scp.css */
/* The tiles' picture size (TileImageSizePicker.razor): one line, sized to sit in a block's head beside « Tuiles ». */
.tile-size[b-frmmihdmiv] { display: inline-flex; align-items: center; gap: 0.3rem; }
.tile-size > .bi[b-frmmihdmiv] { color: var(--nrc-gris-500); }
.tile-size .form-select[b-frmmihdmiv] { width: auto; }
.tile-size-px[b-frmmihdmiv] { width: 5rem; }
.tile-size-unit[b-frmmihdmiv] { font-size: 0.8rem; color: var(--nrc-gris-500); }
/* /Features/Builder/Blocks/TileSizePicker.razor.rz.scp.css */
/* The tiles' size (TileSizePicker.razor): one line, sized to sit in a block's head beside the picture size. */
.tile-dims[b-qcmby4e43y] { display: inline-flex; align-items: center; gap: 0.3rem; }
.tile-dims > .bi[b-qcmby4e43y] { color: var(--nrc-gris-500); }
.tile-dims-px[b-qcmby4e43y] { width: 5.5rem; }
.tile-dims-sep[b-qcmby4e43y], .tile-dims-unit[b-qcmby4e43y] { font-size: 0.8rem; color: var(--nrc-gris-500); }
/* /Features/Builder/Blocks/VideoBlockEditor.razor.rz.scp.css */
/* The video block's editor (VideoBlockEditor.razor). The empty block's two tiles are the image block's tile
   (ImageBlockEditor.razor.css, itself the page panel's picture input) drawn a third time — CSS isolation gives
   each component its own stylesheet. The filled block borrows nothing it can share either: .image-tool,
   .image-caption and .caption-* are copied here for the same reason. Whoever changes one changes them all, or
   promotes the set to app.css. */

.video-empty-choices[b-1koho4dxfv] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
[b-1koho4dxfv] .video-drop { display: inline-flex; border-radius: var(--radius-sm); }
.media-tile[b-1koho4dxfv] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    width: 160px; aspect-ratio: 16 / 9; padding: 0; border: 1px dashed var(--nrc-gris-200); border-radius: var(--radius-sm);
    background: var(--nrc-gris-50); color: var(--nrc-gris-500); font: inherit; font-size: 0.75rem; cursor: pointer;
}
.media-tile .bi[b-1koho4dxfv] { font-size: 1.4rem; }
.media-tile:hover[b-1koho4dxfv], .media-tile:focus-visible[b-1koho4dxfv], .media-tile.is-open[b-1koho4dxfv] { border-color: var(--nrc-bleu); color: var(--nrc-bleu); background: #eef4ff; }

.video-youtube-ask[b-1koho4dxfv] { display: flex; align-items: center; gap: 0.15rem; max-width: 32rem; margin-top: 0.5rem; }
.video-youtube-ask input[b-1koho4dxfv] { flex: 1 1 auto; min-width: 0; }

.video-notice[b-1koho4dxfv] { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--nrc-gris-600, var(--nrc-gris-700)); }
.video-notice.is-error[b-1koho4dxfv] { color: var(--nrc-rouge); }

.video-editor[b-1koho4dxfv] { display: flex; flex-direction: column; gap: 0.4rem; }
.video-stage[b-1koho4dxfv] { display: flex; }
.video-stage[data-align="left"][b-1koho4dxfv] { justify-content: flex-start; }
.video-stage[data-align="center"][b-1koho4dxfv] { justify-content: center; }
.video-stage[data-align="right"][b-1koho4dxfv] { justify-content: flex-end; }
.video-stage[data-align="full"] .video-figure[b-1koho4dxfv], .video-stage[data-align="full"] .video-box[b-1koho4dxfv] { width: 100%; }
/* The figure shrinks to the video, so the subtitle under it takes the video's width and no more. */
.video-figure[b-1koho4dxfv] { width: fit-content; max-width: 100%; }
.video-box[b-1koho4dxfv] { position: relative; display: inline-flex; max-width: 100%; }
/* The reader's own view inside the box: it brings its own figure, whose width is already the video's (fit-content,
   or the column for a full one) — the box only takes away the margins it uses to place itself, the stage above
   doing that here. Its caption is hidden: the subtitle is written below, and would otherwise be shown twice. */
.video-box[b-1koho4dxfv]  .video-block { margin: 0; }
.video-box[b-1koho4dxfv]  .video-block figcaption { display: none; }

/* Sized rather than inset: a resize writes its width and height on the frame. */
.video-box .resize-frame[b-1koho4dxfv] { top: 0; left: 0; width: 100%; height: 100%; }

/* The tools and the handles come with the pointer, as an image block's do; a resize carries on outside the block
   (the pointer is captured), so .resizing holds the frame while it does. */
.video-overlay[b-1koho4dxfv], .video-box .resize-frame[b-1koho4dxfv] { opacity: 0; transition: opacity 0.12s ease; }
.video-editor:hover .video-overlay[b-1koho4dxfv], .video-editor:focus-within .video-overlay[b-1koho4dxfv],
.video-editor:hover .resize-frame[b-1koho4dxfv], .video-editor:focus-within .resize-frame[b-1koho4dxfv],
.video-box .resize-frame.resizing[b-1koho4dxfv], .video-overlay:has(.dropdown-menu.show)[b-1koho4dxfv] { opacity: 1; }

.video-overlay[b-1koho4dxfv] { position: absolute; top: 0.3rem; right: 0.3rem; z-index: 3; display: flex; gap: 0.25rem; }
.image-tool[b-1koho4dxfv] { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--nrc-gris-800); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 0.75rem; }
.image-tool:hover[b-1koho4dxfv], .image-tool:focus-visible[b-1koho4dxfv] { background: #fff; color: var(--nrc-bleu); }
.image-tool.is-danger:hover[b-1koho4dxfv], .image-tool.is-danger:focus-visible[b-1koho4dxfv] { color: var(--nrc-rouge); }
.image-tool-menu[b-1koho4dxfv] { min-width: 0; padding: 0.35rem; }

.image-caption[b-1koho4dxfv] { display: flex; margin-top: 0.4rem; }
.image-caption[data-align="left"][b-1koho4dxfv], .image-caption[data-align="full"][b-1koho4dxfv] { justify-content: flex-start; }
.image-caption[data-align="center"][b-1koho4dxfv] { justify-content: center; }
.image-caption[data-align="right"][b-1koho4dxfv] { justify-content: flex-end; }
.caption-view[b-1koho4dxfv] { max-width: 100%; padding: 0.15rem 0.35rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--nrc-gris-500); font: inherit; font-size: 0.875rem; text-align: inherit; cursor: pointer; }
.caption-view:hover[b-1koho4dxfv] { border-color: var(--nrc-gris-200); background: var(--nrc-gris-50); }
.caption-view:focus-visible[b-1koho4dxfv] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.caption-view.is-empty[b-1koho4dxfv] { color: var(--nrc-gris-400); font-style: italic; }
.caption-edit[b-1koho4dxfv] { display: flex; align-items: center; gap: 0.15rem; width: 100%; min-width: 0; }
.caption-edit input[b-1koho4dxfv] { flex: 1 1 auto; min-width: 0; }
/* /Features/Builder/IconPicker.razor.rz.scp.css */
/* The icon field: a Bootstrap input group (preview, name, list button, clear), and a panel dropped under it while
   the list is open. The backdrop is an invisible fixed layer under the panel: a click anywhere else closes it. */
.icon-picker[b-0ny2g63mwm] { position: relative; }
.icon-picker-preview[b-0ny2g63mwm] { min-width: 2.4rem; justify-content: center; font-size: 1rem; }
/* ButtonOnly: the root draws no box, so the button is the input group's first control and the panel hangs from the
   group (Bootstrap's .input-group is positioned); the button's right corners are squared to meet the field. */
.icon-picker-inline[b-0ny2g63mwm] { display: contents; }
.icon-picker-button[b-0ny2g63mwm] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; font-size: 1rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.icon-picker-backdrop[b-0ny2g63mwm] { position: fixed; inset: 0; z-index: 1040; }
.icon-picker-panel[b-0ny2g63mwm] { position: absolute; z-index: 1050; top: calc(100% + 0.25rem); left: 0; width: min(26rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; background: #fff; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.icon-picker-grid[b-0ny2g63mwm] { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr)); gap: 0.25rem; max-height: 18rem; overflow: auto; }
.icon-picker-item[b-0ny2g63mwm] { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--nrc-gris-700); background: #fff; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); cursor: pointer; }
.icon-picker-item:hover[b-0ny2g63mwm] { background: var(--nrc-gris-100); border-color: var(--nrc-gris-400); color: var(--nrc-gris-900); }
.icon-picker-item.active[b-0ny2g63mwm] { background: #e8f1ff; border-color: var(--nrc-bleu); color: var(--nrc-bleu); }
/* « No icon of its own »: the kind's own icon, struck through by a diagonal, so the tile shows what falling back
   gives rather than an empty square. */
.icon-picker-item.is-default[b-0ny2g63mwm] { position: relative; color: var(--nrc-gris-400); border-style: dashed; }
.icon-picker-item.is-default[b-0ny2g63mwm]::after { content: ""; position: absolute; left: 15%; right: 15%; top: 50%; border-top: 1px solid currentColor; transform: rotate(-45deg); }
/* « No icon at all »: an empty tile, hatched so it reads as a choice rather than as a hole in the grid. */
.icon-picker-item.is-none[b-0ny2g63mwm] { border-style: dashed; background-image: repeating-linear-gradient(45deg, var(--nrc-gris-100) 0 4px, transparent 4px 8px); }
.icon-picker-item:focus-visible[b-0ny2g63mwm] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.icon-picker-empty[b-0ny2g63mwm] { margin: 0; font-size: 0.85rem; color: var(--nrc-gris-500); font-style: italic; }
/* What the cap left out, and the way to it: under the grid, as wide as it. */
.icon-picker-more[b-0ny2g63mwm] { padding: 0.3rem 0.5rem; border: 1px dashed var(--nrc-gris-300); border-radius: var(--radius-sm); background: var(--nrc-gris-50); color: var(--nrc-gris-700); font-size: 0.85rem; cursor: pointer; }
.icon-picker-more:hover[b-0ny2g63mwm], .icon-picker-more:focus-visible[b-0ny2g63mwm] { border-color: var(--nrc-bleu); background: #eef4ff; color: var(--nrc-bleu); }
.icon-picker-all[b-0ny2g63mwm] { text-decoration: none; white-space: nowrap; }
.icon-picker-foot[b-0ny2g63mwm] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--nrc-gris-500); }
/* /Features/Builder/LayoutPicker.razor.rz.scp.css */
/* Six pictograms in a row (LayoutPicker.razor): a bar per column, proportioned like the layout — "2-1" is a wide bar
   and a narrow one. The size comes from two custom properties, so a page can draw them at its own measure. */
.layout-picker[b-kd3veebrok] { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); background: #fff; }
.layout-choice[b-kd3veebrok] { display: inline-flex; align-items: center; justify-content: center; padding: 3px 4px; border: 0; border-radius: 3px; background: transparent; color: var(--nrc-gris-500); cursor: pointer; }
.layout-choice:hover[b-kd3veebrok] { background: var(--nrc-gris-100); color: var(--nrc-gris-700); }
.layout-choice.active[b-kd3veebrok] { background: var(--nrc-gris-800); color: var(--nrc-jaune); }
.layout-choice:focus-visible[b-kd3veebrok] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.layout-icon[b-kd3veebrok] { display: grid; gap: 2px; width: var(--layout-icon-width, 26px); height: var(--layout-icon-height, 14px); grid-template-columns: 1fr; }
.layout-icon[data-layout="1-1"][b-kd3veebrok] { grid-template-columns: 1fr 1fr; }
.layout-icon[data-layout="1-1-1"][b-kd3veebrok] { grid-template-columns: 1fr 1fr 1fr; }
.layout-icon[data-layout="2-1"][b-kd3veebrok] { grid-template-columns: 2fr 1fr; }
.layout-icon[data-layout="1-2"][b-kd3veebrok] { grid-template-columns: 1fr 2fr; }
.layout-icon[data-layout="1-1-1-1"][b-kd3veebrok] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.layout-icon i[b-kd3veebrok] { display: block; background: currentColor; border-radius: 1px; }
/* /Features/Builder/NodePanel.razor.rz.scp.css */
/* The node panel: the fields stacked, the buttons in a footer of their own. The labels and inputs are the admin
   pages' .field (portal.css); the textarea gets the same dressing here, portal.css only knows input and select. */
/* The header: the kind with the dates under it on the left, « Modifier la page » on the right for a page. */
.node-panel-header[b-hsbokhd9cw] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.node-panel-heading[b-hsbokhd9cw] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.node-panel-meta[b-hsbokhd9cw] { font-weight: 500; font-size: 0.72rem; text-transform: none; letter-spacing: 0; color: var(--nrc-gris-400); }
.node-panel-edit[b-hsbokhd9cw] { flex-shrink: 0; text-transform: none; letter-spacing: 0; }
.node-panel-body[b-hsbokhd9cw] { display: flex; flex-direction: column; gap: 1rem; }

/* A field's label with its ⓘ: the help shows under the field while the button is pressed. */
.node-field-head[b-hsbokhd9cw] { display: flex; align-items: center; gap: 0.3rem; }
.node-info[b-hsbokhd9cw] { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--nrc-gris-400); font-size: 0.85rem; line-height: 1; cursor: pointer; }
.node-info:hover[b-hsbokhd9cw], .node-info:focus-visible[b-hsbokhd9cw], .node-info[aria-expanded="true"][b-hsbokhd9cw] { color: var(--nrc-bleu); }
.field textarea[b-hsbokhd9cw] { font: inherit; padding: 0.5rem 0.65rem; background: #fff; border: 1px solid var(--nrc-gris-300); border-radius: var(--radius-sm); color: #111; min-width: 0; resize: vertical; }
.node-hint[b-hsbokhd9cw] { font-size: 0.78rem; color: var(--nrc-gris-500); line-height: 1.5; }
.node-hint code[b-hsbokhd9cw] { font-size: 0.8rem; color: var(--nrc-gris-700); }
.node-hint-warn[b-hsbokhd9cw] { color: #9a6700; }

/* For a document, the way back to its page. */
.node-owner[b-hsbokhd9cw] { font-size: 0.85rem; }

/* The tile picture: 16:9 like the tile, capped. Empty, the frame is the button that opens the library; filled, its
   two tools sit on the picture itself (change, remove). */
.node-picture-box[b-hsbokhd9cw] { position: relative; width: 160px; }
.node-picture[b-hsbokhd9cw] { display: block; width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); background: var(--nrc-gris-50); }
.node-picture-empty[b-hsbokhd9cw] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0; border-style: dashed; color: var(--nrc-gris-500); font: inherit; font-size: 0.75rem; cursor: pointer; }
.node-picture-empty .bi[b-hsbokhd9cw] { font-size: 1.4rem; }
.node-picture-empty:hover[b-hsbokhd9cw], .node-picture-empty:focus-visible[b-hsbokhd9cw] { border-color: var(--nrc-bleu); color: var(--nrc-bleu); background: #eef4ff; }
.node-picture-overlay[b-hsbokhd9cw] { position: absolute; top: 0.3rem; right: 0.3rem; display: flex; gap: 0.25rem; }
.node-picture-tool[b-hsbokhd9cw] { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--nrc-gris-800); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 0.75rem; }
.node-picture-tool:hover[b-hsbokhd9cw], .node-picture-tool:focus-visible[b-hsbokhd9cw] { background: #fff; color: var(--nrc-bleu); }
.node-picture-tool.is-danger:hover[b-hsbokhd9cw], .node-picture-tool.is-danger:focus-visible[b-hsbokhd9cw] { color: var(--nrc-rouge); }

.node-file[b-hsbokhd9cw] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.node-file-icon[b-hsbokhd9cw] { font-size: 1.3rem; color: var(--nrc-gris-700); }
.node-file-name[b-hsbokhd9cw] { font-weight: 600; }

.node-section[b-hsbokhd9cw] { padding-top: 0.75rem; border-top: 1px solid var(--nrc-gris-200); }
.node-section-title[b-hsbokhd9cw] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nrc-gris-500); font-weight: 600; margin-bottom: 0.5rem; }
.node-section-head[b-hsbokhd9cw] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.node-section-head .node-section-title[b-hsbokhd9cw] { margin-bottom: 0; }
.node-section-count[b-hsbokhd9cw] { margin-left: 0.4rem; font-weight: 500; color: var(--nrc-gris-400); }

/* The page's documents: a row each — thumbnail or icon, title and meta (the title opens the document's own panel),
   the tools under the pointer or the focus; the inline confirm takes the row's place. */
.node-documents[b-hsbokhd9cw] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.node-document[b-hsbokhd9cw] { display: flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; padding: 0.25rem 0.4rem; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); }
.node-document:hover[b-hsbokhd9cw] { background: var(--nrc-gris-50); }
.node-document.unpublished .node-document-title[b-hsbokhd9cw] { color: var(--nrc-gris-500); }
.node-document-thumb[b-hsbokhd9cw] { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2.4rem; flex-shrink: 0; overflow: hidden; border-radius: 2px; background: var(--nrc-gris-100); color: var(--nrc-gris-600); font-size: 1.2rem; }
.node-document-thumb img[b-hsbokhd9cw] { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.node-document-label[b-hsbokhd9cw] { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 0.1rem 0.25rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.node-document-label:hover .node-document-title[b-hsbokhd9cw], .node-document-label:focus-visible .node-document-title[b-hsbokhd9cw] { color: var(--nrc-bleu); text-decoration: underline; }
.node-document-title[b-hsbokhd9cw] { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-document-meta[b-hsbokhd9cw] { font-size: 0.75rem; color: var(--nrc-gris-500); }
.node-document-tools[b-hsbokhd9cw] { flex-shrink: 0; opacity: 0; transition: opacity 0.12s ease-in-out; }
.node-document:hover .node-document-tools[b-hsbokhd9cw], .node-document:focus-within .node-document-tools[b-hsbokhd9cw] { opacity: 1; }
.node-document-tools .btn[b-hsbokhd9cw] { --bs-btn-padding-y: 0.05rem; --bs-btn-padding-x: 0.35rem; --bs-btn-font-size: 0.8rem; line-height: 1.3; }
.node-document-confirm[b-hsbokhd9cw] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%; font-size: 0.85rem; }
.node-document-confirm span[b-hsbokhd9cw] { flex: 1 1 10rem; }
.node-documents-empty[b-hsbokhd9cw] { margin: 0; font-size: 0.82rem; color: var(--nrc-gris-500); font-style: italic; }

.node-panel-footer[b-hsbokhd9cw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--nrc-gris-200); background: var(--nrc-gris-50); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.node-dirty[b-hsbokhd9cw] { margin-right: auto; font-size: 0.8rem; color: #9a6700; font-style: italic; }
.node-save[b-hsbokhd9cw] { min-width: 8rem; }
/* /Features/Builder/PageBuilder.razor.rz.scp.css */
/* The page builder (PageBuilder.razor): the sticky bar, the rows as the reader's grid — the same data-layout rules as
   PageBodyView.razor.css, so the frames sit where the blocks will be —, the landing spots of a drag (halves over the
   frames, gaps between them; armed while the root carries .dragging-block or .dragging-row, put there by
   PageBuilder.razor.js a tick after dragstart and by the render that follows), the add menus, the inline cards, and
   the markup of the child components that have no stylesheet of their own (::deep). */
.page-builder[b-ju1d2ebviu] { position: relative; }

/* Sticky at the top of the admin main's scroll box; the negative margins reach the edges of AdminLayout's padding.
   Above the floating editors (20) and the armed halves (30), under the offcanvas (1045) and the toast. */
.builder-bar[b-ju1d2ebviu] {
    position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem;
    margin: -1rem -1rem 1rem; padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid var(--nrc-gris-200); box-shadow: var(--shadow-sm);
}
.builder-bar-main[b-ju1d2ebviu] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* The way back, the page and its state on one line; the line wraps rather than pushing the actions off the bar. */
.builder-bar-line[b-ju1d2ebviu] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.builder-back[b-ju1d2ebviu] { flex: 0 0 auto; }
.builder-title[b-ju1d2ebviu] { margin: 0; min-width: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.builder-status[b-ju1d2ebviu] { font-size: 0.82rem; color: var(--nrc-gris-500); }
/* The one thing about the page that is worth a badge: what is on screen is not what is stored. */
.builder-dirty[b-ju1d2ebviu] { background: #fff3cd; color: #9a6700; border: 1px solid #ffe49c; font-size: 0.72rem; font-weight: 600; }
.builder-actions[b-ju1d2ebviu] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* Rows: the reader's grid (PageBodyView.razor.css) in a frame, its toolbar spanning every column. */
/* The canvas holds the reader's measure so a block is built at the width it will have on the page: ContentPage's
   70rem less its two 1.75rem gutters, plus the 0.75rem a row's frame keeps on each side. The bar above stays wide.
   Half a screen of room under the last row, so it can be scrolled up to the middle and worked on there rather than
   against the bottom edge — the same room the procedure editor keeps (Procedures.Web, .admin-page-tail). */
.builder-body[b-ju1d2ebviu] { max-width: 68rem; margin: 0 auto; padding-bottom: 50vh; }
.builder-row[b-ju1d2ebviu] {
    position: relative; display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start;
    padding: 0.5rem 0.75rem 0.75rem; border: 1px dashed var(--nrc-gris-200); border-radius: var(--radius-md); background: #fff;
    transition: border-color 0.12s ease, opacity 0.12s ease;
}
.builder-row:hover[b-ju1d2ebviu], .builder-row:focus-within[b-ju1d2ebviu] { border-color: var(--nrc-gris-300); }
.builder-row.is-dragged[b-ju1d2ebviu] { opacity: 0.4; }
.builder-row[data-layout="1-1"][b-ju1d2ebviu] { grid-template-columns: 1fr 1fr; }
.builder-row[data-layout="1-1-1"][b-ju1d2ebviu] { grid-template-columns: 1fr 1fr 1fr; }
.builder-row[data-layout="2-1"][b-ju1d2ebviu] { grid-template-columns: 2fr 1fr; }
.builder-row[data-layout="1-2"][b-ju1d2ebviu] { grid-template-columns: 1fr 2fr; }
.builder-row[data-layout="1-1-1-1"][b-ju1d2ebviu] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.builder-row[data-background="light"][b-ju1d2ebviu] { background: var(--nrc-gris-100); }

/* The header is told from the row by its own tint, not by a rule under it: it fills the top of the frame corner to
   corner — the negative margins cancel the row's padding, the radius meets the frame's — and goes a shade darker on
   a row that is itself tinted, where the lighter one would disappear. It fades as a whole until the row is hovered,
   band included, as it always has. */
.row-toolbar[b-ju1d2ebviu] {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    margin: -0.5rem -0.75rem 0; padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--nrc-gris-200);
    font-size: 0.78rem; color: var(--nrc-gris-500); opacity: 0.55; transition: opacity 0.12s ease;
}
.builder-row[data-background="light"] .row-toolbar[b-ju1d2ebviu] { background: var(--nrc-gris-300); }
.builder-row:hover .row-toolbar[b-ju1d2ebviu], .builder-row:focus-within .row-toolbar[b-ju1d2ebviu] { opacity: 1; }
.row-grip[b-ju1d2ebviu] { display: inline-flex; padding: 0.2rem 0.1rem; border-radius: 3px; color: var(--nrc-gris-400); cursor: grab; font-size: 1rem; line-height: 1; }
.row-grip:hover[b-ju1d2ebviu] { color: var(--nrc-gris-700); background: var(--nrc-gris-300); }
.row-grip:active[b-ju1d2ebviu] { cursor: grabbing; }
/* The row is named by its place — « RANGÉE 2 » — and carries no title of its own. */
.row-name[b-ju1d2ebviu] { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.25rem; white-space: nowrap; }
/* The six pictograms behind the toolbar's layout button: the menu is just their frame. */
.row-layout-menu[b-ju1d2ebviu] { min-width: 0; padding: 0.25rem; }
.row-layout-menu[b-ju1d2ebviu]  .layout-picker { border: 0; padding: 0; --layout-icon-width: 34px; --layout-icon-height: 18px; }
.row-tool[b-ju1d2ebviu] { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.7rem; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--nrc-gris-500); }
/* Against the header's own tint, a hover has to go a shade past it to be seen at all. */
.row-tool:hover:not(:disabled)[b-ju1d2ebviu] { background: var(--nrc-gris-300); color: var(--nrc-gris-800); border-color: var(--nrc-gris-400); }
.row-tool:disabled[b-ju1d2ebviu] { opacity: 0.35; }
.row-tool.active[b-ju1d2ebviu] { background: var(--nrc-gris-800); color: var(--nrc-jaune); }
.row-tool.is-danger:hover:not(:disabled)[b-ju1d2ebviu] { color: var(--nrc-rouge); }
.row-toolbar-fill[b-ju1d2ebviu] { flex: 1 1 0; }
.row-confirm[b-ju1d2ebviu] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: #fdecec; border: 1px solid #f5b5b5; border-radius: var(--radius-sm); font-size: 0.88rem; }

/* Columns: the blocks in their slots, a gap between each, the add menu at the end. */
.builder-column[b-ju1d2ebviu] { display: flex; flex-direction: column; min-width: 0; }
.block-slot[b-ju1d2ebviu] { position: relative; }
.column-add[b-ju1d2ebviu] { margin-top: 0.5rem; align-self: flex-start; }
.column-add .dropdown-item i[b-ju1d2ebviu] { margin-right: 0.35rem; color: var(--nrc-gris-500); }

/* Landing spots. A gap sits between the blocks at all times (it is their spacing); while a block is dragged, the gaps
   that would move it show as dashed strips and the one under the pointer opens wide, so the blocks below move and
   hold the room; the spot itself takes the drop. Spots that would put the block back where it is (its own, the one
   after it) are not lit. An empty column is one gap and nothing else (2026-09-18): the placeholder that said so is
   gone, and the gap is a landing spot like any other. */
.block-gap[b-ju1d2ebviu] { min-height: 0.6rem; border-radius: var(--radius-sm); transition: min-height 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; }
.page-builder.dragging-block .block-gap.can-drop[b-ju1d2ebviu] { min-height: 1.1rem; border: 2px dashed var(--nrc-gris-300); background: var(--nrc-gris-50); }
.page-builder.dragging-block .block-gap.can-drop.is-over[b-ju1d2ebviu] { min-height: 3.5rem; border-color: var(--nrc-bleu); background: #eef4ff; }
/* The two halves of a block: before it (top) or after it (bottom), reaching a little past the frame so the halves and
   the gaps tile the column. Hit-testable only while a block is dragged, and above everything in the frame then — a
   floating editor included — so a release over a block always lands. */
.drop-half[b-ju1d2ebviu] { position: absolute; left: -0.5rem; right: -0.5rem; height: calc(50% + 0.3rem); z-index: 30; pointer-events: none; display: block; }
.drop-half.top[b-ju1d2ebviu] { top: -0.3rem; }
.drop-half.bottom[b-ju1d2ebviu] { bottom: -0.3rem; }
.page-builder.dragging-block .drop-half[b-ju1d2ebviu] { pointer-events: auto; }
/* Rows: the same, one level up (the row gaps are the spacing between rows). */
.row-gap[b-ju1d2ebviu] { min-height: 0.75rem; margin: 0.25rem 0; border-radius: var(--radius-sm); transition: min-height 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; }
.page-builder.dragging-row .row-gap.can-drop[b-ju1d2ebviu] { min-height: 1.25rem; border: 2px dashed var(--nrc-gris-300); background: var(--nrc-gris-50); }
.page-builder.dragging-row .row-gap.can-drop.is-over[b-ju1d2ebviu] { min-height: 4rem; border-color: var(--nrc-bleu); background: #eef4ff; }
.row-drop-half[b-ju1d2ebviu] { position: absolute; left: 0; right: 0; height: 50%; z-index: 31; pointer-events: none; display: block; }
.row-drop-half.top[b-ju1d2ebviu] { top: 0; }
.row-drop-half.bottom[b-ju1d2ebviu] { bottom: 0; }
.page-builder.dragging-row .row-drop-half[b-ju1d2ebviu] { pointer-events: auto; }
/* While something is dragged, the grips of everything else are not where a press should begin another drag. */
.page-builder.dragging-block .row-grip[b-ju1d2ebviu], .page-builder.dragging-row[b-ju1d2ebviu]  .block-grip,
.page-builder.dragging-row[b-ju1d2ebviu]  .block-frame.is-grab { pointer-events: none; }

/* « Ajouter une rangée »: the whole width under the last row, dashed like the spot it fills, on the white of the
   rows above it; its label reads from the left, where a row's own toolbar begins. It darkens in grey under the
   pointer, never in the blue of a landing spot: this one is pressed, not dropped onto. */
.builder-add-row[b-ju1d2ebviu] {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; width: 100%; margin-top: 0.5rem;
    padding: 1.1rem 1rem; border: 1px dashed var(--nrc-gris-300); border-radius: var(--radius-md);
    background: #fff; color: var(--nrc-gris-500); font-size: 0.9rem; font-weight: 600;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.builder-add-row:hover[b-ju1d2ebviu] { border-color: var(--nrc-gris-400); background: var(--nrc-gris-50); color: var(--nrc-gris-700); }
.builder-add-row:focus-visible[b-ju1d2ebviu] { outline: 2px solid var(--nrc-bleu); outline-offset: 2px; }

/* The previews the children and contact editors show under their fields (their markup, hence ::deep). */
[b-ju1d2ebviu] .block-preview { margin-top: 0.6rem; padding: 0.6rem 0.75rem; border: 1px dashed var(--nrc-gris-300); border-radius: var(--radius-md); background: var(--nrc-gris-50); }
[b-ju1d2ebviu] .block-preview-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nrc-gris-500); font-weight: 600; margin-bottom: 0.5rem; }

/* The unsaved-changes card (UnsavedChangesGuard.razor, no stylesheet of its own): a veil over the page, above the
   offcanvas, the card centred. */
[b-ju1d2ebviu] .unsaved-guard { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.45); }
[b-ju1d2ebviu] .unsaved-card { width: 100%; max-width: 32rem; padding: 1.25rem 1.5rem; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
[b-ju1d2ebviu] .unsaved-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; }
[b-ju1d2ebviu] .unsaved-title i { color: #d39e00; }
[b-ju1d2ebviu] .unsaved-card p { margin: 0 0 1rem; font-size: 0.92rem; color: var(--nrc-gris-700); }
[b-ju1d2ebviu] .unsaved-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 767.98px) {
    .builder-row[b-ju1d2ebviu] { grid-template-columns: 1fr !important; gap: 1rem; }
    .builder-bar[b-ju1d2ebviu] { position: static; margin: -1rem -1rem 1rem; }
}
/* /Features/Builder/PagePickerModal.razor.rz.scp.css */
/* The page picker (PagePickerModal.razor): the tree as a flat list of rows, each indented by its depth. */
.page-picker-tree[b-3naovg7cv3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.page-picker-row[b-3naovg7cv3] { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.35rem 0.5rem; padding-left: calc(0.5rem + var(--depth, 0) * 1.1rem); border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.page-picker-row:hover[b-3naovg7cv3] { background: var(--nrc-gris-100); }
.page-picker-row.selected[b-3naovg7cv3] { background: #e8f1ff; box-shadow: inset 3px 0 0 var(--nrc-bleu); }
.page-picker-row:focus-visible[b-3naovg7cv3] { outline: 2px solid var(--nrc-bleu); outline-offset: 1px; }
.page-picker-corner[b-3naovg7cv3] { flex-shrink: 0; font-size: 0.8rem; color: var(--nrc-gris-400); }
.page-picker-title[b-3naovg7cv3] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* /Features/Builder/VersionHistory.razor.rz.scp.css */
/* The history panel (VersionHistory.razor): Bootstrap's offcanvas, its list of versions as cards with a coloured
   edge per status, the inline restore confirm. */
.version-history[b-5gel8nf601] { width: 26rem; max-width: 92vw; }
.offcanvas-title i[b-5gel8nf601] { margin-right: 0.3rem; color: var(--nrc-gris-500); }
.version-list[b-5gel8nf601] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.version-item[b-5gel8nf601] { padding: 0.7rem 0.85rem; border: 1px solid var(--nrc-gris-200); border-left-width: 3px; border-radius: var(--radius-md); background: #fff; }
.version-item.status-draft[b-5gel8nf601] { border-left-color: var(--nrc-jaune); }
.version-item.status-published[b-5gel8nf601] { border-left-color: var(--nrc-vert); }
.version-item.status-archived[b-5gel8nf601] { border-left-color: var(--nrc-gris-300); }
.version-line[b-5gel8nf601] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.version-no[b-5gel8nf601] { font-weight: 700; }
.version-when[b-5gel8nf601] { color: var(--nrc-gris-500); font-size: 0.85rem; }
.version-who[b-5gel8nf601] { font-size: 0.85rem; color: var(--nrc-gris-700); margin-top: 0.2rem; }
.version-who i[b-5gel8nf601] { color: var(--nrc-gris-400); margin-right: 0.15rem; }
.version-note[b-5gel8nf601] { font-size: 0.88rem; margin-top: 0.3rem; padding: 0.4rem 0.6rem; background: var(--nrc-gris-50); border-radius: var(--radius-sm); white-space: pre-wrap; }
.version-restore[b-5gel8nf601] { margin-top: 0.5rem; }
.version-confirm[b-5gel8nf601] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.5rem 0.6rem; background: #fff8e1; border: 1px solid #f3e2a0; border-radius: var(--radius-sm); font-size: 0.85rem; }
.version-confirm > span[b-5gel8nf601] { flex: 1 1 100%; }
/* /Features/Content/Blocks/ContentTiles.razor.rz.scp.css */
/* Tiles and list of the children / links blocks (ContentTiles.razor). Tokens are portal.css's. */

.content-tiles-empty[b-ay1wxjsqb5] { margin: 0; color: var(--nrc-gris-500); font-style: italic; }

/* ---- Tiles: at most four a row — the columns are --tiles-columns of portal.css, which the builder's previews
   follow too (LinksBlockEditor); a block may set its own count (Columns, inline).

   Every tile is a subgrid spanning four rows of the grid — picture, title, description, then the size or the badge —
   so the tiles of one row share each line: the titles start at one height, and so do the descriptions, whatever
   their length. An element a tile leaves out still has its row (and its gaps), so the lines hold. The picture row is
   the block's size (TileImage, set inline as --tile-picture-height) or 120px; a picture is shrunk to fit, never
   enlarged, and the icon of an entry without a picture follows the same size. The grid's 1rem gap parts the tiles;
   inside a tile the subgrid's own row gap applies. ---- */
.content-tiles[b-ay1wxjsqb5] {
    --tile-picture-box: var(--tile-picture-height, 120px);
    display: grid;
    grid-template-columns: var(--tiles-columns);
    grid-auto-rows: var(--tile-picture-box) auto auto auto;
    gap: 1rem;
}
.content-tile[b-ay1wxjsqb5] {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0.4rem;
    justify-items: center;
    align-items: start;
    text-align: center;
    padding: 1rem 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid var(--nrc-gris-200);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.content-tile:hover[b-ay1wxjsqb5], .content-tile:focus-visible[b-ay1wxjsqb5] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
    text-decoration: none;
}
.content-tile-picture[b-ay1wxjsqb5] {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.content-tile-picture img[b-ay1wxjsqb5] { max-width: 100%; max-height: 100%; object-fit: contain; }
.content-tile-icon[b-ay1wxjsqb5] { font-size: calc(var(--tile-picture-box) * 0.43); line-height: 1; color: var(--nrc-gris-700); }
.content-tile-title[b-ay1wxjsqb5] { grid-row: 2; font-weight: 600; line-height: 1.25; }
.content-tile-desc[b-ay1wxjsqb5] { grid-row: 3; font-size: 0.85rem; color: var(--nrc-gris-500); line-height: 1.3; }
.content-tile-meta[b-ay1wxjsqb5] { grid-row: 4; font-size: 0.75rem; color: var(--nrc-gris-400); }
.content-tile-badge[b-ay1wxjsqb5] { grid-row: 4; font-size: 0.68rem; font-weight: 600; }

/* ---- Square tiles (the sub-pages block): as tall as wide, with a larger title. A subgrid cannot hold a square (its
   height is the sum of its rows, and the picture row would grow to the width on top of the text), so each tile is a
   grid of its own with fixed rows: the picture box, two lines of title, one of description — clamped — when any tile
   of the block has one (.has-desc), then the badge. The rows are centred in the square as one group (align-content);
   a narrow tile without room for them all shrinks the picture row (minmax from 0), never the text. The squares are
   equal, so every line matches across a row. Inside its row the picture sits at the bottom, just over the title, and
   the title is centred in its two lines. ---- */
.content-tiles.is-square[b-ay1wxjsqb5] { grid-auto-rows: auto; }
.content-tiles.is-square .content-tile[b-ay1wxjsqb5] {
    grid-row: auto;
    grid-template-rows: minmax(0, var(--tile-picture-box)) 3rem 0 auto;
    align-content: center;
    aspect-ratio: 1;
    overflow: hidden;
}
.content-tiles.is-square.has-desc .content-tile[b-ay1wxjsqb5] { grid-template-rows: minmax(0, var(--tile-picture-box)) 3rem 1.15rem auto; }
.content-tiles.is-square .content-tile-picture[b-ay1wxjsqb5] { align-items: flex-end; }
.content-tiles.is-square .content-tile-title[b-ay1wxjsqb5] { align-self: center; font-size: 1.2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.content-tiles.is-square .content-tile-desc[b-ay1wxjsqb5] { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- A block's own tile size (TileSize; ContentTiles.TilesStyle sets the variables inline). A width is the columns'
   (--tiles-columns): the tiles of a row are centred in the block, and the grid itself when a column count narrows it.
   A width alone keeps a square tile square. A height is every tile's (--tile-height): a square tile gives up its
   ratio for it, and a tile of the documents-and-links block leaves the shared rows of its subgrid for a grid of its
   own — the square tile's recipe with a fixed height: picture, title, description and badge centred as one group,
   the picture row shrinking first (minmax from 0) when the height is short, then the rest cut. ---- */
.content-tiles.has-width[b-ay1wxjsqb5] { justify-content: center; margin-inline: auto; }
.content-tiles.is-square.has-height .content-tile[b-ay1wxjsqb5] { aspect-ratio: auto; height: var(--tile-height); }
.content-tiles.has-height:not(.is-square)[b-ay1wxjsqb5] { grid-auto-rows: auto; }
.content-tiles.has-height:not(.is-square) .content-tile[b-ay1wxjsqb5] {
    grid-row: auto;
    grid-template-rows: minmax(0, var(--tile-picture-box)) auto auto auto;
    align-content: center;
    height: var(--tile-height);
    overflow: hidden;
}

/* ---- List: the mini-TOC — a rule above and one under each line, the icon in a fixed column. ---- */
.content-list[b-ay1wxjsqb5] { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nrc-gris-200); }
.content-list-item[b-ay1wxjsqb5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--nrc-gris-200);
    color: inherit;
    text-decoration: none;
}
.content-list-item:hover[b-ay1wxjsqb5], .content-list-item:focus-visible[b-ay1wxjsqb5] { background: var(--nrc-gris-50); color: inherit; text-decoration: none; }
/* A line that leads somewhere underlines its title under the pointer; a preview of one (Inert, no href) does not —
   in the builder a click on it opens the entry, it does not follow it. */
.content-list-item[href]:hover .content-list-title[b-ay1wxjsqb5] { text-decoration: underline; }
.content-list-icon[b-ay1wxjsqb5] { flex-shrink: 0; width: 1.75rem; text-align: center; font-size: 1.35rem; line-height: 1; color: var(--nrc-gris-700); }
.content-list-body[b-ay1wxjsqb5] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content-list-title[b-ay1wxjsqb5] { font-weight: 600; }
.content-list-desc[b-ay1wxjsqb5] { font-size: 0.85rem; color: var(--nrc-gris-500); }
.content-list-meta[b-ay1wxjsqb5] { flex-shrink: 0; font-size: 0.8rem; color: var(--nrc-gris-400); white-space: nowrap; }
.content-list-ext[b-ay1wxjsqb5] { flex-shrink: 0; font-size: 0.85rem; color: var(--nrc-gris-400); }

/* Document kinds keep their brand colours, as in the media library. */
.content-list-icon.bi-file-earmark-pdf[b-ay1wxjsqb5], .content-tile-icon.bi-file-earmark-pdf[b-ay1wxjsqb5] { color: #c0392b; }
.content-list-icon.bi-file-earmark-word[b-ay1wxjsqb5], .content-tile-icon.bi-file-earmark-word[b-ay1wxjsqb5] { color: #2b579a; }
.content-list-icon.bi-file-earmark-excel[b-ay1wxjsqb5], .content-tile-icon.bi-file-earmark-excel[b-ay1wxjsqb5] { color: #217346; }
.content-list-icon.bi-file-earmark-slides[b-ay1wxjsqb5], .content-tile-icon.bi-file-earmark-slides[b-ay1wxjsqb5] { color: #d24726; }

@media (max-width: 575.98px) {
    /* Phones: three quarters of the size (the default 120px → 88px, as before). */
    .content-tiles[b-ay1wxjsqb5] { --tile-picture-box: calc(var(--tile-picture-height, 120px) * 0.73); }
    .content-list-meta[b-ay1wxjsqb5] { display: none; }
}
/* /Features/Content/Blocks/ImageBlockView.razor.rz.scp.css */
/* The image block: the figure shrinks to its picture so the caption sits under it, and data-align places the
   figure in the column — left (default flow), center and right by margins, full at the column's width. */
.image-block[b-byj19hlfqo] { width: fit-content; max-width: 100%; margin: 0; }
.image-block[data-align="center"][b-byj19hlfqo] { margin-inline: auto; text-align: center; }
.image-block[data-align="right"][b-byj19hlfqo] { margin-left: auto; text-align: right; }
.image-block[data-align="full"][b-byj19hlfqo] { width: 100%; }
.image-block[data-align="full"] img[b-byj19hlfqo] { width: 100%; }

.image-block a[b-byj19hlfqo] { display: block; }
.image-block img[b-byj19hlfqo] {
    display: block;
    max-width: 100%;
    height: auto; /* the width attribute sets the size; the ratio follows when the column narrows it */
    border-radius: var(--radius-sm);
}
/* A picture without a link of its own opens the lightbox, so it is something to press — but no more than any
   other picture of the page (the ones in a text block open it too, and never said so with a cursor of their own).
   The pointer says it is pressable and leaves what pressing does to the pressing. */
.image-block > img[b-byj19hlfqo] { cursor: pointer; }
.image-block figcaption[b-byj19hlfqo] { margin-top: 0.4rem; font-size: 0.875rem; color: var(--nrc-gris-500); }
/* /Features/Content/Blocks/PageBodyView.razor.rz.scp.css */
/* The page grid (PageBodyView.razor): a row is a grid whose columns come from its layout id, one column on a
   phone; a light row is a grey band with padding. A row carries no heading of its own — one is a text block. */
.page-row[b-07v812ohfs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    margin: 0 0 1.5rem;
}
.page-row:last-child[b-07v812ohfs] { margin-bottom: 0; }
.page-row[data-layout="1-1"][b-07v812ohfs] { grid-template-columns: 1fr 1fr; }
.page-row[data-layout="1-1-1"][b-07v812ohfs] { grid-template-columns: 1fr 1fr 1fr; }
.page-row[data-layout="2-1"][b-07v812ohfs] { grid-template-columns: 2fr 1fr; }
.page-row[data-layout="1-2"][b-07v812ohfs] { grid-template-columns: 1fr 2fr; }
.page-row[data-layout="1-1-1-1"][b-07v812ohfs] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.page-row[data-background="light"][b-07v812ohfs] {
    padding: 1.25rem;
    background: var(--nrc-gris-100);
    border-radius: var(--radius-md);
}

/* min-width: 0 lets a column's long words and wide pictures shrink with the grid instead of blowing it out. */
.page-column[b-07v812ohfs] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.page-block[b-07v812ohfs] { min-width: 0; }
/* A block narrower than its column (BlockWidth: max-width inline) sits at the left, or here at the centre or the right. */
.page-block[data-align="center"][b-07v812ohfs] { margin-inline: auto; width: 100%; }
.page-block[data-align="right"][b-07v812ohfs] { margin-left: auto; width: 100%; }

@media (max-width: 767.98px) {
    .page-row[b-07v812ohfs] { grid-template-columns: 1fr !important; gap: 1rem; }
    .page-row[data-background="light"][b-07v812ohfs] { padding: 0.9rem; }
}
/* /Features/Content/Blocks/VideoBlockView.razor.rz.scp.css */
/* The video block (VideoBlockView.razor): the figure shrinks to the video so the caption sits under it, and
   data-align places the figure in the column — the same rules the image block's figure follows
   (ImageBlockView.razor.css), so a video and a picture sit the same way on a page.

   The frame holds the video's shape: 16/9 by default, and whatever the video itself is once it is playing — a
   <video> knows its own proportions, so the ratio is only ever the box it starts from. Both the element and the
   iframe fill it. */
.video-block[b-47ore8iz73] { width: fit-content; max-width: 100%; margin: 0; }
.video-block[data-align="center"][b-47ore8iz73] { margin-inline: auto; text-align: center; }
.video-block[data-align="right"][b-47ore8iz73] { margin-left: auto; text-align: right; }
.video-block[data-align="full"][b-47ore8iz73] { width: 100%; }
.video-block[data-align="full"] .video-frame[b-47ore8iz73] { width: 100%; }

.video-frame[b-47ore8iz73] { position: relative; width: 640px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.video-frame > video[b-47ore8iz73], .video-frame > iframe[b-47ore8iz73] { display: block; width: 100%; height: 100%; border: 0; }
.video-frame > video[b-47ore8iz73] { object-fit: contain; }

/* The facade: YouTube's still as a background, a play button over it. A still that never arrives (YouTube not
   reachable from here) leaves the dark card, which is still a button that says what it does. */
.video-facade[b-47ore8iz73] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer; }
.video-facade:focus-visible[b-47ore8iz73] { outline: 3px solid var(--nrc-bleu); outline-offset: -3px; }
.video-play[b-47ore8iz73] { display: inline-flex; align-items: center; justify-content: center; width: 4.25rem; height: 3rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.9rem; line-height: 1; transition: background-color 0.12s ease, transform 0.12s ease; }
.video-facade:hover .video-play[b-47ore8iz73], .video-facade:focus-visible .video-play[b-47ore8iz73] { background: #ff0000; transform: scale(1.06); }

.video-block figcaption[b-47ore8iz73] { margin-top: 0.4rem; font-size: 0.875rem; color: var(--nrc-gris-500); }
/* /Features/Content/Breadcrumbs.razor.rz.scp.css */
/* The trail above a content page: the back button, then Bootstrap's breadcrumb with « › » between the crumbs
   (the variable is read by the ::before of each crumb, which inherits it from the list). */
.content-breadcrumbs[b-bw2dbmx0eq] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.75rem; }
.content-breadcrumbs .breadcrumb[b-bw2dbmx0eq] {
    --bs-breadcrumb-divider: '›';
    margin: 0;
    font-size: 0.875rem;
}
.content-breadcrumbs .breadcrumb a[b-bw2dbmx0eq] { color: var(--nrc-gris-700); text-decoration: none; }
.content-breadcrumbs .breadcrumb a:hover[b-bw2dbmx0eq] { text-decoration: underline; }
.content-breadcrumbs .breadcrumb-item.active[b-bw2dbmx0eq] { color: var(--nrc-gris-500); }

@media print {
    .content-back[b-bw2dbmx0eq] { display: none; }
}
/* /Features/Content/ContactModal.razor.rz.scp.css */
/* The « Contactez-nous » modal: the portal's yellow on the send button, the rest is Bootstrap's modal. */
.modal-title[b-4d898zugfh] { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.modal-title i[b-4d898zugfh] { color: var(--nrc-gris-700); }
.contact-form .form-label[b-4d898zugfh] { margin: 0.5rem 0 0.25rem; font-size: 0.875rem; font-weight: 600; }
.contact-form .form-label:first-child[b-4d898zugfh] { margin-top: 0; }
.contact-form textarea[b-4d898zugfh] { resize: vertical; }
.contact-hint[b-4d898zugfh] { margin-top: 0.5rem; font-size: 0.8rem; color: var(--nrc-gris-500); }
.contact-status[b-4d898zugfh] { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; }

/* Bootstrap 5.3 reads a button's colours from these variables, so the yellow stays through hover / active / disabled. */
.contact-send[b-4d898zugfh] {
    --bs-btn-bg: var(--nrc-jaune);
    --bs-btn-border-color: var(--nrc-jaune);
    --bs-btn-color: var(--nrc-gris-900);
    --bs-btn-hover-bg: var(--nrc-jaune-hover);
    --bs-btn-hover-border-color: var(--nrc-jaune-hover);
    --bs-btn-hover-color: var(--nrc-gris-900);
    --bs-btn-active-bg: var(--nrc-jaune-hover);
    --bs-btn-active-border-color: var(--nrc-jaune-hover);
    --bs-btn-active-color: var(--nrc-gris-900);
    --bs-btn-disabled-bg: var(--nrc-jaune);
    --bs-btn-disabled-border-color: var(--nrc-jaune);
    --bs-btn-disabled-color: var(--nrc-gris-700);
    font-weight: 600;
}
/* /Features/Content/ContentFooter.razor.rz.scp.css */
/* The foot of every content page (ContentFooter.razor), the MadCap site's two bands across the whole width: the contact
   band — the old big yellow button, uppercase, inverted under the pointer — then the dark band, the HR details in yellow
   at the left of the page's 70rem column, the NRC logo and the rights line under it at its right, the two sides
   bottom-aligned so the rights line sits level with the last line of the details; they stack on a phone. */
.content-footer-contact-band[b-v4xuvzrvnt] {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: #fff;
    border-top: 1px solid var(--nrc-gris-100);
}
.content-footer-contact[b-v4xuvzrvnt] {
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000;
    background: var(--nrc-jaune);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.content-footer-contact:hover[b-v4xuvzrvnt], .content-footer-contact:focus-visible[b-v4xuvzrvnt] {
    color: var(--nrc-jaune);
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.content-footer-band[b-v4xuvzrvnt] { background: var(--nrc-charbon); color: var(--nrc-jaune); }
.content-footer-inner[b-v4xuvzrvnt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0.75rem 1.75rem 2rem;
    font-size: 0.85rem; /* the details and the rights line share one size */
}
.content-footer-details[b-v4xuvzrvnt] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    font-style: normal;
    line-height: 1.35;
}
.content-footer-details a[b-v4xuvzrvnt] { color: inherit; text-decoration: none; }
.content-footer-details a:hover[b-v4xuvzrvnt], .content-footer-details a:focus-visible[b-v4xuvzrvnt] { text-decoration: underline; text-underline-offset: 2px; }
.content-footer-brand[b-v4xuvzrvnt] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.content-footer-rights[b-v4xuvzrvnt] { margin: 0; line-height: 1.35; }
/* The top bar's logo size (ContentTopBar.razor.css), here too. */
.content-footer-logo[b-v4xuvzrvnt] { height: 1.6rem; width: auto; }

@media (max-width: 767.98px) {
    .content-footer-inner[b-v4xuvzrvnt] { padding: 0.75rem 0.75rem 1.5rem; }
    .content-footer-logo[b-v4xuvzrvnt] { height: 1.5rem; }
    /* Under the details, the logo and the rights line start at the left like them. */
    .content-footer-brand[b-v4xuvzrvnt] { align-items: flex-start; text-align: left; }
}

/* Paper: no button, no dark band — the details in the ink of the page. */
@media print {
    .content-footer-contact-band[b-v4xuvzrvnt] { display: none; }
    .content-footer-band[b-v4xuvzrvnt] { background: none; color: inherit; }
    .content-footer-inner[b-v4xuvzrvnt] { padding: 1rem 0 0; }
    .content-footer-logo[b-v4xuvzrvnt] { display: none; }
}
/* /Features/Content/ContentPage.razor.rz.scp.css */
/* The reader's page (ContentPage.razor): the top bar (ContentTopBar), the landing page's banner, the page's column —
   header, admin strip, body, empty state, the skeleton shown until the circuit answers — then the footer
   (ContentFooter). Tokens are portal.css's. */
/* A flex column as tall as the shell's main area (a stretched flex item, so 100 % resolves): the body grows, the
   footer sits at the foot on a short page and follows the content on a long one. The bands — top bar, banner, the
   landing page's grey body, footer — span the whole width; the page itself is the 70rem column inside. */
.content-page[b-1vsrj5kreb] { display: flex; flex-direction: column; min-height: 100%; }
.content-body[b-1vsrj5kreb] { flex: 1 0 auto; }
.content-column[b-1vsrj5kreb] { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1.75rem 2rem; }

.content-header[b-1vsrj5kreb] { margin: 0 0 1.25rem; }
.content-title[b-1vsrj5kreb] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.content-badge[b-1vsrj5kreb] { font-size: 0.7rem; font-weight: 600; }

/* ---- The landing page (.is-root), as the MadCap home was: the banner — the old hero picture behind the old site's
   title in light grey and a white, square search box with the magnifier at its end — then the body on the old home's
   grey band. ---- */
.content-banner[b-1vsrj5kreb] {
    padding: clamp(1.5rem, 4vw, 3.5rem) 1.75rem;
    text-align: center;
    background: var(--nrc-charbon) url('/img/rh-hero.png') center / cover no-repeat;
}
.content-banner-title[b-1vsrj5kreb] { justify-content: center; margin-bottom: 1.25rem; font-size: clamp(1.75rem, 4vw, 3.25rem); color: var(--nrc-gris-clair); }

.content-search[b-1vsrj5kreb] { position: relative; max-width: 40rem; margin: 0 auto; }
.content-search > .bi-search[b-1vsrj5kreb] { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; color: var(--nrc-gris-400); pointer-events: none; }
.content-search-input[b-1vsrj5kreb] { padding-right: 3.25rem; color: var(--nrc-charbon); background: #fff; border: 0; border-radius: 0; }
.content-search-input[b-1vsrj5kreb]::placeholder { color: var(--nrc-gris-500); }
.content-search-input:focus[b-1vsrj5kreb] { box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--nrc-jaune) 60%, transparent); }

.content-page.is-root .content-body[b-1vsrj5kreb] { background: var(--nrc-gris-accent); }
/* The skeleton's trail and title are the banner's there. */
.content-page.is-root .content-skeleton-trail[b-1vsrj5kreb],
.content-page.is-root .content-skeleton-title[b-1vsrj5kreb],
.content-page.is-root .content-skeleton-line[b-1vsrj5kreb] { display: none; }

/* The landing page's tiles (ContentTiles, decision 2026-09-24): the same tiles, but see-through and borderless, so the
   grey band shows through, and the title in Microgramma, ended with the old tiles' « » ». Microgramma is a wide face: a
   tile is a size container and its title follows its width (cqi), up to the tiles' 1.2rem — on a phone's two a row, a
   word like « Rémunération » would overflow the tile at full size. The description darkens to stay legible on grey. */
.content-page.is-root[b-1vsrj5kreb]  .content-tiles .content-tile { background: transparent; border: 0; container-type: inline-size; }
.content-page.is-root[b-1vsrj5kreb]  .content-tiles .content-tile-title { font-family: "MicrogrammaEF", sans-serif; font-size: min(1.2rem, 10cqi); }
.content-page.is-root[b-1vsrj5kreb]  .content-tiles .content-tile-title::after { content: "\00a0»"; }
.content-page.is-root[b-1vsrj5kreb]  .content-tiles .content-tile-desc { color: var(--nrc-gris-700); }

/* The admin's strip: a pale yellow band with the draft's links. */
.content-admin-strip[b-1vsrj5kreb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: #fff8d6;
    border: 1px solid var(--nrc-jaune);
    border-radius: var(--radius-sm);
}
.content-admin-strip i[b-1vsrj5kreb] { color: var(--nrc-gris-700); }
.content-admin-strip a[b-1vsrj5kreb] { color: inherit; font-weight: 600; }
.content-admin-sep[b-1vsrj5kreb] { color: var(--nrc-gris-400); }

.content-empty[b-1vsrj5kreb] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--nrc-gris-500);
    border: 1px dashed var(--nrc-gris-300);
    border-radius: var(--radius-md);
}
.content-empty p[b-1vsrj5kreb] { margin: 0 0 0.75rem; }
.content-empty p:last-child[b-1vsrj5kreb] { margin-bottom: 0; }

/* Skeleton: Bootstrap's placeholders at the header's and the tiles' sizes. */
.content-skeleton[b-1vsrj5kreb] { display: flex; flex-direction: column; gap: 0.6rem; color: var(--nrc-gris-300); }
.content-skeleton-trail[b-1vsrj5kreb] { height: 0.8rem; }
.content-skeleton-title[b-1vsrj5kreb] { height: 1.75rem; }
.content-skeleton-line[b-1vsrj5kreb] { height: 0.7rem; margin-bottom: 1rem; }
.content-skeleton-tiles[b-1vsrj5kreb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(10rem, calc(25% - 0.75rem)), 1fr));
    gap: 1rem;
}
.content-skeleton-tiles .placeholder[b-1vsrj5kreb] { height: 11rem; width: 100%; border-radius: var(--radius-md); }

@media (max-width: 767.98px) {
    .content-column[b-1vsrj5kreb] { padding: 0.75rem 0.75rem 2rem; }
    .content-header[b-1vsrj5kreb] { margin-bottom: 1rem; }
    .content-banner[b-1vsrj5kreb] { padding: 1.75rem 0.75rem; }
    /* portal.css shrinks every h1 on a phone (!important); the banner's keeps a size of its own over the picture. */
    .content-banner-title[b-1vsrj5kreb] { font-size: 1.75rem !important; }
}

@media print {
    .content-column[b-1vsrj5kreb] { max-width: none; padding: 0; }
    .content-admin-strip[b-1vsrj5kreb], .content-search[b-1vsrj5kreb] { display: none; }
    /* Paper gets the title, not the bands: no picture, no grey. */
    .content-banner[b-1vsrj5kreb] { padding: 0 0 1rem; background: none; text-align: left; }
    .content-banner-title[b-1vsrj5kreb] { justify-content: flex-start; margin: 0; font-size: 1.75rem; color: inherit; }
    .content-page.is-root .content-body[b-1vsrj5kreb] { background: none; }
}
/* /Features/Content/ContentTopBar.razor.rz.scp.css */
/* The Contenu RH's top bar (ContentTopBar.razor): the MadCap site's dark band, its logo and its yellow section links
   in Microgramma. The inner row is the page's column (70rem, ContentPage.razor.css), so the logo lines up with the
   title under it; the links follow the logo and wrap onto a second line when the width runs short, as they did. */
.content-topbar[b-t82z24aj8h] { background: var(--nrc-charbon); }
.content-topbar-inner[b-t82z24aj8h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.5rem;
    max-width: 70rem;
    min-height: 3.5rem;
    margin: 0 auto;
    padding: 0.5rem 1.75rem;
}
/* Where the portal's floating ☰ is shown (AppShell: sidebar hidden), the logo moves over to leave it room — only as
   far as needed: on a window wide enough to centre the column away from the edge, the logo keeps its place. */
.app-shell-layout.sidebar-hidden .content-topbar-inner[b-t82z24aj8h] { padding-left: max(1.75rem, calc(3.75rem - max(0rem, (100% - 70rem) / 2))); }

.content-topbar-logo[b-t82z24aj8h] { display: block; flex-shrink: 0; line-height: 0; }
.content-topbar-logo img[b-t82z24aj8h] { height: 1.6rem; width: auto; }

.content-topbar-links[b-t82z24aj8h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.content-topbar-link[b-t82z24aj8h] {
    display: block;
    padding: 0.35rem 0.6rem;
    font-family: "MicrogrammaEF", sans-serif;
    font-weight: normal;
    font-size: 0.85rem;
    color: var(--nrc-jaune);
    text-decoration: none;
    text-underline-offset: 0.45em;
}
.content-topbar-link:hover[b-t82z24aj8h], .content-topbar-link:focus-visible[b-t82z24aj8h] { color: var(--nrc-jaune); text-decoration: underline; }
/* The section the page belongs to: a thicker underline, always. */
.content-topbar-link.active[b-t82z24aj8h] { text-decoration: underline; text-decoration-thickness: 2px; }

/* The phone's « Menu » button: hidden while the links have room. */
.content-topbar-toggle[b-t82z24aj8h] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    font: inherit;
    color: var(--nrc-jaune);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--nrc-jaune) 50%, transparent);
    border-radius: var(--radius-sm);
}
.content-topbar-toggle:hover[b-t82z24aj8h] { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 767.98px) {
    /* The floating ☰ is always there on a phone (AppShell), at the left: the logo starts after it. */
    .content-topbar-inner[b-t82z24aj8h],
    .app-shell-layout.sidebar-hidden .content-topbar-inner[b-t82z24aj8h] { min-height: 3.5rem; padding: 0.5rem 0.75rem 0.5rem 3.75rem; }
    .content-topbar-logo img[b-t82z24aj8h] { height: 1.5rem; }
    .content-topbar-toggle[b-t82z24aj8h] { display: inline-flex; }
    /* Folded: the links come down under the logo, one a line, when the button opens them. */
    .content-topbar-links[b-t82z24aj8h] { display: none; flex-basis: 100%; flex-direction: column; gap: 0; }
    .content-topbar-links.is-open[b-t82z24aj8h] { display: flex; }
    .content-topbar-link[b-t82z24aj8h] { padding: 0.6rem 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

@media print {
    .content-topbar[b-t82z24aj8h] { display: none; }
}
/* /Features/Media/AdminMedia.razor.rz.scp.css */
/* The page's content, no wider than 1200px. It is also the element of this page around the drop zone that the
   ::deep rules below need (they compile to "[scope] .media-library-zone"): without it they matched nothing. */
.media-page[b-9icjqk4zfv] { max-width: 1200px; }

/* The drop zone is the toolbar and the list (a child component's root, hence ::deep): no frame of its own, only an
   outline while files are dragged over it. Its notices come first (order), over the toolbar, rather than under a
   list that may be long; its « Téléversement… » veil covers it whole, as before. */
[b-9icjqk4zfv] .media-library-zone { display: flex; flex-direction: column; border-radius: var(--radius-md); }
[b-9icjqk4zfv] .media-library-zone.drag-over { outline: 2px solid var(--nrc-bleu); outline-offset: 4px; background: #eef4ff; }
[b-9icjqk4zfv] .media-library-zone > .media-drop-notices { order: -1; margin: 0 0 0.75rem; }

/* The kinds as tabs over the toolbar, each with its count in a quieter figure. */
.media-tabs[b-9icjqk4zfv] { margin-bottom: 0.75rem; }
.media-tabs .nav-link[b-9icjqk4zfv] { color: var(--nrc-gris-700); }
.media-tabs .nav-link.active[b-9icjqk4zfv] { color: var(--nrc-gris-900); font-weight: 600; }
.media-tab-count[b-9icjqk4zfv] { margin-left: 0.25rem; font-size: 0.8em; font-weight: 400; color: var(--nrc-gris-500); }

/* Search, sort and « Téléverser » (at the right), on one wrapping line above the grid; the count and size under it. */
.media-toolbar[b-9icjqk4zfv] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.media-count-line[b-9icjqk4zfv] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-height: calc(1.5em + 0.5rem + 2px); margin: 0 0 0.75rem; }
.media-count[b-9icjqk4zfv] { font-size: 0.82rem; color: var(--nrc-gris-500); }
/* The selection's buttons, at the right of the count line. */
.media-selection[b-9icjqk4zfv] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-left: auto; }
.media-selection-text[b-9icjqk4zfv] { font-size: 0.85rem; }
.media-search[b-9icjqk4zfv] { flex: 1 1 14rem; max-width: 22rem; }
.media-upload[b-9icjqk4zfv] { margin: 0 0 0 auto; cursor: pointer; white-space: nowrap; }


/* The details dialog: the preview on the left, the facts on the right; stacked below md. */
.media-details[b-9icjqk4zfv] { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .media-details[b-9icjqk4zfv] { grid-template-columns: 1fr 1fr; } }
.media-preview[b-9icjqk4zfv] { text-align: center; }
.media-preview img[b-9icjqk4zfv], .media-preview video[b-9icjqk4zfv] { max-width: 100%; max-height: 380px; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-sm); }
.media-preview img.lightbox-picture[b-9icjqk4zfv] { cursor: zoom-in; }
/* The pencil beside the name, at the right: a button smaller than btn-sm, which is the smallest Bootstrap has. */
.media-rename-btn[b-9icjqk4zfv] { --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.35rem; --bs-btn-font-size: 0.75rem; }
.media-fact-label[b-9icjqk4zfv] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nrc-gris-500); font-weight: 600; margin-bottom: 0.25rem; }
.media-fact-list[b-9icjqk4zfv] { display: grid; grid-template-columns: 6rem 1fr; gap: 0.2rem 0.5rem; margin: 0.9rem 0; font-size: 0.85rem; }
.media-fact-list dt[b-9icjqk4zfv] { font-weight: 600; color: var(--nrc-gris-500); }
.media-fact-list dd[b-9icjqk4zfv] { margin: 0; min-width: 0; }
.media-fact-hash[b-9icjqk4zfv] { font-size: 0.75rem; }
.media-usages-loading[b-9icjqk4zfv] { padding: 0.25rem 0; }
/* /Features/Media/LightboxDialog.razor.rz.scp.css */
/* The picture lightbox (js/media/lightbox.js drives it). */
/* 100% of the modal dialog's fixed containing block, never 100vw: vw counts the page's scrollbar, which would slide
   the dialog's right edge under it and leave the close button closer to the right of the viewport than to its top. */
dialog.lightbox[b-t07oxglbpm] { --lightbox-inset: 1rem; position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
dialog.lightbox[b-t07oxglbpm]::backdrop { background: rgba(0, 0, 0, 0.88); }
.lightbox-stage[b-t07oxglbpm] { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
/* The picture box: laid out at the picture's natural size, then translate(tx, ty) scale(scale); an overlay a caller
   passed (an svg the script puts in beside the picture, hence ::deep) fills it and moves with it. */
.lightbox-picture[b-t07oxglbpm] { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #fff; border-radius: 0.25rem; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5); line-height: 0; cursor: grab; }
.lightbox-picture img[b-t07oxglbpm] { display: block; max-width: none; -webkit-user-drag: none; }
.lightbox-picture[b-t07oxglbpm]  svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lightbox-picture.loading[b-t07oxglbpm] { visibility: hidden; }
.lightbox-stage.panning .lightbox-picture[b-t07oxglbpm] { cursor: grabbing; }
.lightbox-bar[b-t07oxglbpm] { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 1.25rem; padding: 1.25rem 4rem 0.6rem; color: #fff; font-size: 0.9rem; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); pointer-events: none; }
.lightbox-bar .lightbox-zoom[b-t07oxglbpm] { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); }
.lightbox-bar .lightbox-hint[b-t07oxglbpm] { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; flex-basis: 100%; }
.lightbox-close[b-t07oxglbpm], .lightbox-nav[b-t07oxglbpm] { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; line-height: 1; cursor: pointer; }
.lightbox-close:hover[b-t07oxglbpm], .lightbox-nav:hover[b-t07oxglbpm] { background: rgba(0, 0, 0, 0.8); }
/* The close button keeps the same distance from the top of the viewport as from its right edge: one --lightbox-inset. */
.lightbox-close[b-t07oxglbpm] { top: var(--lightbox-inset); right: var(--lightbox-inset); width: 3.5rem; height: 3.5rem; font-size: 1.75rem; }
.lightbox-nav[b-t07oxglbpm] { top: 50%; transform: translateY(-50%); width: 4.5rem; height: 4.5rem; font-size: 3.25rem; padding-bottom: 0.4rem; }
.lightbox-prev[b-t07oxglbpm] { left: var(--lightbox-inset); }
.lightbox-next[b-t07oxglbpm] { right: var(--lightbox-inset); }
dialog.lightbox.single .lightbox-nav[b-t07oxglbpm] { display: none; }
@media (max-width: 575.98px) { dialog.lightbox[b-t07oxglbpm] { --lightbox-inset: 0.5rem; } .lightbox-bar[b-t07oxglbpm] { padding: 1rem 0.5rem 0.5rem; } .lightbox-bar .lightbox-hint[b-t07oxglbpm] { display: none; } .lightbox-close[b-t07oxglbpm] { width: 3rem; height: 3rem; font-size: 1.5rem; } .lightbox-nav[b-t07oxglbpm] { width: 3.5rem; height: 3.5rem; font-size: 2.5rem; opacity: 0.6; } }
@media print { dialog.lightbox[b-t07oxglbpm] { display: none !important; } }
/* /Features/Media/MediaDropZone.razor.rz.scp.css */
/* The zone lights up while files hover over it (js/media/media-dropzone.js toggles drag-over); the busy veil
   covers it while an upload runs. */
.media-drop-zone[b-h4zf3na9eo] { position: relative; outline: none; border-radius: var(--radius-md); }
.media-drop-zone.drag-over[b-h4zf3na9eo] { outline: 2px dashed var(--nrc-bleu); outline-offset: 2px; background-color: #eef4ff; }
.media-drop-busy[b-h4zf3na9eo] { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: inherit; background-color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.media-drop-picker[b-h4zf3na9eo] { margin: 0; cursor: pointer; }
/* What the zone had to say about a file: an info line (reused bytes) or a refusal, each with its cross. */
.media-drop-notices[b-h4zf3na9eo] { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
.media-drop-notices li[b-h4zf3na9eo] { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); background: #eef4ff; border: 1px solid #cfe0ff; color: #1d3f72; }
.media-drop-notices li.is-error[b-h4zf3na9eo] { background: #fdecec; border-color: #f5b5b5; color: #9e1d1a; }
.media-drop-notices li span[b-h4zf3na9eo] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.media-drop-notices .btn-close[b-h4zf3na9eo] { font-size: 0.6rem; }
/* /Features/Media/MediaGrid.razor.rz.scp.css */
/* The files of the media library, as tiles or as a list. */

/* What a file looks like, in a frame of its own: the picture or the page whole (contain), on a grey ground. */
.media-thumb[b-zcvyvi225j] { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--nrc-gris-100); }
.media-thumb img[b-zcvyvi225j], .media-thumb video[b-zcvyvi225j] { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-icon[b-zcvyvi225j] { color: var(--nrc-gris-500); }
.media-icon.bi-file-earmark-pdf[b-zcvyvi225j] { color: #c0392b; }
.media-icon.bi-file-earmark-word[b-zcvyvi225j] { color: #2b579a; }
.media-icon.bi-file-earmark-excel[b-zcvyvi225j] { color: #217346; }
.media-icon.bi-file-earmark-slides[b-zcvyvi225j] { color: #d24726; }
.media-check[b-zcvyvi225j] { color: var(--nrc-bleu); line-height: 1; }
.media-select[b-zcvyvi225j] { margin: 0; cursor: pointer; }
/* The name, whole: a long one without a space breaks anywhere rather than overflow. The pencil that turns it into a
   field sits on its first line. */
.media-name[b-zcvyvi225j] { display: flex; align-items: baseline; gap: 0.15rem; }
.media-name-label[b-zcvyvi225j] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.media-name-edit[b-zcvyvi225j] { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0.15rem; --bs-btn-font-size: 0.8rem; line-height: 1; }

/* Tiles. Each one spans as many rows of the grid as it has parts — the picture, the name, the facts with ShowMeta —
   and lays its parts on them (subgrid): the tiles of a line share their rows, so every name starts at the same
   height under pictures of the same height, the longest name sets the height of the line, and every tile of the
   line ends at the same place. */
.media-grid[b-zcvyvi225j] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.media-tile[b-zcvyvi225j] { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0.25rem; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-md); padding: 0.35rem; background-color: #fff; font-size: 0.8rem; user-select: none; }
.media-grid.with-meta .media-tile[b-zcvyvi225j] { grid-row: span 3; }
.media-tile.clickable[b-zcvyvi225j] { cursor: pointer; }
.media-tile:hover[b-zcvyvi225j] { border-color: var(--nrc-bleu); }
.media-tile.selected[b-zcvyvi225j] { border-color: var(--nrc-bleu); box-shadow: 0 0 0 2px var(--nrc-bleu); }
.media-tile .media-thumb[b-zcvyvi225j] { height: 110px; }
.media-tile .media-icon[b-zcvyvi225j] { font-size: 2.5rem; }
.media-tile .media-check[b-zcvyvi225j] { position: absolute; top: 0.25rem; right: 0.25rem; font-size: 1.25rem; background-color: #fff; border-radius: 50%; }
/* The box on the top-left corner of the picture keeps a ring of page background, so it stays readable over a dark picture. */
.media-tile .media-select[b-zcvyvi225j] { position: absolute; top: 0.25rem; left: 0.25rem; width: 1.15rem; height: 1.15rem; box-shadow: 0 0 0 2px #fff; }
/* The field keeps its own height in a row made taller by a longer name beside it. */
.media-tile .media-rename[b-zcvyvi225j] { align-self: start; font-size: 0.8rem; }
.media-tile-meta[b-zcvyvi225j] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: 0.72rem; color: var(--nrc-gris-500); }
.media-tile-kind[b-zcvyvi225j] { padding: 0 0.35rem; border-radius: 999px; background: var(--nrc-gris-100); border: 1px solid var(--nrc-gris-200); color: var(--nrc-gris-700); }

/* The list: a row per file, its picture small at the head; the name takes the width the other columns leave. */
.media-list[b-zcvyvi225j] { margin-bottom: 0; font-size: 0.85rem; }
.media-list th[b-zcvyvi225j] { font-size: 0.78rem; font-weight: 600; color: var(--nrc-gris-600); white-space: nowrap; }
.media-list tbody tr[b-zcvyvi225j] { user-select: none; }
.media-list tbody tr.clickable[b-zcvyvi225j] { cursor: pointer; }
.media-list tbody tr.selected > *[b-zcvyvi225j] { --bs-table-bg-state: #eef4ff; }
.media-list-select[b-zcvyvi225j] { width: 2rem; }
.media-list-thumb[b-zcvyvi225j] { width: 3rem; }
.media-list-name[b-zcvyvi225j] { width: 100%; }
.media-list-edit[b-zcvyvi225j] { width: 2rem; text-align: center; }
.media-list .media-thumb[b-zcvyvi225j] { width: 2.5rem; height: 2.5rem; }
.media-list .media-icon[b-zcvyvi225j] { font-size: 1.25rem; }
.media-list .media-check[b-zcvyvi225j] { font-size: 1rem; }
/* /Features/Media/MediaLibraryPicker.razor.rz.scp.css */
/* The dialog takes the viewport but for the usual margins, in both directions; from md up the two panes scroll on
   their own, as tall as the dialog. */
.media-picker .modal-dialog[b-kaiz48vr3m] { max-width: calc(100% - var(--bs-modal-margin) * 2); height: calc(100% - var(--bs-modal-margin) * 2); }
.media-picker .modal-content[b-kaiz48vr3m] { height: 100%; }
.media-picker-body[b-kaiz48vr3m] { display: flex; flex-direction: column; }
.media-picker-layout[b-kaiz48vr3m] { display: grid; grid-template-columns: 1fr; gap: 1rem; flex: 1; min-height: 0; }
/* The filters on the left: one button per view, the count of files it holds at its end. */
.media-picker-nav[b-kaiz48vr3m] { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-md); background: var(--nrc-gris-50); }
.media-picker-nav hr[b-kaiz48vr3m] { margin: 0.35rem 0; border-color: var(--nrc-gris-300); opacity: 1; }
.media-picker-scope[b-kaiz48vr3m] { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--nrc-gris-800); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.media-picker-scope:hover[b-kaiz48vr3m] { background: var(--nrc-gris-100); }
.media-picker-scope.active[b-kaiz48vr3m] { background: #fff4bf; color: #333; font-weight: 600; }
.media-picker-scope .bi[b-kaiz48vr3m] { color: var(--nrc-gris-500); }
.media-picker-scope.active .bi[b-kaiz48vr3m] { color: var(--nrc-gris-800); }
.media-picker-count[b-kaiz48vr3m] { margin-left: auto; font-size: 0.75rem; color: var(--nrc-gris-500); font-variant-numeric: tabular-nums; }
.media-picker-toolbar[b-kaiz48vr3m] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.media-picker-search[b-kaiz48vr3m] { flex: 1 1 12rem; max-width: 20rem; }
@media (min-width: 768px) {
    .media-picker-body[b-kaiz48vr3m] { overflow: hidden; }
    .media-picker-layout[b-kaiz48vr3m] { grid-template-columns: 14rem 1fr; }
    .media-picker-nav[b-kaiz48vr3m] { overflow: auto; }
    .media-picker-main[b-kaiz48vr3m] { overflow: auto; min-width: 0; }
}
/* What the confirm button is holding, under the list: the count, then the names, each with a cross that drops it.
   A long selection stops at a dozen names and counts the rest -- the summary says what is picked, it is not a
   second list. */
.media-picker-summary[b-kaiz48vr3m] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--nrc-gris-200); font-size: 0.8rem; }
.media-picker-chip[b-kaiz48vr3m] { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; }
.media-picker-chip .btn-close[b-kaiz48vr3m] { --bs-btn-close-opacity: 0.7; font-size: 0.5rem; }
.media-picker-chip .btn-close:hover[b-kaiz48vr3m] { --bs-btn-close-opacity: 1; }
/* /Features/Media/PdfViewerDialog.razor.rz.scp.css */
/* The modal PDF viewer (PdfViewerDialog.razor; js/media/pdf-viewer.js fills and opens it). Nearly the window,
   the bar on top, the browser's own reader filling the rest — the greys are the reader's own, so the frame and
   what surrounds it are one surface rather than a document dropped on a white card. */
dialog.pdf-viewer[b-tejyx49flw] {
    width: min(1200px, 96vw); height: 92vh; max-width: 96vw; max-height: 92vh;
    padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden;
    background: #323639; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); flex-direction: column;
}
dialog.pdf-viewer[open][b-tejyx49flw] { display: flex; }
dialog.pdf-viewer[b-tejyx49flw]::backdrop { background: rgba(0, 0, 0, 0.7); }
.pdf-viewer-bar[b-tejyx49flw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; color: #fff; background: var(--nrc-gris-900, #212529); }
/* White-on-dark buttons spelled out: the portal's own link and button colours would paint them dark on dark. */
.pdf-viewer-bar .btn[b-tejyx49flw] {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.15); --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.25); --bs-btn-active-border-color: #fff;
    color: #fff;
}
.pdf-viewer-title[b-tejyx49flw] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pdf-viewer-frame[b-tejyx49flw] { flex: 1 1 auto; width: 100%; border: 0; background: #525659; }
/* /Features/RichText/WordgardEditor.razor.rz.scp.css */
/* Wordgard builds its DOM inside the host (WordgardEditor.razor.js): every rule reaching into it goes through ::deep.
   Its own rules carry an extra scope class, so these lean on the wrapper for specificity. The frame is a bordered
   box, the menu bar on a tinted strip. */
.wordgard-editor[b-faxrco1tkn] { position: relative; }
.wordgard-editor[b-faxrco1tkn]  wordgard-editor { border: 1px solid var(--bs-border-color); border-radius: 0.375rem; font-size: 0.95rem; background: #fff; color: #212529; }
.wordgard-editor[b-faxrco1tkn]  wg-panels.wg-panels-top { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); border-radius: 0.375rem 0.375rem 0 0; }
.wordgard-editor[b-faxrco1tkn]  wg-menubar { border-bottom: 0; } /* Wordgard's own rule under the bar: a second line inside the strip's frame */
.wordgard-editor[b-faxrco1tkn]  wg-content { min-height: var(--wg-min-height, 80px); padding: 0.5rem 0.75rem; }
/* The blocks below are drawn as the reader draws them (wwwroot/css/rich-text.css, .rich-text): paragraphs at their
   spacing, a heading at its own size, a quote behind a bar, code on its tinted block, the rule as a line — so a text
   looks here as it will there. Tables too: a cell is as wide here as it will be. The callouts need no rule of their
   own: the reader's .callout rules are global and reach into the editor. No margin under the last block: the box is
   as tall as its lines. */
.wordgard-editor[b-faxrco1tkn]  wg-content p, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content p { margin: 0 0 0.75rem; }
.wordgard-editor[b-faxrco1tkn]  wg-content > :last-child, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content > :last-child { margin-bottom: 0; }
.wordgard-editor[b-faxrco1tkn]  wg-content :is(h2, h3, h4), .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content :is(h2, h3, h4) { margin: 1.25rem 0 0.5rem; font-weight: 600; line-height: 1.25; }
.wordgard-editor[b-faxrco1tkn]  wg-content h2, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content h2 { font-size: 1.5rem; }
.wordgard-editor[b-faxrco1tkn]  wg-content h3, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content h3 { font-size: 1.25rem; }
.wordgard-editor[b-faxrco1tkn]  wg-content h4, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content h4 { font-size: 1.1rem; }
.wordgard-editor[b-faxrco1tkn]  wg-content :is(h2, h3, h4):first-child, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content :is(h2, h3, h4):first-child { margin-top: 0; }
.wordgard-editor[b-faxrco1tkn]  wg-content :is(ul, ol), .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content :is(ul, ol) { padding-left: 1.5rem; margin: 0 0 0.75rem; }
.wordgard-editor[b-faxrco1tkn]  wg-content ol[type="a"], .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content ol[type="a"] { list-style-type: lower-alpha; }
.wordgard-editor[b-faxrco1tkn]  wg-content blockquote, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content blockquote { margin: 0.5rem 0 0.75rem; padding-left: 0.75rem; border-left: 3px solid var(--nrc-gris-300); color: var(--bs-secondary-color); }
.wordgard-editor[b-faxrco1tkn]  wg-content pre, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content pre { margin: 0.5rem 0 0.75rem; padding: 0.4rem 0.6rem; border-radius: 0.25rem; background: var(--bs-tertiary-bg); font-size: 0.9em; white-space: pre-wrap; }
.wordgard-editor[b-faxrco1tkn]  wg-content hr, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content hr { margin: 0.75rem 0; border: 0; border-top: 1px solid var(--bs-border-color); opacity: 1; }
.wordgard-editor[b-faxrco1tkn]  wg-content table, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.75rem; font-size: 0.9em; }
.wordgard-editor[b-faxrco1tkn]  wg-content th, .wordgard-editor[b-faxrco1tkn]  wg-content td,
.wordgard-editor[b-faxrco1tkn]  .wg-ghost-content th, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content td { border: 1px solid var(--bs-border-color); padding: 0.25rem 0.4rem; vertical-align: top; }
.wordgard-editor[b-faxrco1tkn]  wg-content th, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content th { background: var(--nrc-gris-100); font-weight: 600; }
.wordgard-editor[b-faxrco1tkn]  wg-content th > :last-child, .wordgard-editor[b-faxrco1tkn]  wg-content td > :last-child { margin-bottom: 0; }
/* The textblock-style entry (Texte, NOTE…) reads as a select: a border. */
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button.wg-submenu-arrow:has(> .wg-button-label) { border: 1px solid var(--bs-border-color); border-radius: 0.25rem; }
/* Its entries carry an icon before their label, and the entry itself only the icon of the cursor's kind (data-kind,
   set by WordgardEditor.razor.js, which also puts the kind's name in its title): Bootstrap Icons glyphs, the callouts'
   in the colours the reader gives them (rich-text.css). Titre 1 to 3 are the h2 to h4 the sanitizer keeps, hence
   the H1/H2/H3 glyphs — what they are to whoever writes the text. */
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind]::before { font-family: bootstrap-icons; font-weight: normal; font-style: normal; line-height: 1; margin-right: 0.4rem; vertical-align: -0.1em; }
.wordgard-editor[b-faxrco1tkn]  wg-submenu > .wg-menu-button[data-kind] > .wg-button-label { display: none; }
.wordgard-editor[b-faxrco1tkn]  wg-submenu > .wg-menu-button[data-kind]::before { margin: 0 0.1rem 0 0.2rem; font-size: 1.1em; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="text"]::before { content: "\f5c8"; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="heading1"]::before { content: "\f5f1"; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="heading2"]::before { content: "\f5f2"; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="heading3"]::before { content: "\f5f3"; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="codeblock"]::before { content: "\f2c7"; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="note"]::before { content: "\f431"; color: var(--nrc-gris-500); }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="important"]::before { content: "\f333"; color: var(--nrc-gris-800); }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="warning"]::before { content: "\f33b"; color: var(--bs-orange); }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="caution"]::before { content: "\f335"; color: #b8950a; }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="danger"]::before { content: "\f337"; color: var(--nrc-rouge); }
.wordgard-editor[b-faxrco1tkn]  .wg-menu-button[data-kind="notice"]::before { content: "\f484"; color: var(--nrc-bleu); }
/* The lettered list's button carries its own marker, "a.", where its neighbours carry a glyph: centred on the width
   of an icon so the bar keeps its rhythm. */
.wordgard-editor[b-faxrco1tkn]  wg-menubar > .wg-menu-button > .wg-button-label { display: inline-block; min-width: var(--wg-menu-item-size); padding: 0; text-align: center; font-weight: 600; }
/* Pictures in the text show as the reader shows them: at their size, never wider than the text. A click selects
   one (js/richtext/picture-tools.js: its tools in its top-right corner — .tile-overlay, rich-text.css — and the
   resize frame). */
.wordgard-editor[b-faxrco1tkn]  wg-content img, .wordgard-editor[b-faxrco1tkn]  .wg-ghost-content img { max-width: 100%; height: auto; }
/* Wordgard redraws its pictures and drops a class set on them, so the ring is the frame's (it covers the picture). */
.wordgard-editor[b-faxrco1tkn]  .resize-frame:not([hidden]) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
/* A selected picture is also the DOM selection (Wordgard's node selection), which the browser would tint blue over
   the ring: no native highlight on pictures. */
.wordgard-editor[b-faxrco1tkn]  wg-content img::selection { background: transparent; }
.wordgard-editor[b-faxrco1tkn]  wg-content img::-moz-selection { background: transparent; }
/* toolbar-on-focus (the page's choice, CssClass): unfocused, the box is a label that looks like an input — its lines,
   no menu bar. Entered, the editor floats (WordgardEditor.razor.js puts .floating on the wrapper and holds its height):
   the box leaves the flow at the very spot and width the label had, its menu bar popped out under it (absolute, its
   top on the box's bottom), a shadow and a ring around, and it grows over what follows rather than pushing it — the
   page's layout does not move while the text is edited. Focus within includes a menu (Wordgard renders a submenu's
   list inside its own element) and a picture's tools. */
.wordgard-editor.toolbar-on-focus:not(:focus-within)[b-faxrco1tkn]  wg-panels.wg-panels-top { display: none; }
/* Wordgard pins the strip at the top for its sticky scrolling (hence the !important): popped out, it hangs under the
   box, its top on the box's bottom, and follows the box as the text grows. Out of the flow is not out of the box:
   the box is the strip's containing block, so what the strip holds below the box's bottom edge — and the pixel it
   holds past the right one — is the box's scrollable overflow, and its scrollHeight says so however visible its
   overflow. That is what Wordgard's scrolling used to read as a box it had to keep the caret inside; the editor
   answers the scroll question itself now (WordgardEditor.razor.js, see its scroll handler and the measurements
   there), and the strip is free to hang where it belongs. */
.wordgard-editor.toolbar-on-focus[b-faxrco1tkn]  wg-panels.wg-panels-top {
    position: absolute !important; top: 100% !important; left: -1px; right: -1px; bottom: auto; z-index: 1; margin-top: 2px;
    border: 1px solid var(--bs-border-color); border-radius: 0.375rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
/* A selected picture's tools and its resize frame are the wrapper's own children, beside the box rather than inside
   it (js/richtext/picture-tools.js appends them there and places them over the picture), and both stand at z-index 2.
   Once the box floats it rises to 20 and takes the picture with it, leaving them underneath: the handles were behind
   the very picture they size, and a click on one landed on the box (measured). Above the box, then — they are drawn
   on it. */
.wordgard-editor[b-faxrco1tkn]  .resize-frame, .wordgard-editor[b-faxrco1tkn]  .rte-image-tools { z-index: 21; }
/* The veil while files go up (WordgardEditor.razor.js shows it around an upload, script-built hence ::deep): over the
   box, above a floating one and a picture's tools, drawn as the media drop zones draw theirs. Bootstrap's [hidden]
   rule keeps it away between uploads. */
.wordgard-editor[b-faxrco1tkn]  .wg-busy {
    position: absolute; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 0.375rem; background-color: rgba(var(--bs-body-bg-rgb), 0.75);
}
.wordgard-editor.floating[b-faxrco1tkn]  wordgard-editor {
    position: absolute; left: 0; right: 0; top: 0; z-index: 20;
    border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}
/* The ghost under the floating box (script-built, hence ::deep): the text in the box's own frame and metrics, so the
   flow is exactly as tall as the editor and follows it. */
.wordgard-editor[b-faxrco1tkn]  .wg-ghost { border: 1px solid transparent; border-radius: 0.375rem; font-size: 0.95rem; pointer-events: none; }
.wordgard-editor[b-faxrco1tkn]  .wg-ghost-content { min-height: var(--wg-min-height, 80px); padding: 0.5rem 0.75rem; }
.wordgard-editor[b-faxrco1tkn]  .wg-ghost-content p:empty::before { content: "\a0"; } /* an empty paragraph is a line in the editor */
/* /Features/Search/SearchPage.razor.rz.scp.css */
/* The results page (SearchPage.razor): a centred column like the reader's pages; tokens are portal.css's. */
.search-page[b-2zyfj825c1] { max-width: 52rem; margin: 0 auto; padding: 1.25rem 1.75rem 3rem; }
.search-back[b-2zyfj825c1] { margin: 0 0 0.75rem; }
.search-heading[b-2zyfj825c1] { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

.search-form[b-2zyfj825c1] { margin: 0 0 1rem; }
.search-box[b-2zyfj825c1] { position: relative; }
.search-box > .bi-search[b-2zyfj825c1] { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--nrc-gris-500); pointer-events: none; }
.search-input[b-2zyfj825c1] { padding-left: 2.6rem; }
.search-input:focus[b-2zyfj825c1] { border-color: var(--nrc-jaune); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--nrc-jaune) 30%, transparent); }

.search-toolbar[b-2zyfj825c1] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; min-height: 1.5rem; }
.search-status[b-2zyfj825c1] { margin: 0; font-size: 0.875rem; color: var(--nrc-gris-500); }
.search-hint[b-2zyfj825c1] { font-size: 0.9rem; color: var(--nrc-gris-500); }

/* The kind chips: one per kind that answered, the count beside the label; the chosen one in the sidebar's dark. */
/* Pushed right: the status beside them is visually hidden, so space-between alone would leave them at the left. */
.search-kinds[b-2zyfj825c1] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
.search-kind[b-2zyfj825c1] { padding: 0.2rem 0.7rem; border: 1px solid var(--nrc-gris-300); border-radius: 1rem; background: #fff; color: var(--nrc-gris-700); font: inherit; font-size: 0.85rem; cursor: pointer; }
.search-kind:hover[b-2zyfj825c1] { background: var(--nrc-gris-100); }
.search-kind.active[b-2zyfj825c1] { background: var(--nrc-gris-900); border-color: var(--nrc-gris-900); color: #fff; }
.search-kind-count[b-2zyfj825c1] { margin-left: 0.2rem; font-size: 0.85em; opacity: 0.7; }

.search-corrected[b-2zyfj825c1] { margin: 0 0 0.75rem; font-size: 0.9rem; }
.search-corrected .bi[b-2zyfj825c1] { color: var(--nrc-gris-500); margin-right: 0.25rem; }
.search-link-button[b-2zyfj825c1] { padding: 0; border: 0; background: none; color: var(--nrc-bleu); text-decoration: underline; font: inherit; cursor: pointer; }
.search-link-button:hover[b-2zyfj825c1] { color: var(--nrc-gris-900); }

.search-group[b-2zyfj825c1] { margin-bottom: 1.5rem; }
.search-group-title[b-2zyfj825c1] { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nrc-gris-500); }
.search-group-more[b-2zyfj825c1] { font-weight: 400; text-transform: none; letter-spacing: 0; }
.search-results[b-2zyfj825c1] { margin: 0; padding: 0; list-style: none; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-md); background: #fff; }
.search-hit[b-2zyfj825c1] { padding: 0.6rem 0.9rem; border-top: 1px solid var(--nrc-gris-200); }
.search-hit:first-child[b-2zyfj825c1] { border-top: 0; }
.search-hit-link[b-2zyfj825c1] { display: flex; align-items: baseline; gap: 0.5rem; color: var(--nrc-gris-900); font-weight: 600; text-decoration: none; }
.search-hit-link:hover[b-2zyfj825c1] { text-decoration: underline; }
.search-hit-link .bi[b-2zyfj825c1] { flex-shrink: 0; color: var(--nrc-gris-500); }
.search-hit-trail[b-2zyfj825c1] { margin-left: 1.5rem; font-size: 0.8rem; color: var(--nrc-gris-500); }
/* The snippet dimmed below its title, so the titles lead the eye down the list. */
.search-hit-snippet[b-2zyfj825c1] { margin: 0.15rem 0 0 1.5rem; font-size: 0.875rem; color: var(--nrc-gris-500); overflow-wrap: anywhere; }
/* The matched words come marked inside the titles and snippets (HTML from the engine, hence ::deep): the portal's yellow at 45 %. */
.search-results[b-2zyfj825c1]  mark { padding: 0; background-color: color-mix(in srgb, var(--nrc-jaune) 45%, transparent); color: inherit; }
/* A PDF's marked words open it on that word (js/media/pdf-viewer.js). */
.search-hit-snippet[data-pdf-snippet][b-2zyfj825c1]  mark { cursor: pointer; }
.search-hit-snippet[data-pdf-snippet][b-2zyfj825c1]  mark:hover { text-decoration: underline; color: var(--bs-body-color); }

.search-empty[b-2zyfj825c1] { padding: 1.5rem 1rem; text-align: center; color: var(--nrc-gris-700); border: 1px dashed var(--nrc-gris-300); border-radius: var(--radius-md); }
.search-empty-lead[b-2zyfj825c1] { margin: 0 0 0.5rem; font-size: 1.1rem; }
.search-empty-word[b-2zyfj825c1] { margin: 0 0 0.35rem; }
.search-empty-hint[b-2zyfj825c1] { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--nrc-gris-500); }

@media (max-width: 767.98px) {
    .search-page[b-2zyfj825c1] { padding: 0.75rem 0.75rem 2rem; }
    .search-heading[b-2zyfj825c1] { font-size: 1.4rem; }
}

@media print {
    .search-page[b-2zyfj825c1] { max-width: none; padding: 0; }
    .search-back[b-2zyfj825c1], .search-form[b-2zyfj825c1], .search-kinds[b-2zyfj825c1] { display: none; }
}
/* /Features/Search/SearchPalette.razor.rz.scp.css */
/* The Ctrl+K palette (SearchPalette.razor, driven by SearchPalette.razor.js): a native dialog in the top layer with
   its own backdrop; tokens are portal.css's. */
.search-palette[b-g0g9wwytqw] { width: min(720px, 94vw); max-height: 80vh; margin: 8vh auto 0; padding: 0; border: 1px solid var(--nrc-gris-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: #fff; color: var(--nrc-gris-900); }
.search-palette[open][b-g0g9wwytqw] { display: flex; flex-direction: column; }
.search-palette[b-g0g9wwytqw]::backdrop { background: rgba(0, 0, 0, 0.45); }
.search-palette-form[b-g0g9wwytqw] { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; margin: 0; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--nrc-gris-200); }
.search-palette-form > .bi-search[b-g0g9wwytqw] { color: var(--nrc-gris-500); font-size: 1.1rem; }
.search-palette-input[b-g0g9wwytqw] { flex: 1 1 auto; min-width: 0; padding: 0.25rem 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; }
/* Bootstrap paints kbd dark on light; here they are hints, pale on pale. */
.search-palette kbd[b-g0g9wwytqw] { padding: 0.2rem 0.4rem; border: 1px solid var(--nrc-gris-200); border-radius: 0.25rem; background: var(--nrc-gris-100); color: var(--nrc-gris-500); font-size: 0.7rem; line-height: 1; }
.search-palette-body[b-g0g9wwytqw] { flex: 1 1 auto; overflow-y: auto; padding: 0.4rem; }
.search-palette-status[b-g0g9wwytqw] { padding: 0.4rem 0.6rem; font-size: 0.9rem; color: var(--nrc-gris-500); }
.search-palette-status:empty[b-g0g9wwytqw] { display: none; }
.search-palette-group[b-g0g9wwytqw] { padding: 0.6rem 0.6rem 0.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nrc-gris-500); }
.search-palette-row[b-g0g9wwytqw] { display: flex; align-items: flex-start; border-radius: var(--radius-sm); }
.search-palette-row.selected[b-g0g9wwytqw] { background: #fff8d6; }
.search-palette-link[b-g0g9wwytqw] { display: flex; flex: 1 1 auto; min-width: 0; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0.6rem; color: inherit; text-decoration: none; }
.search-palette-link > .bi[b-g0g9wwytqw] { flex-shrink: 0; margin-top: 0.15rem; color: var(--nrc-gris-500); }
.search-palette-row-body[b-g0g9wwytqw] { flex: 1 1 auto; min-width: 0; }
.search-palette-title[b-g0g9wwytqw] { font-weight: 500; }
.search-palette-path[b-g0g9wwytqw], .search-palette-snippet[b-g0g9wwytqw] { font-size: 0.8rem; color: var(--nrc-gris-500); }
.search-palette-snippet[b-g0g9wwytqw] { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-palette-section[b-g0g9wwytqw] { padding: 0.6rem; }
.search-palette-section h6[b-g0g9wwytqw] { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nrc-gris-500); }
.search-palette-recent[b-g0g9wwytqw] { margin: 0; padding: 0; list-style: none; }
.search-palette-recent button[b-g0g9wwytqw] { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.35rem 0.5rem; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.search-palette-recent button:hover[b-g0g9wwytqw] { background: var(--nrc-gris-100); }
.search-palette-recent .bi[b-g0g9wwytqw] { color: var(--nrc-gris-400); }
.search-palette-tip[b-g0g9wwytqw] { margin: 0; padding: 0.6rem; font-size: 0.85rem; color: var(--nrc-gris-500); }
.search-palette-footer[b-g0g9wwytqw] { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-top: 1px solid var(--nrc-gris-200); font-size: 0.75rem; color: var(--nrc-gris-500); }
.search-palette-keys kbd[b-g0g9wwytqw] { margin-right: 0.15rem; }
.search-palette-all[b-g0g9wwytqw] { color: var(--nrc-gris-900); font-weight: 600; text-decoration: none; white-space: nowrap; }
.search-palette-all:hover[b-g0g9wwytqw] { text-decoration: underline; }
/* The matched words come marked inside the titles and snippets (HTML from the engine, hence ::deep): the portal's yellow at 45 %. */
[b-g0g9wwytqw] mark { padding: 0; background-color: color-mix(in srgb, var(--nrc-jaune) 45%, transparent); color: inherit; }
@media (max-width: 575px) {
    .search-palette[b-g0g9wwytqw] { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .search-palette-keys[b-g0g9wwytqw] { display: none; }
}
@media print { .search-palette[b-g0g9wwytqw] { display: none !important; } }