: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;
}

/* Type/genre d'article (Décryptage, Entretien, Tribune..., 2026-08-18) —
   étiquette optionnelle, distincte de .eyebrow (rubrique). Contour plutôt
   que fond plein (2026-08-18, ajusté suite retour visuel) : un fond noir
   se confondait avec .featured-tag ("À la une", lui aussi plein) quand
   les deux se retrouvent l'un sous l'autre dans un item de liste — le
   contour marque une hiérarchie visuelle claire (featured = plein/urgent,
   type = discret/informatif) sans sortir de la palette N&B du skin.
   display:block + width:fit-content (pas inline-block) : force sa PROPRE
   ligne dans les items de liste où il précède .featured-tag/le titre —
   les deux sont sinon deux inline-block adjacents sans séparateur, mal
   alignés verticalement l'un contre l'autre (tailles/paddings différents). */
.article-type-tag {
    display: block;
    width: fit-content;
    background: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    font-weight: 700;
    font-size: .68em;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .1em .55em;
    margin: 0 0 .4em;
}

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

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    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;
}

/* ── Partage ──────────────────────────────────────────────────────── */

.share-wrap { position: relative; flex-shrink: 0; }
#share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    color: var(--black);
    cursor: pointer;
}
#share-btn:hover { background: #eee; }
#share-menu {
    position: absolute;
    top: calc(100% + .5em);
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .6em .7em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    font-style: normal;
    white-space: nowrap;
}
/* [hidden] seul (règle UA du navigateur) ne suffit pas : le display:flex
   ci-dessus, en CSS auteur, l'emporte toujours sur le display:none par
   défaut du navigateur pour un élément hidden, quelle que soit la
   spécificité — la popup restait donc visible en permanence sans cette
   règle explicite (bug trouvé après coup, "hidden" seul ne fonctionne
   jamais si le display est déjà fixé ailleurs dans le même sélecteur). */
#share-menu[hidden] { display: none; }
.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: .85em;
    font-weight: 700;
    text-decoration: none;
}
#share-menu #share-copy {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .45em .9em;
    border: 1px solid #ccc;
    border-radius: 2em;
    background: #fff;
    color: var(--black);
    font-family: system-ui, sans-serif;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
}
#share-menu #share-copy:hover { background: #f2f2f2; }

/* Légende de photo dans le corps d'article (titre en gras + credit en
   dessous, voir insertMediaIntoBody dashboard.js) — même gris que
   .meta pour la ligne credit, cohérent avec le reste des infos
   secondaires du gabarit. */
figcaption { margin-top: .5em; font-size: .95em; }
figcaption small { display: block; color: #555; font-size: .88em; margin-top: .2em; }

article :is(p, ul, ol) {
    line-height: 1.7;
    font-size: 1.08em;
}
/* .article-body (pas "article") : sans ce wrapper dédié, ce sélecteur
   ciblait "le 1er <p> DANS <article>", quel qu'il soit — .eyebrow puis
   .article-type-tag (2026-08-18) sont tous deux des <p> placés AVANT le
   corps, l'un des deux se retrouvait donc à tort en lettrine géante
   (et invisible sur fond noir plein pour .article-type-tag). Scopé au
   conteneur du corps, ne peut plus jamais matcher autre chose que le
   vrai premier paragraphe de prose. */
.article-body 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;
}

/* Item "à la une" (2026-08-19) — organisation différente du premier item
   de liste (colonne : grande image, grand titre) plutôt qu'un ajout
   d'étiquette sur la même ligne compacte — MÊME palette/typographie que
   le reste (var(--serif)/var(--black) déjà utilisés partout ailleurs sur
   ce site, "le style ne change pas", juste l'organisation de CET item).
   Reste un <li> normal dans la même <ul> (main li flex de base) — column
   remplace juste row pour celui-là. */
main li.hero-item {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 1.6em;
    margin-bottom: .6em;
    border-bottom: 2px solid var(--black);
}
main li.hero-item .hero-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #ddd;
    margin-bottom: .8em;
}
main li.hero-item .item-body { flex: none; }
main li.hero-item .hero-title {
    display: block;
    font-family: var(--serif);
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8em;
    line-height: 1.15;
    margin: .3em 0;
}
main li.hero-item .hero-title:hover { text-decoration: underline; }
main li.hero-item .excerpt { font-size: 1em; }
@media (max-width: 30em) {
    main li.hero-item .hero-title { font-size: 1.4em; }
}

/* Page "La Rédaction" (2026-08-19) — réutilise main li/.item-body déjà en
   place (liste d'articles) pour les fiches membres, juste une variante
   ronde de .thumb pour la photo de profil (portrait, pas un crop 140x90
   pensé pour une vignette d'article) + un libellé de groupe de rôle. */
main .team-role-label { margin: 1.6em 0 .2em; }
main .team-role-label:first-of-type { margin-top: 0; }
main li .team-photo {
    flex: none;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
}
main .team-name {
    display: block;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.15em;
}
main .team-bio {
    margin: .3em 0 0;
    color: #555;
    font-size: .92em;
    line-height: 1.4;
}
main .team-bio p:first-child { margin-top: 0; }
main .team-bio p:last-child { margin-bottom: 0; }

/* Sous-rubriques (hiérarchie à 2 niveaux, 2026-08-18) — barre d'onglets
   sous le H1 d'une page de rubrique. :empty masque toute la barre pour
   une rubrique sans parent ni enfant (aucune hiérarchie), plus simple
   qu'une clé de présence séparée côté gabarit. */
.category-tabs:empty { display: none; }
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin: -.5em 0 1.5em;
}
.category-tabs .cat-tab {
    display: inline-block;
    padding: .3em .9em;
    border: 1px solid var(--black);
    border-radius: 999px;
    color: var(--black);
    text-decoration: none;
    font-size: .85em;
}
.category-tabs .cat-tab.active {
    background: var(--black);
    color: #fff;
}

/* ── 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;
}

/* ── Contact ──────────────────────────────────────────────────────── */

.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 34em;
    margin: 1em 0 1.6em;
}
.contact-form label {
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #555;
    margin: 1em 0 .3em;
}
.contact-form label:first-child { margin-top: 0; }
.contact-form input:not(.hp-field), .contact-form select, .contact-form textarea {
    font-family: var(--serif);
    font-size: 1em;
    padding: .5em .7em;
    border: 1px solid #bbb;
    background: #fff;
    color: var(--black);
}
.contact-form textarea { resize: vertical; }
.contact-form button {
    align-self: flex-start;
    margin-top: 1.4em;
    font-family: var(--serif);
    font-weight: 700;
    background: var(--black);
    color: #fff;
    border: none;
    padding: .6em 1.4em;
    cursor: pointer;
}
.contact-form button:hover { background: #333; }
.contact-form button:disabled { background: #999; cursor: default; }
.contact-status {
    color: #555;
    font-size: .92em;
}

/* ── 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: flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    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; }
/* Chevron : pointe vers le haut replié (invite à "monter" le panneau),
   pivote à 180° une fois déplié (invite à refermer) — affordance de
   clic plus claire qu'un simple texte, demandé explicitement suite à
   "un caractère ^ de chaque côté pour montrer que l'on peut cliquer
   dessus". aria-expanded (déjà posé/mis à jour par js/footer.js) pilote
   directement la rotation, pas de classe JS dédiée nécessaire. */
footer#site-footer #footer-toggle svg {
    flex: none;
    transition: transform .15s ease;
}
footer#site-footer #footer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

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;
}
/* Liens de contenu (Qui sommes-nous/La Rédaction/Contact/Mentions
   légales) — réorganisés en rangée horizontale façon nav de footer
   classique (2026-08-19), plutôt qu'empilés un par un avec chacun son
   picto : plus ça grandissait (4 liens), plus la colonne verticale
   devenait longue/lourde. Séparateur "·" entre les liens (::after sur
   tous sauf le dernier) — pas besoin de gérer la marge du dernier élément
   à la main. */
footer#site-footer #footer-panel .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3em 0;
    margin: 0 0 1.1em;
}
footer#site-footer #footer-panel .footer-links a {
    color: #ccc;
    text-decoration: none;
    font-size: .85em;
    letter-spacing: .03em;
    padding: 0 .7em;
}
footer#site-footer #footer-panel .footer-links a:hover { color: #fff; }
footer#site-footer #footer-panel .footer-links a:not(:last-child) { border-right: 1px solid #444; }
/* Bouton d'action (S'abonner aux notifications) — reste picto+texte,
   distinct visuellement des liens de contenu ci-dessus (une action qui
   ouvre une modale, pas une page). */
footer#site-footer #footer-panel .team-link {
    /* display:flex rend la boîte block-level, mais un <button>/<input>
       garde son sizing intrinsèque "fit-content" même en flex (contrairement
       à un <div>) — le text-align:center du parent #footer-panel n'a donc
       aucune prise dessus (il ne centre que du contenu inline). margin
       gauche/droite:auto est la technique standard pour centrer une boîte
       block de largeur fit-content dans son conteneur — sans ça le bouton
       restait collé au bord gauche du panneau malgré justify-content:center
       (qui, lui, ne centre que l'icône+texte À L'INTÉRIEUR d'une boîte déjà
       à sa largeur de contenu, donc sans effet visible ici). */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    color: #ccc;
    text-decoration: none;
    font-size: .85em;
    letter-spacing: .03em;
    margin: 0 auto 1.1em;
}
footer#site-footer #footer-panel .team-link svg { flex: none; }
footer#site-footer #footer-panel .team-link:hover { color: #fff; }
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; }

/* ── Abonnement notifications (push-subscribe.js, 2026-08-19) ───────── */

/* Bouton de footer — même classe .team-link que La Rédaction/Qui sommes-
   nous/Mentions légales, mais c'est un <button> (pas un <a>, l'action
   ouvre une modale plutôt que de naviguer) : reset des styles natifs de
   bouton pour rester visuellement identique aux autres liens du footer. */
button.team-link {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

#push-modal {
    border: none;
    border-radius: .6em;
    padding: 1.4em 1.6em;
    box-sizing: border-box;
    width: 92vw;
    max-width: 30em;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    font-family: system-ui, sans-serif;
    color: var(--black);
}
#push-modal::backdrop { background: rgba(20, 20, 20, .5); }
#push-modal h3 {
    font-family: var(--serif);
    margin: 0 0 .5em;
    font-size: 1.2em;
}
#push-modal .push-hint {
    margin: 0 0 1em;
    font-size: .88em;
    color: #555;
    line-height: 1.4;
}
#push-categories { display: flex; flex-direction: column; gap: .8em; margin-bottom: 1em; }
.push-cat-row {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    padding-bottom: .8em;
    border-bottom: 1px solid #e2e2e2;
}
.push-cat-row:last-child { border-bottom: none; padding-bottom: 0; }
.push-cat-row input { margin-top: .25em; flex: none; }
.push-cat-name { font-weight: 700; display: block; }
.push-cat-desc { display: block; font-size: .85em; color: #666; margin-top: .15em; line-height: 1.35; }
.push-status { font-size: .88em; color: #555; margin: 0 0 .8em; }
#push-modal button {
    display: block;
    width: 100%;
    margin: 0 0 .5em;
    padding: .65em 1em;
    font-size: .92em;
    font-family: inherit;
    cursor: pointer;
    border-radius: .4em;
}
#push-save-btn { background: var(--black); color: #fff; border: 1px solid var(--black); }
#push-save-btn:hover { background: #2a2a2a; }
#push-unsub-btn, #push-cancel-btn { background: none; border: 1px solid #ccc; color: var(--black); }
#push-unsub-btn:hover, #push-cancel-btn:hover { border-color: #999; }
#push-modal button:last-child { margin-bottom: 0; }