/* ============================================================
   ERP+ : Lecteur de texte juridique (atome de socle, article R190.1,
   verdict 190 du 10/08/2026).

   CE QUE CET ATOME N'EST PAS : la modale (.erp-modal, erp-modal.css). Celle-ci
   est un instrument de DECISION : une question, deux issues, une rangee
   d'actions. Le lecteur est un instrument de LECTURE : aucune question, aucune
   issue signifiante, une seule action en pied. Rendre un document dans l'objet
   qui pose une question serait la meme faute que poser le pied de vitrine sous
   une carte de connexion : la piece serait disponible, elle ne serait pas
   juste.

   CE QUI EST REPRIS DE LA MODALE, et rien de plus, parce que c'est ce que les
   deux atomes ont en commun : le VOILE (color-mix sur --erp-marine-deep, 62 %,
   valeur de .erp-modal, elle meme alignee sur .sidenav-scrim) et la FERMETURE
   (bouton iconique en cercle, exception declaree du socle).

   ZERO TOKEN NOUVEAU. La carte reprend l'anatomie .erp-card : blanc, --shadow-2,
   --card-radius, filet terracotta 3x32 en ::before : le lecteur EST une carte.

   GEOMETRIE ARRETEE, jamais dimensionnee par le contenu : c'est ce qui rend
   l'atome independant de textes qui ne sont pas ecrits. La hauteur est celle de
   la boite, pas celle du texte servi ; la zone de lecture defile si le texte
   l'excede, et ne se manifeste pas autrement. Un texte d'un paragraphe et un
   texte de huit pages s'ouvrent dans la meme boite.

   Ordre de chargement : tokens, typography, components, reader.
   ============================================================ */

/* ---- Voile plein ecran ---- */
.erp-reader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--erp-marine-deep) 62%, transparent);
}
/* L'etat ferme est porte par l'attribut [hidden], pas par une classe : le
   gabarit sort ferme, et le runtime ne pose ni ne retire aucune classe d'etat.
   display:flex ci-dessus l'emporterait sur le display:none de [hidden] du
   navigateur, d'ou la declaration explicite. */
.erp-reader[hidden] { display: none; }

/* ---- La carte : anatomie .erp-card, geometrie arretee ---- */
.erp-reader__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  /* Hauteur ARRETEE : la boite ne suit pas le texte. Le plafond de 760px evite
     qu'un tres grand ecran n'etire la mesure de lecture au dela du confortable. */
  height: min(78dvh, 760px);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-2);
  border: 1px solid color-mix(in srgb, var(--erp-marine) 6%, transparent);
  overflow: hidden;
}
/* filet terracotta vertical 3x32 a gauche : signature .erp-card */
.erp-reader__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-5);
  width: var(--card-accent-w);
  height: var(--card-accent-h);
  background: var(--card-accent);
}

/* ---- En-tete : titre du texte servi + fermeture explicite ---- */
.erp-reader__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex: none;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--erp-rule);
}
.erp-reader__title {
  font-family: var(--erp-font-serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  letter-spacing: -0.005em;
  color: var(--erp-fg-1);
  margin: 0;
}
.erp-reader__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;            /* exception cercle declaree (bouton iconique) */
  color: var(--erp-fg-4);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.erp-reader__close:hover { background: var(--erp-cream); color: var(--erp-fg-1); }
.erp-reader__close:focus-visible { outline: 2px solid var(--erp-focus-ring); outline-offset: 2px; }

/* ---- Zone de lecture : defilement interne, mesure de lecture ---- */
.erp-reader__body {
  flex: 1 1 auto;
  min-height: 0;                 /* sans quoi le flex enfant refuse de defiler */
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
}
.erp-reader__body:focus-visible { outline: 2px solid var(--erp-focus-ring); outline-offset: -2px; }
/* Le document servi arrive avec ses propres classes de socle (.erp-body,
   .erp-h3, .erp-legal-version) : rien n'est restyle ici, seule la cadence
   verticale de la zone est posee. */
.erp-reader__body > * { max-width: 68ch; }
.erp-reader__body > * + * { margin-top: var(--sp-4); }
/* Etat d'attente et etat d'echec : une ligne d'indication, jamais une alerte.
   Un texte qui n'a pas pu etre ouvert en place reste atteignable par l'action
   de pied, qui est la forme canonique. */
.erp-reader__state {
  font-family: var(--erp-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--erp-fg-3);
  margin: 0;
}

/* ---- Pied : une seule action ---- */
.erp-reader__foot {
  flex: none;
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--erp-rule);
}

/* ---- Apparition : meme grammaire que la modale (voile fondu, carte montee).
        L'etat de base est pleinement visible : sous prefers-reduced-motion ou
        animation en pause, rien n'est eteint. ---- */
@media (prefers-reduced-motion: no-preference) {
  .erp-reader { animation: erp-reader-veil-in 160ms ease; }
  .erp-reader__card { animation: erp-reader-card-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }
}
@keyframes erp-reader-veil-in {
  from { background-color: transparent; }
}
@keyframes erp-reader-card-in {
  from { transform: translateY(10px); }
}

/* ---- Petites hauteurs et petites largeurs : la boite prend la place servie,
        sa geometrie reste arretee par l'atome et non par le texte. ---- */
@media (max-width: 600px) {
  .erp-reader { padding: var(--sp-3); }
  .erp-reader__card { height: min(88dvh, 760px); }
  .erp-reader__head { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
  .erp-reader__body { padding: var(--sp-4) var(--sp-5); }
  .erp-reader__foot { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
}