/* ==========================================================================
   Bulle « Une question ? » du site (docs/support.md § 9), écrite par support.js.
   Reprend les jetons de site.css (papier, encre, sang-de-bœuf, Public Sans),
   avec une valeur de repli pour chacun. Classes sp-* seulement ; aucun style
   en ligne (CSP du site). Fenêtre ancrée en bas à droite, plein écran sur
   téléphone ; champs à 16 px ; zones tactiles de 44 px. Le formulaire tient
   sans défilement de 320 × 568 à 1 920 × 1 080 : la zone du message prend la
   hauteur qui reste (trois lignes au moins) ; le corps défile seulement si la
   fenêtre devient plus petite (clavier ouvert, erreurs sur un petit écran).
   ========================================================================== */

.sp{
  --sp-ox:var(--ox,oklch(34% 0.11 25));
  --sp-ox-hover:var(--ox-hover,oklch(27% 0.11 25));
  --sp-ink:var(--ink,oklch(22% 0.03 30));
  --sp-muted:var(--muted,oklch(45% 0.025 45));
  --sp-line:var(--line,oklch(87% 0.018 65));
  --sp-line-2:var(--line-2,oklch(73% 0.03 55));
  --sp-card:var(--card,oklch(99% 0.005 80));
  --sp-bg:var(--bg,oklch(96% 0.012 75));
  --sp-side:var(--side,oklch(93.5% 0.014 75));
  --sp-soft:color-mix(in oklch,var(--sp-ox) 7%,var(--sp-card));
  --sp-danger-bg:color-mix(in oklch,var(--sp-ox) 9%,var(--sp-card));
  --sp-r:var(--r,4px);
  --sp-r-lg:var(--r-lg,6px);
  --sp-sans:var(--sans,"Public Sans",system-ui,-apple-system,sans-serif);
  --sp-serif:var(--serif,"Newsreader",Georgia,"Times New Roman",serif);
  --sp-mono:var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);
}
.sp,.sp *{box-sizing:border-box}
.sp [hidden]{display:none !important}

/* Bouton d'ouverture, en bas à droite, au-dessus de la zone sûre du téléphone */
.sp-launch{
  position:fixed;z-index:25;
  right:max(20px,env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 18px 0 15px;
  border:1px solid var(--sp-line-2);border-radius:999px;
  background:var(--sp-card);color:var(--sp-ink);
  font:500 15px/1 var(--sp-sans);
  box-shadow:0 1px 0 rgba(60,20,15,.05),0 10px 24px -16px rgba(60,20,15,.4);
  cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.sp-launch:hover{border-color:var(--sp-ox);background:var(--sp-soft)}
.sp-launch:focus-visible{outline:2px solid var(--sp-ox);outline-offset:3px}
.sp-launch .sp-ic{width:20px;height:20px;color:var(--sp-ox)}
.sp-launch[aria-expanded="true"]{visibility:hidden}

.sp-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fenêtre */
.sp-dialog{
  position:fixed;
  inset:auto max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) auto;
  margin:0;padding:0;
  width:min(410px,calc(100vw - 40px));
  height:min(680px,calc(100dvh - 40px));
  max-width:none;max-height:none;
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg);
  background:var(--sp-card);color:var(--sp-ink);
  font:400 15px/1.5 var(--sp-sans);
  box-shadow:0 1px 0 rgba(60,20,15,.05),0 24px 48px -28px rgba(60,20,15,.45);
  overflow:hidden;
}
.sp-dialog::backdrop{background:rgba(40,22,16,.16)}
.sp-dialog[open]{display:flex;animation:sp-in .2s cubic-bezier(.2,.7,.2,1)}
@keyframes sp-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.sp-dialog[open]{animation:none}.sp-launch{transition:none}}
html.sp-lock{overflow:hidden}

.sp-panel{display:flex;flex-direction:column;width:100%;min-height:0;flex:1}
/* En-tête : titre et fermeture sur une ligne (le bouton de 44 px déborde de la ligne sans la grandir), présentation
   de l'éditeur dessous, sur toute la largeur */
.sp-head{flex:none;padding:16px 12px 14px 20px;border-bottom:1px solid var(--sp-line)}
.sp-head-row{display:flex;align-items:center;gap:12px}
.sp-title{flex:1;min-width:0;margin:0;font:400 22px/1.15 var(--sp-serif);letter-spacing:-.015em;color:var(--sp-ink)}
.sp-sub{margin:6px 8px 0 0;font-size:13.5px;line-height:1.45;color:var(--sp-muted)}
.sp-close{
  flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -4px -10px 0;
  border:0;border-radius:var(--sp-r);background:transparent;color:var(--sp-muted);cursor:pointer;
}
.sp-close:hover{background:var(--sp-side);color:var(--sp-ink)}
.sp-close .sp-ic{width:18px;height:18px}

/* Corps : seule zone qui défile (si la fenêtre devient trop petite) ; le formulaire en occupe toute la hauteur */
.sp-body{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 16px}
.sp-foot{flex:none;border-top:1px solid var(--sp-line);background:var(--sp-bg);padding:12px 20px calc(14px + env(safe-area-inset-bottom))}

/* Formulaire */
.sp-form{flex:1 0 auto;display:flex;flex-direction:column;gap:12px}
.sp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sp-field{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Zone du message : la hauteur libre de la fenêtre, trois lignes au moins (16 px × 1,45 × 3 + marges) */
.sp-grow{flex:1 1 auto}
.sp-grow .sp-textarea{flex:1 1 0;min-height:92px;resize:none}
.sp-label{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--sp-ink)}
.sp-input,.sp-textarea{
  width:100%;min-width:0;
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r);
  background:#fff;color:var(--sp-ink);
  font:400 16px/1.45 var(--sp-sans);
}
.sp-input{height:44px;padding:0 12px}
.sp-textarea{min-height:120px;padding:10px 12px;resize:vertical}
.sp-foot .sp-textarea{min-height:64px;max-height:32dvh;field-sizing:content}
.sp-input:focus,.sp-textarea:focus{outline:none;border-color:var(--sp-ox);box-shadow:0 0 0 3px color-mix(in oklch,var(--sp-ox) 18%,transparent)}
.sp-input[aria-invalid="true"],.sp-textarea[aria-invalid="true"]{border-color:var(--sp-ox)}
.sp-field-error{margin:0;font-size:13px;font-weight:600;color:var(--sp-ox)}
.sp-counter{margin:0;align-self:flex-end;font:400 12px/1 var(--sp-mono);color:var(--sp-muted)}
.sp-counter.sp-over{color:var(--sp-ox);font-weight:500}
.sp-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sp-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--sp-muted)}
.sp-note a{color:var(--sp-ox);text-decoration:underline;text-underline-offset:2px}
.sp-alert{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 12px;border:1px solid color-mix(in oklch,var(--sp-ox) 28%,transparent);border-radius:var(--sp-r);background:var(--sp-danger-bg);color:var(--sp-ox);font-size:13.5px;font-weight:600;line-height:1.45}
.sp-alert a{color:var(--sp-ox);text-decoration:underline;text-underline-offset:2px}
.sp-info{margin:0 0 4px;padding:10px 12px;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-bg);font-size:13.5px;line-height:1.5;color:var(--sp-ink)}

/* Boutons */
.sp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.sp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border:0;border-radius:var(--sp-r);
  background:var(--sp-ox);color:#fff;font:500 15px/1 var(--sp-sans);white-space:nowrap;cursor:pointer;
}
.sp-btn:hover{background:var(--sp-ox-hover)}
.sp-btn:disabled{opacity:.55;cursor:not-allowed}
.sp-btn .sp-ic{width:16px;height:16px}
.sp-ghost{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;margin-left:-10px;
  border:0;border-radius:var(--sp-r);background:transparent;color:var(--sp-ink);
  font:500 14px/1.2 var(--sp-sans);cursor:pointer;
}
.sp-ghost:hover{background:var(--sp-side)}
.sp-ghost:disabled{opacity:.55;cursor:not-allowed}
.sp-ghost .sp-ic{color:var(--sp-ox)}
.sp-link{position:relative;padding:0;border:0;background:none;color:var(--sp-ox);font:500 13.5px/1.4 var(--sp-sans);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* Zone tactile de 44 px sans changer la ligne */
.sp-link::after{content:"";position:absolute;inset:-12px -6px}
.sp-push{margin-left:auto}
.sp :focus-visible{outline:2px solid var(--sp-ox);outline-offset:2px}

/* Images en attente d'envoi */
.sp-previews{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:4px 0 0;list-style:none}
.sp-preview{position:relative;width:64px;height:64px;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-side)}
.sp-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--sp-r) - 1px)}
.sp-preview .sp-wait{display:grid;place-items:center;width:100%;height:100%;font:400 11px/1 var(--sp-mono);color:var(--sp-muted)}
.sp-remove{
  position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--sp-line-2);border-radius:50%;background:var(--sp-card);color:var(--sp-ink);cursor:pointer;
}
.sp-remove::after{content:"";position:absolute;inset:-8px}
.sp-remove .sp-ic{width:14px;height:14px}

/* Fil de l'échange */
.sp-thread{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.sp-day{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font:400 11px/1 var(--sp-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sp-muted)}
.sp-day::before,.sp-day::after{content:"";flex:1;height:1px;background:var(--sp-line)}
.sp-day:first-child{margin-top:0}
.sp-msg{display:flex;flex-direction:column;align-items:flex-start;margin-top:12px}
.sp-msg.sp-mine{align-items:flex-end}
.sp-meta{display:flex;align-items:center;gap:8px;max-width:100%;margin:0 2px 4px;font-size:12.5px;color:var(--sp-muted)}
.sp-meta b{min-width:0;overflow:hidden;isolation:isolate;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--sp-ink)}
.sp-meta time{flex:none}
/* Marque des réponses du support : pastille à l'accent, qu'aucun nom saisi ne reproduit */
.sp-mark{flex:none;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 6px;border-radius:999px;background:var(--sp-ox);color:#fff;font-size:11.5px;font-weight:600;line-height:1}
.sp-mark .sp-ic{width:12px;height:12px}
.sp-mine .sp-meta{flex-direction:row-reverse}
.sp-bubble{
  max-width:88%;margin:0;padding:9px 13px;
  border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-bg);
  font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
  /* Marques combinantes en excès (texte « Zalgo ») coupées au bord de la bulle */
  overflow:hidden;isolation:isolate;
}
.sp-mine .sp-bubble{border-color:color-mix(in oklch,var(--sp-ox) 20%,var(--sp-line));background:var(--sp-soft)}
.sp-bubble a{color:var(--sp-ox);text-decoration:underline;text-underline-offset:2px}
.sp-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.sp-mine .sp-thumbs{justify-content:flex-end}
.sp-thumb{display:block;width:88px;height:88px;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-side);overflow:hidden}
.sp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sp-thumb:hover{border-color:var(--sp-line-2)}
.sp-status{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--sp-muted);text-align:center}
/* Sous le dernier message : où arrive la réponse, et « Nouvelle conversation » */
.sp-notice{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--sp-muted);text-align:center;overflow-wrap:anywhere}
.sp-notice .sp-link{font-size:13px}
.sp-composer{display:flex;flex-direction:column;gap:8px}
.sp-composer .sp-actions{gap:8px}
.sp-composer .sp-note{margin-top:2px}

/* Téléphone : plein écran, zones sûres comprises */
@media (max-width:560px){
  .sp-launch{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}
  .sp-dialog{
    inset:0;width:100%;height:100%;max-height:100dvh;border:0;border-radius:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .sp-dialog::backdrop{background:transparent}
  .sp-head{padding:14px 10px 12px 16px}
  .sp-body{padding:14px 16px}
  .sp-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  .sp-title{font-size:21px}
  /* Prénom et nom restent côte à côte (deux champs courts) : une ligne de gagnée */
  .sp-row{gap:10px}
}
@media (max-width:360px){
  .sp-launch{padding:0 14px}
  .sp-launch-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sp-title{font-size:20px}
  .sp-sub{margin-right:0;font-size:13px}
  .sp-note{font-size:12px}
  /* « Joindre une capture » et « Envoyer » sur une même ligne jusqu'à 320 px */
  .sp-actions{column-gap:8px}
  .sp-btn{padding:0 14px}
}
/* Fenêtre basse (petit téléphone) : zone du message de deux lignes au moins, espaces resserrés */
@media (max-height:620px){
  .sp-form{gap:10px}
  .sp-grow .sp-textarea{min-height:68px}
}
/* Fenêtre très basse (clavier ouvert quand le navigateur réduit la page, téléphone à l'horizontale) : la fenêtre
   défile d'un bloc, en-tête compris, pour laisser la place au champ actif et au bouton d'envoi */
@media (max-height:450px){
  .sp-panel{overflow-y:auto;overscroll-behavior:contain}
  .sp-body{flex:none;overflow:visible}
  .sp-grow .sp-textarea{flex:none;min-height:92px}
}

/* Pied de page : la bulle ne recouvre pas ses derniers liens */
@media (max-width:760px){.ftr{padding-bottom:84px}}
@media print{.sp{display:none}}