/* Généré par scripts/extract-recap-mockup.mjs depuis mockups/recap-v2.html. Ne pas éditer à la main. */
/* --- maquette récap v2 : classes candidates pour design.css ---
   Tokens du site : --ink = fond, --ivory = texte, --muted = texte secondaire,
   --lime = accent, --line = bordures. Tout est scopé sous #main pour passer
   devant les règles .content-main de design.css. */
#main .r2-hero{padding:2.2rem 0 .5rem}
#main .r2-eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--muted);margin:0 0 1rem}
#main .r2-big{font-size:clamp(3rem,10vw,7rem);line-height:.92;font-weight:800;margin:0;letter-spacing:-.035em;color:var(--lime);font-variant-numeric:tabular-nums}
#main .r2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#main .r2-cents{font-size:.42em;letter-spacing:-.01em;color:var(--muted);font-weight:700}
#main .r2-lede{font-size:clamp(1.1rem,2.6vw,1.6rem);line-height:1.35;margin:1rem 0 0;max-width:30ch;color:var(--ivory);font-weight:600}
#main .r2-hero-note{color:var(--muted);font-size:.86rem;margin:1.6rem 0 0;max-width:70ch}
#main .r2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:2rem 0 0;padding:0;list-style:none}
#main .r2-kpis li{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
#main .r2-kpis b{display:block;font-size:1.9rem;line-height:1.1;font-weight:800;color:var(--ivory)}
#main .r2-kpis span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}

#main .r2-x2025{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;border-left:4px solid var(--lime);padding:.5rem 0 .5rem 1.3rem;margin:1.2rem 0 1.6rem}
#main .r2-x2025 b{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:800;line-height:1;color:var(--lime)}
#main .r2-x2025 span{max-width:52ch}
#main .r2-bars{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;max-width:760px}
#main .r2-bars li{display:grid;grid-template-columns:3.4rem 1fr 5rem;align-items:center;gap:.9rem;font-variant-numeric:tabular-nums;color:var(--muted)}
#main .r2-bar{height:.8rem;border-radius:99px;background:var(--line)}
#main .r2-bar i{display:block;height:100%;border-radius:99px;background:var(--muted)}
#main .r2-bars li[data-now]{color:var(--ivory);font-weight:700}
#main .r2-bars li[data-now] .r2-bar i{background:var(--lime)}
/* Bar widths live here, not in a style= attribute: the site's CSP is
   `style-src 'self'` with no 'unsafe-inline', which silently drops inline
   style attributes and rendered every bar full width. */
#main .r2-bar i.r2-w313{width:31.3%}
#main .r2-bar i.r2-w310{width:31%}
#main .r2-bar i.r2-w308{width:30.8%}
#main .r2-bar i.r2-w492{width:49.2%}
#main .r2-bar i.r2-w100{width:100%}
#main .r2-bars li[data-void]{opacity:.72}
#main .r2-bar-void{background:none;box-shadow:inset 0 0 0 1px var(--line)}

#main .r2-frame{margin:1.4rem 0 0;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem}
#main .r2-chart{width:100%;height:auto;display:block}
.r2-grid{stroke:var(--line);stroke-width:1}
.r2-ytick,.r2-xtick{fill:var(--muted);font-size:13px}
.r2-ytick{text-anchor:end}
.r2-xtick{text-anchor:middle}
.r2-area{fill:var(--lime);opacity:.14}
.r2-line{fill:none;stroke:var(--lime);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.r2-dot{fill:var(--lime)}
.r2-rec{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:6 5}
.r2-reclab{fill:var(--muted);font-size:13px}
.r2-blind{fill:var(--muted);opacity:.09}
.r2-blindline{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 4}
.r2-blindlab{fill:var(--muted);font-size:14px;font-weight:700}
.r2-blindlab2{fill:var(--muted);font-size:12.5px}

#main .r2-podium{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:end}
#main .r2-pod{text-align:center;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem .8rem;display:grid;gap:.35rem;justify-items:center}
#main .r2-pod-2{padding-top:2.4rem;border-color:var(--lime)}
#main .r2-pod img{border-radius:50%;width:96px;height:96px;object-fit:cover}
#main .r2-pod a{font-weight:700;font-size:1.1rem}
#main .r2-pod b{font-size:1.4rem;color:var(--ivory);font-variant-numeric:tabular-nums}
#main .r2-medal{font-weight:800;color:var(--muted);font-size:.8rem;letter-spacing:.1em}
#main .r2-share{color:var(--muted);font-size:.85rem}
#main .r2-strs{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.5rem}
#main .r2-str{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:var(--radius);padding:.5rem .8rem}
#main .r2-str img{border-radius:50%;width:48px;height:48px;object-fit:cover}
#main .r2-rank{color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.4rem;font-weight:700}
#main .r2-str-body{display:grid}
#main .r2-str-body a{font-weight:600}
#main .r2-str-body b{font-variant-numeric:tabular-nums;color:var(--ivory)}

#main .r2-clips{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
#main .r2-clip a{display:grid;gap:.35rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;height:100%;align-content:start}
#main .r2-clip img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
#main .r2-clip-t{font-weight:600;padding:.5rem .8rem 0;color:var(--ivory)}
#main .r2-clip-m{color:var(--muted);font-size:.86rem;padding:0 .8rem .8rem}

#main .r2-equiv{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
#main .r2-equiv li{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;display:grid;gap:.3rem}
#main .r2-equiv b{font-size:1.75rem;line-height:1.05;font-weight:800;color:var(--lime);font-variant-numeric:tabular-nums}
#main .r2-equiv span{color:var(--ivory)}
#main .r2-equiv small{color:var(--muted);line-height:1.4;font-size:.8rem}

#main .r2-mil{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.8rem}
#main .r2-mil li{border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;display:grid;gap:.15rem}
#main .r2-mil b{font-size:1.55rem;font-weight:800;color:var(--ivory)}
#main .r2-mil span{color:var(--muted);font-size:.88rem}

/* Respiration entre les sections : chaque bloc respire et se sépare du suivant. */
#main > section{margin-top:4.5rem;padding-top:3rem;border-top:1px solid var(--line)}
#main > section.r2-hero{margin-top:0;padding-top:2.2rem;border-top:0}
#main > section > h2{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 .35rem}
#main > section > h2 + p{margin-top:0;color:var(--muted);max-width:68ch}
#main .spotlight{margin-top:4.5rem}
#main > main > p:last-of-type,#main > p:last-of-type{margin-top:3rem}

@media (max-width:640px){
  #main > section{margin-top:2.8rem;padding-top:2rem}
  #main .spotlight{margin-top:2.8rem}
  #main .r2-podium{grid-template-columns:1fr;gap:.6rem}
  #main .r2-pod,#main .r2-pod-2{padding:.7rem .9rem;grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;text-align:left;column-gap:.9rem}
  #main .r2-pod img{width:52px;height:52px;grid-row:span 2}
  #main .r2-pod .r2-medal{grid-column:1;grid-row:1/3;align-self:center}
  #main .r2-pod b{grid-column:3;grid-row:1/3;align-self:center;font-size:1.15rem}
  #main .r2-share{display:none}
  #main .r2-clips{grid-template-columns:1fr 1fr;gap:.6rem}
  #main .r2-clip-t{font-size:.85rem}
  #main .r2-clip-m{font-size:.75rem}
  #main .r2-kpis{grid-template-columns:1fr 1fr;gap:.6rem}
  #main .r2-kpis li{padding:.7rem}
  #main .r2-kpis b{font-size:1.4rem}
  #main .r2-mil{grid-template-columns:1fr 1fr;gap:.6rem}
}