.outil{background:var(--white,#fffdfa);border-radius:28px;box-shadow:0 10px 30px -12px rgba(27,23,22,.18);padding:1.25rem 1.1rem;margin:1rem 0 2.5rem}
@media (min-width:56rem){
  .outil{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:start;padding:2rem 2.25rem}
  .outil .resultat-zone{position:sticky;top:5.5rem}
}
.outil .etape{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .6rem;font-weight:700;margin:0 0 .5rem}
.outil .etape b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink,#1b1716);color:var(--white,#fffdfa);font-size:.85rem}
.outil .etape small{font-weight:400;font-size:.85rem;color:var(--muted,#6e6661)}
.outil .resultat-zone{margin-top:1.5rem}
@media (min-width:56rem){.outil .resultat-zone{margin-top:0}}

/* Champ chiffré : libellé + case à droite + curseur */
.outil .champ{--c:var(--green,#3d7c45);padding:1rem 0;border-bottom:1px solid #1b171612}
.outil div.champ:nth-of-type(5n+2){--c:var(--brick,#a63f29)}
.outil div.champ:nth-of-type(5n+3){--c:#7a5c45}
.outil div.champ:nth-of-type(5n+4){--c:var(--navy,#22398c)}
.outil div.champ:nth-of-type(5n+5){--c:var(--salmon,#bd6455)}
.outil .tete{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.85rem}
.outil .tete label{font-weight:650;line-height:1.3}
.outil .saisie{flex:none;display:flex;align-items:center;width:8.75rem;background:#fff;border:1.5px solid #1b171629;border-radius:12px;padding:0 .75rem 0 .35rem;transition:border-color .15s,box-shadow .15s}
.outil .saisie:hover{border-color:var(--c)}
.outil .saisie:focus-within{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.outil .saisie input{flex:1;min-width:0;width:100%;border:0;background:none;font-family:inherit;font-size:1.05rem;font-weight:600;line-height:1.2;text-align:right;padding:.6rem .4rem;color:var(--ink,#1b1716);-moz-appearance:textfield}
.outil .saisie input::-webkit-inner-spin-button,.outil .saisie input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.outil .saisie input:focus{outline:0}
.outil .saisie em{font-style:normal;font-weight:700;color:var(--ink,#1b1716)}
.outil input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:.4rem 0;border-radius:999px;cursor:pointer;background:linear-gradient(to right,var(--c) var(--p,0%),#e4ded7 var(--p,0%))}
.outil input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid var(--c);box-shadow:0 2px 6px rgba(27,23,22,.2)}
.outil input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid var(--c);box-shadow:0 2px 6px rgba(27,23,22,.2)}
.outil input[type=range]:focus{outline:0}
.outil input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}

/* Choix : boutons pilules */
.outil .choix{border:0;margin:0;padding:1rem 0;border-bottom:1px solid #1b171612}
.outil .choix legend{font-weight:650;padding:0;margin-bottom:.7rem;float:left;width:100%}
.outil .choix div{clear:both;display:flex;flex-wrap:wrap;gap:.5rem}
.outil .choix label{position:relative}
.outil .choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.outil .choix span{display:block;padding:.65rem 1.1rem;border-radius:999px;background:var(--bg,#f7f4f0);border:1.5px solid #1b171629;font-weight:600;font-size:.95rem;transition:background .15s}
.outil .choix input:checked+span{background:var(--ink,#1b1716);border-color:var(--ink,#1b1716);color:var(--white,#fffdfa)}
.outil .choix input:focus-visible+span{box-shadow:0 0 0 3px var(--gold,#e7af2f)}

/* Résultats */
.outil .kpis{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.outil .kpi{border-radius:18px;padding:.8rem 1rem;background:var(--bg,#f7f4f0)}
.outil .kpi span{display:block;font-size:.82rem;color:var(--muted,#6e6661);line-height:1.3}
.outil .kpi strong{font-size:1.25rem;font-weight:700;line-height:1.3}
.outil .kpi.fort{grid-column:1/-1;background:var(--sage,#dfe7d8);padding:1rem 1.2rem}
.outil .kpi.fort strong{display:block;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.outil .graphe{margin:1.5rem 0 .5rem}
.outil svg{width:100%;height:auto;display:block}
.outil svg .a{fill:var(--gold,#e7af2f)}.outil svg .b{fill:var(--green,#3d7c45)}
.outil svg text{font-size:24px;fill:var(--muted,#6e6661)}
.outil figcaption{font-size:.85rem;color:var(--muted,#6e6661);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.outil figcaption span{display:inline-block;width:12px;height:12px;border-radius:50%;margin-left:.5rem}
.outil .la{background:var(--gold,#e7af2f)}.outil .lb{background:var(--green,#3d7c45)}
.outil details{margin:.5rem 0;padding:0;background:none;box-shadow:none}
.outil table{font-size:.88rem;margin-top:.5rem;box-shadow:none}
.outil .barres{display:grid;gap:.75rem;margin-top:1rem}
.outil .barres div{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:.25rem .75rem}
.outil .barres b{height:1.5rem;background:var(--green,#3d7c45);border-radius:999px}
.outil .barres div:nth-child(2) b{background:var(--slate,#a2b4cf)}
.outil .barres div:nth-child(3) b{background:var(--salmon,#bd6455)}
.outil .barres strong{grid-column:2;font-weight:700}
.outil .barres small{font-size:.82rem;font-weight:600;color:var(--green,#3d7c45)}
.outil .phrase{margin:1rem 0 0;font-weight:500}
.outil .erreur{color:var(--brick,#a63f29);font-weight:700}