/* Atelia — guide de découverte : volet « À découvrir », entrée de barre latérale,
   pastille d'exemple, voile de visite guidée et bulle d'étape.
   Aucun jeton nouveau : tout vient de css/tokens.css. Les deux seules valeurs écrites
   en clair sont les teintes du voile et de son ombre, qui reprennent l'encre bleu nuit
   (#16243F = --navy) avec une opacité — comme le fait déjà .overlay dans components.css. */

/* ------------------------------------------------------------------ */
/* Volet « À découvrir » — FLOTTANT, ouvert depuis l'entrée « Guide »    */
/* ------------------------------------------------------------------ */
/* Décision du 26/09 (espace Réseau, neuf guides) : le volet n'est plus posé dans l'écran.
   Il flotte à droite de la barre latérale, calé sur le bas de l'entrée « Guide · n/m » ; sur
   téléphone (menu glissant), il se pose en bas de l'écran. Fermé, il n'existe pas : l'écran
   est au pixel celui d'avant. Le moteur (js/guide.js · placerVolet) écrit sa position, sa
   largeur et sa hauteur maximale.
   Une section par guide : la page courante dépliée, la barre du haut, les autres pages
   repliées. Quand la place manque, ce sont les SECTIONS qui défilent : l'en-tête et le pied
   (« Masquer le guide ») restent en place, donc toujours atteignables.
   Empilement : au-dessus de la barre du haut collante (5), sous le voile de visite (38), la
   pastille d'exemple (40), le tiroir (41), la modale (42) et le menu glissant (65, 70). */
.g-volet {
  position: fixed; z-index: 30; left: 16px; top: 16px;
  width: 360px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2);
  animation: g-volet-in .18s ease-out;
}
@keyframes g-volet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-volet { animation: none; } }
.g-volet:focus { outline: none; }
.g-volet:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.g-volet > .g-vh, .g-volet > .g-bar, .g-volet > .g-menu { flex: none; }
/* En-tête du volet : titre, compteur global, croix. */
.g-volet .g-vh { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 16px; }
.g-volet .g-vh b { font-size: 14px; font-weight: 800; color: var(--navy); }
.g-volet .g-vh .g-count { margin-left: auto; }
.g-volet .g-vh .g-x { flex: none; }
.g-volet .g-secs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line-2);
}

/* Section = un guide (une page, ou la barre du haut). */
.g-sec { border-bottom: 1px solid var(--line-2); }
.g-sec:last-child { border-bottom: 0; }
.g-sec-h {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 16px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.g-sec-h:hover { background: var(--surface-2); }
.g-sec-h:focus-visible, .g-item-h:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.g-sec.is-open > .g-sec-h { background: var(--surface-2); }
.g-sec-t { min-width: 0; flex: 1; }
.g-sec-t b { display: block; font-size: 13px; font-weight: 800; color: var(--navy); }
.g-sec-t span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.g-sec .g-count { flex: none; }
.g-sec.is-fini .g-count { color: var(--accent); background: var(--accent-soft); }
.g-ico-btn {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.g-ico-btn:hover { background: var(--surface-2); }

.g-count { font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--chip-2); border-radius: var(--r-pill); padding: 2px 9px; }

.g-bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); margin: 0 16px 10px; overflow: hidden; }
.g-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .g-bar i { transition: none; } }

.g-list { border-top: 1px solid var(--line-2); }
.g-item { border-bottom: 1px solid var(--line-2); }
.g-item:last-child { border-bottom: 0; }
.g-item-h {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 8px 16px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.g-item-h:hover { background: var(--surface-2); }
.g-tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--surface);
}
.g-item.is-encours .g-tick { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 20px var(--accent-soft); }
.g-item.is-vu .g-tick { border-color: var(--accent); background: var(--accent); }
.g-item-t { min-width: 0; flex: 1; }
.g-item-t b { display: block; font-size: 13px; font-weight: 700; color: var(--navy); }
.g-item-t span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.g-item.is-vu { opacity: .6; }
.g-dur { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-chev { flex: none; width: 14px; text-align: right; font-size: 11px; color: var(--muted); }
.g-item-b { padding: 0 16px 14px 46px; }
.g-item-b p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.g-menu { border-top: 1px solid var(--line-2); padding: 8px 12px; display: flex; justify-content: flex-end; }
/* « Masquer le guide » : un lien discret en pied de volet, jamais un bouton principal */
.g-link {
  border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 11.5px;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.g-link:hover { color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Entrée de barre latérale « Guide · n/m »                             */
/* ------------------------------------------------------------------ */
.g-side {
  margin-top: auto; display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 10px; font: inherit;
}
.g-side:hover, .g-side.is-open { background: var(--blue-soft); border-color: var(--blue-bd); }
.g-side:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.g-side + .side-foot { margin-top: 10px; }
.g-side-h { display: flex; align-items: center; gap: 8px; }
.g-side-h b { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.g-side-h .g-count { margin-left: auto; }
/* display:block — sans lui, la piste reste une boîte en ligne : 20 px de haut qui débordent
   de la carte au lieu des 3 px annoncés. La piste grise se voit dès 0 / n. */
.g-side-bar { display: block; width: 100%; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.g-side-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* ------------------------------------------------------------------ */
/* Bandeau « Exemple » (mode exemple pendant la visite)                 */
/* ------------------------------------------------------------------ */
/* Une PASTILLE compacte, jamais une bande pleine largeur : posée dans un coin de la fenêtre,
   elle ne peut plus couper une bulle en deux ni traverser un tiroir ouvert. Sa hauteur tient
   sur une ligne (≤ 32 px) et sa largeur est celle de son texte. Le moteur choisit le coin
   libre (js/guide.js · placerBandeau).
   Empilement : au-dessus du voile (38) pour garder le contraste du navy sur vert pâle, mais
   SOUS le tiroir (41) et la modale (42), qui gardent leurs valeurs. */
.g-example-bar {
  position: fixed; left: 14px; top: auto; bottom: 14px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap;
  max-width: calc(100vw - 28px); overflow: hidden;
  min-height: 0; height: 32px; padding: 0 8px 0 12px; font-size: 12px; color: var(--navy);
  background: var(--accent-soft); border: 1px solid var(--vert-bd); border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
}
.g-example-bar b { font-weight: 800; }
/* Téléphone : c'est la phrase qui s'abrège (…), jamais « Quitter l'exemple » — la pastille
   rognait le bouton à 390 px. Sur ordinateur, la place suffit : rien ne change. */
.g-example-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-example-bar b, .g-example-bar .g-quit { flex: none; }
.g-example-bar .g-quit { margin-left: 2px; min-height: 24px; padding: 2px 10px; font-size: 11.5px; }

/* ------------------------------------------------------------------ */
/* Visite guidée : voile à découpe + bulle                              */
/* ------------------------------------------------------------------ */
/* Deux couches, et c'est ce qui fixe l'ordre d'empilement définitif :
   · le VOILE (.g-spot / .g-hole) passe SOUS le bandeau, le tiroir et la modale — il assombrit
     la page, pas les couches qui se posent dessus ;
   · le LISERÉ et la BULLE (.g-front) passent AU-DESSUS de tout, tiroir, modale et toasts
     compris : ce que le guide désigne n'est jamais recouvert.
   Les deux boîtes reçoivent exactement la même géométrie (même bordure de 3 px, l'une
   transparente) : le liseré tombe au pixel sur le bord de la découpe. */
/* Le voile est une vraie couche : il arrête le pointeur PARTOUT sauf dans la découpe, dont
   il épouse la forme (clip-path posé par le moteur, qui glisse avec elle). Sans cela, le
   bouton flottant d'aide restait en pleine lumière et cliquable pendant la visite.
   pointer-events reste « none » tant que le moteur n'a pas posé la forme : un voile plein
   et opaque au pointeur, sans découpe, rendrait tout l'écran inerte. */
.g-spot { position: fixed; inset: 0; z-index: 38; pointer-events: none; transition: clip-path .2s ease-out; }
.g-front { position: fixed; inset: 0; z-index: 62; pointer-events: none; }
.g-hole, .g-ring {
  position: fixed; border-radius: 10px; border: 3px solid transparent;
  pointer-events: none; transition: top .2s ease-out, left .2s ease-out, width .2s ease-out, height .2s ease-out;
}
/* voile : encre bleu nuit (--navy #16243F) à 55 %, peint par l'ombre portée hors de la découpe */
.g-hole { box-shadow: 0 0 0 9999px rgba(22, 36, 63, .55); }
.g-ring { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .g-hole, .g-ring, .g-spot { transition: none; } }

/* Bouton flottant d'aide : le temps de la visite, il est MASQUÉ et cesse d'être une cible.
   En pleine lumière, il annonçait une action disponible qui ne l'était pas. Le passer
   simplement sous le voile ne suffisait pas : quand la découpe est vaste (la carte entière
   du tableau), elle englobe son coin et il se rallumait dedans. Il garde sa place dans la
   mise en page (visibility, pas display) : rien ne bouge à l'entrée ni à la sortie. */
body.g-touring .help-fab { visibility: hidden; pointer-events: none; z-index: 1; }
body.g-touring .help-panel { display: none; }

.g-bubble {
  position: fixed; width: 360px; max-width: calc(100vw - 24px);
  background: var(--surface); border-radius: 14px; box-shadow: 0 14px 40px rgba(22, 36, 63, .22);
  padding: 16px 18px; pointer-events: auto;
}
.g-bubble.g-anim { animation: g-in .18s ease-out; }
@keyframes g-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-bubble.g-anim { animation: none; } }
.g-bubble .g-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding-right: 26px; }
.g-bubble .g-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.g-bubble .g-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
.g-bubble .g-text b { color: var(--navy); }
.g-bubble .g-x { position: absolute; top: 10px; right: 10px; }
/* Mention discrète sous le texte : l'étape sautée se dit DANS la bulle, jamais en toast. */
.g-bubble .g-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--muted);
}
/* Flèche vers la zone visée : un carré tourné, collé au bord côté cible ; --g-arrow porte
   le décalage calculé par le moteur (centre de la zone), les quatre placements sont couverts. */
.g-bubble[data-guide-side]::after {
  content: ''; position: absolute; width: 12px; height: 12px; background: var(--surface);
  transform: rotate(45deg); box-shadow: 0 2px 6px rgba(22, 36, 63, .10);
}
.g-bubble[data-guide-side="right"]::after { left: -6px; top: var(--g-arrow, 50%); margin-top: -6px; }
.g-bubble[data-guide-side="left"]::after { right: -6px; top: var(--g-arrow, 50%); margin-top: -6px; }
.g-bubble[data-guide-side="bottom"]::after { top: -6px; left: var(--g-arrow, 50%); margin-left: -6px; }
.g-bubble[data-guide-side="top"]::after { bottom: -6px; left: var(--g-arrow, 50%); margin-left: -6px; }
.g-bubble[data-guide-side="coin"]::after, .g-bubble.is-outro::after { display: none; }
.g-dots { display: flex; gap: 6px; margin-top: 12px; }
.g-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); display: block; }
.g-dots i.on { background: var(--accent); }
.g-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.g-acts .g-next { margin-left: auto; }
.g-skip {
  display: block; margin-top: 10px; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer;
}
.g-skip:hover { color: var(--ink-2); }
.g-bubble .btn { min-height: 36px; }

/* Bulle de fin : centrée, sans découpe */
.g-bubble.is-outro { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Attente d'un geste : « En attente de votre clic » est une indication textuelle, plus un
   bouton — un bouton inerte dessiné se lisait comme une action disponible. Libellé gris
   atténué (--muted), sans fond ni bordure. */
.g-bubble .g-next.g-wait {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--muted); font-weight: 600; font-size: 12.5px; cursor: default;
}
/* « Précédent » désactivé : même convention que tout bouton inactif de la bulle (plus pâle
   que l'actif, jamais plus foncé). */
.g-bubble [data-guide-act="prev"][disabled] { opacity: .55; cursor: default; }
/* La bulle prend le focus quand l'étape attend un geste : pas de contour sur ce focus de programme. */
.g-bubble:focus { outline: none; }
.g-bubble .g-next[disabled]:not(.g-wait) { opacity: .55; cursor: default; }

/* ------------------------------------------------------------------ */
/* Carte de bienvenue : la coque de modale n'a pas de voile, on le pose  */
/* ------------------------------------------------------------------ */
.modal[data-guide-welcome] { background: rgba(22, 36, 63, .55); }