/* ===========================================================================
   style.css — Tout l'habillage de BoatPlay V12
   ---------------------------------------------------------------------------
   Le design est pensé « mobile d'abord » : les règles de base sont faites pour
   un écran de téléphone, et les blocs `@media` en bas de fichier réorganisent
   la page sur tablette et sur ordinateur.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. LES COULEURS ET LES MESURES DU JEU
   ---------------------------------------------------------------------------
   Tout est rangé ici sous forme de « variables ». Si tu changes une couleur
   à cet endroit, elle change partout dans le jeu d'un seul coup.
--------------------------------------------------------------------------- */

:root {
  /* Les bleus de la mer, du plus profond au plus clair */
  --abysse:      #001b33;
  --profond:     #012a4a;
  --nuit:        #013a63;
  --moyen:       #01497c;
  --lagon:       #2a9df4;

  /* Les couleurs qui accrochent l'œil */
  --cyan:        #61e8e1;
  --or:          #ffd166;
  --corail:      #ff7f51;
  --vert:        #4ade80;
  --rouge:       #f87171;
  --violet:      #c9a7ff;

  /* Le texte */
  --texte:       #eaf6ff;
  --texte-doux:  rgba(234, 246, 255, .68);
  --texte-faible:rgba(234, 246, 255, .45);

  /* Les panneaux « verre dépoli » */
  --panneau:      rgba(255, 255, 255, .07);
  --panneau-fort: rgba(255, 255, 255, .12);
  --bordure:      rgba(255, 255, 255, .14);

  /* Les arrondis et les ombres */
  --rayon:        18px;
  --rayon-petit:  12px;
  --ombre:        0 10px 30px rgba(0, 12, 26, .40);
  --ombre-douce:  0 4px 14px rgba(0, 12, 26, .28);

  /* Les espacements */
  --marge:        16px;
}


/* ---------------------------------------------------------------------------
   2. LES BASES
--------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--abysse);
  background-image:
    radial-gradient(120% 80% at 50% 0%, var(--moyen) 0%, var(--nuit) 45%, var(--profond) 75%, var(--abysse) 100%);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}

body.sans-defilement { overflow: hidden; }

/* On coupe le rebond élastique du navigateur en haut de page : c'est notre
   propre indicateur « tirer pour mettre à jour » qui prend le relais
   (voir js/rafraichir.js). */
html, body { overscroll-behavior-y: contain; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}


/* ---------------------------------------------------------------------------
   3. LA BARRE DU HAUT
--------------------------------------------------------------------------- */

.barre-haut {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--marge);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(1, 27, 51, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.barre-haut__titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .3px;
}

.barre-haut__titre small {
  font-size: .7rem;
  font-weight: 700;
  color: var(--cyan);
  vertical-align: super;
}

.barre-haut__logo { font-size: 1.3rem; }

.barre-haut__droite {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icone {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.05rem;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  transition: background .15s ease, transform .15s ease;
}
.btn-icone:hover  { background: var(--panneau-fort); }
.btn-icone:active { transform: scale(.92); }

.porte-monnaie {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .22), rgba(255, 127, 81, .18));
  border: 1px solid rgba(255, 209, 102, .40);
  box-shadow: var(--ombre-douce);
}

.porte-monnaie__valeur {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--or);
}

.porte-monnaie__piece { font-size: 1rem; }

/* Petite pulsation quand le solde change */
.pulse { animation: pulse .45s ease; }
@keyframes pulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1);    }
}


/* ---------------------------------------------------------------------------
   4. LE BANDEAU (poulpe + équipement + série)
--------------------------------------------------------------------------- */

.bandeau {
  position: relative;
  padding: 18px var(--marge) 26px;
  overflow: hidden;
}

.bandeau__vagues {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.bandeau__vagues svg { width: 100%; height: 58px; display: block; }

.bandeau__contenu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.poulpe {
  flex: 0 0 auto;
  animation: flotter 3.2s ease-in-out infinite;
}
.poulpe svg { display: block; overflow: visible; }

@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.bandeau__infos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.equipement__label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--texte-faible);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0;
  min-height: 32px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.05rem;
  border-radius: 10px;
  background: var(--panneau-fort);
  border: 1px solid var(--bordure);
}

.badge--vide { color: var(--texte-faible); }

.equipement__bonus {
  font-size: .8rem;
  color: var(--texte-doux);
}
.equipement__bonus b { color: var(--texte-faible); }
.equipement__bonus b.bonus--actif { color: var(--vert); }

.stats { display: flex; gap: 10px; }

.stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--rayon-petit);
  background: var(--panneau);
  border: 1px solid var(--bordure);
  font-size: .78rem;
  color: var(--texte-doux);
}
.stat b { font-size: 1rem; color: var(--texte); }
.stat__emoji { font-size: .95rem; }


/* ---------------------------------------------------------------------------
   5. LES ONGLETS PRINCIPAUX
   ---------------------------------------------------------------------------
   La barre reste collée juste sous la barre du haut quand on fait défiler.
   Sa position dépend de « --hauteur-barre-haut », que js/navigation.js mesure
   au démarrage : la hauteur réelle change selon l'appareil (encoche de
   l'iPhone, taille du texte choisie par l'utilisateur…), on ne la devine pas.
--------------------------------------------------------------------------- */

:root { --hauteur-barre-haut: 58px; }

.nav-jeu {
  position: sticky;
  top: var(--hauteur-barre-haut);
  z-index: 40;
  display: flex;
  gap: 6px;
  max-width: 900px;
  margin: 0 auto 4px;
  padding: 8px var(--marge);
  background: rgba(1, 27, 51, .80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.nav-jeu__bouton {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px;
  border-radius: var(--rayon-petit);
  font-size: .74rem;
  font-weight: 700;
  color: var(--texte-doux);
  background: var(--panneau);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-jeu__bouton:hover  { background: var(--panneau-fort); color: var(--texte); }
.nav-jeu__bouton:active { transform: scale(.97); }

.nav-jeu__bouton--actif {
  background: linear-gradient(135deg, rgba(42, 157, 244, .38), rgba(97, 232, 225, .22));
  border-color: rgba(97, 232, 225, .55);
  color: var(--texte);
  box-shadow: var(--ombre-douce);
}

.nav-jeu__emoji { font-size: 1.25rem; line-height: 1; }

/* La petite pastille de rappel, en haut à droite de l'onglet */
.nav-jeu__pastille {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #2b1000;
  background: var(--or);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.nav-jeu__pastille--visible { display: flex; }


/* ---------------------------------------------------------------------------
   6. LA PAGE ET LES PANNEAUX
--------------------------------------------------------------------------- */

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--marge) 32px;
}

/* Une « vue » = le contenu d'un onglet. Une seule est visible à la fois. */
.vue { display: none; }

.vue--active {
  display: flex;
  flex-direction: column;
  gap: var(--marge);
  animation: apparition .28s ease;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.carte-ui {
  padding: 16px;
  border-radius: var(--rayon);
  background: var(--panneau);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.carte-ui__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.carte-ui__entete h2 { font-size: 1.05rem; }

.pastille {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--panneau-fort);
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  white-space: nowrap;
}

.pastille--promo {
  background: rgba(255, 127, 81, .18);
  border-color: rgba(255, 127, 81, .42);
  color: var(--corail);
}

.note {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--texte-doux);
}
.note b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.note--petite { font-size: .74rem; color: var(--texte-faible); }
.note--petite b { color: var(--texte-doux); }

.vide {
  padding: 18px 4px;
  text-align: center;
  font-size: .88rem;
  color: var(--texte-faible);
}


/* ---------------------------------------------------------------------------
   7. LES BARRES DE PROGRESSION
--------------------------------------------------------------------------- */

.progression {
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  overflow: hidden;
}

.progression__barre {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--lagon));
  transition: width .5s cubic-bezier(.3, 1.2, .5, 1);
}

.progression__barre--poissons { background: linear-gradient(90deg, var(--cyan), #2ec4b6); }
.progression__barre--sorties  { background: linear-gradient(90deg, var(--or), var(--corail)); }


/* ---------------------------------------------------------------------------
   8. LES QUÊTES
--------------------------------------------------------------------------- */

.quetes {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.quete {
  position: relative;
  padding: 12px 14px;
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--couleur, var(--cyan));
  transition: opacity .25s ease, transform .15s ease;
}

.quete--faite {
  opacity: .52;
  border-left-color: var(--vert);
}

.quete__famille {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--couleur);
  margin-bottom: 5px;
}

.quete__texte {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.quete__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quete__gain {
  font-weight: 800;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.quete__base {
  font-weight: 500;
  font-size: .8rem;
  color: var(--texte-faible);
  text-decoration: line-through;
  margin-right: 2px;
}

.quete__validee {
  font-size: .82rem;
  font-weight: 700;
  color: var(--vert);
}


/* ---------------------------------------------------------------------------
   9. LES BOUTONS
--------------------------------------------------------------------------- */

.btn {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  background: var(--panneau-fort);
  border: 1px solid var(--bordure);
  transition: background .15s ease, transform .12s ease, opacity .15s ease;
}
.btn:hover  { background: rgba(255, 255, 255, .18); }
.btn:active { transform: scale(.95); }

.btn--principal {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--lagon), var(--moyen));
  border-color: rgba(42, 157, 244, .55);
  box-shadow: var(--ombre-douce);
}
.btn--principal:hover { background: linear-gradient(135deg, #3fb0ff, var(--nuit)); }

.btn--valider {
  background: linear-gradient(135deg, rgba(74, 222, 128, .26), rgba(42, 157, 244, .22));
  border-color: rgba(74, 222, 128, .45);
}
.btn--valider:hover { background: linear-gradient(135deg, rgba(74, 222, 128, .40), rgba(42, 157, 244, .32)); }

.btn--acheter {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .26), rgba(255, 127, 81, .20));
  border-color: rgba(255, 209, 102, .42);
  color: var(--or);
}

.btn--desactive {
  opacity: .40;
  cursor: not-allowed;
  background: var(--panneau);
  border-color: var(--bordure);
  color: var(--texte-faible);
}
.btn--desactive:hover { background: var(--panneau); }

.btn--equiper {
  width: 100%;
  margin-top: 8px;
  background: rgba(42, 157, 244, .22);
  border-color: rgba(42, 157, 244, .45);
}

.btn--equipe {
  width: 100%;
  margin-top: 8px;
  background: rgba(74, 222, 128, .18);
  border-color: rgba(74, 222, 128, .45);
  color: var(--vert);
  cursor: default;
}


/* ---------------------------------------------------------------------------
   10. LA CARTE
--------------------------------------------------------------------------- */

.carte__statut {
  padding: 9px 12px;
  border-radius: var(--rayon-petit);
  font-size: .82rem;
  margin-bottom: 10px;
  border: 1px solid var(--bordure);
  background: var(--panneau);
}
.carte__statut--ok     { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .12); }
.carte__statut--alerte { border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .12); }

.carte {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: var(--rayon-petit);
  overflow: hidden;
  background: #0a3d62;
  border: 1px solid var(--bordure);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35);
  cursor: crosshair;
}

/* Plein écran.
   On ne met NI largeur NI hauteur : « inset: 0 » suffit à remplir exactement
   l'écran, sans risque de débordement.
   ⚠️ Pour que ça marche, la carte doit être déplacée dans <body> par
   basculerPleinEcran() : un parent qui utilise « backdrop-filter » empêche
   « position: fixed » de se caler sur l'écran. */
/* On écrit « .carte.carte--plein-ecran » (deux classes) et non
   « .carte--plein-ecran » : les règles `@media` en bas du fichier fixent une
   hauteur à `.carte` pour les grands écrans, et à priorité égale c'est la
   dernière règle du fichier qui gagne. Avec deux classes, celle-ci est plus
   forte et le plein écran reste vraiment plein écran. */
.carte.carte--plein-ecran {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 9999;
  border-radius: 0;
  border: 0;
}

/* En plein écran, le bouton de fermeture passe en haut à droite : plus gros,
   loin de la barre d'accueil de l'iPhone, et toujours dans l'écran. */
.carte--plein-ecran .carte__bouton {
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  bottom: auto;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

.tuiles, .calque {
  position: absolute;
  inset: 0;
}

.tuile {
  position: absolute;
  width: 256px;
  height: 256px;
  /* La carte OpenStreetMap est claire : on l'assombrit et on la bleuit
     pour qu'elle s'accorde avec l'ambiance du jeu. */
  filter: brightness(.78) saturate(.85) hue-rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

.calque { pointer-events: auto; }

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
  animation: rebond 2.2s ease-in-out infinite;
  z-index: 5;
}
.pin:active { transform: translate(-50%, -50%) scale(.85); }

@keyframes rebond {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-5px); }
}

.bateau {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 26px;
  line-height: 1;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(97, 232, 225, .9));
  transition: left .5s ease, top .5s ease;
}

/* Un halo qui pulse autour du bateau, pour bien le repérer */
.bateau::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid rgba(97, 232, 225, .55);
  animation: halo 2s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(.4); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.bateau--hors-zone { opacity: .55; filter: grayscale(.6) drop-shadow(0 0 4px #000); }
.bateau--entrainement { filter: drop-shadow(0 0 6px rgba(255, 209, 102, .9)); }
.bateau--entrainement::before { border-color: rgba(255, 209, 102, .55); }

.carte__bouton {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: .95rem;
  background: rgba(1, 27, 51, .78);
  border: 1px solid var(--bordure);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.carte__credit {
  position: absolute;
  left: 6px;
  bottom: 5px;
  z-index: 10;
  font-size: .62rem;
  color: rgba(255, 255, 255, .62);
  background: rgba(0, 0, 0, .35);
  padding: 1px 6px;
  border-radius: 5px;
  pointer-events: none;
}


/* --- La liste des trésors --- */

.tresors { margin-top: 12px; }

.tresors__entete {
  font-size: .8rem;
  font-weight: 700;
  color: var(--or);
  margin-bottom: 6px;
}

.tresors__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: .8rem;
  color: var(--texte-doux);
}
.tresors__ligne:nth-child(odd) { background: rgba(255, 255, 255, .04); }

.tresors__ligne--proche {
  background: rgba(74, 222, 128, .14);
  color: var(--texte);
}

.tresors__distance {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.tresors__fini {
  padding: 12px;
  text-align: center;
  font-size: .85rem;
  color: var(--vert);
}


/* ---------------------------------------------------------------------------
   11. LA BOUTIQUE
--------------------------------------------------------------------------- */

.onglets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }

.onglet {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 700;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  transition: background .15s ease, color .15s ease;
}
.onglet:hover { background: var(--panneau-fort); }

.onglet--actif {
  background: linear-gradient(135deg, rgba(42, 157, 244, .35), rgba(97, 232, 225, .22));
  border-color: rgba(97, 232, 225, .5);
  color: var(--texte);
}

.onglet__emoji { font-size: 1rem; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.objet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--bordure);
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.objet:hover { transform: translateY(-2px); }

.objet--possede { border-color: rgba(74, 222, 128, .32); }
.objet--equipe  { border-color: rgba(74, 222, 128, .70); background: rgba(74, 222, 128, .10); }

.objet__promo {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  background: var(--corail);
  color: #2b1000;
}

.objet__visuel {
  font-size: 2.1rem;
  line-height: 1;
  padding: 12px 0;
  margin-bottom: 8px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04));
}

.objet__nom { font-size: .84rem; margin-bottom: 3px; }

.objet__bonus {
  font-size: .68rem;
  color: var(--cyan);
  margin-bottom: 8px;
}

.objet__prix {
  font-size: .85rem;
  color: var(--or);
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}

.objet__prix-barre { color: var(--texte-faible); font-size: .74rem; }
.objet__prix-promo { color: var(--corail); }

.objet__possede {
  font-size: .8rem;
  font-weight: 700;
  color: var(--vert);
  margin-top: auto;
}


/* ---------------------------------------------------------------------------
   12. L'INVENTAIRE
--------------------------------------------------------------------------- */

.inv__groupe { margin-bottom: 14px; }
.inv__groupe:last-child { margin-bottom: 0; }

.inv__titre {
  font-size: .82rem;
  color: var(--texte-doux);
  margin-bottom: 7px;
}

.inv__compte {
  font-size: .7rem;
  font-weight: 600;
  color: var(--texte-faible);
}

.inv__objets { display: flex; flex-wrap: wrap; gap: 7px; }

.inv__objet {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .78rem;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  transition: background .15s ease;
}
.inv__objet:hover { background: var(--panneau-fort); }

.inv__objet--equipe {
  background: rgba(74, 222, 128, .14);
  border-color: rgba(74, 222, 128, .50);
}

.inv__emoji { font-size: 1rem; }
.inv__etoile { color: var(--vert); font-size: .7rem; }


/* ---------------------------------------------------------------------------
   13. LES MESSAGES QUI GLISSENT
--------------------------------------------------------------------------- */

.messages {
  position: fixed;
  left: 50%;
  bottom: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.toast {
  padding: 11px 15px;
  border-radius: var(--rayon-petit);
  font-size: .84rem;
  font-weight: 600;
  color: var(--texte);
  background: rgba(1, 27, 51, .94);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: entree .35s cubic-bezier(.2, 1.3, .5, 1);
}

@keyframes entree {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast--sortie {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s ease, transform .4s ease;
}

.toast--gain   { border-color: rgba(255, 209, 102, .55); box-shadow: 0 8px 26px rgba(255, 209, 102, .18); }
.toast--erreur { border-color: rgba(248, 113, 113, .55); }
.toast--info   { border-color: rgba(97, 232, 225, .45); }


/* ---------------------------------------------------------------------------
   14. TIRER POUR METTRE À JOUR
   ---------------------------------------------------------------------------
   L'indicateur attend caché juste au-dessus de l'écran. Sa position et son
   opacité sont pilotées par js/rafraichir.js, au rythme du doigt.
--------------------------------------------------------------------------- */

.rafraichir {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 50%;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translate(-50%, -78px);
  pointer-events: none;
}

/* Le retour en place, lui, est animé (pendant le geste, non : ça doit
   suivre le doigt exactement). */
.rafraichir--anime { transition: transform .3s cubic-bezier(.2, 1.1, .4, 1), opacity .3s ease; }

.rafraichir__rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  background: rgba(1, 27, 51, .95);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Quand on a assez tiré, le rond passe au cyan : le geste est « armé ». */
.rafraichir--pret .rafraichir__rond {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(97, 232, 225, .45);
}

.rafraichir__texte {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--texte);
  background: rgba(1, 27, 51, .90);
  border: 1px solid var(--bordure);
  white-space: nowrap;
}

.rafraichir--pret .rafraichir__texte { color: var(--cyan); }

/* Pendant le rechargement, l'icône tourne en continu. */
.rafraichir--tourne .rafraichir__icone {
  animation: tourner .8s linear infinite;
}
@keyframes tourner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ---------------------------------------------------------------------------
   15. LE PIED DE PAGE
--------------------------------------------------------------------------- */

.pied {
  padding: 20px var(--marge) 30px;
  text-align: center;
  font-size: .74rem;
  color: var(--texte-faible);
}


/* ---------------------------------------------------------------------------
   16. LES GRANDS ÉCRANS
--------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .quetes { grid-template-columns: repeat(2, 1fr); }
  .carte  { height: 340px; }
  .barre-haut__titre { font-size: 1.3rem; }
}

@media (min-width: 900px) {
  :root { --marge: 22px; }

  .page { max-width: 1100px; }
  .nav-jeu { max-width: 1100px; }
  .quetes { grid-template-columns: repeat(3, 1fr); }
  .carte { height: 420px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .poulpe svg { width: 96px; height: 108px; }
}


/* ---------------------------------------------------------------------------
   17. ACCESSIBILITÉ : on respecte le réglage « réduire les animations »
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}