/* =====================================================================
   retours.css — l'habillage des deux boutons de retour.
   Palette de la charte, et rien d'autre.

   POSITION : BAS À GAUCHE, jamais à droite ni au centre. C'est le
   principe éprouvé du signalement de l'atelier : le produit met ses
   boutons de décision à droite et au centre, jamais là. Un bouton de
   retour confondu avec une action du produit est un bouton qu'on clique
   par erreur — ou qu'on n'ose plus cliquer du tout.
   ===================================================================== */

/* LA HAUTEUR DE DÉPART EST RÉGLABLE PAR LA PAGE, et c'est indispensable.
   Mesuré le 21/08 : l'atelier pose déjà son propre bouton « Signaler » à
   left:14px / bottom:14px, et une barre de navigation fixe en bas. Poser
   nos boutons à l'aveugle les aurait empilés dessus.
   Le fichier de l'atelier porte déjà cette leçon, écrite le 20/08 :
   « DEUX ÉLÉMENTS FIXES NE PEUVENT PAS OCCUPER LA MÊME BANDE ». Une page
   qui occupe déjà le bas à gauche relève --mr-retour-bas, et les deux
   boutons montent ensemble sans qu'on retouche ce fichier. */
/* ── LES DEUX NUANCES, EN UN SEUL ENDROIT — 24/08/2026 ───────────────────
   Ce fichier écrivait l'ancien violet à HUIT endroits et l'ancien carmin
   sombre à trois : la migration « au jeton » n'avait ici rien à migrer,
   faute de jeton. On lui en donne un. Le repli porte la charte ; une page
   qui déclare --violet ou --rouge-dark garde la main, exactement comme
   partout ailleurs.
   LE REMPLACEMENT S'EST FAIT PAR EXPRESSION RÉGULIÈRE, et il a d'abord
   mangé ce commentaire-ci : une réécriture globale ne distingue pas la
   prose du code. Relu, corrigé. */
:root{
  --mr-retour-violet:       var(--violet, #5F2F8A);
  --mr-retour-violet-clair: var(--violet-light, #7B4FA8);
  --mr-retour-carmin-sombre:var(--rouge-dark, #8B1428);
}

.mr-retour-flottant{
  position:fixed; left:18px; z-index:9000;
  min-height:44px; min-width:44px; padding:11px 18px;
  font:inherit; font-size:.86rem; font-weight:700; cursor:pointer;
  border-radius:999px; border:2px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
  transition:transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}
.mr-retour-flottant:hover{ transform:translateY(-2px); box-shadow:0 7px 20px rgba(0,0,0,.42); }
.mr-retour-flottant:focus-visible{ outline:3px solid #EAB939; outline-offset:3px; }

/* .mr-retour-relecture (bouton « Mon avis ») RETIRÉ LE 30/08/2026 : il
   ouvrait l'ancien formulaire multi-étapes que le geste pointer-puis-parler
   remplace, et restait affiché pour l'apprenant — Charlotte, en l'essayant
   sur son compte client réel, s'est retrouvée sur ce chemin au lieu du
   geste. Un seul chemin, pas deux : voir monter() dans retours.js. La
   couleur violette qu'il portait (var(--mr-retour-violet)) n'a pas
   disparu : c'est celle du HUD et des puces du geste, ci-dessous. */
/* .mr-retour-signalement (bouton « Un souci ? ») RETIRÉ LE 09/09/2026 :
   décision Cédric, un seul point d'entrée d'aide. Le chat
   (chat-widget.js, #mr-chat-launcher) ouvre désormais l'aide ; le
   ticket qu'ouvrait ce bouton reste le même formulaire (voir
   formulaireSignalement dans retours.js), atteint depuis une sortie
   « écrire à quelqu'un » à l'intérieur du panneau de chat plutôt que
   par un bouton flottant à lui. */

/* « ÇA NE MARCHE PAS » — TROISIÈME GESTE, TROISIÈME COULEUR.
   La règle du 19/08 vaut ici : des boutons voisins qui se ressemblent sont
   une erreur de clic qui attend. « Mon avis » est violet et porte un
   jugement sur le CONTENU ; celui-ci est carmin et dit qu'une chose est
   CASSÉE. Le carmin est déjà la couleur d'alerte de la maison, et il ne
   se confond ni avec le violet ni avec le bleu du canal client.
   IL PREND LA PLACE BASSE parce qu'il ne coexiste JAMAIS avec le bouton
   client : l'un est offert à qui n'est pas apprenant, l'autre à
   l'apprenant seul. Aucun chevauchement n'est possible.
   La cible de 44 px vient de .mr-retour-flottant et n'est pas redite ici :
   un seuil écrit à deux endroits est un seuil qui divergera. */
.mr-retour-technique{ bottom:var(--mr-retour-bas, 18px); background:#8C1226; color:#F4F1E0; border-color:#C8203D; }
.mr-retour-technique:hover{ background:#A3162C; }

/* ── Le panneau ──────────────────────────────────────────────────────── */
.mr-retour-voile{
  position:fixed; inset:0; z-index:9100;
  background:rgba(24,20,29,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:mr-retour-voile-entre 240ms ease both;
}
@keyframes mr-retour-voile-entre{ from{opacity:0} to{opacity:1} }

.mr-retour-panneau{
  width:min(100%, 460px);
  /* AUCUNE HAUTEUR IMPOSÉE : le panneau grandit avec son contenu. S'il
     devait déborder, c'est la page qui défile — même invariant que les
     cartes du parcours. */
  background:#F4F1E0; color:#1A1A1A;
  border:3px solid #1A1A1A; border-radius:18px;
  padding:22px 24px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:mr-retour-panneau-monte 300ms ease both;
  display:flex; flex-direction:column; gap:12px;
}
@keyframes mr-retour-panneau-monte{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.mr-retour-entete{ display:flex; flex-direction:column; gap:8px; }
.mr-retour-logo{ display:block; height:26px; width:auto; max-width:100%; }
.mr-retour-titre{
  margin:0; font-family:Georgia, serif; font-weight:700; font-size:1.18rem; color:#1A1A1A;
}
.mr-retour-corps{ display:flex; flex-direction:column; gap:12px; }
.mr-retour-question{ margin:0; font-weight:700; font-size:.94rem; }

/* ── Verdict et catégories ───────────────────────────────────────────── */
.mr-retour-verdicts{ display:flex; gap:10px; }
.mr-retour-verdict, .mr-retour-cat{
  min-height:44px; padding:10px 16px; font:inherit; font-size:.88rem; cursor:pointer;
  background:#F4F1E0; color:#1A1A1A;
  border:2px solid #1A1A1A; border-radius:10px;
  transition:background 300ms ease, box-shadow 300ms ease;
}
.mr-retour-verdict{ flex:1; font-weight:700; }
.mr-retour-cats{ display:flex; flex-wrap:wrap; gap:8px; }
/* L'ÉTAT CHOISI N'EST JAMAIS PORTÉ PAR LA SEULE COULEUR : fond inversé,
   liseré or en bas, et aria-pressed pour la lecture à voix haute. */
.mr-retour-verdict.mr-choisi, .mr-retour-cat.mr-choisi{
  background:#1A1A1A; color:#F4F1E0; box-shadow:inset 0 -4px 0 #EAB939;
}
.mr-verdict-valide.mr-choisi{ background:#2f6b43; border-color:#2f6b43; }
.mr-verdict-non_valide.mr-choisi{ background:var(--mr-retour-carmin-sombre); border-color:var(--mr-retour-carmin-sombre); }

.mr-retour-texte{
  width:100%; padding:11px 13px; font:inherit; font-size:16px; line-height:1.5;
  color:#1A1A1A; background:#fff;
  border:2px solid #1A1A1A; border-radius:10px; resize:vertical;
}
/* 16 px : en dessous, iOS zoome tout seul à la mise au point du champ et
   la page se décale sous les doigts de celui qui écrit. */
.mr-retour-texte:focus-visible{ outline:3px solid var(--mr-retour-violet); outline-offset:2px; }

.mr-retour-envoyer{
  align-self:flex-start; min-height:44px; padding:12px 22px;
  font:inherit; font-size:.92rem; font-weight:700; cursor:pointer;
  background:var(--mr-retour-violet); color:#F4F1E0;
  border:2px solid var(--mr-retour-violet); border-radius:999px;
  transition:background 300ms ease;
}
.mr-retour-envoyer:hover:not(:disabled){ background:#1A1A1A; border-color:#1A1A1A; }
.mr-retour-envoyer:disabled{ opacity:.45; cursor:default; }
.mr-retour-envoyer:focus-visible{ outline:3px solid #EAB939; outline-offset:3px; }

/* Le bouton de dictée. Il porte son état DANS SON LIBELLÉ autant que dans
   sa couleur : « Dicter » devient « Arrêter ». Un micro qui écoute sans le
   dire est la meilleure façon de faire perdre une phrase entière. */
.mr-retour-dicter{
  align-self:flex-start; min-height:44px; padding:10px 18px;
  font:inherit; font-size:.88rem; cursor:pointer;
  background:#F4F1E0; color:#1A1A1A;
  border:2px solid #1A1A1A; border-radius:999px;
  transition:background 300ms ease;
}
.mr-retour-dicter:hover{ background:#e7e2cd; }
.mr-retour-dicter:focus-visible{ outline:3px solid var(--mr-retour-violet); outline-offset:3px; }
.mr-retour-dicter.mr-ecoute{ background:var(--mr-retour-carmin-sombre); color:#F4F1E0; border-color:var(--mr-retour-carmin-sombre); }

.mr-retour-etat:empty{ display:none; }
.mr-retour-etat{ margin:0; font-size:.86rem; color:var(--mr-retour-carmin-sombre); }

.mr-retour-fermer{
  align-self:flex-end; min-height:44px; padding:8px 16px;
  font:inherit; font-size:.84rem; cursor:pointer;
  background:none; color:#5a5064; border:1.5px solid #5a5064; border-radius:999px;
}
.mr-retour-fermer:focus-visible{ outline:3px solid var(--mr-retour-violet); outline-offset:2px; }

/* ── L'accusé de réception ───────────────────────────────────────────── */
/* Il REMPLACE le formulaire et reste à l'écran : quelqu'un qui vient
   d'envoyer doit VOIR que c'est parti, sinon il recommence ou il doute. */
.mr-retour-recu{
  padding:16px 18px; border-radius:12px;
  background:rgba(47,107,67,.12); border-left:6px solid #2f6b43;
}
.mr-retour-recu-titre{ margin:0; font-family:Georgia, serif; font-weight:700; font-size:1.05rem; }
.mr-retour-recu-detail{ margin:8px 0 0; font-size:.86rem; line-height:1.5; color:#5a5064; }
/* Le lien vers la consultation. Cible d'au moins 44 px de haut : c'est un
   lien qu'on suit au doigt, sur le téléphone où l'on relit. */
.mr-retour-lien{
  display:inline-flex; align-items:center; min-height:44px; margin-top:10px;
  font-weight:700; font-size:.88rem; color:var(--mr-retour-violet);
  text-decoration:underline; text-underline-offset:3px;
}
.mr-retour-lien:hover{ color:#1A1A1A; }
.mr-retour-lien:focus-visible{ outline:3px solid var(--mr-retour-violet); outline-offset:3px; border-radius:6px; }

/* ── Téléphone ───────────────────────────────────────────────────────── */
@media (max-width:520px){
  .mr-retour-flottant{ left:12px; padding:11px 15px; font-size:.82rem; }
  .mr-retour-panneau{ padding:18px 16px 14px; }
  .mr-retour-verdicts{ flex-direction:column; }
  .mr-retour-envoyer{ align-self:stretch; }
}

/* ── LE GESTE « POINTER PUIS PARLER » — LOT P, 29/08/2026 ─────────────
   Le HUD suit le doigt, jamais le contraire : il apparaît là où l'on
   maintient, pas dans un coin fixe qu'il faudrait aller chercher. */
.mr-geste-hud{
  position:fixed; z-index:9200; max-width:min(92vw, 360px);
  background:#1A1A1A; color:#F4F1E0;
  border:2px solid var(--mr-retour-violet); border-radius:14px;
  padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  pointer-events:none;   /* le HUD ne capte jamais le pointeur : c'est l'élément dessous qui le tient */
}
.mr-geste-etat{ margin:0 0 8px; font-size:.82rem; line-height:1.4; opacity:.9; }
.mr-geste-intentions{ display:flex; flex-wrap:wrap; gap:6px; }
/* CIBLE D'AU MOINS 44 px MALGRÉ pointer-events:none SUR LE PARENT : on le
   rétablit ici, sur les puces seules — c'est elles, et seulement elles,
   qui doivent réagir à ce qu'on glisse par-dessus. */
.mr-geste-chip{
  pointer-events:auto;
  min-height:40px; padding:8px 12px; font:inherit; font-size:.8rem; font-weight:700;
  background:#2a2432; color:#F4F1E0; border:1.5px solid rgba(244,241,224,.3);
  border-radius:999px; cursor:pointer;
}
.mr-geste-chip.mr-geste-survolee{
  background:var(--mr-retour-violet); border-color:var(--mr-retour-violet-clair);
  box-shadow:0 0 0 3px rgba(234,185,57,.5);
}
/* LA CINQUIÈME PUCE — « C'est bon », verdict positif — 30/08/2026.
   Couleur distincte dès le repos, pas seulement au survol : c'est la seule
   des cinq qui ne dit pas un défaut, elle ne doit jamais se confondre avec
   les quatre autres au premier coup d'œil. Même vert que .mr-verdict-valide
   de l'ancien formulaire — un seul vocabulaire de couleur pour « validé »,
   qu'il vienne du geste ou de « Corriger ». */
.mr-geste-chip-valide{ background:#2f6b43; border-color:#3f8a58; }
.mr-geste-chip-valide.mr-geste-survolee{
  background:#3f8a58; border-color:#4fae6e;
  box-shadow:0 0 0 3px rgba(234,185,57,.5);
}

/* ── L'accusé du geste — discret, jamais bloquant ─────────────────────
   En BAS À DROITE, délibérément à l'opposé des boutons flottants : les
   deux ne doivent jamais se chevaucher ni se confondre. */
.mr-geste-toast{
  position:fixed; right:16px; bottom:16px; z-index:9150; max-width:min(92vw, 340px);
  background:#F4F1E0; color:#1A1A1A;
  border:2px solid #1A1A1A; border-radius:14px;
  padding:12px 14px; box-shadow:0 14px 34px rgba(0,0,0,.4);
  animation:mr-retour-panneau-monte 220ms ease both;
}
.mr-geste-toast-ligne{ margin:0 0 4px; font-size:.86rem; line-height:1.4; }
.mr-geste-toast-badge{
  display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px;
  border-radius:999px; background:var(--mr-retour-violet); color:#F4F1E0; margin-right:4px;
}
.mr-geste-toast-actions{ display:flex; gap:8px; margin-top:6px; }
.mr-geste-toast-corriger, .mr-geste-toast-fermer{
  min-height:36px; padding:6px 14px; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
  border-radius:999px;
}
.mr-geste-toast-corriger{ background:#1A1A1A; color:#F4F1E0; border:1.5px solid #1A1A1A; }
.mr-geste-toast-fermer{ background:none; color:#5a5064; border:1.5px solid #5a5064; }
.mr-geste-toast-corriger:focus-visible, .mr-geste-toast-fermer:focus-visible{ outline:3px solid var(--mr-retour-violet); outline-offset:2px; }

/* ── Téléphone — le geste tient à 390 comme à 1280 ─────────────────── */
@media (max-width:520px){
  .mr-geste-hud{ max-width:88vw; }
  .mr-geste-toast{ left:12px; right:12px; max-width:none; }
}

/* ── Mouvement réduit ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .mr-retour-voile, .mr-retour-panneau, .mr-geste-toast{ animation:none; }
  .mr-retour-flottant, .mr-retour-envoyer, .mr-retour-verdict, .mr-retour-cat{ transition:none; }
  .mr-retour-flottant:hover{ transform:none; }
}