/* 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:#0b3c32;            /* vert officiel de l'association */
  --fb-green-hover:#082d26;
  --fb-accent-light:#e6f4f1;
  --fb-sur-accent:#0b3c32;   /* 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:#e41e63;
  --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:#1f8f77;
  --fb-green-hover:#26a88c;
  --fb-accent-light:#1c3b35;
  --fb-sur-accent:#6ee7c8;
  --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:#1f8f77;
    --fb-green-hover:#26a88c;
    --fb-accent-light:#1c3b35;
    --fb-sur-accent:#6ee7c8;
    --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)}
/* `#c4155200` : 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:#c41552}
.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:#0d5a4a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .fa-badge-asso{background:#0d5a4a}
}
.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 : `#0b3c32` 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, `#0b3c32` 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)}
.fa-guide-image{width:100%;max-height:260px;object-fit:cover;display:block;margin-top:11px}
.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:#c2298f}
.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}