/* Niger Market — style unique du site. Sobre, gros texte, très léger. */

:root {
  --vert: #15803d;
  --orange: #ea580c;
  --fond: #fff;
  --gris-clair: #f1f2ee;
  --texte: #1c1917;
  --gris: #5c5852;
  --trait: #d9dbd3;
}

* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 640px;
  min-height: 100vh;
  padding-bottom: 4.3rem;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }
i { font-style: normal; }
main { padding: 0 .8rem; }

h1 { font-size: 1.15rem; margin: .2rem 0; line-height: 1.25; }
h2 { font-size: 1rem; margin: 1.1rem 0 .4rem; }

.ico { width: 1.3em; height: 1.3em; flex: none; }

input:focus, select:focus, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--texte); outline-offset: 2px;
}

/* En-tête */
.entete { position: sticky; top: 0; z-index: 2; background: var(--fond); border-bottom: 1px solid var(--trait); }
.haut { display: flex; align-items: center; justify-content: space-between; padding: .35rem .8rem; }
/* Couleurs exactes du logo pour le nom du site */
.marque { display: flex; align-items: center; gap: .4rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: #0d4b3e; }
.marque b { color: #ff6f0f; }

/* Onglets des catégories : une ligne de mots qui défile sur le côté */
.onglets { display: flex; gap: 1.2rem; padding: 0 .8rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { padding: .4rem 0 .35rem; border-bottom: 3px solid transparent; color: var(--gris); font-size: .92rem; }
.onglets .actif { border-color: var(--orange); color: var(--texte); font-weight: 700; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 1.1rem;
  border: 0; border-radius: 99px;
  font: inherit; font-weight: 700; color: #fff; cursor: pointer;
}
.bouton.vert { background: var(--vert); }
.bouton.orange { background: var(--orange); }
.bouton.petit { min-height: 2.2rem; padding: 0 .85rem 0 .65rem; font-size: .9rem; }
.bouton.large { width: 100%; }
.bouton:active { opacity: .8; }

/* Recherche */
.slogan { margin: .8rem 0 .5rem; font-size: 1.05rem; font-weight: 700; }
form { margin-top: .6rem; }
.recherche { display: flex; align-items: center; padding: .2rem; border: 2px solid var(--texte); border-radius: 99px; background: var(--gris-clair); }
.recherche input { flex: 1; min-width: 0; height: 2.3rem; padding: 0 .8rem; border: 0; background: none; color: var(--texte); font: inherit; outline: 0; }
.recherche button { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: var(--orange); color: #fff; cursor: pointer; }

/* Sous-catégories : petites pastilles qui défilent sur le côté */
.sous { display: flex; gap: .4rem; margin: .5rem -.8rem 0; padding: 0 .8rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.sous::-webkit-scrollbar { display: none; }
.sous a { padding: .3rem .75rem; border-radius: 99px; background: var(--gris-clair); font-size: .85rem; }
.sous .actif { background: var(--texte); color: #fff; font-weight: 600; }

/* Pastilles de filtre */
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.pastille {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.25rem; padding: 0 .8rem;
  border: 1px solid var(--gris); border-radius: 99px;
  font-size: .9rem; cursor: pointer; list-style: none;
}
.pastille::-webkit-details-marker { display: none; }
.pastille.choisie { border: 2px solid var(--texte); font-weight: 700; }
.pastille select { max-width: 9rem; height: 2.1rem; border: 0; background: none; color: inherit; font: inherit; outline: 0; }
details[open] { flex-basis: 100%; }
.panneau { margin-top: .7rem; padding: 0 .8rem .8rem; border: 1px solid var(--trait); border-radius: 14px; }
.panneau fieldset { margin: 0; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--trait); }
.panneau legend { display: flex; align-items: center; gap: .4rem; float: left; width: 100%; margin-bottom: .3rem; padding: 0; font-weight: 700; }
.panneau label { clear: both; display: flex; align-items: center; gap: .7rem; min-height: 2.7rem; cursor: pointer; }
.panneau label small { color: var(--gris); }
.panneau input[type=radio], .panneau input[type=checkbox] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--texte); }
.panneau input[type=text] {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0 .9rem;
  border: 1px solid var(--gris); border-radius: 99px;
  background: var(--fond); color: var(--texte); font: inherit;
}
.deux { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.panneau > .deux { margin-top: .8rem; }
.bouton.contour { border: 1px solid var(--texte); color: var(--texte); font-weight: 600; }

.titre-liste { margin-top: .9rem; }
.compte { margin: 0 0 .4rem; color: var(--gris); font-weight: 600; }
.ligne-titre { display: flex; align-items: baseline; justify-content: space-between; }
.ligne-titre a { font-weight: 600; text-decoration: underline; }

/* Liste d'annonces : photo à gauche, texte à droite */
.carte { display: flex; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.coeur {
  position: absolute; top: .35rem; right: .35rem;
  display: flex; align-items: center; gap: .25rem;
  min-height: 1.9rem; padding: 0 .5rem;
  border-radius: 99px; background: #fff; color: var(--texte);
  font-size: .82rem; font-weight: 600; box-shadow: 0 1px 3px #0003;
}
.grande .coeur { top: .6rem; right: .6rem; min-height: 2.5rem; padding: 0 .8rem; font-size: .95rem; }
.photo { position: relative; display: grid; place-items: center; flex: none; width: 34%; aspect-ratio: 1; border-radius: 10px; background: var(--gris-clair); color: #a8a69e; font-size: 1.6rem; }
.infos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.prix { font-size: 1.05rem; }
.marques { display: flex; gap: .3rem; }
.marques i { padding: 0 .4rem; border: 1px solid var(--texte); border-radius: 5px; font-size: .75rem; font-weight: 600; }
.lieu { color: var(--gris); font-size: .82rem; }
.infos .lieu:first-of-type { margin-top: auto; }

.pages { display: grid; gap: .5rem; margin-top: 1rem; }

/* Page d'une annonce */
.photo.grande { width: 100%; aspect-ratio: 4 / 3; margin: .8rem 0; font-size: 3rem; }
.annonce .prix { display: block; font-size: 1.3rem; margin: .1rem 0 .3rem; }
.annonce .lieu { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 0; font-size: .9rem; }
.annonce p { margin: 0; }
.vendeur { display: flex; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--trait); border-radius: 14px; }
.vendeur div { display: flex; flex-direction: column; }
.vendeur div span { color: var(--gris); font-size: .9rem; }
.rond { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--gris-clair); font-size: 1.2rem; font-weight: 700; }
.annonce .prudence { display: flex; gap: .6rem; margin-top: 1rem; padding: .7rem; border-radius: 14px; background: var(--gris-clair); font-size: .9rem; }
.signaler { display: flex; align-items: center; gap: .4rem; padding: 1rem 0; color: var(--gris); text-decoration: underline; font-size: .9rem; }
.actions { position: sticky; bottom: 3.5rem; display: flex; gap: .5rem; padding: .4rem 0; background: var(--fond); }
.actions .bouton { flex: 1; min-height: 2.6rem; font-size: .95rem; }
.actions span { display: flex; flex-direction: column; line-height: 1.15; }
.actions small { font-weight: 400; font-size: .7rem; }

/* Messages : rien trouvé, bientôt disponible */
.vide { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 3rem 1rem; text-align: center; }
.vide strong { font-size: 1.15rem; }
.vide p { margin: 0 0 1rem; color: var(--gris); }
.note { margin: 1.5rem 0 0; text-align: center; color: var(--gris); font-size: .8rem; }

/* Barre du bas */
.barre {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; max-width: 640px; margin: 0 auto;
  background: var(--fond); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem 0 .35rem; color: var(--gris); font-size: .7rem; }
.barre .ico { width: 1.4rem; height: 1.4rem; }
.barre .actif { color: var(--texte); font-weight: 700; }

/* Photos des annonces */
.photo { overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galerie { position: absolute; inset: 0; display: flex; gap: .3rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
/* Sur la page de l'annonce, la photo est montrée en entier, sans être rognée */
.galerie img { position: static; flex: none; scroll-snap-align: center; object-fit: contain; }
/* Plusieurs photos : la suivante dépasse un peu, pour montrer qu'on peut glisser */
.galerie.plusieurs img { width: 90%; }
button.coeur { border: 0; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.coeur.aime .ico { fill: var(--orange); stroke: var(--orange); }

/* Messages en haut de page */
.info { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: #e7f6ec; color: #0d4b3e; font-weight: 600; }
.info.arret { background: #fdeee2; color: #9a3412; }
.texte { white-space: pre-line; overflow-wrap: anywhere; }

/* Formulaires : dépôt d'annonce, compte */
.formulaire { display: grid; gap: .5rem; margin-top: .8rem; }
.formulaire h1 { margin-bottom: .2rem; }
.formulaire label, .formulaire legend { font-weight: 600; margin-top: .4rem; }
.formulaire input[type=text], .formulaire input[type=tel], .formulaire input[type=password], .formulaire select, .formulaire textarea {
  width: 100%; min-height: 2.75rem; padding: .5rem .8rem;
  border: 1px solid var(--gris); border-radius: 10px;
  background: var(--fond); color: var(--texte); font: inherit;
}
.formulaire .court { width: 7rem; letter-spacing: .3em; }
.formulaire fieldset { margin: 0; padding: 0; border: 0; }
.formulaire .case { display: flex; align-items: center; gap: .6rem; min-height: 2.4rem; margin: 0; font-weight: 400; cursor: pointer; }
.formulaire .case input { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--texte); }
.formulaire label.bouton { margin-top: 0; cursor: pointer; }
.formulaire .deux, .formulaire > .bouton, .etape > .bouton { margin-top: .6rem; }
.aide { margin: 0; color: var(--gris); font-size: .88rem; }
.pas { margin: 0; color: var(--gris); font-size: .85rem; font-weight: 600; }
.lien { padding: .5rem 0; border: 0; background: none; color: var(--texte); font: inherit; text-align: center; text-decoration: underline; cursor: pointer; }
.etape { display: grid; gap: .5rem; }
.etape + .etape { margin-top: 1.5rem; }
.js .etape { display: none; margin-top: 0; }
.js .etape.vue { display: grid; }
/* Le vrai bouton de choix de fichier est remplacé par notre bouton, mais reste utilisable au clavier */
.fichier { position: absolute; width: 1px; height: 1px; opacity: 0; }
.apercu { display: flex; gap: .4rem; overflow-x: auto; color: var(--gris); font-size: .9rem; }
.apercu img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 8px; object-fit: cover; }
[hidden] { display: none !important; }

/* Mes annonces */
.mienne { padding-bottom: .7rem; border-bottom: 1px solid var(--trait); }
.mienne .carte { border: 0; padding-bottom: .4rem; }
.etat { margin: 0 0 .5rem; font-size: .88rem; font-weight: 600; color: #0d4b3e; }
.etat.arret { color: #9a3412; }
.gestes { display: flex; flex-wrap: wrap; gap: .4rem; }
.gestes form { margin: 0; }
.gestes button { min-height: 2.2rem; padding: 0 .8rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; font-size: .88rem; cursor: pointer; }

/* Messagerie */
.nb { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 700; }
.barre a { position: relative; }
.barre .nb { position: absolute; top: .2rem; left: 50%; margin-left: .3rem; }
.conversations a { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--trait); }
.resume { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resume strong { display: flex; justify-content: space-between; gap: .5rem; }
.resume small { color: var(--gris); font-size: .78rem; font-weight: 400; white-space: nowrap; }
.sujet, .apercu { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .88rem; }
.apercu { color: var(--gris); }
.nouveau .apercu { color: var(--texte); font-weight: 700; }
.tete-conv { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; }
.tete-conv > a { padding: 0 .4rem; font-size: 1.8rem; line-height: 1; }
.tete-conv > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tete-conv span a, .tete-conv span span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gris); font-size: .85rem; }
.tete-conv span a { text-decoration: underline; }
.tete-conv .rond { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
main > .prudence { display: flex; gap: .5rem; margin: 0 0 .8rem; padding: .5rem .6rem; border-radius: 10px; background: var(--gris-clair); font-size: .8rem; }
.fil { display: flex; flex-direction: column; gap: .4rem; padding-bottom: 8.5rem; }
.bulle { align-self: flex-start; max-width: 82%; padding: .45rem .7rem; border-radius: 14px 14px 14px 4px; background: var(--gris-clair); overflow-wrap: anywhere; }
.bulle span { white-space: pre-line; }
.bulle.moi { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #dff3e4; }
.bulle img { display: block; max-width: 100%; max-height: 16rem; margin-bottom: .2rem; border-radius: 8px; }
.bulle small { display: block; color: var(--gris); font-size: .7rem; text-align: right; }
/* Zone d'écriture, fixée juste au-dessus de la barre du bas */
.envoi { position: fixed; left: 0; right: 0; bottom: 3.4rem; z-index: 1; max-width: 640px; margin: 0 auto; padding: .4rem .8rem; background: var(--fond); border-top: 1px solid var(--trait); }
.rapides { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-bottom: .4rem; }
.rapides::-webkit-scrollbar { display: none; }
.rapides button { flex: none; min-height: 2rem; padding: 0 .7rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; font-size: .85rem; cursor: pointer; }
.saisie { display: flex; align-items: center; gap: .4rem; }
.saisie input[type=text] { flex: 1; min-width: 0; height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; }
.saisie button, .joindre { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; cursor: pointer; }
.saisie .partir { background: var(--orange); color: #fff; }
.notif { margin: .5rem 0; }
.alerte { margin: 0 0 .4rem; }
.alerte button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: 0 .8rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; font-size: .88rem; cursor: pointer; }
.gestes a { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 .8rem; border: 1px solid var(--gris); border-radius: 99px; font-size: .88rem; }
.joindre { background: var(--gris-clair); color: var(--texte); }

/* Retours du 08/10/2026 */
/* Vignette d'une annonce dans une liste : la photo mène à l'annonce, le cœur la met en favori */
.vignette { position: relative; flex: none; width: 34%; }
.vignette .photo { width: 100%; }
.vignette form, .photo.grande form { margin: 0; }
.vignette button.coeur { font-size: .82rem; }
a.infos { flex: 1; }

/* Accueil : deux colonnes, grandes photos */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .7rem; }
.grille .carte { flex-direction: column; gap: .4rem; padding: 0; border: 0; }
.grille .vignette { width: 100%; }

/* Page d'une annonce */
.nb-photos { position: absolute; right: .6rem; bottom: .6rem; display: flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 99px; background: #000a; color: #fff; font-size: .8rem; font-weight: 600; }
.nb-photos .ico { width: 1rem; height: 1rem; }
a.vendeur > .ico { margin-left: auto; color: var(--gris); }
.tete-vendeur { margin-top: .8rem; }
.actions .bouton.whatsapp { flex: none; width: 3.2rem; padding: 0; background: #25d366; color: #fff; }
.bouton.whatsapp .ico { width: 1.6rem; height: 1.6rem; }
.vers-categorie { display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem; padding: .35rem .8rem; border-radius: 99px; background: #e7f6ec; color: #0d4b3e; font-size: .9rem; font-weight: 600; }
.vers-categorie .ico { width: 1rem; height: 1rem; }

/* Photos en plein écran */
body.plein-ecran { max-width: none; padding: 0; background: #000; }
.plein-ecran img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto .4rem; }
.fermer { position: fixed; top: .7rem; left: .7rem; z-index: 3; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 1px 4px #0006; }
/* Trois boutons côte à côte : le numéro reste sur une ligne */
.actions .bouton { padding: 0 .6rem; }
.actions small { white-space: nowrap; font-size: .66rem; }

/* Espace admin */
.retour-admin { display: inline-block; padding: .7rem 0 0; color: var(--gris); font-size: .9rem; }
.menu-admin { margin-top: .6rem; border-top: 1px solid var(--trait); }
.ligne-admin { display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; border-bottom: 1px solid var(--trait); font-weight: 600; }
.ligne-admin span { flex: 1; }
.ligne-admin .ico { color: var(--gris); }
.motifs { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .88rem; }
.texte-court { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gestes + .gestes { margin-top: .4rem; }
.changer { margin-top: .4rem; }
.changer select, .changer input, .zone input { min-height: 2.2rem; padding: 0 .7rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; font-size: .88rem; min-width: 0; }
.zone { display: grid; grid-template-columns: 1fr 1fr 3.2rem; gap: .4rem; margin: .7rem 0 .4rem; }
.zone button { grid-column: 1 / -1; min-height: 2.2rem; border: 1px solid var(--gris); border-radius: 99px; background: var(--fond); color: var(--texte); font: inherit; font-size: .88rem; cursor: pointer; }
.gestes .aide { align-self: center; margin-right: auto; }
.eteinte { opacity: .55; }
.souligne { text-decoration: underline; }
.grands { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.grands div { padding: .8rem; border: 1px solid var(--trait); border-radius: 14px; }
.grands strong { display: block; font-size: 2rem; line-height: 1.1; color: #0d4b3e; }
.grands span { color: var(--gris); font-size: .82rem; }
.chiffres { width: 100%; border-collapse: collapse; font-size: .9rem; }
.chiffres th, .chiffres td { padding: .4rem .3rem; border-bottom: 1px solid var(--trait); text-align: right; }
.chiffres th:first-child, .chiffres td:first-child { text-align: left; }
.chiffres th { color: var(--gris); font-size: .8rem; font-weight: 600; }

/* Interrupteur : rouge quand c'est éteint, vert quand c'est allumé */
.interrupteur { display: flex; align-items: center; gap: .7rem; min-height: 2.6rem; font-weight: 600; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur span { position: relative; flex: none; width: 3rem; height: 1.7rem; border-radius: 99px; background: #dc2626; transition: background .15s; }
.interrupteur span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur input:checked + span { background: #16a34a; }
.interrupteur input:checked + span::after { left: 1.5rem; }
.interrupteur input:focus-visible + span { outline: 2px solid var(--texte); outline-offset: 2px; }

/* Bandeau « Installer l'application » */
.installer { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; padding: .5rem .6rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--gris-clair); }
.installer img { flex: none; border-radius: 10px; }
.installer span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.25; }
.installer small { color: var(--gris); font-size: .8rem; }
.installer .iphone, .installer.ios .android, .installer.ios .oui { display: none; }
.installer.ios .iphone { display: block; }
.installer .non { flex: none; width: 2.2rem; height: 2.2rem; border: 0; background: none; color: var(--gris); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* Pied de page et conditions d'utilisation */
.pied { margin-top: 2rem; padding: 1rem 0 .5rem; border-top: 1px solid var(--trait); text-align: center; font-size: .82rem; }
.pied a { color: var(--gris); text-decoration: underline; }
.legal { padding-top: .8rem; }
.legal h2 { margin-top: 1.4rem; }
.legal p { margin: .5rem 0; }
.legal ul { margin: .4rem 0; padding-left: 1.2rem; }
.legal li { margin-bottom: .35rem; }

/* Décisions de modération sur la page d'une annonce (vues seulement par l'admin et les modérateurs) */
.moderation { margin: .4rem 0 1rem; padding: .7rem; border: 1px dashed var(--gris); border-radius: 14px; }
.moderation .gestes { margin-top: .5rem; }

/* Code de secours, affiché une seule fois */
.code-secours { margin: .4rem 0; padding: 1rem .6rem; border: 2px dashed var(--texte); border-radius: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; }