/* ==========================================================================
   articles-decouvertes.css — Le monde, preuves à l'appui (G1, 25/10/2026 : direction
   « Magazine » choisie par l'auteur ; reprise de L2, 24/10/2026)
   Sert /fr/articles-decouvertes/, /en/discovery-articles/ et chaque fiche.

   RÈGLE (héritée de dicos.css) : cette feuille ne déclare AUCUNE couleur.
   Tout vient de tokens.css ; ce qui manque s'ajoute LÀ-BAS (G1 : --marker,
   --marker-strong). Polices : celles du site, déjà hébergées (Inter pour le
   texte, Plus Jakarta Sans pour les titres) — aucune police externe.

   Le lecteur est adulte et lit sur téléphone une fois sur deux. G1 :
   une tête de page qui donne envie (domaine, titre, « Le savais-tu ? »),
   des titres de parties numérotés, les phrases à retenir mises en exergue,
   le gras surligné au marqueur, et une colonne « à côté » (les mots de la
   page, à lire ensuite) sur grand écran. Les notes restent visibles.
   Aucun JavaScript (CSP) : les seuls dépliants sont des <details> natifs.
   Préfixe .ej (et non .encyclo, pris par l'encyclopédie adulte).
   RÈGLE (auteur, 27/10/2026) : jamais de bordure gauche épaisse (border-left
   de plus d'1 px, ni son équivalent en ombre « inset ») pour signaler un encadré :
   un fond léger, une bordure fine tout autour ou un coin arrondi suffisent.
   ========================================================================== */

/* ───── TÊTE DE PAGE (hero du site, enrichi) ──────────────────────────────
   articles-decouvertes-fiche.php pose $heroClass = 'ej-hero' et son propre
   contenu. Le fond sombre reste celui du site. */

.hero.ej-hero { align-items: stretch; text-align: left; }
.ej-tete {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6) var(--space-7);
  padding: 0 var(--space-5);
  box-sizing: border-box;
}
.ej-tete-texte { flex: 999 1 26rem; min-width: 0; }
.ej-tete-domaine {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--marker-strong);
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ej-tete-num { font-weight: var(--weight-medium); letter-spacing: 0; }
.hero.ej-hero h1.page-title { max-width: none; margin: 0; text-align: left; line-height: 1.02; }
.ej-savais {
  flex: 1 1 16rem;
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-strong);
}
.ej-savais-titre {
  margin: 0 0 var(--space-2);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  color: var(--brand-700);
}
.ej-savais-texte { margin: 0; font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }

/* ───── COLONNE DE LECTURE ────────────────────────────────────────────────
   Un texte de 40rem au plus, et une colonne « à côté » de 18rem sur grand
   écran. Sur téléphone, tout se suit. */

main.ej {
  max-width: 45rem;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-5) var(--space-8);
  box-sizing: border-box;
  color: var(--text-body);
}
main.ej *, main.ej *::before, main.ej *::after { box-sizing: border-box; }
/* Une fiche a sa colonne « à côté » : la page s'élargit (l'accueil garde 45rem). */
main.ej.ej-page-fiche { max-width: 64rem; }

/* ───── FIL D'ARIANE ET REPÈRES ───────────────────────────────────────────*/

.ej-fil {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ej-fil a { color: var(--brand-text); text-decoration: none; }
.ej-fil a:hover { text-decoration: underline; }

.ej-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; }
.ej-meta li {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.ej-meta strong { color: var(--text-strong); }
.ej-meta a { color: var(--brand-text); text-decoration: none; }
.ej-meta a:hover { text-decoration: underline; }

/* ───── L'ARTICLE ─────────────────────────────────────────────────────────*/

.ej-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-7);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-body);
  overflow-wrap: break-word;
}
.ej-corps { max-width: 40rem; counter-reset: ej-partie; }
.ej-fiche p { margin: 0 0 var(--space-4); }

/* Image d'archive en tête (G3) : pleine largeur de la colonne, coins
   arrondis, légende et crédit dessous (auteur, licence, source). */
.ej-image { margin: 0 0 var(--space-6); }
.ej-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-lg);
  background: var(--border-subtle);
}
/* L33 : image plus haute que large (planche, dessin légendé) : montrée en entier,
   sur fond de carte, plutôt que rognée ; un peu plus haute que les autres. */
.ej-image--haute img { object-fit: contain; object-position: center; max-height: 34rem; background: var(--surface); }
/* L45 : illustration dans le corps de la fiche (::illustration::) : un peu plus petite que l'image de tête. */
.ej-image--texte { margin: var(--space-5) 0; }
.ej-image--texte.ej-image--haute img { max-height: 28rem; }
.ej-image figcaption { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-soft); }
.ej-image-legende { color: var(--text-body); }
.ej-image-credit { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.ej-fiche .ej-image-credit a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border-card); }
.ej-fiche .ej-image-credit a:hover { color: var(--brand-text); }

/* L'accroche est déjà dans la tête de page (« Le savais-tu ? »). */
.ej-corps > .ej-accroche { display: none; }

/* Titres de partie : gros numéro pâle, titre très gras. */
.ej-fiche h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-8) 0 var(--space-4);
}
.ej-corps > h2::before {
  counter-increment: ej-partie;
  content: counter(ej-partie) / "";
  display: block;
  font-size: 2em;
  line-height: 1;
  color: var(--border-card);
  margin-bottom: var(--space-1);
}
.ej-fiche h3, .ej-fiche h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin: var(--space-6) 0 var(--space-3);
}
.ej-corps > h2:first-child, .ej-corps > h3:first-child { margin-top: 0; }

/* Le gras est PORTEUR DE SENS : le fait, la correction. Dans le fil du
   texte, il est surligné au marqueur. */
.ej-fiche strong { font-weight: var(--weight-bold); color: var(--text-strong); }
.ej-corps p > strong, .ej-corps li > strong:not(:first-child) {
  background: linear-gradient(transparent 58%, var(--marker) 58%);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ej-fiche em { font-style: italic; }

/* La phrase à retenir : un paragraphe tout en gras devient une exergue. */
.ej-corps > p.ej-fort {
  margin: var(--space-6) 0;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ej-corps > p.ej-fort strong { color: var(--brand-700); font-weight: var(--weight-black); background: none; padding: 0; }

.ej-fiche hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
.ej-fiche ul, .ej-fiche ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.ej-fiche li { margin-bottom: var(--space-2); }

/* Citations dans le texte. */
.ej-fiche blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ej-fiche blockquote p { color: var(--text-strong); }
.ej-fiche blockquote > :last-child { margin-bottom: 0; }

.ej-formule { text-align: center; }

/* Liens de texte : `p a` et non `a` (leçon de dicos.css). */
.ej-fiche p a, .ej-fiche li a, .ej-fiche dd a {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--brand-a38);
}
.ej-fiche p a:hover, .ej-fiche li a:hover { color: var(--brand-700); text-decoration-color: currentColor; }

/* ───── TABLEAUX ──────────────────────────────────────────────────────────
   Une carte blanche ; défilement horizontal sur téléphone. */

/* L44 : tableau périodique (directive ::tableau-periodique::), en grille ;
   défile horizontalement sur petit écran, comme les tableaux. */
.ej-tp { margin: var(--space-5) 0; }
.ej-tp-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .6rem; }
.ej-tp-grille { display: grid; grid-template-columns: 1.4rem repeat(18, minmax(2.6rem, 1fr)); grid-template-rows: 1.2rem repeat(7, auto) .6rem auto auto; gap: 2px; min-width: 50rem; }
.ej-tp-c1 { grid-column: 1; }
.ej-tp-c2 { grid-column: 2; }
.ej-tp-c3 { grid-column: 3; }
.ej-tp-c4 { grid-column: 4; }
.ej-tp-c5 { grid-column: 5; }
.ej-tp-c6 { grid-column: 6; }
.ej-tp-c7 { grid-column: 7; }
.ej-tp-c8 { grid-column: 8; }
.ej-tp-c9 { grid-column: 9; }
.ej-tp-c10 { grid-column: 10; }
.ej-tp-c11 { grid-column: 11; }
.ej-tp-c12 { grid-column: 12; }
.ej-tp-c13 { grid-column: 13; }
.ej-tp-c14 { grid-column: 14; }
.ej-tp-c15 { grid-column: 15; }
.ej-tp-c16 { grid-column: 16; }
.ej-tp-c17 { grid-column: 17; }
.ej-tp-c18 { grid-column: 18; }
.ej-tp-c19 { grid-column: 19; }
.ej-tp-r1 { grid-row: 1; }
.ej-tp-r2 { grid-row: 2; }
.ej-tp-r3 { grid-row: 3; }
.ej-tp-r4 { grid-row: 4; }
.ej-tp-r5 { grid-row: 5; }
.ej-tp-r6 { grid-row: 6; }
.ej-tp-r7 { grid-row: 7; }
.ej-tp-r8 { grid-row: 8; }
.ej-tp-r9 { grid-row: 9; }
.ej-tp-r10 { grid-row: 10; }
.ej-tp-r11 { grid-row: 11; }
.ej-tp-serie { grid-column: 1 / 4; }
.ej-tp-tete { font-size: .62rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.ej-tp-el { border-radius: 4px; padding: .15rem .2rem .2rem; line-height: 1.1; display: flex; flex-direction: column; min-height: 2.9rem; overflow: hidden; color: #1b1f2e; }
.ej-tp-z { font-size: .58rem; opacity: .75; }
.ej-tp-sym { font-size: .95rem; font-weight: 700; }
.ej-tp-nom { font-size: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-tp-s { background: #f6c6c1; }
.ej-tp-p { background: #f7e3a6; }
.ej-tp-d { background: #bcd7f5; }
.ej-tp-f { background: #cbe8c6; }
.ej-tp-renvoi { border-radius: 4px; font-size: .6rem; display: flex; align-items: center; justify-content: center; color: #1b1f2e; }
.ej-tp-serie { font-size: .65rem; color: var(--text-muted); display: flex; align-items: center; justify-content: flex-end; padding-right: .4rem; }
.ej-tp-marque { outline: 2.5px solid #1b1f2e; outline-offset: -2.5px; font-weight: 700; }
.ej-tp-legende { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-soft); }
.ej-tp-cle { display: inline-flex; align-items: center; gap: .35rem; background: none; outline: none; }
.ej-tp-cle::before { content: ""; width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; }
.ej-tp-cle.ej-tp-s::before { background: #f6c6c1; }
.ej-tp-cle.ej-tp-p::before { background: #f7e3a6; }
.ej-tp-cle.ej-tp-d::before { background: #bcd7f5; }
.ej-tp-cle.ej-tp-f::before { background: #cbe8c6; }
.ej-tp-cle.ej-tp-marque::before { background: transparent; box-shadow: inset 0 0 0 2.5px #1b1f2e; }
.ej-tp-cle.ej-tp-marque { font-weight: inherit; }
.ej-table {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ej-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-snug); }
.ej-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-text);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 2px solid var(--border-subtle);
}
.ej-table td { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-4); vertical-align: top; }
.ej-table tbody tr:last-child td { border-bottom: 0; }

/* ───── APPELS DE NOTE ────────────────────────────────────────────────────
   Entre crochets, dans la couleur de la marque : visibles pour qui les
   cherche, transparents pour qui lit. */

.ej-appel { font-size: .72em; line-height: 0; margin-left: .1em; }
:is(.ej-fiche, .ej-savais) .ej-appel a {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: none;
  padding: 0 .05em;
  border-radius: var(--radius-xs);
}
:is(.ej-fiche, .ej-savais) .ej-appel a::before { content: "[" / ""; }
:is(.ej-fiche, .ej-savais) .ej-appel a::after { content: "]" / ""; }
:is(.ej-fiche, .ej-savais) .ej-appel a:hover { text-decoration: underline; }
:is(.ej-fiche, .ej-savais) .ej-appel a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-appel:target a { background: var(--marker); }
.ej-appel-tableau { font-size: var(--text-sm); color: var(--text-muted); text-align: right; margin-top: calc(-1 * var(--space-3)); }

/* ───── BULLES DE SOURCE (G2) ─────────────────────────────────────────────
   Un clic (ou un toucher) sur [1] ouvre la source sur place, dans une
   carte posée en bas de l'écran ; Échap ou un clic à côté la referme. Sans
   JavaScript : popovers HTML. Un navigateur qui ne les connaît pas garde le
   lien vers la note de fin, et le bouton reste caché. */

.ej-appel-bulle { display: none; }
@supports selector(:popover-open) {
  :is(.ej-fiche, .ej-savais) .ej-appel a { display: none; }
  .ej-appel-bulle {
    display: inline;
    font: inherit;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--brand-text);
    background: none;
    border: 0;
    padding: 0 .05em;
    border-radius: var(--radius-xs);
    cursor: pointer;
  }
  .ej-appel-bulle::before { content: "[" / ""; }
  .ej-appel-bulle::after { content: "]" / ""; }
  .ej-appel-bulle:hover { text-decoration: underline; }
  .ej-appel-bulle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
}

.ej-bulle {
  position: fixed;
  inset: auto 0 var(--space-4) 0;
  margin: 0 auto;
  width: min(34rem, calc(100% - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.ej-bulle::backdrop { background: var(--ink-a10); }
.ej-bulle-titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ej-bulle-fermer {
  font: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}
.ej-bulle-fermer:hover { background: var(--bg); }
.ej-bulle-fermer:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-bulle-src + .ej-bulle-src { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.ej-fiche .ej-bulle-cit {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-style: italic;
}
.ej-bulle-cit p { margin: 0; color: var(--text-strong); }
.ej-bulle-cit p::before { content: "\201C"; }
.ej-bulle-cit p::after { content: "\201D"; }
.ej-bulle-cit[lang="fr"] p::before { content: "«\00a0"; }
.ej-bulle-cit[lang="fr"] p::after { content: "\00a0»"; }
.ej-fiche .ej-bulle p { margin: 0 0 var(--space-2); }
.ej-bulle-trad { color: var(--text-soft); }
.ej-bulle-ref { color: var(--text-soft); -webkit-hyphens: manual; hyphens: manual; }
.ej-fiche .ej-bulle-plus { margin: var(--space-3) 0 0; }
.ej-fiche .ej-bulle-plus a { color: var(--brand-text); font-weight: var(--weight-semibold); }

/* ───── À CÔTÉ : LES MOTS DE CETTE PAGE, À LIRE ENSUITE ────────────────────*/

.ej-cote { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-7); }
.ej-cote section { padding: var(--space-5); border-radius: var(--radius-lg); }
.ej-cote h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }

.ej-mots { background: var(--surface); box-shadow: var(--shadow-sm); }
.ej-mots dl { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.ej-mots dt { font-weight: var(--weight-bold); color: var(--text-strong); margin-top: var(--space-3); }
.ej-mots dt:first-child { margin-top: 0; }
.ej-mots dd { margin: var(--space-1) 0 0; color: var(--text-soft); }

.ej-alire { background: var(--ink-900); color: var(--on-dark-88); }
.ej-cote .ej-alire h2 { color: var(--on-dark); }
.ej-alire ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.ej-alire li { margin-bottom: var(--space-3); }
.ej-fiche .ej-alire li a { color: var(--marker); font-weight: var(--weight-bold); text-decoration: none; }
.ej-fiche .ej-alire li a::after { content: " →" / ""; }
.ej-fiche .ej-alire li a:hover { text-decoration: underline; }
.ej-fiche .ej-alire li a:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; border-radius: var(--radius-xs); }
.ej-alire-note, .ej-alire-bientot { display: block; color: var(--on-dark-72); }
.ej-alire-chapo { color: var(--on-dark-72); font-style: italic; font-size: var(--text-sm); margin: var(--space-3) 0 0; }

@media (min-width: 60rem) {
  .ej-fiche { grid-template-columns: minmax(0, 1fr) 18rem; }
  .ej-corps { grid-column: 1; grid-row: 1; }
  .ej-cote { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
  .ej-notes, .ej-biblio, .ej-signaler { grid-column: 1 / -1; }
}

/* ───── NOTES ET SOURCES ──────────────────────────────────────────────────
   La preuve de chaque passage. Visibles et non repliées : un appel de note
   doit mener à une note qu'on voit. Une carte blanche, corps plus petit :
   c'est l'appareil de l'article, pas l'article. */

.ej-notes {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ej-notes > h2 { margin-top: 0; }
.ej-notes-chapo { font-size: var(--text-sm); color: var(--text-soft); }
.ej-notes-chapo strong { color: var(--text-strong); }
.ej-notes-liste { padding-left: var(--space-5); font-size: var(--text-sm); line-height: var(--leading-snug); margin: 0; }
.ej-notes-liste > li { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); margin: 0; scroll-margin-top: var(--space-7); }
.ej-notes-liste > li:first-child { border-top: 0; padding-top: 0; }
.ej-notes-liste > li::marker { font-weight: var(--weight-bold); color: var(--brand-text); }
.ej-notes-liste > li:target { background: var(--surface-tint); border-radius: var(--radius-sm); outline: var(--space-2) solid var(--surface-tint); }
.ej-fiche .ej-retour { float: right; margin-left: var(--space-2); text-decoration: none; color: var(--brand-text); font-weight: var(--weight-bold); }
.ej-note-portee { font-style: italic; color: var(--text-muted); margin-bottom: var(--space-2); }

.ej-source { padding: var(--space-2) 0 var(--space-2); }
.ej-source + .ej-source { border-top: 1px dashed var(--border-subtle); padding-top: var(--space-3); }
.ej-source p { margin: 0 0 var(--space-2); }
.ej-src-etiq {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2);
}
.ej-fiche .ej-src-extrait {
  margin: var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-style: italic;
}
.ej-src-extrait p { color: var(--text-strong); }
.ej-src-extrait p::before { content: "\201C"; }
.ej-src-extrait p::after { content: "\201D"; }
.ej-src-extrait[lang="fr"] p::before { content: "«\00a0"; }
.ej-src-extrait[lang="fr"] p::after { content: "\00a0»"; }
.ej-src-ref, .ej-src-acces { -webkit-hyphens: manual; hyphens: manual; }
.ej-acces {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-soft);
  margin-right: var(--space-2);
}
.ej-acces-libre { background: var(--surface-tint); color: var(--brand-text); }
.ej-src-date { color: var(--text-muted); }

/* ───── BIBLIOGRAPHIE ─────────────────────────────────────────────────────
   Repliée, visiblement ouvrable. */

.ej-biblio details {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ej-biblio summary { cursor: pointer; list-style: none; color: var(--brand-text); }
.ej-biblio summary::-webkit-details-marker { display: none; }
.ej-biblio summary h2 { display: inline; font-size: var(--text-base); font-weight: var(--weight-bold); margin: 0; color: inherit; }
.ej-biblio summary::before { content: "▸"; display: inline-block; margin-right: var(--space-2); transition: transform var(--duration-fast) var(--ease); }
.ej-biblio details[open] > summary::before { transform: rotate(90deg); }
.ej-biblio summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.ej-biblio ul { font-size: var(--text-sm); line-height: var(--leading-snug); margin-top: var(--space-4); -webkit-hyphens: manual; hyphens: manual; }
.ej-src-nb { color: var(--text-muted); font-size: var(--text-sm); }

.ej-signaler { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }

/* ───── ENTRÉES VOISINES ──────────────────────────────────────────────────*/

.ej-voisines { margin: var(--space-8) 0 var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.ej-voisines h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.ej-voisines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.ej-voisines a {
  display: block;
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: box-shadow var(--duration-fast) var(--ease);
}
.ej-voisines a:hover { box-shadow: var(--shadow-lg); }
.ej-voisines a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-retour-accueil { font-size: var(--text-sm); }
.ej-retour-accueil a { color: var(--brand-text); }

/* ───── ACCUEIL (L46, 27/10/2026) ─────────────────────────────────────────
   Même largeur que les fiches (64rem) et même tête de page, alignée à
   gauche. Deux sections titrées : « Explorer par domaine » (une grille de
   3 × 3 sur grand écran, une liste compacte sur téléphone) puis « Toutes les
   fiches » (des cartes à image sur tablette et ordinateur, des lignes avec
   vignette sur téléphone). */

main.ej.ej-accueil { max-width: 64rem; }
.ej-tete-sous {
  margin: var(--space-4) 0 0;
  max-width: 48rem;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--on-dark-88);
}

.ej-chapo { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); margin: 0 0 var(--space-6); }

.ej-section-titre {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  word-spacing: .08em;   /* L46c : l'espace de Plus Jakarta Sans est étroite (« Toutesles fiches ») */
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
.ej-section-titre.ej-sommaire-titre { margin-top: var(--space-8); }
/* L46c : pas de double marge entre « Toutes les fiches » et le premier domaine. */
.ej-sommaire > .ej-domaine:first-child { margin-top: 0; }

/* Domaines : cartes de même hauteur ; le compte reste en bas de chaque carte
   (la description absorbe la hauteur en trop, au lieu de l'espacer). */
.ej-domaines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-4); }
.ej-domaines a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.ej-domaines a:hover { border-color: var(--brand-a35); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ej-domaines a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-domaine-attente > div { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); height: 100%; padding: var(--space-5); border: 1px dashed var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-muted); }
.ej-domaine-attente .ej-domaine-num { background: var(--bg); color: var(--text-muted); }
.ej-domaine-attente .ej-domaine-nom { color: var(--text-soft); }
/* Le numéro : une pastille claire, pour repérer le domaine sans suggérer un ordre de lecture. */
.ej-domaine-num {
  grid-row: span 3;
  align-self: start;
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--surface-tint); color: var(--brand-text);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
}
.ej-domaine-nom { font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-tight); }
.ej-domaine-desc { font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-snug); margin-top: var(--space-1, .25rem); }
.ej-domaine-nb { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); }

/* L49e : TUILES DE DOMAINE, comme celles des ressources linguistiques (dicos.css) et des interactivités
   (plus bas, « L49d ») : dégradé aux couleurs du domaine (.ej-dom--dNN, mêmes paires que les tuiles des
   interactivités), texte blanc, et le NUMÉRO EN FILIGRANE, grand, rogné par le coin bas droit. Au survol, la
   tuile se soulève et le numéro remonte en pivotant. Domaine en relecture : même forme, en pointillés, sans couleur. */
.ej-domaines a.ej-dom {
  position: relative; overflow: hidden; isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-5) var(--space-5) var(--space-6);
  border: 0; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2));
  box-shadow: 0 6px 16px -8px var(--tuile-2);
  color: var(--on-dark);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ej-domaines a.ej-dom::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 120% at 0% 0%, var(--on-dark-35), transparent 45%); opacity: .5; pointer-events: none; }
.ej-domaines a.ej-dom:hover { border-color: transparent; transform: translateY(-3px); box-shadow: 0 14px 26px -10px var(--tuile-2); }
.ej-domaines a.ej-dom:focus-visible { outline: none; transform: translateY(-3px); box-shadow: var(--shadow-focus), 0 14px 26px -10px var(--tuile-2); }
.ej-domaines .ej-dom .ej-domaine-num {
  position: absolute; z-index: -1; right: -.02em; bottom: -.22em;
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-weight: var(--weight-black);
  font-size: 6.5rem; line-height: 1; letter-spacing: -.04em; color: var(--on-dark-22);
  pointer-events: none;
  transition: transform var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}
.ej-domaines .ej-domaine-attente .ej-dom { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-md); }
.ej-domaines .ej-domaine-attente .ej-dom .ej-domaine-num { color: var(--ink-a10); }
.ej-domaines a.ej-dom .ej-domaine-nom { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--on-dark); padding-right: var(--space-5); }
.ej-domaines a.ej-dom .ej-domaine-desc { color: var(--on-dark); font-weight: var(--weight-medium); margin-top: var(--space-2); padding-right: 3.5rem; }
.ej-domaines a.ej-dom .ej-domaine-nb { color: var(--on-dark-88); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ej-domaines a.ej-dom .ej-domaine-nom, .ej-domaines a.ej-dom .ej-domaine-desc, .ej-domaines a.ej-dom .ej-domaine-nb { text-shadow: 0 1px 2px var(--ink-a28); }
@media (prefers-reduced-motion: no-preference) {
  .ej-domaines a.ej-dom:hover .ej-domaine-num, .ej-domaines a.ej-dom:focus-visible .ej-domaine-num { color: var(--on-dark-35); transform: translate(-.12em, -.1em) rotate(-6deg); }
}
/* Sommaire : la pastille et le filet du titre, et l'ombre des cartes, aux couleurs du domaine. */
.ej-domaine[class*="ej-dom--"] h3 { border-bottom-color: var(--tuile-1); }
.ej-domaine[class*="ej-dom--"] h3 .ej-domaine-num { background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2)); color: var(--on-dark); }

/* Sommaire : une section par domaine, titrée et soulignée. */
.ej-domaine { margin: var(--space-7) 0 0; scroll-margin-top: var(--space-5); }
.ej-domaine h3 {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--text-lg); font-weight: var(--weight-black); line-height: var(--leading-tight);
  word-spacing: .08em;
  color: var(--text-strong);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--border-subtle);
}
.ej-domaine h3 .ej-domaine-num { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.ej-domaine ul { list-style: none; margin: 0; padding: 0; }
.ej-domaine li { border-top: 1px solid var(--border-subtle); }
.ej-domaine li:first-child { border-top: 0; }
.ej-domaine li a { display: block; padding: var(--space-3) 0; text-decoration: none; color: var(--text-body); border-radius: var(--radius-md); }
.ej-domaine li a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-fiche-titre { display: block; font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-tight); }
.ej-domaine li a:hover .ej-fiche-titre { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ej-fiche-accroche { display: block; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-snug); margin-top: var(--space-1, .25rem); }
/* G5 : vignette de l'image de tête. Sur téléphone, une ligne : vignette à gauche. */
.ej-domaine li a.ej-avec-vignette { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: var(--space-3); align-items: start; }
.ej-vignette { display: block; width: 5.5rem; height: 4rem; object-fit: cover; object-position: center 30%; border-radius: var(--radius-md); background: var(--border-subtle); }
.ej-vignette--haute { object-position: center 15%; }
/* L46d : la carte du fond diffus cosmologique (fiche 1.1) est un ovale qui
   remplit toute la largeur de l'image : en recadrage, ses bords sont coupés.
   On la montre entière, avec une marge, sur fond clair. Si l'image change de
   nom (images.csv), changer ce sélecteur. */
.ej-vignette[src$="/1-1.png"] { object-fit: contain; object-position: center; padding: .35rem; background: var(--surface-subtle); }

/* Téléphone : les domaines en liste compacte (nom et compte), pour que les
   fiches commencent vite ; la description reste dans le sommaire. */
@media (max-width: 35.99rem) {
  .ej-domaines ul { gap: var(--space-2); }
  .ej-domaines a { grid-template-rows: auto auto; align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
  .ej-domaines a:hover { transform: none; }
  .ej-domaine-desc { display: none; }
  .ej-domaine-num { grid-row: span 2; align-self: center; }
  .ej-domaine-nb { margin-top: 0; }
  .ej-domaines a.ej-dom { padding: var(--space-3) var(--space-4); }
  .ej-domaines a.ej-dom:hover, .ej-domaines a.ej-dom:focus-visible { transform: none; }
  .ej-domaines .ej-dom .ej-domaine-num { font-size: 3.6rem; }
  .ej-domaines a.ej-dom .ej-domaine-nom { font-size: var(--text-base); }
  .ej-hero-accueil .ej-tete-domaine { font-size: var(--text-xs); letter-spacing: 0; text-transform: none; }
}

/* Tablette et ordinateur : les fiches en cartes à image, trois de front sur grand écran. */
@media (min-width: 36rem) {
  .ej-domaine ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-5); }
  .ej-domaine li, .ej-domaine li:first-child { border-top: 0; }
  .ej-domaine li a, .ej-domaine li a.ej-avec-vignette {
    display: flex; flex-direction: column;
    height: 100%; padding: 0; overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .ej-domaine li a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  /* L49e : un liseré aux couleurs du domaine sous l'image, et une ombre de la même couleur au survol. */
  .ej-domaine[class*="ej-dom--"] li a .ej-fiche-texte { flex: 1; border-top: 4px solid var(--tuile-2); }
  .ej-domaine[class*="ej-dom--"] li a:hover { box-shadow: 0 14px 26px -12px var(--tuile-2); }
  .ej-vignette { width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 0; }
  .ej-vignette[src$="/1-1.png"] { padding: var(--space-3) var(--space-5); }
  .ej-fiche-texte { display: block; padding: var(--space-4) var(--space-5) var(--space-5); }
  .ej-domaine li a:not(.ej-avec-vignette) .ej-fiche-texte { padding-top: var(--space-5); }
  .ej-fiche-titre { font-size: var(--text-lg); }   /* L46c : Inter, plus lisible que Jakarta à cette taille */
  .ej-fiche-accroche { margin-top: var(--space-2); }
}

.ej-apropos { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.ej-comment { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-soft); }
.ej-comment h2 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); margin: 0 0 var(--space-3); }
.ej-comment ul { padding-left: var(--space-5); }
.ej-comment li { margin-bottom: var(--space-2); }
.ej-bouton { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--brand-700); color: var(--on-dark); font-weight: var(--weight-semibold); text-decoration: none; }
.ej-bouton:hover, .ej-bouton:focus-visible { background: var(--brand-600); }

/* ───── PETITS ÉCRANS ─────────────────────────────────────────────────────*/

@media (max-width: 768px) {
  main.ej { margin-top: var(--space-5); padding: 0 var(--space-4) var(--space-7); }
  .ej-fiche h2 { margin-top: var(--space-7); }
  .ej-notes { padding: var(--space-5) var(--space-4); }
  .ej-notes-liste { padding-left: var(--space-4); }
  .ej-tete { gap: var(--space-5); }
}

/* ───── PLANCHER DE QUALITÉ ───────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  .ej-biblio summary::before, .ej-domaines a, .ej-voisines a, .ej-domaine li a { transition: none; }
  .ej-domaines a:hover, .ej-domaine li a:hover, .ej-domaines a.ej-dom:hover, .ej-domaines a.ej-dom:focus-visible, .ej-ix-annonce a:hover { transform: none; }
  .ej-ix-annonce a, .ej-ix-annonce-vignettes > span { transition: none; }
}

/* Un enseignant imprimera une fiche : la bibliographie est alors dépliée de
   force, le fil, les voisines et la colonne « à côté » se suivent ou
   disparaissent, le marqueur s'efface (encre). Les notes sont déjà visibles. */
@media print {
  main.ej { max-width: none; margin: 0; padding: 0; }
  .ej-fil, .ej-meta, .ej-voisines, .ej-retour-accueil, .ej-retour, .ej-bulles, .ej-appel-bulle { display: none !important; }
  .ej-fiche .ej-appel a { display: inline !important; }
  .ej-fiche { display: block; }
  .ej-alire { background: none; color: inherit; border: 1px solid currentColor; }
  .ej-fiche .ej-alire li a { color: inherit; }
  .ej-corps p > strong, .ej-corps li > strong { background: none; }
  .ej-corps > .ej-accroche { display: block; }
  .ej-biblio details > *:not(summary) { display: revert !important; }
  .ej-biblio summary::before { content: ""; }
  .ej-table { overflow-x: visible; box-shadow: none; }
  .ej-tp-defile { overflow-x: visible; box-shadow: none; padding: 0; }
  .ej-tp-grille { min-width: 0; }
  .ej-tp-el, .ej-tp-cle::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ej-table table { break-inside: avoid; font-size: 10pt; }
  .ej-savais { border: 1px solid currentColor; }
  .ej-savais .ej-appel { display: none !important; }
  .ej-image img, .ej-image--haute img { max-height: 12cm; }
}

/* ───── INTERACTIVITÉS (L47, 27/10/2026) ──────────────────────────────────
   Directive ::interactivite clé:: (construire.js) et rubrique « Interactivités »
   (articles-decouvertes-interactivites.php). Le fragment est lisible sans
   JavaScript (chapô, tableaux, « À retenir », sources) ; le script
   articles-decouvertes-interactivites.js construit la scène et ajoute la
   classe .ej-ix--actif. Aucune couleur déclarée : tout vient de tokens.css,
   y compris dans le SVG (fill/stroke par classes). Cibles tactiles ≥ 44 px. */

.ej-ix {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  line-height: var(--leading-snug);
}
.ej-fiche .ej-ix p, .ej-ix p { margin: 0 0 var(--space-3); }
/* L'attribut hidden l'emporte toujours (le script s'en sert pour montrer et cacher). */
.ej-ix [hidden] { display: none !important; }
.ej-ix-etiquette {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--marker-strong);
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ej-fiche .ej-ix .ej-ix-titre, .ej-ix-titre { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-xl); }
.ej-ix-chapo { font-size: var(--text-lg); color: var(--text-strong); }
.ej-ix-etiq { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-text); margin-bottom: var(--space-1); }
.ej-ix-geste { color: var(--text-soft); }
.ej-ix-retenir { margin-top: var(--space-5) !important; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-tint); color: var(--text-strong); font-weight: var(--weight-semibold); }
.ej-ix-nojs { font-size: var(--text-sm); color: var(--text-muted); }
.ej-ix-note, .ej-ix-calcul { font-size: var(--text-sm); color: var(--text-soft); }
.ej-ix-calcul { font-weight: var(--weight-regular); }
.ej-ix-table { margin: var(--space-3) 0 var(--space-4); box-shadow: none; border: 1px solid var(--border-subtle); }
.ej-ix-table caption { text-align: left; padding: var(--space-3) var(--space-3) var(--space-2); font-weight: var(--weight-bold); color: var(--text-strong); }
.ej-ix-table th[scope="row"] { font-weight: var(--weight-semibold); text-align: left; }
.ej-ix-renvoi { color: var(--brand-text); }
.ej-ix-lien { margin-top: var(--space-4) !important; font-size: var(--text-sm); }
.ej-ix-lien a { color: var(--brand-text); font-weight: var(--weight-semibold); }

/* Sources et données : des dépliants, comme la bibliographie. */
.ej-ix-sources, .ej-ix-donnees { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); font-size: var(--text-sm); }
.ej-ix-sources summary, .ej-ix-donnees summary { cursor: pointer; color: var(--brand-text); font-weight: var(--weight-semibold); min-height: 44px; display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.ej-ix-sources summary::-webkit-details-marker, .ej-ix-donnees summary::-webkit-details-marker { display: none; }
.ej-ix-sources summary::before, .ej-ix-donnees summary::before { content: "▸"; transition: transform var(--duration-fast) var(--ease); }
.ej-ix-sources[open] summary::before, .ej-ix-donnees[open] summary::before { transform: rotate(90deg); }
.ej-ix-sources summary:focus-visible, .ej-ix-donnees summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.ej-ix-sources ol { padding-left: var(--space-5); margin: var(--space-2) 0 0; }
.ej-ix-sources li { margin-bottom: var(--space-3); scroll-margin-top: var(--space-7); }
.ej-ix-sources li p { margin: 0 0 var(--space-1); }
.ej-ix .ej-src-extrait { margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); box-shadow: none; background: var(--surface-subtle); border-radius: var(--radius-sm); }
.ej-ix-src-ref { color: var(--text-body); }
.ej-ix-donnees .ej-ix-statique { padding-top: var(--space-2); }

/* La scène */
.ej-ix-scene { margin: var(--space-4) 0 0; }
.ej-ix-commande { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.ej-ix-curseur-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.ej-ix-curseur-tete label { font-weight: var(--weight-semibold); color: var(--text-strong); }
.ej-ix-valeur { font-weight: var(--weight-bold); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.ej-ix input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--brand-500); cursor: pointer; }
.ej-ix input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--brand-500); flex: none; margin: 0; }
.ej-ix-case-cocher { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-sm); }
.ej-ix-case-cocher label { cursor: pointer; padding: var(--space-2) 0; }
.ej-ix-boutons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ej-ix-bouton {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--brand-a35);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.ej-ix-bouton:hover { background: var(--brand-a08); border-color: var(--brand-500); }
.ej-ix-bouton:focus-visible, .ej-ix input:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.ej-ix-bouton:disabled { opacity: .45; cursor: default; background: var(--surface); }
.ej-ix-bouton--second { border-color: var(--border-card); color: var(--text-soft); }
.ej-ix-bouton--petit { min-height: 44px; padding: var(--space-1) var(--space-3); }
.ej-ix-lecture { padding: var(--space-3) var(--space-4); border: 1px solid var(--brand-a12); background: var(--brand-a04); border-radius: var(--radius-md); color: var(--text-strong); }
.ej-ix-lecture p:last-child { margin-bottom: 0; }
.ej-fiche .ej-ix .ej-ix-sous-titre, .ej-ix-sous-titre { margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-bold); color: var(--text-strong); }
.ej-ix-attente { color: var(--text-muted); font-style: italic; }

.ej-ix-fig { margin: 0; }
.ej-ix-fig figcaption { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.ej-ix-figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.ej-ix-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ej-ix-svg-texte { font-size: 11px; fill: var(--text-body); }
.ej-ix-svg-petit { font-size: 10px; fill: var(--text-muted); }
.ej-ix-grille { stroke: var(--border-subtle); stroke-width: 1; }
.ej-ix-legende::before { content: ""; display: inline-block; width: 1.4em; height: 0; border-top: 3px solid var(--brand-500); vertical-align: middle; margin-right: .4em; }
.ej-ix-legende--2::before { border-top: 3px dashed var(--accent-warm-dark); }
.ej-ix-legende--bande::before { height: .8em; border: 0; background: var(--brand-a12); border-radius: 2px; }

/* 4.3 · Mendeleïev */
.ej-ix-ge { margin-top: var(--space-5); }
.ej-fiche .ej-ix .ej-ix-cases, .ej-ix-cases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.ej-fiche .ej-ix .ej-ix-cases li { margin: 0; }
.ej-ix-paris { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 2px dashed var(--border-card); background: var(--surface); transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.ej-ix-paris-sym { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-black); font-size: var(--text-lg); background: var(--surface-subtle); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.ej-ix-paris-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ej-ix-paris-nom { font-weight: var(--weight-semibold); color: var(--text-strong); }
.ej-ix-paris-etat { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.ej-ix-paris-detail { font-size: var(--text-sm); color: var(--text-soft); }
.ej-ix-paris--gagne { border-style: solid; border-color: var(--brand-500); background: var(--brand-a06); }
.ej-ix-paris--gagne .ej-ix-paris-sym { background: var(--brand-700); color: var(--on-dark); border-color: var(--brand-700); }
.ej-ix-paris--gagne .ej-ix-paris-etat { color: var(--brand-text); }
.ej-ix-paris--perdu { border-style: solid; border-color: var(--text-faint); background: var(--surface-subtle); }
.ej-ix-paris--perdu .ej-ix-paris-sym { background: var(--ink-800); color: var(--on-dark); border-color: var(--ink-800); }
.ej-ix-paris--perdu .ej-ix-paris-etat { color: var(--text-body); }
.ej-fiche .ej-ix .ej-ix-ge-liste, .ej-ix-ge-liste { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.ej-fiche .ej-ix .ej-ix-ge-liste li, .ej-ix-ge-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); margin: 0; }
.ej-ix-ge-nom { font-weight: var(--weight-semibold); color: var(--text-strong); flex: 1 1 10rem; }
.ej-ix-ge-annonce { color: var(--text-soft); }
.ej-ix-ge-mesure { color: var(--brand-text); font-weight: var(--weight-bold); }
.ej-ix-ge--mesure .ej-ix-ge-mesure::before { content: "→ "; }

/* 7.8 · Saisons */
.ej-ix-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.ej-ix-chiffres > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-subtle); border: 1px solid var(--border-subtle); }
.ej-ix-chiffres dt { font-size: var(--text-xs); color: var(--text-muted); }
.ej-ix-chiffres dd { margin: var(--space-1) 0 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ej-ix-faisceau { fill: var(--marker); stroke: var(--accent-warm); stroke-width: 1; }
.ej-ix-sol { stroke: var(--text-muted); stroke-width: 2; }
.ej-ix-tache { stroke: var(--accent-warm-dark); stroke-width: 6; stroke-linecap: round; }
.ej-ix-nuit { fill: var(--ink-800); }
.ej-ix-jour { fill: var(--marker-strong); }
.ej-ix-courbe { fill: none; stroke: var(--brand-500); stroke-width: 2.5; stroke-linejoin: round; }
.ej-ix-courbe--2 { stroke: var(--accent-warm-dark); stroke-dasharray: 5 4; stroke-width: 2; }
.ej-ix-repere { fill: var(--surface); stroke: var(--brand-700); stroke-width: 2.5; }

/* 9.6 · Dés */
.ej-ix-faces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ej-ix-faces--mini { gap: var(--space-1); max-width: 26rem; }
.ej-ix-faces:empty { display: none; }
.ej-ix-bande { fill: var(--brand-a12); }
.ej-ix-ref { stroke: var(--accent-warm-dark); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ej-ix-svg-ref { fill: var(--accent-warm-dark); }
.ej-ix-point { fill: var(--brand-500); fill-opacity: .45; }
.ej-ix-point--dernier { fill: var(--brand-700); fill-opacity: 1; stroke: var(--surface); stroke-width: 1; }

/* 1.5 · Système solaire */
.ej-ix-fig--ciel { border-radius: var(--radius-md); background: var(--surface-subtle); border: 1px solid var(--border-subtle); overflow: hidden; }
.ej-ix-fig--ciel figcaption { padding: 0 var(--space-3) var(--space-2); }
.ej-ix-svg--ciel { width: 100%; height: auto; }
.ej-ix-soleil { fill: var(--accent-warm); fill-opacity: .85; }
.ej-ix-planete { fill: var(--brand-700); }
.ej-ix-orbite { stroke: var(--border-card); stroke-width: 1; }
.ej-ix-tic, .ej-ix-renvoi-trait { stroke: var(--text-faint); stroke-width: 1; fill: none; }

/* Rubrique « Interactivités » : l'accueil, et les cartes. */
.ej-ix-accueil-chapo { font-size: var(--text-lg); color: var(--text-strong); }
/* L49d : TUILES, comme celles des ressources linguistiques (dicos.css, « TUILES DE LANGUE ») : fond en dégradé
   aux couleurs du domaine de la fiche, texte blanc, et en FILIGRANE une vignette ronde — un disque découpé dans
   une photo de l'interactivité (ou le dé dessiné de la 9.6), grande, rognée par le coin bas droit. Au survol, la
   tuile se soulève et la vignette remonte en pivotant, comme le code de langue. Couleurs : les paires des
   tuiles de langue (tokens.css), une par domaine. */
.ej-ix-cartes { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ej-ix-carte { margin: 0; --tuile-1: var(--lang-fr-1); --tuile-2: var(--lang-fr-2); }
.ej-dom--d01, .ej-ix-tuile--d01 { --tuile-1: var(--bi-fr-en-1); --tuile-2: var(--bi-fr-en-2); }
.ej-dom--d02, .ej-ix-tuile--d02 { --tuile-1: var(--bi-en-es-1); --tuile-2: var(--bi-en-es-2); }
.ej-dom--d03, .ej-ix-tuile--d03 { --tuile-1: var(--bi-en-it-1); --tuile-2: var(--bi-en-it-2); }
.ej-dom--d04, .ej-ix-tuile--d04 { --tuile-1: var(--lang-fr-1); --tuile-2: var(--lang-fr-2); }
.ej-dom--d05, .ej-ix-tuile--d05 { --tuile-1: var(--lang-es-1); --tuile-2: var(--lang-es-2); }
.ej-dom--d06, .ej-ix-tuile--d06 { --tuile-1: var(--lang-de-1); --tuile-2: var(--lang-de-2); }
.ej-dom--d07, .ej-ix-tuile--d07 { --tuile-1: var(--bi-en-de-1); --tuile-2: var(--bi-en-de-2); }
.ej-dom--d08, .ej-ix-tuile--d08 { --tuile-1: var(--lang-it-1); --tuile-2: var(--lang-it-2); }
.ej-dom--d09, .ej-ix-tuile--d09 { --tuile-1: var(--lang-en-1); --tuile-2: var(--lang-en-2); }
.ej-ix-tuile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-5); border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2));
  box-shadow: 0 6px 16px -8px var(--tuile-2);
  color: var(--on-dark); text-decoration: none;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* Reflet doux en haut à gauche, sous le contenu. */
.ej-ix-tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 120% at 0% 0%, var(--on-dark-35), transparent 45%); opacity: .5; pointer-events: none; }
.ej-ix-tuile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px var(--tuile-2); }
.ej-ix-tuile:focus-visible { outline: none; transform: translateY(-3px); box-shadow: var(--shadow-focus), 0 14px 26px -10px var(--tuile-2); }
/* Place pour la vignette : le bas de la tuile, où « Essayer → » reste à gauche. */
.ej-ix-tuile--vignette { padding-bottom: 8rem; }
.ej-ix-vignette { position: absolute; z-index: -1; right: -.8rem; bottom: -.9rem; width: 8.6rem; height: 8.6rem; border-radius: 50%; overflow: hidden; background: var(--on-dark-22); box-shadow: 0 0 0 5px var(--on-dark-35); pointer-events: none; transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease); }
.ej-ix-vignette svg { display: block; width: 100%; height: 100%; }
.ej-ix-vde-haut { fill: var(--on-dark); }
.ej-ix-vde-gauche { fill: var(--border-card); }
.ej-ix-vde-droite { fill: var(--border-subtle); }
.ej-ix-vde-haut, .ej-ix-vde-gauche, .ej-ix-vde-droite { stroke: var(--ink-a28); stroke-width: 1; stroke-linejoin: round; }
.ej-ix-vde-as { fill: var(--accent-warm-dark); }
.ej-ix-vde-point { fill: var(--ink-900); }
@media (prefers-reduced-motion: no-preference) {
  .ej-ix-tuile:hover .ej-ix-vignette, .ej-ix-tuile:focus-visible .ej-ix-vignette { transform: translate(-.6rem, -.6rem) rotate(-6deg); box-shadow: 0 0 0 5px var(--on-dark-55); }
}
.ej-ix-carte-num { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-88); }
.ej-ix-carte-titre { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--on-dark); line-height: var(--leading-tight); }
.ej-ix-carte-texte { font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: var(--weight-medium); color: var(--on-dark); }
.ej-ix-carte-texte strong { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-88); }
.ej-ix-carte-suite { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--on-dark); }
/* Ombre portée du texte blanc : la palette des tuiles est claire (même règle que dicos.css). */
.ej-ix-tuile .ej-ix-carte-num, .ej-ix-tuile .ej-ix-carte-titre, .ej-ix-tuile .ej-ix-carte-texte, .ej-ix-tuile .ej-ix-carte-suite { text-shadow: 0 1px 2px var(--ink-a28); }
/* La suite descend au niveau de la vignette, à sa gauche. */
.ej-ix-tuile--vignette .ej-ix-carte-suite { position: absolute; left: var(--space-5); bottom: var(--space-5); }
.ej-ix-credits--accueil { margin-bottom: var(--space-5); }
@media (max-width: 35.99rem) {
  .ej-ix-tuile { padding: var(--space-4); }
  .ej-ix-tuile--vignette { padding-bottom: 5.5rem; }
  .ej-ix-tuile--vignette .ej-ix-carte-suite { left: var(--space-4); bottom: var(--space-4); }
  .ej-ix-vignette { width: 6.8rem; height: 6.8rem; }
}
.ej-ix-credits--accueil li { margin-bottom: var(--space-2); }
.ej-ix-page .ej-ix { margin-top: 0; }
.ej-ix-autres { margin-top: var(--space-7); }
.ej-ix-lien-rubrique { margin: var(--space-6) 0 0; }
.ej-ix-lien-rubrique a { color: var(--brand-text); font-weight: var(--weight-semibold); }

@media (min-width: 36rem) {
  .ej-ix-commande--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ej-fiche .ej-ix .ej-ix-cases, .ej-ix-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ej-ix-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ej-ix-fig--large { grid-column: 1 / -1; }
  .ej-ix-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 35.99rem) {
  .ej-ix { padding: var(--space-4); margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
}
@media (prefers-reduced-motion: reduce) {
  .ej-ix-bouton, .ej-ix-paris, .ej-ix-tuile, .ej-ix-vignette, .ej-ix-sources summary::before, .ej-ix-donnees summary::before { transition: none; }
}
@media print {
  .ej-ix-scene, .ej-ix-geste, .ej-ix-lien { display: none !important; }
  .ej-ix { box-shadow: none; border: 1px solid currentColor; break-inside: avoid; }
  .ej-ix-donnees > *:not(summary), .ej-ix-sources > *:not(summary) { display: revert !important; }
  .ej-ix-nojs { display: none; }
}

/* L47 : pages de la rubrique « Interactivités » (un peu plus larges que l'accueil),
   et son annonce sous la grille des domaines. */
main.ej.ej-ix-page { max-width: 52rem; }
/* L49e : l'annonce des interactivités devient une tuile sombre (l'encre de la tête de page), avec trois
   vignettes des interactivités en éventail, rognées par le bord droit ; au survol, l'éventail s'ouvre. */
.ej-ix-annonce { margin: var(--space-5) 0 0; }
.ej-ix-annonce a {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-5) 12rem var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  box-shadow: 0 6px 16px -8px var(--ink-800);
  text-decoration: none; color: var(--on-dark);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ej-ix-annonce a:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px var(--ink-800); }
.ej-ix-annonce a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ej-ix-annonce strong { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--on-dark); }
.ej-ix-annonce-texte { font-size: var(--text-sm); color: var(--on-dark-88); }
.ej-ix-annonce-suite { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--marker); }
.ej-ix-annonce-vignettes { position: absolute; z-index: -1; right: -1.5rem; top: 50%; width: 13rem; height: 6rem; transform: translateY(-50%); pointer-events: none; }
.ej-ix-annonce-vignettes > span { position: absolute; top: 0; width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; background: var(--on-dark-10); box-shadow: 0 0 0 3px var(--on-dark-35); transition: transform var(--duration-slow) var(--ease); }
.ej-ix-annonce-vignettes > span:nth-child(1) { left: 0; transform: rotate(-8deg); }
.ej-ix-annonce-vignettes > span:nth-child(2) { left: 3.6rem; }
.ej-ix-annonce-vignettes > span:nth-child(3) { left: 7.2rem; transform: rotate(8deg); }
.ej-ix-annonce-vignettes svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .ej-ix-annonce a:hover .ej-ix-annonce-vignettes > span:nth-child(1) { transform: translateX(-1rem) rotate(-14deg); }
  .ej-ix-annonce a:hover .ej-ix-annonce-vignettes > span:nth-child(3) { transform: translateX(.6rem) rotate(14deg); }
}
@media (max-width: 35.99rem) {
  .ej-ix-annonce a { padding: var(--space-4) 6.5rem var(--space-4) var(--space-4); }
  .ej-ix-annonce-vignettes { right: -3.2rem; width: 9rem; height: 4.5rem; }
  .ej-ix-annonce-vignettes > span { width: 4.5rem; height: 4.5rem; }
  .ej-ix-annonce-vignettes > span:nth-child(1) { display: none; }
  .ej-ix-annonce-vignettes > span:nth-child(2) { left: 0; }
  .ej-ix-annonce-vignettes > span:nth-child(3) { left: 2.8rem; }
}
/* Graphiques larges : pas plus grands qu'utile sur grand écran (texte du SVG lisible, pas énorme). */
.ej-ix-fig--large:not(.ej-ix-fig--ciel) .ej-ix-svg { max-width: 34rem; }
.ej-ix-figures { align-items: start; }
/* Sans JavaScript, les tableaux défilent dans leur carte : jamais la page entière. */
.ej-ix, .ej-ix-statique, .ej-ix-donnees, .ej-ix-table { min-width: 0; max-width: 100%; }
main.ej.ej-ix-page { width: 100%; min-width: 0; }
main.ej-ix-page .ej-col { min-width: 0; }

/* L47b : le mouvement. Bouton de lecture plein ; une case qui se remplit s'allume ;
   l'orbite et le dé de la 9.6. Les effets n'existent que sans prefers-reduced-motion. */
.ej-ix-bouton--lecture { background: var(--brand-700); border-color: var(--brand-700); color: var(--on-dark); }
.ej-ix-bouton--lecture:hover { background: var(--brand-600); border-color: var(--brand-600); }
.ej-ix-bouton--lecture[aria-pressed="true"] { background: var(--surface); color: var(--brand-text); border-color: var(--brand-500); }
.ej-ix-boutons--suite { margin-top: var(--space-5); }
.ej-ix-de { display: flex; margin: 0 0 var(--space-3) !important; }

/* L48p · 9.6 : le dé dessiné (épaisseur, points, as en couleur) */
.ej-ix-de3d { display: block; overflow: visible; }
.ej-ix-de3d--grand { width: 4.5rem; height: 4.5rem; }
.ej-ix-de3d--moyen { width: 3rem; height: 3rem; }
.ej-ix-de3d--mini { width: 1.75rem; height: 1.75rem; }
.ej-ix-de3d-ombre { fill: var(--ink-a28); }
.ej-ix-de3d-corps { fill: var(--surface); stroke: var(--ink-a28); stroke-width: 1.5; }
.ej-ix-de3d--as .ej-ix-de3d-corps { stroke: var(--accent-warm-dark); stroke-width: 3; }
.ej-ix-de3d-point { fill: var(--ink-900); }
.ej-ix-de3d-point--as { fill: var(--accent-warm-dark); }
.ej-ix-svg--orbite .ej-ix-orbite { fill: none; stroke-dasharray: 3 3; }
.ej-ix-terre-nuit { fill: var(--ink-800); }
.ej-ix-terre-ombre { fill: var(--ink-900); fill-opacity: .6; }   /* L48t : le côté nuit, sur la photo de la Terre */
.ej-ix-terre-jour { fill: var(--brand-300); }
.ej-ix-axe { stroke: var(--text-strong); stroke-width: 2; }
.ej-ix-equateur { stroke: var(--on-dark-55); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ej-ix-nouveau { animation: ej-ix-allume 1.1s var(--ease); }
  .ej-ix-ge--mesure .ej-ix-ge-mesure { animation: ej-ix-apparait .5s var(--ease); }
  @keyframes ej-ix-allume { 0% { transform: scale(.94); box-shadow: 0 0 0 0 var(--brand-a35); } 40% { transform: scale(1.03); box-shadow: 0 0 0 8px var(--brand-a12); } 100% { transform: none; box-shadow: none; } }
  @keyframes ej-ix-apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* L47c : 9.6, longueur ou aire. Premier nombre en bleu pâle, second en orange. */
.ej-ix-part { stroke: var(--surface); stroke-width: 1.5; }
.ej-ix-part--1 { fill: var(--brand-a35); }
.ej-ix-part--2 { fill: var(--accent-warm); }
/* L48x : sous chaque dessin, le compte des parts bleues qu'il faut pour couvrir la part orange */
.ej-ix-rose-comptes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-2) 0; max-width: 34rem; }   /* même largeur que le dessin : chaque compte sous sa part */
.ej-fiche .ej-ix .ej-ix-rose-compte-titre, .ej-ix-rose-compte-titre { margin: 0 0 var(--space-1); text-align: center; font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-sm); }
.ej-ix-rose-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); min-height: 20px; }
.ej-ix-rose-pastille { display: block; width: 1.4rem; height: 1.4rem; }
.ej-ix-rose-lien[hidden] { display: none; }
.ej-ix-legende--g::before, .ej-ix-legende--d::before { display: none; }

/* L47d : 5.1 (arbre), 9.1 (trois écritures), 9.13 (frise à ranger). */
.ej-ix-branche { stroke: var(--brand-700); stroke-width: 2.5; stroke-linecap: round; }
.ej-ix-noeud { cursor: pointer; }
.ej-ix-noeud circle { fill: var(--surface); stroke: var(--brand-700); stroke-width: 2; }
.ej-ix-noeud:hover circle, .ej-ix-noeud:focus circle { fill: var(--marker); }
.ej-ix-noeud:focus { outline: none; }
.ej-ix-noeud:focus-visible circle { stroke-width: 3.5; }
.ej-ix-noeud-lettre { font-size: 10px; font-weight: 700; fill: var(--text-strong); pointer-events: none; }
.ej-ix-feuille { font-weight: 700; fill: var(--text-strong); }
.ej-ix-question { margin-top: var(--space-5); }
.ej-ix-retour:empty { display: none; }
.ej-ix-retour { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-subtle); color: var(--text-strong); }
.ej-ix-retour--juste { background: var(--brand-a06); border-color: var(--brand-a35); }
.ej-ix-retour--faux { background: var(--surface-tint); border-color: var(--accent-warm); }

.ej-ix-ecriture { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-subtle); border: 1px solid var(--border-subtle); }
.ej-fiche .ej-ix .ej-ix-ecriture .ej-ix-sous-titre, .ej-ix-ecriture .ej-ix-sous-titre { margin-top: 0; }
/* L48q · 9.1 : la photo du système en médaillon, à gauche du titre */
.ej-ix-ecriture-tete { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ej-fiche .ej-ix .ej-ix-ecriture-tete .ej-ix-sous-titre, .ej-ix-ecriture-tete .ej-ix-sous-titre { margin: 0; }
.ej-ix-ecriture-medaillon { flex: 0 0 auto; display: block; width: 4.5rem; height: 4.5rem; }
.ej-ix-svg--signes { max-width: 26rem; }
.ej-ix-signe { fill: none; stroke: var(--text-strong); stroke-width: 1.6; stroke-linecap: round; }
.ej-ix-places { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ej-ix-place { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-card); }
.ej-ix-place-val { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ej-ix-place-poids { font-size: var(--text-xs); color: var(--text-muted); }
.ej-ix-place--vide { border-style: dashed; background: transparent; }
.ej-ix-place--vide .ej-ix-place-val { color: var(--text-faint); font-weight: var(--weight-regular); font-size: var(--text-sm); }
.ej-ix-places--damier .ej-ix-place { border-radius: 0; }
.ej-ix-piege { margin-top: var(--space-2) !important; color: var(--text-strong); }

.ej-fiche .ej-ix .ej-ix-frise-liste, .ej-ix-frise-liste { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.ej-fiche .ej-ix .ej-ix-frise-liste li { margin: 0; }
.ej-ix-carte-ev { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-card); }
.ej-ix-carte-ev-num { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-sm); background: var(--surface-subtle); color: var(--text-strong); }
.ej-ix-carte-ev-corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ej-ix-carte-ev-texte { color: var(--text-strong); }
.ej-ix-carte-ev-date { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-text); }
.ej-ix-carte-ev-fleches { flex: none; display: flex; gap: var(--space-1); }
.ej-ix-bouton--fleche { min-width: 44px; padding: 0; }
.ej-ix-carte-ev--juste { border-color: var(--brand-500); background: var(--brand-a06); }
.ej-ix-carte-ev--juste .ej-ix-carte-ev-num { background: var(--brand-700); color: var(--on-dark); }
.ej-ix-carte-ev--faux { border-color: var(--accent-warm); border-style: dashed; }
/* L48t : l'étiquette « Bien placée » / « À déplacer » après vérification */
.ej-ix-carte-ev-etat { align-self: flex-start; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--space-2); border-radius: var(--radius-pill); }
.ej-ix-carte-ev-etat[hidden] { display: none; }
.ej-ix-carte-ev-etat--juste { background: var(--brand-700); color: var(--on-dark); }
.ej-ix-carte-ev-etat--faux { background: var(--accent-warm-dark); color: var(--on-dark); }
.ej-ix-axe-frise { stroke: var(--text-muted); stroke-width: 2; }
.ej-ix-frise-rond { fill: var(--brand-700); }
.ej-ix-frise-rond--fin { fill: var(--accent-warm-dark); }
.ej-ix-frise-num { font-size: 8px; font-weight: 700; fill: var(--on-dark); }

/* L47e : 9.13, la poignée de glisser-déposer (le doigt tire la carte sans faire défiler la page). */
.ej-ix-poignee { flex: none; width: 1.5rem; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--text-faint); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ej-ix-carte-ev--prise { border-color: var(--brand-500); box-shadow: var(--shadow-md); }
.ej-ix-carte-ev--prise .ej-ix-poignee { cursor: grabbing; color: var(--brand-text); }

/* L47f : 1.11 (lumière), 4.7 (chute), 7.2 (plaques), 8.7 (sens). */
.ej-ix-bouton[aria-pressed="true"]:not(.ej-ix-bouton--lecture) { background: var(--brand-a10); border-color: var(--brand-500); }
.ej-ix-rayon { stroke: var(--marker-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.ej-ix-photon { fill: var(--accent-warm); stroke: var(--marker-strong); stroke-width: 3; }
.ej-ix-horloge { font-size: 16px; font-weight: 700; fill: var(--text-strong); font-variant-numeric: tabular-nums; }
.ej-ix-fond { fill: var(--surface-subtle); }
.ej-ix-fond--lune { fill: var(--ink-900); }
.ej-ix-fond--vide { fill: var(--ink-a10); }   /* L48v : un fond un peu plus soutenu, pour que le verre se voie */
.ej-ix-fond--lune ~ .ej-ix-sol { stroke: var(--on-dark-55); }
.ej-ix-cloche { fill: none; stroke: var(--border-card); stroke-width: 2; }
/* L48v : la cloche de verre de Boyle */
.ej-ix-cloche-verre { fill: var(--brand-a06); stroke: var(--ink-a28); stroke-width: 1.5; }
.ej-ix-cloche-metal { fill: var(--ink-700); }
.ej-ix-cloche-tuyau { fill: none; stroke: var(--ink-700); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ej-ix-cloche-reflet { fill: none; stroke: var(--surface); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.ej-ix-cloche-reflet--fin { stroke-width: 2.5; }
.ej-ix-cache { display: none; }
/* L48t : 4.7, le voile sur la photo lunaire (pour que le marteau et la plume se détachent) ; 7.2, la carte du fond */
.ej-ix-chute-voile { fill: var(--ink-900); fill-opacity: .25; }
.ej-ix-objet--fond-blanc { mix-blend-mode: multiply; }   /* L48u : le fond blanc des photos d'objets disparaît */
.ej-ix-carte-fond-img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.ej-ix-manche { fill: var(--accent-warm-dark); }
.ej-ix-tete-marteau { fill: var(--text-muted); }
.ej-ix-plume { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1.2; }
.ej-ix-plume-tige { stroke: var(--text-muted); stroke-width: 1; }
.ej-ix-plaque { fill: var(--text-muted); }
.ej-ix-magma { fill: var(--accent-warm); }
.ej-ix-fleche { fill: none; stroke: var(--text-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ej-ix-corps { fill: var(--surface-tint); stroke: var(--brand-a35); stroke-width: 2; }
.ej-ix-point-sens { fill: var(--brand-500); }
.ej-ix-grand-nombre { font-size: 28px; font-weight: 800; fill: var(--text-strong); }

/* L47g : 1.5, le bilan du dessin (tailles, distances, planètes visibles) et les étiquettes lisibles sur le Soleil. */
.ej-ix-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; fill: var(--text-strong); }
.ej-fiche .ej-ix .ej-ix-bilan-titre, .ej-ix-bilan-titre { margin: 0 0 var(--space-2); font-weight: var(--weight-bold); }
.ej-ix-bilan dl { margin: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.ej-ix-bilan-ligne { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-subtle); }
.ej-ix-bilan-ligne dt { font-weight: var(--weight-semibold); }
.ej-ix-bilan-ligne dd { margin: 0; display: flex; gap: var(--space-1); align-items: baseline; }
.ej-ix-bilan-signe { flex: none; width: 1.2em; text-align: center; font-weight: var(--weight-black); }
.ej-ix-bilan--oui .ej-ix-bilan-signe { color: var(--brand-text); }
.ej-ix-bilan--non { border-color: var(--accent-warm); }
.ej-ix-bilan--non .ej-ix-bilan-signe { color: var(--accent-warm-dark); }
.ej-ix-bilan-conclusion { font-weight: var(--weight-semibold); margin-bottom: 0 !important; }
@media (max-width: 35.99rem) { .ej-ix-bilan-ligne { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.ej-ix-etiq-fond { fill: var(--surface-subtle); fill-opacity: 0.88; }

/* L47k : 7.8, figures dessinées en pixels (textes à taille fixe) et faisceau de référence. */
.ej-ix-fig--large .ej-ix-svg.ej-ix-svg--px { max-width: none; width: 100%; height: auto; }
.ej-ix-svg--px .ej-ix-svg-petit { font-size: 13px; }
.ej-ix-faisceau--ref { fill: none; stroke-dasharray: 4 3; }

/* L47l : 7.8, sélecteur de dates clés, réglage actif visible, note quand rien ne change. */
.ej-ix-choix { display: inline-flex; align-items: center; gap: var(--space-2); }
.ej-ix-choix-label { font-size: var(--text-sm); color: var(--text-muted); }
.ej-ix-select { min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--brand-a35); border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; max-width: 100%; }
.ej-ix-select:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.ej-ix-fige { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-warm); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-body); }
.ej-ix-fige[hidden] { display: none; }

/* L47m : relecture des interactivités. Textes des figures en viewBox à taille fixe (attribut font-size posé par le script). */
.ej-ix-svg[font-size] .ej-ix-svg-petit { font-size: 1em; }
.ej-ix-svg[font-size] .ej-ix-svg-texte { font-size: 1.1em; }
.ej-ix-svg[font-size] .ej-ix-noeud-lettre { font-size: 1em; }
.ej-ix-svg[font-size] .ej-ix-frise-num { font-size: 0.8em; }
.ej-ix-svg[font-size] .ej-ix-horloge { font-size: 1.6em; }
.ej-ix-svg[font-size] .ej-ix-grand-nombre { font-size: 2.8em; }
.ej-ix-lecture:empty { display: none; }
@media (max-width: 35.99rem) {
  .ej-ix-carte-ev { gap: var(--space-2); }
  .ej-ix-carte-ev-fleches { flex-direction: column; }
}
.ej-ix-svg-annee { fill: var(--text-strong); font-weight: var(--weight-semibold); }

/* L47o : la question posée en tête de la scène. */
.ej-ix-question { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-a06); border: 1px solid var(--brand-a35); }
.ej-fiche .ej-ix .ej-ix-question p, .ej-ix-question p { margin: 0; }
.ej-ix-question-titre { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); }
.ej-ix-question-texte { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: 1.35; }

/* L47q : 1.11, la lumière du Soleil vers les huit planètes. */
.ej-ix-chrono { margin: 0 0 var(--space-1); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: center; }
.ej-ix-planete-attente { fill: var(--surface); stroke: var(--text-faint); stroke-width: 1.5; }
.ej-ix-planete--terre { stroke: var(--brand-500); stroke-width: 2; }
.ej-ix-rayon--plein { stroke-dasharray: none; stroke-width: 3; }

/* L48a : « À retenir » replié jusqu'à la conclusion ; ✓ et allumage quand le lecteur l'atteint ; « Recommencer ».
   Rien de cela sans JavaScript : le bloc « À retenir » reste alors visible. */
.ej-ix-retenir[hidden], .ej-ix-retenir-attente[hidden], .ej-ix-reprise[hidden] { display: none; }
.ej-ix-retenir-attente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px dashed var(--brand-a35); border-radius: var(--radius-md); background: var(--surface); }
.ej-ix-retenir-attente .ej-ix-etiq { flex-basis: 100%; margin: 0; }
.ej-fiche .ej-ix .ej-ix-retenir-attente-texte, .ej-ix-retenir-attente-texte { flex: 1 1 14rem; margin: 0; color: var(--text-soft); }
.ej-ix-coche { display: none; vertical-align: -3px; margin-right: var(--space-1); }
.ej-ix-coche-rond { fill: var(--brand-500); }
.ej-ix-coche-trait { fill: none; stroke: var(--on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ej-ix-retenir--conclu { background: var(--brand-a08); box-shadow: 0 0 0 1px var(--brand-a35); }
.ej-ix-retenir--conclu .ej-ix-coche { display: inline-block; }
.ej-ix-reprise { display: flex; justify-content: flex-end; margin: var(--space-3) 0 0; }
.ej-ix-bouton--reprise { font-weight: var(--weight-semibold); }
@media (prefers-reduced-motion: no-preference) {
  .ej-ix-retenir--conclu { animation: ej-ix-conclu 1.3s var(--ease); }
  .ej-ix-retenir--conclu .ej-ix-coche { animation: ej-ix-coche .6s var(--ease) .15s backwards; }
  @keyframes ej-ix-conclu { 0% { opacity: 0; transform: translateY(6px); box-shadow: 0 0 0 0 var(--brand-a35); } 35% { opacity: 1; transform: none; box-shadow: 0 0 0 8px var(--brand-a12); } 100% { box-shadow: 0 0 0 1px var(--brand-a35); } }
  @keyframes ej-ix-coche { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
}
.ej-ix-illustrations { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); }
.ej-ix .ej-image--ix { margin: 0; }
.ej-ix .ej-image--ix img { width: auto; max-width: 100%; max-height: 22rem; margin: 0 auto; object-fit: contain; background: none; border-radius: var(--radius-md); }   /* L48d : montrée en entier, jamais rognée */
@media (min-width: 48rem) { .ej-ix-illustrations:has(> figure + figure) { grid-template-columns: 1fr 1fr; } }

/* L48e : 1.5, les vraies photos des astres sur un ciel sombre (crédits sous « Crédits des photos »). */
.ej-ix-fig--photos { background: var(--ink-900); border-color: var(--ink-800); }
.ej-ix-fig--photos figcaption { color: var(--on-dark-72); padding-top: var(--space-2); }
.ej-ix-fond-ciel { fill: var(--ink-900); }
/* L48z · 1.5 : la loupe sur les planètes proches */
.ej-ix-loupe { margin-top: var(--space-2); border-style: dashed; }
.ej-ix-loupe[hidden] { display: none; }
.ej-ix-arrivee { fill: none; stroke: var(--marker-strong); stroke-width: 3; }   /* L48z2 : la lumière arrivée, autour de la Terre */
.ej-ix-fig--photos .ej-ix-planete { fill: var(--on-dark-88); }
.ej-ix-fig--photos .ej-ix-orbite { stroke: var(--on-dark-22); }
.ej-ix-fig--photos .ej-ix-tic, .ej-ix-fig--photos .ej-ix-renvoi-trait { stroke: var(--on-dark-55); }
.ej-ix-fig--photos .ej-ix-astre--photo { fill: var(--ink-900); fill-opacity: 1; }   /* sous la photo : le côté nuit de Jupiter sort du cadre de l'image */
.ej-ix-photo--ecran { mix-blend-mode: screen; }
.ej-ix-credits { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); font-size: var(--text-sm); }
.ej-ix-credits summary { cursor: pointer; color: var(--brand-text); font-weight: var(--weight-semibold); min-height: 44px; display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.ej-ix-credits summary::-webkit-details-marker { display: none; }
.ej-ix-credits summary::before { content: "▸"; transition: transform var(--duration-fast) var(--ease); }
.ej-ix-credits[open] summary::before { transform: rotate(90deg); }
.ej-ix-credits summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
@media (prefers-reduced-motion: reduce) { .ej-ix-credits summary::before { transition: none; } }
.ej-ix-credits ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--text-soft); }
.ej-ix-credits li { margin-bottom: var(--space-2); }
.ej-ix-credits li .ej-image-credit { display: block; font-size: var(--text-xs); color: var(--text-muted); }

/* L48g : 9.13, la vraie image de chaque événement, sur la carte bien placée. */
.ej-ix-carte-ev-img { display: block; width: 100%; height: 7rem; margin-top: var(--space-2); object-fit: cover; object-position: center 35%; border-radius: var(--radius-sm); background: var(--border-subtle); }
.ej-ix-carte-ev-img[hidden] { display: none; }
@media (min-width: 48rem) { .ej-ix-carte-ev-img { height: 9rem; } }

/* L48h : 4.3, l'élément trouvé et son découvreur, dans la case du pari gagné. */
.ej-ix-paris-photos { display: flex; gap: var(--space-2); align-items: stretch; margin-top: var(--space-2); }
.ej-ix-paris-photos[hidden] { display: none; }
/* L48y · 4.3 : le tableau de 1869, la frise des découvertes, les barres du germanium */
.ej-ix-mendeleiev-tableau { margin: 0 0 var(--space-4); text-align: center; }
.ej-ix-mendeleiev-tableau-img { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 22rem; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 40rem) { .ej-ix-mendeleiev-tableau-img { max-height: 15rem; } }
.ej-ix-mendeleiev-tableau figcaption { font-size: var(--text-sm); color: var(--text-soft); margin-top: var(--space-1); }
.ej-ix-mendeleiev-frise { margin: var(--space-2) 0 0; }
.ej-ix-mendeleiev-frise-faite { stroke: var(--brand-500); stroke-width: 3; }
.ej-ix-mendeleiev-point { cursor: pointer; }
.ej-ix-mendeleiev-point circle { fill: var(--surface); stroke: var(--text-faint); stroke-width: 1.5; }
.ej-ix-mendeleiev-point-sym { font-size: 8px; font-weight: var(--weight-bold); fill: var(--text-muted); }
.ej-ix-mendeleiev-point--gagne circle { fill: var(--brand-700); stroke: var(--brand-700); }
.ej-ix-mendeleiev-point--perdu circle { fill: var(--ink-800); stroke: var(--ink-800); }
.ej-ix-mendeleiev-point--gagne .ej-ix-mendeleiev-point-sym, .ej-ix-mendeleiev-point--perdu .ej-ix-mendeleiev-point-sym { fill: var(--on-dark); }
.ej-ix-ge-barres { display: block; flex: 1 1 100%; width: 100%; height: 1.6rem; }
.ej-ix-ge-barre--a { fill: var(--brand-a25); }
.ej-ix-ge-barre--m { fill: var(--brand-700); }
.ej-ix-paris-photo { flex: 1 1 auto; min-width: 0; width: 100%; height: 6rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--border-subtle); }
.ej-ix-paris-portrait { flex: 0 0 auto; width: 4.5rem; height: 6rem; object-fit: cover; object-position: center 20%; border-radius: var(--radius-sm); background: var(--border-subtle); }
@media (min-width: 48rem) { .ej-ix-paris-photo, .ej-ix-paris-portrait { height: 7.5rem; } .ej-ix-paris-portrait { width: 5.5rem; } }

/* L48i : 7.2, les plaques en coupe ; le scandium sous licence Art libre. */
.ej-ix-eau { fill: var(--brand-a10); }
.ej-ix-croute { fill: var(--ink-700); }
.ej-ix-sur-plaque { fill: var(--on-dark); }
.ej-ix-sur-eau { fill: var(--brand-text); font-style: italic; }
/* L48i : 7.8, le Soleil dans le ciel, heure par heure. */
.ej-ix-ciel-fond { fill: var(--brand-a06); }
.ej-ix-terrain { fill: var(--border-subtle); }
.ej-ix-arc { fill: none; stroke: var(--accent-warm); stroke-width: 2.5; }
.ej-ix-arc-ref { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ej-ix-soleil-point { fill: var(--accent-warm); }

/* L48l : 1.11, la vraie image de l'astre choisi. */
.ej-ix-astre-photo { margin: 0 0 var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); background: var(--ink-900); text-align: center; }
.ej-ix-astre-photo[hidden] { display: none; }
.ej-ix-astre-photo-img { display: block; width: auto; max-width: 100%; height: 11rem; margin: 0 auto; object-fit: contain; }
.ej-ix-astre-photo figcaption { margin-top: var(--space-1); color: var(--on-dark-88); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@media (min-width: 48rem) { .ej-ix-astre-photo-img { height: 14rem; } }

/* L48m : 5.1, une silhouette dessinée au bout de chaque branche. */
.ej-ix-silhouette { fill: var(--ink-700); }
.ej-ix-silhouette-trait { fill: none; stroke: var(--ink-700); stroke-width: 2.2; stroke-linecap: round; }
.ej-ix-silhouette-motif { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-linecap: round; }
.ej-ix-silhouette-oeil { fill: var(--surface); }
/* L48n : 5.1, les gravures anciennes en médaillon. */
.ej-ix-medaillon-fond { fill: var(--surface-subtle); }
.ej-ix-medaillon-cadre { fill: none; stroke: var(--ink-700); stroke-width: 1.5; }

/* L48o : 8.7, des cases qui se divisent ; médaillons gravés pour les cinq sens d'Aristote. */
.ej-ix-sens-grille { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.ej-ix-sens-grille--fine { grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: var(--space-1); }
.ej-ix-sens-case { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 4.5rem; padding: var(--space-2); border: 1px solid var(--brand-a35); border-radius: var(--radius-md); background: var(--brand-a06); text-align: center; }
.ej-ix-sens-case--anonyme { min-height: 2.4rem; padding: 0; background: var(--brand-a10); border-color: var(--brand-a25); }
.ej-ix-sens-nom { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.ej-ix-sens-medaillon { display: block; }
/* L48r : le titre des cases, et les numéros des cases sans nom */
.ej-fiche .ej-ix .ej-ix-sens-titre, .ej-ix-sens-titre { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
.ej-ix-sens-numero { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--brand-text); }
.ej-ix-sens figcaption { font-size: var(--text-sm); color: var(--text-soft); }
.ej-ix-sens-oublies { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface-subtle); }
.ej-ix-sens-oublies[hidden] { display: none; }
.ej-fiche .ej-ix .ej-ix-sens-oublies ul, .ej-ix-sens-oublies ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* L49a · 7.8 : la Terre vue par Meteosat ; 7.2 : autrefois et aujourd'hui (USGS) */
.ej-ix-fig--large.ej-ix-espace .ej-ix-svg.ej-ix-espace-svg { max-width: 22rem; margin: 0 auto; background: var(--ink-900); border-radius: var(--radius-md); }
.ej-ix-pangee-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 34rem; }
.ej-fiche .ej-ix .ej-ix-pangee-titre, .ej-ix-pangee-titre { margin: var(--space-1) 0 0; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.ej-ix-signe--trait { stroke-width: 2.6; }   /* L49a : le trait de l'unité, à la taille des vrais signes */

/* L65 · 7.8 : la Terre texturée (carte plaquée sur un globe, canvas), inclinée, éclairée */
.ej-ix-globe-fig { text-align: center; }
.ej-ix-globe { display: block; width: 100%; max-width: 22rem; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; background: var(--ink-900); border-radius: var(--radius-md); }
.ej-fiche .ej-ix .ej-ix-globe-fig .ej-ix-globe-poles, .ej-ix .ej-ix-globe-fig .ej-ix-globe-poles, .ej-ix-globe-poles { text-align: center; margin: var(--space-2) auto 0; max-width: 34rem; font-weight: var(--weight-semibold); color: var(--text-strong); }
.ej-ix-globe-commande { max-width: 34rem; margin: var(--space-3) auto var(--space-2); text-align: left; }
.ej-ix-globe-fig figcaption { max-width: 34rem; margin: 0 auto; text-align: left; }
.ej-ix-globe-accelere { font-style: italic; }
/* L65 · 1.7 : huit globes qui tournent */
.ej-fiche .ej-ix .ej-ix-rotation-grille, .ej-ix-rotation-grille { list-style: none; margin: 0 0 var(--space-3); padding: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); background: var(--ink-900); border-radius: var(--radius-md); }
@media (min-width: 700px) { .ej-fiche .ej-ix .ej-ix-rotation-grille, .ej-ix-rotation-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ej-ix-rotation-case { margin: 0; padding: 0 0 var(--space-2); text-align: center; }
.ej-ix-globe.ej-ix-globe--petit { max-width: 11rem; background: transparent; border-radius: 0; }
.ej-fiche .ej-ix .ej-ix-rotation-nom, .ej-ix-rotation-nom { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--on-dark); }
.ej-fiche .ej-ix .ej-ix-rotation-tours, .ej-ix-rotation-tours { margin: 0; font-size: var(--text-sm); color: var(--on-dark-72); font-variant-numeric: tabular-nums; }
/* L65 · 1.6 : la face cachée de la Lune */
.ej-ix-fig--large .ej-ix-svg.ej-ix-svg--px.ej-ix-lune-svg { border-radius: var(--radius-md); }
.ej-ix-lune-dessus .ej-ix-svg { border-radius: var(--radius-md); }
.ej-ix-lune-rayon { stroke: var(--accent-warm); stroke-width: 2; stroke-dasharray: 6 5; }
.ej-ix-lune-texte { fill: var(--on-dark); }
.ej-ix-lune-nuit { fill: var(--ink-700); stroke: var(--on-dark-35); stroke-width: 1; }
.ej-ix-lune-jour { fill: var(--on-dark-88); }
.ej-ix-lune-face { stroke: var(--accent-warm); stroke-width: 3.5; stroke-linecap: round; }
.ej-ix-lune-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); background: var(--ink-900); border-radius: var(--radius-md); }
.ej-ix-lune-vue { text-align: center; }
.ej-fiche .ej-ix .ej-ix-lune-titre, .ej-ix-lune-titre { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--on-dark); line-height: var(--leading-tight); }
.ej-fiche .ej-ix .ej-ix-lune-etat, .ej-ix-lune-etat { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--on-dark-72); }
.ej-ix-globe.ej-ix-globe--lune { max-width: 15rem; background: transparent; border-radius: 0; }
.ej-ix-lune-dessus .ej-ix-orbite { fill: none; stroke: var(--on-dark-35); stroke-dasharray: 3 3; }
/* L65e : les globes se font tourner à la main (curseur « main ») ; la page défile toujours à la verticale */
.ej-ix-glissable { cursor: grab; touch-action: pan-y; }
.ej-ix-glissable--libre { cursor: grab; touch-action: none; }
.ej-ix-glissable.ej-ix-glisse, .ej-ix-glissable--libre.ej-ix-glisse { cursor: grabbing; }
/* L65g · 5.1 : combien d'espèces ? */
.ej-ix-especes-barre { fill: var(--brand-a25); stroke: var(--brand-500); stroke-width: 1.2; }
.ej-ix-especes-point { fill: var(--brand-600); stroke: var(--surface); stroke-width: 1.5; }
.ej-ix-especes-recense { fill: var(--accent-warm-dark); stroke: var(--surface); stroke-width: 1.5; }
.ej-ix-especes-pari { stroke: var(--accent-warm-dark); stroke-width: 2.5; stroke-dasharray: 5 4; }
.ej-ix-especes-vous { fill: var(--accent-warm-dark); font-weight: var(--weight-bold); }
.ej-fiche .ej-ix .ej-ix-especes-grille, .ej-ix-especes-grille { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 20rem; }
.ej-ix-especes-case { aspect-ratio: 1 / 1; margin: 0; border: 1px solid var(--brand-500); border-radius: var(--radius-xs); background: transparent; }
.ej-ix-especes-case--decrite { background: var(--brand-500); }
.ej-ix-especes-grille-fig[hidden] { display: none; }
.ej-ix-etiq-fond.ej-ix-etiq-fond--plein { fill-opacity: 1; }   /* L65g : le trait du pari passe sous les noms */