/* La Gazette du Salon : le commun des trois mises en page (07/10/2026). Un fond bordeaux chaud, pas une boîte noire ;
   Playfair pour les titres, Inter pour les étiquettes, Great Vibes pour la plume (les dates du journal). */
:root {
  --gz-or: #e3b393; --gz-or-rgb: 227, 179, 147; --gz-creme: #f6d6bc; --gz-titre: #fbe7d4; --gz-texte: rgba(245, 234, 210, .78);
  --gz-vin: #7a1e2e; --gz-fond: #24090f;
  --gz-playfair: 'Playfair Display', Georgia, serif; --gz-inter: 'Inter', system-ui, -apple-system, sans-serif; --gz-plume: 'Great Vibes', 'Playfair Display', cursive;
}
body.page-gazette { margin: 0; color: #f5ead2;
  background: radial-gradient(ellipse 70% 40% at 12% 18%, rgba(176, 58, 72, .32), transparent 70%),
              radial-gradient(ellipse 60% 40% at 92% 55%, rgba(227, 179, 147, .12), transparent 70%),
              radial-gradient(ellipse 80% 40% at 30% 95%, rgba(150, 40, 60, .25), transparent 70%),
              linear-gradient(180deg, #2c0b13 0%, var(--gz-fond) 45%, #1a070b 100%); }
html:has(body.page-gazette) { background: #1a070b; }
.gz-page { box-sizing: border-box; overflow-x: clip; }
.gz-page a { color: inherit; }

/* les petites capitales d'or */
.gz-sur { margin: 0; font: 600 12px/1.2 var(--gz-inter); letter-spacing: .32em; text-transform: uppercase; color: var(--gz-or); }
.gz-rub { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 700 12px/1.2 var(--gz-inter); letter-spacing: .26em; text-transform: uppercase; color: var(--gz-or); }
.gz-rub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--gz-or-rgb), .5), transparent); }

/* les étiquettes : la pastille du Salon */
.gz-label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font: 700 10px/1.3 var(--gz-inter); letter-spacing: .16em; text-transform: uppercase;
  color: #fbe7d4; background: var(--gz-vin); box-shadow: inset 0 0 0 1px rgba(var(--gz-or-rgb), .35); white-space: nowrap; }
.gz-label svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gz-label--bugfix { background: #5a3a10; }
.gz-label--improvement, .gz-label--performance { background: #3b2a22; }
.gz-label--content { background: #22402f; }
.gz-label--courrier { background: rgba(var(--gz-or-rgb), .14); color: var(--gz-creme); }

/* le « + » qui ouvre, qui tourne en croix une fois ouvert */
.gz-plus { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%;
  background: rgba(var(--gz-or-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--gz-or-rgb), .5); color: var(--gz-creme); transition: background .2s; }
.gz-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .25s ease; }
.is-ouverte > button .gz-plus svg { transform: rotate(45deg); }
button:hover .gz-plus { background: rgba(var(--gz-or-rgb), .25); }

/* le bouton d'or, et « encore » en italique souligné */
.gz-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px; text-decoration: none;
  font: 600 15px/1 var(--gz-inter); color: #1c0609 !important; background: linear-gradient(180deg, #f2cfa9, var(--gz-or)); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); transition: filter .2s, transform .2s; }
.gz-bouton:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gz-bouton svg, .gz-encore svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gz-encore-p { margin: 18px 0 0; text-align: center; }
.gz-encore { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font: italic 500 18px/1 var(--gz-playfair); color: var(--gz-creme); text-decoration: underline; text-decoration-color: rgba(var(--gz-or-rgb), .45); text-underline-offset: 5px; }
.gz-encore:hover { color: #fff0dd; text-decoration-color: var(--gz-creme); }
.gz-encore svg { animation: gz-respire 2.6s ease-in-out infinite; }
@keyframes gz-respire { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(3px); opacity: 1; } }

/* le courrier d'avant, et le pied */
.gz-archives { max-width: 1120px; margin: 56px auto 0; padding: 0 16px; box-sizing: border-box; }
.gz-archives__liste { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 32px; }
.gz-archives__liste li { break-inside: avoid; display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(var(--gz-or-rgb), .12); font: 400 14px/1.45 var(--gz-inter); color: var(--gz-texte); }
.gz-archives__date { flex: none; width: 9.6em; white-space: nowrap; font: 600 11px/1.75 var(--gz-inter); letter-spacing: .06em; color: rgba(var(--gz-or-rgb), .85); }
.gz-pied { margin: 64px 0 0; padding: 48px 16px 64px; text-align: center;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(176, 58, 72, .35), transparent 70%); }
.gz-pied__mot { margin: 0 auto 20px; max-width: 30ch; font: italic 400 clamp(22px, 4vw, 30px)/1.3 var(--gz-playfair); color: var(--gz-creme); }
.gz-pied__jouer { display: inline-flex; align-items: center; min-height: 50px; padding: 0 30px; border-radius: 99px; text-decoration: none;
  font: 600 16px/1 var(--gz-inter); color: #1c0609 !important; background: linear-gradient(180deg, #f2cfa9, var(--gz-or)); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.gz-pied__jouer:hover { filter: brightness(1.06); }
.gz-noscript { text-align: center; font: italic 16px var(--gz-playfair); color: var(--gz-texte); }
.gz-page :focus-visible { outline: 2px solid var(--gz-creme); outline-offset: 3px; }

@media (min-width: 700px) { .gz-archives__liste { columns: 2; } }
@media (min-width: 1024px) { .gz-archives__liste { columns: 3; } .gz-archives { padding: 0 32px; } }
@media (prefers-reduced-motion: reduce) { .gz-encore svg { animation: none; } .gz-plus svg { transition: none; } }