/* Index Universel Noétique — charte graphique.
   Charte harmonisee ecosysteme Portemann : papier clair #f7f5ee, encre #2a2d36, or #a8842f
   (variables du theme hds-bibliotheque). Titres Cormorant Garamond, texte Inter. */

:root {
    --fond: #f7f5ee;
    --encre: #2a2d36;
    --terracotta: #a8842f;
    --vert: #8f6f28;
    --bordure: #e3dfd3;
    --carte: #ffffff;
    --muted: #6d685b;
    --radius: 10px;
    --ombre: 0 1px 3px rgba(42, 45, 54, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    line-height: 1.25;
    color: var(--encre);
}
h1 { font-size: 1.9rem; margin: 1.5rem 0 0.75rem; }
h2 { font-size: 1.35rem; margin: 1.75rem 0 0.6rem; border-bottom: 1px solid var(--bordure); padding-bottom: 0.3rem; }
h3 { font-size: 1.05rem; margin: 0.9rem 0 0.35rem; }

a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); font-size: 0.92em; }
.empty {
    color: var(--muted);
    font-style: italic;
    padding: 0.9rem 1rem;
    background: var(--carte);
    border: 1px dashed var(--bordure);
    border-radius: var(--radius);
}

/* ---------- En-tête et navigation ---------- */
.site-header {
    /* Nav collante (SPEC §6) : le sticky doit porter sur l'en-tête lui-même,
       pas sur .main-nav (enfant flex, sans effet au scroll). */
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre);
}
.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.site-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    color: var(--encre);
}
.site-title:hover { text-decoration: none; color: var(--terracotta); }

.main-nav {
    /* le sticky est porté par .site-header (cf. ci-dessus) */
}
.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    display: block;
    padding: 0.4rem 0.65rem;
    color: var(--encre);
    border-radius: 6px;
    font-size: 0.95rem;
}
.main-nav a:hover { background: var(--fond); text-decoration: none; }
.main-nav a.active {
    background: var(--terracotta);
    color: #fff;
}

/* ---------- Contenu principal ---------- */
main.wrap { padding-top: 0.5rem; padding-bottom: 3rem; }

.hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 0.5rem; }
.hero-sub { font-size: 1.1rem; color: var(--muted); margin: 0.2rem 0; }
.hero-devise {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--terracotta);
}

/* Compteurs */
.counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.counter {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    text-align: center;
    padding: 1rem 0.5rem;
}
.counter-value {
    display: block;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    color: var(--terracotta);
}
.counter-label { color: var(--muted); font-size: 0.9rem; }

/* Cartes et grilles */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin: 1rem 0;
}
.card {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    padding: 0.9rem 1.1rem;
}
.card h2, .card h3 { border-bottom: none; margin-top: 0; padding-bottom: 0; }
.howto { margin: 1.5rem 0; }
.howto ol { margin: 0.5rem 0 0.2rem; padding-left: 1.4rem; }
.howto li { margin-bottom: 0.35rem; }
.notice { border-left: 4px solid var(--terracotta); }

/* Listes de liens */
.link-list { padding-left: 1.2rem; }
.link-list li { margin-bottom: 0.4rem; }

/* ---------- Tableaux ---------- */
table.zebra {
    width: 100%;
    border-collapse: collapse;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--ombre);
    margin: 0.8rem 0;
    font-size: 0.95rem;
}
.zebra th, .zebra td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}
.zebra thead th {
    background: #f3ede4;
    font-family: Georgia, serif;
    font-weight: normal;
}
.zebra tbody tr:nth-child(even) { background: #f6f1ea; }
.zebra tbody tr:last-child td { border-bottom: none; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid var(--bordure);
    background: #f1ece4;
    color: var(--encre);
    white-space: nowrap;
}
.badge-verifiee, .badge-etabli, .badge-convergent, .badge-documente, .badge-basse {
    background: #e7ece1; border-color: #cfd8c4; color: #4c5f42;
}
.badge-partielle, .badge-modele, .badge-neutre, .badge-moyenne {
    background: #f0e6d6; border-color: #e0d0b6; color: #7a6238;
}
.badge-en_cours, .badge-a_harmoniser {
    background: #e2e6ea; border-color: #ccd3da; color: #4c5a68;
}
.badge-non_testee, .badge-historique, .badge-conjecture {
    background: #edeae6; border-color: #ddd6cf; color: #6f675e;
}
.badge-divergent, .badge-haute {
    background: #f0ded3; border-color: #e2c6b3; color: #8a5232;
}

.sigle { color: var(--terracotta); }

/* ---------- Filtres et formulaires ---------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 1rem;
    margin: 0.9rem 0;
    padding: 0.7rem 0.9rem;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
}
.filters label { font-size: 0.88rem; color: var(--muted); }
.filters select, .filters input[type="search"], .search-form input[type="search"] {
    display: block;
    margin-top: 0.15rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: var(--fond);
    color: var(--encre);
    font: inherit;
}
.filters a { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 6px; }
.filters a.active { background: var(--terracotta); color: #fff; }
.filters .reset { color: var(--muted); font-size: 0.88rem; }

button {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: var(--terracotta);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
button:hover { background: #9d5c3f; }

.search-form {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 1.4rem;
}
.search-form input[type="search"] {
    flex: 1;
    margin-top: 0;
    padding: 0.55rem 0.8rem;
    background: var(--carte);
}

/* ---------- Fiches ---------- */
dl.details {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    padding: 1rem 1.2rem;
    margin: 1rem 0;
}
dl.details dt {
    font-family: Georgia, serif;
    color: var(--terracotta);
    margin-top: 0.7rem;
}
dl.details dt:first-child { margin-top: 0; }
dl.details dd { margin: 0.15rem 0 0; }

.legend {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.92rem;
}

/* ---------- Pied de page ---------- */
.site-footer {
    border-top: 1px solid var(--bordure);
    background: var(--carte);
    padding: 1.4rem 0 2rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--muted);
}
.footer-credit { margin: 0 0 0.6rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.footer-links a { color: var(--vert); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .card-grid { grid-template-columns: 1fr; }
    .counters { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 1.8rem; }
    h1 { font-size: 1.5rem; }
    .main-nav ul { gap: 0; }
    .main-nav a { padding: 0.35rem 0.45rem; font-size: 0.88rem; }
    table.zebra { font-size: 0.85rem; display: block; overflow-x: auto; }
}

/* ---------- Méta-index / recherche globale ---------- */
.facet-filters { display: block; }
.facet-filters .facet-group { display: block; margin: 0.15rem 0; }
.facet-filters .facet-group label { display: inline-block; min-width: 4.5rem; }
.facet-filters a {
    display: inline-block;
    margin: 0.12rem 0.18rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--fond);
}
.facet-filters a.active { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.badge-source {
    background: #efe6d2;
    border-color: #ddcfa8;
    color: var(--vert);
}
.meta-results mark {
    background: #f3e5c0;
    color: inherit;
    padding: 0 0.12em;
    border-radius: 3px;
}
.meta-results .badge { margin-right: 0.25rem; }