/* HUG — bulle, panneau et page plein écran. Transform et opacity uniquement.
   Pas de backdrop-filter (élément fixe : coûteux sur mobile). */

.hug-bulle{position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); z-index:60; display:none; align-items:center; gap:8px;
  height:44px; padding:0 16px 0 6px; border-radius:999px; background:#0C1411; color:#F3F0E8; text-decoration:none; font:700 .8125rem/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing:.06em;
  box-shadow:0 0 0 1px rgb(243 240 232 / .14), 0 14px 30px -12px rgb(0 0 0 / .6); transition:opacity 200ms ease, transform 240ms cubic-bezier(.23,1,.32,1)}
.hug-bulle svg{width:32px; height:32px}
.hug-bulle:active{transform:scale(.96)}
.hug-bulle .oeil{transform-box:fill-box; transform-origin:center; animation:hug-cligne 6.5s infinite}
.hug-ouvert .hug-bulle{opacity:0; transform:scale(.9); pointer-events:none}
@media (max-width:760px){ .hug-bulle{display:flex} }
html:not(.js) .hug-bulle{display:flex}

/* ---------- Panneau ----------
   Calé en bas à droite, haut : min(720px, écran − marges). La marge du haut laisse passer le bandeau
   de la page (--entete) : le panneau ne le chevauche jamais. Téléphone : plein écran, clavier compris. */
.hug-panneau{--hug-haut:calc(var(--entete, 68px) + 12px);
  position:fixed; z-index:70; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:min(440px, calc(100vw - 32px));
  height:min(720px, calc(100vh - var(--hug-haut) - 16px)); height:min(720px, calc(100dvh - var(--hug-haut) - max(16px, env(safe-area-inset-bottom))));
  border-radius:28px; overflow:hidden; background:#0C1411; color:#F3F0E8;
  box-shadow:0 0 0 1px rgb(243 240 232 / .1), 0 30px 80px -20px rgb(0 0 0 / .65);
  transform-origin:100% 100%; opacity:0; transform:translateY(12px) scale(.96);
  transition:opacity 180ms cubic-bezier(.55,0,1,.45), transform 220ms cubic-bezier(.55,0,1,.45)}
.hug-panneau.ouvert{opacity:1; transform:none; transition:opacity 240ms cubic-bezier(.22,1,.36,1), transform 380ms cubic-bezier(.22,1,.36,1)}
@media (max-width:560px){
  .hug-panneau{top:var(--vv-y, 0px); left:0; right:0; bottom:auto; width:auto; height:100vh; height:var(--vv-h, 100dvh); border-radius:0; transform:translateY(40px); transform-origin:50% 100%}
  .hug-panneau.ouvert{transition:opacity 220ms ease, transform 420ms cubic-bezier(.32,.72,0,1)}
  .hug-ouvert, .hug-ouvert body{overflow:hidden}
}

/* ---------- Composant de discussion ---------- */
.hug{display:flex; flex-direction:column; height:100%; min-height:0; background:#0C1411; color:#F3F0E8; font-family:'Hanken Grotesk', system-ui, sans-serif}
.hug--integre{border-radius:28px; box-shadow:0 0 0 1px rgb(243 240 232 / .12); overflow:hidden; background:#101915}
.hug__tete{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-bottom:1px solid rgb(243 240 232 / .1); flex:none}
.hug__avatar{width:44px; height:44px; flex:none}
.hug__avatar svg{width:100%; height:100%}
.hug__id{flex:1; min-width:0}
.hug__nom{font:750 1.125rem/1.1 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; margin:0}
.hug__badge{font:600 .625rem/1 'Hanken Grotesk', sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:4px 6px; border-radius:5px; background:rgb(156 199 180 / .14); color:#9CC7B4; border:1px solid rgb(156 199 180 / .3)}
.hug__statut{font-size:.8125rem; color:#A9B3AD; margin:3px 0 0}
.hug__bouton{width:40px; height:40px; flex:none; border-radius:50%; border:1px solid rgb(243 240 232 / .16); background:transparent; color:#F3F0E8; display:grid; place-items:center; cursor:pointer;
  transition:transform 140ms cubic-bezier(.23,1,.32,1), border-color 160ms ease}
.hug__bouton:hover{border-color:rgb(243 240 232 / .45)}
.hug__bouton:active{transform:scale(.92)}
.hug__bouton svg{width:18px; height:18px}
.hug :focus-visible{outline:3px solid #FF6A2B; outline-offset:2px}

.hug__corps{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
/* La SEULE zone qui défile : tout le fil, puis les réponses suggérées, jamais par-dessus un message. */
.hug__defile{position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 16px 14px}
.hug__defile:focus-visible{outline-offset:-3px}
.hug__fil{display:flex; flex-direction:column; gap:12px}
.hug__nouveaux{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px 0 12px;
  border:0; border-radius:999px; background:#F3F0E8; color:#0C1411; font:650 .8125rem/1 'Hanken Grotesk', system-ui, sans-serif; cursor:pointer;
  box-shadow:0 10px 24px -10px rgb(0 0 0 / .7); animation:hug-pop 220ms cubic-bezier(.23,1,.32,1) both; transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.hug__nouveaux[hidden]{display:none}
.hug__nouveaux:active{transform:translateX(-50%) scale(.96)}
.hug__nouveaux svg{width:16px; height:16px}
.hug__msg{max-width:88%; font-size:.96875rem; line-height:1.5; animation:hug-entre 320ms cubic-bezier(.22,1,.36,1) both}
.hug__msg--hug{align-self:flex-start; background:#18231F; border:1px solid rgb(243 240 232 / .08); padding:12px 14px; border-radius:6px 18px 18px 18px}
.hug__msg--vous{align-self:flex-end; background:#F3F0E8; color:#0C1411; padding:10px 14px; border-radius:18px 18px 6px 18px; font-weight:500}
.hug__txt p{margin:0}
.hug__txt p + p, .hug__txt p + ul, .hug__txt ul + p, .hug__txt p + ol, .hug__txt ol + p{margin-top:9px}
.hug__txt ul, .hug__txt ol{margin:0; padding-left:18px; display:grid; gap:4px}
.hug__txt ul{list-style:none; padding-left:0}
.hug__txt ul li{padding-left:16px; position:relative}
.hug__txt ul li::before{content:""; position:absolute; left:0; top:.66em; width:7px; height:2px; background:#FF6A2B}
.hug__txt ol{list-style:decimal}
.hug__txt strong{font-weight:650; color:#FFFFFF}
.hug__msg--vous .hug__txt strong{color:inherit}
.hug__txt a{color:#FF8A57; font-weight:600; text-underline-offset:3px}
.hug-m{opacity:0; transition:opacity 220ms ease}
.hug-m.v{opacity:1}
.hug__frappe{display:flex; gap:5px; padding:14px 16px}
.hug__frappe span{width:7px; height:7px; border-radius:50%; background:#A9B3AD; animation:hug-point 1.1s ease-in-out infinite}
.hug__frappe span:nth-child(2){animation-delay:.15s}.hug__frappe span:nth-child(3){animation-delay:.3s}

.hug__action{align-self:stretch; border:1px solid rgb(255 106 43 / .45); border-radius:18px; padding:14px 16px; background:rgb(255 106 43 / .06); animation:hug-entre 320ms cubic-bezier(.22,1,.36,1) both}
.hug__action-titre{display:flex; align-items:center; gap:10px; font-weight:650; font-size:.9375rem; margin:0 0 8px}
.hug__action-pastille{width:9px; height:9px; border-radius:50%; background:#FF6A2B; animation:hug-pulse 1.2s ease-in-out infinite}
.hug__action ol{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.hug__action li{display:flex; gap:10px; align-items:center; font-size:.9063rem; color:#C9CFCB; animation:hug-entre 260ms cubic-bezier(.22,1,.36,1) both}
.hug__action li::before{content:""; width:16px; height:16px; flex:none; border-radius:50%; border:2px solid rgb(243 240 232 / .3); transition:background-color 200ms ease, border-color 200ms ease}
.hug__action li.ok::before{background:#9CC7B4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230C1411' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color:#9CC7B4}
.hug__action-pied{margin-top:12px; padding-top:12px; border-top:1px solid rgb(243 240 232 / .1); animation:hug-entre 260ms cubic-bezier(.22,1,.36,1) both}
.hug__action-pied p{font-size:.8125rem; color:#A9B3AD; margin:8px 0 0}
.hug__action-btn{display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; background:#FF6A2B; color:#0C1411; font:650 .9375rem/1 'Hanken Grotesk', sans-serif; text-decoration:none; border:0; cursor:pointer;
  transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.hug__action-btn:active{transform:scale(.97)}
.hug__action-btn:disabled{background:#9CC7B4; cursor:default}

/* ---------- Recommandation du conseiller : une carte, un seul parcours ---------- */
.hug__reco{align-self:stretch; border-radius:20px; padding:16px 16px 14px; background:linear-gradient(160deg,#1C2C25,#131D19 62%); border:1px solid rgb(156 199 180 / .3);
  box-shadow:0 18px 40px -24px rgb(0 0 0 / .7); animation:hug-reco 460ms cubic-bezier(.22,1,.36,1) both}
.hug__reco--fixe{animation:none}
.hug__reco-sur{display:flex; align-items:center; gap:8px; margin:0 0 12px; font:650 .6875rem/1 'Hanken Grotesk', sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#9CC7B4}
.hug__reco-pt{width:8px; height:8px; border-radius:50%; background:#FF6A2B}
.hug__reco-nom{display:flex; align-items:baseline; gap:10px; margin:0 0 12px; font:720 1.1875rem/1.15 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; letter-spacing:-.01em; color:#fff}
.hug__reco-code{flex:none; padding:6px 8px; border-radius:7px; background:#FF6A2B; color:#0C1411; font:750 .8125rem/1 'Hanken Grotesk', sans-serif; letter-spacing:.06em; transform:translateY(-2px)}
.hug__reco-pourquoi{margin:0 0 12px; font-size:.9375rem; line-height:1.5; color:#DDE3DF}
.hug__reco-pourquoi p{margin:0}
.hug__reco-pourquoi strong{color:#fff; font-weight:650}
.hug__reco-t{margin:0 0 6px !important; font:650 .6875rem/1 'Hanken Grotesk', sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#A9B3AD}
.hug__reco-infos{display:grid; gap:8px; margin:0 0 12px; padding:12px 0 0; border-top:1px solid rgb(243 240 232 / .1)}
.hug__reco-infos div{display:grid; grid-template-columns:minmax(6.5em, 34%) 1fr; gap:10px; font-size:.875rem; line-height:1.4}
.hug__reco-infos dt{color:#A9B3AD}
.hug__reco-infos dd{margin:0; color:#F3F0E8}
.hug__reco-infos strong{font-weight:650; color:#fff}
.hug__reco-suite{margin:0 0 12px; font-size:.875rem; color:#C9CFCB}
.hug__reco-suite a{color:#FF8A57; font-weight:600; text-underline-offset:3px}
.hug__reco-mention{margin:10px 0 0; font-size:.75rem; color:#8E9993}
.hug__analyse{border-color:rgb(156 199 180 / .35); background:rgb(156 199 180 / .05)}
.hug__analyse .hug__action-pastille{background:#9CC7B4}

.hug__suggestions{display:flex; flex-wrap:wrap; gap:6px; padding:12px 0 0; max-width:94%}
.hug__suggestions:empty{display:none}
.hug__sugg{border:1px solid rgb(243 240 232 / .2); background:transparent; color:#F3F0E8; padding:8px 12px; border-radius:999px; font:500 .875rem/1.2 'Hanken Grotesk', sans-serif; cursor:pointer; text-align:left;
  animation:hug-entre 280ms cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i, 0) * 50ms);
  transition:border-color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(.23,1,.32,1)}
.hug__sugg:hover{border-color:#FF6A2B; background:rgb(255 106 43 / .08)}
.hug__sugg:active{transform:scale(.97)}
.hug.occupe .hug__envoi{opacity:.5}

.hug__saisie{display:flex; align-items:flex-end; gap:8px; margin:0 12px; padding:6px 6px 6px 14px; border-radius:20px; background:#18231F; border:1px solid rgb(243 240 232 / .14); flex:none; transition:border-color 180ms ease}
.hug__saisie:focus-within{border-color:#FF6A2B}
.hug__saisie textarea{flex:1; min-width:0; resize:none; border:0; background:transparent; color:#F3F0E8; font:400 1rem/1.4 'Hanken Grotesk', sans-serif; padding:10px 0; max-height:140px}
.hug__saisie textarea::placeholder{color:#8E9993}
.hug__saisie textarea:focus{outline:none}
.hug__envoi{width:42px; height:42px; flex:none; border-radius:14px; border:0; background:#FF6A2B; color:#0C1411; display:grid; place-items:center; cursor:pointer; transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.hug__envoi:active{transform:scale(.93)}
.hug__envoi svg{width:18px; height:18px}
.hug__saisie{margin-top:2px}
.hug__avert{font-size:.6875rem; line-height:1.35; color:#8E9993; text-align:center; padding:6px 16px 10px; margin:0; flex:none}

/* ---------- Avatar : les 4 états ---------- */
.hug-av .av-g{opacity:0; transition:opacity 180ms ease}
.hug-av[data-etat="repos"] .av-repos, .hug-av[data-etat="reflechit"] .av-reflechit, .hug-av[data-etat="parle"] .av-parle, .hug-av[data-etat="agit"] .av-agit{opacity:1}
.hug-av .av-bg, .hug-av .av-bd, .hug-av .av-yeux, .hug-av .av-p, .hug-av .av-bouche, .hug-av .av-balise{transform-box:fill-box; transform-origin:center}
.hug-av .av-bg, .hug-av .av-bd{transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.hug-av[data-etat="repos"] .av-yeux{animation:hug-cligne 6.5s infinite}
.hug-av[data-etat="reflechit"] .av-p{animation:hug-point 1.1s ease-in-out infinite}
.hug-av[data-etat="reflechit"] .av-p2{animation-delay:.15s}.hug-av[data-etat="reflechit"] .av-p3{animation-delay:.3s}
.hug-av[data-etat="parle"] .av-bg{transform:translateX(-2px); animation:hug-bras-g .9s ease-in-out infinite alternate}
.hug-av[data-etat="parle"] .av-bd{transform:translateX(2px); animation:hug-bras-d .9s ease-in-out infinite alternate}
.hug-av[data-etat="parle"] .av-bouche{animation:hug-bouche .32s ease-in-out infinite alternate}
.hug-av[data-etat="agit"] .av-balise{animation:hug-glisse 1.1s cubic-bezier(.65,0,.35,1) infinite}

@keyframes hug-cligne{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes hug-point{0%,100%{opacity:.35; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}}
@keyframes hug-bras-g{from{transform:translateX(-1px)}to{transform:translateX(-2.6px)}}
@keyframes hug-bras-d{from{transform:translateX(1px)}to{transform:translateX(2.6px)}}
@keyframes hug-bouche{from{transform:scaleY(.55)}to{transform:scaleY(1.05)}}
@keyframes hug-glisse{0%{transform:translateX(-15px); opacity:.2}60%{transform:translateX(0); opacity:1}100%{transform:translateX(0); opacity:1}}
@keyframes hug-entre{from{opacity:0; transform:translateY(8px)}}
@keyframes hug-reco{from{opacity:0; transform:translateY(10px) scale(.98)}}
@keyframes hug-pop{from{opacity:0; transform:translateX(-50%) translateY(6px) scale(.96)}}
@keyframes hug-pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion: reduce){
  .hug-bulle, .hug-panneau, .hug-panneau.ouvert{transition:opacity 1ms}
  .hug-panneau{transform:none}
  .hug-m{opacity:1}
  .hug__msg, .hug__action, .hug__action li, .hug__sugg, .hug__action-pied, .hug__reco, .hug__nouveaux{animation:none}
  .hug-av *{animation:none !important}
  .hug-bulle .oeil{animation:none}
}