/* ============================================================
   LIQUID GLASS — Système de design iOS 26
   Tokens partagés (site public + espace admin)
   ============================================================ */

/* ------------------------------------------------------------
   L'attribut « hidden » doit masquer, toujours.

   Le navigateur le traduit par « display:none », mais cette règle
   vient de sa feuille par défaut : la moindre règle à nous portant
   un « display » l'emporte. La fenêtre de discussion, déclarée
   « display:flex », restait donc affichée en permanence — ouverte
   dès l'arrivée sur le site, et insensible à sa croix de fermeture.
   Le JavaScript posait bien l'attribut ; c'est la feuille de style
   qui le rendait sans effet.

   Six éléments étaient dans ce cas. Une règle pour tous.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

:root {
  /* ===== Palette « Site public » — Marine profond & Or ===== */
  --navy-900: #060f22;   /* fond de page, marine très sombre */
  --navy-800: #0a1f44;   /* marine principal */
  --navy-700: #0e2952;   /* marine moyen */
  --navy-600: #143264;   /* marine clair */
  --navy-card: #0d2148;  /* marine des cartes/blocs */

  --bg: #060f22;
  --bg-2: #0a1f44;

  --ink: #e7ecf5;                    /* blanc cassé, jamais blanc pur */
  --ink-dim: #aab6cc;                /* secondaire adouci */
  --ink-faint: #6b7a96;              /* discret, légendes */

  --gold: #d4a526;                   /* or principal */
  --gold-2: #b8870f;                 /* or profond (dégradés, ombres) */
  --gold-light: #f0c14b;             /* or clair (survol, highlights) */
  --gold-deep: #b8870f;
  --gold-halo: rgba(212, 165, 38, 0.25);

  --teal: #1fd1a5;
  --violet: #7c5cff;
  --rose: #ff6bb3;
  --danger: #e24b4a;

  /* Verre — posé sur le marine */
  --glass: rgba(20, 50, 100, 0.38);
  --glass-strong: rgba(13, 33, 72, 0.72);
  --glass-border: rgba(212, 165, 38, 0.16);
  --glass-border-soft: rgba(231, 236, 245, 0.09);
  --glass-blur: blur(26px) saturate(160%);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Rayons généreux (16-22px) & rythme */
  --r-xl: 22px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  --font-display: 'Sora', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-body: -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease-ios: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   MODE CLAIR — palette « Espace connecté » (marine & or, version claire)
   ============================================================ */
[data-theme="light"] {
  --bg: #f4f6f9;
  --bg-2: #ffffff;

  --ink: #1a2744;        /* texte principal */
  --ink-dim: #4a5568;    /* secondaire */
  --ink-faint: #8a9ab5;  /* discret */
  --line: #e8ecf2;
  --line-2: #c4cdd9;

  --gold: #c8960c;       /* or ambré de l'espace connecté */
  --gold-2: #e8b423;     /* or clair */
  --gold-light: #e8b423;
  --gold-halo: rgba(200, 150, 12, 0.22);

  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #e8ecf2;
  --glass-border-soft: #f0f3f7;
  --glass-blur: blur(0px);
  --glass-shadow: 0 6px 24px rgba(26, 39, 68, 0.07);
  --glass-inset: none;
}
[data-theme="light"] .aurora {
  background:
    radial-gradient(ellipse 80% 55% at 80% -10%, rgba(200, 150, 12, 0.07), transparent 62%),
    #f4f6f9;
}
[data-theme="light"] .aurora::before,
[data-theme="light"] .aurora::after { display: none; }
[data-theme="light"] .input { background: #fafbfc; border-color: var(--line); }
[data-theme="light"] .input:focus { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-halo); }
[data-theme="light"] .side-nav a:hover,
[data-theme="light"] tbody tr:hover { background: #fafbfc; }
[data-theme="light"] .stat .s-ico,
[data-theme="light"] .thumb-ph,
[data-theme="light"] .param-group .pg-count { background: #f4f6f9; }
[data-theme="light"] .switch input { background: var(--line-2); }
[data-theme="light"] .btn-glass { color: var(--ink); background: #fff; border: 1px solid var(--line); }
[data-theme="light"] .topbar,
[data-theme="light"] .tabbar { box-shadow: 0 6px 24px rgba(26, 39, 68, 0.07); }

/* Bouton bascule de thème */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; font-size: 17px; flex-shrink: 0;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform 0.3s var(--ease-ios), background 0.3s;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(-15deg); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Fond aurora animé ---------- */
.aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 70% -10%, rgba(212, 165, 38, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 110%, rgba(20, 50, 100, 0.55), transparent 62%),
    var(--bg);
}
.aurora::before, .aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(110px);
  animation: drift 26s var(--ease-ios) infinite alternate;
}
.aurora::before {
  width: 55vw; height: 55vw; top: -18vw; right: -12vw;
  background: radial-gradient(circle, rgba(212, 165, 38, 0.18), transparent 65%);
}
.aurora::after {
  width: 48vw; height: 48vw; bottom: -20vw; left: -10vw;
  background: radial-gradient(circle, rgba(20, 50, 100, 0.55), transparent 65%);
  animation-delay: -13s;
}
@keyframes drift {
  to { transform: translate(6vw, 5vh) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Surfaces en verre ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--r-lg);
}
.glass-strong {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--r-lg);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-ios), box-shadow 0.35s var(--ease-ios), background 0.3s;
}
.btn:active { transform: scale(0.96); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #0a1f44;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(212, 165, 38, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(212, 165, 38, 0.42), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-glass {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  color: var(--ink);
  box-shadow: var(--glass-inset);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.btn-danger { background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.35); color: #ffb1b1; }
.btn-danger:hover { background: rgba(255, 107, 107, 0.24); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-dim); letter-spacing: 0.02em; }
.input {
  width: 100%; padding: 13px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border-soft);
  color: var(--ink); outline: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus {
  border-color: rgba(212, 165, 38, 0.65);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(212, 165, 38, 0.25);
}
select.input option { background: var(--bg-2); }
textarea.input { resize: vertical; min-height: 110px; }

/* ---------- Badges & divers ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
}
.badge-gold { background: rgba(212, 165, 38, 0.14); border-color: rgba(212, 165, 38, 0.32); color: var(--gold); }
.badge-teal { background: rgba(62, 219, 193, 0.12); border-color: rgba(62, 219, 193, 0.3); color: var(--teal); }
.badge-violet { background: rgba(139, 124, 246, 0.14); border-color: rgba(139, 124, 246, 0.35); color: #b9aefc; }
.badge-rose { background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.3); color: var(--rose); }
.badge-danger { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.3); color: #ffb1b1; }

.flash {
  padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 20px;
  background: rgba(62, 219, 193, 0.1); border: 1px solid rgba(62, 219, 193, 0.35); color: var(--teal);
  font-weight: 500; font-size: 14px;
}
.flash.error { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.35); color: #ffb1b1; }

::selection { background: rgba(212, 165, 38, 0.32); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

/* ============================================================
   ✦✦ COUCHE DE RAFFINEMENT — texture, lumière, matière
   ============================================================ */

/* --- Grain fin : donne de la matière au marine (effet « imprimé ») --- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { opacity: .02; }

/* --- Filets dorés dégradés : motif de luxe récurrent --- */
.hairline {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(212,165,38,.55) 20%, rgba(240,193,75,.85) 50%, rgba(212,165,38,.55) 80%, transparent);
}

/* --- Boutons or : relief, profondeur et éclat qui balaie --- */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent);
  pointer-events: none;
}
.btn-gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .65s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.btn-gold:hover::after { left: 125%; }

/* --- Boutons verre : liseré doré au survol --- */
.btn-glass { transition: all .3s cubic-bezier(0.4,0,0.2,1); }
.btn-glass:hover { border-color: rgba(212,165,38,.45); box-shadow: 0 6px 20px rgba(212,165,38,.16); }

/* --- Cartes : lumière rasante sur l'arête supérieure --- */
.glass { position: relative; }
.glass::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,38,.30), transparent);
  pointer-events: none;
}
[data-theme="light"] .glass::before { background: linear-gradient(90deg, transparent, rgba(200,150,12,.22), transparent); }

/* --- Champs : anneau doré au focus --- */
.input { transition: border-color .25s, box-shadow .25s, background .25s; }
.input:focus { border-color: rgba(212,165,38,.6); box-shadow: 0 0 0 4px rgba(212,165,38,.16); outline: none; }

/* --- Barre de défilement assortie --- */
* { scrollbar-width: thin; scrollbar-color: rgba(212,165,38,.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(6,15,34,.35); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,165,38,.65), rgba(184,135,15,.55));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f0c14b, #d4a526); background-clip: padding-box; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #eef1f6; }

/* --- Sélection de texte --- */
::selection { background: rgba(212,165,38,.32); color: inherit; }

/* ============================================================
   ✦ VERROU DE PALETTE — le site public garde son ambiance
   marine & or premium, quel que soit le thème mémorisé.
   ============================================================ */
[data-space="public"],
[data-space="public"][data-theme="light"],
[data-space="public"][data-theme="dark"] {
  --bg: #060f22;
  --bg-2: #0a1f44;
  --ink: #e7ecf5;
  --ink-dim: #aab6cc;
  --ink-faint: #6b7a96;
  --gold: #d4a526;
  --gold-2: #b8870f;
  --gold-light: #f0c14b;
  --gold-halo: rgba(212, 165, 38, 0.25);
  --glass: rgba(20, 50, 100, 0.38);
  --glass-strong: rgba(13, 33, 72, 0.72);
  --glass-border: rgba(212, 165, 38, 0.16);
  --glass-border-soft: rgba(231, 236, 245, 0.09);
  --glass-blur: blur(26px) saturate(160%);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Le fond et les blocs restent marine sur les pages publiques */
[data-space="public"] .aurora {
  background:
    radial-gradient(ellipse 85% 55% at 75% -8%, rgba(212, 165, 38, 0.10), transparent 60%),
    radial-gradient(ellipse 75% 60% at 12% 108%, #0e2952, transparent 62%),
    linear-gradient(178deg, #060f22 0%, #0a1f44 55%, #0e2952 100%) !important;
}
[data-space="public"] .aurora::before,
[data-space="public"] .aurora::after { display: block; }
[data-space="public"] .panel,
[data-space="public"] .glass,
[data-space="public"] .glass-strong {
  background: var(--glass); border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
[data-space="public"] .input { background: rgba(231, 236, 245, 0.05); color: var(--ink); }
[data-space="public"] .btn-glass { color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-border); }
/* Le bouton de bascule clair/sombre est désormais visible partout */

/* ============================================================
   ✦✦✦ FINITIONS MÉTALLIQUES
   Or poli brillant & marine métallisé : dégradés à bandes de
   réflexion, comme sur du métal réellement poli.
   ============================================================ */
:root {
  /* Or métallique brillant — bandes sombres/claires = reflets */
  --metal-gold: linear-gradient(135deg,
      #8a6a12 0%, #c9971f 11%, #f3d270 25%,
      #fff3c4 35%, #f0c14b 45%, #d4a526 56%,
      #a8790f 68%, #e6bf58 82%, #b8870f 100%);
  --metal-gold-soft: linear-gradient(135deg,
      #b8870f 0%, #d4a526 22%, #f0c14b 40%,
      #ffe9a8 50%, #d4a526 64%, #b8870f 100%);
  /* Marine métallisé — reflet froid sur bleu profond */
  --metal-navy: linear-gradient(135deg,
      #06122b 0%, #0e2952 16%, #1a3f7a 32%,
      #27548f 41%, #12305e 54%, #0a1f44 70%,
      #16386e 86%, #071630 100%);
  --metal-navy-deep: linear-gradient(160deg,
      #071730 0%, #0e2952 26%, #16386e 44%,
      #0a1f44 62%, #0d2148 80%, #060f22 100%);
  /* Reflets internes qui donnent l'épaisseur du métal */
  --metal-inset: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.28);
  --metal-inset-navy: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45);
}

/* --- Boutons or : métal poli --- */
.btn-gold {
  background: var(--metal-gold) !important;
  color: #23180a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow: var(--metal-inset), 0 8px 22px rgba(184,135,15,.34) !important;
  border: 1px solid rgba(138,106,18,.55) !important;
}
.btn-gold:hover {
  background: var(--metal-gold-soft) !important;
  box-shadow: var(--metal-inset), 0 12px 30px rgba(212,165,38,.46) !important;
}
.btn-gold::before { background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); }

/* --- Pastilles & médaillons dorés --- */
.brand-dot, .badge-gold.solid, .nav-badge {
  background: var(--metal-gold) !important;
  color: #23180a !important;
  box-shadow: var(--metal-inset), 0 4px 12px rgba(184,135,15,.3) !important;
}

/* --- Surfaces marine métallisées --- */
.metal-navy {
  background: var(--metal-navy) !important;
  box-shadow: var(--metal-inset-navy), 0 10px 34px rgba(4,12,30,.42) !important;
  border: none !important;
  color: #e7ecf5 !important;
}

/* --- Filet métallique (séparateur brillant) --- */
.hairline, .metal-rule {
  background: linear-gradient(90deg, transparent, #8a6a12 12%, #f0c14b 34%,
              #fff3c4 50%, #f0c14b 66%, #8a6a12 88%, transparent) !important;
  height: 1.5px;
}

/* Logo de l'entreprise — rendu image cohérent partout */
img.brand-dot{width:38px;height:38px;object-fit:contain;border-radius:10px;padding:0;background:none;display:inline-block;vertical-align:middle}
img.login-logo-img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto}
img.reg-logo{width:30px;height:30px;object-fit:contain;vertical-align:middle;display:inline-block}

/* Bouton d'installation de l'application (site public uniquement).
   Volontairement discret : une pastille sobre qui se déploie au survol, pour
   proposer l'installation sans détourner l'attention du contenu. */
.pwa-install-btn{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:inline-flex; align-items:center; gap:0;
  height:44px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(212,165,38,.45);
  background:rgba(10,16,32,.82); color:#e9c15c;
  font-weight:600; font-size:13.5px; letter-spacing:.2px;
  box-shadow:0 6px 22px rgba(0,0,0,.32);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:.9; transition:all .28s cubic-bezier(.2,.9,.3,1.2);
  animation:pwaApparait .5s ease both;
}
.pwa-install-btn .pwa-install-ico{
  font-size:17px; line-height:1; flex-shrink:0;
  transition:transform .28s ease;
}
.pwa-install-btn .pwa-install-txt{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .3s ease, opacity .22s ease, margin .3s ease;
}
.pwa-install-btn:hover, .pwa-install-btn:focus-visible{
  opacity:1; border-color:rgba(212,165,38,.9); color:#0a1020;
  background:linear-gradient(135deg,#e9c15c,#d4a526);
  box-shadow:0 10px 28px rgba(212,165,38,.4);
}
.pwa-install-btn:hover .pwa-install-txt,
.pwa-install-btn:focus-visible .pwa-install-txt{ max-width:190px; opacity:1; margin-left:9px; }
.pwa-install-btn:hover .pwa-install-ico{ transform:translateY(2px); }
.pwa-install-btn:active{ transform:scale(.96); }
@keyframes pwaApparait{ from{ opacity:0; transform:translateY(14px) scale(.9) } to{ opacity:.9; transform:none } }

/* Sur mobile, le libellé reste visible : le survol n'existe pas au doigt */
@media (max-width:640px){
  .pwa-install-btn{ bottom:18px; right:16px; height:40px; padding:0 15px; font-size:12.5px; }
  .pwa-install-btn .pwa-install-txt{ max-width:190px; opacity:1; margin-left:8px; }
}
@media (prefers-reduced-motion:reduce){
  .pwa-install-btn, .pwa-install-btn *{ transition:none; animation:none }
}

/* Fenêtre d'aide à l'installation PWA */
.pwa-aide{ position:fixed; inset:0; z-index:10000; background:rgba(2,7,20,.75);
  display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px) }
.pwa-aide-carte{ position:relative; max-width:380px; width:100%; background:#fff; color:#0a1f44;
  border-radius:20px; padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  border:1px solid rgba(10,31,68,.15) }
.pwa-aide-titre{ font-size:19px; font-weight:800; margin-bottom:14px; color:#0a1f44 }
#pwa-aide-texte{ font-size:14.5px; line-height:1.7; color:#334155 }
#pwa-aide-texte strong{ color:#0a1f44 }
.pwa-aide-fermer{ position:absolute; top:14px; right:16px; border:none; background:transparent;
  font-size:18px; cursor:pointer; color:#94a3b8; line-height:1 }
.pwa-aide-fermer:hover{ color:#0a1f44 }

/* ============================================================
   ESPACE CLIENT — champs de saisie sur fond blanc (lisibilité + confort)
   ============================================================ */
[data-space="app"] .input{
  background:#ffffff;
  border:1px solid #d9dfea;
  color:#0f1b30;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(10,31,68,.04), inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .2s, box-shadow .2s, background .2s;
  font-size:15px;
}
[data-space="app"] .input::placeholder{ color:#9aa3b2; }
[data-space="app"] .input:hover{ border-color:#c3ccdb; }
[data-space="app"] .input:focus{
  background:#ffffff;
  border-color:var(--gold, #d4a526);
  box-shadow:0 0 0 3px rgba(212,165,38,.18), 0 2px 8px rgba(10,31,68,.06);
}
[data-space="app"] textarea.input{ min-height:120px; line-height:1.6; padding:14px 16px; }
[data-space="app"] select.input option{ background:#fff; color:#0f1b30; }
[data-space="app"] .input:disabled{ background:#f1f3f7; color:#8a94a6; }

/* Zone de saisie de la messagerie : fond blanc + relief léger */
[data-space="app"] .chat-composer{
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  border-radius:18px;
  padding:8px;
}
[data-space="app"] .chat-composer .input{
  background:#fff;
  border-radius:12px;
}
[data-space="app"] .chat-attach{
  background:#fff;
  border:1px solid #d9dfea;
  border-radius:12px;
  color:#0f1b30;
}
[data-space="app"] .chat-attach.has{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   GALERIE — mosaïque filtrable et visionneuse
   ============================================================ */
.gal-filtres{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.gf{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:26px;
  cursor:pointer;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:all .24s cubic-bezier(.4,0,.2,1)}
.gf:hover{color:#fff;border-color:rgba(212,165,38,.45);transform:translateY(-2px)}
.gf.actif{color:#0a1020;background:linear-gradient(135deg,#e9c15c,#d4a526);
  border-color:transparent;box-shadow:0 8px 24px rgba(212,165,38,.32)}
.gf span{font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;
  background:rgba(0,0,0,.22)}
.gf.actif span{background:rgba(10,16,32,.2)}

/* Visionneuse */
/* L'attribut « hidden » doit l'emporter sur l'affichage en flex, sinon la
   visionneuse resterait ouverte en permanence. */
.visio[hidden]{display:none !important}
.visio{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:26px;background:rgba(3,7,16,.96);backdrop-filter:blur(14px);
  animation:visioEntre .3s ease}
@keyframes visioEntre{from{opacity:0}to{opacity:1}}
.vi-scene{margin:0;max-width:min(1180px,92vw);max-height:88vh;display:flex;
  flex-direction:column;align-items:center;gap:16px}
.vi-scene img{max-width:100%;max-height:74vh;border-radius:18px;display:block;
  box-shadow:0 30px 90px rgba(0,0,0,.7);transition:opacity .3s}
.vi-scene figcaption{text-align:center}
.vi-scene figcaption strong{display:block;font-size:18px;color:#fff}
.vi-scene figcaption span{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:5px}
.vi-scene figcaption em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.14em;
  color:#f0c14b;margin-top:9px}
.vi-fermer,.vi-prec,.vi-suiv{position:absolute;z-index:2;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:50%;display:grid;place-items:center;transition:all .2s}
.vi-fermer{top:22px;right:22px;width:44px;height:44px;font-size:17px}
.vi-prec,.vi-suiv{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:28px;line-height:1}
.vi-prec{left:22px} .vi-suiv{right:22px}
.vi-fermer:hover,.vi-prec:hover,.vi-suiv:hover{background:rgba(240,193,75,.9);color:#0a1020;
  border-color:transparent}
.vi-prec:hover,.vi-suiv:hover{transform:translateY(-50%) scale(1.08)}

/* ============================================================
   VIDÉOS — cadre lumineux, lecture au clic
   ============================================================ */
/* ------------------------------------------------------------------
   Lecteur vidéo.
   Le lecteur occupe tout le cadre : c'est lui qui affiche sa vignette,
   ses commandes et son bouton de son. Notre rôle se limite à l'habiller
   — un liseré doré, une ombre, et un léger soulèvement au survol.
   ------------------------------------------------------------------ */
.video-item{position:relative;margin:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 22px rgba(0,0,0,.26);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),
             box-shadow .32s, border-color .32s}
.video-item:hover{transform:translateY(-5px);border-color:rgba(240,193,75,.34);
  box-shadow:0 20px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(240,193,75,.14)}

.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050b16}
.video-frame iframe,
.video-frame video{width:100%;height:100%;border:0;display:block;background:#050b16}

/* Liseré intérieur : il donne du relief sans masquer les commandes du
   lecteur, d'où « pointer-events: none ». */
.vf-cadre{position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:18px 18px 0 0;
  box-shadow:inset 0 0 0 1px rgba(240,193,75,.2), inset 0 0 30px rgba(240,193,75,.06)}

/* Repère « son coupé » : discret, il s'efface au survol pour ne pas gêner. */
/* En haut à gauche : le bas du cadre est occupé par les commandes du lecteur,
   un repère posé là masquerait le bouton de lecture. */
.vf-muet{position:absolute;left:10px;top:10px;z-index:4;pointer-events:none;
  padding:4px 11px;border-radius:16px;font-size:10.5px;white-space:nowrap;
  color:rgba(255,255,255,.82);background:rgba(6,12,26,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  opacity:.9;transition:opacity .25s}
.video-item:hover .vf-muet{opacity:0}
/* Une fois le son rétabli — ou le message lu — le repère disparaît pour de bon. */
.vf-muet.parti{opacity:0 !important;transform:translateY(-6px);
  transition:opacity .4s ease, transform .4s ease}
.video-item figcaption{padding:13px 16px 15px}
.video-item figcaption h3{margin:0;font-size:14.5px;color:#fff;line-height:1.35}
.video-item figcaption p{margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.6);
  line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

@media (max-width:700px){
  .vi-prec,.vi-suiv{width:42px;height:42px;font-size:22px}
  .vi-prec{left:8px} .vi-suiv{right:8px}
}

/* ============================================================
   FENÊTRE DE CONFIRMATION
   Remplace celle du navigateur : traduisible, lisible, et elle
   laisse la place d'expliquer les conséquences d'une action.
   ============================================================ */
.cfm{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,9,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .2s ease}
.cfm.ouvert{opacity:1}
.cfm-carte{width:100%;max-width:410px;padding:28px 26px 22px;border-radius:24px;text-align:center;
  background:linear-gradient(160deg,rgba(18,28,52,.99),rgba(10,17,34,.99));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(18px) scale(.94);opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3), opacity .22s ease}
.cfm.ouvert .cfm-carte{transform:none;opacity:1}
.cfm-carte.danger{border-color:rgba(248,113,113,.32)}
.cfm-ico{width:62px;height:62px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;
  font-size:27px;background:rgba(240,193,75,.13);border:1px solid rgba(240,193,75,.28)}
.cfm-carte.danger .cfm-ico{background:rgba(248,113,113,.13);border-color:rgba(248,113,113,.3);
  animation:cfmPulse 2s ease-in-out infinite}
@keyframes cfmPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.34)}
  50%{box-shadow:0 0 0 12px rgba(248,113,113,0)}}
.cfm-carte h3{margin:0 0 8px;font-size:18.5px;color:#eaf0fb;line-height:1.35}
.cfm-carte p{margin:0 0 22px;font-size:13.5px;color:#9fb0cc;line-height:1.6}
.cfm-btns{display:flex;gap:10px}
.cfm-btns button{flex:1;padding:12px 18px;border-radius:14px;cursor:pointer;font-size:14px;
  font-weight:700;border:none;transition:transform .16s, filter .16s}
.cfm-btns button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.cfm-non{color:#c3cee2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12) !important}
.cfm-oui{color:#0a1020;background:linear-gradient(135deg,#e9c15c,#d4a526)}
.cfm-oui.danger{color:#fff;background:linear-gradient(135deg,#f87171,#dc2626)}

/* ============================================================
   PROGRESSION D'UN ENVOI
   Sans retour visuel, l'utilisateur croit la page figée et
   clique une seconde fois.
   ============================================================ */
.envoi{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,9,20,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .22s ease}
.envoi.ouvert{opacity:1}
.env-carte{width:100%;max-width:340px;padding:30px 26px 24px;border-radius:26px;text-align:center;
  background:linear-gradient(160deg,rgba(18,28,52,.99),rgba(10,17,34,.99));
  border:1px solid rgba(240,193,75,.22);box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.94);transition:transform .28s cubic-bezier(.2,.9,.3,1.3)}
.envoi.ouvert .env-carte{transform:none}
.env-ico{position:relative;width:112px;height:112px;margin:0 auto 18px}
.env-anneau{width:100%;height:100%;transform:rotate(-90deg)}
.ea-fond{fill:none;stroke:rgba(255,255,255,.08);stroke-width:8}
.ea-arc{fill:none;stroke:url(#env-grad);stroke-width:8;stroke-linecap:round;
  stroke:#f0c14b;transition:stroke-dashoffset .25s ease}
.env-pc{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display,inherit);font-size:26px;font-weight:800;color:#eaf0fb;letter-spacing:-.03em}
.env-pc i{font-style:normal;font-size:13px;color:#9fb0cc;margin-left:1px}
.env-carte strong{display:block;font-size:15px;color:#eaf0fb}
.env-carte > span{display:block;font-size:12.5px;color:#9fb0cc;margin-top:5px}
.env-jauge{height:5px;border-radius:4px;margin-top:16px;overflow:hidden;background:rgba(0,0,0,.3)}
.env-jauge span{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#e9c15c,#d4a526);transition:width .25s ease}

@media (prefers-reduced-motion: reduce){
  .cfm-carte,.env-carte{transition:none;transform:none}
  .cfm-carte.danger .cfm-ico{animation:none}
}

/* Détails d'une prestation sur le site */
.sc-points{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:7px}
.sc-points li{position:relative;padding-left:22px;font-size:13.5px;
  color:rgba(255,255,255,.72);line-height:1.5}
.sc-points li::before{content:'✓';position:absolute;left:0;top:0;color:#e9c15c;font-weight:700}
.sc-prix{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;font-weight:700;color:#f0c14b}

/* Vidéo impossible à lire dans le cadre */
.vf-secours{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;padding:22px;text-align:center;
  background:rgba(6,12,26,.94)}
.vf-secours p{margin:0;font-size:13.5px;color:rgba(255,255,255,.7)}
.vf-secours a{padding:10px 20px;border-radius:12px;text-decoration:none;font-size:13.5px;
  font-weight:700;color:#0a1020;background:linear-gradient(135deg,#e9c15c,#d4a526)}

/* ============================================================
   DIAPORAMA
   Les photos d'une même prestation défilent ensemble, annoncées
   par le nom de l'album. Trois effets se superposent : un fondu,
   un léger glissement, et un zoom lent sur l'image affichée —
   c'est ce zoom qui donne l'impression de vie.
   ============================================================ */
.diapo{position:relative;margin-bottom:30px}
/* Carte plus basse qu'auparavant, et surtout limitée en hauteur : sur un grand
   écran, un rapport 16/9 donnait une scène de 700 px qui remplissait la page. */
.dp-scene{position:relative;aspect-ratio:16/9;max-height:52vh;border-radius:20px;
  overflow:hidden;background:#050b16;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.46)}
@media (max-width:760px){ .dp-scene{aspect-ratio:4/3;max-height:none;border-radius:16px} }

.dp-vue{position:absolute;inset:0;margin:0;opacity:0;
  transform:translateX(0) scale(1.06);
  transition:opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none}
.dp-vue.on{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}

/* Positions de départ et d'arrivée du glissement */
.dp-vue.entre-droite{opacity:0;transform:translateX(6%) scale(1.08)}
.dp-vue.entre-gauche{opacity:0;transform:translateX(-6%) scale(1.08)}
.dp-vue.sort-gauche{opacity:0;transform:translateX(-4%) scale(1.02)}
.dp-vue.sort-droite{opacity:0;transform:translateX(4%) scale(1.02)}

/* L'image s'affiche ENTIÈRE : « contain » l'adapte au cadre sans rien couper.
   Une pièce montée dont on ne voit pas le sommet ne montre pas grand-chose. */
.dp-vue img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:contain;display:block}

/* Fond : la même image, agrandie et floutée, pour habiller les côtés. */
.dp-fond{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(26px) brightness(.5) saturate(1.2);transform:scale(1.15)}

/* Zoom très léger : l'image doit rester entière, on se contente d'un souffle. */
.dp-vue.on img{animation:dpZoom 9s ease-out forwards}
@keyframes dpZoom{from{transform:scale(1)}to{transform:scale(1.03)}}
.diapo.en-pause .dp-vue.on img{animation-play-state:paused}

.dp-vue figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:56px 30px 26px;
  background:linear-gradient(to top,rgba(4,10,22,.92) 10%,rgba(4,10,22,.45) 55%,transparent)}
.dp-album{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#0a1020;padding:4px 13px;border-radius:16px;
  background:linear-gradient(135deg,#e9c15c,#d4a526);margin-bottom:9px}
.dp-vue figcaption strong{display:block;font-family:var(--font-display,inherit);
  font-size:26px;color:#fff;line-height:1.2;letter-spacing:-.02em}
.dp-leg{display:block;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:6px;max-width:56ch}
@media (max-width:760px){
  .dp-vue figcaption{padding:40px 18px 18px}
  .dp-vue figcaption strong{font-size:18px}
  .dp-leg{display:none}
}

/* Logo : une signature, pas un bandeau publicitaire. */
.dp-logo{position:absolute;top:20px;right:22px;z-index:3;height:46px;width:auto;
  padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.34)}
@media (max-width:760px){ .dp-logo{height:34px;top:12px;right:12px;padding:6px 9px} }

/* Commandes */
.dp-fl,.dp-pause{position:absolute;z-index:4;cursor:pointer;color:#fff;
  background:rgba(6,12,26,.5);border:1px solid rgba(255,255,255,.18);
  border-radius:50%;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s, background .2s, transform .2s}
.diapo:hover .dp-fl,.diapo:hover .dp-pause{opacity:1}
.dp-fl:hover,.dp-pause:hover{background:rgba(240,193,75,.92);color:#0a1020;border-color:transparent}
.dp-fl{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:26px;line-height:1}
.dp-prec{left:18px} .dp-suiv{right:18px}
.dp-fl:hover{transform:translateY(-50%) scale(1.08)}
.dp-pause{left:18px;bottom:18px;width:36px;height:36px;font-size:12px}
@media (max-width:760px){
  .dp-fl,.dp-pause{opacity:.85}
  .dp-fl{width:38px;height:38px;font-size:21px}
  .dp-prec{left:8px} .dp-suiv{right:8px}
}

/* Jauges : chacune se remplit pendant que sa photo est affichée. */
.dp-jauges{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.dp-j{width:34px;height:4px;padding:0;border:0;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.16);overflow:hidden;transition:width .3s}
.dp-j span{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#e9c15c,#d4a526)}
.dp-j.on{width:56px}
.dp-j.on span{animation:dpJauge 4.5s linear forwards}
.diapo.en-pause .dp-j.on span{animation-play-state:paused}
@keyframes dpJauge{from{width:0}to{width:100%}}

@media (prefers-reduced-motion: reduce){
  .dp-vue,.dp-vue.on img,.dp-j.on span{transition:none;animation:none}
  .dp-j.on span{width:100%}
}

/* ============================================================
   ASSISTANT DU SITE
   ============================================================ */
.asst{position:fixed;right:20px;bottom:20px;z-index:9000}
@media (max-width:640px){ .asst{right:12px;bottom:76px} }

.as-bulle{position:relative;width:58px;height:58px;border-radius:50%;cursor:pointer;border:none;
  display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg,#e9c15c,#d4a526);
  box-shadow:0 10px 30px rgba(212,165,38,.42);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.as-bulle:hover{transform:scale(1.08)}
.asst.ouvert .as-bulle{transform:scale(.9);opacity:.85}

/* ------------------------------------------------------------
   L'invitation

   Posée AU-DESSUS de la bulle, jamais à côté : à gauche, elle
   recouvrait le bouton « Demander un devis » sur téléphone.
   Elle emprunte l'habillage de la fenêtre de discussion —
   c'est le même interlocuteur qui prend la parole.
   ------------------------------------------------------------ */
.as-invite{position:absolute;right:0;bottom:74px;cursor:pointer;
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  width:max-content;max-width:min(300px,calc(100vw - 34px));
  border-radius:17px;border-bottom-right-radius:6px;
  background:linear-gradient(160deg,rgba(14,26,48,.99),rgba(8,16,32,.99));
  border:1px solid rgba(240,193,75,.3);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:asEntre .45s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes asEntre{from{opacity:0;transform:translateY(10px) scale(.94)}
                   to{opacity:1;transform:none}}

.as-inv-av{flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;color:#0a1020;
  background:linear-gradient(135deg,#e9c15c,#d4a526)}
.as-inv-t{flex:1;min-width:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92)}
.as-inv-x{flex-shrink:0;border:none;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.4);font-size:14px;padding:2px 0 2px 2px;line-height:1}
.as-inv-x:hover{color:#fff}

@media (prefers-reduced-motion: reduce){ .as-invite{animation:none} }

/* Fenêtre */
.as-fen{position:absolute;right:0;bottom:70px;width:370px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(14,26,48,.99),rgba(8,16,32,.99));
  border:1px solid rgba(240,193,75,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  animation:asOuvre .28s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes asOuvre{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:640px){ .as-fen{width:calc(100vw - 24px);height:calc(100vh - 170px)} }

.as-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(240,193,75,.05)}
.as-t-id{display:flex;align-items:center;gap:10px}
.as-t-pt{width:9px;height:9px;border-radius:50%;background:#10b981;
  box-shadow:0 0 9px rgba(16,185,129,.8)}
.as-t-id strong{display:block;font-size:13.5px;color:#fff}
.as-t-id span:not(.as-t-pt){display:block;font-size:11px;color:rgba(255,255,255,.5);margin-top:1px}
.as-fermer{border:none;background:transparent;cursor:pointer;color:rgba(255,255,255,.5);
  font-size:15px;padding:4px}
.as-fermer:hover{color:#fff}

.as-fil{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;scrollbar-color:rgba(240,193,75,.3) transparent}
.as-fil::-webkit-scrollbar{width:6px}
.as-fil::-webkit-scrollbar-thumb{background:rgba(240,193,75,.3);border-radius:3px}

.as-m{max-width:86%;animation:asMsg .3s ease both}
@keyframes asMsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.as-m p{margin:0;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.as-m.assistant{align-self:flex-start}
.as-m.assistant p{color:rgba(255,255,255,.88);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:5px}
.as-m.visiteur{align-self:flex-end}
.as-m.visiteur p{color:#0a1020;background:linear-gradient(135deg,#e9c15c,#d4a526);
  border-bottom-right-radius:5px}

/* Document proposé */
.as-doc{display:flex;align-items:center;gap:11px;margin-top:8px;padding:11px 13px;
  border-radius:13px;text-decoration:none;
  background:rgba(240,193,75,.1);border:1px solid rgba(240,193,75,.3);
  transition:background .2s}
.as-doc:hover{background:rgba(240,193,75,.18)}
.ad-i{font-size:19px;flex-shrink:0}
.ad-c{flex:1;min-width:0}
.ad-c strong{display:block;font-size:12.5px;color:#f0c14b;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-c em{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-t{font-size:15px;color:#f0c14b;flex-shrink:0}

.as-confirme{align-self:center;font-size:11.5px;color:#10b981;padding:7px 14px;border-radius:16px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28)}

/* Points d'attente */
.as-attend{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:15px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);width:fit-content}
.as-attend .ap{display:flex;gap:5px}
.as-attend .ap i{width:6px;height:6px;border-radius:50%;background:rgba(240,193,75,.75);
  animation:asPoint 1.3s ease-in-out infinite}
.as-attend .ap i:nth-child(2){animation-delay:.18s}
.as-attend .ap i:nth-child(3){animation-delay:.36s}
@keyframes asPoint{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.as-saisie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.as-saisie input{flex:1;min-width:0;padding:11px 15px;border-radius:22px;font-size:13.5px;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);outline:none}
.as-saisie input:focus{border-color:rgba(240,193,75,.45)}
.as-saisie input::placeholder{color:rgba(255,255,255,.35)}
.as-saisie button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  flex-shrink:0;font-size:15px;color:#0a1020;
  background:linear-gradient(135deg,#e9c15c,#d4a526)}

@media (prefers-reduced-motion: reduce){
  .as-invite,.as-fen,.as-m{animation:none}
  .as-attend span{animation:none;opacity:.6}
}

/* Récapitulatif à confirmer, dans la discussion */
.as-form{align-self:stretch;display:flex;flex-direction:column;gap:8px;
  padding:14px;border-radius:15px;
  background:rgba(240,193,75,.07);border:1px solid rgba(240,193,75,.28);
  animation:asMsg .3s ease both}
.af-t{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#f0c14b;margin-bottom:2px}
.af-i{padding:10px 13px;border-radius:11px;font-size:13px;color:#fff;outline:none;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14)}
.af-i:focus{border-color:rgba(240,193,75,.5)}
.af-i::placeholder{color:rgba(255,255,255,.35)}
.af-err{font-size:11.5px;color:#ffb4bc;padding:7px 11px;border-radius:9px;
  background:rgba(255,77,94,.12);border:1px solid rgba(255,77,94,.3)}
.af-b{padding:11px;border-radius:11px;border:none;cursor:pointer;
  font-size:13px;font-weight:700;color:#0a1020;
  background:linear-gradient(135deg,#e9c15c,#d4a526)}
.af-b:disabled{opacity:.6;cursor:default}
.af-n{font-size:10.5px;color:rgba(255,255,255,.5);text-align:center;line-height:1.5}

.as-confirme{align-self:stretch;text-align:center;padding:12px 14px;border-radius:13px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3)}
.as-confirme strong{display:block;font-size:13px;color:#10b981}
.as-confirme span{display:block;font-size:11.5px;color:rgba(255,255,255,.62);margin-top:3px;
  line-height:1.5}


/* ============================================================
   LA MARQUE DE L'ASSISTANT

   Une étincelle à quatre branches, signe devenu commun des
   assistants. Elle prend la couleur du texte qui l'entoure,
   de sorte qu'une seule définition serve sur or comme sur
   marine. Sa taille suit celle de son conteneur.
   ============================================================ */
.ia-mq{width:1em;height:1em;display:block;fill:currentColor;overflow:visible}
.ia-mq .mq-petit{opacity:.62}
.ia-mq.mq-mini{width:.95em;height:.95em}

/* Le grand signe respire ; les satellites suivent, décalés. Rien de rapide :
   une animation pressée donne l'impression d'un chargement en panne. */
.ia-mq.anim .mq-etoile{transform-origin:24px 20px;
  animation:mqCoeur 3.4s ease-in-out infinite}
.ia-mq.anim .mq-a{transform-origin:37px 36px;animation:mqSat 3.4s ease-in-out infinite .45s}
.ia-mq.anim .mq-b{transform-origin:11px 32px;animation:mqSat 3.4s ease-in-out infinite .9s}
@keyframes mqCoeur{0%,100%{transform:scale(1);opacity:1}
                   50%{transform:scale(1.08);opacity:.88}}
@keyframes mqSat{0%,100%{transform:scale(.85);opacity:.45}
                 50%{transform:scale(1.1);opacity:.95}}

/* ---- La bulle du site ---- */
.as-bulle .as-ico{display:grid;place-items:center;font-size:28px;color:#0a1020;
  position:relative;z-index:2;line-height:1}
.as-bulle .as-ico .ia-mq{width:28px;height:28px}
/* Un halo qui bat lentement : la bulle se remarque sans clignoter. */
.as-halo{position:absolute;inset:-4px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(240,193,75,.55),transparent 68%);
  animation:asHalo 3.4s ease-in-out infinite}
@keyframes asHalo{0%,100%{transform:scale(.85);opacity:.35}
                  50%{transform:scale(1.22);opacity:0}}

.as-invite span .ia-mq{display:inline-block;vertical-align:-2px;color:var(--gold,#d4a526)}

/* ---- L'en-tête de la fenêtre ----
   La règle « .as-t-id span:not(.as-t-pt) », plus haut, vise tous les « span »
   de l'en-tête — dont l'avatar, qui en est un. Le « :not() » lui ajoute la
   portée de son argument, ce qui la rend plus forte qu'un simple
   « .as-t-id .as-avatar ». D'où le troisième niveau. */
.as-tete .as-t-id .as-avatar{position:relative;width:34px;height:34px;border-radius:50%;
  flex-shrink:0;display:grid;place-items:center;font-size:20px;color:#0a1020;
  margin-top:0;
  background:linear-gradient(135deg,#e9c15c,#d4a526);
  box-shadow:0 4px 14px rgba(212,165,38,.4)}
.as-tete .as-t-id .as-avatar .as-t-pt{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;
  border-radius:50%;background:#10b981;border:2px solid #0e1a30;
  box-shadow:0 0 8px rgba(16,185,129,.8)}

/* ---- La marque au fil des réponses ---- */
.as-m.assistant{display:flex;align-items:flex-start;gap:8px}
.as-m-av{flex-shrink:0;width:23px;height:23px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;font-size:13px;color:var(--gold-light,#f0c14b);
  background:rgba(240,193,75,.13);border:1px solid rgba(240,193,75,.26)}
.as-m.assistant p{flex:1;min-width:0}
/* Pendant la réflexion, la marque tourne doucement. */
.as-m-av.reflechit .ia-mq{animation:mqTourne 2.6s linear infinite}
@keyframes mqTourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}


@media (prefers-reduced-motion: reduce){
  .ia-mq.anim .mq-etoile,.ia-mq.anim .mq-a,.ia-mq.anim .mq-b,
  .as-halo,.as-m-av.reflechit .ia-mq{animation:none}
  .as-halo{opacity:.2}
}