@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");

/* Surcharges CSS spécifiques à forum-animal, par-dessus styles.css repris d'animal-perdu */

/* ------------------------------------------------------------------
   Design "fil épuré" (maquettes design-ref/index_desktop & index_mobile)
   Composants partagés par les pages qui listent des discussions
   (index.php, search.php...).
   ------------------------------------------------------------------ */

:root {
  --forum-font: Figtree, "Roboto", system-ui, sans-serif;
  --forum-surface: #ffffff;
  --forum-border: #e3e7ea;
  --forum-separator: #edf0f2;
  --forum-border-strong: #c9d1d5;
  --forum-text: #1f2f38;
  --forum-text-soft: #4f5d65;
  --forum-text-muted: #5b6870;
  --forum-chip-bg: #f1f3f4;
  --forum-chip-text: #33424a;
  --forum-radius: 14px;
  --forum-radius-sm: 10px;
}

/* sous 576px le menu principal est une barre fixe en bas d'écran (65px de
   haut, cf. #main-menu dans styles.css) : on réserve sa hauteur sous le
   contenu, sinon le dernier élément de la page passe dessous. La marge est
   portée par body et non par main : les utilitaires d'espacement de
   bootstrap (py-4, pb-5) sont en !important et l'écraseraient. */
@media (max-width: 575.98px) {
  body {
    padding-bottom: 80px;
  }
}

/* boutons --------------------------------------------------------- */

a.forum-btn-primary, a.forum-btn-outline,
button.forum-btn-primary, button.forum-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--forum-radius-sm);
  font-family: var(--forum-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

a.forum-btn-primary, button.forum-btn-primary {
  background-color: var(--color-primary-deep);
  border: 1px solid var(--color-primary-deep);
  color: #fff;
}

a.forum-btn-primary:hover, a.forum-btn-primary:focus,
button.forum-btn-primary:hover, button.forum-btn-primary:focus {
  filter: brightness(0.92);
  color: #fff;
  text-decoration: none;
}

a.forum-btn-outline, button.forum-btn-outline {
  padding: 0 22px;
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border-strong);
  color: var(--color-primary-deep);
}

a.forum-btn-outline:hover, a.forum-btn-outline:focus,
button.forum-btn-outline:hover, button.forum-btn-outline:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
  text-decoration: none;
}

/* variante en gélule (bouton de publication d'un message) */
a.forum-btn-pill, button.forum-btn-pill {
  padding: 0 20px;
  border-radius: 999px;
}

/* mise en page des pages de listes de discussions ------------------ */
/* (index.php, search.php) : bandeau/colonne de navigation puis fil.
   Sur mobile : titre, navigation, fil. Sur desktop : navigation à
   gauche, titre et fil à droite. */

.forum-layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  /* minmax(0, 1fr) : sans cela le bandeau de catégories scrollable
     élargirait la colonne au-delà de la largeur de l'écran */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "nav"
    "list"
    "more";
}

/* la zone "A la une" n'est déclarée que si elle est remplie,
   sinon elle laisserait une gouttière vide dans la grille */
.forum-layout.has-top {
  grid-template-areas:
    "head"
    "nav"
    "top"
    "list"
    "more";
}

@media (min-width: 768px) {
  .forum-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 2rem;
    grid-template-areas:
      "nav head"
      "nav list"
      "nav more";
  }

  .forum-layout.has-top {
    grid-template-areas:
      "nav head"
      "nav top"
      "nav list"
      "nav more";
  }
}

.forum-head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.forum-head h1 {
  margin: 0;
  font-family: var(--forum-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--forum-text);
}

@media (min-width: 768px) {
  .forum-head h1 {
    font-size: 28px;
  }
}

.forum-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.forum-layout .category-nav, .forum-layout .forum-side {
  grid-area: nav;
  min-width: 0;
}

.forum-top {
  grid-area: top;
}

.forum-list {
  grid-area: list;
}

.forum-more {
  grid-area: more;
  display: flex;
  justify-content: center;
}

/* pagination ------------------------------------------------------- */
/* les liens reprennent l'accent du site plutôt que le bleu par défaut de
   bootstrap, la page courante et les bornes inactives restent grises
   (maquettes design-ref/discussion_desktop_v2 & discussion_mobile_v2) */

.pagination .page-link {
  color: var(--color-primary-deep);
  font-weight: 600;
}

.pagination .page-link:hover, .pagination .page-link:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
}

.pagination .page-item.disabled .page-link {
  color: #8a969c;
  font-weight: 400;
}

.pagination .page-item.page-item-current .page-link {
  color: var(--forum-chip-text);
  font-weight: 600;
}

/* titre de section ------------------------------------------------ */

.forum-section-title {
  margin: 0 0 12px;
  font-family: var(--forum-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--forum-text);
}

/* pastilles (auteur, catégorie, race, département...) -------------- */

.forum-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--forum-chip-bg);
  color: var(--forum-chip-text);
  font-family: var(--forum-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

a.forum-chip {
  color: var(--forum-chip-text);
}

a.forum-chip:hover, a.forum-chip:focus {
  background-color: #e7eaec;
  color: var(--forum-text);
  text-decoration: none;
}

.forum-chip-accent {
  padding-left: 7px;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
  font-weight: 600;
}

a.forum-chip-accent {
  color: var(--color-primary-soft-text);
}

a.forum-chip-accent:hover, a.forum-chip-accent:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
}

.forum-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  background-color: var(--forum-chip-text);
}

/* navigation par catégories --------------------------------------- */
/* colonne de gauche sur desktop, bandeau scrollable sur mobile */

.category-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--forum-font);
}

.category-nav-title {
  padding: 0 12px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forum-text-muted);
}

a.category-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--forum-radius-sm);
  color: var(--forum-chip-text);
  font-size: 15px;
  text-decoration: none;
}

a.category-nav-item:hover, a.category-nav-item:focus {
  background-color: var(--forum-chip-bg);
  color: var(--forum-text);
  text-decoration: none;
}

a.category-nav-item.active {
  min-height: 44px;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
  font-weight: 600;
}

.category-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

@media (max-width: 767.98px) {
  .category-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    /* le bandeau déborde jusqu'aux bords de l'écran */
    margin: 0 -15px;
    padding: 0 15px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .category-nav-title {
    display: none;
  }

  a.category-nav-item {
    flex: none;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dfe4e7;
    border-radius: 999px;
    background-color: var(--forum-surface);
    font-size: 14px;
    white-space: nowrap;
  }

  a.category-nav-item.active {
    min-height: 40px;
    border-color: transparent;
    background-color: var(--color-primary-deep);
    color: #fff;
  }
}

/* liste de discussions -------------------------------------------- */

.discussion-list {
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: var(--forum-radius);
  overflow: hidden;
  font-family: var(--forum-font);
  color: var(--forum-text);
}

.discussion-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-areas:
    "author  date"
    "title   title"
    "excerpt excerpt"
    "tags    replies";
  column-gap: 12px;
  row-gap: 6px;
  padding: 16px;
  border-bottom: 1px solid var(--forum-separator);
}

/* sur mobile l'auteur et les tags sont deux lignes distinctes de la grille,
   sur desktop ils forment une même ligne de pastilles */
.discussion-meta {
  display: contents;
}

.discussion-item:last-child {
  border-bottom: 0;
}

.discussion-item:hover {
  background-color: #fafbfc;
}

/* l'avatar n'est affiché que sur les messages d'un fil (views/message.php),
   jamais dans les listes de discussions ; le personnage est montré en entier,
   donc sans recadrage (les avatars sont générés en 80x120). Un membre sans
   avatar occupe la même place, vide, pour que les bulles restent alignées */
.discussion-avatar {
  align-self: start;
  display: block;
  width: 40px;
  height: auto;
  aspect-ratio: 2 / 3;
  flex: none;
  object-fit: contain;
}

/* l'emplacement vide ne réserve que la largeur, jamais de hauteur */
span.discussion-avatar {
  height: 0;
  aspect-ratio: auto;
}

.discussion-author {
  grid-area: author;
  justify-self: start;
}

.discussion-date {
  grid-area: date;
  justify-self: end;
  align-self: center;
  font-size: 13px;
  color: var(--forum-text-muted);
  white-space: nowrap;
}

.discussion-title {
  grid-area: title;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

a.discussion-title-link {
  color: var(--forum-text);
  text-decoration: none;
}

a.discussion-title-link:hover, a.discussion-title-link:focus {
  color: var(--color-primary-deep);
  text-decoration: none;
}

.discussion-excerpt {
  grid-area: excerpt;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--forum-text-soft);
  /* l'extrait est tronqué visuellement après quelques lignes */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.discussion-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* reste cliquable par-dessus le lien étendu du titre */
  position: relative;
  z-index: 2;
}

.discussion-replies {
  grid-area: replies;
  justify-self: end;
  /* reste aligné sur la première ligne de pastilles quand celles-ci passent à la ligne */
  align-self: start;
  padding-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forum-chip-text);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .discussion-item {
    grid-template-columns: minmax(0, 1fr) 120px;
    grid-template-areas:
      "title   replies"
      "meta    date"
      "excerpt .";
    column-gap: 16px;
    row-gap: 8px;
    padding: 20px;
  }

  .discussion-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* les pastilles restent cliquables par-dessus le lien étendu du titre */
    position: relative;
    z-index: 2;
  }

  .discussion-avatar {
    width: 44px;
  }

  .discussion-date, .discussion-replies {
    align-self: start;
    text-align: right;
  }

  .discussion-replies {
    font-size: 14px;
  }

  .forum-chip {
    font-size: 13px;
  }

  .discussion-excerpt {
    font-size: 15px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ------------------------------------------------------------------
   Page d'une discussion (maquettes design-ref/discussion_desktop
   & discussion_mobile) : en-tête du sujet puis fil de messages
   en bulles (discussion.php, views/message.php).
   ------------------------------------------------------------------ */

/* la maquette cadre le fil sur une largeur de lecture confortable */
.discussion-page {
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--forum-font);
  color: var(--forum-text);
}

/* sur mobile la maquette remplace le fil d'Ariane par un simple retour au parent */
a.forum-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-deep);
  text-decoration: none;
}

a.forum-back:hover, a.forum-back:focus {
  color: var(--color-primary-deep);
}

/* la maquette pose le fil sur un fond blanc, pour que les bulles grises s'en
   détachent, alors que le fond de page du site est lui-même gris */
.discussion-panel {
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
  /* le bandeau de modération s'étend d'un bord à l'autre de la carte */
  overflow: hidden;
}

.discussion-panel-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 16px 15px 24px;
}

/* la colonne pose déjà l'écart entre les blocs : la marge basse par défaut
   des alertes bootstrap s'y ajouterait */
.discussion-panel-body > .alert {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  /* le fil s'étend jusqu'aux bords de l'écran */
  .discussion-panel {
    margin: 0 -15px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  .discussion-panel-body {
    gap: 1.5rem;
    padding: 28px;
  }
}

/* en-tête du sujet ------------------------------------------------- */

.discussion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--forum-border);
}

.discussion-header-main {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discussion-name {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--forum-text);
}

.discussion-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--forum-text-muted);
}

.discussion-header-meta strong {
  color: var(--forum-chip-text);
}

@media (min-width: 768px) {
  /* le point de séparation de la maquette, porté par le nombre de messages
     pour qu'il ne reste pas seul en bout de ligne quand la ligne se replie */
  .discussion-header-count::before {
    content: "·";
    margin-right: 10px;
  }
}

@media (min-width: 768px) {
  .discussion-header {
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 24px;
  }

  .discussion-name {
    font-size: 34px;
  }

  .discussion-header-meta {
    gap: 10px;
    font-size: 14px;
  }
}

/* actions de modération -------------------------------------------- */
/* un bandeau ambré au sommet de la carte de la discussion, mobile comme
   desktop : le libellé à gauche, les actions à droite, qui se replient
   sur plusieurs lignes quand elles sont nombreuses */

.moderation-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 15px;
  background-color: #fff3e2;
  border-bottom: 1px solid #f1dfc6;
  font-size: 13px;
  color: #6e3b0e;
}

/* bandeau seul dans sa carte (discussion non consultable) */
.moderation-bar:last-child {
  border-bottom: 0;
}

.moderation-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-weight: 700;
}

a.moderation-btn, button.moderation-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  background-color: var(--forum-surface);
  border: 1px solid #e2c49e;
  border-radius: 6px;
  font-family: var(--forum-font);
  font-size: 13px;
  font-weight: 600;
  color: #6e3b0e;
  text-decoration: none;
  cursor: pointer;
}

a.moderation-btn:hover, a.moderation-btn:focus {
  background-color: #fdf1e0;
  color: #6e3b0e;
  text-decoration: none;
}

a.moderation-btn-danger {
  border-color: #e8b9b9;
  color: #a33a3a;
}

a.moderation-btn-danger:hover, a.moderation-btn-danger:focus {
  background-color: #fbe9e9;
  color: #a33a3a;
}

@media (min-width: 768px) {
  .moderation-bar {
    padding: 8px 28px;
  }

  a.moderation-btn, button.moderation-btn {
    height: 32px;
  }
}

/* fil de messages -------------------------------------------------- */

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  gap: 10px;
  /* le message ciblé par une ancre ne se colle pas au bord de l'écran */
  scroll-margin-top: 1rem;
}

.message-bubble {
  flex: 1;
  min-width: 0;
  /* au-delà, les lignes deviennent trop longues à lire */
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 14px 14px;
  background-color: #f4f5f6;
  border-radius: 4px 16px 16px 16px;
}

.message-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.message-author {
  font-size: 14px;
  font-weight: 700;
}

.message-date {
  font-size: 12px;
  color: var(--forum-text-muted);
}

a.message-delete {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #a33a3a;
  font-size: 17px;
}

a.message-delete:hover, a.message-delete:focus {
  background-color: #fbe9e9;
  color: #a33a3a;
  text-decoration: none;
}

.message-body {
  font-size: 15px;
  line-height: 1.6;
  color: #26343c;
  /* une URL collée ne doit pas élargir la bulle */
  overflow-wrap: break-word;
}

/* les images importées dans un message peuvent être très grandes */
.message-body img {
  max-width: 100%;
  height: auto;
}

/* formulaire de réponse -------------------------------------------- */
/* il reprend l'alignement et la forme d'une bulle de message */

.message-form {
  display: flex;
  gap: 10px;
}

.message-form-main {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-form-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.message-form-main textarea.form-control {
  height: auto;
  padding: 12px 14px;
  border: 1px solid #cfd8db;
  border-radius: 4px 16px 16px 16px;
  font-size: 16px;
  resize: vertical;
}

/* les codes de mise en forme : un encart d'aide, sous le bouton de publication */
.message-form-note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background-color: var(--forum-chip-bg);
  border: 1px solid var(--forum-separator);
  border-radius: var(--forum-radius-sm);
  font-size: 12px;
  line-height: 1.6;
  color: var(--forum-text-muted);
}

/* min-width : sans cela le texte ne peut pas être plus étroit que son contenu
   et débordera de l'encart. overflow-wrap : les codes d'exemple contiennent
   une URL d'un seul tenant, qui doit pouvoir être coupée (mobile) */
.message-form-note > div {
  min-width: 0;
  overflow-wrap: break-word;
}

.message-form-note > .bi {
  /* l'icône reste sur la première ligne du texte, sans se compresser */
  flex: none;
  color: var(--color-primary-deep);
  font-size: 14px;
  line-height: 1.4;
}

/* les deux actions du formulaire, groupées sur une même barre : le bouton
   "Importer des images" injecté par upload.js (cf le <script> de la page)
   puis le bouton de publication */
.message-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* sur mobile l'import garde sa propre ligne, aligné à droite, et laisse
   toute la largeur au bouton de publication.
   le sélecteur est préfixé du nom de la balise : la feuille de style
   injectée par upload.js vise la même classe et, posée après la nôtre
   dans le document, l'emporterait à spécificité égale */
span.message-form-upload {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.message-form-actions > .forum-btn-primary {
  flex: 1 1 auto;
  min-height: 48px;
}

@media (min-width: 768px) {
  .message-thread {
    gap: 20px;
  }

  .message {
    gap: 14px;
  }

  .message-bubble {
    gap: 8px;
    padding: 14px 18px 16px;
    border-radius: 4px 18px 18px 18px;
  }

  .message-author {
    font-size: 15px;
  }

  .message-date {
    font-size: 13px;
  }

  .message-body {
    font-size: 16px;
    line-height: 1.65;
  }

  .message-form {
    gap: 14px;
  }

  .message-form-label {
    font-size: 15px;
  }

  .message-form-main textarea.form-control {
    padding: 14px 18px;
    border-radius: 4px 18px 18px 18px;
  }

  /* les deux boutons tiennent sur une seule ligne, au bas du formulaire */
  .message-form-actions {
    justify-content: flex-end;
  }

  span.message-form-upload {
    flex: 0 0 auto;
  }

  .message-form-actions > .forum-btn-primary {
    flex: 0 0 auto;
    min-height: 44px;
  }
}

/* ------------------------------------------------------------------
   Formulaire de création d'une discussion (discussion_new.php) :
   la même carte que la page d'une discussion, les champs qui qualifient
   le sujet puis la zone de rédaction du formulaire de réponse.
   ------------------------------------------------------------------ */

.discussion-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* les champs qui qualifient la discussion : une colonne sur mobile,
   deux sur desktop, pour que le formulaire reste visible d'un seul coup d'œil */
.discussion-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.discussion-form-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* les libellés sont des questions, de hauteur inégale d'une colonne à
     l'autre : les champs restent alignés en bas de ligne */
  justify-content: flex-end;
  gap: 6px;
}

.discussion-form-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

/* les champs reprennent la bordure et la hauteur des boutons du forum */
.discussion-form select.form-control,
.discussion-form input.form-control {
  height: 44px;
  border: 1px solid #cfd8db;
  border-radius: var(--forum-radius-sm);
  /* 16px : en dessous, les navigateurs mobiles zooment sur le champ actif */
  font-size: 16px;
  color: var(--forum-text);
}

/* les options de la discussion (alerte e-mail, discussion privée) :
   un encart discret, comme la note d'aide du formulaire de réponse */
.discussion-form-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background-color: var(--forum-chip-bg);
  border: 1px solid var(--forum-separator);
  border-radius: var(--forum-radius-sm);
  font-size: 14px;
  color: var(--forum-text-soft);
}

.discussion-form-options .form-check {
  margin: 0;
}

/* la zone de rédaction occupe toute la largeur de la carte, alors que dans
   le fil d'une discussion elle s'aligne sur la largeur d'une bulle */
.discussion-form .message-form-main {
  max-width: none;
}

@media (min-width: 768px) {
  .discussion-form {
    gap: 1.5rem;
  }

  .discussion-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /* le titre de la discussion s'étend sur les deux colonnes */
  .discussion-form-field-wide {
    grid-column: 1 / -1;
  }

  /* le titre est limité à 50 caractères : le champ n'a pas besoin
     de toute la largeur de la carte */
  .discussion-form input#discussion_name {
    max-width: 50ch;
  }

  .discussion-form-label {
    font-size: 15px;
  }
}


/* Le bouton "Plus..." (offcanvas) porte un libellé texte sur forum-animal,
   contrairement au bouton icône seul d'animal-perdu : on le fait matcher
   le style icône + libellé empilés des autres items du menu (#main-menu .navbar-nav .nav-link). */
#main-menu .navbar-toggler {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

#main-menu .navbar-toggler .menu-icon {
  font-size: 1.7rem;
  height: 37px;
}

@media (min-width: 576px) {
  #main-menu .navbar-toggler {
    font-size: 1rem;
  }

  #main-menu .navbar-toggler .menu-icon {
    font-size: 1.2rem;
    height: 25px;
  }
}

/* fil d'Ariane ----------------------------------------------------- */
/* styles.css impose une puce décimale à tous les <li> d'un <ol>,
   et Bootstrap sépare les items par un "/" : on reprend la maquette */

.forum-breadcrumb {
  font-family: var(--forum-font);
  font-size: 14px;
  color: var(--forum-text-muted);
}

.forum-breadcrumb .breadcrumb-item {
  list-style: none;
}

.forum-breadcrumb a {
  color: var(--color-primary-deep);
  font-weight: 500;
}

.forum-breadcrumb .breadcrumb-item.active {
  color: var(--forum-text);
  font-weight: 600;
}

.forum-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A"; /* chevron simple */
  color: var(--forum-text-muted);
}

/* ------------------------------------------------------------------
   Espace perso (maquettes design-ref/compte_desktop & compte_mobile)
   Sur mobile : profil, menu en liste de cartes, puis les discussions.
   Sur desktop : menu en colonne de gauche, contenu à droite.
   ------------------------------------------------------------------ */

.account-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "profile"
    "menu"
    "topics";
  font-family: var(--forum-font);
  color: var(--forum-text);
}

/* les autres pages de l'espace perso (avatar, options...) : titre, contenu,
   puis le menu qui ne sert plus qu'à aller ailleurs */
.account-layout-page {
  grid-template-areas:
    "head"
    "content"
    "menu";
}

/* sur les sous-pages le menu est masqué sur mobile (fil d'ariane pour naviguer) :
   on retire sa ligne de la grille, sinon elle laisse un écart sous le contenu */
@media (max-width: 767.98px) {
  .account-layout-page:has(> .account-menu.d-none) {
    grid-template-areas:
      "head"
      "content";
  }
}

@media (min-width: 768px) {
  .account-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 2rem;
    row-gap: 1.25rem;
    grid-template-areas:
      "menu profile"
      "menu topics";
  }

  .account-layout-page {
    /* sans cela, un menu plus haut que le contenu étire la ligne du titre */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "menu head"
      "menu content";
  }
}

.account-head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.account-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--forum-text);
}

.account-content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* bloc de contenu de l'espace perso (texte, formulaire...) */
.account-card {
  padding: 18px;
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
}

.account-card > :last-child {
  margin-bottom: 0;
}

/* note explicative sous une liste (légende des cloches d'alerte...) */
.account-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--forum-text-muted);
}

/* page Avatar : aperçu du personnage adopté */
.account-avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--forum-radius);
  background-color: #f4f5f6;
  font-size: 14px;
  font-weight: 600;
  color: var(--forum-text-muted);
}

.account-avatar-preview img {
  border-radius: var(--forum-radius-sm);
  background-color: var(--forum-surface);
}

@media (min-width: 768px) {
  .account-head h1 {
    font-size: 28px;
  }

  .account-card {
    padding: 24px;
  }
}

/* menu de l'espace perso ------------------------------------------ */
/* mobile : grandes lignes cliquables dans une carte
   desktop : colonne de navigation compacte */

.account-menu {
  grid-area: menu;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
  overflow: hidden;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid var(--forum-separator);
  color: var(--forum-text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.account-menu-item:last-child {
  border-bottom: 0;
}

/* styles.css colore tous les liens : on repasse par un sélecteur de même poids */
a.account-menu-item {
  color: var(--forum-text);
}

a.account-menu-item:hover, a.account-menu-item:focus {
  background-color: #fafbfc;
  color: var(--forum-text);
  text-decoration: none;
}

.account-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--forum-radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 18px;
  line-height: 1;
}

.account-menu-chevron {
  margin-left: auto;
  color: #8a969c;
}

.account-menu-item-admin .account-menu-icon {
  background-color: #fdecd8;
  color: #8a4b12;
}

a.account-menu-item-danger,
a.account-menu-item-danger:hover, a.account-menu-item-danger:focus {
  color: #a33a3a;
}

.account-menu-item-danger .account-menu-icon {
  background-color: #fbe9e9;
  color: #a33a3a;
}

/* la ligne de séparation du menu n'est utile que sur desktop,
   sur mobile les lignes de la carte sont déjà séparées */
.account-menu-separator {
  display: none;
}

@media (min-width: 768px) {
  .account-menu {
    gap: 4px;
    padding: 10px;
    border-radius: var(--forum-radius);
  }

  .account-menu-item, a.account-menu-item {
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 0;
    border-radius: var(--forum-radius-sm);
    color: var(--forum-chip-text);
    font-size: 15px;
    font-weight: 500;
  }

  a.account-menu-item-danger {
    color: #a33a3a;
  }

  .account-menu-item.active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
    font-weight: 600;
  }

  .account-menu-icon,
  .account-menu-item-admin .account-menu-icon,
  .account-menu-item-danger .account-menu-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
  }

  .account-menu-chevron {
    display: none;
  }

  .account-menu-separator {
    display: block;
    height: 1px;
    margin: 6px 4px;
    background-color: var(--forum-separator);
  }
}

/* carte de profil -------------------------------------------------- */
/* mobile : une seule carte contenant l'identité et les compteurs
   desktop : une carte d'identité puis deux cartes de compteurs */

.account-profile {
  grid-area: profile;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
}

.account-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* le personnage est montré en entier, donc sans recadrage ni pastille ronde
   (les avatars sont générés en 80x120), comme dans un fil de messages */
.account-avatar {
  display: block;
  width: 56px;
  height: auto;
  aspect-ratio: 2 / 3;
  flex: none;
  object-fit: contain;
}

.account-profile-identity {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-profile-identity h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--forum-text);
}

.account-profile-since {
  font-size: 13px;
  color: var(--forum-text-muted);
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: var(--forum-radius-sm);
  background-color: #f4f5f6;
}

.account-stat-value {
  font-size: 20px;
  font-weight: 800;
}

.account-stat-label {
  font-size: 12px;
  color: var(--forum-text-muted);
}

@media (min-width: 768px) {
  /* la carte éclate en plusieurs cartes : identité d'un côté, compteurs de l'autre */
  .account-profile {
    gap: 16px;
    padding: 0;
    background-color: transparent;
    border: 0;
  }

  .account-profile-head {
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px;
    background-color: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: 16px;
  }

  .account-avatar {
    width: 64px;
  }

  .account-profile-identity h1 {
    font-size: 26px;
  }

  .account-profile-since {
    font-size: 15px;
  }

  .account-stats {
    gap: 16px;
  }

  .account-stat {
    /* le libellé passe au-dessus de la valeur */
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 4px;
    padding: 18px 20px;
    background-color: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
  }

  .account-stat-value {
    font-size: 30px;
  }

  .account-stat-label {
    font-size: 14px;
    font-weight: 500;
  }
}

/* dernières discussions du membre ---------------------------------- */
/* mobile : titre au-dessus de la carte
   desktop : titre dans l'en-tête de la carte */

.account-topics {
  grid-area: topics;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-topics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-topics-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--forum-text);
}

a.account-topics-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: none;
  white-space: nowrap;
}

a.account-topics-all:hover, a.account-topics-all:focus {
  color: var(--color-primary-deep);
  text-decoration: underline;
}

.account-topics-list {
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
  overflow: hidden;
}

.account-topics-empty {
  margin: 0;
  padding: 16px;
  font-size: 15px;
  color: var(--forum-text-muted);
}

/* une ligne est soit entièrement cliquable (<a>), soit un conteneur portant
   un lien étendu et une action secondaire (<div>, cf account/discussions.php) */
.account-topic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--forum-separator);
}

.account-topic:last-child {
  border-bottom: 0;
}

.account-topic:hover {
  background-color: #fafbfc;
}

a.account-topic {
  color: var(--forum-text);
  text-decoration: none;
}

a.account-topic:hover, a.account-topic:focus {
  color: var(--forum-text);
  text-decoration: none;
}

a.account-topic-title-link {
  color: var(--forum-text);
  text-decoration: none;
}

a.account-topic-title-link:hover, a.account-topic-title-link:focus {
  color: var(--color-primary-deep);
  text-decoration: none;
}

/* reste cliquable par-dessus le lien étendu du titre */
.account-topic-action {
  position: relative;
  z-index: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--forum-radius-sm);
  font-size: 18px;
}

a.account-topic-action {
  color: var(--color-primary-deep);
}

a.account-topic-action:hover, a.account-topic-action:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
  text-decoration: none;
}

.account-topic-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-topic-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.account-topic-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--forum-text-muted);
}

.account-topic-replies {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--forum-chip-text);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .account-topics {
    gap: 0;
    background-color: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: 16px;
    overflow: hidden;
  }

  /* dans le tableau de bord, le titre et la liste sont deux parties d'une
     même carte : la liste perd son propre cadre */
  .account-topics .account-topics-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--forum-separator);
  }

  .account-topics .account-topics-list {
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }

  .account-topics-empty {
    padding: 18px 20px;
  }

  .account-topic {
    gap: 14px;
    padding: 16px 20px;
  }

  .account-topic-title {
    font-size: 16px;
  }

  .account-topic-meta {
    font-size: 13px;
  }

  .account-topic-replies {
    font-size: 14px;
  }
}

/* formulaires simples (connexion, inscription, mot de passe, invitation...) :
   pleine largeur sur mobile, largeur de lecture confortable sur grand écran */
.forum-form {
  max-width: 560px;
}

/* champ de saisie du code à usage unique : 6 chiffres seulement */
.forum-form-otp {
  max-width: 11rem;
}

/* carte de statut (pages d'erreur, désabonnement...) : une carte centrée,
   l'icône signale d'un coup d'œil le résultat, puis le message et les actions */
.forum-status-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px;
  background-color: var(--forum-surface);
  border: 1px solid var(--forum-border);
  border-radius: 16px;
  text-align: center;
  font-family: var(--forum-font);
}

.forum-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 30px;
  line-height: 1;
}

.forum-status-icon-error {
  background-color: #fbe9e9;
  color: #a33a3a;
}

/* le code d'erreur HTTP, discret au-dessus du titre */
.forum-status-code {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forum-text-muted);
}

.forum-status-card h1 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--forum-text);
}

.forum-status-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--forum-text-soft);
}

/* les boutons s'empilent sur mobile, côte à côte au-delà */
.forum-status-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 576px) {
  .forum-status-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .forum-status-card {
    margin-top: 2rem;
    padding: 32px;
  }

  .forum-status-card h1 {
    font-size: 26px;
  }
}

/* page Races : pastille de lettre, en HTML/CSS (remplace images/puces_alpha) */
.races-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

a.races-letter {
  color: #fff;
  text-decoration: none;
}

a.races-letter:hover, a.races-letter:focus {
  background-color: var(--color-primary-shade);
  color: #fff;
  text-decoration: none;
}

.races-letter-empty {
  background-color: #e0e0e0;
  color: #9e9e9e;
}

/* barre alphabétique */
#races-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* liste des races, en colonnes qui s'adaptent à la largeur de l'écran */
#races-list {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 576px) {
  #races-list {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  #races-list {
    column-count: 3;
  }
}

@media (min-width: 992px) {
  #races-list {
    column-count: 4;
  }
}

.races-group {
  /* évite qu'un groupe soit coupé entre deux colonnes */
  break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--bs-border-radius);
  background-color: #fff;
  /* la lettre ciblée par une ancre ne se colle pas au bord de l'écran */
  scroll-margin-top: 1rem;
}

.races-group-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.races-group-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.races-group-list li + li {
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------------
   Pied de page (maquette design-ref/footer) : bandeau blanc en
   colonnes, puis la ligne de copyright (views/bottom.php).
   ------------------------------------------------------------------ */

/* styles.css habille le pied de page d'animal-perdu : fond coloré, texte
   blanc et médaillon en surimpression. La maquette le veut blanc et sobre. */
footer.forum-footer {
  margin-top: 48px;
  padding-bottom: 0;
  background-color: var(--forum-surface);
  border-top: 1px solid var(--forum-border);
  font-family: var(--forum-font);
  color: var(--forum-text);
}

footer.forum-footer::before {
  display: none;
}

/* mobile : les blocs s'empilent
   tablette : la marque en bandeau, deux colonnes de liens, puis les catégories
   desktop : les quatre colonnes de la maquette */
.forum-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 15px 0;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "discussions"
    "categories"
    "account";
}

@media (min-width: 576px) {
  .forum-footer-inner {
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "brand       brand"
      "discussions account"
      "categories  categories";
  }
}

@media (min-width: 992px) {
  .forum-footer-inner {
    padding: 48px 24px 0;
    gap: 40px;
    /* les colonnes latérales sont resserrées pour laisser respirer les
       libellés de catégories, qui sinon passent à la ligne */
    grid-template-columns: 210px 165px minmax(0, 1fr) 165px;
    grid-template-areas: "brand discussions categories account";
  }

  /* pages sans catégories (pages d'erreur...) : la colonne ne laisse pas de trou */
  .forum-footer-inner-nocategories {
    grid-template-columns: 250px 190px 190px;
    grid-template-areas: "brand discussions account";
  }
}

/* colonne de marque ------------------------------------------------ */

.forum-footer-brand {
  grid-area: brand;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

a.forum-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  color: var(--forum-text);
  text-decoration: none;
}

a.forum-footer-logo:hover, a.forum-footer-logo:focus {
  color: var(--forum-text);
  text-decoration: none;
}

.forum-footer-baseline {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--forum-text-soft);
}

/* colonnes de liens ------------------------------------------------ */

.forum-footer-nav {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.forum-footer-nav-discussions {
  grid-area: discussions;
}

.forum-footer-nav-categories {
  grid-area: categories;
}

.forum-footer-nav-account {
  grid-area: account;
}

.forum-footer-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forum-text-muted);
}

a.forum-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--forum-chip-text);
  text-decoration: none;
}

a.forum-footer-link:hover, a.forum-footer-link:focus {
  color: var(--color-primary-deep);
  text-decoration: none;
}

/* les catégories sont nombreuses : elles se répartissent en colonnes */
.forum-footer-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

@media (min-width: 576px) {
  .forum-footer-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (min-width: 992px) {
  .forum-footer-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

.forum-footer-categories a.forum-footer-link {
  /* certains noms de catégorie passent à la ligne : la pastille reste
     alignée sur la première ligne plutôt qu'au milieu du bloc */
  align-items: flex-start;
  min-height: 30px;
  padding: 3px 0;
  font-size: 14px;
}

.forum-footer-categories .forum-footer-dot {
  margin-top: 5px;
}

.forum-footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  background-color: var(--forum-chip-text);
}

/* ligne de copyright ----------------------------------------------- */

.forum-footer-legal {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 18px 15px 22px;
  border-top: 1px solid var(--forum-separator);
  font-size: 13px;
  color: var(--forum-text-muted);
}

@media (min-width: 992px) {
  .forum-footer-legal {
    margin-top: 40px;
    padding: 18px 24px 22px;
  }
}