/* UNSEEN · le guide (assistant à boutons). Tokens de style.css : --nuit --graphite --pellicule --signal --cendre --line --D --B --M */
.gd{--ease:cubic-bezier(.2,.8,.2,1);position:fixed;right:24px;bottom:24px;z-index:75;font-family:var(--B)}
.gd *{box-sizing:border-box}

/* la bulle : le carré orange du logo, qui s'étire en étiquette */
.gd-launch{position:relative;display:flex;align-items:center;gap:0;height:56px;padding:0;border:0;background:var(--nuit);color:var(--pellicule);cursor:pointer;
  box-shadow:0 0 0 1px #ffffff1f,0 18px 40px -12px #000c;transition:transform .5s var(--ease),opacity .4s,box-shadow .3s}
.gd-launch .sqb{position:relative;width:56px;height:56px;flex:none;background:var(--signal);display:grid;place-items:center;overflow:hidden}
.gd-launch .sqb::before,.gd-launch .sqb::after{content:"";position:absolute;width:16px;height:2px;background:#000;transition:transform .45s var(--ease)}
.gd-launch .sqb::before{transform:translateY(-4px)}
.gd-launch .sqb::after{width:10px;transform:translate(-3px,4px)}
.gd-launch .lb{display:flex;flex-direction:column;align-items:flex-start;padding:0 20px 0 16px;white-space:nowrap;max-width:260px;overflow:hidden;transition:max-width .5s var(--ease),padding .5s var(--ease),opacity .3s}
.gd-launch .lb b{font-family:var(--D);font-weight:400;font-size:19px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.gd-launch .lb small{font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre);margin-top:5px}
.gd-launch:hover{box-shadow:0 0 0 1px var(--signal),0 18px 40px -12px #000c}
.gd-launch .pulse{position:absolute;left:0;top:0;width:56px;height:56px;border:1px solid var(--signal);pointer-events:none;animation:gdp 2.8s var(--ease) infinite}
@keyframes gdp{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.55);opacity:0}}
.gd:not(.ready) .gd-launch,.gd.away .gd-launch{transform:translateY(140%);opacity:0;pointer-events:none}
.gd.open .gd-launch .lb{max-width:0;padding:0;opacity:0}
.gd.open .gd-launch .pulse{display:none}
.gd.open .gd-launch .sqb::before{transform:rotate(45deg);width:18px}
.gd.open .gd-launch .sqb::after{transform:rotate(-45deg);width:18px}

/* le panneau */
.gd-scrim{position:fixed;inset:0;background:#0009;opacity:0;pointer-events:none;transition:opacity .4s}
.gd-panel{position:absolute;right:0;bottom:72px;width:400px;max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--graphite);color:var(--pellicule);box-shadow:0 0 0 1px var(--line),0 40px 80px -20px #000;
  transform-origin:100% 100%;transform:translateY(16px) scale(.96);opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .35s,visibility 0s .5s}
.gd.open .gd-panel{transform:none;opacity:1;visibility:visible;transition:transform .5s var(--ease),opacity .35s,visibility 0s}
.gd-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.gd-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.gd-brand{display:flex;align-items:baseline;gap:12px}
.gd-brand b{font-family:var(--D);font-weight:400;font-size:22px;letter-spacing:.01em;line-height:1}
.gd-brand b i{font-style:normal;color:var(--signal)}
.gd-brand span{font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre)}
.gd-x{width:34px;height:34px;border:1px solid var(--line);background:none;color:var(--pellicule);cursor:pointer;font-size:16px;line-height:1;transition:border-color .25s,color .25s}
.gd-x:hover{border-color:var(--signal);color:var(--signal)}
.gd-bar{display:flex;gap:6px;padding:0 20px;height:3px;margin-top:-2px}
.gd-bar i{flex:1;background:var(--line);transition:background .4s var(--ease)}
.gd-bar i.on{background:var(--signal)}

.gd-body{position:relative;padding:26px 20px 22px;overflow-y:auto;overscroll-behavior:contain;transition:opacity .18s,transform .18s}
.gd-body.out{opacity:0;transform:translateY(6px)}
.gd-k{margin:0 0 10px;font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.gd-h{margin:0 0 12px;font-family:var(--D);font-weight:400;font-size:34px;line-height:.98;text-transform:uppercase;letter-spacing:.005em}
.gd-p{margin:0 0 22px;color:#cfc9c0;font-size:15px;line-height:1.55}

.gd-main{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:17px 18px;border:0;background:var(--signal);color:#000;cursor:pointer;
  font-family:var(--M);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-align:left;transition:background .25s}
.gd-main b{font-size:16px;transition:transform .3s var(--ease)}
.gd-main:hover{background:var(--pellicule)}.gd-main:hover b{transform:translateX(4px)}
.gd-ghost{display:block;width:100%;margin:0 0 6px;padding:15px 18px;border:1px solid #ffffff2e;background:none;color:var(--pellicule);cursor:pointer;text-decoration:none;
  font-family:var(--M);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:left;transition:border-color .25s,color .25s}
.gd-ghost:hover{border-color:var(--signal);color:var(--signal)}
.gd-back{margin-top:10px;padding:6px 0;border:0;background:none;color:var(--cendre);cursor:pointer;text-decoration:none;font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.gd-back:hover{color:var(--pellicule)}
.gd-row{display:flex;justify-content:space-between;gap:12px}

.gd-opts{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px}
.gd-opt{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:17px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--pellicule);cursor:pointer;text-align:left;
  font-family:var(--B);font-size:16px;line-height:1.3;transition:padding .35s var(--ease),color .25s}
.gd-opt em{font-style:normal;font-family:var(--M);font-size:11px;letter-spacing:.12em;color:var(--cendre);transition:color .25s}
.gd-opt span{flex:1}.gd-opt small{display:block;margin-top:3px;color:var(--cendre);font-size:13px}
.gd-opt i{width:10px;height:10px;background:var(--signal);transform:scale(0);transition:transform .35s var(--ease)}
.gd-opt:hover,.gd-opt:focus-visible{padding-left:12px}
.gd-opt:hover em,.gd-opt:focus-visible em{color:var(--signal)}
.gd-opt:hover i,.gd-opt:focus-visible i,.gd-opt.hit i{transform:scale(1)}
.gd-opt.hit{color:var(--signal)}

.gd-res{position:relative;margin:4px 0 14px;padding:22px 20px 20px;background:var(--nuit);box-shadow:inset 0 0 0 1px var(--line)}
.gd-res.rec{background:var(--signal);color:#000;box-shadow:none}
.gd-tag{position:absolute;top:14px;right:14px;font-family:var(--M);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid #0006;padding:4px 7px}
.gd-n{margin:0;font-family:var(--D);font-weight:400;font-size:40px;line-height:.95;text-transform:uppercase}
.gd-price{margin:8px 0 12px;font-family:var(--D);font-size:54px;line-height:1;letter-spacing:.005em}
.gd-price small{font-family:var(--M);font-size:12px;letter-spacing:.14em;margin-left:8px;color:var(--cendre)}
.gd-res.rec .gd-price small{color:#000a}
.gd-d{margin:0;font-size:15px;line-height:1.5;color:#d9d3ca}
.gd-res.rec .gd-d{color:#111}
.gd-alt{margin:0 0 12px;font-size:14px;color:#cfc9c0}.gd-alt b{color:var(--pellicule)}
.gd-when{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--M);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cendre)}
.gd-when .sq{width:8px;height:8px;background:var(--signal);flex:none}

.gd-faq{border-top:1px solid var(--line);margin:4px 0 18px}
.gd-faq details{border-bottom:1px solid var(--line)}
.gd-faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 2px;cursor:pointer;list-style:none;font-size:15px;line-height:1.35}
.gd-faq summary::-webkit-details-marker{display:none}
.gd-faq summary i{position:relative;width:10px;height:10px;flex:none}
.gd-faq summary i::before,.gd-faq summary i::after{content:"";position:absolute;left:0;top:4px;width:10px;height:2px;background:var(--signal);transition:transform .3s var(--ease)}
.gd-faq summary i::after{transform:rotate(90deg)}
.gd-faq details[open] summary i::after{transform:rotate(0)}
.gd-faq p{margin:0 0 16px;color:#cfc9c0;font-size:14.5px;line-height:1.55}

.gd-foot{padding:11px 20px;border-top:1px solid var(--line);font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6d6862}

/* téléphone : panneau en feuille du bas */
@media (max-width:640px){
  .gd{right:16px;bottom:16px}
  .gd-launch{height:52px}.gd-launch .sqb,.gd-launch .pulse{width:52px;height:52px}
  .gd-launch .lb{padding:0 16px 0 14px}.gd-launch .lb b{font-size:17px}
  .gd.open .gd-scrim{opacity:1;pointer-events:auto}
  .gd-panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:88vh;max-height:88dvh;transform:translateY(100%);opacity:1;padding-bottom:env(safe-area-inset-bottom)}
  .gd.open .gd-panel{transform:none}
  .gd.open .gd-launch{opacity:0;pointer-events:none}
  .gd-h{font-size:31px}.gd-n{font-size:36px}.gd-price{font-size:48px}
}
html.gd-lock{overflow:hidden}
@media (min-width:641px){html.gd-lock{overflow:visible}}
@media (prefers-reduced-motion:reduce){.gd *,.gd{transition:none!important;animation:none!important}}