/* ──────────────────────────────────────────────────────────────────────────
   visite.css — la visite guidée de la démo.

   N'existe QUE dans demo/. Jamais dans moteur/ : un client n'a pas à être
   guidé sur son propre site, il l'a déjà appris ici.

   Principe du projecteur : un seul élément vide (.v-trou) est posé sur la
   cible, et son `box-shadow` immense assombrit tout le reste de l'écran.
   Il est en `pointer-events: none` — donc la cible en dessous reste
   réellement cliquable. C'est ce qui permet de faire *faire* au visiteur
   au lieu de lui montrer.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --v-vert: #9BE3B8;
  --v-encre: #0d1410;
}

.v-couche {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.v-couche.actif { pointer-events: auto; }

/* ── Le voile plein écran (étapes sans cible) ── */
.v-voile {
  position: fixed; inset: 0;
  /* L'aplat seul faisait reculer la page, mais on la lisait encore derrière.
     Le flou l'efface vraiment : il ne reste qu'une matière, plus de mots
     concurrents. Le fond opaque tient lieu de repli si le filtre est ignoré. */
  background: rgba(4, 8, 6, .88);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s ease;
}
.v-voile.vu { opacity: 1; }

/* ── Le trou de lumière ── */
.v-trou {
  position: fixed; z-index: 2001;
  border-radius: .7rem;
  pointer-events: none;
  /* ⚠️ L'assombrissement est réparti entre DEUX couches, et c'est voulu :
     un box-shadow ne sait pas flouter. Il ne garde donc qu'une part du
     noircissement (pour arrondir proprement les angles du trou) tandis que
     les volets, qui couvrent exactement le reste de l'écran, apportent le
     flou et le gros de l'obscurité. */
  box-shadow: 0 0 0 9999px rgba(4, 8, 6, .5),
              0 0 0 2px var(--v-vert),
              0 0 26px 3px rgba(155, 227, 184, .4);
  transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
              opacity .2s;
}

/* ── Les quatre volets qui isolent la cible ──────────────────────────────
   Le trou de lumière ne fait qu'assombrir : il est en `pointer-events: none`
   et laisse donc passer TOUS les clics, y compris à côté. Ces quatre volets
   couvrent l'écran autour de la cible et avalent ce qui n'est pas elle.
   Résultat : pendant une indication, le seul geste possible est celui qu'on
   demande — ou « Passer » / « Quitter » dans la bulle. */
.v-bloc {
  position: fixed; z-index: 2001;
  /* Ils ne servaient qu'à avaler les clics ; ils portent maintenant aussi le
     flou et le complément d'obscurité. Ils pavent l'écran autour de la cible
     sans chevauchement ni interstice : la teinte y est donc uniforme. */
  background: rgba(4, 8, 6, .55);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

/* ── La bulle ── */
.v-bulle {
  position: fixed; z-index: 2002;
  width: min(24rem, calc(100vw - 2rem));
  background: #101a14;
  border: 1px solid rgba(155, 227, 184, .22);
  border-radius: .9rem;
  padding: 1.15rem 1.25rem 1.1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  color: #E8F0EA;
  pointer-events: auto;
}
.v-bulle .v-compte {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,240,234,.45); margin-bottom: .5rem;
}
.v-bulle h3 {
  margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; line-height: 1.35;
  color: #fff;
}
.v-bulle p { margin: 0 0 .9rem; font-size: .89rem; line-height: 1.6;
  color: rgba(232,240,234,.78); }
.v-bulle p:last-of-type { margin-bottom: 1rem; }
.v-bulle strong { color: #fff; font-weight: 600; }
.v-bulle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: rgba(155,227,184,.14); color: var(--v-vert);
  padding: .08em .4em; border-radius: .25rem;
}

.v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.v-btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: none; border-radius: 999px; padding: .5rem 1.05rem;
  background: var(--v-vert); color: var(--v-encre);
  transition: filter .15s;
}
.v-btn:hover { filter: brightness(1.08); }
.v-btn.creux {
  background: transparent; color: rgba(232,240,234,.7);
  border: 1px solid rgba(255,255,255,.16); font-weight: 500;
}
.v-btn.creux:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.v-lien {
  font: inherit; font-size: .8rem; cursor: pointer; background: none; border: none;
  color: rgba(232,240,234,.45); text-decoration: underline;
  text-underline-offset: 2px; padding: .3rem .1rem; margin-left: auto;
}
.v-lien:hover { color: rgba(232,240,234,.8); }

/* Bulle « libre » : posée en bas de l'écran, la page reste visible et
   défilable derrière elle. */
.v-bulle.v-bas {
  top: auto; bottom: 1.25rem;
  left: 50%; transform: translateX(-50%);
  width: min(30rem, calc(100vw - 2rem));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(155,227,184,.14);
}

/* Le petit doigt qui dit « c'est à vous de cliquer » */
.v-attente {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--v-vert);
}
.v-attente::before {
  content: ''; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--v-vert); animation: v-pouls 1.4s ease-in-out infinite;
}
@keyframes v-pouls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

/* ── Les cartes centrées (accueil, passage à l'admin, fin) ── */
.v-carte {
  position: fixed; z-index: 2002;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(31rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #101a14;
  border: 1px solid rgba(155, 227, 184, .22);
  border-radius: 1.1rem;
  padding: 1.9rem 1.9rem 1.6rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  color: #E8F0EA; pointer-events: auto;
}
.v-carte .v-oeil {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v-vert); margin-bottom: .7rem;
}
.v-carte h2 {
  margin: 0 0 .8rem; font-size: 1.45rem; font-weight: 600; line-height: 1.25;
  color: #fff; letter-spacing: -.01em;
}
.v-carte p { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.68;
  color: rgba(232,240,234,.8); }
.v-carte strong { color: #fff; font-weight: 600; }

.v-plan { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; counter-reset: v; }
.v-plan li {
  position: relative; padding-left: 2.3rem; margin-bottom: .75rem;
  font-size: .9rem; line-height: 1.6; color: rgba(232,240,234,.78);
}
.v-plan li strong { color: #fff; }
.v-plan li::before {
  counter-increment: v; content: counter(v);
  position: absolute; left: 0; top: -.05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 600; color: var(--v-vert);
  border: 1px solid rgba(155,227,184,.3); background: rgba(155,227,184,.07);
}

.v-rassure {
  font-size: .84rem; line-height: 1.6; color: rgba(232,240,234,.55);
  border-left: 2px solid rgba(155,227,184,.3); padding-left: .8rem;
  margin: 0 0 1.4rem;
}

/* ── Le ruban discret, une fois la visite finie ou refusée ── */
.v-rappel {
  position: fixed; z-index: 1900; right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  background: #101a14; border: 1px solid rgba(155,227,184,.22);
  border-radius: 999px; padding: .5rem .5rem .5rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-family: system-ui, -apple-system, sans-serif; font-size: .83rem;
  color: rgba(232,240,234,.8);
}
.v-rappel a {
  background: var(--v-vert); color: var(--v-encre); text-decoration: none;
  font-weight: 600; border-radius: 999px; padding: .4rem .9rem; white-space: nowrap;
}
.v-rappel button {
  font: inherit; background: none; border: none; cursor: pointer;
  color: rgba(232,240,234,.4); padding: .2rem .4rem; font-size: 1.1rem; line-height: 1;
}
.v-rappel button:hover { color: rgba(232,240,234,.9); }

@media (max-width: 34rem) {
  .v-bulle { width: calc(100vw - 1.5rem); left: .75rem !important; right: .75rem; }
  .v-carte { padding: 1.5rem 1.35rem 1.3rem; }
  .v-carte h2 { font-size: 1.25rem; }
  .v-rappel { left: 1rem; right: 1rem; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .v-trou, .v-voile { transition: none; }
  .v-attente::before { animation: none; }
}

/* ── La visite se retire pendant que l'utilisateur travaille ─────────────
   Quand un formulaire d'édition ou le panneau de réglages s'ouvre, la visite
   ne doit plus rien masquer : elle laisse la place et se contente de dire,
   depuis un coin, ce qu'il reste à faire.
   ⚠️ `pointer-events: none` sur la couche est indispensable : sinon, même
      invisible, elle continuerait d'intercepter les clics sur le formulaire. */
.v-couche.v-efface { background: none; pointer-events: none; }

.v-bulle.v-coin {
  position: fixed;
  left: 1rem; bottom: 1rem; top: auto; right: auto;
  width: min(21rem, calc(100vw - 2rem));
  pointer-events: auto;
  animation: v-coin-entre .28s cubic-bezier(.16,.84,.32,1) both;
}
@keyframes v-coin-entre { from { opacity: 0; transform: translateY(10px); } }

/* En mode admin la barre d'édition occupe le bas de l'écran : sans ce
   décalage, la bulle se poserait dessus et cacherait « Enregistrer ». */
body.mode-admin .v-bulle.v-coin { bottom: 5.25rem; }

/* Sur écran étroit le formulaire prend toute la largeur : la bulle passe
   en bandeau bas, plus courte, pour ne pas manger les champs. */
@media (max-width: 700px) {
  .v-bulle.v-coin { left: .5rem; right: .5rem; width: auto; bottom: 4.5rem; }
  .v-bulle.v-coin p { display: none; }
}

/* Les outils d'une rubrique (monter, descendre, modifier, supprimer) ne
   s'affichent qu'au survol. Pendant l'étape qui demande de déplacer une
   rubrique, on les force : sinon le projecteur entoure une zone vide. */
html.v-reveler .ed-outils { opacity: 1 !important; }