/* Fichly · White Belt Lean en 1 h — styles du déclic du chapitre 6 (agent DÉCLIC 6)
   « Les 5 Pourquoi de la presse P3 » : du symptôme (au-dessus du sol) à la cause racine
   (cachée dessous), puis l’action qui la traite.
   Tous les sélecteurs sous .declic-ch6 (classes d6-…), jetons de couleur de fichly.css
   (clair/sombre), charte V2, zones tactiles ≥ 44 px, sans défilement horizontal à 375 px. */

/* Jetons propres au déclic : brun du chapitre lisible (AA) et « sol » de la chaîne.
   --d6-bleed = padding du cadre .wb-declic (16 px, 22 px dès 760 px) : le sol va d’un bord à l’autre. */
.declic-ch6 {
  --d6-brun: var(--of); --d6-ground: var(--of); --d6-soil: var(--oc);
  --d6-bleed: 16px; --d6-pad: 16px;
}
@media (min-width: 760px) { .declic-ch6 { --d6-bleed: 22px; --d6-pad: 22px; } }

.declic-ch6 .d6 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.declic-ch6 .d6 p { margin: 0; }
.declic-ch6 .d6-main { display: grid; gap: 10px; min-width: 0; }
.declic-ch6 .d6-prev { font-size: .82rem; color: var(--soft); }

/* ---------- La situation : les 3 presses et l’histoire ---------- */
.declic-ch6 .d6-intro { display: grid; gap: 10px; min-width: 0; }
.declic-ch6 .d6-scene { margin: 0; padding: 10px 10px 8px; border-radius: var(--radius-sm); background: var(--lane); }
.declic-ch6 .d6-presses { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.declic-ch6 .d6-scene figcaption { margin-top: 6px; text-align: center; font: 700 .8rem/1.35 var(--title); color: var(--soft); }
.declic-ch6 .d6-p-frame, .declic-ch6 .d6-p-crown { fill: var(--line-strong); }
.declic-ch6 .d6-p-ram, .declic-ch6 .d6-p-punch { fill: var(--ink); }
.declic-ch6 .d6-p-ram { opacity: .8; }
.declic-ch6 .d6-p-sheet { fill: var(--f-bleu-clair); }
.declic-ch6 .d6-p-table { fill: var(--line-strong); opacity: .55; }
.declic-ch6 .d6-p-base { fill: var(--ink); }
.declic-ch6 .d6-p-halo { fill: var(--bad-bg); stroke: var(--nva); stroke-width: 1.5; }
.declic-ch6 .d6-p-name { fill: var(--ink); font: 700 13px var(--title); }
.declic-ch6 .is-stop .d6-p-name { fill: var(--bad); }
.declic-ch6 .d6-p-ok { fill: var(--va); }
.declic-ch6 .d6-p-bad { fill: var(--nva); }
.declic-ch6 .d6-p-mark { fill: none; stroke: var(--on-fill); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.declic-ch6 .d6-story { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bad-bg); border: 1px solid var(--nva); color: var(--ink); font-size: .95rem; line-height: 1.5; }
.declic-ch6 .d6-warn { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.declic-ch6 .d6-story b { font-family: var(--title); color: var(--ink); }

/* ---------- Le rappel des faits (QQOQCP de la fiche) ---------- */
.declic-ch6 .d6-facts { min-width: 0; border-radius: var(--radius-sm); background: var(--lane); }
.declic-ch6 .d6-facts summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 10px 14px;
  border-radius: var(--radius-sm); font: 700 .92rem/1.3 var(--title); color: var(--ink); cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.declic-ch6 .d6-facts summary::-webkit-details-marker { display: none; }
.declic-ch6 .d6-facts summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease;
}
.declic-ch6 .d6-facts[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.declic-ch6 .d6-facts summary:hover { color: var(--ink); }
.declic-ch6 .d6-facts summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.declic-ch6 .d6-facts dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; padding: 0 14px 12px; font-size: .9rem; line-height: 1.4; }
.declic-ch6 .d6-facts dt { font: 700 .8rem/1.4 var(--title); color: var(--ink); }
.declic-ch6 .d6-facts dd { margin: 0; color: var(--ink); }
.declic-ch6 .d6-tip { margin: 0 14px !important; padding: 10px 0 14px; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.45; color: var(--soft); }

/* ---------- La chaîne : symptôme au-dessus du sol, les Pourquoi dessous ---------- */
.declic-ch6 .d6-chain { list-style: none; margin: 0; padding: 0; min-width: 0; }
.declic-ch6 .d6-chain > li { margin: 0; min-width: 0; }
.declic-ch6 .d6-chain > li.is-under { margin-inline: calc(-1 * var(--d6-bleed)); padding-inline: var(--d6-pad); background: var(--d6-soil); }
.declic-ch6 .d6-chain > li.is-last-under { padding-bottom: 16px; }

/* Les liens entre deux maillons : « Pourquoi ? » */
.declic-ch6 .d6-join { display: flex; align-items: center; gap: 8px; min-height: 34px; padding-left: 16px; font: 700 .8rem/1.2 var(--title); color: var(--ink); }
.declic-ch6 .d6-chain > li.d6-join.is-under { padding-left: calc(var(--d6-pad) + 16px); }
.declic-ch6 .d6-join-ico { flex: none; width: 14px; height: 22px; }
.declic-ch6 .d6-join.is-ground { min-height: 42px; border-top: 3px solid var(--d6-ground); }
.declic-ch6 .d6-ground { margin-left: auto; font: 700 .7rem/1.2 var(--title); letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.declic-ch6 .d6-join.is-act { color: var(--ink); }

/* Un maillon trouvé */
.declic-ch6 .d6-card { min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); border: 1px solid var(--d6-brun); }
.declic-ch6 .d6-tag { display: flex; align-items: center; gap: 6px; margin: 0 0 3px !important; font: 700 .72rem/1.3 var(--title); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.declic-ch6 .d6-tag svg { flex: none; width: 15px; height: 15px; }
.declic-ch6 .d6-lq { font-size: .84rem; line-height: 1.35; color: var(--soft); }
.declic-ch6 .d6-la { font: 700 .98rem/1.4 var(--title); color: var(--ink); }
.declic-ch6 .d6-card .d6-fb { margin-top: 10px; font-size: .92rem; line-height: 1.45; }
.declic-ch6 .is-symptom .d6-card { background: var(--bad-bg); border-color: transparent; border-color: var(--nva); }
.declic-ch6 .is-symptom .d6-tag { color: var(--ink); }
.declic-ch6 .is-root .d6-card, .declic-ch6 .d6-link.is-act .d6-card { background: var(--ok-bg); border-color: var(--va); border-color: var(--va); }
.declic-ch6 .is-root .d6-tag, .declic-ch6 .d6-link.is-act .d6-tag { color: var(--ink); }

/* ---------- La question en cours ---------- */
.declic-ch6 .d6-askbox { display: grid; gap: 10px; min-width: 0; padding: 14px 12px; border-radius: 12px; border: 2px solid var(--module); background: var(--card); box-shadow: var(--shadow-hover); }
.declic-ch6 .d6-askbox .d6-tag { margin-bottom: -4px !important; }
.declic-ch6 .d6-q { margin: 0; font: 700 1.08rem/1.35 var(--title); color: var(--ink); }
.declic-ch6 .d6-q:focus { outline: none; }
.declic-ch6 .d6-gemba { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--ink); font-size: .93rem; line-height: 1.45; }
.declic-ch6 .d6-eye { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.declic-ch6 .d6-gemba b { font-family: var(--title); color: var(--ink); }

.declic-ch6 .d6-opts { display: grid; gap: 8px; }
.declic-ch6 .d6-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: 400 .95rem/1.4 var(--body); text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background-color .15s ease;
}
.declic-ch6 .d6-opt:hover { border-color: var(--blue); }
.declic-ch6 .d6-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.declic-ch6 .d6-mark { flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--ink); font: 700 .82rem/1 var(--title); }
.declic-ch6 .d6-mark svg { width: 15px; height: 15px; }
.declic-ch6 .d6-otxt { min-width: 0; padding-top: 2px; overflow-wrap: break-word; }
.declic-ch6 .d6-opt.is-wrong { cursor: default; background: var(--bad-bg); border-color: var(--nva); color: var(--ink); }
.declic-ch6 .d6-opt.is-wrong:hover { border-color: var(--nva); }
.declic-ch6 .d6-opt.is-wrong .d6-mark { background: var(--nva); color: var(--on-fill); }
.declic-ch6 .d6-askbox > .d6-fb { margin-top: 0; font-size: .93rem; line-height: 1.45; }

/* ---------- Le bilan ---------- */
.declic-ch6 .d6-bilan { display: grid; gap: 12px; margin-top: 14px; }
.declic-ch6 .d6-res { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid var(--nvao); }
.declic-ch6 .d6-res.is-ok { background: var(--ok-bg); border-color: var(--va); }
.declic-ch6 .d6-score { flex: none; font: 700 1rem/1 var(--title); color: var(--ink); }
.declic-ch6 .d6-score b { font-size: 2.2rem; }
.declic-ch6 .d6-res-txt { min-width: 0; }
.declic-ch6 .d6-bilan-t { margin: 0 0 2px; font: 700 1.1rem/1.3 var(--title); color: var(--ink); }
.declic-ch6 .d6-bilan-t:focus { outline: none; }
.declic-ch6 .d6-res-d { font: 700 .84rem/1.4 var(--title); color: var(--ink); }
.declic-ch6 .d6-res-m { margin-top: 4px !important; font-size: .93rem; line-height: 1.45; color: var(--ink); }

.declic-ch6 .d6-cmp { display: grid; gap: 10px; }
.declic-ch6 .d6-cmp-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: var(--radius-sm); background: var(--bad-bg); border: 1px solid var(--nva); }
.declic-ch6 .d6-cmp-card.is-ok { background: var(--ok-bg); border-top-color: var(--va); }
.declic-ch6 .d6-weed { display: block; width: 100%; height: auto; margin-top: 4px; }
.declic-ch6 .d6-cmp-txt { min-width: 0; }
.declic-ch6 .d6-cmp-k { font: 700 .72rem/1.3 var(--title); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.declic-ch6 .is-ok .d6-cmp-k { color: var(--ink); }
.declic-ch6 .d6-cmp-a { margin: 2px 0 4px !important; font: 700 1rem/1.3 var(--title); color: var(--ink); }
.declic-ch6 .d6-cmp-r { font-size: .9rem; line-height: 1.45; color: var(--ink); }
.declic-ch6 .d6-cmp-m { margin-top: 6px !important; font-size: .84rem; line-height: 1.45; font-style: italic; color: var(--ink); }
.declic-ch6 .d6-std { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--clair-bg); border: 1px solid var(--f-bleu-clair); color: var(--ink); font-size: .93rem; line-height: 1.5; }
.declic-ch6 .d6-std b { font-family: var(--title); }

/* Dessin de la fiche : la mauvaise herbe (symptôme au-dessus du sol, racine dessous) */
.declic-ch6 .d6-w-soil { fill: var(--nvao); opacity: .28; }
.declic-ch6 .d6-w-ground { stroke: var(--soft); stroke-width: 2; fill: none; }
.declic-ch6 .d6-w-root { stroke: var(--d6-brun); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.declic-ch6 .d6-w-stem { stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.declic-ch6 .d6-w-leaf { fill: var(--va); }
.declic-ch6 .d6-w-leaf.is-cut { opacity: .4; }
.declic-ch6 .d6-w-cut { stroke: var(--bad); stroke-width: 3; fill: none; stroke-linecap: round; }
.declic-ch6 .d6-w-arrow { stroke: var(--bad); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; }
.declic-ch6 .d6-w-hole { fill: var(--line); }
.declic-ch6 .d6-w-ok { fill: var(--va); }
.declic-ch6 .d6-w-check { stroke: var(--on-fill); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Apparition douce (sauf mouvement réduit) ---------- */
.declic-ch6 .is-new > .d6-card, .declic-ch6 .is-new > .d6-askbox, .declic-ch6 .d6-bilan.is-new { animation: d6-in .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes d6-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .declic-ch6 *, .declic-ch6 *::after { animation: none !important; transition: none !important; }
}

/* ---------- Écrans moyens : les presses à côté de l’histoire ---------- */
@media (min-width: 600px) and (max-width: 879px), (min-width: 1100px) {
  .declic-ch6 .d6-intro { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 600px) {
  .declic-ch6 .d6-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Grand écran : les faits restent à côté de la chaîne ---------- */
@media (min-width: 880px) {
  .declic-ch6 { --d6-bleed: 0px; --d6-pad: 14px; }
  .declic-ch6 .d6 { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .declic-ch6 .d6-intro { grid-column: 1; grid-row: 1; }
  .declic-ch6 .d6-main { grid-column: 1; grid-row: 2; }
  .declic-ch6 .d6-facts { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 84px; }
  .declic-ch6 .d6-join.is-ground { border-radius: 12px 12px 0 0; border-top-width: 3px; }
  .declic-ch6 .d6-chain > li.is-last-under { border-radius: 0 0 12px 12px; }
  .declic-ch6 .d6-askbox { padding: 16px; }
}

/* ---------- Charte V2 (CHARTE-V2.md) : le chapitre 6 passe à l’orange ; plus de texte brun ;
   le « sol » en orange clair ; pas d’opacité ni d’ombre ---------- */
.declic-ch6 { --d6-brun: var(--of); --d6-ground: var(--of); --d6-soil: var(--oc); }
.declic-ch6 .d6-scene { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.declic-ch6 .d6-p-ram { opacity: 1; fill: #5a5354; }
.declic-ch6 .d6-p-table { opacity: 1; fill: var(--line-strong); }
.declic-ch6 .d6-p-frame, .declic-ch6 .d6-p-crown { fill: #8a8485; }
.declic-ch6 .d6-p-punch, .declic-ch6 .d6-p-base { fill: #231f20; }
.declic-ch6 .d6-p-name { fill: var(--ink); }
.declic-ch6 .d6-p-halo { fill: var(--rc); stroke: var(--rf); }
.declic-ch6 .d6-p-mark { stroke: #231f20; }
.declic-ch6 .d6-story { border: 1px solid var(--rf); background: var(--rc); border-radius: var(--radius); }
.declic-ch6 .d6-warn { box-sizing: content-box; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--rm); }
.declic-ch6 .d6-facts { background: var(--oc); border: 1px solid var(--of); border-radius: var(--radius); }
.declic-ch6 .d6-facts summary { border-radius: var(--radius); }
.declic-ch6 .d6-facts summary:hover { color: var(--ink); text-decoration: underline; }
.declic-ch6 .d6-facts dt { color: var(--ink); }
.declic-ch6 .d6-tip { border-top-color: var(--of); }
.declic-ch6 .d6-join, .declic-ch6 .d6-tag { color: var(--ink); }
.declic-ch6 .d6-card { border: 1px solid var(--of); border-radius: var(--radius-sm); background: var(--white); }
.declic-ch6 .is-symptom .d6-card { background: var(--rc); border-color: var(--rf); }
.declic-ch6 .is-root .d6-card, .declic-ch6 .d6-link.is-act .d6-card { background: var(--vc); border-color: var(--vf); }
.declic-ch6 .d6-askbox { border: 2px solid var(--module); border-radius: var(--radius); box-shadow: none; }
.declic-ch6 .d6-gemba { background: var(--bf-c); border: 1px solid var(--bf); border-radius: var(--radius-sm); }
.declic-ch6 .d6-eye { box-sizing: content-box; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--bf-m); color: var(--ink); }
.declic-ch6 .d6-opt { border: 1px solid var(--line-ui); background: var(--white); font-weight: 400; }
.declic-ch6 .d6-opt:hover { border-color: var(--bf); box-shadow: 0 0 0 2px var(--bf-m); }
.declic-ch6 .d6-mark { border-radius: 50%; background: var(--bf-m); color: var(--ink); }
.declic-ch6 .d6-opt.is-wrong { background: var(--rc); border-color: var(--rf); color: var(--ink); box-shadow: none; }
.declic-ch6 .d6-opt.is-wrong .d6-mark { background: var(--rm); color: var(--ink); }
.declic-ch6 .d6-res { border: 1px solid var(--jf); background: var(--jc); }
.declic-ch6 .d6-res.is-ok { border-color: var(--vf); background: var(--vc); }
.declic-ch6 .d6-cmp-card { border: 1px solid var(--rf); background: var(--rc); border-radius: var(--radius); }
.declic-ch6 .d6-cmp-card.is-ok { border-color: var(--vf); background: var(--vc); }
.declic-ch6 .d6-std { border: 1px solid var(--bf); background: var(--bf-c); border-radius: var(--radius); }
.declic-ch6 .d6-w-soil { opacity: 1; fill: var(--oc); }
.declic-ch6 .d6-w-leaf.is-cut { opacity: 1; fill: var(--vm); }
.declic-ch6 .d6-w-check { stroke: #231f20; }
@media (min-width: 880px) { .declic-ch6 .d6-join.is-ground { border-radius: var(--radius) var(--radius) 0 0; } .declic-ch6 .d6-chain > li.is-last-under { border-radius: 0 0 var(--radius) var(--radius); } }