/* === LE VOYAGE (page /voyage/) ===
   Fond : celui du site (base.css), sur tous les écrans ; couleur d'accent selon la saga
   (body[data-saga]). Écrans : carte du voyage (SVG), préparation du deck, plateau. Séquences plein
   écran dans .vg-voile (navigation, fiches du deck, booster gagné, fin). Cartes : collection/css/cartes.css. */

body { --accent-saga: #7cc4ff; font-family: 'Nunito', sans-serif; }
body[data-saga="east_blue"] { --accent-saga: #9be0ff; }
body[data-saga="skypiea"] { --accent-saga: #d6f0ff; }
body[data-saga="marineford"] { --accent-saga: #c9b6ff; }
body[data-saga="dressrosa"] { --accent-saga: #ffc2d8; }
body[data-saga="egghead"] { --accent-saga: #ffd3a0; }
body[data-saga="alabasta"] { --accent-saga: #ffd27a; }

.top-bar { position: relative; z-index: 2; }
.vg-page { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.vg-chargement { text-align: center; color: #fff; padding: 4rem 0; font-weight: 800; }

.vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.7rem 1.4rem; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 0.6rem;
  background: rgba(8, 20, 42, 0.75); color: #fff; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer;
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.vg-btn:hover:not(:disabled) { border-color: #fff; background: rgba(8, 20, 42, 0.92); }
.vg-btn:disabled { opacity: 0.45; cursor: default; }
.vg-btn-or { background: linear-gradient(180deg, #ffd45c, #f0a91c); border-color: #ffe9a8; color: #3a2405; box-shadow: 0 0.35rem 0 #a86a0c, 0 0.6rem 1.4rem rgba(0, 0, 0, 0.35); }
.vg-btn-or:hover:not(:disabled) { background: linear-gradient(180deg, #ffe07a, #f5b52c); border-color: #fff; }
.vg-btn-or:active:not(:disabled) { transform: translateY(0.25rem); box-shadow: 0 0.1rem 0 #a86a0c; }
.vg-btn-danger { border-color: #f87171; color: #fecaca; }
.vg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.4rem; }
.vg-lien { padding: 0; border: none; background: none; color: #ffe08a; font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }

/* Popup « Comment ça marche » (base.css n'en donne que le squelette ; au-dessus des séquences plein écran) */
.modal-overlay { z-index: 2900; }
@keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.modal-box { border-radius: 1.25rem; padding: 2rem; max-width: 560px; }
.modal-box h3 { margin-bottom: 0.75rem; padding-right: 1.5rem; }
.modal-box p { font-size: 0.9rem; line-height: 1.65; margin-bottom: 0.5rem; }
.modal-close { font-size: 1.1rem; color: var(--text-muted); padding: 0.25rem; line-height: 1; }

/* ===== Écran titre ===== */
/* (pas de grand titre : « Le Voyage » est déjà dans la barre du haut) */
.vg-titre { text-align: center; color: #fff; margin: 0.25rem 0 0.9rem; }
.vg-titre p { font-weight: 800; font-size: 1.05rem; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
/* (grands titres des séquences plein écran : .sq-titre-geant) */
@keyframes vgTitre { from { opacity: 0; transform: scale(0.6) rotate(-3deg); } }

.vg-carte-mer {
  position: relative; border-radius: 1.4rem; overflow: hidden;
  box-shadow: 0 1.6rem 3.5rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 233, 168, 0.2);
}
.vg-carte-svg { display: block; width: 100%; height: auto; }

/* Étoile dessinée (etoileSvg : même forme que sur la carte) : or et reflet, ou en creux */
.vg-etoile { flex-shrink: 0; width: 1.4rem; aspect-ratio: 1; overflow: visible; }
.vg-etoile path { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 233, 168, 0.5); stroke-width: 1.1; stroke-linejoin: round; }
.vg-etoile.pleine path { fill: #ffd24a; stroke: #7a4a0c; stroke-width: 1.2; }
.vg-etoile.pleine { filter: drop-shadow(0 0 0.35rem rgba(255, 210, 90, 0.7)); }

/* Sous la carte : les étoiles expliquées (rendreInfoEtoiles) */
.vg-etoiles { width: min(36rem, 100%); margin: 1.6rem auto 0; padding: 0.8rem 1rem; border-radius: 0.8rem; color: #e2e8f0; background: rgba(6, 16, 36, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); }
.ve-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ve-tete h3 { font-size: 1.1rem; color: #fff; }
.ve-total { font-size: 0.85rem; font-weight: 800; color: rgba(255, 255, 255, 0.6); }
.ve-intro { margin-top: 0.2rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }
.ve-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.ve-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.35rem 0; font-size: 0.9rem; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ve-liste .vg-etoile { width: 1rem; filter: none; }
.ve-recompense { white-space: nowrap; font-size: 0.82rem; font-weight: 800; color: #ffe08a; }
.ve-note { margin-top: 0.4rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
/* Le défi de la route choisie (defiHtml) */
.ve-tete-defi { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ve-defi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.ve-defi strong { font-size: 0.95rem; color: #fff; }
.ve-defi p { margin-top: 0.1rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.ve-defi .vg-medaille { width: 2rem; }
.ve-defi.reussi .ve-recompense { color: #8fe3a8; }

/* Médaille d'un défi (medailleSvg : même dessin que sur la carte, medailleChemins) : or, ou en creux */
.vg-medaille { flex-shrink: 0; width: 1.4rem; aspect-ratio: 1; overflow: visible; }
.vg-medaille .r-medaille-ruban, .vg-medaille .r-medaille-disque, .vg-medaille .r-medaille-etoile { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 233, 168, 0.5); stroke-width: 1; stroke-linejoin: round; }
.vg-medaille.gagnee { filter: drop-shadow(0 0 0.35rem rgba(255, 210, 90, 0.6)); }
.vg-medaille.gagnee .r-medaille-ruban { fill: #c8343c; stroke: #5a1216; }
.vg-medaille.gagnee .r-medaille-disque { fill: #ffd24a; stroke: #7a4a0c; stroke-width: 1.2; }
.vg-medaille.gagnee .r-medaille-etoile { fill: #fff3c4; stroke: #b07216; stroke-width: 0.8; }

.vg-demo { margin-top: 1rem; text-align: center; color: #fff; font-weight: 700; background: rgba(8, 20, 42, 0.7); border-radius: 0.6rem; padding: 0.7rem 1rem; }

/* ===== Préparation du deck ===== */
.vg-deck-tete { color: #fff; text-align: center; margin-bottom: 1rem; }
.vg-deck-tete h2 { font-size: 2.2rem; color: #ffe9a8; text-shadow: 0 0.12em 0 #5a2d06; }
.vg-deck-tete p { max-width: 44rem; margin: 0.4rem auto 0; color: rgba(255, 255, 255, 0.85); font-weight: 700; }
.dk-paquet-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 1.9rem; margin-bottom: 0.5rem; }
.dk-completer { flex-shrink: 0; padding: 0.3rem 0.8rem; border-radius: 99px; border: 1px solid rgba(255, 224, 138, 0.6); background: rgba(255, 224, 138, 0.12); color: #ffe08a; font: inherit; font-size: 0.85rem; font-weight: 900; cursor: pointer; transition: background 0.2s; }
.dk-completer:hover { background: rgba(255, 224, 138, 0.25); }
/* L'atelier de l'équipage : onglets des sagas, paquet de la saga (collé en haut), réserve */
.dk-sagas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.6rem; }
.dk-saga {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.45rem 0.6rem;
  border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(6, 16, 36, 0.78); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s;
}
.dk-saga:hover { background: rgba(255, 233, 168, 0.1); }
.dk-saga.actif { border-color: #ffe08a; background: rgba(255, 224, 138, 0.16); box-shadow: inset 0 0 0 1px #ffe08a; }
.dk-saga small { font-size: 0.7rem; font-weight: 800; color: rgba(255, 255, 255, 0.55); }
.dk-saga b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 0.95rem; line-height: 1.15; color: #ffe08a; }
.dk-saga span { font-size: 0.75rem; font-weight: 800; color: rgba(255, 255, 255, 0.75); }
.dk-pastille { position: absolute; top: 0.45rem; right: 0.45rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 0.4rem #ffe08a; }
.dk-paquet-actif {
  position: sticky; top: 0; z-index: 30; padding: 0.7rem 0.8rem 0.85rem; border-radius: 0.9rem;
  background: rgba(8, 18, 40, 0.97); border: 1px solid rgba(255, 224, 138, 0.35); box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.45);
}
.dk-paquet-actif h3 { color: #ffe08a; font-size: 1.2rem; }
.dk-moyenne { margin-right: auto; font-size: 0.85rem; font-weight: 800; color: rgba(255, 255, 255, 0.7); cursor: help; }
.dk-moyenne b { color: #fff; font-size: 1rem; }
.dk-consigne { margin: 0 0 0.5rem; padding: 0.4rem 0.7rem; border-radius: 0.5rem; background: rgba(255, 224, 138, 0.14); color: #ffe08a; font-size: 0.9rem; font-weight: 800; text-align: center; }
.dk-emplacements { display: grid; grid-template-columns: repeat(5, minmax(0, 7rem)); justify-content: center; gap: 0.6rem; }
.dk-emplacement { position: relative; }
.dk-emplacement .dk-case { display: block; width: 100%; }
.dk-retirer {
  position: absolute; z-index: 6; top: -0.45rem; right: -0.45rem; width: 1.6rem; height: 1.6rem; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid #0b1730; background: #b91c1c; color: #fff; font-size: 0.8rem; font-weight: 900; cursor: pointer;
}
.dk-retirer:hover { background: #dc2626; }
/* (paquet plein, une carte attend sa place : les cartes du paquet invitent à être touchées) */
.en-remplacement .dk-case { animation: dkAttente 1.1s ease-in-out infinite; }
@keyframes dkAttente { 50% { filter: brightness(1.2) drop-shadow(0 0 0.5rem rgba(255, 224, 138, 0.9)); } }
.dk-reserve { margin-top: 1rem; padding: 0.8rem; border-radius: 0.9rem; background: rgba(6, 16, 36, 0.6); scroll-margin-top: 15rem; }
.dk-reserve-tete { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dk-reserve-tete h3 { color: #fff; font-size: 1.1rem; }
#deckListe { width: auto; max-height: none; overflow: visible; margin: 0.6rem 0 0; padding: 0.4rem 0.2rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.dk-place.attend .dk-case { outline: 3px solid #ffe08a; outline-offset: 3px; border-radius: 0.5rem; }
.dk-place.attend .ch-ajouter { background: rgba(255, 224, 138, 0.25); color: #ffe08a; }
/* Une carte du paquet et ses repères (équipiers) */
.dk-place { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dk-reperes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.dk-repere { padding: 0.1rem 0.25rem; border-radius: 0.35rem; font-size: 0.66rem; font-weight: 800; line-height: 1.2; text-align: center; }
.dk-repere.equipe { background: rgba(125, 211, 252, 0.14); color: #7dd3fc; }
.dk-repere.ailleurs { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
/* Les équipages : onglets (aussi sur la carte des routes, pour choisir celui qui part) */
.dk-equipages { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.dk-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.dk-onglet { padding: 0.4rem 0.9rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(6, 16, 36, 0.78); color: rgba(255, 255, 255, 0.85); font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: background 0.2s; }
.dk-onglet:hover { background: rgba(255, 233, 168, 0.14); }
.dk-onglet.actif { background: #ffe08a; border-color: #ffe08a; color: #3a2206; }
.dk-nouveau { border-style: dashed; }
.dk-outils { display: flex; gap: 1.2rem; font-size: 0.85rem; }
.dk-supprimer { color: #fca5a5; }
.dk-renommer { display: flex; gap: 0.4rem; }
.dk-renommer input { width: 14rem; padding: 0.3rem 0.7rem; border-radius: 99px; border: 1px solid rgba(255, 224, 138, 0.6); background: rgba(6, 16, 36, 0.9); color: #fff; font: inherit; font-weight: 800; }
/* L'équipage qui part, sur la carte des routes (rendreChoixEquipage) */
.vg-choix-equipage {
  width: min(46rem, 100%); margin: 0 auto; padding: 0.9rem 1rem 1rem;
  border-radius: 1rem; border: 1px solid rgba(255, 224, 138, 0.35); background: rgba(6, 16, 36, 0.8);
  text-align: center; color: #fff;
}
.ce-titre { font-family: 'Lilita One', sans-serif; font-size: 1.25rem; color: #ffe08a; margin-bottom: 0.7rem; }
.ce-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.ce-equipage {
  position: relative; display: flex; align-items: center; gap: 0.7rem; min-width: 13rem; padding: 0.6rem 0.9rem;
  border-radius: 0.8rem; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05);
  color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.ce-equipage:hover { background: rgba(255, 233, 168, 0.1); border-color: rgba(255, 224, 138, 0.5); }
.ce-equipage.actif { border-color: #ffe08a; background: rgba(255, 224, 138, 0.14); box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.2), 0 0.4rem 1.2rem rgba(0, 0, 0, 0.35); }
.ce-portraits { display: flex; flex-shrink: 0; }
.ce-portraits img, .ce-vide {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; border: 2px solid #0b1730; background: #24457e;
}
.ce-portraits img + img { margin-left: -0.8rem; }
.ce-vide { display: grid; place-items: center; font-weight: 800; color: rgba(255, 255, 255, 0.6); }
.ce-texte { display: flex; flex-direction: column; min-width: 0; }
.ce-nom { font-weight: 900; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-info { font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.ce-badge {
  position: absolute; top: -0.65rem; right: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 99px;
  background: #ffe08a; color: #3a2206; font-size: 0.7rem; font-weight: 900;
}
/* (au-dessus de la carte des routes) */
.vg-actions-haut { margin: 1rem 0 1.4rem; }
@media (max-width: 700px) {
  .ce-equipage { min-width: 0; width: 100%; }
}
/* Ajouter une carte à un paquet : recherche, filtres, liste qui défile sous eux */
.sq-choix { width: min(58rem, 100%); max-height: calc(100dvh - 3rem); }
.sq-choix .sq-titre { margin-bottom: 0.3rem; }
.ch-place { color: rgba(255, 255, 255, 0.8); font-weight: 800; }
.ch-outils { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.ch-recherche { width: min(24rem, 100%); padding: 0.55rem 1rem; border-radius: 99px; border: 1px solid rgba(255, 224, 138, 0.5); background: rgba(6, 16, 36, 0.9); color: #fff; font: inherit; font-weight: 800; }
.ch-recherche::placeholder { color: rgba(255, 255, 255, 0.5); }
.ch-recherche:focus { outline: none; border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.25); }
.ch-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.ch-filtres .dk-onglet { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.ch-compte { margin-top: 0.5rem; font-size: 0.82rem; font-weight: 800; color: rgba(255, 255, 255, 0.55); }
.ch-liste { flex: 1 1 auto; min-height: 8rem; max-height: none; margin: 0.4rem 0 0.8rem; align-items: stretch; }
.ch-vide { grid-column: 1 / -1; padding: 2rem 0; font-weight: 800; color: rgba(255, 255, 255, 0.7); }
/* (écart de Puissance avec la carte remplacée, ou le Matelot) */
.ch-ecart { position: absolute; z-index: 6; top: -0.35rem; right: -0.35rem; min-width: 2.2rem; padding: 0.1rem 0.35rem; border-radius: 99px; font-size: 0.75rem; font-weight: 900; color: #fff; background: #475569; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5); }
.ch-ecart.plus { background: #15803d; }
.ch-ecart.moins { background: #b91c1c; }
.dk-repere.capa { background: rgba(196, 181, 253, 0.16); color: #c4b5fd; }
.ch-ajouter { margin-top: auto; padding: 0.3rem 0.4rem; border-radius: 0.45rem; border: none; background: #ffe08a; color: #3a2206; font: inherit; font-size: 0.8rem; font-weight: 900; cursor: pointer; transition: filter 0.2s; }
.ch-ajouter:hover { filter: brightness(1.08); }
/* Panneau de l'arc : la précision de l'effet (quand, combien de temps) */
.fiche-detail { margin-top: 0.4rem; font-size: 0.88rem; font-weight: 700; line-height: 1.35; color: rgba(255, 255, 255, 0.75); }
.fiche-note { margin-top: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 0.5rem; background: rgba(255, 224, 138, 0.12); color: #ffe08a; font-weight: 800; font-size: 0.9rem; }
.dk-case { position: relative; padding: 0; border: none; background: none; cursor: pointer; text-align: center; font: inherit; border-radius: 0.5rem; transition: filter 0.2s; }
.dk-case:not(:disabled):hover { filter: brightness(1.12) drop-shadow(0 0 0.5rem rgba(255, 233, 168, 0.6)); }
.dk-case:disabled { cursor: default; }
.dk-vide .carte { opacity: 0.55; }
.dk-plus { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Lilita One', sans-serif; font-size: 2.6rem; color: #fff; text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.7); }
.dk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 0.9rem; max-height: 60vh; overflow-y: auto; padding: 0.4rem; margin: 1rem 0; width: min(56rem, 92vw); }

/* Carte sans fiche : emblème à la place de la photo */
.carte-photo-embleme { width: 100%; height: 100%; display: grid; place-items: center; padding-bottom: 30%; background: radial-gradient(circle, #24457e, #0d1a3f 70%); }
.carte-photo-embleme svg { width: 74%; height: auto; }

/* Fiche d'une carte : la carte en grand et son détail */
.fiche { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; text-align: left; color: #e2e8f0; }
.fiche-carte { width: 100%; }
.fiche-cachee .fiche-carte { position: relative; aspect-ratio: 63 / 88; }
.fiche-texte h3 { font-size: 1.6rem; color: #fff; line-height: 1.1; }
.fiche-groupe { margin-top: 0.15rem; font-weight: 800; color: #ffe9a8; }
.fiche-chiffres { display: flex; gap: 1.4rem; margin-top: 0.7rem; }
.fiche-chiffres dt { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.fiche-chiffres dd { font-family: 'Lilita One', sans-serif; font-size: 1.7rem; color: #ffe08a; line-height: 1.1; }
.fiche-capa { margin-top: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: rgba(91, 33, 182, 0.22); border: 1px solid rgba(196, 181, 253, 0.35); font-size: 0.9rem; line-height: 1.45; }
.fiche-capa b { color: #e9d5ff; } .fiche-capa i { font-style: normal; font-size: 0.75rem; color: #c4b5fd; }
.fiche-titre { margin-top: 0.8rem; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.fiche-sagas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 0.8rem; margin-top: 0.3rem; font-size: 0.82rem; }
.fiche-sagas li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.4rem; border-radius: 0.35rem; }
.fiche-sagas li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; }
.fiche-sagas li.ici { background: rgba(255, 224, 138, 0.16); } .fiche-sagas li.ici span { color: #ffe9a8; }
.fiche-sagas li.vide { opacity: 0.45; }
.fiche-arc h3 { font-size: 1.5rem; color: #fff; }
.sq-fiche { width: min(46rem, 100%); }
.sq-fiche .fiche { padding: 1.1rem; border-radius: 1rem; background: rgba(8, 16, 34, 0.92); border: 1px solid rgba(255, 233, 168, 0.3); margin-bottom: 1rem; }

/* ===== Plateau ===== */
/* Le plateau tient dans l'écran (--plateau-h : place sous la barre du haut, posée par game.js) :
   une grille de rangées, et la taille des cartes vient de la hauteur de leur rangée (cqh) */
#ecranJeu { position: relative; }
#ecranJeu:not(.hidden) { display: grid; grid-template-rows: auto minmax(0, 1.12fr) auto minmax(0, 1fr) minmax(0, 0.82fr); gap: 0.45rem; height: var(--plateau-h, calc(100dvh - 6rem)); }
.pl-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; color: #fff; }
.pl-saga { display: flex; flex-direction: column; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.pl-saga span { font-size: 0.85rem; font-weight: 800; opacity: 0.9; }
.pl-saga strong { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.55rem; line-height: 1.05; color: #fff; }
.pl-effet {
  max-width: 26rem; padding: 0.5rem 0.9rem; border-radius: 0.6rem; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 233, 168, 0.5); background: rgba(8, 20, 42, 0.7); color: #ffe9a8; font: inherit; font-weight: 800; font-size: 0.85rem;
}
/* Défi de la route (rendreDefi) : tenu, en danger (l'équipage actuel le ferait manquer) ou manqué */
.pl-defi {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.5rem; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 233, 168, 0.45); background: rgba(8, 20, 42, 0.7); color: #ffe9a8; font: inherit; font-weight: 800; font-size: 0.8rem;
}
.pl-defi.danger { border-color: #f5a524; color: #ffd08a; background: rgba(70, 38, 4, 0.8); }
.pl-defi.manque { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.55); }
.pl-defi.manque span { text-decoration: line-through; }
.pl-defi-etat.tenu { color: #8fe3a8; }
.pl-defi-etat.danger { color: #ffc266; }
/* Héritages en cours (Souvenirs partis : rendreHeritages), et leur liste dans le panneau */
.pl-heritages-btn {
  padding: 0.35rem 0.75rem; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(143, 227, 168, 0.5); background: rgba(8, 20, 42, 0.7); color: #b9f0c8; font: inherit; font-weight: 800; font-size: 0.8rem;
}
.pl-heritages { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.pl-heritages li { display: grid; gap: 0.15rem; }
.pl-heritages b { color: #b9f0c8; }

.pl-camp { position: relative; min-height: 0; padding: 1.1rem 0.6rem 0.5rem; border-radius: 0.9rem; container-type: size; display: flex; align-items: center; justify-content: center; }
.pl-camp-boss { background: linear-gradient(180deg, rgba(70, 8, 18, 0.72), rgba(30, 6, 14, 0.72)); box-shadow: inset 0 0 0 1px rgba(255, 120, 120, 0.25); }
/* Le pont du navire : planches */
.pl-camp-joueur {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4.2rem),
    linear-gradient(180deg, #8a5a2e, #5c3a1a);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 160, 0.25), inset 0 0.6rem 1.2rem rgba(0, 0, 0, 0.35), 0 0.8rem 1.6rem rgba(0, 0, 0, 0.35);
}
/* (cartes à la hauteur de la rangée, sans dépasser sa largeur : --n, nombre de cartes de la rangée,
   posé par rendrePlateau ; 6 cartes tiennent toujours) */
.pl-rang { display: flex; justify-content: center; align-items: center; gap: 0.6rem; --h-w: calc((100cqh - 1.2rem) * 0.716); --l-w: calc((100cqw - 3rem) / max(6.2, var(--n, 5) + 1.2)); }
.pl-rang > .pj, .pl-rang > .pj-vide { --carte-w: min(calc(var(--h-w) * 0.9), var(--l-w)); }
.pl-rang > .pj-chef { --carte-w: min(var(--h-w), calc(var(--l-w) * 1.15)); }

.pj { position: relative; width: var(--carte-w); flex-shrink: 0; cursor: pointer; transition: transform 0.25s, filter 0.25s; }
.pj-carte { width: 100%; pointer-events: none; }
.pj.choisie { transform: translateY(-0.6rem) scale(1.05); filter: drop-shadow(0 0 0.8rem rgba(255, 233, 168, 0.9)); z-index: 3; }
.pj-chef::before { content: '♛'; position: absolute; z-index: 4; left: 50%; top: -1.15rem; transform: translateX(-50%); font-size: 1.3rem; color: #ffd45c; text-shadow: 0 2px 3px rgba(0,0,0,0.7); }
/* (pastille de Puissance : seulement sur les cartes face cachée ; sinon la Puissance est dans la bande) */
.pj-puissance {
  position: absolute; z-index: 4; left: 50%; bottom: -0.65rem; transform: translateX(-50%);
  min-width: 2.6rem; padding: 0.1rem 0.55rem; border-radius: 99px; text-align: center;
  background: #0b1530; color: #fff; border: 2px solid #ffe08a; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
  font-family: 'Lilita One', sans-serif; font-size: clamp(0.85rem, 2.6vw, 1.15rem); line-height: 1.25;
}
.pj-puissance.plus { border-color: #4ade80; color: #bbf7d0; }
.pj-puissance.moins { border-color: #f87171; color: #fecaca; }
.pj-boss .pj-puissance { border-color: #ff8a8a; }
.pj .carte-puissance.plus b { color: #86efac; }
.pj .carte-puissance.moins b { color: #fca5a5; }
.pj-capa { position: absolute; z-index: 4; right: -0.35rem; top: -0.35rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: #5b21b6; color: #f5d0fe; font-size: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pj.exclu .pj-carte { filter: grayscale(1) brightness(0.45); }
.pj.exclu .pj-statut::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: #f87171; text-shadow: 0 0 1rem #000; }
.pj.annulee .pj-capa { background: #475569; text-decoration: line-through; }
/* Proposition à valider (?essai-effet) : l'effet de l'arc sur une carte parchemin, à l'arrivée sur l'île */
.vg-arc { position: fixed; inset: 0; z-index: 2550; display: grid; place-items: center; padding: 1rem; background: rgba(2, 8, 20, 0.62); cursor: pointer; animation: aeFond 0.3s ease-out; transition: background 0.45s; }
.vg-arc.sortie { background: rgba(2, 8, 20, 0); }
@keyframes aeFond { from { background: rgba(2, 8, 20, 0); } }
/* (cadre en or poli, comme celui de la carte des routes, autour d'un parchemin vieilli : bords brunis,
   taches, fibres, et un filet intérieur) */
.ae-carte {
  box-sizing: border-box; width: min(17rem, 74vw); aspect-ratio: 63 / 88; padding: 0.32rem; border: 0 solid transparent; border-radius: 0.9rem;
  background: linear-gradient(135deg, #fff0b8 0%, #d9a441 28%, #8c5d16 52%, #f0cc72 76%, #9a6a1e 100%);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(60, 35, 5, 0.6), inset 0 0 0 1px rgba(255, 246, 210, 0.7);
}
.ae-contenu {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.6rem 0.75rem 0.55rem; border-radius: 0.62rem; text-align: center; color: #3a2206;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(255, 249, 230, 0.85), rgba(255, 249, 230, 0) 70%),
    radial-gradient(circle at 14% 22%, rgba(150, 95, 35, 0.16), rgba(150, 95, 35, 0) 22%),
    radial-gradient(circle at 88% 70%, rgba(150, 95, 35, 0.14), rgba(150, 95, 35, 0) 25%),
    radial-gradient(circle at 30% 92%, rgba(120, 70, 20, 0.12), rgba(120, 70, 20, 0) 20%),
    repeating-linear-gradient(97deg, rgba(110, 70, 25, 0.035) 0 1px, rgba(110, 70, 25, 0) 1px 4px),
    linear-gradient(180deg, #f5e4bd, #e6c78f);
  box-shadow: inset 0 0 1.6rem rgba(110, 60, 15, 0.45), inset 0 0 0.25rem rgba(80, 40, 5, 0.5);
}
/* (filet intérieur, à quelques pixels du bord) */
.ae-contenu::before { content: ''; position: absolute; inset: 0.3rem; border: 1px solid rgba(140, 93, 22, 0.45); border-radius: 0.42rem; pointer-events: none; }
.ae-image {
  position: relative; width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; border-radius: 0.45rem; overflow: hidden; background: #0e467f;
  box-shadow: 0 0 0 2px #b07b2c, 0 0 0 3px rgba(255, 240, 190, 0.6), 0 0.3rem 0.7rem rgba(80, 40, 5, 0.35);
}
.ae-ile { display: block; width: 100%; height: 100%; }
.ae-saga { margin-top: 0.55rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: #8a5a2e; }
.ae-nom { font-size: 1.65rem; line-height: 1.05; color: #4a2508; text-shadow: 0 1px 0 rgba(255, 248, 225, 0.8); }
/* (filet doré avec un losange au centre, entre le nom et l'effet) */
.ae-filet { position: relative; width: 70%; height: 1px; margin: 0.5rem 0 0.1rem; background: linear-gradient(90deg, rgba(140, 93, 22, 0), rgba(140, 93, 22, 0.7), rgba(140, 93, 22, 0)); }
.ae-filet::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.45rem; height: 0.45rem; transform: translate(-50%, -50%) rotate(45deg); background: #c8902a; box-shadow: 0 0 0 2px #f5e4bd; }
.ae-texte { margin: auto 0 0; font-size: 1rem; font-weight: 900; line-height: 1.28; color: #3a2206; }
.ae-detail { margin: 0.35rem 0 auto; font-size: 0.74rem; font-weight: 700; line-height: 1.3; color: rgba(74, 37, 8, 0.75); }
/* Capacité en action (projecteur) : les cartes qui n'y sont pour rien s'assombrissent */
#ecranJeu.vg-projecteur .pj:not(.vise-action) { filter: brightness(0.4) saturate(0.6); }
.pj.vise-action { z-index: 6; }
.pj-statut { position: absolute; inset: 0; pointer-events: none; }
/* Effets appliqués au combat : étiquettes empilées sur la carte */
.pj-statut:has(.pj-mod) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; padding: 0.2rem; }
.pj-mod { max-width: 100%; padding: 0.15rem 0.45rem; border-radius: 0.45rem; font-weight: 900; font-size: 0.8rem; line-height: 1.15; text-align: center; color: #fff; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5); animation: pjMod 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pj-mod small { display: block; font-weight: 700; font-size: 0.62rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-mod.plus { background: linear-gradient(180deg, #22a861, #137a43); }
.pj-mod.moins { background: linear-gradient(180deg, #e04848, #a52525); }
@keyframes pjMod { from { opacity: 0; transform: scale(0.4); } }
.pj-pose { animation: pjPose 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes pjPose { from { transform: translateY(-2.5rem) scale(1.2); } }
.pj-nouvelle .pj-carte { outline: 2px dashed rgba(255, 233, 168, 0.8); outline-offset: 3px; border-radius: 0.4rem; }

/* Pendant la préparation (marquerConseils) : perso visé par une capacité de boss (pastille rouge sous
   la carte), carte de la main plus forte que le perso le plus faible d'un équipage plein (pastille verte) */
.pj.vise .pj-carte { filter: drop-shadow(0 0 0.45rem rgba(248, 113, 113, 0.85)); }
.pj.vise::after, .pj.mieux::after {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); max-width: 140%; overflow: hidden; text-overflow: ellipsis;
  padding: 0.08rem 0.45rem; border-radius: 99px; white-space: nowrap; pointer-events: none;
  font-size: 0.62rem; font-weight: 900; line-height: 1.3; color: #fff; box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.5);
}
.pj.vise::after { content: '◎ ' attr(data-vise); bottom: -0.65rem; background: #b91c1c; }
.pj.mieux::after { content: attr(data-mieux); top: -0.45rem; background: #15803d; }
.pj.mieux .pj-carte { filter: drop-shadow(0 0 0.45rem rgba(74, 222, 128, 0.8)); }

/* Glisser une carte de la main sur l'équipage (brancherGlisser) */
.pl-main .pj { touch-action: none; }
.pj-fantome { position: fixed; left: 0; top: 0; z-index: 2700; pointer-events: none; filter: drop-shadow(0 0.8rem 1.2rem rgba(0, 0, 0, 0.55)); }
.pj-glisse { opacity: 0.35; }
body.vg-glisse #plEquipage .pj-joueur .pj-carte, body.vg-glisse #plEquipage .pj-vide { outline: 2px dashed rgba(255, 233, 168, 0.7); outline-offset: 3px; border-radius: 0.4rem; }
body.vg-glisse #plEquipage .depot .pj-carte, body.vg-glisse #plEquipage .pj-vide.depot { outline: 3px solid #ffe08a; background-color: rgba(255, 233, 168, 0.15); }
body.vg-glisse #plEquipage .depot { transform: scale(1.06); }
.pn-vise { margin-top: 0.6rem; background: rgba(185, 28, 28, 0.22); border-color: rgba(248, 113, 113, 0.5); }
.pn-vise b { color: #fecaca; }
.pn-titre { color: #e2e8f0; font-weight: 700; margin-top: 0.4rem; }

.pj-vide {
  width: var(--carte-w); aspect-ratio: 63 / 88; flex-shrink: 0; border-radius: 0.5rem; cursor: pointer;
  border: 2px dashed rgba(255, 233, 168, 0.55); background: rgba(0, 0, 0, 0.18); color: rgba(255, 233, 168, 0.8);
  font-family: 'Lilita One', sans-serif; font-size: 2rem;
}
.pj-vide:hover { background: rgba(255, 233, 168, 0.12); }

/* Le duel : totaux et jauge */
.pl-duel { display: flex; align-items: center; gap: 0.8rem; }
.pl-total { min-width: 4.5rem; font-family: 'Lilita One', sans-serif; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1; text-align: center; color: #fff; text-shadow: 0 0.08em 0 rgba(0,0,0,0.5), 0 0 1rem currentColor; }
.pl-total-joueur { color: #9be0ff; }
.pl-total-boss { color: #ff9b9b; }
.pl-jauge { position: relative; flex: 1; height: 1rem; border-radius: 99px; background: linear-gradient(90deg, #ff5a6a, #b3122b); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25), 0 0.3rem 0.8rem rgba(0,0,0,0.4); }
.pl-jauge-joueur { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 99px 0 0 99px; background: linear-gradient(90deg, #2e8bdc, #7fd2ff); transition: width 0.35s; }
.pl-jauge-choc { position: absolute; left: 50%; top: 50%; width: 0.4rem; height: 0.4rem; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.pl-jauge-choc.boum { animation: plBoum 0.7s ease-out; }
@keyframes plBoum {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.95), 0 0 0 0 rgba(255, 214, 102, 0.8); }
  100% { box-shadow: 0 0 0 9rem rgba(255, 255, 255, 0), 0 0 0 16rem rgba(255, 214, 102, 0); }
}

.pl-bas {
  position: relative; z-index: 5; min-height: 0; display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.8rem; container-type: size;
  border-radius: 0.9rem; background: rgba(6, 14, 30, 0.9); box-shadow: 0 -0.4rem 1.4rem rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.pl-bourse {
  display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; padding: 0.35rem 0.7rem 0.35rem 0.35rem; border-radius: 99px;
  background: rgba(255, 214, 102, 0.14); border: 1px solid rgba(255, 214, 102, 0.5);
}
.pl-piece, .vg-piece-vol {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e8b84a 55%, #a8701c); color: #5e3b0e; font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.35);
}
.pl-bourse strong { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.6rem; color: #ffe08a; min-width: 1.4rem; }
.vg-piece-vol { position: fixed; z-index: 3000; pointer-events: none; }
/* La main : toutes ses cartes se voient, elles rapetissent si elles sont nombreuses (--n : nombre de
   cartes, posé par rendrePlateau) ; la main est le conteneur de ses cartes */
.pl-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 0.6rem; overflow: hidden; padding: 0.45rem 0.5rem 0 0.3rem; container-type: size; } /* (marge : pastilles ✦ qui dépassent des cartes) */
.pl-main > .pj { --carte-w: min(calc((100cqh - 0.6rem) * 0.716), calc((100cqw - 0.6rem - (var(--n, 2) - 1) * 0.6rem) / var(--n, 2))); }
.pl-main-vide { color: rgba(255,255,255,0.5); font-weight: 800; font-size: 0.85rem; align-self: center; }
.pl-combat { flex-shrink: 0; }

/* Le paquet de la saga, sur le côté : on y pioche */
.pl-pioche { position: relative; flex-shrink: 0; width: calc((100cqh - 1.6rem) * 0.716); aspect-ratio: 63 / 88; margin: 0 0.4rem; }
.pp-pile { position: absolute; inset: 0; }
.pp-carte { position: absolute; inset: 0; transform: translate(calc(var(--i) * -3px), calc(var(--i) * -3px)) rotate(calc(var(--i) * -2deg)); filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5)); }
.pp-nb { position: absolute; z-index: 2; right: -0.5rem; bottom: -0.5rem; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 99px; display: grid; place-items: center;
  background: #0b1a36; border: 2px solid #e8c66a; color: #ffe08a; font-weight: 900; font-size: 0.85rem; }
.pp-vol { position: fixed; z-index: 2600; pointer-events: none; filter: drop-shadow(0 0.8rem 1.4rem rgba(0, 0, 0, 0.55)); }
.pp-vol-dos, .pp-vol-face { position: absolute; inset: 0; }
.pp-vol-face { display: none; }
.pp-vol.face .pp-vol-dos { display: none; }
.pp-vol.face .pp-vol-face { display: block; }
.pj-attente { visibility: hidden; }

/* Hommes du boss face cachée jusqu'au combat */
.pj-cachee .pj-carte { position: relative; aspect-ratio: 63 / 88; filter: drop-shadow(0 0 0.8rem rgba(201, 182, 255, 0.35)); }
.pj-cachee .pj-puissance b { color: #c9b6ff; }
.pl-duel.inconnue .pl-total-boss { color: #c9b6ff; }
.pl-duel.inconnue .pl-jauge { background: repeating-linear-gradient(135deg, rgba(220, 38, 38, 0.55) 0 0.6rem, rgba(220, 38, 38, 0.25) 0.6rem 1.2rem); }

/* Carte des routes (carte-routes.js) */
.r-voie { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.r-route.gagnee .r-voie { stroke: #f2c94c; stroke-dasharray: none; stroke-width: 3; opacity: 0.8; }
.r-route.choisie .r-voie { stroke: #ffe08a; stroke-width: 4.5; stroke-dasharray: 10 9; opacity: 1; animation: mPointilles 1.2s linear infinite; }
.r-route.choisie .r-voie.faite { stroke: #f2c94c; stroke-dasharray: none; animation: none; }
.r-route.fermee { opacity: 0.42; filter: grayscale(0.75); }
.r-route.fermee * { animation: none !important; } /* (rien d'animé sous un filtre : moins de calcul) */
.m-bateau .m-sillage { display: none; }
/* Petits appareils (anim-legeres, posée par carte.js) : plus d'animations de décor */
.anim-legeres .m-vaguelette, .anim-legeres .m-eclat, .anim-legeres .m-ecume, .anim-legeres .m-mouette, .anim-legeres .m-ailes,
.anim-legeres .m-nuage, .anim-legeres .m-bulle, .anim-legeres .m-moulin, .anim-legeres .m-pavillon, .anim-legeres .r-chauve-souris, .anim-legeres .r-petale,
.anim-legeres .r-escale:not(.ici) .r-escale-halo, .anim-legeres .r-drapeau-tissu, .anim-legeres .fn-rayons, .anim-legeres .cb-rayons, .anim-legeres .r-route.choisie .r-voie { animation: none; }
.anim-legeres .m-mouettes, .anim-legeres .m-nuages { display: none; }
.r-route:not(.fermee) { cursor: pointer; }
.r-fond { fill: transparent; transition: fill 0.25s; }
.r-route:not(.fermee):hover .r-fond { fill: rgba(255, 255, 255, 0.06); }
.r-route.choisie .r-fond { fill: rgba(255, 224, 138, 0.1); stroke: rgba(255, 224, 138, 0.55); stroke-width: 1.5; stroke-dasharray: 6 6; }
/* Pendant le voyage : seulement la route prise, en plus grand (carteRoutesSvg, seule) ; au départ, les
   autres routes s'effacent et elle glisse au milieu de la carte en grandissant (depart) */
.seule .r-fond { display: none; }
.seule .r-route.choisie .r-voie { stroke-width: 6; }
.seule .r-escale-nom { font-size: 16px; }
.r-partantes { pointer-events: none; animation: rPartent 0.6s ease-in 0.15s both; }
@keyframes rPartent { to { opacity: 0; } }
.r-arrive { animation: rArrive 0.9s cubic-bezier(0.3, 0.9, 0.3, 1) 0.3s both; }
@keyframes rArrive { from { transform: translateY(var(--dy)); } }
/* (agrandie autour de son point d'ancrage, comme l'attribut transform : view-box, origine 0 0) */
.r-arrive .r-escale-corps { transform-box: view-box; transform-origin: 0 0; animation: rGrandit 0.9s cubic-bezier(0.3, 0.9, 0.3, 1) 0.3s both; }
@keyframes rGrandit { from { transform: scale(1); } to { transform: scale(1.4); } }
.r-escale-nom { font-family: 'Lilita One', sans-serif; font-size: 13px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #071a38; stroke-width: 4px; }
.r-escale-halo { opacity: 0.6; transform-origin: center; animation: mHalo 3s ease-in-out infinite; }
.r-escale.ici .r-escale-halo { opacity: 1; animation-duration: 1.4s; }
.r-escale.ici .r-ile { animation: rIci 1.4s ease-in-out infinite; }
@keyframes rIci { 50% { transform: translateY(-4px) scale(1.08); } }
.r-ile { transform-origin: 50% 80%; }
.r-petale { animation: rPetale 4s ease-in-out infinite; }
@keyframes rPetale { 50% { transform: translate(10px, 8px) rotate(90deg); } }
.r-entete { font-family: 'Lilita One', sans-serif; font-size: 15px; fill: #ffe9a8; text-anchor: middle; paint-order: stroke; stroke: #3a2306; stroke-width: 5px; letter-spacing: 0.02em; }
.r-port-nom, .r-drapeau-nom { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #071a38; stroke-width: 4px; }
.r-drapeau-nom { text-anchor: start; }
/* Étoiles d'une route gagnée (plaqueEtoiles) : plaque sombre cerclée d'or, étoiles d'or ou en creux */
.r-etoiles-plaque { fill: rgba(7, 22, 48, 0.82); stroke: rgba(232, 198, 106, 0.75); stroke-width: 1.2; }
.r-etoile { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 233, 168, 0.45); stroke-width: 1; stroke-linejoin: round; }
.r-etoile.gagnee { stroke: #7a4a0c; stroke-width: 1.1; filter: drop-shadow(0 0 2px rgba(255, 210, 90, 0.85)); }
/* Médaille du défi réussi, à côté des étoiles (medailleChemins) */
.r-medaille { filter: drop-shadow(0 0 2px rgba(255, 210, 90, 0.85)); }
.r-medaille-ruban { fill: #c8343c; stroke: #5a1216; stroke-width: 0.8; stroke-linejoin: round; }
.r-medaille-disque { fill: url(#mOrEtoile); stroke: #7a4a0c; stroke-width: 1.1; }
.r-medaille-etoile { fill: #fff3c4; stroke: #b07216; stroke-width: 0.7; stroke-linejoin: round; }
.r-drapeau-num { font-family: 'Lilita One', sans-serif; font-size: 13px; fill: #fff; text-anchor: middle; }
.r-drapeau-tissu { transform-origin: 0 50%; animation: mPavillon 1.1s ease-in-out infinite alternate; }
.r-chauve-souris { animation: rChauveSouris 3s ease-in-out infinite; }
@keyframes rChauveSouris { 50% { transform: translate(14px, -8px) scaleY(0.6); } }


/* Panneau d'une carte : une fenêtre au centre, avec la carte en grand */
.pl-panneau { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 1rem; background: rgba(2, 8, 24, 0.72); animation: vgFondu 0.2s; }
.pn-boite {
  position: relative; width: min(46rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.2rem; border-radius: 1rem; color: #e2e8f0;
  background: rgba(8, 16, 34, 0.98); border: 1px solid rgba(255, 233, 168, 0.4); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.55); animation: pnArrivee 0.25s ease-out;
}
@keyframes pnArrivee { from { opacity: 0; transform: translateY(1rem) scale(0.97); } }
.pn-fermer { position: absolute; z-index: 2; right: 0.6rem; top: 0.6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1rem; }
.pn-fermer:hover { background: rgba(255, 255, 255, 0.2); }
.pn-calcul { list-style: none; margin-top: 0.7rem; font-size: 0.82rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.5rem; }
.pn-calcul li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.12rem 0; }
.pn-calcul li.plus b { color: #86efac; } .pn-calcul li.moins b { color: #fca5a5; }
.pn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.pn-actions .vg-btn { padding: 0.5rem 0.9rem; font-size: 0.9rem; flex: 1 1 auto; }
.pn-note { flex-basis: 100%; font-size: 0.78rem; color: #94a3b8; }
/* Choix d'une carte (Idée) */
.pn-choix h3 { font-size: 1.5rem; color: #fff; }
.pn-choix-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 11rem)); justify-content: center; gap: 0.8rem; margin-top: 1rem; }
.pn-choix-carte { padding: 0; border: 2px solid transparent; border-radius: 0.8rem; background: none; cursor: pointer; transition: border-color 0.15s; }
.pn-choix-carte:hover, .pn-choix-carte:focus-visible { border-color: #ffe08a; }

/* Bulles d'effets, toasts */
.vg-bulle {
  position: absolute; z-index: 2600; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  padding: 0.3rem 0.7rem; border-radius: 0.5rem; font-weight: 900; font-size: 0.9rem; color: #fff;
  background: #1e293b; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.5); animation: vgBulle 1.8s ease-out forwards;
}
.vg-bulle-malus { background: #b91c1c; } .vg-bulle-bonus { background: #15803d; }
/* Nom de la capacité au-dessus de la carte qui agit (boss en rouge sombre, joueur en or) */
.vg-bulle-capa-boss, .vg-bulle-capa-joueur { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: 0.02em; }
.vg-bulle-capa-boss { background: linear-gradient(#7f1d1d, #450a0a); border: 1px solid #fca5a5; color: #fee2e2; }
.vg-bulle-capa-joueur { background: linear-gradient(#a16207, #713f12); border: 1px solid #fde68a; color: #fef9c3; }
@keyframes vgBulle { 0% { opacity: 0; transform: translate(-50%, -60%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); } 75% { opacity: 1; transform: translate(-50%, -140%); } 100% { opacity: 0; transform: translate(-50%, -170%); } }
.vg-toast {
  position: fixed; z-index: 2700; left: 50%; top: 22%; transform: translateX(-50%); padding: 0.5rem 1rem; border-radius: 0.6rem; pointer-events: none;
  background: rgba(8, 16, 34, 0.92); color: #ffe08a; font-weight: 900; border: 1px solid rgba(255, 224, 138, 0.5); animation: vgToast 2.6s ease-out forwards;
}
@keyframes vgToast { 0% { opacity: 0; transform: translate(-50%, 0.8rem); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -0.8rem); } }

/* Fin du combat : camp gagnant (bordure dorée), camp perdant (voile sombre) ; calque en opacité seulement */
.pl-camp::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.pl-camp.gagne::after { opacity: 1; box-shadow: inset 0 0 0 2px #ffe08a, inset 0 0 2.2rem rgba(255, 214, 102, 0.35); }
.pl-camp.perd::after { opacity: 1; background: rgba(2, 6, 20, 0.5); }
.pl-total { transition: opacity 0.4s, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
/* Fin des effets : les deux Puissances totales en grand un instant */
.pl-duel.finale .pl-total { transform: scale(1.35); }
.pl-total.perd { opacity: 0.45; }

/* Verdict : un bandeau en travers de l'écran, avec les deux Puissances */
.vg-banniere { --bn: #ffe08a; position: fixed; inset: 0; z-index: 2800; display: grid; place-items: center; pointer-events: none; background: rgba(2, 8, 24, 0.4); animation: vgFondu 0.3s; }
.vg-banniere.defaite { --bn: #fca5a5; }
.vg-banniere-bande {
  position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.1rem 1rem 1.2rem;
  background: linear-gradient(90deg, transparent, rgba(8, 16, 34, 0.94) 20%, rgba(8, 16, 34, 0.94) 80%, transparent);
  border-block: 2px solid; border-image: linear-gradient(90deg, transparent, var(--bn) 25%, var(--bn) 75%, transparent) 1;
  animation: vgBande 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes vgBande { from { opacity: 0; transform: scaleY(0.2); } }
.vg-banniere strong {
  font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--bn); text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.55); animation: vgVerdict 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) 0.12s both;
}
@keyframes vgVerdict { from { opacity: 0; transform: translateY(0.35em) scale(0.92); } }
.vg-banniere span { font-weight: 900; font-size: 1.05rem; color: rgba(255, 255, 255, 0.8); animation: vgFondu 0.4s 0.4s both; }
/* (victoire : un reflet passe une fois sur le bandeau) */
.vg-banniere.victoire .vg-banniere-bande::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 233, 168, 0.16) 50%, transparent 65%);
  animation: vgReflet 1.1s ease-in-out 0.35s forwards;
}
@keyframes vgReflet { to { transform: translateX(100%); } }
.vg-banniere.sortie { animation: vgFondu 0.4s reverse forwards; }
@keyframes vgFondu { from { opacity: 0; } }
body.vg-combat .pl-bas { opacity: 0.6; pointer-events: none; }

/* ===== Séquences plein écran ===== */
.vg-voile {
  position: fixed; inset: 0; z-index: 2000; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 30, 70, 0.9), rgba(2, 6, 20, 0.97));
  animation: vgFondu 0.35s;
}
.sq { width: min(64rem, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.sq-sur { font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; color: var(--accent-saga); }
.sq-titre { font-size: clamp(1.8rem, 5vw, 3rem); color: #fff; margin: 0.3rem 0 1rem; text-shadow: 0 0.1em 0 rgba(0,0,0,0.4); }
.sq-titre-geant { font-size: clamp(2.6rem, 9vw, 5.4rem); color: #ffe9a8; -webkit-text-stroke: 0.06em #5a2d06; paint-order: stroke fill; text-shadow: 0 0.1em 0 #5a2d06, 0 0 2rem rgba(0,0,0,0.5); animation: vgTitre 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.sq-sous { max-width: 40rem; color: rgba(255,255,255,0.85); font-weight: 700; margin-bottom: 1.2rem; }
.vg-carte-nav { width: min(62rem, 100%); margin-bottom: 1rem; animation: vgFondu 0.5s; }
.nav-escale b { color: #ffe9a8; }

/* (arrivée d'en haut : cartes de fin, booster gagné, bouton) */
@keyframes vgTombe { from { opacity: 0; transform: translateY(-40vh) rotate(-12deg); } }


/* Route complète : le booster gagné, en grand */
.sq-booster { position: relative; }
.cb-rayons { position: fixed; left: 50%; top: 42%; width: 170vmax; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.35;
  background: repeating-conic-gradient(#ffe08a 0deg 6deg, transparent 6deg 16deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 48%); mask: radial-gradient(circle, #000 8%, transparent 48%); animation: fnTourne 16s linear infinite; }
.cb-paquet { position: relative; width: clamp(9rem, 30vw, 13rem); aspect-ratio: 5 / 7; margin: 1.6rem 0 1.4rem; border-radius: 0.6rem;
  background: linear-gradient(160deg, #2a5ab8, #0f2d6e 55%, #091b44); box-shadow: 0 0 0 3px #e8c66a, 0 0 3rem 0.6rem rgba(255, 214, 102, 0.75), 0 1.4rem 2.6rem rgba(0, 0, 0, 0.6);
  animation: cbArrivee 1.1s cubic-bezier(0.2, 1.3, 0.4, 1) both, cbFlotte 3s 1.1s ease-in-out infinite; }
@keyframes cbArrivee { 0% { transform: translateY(-70vh) rotate(-18deg) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes cbFlotte { 50% { transform: translateY(-0.6rem) rotate(1.5deg); box-shadow: 0 0 0 3px #e8c66a, 0 0 4.5rem 1rem rgba(255, 214, 102, 0.9), 0 1.8rem 2.6rem rgba(0, 0, 0, 0.5); } }
.cb-bord { position: absolute; left: 0; right: 0; height: 0.7rem; background: linear-gradient(90deg, #b8862a, #fff0b8 50%, #b8862a);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.7rem 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.7rem 100%; }
.cb-bord.haut { top: -0.35rem; } .cb-bord.bas { bottom: -0.35rem; transform: scaleY(-1); }
.cb-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: #ffe9a8; text-align: center; padding: 1rem; }
.cb-embleme { width: 62%; filter: drop-shadow(0 0 0.8rem rgba(255, 224, 138, 0.7)); }
.cb-face strong { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(1.1rem, 3.4vw, 1.5rem); line-height: 1.1; }
.cb-face span { font-weight: 800; font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); }
.cb-reflet { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cb-reflet::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 236, 170, 0.6) 52%, transparent 60%);
  transform: translateX(-60%); animation: cbReflet 2.6s 1.2s ease-in-out infinite; }
@keyframes cbReflet { 60%, 100% { transform: translateX(60%); } }
.cb-titre { animation-delay: 0.6s; }
.cb-go { animation: vgTombe 0.6s 1.4s both; }

/* Fin : booster gagné */
.fn-booster { position: relative; display: flex; align-items: center; gap: 1.1rem; max-width: 34rem; margin: 0 auto 1.4rem; padding: 0.9rem 1.2rem; text-align: left; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 224, 138, 0.2), rgba(255, 224, 138, 0.06)); border: 1px solid rgba(255, 224, 138, 0.55); animation: vgTombe 0.7s 0.4s both; }
.fn-booster strong { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.4rem; color: #ffe9a8; }
.fn-booster p { margin-top: 0.2rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.fn-booster-paquet { position: relative; flex-shrink: 0; width: 4.6rem; aspect-ratio: 63 / 88; filter: drop-shadow(0 0 1rem rgba(255, 224, 138, 0.8)); animation: fnPaquet 2.4s ease-in-out infinite; }
@keyframes fnPaquet { 50% { transform: rotate(-4deg) scale(1.05); } }
.fn-note { margin-bottom: 1.2rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
/* Étoiles de la route (critères de VOYAGE.ETOILES) : elles s'allument l'une après l'autre */
.fn-etoiles { list-style: none; display: grid; gap: 0.4rem; margin: 0 auto 1.2rem; padding: 0; text-align: left; }
.fn-etoiles li { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.55); animation: vgFondu 0.4s calc(0.5s + var(--i) * 0.35s) both; }
.fn-etoiles li.oui { color: #fff; }
.fn-etoiles .vg-etoile { width: 1.8rem; }
.fn-etoiles li.oui .vg-etoile { animation: fnEtoile 0.6s calc(0.5s + var(--i) * 0.35s) cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes fnEtoile { from { transform: scale(0) rotate(-90deg); } }
.fn-etoiles b { padding: 0.1rem 0.5rem; border-radius: 99px; background: rgba(255, 212, 92, 0.2); color: #ffe08a; font-size: 0.85rem; }
.fn-etoiles small { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.fn-etoiles .vg-medaille { width: 1.8rem; }
.fn-etoiles li.oui .vg-medaille { animation: fnEtoile 0.6s calc(0.5s + var(--i) * 0.35s) cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* Tutoriel : la zone expliquée éclairée, le reste assombri */
.tu-calque { position: fixed; inset: 0; z-index: 2500; }
.tu-trou { position: fixed; border-radius: 1rem; border: 2px solid #ffe08a; box-shadow: 0 0 0 200vmax rgba(2, 8, 24, 0.74), 0 0 1.6rem rgba(255, 224, 138, 0.6); transition: left 0.4s, top 0.4s, width 0.4s, height 0.4s; pointer-events: none; }
.tu-bulle { position: fixed; width: min(24rem, calc(100vw - 1.5rem)); padding: 1rem 1.1rem 0.9rem; border-radius: 1rem; color: #1d2230; background: #fbf6ea; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5); transition: left 0.4s, top 0.4s; }
.tu-bulle.entree { animation: tuEntree 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes tuEntree { from { opacity: 0; transform: scale(0.9); } }
.tu-etape { float: right; font-size: 0.78rem; font-weight: 800; color: #8a6a26; }
.tu-texte { font-weight: 600; line-height: 1.45; }
.tu-texte b { display: block; margin-bottom: 0.25rem; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.25rem; color: #8c4a10; }
.tu-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }
.tu-actions .vg-btn { padding: 0.45rem 0.95rem; font-size: 0.92rem; }
.tu-passer { background: transparent; color: #6b5638; box-shadow: none; border-color: rgba(107, 86, 56, 0.35); }

/* Fin */
.sq-fin { position: relative; }
.fn-rayons { position: fixed; left: 50%; top: 40%; width: 160vmax; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.25; background: repeating-conic-gradient(#ffe08a 0deg 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 50%); mask: radial-gradient(circle, #000 10%, transparent 50%); animation: fnTourne 20s linear infinite; }
@keyframes fnTourne { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fn-equipage { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.fn-carte { width: clamp(5rem, 16vw, 9rem); animation: vgTombe 0.6s both; }
.fn-carte:nth-child(2) { animation-delay: 0.1s; } .fn-carte:nth-child(3) { animation-delay: 0.2s; } .fn-carte:nth-child(4) { animation-delay: 0.3s; } .fn-carte:nth-child(5) { animation-delay: 0.4s; }
.sq-fin.defaite .sq-titre-geant { color: #fecaca; -webkit-text-stroke-color: #3a0207; text-shadow: 0 0.1em 0 #3a0207; }

@media (prefers-reduced-motion: reduce) {
  .fn-rayons, .vg-banniere-bande::after { animation: none; }
}

@media (max-width: 700px) {
  .vg-page { padding: 0.8rem 0.6rem 2rem; }
  .vg-titre p { font-size: 0.92rem; }
  /* (carte trop petite à cette largeur : elle défile de côté, calée sur le navire) */
  .vg-carte-mer { border-radius: 0.9rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vg-carte-mer::-webkit-scrollbar { display: none; }
  .vg-carte-svg { width: 46rem; max-width: none; }
  .vg-carte-routes { width: 54rem; }
  .pl-pioche { margin: 0.2rem 0.2rem; }
  .vg-voile .vg-carte-nav { width: calc(100% + 2rem); margin-inline: -1rem; border-radius: 0; }
  .fn-booster { gap: 0.8rem; padding: 0.8rem; }
  .fn-booster-paquet { width: 3.6rem; }
  .dk-repere { font-size: 0.58rem; padding: 0.1rem 0.15rem; }
  .dk-sagas { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding: 0 1rem 0.1rem; }
  .dk-sagas::-webkit-scrollbar { display: none; }
  .dk-saga { flex: 0 0 auto; width: 8.6rem; }
  .dk-paquet-actif { padding: 0.5rem 0.5rem 0.6rem; }
  .dk-emplacements { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
  .dk-retirer { width: 1.35rem; height: 1.35rem; top: -0.3rem; right: -0.3rem; font-size: 0.7rem; }
  .dk-reserve { padding: 0.6rem 0.5rem; }
  #deckListe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .dk-renommer input { width: 11rem; }
  .fiche { grid-template-columns: 1fr; justify-items: center; gap: 0.8rem; }
  .fiche-carte { width: min(12rem, 52vw); }
  .fiche-texte { width: 100%; }
  .pn-boite { padding: 1rem 0.9rem; }
  #ecranJeu:not(.hidden) { grid-template-rows: auto minmax(0, 1.05fr) auto minmax(0, 1fr) minmax(0, 1.05fr); gap: 0.35rem; }
  .pl-saga strong { font-size: 1.25rem; }
  .pl-effet { font-size: 0.75rem; max-width: none; flex: 1 1 100%; padding: 0.35rem 0.6rem; }
  /* (défi : la médaille seule, à côté du nom de l'arc ; l'effet de l'arc passe dessous) */
  .pl-effet { order: 1; }
  .pl-defi { padding: 0.3rem; }
  .pl-defi span { display: none; }
  .pl-heritages-btn { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
  .ve-defi .vg-medaille { width: 1.6rem; }
  .pl-camp { padding: 0.9rem 0.3rem 0.35rem; }
  .pl-rang { gap: 0.3rem; --l-w: calc((100cqw - 1.5rem) / max(5.2, var(--n, 5) + 0.3)); }
  .pl-camp-boss .pl-rang { --l-w: calc((100cqw - 1.5rem) / max(3.6, var(--n, 3) + 0.6)); }
  /* (pied : Berrys et paquet à gauche, la main, et le bouton du combat dessous) */
  .pl-bas { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bourse main" "pioche main" "combat combat"; gap: 0.3rem 0.5rem; padding: 0.4rem; }
  .pl-bourse { grid-area: bourse; padding: 0.15rem 0.5rem 0.15rem 0.2rem; }
  .pl-bourse strong { font-size: 1.2rem; }
  .pl-piece { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
  .pl-pioche { grid-area: pioche; justify-self: center; width: 2.8rem; margin: 0; }
  .pl-main { grid-area: main; gap: 0.35rem; padding: 0.45rem 0.45rem 0 0; }
  .pl-main > .pj { --carte-w: min(calc((100cqh - 0.4rem) * 0.716), calc((100cqw - (var(--n, 2) - 1) * 0.35rem) / var(--n, 2))); }
  .pl-combat { grid-area: combat; padding: 0.45rem 1rem; font-size: 0.95rem; }
}