/* Charte de journaldunarchiviste.fr : fond crème, texte #2A2825, accent terre cuite, Fraunces + Public Sans. */
@font-face { font-family: Fraunces; src: url(fonts/Fraunces.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(fonts/PublicSans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root { color-scheme: light; --fond: #F7F4EC; --carte: #fff; --texte: #2A2825; --discret: #6B645A; --accent: #B1552E; --bord: #E4DFD3; --champ: #D6D0C2; }

body { margin: 0; font: 1rem/1.6 "Public Sans", sans-serif; background: var(--fond); color: var(--texte); }
h1, h2, h3, .marque { font-family: Fraunces, serif; font-weight: 500; }
h1 { margin: 1.5rem 0 .25rem; }
a { color: var(--texte); }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.site-header { border-bottom: 1px solid var(--bord); }
.site-footer { border-top: 1px solid var(--bord); color: var(--discret); margin-top: 3rem; }
.cadre, main { max-width: 56rem; margin-inline: auto; padding: 1rem; }
.marque { font-size: 1.5rem; text-decoration: none; }
.chapeau { color: var(--discret); margin: 0; }

section { border-top: 1px solid var(--bord); padding-block: 1rem; margin-block: 1.5rem; }
label { font-weight: 500; }
input[type=file] { display: block; margin-top: .5rem; max-width: 100%; }
input[type=search] { font: inherit; display: block; width: 100%; box-sizing: border-box; margin-top: .25rem; padding: .5rem; border: 1px solid var(--champ); border-radius: 4px; background: var(--carte); color: var(--texte); }
button, select { font: inherit; padding: .4rem .8rem; border: 1px solid var(--accent); border-radius: 4px; background: transparent; color: var(--texte); }
button { cursor: pointer; }
button:hover { background: var(--accent); color: #fff; }
#filtres button[aria-pressed=true], .resultats button { background: var(--accent); color: #fff; }
select { border-color: var(--champ); background: var(--carte); }

#filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
#filtres[hidden], .tuiles li[hidden] { display: none; }
.tuiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.tuile { display: flex; gap: .75rem; align-items: center; height: 100%; box-sizing: border-box; padding: 1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; text-decoration: none; }
.tuile:hover { border-color: var(--accent); }
.tuile strong { font-family: Fraunces, serif; font-weight: 500; font-size: 1.1rem; }
.tuile .icone { font-size: 2rem; }

.resultats { list-style: none; padding: 0; }
.resultats li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--bord); }
.resultats .nom { flex: 1 1 14rem; overflow-wrap: anywhere; }
.etat { flex: 1 1 100%; }
.etat.erreur { font-weight: 600; }
.erreur { color: #B00020; }
.version { text-align: right; font-size: .875rem; margin: 0; }