:root {
  --nuit: #0e1828; --nuit-2: #15233a; --nuit-3: #1d3150; --ligne: rgba(233, 220, 192, .12);
  --foret: #2f6b4f; --foret-cl: #3f8a63; --cuir: #8a5a3b; --sable: #e9dcc0; --or: #d4a94a; --or-cl: #f0cf7d;
  --texte: #f1ead9; --texte-2: #b5ae9f; --rouge: #c2553f; --bleu: #3a7ca5;
  --rayon: 16px; --ombre: 0 10px 30px rgba(0, 0, 0, .35);
  --titre: 'Cinzel', Georgia, serif; --corps: 'Manrope', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nuit); color: var(--texte); font-family: var(--corps); font-size: 16px; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; background: radial-gradient(1200px 600px at 50% -200px, #1d3a3a 0%, transparent 60%), var(--nuit); }
a { color: var(--or-cl); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; margin-top: 1.5rem; }
p { margin: .4rem 0 .9rem; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
.titre { font-family: var(--titre); font-size: 1.6rem; line-height: 1.2; letter-spacing: .02em; color: var(--sable); }
.titre-2 { font-family: var(--titre); font-size: 1.3rem; color: var(--sable); margin: .4rem 0; }
.surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--or); font-weight: 600; }
.petit { font-size: .82rem; color: var(--texte-2); }
.centre { text-align: center; }
.vide-txt { color: var(--texte-2); text-align: center; padding: 1.5rem .5rem; }
.texte { color: var(--texte); padding-left: 1.2rem; } .texte li { margin-bottom: .4rem; }
.avertissement { background: rgba(212, 169, 74, .12); border: 1px solid rgba(212, 169, 74, .4); border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; }

/* ---------- Structure ---------- */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: rgba(14, 24, 40, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.marque { display: flex; align-items: center; gap: .5rem; font-family: var(--titre); font-weight: 700; color: var(--sable); font-size: .95rem; }
.marque-logo { color: var(--or); font-size: 1.2rem; }
.entete-droite { display: flex; align-items: center; gap: .6rem; }
.entete-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--nuit-3); border: 2px solid var(--or); display: grid; place-items: center; overflow: hidden; }
.entete-avatar svg { margin-top: 6px; }
.btn-icone { font-size: 1.2rem; padding: .3rem; }
.vue { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
.barre { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-around; background: rgba(14, 24, 40, .95); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.barre a { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: .68rem; color: var(--texte-2); padding: 4px 0; border-radius: 10px; }
.barre a span { font-size: 1.35rem; line-height: 1.2; filter: grayscale(.6); opacity: .8; }
.barre a.actif { color: var(--or-cl); } .barre a.actif span { filter: none; opacity: 1; transform: translateY(-1px); }
.ecran-centre { min-height: 60dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: .5rem; }
.chargement { display: grid; place-items: center; padding: 4rem 0; } .chargement.plein { min-height: 100dvh; }
.boussole { font-size: 2.6rem; animation: tourne 1.6s ease-in-out infinite; }
@keyframes tourne { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(25deg); } }
.retour { display: inline-block; margin-bottom: .6rem; color: var(--texte-2); font-size: .9rem; }

/* ---------- Boutons et formulaires ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; cursor: pointer; border-radius: 12px; padding: .8rem 1.2rem; font-weight: 600; background: linear-gradient(180deg, var(--or-cl), var(--or)); color: #2b1d0e; box-shadow: 0 4px 0 #8f6a22; transition: transform .1s, box-shadow .1s, opacity .2s; text-align: center; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f6a22; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-large { width: 100%; padding: 1rem; font-size: 1.05rem; margin: .6rem 0; }
.btn-sec { background: var(--nuit-3); color: var(--sable); box-shadow: 0 4px 0 #0a1220; border: 1px solid var(--ligne); }
.btn-sec:active { box-shadow: 0 1px 0 #0a1220; }
.btn-danger { background: linear-gradient(180deg, #d76a52, var(--rouge)); color: #fff; box-shadow: 0 4px 0 #7d2f20; }
.btn-petit { padding: .4rem .7rem; font-size: .82rem; box-shadow: 0 2px 0 #8f6a22; border-radius: 9px; }
.btn-petit.btn-sec { box-shadow: 0 2px 0 #0a1220; }
.vue > .btn-sec, .bloc > .btn-sec { width: 100%; margin: .4rem 0; }
.lien { background: none; border: 0; color: var(--or-cl); cursor: pointer; padding: .4rem 0; text-decoration: underline; text-underline-offset: 3px; }
.lien.danger { color: #e88a75; display: block; margin: 1rem auto 0; }
.lien-bloc { display: block; padding: .9rem 1rem; margin: .8rem 0; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 12px; color: var(--sable); }
.formulaire { display: flex; flex-direction: column; gap: .8rem; }
.formulaire label, label.formulaire { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--texte-2); font-weight: 500; }
input, select, textarea { font: inherit; color: var(--texte); background: var(--nuit); border: 1px solid rgba(233, 220, 192, .22); border-radius: 10px; padding: .75rem .8rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; }
label.case { flex-direction: row; align-items: flex-start; gap: .6rem; color: var(--texte); }
label.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--or); flex: none; }
.erreur { color: #f0a08c; min-height: 1.2em; font-size: .9rem; margin: 0; }
.info { background: rgba(63, 138, 99, .15); border: 1px solid rgba(63, 138, 99, .5); padding: 1rem; border-radius: 12px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.rangee { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; } .rangee .btn { flex: 1; }
.choix-saisie { flex-direction: row !important; align-items: center; } .choix-saisie input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: var(--foret-cl); }
.recherche { display: flex; gap: .5rem; margin: .6rem 0; }

.onglets { display: flex; gap: .3rem; background: var(--nuit-2); border-radius: 12px; padding: 4px; margin: .8rem 0; border: 1px solid var(--ligne); }
.onglets > * { flex: 1; text-align: center; padding: .55rem .4rem; border-radius: 9px; border: 0; background: none; cursor: pointer; color: var(--texte-2); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.onglets .actif { background: var(--nuit-3); color: var(--sable); box-shadow: inset 0 0 0 1px rgba(212, 169, 74, .35); }
.onglets.defilant { overflow-x: auto; scrollbar-width: none; } .onglets.defilant > * { flex: none; padding: .55rem .8rem; }
.puces { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem 0 .6rem; scrollbar-width: none; }
.puces.colonne { flex-direction: column; overflow: visible; }
.puce { flex: none; border: 1px solid var(--ligne); background: var(--nuit-2); color: var(--texte); border-radius: 999px; padding: .45rem .8rem; font-size: .85rem; cursor: pointer; }
.puce.actif { background: var(--foret); border-color: var(--foret-cl); color: #fff; }

/* ---------- Accueil / connexion ---------- */
.ecran-accueil { min-height: 100dvh; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.accueil-ciel { position: absolute; inset: 0; background:
  radial-gradient(2px 2px at 20% 15%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 8%, #fff9 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 85% 22%, #fff6 50%, transparent 51%), radial-gradient(2px 2px at 40% 28%, #fff7 50%, transparent 51%),
  radial-gradient(1px 1px at 55% 12%, #fff9 50%, transparent 51%), radial-gradient(1.5px 1.5px at 10% 32%, #fff6 50%, transparent 51%),
  linear-gradient(180deg, #0b1424 0%, #14304a 45%, #1d4a46 70%, #0e1828 100%); }
.accueil-ciel::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: 38%; height: 30%; background:
  linear-gradient(135deg, transparent 49.5%, #10233a 50%) 0 100% / 34% 100% repeat-x, linear-gradient(225deg, transparent 49.5%, #10233a 50%) 17% 100% / 34% 100% repeat-x; opacity: .9; }
.accueil-contenu { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--nuit) 18%); }
.accueil-logo { font-size: 2.4rem; color: var(--or); text-align: center; text-shadow: 0 0 24px rgba(212, 169, 74, .7); }
.accueil-titre { text-align: center; font-size: 2rem; margin-bottom: .2rem; }
.accueil-promesse { text-align: center; color: var(--texte-2); }

/* ---------- Camp ---------- */
.heros { display: flex; gap: 1rem; align-items: center; background: linear-gradient(135deg, rgba(47, 107, 79, .35), rgba(29, 49, 80, .6)); border: 1px solid var(--ligne); border-radius: 20px; padding: 1rem; box-shadow: var(--ombre); }
.heros-avatar { flex: none; width: 118px; height: 130px; display: grid; place-items: end center; background: radial-gradient(circle at 50% 40%, rgba(212, 169, 74, .25), transparent 65%); border-radius: 16px; overflow: hidden; }
.heros-infos { flex: 1; min-width: 0; } .heros-infos .titre { overflow: hidden; text-overflow: ellipsis; margin: 0; }
.niveau-ligne { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.badge-niveau { background: linear-gradient(180deg, var(--or-cl), var(--or)); color: #2b1d0e; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; }
.xp-total { font-weight: 600; color: var(--sable); }
.jauge { height: 10px; background: rgba(0, 0, 0, .35); border-radius: 999px; overflow: hidden; border: 1px solid var(--ligne); margin: .3rem 0; }
.jauge > div { height: 100%; background: linear-gradient(90deg, var(--foret-cl), var(--or)); border-radius: 999px; transition: width .6s ease; }
.bloc { background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1rem; margin-top: 1rem; }
.bloc h2 { margin-top: 0; }
.bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.emplacements { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.emplacement { display: flex; justify-content: center; }
.emplacement.vide { aspect-ratio: 63 / 88; border: 2px dashed rgba(233, 220, 192, .25); border-radius: 12px; flex-direction: column; align-items: center; justify-content: center; color: var(--texte-2); font-size: .8rem; }
.emplacement.vide span { font-size: 1.6rem; color: var(--or); }
.missions { display: flex; flex-direction: column; gap: .6rem; }
.mission { display: flex; align-items: center; gap: .8rem; padding: .8rem; background: var(--nuit-3); border-radius: 12px; color: var(--texte); border: 1px solid var(--ligne); }
.mission > div:nth-child(2) { flex: 1; }
.mission-icone { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0, 0, 0, .25); border-radius: 12px; }
.mission-pts { color: var(--or-cl); font-weight: 700; letter-spacing: .1em; }
.milieux { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin: .4rem 0; }
.milieu { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .1rem; border-radius: 10px; background: rgba(0, 0, 0, .2); opacity: .45; filter: grayscale(1); text-align: center; }
.milieu small { font-size: .58rem; line-height: 1.1; color: var(--texte-2); }
.milieu span { font-size: 1.3rem; }
.milieu.fait { opacity: 1; filter: none; background: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.conseil { display: flex; gap: .8rem; align-items: center; background: rgba(47, 107, 79, .15); border-color: rgba(63, 138, 99, .4); }
.conseil span { font-size: 1.5rem; } .conseil p { margin: 0; font-size: .9rem; }

/* ---------- Atlas et lieux ---------- */
.carte-geo { height: 300px; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); margin: .4rem 0; background: var(--nuit-2); }
.carte-geo.petite { height: 220px; }
.leaflet-container { font-family: var(--corps); background: #1b2a3c; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--nuit-2); color: var(--texte); }
.repere { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.repere span { transform: rotate(45deg); font-size: 1rem; }
.repere.fait { background: var(--or); }
.liste { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.ligne-lieu { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 12px; color: var(--texte); text-align: left; width: 100%; cursor: pointer; }
.ligne-lieu.fait { border-color: rgba(212, 169, 74, .45); }
.ligne-lieu.inactif { opacity: .5; }
.pastille { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--c) 40%, transparent); border: 1px solid var(--c); }
.ligne-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ligne-txt small { color: var(--texte-2); font-size: .78rem; }
.ligne-txt b { overflow: hidden; text-overflow: ellipsis; }
.ligne-droite { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; } .ligne-droite small { color: var(--texte-2); font-size: .75rem; }
.ligne-droite .coche { color: var(--or); font-size: 1.3rem; font-weight: 700; }
.lieu-tete { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.lieu-icone { flex: none; width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 2.2rem; background: color-mix(in srgb, var(--c) 40%, transparent); border: 2px solid var(--c); }
.lieu-tete .titre { margin: 0; }
.gains { color: var(--or-cl); font-weight: 700; }
.bonus { display: inline-block; background: rgba(212, 169, 74, .15); color: var(--or-cl); border: 1px solid rgba(212, 169, 74, .4); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; margin: .2rem 0; }
.securite { background: rgba(58, 124, 165, .12); border: 1px solid rgba(58, 124, 165, .45); border-radius: 12px; padding: .7rem .9rem; margin: .8rem 0; }
.securite p { margin: .2rem 0 0; font-size: .88rem; }
.radar { text-align: center; padding: 1rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--rayon); margin: .8rem 0 .2rem; transition: background .4s, border-color .4s; }
.radar-dist { font-family: var(--titre); font-size: 2rem; color: var(--sable); }
.radar.chaud { border-color: rgba(212, 169, 74, .6); background: rgba(212, 169, 74, .08); }
.radar.dedans { border-color: var(--foret-cl); background: rgba(63, 138, 99, .2); }
.radar.dedans .radar-dist { color: #9fe0b8; }
.jauge-radar { max-width: 260px; margin: .6rem auto 0; }
.statut { padding: .8rem 1rem; border-radius: 12px; margin: .8rem 0; font-weight: 500; }
.statut-validee { background: rgba(212, 169, 74, .14); border: 1px solid rgba(212, 169, 74, .45); color: var(--or-cl); }
.statut-en_attente { background: rgba(58, 124, 165, .15); border: 1px solid rgba(58, 124, 165, .5); }
.statut-refusee { background: rgba(194, 85, 63, .14); border: 1px solid rgba(194, 85, 63, .5); }
.badge { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: rgba(212, 169, 74, .2); color: var(--or-cl); } .badge.attente { background: rgba(58, 124, 165, .25); color: #9cc9e6; } .badge.ko { background: rgba(194, 85, 63, .25); color: #f0a08c; }

/* ---------- Cartes à collectionner ---------- */
.carte { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; position: relative; aspect-ratio: 63 / 88; width: 100%; border-radius: 12px; padding: 5px; cursor: pointer;
  background: linear-gradient(160deg, #e9dcc0, #b9a47c); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out; overflow: hidden; container-type: inline-size; }
.carte-int { position: relative; z-index: 1; height: 100%; border-radius: 8px; display: flex; flex-direction: column; align-items: center; padding: 6% 6% 4%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fam) 55%, #fff 0%) 0%, #12203a 75%); border: 1px solid rgba(0, 0, 0, .35); color: #f6efdf; text-align: center; }
.carte-tete { width: 100%; display: flex; justify-content: space-between; font-size: max(7px, 7cqi); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.carte-valeur { color: var(--or-cl); letter-spacing: 0; }
.carte-embleme { flex: 1; display: grid; place-items: center; font-size: 34cqi; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.carte-embleme img { width: 80%; border-radius: 6px; }
.carte-nom { font-family: var(--titre); font-weight: 700; font-size: max(9px, 10cqi); line-height: 1.1; }
.carte-famille { font-size: max(7px, 7cqi); opacity: .75; text-transform: uppercase; letter-spacing: .1em; margin: 2% 0; }
.carte-pied { width: 100%; display: flex; justify-content: space-between; font-size: max(7px, 6.5cqi); opacity: .7; font-variant-numeric: tabular-nums; }
.carte-indice { font-size: max(7px, 7cqi); opacity: .75; margin-bottom: auto; }
.carte-holo { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 0, 140, .35) 35%, rgba(0, 255, 230, .35) 45%, rgba(255, 230, 0, .35) 55%, transparent 70%);
  background-size: 250% 250%; background-position: var(--px) var(--py); animation: holo 6s ease-in-out infinite alternate; }
@keyframes holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.carte.r-rare { background: linear-gradient(160deg, #f4f6f8, #9aa3ad 50%, #e3e7eb); }
.carte.r-epique { background: linear-gradient(160deg, #7a5cff, #2fd3c8, #ffd36b); } .carte.r-epique .carte-holo { display: block; }
.carte.r-legendaire { background: linear-gradient(160deg, #fff1b8, #d4a94a 40%, #8f6a22 60%, #f0cf7d); box-shadow: 0 0 22px rgba(212, 169, 74, .55), 0 6px 16px rgba(0, 0, 0, .45); }
.carte.r-legendaire .carte-holo { display: block; opacity: .7; }
.carte.r-unique { background: linear-gradient(160deg, #1a0b0b, #8b0f12 35%, #d4a94a 50%, #8b0f12 65%, #0b0b0b); box-shadow: 0 0 26px rgba(139, 15, 18, .7), 0 6px 16px rgba(0, 0, 0, .6); }
.carte.r-unique .carte-int { background: radial-gradient(circle at 50% 35%, #3a0a0c 0%, #070707 80%); border-color: #d4a94a; }
.carte.r-unique .carte-holo { display: block; opacity: .5; }
.carte.r-unique .carte-nom { color: var(--or-cl); }
.carte.equipee::after { content: "✦ Équipée"; position: absolute; z-index: 3; top: 30%; left: 50%; transform: translateX(-50%); background: var(--or); color: #2b1d0e; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.carte-cachee { background: linear-gradient(160deg, #2b3a52, #1a2638); cursor: help; }
.carte-cachee .carte-int { background: repeating-linear-gradient(45deg, #15233a 0 6px, #172740 6px 12px); color: var(--texte-2); }
.carte-cachee .carte-embleme { font-family: var(--titre); color: rgba(233, 220, 192, .3); }
.grille-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: .8rem 0; }
@media (min-width: 520px) { .grille-cartes { grid-template-columns: repeat(4, 1fr); } }
.carte-zoom { width: min(70vw, 280px); margin: .4rem auto 1rem; } .carte-zoom .carte { touch-action: none; }
.grille-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-top: .8rem; }
.objet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: .9rem .6rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 14px; }
.objet small { color: var(--texte-2); font-size: .75rem; }
.objet-icone { font-size: 2rem; } .objet.verrou { opacity: .55; }

/* ---------- Fenêtres ---------- */
.fenetre-fond { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 10, 18, .75); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; backdrop-filter: blur(3px); }
.fenetre-fond.visible { opacity: 1; }
.fenetre { position: relative; width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 22px 22px 0 0; padding: 1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .25s ease; }
.fenetre-fond.visible .fenetre { transform: none; }
@media (min-width: 600px) { .fenetre-fond { align-items: center; } .fenetre { border-radius: 22px; } }
.fenetre-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .3); color: var(--texte); cursor: pointer; z-index: 5; }
.fenetre-texte { font-size: 1.05rem; padding-right: 2rem; }
.fenetre-large { max-width: 620px; }
.attente { text-align: center; padding: 1.5rem 0; }
.photo-grande { width: 100%; border-radius: 12px; }
.revelation, .bienvenue { text-align: center; }
.gros-emoji { font-size: 3rem; }
.xp-gros { font-family: var(--titre); font-size: 2.6rem; color: var(--or-cl); text-shadow: 0 0 24px rgba(212, 169, 74, .6); margin: .3rem 0; font-variant-numeric: tabular-nums; }
.cartes-revel { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: .6rem 0; }
.retourne { width: 120px; aspect-ratio: 63 / 88; perspective: 900px; cursor: pointer; }
.retourne-int { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.retourne.retournee .retourne-int { transform: rotateY(180deg); }
.retourne .dos-carte, .retourne .carte { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.retourne .carte { transform: rotateY(180deg); }
.dos-carte { border-radius: 12px; display: grid; place-items: center; font-size: 2.4rem; color: var(--or); background: repeating-linear-gradient(45deg, #1d3150 0 8px, #15233a 8px 16px); border: 4px solid var(--cuir); box-shadow: 0 0 20px rgba(212, 169, 74, .4); }
.equips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .5rem 0; }
.equip { background: var(--nuit-3); border-radius: 999px; padding: .35rem .8rem; display: flex; gap: .4rem; align-items: center; }

.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 2100; max-width: min(92vw, 460px); padding: .8rem 1.1rem; border-radius: 12px; background: #1f3350; border: 1px solid var(--ligne); box-shadow: var(--ombre); opacity: 0; transition: all .3s; font-size: .92rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast-ok { border-color: var(--foret-cl); background: #1d3d33; } .toast-erreur { border-color: var(--rouge); background: #40221d; }

/* ---------- Quiz ---------- */
.stats { display: flex; gap: .6rem; margin: .8rem 0; }
.stat { flex: 1; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 12px; padding: .7rem; text-align: center; }
.stat b { display: block; font-family: var(--titre); font-size: 1.4rem; color: var(--or-cl); } .stat small { color: var(--texte-2); }
.quiz-tete { display: flex; justify-content: space-between; font-size: .85rem; color: var(--texte-2); }
.quiz-question { font-size: 1.25rem; line-height: 1.35; margin: 1.2rem 0; }
.quiz-choix { display: flex; flex-direction: column; gap: .6rem; }
.choix { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .9rem; border-radius: 12px; border: 1px solid rgba(233, 220, 192, .2); background: var(--nuit-2); cursor: pointer; font-size: 1rem; transition: background .2s, border-color .2s; }
.choix span { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--nuit-3); font-weight: 700; color: var(--or-cl); }
.choix.bonne { background: rgba(63, 138, 99, .3); border-color: var(--foret-cl); } .choix.fausse { background: rgba(194, 85, 63, .25); border-color: var(--rouge); }
.choix:disabled { cursor: default; }
.quiz-retour { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--nuit-2); border-left: 4px solid var(--foret-cl); }
.quiz-retour.ko { border-left-color: var(--rouge); } .quiz-retour p { margin: .3rem 0 0; font-size: .92rem; }

/* ---------- Journal, classement ---------- */
.liste-xp > div { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--ligne); font-size: .9rem; }
.liste-xp b { color: var(--or-cl); text-align: right; min-width: 64px; } .liste-xp b.neg { color: #f0a08c; }
.mon-rang { background: linear-gradient(135deg, rgba(212, 169, 74, .2), rgba(47, 107, 79, .2)); border: 1px solid rgba(212, 169, 74, .4); border-radius: 12px; padding: .8rem 1rem; margin: .8rem 0; }
.classement { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.classement li { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 12px; }
.classement li.moi { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.classement li.p1 { background: linear-gradient(90deg, rgba(212, 169, 74, .25), var(--nuit-2)); }
.rang { width: 30px; text-align: center; font-weight: 700; color: var(--texte-2); font-size: 1.1rem; }
.mini-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--nuit-3); display: grid; place-items: center; flex: none; } .mini-avatar svg { margin-top: 8px; }

/* ---------- Profil / avatar ---------- */
.editeur { display: flex; flex-direction: column; gap: .8rem; }
.apercu { align-self: center; width: 170px; height: 190px; display: grid; place-items: end center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(212, 169, 74, .3), var(--nuit-3) 70%); border: 3px solid var(--or); }
.option-titre { font-size: .85rem; color: var(--texte-2); margin-bottom: .3rem; font-weight: 600; }
.option-choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille-couleur { width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--ligne); }
.pastille-couleur.actif { border-color: var(--or); }

/* ---------- Organisateur ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .8rem 0; }
.tuile { background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 14px; padding: .9rem; color: var(--texte); }
.tuile b { display: block; font-family: var(--titre); font-size: 1.8rem; color: var(--or-cl); } .tuile small { color: var(--texte-2); }
.liste-valid { display: flex; flex-direction: column; gap: .8rem; margin-top: .6rem; }
.valid { display: grid; grid-template-columns: 120px 1fr; gap: .8rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 14px; padding: .7rem; }
.valid-photo { display: grid; place-items: center; background: #000; border-radius: 10px; overflow: hidden; min-height: 140px; color: var(--texte-2); font-size: .8rem; text-align: center; }
.valid-photo img { width: 100%; height: 100%; object-fit: cover; }
.valid-infos { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; min-width: 0; }
.motif { color: #f0cf7d; font-size: .85rem; }
@media (max-width: 420px) { .valid { grid-template-columns: 1fr; } .valid-photo { min-height: 200px; } .ligne-lieu .ligne-droite .btn { width: 100%; } }

/* ---------- Exploration libre ---------- */
.explo-appel{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;border:1px solid rgba(212,169,74,.55);background:linear-gradient(135deg,rgba(212,169,74,.14),rgba(63,122,87,.14))}
.explo-appel-icone{font-size:2rem;line-height:1}
.explo-appel b{display:block;font-size:1.05rem}
.explo-appel small{display:block;opacity:.8;margin-top:2px}
.explo-appel-fleche{margin-left:auto;font-size:1.4rem;color:#d4a94a}
.gains-explo{margin:10px 0 14px;font-size:.95rem;opacity:.9}
.gains-explo span{color:#d4a94a;font-weight:700}
.choix-milieux{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.choix-milieu{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer}
.choix-milieu.actif{border-color:var(--c);background:rgba(255,255,255,.09)}
.choix-milieu:disabled{opacity:.45;cursor:default}
.choix-milieu .ligne-txt small{display:block;opacity:.75}

/* La carte (Leaflet) reste dans son cadre : elle ne passe jamais au-dessus des fenêtres, de l'en-tête ou de la barre */
.carte-geo { position: relative; z-index: 0; isolation: isolate; }
.revel-sac { margin: .4rem 0 .8rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(212, 169, 74, .12); border: 1px solid rgba(212, 169, 74, .4); font-size: .95rem; }
.revel-actions { display: flex; flex-direction: column; gap: .5rem; }

/* ---------- Quêtes Constellations ---------- */
.ciel { width: 100%; max-height: 280px; display: block; margin: .4rem 0; background: radial-gradient(ellipse at 50% 40%, #1b2d4d 0%, #0b1322 75%); border-radius: 16px; border: 1px solid var(--ligne); }
.ciel.mini { max-height: 130px; }
.ciel-lien { stroke: rgba(255, 255, 255, .18); stroke-width: .5; stroke-dasharray: 1.2 1.2; }
.ciel-lien.on { stroke: #f2cf74; stroke-width: .7; stroke-dasharray: none; filter: drop-shadow(0 0 1.5px #f2cf74); }
.ciel-etoile { cursor: pointer; }
.ciel-etoile .halo { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .15); stroke-width: .3; }
.ciel-etoile .coeur { fill: #6d7a93; }
.ciel-etoile text { fill: #8d9ab3; font-size: 3.2px; font-family: inherit; }
.ciel-etoile.on .halo { fill: rgba(242, 207, 116, .22); stroke: #f2cf74; }
.ciel-etoile.on .coeur { fill: #fff3c4; filter: drop-shadow(0 0 2px #f2cf74); }
.ciel-etoile.on text { fill: #f2cf74; }
.ciel-etoile.choisie .halo { stroke: #fff; stroke-width: .6; }
.liste-quetes { display: flex; flex-direction: column; gap: 1rem; }
.villes { display: flex; flex-direction: column; gap: .5rem; }
.repere-etoile { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1b2d4d; color: #8d9ab3; border: 2px solid #8d9ab3; font-size: 16px; }
.repere-etoile.on { background: #f2cf74; color: #2b1d0e; border-color: #fff; }
.choix-quiz { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.correction { text-align: left; margin: .6rem 0; }
.correction p { margin: .5rem 0; }
.barre a { font-size: .72rem; }
.prix { text-align: center; font-size: 1.15rem; margin: .4rem 0 .6rem; }
.prix s { opacity: .55; margin-right: .3rem; }
.prix b { color: var(--or); font-size: 1.35rem; }
.autres-villes { margin-top: .6rem; }
.autres-villes summary { cursor: pointer; color: var(--or-cl); padding: .4rem 0; }

/* Carnet de nature */
.btn-capture { width: 100%; margin-top: .6rem; }
.lien-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.capture-apercu { width: 100%; max-height: 34vh; object-fit: cover; border-radius: 14px; margin-bottom: .6rem; display: block; }
.choix-nature { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.choix-cat { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .4rem; border-radius: 14px; border: 2px solid var(--c); background: rgba(255,255,255,.04); color: var(--texte); font: inherit; font-size: .85rem; cursor: pointer; }
.choix-cat span { font-size: 1.9rem; }
.conseil-nature { background: rgba(212,169,74,.12); border: 1px solid rgba(212,169,74,.4); border-radius: 12px; padding: .55rem .75rem; font-size: .85rem; margin: .5rem 0; }
.liste-especes { display: flex; flex-direction: column; gap: .4rem; max-height: 38vh; overflow-y: auto; margin: .6rem 0; }
.ligne-espece { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 12px; color: var(--texte); text-align: left; width: 100%; cursor: pointer; font: inherit; }
.ligne-espece[hidden] { display: none; }
.rarete-espece { flex: none; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--texte-2); white-space: nowrap; }
.rarete-espece.r-peu_commune { background: rgba(58,124,165,.25); color: #bfe0f5; }
.rarete-espece.r-rare { background: rgba(160,90,200,.25); color: #e3c6f5; }
.rarete-espece.r-tres_rare { background: rgba(212,169,74,.28); color: var(--or-cl); }
.especes-autres { display: flex; flex-direction: column; gap: .4rem; border-top: 1px solid var(--ligne); padding-top: .6rem; }
.especes-autres .rangee input { flex: 2; }
.capture-resultat { text-align: center; margin: .4rem 0 .8rem; }
.capture-resultat b { display: block; font-size: 1.1rem; margin: .2rem 0; }
.jauge-carnet { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: .3rem 0 .7rem; }
.jauge-carnet > div { height: 100%; background: linear-gradient(90deg, var(--foret-cl), var(--or)); }
.grille-especes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.case-espece { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .35rem; border-radius: 12px; border: 1px dashed rgba(233,220,192,.18); background: rgba(255,255,255,.02); color: var(--texte-2); font: inherit; cursor: pointer; min-width: 0; }
.case-espece img, .case-espece .case-icone { width: 100%; aspect-ratio: 1; border-radius: 9px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: rgba(0,0,0,.2); }
.case-espece small { font-size: .7rem; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.case-espece:not(.vue) .case-icone { opacity: .35; }
.case-espece.vue { border: 1px solid rgba(212,169,74,.45); color: var(--texte); background: var(--nuit-2); }
.case-espece.vue.r-rare { border-color: rgba(160,90,200,.7); } .case-espece.vue.r-tres_rare { border-color: var(--or); box-shadow: 0 0 10px rgba(212,169,74,.35); }
.fiche-espece { text-align: center; }

/* Achat */
.achat { text-align: center; }
.achat-liste { text-align: left; margin: .6rem 0; padding-left: 1.2rem; font-size: .9rem; }
.achat-liste li { margin: .25rem 0; }
.achat .case { text-align: left; margin: .8rem 0; font-size: .85rem; }

/* Mot de passe visible / masqué */
.champ-mdp { position: relative; display: block; width: 100%; }
.champ-mdp input { padding-right: 3rem; }
.oeil { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 1.15rem; padding: .35rem; cursor: pointer; line-height: 1; }

/* Énigme d'une étoile */
.enigme { font-family: var(--titre); font-size: 1.15rem; line-height: 1.5; font-style: italic; padding: 12px 14px; border-left: 3px solid var(--sable); background: rgba(212,169,74,.08); border-radius: 8px; white-space: pre-line; }
.info-cascade { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(120,180,230,.1); border: 1px solid rgba(120,180,230,.3); }
.info-cascade p { margin: 0 0 8px; }
.avis-ia { font-size: .9rem; margin: .4rem 0; padding: 6px 10px; border-radius: 8px; background: rgba(212,169,74,.1); }
.proposee { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(212,169,74,.35); margin: .5rem 0; text-align: left; }
.proposee .ligne-txt { flex: 1; }
.proposee-icone { font-size: 1.8rem; }
.alternatives { display: grid; gap: 6px; margin-bottom: .6rem; }
.alt-espece { all: unset; cursor: pointer; display: block; }
.alt-espece .proposee { border-color: rgba(255,255,255,.12); margin: 0; }
.choix-cat.actif { outline: 2px solid var(--sable); }
.capture [data-aucune] { width: 100%; }

/* =====================================================================
   Thème « Nuit d'expédition » — illustrations peintes, laiton et verre
   ===================================================================== */
:root { --laiton: #d9b15c; --laiton-cl: #f3d68f; --laiton-fonce: #8c6a2a; --verre: rgba(9, 16, 30, .72); --verre-2: rgba(16, 27, 48, .82); --filet: rgba(217, 177, 92, .30); }
body { background: #070d18; }
.fond-peint { position: fixed; inset: 0; z-index: -2; background:
  linear-gradient(180deg, rgba(7, 13, 24, .15) 0%, rgba(7, 13, 24, .35) 32%, rgba(7, 13, 24, .88) 62%, #070d18 100%),
  var(--fond-image, none) center top / cover no-repeat, #070d18; }
@media (min-width: 700px) { .fond-peint { background:
  linear-gradient(180deg, rgba(7, 13, 24, .3), rgba(7, 13, 24, .92) 60%), var(--fond-image, none) center 20% / cover no-repeat, #070d18; } }
.ico { width: 24px; height: 24px; flex: none; }

/* En-tête : transparent sur l'illustration */
.entete { background: linear-gradient(180deg, rgba(7, 13, 24, .75), rgba(7, 13, 24, 0)); border-bottom: 0; backdrop-filter: none; }
.marque { font-size: .9rem; letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.marque-logo { width: 20px; height: 20px; color: var(--laiton); }
.btn-rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--laiton-cl); background: var(--verre); border: 1px solid var(--filet); backdrop-filter: blur(6px); }
.btn-rond .ico { width: 20px; height: 20px; }
.btn-rond.actif { background: var(--laiton); color: #1a1408; }
.entete-avatar { border-color: var(--laiton); box-shadow: 0 0 0 3px rgba(217, 177, 92, .18); }

/* Barre du bas : 4 onglets + bouton Capturer en laiton */
.barre { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; background: rgba(7, 12, 22, .94); border-top: 1px solid var(--filet); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.barre a { gap: 3px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.barre a .ico { width: 24px; height: 24px; opacity: .75; }
.barre a.actif { color: var(--laiton-cl); } .barre a.actif .ico { opacity: 1; filter: drop-shadow(0 0 6px rgba(217, 177, 92, .5)); }
.barre-capture { justify-self: center; width: 64px; height: 64px; margin-top: -26px; border-radius: 50%; border: 3px solid #070c16; cursor: pointer; display: grid; place-items: center; color: #1a1408;
  background: radial-gradient(circle at 35% 30%, #fbe7b0, var(--laiton) 55%, var(--laiton-fonce)); box-shadow: 0 0 0 1px rgba(243, 214, 143, .6), 0 6px 18px rgba(0, 0, 0, .55), 0 0 22px rgba(217, 177, 92, .35); }
.barre-capture .ico { width: 28px; height: 28px; stroke-width: 1.9; }
.barre-capture:active { transform: scale(.94); }

/* Panneaux de verre à filet doré, coins ouvragés */
.panneau { position: relative; display: block; background: var(--verre); border: 1px solid var(--filet); border-radius: 18px; padding: 14px; color: var(--texte); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 10px 28px rgba(0, 0, 0, .35); margin-top: 12px; }
.panneau::before, .panneau::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--laiton); opacity: .85; pointer-events: none; }
.panneau::before { top: 5px; left: 5px; border-top: 1.5px solid; border-left: 1.5px solid; border-top-left-radius: 8px; }
.panneau::after { bottom: 5px; right: 5px; border-bottom: 1.5px solid; border-right: 1.5px solid; border-bottom-right-radius: 8px; }
a.panneau:active, button.panneau:active { transform: scale(.985); }
.bloc { background: var(--verre); border-color: var(--filet); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.titre-section { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 26px 0 4px; font-family: var(--titre); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--laiton-cl); }
.ornement { width: 120px; height: 10px; color: var(--laiton); opacity: .8; }
.etiquette { position: absolute; left: 14px; top: 12px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--laiton-cl); }
.etiquette-or { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--laiton); }
.or { color: var(--laiton-cl); font-weight: 800; }
.sous { display: block; color: var(--texte-2); margin-top: 4px; }

/* Boutons en laiton */
.btn { background: linear-gradient(180deg, #f6dc98 0%, var(--laiton) 48%, #b58a3a 100%); color: #1d1608; font-weight: 800; letter-spacing: .02em; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 0 #6e5220, 0 8px 18px rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #6e5220; }
.btn-sec { background: var(--verre-2); color: var(--sable); border: 1px solid var(--filet); box-shadow: 0 3px 0 rgba(0, 0, 0, .5); text-shadow: none; }
.btn-large { min-height: 52px; }

/* Camp */
.camp-tete { padding: 34vh 2px 4px; text-shadow: 0 2px 14px rgba(0, 0, 0, .85); }
@media (min-width: 700px) { .camp-tete { padding-top: 26vh; } }
.camp-salut { display: block; font-size: .9rem; font-weight: 600; color: var(--sable); opacity: .9; }
.camp-titre { margin: 2px 0 0; font-family: var(--titre); font-size: 1.85rem; line-height: 1.12; color: #fbf3e0; }
.aventurier { display: flex; align-items: center; gap: 14px; }
.aventurier-avatar { width: 70px; height: 70px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: end center; border: 2px solid var(--laiton); background: radial-gradient(circle at 50% 40%, rgba(217, 177, 92, .3), #14223a 70%); box-shadow: 0 0 0 4px rgba(217, 177, 92, .12); }
.aventurier-infos { flex: 1; min-width: 0; } .aventurier-infos small { color: var(--texte-2); }
.aventurier-ligne { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.jauge { height: 8px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(217, 177, 92, .25); }
.jauge > div { background: linear-gradient(90deg, #b58a3a, var(--laiton-cl)); box-shadow: 0 0 8px rgba(217, 177, 92, .6); }
.jauge.fine { height: 5px; margin: 8px 0 4px; }
.quete-vedette { padding: 0; overflow: hidden; border-color: rgba(217, 177, 92, .5); }
.quete-ciel { position: relative; height: 120px; background: radial-gradient(ellipse at 50% 120%, rgba(217, 177, 92, .12), transparent 60%), rgba(4, 9, 18, .55); border-bottom: 1px solid var(--filet); }
.ciel-mini { position: absolute; inset: 8px 0 0; width: 100%; height: 112px; }
.ciel-mini line { stroke: rgba(243, 214, 143, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.ciel-mini line.on { stroke: var(--laiton-cl); stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(243, 214, 143, .8)); }
.ciel-mini circle { fill: none; stroke: rgba(233, 220, 192, .45); stroke-width: 1.4; }
.ciel-mini circle.on { fill: #fff3c4; stroke: none; filter: drop-shadow(0 0 5px #f3d68f); }
.quete-corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.quete-corps small { color: var(--texte-2); }
.quete-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.quete-ligne span { color: var(--texte-2); font-size: .85rem; }
.quete-nom { font-family: var(--titre); font-size: 1.15rem; color: #fbf3e0; }
.quete-corps .btn { margin: 8px 0 0; }
.tuiles-jour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tuile-jour { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 12px; min-height: 108px; }
.tuile-jour .ico { width: 28px; height: 28px; color: var(--laiton-cl); }
.tuile-jour b { font-size: .95rem; } .tuile-jour small { color: var(--texte-2); font-size: .75rem; line-height: 1.25; }
.panneau .emplacements { margin: 0; }
.milieux { margin: 0; }
.conseil { display: flex; gap: 12px; align-items: center; background: rgba(20, 44, 36, .72); border-color: rgba(110, 190, 150, .35); }
.conseil .ico { color: #8fd3b0; width: 28px; height: 28px; } .conseil p { margin: 0; font-size: .88rem; }
.lien-panneau { display: flex; align-items: center; gap: 12px; color: var(--sable); }
.lien-panneau .ico { color: var(--laiton); } .lien-panneau span { flex: 1; font-weight: 600; }
.retour { display: inline-flex; align-items: center; gap: 4px; color: var(--laiton-cl); font-weight: 600; }
.retour .ico { width: 18px; height: 18px; }

/* Le Cabinet du Conservateur */
.conservateur { display: flex; gap: 14px; align-items: center; }
.conservateur p { margin: 4px 0 0; font-size: .9rem; font-style: italic; color: var(--sable); }
.conservateur-portrait { width: 64px; height: 64px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--laiton-cl); background: radial-gradient(circle at 50% 35%, rgba(217, 177, 92, .25), #1a2338 70%); border: 1px solid rgba(217, 177, 92, .5); }
.conservateur-portrait .ico { width: 38px; height: 38px; stroke-width: 1.3; }
.collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.collection { margin: 0; display: flex; flex-direction: column; gap: 4px; min-height: 170px; text-align: left; font: inherit; cursor: pointer; padding: 16px 14px; }
.collection .ico { width: 32px; height: 32px; margin-bottom: 6px; }
.collection b { font-size: 1rem; } .collection small { color: var(--texte-2); font-size: .78rem; }
.collection em { margin-top: auto; font-style: normal; font-weight: 700; font-size: .8rem; }
.collection .jauge { margin-top: auto; }
.c-nature { background: rgba(14, 38, 30, .78); border-color: rgba(110, 190, 150, .4); } .c-nature .ico { color: #8fd3b0; } .c-nature .jauge > div { background: #8fd3b0; box-shadow: none; }
.c-cartes .ico { color: var(--laiton-cl); }
.c-timbres { background: rgba(44, 22, 28, .78); border: 1px dashed rgba(230, 150, 140, .5); color: var(--texte); } .c-timbres .ico { color: #f0a89c; }
.c-equip { background: rgba(40, 30, 18, .78); border-color: rgba(200, 150, 100, .4); } .c-equip .ico { color: #e2b98a; }
.bientot { margin-top: auto; align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1a0f0c; background: #f0a89c; padding: 3px 9px; border-radius: 20px; }

/* Les autres écrans restent lisibles sur l'illustration */
.vue > .titre:first-child, .vue > .retour:first-child { margin-top: 10px; }
.titre { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.onglets, .ligne-lieu, .mission, .objet, .stat, .classement li, .choix, .case-espece.vue, .radar, .securite { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.onglets, .ligne-lieu, .mission, .objet, .stat, .classement li, .radar { background: var(--verre); border-color: var(--filet); }
.fenetre { background: linear-gradient(180deg, #121d33, #0b1424); border-color: var(--filet); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
.fenetre::before { content: ''; position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: rgba(217, 177, 92, .45); }
html { background: #070d18; }
body { background: transparent; }
.barre a span { font-size: .7rem; line-height: 1.2; filter: none; opacity: 1; transform: none; }
.barre a.actif span { transform: none; }
.camp-tete.compact { padding-top: 14vh; }

/* ---------- Événement : la Nuit des Lanternes ---------- */
body[data-fond="lanternes"] { --citrouille: #ee8a3c; --citrouille-cl: #ffbe7d; }
body[data-fond="lanternes"] .fond-peint { background:
  linear-gradient(180deg, rgba(14, 8, 20, .1) 0%, rgba(14, 8, 20, .35) 30%, rgba(14, 8, 20, .9) 62%, #0e0814 100%),
  var(--fond-image, none) center top / cover no-repeat, #0e0814; }
body[data-fond="lanternes"] .titre-section { color: var(--citrouille-cl); }
body[data-fond="lanternes"] .ornement { color: var(--citrouille); }
.lanterne { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #6f6680; background: rgba(0, 0, 0, .35); border: 1px dashed rgba(255, 190, 125, .35); }
.lanterne .ico { width: 24px; height: 24px; }
.lanterne.allumee { color: #2a1406; border: 0; background: radial-gradient(circle at 50% 45%, #ffe2a8, #ee8a3c 60%, #9b4a14); box-shadow: 0 0 14px rgba(238, 138, 60, .8), 0 0 28px rgba(238, 138, 60, .35); }
.rangee-lanternes { display: flex; gap: 8px; margin-top: 10px; }
.banniere-evt { background: rgba(30, 14, 34, .82); border-color: rgba(238, 138, 60, .55); display: flex; flex-direction: column; gap: 3px; }
.banniere-evt::before, .banniere-evt::after { border-color: #ee8a3c; }
.evt-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.etiquette-evt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #ffbe7d; }
.pastille-evt { font-size: .72rem; font-weight: 800; color: #2a1406; background: #ee8a3c; padding: 2px 9px; border-radius: 20px; }
.evt-titre { font-family: var(--titre); font-size: 1.2rem; color: #fff1e0; }
.banniere-evt small { color: #d6c3d9; }
.evt-accroche { margin: 6px 0 0; color: #f1e3e8; font-size: .95rem; }
.evt-progression { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: rgba(30, 14, 34, .82); border-color: rgba(238, 138, 60, .45); }
.evt-progression .rangee-lanternes { margin: 0 0 4px; } .evt-progression small { color: #d6c3d9; }
.ligne-lanterne { display: flex; align-items: center; gap: 12px; background: rgba(24, 12, 30, .8); border-color: rgba(238, 138, 60, .3); }
.ligne-lanterne.allumee { border-color: rgba(238, 138, 60, .7); }
.ligne-lanterne .ligne-txt small { color: #d6c3d9; }
.actions-lanterne { display: flex; flex-direction: column; gap: 6px; flex: none; }
.actions-lanterne .btn, .ligne-lanterne > .btn { margin: 0; }
.ligne-lanterne .btn .ico { width: 20px; height: 20px; }
.coche-or { color: #ffbe7d; font-size: 1.4rem; font-weight: 800; padding: 0 6px; }
.revele-lanternes { text-align: center; background: rgba(24, 12, 30, .82); border-color: rgba(238, 138, 60, .45); }
.revele-lanternes .btn .ico { width: 22px; height: 22px; }
body[data-fond="lanternes"] .btn:not(.btn-sec) { background: linear-gradient(180deg, #ffd3a1 0%, #ee8a3c 50%, #b9601f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #7a3a10, 0 8px 18px rgba(0, 0, 0, .35); color: #2a1406; }
.repere-lanterne { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #ffbe7d; background: #24122c; border: 2px solid #ee8a3c; }
.repere-lanterne .ico { width: 20px; height: 20px; }
.repere-lanterne.allumee { background: #ee8a3c; color: #2a1406; box-shadow: 0 0 12px rgba(238, 138, 60, .9); }
.evt-carte { width: 160px; margin: 6px auto 0; }
.lanterne-gros { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; color: #2a1406; background: radial-gradient(circle at 50% 45%, #ffe2a8, #ee8a3c 60%, #9b4a14); box-shadow: 0 0 30px rgba(238, 138, 60, .8); animation: flamme 1.6s ease-in-out infinite alternate; }
.lanterne-gros .ico { width: 46px; height: 46px; }
@keyframes flamme { from { box-shadow: 0 0 22px rgba(238, 138, 60, .6); } to { box-shadow: 0 0 40px rgba(238, 138, 60, 1); } }
.attente > .ico { width: 44px; height: 44px; color: #ffbe7d; animation: tourne 1.6s ease-in-out infinite; }
.entete { background: linear-gradient(180deg, rgba(7, 13, 24, .92), rgba(7, 13, 24, .55)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-fond="lanternes"] .entete { background: linear-gradient(180deg, rgba(14, 8, 20, .92), rgba(14, 8, 20, .55)); }

/* Icônes dessinées à la taille du texte (milieux, Carnet, équipements, familles) */
.ico-em { width: 1em; height: 1em; vertical-align: -.14em; }
.boussole .ico { width: 44px; height: 44px; color: var(--laiton-cl); }
.gros-emoji .ico { width: 3rem; height: 3rem; color: var(--laiton-cl); }
.pastille, .lieu-icone, .choix-cat span, .milieu span, .case-icone, .objet-icone, .proposee-icone { color: #f6ecd6; }
.pastille .ico, .milieu span .ico { stroke-width: 1.5; }
.repere span { color: #fff; display: grid; place-items: center; } .repere span .ico { width: 18px; height: 18px; }
.carte-embleme .ico { color: #f7e9c4; stroke-width: 1.2; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.objet-icone .ico { width: 2.2rem; height: 2.2rem; color: var(--laiton-cl); }
.objet.verrou .objet-icone .ico { color: var(--texte-2); }
.equip .ico { color: var(--laiton-cl); }
.case-espece:not(.vue) .case-icone .ico { opacity: .6; }
.btn .ico { width: 20px; height: 20px; }

/* =====================================================================
   Le Coffre du Conservateur : pochette, déchirure, faisceau, carte qui se retourne
   ===================================================================== */
.entree-coffre { display: flex; align-items: center; gap: 14px; border-color: rgba(217, 177, 92, .55); background: linear-gradient(120deg, rgba(40, 28, 12, .85), rgba(14, 22, 40, .85)); }
.entree-coffre > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; } .entree-coffre small { color: var(--texte-2); }
.entree-coffre > .ico { color: var(--laiton); }
.mini-pochette { width: 46px; height: 62px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #3a2a0c; background: linear-gradient(135deg, #f7df9c, #c9973f 45%, #f3d68f 60%, #9c7023); box-shadow: 0 0 14px rgba(217, 177, 92, .5), inset 0 0 0 1px rgba(255, 255, 255, .4); position: relative; overflow: hidden; }
.mini-pochette::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%); animation: reflet 3.2s ease-in-out infinite; }
.mini-pochette .ico { width: 26px; height: 26px; }

.coffre-tete { padding-top: 6vh; text-align: center; }
.sceaux { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.sceaux small { color: var(--texte-2); margin-left: 6px; }
.sceau { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(217, 177, 92, .5); }
.sceau.plein { background: radial-gradient(circle at 35% 30%, #fbe7b0, var(--laiton) 60%, #7d5b1c); border-color: transparent; box-shadow: 0 0 8px rgba(217, 177, 92, .7); }

.scene-coffre { position: relative; height: 430px; display: grid; place-items: center; perspective: 1100px; margin-top: 6px; }
.scene-coffre::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 177, 92, .22), transparent 65%); filter: blur(6px); animation: halo 3s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.08); opacity: .7; } }
.consigne { text-align: center; color: var(--laiton-cl); font-weight: 700; letter-spacing: .04em; min-height: 1.4em; animation: clignote 1.8s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: .45; } }
.coffre-ferme { text-align: center; color: var(--texte-2); } .coffre-ferme .ico { width: 54px; height: 54px; color: var(--laiton); }

/* La pochette scellée */
.pochette { position: relative; width: 220px; height: 330px; cursor: pointer; transform-style: preserve-3d; animation: flotte 4s ease-in-out infinite; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(-8deg); } 50% { transform: translateY(-10px) rotateX(-2deg) rotateY(8deg); } }
.pochette-haut, .pochette-corps { position: absolute; left: 0; right: 0; background:
  linear-gradient(135deg, #1b2a4a 0%, #0d1830 40%, #22355c 55%, #0d1830 100%); border: 2px solid #d9b15c; }
.pochette-haut { top: 0; height: 40px; border-radius: 14px 14px 0 0; border-bottom: 0; transition: transform .55s cubic-bezier(.3, .1, .3, 1), opacity .55s;
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x; mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x;
  background-image: repeating-linear-gradient(90deg, rgba(217, 177, 92, .25) 0 2px, transparent 2px 10px), linear-gradient(135deg, #1b2a4a, #0d1830); }
.pochette-corps { top: 34px; bottom: 0; border-radius: 0 0 14px 14px; border-top: 1px dashed rgba(217, 177, 92, .7); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: transform .6s ease-in, opacity .6s; }
.pochette-corps::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(217, 177, 92, .45); border-radius: 8px; }
.pochette-reflet { position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 190, .35) 50%, transparent 58%); animation: reflet 3.6s ease-in-out infinite; }
@keyframes reflet { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.pochette-sceau { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #3a2a0c; background: radial-gradient(circle at 35% 30%, #fbe7b0, #d9b15c 55%, #8c6a2a); box-shadow: 0 0 0 4px rgba(217, 177, 92, .25), 0 0 26px rgba(217, 177, 92, .55), inset 0 -4px 8px rgba(0, 0, 0, .3); }
.pochette-sceau .ico { width: 50px; height: 50px; stroke-width: 1.4; }
.pochette-titre { font-family: var(--titre); text-align: center; color: #f6e2ae; font-size: 1.15rem; line-height: 1.2; letter-spacing: .06em; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.pochette-pied { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 226, 174, .7); }
.pochette.tremble { animation: tremble .12s linear infinite; }
@keyframes tremble { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 50% { transform: translate(2px, -2px) rotate(1deg); } 75% { transform: translate(-2px, 2px) rotate(-.5deg); } }
.pochette.dechiree { animation: none; }
.pochette.dechiree .pochette-haut { transform: translate(120px, -140px) rotate(38deg); opacity: 0; }
.pochette.dechiree .pochette-corps { transform: translateY(160px) scale(.92); opacity: 0; transition-delay: .35s; }

/* Faisceau de lumière et étincelles (couleur selon la rareté) */
.faisceau { position: absolute; left: 50%; top: 50%; width: 60px; height: 520px; margin: -260px 0 0 -30px; border-radius: 50%; filter: blur(14px); opacity: 0; animation: faisceau 1.1s ease-out forwards; background: radial-gradient(ellipse, #fff 0%, #ffe9b0 30%, transparent 70%); }
.faisceau.r-rare { background: radial-gradient(ellipse, #fff 0%, #8fd0ff 35%, transparent 70%); }
.faisceau.r-epique { background: radial-gradient(ellipse, #fff 0%, #c79bff 35%, transparent 70%); width: 90px; margin-left: -45px; }
.faisceau.r-ultra { background: radial-gradient(ellipse, #fff 0%, #ffd36b 20%, #ff7ad9 40%, #6be0ff 55%, transparent 72%); width: 140px; margin-left: -70px; }
@keyframes faisceau { 0% { opacity: 0; transform: scaleY(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1.2) scaleX(3); } }
.etincelles { position: absolute; left: 50%; top: 50%; }
.etincelles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px #ffd36b; animation: etincelle var(--t) ease-out forwards; }
.etincelles i:nth-child(3n) { background: #fff; width: 4px; height: 4px; }
.scene-coffre[data-rarete="rare"] .etincelles i { background: #bfe6ff; box-shadow: 0 0 8px #6cc2ff; }
.scene-coffre[data-rarete="epique"] .etincelles i { background: #e3cbff; box-shadow: 0 0 10px #b07bff; }
.scene-coffre[data-rarete="ultra"] .etincelles i:nth-child(4n) { background: #ff9be3; } .scene-coffre[data-rarete="ultra"] .etincelles i:nth-child(4n+1) { background: #8cf0ff; }
@keyframes etincelle { 0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; } }

/* La carte tirée : sort face cachée, puis se retourne */
.tirage { position: absolute; width: 210px; aspect-ratio: 63 / 88; cursor: pointer; perspective: 1000px; transform: translateY(120px) scale(.6); opacity: 0; transition: transform .8s cubic-bezier(.2, 1.3, .4, 1), opacity .4s; }
.tirage.sorti { transform: translateY(0) scale(1); opacity: 1; }
.tirage-int { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, 1.4, .4, 1); animation: flotte-carte 3s ease-in-out infinite; }
@keyframes flotte-carte { 50% { translate: 0 -8px; } }
.tirage.devoile .tirage-int { transform: rotateY(180deg); }
.tirage-dos, .tirage-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; }
.tirage-dos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #f6e2ae; border: 3px solid #d9b15c;
  background: radial-gradient(circle at 50% 42%, rgba(217, 177, 92, .25), transparent 55%), repeating-conic-gradient(from 0deg, #0f1a33 0 10deg, #13213f 10deg 20deg); box-shadow: 0 0 24px rgba(217, 177, 92, .45); }
.tirage-dos .ico { width: 70px; height: 70px; stroke-width: 1.2; color: var(--laiton-cl); }
.tirage-dos span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.tirage-face { transform: rotateY(180deg); }
.tirage-face > .carte { width: 100%; height: 100%; }
.tirage.r-rare.devoile .tirage-face { box-shadow: 0 0 30px rgba(108, 194, 255, .7); }
.tirage.r-epique.devoile .tirage-face { box-shadow: 0 0 40px rgba(176, 123, 255, .85); }
.tirage.r-ultra.devoile .tirage-face { box-shadow: 0 0 50px rgba(255, 211, 107, .9), 0 0 90px rgba(255, 122, 217, .5); animation: pulse-ultra 1.6s ease-in-out infinite; }
@keyframes pulse-ultra { 50% { box-shadow: 0 0 70px rgba(107, 224, 255, .9), 0 0 120px rgba(255, 122, 217, .6); } }
.gain-special { width: 100%; height: 100%; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; box-sizing: border-box; border: 3px solid #d9b15c; background: radial-gradient(circle at 50% 35%, #3a2a0c, #120c04 75%); color: #f6e2ae; }
.gain-special b { font-family: var(--titre); font-size: 1.7rem; color: #ffe7a8; text-shadow: 0 0 18px rgba(255, 211, 107, .7); }
.gain-special small { color: #d8c79c; }
.gain-special .ico { width: 64px; height: 64px; color: #ffe7a8; }
.gain-special.joker { background: radial-gradient(circle at 50% 35%, #123049, #06101c 75%); border-color: #6cc2ff; }
.xp-pieces { font-size: 4rem; color: #ffd36b; text-shadow: 0 0 24px #ffd36b; animation: tourne-piece 2.4s linear infinite; display: inline-block; }
@keyframes tourne-piece { to { transform: rotateY(360deg); } }

/* Éclair blanc, bandeau et pluie dorée pour les grandes raretés */
.scene-coffre.eclair::after { content: ''; position: fixed; inset: 0; z-index: 30; background: #fff; pointer-events: none; animation: eclair .7s ease-out forwards; }
@keyframes eclair { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
.bandeau-ultra { position: absolute; top: 4px; left: 50%; transform: translateX(-50%) scale(.6); z-index: 5; padding: 6px 18px; border-radius: 30px; font-family: var(--titre); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; color: #1a1208;
  background: linear-gradient(90deg, #ffd36b, #ff9be3, #8cf0ff, #ffd36b); background-size: 300% 100%; animation: bandeau .6s cubic-bezier(.2, 1.6, .4, 1) .3s forwards, arcenciel 2.5s linear infinite; opacity: 0; box-shadow: 0 0 24px rgba(255, 211, 107, .8); }
@keyframes bandeau { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes arcenciel { to { background-position: 300% 0; } }
.pluie { position: absolute; inset: -40px -20px; pointer-events: none; overflow: hidden; }
.pluie i { position: absolute; top: -20px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; background: #ffd36b; opacity: .9; animation: chute var(--t) linear var(--dl) infinite; }
.pluie i:nth-child(3n) { background: #8cf0ff; } .pluie i:nth-child(3n+1) { background: #ff9be3; }
@keyframes chute { to { transform: translateY(520px) rotate(540deg); } }
.apres-tirage { text-align: center; margin: 6px 0 4px; animation: apparait .5s ease-out; }
.apres-tirage b { display: block; font-family: var(--titre); color: #fbf3e0; font-size: 1.05rem; margin-bottom: 6px; }
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } }
.coffre-infos small { color: var(--texte-2); }
.chances { margin-top: 10px; } .chances summary { cursor: pointer; color: var(--laiton-cl); font-weight: 700; padding: 4px 0; }
.chances div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--ligne); font-size: .88rem; }

/* Cartes en pleine image (collection du Conservateur) */
.carte-pleine { padding: 0; background: #111; }
.carte-pleine > img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.carte-pleine .carte-holo { display: none; border-radius: 12px; }
.carte-pleine.r-epique .carte-holo, .carte-pleine.r-ultra .carte-holo { display: block; }
.carte.r-ultra { box-shadow: 0 0 18px rgba(255, 211, 107, .6), 0 0 34px rgba(255, 122, 217, .35); }
.carte.r-ultra .carte-holo { opacity: .55; background: linear-gradient(115deg, transparent 15%, rgba(255, 120, 200, .45) 30%, rgba(120, 240, 255, .45) 42%, rgba(255, 230, 120, .45) 54%, rgba(160, 120, 255, .4) 66%, transparent 80%); background-size: 260% 260%; }
.carte-ex { position: absolute; z-index: 3; right: 6px; bottom: 6px; font-size: 9px; font-weight: 800; color: #1a1408; background: rgba(243, 214, 143, .9); padding: 1px 6px; border-radius: 8px; }

/* Portrait du Conservateur en médaillon doré */
.medaillon { display: inline-block; flex: none; width: 40px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 35%, #5a4426, #1a1408);
  box-shadow: 0 0 0 2px #d9b15c, 0 0 0 4px rgba(58, 42, 12, .55), 0 0 18px rgba(217, 177, 92, .45); }
.medaillon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.medaillon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0, 0, 0, .55); background: radial-gradient(circle at 30% 20%, rgba(255, 240, 200, .18), transparent 45%); pointer-events: none; }
.medaillon.grand { width: 76px; box-shadow: 0 0 0 2px #e8c776, 0 0 0 5px rgba(58, 42, 12, .6), 0 0 0 6px rgba(217, 177, 92, .5), 0 0 24px rgba(217, 177, 92, .45); }
.mini-pochette .medaillon { width: 32px; box-shadow: 0 0 0 2px #7a5a1c, 0 0 8px rgba(0, 0, 0, .35); }
.pochette-sceau .medaillon { width: 74px; box-shadow: 0 0 0 2px #7a5a1c, inset 0 0 0 1px rgba(255, 255, 255, .3); }
.tirage-dos .medaillon { width: 112px; }
.coffre-test { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 99px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd36b; border: 1px solid rgba(255, 211, 107, .5); }

/* ---------------------------------------------------------------- Saison : trésors à gagner */
.banniere-saison { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; background: linear-gradient(110deg, rgba(58, 40, 12, .85), rgba(16, 22, 38, .85)); border-color: rgba(217, 177, 92, .6); }
.banniere-saison > .ico:last-child { flex: none; color: var(--laiton-cl); }
.bs-photo { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px rgba(217, 177, 92, .6), 0 6px 18px rgba(0, 0, 0, .5); }
.bs-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bs-titre { font-family: var(--titre); font-size: 1.12rem; color: #fbf3e0; }
.bs-corps small { color: var(--texte-2); line-height: 1.35; }
.pastille-saison { font-size: .7rem; font-weight: 800; color: #2a1d06; background: linear-gradient(135deg, #f6dc94, #d9b15c); padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.evt-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.tresors-tete { text-align: center; }
.compte-saison { display: inline-block; margin: 8px auto 4px; padding: 6px 16px; border-radius: 99px; font-weight: 800; letter-spacing: .02em; color: #2a1d06;
  background: linear-gradient(135deg, #f6dc94, #d9b15c 55%, #f3d68f); box-shadow: 0 0 22px rgba(217, 177, 92, .45); }
.mon-rang-saison { display: flex; align-items: center; gap: 16px; }
.grand-rang { display: block; font-family: var(--titre); font-size: 2.2rem; line-height: 1; color: var(--laiton-cl); }
.mrs-droite { display: flex; flex-direction: column; gap: 3px; }
.mrs-droite small { color: var(--texte-2); }

.lots-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lot-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #0c1220;
  box-shadow: 0 0 0 1px rgba(217, 177, 92, .45), 0 10px 26px rgba(0, 0, 0, .55); }
.lot-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lot-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 16, .75)); pointer-events: none; }
.lot:hover .lot-photo img { transform: scale(1.04); }
.lot-rang { position: absolute; z-index: 1; left: 8px; bottom: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fbf3e0;
  background: rgba(10, 14, 26, .7); border: 1px solid rgba(217, 177, 92, .6); padding: 3px 9px; border-radius: 99px; backdrop-filter: blur(4px); }
.lot figcaption { display: flex; flex-direction: column; gap: 2px; }
.lot figcaption b { font-size: .88rem; color: #fbf3e0; line-height: 1.25; }
.lot figcaption small { font-size: .74rem; color: var(--texte-2); line-height: 1.3; }
.lot-or .lot-photo { box-shadow: 0 0 0 2px #d9b15c, 0 0 28px rgba(217, 177, 92, .45), 0 10px 26px rgba(0, 0, 0, .55); }
.lot-or .lot-rang { color: #2a1d06; background: linear-gradient(135deg, #f6dc94, #d9b15c); border-color: transparent; }
.lot-or .lot-photo::before { content: ''; position: absolute; z-index: 1; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255, 240, 200, .35) 50%, transparent 58%); animation: reflet 4.5s ease-in-out infinite; pointer-events: none; }

.lot-exploit { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: start; }
.lot-exploit .lot figcaption small { display: none; }
.exploit-txt { display: flex; flex-direction: column; gap: 10px; }
.exploit-txt > b { color: #fbf3e0; font-size: .92rem; line-height: 1.35; }
.exploit-libre { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9fe0b0; border: 1px dashed rgba(159, 224, 176, .6); padding: 4px 10px; border-radius: 99px; }
.exploit-gagnant { display: flex; align-items: center; gap: 8px; color: var(--laiton-cl); }

.medaille { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #2a1d06; }
.medaille.m1 { background: radial-gradient(circle at 35% 30%, #fff1c2, #d9b15c 60%, #9c7023); box-shadow: 0 0 12px rgba(217, 177, 92, .6); }
.medaille.m2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c4ccd8 60%, #7d8696); }
.medaille.m3 { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c98a52 60%, #7d4f25); }
.medaille.m4 { background: radial-gradient(circle at 35% 30%, #d9c3ff, #8f6ad6 60%, #4e3485); color: #fff; }
.classement-saison li.p4 { background: linear-gradient(90deg, rgba(143, 106, 214, .18), var(--verre)); }

.regles-saison ul { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--texte-2); font-size: .86rem; line-height: 1.45; }
.regles-saison ul b { color: #fbf3e0; }
.regles-saison small { display: block; margin-top: 8px; }
.lien-saison { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
.lien-saison > span { flex: 1; display: flex; flex-direction: column; }
.lien-saison small { color: var(--texte-2); }
.lien-saison .ico { color: var(--laiton-cl); }
@media (max-width: 360px) { .lot-exploit { grid-template-columns: 1fr; } }
.compte-saison { display: table; margin: 10px auto 6px; }
.tresors-tete .petit { display: block; }
.mon-rang-saison .etiquette-or, .banniere-saison .etiquette-or { white-space: nowrap; }

.lot-photo { background: #070b14; }
.lot-photo::after { background: linear-gradient(180deg, transparent 70%, rgba(5, 8, 16, .55)); }

/* ---------------------------------------------------------------- Coffre v2 : pochette peinte, déchirure au doigt, scène plein écran */
.pack { --rx: 0deg; --ry: 0deg; --hx: 50%; --hy: 50%; --p: 0; position: relative; width: min(58vw, 230px); aspect-ratio: 2 / 3; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; animation: pack-flotte 4.5s ease-in-out infinite; z-index: 1; }
@keyframes pack-flotte { 50% { translate: 0 -9px; } }
.pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.pack-corps, .pack-haut { position: absolute; inset: 0; z-index: 2; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.pack-haut { z-index: 3; transform-origin: 86% 8%; will-change: transform; }
.pack-holo { position: absolute; inset: 5% 14% 6%; border-radius: 6px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255, 255, 255, .55), transparent 38%),
    linear-gradient(115deg, transparent 20%, rgba(120, 220, 255, .35) 35%, rgba(255, 140, 230, .3) 45%, rgba(255, 230, 140, .35) 55%, transparent 70%);
  background-size: 100% 100%, 250% 250%; background-position: center, var(--hx) var(--hy); }
.pack-ombre { position: absolute; left: 18%; right: 18%; bottom: -6%; height: 7%; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .65), transparent 70%); filter: blur(6px); animation: ombre-flotte 4.5s ease-in-out infinite; }
@keyframes ombre-flotte { 50% { transform: scale(.88); opacity: .7; } }
/* fente lumineuse qui suit la déchirure */
.pack-fente { position: absolute; z-index: 4; left: 14%; right: 14%; top: 11.5%; height: 0; pointer-events: none; }
.pack-fente i { position: absolute; left: 0; top: -2px; height: 4px; width: calc(var(--p) * 100%); border-radius: 4px; background: #fff;
  box-shadow: 0 0 6px 2px #fff, 0 0 18px 6px var(--c, #ffe3a0), 0 0 40px 12px rgba(255, 220, 150, .45); opacity: calc(var(--p) * 4); }
.pack.saisie { cursor: grabbing; animation-play-state: paused; }
.pack.ouverte .pack-haut { transition: transform .7s cubic-bezier(.2, .7, .3, 1), opacity .7s; transform: translate(140px, -190px) rotate(48deg) !important; opacity: 0; }
.pack.ouverte .pack-fente i { width: 100%; animation: fente-brille 1.2s ease-in-out infinite alternate; }
@keyframes fente-brille { to { box-shadow: 0 0 10px 4px #fff, 0 0 30px 12px var(--c, #ffe3a0), 0 0 70px 24px rgba(255, 220, 150, .5); } }
.pack.charge { animation: pack-charge .09s linear infinite; }
@keyframes pack-charge { 0% { translate: 0 0; } 25% { translate: -3px 1px; } 50% { translate: 3px -1px; } 75% { translate: -2px -2px; } 100% { translate: 2px 2px; } }
.pack.tombe { transition: transform .7s cubic-bezier(.5, 0, .8, .4), opacity .6s .1s; transform: translateY(70vh) rotate(-8deg) scale(.9); opacity: 0; animation: none; }
.jaillit { position: absolute; z-index: 0; left: 50%; top: calc(50% - min(58vw, 230px) * .5775); width: 180px; height: 360px; margin-left: -90px; transform-origin: 50% 100%; translate: 0 -100%;
  background: radial-gradient(ellipse at 50% 100%, #fff 0%, var(--c) 18%, transparent 65%); filter: blur(10px); opacity: 0; animation: jaillit 1.4s ease-out forwards; pointer-events: none; mix-blend-mode: screen; }
@keyframes jaillit { 0% { opacity: 0; transform: scaleY(.1) scaleX(.6); } 35% { opacity: 1; } 100% { opacity: .55; transform: scaleY(1) scaleX(1.4); } }
.theatre[data-rarete="ultra"] .jaillit { background: radial-gradient(ellipse at 50% 100%, #fff 0%, #ffd36b 16%, #ff7ad9 30%, #6be0ff 44%, transparent 66%); width: 240px; margin-left: -120px; }
.theatre[data-rarete="epique"] .jaillit { width: 220px; margin-left: -110px; }

.btn-son { position: absolute; top: 6px; right: 6px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--laiton-cl);
  background: rgba(10, 14, 26, .6); border: 1px solid rgba(217, 177, 92, .45); backdrop-filter: blur(6px); cursor: pointer; }
.btn-son .ico { width: 20px; height: 20px; }

/* La scène plein écran */
body.theatre-ouvert { overflow: hidden; }
.theatre { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; --c: #ffe3a0; }
.theatre.visible { opacity: 1; }
.theatre-fond { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(40, 32, 18, .55), rgba(3, 5, 10, .97) 60%), #03050a; }
.theatre-fond::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, var(--c), transparent 45%); opacity: 0; transition: opacity 1s; }
.theatre[data-rarete] .theatre-fond::after { opacity: .28; }
.theatre[data-rarete="ultra"] .theatre-fond::after { opacity: .45; animation: fond-ultra 3s linear infinite; background: conic-gradient(from 0deg at 50% 42%, rgba(255, 211, 107, .6), rgba(255, 122, 217, .5), rgba(107, 224, 255, .5), rgba(255, 211, 107, .6)); mask: radial-gradient(circle at 50% 42%, #000, transparent 55%); -webkit-mask: radial-gradient(circle at 50% 42%, #000, transparent 55%); }
@keyframes fond-ultra { to { filter: hue-rotate(360deg); } }
.theatre .btn-son { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; }
.theatre-scene { position: relative; width: 100%; height: min(70vh, 520px); display: grid; place-items: center; perspective: 1100px; }
.theatre-consigne { position: relative; z-index: 2; margin: 18px 24px 0; text-align: center; color: #f6e2ae; font-weight: 700; letter-spacing: .03em; min-height: 1.4em; transition: transform .3s; }
.theatre-consigne.insiste { animation: clignote 1.4s ease-in-out infinite; }
.fleche-dechire { display: block; width: 120px; height: 3px; margin: 0 auto 10px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ffe3a0); position: relative; animation: fleche 1.6s ease-in-out infinite; }
.fleche-dechire::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid #ffe3a0; }
@keyframes fleche { 0% { transform: translateX(-40px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }

/* La carte qui sort de la pochette */
.theatre .tirage { position: absolute; z-index: 1; opacity: 1; cursor: pointer; transform: none; transition: none; }
.pack > .tirage { left: 21%; width: 58%; top: 13%; transition: transform .9s cubic-bezier(.2, .9, .3, 1); }
.pack > .tirage.monte { transform: translateY(-62%); }
.theatre-scene > .tirage { width: min(62vw, 240px); left: 50%; top: 50%; translate: -50% -50%; animation: vient .7s cubic-bezier(.2, 1.2, .4, 1) both; z-index: 3; }
@keyframes vient { from { transform: translateY(-120px) scale(.7); } to { transform: none; } }
.tirage .aura { position: absolute; inset: -18%; z-index: -1; border-radius: 30px; background: radial-gradient(circle, var(--c), transparent 62%); filter: blur(14px); opacity: .55; animation: aura 2.2s ease-in-out infinite; }
@keyframes aura { 50% { opacity: .9; transform: scale(1.06); } }
.tirage.concentre .tirage-int { animation: pack-charge .07s linear infinite; }
.tirage.concentre .aura { opacity: 1; transform: scale(1.25); transition: transform .6s, opacity .3s; }
.theatre.eclair::after { content: ''; position: fixed; inset: 0; z-index: 30; background: #fff; pointer-events: none; animation: eclair .8s ease-out forwards; }
.theatre .bandeau-ultra { position: fixed; top: max(70px, 10vh); z-index: 8; }
.bandeau-epique { background: linear-gradient(90deg, #c79bff, #f0e2ff, #9a6bff) !important; }
.theatre .pluie { position: fixed; inset: 0; z-index: 7; }
.theatre-bas { position: relative; z-index: 9; margin-top: 10px; padding: 0 18px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; max-width: 420px; width: 100%; }
.theatre-bas.visible { opacity: 1; transform: none; }
.theatre-bas b { display: block; font-family: var(--titre); color: #fbf3e0; font-size: 1.08rem; margin-bottom: 10px; }
.scene-coffre .pack { width: min(52vw, 200px); }
@media (prefers-reduced-motion: reduce) { .pack, .pack-ombre, .tirage .aura { animation: none; } }
.pack-holo { opacity: .38; }
.theatre .bandeau-ultra { top: max(22px, env(safe-area-inset-top)); }

/* ---------------------------------------------------------------- L'Herboriste */
.medaillon-vert { box-shadow: 0 0 0 2px #9cc48a, 0 0 0 4px rgba(20, 40, 18, .6), 0 0 18px rgba(140, 200, 120, .4); }
.medaillon-vert.grand { box-shadow: 0 0 0 2px #b7dba3, 0 0 0 5px rgba(20, 40, 18, .6), 0 0 0 6px rgba(140, 200, 120, .45), 0 0 24px rgba(140, 200, 120, .4); }
.herboriste { border-color: rgba(140, 200, 120, .45); background: linear-gradient(110deg, rgba(22, 40, 26, .85), rgba(14, 22, 34, .85)); }
.herboriste .etiquette-or { color: #b7dba3; }
.entree-herbo { border-color: rgba(140, 200, 120, .4); }
.entree-herbo.prete { background: linear-gradient(110deg, rgba(30, 58, 34, .9), rgba(14, 22, 34, .85)); border-color: rgba(160, 220, 140, .75); box-shadow: 0 0 22px rgba(120, 200, 110, .25); }
.entree-herbo.prete small { color: #cfeec0; font-weight: 700; }
.mini-sacoche { width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.mini-sacoche img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.entree-herbo.prete .mini-sacoche img { animation: sacoche-hop 2.4s ease-in-out infinite; }
@keyframes sacoche-hop { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-5px) rotate(-4deg); } 86% { transform: translateY(0) rotate(3deg); } }

.scene-sacoche { height: 300px; }
.scene-sacoche::before { background: radial-gradient(circle, rgba(140, 210, 120, .22), transparent 65%); }
.sacoche { position: relative; width: min(64vw, 260px); cursor: default; user-select: none; -webkit-user-select: none; }
.sacoche img { width: 100%; display: block; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.sacoche.prete { cursor: pointer; animation: pack-flotte 4s ease-in-out infinite; }
.sacoche.fermee img { filter: grayscale(.55) brightness(.6) drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.sacoche-cadenas { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #e8d9b0; background: rgba(10, 14, 22, .7); border: 1px solid rgba(232, 217, 176, .4); }
.sacoche-cadenas .ico { width: 26px; height: 26px; }
.sacoche-lueur { position: absolute; inset: -12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(170, 240, 140, .45), transparent 62%); filter: blur(8px); animation: aura 2.4s ease-in-out infinite; }
.sacoche.secoue { animation: pack-charge .1s linear infinite; }
.sacoche.grande { width: min(72vw, 300px); }
.sacoche.ouverte img { animation: sacoche-ouvre .6s cubic-bezier(.2, .9, .3, 1.4) forwards; }
@keyframes sacoche-ouvre { 0% { transform: none; } 40% { transform: scale(1.08, .94) translateY(6px); } 100% { transform: scale(.94) translateY(70px); opacity: .55; } }
.theatre-vert { --c: #a8ec8a; }
.theatre-vert .theatre-fond { background: radial-gradient(circle at 50% 45%, rgba(26, 52, 28, .6), rgba(3, 8, 6, .97) 60%), #030806; }
.theatre-vert .jaillit { top: calc(50% - 90px); background: radial-gradient(ellipse at 50% 100%, #fff 0%, #b6f29a 18%, transparent 65%); }
.feuilles-vol { position: absolute; left: 50%; top: 45%; pointer-events: none; z-index: 2; }
.feuilles-vol i { position: absolute; font-style: normal; color: #b6e39c; font-size: 18px; text-shadow: 0 0 8px rgba(160, 230, 130, .6); animation: feuille var(--t) ease-out forwards; }
@keyframes feuille { 0% { transform: rotate(var(--a)) translateY(0) rotate(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--r)); opacity: 0; } }
.jeton-sort { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 4; animation: jeton-monte .9s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes jeton-monte { from { transform: translateY(90px) scale(.4); opacity: 0; } }
.jeton { width: 210px; padding: 22px 18px; border-radius: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #eaf6e0;
  background: radial-gradient(circle at 50% 25%, #2d5a33, #0f2215 75%); border: 2px solid #9cc48a; box-shadow: 0 0 40px rgba(140, 220, 110, .45), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.jeton b { font-family: var(--titre); font-size: 1.2rem; color: #f2ffe6; }
.jeton small { color: #c7e2b8; line-height: 1.35; }
.jeton-ico { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #f6e2ae; background: radial-gradient(circle at 40% 30%, #4e7c46, #1b3420); box-shadow: 0 0 0 3px #d9b15c, 0 0 20px rgba(217, 177, 92, .4); }
.jeton-ico .ico { width: 40px; height: 40px; }
.jeton-conseil .medaillon { width: 70px; }
.conseil-herbo { font-family: Georgia, serif; font-style: italic; color: #cfe6c2; font-size: .9rem; margin: 0 0 10px; }

.provisions .provision { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); }
.provisions .provision:first-of-type { border-top: 0; }
.provision-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #f6e2ae; background: radial-gradient(circle at 40% 30%, #3f6a3a, #172b1a); box-shadow: 0 0 0 1.5px #b8962f; }
.provision-ico .ico { width: 22px; height: 22px; }
.provision > div { flex: 1; display: flex; flex-direction: column; }
.provision small { color: var(--texte-2); }
.btn-mini { padding: 6px 12px; font-size: .8rem; min-height: 0; }
.btn-vert { background: linear-gradient(180deg, #5d9a55, #3a6e36); color: #f2ffe6; border-color: #8fc684; }
.provision-offre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.provision small.aide { color: #b7dba3; font-style: italic; margin-top: 2px; }

/* ---------------------------------------------------------------- Boutique */
.boutique { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.boutique-visuel { width: 120px; margin: 0 auto; }
.boutique-visuel img { width: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.revelation .boutique-visuel { width: 150px; margin-bottom: 8px; }
.offres { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.offre { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--filet); background: var(--verre); cursor: pointer; position: relative; }
.offre input { accent-color: #d9b15c; width: 18px; height: 18px; }
.offre span { flex: 1; display: flex; flex-direction: column; }
.offre small { color: var(--texte-2); }
.offre em { font-style: normal; font-weight: 800; color: var(--laiton-cl); font-size: 1.05rem; }
.offre:has(input:checked) { border-color: #d9b15c; box-shadow: inset 0 0 0 1px #d9b15c, 0 0 16px rgba(217, 177, 92, .25); }
.offre.meilleure::after { content: 'Meilleur prix'; position: absolute; top: -9px; right: 12px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2a1d06; background: linear-gradient(135deg, #f6dc94, #d9b15c); padding: 2px 8px; border-radius: 99px; }
.case { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: .85rem; color: var(--texte-2); cursor: pointer; }
.case input { accent-color: #d9b15c; width: 18px; height: 18px; flex: none; margin-top: 2px; }
.lien-boutique { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--laiton-cl); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .9rem; }
.jetons-pochettes { font-size: .75rem; font-weight: 800; color: #2a1d06; background: linear-gradient(135deg, #f6dc94, #d9b15c); padding: 2px 9px; border-radius: 99px; margin-left: 6px; }
.coffre-ferme .btn { margin-top: 10px; }
.scene-coffre::before { pointer-events: none; }
.coffre-ferme { position: relative; z-index: 2; }

/* ---------- Avatars peints : médaillon, vestiaire, Camp ---------- */
.avatar-peint { position: relative; display: inline-block; flex: none; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(240, 207, 125, .35), #14223a 72%); }
.avatar-peint img { position: absolute; top: -15%; width: 380%; max-width: none; height: auto; pointer-events: none; }
.aventurier-avatar .avatar-peint, .entete-avatar .avatar-peint, .mini-avatar .avatar-peint { width: 100% !important; height: 100% !important; }

.vestiaire { position: relative; margin: 4px 0 6px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(217, 177, 92, .35);
  background: radial-gradient(70% 55% at 50% 40%, rgba(240, 207, 125, .22), transparent 70%), radial-gradient(120% 70% at 50% 110%, #1f3b31 0%, transparent 60%), linear-gradient(180deg, #0d1a2c, #0a1322); box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), var(--ombre); }
.vestiaire::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 22px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.vestiaire-scene { position: relative; z-index: 1; height: min(50vh, 410px); display: flex; justify-content: center; align-items: flex-end; padding: 6px 0 18px; }
.avatar-pied { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.vestiaire-scene .avatar-pied { animation: respire 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
.vestiaire-scene .avatar-pied.change { animation: apparait .45s ease-out; }
@keyframes respire { 50% { transform: scale(1.012) translateY(-2px); } }
@keyframes apparait { from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px) drop-shadow(0 14px 22px rgba(0,0,0,.55)); } }
/* v1.66.1 : l'étiquette a sa propre zone au-dessus du personnage (le texte ne passe plus sur la tête) */
.vestiaire-etiquette { position: relative; z-index: 2; padding: 14px 14px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.vestiaire-etiquette b { font-family: var(--titre); font-size: 1.25rem; color: var(--sable); text-shadow: 0 2px 8px #000; display: block; }
.vestiaire-etiquette small { color: var(--or-cl); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.verrou-badge { background: rgba(10, 16, 28, .8); border: 1px solid rgba(217, 177, 92, .5); color: var(--or-cl); border-radius: 999px; padding: 4px 10px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vestiaire.verrouille .avatar-pied { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) saturate(.85); }

.choix-titre { font-family: var(--titre); color: var(--sable); font-size: 1rem; margin: 18px 0 8px; }
.persos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.perso { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--texte-2); font-size: .72rem; }
.perso .avatar-peint { width: 100% !important; height: auto !important; aspect-ratio: 1; border: 2px solid rgba(217, 177, 92, .25); transition: border-color .2s, transform .2s, box-shadow .2s; }
.perso.actif { color: var(--or-cl); font-weight: 700; }
.perso.actif .avatar-peint { border-color: var(--or-cl); transform: scale(1.06); box-shadow: 0 0 0 3px rgba(240, 207, 125, .2), 0 0 18px rgba(240, 207, 125, .35); }

.tenues-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tenue-carte { position: relative; border: 1px solid rgba(217, 177, 92, .22); background: linear-gradient(180deg, #172741, #0f1b2e); border-radius: 14px; padding: 6px 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--texte); transition: border-color .2s, transform .2s; }
.tenue-carte .tenue-vignette { height: 104px; width: 100%; display: flex; justify-content: center; overflow: hidden; }
.tenue-carte .avatar-pied { height: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tenue-carte b { font-size: .7rem; line-height: 1.15; text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.tenue-carte .tenue-etat { font-size: .66rem; color: var(--texte-2); display: flex; align-items: center; gap: 3px; }
.tenue-carte .tenue-etat .ico { width: 12px; height: 12px; }
.tenue-carte.premium { border-color: rgba(240, 207, 125, .45); background: linear-gradient(180deg, #2a2412, #14100a); }
.tenue-carte.premium::before { content: 'Premium'; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #1d1608; background: linear-gradient(180deg, #f6dc98, #c99a45); border-radius: 999px; padding: 1px 6px; }
.tenue-carte.bloquee .avatar-pied { opacity: .55; filter: grayscale(.5) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tenue-carte.premium.bloquee .avatar-pied { opacity: .9; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tenue-carte.actif { border-color: var(--or-cl); transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(240, 207, 125, .25), 0 8px 18px rgba(0, 0, 0, .4); }
.tenue-carte.portee .tenue-etat { color: #8fd3a7; }
.vestiaire-action { margin-top: 14px; }
.vestiaire-action .btn { width: 100%; }
.vestiaire-action .petit { text-align: center; margin: 6px 0 0; }
@media (max-width: 380px) { .tenues-liste { grid-template-columns: repeat(2, 1fr); } .tenue-carte .tenue-vignette { height: 130px; } }

/* Camp : personnage en pied qui déborde du panneau */
.aventurier.peint { position: relative; overflow: visible; padding-left: 100px; min-height: 100px; margin-top: 26px; }
.aventurier.peint .aventurier-pied { position: absolute; left: 10px; bottom: 2px; height: 128px; pointer-events: none; }
.aventurier.peint .aventurier-pied .avatar-pied { height: 100%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.boutique-visuel.visuel-tenue { width: 130px; height: 190px; display: flex; justify-content: center; }
.boutique-visuel.visuel-tenue img { width: auto; height: 100%; }
.revelation .vestiaire { max-width: 300px; margin: 0 auto 12px; }
.revelation .vestiaire-scene { height: 340px; }

/* ---------- Fonds vivants (js/fond-anime.js) : calque calé sur l'illustration ---------- */
.fond-anime { position: fixed; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.fond-anime i, .fond-anime span { position: absolute; display: block; }
/* Ciel du Camp */
.fa-scintille { width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(200, 220, 255, .8);
  transform: scale(var(--t)); opacity: 0; animation: fa-scintille var(--d) ease-in-out var(--r) infinite; }
@keyframes fa-scintille { 0%, 100% { opacity: 0; } 45% { opacity: .95; } 55% { opacity: .7; } }
.fa-etoile { width: 0; height: 0; }
.fa-etoile::before { content: ''; position: absolute; width: 46px; height: 46px; left: -23px; top: -23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, .85) 0%, rgba(255, 214, 120, .35) 22%, rgba(255, 200, 100, 0) 62%);
  animation: fa-pulse 3.4s ease-in-out var(--r) infinite; }
.fa-etoile b { position: absolute; width: 34px; height: 34px; left: -17px; top: -17px;
  background: linear-gradient(90deg, transparent 0 46%, rgba(255, 246, 215, .95) 50%, transparent 54%), linear-gradient(0deg, transparent 0 46%, rgba(255, 246, 215, .95) 50%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 70%); mask: radial-gradient(circle, #000 0%, transparent 70%);
  animation: fa-rayons 3.4s ease-in-out var(--r) infinite; }
@keyframes fa-pulse { 0%, 100% { transform: scale(.75); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes fa-rayons { 0%, 100% { transform: scale(.6) rotate(0deg); opacity: .35; } 50% { transform: scale(1.1) rotate(12deg); opacity: 1; } }
.fa-filante { left: 10%; top: 6%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform-origin: 100% 50%; opacity: 0; animation: fa-filante 14s linear 4s infinite; }
@keyframes fa-filante { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(18deg) scaleX(.2); }
  90% { opacity: 1; transform: translate(60px, 20px) rotate(18deg) scaleX(1); } 94%, 100% { opacity: 0; transform: translate(220px, 72px) rotate(18deg) scaleX(.4); } }
.fa-lampe { width: calc(70px * var(--t)); height: calc(70px * var(--t)); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 110, .55) 0%, rgba(255, 160, 60, .2) 35%, rgba(255, 150, 50, 0) 70%); animation: fa-vacille 2.6s steps(1, end) infinite; mix-blend-mode: screen; }
.fa-lampe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: fa-vacille-doux 1.7s ease-in-out infinite; }
@keyframes fa-vacille { 0%, 100% { opacity: .9; } 23% { opacity: .65; } 31% { opacity: 1; } 58% { opacity: .75; } 77% { opacity: .95; } }
@keyframes fa-vacille-doux { 0%, 100% { opacity: .2; transform: scale(.9); } 50% { opacity: .55; transform: scale(1.08); } }
/* Nuit des Lanternes */
.fa-halo { width: calc(64px * var(--t)); height: calc(64px * var(--t)); transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 196, 110, .75) 0%, rgba(255, 150, 60, .28) 30%, rgba(255, 130, 40, 0) 68%);
  animation: fa-halo var(--d) ease-in-out var(--r) infinite; }
@keyframes fa-halo { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
.fa-vol { bottom: 70%; width: 0; height: 0; opacity: 0; animation: fa-monte var(--d) linear var(--r) infinite; }
@keyframes fa-monte { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: calc(var(--o) * .85); } 75% { opacity: calc(var(--o) * .85); } 100% { transform: translateY(-60vh); opacity: 0; } }
.fa-lanterne { left: calc(-11px * var(--t)); top: calc(-30px * var(--t)); width: calc(22px * var(--t)); height: calc(28px * var(--t));
  border-radius: 45% 45% 22% 22% / 30% 30% 18% 18%;
  background: radial-gradient(ellipse 55% 45% at 50% 82%, #fff4c8 0%, #ffcb6b 28%, #f08a2e 62%, #a8461d 100%);
  box-shadow: 0 0 calc(14px * var(--t)) calc(4px * var(--t)) rgba(255, 160, 60, .55), 0 0 calc(40px * var(--t)) calc(10px * var(--t)) rgba(255, 140, 50, .22);
  animation: fa-balance var(--b) ease-in-out infinite alternate, fa-flamme 1.9s ease-in-out infinite; }
.fa-lanterne::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: -3px; height: 3px; border-radius: 0 0 3px 3px; background: #5a2a12; }
@keyframes fa-balance { from { transform: translateX(calc(-9px * var(--t))) rotate(-5deg); } to { transform: translateX(calc(9px * var(--t))) rotate(5deg); } }
@keyframes fa-flamme { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.18); } 70% { filter: brightness(.92); } }
@media (prefers-reduced-motion: reduce) { .fond-anime * { animation: none !important; } .fa-vol { display: none !important; } }
body:not(:has(.fond-peint)) .fond-anime { display: none; }

/* Mon sac : tuiles illustrées (peintures sac-carnet, sac-cartes, sac-timbres, sac-equipement) */
.collection.illustree { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 4 / 5; padding: 0; justify-content: flex-end; isolation: isolate;
  border-color: rgba(217, 177, 92, .45); box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 236, 190, .06); transition: transform .25s ease, box-shadow .25s ease; }
.collection-img { position: absolute; inset: 0; z-index: -2; background: #101a2c center 22% / cover no-repeat; transition: transform .6s ease; }
.collection.illustree::before { z-index: 1; }
.collection.illustree::after { z-index: 1; }
.collection-corps { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 46px 14px 14px;
  background: linear-gradient(180deg, rgba(7, 12, 22, 0) 0%, rgba(7, 12, 22, .78) 42%, rgba(7, 12, 22, .96) 100%); }
.collection.illustree b { font-family: var(--titre); font-size: 1.02rem; letter-spacing: .01em; color: #fff4dc; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); line-height: 1.2; }
.collection.illustree small { color: var(--laiton-cl); opacity: .85; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 700; }
.collection.illustree .jauge { margin-top: 8px; }
.collection.illustree em { margin-top: 4px; color: #fff4dc; }
.collection.illustree:hover .collection-img, .collection.illustree:focus-visible .collection-img { transform: scale(1.06); }
.collection.illustree:active { transform: scale(.98); }
.collection.illustree.c-nature { border-color: rgba(120, 200, 150, .5); }
.collection.illustree.c-nature small { color: #9fe0b5; }
.collection.illustree.c-nature .jauge div { background: linear-gradient(90deg, #4fae7a, #9fe0b5); }
.collection.illustree.c-timbres { border-style: solid; border-color: rgba(214, 120, 120, .45); }
.collection.illustree.c-timbres small { color: #f2b0a6; }
.collection.illustree.c-timbres .collection-img { filter: saturate(.75) brightness(.8); }
.collection.illustree .bientot { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }

/* ---------- Camp premium et animé (v1.31) ---------- */
/* Quête en cours : ciel peint et constellation vivante */
.quete-ciel { height: 150px; background: #06101f center 38% / cover no-repeat; }
.quete-ciel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 18, .25), rgba(4, 9, 18, .05) 40%, rgba(4, 9, 18, .7)); pointer-events: none; }
.quete-ciel .etiquette { position: absolute; z-index: 2; }
.ciel-mini { z-index: 1; height: 132px; }
.ciel-mini line { stroke: rgba(243, 214, 143, .35); }
.ciel-mini line.on { stroke-dasharray: 6 3; animation: ciel-flux 2.4s linear infinite; }
@keyframes ciel-flux { to { stroke-dashoffset: -18; } }
.ciel-mini circle { stroke: rgba(233, 220, 192, .7); animation: ciel-respire 3s ease-in-out var(--r, 0s) infinite; }
.ciel-mini circle.prochaine { stroke: var(--laiton-cl); stroke-width: 1.8; animation: ciel-appel 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ciel-respire { 50% { stroke-opacity: .35; } }
@keyframes ciel-appel { 50% { transform: scale(1.5); stroke-opacity: .4; } }
.ciel-mini g.on .halo { fill: rgba(255, 228, 160, .28); stroke: none; filter: blur(2px); animation: ciel-halo 2.8s ease-in-out var(--r) infinite; transform-box: fill-box; transform-origin: center; }
.ciel-mini g.on .rayons { stroke: #fff6d8; stroke-width: 1.1; stroke-linecap: round; opacity: .8; animation: ciel-rayons 2.8s ease-in-out var(--r) infinite; }
.ciel-mini g.on .coeur { fill: #fff6d8; stroke: none; filter: drop-shadow(0 0 4px #f3d68f); animation: none; }
@keyframes ciel-halo { 50% { transform: scale(1.35); opacity: .55; } }
@keyframes ciel-rayons { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .35; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
.quete-vedette .btn { position: relative; overflow: hidden; }
.quete-vedette .btn::after, .banniere-saison::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; border: 0; border-radius: 0; opacity: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: reflet 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes reflet { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* Saison : reflet doré, trésor qui rayonne, compte à rebours qui bat */
.banniere-saison { position: relative; overflow: hidden; }
.banniere-saison::after { width: 30%; height: auto; right: auto; background: linear-gradient(100deg, transparent, rgba(255, 228, 160, .22), transparent); animation-duration: 6.5s; }
.bs-photo { animation: tresor 3.2s ease-in-out infinite; }
@keyframes tresor { 50% { box-shadow: 0 0 0 1px rgba(243, 214, 143, .9), 0 0 22px rgba(243, 214, 143, .55), 0 6px 18px rgba(0, 0, 0, .5); transform: translateY(-2px); } }
.pastille-saison { animation: battement 2.4s ease-in-out infinite; }
@keyframes battement { 50% { box-shadow: 0 0 14px rgba(246, 220, 148, .7); } }

/* Nuit des Lanternes : décor peint et lanternes qui s'envolent */
.banniere-evt { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(20, 8, 26, .35), rgba(20, 8, 26, .78) 55%, rgba(20, 8, 26, .95)), var(--evt-fond, none) center 14% / cover no-repeat, #1e0e22; }
.evt-ciel { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.evt-ciel span { position: absolute; display: block; }
.evt-ciel .fa-vol { bottom: 0; }
.evt-ciel .fa-vol { animation-name: fa-monte-court; }
@keyframes fa-monte-court { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 80% { opacity: .9; } 100% { transform: translateY(-190px); opacity: 0; } }
.banniere-evt .lanterne { transition: transform .3s; }
.banniere-evt .lanterne:not(.allumee) { animation: lanterne-attend 3.6s ease-in-out infinite; }
.banniere-evt .lanterne:nth-child(2) { animation-delay: .4s; } .banniere-evt .lanterne:nth-child(3) { animation-delay: .8s; } .banniere-evt .lanterne:nth-child(4) { animation-delay: 1.2s; } .banniere-evt .lanterne:nth-child(5) { animation-delay: 1.6s; }
.lanterne.allumee { animation: lanterne-brille 2.2s ease-in-out infinite, lanterne-flotte 4s ease-in-out infinite; }
@keyframes lanterne-attend { 50% { transform: translateY(-2px); border-color: rgba(255, 190, 125, .7); } }
@keyframes lanterne-brille { 0%, 100% { box-shadow: 0 0 12px rgba(238, 138, 60, .75), 0 0 24px rgba(238, 138, 60, .3); } 45% { box-shadow: 0 0 20px rgba(255, 170, 80, 1), 0 0 44px rgba(238, 138, 60, .55); } 60% { box-shadow: 0 0 14px rgba(238, 138, 60, .8), 0 0 30px rgba(238, 138, 60, .35); } }
@keyframes lanterne-flotte { 50% { transform: translateY(-4px) rotate(-3deg); } }

/* Tuiles du jour illustrées */
.tuile-jour.illustree { position: relative; overflow: hidden; isolation: isolate; min-height: 0; aspect-ratio: 4 / 5; padding: 0 10px 10px; justify-content: flex-end; gap: 1px; border-color: rgba(217, 177, 92, .45); }
.tuile-jour.illustree::before, .tuile-jour.illustree::after { z-index: 1; }
.tuile-jour.illustree .collection-img { background-position: center 30%; }
.tuile-jour.illustree b, .tuile-jour.illustree small { position: relative; z-index: 1; }
.tuile-jour.illustree b { font-family: var(--titre); color: #fff4dc; text-shadow: 0 2px 6px #000; }
.tuile-jour.illustree small { color: var(--laiton-cl); text-shadow: 0 1px 4px #000; }
.tuile-jour.illustree .collection-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 12, 22, 0) 35%, rgba(7, 12, 22, .92)); }
.tuile-jour.illustree:active { transform: scale(.97); }

/* Main d'expédition : cartes qui flottent avec un reflet holographique */
.main-expedition .emplacement:not(.vide) { animation: carte-flotte 4.5s ease-in-out infinite; }
.main-expedition .emplacement:nth-child(2) { animation-delay: .7s; } .main-expedition .emplacement:nth-child(3) { animation-delay: 1.4s; }
@keyframes carte-flotte { 50% { transform: translateY(-4px); } }
.main-expedition .emplacement:not(.vide) > * { position: relative; overflow: hidden; }
.main-expedition .emplacement:not(.vide) > *::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, rgba(170, 220, 255, .18) 52%, transparent 65%); background-size: 250% 100%; animation: holo 4.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes holo { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* Atlas des milieux : médaillons peints */
.milieux { gap: 6px; }
.milieu.peint { padding: 0; background: none; box-shadow: none; opacity: 1; filter: none; gap: 5px; }
.milieu-img { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #0c1626 center / cover no-repeat; border: 2px solid rgba(233, 220, 192, .18); filter: grayscale(.85) brightness(.62); transition: filter .4s; background-size: 106%; }
.milieu.peint small { font-size: .6rem; color: var(--texte-2); opacity: .6; }
.milieu.peint.fait .milieu-img { filter: none; border-color: var(--c); box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 0 12px color-mix(in srgb, var(--c) 80%, transparent); animation: milieu-brille 3.5s ease-in-out calc(var(--i) * .35s) infinite; }
.milieu.peint.fait small { color: #f6ecd6; opacity: 1; font-weight: 700; }
@keyframes milieu-brille { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 0 20px color-mix(in srgb, var(--c) 100%, transparent), 0 0 4px #fff; } }
.milieux-jauge { margin: 12px 0 4px; }

/* Conseil : le bouclier respire */
.conseil .ico { animation: bouclier 3s ease-in-out infinite; }
@keyframes bouclier { 50% { filter: drop-shadow(0 0 6px rgba(143, 211, 176, .9)); transform: scale(1.06); } }

/* Journal illustré */
.journal-peint { position: relative; overflow: hidden; isolation: isolate; min-height: 96px; }
.journal-peint .collection-img { background-position: center 50%; }
.journal-peint .collection-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 12, 22, .95) 0%, rgba(7, 12, 22, .7) 50%, rgba(7, 12, 22, .2)); }
.journal-peint::before, .journal-peint::after { z-index: 1; }
.jp-txt { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.jp-txt b { font-family: var(--titre); font-size: 1.1rem; color: #fff4dc; }
.jp-txt small { color: var(--laiton-cl); font-weight: 500; }
.journal-peint > .ico { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .panneau *, .panneau::after { animation: none !important; } }

/* ---------- Fluidité (v1.32) : plus de flou d'arrière-plan sur un fond animé ----------
   Le flou (backdrop-filter) devait être recalculé à chaque image de l'animation du ciel : saccades au défilement. */
:root { --verre: rgba(9, 16, 30, .86); --verre-2: rgba(16, 27, 48, .9); }
.panneau, .bloc, .onglets, .ligne-lieu, .mission, .objet, .stat, .classement li, .choix, .case-espece.vue, .radar, .securite, .entete, .barre, .btn-rond, .lot-rang {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.entete { background: linear-gradient(180deg, rgba(7, 13, 24, .96), rgba(7, 13, 24, .78)) !important; }
.barre { background: rgba(10, 17, 30, .97) !important; }
.fa-lampe, .fa-halo { mix-blend-mode: normal; }
.ciel-mini g.on .halo { filter: none; }
.fa-vol, .fa-etoile::before, .fa-halo { will-change: transform, opacity; }
body.defile .fond-anime *, body.defile .fond-anime *::before, body.defile .panneau *, body.defile .panneau::after { animation-play-state: paused !important; }

/* ---------- Écrans harmonisés avec le Camp : bandeau peint, médaillons, cadre doré ---------- */
.bandeau-peint { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 12px; padding: 64px 16px 14px; border-radius: 20px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(217, 177, 92, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.bandeau-peint .collection-img { background-position: center 40%; animation: bandeau-zoom 18s ease-in-out infinite alternate; }
.bandeau-peint .collection-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 12, 22, .1) 0%, rgba(7, 12, 22, .55) 55%, rgba(7, 12, 22, .95) 100%); }
@keyframes bandeau-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.bandeau-peint .titre { margin: 0; text-shadow: 0 2px 10px #000; }
.bandeau-peint .surtitre { text-shadow: 0 1px 6px #000; }
.bandeau-peint .retour { position: absolute; top: 12px; left: 14px; z-index: 1; color: var(--laiton-cl); text-shadow: 0 1px 6px #000; }
.intro-ecran { margin-top: 0; }
.puce-milieu { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; }
.puce-img { width: 24px; height: 24px; border-radius: 50%; flex: none; background: center / 108% no-repeat; box-shadow: 0 0 0 1.5px var(--c); }
.puce-milieu.actif { background: color-mix(in srgb, var(--c) 45%, #0b1424); border-color: var(--c); }
.pastille.peinte { border-radius: 50%; background: #0c1626 center / 108% no-repeat; border: 2px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
.ligne-lieu.fait .pastille.peinte { animation: milieu-brille 3.5s ease-in-out infinite; --i: 0; }
.cadre-or { border: 1px solid rgba(217, 177, 92, .55); box-shadow: 0 0 0 4px rgba(217, 177, 92, .08), 0 12px 28px rgba(0, 0, 0, .45); border-radius: 18px; }
.panneau.liste-xp { padding: 4px 14px; }
.panneau.liste-xp > div:last-child { border-bottom: 0; }
.liste-xp b { font-family: var(--titre); }
.puce.actif:not(.puce-milieu) { background: linear-gradient(180deg, #f6dc98, #c99a45); border-color: var(--laiton); color: #1d1608; font-weight: 700; }

/* ---------- Équipement : vitrine d'objets peints (decor/objet-*.png) ---------- */
.onglets { border-color: rgba(217, 177, 92, .35); }
.onglets .actif { background: linear-gradient(180deg, #f6dc98, #c99a45); color: #1d1608; box-shadow: 0 2px 10px rgba(217, 177, 92, .35); }
.grille-equip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.objet.vitrine { position: relative; overflow: hidden; padding: 10px 10px 14px; gap: 4px; border-radius: 18px; border: 1px solid rgba(217, 177, 92, .35);
  background: radial-gradient(90% 60% at 50% 38%, rgba(240, 207, 125, .16), transparent 70%), linear-gradient(180deg, #121e33, #0a1220); opacity: 1; }
.objet-scene { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.objet-scene::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.objet-scene img { position: relative; z-index: 1; width: 88%; height: 88%; object-fit: contain; }
.objet.vitrine b { font-family: var(--titre); font-size: .98rem; color: #fff4dc; line-height: 1.2; }
.objet.vitrine small { font-size: .74rem; line-height: 1.3; }
.objet.possede { border-color: rgba(240, 207, 125, .6); box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 236, 190, .06); }
.objet.possede .objet-scene img { filter: drop-shadow(0 0 14px rgba(240, 207, 125, .28)); animation: objet-flotte 4.8s ease-in-out calc(var(--i) * -.4s) infinite; }
@keyframes objet-flotte { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.objet.possede::before { content: ''; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: skewX(-18deg); z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .14), transparent); animation: reflet-objet 7s ease-in-out calc(var(--i) * .6s) infinite; border: 0; opacity: 1; height: auto; }
@keyframes reflet-objet { 0%, 75% { left: -60%; } 100% { left: 140%; } }
.objet.verrou { background: linear-gradient(180deg, #0f1828, #090f1b); border-style: dashed; border-color: rgba(233, 220, 192, .18); }
.objet.verrou .objet-scene img { filter: brightness(0) drop-shadow(0 0 1px rgba(240, 207, 125, .55)) drop-shadow(0 0 8px rgba(240, 207, 125, .15)); opacity: .9; }
.objet.verrou b { color: var(--texte-2); }
.objet-cadenas { position: absolute; z-index: 2; right: 6%; top: 6%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 13, 24, .85); border: 1px solid rgba(217, 177, 92, .5); }
.objet-cadenas .ico { width: 16px !important; height: 16px !important; color: var(--laiton-cl) !important; }
.objet-condition { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-2); }
.objet-condition .pastille.peinte { width: 20px; height: 20px; border-width: 1.5px; }

/* ---------- Quêtes, Classement, Carnet harmonisés (v1.34) ---------- */
.bloc { background: var(--verre); border-color: rgba(217, 177, 92, .3); border-radius: 18px; }
/* Quêtes : ciel vivant */
.quete-premium { border-color: rgba(217, 177, 92, .5); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.quete-premium h2 { font-family: var(--titre); color: #fff4dc; font-size: 1.25rem; }
.quete-premium .ciel { background: radial-gradient(ellipse at 50% 30%, #1f3358 0%, #0a1324 70%); border-color: rgba(217, 177, 92, .35); }
.ciel-etoile .halo { animation: ciel-respire 3.2s ease-in-out infinite; }
.ciel-etoile.on .halo { animation: ciel-halo 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ciel-etoile.on .coeur { animation: ciel-coeur 2.8s ease-in-out infinite; }
@keyframes ciel-coeur { 50% { filter: drop-shadow(0 0 4px #f2cf74) drop-shadow(0 0 8px #f2cf74); } }
.ciel-lien.on { stroke-dasharray: 3 1.5; animation: ciel-flux 3s linear infinite; }
.gains-explo span { color: var(--laiton-cl); font-weight: 800; }
/* Classement : podium */
.classement li { background: var(--verre); border-color: rgba(217, 177, 92, .22); border-radius: 14px; padding: 10px 12px; }
.classement li .rang { min-width: 28px; text-align: center; font-family: var(--titre); color: var(--laiton-cl); font-weight: 700; }
.classement li > b { font-family: var(--titre); color: var(--laiton-cl); }
.classement li.podium { position: relative; overflow: hidden; padding: 14px 12px; }
.classement li.podium .rang { font-size: 1.5rem; }
.classement li.podium .mini-avatar { transform: scale(1.2); }
.classement li.p1 { background: linear-gradient(100deg, rgba(240, 207, 125, .32), rgba(9, 16, 30, .9) 70%); border-color: rgba(240, 207, 125, .8); box-shadow: 0 0 22px rgba(240, 207, 125, .25); }
.classement li.p2 { background: linear-gradient(100deg, rgba(210, 220, 235, .22), rgba(9, 16, 30, .9) 70%); border-color: rgba(210, 220, 235, .55); }
.classement li.p3 { background: linear-gradient(100deg, rgba(205, 140, 90, .25), rgba(9, 16, 30, .9) 70%); border-color: rgba(205, 140, 90, .55); }
.classement li.podium::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 35%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); animation: reflet 6s ease-in-out infinite; }
.classement li.p2::after { animation-delay: .6s; } .classement li.p3::after { animation-delay: 1.2s; }
.classement li.moi { border-color: var(--laiton-cl); box-shadow: inset 0 0 0 1px var(--laiton-cl), 0 0 16px rgba(240, 207, 125, .25); }
.mon-rang { background: var(--verre); border: 1px solid rgba(217, 177, 92, .45); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.mon-rang b { font-family: var(--titre); color: var(--laiton-cl); font-size: 1.2rem; }
/* Carnet : catégories en médaillons peints */
.carnet-cat { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.carnet-cat .bloc-titre h2 { display: flex; align-items: center; gap: 10px; font-family: var(--titre); color: #fff4dc; }
.carnet-cat .bloc-titre .pastille.peinte { width: 36px; height: 36px; }
.carnet-cat .jauge-carnet > div { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #fff 0%), var(--laiton-cl)); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.case-espece { border-color: rgba(217, 177, 92, .18); background: rgba(9, 16, 30, .6); }
.case-espece .case-icone { color: rgba(240, 207, 125, .45); font-family: var(--titre); background: radial-gradient(circle at 50% 40%, rgba(240, 207, 125, .08), rgba(0, 0, 0, .3)); }
.case-espece.vue { border-style: solid; border-color: rgba(240, 207, 125, .55); color: #fff4dc; }
.case-espece.vue img { box-shadow: 0 0 0 1px rgba(240, 207, 125, .4); }
.case-espece.r-rare.vue { border-color: #6fb5e8; } .case-espece.r-tres_rare.vue { border-color: #c79bf0; box-shadow: 0 0 14px rgba(199, 155, 240, .35); }
.securite { background: rgba(20, 44, 36, .78); border: 1px solid rgba(110, 190, 150, .35); border-radius: 16px; }

/* v1.34.1 — carte du Conservateur vue de près : plus grande, ombre dorée */
.carte-zoom:has(.carte-pleine) { width: min(84vw, 360px); }
.carte-zoom .carte-pleine { box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(230,196,120,.45); }

/* v1.35.0 — Le Sas du Conteur : bibliothèque d'histoires audio et lecteur */
.jaquette { display: block; aspect-ratio: 3 / 4; border-radius: 12px; background: #101a2c center / cover no-repeat; box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(217, 177, 92, .45); }
.entree-conteur { background: linear-gradient(120deg, rgba(18, 30, 52, .9), rgba(40, 28, 12, .85)); }
.entree-conteur .mini-jaquette { width: 46px; flex: none; }
.entree-conteur .mini-jaquette .jaquette { border-radius: 8px; }
.bibliotheque { display: grid; gap: 12px; }
.histoire-tuile { display: flex; gap: 14px; align-items: stretch; }
.histoire-tuile > .jaquette { width: 96px; flex: none; }
.histoire-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.histoire-corps b { font-family: var(--titre); color: var(--sable); font-size: 1.02rem; line-height: 1.25; }
.histoire-corps small { color: var(--texte-2); }
.histoire-corps em { margin-top: auto; font-style: normal; font-weight: 700; color: var(--laiton-cl); font-size: .85rem; }
.histoire-corps .coffre-test { align-self: flex-start; }
.histoire-tete { display: flex; gap: 16px; align-items: flex-end; margin: 6px 0 10px; }
.histoire-tete > .jaquette { width: 112px; flex: none; }
.histoire-tete .titre { font-size: 1.35rem; margin: 2px 0 4px; }
.histoire-resume { color: var(--texte); opacity: .92; }
.lecteur-conteur { display: flex; flex-direction: column; gap: 6px; border-color: rgba(217, 177, 92, .55); background: linear-gradient(160deg, rgba(20, 32, 56, .92), rgba(9, 16, 30, .92)); }
.lecteur-barre input[type=range] { width: 100%; accent-color: var(--laiton); height: 28px; }
.lecteur-temps { display: flex; justify-content: space-between; font-size: .8rem; color: var(--texte-2); font-variant-numeric: tabular-nums; margin-top: -6px; }
.lecteur-boutons { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 4px 0 2px; }
.lecteur-boutons .btn-rond { width: 46px; height: 46px; }
.lecteur-play { width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #1d1608;
  background: radial-gradient(circle at 35% 30%, #f6dc98, var(--laiton) 55%, #a37a2e); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 4px rgba(217, 177, 92, .18); transition: transform .12s; }
.lecteur-play .ico { width: 30px; height: 30px; }
.lecteur-play:active { transform: scale(.94); }
.lecteur-play.joue { animation: conteur-pouls 2.4s ease-in-out infinite; }
.lecteur-play.verrou { background: var(--verre-2); color: var(--laiton-cl); box-shadow: 0 0 0 1px var(--filet); }
.lecteur-play.attente { opacity: .6; pointer-events: none; }
@keyframes conteur-pouls { 50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 10px rgba(217, 177, 92, .08); } }
body.defile .lecteur-play.joue { animation: none; }
.chapitres { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.chapitre { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px; cursor: pointer; color: var(--texte); }
.chapitre.actif { background: rgba(217, 177, 92, .1); border-color: var(--filet); }
.chapitre > .ico { width: 20px; height: 20px; color: var(--laiton-cl); }
.chapitre.verrouille { opacity: .62; }
.chapitre-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-weight: 700; color: var(--laiton-cl); border: 1px solid var(--filet); }
.chapitre.fait .chapitre-num { background: var(--laiton); color: #1d1608; }
.chapitre-corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chapitre-corps small { color: var(--texte-2); }
.debloquer { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.debloquer > div { flex: 1; display: flex; flex-direction: column; } .debloquer small { color: var(--texte-2); }
.defi-conteur { margin-top: 14px; border-color: rgba(110, 190, 150, .45); background: linear-gradient(150deg, rgba(20, 44, 36, .9), rgba(9, 16, 30, .9)); text-align: center; }
.revelation > .jaquette { width: 120px; margin: 0 auto 10px; }

/* ---------- v1.36 — Le Sas du Conteur premium : repaire du Conteur animé, lecteur doré ---------- */
/* Bandeau du haut : opaque, le texte ne transparaît plus quand on fait défiler */
.entete { background: linear-gradient(180deg, #070d18, #0a1220) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
body[data-fond="conteur"] .entete { background: linear-gradient(180deg, #0e0a08, #15100b) !important; border-bottom: 1px solid rgba(217, 177, 92, .18); }

/* Fond : le repaire du Conteur reste visible jusqu'en bas (livre lumineux) */
body[data-fond="conteur"] .fond-peint { background:
  linear-gradient(180deg, rgba(10, 8, 6, .15) 0%, rgba(10, 8, 6, .42) 40%, rgba(10, 8, 6, .5) 70%, rgba(10, 8, 6, .35) 100%),
  var(--fond-image, none) center top / cover no-repeat, #0b0907; }
@media (min-width: 700px) { body[data-fond="conteur"] .fond-peint { background:
  linear-gradient(180deg, rgba(10, 8, 6, .3), rgba(10, 8, 6, .55)), var(--fond-image, none) center 20% / cover no-repeat, #0b0907; } }
body[data-fond="conteur"] .panneau { background: linear-gradient(165deg, rgba(24, 18, 12, .9), rgba(10, 9, 12, .9)); border-color: rgba(217, 177, 92, .32); }

/* Animations du repaire */
.fa-lune { width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 236, 255, .45), rgba(170, 190, 255, .12) 45%, transparent 70%); animation: fa-pulse 7s ease-in-out infinite; }
.fa-bougie { background: radial-gradient(circle, rgba(255, 196, 110, .75), rgba(255, 140, 50, .25) 40%, transparent 70%); animation: fa-vacille 2.3s steps(1) infinite, fa-vacille-doux 1.3s ease-in-out infinite; }
.fa-livre { width: 260px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 214, 130, .55), rgba(255, 170, 70, .18) 45%, transparent 72%); animation: fa-livre 5s ease-in-out infinite; }
@keyframes fa-livre { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.fa-etincelle, .fa-poussiere { width: 4px; height: 4px; margin: -2px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.fa-etincelle { background: #ffe2a0; box-shadow: 0 0 8px 2px rgba(255, 196, 90, .85); animation: fa-etincelle var(--d) ease-out var(--r) infinite; }
@keyframes fa-etincelle { 0% { opacity: 0; transform: translate(0, 0) scale(var(--t)); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(-1 * var(--h))) scale(calc(var(--t) * .4)); } }
.fa-poussiere { background: rgba(255, 226, 170, .9); box-shadow: 0 0 6px 1px rgba(255, 210, 140, .55); animation: fa-poussiere var(--d) ease-in-out var(--r) infinite; }
@keyframes fa-poussiere { 0% { opacity: 0; transform: translate(0, 0) scale(var(--t)); } 25% { opacity: .7; } 50% { transform: translate(calc(var(--x) * -.5), calc(-.5 * var(--h))) scale(var(--t)); }
  75% { opacity: .55; } 100% { opacity: 0; transform: translate(var(--x), calc(-1 * var(--h))) scale(var(--t)); } }
body.defile .fa-etincelle, body.defile .fa-poussiere { animation-play-state: paused; }

/* Bibliothèque : tuiles d'histoire façon livre précieux */
.histoire-tuile { position: relative; overflow: hidden; transition: transform .15s; }
.histoire-tuile:active { transform: scale(.98); }
.histoire-tuile::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 230, 170, .12) 50%, transparent 60%); background-size: 250% 100%; animation: reflet-tuile 7s ease-in-out infinite; }
@keyframes reflet-tuile { 0%, 70% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* Fiche d'histoire : jaquette encadrée d'or avec halo */
.jaquette-cadre { position: relative; width: 116px; flex: none; }
.jaquette-cadre::before { content: ''; position: absolute; inset: -14px; border-radius: 22px; z-index: -1;
  background: radial-gradient(circle, rgba(255, 200, 110, .4), transparent 70%); animation: fa-pulse 5s ease-in-out infinite; }
.jaquette-cadre .jaquette { box-shadow: 0 10px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(243, 214, 143, .7), 0 0 0 4px rgba(217, 177, 92, .15); }

/* Lecteur : panneau doré, ondes sonores, bouton serti */
.lecteur-conteur { position: relative; overflow: hidden; padding: 18px 18px 16px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(90, 62, 24, .55), transparent 60%), linear-gradient(165deg, rgba(28, 20, 12, .96), rgba(10, 9, 12, .96)) !important;
  border-color: rgba(217, 177, 92, .6) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .12); }
.lecteur-conteur .surtitre { text-align: center; }
.ondes { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; margin: 6px 0 2px; }
.ondes i { display: block; width: 3px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, var(--laiton-cl), var(--laiton-fonce)); opacity: .35; transform: scaleY(.35); transition: opacity .4s, transform .4s; }
.lecteur-conteur.joue .ondes i { opacity: .95; animation: onde 1.1s ease-in-out calc(var(--i) * -0.13s) infinite alternate; }
@keyframes onde { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
body.defile .ondes i { animation-play-state: paused !important; }
/* Barre de progression dorée */
.lecteur-barre input[type=range] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; --p: 0%; }
.lecteur-barre input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--laiton-cl), var(--laiton) var(--p), rgba(255, 255, 255, .12) var(--p)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.lecteur-barre input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.lecteur-barre input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--laiton); }
.lecteur-barre input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c8, var(--laiton) 60%, #a37a2e); box-shadow: 0 0 0 3px rgba(217, 177, 92, .25), 0 0 12px rgba(255, 200, 110, .7); }
.lecteur-barre input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--laiton); box-shadow: 0 0 12px rgba(255, 200, 110, .7); }
/* Bouton lecture serti d'un anneau qui tourne pendant l'écoute */
.lecteur-play-cadre { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.lecteur-play-cadre::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgba(243, 214, 143, .9) 25%, transparent 35% 65%, rgba(243, 214, 143, .9) 75%, transparent 85%);
  -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); opacity: .25; }
.lecteur-conteur.joue .lecteur-play-cadre::before { opacity: 1; animation: anneau 6s linear infinite; }
@keyframes anneau { to { transform: rotate(360deg); } }
body.defile .lecteur-play-cadre::before { animation-play-state: paused; }
.lecteur-boutons .btn-rond { border-color: rgba(217, 177, 92, .45); color: var(--laiton-cl); background: rgba(20, 14, 8, .8); }

/* Chapitres */
.chapitres .chapitre.actif { background: linear-gradient(90deg, rgba(217, 177, 92, .18), rgba(217, 177, 92, .04)); border-color: rgba(217, 177, 92, .45); }
.chapitre-num { background: radial-gradient(circle at 35% 30%, rgba(243, 214, 143, .18), transparent 70%); }
.chapitre.fait .chapitre-num { background: radial-gradient(circle at 35% 30%, #f6dc98, var(--laiton) 60%, #a37a2e); }
.debloquer { border-color: rgba(217, 177, 92, .55) !important; background: radial-gradient(120% 120% at 100% 50%, rgba(120, 84, 30, .45), transparent 60%), linear-gradient(165deg, rgba(28, 20, 12, .95), rgba(10, 9, 12, .95)) !important; }
@media (prefers-reduced-motion: reduce) { .ondes i, .lecteur-play-cadre::before, .histoire-tuile::after, .jaquette-cadre::before { animation: none !important; } }

/* v1.37 — Carte légendaire offerte avec chaque histoire du Conteur */
.carte-histoire { display: flex; align-items: center; gap: 14px; margin-top: 12px; position: relative; overflow: hidden;
  border-color: rgba(190, 150, 255, .5) !important; background: radial-gradient(110% 120% at 0% 50%, rgba(120, 80, 190, .35), transparent 60%), linear-gradient(165deg, rgba(28, 20, 34, .95), rgba(10, 9, 14, .95)) !important; }
.carte-histoire > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-histoire b { font-family: var(--titre); color: var(--sable); font-size: 1.02rem; line-height: 1.25; }
.carte-histoire small { color: var(--texte-2); }
.carte-histoire-visuel { width: 84px; flex: none; animation: carte-flotte 4s ease-in-out infinite; }
.carte-histoire-visuel .carte { width: 100%; }
.carte-histoire:not(.obtenue) .carte-histoire-visuel .carte-pleine img { filter: saturate(.85) brightness(.9); }
.carte-histoire::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(220, 190, 255, .14) 50%, transparent 60%); background-size: 250% 100%; animation: reflet-tuile 6s ease-in-out infinite; }
@keyframes carte-flotte { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
body.defile .carte-histoire-visuel, body.defile .carte-histoire::after { animation-play-state: paused; }
.carte.r-legendaire.carte-pleine { box-shadow: 0 0 0 1px rgba(220, 190, 255, .6), 0 0 22px rgba(170, 120, 255, .35); }

/* v1.37.1 — correctif : l'anneau doré ne doit pas capter l'appui sur le bouton lecture */
.lecteur-play-cadre::before { pointer-events: none; z-index: 0; }
.lecteur-play-cadre .lecteur-play { position: relative; z-index: 1; }

/* v1.38 — musique de fond : bouton visible seulement quand le fichier existe */
.btn-musique { display: none; }
html.musique-dispo .btn-musique { display: grid; }
.btn-musique.coupee { opacity: .55; }
/* En-tête plus compact quand il y a 4 boutons ou plus (téléphone) */
@media (max-width: 430px) { .entete-droite { gap: .4rem; } .entete .btn-rond { width: 38px; height: 38px; } .marque span { font-size: .92rem; letter-spacing: .02em; } }

/* v1.39 — Inviter des amis : une ligne fine et discrète, dans l'esprit de la charte */
.invitation { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 10px 14px; text-align: left; cursor: pointer;
  background: transparent; color: var(--texte); border: 1px dashed rgba(217, 177, 92, .45); border-radius: 14px; font: inherit; }
.invitation:active { transform: scale(.98); }
.invitation b { display: block; font-size: .92rem; color: var(--laiton-cl); }
.invitation small { display: block; color: var(--texte-2); font-size: .78rem; }
.invitation-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(217, 177, 92, .5); color: var(--laiton-cl); background: radial-gradient(circle at 35% 30%, rgba(243, 214, 143, .18), transparent 70%); }
.invitation-ico .ico { width: 18px; height: 18px; }

/* v1.39.1 — nom de marque : La Course aux Trésors by Atlas */
.marque-nom { display: inline-flex; flex-direction: column; line-height: 1.05; }
.marque-by { font-family: var(--texte-police, inherit); font-size: .62em; letter-spacing: .18em; text-transform: uppercase; color: var(--laiton); opacity: .9; margin-top: 2px; }
.accueil-by { display: block; font-size: .38em; letter-spacing: .3em; text-transform: uppercase; color: var(--laiton); margin-top: 6px; }

/* v1.40 — Installer l'appli sur l'écran d'accueil */
.installer { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(217, 177, 92, .5); background: linear-gradient(120deg, rgba(40, 28, 12, .92), rgba(12, 18, 32, .92)); }
.installer-txt { flex: 1; min-width: 0; }
.installer-txt b { display: block; font-size: .92rem; color: var(--laiton-cl); }
.installer-txt small { display: block; font-size: .78rem; color: var(--texte-2); line-height: 1.3; }
.installer .btn-petit { flex: none; }
.installer-fermer { position: absolute; top: 2px; right: 6px; background: none; border: 0; color: var(--texte-2); font-size: 1.1rem; padding: 4px; cursor: pointer; }
.installer:has(.installer-fermer) { padding-right: 26px; }
.ecran-accueil .installer { text-align: left; }
.guide-install ol { padding-left: 1.3rem; display: grid; gap: .6rem; margin: .8rem 0; }
.ico-ios { display: inline-block; padding: 0 5px; border: 1px solid var(--filet); border-radius: 5px; }

/* v1.41 — Pochette de 3 cartes : les cartes sortent en éventail, on les retourne une par une */
.trio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.5vw; z-index: 3; pointer-events: none; }
.theatre .trio .tirage { position: relative; inset: auto; width: min(29vw, 150px); pointer-events: auto; opacity: 0;
  transform: translateY(90px) scale(.5) rotate(0deg); transition: transform .8s cubic-bezier(.2, 1.25, .4, 1) calc(var(--i) * .14s), opacity .4s calc(var(--i) * .14s); }
.trio.sortie .tirage { opacity: 1; transform: translateY(0) scale(1) rotate(calc((var(--i) - 1) * 4deg)); }
.trio.n1 .tirage { width: min(62vw, 240px); }
.trio .tirage-dos { gap: 8px; border-width: 2px; }
.trio .tirage-dos .medaillon { width: 58%; }
.trio .tirage-dos span { font-size: .62rem; }
.trio .tirage:not(.devoile) { animation: attire 2.4s ease-in-out infinite; }
.trio .tirage:not(.devoile) ~ .tirage:not(.devoile) { animation: none; }
@keyframes attire { 50% { filter: drop-shadow(0 0 12px rgba(243, 214, 143, .55)); } }
.trio .tirage.devoile { z-index: 2; }
.trio .tirage .aura { inset: -12%; filter: blur(10px); }
.trio .tirage .carte { cursor: zoom-in; }
@media (min-width: 700px) { .trio { gap: 22px; } }

/* v1.43 — Connexion avec Google */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 16px; margin: 6px 0 4px;
  border-radius: 14px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font: 600 1rem/1.2 inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.btn-google:active { transform: scale(.98); }
.logo-google { width: 20px; height: 20px; flex: none; }
.separateur-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--texte-2); font-size: .82rem; }
.separateur-ou::before, .separateur-ou::after { content: ''; flex: 1; height: 1px; background: var(--filet); }

/* v1.44 — Lanternes célestes dessinées (premium) : papier qui luit, flamme vivante, lanternes éteintes en papier sombre */
.lanterne:has(.lanterne-svg) { width: 46px; height: 58px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.lanterne-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lanterne-svg.off { opacity: .8; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.lanterne.allumee .lanterne-svg { animation: lt-flotte 3.6s ease-in-out infinite, lt-lueur 2.6s ease-in-out infinite; }
@keyframes lt-lueur { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 150, 60, .7)) drop-shadow(0 0 14px rgba(255, 120, 40, .3)); } 50% { filter: drop-shadow(0 0 9px rgba(255, 170, 80, .9)) drop-shadow(0 0 20px rgba(255, 120, 40, .45)); } }
.rangee-lanternes .lanterne:nth-child(2) .lanterne-svg { animation-delay: -.7s; }
.rangee-lanternes .lanterne:nth-child(3) .lanterne-svg { animation-delay: -1.4s; }
.rangee-lanternes .lanterne:nth-child(4) .lanterne-svg { animation-delay: -2.1s; }
.rangee-lanternes .lanterne:nth-child(5) .lanterne-svg { animation-delay: -2.8s; }
.lt-flamme { transform-origin: 20px 38px; animation: lt-flamme 1.3s ease-in-out infinite; }
.lt-halo { transform-origin: 20px 28px; animation: lt-halo 2.6s ease-in-out infinite; }
@keyframes lt-flotte { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes lt-flamme { 0%, 100% { transform: scale(1, 1); opacity: .95; } 30% { transform: scale(.92, 1.08); opacity: 1; } 60% { transform: scale(1.06, .94); opacity: .85; } }
@keyframes lt-halo { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.rangee-lanternes { gap: 10px; align-items: flex-end; }
.lanterne-gros:has(.lanterne-svg) { width: 96px; height: 120px; border-radius: 0; background: none; box-shadow: none; animation: none; }
.lanterne-gros .lanterne-svg { animation: lt-flotte 3.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 150, 60, .85)) drop-shadow(0 0 34px rgba(255, 120, 40, .4)); }
.repere-lanterne:has(.lanterne-svg) { width: 30px; height: 38px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.repere-lanterne.allumee .lanterne-svg { filter: drop-shadow(0 0 6px rgba(255, 150, 60, .9)); }
body.defile .lanterne-svg, body.defile .lt-flamme, body.defile .lt-halo { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lanterne-svg, .lt-flamme { animation: none !important; } }
.lanterne:has(.lanterne-svg), .lanterne.allumee:has(.lanterne-svg) { animation: none !important; box-shadow: none !important; background: none !important; }

/* v1.45 — hors réseau */
.bandeau-reseau { display: none; }
body.hors-reseau .bandeau-reseau { display: flex; align-items: center; gap: 8px; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: rgba(10, 18, 32, .92); border: 1px solid rgba(214, 178, 106, .45); color: #f3e6c8; font-size: 12.5px; line-height: 1.3; box-shadow: 0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.point-reseau { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #e0a24a; box-shadow: 0 0 0 3px rgba(224,162,74,.25); }
.hors-reseau-info { padding: 14px 16px; margin: 12px 0; }
.hors-reseau-info b { color: #e9c983; }
.statut-attente { background: rgba(224,162,74,.12); border: 1px solid rgba(224,162,74,.45); color: #f1d9a8; }
.hr-quete { display: block; margin: 10px 0; }

/* v1.49 — Lanterne en vue (caméra) */
html.ar-ouverte, html.ar-ouverte body { overflow: hidden; }
.ar-scene { position: fixed; inset: 0; z-index: 200; background: #05080f; overflow: hidden; opacity: 0; transition: opacity .35s ease; touch-action: manipulation; }
.ar-scene.ar-prete { opacity: 1; }
.ar-scene.ar-sortie { opacity: 0; }
.ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(4,8,18,.55) 100%); }
.ar-haut { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 28px; background: linear-gradient(180deg, rgba(5,9,18,.85), rgba(5,9,18,0)); color: #f3e6c8; }
.ar-titre { display: grid; gap: 2px; min-width: 0; }
.ar-titre b { font-family: 'Cinzel', Georgia, serif; font-size: 17px; color: #f3d68f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-titre small { font-size: 13px; opacity: .9; }
.ar-fermer { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243,214,143,.5); background: rgba(10,18,32,.6); color: #f3e6c8; font-size: 16px; }
.ar-lanterne { position: absolute; top: 34%; left: 50%; width: 120px; height: 162px; transform: translate(-50%, -50%); transition: opacity .4s ease, filter .4s ease; cursor: pointer; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.ar-lanterne.cachee { opacity: 0; pointer-events: none; }
.ar-lanterne .ar-flotte { width: 100%; height: 100%; animation: ar-flotter 3.2s ease-in-out infinite; }
.ar-lanterne svg { width: 100%; height: 100%; display: block; }
.ar-lanterne:not(.allumee)::after { content: ''; position: absolute; left: 50%; top: 55%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(243,214,143,.55); animation: ar-appel 1.8s ease-out infinite; pointer-events: none; }
.ar-lanterne.allumee { filter: drop-shadow(0 0 28px rgba(255,170,70,.95)) drop-shadow(0 0 60px rgba(255,120,30,.6)); }
.ar-lanterne.envol { transition: top 1.6s cubic-bezier(.4,0,.6,1), opacity 1.6s ease, transform 1.6s ease; top: -20%; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.ar-scene.ar-flash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, rgba(255,215,140,.75), rgba(255,160,60,0) 60%); animation: ar-flash .9s ease-out forwards; pointer-events: none; z-index: 1; }
.ar-fleche { position: absolute; top: 34%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; background: rgba(10,18,32,.65); border: 1px solid rgba(243,214,143,.6); animation: ar-pulse 1.2s ease-in-out infinite; }
.ar-fleche::before { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-top: 3px solid #f3d68f; border-right: 3px solid #f3d68f; }
.ar-fleche.gauche { left: 16px; } .ar-fleche.gauche::before { transform: translateX(3px) rotate(-135deg); }
.ar-fleche.droite { right: 16px; } .ar-fleche.droite::before { transform: translateX(-3px) rotate(45deg); }
.ar-bas { position: absolute; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.ar-bas span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(7,13,24,.75); border: 1px solid rgba(243,214,143,.35); color: #f3e6c8; font-size: 13px; }
@keyframes ar-flotter { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes ar-appel { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ar-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes ar-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.souvenir-photo { width: 100%; max-height: 46vh; object-fit: cover; border-radius: 14px; border: 1px solid rgba(243,214,143,.45); margin: 4px 0 10px; }
@media (prefers-reduced-motion: reduce) { .ar-lanterne .ar-flotte, .ar-lanterne::after, .ar-fleche { animation: none; } }

/* v1.50 — Camp allégé */
.aventurier-compact { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 6px 0 14px; color: inherit; text-decoration: none; }
.aventurier-compact .ac-medaillon { flex: 0 0 52px; }
.aventurier-compact .ac-infos { flex: 1; display: grid; gap: 5px; min-width: 0; }
.aventurier-compact .ac-ligne { display: flex; justify-content: space-between; align-items: baseline; }
.aventurier-compact .jauge { display: block; }
.aventurier-compact .jauge > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8862e, #f3d68f); }
.aventurier-compact small { opacity: .75; font-size: 12px; }
.aventurier-compact > .ico { flex: 0 0 auto; opacity: .7; }
.puces-camp { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.puce-camp { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(12,20,36,.78); border: 1px solid rgba(214,178,106,.4); color: #f3e6c8; font-size: 13px; text-decoration: none; }
.puce-lanterne { display: inline-block; width: 14px; height: 19px; }
.puce-lanterne svg { width: 100%; height: 100%; }
.cadeaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cadeau { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; text-align: center; color: inherit; text-decoration: none; }
.cadeau b { font-size: 14px; }
.cadeau small { font-size: 12px; opacity: .78; }
.cadeau.attend small { color: #9fd99a; opacity: 1; }
.cadeau-rond { position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: visible; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(243,214,143,.18), rgba(10,18,32,.9)); border: 1px solid rgba(214,178,106,.55); }
.cadeau-rond > img, .cadeau-rond > .cadeau-portrait, .cadeau-rond > .cadeau-jaquette { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: block; object-fit: cover; }
.cadeau-rond > .cadeau-portrait > *, .cadeau-rond > .cadeau-jaquette > * { width: 100% !important; height: 100% !important; max-width: none; }
.cadeau-rond > .cadeau-jaquette img, .cadeau-rond > .cadeau-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cadeau.attend .cadeau-rond { box-shadow: 0 0 0 3px rgba(243,214,143,.18), 0 0 18px rgba(243,190,90,.45); }
.cadeau-pastille { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e8833a; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid #0a1220; }
/* Camp : le décor reste visible mais l'essentiel tient sur un écran */
.camp-tete.camp-accueil { padding-top: 16vh; }
.camp-tete.camp-accueil .camp-titre { font-size: clamp(24px, 7vw, 32px); }

/* v1.51 — Maîtrise des milieux et Mes lieux */
.maitrise-titre { margin: 0 0 10px; text-align: center; }
.maitrise-titre b { color: #f3d68f; }
.milieu .milieu-img { position: relative; }
.milieu-compte { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #0a1220; border: 1px solid rgba(243,214,143,.6); color: #f3d68f; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.rang-nom { display: block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.milieu.rang-1 .milieu-img { box-shadow: 0 0 0 3px #b07a43; }
.milieu.rang-2 .milieu-img { box-shadow: 0 0 0 3px #c9d2dc, 0 0 12px rgba(201,210,220,.45); }
.milieu.rang-3 .milieu-img { box-shadow: 0 0 0 3px #f3d68f, 0 0 16px rgba(243,214,143,.7); }
.milieu.rang-1 .rang-nom { color: #d29a62; } .milieu.rang-2 .rang-nom { color: #dfe6ee; } .milieu.rang-3 .rang-nom { color: #f3d68f; }
.maitrise .btn { margin-top: 12px; }
#carte-lieux { height: 260px; margin: 6px 0 14px; }
.lieux-milieu { margin: 10px 0; padding: 12px 14px; }
.lm-tete { display: flex; align-items: center; gap: 10px; }
.lm-tete b { flex: 1; }
.rang-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(243,214,143,.35); opacity: .9; }
.rang-badge.rang-1 { color: #d29a62; border-color: #b07a43; } .rang-badge.rang-2 { color: #dfe6ee; border-color: #c9d2dc; } .rang-badge.rang-3 { color: #f3d68f; border-color: #f3d68f; }
.lm-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lm-liste li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-top: 1px solid rgba(214,178,106,.15); padding-top: 6px; }
.lm-liste small { opacity: .7; white-space: nowrap; }
.rang-medaille { width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; }
.rang-medaille .pastille { width: 76px; height: 76px; }
.rang-medaille.rang-2 { box-shadow: 0 0 0 4px #c9d2dc, 0 0 26px rgba(201,210,220,.6); }
.rang-medaille.rang-3 { box-shadow: 0 0 0 4px #f3d68f, 0 0 30px rgba(243,214,143,.8); }
.maitrise .milieu { min-width: 0; }
.milieu .rang-nom { font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; }
.milieu .milieu-compte { font-size: 11px; }

/* v1.52 — Le Monde d'Atlas (plateau, test interne) */
.puce-plateau { border-color: rgba(243,214,143,.75); background: linear-gradient(90deg, rgba(60,40,10,.85), rgba(12,20,36,.85)); }
.plateau-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: center; padding: 14px; }
.plateau-tete .btn { grid-column: 1 / -1; }
.pt-des { display: flex; align-items: baseline; gap: 6px; }
.pt-des b { font-size: 30px; color: #f3d68f; font-family: 'Cinzel', Georgia, serif; }
.pt-des small, .pt-frag small { opacity: .8; font-size: 12px; }
.pt-frag { display: grid; justify-items: end; gap: 2px; font-size: 15px; letter-spacing: -2px; }
.pt-frag small { letter-spacing: 0; }
.pt-vide { filter: grayscale(1); opacity: .28; }
.pt-defi { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(224,162,74,.12); border: 1px solid rgba(224,162,74,.4); font-size: 14px; }
.plateau { position: relative; width: 100%; margin: 14px 0 6px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(ellipse at 30% 10%, rgba(63,122,87,.35), transparent 45%), radial-gradient(ellipse at 70% 40%, rgba(47,111,143,.35), transparent 45%), radial-gradient(ellipse at 30% 75%, rgba(125,127,140,.3), transparent 45%), radial-gradient(ellipse at 70% 95%, rgba(201,161,90,.3), transparent 40%), linear-gradient(180deg, #0d1a24, #0a1220);
  border: 1px solid rgba(214,178,106,.35); }
.plateau-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.plateau .case { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 70%, #000); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #1a2333), #0b1422); display: grid; place-items: center; padding: 0; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.45); opacity: .82; }
.plateau .case.visitee { opacity: 1; }
.plateau .case-ico { font-size: 18px; line-height: 1; }
.plateau .case-porte { width: 15.5%; border-color: #f3d68f; box-shadow: 0 0 0 3px rgba(243,214,143,.18), 0 3px 10px rgba(0,0,0,.5); overflow: visible; }
.plateau .case-img { width: 100%; height: 100%; border-radius: 50%; background: center / cover no-repeat; }
.plateau .case-porte.fermee .case-img { filter: grayscale(.9) brightness(.55); }
.plateau .case-cadenas { position: absolute; right: -6px; bottom: -6px; font-size: 14px; background: #0a1220; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(243,214,143,.5); }
.plateau .case-final { width: 17%; border-color: #f3d68f; background: radial-gradient(circle, #ffe7a8, #c98a2e 70%, #6b4510); box-shadow: 0 0 22px rgba(243,214,143,.7); opacity: 1; }
.plateau .case-final .case-ico { font-size: 24px; }
.region-nom { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: 'Cinzel', Georgia, serif; font-size: 10.5px; letter-spacing: .06em; color: #f3d68f; text-shadow: 0 1px 6px #000; pointer-events: none; }
.pion { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -88%); transition: left .28s ease, top .28s ease; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); pointer-events: none; }
.pion svg, .pion img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #f3d68f; }
.pion.saut { animation: pion-saut .3s ease; }
@keyframes pion-saut { 0% { margin-top: 0; } 45% { margin-top: -12px; } 100% { margin-top: 0; } }
.pt-regles p { margin: 6px 0; font-size: 14px; }
.pt-portes { display: grid; gap: 8px; }
.pt-porte { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; }
.pt-porte small { grid-column: 2; opacity: .75; font-size: 12px; }
.pt-porte.ouverte b { color: #9fd99a; }
.pt-journal p { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 14px; }
.pt-journal small { opacity: .65; }
.de-scene { display: grid; justify-items: center; gap: 14px; padding: 18px 0 6px; }
.de-scene p { font-family: 'Cinzel', Georgia, serif; font-size: 20px; color: #f3d68f; margin: 0; }
.de-gros { width: 96px; height: 96px; border-radius: 20px; background: linear-gradient(145deg, #fff8e6, #e8d3a4); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.5); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14px; gap: 4px; animation: de-roule .16s linear infinite; }
.de-gros.pose { animation: de-pose .4s ease-out; }
.de-gros i { width: 16px; height: 16px; border-radius: 50%; background: #3a2410; place-self: center; }
@keyframes de-roule { 0% { transform: rotate(-8deg) scale(.96); } 50% { transform: rotate(8deg) scale(1.02); } 100% { transform: rotate(-8deg) scale(.96); } }
@keyframes de-pose { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.de-gros[data-v="1"] i:nth-child(1) { grid-area: 2 / 2; }
.de-gros[data-v="2"] i:nth-child(1) { grid-area: 1 / 1; } .de-gros[data-v="2"] i:nth-child(2) { grid-area: 3 / 3; }
.de-gros[data-v="3"] i:nth-child(1) { grid-area: 1 / 1; } .de-gros[data-v="3"] i:nth-child(2) { grid-area: 2 / 2; } .de-gros[data-v="3"] i:nth-child(3) { grid-area: 3 / 3; }
.de-gros[data-v="4"] i:nth-child(1) { grid-area: 1 / 1; } .de-gros[data-v="4"] i:nth-child(2) { grid-area: 1 / 3; } .de-gros[data-v="4"] i:nth-child(3) { grid-area: 3 / 1; } .de-gros[data-v="4"] i:nth-child(4) { grid-area: 3 / 3; }
.de-gros[data-v="5"] i:nth-child(1) { grid-area: 1 / 1; } .de-gros[data-v="5"] i:nth-child(2) { grid-area: 1 / 3; } .de-gros[data-v="5"] i:nth-child(3) { grid-area: 2 / 2; } .de-gros[data-v="5"] i:nth-child(4) { grid-area: 3 / 1; } .de-gros[data-v="5"] i:nth-child(5) { grid-area: 3 / 3; }
.de-gros[data-v="6"] i:nth-child(1) { grid-area: 1 / 1; } .de-gros[data-v="6"] i:nth-child(2) { grid-area: 2 / 1; } .de-gros[data-v="6"] i:nth-child(3) { grid-area: 3 / 1; } .de-gros[data-v="6"] i:nth-child(4) { grid-area: 1 / 3; } .de-gros[data-v="6"] i:nth-child(5) { grid-area: 2 / 3; } .de-gros[data-v="6"] i:nth-child(6) { grid-area: 3 / 3; }
@media (prefers-reduced-motion: reduce) { .de-gros, .pion.saut { animation: none; } }

/* v1.53 — « En ce moment » : cartes illustrées au Camp */
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.moments.impair > .moment:first-child { grid-column: 1 / -1; min-height: 120px; }
.moment { position: relative; min-height: 104px; padding: 0; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  background: var(--img) center / cover no-repeat, linear-gradient(135deg, #1b2a3c, #0b1422); border-color: rgba(214,178,106,.55); }
.moment-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,18,.05) 20%, rgba(5,9,18,.88) 100%); }
.moment-txt { position: relative; display: grid; gap: 2px; padding: 10px 12px; }
.moment-txt b { font-family: 'Cinzel', Georgia, serif; font-size: 15px; line-height: 1.15; color: #f8ecd0; text-shadow: 0 2px 8px #000; }
.moment-txt small { font-size: 12.5px; color: #f3d68f; text-shadow: 0 1px 6px #000; }
.moment-badge { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(10,18,32,.8); border: 1px solid rgba(243,214,143,.7); color: #f3d68f; }
.moment-plateau { box-shadow: 0 0 0 1px rgba(243,214,143,.6), 0 0 22px rgba(243,190,90,.25); }

/* v1.53 — Plateau premium : carte peinte + médaillons peints */
.plateau { background: var(--carte) center / cover no-repeat, linear-gradient(180deg, #0d1a24, #0a1220); border: 1px solid rgba(243,214,143,.55); box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.55); }
.plateau::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(3,6,14,.6) 100%); pointer-events: none; }
.chemin-or { filter: drop-shadow(0 0 3px rgba(243,214,143,.8)); }
.plateau .case { width: 14.5%; background: #0b1422; border: 2px solid #c9a35a; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.6); opacity: .9; overflow: hidden; }
.plateau .case.visitee { opacity: 1; }
.plateau.jetons-ok .case-jeton { position: absolute; inset: -4%; border-radius: 50%; background: var(--jetons) var(--pos) / 460% 230% no-repeat; }
.plateau.jetons-ok .case-ico { display: none; }
.plateau .case:not(.visitee):not(.case-porte):not(.case-final) .case-jeton { filter: saturate(.75) brightness(.8); }
.plateau .case.ici { box-shadow: 0 0 0 3px #f3d68f, 0 0 22px rgba(243,214,143,.85); }
.plateau .case-porte { width: 17%; border: 3px solid #f3d68f; box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 18px rgba(243,214,143,.45); overflow: visible; }
.plateau .case-porte .case-img { border-radius: 50%; }
.plateau .case-final { width: 19%; border: 3px solid #f3d68f; box-shadow: 0 0 26px rgba(255,200,90,.9), 0 0 60px rgba(255,170,60,.45); animation: tresor-pulse 2.6s ease-in-out infinite; }
@keyframes tresor-pulse { 0%, 100% { box-shadow: 0 0 22px rgba(255,200,90,.8), 0 0 50px rgba(255,170,60,.35); } 50% { box-shadow: 0 0 34px rgba(255,210,110,1), 0 0 80px rgba(255,170,60,.6); } }
.plateau .region-nom { padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(10,16,28,0), rgba(10,16,28,.85) 20%, rgba(10,16,28,.85) 80%, rgba(10,16,28,0)); font-size: 11px; }
.plateau .pion { width: 46px; height: 46px; }
.plateau .pion svg, .plateau .pion img { width: 46px; height: 46px; border: 3px solid #f3d68f; box-shadow: 0 0 16px rgba(243,214,143,.9); }
@media (prefers-reduced-motion: reduce) { .plateau .case-final { animation: none; } }
.plateau .case { width: 12.5%; }
.plateau .case-porte { width: 15%; }
.plateau .case-final { width: 18%; }
.aventurier-compact .ac-ligne { gap: 8px; } .aventurier-compact .ac-ligne .or { white-space: nowrap; }

/* v1.54 — carte vivante du plateau */
.plateau-anim { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.plateau-fond, .plateau .case, .plateau .region-nom, .plateau .pion { z-index: 1; }
.luciole { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 6px 2px rgba(255,226,120,.85); opacity: 0; animation: luciole var(--d) ease-in-out var(--r) infinite; }
@keyframes luciole { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 50% { transform: translate(14px, -10px); opacity: .5; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-8px, 6px); } }
.reflet { position: absolute; width: 18px; height: 2px; border-radius: 2px; background: rgba(220,235,255,.8); filter: blur(.6px); opacity: 0; animation: reflet 4s ease-in-out var(--r) infinite; }
@keyframes reflet { 0%, 100% { opacity: 0; transform: scaleX(.4); } 50% { opacity: .7; transform: scaleX(1); } }
.feu-camp { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,90,.75), rgba(255,140,40,0) 70%); animation: feu 1.4s ease-in-out infinite alternate; }
@keyframes feu { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
.cascade-eclat { position: absolute; background: repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 10px, rgba(230,245,255,.35) 10px 13px, rgba(255,255,255,0) 13px 26px); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); animation: cascade 1.1s linear infinite; mix-blend-mode: screen; }
@keyframes cascade { from { background-position: 0 0; } to { background-position: 0 26px; } }
.phare { position: absolute; width: 0; height: 0; }
.phare::before { content: ''; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle, #fff6d2, rgba(255,210,110,0) 70%); animation: feu 1.6s ease-in-out infinite alternate; }
.faisceau { position: absolute; left: 0; top: -14px; width: 150px; height: 28px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,226,140,.55), rgba(255,226,140,0)); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); animation: balayage 7s ease-in-out infinite alternate; mix-blend-mode: screen; }
.phare.droite .faisceau { transform-origin: 0 50%; animation-name: balayage-d; animation-delay: -3s; }
@keyframes balayage { from { transform: rotate(-55deg); } to { transform: rotate(25deg); } }
@keyframes balayage-d { from { transform: rotate(155deg); } to { transform: rotate(235deg); } }
.tresor-lueur { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,120,.8), rgba(255,170,60,0) 70%); animation: feu 2.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .plateau-anim * { animation: none !important; } }

/* v1.55 — La Route du Trésor : interface « jeu vidéo » */
.hud { position: sticky; top: 0; z-index: 20; margin: 0 -2px 10px; padding: 10px 12px 8px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(7,13,24,.97), rgba(10,18,32,.92)); border: 1px solid rgba(243,214,143,.4); border-top: 0; box-shadow: 0 8px 22px rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.hud-ligne { display: flex; align-items: center; gap: 10px; }
.hud-des { position: relative; flex: 0 0 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #3a2a10, #120c05); border: 2px solid #6b5326; }
.hud-des.actif { border-color: #f3d68f; box-shadow: 0 0 16px rgba(243,214,143,.55); }
.hud-de { font-size: 26px; line-height: 1; }
.hud-des b { position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #e8833a; color: #fff; font-size: 15px; border: 2px solid #0a1220; font-family: 'Cinzel', Georgia, serif; }
.hud-route { flex: 1; min-width: 0; display: grid; gap: 6px; }
.hud-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hud-titre b { font-family: 'Cinzel', Georgia, serif; font-size: 15px; color: #f3d68f; letter-spacing: .03em; white-space: nowrap; }
.hud-titre span { font-size: 12px; opacity: .8; white-space: nowrap; }
.hud-barre { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(243,214,143,.35); overflow: visible; }
.hud-barre > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5a1c, #f3d68f, #fff3c4); box-shadow: 0 0 10px rgba(243,214,143,.7); transition: width .6s ease; }
.hud-coffre { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 18px; filter: drop-shadow(0 0 6px rgba(255,210,110,.9)); }
.hud-frag { flex: 0 0 auto; display: grid; justify-items: center; font-size: 12px; }
.hud-frag span { font-size: 22px; }
.hud-frag b { color: #f3d68f; }
.hud-regions { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 9px; }
.hud-region { position: relative; aspect-ratio: 1; border-radius: 50%; background: center / cover no-repeat; border: 2px solid rgba(243,214,143,.25); filter: grayscale(.85) brightness(.55); }
.hud-region.atteinte { filter: none; border-color: #f3d68f; }
.hud-region.ici { filter: none; border-color: #fff3c4; box-shadow: 0 0 0 2px rgba(243,214,143,.5), 0 0 14px rgba(243,214,143,.9); animation: hud-ici 1.6s ease-in-out infinite alternate; }
@keyframes hud-ici { from { transform: scale(1); } to { transform: scale(1.1); } }
.hud-region i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 10px; }
.hud-region em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-weight: 800; font-size: 11px; color: #fff; text-shadow: 0 1px 4px #000; }
.pt-test { margin: 0 0 6px; opacity: .7; }
.pt-defi { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(224,162,74,.14); border: 1px solid rgba(224,162,74,.5); font-size: 14px; }
.pt-defi small { display: block; opacity: .8; }
.pt-sortir { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(63,122,87,.35), rgba(63,122,87,.1)); border: 1px solid rgba(110,190,130,.45); font-size: 14px; }
.pt-regles h3, .pt-portes h3, .pt-hall h3, .pt-journal h3 { margin: 0 0 8px; font-family: 'Cinzel', Georgia, serif; font-size: 15px; color: #f3d68f; }
.pt-regles, .pt-portes, .pt-hall, .pt-journal { margin: 10px 0; }
.hall-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(214,178,106,.15); }
.hall-ligne b { flex: 1; }
.hall-ligne.moi b { color: #f3d68f; }
.hall-rang { font-family: 'Cinzel', Georgia, serif; color: #f3d68f; min-width: 40px; }
.pt-espace { height: 96px; }
.lancer-de { position: fixed; z-index: 30; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-size: 22px; font-weight: 800; color: #2a1406; border: 2px solid #fff3c4;
  background: linear-gradient(180deg, #ffe7a8, #e0a13c 60%, #a8661c); box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 4px rgba(243,214,143,.18); }
.lancer-de span { font-size: 17px; letter-spacing: .06em; text-transform: uppercase; font-family: 'Cinzel', Georgia, serif; }
.lancer-de em { font-style: normal; font-size: 15px; background: rgba(42,20,6,.85); color: #ffe7a8; padding: 2px 8px; border-radius: 999px; }
.lancer-de.pret { animation: lancer-appel 1.6s ease-in-out infinite; }
.lancer-de:not(.pret) { background: linear-gradient(180deg, #2c4a36, #1a2e22); color: #d8f0dc; border-color: rgba(110,190,130,.7); font-size: 18px; }
.lancer-de:disabled { opacity: .6; animation: none; }
@keyframes lancer-appel { 0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 4px rgba(243,214,143,.18); transform: translateX(-50%) scale(1); } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 10px rgba(243,214,143,.08), 0 0 30px rgba(243,190,90,.7); transform: translateX(-50%) scale(1.04); } }
.plateau .case.portee { box-shadow: 0 0 0 2px #fff3c4, 0 0 16px rgba(243,214,143,.9); animation: portee 1.4s ease-in-out calc(var(--k) * .12s) infinite alternate; opacity: 1; }
@keyframes portee { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.plateau .case.foulee { animation: foulee .4s ease; }
@keyframes foulee { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.18); } 100% { transform: translate(-50%, -50%) scale(1); } }
.plateau .case-porte.fermee { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 16px rgba(220,60,40,.6); }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fx-gain { position: absolute; width: 0; height: 0; }
.fx-gain i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd27a; animation: etincelle .9s ease-out forwards; transform: rotate(var(--a)) translateX(0); }
@keyframes etincelle { to { transform: rotate(var(--a)) translateX(var(--d)); opacity: 0; } }
.fx-gain b { position: absolute; left: 0; top: -20px; transform: translateX(-50%); white-space: nowrap; font-family: 'Cinzel', Georgia, serif; font-size: 18px; color: #fff3c4; text-shadow: 0 0 10px #e8a33a, 0 2px 6px #000; animation: monte 1.6s ease-out forwards; }
.fx-gain.malus b { color: #c9d6ff; text-shadow: 0 0 10px #5b7bd8, 0 2px 6px #000; }
.fx-gain.malus i { background: #c9d6ff; box-shadow: 0 0 8px #7b9bf0; }
.fx-gain.defi b { color: #ffe08a; }
@keyframes monte { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.banniere-region { position: fixed; z-index: 400; left: 0; right: 0; top: 38%; padding: 18px 16px; text-align: center; background: linear-gradient(90deg, rgba(7,13,24,0), rgba(7,13,24,.94) 15%, rgba(7,13,24,.94) 85%, rgba(7,13,24,0)); border-top: 1px solid rgba(243,214,143,.6); border-bottom: 1px solid rgba(243,214,143,.6); animation: banniere-entree .5s ease-out; }
.banniere-region small { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #d9cbb0; }
.banniere-region b { display: block; font-family: 'Cinzel', Georgia, serif; font-size: 26px; color: #f3d68f; text-shadow: 0 0 18px rgba(243,214,143,.7); }
.banniere-region.sortie { opacity: 0; transition: opacity .45s ease; }
@keyframes banniere-entree { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: scaleX(1); } }
.fenetre-de .de-resultat { font-size: 44px; font-family: 'Cinzel', Georgia, serif; color: #f3d68f; text-shadow: 0 0 16px rgba(243,214,143,.8); }
.case-medaille { width: 110px; height: 110px; margin: 0 auto 10px; border-radius: 50%; background: var(--jetons) var(--pos) / 460% 230% no-repeat; box-shadow: 0 0 0 3px #f3d68f, 0 0 26px rgba(243,214,143,.6); animation: medaille 0.6s ease-out; }
@keyframes medaille { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.porte-scellee { position: relative; width: 110px; height: 110px; margin: 0 auto 10px; border-radius: 50%; background: center / cover no-repeat; border: 3px solid #c0392b; filter: grayscale(.7) brightness(.6); box-shadow: 0 0 24px rgba(220,60,40,.6); display: grid; place-items: center; }
.porte-scellee i { font-style: normal; font-size: 40px; filter: none; }
.porte-scellee.ouverte { border-color: #f3d68f; filter: none; box-shadow: 0 0 26px rgba(243,214,143,.7); }
.finale { text-align: center; }
.finale-couronne { font-size: 64px; animation: medaille .8s ease-out, flottement 3s ease-in-out .8s infinite; filter: drop-shadow(0 0 20px rgba(255,210,110,.9)); }
@keyframes flottement { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.finale-cartes { display: flex; justify-content: center; gap: 8px; margin: 8px 0 12px; }
.finale-carte { width: 30%; max-width: 110px; animation: medaille .6s ease-out calc(var(--i) * .35s + .3s) both; }
.finale-carte:last-child { filter: drop-shadow(0 0 14px rgba(255,210,110,.9)); }
@media (prefers-reduced-motion: reduce) { .lancer-de.pret, .hud-region.ici, .plateau .case.portee, .finale-couronne { animation: none; } }

/* v1.55 — Camp « Dehors / Au camp » */
.saison-fil { display: flex; align-items: center; gap: 6px; margin: -6px 0 12px; padding: 8px 14px; border-radius: 999px; background: rgba(12,20,36,.82); border: 1px solid rgba(243,214,143,.45); color: #f3e6c8; font-size: 13px; text-decoration: none; }
.saison-fil b { color: #f3d68f; }
.saison-fil span { margin-left: auto; color: #f3d68f; font-weight: 700; }
.zone { margin: 18px 0 6px; padding: 12px; border-radius: 20px; }
.zone-dehors { background: linear-gradient(180deg, rgba(40,90,60,.32), rgba(20,40,30,.12)); border: 1px solid rgba(110,190,130,.4); }
.zone-camp { background: linear-gradient(180deg, rgba(120,85,30,.28), rgba(40,28,12,.12)); border: 1px solid rgba(243,214,143,.38); }
.zone-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.zone-titre span { font-family: 'Cinzel', Georgia, serif; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.zone-dehors .zone-titre span { color: #a8e0b4; }
.zone-camp .zone-titre span { color: #f3d68f; }
.zone-titre small { font-size: 12px; opacity: .8; text-align: right; }
.tuiles-jour.n2, .tuiles-jour.n4 { grid-template-columns: 1fr 1fr; }
.cadeaux.camp-icones { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 8px; }
.camp-icones .cadeau { padding: 10px 2px 8px; }
.camp-icones .cadeau-rond { width: 54px; height: 54px; }
.camp-icones .cadeau-rond > img, .camp-icones .cadeau-rond > .cadeau-portrait, .camp-icones .cadeau-rond > .cadeau-jaquette { width: 46px; height: 46px; }
.camp-icones .cadeau b { font-size: 12.5px; }
.camp-icones .cadeau small { font-size: 11px; }
.gain-de { display: block; margin: 8px auto; padding: 8px 14px; width: fit-content; border-radius: 999px; background: linear-gradient(90deg, #3a2a10, #5a3f14); border: 1px solid #f3d68f; color: #ffe7a8; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 0 14px rgba(243,214,143,.45); }
.zone-titre { flex-wrap: wrap; row-gap: 2px; }
.zone-titre span { white-space: nowrap; }
.zone-titre small { flex: 1 1 140px; }

/* v1.56 — Camp en 3 niveaux : mission du jour, Dehors (rail), Au camp (dock) */
.camp-tete.camp-v3 { padding-top: 14vh; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.camp-tete.camp-v3 .camp-salut { font-family: 'Cinzel', Georgia, serif; font-size: clamp(22px, 6.4vw, 28px); color: #f8ecd0; }
.camp-badges { display: flex; gap: 6px; flex: 0 0 auto; }
.badge-serie, .badge-saison { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(10,16,28,.82); border: 1px solid rgba(243,214,143,.5); color: #f3e6c8; text-decoration: none; text-shadow: none; }
.badge-serie.fait { border-color: #ff9a3c; color: #ffd2a0; box-shadow: 0 0 12px rgba(255,140,40,.45); }
.aventurier-ligne { display: flex; align-items: center; gap: 10px; margin: 10px 2px 12px; color: inherit; text-decoration: none; }
.aventurier-ligne .ac-medaillon { flex: 0 0 44px; }
.aventurier-ligne .ac-infos { flex: 1; display: grid; gap: 5px; }
.aventurier-ligne .ac-ligne { display: flex; justify-content: space-between; font-size: 14px; }
.aventurier-ligne .jauge { display: block; height: 6px; }
.aventurier-ligne .jauge > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8862e, #f3d68f); }
.serie-rappel { margin: -4px 2px 12px; font-size: 13px; color: #ffcf9a; }
.mission { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 16px; border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none;
  background: var(--img) center / cover no-repeat, #0b1422; border: 1px solid rgba(243,214,143,.65); box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); }
.mission-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,18,.35) 0%, rgba(5,9,18,.05) 35%, rgba(5,9,18,.92) 100%); }
.mission-haut, .mission-bas { position: relative; display: grid; gap: 6px; }
.mission-haut { grid-template-columns: auto 1fr; align-items: center; }
.mission-etiquette { padding: 5px 10px; border-radius: 999px; background: rgba(10,16,28,.8); border: 1px solid rgba(243,214,143,.6); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f3d68f; width: fit-content; }
.mission-sur { justify-self: end; font-size: 12px; opacity: .9; text-shadow: 0 1px 6px #000; }
.mission-titre { font-family: 'Cinzel', Georgia, serif; font-size: clamp(24px, 7vw, 30px); line-height: 1.1; text-shadow: 0 2px 12px #000; }
.mission-bas small { font-size: 14px; opacity: .92; text-shadow: 0 1px 6px #000; }
.mission-gains { width: fit-content; padding: 4px 10px; border-radius: 999px; background: rgba(243,214,143,.18); border: 1px solid rgba(243,214,143,.5); color: #ffe7a8; font-weight: 700; font-size: 13px; }
.mission-bouton { margin-top: 6px; padding: 14px; border-radius: 16px; text-align: center; font-weight: 800; font-size: 17px; color: #2a1406; background: linear-gradient(180deg, #ffe7a8, #e0a13c 60%, #a8661c); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.camp-section { display: flex; align-items: baseline; gap: 8px; margin: 26px 2px 10px; font-family: 'Cinzel', Georgia, serif; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.camp-section small { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: .7; font-family: system-ui, sans-serif; }
.dehors-titre { color: #a8e0b4; }
.camp-titre-dock { color: #f3d68f; }
.dehors-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
.dehors-rail::-webkit-scrollbar { display: none; }
.dehors-carte { position: relative; flex: 0 0 78%; max-width: 340px; height: 190px; scroll-snap-align: start; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  background: var(--img) center / cover no-repeat, #0b1422; border: 1px solid rgba(110,190,130,.55); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.dehors-txt { position: relative; display: grid; gap: 2px; padding: 14px; }
.dehors-txt b { font-family: 'Cinzel', Georgia, serif; font-size: 21px; text-shadow: 0 2px 10px #000; }
.dehors-txt small { font-size: 13px; color: #cdeed4; text-shadow: 0 1px 6px #000; }
.dehors-etiquette { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(10,18,32,.8); border: 1px solid rgba(110,190,130,.7); color: #cdeed4; font-weight: 700; font-size: 13px; }
.dock { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 4px; padding: 12px 6px; border-radius: 22px; background: linear-gradient(180deg, rgba(40,28,12,.55), rgba(15,12,8,.35)); border: 1px solid rgba(243,214,143,.28); margin-bottom: 18px; }
.dock .cadeau { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0; }
.dock .cadeau::before, .dock .cadeau::after { display: none !important; }
.dock .cadeau-rond { width: 56px; height: 56px; }
.dock .cadeau-rond > img, .dock .cadeau-rond > .cadeau-portrait, .dock .cadeau-rond > .cadeau-jaquette { width: 48px; height: 48px; }
.dock .cadeau:not(.attend) .cadeau-rond { filter: saturate(.6) brightness(.8); }
.dock .cadeau.attend .cadeau-rond { animation: dock-appel 2.2s ease-in-out infinite; }
@keyframes dock-appel { 0%, 100% { box-shadow: 0 0 0 2px rgba(243,214,143,.25), 0 0 10px rgba(243,190,90,.3); } 50% { box-shadow: 0 0 0 3px rgba(243,214,143,.55), 0 0 20px rgba(243,190,90,.75); } }
.dock .cadeau b { font-size: 12px; }
.dock .cadeau small { font-size: 10.5px; }
.fenetre-tuto .tuto { text-align: center; }
.tuto-image { height: 200px; margin: -4px -4px 12px; border-radius: 18px; background: center / cover no-repeat; border: 1px solid rgba(243,214,143,.45); }
.tuto-points { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.tuto-points i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,214,143,.3); }
.tuto-points i.actif { background: #f3d68f; width: 22px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .dock .cadeau.attend .cadeau-rond { animation: none; } }

/* v1.57 — carte d'invitation */
.fenetre-invitation .invitation-apercu { display: grid; gap: 10px; }
.invitation-image { width: 100%; max-height: 58vh; object-fit: contain; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 26px rgba(243,214,143,.25); }

/* v1.58 — L'Herboriste bavarde et l'Herbier */
.bulle-herbo { position: relative; margin-top: 6px; padding: 12px 14px 10px; border-radius: 16px; background: rgba(240, 250, 230, .07); border: 1px solid rgba(182, 227, 156, .35); }
.bulle-herbo::before { content: ''; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px; rotate: 45deg; background: inherit; border-left: 1px solid rgba(182, 227, 156, .35); border-bottom: 1px solid rgba(182, 227, 156, .35); }
.bulle-etiquette { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b6e39c; margin-bottom: 4px; }
.bulle-herbo.t-mission .bulle-etiquette { color: #ffd479; }
.bulle-herbo.t-devinette .bulle-etiquette { color: #9fd3ff; }
.bulle-herbo.t-securite .bulle-etiquette { color: #ffb38a; }
.bulle-herbo p { margin: 0 0 8px; font-family: Georgia, serif; font-style: italic; line-height: 1.45; }
.reponse-devinette { color: #ffd479; font-style: normal !important; font-weight: 700; font-family: var(--titre) !important; }
.lien-autre { display: inline-block; background: none; border: 0; padding: 4px 0; color: var(--laiton-cl); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vignette { display: block; width: 64px; aspect-ratio: 1; border-radius: 50%; background-image: var(--herb); background-size: 460% 230%; background-position: var(--pos); background-repeat: no-repeat; background-color: #2a1d0f; flex: none; }
.vignette.v-rare { box-shadow: 0 0 0 2px #7fb4ff, 0 0 14px rgba(127, 180, 255, .55); }
.vignette.v-precieuse { box-shadow: 0 0 0 2px #ffd479, 0 0 20px rgba(255, 212, 121, .75); }
.vignette.silhouette { filter: grayscale(1) brightness(.25); opacity: .55; box-shadow: none; }
.vignette.grande { width: 130px; }
.mini-herbier { width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.mini-herbier .vignette { width: 50px; }
.herbier-resume { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.herbier-resume b { font-family: var(--titre); font-size: 1.6rem; color: var(--laiton-cl); }
.herbier-resume small { opacity: .8; line-height: 1.4; }
.grille-herbier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-top: 10px; }
.case-herbier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.case-herbier .vignette { width: min(64px, 100%); }
.case-herbier b { font-size: .68rem; line-height: 1.15; }
.case-herbier small { font-size: .6rem; opacity: .6; }
.case-herbier em { position: absolute; top: -2px; right: 2px; font-style: normal; font-size: .62rem; font-weight: 800; background: #2d5a33; color: #f2ffe6; border-radius: 9px; padding: 1px 5px; }
.case-herbier.vide { cursor: default; }
.page-herbier.complete { border-color: rgba(255, 212, 121, .6); box-shadow: 0 0 24px rgba(255, 212, 121, .18); }
.vignette-zoom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.vignette-zoom .vignette.grande { width: 170px; }
.rarete-herb { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #d9e8cf; }
.rarete-herb.r-rare { color: #9fd3ff; background: rgba(127, 180, 255, .15); }
.rarete-herb.r-precieuse { color: #ffd479; background: rgba(255, 212, 121, .15); }
.jeton-sort.decale { left: 29%; transition: left .5s, scale .5s; scale: .7; }
.vignette-sort { position: absolute; left: 71%; top: 42%; translate: -50% -50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 150px; animation: vignette-envol 1s cubic-bezier(.2, 1.4, .4, 1) both; }
.vignette-sort b { font-family: var(--titre); color: #f2ffe6; font-size: 1rem; text-shadow: 0 2px 6px #000; }
.vignette-sort em { font-style: normal; font-weight: 800; font-size: .75rem; color: #ffd479; }
.vignette-sort .vignette { animation: vignette-tourne 1s ease-out both; }
.vignette-sort.r-rare .vignette { box-shadow: 0 0 0 3px #7fb4ff, 0 0 40px rgba(127, 180, 255, .8); }
.vignette-sort.r-precieuse .vignette { box-shadow: 0 0 0 3px #ffd479, 0 0 60px rgba(255, 212, 121, .95); }
.vignette-sort.r-commune .vignette { box-shadow: 0 0 0 3px #b6e39c, 0 0 30px rgba(182, 227, 156, .6); }
@keyframes vignette-envol { from { transform: translateY(110px) scale(.2); opacity: 0; } }
@keyframes vignette-tourne { from { rotate: -200deg; } }
.page-complete { margin: 4px 0 12px; padding: 12px; border-radius: 14px; background: rgba(255, 212, 121, .1); border: 1px solid rgba(255, 212, 121, .45); color: #ffe6a8; }
.page-complete .evt-carte { margin: 10px auto 6px; max-width: 160px; }
.theatre-bas .lien-autre { margin-top: 6px; }
.page-ok { display: block; color: #ffd479; font-weight: 700; font-size: .75rem; margin-top: 2px; }
.page-complete .evt-carte { max-width: 120px; }
/* v1.58.1 — provisions peintes */
.medaillon-prov { display: block; flex: none; aspect-ratio: 1; border-radius: 50%; background-image: var(--herb); background-size: 460% 230%; background-position: var(--pos); background-repeat: no-repeat; background-color: #2a1d0f; box-shadow: 0 0 0 2px #d9b15c, 0 0 18px rgba(217, 177, 92, .45); }
.medaillon-prov.petit { width: 44px; box-shadow: 0 0 0 1.5px #b8962f; }
.medaillon-prov.grand { width: 130px; animation: vignette-tourne 1s ease-out both; box-shadow: 0 0 0 3px #d9b15c, 0 0 40px rgba(217, 177, 92, .7); }
.jeton-peint { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 160px; }
.jeton-peint b { font-family: var(--titre); color: #f2ffe6; font-size: 1rem; text-shadow: 0 2px 6px #000; }
.jeton-peint small { color: #c7e2b8; font-size: .75rem; line-height: 1.3; text-shadow: 0 1px 4px #000; }
.rarete-herb.r-prov { color: #f3d68f; background: rgba(217, 177, 92, .16); }
.jeton-sort.decale:has(.jeton-peint) { scale: 1; }

/* v1.58.3 — appareil photo intégré (l'appli ne passe plus en arrière-plan) */
body.camera-ouverte { overflow: hidden; }
.camera-integree { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column; }
.camera-integree video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-integree.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: camera-flash .25s ease-out forwards; }
@keyframes camera-flash { from { opacity: .9; } to { opacity: 0; } }
.camera-haut { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: calc(env(safe-area-inset-top) + 12px) 14px 0; }
.camera-fermer { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.2rem; }
.camera-aide { position: relative; z-index: 2; margin: 10px auto 0; padding: 6px 14px; border-radius: 20px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .85rem; }
.camera-bas { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 16px calc(env(safe-area-inset-bottom) + 22px); background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.camera-galerie { justify-self: start; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .45); color: #fff; border-radius: 18px; padding: 8px 10px; font: inherit; font-size: .72rem; max-width: 120px; }
.camera-declencheur { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; }
.camera-declencheur span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #f3d68f; }
.camera-declencheur:active span { transform: scale(.9); }

/* ---------- Petite Ourse : ciel de Niouleuh (v1.59) ---------- */
.ciel-ourson { background: radial-gradient(ellipse at 60% 25%, #20405a 0%, #0c1a2e 55%, #070e1b 100%); }
.quete-premium .ciel-ourson { background: radial-gradient(ellipse at 60% 25%, #24496a 0%, #0c1a2e 60%, #070e1b 100%); }
.ciel-ourson .poussiere circle { fill: #e9f1ff; opacity: .35; animation: nl-scintille 3.6s ease-in-out var(--t, 0s) infinite; }
.ciel-ourson .collines { fill: #08111f; stroke: rgba(126, 190, 160, .25); stroke-width: .3; }
.niouleuh { transition: opacity 1.2s ease; }
.niouleuh .nl-corps { fill: rgba(140, 200, 255, .07); stroke: rgba(196, 226, 255, .55); stroke-width: .45; stroke-linejoin: round; }
.niouleuh .nl-oreille { fill: rgba(255, 200, 210, .35); }
.niouleuh .nl-museau { fill: rgba(220, 236, 255, .28); stroke: none; }
.niouleuh .nl-nez, .niouleuh .nl-oeil { fill: #dcecff; }
.niouleuh .nl-joue, .niouleuh .nl-queue { fill: none; stroke: rgba(196, 226, 255, .55); stroke-width: .4; stroke-linecap: round; }
.niouleuh.complet .nl-corps { fill: rgba(242, 207, 116, .12); stroke: #f2cf74; filter: drop-shadow(0 0 1.5px #f2cf74); }
.niouleuh.complet .nl-museau { fill: rgba(255, 236, 190, .45); }
.niouleuh.complet .nl-joue, .niouleuh.complet .nl-queue { stroke: #f2cf74; }
.niouleuh.complet .nl-nez, .niouleuh.complet .nl-oeil { fill: #fff3c4; }
.niouleuh.complet { animation: nl-respire 4s ease-in-out infinite; }
.ciel-ourson .ciel-lien { stroke: rgba(196, 226, 255, .28); }
.ciel-etoile.polaire .rayons { fill: rgba(220, 236, 255, .35); animation: nl-rayons 3.4s ease-in-out infinite; }
.ciel-etoile.polaire.on .rayons { fill: #fff3c4; filter: drop-shadow(0 0 2px #f2cf74); }
.ciel-etoile.polaire .coeur { fill: #c9d8f0; }
.ciel-etoile.polaire.on .coeur { fill: #fff8dc; }
@keyframes nl-scintille { 50% { opacity: .9; } }
@keyframes nl-rayons { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .7; } 50% { transform: scale(1.1) rotate(12deg); opacity: 1; } }
@keyframes nl-respire { 50% { filter: drop-shadow(0 0 3px rgba(242, 207, 116, .7)); } }
@media (prefers-reduced-motion: reduce) { .ciel-ourson *, .niouleuh { animation: none !important; } }
.tag-nature { display: inline-block; margin: 2px 0 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #cfeee0; background: rgba(58, 122, 110, .28); border: 1px solid rgba(126, 190, 160, .45); }
/* v1.58.4 — confort téléphone : pas de zoom automatique sur iPhone, pas de défilement de côté */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
input, select, textarea { font-size: max(16px, 1em); }
.separateur-ou[hidden] { display: none; }

/* v1.64 — Carte de France « parchemin » : repères peints, sceaux de cire, rose des vents */
.carte-france { height: 380px; }
.carte-parchemin { background: #e9d7ae; }
.carte-parchemin .leaflet-tile-pane { filter: sepia(.5) saturate(.8) hue-rotate(-8deg) brightness(1.02) contrast(.98); }
.carte-parchemin::after { content: ''; position: absolute; inset: 0; z-index: 450; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(90, 55, 15, .28) 100%); box-shadow: inset 0 0 50px rgba(70, 40, 10, .45); }
.rose-vents { position: absolute; left: 10px; bottom: 12px; width: 64px; height: 64px; z-index: 460; pointer-events: none; color: #b8862e; filter: drop-shadow(0 2px 3px rgba(60, 35, 10, .45)); }
.carte-parchemin .leaflet-bar a { background: #f3e3c0; color: #5a3a12; border-color: #c9a467; }
.carte-parchemin .leaflet-control-attribution { background: rgba(243, 227, 192, .8); color: #5a3a12; }
.carte-parchemin .leaflet-popup-content-wrapper, .carte-parchemin .leaflet-popup-tip { background: #f5e6c4; color: #3a2510; box-shadow: 0 4px 14px rgba(60, 35, 10, .45); }
.carte-parchemin .leaflet-popup-content-wrapper { border: 1px solid #b8862e; }
.carte-parchemin .leaflet-popup-content b { font-family: var(--titre); font-size: 1rem; }
.carte-parchemin .leaflet-popup-content a { color: #8a4b12; font-weight: 700; }
.repere-peint { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid #d9b15c; box-shadow: 0 0 0 2px var(--c), 0 4px 10px rgba(40, 20, 5, .55); }
.repere-peint.fait { filter: saturate(.4) brightness(.85); }
.repere-constellation { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #f3d68f;
  background: radial-gradient(circle at 40% 35%, #2a3f6b, #0b1426 75%); border: 3px solid #d9b15c; box-shadow: 0 0 14px rgba(243, 214, 143, .65), 0 4px 10px rgba(0, 0, 0, .5); text-shadow: 0 0 8px rgba(243, 214, 143, .9); }
.repere-constellation.petite { color: #cfe8ff; font-size: 20px; }
.sceau { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 32%, #c24a3a, #8e1f1a 60%, #5e1210); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 4px rgba(255, 180, 160, .35), 0 4px 10px rgba(40, 10, 5, .55);
  border: 2px solid #6e1713; }
.sceau span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(243, 214, 143, .75); color: #f8e3a6; font-family: var(--titre); font-weight: 700; font-size: .92rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sceau.gros { transform: scale(1.12); }
.chercher-zone { position: absolute; z-index: 1000; top: 10px; left: 50%; transform: translateX(-50%); border: 1px solid #b8862e; background: #f5e6c4; color: #5a3a12; font: inherit; font-weight: 700; font-size: .85rem; padding: .45rem .9rem; border-radius: 20px; box-shadow: 0 4px 12px rgba(40, 20, 5, .45); }
.chercher-zone[hidden] { display: none; }
.recherche-carte { position: relative; margin: .4rem 0 .3rem; }
.recherche-carte input { border-color: rgba(217, 177, 92, .45); }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 1200; display: flex; flex-direction: column; background: #f5e6c4; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.suggestions:empty { display: none; }
.suggestions button { text-align: left; border: 0; border-bottom: 1px solid rgba(90, 58, 18, .2); background: none; color: #3a2510; padding: .65rem .9rem; font: inherit; }
.suggestions button small { color: #7a5a2a; }
.suggestions p { margin: 0; padding: .6rem .9rem; color: #3a2510; }

/* v1.65 — Essai gratuit des Constellations */
.essai-info { margin: .4rem 0 .6rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(243, 214, 143, .1); border: 1px solid rgba(243, 214, 143, .35); font-size: .88rem; line-height: 1.45; }
.essai-fin { text-align: center; padding: .4rem 0; }
.essai-fin h2 { margin: .2rem 0 .4rem; }

/* v1.66 — « Ma ville n'y est pas » */
.btn-ville { display: block; margin: .6rem auto; }
.dv-classement { margin-top: .8rem; }
.dv-classement h3 { font-family: var(--titre); font-size: 1rem; margin: 0 0 .4rem; color: var(--laiton-cl); }
.dv-ligne { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px solid rgba(233, 220, 192, .12); }
.dv-ligne small { opacity: .7; }
.dv-ligne.mienne { color: #f3d68f; }
.dv-admin { margin-top: .6rem; line-height: 1.6; }