/* Visuels : icônes, outils, graphiques, filigrane de séance */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}
.ico.logo{fill:var(--brand,#14213a)}
.card .icon.has-ico{font-size:18px}
.card .icon .ico{width:19px;height:19px}
.flow-mark .ico{width:15px;height:15px;vertical-align:-3px}
.flow-step b{display:flex;align-items:center;gap:4px}

/* Rangée d'outils */
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 24px}
.tool{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border:1px solid var(--line);background:#fff;border-radius:99px;font:600 11.5px Inter,sans-serif;color:#33415c;box-shadow:0 4px 14px #1c2a430a;animation:content-enter .35s ease both}
.tool .ico{width:15px;height:15px}
.tool .ico:not(.logo){color:var(--tone,var(--blue))}

/* Barre latérale : icône de la séance */
.nav-item .dot.dot-ico{width:18px;height:18px;background:none;display:grid;place-items:center;color:var(--tone);box-shadow:none!important;margin:0 -5px 0 -5px}
.nav-item .dot.dot-ico .ico{width:15px;height:15px}
.nav-item.active .dot.dot-ico{color:#fff}

/* Filigrane des diapositives de titre */
.slide.has-deco{position:relative}
.slide-deco{position:absolute;top:-6px;right:0;width:150px;height:150px;color:var(--tone);opacity:.11;pointer-events:none;animation:deco-in .7s cubic-bezier(.2,.7,.25,1) both}
.slide-deco .ico{width:100%;height:100%;stroke-width:1.4}
@keyframes deco-in{from{opacity:0;transform:rotate(-8deg) scale(.9)}to{opacity:.11;transform:none}}

/* Graphiques */
.chart{margin:0 0 22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.ch-title{display:flex;align-items:center;gap:8px;font:700 13px Manrope,sans-serif;color:var(--ink);margin-bottom:14px}
.ch-title .ico{color:var(--tone);width:16px;height:16px}
.ch-caption{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.ch-row{display:grid;grid-template-columns:minmax(90px,190px) 1fr minmax(60px,auto);align-items:center;gap:12px;margin:9px 0}
.ch-label{font-size:12.5px;color:#4a586f;line-height:1.35}
.ch-track{height:22px;background:#f0f2f7;border-radius:7px;overflow:hidden}
.ch-track i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 75%,white),var(--c));border-radius:7px;transform-origin:left;animation:bar-grow .8s cubic-bezier(.2,.7,.25,1) both}
.ch-val{font:600 12px 'DM Mono',monospace;color:var(--ink);white-space:nowrap}
@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ch-stackbar{display:flex;height:30px;border-radius:9px;overflow:hidden;gap:2px;background:#fff}
.ch-stackbar i{display:block;background:var(--c);transform-origin:left;animation:bar-grow .7s cubic-bezier(.2,.7,.25,1) both;min-width:3px}
.ch-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:12px;color:#4a586f}
.ch-legend span{display:inline-flex;align-items:center;gap:6px}
.ch-legend i{width:10px;height:10px;border-radius:3px;background:var(--c);display:inline-block}
.ch-legend small{color:var(--muted);font:11px 'DM Mono',monospace}

.ch-pyramid{display:flex;flex-direction:column;align-items:center;gap:5px}
.ch-level{width:var(--w);background:color-mix(in srgb,var(--c) calc(var(--o) * 100%),#1c2a43);color:#fff;text-shadow:0 1px 2px #0000002e;border-radius:9px;padding:9px 14px;text-align:center;animation:content-enter .45s ease both}
.ch-level b{display:block;font:700 13px Manrope,sans-serif}
.ch-level small{display:block;font-size:11px;opacity:.92;margin-top:2px}

.ch-cycle{position:relative;width:min(100%,400px);aspect-ratio:1;margin:0 auto;color:color-mix(in srgb,var(--c) 55%,#c3cad8)}
.ch-cycle>svg{position:absolute;inset:0;width:100%;height:100%}
.ch-center{position:absolute;inset:34%;display:grid;place-items:center;text-align:center;font:700 13px/1.3 Manrope,sans-serif;color:var(--ink)}
.ch-node{position:absolute;transform:translate(-50%,-50%);width:120px;text-align:center;animation:node-in .45s cubic-bezier(.2,.7,.25,1) both}
.ch-node-ico{width:42px;height:42px;margin:0 auto 5px;display:grid;place-items:center;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px #1c2a4314;color:var(--c);font:600 13px 'DM Mono',monospace}
.ch-node-ico .ico{width:20px;height:20px}
.ch-node b{display:block;font:700 12.5px Manrope,sans-serif;color:var(--ink)}
.ch-node small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:2px}
@keyframes node-in{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}

.ch-ranges .ch-row{grid-template-columns:minmax(90px,170px) 1fr}
.ch-axis{position:relative;height:26px;background:repeating-linear-gradient(90deg,#f0f2f7 0 1px,transparent 1px 10%) ,#f8f9fc;border-radius:7px}
.ch-range{position:absolute;top:4px;bottom:4px;background:color-mix(in srgb,var(--c) 70%,white);border:1.5px solid var(--c);border-radius:6px;transform-origin:left;animation:bar-grow .7s cubic-bezier(.2,.7,.25,1) both}
.ch-range em{position:absolute;top:50%;transform:translateY(-50%);font:600 10px 'DM Mono',monospace;font-style:normal;color:var(--ink);white-space:nowrap}
.ch-range em:first-child{right:calc(100% + 5px)}.ch-range em:last-child{left:calc(100% + 5px)}
.ch-axis s{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);text-decoration:none}
.ch-scale .ch-axis{background:none;height:44px}
.ch-scale u{position:absolute;top:2px;transform:translateX(-50%);font:10px 'DM Mono',monospace;color:var(--muted);text-decoration:none}
.ch-scale s.ch-th{top:-6px;bottom:auto;height:0;border:0}
.ch-scale s.ch-th b{position:absolute;top:26px;transform:translateX(-50%);white-space:nowrap;font:600 10.5px Inter,sans-serif;color:var(--ink);background:#fff;padding:1px 6px;border-radius:5px;border:1px solid var(--line)}

.ch-gauges{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.ch-gauge{width:150px;text-align:center;position:relative;animation:content-enter .45s ease both}
.ch-gauge svg{width:118px;height:118px;transform:rotate(-90deg);display:block;margin:0 auto}
.ch-gauge .g-bg{fill:none;stroke:#eef1f6;stroke-width:3.6}
.ch-gauge .g-fg{fill:none;stroke:var(--c);stroke-width:3.6;stroke-linecap:round;stroke-dasharray:var(--p) 100;animation:gauge-fill 1s cubic-bezier(.2,.7,.25,1) both}
.ch-gauge b{position:absolute;top:59px;left:0;right:0;transform:translateY(-50%);font:800 20px Manrope,sans-serif;color:var(--ink)}
.ch-gauge span{display:block;margin-top:8px;font-size:12px;color:#4a586f;line-height:1.35}
@keyframes gauge-fill{from{stroke-dasharray:0 100}}

@media(max-width:650px){
  .ch-row{grid-template-columns:1fr auto;gap:4px 10px}.ch-row .ch-label{grid-column:1 / -1}.ch-track{grid-column:1}
  .ch-ranges .ch-row{grid-template-columns:1fr}.ch-scale .ch-label{display:none}
  .ch-cycle{width:100%;aspect-ratio:auto;display:grid;gap:10px;color:inherit}.ch-cycle>svg,.ch-center{display:none}
  .ch-node{position:static;transform:none;width:auto;display:grid;grid-template-columns:42px 1fr;column-gap:12px;text-align:left;animation:content-enter .35s ease both}
  .ch-node-ico{grid-row:span 2;margin:0}
  .ch-level{width:100%!important}
  .slide-deco{width:84px;height:84px}
  .tools{margin-top:-6px}
}
@media(prefers-reduced-motion:reduce){.ch-track i,.ch-stackbar i,.ch-range,.ch-level,.ch-node,.ch-gauge,.ch-gauge .g-fg,.slide-deco,.tool{animation:none}}
@media print{.chart{box-shadow:none;break-inside:avoid}.slide-deco{display:none}}

/* Responsive : un long élément de code en ligne (URL, chemin, variable) ne doit jamais élargir
   une carte au-delà de la diapositive. overflow-wrap:anywhere réduit la largeur minimale du contenu. */
.slide code,.slide .tool span,.slide .ch-label,.slide .ch-val{overflow-wrap:anywhere}
.slide .exercise-list,.slide .checklist,.slide .grid{grid-template-columns:minmax(0,1fr)}
.slide .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.slide .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.slide .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.slide .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.slide .grid.two,.slide .grid.three,.slide .grid.four{grid-template-columns:minmax(0,1fr)}}
.slide .exercise,.slide .exercise>div,.slide .card,.slide .flow-step,.slide .check,.slide .side{min-width:0}
/* Flux : en colonne dès que les étapes n'ont plus la place d'être côte à côte */
.slide .flow-step b,.slide .flow-step small{overflow-wrap:anywhere}
@media(max-width:760px){.slide .flow{flex-direction:column}.slide .flow .arrow{transform:rotate(90deg);align-self:center}}
/* Bloc de code : un libellé long ne doit pas pousser le bouton Copier hors de l'écran */
.code-block .code-label{gap:10px}
.code-block .code-label>span{min-width:0;overflow-wrap:anywhere}
.code-block .copy-btn{flex:none}