/* Parcours guidé « Créer ma boule » (09/10) : cadre de la vue, en-tête, scène de la boule, barre du prix. Portage de la maquette approuvée par Robin
   (docs/prototypes/parcours-guide/assets/app.css) sur les jetons de l'atelier : --paper → --atelier-paper, --paper-deep → --atelier-soft,
   --ink → --atelier-ink, --ink-70 → --atelier-muted, --ink-50 → --atelier-placeholder, --ink-15 → --atelier-line, --rouge → --atelier-focus,
   --rouge-ink → --atelier-danger, --paper-glow → --atelier-glow, --oak → --atelier-wood. Les écrans des étapes sont dans 91-parcours-etapes.css.
   Charte : crème, encre, Inter, aucun italique, aucun cadre au repos ; le focus clavier prend le rendu du survol (:focus-visible, jamais après un clic).
   Mouvements en transform et opacity seulement, coupés sous prefers-reduced-motion. Tailles de cible : 44 px au moins. */
.guide[hidden]{display:none}
.guide{--guide-head:.213;--guide-cord-top:-.213;--guide-cord-h:.3391;box-sizing:border-box;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,44dvh) minmax(0,1fr) auto;
 grid-template-areas:"head" "stage" "panel" "bar";overflow:hidden;background:var(--atelier-paper);color:var(--atelier-ink);font-family:var(--atelier-font);
 font-size:var(--atelier-text-lg);line-height:1.5;font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.guide *,.guide *::before,.guide *::after{box-sizing:border-box}
.guide :where(em,i,cite,address){font-style:normal}
.guide :where(button,input){font:inherit;color:inherit}
.guide :where(button){cursor:pointer;background:none;border:0;padding:0;border-radius:0;-webkit-tap-highlight-color:transparent}
.guide :where(:focus-visible){outline:none}
.guide-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* En-tête : flèche, six points (l'étape en cours s'étire), « Personnaliser davantage » */
.guide-head{position:relative;grid-area:head;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--atelier-space-2);padding:var(--atelier-space-1) var(--atelier-space-2) 0 var(--atelier-space-1)}
.guide-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--atelier-radius-control);color:var(--atelier-ink)}
.guide-icon svg{width:22px;height:22px}
.guide-dots{display:flex;justify-content:center;align-items:center;gap:2px;position:relative}
.guide-dot{width:22px;height:44px;display:grid;place-items:center}
.guide-dot span{display:block;width:8px;height:8px;border-radius:var(--atelier-radius-round);background:var(--atelier-line);transition:transform var(--atelier-t) var(--atelier-ease),background-color var(--atelier-t) var(--atelier-ease)}
.guide-dot.is-done span{background:var(--atelier-placeholder)}
.guide-dot.is-now span{background:var(--atelier-ink);transform:scaleX(2.4)}
.guide-dot-tip{position:absolute;top:40px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:var(--atelier-text-sm);font-weight:600;background:var(--atelier-ink);color:var(--atelier-paper);
 padding:var(--atelier-space-1) var(--atelier-space-3);border-radius:var(--atelier-radius-control);pointer-events:none;z-index:5;animation:guide-tip var(--atelier-t) var(--atelier-ease)}
@keyframes guide-tip{from{opacity:0;transform:translate(-50%,-4px)}}
.guide-more{min-height:44px;display:inline-flex;align-items:center;gap:var(--atelier-space-2);padding:0 var(--atelier-space-3);font-size:var(--atelier-text-md);font-weight:600;color:var(--atelier-ink);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-round);white-space:nowrap}
/* Accès à l'atelier plus clair (retour du 09/10) : bouton secondaire à contour fin, pictogramme de réglages au trait (masque, couleur du texte). */
.guide-more::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--guide-more-icon) center/contain no-repeat;mask:var(--guide-more-icon) center/contain no-repeat;--guide-more-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M2 4h7M13 4h1M2 8h2M8 8h6M2 12h8M14 12h0'/%3E%3Ccircle cx='11' cy='4' r='1.6'/%3E%3Ccircle cx='6' cy='8' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E")}
@media(max-width:379px){
 .guide-head{gap:var(--atelier-space-1)}
 .guide-dot{width:16px}
 .guide-more{font-size:var(--atelier-text-sm);padding:0 var(--atelier-space-1)}
}
@media(hover:hover){
 .guide-icon:hover{background:var(--atelier-soft)}
 .guide-more:hover{text-decoration:underline;text-underline-offset:3px}
}
.guide-icon:focus-visible{background:var(--atelier-soft)}
.guide-dot:focus-visible span{background:var(--atelier-ink)}
.guide-dot[aria-current=step]:focus-visible span{transform:scale(2.9,1.4)}/* l'étape en cours est déjà d'encre : au clavier, son point s'allonge encore */
.guide-more:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Scène : halo crème, boule suspendue à son cordon de lin, ombre portée douce. La boule est le SVG du moteur (tranche du bois = ombre pleine décalée).
   Lot I : la boule se cale sur la largeur ET la hauteur de la scène (unités du conteneur .guide-ball-wrap), place du cordon comprise
   (--guide-head, en part de la hauteur de la boule) ; le cordon (guide-cord.mjs) est dessiné à l'échelle de la boule et passe dans son trou. */
.guide-stage{grid-area:stage;position:relative;overflow:hidden;border-bottom:1px solid transparent;transition:border-color var(--atelier-t) var(--atelier-ease);
 background:radial-gradient(ellipse 70% 62% at 50% 44%,var(--atelier-glow) 0%,var(--atelier-paper) 72%)}
.guide.is-scrolled .guide-stage{border-bottom-color:var(--atelier-line)}
.guide-ball-wrap{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;perspective:900px;touch-action:pan-y;container-type:size}
.guide-ball-tilt{--guide-tilt-h:100cqh;--guide-room-w:calc(100cqw - 2 * var(--atelier-space-4));width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--atelier-t) var(--atelier-ease);transform-style:preserve-3d}
.guide-stage.has-bottom .guide-ball-tilt{--guide-tilt-h:calc(100cqh - 52px);height:calc(100% - 52px)}
.guide-ball-swing{position:relative;flex:none;height:72%;aspect-ratio:var(--guide-ratio,.81);max-width:calc(100% - 2 * var(--atelier-space-4));transform-origin:50% calc(var(--guide-head) * -100%);transform-style:preserve-3d}
@supports (height:1cqh){/* --guide-tilt-h : la hauteur de .guide-ball-tilt, en unités du conteneur ; sans elles (iOS 15), la boule garde 72 % de la hauteur, ci-dessus */
 .guide-ball-swing{--guide-ball-h:min((var(--guide-tilt-h) - 2 * var(--atelier-space-2)) / (1 + var(--guide-head)),var(--guide-room-w) / var(--guide-ratio,.81));
  width:calc(var(--guide-ball-h) * var(--guide-ratio,.81));height:var(--guide-ball-h);max-width:none;aspect-ratio:auto;margin-top:calc(var(--guide-ball-h) * var(--guide-head))}
}
.guide-ball-swing.is-swinging{animation:guide-swing 520ms var(--atelier-ease)}
@keyframes guide-swing{0%{transform:rotate(2.4deg)}100%{transform:rotate(0)}}
/* Cordon : lin et torsade (tirets serrés plus sombres), brin de derrière dans l'ombre de l'attache, creux de la boucle vu dans le trou, ombre
   très légère du brin de devant sur le bois. Au-dessus de la boule (translateZ : devant elle même retournée). */
.guide-cord-host{display:contents}
.guide-cord{position:absolute;left:0;width:100%;top:calc(var(--guide-cord-top) * 100%);height:calc(var(--guide-cord-h) * 100%);overflow:visible;pointer-events:none;transform:translateZ(1px)}
.guide-cord path{fill:none;stroke-linecap:round}
.guide-cord g>path:first-child{stroke:var(--atelier-cord)}
.guide-cord .guide-cord-twist{stroke:var(--atelier-cord-shade);stroke-dasharray:.42 .58;stroke-linecap:butt;opacity:.6}
.guide-cord .guide-cord-back>path:first-child{stroke:color-mix(in oklch,var(--atelier-cord) 80%,var(--atelier-ink))}
.guide-cord .guide-cord-in>path:first-child{stroke:var(--atelier-cord-shade)}
.guide-cord-shadow{stroke:var(--atelier-shade)}
.guide-cord-knot{fill:var(--atelier-cord)}
.guide-cord stop{stop-color:var(--atelier-cord)}
.guide-ball-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--atelier-t-slow) var(--atelier-ease)}
.guide-ball-flip.is-back{transform:rotateY(180deg)}
.guide-face{position:absolute;inset:0;display:grid;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.guide-face.guide-back{transform:rotateY(180deg)}
/* Lot K (K3) : la nouvelle boule est posée dessous, l'ancienne (figée par guide-stage.mjs) s'efface par-dessus, en 240 ms */
.guide-face.guide-ghost{pointer-events:none;animation:guide-ghost-out var(--atelier-t) var(--atelier-ease) forwards}
@keyframes guide-ghost-out{to{opacity:0}}
.guide-face svg,.guide-face img,.guide-ball-art{display:block;width:100%;height:100%;overflow:visible}
.guide-face img{object-fit:contain}
[data-stage] svg.guide-ball{filter:drop-shadow(1px 2px 0 var(--atelier-wood)) drop-shadow(0 14px 14px var(--atelier-shade))}
[data-stage] img.guide-ball-still{mix-blend-mode:multiply}
[data-stage] .guide-ball-art svg{filter:drop-shadow(0 14px 14px var(--atelier-shade))}
.guide-ball-wrap.is-busy{animation:guide-busy 1.2s var(--atelier-ease) infinite alternate}
@keyframes guide-busy{from{opacity:.55}}
.guide-stage-top{position:absolute;top:var(--atelier-space-2);left:0;right:0;z-index:2;display:flex;gap:var(--atelier-space-1);padding:0 var(--atelier-space-3);overflow-x:auto;scrollbar-width:none}
.guide-stage-top::-webkit-scrollbar{display:none}
.guide-stage-top>:first-child{margin-left:auto}
.guide-stage-top>:last-child{margin-right:auto}
.guide-stage-top>*{flex:none}
.guide-stage-bottom{position:absolute;bottom:var(--atelier-space-2);left:0;right:0;z-index:2;display:flex;justify-content:center;gap:var(--atelier-space-1)}
.guide-stage-note{position:absolute;bottom:12px;left:16px;right:16px;z-index:2;margin:0;text-align:center;font-size:var(--atelier-text-sm);color:var(--atelier-muted)}

/* Pastille (envies de la galerie, prénoms et « Recto / Verso » sur la scène) : choix transparent au repos, pressé = fond papier profond et gras */
.guide-chip{min-height:44px;display:inline-flex;align-items:center;gap:var(--atelier-space-2);padding:0 var(--atelier-space-3);border-radius:var(--atelier-radius-round);font-size:var(--atelier-text-md);font-weight:500;
 color:var(--atelier-muted);white-space:nowrap;transition:background-color var(--atelier-t-fast) var(--atelier-ease),color var(--atelier-t-fast) var(--atelier-ease)}
.guide-chip[aria-pressed=true]{background:var(--atelier-soft);color:var(--atelier-ink);font-weight:650}
.guide-stage .guide-chip{background:color-mix(in oklch,var(--atelier-paper) 86%,transparent)}
.guide-stage .guide-chip[aria-pressed=true]{background:var(--atelier-soft)}
.guide-stage .guide-chip{max-width:min(60vw,16em);overflow:hidden;text-overflow:ellipsis}
@media(hover:hover){.guide-chip:hover{background:var(--atelier-soft);color:var(--atelier-ink)}}
.guide-chip:focus-visible{background:var(--atelier-soft);color:var(--atelier-ink)}
.guide-chip[aria-pressed=true]:focus-visible{background:color-mix(in oklch,var(--atelier-soft) 80%,var(--atelier-ink))}/* choisie : le fond du survol y est déjà, le repère du clavier est un papier plus profond, sans cadre (lot F, WCAG 2.4.7) */

/* Panneau et barre */
.guide-panel{grid-area:panel;overflow-y:auto;overscroll-behavior:contain;padding:var(--atelier-space-4) var(--atelier-space-4) var(--atelier-space-6);scroll-padding-bottom:var(--atelier-space-5)}
.guide-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--atelier-space-1);padding:var(--atelier-space-2) var(--atelier-space-4) calc(var(--atelier-space-2) + env(safe-area-inset-bottom));border-top:1px solid var(--atelier-line);background:var(--atelier-paper)}
.guide-bar-row{display:flex;align-items:center;justify-content:space-between;gap:var(--atelier-space-3)}
.guide-bar-msg{margin:0;font-size:var(--atelier-text-sm);line-height:1.4;color:var(--atelier-danger)}
.guide-bar-msg:empty{display:none}
.guide-price{margin:0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--atelier-space-2)}
.guide-amount{display:inline;white-space:nowrap;font-size:var(--atelier-text-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.guide-amount.is-bump{animation:guide-bump var(--atelier-t) var(--atelier-ease)}
@keyframes guide-bump{from{opacity:.4}}
.guide-per{font-size:var(--atelier-text-md);font-weight:600;color:var(--atelier-muted)}
.guide-price small{display:inline;font-size:var(--atelier-text-sm);line-height:1.35;color:var(--atelier-muted)}
.guide-primary{flex:none;position:relative;min-height:44px;padding:0 var(--atelier-space-4);border-radius:var(--atelier-radius-control);background:var(--atelier-ink);color:var(--atelier-paper);
 font-size:var(--atelier-text-lg);font-weight:650;white-space:nowrap;transition:transform var(--atelier-t-fast) var(--atelier-ease)}
.guide-primary::after{content:"";position:absolute;inset:-4px;border:2px solid transparent;border-radius:var(--atelier-radius-card);pointer-events:none;transition:border-color var(--atelier-t-fast) var(--atelier-ease)}
.guide-primary:active{transform:scale(.98)}
.guide-primary[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.guide-primary[aria-busy=true]{opacity:.6;cursor:progress}
@media(hover:hover){.guide-primary:hover::after{border-color:var(--atelier-focus)}}
.guide-primary:focus-visible::after{border-color:var(--atelier-focus)}

/* Squelette (lot G) : mêmes classes que la vue pour la même géométrie ; blocs de papier profond, une pulsation douce, aucun texte. Le template est dans la page. */
.guide-skeleton{display:contents;pointer-events:none}
.guide-skel{display:block;background:var(--atelier-soft);border-radius:var(--atelier-radius-control)}
.guide-skel-more{width:9.5em;height:18px}
.guide-skel-eyebrow{width:5.5rem;height:12px;margin:var(--atelier-space-1) 0 var(--atelier-space-3)}
.guide-skel-title{width:82%;height:28px;margin-bottom:var(--atelier-space-1)}
.guide-skel-title.is-short{width:52%}
.guide-skel-help{width:94%;max-width:52ch;height:44px;margin-top:var(--atelier-space-2)}
.guide-skel-name{width:62%;height:18px;margin-top:var(--atelier-space-2)}
.guide-skel-amount{width:8.5rem;height:30px}
.guide-skel-button{width:11rem;height:52px}
@keyframes guide-skel-pulse{to{opacity:.55}}
@media(prefers-reduced-motion:no-preference){.guide-skel{animation:guide-skel-pulse 1.6s ease-in-out infinite alternate}}

/* Téléphone étroit (320 à 379 px) : la barre garde le bouton « Vérifier ma commande » et le montant sur une ligne */
@media(max-width:359px){
 .guide-more-extra{display:none}
 .guide-bar{padding-inline:var(--atelier-space-3)}
 .guide-bar-row{gap:var(--atelier-space-2)}
}
@media(max-width:379px){
 .guide-primary{padding:0 var(--atelier-space-3);font-size:var(--atelier-text-md)}
 .guide-amount{font-size:var(--atelier-text-xl)}
 .guide-per{font-size:var(--atelier-text-sm)}
}

/* Ordinateur : la boule à gauche (55 %) sur toute la hauteur, l'étape à droite (en-tête, panneau, barre) sur 560 px au plus. Même mise en page sur
   un téléphone à l'horizontale (écran bas : en colonne, le panneau ne garderait que 70 px). */
@media(min-width:1024px),(min-width:640px) and (max-height:500px) and (orientation:landscape){
 .guide{grid-template-columns:55% 45%;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"stage head" "stage panel" "stage bar"}
 .guide-head{padding:var(--atelier-space-4) var(--atelier-space-6) 0 var(--atelier-space-5)}
 .guide-ball-wrap{align-items:center}
 .guide-ball-tilt{--guide-tilt-h:min(82dvh,760px);--guide-room-w:calc(100cqw - 2 * var(--atelier-space-6));height:min(82dvh,760px)}
 .guide-stage.has-bottom .guide-ball-tilt{--guide-tilt-h:min(74dvh,680px);height:min(74dvh,680px)}
 .guide-stage-top{top:28px}
 .guide-stage-bottom{bottom:28px}
 .guide.is-scrolled .guide-stage{border-bottom-color:transparent}
 .guide-panel{padding:var(--atelier-space-5) 48px 48px}
 .guide-bar{padding:var(--atelier-space-3) 48px}
 .guide-primary{min-height:48px;padding:0 var(--atelier-space-5)}
 .guide-bar-row,.guide-bar-msg{max-width:560px}
}
/* Téléphone à l'horizontale : la colonne de l'étape reçoit plus de largeur (l'en-tête y loge la flèche, six points et « Personnaliser davantage ») */
@media(min-width:640px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){
 .guide{grid-template-columns:42% 58%}
 .guide-panel{padding:var(--atelier-space-4) var(--atelier-space-5) var(--atelier-space-5)}
 .guide-bar{padding-inline:var(--atelier-space-5)}
}
/* Tablette en portrait : le contenu de l'étape et la barre gardent 560 px, centrés */
@media(min-width:640px) and (max-width:1023px) and (orientation:portrait){
 .guide-bar-row,.guide-bar-msg{max-width:560px;width:100%;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
 .guide *,.guide *::before,.guide *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .guide-ball-tilt{transform:none!important}
}

/* Lot J (09/10) : la boule en vraie 3D (guide-3d.mjs), posée sur le dessin du moteur au même cadrage. Elle vient en fondu (320 ms) sur le
   dessin, qui s'efface ensuite (.is-3d) ; le dessin revient d'abord quand elle s'efface (frappe, calcul). Tranche et ombre : le filtre du dessin
   (la boule dans la scène, [data-stage]), posé une fois le dessin effacé. Geste sur un texte et boule tournée : 92-parcours-gestes.css. */
.guide-stage .guide-3d{position:absolute;opacity:0;pointer-events:none;transform:translateZ(.5px);transition:opacity var(--atelier-t-fast) var(--atelier-ease)}
.guide-stage .guide-3d canvas{display:block;width:100%!important;height:100%!important}
.guide-stage .guide-3d canvas[hidden]{display:none!important}/* three.js pose display:block en ligne */
.guide-stage.is-3d-in .guide-3d{opacity:1;transition-duration:320ms}
.guide-stage.is-3d [data-stage].guide-3d canvas{filter:drop-shadow(1px 2px 0 var(--atelier-wood)) drop-shadow(0 14px 14px var(--atelier-shade))}
.guide-stage.is-3d .guide-face{opacity:0!important}
/* Lot K (K2) : le cordon est dans la scène 3D (guide-cord-3d.mjs) tant qu'elle est montrée ; le cordon dessiné reprend sans elle */
.guide-stage.is-3d.has-cord-3d .guide-cord{visibility:hidden}
.guide-stage .guide-3d-trace{position:absolute;overflow:visible}
.guide-stage .guide-3d-trace path{fill:none;stroke:var(--atelier-focus);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
/* Ligne d'aide sous la boule (étapes 1 à 4) : petite, encre douce, main au trait ; sa place est gardée sous la boule sur téléphone. Elle laisse la
   place à la note de traitement (et à « Recentrer », 92-parcours-gestes.css). */
.guide-stage-help{position:absolute;left:var(--atelier-space-4);right:var(--atelier-space-4);bottom:var(--atelier-space-1);z-index:2;margin:0;display:flex;justify-content:center;align-items:center;gap:var(--atelier-space-2);
 font-size:var(--atelier-text-sm);line-height:1.3;color:var(--atelier-muted);text-align:center;pointer-events:none}
.guide-stage-help[hidden]{display:none}
.guide-stage-help svg{flex:none}
.guide-stage.has-help .guide-ball-tilt{--guide-tilt-h:calc(100cqh - 26px);height:calc(100% - 26px)}
.guide-stage:has(.guide-stage-note:not([hidden])) .guide-stage-help{visibility:hidden}
@media(min-width:1024px),(min-width:640px) and (max-height:500px) and (orientation:landscape){
 .guide-stage-help{bottom:28px}
 .guide-stage.has-help .guide-ball-tilt{--guide-tilt-h:min(82dvh,760px);height:min(82dvh,760px)}
}
/* Étapes 3 et 4 : la place de la barre de l'élément touché (93-parcours-outils.css) est réservée sous la boule dès l'arrivée, la ligne d'aide l'occupe
   au repos ; toucher un élément ne fait donc pas bouger la boule sous le doigt (retour du 09/10). */
.guide:is([data-step="3"],[data-step="4"]) .guide-ball-wrap{bottom:56px}