/* ── Archives des actualités — Bootstrap 5 ──
   Trois pages partagent cette feuille :
     • archives/index-bs5.php  (toutes les années)  — .arc-nav, .arc-dec, .arc-year, .arc-months
     • archives/annee-bs5.php  (une année)          — .arc-mogrid, .arc-mocard
     • archives/mois-bs5.php   (un mois)            — .arc-tl, .arc-day, .arc-pub, .arc-mostats
   Communs : .arc-strip (sélecteur d'années), .arc-yn (précédent/suivant),
             .arc-h2, .arc-sec.
   Adapté des maquettes styles/tailwind/Randozone-Archives{,-2026,-Juillet-2026}-Tailwind.html.
   Variables : rz-bs5.css (--rz-ink, --rz-inksoft, --rz-blue, --rz-primary,
               --rz-border, --rz-surface, --rz-page, --rz-mono).
   Shared    : .eyebrow, .sb-card, .rz-more, .rz-ico (rz-bs5.css) ;
               hero2.css pour .rz-hero-topo.
   Préfixe .arc-* : évite les collisions avec les utilitaires Bootstrap 5
   (notamment .badge, réservé au core BS5). */

/* ═══ Hero (hero2.css) — puces de saut cliquables ═══ */
.rz-hero-topo a.hv-chip { text-decoration: none; transition: border-color .15s, color .15s }
.rz-hero-topo a.hv-chip:hover { border-color: var(--rz-blue); color: var(--rz-primary) }

/* ═══ Barre d'années collante ═══ */
.arc-nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--rz-page) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: .65rem 0;
  border-bottom: 1px solid var(--rz-border);
  margin-bottom: 1.4rem;
}
/* Sélecteur d'années — commun aux deux pages ; le <span> est l'année courante,
   non cliquable (page annee-bs5.php). */
.arc-strip { display: flex; flex-wrap: wrap; gap: .3rem }
.arc-strip a, .arc-strip span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 .55rem; border-radius: 8px;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  font-family: var(--rz-mono); font-size: .72rem; font-weight: 600;
  color: var(--rz-inksoft); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.arc-strip a:hover { border-color: var(--rz-blue); color: var(--rz-blue) }
.arc-strip .now { background: var(--rz-blue); border-color: var(--rz-blue); color: #fff }

/* ═══ En-tête de décennie ═══ */
.arc-dec {
  display: flex; align-items: baseline; gap: .9rem;
  margin: 2.6rem 0 1rem; scroll-margin-top: 64px;
}
.arc-dec:first-child { margin-top: 0 }
.arc-dec h2 {
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.55rem; letter-spacing: -.02em; color: var(--rz-ink);
  margin: 0; white-space: nowrap;
}
.arc-dec .rule { flex: 1; height: 1px; background: var(--rz-border) }
.arc-dec .n { font-family: var(--rz-mono); font-size: .7rem; color: var(--rz-inksoft); white-space: nowrap }

/* ═══ Carte d'une année ═══ */
.arc-year {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: start;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  border-radius: 16px; padding: 1.05rem 1.15rem; scroll-margin-top: 64px;
  transition: border-color .16s, box-shadow .18s;
}
.arc-year + .arc-year { margin-top: .65rem }
.arc-year:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 45%, white);
  box-shadow: 0 16px 36px -28px rgba(20, 40, 80, .55);
}
.arc-year .y a.num {
  display: block; font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.85rem; letter-spacing: -.02em; line-height: 1;
  color: var(--rz-ink); text-decoration: none;
}
.arc-year .y a.num:hover { color: var(--rz-blue) }
.arc-year .y .all {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rz-primary); text-decoration: none; margin-top: .5rem;
}
.arc-year .y .all:hover { color: var(--rz-blue) }
.arc-year .y .all .rz-ico { width: .85rem; height: .85rem; transition: transform .16s }
.arc-year .y .all:hover .rz-ico { transform: translateX(2px) }
.arc-year .y .arc-tag {
  display: inline-block; font-family: var(--rz-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rz-primary);
  background: var(--rz-primary-bg); border: 1px solid var(--rz-primary-line);
  border-radius: 6px; padding: .14rem .4rem; margin-top: .5rem;
}

/* ═══ Grille des mois ═══ */
.arc-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem }
@media (min-width: 560px)  { .arc-months { grid-template-columns: repeat(4, 1fr) } }
@media (min-width: 1100px) { .arc-months { grid-template-columns: repeat(6, 1fr) } }

.arc-mo {
  display: flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 9px; border: 1px solid var(--rz-border);
  background: var(--rz-page); font-size: .78rem; font-weight: 600;
  color: var(--rz-inksoft); text-decoration: none;
  transition: border-color .14s, color .14s, background .14s;
}
a.arc-mo:hover { border-color: var(--rz-blue); color: var(--rz-primary); background: var(--rz-surface) }
.arc-mo.off { opacity: .35; border-style: dashed; background: transparent }

@media (max-width: 559px) {
  .arc-year { grid-template-columns: 1fr }
  .arc-year .y { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem }
  .arc-year .y .all, .arc-year .y .arc-tag { margin-top: 0 }
}

/* ═══════════════════════════════════════════════════════════════════
   Page d'une année (annee-bs5.php)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Grille des 12 mois ═══ */
.arc-mogrid { display: grid; grid-template-columns: 1fr; gap: .75rem }
@media (min-width: 576px)  { .arc-mogrid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1200px) { .arc-mogrid { grid-template-columns: repeat(3, 1fr) } }

.arc-mocard {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  border-radius: 16px; padding: 1.1rem 1.2rem; text-decoration: none;
  transition: border-color .16s, box-shadow .18s, transform .18s;
}
a.arc-mocard:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 55%, white);
  box-shadow: 0 16px 36px -26px rgba(20, 40, 80, .6); transform: translateY(-2px);
}
.arc-mocard .num {
  font-family: var(--rz-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; color: var(--rz-inksoft);
}
.arc-mocard .nm {
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.015em; line-height: 1.1; color: var(--rz-ink);
}
a.arc-mocard:hover .nm { color: var(--rz-blue) }
.arc-mocard .go {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rz-primary); margin-top: .55rem;
}
.arc-mocard .go .rz-ico { width: .9rem; height: .9rem; transition: transform .16s }
a.arc-mocard:hover .go .rz-ico { transform: translateX(3px) }
.arc-mocard.off { border-style: dashed; background: transparent }
.arc-mocard.off .nm { color: var(--rz-inksoft); opacity: .55 }
.arc-mocard.off .num { opacity: .55 }
.arc-mocard.off .go { color: var(--rz-inksoft); opacity: .65 }

/* ═══ Année précédente / suivante ═══ */
.arc-yngrid { display: grid; grid-template-columns: 1fr; gap: .75rem }
@media (min-width: 576px) { .arc-yngrid { grid-template-columns: repeat(2, 1fr) } }

.arc-yn {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  border-radius: 16px; padding: 1rem 1.15rem; text-decoration: none;
  transition: border-color .16s, box-shadow .18s, transform .16s;
}
a.arc-yn:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 55%, white);
  box-shadow: 0 16px 32px -24px rgba(20, 40, 80, .6); transform: translateY(-2px);
}
.arc-yn .rz-ico { width: 1.15rem; height: 1.15rem; color: var(--rz-blue); flex-shrink: 0 }
.arc-yn .k {
  display: block; font-family: var(--rz-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rz-inksoft);
}
.arc-yn .v {
  display: block; font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.15rem; letter-spacing: -.01em; color: var(--rz-ink); line-height: 1.15;
}
a.arc-yn:hover .v { color: var(--rz-blue) }
.arc-yn.next { justify-content: flex-end; text-align: right }
.arc-yn.off { border-style: dashed; background: transparent }
.arc-yn.off .rz-ico, .arc-yn.off .v { color: var(--rz-inksoft); opacity: .55 }

/* ═══════════════════════════════════════════════════════════════════
   Page d'un mois (mois-bs5.php) — timeline jour par jour
   ═══════════════════════════════════════════════════════════════════ */

.arc-tl { display: flex; flex-direction: column; gap: 1rem }

.arc-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem }
.arc-day .d { position: relative; text-align: right; padding-right: 1.35rem }
.arc-day .d::before {
  content: ''; position: absolute; right: 0; top: .45rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--rz-surface); border: 2.5px solid var(--rz-blue);
}
.arc-day .d::after {
  content: ''; position: absolute; right: 4px; top: 1.35rem; bottom: -1.2rem;
  width: 2px; background: var(--rz-border);
}
.arc-day:last-child .d::after { display: none }
.arc-day .dd {
  display: block; font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.45rem; letter-spacing: -.01em; line-height: 1; color: var(--rz-ink);
}
.arc-day .dm {
  display: block; font-family: var(--rz-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--rz-inksoft); margin-top: .3rem;
}

.arc-pubs { display: flex; flex-direction: column; gap: .45rem }
.arc-pub {
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  border-radius: 13px; padding: .62rem .8rem; text-decoration: none;
  transition: border-color .15s, box-shadow .18s, transform .16s;
}
.arc-pub:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 55%, white);
  box-shadow: 0 12px 28px -20px rgba(20, 40, 80, .55); transform: translateX(2px);
}
/* Pastille pleine + icône blanche, une couleur par type de publication
   (--arc-c, posée par les classes .arc-t-* ci-dessous). Même traitement que
   le palmarès /plus.php. Sans classe de type : bleu de marque. */
.arc-pub .ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; background: var(--arc-c, var(--rz-primary));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); flex-shrink: 0;
}
.arc-pub .ic .rz-ico { width: 1.05rem; height: 1.05rem }
.arc-pub .bd { min-width: 0 }
.arc-pub .ty {
  display: block; font-family: var(--rz-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rz-inksoft);
}
.arc-pub .tt { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--rz-ink) }
.arc-pub:hover .tt { color: var(--rz-blue) }

/* Repli défensif : un jour dont le `content` ne suit pas le format
   « <li>Type : <a…>Titre</a></li> » est rendu tel quel. */
.arc-raw { border: 1px solid var(--rz-border); background: var(--rz-surface); border-radius: 13px; padding: .62rem 1rem }
.arc-raw ul { margin: 0; padding-left: 1.1rem }
.arc-raw li { font-size: .9rem; line-height: 1.5; color: var(--rz-ink) }

@media (max-width: 639px) {
  .arc-day { grid-template-columns: 1fr; gap: .5rem }
  .arc-day .d { text-align: left; padding-right: 0; display: flex; align-items: baseline; gap: .55rem }
  .arc-day .d::before, .arc-day .d::after { display: none }
  .arc-day .dm { margin-top: 0 }
}

/* ═══ Couleurs par type de publication ═══
   Une seule déclaration par type : --arc-c alimente à la fois la pastille de
   la timeline et la puce de la sidebar. Toutes assez sombres pour porter du
   blanc. Les valeurs communes avec /plus.php sont reprises telles quelles. */
.arc-t-photo      { --arc-c: #1f8aa6 }  /* cyan       — de loin le type dominant */
.arc-t-materiel   { --arc-c: #7c4fcf }  /* violet     */
.arc-t-gps        { --arc-c: #1a6ab0 }  /* bleu marque */
.arc-t-activite   { --arc-c: #14946a }  /* vert       */
.arc-t-livre      { --arc-c: #b57a13 }  /* or — assombri depuis le #c98a16 de
                                           plus.css : 2,95:1 en blanc, sous le
                                           seuil de 3:1 (WCAG 1.4.11). 3,65:1 ici. */
.arc-t-topo       { --arc-c: #4a6b57 }  /* vert forêt */
.arc-t-itineraire { --arc-c: #b0683a }  /* terre cuite — accent Randozone */
.arc-t-adresse    { --arc-c: #a3402c }  /* brique     */
.arc-t-actu       { --arc-c: #8a5a14 }  /* ambre      */
.arc-t-pays       { --arc-c: #1f5d3c }  /* vert foncé */
.arc-t-article    { --arc-c: #3c3228 }  /* encre      */
.arc-t-page       { --arc-c: #6d5e4a }  /* neutre — type générique */

/* ═══ Sidebar « Ce mois en bref » ═══ */
.arc-mostats { display: flex; flex-direction: column; gap: .15rem; padding: .35rem .55rem .6rem }
.arc-mostats .r { display: flex; align-items: center; gap: .6rem; padding: .42rem .5rem; border-radius: 9px }
.arc-mostats .r .ic {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  color: #fff; background: var(--arc-c, var(--rz-primary)); flex-shrink: 0;
}
.arc-mostats .r .rz-ico { width: .8rem; height: .8rem }
.arc-mostats .r .l { font-size: .82rem; font-weight: 600; color: var(--rz-ink) }
.arc-mostats .r .n { margin-left: auto; font-family: var(--rz-mono); font-size: .72rem; font-weight: 600; color: var(--rz-primary) }

/* ═══ Titre de section (repris de la maquette : eyebrow + h2) ═══ */
.arc-h2 {
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600;
  font-size: 1.9rem; letter-spacing: -.02em; color: var(--rz-ink);
  margin: .35rem 0 1.25rem;
}
.arc-sec { margin-top: 3.5rem }