/* Zinies — styles de la page d'accueil (partages par / et /fr/) */
.heros{padding-block:56px 40px}
.heros .enveloppe{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.heros h1{font-size:clamp(40px,6.4vw,68px);margin-bottom:16px}
.heros h1 span{color:var(--or)}
.heros p{color:var(--doux);font-size:19px;max-width:46ch;margin-bottom:26px}
.heros .actions{display:flex;gap:14px;flex-wrap:wrap}
.heros small{display:block;color:var(--doux);margin-top:16px;font-size:14px}
.cadre{position:relative;border:3px solid #0c0b11;border-radius:8px;box-shadow:0 0 0 2px var(--ligne),0 18px 40px rgba(0,0,0,.45);overflow:hidden;background:#22212e}
.cadre canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.cadre .legende{position:absolute;left:10px;bottom:10px;background:rgba(21,20,27,.85);border:1.5px solid var(--ligne);padding:4px 10px;font-size:13px;border-radius:4px;color:var(--doux)}
.etapes .carte{position:relative;padding-top:22px}
.etapes .num{position:absolute;top:-14px;left:16px;background:var(--or);color:#1a1300;font-weight:700;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.bande{background:var(--fond2);border-block:2px solid var(--ligne)}
.royaumes{display:flex;gap:8px;margin:10px 0 4px}
.royaumes i{width:14px;height:14px;border:2px solid #000;display:inline-block}
.suite{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.final{text-align:center}
.final p{color:var(--doux);margin:10px auto 24px;max-width:48ch}
@media (max-width:860px){.heros .enveloppe{grid-template-columns:1fr}}