/* ============================================================
   Jet d'encre — composants
   Nommage français, préfixe .je-
   Dépend de jetons.css.
   ============================================================ */

/* — Base — */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--je-papier);
  color: var(--je-encre);
  font-family: var(--je-sans);
  font-size: var(--je-t-corps);
  line-height: var(--je-i-corps);
}
h1, h2, h3, h4 { font-family: var(--je-serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { color: var(--je-plume); text-underline-offset: 3px; }
a:hover { color: var(--je-plume-sombre); }
:focus-visible { outline: 2px solid var(--je-plume); outline-offset: 2px; }
.je-libelle { font-size: var(--je-t-libelle); letter-spacing: 0.08em; text-transform: uppercase; color: var(--je-encre-pale); font-weight: 600; }
.je-filet-or { width: 56px; height: 1px; background: var(--je-or); }

/* — Surfaces (trois niveaux, aucune ombre) — */
.je-feuille { background: var(--je-papier); border: var(--je-filet); }
.je-creux   { background: var(--je-papier-creuse); }
.je-marque  { background: var(--je-plume-claire); border-left: 2px solid var(--je-plume); }
.je-retour  { background: var(--je-violette-claire); border-left: 2px solid var(--je-violette); }

/* — Boutons — */
.je-bouton {
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: var(--je-cible); padding: 12px 20px;
  border-radius: var(--je-rayon); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.je-bouton--plein   { background: var(--je-plume); color: var(--je-papier); border-color: var(--je-plume); }
.je-bouton--plein:hover { background: var(--je-plume-sombre); border-color: var(--je-plume-sombre); }
.je-bouton--contour { background: transparent; color: var(--je-plume); border-color: var(--je-plume-trait); }
.je-bouton--discret { background: transparent; color: var(--je-encre-douce); border-color: transparent; }
.je-bouton--danger  { background: transparent; color: var(--je-alerte); border-color: var(--je-alerte); }
.je-bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* — Champ de formulaire — */
.je-champ { display: flex; flex-direction: column; gap: var(--je-e2); }
.je-champ__etiquette { font-size: var(--je-t-second); color: var(--je-encre-douce); font-weight: 600; }
.je-champ__saisie {
  font: inherit; color: var(--je-encre);
  background: var(--je-papier); border: var(--je-filet); border-radius: var(--je-rayon);
  padding: 12px 14px; min-height: var(--je-cible); outline: none;
}
.je-champ__saisie:focus { border-color: var(--je-plume); }
.je-champ__aide { font-size: var(--je-t-second); color: var(--je-encre-pale); }
.je-champ--erreur .je-champ__saisie { border-color: var(--je-alerte); }
.je-champ__erreur { font-size: var(--je-t-second); color: var(--je-alerte); }

/* — Bandeau — */
.je-bandeau { display: flex; gap: var(--je-e3); padding: 14px 18px; border-left: 2px solid; font-size: var(--je-t-corps); }
.je-bandeau--info    { background: var(--je-plume-claire); border-color: var(--je-plume); }
.je-bandeau--succes  { background: var(--je-papier-creuse); border-color: var(--je-succes); }
.je-bandeau--erreur  { background: var(--je-alerte-claire); border-color: var(--je-alerte); }

/* — Onglets — */
.je-onglets { display: flex; gap: var(--je-e1); border-bottom: var(--je-filet); }
.je-onglet { font: inherit; background: none; border: none; cursor: pointer; padding: 12px 16px; min-height: var(--je-cible); color: var(--je-encre-douce); border-bottom: 2px solid transparent; }
.je-onglet[aria-selected="true"] { color: var(--je-encre); border-bottom-color: var(--je-plume); font-weight: 600; }

/* — Case à cocher & radio en cartes — */
.je-case { display: inline-flex; align-items: center; gap: var(--je-e3); min-height: var(--je-cible); cursor: pointer; }
.je-case input { width: 18px; height: 18px; accent-color: var(--je-plume); }
.je-case--engageante { border: var(--je-filet); border-left: 2px solid var(--je-plume); background: var(--je-plume-claire); padding: 12px 16px; }
.je-radio-carte { display: block; border: var(--je-filet); padding: 16px; cursor: pointer; }
.je-radio-carte:has(input:checked) { border-color: var(--je-plume); background: var(--je-plume-claire); }

/* — Lecture annotée : la phrase EST la case — */
.je-oeuvre {
  font-family: var(--je-serif); font-size: var(--je-t-oeuvre); line-height: var(--je-i-oeuvre);
  color: var(--je-encre); text-align: justify; hyphens: auto; max-width: var(--je-mesure);
}
.je-oeuvre--dialogue { text-indent: 0; }
.je-phrase { cursor: pointer; padding: 2px 0; border-radius: var(--je-rayon); -webkit-tap-highlight-color: transparent; }
.je-phrase__point {                   /* point d'appel, dans l'espace inter-phrases */
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--je-encre-pale) 60%, var(--je-papier));
  margin: 0 .34em 0 .28em; vertical-align: middle;
}
.je-phrase[aria-pressed="true"] { background: var(--je-papier-creuse); }
.je-phrase[aria-pressed="true"] .je-phrase__point,
.je-phrase[data-annotee="true"] .je-phrase__point { background: var(--je-plume); border-color: var(--je-plume); }
.je-phrase[data-annotee="true"] {
  text-decoration: underline; text-decoration-color: var(--je-plume);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.je-lecture--sans-annotation .je-phrase { cursor: default; }
.je-lecture--sans-annotation .je-phrase__point { display: inline; margin-right: .34em; border: 0; }

/* — Synthèse : les retours des lecteurs sont en violette — */
.je-compteur {
  display: inline-block; min-width: 18px; height: 18px; line-height: 17px; padding: 0 4px;
  border-radius: 9px; text-align: center; font-family: var(--je-sans); font-size: 11px; font-weight: 600;
  background: var(--je-violette-claire); color: var(--je-violette);
  margin: 0 .3em; vertical-align: 2px; cursor: pointer;
}
.je-compteur--dense { background: var(--je-violette); color: var(--je-papier); }
.je-etiquette-categorie { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--je-violette); border: 1px solid var(--je-violette-trait); background: var(--je-violette-claire); padding: 2px 7px; }

/* — Jauge, compteur de mots, enregistrement — */
.je-jauge { height: 4px; background: var(--je-trait); display: block; }
.je-jauge__part { height: 4px; background: var(--je-plume); display: block; }
.je-jauge--epuisee .je-jauge__part { background: var(--je-alerte); }
.je-mots { font-size: var(--je-t-second); color: var(--je-encre-pale); font-variant-numeric: tabular-nums; }
.je-enregistrement { display: inline-flex; align-items: center; gap: var(--je-e2); font-size: var(--je-t-second); color: var(--je-encre-pale); }
.je-enregistrement__pastille { width: 6px; height: 6px; border-radius: 50%; background: var(--je-encre-pale); }
.je-enregistrement--en-cours .je-enregistrement__pastille { background: var(--je-plume); }

/* — États — */
.je-etat-vide { border: 1px dashed var(--je-trait-fort); padding: var(--je-e7) var(--je-e5); text-align: center; color: var(--je-encre-douce); }
.je-etat-vide__titre { font-family: var(--je-serif); font-size: var(--je-t-titre2); color: var(--je-encre); margin-bottom: var(--je-e2); }
.je-chargement { height: 8px; background: var(--je-papier-creuse); }
@media (prefers-reduced-motion: no-preference) {
  .je-chargement__barre { height: 8px; width: 30%; background: var(--je-plume-trait); animation: je-glisse 1.4s linear infinite; }
  @keyframes je-glisse { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
}

/* — Responsive : la lecture au doigt est un cas de première classe — */
@media (max-width: 720px) {
  .je-oeuvre { font-size: 17px; padding-inline: 18px; }
  .je-bouton { width: 100%; }
}

/* — Impression / EPUB : tout encre — */
@media print {
  .je-phrase__point, .je-compteur { display: none; }
  .je-oeuvre { color: #000; }
}