/* =====================================================================
   Fichly · White Belt Lean en 1 h — styles du déclic du chapitre 1 (agent DÉCLIC 1)
   « Remettre la maison du Lean dans l’ordre » : la maison de la vidéo du module 1
   (stabilité tout en bas, standards et kaizen, piliers et personnes, le but en toit).
   Tous les sélecteurs sous .declic-ch1 (classes d1-…), jetons de fichly.css (clair/sombre),
   charte V2, rien de plus large que le cadre à 375 px, zones tactiles ≥ 44 px.
   ===================================================================== */

.declic-ch1 [hidden] { display: none !important; }
.declic-ch1 .d1 { container-type: inline-size; }
.declic-ch1 .d1-grid { display: grid; gap: 14px; }
/* Grand écran : la brique, la correction et le bilan à gauche, la maison à droite */
@container (min-width: 640px) {
  .declic-ch1 .d1-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto 1fr; grid-template-areas: "panel stage" "down stage"; column-gap: 30px; align-items: start; }
  .declic-ch1 .d1-panel { grid-area: panel; }
  .declic-ch1 .d1-stage { grid-area: stage; }
  .declic-ch1 .d1-down { grid-area: down; }
  .declic-ch1 .d1-grid .d1-down-btn { width: auto; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 820px) {
    .declic-ch1 .d1-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto 1fr; grid-template-areas: "panel stage" "down stage"; column-gap: 30px; align-items: start; }
    .declic-ch1 .d1-panel { grid-area: panel; }
    .declic-ch1 .d1-stage { grid-area: stage; }
    .declic-ch1 .d1-down { grid-area: down; }
    .declic-ch1 .d1-grid .d1-down-btn { width: auto; }
  }
}
.declic-ch1 .d1-panel, .declic-ch1 .d1-stage, .declic-ch1 .d1-down { min-width: 0; }

/* ---------- Avancement : « Brique 3 sur 10 » + 10 repères ---------- */
.declic-ch1 .d1-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.declic-ch1 .d1-count { margin: 0; font: 700 .78rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.declic-ch1 .d1-count b { color: var(--ink); font-size: 1.05em; }
.declic-ch1 .d1-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; flex: 0 1 150px; min-width: 0; }
.declic-ch1 .d1-track li { flex: 1 1 0; height: 8px; border-radius: var(--pill); background: var(--line); transition: background .2s ease; }
.declic-ch1 .d1-track li.is-now { background: var(--brand-fill); }
.declic-ch1 .d1-track li.is-missed { background: var(--f-jaune); }
.declic-ch1 .d1-track li.is-ok { background: var(--f-vert); }
.declic-ch1 .d1-track li.is-retry { background: var(--f-jaune); }

/* ---------- La brique à placer (une étiquette, pas un bouton : on touche sa place dans la maison) ---------- */
.declic-ch1 .d1-now { margin: 0; }
.declic-ch1 .d1-now-k { display: block; margin: 0 0 4px; font: 700 .7rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.declic-ch1 .d1-brick {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 16px;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--navy); border: 2px dashed var(--blue);
  font: 700 1.1rem/1.25 var(--title); text-align: center; overflow-wrap: break-word;
}
.declic-ch1 .d1-brick.is-in { animation: d1-drop .35s ease; }

/* ---------- Correction ---------- */
.declic-ch1 .d1-fb { margin: 12px 0 0; min-height: 4.6em; padding: 10px 12px 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--lane); color: var(--ink); font-size: .92rem; line-height: 1.45; }
.declic-ch1 .d1-fb b { font-family: var(--title); font-weight: 700; }
.declic-ch1 .d1-fb.is-ok { background: var(--ok-bg); border-color: var(--f-vert); }
.declic-ch1 .d1-fb.is-ok b { color: var(--ink); }
.declic-ch1 .d1-fb.is-bad { background: var(--bad-bg); border-color: var(--f-rouge); }
.declic-ch1 .d1-fb.is-bad b { color: var(--ink); }

/* ---------- La maison ---------- */
.declic-ch1 .d1-house { position: relative; max-width: 400px; margin: 0 auto; padding: 4px 4px 0; }
.declic-ch1 .d1-house::after { content: ""; display: block; height: 4px; margin: 6px -1% 0; border-radius: var(--pill); background: var(--soft); opacity: .45; }
.declic-ch1 .d1-upper { transform-origin: 4% 100%; transition: transform .7s cubic-bezier(.55, 0, .75, .4); }
.declic-ch1 .d1-t { font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.declic-ch1 .d1-z { font: 700 .66rem/1.2 var(--title); letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.declic-ch1 .d1-q { font: 700 1.1rem/1 var(--title); color: var(--soft); }
.declic-ch1 .d1-v { font: 700 .86rem/1.2 var(--title); color: var(--ink); max-width: 100%; overflow-wrap: break-word; }
/* légendes des briques posées : jeton clair/sombre (le gris de --soft passait sous 4,5:1 sur --brand-soft) */
.declic-ch1 { --d1-s-ink: #5b627f; }
.declic-ch1 .d1-s { font: 700 .72rem/1.2 var(--body); color: var(--d1-s-ink); max-width: 100%; }

/* Toit : tout le triangle est une zone à toucher */
.declic-ch1 .d1-roof { position: relative; display: block; width: 100%; height: 122px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; }
.declic-ch1 .d1-roof svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.declic-ch1 .d1-roof polygon { fill: var(--brand-soft); stroke: var(--soft); stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .3s ease, stroke .3s ease; }
.declic-ch1 .d1-in { position: absolute; left: 17%; right: 17%; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.declic-ch1 .d1-roof.is-full polygon { fill: var(--brand-fill); stroke: var(--brand-fill); stroke-dasharray: none; }
.declic-ch1 .d1-roof-k { font: 700 .64rem/1 var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--on-brand); }
.declic-ch1 .d1-roof-v { font: 700 .86rem/1.15 var(--title); color: var(--on-brand); }
.declic-ch1 .d1-roof-s { font: 700 .7rem/1.15 var(--body); color: var(--on-brand); }

/* Piliers et centre */
.declic-ch1 .d1-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 6px; margin: 6px 3% 0; }
.declic-ch1 .d1-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; min-width: 0; min-height: 112px; margin: 0; padding: 14px 4px 8px;
  border: 2px dashed var(--line-ui); border-radius: var(--radius-sm); background: var(--card); text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
/* chapiteau des piliers (comme dans la vidéo) */
.declic-ch1 .d1-pillar::before { content: ""; position: absolute; left: -4px; right: -4px; top: -2px; height: 7px; border-radius: var(--pill); background: var(--line); }
.declic-ch1 .d1-pillar.is-full { border: 3px solid var(--brand); }
.declic-ch1 .d1-pillar.is-full::before { background: var(--brand-fill); top: -3px; }
.declic-ch1 .d1-pillar .d1-v { hyphens: manual; }
.declic-ch1 .d1-ico { width: 24px; height: 24px; flex: none; color: var(--ink); }
.declic-ch1 .d1-ico-alert { color: var(--ink); }
.declic-ch1 .d1-people { width: 46px; height: 27px; flex: none; color: var(--soft); opacity: .45; margin-bottom: 2px; }
.declic-ch1 .d1-centre.is-full { border-style: dashed; border-color: var(--brand); background: var(--brand-soft); }
.declic-ch1 .d1-centre.is-full .d1-people { color: var(--ink); opacity: 1; }

/* Fondations : une seule zone à toucher, trois places (stabilité en bas, standards et kaizen au-dessus) */
.declic-ch1 .d1-base {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; width: 100%; margin: 6px 0 0; padding: 6px;
  border: 2px dashed var(--line-ui); border-radius: 12px; background: var(--lane); text-align: center;
  transition: border-color .15s ease, background .15s ease, opacity .5s ease, transform .5s ease;
}
.declic-ch1 .d1-base.is-full { border-style: solid; border-color: var(--line); }
.declic-ch1 .d1-spot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; row-gap: 1px; min-width: 0; min-height: 46px; padding: 4px 6px; border-radius: 8px; background: var(--card); }
.declic-ch1 .d1-spot:not(.is-full) { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.declic-ch1 .d1-stab { grid-column: 1 / -1; }
.declic-ch1 .d1-std.is-full, .declic-ch1 .d1-kz.is-full { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--line); }
.declic-ch1 .d1-kz.is-full { flex-direction: column; flex-wrap: nowrap; }
.declic-ch1 .d1-stab.is-full { background: var(--dark-bar); }
.declic-ch1 .d1-stab.is-full .d1-v { color: var(--dark-bar-ink); font-size: .92rem; }
.declic-ch1 .d1-stab.is-full .d1-s { color: var(--dark-bar-soft); }

/* Hors de la maison : les idées reçues */
.declic-ch1 .d1-out {
  display: grid; gap: 8px; width: 100%; min-height: 56px; margin: 14px 0 0; padding: 10px 12px;
  border: 2px dashed var(--f-rouge); border-radius: var(--radius); background: var(--card); text-align: left;
  transition: background .15s ease;
}
.declic-ch1 .d1-out-t { display: flex; align-items: center; gap: 10px; font: 700 .9rem/1.25 var(--title); color: var(--ink); }
.declic-ch1 .d1-out-t svg { width: 18px; height: 18px; flex: none; }
.declic-ch1 .d1-out-t b { display: block; font-weight: 700; }
.declic-ch1 .d1-out-s { display: block; font: 700 .8rem/1.25 var(--body); color: var(--ink); }
.declic-ch1 .d1-out-list { display: flex; flex-wrap: wrap; gap: 6px; }
.declic-ch1 .d1-out-list:empty { display: none; }
.declic-ch1 .d1-myth { display: inline-block; max-width: 100%; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--bad-bg); color: var(--ink); font: 700 .8rem/1.2 var(--title); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- États pendant le jeu ---------- */
.declic-ch1 .is-playing .d1-slot:hover, .declic-ch1 .is-playing .d1-base:hover { border-color: var(--brand); }
.declic-ch1 .is-playing .d1-roof:hover polygon { stroke: var(--brand); }
.declic-ch1 .is-playing .d1-out:hover { background: var(--bad-bg); }
/* Mauvaise place : rouge et petite secousse */
.declic-ch1 .d1-t.is-no { animation: d1-shake .4s ease; }
.declic-ch1 .d1-slot.is-no, .declic-ch1 .d1-base.is-no { border-style: solid; border-color: var(--bad); background: var(--bad-bg); }
.declic-ch1 .d1-roof.is-no polygon { fill: var(--bad-bg); stroke: var(--bad); stroke-dasharray: none; }
.declic-ch1 .d1-out.is-no { border-style: solid; border-color: var(--bad); background: var(--bad-bg); }
/* Deux erreurs : la bonne place est entourée en vert */
.declic-ch1 .d1-slot.is-hint, .declic-ch1 .d1-base.is-hint, .declic-ch1 .d1-out.is-hint { border-style: solid; border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); animation: d1-glow 1.2s ease-in-out infinite; }
.declic-ch1 .d1-roof.is-hint polygon { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 4; stroke-dasharray: none; }
/* Bonne place : la brique se pose */
.declic-ch1 .is-pop { animation: d1-pop .45s ease; }

/* ---------- Bilan ---------- */
.declic-ch1 .d1-end { margin-top: 14px; padding: 14px; border-radius: var(--radius); background: var(--lane); }
.declic-ch1 .d1-end:focus { outline: none; }
.declic-ch1 .d1-end:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch1 .d1-end > * { margin: 0; }
.declic-ch1 .d1-end > * + * { margin-top: 10px; }
.declic-ch1 .d1-end-h { display: flex; align-items: flex-start; gap: 10px; font: 700 1.08rem/1.3 var(--title); color: var(--ink); }
.declic-ch1 .d1-end-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--f-vert); color: var(--on-fill); }
.declic-ch1 .d1-end-ico svg { width: 18px; height: 18px; }
.declic-ch1 .d1-score { font-size: .95rem; }
.declic-ch1 .d1-score b { font: 700 1.35rem/1 var(--title); color: var(--navy); margin-right: 2px; }
.declic-ch1 .d1-end-t { font-size: .95rem; }
/* La maison finie ne se touche plus */
.declic-ch1 .is-done .d1-t { cursor: default; }

/* « Et sans fondations ? », sous la maison */
.declic-ch1 .d1-down { padding: 12px; border-radius: var(--radius-sm); background: var(--lane); }
.declic-ch1 .d1-down p { margin: 0; }
.declic-ch1 .d1-down-q { font-size: .93rem; }
.declic-ch1 .d1-down-q b { font-family: var(--title); }
.declic-ch1 .d1-down-btn { margin-top: 10px; width: 100%; }
.declic-ch1 .d1-down-a { font-size: .93rem; }
.declic-ch1 .d1-down-a:not(:empty) { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--f-jaune); background: var(--warn-bg); color: var(--ink); }

/* La maison penche et s’affaisse */
.declic-ch1 .d1-house.is-down { overflow: hidden; }
.declic-ch1 .d1-house.is-down .d1-upper { transform: translateY(66px) rotate(7deg); }
.declic-ch1 .d1-house.is-down .d1-base { border-style: dashed; border-color: var(--soft); background: none; }
.declic-ch1 .d1-house.is-down .d1-spot { visibility: hidden; }

/* ---------- Animations ---------- */
@keyframes d1-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes d1-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes d1-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes d1-glow { 50% { box-shadow: 0 0 0 7px var(--ok-bg); } }

@media (prefers-reduced-motion: reduce) {
  .declic-ch1 *, .declic-ch1 *::before, .declic-ch1 *::after { animation: none !important; transition: none !important; }
}

/* Téléphone (une colonne) : pendant le jeu, la brique et la correction restent collées sous l’en-tête
   pendant qu’on descend vers les fondations et « Hors de la maison ». Seulement pendant le jeu (le bilan
   ne reste pas collé) et sur un écran assez haut (en paysage, le panneau masquerait la maison). */
@media (min-height: 600px) {
  @container (max-width: 639px) {
    .declic-ch1 .d1.is-playing .d1-panel {
      position: sticky; top: 85px; z-index: 2; background: var(--card); padding: 6px 0 8px;
      box-shadow: 0 10px 12px -12px rgba(7, 18, 70, .35);
    }
    .declic-ch1 .d1-fb { min-height: 6.2em; }
  }
}

@media (max-width: 360px) {
  .declic-ch1 .d1-v { font-size: .8rem; }
  .declic-ch1 .d1-body { margin-left: 1%; margin-right: 1%; gap: 4px; }
}

/* ---------- Charte V2 (CHARTE-V2.md) : pas d’opacité ni d’ombre, encarts à contour 1 px ---------- */
.declic-ch1 { --d1-s-ink: var(--ink); }
.declic-ch1 .d1-house::after { background: var(--line-strong); opacity: 1; }
.declic-ch1 .d1-people { color: var(--line-ui); opacity: 1; }
.declic-ch1 .d1-track li { border-radius: var(--pill); }
.declic-ch1 .d1-track li.is-now { background: var(--bf); }
.declic-ch1 .d1-brick { background: var(--bf-c); border: 2px dashed var(--bf); border-radius: var(--radius-sm); color: var(--ink); }
.declic-ch1 .d1-fb { border: 1px solid var(--line-strong); background: var(--white); border-radius: var(--radius); }
.declic-ch1 .d1-fb.is-ok { background: var(--vc); border-color: var(--vf); }
.declic-ch1 .d1-fb.is-bad { background: var(--rc); border-color: var(--rf); }
.declic-ch1 .d1-roof polygon { fill: var(--bf-c); stroke: var(--line-ui); }
.declic-ch1 .d1-roof.is-full polygon { fill: #3c4399; stroke: #3c4399; }
.declic-ch1 .d1-roof-k, .declic-ch1 .d1-roof-v, .declic-ch1 .d1-roof-s { color: #ffffff; }
.declic-ch1 .d1-pillar.is-full { border: 2px solid var(--bf); background: var(--bf-c); }
.declic-ch1 .d1-pillar.is-full::before { background: var(--bf); }
.declic-ch1 .d1-ico { color: var(--ink); }
.declic-ch1 .d1-centre.is-full { border-color: var(--bf); background: var(--bf-c); }
.declic-ch1 .d1-std.is-full, .declic-ch1 .d1-kz.is-full { background: var(--bf-c); box-shadow: inset 0 0 0 1px var(--bf); }
.declic-ch1 .d1-stab.is-full { background: #3c4399; }
.declic-ch1 .d1-stab.is-full .d1-v, .declic-ch1 .d1-stab.is-full .d1-s { color: #ffffff; }
.declic-ch1 .d1-out { border-color: var(--rf); }
.declic-ch1 .d1-out-t svg { box-sizing: content-box; padding: 3px; border-radius: 50%; background: var(--rm); }
.declic-ch1 .d1-myth { background: var(--rc); border: 1px solid var(--rf); border-radius: var(--pill); padding: 4px 8px; }
.declic-ch1 .is-playing .d1-out:hover { background: var(--rc); }
.declic-ch1 .d1-slot.is-no, .declic-ch1 .d1-base.is-no, .declic-ch1 .d1-out.is-no { border-color: var(--rf); background: var(--rc); }
.declic-ch1 .d1-roof.is-no polygon { fill: var(--rc); stroke: var(--rf); }
.declic-ch1 .d1-slot.is-hint, .declic-ch1 .d1-base.is-hint, .declic-ch1 .d1-out.is-hint { border-color: var(--vf); box-shadow: 0 0 0 4px var(--vm); }
.declic-ch1 .d1-roof.is-hint polygon { fill: var(--vc); stroke: var(--vf); }
@keyframes d1-glow { 50% { box-shadow: 0 0 0 7px var(--vm); } }
.declic-ch1 .d1-end { background: var(--vc); border: 1px solid var(--vf); }
.declic-ch1 .d1-end-ico { background: var(--vm); color: var(--ink); }
.declic-ch1 .d1-down { background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.declic-ch1 .d1-down-a:not(:empty) { border: 1px solid var(--jf); background: var(--jc); border-radius: var(--radius); }
@media (min-height: 600px) { @container (max-width: 639px) { .declic-ch1 .d1.is-playing .d1-panel { box-shadow: 0 1px 0 var(--line-strong); } } }