/*
 * RELECTURE — feuille de style de l'accès distant
 * ------------------------------------------------------------------
 * Servie depuis /public : ces pages ne passent pas par le gabarit du site et
 * n'ont pas à charger ses feuilles. Elles empruntent la typographie et les
 * couleurs de la charte (jetons de src/styles/tokens.css, importés par les
 * pages), et rien de plus. C'est un outil de travail, pas une page de site.
 */

:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: #FFFFFF;
  color: var(--rd-ink, #373737);
  font-family: var(--rd-sans, 'Poppins', system-ui, sans-serif);
  font-weight: 300;
  line-height: 1.6;
}

.rl-page { max-width: 820px; margin: 0 auto; padding-top: 48px; }

.rl-surtitre {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--rd-selected, #E35F00);
}
.rl-page h1 { margin: 0 0 12px; font-size: 34px; font-weight: 800; line-height: 1.2; }
.rl-chapo { margin: 0; max-width: 62ch; color: var(--rd-dim, #686868); }
.rl-version-tete { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--rd-dim, #686868); }
.rl-tete { margin-bottom: 40px; }
.rl-retour { margin: 0 0 24px; font-size: 14px; }
.rl-retour a, .rl-chapo a { color: var(--rd-selected, #E35F00); }

/* ── La porte ─────────────────────────────────────────────────── */
.rl-porte { display: flex; min-height: 90vh; align-items: center; justify-content: center; }
.rl-porte-bloc { width: 100%; max-width: 380px; }
.rl-porte form { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.rl-porte label { font-size: 13px; font-weight: 600; }

input[type="text"], input[type="password"], textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 16px; font-weight: 300; color: inherit;
}
textarea { line-height: 1.7; resize: vertical; min-height: 160px; }
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rd-selected, #E35F00); outline-offset: 1px; border-color: transparent;
}

button {
  padding: 12px 22px; min-height: 44px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--rd-selected, #E35F00); color: #FFFFFF;
}
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--rd-ink, #373737); outline-offset: 2px; }
.rl-annuler, .rl-modifier { background: #F4F4F4; color: var(--rd-ink, #373737); }

.rl-erreur { margin: 4px 0 0; font-size: 14px; color: #B3261E; }

/* ── Sommaire ─────────────────────────────────────────────────── */
.rl-liste { list-style: none; margin: 0 0 56px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rl-liste a {
  display: block; padding: 22px 24px;
  border: 1px solid #EDEDED; border-radius: 12px;
  text-decoration: none; color: inherit;
}
.rl-liste a:hover { border-color: var(--rd-selected, #E35F00); }
.rl-nom { display: block; font-size: 20px; font-weight: 800; }
.rl-detail, .rl-version { display: block; font-size: 14px; color: var(--rd-dim, #686868); }
.rl-detail strong { color: var(--rd-selected, #E35F00); }

.rl-aide { border-top: 1px solid #EDEDED; padding-top: 28px; }
.rl-aide h2 { font-size: 18px; font-weight: 800; margin: 0 0 12px; }
.rl-aide p { max-width: 62ch; margin: 0 0 12px; font-size: 15px; }
code { font-family: var(--rd-mono, ui-monospace, monospace); font-size: .92em; background: #F4F4F4; padding: 1px 5px; border-radius: 4px; }

/* ── La note de travail du document ───────────────────────────── */
.rl-note {
  margin: 0 0 44px; padding: 22px 24px;
  border-left: 4px solid var(--rd-selected, #E35F00); background: #FBF7F4; border-radius: 0 12px 12px 0;
}
.rl-note h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.rl-note p { margin: 0 0 8px; font-size: 14px; max-width: 70ch; }
.rl-note-pied { color: var(--rd-dim, #686868); font-style: italic; }

/* ── Les articles ─────────────────────────────────────────────── */
.rl-articles { display: flex; flex-direction: column; gap: 8px; }
.rl-article { padding: 22px 0; border-bottom: 1px solid #EDEDED; }
.rl-article-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.rl-article-tete h2 { margin: 0 0 12px; font-size: 21px; font-weight: 800; line-height: 1.25; }
.rl-modifier { flex-shrink: 0; padding: 8px 16px; min-height: 36px; font-size: 13px; }

.rl-lecture p { margin: 0 0 12px; max-width: 70ch; }
.rl-lecture p:last-child { margin-bottom: 0; }

.rl-edition { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.rl-edition label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.rl-conseil { margin: 0; font-size: 13px; color: var(--rd-dim, #686868); }
.rl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-etat { font-size: 14px; }
.rl-etat.is-ok { color: #1E7B34; }
.rl-etat.is-erreur { color: #B3261E; }

@media (max-width: 640px) {
  .rl-page { padding-top: 32px; }
  .rl-page h1 { font-size: 27px; }
  .rl-article-tete { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ══ LES DEUX ENTRÉES DU POSTE ═══════════════════════════════════════
   Consulter le site, ou écrire les documents. Le même mot de passe ouvre les
   deux, et les deux tiennent ouverts en même temps. */
.rl-portes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 56px;
}
.rl-porte-carte {
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px 26px 28px;
  border: 1px solid #EDEDED; border-radius: 14px;
  text-decoration: none; color: inherit; background: #FFFFFF;
  transition: border-color .15s ease-out;
}
.rl-porte-carte:hover { border-color: var(--rd-selected, #E35F00); }
.rl-porte-carte:focus-visible { outline: 2px solid var(--rd-selected, #E35F00); outline-offset: 2px; }
.rl-porte-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rd-selected, #E35F00); color: #FFFFFF;
  font-size: 13px; font-weight: 800;
}
.rl-porte-nom { font-size: 19px; font-weight: 800; line-height: 1.25; }
.rl-porte-dit { font-size: 14px; color: var(--rd-dim, #686868); }
.rl-titre-liste { margin: 0 0 16px; font-size: 18px; font-weight: 800; }

@media (max-width: 640px) { .rl-portes { grid-template-columns: 1fr; } }