/* =========================================================================
   LYCÉE ALIGURAN — FORUM
   Complète style.css : mêmes couleurs, mêmes polices, mêmes boutons.
   Toutes les classes du forum commencent par « f- ».
   ========================================================================= */

.forum {
  --f-ligne: #E9E4DA;
  --f-carte: #FFFFFF;
  --f-encre: var(--vert-nuit);
  --f-doux: #6F6A5D;
  --f-marine-pale: #E8EDF6;
  --f-orange-pale: #FDECDF;
  --f-or-pale: #F6EEDC;
  --f-rayon: 14px;
  background: var(--creme);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  color: var(--f-encre);
}
.forum a { text-underline-offset: .18em; }
.forum :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* -------------------------------------------------------------------------
   1. EN-TÊTE : une page de cahier (lignes bleues, marge rouge)
   ------------------------------------------------------------------------- */
.f-entete {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  background-color: #FFFEFB;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(22, 48, 92, .07) 31px 32px);
  border-bottom: 1px solid var(--f-ligne);
  overflow: hidden;
}
.f-entete::before {                           /* la marge du cahier */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: max(1rem, calc((100vw - 1320px) / 2 + .25rem));
  width: 2px;
  background: rgba(214, 90, 70, .35);
}
.f-entete__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.f-entete__texte { padding-left: clamp(.75rem, 2vw, 1.5rem); }
.f-entete .eyebrow { margin-bottom: .6rem; }
.f-entete__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.12;
  margin: 0 0 .5rem;
  color: var(--vert-nuit);
  text-wrap: balance;
}
.f-entete__devise {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
  color: var(--orange-fonce);
  margin: 0 0 .9rem;
}
.f-entete__intro { max-width: 40rem; color: var(--f-doux); margin: 0 0 1.5rem; line-height: 1.7; }
.f-entete__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.f-entete--court { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.f-entete--court .conteneur { padding-left: clamp(1.75rem, 3vw, 2.75rem); }
.f-entete--court .f-entete__intro { margin-bottom: 0; }

/* Carte « Votre accès » */
.f-session {
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--ombre-carte);
}
.f-session__titre { font-family: var(--police-corps); font-size: 1.02rem; font-weight: 700; margin: 0 0 .4rem; }
.f-session__qui { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.f-session__nom { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; }
.f-session__note { font-size: .9rem; color: var(--f-doux); margin: 0 0 1rem; line-height: 1.55; }
.f-session__attente {
  display: flex; gap: .5rem; align-items: center;
  font-size: .88rem; font-weight: 600; color: #7A5312;
  background: #FDF3E3; border-radius: 10px; padding: .55rem .75rem; margin: 0 0 1rem;
}
.f-session__bouton { width: 100%; }
.f-session__aide { font-size: .82rem; color: var(--f-doux); margin: .75rem 0 0; text-align: center; }
.f-session__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; border-top: 1px solid var(--f-ligne); padding-top: .85rem; }
.f-session__liens a, .f-session__liens button {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--vert-foret);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.f-session__liens a:hover, .f-session__liens button:hover { color: var(--orange-fonce); }
.f-session__liens form { margin: 0; }

/* -------------------------------------------------------------------------
   2. PERSONNES : pastilles et rôles
   ------------------------------------------------------------------------- */
.f-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem; letter-spacing: .02em;
  background: #ECE9E2; color: #5C574B;
}
.f-avatar--grand { width: 50px; height: 50px; font-size: 1rem; }
.f-avatar--tres-grand { width: 72px; height: 72px; font-size: 1.4rem; }
.f-avatar--eleve          { background: var(--f-orange-pale); color: #A9541A; }
.f-avatar--enseignant     { background: var(--vert-pale); color: var(--vert-foret); }
.f-avatar--parent         { background: var(--f-or-pale); color: #7A5A12; }
.f-avatar--administration { background: var(--marine); color: #fff; }

.f-role {
  display: inline-block;
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  padding: 0 .5rem; border-radius: 999px;
  background: #ECE9E2; color: #5C574B;
  vertical-align: middle;
}
.f-role--eleve          { background: var(--f-orange-pale); color: #A9541A; }
.f-role--enseignant     { background: var(--vert-pale); color: var(--vert-foret); }
.f-role--parent         { background: var(--f-or-pale); color: #7A5A12; }
.f-role--administration { background: var(--f-marine-pale); color: var(--marine); }

/* Badges d'état */
.f-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; line-height: 1;
  padding: .32rem .55rem; border-radius: 6px;
  background: #EFEDE8; color: #5C574B;
  vertical-align: middle;
}
.f-badge i { font-size: .78rem; }
.f-badge--epingle { background: #FFF1E4; color: #B35A16; }
.f-badge--officiel { background: var(--marine); color: #fff; }
.f-badge--resolu  { background: var(--vert-pale); color: var(--vert-foret); }

.f-sep { color: var(--taupe-clair); }
.f-lien {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9rem; color: var(--vert-foret); text-decoration: none;
}
.f-lien:hover { color: var(--orange-fonce); }

/* -------------------------------------------------------------------------
   3. CATÉGORIES
   ------------------------------------------------------------------------- */
.f-categories { padding-block: clamp(1.75rem, 3vw, 2.5rem) .5rem; }
.f-titre-bloc {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .35rem 1rem; margin-bottom: 1rem;
}
.f-titre-bloc h2 { font-family: var(--police-titre); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); margin: 0; }
.f-compteur { font-size: .88rem; color: var(--f-doux); }

.f-categories__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem;
}
.f-cat {
  height: 100%;
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.05rem;
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  color: inherit; text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.f-cat:hover { border-color: var(--taupe-clair); box-shadow: var(--ombre-carte); transform: translateY(-1px); color: inherit; }
.f-cat__icone {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-pale); color: var(--vert-foret); font-size: 1.15rem;
}
.f-cat__corps { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.f-cat__nom { font-weight: 700; font-size: .98rem; line-height: 1.3; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.f-cat__desc { font-size: .82rem; color: var(--f-doux); line-height: 1.45; }
.f-cat__compte { font-size: .76rem; color: var(--taupe); margin-top: .2rem; }
.f-cat--active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 135, 60, .14); }
.f-cat--officielle { background: linear-gradient(180deg, #F3F6FB, #fff 70%); border-color: #CDD7E8; }
.f-cat--officielle .f-cat__icone { background: var(--marine); color: #fff; }

/* -------------------------------------------------------------------------
   4. LISTE DES DISCUSSIONS
   ------------------------------------------------------------------------- */
.f-corps { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.f-corps__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

/* Recherche et tri */
.f-outils { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .85rem; }
.f-recherche {
  flex: 1 1 320px;
  display: flex; align-items: center; gap: .5rem;
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: 12px;
  padding: .35rem .35rem .35rem .95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.f-recherche:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 135, 60, .14); }
.f-recherche > i { color: var(--taupe); }
.f-recherche input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: .95rem; color: var(--f-encre); padding: .5rem 0;
}
.forum .f-recherche input:focus-visible { outline: none; }
.f-recherche__effacer { color: var(--taupe); padding: .35rem; display: inline-flex; }
.f-recherche__bouton {
  font: inherit; font-size: .88rem; font-weight: 600;
  border: 0; border-radius: 9px; padding: .6rem 1rem; cursor: pointer;
  background: var(--vert-foret); color: #fff;
}
.f-recherche__bouton:hover { background: var(--vert-fonce); }
.f-tri { display: flex; flex-direction: column; gap: .25rem; }
.f-tri label { font-size: .76rem; font-weight: 600; color: var(--f-doux); }
.f-tri select {
  font: inherit; font-size: .9rem; color: var(--f-encre);
  border: 1px solid var(--f-ligne); border-radius: 10px; background: var(--f-carte);
  padding: .62rem 2.2rem .62rem .8rem; cursor: pointer;
}

/* Filtres en onglets */
.f-filtres {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 1rem; padding-bottom: .15rem;
}
.f-filtres::-webkit-scrollbar { display: none; }
.f-filtres a {
  flex: 0 0 auto;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: .86rem; font-weight: 600; text-decoration: none;
  color: var(--f-doux); border: 1px solid transparent;
}
.f-filtres a:hover { color: var(--f-encre); background: rgba(32, 40, 31, .04); }
.f-filtres a.actif { background: var(--vert-nuit); color: #fff; }

.f-liste {
  list-style: none; margin: 0; padding: 0;
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  overflow: hidden;
}
.f-sujet {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-top: 1px solid var(--f-ligne);
  transition: background var(--transition);
}
.f-sujet:first-child { border-top: 0; }
.f-sujet:hover { background: #FDFCF8; }
.f-sujet--epingle { background: #FFFBF5; }
.f-sujet--epingle::before,
.f-sujet--officiel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange);
}
.f-sujet--officiel::before { background: var(--marine); }
.f-sujet__corps { min-width: 0; }
.f-sujet__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.f-sujet__badges:empty { display: none; }
.f-sujet__titre { font-family: var(--police-corps); font-size: 1.04rem; font-weight: 700; line-height: 1.4; margin: 0 0 .25rem; }
.f-sujet__titre a { color: var(--f-encre); text-decoration: none; }
.f-sujet__titre a::after { content: ""; position: absolute; inset: 0; }     /* toute la ligne est cliquable */
.f-sujet__titre a:hover { color: var(--vert-foret); text-decoration: underline; }
.f-sujet__extrait {
  font-size: .9rem; color: var(--f-doux); margin: 0 0 .45rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.f-sujet__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem;
  font-size: .8rem; color: var(--taupe); margin: 0;
}
.f-sujet__auteur { font-weight: 600; color: #4D4A41; }
.f-sujet__cat { position: relative; z-index: 1; color: var(--vert-foret); text-decoration: none; font-weight: 600; display: inline-flex; gap: .3rem; }
.f-sujet__cat:hover { color: var(--orange-fonce); }
.f-sujet__chiffres { display: flex; gap: 1.1rem; margin: 0; align-self: center; text-align: center; }
.f-sujet__chiffres div { min-width: 3.4rem; }
.f-sujet__chiffres dt { font-size: .7rem; color: var(--taupe); text-transform: uppercase; letter-spacing: .06em; order: 2; }
.f-sujet__chiffres dd { margin: 0 0 .1rem; font-weight: 700; font-size: 1.05rem; color: var(--f-encre); }
.f-sujet__chiffres div { display: flex; flex-direction: column-reverse; }
.f-sujet__activite { min-width: 6.5rem !important; }
.f-sujet__activite dd { font-size: .8rem; font-weight: 600; color: var(--f-doux); padding-top: .3rem; }

/* Pagination */
.f-pages { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.f-pages a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--f-ligne);
  background: var(--f-carte); font-weight: 600; font-size: .88rem; color: var(--vert-foret); text-decoration: none;
}
.f-pages a:hover { border-color: var(--orange); color: var(--orange-fonce); }
.f-pages__etat { font-size: .85rem; color: var(--f-doux); }

/* État vide */
.f-vide {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--f-carte);
  border: 1px dashed var(--taupe-clair);
  border-radius: var(--f-rayon);
}
.f-vide > i { font-size: 2.3rem; color: var(--taupe-clair); display: block; margin-bottom: .6rem; }
.f-vide h3 { font-family: var(--police-corps); font-size: 1.08rem; font-weight: 700; margin: 0 0 .3rem; }
.f-vide p { color: var(--f-doux); margin: 0; font-size: .92rem; }
.f-vide__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem !important; }

/* -------------------------------------------------------------------------
   5. COLONNE LATÉRALE
   ------------------------------------------------------------------------- */
.f-cote { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 6.5rem; }
.f-boite {
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  padding: 1.2rem 1.25rem;
}
.f-boite h2 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--police-corps); font-size: .98rem; font-weight: 700; margin: 0 0 .75rem;
}
.f-boite h2 i { color: var(--orange); }
.f-boite p { font-size: .88rem; color: var(--f-doux); line-height: 1.6; margin: 0; }
.f-boite__vide { font-size: .86rem !important; }
.f-boite--bienvenue { background: var(--vert-foret); border-color: var(--vert-foret); }
.f-boite--bienvenue h2, .f-boite--bienvenue h2 i { color: #fff; }
.f-boite--bienvenue p { color: rgba(255, 255, 255, .86); }
.f-boite--moderation { border-color: #CDD7E8; background: #F7F9FC; }
.f-boite--moderation h2 i { color: var(--marine); }

.f-populaires { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.f-populaires li { padding: .55rem 0; border-top: 1px solid var(--f-ligne); font-size: .88rem; line-height: 1.4; }
.f-populaires li:first-child { border-top: 0; padding-top: 0; }
.f-populaires a { color: var(--f-encre); font-weight: 600; text-decoration: none; display: block; }
.f-populaires a:hover { color: var(--vert-foret); text-decoration: underline; }
.f-populaires span { font-size: .76rem; color: var(--taupe); }

.f-regles-courtes, .f-conseils { list-style: none; margin: 0 0 .9rem; padding: 0; }
.f-regles-courtes li, .f-conseils li {
  position: relative; padding-left: 1.3rem; margin-bottom: .45rem;
  font-size: .87rem; color: var(--f-doux); line-height: 1.5;
}
.f-regles-courtes li::before, .f-conseils li::before {
  content: ""; position: absolute; left: .2rem; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
}
.f-conseils strong { color: var(--f-encre); }
.f-conseils--code code { background: #F3F0E8; border-radius: 4px; padding: .05rem .3rem; font-size: .82rem; color: var(--f-encre); }

.f-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; text-align: center; }
.f-stats div { background: var(--creme); border-radius: 10px; padding: .6rem .3rem; display: flex; flex-direction: column-reverse; }
.f-stats dt { font-size: .72rem; color: var(--f-doux); line-height: 1.3; }
.f-stats dd { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: 1.35rem; color: var(--vert-foret); }
.f-stats__note { font-size: .74rem !important; margin-top: .6rem !important; color: var(--taupe) !important; }

.f-retour {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .9rem; color: var(--vert-foret); text-decoration: none; padding: .3rem .1rem;
}
.f-retour:hover { color: var(--orange-fonce); }

/* -------------------------------------------------------------------------
   6. UNE DISCUSSION
   ------------------------------------------------------------------------- */
.f-discussion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.f-discussion__principal { min-width: 0; max-width: 54rem; }
.f-discussion__tete { margin-bottom: 1.25rem; }
.f-discussion__cat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  color: var(--vert-foret); background: var(--vert-pale);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.f-discussion__cat--officielle { background: var(--marine); color: #fff; }
.f-discussion__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem);
  line-height: 1.2; margin: 0 0 .7rem; text-wrap: balance;
}
.f-discussion__meta { font-size: .85rem; color: var(--taupe); margin: .6rem 0 0; }

.f-message {
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  padding: 1.15rem 1.3rem 1rem;
  margin-bottom: .85rem;
  scroll-margin-top: 7rem;
}
.f-message--origine { padding: 1.5rem 1.6rem 1.2rem; box-shadow: var(--ombre-carte); margin-bottom: 2rem; }
.f-message--enseignant { border-left: 3px solid var(--vert-foret); }
.f-message--en_attente { border-style: dashed; border-color: #E8C98E; background: #FFFCF5; }
.f-message--masque, .f-message--refuse { opacity: .78; border-style: dashed; }
.f-message:target { box-shadow: 0 0 0 3px rgba(240, 135, 60, .25); }
.f-message__tete { display: flex; gap: .75rem; align-items: center; margin-bottom: .8rem; }
.f-message__auteur { font-weight: 700; margin-right: .3rem; }
.f-message__date { display: block; font-size: .8rem; color: var(--taupe); margin-top: .15rem; }
.f-message__date a { color: inherit; text-decoration: none; }
.f-message__date a:hover { text-decoration: underline; }
.f-message__texte { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.f-message__texte p { margin: 0 0 .85rem; }
.f-message__texte p:last-child, .f-message__texte ul:last-child { margin-bottom: 0; }
.f-message__texte ul { margin: 0 0 .85rem; padding-left: 1.25rem; }
.f-message__texte li { margin-bottom: .25rem; }
.f-message__texte a { color: var(--vert-foret); font-weight: 500; }
.f-message__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem;
  margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--f-ligne);
}

.f-etat {
  display: flex; gap: .5rem; align-items: center;
  font-size: .86rem; font-weight: 600;
  border-radius: 10px; padding: .55rem .8rem; margin: 0 0 .8rem;
}
.f-etat--attente { background: #FDF3E3; color: #7A5312; }
.f-etat--refuse  { background: #FBE9E7; color: #8C2A17; }
.f-etat--masque  { background: #EFEDE8; color: #5C574B; }

/* Boutons d'action discrets */
.f-action-form { display: inline; margin: 0; }
.f-action {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--f-doux); background: none; border: 0; border-radius: 8px;
  padding: .45rem .6rem; cursor: pointer; text-decoration: none;
  min-height: 36px;
}
.f-action:hover { background: rgba(32, 40, 31, .05); color: var(--f-encre); }
.f-action--danger:hover { background: #FBE9E7; color: #8C2A17; }
.f-action--ok { color: var(--vert-foret); }
.f-action--bloc {
  width: 100%; justify-content: flex-start;
  border: 1px solid var(--f-ligne); background: var(--f-carte);
  padding: .6rem .8rem; margin-top: .45rem; color: var(--f-encre);
}
.f-action--bloc.f-action--ok { border-color: #BFD9CB; background: var(--vert-pale); color: var(--vert-foret); }
.f-moderation .f-action-form { display: block; }

/* Signaler (repliable, fonctionne sans JavaScript) */
.f-signaler { margin-left: auto; }
.f-signaler summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--taupe);
  padding: .45rem .6rem; border-radius: 8px; min-height: 36px;
}
.f-signaler summary::-webkit-details-marker { display: none; }
.f-signaler summary:hover { background: rgba(32, 40, 31, .05); color: #8C2A17; }
.f-signaler[open] { flex-basis: 100%; margin-left: 0; }
.f-signaler__form {
  margin-top: .5rem; padding: 1rem; border-radius: 12px;
  background: #FBF9F4; border: 1px solid var(--f-ligne);
}
.f-signaler__form fieldset { border: 0; margin: 0 0 .75rem; padding: 0; }
.f-signaler__form legend { font-weight: 700; font-size: .9rem; margin-bottom: .45rem; }
.f-signaler__form textarea { width: 100%; margin-bottom: .75rem; }

/* Pièce jointe */
.f-piece {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1rem; padding: .7rem .95rem;
  border: 1px solid var(--f-ligne); border-radius: 12px;
  color: var(--f-encre); text-decoration: none; background: #FBF9F4;
}
.f-piece > i { font-size: 1.5rem; color: #C2410C; }
.f-piece span { display: flex; flex-direction: column; font-weight: 600; font-size: .9rem; }
.f-piece small { font-weight: 400; color: var(--taupe); font-size: .78rem; }
.f-piece:hover { border-color: var(--orange); }
.f-piece--image { display: block; padding: 0; background: none; border: 0; margin: 1.1rem 0 0; }
.f-piece--image img { max-width: 100%; max-height: 520px; width: auto; border-radius: 12px; border: 1px solid var(--f-ligne); }
.f-piece--image figcaption { font-size: .78rem; color: var(--taupe); margin-top: .4rem; display: flex; gap: .35rem; }

.f-reponses__titre { font-family: var(--police-titre); font-size: 1.3rem; margin: 0 0 1rem; }
.f-reponses__vide { color: var(--f-doux); font-size: .95rem; padding: 1rem 0 .5rem; margin: 0; }
.f-repondre { margin-top: 2rem; }
.f-repondre__titre { font-family: var(--police-titre); font-size: 1.25rem; margin: 0 0 .8rem; }

.f-info {
  display: flex; gap: .6rem; align-items: center;
  background: var(--f-carte); border: 1px solid var(--f-ligne); border-radius: 12px;
  padding: .9rem 1.1rem; color: var(--f-doux); font-size: .92rem; margin: 0;
}
.f-invitation {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--f-carte); border: 1px solid var(--f-ligne); border-radius: var(--f-rayon);
  padding: 1.25rem 1.4rem;
}
.f-invitation > i { font-size: 1.8rem; color: var(--orange); }
.f-invitation div { flex: 1 1 220px; }
.f-invitation h2 { font-family: var(--police-corps); font-size: 1.02rem; font-weight: 700; margin: 0 0 .15rem; }
.f-invitation p { margin: 0; font-size: .9rem; color: var(--f-doux); }

.f-apropos { margin: 0; }
.f-apropos div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--f-ligne); font-size: .86rem; }
.f-apropos div:first-child { border-top: 0; padding-top: 0; }
.f-apropos dt { color: var(--taupe); }
.f-apropos dd { margin: 0; font-weight: 600; text-align: right; }

/* -------------------------------------------------------------------------
   7. FORMULAIRES
   ------------------------------------------------------------------------- */
.f-form { display: block; }
.f-carte-form {
  background: var(--f-carte);
  border: 1px solid var(--f-ligne);
  border-radius: var(--f-rayon);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: var(--ombre-carte);
}
.f-carte-form h2 { font-family: var(--police-titre); font-size: 1.3rem; margin: 0 0 .6rem; }
.f-champ { margin-bottom: 1.3rem; }
.f-champ__label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .4rem; }
.f-obligatoire { color: var(--orange-fonce); }
.f-facultatif { font-weight: 400; color: var(--taupe); }
.forum input[type="text"], .forum input[type="password"],
.forum select, .forum textarea {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--f-encre);
  background: #fff;
  border: 1px solid #D9D3C7; border-radius: 10px;
  padding: .72rem .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.forum .f-tri select { width: auto; }
.forum textarea { line-height: 1.65; resize: vertical; min-height: 7rem; }
.forum input:focus, .forum select:focus, .forum textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 135, 60, .15);
}
.f-champ__aide { font-size: .82rem; color: var(--f-doux); margin: .4rem 0 0; line-height: 1.5; }
.f-champ__erreur { font-size: .84rem; font-weight: 600; color: #B3341C; margin: .4rem 0 0; }
.f-champ--erreur input, .f-champ--erreur select, .f-champ--erreur textarea, .f-champ--erreur .f-editeur { border-color: #D2614A; }
.f-champ__compteur { font-size: .76rem; color: var(--taupe); text-align: right; margin-top: .3rem; }
.f-champ__compteur--limite { color: #B3341C; font-weight: 600; }

/* Éditeur : barre d'outils au-dessus du champ */
.f-editeur { border: 1px solid #D9D3C7; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.f-editeur:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 135, 60, .15); }
.forum .f-editeur textarea { border: 0; border-radius: 0; box-shadow: none; }
.f-editeur__outils { display: flex; gap: .15rem; padding: .35rem .45rem; border-bottom: 1px solid var(--f-ligne); background: #FBF9F4; }
.f-editeur__outils button {
  width: 36px; height: 34px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  color: #4D4A41; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.f-editeur__outils button:hover { background: #fff; color: var(--orange-fonce); }

.f-depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  padding: 1.15rem; border: 2px dashed #D9D3C7; border-radius: 12px; background: #FDFCF9;
  cursor: pointer; text-align: center; transition: border-color var(--transition), background var(--transition);
}
.f-depot:hover, .f-depot--choisi { border-color: var(--orange); background: #FFF8F1; }
.f-depot > i { font-size: 1.6rem; color: var(--orange); }
.f-depot span { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.f-depot small { color: var(--taupe); font-size: .78rem; }
.f-depot__champ { position: absolute; width: 1px; height: 1px; opacity: 0; }
.f-depot__champ:focus-visible + .f-champ__aide, .f-depot__champ:focus-visible { outline: none; }
.f-depot:has(+ .f-depot__champ:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.f-piece-actuelle { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .9rem; margin: 0 0 .6rem; }

.f-options { border: 1px solid #CDD7E8; background: #F7F9FC; border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.3rem; }
.f-options legend { font-weight: 700; font-size: .88rem; color: var(--marine); padding: 0 .3rem; }
.f-choix { display: flex; gap: .55rem; align-items: center; font-size: .92rem; margin: .3rem 0; cursor: pointer; }
.f-choix input { width: 18px; height: 18px; accent-color: var(--vert-foret); flex: 0 0 auto; }

.f-form__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.f-form__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .3rem; }
.f-form__note { display: flex; gap: .45rem; align-items: center; font-size: .84rem; color: var(--f-doux); margin: 0; }
.f-form--compact { margin-bottom: .2rem; }
.f-form--compact .f-form__actions { margin-top: .75rem; }

.f-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .94rem; font-weight: 600; line-height: 1.2;
  padding: .8rem 1.35rem; min-height: 46px;
  border-radius: 10px; border: 2px solid var(--orange);
  background: var(--orange); color: #fff; cursor: pointer; text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.f-bouton:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); color: #fff; transform: translateY(-1px); }
.f-bouton[disabled] { opacity: .6; cursor: progress; transform: none; }
.f-bouton--ligne { background: transparent; color: var(--vert-foret); border-color: var(--taupe-clair); }
.f-bouton--ligne:hover { background: transparent; color: var(--orange-fonce); border-color: var(--orange); }
.f-bouton--petit { padding: .55rem 1rem; min-height: 40px; font-size: .86rem; }
.f-bouton--large { width: 100%; margin-top: .3rem; }

.f-mdp { position: relative; }
.forum .f-mdp input { padding-right: 3rem; }
.f-mdp__voir {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: none; border-radius: 8px;
  color: var(--taupe); cursor: pointer; font-size: 1.05rem;
}
.f-mdp__voir:hover { color: var(--f-encre); }

/* Rédaction d'une discussion */
.f-redaction {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start; padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.f-redaction__principal { min-width: 0; max-width: 50rem; }
.f-redaction__titre { font-family: var(--police-titre); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin: .4rem 0 .4rem; }
.f-redaction__intro { color: var(--f-doux); margin: 0 0 1.4rem; }

/* Connexion */
.f-connexion { max-width: 30rem; padding-top: clamp(2rem, 5vw, 3.5rem); }
.f-connexion__carte {
  background: var(--f-carte); border: 1px solid var(--f-ligne); border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--ombre-relief);
}
.f-connexion__icone {
  width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-pale); color: var(--vert-foret); font-size: 1.5rem; margin-bottom: .9rem;
}
.f-connexion__carte h1 { font-family: var(--police-titre); font-size: 1.65rem; margin: 0 0 .35rem; }
.f-connexion__intro { color: var(--f-doux); margin: 0 0 1.4rem; font-size: .95rem; }
.f-connexion__aide { display: flex; gap: .5rem; font-size: .84rem; color: var(--f-doux); margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--f-ligne); }
.f-connexion__retour { margin: 1.25rem 0 0; text-align: center; }
.f-connexion__retour a { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; font-size: .9rem; color: var(--vert-foret); text-decoration: none; }

/* Mon compte */
.f-compte { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.f-compte__tete { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.75rem; }
.f-compte__tete h1 { font-family: var(--police-titre); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin: .2rem 0 .3rem; }
.f-compte__tete p { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.f-compte__ident { font-size: .86rem; color: var(--f-doux); }
.f-compte__grille { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.f-mes__liste { list-style: none; margin: 0; padding: 0; }
.f-mes__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .75rem 0; border-top: 1px solid var(--f-ligne); }
.f-mes__liste li:first-child { border-top: 0; padding-top: 0; }
.f-mes__liste a { grid-column: 1; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.f-mes__genre { font-size: .72rem; color: var(--taupe); text-transform: uppercase; letter-spacing: .06em; }
.f-mes__titre { font-weight: 700; font-size: .92rem; }
.f-mes__liste a:hover .f-mes__titre { color: var(--vert-foret); text-decoration: underline; }
.f-mes__extrait { font-size: .82rem; color: var(--f-doux); }
.f-mes__etat { grid-column: 2; grid-row: 1; align-self: start; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.f-mes__etat--publie { background: var(--vert-pale); color: var(--vert-foret); }
.f-mes__etat--attente { background: #FDF3E3; color: #7A5312; }
.f-mes__etat--refuse { background: #FBE9E7; color: #8C2A17; }
.f-mes__etat--masque { background: #EFEDE8; color: #5C574B; }
.f-mes__motif { grid-column: 1 / -1; font-size: .8rem; color: #8C2A17; }
.f-mes__liste time { grid-column: 2; font-size: .76rem; color: var(--taupe); text-align: right; }

/* Règles */
.f-regles { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.f-regles__liste { list-style: none; margin: 0; padding: 0; counter-reset: regle; }
.f-regle {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--f-carte); border: 1px solid var(--f-ligne); border-radius: var(--f-rayon);
  padding: 1.25rem 1.35rem; margin-bottom: .85rem; counter-increment: regle;
}
.f-regle__icone {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-pale); color: var(--vert-foret); font-size: 1.25rem;
}
.f-regle__icone::after {
  content: counter(regle); position: absolute; right: -6px; top: -6px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.f-regle h2 { font-family: var(--police-corps); font-size: 1.04rem; font-weight: 700; margin: .1rem 0 .3rem; }
.f-regle p { margin: 0; color: var(--f-doux); font-size: .94rem; line-height: 1.65; }
.f-regles__moderation { position: sticky; top: 6.5rem; }

/* Fenêtre de confirmation */
.f-dialogue {
  border: 0; border-radius: 16px; padding: 0; max-width: min(92vw, 26rem); width: 100%;
  box-shadow: 0 24px 60px rgba(13, 31, 61, .28); color: var(--f-encre);
}
.f-dialogue::backdrop { background: rgba(32, 40, 31, .45); }
.f-dialogue__corps { padding: 1.5rem 1.5rem 1.25rem; }
.f-dialogue__corps h2 { font-family: var(--police-corps); font-size: 1.08rem; font-weight: 700; margin: 0 0 .5rem; display: flex; gap: .55rem; align-items: center; }
.f-dialogue__corps h2 i { color: #C2410C; }
.f-dialogue__corps p { margin: 0; color: var(--f-doux); line-height: 1.6; font-size: .95rem; }
.f-dialogue__actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 0 1.5rem 1.4rem; flex-wrap: wrap; }
.f-bouton--danger { background: #B3341C; border-color: #B3341C; }
.f-bouton--danger:hover { background: #8C2A17; border-color: #8C2A17; }

/* -------------------------------------------------------------------------
   8. TABLETTE ET TÉLÉPHONE
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .f-categories__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .f-entete__grille,
  .f-corps__grille,
  .f-discussion,
  .f-redaction,
  .f-regles,
  .f-compte__grille { grid-template-columns: minmax(0, 1fr); }
  .f-cote, .f-regles__moderation { position: static; }
  .f-corps__grille .f-cote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-discussion__principal, .f-redaction__principal { max-width: none; }
  .f-session { max-width: 32rem; }
  .f-entete__texte { padding-left: .75rem; }
}

@media (max-width: 767.98px) {
  /* Catégories : un ruban que l'on fait défiler du doigt */
  .f-categories__liste {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .7rem; margin-inline: calc(50% - 50vw); padding: .15rem calc(50vw - 50% + .1rem) .6rem;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }
  .f-categories__liste::-webkit-scrollbar { display: none; }
  /* Les points de séparation se retrouvent en début de ligne quand la ligne se coupe */
  .f-sujet__meta { column-gap: .8rem; }
  .f-sujet__meta .f-sep { display: none; }
  .f-categories__liste li { flex: 0 0 min(78vw, 270px); scroll-snap-align: start; }

  .f-sujet { grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: 1rem; }
  .f-sujet__chiffres {
    grid-column: 2; display: flex; gap: .9rem; justify-content: flex-start; text-align: left;
    padding-top: .55rem; border-top: 1px dashed var(--f-ligne);
  }
  .f-sujet__chiffres div { min-width: 0; flex-direction: row; gap: .3rem; align-items: baseline; }
  .f-sujet__chiffres dt { order: 2; text-transform: none; letter-spacing: 0; font-size: .78rem; }
  .f-sujet__chiffres dd { font-size: .9rem; margin: 0; }
  .f-sujet__activite { min-width: 0 !important; margin-left: auto; }
  .f-sujet__activite dt { display: none; }
  .f-sujet__activite dd { padding-top: 0; font-size: .78rem; }
  .f-avatar { width: 38px; height: 38px; font-size: .8rem; }

  .f-corps__grille .f-cote { grid-template-columns: minmax(0, 1fr); }
  .f-outils { flex-direction: column; align-items: stretch; }
  .f-recherche { flex-basis: auto; }
  .f-tri { flex-direction: row; align-items: center; gap: .6rem; }
  .f-tri label { white-space: nowrap; }
  .forum .f-tri select { flex: 1; }
  .f-recherche__bouton { padding: .6rem .8rem; }

  .f-message, .f-message--origine { padding: 1rem 1.05rem .9rem; }
  .f-form__actions, .f-form__pied { flex-direction: column-reverse; align-items: stretch; }
  .f-form__actions .f-bouton, .f-form__pied .f-bouton { width: 100%; }
  .f-entete__actions .btn-aliguran, .f-entete__actions .btn-aliguran-ligne { width: 100%; }
  .f-invitation .btn-aliguran-vert { width: 100%; }
  .f-compte__tete { align-items: flex-start; }
  .f-mes__liste li { grid-template-columns: minmax(0, 1fr); }
  .f-mes__etat, .f-mes__liste time { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
}

@media (max-width: 420px) {
  .f-recherche__bouton { display: none; }
  .f-message__actions { gap: .1rem; }
  .f-action { padding: .45rem .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .f-cat, .f-bouton, .f-sujet { transition: none; }
  .f-cat:hover, .f-bouton:hover { transform: none; }
}