/* ── Opening pop-up « Êtes-vous membre ou praticien ? » (js/entry.js) ──
   Owner pick B1 (2026-10-13): a cream card over the dimmed map, two big
   boxes side by side, green for members and orange for practitioners, each
   with a white line icon in a ring (no emoji). The « deux comptes » card (shown once, on
   /dashboard right after « Devenir praticien », js/dashboard.js bothTip()) reuses these styles.
   Separate file (not styles.css) so a new deploy never pairs the new markup
   with a stale cached stylesheet. */

html.entry-open, html.entry-open body { overflow: hidden; }

#entry {
  position: fixed;
  inset: 0;
  z-index: 4000;                 /* above the top bar (950), tab bar (2500), sheets (2700) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgb(30 35 38 / 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  color: var(--z-ink, #2e3235);
  font-size: 16px;
  line-height: 1.4;
}
#entry[hidden], #entry [hidden] { display: none; }
#entry:focus { outline: none; }

.entry-card-wrap {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 24px 18px 20px;
  border-radius: 26px;
  background: var(--z-cream, #f7f5f0);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
  text-align: center;
}
.entry-card-wrap h1, .entry-card-wrap h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
}
.entry-lead { margin: 8px 0 0; color: #4a4f52; font-size: 15px; }

.entry-boxes { display: flex; gap: 12px; margin-top: 20px; }
.entry-box {
  flex: 1 1 0;
  min-width: 0;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 10px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.entry-box:active { transform: scale(0.97); }
.entry-box:focus-visible { outline: 3px solid var(--z-gold, #b8975a); outline-offset: 2px; }
.entry-box--member { background: #3f5e4f; }   /* member side = green, always */
.entry-box--pro { background: #b4521f; }      /* practitioner side = orange, always */
.entry-ring {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-ring svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry-box-h { font-size: 23px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.entry-box-p { font-size: 14px; line-height: 1.3; opacity: 0.92; }
.entry-foot { margin: 14px 0 0; font-size: 13px; color: #5c6266; }

.entry-both { background: #fff; }
.entry-where { margin: 0 0 18px; font-size: 13px; color: #6b7175; }
.entry-ok {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--z-ink, #2e3235);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.entry-ok:focus-visible { outline: 3px solid var(--z-gold, #b8975a); outline-offset: 2px; }

/* Two-sided tip (2026-10-15): the Profil row « Passer en mode praticien » instead of the removed switch. */
.entry-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 13px 16px; border-radius: 14px; background: #fff; border: 1px solid #ebe9e3; font-size: 15px; font-weight: 700; color: #b4521f; }
.entry-row-chev { font-size: 22px; line-height: 1; color: #8a8f92; }

/* ── Opening animation after the pick (js/intro.js, owner pick C, 2026-10-27) ──
   ZENOA on green with the app showing through the O, then a dive through it.
   New logo: change these two colours (and the O's sizes in intro.js). */
:root { --intro-bg: #3f5e4f; --intro-fg: #f7f5f0; }
.zintro { position: fixed; inset: 0; z-index: 4100; pointer-events: none; }
.zintro svg { position: absolute; left: -20px; top: -20px; width: calc(100% + 40px); height: calc(100% + 40px); overflow: visible; }
.zintro-fill { fill: var(--intro-bg); }
.zintro-o, .zintro text { fill: var(--intro-fg); }
.zintro-edge { fill: none; stroke: rgb(0 0 0 / 0.28); stroke-width: 1.2; }
.zintro-word { font-family: Georgia, 'Times New Roman', serif; }
.zintro-line { font-family: inherit; font-weight: 500; text-anchor: middle; }
.zintro text { transform-box: fill-box; transform-origin: center; }
/* The page that goes on with the animation paints green from the start. */
html.intro-cover body::after { content: ""; position: fixed; inset: 0; z-index: 4100; background: var(--intro-bg); }