/* Tytoo — accueil : navigation écran par écran (assets/deck.js), sur la page d'accueil existante.
   Les sections gardent leur mise en page ; ce fichier les empile en écrans plein cadre et ajoute la navigation.
   Sans script ou sur une fenêtre trop basse (zoom 200 %), rien de tout cela ne s'applique : la page défile normalement. */
:root{--hh:84px;--dk-d:.8s;--dk-e:cubic-bezier(.7,0,.2,1)}
.dk-nav,.dk-mob,.dk-progress{display:none}

/* ---------- Mode diaporama ---------- */
html.deck,html.deck body{height:100%;overflow:hidden;overscroll-behavior:none}
html.deck body{background:#0a2546}
html.deck .site-head{position:fixed;top:0;left:0;right:0;z-index:40}
html.deck .hm.dk{position:fixed;inset:0;z-index:1;overflow:hidden;background:#0a2546}
html.deck .hm.dk>.sl{position:absolute;inset:0;height:100%;min-height:0;margin:0;padding-top:calc(var(--hh) + 3vh);padding-bottom:3vh;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none;background:var(--g);clip-path:none;transition:transform var(--dk-d) var(--dk-e),opacity var(--dk-d) var(--dk-e),border-radius var(--dk-d) var(--dk-e);will-change:transform}
html.deck .hm.dk>.sl::-webkit-scrollbar{display:none}
/* le contenu se place au milieu de l'écran, sans jamais être coupé en haut */
html.deck .hm.dk>.hm-steps,html.deck .hm.dk>.hm-price{display:flex;flex-direction:column;justify-content:safe center}
html.deck .hm.dk>.hm-trades,html.deck .hm.dk>.hm-swiss,html.deck .hm.dk>.hm-faq,html.deck .hm.dk>.hm-cta{align-content:safe center}
html.deck .hm.dk>.hm-hero{align-items:center;min-height:0;padding-bottom:3vh;overflow:hidden}
html.deck .hm.dk>.hm-swiss{background:var(--ink)}
html.deck .hm.dk>.hm-cta{background:var(--mint)}
html.deck .hm.dk>.hm-mark{flex-wrap:wrap;align-content:safe center;padding-top:calc(var(--hh) + 8vh)}
html.deck .hm-mark>.site-foot{flex-basis:100%}
/* états : l'écran suivant monte par-dessus, le précédent recule */
html.deck .sl.is-next{transform:translateY(100%)}
html.deck .sl.is-past{transform:translateY(-4%) scale(.92);opacity:0;border-radius:40px}
html.deck .sl.is-on{transform:none;opacity:1;border-radius:0;box-shadow:0 -30px 60px -30px rgba(0,0,0,.35)}
html.deck .sl:not(.is-on):not(.is-leaving){visibility:hidden}
html.deck .sl.no-anim{transition:none}
html.deck .hm-dock{display:none!important}
html.deck .sl>.site-foot{flex:none;width:calc(100% + 2 * var(--m));margin:6vh calc(-1 * var(--m)) -3vh;padding:40px 0 24px;background:var(--g)}

/* les grands éléments suivent la hauteur de l'écran */
html.deck .hm-trades .tr-wheel{width:min(620px,100%,calc(100dvh - var(--hh) - 10vh))}
html.deck .hm-swiss{padding-top:calc(var(--hh) + 3vh);row-gap:0}
html.deck .hm-swiss .sw-dial{width:min(520px,100%,calc(100dvh - var(--hh) - 22vh))}
html.deck .hm-swiss .sw-facts{margin-top:clamp(16px,3vh,40px)}
html.deck .hm-swiss .sw-ui{margin-top:clamp(14px,2.4vh,32px)}
html.deck .hm-price .pr-calc{margin-top:clamp(16px,3vh,48px)}
html.deck .hm-price .pr-dial{width:min(440px,100%,calc(100dvh - var(--hh) - 36vh))}
html.deck .hm-price .pr-result{min-height:0}
html.deck .hm-price .pr-tiers{margin-top:clamp(12px,2vh,28px)}
html.deck .hm-price .pr-incl{margin-top:clamp(12px,2vh,28px)}
html.deck .hm-steps .st-grid{margin-top:clamp(18px,3vh,48px)}
html.deck .hm-steps .st-phone .ph-screen{height:clamp(340px,50vh,430px)}
html.deck .hm-steps .st-phone{margin-top:clamp(12px,3vh,64px)}
html.deck .hm-faq h2{margin-bottom:clamp(24px,4vh,56px)}

/* navigation : points à droite (ordinateur) */
html.deck .dk-nav{display:block;position:fixed;z-index:30;right:clamp(10px,1.4vw,24px);top:50%;transform:translateY(-50%)}
.dk-nav ol{list-style:none;margin:0;padding:8px 6px;display:flex;flex-direction:column;gap:4px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} /* taste-skill-ignore : la barre reste lisible sur les écrans clairs et foncés */
.dk-nav a{position:relative;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;text-decoration:none!important}
.dk-nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:#9fb0c4;transition:transform .3s var(--spring),background .3s,height .3s}
.dk-nav a:hover::before{background:var(--ink);transform:scale(1.25)}
.dk-nav a[aria-current]::before{background:var(--ink);height:20px;border-radius:4px}
.dk-nav a:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.dk-lab{position:absolute;right:30px;top:50%;transform:translate(6px,-50%);padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.dk-nav a:hover .dk-lab,.dk-nav a:focus-visible .dk-lab{opacity:1;transform:translate(0,-50%)}
/* barre de progression sous l'en-tête */
html.deck .dk-progress{display:block;position:fixed;z-index:41;left:0;right:0;top:var(--hh);height:3px;pointer-events:none}
.dk-progress i{display:block;height:100%;background:var(--mint);transform-origin:0 50%;transform:scaleX(.1);transition:transform var(--dk-d) var(--dk-e)}
/* menu des thèmes (téléphone) */
.dk-mob{position:fixed;z-index:30;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
.dk-mbtn{display:flex;align-items:center;gap:8px;height:44px;max-width:62vw;padding:0 16px 0 6px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px -10px rgba(6,26,49,.6)}
.dk-num{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:var(--mint);color:#061a31;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
.dk-mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-mbtn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.dk-sheet{position:absolute;right:0;bottom:54px;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - var(--hh) - 90px);overflow:auto;padding:8px;border-radius:22px;background:#fff;box-shadow:0 24px 50px -16px rgba(6,26,49,.45)}
.dk-sheet ol{list-style:none;margin:0;padding:0}
.dk-sheet a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none!important}
.dk-sheet a b{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.dk-sheet a[aria-current]{background:var(--g2)}
.dk-sheet a:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.sl h1[tabindex="-1"]:focus,.sl h2[tabindex="-1"]:focus{outline:none}

@media (max-width:1024px){html.deck .dk-nav{display:none}html.deck .dk-mob{display:block}}
@media (max-width:720px){
 :root{--hh:68px}
 html.deck .hm.dk>.sl{padding-top:calc(var(--hh) + 16px);padding-bottom:76px}
 html.deck .hm-trades .tr-wheel{width:min(100%,46dvh)}
 html.deck .hm-swiss .sw-dial{width:min(100%,46dvh)}
 html.deck .hm-price .pr-dial{width:min(100%,40dvh)}
 html.deck .sl>.site-foot{margin-bottom:-76px;padding-bottom:90px}

 /* Comment ça marche : les 4 étapes en grille, la phrase de l'étape choisie, l'écran du chef seulement */
 html.deck .hm-steps .st-lead{display:none}
 html.deck .hm-steps .st-head h2{font-size:8.6vw}
 html.deck .hm-steps .st-grid{margin-top:14px;gap:12px}
 html.deck .hm-steps .st-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 html.deck .hm-steps .st-item{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px 10px 14px;align-items:center;border-radius:16px}
 html.deck .hm-steps .st-item[aria-selected="true"]{grid-column:1 / -1}
 html.deck .hm-steps .st-ic{width:32px;height:32px}
 html.deck .hm-steps .st-ic .ic{width:16px;height:16px}
 html.deck .hm-steps .st-txt b{font-size:15px}
 html.deck .hm-steps .st-desc{font-size:14px}
 html.deck .hm-steps .st-bar{left:10px;right:10px;bottom:6px}
 html.deck .hm-steps .st-stage{padding:12px}
 html.deck .hm-steps .st-phone,html.deck .hm-steps .st-cta span{display:none}
 html.deck .hm-steps .st-stage .ui-week .s{height:34px;font-size:12px}
 html.deck .hm-steps .st-cta{margin-top:12px}
 html.deck .hm-steps .st-cta .hm-btn{height:48px}
 /* Votre métier : la roue, le nom du secteur, le vocabulaire et la semaine */
 html.deck .hm-trades .tr-intro,html.deck .hm-trades .tf-text,html.deck .hm-trades .tf-tpl{display:none}
 html.deck .hm-trades .tr-side h2{font-size:8.6vw}
 html.deck .hm-trades{row-gap:6px}
 html.deck .hm-trades .tr-wheel{width:min(60vw,28dvh);margin:14px auto 26px}
 html.deck .hm-trades .tr-fact{gap:8px}
 html.deck .hm-trades .tf-name{font-size:20px}
 html.deck .hm-trades .tf-week{padding:10px 12px}
 html.deck .hm-trades .tf-week .ui-week .s{height:30px}
 html.deck .hm-trades .tf-go{height:46px}
 /* Fait pour la Suisse : la roue plus petite, les jours fériés juste dessous */
 html.deck .hm-swiss .sw-lead{font-size:15px!important;margin-top:8px}
 html.deck .hm-swiss h2{font-size:8.6vw}
 html.deck .hm-swiss .sw-dial{width:min(62vw,30dvh);margin-top:12px}
 html.deck .hm-swiss .sw-hint,html.deck .hm-swiss .sw-facts{display:none}
 html.deck .hm-swiss .sw-ui{margin-top:12px}
 html.deck .hm-swiss .cd-panel{padding:12px 14px}
 html.deck .hm-swiss .cd-panel .ui-row{padding:6px 12px}
 html.deck .hm-swiss .cd-k{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:11px}
 html.deck .hm-swiss .cd-k[aria-checked="true"]{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:13px}
 html.deck .hm-swiss .cd-name b{font-size:28px}
 html.deck .hm-swiss .cd-step{width:32px;height:32px}

 /* Tarifs : le cadran, le forfait et les quatre prix */
 html.deck .hm-price .pr-head h2{font-size:8.6vw}
 html.deck .hm-price .pr-head p,html.deck .hm-price .pr-incl,html.deck .hm-price .pr-hint,html.deck .hm-price .pr-crowdbox,html.deck .hm-price .pr-result ul,html.deck .hm-price .pd-steps{display:none}
 html.deck .hm-price .pr-calc{grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-top:14px}
 html.deck .hm-price .pr-dial{width:min(46vw,26dvh)}
 html.deck .hm-price .pd-svg text{display:none}
 html.deck .hm-price .pd-n{font-size:28px}
 html.deck .hm-price .pd-unit{font-size:11px}
 html.deck .hm-price .pd-knob{width:30px;height:30px;margin:-15px 0 0 -15px;border-width:4px}
 html.deck .hm-price .pr-result{padding:14px 14px 54px;border-radius:20px}
 html.deck .hm-price .pr-amt{font-size:34px!important}
 html.deck .hm-price .pr-per{font-size:13px!important}
 html.deck .hm-price .pr-go{height:44px;padding:0 14px;font-size:14px}
 html.deck .hm-price .pr-tiers{grid-template-columns:1fr 1fr;margin-top:14px}
 html.deck .hm-price .pr-foot{margin-top:12px;font-size:13px!important}
 /* Questions : plus serré */
 html.deck .hm-faq h2{font-size:8.6vw;margin-bottom:18px}
 html.deck .hm-faq .fq-stack details{padding-top:30px}
 html.deck .hm-faq .fq-stack .tab{top:-30px;height:32px;min-width:96px;font-size:12.5px}
 html.deck .hm-faq .fq-stack summary{padding:12px 16px 14px}
 html.deck .hm-faq .fq-stack .q{font-size:15.5px}
 html.deck .hm-faq .fq-stack details p{font-size:14.5px!important}
 html.deck .hm-faq .fq-stack .a{padding:2px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
 html.deck .hm.dk>.sl{transition:opacity .25s linear}
 html.deck .sl.is-next,html.deck .sl.is-past{transform:none;opacity:0;border-radius:0}
 .dk-progress i,.dk-nav a::before,.dk-lab{transition:none}
}

/* Ordinateur portable (écran bas) : chaque section reste lisible en entier */
@media (min-width:721px) and (max-height:900px){
 html.deck .hm-steps .st-lead,html.deck .hm-price .pr-hint,html.deck .hm-swiss .sw-hint{display:none}
 html.deck .hm-steps .st-item{padding-top:14px;padding-bottom:18px}
 html.deck .hm-steps .st-phone .ph-screen{height:clamp(300px,46vh,400px)}
 html.deck .hm-steps .st-stage{padding-top:28px;padding-bottom:28px}
 html.deck .hm-price .pr-head p{margin-top:8px}
 html.deck .hm-price .pr-calc{grid-template-columns:auto minmax(0,1fr);align-items:center}
 html.deck .hm-price .pr-dial{width:min(320px,34vh)}
 html.deck .hm-price .pr-result{padding:22px 22px 76px}
 html.deck .hm-price .pr-crowdbox{display:none}
 html.deck .hm-price .pr-tiers button{padding:10px 16px}
 html.deck .hm-price .pr-incl li{padding:6px 14px;font-size:14px}
 html.deck .hm-faq .sl-top,html.deck .hm-faq h2{margin-bottom:24px}
 html.deck .hm-faq .fq-stack details{padding-top:32px}
 html.deck .hm-faq .fq-stack .tab{top:-32px;height:34px}
 html.deck .hm-faq .fq-stack summary{padding:14px 24px 18px}
 html.deck .hm-faq .fq-stack .a{padding:2px 24px 18px}
}