/* Visite de l'espace client : rubriques, écran de téléphone et explication. */
.app-tour{max-width:none;margin:0 clamp(20px,5vw,80px) 70px;background:var(--peach-soft);border-radius:64px 64px 48px 48px;scroll-margin-top:110px}
.app-tour h2 em{color:var(--coral)}
.app-tour-body{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(260px,1fr);gap:clamp(32px,5vw,88px);align-items:center;max-width:1240px;margin:auto}
.app-tour-tabs{display:flex;flex-direction:column;gap:4px}
.app-tour-tabs button{display:flex;align-items:baseline;gap:14px;width:100%;min-height:48px;padding:12px 20px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--wine);font:inherit;font-size:1rem;font-weight:500;text-align:left;cursor:pointer;transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.app-tour-tabs button span{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--coral);min-width:1.4em;transition:color 200ms var(--ease-out)}
.app-tour-tabs button[aria-selected=true]{background:var(--wine);color:var(--paper)}
.app-tour-tabs button[aria-selected=true] span{color:var(--lime)}
.app-tour-tabs button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.app-tour-tabs button:not([aria-selected=true]):hover{background:rgba(53,25,32,.07)}}
.app-tour-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.app-tour-screen{position:relative;width:320px;aspect-ratio:720/1466;border:9px solid var(--wine-night);border-radius:48px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-lg);touch-action:pan-y;user-select:none}
.app-tour-screen:not(.is-live) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-out);pointer-events:none}
.app-tour-screen:not(.is-live) img.is-active{opacity:1;transform:none}
/* Téléphone navigable : page qui défile, en-tête et barre du bas fixes, menu « Plus » par-dessus. */
.app-tour-screen.is-live{aspect-ratio:auto;user-select:none;-webkit-user-select:none}
.tour-frame{position:relative;width:100%;aspect-ratio:390/794;overflow:hidden;background:#f9f6f1}
.tour-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior-x:none}
.tour-scroll::-webkit-scrollbar{display:none}
.tour-scroll:focus-visible{outline:3px solid var(--coral);outline-offset:-3px}
.tour-page{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.tour-header{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}
.tour-nav{position:absolute;left:3.077%;top:89.92%;width:93.85%;height:8.82%;border-radius:8.2%/44%;overflow:hidden;box-shadow:0 6px 16px rgba(37,18,24,.18)}
.tour-nav[hidden]{display:none}
.tour-nav img{display:block;width:100%;height:100%;pointer-events:none}
.tour-nav button{position:absolute;top:0;width:20%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:30%}
.tour-nav button:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.tour-plus{position:absolute;inset:0;animation:tour-sheet 260ms var(--ease-out)}
.tour-plus[hidden]{display:none}
.tour-plus img{display:block;width:100%;height:100%;pointer-events:none}
.tour-plus button{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:12px}
.tour-plus button:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
@keyframes tour-sheet{from{transform:translateY(8%);opacity:.4}}
.tour-status{display:none;position:absolute;left:10%;right:10%;top:42%;margin:0;padding:12px 16px;border-radius:var(--r-md);background:var(--paper);color:var(--wine);font-size:.8rem;font-weight:600;text-align:center;box-shadow:var(--shadow-md)}
.is-loading .tour-status,.is-error .tour-status{display:block}
.is-loading .tour-page,.is-error .tour-page{visibility:hidden}
.tour-wake{display:none;position:absolute;left:0;top:0;width:100%;height:90%;border:0;padding:0 0 9%;background:linear-gradient(180deg,transparent 62%,rgba(53,25,32,.16));cursor:pointer;align-items:flex-end;justify-content:center}
.is-idle .tour-wake{display:flex}
.tour-wake span{padding:9px 16px;border-radius:var(--r-pill);background:var(--lime);color:var(--wine);font:inherit;font-size:.8rem;font-weight:600;box-shadow:var(--shadow-md)}
.tour-wake:focus-visible span{outline:2px solid var(--coral);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.tour-nav button:hover{background:rgba(248,245,237,.08)}.tour-plus button:hover{background:rgba(53,25,32,.06)}.tour-wake:hover span{background:var(--lime-deep)}}
.app-tour-phone figcaption{font-size:.78rem;color:var(--muted);text-align:center}
/* Les textes partagent une même cellule : la hauteur reste celle du plus long, sans saut. */
.app-tour-panels{position:relative;max-width:400px;display:grid}
.app-tour-panel{grid-area:1/1}.app-tour-panel[hidden]{display:block;visibility:hidden}
.app-tour-nav{grid-area:2/1}
.app-tour-panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,2.8vw,2.8rem);line-height:1.02;letter-spacing:-.02em;color:var(--wine-deep);margin:16px 0 18px}
.app-tour-panel>p:last-child{font-size:1rem;line-height:1.75;color:var(--ink);margin:0}
.app-tour-badge{display:inline-block;margin:0;padding:6px 14px;border-radius:var(--r-pill);background:var(--lime-soft);color:var(--wine);font-size:.75rem;font-weight:650;letter-spacing:.06em}
.app-tour-badge.is-plus{background:var(--peach);color:var(--coral)}
.app-tour-panel:not([hidden]){animation:app-tour-in 320ms var(--ease-out)}
@keyframes app-tour-in{from{opacity:0;transform:translateY(6px)}}
.app-tour-nav{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.app-tour-nav .icon-button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--wine);font-size:1.1rem;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out)}
.app-tour-nav .icon-button:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.app-tour-nav .icon-button:hover{background:var(--wine);color:var(--paper)}}
@media(max-width:960px){
 .app-tour{margin:0 16px 40px;border-radius:36px 36px 28px 28px;padding:48px 0 40px}
 .app-tour .section-heading{padding-inline:20px}
 .app-tour-body{grid-template-columns:1fr;gap:24px}
 .app-tour-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 20px;scroll-padding-inline:20px}
 .app-tour-tabs::-webkit-scrollbar{display:none}
 .app-tour-tabs button{flex:none;width:auto;min-height:44px;padding:10px 16px;gap:8px;font-size:.9rem;white-space:nowrap;scroll-snap-align:center;background:var(--paper)}
 .app-tour-tabs button span{font-size:.9rem}
 .app-tour-screen{width:min(74vw,300px);border-width:7px;border-radius:40px}
 .app-tour-panels{max-width:520px;margin:0 auto;padding-inline:24px;text-align:center}
 .app-tour-panel h3{font-size:2rem;margin:14px 0 12px}
 .app-tour-panel>p:last-child{font-size:.95rem}
 .app-tour-nav{justify-content:center;margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.app-tour-screen img,.app-tour-tabs button,.app-tour-nav .icon-button{transition:none}.app-tour-panel:not([hidden]),.tour-plus{animation:none}}
/* Le lien supplémentaire du menu ne doit pas faire passer la navigation sur deux lignes. */
@media(max-width:1080px){.desktop-nav a[href="#decouvrir"]{display:none}}
