
@media (max-width: 860px){
    .hero-grid{ grid-template-columns:1fr; }
  }
.hero-stats{
    display:flex;
    gap:1.8rem;
    flex-wrap:wrap;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2.5rem;
    align-items:start;
  }
  .stat dt{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 .2rem;
  }
  .stat dd{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:600;
    margin:0;
  }

  /* ===== Fil d'Ariane ===== */
  .breadcrumb{
    font-size:.82rem;
    color:var(--ink-soft);
    padding:.65rem 1.5rem;
    border-bottom:1px solid var(--line);
    background:var(--paper);
  }
  .breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
  .breadcrumb a:hover{ text-decoration:underline; }
  .breadcrumb span[aria-hidden]{ margin:0 .4rem; color:var(--bronze); }

  /* ===== Rich ranking ===== */
  .ranking-list{ list-style:none; margin:0; padding:0; }
  .ranking-row{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1rem 1.3rem 1.1rem;
    margin-bottom:.7rem;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .ranking-row:hover{ box-shadow:0 6px 16px rgba(22,36,59,.07); transform:translateY(-1px); }
  .row-top{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:1rem; margin-bottom:.6rem; flex-wrap:wrap;
  }
  .row-top .left{ display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap; }
  .row-top .name{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; }
  .row-top .meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }

  .rank-num{
    font-family:var(--font-mono); font-size:1rem; font-weight:600;
    color:var(--bronze); width:1.5rem; display:inline-block; flex:none;
  }
  .rank-num--muted{ color:var(--line); font-size:1.2rem; width:1.5rem; }

  
  .pop-link{ display:flex; align-items:baseline; gap:1.2rem; }
  .pop-link .pop{ font-family:var(--font-mono); font-weight:600; font-size:.92rem; }
  .pop-link .link{ font-size:.82rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--bronze); white-space:nowrap; }
  .ranking .name{ font-weight:600; flex:1; min-width:160px; }
  .ranking .pop{ font-family:var(--font-mono); font-size:.88rem; color:var(--ink-soft); flex:none; }
  .ranking .link{ font-size:.82rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--bronze); flex:none; white-space:nowrap; }

  .chip-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .76rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    margin-top: .5rem;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    }

    section{ padding:2.6rem 0; }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap;
    max-width: 100% !important;
  }
  h2.section-title{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:0; }
  .section-note{ font-size:.85rem; color:var(--ink-soft); }

  .insight {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
  }
  .insight-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.2rem;
  align-items: center;
  }

  .insight .delta {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--sage);
    margin: 0 0 .3rem;
  }
    .insight .delta-neg {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--stamp);
    margin: 0 0 .3rem;
  }

  .insight .delta-zero {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 0 0 .3rem;
  }


  .score-bar-wrap{ padding:.9rem 0; border-top:1px solid var(--line); }
  .score-bar-header{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin-bottom:.55rem; }
  .score-bar-header .s-title{ font-weight:600; color:var(--ink); }
  .score-bar-track{ position:relative; height:12px; background:var(--line); border-radius:6px; overflow:visible; }
  .score-bar-fill{ height:100%; border-radius:6px; background:var(--module-accent); }
  .score-bar-tick{ position:absolute; top:-5px; bottom:-5px; width:1px; background:var(--surface); }
  .score-bar-tick::after{ content:attr(data-label); position:absolute; top:20px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.63rem; color:var(--ink-soft); white-space:nowrap; }
  .score-bar-marker{ position:absolute; top:-7px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid currentColor; transform:translateX(-50%); }
  .score-bar-marker.is-dept{ color:var(--ink); }
  .score-bar-marker.is-region{ color:var(--ink-soft); }
  .score-bar-legend{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:1.3rem; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); }
  .score-bar-legend span{ display:inline-flex; align-items:center; gap:.35rem; }
  .score-bar-legend .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
  .score-bar-legend .tri{ width:0; height:0; flex:none; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid currentColor; }

  
  .percentile-ranks{ display:flex; flex-direction:column; gap:.38rem; padding:.85rem 0; border-top:1px solid var(--line); }
  .percentile-rank-row{ display:flex; align-items:baseline; gap:.55rem; font-size:.85rem; }
  .percentile-rank-row .pr-scope{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); flex:none; width:72px; }
  .percentile-rank-row .pr-phrase{ color:var(--ink-soft); }
  .percentile-rank-row .pr-phrase strong{ font-weight:700; }
  .percentile-rank-row .pr-phrase strong.is-above{ color:var(--sage); }
  .percentile-rank-row .pr-phrase strong.is-below{ color:var(--stamp); }

    .module-methodology{ margin-top:.4rem; }
  .module-methodology summary{
    cursor:pointer; font-size:.84rem; font-weight:600; color:var(--ink);
    list-style:none;
  }
  .module-methodology summary::-webkit-details-marker{ display:none; }
  .module-methodology .panel{ font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; }

