/*
 * FONTEXTE — Fonction 2 : évaluation avec annotations
 * ----------------------------------------------------------------
 * Cette feuille est celle de l'atelier de relecture, reprise de l'archive
 * « lesmarges-site-complet-2026-08-25.zip » : mêmes fontes, même marge large,
 * même dessin du manuscrit annoté — c'est ce qui fait qu'une page relue
 * ressemble ici à ce qu'elle était là-bas.
 *
 * Deux choses ont changé. La première : l'atelier occupait une page entière,
 * il n'occupe ici qu'une rubrique. Chaque règle a donc été portée
 * sous `.relecture-atelier`, la classe de la section — les variables de couleur
 * comprises, qui étaient posées sur `:root`. Ce qui s'adressait à `html` ou à
 * `body` s'adresse maintenant à la section elle-même, et le portail d'accès de
 * l'atelier — que FONTEXTE n'a pas, son outil étant en accès libre — a été
 * laissé de côté. Aucune de ces règles ne peut donc atteindre le reste de la
 * page : la détection de plagiat garde son dessin, la relecture garde le sien.
 *
 * La seconde : les couleurs. L'atelier arrivait avec son papier chaud et ses
 * encres de correction — ocre, rouge, olive. La rubrique est celle de FONTEXTE,
 * et elle en porte maintenant les couleurs : le blanc du feuillet, le bleu
 * nuit de l'encre, le bleu vif de la maison, et rien d'autre. Les six teintes
 * qui distinguent les natures d'annotation ont été reprises dans cette même
 * famille — du bleu vif au bleu nuit —, de sorte qu'elles se distinguent
 * toujours l'une de l'autre sans jamais sortir de la palette du site.
 */
.relecture-atelier {
  --papier: #eef3fa;
  --papier-creux: #e0eaf6;
  --feuille: #ffffff;
  --encre: #15243d;
  --encre-douce: #4c5b76;
  --encre-pale: #7f8da3;
  --filet: #d5dfea;
  --filet-fin: #e4eaf1;

  --bleu: #1769e0;
  --cyan: #0f7ba4;
  --azur: #2a5f9e;
  --indigo: #3f4fa8;
  --ardoise: #5a6a88;
  --nuit: #0f2344;

  --font-titre: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-texte: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-note: 'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif;

  --interligne: 1.9;
  --gouttiere: 3rem;
  --largeur-marge: 21rem;
  --rayon: 3px;
  --transition: 180ms cubic-bezier(0.33, 0.8, 0.4, 1);
}
.relecture-atelier *,
.relecture-atelier *::before,
.relecture-atelier *::after {
  box-sizing: border-box;
}
/* L'attribut hidden passe avant toute regle de classe. Sans cela, un element
   masque en HTML — un bouton en attente, un pupitre pas encore ouvert — dont
   la classe pose un display reste affiche : la regle d'auteur l'emporte sur
   celle du navigateur. */
.relecture-atelier [hidden] {
  display: none !important;
}
.relecture-atelier {
  -webkit-text-size-adjust: 100%;
}
.relecture-atelier {
  margin: 0;
  background:
    radial-gradient(120% 80% at 12% -10%, #f3f8fe 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, #dde9f7 0%, transparent 50%),
    var(--papier);
  color: var(--encre);
  font-family: var(--font-note);
  font-size: 16px;
  line-height: 1.55;
}
/* Grain fixe, hors flux, jamais sur un conteneur qui defile. */
.relecture-atelier .grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.relecture-atelier ::selection {
  background: #cfe3fb;
  color: var(--encre);
}
.relecture-atelier button,
.relecture-atelier input,
.relecture-atelier textarea,
.relecture-atelier select {
  font: inherit;
  color: inherit;
}
.relecture-atelier :focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}
/* --------------------------------------------------------------- l'abri --

   Deux règles de la feuille de FONTEXTE (style.css) s'adressent aux éléments
   eux-mêmes — `h2` et `a` — et atteignent donc l'intérieur de la rubrique, où
   elles imposeraient au manuscrit annoté les titres bleus et les liens sans
   couleur du reste du site. Elles sont neutralisées ici, et ici seulement.

   L'abri couvre aussi l'écriture, et non plus seulement la couleur, la taille
   et la marge : le registre des titres du site (`--titre`, sa graisse, son
   interlettrage) atteignait lui aussi les `h2` de l'atelier, qui écrivait donc
   ses titres dans le romain du site plutôt que dans le sien. L'atelier a ses
   propres fontes (`--font-titre`, `--font-texte`) ; ce qui n'est pas nommé
   plus bas les hérite de son parent.

   Ce bloc est placé haut, avant le dessin de l'atelier : tout ce qui suit le
   surclasse. L'atelier garde donc ses titres et ses liens, et l'abri ne sert
   qu'à ce qu'il n'ait rien à reprendre au site qui l'accueille. */
.relecture-atelier h2 {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}
.relecture-atelier a {
  color: inherit;
  text-decoration: none;
}
/* L'enseigne de la rubrique — feuillet a filet bleu qui disait le metier avant
   tout le reste — a ete retiree de la page : le pupitre de depot ouvre
   desormais la seconde fonction. Ses regles partent avec elle ; seul le titre
   demeure dans le balisage, hors de l'ecran (.sr-only, style.css), pour nommer
   la rubrique au lecteur d'ecran. */

.relecture-atelier .portail {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 80% at 12% -10%, #f3f8fe 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, #dde9f7 0%, transparent 50%),
    var(--papier);
}
.relecture-atelier .portail-cadre {
  width: min(26rem, 100%);
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--encre);
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 18px 40px -32px rgba(10, 23, 48, 0.55);
}
.relecture-atelier .portail-sigle {
  font-family: var(--font-titre);
  font-size: 2.6rem;
  font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 0 0.9rem;
}
.relecture-atelier .portail-propos {
  font-family: var(--font-texte);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0 0 1.5rem;
}
.relecture-atelier .portail-champ {
  display: block;
  margin-bottom: 1.1rem;
}
.relecture-atelier .portail-champ span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 0.4rem;
}
.relecture-atelier .portail-champ input {
  width: 100%;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 0.6rem 0.75rem;
  font-family: var(--font-note);
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.relecture-atelier .portail-champ input:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
}
.relecture-atelier .portail-cadre .bouton {
  width: 100%;
  justify-content: center;
}
.relecture-atelier .portail-avis {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--encre-douce);
}
.relecture-atelier .portail-avis.erreur {
  color: var(--bleu);
}
/* La note du pupitre qui dit les trois langues relues. */
.relecture-atelier .note-langues {
  font-style: italic;
}
/* La langue reconnue dans le texte depose, annoncee au-dessus du rapport :
   c'est elle qui commande la langue du rapport et des annotations. */
.relecture-atelier .mention-langue {
  margin: 0 0 0.75rem;
  font-family: var(--font-note);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
/* ------------------------------------------ ecriture de droite a gauche -- */

/* Un texte arabe se lit de droite a gauche : le manuscrit, la marge et le
   rapport portent alors dir="rtl", pose par l'atelier a la detection. Le reste
   de la page — pupitre, guichet — ne bouge pas : il parle la langue
   de l'interface, pas celle de l'ouvrage. */
.relecture-atelier [dir='rtl'] {
  text-align: start;
}
.relecture-atelier [dir='rtl'] .note,
.relecture-atelier [dir='rtl'] .note-corps,
.relecture-atelier [dir='rtl'] .note-suggestion,
.relecture-atelier [dir='rtl'] .note-source {
  text-align: start;
}
/* Les listes du rapport prennent leur retrait du bord ou commence la ligne. */
.relecture-atelier [dir='rtl'] ul,
.relecture-atelier [dir='rtl'] ol {
  padding-inline-start: 1.2rem;
  padding-inline-end: 0;
}
/* Le lien qui donne l'archive du code source — reserve aux pages de service.
   Il porte la fleche de telechargement, d'ou la mise en ligne souple du texte
   et du glyphe. */
.relecture-atelier .lien-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.relecture-atelier .lien-source .glyphe {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
/* Le bouton qui pose Marge sur l'ecran d'accueil. Il ne parait que lorsque le
   navigateur accepte de proposer l'installation ; on lui donne alors le bleu
   plein de la maison et une pastille assez large pour qu'il se voie du premier
   coup d'oeil, loin de la discretion des simples liens de la rubrique. */
.relecture-atelier .lien-installer {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--bleu);
  border-radius: 999px;
  background: var(--bleu);
  color: var(--feuille);
  font-size: 0.82rem;
  box-shadow: 0 2px 10px rgba(23, 105, 224, 0.28);
  transition:
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}
.relecture-atelier .lien-installer:hover,
.relecture-atelier .lien-installer:focus-visible {
  background: #1152b8;
  border-color: #1152b8;
  color: var(--feuille);
  box-shadow: 0 4px 14px rgba(23, 105, 224, 0.36);
  transform: translateY(-1px);
}
.relecture-atelier .lien-installer .glyphe {
  width: 1.6em;
  height: 1.6em;
  flex: none;
}
.relecture-atelier .lien-installer[disabled] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
}
/* Posee sur l'ecran d'accueil, l'application n'a plus rien a proposer. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .relecture-atelier [data-installer],
.relecture-atelier [data-installer-aide] {
    display: none !important;
  }
}
/* ------------------------------------------------------------------ depot -- */

/* La rubrique n'a ni bandeau ni enseigne : le pupitre de depot ouvre la section
   lui-meme, et ne garde au-dessus de lui que le peu de blanc qu'il faut pour le
   detacher de la rubrique precedente. */
.relecture-atelier .zone {
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 4vw, 3.5rem) 5rem;
}
/* Le pupitre de depot et le feuillet d'etat partagent la meme rangee : le texte
   depose reste sous les yeux pendant que la relecture avance a cote. Tant que
   rien n'est lance, le feuillet est absent et le pupitre occupe la rangee. */
.relecture-atelier .etabli {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: 2rem;
}
.relecture-atelier .depot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  flex: 1 1 34rem;
  min-width: 0;
  max-width: 62rem;
}
/* ---------------------------------------------- le haut du tableau -- */

/* Ce qui commande le metier tient en haut, d'un seul tenant : le mode d'emploi
   et les boutons. Le pupitre du texte vient dessous, sur toute la largeur.
   Quand la place manque, les pupitres se rangent les uns sous les autres, dans
   le meme ordre. */
.relecture-atelier .commandes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
/* Le mode d'emploi : une voie, une fleche, tombant sur le bouton qu'elle
   designe. Les colonnes du mode d'emploi et celles des boutons se plient au
   meme rythme : la fleche ne montre jamais le mauvais bouton. */
.relecture-atelier .mode-emploi,
.relecture-atelier .rangee-metiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
}
.relecture-atelier .mode-emploi {
  margin-bottom: 0.9rem;
}
.relecture-atelier .voie {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.relecture-atelier .voie-titre {
  font-family: var(--font-note);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.35rem;
}
.relecture-atelier .voie-propos {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--encre-pale);
}
/* La fleche pend au bas de la voie, quelle que soit la longueur du propos :
   elle arrive ainsi juste au-dessus de la rangee des boutons. */
.relecture-atelier .fleche {
  display: block;
  width: 1.4rem;
  height: 2.1rem;
  margin: 0.55rem auto 0;
  color: var(--encre-pale);
  opacity: 0.8;
}
/* Le bouton de metier prend toute sa colonne, sous la fleche qui le designe. */
.relecture-atelier .rangee-metiers .bouton {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.relecture-atelier .rangee-versement {
  margin-bottom: 0;
  align-items: stretch;
}
/* Le versement est la porte d'entree du metier pour qui n'a pas son texte dans
   le presse-papier : le bouton porte donc la couleur de la maison, prend toute
   la largeur qui reste a cote de « Vider », et s'annonce d'un cran plus haut
   que les boutons ordinaires. */
.relecture-atelier .bouton-verser {
  flex: 1 1 18rem;
  justify-content: center;
  padding: 0.85rem 1.3rem;
  background: #eef5fe;
  border: 1.5px solid var(--bleu);
  color: var(--bleu);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.1);
}
.relecture-atelier .bouton-verser .glyphe {
  width: 1.15em;
  height: 1.15em;
}
.relecture-atelier .bouton-verser:hover {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #f4f9ff;
  box-shadow: 0 0 0 5px rgba(23, 105, 224, 0.16);
}
.relecture-atelier .bouton-verser:focus-visible {
  outline: 2px solid var(--nuit);
  outline-offset: 3px;
}
.relecture-atelier .pupitre-commande .etat-import {
  margin-top: 1.1rem;
}
.relecture-atelier .pupitre {
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 #fff inset, 0 18px 40px -32px rgba(10, 23, 48, 0.55);
  padding: 1.5rem;
}
.relecture-atelier .pupitre-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.relecture-atelier .pupitre-entete h2 {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.relecture-atelier .compteur-signes {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
}
.relecture-atelier #saisie-texte {
  display: block;
  width: 100%;
  min-height: 46vh;
  resize: vertical;
  padding: 1.35rem 1.4rem;
  background: #f8fbff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.75;
  background-image: linear-gradient(var(--filet-fin) 1px, transparent 1px);
  background-size: 100% 1.75em;
  background-position: 0 1.55em;
  background-attachment: local;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.relecture-atelier #saisie-texte:focus {
  outline: none;
  border-color: #7fa8de;
  box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.1);
}
.relecture-atelier #saisie-texte::placeholder {
  color: var(--encre-pale);
  font-style: italic;
}
/* Fichier survolant la zone de saisie : le cadre s'ouvre. */
.relecture-atelier #saisie-texte.survol {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14);
}
/* Les commandes tiennent le haut du pupitre, sous le titre : le versement d'un
   fichier reste visible sans descendre sous la zone de saisie. */
.relecture-atelier .rangee-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.relecture-atelier .bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.05rem;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition),
    color var(--transition);
}
.relecture-atelier .bouton:hover {
  background: #f8fbff;
  border-color: #a8c6ea;
  transform: translateY(-1px);
}
.relecture-atelier .bouton:active {
  transform: translateY(0);
}
.relecture-atelier .bouton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.relecture-atelier .bouton-primaire {
  background: var(--encre);
  border-color: var(--encre);
  color: #f4f9ff;
  padding-inline: 1.4rem;
}
.relecture-atelier .bouton-primaire:hover {
  background: #0f2344;
  border-color: #0f2344;
  color: #fff;
}
.relecture-atelier .bouton-discret {
  border-color: transparent;
  color: var(--encre-douce);
}
.relecture-atelier .bouton .glyphe {
  width: 1em;
  height: 1em;
  flex: none;
}
/* Compte rendu de la lecture d'un fichier verse : progression, puis bilan. */
.relecture-atelier .etat-import {
  margin: 0 0 1.1rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--azur);
  background: #f8fbff;
  font-family: var(--font-note);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.relecture-atelier .etat-import.erreur {
  border-left-color: var(--bleu);
  color: var(--bleu);
}
.relecture-atelier .note-depot {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--encre-pale);
  line-height: 1.6;
}
/* ------------------------------------------------------------- barre etat -- */

/* Feuillet dresse a cote du pupitre : l'avancement en haut, le compte par
   nature au milieu, les commandes de telechargement en bas. Il suit la page a
   la maniere d'un signet, sans jamais depasser la hauteur de l'ecran. */
.relecture-atelier .barre-etat {
  position: sticky;
  top: 1rem;
  z-index: 40;
  align-self: flex-start;
  flex: 1 1 24rem;
  min-width: 0;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(8px);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 14px 30px -28px rgba(10, 23, 48, 0.7);
}
.relecture-atelier .avancement {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--encre-douce);
  min-width: 0;
}
.relecture-atelier .jauge {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--papier-creux);
  border-radius: 999px;
  overflow: hidden;
}
.relecture-atelier .jauge span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--bleu);
  transition: transform 320ms ease;
}
.relecture-atelier .avancement.termine .jauge span {
  background: var(--azur);
}
.relecture-atelier .decompte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.relecture-atelier .filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.relecture-atelier .filtre .puce {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ton, var(--encre));
  flex: none;
}
.relecture-atelier .filtre .nombre {
  font-variant-numeric: tabular-nums;
  color: var(--encre-pale);
}
.relecture-atelier .filtre:hover {
  border-color: #a8c6ea;
  background: #f8fbff;
}
.relecture-atelier .filtre[aria-pressed='false'] {
  opacity: 0.4;
  text-decoration: line-through;
}
/* La feuille couverte, le jeton ne filtre plus rien : il compte. Il garde son
   allure, il perd seulement sa main. */
.relecture-atelier .filtre[disabled] {
  cursor: default;
  opacity: 1;
}
.relecture-atelier .filtre[disabled]:hover {
  border-color: var(--filet);
  background: transparent;
}
/* Les pieces a emporter et l'interruption ferment le feuillet : elles sont
   poussees en bas, sous le compte des annotations. Les intitules tiennent en
   deux mots et les boutons se rangent deux par deux : la rangee reste courte,
   et la liste des etudiants prend place a cote d'eux. */
.relecture-atelier .actions-etat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
  border-top: 1px solid var(--filet-fin);
}
.relecture-atelier .actions-etat .bouton {
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
}
.relecture-atelier .actions-etat .glyphe {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}
/* L'interruption ne se range pas avec les pieces : elle tient sa propre ligne,
   au-dessus d'elles, pour qu'on ne l'atteigne pas en visant un telechargement. */
.relecture-atelier .actions-etat .action-large {
  grid-column: 1 / -1;
}
.relecture-atelier .alerte {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: #eaf2fd;
  border: 1px solid #bcd6f4;
  border-radius: var(--rayon);
  font-size: 0.82rem;
  color: #0f4c9c;
  line-height: 1.55;
}
.relecture-atelier .alerte button {
  margin-left: auto;
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
  font-size: 0.8rem;
  color: inherit;
}
/* Avertissement de volume : ouvrage de plusieurs centaines de pages. */
.relecture-atelier .mention-volume {
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: #eef4fb;
  border-left: 3px solid var(--cyan);
  font-family: var(--font-note);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
/* ------------------------------------------------------------- cahiers -- */

/* Un memoire de 400 pages ne tient pas dans un seul rendu : la feuille
   n'affiche qu'un cahier, et cette barre sert a passer de l'un a l'autre. */
.relecture-atelier .navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.2rem 0.75rem;
  border-bottom: 1px solid var(--filet-fin);
}
.relecture-atelier .navigation .bouton {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
}
.relecture-atelier .navigation .bouton:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.relecture-atelier .choix-cahier {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-note);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
.relecture-atelier .choix-cahier select {
  max-width: 26rem;
  padding: 0.35rem 0.55rem;
  background: #f8fbff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-family: var(--font-note);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}
.relecture-atelier .cahier-etat {
  margin-left: auto;
  font-family: var(--font-note);
  font-size: 0.74rem;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------- feuille -- */
.relecture-atelier .feuille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largeur-marge);
  gap: 0 clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1.25rem, 3vw, 3rem);
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -50px rgba(10, 23, 48, 0.75);
}
/* La feuille est une grille : l'attribut hidden ne suffirait pas a la couvrir,
   la regle de classe l'emportant sur celle du navigateur. */
.relecture-atelier .feuille[hidden] {
  display: none;
}
/* Ce qui tient la place de la feuille pour le client : ou sont ses annotations,
   et par quoi il les emporte. */
.relecture-atelier .feuille-couverte {
  margin: 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--filet);
  border-inline-start: 3px solid var(--azur);
  border-radius: var(--rayon);
  background: #f8fbff;
  font-family: var(--font-note);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--encre-douce);
}
/* ------------------------------------------------------------------ voile -- */

/* La feuille telle que le client la voit : ouverte, entiere, chaque releve et
   chaque remarque a sa place — et floutee. Ce que le client a paye est le
   document annote ; l'ecran en montre la forme, il ne s'en recopie pas. Une
   session du site, elle, lit en clair : c'est a cette lecture que le travail se
   controle avant de partir.

   Le flou porte sur les deux zones de texte, et sur elles seules : les filets,
   les traces de renvoi et le cadre du feuillet restent nets, de sorte que le
   client reconnaisse son propre document sous le voile. */
.relecture-atelier .feuille.voilee .manuscrit,
.relecture-atelier .feuille.voilee .marge {
  filter: blur(5px);
  /* Rien ne s'y selectionne, rien ne s'y clique : ni la copie au clavier, ni le
     glisser d'une phrase ne rendraient un texte que l'ecran ne montre pas. */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* La mention posee sur la feuille voilee : elle dit pourquoi le texte est flou,
   et ou il se lit. Elle traverse les deux colonnes, au-dessus du manuscrit. */
.relecture-atelier .feuille-voile {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--filet);
  border-inline-start: 3px solid var(--azur);
  border-radius: var(--rayon);
  background: #f8fbff;
  font-family: var(--font-note);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--encre-douce);
}
.relecture-atelier .feuille-voile[hidden] {
  display: none;
}
/* Filet vertical de marge, comme sur une copie. */
.relecture-atelier .feuille::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(1.25rem, 3vw, 3rem) + var(--gouttiere) - 0.9rem);
  width: 1px;
  background: linear-gradient(var(--filet-fin), var(--filet) 12%, var(--filet) 88%, var(--filet-fin));
}
.relecture-atelier .liens {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.relecture-atelier .liens path {
  fill: none;
  stroke: var(--filet);
  stroke-width: 1;
  transition: stroke var(--transition), stroke-width var(--transition);
}
.relecture-atelier .liens path.actif {
  stroke: var(--ton, var(--bleu));
  stroke-width: 1.4;
}
/* Le manuscrit : forme d'origine strictement conservee. */
.relecture-atelier .manuscrit {
  position: relative;
  z-index: 2;
  font-family: var(--font-texte);
  font-size: 1.02rem;
  line-height: var(--interligne);
  color: var(--encre);
  hyphens: none;
}
.relecture-atelier .ligne {
  display: grid;
  grid-template-columns: var(--gouttiere) minmax(0, 1fr);
  align-items: start;
}
.relecture-atelier .ligne:hover .num {
  color: var(--encre-douce);
}
.relecture-atelier .num {
  font-family: var(--font-note);
  font-size: 0.68rem;
  line-height: calc(var(--interligne) * 1.5);
  /* Le numero se range du cote ou la ligne commence : a droite du texte
     latin, a gauche du texte arabe. */
  text-align: end;
  padding-inline-end: 1.4rem;
  color: #93a2b8;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
.relecture-atelier .txt {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-height: calc(1em * var(--interligne));
}
/* Les titres gardent leur rang : une partie ne se lit pas comme un chapitre,
   ni un chapitre comme une section. Le rang vient du plan que le fichier verse
   declare lui-meme (assets/relecture-extract.js). */
.relecture-atelier .ligne.titre .txt {
  font-family: var(--font-titre, var(--font-texte));
  font-weight: 600;
  line-height: 1.35;
  hyphens: none;
}
.relecture-atelier .ligne.rang-1 .txt {
  font-size: 1.5em;
  margin-top: 1.5em;
}
.relecture-atelier .ligne.rang-2 .txt {
  font-size: 1.25em;
  margin-top: 1.1em;
}
.relecture-atelier .ligne.rang-3 .txt {
  font-size: 1.08em;
  margin-top: 0.85em;
}
.relecture-atelier .ligne.rang-4 .txt {
  font-size: 1em;
  margin-top: 0.65em;
}
.relecture-atelier .manuscrit > .ligne.titre:first-child .txt {
  margin-top: 0;
}
/* Les notes de bas de page, relevees a la suite du texte : chacune sur son
   numero, le texte aligne sous lui-meme, dans l'ordre du manuscrit. */
.relecture-atelier .ligne.note-bas .txt {
  font-size: 0.88em;
  padding-inline-start: 1.6em;
  text-indent: -1.6em;
  hyphens: none;
}
/* Marques de renvoi dans le texte : non selectionnables, la copie reste fidele. */
.relecture-atelier .marque {
  display: inline-block;
  min-width: 1.25em;
  margin: 0 0.1em 0 0.06em;
  padding: 0 0.22em;
  border: none;
  border-radius: 2px;
  background: var(--ton, var(--bleu));
  color: #ffffff;
  font-family: var(--font-note);
  font-size: 0.58em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  vertical-align: super;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.82;
  transition: opacity var(--transition), transform var(--transition);
}
.relecture-atelier .marque:hover,
.relecture-atelier .marque.actif {
  opacity: 1;
  transform: translateY(-1px);
}
/* Soulignements : un trace par nature de probleme. */
.relecture-atelier .releve {
  text-decoration-line: underline;
  text-decoration-thickness: 1.4px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ton);
  transition: background-color var(--transition);
}
.relecture-atelier .releve.faute {
  --ton: var(--bleu);
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}
.relecture-atelier .releve.maladresse {
  --ton: var(--cyan);
  text-decoration-style: solid;
}
.relecture-atelier .releve.redaction {
  --ton: var(--azur);
  text-decoration-style: dashed;
}
.relecture-atelier .releve.structure {
  --ton: var(--indigo);
  text-decoration-style: double;
  text-decoration-thickness: 1px;
}
.relecture-atelier .releve.citation {
  --ton: var(--ardoise);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}
.relecture-atelier .releve.reference {
  --ton: var(--nuit);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}
.relecture-atelier .releve.vise {
  background: color-mix(in srgb, var(--ton) 13%, transparent);
  border-radius: 2px;
}
.relecture-atelier .releve.multiple {
  background: color-mix(in srgb, var(--ton) 7%, transparent);
}
/* ------------------------------------------------------------------ marge -- */
.relecture-atelier .marge {
  position: relative;
  z-index: 2;
  min-height: 4rem;
}
.relecture-atelier .note {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  padding: 0.45rem 0.65rem 0.5rem 0.7rem;
  background: #f8fbff;
  border: 1px solid var(--filet-fin);
  border-inline-start: 2px solid var(--ton, var(--bleu));
  border-start-start-radius: 0;
  border-start-end-radius: var(--rayon);
  border-end-end-radius: var(--rayon);
  border-end-start-radius: 0;
  text-align: start;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), top 260ms ease;
}
.relecture-atelier .note:hover,
.relecture-atelier .note.actif {
  transform: translateX(-3px);
  box-shadow: -3px 3px 0 0 var(--papier-creux);
  border-color: var(--filet);
}
/* La note se souleve vers le texte qu'elle commente : a gauche quand le texte
   se lit de gauche a droite, a droite quand il se lit de droite a gauche. */
.relecture-atelier [dir='rtl'] .note:hover,
.relecture-atelier [dir='rtl'] .note.actif {
  transform: translateX(3px);
  box-shadow: 3px 3px 0 0 var(--papier-creux);
}
.relecture-atelier .note-entete {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.18rem;
}
.relecture-atelier .note-rang {
  font-family: var(--font-note);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  background: var(--ton, var(--bleu));
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
}
.relecture-atelier .note-corps {
  font-size: 0.79rem;
  line-height: 1.38;
  color: var(--encre);
}
.relecture-atelier .note-source {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--encre-pale);
}
.relecture-atelier .note-suggestion {
  display: block;
  margin-top: 0.28rem;
  padding-top: 0.24rem;
  border-top: 1px dotted var(--filet);
  font-family: var(--font-texte);
  font-size: 0.78rem;
  line-height: 1.38;
  font-style: italic;
  color: var(--encre-douce);
}
/* Esquisses d'attente, calquees sur la forme des notes. */
.relecture-atelier .esquisse {
  position: relative;
  overflow: hidden;
  padding: 0.55rem 0.7rem;
  background: #f8fbff;
  border: 1px solid var(--filet-fin);
  border-left: 2px solid var(--papier-creux);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin-bottom: 0.4rem;
}
.relecture-atelier .esquisse i {
  display: block;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--papier-creux);
  margin-bottom: 0.4rem;
}
.relecture-atelier .esquisse i:nth-child(1) {
  width: 35%;
}
.relecture-atelier .esquisse i:nth-child(2) {
  width: 100%;
}
.relecture-atelier .esquisse i:nth-child(3) {
  width: 72%;
  margin-bottom: 0;
}
.relecture-atelier .esquisse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: balayage 1.5s ease-in-out infinite;
}
@keyframes balayage {
  to {
    transform: translateX(100%);
  }
}
.relecture-atelier .marge-vide {
  padding: 0.9rem 0.95rem;
  border: 1px dashed var(--filet);
  border-radius: var(--rayon);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--encre-pale);
}
/* ------------------------------------------------- rapport d'évaluation -- */
.relecture-atelier .rapport {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.relecture-atelier .rapport-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--encre);
  margin-bottom: 2rem;
}
.relecture-atelier .rapport-entete h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  font-weight: 500;
  font-variation-settings: 'SOFT' 20, 'opsz' 30;
  letter-spacing: -0.02em;
  margin: 0;
}
.relecture-atelier .rapport-entete p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--encre-pale);
  max-width: 40ch;
}
.relecture-atelier .chapitres {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.relecture-atelier .chapitre {
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem 1.6rem;
}
.relecture-atelier .chapitre.pleine {
  grid-column: span 12;
}
.relecture-atelier .chapitre > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-titre);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 0.35rem;
}
.relecture-atelier .chapitre > .propos {
  margin: 0 0 1.1rem;
  font-size: 0.79rem;
  color: var(--encre-pale);
  line-height: 1.55;
}
.relecture-atelier .chapitre p,
.relecture-atelier .chapitre li {
  font-size: 0.86rem;
  line-height: 1.62;
}
/* Intitules secondaires : « Recommandations », « Avis »… */
.relecture-atelier .chapitre > h4 {
  font-family: var(--font-note);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin: 0.95rem 0 0.3rem;
}
.relecture-atelier .liste-nue {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.relecture-atelier .liste-nue li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
  color: var(--encre-douce);
}
.relecture-atelier .liste-nue li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.42rem;
  height: 1px;
  background: var(--bleu);
}
.relecture-atelier .mention-vide {
  font-size: 0.82rem;
  color: var(--encre-pale);
  font-style: italic;
}
/* ------------------------------------------------------ grille remplie -- */
.relecture-atelier .chapitre.evaluation > h4 {
  margin-top: 1.6rem;
}
.relecture-atelier .grille {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-family: var(--font-note);
  font-size: 0.78rem;
}
.relecture-atelier .grille th,
.relecture-atelier .grille td {
  border: 1px solid var(--filet);
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.relecture-atelier .grille thead th {
  background: var(--papier-creux);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  font-weight: 700;
}
/* Le seul tableau du rapport, celui de l'avis : deux colonnes, les cases et
   le motif. */
.relecture-atelier .grille .colonne-cases {
  width: 42%;
}
.relecture-atelier .grille .colonne-commentaire {
  color: var(--encre-douce);
}
.relecture-atelier .cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.relecture-atelier .chapitre .cases li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--encre-pale);
}
.relecture-atelier .chapitre .cases li.cochee {
  color: var(--encre);
  font-weight: 700;
}
.relecture-atelier .cases .case {
  color: var(--bleu);
  font-size: 0.95em;
}
.relecture-atelier .chapitre .amorce {
  margin: 0 0 0.4rem;
  font-style: italic;
  color: var(--encre-douce);
}
/* ------------------------------------------------------------- responsive -- */
@media (max-width: 900px) {
  .relecture-atelier {
    --gouttiere: 2.2rem;
  }
  .relecture-atelier .feuille {
    grid-template-columns: minmax(0, 1fr);
  }
  .relecture-atelier .feuille::before {
    display: none;
  }
  .relecture-atelier .liens {
    display: none;
  }
  .relecture-atelier .marge {
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--filet);
  }
  .relecture-atelier .marge::before {
    content: 'Annotations';
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin-bottom: 0.6rem;
  }
  .relecture-atelier .note {
    position: static !important;
    width: 100%;
    margin-bottom: 0.4rem;
  }
  /* Sur un ecran etroit, le pupitre et le feuillet d'etat ne tiennent plus
     cote a cote : le feuillet passe dessous, sur toute la largeur. */
  .relecture-atelier .etabli {
    flex-direction: column;
  }
  .relecture-atelier .depot,
.relecture-atelier .barre-etat {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .relecture-atelier .commandes {
    grid-template-columns: minmax(0, 1fr);
  }
  .relecture-atelier .barre-etat {
    position: static;
  }
  .relecture-atelier .actions-etat {
    margin-left: 0;
  }
  .relecture-atelier .cahier-etat {
    margin-left: 0;
    width: 100%;
  }
  /* Deux colonnes ne tiennent pas sur un téléphone : le tableau de l'avis se
     déplie — les cases cochées, puis le motif. */
  .relecture-atelier .grille,
.relecture-atelier .grille tbody,
.relecture-atelier .grille tr,
.relecture-atelier .grille td {
    display: block;
    width: auto;
  }
  .relecture-atelier .grille thead {
    display: none;
  }
  .relecture-atelier .grille tr {
    border: 1px solid var(--filet);
    margin-bottom: 0.7rem;
  }
  .relecture-atelier .grille td {
    border: none;
    border-top: 1px solid var(--filet-fin);
  }
  .relecture-atelier .grille td:first-child {
    border-top: none;
    background: var(--papier-creux);
  }
}
@media (prefers-reduced-motion: reduce) {
  .relecture-atelier *,
.relecture-atelier *::before,
.relecture-atelier *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ----------------------------------------------------------------- impression -- */
@media print {
  @page {
    margin: 16mm 12mm;
  }
  .relecture-atelier {
    background: #fff;
    font-size: 11pt;
  }
  .relecture-atelier .grain,
.relecture-atelier .rangee-outils,
.relecture-atelier .actions-etat,
.relecture-atelier .avancement,
.relecture-atelier .navigation,
.relecture-atelier .mention-volume,
.relecture-atelier .etat-import,
.relecture-atelier .depot,
.relecture-atelier .liens {
    display: none !important;
  }
  .relecture-atelier .barre-etat {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0.5rem;
  }
  .relecture-atelier .feuille {
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
    grid-template-columns: minmax(0, 1fr) 58mm;
    gap: 0 8mm;
  }
  .relecture-atelier .note {
    break-inside: avoid;
    box-shadow: none;
  }
  /* Une feuille voilee ne s'imprime pas : l'imprimante ne connait pas le flou de
     l'ecran, et une page imprimee est une page recopiable. Ce qui part a
     l'imprimante est la mention, non le texte annote. */
  .relecture-atelier .feuille.voilee .manuscrit,
  .relecture-atelier .feuille.voilee .marge {
    display: none !important;
  }
  .relecture-atelier .chapitre {
    break-inside: avoid;
  }
  .relecture-atelier .zone {
    padding: 0;
  }
}
/* ------------------------------------------------------------------- pied -- */
.relecture-atelier .pied {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) 4rem;
  border-top: 1px solid var(--filet);
  padding-top: 1.75rem;
}
.relecture-atelier .pied p {
  margin: 0;
}
/* Le pied ne porte plus que la note d'installation, montree par les seuls
   navigateurs qui l'acceptent : sans elle, il ne reste rien a encadrer. */
.relecture-atelier .pied:not(:has(> p:not([hidden]))) {
  display: none;
}
.relecture-atelier .pied-note {
  margin-top: 0;
  max-width: 78ch;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--encre-pale);
}
.relecture-atelier .pied-note a {
  color: var(--encre-douce);
}
.relecture-atelier .pied-note code {
  font-size: 0.95em;
  color: var(--encre-douce);
}
@media print {
  .relecture-atelier .pied {
    display: none;
  }
}
/* Ce qu'il reste d'exemplaires a tirer, sous la barre d'etat de l'atelier. */
.relecture-atelier .mention-droit {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--cyan);
  background: #f8fbff;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.relecture-atelier .mention-droit.erreur {
  border-left-color: var(--bleu);
  color: var(--bleu);
}
/* ---------------------------------------------------------------- guichet -- */

/* Le guichet s'ouvre par-dessus l'atelier au moment de lancer la relecture :
   le tarif, les moyens de paiement, la declaration du reglement. */
.relecture-atelier .guichet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: rgba(10, 23, 48, 0.55);
  backdrop-filter: blur(2px);
}
.relecture-atelier .guichet-cadre {
  position: relative;
  width: min(38rem, 100%);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--encre);
  border-radius: var(--rayon);
  padding: 2rem 1.85rem 1.75rem;
  box-shadow: 0 30px 60px -30px rgba(10, 23, 48, 0.7);
}
.relecture-atelier .guichet-fermer {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--encre-pale);
  cursor: pointer;
}
.relecture-atelier .guichet-fermer:hover {
  background: var(--papier-creux);
  color: var(--encre);
}
.relecture-atelier .guichet-etiquette {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
/* La premiere utilisation offerte. L'ecran ne se distingue du guichet ordinaire
   que par une chose : rien n'y est demande. Un filet cyan le dit sans crier. */
.relecture-atelier .guichet-franchise {
  border-top: 3px solid #18a6d9;
}
.relecture-atelier .guichet-etiquette.guichet-offert {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #e6f6fc;
  color: #0d6b8f;
  letter-spacing: 0.12em;
}
/* « Ce n'est pas ma premiere utilisation » : la sortie doit exister, sans se
   disputer la place avec ce qui est offert. */
.relecture-atelier .guichet-passer {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.relecture-atelier .guichet-titre {
  font-family: var(--font-titre);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0.35rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.relecture-atelier .guichet-mesure {
  margin: 0 0 1.15rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-grille {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}
.relecture-atelier .guichet-grille li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-size: 0.82rem;
  color: var(--encre-pale);
}
.relecture-atelier .guichet-grille li.retenu {
  border-color: var(--filet);
  background: var(--papier-creux);
  color: var(--encre);
}
/* L'offre des institutions, sous la grille des tarifs. */
.relecture-atelier .guichet-institution {
  margin: -0.85rem 0 1.35rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid var(--filet);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-institution a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Le recours : ce qu'on lit quand la validation tarde. Il se detache du reste du
   guichet — c'est une adresse a laquelle ecrire, pas une consigne de plus. */
.relecture-atelier .guichet-secours {
  margin: 1rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px dashed var(--filet);
  border-inline-start: 3px solid var(--cyan);
  border-radius: var(--rayon);
  background: #f8fbff;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-secours a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.relecture-atelier .guichet-formule {
  font-family: var(--font-titre);
  font-weight: 600;
}
.relecture-atelier .guichet-propos {
  font-size: 0.78rem;
}
.relecture-atelier .guichet-somme {
  font-weight: 700;
  white-space: nowrap;
}
/* Le titre du second bloc d'une meme page du guichet : l'adresse demandee sous
   la grille des tarifs. */
.relecture-atelier .guichet-sous-titre {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Les deux boutons de paiement. Ce sont les gestes du second temps : larges,
   pleins, cote a cote quand la place le permet, l'un sous l'autre sur un
   telephone — c'est la qu'on paie par Wave. */
.relecture-atelier .guichet-paiements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}
.relecture-atelier .guichet-payer {
  justify-content: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
/* Le moyen par lequel le client est parti payer reste marque : il revient sur
   cette page apres un detour par un autre onglet. */
.relecture-atelier .guichet-payer.retenu {
  box-shadow: inset 0 0 0 2px var(--papier), 0 0 0 2px var(--encre);
}
.relecture-atelier .guichet-volet {
  padding: 0.95rem 1rem;
  margin-bottom: 1.15rem;
  background: var(--papier-creux);
  border: 1px solid var(--filet-fin);
  border-radius: var(--rayon);
}
/* Tant qu'aucun moyen n'a ete choisi, le volet des coordonnees n'a rien a
   montrer : il ne doit pas laisser un cadre vide au milieu de la page. */
.relecture-atelier .guichet-volet:empty {
  display: none;
}
.relecture-atelier .guichet-volet > :first-child {
  margin-top: 0;
}
.relecture-atelier .guichet-volet > :last-child {
  margin-bottom: 0;
}
.relecture-atelier .guichet-coordonnees {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.relecture-atelier .guichet-coordonnees div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
.relecture-atelier .guichet-coordonnees dt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
.relecture-atelier .guichet-coordonnees dd {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}
.relecture-atelier .guichet-coordonnees dd.mono {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: 0.04em;
}
.relecture-atelier .guichet-copie {
  padding: 0.15rem 0.5rem;
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-family: var(--font-note);
  font-size: 0.68rem;
  color: var(--encre-douce);
  cursor: pointer;
}
.relecture-atelier .guichet-copie:hover {
  border-color: #a8c6ea;
}
.relecture-atelier .guichet-consigne {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-lien {
  width: 100%;
  justify-content: center;
}
.relecture-atelier .guichet-vide {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--cyan);
  background: #f8fbff;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
/* Les deux reponses du troisieme temps — oui, non — a la question du paiement.
   Elles se tiennent cote a cote, de meme largeur : c'est une question franche,
   aucune des deux reponses n'est cachee sous l'autre. */
.relecture-atelier .guichet-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.relecture-atelier .guichet-choix .bouton {
  justify-content: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
/* La bonne nouvelle du quatrieme temps : les references du texte sont revelees.
   Elle s'annonce d'un trait, au-dessus de la demande de confirmation. */
.relecture-atelier .guichet-revele {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--azur);
  background: var(--papier-creux);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-champs {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.relecture-atelier .guichet-champs .champ {
  display: grid;
  gap: 0.3rem;
}
.relecture-atelier .guichet-champs .champ span {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
.relecture-atelier .guichet-champs .champ input {
  width: 100%;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 0.55rem 0.7rem;
  font-family: var(--font-note);
  font-size: 0.92rem;
}
.relecture-atelier .guichet-champs .champ input:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
}
.relecture-atelier .guichet-valider {
  width: 100%;
  justify-content: center;
}
/* Le retour au premier temps : present, mais discret — c'est le paiement qu'on
   attend ici, pas la correction du courriel. */
.relecture-atelier .guichet-cadre [data-retour] {
  width: 100%;
  justify-content: center;
  margin-top: 0.6rem;
}
.relecture-atelier .guichet-pied {
  margin: 0.85rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--encre-pale);
}
.relecture-atelier .guichet-attente {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-pouls {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-radius: 999px;
  background: var(--azur);
  animation: pouls 1.4s ease-in-out infinite;
}
@keyframes pouls {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .relecture-atelier .guichet-pouls {
    animation: none;
    opacity: 0.8;
  }
}
.relecture-atelier .guichet-avis {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.relecture-atelier .guichet-avis.erreur {
  color: var(--bleu);
}
@media print {
  .relecture-atelier .guichet {
    display: none;
  }
}
/* La premiere utilisation, offerte : dite au pied de page, et signalee comme
   telle sans crier. */
/* ------------------------------------------------------ comment ça marche -- */

/* La rubrique qui montre les deux metiers. Les vignettes sont dessinees a meme
   la page : une capture d'ecran vieillit a chaque changement d'interface, un
   trait bleu sur une ligne de texte ne vieillit pas — et se lit sur un
   telephone comme sur un ecran de bureau. */
.relecture-atelier .comment {
  margin-top: clamp(3rem, 6vw, 5rem);
  scroll-margin-top: 1.5rem;
}
.relecture-atelier .comment-voies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.6rem;
}
.relecture-atelier .comment-voie {
  padding: 1.2rem 1.25rem 1.35rem;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.relecture-atelier .comment-voie-titre {
  margin: 0 0 1rem;
  font-family: var(--font-titre);
  font-size: 1.12rem;
  font-weight: 600;
}
.relecture-atelier .comment-etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;
}
/* Chaque geste : la vignette a gauche, ce qu'elle montre a droite ; l'une sous
   l'autre quand la colonne se resserre. */
.relecture-atelier .comment-etape {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
@media (max-width: 34rem) {
  .relecture-atelier .comment-etape {
    grid-template-columns: minmax(0, 1fr);
  }
}
.relecture-atelier .comment-etape p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.relecture-atelier .comment-figure {
  margin: 0;
}
.relecture-atelier .comment-vignette {
  display: block;
  width: 100%;
  height: auto;
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.relecture-atelier .comment-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
.relecture-atelier .comment-intact {
  margin: 1.6rem 0 0;
  padding: 0.9rem 1.15rem;
  max-width: 78ch;
  border-left: 3px solid var(--azur);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: rgba(42, 95, 158, 0.06);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--encre-douce);
}
/* Le trait des vignettes. Une feuille, des lignes de texte, un filet bleu de
   marge, des pastilles numerotees : le meme vocabulaire que celui de
   l'atelier, pour que le dessin annonce ce qu'on verra vraiment. */
.relecture-atelier .v-feuille {
  fill: var(--feuille);
  stroke: var(--filet);
  stroke-width: 1.2;
}
.relecture-atelier .v-ligne,
.relecture-atelier .v-note {
  stroke: var(--encre-pale);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}
.relecture-atelier .v-note {
  stroke: var(--bleu);
  stroke-width: 1.4;
  opacity: 0.75;
}
.relecture-atelier .v-titre {
  stroke: var(--encre);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.relecture-atelier .v-colonne {
  stroke: var(--filet);
  stroke-width: 1;
  fill: none;
}
.relecture-atelier .v-coche {
  stroke: var(--azur);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.relecture-atelier .v-vague {
  stroke: var(--bleu);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}
.relecture-atelier .v-filet-bleu {
  stroke: var(--bleu);
  stroke-width: 1.6;
  fill: none;
}
.relecture-atelier .v-pastille {
  fill: var(--bleu);
}
.relecture-atelier .v-numero {
  fill: var(--feuille);
  font-family: var(--font-note);
  font-size: 5px;
  font-weight: 700;
  text-anchor: middle;
}
.relecture-atelier .v-fleche {
  stroke: var(--encre-pale);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.relecture-atelier .v-plan {
  stroke: var(--filet);
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}
/* ---------------------------------------------------------- échantillons -- */

/* La vitrine : deux rubriques cote a cote, chacune tenant ses pieces en liste.
   Elle ne parait que si l'administration y a pose quelque chose — une vitrine
   vide vaut moins qu'une vitrine absente. */
.relecture-atelier .echantillons {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.relecture-atelier .echantillons-rubriques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 1.4rem;
}
.relecture-atelier .echantillon-rubrique {
  padding: 1.1rem 1.15rem;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.relecture-atelier .echantillon-rubrique h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-titre);
  font-size: 1.02rem;
  font-weight: 600;
}
.relecture-atelier .echantillon-rubrique .note-depot {
  margin-top: 0;
}
.relecture-atelier .echantillon-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.relecture-atelier .echantillon {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.relecture-atelier .echantillon .bouton {
  justify-content: flex-start;
  text-align: left;
  font-size: 0.8rem;
}
.relecture-atelier .echantillon-mention {
  font-size: 0.74rem;
  color: var(--encre-pale);
  line-height: 1.5;
}