:root {
    --black: #141414;
    --bg: #f6f6f6;
    --serif: Georgia, 'Times New Roman', Times, serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--black);
}

/* ── Masthead ─────────────────────────────────────────────────────── */
/* Sobre, type presse de référence : noir/blanc/gris, aucune couleur —
   une identité rouge+bleu lisait "drapeau"/politique, pas le message
   voulu (presse indépendante, ni gauche ni droite). */

header.masthead {
    background: var(--black);
    color: #fff;
    padding: .7em 1.2em .9em;
    border-bottom: 2px solid #333;
    position: sticky;
    top: 0;
    z-index: 50;
}

.masthead-top {
    max-width: 60em;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .72em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    padding-bottom: .5em;
    border-bottom: 1px solid #333;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8em;
    max-width: 60em;
    margin: .7em auto 0;
    text-decoration: none;
}

.brand img { flex: none; }

.brand .word {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 2em;
    line-height: 1;
    color: #fff;
}

header.masthead.home .brand img { width: 60px; height: 70px; }
header.masthead.home .brand .word { font-size: 3em; }

.tagline {
    text-align: center;
    max-width: 60em;
    margin: .35em auto 0;
    font-family: var(--serif);
    font-style: italic;
    color: #999;
    font-size: .85em;
    letter-spacing: .02em;
}
header.masthead.home .tagline { font-size: 1.05em; color: #aaa; }

/* Mobile étroit : "LE RUGISSEUR" à la taille desktop dépasse la largeur
   de l'écran et casse sur l'espace ("LE" seul puis "RUGISSEUR" dessous),
   ce qui gonfle inutilement la hauteur du masthead. */
@media (max-width: 26em) {
    .brand { gap: .5em; }
    .brand .word { font-size: 1.3em; }
    .brand img { width: 30px; height: 35px; }
    header.masthead.home .brand .word { font-size: 1.7em; }
    header.masthead.home .brand img { width: 40px; height: 47px; }
}

nav.sections {
    max-width: 60em;
    margin: .8em auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: .78em;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 600;
}

nav.sections a {
    color: #ccc;
    text-decoration: none;
    padding: .3em .7em;
    border-left: 1px solid #444;
}
nav.sections a:first-child { border-left: none; }
nav.sections a:hover { color: #fff; text-decoration: underline; }
nav.sections a.search-link { display: inline-flex; align-items: center; color: #ccc; }
nav.sections a.search-link svg { display: block; }
nav.sections a.search-link:hover { color: #fff; text-decoration: none; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────── */

nav.crumb {
    max-width: 60em;
    margin: 1.2em auto 0;
    padding: 0 1.2em;
    font-size: .82em;
    color: #888;
}
nav.crumb a { color: var(--black); text-decoration: underline; font-weight: 600; }

/* ── Article ──────────────────────────────────────────────────────── */

article {
    max-width: 60em;
    margin: 1em auto 3em;
    padding: 0 1.2em;
}

.eyebrow {
    display: inline-block;
    color: var(--black);
    font-weight: 700;
    font-size: .78em;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .4em;
}

article h1 {
    font-family: var(--serif);
    font-size: 2.3em;
    line-height: 1.12;
    margin: 0 0 .3em;
    font-weight: 700;
}

.meta {
    font-family: var(--serif);
    font-style: italic;
    color: #555;
    font-size: .92em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: .6em 0;
    margin-bottom: 1.6em;
}

article :is(p, ul, ol) {
    line-height: 1.7;
    font-size: 1.08em;
}
article p:first-of-type::first-letter {
    font-family: var(--serif);
    float: left;
    font-size: 3.4em;
    line-height: .8;
    padding: .05em .08em 0 0;
    color: var(--black);
    font-weight: 700;
}
article img { max-width: 100%; height: auto; }

/* ── Rubrique / home ──────────────────────────────────────────────── */

main {
    max-width: 60em;
    margin: 1.4em auto 3em;
    padding: 0 1.2em;
}

main h1 {
    font-family: var(--serif);
    font-size: 1.8em;
    font-weight: 700;
    border-bottom: 2px solid var(--black);
    padding-bottom: .4em;
}

main ul { list-style: none; margin: 0; padding: 0; }
main li {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    padding: 1.1em 0;
    border-bottom: 1px solid #ddd;
}
main li .thumb {
    flex: none;
    width: 140px;
    height: 90px;
    object-fit: cover;
    background: #ddd;
}
main li .item-body { flex: 1; min-width: 0; }
main li a {
    font-family: var(--serif);
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25em;
}
main li a:hover { text-decoration: underline; }
main .excerpt {
    margin: .3em 0 0;
    color: #555;
    font-size: .92em;
    line-height: 1.4;
}
@media (max-width: 30em) {
    main li { flex-direction: column; }
    main li .thumb { width: 100%; height: 160px; }
}
main .item-meta {
    color: #888;
    font-size: .8em;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .2em;
}
main .featured-tag {
    display: inline-block;
    background: var(--black);
    color: #fff;
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .1em .5em;
    margin-right: .5em;
    vertical-align: middle;
}

/* ── Recherche ────────────────────────────────────────────────────── */

.search-form {
    display: flex;
    gap: .6em;
    margin: 1em 0 1.6em;
}
.search-form input[type="text"]:not(.hp-field) {
    flex: 1;
    font-size: 1em;
    padding: .5em .7em;
    border: 1px solid #bbb;
    font-family: var(--serif);
}
.search-form button {
    font-family: var(--serif);
    font-weight: 700;
    background: var(--black);
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    cursor: pointer;
}
.search-form button:hover { background: #333; }
/* Honeypot — hors écran plutôt que display:none (que certains bots
   savent détecter et éviter), invisible/inatteignable pour un humain. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.search-status {
    color: #888;
    font-size: .9em;
}

/* ── Pied de page ─────────────────────────────────────────────────────
   Barre fixe fine, dépliable au clic — sur une page en scroll infini
   (home.html), un footer "normal" en fin de flux ne devient atteignable
   qu'une fois tous les articles chargés. Toujours visible, replié par
   défaut ; le clic révèle la tagline + un raccourci "haut de page".
   Logique dans js/footer.js, chargé sur tous les gabarits. ── */

body { padding-bottom: 2.6em; }

footer#site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--black);
    color: #ccc;
}

footer#site-footer #footer-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid #333;
    color: #ccc;
    font-family: inherit;
    font-size: .8em;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .6em 1em;
    cursor: pointer;
    text-align: center;
}
footer#site-footer #footer-toggle:hover { color: #fff; }

footer#site-footer #footer-panel {
    padding: 1em;
    text-align: center;
    border-top: 1px solid #333;
}
footer#site-footer #footer-panel .tagline {
    color: #aaa;
    font-size: .95em;
    margin: 0 0 .7em;
}
footer#site-footer #footer-top {
    background: none;
    border: 1px solid #555;
    color: #ccc;
    padding: .35em .9em;
    font-size: .85em;
    font-family: inherit;
    cursor: pointer;
}
footer#site-footer #footer-top:hover { color: #fff; border-color: #888; }

/* ── Bouton d'installation PWA ────────────────────────────────────────
   Flottant, au-dessus de la barre de pied de page fixe — n'existe dans
   le DOM que si le navigateur déclenche beforeinstallprompt (js/pwa.js). */
#pwa-install-btn {
    position: fixed;
    right: 1em;
    bottom: 3.4em;
    z-index: 61;
    background: var(--black);
    color: #fff;
    border: 1px solid #444;
    border-radius: 2em;
    padding: .55em 1.1em;
    font-size: .82em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
#pwa-install-btn:hover { background: #2a2a2a; }
/* Le bouton flotte juste au-dessus du footer — quand celui-ci est
   déplié, le panneau le recouvrirait sinon (js/footer.js pose la
   classe). */
body.footer-expanded #pwa-install-btn { display: none; }