/* Comptoir — tunnels : briques communes (les thèmes donnent le caractère) */
.fh{position:relative;z-index:10;background:var(--hd-bg,var(--ct-bg));color:var(--hd-ink,var(--ct-ink));border-bottom:1px solid var(--hd-line,var(--ct-line))}
.fh-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.fh-note{margin:0;font-size:13.5px;color:var(--ct-muted);display:flex;align-items:center;gap:8px;text-align:right}
@media(max-width:599px){.fh-note{display:none}}
.ff{background:var(--ft-bg,var(--ct-surface));color:var(--ft-ink,var(--ct-muted));font-size:13.5px;padding:26px 0 calc(26px + env(safe-area-inset-bottom))}
.ff-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.ff p:not(.wrap){margin:0}.ff nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ff a{color:inherit}
.ff-demo{margin:14px auto 0;opacity:.8}
.fn-page{padding-bottom:0}

/* commande courte */
.fn-co-wrap{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(56px,8vw,100px)}
.fn-co-h{font-size:clamp(28px,3.6vw,44px);margin-bottom:20px}
.fn-co{display:grid;gap:10px}
.fn-co-sec{display:grid;gap:14px;padding:22px 0;border-bottom:1px solid var(--ct-line)}
.fn-co-sec:last-child{border-bottom:0}
.fn-co-sec h2{display:flex;gap:12px;align-items:center;font:600 19px/1.2 var(--ct-font-body);margin:0}
.fn-co-sec h2 i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ct-ink);color:var(--ct-bg);font:700 13px var(--ct-font-body);font-style:normal}
.fn-qty select{max-width:120px}
.fn-bump{display:block;cursor:pointer;margin:10px 0 4px}
.fn-bump input{position:absolute;opacity:0}
.fn-bump-box{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px;border:2px dashed var(--bump-line,var(--ct-warn));border-radius:var(--ct-radius);background:var(--bump-bg,color-mix(in srgb,var(--ct-warn) 7%,var(--ct-bg)));transition:border-color .2s,background .2s}
.fn-bump-box::before{content:"";width:24px;height:24px;border:2px solid var(--ct-ink);border-radius:4px;background:var(--ct-bg) center/16px no-repeat;margin-top:2px;transition:background-color .15s}
.fn-bump input:checked+.fn-bump-box{border-style:solid;border-color:var(--ct-good);background:color-mix(in srgb,var(--ct-good) 8%,var(--ct-bg))}
.fn-bump input:checked+.fn-bump-box::before{background-color:var(--ct-good);border-color:var(--ct-good);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.fn-bump input:focus-visible+.fn-bump-box{outline:2px solid var(--ct-accent);outline-offset:3px}
.fn-bump-t b{display:block;font-size:16px;line-height:1.35}
.fn-bump-t span,.fn-bump-t p{display:block;margin:6px 0 0;color:var(--ct-muted);font-size:14.5px;line-height:1.5}
.fn-recap{border:1px solid var(--ct-line);border-radius:var(--ct-radius);padding:14px 16px;background:var(--ct-bg)}
.fn-secure{display:flex;gap:8px;justify-content:center;align-items:center;margin:4px 0 0;color:var(--ct-muted);font-size:13px;text-align:center}
.fn-no{margin:0 0 10px;color:var(--ct-muted)}

/* compte à rebours et série limitée — uniquement sur des dates et quantités réelles */
[data-countdown]{display:flex;gap:10px}
[data-countdown] span{display:grid;justify-items:center;min-width:58px;padding:8px 6px;border-radius:var(--ct-radius-sm);background:var(--cd-bg,var(--ct-surface))}
[data-countdown] b{font:700 24px/1 var(--ct-font-body);font-variant-numeric:tabular-nums}
[data-countdown] small{font-size:11px;color:var(--ct-muted);margin-top:4px}
.fn-series{display:grid;gap:8px}
.fn-series-bar{height:8px;border-radius:4px;background:var(--ct-surface);overflow:hidden}
.fn-series-bar i{display:block;height:100%;width:0;background:var(--ct-accent);border-radius:inherit;transition:width 1.2s var(--ct-ease)}

/* questionnaire */
.fn-quiz{max-width:720px;margin:0 auto}
.fn-q-top{display:flex;justify-content:space-between;align-items:center;min-height:40px}
.fn-q-back{display:inline-flex;gap:6px;align-items:center;border:0;background:none;color:var(--ct-muted);font:500 14.5px var(--ct-font-body);cursor:pointer;padding:8px 0}
.fn-q-count{margin:0 0 0 auto;font-size:13.5px;color:var(--ct-muted)}
.fn-q-bar{height:4px;border-radius:2px;background:var(--ct-line);margin:8px 0 28px;overflow:hidden}
.fn-q-bar i{display:block;height:100%;width:0;background:var(--ct-accent);transition:width .5s var(--ct-ease)}
.fn-q-stage.in-r{animation:q-in-r .45s var(--ct-ease)}
.fn-q-stage.in-l{animation:q-in-l .45s var(--ct-ease)}
@keyframes q-in-r{from{opacity:0;transform:translateX(28px)}}
@keyframes q-in-l{from{opacity:0;transform:translateX(-28px)}}
.fn-q{border:0;margin:0;padding:0;display:grid;gap:16px}
.fn-q legend,.fn-q>.fn-q-t{padding:0;margin-bottom:6px}
.fn-q-t{display:block;font:var(--display-weight,500) clamp(24px,3vw,34px)/1.15 var(--ct-font-display);letter-spacing:-.01em}
.fn-q legend small{display:block;margin-top:8px;color:var(--ct-muted);font-size:15px}
.fn-q-opts{display:grid;gap:10px}
@media(min-width:600px){.fn-q-opts{grid-template-columns:1fr 1fr}}
.fn-q-o{position:relative;display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--ct-line);border-radius:var(--ct-radius);background:var(--ct-bg);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.fn-q-o:hover{border-color:var(--ct-ink)}
.fn-q-o:active{transform:scale(.99)}
.fn-q-o input{position:absolute;opacity:0}
.fn-q-o b{display:block;font-weight:600}.fn-q-o small{display:block;color:var(--ct-muted);font-size:13.5px;margin-top:2px}
.fn-q-o.on{border-color:var(--ct-accent);box-shadow:inset 0 0 0 1px var(--ct-accent)}
.fn-q-o input:focus-visible~span{outline:2px solid var(--ct-accent);outline-offset:4px}
.has-img .fn-q-o{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.has-img .fn-q-o img{width:100%;aspect-ratio:3/2;object-fit:cover}
.has-img .fn-q-o span{padding:12px 16px 14px}
.fn-q-num{display:flex;align-items:center;gap:12px}
.fn-q-num input{width:160px;height:60px;border:1px solid var(--ct-line);border-radius:var(--ct-radius);padding:0 16px;font:600 26px var(--ct-font-body);background:var(--ct-bg);color:var(--ct-ink)}
.fn-q-num span{font-size:18px;color:var(--ct-muted)}
.fn-q .ct-btn{justify-self:start}
.fn-q .ct-btn[disabled]{opacity:.4}
.fn-estimate{padding:16px 18px;border-radius:var(--ct-radius);background:var(--ct-surface);border-left:3px solid var(--ct-accent)}
.fn-estimate p{margin:0}.fn-estimate b{font-size:20px}
.fn-q-contact{display:grid;gap:14px}