/**
 * vikz : gabarits de listes, frise chronologique, détail d'image, accueil.
 * Repris de design/system/pages.css.
 */

/* cartes de fiches */
.page :is(.vikz-cards,.vikz-countries){padding:0;max-width:none;margin:0}
.vikz-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:var(--s6) var(--s5);margin:0;padding:0;list-style:none}
.vikz-card{display:flex;flex-direction:column;gap:6px;min-width:0;color:inherit;text-decoration:none}
.vikz-card .ph{aspect-ratio:3/2;margin-bottom:6px}
.vikz-card:not(:has(.ph))::before{content:"Pas de photo";display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;margin-bottom:6px;background:var(--paper-3);border:1px dashed var(--rule);font:var(--fs-xs)/1 var(--f-mono);color:var(--ink-3)}
.vikz-card .k{font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--accent)}
.vikz-card .n{font:700 var(--fs-l)/1.1 var(--f-display);color:var(--ink)}
.vikz-card:hover .n{color:var(--accent)}
.vikz-card .d{font:var(--fs-s)/1.4 var(--f-mono);color:var(--ink-2)}
.vikz-card .m{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);margin-top:2px;font:700 var(--fs-xs)/1.2 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-3)}
.vikz-card .m .u{display:inline-flex;align-items:center;gap:5px;color:var(--use)}
.vikz-card .m .u::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vikz-card .m .todo{color:var(--status-todo);border-bottom:1px dotted currentColor}
.vikz-cards.is-compact{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--s5) var(--s4)}

/* vue tableau (comparaison) */
.vikz-rows{width:100%;border-collapse:collapse;font-size:var(--fs-m)}
.vikz-rows th{text-align:left;padding:0 var(--s4) 6px 0;border-bottom:2px solid var(--ink);font:700 var(--fs-xs)/1.2 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);white-space:nowrap;cursor:pointer}
.vikz-rows td{padding:7px var(--s4) 6px 0;border-bottom:1px solid var(--rule);vertical-align:baseline;font-variant-numeric:tabular-nums}
.vikz-rows td.n a{font:700 var(--fs-m)/1.2 var(--f-display)}
.vikz-rows td.d{font:var(--fs-s)/1.35 var(--f-mono);color:var(--ink-2)}
.vikz-rows tr:hover td{background:var(--paper-2)}

/* en-tête de liste */
.vikz-listhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.vikz-listhead h1{margin:0}
.vikz-listhead .count{font:700 var(--fs-s)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-3);margin-top:var(--s3)}
.vikz-seg{display:inline-flex;border:1px solid var(--ink)}
.vikz-seg button{border:0;background:none;padding:6px 12px;font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink);cursor:pointer}
.vikz-seg button.on{background:var(--ink);color:var(--paper)}
.vikz-active{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:0 0 var(--s5);font:var(--fs-s) var(--f-display);color:var(--ink-3)}
.vikz-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--ink);background:none;font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink);cursor:pointer}
.vikz-chip::after{content:"×";font-family:var(--f-mono)}
.vikz-chip.off{border-color:var(--rule);color:var(--ink-3)}
.vikz-chip.off::after{content:"+"}

/* index : facettes + résultats */
.vikz-index{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:var(--s7)}
.vikz-facets{font:var(--fs-m)/1.3 var(--f-display)}
.vikz-facets>h2{margin:0 0 var(--s3);padding:0 0 var(--s2);border:0;border-bottom:2px solid var(--ink);font:700 var(--fs-s)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps)}
.vikz-facet{border-bottom:1px solid var(--rule);padding:var(--s3) 0}
.vikz-facet h3{margin:0 0 var(--s2);font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-3)}
.vikz-facet ul{list-style:none;margin:0;padding:0}
.vikz-facet li a{display:flex;justify-content:space-between;gap:var(--s2);padding:3px 0;color:var(--ink);text-decoration:none}
.vikz-facet li a span{font:var(--fs-xs)/1.6 var(--f-mono);color:var(--ink-3)}
.vikz-facet li a:hover{color:var(--accent)}
.vikz-facet li a.on{font-weight:700;color:var(--accent)}
.vikz-facet li a.on span{color:var(--accent)}
.vikz-facet .more{display:inline-block;margin-top:4px;font-size:var(--fs-s);color:var(--ink-3)}

/* frise chronologique */
.vikz-timeline{--y0:1945; /* @kind other */
--y1:2000; /* @kind other */
--lab:11rem;--row:26px;margin:var(--s4) 0 var(--s6);overflow-x:auto}
.vikz-timeline .tl-in{min-width:44rem}
.vikz-timeline .tl-axis,.vikz-timeline .tl-row{display:grid;grid-template-columns:var(--lab) 1fr;align-items:center}
.vikz-timeline .tl-axis{position:sticky;top:0;background:var(--paper);z-index:2;border-bottom:2px solid var(--ink);height:28px}
.vikz-timeline .tl-years{position:relative;height:100%}
.vikz-timeline .tl-years span{position:absolute;bottom:5px;transform:translateX(-50%);font:var(--fs-xs)/1 var(--f-mono);color:var(--ink-3)}
.vikz-timeline .tl-group{margin-top:var(--s3)}
.vikz-timeline .tl-group>.tl-row:first-child{height:auto;padding:var(--s2) 0 var(--s1)}
.vikz-timeline .tl-gname{grid-column:1/-1;font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink);cursor:pointer}
.vikz-timeline .tl-gname span{font-family:var(--f-mono);color:var(--ink-3);font-weight:400;margin-left:6px}
.vikz-timeline .tl-row{height:var(--row)}
.vikz-timeline .tl-lab{font:var(--fs-m)/1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:var(--s3)}
.vikz-timeline .tl-lab a{text-decoration:none}
.vikz-timeline .tl-track{position:relative;height:100%;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / ((var(--y1) - var(--y0)) / 10)));background-position:var(--gx,0) 0}
.vikz-timeline .tl-row:hover{background:var(--paper-2)}
.vikz-timeline .tl-bar{position:absolute;top:50%;height:10px;transform:translateY(-50%);background:var(--use,var(--ink-2));display:block;min-width:4px}
.vikz-timeline .tl-bar:hover{outline:2px solid var(--ink);outline-offset:1px}
.vikz-timeline .tl-bar.open{background:linear-gradient(90deg,var(--use) 70%,transparent)}
.vikz-timeline .tl-bar .y{position:absolute;left:calc(100% + 6px);top:-3px;font:var(--fs-xs)/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.vikz-timeline.is-mini{--row:20px;--lab:8.5rem}
.vikz-timeline.is-mini .tl-in{min-width:30rem}
.vikz-timeline.is-dense{--row:16px}
.vikz-timeline.is-dense .tl-lab{font-size:var(--fs-s)}
.vikz-timeline.is-dense .tl-bar{height:8px}
.vikz-timeline.is-dense .tl-bar .y{display:none}
.vikz-legend{display:flex;flex-wrap:wrap;gap:var(--s4);font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-2)}
.vikz-legend span{display:inline-flex;align-items:center;gap:6px}
.vikz-legend span::before{content:"";width:14px;height:8px;background:var(--use)}

/* détail d'image (detail.php) */
.vikz-detail>*{min-width:0}.vikz-detail dd{overflow-wrap:break-word}
.vikz-detail{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s7);align-items:start}
.vikz-detail .img{background:var(--paper-3)}
.vikz-detail .img .ph{aspect-ratio:3/2}
.vikz-detail .imgnav{display:flex;justify-content:space-between;margin-top:var(--s3);font:700 var(--fs-xs)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps)}
.vikz-detail .imgnav a{color:var(--ink-2);text-decoration:none}
.vikz-detail h1{font-size:var(--fs-2xl);margin:0 0 var(--s3)}
.vikz-detail .cap{font-size:var(--fs-base);margin:0 0 var(--s5)}
.vikz-detail dl{display:grid;grid-template-columns:7rem minmax(0,1fr);margin:0 0 var(--s5);border-top:2px solid var(--ink)}
.vikz-detail dt,.vikz-detail dd{padding:7px 0;border-bottom:1px solid var(--rule);margin:0}
.vikz-detail dt{font:700 var(--fs-xs)/1.6 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-3)}
.vikz-detail dd{font-size:var(--fs-m)}
.vikz-detail dd.mono{font:var(--fs-xs)/1.5 var(--f-mono);overflow-wrap:anywhere}
.vikz-detail h2{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--track-caps);margin:var(--s5) 0 var(--s3);padding-top:var(--s2);border-top:2px solid var(--ink)}
.vikz-detail .uses{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.vikz-detail .uses a{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s3);align-items:center;text-decoration:none;color:inherit}
.vikz-detail .uses .ph{aspect-ratio:3/2}
.vikz-detail .uses b{display:block;font:700 var(--fs-m)/1.2 var(--f-display)}
.vikz-detail .uses small{font:var(--fs-xs)/1.3 var(--f-mono);color:var(--ink-3)}
.vikz-detail .uses a:hover b{color:var(--accent)}
.vikz-detail .kw{display:flex;flex-wrap:wrap;gap:6px}
.vikz-detail .note{font:var(--fs-s)/1.45 var(--f-display);color:var(--ink-3)}

/* accueil */
.vikz-home h1{font-size:var(--fs-3xl);max-width:20ch;margin:0 0 var(--s3)}
.vikz-home .lede{font-size:var(--fs-l);line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0 0 var(--s6)}
.vikz-home .bigsearch{display:flex;max-width:42rem;border:2px solid var(--ink);margin:0 0 var(--s8)}
.vikz-home .bigsearch input{flex:1;min-width:0;border:0;background:var(--paper-2);padding:14px 16px;font:var(--fs-l) var(--f-text);color:var(--ink)}
.vikz-home .bigsearch button{border:0;background:var(--ink);color:var(--paper);padding:0 var(--s5);font:700 var(--fs-s)/1 var(--f-display);text-transform:uppercase;letter-spacing:var(--track-caps);cursor:pointer}
.vikz-home h2{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--track-caps);margin:0 0 var(--s4);padding-top:var(--s3);max-width:none}
.vikz-home section{margin:0 0 var(--s8)}
.vikz-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.vikz-uses a{display:flex;flex-direction:column;gap:6px;padding:var(--s4) 0 0;border-top:4px solid var(--use);text-decoration:none;color:var(--ink)}
.vikz-uses b{font:700 var(--fs-xl)/1 var(--f-display)}
.vikz-uses span{font:var(--fs-s)/1.4 var(--f-display);color:var(--ink-2)}
.vikz-uses i{font:normal var(--fs-s)/1 var(--f-mono);color:var(--ink-3)}
.vikz-uses a:hover b{color:var(--use)}
.vikz-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s7)}
.vikz-countries{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s5);font:var(--fs-m)/1.3 var(--f-display)}
.vikz-countries li{break-inside:avoid}
.vikz-countries a{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.vikz-countries a span{font:var(--fs-xs)/1.8 var(--f-mono);color:var(--ink-3)}
.vikz-decades{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);align-items:end;height:10rem}
.vikz-decades a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-decoration:none;color:var(--ink)}
.vikz-decades a i{display:block;background:var(--ink);height:var(--h)}
.vikz-decades a:hover i{background:var(--accent)}
.vikz-decades a b{font:700 var(--fs-m)/1 var(--f-display);margin-top:6px}
.vikz-decades a span{font:var(--fs-xs)/1.3 var(--f-mono);color:var(--ink-3)}

@media (max-width:800px){
.vikz-index{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.vikz-facets{display:none}
.vikz-detail{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.vikz-uses,.vikz-split{grid-template-columns:minmax(0,1fr)}
.vikz-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}
.vikz-home h1{font-size:var(--fs-2xl)}
}

/* détail d'image : pas de vignette dans la liste "Apparaît dans" */
.vikz-detail .uses a:not(:has(.ph)){grid-template-columns:minmax(0,1fr)}
.vikz-detail .img img{display:block;max-width:100%;height:auto;margin:0 auto}