/* Icônes façon autocollant (comme l'oursin et le crabe) : dessin plein en couleur, posé sans pastille */
.bulle.icone-cat { display: grid; place-items: center; color: var(--c); background: none; }
.bulle.icone-cat .icon { display: block; width: 38px; height: 38px; margin: 0; }
@media (prefers-color-scheme: dark) {
  .bulle.icone-cat { color: color-mix(in srgb, var(--c) 80%, white); }
}

.bulle.icone-cat.grande .icon { width: 58px; height: 58px; }
/* Mini icône dans le texte (libellés, boutons) : dessin coloré, sans pastille */
.icon.mini-cat { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--c); stroke-width: 2.1; }
@media (prefers-color-scheme: dark) { .icon.mini-cat { color: color-mix(in srgb, var(--c) 70%, white); } }
/* États vides : la mini icône en grand */
.vide-etat .emoji .icon.mini-cat { width: 2.6rem; height: 2.6rem; stroke-width: 1.6; vertical-align: 0; }
.signal-icone .icon.mini-cat { width: 1.5rem; height: 1.5rem; vertical-align: -.35em; }

/* Police ronde d'Oursin (Fredoka 600, alphabet latin, hébergée ici) : logo et grands titres */
@font-face { font-family: "Fredoka Oursin"; font-weight: 600; font-display: swap;
  src: url("polices/fredoka-600-latin.woff2") format("woff2"); }
.logo { gap: 6px; font-family: "Fredoka Oursin", system-ui, sans-serif; font-weight: 600; font-size: 1.6rem;
  letter-spacing: .01em; color: var(--accent); line-height: 1; }
.logo img { width: 50px; height: 50px; margin: -10px -2px -10px -10px; }
@media (prefers-color-scheme: dark) { .logo { color: var(--accent); } }
.connexion-hero h1 { font-family: "Fredoka Oursin", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; font-size: 2.6rem; }

/* Menu Plus : groupes rangés en deux colonnes sur ordinateur, titres du haut alignés */
.menu-plus .menu-titre { margin: 0 6px 8px; }
.menu-plus { gap: 18px; }

/* Grands titres des pages : même police que le logo */
h1 { font-family: "Fredoka Oursin", system-ui, sans-serif; font-weight: 600; letter-spacing: 0; color: var(--accent); }

/* Oursin nouvelle DA : un seul noir pour le corps et les longs piquants (pas de démarcation),
   piquants intercalés un ton plus clair, bouts arrondis, reflet, joues corail */
.mascotte.nouvelle .n-arriere, .mascotte.nouvelle .n-corps, .mascotte.nouvelle .m-corps { fill: #1d1f2a; stroke: #1d1f2a; stroke-width: 3.2; stroke-linejoin: round; }
.mascotte.nouvelle .n-avant { fill: #1d1f2a; stroke: #1d1f2a; stroke-width: 3; stroke-linejoin: round; }
.mascotte.nouvelle .n-corps { stroke-width: 0; }
.mascotte.nouvelle .n-reflet { fill: #fff; opacity: .14; }
.mascotte.nouvelle .n-joue { fill: #ef7d5f; opacity: .85; }
.mascotte.nouvelle .n-lueur { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .18; fill: none; }
@media (prefers-color-scheme: dark) {
  .mascotte.nouvelle .n-arriere, .mascotte.nouvelle .n-corps, .mascotte.nouvelle .m-corps { fill: #4b4f5e; stroke: #4b4f5e; }
  .mascotte.nouvelle .n-avant { fill: #4b4f5e; stroke: #4b4f5e; }
}

/* Réglages : choix du style d'Oursin */
.choix-mascotte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choix-mascotte button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 16px;
  background: var(--surface-2); color: var(--text); border: 2px solid transparent; font-weight: 600; min-height: 0; }
.choix-mascotte button.choisi { border-color: var(--accent); background: var(--accent-soft); }
.choix-mascotte .apercu { min-height: 72px; display: grid; place-items: center; }

/* Carte principale de l'accueil : le reste à dépenser en vedette, jauge étiquetée, petit voilier = aujourd'hui */
.hero-reste-grand { display: flex; flex-direction: column; margin: 4px 0 16px; }
.hero-reste-grand > span { font-size: 1.05rem; opacity: .9; }
.hero-reste-grand strong { font-size: clamp(2.3rem, 12vw, 3rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 4px; }
.hero-reste-grand small { font-size: .95rem; opacity: .85; }
.hero.alerte .hero-reste-grand strong { color: #ffd0cc; }
.jauge-etiquettes { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; margin-top: 8px; opacity: .92; }
.jauge-etiquettes .a-venir { text-align: right; opacity: .8; }
.hero-reste-grand + .jauge-cadre { margin-top: 48px; }
/* Le bateau marque aujourd'hui ; il navigue posé sur la jauge comme sur l'horizon */
.jauge-bateau { position: absolute; top: -42px; width: 48px; height: 48px; margin-left: -24px; z-index: 1; pointer-events: auto; }
.jauge-bateau svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jauge-total { margin: 2px 0 0; font-size: .84rem; opacity: .75; }