/* Foresportia team page — exact mockup prototype */
body.fs-team-product-page .tp,
body.fs-team-product-page .tp *,
body.fs-team-product-page .tp *::before,
body.fs-team-product-page .tp *::after { box-sizing:border-box; }

:root{
  --tp-bg:#f7f9fd;
  --tp-card:#fff;
  --tp-soft:#fbfcff;
  --tp-text:#102044;
  --tp-muted:#66738e;
  --tp-muted2:#8590a7;
  --tp-border:#dfe6f1;
  --tp-blue:#155eef;
  --tp-blue-dark:#0b2f79;
  --tp-green:#11a75b;
  --tp-red:#ef4057;
  --tp-amber:#e7a51c;
  --tp-orange:#f4a500;
  --tp-purple:#7d55e8;
  --tp-radius:12px;
  --tp-shadow:0 6px 18px rgba(31,55,98,.055);
  --tp-max:1280px;
}

[data-theme="dark"]{
  --tp-bg:#0d1626;
  --tp-card:#131f32;
  --tp-soft:#17253a;
  --tp-text:#eef4ff;
  --tp-muted:#aab7cb;
  --tp-muted2:#8797b0;
  --tp-border:rgba(142,164,198,.16);
  --tp-shadow:0 7px 22px rgba(0,0,0,.22);
}

html{background:var(--tp-bg);scroll-behavior:smooth;}
body.fs-team-product-page{
  margin:0;
  background:var(--tp-bg)!important;
  color:var(--tp-text);
  font-size:15px;
  overflow-x:hidden;
}
body.fs-team-product-page .tp img,
body.fs-team-product-page .tp svg{display:block;max-width:100%;}
body.fs-team-product-page .tp a{color:inherit;text-decoration:none;}
/* body.fs-team-product-page .tp button{font:inherit;} */
.tp{
  background:var(--tp-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tp-shell{width:min(var(--tp-max),calc(100% - 38px));margin-inline:auto;}

/* HERO */
.tp-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 300px at 78% 18%,rgba(83,132,241,.08),transparent 68%),
    linear-gradient(180deg,#fbfdff 0%,#f5f8fd 100%);
  border-bottom:1px solid var(--tp-border);
}
[data-theme="dark"] .tp-hero{
  background:
    radial-gradient(900px 300px at 78% 18%,rgba(83,132,241,.08),transparent 68%),
    linear-gradient(180deg,#101b2d 0%,#0f1929 100%);
}
.tp-breadcrumb{
  display:flex;align-items:center;gap:8px;
  padding-top:18px;margin-bottom:16px;
  color:#70809d;font-size:12px;font-weight:600;
}
.tp-breadcrumb strong{color:var(--tp-text);}
.tp-identity-row{
  position:relative;min-height:180px;
  display:flex;align-items:flex-start;
}
.tp-team-id{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:25px;
  width:540px;padding:6px 0 21px;
}
.tp-logo-box{
  width:116px;height:136px;flex:0 0 116px;
  display:grid;place-items:center;
}
.tp-logo-box img{max-width:108px;max-height:132px;filter:drop-shadow(0 8px 15px rgba(12,27,56,.09));}
.tp-team-copy h1{margin:0;font-size:40px;line-height:1;letter-spacing:-.045em;color:var(--tp-text);font-weight:850;}
.tp-nickname{margin:7px 0 10px;color:var(--tp-muted);font-size:13px;}
.tp-chips{display:flex;flex-wrap:wrap;gap:7px;}
.tp-chips span,.tp-chips a{
  min-height:29px;padding:5px 9px;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--tp-border);border-radius:8px;
  background:rgba(255,255,255,.76);
  color:#40506d;font-size:11px;font-weight:700;
}
[data-theme="dark"] .tp-chips span,[data-theme="dark"] .tp-chips a{background:rgba(22,35,55,.75);color:#dbe5f5;}
.tp-chips img{width:16px;height:12px;object-fit:cover;}
.tp-lead{max-width:480px;margin:12px 0 0;color:#354465;font-size:12.5px;line-height:1.52;font-weight:520;}
[data-theme="dark"] .tp-lead{color:#c5d0e1;}
.tp-hero-art{
  position:absolute;z-index:0;
  width:750px;right:-105px;top:-26px;
  opacity:.72;pointer-events:none;
}

/* hero kpi cards */
.tp-hero-kpis{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  margin-top:-1px;
}
.tp-hero-kpis article{
  min-height:126px;padding:14px 15px 11px;
  border:1px solid var(--tp-border);border-radius:11px;
  background:var(--tp-card);box-shadow:var(--tp-shadow);
}
.tp-kpi-head{display:flex;align-items:center;gap:7px;color:#4d5f80;font-size:10px;font-weight:850;}
.tp-kpi-icon{
  width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  background:#eef4ff;color:var(--tp-blue);
}
.tp-kpi-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tp-kpi-icon.is-amber{background:#fff7e6;color:var(--tp-amber);}
.tp-kpi-icon.is-green{background:#ebf9f1;color:var(--tp-green);}
.tp-kpi-icon.is-red{background:#fff0f2;color:var(--tp-red);}
.tp-kpi-icon.is-blue{background:#eef4ff;color:var(--tp-blue);}
.tp-hero-kpis strong{display:block;margin-top:8px;color:var(--tp-text);font-size:23px;letter-spacing:-.03em;}
.tp-hero-kpis strong.is-green{color:var(--tp-green);}
.tp-hero-kpis strong.is-red{color:var(--tp-red);}
.tp-hero-kpis small{display:block;margin-top:3px;color:#4f5d78;font-size:10px;font-weight:650;}
.tp-mini-chart{height:29px;margin-top:7px;}
.tp-gauge-mini{position:relative;width:83px;height:38px;margin:6px auto 0;overflow:hidden;}
.tp-gauge-mini::before{
  content:"";position:absolute;left:5px;top:1px;width:70px;height:70px;
  border:6px solid #dbe3ee;border-radius:50%;
}
.tp-gauge-mini i{
  position:absolute;left:5px;top:1px;width:70px;height:70px;border-radius:50%;
  border:6px solid transparent;border-top-color:var(--tp-green);border-right-color:var(--tp-green);
  transform:rotate(calc(-45deg + (var(--value) * 1.8deg)));
}
.tp-tabs{
  display:flex;align-items:center;gap:33px;
  min-height:49px;margin-top:9px;
  border-top:1px solid rgba(223,230,241,.75);
  overflow:auto;scrollbar-width:none;
}
.tp-tabs::-webkit-scrollbar{display:none;}
.tp-tabs a{
  position:relative;flex:0 0 auto;
  padding:16px 1px 13px;color:#40506d;
  font-size:11px;font-weight:800;
}
.tp-tabs a.is-active{color:var(--tp-blue);}
.tp-tabs a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tp-blue);border-radius:2px;
}

/* MAIN LAYOUT */
.tp-main{
  display:grid;grid-template-columns:1.14fr 1fr;gap:12px;
  padding-top:12px;padding-bottom:22px;
}
.tp-card{
  min-width:0;padding:15px;
  background:var(--tp-card);border:1px solid var(--tp-border);
  border-radius:var(--tp-radius);box-shadow:var(--tp-shadow);
}
.tp-span-2{grid-column:1/-1;}
.tp-section-title{margin-bottom:11px;}
.tp-title-row{display:flex;justify-content:space-between;gap:12px;}
.tp-section-title h2,.tp-analysis h2{
  display:flex;align-items:center;gap:7px;
  margin:0;color:var(--tp-text);
  font-size:15px;line-height:1.25;font-weight:850;letter-spacing:-.018em;
}
.tp-section-title p{margin:4px 0 0;color:var(--tp-muted);font-size:10.5px;line-height:1.45;}
.tp-info{
  width:17px;height:17px;padding:0;
  border:1px solid #afbdd5;border-radius:50%;
  display:inline-grid;place-items:center;
  background:transparent;color:#7183a4;font-size:9px;font-weight:800;cursor:help;
}

/* evaluation */
.tp-evaluation-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.tp-evaluation-grid article{
  min-height:143px;padding:11px;
  border:1px solid var(--tp-border);border-radius:10px;background:var(--tp-soft);
}
.tp-round-icon{
  width:34px;height:34px;margin-bottom:9px;
  display:grid;place-items:center;border-radius:50%;
  background:#eef4ff;color:var(--tp-blue);
}
.tp-round-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tp-round-icon.is-amber{background:#fff7e6;color:var(--tp-amber);}
.tp-round-icon.is-green{background:#ebf9f1;color:var(--tp-green);}
.tp-round-icon.is-red{background:#fff0f2;color:var(--tp-red);}
.tp-round-icon.is-blue{background:#eef4ff;color:var(--tp-blue);}
.tp-evaluation-grid strong{display:block;font-size:22px;letter-spacing:-.03em;}
.tp-evaluation-grid strong.is-green{color:var(--tp-green);}
.tp-evaluation-grid strong.is-red{color:var(--tp-red);}
.tp-evaluation-grid b{display:block;margin-top:7px;font-size:10px;color:var(--tp-text);}
.tp-evaluation-grid small,.tp-evaluation-grid em{display:block;margin-top:4px;color:var(--tp-muted);font-size:9px;font-style:normal;line-height:1.3;}
.tp-evaluation-grid em{font-weight:700;}

/* match */
.tp-match-meta{margin:0!important;text-align:right!important;color:#536280!important;font-size:10px!important;line-height:1.35!important;}
.tp-matchup{
  min-height:94px;padding:12px 17px;
  display:grid;grid-template-columns:1fr 54px 1fr;align-items:center;
  border:1px solid var(--tp-border);border-radius:9px;background:var(--tp-soft);
}
.tp-match-team{display:flex;align-items:center;gap:10px;}
.tp-match-team.is-away{justify-content:flex-end;text-align:right;}
.tp-match-team img{width:53px;height:53px;object-fit:contain;}
.tp-match-team strong{display:block;color:var(--tp-text);font-size:13px;}
.tp-match-team small{display:block;margin-top:3px;color:var(--tp-muted);font-size:9px;}
.tp-vs{
  width:34px;height:34px;margin:auto;border-radius:50%;
  display:grid;place-items:center;background:#eef3fb;color:#576985;font-size:10px;font-weight:850;
}
[data-theme="dark"] .tp-vs{background:#24334a;}
.tp-proba{margin-top:9px;padding:10px;border:1px solid var(--tp-border);border-radius:9px;}
.tp-proba>b{font-size:10px;color:#283958;}
.tp-proba-bar{
  display:flex;overflow:hidden;height:30px;margin-top:8px;
  border-radius:5px;color:#fff;font-size:10px;font-weight:850;text-align:center;
}
.tp-proba-bar span{display:grid;place-items:center;}
.tp-proba-bar .home{background:#bd1f2f;}
.tp-proba-bar .draw{background:#7b8597;}
.tp-proba-bar .away{background:#0aa653;}
.tp-proba-legend{display:grid;grid-template-columns:repeat(3,1fr);margin-top:5px;color:#596884;font-size:9px;text-align:center;}
.tp-match-reading{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px;
  border:1px solid var(--tp-border);border-radius:8px;overflow:hidden;
}
.tp-match-reading article{min-height:52px;padding:8px 10px;border-right:1px solid var(--tp-border);}
.tp-match-reading article:last-child{border-right:0;}
.tp-match-reading small{display:block;color:var(--tp-muted);font-size:8.5px;}
.tp-match-reading strong{display:inline-block;margin-top:4px;color:var(--tp-text);font-size:10.5px;}
.tp-match-reading strong.is-green{color:var(--tp-green);}
.tp-tiny-gauge{display:inline-block;width:19px;height:9px;margin-left:5px;border:2px solid var(--tp-green);border-bottom:0;border-radius:14px 14px 0 0;vertical-align:middle;}
.tp-signal-bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px;margin-left:6px;}
.tp-signal-bars i{width:4px;background:var(--tp-green);border-radius:2px;}
.tp-signal-bars i:nth-child(1){height:5px}.tp-signal-bars i:nth-child(2){height:7px}.tp-signal-bars i:nth-child(3){height:10px}.tp-signal-bars i:nth-child(4){height:13px}.tp-signal-bars i:nth-child(5){height:16px}
.tp-main-cta{
  height:38px;margin-top:8px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--tp-blue-dark);color:#fff;font-size:10.5px;font-weight:850;
}

/* reliability */
.tp-reliability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.tp-reliability-grid article,
.tp-reliability-grid .tp-reliability-mode{
  min-height:87px;padding:9px;
  border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-soft);
}
.tp-reliability-grid span{display:flex;align-items:center;gap:5px;color:#475674;font-size:9px;font-weight:800;}
.tp-reliability-grid span i{width:8px;height:8px;border-radius:50%;background:currentColor;}
.tp-reliability-grid strong{display:block;margin-top:6px;font-size:20px;}
.tp-reliability-grid small{display:block;margin-top:2px;color:var(--tp-muted);font-size:8px;}
.tp-reliability-grid em{display:block;margin-top:4px;font-style:normal;font-size:8.5px;font-weight:800;}
.tp-reliability-grid .risk{color:var(--tp-red)} .tp-reliability-grid .risk strong{color:var(--tp-red)}
.tp-reliability-grid .correct,.tp-reliability-grid .stable{color:var(--tp-green)} .tp-reliability-grid .correct strong,.tp-reliability-grid .stable strong{color:var(--tp-green)}
.tp-reliability-grid .ultra{color:var(--tp-blue)} .tp-reliability-grid .ultra strong{color:var(--tp-blue)}
.tp-reliability-mode.is-insufficient strong{
  max-width:100%;
  overflow-wrap:anywhere;
  font-size:clamp(.72rem,1.25vw,.95rem);
  line-height:1.08;
}
.tp-empty-state{margin:12px 0;color:var(--tp-muted);font-size:.82rem;line-height:1.55;}
.tp-reliability-chart-wrap{
  margin-top:8px;padding:10px;border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-soft);
}
.tp-chart-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.tp-chart-title strong{display:block;color:var(--tp-text);font-size:9.5px;}
.tp-chart-title small{display:block;margin-top:2px;color:var(--tp-muted);font-size:8px;}
.tp-current-pill{padding:4px 7px;border-radius:5px;background:var(--tp-green);color:white;font-size:9px;font-weight:850;}
.tp-chart--reliability{height:105px;margin-top:3px;}

/* profile */
.tp-profile-head,.tp-profile-list>div{
  display:grid;grid-template-columns:1.35fr .55fr 1.05fr .85fr;gap:8px;align-items:center;
}
.tp-profile-head{padding:0 7px 5px;color:var(--tp-muted);font-size:8px;font-weight:700;}
.tp-profile-list{display:grid;gap:2px;}
.tp-profile-list>div{min-height:29px;padding:4px 7px;border-radius:5px;font-size:9.5px;}
.tp-profile-list>div:nth-child(odd){background:var(--tp-soft);}
.tp-profile-list strong{font-size:9.5px;}
.tp-profile-list strong.pos{color:var(--tp-green);}
.tp-profile-list strong.neg{color:var(--tp-red);}
.tp-profile-list i{height:5px;background:#e9eef6;border-radius:999px;overflow:hidden;}
[data-theme="dark"] .tp-profile-list i{background:#24334a;}
.tp-profile-list i b{display:block;width:var(--w);height:100%;background:var(--tp-green);border-radius:999px;}
.tp-profile-list i b.neg{background:var(--tp-red);}
.tp-profile-list em{font-style:normal;color:#43516e;font-size:9px;}
[data-theme="dark"] .tp-profile-list em{color:#bdc9dc;}
.tp-inline-link{display:inline-flex;gap:6px;margin-top:7px;color:var(--tp-blue);font-size:9.5px;font-weight:850;}

/* benchmark */
.tp-benchmark-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.tp-benchmark-grid article{
  min-height:82px;padding:10px;border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-soft);
}
.tp-benchmark-grid span{display:block;color:#4d5d7b;font-size:8.5px;font-weight:800;}
.tp-benchmark-grid strong{display:inline-block;margin-top:4px;color:var(--tp-text);font-size:19px;}
.tp-benchmark-grid small{margin-left:5px;color:var(--tp-muted);font-size:8px;}
.tp-benchmark-grid em{display:block;margin-top:5px;color:var(--tp-green);font-size:8px;font-style:normal;font-weight:850;}
.tp-data-foot{margin:8px 0 0;color:var(--tp-muted);font-size:8.5px;}

/* markets */
.tp-market-table{width:100%;}
.tp-market-head,.tp-market-row{
  display:grid;grid-template-columns:1.4fr .9fr .6fr .55fr 1fr;gap:8px;align-items:center;
  min-height:29px;padding:4px 7px;
}
.tp-market-head{color:var(--tp-muted);font-size:8px;font-weight:750;border-bottom:1px solid var(--tp-border);}
.tp-market-row{font-size:9px;border-bottom:1px solid rgba(223,230,241,.65);}
.tp-market-row:last-child{border-bottom:0;}
.tp-market-row strong{font-size:9.5px;}
.tp-market-prob{display:grid;grid-template-columns:31px 1fr;gap:6px;align-items:center;}
.tp-market-prob b{font-size:9px;}
.tp-market-prob i{height:4px;background:#e9eef6;border-radius:99px;overflow:hidden;}
.tp-market-prob u{display:block;width:var(--w);height:100%;background:var(--tp-green);text-decoration:none;}
.tp-stars{color:#ffab18;letter-spacing:1px;font-size:9px;white-space:nowrap;}
.tp-stars i{font-style:normal;color:#d8dee8;}
.tp-market-row em{color:var(--tp-green);font-style:normal;font-size:8.5px;font-weight:800;}
.tp-market-row small{color:#40506d;font-size:8.5px;}
[data-theme="dark"] .tp-market-row small{color:#bfcbdd;}

/* dynamics charts */
.tp-dynamics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.tp-chart-card{min-width:0;padding:9px;border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-soft);}
.tp-chart-legend{display:flex;flex-wrap:wrap;gap:9px;margin:5px 0 2px;color:var(--tp-muted);font-size:7.5px;}
.tp-chart-legend span{display:flex;align-items:center;gap:4px;}
.tp-chart-legend i{display:inline-block;width:11px;height:2px;background:currentColor;}
.tp-chart-legend i.red{color:var(--tp-red)} .tp-chart-legend i.green{color:var(--tp-green)} .tp-chart-legend i.gray{color:#9aa8bf} .tp-chart-legend i.blue{color:var(--tp-blue)}
.tp-chart-legend i.dash{height:0;border-top:2px dashed #8d99ad;background:none;}
.tp-chart{height:155px;min-width:0;}

/* analysis */
.tp-analysis{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;}
.tp-analysis-copy p{margin:7px 0 0;color:#42516f;font-size:9.5px;line-height:1.52;}
[data-theme="dark"] .tp-analysis-copy p{color:#c1ccdc;}
.tp-verdict{
  min-height:125px;padding:12px;
  display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;
  border:1px solid var(--tp-border);border-radius:8px;background:linear-gradient(135deg,#f8fbff,#eff9f2);
}
[data-theme="dark"] .tp-verdict{background:linear-gradient(135deg,#17253a,#143025);}
.tp-score-ring{
  width:82px;height:82px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(var(--tp-green) calc(var(--score, 0)*1%),#e1e7f0 0);
  position:relative;
}
.tp-score-ring::before{content:"";position:absolute;inset:7px;background:var(--tp-card);border-radius:50%;}
.tp-score-ring span,.tp-score-ring small{position:relative;z-index:1;}
.tp-score-ring span{font-size:25px;font-weight:850;color:var(--tp-green);line-height:1;}
.tp-score-ring small{margin-top:3px;color:var(--tp-muted);font-size:7px;}
.tp-verdict b{display:block;font-size:9px;}
.tp-verdict strong{display:block;margin-top:3px;color:var(--tp-green);font-size:12px;}
.tp-verdict p{margin:4px 0 0;color:#45536f;font-size:8.8px;line-height:1.45;}
[data-theme="dark"] .tp-verdict p{color:#c7d1df;}
.tp-verdict a{display:inline-block;margin-top:5px;color:var(--tp-blue);font-size:8.5px;font-weight:850;}

/* FAQ */
.tp-faq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.tp-faq-grid details{border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-soft);overflow:hidden;}
.tp-faq-grid summary{
  min-height:47px;padding:9px 10px;
  display:flex;align-items:center;
  list-style:none;cursor:pointer;color:var(--tp-text);font-size:9px;font-weight:800;
}
.tp-faq-grid summary::-webkit-details-marker{display:none;}
.tp-faq-grid summary::after{content:"⌄";margin-left:auto;color:#4e6080;font-size:12px;}
.tp-faq-grid p{margin:0;padding:0 10px 9px;color:var(--tp-muted);font-size:8.5px;line-height:1.45;}

/* SEO */
.tp-seo{padding:15px 0 25px;background:var(--tp-card);border-top:1px solid var(--tp-border);}
.tp-seo h2{margin:0;color:var(--tp-text);font-size:14px;}
.tp-seo p{max-width:980px;margin:5px 0 0;color:var(--tp-muted);font-size:9.5px;line-height:1.55;}

/* tablet */
@media(max-width:980px){
  .tp-shell{width:calc(100% - 22px);}
  .tp-team-id{width:500px;}
  .tp-hero-art{right:-230px;opacity:.45;}
  .tp-main{grid-template-columns:1fr;}
  .tp-span-2{grid-column:auto;}
  .tp-overview-card{display:none;}
  .tp-dynamics-grid{grid-template-columns:repeat(2,1fr);}
  .tp-faq-grid{grid-template-columns:repeat(2,1fr);}
}

/* MOBILE = exact mobile mockup structure */
@media(max-width:640px){
  body.fs-team-product-page{font-size:14px;}
  .tp-shell{width:calc(100% - 14px);}
  .tp-breadcrumb{padding-top:9px;margin-bottom:10px;font-size:9px;}
  .tp-identity-row{min-height:148px;}
  .tp-team-id{width:100%;gap:12px;padding-bottom:11px;align-items:flex-start;}
  .tp-logo-box{width:75px;height:93px;flex-basis:75px;}
  .tp-logo-box img{max-width:70px;max-height:88px;}
  .tp-team-copy h1{font-size:27px;}
  .tp-nickname{display:none;}
  .tp-chips{gap:4px;margin-top:5px;}
  .tp-chips span,.tp-chips a{min-height:23px;padding:4px 6px;font-size:8.5px;}
  .tp-chips span:nth-child(3){display:none;}
  .tp-lead{max-width:245px;margin-top:7px;font-size:9.6px;line-height:1.43;}
  .tp-hero-art{width:420px;right:-224px;top:-16px;opacity:.35;}

  .tp-hero-kpis{
    grid-template-columns:repeat(6,1fr);
    gap:6px;margin-top:0;
  }
  .tp-hero-kpis article{min-height:93px;padding:9px 10px;}
  .tp-hero-kpis article:nth-child(-n+3){grid-column:span 2;}
  .tp-hero-kpis article:nth-child(n+4){grid-column:span 3;}
  .tp-kpi-head{gap:5px;font-size:8px;}
  .tp-kpi-icon{width:20px;height:20px;}
  .tp-kpi-icon svg{width:11px;height:11px;}
  .tp-hero-kpis strong{font-size:18px;margin-top:5px;}
  .tp-hero-kpis small{font-size:8px;}
  .tp-mini-chart{height:23px;margin-top:4px;}
  .tp-gauge-mini{width:62px;height:28px;margin-top:4px;}
  .tp-gauge-mini::before,.tp-gauge-mini i{left:4px;width:52px;height:52px;border-width:5px;}

  .tp-tabs{gap:23px;min-height:42px;margin-top:7px;}
  .tp-tabs a{padding:13px 1px 11px;font-size:9px;}

  .tp-main{display:grid;grid-template-columns:1fr;gap:7px;padding-top:7px;padding-bottom:14px;}
  .tp-card{padding:11px;border-radius:9px;}
  .tp-section-title{margin-bottom:8px;}
  .tp-section-title h2,.tp-analysis h2{font-size:12px;}
  .tp-section-title p{font-size:8.8px;}
  .tp-info{width:15px;height:15px;font-size:8px;}
  .tp-title-row{align-items:flex-start;}
  .tp-match-meta{font-size:8px!important;}

  .tp-matchup{min-height:75px;padding:8px 10px;grid-template-columns:1fr 38px 1fr;}
  .tp-match-team{gap:6px;}
  .tp-match-team img{width:39px;height:39px;}
  .tp-match-team strong{font-size:10px;}
  .tp-match-team small{font-size:7.5px;}
  .tp-vs{width:28px;height:28px;font-size:8px;}
  .tp-proba{margin-top:6px;padding:7px;}
  .tp-proba>b{font-size:8px;}
  .tp-proba-bar{height:24px;margin-top:5px;font-size:8px;}
  .tp-proba-legend{font-size:7.5px;}
  .tp-match-reading{margin-top:6px;}
  .tp-match-reading article{min-height:42px;padding:6px 7px;}
  .tp-match-reading small{font-size:7px;}
  .tp-match-reading strong{font-size:8.5px;}
  .tp-main-cta{height:31px;margin-top:6px;font-size:8.5px;}

  .tp-reliability-grid{gap:5px;}
  .tp-reliability-grid article,
  .tp-reliability-grid .tp-reliability-mode{min-height:70px;padding:7px;}
  .tp-reliability-grid span{font-size:7.5px;}
  .tp-reliability-grid strong{margin-top:4px;font-size:16px;}
  .tp-reliability-grid small{display:none;}
  .tp-reliability-grid em{font-size:7px;}
  .tp-reliability-chart-wrap{margin-top:6px;padding:7px;}
  .tp-chart-title strong{font-size:8px;}
  .tp-chart-title small{font-size:7px;}
  .tp-chart--reliability{height:90px;}

  .tp-profile-head{grid-template-columns:1fr .8fr .85fr;font-size:6.8px;}
  .tp-profile-head span:nth-child(2){grid-column:2;}
  .tp-profile-list>div{
    grid-template-columns:1fr 45px .8fr .9fr;
    min-height:25px;padding:3px 5px;font-size:7.8px;
  }
  .tp-profile-list strong{font-size:7.8px;}
  .tp-profile-list em{font-size:7.2px;}
  .tp-inline-link{font-size:8px;}

  .tp-benchmark-grid{grid-template-columns:repeat(4,1fr);gap:5px;}
  .tp-benchmark-grid article{min-height:70px;padding:7px;}
  .tp-benchmark-grid span{font-size:7px;}
  .tp-benchmark-grid strong{font-size:15px;}
  .tp-benchmark-grid small{display:block;margin:1px 0 0;font-size:6.8px;}
  .tp-benchmark-grid em{font-size:6.8px;}
  .mobile-hide{display:none!important;}
  .tp-data-foot{display:none;}

  .tp-market-head{display:grid;grid-template-columns:1.4fr .8fr .7fr .6fr .9fr;font-size:6.5px;}
  .tp-market-row{
    grid-template-columns:1.4fr .8fr .7fr .6fr .9fr;
    min-height:25px;padding:3px 4px;font-size:7px;
  }
  .tp-market-row strong{font-size:7.4px;}
  .tp-market-prob{grid-template-columns:24px 1fr;gap:4px;}
  .tp-market-prob b,.tp-stars,.tp-market-row em,.tp-market-row small{font-size:6.7px;}

  .tp-dynamics-grid{grid-template-columns:repeat(2,1fr);gap:5px;}
  .tp-chart-card{padding:7px;}
  .tp-chart-title strong{font-size:7.8px;}
  .tp-chart-title small{font-size:6.8px;}
  .tp-chart-legend{gap:5px;font-size:6.5px;}
  .tp-chart{height:122px;}

  .tp-analysis{grid-template-columns:1fr;}
  .tp-analysis-copy p{font-size:8px;line-height:1.45;}
  .tp-verdict{grid-template-columns:75px 1fr;gap:8px;min-height:96px;padding:8px;}
  .tp-score-ring{width:68px;height:68px;}
  .tp-score-ring span{font-size:20px;}
  .tp-verdict b{font-size:7px;}
  .tp-verdict strong{font-size:9.5px;}
  .tp-verdict p{font-size:7.2px;}
  .tp-verdict a{font-size:7.2px;}

  .tp-faq-grid{grid-template-columns:1fr;gap:5px;}
  .tp-faq-grid summary{min-height:35px;padding:7px 8px;font-size:8px;}
  .tp-faq-grid p{padding:0 8px 7px;font-size:7.5px;}
  .tp-seo{padding:12px 0 18px;}
  .tp-seo h2{font-size:11px;}
  .tp-seo p{font-size:8px;}
}

@media(max-width:390px){
  .tp-team-copy h1{font-size:25px;}
  .tp-lead{max-width:225px;}
}


/* ============================================================
   FINAL PASS V2
   - neutralise les backgrounds globaux du hero
   - restitue le hero clair du mockup
   - renforce l'identité équipe
   - améliore la lisibilité des graphes mobile
   ============================================================ */

/* --- Neutralisation explicite des styles globaux / hero_unified --- */
html body.fs-team-product-page .tp-hero,
html body.fs-team-product-page main.tp > .tp-hero,
html body.fs-team-product-page .tp .tp-hero,
html[data-theme="light"] body.fs-team-product-page .tp-hero {
  background:
    radial-gradient(900px 300px at 78% 18%, rgba(83,132,241,.08), transparent 68%),
    linear-gradient(180deg,#fbfdff 0%,#f5f8fd 100%) !important;
  background-color:#f8fbff !important;
  color:var(--tp-text) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border-top:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1px solid var(--tp-border) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-theme="dark"] body.fs-team-product-page .tp-hero {
  background:
    radial-gradient(900px 300px at 78% 18%, rgba(83,132,241,.08), transparent 68%),
    linear-gradient(180deg,#101b2d 0%,#0f1929 100%) !important;
  background-color:#101b2d !important;
}

html body.fs-team-product-page .tp-hero::before,
html body.fs-team-product-page .tp-hero::after {
  content:none !important;
  display:none !important;
}

/* Certains styles globaux ciblent les shells/cartes des heros */
html body.fs-team-product-page .tp-hero .tp-shell,
html body.fs-team-product-page .tp-hero .tp-identity-row,
html body.fs-team-product-page .tp-hero .tp-team-id {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Couleurs de texte du hero explicitement protégées */
html body.fs-team-product-page .tp-hero h1,
html body.fs-team-product-page .tp-hero .tp-breadcrumb strong {
  color:var(--tp-text) !important;
  text-shadow:none !important;
}

html body.fs-team-product-page .tp-hero .tp-lead {
  color:#354465 !important;
}

html[data-theme="dark"] body.fs-team-product-page .tp-hero .tp-lead {
  color:#c5d0e1 !important;
}

/* --- Hero plus statutaire / plus proche du mockup --- */
html body.fs-team-product-page .tp-identity-row {
  min-height:196px;
  align-items:center;
}

html body.fs-team-product-page .tp-team-id {
  width:590px;
  gap:30px;
  padding:4px 0 26px;
}

html body.fs-team-product-page .tp-logo-box {
  width:128px;
  height:150px;
  flex-basis:128px;
}

html body.fs-team-product-page .tp-logo-box img {
  max-width:120px;
  max-height:144px;
}

html body.fs-team-product-page .tp-team-copy h1 {
  font-size:44px;
  line-height:.98;
}

html body.fs-team-product-page .tp-nickname {
  margin-top:8px;
  margin-bottom:11px;
}

html body.fs-team-product-page .tp-lead {
  max-width:525px;
  margin-top:14px;
  font-size:13px;
  line-height:1.55;
}

/* SVG décoratif plus léger et moins envahissant */
html body.fs-team-product-page .tp-hero-art {
  width:760px;
  right:-105px;
  top:-22px;
  opacity:.58;
}

/* KPI du hero légèrement plus raffinés */
html body.fs-team-product-page .tp-hero-kpis {
  gap:11px;
}

html body.fs-team-product-page .tp-hero-kpis article {
  min-height:132px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(31,55,98,.06);
}

/* Un peu plus de respiration dans la nav */
html body.fs-team-product-page .tp-tabs {
  gap:36px;
  min-height:51px;
}

/* --- Micro-finition générale --- */
html body.fs-team-product-page .tp-card {
  box-shadow:0 7px 20px rgba(31,55,98,.055);
}

html body.fs-team-product-page .tp-section-title h2,
html body.fs-team-product-page .tp-analysis h2 {
  font-size:15.5px;
}

/* --- Graphes desktop : lisibilité légèrement renforcée --- */
html body.fs-team-product-page .tp-chart {
  min-height:168px;
}

html body.fs-team-product-page .tp-dynamics-grid .tp-chart {
  height:170px;
}

html body.fs-team-product-page .tp-chart-legend {
  font-size:8px;
}

/* --- Mobile : conserver le hero clair + améliorer les axes/labels --- */
@media(max-width:640px){
  html body.fs-team-product-page .tp-hero,
  html body.fs-team-product-page main.tp > .tp-hero,
  html body.fs-team-product-page .tp .tp-hero {
    background:
      radial-gradient(520px 220px at 82% 12%, rgba(83,132,241,.075), transparent 68%),
      linear-gradient(180deg,#fbfdff 0%,#f5f8fd 100%) !important;
    background-color:#f8fbff !important;
  }

  html[data-theme="dark"] body.fs-team-product-page .tp-hero {
    background:
      radial-gradient(520px 220px at 82% 12%, rgba(83,132,241,.08), transparent 68%),
      linear-gradient(180deg,#101b2d 0%,#0f1929 100%) !important;
    background-color:#101b2d !important;
  }

  html body.fs-team-product-page .tp-identity-row {
    min-height:156px;
    align-items:flex-start;
  }

  html body.fs-team-product-page .tp-team-id {
    width:100%;
    gap:14px;
    padding-bottom:13px;
  }

  html body.fs-team-product-page .tp-logo-box {
    width:82px;
    height:102px;
    flex-basis:82px;
  }

  html body.fs-team-product-page .tp-logo-box img {
    max-width:77px;
    max-height:96px;
  }

  html body.fs-team-product-page .tp-team-copy h1 {
    font-size:28px;
  }

  html body.fs-team-product-page .tp-lead {
    max-width:245px;
    font-size:9.9px;
    line-height:1.46;
  }

  html body.fs-team-product-page .tp-hero-art {
    width:430px;
    right:-220px;
    top:-11px;
    opacity:.27;
  }

  /* Graphes plus hauts et plus faciles à lire sur petit écran */
  html body.fs-team-product-page .tp-chart {
    min-height:140px;
  }

  html body.fs-team-product-page .tp-chart--reliability {
    height:108px;
  }

  html body.fs-team-product-page .tp-dynamics-grid .tp-chart {
    height:148px;
  }

  html body.fs-team-product-page .tp-chart-legend {
    font-size:7.2px;
    line-height:1.25;
  }

  html body.fs-team-product-page .tp-chart-title strong {
    font-size:8.4px;
  }

  html body.fs-team-product-page .tp-chart-title small {
    font-size:7.2px;
  }

  /* Plus de largeur utile pour les cartes des graphes */
  html body.fs-team-product-page .tp-chart-card {
    padding:8px;
  }
}

/* ============================================================
   LISIBILITÉ FINALE — TEAM PAGE
   À AJOUTER TOUT EN BAS DU CSS
   ============================================================ */

/* ------------------------------------------------------------
   1. TYPOGRAPHIE GLOBALE
   Plus aucun micro-texte illisible
   ------------------------------------------------------------ */

body.fs-team-product-page {
  font-size: 16px !important;
}

.tp-section-title h2,
.tp-analysis h2 {
  font-size: 1.08rem !important;
  line-height: 1.3 !important;
}

.tp-section-title p {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

.tp-lead {
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
}

.tp-kpi-head {
  font-size: 0.72rem !important;
}

.tp-hero-kpis small {
  font-size: 0.70rem !important;
  line-height: 1.35 !important;
}

.tp-evaluation-grid b {
  font-size: 0.76rem !important;
}

.tp-evaluation-grid small,
.tp-evaluation-grid em {
  font-size: 0.69rem !important;
  line-height: 1.4 !important;
}

.tp-match-meta {
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

.tp-match-team strong {
  font-size: 0.88rem !important;
}

.tp-match-team small {
  font-size: 0.68rem !important;
}

.tp-proba > b {
  font-size: 0.72rem !important;
}

.tp-proba-bar {
  font-size: 0.75rem !important;
}

.tp-proba-legend {
  font-size: 0.68rem !important;
}

.tp-match-reading small {
  font-size: 0.67rem !important;
}

.tp-match-reading strong {
  font-size: 0.76rem !important;
}

.tp-reliability-grid span {
  font-size: 0.70rem !important;
}

.tp-reliability-grid small,
.tp-reliability-grid em {
  font-size: 0.67rem !important;
}

.tp-profile-head {
  font-size: 0.68rem !important;
}

.tp-profile-list > div,
.tp-profile-list strong {
  font-size: 0.74rem !important;
}

.tp-profile-list em {
  font-size: 0.69rem !important;
}

.tp-inline-link {
  font-size: 0.72rem !important;
}

.tp-benchmark-grid span {
  font-size: 0.70rem !important;
}

.tp-benchmark-grid small,
.tp-benchmark-grid em {
  font-size: 0.67rem !important;
}

.tp-data-foot {
  font-size: 0.68rem !important;
}

.tp-market-head {
  font-size: 0.69rem !important;
}

.tp-market-row,
.tp-market-row strong,
.tp-market-prob b,
.tp-market-row em,
.tp-market-row small {
  font-size: 0.72rem !important;
}

.tp-stars {
  font-size: 0.75rem !important;
}

.tp-chart-title strong {
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
}

.tp-chart-title small {
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
}

.tp-chart-legend {
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
}

.tp-analysis-copy p {
  font-size: 0.78rem !important;
  line-height: 1.6 !important;
}

.tp-verdict b {
  font-size: 0.73rem !important;
}

.tp-verdict strong {
  font-size: 0.88rem !important;
}

.tp-verdict p {
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}

.tp-verdict a {
  font-size: 0.72rem !important;
}

.tp-faq-grid summary {
  font-size: 0.76rem !important;
  line-height: 1.4 !important;
}

.tp-faq-grid p {
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}

.tp-seo h2 {
  font-size: 1rem !important;
}

.tp-seo p {
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
}


/* ------------------------------------------------------------
   2. LE BLOC "1." NE DOIT JAMAIS DISPARAÎTRE
   L'ancien CSS faisait :
   .tp-overview-card { display:none; }
   sous 980px
   ------------------------------------------------------------ */

@media (max-width: 980px) {

  .tp-overview-card {
    display: block !important;
  }

}


/* ------------------------------------------------------------
   3. SECTION 7 — GRAPHES DESKTOP
   Plus grands + plus lisibles
   ------------------------------------------------------------ */

.tp-dynamics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.tp-chart-card {
  padding: 14px !important;
  min-height: 300px !important;
}

.tp-dynamics-grid .tp-chart {
  height: 235px !important;
  min-height: 235px !important;
}

.tp-chart-title {
  min-height: 42px;
}

.tp-chart-legend {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
  gap: 12px !important;
}


/* ------------------------------------------------------------
   4. MOBILE
   Vraie taille de lecture, pas un dashboard miniature
   ------------------------------------------------------------ */

@media (max-width: 640px) {

  body.fs-team-product-page {
    font-size: 15px !important;
  }

  /* Titres de sections */
  .tp-section-title h2,
  .tp-analysis h2 {
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
  }

  .tp-section-title p {
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
  }

  /* Hero */
  .tp-team-copy h1 {
    font-size: 1.85rem !important;
  }

  .tp-lead {
    max-width: none !important;
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
  }

  .tp-chips span,
  .tp-chips a {
    font-size: 0.68rem !important;
  }

  .tp-kpi-head {
    font-size: 0.68rem !important;
  }

  .tp-hero-kpis strong {
    font-size: 1.35rem !important;
  }

  .tp-hero-kpis small {
    font-size: 0.68rem !important;
  }

  /* Bloc 1 */
  .tp-overview-card {
    display: block !important;
  }

  .tp-evaluation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .tp-evaluation-grid article {
    min-height: 126px !important;
    padding: 11px !important;
  }

  .tp-evaluation-grid article:last-child {
    grid-column: 1 / -1;
  }

  .tp-evaluation-grid strong {
    font-size: 1.25rem !important;
  }

  .tp-evaluation-grid b {
    font-size: 0.74rem !important;
  }

  .tp-evaluation-grid small,
  .tp-evaluation-grid em {
    font-size: 0.68rem !important;
  }

  /* Match */
  .tp-match-team strong {
    font-size: 0.78rem !important;
  }

  .tp-match-team small {
    font-size: 0.65rem !important;
  }

  .tp-proba > b,
  .tp-match-reading strong {
    font-size: 0.70rem !important;
  }

  .tp-proba-legend,
  .tp-match-reading small {
    font-size: 0.64rem !important;
  }

  /* Fiabilité */
  .tp-reliability-grid span {
    font-size: 0.67rem !important;
  }

  .tp-reliability-grid strong {
    font-size: 1.10rem !important;
  }

  .tp-reliability-grid small {
    display: block !important;
    font-size: 0.62rem !important;
  }

  .tp-reliability-grid em {
    font-size: 0.63rem !important;
  }

  /* Profil prédictif */
  .tp-profile-head {
    font-size: 0.64rem !important;
  }

  .tp-profile-list > div {
    min-height: 34px !important;
    font-size: 0.69rem !important;
  }

  .tp-profile-list strong {
    font-size: 0.69rem !important;
  }

  .tp-profile-list em {
    font-size: 0.64rem !important;
  }

  /* Statistiques */
  .tp-benchmark-grid span {
    font-size: 0.66rem !important;
  }

  .tp-benchmark-grid strong {
    font-size: 1.05rem !important;
  }

  .tp-benchmark-grid small,
  .tp-benchmark-grid em {
    font-size: 0.62rem !important;
  }

  /* Marchés */
  .tp-market-head {
    font-size: 0.62rem !important;
  }

  .tp-market-row,
  .tp-market-row strong,
  .tp-market-prob b,
  .tp-market-row em,
  .tp-market-row small {
    font-size: 0.67rem !important;
  }

  .tp-stars {
    font-size: 0.68rem !important;
  }


  /* ----------------------------------------------------------
     SECTION 7 MOBILE
     UNE SEULE COURBE PAR LIGNE.
     C'est le changement important.
     ---------------------------------------------------------- */

  .tp-dynamics-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .tp-chart-card {
    min-height: 290px !important;
    padding: 12px !important;
  }

  .tp-dynamics-grid .tp-chart {
    height: 225px !important;
    min-height: 225px !important;
  }

  .tp-chart-title {
    min-height: auto !important;
  }

  .tp-chart-title strong {
    font-size: 0.78rem !important;
  }

  .tp-chart-title small {
    font-size: 0.68rem !important;
  }

  .tp-chart-legend {
    font-size: 0.67rem !important;
    gap: 10px !important;
    margin: 7px 0 6px !important;
  }

  /* Analyse */
  .tp-analysis-copy p {
    font-size: 0.74rem !important;
    line-height: 1.6 !important;
  }

  .tp-verdict b {
    font-size: 0.70rem !important;
  }

  .tp-verdict strong {
    font-size: 0.84rem !important;
  }

  .tp-verdict p,
  .tp-verdict a {
    font-size: 0.68rem !important;
  }

  /* FAQ */
  .tp-faq-grid summary {
    min-height: 46px !important;
    font-size: 0.72rem !important;
  }

  .tp-faq-grid p {
    font-size: 0.69rem !important;
  }

  /* SEO */
  .tp-seo h2 {
    font-size: 0.92rem !important;
  }

  .tp-seo p {
    font-size: 0.72rem !important;
  }

}
/* ============================================================
   TEAM PAGE — CORRECTIFS PRODUIT
   Graphes / fiabilité / aides / repères statistiques
   ============================================================ */


/* ------------------------------------------------------------
   GRAPHS — supprimer le faux espace vide
   Le SVG doit réellement remplir .tp-chart
   ------------------------------------------------------------ */

.tp-chart {
  position: relative;
  overflow: hidden;
}

.tp-chart > svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}


/* Section 7 : vraie surface graphique */

.tp-dynamics-grid .tp-chart {
  height: 245px !important;
  min-height: 245px !important;
}

.tp-chart-card {
  min-height: 0 !important;
}


/* ------------------------------------------------------------
   FIABILITÉ — cartes interactives
   ------------------------------------------------------------ */

.tp-reliability-mode {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;

  border: 1px solid var(--tp-border);
  border-radius: 8px;
  background: var(--tp-soft);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    background-color .16s ease;
}

.tp-reliability-mode:hover {
  border-color: #b7c7e3;
  transform: translateY(-1px);
}

.tp-reliability-mode:focus-visible {
  outline: 2px solid var(--tp-blue);
  outline-offset: 2px;
}

.tp-reliability-mode.is-active {
  border-color: var(--tp-mode-color, var(--tp-blue));
  box-shadow:
    0 0 0 2px color-mix(
      in srgb,
      var(--tp-mode-color, var(--tp-blue)) 12%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--tp-mode-color, var(--tp-blue)) 4%,
      var(--tp-card)
    );
}

.tp-reliability-mode.risk {
  --tp-mode-color: var(--tp-red);
}

.tp-reliability-mode.correct,
.tp-reliability-mode.stable {
  --tp-mode-color: var(--tp-green);
}

.tp-reliability-mode.ultra {
  --tp-mode-color: var(--tp-blue);
}


/* ------------------------------------------------------------
   POPOVER DES "i"
   ------------------------------------------------------------ */

.tp-info {
  cursor: pointer !important;
}

.tp-help-popover {
  position: fixed;
  z-index: 99999;

  width: min(330px, calc(100vw - 24px));
  padding: 12px 14px;

  border: 1px solid var(--tp-border);
  border-radius: 10px;

  background: var(--tp-card);
  color: var(--tp-text);

  box-shadow:
    0 16px 45px rgba(19, 38, 75, .16);

  font-size: .78rem;
  line-height: 1.5;

  animation: tpHelpIn .12s ease-out;
}

.tp-help-popover strong {
  display: block;
  margin-bottom: 5px;

  color: var(--tp-text);
  font-size: .82rem;
}

.tp-help-popover p {
  margin: 0;
  color: var(--tp-muted);
}

@keyframes tpHelpIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* ------------------------------------------------------------
   REPÈRES STATISTIQUES
   On passe de 8 cartes à 5 cartes réellement disponibles
   ------------------------------------------------------------ */

.tp-benchmark-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 640px) {

  /* Section 7 : surtout PAS deux graphes minuscules côte à côte */

  .tp-dynamics-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .tp-chart-card {
    padding: 12px !important;
  }

  .tp-dynamics-grid .tp-chart {
    height: 250px !important;
    min-height: 250px !important;
  }

  .tp-chart-legend {
    font-size: .69rem !important;
  }


  /* Repères : 2 colonnes lisibles */

  .tp-benchmark-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Popover information */

  .tp-help-popover {
    font-size: .75rem;
  }
}

/* ============================================================
   MOBILE — TYPOGRAPHIE +1 CRAN
   À AJOUTER TOUT EN BAS DU CSS
   ============================================================ */

@media (max-width: 640px) {

  /* Base */
  body.fs-team-product-page {
    font-size: 16px !important;
  }

  /* Hero */
  .tp-team-copy h1 {
    font-size: 1.95rem !important;
  }

  .tp-lead {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  .tp-chips span,
  .tp-chips a {
    font-size: 0.72rem !important;
  }

  .tp-kpi-head {
    font-size: 0.72rem !important;
  }

  .tp-hero-kpis strong {
    font-size: 1.42rem !important;
  }

  .tp-hero-kpis small {
    font-size: 0.72rem !important;
  }

  .tp-tabs a {
    font-size: 0.72rem !important;
  }


  /* Titres / descriptions de sections */
  .tp-section-title h2,
  .tp-analysis h2 {
    font-size: 1.03rem !important;
    line-height: 1.32 !important;
  }

  .tp-section-title p {
    font-size: 0.80rem !important;
    line-height: 1.52 !important;
  }


  /* Bloc 1 */
  .tp-evaluation-grid b {
    font-size: 0.78rem !important;
  }

  .tp-evaluation-grid small,
  .tp-evaluation-grid em {
    font-size: 0.72rem !important;
  }


  /* Match */
  .tp-match-meta {
    font-size: 0.72rem !important;
  }

  .tp-match-team strong {
    font-size: 0.82rem !important;
  }

  .tp-match-team small {
    font-size: 0.70rem !important;
  }

  .tp-proba > b {
    font-size: 0.75rem !important;
  }

  .tp-proba-bar {
    font-size: 0.76rem !important;
  }

  .tp-proba-legend {
    font-size: 0.70rem !important;
  }

  .tp-match-reading small {
    font-size: 0.68rem !important;
  }

  .tp-match-reading strong {
    font-size: 0.75rem !important;
  }


  /* Fiabilité */
  .tp-reliability-grid span {
    font-size: 0.72rem !important;
  }

  .tp-reliability-grid strong {
    font-size: 1.16rem !important;
  }

  .tp-reliability-grid small {
    font-size: 0.67rem !important;
  }

  .tp-reliability-grid em {
    font-size: 0.68rem !important;
  }


  /* Profil prédictif */
  .tp-profile-head {
    font-size: 0.68rem !important;
  }

  .tp-profile-list > div,
  .tp-profile-list strong {
    font-size: 0.74rem !important;
  }

  .tp-profile-list em {
    font-size: 0.68rem !important;
  }

  .tp-inline-link {
    font-size: 0.74rem !important;
  }


  /* Repères statistiques */
  .tp-benchmark-grid span {
    font-size: 0.70rem !important;
  }

  .tp-benchmark-grid strong {
    font-size: 1.12rem !important;
  }

  .tp-benchmark-grid small,
  .tp-benchmark-grid em {
    font-size: 0.66rem !important;
  }


  /* Marchés */
  .tp-market-head {
    font-size: 0.66rem !important;
  }

  .tp-market-row,
  .tp-market-row strong,
  .tp-market-prob b,
  .tp-market-row em,
  .tp-market-row small {
    font-size: 0.71rem !important;
  }

  .tp-stars {
    font-size: 0.72rem !important;
  }


  /* Graphes */
  .tp-chart-title strong {
    font-size: 0.82rem !important;
  }

  .tp-chart-title small {
    font-size: 0.72rem !important;
  }

  .tp-chart-legend {
    font-size: 0.71rem !important;
  }


  /* Analyse IA */
  .tp-analysis-copy p {
    font-size: 0.79rem !important;
    line-height: 1.62 !important;
  }

  .tp-verdict b {
    font-size: 0.74rem !important;
  }

  .tp-verdict strong {
    font-size: 0.90rem !important;
  }

  .tp-verdict p,
  .tp-verdict a {
    font-size: 0.72rem !important;
  }


  /* FAQ */
  .tp-faq-grid summary {
    font-size: 0.77rem !important;
  }

  .tp-faq-grid p {
    font-size: 0.73rem !important;
  }


  /* SEO */
  .tp-seo h2 {
    font-size: 0.98rem !important;
  }

  .tp-seo p {
    font-size: 0.76rem !important;
    line-height: 1.62 !important;
  }
}

/* ============================================================
   FIX HERO — neutralise fs-hero-card sur la page équipe
   ============================================================ */

body.fs-team-product-page .tp-shell.fs-hero-card {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

body.fs-team-product-page .tp-hero .tp-tabs {
  margin-bottom: 0 !important;
}

body.fs-team-product-page .tp-hero {
  padding-bottom: 0 !important;
}

/* Thèmes : protéger le fond du hero et le contraste du CTA des règles globales. */
html[data-theme="dark"] body.fs-team-product-page main.tp > section.tp-hero {
  background:
    radial-gradient(900px 300px at 78% 18%, rgba(83,132,241,.12), transparent 68%),
    linear-gradient(180deg,#101b2d 0%,#0f1929 100%) !important;
  background-color:#101b2d !important;
}

body.fs-team-product-page .tp a.tp-main-cta,
body.fs-team-product-page .tp a.tp-main-cta:visited,
body.fs-team-product-page .tp a.tp-main-cta:hover,
body.fs-team-product-page .tp a.tp-main-cta:focus-visible {
  color:#fff !important;
}


/* ============================================================
   GRAPHIQUES AVANCÉS — TEAM PAGE
   Classement / buts glissants / points par match
   ============================================================ */

.tp-more-charts {
  margin-top: 14px;
}

.tp-more-charts-toggle {
  width: 100%;
  min-height: 64px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;

  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(21,94,239,.035), transparent 55%),
    var(--tp-soft);
  color: var(--tp-text);

  text-align: left;
  cursor: pointer;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    background-color .16s ease;
}

.tp-more-charts-toggle:hover {
  border-color: #b9c9e4;
  box-shadow: 0 7px 19px rgba(31,55,98,.065);
  transform: translateY(-1px);
}

.tp-more-charts-toggle:focus-visible,
.tp-more-charts-close:focus-visible {
  outline: 2px solid var(--tp-blue);
  outline-offset: 2px;
}

.tp-more-charts-toggle__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(21,94,239,.09);
  color: var(--tp-blue);
}

.tp-more-charts-toggle__icon svg,
.tp-more-charts-toggle__chevron svg,
.tp-more-charts-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp-more-charts-toggle__copy strong {
  display: block;
  font-size: .82rem;
  line-height: 1.3;
}

.tp-more-charts-toggle__copy small {
  display: block;
  margin-top: 3px;
  color: var(--tp-muted);
  font-size: .72rem;
  line-height: 1.4;
}

.tp-more-charts-toggle__chevron {
  display: grid;
  place-items: center;
  color: #7183a4;
  transition: transform .18s ease;
}

.tp-more-charts-toggle[aria-expanded="true"] .tp-more-charts-toggle__chevron {
  transform: rotate(180deg);
}

.tp-advanced-charts {
  margin-top: 10px;
}

.tp-advanced-charts[hidden] {
  display: none !important;
}

.tp-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tp-advanced-chart-card {
  min-height: 322px !important;
}

.tp-advanced-chart-card--wide {
  grid-column: 1 / -1;
}

.tp-chart--advanced {
  height: 250px !important;
  min-height: 250px !important;
}

.tp-chart--advanced-wide {
  height: 265px !important;
  min-height: 265px !important;
}

.tp-chart-hint {
  color: var(--tp-muted);
  font-size: .68rem;
  font-weight: 700;
}

.tp-more-charts-close {
  margin: 10px auto 0;
  min-height: 34px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 0;
  background: transparent;
  color: var(--tp-blue);

  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.tp-more-charts-close svg {
  width: 14px;
  height: 14px;
}

/* Séparateur de saison / fallback graphes */
.tp-chart-empty {
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 18px;

  color: var(--tp-muted);
  text-align: center;
  font-size: .75rem;
  line-height: 1.5;
}

/* ============================================================
   CALIBRATION — réserve la vraie place pour l'axe X
   ============================================================ */

#chart-calibration {
  overflow: visible;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .tp-more-charts {
    margin-top: 10px;
  }

  .tp-more-charts-toggle {
    min-height: 68px;
    padding: 10px 11px;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 9px;
  }

  .tp-more-charts-toggle__icon {
    width: 34px;
    height: 34px;
  }

  .tp-more-charts-toggle__copy strong {
    font-size: .79rem;
  }

  .tp-more-charts-toggle__copy small {
    font-size: .70rem;
  }

  .tp-advanced-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .tp-advanced-chart-card,
  .tp-advanced-chart-card--wide {
    grid-column: auto;
    min-height: 326px !important;
    padding: 12px !important;
  }

  .tp-chart--advanced,
  .tp-chart--advanced-wide {
    height: 255px !important;
    min-height: 255px !important;
  }

  .tp-chart-hint {
    font-size: .68rem;
  }

  .tp-more-charts-close {
    font-size: .72rem;
  }
}



/* ============================================================
   SECTION 7 — PREMIUM CHART RENDERING FIX
   ============================================================ */

body.fs-team-product-page .tp-chart {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.fs-team-product-page .tp-chart > svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

body.fs-team-product-page .tp-chart-card,
body.fs-team-product-page .tp-advanced-chart-card,
body.fs-team-product-page .tp-advanced-chart-card--wide {
  min-height: 0 !important;
}

body.fs-team-product-page .tp-chart-card {
  padding: 15px !important;
  border-radius: 11px !important;
}

body.fs-team-product-page .tp-chart-title {
  min-height: 0 !important;
  margin-bottom: 2px;
}

body.fs-team-product-page .tp-chart-title strong {
  font-size: .82rem !important;
  line-height: 1.32 !important;
}

body.fs-team-product-page .tp-chart-title small {
  margin-top: 3px;
  font-size: .72rem !important;
  line-height: 1.35 !important;
}

body.fs-team-product-page .tp-chart-legend {
  gap: 14px !important;
  margin: 8px 0 9px !important;
  font-size: .72rem !important;
  line-height: 1.3 !important;
}

body.fs-team-product-page .tp-chart-legend span {
  gap: 7px !important;
}

body.fs-team-product-page .tp-chart-legend i {
  width: 22px !important;
  height: 3px !important;
  border-radius: 999px;
}

body.fs-team-product-page .tp-chart-legend i.dash {
  width: 22px !important;
  height: 0 !important;
  border-top-width: 2px !important;
}

body.fs-team-product-page .tp-chart-hint {
  font-size: .70rem !important;
  line-height: 1.3 !important;
}

body.fs-team-product-page .tp-advanced-charts {
  margin-top: 12px !important;
}

body.fs-team-product-page .tp-advanced-grid {
  gap: 13px !important;
}

body.fs-team-product-page #chart-calibration {
  overflow: visible !important;
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  body.fs-team-product-page .tp-dynamics-grid,
  body.fs-team-product-page .tp-advanced-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.fs-team-product-page .tp-chart-card,
  body.fs-team-product-page .tp-advanced-chart-card,
  body.fs-team-product-page .tp-advanced-chart-card--wide {
    grid-column: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  body.fs-team-product-page .tp-chart-title strong {
    font-size: .83rem !important;
  }

  body.fs-team-product-page .tp-chart-title small {
    font-size: .72rem !important;
  }

  body.fs-team-product-page .tp-chart-legend {
    gap: 11px !important;
    margin: 7px 0 8px !important;
    font-size: .71rem !important;
  }

  body.fs-team-product-page .tp-chart-legend i {
    width: 20px !important;
  }

  body.fs-team-product-page .tp-chart-hint {
    font-size: .69rem !important;
  }
}

/* ============================================================
   PROFIL PRÉDICTIF — GRID RESPONSIVE SANS OVERFLOW
   ============================================================ */

.tp-profile-head,
.tp-profile-list > div {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  /* 4 colonnes réelles :
     contexte | valeur | barre | lecture
  */
  grid-template-columns:
    minmax(0, 1.35fr)
    58px
    minmax(90px, 1fr)
    minmax(90px, .85fr) !important;

  column-gap: 10px !important;
  align-items: center !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.tp-profile-head {
  padding: 0 10px 8px !important;
}

.tp-profile-head span {
  min-width: 0 !important;
}

.tp-profile-head span:nth-child(1) {
  grid-column: 1;
}

.tp-profile-head span:nth-child(2) {
  grid-column: 2 / 4 !important;

  text-align: center !important;

  /* IMPORTANT : plus de nowrap */
  white-space: normal !important;

  line-height: 1.3 !important;
}

.tp-profile-head span:nth-child(3) {
  grid-column: 4 !important;
  text-align: left !important;
}


/* ------------------------------------------------------------
   LIGNES
   ------------------------------------------------------------ */

.tp-profile-list {
  min-width: 0 !important;
}

.tp-profile-list > div {
  padding: 9px 10px !important;
}


/* Contexte */

.tp-profile-list > div > span {
  min-width: 0 !important;

  line-height: 1.35 !important;

  overflow-wrap: anywhere;
}


/* Pourcentage */

.tp-profile-list > div > strong {
  min-width: 0 !important;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;
}


/* Barre */

.tp-profile-list > div > i {
  min-width: 0 !important;
  width: 100% !important;

  overflow: hidden;
}


/* Lecture */

.tp-profile-list > div > em {
  min-width: 0 !important;

  white-space: normal !important;
  overflow-wrap: anywhere;

  line-height: 1.3 !important;
}


/* ============================================================
   TABLETTE / PETIT DESKTOP
   La carte devient plus étroite
   ============================================================ */

@media (max-width: 1100px) {

  .tp-profile-head,
  .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1.25fr)
      54px
      minmax(75px, .9fr)
      minmax(80px, .8fr) !important;

    column-gap: 8px !important;
  }

}


/* ============================================================
   MOBILE
   On arrête d'essayer de faire tenir 4 colonnes miniatures.
   Une ligne devient :
   
   Contexte              +8.1 %
   █████████████     Très favorable
   ============================================================ */

@media (max-width: 640px) {

  .tp-profile-head {
    display: none !important;
  }

  .tp-profile-list {
    gap: 6px !important;
  }

  .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    grid-template-rows:
      auto
      auto !important;

    gap: 7px 10px !important;

    min-height: 62px !important;
    padding: 9px 10px !important;
  }


  /* contexte */

  .tp-profile-list > div > span {
    grid-column: 1;
    grid-row: 1;

    font-size: .76rem !important;
  }


  /* pourcentage */

  .tp-profile-list > div > strong {
    grid-column: 2;
    grid-row: 1;

    justify-self: end;

    font-size: .76rem !important;
  }


  /* barre */

  .tp-profile-list > div > i {
    grid-column: 1;
    grid-row: 2;

    width: 100% !important;
    height: 7px !important;
  }


  /* lecture */

  .tp-profile-list > div > em {
    grid-column: 2;
    grid-row: 2;

    justify-self: end;
    text-align: right;

    font-size: .68rem !important;
    white-space: nowrap !important;
  }

}

/* ============================================================
   PROFIL PRÉDICTIF — MOBILE AVEC HEADER CONSERVÉ
   ============================================================ */

@media (max-width: 640px) {

  /* ----------------------------------------------------------
     HEADER
     Contexte | Impact | Lecture
     ---------------------------------------------------------- */

  .tp-profile-head {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      96px
      88px !important;

    column-gap: 9px !important;
    align-items: end !important;

    padding: 0 8px 8px !important;

    color: var(--tp-muted);
    font-size: .68rem !important;
    font-weight: 800;
    line-height: 1.25 !important;
  }

  .tp-profile-head span:nth-child(1) {
    grid-column: 1 !important;
    text-align: left !important;
  }

  .tp-profile-head span:nth-child(2) {
    grid-column: 2 !important;

    text-align: center !important;
    white-space: normal !important;
  }

  .tp-profile-head span:nth-child(3) {
    grid-column: 3 !important;

    text-align: left !important;
  }


  /* ----------------------------------------------------------
     LIGNES
     
     Contexte       +8.1%       Très favorable
                    ███████
     ---------------------------------------------------------- */

  .tp-profile-list {
    gap: 5px !important;
  }

  .tp-profile-list > div {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      96px
      88px !important;

    grid-template-rows:
      auto
      8px !important;

    column-gap: 9px !important;
    row-gap: 5px !important;

    align-items: center !important;

    min-height: 55px !important;
    padding: 8px !important;
  }


  /* Contexte */

  .tp-profile-list > div > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    min-width: 0 !important;

    font-size: .74rem !important;
    line-height: 1.35 !important;

    overflow-wrap: normal !important;
  }


  /* Valeur impact */

  .tp-profile-list > div > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: start !important;

    font-size: .75rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* Barre impact */

  .tp-profile-list > div > i {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 100% !important;
    height: 6px !important;

    min-width: 0 !important;
  }


  /* Lecture */

  .tp-profile-list > div > em {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    min-width: 0 !important;

    font-size: .67rem !important;
    line-height: 1.3 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;

    text-align: left !important;
  }
}


/* Très petits mobiles */
@media (max-width: 380px) {

  .tp-profile-head,
  .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      82px
      76px !important;

    column-gap: 6px !important;
  }

  .tp-profile-head {
    font-size: .63rem !important;
  }

  .tp-profile-list > div > span,
  .tp-profile-list > div > strong {
    font-size: .70rem !important;
  }

  .tp-profile-list > div > em {
    font-size: .62rem !important;
  }
}

/* ============================================================
   PROFIL PRÉDICTIF — MOBILE FINAL
   Contexte | Impact (valeur + barre) | Lecture
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- HEADER ---------- */

  .tp-profile-head {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(100px, .95fr)
      minmax(88px, .85fr) !important;

    gap: 10px !important;
    align-items: end !important;

    width: 100% !important;
    padding: 0 10px 9px !important;

    font-size: .70rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  .tp-profile-head span {
    min-width: 0 !important;
  }

  .tp-profile-head span:nth-child(1) {
    grid-column: 1 !important;
    text-align: left !important;
  }

  .tp-profile-head span:nth-child(2) {
    grid-column: 2 !important;

    text-align: center !important;
    white-space: normal !important;
  }

  .tp-profile-head span:nth-child(3) {
    grid-column: 3 !important;
    text-align: left !important;
  }


  /* ---------- LISTE ---------- */

  .tp-profile-list {
    display: grid !important;
    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  /* Une ligne = deux sous-lignes :
     Contexte | +8.1 %         | Très favorable
              | barre          |
  */

  .tp-profile-list > div {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(100px, .95fr)
      minmax(88px, .85fr) !important;

    grid-template-rows:
      auto
      8px !important;

    column-gap: 10px !important;
    row-gap: 5px !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 10px !important;

    border-radius: 8px !important;
  }


  /* ---------- CONTEXTE ---------- */

  .tp-profile-list > div > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    min-width: 0 !important;

    font-size: .76rem !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  /* ---------- VALEUR ---------- */

  .tp-profile-list > div > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: start !important;
    align-self: end !important;

    min-width: 0 !important;

    font-size: .78rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums;
  }


  /* ---------- BARRE ---------- */

  .tp-profile-list > div > i {
    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 7px !important;

    margin: 0 !important;

    overflow: hidden !important;
  }

  .tp-profile-list > div > i > b {
    height: 100% !important;
  }


  /* ---------- LECTURE ---------- */

  .tp-profile-list > div > em {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    min-width: 0 !important;

    font-size: .69rem !important;
    line-height: 1.35 !important;

    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

}


/* ============================================================
   TRÈS PETITS MOBILES
   On compresse légèrement, mais on conserve les 3 concepts.
   ============================================================ */

@media (max-width: 390px) {

  .tp-profile-head,
  .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1.18fr)
      88px
      78px !important;

    column-gap: 7px !important;
  }

  .tp-profile-head {
    padding-inline: 7px !important;
    font-size: .65rem !important;
  }

  .tp-profile-list > div {
    padding: 9px 7px !important;
  }

  .tp-profile-list > div > span {
    font-size: .72rem !important;
  }

  .tp-profile-list > div > strong {
    font-size: .74rem !important;
  }

  .tp-profile-list > div > em {
    font-size: .64rem !important;
  }
}

/* ============================================================
   PROFIL PRÉDICTIF — MOBILE FINAL
   Contexte | Impact (valeur + barre) | Lecture
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- HEADER ---------- */

  .tp-profile-head {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(100px, .95fr)
      minmax(88px, .85fr) !important;

    gap: 10px !important;
    align-items: end !important;

    width: 100% !important;
    padding: 0 10px 9px !important;

    font-size: .70rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  .tp-profile-head span {
    min-width: 0 !important;
  }

  .tp-profile-head span:nth-child(1) {
    grid-column: 1 !important;
    text-align: left !important;
  }

  .tp-profile-head span:nth-child(2) {
    grid-column: 2 !important;

    text-align: center !important;
    white-space: normal !important;
  }

  .tp-profile-head span:nth-child(3) {
    grid-column: 3 !important;
    text-align: left !important;
  }


  /* ---------- LISTE ---------- */

  .tp-profile-list {
    display: grid !important;
    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  /* Une ligne = deux sous-lignes :
     Contexte | +8.1 %         | Très favorable
              | barre          |
  */

  .tp-profile-list > div {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(100px, .95fr)
      minmax(88px, .85fr) !important;

    grid-template-rows:
      auto
      8px !important;

    column-gap: 10px !important;
    row-gap: 5px !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 10px !important;

    border-radius: 8px !important;
  }


  /* ---------- CONTEXTE ---------- */

  .tp-profile-list > div > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    min-width: 0 !important;

    font-size: .76rem !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  /* ---------- VALEUR ---------- */

  .tp-profile-list > div > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: start !important;
    align-self: end !important;

    min-width: 0 !important;

    font-size: .78rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums;
  }


  /* ---------- BARRE ---------- */

  .tp-profile-list > div > i {
    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 7px !important;

    margin: 0 !important;

    overflow: hidden !important;
  }

  .tp-profile-list > div > i > b {
    height: 100% !important;
  }


  /* ---------- LECTURE ---------- */

  .tp-profile-list > div > em {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    min-width: 0 !important;

    font-size: .69rem !important;
    line-height: 1.35 !important;

    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

}


/* ============================================================
   TRÈS PETITS MOBILES
   On compresse légèrement, mais on conserve les 3 concepts.
   ============================================================ */

@media (max-width: 390px) {

  .tp-profile-head,
  .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1.18fr)
      88px
      78px !important;

    column-gap: 7px !important;
  }

  .tp-profile-head {
    padding-inline: 7px !important;
    font-size: .65rem !important;
  }

  .tp-profile-list > div {
    padding: 9px 7px !important;
  }

  .tp-profile-list > div > span {
    font-size: .72rem !important;
  }

  .tp-profile-list > div > strong {
    font-size: .74rem !important;
  }

  .tp-profile-list > div > em {
    font-size: .64rem !important;
  }
}

/* ============================================================
   PROFIL PRÉDICTIF — ALIGNEMENT MOBILE FINAL
   Même grille exacte pour header + lignes
   ============================================================ */

@media (max-width: 640px) {

  /* ----------------------------------------------------------
     GRILLE COMMUNE
     ---------------------------------------------------------- */

  body.fs-team-product-page .tp-profile-head,
  body.fs-team-product-page .tp-profile-list > div {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1.22fr)
      minmax(92px, .92fr)
      minmax(102px, .88fr) !important;

    column-gap: 10px !important;
  }


  /* ==========================================================
     HEADER
     ========================================================== */

  body.fs-team-product-page .tp-profile-head {
    grid-template-areas:
      "context impact reading" !important;

    align-items: end !important;

    padding:
      0
      10px
      9px
      10px !important;

    font-size: .70rem !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
  }

  body.fs-team-product-page .tp-profile-head > span {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: stretch !important;
  }

  body.fs-team-product-page .tp-profile-head > span:nth-child(1) {
    grid-area: context !important;

    text-align: left !important;
  }

  body.fs-team-product-page .tp-profile-head > span:nth-child(2) {
    grid-area: impact !important;

    text-align: center !important;

    white-space: normal !important;
  }

  body.fs-team-product-page .tp-profile-head > span:nth-child(3) {
    grid-area: reading !important;

    /* IMPORTANT :
       même origine que les labels des lignes */
    text-align: left !important;
  }


  /* ==========================================================
     LIGNES
     ========================================================== */

  body.fs-team-product-page .tp-profile-list {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    gap: 6px !important;
  }

  body.fs-team-product-page .tp-profile-list > div {
    grid-template-areas:
      "context value reading"
      "context bar   reading" !important;

    grid-template-rows:
      auto
      7px !important;

    row-gap: 6px !important;

    align-items: center !important;

    min-height: 58px !important;

    padding:
      10px
      10px !important;
  }


  /* CONTEXTE */

  body.fs-team-product-page .tp-profile-list > div > span {
    grid-area: context !important;

    min-width: 0 !important;

    align-self: center !important;
    justify-self: stretch !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: .76rem !important;
    line-height: 1.35 !important;

    white-space: normal !important;
  }


  /* POURCENTAGE */

  body.fs-team-product-page .tp-profile-list > div > strong {
    grid-area: value !important;

    min-width: 0 !important;

    align-self: end !important;
    justify-self: start !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: .78rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* BARRE */

  body.fs-team-product-page .tp-profile-list > div > i {
    grid-area: bar !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 7px !important;

    align-self: start !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* LECTURE */

  body.fs-team-product-page .tp-profile-list > div > em {
    grid-area: reading !important;

    min-width: 0 !important;

    align-self: center !important;
    justify-self: stretch !important;

    /* surtout aucune translation / marge héritée */
    margin: 0 !important;
    padding: 0 !important;

    font-size: .69rem !important;
    line-height: 1.35 !important;

    text-align: left !important;

    white-space: normal !important;

    transform: none !important;
  }

}


/* ============================================================
   PETITS MOBILES
   ============================================================ */

@media (max-width: 390px) {

  body.fs-team-product-page .tp-profile-head,
  body.fs-team-product-page .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1.15fr)
      82px
      92px !important;

    column-gap: 7px !important;
  }

  body.fs-team-product-page .tp-profile-head {
    padding-left: 7px !important;
    padding-right: 7px !important;

    font-size: .65rem !important;
  }

  body.fs-team-product-page .tp-profile-list > div {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

}

/* ============================================================
   CONTINUER L'EXPLORATION
   ============================================================ */

.tp-explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.tp-explore-card {
  min-width: 0;
  min-height: 94px;

  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;

  padding: 12px;

  border: 1px solid var(--tp-border);
  border-radius: 10px;

  background: var(--tp-soft);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.tp-explore-card:hover {
  border-color: #b9c9e4;
  box-shadow: 0 7px 18px rgba(31, 55, 98, .065);
  transform: translateY(-1px);
}

.tp-explore-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background: rgba(21, 94, 239, .08);
  color: var(--tp-blue);
}

.tp-explore-icon svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp-explore-copy {
  min-width: 0;
}

.tp-explore-copy strong {
  display: block;

  color: var(--tp-text);

  font-size: .78rem;
  line-height: 1.3;
}

.tp-explore-copy small {
  display: block;

  margin-top: 4px;

  color: var(--tp-muted);

  font-size: .68rem;
  line-height: 1.4;
}

.tp-explore-arrow {
  color: var(--tp-blue);

  font-size: 1rem;
  font-weight: 800;

  transition: transform .16s ease;
}

.tp-explore-card:hover .tp-explore-arrow {
  transform: translateX(2px);
}


/* Principal = matchs à venir */

.tp-explore-card--primary {
  border-color: rgba(21, 94, 239, .24);

  background:
    linear-gradient(
      135deg,
      rgba(21, 94, 239, .055),
      rgba(21, 94, 239, .015)
    ),
    var(--tp-card);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  .tp-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .tp-explore-card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;

    min-height: 112px;

    padding: 10px;
  }

  .tp-explore-icon {
    width: 32px;
    height: 32px;
  }

  .tp-explore-icon svg {
    width: 17px;
    height: 17px;
  }

  .tp-explore-copy {
    grid-column: 1 / -1;
  }

  .tp-explore-copy strong {
    font-size: .76rem;
  }

  .tp-explore-copy small {
    font-size: .69rem;
  }

  .tp-explore-arrow {
    grid-column: 2;
    grid-row: 1;

    justify-self: end;
  }
}

/* ============================================================
   PRODUCT RENDERER CONTRACT — SSR + predictive profile
   Keep this final block last: it protects generated pages from
   legacy/global table rules and from earlier prototype overrides.
   ============================================================ */

body.fs-team-product-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Preserve each crest's intrinsic proportions inside the shared logo frame. */
body.fs-team-product-page .tp-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 641px) {
  body.fs-team-product-page .tp-profile-head,
  body.fs-team-product-page .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(112px, .72fr)
      minmax(100px, .9fr)
      minmax(110px, .9fr) !important;
  }

  body.fs-team-product-page .tp-profile-list > div > strong {
    min-width: 112px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  body.fs-team-product-page .tp-market-prob {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }

  body.fs-team-product-page .tp-market-prob b {
    display: block;
    line-height: 1.1;
    white-space: nowrap;
  }

  body.fs-team-product-page .tp-market-prob i {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.fs-team-product-page .tp-profile-head,
  body.fs-team-product-page .tp-profile-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(108px, .92fr)
      minmax(90px, .8fr) !important;
  }

  body.fs-team-product-page .tp-profile-list > div > strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}