/* ============================================================
   Accueil nouveau membre — « Bienvenue autour du Feu »
   Composants : bannière bienvenue, checklist, états vides,
   exemples, bouton « Comment ça marche », tour, info-bulles.
   Pensé pour le thème nuit (Night-Cyan) ET les pages photo jour.
   ============================================================ */

.ob-empty,
.ob-welcome,
.ob-checklist {
  --ob-cyan: #3DA9FC;
  --ob-cyan-soft: #5BC0EB;
  --ob-cyan-deep: #1B6FB8;
  --ob-gold: #F3D58A;
  --ob-glass: rgba(11, 15, 23, .82);
  --ob-edge: rgba(255, 255, 255, .14);
  --ob-ink: #eaf2f8;
  --ob-ink-muted: #a9c0d4;
}

/* ---------- Boutons communs ---------- */
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: center; }
.ob-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  font: 600 14px/1 'Inter', system-ui, sans-serif; text-decoration: none;
  color: #eaf2f8; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18); cursor: pointer;
  transition: filter .15s, transform .15s, background .15s;
}
.ob-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ob-btn-primary {
  color: #06263f;
  background: linear-gradient(135deg, #5BC0EB, #3DA9FC);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(61, 169, 252, .28);
}
.ob-btn-sm { padding: 8px 13px; font-size: 13px; }

/* ---------- État vide enrichi ---------- */
.ob-empty {
  max-width: 620px; margin: 22px auto; padding: 26px 22px;
  text-align: center; border-radius: 18px;
  background: var(--ob-glass); border: 1px solid var(--ob-edge);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28); color: var(--ob-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ob-empty-ic {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #5BC0EB, #1B6FB8);
  box-shadow: 0 8px 24px rgba(27, 111, 184, .4);
}
.ob-empty-title { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ob-ink); }
.ob-empty-text { color: var(--ob-ink-muted); font-size: 14.5px; line-height: 1.55; }
.ob-empty-text p { margin: 0 0 6px; }

/* ---------- Ligne du Gardien ---------- */
.ob-gardien {
  margin-top: 16px; padding: 11px 14px; border-radius: 12px;
  background: rgba(61, 169, 252, .1); border: 1px solid rgba(91, 192, 235, .28);
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start; text-align: left;
}
.ob-gardien-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #06263f; background: linear-gradient(135deg, #F3D58A, #E7C24B);
  padding: 3px 9px; border-radius: 999px;
}
.ob-gardien-msg { font-size: 13px; color: var(--ob-ink); line-height: 1.45; overflow-wrap: break-word; }
.ob-empty-kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #9db4c9; margin-bottom: 8px; }

/* ---------- Cartes « Exemple » ---------- */
.ob-examples {
  margin-top: 18px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: left;
}
.ob-examples-solo { max-width: 720px; margin: 14px auto; }
.ob-example {
  position: relative; padding: 14px 14px 13px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px dashed rgba(243, 213, 138, .5);
}
.ob-example-tag {
  display: inline-block; margin-bottom: 7px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: #3a2a05;
  background: linear-gradient(135deg, #F3D58A, #E7C24B); padding: 3px 9px; border-radius: 999px;
}
.ob-example-title { font-size: 14px; font-weight: 700; color: #eaf2f8; margin-bottom: 4px; }
.ob-example-text { font-size: 13px; color: #b9cbd9; line-height: 1.45; }

/* ---------- Bannière de bienvenue (accueil) ---------- */
.ob-welcome {
  position: relative; max-width: 760px; margin: 0 auto 18px; padding: 20px 22px 18px 24px;
  border-radius: 18px; color: var(--ob-ink);
  background: linear-gradient(135deg, rgba(20, 24, 34, .92), rgba(11, 15, 23, .92));
  border: 1px solid var(--ob-edge); border-left: 4px solid var(--ob-gold);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
}
.ob-welcome-close {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cdd9e3;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.ob-welcome-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ob-welcome-title { margin: 0 0 8px; font-size: 21px; font-weight: 800; }
.ob-welcome-text { color: var(--ob-ink-muted); font-size: 14px; line-height: 1.5; }
.ob-welcome-text p { margin: 0 0 5px; }
.ob-welcome .ob-actions { justify-content: flex-start; }

/* ---------- Checklist « Mes premiers pas » ---------- */
.ob-checklist {
  max-width: 640px; margin: 18px auto; padding: 18px 18px 14px; border-radius: 16px;
  background: var(--ob-glass); border: 1px solid var(--ob-edge); color: var(--ob-ink);
}
.ob-checklist-head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; user-select: none; outline: none; }
.ob-checklist-head::-webkit-details-marker { display: none; }
.ob-checklist-head:focus-visible { box-shadow: 0 0 0 2px rgba(91, 192, 235, .5); border-radius: 8px; }
.ob-checklist-h { margin: 0; font-size: 17px; font-weight: 800; flex: 1; }
.ob-fold-chev { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; opacity: .7; transition: transform .2s; flex: 0 0 auto; }
.ob-fold[open] .ob-fold-chev { transform: rotate(180deg); }
.ob-fold-body { padding-top: 2px; }
/* Bloc « page vide » pliable : en-tête = icône + titre centrés, flèche-bouton en haut à droite */
.ob-empty-head { list-style: none; cursor: pointer; position: relative; display: block; outline: none; }
.ob-empty-head::-webkit-details-marker { display: none; }
.ob-empty-head:focus-visible { box-shadow: 0 0 0 2px rgba(91, 192, 235, .4); border-radius: 12px; }
.ob-fold-chev-tr {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; opacity: .9;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.ob-fold-chev-tr::after {
  content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid currentColor; opacity: .85; transition: transform .2s;
}
.ob-empty.ob-fold[open] .ob-fold-chev-tr::after { transform: rotate(180deg); }
.ob-checklist-count {
  font-size: 13px; font-weight: 800; color: #06263f;
  background: linear-gradient(135deg, #5BC0EB, #3DA9FC); padding: 3px 10px; border-radius: 999px;
}
.ob-checklist-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin: 11px 0 14px; overflow: hidden; }
.ob-checklist-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5BC0EB, #3DA9FC); transition: width .4s; }
.ob-checklist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-check { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.ob-check.is-done { opacity: .72; }
.ob-check-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #06263f; border: 2px solid rgba(255, 255, 255, .28); background: transparent;
}
.ob-check.is-done .ob-check-mark { background: linear-gradient(135deg, #5BC0EB, #3DA9FC); border-color: transparent; }
.ob-check-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-check-label { font-size: 14px; font-weight: 700; }
.ob-check.is-done .ob-check-label { text-decoration: line-through; }
.ob-check-help { font-size: 12px; color: var(--ob-ink-muted); line-height: 1.35; }
.ob-check-btn {
  flex-shrink: 0; text-decoration: none; font-size: 12.5px; font-weight: 700; color: #06263f;
  background: linear-gradient(135deg, #5BC0EB, #3DA9FC); padding: 7px 13px; border-radius: 999px;
}
.ob-check-ok { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #7fdca0; }
.ob-checklist-foot { margin-top: 12px; text-align: center; }

/* ============================================================
   Widget « Comment ça marche ? » (bouton flottant + panneau)
   Placé en bas À GAUCHE pour ne pas gêner le Gardien (bas droite).
   ============================================================ */
.obw-launch {
  position: fixed; left: 16px; bottom: 20px; z-index: 4000;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 'Inter', system-ui, sans-serif; color: #eaf2f8;
  background: rgba(11, 15, 23, .9); border: 1px solid rgba(91, 192, 235, .4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32); transition: filter .15s, transform .15s;
}
.obw-launch:hover { filter: brightness(1.1); transform: translateY(-1px); }
.obw-launch svg { color: #5BC0EB; }
@media (max-width: 900px) { .obw-launch { bottom: 78px; } } /* au-dessus de la barre nav mobile */

.obw-scrim { position: fixed; inset: 0; z-index: 4001; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.obw-scrim.is-open { opacity: 1; pointer-events: auto; }
.obw-panel {
  /* (23/07) bottom remonté (20px→66px) pour que le panneau ne recouvre plus son propre
     bouton : sinon, re-taper au même endroit pour FERMER tombait sur le lien « Guide du
     voyageur » du pied → navigation involontaire vers guide.php. Design inchangé par ailleurs. */
  position: fixed; left: 16px; bottom: 66px; z-index: 4002; width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px); overflow: auto; border-radius: 18px; color: #eaf2f8;
  background: linear-gradient(135deg, rgba(20, 24, 34, .98), rgba(11, 15, 23, .98));
  border: 1px solid rgba(91, 192, 235, .35); box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.obw-panel.is-open { transform: none; opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .obw-panel { bottom: 136px; left: 16px; } } /* (23/07) au-dessus du bouton d'aide mobile (bottom:78px), voir note ci-dessus */
.obw-head { display: flex; align-items: center; gap: 9px; padding: 15px 16px 10px; }
.obw-head b { font-size: 15px; }
.obw-head .obw-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cdd9e3; font-size: 19px; cursor: pointer; }
.obw-body { padding: 0 16px 14px; font-size: 14px; line-height: 1.55; color: #cfe0ec; }
.obw-body p { margin: 0 0 8px; }
.obw-foot { padding: 0 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Tour de première connexion (Mission 8)
   ============================================================ */
.ob-tour-scrim { position: fixed; inset: 0; z-index: 5000; background: rgba(4, 8, 16, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.ob-tour-card {
  width: min(440px, 100%); border-radius: 22px; padding: 26px 24px 20px; text-align: center; color: #eaf2f8;
  background: linear-gradient(135deg, rgba(22, 27, 38, .98), rgba(11, 15, 23, .98));
  border: 1px solid rgba(91, 192, 235, .4); box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: obTourIn .28s ease; position: relative;
}
@keyframes obTourIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.ob-tour-skip { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: #9db4c9; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.ob-tour-flame { width: 54px; height: 54px; margin: 4px auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 30% 25%, #F3D58A, #C9761B); box-shadow: 0 8px 26px rgba(201, 118, 27, .45); }
.ob-tour-title { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.ob-tour-text { color: #bccfdd; font-size: 15px; line-height: 1.55; }
.ob-tour-text p { margin: 0 0 6px; }
.ob-tour-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-tour-dots { margin-top: 16px; display: flex; gap: 6px; justify-content: center; }
.ob-tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .24); }
.ob-tour-dots i.on { background: #5BC0EB; }

/* ============================================================
   Info-bulles / aide au clic (mobile) — petit toast
   ============================================================ */
.ob-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(10px);
  z-index: 6000; max-width: 84vw; padding: 10px 15px; border-radius: 12px; font-size: 13.5px; color: #06263f;
  background: linear-gradient(135deg, #F3D58A, #E7C24B); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ob-toast.is-open { opacity: 1; transform: translateX(-50%); }

/* Réduction des animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .ob-btn, .obw-panel, .ob-tour-card, .obw-scrim, .ob-toast { transition: none; animation: none; }
}


/* ============================================================
   VISITE GUIDÉE v2 (09/07/2026) — invitation, progression,
   reprise, pastille inter-pages, mobile confortable.
   ============================================================ */
.ob-tour-card { max-height: 88vh; max-height: calc(100dvh - 40px); overflow: auto; -webkit-overflow-scrolling: touch; }
.ob-tour-x {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cdd9e3;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ob-tour-x:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ob-tour-badge {
  display: inline-block; margin: 0 auto 10px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #06263f; background: linear-gradient(135deg, #F3D58A, #E7C24B);
  padding: 3px 10px; border-radius: 999px;
}
.ob-tour-see { margin-top: 12px; display: flex; justify-content: center; }
.ob-tour-nav { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-tour-nav .ob-btn { min-height: 44px; }
.ob-tour-final .ob-btn { min-width: 46%; justify-content: center; }
.ob-tour-minor { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
.ob-tour-minor button {
  background: none; border: 0; color: #9db4c9; font-size: 12.5px;
  text-decoration: underline; cursor: pointer; padding: 7px 6px; min-height: 44px;
}
.ob-tour-minor button:hover { color: #cfe0ec; }
.ob-tour-prog { margin-top: 14px; font-size: 12px; font-weight: 700; color: #9db4c9; }
.ob-tour-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 6px; }
.ob-tour-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F3D58A, #3DA9FC); transition: width .3s; }

/* Pastille « Continuer la visite » quand on change de page (jamais bloquante) */
.ob-tour-chip {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 4900;
  display: flex; align-items: center; gap: 10px; max-width: min(86vw, 440px);
  padding: 8px 8px 8px 14px; border-radius: 999px; color: #eaf2f8;
  background: linear-gradient(135deg, rgba(20, 24, 34, .97), rgba(11, 15, 23, .97));
  border: 1px solid rgba(91, 192, 235, .4); box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  animation: obTourIn .25s ease;
}
/* Mobile : au-dessus de la barre de nav, du bouton « ? » (bas gauche)
   ET du Gardien (bas droite) pour ne rien masquer d'important. */
@media (max-width: 900px) { .ob-tour-chip { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); } }
.ob-tour-chip-txt { font-size: 12.5px; font-weight: 700; color: #cfe0ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-tour-chip .ob-btn { min-height: 40px; }
.ob-tour-chip-x { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cdd9e3; font-size: 18px; line-height: 1; cursor: pointer; }

/* Mobile : gros boutons faciles, texte lisible, rien ne dépasse */
@media (max-width: 640px) {
  .ob-tour-scrim { padding: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ob-tour-card { padding: 22px 16px 16px; border-radius: 20px; }
  .ob-tour-title { font-size: 19px; }
  .ob-tour-text { font-size: 14px; }
  .ob-tour-nav .ob-btn { flex: 1 1 auto; justify-content: center; padding: 13px 14px; font-size: 15px; min-height: 48px; }
  .ob-tour-x { width: 44px; height: 44px; }
  .ob-tour-final .ob-btn { min-width: 100%; }
  .ob-tour-minor button { padding: 9px 8px; font-size: 13px; }
}

/* Réduction des animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .ob-tour-chip { animation: none; }
  .ob-tour-bar > span { transition: none; }
}