/* KONSENT STUDIO · banc/manuel/roue-interactive.css — la roue qu'on essaie dans le manuel (12/11/2026) */
.roue-essai{--re-verre:color-mix(in srgb, var(--surface) 88%, transparent);--re-noyau:#2B2C30;--re-noyau-trait:#3A3B40;--re-vert:#2FBF7E;--re-texte-noyau:#E9ECEA;
  margin:8px 0 40px;padding:24px;border-radius:24px;background:var(--surface2);border:1px solid var(--lineSoft);outline:none}
:root[data-theme="light"] .roue-essai{--re-noyau:#4A4B4F;--re-noyau-trait:#5A5B60}
.re-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.re-cats{display:flex;gap:6px;background:var(--surface);padding:4px;border-radius:999px;border:1px solid var(--lineSoft)}
.re-cats button{font:inherit;font-size:13.5px;font-weight:600;border:0;border-radius:999px;padding:7px 14px;background:transparent;color:var(--mut);cursor:pointer}
.re-cats button[aria-selected="true"]{background:var(--re-vert);color:#0B2A1C}
.re-reperes{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px;cursor:pointer}
.re-corps{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);gap:28px;align-items:center}
.re-scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.re-fil{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--lineSoft);font-size:13.5px;max-width:100%;white-space:nowrap;overflow:hidden}
.re-poignee{color:var(--faint);letter-spacing:-2px}
.re-pastilles{display:inline-flex;gap:4px}.re-pastilles i{width:6px;height:6px;border-radius:50%;background:var(--faint);opacity:.6}.re-pastilles i.actif{background:var(--re-vert);opacity:1}
.re-fil-cible{color:var(--mut)}.re-fil-geste:not(:empty)::before{content:'· ';color:var(--faint);font-weight:400}
.re-svg{width:100%;max-width:560px;height:auto;user-select:none;-webkit-user-select:none;touch-action:none;overflow:visible}
.re-verre{fill:var(--re-verre);stroke:var(--lineSoft)}
.re-outil circle{fill:var(--surface);stroke:var(--line);stroke-width:1.2;transition:stroke .15s,fill .15s}
.re-outil.principal circle{stroke:color-mix(in srgb, var(--re-vert) 55%, var(--line))}
.re-outil.vise circle{stroke:var(--re-vert);stroke-width:2.4}
.re-outil{cursor:pointer}
.re-glyphe{font-size:16px;font-weight:600;fill:var(--text);pointer-events:none}
.re-nom-outil{font-size:13px;fill:var(--mut);pointer-events:none}
.re-outil.vise .re-nom-outil{fill:var(--text);font-weight:600}
.re-noyau-fond{fill:var(--re-noyau-trait)}
.re-secteur path{fill:var(--re-noyau);transition:fill .12s}
.re-secteur{cursor:pointer}.re-secteur.vide{cursor:default}
.re-secteur.vise path{fill:var(--re-vert)}
.re-nom-secteur{font-size:13.5px;font-weight:500;fill:var(--re-texte-noyau);pointer-events:none}
.re-secteur.vise .re-nom-secteur{fill:#0B2A1C;font-weight:700}
/* le tour des matières : des sphères sur l'anneau, leur nom sur une pastille dehors (comme le cadran des matières du studio) */
.re-tour{cursor:pointer}
.re-tour-prise{fill:rgba(0,0,0,0)}
.re-tour-boule{transition:transform .16s;transform-box:fill-box;transform-origin:center;pointer-events:none}
.re-tour-anneau{fill:none;stroke:transparent;stroke-width:2.4;pointer-events:none}
.re-tour-pastille{fill:color-mix(in srgb, var(--surface) 92%, transparent);stroke:var(--line);stroke-width:1;pointer-events:none}
.re-tour-nom{font-size:12px;font-weight:500;fill:var(--mut);pointer-events:none}
.re-tour.vise .re-tour-boule{transform:scale(1.14)}
.re-tour.vise .re-tour-anneau,.re-tour.courant .re-tour-anneau{stroke:var(--re-vert)}
.re-tour.vise .re-tour-nom,.re-tour.courant .re-tour-nom{fill:var(--text);font-weight:600}
.re-tour.vise .re-tour-pastille{stroke:var(--re-vert)}
.re-coeur{cursor:pointer}
.re-coeur > circle{fill:#1A1B1E;stroke:var(--re-noyau-trait);stroke-width:6}
.re-coeur.vise > circle{fill:var(--re-vert)}
.re-coeur-nom{font-size:13px;font-weight:700;fill:#fff;pointer-events:none}
.re-coeur-glyphe{fill:#fff}
.re-coeur-petit{font-size:9.5px;letter-spacing:.08em;fill:rgba(255,255,255,.7);pointer-events:none}
.re-coeur-valeur{font-size:24px;font-weight:700;fill:var(--re-vert);pointer-events:none}
.re-jauge-fond{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4;stroke-linecap:round}
.re-jauge{fill:none;stroke:var(--re-vert);stroke-width:4;stroke-linecap:round}
.re-jauge-bout{fill:#fff;stroke:var(--re-vert);stroke-width:2}
.re-option circle{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.re-option{cursor:pointer}.re-option.vise circle,.re-option.actif circle{stroke:var(--re-vert);stroke-width:2.4}
.re-val{font-size:13px;font-weight:700;fill:var(--text);pointer-events:none}
.re-unite{font-size:9px;fill:var(--faint);pointer-events:none}
.re-etiquette{font-size:13px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:var(--surface2);stroke-width:4px}
.re-variante circle{fill:var(--surface);stroke:var(--re-vert);stroke-width:1.6}.re-variante{cursor:pointer}.re-variante:hover circle{fill:var(--re-vert)}
.re-nom-variante{font-size:12.5px;fill:var(--text);paint-order:stroke;stroke:var(--surface2);stroke-width:4px}
.re-sphere{cursor:pointer}
.re-repere line{stroke:var(--re-vert);stroke-width:1.2;stroke-dasharray:3 3}.re-repere circle{fill:var(--re-vert)}
.re-repere text{font-size:12.5px;font-weight:600;fill:var(--re-vert);paint-order:stroke;stroke:var(--surface2);stroke-width:4px}
.re-legende{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--lineSoft);font-size:13px;color:var(--mut);min-height:34px}
.re-legende b{color:var(--text)}
.re-valeur{padding:1px 8px;border-radius:999px;background:color-mix(in srgb, var(--re-vert) 16%, transparent);color:var(--text);font-weight:700;border:1px solid color-mix(in srgb, var(--re-vert) 55%, transparent)}
.re-panneau{background:var(--surface);border-radius:20px;padding:22px 24px;border:1px solid var(--lineSoft);min-height:300px}
.re-panneau h3{font-size:22px;font-weight:600;margin:0 0 10px}
.re-panneau p{color:var(--mut);margin:0 0 12px;font-size:14.5px}
.re-panneau dl{margin:6px 0 0;display:grid;gap:0}
.re-panneau dl div{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.re-panneau dt{font-weight:600}.re-panneau dd{margin:0;color:var(--mut)}
.re-eyebrow{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)!important;font-weight:600;margin-bottom:6px!important}
.re-message{color:var(--text)!important;background:color-mix(in srgb, var(--re-vert) 14%, transparent);border-radius:12px;padding:10px 12px}
.re-aide{font-size:13px;color:var(--faint);margin:14px 0 0;text-align:center}
.roue-essai.sans-reperes .re-repere{display:none}
@media (max-width:900px){ .re-corps{grid-template-columns:minmax(0, 1fr)} .roue-essai{padding:16px} }
.re-icone{fill:none;stroke:var(--text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.re-outil.vise .re-icone{stroke:var(--re-vert)}
.re-coeur-icone{stroke:#fff}
.re-coeur.vise .re-coeur-icone{stroke:#0B2A1C}.re-coeur.vise .re-coeur-nom{fill:#0B2A1C}
.re-variante:hover .re-icone{stroke:#0B2A1C}
.re-nom-outil.voile{opacity:0}
/* 12/11 : le cadran des matières qu'on essaie */
.re-mopt{cursor:pointer}
.re-mopt-anneau{fill:rgba(0,0,0,0);stroke:transparent;stroke-width:2.4;transition:stroke .12s}
.re-mopt-anneau.fond{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.re-mopt.survol .re-mopt-anneau{stroke:color-mix(in srgb, var(--re-vert) 60%, transparent)}
.re-mopt.vise .re-mopt-anneau{stroke:var(--re-vert);stroke-width:2.6}
.re-mopt-pastille{stroke:rgba(255,255,255,.28);stroke-width:1}
.re-mopt-nom{font-size:11px;fill:var(--mut);pointer-events:none;paint-order:stroke;stroke:var(--surface2);stroke-width:3px}
.re-mopt.vise .re-mopt-nom,.re-mopt.survol .re-mopt-nom{fill:var(--text);font-weight:600}
.re-mopt-mot{font-size:11.5px;font-weight:700;fill:var(--text);pointer-events:none}
.re-mopt.vise .re-mopt-mot{fill:var(--re-vert)}
.re-boule{pointer-events:none}
.re-sphere-anneau{fill:transparent;stroke:transparent;stroke-width:2.4}.re-sphere:hover .re-sphere-anneau{stroke:var(--re-vert)}
.re-apercu{display:flex;align-items:center;gap:18px;margin:4px 0 16px}
.re-apercu h3{margin:0 0 4px!important;font-size:19px!important}.re-apercu p{margin:0!important;font-size:13.5px!important}
.re-apercu-boule{flex:none;width:152px;height:152px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
/* 12/11 : montages du manuel vivant */
.roue-essai.re-seule .re-cats{display:none}
.roue-essai.re-sans-panneau .re-corps{grid-template-columns:minmax(0, 1fr)}
.roue-essai.re-sans-panneau .re-panneau,.roue-essai.re-sans-panneau .re-aide{display:none}
/* 12/11 : les touches d'une étape — allumées (un halo qui respire) ou éteintes */
.roue-essai .eteint{opacity:.2;pointer-events:none}
.roue-essai .re-outil.appel>circle{stroke:var(--re-vert);stroke-width:2.2;animation:re-appel 1.8s ease-in-out infinite}
.roue-essai .re-outil.appel .re-icone{stroke:var(--re-vert)}
.roue-essai .re-outil.appel .re-nom-outil{fill:var(--text);font-weight:600}
.roue-essai .re-secteur.appel:not(.vise) path{fill:color-mix(in srgb, var(--re-vert) 26%, var(--re-noyau));animation:re-appel-secteur 1.8s ease-in-out infinite}
.roue-essai .re-coeur.appel>circle{stroke:var(--re-vert)}
@keyframes re-appel{0%,100%{filter:drop-shadow(0 0 0 rgba(37,227,137,0))}50%{filter:drop-shadow(0 0 9px rgba(37,227,137,.75))}}
@keyframes re-appel-secteur{0%,100%{fill:color-mix(in srgb, var(--re-vert) 18%, var(--re-noyau))}50%{fill:color-mix(in srgb, var(--re-vert) 42%, var(--re-noyau))}}
/* le repère d'un dosage : la valeur à atteindre */
.re-option.repere>circle{stroke:var(--re-vert);stroke-width:2;stroke-dasharray:3 3;animation:re-appel 1.8s ease-in-out infinite}
.re-option.repere.vise>circle{stroke-dasharray:none}
.re-jauge-repere{stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.re-jauge-repere.atteint{stroke:var(--re-vert)}
.re-legende.refus{animation:re-refus .4s}
@keyframes re-refus{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){ .roue-essai .appel>circle,.roue-essai .re-secteur.appel path,.re-option.repere>circle{animation:none} }
/* la place du doigt autour d'un outil : plus large que son bouton, invisible */
.roue-essai .re-outil circle.re-touche{fill:transparent!important;stroke:none!important;filter:none!important}

/* 13/11 : la jauge du cadran dans la bande du noyau — large, graduée, un gros point blanc à faire tourner */
.re-jauge-voile{fill:none;stroke:color-mix(in srgb, var(--re-noyau) 92%, #000)}
.re-jauge-fond{stroke-width:14}.re-jauge{stroke-width:14}
.re-jauge-trait{stroke:rgba(255,255,255,.28);stroke-width:1.6;stroke-linecap:round}
.re-jauge-borne{font-size:12px;font-weight:600;fill:rgba(255,255,255,.55);pointer-events:none}
.re-jauge-cible{font-size:13px;font-weight:700;fill:#fff;pointer-events:none}.re-jauge-cible.atteint{fill:var(--re-vert)}
.re-jauge-repere{stroke-width:3.2}
.re-jauge-poignee{cursor:grab}.re-jauge-poignee.tenue{cursor:grabbing}
.re-jauge-poignee .re-jauge-bout{fill:#fff;stroke:var(--re-vert);stroke-width:4;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.re-jauge-poignee .point{fill:var(--re-vert)}
.re-jauge-poignee .halo{fill:color-mix(in srgb, var(--re-vert) 22%, transparent);opacity:0;transform-box:fill-box;transform-origin:center}
.re-jauge-poignee.appel .halo{animation:re-jauge-halo 1.8s ease-out infinite}
.re-jauge-poignee.tenue .halo{opacity:1}
@keyframes re-jauge-halo{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.re-jauge-fantome{pointer-events:none}
.re-jauge-fantome circle{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.7);stroke-width:2;stroke-dasharray:4 4}
.re-jauge-fantome circle.point{fill:rgba(255,255,255,.75);stroke:none}
@media (prefers-reduced-motion:reduce){ .re-jauge-poignee.appel .halo{animation:none} .re-jauge-fantome{display:none} }