/* =====================================================================
   VERBUM — Salle 02 · Les Copistes et les Massorètes (étape E04)
   ===================================================================== */
.s02-scribes figure img, .s02-masso figure img, .s02-alep figure img, .s02-len figure img { border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* --- Esdras --- */
.esdras { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.es-text p { color: var(--text-dim); margin-bottom: 1rem; }
.es-text b { color: var(--blanc-parchemin); font-weight: 500; }
.es-text [lang="he"] { font-family: var(--f-hebreu); color: var(--or-clair); }

/* --- Règles --- */
.regles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: none; }
.regles li { position: relative; padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(201, 168, 76, .06), rgba(255, 255, 255, .01)); transition: border-color .4s, transform .4s var(--ease-out); }
.regles li:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.rg-n { font-family: var(--f-epi); font-size: 1.8rem; color: rgba(201, 168, 76, .45); line-height: 1; }
.regles h4 { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 500; margin: .5rem 0 .4rem; }
.regles p { font-size: .95rem; color: var(--text-dim); }
.regles [lang="he"] { font-family: var(--f-hebreu); color: var(--or-clair); }
.atelier-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: var(--s-7); }
.atelier-strip img { aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Genizah --- */
.genizah { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: var(--s-8); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); background: rgba(13, 27, 42, .45); }
.genizah > img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.gz-text { padding: clamp(1.4rem, 3vw, 2.6rem); align-self: center; }
.gz-text h3 { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 500; margin: .3rem 0 .7rem; }
.gz-text p { color: var(--text-dim); margin-bottom: 1.2rem; }
.gz-text b { color: var(--blanc-parchemin); font-weight: 500; }

/* --- Massorètes --- */
.s02-masso { background: linear-gradient(180deg, transparent, rgba(13, 27, 42, .5) 15%, rgba(13, 27, 42, .5) 85%, transparent); }
.masso-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.masso-intro p:not(.lead) { color: var(--text-dim); margin-top: 1rem; }
.masso-intro b { color: var(--blanc-parchemin); font-weight: 500; }
.masso-intro [lang="he"] { font-family: var(--f-hebreu); color: var(--or-clair); }

.couches { margin-top: var(--s-8); padding: clamp(1.3rem, 3vw, 2.6rem); border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: radial-gradient(80% 70% at 50% 0%, rgba(201, 168, 76, .1), transparent 70%), rgba(10, 10, 15, .55); box-shadow: var(--shadow-card); }
.couches-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.2rem; margin-bottom: 2rem; }
.couches-head h3 { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 500; }
.couches-head p { color: var(--text-mute); font-size: .95rem; }
.couches-text { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem; }
.cw { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .6rem; border-radius: 12px; border: 1px solid transparent; transition: background .3s, border-color .3s, transform .3s var(--ease-out); outline: none; }
.cw:hover, .cw:focus-visible { background: rgba(201, 168, 76, .1); border-color: var(--line-strong); transform: translateY(-3px); }
.cw-heb { font-family: var(--f-hebreu); font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem); line-height: 1.5; color: var(--blanc-parchemin); }
.cw-heb > span { display: none; }
.couches[data-layer="1"] .l1, .couches[data-layer="2"] .l2, .couches[data-layer="3"] .l3 { display: inline; animation: w-in2 .6s var(--ease-out) both; }
.couches[data-layer="3"] .l3 { color: var(--or-clair); }
@keyframes w-in2 { from { opacity: 0; filter: blur(5px); } }
.cw-tr { font-family: var(--f-texte); font-style: italic; color: var(--text-dim); font-size: .95rem; direction: ltr; }
.cw-fr { font-family: var(--f-ui); font-size: .72rem; color: var(--text-mute); direction: ltr; }
.cw:hover .cw-fr { color: var(--or-clair); }
.couches-fr { text-align: center; margin-top: 1.4rem; font-family: var(--f-titre); font-style: italic; font-size: var(--t-lg); color: var(--parchemin); }
.couches-legend { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); min-height: 4.5em; }
.couches-legend p { display: none; color: var(--text-dim); font-size: 1rem; text-align: center; max-width: 70ch; margin-inline: auto; }
.couches-legend b { color: var(--or-clair); font-weight: 500; }
.couches-legend [lang="he"] { font-family: var(--f-hebreu); font-size: 1.3em; color: var(--or-clair); }
.couches[data-layer="1"] [data-for="1"], .couches[data-layer="2"] [data-for="2"], .couches[data-layer="3"] [data-for="3"] { display: block; animation: w-in2 .5s both; }

/* --- Un mot, trois lectures --- */
.davar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); margin-top: var(--s-7); padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.dv-cons { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.dv-lab, .dv-q { font-family: var(--f-ui); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.dv-big { font-family: var(--f-hebreu); font-size: clamp(3.4rem, 2.4rem + 4vw, 5.5rem); color: var(--blanc-parchemin); line-height: 1.1; }
.dv-arrow { font-size: 2rem; color: var(--or-sacre); }
.dv-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.dv-opts button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem .6rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 10, 15, .5); transition: border-color .3s, background .3s, transform .3s var(--ease-out); }
.dv-opts button:hover, .dv-opts button.is-on { border-color: var(--or-sacre); background: rgba(201, 168, 76, .1); transform: translateY(-3px); }
.dv-opts [lang="he"] { font-family: var(--f-hebreu); font-size: 2.3rem; color: var(--or-clair); line-height: 1.3; }
.dv-opts b { font-family: var(--f-texte); font-style: italic; font-weight: 400; color: var(--blanc-parchemin); }
.dv-opts i { font-style: normal; font-family: var(--f-ui); font-size: .74rem; color: var(--text-mute); }
.dv-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 1rem; border-top: 1px dashed var(--line); padding-top: 1rem; }
.dv-note b { color: var(--blanc-parchemin); font-weight: 500; }

/* --- Page massorétique --- */
.mpage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center; }
.mp-sheet { position: relative; aspect-ratio: 30 / 27; padding: 6% 5%; border-radius: 6px; background: linear-gradient(160deg, #F5E6C8, #E2CC9F); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), inset 0 0 60px rgba(120, 80, 30, .25); display: flex; flex-direction: column; gap: 4%; }
.mp-mm { display: flex; flex-direction: column; gap: 5px; padding-inline: 8%; }
.mp-mm i { display: block; height: 3px; border-radius: 2px; background: rgba(60, 40, 15, .45); }
.mp-mm i:nth-child(2) { width: 80%; } .mp-mm i:nth-child(3) { width: 55%; }
.mp-cols { flex: 1; display: grid; grid-template-columns: .25fr 1fr .25fr 1fr .25fr 1fr .25fr; gap: 1.5%; }
.mp-col { display: flex; flex-direction: column; justify-content: space-between; }
.mp-col i { display: block; height: 4.2%; border-radius: 2px; background: rgba(35, 22, 8, .78); }
.mp-col i.vide { background: transparent; border-bottom: 1px dashed rgba(139, 26, 26, .6); }
.mp-col i.circ { position: relative; }
.mp-col i.circ::after { content: ""; position: absolute; left: 40%; top: -9px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #8B1A1A; }
.mp-mp { display: flex; flex-direction: column; gap: 9%; padding-top: 10%; }
.mp-mp i { display: block; height: 2px; background: rgba(60, 40, 15, .5); }
.mp-stage { position: relative; }
.mp-dot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-ui); font-weight: 600; font-size: .8rem; color: #17130a; background: var(--grad-or); box-shadow: 0 0 0 4px rgba(201, 168, 76, .25), 0 0 20px rgba(201, 168, 76, .6); animation: pulse-dot 2.4s infinite; }
.mp-dot.is-on { animation: none; box-shadow: 0 0 0 6px rgba(230, 204, 122, .45), 0 0 30px rgba(230, 204, 122, .8); }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 9px rgba(201, 168, 76, .08), 0 0 20px rgba(201, 168, 76, .5); } }
.mp-info p { display: none; color: var(--text-dim); font-size: 1.05rem; padding: 1.3rem 1.5rem; border-left: 2px solid var(--or-sacre); background: rgba(201, 168, 76, .05); border-radius: 0 var(--radius) var(--radius) 0; }
.mp-info p.is-on { display: block; animation: w-in2 .5s both; }
.mp-info b { color: var(--blanc-parchemin); font-weight: 500; }

/* --- Compteurs --- */
.milieux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.milieux article { padding: 1.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13, 27, 42, .6), rgba(10, 10, 15, .3)); }
.mi-k { font-family: var(--f-ui); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or-sacre); }
.mi-heb { font-family: var(--f-hebreu); font-size: 2.3rem; color: var(--blanc-parchemin); margin: .4rem 0 0; line-height: 1.3; }
.mi-heb .big { font-size: 1.6em; color: var(--or-clair); line-height: .8; }
.mi-fr { font-family: var(--f-titre); font-style: italic; color: var(--or-clair); margin-bottom: .6rem; }
.milieux p:last-child { font-size: .95rem; color: var(--text-dim); }

/* --- Jeu --- */
.jeu { max-width: 900px; margin-inline: auto; padding: clamp(1.3rem, 3vw, 2.4rem); border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: radial-gradient(80% 60% at 50% 0%, rgba(201, 168, 76, .1), transparent 70%), rgba(10, 10, 15, .6); box-shadow: var(--shadow-card); }
.jeu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; font-family: var(--f-ui); font-size: .78rem; color: var(--text-dim); }
.jeu-top b { color: var(--or-clair); }
.jeu-dots { display: flex; gap: .4rem; }
.jeu-dots i { width: 26px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); transition: background .4s; }
.jeu-dots i.is-on { background: var(--or-sacre); }
.jeu-dots i.is-done { background: var(--vert-dore-clair); }
.jeu-round { display: none; }
.jeu-round.is-active { display: block; animation: w-in2 .5s both; }
.jr-ref { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-sacre); margin-bottom: 1rem; }
.jr-line { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: rgba(245, 230, 200, .05); margin-bottom: .6rem; }
.jr-line.is-copie { background: rgba(245, 230, 200, .1); border: 1px dashed var(--line-strong); }
.jr-lab { font-family: var(--f-ui); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.jr-heb { font-family: var(--f-hebreu); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); color: var(--blanc-parchemin); line-height: 1.5; }
.jr-heb .lt { font: inherit; color: inherit; padding: 0 .04em; border-radius: 6px; transition: background .2s, color .2s; }
.jr-heb .lt:hover { background: rgba(201, 168, 76, .2); color: var(--or-clair); }
.jr-heb .lt.is-wrong { animation: shake .45s; color: #E8867C; }
.jr-heb .lt.is-found { color: #17130a; background: var(--vert-dore-clair); box-shadow: 0 0 20px rgba(181, 199, 122, .6); }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.jr-fr { margin-top: .8rem; font-family: var(--f-titre); font-style: italic; font-size: 1.15rem; color: var(--parchemin); }
.jr-expl { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px solid rgba(181, 199, 122, .4); background: rgba(126, 154, 78, .1); color: var(--text-dim); font-size: 1rem; }
.jr-expl b { color: var(--vert-dore-clair); }
.jeu-fin { text-align: center; padding: 1.4rem 0; }
.jf-big { font-family: var(--f-epi); font-size: var(--t-xl); color: var(--or-clair); margin-bottom: .6rem; }
.jeu-fin p:last-child { color: var(--text-dim); }
.jeu-nav { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* --- Codex d'Alep --- */
.alep-grid, .len-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.fiche-col { margin-top: 0; }
.fiche-col dl { grid-template-columns: 1fr 1fr; }
.maimonide { max-width: 860px; margin: var(--s-8) auto 0; text-align: center; }
.maimonide p { font-family: var(--f-titre); font-style: italic; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.5; color: var(--parchemin); }
.maimonide p::before { content: ""; display: block; width: 60px; height: 1px; margin: 0 auto 1.4rem; background: var(--or-sacre); }
.maimonide cite { display: block; margin-top: 1rem; font-family: var(--f-ui); font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }

.voyage { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; }
.cv-map { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--line); }
.cv-land { fill: rgba(201, 168, 76, .1); stroke: rgba(201, 168, 76, .45); stroke-width: .8; }
.cv-sea { font-family: var(--f-cap); font-size: 13px; letter-spacing: .2em; fill: rgba(240, 232, 213, .3); text-anchor: middle; }
.cv-seg { fill: none; stroke: rgba(230, 204, 122, .25); stroke-width: 2; stroke-dasharray: 5 6; transition: stroke .5s; }
.cv-seg.is-on { stroke: var(--or-clair); stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(230, 204, 122, .8)); }
.cv-pt text { font-family: var(--f-ui); font-size: 14px; fill: var(--blanc-parchemin); paint-order: stroke; stroke: #0A0A0F; stroke-width: 4px; }
.cv-pt .core { fill: var(--or-sacre); }
.cv-pt .halo { fill: rgba(201, 168, 76, .18); transition: r .4s; }
.cv-pt.is-on .core { fill: var(--or-clair); }
.cv-pt.is-on .halo { fill: rgba(230, 204, 122, .35); animation: halo 1.8s infinite; }
@keyframes halo { 50% { opacity: .3; } }
.cv-steps li { border-left: 1px solid var(--line); padding-left: 1.2rem; position: relative; }
.cv-steps li::before { content: ""; position: absolute; left: -5px; top: 1.15rem; width: 9px; height: 9px; border-radius: 50%; background: #0A0A0F; border: 1.5px solid var(--or-sacre); transition: background .3s; }
.cv-steps li.is-on::before { background: var(--or-clair); box-shadow: 0 0 12px var(--or-clair); }
.cv-steps button { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0 .3rem; text-align: left; width: 100%; color: inherit; }
.cv-steps b { min-width: 6.5rem; font-family: var(--f-cap); font-size: .85rem; color: var(--or-clair); }
.cv-steps span { font-family: var(--f-titre); font-size: 1.25rem; color: var(--blanc-parchemin); }
.cv-steps p { max-height: 0; overflow: hidden; opacity: 0; color: var(--text-dim); font-size: .97rem; padding-left: 7.5rem; transition: max-height .5s var(--ease-out), opacity .4s, padding .4s; }
.cv-steps li.is-on p { max-height: 8em; opacity: 1; padding-bottom: .7rem; }

.feuillets { margin-top: var(--s-8); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.fe-head h3 { font-family: var(--f-epi); font-weight: 400; font-size: var(--t-xl); color: var(--or-clair); }
.fe-head p { color: var(--text-dim); margin: .6rem 0 1rem; }
.fe-head b { color: var(--blanc-parchemin); font-weight: 500; }
.fe-leg { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-family: var(--f-ui); font-size: .74rem; color: var(--text-mute); }
.fe-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: .3rem; }
.fe-leg i.k { background: var(--or-sacre); } .fe-leg i.l { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); }
.fe-grid { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.fe-grid i { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .07); transform: scale(.4); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s; }
.fe-grid i.k { background: linear-gradient(135deg, #E6CC7A, #A8883A); }
.fe-grid i.zt.k { box-shadow: 0 0 6px rgba(230, 204, 122, .6); }
.feuillets.is-visible .fe-grid i { transform: none; opacity: 1; }
.fe-note { grid-column: 1 / -1; font-size: .8rem; color: var(--text-mute); text-align: right; }

.mystere { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; margin-top: var(--s-8); }
.mystere h3 { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 500; margin: .7rem 0; }
.mystere p { color: var(--text-dim); margin-bottom: .9rem; }
.mystere b { color: var(--blanc-parchemin); font-weight: 500; }

/* --- Codex de Leningrad --- */
.len-hero { margin-bottom: var(--s-7); }
.len-hero img { aspect-ratio: 21 / 9; object-fit: cover; }
.len-text p { color: var(--text-dim); margin-bottom: 1rem; }
.len-text b { color: var(--blanc-parchemin); font-weight: 500; }
.compare { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); }
.compare table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare th, .compare td { padding: 1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--f-cap); font-weight: 400; font-size: 1rem; letter-spacing: .08em; color: var(--or-clair); background: rgba(201, 168, 76, .07); }
.compare tbody th { font-family: var(--f-ui); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); width: 22%; }
.compare td { color: var(--text-dim); font-size: 1rem; }
.compare td b { color: var(--vert-dore-clair); font-weight: 500; }
.compare tr:last-child > * { border-bottom: 0; }
.len-pont { margin-top: var(--s-8); padding: clamp(1.6rem, 4vw, 3rem); border-radius: var(--radius-lg); text-align: center; background: radial-gradient(70% 90% at 50% 100%, rgba(230, 190, 110, .2), transparent 70%), linear-gradient(180deg, rgba(13, 27, 42, .7), rgba(10, 10, 15, .9)); border: 1px solid var(--line-strong); }
.len-pont h3 { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 500; margin: .4rem 0 .8rem; }
.len-pont p { color: var(--text-dim); max-width: 62ch; margin: 0 auto 1.6rem; }

/* --- Adaptatif --- */
@media (max-width: 1100px) { .regles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .esdras, .masso-intro, .genizah, .mpage, .alep-grid, .len-grid, .voyage, .feuillets, .mystere { grid-template-columns: 1fr; }
  .atelier-strip { grid-template-columns: 1fr 1fr; }
  .atelier-strip figure:last-child { grid-column: 1 / -1; }
  .davar { grid-template-columns: 1fr; text-align: center; }
  .dv-arrow { transform: rotate(90deg); }
  .compteurs { grid-template-columns: repeat(2, 1fr); }
  .milieux { grid-template-columns: 1fr; }
  .mpage { grid-template-columns: 1fr; }
  .mpage .mp-sheet { width: 100%; }
}
@media (max-width: 620px) {
  .regles, .atelier-strip { grid-template-columns: 1fr; }
  .dv-opts { grid-template-columns: 1fr; }
  .jr-line { grid-template-columns: 1fr; gap: .2rem; }
  .fe-grid { grid-template-columns: repeat(20, 1fr); gap: 2px; }
  .fiche-col dl { grid-template-columns: 1fr; }
  .cv-steps p { padding-left: 0; }
  .len-hero img { aspect-ratio: 16 / 10; }
}
.jr-heb .wd { white-space: nowrap; display: inline-block; }