@charset "UTF-8";
/* periode.css — page Période (complète accueil.css) */

/* Menu des siècles et décennies à gauche, blocs variés à droite */
.page { max-width: 1280px; }
.corps { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: start; }
.contenu { display: grid; gap: 34px; min-width: 0; }
.contenu > *, .duo > * { min-width: 0; }

/* Fil d'Ariane */
.ariane ol { list-style: none; margin: 0 0 -14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--texte-doux); }
.ariane li + li::before { content: "›"; margin-right: 6px; color: var(--marron); }
.ariane a { color: var(--texte-doux); }
.ariane a:hover { color: var(--creme); text-decoration: underline; }
.ariane [aria-current] { color: var(--texte); }

/* Menu des périodes */
.menu-per { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; display: grid; gap: 14px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--cuivre-plein) transparent; }
.menu-per div { display: grid; gap: 1px; }
.menu-per a { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.menu-per a:hover { background: var(--bloc); }
.menu-per a.siecle { display: block; font-family: Georgia, serif; font-size: 15px; color: var(--marron); padding: 0 8px 4px; border-bottom: 1px solid rgba(205,171,143,0.3); border-radius: 0; margin-bottom: 2px; }
.menu-per a.siecle:hover { background: none; color: var(--creme); }
.menu-per a.actif { background: var(--cuivre); color: var(--creme); font-weight: 600; }
.menu-per .n { font-size: 12px; color: var(--texte-doux); }
.menu-per a.actif .n { color: var(--creme); }

/* Pastille cuivre : nombre de commémoratives (vide = rien) */
.c { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--marron); border-radius: 8px; padding: 0 5px; min-width: 18px; text-align: center; }
.c:empty { background: none; }
.tete-per .sous .c { font-size: 14px; padding: 1px 8px; }

/* En-tête : les années en très grand */
.tete-per { display: grid; gap: 10px; }
.tete-per .annees { margin: 0; font-size: clamp(48px, 7vw, 84px); font-weight: 900; line-height: .95; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 2px var(--marron); }
.tete-per .annees span { color: var(--creme); -webkit-text-stroke: 0; }
.tete-per .sous { font-size: 17px; color: var(--texte-doux); }
.tete-per .sous b { color: var(--texte); }
.autour { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.autour a { color: var(--vert-lien); }

/* Année par année : bande de cases */
.annees-bande { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.annees-bande a { display: grid; gap: 4px; justify-items: center; padding: 12px 4px; border-radius: 8px; background: rgba(198,146,115, var(--a)); font-variant-numeric: tabular-nums; }
.annees-bande a:hover { outline: 2px solid var(--marron); }
.annees-bande a.vide { pointer-events: none; }
.annees-bande b { font-size: 22px; color: var(--creme); min-height: 1.15em; }
.annees-bande span { font-size: 12px; color: var(--texte); }
.annees-bande a.vide span { color: var(--texte-doux); }

/* Commémoratives : chronique en carrousel de 5 ans */
.carrousel h2 { align-items: center; }
.fleches { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; color: var(--marron); font-variant-numeric: tabular-nums; }
.fleches button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cuivre-plein); background: var(--bloc); color: var(--creme); font-size: 20px; line-height: 1; cursor: pointer; }
.fleches button:hover:not(:disabled) { background: var(--cuivre); }
.fleches button:disabled { opacity: .3; cursor: default; }
.chronique { list-style: none; margin: 0; padding: 0; display: grid; }
.chronique li { display: grid; grid-template-columns: 70px 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.chronique li:last-child { border-bottom: 0; }
.chronique .an { font-family: Georgia, serif; font-size: 24px; color: var(--marron); text-align: right; }
.chronique img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.chronique .evt { display: grid; gap: 2px; min-width: 0; }
.chronique .evt em { font-family: Georgia, serif; font-size: 17px; color: var(--creme); }
.chronique .evt a { font-size: 14px; color: var(--texte-doux); }
.chronique .evt a:hover { color: var(--texte); }
.chronique .evt img.dr { width: 18px; height: auto; box-shadow: none; border-radius: 2px; vertical-align: -2px; margin-right: 6px; }

/* Émetteurs : pastilles drapeau */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 20px; background: var(--bloc); font-size: 14px; }
.pastilles a:hover { background: var(--bloc-fort); }
.pastilles img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pastilles b { font-weight: 700; color: var(--marron); font-variant-numeric: tabular-nums; }

/* Métaux : anneau */
.anneau { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; }
.anneau svg { width: 170px; height: 170px; }
.anneau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.anneau li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.anneau li i { width: 14px; height: 14px; border-radius: 50%; background: var(--m); }
.anneau li b { margin-left: auto; color: var(--texte-doux); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Toutes les pièces, par année */
.par-annee { display: grid; gap: 22px; }
.par-annee .groupe { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; }
.par-annee h3 { margin: 0; font-family: Georgia, serif; font-size: 26px; color: var(--marron); font-weight: 400; position: sticky; top: 76px; align-self: start; scroll-margin-top: 80px; }
.petites { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.petites a { display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; font-size: 12px; line-height: 1.3; padding: 6px; border-radius: 8px; }
.petites a:hover { background: var(--bloc); }
.petites img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.petites a.com img { box-shadow: 0 0 0 3px var(--cuivre-plein), 0 2px 8px rgba(0,0,0,0.35); }
#pieces { scroll-margin-top: 70px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.pagination a { min-width: 34px; text-align: center; padding: 5px 8px; border-radius: 6px; background: var(--bloc); font-size: 14px; }
.pagination a.actif { background: var(--cuivre); }

/* Vue d'ensemble : une carte par décennie */
.siecle-bloc { scroll-margin-top: 80px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cartes a { position: relative; display: grid; gap: 2px; padding: 14px 12px; border-radius: var(--rayon); background: rgba(198,146,115, var(--a)); font-variant-numeric: tabular-nums; }
.cartes a:hover { outline: 2px solid var(--marron); }
.cartes b { font-family: Georgia, serif; font-size: 26px; font-weight: 400; color: var(--creme); }
.cartes span { font-size: 13px; }
.cartes .c { position: absolute; top: 10px; right: 10px; }

@media (max-width: 900px) {
  .corps { grid-template-columns: minmax(0, 1fr); }
  .menu-per { position: static; max-height: 240px; }
  .annees-bande { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .anneau { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 520px) {
  .chronique li { grid-template-columns: 48px minmax(0, 1fr); }
  .chronique li > img { display: none; }
  .chronique .an { font-size: 20px; }
  .par-annee .groupe { grid-template-columns: 1fr; gap: 8px; }
  .par-annee h3 { position: static; }
}
.fleches[hidden] { display: none; }