@layer atelier {
/* L'Atelier proto — direction « tapis de découpe »
   Le fond est un tapis de coupe vert, quadrillé ; le contenu est posé dessus comme des feuilles de
   papier blanc. Chaque outil a la couleur d'un cube en bois (rouge, bleu, jaune). Une seule famille de
   caractères, Archivo, dont on fait varier la largeur : étendue pour les titres, normale pour le texte. */

:root {
  /* Tapis */
  --mat: #23594C;
  --mat-deep: #17423A;
  --mat-ink: #E9F1EC;
  --mat-soft: #B5CDC2;
  --mat-line: rgba(233, 241, 236, .09);
  --mat-line-major: rgba(233, 241, 236, .17);

  /* Papier et encre */
  --sheet: #FCFCFA;
  --sheet-2: #F1F3F0;
  --ink: #1A1F1C;
  --muted: #5B6560;
  --rule: #D4DAD5;
  --rule-strong: #A9B3AD;

  /* Cubes en bois : une couleur par outil */
  --red: #C8372D;
  --blue: #2B5FA8;
  --yellow: #E2AE1F;
  --green-cube: #3D8A4A;
  --purple-cube: #6A4A9C;
  --tool: var(--ink); /* redéfini par outil plus bas */

  /* Recto / verso dans l'outil Impression */
  --recto: #C8372D;
  --recto-soft: #F7E3E0;
  --verso: #23594C;
  --verso-soft: #E1ECE7;

  /* États */
  --danger: #B3261E;
  --error-bg: #FBE6E3;
  --warning: #8A5800;
  --warning-bg: #FFF0C7;
  --ok: #2E6B45;
  --ok-bg: #E2EFE6;
  --info: #23594C;
  --info-bg: #E6EFEA;

  /* Ombres : une feuille posée sur le tapis */
  --lift: 0 1px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(4, 24, 18, .28);
  --lift-small: 0 1px 0 rgba(0, 0, 0, .14), 0 2px 6px rgba(4, 24, 18, .2);

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: 'wdth' 100;
}

body[data-tool="impression"] { --tool: var(--red); }
body[data-tool="mecaniques"] { --tool: var(--blue); }
body[data-tool="combinatoire"] { --tool: var(--yellow); }
body[data-tool="icones"] { --tool: var(--green-cube); }
body[data-tool="tableau"] { --tool: var(--purple-cube); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mat-ink);
  background-color: var(--mat);
  /* Quadrillage du tapis : un trait fin tous les 20 px, un trait marqué tous les 100 px. */
  background-image:
    linear-gradient(var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
}

/* Typographie : échelle 13 · 15 · 17 · 20 · 26 · 34 · 52 */
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 800; }
h1 { font-size: 2.25rem; font-variation-settings: 'wdth' 125; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; font-variation-settings: 'wdth' 118; margin-bottom: .6rem; }
h3 { font-size: 1.05rem; font-variation-settings: 'wdth' 110; margin-bottom: .4rem; }
p { margin: 0 0 .8rem; }
a { color: inherit; }
.num, input.num, .recap strong, .capacity .big { font-variant-numeric: tabular-nums; }

/* ---------- Barre et règle ---------- */
.appbar { height: 58px; display: flex; align-items: center; gap: 2rem; padding: 0 clamp(1rem, 3vw, 2rem); background: var(--mat-deep); position: sticky; top: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--mat-ink); }
.brand .logo { width: 32px; height: 32px; }
.brand-name { font-size: 1.1rem; font-weight: 800; font-variation-settings: 'wdth' 125; letter-spacing: -.01em; }
.appbar .tools { display: flex; gap: .2rem; margin-left: auto; }
.appbar .tools a { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; color: var(--mat-soft); text-decoration: none; font-weight: 600; border-radius: 3px; }
.appbar .tools a:hover { color: var(--mat-ink); background: rgba(255, 255, 255, .06); }
.appbar .tools a.active { color: var(--mat-ink); box-shadow: inset 0 -3px 0 var(--tool); border-radius: 3px 3px 0 0; }
.cube { width: 11px; height: 11px; border-radius: 2px; flex: none; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .22), inset 2px 2px 0 rgba(255, 255, 255, .25); }
.cube.red { background: var(--red); }
.cube.blue { background: var(--blue); }
.cube.yellow { background: var(--yellow); }
.cube.green { background: var(--green-cube); }
.cube.purple { background: var(--purple-cube); }

/* Règle graduée en millimètres sous la barre (1 px ≈ 1 mm affiché, repère tous les 5 et 10). */
.ruler {
  height: 12px; background-color: var(--yellow);
  background-image:
    linear-gradient(90deg, rgba(26, 31, 28, .85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 31, 28, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 31, 28, .35) 1px, transparent 1px);
  background-size: 50px 12px, 25px 8px, 5px 4px;
  background-repeat: repeat-x;
  background-position: 0 0, 0 0, 0 0;
  position: sticky; top: 58px; z-index: 29;
}
body[data-tool="impression"] .ruler { background-color: #E7C25A; }

.subnav { display: flex; gap: .3rem; padding: .6rem clamp(1rem, 3vw, 2rem) 0; max-width: 1400px; margin: 0 auto; }
.subnav a { color: var(--mat-soft); text-decoration: none; padding: .35rem .8rem; border-radius: 3px; font-weight: 600; font-size: .93rem; }
.subnav a:hover { color: var(--mat-ink); background: rgba(255, 255, 255, .06); }
.subnav a.active { color: var(--ink); background: var(--sheet); }

main { max-width: 1400px; margin: 0 auto; padding: 1.8rem clamp(1rem, 3vw, 2rem) 5rem; }
.loading { color: var(--mat-soft); }

/* Textes posés directement sur le tapis */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.page-header h1 { color: var(--mat-ink); }
.subtitle { color: var(--mat-soft); margin: .45rem 0 0; max-width: 62ch; }
.back { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .9rem; text-decoration: none; color: var(--mat-soft); font-weight: 600; font-size: .93rem; }
.back:hover { color: var(--mat-ink); }
.muted { color: var(--muted); font-size: .9rem; }
main > .muted, .page-header .muted, .storage-info { color: var(--mat-soft); }

/* ---------- Boutons ---------- */
button, a.button {
  font: inherit; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 2px solid var(--ink); background: var(--ink); color: var(--sheet);
  padding: .5rem 1.05rem; border-radius: 3px; text-decoration: none; line-height: 1.25;
  transition: background-color .12s, border-color .12s, color .12s;
}
button:hover, a.button:hover { background: #343b37; border-color: #343b37; }
button:active, a.button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.secondary, a.button.secondary { background: var(--sheet); color: var(--ink); border-color: var(--ink); }
button.secondary:hover, a.button.secondary:hover { background: var(--sheet-2); }
button.ghost, a.button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover, a.button.ghost:hover { background: var(--sheet-2); color: var(--ink); border-color: transparent; }
button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover { background: #8f1f18; border-color: #8f1f18; }
.danger-text { color: var(--danger) !important; }
button.small, a.button.small { padding: .25rem .65rem; font-size: .86rem; border-width: 1.5px; }
button.link { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; border-radius: 0; }
button.link:hover { background: none; color: var(--tool); }

/* Boutons sur le tapis (en-têtes de page) */
.page-header button.secondary, .page-header a.button.secondary { background: transparent; color: var(--mat-ink); border-color: var(--mat-soft); }
.page-header button.secondary:hover, .page-header a.button.secondary:hover { background: rgba(255, 255, 255, .08); border-color: var(--mat-ink); }
.page-header button:not(.secondary):not(.print-button), .page-header a.button:not(.secondary) { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
.page-header button:not(.secondary):not(.print-button):hover, .page-header a.button:not(.secondary):hover { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sheet-page :focus-visible { outline: none; }

/* ---------- Feuilles ---------- */
.panel, .empty-state, .table-wrap, .deck-bar, .capacity, .tile, .empty, .item, .printer-card, .test-page {
  background: var(--sheet); color: var(--ink); border-radius: 2px; box-shadow: var(--lift);
}
.panel { padding: 1.4rem 1.5rem; }
.empty-state { text-align: left; padding: 2rem 2.2rem; max-width: 640px; display: grid; grid-template-columns: 150px 1fr; gap: .4rem 1.8rem; align-items: center; }
.empty-state .empty-art { width: 150px; grid-row: span 3; }
.empty-state h2 { margin: 0; }
.empty-state p { color: var(--muted); margin: 0; }
.empty-state .item-actions, .empty-state > button, .empty-state > a.button { justify-self: start; margin-top: .6rem; }
.empty { color: var(--muted); padding: 2rem; }
@media (max-width: 640px) { .empty-state { grid-template-columns: 1fr; } .empty-state .empty-art { grid-row: auto; } }

/* Tuiles (jeux, paquets) : des fiches posées sur le tapis, tranche de couleur à gauche */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.tile { display: flex; flex-direction: column; overflow: hidden; border-left: 6px solid var(--tile-color, var(--tool)); }
.tile-cover { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem .7rem; text-decoration: none; color: inherit; flex: 1; }
.tile-cover:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tile-cover .badge { width: 44px; height: 44px; border-radius: 3px; display: grid; place-items: center; font-weight: 800; font-size: 1.35rem; font-variation-settings: 'wdth' 125; color: #fff; flex: none; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .2), inset 3px 3px 0 rgba(255, 255, 255, .2); }
.tile-cover .mini-card { flex: none; border-radius: 3px; border: 2px solid var(--ink); background: var(--sheet-2); }
.tile-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tile-title strong { font-size: 1.12rem; font-weight: 750; font-variation-settings: 'wdth' 112; overflow-wrap: anywhere; }
.tile-meta { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1.1rem .8rem; }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .45rem .6rem; border-top: 1px dashed var(--rule-strong); }
.tile-actions .spacer { flex: 1; }
.tile.new { background: transparent; box-shadow: none; border: 2px dashed var(--mat-soft); border-left-width: 2px; color: var(--mat-ink); min-height: 140px; align-items: center; justify-content: center; font-weight: 700; gap: .3rem; text-decoration: none; }
.tile.new:hover { border-color: var(--mat-ink); background: rgba(255, 255, 255, .05); }
.tile.new .plus { font-size: 2rem; line-height: 1; font-weight: 400; }

/* Pastilles d'information */
.chip { font-size: .8rem; padding: .1rem .5rem; border-radius: 3px; background: var(--sheet-2); border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; font-weight: 550; }
.chip.sage { background: var(--verso-soft); border-color: #c4d8ce; color: var(--verso); }
.chip.accent { background: var(--recto-soft); border-color: #eec4bf; color: var(--recto); }
.chip.warn { background: var(--warning-bg); border-color: #f0d68a; color: var(--warning); }
.tag { display: inline-block; font-size: .74rem; padding: .05rem .45rem; border-radius: 3px; background: var(--sheet-2); border: 1px solid var(--rule); color: var(--muted); margin-left: .5rem; vertical-align: middle; font-weight: 550; }

/* Listes simples */
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.item { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; }
.item-main { flex: 1; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
.item-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.item-actions.center { justify-content: flex-start; }

/* ---------- Fenêtres ---------- */
dialog.modal { border: none; border-radius: 2px; padding: 1.6rem 1.8rem; width: min(500px, 92vw); background: var(--sheet); color: var(--ink); box-shadow: 0 24px 60px rgba(4, 24, 18, .45); }
dialog.modal::backdrop { background: rgba(10, 34, 28, .62); }
dialog.modal[open] { animation: lay-down .16s ease-out; }
@keyframes lay-down { from { transform: translateY(6px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.modal input[type=text]:not(.num) { width: 100%; }
dialog.wide { width: min(660px, 94vw); }
.actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.4rem; align-items: center; }
.actions .spacer { flex: 1; }
.actions.choices { flex-wrap: wrap; }
.dialog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* ---------- Formulaires ---------- */
input[type=text], input[type=number], input[type=search], select, textarea {
  font: inherit; padding: .48rem .65rem; border: 1.5px solid var(--rule-strong); border-radius: 2px; background: #fff; color: var(--ink);
}
input[type=text]:focus, input[type=search]:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--tool) 35%, transparent); outline-offset: 0; }
textarea { width: 100%; resize: vertical; line-height: 1.45; }
input.num { width: 5.6rem; text-align: right; }
input.invalid { border-color: var(--danger); background: var(--error-bg); }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
input[type=checkbox] { width: 1rem; height: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field > label, .field > .label { font-weight: 650; font-size: .92rem; }
.field .hint, .hint { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.pair { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.checkbox { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.form-section { font-size: 1rem; font-weight: 800; font-variation-settings: 'wdth' 112; margin: 1.5rem 0 .8rem; display: flex; align-items: center; gap: .7rem; }
.form-section::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-strong); }
.form-section:first-child { margin-top: 0; }
.sub-field { margin-top: -.4rem; padding: .75rem .9rem; background: var(--sheet-2); border-left: 3px solid var(--rule-strong); }

/* Interrupteur à deux positions : comme deux jetons côte à côte */
.segmented { align-self: flex-start; display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.segmented button { background: var(--sheet); color: var(--ink); border: none; border-radius: 0; padding: .4rem .9rem; font-weight: 600; }
.segmented button + button { border-left: 1.5px solid var(--ink); }
.segmented button:hover { background: var(--sheet-2); }
.segmented button.on { background: var(--ink); color: var(--sheet); }

/* Onglets (configuration d'un paquet) */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--ink); margin: -.3rem 0 1.3rem; }
button.tab { background: none; border: none; border-radius: 0; color: var(--muted); padding: .55rem 1rem; font-size: 1rem; font-weight: 750; font-variation-settings: 'wdth' 112; margin-bottom: -2px; border-bottom: 4px solid transparent; }
button.tab:hover { background: none; color: var(--ink); }
button.tab.on { color: var(--ink); border-bottom-color: var(--tool); }
.tab-note { margin: .2rem 0 1rem; }
details.advanced { border-top: 1px dashed var(--rule-strong); margin-top: .75rem; padding-top: 1rem; }
details.advanced summary { cursor: pointer; font-weight: 650; }

/* ---------- Messages ---------- */
.msg { border-radius: 2px; padding: .6rem .85rem; font-size: .9rem; margin: .4rem 0; line-height: 1.45; border-left: 4px solid; color: var(--ink); }
.msg.error { background: var(--error-bg); border-color: var(--danger); }
.msg.warning { background: var(--warning-bg); border-color: #D9A21B; }
.msg.info { background: var(--info-bg); border-color: var(--info); }
.msg.tip { background: var(--sheet); border-color: var(--tool); }
.msg strong { font-weight: 700; }
.error { background: var(--error-bg); color: var(--danger); padding: 1rem; border-radius: 2px; }
.msg.notice { display: flex; align-items: flex-start; gap: .75rem; justify-content: space-between; }
.msg.notice ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.notice-area:empty { display: none; }
.progress-msg { display: flex; align-items: center; gap: 1rem; }
.progress-msg .progress { flex: 1; max-width: 360px; }
.progress { height: 8px; background: var(--sheet-2); overflow: hidden; border: 1px solid var(--rule-strong); min-width: 120px; }
.progress > span { display: block; height: 100%; background: var(--ink); transition: width .2s; }

/* ---------- Formats de cartes ---------- */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table.formats { width: 100%; border-collapse: collapse; }
table.formats th, table.formats td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); font-size: .93rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.formats th { font-weight: 700; color: var(--muted); font-size: .84rem; border-bottom: 2px solid var(--ink); }
table.formats td:first-child { white-space: normal; font-weight: 650; }
table.formats tr:last-child td { border-bottom: none; }
table.formats tbody tr:hover { background: var(--sheet-2); }
.row-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.bleed { background: var(--sheet-2); border-left: 3px solid var(--verso); padding: .5rem .8rem; font-size: .88rem; margin: .2rem 0; font-variant-numeric: tabular-nums; }

/* ---------- Configuration d'un paquet ---------- */
.deck-editor { display: grid; grid-template-columns: minmax(340px, 440px) 1fr; gap: 2rem; align-items: start; }
.deck-preview { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.capacity { padding: .9rem 1.1rem; display: flex; align-items: center; gap: 1rem; }
.capacity .big { font-size: 2.6rem; font-weight: 800; font-variation-settings: 'wdth' 125; line-height: 1; color: var(--ink); }
.capacity-main { font-size: 1.08rem; font-weight: 750; }
@media (max-width: 900px) { .deck-editor { grid-template-columns: 1fr; } .deck-preview { position: static; } }

/* ---------- Planches : posées directement sur le tapis ---------- */
.table-top { padding: .4rem 0; }
.sheet-row { display: flex; gap: 1.8rem; flex-wrap: wrap; align-items: flex-start; }
figure.sheet { margin: 0; }
figure.sheet figcaption { color: var(--mat-ink); font-weight: 700; margin-bottom: .5rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
figure.sheet figcaption::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--recto); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .22); }
figure.sheet.verso figcaption::before { background: var(--sheet); }
.sheet-page { display: block; height: auto; background: #fff; box-shadow: var(--lift); }
.deck-preview .sheet-page { width: calc(var(--page-w) * 1.5px); max-width: 100%; }
.sheets .sheet-page { width: calc(var(--page-scale, 1.6) * var(--page-w) * 1px); }
.sheets { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.4rem; }
.sheet-block { overflow-x: auto; padding-bottom: .4rem; }
.sheet-block-header { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; color: var(--mat-ink); border-bottom: 1px dashed var(--mat-soft); padding-bottom: .5rem; }
.sheet-block-header h2 { margin: 0; font-size: 1.15rem; }
.sheet-block-header .spacer { flex: 1; }
.sheet-block-header .chip { background: transparent; color: var(--mat-ink); border-color: var(--mat-soft); }
.sheet-block-header .chip.sage { background: var(--sheet); color: var(--verso); border-color: var(--sheet); }
.sheet-block-header button.ghost { color: var(--mat-soft); }
.sheet-block-header button.ghost:hover { color: var(--mat-ink); background: rgba(255, 255, 255, .08); }
.deck-bar { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: .8rem 1.1rem; margin-bottom: .7rem; }
.deck-bar .counter { font-weight: 650; font-variant-numeric: tabular-nums; }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.zoom { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }
button.add-sheet { width: 100%; justify-content: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; background: transparent; color: var(--mat-ink); border: 2px dashed var(--mat-soft); border-radius: 2px; }
button.add-sheet:hover { background: rgba(255, 255, 255, .05); border-color: var(--mat-ink); }
button.add-sheet .plus { font-size: 2.2rem; line-height: 1; font-weight: 400; }
button.add-sheet > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
button.add-sheet strong { font-size: 1.1rem; font-variation-settings: 'wdth' 118; }
button.add-sheet small { font-weight: 400; color: var(--mat-soft); }
button.print-button { background: var(--red); border-color: var(--red); color: #fff; }
button.print-button:hover { background: #a92c24; border-color: #a92c24; }

/* Emplacements interactifs (SVG) */
.slot-hit { fill: transparent; stroke: none; }
.sheet-page.interactive .slot { cursor: pointer; }
.sheet-page.interactive .slot:hover .slot-hit { fill: rgba(26, 31, 28, .06); stroke: var(--ink); stroke-width: .8; }
.sheet-page .slot.selected .slot-hit { fill: rgba(200, 55, 45, .12); stroke: var(--red); stroke-width: 1.4; }
.sheet-page .slot.linked .slot-hit { fill: rgba(226, 174, 31, .22); stroke: #B38512; stroke-width: 1.6; }
.sheet-page .slot.drag-source { opacity: .35; }
.sheet-page .slot.drop-target .slot-hit { fill: rgba(226, 174, 31, .28); stroke: #B38512; stroke-width: 1.8; }
.sheet-page .slot.empty { opacity: .4; }
.sheet-page .slot.level-error .slot-hit { stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 3 1.5; }
.sheet-page .slot.level-warning .slot-hit { stroke: #D9A21B; stroke-width: 1.2; stroke-dasharray: 3 1.5; }
.sheet-page.dragging { cursor: grabbing; }

details.back-advice summary { cursor: pointer; }
details.back-advice p { margin: .5rem 0 .1rem; }
.undo-button { white-space: nowrap; }

/* ---------- Panneau « Carte » ---------- */
.deck-view { position: relative; }
.deck-view.with-drawer { padding-right: 410px; }
.drawer { position: fixed; top: 70px; right: 0; bottom: 0; width: 390px; background: var(--sheet); color: var(--ink); border-left: 2px solid var(--ink); box-shadow: -12px 0 30px rgba(4, 24, 18, .3); overflow-y: auto; padding: 1.2rem 1.3rem 2rem; z-index: 20; animation: slide-in .18s ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.drawer-header h2 { margin: 0; }
.drawer-section { border-top: 1px dashed var(--rule-strong); padding: 1rem 0; }
.side-title { display: flex; align-items: center; gap: .45rem; }
.side-title::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--recto); }
.side-title.verso::before { background: var(--verso); }
.drawer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.drawer-tip { margin-top: .5rem; }
.image-block { display: flex; gap: .9rem; align-items: flex-start; }
.image-block img { width: 110px; max-height: 160px; object-fit: contain; background: var(--sheet-2); box-shadow: var(--lift-small); }
.image-info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.image-info strong { overflow-wrap: anywhere; font-size: .92rem; }
.image-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.dropzone { border: 2px dashed var(--rule-strong); padding: 1.2rem; text-align: center; color: var(--muted); background: var(--sheet-2); }
.dropzone p { margin: 0 0 .7rem; }
.dropzone.over { border-color: var(--ink); background: #FFF6DB; color: var(--ink); }

.drop-overlay { display: none; position: fixed; inset: 70px 0 0 0; border: 3px dashed var(--yellow); background: rgba(226, 174, 31, .08); z-index: 25; pointer-events: none; justify-content: center; align-items: flex-start; padding-top: 1rem; }
.drop-banner { display: flex; flex-direction: column; align-items: center; gap: .2rem; background: var(--yellow); color: var(--ink); padding: .7rem 1.4rem; box-shadow: var(--lift); text-align: center; }
.drop-banner strong { font-size: 1.15rem; font-variation-settings: 'wdth' 118; }
.deck-view.file-over .drop-overlay { display: flex; }

dialog.large-modal { width: min(900px, 94vw); }
.large-view { display: grid; place-items: center; background: var(--mat); padding: 1.2rem; }
img.large { max-width: 100%; max-height: 70vh; object-fit: contain; box-shadow: var(--lift); }
.back-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; max-height: 50vh; overflow-y: auto; padding: .2rem; }
button.back-choice { flex-direction: column; background: var(--sheet-2); color: var(--ink); border: 2px solid var(--rule); padding: .6rem; font-weight: 500; }
button.back-choice:hover { border-color: var(--ink); background: var(--sheet); }
button.back-choice img { width: 90px; max-height: 120px; object-fit: contain; }
button.back-choice strong { font-size: .8rem; overflow-wrap: anywhere; text-align: center; }

/* ---------- Fenêtre « Gérer les cartes » ---------- */
dialog.cards-window { width: min(860px, 95vw); max-height: 90vh; display: flex; flex-direction: column; }
dialog.cards-window:not([open]) { display: none; }
.cw-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.cw-header p { margin: .3rem 0 .8rem; max-width: 520px; }
.cw-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cw-actions .over, .cw-common.over { outline: 3px solid var(--yellow); }
.cw-common { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border: 2px dashed var(--rule-strong); background: var(--verso-soft); margin-bottom: .6rem; }
.cw-common > div { flex: 1; }
.cards-list { overflow-y: auto; flex: 1; min-height: 120px; border: 1.5px solid var(--ink); background: var(--sheet); }
.cw-row { display: grid; grid-template-columns: 70px 1fr 1fr 40px; gap: .6rem; align-items: center; padding: .45rem .7rem; border-bottom: 1px solid var(--rule); }
.cw-row.no-back { grid-template-columns: 70px 1fr 40px; }
.cw-row:last-child { border-bottom: none; }
.cw-head { position: sticky; top: 0; background: var(--sheet-2); z-index: 1; font-size: .84rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); }
.cw-num { display: flex; flex-direction: column; line-height: 1.1; }
.cw-num strong { font-size: 1.2rem; font-variation-settings: 'wdth' 118; font-variant-numeric: tabular-nums; }
.cw-num small { color: var(--muted); font-size: .74rem; }
.cw-cell { display: flex; align-items: center; gap: .6rem; padding: .3rem; border: 2px solid transparent; cursor: pointer; min-width: 0; }
.cw-cell:hover { background: var(--sheet-2); border-color: var(--rule); }
.cw-cell.over { border-color: var(--ink); background: #FFF6DB; }
.cw-cell.empty-cell { border: 2px dashed var(--rule-strong); color: var(--muted); }
.cw-cell.missing { border-color: #E39C93; background: var(--error-bg); color: var(--danger); }
.cw-cell.common { cursor: default; color: var(--muted); }
.cw-cell.common:hover { background: none; border-color: transparent; }
.cw-thumb { width: 44px; height: 60px; object-fit: contain; background: #fff; box-shadow: var(--lift-small); flex: none; }
.cw-placeholder { width: 44px; height: 60px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; flex: none; }
.cw-name { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-empty { padding: 2rem; color: var(--muted); }
.cw-footer { margin-top: 1rem; }
.update-list { margin: .3rem 0 .8rem; padding-left: 1.2rem; max-height: 180px; overflow-y: auto; font-size: .9rem; }

/* ---------- Vérifications ---------- */
button.status { padding: .32rem .8rem; font-size: .88rem; gap: .45rem; border-width: 1.5px; }
button.status .status-icon { width: 1.2rem; height: 1.2rem; border-radius: 2px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; }
button.status-ok, button.status-ok:hover { background: var(--ok-bg); color: var(--ok); border-color: #b9d6c3; }
button.status-ok .status-icon { background: var(--ok); }
button.status-warning, button.status-warning:hover { background: var(--warning-bg); color: var(--warning); border-color: #ecd083; }
button.status-warning .status-icon { background: #C68E10; }
button.status-error, button.status-error:hover { background: var(--error-bg); color: var(--danger); border-color: #ecbab3; }
button.status-error .status-icon { background: var(--danger); }
dialog.checks-modal { width: min(760px, 95vw); max-height: 90vh; overflow-y: auto; }
.checks-summary { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; margin-bottom: .8rem; border-left: 4px solid; }
.checks-summary.status-ok { background: var(--ok-bg); border-color: var(--ok); }
.checks-summary.status-warning { background: var(--warning-bg); border-color: #D9A21B; }
.checks-summary.status-error { background: var(--error-bg); border-color: var(--danger); }
.dpi-setting { margin-bottom: .8rem; font-size: .9rem; color: var(--muted); }
.issue-group h3 { margin: 1.1rem 0 .5rem; }
.issue { display: flex; gap: .8rem; padding: .7rem .8rem; background: var(--sheet-2); border-left: 4px solid var(--rule-strong); margin-bottom: .5rem; }
.issue-error { border-left-color: var(--danger); }
.issue-warning { border-left-color: #D9A21B; }
.issue-info { border-left-color: var(--info); }
.issue-thumb { width: 42px; height: 58px; object-fit: contain; background: #fff; box-shadow: var(--lift-small); flex: none; }
.issue-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--rule-strong); margin-top: .35rem; flex: none; }
.issue-error .issue-dot { background: var(--danger); }
.issue-warning .issue-dot { background: #D9A21B; }
.issue-info .issue-dot { background: var(--info); }
.issue-body { flex: 1; min-width: 0; }
.issue-title { font-weight: 650; font-size: .93rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; overflow-wrap: anywhere; }
.issue-level { font-size: .78rem; color: var(--muted); font-weight: 600; }
.issue-detail { margin: .3rem 0 0; font-size: .86rem; color: var(--muted); }
.issue-cards { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
button.chip-button { font-size: .78rem; padding: .12rem .5rem; background: var(--sheet); border: 1px solid var(--rule-strong); color: var(--ink); font-weight: 550; }
button.chip-button:hover { border-color: var(--ink); background: var(--sheet); }
.issue-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.issue-actions button.on { background: var(--ink); color: var(--sheet); }
.drawer-issues .issue { margin-bottom: .4rem; }

/* ---------- Impression (PDF) ---------- */
dialog.export-modal { width: min(680px, 95vw); max-height: 92vh; overflow-y: auto; }
dialog.pro-modal { width: min(860px, 96vw); }
.recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: .5rem 0 1rem; border: 1.5px solid var(--ink); }
.recap > div { padding: .6rem; display: flex; flex-direction: column; }
.recap > div + div { border-left: 1px dashed var(--rule-strong); }
.recap strong { font-size: 1.7rem; font-weight: 800; font-variation-settings: 'wdth' 125; line-height: 1.1; }
.recap span { font-size: .8rem; color: var(--muted); }
@media (max-width: 560px) { .recap { grid-template-columns: repeat(2, 1fr); } }
.export-body .field { margin-bottom: .9rem; }
.export-body .checkbox { margin-bottom: .7rem; }
.sheet-choice { margin: .3rem 0 .8rem; }
.sheet-choice summary { cursor: pointer; font-weight: 650; }
.sheet-checks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; }
.export-results .item-actions { margin-top: .5rem; }
.reinsert-note { line-height: 1.45; }
.pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.2rem; }
.pro-checks { display: flex; flex-direction: column; gap: .4rem; grid-column: 1 / -1; margin-bottom: .8rem; }
.pro-preview { margin: .4rem 0 .8rem; }
.pro-preview .table-top { background: var(--mat); padding: 1rem; }
.pro-preview .table-top figcaption { color: var(--mat-ink); }
.pro-preview .sheet-page { width: calc(var(--page-w) * 1.2px); max-width: 100%; }
.pro-cards { display: flex; gap: 1rem; }
.pro-card { margin: 0; }
.pro-card img { width: 120px; box-shadow: var(--lift-small); background: #fff; }
.pro-card figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* ---------- Mon imprimante ---------- */
.printer-layout { display: grid; gap: 1.4rem; max-width: 980px; }
.printer-card { padding: 1.4rem 1.5rem; }
.printer-card h2 { margin-bottom: .4rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 1.5rem; margin-top: 1rem; align-items: start; }
.test-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0 .5rem; }
.test-page { padding: 1rem 1.1rem; box-shadow: none; background: var(--sheet-2); border-top: 3px solid var(--ink); }
.margin-answer { margin-top: .8rem; font-size: .88rem; }
ol.wizard { padding-left: 1.4rem; margin: 1rem 0 0; display: grid; gap: 1.3rem; }
ol.wizard > li::marker { font-weight: 800; font-variation-settings: 'wdth' 125; }
ol.wizard > li > strong { display: block; margin-bottom: .45rem; font-variation-settings: 'wdth' 110; }
ol.wizard select { max-width: 100%; }
.question { display: flex; flex-direction: column; gap: .35rem; margin: .6rem 0; font-size: .93rem; }
.wizard-result ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.reinsert-field { margin-top: .9rem; max-width: 640px; }

/* ---------- Sauvegarde ---------- */
.storage-info { margin-top: 2rem; max-width: 70ch; font-size: .88rem; }
.home { min-height: 60vh; }
.home.project-over { outline: 3px dashed var(--yellow); outline-offset: 8px; }
.backup-status { margin-bottom: 1.2rem; max-width: 70ch; }

/* =================================================================
   Accueil de la boîte à outils
   ================================================================= */
.atelier { display: grid; gap: 2.2rem; }
.atelier-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; padding: 1.5rem 0 .5rem; border-bottom: 1px dashed var(--mat-soft); }
.atelier-hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .92; font-weight: 900; font-variation-settings: 'wdth' 125; letter-spacing: -.02em; color: var(--mat-ink); }
.atelier-hero p { color: var(--mat-soft); font-size: 1.08rem; max-width: 46ch; margin: 1rem 0 1.2rem; }
.atelier-hero .measure { color: var(--mat-soft); font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.6; padding-bottom: 1.2rem; }
.atelier-hero .measure strong { display: block; color: var(--mat-ink); font-size: 2rem; font-variation-settings: 'wdth' 125; font-weight: 800; line-height: 1; }
@media (max-width: 760px) { .atelier-hero { grid-template-columns: 1fr; } .atelier-hero .measure { text-align: left; } }

.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1.4rem; align-items: stretch; }
.tool-card { container-type: inline-size; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--sheet); color: var(--ink); text-decoration: none; box-shadow: var(--lift); border-top: 10px solid var(--c); padding: 1.3rem 1.4rem 1.2rem; min-height: 290px; position: relative; }
.tool-card:nth-child(2) { transform: rotate(.35deg); }
.tool-card:nth-child(3) { transform: rotate(-.3deg); }
.tool-card:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 14px 28px rgba(4, 24, 18, .38); }
.tool-card:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--c); }
.tool-card .tool-icon { margin-bottom: .9rem; }
.tool-card h2 { font-size: clamp(1.35rem, 8.5cqi, 1.9rem); overflow-wrap: anywhere; hyphens: manual; font-weight: 900; font-variation-settings: 'wdth' 125; margin: 0 0 .5rem; letter-spacing: -.01em; }
.tool-card p { color: var(--muted); margin: 0 0 1rem; }
.tool-card ul { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .93rem; }
.tool-card li { padding-left: 1.1rem; position: relative; }
.tool-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--c); border-radius: 1px; }
.tool-card .open { font-weight: 750; display: flex; align-items: center; gap: .5rem; border-top: 1px dashed var(--rule-strong); padding-top: .8rem; }
.atelier-note { color: var(--mat-soft); font-size: .9rem; max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tool-card:nth-child(n) { transform: none; }
}
@media (max-width: 720px) {
  .appbar { gap: .8rem; height: auto; min-height: 58px; flex-wrap: wrap; padding-top: .4rem; padding-bottom: .4rem; }
  .appbar .tools { margin-left: 0; overflow-x: auto; }
  .brand-name { font-size: 1rem; }
  .ruler { top: auto; position: static; }
  .deck-view.with-drawer { padding-right: 0; }
  .drawer { width: 100%; }
}

/* =================================================================
   Outil Mécaniques
   ================================================================= */
.meca-draw { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); border-top: 10px solid var(--blue); padding: 1.3rem 1.5rem 1.4rem; margin-bottom: 2rem; }
.meca-draw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.meca-draw-controls h2 { margin: 0; flex-basis: 100%; }
.meca-draw-controls .hint { flex: 1 1 260px; }
.stepper { display: inline-flex; align-items: center; gap: .4rem; }
.stepper output { min-width: 1.6rem; text-align: center; font-size: 1.4rem; font-weight: 800; font-variation-settings: 'wdth' 125; }
.stepper button { width: 2rem; height: 2rem; padding: 0; font-size: 1.1rem; }
.meca-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.meca-pick { border: 1.5px solid var(--ink); border-left: 8px solid var(--fam); padding: .8rem .9rem .7rem; display: flex; flex-direction: column; gap: .2rem; background: var(--sheet); animation: deal .22s ease-out backwards; }
.meca-pick:nth-child(2) { animation-delay: .05s; }
.meca-pick:nth-child(3) { animation-delay: .1s; }
.meca-pick:nth-child(4) { animation-delay: .15s; }
@keyframes deal { from { transform: translateY(-8px) rotate(-1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.meca-pick h3 { font-size: 1.25rem; margin: 0; }
.meca-pick h3 button.link { text-decoration: none; text-align: left; font-weight: 800; }
.meca-pick h3 button.link:hover { text-decoration: underline; color: var(--ink); }
.meca-pick p { color: var(--muted); font-size: .9rem; margin: .2rem 0 .4rem; flex: 1; }
.meca-pick .keep { font-size: .86rem; color: var(--muted); }
.meca-family { color: var(--fam); font-size: .84rem; font-weight: 700; }
.meca-en { color: var(--muted); font-size: .84rem; font-style: italic; }

.meca-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.meca-toolbar input { flex: 1; max-width: 560px; font-size: 1.05rem; padding: .65rem .85rem; border: 2px solid var(--ink); }
.meca-count { color: var(--mat-soft); font-variant-numeric: tabular-nums; }
.meca-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; align-items: center; }
button.fam-chip { background: transparent; color: var(--mat-ink); border: 1.5px solid var(--mat-soft); padding: .3rem .7rem; font-size: .86rem; font-weight: 600; gap: .45rem; }
button.fam-chip:hover { background: rgba(255, 255, 255, .08); border-color: var(--mat-ink); }
button.fam-chip[aria-pressed="true"] { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
.fam-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--fam); flex: none; }
.meca-chips .clear { color: var(--mat-ink); margin-left: .4rem; }
.meca-chips .clear:hover { color: var(--mat-ink); }

/* Familles : des fiches de classeur, tranche de couleur à gauche, en colonnes */
.meca-families { column-width: 340px; column-gap: 1.4rem; }
.meca-family-sheet { break-inside: avoid; background: var(--sheet); color: var(--ink); box-shadow: var(--lift); border-left: 8px solid var(--fam); margin: 0 0 1.4rem; }
.meca-family-sheet header { padding: 1rem 1.1rem .6rem; border-bottom: 2px solid var(--ink); }
.meca-family-sheet h2 { margin: 0 0 .15rem; font-size: 1.2rem; }
.meca-family-sheet header p { margin: 0; color: var(--muted); font-size: .86rem; }
.meca-family-sheet ul { list-style: none; margin: 0; padding: .3rem 0; }
.meca-family-sheet li + li { border-top: 1px dashed var(--rule); }
button.meca-item { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; width: 100%; text-align: left; background: transparent; color: var(--ink); border: none; border-radius: 0; padding: .5rem 1.1rem; font-weight: 400; }
button.meca-item:hover { background: var(--sheet-2); }
button.meca-item strong { font-weight: 700; }
.meca-desc { color: var(--muted); font-size: .88rem; }
.has-note { color: var(--blue); }
.meca-source { color: var(--mat-soft); font-size: .84rem; max-width: 72ch; }

dialog.meca-modal { width: min(560px, 94vw); border-top: 10px solid var(--blue); }
.meca-sheet h2 { font-size: 1.8rem; margin: .1rem 0 .1rem; }
.meca-sheet .meca-en { margin: 0 0 .8rem; }
.meca-sheet-desc { font-size: 1.05rem; }
.meca-notes { margin-top: 1.2rem; }
.meca-related { margin-top: .4rem; }
.meca-related summary { cursor: pointer; font-weight: 650; }
.meca-related ul { columns: 2; padding-left: 1.1rem; font-size: .9rem; }

/* Caractéristiques d'un paquet, sous son nom */
.deck-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.fact { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--mat-ink); border: 1.5px solid var(--mat-soft); border-radius: 3px; padding: .2rem .6rem; font-weight: 650; font-size: .9rem; font-variant-numeric: tabular-nums; }
.fact small { color: var(--mat-soft); font-weight: 450; font-size: .82rem; }

/* =================================================================
   Outil Combinatoire
   ================================================================= */
.combi-tabs { display: flex; gap: .3rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.combi-tabs button { background: transparent; color: var(--mat-ink); border: 1.5px solid var(--mat-soft); font-weight: 700; font-variation-settings: 'wdth' 112; }
.combi-tabs button:hover { background: rgba(255, 255, 255, .08); border-color: var(--mat-ink); }
.combi-tabs button.on { background: var(--sheet); color: var(--ink); border-color: var(--sheet); box-shadow: inset 0 -4px 0 var(--tool); }
.combi-sheet { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); border-top: 10px solid var(--yellow); padding: 1.4rem 1.6rem 1.5rem; max-width: 980px; }
.combi-stack { display: grid; gap: 1.6rem; }
.combi-sheet h2 { margin-bottom: .5rem; }

input.dice-input { font-size: 1.6rem; font-weight: 700; font-variation-settings: 'wdth' 112; padding: .45rem .7rem; border: 2px solid var(--ink); max-width: 420px; width: 100%; letter-spacing: .02em; }
.examples { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .3rem; }
button.example { background: var(--sheet-2); color: var(--ink); border: 1px solid var(--rule-strong); padding: .2rem .55rem; font-size: .84rem; font-weight: 550; }
button.example:hover { background: #FFF3CF; border-color: var(--ink); }
.notation-help summary { cursor: pointer; font-weight: 600; font-size: .9rem; margin-top: .3rem; }
.notation-help ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .9rem; line-height: 1.7; }
code { font-family: var(--font); font-weight: 700; font-variation-settings: 'wdth' 100; background: #FFF3CF; padding: .05rem .3rem; border-radius: 2px; }

.combi-result { margin-top: .6rem; }
.answer { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: .8rem; }
.answer-value { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 900; font-variation-settings: 'wdth' 125; line-height: 1; letter-spacing: -.02em; }
.answer-text { color: var(--muted); max-width: 52ch; font-size: 1rem; }
.answer.small .answer-value { font-size: 2.2rem; }
dl.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1rem; border: 1.5px solid var(--ink); width: fit-content; }
dl.stats > div { padding: .45rem .9rem; }
dl.stats > div + div { border-left: 1px dashed var(--rule-strong); }
dl.stats dt { font-size: .8rem; color: var(--muted); }
dl.stats dd { margin: 0; font-weight: 750; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Graphique : une seule série ; valeurs comptées à l'encre, les autres en gris */
.chart { position: relative; }
.bar-chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.bar-chart .grid { stroke: #E3E7E4; stroke-width: 1; }
.bar-chart .axis { stroke: #8F9A94; stroke-width: 1; }
.bar-chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-chart .axis-title { fill: var(--muted); font-size: 12px; font-weight: 600; }
.bar-chart .bar path { fill: #A9B3AD; }
.bar-chart .bar.on path { fill: var(--ink); }
.bar-chart .bar .hit { fill: transparent; }
.bar-chart .bar:hover .hit, .bar-chart .bar:focus .hit { fill: rgba(226, 174, 31, .18); }
.bar-chart .bar:focus { outline: none; }
.chart-tip { position: absolute; transform: translate(-50%, calc(-100% - 8px)); background: var(--ink); color: var(--sheet); padding: .3rem .55rem; font-size: .84rem; white-space: nowrap; pointer-events: none; border-radius: 2px; font-variant-numeric: tabular-nums; }
.value-table { margin-top: .6rem; }
.value-table summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.value-table table, table.turn-table { border-collapse: collapse; margin-top: .5rem; font-variant-numeric: tabular-nums; font-size: .9rem; }
.value-table th, .value-table td, table.turn-table th, table.turn-table td { padding: .3rem .9rem .3rem 0; text-align: right; border-bottom: 1px solid var(--rule); }
.value-table th:first-child, .value-table td:first-child, table.turn-table th:first-child, table.turn-table td:first-child { text-align: left; }
.value-table th, table.turn-table th { font-size: .82rem; color: var(--muted); border-bottom: 2px solid var(--ink); }
.value-table tr.on td { font-weight: 700; }
table.turn-table { width: 100%; max-width: 640px; }
table.turn-table td:last-child { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.meter { display: inline-block; width: 140px; height: 8px; background: #E3E7E4; }
.meter span { display: block; height: 100%; background: var(--ink); }

.draw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem 1.2rem; margin: .8rem 0 .4rem; }
.draw-field { display: flex; flex-direction: column; gap: .3rem; font-weight: 650; font-size: .9rem; }
.draw-field input.num { width: 7rem; font-size: 1.15rem; font-weight: 700; }
.sort-rows { display: grid; gap: .5rem; margin: .6rem 0 .8rem; }
.sort-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sort-row input[type=text]:not(.num) { width: 12rem; }

.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; max-width: 1100px; }
.count-card { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); border-top: 6px solid var(--yellow); padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.count-card h3 { font-size: 1.2rem; margin: 0; }
.count-card .hint { margin: 0 0 .4rem; }
.count-result { border-top: 1px dashed var(--rule-strong); padding-top: .7rem; margin-top: auto; }
.count-value { display: block; font-size: 1.9rem; font-weight: 900; font-variation-settings: 'wdth' 118; line-height: 1.1; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.count-exact { display: block; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; margin-top: .3rem; font-variant-numeric: tabular-nums; }
input.list-input { width: 100%; }

/* Boîte de rangement */
dialog.box-modal { width: min(760px, 95vw); max-height: 92vh; overflow-y: auto; }
.box-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem 1rem; margin: .8rem 0 .3rem; }
.box-fields .wide { grid-column: 1 / -1; }
.box-fields .draw-field input.num { width: 6.5rem; }
.box-size { margin: .8rem 0 .6rem; font-variant-numeric: tabular-nums; }
.box-sheet { background: var(--mat); padding: 1rem; display: grid; place-items: center; }
.box-preview { width: min(100%, 420px); height: auto; box-shadow: var(--lift); }
.box-preview .cut { stroke: var(--ink); stroke-width: .5; }
.box-preview .fold { stroke: #8F9A94; stroke-width: .5; stroke-dasharray: 2 1.5; }
.box-preview .front-face { fill: rgba(200, 55, 45, .07); stroke: none; }

/* Page « Boîtes » */
.box-form h2 { margin-bottom: .8rem; }
.box-form .box-h2 { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--rule-strong); }
.box-side { position: sticky; top: 90px; display: grid; gap: 1rem; }
.box-summary { padding: 1rem 1.2rem; }
.box-summary p { margin-bottom: .4rem; }
.box-total { font-size: 1.15rem; }
.box-total strong { font-size: 1.6rem; font-variation-settings: 'wdth' 125; font-weight: 900; }
.box-stage { display: grid; place-items: start; }
.box-stage .box-preview { width: min(100%, 520px); }
ul.deck-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
ul.deck-picks li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .45rem .6rem; background: var(--sheet-2); border-left: 3px solid var(--red); }
ul.deck-picks small { color: var(--muted); }
ul.deck-picks input.num { width: 4.5rem; }
@media (max-width: 900px) { .box-side { position: static; } }

/* Menus en fenêtre étroite : une seule ligne qui défile, sans barre visible */
.subnav { overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar, .appbar .tools::-webkit-scrollbar { display: none; }
.subnav a, .appbar .tools a { white-space: nowrap; }
.appbar .tools { scrollbar-width: none; }

/* Gabarits Illustrator (page Formats de cartes) */
.templates { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); padding: 1.2rem 1.4rem; margin-top: 1.6rem; border-top: 6px solid var(--red); }
.template-list { list-style: none; padding: 0; margin: 0; }
.template-list li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--rule); }
.template-list li:last-child { border-bottom: none; }
.template-name { font-weight: 650; flex: 1; overflow-wrap: anywhere; }

/* Générateur de contraintes */
.challenge-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; color: var(--mat-ink); margin-bottom: 1.2rem; }
.challenge-controls .stepper button.secondary { background: var(--sheet); }
.challenge-controls .page-like { color: var(--mat-ink); }
.challenge-controls > button:not(.secondary) { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
.challenge-controls > button.secondary { background: transparent; color: var(--mat-ink); border-color: var(--mat-soft); }
.challenge-card { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); max-width: 900px; border-top: 10px solid var(--blue); animation: deal .25s ease-out; }
.ch-theme { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem 1rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 2px solid var(--ink); }
.ch-theme .ch-label { grid-column: 1 / -1; color: var(--muted); font-size: .86rem; font-weight: 600; }
.ch-theme h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; font-variation-settings: 'wdth' 125; margin: 0; line-height: 1.02; letter-spacing: -.01em; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; border-bottom: 1px dashed var(--rule-strong); }
.ch-row { padding: .8rem 1.5rem; display: flex; flex-direction: column; gap: .15rem; border-right: 1px dashed var(--rule); }
.ch-row dt { color: var(--muted); font-size: .84rem; font-weight: 600; }
.ch-row dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.ch-block { padding: 1rem 1.5rem; }
.ch-block + .ch-block { border-top: 1px dashed var(--rule-strong); }
.ch-block h3 { font-size: .95rem; color: var(--muted); font-variation-settings: 'wdth' 100; font-weight: 650; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ch-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ch-list li .keep-toggle, .ch-row .keep-toggle, .ch-theme .keep-toggle { margin-left: auto; }
.ch-list button.link { font-size: 1.05rem; font-weight: 750; text-decoration: none; }
.ch-list button.link:hover { text-decoration: underline; color: var(--ink); }
.ch-constraint span:first-child { font-size: 1.1rem; font-weight: 750; border-left: 4px solid var(--yellow); padding-left: .6rem; }
.keep-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ch-empty { color: var(--mat-soft); max-width: 62ch; }
.ch-custom, .ch-catalog { margin-top: 1.6rem; color: var(--mat-ink); max-width: 900px; }
.ch-custom summary, .ch-catalog summary { cursor: pointer; font-weight: 700; }
.ch-custom .hint { color: var(--mat-soft); }
.ch-custom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .6rem; }
.ch-custom-grid label { color: var(--mat-ink); }
.ch-custom-grid .hint { color: var(--mat-soft); }
.ch-catalog > div { column-width: 260px; }
.ch-catalog h3 { margin: 1rem 0 .3rem; }
.ch-catalog ul { margin: 0; padding-left: 1.1rem; color: var(--mat-soft); font-size: .9rem; }

/* ================================================================
   Icônes
   ================================================================ */
.icon-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.icon-toolbar input[type=search] { flex: 1 1 220px; max-width: 560px; font-size: 1.05rem; padding: .65rem .85rem; border: 2px solid var(--ink); }
.icon-toolbar > button { padding-block: .7rem; }
.icon-scope { background: var(--sheet); }
.icon-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; }
.icon-results { background: var(--sheet); border-radius: 2px; box-shadow: var(--lift); padding: 1.2rem; min-height: 320px; }
.icon-status { color: var(--muted); margin: 0 0 .9rem; font-size: .92rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.icon-tile { position: relative; aspect-ratio: 1; padding: 12px; background: var(--sheet); border: 1.5px solid transparent; border-radius: 3px; display: grid; place-items: center; }
.icon-tile:hover { background: var(--sheet-2); border-color: var(--rule-strong); }
.icon-tile.on { border-color: var(--ink); background: var(--sheet-2); box-shadow: inset 0 -4px 0 var(--tool); }
.icon-tile img { width: 100%; height: 100%; object-fit: contain; }
.icon-fav { position: absolute; top: 2px; right: 5px; font-size: .8rem; color: var(--yellow); }
.icon-more { margin-top: 1rem; }
.icon-empty { padding: 1.5rem .5rem; }
.icon-empty p { margin: 0 0 .6rem; }
.icon-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.icon-inspector, .icon-results { color: var(--ink); }
.icon-inspector h2, .icon-inspector .label, .icon-results h2 { color: var(--ink); }
.icon-inspector { position: sticky; top: 1rem; background: var(--sheet); border-radius: 2px; box-shadow: var(--lift); padding: 1.2rem 1.3rem; }
.icon-placeholder p { margin: 0 0 .6rem; }
.icon-preview { aspect-ratio: 1; max-width: 240px; margin: 0 auto 1rem; display: grid; place-items: center;
  background-color: #fff; background-image: linear-gradient(45deg, #EEF0EE 25%, transparent 25%, transparent 75%, #EEF0EE 75%), linear-gradient(45deg, #EEF0EE 25%, transparent 25%, transparent 75%, #EEF0EE 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; border: 1px solid var(--rule); }
.icon-preview svg { width: 100%; height: 100%; display: block; }
.icon-name { font-size: 1.15rem; margin: 0 0 .2rem; text-transform: capitalize; font-variation-settings: 'wdth' 112; }
.icon-license { color: var(--muted); font-size: .86rem; margin: 0 0 .8rem; }
.icon-license a { color: inherit; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--sw); border: 1.5px solid var(--rule-strong); }
.swatch:hover { background: var(--sw); border-color: var(--ink); }
.swatch.on { outline: 2.5px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.swatch-custom { width: 34px; height: 30px; padding: 0 2px; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--sheet); cursor: pointer; }
.icon-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.icon-png { display: flex; gap: .5rem; }
.icon-png button { flex: 1; }
.icon-png select { width: auto; }
.icon-copied { font-size: .84rem; color: var(--ok); min-height: 1.2em; }
@media (max-width: 860px) {
  .icon-layout { grid-template-columns: 1fr; }
  .icon-inspector { position: static; order: -1; }
  .icon-inspector:has(.icon-placeholder) { display: none; }
}

/* Gabarits : une fiche par format, le gabarit dessiné à l'échelle (fond perdu en rouge pâle) */
.template-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.template-card { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: center; background: var(--sheet); color: var(--ink); box-shadow: var(--lift); padding: 1.1rem 1.2rem; border-top: 6px solid var(--red); }

.template-shape { position: relative; margin: 0 auto; background: var(--recto-soft); border: 1px solid #eec4bf; }
.template-shape span { position: absolute; background: var(--sheet); border: 1.5px dashed var(--ink); border-radius: 3px; }
.template-body h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.template-body p { margin: 0; font-size: .92rem; }
.template-body .muted { color: var(--muted); margin-bottom: .7rem; }
.template-buttons { display: inline-flex; flex-wrap: wrap; gap: .35rem; vertical-align: middle; }
.template-hint { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }

/* ================================================================
   Tableau blanc
   ================================================================ */
.header-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.board-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.board-tile { background: var(--sheet); color: var(--ink); box-shadow: var(--lift); border-top: 6px solid var(--purple-cube); display: flex; flex-direction: column; }
.board-open { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem .4rem; color: inherit; text-decoration: none; }
.board-open:hover .board-title { text-decoration: underline; text-underline-offset: 3px; }
.board-thumb { aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; margin-bottom: .5rem; }
.board-thumb img { width: 100%; height: 100%; object-fit: contain; }
.empty-thumb { color: var(--muted); font-size: .9rem; background: var(--sheet-2); }
.board-title { font-weight: 750; font-size: 1.08rem; font-variation-settings: 'wdth' 112; overflow-wrap: anywhere; }
.board-date { color: var(--muted); font-size: .84rem; }
.board-tile-actions { display: flex; gap: .2rem; padding: 0 .6rem .6rem; flex-wrap: wrap; }
.boards-empty { display: block; }

body.full-page main { max-width: none; padding: 0; }
.board-page { display: flex; flex-direction: column; }
.board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding: .55rem clamp(.7rem, 2vw, 1.4rem); background: var(--sheet); color: var(--ink); border-bottom: 1px solid var(--rule-strong); box-shadow: inset 0 -3px 0 var(--purple-cube); position: relative; z-index: 1; }
.board-ident { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1 1 320px; }
.board-back { color: var(--muted); font-weight: 650; font-size: .9rem; text-decoration: none; padding: .3rem .6rem .3rem .2rem; margin-right: .2rem; border-right: 1px solid var(--rule); white-space: nowrap; }
.board-back:hover { color: var(--ink); }
.board-cube { display: inline-flex; flex: none; }
input.board-name { flex: 0 1 auto; field-sizing: content; max-width: 26ch; min-width: 6ch; font-weight: 800; font-size: 1.12rem; font-variation-settings: 'wdth' 112; padding: .2rem .35rem; border: 1.5px solid transparent; border-radius: 3px; background: transparent; }
input.board-name:hover { border-color: var(--rule); background: var(--sheet-2); }
input.board-name:focus { border-color: var(--ink); background: #fff; outline: none; }
.board-status { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.board-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: .35rem; vertical-align: 1px; }
.board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.board-group { display: inline-flex; align-items: center; gap: .45rem; }
.board-group-buttons { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.board-group-label { font-size: .84rem; font-weight: 650; color: var(--muted); }
.board-group button { background: var(--sheet); color: var(--ink); border: none; border-radius: 0; padding: .28rem .7rem; font-size: .86rem; }
.board-group button + button { border-left: 1px solid var(--rule-strong); }
.board-group button:hover { background: var(--sheet-2); }
button.board-session { background: var(--purple-cube); border-color: var(--purple-cube); color: #fff; }
button.board-session:hover { background: #573c82; border-color: #573c82; }
.board-stage { position: relative; width: 100%; background: #fff; }
.session-steps { padding-left: 1.3rem; display: grid; gap: .6rem; margin: .8rem 0; }
.picker-grid { max-height: 46vh; overflow-y: auto; margin: .6rem 0; }
.picker-deck h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.picker-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; }
.picker-card { padding: 3px; background: var(--sheet-2); border: 1.5px solid var(--rule); border-radius: 3px; }
.picker-card:hover { border-color: var(--ink); background: var(--sheet); }
.picker-card img { width: 100%; display: block; clip-path: var(--clip, none); }

/* Dans Excalidraw, les styles généraux de l'Atelier (boutons, champs, titres) s'effacent
   pour laisser ceux d'Excalidraw. */
.excalidraw.excalidraw.excalidraw :is(button, input, select, textarea, label, a, h1, h2, h3, h4, p, ul, ol, li, table, th, td, dialog, kbd, code) { all: revert-layer; }

}