/* Page destinataire.
   Valeurs reprises de « Proto Destinataire.dc.html ». Le prototype affichait
   l'écran dans un cadre de téléphone avec un sélecteur d'étapes ; la vraie page
   occupe la fenêtre, colonne centrée à 560px au-delà du mobile. */

.rpage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-page);
  background-image:
    radial-gradient(circle at 50% 22%, rgba(251, 252, 248, 0) 0%, var(--bg-100) 72%),
    var(--pattern-dot);
  background-size: auto, var(--pattern-dot-size);
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.rmain {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* En-tête : le retour et la progression partagent une ligne.
   La barre sur sa propre ligne coûterait une vingtaine de pixels de hauteur,
   précisément sur les écrans d'enregistrement, ceux qui en manquent le plus sur
   un téléphone. */
.rtop {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.rtop__nav { flex: none; }

/* Barre de progression.
   Épaisse et pleine, du même noir que le bouton qui fait avancer : c'est la
   seule chose sur cette page qui dise combien il reste, et elle est là pour
   donner envie d'aller au bout, pas pour informer. */
.rprog {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--black-10);
  overflow: hidden;
}
.rprog[hidden] { display: none; }
.rprog i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--action-primary-bg);
  transition: width 520ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .rprog i { transition: none; } }

/* Retour. Placé dans le flux plutôt qu'en absolu : il ne peut donc jamais
   recouvrir le contenu de l'étape, quelle que soit la hauteur d'écran. */
.rnav { display: flex; }
.rnav__btn {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-control);
}
.rnav__btn:hover { background: var(--black-5); color: var(--text-primary); }
.rnav__btn:active { transform: scale(.98); }

.rstep {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  gap: 16px;
}
.rstep--center { align-items: center; text-align: center; }
.rstep--fill { flex: 1; justify-content: center; }

.rid { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rid__av {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  flex: none;
}
.rid__t { font-size: var(--body-sm-size); color: var(--text-secondary); }
.rid__t em { font-style: normal; color: var(--text-tertiary); }

.rq {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.16;
  letter-spacing: -.022em;
  text-wrap: pretty;
}
.rq--sm {
  font-size: var(--body-sm-size);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.006em;
  color: var(--text-secondary);
  /* Pendant l'enregistrement, la question est le seul élément qui ne soit pas
     centré : tout le reste de l'écran l'est, l'horloge, l'onde, le bouton. Un
     rappel aligné à gauche au-dessus d'une colonne centrée se lit comme une
     erreur de mise en page, et c'en était une. */
  text-align: center;
}
.rhint { font-size: var(--body-sm-size); line-height: 1.45; color: var(--text-tertiary); }
.rfine { font-size: var(--body-xs-size); line-height: 1.5; color: var(--text-tertiary); text-wrap: pretty; }

/* Note en étoiles, encadrée de deux filets pointillés */
.rnote {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0 2px;
  border-top: 1px dashed var(--black-10);
  border-bottom: 1px dashed var(--black-10);
}
.rnote__label {
  font-family: var(--font-mono);
  font-size: var(--mono-caption-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* Étoiles reprises du mur d'avis : plus grandes, presque jointives, cernées
   d'un trait plus foncé que leur remplissage. Petites et grises, elles
   passaient inaperçues au milieu de la page, et la note avec.

   Les étoiles se touchent presque, mais chaque bouton garde un rembourrage
   invisible : la cible tactile fait 50 par 56, bien au-delà de l'étoile
   elle-même, et on ne rate pas la note d'un demi-doigt. */
.rstars { display: flex; justify-content: center; gap: 0; padding-bottom: 10px; }
.rstar {
  padding: 6px 3px;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.rst {
  display: block;
  width: 44px;
  height: 44px;
  /* Le trait déborde du carré de dessin : sans cela il serait rogné. */
  overflow: visible;
  fill: rgba(26, 26, 26, .07);
  stroke: rgba(26, 26, 26, .28);
  stroke-width: .9;
  stroke-linejoin: round;
  paint-order: stroke fill;
  transition: fill 120ms var(--ease-out), stroke 120ms var(--ease-out), transform 150ms var(--ease-out);
}
.rst.is-on { fill: #fdb022; stroke: #d97706; stroke-width: .8; }
.rstar:hover .rst { transform: scale(1.08); }
.rstar:active .rst { transform: scale(.92); }
/* Le bouton est plus grand que l'étoile, et transparent : le halo général en
   dessinerait le rectangle à côté d'elle. La mise au point se pose sur
   l'étoile, qui est ce qu'on vise. */
.rstar:focus-visible { box-shadow: none; }
.rstar:focus-visible .rst { fill: #fdb022; stroke: #d97706; stroke-width: 1.4; }

/* Aperçu au survol : la rangée montre exactement la note qu'un clic donnerait,
   celles d'avant allumées et celles d'après éteintes. Allumer sans éteindre ne
   dirait rien quand une note plus haute est déjà posée : on croirait que le
   clic ne change rien. Là où :has n'existe pas, le clic fait tout le travail
   comme avant. */
.rstars:has(.rstar:nth-child(1):hover) .rstar:nth-child(-n+1) .rst,
.rstars:has(.rstar:nth-child(2):hover) .rstar:nth-child(-n+2) .rst,
.rstars:has(.rstar:nth-child(3):hover) .rstar:nth-child(-n+3) .rst,
.rstars:has(.rstar:nth-child(4):hover) .rstar:nth-child(-n+4) .rst,
.rstars:has(.rstar:nth-child(5):hover) .rstar:nth-child(-n+5) .rst {
  fill: #fdb022;
  stroke: #d97706;
  stroke-width: .8;
}
.rstars:has(.rstar:nth-child(1):hover) .rstar:nth-child(n+2) .rst,
.rstars:has(.rstar:nth-child(2):hover) .rstar:nth-child(n+3) .rst,
.rstars:has(.rstar:nth-child(3):hover) .rstar:nth-child(n+4) .rst,
.rstars:has(.rstar:nth-child(4):hover) .rstar:nth-child(n+5) .rst {
  fill: rgba(26, 26, 26, .07);
  stroke: rgba(26, 26, 26, .28);
  stroke-width: .9;
}

.ractions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ractions--row { flex-direction: row; }
.ractions--row > * { flex: 1; }

/* Enregistrement vocal */
.rrec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.rrec__label {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.rclock {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* Pastille d'état, même repère visuel que le bandeau de la caméra */
@keyframes r-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rlive { display: flex; align-items: center; gap: 8px; }
.rlive__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--status-negative);
  flex: none;
  animation: r-pulse 1.6s var(--ease-out) infinite;
}

/* Histogramme. Le canvas est dessiné par js/wave.js ; la couleur des barres est
   lue dans `color`, donc elle reste pilotée par les tokens. Le dégradé de masque
   efface les barres anciennes vers la gauche : le regard reste sur l'instant. */
.rwave {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 78px;
  color: var(--text-primary);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
}
.rstop {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  cursor: pointer;
  margin-top: 6px;
  transition: var(--transition-control);
}
.rstop:hover { background: var(--action-primary-bg-hover); }
.rstop:active { transform: scale(.98); }
.rstop i { display: block; width: 20px; height: 20px; border-radius: 4px; background: var(--bg-100); }
.rstop--cam { width: 64px; height: 64px; border: 3px solid var(--black-10); margin-top: 0; }
.rstop--cam i { width: 18px; height: 18px; }
.rstop__t { font-size: var(--body-sm-size); font-weight: 500; }

/* Caméra */
.rcam {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 260px;
  border-radius: var(--radius-lg);
  background: #242424;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcam__badge {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(26, 26, 26, .55);
  backdrop-filter: blur(6px);
}
.rcam__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--status-negative); flex: none; }
.rcam__t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgb(251, 252, 248);
  font-feature-settings: 'tnum' 1;
}
/* Sur la vidéo, l'histogramme se pose sur l'image : il s'efface des deux côtés
   pour ne jamais buter contre un bord. */
.rwave--cam {
  position: absolute;
  bottom: 12px; left: 12px;
  /* Largeur calculée, pas left + right : un canvas est un élément remplacé,
     il retomberait sur son ratio intrinsèque au lieu de suivre les deux bords. */
  width: calc(100% - 24px);
  max-width: none;
  height: 26px;
  color: rgba(251, 252, 248, .78);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
}

/* Relecture */
.rreview__head { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.rreview__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--heading-2-size);
  letter-spacing: -.02em;
}
.rreview__d {
  font-family: var(--font-mono);
  font-size: var(--mono-caption-size);
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.rplayer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--highlight-50);
  border-radius: var(--radius-md);
}
.rplayer__btn {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  cursor: pointer;
  flex: none;
  transition: var(--transition-control);
}
.rplayer__btn:hover { background: var(--action-primary-bg-hover); }
.rplayer__btn:active { transform: scale(.98); }
/* Tracé de relecture. Élément de flex à part entière : la largeur vient du
   calcul flex, jamais du ratio intrinsèque du canvas. */
.rseek {
  flex: 1 1 0%;
  min-width: 0;
  height: 34px;
  display: block;
  color: var(--text-primary);
  cursor: pointer;
}
.rbar { flex: 1; height: 4px; border-radius: 2px; background: var(--black-10); overflow: hidden; }
.rbar i { display: block; height: 100%; border-radius: 2px; background: var(--black-100); width: 0; }
.rplayer__t {
  font-family: var(--font-mono);
  font-size: var(--mono-caption-size);
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.rvideo {
  position: relative;
  width: 100%;
  min-height: 240px;
  flex: 1;
  border-radius: var(--radius-lg);
  background: #242424;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
}
.rvideo video { width: 100%; height: 100%; object-fit: contain; display: block; }
.rvideo__play {
  position: absolute;
  width: 60px; height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(251, 252, 248, .92);
}
.rvideo__ctl {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.rvideo__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(251, 252, 248, .28); overflow: hidden; }
.rvideo__bar i { display: block; height: 100%; border-radius: 2px; background: rgb(251, 252, 248); width: 0; }
.rvideo__t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(251, 252, 248, .75);
}

/* Diffusion */
.rchoice {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--black-10);
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-control);
}
.rchoice:hover { background: var(--black-5); }
.rchoice.is-on { box-shadow: inset 0 0 0 2px rgb(26, 26, 26); }
.rchoice__radio {
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--black-30);
  border-radius: var(--radius-pill);
  flex: none;
  margin-top: 2px;
}
.rchoice.is-on .rchoice__radio i {
  display: block;
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  background: var(--black-100);
}
.rchoice__radio i { display: none; }
.rchoice__txt { display: flex; flex-direction: column; gap: 3px; }
.rchoice__t { font-size: var(--body-md-size); font-weight: 500; }
.rchoice__d { font-size: var(--body-xs-size); line-height: 1.4; color: var(--text-secondary); }

/* Envoi */
@keyframes r-indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.rindet { width: 160px; height: 4px; border-radius: 2px; background: var(--black-10); overflow: hidden; }
.rindet i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--black-100);
  animation: r-indet 1.1s var(--ease-out) infinite;
}

.rcheck {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--black-10);
  border-radius: var(--radius-pill);
}
/* Sur la page « déjà répondu », la marque est le seul élément au-dessus du
   titre : elle est pleine, pour tenir seule dans beaucoup de blanc. */
.rcheck--done {
  background: var(--status-positive);
  border-color: transparent;
  color: var(--white);
  margin-bottom: 4px;
}
.rthanks { display: flex; flex-direction: column; gap: 6px; }
.rthanks__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--heading-2-size);
  letter-spacing: -.02em;
}
.rstate__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--heading-3-size);
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.rtext {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--black-10);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
  resize: none;
  outline: none;
  transition: var(--transition-control);
}
.rtext:focus { border-color: var(--border-strong); box-shadow: var(--ring-focus); }

/* Page de livraison : tout ce que l'expéditeur a joint, rassemblé */
.rdel__head { display: flex; flex-direction: column; gap: 6px; }
.rdel__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--heading-2-size);
  letter-spacing: -.02em;
}
.rdel { display: flex; flex-direction: column; gap: 10px; }

.rdel__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--black-10);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: left;
}
.rdel__ic {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--highlight-50);
  color: var(--text-secondary);
  flex: none;
}
/* Vignette d'image : le cadre gris tient la place avant le chargement du blob */
.rdel__thumb {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--highlight);
  overflow: hidden;
  flex: none;
  display: block;
}
.rdel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.rdel__thumb.is-loaded img { opacity: 1; transition: opacity 200ms var(--ease-out); }

.rdel__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdel__n {
  font-size: var(--body-md-size);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.rdel__m { font-size: var(--body-xs-size); color: var(--text-tertiary); }
.rdel__m--url {
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdel__act {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.rdel__act:hover { background: var(--black-5); }
.rdel__act:active { transform: scale(.98); }

/* Un texte se lit sur place, il n'y a rien à télécharger */
.rdel__item--text { flex-direction: column; align-items: flex-start; gap: 10px; }
.rdel__k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--mono-caption-size);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.rdel__body {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--highlight-50);
  font-size: var(--body-sm-size);
  line-height: 1.55;
  color: var(--text-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rdel__empty {
  padding: 26px 16px;
  border: 1px dashed var(--black-30);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--body-sm-size);
  color: var(--text-tertiary);
}

@media (max-width: 439px) {
  .rdel__item { flex-wrap: wrap; }
  .rdel__act { width: 100%; justify-content: center; }
  .rdel__item--text .rdel__act { width: auto; }
}

/* Pied de page : le bouton d'accès reste visible et actif à toutes les étapes */
.rfoot {
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--black-10);
  background: var(--bg-100);
}
/* Signature Proofe, tout en bas. Elle se tient sous le pied de page et ne
   partage pas sa largeur contrainte : centrée sur la fenêtre, elle se lit
   comme une mention de bas de page et non comme une action de plus.

   Volontairement pâle au repos : la page appartient à celui qui envoie le
   lien, notre nom ne doit jamais concurrencer le sien. Elle se révèle au
   survol, pour qui la cherche. */
/* Présentation du répondant : photo, nom, fonction */
.rpp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--body-sm-size);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-control);
}
.rpp:hover { color: var(--text-primary); }
.rpp__ic,
.rpp img {
  width: 84px; height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.rpp__ic {
  border: 1.5px dashed var(--black-30);
  background: var(--white);
  color: var(--text-tertiary);
  transition: var(--transition-control);
}
.rpp:hover .rpp__ic { border-color: var(--black-100); color: var(--text-primary); background: var(--highlight-50); }
.rpp img { border: 1px solid var(--border-hairline); }

/* Prise de vue à la webcam, sur ordinateur. Ronde parce que c'est la forme
   sous laquelle la photo apparaîtra à côté de l'avis : on cadre ce qui sera
   gardé, plutôt qu'un rectangle dont on découperait les bords ensuite. En
   miroir parce que c'est ainsi qu'on se voit, et qu'une image inversée fait
   hésiter au moment d'appuyer. */
.rshot {
  width: min(236px, 62vw);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--black-100);
  border: 1px solid var(--border-hairline);
}
.rshot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

.rfield { width: 100%; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.rfield .field__el {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: var(--body-md-size);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-control);
}
.rfield .field__el::placeholder { color: var(--text-tertiary); }
.rfield .field__el:focus { border-color: var(--border-strong); box-shadow: var(--ring-focus); }
.rfield__aide {
  font-size: var(--body-xs-size);
  line-height: 1.45;
  color: var(--text-tertiary);
  text-wrap: pretty;
}

/* Posée dans une pastille bordée plutôt qu'en texte nu : elle se lisait à
   peine, on la prenait pour une mention légale. Elle reste discrète, mais on
   voit maintenant que c'est un objet sur lequel on peut cliquer. */
.rbadgewrap { display: flex; justify-content: center; padding: 18px 22px 24px; }
.rbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control);
}
.rbadge:hover {
  color: var(--text-primary);
  border-color: var(--black-30);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.rbadge:active { transform: none; }
.rbadge b { font-weight: 600; color: var(--text-primary); }
.rbadge .ico { color: var(--text-tertiary); }
.rbadge:hover .ico { color: var(--text-secondary); }
.rback {
  display: block;
  text-align: center;
  padding: 14px 0 24px;
  font-family: var(--font-mono);
  font-size: var(--mono-caption-size);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
}

@media (min-width: 860px) {
  .rmain { justify-content: center; }
  /* Le rappel de la question, lui, garde sa petite taille. Sans cette
     exception, cette règle, plus bas dans le fichier, écrasait celle de
     .rq--sm : sur grand écran, le rappel discret ressortait en trente-six
     pixels au-dessus de l'enregistrement en cours. */
  .rq:not(.rq--sm) { font-size: 36px; }
}

/* Attente du lien. Trois points plutôt qu'un texte : à ce moment-là on ne sait
   encore rien, ni de qui vient le lien, ni s'il est valide, et toute phrase
   affichée serait une promesse qu'on ne peut pas tenir. */
.rload { display: flex; gap: 7px; }
.rload i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: rload 1.05s ease-in-out infinite;
}
.rload i:nth-child(2) { animation-delay: .14s; }
.rload i:nth-child(3) { animation-delay: .28s; }

@keyframes rload {
  0%, 70%, 100% { opacity: .25; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .rload i { animation: none; opacity: .45; }
}