/* Page Semaine v3 : un entonnoir, du mot aux tweets. Blanc, noir, gris très clair, une couleur d'accent.
   Les couleurs de bloc ne servent qu'aux données. Ni cadres, ni pastilles, ni barre de sélection, ni ombres.
   Échelle : le mot (display) > titres de section 28 > phrase d'appui 24 > texte 16 > notes 13. */
.top { position: static; }
.top-row { min-height: 44px; justify-content: space-between; }
.top-org { color: #bdbdb8; font-size: var(--t-small); }

.sm { padding-block: 0 80px; font-variant-numeric: tabular-nums; }
.sm h1, .sm h2, .sm h3 { text-wrap: balance; }
.sm-note { color: var(--gray); font-size: var(--t-small); margin: 8px 0; max-width: 70ch; }
.lnk { all: unset; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--accent-ink); font-weight: 700; }
.lnk:hover { color: var(--ink); }
.lnk:focus-visible, .sm a:focus-visible, .sm button:focus-visible, .sm summary:focus-visible, .ad a:focus-visible, .ad summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sm-line { margin-top: 6px; font-size: var(--t-body); }

/* 1. la frise des semaines */
.fr { overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); border-bottom: 1px solid #e9e8e4; }
.fr ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; width: max-content; min-width: 100%; }
.fr a { display: grid; gap: 2px; padding: 14px 28px 12px 0; margin-right: 0; text-decoration: none; color: var(--gray); scroll-snap-align: start; border-bottom: 3px solid transparent; margin-bottom: -1px; min-width: 7.5rem; }
.fr a:hover .m { color: var(--ink); }
.fr .d { font-size: var(--t-small); }
.fr .m { font-size: 19px; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }
.fr a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.fr a[aria-current="page"] .m { font-weight: 700; color: var(--accent-ink); }
.sm-alert { margin-top: 14px; color: var(--accent-ink); font-weight: 700; font-size: var(--t-body); }

/* 2. le mot */
.sm-word { padding: clamp(28px, 5vw, 64px) 0 clamp(8px, 2vw, 24px); }
.sm-kicker { font-size: var(--t-body); color: var(--ink-2); }
.sm-mot { font-size: clamp(60px, 13vw, 168px); font-weight: 700; letter-spacing: -0.05em; line-height: .92; margin: clamp(10px, 1.6vw, 22px) 0 clamp(16px, 2vw, 28px) -0.04em; text-wrap: nowrap; }
.sm-mot .part { display: inline-block; white-space: nowrap; }
.sm-mot-small { font-size: clamp(40px, 7vw, 96px); }
.sm-why { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; max-width: 40ch; text-wrap: pretty; }
.sm-solid { margin-top: 14px; max-width: 66ch; line-height: 1.5; }
.sm-solid b { font-weight: 700; }
.sm-how { margin-top: 8px; max-width: 62ch; color: var(--ink-2); }

/* sections */
.sm-sec { margin-top: clamp(56px, 7vw, 96px); }
.sm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.sm h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.sm h3 { font-size: var(--t-body); font-weight: 700; margin: 0 0 8px; }
.sm-lead { font-size: 20px; line-height: 1.35; max-width: 56ch; margin-bottom: 20px; text-wrap: pretty; }
.sm-legend { font-size: var(--t-small); color: var(--gray); margin-top: 10px; max-width: 72ch; line-height: 1.4; }
.sm-legend .acc { color: var(--accent-ink); font-weight: 700; }
.sm-keys { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--t-small); color: var(--ink-2); margin-top: 10px; }
.sm-keys .dot, .sm h3 .dot { margin-right: 6px; }

/* textes-onglets : la sélection se lit à la graisse et au soulignement */
.sm-tabs { display: flex; flex-wrap: wrap; gap: 0 22px; }
.sm-tabs button { all: unset; cursor: pointer; padding: 8px 0; min-height: 24px; color: var(--gray); font-size: var(--t-body); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.sm-tabs button:hover { color: var(--ink); }
.sm-tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); }
.sm-tabs button:disabled { opacity: .35; cursor: default; }
.sm-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sm-tabs small { font-weight: 400; color: var(--gray); font-size: var(--t-small); margin-left: 2px; }
.sm-tabs-bloc { margin-bottom: 20px; }

/* 3. l'orbite */
.sm-orbit svg { display: block; overflow: visible; }
.sm-ring { fill: none; stroke: #ecebe7; stroke-width: 1; }
.sm-spoke { stroke: #f1f0ed; stroke-width: 1; }
.sm-core { fill: var(--ink); }
.sm-node { cursor: pointer; outline: none; }
.sm-node text { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.sm-node.is-new text { fill: var(--accent-ink); font-weight: 700; }
.sm-node:hover text, .sm-node.sel text { font-weight: 700; text-decoration: underline; }
.sm-node .sm-sel { display: none; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.sm-node.sel .sm-sel, .sm-node:focus-visible .sm-sel { display: block; }
.sm-node:focus-visible .sm-sel { stroke: var(--accent); stroke-width: 3; }
.sm-center text { fill: var(--paper); stroke: none; font-weight: 700; font-size: 13px; }
.sm-center .sm-sel { stroke: var(--ink); }
.sm-node text.lab-hidden { display: none; }
.sm-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sm-bars li { display: grid; grid-template-columns: minmax(7rem, 14rem) minmax(60px, 1fr) 6rem; gap: 14px; align-items: center; padding: 3px 0; }
.sm-bars .b { height: 10px; background: #f3f2ef; }
.sm-bars .b i { display: block; height: 100%; }
.sm-bars .n { font-size: var(--t-small); color: var(--gray); text-align: right; }
.wd { all: unset; cursor: pointer; font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.wd:hover { text-decoration: underline; }
.wd.nw { color: var(--accent-ink); }
.wd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-wordrow { display: flex; flex-wrap: wrap; gap: 2px 16px; line-height: 1.6; }
.sm-wordrow.gone { color: var(--gray); }
.sm-wl { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gap); }

/* 4. les tweets */
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.tw header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.tw header div { display: grid; line-height: 1.25; }
.tw header span { font-size: var(--t-small); color: var(--gray); }
.tw p { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; max-width: 60ch; }
.tw a { display: inline-block; margin-top: 8px; font-size: var(--t-small); font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.sm-more { margin-top: 28px; }

/* 5. qui l'a lancé */
.sm-start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.sm-first { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.sm-first li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 10px; }
.sm-first .rk { font-size: 28px; font-weight: 700; color: var(--ref); line-height: 1; letter-spacing: -0.03em; }
.sm-grid { stroke: #ecebe7; }
.sm-base { stroke: var(--ink); }
.sm-sec .b { fill: var(--ref); }
.sm-sec rect.b.cur { fill: var(--accent); }
.sm-evo-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }

/* 7. le mot de chaque bloc */
.sm-bloc h3 { font-size: var(--t-small); font-weight: 400; color: var(--ink-2); }
.bigword { all: unset; display: block; cursor: pointer; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 4px 0 12px; overflow-wrap: anywhere; }
.bigword:hover { text-decoration: underline; text-underline-offset: 5px; }
.bigword:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sm-bloc .lnk { display: inline-block; margin-top: 12px; font-size: var(--t-small); }
.sm-zoomin { background: var(--band); padding: clamp(20px, 3vw, 40px); margin-top: 36px; }
.sm-zoomin > h3 { font-size: 22px; margin-bottom: 18px; letter-spacing: -0.02em; }
.sm-zoom-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.sm-zoomin h4 { font-size: var(--t-body); margin: 0 0 8px; }
.sm-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-people li { display: grid; grid-template-columns: 28px minmax(6rem, 11rem) minmax(40px, 1fr) 2rem; gap: 10px; align-items: center; font-size: var(--t-small); }
.sm-people .b { height: 8px; background: var(--paper); }
.sm-people .b i { display: block; height: 100%; }
.sm-people .n { text-align: right; color: var(--ink-2); }
.sm-zoomin .sm-node text { stroke: var(--band); }

/* 8. les autres thèmes */
.sm-themes { list-style: none; margin: 0; padding: 0; }
.sm-themes li { display: grid; grid-template-columns: 2rem minmax(8rem, 15rem) minmax(0, 1fr) minmax(80px, 18%); gap: 4px 18px; align-items: center; padding: 9px 8px 9px 0; }
.sm-themes li.sel { background: var(--band); }
.sm-themes .rk { color: var(--gray); font-weight: 700; padding-left: 8px; }
.sm-themes .th { all: unset; cursor: pointer; font-size: 20px; letter-spacing: -0.015em; font-weight: 400; }
.sm-themes .th:hover { text-decoration: underline; text-underline-offset: 4px; }
.sm-themes .th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-themes li.sel .th { font-weight: 700; }
.sm-themes .near { font-size: var(--t-small); color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-themes .b { height: 8px; background: #f3f2ef; }
.sm-themes .b i { display: block; height: 100%; background: var(--ink); }
.sm-themes li.sel .b { background: var(--paper); }

/* 9. aller plus loin */
.sm-more { border-top: 2px solid var(--ink); }
.sm-fold { border-bottom: 1px solid #e9e8e4; }
.sm-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; }
.sm-fold > summary::-webkit-details-marker { display: none; }
.sm-fold > summary::after { content: "+"; font-size: 26px; line-height: 1; font-weight: 400; }
.sm-fold[open] > summary::after { content: "−"; }
.sm-fold > summary h2 { font-size: 22px; font-weight: 400; }
.sm-fold[open] > summary h2 { font-weight: 700; }
.sm-fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.sm-fold-body { padding: 0 0 32px; max-width: 78ch; }
.sm-fold-body .chart { max-width: 760px; }
.sm-method p { margin-top: 10px; }
.sm-tech { color: var(--gray); font-size: var(--t-small); }
.sm-gone, .sm-adopt { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sm-adopt span { color: var(--ink-2); }

/* Administration */
.ad { padding-block: 40px 96px; font-variant-numeric: tabular-nums; }
.ad-title { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; line-height: .95; font-weight: 700; margin-bottom: 40px; }
.ad h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; }
.ad h3 { font-size: var(--t-body); margin: 18px 0 6px; }
.ad-sec { margin-top: 48px; }
.ad-lead { font-size: 20px; line-height: 1.35; margin-top: 12px; max-width: 60ch; }
.ad-sub { color: var(--ink-2); margin-top: 8px; max-width: 70ch; font-size: var(--t-body); }
.ad-people { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(32px, 5vw, 80px); }
.ad-people li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(70px, 160px) 3rem; gap: 4px 14px; align-items: center; }
.ad-people .who { display: grid; line-height: 1.25; min-width: 0; }
.ad-people .who span { font-size: var(--t-small); color: var(--gray); }
.gauge { height: 8px; background: #f0efec; }
.gauge i { display: block; height: 100%; background: var(--ink); }
.ad-people li.alert .gauge i { background: var(--accent); }
.ad-people .pct { text-align: right; font-weight: 700; font-size: var(--t-small); }
.ad-people .al { grid-column: 2 / -1; color: var(--accent-ink); font-size: var(--t-small); font-weight: 700; }
.ad-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
.ad-links a { font-weight: 700; text-underline-offset: 4px; }
.ad-fold { border-bottom: 1px solid #e9e8e4; margin-top: 0; }
.ad-fold:first-of-type { margin-top: 48px; border-top: 2px solid var(--ink); }
.ad-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 18px 0; }
.ad-fold > summary::-webkit-details-marker { display: none; }
.ad-fold > summary::after { content: "+"; font-size: 26px; line-height: 1; }
.ad-fold[open] > summary::after { content: "−"; }
.ad-fold > summary h2 { font-size: 20px; font-weight: 400; }
.ad-tech { padding-bottom: 28px; max-width: 80ch; }
.cf-back { font-size: var(--t-small); color: var(--gray); margin-bottom: 8px; }

/* pied de page */
.foot { padding-block: 28px; }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.foot-name { font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.foot-meta { margin: 0; }
.foot-meta a { color: #cfcfca; font-size: var(--t-small); }

@media (max-width: 1100px) {
  .sm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-start-grid, .sm-evo-grid, .sm-zoom-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-people { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sm-themes li { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(60px, 30%); }
  .sm-themes .near { grid-column: 2 / -1; grid-row: 2; }
  .sm-bars li { grid-template-columns: minmax(5.5rem, 9rem) minmax(40px, 1fr) 4.2rem; gap: 10px; }
}
@media (max-width: 520px) {
  .sm-cols { grid-template-columns: minmax(0, 1fr); }
  .fr a { min-width: 6.5rem; padding-right: 20px; }
  .sm-tabs { gap: 0 16px; }
  .sm-people li { grid-template-columns: 28px minmax(0, 1fr) 2rem; }
  .sm-people .b { grid-column: 2 / -1; grid-row: 2; }
  .ad-people li { grid-template-columns: 44px minmax(0, 1fr) 3rem; }
  .ad-people .gauge { grid-column: 2; grid-row: 2; }
  .ad-people .pct { grid-column: 3; grid-row: 2; }
  .ad-people .al { grid-column: 1 / -1; }
}