* {
    box-sizing: border-box;
}

html {
    --jaune: #f9af00;
    --orange: #ee7219;
    font:
        14px/1.4 "Rubik",
        sans-serif;
}

/* Header */
body::before {
    content: url("/info/icons/logo.svg") "Fougeres Agglomeration";
    display: flex;
    background: linear-gradient(90deg, var(--orange) 0%, var(--jaune) 36%);
    color: white;
    padding: 1em;
    gap: 1em;
    font:
        normal 2.25em "Somatic",
        sans-serif;
}

h2 {
    font-size: 1.4em;
    margin: 0 0 1em;
    word-break: break-all;
    font-weight: lighter;
    opacity: 30%;
}

a {
    transition: color 0.2s;
}

/* unvisited link */
a:link,
a:visited {
    color: black;
}

/* mouse over link */
a:hover {
    color: var(--jaune);
}

/* selected link */
a:active {
    color: var(--orange);
}

/* Container card for list */
div.list {
    background: white;
    margin: 8px 12px;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid #e0e0e0;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    opacity: 70%;
}
thead th {
    text-align: left;
    font-weight: bolder;
    color: black;
    padding: 8px 6px;
    font-size: 1.4em;
    border-bottom: 1px solid #eee;
}
.n {
    min-width: 50%;
}
.m {
    width: 160px;
    min-width: 100px;
}
.t {
    max-width: 200px;
}

tbody td {
    padding: 10px 6px;
    vertical-align: middle;
    border-bottom: 1px dashed #f0f0f0;
}

/* Masque visuellement le texte original tout en le laissant dans le DOM */
td.m {
    visibility: hidden;
    position: relative;
}

/* Affiche la version française depuis l'attribut data-fr via le pseudo-élément ::after */
td.m::after {
    content: attr(data-fr);
    visibility: visible;
    padding: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

/* Alignement à droite pour la colonne taille */
.s {
    text-align: right;
}

/* Masquer en cas de dépassement */
td.t {
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
}

/* Icon cell: insert SVG before the filename link */
td.n a {
    display: inline-flex;
    align-items: center;
    color: var(--orange);
    text-decoration: none;
    gap: 10px;
}

/* Generic icon wrapper using ::before with data-type detection via sibling cell text */
td.n a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
}

/* Directory icon: check if corresponding .t cell equals "Directory" */
td.n a[href$="/"]::before {
    background-image: url("/info/icons/folder.svg");
}

td.n a[href$=".pdf"]::before {
    background-image: url("/info/icons/filetype-pdf.svg");
}

td.n a[href$=".png"]::before,
td.n a[href$=".jpg"]::before,
td.n a[href$=".jpeg"]::before,
td.n a[href$=".gif"]::before {
    background-image: url("/info/icons/file-earmark-image.svg");
}

td.n a[href$=".txt"]::before,
td.n a[href$=".md"]::before,
td.n a[href$=".json"]::before,
td.n a[href$=".xml"]::before {
    background-image: url("/info/icons/filetype-txt.svg");
}

/* Archive types */
td.n a[href$=".zip"]::before,
td.n a[href$=".tar"]::before,
td.n a[href$=".gz"]::before,
td.n a[href$=".7z"]::before {
    background-image: url("/info/icons/file-earmark-zip.svg");
}

/* Fallback generic file icon */
td.n a::before {
    /* only used if none of above matched by selector order */
    background-image: url("/info/icons/file-earmark.svg");
}
.foot {
    text-align: right;
    margin: 1em;
}
/* Small screens: stack cells */
@media (max-width: 650px) {
    thead,
    td.m,
    td.t,
    td.s[data-value="-1"] {
        display: none;
    }
}