/* La bulle de discussion — en bas à GAUCHE, pour ne jamais croiser le panier
   qui s'ouvre à droite. Toujours accessible, jamais imposée. */

/* Le bouton fermé : un carré, une icône, rien d'autre. Il reprend la mise du
   raccourci « Notre solution » (site.css) — angles vifs, noir plein, filet de
   1 px, survol inversé — et se cale à la même hauteur que lui, dans le coin
   opposé. Deux boutons de même facture, l'un pour acheter, l'autre pour parler. */
.pil-chat-btn{
  position:fixed; left:32px; bottom:32px; z-index:70;
  display:grid; place-items:center;
  /* 53 px : la hauteur de « Notre solution » sur ordinateur (12 px × 1,6 de
     ligne, 16 px de marge en haut et en bas, 1 px de bordure de chaque côté). */
  width:53px; height:53px; padding:0; border-radius:0;
  background:var(--ink); color:var(--porcelain); border:1px solid var(--ink);
  cursor:pointer; box-shadow:0 12px 32px rgba(23,21,15,.22);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
    background .3s var(--ease), color .3s var(--ease);
}
.pil-chat-btn:hover{
  transform:translateY(-2px); background:var(--porcelain); color:var(--ink);
  box-shadow:0 16px 38px rgba(23,21,15,.26);
}
.pil-chat-btn .pc-ico{display:block; width:24px; height:24px;
  /* La queue de la bulle tire l'œil vers le bas : on recentre optiquement. */
  margin-top:-1px}
.pil-chat-btn .pc-n{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:10px;
  background:#c9524a; color:#fff; font-size:11px; display:grid; place-items:center; padding:0 5px;
  box-shadow:0 2px 8px rgba(23,21,15,.25);
}
/* `display:grid` ci-dessus l'emporte sur le display:none que le navigateur
   applique à [hidden] : sans cette ligne, la pastille afficherait « 0 ». */
.pil-chat-btn .pc-n[hidden]{display:none}
.pil-chat-btn[hidden]{display:none}

/* Le mot spontané vient d'arriver : le bouton se signale une fois, deux
   battements, puis se tait. Pas de clignotement, pas de son, rien qui harcèle. */
.pil-chat-btn.pc-ping{animation:pcPing 1.3s var(--ease) 2}
@keyframes pcPing{
  0%,100%{transform:none}
  30%{transform:translateY(-5px)}
  50%{transform:none}
}
.pil-chat-btn.pc-ping .pc-n{animation:pcPop .4s var(--ease)}
@keyframes pcPop{from{transform:scale(.3); opacity:0}to{transform:scale(1); opacity:1}}

/* Le panneau. Fermé, il n'occupe rien : ni place, ni attention. */
.pil-chat{
  position:fixed; left:32px; bottom:32px; z-index:71;
  width:376px; max-width:calc(100vw - 32px);
  /* --pc-h est posé par le script d'après la zone RÉELLEMENT visible
     (visualViewport) : quand le clavier monte, le panneau se réduit au lieu
     d'être coupé ou de faire glisser la page. */
  height:var(--pc-h, min(560px, calc(100vh - 110px)));
  background:var(--porcelain); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(23,21,15,.26);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.pil-chat.open{opacity:1; transform:none; pointer-events:auto}

.pc-head{display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--ink); color:var(--porcelain)}
/* Un médaillon porcelaine frappé du galet PILAIR, la marque de la maison.
   Le fichier est un recadrage du logo sur sa seule forme : l'ensemble complet
   (« PILAIR · SOINS · PARIS ») serait illisible à 38 px. */
.pc-head .pc-face{width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  /* Version noire de la marque : le galet en porcelaine sur un médaillon d'encre,
     qui se fond dans l'en-tête. Seul le filet doré en dessine le contour. Le
     fichier est l'inversion des deux tons du logo, anticrénelage conservé.
     76 % et pas 100 : sans cet air autour, le galet touche le bord du rond et
     la forme ne se lit plus. */
  background:var(--ink) url("/img/pilair-marque-noir.png") center/76% no-repeat;
  box-shadow:0 0 0 1px rgba(201,168,106,.55)}
.pc-head .pc-id{flex:1; line-height:1.3}
.pc-head .pc-id b{font-family:"Fraunces",serif; font-weight:400; font-size:16px; letter-spacing:.02em}
.pc-head .pc-id span{display:block; font-size:11px; color:#b9b3a4; letter-spacing:.06em}
.pc-head .pc-id i{font-style:normal; color:#7fc79a}
.pc-x{background:none; border:0; color:#b9b3a4; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px}
.pc-x:hover{color:#fff}

.pc-body{flex:1; overflow-y:auto; padding:18px 16px 6px; display:flex; flex-direction:column; gap:12px}
.pc-msg{max-width:86%; font-size:14px; line-height:1.55; padding:11px 14px; border:1px solid var(--line);
  background:#fff; animation:pcIn .3s var(--ease)}
.pc-msg.me{margin-left:auto; background:var(--ink); color:var(--porcelain); border-color:var(--ink)}
.pc-msg.her{margin-right:auto; border-left:2px solid var(--gold)}
.pc-msg.note{margin:0 auto; background:#f6efe0; border-color:#e6d3ab; font-size:13px; text-align:center;
  max-width:100%; color:#7a5c1d}
@keyframes pcIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* Trois points : le temps de la réponse, on montre qu'on écrit. */
.pc-typing{display:flex; gap:5px; align-items:center; padding:12px 14px; width:62px;
  border:1px solid var(--line); background:#fff; border-left:2px solid var(--gold)}
.pc-typing i{width:6px; height:6px; border-radius:50%; background:var(--taupe); animation:pcDot 1.3s infinite}
.pc-typing i:nth-child(2){animation-delay:.18s}
.pc-typing i:nth-child(3){animation-delay:.36s}
@keyframes pcDot{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* Boutons d'action proposés par la conseillère : ils agissent vraiment. */
.pc-acts{display:flex; flex-wrap:wrap; gap:7px; margin-right:auto; max-width:92%}
.pc-act{background:none; border:1px solid var(--ink); color:var(--ink); padding:8px 14px;
  font-family:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:.25s var(--ease)}
.pc-act:hover{background:var(--ink); color:var(--porcelain)}
.pc-act.gold{border-color:var(--gold); background:var(--gold); color:#fff}
.pc-act.gold:hover{background:#b3924f; border-color:#b3924f}

/* Les entrées de conversation sont des QUESTIONS, pas des appels à l'action :
   en capitales elles hurlent. Trait fin, casse normale, on les lit sans les
   confondre avec les boutons qui agissent. */
.pc-act.pc-start{
  text-transform:none; letter-spacing:0; font-size:13.5px; line-height:1.35;
  border-color:var(--line); color:var(--ink-soft); background:#fff;
  padding:9px 14px; border-radius:16px; text-align:left;
}
.pc-act.pc-start:hover{border-color:var(--ink); background:#fff; color:var(--ink)}

.pc-foot{border-top:1px solid var(--line); padding:12px 14px; background:var(--porcelain-2)}
.pc-form{display:flex; align-items:flex-end; gap:9px}
/* 16 px, pas moins : en dessous, iOS zoome la page entière dès que le champ
   prend le focus, et tout le site part de travers. */
.pc-form textarea{flex:1; resize:none; border:1px solid var(--line); background:#fff; border-radius:2px;
  padding:10px 12px; font-family:inherit; font-weight:300; font-size:16px; color:var(--ink);
  max-height:96px; line-height:1.4}
.pc-form textarea:focus{outline:0; border-color:var(--accent)}
.pc-send{background:var(--ink); border:0; color:var(--porcelain); width:40px; height:40px; flex:0 0 40px;
  cursor:pointer; font-size:16px; transition:.25s}
.pc-send:hover{background:var(--accent)}
.pc-send:disabled{opacity:.4; cursor:default}
.pc-legal{font-size:10px; color:var(--taupe); letter-spacing:.04em; text-align:center; margin-top:8px}

@media (max-width:700px){
  /* Plein écran : sur un téléphone, une fenêtre flottante de 370 px qui se fait
     manger par le clavier n'a aucun sens. La feuille occupe la zone visible,
     et rien d'autre ne bouge. */
  .pil-chat{
    left:0; right:0; top:0; bottom:auto; width:auto; max-width:none;
    height:var(--pc-h, 100%);
    transform:translateY(100%); border:0;
  }
  .pil-chat.open{transform:none}
  .pc-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .pc-body{padding:16px 14px 4px}
  .pc-msg{max-width:90%; font-size:15px}
  .pc-acts{max-width:100%}
  .pc-act{font-size:11.5px; padding:9px 12px}
  .pc-act.pc-start{font-size:14px}
  .pc-foot{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .pc-legal{display:none}
}

/* ── la barre du bas, partagée ──────────────────────────────────────────
   Sur téléphone, « Notre solution » (site.css) est une barre pleine largeur
   posée en bas de l'écran. La bulle ne peut pas se poser dessus : elle se
   réduit à un carré, du même langage que ce bouton — même hauteur, mêmes
   angles vifs, même noir — et prend sa place à gauche. Le raccourci occupe
   tout le reste. Même point de rupture que lui (700 px), sinon les deux
   règles se décalent. */
@media (max-width:700px){
  .pil-chat-btn{
    left:20px; bottom:calc(14px + env(safe-area-inset-bottom));
    /* 51 px : la hauteur de « Notre solution » sur téléphone, où sa marge
       passe de 16 à 15 px. Les deux boutons restent alignés au pixel. */
    width:51px; height:51px;
    box-shadow:0 10px 26px rgba(23,21,15,.22);
  }
  .pil-chat-btn .pc-ico{width:23px; height:23px}
  .pil-chat-btn .pc-n{top:-6px; right:-6px}
  /* La place du carré est toujours réservée : le raccourci commence après. */
  .solution-cta{left:calc(20px + 51px + 10px)}
}
@media (max-width:380px){
  /* Le raccourci garde ses marges : la hauteur ne change pas, seul le bord
     de l'écran se resserre. */
  .pil-chat-btn{left:16px}
  .solution-cta{left:calc(16px + 51px + 8px)}
}

/* Le fond ne défile plus derrière la feuille ouverte. */
html.pc-lock, html.pc-lock body{overflow:hidden; overscroll-behavior:none}

/* Les animations d'ouverture gênent qui les a désactivées. */
@media (prefers-reduced-motion:reduce){
  .pil-chat, .pil-chat-btn, .pc-msg{transition:none; animation:none}
}