/* ==========================================================================
   Globi (assistant), bandeau cookies et pages légales
   ========================================================================== */

/* ---------- Globi ---------- */
.globi{position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:9000;font-family:var(--f-body,system-ui);
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.globi>*{pointer-events:auto}
.globi-fab{width:74px;height:74px;border:0;padding:0;background:none;cursor:pointer;position:relative;
  animation:globi-float 3.6s ease-in-out infinite;filter:drop-shadow(0 10px 14px #0b1f3340);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.globi-fab:hover{transform:scale(1.08) rotate(-6deg)}
.globi-fab:active{transform:scale(.94)}
.globi-fab:focus-visible{outline:3px solid var(--orange,#d4552b);outline-offset:4px;border-radius:50%}
.globi.is-open .globi-fab{animation:none;transform:scale(.86)}
@keyframes globi-float{50%{translate:0 -7px}}
.globi-svg{width:100%;height:100%;overflow:visible;display:block}
.globi-shadow{fill:#0b1f33;opacity:.18;animation:globi-shadow 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes globi-shadow{50%{transform:scale(.8);opacity:.1}}
.globi-land{fill:#8fd08a;stroke:#5aa55a;stroke-width:1.2;animation:globi-spin 14s linear infinite}
@keyframes globi-spin{to{transform:translateX(-160px)}}
.globi-rim{fill:none;stroke:#0e3a52;stroke-width:2.5}
.globi-ring{fill:none;stroke:var(--orange,#d4552b);stroke-width:3.2;stroke-dasharray:5 7;opacity:.9}
.globi-orbit{animation:globi-orbit 5s linear infinite}
@keyframes globi-orbit{to{transform:rotate(360deg)}}
.globi-plane{fill:var(--sun,#f2b33d);stroke:#1b2433;stroke-width:.6}
.globi-pupil{fill:#1b2433;transition:transform .15s ease-out}
.globi-eye{transform-box:fill-box;transform-origin:center;animation:globi-blink 5.5s infinite}
@keyframes globi-blink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.globi-mouth{fill:none;stroke:#1b2433;stroke-width:3;stroke-linecap:round;transition:d .3s}
.globi-mouth-o{fill:#1b2433;opacity:0;transition:opacity .2s}
.globi[data-mood=thinking] .globi-mouth{opacity:0}
.globi[data-mood=thinking] .globi-mouth-o{opacity:1}
.globi[data-mood=thinking] .globi-pupil{transform:translate(1.5px,-2.5px)!important}
.globi[data-mood=thinking] .globi-land{animation-duration:3s}
.globi[data-mood=happy] .globi-mouth{d:path("M49 71q11 13 22 0z");fill:#1b2433}
.globi[data-mood=happy] .globi-fab,.globi[data-mood=happy] .globi-head-mascot{animation:globi-hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes globi-hop{40%{transform:translateY(-10px) rotate(-8deg)}}
.globi.wave .globi-fab{animation:globi-wave 1.4s ease-in-out 2,globi-float 3.6s ease-in-out 2.8s infinite}
@keyframes globi-wave{20%,60%{rotate:-14deg}40%,80%{rotate:12deg}}
.globi-badge{position:absolute;top:2px;right:2px;z-index:2;min-width:22px;height:22px;border-radius:11px;background:var(--orange,#d4552b);color:#fff;
  font:700 .75rem/22px var(--f-body,system-ui);border:2px solid var(--bg,#fff);animation:globi-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes globi-pop{from{scale:0}}

/* bulle : Globi « parle » à côté de lui */
.globi-teaser{position:absolute;right:88px;bottom:22px;display:flex;align-items:center;gap:2px;white-space:nowrap;
  background:var(--surface,#fff);color:var(--ink,#1b2433);border:1.5px solid var(--ink,#1b2433);border-radius:14px;
  padding:5px 6px 5px 12px;box-shadow:3px 3px 0 var(--ink,#1b2433);cursor:pointer;transform-origin:100% 50%;
  font:700 1.15rem/1.1 var(--f-hand,cursive);color:var(--ink,#1b2433);animation:globi-say .55s cubic-bezier(.3,1.5,.5,1) both}
.globi-teaser[hidden]{display:none}
.globi-teaser:before,.globi-teaser:after{content:"";position:absolute;top:50%;width:0;height:0;border-style:solid}
.globi-teaser:before{right:-11px;margin-top:-8px;border-width:8px 0 8px 11px;border-color:transparent transparent transparent var(--ink,#1b2433)}
.globi-teaser:after{right:-8px;margin-top:-6px;border-width:6px 0 6px 8.5px;border-color:transparent transparent transparent var(--surface,#fff)}
.globi-teaser:hover{transform:translateX(-3px)}
.globi-teaser-close{border:0;background:none;font:400 1rem/1 var(--f-body,system-ui);color:var(--muted,#555);cursor:pointer;padding:2px 4px;border-radius:50%;opacity:.6}
.globi-teaser-close:hover{opacity:1;background:var(--soft,#eee)}
@keyframes globi-say{from{opacity:0;transform:scale(.4) translateX(20px)}}
@keyframes globi-in{from{opacity:0;transform:translateY(12px) scale(.96)}}

.globi-panel{width:min(380px,calc(100vw - 28px));height:min(560px,calc(100dvh - 130px));display:flex;flex-direction:column;
  background:var(--surface,#fff);color:var(--ink,#1b2433);border:1.5px solid var(--ink,#1b2433);border-radius:22px;overflow:hidden;
  box-shadow:8px 8px 0 var(--ink,#1b2433),0 30px 60px -20px #0b1f3366;transform-origin:100% 100%;
  opacity:0;transform:translateY(16px) scale(.92);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.globi.is-open .globi-panel{opacity:1;transform:none}
html[data-theme=dark] .globi-panel{border-color:#f3ede2;box-shadow:8px 8px 0 #d4552b}
html[data-theme=dark] .globi-teaser{border-color:#f3ede2;box-shadow:3px 3px 0 #d4552b}
html[data-theme=dark] .globi-teaser:before{border-left-color:#f3ede2}
.globi-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink,#1b2433);color:var(--bg,#f3ede2)}
html[data-theme=dark] .globi-head{background:#0b1118}
.globi-head-mascot{width:46px;height:46px;flex:none}
.globi-head b{font-family:var(--f-display,serif);font-size:1.25rem;font-weight:500;display:block;line-height:1.1}
.globi-head small{font-size:.74rem;opacity:.8;display:flex;align-items:center;gap:6px}
.globi-head small i{width:7px;height:7px;border-radius:50%;background:#6fd08a;box-shadow:0 0 0 3px #6fd08a33;animation:globi-live 2s infinite}
@keyframes globi-live{50%{box-shadow:0 0 0 6px #6fd08a00}}
.globi-close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid #f3ede244;background:none;color:inherit;font-size:1.3rem;cursor:pointer;transition:transform .4s}
.globi-close:hover{transform:rotate(90deg);background:#f3ede214}
.globi-log{flex:1;overflow-y:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink,#1b2433) 10%,transparent) 1px,transparent 0) 0 0/18px 18px}
.globi-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:.92rem;line-height:1.5;animation:globi-in .35s cubic-bezier(.16,1,.3,1);overflow-wrap:anywhere}
.globi-msg.bot{align-self:flex-start;background:var(--bg,#f3ede2);border:1px solid var(--line,#ddd);border-bottom-left-radius:4px}
.globi-msg.user{align-self:flex-end;background:var(--orange,#d4552b);color:#fff;border-bottom-right-radius:4px}
.globi-msg a{display:inline-block;margin-top:6px;margin-right:8px;font-weight:600;color:var(--blue,#1f5f7a)}
.globi-msg small{opacity:.75}
.globi-dots{display:inline-flex;gap:4px;padding:3px 0}
.globi-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted,#777);animation:globi-dot 1s infinite}
.globi-dots i:nth-child(2){animation-delay:.15s}.globi-dots i:nth-child(3){animation-delay:.3s}
@keyframes globi-dot{30%{transform:translateY(-5px);opacity:.5}}
.globi-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 10px}
.globi-chips:empty{display:none}
.globi-chips button{border:1.5px solid var(--ink,#1b2433);background:var(--surface,#fff);color:var(--ink,#1b2433);border-radius:999px;padding:6px 11px;font:500 .8rem var(--f-body,system-ui);
  cursor:pointer;animation:globi-in .4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 50ms);transition:background .2s,color .2s,transform .2s}
.globi-chips button:hover{background:var(--ink,#1b2433);color:var(--bg,#fff);transform:translateY(-2px)}
.globi-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line,#ddd)}
.globi-form input{flex:1;min-width:0;border:1.5px solid var(--line,#ddd);border-radius:999px;padding:10px 14px;background:var(--bg,#f7f7f7);color:var(--ink,#1b2433);font-size:16px}
.globi-form input:focus{outline:none;border-color:var(--orange,#d4552b)}
.globi-form button{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:var(--ink,#1b2433);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .3s}
.globi-form button:hover{background:var(--orange,#d4552b);transform:rotate(-12deg)}
.globi-form svg{width:19px;height:19px;fill:var(--bg,#fff)}
.globi-note{margin:0;padding:0 14px 10px;font-size:.7rem;color:var(--muted,#666)}
.globi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Bandeau cookies (bas gauche, non bloquant) ---------- */
dialog.cookie-dialog{position:fixed;overflow:auto;box-sizing:border-box;inset:auto auto clamp(14px,2.2vw,28px) clamp(14px,2.2vw,28px);margin:0;z-index:9100;
  width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:18px 18px 16px!important;border-radius:18px!important;
  border:1.5px solid var(--ink)!important;background:var(--surface)!important;color:var(--ink);box-shadow:6px 6px 0 var(--ink)!important;
  opacity:0;transform:translateY(24px) rotate(-1deg);transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
dialog.cookie-dialog.cookie-in{opacity:1;transform:none}
html[data-theme=dark] dialog.cookie-dialog{border-color:#f3ede2!important;box-shadow:6px 6px 0 var(--orange)!important}
.cookie-dialog .cookie-heading{display:flex;align-items:center;gap:8px}
.cookie-dialog .cookie-heading span{font-size:.68rem!important;letter-spacing:.16em;font-weight:700;color:var(--orange)}
.cookie-dialog h2{font-size:1.35rem!important;margin:10px 0 6px!important}
.cookie-dialog p{font-size:.86rem!important;line-height:1.5!important;margin:0 0 12px;color:var(--muted)}
.cookie-dialog .cookie-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;margin:0!important}
.cookie-dialog .cookie-actions button,.cookie-dialog #cookie-save{min-width:0!important;width:100%;white-space:nowrap;border-radius:999px!important;padding:9px 6px!important;font:600 .82rem var(--f-body)!important;cursor:pointer;
  border:1.5px solid var(--ink)!important;background:transparent!important;color:var(--ink)!important;transition:background .2s,color .2s,transform .2s}
.cookie-dialog .cookie-actions button[data-consent=yes],.cookie-dialog #cookie-save{background:var(--ink)!important;color:var(--bg)!important}
.cookie-dialog .cookie-actions button:hover,.cookie-dialog #cookie-save:hover{background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important;transform:translateY(-1px)}
.cookie-dialog #cookie-save{width:100%;margin-top:8px}
.cookie-dialog a{display:inline-block!important;margin-top:10px!important;font-size:.78rem!important}
.cookie-dialog .consent-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cookie-dialog .consent-row small{display:block;font-size:.75rem;color:var(--muted)}
.cookie-dialog .consent-row input{width:20px;height:20px;accent-color:var(--orange)}

/* ---------- Pages légales ---------- */
.legal-page{max-width:820px}
.legal-updated{font-size:.85rem!important;color:var(--muted)!important;margin:0 0 20px!important}
.legal-body h2{font-family:var(--f-display);font-size:1.45rem!important;margin:34px 0 8px!important;letter-spacing:-.01em}
.legal-body p,.legal-body li{color:var(--ink);opacity:.88;line-height:1.75;max-width:70ch}
.legal-body ul{padding-left:1.2em}
.legal-body li{margin:6px 0}
.legal-body+.btn{margin-top:30px}
mark.todo{background:#f2b33d55;color:inherit;padding:1px 5px;border-radius:4px;font-weight:600}

/* ---------- Mobile ---------- */
@media (max-width:650px){
  .globi-fab{width:62px;height:62px}
  .globi-teaser{right:74px;bottom:16px;font-size:1.05rem}
  .globi.is-open{left:14px}
  .globi-panel{width:100%;height:min(600px,calc(100dvh - 110px))}
  body:has(dialog.cookie-dialog[open]) .globi{opacity:0;pointer-events:none;visibility:hidden}
  .cookie-dialog .cookie-actions button{font-size:.78rem!important}
}
@media (prefers-reduced-motion:reduce){
  .globi *,.globi{animation:none!important}
  dialog.cookie-dialog{transition:none}
}

.cookie-dialog :focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cookie-dialog form{margin:0}

/* lunettes (mode vacances) */
.globi-shades{opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.globi.vacances .globi-shades{opacity:1;transform:none}
.globi.spin .globi-fab .globi-svg{animation:globi-spin360 1s cubic-bezier(.5,0,.3,1)}
@keyframes globi-spin360{to{transform:rotate(720deg)}}

/* la fenêtre fermée ne doit jamais intercepter les clics */
.globi-panel[hidden]{display:none!important}
.globi:not(.is-open) .globi-panel{pointer-events:none;visibility:hidden}
.globi.is-open .globi-panel{visibility:visible}