/* LEAD with Néty · Module « Votre compétence est-elle visible ? » (épisode 5)
   Point de montage : <div class="outil" data-outil="competence-visible"></div>
   Tout est préfixé par [data-outil="competence-visible"] ; seules les variables --ot-* portent les couleurs.
   Mouvement : transform / opacity / stroke-dashoffset uniquement, sans rebond, neutralisé sous prefers-reduced-motion. */

[data-outil="competence-visible"]{
  --ot-bg:var(--lwn-white,#FFFFFF);
  --ot-surface:var(--lwn-white,#FFFFFF);
  --ot-surface-2:var(--lwn-or-soft,#F1E7D4);
  --ot-ink:var(--lwn-ink,#241820);
  --ot-muted:var(--lwn-ink-70,rgba(36,24,32,.72));
  --ot-heading:var(--lwn-aubergine,#3D2438);
  --ot-emph:var(--lwn-terracotta-deep,#A5522F);
  --ot-kicker:var(--lwn-or-dark,#9C7B4A);
  --ot-line:var(--lwn-creme-shade,#E7DBC9);
  --ot-line-strong:var(--lwn-or,#C9A876);
  --ot-hero-bg:var(--lwn-aubergine,#3D2438);
  --ot-hero-bg-2:var(--lwn-aubergine-deep,#2A1826);
  --ot-hero-ink:var(--lwn-creme,#F5EDE1);
  --ot-hero-emph:var(--lwn-or-bright,#D9B77E);
  --ot-hero-muted:rgba(245,237,225,.82);
  --ot-hero-line:rgba(217,183,126,.38);
  --ot-hero-track:rgba(245,237,225,.14);
  --ot-glow-1:rgba(217,183,126,.30);
  --ot-glow-2:rgba(197,107,74,.26);
  --ot-btn-bg:var(--lwn-aubergine,#3D2438);
  --ot-btn-ink:var(--lwn-creme,#F5EDE1);
  --ot-focus:var(--lwn-terracotta-deep,#A5522F);
  --ot-shadow:0 26px 60px -30px rgba(61,36,56,.42),0 4px 14px -8px rgba(61,36,56,.16);
  --ot-shadow-sm:0 12px 28px -16px rgba(61,36,56,.34);
  /* Graphiques */
  --ot-c1:var(--lwn-aubergine,#3D2438);       /* série principale, point fort */
  --ot-c2:var(--lwn-or,#C9A876);              /* remplissages standard */
  --ot-c3:var(--lwn-terracotta-deep,#A5522F); /* à travailler */
  --ot-c4:var(--lwn-or-dark,#9C7B4A);         /* en progrès, repères */
  --ot-c5:var(--lwn-creme-shade,#E7DBC9);     /* grille */
  --ot-track:var(--lwn-creme-shade,#E7DBC9);

  --ot-in:cubic-bezier(.16,1,.3,1);
  --ot-ease:cubic-bezier(.22,.61,.36,1);
  --ot-f-ed:var(--font-editorial,"Cormorant Garamond",Georgia,serif);
  --ot-f-di:var(--font-display,"Chillax",system-ui,sans-serif);
  --ot-f-bo:var(--font-body,"Inter",system-ui,-apple-system,sans-serif);

  display:block;
  position:relative;
  color:var(--ot-ink);
  font-family:var(--ot-f-bo);
  font-size:16px;
  line-height:1.55;
  text-align:left;
}
[data-outil="competence-visible"] *,
[data-outil="competence-visible"] *::before,
[data-outil="competence-visible"] *::after{box-sizing:border-box}
[data-outil="competence-visible"] [hidden]{display:none !important}
[data-outil="competence-visible"] .ot-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-outil="competence-visible"] .ot-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-outil="competence-visible"] .ot-ico-lg{width:24px;height:24px}

/* ---------- Typographie ---------- */
[data-outil="competence-visible"] .ot-k{font-family:var(--ot-f-di);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ot-kicker);margin:0 0 10px}
[data-outil="competence-visible"] .ot-h{font-family:var(--ot-f-ed);font-weight:600;font-size:clamp(2rem,6.4vw,2.9rem);line-height:1.04;letter-spacing:-.015em;color:var(--ot-heading);margin:0 0 12px}
[data-outil="competence-visible"] .ot-h em{font-style:italic;font-weight:500;color:var(--ot-emph)}
[data-outil="competence-visible"] .ot-h4{font-family:var(--ot-f-di);font-weight:600;font-size:1.12rem;line-height:1.3;color:var(--ot-heading);margin:0 0 6px}
[data-outil="competence-visible"] .ot-p{margin:0 0 10px;color:var(--ot-muted)}
[data-outil="competence-visible"] .ot-p:last-child{margin-bottom:0}
[data-outil="competence-visible"] .ot-p strong{color:var(--ot-heading);font-weight:600}

/* ---------- Boutons ---------- */
[data-outil="competence-visible"] .ot-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
[data-outil="competence-visible"] .ot-btn,
[data-outil="competence-visible"] .ot-btn-soft{appearance:none;-webkit-appearance:none;border:0;margin:0;border-radius:999px;min-height:48px;padding:12px 22px;font-family:var(--ot-f-di);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:.01em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;position:relative;transition:transform 200ms var(--ot-ease),opacity 200ms var(--ot-ease)}
[data-outil="competence-visible"] .ot-btn{background:var(--ot-btn-bg);color:var(--ot-btn-ink)}
[data-outil="competence-visible"] .ot-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ot-shadow-sm);opacity:0;transition:opacity 200ms var(--ot-ease);pointer-events:none}
[data-outil="competence-visible"] .ot-btn:hover{transform:translateY(-1px)}
[data-outil="competence-visible"] .ot-btn:hover::after{opacity:1}
[data-outil="competence-visible"] .ot-btn:active{transform:scale(.98)}
[data-outil="competence-visible"] .ot-btn[disabled]{opacity:.38;cursor:not-allowed;transform:none}
[data-outil="competence-visible"] .ot-btn[disabled]::after{opacity:0}
[data-outil="competence-visible"] .ot-btn-xl{min-height:56px;padding:14px 30px;font-size:17px;background:var(--ot-hero-emph);color:var(--ot-hero-bg-2)}
[data-outil="competence-visible"] .ot-btn-ghost{background:transparent;color:var(--ot-hero-ink);box-shadow:inset 0 0 0 1px var(--ot-hero-line)}
[data-outil="competence-visible"] .ot-btn-soft{background:var(--ot-surface-2);color:var(--ot-heading);font-weight:500;padding:12px 18px}
[data-outil="competence-visible"] .ot-btn-soft:hover{transform:translateY(-1px)}

[data-outil="competence-visible"] :focus{outline:none}
[data-outil="competence-visible"] :focus-visible{outline:3px solid var(--ot-focus);outline-offset:3px}
[data-outil="competence-visible"] .ot-welcome :focus-visible,
[data-outil="competence-visible"] .ot-hero :focus-visible{outline-color:var(--ot-hero-emph)}
[data-outil="competence-visible"] [tabindex="-1"]:focus,
[data-outil="competence-visible"] [tabindex="-1"]:focus-visible{outline:none}

/* ---------- Accueil : carte aubergine, dégradé qui dérive lentement ---------- */
[data-outil="competence-visible"] .ot-welcome{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:clamp(24px,5vw,40px);background:linear-gradient(150deg,var(--ot-hero-bg),var(--ot-hero-bg-2));color:var(--ot-hero-ink);box-shadow:var(--ot-shadow)}
[data-outil="competence-visible"] .ot-drift{position:absolute;inset:-45%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 32% 34%,var(--ot-glow-1),transparent 34%),radial-gradient(circle at 70% 66%,var(--ot-glow-2),transparent 36%);animation:ot-competence-visible-drift 14s ease-in-out infinite alternate;will-change:transform}
@keyframes ot-competence-visible-drift{from{transform:translate3d(-7%,-5%,0) rotate(0deg)}to{transform:translate3d(7%,5%,0) rotate(8deg)}}
[data-outil="competence-visible"] .ot-welcome-txt{margin:18px 0 24px;max-width:44ch;font-size:1.08rem;line-height:1.5;color:var(--ot-hero-ink)}
[data-outil="competence-visible"] .ot-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
[data-outil="competence-visible"] .ot-pills li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 13px;border-radius:999px;background:var(--ot-hero-track);font-family:var(--ot-f-di);font-weight:500;font-size:14px;color:var(--ot-hero-ink)}
[data-outil="competence-visible"] .ot-pills li.is-time{background:var(--ot-hero-emph);color:var(--ot-hero-bg-2);font-weight:600}
[data-outil="competence-visible"] .ot-pills .ot-ico{width:16px;height:16px}

/* ---------- Questions ---------- */
[data-outil="competence-visible"] .ot-quiz{border-radius:22px;padding:clamp(18px,4.5vw,30px);background:var(--ot-surface);box-shadow:var(--ot-shadow)}
[data-outil="competence-visible"] .ot-progress{display:flex;align-items:center;gap:14px;margin:0 0 22px}
[data-outil="competence-visible"] .ot-segs{flex:1;display:flex;gap:4px}
[data-outil="competence-visible"] .ot-seg{flex:1;height:6px;border-radius:999px;background:var(--ot-track);overflow:hidden}
[data-outil="competence-visible"] .ot-seg i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ot-line-strong),var(--ot-c4));transform:scaleX(0);transform-origin:0 50%;transition:transform 400ms var(--ot-in)}
[data-outil="competence-visible"] .ot-seg.is-on i{transform:none}
[data-outil="competence-visible"] .ot-count{font-family:var(--ot-f-di);font-weight:600;font-size:15px;color:var(--ot-heading);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:3.6em;text-align:right}
[data-outil="competence-visible"] .ot-viewport{position:relative}
[data-outil="competence-visible"] .ot-viewport.is-moving{overflow:hidden;transition:height 320ms var(--ot-in)}
[data-outil="competence-visible"] .ot-qcard{padding:2px 2px 4px}
[data-outil="competence-visible"] .ot-fs{border:0;margin:0;padding:0;min-width:0}
[data-outil="competence-visible"] .ot-legend{display:block;width:100%;padding:0;margin:0 0 18px;float:none}
[data-outil="competence-visible"] .ot-legend .ot-k{display:block}
[data-outil="competence-visible"] .ot-q{display:block;margin:0;font-family:var(--ot-f-di);font-weight:600;font-size:clamp(1.22rem,3.8vw,1.55rem);line-height:1.3;letter-spacing:-.005em;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-opts{display:grid;gap:10px}
[data-outil="competence-visible"] .ot-opt{position:relative;display:flex;gap:14px;align-items:center;min-height:60px;padding:12px 16px;border-radius:18px;background:var(--ot-surface);box-shadow:inset 0 0 0 1px var(--ot-line);color:var(--ot-ink);cursor:pointer;line-height:1.4;transition:transform 200ms var(--ot-ease),background-color 200ms var(--ot-ease),box-shadow 200ms var(--ot-ease)}
[data-outil="competence-visible"] .ot-opt::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ot-shadow-sm);opacity:0;transition:opacity 200ms var(--ot-ease);pointer-events:none}
[data-outil="competence-visible"] .ot-opt:hover{transform:translateY(-2px)}
[data-outil="competence-visible"] .ot-opt:hover::after{opacity:1}
[data-outil="competence-visible"] .ot-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
[data-outil="competence-visible"] .ot-letter{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ot-surface-2);font-family:var(--ot-f-di);font-weight:600;font-size:14px;color:var(--ot-heading);transition:background-color 200ms var(--ot-ease),color 200ms var(--ot-ease)}
[data-outil="competence-visible"] .ot-opt-txt{flex:1;min-width:0}
[data-outil="competence-visible"] .ot-check{flex:none;width:24px;height:24px;opacity:0;transition:opacity 200ms var(--ot-ease)}
[data-outil="competence-visible"] .ot-check-bg{fill:var(--ot-c1)}
[data-outil="competence-visible"] .ot-check-mark{fill:none;stroke:var(--ot-btn-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 240ms var(--ot-in) 60ms}
[data-outil="competence-visible"] .ot-opt.is-on{background:var(--ot-surface-2);box-shadow:inset 0 0 0 2px var(--ot-line-strong)}
[data-outil="competence-visible"] .ot-opt.is-on .ot-letter{background:var(--ot-c2);color:var(--ot-hero-bg-2)}
[data-outil="competence-visible"] .ot-opt.is-on .ot-check{opacity:1}
[data-outil="competence-visible"] .ot-opt.is-on .ot-check-mark{stroke-dashoffset:0}
[data-outil="competence-visible"] .ot-opt:has(input:focus-visible){outline:3px solid var(--ot-focus);outline-offset:2px}
[data-outil="competence-visible"] .ot-hint{margin:12px 0 0;font-size:13px;color:var(--ot-muted)}
@media (hover:none){[data-outil="competence-visible"] .ot-hint{display:none}}
[data-outil="competence-visible"] .ot-nav{display:flex;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:space-between;margin-top:20px}
[data-outil="competence-visible"] .ot-nav > *{min-width:0;white-space:nowrap}

/* ---------- Calcul ---------- */
[data-outil="competence-visible"] .ot-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:240px;border-radius:22px;background:var(--ot-surface);box-shadow:var(--ot-shadow);text-align:center;padding:24px}
[data-outil="competence-visible"] .ot-ring{width:64px;height:64px;transform:rotate(-90deg)}
[data-outil="competence-visible"] .ot-ring-bg{fill:none;stroke:var(--ot-track);stroke-width:4}
[data-outil="competence-visible"] .ot-ring-arc{fill:none;stroke:var(--ot-c2);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
[data-outil="competence-visible"] .ot-loader-txt{margin:0;font-family:var(--ot-f-di);font-weight:600;font-size:16px;color:var(--ot-heading)}

/* ---------- Résultat ---------- */
[data-outil="competence-visible"] .ot-result{display:grid;gap:16px}
[data-outil="competence-visible"] .ot-card{position:relative;margin:0;border-radius:20px;padding:clamp(18px,4.5vw,28px);background:var(--ot-surface);box-shadow:var(--ot-shadow)}
[data-outil="competence-visible"] .ot-card.is-alt{background:var(--ot-surface-2);box-shadow:none}
[data-outil="competence-visible"] .ot-hero{position:relative;border-radius:22px;padding:clamp(22px,5vw,36px);background:linear-gradient(150deg,var(--ot-hero-bg),var(--ot-hero-bg-2));color:var(--ot-hero-ink);box-shadow:var(--ot-shadow)}
[data-outil="competence-visible"] .ot-hero .ot-k{color:var(--ot-hero-emph)}
[data-outil="competence-visible"] .ot-hero .ot-h{color:var(--ot-hero-ink)}
[data-outil="competence-visible"] .ot-hero .ot-h em{color:var(--ot-hero-emph)}
[data-outil="competence-visible"] .ot-hero .ot-p{color:var(--ot-hero-muted);font-size:1.04rem;max-width:56ch}
[data-outil="competence-visible"] .ot-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
[data-outil="competence-visible"] .ot-chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 5px;border-radius:999px;background:var(--ot-hero-track);font-family:var(--ot-f-di);font-weight:500;font-size:14px;color:var(--ot-hero-ink)}
[data-outil="competence-visible"] .ot-chip-n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--ot-hero-track);font-weight:600;font-variant-numeric:tabular-nums}
[data-outil="competence-visible"] .ot-chips li.is-on{background:var(--ot-hero-emph);color:var(--ot-hero-bg-2);font-weight:600}
[data-outil="competence-visible"] .ot-chips li.is-on .ot-chip-n{background:var(--ot-hero-bg-2);color:var(--ot-hero-emph)}
[data-outil="competence-visible"] .ot-sparkles{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none;z-index:2}
[data-outil="competence-visible"] .ot-spark{position:absolute;left:-5px;top:-5px;fill:var(--ot-hero-emph)}

/* Graphiques */
[data-outil="competence-visible"] .ot-charts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
[data-outil="competence-visible"] .ot-fig figcaption{font-size:14px;color:var(--ot-muted);margin-top:12px}
[data-outil="competence-visible"] .ot-bars{list-style:none;margin:0;padding:0;display:grid;gap:16px}
[data-outil="competence-visible"] .ot-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
[data-outil="competence-visible"] .ot-bar-name{font-size:15px;font-weight:500;color:var(--ot-ink);line-height:1.3}
[data-outil="competence-visible"] .ot-bar-name b{font-family:var(--ot-f-di);font-weight:600;color:var(--ot-kicker);margin-right:6px}
[data-outil="competence-visible"] .ot-bar-val{font-family:var(--ot-f-di);font-weight:600;font-size:17px;color:var(--ot-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
[data-outil="competence-visible"] .ot-bar-val small{font-size:12px;font-weight:500;color:var(--ot-muted);margin-left:1px}
[data-outil="competence-visible"] .ot-bar svg{display:block;width:calc(100% - 12px);height:12px;margin:0 6px;overflow:visible}
[data-outil="competence-visible"] .ot-bar .b-track,
[data-outil="competence-visible"] .ot-bar .b-fill{fill:none;stroke-width:12px;stroke-linecap:round;vector-effect:non-scaling-stroke}
[data-outil="competence-visible"] .ot-bar .b-track{stroke:var(--ot-track)}
[data-outil="competence-visible"] .ot-bar .b-fill{stroke:var(--ot-c2);transform-box:fill-box;transform-origin:0 50%}
[data-outil="competence-visible"] .ot-bar.is-strong .b-fill{stroke:var(--ot-c1)}
[data-outil="competence-visible"] .ot-bar.is-weak .b-fill{stroke:var(--ot-c3)}
[data-outil="competence-visible"] .ot-bar.is-weak .ot-bar-val{color:var(--ot-c3)}
[data-outil="competence-visible"] .ot-tag{display:inline-flex;align-items:center;margin-top:8px;min-height:26px;padding:3px 11px;border-radius:999px;font-family:var(--ot-f-di);font-size:12.5px;font-weight:600;letter-spacing:.02em;background:var(--ot-surface-2);color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-bar.is-strong .ot-tag{background:var(--ot-c1);color:var(--ot-btn-ink)}
[data-outil="competence-visible"] .ot-bar.is-weak .ot-tag{background:transparent;color:var(--ot-c3);box-shadow:inset 0 0 0 1.5px var(--ot-c3)}

/* Tuiles, épisode, actions */
[data-outil="competence-visible"] .ot-grid2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
[data-outil="competence-visible"] .ot-ep{display:flex;gap:16px;align-items:flex-start}
[data-outil="competence-visible"] .ot-ep-num{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--ot-c1);font-family:var(--ot-f-di);font-size:1.15rem;font-weight:600;color:var(--ot-hero-emph);font-variant-numeric:tabular-nums}
[data-outil="competence-visible"] .ot-quote{font-family:var(--ot-f-ed);font-style:italic;font-weight:500;font-size:1.35rem;line-height:1.32;color:var(--ot-heading);margin:20px 0 0}
[data-outil="competence-visible"] .ot-card.is-alt > .ot-quote:first-child{margin-top:0}
[data-outil="competence-visible"] .ot-quote cite{display:block;font-family:var(--ot-f-di);font-style:normal;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ot-kicker);margin-top:10px}
[data-outil="competence-visible"] .ot-steps{counter-reset:ots;list-style:none;margin:0;padding:0;display:grid;gap:14px}
[data-outil="competence-visible"] .ot-steps li{counter-increment:ots;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;color:var(--ot-muted)}
[data-outil="competence-visible"] .ot-steps li::before{content:counter(ots);width:36px;height:36px;border-radius:12px;background:var(--ot-surface-2);color:var(--ot-heading);display:grid;place-items:center;font-family:var(--ot-f-di);font-weight:600;font-size:15px}
[data-outil="competence-visible"] .ot-steps strong{display:block;color:var(--ot-heading);font-family:var(--ot-f-di);font-weight:600;margin-bottom:2px}
[data-outil="competence-visible"] .ot-next{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--ot-surface-2);color:var(--ot-ink);font-size:15px}
[data-outil="competence-visible"] .ot-card.is-alt .ot-next{background:var(--ot-surface)}
[data-outil="competence-visible"] .ot-next strong{color:var(--ot-heading)}

/* Formulaire PDF */
[data-outil="competence-visible"] .ot-form-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-form-head .ot-h4{margin:0}
[data-outil="competence-visible"] .ot-fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin:16px 0 6px}
[data-outil="competence-visible"] .ot-field{display:grid;gap:6px}
[data-outil="competence-visible"] .ot-field label{font-family:var(--ot-f-di);font-weight:600;font-size:14px;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-field input{width:100%;min-height:50px;font:inherit;font-size:16px;padding:12px 16px;border-radius:14px;border:0;box-shadow:inset 0 0 0 1px var(--ot-line-strong);background:var(--ot-surface);color:var(--ot-ink)}
[data-outil="competence-visible"] .ot-field input:focus-visible{outline:3px solid var(--ot-focus);outline-offset:1px}
[data-outil="competence-visible"] .ot-err{color:var(--ot-emph);font-size:14px;margin:4px 0 10px;min-height:1.3em}
[data-outil="competence-visible"] .ot-msg{font-size:15px;color:var(--ot-heading);margin:12px 0 0}
[data-outil="competence-visible"] .ot-msg:empty{margin:0}
[data-outil="competence-visible"] .ot-fine{font-size:13px;color:var(--ot-muted);margin:10px 0 0}
[data-outil="competence-visible"] .ot-end{justify-content:center}

@media (max-width:420px){
  [data-outil="competence-visible"] .ot-btn{padding:12px 18px}
  [data-outil="competence-visible"] .ot-opt{padding:12px 12px;gap:12px}
  [data-outil="competence-visible"] .ot-quiz{padding:16px 12px 14px;border-radius:20px}
  [data-outil="competence-visible"] .ot-letter{width:30px;height:30px}
  [data-outil="competence-visible"] .ot-nav .ot-btn,[data-outil="competence-visible"] .ot-nav .ot-btn-soft{padding:12px 14px;font-size:15px;gap:6px}
  [data-outil="competence-visible"] .ot-card,[data-outil="competence-visible"] .ot-hero{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){
  [data-outil="competence-visible"] *,
  [data-outil="competence-visible"] *::before,
  [data-outil="competence-visible"] *::after{animation:none !important;transition:none !important}
  [data-outil="competence-visible"] .ot-opt:hover,
  [data-outil="competence-visible"] .ot-btn:hover,
  [data-outil="competence-visible"] .ot-btn-soft:hover{transform:none}
}

/* ---------- Spécifique au test : jauge, critères, niveaux ---------- */
[data-outil="competence-visible"] .ot-score{display:grid;gap:10px 28px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
[data-outil="competence-visible"] .ot-score .ot-h{font-size:clamp(1.8rem,5.6vw,2.5rem)}
[data-outil="competence-visible"] .ot-gauge{display:block;width:100%;max-width:330px;height:auto;margin:0 auto;overflow:visible}
[data-outil="competence-visible"] .ot-gauge .g-track{fill:none;stroke:var(--ot-hero-track);stroke-width:20;stroke-linecap:round}
[data-outil="competence-visible"] .ot-gauge .g-val{fill:none;stroke:var(--ot-hero-emph);stroke-width:20;stroke-linecap:round}
[data-outil="competence-visible"] .ot-gauge .g-tick{stroke:var(--ot-hero-bg);stroke-width:3}
[data-outil="competence-visible"] .ot-gauge .g-tlab{font-family:var(--ot-f-di);font-size:15px;font-weight:500;fill:var(--ot-hero-muted)}
[data-outil="competence-visible"] .ot-gauge .g-knob{transform-box:view-box;transform-origin:160px 150px}
[data-outil="competence-visible"] .ot-gauge .g-knob-o{fill:var(--ot-hero-ink)}
[data-outil="competence-visible"] .ot-gauge .g-knob-i{fill:var(--ot-hero-bg)}
[data-outil="competence-visible"] .ot-gauge .g-num{font-family:var(--ot-f-di);font-size:56px;font-weight:600;fill:var(--ot-hero-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
[data-outil="competence-visible"] .ot-gauge .g-den{font-family:var(--ot-f-di);font-size:16px;font-weight:500;fill:var(--ot-hero-muted)}
[data-outil="competence-visible"] .ot-crit .ot-bar svg{height:20px}
[data-outil="competence-visible"] .b-halo{stroke:var(--ot-surface);stroke-width:5;vector-effect:non-scaling-stroke}
[data-outil="competence-visible"] .b-seuil{stroke:var(--ot-heading);stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
[data-outil="competence-visible"] .ot-bar.is-mid .b-fill{stroke:var(--ot-c4)}
[data-outil="competence-visible"] .ot-crit-items{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--ot-muted)}
[data-outil="competence-visible"] .ot-crit-items li{display:grid;grid-template-columns:5.2em 1fr;gap:8px}
[data-outil="competence-visible"] .ot-crit-items b{font-family:var(--ot-f-di);font-weight:600;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-legend-line{display:flex;align-items:center;gap:10px}
[data-outil="competence-visible"] .ot-legend-line svg{flex:none;width:18px;height:16px}
[data-outil="competence-visible"] .ot-tile-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-tile-head .ot-k{margin:0}
[data-outil="competence-visible"] .ot-tile.is-alt .ot-tile-head{color:var(--ot-c3)}
[data-outil="competence-visible"] .ot-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
[data-outil="competence-visible"] .ot-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:44px;padding:8px 14px;border-radius:14px;background:var(--ot-surface-2);color:var(--ot-ink);font-size:15px}
[data-outil="competence-visible"] .ot-list.is-weak li{background:var(--ot-surface)}
[data-outil="competence-visible"] .ot-list-n{font-family:var(--ot-f-di);font-weight:600;white-space:nowrap;color:var(--ot-heading);font-variant-numeric:tabular-nums}
[data-outil="competence-visible"] .ot-list.is-weak .ot-list-n{color:var(--ot-c3)}
[data-outil="competence-visible"] .ot-empty{font-size:15px;color:var(--ot-muted);margin:0}
[data-outil="competence-visible"] .ot-from{display:block;margin-top:4px;font-style:normal;font-family:var(--ot-f-di);font-weight:500;font-size:13px;color:var(--ot-kicker)}
[data-outil="competence-visible"] .ot-levels{list-style:none;margin:0;padding:0;display:grid;gap:8px}
[data-outil="competence-visible"] .ot-levels li{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:14px;color:var(--ot-muted);font-size:15px}
[data-outil="competence-visible"] .ot-levels li.is-on{background:var(--ot-surface-2)}
[data-outil="competence-visible"] .ot-levels b{font-family:var(--ot-f-di);font-weight:600;color:var(--ot-kicker);font-variant-numeric:tabular-nums}
[data-outil="competence-visible"] .ot-levels strong{display:block;color:var(--ot-heading);font-family:var(--ot-f-di);font-weight:600}
[data-outil="competence-visible"] details.ot-more{margin-top:12px}
[data-outil="competence-visible"] details.ot-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:var(--ot-f-di);font-weight:600;font-size:14px;color:var(--ot-heading)}
[data-outil="competence-visible"] .ot-weak{margin:0;padding-left:20px;color:var(--ot-ink);display:grid;gap:6px}