/* ==========================================================================
   W.O.L.F. — Poste de recette : feuille de style AUTONOME.
   Charte maison calée sur le CODE Punchbox (web/css/style.css) :
   - boutons BOMBÉS anthracite à filet laiton (clair en haut, s'assombrit vers le
     bas, sans bande centrale), angles 2 px (A019), cible tactile 44 px ;
   - DEUX thèmes (sombre par défaut, clair) avec bascule ;
   - état OK / PAS OK / PAS PU TESTER à la couleur ET à la forme (accessibilité) ;
   - densité (largeur min(1600px,95vw), pas de désert), aucun ascenseur interne de
     la colonne de lecture (la page défile), prefers-reduced-motion respecté.
   Contraste visé AA (4.5:1) dans les deux thèmes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   JETONS — thème SOMBRE (défaut de cet outil interne, comme la console).
   -------------------------------------------------------------------------- */
:root, [data-theme="sombre"] {
  color-scheme: dark;
  --bg:        #14171c;   /* fond principal */
  --bg-2:      #1b1f26;   /* surfaces */
  --bg-3:      #232833;   /* surfaces élevées / champs */
  --line:      #39414f;   /* bordures */
  --line-2:    #4b5568;
  --text:      #f2f4f8;   /* texte principal */
  --muted:     #b9c1cf;   /* texte secondaire (>= AA sur --bg) */
  --accent:    #f0a020;   /* ambre identité (aplats, focus) */
  --accent-2:  #b06a08;   /* arête ambre */
  --accent-tx: #14171c;   /* texte sur ambre */
  --accent-txt:#f0a020;  /* accent EN TEXTE (>=AA sur surfaces sombres) */
  --link:      #f0c675;   /* liens : ambre éclairci, > 7:1 sur --bg */
  --ok:        #6ad48c;   --ok-tx: #b7f0c7;  --ok-bg:  #12331f;
  --pasok:     #ef6b66;   --pasok-tx: #ffd7d5; --pasok-bg: #3a1513;
  --paspu:     #e2b755;   --paspu-tx: #ffe9b8; --paspu-bg: #33270c;
  --radius:    2px;       /* A019 — angles 2 px */
  --panel-w:   380px;

  /* Bouton bombé anthracite à filet laiton (calé sur Punchbox, thème sombre). */
  --btn-p-texte: #f7ecd2;
  --btn-p-fond:  linear-gradient(180deg, #565a63 0%, #464a53 26%, #363a42 66%, #2a2d34 100%);
  --btn-p-ombre: inset 0 1px 0 rgba(255,245,220,.28), inset 0 -2px 3px rgba(0,0,0,.55), 0 0 0 1px #a9873f, 0 2px 0 #101216, 0 3px 5px rgba(0,0,0,.5);
  --btn-p-plat:  inset 0 1px 0 rgba(255,245,220,.28), inset 0 -2px 3px rgba(0,0,0,.55), 0 0 0 1px #a9873f, 0 3px 5px rgba(0,0,0,.5);
  /* Bouton d'ACCENT (ambre) — même relief, filet plus chaud. */
  --btn-a-fond:  linear-gradient(180deg, #f6b53f 0%, #f0a020 34%, #d8890f 78%, #c07d0c 100%);
  --btn-a-texte: #14171c;
  --anneau-fond: var(--bg-2);   /* fond réel derrière l'anneau de focus */
}

/* --------------------------------------------------------------------------
   JETONS — thème CLAIR (bascule). Palette bakélite/laiton du site (clair).
   -------------------------------------------------------------------------- */
[data-theme="clair"] {
  color-scheme: light;
  --bg:        #faf7f0;
  --bg-2:      #f3ede0;
  --bg-3:      #efe8d8;
  --line:      #e6dfd0;
  --line-2:    #d1c7ae;
  --text:      #1b1a17;   /* 16:1 sur --bg */
  --muted:     #5a5346;   /* 7:1 sur --bg */
  --accent:    #c9a227;   /* laiton en aplat */
  --accent-2:  #8a6d35;
  --accent-tx: #1b1a17;
  --accent-txt:#786010;  /* laiton assombri : accent EN TEXTE (>=4.9:1 clair) */
  --link:      #7e6410;   /* laiton assombri, 5.3:1 sur --bg */
  --ok:        #0e7048;   --ok-tx: #0e5236;  --ok-bg:  #e6f3ec;
  --pasok:     #b3261e;   --pasok-tx: #7a1712; --pasok-bg: #fbeceb;
  --paspu:     #7a5c00;   --paspu-tx: #5c4600; --paspu-bg: #f6efda;

  --btn-p-texte: #3d3a33;
  --btn-p-fond:  linear-gradient(180deg, #eeebe4 0%, #e0dcd2 28%, #cec9bc 68%, #bcb6a6 100%);
  --btn-p-ombre: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(80,72,55,.2), 0 0 0 1px #8f886f, 0 2px 0 #9d9583, 0 3px 5px rgba(80,72,55,.22);
  --btn-p-plat:  inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(80,72,55,.2), 0 0 0 1px #8f886f, 0 3px 5px rgba(80,72,55,.22);
  --btn-a-fond:  linear-gradient(180deg, #e3c34e 0%, #cfa62c 34%, #b78e1c 78%, #a67f14 100%);
  --btn-a-texte: #1b1a17;
  --anneau-fond: var(--bg-2);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.25; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.r-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   BOUTONS — relief bombé (Punchbox), cible tactile 44 px, anneau de focus.
   -------------------------------------------------------------------------- */
.r-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--btn-p-texte);
  background: var(--btn-p-fond);
  border: 1px solid transparent;            /* le FILET laiton vient de l'ombre */
  border-radius: var(--radius);
  box-shadow: var(--btn-p-ombre);
  padding: .55rem 1rem; min-height: 44px;
  transition: filter .12s ease, box-shadow .05s ease, top .05s ease;
}
.r-btn:hover { filter: brightness(1.07); }
.r-btn:active { top: 2px; box-shadow: var(--btn-p-plat); }
.r-btn--primary {
  color: var(--btn-a-texte); background: var(--btn-a-fond);
  box-shadow: var(--btn-p-ombre);
}
.r-btn--small { min-height: 34px; padding: .3rem .6rem; font-size: .86rem; }
.r-btn--big  { font-size: 1.3rem; padding: 1rem 2.2rem; }
.r-btn--danger {
  color: #fff;
  background: linear-gradient(180deg, #e5605a 0%, #d0433d 34%, #b3312b 78%, #9c2a25 100%);
}
.r-linkbtn {
  background: none; border: 0; color: var(--link); cursor: pointer;
  font: inherit; padding: .2rem .25rem; text-decoration: underline; min-height: 34px;
}
.r-linkbtn:hover { filter: brightness(1.15); }
.r-theme { gap: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .r-btn { transition: filter .12s ease; }
  .r-btn:active { top: 0; box-shadow: var(--btn-p-ombre); }
  .r-dictee.is-rec { animation: none !important; }
}

/* ==========================================================================
   ÉCRANS CENTRÉS — connexion, « qui êtes-vous ? »
   ========================================================================== */
.r-centered { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.r-login {
  width: min(460px, 100%); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem;
}
.r-login h1 { margin-top: 0; }
.r-sub { color: var(--muted); margin-top: -.4rem; }
.r-field { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0; }
.r-field label, .r-field > span { font-weight: 600; }
.r-field--inline { flex-direction: row; align-items: center; gap: .5rem; margin: 0; }
.r-form input, .r-remarque, textarea, .r-note-form textarea,
input[type="text"], input[type="password"], input[type="date"], input[type="time"], select {
  font: inherit; color: var(--text); background: var(--bg-3);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: .6rem .7rem;
}
.r-alert {
  background: var(--pasok-bg); border: 1px solid var(--pasok);
  border-radius: var(--radius); padding: .7rem .9rem; color: var(--pasok-tx);
}
.r-note { color: var(--muted); font-size: .9rem; }
.r-qui { display: flex; gap: 1.2rem; justify-content: center; margin: 1.4rem 0 .6rem; flex-wrap: wrap; }
.r-qui-op { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .4rem; }
.r-logout-min { text-align: center; margin-top: 1rem; }

/* ==========================================================================
   EN-TÊTE DE TRAVAIL
   ========================================================================== */
.r-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: .55rem 1rem; padding-right: calc(var(--panel-w) + 1.5rem);
}
.r-topbar__id { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.r-who { color: var(--muted); }
.r-who b { color: var(--accent-txt); }
.r-topbar__prog { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-topbar__prog #r-prog-total { color: var(--text); font-weight: 700; }
.r-inline { display: inline; margin: 0; }

/* ==========================================================================
   ZONE DE TRAVAIL — la recette. Densité : occupe la largeur, pas de désert.
   Aucun ascenseur interne : la colonne de lecture défile avec la page.
   ========================================================================== */
.r-main {
  max-width: none;
  margin: 0 0 6rem;
  padding: 1.4rem clamp(1rem, 2vw, 2rem) 1.4rem clamp(1rem, 2vw, 2rem);
  margin-right: calc(var(--panel-w) + 1.5rem);
}
.r-intro h1 { margin-top: .3rem; }
.r-intro p { color: var(--muted); max-width: 80ch; }
.r-intro p b { color: var(--text); }

.r-recovery {
  background: var(--paspu-bg); border: 1px solid var(--paspu);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; color: var(--text);
}

.r-savebar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0; padding: .7rem; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.r-savebar--sticky {
  position: sticky; bottom: 0; z-index: 20;
  box-shadow: 0 -6px 16px rgba(0,0,0,.35);
}
.r-savestate { color: var(--muted); font-size: .9rem; }
.r-savestate[data-dirty="1"] { color: var(--paspu); font-weight: 600; }
.r-savestate[data-dirty="saved"] { color: var(--ok); font-weight: 600; }

.r-section { margin: 2rem 0; }
.r-section__title {
  font-size: 1.5rem; border-bottom: 2px solid var(--accent-2);
  padding-bottom: .3rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.r-section__prog { font-size: .95rem; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.r-page { margin: 1.3rem 0; }
.r-page__title { font-size: 1.15rem; margin-bottom: .4rem; }
.r-page__url { font-weight: 400; font-size: .85rem; word-break: break-all; margin-left: .4rem; color: var(--link); }
.r-newtab { font-weight: 700; }

/* Points de contrôle — deux colonnes sur écran large (densité, pas de désert). */
.r-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}
.r-point {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.r-point:target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(240,160,32,.35); }
.r-point__head { display: flex; gap: .7rem; }
.r-num {
  font-weight: 700; color: var(--accent-txt); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-top: .1rem;
}
.r-faire { margin: 0 0 .3rem; font-weight: 600; }
.r-attendu { margin: 0; color: var(--muted); }
.r-attendu__lbl { color: var(--text); font-weight: 600; }

/* Réponses OK / PAS OK / PAS PU TESTER — couleur ET FORME (jamais la couleur seule).
   Chaque état porte un glyphe distinct et un style de bordure distinct. */
.r-answer { border: 0; margin: .7rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.r-radio {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: .4rem .7rem; font-weight: 600; user-select: none; min-height: 40px;
}
.r-radio input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.r-radio::before { font-weight: 900; font-size: 1rem; line-height: 1; }
.r-radio--ok::before          { content: "✓"; }
.r-radio--pasok::before       { content: "✗"; }
.r-radio--pasputester::before { content: "–"; }
.r-radio--ok.is-on            { background: var(--ok-bg);    border: 2px solid var(--ok);    color: var(--ok-tx); }
.r-radio--pasok.is-on         { background: var(--pasok-bg); border: 2px dashed var(--pasok); color: var(--pasok-tx); }
.r-radio--pasputester.is-on   { background: var(--paspu-bg); border: 2px dotted var(--paspu); color: var(--paspu-tx); }
.r-ask { margin-left: auto; }

.r-input-dictee { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.r-input-dictee textarea { flex: 1; resize: vertical; min-height: 2.4rem; }
.r-remwrap { margin-top: .6rem; }
/* Bouton de dictée DORÉ — transposé du gros bouton d'enregistrement Punchbox
   (.bouton-enreg) : même relief bombé à filet laiton, même pastille « record »
   (laiton au repos → vert pulsé à l'enregistrement). L'état ne passe JAMAIS par la
   seule couleur : le texte (Dicter ⇄ Arrêter) et aria-pressed le portent aussi. */
.r-dictee {
  position: relative; flex: 0 0 auto; white-space: nowrap; align-self: stretch;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  color: var(--btn-p-texte); background: var(--btn-p-fond);
  border: 1px solid transparent; border-radius: var(--radius);
  box-shadow: var(--btn-p-ombre);
  padding: .4rem .8rem; cursor: pointer; font: inherit; font-weight: 600;
  transition: filter .12s ease, box-shadow .05s ease, top .05s ease;
}
.r-dictee:hover { filter: brightness(1.07); }
.r-dictee:active { top: 2px; box-shadow: var(--btn-p-plat); }
.r-dictee__dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background .2s;
}
.r-dictee.is-rec { color: var(--btn-a-texte); background: var(--btn-a-fond); }
.r-dictee.is-rec .r-dictee__dot {
  background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 32%, transparent);
  animation: r-pulse-dot 1.1s ease-in-out infinite;
}
@keyframes r-pulse-dot { 50% { transform: scale(.7); } }

/* Statut INLINE de la dictée — à côté du bouton, JAMAIS une surcouche.
   Il tombe sur une ligne fine sous le champ+bouton (flex-wrap) et porte tour à
   tour : équaliseur discret + chrono (enregistrement), barre fine +
   « transcription… » (transcription), message en clair (échec). Deux thèmes.
   Hauteur de l'ordre de la ligne de texte, toujours < 44 px du bouton. */
.r-dstat {
  flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; min-height: 22px; margin-top: .35rem; font-size: .85rem;
}
.r-dstat[hidden] { display: none; }
.r-dstat__eq {                                   /* 72×20 px : quelques barres fines, discret */
  display: block; width: 72px; height: 20px; flex: none;
  background: var(--bg-3); border-radius: 2px;
}
.r-dstat__chrono {
  font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-txt);
}
.r-dstat__prog {                                 /* barre de progression FINE (6 px) */
  flex: 0 0 120px; height: 6px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.r-dstat__prog-b {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .2s ease;
}
.r-dstat__lbl { color: var(--muted); }
.r-dstat__echec { color: var(--pasok-tx); }      /* échec porté par le TEXTE, pas la couleur seule */
.r-dstat__retry { color: var(--link); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .r-dictee.is-rec .r-dictee__dot { animation: none; }
  .r-dstat__prog-b { transition: none; }
}

/* ==========================================================================
   PANNEAU FIXE — onglets. La tête d'onglets peut passer sur deux lignes.
   ========================================================================== */
.r-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); z-index: 40;
  background: var(--bg-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.r-panel__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.r-tab {
  flex: 1 1 auto; background: var(--bg-2); color: var(--muted); border: 0;
  border-bottom: 3px solid transparent; padding: .6rem .4rem; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9rem; min-height: 42px;
}
.r-tab.is-active { color: var(--text); border-bottom-color: var(--accent); background: var(--bg-3); }
.r-badge {
  display: inline-block; min-width: 1.3rem; padding: 0 .25rem; margin-left: .2rem;
  background: var(--pasok); color: #fff; border-radius: 999px; font-size: .78rem; text-align: center;
}
.r-tabpane { display: none; flex: 1; min-height: 0; flex-direction: column; padding: .8rem; overflow: auto; }
.r-tabpane.is-active { display: flex; }
.r-panehint { color: var(--muted); font-size: .88rem; margin: 0 0 .6rem; }

/* Chat */
.r-chat-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: .55rem; padding-right: .2rem; }
.r-msg { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; }
.r-msg__meta { font-size: .78rem; color: var(--muted); display: flex; justify-content: space-between; gap: .5rem; }
.r-msg__who { color: var(--accent-txt); font-weight: 700; }
.r-msg--self { border-color: var(--accent-2); }
.r-msg__ref { display: inline-block; margin-top: .2rem; font-size: .78rem; color: var(--paspu); }
.r-msg__text { margin: .15rem 0 0; white-space: pre-wrap; word-break: break-word; }
.r-chat-form { flex: 0 0 auto; margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.r-chat-send { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }
.r-refline { font-size: .82rem; color: var(--paspu); }
.r-refline button { margin-left: .3rem; }

/* Pense-bêtes */
.r-notes-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; overflow: auto; }
.r-note-item { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; }
.r-note-item__text { white-space: pre-wrap; word-break: break-word; }
.r-note-item__act { display: flex; gap: .6rem; margin-top: .35rem; }
.r-note-form { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; }

/* Rapports */
.r-rapports h4 { margin: .6rem 0 .3rem; color: var(--accent-txt); }
.r-rap-item { display: block; width: 100%; text-align: left; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem;
  margin-bottom: .35rem; cursor: pointer; color: var(--text); font: inherit; min-height: 40px; }
.r-rap-item:hover { border-color: var(--accent); }
.r-rap-item small { color: var(--muted); }
.r-rapport-view { display: flex; flex-direction: column; min-height: 0; }
.r-rapport-body {
  white-space: pre-wrap; word-break: break-word; font-size: .86rem; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem; overflow: auto; max-height: 100%;
}

/* Synthèse */
.r-synthese-actions { display: flex; gap: .6rem; margin-bottom: .8rem; flex: 0 0 auto; flex-wrap: wrap; }
.r-synthese h4 { margin: .8rem 0 .3rem; }
.r-syn-total { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; }
.r-syn-bar { height: .5rem; background: var(--bg); border-radius: 999px; overflow: hidden; margin: .3rem 0; border: 1px solid var(--line); }
.r-syn-bar > i { display: block; height: 100%; background: var(--ok); }
.r-syn-item { border-left: 3px solid var(--pasok); background: var(--pasok-bg);
  padding: .45rem .6rem; margin: .4rem 0; border-radius: var(--radius); }
.r-syn-item b { color: var(--pasok); }
.r-syn-item .r-syn-rem { color: var(--text); white-space: pre-wrap; }
.r-empty { color: var(--muted); }

/* ==========================================================================
   LOTS — cartes libre-service (nom, avancement, détenteur).
   ========================================================================== */
.r-lots-filtre { display: flex; gap: .4rem; margin-bottom: .7rem; flex-wrap: wrap; flex: 0 0 auto; }
.r-chip {
  font: inherit; font-weight: 600; cursor: pointer; font-size: .85rem;
  background: var(--bg-3); color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .3rem .8rem; min-height: 34px;
}
.r-chip.is-on { background: var(--accent); color: var(--accent-tx); border-color: var(--accent-2); }
.r-lots { display: flex; flex-direction: column; gap: .55rem; }
.r-lot { background: var(--bg-3); border: 1px solid var(--line); border-left: 4px solid var(--line-2);
  border-radius: var(--radius); padding: .55rem .7rem; }
.r-lot--libre { border-left-color: var(--ok); }
.r-lot--pris  { border-left-color: var(--paspu); }
.r-lot--mien  { border-left-color: var(--accent); }
.r-lot__head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.r-lot__nom { font-size: .95rem; }
.r-lot__meta { color: var(--muted); font-size: .82rem; margin: .2rem 0; }
.r-lot__pris { font-size: .8rem; color: var(--paspu); font-weight: 700; }
.r-lot__pris--mien { color: var(--accent-txt); }
.r-lot__libre { font-size: .8rem; color: var(--ok); font-weight: 700; }
.r-lot__act { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }

/* ==========================================================================
   POINTEUSE — chrono, cumul, historique. AUCUN montant de ce côté.
   ========================================================================== */
.r-point-live { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; text-align: center; }
.r-point-etat { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .6rem; }
.r-point-etat__lbl { color: var(--muted); font-size: .82rem; }
.r-point-timer { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.r-point-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.r-point-jour { margin: .7rem 0 0; color: var(--muted); }
.r-point-jour b { color: var(--text); font-variant-numeric: tabular-nums; }
.r-point-h { margin: 1rem 0 .4rem; }
.r-point-hist { display: flex; flex-direction: column; gap: .35rem; }
.r-point-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .4rem .6rem; font-size: .88rem; }
.r-point-row__d { font-weight: 600; text-transform: capitalize; }
.r-point-row__dur { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.r-point-row__corr { color: var(--paspu); font-size: .78rem; }

/* ==========================================================================
   FACTURATION (admin) — heures + montant par personne.
   ========================================================================== */
.r-fact-form { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin-bottom: .8rem; flex: 0 0 auto; }
.r-fact-p { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .7rem; margin-bottom: .6rem; }
.r-fact-p__h { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.r-fact-p__m { color: var(--muted); font-variant-numeric: tabular-nums; }
.r-fact-p__m b { color: var(--accent-txt); }
.r-fact-jours { width: 100%; border-collapse: collapse; margin: .4rem 0; font-size: .85rem; }
.r-fact-jours td { padding: .2rem .3rem; border-bottom: 1px solid var(--line); }
.r-fact-jours td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* Couleurs d'état RÉUTILISÉES par le journal de dictée (onglet admin). L'ancienne
   « file de dictée » flottante a été SUPPRIMÉE (dictée sobre, aucune surcouche). */
.r-dq-ok      { color: var(--ok-tx); }
.r-dq-echec   { color: var(--pasok-tx); }

/* Journal de dictée + sonde (onglet admin). */
.r-dictee-diag { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.r-diag-verdict { padding: .55rem .7rem; margin-bottom: .6rem; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--bg-3); font-size: .9rem; line-height: 1.45; }
.r-diag-verdict--ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-tx); }
.r-diag-verdict--ko { border-color: var(--pasok); background: var(--pasok-bg); color: var(--pasok-tx); }
.r-diag-conf { font-size: .84rem; margin: .2rem 0 .5rem; }
.r-diag-conf--on { color: var(--ok-tx); }
.r-diag-conf--off { color: var(--pasok-tx); }
.r-diag-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.r-diag-table th, .r-diag-table td { text-align: left; padding: .28rem .35rem;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.r-diag-table th { color: var(--muted); font-weight: 700; }
.r-diag-det { color: var(--muted); }

/* ==========================================================================
   RESPONSIVE — sur écran étroit, le panneau passe en bas (repli).
   ========================================================================== */
@media (max-width: 900px) {
  .r-topbar { padding-right: 1rem; }
  .r-main { margin-right: 0; }
  .r-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 52vh; border-left: 0; border-top: 2px solid var(--accent-2);
  }
  .r-savebar--sticky { bottom: 52vh; }
}

/* --------------------------------------------------------------------------
   ÉCRITURE NON SILENCIEUSE (recette-ecriture-reparee).
   Bandeau « rien ne peut être enregistré » + états visibles des messages :
   en cours d'envoi / non envoyé. Le texte n'est jamais perdu.
   -------------------------------------------------------------------------- */
.r-writefail {
  background: var(--pasok-bg); border: 2px solid var(--pasok); color: var(--pasok-tx);
  border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 .2rem;
  font-size: .95rem; line-height: 1.5;
}
.r-writefail strong { color: var(--pasok-tx); }
.r-writefail__note { display: block; margin-top: .35rem; color: var(--pasok-tx); opacity: .92; }

/* Message « en cours d'envoi » : présent mais visiblement non confirmé. */
.r-msg--pending { border-style: dashed; opacity: .82; }
.r-msg__etat { font-size: .78rem; margin-top: .25rem; }
.r-msg__etat--pending { color: var(--muted); font-style: italic; }
/* Message « non envoyé » : bordure d'alerte, raison en clair, bouton Réessayer. */
.r-msg--failed { border-color: var(--pasok); border-left: 3px solid var(--pasok); opacity: 1; }
.r-msg__etat--failed { color: var(--pasok-tx); font-weight: 600; }
.r-msg__retry { color: var(--link); text-decoration: underline; }

/* ==========================================================================
   CHARTE — écran d'acceptation (avant tout accès) + vue permanente (relire,
   proposer, opposer). Lisibilité AVANT tout : corps généreux, largeur de ligne
   raisonnable, aucun panneau flottant, aucun ascenseur interne (la page défile).
   ========================================================================== */
.r-charte-page { background: var(--bg); }
.r-charte {
  width: 100%; max-width: 46rem; margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.r-charte__ref { color: var(--muted); font-size: .92rem; margin: 0 0 .2rem; letter-spacing: .01em; }
.r-charte__titre { margin: 0 0 1.2rem; font-size: 1.9rem; }
.r-charte__texte { font-size: 1.12rem; line-height: 1.75; }
.r-charte__texte p { margin: 0 0 1.05rem; }
.r-charte__h { margin: 1.8rem 0 .6rem; font-size: 1.22rem; color: var(--accent-txt); }
.r-charte__ul { margin: 0 0 1.05rem; padding-left: 1.3rem; }
.r-charte__ul li { margin: .3rem 0; }

/* Bandeau de revalidation (la charte a changé) + « ce qui a changé ». */
.r-charte__revalid {
  background: var(--paspu-bg); border: 1px solid var(--paspu);
  border-left: 4px solid var(--paspu); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 0 0 1.4rem; color: var(--paspu-tx);
}
.r-charte__change { margin: .5rem 0 0; }
.r-charte__change-lbl { font-weight: 700; }
.r-charte__vu { color: var(--muted); margin: 0 0 1.2rem; }

/* Barre de retour (vue permanente). */
.r-charte__bar {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: .55rem 1rem;
}

/* Les deux engagements à cocher. Cases NATIVES (clavier + lecteur d'écran),
   état porté par la COCHE (forme), jamais par la seule couleur. */
.r-charte__form { margin: 2rem 0 1rem; }
.r-charte__checks { border: 0; margin: 0 0 1.4rem; padding: 0; }
.r-check {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 .8rem;
}
.r-check input[type="checkbox"] {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: .1rem 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.r-check label { cursor: pointer; line-height: 1.5; font-size: 1.02rem; }
.r-check:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.r-charte__quit { margin-top: .6rem; }

/* Blocs proposer / opposer (vue permanente). */
.r-charte__bloc {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.r-charte__aide { color: var(--muted); margin: 0 0 .8rem; }
.r-charte__bloc form { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.r-charte__bloc .r-input-dictee { width: 100%; }
.r-charte__flash {
  background: var(--ok-bg); border: 1px solid var(--ok);
  border-radius: var(--radius); padding: .7rem .9rem; color: var(--ok-tx); margin: 1rem 0 0;
}
.r-topbar__charte { text-decoration: none; }

/* Vue admin de la charte (onglet réservé). */
.r-charte-adm__h { margin: 1.3rem 0 .5rem; font-size: 1rem; }
.r-charte-adm__list { list-style: none; margin: 0; padding: 0; }
.r-charte-adm__list li {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem; margin: 0 0 .5rem;
}
.r-charte-adm__meta { color: var(--muted); font-size: .9rem; margin-bottom: .3rem; }
.r-charte-adm__txt { white-space: normal; }

/* --------------------------------------------------------------------------
   AVIS — recueil d'opinion sur les pages publiques (choix rapides + gêne +
   texte libre). Réutilise les jetons de thème ; contraste AA dans les deux.
   -------------------------------------------------------------------------- */
.r-avis {
  margin: 1rem 0 .4rem;
  padding: .9rem 1rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.r-avis__h { margin: 0 0 .2rem; font-size: 1rem; color: var(--text); }
.r-avis__intro { margin: 0 0 .7rem; color: var(--muted); font-size: .9rem; }
.r-avis__grp { border: 0; margin: 0 0 .7rem; padding: 0; }
.r-avis__grp legend {
  padding: 0; margin: 0 0 .35rem; font-weight: 600; color: var(--text); font-size: .92rem;
}
.r-avis__opt {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; margin: 0 .4rem .4rem 0;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-3); color: var(--text); cursor: pointer; font-size: .9rem;
}
.r-avis__opt input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; }
.r-avis__opt:hover { border-color: var(--accent); }
.r-avis__opt:has(input:checked) {
  border: 2px solid var(--accent); padding: calc(.3rem - 1px) calc(.6rem - 1px);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-3));
}
.r-avis__opt:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.r-avis__gene { margin-top: .2rem; }
.r-avis__libre { margin: .2rem 0 .6rem; }
.r-avis__libre label { display: block; width: 100%; margin: 0 0 .3rem; font-weight: 600; font-size: .92rem; color: var(--text); }
.r-avis__texte { flex: 1; resize: vertical; min-height: 2.4rem; }
.r-avis__bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.r-avis__state { font-size: .88rem; color: var(--muted); }
.r-avis__state.is-ok { color: var(--ok); font-weight: 600; }
.r-avis__state.is-warn { color: var(--pasok); font-weight: 600; }
.r-avis__rgpd { margin: .7rem 0 0; color: var(--muted); font-size: .8rem; }

/* Compteur PERMANENT « ce qui n'est pas encore parti » (mission liaisons-solides).
   En tête du panneau, jamais flottant. Le sens ne repose pas que sur la couleur :
   ✓ / ● + texte explicite (WCAG). Angles 2 px, relief léger (charte maison). */
.r-outbox-count {
  margin: 0 0 .6rem; padding: .5rem .7rem;
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--radius); font-size: .92rem; line-height: 1.4;
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.r-outbox-count--ok {
  background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok-tx);
}
.r-outbox-count--pending {
  background: var(--bg-3); border-left-color: var(--accent); color: var(--text, #f0f0f0);
  font-weight: 600;
}