@font-face { font-family: "Caveat"; src: url("../fonts/caveat-500-pDIbSvQ.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Thème « grimoire nocturne » : ciel étoilé, aurore, opaline (les yeux d'Eldric) et or ancien.
   Changez les couleurs ici, tout le site suit. */
@font-face { font-family: "Cinzel Decorative"; src: url("../fonts/cinzel-decorative-700-qCcbN3_.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/garamond-400-RU06u-s.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/garamond-400-italic-GZOEr2C.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/garamond-600-Ay0oesZ.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
    --bg: #06070f;
    --surface: rgb(16 17 36 / .88);
    --border: #2a2c4d;
    --text: #e8e4d8;
    --muted: #a7a8bf;
    --opaline: #8fdcf0;
    --arcane: #b197fc;
    --gold: #e0c27a;
    --ok: #4ade80;
    --wip: #fbbf24;
    --title: "Cinzel Decorative", Georgia, serif;
    --serif: "EB Garamond", Garamond, Georgia, serif;
    --hand: "Caveat", "Segoe Print", cursive;
    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 1.15rem/1.7 var(--serif);
    overflow-x: hidden;
}
main { flex: 1; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-family: var(--title); font-weight: 700; }
h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .04em; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
a { color: var(--opaline); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--opaline); outline-offset: 3px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 30; background: var(--bg); padding: .5rem 1rem; }

/* ---------- Ciel : étoiles, aurore, étoiles filantes ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars, .stars::after {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent),
        radial-gradient(1px 1px at 120px 80px, #cfe9ff 50%, transparent),
        radial-gradient(1.5px 1.5px at 200px 150px, #fff 50%, transparent),
        radial-gradient(1px 1px at 60px 190px, #e9ddff 50%, transparent),
        radial-gradient(1px 1px at 170px 230px, #fff 50%, transparent);
    background-size: 260px 260px;
    animation: twinkle 7s ease-in-out infinite alternate;
}
.stars::after { content: ""; background-size: 410px 410px; background-position: 130px 90px; animation-duration: 11s; animation-delay: -4s; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .75; } }

.aurora {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(40% 30% at 30% 20%, rgb(143 220 240 / .14), transparent 70%),
        radial-gradient(35% 28% at 75% 15%, rgb(177 151 252 / .16), transparent 70%),
        radial-gradient(45% 35% at 60% 85%, rgb(46 120 140 / .14), transparent 70%);
    will-change: transform;
    animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate(6%, 4%) rotate(8deg) scale(1.1); } }

.shooting-star {
    position: absolute;
    top: calc(8% + var(--i) * 14%);
    left: 110%;
    width: 120px;
    height: 1.5px;
    background: linear-gradient(90deg, #fff, transparent);
    border-radius: 2px;
    transform: rotate(-18deg);
    opacity: 0;
    animation: shoot 14s linear infinite;
    animation-delay: calc(var(--i) * 4.7s);
}
@keyframes shoot {
    0%, 88% { left: 110%; opacity: 0; }
    89% { opacity: 1; }
    96% { left: -20%; opacity: 0; }
    100% { left: -20%; opacity: 0; }
}

/* ---------- Barre du haut ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: .7rem clamp(1rem, 4vw, 3rem);
    background: rgb(6 7 15 / .78);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(224 194 122 / .18);
}
.brand { font: 700 1.25rem var(--title); color: var(--gold); text-decoration: none; letter-spacing: .04em; }
.cursor { color: var(--opaline); font-family: var(--mono); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.topbar nav a {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    font-size: 1.05rem;
    letter-spacing: .03em;
    transition: color .25s;
}
.topbar nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform .3s;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--text); }
.topbar nav a:hover::after, .topbar nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Accueil ---------- */
.hero {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 74vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem clamp(1rem, 5vw, 3rem);
}
@media (min-width: 860px) { .hero { grid-template-columns: 1.05fr 1fr; } }
.prompt { font: .85rem var(--mono); color: var(--opaline); margin: 0 0 .4rem; opacity: .8; }
.prompt::after { content: "▍"; margin-left: .2rem; animation: blink 1.1s steps(1) infinite; }
.hero h1 {
    font-size: clamp(3rem, 12vw, 6rem);
    color: #f3e7c4;
    text-shadow: 0 0 22px rgb(224 194 122 / .35);
    animation: glow 6s ease-in-out infinite;
}
.tagline { font-size: clamp(1.2rem, 2.6vw, 1.5rem); max-width: 40ch; margin: 0 0 1rem; }
.hero-lore { color: var(--muted); font-style: italic; margin: 0; }

/* Constellation du Taureau */
.constellation { width: 100%; max-width: 540px; justify-self: center; overflow: visible; }
.constellation .lien {
    stroke: rgb(143 220 240 / .3);
    stroke-width: 1.1;
    fill: none;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: trace 2s ease-out forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
.constellation .etoile { fill: #f2f8ff; filter: drop-shadow(0 0 4px #cfe9ff); }
.constellation .aldebaran { fill: #ffb36b; filter: drop-shadow(0 0 8px #ff9a3c); }
.constellation .halo { fill: rgb(143 220 240 / .13); transform-box: fill-box; transform-origin: center; animation: pulse 3.5s ease-in-out infinite; }
.constellation .paquet { fill: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); }
.constellation .pleiades circle { fill: #d6e6ff; animation: twinkle 2.4s ease-in-out infinite alternate; }
.constellation .nom-etoile { font: italic 11px var(--serif); fill: var(--muted); letter-spacing: .05em; }
@keyframes pulse { 0%, 100% { transform: scale(.6); opacity: .25; } 50% { transform: scale(1.3); opacity: .9; } }

/* ---------- Sections ---------- */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 4vw, 2rem);
}
.section h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); position: relative; display: inline-block; padding-bottom: .5rem; }
.section h2::after {
    content: "";
    position: absolute;
    left: -.2rem;
    right: -.6rem;
    bottom: 0;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C30 2 55 9 85 5 S140 2 165 6 S190 8 198 4' fill='none' stroke='%23e0c27a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    opacity: .8;
}
.page-head h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); color: var(--gold); text-shadow: 0 0 28px rgb(224 194 122 / .3); }
.lead { font-size: 1.25rem; max-width: 68ch; }
.muted { color: var(--muted); }

/* Liaison entre les sections : un trait d'or, un ornement, un paquet qui passe */
.liaison {
    position: relative;
    max-width: 1100px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgb(224 194 122 / .35) 20%, rgb(224 194 122 / .35) 80%, transparent);
}
.liaison::before {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    padding: 0 .8rem;
    background: var(--bg);
    color: var(--gold);
    font-size: .9rem;
}
.liaison::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 50px;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, var(--opaline));
    box-shadow: 0 0 10px var(--opaline);
    animation: transit 6s linear infinite;
}
@keyframes transit { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 50px); opacity: 0; } }

/* Parcours */
.timeline { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.6rem; border-left: 1px solid rgb(224 194 122 / .3); }
.timeline li { position: relative; margin-bottom: 2rem; }
.timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1.6rem - 6px);
    top: .45rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--opaline);
    box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--opaline);
    animation: led 3s ease-in-out infinite;
}
.period { font: .85rem var(--mono); color: var(--gold); }
.timeline h3 { margin: .25rem 0 .4rem; }
.timeline p { margin: 0; color: var(--muted); max-width: 70ch; }

/* ---------- Cartes : liseré doré qui tourne au survol ---------- */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: transform .35s, box-shadow .35s, rotate .35s;
}
.grid .card:nth-child(3n+1) { rotate: -.7deg; }
.grid .card:nth-child(3n+2) { rotate: .5deg; }
.grid .card:nth-child(4n) { rotate: 1deg; }
.grid .card:hover { rotate: 0deg; }
.card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--angle), transparent 0 60%, var(--gold) 75%, var(--opaline) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 34px -12px rgb(224 194 122 / .35); }
.card:hover::before { opacity: 1; animation: orbit 3s linear infinite; }
@keyframes orbit { to { --angle: 360deg; } }
.card p { color: var(--muted); margin: 0; }
.card .more { display: inline-block; margin-top: 1rem; font-weight: 600; text-decoration: none; }
.card .more:hover { text-decoration: underline; }
.badge {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .05rem .65rem;
    border: 1px solid rgb(224 194 122 / .5);
    border-radius: 999px;
    color: var(--gold);
    font: .75rem var(--mono);
}

.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { font: .8rem var(--mono); padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 999px; transition: border-color .25s, color .25s; }
.tags li:hover { border-color: var(--opaline); color: var(--opaline); }

/* Logos des technologies (monochromes, teintés par le thème) */
.icone { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; color: var(--gold); }
.icone svg { width: 100%; height: 100%; }
.icone svg:not([fill="none"]) { fill: currentColor; }
.titre-icone { display: flex; align-items: center; gap: .55rem; }
.titre-icone .icone { width: 1.3em; height: 1.3em; color: var(--opaline); }
.tags li { display: inline-flex; align-items: center; gap: .4rem; }
.tags .icone { width: 1.05em; height: 1.05em; color: var(--muted); transition: color .25s; }
.tags li:hover .icone { color: var(--opaline); }

.pile { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; padding: 0; margin: 2rem 0 0; }
.pile li { display: flex; flex-direction: column; align-items: center; gap: .35rem; font: .75rem var(--mono); color: var(--muted); }
.pile .icone { width: 2.1rem; height: 2.1rem; color: var(--text); opacity: .75; transition: color .25s, opacity .25s, transform .25s; }
.pile li:hover .icone { color: var(--gold); opacity: 1; transform: translateY(-3px) rotate(-4deg); }

/* Notes manuscrites dans les marges */
.note { font: 500 1.35rem/1.1 var(--hand); color: var(--gold); margin: 0; }
.fleche { display: inline-block; width: 46px; height: 30px; vertical-align: middle; color: currentColor; }
.hero-ciel { position: relative; justify-self: center; width: 100%; max-width: 540px; }
.note-ciel { margin: -.6rem 0 0 34%; rotate: -4deg; white-space: nowrap; }
.note-ciel .fleche { rotate: -125deg; margin-right: .2rem; }
.card .note-carte { position: absolute; top: -1.9rem; right: .8rem; rotate: 3deg; color: var(--opaline); }
.note-carte .fleche { scale: -1 1; rotate: -20deg; width: 34px; }
.note-irma { margin: -.4rem 0 .6rem 2.4rem; rotate: -2deg; color: var(--opaline); }
.note-irma .fleche { rotate: 200deg; width: 34px; }
.note-pile { margin-top: .8rem; rotate: -2deg; }
.note-pile .fleche { rotate: -60deg; width: 34px; }
.signature { font: 500 2.4rem var(--hand) !important; color: var(--gold); rotate: -4deg; margin-bottom: .4rem !important; }

/* Voyants d'état */
.etat { display: flex; align-items: center; gap: .5rem; margin-top: 1rem !important; font: .8rem var(--mono); }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: led 2.4s ease-in-out infinite; }
.led-wip { background: var(--wip); box-shadow: 0 0 8px var(--wip); animation-duration: 1.2s; }
@keyframes led { 50% { opacity: .35; } }

/* ---------- Page Eldric Rusano ---------- */
.grimoire-head { text-align: center; }
.grimoire-head .lead { margin-inline: auto; }
.incantation { font: italic 1.05rem var(--serif); color: var(--gold); letter-spacing: .35em; margin: 0 0 .5rem; animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { text-shadow: 0 0 16px var(--gold); } }

.fiche {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: .75rem;
    margin: 2rem 0;
}
.fiche div { padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: 8px; }
.fiche dt { font: .72rem var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.fiche dd { margin: .2rem 0 0; }
.portrait { font-style: italic; color: var(--muted); max-width: 70ch; }
.fiche-longue { grid-template-columns: 1fr; }
.fiche-longue dd { color: #d6d2c6; max-width: 75ch; }
.sous-titre { margin-top: 1.8rem; color: var(--gold); }

.grimoire { max-width: 800px; }
.chapitre { margin-top: 2.8rem; }
.chapitre h3 { font-size: 1.55rem; display: flex; align-items: baseline; gap: .75rem; }
.numero { font: 700 .85rem var(--title); color: var(--gold); border: 1px solid rgb(224 194 122 / .5); border-radius: 50%; width: 2rem; height: 2rem; display: inline-grid; place-items: center; flex: none; }
.chapitre p, .origines p { color: #d6d2c6; }
.chapitre:first-of-type p:first-of-type::first-letter { float: left; font: 700 3.6rem/0.85 var(--title); color: var(--gold); margin: .35rem .55rem 0 0; }

.a-venir { margin-top: 2rem; color: var(--muted); font-style: italic; }

/* Mentions légales */
.legal { max-width: 800px; }
.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal p { color: #d6d2c6; }

.footer { text-align: center; padding: 2rem 1rem; border-top: 1px solid rgb(224 194 122 / .18); color: var(--muted); font-size: 1rem; }
.footer p { margin: .25rem 0; }
.footer .led { margin-right: .4rem; }

/* ---------- Apparition au défilement (activée par le script) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .card.reveal.visible:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* Étincelles */
.sparkle {
    position: fixed;
    z-index: 25;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0 20%, var(--gold) 40%, transparent 70%);
    border-radius: 50%;
    animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle { to { transform: translate(var(--dx, 0), var(--dy, 14px)) scale(0); opacity: 0; } }

/* ---------- Irma, la chouette ---------- */
.irma {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 15;
    width: 64px;
    height: 70px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5));
}
.irma.free { left: 0; top: 0; right: auto; bottom: auto; transition: transform 2.6s cubic-bezier(.45, .05, .35, 1), opacity .4s; }
.irma.no-anim { transition: none; }
.irma.ghost { opacity: .3; pointer-events: none; }
.irma svg { display: block; transform-origin: 50% 90%; animation: perch 4s ease-in-out infinite; }
.irma .wing { transform-box: fill-box; }
.irma .wing-l { transform-origin: right top; }
.irma .wing-r { transform-origin: left top; }
.irma .pupils { transition: transform .15s; }
.irma .lids { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: wink 7s infinite; }
@keyframes perch { 50% { transform: translateY(-3px); } }
@keyframes wink { 0%, 94%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }

/* En vol */
.irma.flying svg { animation: none; transform: rotate(var(--tilt, 0deg)); transition: transform .4s; }
.irma.flying .wing-l { animation: flap-l .26s ease-in-out infinite alternate; }
.irma.flying .wing-r { animation: flap-r .26s ease-in-out infinite alternate; }
@keyframes flap-l { from { transform: rotate(-10deg); } to { transform: rotate(60deg); } }
@keyframes flap-r { from { transform: rotate(10deg); } to { transform: rotate(-60deg); } }

/* Occupations quand elle est posée */
.irma.tilt svg { animation: tilt 1.6s ease-in-out; }
@keyframes tilt { 30%, 60% { transform: rotate(-16deg); } }
.irma.look .pupils { animation: look 1.6s ease-in-out; }
@keyframes look { 25% { transform: translateX(-2.5px); } 60% { transform: translateX(2.5px); } }
.irma.ruffle svg { animation: ruffle .5s ease-in-out 3; }
@keyframes ruffle { 50% { transform: scale(1.12, .94); } }
.irma.hop svg { animation: hop .5s ease-out 3; }
@keyframes hop { 40% { transform: translateY(-12px); } }
.irma.preen .wing-r { animation: preen .4s ease-in-out 4 alternate; }
@keyframes preen { to { transform: rotate(-25deg); } }

/* Réactions au clic */
.irma.spin svg { animation: spin .9s ease-in-out; }
@keyframes spin { to { transform: rotate(360deg); } }
.irma.glow svg { filter: drop-shadow(0 0 14px var(--opaline)) drop-shadow(0 0 30px var(--opaline)); transition: filter .3s; }
.irma.stare svg { animation: none; transform: scale(1.15); transition: transform .3s; }
.irma.stare .pupils { transform: scale(1.35); transform-box: fill-box; transform-origin: center; }

/* Sommeil */
.irma.sleeping .lids { animation: none; transform: scaleY(1); }
.irma.sleeping svg { animation: perch 6s ease-in-out infinite; }
.irma-zzz { position: absolute; right: -6px; top: -10px; font: italic 600 .9rem var(--serif); color: var(--opaline); opacity: 0; pointer-events: none; }
.irma-zzz span { position: relative; display: inline-block; }
.irma.sleeping .irma-zzz { opacity: 1; animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -12px); opacity: 0; } }

/* Bulle de dialogue */
.irma-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    width: max-content;
    max-width: 220px;
    padding: .45rem .8rem;
    background: #f6efd9;
    color: #1b1830;
    border-radius: 12px;
    font: italic 1rem/1.3 var(--serif);
    text-align: center;
    box-shadow: 0 6px 20px rgb(0 0 0 / .4);
    transform: translateX(-50%) scale(.6);
    transform-origin: bottom center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .25s;
}
.irma-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #f6efd9; }
.irma.talking .irma-bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.irma.bubble-left .irma-bubble { left: auto; right: 0; transform: scale(.6); transform-origin: bottom right; }
.irma.bubble-left.talking .irma-bubble { transform: scale(1); }
.irma.bubble-left .irma-bubble::after { left: auto; right: 22px; }
.irma.bubble-below .irma-bubble { bottom: auto; top: calc(100% + 10px); }
.irma.bubble-below .irma-bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #f6efd9; }

@media (max-width: 600px) {
    .irma { width: 48px; height: 53px; }
    .shooting-star { width: 70px; }
}

/* Moins d'animations demandé : tout s'arrête, la chouette reste posée sans cacher de texte */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .constellation .paquet, .shooting-star { display: none; }
    .constellation .lien { stroke-dashoffset: 0; }
    .card:hover { transform: none; }
}