/* Cyclopedia Civilisations · hub : frise « Qui vivait en même temps ? » */
.fz{--lw:96px;margin-top:6px}
.fz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.fz-chip{border:0;border-radius:980px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);padding:9px 16px;font:500 15px/1.2 var(--body);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.fz-chip:hover{background:#ececf0}
.fz-chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.fz-plot{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);column-gap:10px;row-gap:8px;background:#fff;border-radius:22px;padding:14px 12px 10px;position:relative}
.fz-lab{align-self:center;font:600 15px var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
a.fz-lab:hover{color:var(--link)}
.fz-lab[href]::after{content:" →";color:var(--ink4);font-weight:400}
.fz-track{position:relative;height:46px;background:var(--tile);border-radius:12px}
.fz-track.mo{height:30px;background:transparent}
.fz-track.mo::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,0,.1);border-radius:2px}
.fz-b{position:absolute;top:0;bottom:0;border:0;border-radius:10px;padding:0 8px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font:600 12.5px var(--body);cursor:pointer;transition:box-shadow .15s}
.fz-b.d{background:var(--violet);color:#fff}
.fz-b.l{background:#e6d6f6;color:#4b2a70}
.fz-b:hover{filter:brightness(.95)}
.fz-b.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);z-index:2}
.fz-pin{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;background:var(--blue);box-shadow:0 0 0 1px rgba(0,0,0,.18);padding:0;cursor:pointer;transition:transform .15s}
.fz-pin:hover{transform:scale(1.25)}
.fz-pin.on{transform:scale(1.55);box-shadow:0 0 0 3px rgba(0,113,227,.28)}
.fz-axis{position:relative;height:22px}
.fz-tick{position:absolute;top:2px;transform:translateX(-50%);font:500 12px var(--body);color:var(--ink4);white-space:nowrap}
.fz-tick.zero{color:var(--violet);font-weight:700}
.fz-over{grid-column:2;grid-row:1 / 5;position:relative;pointer-events:none;z-index:3}
.fz-gl{position:absolute;top:0;bottom:-8px;width:1px;background:rgba(0,0,0,.06);margin-left:-.5px}
.fz-gl.zero{background:rgba(142,68,216,.4);width:1.5px}
.fz-cur{position:absolute;top:-6px;bottom:-8px;width:2px;margin-left:-1px;background:var(--blue);border-radius:2px;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.fz-cur::before{content:"";position:absolute;top:-2px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px #fff}
.fz-ctl{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);column-gap:10px;padding:8px 12px 0;align-items:center}
.fz-yb{display:grid;line-height:1.05;justify-items:start}
.fz-year{font:700 clamp(21px,2.6vw,28px) var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fz-ys{font:500 12px var(--body);color:var(--ink3);max-width:100%}
.fz input[type=range].fz-slider{-webkit-appearance:none;appearance:none;width:calc(100% + 24px);margin:0 -12px;height:32px;background:transparent;cursor:pointer}
.fz input[type=range].fz-slider::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#d6d6dc,#c3c3cb)}
.fz-slider::-moz-range-track{height:6px;border-radius:6px;background:#cfcfd6}
.fz-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fz-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fz-slider:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.fz-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.fz-c{background:#fff;border-radius:20px;padding:16px 18px;display:grid;gap:6px;align-content:start}
.fz-cn{font:600 13px var(--body);color:var(--violet);text-decoration:none;letter-spacing:.02em}
.fz-cn:hover{text-decoration:underline}
.fz-c h4{font-size:19px;line-height:1.2;letter-spacing:-.02em}
.fz-c p{font-size:15px;line-height:1.45;color:#424245}
.fz-c.none h4{color:var(--ink4)}
.fz-moment{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;background:#fff;border-radius:24px;overflow:hidden;margin-top:12px;box-shadow:inset 0 0 0 2px rgba(0,113,227,.25)}
.fz-moment[hidden]{display:none}
.fz-mi{background:#ededf1;min-height:100%}
.fz-mi img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.fz-mt{padding:clamp(18px,2.6vw,30px);display:grid;gap:8px;align-content:center}
.fz-when{font:600 13px var(--body);color:var(--gold)}
.fz-mt h4{font-size:clamp(21px,2.4vw,28px);line-height:1.12;letter-spacing:-.03em}
.fz-mt p{font-size:16px;line-height:1.5;color:#424245}
.fz-go{justify-self:start;margin-top:4px;font:500 16px var(--body);color:var(--link);text-decoration:none}
.fz-go:hover{text-decoration:underline}
.fz-sh{font-size:20px;letter-spacing:-.02em;margin:26px 0 12px}
.fz-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.fz-th{border:0;background:#fff;border-radius:16px;padding:0;text-align:left;cursor:pointer;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s,box-shadow .15s}
.fz-th:hover{transform:translateY(-2px)}
.fz-th[aria-pressed="true"]{box-shadow:0 0 0 3px var(--blue)}
.fz-ti{display:block;aspect-ratio:3/2;background:#ededf1}
.fz-ti img{display:block;width:100%;height:100%;object-fit:cover}
.fz-tt{display:grid;gap:2px;padding:9px 11px 11px;align-content:start}
.fz-tt em{font:600 12px var(--body);color:var(--gold);font-style:normal}
.fz-tt b{font:600 14px/1.25 var(--body);color:var(--ink)}
.fz-hyp-go{justify-self:start}
@media (max-width:1100px){.fz-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.fz-now{grid-template-columns:minmax(0,1fr)}.fz-moment{grid-template-columns:minmax(0,1fr)}.fz-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.fz{--lw:72px}.fz-ys{font-size:11px}.fz-plot{column-gap:8px}.fz-ctl{column-gap:8px}.fz-lab{font-size:13px}.fz-lab[href]::after{content:""}.fz-track{height:40px}.fz-b{font-size:11.5px;padding:0 5px}.fz-tick{font-size:11px}.fz-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.fz-chip{padding:8px 13px;font-size:14px}}