/* ============================================================
   Retours bêta (spec docs/specs/2026-10-05-retours-beta-design.md § 4) — classes .rb-*
   · le bouton « Un retour ? » de l'en-tête fixe et sa pastille (admin) ;
   · le panneau (latéral sur ordinateur, feuille plein écran sous 768 px) ;
   · le mode « Montrer l'endroit » (consigne, contour, voile léger) ;
   · la page #/retours (langage de surface : tête + volet calcaire ; une carte = un retour, objet qu'on manipule).
   AUCUNE couleur ici : tout vient de css/tokens.css (tests/charte.test.mjs). Le survol n'est jamais la dominante : jetons --survol-*.
   Le focus clavier est posé par css/couleur.css (anneau d'accent sur a, button, summary ; bordure + halo sur les champs).
   ============================================================ */

/* ---------- Bouton de l'en-tête ---------- */
.top-retours { flex: none; }
.top-retours[hidden] { display: none; }
.rb-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .75rem; border: 1px solid var(--ligne-2); border-radius: var(--c-r); color: var(--texte-2); font: inherit; font-size: .85rem; background: var(--s1); cursor: pointer; white-space: nowrap; transition: border-color var(--dur), color var(--dur); }
.rb-btn:hover { border-color: var(--survol-filet); color: var(--survol-texte); }
.rb-btn-ico { display: inline-flex; }
.rb-btn .ico { width: 16px; height: 16px; }
/* Pastille de l'admin : le nombre de retours « Reçu » (jamais une alerte rouge : c'est une file, pas une urgence). */
.rb-pastille { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 .3rem; display: inline-grid; place-items: center; border-radius: 9px; background: var(--accent); color: var(--sur-accent); font-family: var(--sans); font-weight: 600; font-size: .68rem; line-height: 1; letter-spacing: 0; }
.rb-pastille[hidden] { display: none; }
@media (max-width: 767px) {
  /* Sous 768 px : la bulle seule, cible tactile de 44 px. */
  .rb-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .rb-btn-lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rb-btn .ico { width: 20px; height: 20px; }
}

/* ---------- Panneau ---------- */
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rb-panneau { position: fixed; z-index: 100; top: var(--header-h); right: 0; bottom: 0; width: min(27rem, 100vw); display: flex; flex-direction: column; background: var(--s1); color: var(--texte); border-left: 1px solid var(--ligne-2); box-shadow: var(--shadow-elevated); animation: rb-entree 180ms var(--ease) both; }
.rb-panneau[hidden] { display: none; }
.rb-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem .8rem; border-bottom: 1px solid var(--ligne); }
.rb-tete-texte .kicker { margin-bottom: .35rem; }
.rb-titre { margin: 0; font-size: 2rem; }
.rb-fermer { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -.4rem -.5rem 0 0; border: 0; background: transparent; color: var(--texte-2); cursor: pointer; border-radius: var(--c-r); }
.rb-fermer:hover { color: var(--survol-texte); background: var(--survol-fond); }
.rb-fermer .ico { width: 20px; height: 20px; }
.rb-corps { flex: 1; min-height: 0; overflow: auto; padding: 1.1rem 1.25rem 1.4rem; overscroll-behavior: contain; }
.rb-texte, .rb-note-zone, .rb-champ, .rb-select { width: 100%; font: inherit; color: var(--texte); background: var(--s2); border: 1px solid var(--ligne-2); border-radius: var(--c-r); padding: .7rem .85rem; }
.rb-texte { min-height: 9rem; resize: vertical; font-size: 1rem; line-height: 1.5; }
.rb-texte::placeholder, .rb-champ::placeholder { color: var(--texte-3); }
.rb-compteur { margin: .35rem 0 0; text-align: right; font-family: var(--mono); font-size: .76rem; color: var(--texte-3); }
.rb-compteur.est-trop { color: var(--critique); }
.rb-endroit { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .9rem; }
.rb-endroit-aide { font-size: .8rem; color: var(--texte-3); }
.rb-endroit-phrase { margin: 0; font-size: .92rem; color: var(--texte); overflow-wrap: anywhere; }
.rb-endroit-liens { display: inline-flex; gap: .9rem; }
.rb-lien { background: none; border: 0; padding: .5rem 0; font: inherit; font-size: .86rem; color: var(--texte-2); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.rb-lien:hover { color: var(--survol-texte); }
.rb-message { margin: .9rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--critique); background: var(--critique-fond); color: var(--critique); font-size: .9rem; overflow-wrap: anywhere; }
.rb-message[hidden] { display: none; }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.3rem; margin-top: 1.1rem; }
.rb-actions .c-btn[disabled] { opacity: .5; cursor: not-allowed; }
.rb-voir-tout { color: var(--texte-2); font-size: .9rem; text-decoration: underline; text-underline-offset: .15em; }
.rb-voir-tout:hover { color: var(--survol-texte); }
.rb-merci { padding-top: .6rem; }
.rb-merci-titre { margin: 0 0 .4rem; font-family: var(--serif); font-size: 2.1rem; line-height: 1.05; outline: none; }
@keyframes rb-entree { from { opacity: 0; transform: translateX(14px); } }

@media (max-width: 767px) {
  /* Feuille plein écran : au-dessus de l'en-tête et de la navigation basse. */
  .rb-panneau { z-index: 130; top: 0; left: 0; width: auto; border-left: 0; animation-name: rb-feuille; }
  .rb-tete { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .rb-corps { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
  .rb-texte { min-height: 40dvh; }
  @keyframes rb-feuille { from { opacity: 0; transform: translateY(18px); } }
}
@media (max-width: 767px) { html.rb-ouvert { overflow: hidden; } }

/* ---------- Mode « Montrer l'endroit » ---------- */
.rb-teinte { position: fixed; inset: 0; z-index: 130; pointer-events: none; background: var(--voile); }
.rb-contour { position: fixed; z-index: 135; pointer-events: none; border: 2px solid var(--accent); background: var(--accent-fond); border-radius: 2px; transition: left 60ms linear, top 60ms linear, width 60ms linear, height 60ms linear; }
.rb-contour[hidden] { display: none; }
.rb-consigne { position: fixed; z-index: 140; top: calc(var(--header-h) + .7rem); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 1.5rem); padding: .55rem .6rem .55rem 1.1rem; background: var(--accent-bande); color: var(--sur-portail); border-radius: var(--c-r); box-shadow: var(--shadow-elevated); font-size: .95rem; }
.rb-consigne-texte { font-weight: 500; }
/* « Annuler » dans la consigne (fond profond) : bouton propre, encre claire (le colorateur de couleur.css exclut déjà les bandes profondes
   mais pas ce bouton-ci : on ne passe pas par .c-btn). */
.rb-consigne-annuler { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: .5em .9em; font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; color: var(--sur-portail); background: transparent; cursor: pointer; }
.rb-consigne-annuler:hover { color: var(--survol-texte-profond); border-color: var(--survol-filet-profond); }
:root .rb-consigne .rb-consigne-annuler:focus-visible { outline: 2px solid var(--sur-portail); outline-offset: 2px; }
@media (max-width: 767px) { .rb-consigne { left: .75rem; right: .75rem; transform: none; max-width: none; justify-content: space-between; } }
html.rb-montrer, html.rb-montrer * { cursor: crosshair !important; }
html.rb-montrer .rb-consigne, html.rb-montrer .rb-consigne * { cursor: pointer !important; }

/* ---------- Page #/retours ---------- */
.rb-barre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--ligne); }
.rb-onglets { display: inline-flex; gap: 1.6rem; }
.rb-onglet { min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -.45rem; font-family: var(--sans); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); cursor: pointer; }
.rb-onglet:hover { color: var(--survol-texte); }
.rb-onglet.est-actif { color: var(--accent); border-bottom-color: var(--accent); }
.rb-filtre { display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .45rem; }
.rb-filtre-lib { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.rb-select { width: auto; min-height: 40px; padding: .4rem .7rem; font-size: .92rem; }
.rb-lecture { margin: .8rem 0 .2rem; min-height: 1.2em; font-size: .85rem; color: var(--texte-3); }
.rb-liste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.rb-vide { padding: 1.3rem 0; color: var(--texte-2); font-style: italic; }
.rb-vide p { margin: 0 0 .7rem; }
.rb-vide-mini { margin: .2rem 0; font-size: .85rem; color: var(--texte-3); }
.rb-carte { padding: 1rem 1.1rem 1.1rem; background: var(--s1); border: 1px solid var(--ligne); border-radius: var(--c-r); }
.rb-carte.est-masque { border-style: dashed; border-color: var(--ligne-2); }
.rb-carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.rb-carte-num { font-family: var(--mono); font-size: .76rem; color: var(--texte-3); }
.rb-carte-page { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.rb-carte-date { font-size: .8rem; color: var(--texte-3); }
.rb-statut, .rb-masque { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 2px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rb-statut { margin-left: auto; background: var(--s3); color: var(--texte-2); }
.rb-statut-en_cours { background: var(--accent-fond); color: var(--accent); }
.rb-statut-corrige { background: var(--ok-fond); color: var(--ok); }
.rb-statut-pas_retenu, .rb-statut-doublon { color: var(--texte-3); }
.rb-masque { background: var(--alerte-fond); color: var(--alerte); }
.rb-carte-texte { margin: .65rem 0 0; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rb-carte-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.rb-moi-aussi { min-height: 36px; padding: .3rem .85rem; background: transparent; border: 1px solid var(--ligne-2); border-radius: var(--c-r); font: inherit; font-size: .86rem; color: var(--texte-2); cursor: pointer; }
.rb-moi-aussi:hover { border-color: var(--survol-filet); background: var(--survol-fond); color: var(--survol-texte); }
.rb-moi-aussi.est-actif { background: var(--accent-fond); border-color: var(--accent-filet); color: var(--accent); }
.rb-soutiens, .rb-le-mien { font-size: .82rem; color: var(--texte-3); }
@media (pointer: coarse) { .rb-moi-aussi { min-height: 44px; } .rb-lien { padding: .8rem 0; } }

/* Admin : même page, de quoi trier */
.rb-admin { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ligne-2); display: grid; gap: .9rem; }
.rb-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .86rem; }
.rb-dl dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); padding-top: .15rem; }
.rb-dl dd { margin: 0; overflow-wrap: anywhere; }
.rb-sous-titre { display: block; margin: 0 0 .35rem; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.rb-contexte .rb-sous-titre { margin-top: .9rem; }
.rb-contexte summary { cursor: pointer; font-size: .86rem; color: var(--texte-2); padding: .2rem 0; }
.rb-contexte[open] summary { margin-bottom: .6rem; }
.rb-erreurs { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .76rem; }
.rb-erreurs li { padding: .35rem 0; border-top: 1px solid var(--ligne); overflow-wrap: anywhere; }
.rb-note-zone { min-height: 3.4rem; resize: vertical; font-size: .92rem; margin-bottom: .5rem; }
.rb-statuts { display: flex; flex-wrap: wrap; gap: .4rem; }
.rb-saisie { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.rb-saisie[hidden] { display: none; }
.rb-champ { flex: 1; min-width: 12rem; width: auto; padding: .45rem .7rem; font-size: .92rem; }
.rb-admin .c-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 767px) {
  /* Cibles tactiles de 44 px partout dans le panneau et sur la page. */
  .rb-panneau .c-btn, .rb-page .c-btn, .rb-consigne-annuler { min-height: 44px; }
  .rb-barre { align-items: stretch; flex-direction: column; }
  .rb-filtre { padding-bottom: 0; }
  .rb-select { flex: 1; }
  .rb-onglet { margin-bottom: 0; }
  .rb-statut { margin-left: 0; }
  .rb-dl { grid-template-columns: minmax(0, 1fr); }
  .rb-dl dt { padding-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .rb-panneau, .rb-contour { animation: none; transition: none; } }