/* Site Commerce · la visite guidée (static/js/tutorial.js).

   Feuille à part, et non dans le <style> de la coquille : la visite a son
   propre lot (B.6 de la refonte), qui possède son script ET cette feuille.
   Dans les jetons de la coquille (clair et sombre), sans dégradé, sans flou,
   sans halo coloré.

   Doctrine à garder : l'anneau ÉCLAIRE la cible, il ne la touche jamais. Ni
   classe, ni style, ni `position` posés sur l'élément montré (les poser sur
   un bouton fixe ou absolu le faisait sauter ailleurs : AC-01 / CM-05). Le
   voile est UN calque plein écran, percé par un `clip-path` pair-impair à la
   forme de la cible : le trou laisse passer le regard ET le doigt. Seuls
   l'opacité, la transformation et le chemin du trou sont animés. */

/* La racine laisse passer les clics ; le voile (hors du trou) et la carte
   les retiennent : l'élément mis en lumière reste touchable dans le trou. */
.tuto-root{position:fixed;inset:0;z-index:200;font-family:var(--cv-body);pointer-events:none}
.tuto-scrim{position:fixed;inset:0;background:var(--cv-voile-fort);pointer-events:auto}
.tuto-root.tuto-glisse .tuto-scrim{transition:clip-path var(--cv-dur-moyen) var(--cv-ease-standard)}

/* L'anneau : posé par translate (jamais left/top), son trait est une ombre
   portée vers l'extérieur, donc son rectangle EST le trou (il contient la
   cible, marge comprise). */
.tuto-ring{position:fixed;left:0;top:0;pointer-events:none;
  box-shadow:0 0 0 2px var(--cv-accent), 0 0 0 7px var(--cv-accent-soft)}
/* Sans `clip-path: path()` (navigateur ancien) : pas de trou découpé, le
   voile devient l'ombre démesurée de l'anneau, et le doigt passe partout. */
.tuto-root.tuto-sans-clip .tuto-scrim{background:transparent;pointer-events:none}
.tuto-root.tuto-sans-clip .tuto-ring{box-shadow:0 0 0 2px var(--cv-accent), 0 0 0 200vmax var(--cv-voile-fort)}

/* La carte : une bulle sobre, la pointe vers la cible. */
.tuto-card{position:fixed;left:0;top:0;pointer-events:auto;box-sizing:border-box;
  width:min(340px, calc(100vw - 20px));
  background:var(--cv-card);color:var(--cv-fg);border:1px solid var(--cv-line);border-radius:var(--cv-r-sheet);
  padding:16px 18px 10px;box-shadow:var(--cv-shadow)}
.tuto-card::after{content:"";position:absolute;left:var(--tuto-pointe, 50%);width:12px;height:12px;
  margin-left:-6px;background:var(--cv-card);border:1px solid var(--cv-line);transform:rotate(45deg)}
.tuto-card[data-cote="dessus"]::after{bottom:-7px;border-top-color:transparent;border-left-color:transparent}
.tuto-card[data-cote="dessous"]::after{top:-7px;border-bottom-color:transparent;border-right-color:transparent}
.tuto-card[data-cote="aucun"]::after{display:none}

.tuto-eyebrow{margin:0 0 4px;font:500 12.5px/1.3 var(--cv-body);color:var(--cv-muted);font-variant-numeric:tabular-nums}
.tuto-body{margin:0}
.tuto-title{margin:0 0 6px;font:600 18px/1.25 var(--cv-disp);letter-spacing:-.015em;color:var(--cv-fg)}
.tuto-text{margin:0;font:400 14.5px/1.5 var(--cv-body);color:var(--cv-muted)}
.tuto-text b{color:var(--cv-fg);font-weight:600}
.tuto-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.tuto-skip{min-height:44px;margin-left:-8px;display:inline-flex;align-items:center;padding:0 8px;border:0;background:transparent;
  color:var(--cv-muted);font:500 14px/1 var(--cv-body);cursor:pointer;border-radius:var(--cv-r-btn)}
.tuto-skip[hidden]{display:none}
.tuto-next{margin-left:auto;min-height:44px;min-width:104px;padding:0 18px;border:0;border-radius:var(--cv-r-btn);cursor:pointer;
  background:var(--cv-cta);color:var(--cv-on-cta);font:600 14.5px/1 var(--cv-body);
  transition:background-color var(--cv-dur-court) var(--cv-ease-standard),transform var(--cv-dur-court) var(--cv-ease-standard)}
.tuto-next:active{transform:scale(.97)}
.tuto-root :focus-visible{outline:2px solid var(--cv-accent);outline-offset:2px}
/* La carte reçoit le focus à l'ouverture (pour le lecteur d'écran) : elle n'a
   pas d'anneau à elle, ses deux boutons si. */
.tuto-root .tuto-card:focus,.tuto-root .tuto-card:focus-visible{outline:none}

/* La sortie : plus rien ne retient le doigt pendant le fondu (le devis ouvert
   par « Ce modèle me plaît » est déjà dessous). */
.tuto-root.tuto-closing,.tuto-root.tuto-closing *{pointer-events:none}

/* La pastille « Admin » du portfolio (session admin) : effacée le temps de
   la visite, comme sous une feuille (elle se posait sur la carte). */
body.tuto-en-cours #mn-admin-pill{display:none}

@media (max-width:900px), (max-height:520px){
  .tuto-card{padding:16px 18px 8px}
}
@media (prefers-reduced-motion:reduce){
  :root:not([data-mouvement="toujours"]) .tuto-root.tuto-glisse .tuto-scrim,
  :root:not([data-mouvement="toujours"]) .tuto-next{transition:none}
}
:root[data-mouvement="reduit"] .tuto-root.tuto-glisse .tuto-scrim,
:root[data-mouvement="reduit"] .tuto-next{transition:none}

/* Survol : seulement là où il existe, et en fin de feuille (une media query
   n'ajoute aucune priorité, seul l'ordre tranche). */
@media (hover:hover){
  .tuto-skip:hover{color:var(--cv-fg)}
  .tuto-next:hover{background:var(--cv-accent);color:var(--cv-on-accent)}
}