/* =====================================================================
   COMPÉTENCES — tableau périodique, tout dans un écran (nuit par défaut, jour via html[data-theme="light"])
   Taille des cases : --tile, calculée par skills.js selon la place disponible.
   ===================================================================== */
.pt{--acc:#14e0b4;--card:rgba(255,255,255,.035);--card-hi:rgba(255,255,255,.07);--line:rgba(255,255,255,.1);--line-hi:rgba(255,255,255,.2);gap:10px;padding-top:10px}
:root[data-theme="light"] .pt{--acc:#0f9f82;--card:#fff;--card-hi:#fff;--line:rgba(20,26,46,.1);--line-hi:rgba(20,26,46,.2)}
[data-fam="bi"]{--c:#f5c84c;--c-rgb:245,200,76}
[data-fam="pp"]{--c:#a98bff;--c-rgb:169,139,255}
[data-fam="code"]{--c:#14e0b4;--c-rgb:20,224,180}
[data-fam="data"]{--c:#46c3ff;--c-rgb:70,195,255}
[data-fam="web"]{--c:#ff7a93;--c-rgb:255,122,147}
[data-fam="ind"]{--c:#ff9f43;--c-rgb:255,159,67}
[data-fam="meth"]{--c:#8fd14f;--c-rgb:143,209,79}
[data-fam="soft"]{--c:#e88cff;--c-rgb:232,140,255}
[data-fam="lang"]{--c:#c9d1e6;--c-rgb:201,209,230}
:root[data-theme="light"] [data-fam="bi"]{--c:#b98500;--c-rgb:185,133,0}
:root[data-theme="light"] [data-fam="pp"]{--c:#6b4fd6;--c-rgb:107,79,214}
:root[data-theme="light"] [data-fam="code"]{--c:#0f9f82;--c-rgb:15,159,130}
:root[data-theme="light"] [data-fam="data"]{--c:#0d84bd;--c-rgb:13,132,189}
:root[data-theme="light"] [data-fam="web"]{--c:#d2405d;--c-rgb:210,64,93}
:root[data-theme="light"] [data-fam="ind"]{--c:#c96a10;--c-rgb:201,106,16}
:root[data-theme="light"] [data-fam="meth"]{--c:#4f8f1a;--c-rgb:79,143,26}
:root[data-theme="light"] [data-fam="soft"]{--c:#a43dbd;--c-rgb:164,61,189}
:root[data-theme="light"] [data-fam="lang"]{--c:#5a6480;--c-rgb:90,100,128}

/* filtres : toutes les catégories visibles, sur plusieurs lignes si besoin (le tableau s'adapte à la place restante) */
.pt-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;flex:none;padding:2px}
@media (max-width:600px){ .pt-filters{gap:4px} .pt-chip{padding:5px 8px;font-size:11.5px;gap:5px} }
.pt-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;color:var(--dim);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .1s ease-out}
.pt-chip i{width:8px;height:8px;border-radius:3px;background:var(--c)}
.pt-chip:hover{color:var(--ink)}
.pt-chip:active{transform:scale(.97)}
.pt-chip.is-on{color:var(--ink);background:var(--card-hi);box-shadow:inset 0 0 0 1.5px var(--c,var(--acc))}

.pt-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.pt-tablewrap{min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pt-table{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap,8px);margin:0 auto;width:calc(var(--cols,8) * var(--tile,72px) + (var(--cols,8) - 1) * var(--gap,8px))}
.pt-el{flex:none;width:var(--tile,72px);height:var(--tile,72px)}

/* un élément (taille proportionnelle à --tile) */
.pt-el{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border:0;border-radius:calc(var(--tile) * .16);cursor:pointer;
  font-family:inherit;color:var(--ink);background:linear-gradient(160deg,rgba(var(--c-rgb),.2),rgba(var(--c-rgb),.05) 70%);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.42);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,opacity .3s ease,filter .3s ease}
.pt-el.is-m{box-shadow:inset 0 0 0 1.5px rgba(var(--c-rgb),.75)}
.pt-el.is-m::after{content:"";position:absolute;left:50%;bottom:calc(var(--tile) * .07);width:calc(var(--tile) * .07);height:calc(var(--tile) * .07);border-radius:50%;background:var(--c);transform:translateX(-50%);box-shadow:0 0 6px var(--c)}
.pt-el__n{position:absolute;left:calc(var(--tile) * .1);top:calc(var(--tile) * .07);font-size:calc(var(--tile) * .14);color:var(--dim);font-variant-numeric:tabular-nums}
.pt-el__m{position:absolute;right:calc(var(--tile) * .1);top:calc(var(--tile) * .07);font-size:calc(var(--tile) * .14);font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.pt-el__s{font-size:calc(var(--tile) * .36);font-weight:600;line-height:1;margin-top:calc(var(--tile) * -.04)}
.pt-el__name{margin-top:calc(var(--tile) * .06);max-width:92%;font-size:clamp(7px,calc(var(--tile) * .13),11.5px);line-height:1.1;color:var(--dim);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-el:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(var(--c-rgb),.85),0 8px 20px rgba(var(--c-rgb),.18)}
.pt-el.is-on{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--c),0 0 0 3px rgba(var(--c-rgb),.2),0 12px 26px rgba(var(--c-rgb),.25)}
.pt-el.is-on .pt-el__name{color:var(--ink)}
.pt-el.is-dim{opacity:.2;filter:saturate(.3)}
.pt-el:focus-visible,.pt-chip:focus-visible,.pt-rx__el:focus-visible,.pt-card__proj a:focus-visible,.pt-card__close:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
:root[data-theme="light"] .pt-el{background:linear-gradient(160deg,rgba(var(--c-rgb),.14),#fff 75%)}
@media (prefers-reduced-motion:no-preference){ .pt.is-intro .pt-el{animation:ptIn .45s calc(var(--i) * 22ms) cubic-bezier(.2,.8,.2,1) both} }
@keyframes ptIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
.pt-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:8px 0 0;font-size:11.5px;color:var(--dim)}
.pt-legend i{font-style:normal;font-weight:600;color:var(--ink);margin-right:3px}

/* fiche */
.pt-side{min-height:0;display:flex}
.pt-card{position:relative;flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:18px 18px 16px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 rgba(var(--c-rgb),.7)}
.pt-card::-webkit-scrollbar{display:none}
:root[data-theme="light"] .pt-card{box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 rgba(var(--c-rgb),.7),0 10px 30px rgba(20,26,46,.06)}
.pt-card__close{display:none}
.pt-card__head{display:flex;align-items:center;gap:12px}
.pt-card__sym{position:relative;display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:14px;font-size:1.65rem;font-weight:600;color:var(--ink);
  background:linear-gradient(160deg,rgba(var(--c-rgb),.3),rgba(var(--c-rgb),.06));box-shadow:inset 0 0 0 1.5px var(--c)}
.pt-card__sym i{position:absolute;left:7px;top:5px;font-size:10px;font-style:normal;font-weight:500;color:var(--dim)}
.pt-card h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.pt-card__head p{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.pt-card__d{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.pt-card__seen{display:inline-block;margin:10px 0 0;padding:4px 10px;border-radius:999px;font-size:12px;color:var(--c);background:rgba(var(--c-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.35)}
.pt-card h3{margin:14px 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pt-card__proj{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.pt-card__proj a{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:8px;font-size:13px;color:var(--ink);text-decoration:none}
.pt-card__proj a:hover{background:var(--card-hi)}
.pt-card__proj em{font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap}
.pt-card__more{padding:2px 8px;font-size:12px;color:var(--dim)}
.pt-card__rx{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.pt-card__rx li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.pt-rx{display:inline-flex;align-items:center;gap:4px}
.pt-rx b{font-weight:500;color:var(--dim)}
.pt-rx__el{display:grid;place-items:center;min-width:28px;height:28px;padding:0 5px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);
  background:rgba(var(--c-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.55);transition:transform .15s ease-out}
.pt-rx__el:hover{transform:translateY(-2px)}
.pt-rx__p{font-weight:500;color:var(--ink)}
.pt-rx__p b{font-weight:500;color:var(--dim);margin-right:2px}

/* tablette / téléphone : le tableau prend toute la place, la fiche s'ouvre par-dessus */
@media (max-width:760px){
  .pt-layout{grid-template-columns:1fr}
  .pt-side{position:fixed;left:10px;right:10px;bottom:10px;z-index:50;max-height:62dvh;transform:translateY(calc(100% + 20px));transition:transform .35s cubic-bezier(.2,.9,.25,1)}
  .pt.is-card .pt-side{transform:none}
  .pt-card{background:var(--frame-bg,#0b0d16);box-shadow:inset 0 0 0 1px var(--line-hi),inset 0 3px 0 rgba(var(--c-rgb),.8),0 -10px 40px rgba(0,0,0,.5)}
  :root[data-theme="light"] .pt-card{background:#fff}
  .pt-card__close{display:grid;place-items:center;position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:var(--ink);background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--line)}
  .pt-legend{font-size:10.5px;gap:2px 10px}
}
@media (prefers-reduced-motion:reduce){ .pt-el,.pt-chip,.pt-rx__el,.pt-side{transition:none} }

/* ----- recherche + chiffres clés ----- */
.pt-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.pt-search{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 300px;min-width:200px;height:38px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
.pt-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
.pt-search svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.pt-search input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none}
.pt-search input::placeholder{color:var(--dim)}
.pt-search input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6}
.pt-search output{position:absolute;left:14px;top:calc(100% + 6px);z-index:5;padding:5px 10px;border-radius:8px;font-size:12px;color:var(--ink);background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--line)}
.pt-kpis{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pt-kpis span{display:inline-flex;align-items:baseline;gap:5px;padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--dim);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.pt-kpis b{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pt-el.is-hit{box-shadow:inset 0 0 0 2px var(--c),0 0 0 3px rgba(var(--c-rgb),.25),0 0 18px rgba(var(--c-rgb),.35)}

/* ----- noms complets sur deux lignes (plus de « Power Autom… ») ----- */
.pt-el__name{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.05;max-width:94%;
  font-size:clamp(6.5px,calc(var(--tile) * .118),11px);word-break:normal;overflow-wrap:anywhere;hyphens:none}

/* ----- fiche : étiquettes, jauge d'utilisation, même famille ----- */
.pt-card__head p.pt-card__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;letter-spacing:.04em}
.pt-card__tags span{padding:3px 8px;border-radius:999px;font-size:10px;line-height:1.2;color:var(--c);background:rgba(var(--c-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.35)}
.pt-card__tags .is-m{color:var(--ink);background:rgba(var(--c-rgb),.22)}
.pt-meter{display:grid;gap:6px;margin:12px 0 0;font-size:12px;font-weight:500;color:var(--c)}
.pt-meter i{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--c) var(--p),rgba(var(--c-rgb),.14) var(--p));box-shadow:0 0 10px rgba(var(--c-rgb),.25)}
.pt-card__same{display:flex;flex-wrap:wrap;gap:6px}
.pt-card__same .pt-rx__el{width:34px;height:34px}
@media (max-width:760px){ .pt-top{gap:6px} .pt-search{flex:1 1 100%;height:34px} .pt-kpis{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .pt-kpis span{flex-direction:column;align-items:center;gap:1px;padding:4px 2px;border-radius:10px;font-size:9.5px;line-height:1.1;text-align:center} .pt-kpis b{font-size:14px} }
@media (max-height:700px){ .pt-kpis{display:none} }
.pt-card.c1 .pt-h-same,.pt-card.c1 .pt-card__same,.pt-card.c2 .pt-h-rx,.pt-card.c2 .pt-card__rx{display:none}