/*
 * pages.css — Styles spécifiques aux pages publiques
 * Généré automatiquement depuis les styles inline des pages PHP
 * Ce fichier est théméisable : les variables CSS (--p0, --e0, etc.) sont définies dans style.css
 */


/* ══ a-identifier.php ══ */
/* ── GRILLE (pas de carousel, affichage plein) ── */
.identifier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

/* ── BANNIÈRE D'APPEL ── */
.identifier-banner {
  background: var(--p1);
  border: 1px solid var(--p3);
  padding: 22px 28px;
  margin-bottom: 36px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.identifier-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--b) 0 25%, var(--r) 25% 50%, var(--v) 50% 75%, var(--e2) 75% 100%);
}
.identifier-banner-text h2 {
  font-family: var(--fd); font-size: 1rem; letter-spacing: 0.1em;
  color: var(--e0); margin-bottom: 6px;
}
.identifier-banner-text p {
  font-family: var(--fc); font-style: italic; font-size: 0.9rem;
  color: var(--e3); line-height: 1.65; font-weight: 300;
}
.identifier-banner-btn {
  display: inline-block; padding: 10px 20px;
  background: var(--e0); color: var(--p1);
  border: 1px solid var(--e0); font-family: var(--fd);
  font-size: 0.72rem; letter-spacing: 0.12em;
  text-decoration: none; white-space: nowrap;
  transition: all 0.2s; flex-shrink: 0;
}
.identifier-banner-btn:hover { background: var(--r); border-color: var(--r); }

/* ── BADGE 🤔 sur la card ── */
.badge-identifier {
  position: absolute; top: 8px; right: 8px;
  font-size: 1.1rem; line-height: 1; z-index: 2;
}

@media(max-width: 600px) {
  .identifier-banner { grid-template-columns: 1fr; }
  .identifier-banner-btn { text-align: center; }
}


/* ══ echange.php ══ */
.echange-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.echange-card {
  background: var(--p0);
  border: 1px solid var(--p3);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.echange-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(100,70,20,0.12);
}
.echange-card.reserve { opacity: 0.75; }

.echange-img {
  width: 100%; height: 200px;
  background: var(--p1);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--p3);
}
.echange-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.06);
  transition: transform 0.4s, filter 0.4s;
}
.echange-card:hover .echange-img img { transform: scale(1.04); filter: sepia(0); }

.statut-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--fm);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 400;
  z-index: 2;
}
.statut-disponible { background: var(--v); color: white; }
.statut-reserve    { background: #b07820; color: white; }

.echange-body { padding: 16px; }
.echange-nom {
  font-family: var(--fs);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--e0);
  margin-bottom: 6px;
  font-weight: 600;
}
.echange-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.echange-desc {
  font-family: var(--fc);
  font-size: 0.84rem;
  color: var(--e3);
  line-height: 1.65;
  margin-bottom: 14px;
  font-style: italic;
  font-weight: 300;
}
.echange-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: var(--fd);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--e0);
  background: var(--e0);
  color: var(--p0);
  transition: all 0.2s;
  text-decoration: none;
}
.echange-btn:hover { background: var(--b); border-color: var(--b); }
.echange-btn-fiche {
  background: transparent;
  border-color: var(--p3);
  color: var(--e2);
}
.echange-btn-fiche:hover { background: var(--p1); border-color: var(--e0); color: var(--e0); }
.echange-btn.disabled {
  background: var(--p2);
  border-color: var(--p3);
  color: var(--e4);
  cursor: not-allowed;
}

/* Modal formulaire */
.modal-echange {
  position: fixed; inset: 0;
  background: rgba(15,10,5,0.82);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal-echange.open { display: flex; }
.modal-echange-box {
  background: var(--p0);
  max-width: 520px;
  width: 100%;
  border: 1px solid var(--p3);
  box-shadow: 0 0 0 5px var(--p3), 0 32px 80px rgba(15,10,5,0.4);
  position: relative;
  overflow: hidden;
}
.modal-echange-bar {
  height: 3px;
  background: linear-gradient(to right, var(--b) 25%, var(--r) 25% 50%, var(--v) 50% 75%, var(--e2) 75%);
}
.modal-echange-inner { padding: 28px 28px 24px; }
.modal-echange-title {
  font-family: var(--fd);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--e0);
  margin-bottom: 4px;
}
.modal-echange-piece {
  font-family: var(--fs);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--e3);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--p3);
}
.modal-echange-close {
  position: absolute; top: 12px; right: 12px;
  background: var(--e0); color: var(--p0);
  border: none; width: 26px; height: 26px;
  cursor: pointer; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm);
  transition: background 0.2s;
}
.modal-echange-close:hover { background: var(--r); }

.intro-box {
  background: var(--p1);
  border: 1px solid var(--p3);
  border-left: 3px solid var(--b);
  padding: 18px 20px;
  margin-bottom: 32px;
  font-family: var(--fc);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--e2);
  line-height: 1.75;
}
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  border: 1px dashed var(--p3);
  font-family: var(--fs);
  font-style: italic;
  color: var(--e4);
  font-size: 1.1rem;
}


/* ══ fiche.php ══ */
.fiche-page {
  max-width: 960px; margin: 0 auto; padding: 48px 40px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
@media(max-width:700px) { .fiche-page { grid-template-columns: 1fr; padding: 32px 20px 60px; } }

/* Photos */
.fiche-photos { position: sticky; top: 90px; }
.fiche-main-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--p1); border: 1px solid var(--p3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; margin-bottom: 10px;
}
.fiche-main-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: sepia(0.05); transition: transform 0.4s;
  padding: 12px;
}
.fiche-main-img img:hover { transform: scale(1.04); }
.fiche-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-thumb {
  width: 64px; height: 64px; border: 1px solid var(--p3);
  overflow: hidden; cursor: pointer; opacity: 0.65; transition: all 0.2s;
  flex-shrink: 0;
}
.fiche-thumb:hover, .fiche-thumb.active { opacity: 1; border-color: var(--e0); }
.fiche-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.no-photo {
  width: 100%; aspect-ratio: 4/3; background: var(--p1);
  border: 1px solid var(--p3); display: flex; align-items: center;
  justify-content: center; font-size: 3rem; opacity: 0.2;
}

/* Contenu */
.fiche-content {}
.fiche-breadcrumb {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--e4); margin-bottom: 14px; font-weight: 300;
}
.fiche-breadcrumb a { color: var(--e4); text-decoration: none; }
.fiche-breadcrumb a:hover { color: var(--e0); }
.fiche-nom {
  font-family: var(--fs); font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic; color: var(--e0); line-height: 1.2;
  margin-bottom: 10px; font-weight: 400;
}
.fiche-cat-badge {
  display: inline-block; font-family: var(--fm); font-size: 0.6rem;
  letter-spacing: 0.12em; padding: 3px 10px;
  border: 1px solid var(--p3); color: var(--e3);
  margin-bottom: 20px; font-weight: 300;
}
.fiche-desc {
  font-family: var(--fs); font-style: italic; font-size: 0.97rem;
  color: var(--e2); border-left: 2px solid var(--p3);
  padding-left: 14px; line-height: 1.8; margin-bottom: 24px;
}
.fiche-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--fc); font-size: 0.88rem; margin-bottom: 24px;
}
.fiche-table tr { border-bottom: 1px dotted var(--p3); }
.fiche-table tr:last-child { border-bottom: none; }
.fiche-table td { padding: 8px 4px; }
.fiche-table td:first-child {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--e4); width: 38%; font-weight: 300;
}
.fiche-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; }
.fiche-tag {
  font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.08em;
  padding: 3px 9px; border: 1px solid var(--p3);
  color: var(--e3); font-weight: 300;
}

/* Boutons */
.fiche-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.fiche-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; text-decoration: none;
  background: var(--e0); color: var(--p1); transition: background 0.2s;
}
.fiche-btn-back:hover { background: var(--r); }
.fiche-btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; background: transparent;
  border: 1px solid var(--p3); color: var(--e3);
  cursor: pointer; transition: all 0.2s;
}
.fiche-btn-share:hover { border-color: var(--e0); color: var(--e0); }
.share-copied {
  font-family: var(--fm); font-size: 0.65rem; color: var(--v);
  display: none; align-items: center; gap: 4px;
}
.share-copied.show { display: flex; }

/* Stars */
.fiche-stars { display: flex; gap: 4px; align-items: center; margin-bottom: 20px; }
.fiche-stars 
.fiche-stars .star.active { color: #b07820; }
.fiche-stars .star:hover { color: #b07820; transform: scale(1.2); }
.fiche-rating-info { font-family: var(--fm); font-size: 0.62rem; color: var(--e4); margin-left: 6px; }

/* Nav fiches */
.fiche-nav {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--p3); padding-top: 20px; margin-top: 20px;
  max-width: 960px; margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
}
@media(max-width:700px) { .fiche-nav { padding-left: 20px; padding-right: 20px; } }
.fiche-nav a {
  font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--e3); text-decoration: none; transition: color 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.fiche-nav a:hover { color: var(--e0); }


/* ══ fiche2.php ══ */
.fiche-page {
  max-width: 960px; margin: 0 auto; padding: 48px 40px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
@media(max-width:700px) { .fiche-page { grid-template-columns: 1fr; padding: 32px 20px 60px; } }

/* Photos */
.fiche-photos { position: sticky; top: 90px; }
.fiche-main-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--p1); border: 1px solid var(--p3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; margin-bottom: 10px;
}
.fiche-main-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: sepia(0.05); transition: transform 0.4s;
  padding: 12px;
}
.fiche-main-img img:hover { transform: scale(1.04); }
.fiche-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-thumb {
  width: 64px; height: 64px; border: 1px solid var(--p3);
  overflow: hidden; cursor: pointer; opacity: 0.65; transition: all 0.2s;
  flex-shrink: 0;
}
.fiche-thumb:hover, .fiche-thumb.active { opacity: 1; border-color: var(--e0); }
.fiche-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.no-photo {
  width: 100%; aspect-ratio: 4/3; background: var(--p1);
  border: 1px solid var(--p3); display: flex; align-items: center;
  justify-content: center; font-size: 3rem; opacity: 0.2;
}

/* Contenu */
.fiche-content {}
.fiche-breadcrumb {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--e4); margin-bottom: 14px; font-weight: 300;
}
.fiche-breadcrumb a { color: var(--e4); text-decoration: none; }
.fiche-breadcrumb a:hover { color: var(--e0); }
.fiche-nom {
  font-family: var(--fs); font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic; color: var(--e0); line-height: 1.2;
  margin-bottom: 10px; font-weight: 400;
}
.fiche-cat-badge {
  display: inline-block; font-family: var(--fm); font-size: 0.6rem;
  letter-spacing: 0.12em; padding: 3px 10px;
  border: 1px solid var(--p3); color: var(--e3);
  margin-bottom: 20px; font-weight: 300;
}
.fiche-desc {
  font-family: var(--fs); font-style: italic; font-size: 0.97rem;
  color: var(--e2); border-left: 2px solid var(--p3);
  padding-left: 14px; line-height: 1.8; margin-bottom: 24px;
}
.fiche-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--fc); font-size: 0.88rem; margin-bottom: 24px;
}
.fiche-table tr { border-bottom: 1px dotted var(--p3); }
.fiche-table tr:last-child { border-bottom: none; }
.fiche-table td { padding: 8px 4px; }
.fiche-table td:first-child {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--e4); width: 38%; font-weight: 300;
}
.fiche-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; }
.fiche-tag {
  font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.08em;
  padding: 3px 9px; border: 1px solid var(--p3);
  color: var(--e3); font-weight: 300;
}

/* Boutons */
.fiche-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.fiche-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; text-decoration: none;
  background: var(--e0); color: var(--p1); transition: background 0.2s;
}
.fiche-btn-back:hover { background: var(--r); }
.fiche-btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; background: transparent;
  border: 1px solid var(--p3); color: var(--e3);
  cursor: pointer; transition: all 0.2s;
}
.fiche-btn-share:hover { border-color: var(--e0); color: var(--e0); }
.share-copied {
  font-family: var(--fm); font-size: 0.65rem; color: var(--v);
  display: none; align-items: center; gap: 4px;
}
.share-copied.show { display: flex; }

/* Stars */
.fiche-stars { display: flex; gap: 4px; align-items: center; margin-bottom: 20px; }
.fiche-stars 
.fiche-stars .star.active { color: #b07820; }
.fiche-stars .star:hover { color: #b07820; transform: scale(1.2); }
.fiche-rating-info { font-family: var(--fm); font-size: 0.62rem; color: var(--e4); margin-left: 6px; }

/* Nav fiches */
.fiche-nav {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--p3); padding-top: 20px; margin-top: 20px;
  max-width: 960px; margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
}
@media(max-width:700px) { .fiche-nav { padding-left: 20px; padding-right: 20px; } }
.fiche-nav a {
  font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--e3); text-decoration: none; transition: color 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.fiche-nav a:hover { color: var(--e0); }


/* ══ fiche3.php ══ */
.fiche-page {
  max-width: 960px; margin: 0 auto; padding: 48px 40px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
@media(max-width:700px) { .fiche-page { grid-template-columns: 1fr; padding: 32px 20px 60px; } }

/* Photos */
.fiche-photos { position: sticky; top: 90px; }
.fiche-main-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--p1); border: 1px solid var(--p3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; margin-bottom: 10px;
}
.fiche-main-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: sepia(0.05); transition: transform 0.4s;
  padding: 12px;
}
.fiche-main-img img:hover { transform: scale(1.04); }
.fiche-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-thumb {
  width: 64px; height: 64px; border: 1px solid var(--p3);
  overflow: hidden; cursor: pointer; opacity: 0.65; transition: all 0.2s;
  flex-shrink: 0;
}
.fiche-thumb:hover, .fiche-thumb.active { opacity: 1; border-color: var(--e0); }
.fiche-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.no-photo {
  width: 100%; aspect-ratio: 4/3; background: var(--p1);
  border: 1px solid var(--p3); display: flex; align-items: center;
  justify-content: center; font-size: 3rem; opacity: 0.2;
}

/* Contenu */
.fiche-content {}
.fiche-breadcrumb {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--e4); margin-bottom: 14px; font-weight: 300;
}
.fiche-breadcrumb a { color: var(--e4); text-decoration: none; }
.fiche-breadcrumb a:hover { color: var(--e0); }
.fiche-nom {
  font-family: var(--fs); font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic; color: var(--e0); line-height: 1.2;
  margin-bottom: 10px; font-weight: 400;
}
.fiche-cat-badge {
  display: inline-block; font-family: var(--fm); font-size: 0.6rem;
  letter-spacing: 0.12em; padding: 3px 10px;
  border: 1px solid var(--p3); color: var(--e3);
  margin-bottom: 20px; font-weight: 300;
}
.fiche-desc {
  font-family: var(--fs); font-style: italic; font-size: 0.97rem;
  color: var(--e2); border-left: 2px solid var(--p3);
  padding-left: 14px; line-height: 1.8; margin-bottom: 24px;
}
.fiche-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--fc); font-size: 0.88rem; margin-bottom: 24px;
}
.fiche-table tr { border-bottom: 1px dotted var(--p3); }
.fiche-table tr:last-child { border-bottom: none; }
.fiche-table td { padding: 8px 4px; }
.fiche-table td:first-child {
  font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--e4); width: 38%; font-weight: 300;
}
.fiche-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; }
.fiche-tag {
  font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.08em;
  padding: 3px 9px; border: 1px solid var(--p3);
  color: var(--e3); font-weight: 300;
}

/* Boutons */
.fiche-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.fiche-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; text-decoration: none;
  background: var(--e0); color: var(--p1); transition: background 0.2s;
}
.fiche-btn-back:hover { background: var(--r); }
.fiche-btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-family: var(--fd); font-size: 0.72rem;
  letter-spacing: 0.1em; background: transparent;
  border: 1px solid var(--p3); color: var(--e3);
  cursor: pointer; transition: all 0.2s;
}
.fiche-btn-share:hover { border-color: var(--e0); color: var(--e0); }
.share-copied {
  font-family: var(--fm); font-size: 0.65rem; color: var(--v);
  display: none; align-items: center; gap: 4px;
}
.share-copied.show { display: flex; }

/* Stars */
.fiche-stars { display: flex; gap: 4px; align-items: center; margin-bottom: 20px; }
.fiche-stars 
.fiche-stars .star.active { color: #b07820; }
.fiche-stars .star:hover { color: #b07820; transform: scale(1.2); }
.fiche-rating-info { font-family: var(--fm); font-size: 0.62rem; color: var(--e4); margin-left: 6px; }

/* Nav fiches */
.fiche-nav {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--p3); padding-top: 20px; margin-top: 20px;
  max-width: 960px; margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
}
@media(max-width:700px) { .fiche-nav { padding-left: 20px; padding-right: 20px; } }
.fiche-nav a {
  font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--e3); text-decoration: none; transition: color 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.fiche-nav a:hover { color: var(--e0); }


/* ══ glossaire.php ══ */
.glossaire-wrap { max-width: 860px; margin: 0 auto; padding: 48px 40px 80px; }
@media(max-width:600px) { .glossaire-wrap { padding: 32px 20px 60px; } }

/* Index lettres */
.glossaire-index {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 40px; padding-bottom: 20px;
  border-bottom: 1px solid var(--p3);
}
.glossaire-index a {
  font-family: var(--fd); font-size: 0.78rem; letter-spacing: 0.1em;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--p3); color: var(--e3); text-decoration: none;
  transition: all 0.2s;
}
.glossaire-index a:hover { background: var(--e0); color: var(--p1); border-color: var(--e0); }
.glossaire-index a.absent { color: var(--p3); border-color: var(--p2); pointer-events: none; }

/* Groupe lettre */
.glossaire-group { margin-bottom: 44px; }
.glossaire-letter {
  font-family: var(--fd); font-size: 1.8rem; letter-spacing: 0.12em;
  color: var(--r); margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--p3); position: relative;
}
.glossaire-letter::after {
  content: '✦'; position: absolute; bottom: -9px; left: 50%;
  transform: translateX(-50%); font-size: 0.6rem; color: var(--p3);
  background: var(--p0); padding: 0 6px;
}

/* Terme */
.glossaire-item {
  padding: 16px 0;
  border-bottom: 1px dotted var(--p3);
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  align-items: baseline;
}
.glossaire-item:last-child { border-bottom: none; }
@media(max-width:600px) { .glossaire-item { grid-template-columns: 1fr; gap: 6px; } }

.glossaire-terme {
  font-family: var(--fd); font-size: 0.95rem; letter-spacing: 0.08em;
  color: var(--e0);
}
.glossaire-def {
  font-family: var(--fc); font-size: 0.95rem; line-height: 1.85;
  color: var(--e2); font-weight: 300;
}

/* Recherche rapide */
.glossaire-search {
  margin-bottom: 28px;
  border-bottom: 1px solid var(--p3);
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
}
.glossaire-search::before {
  content: '§'; font-family: var(--fs); font-size: 1.2rem; color: var(--e4);
}
.glossaire-search input {
  flex: 1; max-width: 360px; padding: 8px 4px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--p3);
  font-family: var(--fc); font-size: 0.95rem; font-style: italic;
  color: var(--e0); outline: none; transition: border-color 0.25s;
}
.glossaire-search input:focus { border-color: var(--e0); }
.glossaire-search input::placeholder { color: var(--e4); font-style: italic; }
.glossaire-count {
  font-family: var(--fm); font-size: 0.6rem; color: var(--e4); font-weight: 300;
}


/* ══ index.php ══ */
/* ── Grille catégories ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.cat-card {
  background: var(--p0);
  border: 1px solid var(--p3);
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(100,70,20,0.15);
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--p2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.cat-card:hover::before { opacity: 1; }

.cat-img {
  width: 100%; height: 180px;
  background: var(--p1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--p3);
}
.cat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.08) contrast(1.02);
  transition: filter 0.4s, transform 0.4s;
}
.cat-card:hover .cat-img img { filter: sepia(0) contrast(1.04); transform: scale(1.04); }
.cat-img::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(100,70,20,0.15) 100%);
  pointer-events: none; z-index: 1;
}
.cat-placeholder {
  font-family: var(--fs);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--p3);
}
.cat-badge-new {
  position: absolute; top: 10px; left: 10px;
  background: var(--r); color: var(--p0);
  font-family: var(--fd); font-size: 0.5rem;
  letter-spacing: 0.15em; padding: 3px 7px;
  z-index: 2;
}
.cat-body { padding: 16px 18px 14px; }
.cat-nom {
  font-family: var(--fd);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--e0);
  margin-bottom: 10px;
  display: block;
}
.cat-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dotted var(--p3);
  padding-top: 8px;
}
.cat-count {
  font-family: var(--fs);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--e0);
}
.cat-count-label {
  font-family: var(--fm);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--e4);
  font-weight: 300;
  text-transform: uppercase;
  margin-left: 4px;
}
.cat-arrow {
  font-family: var(--fm);
  font-size: 0.6rem;
  color: var(--e4);
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}
.cat-card:hover .cat-arrow { color: var(--r); transform: translateX(4px); }

@media (max-width: 768px) {
  .cat-img { height: 140px; }
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat-img { height: 110px; }
  .cat-body { padding: 8px 10px 10px; }
  .cat-nom { font-size: 0.78rem; letter-spacing: 0.06em; margin-bottom: 6px; }
  .cat-count { font-size: 1rem; }
  .cat-count-label { font-size: 0.46rem; }
  .cat-arrow { font-size: 0.52rem; }
}


/* ══ journal.php ══ */
.journal-wrap { max-width: 800px; margin: 0 auto; padding: 52px 24px 80px; }

/* Filtres */
.journal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; align-items: center; }
.jf-label { font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.15em; color: var(--e4); margin-right: 4px; }
.jf-btn { font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.1em; padding: 5px 12px; border: 1px solid var(--p3); background: transparent; color: var(--e3); cursor: pointer; transition: all 0.15s; }
.jf-btn:hover, .jf-btn.active { border-color: var(--e2); color: var(--e0); background: var(--p1); }

/* Timeline */
.journal-entry { display: grid; grid-template-columns: 72px 1fr; gap: 0; margin-bottom: 40px; position: relative; }
.journal-entry::before { content: ''; position: absolute; left: 35px; top: 14px; bottom: -40px; width: 1px; background: var(--p3); pointer-events: none; }
.journal-entry:last-child::before { display: none; }

.entry-date { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 4px; flex-shrink: 0; }
.entry-day   { font-family: var(--fd); font-size: 1.5rem; color: var(--r); line-height: 1; }
.entry-month { font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.2em; color: var(--e4); text-transform: uppercase; }
.entry-year  { font-family: var(--fm); font-size: 0.42rem; letter-spacing: 0.12em; color: var(--p4); }
.entry-dot   { width: 9px; height: 9px; border-radius: 50%; background: var(--p0); border: 2px solid var(--p3); margin-top: 8px; flex-shrink: 0; }

.entry-card {
  background: var(--p0); border: 1px solid var(--p3); border-left: 3px solid var(--r);
  padding: 18px 20px; margin-left: 14px; position: relative;
  transition: box-shadow 0.2s;
}
.entry-card:hover { box-shadow: 0 4px 18px rgba(26,18,8,0.07); }
.entry-card::after { content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(225deg, var(--p2) 50%, transparent 50%); }

.entry-humeur { font-size: 1rem; margin-bottom: 6px; display: block; }
.entry-titre { font-family: var(--fd); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--e0); margin-bottom: 10px; padding-right: 30px; }
.entry-texte { font-family: var(--fc); font-size: 0.92rem; color: var(--e2); line-height: 1.85; margin-bottom: 14px; font-weight: 300; }
.entry-texte em { font-style: italic; color: var(--e3); }
.entry-texte strong { font-weight: 600; color: var(--e0); }

.entry-liens { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.entry-lien { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: 0.5rem; letter-spacing: 0.1em; padding: 3px 8px; border: 1px solid var(--p3); color: var(--e4); text-decoration: none; transition: all 0.15s; }
.entry-lien:hover { border-color: var(--e3); color: var(--e2); }
.entry-lien.fiche { border-color: rgba(184,32,16,0.3); color: var(--r); }

.entry-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px dotted var(--p3); padding-top: 10px; font-family: var(--fm); font-size: 0.5rem; letter-spacing: 0.1em; color: var(--e4); }
.entry-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--p1); border: 1px solid var(--p3); }

.journal-empty { text-align: center; padding: 60px 20px; font-family: var(--fc); font-style: italic; color: var(--e4); font-size: 1rem; }

@media(max-width: 500px) {
  .journal-entry { grid-template-columns: 56px 1fr; }
  .journal-entry::before { left: 27px; }
  .entry-card { margin-left: 8px; padding: 14px 16px; }
}


/* ══ livredore.php ══ */
.ld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.ld-card {
  background: var(--p0);
  border: 1px solid var(--p3);
  padding: 22px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ld-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(100,70,20,0.1); }
.ld-card::before {
  content: '❝';
  position: absolute;
  top: 10px; left: 14px;
  font-family: var(--fs);
  font-size: 2.5rem;
  color: var(--p3);
  line-height: 1;
}
.ld-message {
  font-family: var(--fc);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--e1);
  margin-top: 24px;
  margin-bottom: 14px;
}
.ld-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dotted var(--p3);
  padding-top: 10px;
}
.ld-nom {
  font-family: var(--fd);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--e0);
}
.ld-pays {
  font-family: var(--fm);
  font-size: 0.6rem;
  color: var(--e4);
  margin-left: 6px;
}
.ld-date {
  font-family: var(--fm);
  font-size: 0.58rem;
  color: var(--e4);
  letter-spacing: 0.08em;
  font-weight: 300;
}
.ld-stars { color: #b07820; font-size: 0.75rem; margin-bottom: 4px; }

/* Formulaire */
.ld-form-wrap {
  background: var(--p1);
  border: 1px solid var(--p3);
  padding: 32px;
  max-width: 640px;
  margin-bottom: 48px;
  position: relative;
}
.ld-form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--b) 0 25%, var(--r) 25% 50%, var(--v) 50% 75%, var(--e2) 75% 100%);
}
.ld-form-title {
  font-family: var(--fd);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--e0);
  margin-bottom: 20px;
}
/* Sélecteur d'étoiles dans le formulaire */
.star-select { display: flex; gap: 6px; margin-bottom: 4px; }
.star-select span {
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--p3);
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
}
.star-select span:hover,
.star-select span.lit { color: #b07820; }
.star-select span:hover { transform: scale(1.2); }

.ld-empty {
  text-align: center;
  padding: 3rem;
  font-family: var(--fs);
  font-style: italic;
  color: var(--e4);
  border: 1px dashed var(--p3);
}
.ld-count {
  font-family: var(--fm);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--e4);
  margin-bottom: 24px;
  font-weight: 300;
}


/* ══ mediatheque.php ══ */
/* ── Onglets ── */
.media-tabs { display: flex; border-bottom: 1px solid var(--p3); margin-bottom: 0; }
.media-tab { flex: 1; padding: 14px; text-align: center; font-family: var(--fd); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--e4); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; display: block; transition: color 0.2s; }
.media-tab:hover { color: var(--e2); }
.media-tab.active { color: var(--e0); border-bottom-color: var(--e0); }

/* ── Contenu ── */
.media-content { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }

/* ── Vidéos ── */
.videos-list { display: flex; flex-direction: column; gap: 20px; }
.video-card { background: var(--p1); border: 1px solid var(--p3); overflow: hidden; }
.video-player-wrap { width: 100%; aspect-ratio: 16/9; background: var(--e0); }
.video-player-wrap video { width: 100%; height: 100%; display: block; }
.video-body { padding: 12px 16px; }
.video-nom { font-family: var(--fs); font-style: italic; font-size: 1rem; color: var(--e0); margin-bottom: 4px; }
.video-meta { font-family: var(--fm); font-size: 0.48rem; letter-spacing: 0.12em; color: var(--e4); }

/* ── Dessins ── */
.dessins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media(max-width: 600px) { .dessins-grid { grid-template-columns: 1fr 1fr; } }
.dessin-card { background: var(--p1); border: 1px solid var(--p3); overflow: hidden; cursor: pointer; transition: all 0.2s; }
.dessin-card:hover { border-color: var(--p4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(100,70,20,0.1); }
.dessin-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--p2); }
.dessin-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.05); transition: filter 0.3s; display: block; }
.dessin-card:hover .dessin-img-wrap img { filter: sepia(0); }
.dessin-body { padding: 8px 10px; }
.dessin-nom { font-family: var(--fs); font-style: italic; font-size: 0.82rem; color: var(--e0); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dessin-auteur { font-family: var(--fm); font-size: 0.4rem; letter-spacing: 0.08em; color: var(--e4); }

/* ── Lightbox ── */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(10,8,4,0.96); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.lightbox-overlay.open { display: flex; }
.lightbox-box { max-width: 680px; width: 100%; position: relative; }
.lightbox-img { width: 100%; max-height: 60vh; object-fit: contain; display: block; border: 1px solid var(--e2); }
.lightbox-info { padding: 16px 0 0; }
.lightbox-nom { font-family: var(--fs); font-style: italic; font-size: 1.2rem; color: var(--p1); margin-bottom: 8px; }
.lightbox-desc { font-family: var(--fc); font-size: 0.88rem; color: var(--e4); line-height: 1.7; margin-bottom: 10px; }
.lightbox-meta { font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.1em; color: var(--e3); }
.lightbox-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; background: rgba(255,255,255,0.08); border: 1px solid var(--e2); color: var(--e4); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { color: var(--p1); }
.lightbox-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.lightbox-btn { font-family: var(--fm); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--e4); padding: 8px 14px; border: 1px solid var(--e2); background: transparent; cursor: pointer; transition: all 0.2s; }
.lightbox-btn:hover { border-color: var(--p3); color: var(--p2); }
.lightbox-btn:disabled { opacity: 0.3; cursor: default; }
.lightbox-counter { font-family: var(--fm); font-size: 0.46rem; color: var(--e3); }

/* Vide */
.media-empty { padding: 3rem 2rem; text-align: center; font-family: var(--fs); font-style: italic; font-size: 1rem; color: var(--e4); border: 1px dashed var(--p3); }


/* ══ parloir.php ══ */
/* ── LAYOUT PARLOIR ── */
.parloir-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
}

/* ── BOUTON NOUVEAU SUJET ── */
.btn-nouveau {
  display: inline-block;
  padding: 10px 24px;
  background: var(--e0);
  color: var(--p1);
  border: 1px solid var(--e0);
  font-family: var(--fd);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  margin-bottom: 24px;
  transition: all 0.2s;
}
.btn-nouveau:hover { background: var(--r); border-color: var(--r); }

/* ── CATÉGORIE ── */
.cat-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; margin-top: 32px;
  padding-bottom: 8px; border-bottom: 1px solid var(--p3);
  position: relative;
}
.cat-header:first-of-type { margin-top: 0; }
.cat-header::after {
  content: '✦'; position: absolute; bottom: -9px; left: 50%;
  transform: translateX(-50%); font-size: 0.6rem; color: var(--p3);
  background: var(--p0); padding: 0 6px;
}
.cat-title { font-family: var(--fd); font-size: 1rem; letter-spacing: 0.1em; color: var(--e0); }
.cat-count { font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--e4); font-weight: 300; }

/* ── SUJET CARD ── */
.sujets-liste { display: flex; flex-direction: column; margin-bottom: 8px; }
.sujet-card {
  background: var(--p0); border: 1px solid var(--p3); border-top: none;
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; padding: 14px 16px;
  cursor: pointer; transition: background 0.15s;
  text-decoration: none; color: inherit;
}
.sujet-card:first-child { border-top: 1px solid var(--p3); }
.sujet-card:hover { background: var(--p1); }
.sujet-corps { min-width: 0; }
.sujet-titre {
  font-family: var(--fs); font-size: 0.97rem; font-style: italic;
  color: var(--e0); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400;
}
.sujet-tag {
  display: inline-block; font-family: var(--fm); font-size: 0.55rem;
  padding: 1px 6px; border: 1px solid currentColor;
  letter-spacing: 0.08em; vertical-align: middle; margin-right: 5px; font-weight: 300;
}
.tag-Recherche    { color: var(--b); }
.tag-Echanges     { color: var(--v); }
.tag-Identification { color: var(--or); }
.tag-Datation     { color: var(--r); }
.tag-Question     { color: var(--e3); }
.sujet-meta {
  font-family: var(--fm); font-size: 0.58rem; color: var(--e4);
  display: flex; gap: 10px; flex-wrap: wrap; font-weight: 300;
}
.sujet-meta strong { color: var(--e2); }
.sujet-meta em { font-style: normal; color: var(--e3); }
.sujet-stats {
  text-align: right; flex-shrink: 0; font-family: var(--fm);
  font-size: 0.58rem; color: var(--e4);
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 2px; min-width: 52px; font-weight: 300;
}
.sujet-stats .nb {
  font-family: var(--fs); font-size: 1.4rem; font-style: italic;
  font-weight: 400; color: var(--e0); line-height: 1;
}
.sujets-vides {
  text-align: center; padding: 3rem;
  font-family: var(--fs); font-style: italic;
  color: var(--e4); border: 1px dashed var(--p3);
}

/* ── SIDEBAR ── */
.parloir-sidebar { display: flex; flex-direction: column; gap: 20px; }
.side-bloc { background: var(--p0); border: 1px solid var(--p3); padding: 18px; }
.side-bloc-title {
  font-family: var(--fd); font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--e0); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--p3);
}
.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--p3); border: 1px solid var(--p3); }
.side-stat { background: var(--p0); text-align: center; padding: 12px 0; }
.side-stat-num {
  font-family: var(--fs); font-size: 1.6rem; font-style: italic;
  font-weight: 400; color: var(--e0); display: block; line-height: 1;
}
.side-stat:nth-child(1) .side-stat-num { color: var(--b); }
.side-stat:nth-child(2) .side-stat-num { color: var(--r); }
.side-stat-label {
  font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.15em;
  color: var(--e4); display: block; margin-top: 2px; font-weight: 300;
}
.derniers-list { display: flex; flex-direction: column; gap: 10px; }
.dernier-item { font-size: 0.82rem; border-bottom: 1px dotted var(--p3); padding-bottom: 8px; }
.dernier-item:last-child { border-bottom: none; padding-bottom: 0; }
.dernier-pseudo { font-family: var(--fm); font-size: 0.6rem; color: var(--b); font-weight: 400; }
.dernier-titre {
  font-family: var(--fs); font-style: italic; color: var(--e1);
  font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dernier-heure { font-family: var(--fm); font-size: 0.55rem; color: var(--e4); font-weight: 300; }
.regles-list {
  list-style: none; font-size: 0.85rem; color: var(--e2);
  display: flex; flex-direction: column; gap: 6px; font-family: var(--fc); font-weight: 300;
}
.regles-list li::before { content: '→ '; color: var(--e4); font-family: var(--fm); font-size: 0.65rem; }

/* ── PAGINATION ── */
.pagination { display: flex; gap: 4px; margin-top: 20px; }
.page-btn {
  font-family: var(--fd); font-size: 0.68rem; letter-spacing: 0.1em;
  padding: 6px 14px; background: transparent;
  border: 1px solid var(--p3); color: var(--e3); cursor: pointer; transition: all 0.15s;
}
.page-btn:hover, .page-btn.active { background: var(--e0); color: var(--p1); border-color: var(--e0); }

/* ── MODAL SUJET (lecture + réponse) ── */
.modal-sujet 
.sujet-detail-header {
  padding: 28px 28px 0;
  border-bottom: 1px solid var(--p3);
  margin-bottom: 0;
}
.sujet-detail-tag {
  display: inline-block; font-family: var(--fm); font-size: 0.55rem;
  padding: 2px 8px; border: 1px solid currentColor;
  letter-spacing: 0.08em; margin-bottom: 10px; font-weight: 300;
}
.sujet-detail-titre {
  font-family: var(--fs); font-size: 1.3rem; font-style: italic;
  color: var(--e0); margin-bottom: 8px; line-height: 1.3;
}
.sujet-detail-meta {
  font-family: var(--fm); font-size: 0.58rem; color: var(--e4);
  display: flex; gap: 12px; padding-bottom: 16px; font-weight: 300;
}
.sujet-detail-body {
  padding: 20px 28px;
  font-family: var(--fs); font-style: italic;
  font-size: 0.97rem; color: var(--e1);
  border-left: 2px solid var(--p3); margin: 16px 28px 0;
  line-height: 1.75;
}
.reponses-wrap { padding: 0 28px 20px; }
.reponses-titre {
  font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.15em;
  color: var(--e4); margin: 20px 0 12px; padding-top: 16px;
  border-top: 1px solid var(--p3); font-weight: 300;
}
.reponse-item {
  background: var(--p1); border: 1px solid var(--p3);
  padding: 14px 16px; margin-bottom: 8px;
}
.reponse-pseudo { font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--e0); margin-bottom: 4px; }
.reponse-date { font-family: var(--fm); font-size: 0.55rem; color: var(--e4); font-weight: 300; float: right; margin-top: -18px; }
.reponse-message { font-family: var(--fc); font-size: 0.92rem; color: var(--e1); line-height: 1.7; font-weight: 300; font-style: italic; }
.repondre-form { padding: 0 28px 28px; border-top: 1px solid var(--p3); margin-top: 16px; }
.repondre-form 

/* ── MODAL NOUVEAU SUJET ── */
.modal-nouveau 
.modal-inner { padding: 32px; }
.modal-title {
  font-family: var(--fd); font-size: 1.1rem; letter-spacing: 0.12em;
  color: var(--e0); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--p3);
}
.tags-choix { display: flex; gap: 5px; flex-wrap: wrap; }
.tag-radio { display: none; }
.tag-label {
  font-family: var(--fm); font-size: 0.6rem; padding: 4px 10px;
  border: 1px solid var(--p3); cursor: pointer; color: var(--e3);
  transition: all 0.15s; letter-spacing: 0.06em; font-weight: 300;
}
.tag-radio:checked + .tag-label { background: var(--e0); color: var(--p1); border-color: var(--e0); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--p3);
}
.btn-ghost { background: transparent; color: var(--e3); border: 1px solid var(--p3); }
.btn-ghost:hover { border-color: var(--e0); color: var(--e0); }

@media(max-width:900px) {
  .parloir-layout { grid-template-columns: 1fr; }
  .parloir-sidebar { order: -1; }
  .side-stats { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  
}


/* ══ quiz.php ══ */
.quiz-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; max-width: 1060px; margin: 0 auto; padding: 48px 24px 80px; align-items: start; }
@media(max-width: 860px) { .quiz-layout { grid-template-columns: 1fr; } }

/* ── Card principale ── */
.quiz-card { background: white; border: 1px solid var(--p3); box-shadow: 0 4px 24px rgba(26,18,8,0.08); overflow: hidden; }

/* ── Progress ── */
.quiz-progress { padding: 16px 20px 0; }
.quiz-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quiz-q-num { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.15em; color: var(--e4); }
.quiz-timer { font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--e0); font-weight: 400; }
.quiz-timer.warning { color: var(--r); }
.quiz-score-live { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--e3); }
.progress-track { height: 3px; background: var(--p3); }
.progress-fill { height: 100%; background: var(--r); transition: width 0.5s ease; width: 0%; }

/* ── Photo ── */
.quiz-photo { width: 100%; height: 420px; background: var(--p1); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--p3); }
.quiz-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.quiz-no-img { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.15em; color: var(--e4); }
.quiz-cat-badge { position: absolute; top: 10px; right: 10px; background: var(--e0); color: var(--p3); font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.15em; padding: 3px 9px; }

/* ── Question & Choix ── */
.quiz-question { padding: 20px 20px 6px; font-family: var(--fd); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--e0); }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 12px 20px 20px; }
@media(max-width: 480px) { .quiz-choices { grid-template-columns: 1fr; } }

.choice-btn { padding: 12px 13px; background: var(--p1); border: 1.5px solid var(--p3); font-family: var(--fc); font-size: 0.85rem; font-style: italic; color: var(--e2); cursor: pointer; text-align: left; transition: all 0.18s; position: relative; line-height: 1.3; }
.choice-btn:hover:not(:disabled) { background: var(--p0); border-color: var(--e3); color: var(--e0); }
.choice-btn.correct { background: rgba(16,120,48,0.08); border-color: #107830; color: #107830; font-weight: 600; }
.choice-btn.correct::after { content: 'V'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: bold; font-size: 0.8rem; }
.choice-btn.wrong   { background: rgba(184,32,16,0.06); border-color: #b82010; color: #b82010; }
.choice-btn.wrong::after { content: 'X'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: bold; font-size: 0.8rem; }
.choice-btn:disabled { cursor: default; }

/* ── Feedback ── */
.quiz-feedback { margin: 0 20px 14px; padding: 10px 13px; font-family: var(--fc); font-size: 0.88rem; border-left: 3px solid; display: none; }
.quiz-feedback.show { display: block; }
.quiz-feedback.ok { border-color: #107830; background: rgba(16,120,48,0.06); color: #107830; }
.quiz-feedback.ko { border-color: #b82010; background: rgba(184,32,16,0.06); color: #b82010; }

.quiz-next { display: none; margin: 0 20px 20px; width: calc(100% - 40px); padding: 11px; background: var(--e0); color: var(--p1); border: none; font-family: var(--fd); font-size: 0.78rem; letter-spacing: 0.15em; cursor: pointer; transition: background 0.2s; }
.quiz-next:hover { background: var(--r); }
.quiz-next.show { display: block; }

/* ── Intro ── */
.quiz-intro { text-align: center; padding: 36px 20px; }
.quiz-intro p { font-family: var(--fc); font-style: italic; font-size: 0.95rem; color: var(--e3); line-height: 1.8; margin-bottom: 24px; }
.quiz-rules { display: flex; justify-content: center; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; }
.quiz-rule { font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.12em; color: var(--e4); text-align: center; }
.quiz-rule strong { display: block; font-family: var(--fd); font-size: 1.6rem; color: var(--e0); margin-bottom: 3px; font-weight: 400; }

/* Pseudo */
.pseudo-wrap { margin-bottom: 20px; }
.pseudo-wrap label { display: block; font-family: var(--fm); font-size: 0.56rem; letter-spacing: 0.18em; color: var(--e4); margin-bottom: 6px; }
.pseudo-input { width: 100%; max-width: 280px; padding: 10px 12px; border: 1px solid var(--p3); font-family: var(--fc); font-style: italic; font-size: 1rem; color: var(--e0); background: var(--p1); outline: none; transition: border-color 0.2s; }
.pseudo-input:focus { border-color: var(--e0); }

.btn-start { padding: 12px 32px; background: var(--e0); color: var(--p1); border: none; font-family: var(--fd); font-size: 0.85rem; letter-spacing: 0.15em; cursor: pointer; transition: background 0.2s; }
.btn-start:hover { background: var(--r); }
.pseudo-error { font-family: var(--fm); font-size: 0.58rem; color: var(--r); letter-spacing: 0.1em; margin-top: 6px; display: none; }

/* ── Résultat ── */
.quiz-result { display: none; padding: 32px 20px; text-align: center; }
.quiz-result.show { display: block; }
.result-header { margin-bottom: 20px; }
.result-score { font-family: var(--fd); font-size: 4rem; color: var(--r); line-height: 1; }
.result-total { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--e4); margin-bottom: 6px; }
.result-infos { display: flex; justify-content: center; gap: 24px; margin-bottom: 12px; }
.result-info { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--e4); }
.result-info strong { color: var(--e0); }
.result-msg { font-family: var(--fc); font-style: italic; font-size: 0.95rem; color: var(--e2); line-height: 1.7; margin-bottom: 20px; }
.result-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; text-align: left; }
.result-item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--p3); background: var(--p1); }
.ri-ok { font-family: var(--fm); font-size: 0.7rem; color: #107830; flex-shrink: 0; }
.ri-ko { font-family: var(--fm); font-size: 0.7rem; color: #b82010; flex-shrink: 0; }
.ri-nom { font-family: var(--fc); font-style: italic; font-size: 0.85rem; color: var(--e1); flex: 1; }
.ri-bad { font-family: var(--fm); font-size: 0.5rem; letter-spacing: 0.06em; color: var(--e4); white-space: nowrap; }
.btn-replay { padding: 11px 28px; background: var(--e0); color: var(--p1); border: none; font-family: var(--fd); font-size: 0.8rem; letter-spacing: 0.15em; cursor: pointer; transition: background 0.2s; }
.btn-replay:hover { background: var(--r); }

/* ── Leaderboard ── */
.leaderboard { background: white; border: 1px solid var(--p3); padding: 0; box-shadow: 0 2px 12px rgba(26,18,8,0.06); }
.lb-title { font-family: var(--fd); font-size: 0.88rem; letter-spacing: 0.12em; color: var(--e0); padding: 16px 18px 12px; border-bottom: 1px solid var(--p3); display: flex; align-items: center; gap: 8px; }
.lb-empty { padding: 24px; text-align: center; font-family: var(--fc); font-style: italic; color: var(--e4); font-size: 0.88rem; }
.lb-row { display: grid; grid-template-columns: 28px 1fr 40px 60px; gap: 8px; align-items: center; padding: 9px 18px; border-bottom: 1px dotted var(--p3); transition: background 0.15s; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--p1); }
.lb-row.highlight { background: rgba(184,32,16,0.04); }
.lb-rank { font-family: var(--fm); font-size: 0.58rem; color: var(--e4); text-align: center; }
.lb-rank.gold   { color: #b8820a; font-weight: bold; }
.lb-rank.silver { color: #808080; font-weight: bold; }
.lb-rank.bronze { color: #a05030; font-weight: bold; }
.lb-pseudo { font-family: var(--fc); font-style: italic; font-size: 0.88rem; color: var(--e1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--fm); font-size: 0.62rem; color: var(--e0); text-align: center; font-weight: 400; }
.lb-time { font-family: var(--fm); font-size: 0.52rem; color: var(--e4); text-align: right; letter-spacing: 0.05em; }
.lb-header { display: grid; grid-template-columns: 28px 1fr 40px 60px; gap: 8px; padding: 6px 18px; background: var(--p2); }
.lb-header span { font-family: var(--fm); font-size: 0.48rem; letter-spacing: 0.15em; color: var(--e4); }

/* Empty */
.quiz-empty { text-align: center; padding: 48px 24px; font-family: var(--fc); font-style: italic; color: var(--e4); font-size: 1rem; }


/* ══ ressources.php ══ */
.ressources-wrap { max-width: 760px; margin: 0 auto; padding: 48px 40px 80px; }
@media(max-width: 600px) { .ressources-wrap { padding: 32px 20px 60px; } }

.ressources-cat { margin-bottom: 40px; }
.ressources-cat-title {
  font-family: var(--fd); font-size: 0.88rem; letter-spacing: 0.15em;
  color: var(--e0); margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--p3);
  display: flex; align-items: center; gap: 10px;
}

.link-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: var(--p1); border: 1px solid var(--p3);
  text-decoration: none; transition: all 0.2s; margin-bottom: 8px;
}
.link-card:hover { border-color: var(--e3); background: var(--p0); transform: translateX(3px); }
.link-info { flex: 1; min-width: 0; }
.link-title {
  font-family: var(--fd); font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--e0); margin-bottom: 4px; line-height: 1.3;
}
.link-desc {
  font-family: var(--fc); font-style: italic; font-size: 0.88rem;
  color: var(--e3); line-height: 1.6; margin-bottom: 4px;
}
.link-domain {
  font-family: var(--fm); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--e4);
}
.link-arrow {
  font-family: var(--fm); font-size: 0.75rem; color: var(--e4); flex-shrink: 0;
  transition: color 0.2s;
}
.link-card:hover .link-arrow { color: var(--e0); }


/* ══ statistiques.php ══ */
.stats-wrap { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
@media(max-width:500px){ .kpi-grid { grid-template-columns: 1fr 1fr; } }
.kpi-card { background: var(--p1); border: 1px solid var(--p3); padding: 16px 12px; text-align: center; position: relative; overflow: hidden; }
.kpi-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }
.kpi-blue::after  { background: var(--b); }
.kpi-red::after   { background: var(--r); }
.kpi-or::after    { background: var(--or); }
.kpi-n { font-family: var(--fd); font-size: 2rem; color: var(--e0); line-height: 1; display: block; margin-bottom: 5px; }
.kpi-l { font-family: var(--fm); font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--e4); }

/* Sections */
.stat-section { margin-bottom: 36px; }
.stat-title { font-family: var(--fd); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--e0); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.stat-title::after { content: ''; flex: 1; height: 1px; background: var(--p3); }
.stat-sub { font-family: var(--fm); font-size: 0.48rem; letter-spacing: 0.15em; color: var(--e4); margin-bottom: 16px; }

/* Barres */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-item { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.bar-header { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.bar-label { font-family: var(--fm); font-size: 0.52rem; letter-spacing: 0.05em; color: var(--e2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.bar-val { font-family: var(--fm); font-size: 0.52rem; color: var(--e3); flex-shrink: 0; }
.bar-track { background: var(--p2); height: 10px; width: 100%; display: block; }
.bar-fill { height: 10px; display: block; transition: width 0.6s ease; min-width: 2px; }
.bar-val { font-family: var(--fm); font-size: 0.52rem; color: var(--e3); }

/* Histogramme rareté */
.rarete-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rarete-item { text-align: center; }
.rarete-bar-wrap { height: 70px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 5px; }
.rarete-bar-inner { width: 32px; min-height: 3px; }
.rarete-nb { font-family: var(--fd); font-size: 0.9rem; color: var(--e0); }
.rarete-lbl { font-family: var(--fm); font-size: 0.38rem; letter-spacing: 0.06em; color: var(--e4); line-height: 1.4; margin-top: 2px; }

/* Top fiches */
.top-list { display: flex; flex-direction: column; gap: 6px; }
.top-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--p1); border: 1px solid var(--p3); text-decoration: none; color: inherit; transition: background 0.15s; }
.top-item:hover { background: var(--p2); }
.top-rank { font-family: var(--fd); font-size: 1.1rem; color: var(--p4); width: 20px; flex-shrink: 0; text-align: center; }
.top-rank.gold   { color: #c8a040; }
.top-rank.silver { color: #909090; }
.top-rank.bronze { color: #a06830; }
.top-img { width: 48px; height: 38px; object-fit: contain; background: var(--p2); flex-shrink: 0; padding: 2px; }
.top-info { flex: 1; min-width: 0; }
.top-nom { font-family: var(--fs); font-style: italic; font-size: 0.85rem; color: var(--e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-meta { font-family: var(--fm); font-size: 0.44rem; color: var(--e4); margin-top: 2px; }
.top-score { font-family: var(--fm); font-size: 0.55rem; flex-shrink: 0; }
.top-score.notes { color: var(--r); }
.top-score.vues  { color: var(--b); }


/* ══ tags.php ══ */
.tags-page { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
@media(max-width:768px){ .tags-page { grid-template-columns: 1fr; } }

/* Sidebar */
.tags-sidebar { }

/* Section label */
.ts-label { font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.22em; color: var(--e4); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ts-label::after { content: ''; flex: 1; height: 1px; background: var(--p3); }

/* Mode filtre */
.mode-toggle { display: flex; border: 1px solid var(--p3); overflow: hidden; margin-bottom: 8px; }
.mode-btn { flex: 1; padding: 8px; font-family: var(--fd); font-size: 0.62rem; letter-spacing: 0.12em; background: transparent; border: none; color: var(--e4); cursor: pointer; transition: all 0.2s; }
.mode-btn.active { background: var(--e0); color: var(--p1); }
.mode-info { font-family: var(--fc); font-style: italic; font-size: 0.75rem; color: var(--e4); margin-bottom: 16px; line-height: 1.5; }

/* Tags spéciaux */
.special-tags { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.special-tag { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--p1); border: 1px solid var(--p3); cursor: pointer; transition: all 0.15s; user-select: none; }
.special-tag:hover { border-color: var(--e2); background: var(--p2); }
.special-tag.active { background: var(--e0); border-color: var(--e0); }
.st-emoji { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }
.st-label { font-family: var(--fd); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--e0); margin-bottom: 2px; }
.special-tag.active .st-label { color: var(--p1); }
.st-desc { font-family: var(--fc); font-style: italic; font-size: 0.72rem; color: var(--e3); line-height: 1.4; }
.special-tag.active .st-desc { color: var(--e4); }

/* Séparateur */
.ts-sep { height: 1px; background: var(--p3); margin: 14px 0; }

/* Tags libres */
.tags-search { width: 100%; padding: 7px 10px; background: var(--p1); border: 1px solid var(--p3); font-family: var(--fs); font-style: italic; font-size: 0.88rem; color: var(--e0); outline: none; transition: border-color 0.2s; margin-bottom: 5px; }
.tags-search:focus { border-color: var(--e0); }
.tags-search::placeholder { color: var(--p4); }
.tags-search-count { font-family: var(--fm); font-size: 0.44rem; letter-spacing: 0.1em; color: var(--e4); margin-bottom: 6px; min-height: 14px; }
.tags-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--p3) transparent; margin-bottom: 10px; }
.tags-list::-webkit-scrollbar { width: 3px; }
.tags-list::-webkit-scrollbar-thumb { background: var(--p3); }
.tag-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--p1); border: 1px solid var(--p3); cursor: pointer; transition: all 0.15s; user-select: none; }
.tag-item:hover { border-color: var(--e2); background: var(--p2); }
.tag-item.active { background: var(--e0); border-color: var(--e0); }
.tag-item.hidden { display: none; }
.tag-label { font-family: var(--fm); font-size: 0.54rem; letter-spacing: 0.06em; color: var(--e2); }
.tag-item.active .tag-label { color: var(--p2); }
.tag-n { font-family: var(--fs); font-style: italic; font-size: 0.9rem; color: var(--or); flex-shrink: 0; }
.tag-item.active .tag-n { color: var(--p3); }
.tags-reset { width: 100%; padding: 7px; border: 1px solid var(--p3); background: transparent; font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.12em; color: var(--e4); cursor: pointer; transition: all 0.2s; }
.tags-reset:hover { border-color: var(--r); color: var(--r); }

/* Résultats */
.results-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--p3); }
.results-title { font-family: var(--fd); font-size: 1rem; letter-spacing: 0.1em; color: var(--e0); }
.results-count { font-family: var(--fm); font-size: 0.48rem; letter-spacing: 0.18em; color: var(--e4); }

/* Pills actifs */
.active-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.active-pill { display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: var(--fm); font-size: 0.46rem; letter-spacing: 0.08em; background: var(--e0); color: var(--p2); }
.active-pill .rm { color: var(--e4); cursor: pointer; font-size: 0.5rem; transition: color 0.15s; }
.active-pill .rm:hover { color: var(--r); }

/* Grille fiches */
.fiche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
@media(max-width:768px){ .fiche-grid { grid-template-columns: 1fr 1fr; } }
.tcard { background: var(--p1); border: 1px solid var(--p3); overflow: hidden; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; }
.tcard:hover { border-color: var(--p4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(100,70,20,0.1); }
.tcard img { width: 100%; height: 110px; object-fit: cover; filter: sepia(0.08); display: block; transition: filter 0.3s; }
.tcard:hover img { filter: sepia(0); }
.tcard-body { padding: 8px 10px; }
.tcard-nom { font-family: var(--fs); font-style: italic; font-size: 0.82rem; color: var(--e0); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-cat { font-family: var(--fm); font-size: 0.4rem; letter-spacing: 0.1em; color: var(--e4); margin-bottom: 5px; }
.tcard-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.ttag { font-family: var(--fm); font-size: 0.4rem; padding: 1px 5px; border: 1px solid var(--p3); color: var(--e4); background: var(--p0); }
.ttag.match { background: var(--e0); border-color: var(--e0); color: var(--p2); }

.tags-empty { padding: 3rem 2rem; text-align: center; font-family: var(--fs); font-style: italic; font-size: 1rem; color: var(--e4); border: 1px dashed var(--p3); }