@font-face {
   font-family: Bricolage Grotesque;
   src: url(/static/fonts/BricolageGrotesque.woff2) format("woff2");
   font-weight: 200 800;
   font-stretch: 100%;
   font-display: swap
}

:root {
   --accent: #d6431f;
   --accent-d: #b8350f;
   --ink: #1c1c1e;
   --muted: #6b6d74;
   --line: #e3e3e7;
   --line-strong: #d0d0d6;
   --bg: #f1f2f4;
   --panel: #fff;
   --radius: 10px;
   --radius-sm: 7px;
   --gap: 12px;
   --gap-sm: 6px;
   --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
   --font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --preview-w: 340px;
   --preview-h: 320px
}

* {
   box-sizing: border-box
}

body,
html {
   height: 100%;
   margin: 0;
   padding: 0
}

.app-header {
   flex: none;
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: 12px 16px;
   background: var(--panel);
   border-bottom: 1px solid var(--line);
   box-shadow: var(--shadow)
}

/* Sélecteur de langue — monté par core/i18n.js dans .app-header, jamais écrit
   dans le HTML : les trois pages dupliquent leur en-tête, un markup collé
   trois fois aurait divergé. Un bouton par langue du manifeste.
   `margin-left:auto` le pousse au bout de l'en-tête flex, quel que soit le
   nombre d'éléments posés avant lui (le libellé de phase de l'éditeur, par
   exemple). */
.lang-switcher {
   margin-left: auto;
   display: flex;
   gap: 2px;
   flex: none;
   padding: 2px;
   border: 1px solid var(--line);
   border-radius: 7px;
   background: var(--bg, #f1f2f4)
}

.lang-switcher button {
   min-width: 30px;
   padding: 3px 8px;
   border: 0;
   border-radius: 5px;
   background: transparent;
   color: var(--muted);
   font: inherit;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .4px;
   cursor: pointer;
   line-height: 1.6
}

.lang-switcher button:hover {
   color: var(--ink);
   background: rgba(0, 0, 0, .05)
}

/* La langue active porte `.on` — même convention que les boutons de mode de
   l'éditeur, pour que l'état sélectionné se lise partout pareil. */
.lang-switcher button.on {
   background: var(--accent);
   color: #fff
}

.brand {
   display: flex;
   flex-direction: column;
   line-height: 1.05
}

.brand-title {
   display: flex;
   align-items: center;
   font-size: 16px;
   font-weight: 800;
   color: var(--accent);
   letter-spacing: .2px
}

.brand-logo {
   height: 2em;
   width: auto;
   margin-right: 5px
}

.brand-sub {
   display: none;
   font-size: 11px;
   font-weight: 600;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .6px
}

button {
   font: inherit;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   background: #fff;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   padding: 8px 16px;
   cursor: pointer;
   white-space: nowrap;
   transition: border-color .12s, background .12s, color .12s
}

button:disabled {
   opacity: .4;
   cursor: not-allowed
}

.spinner {
   display: none;
   width: 16px;
   height: 16px;
   margin-right: 8px;
   border: 2px solid hsla(0, 0%, 100%, .3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin .8s linear infinite
}

@keyframes spin {
   to {
      transform: rotate(1turn)
   }
}

.brick-loader {
   --bl-w: 67px;
   --bl-dx: calc(var(--bl-w)*0.5);
   --bl-dy: calc(var(--bl-w)*0.33333);
   --bl-up: calc(var(--bl-w)*0.17917);
   position: relative;
   width: calc(var(--bl-w) + var(--bl-dx));
   height: calc(var(--bl-w) + var(--bl-dy) + var(--bl-up));
   margin: 0 auto
}

.brick-loader .bl {
   position: absolute;
   display: block;
   width: var(--bl-w);
   height: var(--bl-w);
   opacity: 0
}

.brick-loader .bl-1 {
   left: 0;
   top: var(--bl-up)
}

.brick-loader .bl-2 {
   left: var(--bl-dx);
   top: calc(var(--bl-up) + var(--bl-dy))
}

.brick-loader .bl-3 {
   left: calc(var(--bl-dx)/2);
   top: 0
}

.brick-loader {
   animation: bl-cycle 2s ease-out infinite
}

.brick-loader .bl-1 {
   animation: bl-build-1 2s ease-out infinite
}

.brick-loader .bl-2 {
   animation: bl-build-2 2s ease-out infinite
}

.brick-loader .bl-3 {
   animation: bl-build-3 2s ease-out infinite
}

@keyframes bl-cycle {

   0%,
   72% {
      opacity: 1
   }

   86%,
   to {
      opacity: 0
   }
}

@keyframes bl-build-1 {
   0% {
      opacity: 1;
      transform: translateY(-14px)
   }

   16%,
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes bl-build-2 {

   0%,
   19.99% {
      opacity: 0;
      transform: translateY(-14px)
   }

   20% {
      opacity: 1;
      transform: translateY(-14px)
   }

   36%,
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes bl-build-3 {

   0%,
   39.99% {
      opacity: 0;
      transform: translateY(-14px)
   }

   40% {
      opacity: 1;
      transform: translateY(-14px)
   }

   56%,
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.card {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0
}

.card-title {
   letter-spacing: .6px
}

.card-sub,
.card-title {
   flex: none;
   margin: 0;
   font-size: 11px;
   font-weight: 700;
   color: var(--ink);
   text-transform: uppercase
}

.card-sub {
   letter-spacing: .5px
}

.card--flush {
   padding: 0;
   gap: 0;
   overflow: hidden
}

.app-footer {
   flex: none;
   background: var(--panel);
   border-top: 1px solid var(--line)
}

.app-footer-bar {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 6px 16px;
   background: none;
   border: none;
   border-radius: 0;
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   color: var(--muted)
}

.app-footer-bar:hover {
   color: var(--accent)
}

.app-footer-chev {
   font-size: 9px;
   transition: transform .15s
}

.app-footer-bar[aria-expanded=true] .app-footer-chev {
   transform: rotate(180deg)
}

.app-footer-panel {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 6px 16px;
   padding: 4px 16px 10px;
   font-size: 12px;
   color: var(--muted)
}

.app-footer-panel[hidden] {
   display: none
}

.app-footer-panel nav {
   display: flex;
   gap: 14px
}

.app-footer-panel a {
   color: var(--muted);
   text-decoration: none
}

.app-footer-panel a:hover {
   color: var(--accent)
}

.status-msg {
   display: none;
   padding: 12px;
   border-radius: var(--radius-sm);
   font-size: 12px;
   line-height: 1.4
}

.status-msg.info {
   background: #f0f4ff;
   color: #1e40af;
   border: 1px solid #bfdbfe
}

.status-msg.success {
   background: #f0fdf4;
   color: #15803d;
   border: 1px solid #86efac
}

.status-msg.error {
   background: #fef2f2;
   color: #991b1b;
   border: 1px solid #fecaca
}

body.page-config .status-msg {
   margin-bottom: 16px
}

body.page-config {
   height: 100%;
   margin: 0;
   padding: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font);
   font-size: 14px;
   line-height: 1.4;
   display: flex;
   flex-direction: column;
   overflow: hidden
}

body.page-config .container {
   flex: 1;
   min-height: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 32px 16px;
   overflow-y: auto
}

body.page-config .card {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 32px;
   max-width: 480px;
   width: 100%
}

body.page-config .subtitle {
   margin: 0 0 24px;
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .6px
}

body.page-config .section {
   margin-bottom: 24px
}

body.page-config .section label {
   display: block;
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink)
}

body.page-config .dropzone {
   border: 2px dashed var(--line-strong);
   border-radius: var(--radius-sm);
   padding: 32px 16px;
   text-align: center;
   cursor: pointer;
   transition: all .2s;
   background: #fafafa
}

body.page-config .dropzone:hover {
   border-color: var(--accent);
   background: #f5f5f5
}

body.page-config .dropzone.dragover {
   border-color: var(--accent);
   background: #f0f0f0;
   transform: scale(1.015)
}

body.page-config .dropzone input {
   display: none
}

body.page-config .dropzone-text {
   font-size: 13px;
   color: var(--muted);
   margin: 0
}

body.page-config .dropzone-text strong {
   display: block;
   color: var(--ink);
   font-weight: 600;
   margin-bottom: 4px
}

body.page-config .dropzone.filled .dropzone-text strong {
   color: var(--accent)
}

body.page-config .dropzone .filename {
   display: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--accent);
   margin-top: 8px
}

body.page-config .dropzone.filled .filename {
   display: block;
   animation: p0FadeUpSm .25s ease
}

body.page-config .dropzone .dropicon {
   font-size: 32px;
   margin-bottom: 8px;
   display: block;
   transition: transform .2s ease
}

body.page-config .dropzone:hover .dropicon {
   transform: scale(1.1) rotate(-4deg)
}

body.page-config .dropzone.dragover .dropicon {
   transform: scale(1.18) rotate(3deg)
}

body.page-config .dropzone.filled .dropicon {
   transform: scale(1.05)
}

body.page-config .dropzone.processing {
   border-style: solid;
   border-color: var(--accent);
   background: #fff;
   cursor: default;
   pointer-events: none;
   animation: p0DzPulse 1.4s ease-in-out infinite
}

body.page-config .dropzone.processing .dropzone-text {
   color: var(--accent)
}

body.page-config .dropzone.processing .dz-choose-btn {
   opacity: .35
}

body.page-config .dropzone.processing .dropicon {
   animation: p0IconWork .9s ease-in-out infinite
}

@keyframes p0DzPulse {

   0%,
   to {
      box-shadow: 0 0 0 0 rgba(214, 67, 31, .22)
   }

   50% {
      box-shadow: 0 0 0 9px rgba(214, 67, 31, 0)
   }
}

@keyframes p0IconWork {

   0%,
   to {
      transform: translateY(0) rotate(0deg)
   }

   50% {
      transform: translateY(-6px) rotate(6deg)
   }
}

body.page-config .dz-native-input {
   display: none
}

body.page-config .dz-choose-btn {
   margin-top: 10px;
   font-size: 12.5px;
   padding: 7px 14px
}

body.page-config .height-control {
   display: flex;
   gap: var(--gap-sm);
   align-items: center
}

body.page-config input[type=range] {
   flex: 1;
   min-width: 0
}

body.page-config input[type=number] {
   width: 70px;
   font-size: 13px;
   padding: 6px 8px;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   font-family: var(--font);
   background: var(--panel);
   color: var(--ink)
}

body.page-config input[type=number]:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(214, 67, 31, .1)
}

body.page-config .height-unit {
   font-size: 12px;
   color: var(--muted);
   min-width: 24px
}

body.page-config button:hover:not(:disabled) {
   border-color: var(--accent)
}

body.page-config .btn-primary {
   width: 100%;
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
   font-size: 14px;
   padding: 12px 16px;
   transition: background .15s ease, transform .1s ease, box-shadow .15s ease
}

body.page-config .btn-primary:hover:not(:disabled) {
   background: var(--accent-d);
   border-color: var(--accent-d);
   box-shadow: 0 4px 10px rgba(214, 67, 31, .25)
}

body.page-config .btn-primary:active:not(:disabled) {
   transform: scale(.97);
   box-shadow: none
}

body.page-config .btn-primary.busy .spinner {
   display: inline-block
}

body.page-config .btn-primary.busy {
   pointer-events: none
}

body.page-config .p0-choice {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
   gap: 28px;
   max-width: 992px;
   width: 100%
}

body.page-config .p0-primary,
body.page-config .p0-secondary {
   flex: 1 1 480px;
   display: flex;
   flex-direction: column
}

body.page-config .p0-hint {
   margin: 0;
   font-size: 12.5px;
   color: var(--muted);
   line-height: 1.5
}

body.page-config .p0-divider {
   flex: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: stretch
}

body.page-config .p0-divider:after,
body.page-config .p0-divider:before {
   content: "";
   flex: 1;
   width: 1px;
   background: var(--line-strong)
}

body.page-config .p0-divider span {
   flex: none;
   margin: 10px 0;
   font-size: 11px;
   font-weight: 700;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .6px
}

@media (max-width:860px) {
   body.page-config .p0-choice {
      flex-direction: column;
      max-width: 480px;
      gap: 16px
   }

   body.page-config .p0-divider {
      flex-direction: row;
      align-self: stretch;
      width: 100%
   }

   body.page-config .p0-divider:after,
   body.page-config .p0-divider:before {
      height: 1px;
      width: auto
   }

   body.page-config .p0-divider span {
      margin: 0 12px
   }
}

body.page-config .p0-primary,
body.page-config .p0-secondary {
   transition: transform .18s ease, box-shadow .18s ease
}

body.page-config .p0-primary:hover,
body.page-config .p0-secondary:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 24px rgba(0, 0, 0, .09), 0 2px 6px rgba(0, 0, 0, .05)
}

@keyframes p0FadeIn {
   0% {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes p0FadeUp {
   0% {
      opacity: 0;
      transform: translateY(14px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes p0FadeUpSm {
   0% {
      opacity: 0;
      transform: translateY(4px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

body.page-config .app-header {
   animation: p0FadeIn .5s ease both
}

body.page-config .p0-primary {
   animation: p0FadeUp .5s ease .08s both
}

body.page-config .p0-divider {
   animation: p0FadeIn .5s ease .22s both
}

body.page-config .p0-secondary {
   animation: p0FadeUp .5s ease .26s both
}

@media (prefers-reduced-motion:reduce) {

   body.page-config .app-header,
   body.page-config .p0-divider,
   body.page-config .p0-primary,
   body.page-config .p0-secondary {
      animation: none;
      opacity: 1;
      transform: none
   }

   body.page-config .btn-primary:active:not(:disabled),
   body.page-config .dropzone.dragover,
   body.page-config .dropzone.dragover .dropicon,
   body.page-config .dropzone:hover .dropicon,
   body.page-config .p0-primary:hover,
   body.page-config .p0-secondary:hover {
      transform: none
   }

   body.page-config .dropzone.filled .filename,
   body.page-config .dropzone.processing,
   body.page-config .dropzone.processing .dropicon {
      animation: none
   }
}

@media (max-width:600px) {
   body.page-config .card {
      padding: 24px
   }

   body.page-config h1 {
      font-size: 20px
   }

   body.page-config .dropzone {
      padding: 24px 12px
   }
}

body.page-preview {
   height: 100%;
   margin: 0;
   padding: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font);
   font-size: 14px;
   line-height: 1.4;
   display: flex;
   flex-direction: column;
   overflow: hidden
}

body.page-preview .app-main {
   overflow-y: auto;
   flex-direction: column
}

body.page-preview .app-main,
body.page-preview .comparison {
   flex: 1;
   min-height: 0;
   display: flex;
   padding: var(--gap);
   gap: var(--gap)
}

body.page-preview .comparison {
   align-items: stretch;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow)
}

body.page-preview .canvas-box {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column
}

body.page-preview .canvas-label {
   position: absolute;
   top: 8px;
   left: 8px;
   z-index: 3;
   padding: 3px 9px;
   font-size: 11px;
   font-weight: 700;
   color: #fff;
   background: rgba(20, 20, 22, .62);
   text-transform: uppercase;
   letter-spacing: .4px;
   border-radius: 4px;
   pointer-events: none
}

body.page-preview .vs-badge {
   flex: none;
   align-self: center;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   font-size: 13px;
   font-weight: 800;
   font-style: italic;
   box-shadow: var(--shadow)
}

body.page-preview #limits {
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: 0;
   background: transparent;
   border: none
}

body.page-preview #limits .lim-list,
body.page-preview #limits .lim-title {
   display: none
}

body.page-preview #limits .lim-list li {
   margin-bottom: 5px
}

body.page-preview #limits .lim-list b {
   color: var(--ink, #1a1a1c)
}

body.page-preview #limits .lim-stab,
body.page-preview #limits .lim-stab.ok,
body.page-preview #limits .lim-stab.warn {
   display: none !important
}

body.page-preview #cogBtn {
   margin-top: 0
}

body.page-preview #limits>div:nth-child(3) {
   margin-top: 0 !important
}

body.page-preview .stat-tiles-panel {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0;
   background: transparent;
   border-radius: 0;
   margin: 0
}

body.page-preview .stat-tile {
   display: flex;
   align-items: baseline;
   gap: 6px;
   padding: 6px 12px;
   background: #f9f7f5;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   text-align: left
}

body.page-preview .stat-tile-value {
   font-size: 15px;
   font-weight: 800;
   color: var(--ink);
   line-height: 1
}

body.page-preview .stat-tile-label {
   font-size: 10px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .3px;
   font-weight: 600
}

body.page-preview .stat-tile--model {
   max-width: 220px
}

body.page-preview .stat-tile--model .stat-tile-value {
   font-size: 13px;
   font-weight: 700;
   text-transform: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

body.page-preview .canvas-wrap {
   flex: 1;
   min-height: 0;
   position: relative;
   background: #ececed;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   overflow: hidden
}

body.page-preview canvas {
   display: block;
   width: 100%;
   height: 100%
}

body.page-preview .canvas-empty {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: var(--muted);
   text-align: center;
   padding: 16px;
   background: hsla(0, 0%, 100%, .6)
}

body.page-preview .controls {
   flex: none;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: var(--gap);
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 12px
}

body.page-preview .controls-top {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

body.page-preview .options-toggle {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 16px;
   background: none;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.1px;
   text-transform: uppercase;
   color: var(--muted)
}

body.page-preview .options-toggle:hover {
   color: var(--accent);
   border-color: var(--accent)
}

body.page-preview .options-chev {
   font-size: 9px;
   transition: transform .15s
}

body.page-preview .options-toggle[aria-expanded=true] {
   color: var(--accent);
   border-color: var(--accent)
}

body.page-preview .options-toggle[aria-expanded=true] .options-chev {
   transform: rotate(180deg)
}

body.page-preview .options-panel {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 18px;
   background: #f9f7f5;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm)
}

body.page-preview .options-panel[hidden] {
   display: none
}

body.page-preview .opt-row {
   display: flex;
   flex-wrap: wrap;
   gap: 28px;
   align-items: flex-start
}

body.page-preview .opt-row--reorient {
   align-items: center;
   gap: 12px
}

body.page-preview .opt-field {
   display: flex;
   flex-direction: column;
   gap: 7px;
   flex: 1;
   min-width: 250px
}

body.page-preview .opt-field>label {
   font-size: 11px;
   font-weight: 700;
   color: var(--ink);
   text-transform: uppercase;
   letter-spacing: .5px
}

body.page-preview .opt-inline {
   display: flex;
   align-items: center;
   gap: 10px
}

body.page-preview .opt-inline input[type=range] {
   flex: 1;
   min-width: 90px;
   accent-color: var(--accent)
}

body.page-preview .opt-unit {
   font-size: 12px;
   color: var(--muted);
   white-space: nowrap
}

body.page-preview .opt-hint {
   margin: 0;
   font-size: 11px;
   color: var(--muted)
}

body.page-preview .opt-sub-label {
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap
}

body.page-preview .opt-btn {
   padding: 6px 12px;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   font-size: 12px;
   background: var(--panel);
   cursor: pointer;
   white-space: nowrap
}

body.page-preview .rot-controls {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center
}

body.page-preview .rot-axis {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 700
}

body.page-preview .rot-axis select {
   padding: 4px 6px;
   border: 1px solid;
   border-radius: var(--radius-sm);
   font-size: 12px;
   background: var(--panel)
}

body.page-preview .rot-axis--x {
   color: #e0001b
}

body.page-preview .rot-axis--y {
   color: #00930f
}

body.page-preview .rot-axis--z {
   color: #0b57d0
}

body.page-preview .opt-recalc {
   align-self: flex-end
}

body.page-preview input[type=number] {
   width: 70px;
   font-size: 13px;
   padding: 6px 8px;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   font-family: var(--font);
   background: var(--panel);
   color: var(--ink)
}

body.page-preview input[type=number]:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(214, 67, 31, .1)
}

body.page-preview .opt-inline input[type=number] {
   width: 58px
}

body.page-preview button:hover:not(:disabled) {
   border-color: var(--accent)
}

body.page-preview .btn-primary {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
   padding: 10px 18px;
   font-size: 14px
}

body.page-preview .btn-primary:hover:not(:disabled) {
   background: var(--accent-d);
   border-color: var(--accent-d)
}

body.page-preview .btn-group {
   flex: none;
   display: flex;
   gap: var(--gap);
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center
}

body.page-preview .btn-group button {
   flex: 0 0 auto
}

body.page-preview button.busy .spinner {
   display: inline-block
}

body.page-preview button.busy {
   pointer-events: none
}

@media (max-width:900px) {
   body.page-preview .comparison {
      flex-direction: column
   }

   body.page-preview .canvas-box {
      min-height: 300px
   }

   body.page-preview .opt-row {
      gap: 16px
   }

   body.page-preview .opt-field {
      min-width: unset;
      flex-basis: 100%
   }

   body.page-preview .controls-top {
      justify-content: stretch
   }

   body.page-preview .options-toggle {
      flex: 1;
      justify-content: center
   }

   body.page-preview .btn-group {
      flex-direction: column;
      gap: var(--gap)
   }

   body.page-preview .btn-group button {
      width: 100%
   }
}

@media (max-width:600px) {
   body.page-preview .app-main {
      padding: 8px;
      gap: 8px
   }

   body.page-preview .controls {
      padding: 12px
   }
}

body.page-editor {
   height: 100%;
   margin: 0;
   overflow: hidden;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font);
   font-size: 14px;
   line-height: 1.4;
   display: flex;
   flex-direction: column
}

body.page-editor button:hover:not(:disabled) {
   border-color: var(--accent)
}

body.page-editor button.cta,
body.page-editor button.on {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent)
}

body.page-editor button.cta:hover:not(:disabled) {
   background: var(--accent-d);
   border-color: var(--accent-d)
}

body.page-editor button.brick:after {
   width: 18px;
   height: 14px;
   margin-left: 6px;
   vertical-align: -3px
}

body.page-editor .brick-ico:before,
body.page-editor button.brick:after {
   content: "";
   display: inline-block;
   background: url(/static/brick-svgrepo-com.svg) no-repeat 50%/contain
}

body.page-editor .brick-ico:before {
   width: 16px;
   height: 13px;
   margin-right: 5px;
   vertical-align: -2px
}

body.page-editor .brick-counter {
   width: 16px;
   height: 13px;
   margin-right: 5px;
   vertical-align: -2px;
   display: inline-block
}

body.page-editor .sep {
   width: 1px;
   height: 22px;
   background: var(--line-strong);
   margin: 0 3px;
   flex: none
}

body.page-editor .socle-color-count {
   font-size: 11px;
   color: var(--muted);
   white-space: nowrap;
   align-self: center
}

body.page-editor .nuancier {
   display: flex;
   flex-wrap: wrap;
   gap: 4px
}

body.page-editor .sw {
   width: 22px;
   height: 22px;
   border-radius: 5px;
   border: 2px solid transparent;
   cursor: pointer;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
   flex: none
}

body.page-editor .sw.on {
   border-color: var(--ink);
   box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink)
}

body.page-editor #palette-all-container {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--line)
}

body.page-editor #palette-all {
   display: flex;
   flex-wrap: nowrap;
   gap: 3px;
   overflow-x: auto;
   overflow-y: hidden;
   max-height: 40px;
   padding: 4px 0
}

body.page-editor #palette-all .sw {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   flex-shrink: 0;
   position: relative;
   border-radius: 2px
}

body.page-editor #palette-all .sw.transparent:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border-color: #fff transparent transparent;
   border-style: solid;
   border-width: 6px 6px 0 0;
   border-radius: 0 0 0 0
}

body.page-editor .status {
   margin-left: auto;
   align-self: center;
   min-width: 90px;
   font-size: 12px;
   color: var(--muted);
   text-align: right
}

body.page-editor .toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap-sm)
}

body.page-editor .app-main {
   flex: 1;
   min-height: 0;
   overflow: hidden;
   display: flex;
   gap: var(--gap);
   padding: var(--gap)
}

body.page-editor .stage {
   flex: 1;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   justify-content: flex-start;
   align-items: stretch
}

body.page-editor #view3d {
   flex: 1;
   width: 100%;
   min-height: 0;
   display: block;
   background: inherit;
   border: inherit;
   border-radius: var(--radius);
   box-shadow: inherit;
   touch-action: none
}

body.page-editor .hint {
   margin: 0;
   font-size: 12px;
   color: var(--ink);
   display: flex;
   flex-direction: column;
   gap: 4px
}

body.page-editor .aide-l {
   display: flex;
   align-items: baseline;
   gap: .45em;
   line-height: 1.35
}

body.page-editor .aide-k {
   flex: none;
   color: var(--muted)
}

body.page-editor .aide-g {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .15em
}

body.page-editor .stage-palette {
   flex: none;
   width: 100%
}

body.page-editor #phase1-tools {
   flex: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap-sm);
   padding: 8px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow)
}

body.page-editor[data-phase="2"] #phase1-tools {
   display: none
}

body.page-editor #selectPanel {
   padding: 8px
}

body.page-editor #sideCol {
   flex: none;
   width: 230px;
   min-width: 230px;
   overflow-y: auto
}

body.page-editor #sideCol,
body.page-editor #voxCol {
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm)
}

body.page-editor #voxCol {
   flex: 1;
   min-width: 0;
   min-height: 0
}

body.page-editor #viewModeBar {
   display: none
}

body.page-editor[data-phase="2"] #viewModeBar {
   flex-wrap: wrap
}

body.page-editor #brickCountPhase2 {
   display: none
}

body.page-editor[data-phase="2"] #brickCountPhase2 {
   display: block;
   flex: none;
   margin: 0;
   font-size: 12px;
   color: var(--muted);
   font-weight: 600;
   text-align: center
}

body.page-editor #cogInfo {
   display: none
}

body.page-editor[data-phase="2"] #cogInfo {
   display: block;
   flex: none;
   margin: 0;
   font-size: 12px;
   color: var(--muted);
   text-align: center
}

body.page-editor #aideCard2 {
   display: none
}

body.page-editor[data-phase="2"] #aideCard2 {
   display: flex;
   flex: none
}

body.page-editor[data-phase="2"] #viewModeBar {
   display: flex;
   flex: none;
   justify-content: center;
   gap: var(--gap-sm)
}

body.page-editor #voxCol>#view3d {
   margin-inline: auto
}

body.page-editor #palette-all-row {
   flex: none;
   flex-direction: row;
   align-items: center;
   gap: var(--gap-sm);
   min-width: 0
}

body.page-editor #palette-all-row>.card-title {
   white-space: nowrap
}

body.page-editor #palette-all-row>#palette-all-container {
   flex: 1;
   min-width: 0;
   height: 34px
}

body.page-editor #palette-all-row #palette-all {
   flex-wrap: nowrap
}

body.page-editor .ref-frame {
   flex: none;
   width: 100%;
   height: 160px;
   background: #fff;
   overflow: hidden
}

body.page-editor .ref-frame canvas {
   width: 100%;
   height: 100%;
   display: block
}

body.page-editor[data-phase="0"] #stability,
body.page-editor[data-phase="1"] #stability,
body.page-editor[data-phase="3"] #stability {
   display: none !important
}

body.page-editor #stability {
   flex: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap-sm);
   align-items: center;
   padding: 8px 10px;
   font-size: 12px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius)
}

body.page-editor[data-phase="2"] #sideCol,
body.page-editor[data-phase="3"] #sideCol {
   display: none
}

body.page-editor[data-phase="2"] #phase1-tools,
body.page-editor[data-phase="2"] #stage-label-colors,
body.page-editor[data-phase="2"] .stage-palette,
body.page-editor[data-phase="3"] #phase1-tools,
body.page-editor[data-phase="3"] #stage-label-colors,
body.page-editor[data-phase="3"] .stage-palette {
   display: none !important
}

body.page-editor .tools-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap-sm);
   width: 100%
}

body.page-editor #curSwatch,
body.page-editor #curSwatch1,
body.page-editor #curSwatchSocle {
   flex: none;
   width: 38px;
   height: 38px;
   border-radius: 8px;
   border: 2px solid var(--line);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
   background: #d6431f
}

body.page-editor .ico-souris {
   width: 1.3em;
   height: 1.3em;
   vertical-align: -.3em;
   margin: 0 .1em;
   flex: none
}

body.page-editor kbd {
   font: inherit;
   font-size: .92em;
   font-weight: 600;
   padding: .05em .35em;
   border: 1px solid var(--line-strong);
   border-bottom-width: 2px;
   border-radius: 4px;
   background: #fff;
   color: var(--ink);
   white-space: nowrap
}

body.page-editor #statusBox {
   flex: 1;
   min-width: 0;
   padding: 6px 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

body.page-editor #brickCountBar {
   flex: none;
   align-items: center;
   gap: var(--gap-sm);
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
   white-space: nowrap
}

body.page-editor #sliceBrickCount {
   flex: none;
   font-size: 12px;
   font-weight: 700;
   color: var(--ink);
   white-space: nowrap
}

body.page-editor #phase-next-bar {
   flex: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap-sm);
   justify-content: flex-end;
   align-items: center
}

body.page-editor .palette-row {
   display: flex;
   align-items: flex-start;
   gap: var(--gap-sm);
   width: 100%
}

body.page-editor .palette-row .nuancier {
   flex: 1;
   min-width: 0
}

body.page-editor .cursor-pipette {
   cursor: url(/static/pipette-cursor.svg) 2 28, copy
}

body.page-editor #pipette {
   flex: none;
   width: 38px;
   height: 38px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 2px solid var(--line);
   border-radius: 8px;
   cursor: pointer
}

body.page-editor #pipette img {
   width: 24px;
   height: 24px;
   display: block
}

body.page-editor #pipette.on {
   background: rgba(214, 67, 31, .15);
   border-color: var(--accent)
}

body.page-editor #selectPanel {
   display: none;
   gap: var(--gap-sm);
   align-items: center;
   padding: 6px 10px;
   background: rgba(214, 67, 31, .1);
   border: 1px solid var(--line);
   border-radius: var(--radius-sm)
}

body.page-editor #selectPanel .sel-label {
   font-size: 12px;
   font-weight: 600
}

body.page-editor #selectedColorPreview {
   flex: none;
   width: 24px;
   height: 24px;
   border: 2px solid var(--line);
   border-radius: 4px;
   background: #ccc
}

body.page-editor #pipette2,
body.page-editor #pipette2Socle {
   flex: none;
   width: 38px;
   height: 38px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 2px solid var(--line);
   border-radius: 8px;
   cursor: pointer
}

body.page-editor #pipette2 img,
body.page-editor #pipette2Socle img {
   width: 24px;
   height: 24px;
   display: block
}

body.page-editor #pipette2.on,
body.page-editor #pipette2Socle.on {
   background: rgba(214, 67, 31, .15);
   border-color: var(--accent)
}

body.page-editor[data-phase="2"] #palette-all-row,
body.page-editor[data-phase="3"] #palette-all-row {
   display: none !important
}

body.page-editor #palette-all-row2 {
   flex: none;
   flex-direction: row;
   align-items: center;
   gap: var(--gap-sm);
   min-width: 0
}

body.page-editor #palette-all-row2>.card-title {
   white-space: nowrap
}

body.page-editor #palette-all-2 {
   flex: 1;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 4px 0;
   max-height: 64px
}

body.page-editor #palette-all-2 .sw {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   position: relative;
   border-radius: 2px
}

body.page-editor #palette-all-2 .sw.transparent:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border-color: #fff transparent transparent;
   border-style: solid;
   border-width: 6px 6px 0 0
}

body.page-editor #palette-all-container {
   overflow-x: auto;
   overflow-y: hidden;
   padding: 4px 0
}

body.page-editor #palette-all {
   min-width: min-content
}

body.page-editor #panes2,
body.page-editor #panes3 {
   overflow: hidden
}

body.page-editor #panes2,
body.page-editor #panes3,
body.page-editor #panes3-step {
   flex: 1;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: 8px
}

body.page-editor #stepStage {
   position: relative;
   flex: 1;
   min-height: 0
}

body.page-editor #stepStage canvas {
   width: 100%;
   height: 100%;
   display: block;
   background: #ececed;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   touch-action: none
}

body.page-editor #stepCallout {
   position: absolute;
   top: 12px;
   left: 12px;
   max-height: calc(100% - 24px);
   min-width: 140px;
   max-width: 45%;
   background: var(--panel);
   border: 2px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 8px 10px;
   font-size: 12px;
   pointer-events: none;
   display: flex;
   flex-direction: column
}

body.page-editor #stepCallout h3 {
   margin: 0 0 6px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--muted);
   flex: none
}

body.page-editor #stepRefs {
   display: flex;
   flex-direction: column;
   gap: 3px;
   overflow-y: auto;
   pointer-events: auto;
   min-height: 0
}

body.page-editor .ref-card {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 6px;
   padding: 3px 6px 3px 4px;
   border-radius: 5px;
   border: 2px solid transparent
}

body.page-editor .ref-card img {
   width: 28px;
   height: 28px;
   object-fit: contain;
   flex: none
}

body.page-editor .ref-card .qte {
   font-weight: 700;
   font-size: 11px
}

body.page-editor .ref-card .ref-warn {
   position: absolute;
   top: 1px;
   left: 1px;
   color: #c0392b;
   font-size: 10px
}

body.page-editor .ref-card.selected {
   border-color: #d81b1b;
   background: rgba(216, 27, 27, .1)
}

body.page-editor #stepNav {
   flex: none;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow)
}

body.page-editor #stepBar {
   position: relative;
   flex: 1;
   height: 8px;
   background: var(--line);
   border-radius: 4px;
   cursor: pointer;
   touch-action: none
}

body.page-editor #stepBarFill {
   height: 100%;
   width: 0;
   background: var(--accent, #2d6cdf);
   border-radius: 4px;
   transition: width .15s
}

body.page-editor #stepBarHandle {
   position: absolute;
   top: 50%;
   left: 0;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--accent, #2d6cdf);
   border: 2px solid #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
   transform: translate(-50%, -50%);
   transition: left .15s;
   pointer-events: none
}

body.page-editor .tools {
   flex: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap-sm);
   padding: 8px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow)
}

body.page-editor .tools-sep {
   flex: none;
   align-self: stretch;
   width: 1px;
   min-height: 28px;
   margin: 0 6px;
   background: var(--line-strong)
}

body.page-editor #mygobricksHint {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   font-size: 15px;
   font-weight: 800;
   font-style: italic;
   color: var(--accent, #2d6cdf);
   white-space: nowrap
}

body.page-editor #mygobricksLink {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
   border-radius: 6px;
   transition: transform .12s ease, box-shadow .12s ease
}

body.page-editor #mygobricksLink:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .18)
}

body.page-editor .nav {
   font-size: 13px;
   font-weight: 600;
   min-width: 110px;
   text-align: center
}

body.page-editor .editrow {
   flex: 1;
   min-height: 0;
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap)
}

body.page-editor .pane {
   position: relative;
   flex: 2;
   min-width: 240px;
   max-height: 100%;
   overflow: hidden;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   min-height: 0
}

body.page-editor #planFitBtn {
   position: absolute;
   top: 6px;
   right: 6px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 6px;
   background: hsla(0, 0%, 100%, .92);
   color: var(--muted);
   cursor: pointer;
   box-shadow: var(--shadow)
}

body.page-editor #planFitBtn:hover {
   color: var(--accent);
   border-color: var(--accent)
}

body.page-editor #planFitBtn svg {
   width: 17px;
   height: 17px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round
}

body.page-editor #refPane {
   flex: 1
}

body.page-editor canvas.plan {
   display: block;
   background: #fafafa;
   border: 1px solid var(--line);
   border-radius: 6px;
   cursor: crosshair;
   place-self: center;
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   min-height: 0
}

body.page-editor #pgmPlan {
   cursor: pointer
}

body.page-editor canvas.plan.cursor-pipette {
   cursor: url(/static/pipette-cursor.svg) 2 28, copy
}

body.page-editor canvas.plan.panning {
   cursor: grabbing
}

body.page-editor canvas.plan.cursor-main {
   cursor: grab
}

body.page-editor canvas.plan.cursor-main.saisie {
   cursor: grabbing
}

body.page-editor canvas.plan.rect-deleting {
   cursor: crosshair
}

body.page-editor[data-phase="1"] #panes2,
body.page-editor[data-phase="1"] #panes3 {
   display: none
}

body.page-editor[data-phase="1"] #toPhase3,
body.page-editor[data-phase="2"] #backToPreview,
body.page-editor[data-phase="2"] #panes3,
body.page-editor[data-phase="3"] #backToPreview,
body.page-editor[data-phase="3"] #panes2,
body.page-editor[data-phase="3"] #validate {
   display: none !important
}

body.page-editor[data-phase="2"] #back1 {
   display: inline-block !important
}

body.page-editor[data-phase="2"] #validate {
   display: none !important
}

body.page-editor #phase0 {
   display: none
}

body.page-editor[data-phase="0"] #phase0 {
   display: flex
}

body.page-editor[data-phase="0"] .app-main {
   display: none
}

body.page-editor #phase0 {
   flex: 1;
   min-height: 0;
   overflow: auto;
   align-items: flex-start;
   justify-content: center;
   padding: 32px 16px
}

body.page-editor .p0-card {
   width: 100%;
   max-width: 460px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 26px 24px;
   display: flex;
   flex-direction: column;
   gap: 20px
}

body.page-editor .p0-card h1 {
   margin: 0;
   font-size: 20px;
   font-weight: 800
}

body.page-editor .p0-card .sub {
   margin: -12px 0 0;
   font-size: 13px;
   color: var(--muted)
}

body.page-editor .p0-sec {
   display: flex;
   flex-direction: column;
   gap: 6px
}

body.page-editor .p0-sec>label.title {
   font-size: 13px;
   font-weight: 700
}

body.page-editor .p0-sec .desc {
   font-size: 12px;
   color: var(--muted)
}

body.page-editor .p0-drop {
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1.5px dashed var(--line-strong);
   border-radius: var(--radius-sm);
   padding: 12px 14px;
   cursor: pointer;
   background: #fafafb;
   transition: border-color .12s, background .12s
}

body.page-editor .p0-drop.filled,
body.page-editor .p0-drop:hover {
   border-color: var(--accent);
   background: #fff
}

body.page-editor .p0-drop.filled {
   border-style: solid
}

body.page-editor .p0-drop .ico {
   font-size: 20px;
   flex: none
}

body.page-editor .p0-drop .fname {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

body.page-editor .p0-or {
   text-align: center;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .5px;
   color: var(--muted);
   text-transform: uppercase
}

body.page-editor .p0-height .row {
   display: flex;
   align-items: center;
   gap: 12px
}

body.page-editor .p0-height input[type=range] {
   flex: 1;
   accent-color: var(--accent)
}

body.page-editor .p0-height input[type=number] {
   width: 64px;
   font: inherit;
   padding: 5px 7px;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm)
}

body.page-editor .p0-height .unit {
   font-size: 13px;
   color: var(--muted)
}

body.page-editor .p0-est {
   font-size: 12px;
   color: var(--muted)
}

body.page-editor .p0-est b {
   color: var(--ink)
}

body.page-editor #p0Generate {
   width: 100%;
   justify-content: center;
   padding: 11px;
   font-size: 14px
}

body.page-editor .p0-msg {
   font-size: 12.5px;
   line-height: 1.5;
   padding: 10px 12px;
   border-radius: var(--radius-sm)
}

body.page-editor .p0-msg.info {
   background: #eef3ff;
   color: #274690;
   border: 1px solid #cfdcff
}

body.page-editor .p0-msg.err {
   background: #fdeeee;
   color: #a1211b;
   border: 1px solid #f3c9c6
}

body.page-editor .p0-busy {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: var(--muted)
}

body.page-editor .p0-spin {
   width: 16px;
   height: 16px;
   flex: none;
   border-radius: 50%;
   border: 2px solid var(--line-strong);
   border-top-color: var(--accent);
   animation: p0spin .7s linear infinite
}

@keyframes p0spin {
   to {
      transform: rotate(1turn)
   }
}

body.page-editor .p0-preview {
   width: 100%;
   max-width: 960px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 26px 24px;
   display: flex;
   flex-direction: column;
   gap: 20px
}

body.page-editor .p0-preview h1 {
   margin: 0;
   font-size: 20px;
   font-weight: 800
}

body.page-editor .p0-compare {
   display: flex;
   gap: 22px;
   align-items: flex-start
}

body.page-editor .p0-canvas-box {
   margin: 0;
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 8px
}

body.page-editor .p0-canvas-box figcaption {
   font-size: 12px;
   font-weight: 700;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .4px;
   text-align: center
}

body.page-editor .p0-canvas-wrap {
   position: relative
}

body.page-editor #p0View,
body.page-editor #p0ViewOrig {
   width: 100%;
   aspect-ratio: 1/1;
   max-height: 52vh;
   display: block;
   background: #ececed;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   touch-action: none
}

body.page-editor .p0-canvas-empty {
   font-size: 12.5px;
   text-align: center;
   padding: 0 16px
}

body.page-editor .p0-canvas-empty,
body.page-editor .p0-recalc-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted)
}

body.page-editor .p0-recalc-overlay {
   gap: 10px;
   background: hsla(0, 0%, 100%, .72);
   border-radius: var(--radius);
   font-size: 13px;
   font-weight: 600
}

body.page-editor .p0-controls {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   align-items: flex-start
}

body.page-editor .p0-controls .p0-stats {
   flex: 1 1 240px
}

body.page-editor .p0-controls .p0-recalc {
   flex: 1 1 300px
}

body.page-editor .p0-stats {
   display: flex;
   flex-direction: column;
   gap: 8px
}

body.page-editor .p0-stat {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 8px;
   padding: 8px 12px;
   background: #fafafb;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm)
}

body.page-editor .p0-stat .lbl {
   font-size: 12px;
   color: var(--muted);
   font-weight: 600
}

body.page-editor .p0-stat .val {
   font-size: 16px;
   font-weight: 800;
   color: var(--ink)
}

body.page-editor .p0-recalc #pvRecalc {
   align-self: flex-start
}

body.page-editor .p0-pv-note {
   color: var(--accent);
   font-weight: 600
}

body.page-editor .p0-preview .cta {
   align-self: stretch;
   text-align: center;
   padding: 11px;
   font-size: 14px
}

@media (max-width:720px) {
   body.page-editor .p0-compare {
      flex-direction: column
   }

   body.page-editor #p0View,
   body.page-editor #p0ViewOrig {
      max-height: 46vh
   }
}

body.page-editor .stage-cols {
   flex: 1;
   min-height: 0;
   display: flex;
   gap: var(--gap)
}

body.page-editor[data-phase="1"] #sideCol {
   flex: 0 0 50%;
   width: auto;
   min-width: 320px;
   max-width: none
}

body.page-editor[data-phase="1"] #view3d {
   flex: 1 1 auto;
   width: 100%;
   height: auto;
   min-height: 0
}

body.page-editor[data-phase="1"] #voxCol>#view3d {
   margin-inline: 0
}

body.page-editor[data-phase="1"] #refRow {
   flex: 1 1 auto;
   min-height: 200px;
   display: flex;
   gap: var(--gap-sm);
   align-items: stretch
}

body.page-editor[data-phase="1"] #refCard {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column
}

body.page-editor[data-phase="1"] #refCard .ref-frame {
   flex: 1;
   height: auto;
   min-height: 0
}

body.page-editor #aideCard {
   display: none
}

body.page-editor[data-phase="1"] #aideCard {
   display: flex;
   flex-direction: column;
   flex: none;
   align-self: stretch;
   width: max-content;
   max-width: 260px;
   overflow-y: auto;
   padding: 0
}

body.page-editor[data-phase="1"] #aideCard .aide-body {
   padding: 10px 12px 12px
}

body.page-editor .aide-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
   padding: 7px 10px;
   border: none;
   border-bottom: 1px solid var(--line);
   background: #fafafb;
   cursor: pointer;
   font: inherit;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--muted);
   border-radius: var(--radius) var(--radius) 0 0
}

body.page-editor .aide-toggle:hover {
   color: var(--accent)
}

body.page-editor .aide-chev {
   transition: transform .15s
}

body.page-editor #aideCard.collapsed {
   max-width: none
}

body.page-editor #aideCard.collapsed .aide-body {
   display: none
}

body.page-editor #aideCard.collapsed .aide-toggle {
   flex-direction: column;
   height: 100%;
   border-bottom: none;
   border-radius: var(--radius);
   writing-mode: vertical-rl;
   padding: 10px 7px
}

body.page-editor #aideCard.collapsed .aide-chev {
   transform: rotate(180deg)
}

body.page-editor[data-phase="1"] #palette-all-row {
   flex: none;
   flex-direction: column;
   align-items: stretch;
   gap: 8px
}

body.page-editor[data-phase="1"] #palette-all-row>#palette-all-container {
   flex: none;
   min-height: 0;
   height: auto;
   max-height: none;
   overflow: visible;
   margin: 0;
   padding: 0;
   border: none
}

body.page-editor[data-phase="1"] #palette-all-row #palette-all {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   overflow: visible;
   max-height: none;
   min-width: 0;
   width: 100%;
   height: auto;
   align-content: flex-start;
   justify-content: flex-start
}

body.page-editor[data-phase="1"] #palette-all-row #palette-all .sw {
   width: 22px;
   height: 22px;
   flex: 0 0 22px;
   border-radius: 5px
}

body.page-editor[data-phase="1"] #phase1-tools #statusBox {
   flex: 1 1 100%
}

body.page-editor[data-phase="1"] #phase1-tools .sep {
   display: none
}

body.page-editor[data-phase="2"] .stage {
   flex: 0 0 var(--preview-w);
   overflow: hidden
}

body.page-editor[data-phase="2"] #aideCard2 {
   margin-bottom: 2px;
   padding: 0;
   flex: 0 1 auto;
   min-height: 0;
   overflow: hidden
}

body.page-editor[data-phase="2"] #aideCard2 .aide-body {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 10px 12px 12px;
   display: flex;
   flex-direction: column;
   gap: 8px
}

body.page-editor #aideCard2.collapsed {
   flex: 0 0 auto
}

body.page-editor #aideCard2.collapsed .aide-body {
   display: none
}

body.page-editor #aideCard2.collapsed .aide-toggle {
   border-bottom: none;
   border-radius: var(--radius)
}

body.page-editor #aideCard2.collapsed .aide-chev {
   transform: rotate(-90deg)
}

body.page-editor[data-phase="2"] #view3d {
   flex: 0 0 var(--preview-h)
}

body.page-editor[data-phase="3"] .stage {
   display: none
}

body.page-editor #viewSide {
   display: none;
   flex: 0 0 160px;
   width: 100%;
   height: 160px;
   background: inherit;
   border: inherit;
   border-radius: var(--radius);
   box-shadow: inherit;
   touch-action: none
}

body.page-editor[data-phase="2"] #viewSide {
   display: block
}

@media (max-width:980px) {
   body.page-editor[data-phase="2"] .app-main {
      flex-direction: column;
      overflow: auto
   }

   body.page-editor[data-phase="2"] .stage {
      flex: 0 0 auto
   }

   body.page-editor[data-phase="2"] #view3d {
      flex: 0 0 300px
   }

   body.page-editor[data-phase="2"] #panes2 {
      flex: 0 0 auto
   }

   body.page-editor[data-phase="2"] .editrow {
      overflow: visible
   }
}

@media (max-width:680px) {
   body.page-editor .app-main {
      padding: 8px;
      gap: 8px
   }

   body.page-editor .status {
      margin-left: 0;
      width: 100%;
      text-align: left
   }

   body.page-editor .pane {
      min-width: 0
   }
}

body.page-config button,
body.page-preview button {
   transition: all .12s
}

body.page-preview .spinner {
   width: 14px;
   height: 14px;
   margin-right: 6px
}

body.page-editor button {
   padding: 6px 11px
}

body.page-editor .app-header {
   z-index: 10;
   flex-wrap: wrap;
   gap: 10px 12px;
   padding: 10px 16px
}

body.page-editor .brand {
   margin-right: 2px
}

body.page-editor #phase2-bottom-bar {
   flex: none;
   display: flex;
   gap: var(--gap-sm);
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   margin-top: 8px
}

body.page-editor[data-phase="2"] #phase-next-bar #back1,
body.page-editor[data-phase="2"] #phase-next-bar #toPhase3 {
   display: none !important
}

body.page-editor[data-phase="2"] #back1Phase2,
body.page-editor[data-phase="2"] #toPhase3Phase2 {
   display: inline-block !important
}

body.page-editor[data-phase="1"] #phase2-bottom-bar,
body.page-editor[data-phase="3"] #phase2-bottom-bar {
   display: none !important
}

body.page-editor #socle-bottom-bar {
   flex: none;
   display: flex;
   gap: var(--gap-sm);
   justify-content: space-between;
   align-items: center;
   margin-top: 8px
}

body.page-editor.socle-edit #phase2-bottom-bar,
body.page-editor.socle-edit #redo2,
body.page-editor.socle-edit #redo2Socle,
body.page-editor.socle-edit #socleReset,
body.page-editor.socle-edit #undo2,
body.page-editor.socle-edit #undo2Socle,
body.page-editor[data-phase="1"] #socle-bottom-bar,
body.page-editor[data-phase="3"] #socle-bottom-bar {
   display: none !important
}

body.page-editor.socle-edit #socle-bottom-bar {
   display: flex !important
}

body.page-editor.socle-edit #brickCountBarSocle,
body.page-editor.socle-edit #mAdd,
body.page-editor.socle-edit #mDel,
body.page-editor.socle-edit #mMod,
body.page-editor.socle-edit #nav,
body.page-editor.socle-edit #next,
body.page-editor.socle-edit #prev,
body.page-editor.socle-edit #refPane,
body.page-editor.socle-edit #tAbove,
body.page-editor.socle-edit #tBelow,
body.page-editor.socle-edit #toggleRef,
body.page-editor.socle-edit #viewSide {
   display: none !important
}

body.page-editor.socle-edit #socle-mode-buttons {
   display: flex !important
}

body.page-editor.socle-edit #socle-mode-bar {
   display: none !important
}

body.page-editor.socle-edit #addSocleSliceDown,
body.page-editor.socle-edit #addSocleSliceUp {
   display: inline-block !important
}

body.page-editor.socle-edit .stage {
   flex: 0 0 var(--preview-w)
}

body.page-editor.socle-edit #view3d {
   flex: 0 0 var(--preview-h)
}

body.page-editor.socle-edit #palette-all-row2 {
   display: flex !important
}

body.page-editor.socle-edit #panes2 {
   flex: 1;
   min-height: 0
}

body.page-editor #socle-toolbar {
   display: none !important
}

body.page-editor.socle-edit #socle-toolbar {
   display: flex !important;
   flex-direction: column;
   gap: var(--gap-sm);
   padding: 8px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   flex: none
}

body.page-editor.socle-edit #socle-toolbar .tools-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap-sm);
   width: 100%
}

body.page-editor.socle-edit .tools:first-child {
   display: none !important
}

.modal {
   position: fixed;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font)
}

.modal,
.modal-overlay {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
}

.modal-overlay {
   position: absolute;
   background: rgba(0, 0, 0, .5);
   z-index: -1
}

.modal-content {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 30px;
   max-width: 500px;
   width: 90%;
   box-shadow: var(--shadow);
   z-index: 1001
}

.modal-content h2 {
   margin: 0 0 20px;
   font-size: 18px;
   font-weight: 700;
   color: var(--text)
}

.modal-info {
   margin-bottom: 25px;
   padding: 15px;
   background: rgba(0, 0, 0, .05);
   border-radius: calc(var(--radius) - 2px)
}

.info-row {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
   font-size: 14px;
   border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.info-row:last-child {
   border-bottom: none
}

.info-row .label {
   font-weight: 600;
   color: var(--text)
}

.info-row .value {
   color: var(--accent);
   font-weight: 600
}

.info-warning {
   padding: 12px;
   margin-top: 10px;
   background: rgba(255, 69, 0, .1);
   border-left: 3px solid #ff4500;
   border-radius: 4px;
   font-size: 13px
}

.info-warning,
.modal-actions {
   display: flex;
   justify-content: space-between
}

.modal-actions {
   gap: 10px
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
   flex: 1;
   padding: 12px 16px;
   border: none;
   border-radius: calc(var(--radius) - 2px);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all .2s
}

.btn-primary {
   background: var(--accent);
   color: #fff
}

.btn-primary:hover:not(:disabled) {
   opacity: .9;
   transform: translateY(-1px)
}

.btn-secondary {
   background: rgba(0, 0, 0, .1);
   color: var(--text)
}

.btn-secondary:hover:not(:disabled) {
   background: rgba(0, 0, 0, .15)
}

.btn-tertiary {
   background: #4caf50;
   color: #fff
}

.btn-tertiary:hover:not(:disabled) {
   background: #45a049;
   transform: translateY(-1px)
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
   opacity: .5;
   cursor: not-allowed
}

body.page-editor.socle-edit #palette-all-row2 {
   display: block !important;
   order: 3;
   margin-top: 10px
}

body.page-editor.socle-edit #socle-bottom-bar {
   order: 4
}

#noticePrintContainer {
   display: none
}

@media print {
   body * {
      visibility: hidden
   }

   #noticePrintContainer,
   #noticePrintContainer * {
      visibility: visible
   }

   #noticePrintContainer {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%
   }

   body.page-editor,
   html {
      overflow: visible !important;
      height: auto !important;
      background: #ededed
   }

   @page {
      size: A4;
      margin: 0
   }

   .notice-print-page {
      width: 210mm;
      height: 297mm;
      padding: 12mm;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #ededed;
      page-break-after: always;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact
   }

   .notice-print-page-last {
      page-break-after: auto;
      height: auto;
      overflow: visible
   }

   .np-bom-card {
      page-break-inside: avoid;
      break-inside: avoid
   }

   .np-title {
      font-size: 14pt;
      font-weight: 700;
      margin: 0 0 4mm;
      flex: none
   }

   .np-top .np-title {
      margin: 0;
      flex: 1;
      padding-top: 2mm
   }

   .np-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 6mm;
      flex: none
   }

   .np-cover-3d-box {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: .6mm solid #141414;
      border-radius: 4.8mm;
      padding: 6mm;
      box-sizing: border-box;
      background: #ededed;
      overflow: hidden
   }

   .np-cover-3d {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto
   }

   .np-refs {
      border: .6mm solid #141414;
      border-radius: 3.7mm;
      padding: 3mm 4mm;
      display: flex;
      align-items: center;
      gap: 4mm;
      flex-wrap: wrap;
      margin: 4mm 0;
      flex: none
   }

   .np-plan-row {
      display: flex;
      align-items: stretch;
      gap: 4mm;
      flex: 1;
      min-height: 0
   }

   .np-gauge-col {
      flex: 0 0 9mm;
      height: 100%;
      flex-direction: column
   }

   .np-gauge-col,
   .np-plan-box {
      display: flex;
      align-items: center
   }

   .np-plan-box {
      flex: 1;
      min-width: 0;
      max-width: 173mm;
      max-height: 100%;
      box-sizing: border-box;
      border: .6mm solid #141414;
      border-radius: 4.8mm;
      padding: 5mm 0 5mm 5mm;
      background: #ededed;
      justify-content: flex-end;
      overflow: hidden
   }

   .np-plan {
      display: block;
      max-width: 166.8mm;
      max-height: 100%;
      width: auto;
      height: auto
   }

   .np-ref-card {
      display: flex;
      align-items: center;
      gap: 2mm;
      font-size: 9pt
   }

   .np-ref-card img {
      width: 8mm;
      height: 8mm;
      object-fit: contain;
      flex: none
   }

   .np-ref-card .np-qte {
      font-weight: 700
   }

   .np-gauge-wrap {
      position: relative;
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      display: flex;
      justify-content: center
   }

   .np-gauge {
      position: relative;
      width: 9mm;
      height: 100%;
      background: #f4c400;
      border: .6mm solid #141414;
      border-radius: 4.5mm;
      overflow: hidden;
      box-sizing: border-box
   }

   .np-gauge-fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: red
   }

   .np-gauge-brick {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 14mm;
      height: auto;
      display: block;
      z-index: 2
   }

   .np-bom-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2.5mm
   }

   .np-bom-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 7pt;
      text-align: center;
      border: .45mm solid #141414;
      border-radius: 2.5mm;
      padding: 2mm 1mm;
      background: #fff;
      box-sizing: border-box
   }

   .np-bom-card img {
      width: 14mm;
      height: 14mm;
      object-fit: contain
   }

   .np-bom-card .np-bom-qte {
      font-weight: 700
   }

   .np-bom-card .np-bom-ldraw {
      font-size: 6pt;
      margin-top: .5mm
   }

   .np-bom-card .np-bom-sku {
      font-size: 5.5pt;
      color: #666
   }
}

/* ===================== FOOTER — triangle pulsant + signature Daedalus =========
   Replié : rien que le triangle, centré (la règle de base `.app-footer-bar` est
   déjà width:100% / justify-content:center — il n'y a plus de wrapper en
   grille), et il pulse en rouge. Déplié : trois colonnes, © à gauche, la
   signature au centre, les mentions légales à droite.

   Tout ce qui suit est porté par des classes MODIFICATRICES
   (`--pulse`, `--3col`) : `app.css` est partagé avec config.html et
   preview.html, dont le pied de page est resté à l'ancienne forme (deux
   enfants, pas de signature). Toucher aux règles de base y casserait la mise
   en page. */

/* --- Replié : le triangle pulse ------------------------------------------- */
/* `.app-footer-bar` pose color:var(--muted) ; sans ce rouge explicite la
   pulsation serait un clignotement gris, illisible comme appel à l'action. */
.app-footer-bar--pulse[aria-expanded=false] .app-footer-chev {
   color: var(--accent);
   font-size: 12px;
   animation: dc-pulse 1.8s ease-in-out infinite
}

.app-footer-bar--pulse:hover .app-footer-chev {
   color: var(--accent-d)
}

/* Ouvert, plus de pulsation : le triangle n'appelle plus, il sert juste à
   refermer. */
.app-footer-bar--pulse[aria-expanded=true] .app-footer-chev {
   color: var(--muted);
   animation: none
}

/* --- Déplié : trois colonnes ---------------------------------------------- */
.app-footer-panel--3col {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 6px 16px
}

.app-footer-panel--3col[hidden] {
   display: none
}

.app-footer-panel--3col .app-footer-copy {
   grid-column: 1;
   justify-self: start
}

.app-footer-panel--3col .app-footer-daedalus {
   grid-column: 2;
   justify-self: center
}

.app-footer-panel--3col nav {
   grid-column: 3;
   justify-self: end
}

/* Sous 640px les trois colonnes se marchent dessus : on empile. */
@media (max-width:640px) {
   .app-footer-panel--3col {
      grid-template-columns: 1fr;
      justify-items: center
   }

   .app-footer-panel--3col .app-footer-copy,
   .app-footer-panel--3col .app-footer-daedalus,
   .app-footer-panel--3col nav {
      grid-column: 1;
      justify-self: center
   }
}

/* --- Signature ------------------------------------------------------------ */
/* Plus d'animation ici : la pulsation appartient au triangle replié, et un
   lien qui clignote sous le curseur est pénible à viser. */
/* Sélecteurs qualifiés `.app-footer-panel a.…` — PAS un caprice de style.
   La signature vit dans le panneau, donc `.app-footer-panel a` (0,1,1) et
   `.app-footer-panel a:hover` (0,1,1 + :hover = 0,2,1) la couvraient : le lien
   sortait gris `--muted` au repos et ROUGE `--accent` au survol, avec une
   ombre verte derrière. D'où « la couleur ne reste pas au hover » : le vert
   n'était jamais appliqué. Une `text-shadow` se peint DERRIÈRE la glyphe, elle
   ne peut pas délaver une couleur — c'était bien la cascade, pas le flou.
   On monte la spécificité ici plutôt que de toucher aux règles génériques,
   dont dépendent les trois liens de mentions légales. */
.app-footer-panel a.app-footer-daedalus {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 4px 6px;
   border-radius: var(--radius-sm);
   text-decoration: none;
   color: #00D992;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   transition: all 0.3s ease
}

/* Néon en trois couches : un noyau serré (2px, opaque) qui garde la lettre
   nette, puis deux halos de plus en plus larges et de plus en plus
   transparents. L'inverse — que du flou large et opaque — empâte les contre-
   formes d'un 11px gras et fait bouillie.
   Pas de `filter: drop-shadow()` ici : posé sur le <a>, il s'applique à TOUT
   le sous-arbre, donc il s'empilait sur les deux drop-shadow du cube (plus
   bas) et floutait le canvas. La text-shadow suffit pour le texte. */
.app-footer-panel a.app-footer-daedalus:hover,
.app-footer-panel a.app-footer-daedalus:focus-visible {
   color: #00D992;
   text-shadow: 0 0 2px #00D992, 0 0 8px #00D992aa, 0 0 18px #00D99255
}

.app-footer-panel a.app-footer-daedalus:focus-visible {
   outline: 2px solid #00D992;
   outline-offset: 2px
}

/* --- Cube GLB ------------------------------------------------------------- */
/* L'ancien cube SVG inline refusait le GLB pour ne pas ajouter un 6e contexte
   WebGL à un éditeur qui en tient déjà 5. C'est toujours vrai — d'où le montage
   PARESSEUX de core/footer.js : le contexte n'existe qu'entre l'ouverture et la
   fermeture du panneau, et il est réellement détruit (forceContextLoss) au
   repli. Rien ne tourne pendant qu'on travaille.
   `pointer-events:none` : le canvas est dans un <a>, il ne doit pas manger le
   clic ni afficher un curseur de canvas. */
.dc-cube {
   width: 28px;
   height: 28px;
   flex: none;
   display: block;
   pointer-events: none;
   transition: filter 0.3s ease
}

.dc-cube canvas {
   display: block;
   width: 100%;
   height: 100%
}

.app-footer-daedalus:hover .dc-cube {
   filter: drop-shadow(0 0 10px #00D992) drop-shadow(0 0 6px #00D992)
}

/* Pulsation rouge : on descend à .45, pas à 0 — un clignotement franc se lirait
   comme un voyant d'erreur, pas comme une signature. Rouge = var(--accent),
   le rouge de la marque, pas un #f00 générique. */
@keyframes dc-pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .45
   }
}

@media (prefers-reduced-motion:reduce) {
   .app-footer-bar--pulse[aria-expanded=false] .app-footer-chev {
      animation: none;
      opacity: 1
   }
}

/* --- Barre replié avec contenu : © 2026 | triangle centré | liens ---- */
.app-footer-bar {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 24px;
   align-items: center;
   padding: 12px 16px;
   cursor: pointer;
   user-select: none;
}

.app-footer-bar .app-footer-copy {
   grid-column: 1;
   justify-self: start;
}

.app-footer-bar .app-footer-chev {
   grid-column: 2;
   justify-self: center;
}

.app-footer-bar nav {
   grid-column: 3;
   justify-self: end;
}

.app-footer-bar[role="button"] {
   outline: none;
}

.app-footer-bar[role="button"]:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
}

.app-footer-bar .app-footer-copy {
   font-size: 12px;
   color: var(--muted);
}

.app-footer-bar nav {
   display: flex;
   gap: 16px;
   font-size: 12px;
}

.app-footer-bar nav a {
   color: var(--muted);
   text-decoration: none;
   transition: color 0.2s;
}

.app-footer-bar nav a:hover {
   color: var(--ink);
}

/* --- Panneau déplié : centré avec "Propulsé par Daedalus" ------ */
.app-footer-panel--centered {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 16px;
}

.app-footer-label-before {
   font-size: 11px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-right: 4px;
}