@charset "UTF-8";
/* ==========================================================================
   INFRASURE — outils interactifs (calculateur de densité, entonnoir réseau)
   Chargé uniquement sur les pages qui en contiennent un.
   ========================================================================== */

.tool{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line-strong);
  box-shadow:0 34px 90px -44px rgba(0,187,214,.55),0 2px 0 rgba(255,255,255,.05) inset;
  padding:clamp(20px,2.6vw,34px);
}
.tool::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:
    linear-gradient(rgba(0,187,214,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,187,214,.07) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 80%);
}
.tool>*{position:relative;z-index:1}

.tool-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;margin-bottom:1.4rem}
.tool-head h3{margin:0;font-size:clamp(1.12rem,1.5vw,1.36rem)}
.tool-head p{margin:.35rem 0 0;font-size:.875rem;color:var(--text-mute);max-width:62ch}
.tool-badge{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-400);padding:.4em .8em;border-radius:999px;
  background:rgba(0,187,214,.1);border:1px solid rgba(0,187,214,.28);white-space:nowrap;
}

/* ---- disposition ---- */
.tool-grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
@media(max-width:860px){.tool-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- commandes ---- */
.tool-ctrl{display:grid;gap:1.05rem}
.tool-field label,.tool-field .lab{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6em;
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-mute);font-family:var(--f-mono);margin-bottom:.5em;
}
.tool-field output{
  font-family:var(--f-head);font-size:.98rem;font-weight:800;letter-spacing:-.01em;
  color:var(--cyan-400);text-transform:none;
}
.tool-field select{
  width:100%;padding:.62em .85em;border-radius:11px;font-size:.9rem;
  background:rgba(4,7,12,.72);border:1px solid var(--line);color:var(--text);
}
.tool-field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,187,214,.14)}

input[type=range].tool-range{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;
}
input[type=range].tool-range::-webkit-slider-runnable-track{
  height:5px;border-radius:99px;background:linear-gradient(90deg,var(--cyan) var(--pos,0%),rgba(120,160,200,.22) var(--pos,0%));
}
input[type=range].tool-range::-moz-range-track{height:5px;border-radius:99px;background:rgba(120,160,200,.22)}
input[type=range].tool-range::-moz-range-progress{height:5px;border-radius:99px;background:var(--cyan)}
input[type=range].tool-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7.5px;
  background:linear-gradient(145deg,#8FF0FF,var(--cyan));
  border:2px solid #04070C;box-shadow:0 3px 12px rgba(0,187,214,.75);
}
input[type=range].tool-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:2px solid #04070C;
  background:linear-gradient(145deg,#8FF0FF,var(--cyan));box-shadow:0 3px 12px rgba(0,187,214,.75);
}
input[type=range].tool-range:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}

/* ---- préréglages ---- */
.tool-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.3rem}
.tool-presets button{
  padding:.46em .82em;border-radius:999px;cursor:pointer;font-size:.78rem;
  background:var(--glass);border:1px solid var(--line);color:var(--text-soft);
  transition:border-color .22s,color .22s,background .22s,transform .22s;
}
.tool-presets button:hover{border-color:var(--line-strong);color:#fff;transform:translateY(-1px)}
.tool-presets button[aria-pressed="true"]{
  background:rgba(0,187,214,.16);border-color:var(--cyan);color:#CDF6FF;
}

/* ---- scène ---- */
.tool-view{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:rgba(4,7,12,.55);
}
.tool-view canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* ---- indicateurs ---- */
.tool-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:1.3rem;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:700px){.tool-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tool-kpi{padding:.95rem 1.05rem;background:rgba(7,11,18,.92)}
.tool-kpi b{display:block;font-family:var(--f-head);font-size:clamp(1.25rem,2vw,1.7rem);font-weight:900;
  line-height:1.05;letter-spacing:-.03em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tool-kpi span{display:block;margin-top:.45em;font-size:.735rem;color:var(--text-mute);line-height:1.4}

/* ---- échelle des seuils ---- */
.tool-ladder{margin-top:1.3rem}
.tool-ladder-bar{position:relative;height:38px;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex}
.tool-ladder-seg{flex:1;display:grid;place-items:center;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);
  border-right:1px solid var(--line);transition:background .3s,color .3s}
.tool-ladder-seg:last-child{border-right:0}
.tool-ladder-seg[data-on="1"]{background:var(--grad);color:#04070C;font-weight:700}
.tool-ladder-scale{display:flex;margin-top:.45rem;font-family:var(--f-mono);font-size:.65rem;color:var(--text-mute)}
.tool-ladder-scale span{flex:1;text-align:center}

/* ---- échantillons pixellisés ---- */
.tool-samples{display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);margin-top:1.3rem;align-items:start}
@media(max-width:620px){.tool-samples{grid-template-columns:minmax(0,1fr)}}
.tool-samples figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(4,7,12,.55)}
.tool-samples canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.tool-samples figcaption{padding:.65rem .9rem;font-size:.775rem;color:var(--text-mute);border-top:1px solid var(--line)}
.tool-samples figcaption b{color:var(--text-soft);font-weight:650}

/* ---- verdict ---- */
.tool-verdict{
  margin:1.3rem 0 0;padding:1.05rem 1.3rem;border-radius:var(--r);font-size:.94rem;
  background:var(--grad-soft);border:1px solid rgba(0,187,214,.24);color:var(--text-soft);
}
.tool-verdict b{color:#fff}
.tool-verdict.warn{background:linear-gradient(135deg,rgba(220,120,60,.14),rgba(180,60,60,.12));
  border-color:rgba(230,140,80,.35)}
.tool-verdict.warn b{color:#FFCBA4}

.tool-foot{margin-top:1.1rem;font-size:.78rem;color:var(--text-mute);line-height:1.6}
.tool-foot a{color:var(--cyan-400)}

/* ---- entonnoir réseau ---- */
.funnel{display:grid;gap:10px;margin-top:.4rem}
.funnel-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,92px);
  gap:12px;align-items:center}
@media(max-width:640px){.funnel-row{grid-template-columns:minmax(0,1fr);gap:4px}}
.funnel-lab{font-size:.8rem;color:var(--text-soft)}
.funnel-lab small{display:block;font-size:.7rem;color:var(--text-mute)}
.funnel-track{height:26px;border-radius:7px;background:rgba(120,160,200,.09);overflow:hidden;position:relative}
.funnel-fill{height:100%;border-radius:7px;background:var(--grad);
  transition:width .5s cubic-bezier(.2,.8,.25,1),background .3s;min-width:3px}
.funnel-row[data-bottleneck="1"] .funnel-fill{background:linear-gradient(135deg,#FF9A5A,#E2553C)}
.funnel-val{font-family:var(--f-mono);font-size:.82rem;color:var(--text-soft);text-align:right}
.funnel-row[data-bottleneck="1"] .funnel-val{color:#FFB98F;font-weight:600}
.funnel-tag{
  display:inline-block;margin-left:.5em;padding:.15em .5em;border-radius:5px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(226,85,60,.22);color:#FFB98F;border:1px solid rgba(226,85,60,.4);
}

.stone-age{
  margin:0 0 1.6rem;padding:clamp(18px,2.2vw,28px);border-radius:var(--r-lg);
  background:rgba(4,7,12,.5);border-left:3px solid var(--cyan);
}
.stone-age p{margin:0 0 .7em;color:var(--text-soft);font-size:1.02rem;line-height:1.7}
.stone-age p:last-child{margin-bottom:0}
.stone-age .punch{
  font-family:var(--f-head);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:900;
  letter-spacing:-.025em;line-height:1.15;color:#fff;margin:.5em 0;
}
.stone-age .punch em{font-style:normal;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

@media(prefers-reduced-motion:reduce){
  .funnel-fill{transition:none}
}