/* =====================================================================
   Fichly · White Belt Lean en 1 h — styles du déclic du chapitre 5
   « Posez les repères » (declics/ch5.js).
   Tous les sélecteurs sous .declic-ch5, classes d5-, @keyframes d5-. Jetons de fichly.css
   (clair et sombre), charte V2. Mobile d’abord : largeur utile ≈ 311 px à 375 px,
   zones tactiles ≥ 44 px ; dessin à gauche et panneau à droite dès 640 px de cadre.
   ===================================================================== */
.declic-ch5 [hidden] { display: none !important; }
.declic-ch5 .d5 { container-type: inline-size; display: grid; gap: 12px; min-width: 0; }
.declic-ch5 .d5-layout { display: grid; gap: 14px; min-width: 0; }
.declic-ch5 .d5-stage, .declic-ch5 .d5-panel { min-width: 0; }
@container (min-width: 640px) {
  .declic-ch5 .d5-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .declic-ch5 .d5-panel { padding-top: 58px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 760px) {
    .declic-ch5 .d5-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    .declic-ch5 .d5-panel { padding-top: 58px; }
  }
}

/* ---------- avancement : les 3 étapes ---------- */
.declic-ch5 .d5-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.declic-ch5 .d5-track li { flex: 1 1 0; height: 6px; border-radius: var(--pill); background: var(--line); transition: background .2s ease; }
.declic-ch5 .d5-track li.is-now { background: var(--brand-fill); }
.declic-ch5 .d5-track li.is-done { background: var(--f-vert); }

/* ---------- en-tête de l’étape, chrono ---------- */
.declic-ch5 .d5-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin-bottom: 8px; }
.declic-ch5 .d5-hl { min-width: 0; }
.declic-ch5 .d5-k { margin: 0 0 2px; font: 700 .74rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.declic-ch5 .d5-t { margin: 0; font: 700 1.12rem/1.3 var(--title); color: var(--ink); }
.declic-ch5 .d5-t:focus { outline: none; }
.declic-ch5 .d5-t:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch5 .d5-clock { position: relative; flex: none; width: 48px; height: 48px; }
.declic-ch5 .d5-clock svg { display: block; width: 48px; height: 48px; }
.declic-ch5 .d5-clock-bg { fill: var(--card); stroke: var(--line); stroke-width: 4; }
.declic-ch5 .d5-clock-arc { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; }
.declic-ch5 .d5-clock-n { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.declic-ch5 .d5-clock-n b { font: 700 1.1rem/1 var(--title); }
.declic-ch5 .d5-clock-n small { font: 700 .7rem/1 var(--title); }

/* ---------- étape 3 : « Sans chrono » et « Liste des zones » ---------- */
.declic-ch5 .d5-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.declic-ch5 .d5-mode {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 11px 6px 6px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink);
  font: 700 .8rem/1.2 var(--title); white-space: nowrap; cursor: pointer;
}
.declic-ch5 .d5-mode:hover { border-color: var(--ink); }
.declic-ch5 .d5-mode:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--pill); }
.declic-ch5 .d5-sw { position: relative; flex: none; width: 32px; height: 20px; border-radius: var(--radius-sm); background: var(--lane); border: 2px solid var(--soft); transition: background .15s ease, border-color .15s ease; }
.declic-ch5 .d5-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--soft); transition: transform .15s ease; }
.declic-ch5 .d5-mode[aria-pressed="true"] .d5-sw { background: var(--brand-fill); border-color: var(--brand-fill); }
.declic-ch5 .d5-mode[aria-pressed="true"] .d5-sw::after { background: #ffffff; transform: translateX(12px); }
.declic-ch5 .btn.small.d5-listbtn { min-height: 44px; padding: 6px 11px; gap: 6px; font-size: .8rem; white-space: nowrap; }
.declic-ch5 .d5-listbtn svg { width: 15px; height: 15px; }
.declic-ch5 .d5-listbtn[aria-expanded="true"] { border-color: var(--ink); background: var(--lane); }
.declic-ch5 .d5-zlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.declic-ch5 .d5-zbtn {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
  font: 700 .84rem/1.3 var(--title); text-align: left; cursor: pointer; overflow-wrap: break-word;
}
.declic-ch5 .d5-zbtn:hover { border-color: var(--blue); }
.declic-ch5 .d5-zbtn[aria-disabled="true"] { color: var(--soft); cursor: default; }
.declic-ch5 .d5-zbtn[aria-disabled="true"]:hover { border-color: var(--line); }
@container (max-width: 280px) { .declic-ch5 .d5-zlist { grid-template-columns: minmax(0, 1fr); } }

/* ---------- le dessin (360 × 300) ou son cache ---------- */
.declic-ch5 .d5-view { position: relative; aspect-ratio: 360 / 300; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--lane); }
.declic-ch5 .d5-svg {
  display: block; width: 100%; height: 100%; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.declic-ch5 .d5-svg:focus { outline: none; }
.declic-ch5 .d5-view:focus-within:has(.d5-svg:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch5 .d5-view.is-live { cursor: pointer; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.declic-ch5 .d5-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; background: var(--lane); }
/* cache de l’étape 3 : la vue grandit avec le texte agrandi (le bouton « C’est parti ! » n’est jamais rogné) */
.declic-ch5 .d5-view.is-cover { overflow: visible; }
.declic-ch5 .d5-view.is-cover .d5-cover { position: static; min-height: 100%; border-radius: inherit; }
.declic-ch5 .d5-cover-ico { width: 40px; height: 40px; margin-bottom: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink); }
.declic-ch5 .d5-cover-ico svg { width: 24px; height: 24px; }
.declic-ch5 .d5-cover-t { margin: 0; font: 700 1.1rem/1.25 var(--title); color: var(--ink); }
.declic-ch5 .d5-cover-s { margin: 0 0 10px; max-width: 30ch; font-size: .92rem; line-height: 1.4; color: var(--soft); }
.declic-ch5 .d5-go { min-width: 160px; }

/* ---------- panneau : texte, réponses, corrections ---------- */
.declic-ch5 .d5-q { margin: 0 0 10px; font: 700 1.04rem/1.35 var(--title); color: var(--ink); }
.declic-ch5 .d5-note { margin: 0 0 8px; font-size: .93rem; line-height: 1.5; color: var(--soft); }
.declic-ch5 .d5-lead { color: var(--ink); margin-bottom: 12px; }
.declic-ch5 .d5-tip { margin-top: 10px; }
.declic-ch5 .d5-deja { margin-top: 12px; color: var(--ink); font-weight: 700; }
.declic-ch5 .d5-choices { display: grid; gap: 8px; }
.declic-ch5 .d5-choice { min-height: 48px; align-items: center; padding: 9px 12px; }
.declic-ch5 .d5-fb { margin-top: 12px; }
.declic-ch5 .d5-fb:focus { outline: none; }
.declic-ch5 .d5-fb:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch5 .d5-fb p { font-size: .95rem; line-height: 1.5; }
.declic-ch5 .d5-nextbox { margin-top: 14px; }
.declic-ch5 .d5-next, .declic-ch5 .d5-show { width: 100%; }
.declic-ch5 .d5-show svg { width: 20px; height: 20px; }
@media (min-width: 560px) { .declic-ch5 .d5-next, .declic-ch5 .d5-show { width: auto; } }

/* étape 2 : les 4 repères */
.declic-ch5 .d5-reps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.declic-ch5 .d5-rbtn {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
  font: 700 .86rem/1.25 var(--title); text-align: left; cursor: pointer; hyphens: manual;
  transition: border-color .15s ease, background .15s ease;
}
.declic-ch5 .d5-rbtn:hover { border-color: var(--blue); }
.declic-ch5 .d5-rbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.declic-ch5 .d5-rbtn.is-on { border-color: var(--f-vert); background: var(--ok-bg); }
.declic-ch5 .d5-rsw { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--lane); border: 1px solid var(--line); }
.declic-ch5 .d5-rsw svg { width: 26px; height: 26px; }
.declic-ch5 .d5-rtx { flex: 1 1 auto; min-width: 0; }
.declic-ch5 .d5-rok { position: absolute; right: -7px; bottom: -7px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--f-vert); color: var(--on-fill); box-shadow: 0 0 0 2px var(--ok-bg); }
.declic-ch5 .d5-rok svg { width: 12px; height: 12px; }
.declic-ch5 .d5-sw-y { fill: var(--nvao); }
.declic-ch5 .d5-sw-s { fill: var(--line-strong); stroke: var(--soft); stroke-width: 2.5; stroke-linejoin: round; opacity: .55; }
.declic-ch5 .d5-sw-o { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.declic-ch5 .d5-sw-i { fill: var(--ink); }
.declic-ch5 .d5-sw-g { stroke: var(--ok); stroke-width: 3.5; stroke-dasharray: 5 3; }
.declic-ch5 .d5-sw-r { stroke: var(--bad); stroke-width: 3.5; stroke-dasharray: 5 3; }

/* ce que montre le dernier repère posé */
.declic-ch5 .d5-say { margin-top: 12px; padding: 10px 12px 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--f-bleu-clair); background: var(--clair-bg); }
.declic-ch5 .d5-say.is-ecart { border-color: var(--nva); background: var(--bad-bg); }
.declic-ch5 .d5-say p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink); }
.declic-ch5 .d5-say .d5-say-t { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; font: 700 .98rem/1.35 var(--title); }
.declic-ch5 .d5-say.is-ecart .d5-say-t { color: var(--ink); }
.declic-ch5 .d5-say-t svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.declic-ch5 .d5-fin { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--f-vert); background: var(--ok-bg); }
.declic-ch5 .d5-fin p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.declic-ch5 .d5-fin .d5-fin-t { margin-bottom: 6px; font: 700 1.05rem/1.35 var(--title); color: var(--ink); }
.declic-ch5 .d5-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.declic-ch5 .d5-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: var(--pill); border: 1.5px solid var(--nva); background: var(--bad-bg); color: var(--ink); font: 700 .8rem/1.2 var(--title); }
.declic-ch5 .d5-chips svg { flex: none; width: 14px; height: 14px; }

/* étape 3 : toucher faux */
.declic-ch5 .d5-miss { display: flex; align-items: flex-start; gap: 6px; min-height: 1.5em; margin: 0; font: 700 .9rem/1.45 var(--title); color: var(--ink); }
.declic-ch5 .d5-miss:empty { display: block; }
.declic-ch5 .d5-miss svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.declic-ch5 .d5-miss.is-in { animation: d5-shake .35s ease; }

/* ---------- bilan ---------- */
.declic-ch5 .d5-bilan .d5-k { margin-bottom: 4px; }
.declic-ch5 .d5-bt { margin: 0 0 14px; font: 700 1.15rem/1.35 var(--title); color: var(--ink); max-width: 40ch; }
.declic-ch5 .d5-bt:focus { outline: none; }
.declic-ch5 .d5-bt:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch5 .d5-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.declic-ch5 .d5-cmp-c { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid; }
.declic-ch5 .d5-cmp-c.is-sans { background: var(--bad-bg); border-color: var(--nva); }
.declic-ch5 .d5-cmp-c.is-avec { background: var(--ok-bg); border-color: var(--va); }
.declic-ch5 .d5-cmp-c.is-avec.is-zero { background: var(--lane); border-color: var(--line); }
.declic-ch5 .d5-cmp-k { font: 700 .72rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.declic-ch5 .d5-cmp-c.is-sans .d5-cmp-k { color: var(--ink); }
.declic-ch5 .d5-cmp-c.is-avec .d5-cmp-k { color: var(--ink); }
.declic-ch5 .d5-cmp-c.is-avec.is-zero .d5-cmp-k { color: var(--soft); }
.declic-ch5 .d5-cmp-c b { font: 700 1rem/1.3 var(--title); color: var(--ink); }
.declic-ch5 .d5-blist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
@container (min-width: 640px) { .declic-ch5 .d5-blist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.declic-ch5 .d5-blist li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--lane); font-size: .92rem; line-height: 1.4; color: var(--soft); }
.declic-ch5 .d5-blist b { display: block; margin-bottom: 2px; font: 700 .9rem/1.3 var(--title); color: var(--ink); }
.declic-ch5 .d5-bi { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--on-fill); }
.declic-ch5 .d5-bi svg { width: 15px; height: 15px; }
.declic-ch5 .is-ok .d5-bi { background: var(--va); }
.declic-ch5 .is-ko .d5-bi { background: var(--nva); }
.declic-ch5 .d5-retenir { margin: 14px 0 10px; }
.declic-ch5 .d5-retenir p { margin: 0; }
.declic-ch5 .d5-retenir p + p { margin-top: 6px; }

/* ---------- dessin de l’atelier (repris de la fiche et de la vidéo du module 5) ---------- */
.declic-ch5 .d5-wall { fill: var(--lane); }
.declic-ch5 .d5-floor { fill: var(--line); }
.declic-ch5 .d5-base { stroke: var(--ink); stroke-width: 2; }
.declic-ch5 .d5-o { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.declic-ch5 .d5-edge { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.declic-ch5 .d5-ink { fill: var(--ink); }
.declic-ch5 .d5-hole { fill: var(--line); }
.declic-ch5 .d5-cut { fill: var(--card); }
.declic-ch5 .d5-metal { fill: var(--line-strong); }
.declic-ch5 .d5-handle { fill: var(--brand-fill); }
.declic-ch5 .d5-silg { opacity: .22; }
.declic-ch5 .d5-sil { fill: var(--ink); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.declic-ch5 .d5-stock { fill: var(--f-bleu-clair); }
.declic-ch5 .d5-part { fill: var(--ink); }
.declic-ch5 .d5-box { fill: var(--warn-bg); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.declic-ch5 .d5-tape { fill: var(--nvao); }
.declic-ch5 .d5-pal { fill: var(--line-strong); }
.declic-ch5 .d5-walk { fill: var(--nvao); stroke: var(--warn); stroke-width: 1.5; }
.declic-ch5 .d5-spot { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 3; }
.declic-ch5 .d5-lbl { fill: var(--line-strong); font: 700 12px var(--title); letter-spacing: 1px; }
.declic-ch5 .d5-lbl2 { fill: var(--line-strong); font: 700 14px var(--title); letter-spacing: 3px; }
.declic-ch5 .d5-lbl3 { fill: var(--line-strong); font: 700 11px var(--title); letter-spacing: 1px; }
.declic-ch5 .d5-hook { stroke: var(--soft); stroke-width: 2; }
.declic-ch5 .d5-tag { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
.declic-ch5 .d5-tagt { fill: var(--ink); font: 700 14px var(--title); }
/* traits mini et maxi sur un liseré couleur carte (contraste AA sur le bac vide comme sur le stock) */
.declic-ch5 .d5-lh { stroke: var(--card); stroke-width: 7; }
.declic-ch5 .d5-min { stroke: var(--bad); stroke-width: 3.5; stroke-dasharray: 7 4; }
.declic-ch5 .d5-max { stroke: var(--ok); stroke-width: 3.5; stroke-dasharray: 7 4; }

/* l’écart entouré */
.declic-ch5 .d5-ring-h { fill: none; stroke: var(--card); stroke-width: 9; }
.declic-ch5 .d5-ring { fill: none; stroke: var(--nva); stroke-width: 4.5; }
/* toucher faux : une petite croix qui s’efface */
.declic-ch5 .d5-marks { pointer-events: none; }
.declic-ch5 .d5-no-h { fill: none; stroke: var(--card); stroke-width: 10; stroke-linecap: round; }
.declic-ch5 .d5-no-x { fill: none; stroke: var(--nva); stroke-width: 4.5; stroke-linecap: round; }
.declic-ch5 .d5-no { animation: d5-fade .9s ease-in both; }

/* ---------- apparition des repères (étape 2) et de l’écart ---------- */
.declic-ch5 .d5-rep.is-new { animation: d5-in .45s ease-out both; }
.declic-ch5 .d5-silg.is-new { animation: d5-in-sil .45s ease-out both; }
.declic-ch5 .d5-etq.is-new { transform-box: fill-box; transform-origin: center top; animation: d5-drop .4s ease-out both; }
.declic-ch5 .d5-slide { animation: d5-slide .5s .15s ease-in-out both; }
.declic-ch5 .d5-ringg.is-new { transform-box: fill-box; transform-origin: center; animation: d5-pop .45s .5s ease-out both; }
@keyframes d5-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes d5-in-sil { from { opacity: 0; } to { opacity: .22; } }
@keyframes d5-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes d5-slide { from { transform: translateX(var(--d5-dx, 0)); } to { transform: none; } }
@keyframes d5-pop { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes d5-fade { 0%, 60% { opacity: 1; } to { opacity: 0; } }
@keyframes d5-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .declic-ch5 .d5-rep.is-new, .declic-ch5 .d5-silg.is-new, .declic-ch5 .d5-etq.is-new, .declic-ch5 .d5-slide,
  .declic-ch5 .d5-ringg.is-new, .declic-ch5 .d5-no, .declic-ch5 .d5-miss.is-in { animation: none; }
  .declic-ch5 .d5-sw, .declic-ch5 .d5-sw::after, .declic-ch5 .d5-track li, .declic-ch5 .d5-rbtn { transition: none; }
}

/* ---------- Charte V2 (CHARTE-V2.md) : pas d’opacité, encarts à contour 1 px, le sens avec son mot ou son picto ---------- */
.declic-ch5 .d5-track li { border-radius: var(--pill); }
.declic-ch5 .d5-track li.is-now { background: var(--bf); }
.declic-ch5 .d5-clock-arc { stroke: var(--bf); }
.declic-ch5 .d5-mode { border-color: var(--line-ui); }
.declic-ch5 .d5-sw { background: var(--white); border-color: var(--line-ui); }
.declic-ch5 .d5-sw::after { background: var(--line-ui); }
.declic-ch5 .d5-mode[aria-pressed="true"] .d5-sw { background: #3c4399; border-color: #3c4399; }
.declic-ch5 .d5-zbtn, .declic-ch5 .d5-rbtn { border: 1px solid var(--line-ui); background: var(--white); }
.declic-ch5 .d5-zbtn:hover, .declic-ch5 .d5-rbtn:hover { border-color: var(--bf); }
.declic-ch5 .d5-zbtn[aria-disabled="true"]:hover { border-color: var(--line-ui); }
.declic-ch5 .d5-view { background: var(--white); border-radius: var(--radius); }
.declic-ch5 .d5-view.is-live { border-color: var(--bf); box-shadow: 0 0 0 2px var(--bf-m); }
.declic-ch5 .d5-cover { background: var(--bf-c); }
.declic-ch5 .d5-cover-ico { background: var(--bf-m); color: var(--ink); }
.declic-ch5 .d5-rbtn.is-on { border-color: var(--vf); background: var(--vc); }
.declic-ch5 .d5-rsw { background: #ffffff; border-radius: 50%; }
.declic-ch5 .d5-rok { background: var(--vm); color: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.declic-ch5 .d5-sw-s { opacity: 1; fill: #cfcbcb; stroke: #cfcbcb; }
.declic-ch5 .d5-sw-o { fill: #ffffff; stroke: #231f20; }
.declic-ch5 .d5-sw-i { fill: #231f20; }
.declic-ch5 .d5-say { border-radius: var(--radius); border-color: var(--bf); background: var(--bf-c); }
.declic-ch5 .d5-say.is-ecart { border-color: var(--rf); background: var(--rc); }
.declic-ch5 .d5-say-t svg { box-sizing: content-box; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--bf-m); }
.declic-ch5 .d5-say.is-ecart .d5-say-t svg { background: var(--rm); }
.declic-ch5 .d5-fin { border: 1px solid var(--vf); border-radius: var(--radius); background: var(--vc); }
.declic-ch5 .d5-chips li { border: 1px solid var(--rf); background: var(--rc); }
.declic-ch5 .d5-chips svg { box-sizing: content-box; padding: 2px; border-radius: 50%; background: var(--rm); }
.declic-ch5 .d5-miss svg { box-sizing: content-box; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--rm); }
.declic-ch5 .d5-cmp-c { border: 1px solid; border-radius: var(--radius); }
.declic-ch5 .d5-cmp-c.is-sans { background: var(--rc); border-color: var(--rf); }
.declic-ch5 .d5-cmp-c.is-avec { background: var(--vc); border-color: var(--vf); }
.declic-ch5 .d5-cmp-c.is-avec.is-zero { background: var(--white); border-color: var(--line-strong); }
.declic-ch5 .d5-blist li { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.declic-ch5 .d5-bi { color: #231f20; }
.declic-ch5 .is-ok .d5-bi { background: var(--vm); color: var(--ink); }
.declic-ch5 .is-ko .d5-bi { background: var(--rm); color: var(--ink); }
/* Dessin de l’atelier : silhouettes du rangement en gris clair, sans opacité */
.declic-ch5 .d5-wall { fill: var(--white); }
.declic-ch5 .d5-silg { opacity: 1; }
.declic-ch5 .d5-sil { fill: var(--line-strong); stroke: var(--line-strong); }
@keyframes d5-in-sil { from { opacity: 0; } to { opacity: 1; } }
.declic-ch5 .d5-handle { fill: var(--bf); }
.declic-ch5 .d5-box { fill: var(--jc); }
/* Inscriptions du dessin (« POSTE 3 »…) : en encre, lisibles (AA) dans les deux modes */
.declic-ch5 .d5-lbl, .declic-ch5 .d5-lbl2, .declic-ch5 .d5-lbl3 { fill: var(--ink); }