/* Oratorio — jeu « La course des Sept Églises » (js/eglises.js). Couleurs : tokens de style.css uniquement. */
#eglises-root{gap:16px;min-width:0}
.eg h2:focus{outline:none}

/* ---------- intro ---------- */
.eg-intro{max-width:620px;width:100%;margin:0 auto;box-sizing:border-box}
.eg-intro .eyebrow{margin:0 0 -8px}
.eg-quote{margin:0;padding:12px 16px;border-left:3px solid var(--gold);background:var(--sun-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.eg-quote p{margin:0;font-family:var(--display);font-style:italic;font-size:16.5px;line-height:1.45}
.eg-quote cite{display:block;margin-top:6px;font-family:var(--sc);font-style:normal;font-weight:700;letter-spacing:.08em;font-size:13px;color:var(--gold)}
.eg-quote cite::before{content:"— "}
.eg-how-t{margin:0 0 4px;font-family:var(--sc);font-weight:700;letter-spacing:.1em;font-size:14px;color:var(--red)}
.eg-how ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.eg-best{margin:0;color:var(--muted);font-size:15px}
.eg-go{align-self:flex-start;font-size:16px;padding:11px 26px;min-height:46px}

/* ---------- jeu ---------- */
.eg-play{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.eg-side{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:16px clamp(16px,4vw,24px) 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.eg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-family:var(--sc);font-weight:700;letter-spacing:.08em;font-size:14px}
.eg-step{color:var(--gold)}
.eg-stats{display:flex;gap:12px;color:var(--muted)}
.eg-clock{font-variant-numeric:tabular-nums}
.eg-clock::before{content:"⏱ "}
.eg-prompt{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(21px,5.4vw,26px);line-height:1.2;text-wrap:balance}
.eg-hint{margin:0;color:var(--muted);font-size:15px;line-height:1.4}
.eg-hint:empty{display:none}

.eg-feedback:empty{display:none}
.eg-feedback{border-radius:var(--r-sm);padding:10px 14px;background:var(--ground);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.eg-feedback.is-ok{background:var(--sun-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.eg-feedback.is-wrong{background:var(--soft);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.eg-feedback-msg{margin:0;font-weight:700}
.eg-feedback.is-ok .eg-feedback-msg::before{content:"✓ ";color:var(--gold)}
.eg-feedback.is-wrong .eg-feedback-msg{color:var(--red)}
.eg-maxime{margin:0}
.eg-maxime blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:16.5px;line-height:1.45}
.eg-maxime figcaption{margin-top:4px;font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:13px;color:var(--gold)}

.eg-end{display:flex;flex-direction:column;gap:8px}
.eg-sum{margin:0;font-family:var(--display);font-size:19px;line-height:1.35}
.eg-sum-sub{margin:0;color:var(--muted)}
.eg-record{margin:0;font-family:var(--sc);font-weight:700;letter-spacing:.08em;color:var(--gold)}
.eg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.eg-actions .btn{font-size:16px;padding:11px 22px;min-height:46px}

.eg-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.eg-tools .btn{font-size:14px;padding:7px 13px}
.eg-quit{color:var(--muted)}

/* ---------- carte ---------- */
.eg-board{min-width:0;display:flex;flex-direction:column;gap:10px}
.eg-map{height:min(56vh,420px);min-height:300px;width:100%;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--ground);isolation:isolate;position:relative;z-index:0;font-family:var(--body)}
.eg-map.is-loading::after{content:"Chargement de la carte…";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:15px}
.eg-map .leaflet-control-attribution{background:color-mix(in srgb,var(--paper) 85%,transparent);color:var(--muted)}
.eg-map .leaflet-control-attribution a{color:var(--muted)}
.eg-map .leaflet-bar a{background:var(--paper);color:var(--ink);border-color:var(--line)}

.eg-marker{background:none;border:0}
.eg-marker:focus{outline:none}
.eg-pin{box-sizing:border-box;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);border:3px solid var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.3);color:var(--sun-ink);font-family:var(--sc);font-weight:700;font-size:15px;line-height:1;cursor:pointer;transition:transform .15s ease,background .2s ease}
.eg-pin::after{content:"✝";color:var(--red-ink);font-family:var(--body);font-size:15px}
.eg-pin.is-found::after{content:none}
.eg-marker:hover .eg-pin{transform:scale(1.12)}
.eg-marker:focus-visible .eg-pin{outline:3px solid var(--sun);outline-offset:2px}
.eg-pin.is-found{background:var(--sun);border-color:var(--gold)}
.eg-pin.is-wrong,.eg-choice.is-wrong{animation:eg-shake .5s ease}
@keyframes eg-shake{0%,100%{translate:0}20%{translate:-6px}40%{translate:6px}60%{translate:-4px}80%{translate:3px}}
.eg-route{stroke:var(--gold);fill:none}
.eg-map .leaflet-tooltip.eg-tip{background:var(--paper);color:var(--red);border:1px solid var(--line);font-family:var(--body);font-weight:700;font-size:13px;padding:2px 8px;border-radius:var(--r-sm);box-shadow:0 1px 4px rgba(0,0,0,.2);white-space:nowrap}
.eg-map .leaflet-tooltip-top.eg-tip::before{border-top-color:var(--line)}

/* ---------- consigne et message superposés à la carte ---------- */
.eg-mapwrap{position:relative;min-width:0}
.eg-play.has-ov .eg-map{height:min(68vh,560px);min-height:400px}
.eg-mapwrap .leaflet-top{top:calc(var(--ov-top,0px) + 6px)}
.eg-ov{position:absolute;left:8px;right:8px;z-index:2;box-sizing:border-box}
.eg-ov-top{top:8px;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 2px 10px rgba(0,0,0,.18);border:1px solid var(--line)}
.eg-ov-top:empty{display:none}
.eg-ov-top .eg-prompt{font-size:clamp(17px,4.6vw,22px);line-height:1.2}
.eg-ov-top .eg-hint{font-size:14px;line-height:1.35}
.eg-ov-bottom{bottom:8px;max-height:40%;overflow-y:auto;border-radius:var(--r-sm);box-shadow:0 2px 12px rgba(0,0,0,.22)}
.eg-ov-bottom .eg-feedback{padding-right:40px;border-radius:var(--r-sm)}
.eg-ov-bottom .eg-feedback.is-ok,.eg-ov-bottom .eg-feedback.is-wrong,.eg-ov-bottom .eg-feedback.is-info{background:var(--paper)}
.eg-ov-bottom .eg-feedback.is-ok{box-shadow:inset 4px 0 0 var(--gold)}
.eg-ov-bottom .eg-feedback.is-wrong{box-shadow:inset 4px 0 0 var(--red)}
.eg-ov-bottom .eg-feedback{padding:8px 40px 8px 12px;gap:4px}
.eg-ov-bottom .eg-maxime blockquote{font-size:14.5px;line-height:1.4}
.eg-ov-bottom .eg-feedback-msg{font-size:15.5px}
.eg-ov-close{position:absolute;top:4px;right:4px;appearance:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.eg-ov-close:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* ---------- récapitulatif de fin ---------- */
.eg-end-h{margin:0;font-family:var(--sc);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--gold)}
.eg-end-h:focus{outline:none}
.eg-recap-t{margin:6px 0 0;font-family:var(--sc);font-weight:700;letter-spacing:.1em;font-size:14px;color:var(--red)}
.eg-recap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.eg-recap li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.eg-recap .eg-choice-n{background:var(--sun);color:var(--sun-ink)}
.eg-recap-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.eg-recap-b b{font-family:var(--display);font-size:17px;line-height:1.25}
.eg-recap .eg-maxime blockquote{font-size:15.5px}
.eg-end .jx-revoir small{display:block;color:var(--muted)}

/* ---------- liste (sans carte / hors connexion) ---------- */
.eg-offline{background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.eg-offline p{margin:0;flex:1 1 220px;font-size:15px;color:var(--muted)}
.eg-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:560px){.eg-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eg-choice{appearance:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;text-align:left;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-family:var(--display);font-size:18px;line-height:1.2;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.eg-choice:hover{border-color:var(--red)}
.eg-choice:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.eg-choice-nom{min-width:0;overflow-wrap:anywhere}
.eg-choice-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);font-family:var(--sc);font-weight:700;font-size:15px}
.eg-choice-n:empty::after{content:"✝";color:var(--red);font-family:var(--body)}
.eg-choice.is-found{background:var(--sun-soft);border-color:color-mix(in srgb,var(--gold) 50%,transparent);cursor:default}
.eg-choice.is-found .eg-choice-n{background:var(--sun);color:var(--sun-ink)}

@media (min-width:900px){
  .eg-play:not(.is-list){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}
  .eg-play:not(.is-list) .eg-map{height:560px}
  .eg-play.is-list{max-width:760px;width:100%;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .eg-pin.is-wrong,.eg-choice.is-wrong{animation:none;outline:3px solid var(--red)}
  .eg-pin,.eg-choice{transition:none}
}