/* Forum ADA — habillage.

   Repris de la maquette du client (15/09) : les memes variables, les memes
   arrondis, le vert de l'association. Ce qui a ete ajoute par rapport a la
   maquette : le telephone (la maquette n'etait qu'en version ordinateur), les
   etats vides, et les ecrans de connexion.

   « Qu'il soit tres joli exactement comme Facebook, la couleur la meme comme
   l'association, quand on pose quelque chose exactement comme Facebook — comme
   ca ca attire le monde, ils vont pas chercher comment ils font les choses. » */

:root{
  --fb-bg:#f0f2f5;
  --fb-bg-doux:#fafbfc;          /* le fond des reponses, a peine plus gris */
  --fb-card-bg:#ffffff;
  --fb-green:#567b1b;            /* vert du logo CampGo */
  --fb-green-hover:#3f5c12;
  --fb-accent-light:#eef5e2;
  --fb-sur-accent:#2b3d0e;   /* texte pose SUR le fond d'accent */
  --fb-text-main:#050505;
  --fb-text-secondary:#65676b;
  --fb-border:#ced0d4;
  --fb-border-doux:#eef0f2;
  --fb-survol:#e2e5e9;           /* survol d'un bouton clair */
  --fb-input-bg:#f0f2f5;
  --fb-rouge:#d97706;            /* l'ambre du site, pour le bouton de don */
  --radius-pill:50px;
  --radius-box:12px;
  --shadow-subtle:0 1px 2px rgba(0,0,0,.1);
  --shadow-modal:0 12px 28px rgba(0,0,0,.2);
  --entete:56px;
  --anim:.18s;
}

/* ===== Thème sombre ===================================================

   « 3. Thème sombre et clair, boutons et animations comme parlow »
   (client, 16/09).

   Tout passe par ces variables — c'est pour ca qu'on a commence par sortir les
   couleurs ecrites en dur du reste de la feuille. Deux regles :

   1. `:root[data-theme]` gagne toujours. C'est le choix EXPLICITE de la
      personne, pose par PHP d'apres un cookie AVANT le premier affichage :
      sans ca la page s'affiche blanche une fraction de seconde puis bascule,
      et ce clignotement est ce qui fait le plus « site pas fini ».
   2. Sans choix explicite, on suit le reglage du telephone
      (`prefers-color-scheme`). Quelqu'un qui a mis son iPhone en sombre
      s'attend a trouver le forum en sombre.

   Le vert de l'association ne devient PAS plus sombre : c'est sa marque. On
   l'eclaircit au contraire, sinon il disparait sur un fond noir. */
:root[data-theme="sombre"]{
  --fb-bg:#18191a;
  --fb-bg-doux:#202224;
  --fb-card-bg:#242526;
  --fb-green:#8aad3e;
  --fb-green-hover:#9dc04a;
  --fb-accent-light:#2f3f16;
  --fb-sur-accent:#cde9a6;
  --fb-text-main:#e4e6eb;
  --fb-text-secondary:#b0b3b8;
  --fb-border:#3a3b3c;
  --fb-border-doux:#303132;
  --fb-survol:#3a3b3c;
  --fb-input-bg:#3a3b3c;
  --shadow-subtle:0 1px 2px rgba(0,0,0,.45);
  --shadow-modal:0 12px 28px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
    --fb-bg:#18191a;
    --fb-bg-doux:#202224;
    --fb-card-bg:#242526;
    --fb-green:#8aad3e;
    --fb-green-hover:#9dc04a;
    --fb-accent-light:#2f3f16;
    --fb-sur-accent:#cde9a6;
    --fb-text-main:#e4e6eb;
    --fb-text-secondary:#b0b3b8;
    --fb-border:#3a3b3c;
    --fb-border-doux:#303132;
    --fb-survol:#3a3b3c;
    --fb-input-bg:#3a3b3c;
    --shadow-subtle:0 1px 2px rgba(0,0,0,.45);
    --shadow-modal:0 12px 28px rgba(0,0,0,.6);
  }
}

/* Les animations, « dans le même esprit que parlow » : discretes, et coupees
   pour qui a demande moins de mouvement dans son systeme — une animation
   imposee donne la nausee a certaines personnes, ce n'est pas une coquetterie. */
.fa-btn,.fa-rub,.fa-carte,.fa-post,.fa-poser-faux,.fa-outil-rond,.fa-apercu{
  transition:background var(--anim) ease, color var(--anim) ease,
             box-shadow var(--anim) ease, transform var(--anim) ease;
}
.fa-btn:active{transform:scale(.97)}
.fa-post:hover{box-shadow:0 2px 10px rgba(0,0,0,.12)}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fb-bg);color:var(--fb-text-main);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fb-green);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}

/* ============================================================ en-tete == */

header.fa-entete{
  position:sticky;top:0;z-index:100;
  height:var(--entete);
  background:var(--fb-card-bg);box-shadow:var(--shadow-subtle);
  display:flex;align-items:center;gap:12px;padding:0 14px;
}
.fa-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--fb-text-main)}
.fa-logo:hover{text-decoration:none}
.fa-logo-rond{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--fb-green);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.8rem;letter-spacing:.04em;
}
.fa-logo-nom{font-size:1.15rem;font-weight:800;white-space:nowrap}

.fa-recherche{
  flex:1 1 auto;max-width:420px;position:relative;
}
.fa-recherche input{
  width:100%;border:0;background:var(--fb-input-bg);
  border-radius:var(--radius-pill);padding:9px 14px 9px 38px;font-size:.92rem;
}
.fa-recherche input:focus{outline:2px solid var(--fb-green);outline-offset:1px}
.fa-recherche::before{
  content:"🔍";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:.85rem;opacity:.6;pointer-events:none;
}

.fa-entete-droite{margin-left:auto;display:flex;align-items:center;gap:8px}

.fa-btn{
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  padding:9px 16px;font-weight:700;font-size:.9rem;
  background:var(--fb-green);color:#fff;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.fa-btn:hover{background:var(--fb-green-hover)}
.fa-btn-clair{background:var(--fb-input-bg);color:var(--fb-text-main)}
.fa-btn-clair:hover{background:var(--fb-survol)}
.fa-btn-rouge{background:var(--fb-rouge)}
/* `#b4530900` : les deux derniers caracteres sont le canal ALPHA, et `00` veut
   dire TOTALEMENT TRANSPARENT. Au survol le fond du bouton disparaissait — il
   ne restait que du texte blanc sur la carte blanche. Sur telephone c'est pire
   encore : le survol reste colle apres un appui, donc le bouton devenait
   illisible des qu'on le touchait. C'est ce que le client decrivait par
   « quand on clique dessus ça change de couleur ». */
.fa-btn-rouge:hover{background:#b45309}
.fa-btn:disabled{opacity:.55;cursor:not-allowed}

/* Le bouton « menu » n'existe que sur telephone : sur ordinateur la colonne
   de gauche est toujours la. */
.fa-burger{display:none;border:0;background:transparent;font-size:1.3rem;cursor:pointer;padding:4px 8px}

/* ============================================================= corps === */

.fa-corps{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 300px;
  gap:16px;align-items:start;
  max-width:1280px;margin:16px auto;padding:0 14px;
}

/* ---------------------------------------------------- colonne gauche -- */

.fa-gauche{
  position:sticky;top:calc(var(--entete) + 16px);
  max-height:calc(100vh - var(--entete) - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;
}
.fa-gauche-titre{
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fb-text-secondary);margin:16px 6px 6px;
}
.fa-gauche-titre:first-child{margin-top:0}

.fa-rub{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:8px;border:0;background:transparent;
  color:var(--fb-text-main);font-size:.9rem;font-weight:600;cursor:pointer;text-align:left;
}
.fa-rub:hover{background:rgba(0,0,0,.05);text-decoration:none}
.fa-rub-actif{background:var(--fb-accent-light);color:var(--fb-sur-accent)}
.fa-rub-emoji{flex:0 0 auto;font-size:1.05rem;width:22px;text-align:center}
.fa-rub-nom{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fa-rub-n{
  flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--fb-text-secondary);
  background:var(--fb-input-bg);border-radius:var(--radius-pill);padding:1px 8px;
}
/* Le chevron tourne quand la rubrique est ouverte : on voit d'un coup d'oeil
   ou l'on se trouve dans l'arborescence. */
.fa-rub-fleche{flex:0 0 auto;font-size:.7rem;opacity:.5;transition:transform .15s}
.fa-rub[aria-expanded="true"] .fa-rub-fleche{transform:rotate(90deg)}

.fa-sous{margin:2px 0 6px 30px;display:none}
.fa-sous[data-ouvert="1"]{display:block}
.fa-sous .fa-rub{font-weight:500;font-size:.86rem;padding:6px 10px}

/* ---------------------------------------------------- colonne droite -- */

.fa-droite{
  position:sticky;top:calc(var(--entete) + 16px);
  display:flex;flex-direction:column;gap:14px;
}
.fa-carte{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-subtle);padding:16px;
}
.fa-carte h3{margin:0 0 8px;font-size:1rem;display:flex;align-items:center;gap:8px}
.fa-carte p{margin:0 0 10px;font-size:.86rem;line-height:1.5;color:var(--fb-text-secondary)}

.fa-soutien{border:2px solid var(--fb-accent-light)}
.fa-soutien .fa-btn{width:100%;justify-content:center;padding:12px}

/* =============================================================== fil === */

.fa-fil{display:flex;flex-direction:column;gap:14px;min-width:0}

.fa-poser{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-subtle);padding:14px 16px;
}
.fa-poser-haut{display:flex;align-items:center;gap:10px}
.fa-poser-faux{
  flex:1 1 auto;background:var(--fb-input-bg);border:0;border-radius:var(--radius-pill);
  padding:11px 16px;text-align:left;color:var(--fb-text-secondary);
  font-size:.95rem;cursor:pointer;
}
.fa-poser-faux:hover{background:var(--fb-survol)}
.fa-poser-bas{
  display:flex;gap:4px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--fb-border);
}
.fa-poser-bas button{
  flex:1;border:0;background:transparent;border-radius:8px;padding:8px;
  color:var(--fb-text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.fa-poser-bas button:hover{background:rgba(0,0,0,.05)}

/* -------------------------------------------------------- une carte --- */

.fa-post{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-subtle);overflow:hidden;
}
.fa-post-tete{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 0}
.fa-avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;
  background:var(--fb-green);object-fit:cover;
}
.fa-avatar-sm{width:32px;height:32px;font-size:.75rem}
.fa-post-qui{flex:1 1 auto;min-width:0}
.fa-post-nom{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fa-badge{
  font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--fb-accent-light);color:var(--fb-sur-accent);white-space:nowrap;
}
.fa-post-meta{font-size:.78rem;color:var(--fb-text-secondary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fa-post-meta a{color:var(--fb-text-secondary);font-weight:600}

.fa-post-corps{padding:10px 16px 0}
.fa-post-titre{font-size:1.05rem;font-weight:700;margin:0 0 6px;line-height:1.35}
.fa-post-titre a{color:var(--fb-text-main)}
.fa-post-texte{font-size:.95rem;line-height:1.5;margin:0;word-wrap:break-word;overflow-wrap:anywhere}
/* L'image d'un message s'affiche ENTIERE.

   « Sur le forum, l'image n'apparaît pas complète » (client, 17/09). Il avait
   raison, et les chiffres le disent : `object-fit:cover` recadre l'image pour
   REMPLIR la boite. Sur une colonne de 600 px avec un plafond de 480 px, une
   photo de 617x1080 — un format de telephone tout a fait ordinaire, et il y en
   a plusieurs sur le forum — perdait plus de la moitie de sa hauteur.

   Or ici les gens photographient des COURRIERS : un recepisse, une convocation,
   un refus de prefecture. Couper le haut et le bas d'un document, c'est retirer
   l'en-tete et la signature, c'est-a-dire precisement ce qu'on demande a voir.

   `contain` montre tout, quitte a laisser une bande de fond sur les cotes. Le
   plafond passe a 70 % de la hauteur de l'ecran : assez pour lire un document
   debout, sans qu'une photo mange tout le fil. */
.fa-post-image{
  display:block;width:100%;max-height:70vh;object-fit:contain;
  margin-top:10px;background:var(--fb-bg-doux);border-radius:8px;
}
.fa-mention{color:var(--fb-green);font-weight:700}

.fa-post-compte{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;font-size:.82rem;color:var(--fb-text-secondary);
}
.fa-post-actions{
  display:flex;border-top:1px solid var(--fb-border);margin:0 16px;padding:4px 0;
}
.fa-post-actions button{
  flex:1;border:0;background:transparent;border-radius:8px;padding:9px;
  color:var(--fb-text-secondary);font-size:.88rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.fa-post-actions button:hover{background:rgba(0,0,0,.05)}
.fa-post-actions button.fa-aime{color:var(--fb-green)}

/* ------------------------------------------------------ commentaires -- */

.fa-comms{padding:8px 16px 14px;background:var(--fb-bg-doux)}
.fa-comm{display:flex;gap:8px;margin-top:10px}
.fa-comm-bulle{
  background:var(--fb-input-bg);border-radius:16px;padding:8px 12px;
  font-size:.9rem;line-height:1.45;min-width:0;word-wrap:break-word;overflow-wrap:anywhere;
}
.fa-comm-nom{font-weight:700;font-size:.85rem;display:block;margin-bottom:1px}
.fa-comm-bas{font-size:.75rem;color:var(--fb-text-secondary);margin:3px 0 0 12px;display:flex;gap:12px}
.fa-comm-bas button{border:0;background:transparent;color:inherit;font-weight:700;cursor:pointer;padding:0}
.fa-comm-bas button:hover{text-decoration:underline}

.fa-repondre{display:flex;gap:8px;align-items:center;margin-top:12px}
.fa-repondre input{
  flex:1 1 auto;min-width:0;border:0;background:var(--fb-input-bg);
  border-radius:var(--radius-pill);padding:10px 14px;font-size:.9rem;
}
.fa-repondre input:focus{outline:2px solid var(--fb-green);outline-offset:1px}

/* ============================================================ vide ===== */

.fa-vide{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-subtle);padding:36px 22px;text-align:center;
}
.fa-vide-emoji{font-size:2.4rem;display:block;margin-bottom:10px}
.fa-vide h3{margin:0 0 6px;font-size:1.05rem}
.fa-vide p{margin:0 auto 14px;max-width:420px;font-size:.9rem;line-height:1.55;color:var(--fb-text-secondary)}

/* ========================================================== modales ==== */

.fa-voile{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
  overflow-y:auto;
}
.fa-voile[hidden]{display:none}
.fa-modale{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-modal);width:100%;max-width:520px;
  max-height:calc(100vh - 32px);display:flex;flex-direction:column;
}
.fa-modale-tete{
  padding:14px 16px;border-bottom:1px solid var(--fb-border);
  display:flex;align-items:center;gap:10px;
}
.fa-modale-tete h2{margin:0;font-size:1.1rem;flex:1 1 auto;text-align:center}
.fa-modale-fermer{
  border:0;background:var(--fb-input-bg);border-radius:50%;
  width:34px;height:34px;cursor:pointer;font-size:1rem;flex:0 0 auto;
}
.fa-modale-corps{padding:16px;overflow-y:auto}
.fa-modale-pied{padding:0 16px 16px}
.fa-modale-pied .fa-btn{width:100%;justify-content:center;padding:12px}

.fa-champ{display:block;margin-bottom:12px}
.fa-champ span{display:block;font-size:.8rem;font-weight:700;margin-bottom:5px;color:var(--fb-text-secondary)}
.fa-champ input,.fa-champ select,.fa-champ textarea{
  width:100%;border:1px solid var(--fb-border);border-radius:8px;
  padding:10px 12px;font-size:.95rem;background:var(--fb-card-bg);font-family:inherit;
}
.fa-champ textarea{min-height:120px;resize:vertical;line-height:1.5}
.fa-champ input:focus,.fa-champ select:focus,.fa-champ textarea:focus{
  outline:2px solid var(--fb-green);outline-offset:0;border-color:var(--fb-green);
}
.fa-aide{font-size:.78rem;color:var(--fb-text-secondary);line-height:1.5;margin:4px 0 0}
.fa-err{color:#c0392b;font-size:.85rem;font-weight:600;margin:8px 0 0;min-height:1em}
.fa-ok{color:#1e7d4f;font-size:.85rem;font-weight:600;margin:8px 0 0}

/* Les deux portes d'entree, cote a cote. */
.fa-portes{display:grid;grid-template-columns:1fr;gap:10px}
.fa-porte{
  border:2px solid var(--fb-border);border-radius:var(--radius-box);padding:14px;
  cursor:pointer;background:var(--fb-card-bg);text-align:left;
}
.fa-porte:hover{border-color:var(--fb-green);background:var(--fb-accent-light)}
.fa-porte-actif{border-color:var(--fb-green);background:var(--fb-accent-light)}
.fa-porte b{display:block;font-size:.95rem;margin-bottom:3px}
.fa-porte span{font-size:.82rem;color:var(--fb-text-secondary);line-height:1.45}

/* =========================================================== bandeau === */

.fa-bandeau{
  background:var(--fb-accent-light);border-left:4px solid var(--fb-green);
  border-radius:8px;padding:12px 14px;font-size:.88rem;line-height:1.5;
}
.fa-bandeau b{color:var(--fb-green)}
.fa-bandeau .fa-btn{margin-top:10px}

/* ========================================================== telephone == */

@media (max-width:1100px){
  .fa-corps{grid-template-columns:260px minmax(0,1fr)}
  .fa-droite{display:none}
}

@media (max-width:820px){
  .fa-corps{grid-template-columns:minmax(0,1fr);padding:0 10px;margin-top:10px}
  .fa-burger{display:block}

  /* La colonne des rubriques devient un panneau qui glisse : sur telephone
     elle prendrait tout l'ecran et on ne verrait plus les questions. */
  .fa-gauche{
    position:fixed;inset:var(--entete) auto 0 0;z-index:150;
    /* 78vw et non 86 : il faut garder une bande confortable a droite pour
       refermer le panneau du pouce. A 86vw il restait 55 px sur un iPhone. */
    width:min(78vw,300px);max-height:none;height:calc(100% - var(--entete));
    background:var(--fb-card-bg);box-shadow:var(--shadow-modal);
    padding:14px;transform:translateX(-102%);transition:transform .2s ease;
  }
  .fa-gauche[data-ouvert="1"]{transform:none}
  .fa-ombre{
    position:fixed;inset:var(--entete) 0 0 0;z-index:140;background:rgba(0,0,0,.4);
  }
  .fa-ombre[hidden]{display:none}

  .fa-logo-nom{display:none}
  .fa-post-titre{font-size:1rem}
  .fa-modale{max-width:none;border-radius:var(--radius-box)}
}

@media (max-width:420px){
  .fa-post-actions button{font-size:.8rem;gap:4px}
  .fa-poser-bas button{font-size:.78rem}
}

/* Respecte le choix de ceux qui coupent les animations. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------- petits telephones --
   Sur un iPhone la barre du haut debordait : le bouton « Poser une Question »
   sortait de l'ecran et la recherche etait reduite a sa loupe. On enleve donc
   ce qui peut l'etre, sans perdre la fonction : la recherche est reprise en
   haut du panneau des rubriques. */
@media (max-width:620px){
  .fa-entete{gap:6px;padding:0 8px}
  .fa-recherche{display:none}
  .fa-mot{display:none}            /* le bouton garde son ✚ */
  .fa-btn{padding:9px 13px}
  .fa-logo-rond{width:34px;height:34px;font-size:.72rem}
}
/* La recherche du panneau : invisible sur ordinateur, ou celle du haut suffit. */
.fa-recherche-panneau{display:none;margin-bottom:14px}
.fa-recherche-panneau input{
  width:100%;border:0;background:var(--fb-input-bg);
  border-radius:var(--radius-pill);padding:10px 14px;font-size:.92rem;
}
@media (max-width:620px){ .fa-recherche-panneau{display:block} }

/* ============================================================================
   Aperçu de lien, mots-dièses, lieu, partage — 16/09
   « Quand la personne met un lien, il sera aperçu automatique », « les hashtag »,
   « il détecte la localisation », « le partage Facebook, email, SMS, WhatsApp ».
   ========================================================================== */

/* L'aperçu d'un lien, comme sur Facebook : image en haut, puis le domaine en
   petites capitales, le titre, la description. */
.fa-apercu{
  display:block;margin-top:10px;border:1px solid var(--fb-border);
  border-radius:var(--radius-box);overflow:hidden;background:var(--fb-input-bg);
  color:inherit;
}
.fa-apercu:hover{text-decoration:none;background:var(--fb-survol)}
.fa-apercu img{display:block;width:100%;max-height:260px;object-fit:cover;background:var(--fb-bg-doux)}
.fa-apercu-txt{padding:10px 12px;display:block}
.fa-apercu-hote{
  display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fb-text-secondary);margin-bottom:2px;
}
.fa-apercu-txt strong{display:block;font-size:.95rem;line-height:1.3;color:var(--fb-text-main)}
.fa-apercu-txt span:last-child{
  display:block;font-size:.82rem;color:var(--fb-text-secondary);margin-top:3px;
  line-height:1.4;
}

.fa-diese{color:var(--fb-green);font-weight:700}

.fa-lieu{color:var(--fb-green);font-weight:600}

/* Les badges, par nature : on les distingue d'un coup d'oeil sans avoir à lire. */
.fa-badge i{font-style:normal}
/* ---- Quatre badges, quatre couleurs ---------------------------------

   « Je veux trois types, chacun sa couleur : adhérent, inscrit, modérateur,
   administrateur » (client, 17/09).

   Chaque couleur porte un TEXTE FONCE, jamais du blanc : c'est ce qui permet
   de garder la teinte VIVE tout en restant lisible. Ma correction du matin
   avait fait l'inverse — j'avais fonce le fond pour sauver le texte blanc, et
   le client a vu la couleur disparaitre. Voir
   feedback_a_gradient_background_reads_as_transparent_so_measure_the_pixel. */
.fa-badge-asso{background:var(--fb-green);color:#fff}          /* vert de l'association */
/* En sombre, `--fb-green` est volontairement ECLAIRCI pour rester visible sur
   du noir — mais du blanc pose dessus ne donne plus que 3,7 de contraste.
   Mesure sur le pixel, pas dans les styles. On fonce donc le fond du badge,
   le seul endroit ou le texte est blanc sur ce vert. */
:root[data-theme="sombre"] .fa-badge-asso{background:#45601a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-badge-asso{background:#45601a}
}
.fa-badge-modo{background:#ede9fe;color:#5b21b6}               /* violet */
.fa-badge-adherent{background:#fdf0c4;color:#5c4200}           /* or pale : adherent pas a jour */
.fa-badge-inscrit{background:#dbeafe;color:#1e3a8a}            /* bleu */
.fa-badge-dossier{background:#fdf3e3;color:#8a5a12}            /* orange */
.fa-badge-soutien{background:#fde8f0;color:#b3185a}

/* Le partage */
.fa-partages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.fa-partage{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px;border:1px solid var(--fb-border);border-radius:var(--radius-box);
  font-size:.8rem;font-weight:600;color:var(--fb-text-main);text-align:center;
}
.fa-partage:hover{text-decoration:none;background:var(--fb-accent-light);border-color:var(--fb-green)}
.fa-partage-ic{font-size:1.5rem;line-height:1}
@media (max-width:420px){ .fa-partages{grid-template-columns:repeat(2,1fr)} }

/* ============================================================================
   Réactions, image, rubrique devinée — 16/09
   « Le bouton que j'aime et cœur etc. comme Facebook », « ajouter une image »,
   « il sera reconnu automatiquement catégorie ».
   ========================================================================== */

/* ---- la barre de réactions, au survol ---- */
.fa-reactions{
  position:absolute;z-index:300;display:flex;gap:2px;
  background:var(--fb-card-bg);border-radius:var(--radius-pill);
  box-shadow:0 4px 18px rgba(0,0,0,.2);padding:5px 7px;
  animation:fa-monte .16s ease-out;
}
@keyframes fa-monte{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.fa-reaction{
  border:0;background:transparent;cursor:pointer;padding:3px;
  font-size:1.7rem;line-height:1;border-radius:50%;
  transition:transform .12s ease;
}
.fa-reaction:hover{transform:scale(1.3) translateY(-4px)}

/* Le bouton lui-même : il prend la couleur de la réaction choisie. */
.fa-reagir{display:inline-flex;align-items:center;gap:6px}
.fa-reagir-ic{font-size:1.05rem;line-height:1}
.fa-post-actions .fa-reagir.fa-aime,
.fa-comm-bas .fa-reagir.fa-aime{color:var(--fb-green);font-weight:800}

/* Le compteur « 👍❤️ 12 », au-dessus des boutons comme sur Facebook. */
.fa-compte-reactions{font-size:.82rem;color:var(--fb-text-secondary)}
.fa-compte-comm{margin-left:auto}

.fa-comm-bas{align-items:center}
.fa-comm-bas .fa-reagir{
  border:0;background:transparent;padding:0;color:inherit;
  font-weight:700;font-size:.75rem;cursor:pointer;
}
.fa-comm-bas .fa-reagir .fa-reagir-ic{display:none}
.fa-comm-image{
  display:block;max-width:100%;border-radius:12px;margin-top:6px;
  border:1px solid var(--fb-border);
}

/* ---- la photo jointe, avant publication ---- */
.fa-zone-image{position:relative;margin-bottom:12px}
.fa-zone-image img{
  display:block;width:100%;max-height:300px;object-fit:cover;
  border-radius:var(--radius-box);border:1px solid var(--fb-border);
}
.fa-image-retirer{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.65);color:#fff;font-size:.9rem;
}
.fa-image-retirer:hover{background:rgba(0,0,0,.85)}

/* ---- la barre d'outils de publication ---- */
.fa-outils{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.fa-outil{
  flex:1;min-width:96px;border:1px solid var(--fb-border);background:var(--fb-card-bg);
  border-radius:10px;padding:9px 8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.84rem;font-weight:600;color:var(--fb-text-secondary);
}
.fa-outil:hover{background:var(--fb-accent-light);border-color:var(--fb-green);color:var(--fb-green)}
.fa-outil-ic{font-size:1.05rem}
.fa-outil-rond{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:0;background:var(--fb-input-bg);cursor:pointer;font-size:1.05rem;
}
.fa-outil-rond:hover{background:var(--fb-survol)}

/* ---- la rubrique reconnue automatiquement ---- */
.fa-propose{
  background:var(--fb-accent-light);border:1px solid rgba(11,60,50,.2);
  border-radius:var(--radius-box);padding:10px;margin-bottom:8px;
}
.fa-propose-titre{
  font-size:.76rem;font-weight:700;color:var(--fb-green);margin-bottom:7px;
}
.fa-propose-choix{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;background:var(--fb-card-bg);border-radius:9px;
  padding:8px 11px;margin-bottom:5px;
}
.fa-propose-choix:hover{border-color:var(--fb-green)}
.fa-propose-choix strong{display:block;font-size:.88rem}
.fa-propose-choix span{font-size:.76rem;color:var(--fb-text-secondary)}
.fa-propose-actif{
  border-color:var(--fb-green);background:var(--fb-card-bg);
  box-shadow:0 0 0 2px rgba(11,60,50,.15);
}
.fa-propose-actif strong::after{content:"  ✓";color:var(--fb-green)}

.fa-zone-lien{margin-bottom:10px}

/* ============================================================================
   Anonyme, rubriques réservées, site bloqué — 16/09
   ========================================================================== */

.fa-anonyme{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  background:var(--fb-input-bg);border-radius:var(--radius-box);
  padding:11px 13px;margin-bottom:12px;
}
.fa-anonyme input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;cursor:pointer}
.fa-anonyme strong{display:block;font-size:.88rem}
.fa-anonyme em{
  display:block;font-style:normal;font-size:.78rem;
  color:var(--fb-text-secondary);line-height:1.45;margin-top:2px;
}
/* L'ancien rond gris est remplace par l'image fournie par le client (17/09).
   Le `!important` qui etait ici aurait gagne contre la nouvelle regle plus
   bas : une couleur imposee est exactement ce qui empeche de changer d'avis
   plus tard. */
.fa-avatar-anon{font-size:1.1rem}
.fa-badge-anon{background:var(--fb-input-bg);color:var(--fb-text-secondary)}

.fa-cadenas{flex:0 0 auto;font-size:.78rem;opacity:.75}

/* La fenêtre « ce site ne peut pas être partagé ». */
.fa-bloque-voile{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.fa-bloque{
  background:var(--fb-card-bg);border-radius:var(--radius-box);box-shadow:var(--shadow-modal);
  max-width:420px;width:100%;padding:26px 22px;text-align:center;
}
.fa-bloque-ic{font-size:2.6rem;line-height:1;margin-bottom:10px}
.fa-bloque h3{margin:0 0 8px;font-size:1.1rem;color:#c0392b}
.fa-bloque p{margin:0 0 10px;font-size:.9rem;line-height:1.5}
.fa-bloque .fa-btn{width:100%;justify-content:center;padding:12px;margin-top:6px}

/* ============================================================================
   Le titre, l'entrée par numéro, modifier/supprimer — 16/09
   « Ce texte, si vous pouvez le rendre plus joli, autre police très
   professionnel et en majuscule, et ajoute défense de droit. »
   ========================================================================== */

.fa-titre{
  background:var(--fb-card-bg);border-radius:var(--radius-box);
  box-shadow:var(--shadow-subtle);
  padding:20px 22px;margin-bottom:2px;
  border-left:5px solid var(--fb-green);
}
.fa-titre h1{
  margin:0;font-size:1.22rem;line-height:1.3;
  font-weight:800;letter-spacing:.055em;color:var(--fb-green);
  /* Une police à empattements pour le titre : sur un site de défense des
     droits, elle dit « sérieux » là où une police d'écran dit « application ». */
  font-family:Georgia,"Times New Roman",'Iowan Old Style',serif;
}
.fa-titre p{
  margin:7px 0 0;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fb-text-secondary);
}
.fa-titre-sujet{
  font-size:1.3rem;line-height:1.3;margin:0 0 2px;font-weight:800;
  font-family:Georgia,"Times New Roman",serif;color:var(--fb-text-main);
}
@media (max-width:620px){
  .fa-titre{padding:16px 16px}
  .fa-titre h1{font-size:1.02rem;letter-spacing:.04em}
  .fa-titre p{font-size:.68rem;letter-spacing:.12em}
  .fa-titre-sujet{font-size:1.1rem}
}

/* L'encadré « pas encore de numéro ». */
.fa-sans-numero{
  margin-top:16px;padding:14px;border-radius:var(--radius-box);
  background:var(--fb-accent-light);border:1px dashed rgba(11,60,50,.35);
  text-align:center;
}
.fa-sans-numero strong{display:block;font-size:.92rem;margin-bottom:4px}
.fa-sans-numero span{
  display:block;font-size:.82rem;color:var(--fb-text-secondary);
  line-height:1.5;margin-bottom:10px;
}
.fa-sans-numero .fa-btn{width:100%;justify-content:center;padding:11px}

.fa-modifie{
  margin:2px 16px 0;font-size:.74rem;color:var(--fb-text-secondary);font-style:italic;
}
.fa-post-actions .fa-modifier,
.fa-post-actions .fa-supprimer{font-size:.84rem}
.fa-comm-bas .fa-modifier,
.fa-comm-bas .fa-supprimer{
  border:0;background:transparent;color:inherit;font-weight:700;
  font-size:.75rem;cursor:pointer;padding:0;
}
.fa-comm-bas .fa-modifier:hover,
.fa-comm-bas .fa-supprimer:hover{text-decoration:underline}

/* ============================================================================
   Notifications, couleurs de rubriques, adhérent à jour — 16/09
   « Les notifications ne fonctionnent pas », « il faut mettre des couleurs
   différentes, les adhérents à jour ils ont une icône ».
   ========================================================================== */

/* ---- les notifications ---- */
.fa-notif{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 12px;border-radius:10px;color:inherit;
  border-bottom:1px solid var(--fb-border-doux);
}
.fa-notif:last-child{border-bottom:0}
.fa-notif:hover{background:var(--fb-input-bg);text-decoration:none}
/* Non lue : un fond teinté et une barre verte. Le gras seul ne se voit pas
   assez quand on survole une liste de vingt lignes. */
.fa-notif-neuve{background:var(--fb-accent-light);border-left:3px solid var(--fb-green)}
.fa-notif-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:1.05rem;background:var(--fb-input-bg);
}
.fa-notif-neuve .fa-notif-ic{background:var(--fb-card-bg)}
.fa-notif-txt{display:block;min-width:0}
.fa-notif-txt strong{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.fa-notif-txt em{
  display:block;font-style:normal;font-size:.82rem;color:var(--fb-green);
  font-weight:600;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fa-notif-txt>span{display:block;font-size:.74rem;color:var(--fb-text-secondary);margin-top:3px}

/* ---- les rubriques, par niveau d'accès ---- */
.fa-rub-admin,.fa-rub-adherent{
  border-left:4px solid var(--rub-coul,var(--fb-green));
  padding-left:7px;
}
.fa-rub-admin .fa-rub-nom{color:var(--rub-coul,var(--fb-green));font-weight:800}
.fa-rub-adherent{background:rgba(184,134,11,.08)}
.fa-rub-adherent .fa-rub-nom{color:var(--rub-coul,#b8860b);font-weight:800}
.fa-rub-adherent:hover{background:rgba(184,134,11,.16)}

/* Meme en theme CLAIR, l'or `#b8860b` pose sur son propre fond teinte ne donne
   qu'un contraste de 2,7 — sous le minimum lisible, et c'est justement la
   rubrique qu'il voulait mettre en avant. On assombrit la teinte pour le
   TEXTE ; le filet de gauche et le fond gardent l'or d'origine, donc la
   rubrique reste reconnaissable au premier coup d'oeil. */
.fa-rub-adherent .fa-rub-nom{
  color:#4d3804;
  color:color-mix(in srgb, var(--rub-coul, #b8860b) 38%, #000000);
}

/* La couleur d'une rubrique est choisie dans l'administration et ECRITE EN
   BASE : `#2b3d0e` pour les annonces, `#b8860b` pour l'Espace Adhérents. Elle
   arrive en style INLINE (`--rub-coul`), donc elle gagne contre n'importe
   quelle regle de cette feuille.

   Ce sont des couleurs pensees pour un fond blanc. Sur le fond noir du theme
   sombre, `#2b3d0e` donne un contraste de 1,4 : le nom de la rubrique devient
   illisible, alors qu'il s'agit justement des rubriques qu'il voulait mettre
   EN AVANT.

   On ne touche pas a ce qui est en base — c'est son choix, et il sert au theme
   clair. On ECLAIRCIT la couleur a l'affichage, uniquement en sombre. La
   couleur reste reconnaissable (c'est bien le meme or, le meme vert), et elle
   se lit. Le filet de gauche, lui, garde la teinte d'origine : sur un aplat de
   4 px la lisibilite ne se pose pas. */
:root[data-theme="sombre"] .fa-rub-admin .fa-rub-nom,
:root[data-theme="sombre"] .fa-rub-adherent .fa-rub-nom{
  color:#fff0cc;                                    /* repli si color-mix manque */
  color:color-mix(in srgb, var(--rub-coul, #b8860b) 12%, #ffffff);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-rub-admin .fa-rub-nom,
  :root:not([data-theme="clair"]) .fa-rub-adherent .fa-rub-nom{
    color:#fff0cc;
    color:color-mix(in srgb, var(--rub-coul, #b8860b) 12%, #ffffff);
  }
}

/* ---- l'adhérent à jour ---- */
.fa-badge-ajour{
  /* L'ADHERENT A JOUR : le badge le plus visible du forum, c'est voulu.

     Premiere version : or vif + texte BLANC → 2,4 de contraste, illisible.
     Deuxieme version (mon erreur du matin) : j'ai fonce l'or pour sauver le
     blanc → lisible, mais « la couleur a disparu », et le client avait raison.
     Bonne version : on garde l'or VIF et on met le texte en brun fonce. 9,5 de
     contraste, et la couleur saute aux yeux. */
  background:linear-gradient(135deg,#ffd43b,#f5c518);color:#3d2b00;
  box-shadow:0 1px 3px rgba(184,134,11,.45);
}
/* En theme sombre l'or vif reste vif : c'est une pastille, pas un fond de
   page, et elle doit ressortir sur le noir. Seul le texte se fonce encore un
   peu pour tenir le contraste. */
:root[data-theme="sombre"] .fa-badge-ajour{color:#2b1f00}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-badge-ajour{color:#2b1f00}
}

/* ===== La fenetre d'adhesion ==========================================

   « Popup d'adhésion » (client, 16/09). Elle s'ouvre quand on essaie de
   publier dans une rubrique reservee : elle dit ce que l'adhesion APPORTE,
   et elle rend son texte a la personne au lieu de le jeter. */
.fa-modale-texte{margin:0 0 12px;font-size:.95rem;line-height:1.55}
.fa-avantages{margin:0 0 12px;padding-left:20px;font-size:.9rem;line-height:1.7}
.fa-avantages li{margin-bottom:2px}
.fa-modale-pied .fa-btn{text-decoration:none}
.fa-modale-pied a.fa-btn{justify-content:center}

/* Le bouton clair/sombre : rond, discret, et de la meme taille que les autres
   outils de la barre pour ne pas deranger l'alignement. */
.fa-theme{padding:9px 12px;line-height:1}

/* ===== Les guides de l'association, au milieu du fil ==================

   « Ils doivent être visuellement encadrés pour se démarquer, exactement comme
   un contenu mis en avant » (client, 17/09).

   Ce qui les distingue d'une question : le filet or a gauche, l'etiquette en
   haut, et un fond legerement teinte. Assez pour qu'on ne les confonde jamais
   avec la publication d'un membre — c'est une question d'honnetete autant que
   de mise en page. */
.fa-guide{
  border:1px solid rgba(184,134,11,.45);
  border-left:5px solid #b8860b;
  background:linear-gradient(180deg, rgba(184,134,11,.06), transparent 120px);
}
.fa-guide-etiquette{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px 0;font-size:.78rem;font-weight:800;
  color:#7d5a07;text-transform:uppercase;letter-spacing:.04em;
}
:root[data-theme="sombre"] .fa-guide-etiquette{color:#f0d488}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-guide-etiquette{color:#f0d488}
}
.fa-guide-prix{
  /* `#b8860b` sous du texte blanc ne donne que 3,25 de contraste — sous le
     minimum lisible, et c'est le PRIX et le BOUTON, c'est-a-dire les deux seuls
     endroits ou l'on veut etre sur d'etre lu. On fonce l'or : la couleur reste
     la meme famille, elle porte le texte. */
  margin-left:auto;background:#8a6508;color:#fff;
  border-radius:var(--radius-pill);padding:2px 11px;
  font-size:.76rem;letter-spacing:0;text-transform:none;
}
.fa-guide-prix.fa-guide-gratuit{background:var(--fb-green)}
/* La couverture d'un guide s'affiche ENTIERE.
   « Regardez, l'image ne s'affiche pas complet » (client, 18/09), fleche sur la
   couverture du guide AES : `object-fit:cover` coupait le haut, c'est-a-dire
   le titre « GUIDE COMPLET ». Une couverture tronquee ne vend rien — c'est
   justement le titre qui donne envie de cliquer. Meme correction que pour les
   images de messages : on montre tout, quitte a laisser du fond sur les cotes. */
.fa-guide-image{
  width:100%;max-height:420px;object-fit:contain;display:block;margin-top:11px;
  background:var(--fb-bg-doux);border-radius:8px;
}
.fa-guide-corps{padding:12px 16px 16px}
.fa-guide-titre{margin:0 0 7px;font-size:1.2rem;line-height:1.3}
.fa-guide-texte{margin:0 0 12px;font-size:.93rem;line-height:1.55;color:var(--fb-text-secondary)}
.fa-guide-bouton{background:#8a6508;width:100%;justify-content:center;padding:11px}
.fa-guide-bouton:hover{background:#6f5006;text-decoration:none}

/* L'avatar des publications anonymes : l'image fournie par le client, et le
   logo de l'association pour ses propres publications. `object-fit:cover` et
   non `contain` — sinon l'image carree laisse deux bandes vides dans le rond. */
.fa-avatar-anon{object-fit:cover;background:#b45309}
.fa-avatar-asso{
  background:var(--fb-green);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.72rem;letter-spacing:.03em;
}

/* La chaîne WhatsApp et les vraies marques de partage.

   Le vert WhatsApp `#25D366` porte du texte blanc a 2,3 de contraste — bien
   trop peu. On garde donc le vert comme SIGNE (le logo, le filet) et on pose le
   bouton en vert fonce : la marque reste reconnaissable, le texte se lit. */
.fa-carte-wa{border:2px solid rgba(37,211,102,.35)}
.fa-carte-wa h3{display:flex;align-items:center;gap:8px}
.fa-btn-wa{background:#0f7a3d;width:100%;justify-content:center;padding:11px}
.fa-btn-wa:hover{background:#0b5c2e;text-decoration:none}

/* Les logos de partage : le SVG occupe toute la pastille, sans decalage. */
.fa-partage-ic svg{display:block}
.fa-partage-ic{display:flex;align-items:center;justify-content:center}

/* Les cases a cocher et les boutons radio ne sont PAS des champs de saisie :
   la regle `.fa-champ input{width:100%;padding:11px}` les etirait sur toute la
   largeur et poussait leur libelle a l'autre bout de la ligne. On les remet a
   leur taille naturelle. */
.fa-champ input[type="radio"],
.fa-champ input[type="checkbox"]{
  width:auto;flex:0 0 auto;margin:2px 0 0;padding:0;min-width:0;
}

/* Qui a réagi — la liste, et le compteur qui l'ouvre.

   Le compteur était un simple texte ; c'est maintenant un bouton. On lui
   enlève l'habillage de bouton du navigateur pour qu'il reste exactement ce
   qu'il était à l'œil, tout en devenant atteignable au clavier. */
.fa-qui-reagit{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;border-radius:6px;
}
.fa-qui-reagit:hover{text-decoration:underline}
.fa-qui-reagit:focus-visible{outline:2px solid var(--fb-green);outline-offset:2px}

.fa-qui-liste{list-style:none;margin:0;padding:0;max-height:52vh;overflow-y:auto}
.fa-qui-ligne{
  display:flex;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--fb-border);
}
.fa-qui-ligne:last-child{border-bottom:0}
.fa-qui-emoji{font-size:1.15rem;flex:0 0 auto}
.fa-qui-nom{font-weight:650;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fa-qui-mot{font-size:.82rem;color:var(--fb-text-secondary);flex:0 0 auto}

/* La bande WhatsApp du fil.

   Elle n'existe QUE là où la colonne de droite est masquée — c'est-à-dire
   sous 1100 px, le même seuil, à la ligne près. Deux invitations côte à côte
   sur un grand écran, ce serait du harcèlement ; aucune sur téléphone, c'était
   le défaut que le client a signalé. Le seuil est donc écrit une fois ici et
   une fois là-haut : si l'un bouge, l'autre doit bouger. */
.fa-wa-bande{display:none}
@media (max-width:1100px){
  .fa-wa-bande{
    display:flex;align-items:center;gap:12px;
    margin:0 0 14px;padding:13px 15px;
    background:var(--fb-card-bg);border:1px solid var(--fb-border);
    border-left:4px solid #25D366;border-radius:12px;
    box-shadow:var(--fb-ombre,0 1px 2px rgba(0,0,0,.08));
    text-decoration:none;color:inherit;
  }
  .fa-wa-bande:hover{text-decoration:none;border-color:#25D366}
}
.fa-wa-ic{color:#25D366;display:inline-flex;align-items:center;flex:0 0 auto}
.fa-wa-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.fa-wa-txt strong{font-size:.95rem}
.fa-wa-txt span{font-size:.82rem;color:var(--fb-text-secondary)}
.fa-wa-fleche{font-size:1.5rem;color:var(--fb-text-secondary);flex:0 0 auto;line-height:1}

/* Le bouton de la carte : le logo à gauche du texte, aligné. */
.fa-btn-wa{display:inline-flex;align-items:center;gap:8px}
.fa-carte-wa h3{display:flex;align-items:center;gap:8px}

/* Le menu du compte : photo, administration, déconnexion.

   Avant, l'avatar n'était qu'un lien vers la fiche : aucun moyen de se
   déconnecter, et le panneau d'administration ne s'atteignait qu'en tapant
   l'adresse de mémoire. */
.fa-compte{position:relative;display:inline-flex}
.fa-compte-bouton{padding:0;width:38px;height:38px;justify-content:center;
  overflow:hidden;flex:0 0 auto}
.fa-compte-photo{width:100%;height:100%;object-fit:cover;display:block}
.fa-compte-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  min-width:232px;padding:6px;
  background:var(--fb-card-bg);border:1px solid var(--fb-border);
  border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
}
.fa-compte-tete{
  padding:10px 12px 11px;border-bottom:1px solid var(--fb-border);margin-bottom:6px;
  display:flex;flex-direction:column;gap:2px;
}
.fa-compte-tete strong{font-size:.95rem}
.fa-compte-tete span{font-size:.78rem;color:var(--fb-text-secondary);
  font-variant-numeric:tabular-nums}
.fa-compte-menu a,
.fa-compte-menu button{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border:0;border-radius:8px;
  background:none;color:inherit;font:inherit;text-align:left;
  text-decoration:none;cursor:pointer;width:100%;
}
.fa-compte-menu a:hover,
.fa-compte-menu button:hover{background:var(--fb-hover,rgba(0,0,0,.05));text-decoration:none}
.fa-compte-menu a:focus-visible,
.fa-compte-menu button:focus-visible{outline:2px solid var(--fb-green);outline-offset:-2px}

/* L'aperçu de la photo qu'on vient de choisir : on voit ce qu'on envoie
   AVANT de l'envoyer. */
.fa-photo-apercu{display:flex;justify-content:center;margin-top:12px}
.fa-photo-apercu img{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:3px solid var(--fb-border);
}
.fa-champ-fichier{
  width:100%;border:1px solid var(--fb-border);border-radius:8px;
  padding:10px 12px;background:var(--fb-card-bg);font:inherit;
}
.fa-modale-err{color:#c0392b;font-size:.9rem;margin-top:10px}

/* `hidden` doit TOUJOURS cacher. Une seule règle, pour toutes les fois
   suivantes.

   Le menu du compte s'affichait en permanence, ouvert par-dessus la page, et
   rien ne le fermait : le client a envoyé une photo de son écran en disant
   « cet endroit, j'arrive pas à le fermer ». Il avait raison, et la cause
   n'était pas dans le JavaScript — celui-ci posait bien `hidden`. C'est
   `.fa-compte-menu{display:flex}` qui gagnait : une règle de classe l'emporte
   sur le `[hidden]{display:none}` du navigateur.

   Deux éléments de la feuille avaient déjà leur propre `[hidden]{display:none}`
   écrit à la main. J'ai oublié le troisième. Cette règle-ci vaut pour tous, y
   compris ceux qui n'existent pas encore. Le `!important` est ici à sa place :
   il n'y a aucun cas où l'on veut afficher un élément marqué `hidden`. */
[hidden]{display:none !important}

/* ===================== la fenêtre « Poser une question » ==================
   Structure reprise de sa maquette du 18/09 : l'anonymat tout en haut avec un
   interrupteur, puis le profil, puis le texte, puis les options en bas. */

/* L'anonymat, en tête. Un bandeau gris clair sur toute la largeur, comme chez
   Facebook : on le voit avant d'écrire, pas après. */
.fa-poser-anon{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;margin-bottom:12px;
  background:var(--fb-bg-doux);border-radius:10px;
}
.fa-poser-anon-lib{font-weight:650;font-size:.95rem;cursor:pointer;flex:1 1 auto}
.fa-poser-anon-aide{margin:-6px 0 12px;padding:0 4px}

/* L'interrupteur. Une case à cocher se lit comme une option de formulaire ;
   un interrupteur se lit comme un MODE — et c'en est un, il change qui signe. */
.fa-inter{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.fa-inter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.fa-inter-glisse{
  position:absolute;inset:0;border-radius:26px;
  background:var(--fb-border);transition:background .18s ease;
}
.fa-inter-glisse::before{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.fa-inter input:checked + .fa-inter-glisse{background:var(--fb-green)}
.fa-inter input:checked + .fa-inter-glisse::before{transform:translateX(20px)}
.fa-inter input:focus-visible + .fa-inter-glisse{outline:2px solid var(--fb-green);outline-offset:2px}

/* Le profil : qui va signer. Il suit l'interrupteur — voir « Membre anonyme »
   s'afficher vaut mieux que n'importe quelle phrase d'explication. */
.fa-poser-profil{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fa-poser-av{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fb-green);color:#fff;font-weight:750;font-size:.9rem;
}
.fa-poser-av img{width:100%;height:100%;object-fit:cover;display:block}
.fa-poser-av-anon{background:#b45309;font-size:1.1rem}
.fa-poser-nom{font-size:.98rem}

/* La rubrique trouvée toute seule. Le menu des 109 rubriques reste là, replié :
   la détection se trompe parfois, et quand elle se trompe il faut pouvoir
   corriger sans renoncer à publier. */
.fa-rub-auto{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fa-rub-vue{font-size:.9rem;color:var(--fb-text-secondary)}
.fa-rub-vue.fa-rub-trouvee{color:var(--fb-green);font-weight:650}
.fa-rub-changer{
  background:none;border:0;padding:0;font:inherit;font-size:.85rem;
  color:var(--fb-text-secondary);text-decoration:underline;cursor:pointer;
}
.fa-rub-changer:hover{color:var(--fb-green)}
.fa-bloc-rub select{margin-top:8px}

/* Les options, en bas, dans une barre encadrée — « Ajouter à votre
   publication » chez Facebook. */
.fa-poser-barre{
  border:1px solid var(--fb-border);border-radius:10px;
  padding:10px 12px;margin-top:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fa-poser-barre-titre{font-weight:650;font-size:.92rem;flex:1 1 auto}

/* L'aperçu du lien, pendant la frappe. */
.fa-apercu-poser{
  display:flex;gap:10px;align-items:stretch;margin-top:8px;
  border:1px solid var(--fb-border);border-radius:10px;overflow:hidden;
  background:var(--fb-bg-doux);
}
.fa-apercu-poser img{width:96px;height:96px;object-fit:cover;flex:0 0 auto;display:block}
.fa-apercu-poser-txt{display:flex;flex-direction:column;gap:3px;padding:10px 12px;min-width:0}
.fa-apercu-poser-txt strong{font-size:.93rem;overflow-wrap:anywhere}
.fa-apercu-desc{font-size:.82rem;color:var(--fb-text-secondary);overflow-wrap:anywhere}
.fa-lien-refuse{color:#c0392b;font-weight:650;font-size:.92rem;margin:8px 0 0}

/* ======================================================================
   « MES QUESTIONS » (client, 19/09)

   « Est-ce qu'on peut ajouter une option pour que la personne qui arrive
   voie ses questions et si les gens ont répondu. »

   Une ligne par question, l'état d'abord : ⏳ personne n'a encore répondu,
   💬 il y a des réponses, et une pastille verte quand il y a du NOUVEAU
   depuis le dernier passage.
   ====================================================================== */
.fa-mes-tete{
  background:linear-gradient(135deg,var(--fb-green),var(--fb-green-hover));
  color:#fff;border-radius:var(--radius-box);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-subtle);
}
.fa-mes-tete h2{margin:0 0 4px;font-size:1.15rem}
.fa-mes-tete p{margin:0;font-size:.9rem;opacity:.92;line-height:1.5}
.fa-mes-tete strong{color:#fff}

.fa-mes-ligne{
  display:flex;align-items:center;gap:12px;
  background:var(--fb-card-bg);border:1px solid var(--fb-border-doux);
  border-left:4px solid var(--fb-border);
  border-radius:var(--radius-box);padding:12px 14px;margin-bottom:9px;
  color:var(--fb-text-main);
  transition:background var(--anim) ease, box-shadow var(--anim) ease,
             border-color var(--anim) ease;
}
.fa-mes-ligne:hover{background:var(--fb-bg-doux);box-shadow:var(--shadow-subtle)}
/* Une question qui a du nouveau se voit AVANT d'être lue : bord vert épais et
   pastille. Sans ce repère, la liste ne répond pas à la question posée. */
.fa-mes-neuf{border-left-color:var(--fb-green);background:var(--fb-accent-light)}
.fa-mes-neuf:hover{background:var(--fb-accent-light)}

.fa-mes-etat{position:relative;flex:0 0 auto;width:34px;text-align:center}
.fa-mes-emoji{font-size:1.25rem;line-height:1}
.fa-mes-point{
  position:absolute;top:-3px;right:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--fb-green);box-shadow:0 0 0 2px var(--fb-card-bg);
}
.fa-mes-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.fa-mes-titre{
  font-size:.97rem;font-weight:650;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fa-mes-info{font-size:.8rem;color:var(--fb-text-secondary);line-height:1.5}
.fa-mes-rep{color:var(--fb-green);font-weight:700}
.fa-mes-attente{color:var(--fb-text-secondary);font-style:italic}
.fa-mes-anon{color:#b45309;font-weight:650}
.fa-mes-badge{
  flex:0 0 auto;font-size:.78rem;font-weight:800;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--fb-input-bg);color:var(--fb-text-secondary);
}
.fa-mes-neuf .fa-mes-badge{background:var(--fb-green);color:#fff}

/* L'entrée « Mes questions » dans la colonne de gauche, et sa pastille. */
.fa-rub-neuf,.fa-compte-neuf{
  background:var(--fb-green);color:#fff;font-size:.72rem;font-weight:800;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
}
.fa-compte-neuf{margin-left:8px}

@media(max-width:640px){
  .fa-mes-badge{display:none}     /* la pastille et le bord suffisent */
  .fa-mes-ligne{padding:11px 12px;gap:10px}
}

/* ---- LISIBILITÉ EN THÈME SOMBRE ---------------------------------------
   Le client lit son forum en sombre — toutes ses captures le sont. En mode
   nuit, le vert de l'association est ÉCLAIRCI exprès pour ressortir sur du
   noir ; du blanc posé dessus retombe alors à 3,2 ou 4,0 de contraste, sous
   le minimum lisible. Mesuré au pixel, pas déduit de la feuille de style.

   Le vert ne bouge pas : c'est sa marque. On fonce le TEXTE, et pour le
   bandeau plein — qui est une grande surface — on reprend le vert PROFOND
   de l'association, celui du thème clair, qui va très bien sur du noir. */
:root[data-theme="sombre"] .fa-mes-tete,
:root[data-theme="sombre"] .fa-mes-tete h2{background-image:none}
:root[data-theme="sombre"] .fa-mes-tete{background:linear-gradient(135deg,#2b3d0e,#3d5713)}
:root[data-theme="sombre"] .fa-mes-neuf .fa-mes-badge,
:root[data-theme="sombre"] .fa-rub-neuf,
:root[data-theme="sombre"] .fa-compte-neuf{color:#000}
:root[data-theme="sombre"] .fa-mes-rep{color:var(--fb-sur-accent)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-mes-tete{background:linear-gradient(135deg,#2b3d0e,#3d5713)}
  :root:not([data-theme="clair"]) .fa-mes-neuf .fa-mes-badge,
  :root:not([data-theme="clair"]) .fa-rub-neuf,
  :root:not([data-theme="clair"]) .fa-compte-neuf{color:#000}
  :root:not([data-theme="clair"]) .fa-mes-rep{color:var(--fb-sur-accent)}
}

/* ======================================================================
   UN PEU DE COULEUR ET DE VRAIS ENCADREMENTS (client, 19/09)

   « Si je pouvais ajouter des couleurs, encadrement joli sur le forum. »
   Sa capture montrait la fenêtre « Poser une question » : tout gris, aucun
   relief, rien qui rappelle l'association.

   Règle que je me suis fixée : la couleur SERT à quelque chose — dire où
   l'on est, ce qui est à soi, ce qui est neuf. Du vert partout ne serait
   pas plus joli, seulement plus bruyant.
   ====================================================================== */

/* La fenêtre : une barre de titre aux couleurs de l'association au lieu du
   bandeau blanc et de son filet gris. */
.fa-modale-tete{
  background:linear-gradient(135deg,var(--fb-green),var(--fb-green-hover));
  border-bottom:0;border-radius:var(--radius-box) var(--radius-box) 0 0;
  color:#fff;
}
.fa-modale-tete h2{color:#fff;font-weight:750;letter-spacing:.01em}
.fa-modale-fermer{background:rgba(255,255,255,.18);color:#fff}
.fa-modale-fermer:hover{background:rgba(255,255,255,.3)}
.fa-modale{overflow:hidden;border:1px solid var(--fb-border-doux)}

/* Les champs : un encadrement qui se voit, et qui s'allume en vert au focus.
   Avant, le cadre gris clair sur fond blanc était presque invisible — on ne
   savait pas où finissait la zone de texte. */
.fa-champ input,.fa-champ select,.fa-champ textarea{
  background:var(--fb-input-bg);border:1.5px solid var(--fb-border);
  transition:border-color var(--anim) ease, background var(--anim) ease,
             box-shadow var(--anim) ease;
}
.fa-champ input:hover,.fa-champ textarea:hover{border-color:var(--fb-green)}
.fa-champ input:focus,.fa-champ select:focus,.fa-champ textarea:focus{
  outline:none;background:var(--fb-card-bg);
  border-color:var(--fb-green);box-shadow:0 0 0 3px var(--fb-accent-light);
}
.fa-champ span{color:var(--fb-text-main);font-weight:700}

/* Le bandeau de l'anonymat et la barre d'options : de vrais encadrements. */
.fa-poser-anon{
  border:1.5px solid var(--fb-border-doux);
  background:linear-gradient(180deg,var(--fb-bg-doux),var(--fb-card-bg));
}
.fa-poser-barre{border-width:1.5px;background:var(--fb-bg-doux)}
.fa-poser-barre button{border-radius:8px}

/* Les publications : un vrai contour, et un soulignement vert en tête plutôt
   qu'un filet à gauche.

   J'avais d'abord mis ce filet vert sur la tranche gauche de chaque
   publication. Le banc des guides l'a refusé, et il avait raison : le bord
   gauche est DÉJÀ le signe qui distingue un guide de l'association (doré,
   5 px) d'une question de membre. En le donnant à tout le monde, je rendais
   ce signe muet. Une couleur qui sert à tout ne dit plus rien. */
.fa-post:not(.fa-guide){border:1px solid var(--fb-border-doux)}
.fa-post:not(.fa-guide) .fa-post-tete{
  border-top:3px solid var(--fb-accent-light);
  margin-top:-1px;padding-top:15px;
  transition:border-color var(--anim) ease;
}
.fa-post:not(.fa-guide):hover .fa-post-tete{border-top-color:var(--fb-green)}

/* « GRATUIT » en thème sombre : du blanc sur le vert clair du mode nuit ne
   donnait que 3,83 de contraste, sous le minimum lisible. On NE TOUCHE PAS au
   vert — c'est la couleur de l'association, et la dernière fois que j'ai
   assombri un fond pour régler un contraste, le client a vu sa couleur
   disparaître. C'est le TEXTE qu'on fonce : le vert reste exactement le même,
   et l'étiquette se lit. */
:root[data-theme="sombre"] .fa-guide-prix.fa-guide-gratuit{color:#000;font-weight:800}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-guide-prix.fa-guide-gratuit{color:#000;font-weight:800}
}

/* ======================================================================
   LA ZONE DE RÉPONSE QUI GRANDIT (client, 19/09)

   « Malgré c'est un long texte, la chambre s'agrandit pas, donc la personne
   généralement elle voit pas trop bien qu'est-ce qu'elle a écrit. »

   Le balisage est passé de <input> à <textarea> : un champ d'une ligne ne
   peut pas grandir, quelle que soit la feuille de style. Ici on s'occupe du
   reste — l'alignement, qui change dès que la zone fait deux lignes.
   ====================================================================== */

/* Les boutons restent EN BAS quand la zone grandit. Avec `align-items:center`
   ils remontaient au milieu d'un pavé de huit lignes, loin du curseur. */
.fa-repondre{align-items:flex-end}
.fa-repondre textarea{
  flex:1 1 auto;min-width:0;border:0;background:var(--fb-input-bg);
  border-radius:20px;padding:10px 14px;font-size:.9rem;
  font-family:inherit;line-height:1.45;resize:none;overflow-y:hidden;
  min-height:40px;max-height:260px;display:block;
}
.fa-repondre textarea:focus{outline:2px solid var(--fb-green);outline-offset:1px}
/* L'avatar et les boutons ne doivent pas s'étirer sur la hauteur du pavé. */
.fa-repondre .fa-avatar,
.fa-repondre .fa-outil-rond,
.fa-repondre button[type="submit"]{align-self:flex-end;flex:0 0 auto}

/* L'aperçu du lien sous la zone de réponse : aligné sur le texte, pas sur
   l'avatar, pour qu'on voie qu'il appartient au message en cours. */
.fa-zone-lien-rep{margin:8px 0 0 44px}
@media(max-width:640px){
  .fa-zone-lien-rep{margin-left:0}
}

/* ======================================================================
   LA FICHE D'UN MEMBRE

   Le menu proposait « 👤 Mon profil » depuis le début, et rien ne traitait
   le paramètre : on retombait sur le fil, sans erreur. C'est devenu
   bloquant le 19/09 — on ne peut pas annoncer à Google une adresse
   d'auteur qui sert en réalité la page d'accueil.
   ====================================================================== */
.fa-fiche{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,var(--fb-green),var(--fb-green-hover));
  color:#fff;border-radius:var(--radius-box);
  padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-subtle);
}
.fa-fiche .fa-fiche-av{
  width:64px;height:64px;font-size:1.3rem;flex:0 0 auto;
  border:3px solid rgba(255,255,255,.35);
}
.fa-fiche-txt{min-width:0}
.fa-fiche-txt h2{margin:0 0 5px;font-size:1.25rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fa-fiche-info{margin:0;font-size:.86rem;opacity:.92;line-height:1.5}
.fa-fiche .fa-aide{color:rgba(255,255,255,.88)}
.fa-fiche .fa-aide a{color:#fff;text-decoration:underline}
/* Même raison que le bandeau « Mes questions » : en thème sombre le vert est
   éclairci, et du blanc dessus n'est plus lisible. Le vert profond convient. */
:root[data-theme="sombre"] .fa-fiche{background:linear-gradient(135deg,#2b3d0e,#3d5713)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-fiche{background:linear-gradient(135deg,#2b3d0e,#3d5713)}
}
@media(max-width:640px){
  .fa-fiche{gap:12px;padding:14px}
  .fa-fiche .fa-fiche-av{width:52px;height:52px}
  .fa-fiche-txt h2{font-size:1.1rem}
}

/* Le bouton « Signaler » (client, 19/09 : « on n'a pas où les utilisateurs
   peuvent signaler »). Volontairement DISCRET : il doit être trouvable quand
   on en a besoin, et ne pas inviter à dénoncer son voisin le reste du temps.
   Il ne prend sa couleur d'alerte qu'au survol. */
.fa-signaler{
  background:none;border:0;padding:6px 10px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--fb-text-secondary);
  display:inline-flex;align-items:center;gap:5px;
}
.fa-signaler:hover:not(:disabled){background:rgba(192,57,43,.10);color:#c0392b}
.fa-signaler:disabled{cursor:default}
.fa-post-actions .fa-signaler{margin-left:auto}
@media(max-width:640px){
  /* Sur téléphone la barre est déjà pleine : le mot disparaît, le drapeau reste. */
  .fa-post-actions .fa-signaler span + *{display:none}
  .fa-post-actions .fa-signaler{margin-left:auto;padding:6px 8px}
}

/* ===================================================================
   LES ONGLETS DE TRI DU FIL  (21/09)

   « Le plus récent qui a reçu plusieurs réponses, les questions qui
   restent sans réponse, bien structurée et très jolie animée. »

   Sur 166 questions, 130 n'avaient aucune réponse et personne ne les
   voyait. Ces onglets existent pour ça, pas pour décorer.

   Pastilles plates, pas de bordure : la sélection se lit à la couleur
   pleine, comme sur sa maquette. Sur téléphone la barre défile
   horizontalement plutôt que de se casser en deux lignes — quatre
   pastilles sur 390 px, il n'y a pas d'autre solution honnête.
   =================================================================== */
.fa-tris{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;padding:4px 0;
  /* Sur grand ecran la barre PASSE A LA LIGNE plutot que de defiler : la
     colonne centrale fait ~615 px, les quatre pastilles en tiennent 564, et
     le compteur de droite debordait — « Populaires » se retrouvait coupe au
     bord sans que rien n'indique qu'il fallait faire defiler. */
  flex-wrap:wrap;
}
@media(max-width:700px){
  /* Sur telephone, une barre qui defile vaut mieux que deux lignes de
     pastilles qui mangent la moitie de l'ecran avant la premiere question. */
  .fa-tris{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fa-tris::-webkit-scrollbar{display:none}
}
.fa-tri{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--fb-input-bg);color:var(--fb-text-main);
  font-size:.88rem;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.fa-tri:hover{background:var(--fb-survol);transform:translateY(-1px)}
.fa-tri-actif,
.fa-tri-actif:hover{background:var(--fb-green);color:#fff}
.fa-tri-ic{font-size:.95rem;line-height:1}

/* Le compteur. Sur la pastille active il doit ressortir SUR du vert
   foncé : un fond clair et un texte vert, sinon il disparaît. */
.fa-tri-n{
  display:inline-block;min-width:1.5em;padding:1px 6px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.08);font-size:.78rem;font-weight:700;text-align:center;
}
.fa-tri-actif .fa-tri-n{background:rgba(255,255,255,.22);color:#fff}

.fa-tris-total{
  margin-left:auto;flex:0 0 auto;padding-left:10px;
  font-size:.8rem;color:var(--fb-text-secondary);white-space:nowrap;
}
@media(max-width:700px){ .fa-tris-total{display:none} }

/* Le mot d'explication sous l'onglet « Sans réponse » : on dit POURQUOI
   cette liste existe, sinon c'est juste un filtre de plus. */
.fa-tri-aide{
  margin:-6px 0 14px;padding:10px 14px;border-radius:var(--radius-box);
  background:var(--fb-accent-light);color:var(--fb-sur-accent);
  font-size:.88rem;line-height:1.5;
}

/* L'arrivée des cartes, en douceur et décalée : c'est ce qui donne
   l'impression « animée » qu'il demande, sans rien faire bouger sous le
   doigt de quelqu'un qui lit déjà. Respecte le réglage système de ceux
   qui ne supportent pas les animations. */
@keyframes fa-entree{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:no-preference){
  .fa-fil .fa-post{animation:fa-entree .32s ease both}
  .fa-fil .fa-post:nth-child(2){animation-delay:.04s}
  .fa-fil .fa-post:nth-child(3){animation-delay:.08s}
  .fa-fil .fa-post:nth-child(4){animation-delay:.12s}
  .fa-fil .fa-post:nth-child(5){animation-delay:.16s}
  .fa-fil .fa-post:nth-child(n+6){animation-delay:.2s}
}

/* Contraste des onglets en thème sombre.

   Mesuré sur les pixels, pas supposé. En sombre, `--fb-green` devient un vert
   CLAIR (#8aad3e) dont la luminance est au milieu : ni le blanc (3,9:1) ni un
   texte très foncé (4,1:1) ne passent la barre des 4,5:1. J'ai essayé de
   foncer le texte — ça n'a pas suffi, et c'est la mesure qui l'a dit.

   La solution n'est donc pas la couleur du texte mais celle de la pastille :
   en sombre, l'onglet actif prend un vert PROFOND, et le blanc y tient
   largement. Le vert de l'association est conservé, simplement dans sa nuance
   foncée — celle du thème clair. */
:root[data-theme="sombre"] .fa-tri-actif,
:root[data-theme="sombre"] .fa-tri-actif:hover{ background:#4f7018;color:#fff }
:root[data-theme="sombre"] .fa-tri-actif .fa-tri-n{ background:rgba(0,0,0,.30);color:#fff }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .fa-tri-actif,
  :root:not([data-theme="clair"]) .fa-tri-actif:hover{ background:#4f7018;color:#fff }
  :root:not([data-theme="clair"]) .fa-tri-actif .fa-tri-n{ background:rgba(0,0,0,.30);color:#fff }
}

/* ===================================================================
   LE BANDEAU D'INFORMATION  (21/09, maquette du client)
   Il ne defile QUE s'il deborde : une phrase courte qui tient
   largement n'a aucune raison de bouger, et un texte en mouvement
   permanent en haut de page detourne l'oeil des questions.
   =================================================================== */
.fa-bandeau-info{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:var(--fb-accent-light);color:var(--fb-sur-accent);
  border-bottom:1px solid var(--fb-border-doux);font-size:.9rem;
}
.fa-bandeau-neuf{
  flex:0 0 auto;padding:2px 9px;border-radius:var(--radius-pill);
  background:var(--fb-green);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;
}
.fa-bandeau-piste{flex:1 1 auto;overflow:hidden;min-width:0}
.fa-bandeau-texte{
  display:inline-block;white-space:nowrap;color:inherit;text-decoration:none;font-weight:600;
}
a.fa-bandeau-texte:hover{text-decoration:underline}
.fa-bandeau-x{
  flex:0 0 auto;border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:.95rem;line-height:1;padding:4px 2px;opacity:.65;
}
.fa-bandeau-x:hover{opacity:1}

@keyframes fa-defile{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
@media(prefers-reduced-motion:no-preference){
  /* `.defile` n'est posee par le JS que si le texte est REELLEMENT trop long. */
  .fa-bandeau-info.defile .fa-bandeau-texte{ animation:fa-defile 22s linear infinite }
  .fa-bandeau-info.defile:hover .fa-bandeau-texte{ animation-play-state:paused }
}

/* ===================================================================
   LA PASTILLE DE RUBRIQUE SUR LA CARTE  (21/09, maquette du client)
   Huit teintes, choisies d'apres la rubrique RACINE : toutes les
   sous-rubriques de « Logement » ont la meme couleur, sur toutes les
   pages. C'est ce qui permet de la reconnaitre sans la lire.
   Fond pale + texte fonce de la meme famille : lisible dans les deux
   themes sans avoir a doubler chaque regle.
   =================================================================== */
.fa-chip{
  display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;text-decoration:none;white-space:nowrap;
  vertical-align:middle;
}
.fa-chip:hover{filter:brightness(.95)}
.fa-chip-0{background:#dbeafe;color:#1e40af}
.fa-chip-1{background:#dcfce7;color:#166534}
.fa-chip-2{background:#fef3c7;color:#92400e}
.fa-chip-3{background:#fce7f3;color:#9d174d}
.fa-chip-4{background:#e0e7ff;color:#3730a3}
.fa-chip-5{background:#e4f2cd;color:#115e59}
.fa-chip-6{background:#ffe4e6;color:#9f1239}
.fa-chip-7{background:#ede9fe;color:#5b21b6}

/* En sombre, les fonds pales deviennent des taches lumineuses. On garde
   la meme famille de teinte, en fond sourd et texte clair. */
:root[data-theme="sombre"] .fa-chip-0,
:root[data-theme="sombre"] .fa-chip-4{background:#1e3a5f;color:#bfdbfe}
:root[data-theme="sombre"] .fa-chip-1,
:root[data-theme="sombre"] .fa-chip-5{background:#14402f;color:#dceec0}
:root[data-theme="sombre"] .fa-chip-2{background:#4a3410;color:#fde68a}
:root[data-theme="sombre"] .fa-chip-3,
:root[data-theme="sombre"] .fa-chip-6{background:#4a1d35;color:#fbcfe8}
:root[data-theme="sombre"] .fa-chip-7{background:#332155;color:#ddd6fe}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .fa-chip-0,
  :root:not([data-theme="clair"]) .fa-chip-4{background:#1e3a5f;color:#bfdbfe}
  :root:not([data-theme="clair"]) .fa-chip-1,
  :root:not([data-theme="clair"]) .fa-chip-5{background:#14402f;color:#dceec0}
  :root:not([data-theme="clair"]) .fa-chip-2{background:#4a3410;color:#fde68a}
  :root:not([data-theme="clair"]) .fa-chip-3,
  :root:not([data-theme="clair"]) .fa-chip-6{background:#4a1d35;color:#fbcfe8}
  :root:not([data-theme="clair"]) .fa-chip-7{background:#332155;color:#ddd6fe}
}

/* L'étiquette NOUVEAU du bandeau, en thème sombre : exactement le même
   piège que les onglets de tri. `--fb-green` y est un vert clair de
   luminance moyenne, le blanc n'y tient que 4,00:1. Mesuré, pas supposé —
   et corrigé par la pastille, pas par le texte. */
:root[data-theme="sombre"] .fa-bandeau-neuf{ background:#4f7018;color:#fff }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .fa-bandeau-neuf{ background:#4f7018;color:#fff }
}

/* Le bouton « Ma ville » de la boîte de publication (21/09).
   Actif = la ville est capturée ; un second clic la retire. On montre
   l'état plutôt qu'un simple bouton, sinon on ne sait jamais si elle a
   été prise ou non. */
.fa-outil-actif{
  background:var(--fb-accent-light);color:var(--fb-sur-accent);font-weight:700;
}
.fa-aide-ville{
  margin:8px 0 0;font-size:.8rem;line-height:1.5;color:var(--fb-text-secondary);
}

/* ===================================================================
   LE ROBOT D'AIDE  (21/09)
   Une bulle en bas à droite, un panneau qui s'ouvre. Sur téléphone il
   prend toute la largeur : un panneau de 380 px sur un écran de 390
   laisse 5 px de marge de chaque côté, ce qui a l'air cassé.
   =================================================================== */
.fa-robot-bulle{
  position:fixed;right:18px;bottom:18px;z-index:1200;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;border:0;border-radius:var(--radius-pill);
  background:var(--fb-green);color:#fff;cursor:pointer;
  font-size:.92rem;font-weight:700;font-family:inherit;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.fa-robot-bulle:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(0,0,0,.5)}
.fa-robot-ic{font-size:1.15rem;line-height:1}

.fa-robot{
  position:fixed;right:18px;bottom:18px;z-index:1200;
  display:flex;flex-direction:column;
  width:min(380px, calc(100vw - 36px));max-height:min(560px, calc(100vh - 36px));
  background:var(--fb-card-bg);border:1px solid var(--fb-border);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-modal);
}
.fa-robot[hidden]{display:none}
.fa-robot-tete{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;background:var(--fb-green);color:#fff;
}
.fa-robot-tete strong{display:block;font-size:.95rem}
.fa-robot-tete span{display:block;font-size:.76rem;opacity:.85;margin-top:2px}
.fa-robot-x{
  border:0;background:transparent;color:#fff;cursor:pointer;font-size:1rem;
  padding:4px 6px;opacity:.8;line-height:1;
}
.fa-robot-x:hover{opacity:1}

.fa-robot-fil{
  flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--fb-bg-doux);
}
.fa-rb{max-width:92%;padding:10px 13px;border-radius:14px;font-size:.88rem;line-height:1.5}
.fa-rb p{margin:0}
.fa-rb-robot{align-self:flex-start;background:var(--fb-card-bg);
  border:1px solid var(--fb-border-doux);color:var(--fb-text-main)}
.fa-rb-moi{align-self:flex-end;background:var(--fb-green);color:#fff;font-weight:600}

.fa-rb-liste{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.fa-rb-item{
  display:block;padding:9px 11px;border-radius:11px;text-decoration:none;
  background:var(--fb-accent-light);color:var(--fb-sur-accent);
}
.fa-rb-item:hover{filter:brightness(.97)}
.fa-rb-titre{display:block;font-weight:700;font-size:.86rem;line-height:1.35}
.fa-rb-extrait{display:block;margin-top:3px;font-size:.78rem;opacity:.85;line-height:1.4}
.fa-rb-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;font-size:.72rem;opacity:.8}
.fa-rb-rub{font-weight:700}
.fa-rb-cta{margin-top:10px;width:100%;justify-content:center}

.fa-robot-bas{display:flex;gap:8px;padding:10px;border-top:1px solid var(--fb-border-doux);
  background:var(--fb-card-bg)}
.fa-robot-bas input{
  flex:1 1 auto;min-width:0;padding:10px 13px;border-radius:var(--radius-pill);
  border:1px solid var(--fb-border);background:var(--fb-input-bg);
  color:var(--fb-text-main);font-family:inherit;font-size:.88rem;
}
.fa-robot-go{
  flex:0 0 auto;width:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--fb-green);color:#fff;font-size:1rem;
}

/* Sur telephone, la barre du bas du site masquerait la bulle. */
@media(max-width:700px){
  .fa-robot-bulle{right:12px;bottom:12px;padding:11px 15px}
  .fa-robot-mot{display:none}
  .fa-robot{right:8px;left:8px;bottom:8px;width:auto;max-height:78vh}
}

/* La liste de l'essai à blanc de l'archivage. */
.fa-liste-arch{margin:10px 0 14px;padding-left:18px;font-size:.88rem;line-height:1.7}
.fa-liste-arch li{margin-bottom:4px}
.fa-liste-arch a{font-weight:600}

/* Le mot posé sur une question archivée. */
.fa-archive-note{
  margin:0 0 12px;padding:10px 13px;border-radius:var(--radius-box);
  background:var(--fb-input-bg);color:var(--fb-text-secondary);
  font-size:.86rem;line-height:1.5;
}

/* Le bouton « ouvrir un ticket » du robot. Il est SECONDAIRE par rapport
   à l'inscription : on ne veut pas transformer chaque question générale
   en dossier individuel à traiter à la main. */
.fa-rb-ticket{
  display:block;margin-top:8px;text-align:center;text-decoration:none;
  background:var(--fb-card-bg);border:1px solid var(--fb-green);
  color:var(--fb-green);font-weight:700;
}
.fa-rb-ticket:hover{background:var(--fb-accent-light)}
:root[data-theme="sombre"] .fa-rb-ticket{border-color:#8aad3e;color:#cde9a6}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .fa-rb-ticket{border-color:#8aad3e;color:#cde9a6}
}

/* ===================================================================
   LE BOUTON « NOS PARTENAIRES JURIDIQUES »  (22/09)
   En tête de la colonne de droite, avant le don : quelqu'un qui lit
   une question sur une OQTF a besoin d'un avocat avant d'avoir envie
   de donner. Ambre, comme le bouton du site : c'est la couleur que
   ses visiteurs associent déjà à « l'action importante ».
   =================================================================== */
.fa-partenaires{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:linear-gradient(135deg,#f0a020,#ffc356);
  color:#26190a;border:0;
}
.fa-partenaires:hover{filter:brightness(1.04)}
.fa-part-ic{font-size:1.7rem;line-height:1;flex:0 0 auto}
.fa-part-txt{flex:1 1 auto;min-width:0}
.fa-part-txt strong{display:block;font-size:.98rem;line-height:1.3}
.fa-part-txt span{display:block;margin-top:3px;font-size:.8rem;line-height:1.4;opacity:.85}
.fa-part-fl{flex:0 0 auto;font-size:1.2rem;font-weight:700}


/* ------------------------------------------------ canal Telegram --------
   « Supprime WhatsApp et mettre Telegram » (client, 22/09).

   Le bleu officiel de Telegram (#229ED9) ne porte pas du texte blanc de
   facon lisible : 3,02 de contraste (mesuré). Meme methode que pour l'autre bouton —
   on garde le bleu comme SIGNE (le logo, le liseré) et on assombrit la
   surface qui porte le texte. */
.fa-tg-bande{display:none}
@media (max-width:1100px){
  .fa-tg-bande{
    display:flex;align-items:center;gap:12px;
    margin:0 0 14px;padding:13px 15px;
    background:var(--fb-card-bg);border:1px solid var(--fb-border);
    border-left:4px solid #229ED9;border-radius:12px;
    box-shadow:var(--fb-ombre,0 1px 2px rgba(0,0,0,.08));
    text-decoration:none;color:inherit;
  }
  .fa-tg-bande:hover{text-decoration:none;border-color:#229ED9}
}
.fa-tg-ic{color:#229ED9;display:inline-flex;align-items:center;flex:0 0 auto}
.fa-carte-tg{border:2px solid rgba(34,158,217,.35)}
.fa-carte-tg h3{display:flex;align-items:center;gap:8px}
.fa-btn-tg{
  display:inline-flex;align-items:center;gap:8px;
  background:#1c6d94;width:100%;justify-content:center;padding:11px;
}
.fa-btn-tg:hover{background:#155370;text-decoration:none}