/* ==========================================================================
   Atelier de relecture — feuille de style
   Parti pris : un manuscrit universitaire pose sur la table d'un relecteur.
   Papier chaud, encre brune, corrections a l'encre rouge, marge large.
   ========================================================================== */

:root {
  --papier: #efe8dc;
  --papier-creux: #e6ddce;
  --feuille: #fcf9f3;
  --encre: #241f1a;
  --encre-douce: #5f564c;
  --encre-pale: #8d8377;
  --filet: #d8cebc;
  --filet-fin: #e7dfd1;

  --rouge: #b23a2f;
  --ambre: #9c661a;
  --sarcelle: #2b6a65;
  --indigo: #3b4b80;
  --prune: #77497a;
  --olive: #5c6a2b;

  --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);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 12% -10%, #f7f1e6 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, #e9e0d0 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. */
.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");
}

::selection {
  background: #e6d2b8;
  color: var(--encre);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- bandeau -- */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  max-width: 1380px;
  margin: 0 auto;
  padding: 2.75rem clamp(1.25rem, 4vw, 3.5rem) 1.5rem;
}

.marque-atelier {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.marque-atelier .sigle {
  font-family: var(--font-titre);
  font-size: clamp(2.6rem, 6vw, 4.1rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.03em;
  line-height: 0.85;
  margin: 0;
  /* La correction a l'encre rouge, sous le seul mot du titre. */
  text-decoration: underline wavy var(--rouge);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}

.marque-atelier .sous-titre {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
  max-width: 15ch;
  line-height: 1.4;
}

/* L'adresse de la maison, entre l'enseigne et le pupitre de dépôt. */
.contact-marge {
  margin: 0 0 1.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--encre-pale);
}

.contact-marge a {
  color: var(--encre-douce);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le recours, dit des la premiere ligne de la page. */
.contact-difficulte {
  color: var(--encre-douce);
}

.enseigne {
  font-family: var(--font-texte);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--encre-douce);
  max-width: 42ch;
  border-left: 1px solid var(--filet);
  padding-left: 1.25rem;
}

/* --------------------------------------------------------------- porte -- */

/* Tant que la session n'est pas reconnue, la page reste derriere la porte :
   rien du site n'apparait, pas meme un instant. */
html[data-acces='attente'] body > *:not(.portail):not(script),
html[data-acces='ferme'] body > *:not(.portail):not(script) {
  display: none !important;
}

.portail {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 80% at 12% -10%, #f7f1e6 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, #e9e0d0 0%, transparent 50%),
    var(--papier);
}

.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(36, 31, 26, 0.55);
}

.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;
  text-decoration: underline wavy var(--rouge);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}

.portail-propos {
  font-family: var(--font-texte);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0 0 1.5rem;
}

.portail-champ {
  display: block;
  margin-bottom: 1.1rem;
}

.portail-champ span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 0.4rem;
}

.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;
}

.portail-champ input:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
}

.portail-cadre .bouton {
  width: 100%;
  justify-content: center;
}

.portail-avis {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.portail-avis.erreur {
  color: var(--rouge);
}

/* ------------------------------------------------------------ cartouche -- */

.cartouche {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.lien-cartouche {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet);
  padding: 0 0 3px;
  cursor: pointer;
  font-family: var(--font-note);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.lien-cartouche:hover,
.lien-cartouche:focus-visible {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}

/* --------------------------------------------- langue de la page -- */

/* Deux mots l'un contre l'autre, dans un cadre unique : le choix de la langue
   se lit comme une bascule, non comme deux liens de plus dans le cartouche.
   Il n'agit que sur la page — le texte relu garde la sienne. */
.choix-langue {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--filet);
  border-radius: 999px;
  overflow: hidden;
}

.langue-bouton {
  background: none;
  border: 0;
  padding: 0.34rem 0.78rem;
  cursor: pointer;
  font-family: var(--font-note);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-pale);
  transition:
    background var(--transition),
    color var(--transition);
}

.langue-bouton + .langue-bouton {
  border-inline-start: 1px solid var(--filet);
}

.langue-bouton:hover,
.langue-bouton:focus-visible {
  color: var(--rouge);
}

.langue-bouton[aria-pressed='true'] {
  background: var(--rouge);
  color: var(--feuille);
}

/* La note du pupitre qui dit les trois langues relues. */
.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. */
.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 — bandeau, pupitre, guichet — ne bouge pas : il parle la langue
   choisie par le lecteur, pas celle de l'ouvrage. */
[dir='rtl'] {
  text-align: start;
}

[dir='rtl'] .note,
[dir='rtl'] .note-corps,
[dir='rtl'] .note-suggestion,
[dir='rtl'] .note-source {
  text-align: start;
}

/* Les listes du rapport prennent leur retrait du bord ou commence la ligne. */
[dir='rtl'] ul,
[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. */
.lien-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.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 rouge
   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 du cartouche. */
.lien-installer {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--rouge);
  border-radius: 999px;
  background: var(--rouge);
  color: var(--feuille);
  font-size: 0.82rem;
  box-shadow: 0 2px 10px rgba(178, 58, 47, 0.28);
  transition:
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.lien-installer:hover,
.lien-installer:focus-visible {
  background: #962f26;
  border-color: #962f26;
  color: var(--feuille);
  box-shadow: 0 4px 14px rgba(178, 58, 47, 0.36);
  transform: translateY(-1px);
}

.lien-installer .glyphe {
  width: 1.6em;
  height: 1.6em;
  flex: none;
}

.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) {
  [data-installer],
  [data-installer-aide] {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ depot -- */

.zone {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.depot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 62rem;
}

.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(36, 31, 26, 0.55);
  padding: 1.5rem;
}

.pupitre-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.pupitre-entete h2 {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.compteur-signes {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
}

#saisie-texte {
  display: block;
  width: 100%;
  min-height: 46vh;
  resize: vertical;
  padding: 1.35rem 1.4rem;
  background: #fffdf9;
  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);
}

#saisie-texte:focus {
  outline: none;
  border-color: #b9a98d;
  box-shadow: 0 0 0 3px rgba(178, 58, 47, 0.1);
}

#saisie-texte::placeholder {
  color: var(--encre-pale);
  font-style: italic;
}

/* Fichier survolant la zone de saisie : le cadre s'ouvre. */
#saisie-texte.survol {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(178, 58, 47, 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. */
.rangee-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}

.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);
}

.bouton:hover {
  background: #fffdf9;
  border-color: #bfae92;
  transform: translateY(-1px);
}

.bouton:active {
  transform: translateY(0);
}

.bouton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.bouton-primaire {
  background: var(--encre);
  border-color: var(--encre);
  color: #fbf7f0;
  padding-inline: 1.4rem;
}

.bouton-primaire:hover {
  background: #3a322a;
  border-color: #3a322a;
  color: #fff;
}

.bouton-discret {
  border-color: transparent;
  color: var(--encre-douce);
}

.bouton .glyphe {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Compte rendu de la lecture d'un fichier verse : progression, puis bilan. */
.etat-import {
  margin: 0 0 1.1rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--sarcelle);
  background: #fffdf9;
  font-family: var(--font-note);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

.etat-import.erreur {
  border-left-color: var(--rouge);
  color: var(--rouge);
}

.note-depot {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--encre-pale);
  line-height: 1.6;
}

/* ------------------------------------------------------------- barre etat -- */

.barre-etat {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  padding: 0.85rem 1.15rem;
  background: rgba(252, 249, 243, 0.93);
  backdrop-filter: blur(8px);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 14px 30px -28px rgba(36, 31, 26, 0.7);
}

.avancement {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: var(--encre-douce);
  min-width: 16rem;
}

.jauge {
  position: relative;
  flex: 1;
  height: 3px;
  background: var(--papier-creux);
  border-radius: 999px;
  overflow: hidden;
}

.jauge span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--rouge);
  transition: transform 320ms ease;
}

.avancement.termine .jauge span {
  background: var(--sarcelle);
}

.decompte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.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);
}

.filtre .puce {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ton, var(--encre));
  flex: none;
}

.filtre .nombre {
  font-variant-numeric: tabular-nums;
  color: var(--encre-pale);
}

.filtre:hover {
  border-color: #bfae92;
  background: #fffdf9;
}

.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. */
.filtre[disabled] {
  cursor: default;
  opacity: 1;
}

.filtre[disabled]:hover {
  border-color: var(--filet);
  background: transparent;
}

.actions-etat {
  display: flex;
  gap: 0.45rem;
  margin-left: auto;
}

.actions-etat .bouton {
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
}

.alerte {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: #fbeeea;
  border: 1px solid #e3c3bc;
  border-radius: var(--rayon);
  font-size: 0.82rem;
  color: #7d3227;
  line-height: 1.55;
}

.alerte .glyphe {
  flex: none;
  margin-top: 0.15rem;
  color: var(--rouge);
}

.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. */
.mention-volume {
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: #f6f1e4;
  border-left: 3px solid var(--ambre);
  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. */
.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);
}

.navigation .bouton {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
}

.navigation .bouton:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.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);
}

.choix-cahier select {
  max-width: 26rem;
  padding: 0.35rem 0.55rem;
  background: #fffdf9;
  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);
}

.cahier-etat {
  margin-left: auto;
  font-family: var(--font-note);
  font-size: 0.74rem;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- feuille -- */

.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(36, 31, 26, 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. */
.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. */
.feuille-couverte {
  margin: 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--filet);
  border-inline-start: 3px solid var(--sarcelle);
  border-radius: var(--rayon);
  background: #fffdf9;
  font-family: var(--font-note);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--encre-douce);
}

/* Filet vertical de marge, comme sur une copie. */
.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));
}

.liens {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.liens path {
  fill: none;
  stroke: var(--filet);
  stroke-width: 1;
  transition: stroke var(--transition), stroke-width var(--transition);
}

.liens path.actif {
  stroke: var(--ton, var(--rouge));
  stroke-width: 1.4;
}

/* Le manuscrit : forme d'origine strictement conservee. */
.manuscrit {
  position: relative;
  z-index: 2;
  font-family: var(--font-texte);
  font-size: 1.02rem;
  line-height: var(--interligne);
  color: var(--encre);
  hyphens: none;
}

.ligne {
  display: grid;
  grid-template-columns: var(--gouttiere) minmax(0, 1fr);
  align-items: start;
}

.ligne:hover .num {
  color: var(--encre-douce);
}

.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: #b8ac9c;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

.txt {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-height: calc(1em * var(--interligne));
}

/* Marques de renvoi dans le texte : non selectionnables, la copie reste fidele. */
.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(--rouge));
  color: #fdfaf4;
  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);
}

.marque:hover,
.marque.actif {
  opacity: 1;
  transform: translateY(-1px);
}

/* Soulignements : un trace par nature de probleme. */
.releve {
  text-decoration-line: underline;
  text-decoration-thickness: 1.4px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ton);
  transition: background-color var(--transition);
}

.releve.faute {
  --ton: var(--rouge);
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}

.releve.maladresse {
  --ton: var(--ambre);
  text-decoration-style: solid;
}

.releve.redaction {
  --ton: var(--sarcelle);
  text-decoration-style: dashed;
}

.releve.structure {
  --ton: var(--indigo);
  text-decoration-style: double;
  text-decoration-thickness: 1px;
}

.releve.citation {
  --ton: var(--prune);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

.releve.reference {
  --ton: var(--olive);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

.releve.vise {
  background: color-mix(in srgb, var(--ton) 13%, transparent);
  border-radius: 2px;
}

.releve.multiple {
  background: color-mix(in srgb, var(--ton) 7%, transparent);
}

/* ------------------------------------------------------------------ marge -- */

.marge {
  position: relative;
  z-index: 2;
  min-height: 4rem;
}

.note {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  padding: 0.45rem 0.65rem 0.5rem 0.7rem;
  background: #fffdf8;
  border: 1px solid var(--filet-fin);
  border-inline-start: 2px solid var(--ton, var(--rouge));
  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;
}

.note:hover,
.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. */
[dir='rtl'] .note:hover,
[dir='rtl'] .note.actif {
  transform: translateX(3px);
  box-shadow: 3px 3px 0 0 var(--papier-creux);
}

.note-entete {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.18rem;
}

.note-rang {
  font-family: var(--font-note);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: #fdfaf4;
  background: var(--ton, var(--rouge));
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
}

.note-nature {
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ton, var(--rouge));
}

.note-gravite {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
}

.note-gravite i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ton, var(--rouge));
  opacity: 0.28;
}

.note-gravite i.pleine {
  opacity: 1;
}

.note-corps {
  font-size: 0.79rem;
  line-height: 1.38;
  color: var(--encre);
}

.note-source {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--encre-pale);
}

.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. */
.esquisse {
  position: relative;
  overflow: hidden;
  padding: 0.55rem 0.7rem;
  background: #fffdf8;
  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;
}

.esquisse i {
  display: block;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--papier-creux);
  margin-bottom: 0.4rem;
}

.esquisse i:nth-child(1) {
  width: 35%;
}
.esquisse i:nth-child(2) {
  width: 100%;
}
.esquisse i:nth-child(3) {
  width: 72%;
  margin-bottom: 0;
}

.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%);
  }
}

.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 -- */

.rapport {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.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;
}

.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;
}

.rapport-entete p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--encre-pale);
  max-width: 40ch;
}

.chapitres {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.chapitre {
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem 1.6rem;
}

.chapitre.pleine {
  grid-column: span 12;
}

.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;
}

.chapitre > .propos {
  margin: 0 0 1.1rem;
  font-size: 0.79rem;
  color: var(--encre-pale);
  line-height: 1.55;
}

.chapitre p,
.chapitre li {
  font-size: 0.86rem;
  line-height: 1.62;
}

/* Intitules secondaires : « Recommandations », « Avis »… */
.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;
}

.liste-nue {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.liste-nue li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
  color: var(--encre-douce);
}

.liste-nue li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.42rem;
  height: 1px;
  background: var(--rouge);
}

.mention-vide {
  font-size: 0.82rem;
  color: var(--encre-pale);
  font-style: italic;
}

/* ------------------------------------------------------ grille remplie -- */

.chapitre.evaluation > h4 {
  margin-top: 1.6rem;
}

.grille {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-family: var(--font-note);
  font-size: 0.78rem;
}

.grille th,
.grille td {
  border: 1px solid var(--filet);
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.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. */
.grille .colonne-cases {
  width: 42%;
}

.grille .colonne-commentaire {
  color: var(--encre-douce);
}

.cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chapitre .cases li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--encre-pale);
}

.chapitre .cases li.cochee {
  color: var(--encre);
  font-weight: 700;
}

.cases .case {
  color: var(--rouge);
  font-size: 0.95em;
}

.chapitre .amorce {
  margin: 0 0 0.4rem;
  font-style: italic;
  color: var(--encre-douce);
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  :root {
    --gouttiere: 2.2rem;
  }
  .feuille {
    grid-template-columns: minmax(0, 1fr);
  }
  .feuille::before {
    display: none;
  }
  .liens {
    display: none;
  }
  .marge {
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--filet);
  }
  .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;
  }
  .note {
    position: static !important;
    width: 100%;
    margin-bottom: 0.4rem;
  }
  .actions-etat {
    margin-left: 0;
  }
  .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. */
  .grille,
  .grille tbody,
  .grille tr,
  .grille td {
    display: block;
    width: auto;
  }
  .grille thead {
    display: none;
  }
  .grille tr {
    border: 1px solid var(--filet);
    margin-bottom: 0.7rem;
  }
  .grille td {
    border: none;
    border-top: 1px solid var(--filet-fin);
  }
  .grille td:first-child {
    border-top: none;
    background: var(--papier-creux);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------- impression -- */

@media print {
  @page {
    margin: 16mm 12mm;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .grain,
  .bandeau .enseigne,
  .rangee-outils,
  .actions-etat,
  .avancement,
  .navigation,
  .mention-volume,
  .etat-import,
  .depot,
  .liens {
    display: none !important;
  }

  .barre-etat {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0.5rem;
  }

  .feuille {
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
    grid-template-columns: minmax(0, 1fr) 58mm;
    gap: 0 8mm;
  }

  .note {
    break-inside: avoid;
    box-shadow: none;
  }

  .chapitre {
    break-inside: avoid;
  }

  .zone {
    padding: 0;
  }
}

/* ------------------------------------------------------------------- pied -- */

.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;
}

.pied p {
  margin: 0;
}

.pied-note {
  margin-top: 0;
  max-width: 78ch;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--encre-pale);
}

.pied-note a {
  color: var(--encre-douce);
}

/* Le recours au pied de la page : la meme adresse que le guichet, tenue a part
   pour qu'elle se voie. */
.pied-secours {
  margin-top: 0.9rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 3px solid var(--ambre);
  color: var(--encre-douce);
}

.pied-secours a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.pied-note code {
  font-size: 0.95em;
  color: var(--encre-douce);
}

@media print {
  .pied {
    display: none;
  }
}

/* Ce qu'il reste d'exemplaires a tirer, sous la barre d'etat de l'atelier. */
.mention-droit {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--ambre);
  background: #fffdf9;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

.mention-droit.erreur {
  border-left-color: var(--rouge);
  color: var(--rouge);
}

/* ---------------------------------------------------------------- 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. */
.guichet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: rgba(36, 31, 26, 0.55);
  backdrop-filter: blur(2px);
}

.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(24, 20, 16, 0.7);
}

.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;
}

.guichet-fermer:hover {
  background: var(--papier-creux);
  color: var(--encre);
}

.guichet-etiquette {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

.guichet-titre {
  font-family: var(--font-titre);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0.35rem 0 0.5rem;
  letter-spacing: -0.01em;
}

.guichet-mesure {
  margin: 0 0 1.15rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.guichet-grille {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.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);
}

.guichet-grille li.retenu {
  border-color: var(--filet);
  background: var(--papier-creux);
  color: var(--encre);
}

/* L'offre des institutions, sous la grille des tarifs. */
.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);
}

.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. */
.guichet-secours {
  margin: 1rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px dashed var(--filet);
  border-inline-start: 3px solid var(--ambre);
  border-radius: var(--rayon);
  background: #fffdf9;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.guichet-secours a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.guichet-formule {
  font-family: var(--font-titre);
  font-weight: 600;
}

.guichet-propos {
  font-size: 0.78rem;
}

.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. */
.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. */
.guichet-paiements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}

.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. */
.guichet-payer.retenu {
  box-shadow: inset 0 0 0 2px var(--papier), 0 0 0 2px var(--encre);
}

.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. */
.guichet-volet:empty {
  display: none;
}

.guichet-volet > :first-child {
  margin-top: 0;
}

.guichet-volet > :last-child {
  margin-bottom: 0;
}

.guichet-coordonnees {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.guichet-coordonnees div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}

.guichet-coordonnees dt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

.guichet-coordonnees dd {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}

.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;
}

.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;
}

.guichet-copie:hover {
  border-color: #bfae92;
}

.guichet-consigne {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.guichet-lien {
  width: 100%;
  justify-content: center;
}

.guichet-vide {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--ambre);
  background: #fffdf9;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.guichet-champs {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.guichet-champs .champ {
  display: grid;
  gap: 0.3rem;
}

.guichet-champs .champ span {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

.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;
}

.guichet-champs .champ input:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
}

.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. */
.guichet-cadre [data-retour] {
  width: 100%;
  justify-content: center;
  margin-top: 0.6rem;
}

.guichet-pied {
  margin: 0.85rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--encre-pale);
}

.guichet-attente {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.guichet-pouls {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-radius: 999px;
  background: var(--sarcelle);
  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) {
  .guichet-pouls {
    animation: none;
    opacity: 0.8;
  }
}

.guichet-avis {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

.guichet-avis.erreur {
  color: var(--rouge);
}

@media print {
  .guichet {
    display: none;
  }
}