/* Direct interactif ADA — format vertical, pense pour le telephone d'abord.
   Aucune ressource exterieure : la politique de securite du site (CSP) n'autorise
   que nos propres fichiers. Pas de CDN, pas de police distante, pas d'image tierce. */

:root{
  --ada:#567b1b; --ada-clair:#2dd4bf; --ada-fonce:#134e4a;
  --nuit:#0b1220; --nuit2:#111c2e;
  --verre:rgba(10,17,28,.55); --bord:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
/* Un `display:` pose plus bas ecrase l'attribut hidden : l'ecran d'exclusion
   restait alors invisible MAIS pose par-dessus toute la page, et avalait
   chaque clic. Cette regle-ci passe avant toutes les autres. */
[hidden]{display:none !important}

/* Pourquoi l'ecran « bougeait ».
   1. 100dvh suit la barre d'adresse de Safari : des qu'elle se replie ou se
      redeploie, TOUTE la page est remesuree et saute. 100svh est la hauteur
      « barre visible », elle ne change jamais.
   2. Faire defiler le chat jusqu'au bout propageait le geste a la page, ce qui
      declenchait justement ce repli. overscroll-behavior arrete la chaine. */
html,body{height:100%;overscroll-behavior:none}
body.live-body{
  margin:0;background:#000;color:#f1f5f9;overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
button{font-family:inherit}

.live-app{
  position:relative;width:100%;max-width:460px;margin:0 auto;
  height:100vh;height:100dvh;height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;background:var(--nuit);border-left:1px solid #1e293b;border-right:1px solid #1e293b;
}

/* ---------------------------------------------------------------- la scene */
.live-stage{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 50% 0%,#16283f 0%,#070d16 70%)}
.live-stage video{width:100%;height:100%;object-fit:cover;display:block;background:#070d16}
.live-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 42%,rgba(0,0,0,.92) 100%);
}
.couper-scene{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(38% + 10px);z-index:24;
  border:1px solid rgba(248,113,113,.6);background:rgba(127,29,29,.8);color:#fee2e2;
  border-radius:999px;padding:6px 14px;font-size:.7rem;font-weight:800;cursor:pointer;backdrop-filter:blur(6px)
}
.live-attente{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;color:#94a3b8;
  /* `--bas` est la hauteur REELLE du bandeau du bas (bouton de don, tchat,
     champ de saisie), mesuree par live.js a chaque changement. Sans elle cet
     ecran se centrait sur toute la hauteur, et son bouton « Prevenez-moi »
     passait DERRIERE le bandeau — visible sur la capture du client du 07/09.
     La valeur de secours sert le temps que la mesure arrive. */
  /* 58 px a droite ET a gauche : la colonne de boutons flotte au-dessus de cet
     ecran, et sans cette reserve le titre et le bouton « Prevenez-moi »
     passaient DESSOUS. Symetrique, donc le bloc reste bien centre. */
  padding:26px 58px calc(var(--bas,190px) + 12px)
}
.live-attente .rond{
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a;font-weight:900;font-size:1.15rem;
  box-shadow:0 12px 34px rgba(86,123,27,.45);animation:live-respire 3.4s ease-in-out infinite
}
@keyframes live-respire{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.live-attente h2{margin:6px 0 0;font-size:1.05rem;color:#e2e8f0}
.live-attente p{margin:0;font-size:.85rem;max-width:280px;line-height:1.5}

/* ------------------------------------------------------- vignettes invites */
.live-vignettes{position:absolute;top:74px;right:12px;z-index:30;display:flex;flex-direction:column;gap:8px}
.live-vignette{
  position:relative;width:84px;height:118px;border-radius:16px;overflow:hidden;
  background:#0b1220;border:2px solid var(--ada-clair);box-shadow:0 10px 26px rgba(0,0,0,.55);
  animation:live-vignette-entree .3s ease-out
}
@keyframes live-vignette-entree{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}
.live-vignette video{width:100%;height:100%;object-fit:cover;display:block}
/* Participation en voix seule : pas d'image a montrer, on affiche un micro qui
   pulse pour qu'on comprenne que la personne est bien la. */
.live-vignette.voix{
  width:82px;height:82px;border-radius:20px;
  background:linear-gradient(150deg,var(--ada-fonce),#0b1220);
  display:flex;align-items:center;justify-content:center
}
.live-vignette .onde{font-size:1.6rem;animation:live-respire 1.6s ease-in-out infinite}
.live-vignette .nom{
  position:absolute;left:0;right:0;bottom:0;padding:3px 5px;font-size:9px;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.live-vignette .couper{
  position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(220,38,38,.9);color:#fff;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center
}

/* ------------------------------------------------------------------ entete */
.live-entete{position:relative;z-index:20;padding:14px 14px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.live-ident{
  display:flex;align-items:center;gap:9px;background:var(--verre);backdrop-filter:blur(10px);
  border:1px solid var(--bord);border-radius:999px;padding:5px 12px 5px 5px;min-width:0
}
.live-ident>div{min-width:0}
.live-ident .logo{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a;font-weight:900;font-size:.7rem
}
.live-ident h1{margin:0;font-size:.76rem;font-weight:700;line-height:1.15;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.live-ident .spect{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--ada-clair);font-weight:600;margin-top:2px}
.live-ident .point{width:6px;height:6px;border-radius:50%;background:#f43f5e;animation:live-pulse 1.6s infinite}
.live-ident .point.off{background:#64748b;animation:none}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.btn-don{
  border:0;cursor:pointer;border-radius:999px;padding:9px 14px;font-size:.76rem;font-weight:800;white-space:nowrap;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a;
  box-shadow:0 8px 20px rgba(86,123,27,.4)
}
.btn-don:active{transform:scale(.96)}

/* Bouton de regie : discret, mais il doit sauter aux yeux des qu'une main se
   leve — d'ou la pastille rouge qui compte les demandes. */
.btn-regie{
  position:absolute;top:62px;left:14px;z-index:26;cursor:pointer;
  border:1px solid rgba(251,191,36,.5);background:rgba(15,23,42,.7);backdrop-filter:blur(8px);
  color:#fde68a;border-radius:999px;padding:7px 12px;font-size:.7rem;font-weight:800
}
.btn-regie .pastille{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;
  border-radius:999px;background:#dc2626;color:#fff;font-size:.62rem;padding:0 5px;
  animation:live-pulse 1.2s infinite
}

/* ---------------------------------------------- colonne d'actions (a droite) */
.live-rail{
  position:absolute;right:10px;bottom:200px;z-index:26;
  display:flex;flex-direction:column;align-items:center;gap:10px
}
.btn-reaction{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;cursor:pointer;font-size:1.15rem;
  background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;transition:transform .12s
}
.btn-reaction:active{transform:scale(1.25)}
/* La colonne melange des liens et des boutons : on remet un bouton a plat pour
   qu'il soit indistinguable d'un lien a l'oeil. */
.btn-rail{
  width:44px;text-decoration:none;color:#e2e8f0;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:0;background:transparent;padding:0;cursor:pointer
}
.btn-rail .ico{
  width:44px;height:44px;border-radius:50%;font-size:1.15rem;
  background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center
}
.btn-rail:active .ico{transform:scale(1.12)}
.btn-rail .txt{font-size:.56rem;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* --------------------------------------------------------- bas de l'ecran */
.live-bas{position:relative;z-index:20;padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}

.live-invite{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(111,156,34,.18);border:1px solid rgba(45,212,191,.35);
  backdrop-filter:blur(10px);border-radius:18px;padding:11px 12px
}
.live-invite .txt{min-width:0;transition:opacity .25s ease}
/* Une fois a l'antenne, ce bandeau ne sert plus qu'a sortir : il se replie sur
   son seul bouton et libere le bas de l'image. */
.live-invite.replie{
  width:auto;margin-left:auto;padding:5px 6px 5px 10px;background:rgba(2,6,23,.45);
  border-color:rgba(148,163,184,.3)
}
.live-invite.replie .txt{display:none}
.live-invite.replie .btn-rejoindre{
  background:rgba(248,113,113,.9);color:#450a0a;font-size:.68rem;padding:7px 12px
}
.live-invite p{margin:0;font-size:.74rem;font-weight:700;color:#fff}
.live-invite small{display:block;font-size:.66rem;font-weight:500;color:rgba(204,251,241,.8);margin-top:2px}
/* « C'est a vous » : la seule chose a l'ecran qui doit attirer l'oeil. */
.live-invite.appel{
  background:linear-gradient(135deg,rgba(217,119,6,.35),rgba(251,191,36,.25));
  border-color:rgba(251,191,36,.7);animation:live-appel 1.4s ease-in-out infinite
}
@keyframes live-appel{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.5)}50%{box-shadow:0 0 0 9px rgba(251,191,36,0)}}
.live-invite.appel .btn-rejoindre{background:#fbbf24;color:#422006}
.btn-rejoindre{
  border:0;cursor:pointer;border-radius:13px;padding:10px 13px;font-size:.74rem;font-weight:800;white-space:nowrap;
  background:var(--ada-clair);color:#17210a
}
.btn-rejoindre:active{transform:scale(.96)}
.btn-rejoindre[disabled]{opacity:.45;cursor:not-allowed}

/* --------------------------------------------------- le tchat, facon TikTok
   Demande du client, 07/09 : « les messages qui seront exactement comme TikTok,
   ils s'affichent et ils disparaissent apres, et l'emplacement dedans qui sera
   tres joli, et s'affiche pendant quelques secondes ».

   Ce qui change par rapport aux gros pavés de sa capture d'ecran :
   - la bulle ne fait plus toute la largeur et ne fait plus deux etages : le nom
     et le texte coulent sur la MEME ligne, qui revient a la ligne toute seule ;
   - elle se moule sur le texte (`width:max-content`) au lieu d'etaler un fond
     vide jusqu'au bord de l'ecran ;
   - le fond est beaucoup plus discret, on doit voir l'image dessous ;
   - elle entre par la gauche en glissant, et s'efface au bout de 9 s.

   Le chat reste un bloc en colonne et chaque message reste `display:block` :
   passer un message en flex ou en inline-flex remet chaque mot en colonne
   (correction du 29/08, ne pas y revenir). */
.live-chat{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  max-height:26svh;overflow-y:auto;padding-right:2px;
  scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
.live-chat::-webkit-scrollbar{width:0;height:0}
.live-msg{
  position:relative;display:block;width:max-content;max-width:82%;
  background:rgba(8,13,22,.42);backdrop-filter:blur(6px);
  border:0;border-radius:16px;padding:6px 11px;font-size:.78rem;line-height:1.42;
  color:#f1f5f9;text-shadow:0 1px 3px rgba(0,0,0,.75);
  overflow-wrap:anywhere;
  animation:live-entree .3s cubic-bezier(.2,.9,.3,1.2)
}
/* Elles arrivent par la gauche et remontent, comme sur un direct mobile. */
@keyframes live-entree{
  from{opacity:0;transform:translate3d(-14px,10px,0)}
  to{opacity:1;transform:none}
}
.live-msg .qui{font-weight:900;color:var(--ada-clair);font-size:.75rem;margin-right:5px}
/* Le texte suit le nom sur la meme ligne : c'est ce qui fait la difference
   entre une bulle de messagerie et un tchat de direct. */
.live-msg .txt{color:#e8eef7}
.live-msg.moi{background:rgba(111,156,34,.4)}
.live-msg.moi .qui{color:#e4f2cd}
.live-msg.hote{background:rgba(120,53,15,.42)}
.live-msg.hote .qui{color:#fde68a}
.live-msg .moderer{
  border:0;background:transparent;color:#f87171;margin-left:6px;
  font-size:.7rem;cursor:pointer;opacity:.65;padding:0;vertical-align:middle
}
.live-msg .moderer:active{opacity:1}
/* Etiquette d'appartenance : l'association voulait reconnaitre ses adherents
   d'un coup d'oeil dans le chat. */
.etiq{
  display:inline-block;margin-right:5px;padding:1px 6px;border-radius:999px;
  font-size:.58rem;font-weight:800;letter-spacing:.02em;vertical-align:middle;
  text-shadow:none;
  background:rgba(148,163,184,.22);color:#cbd5e1
}
.etiq.adherent{background:rgba(45,212,191,.22);color:#b4cf93}
.etiq.animateur{background:rgba(251,191,36,.24);color:#fde68a}
.etiq.inscrit{background:rgba(148,163,184,.22);color:#cbd5e1}
.etiq.voix{background:rgba(129,140,248,.22);color:#c7d2fe}
/* La marque qui RESTE sur le nom une fois le message parti : le don s'annonce
   une fois en grand au milieu de l'image, puis se resume a ce petit coeur, sur
   chaque message suivant de la personne. Doree, comme la banniere du don, pour
   qu'on fasse le lien. */
.etiq.donateur{
  background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(253,224,71,.85));
  color:#3b1d02;box-shadow:0 2px 8px rgba(245,158,11,.4)
}
/* Un message de tchat s'efface au bout de quelques secondes : sur un direct
   vertical, le visage de la personne qui parle passe avant l'historique. */
.live-msg.efface{opacity:0;transform:translateY(-8px);transition:opacity .6s ease,transform .6s ease}
/* La ligne de don, elle, garde son cadre : c'est la seule qui a le droit
   d'attirer l'oeil dans le tchat. (`width:auto` : sinon la regle
   `width:max-content` ci-dessus la retrecit autour du texte et le cadre dore
   ne se voit plus.) */
.live-msg.don{
  width:auto;max-width:100%;align-self:stretch;
  background:linear-gradient(135deg,rgba(111,156,34,.55),rgba(45,212,191,.35));
  border:1px solid rgba(45,212,191,.6);box-shadow:0 8px 24px rgba(111,156,34,.35);padding:8px 12px
}
.live-msg.don .titre{font-weight:900;color:#ecfeff;font-size:.82rem}
.live-msg.don .mot{font-style:italic;color:#d1fae5;margin-top:3px}

.live-saisie{display:flex;align-items:center;gap:8px}
.live-saisie form{
  flex:1;display:flex;align-items:center;gap:6px;background:var(--verre);backdrop-filter:blur(10px);
  border:1px solid var(--bord);border-radius:999px;padding:8px 8px 8px 14px
}
.live-saisie input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:16px;outline:none}
.live-saisie input::placeholder{color:#94a3b8;font-size:.8rem}
.live-saisie .envoyer{border:0;background:transparent;color:var(--ada-clair);font-size:1rem;cursor:pointer;padding:0 4px}

/* ------------------------------------------------------ emojis qui montent */
/* Les coeurs montent le long du bord droit, au-dessus de la video, mais a
   GAUCHE de la colonne de boutons : lances par-dessus, ils cachaient
   « Adherer ». Le bas de la zone est recalcule quand le bandeau grandit. */
.live-reactions{position:absolute;left:40%;right:66px;top:24%;bottom:200px;z-index:25;pointer-events:none;overflow:hidden}
.live-flottant{position:absolute;bottom:0;font-size:1.9rem;animation:live-monte 2.3s ease-out forwards;will-change:transform,opacity}
@keyframes live-monte{
  0%{opacity:0;transform:translateY(0) scale(.7) rotate(0)}
  12%{opacity:1}
  50%{opacity:.95;transform:translateY(-130px) scale(1.24) rotate(14deg)}
  100%{opacity:0;transform:translateY(-250px) scale(.9) rotate(-14deg)}
}

/* --------------------------------------------------------------- fenetres */
.live-modale{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.82);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
.live-modale.ouverte{display:flex;animation:live-fondu .18s ease-out}
@keyframes live-fondu{from{opacity:0}to{opacity:1}}
.live-modale .boite{
  width:100%;max-width:460px;background:var(--nuit2);border:1px solid #1e293b;border-bottom:0;
  border-radius:24px 24px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:92svh;overflow-y:auto;overscroll-behavior:contain;
  animation:live-monte-boite .22s cubic-bezier(.2,.8,.3,1)
}
@keyframes live-monte-boite{from{transform:translateY(26px)}to{transform:none}}
.live-modale h3{margin:0;font-size:1rem;display:flex;align-items:center;gap:8px;color:#fff}
.live-modale h4{margin:0 0 8px;font-size:.76rem;color:#94a3b8;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.live-modale h4 .compte{background:rgba(148,163,184,.2);color:#e2e8f0;border-radius:999px;padding:1px 7px;font-size:.66rem;margin-left:6px}
.live-modale .tete{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e293b;padding-bottom:12px;margin-bottom:14px}
.live-modale .fermer{background:transparent;border:0;color:#94a3b8;font-size:1.2rem;cursor:pointer;line-height:1}
.live-modale .explique{margin:0 0 14px;font-size:.78rem;line-height:1.5;color:#94a3b8}
.montants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.montants button{
  padding:13px 4px;border-radius:13px;border:1.5px solid #334155;background:#1e293b;color:#fff;
  font-weight:800;font-size:.9rem;cursor:pointer
}
.montants button.actif{border-color:var(--ada-clair);background:rgba(111,156,34,.3);color:#e4f2cd}
.live-modale input[type=text],.live-modale input[type=number],.live-modale input[type=email]{
  width:100%;padding:11px 12px;margin-bottom:10px;border-radius:12px;border:1.5px solid #334155;
  background:#1e293b;color:#fff;font-size:16px;outline:none
}
.live-modale input:focus{border-color:var(--ada-clair)}
.live-modale .valider{
  width:100%;padding:13px;border:0;border-radius:13px;cursor:pointer;font-weight:900;font-size:.9rem;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a
}
.live-modale .valider.secondaire{
  margin-top:9px;background:transparent;border:1.5px solid #334155;color:#cbd5e1;font-weight:800
}
.live-fiscal{
  display:block;margin-top:12px;padding:11px 13px;border-radius:13px;font-size:.76rem;line-height:1.5;
  background:rgba(111,156,34,.15);border:1px solid rgba(45,212,191,.3);color:#e4f2cd
}
.live-fiscal strong{font-weight:800}

/* --------------------------------------------------------- regie animateur */
.regie-bloc{padding:14px 0;border-bottom:1px solid #1e293b}
.regie-bloc:last-child{border-bottom:0}
.bascule{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;font-size:.78rem;color:#cbd5e1;cursor:pointer}
.bascule input{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;accent-color:var(--ada-clair)}
.regie-liste{display:flex;flex-direction:column;gap:7px}
.regie-liste .vide{margin:0;font-size:.76rem;color:#64748b}
.regie-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  background:#0f1a2b;border:1px solid #1e293b;border-radius:12px;padding:9px 11px
}
.regie-ligne .qui{font-size:.8rem;font-weight:700;color:#e2e8f0;min-width:0}
.regie-ligne .actions{display:flex;gap:6px}
.regie-ligne button{
  border:1px solid #334155;background:#1e293b;color:#cbd5e1;border-radius:9px;
  padding:6px 10px;font-size:.7rem;font-weight:800;cursor:pointer
}
.regie-ligne button.ok{border-color:rgba(45,212,191,.6);background:rgba(111,156,34,.3);color:#e4f2cd}
.regie-ligne button.ko{border-color:rgba(248,113,113,.5);background:rgba(127,29,29,.4);color:#fecaca}
.regie-ligne button:active{transform:scale(.96)}

.live-alerte{
  position:absolute;top:0;left:0;right:0;z-index:70;padding:9px 14px;font-size:.76rem;font-weight:700;
  text-align:center;background:#7f1d1d;color:#fee2e2;display:none
}
.live-alerte.visible{display:block}

/* -------------------------------------------------- annonces ephemeres */
/* « X rejoint le direct » etc. Elles passent en haut, au-dessus de la video,
   et s'effacent seules : elles ne s'empilent plus dans le tchat. Elles ne
   prennent aucun clic (pointer-events:none), sinon elles masqueraient le
   bouton de la regie pendant les 3 secondes ou elles sont la. */
/* Sous l'entete ET sous le bouton de regie (top:62px + sa hauteur), et a
   gauche de la colonne des vignettes (right:12px, largeur 84px) : sinon une
   annonce recouvre le nom de l'association ou la tete d'un intervenant. */
.live-annonces{
  position:absolute;top:106px;left:0;right:108px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 0 0 14px;pointer-events:none
}
.live-annonce{
  max-width:100%;background:rgba(2,6,23,.62);backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,.28);border-radius:999px;
  padding:6px 14px;font-size:.7rem;font-weight:700;color:#e2e8f0;text-align:center;
  animation:live-annonce-entree .28s ease-out;transition:opacity .5s ease,transform .5s ease
}
@keyframes live-annonce-entree{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.live-annonce.sort{opacity:0;transform:translateY(-10px)}

/* Micro coupe : il faut le voir d'un coup d'oeil, on ne se rend pas compte
   qu'on parle dans le vide. */
.btn-rail.micro.coupe .ico{background:rgba(248,113,113,.35);border-color:rgba(248,113,113,.7)}
.btn-rail.micro.coupe .txt{color:#fecaca}
.btn-rail.son.coupe .ico{background:rgba(148,163,184,.32);border-color:rgba(203,213,225,.6)}
.btn-rail.son.coupe .txt{color:#cbd5e1}

/* ------------------------------------------------------ message epingle */
/* « Le numero de telephone, ce n'est pas un bouton : je veux qu'il soit
   affiche au milieu du direct, epingle, dans une couleur tres attirante. »
   Il est donc au centre, en grand, et il ne prend aucun clic — sauf le numero
   lui-meme, qui reste appelable d'un doigt. Largeur bornee a droite pour ne
   pas passer sous la colonne des vignettes et des boutons. */
.live-pin{
  position:absolute;top:50%;left:14px;right:104px;z-index:46;
  transform:translateY(-50%);
  padding:13px 18px;border-radius:16px;text-align:center;
  font-size:1.32rem;font-weight:900;letter-spacing:.01em;line-height:1.25;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  pointer-events:none;
  animation:live-pin-battement 2.6s ease-in-out infinite
}
.live-pin a{color:inherit;text-decoration:none;pointer-events:auto}
.live-pin small{
  display:block;margin-top:3px;font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;opacity:.85
}
.live-pin.or   {background:linear-gradient(135deg,#d97706,#fbbf24);color:#3b1d02;border:2px solid rgba(255,255,255,.55)}
.live-pin.rouge{background:linear-gradient(135deg,#dc2626,#f43f5e);color:#fff;border:2px solid rgba(255,255,255,.5)}
.live-pin.vert {background:linear-gradient(135deg,#059669,#34d399);color:#03251a;border:2px solid rgba(255,255,255,.55)}
.live-pin.bleu {background:linear-gradient(135deg,#2563eb,#38bdf8);color:#04203f;border:2px solid rgba(255,255,255,.5)}
.live-pin.entre{animation:live-pin-arrivee .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes live-pin-battement{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.028)}}
@keyframes live-pin-arrivee{from{opacity:0;transform:translateY(-50%) scale(.82)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@media(max-height:700px){ .live-pin{font-size:1.06rem;padding:10px 14px} }

/* Choix de la couleur dans la regie */
.pin-couleurs{display:flex;gap:8px;margin:10px 0}
.pin-couleur{
  flex:1;border:2px solid transparent;border-radius:10px;padding:8px 0;
  font-size:.68rem;font-weight:800;cursor:pointer;color:#0f172a
}
.pin-couleur.or{background:linear-gradient(135deg,#d97706,#fbbf24)}
.pin-couleur.rouge{background:linear-gradient(135deg,#dc2626,#f43f5e);color:#fff}
.pin-couleur.vert{background:linear-gradient(135deg,#059669,#34d399)}
.pin-couleur.bleu{background:linear-gradient(135deg,#2563eb,#38bdf8)}
.pin-couleur.actif{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.regie-aide{display:block;margin-top:8px;font-size:.68rem;color:#64748b;line-height:1.45}

/* ------------------------------------------------------------- partage */
/* Le bouton ne disait pas OU partager. La fenetre montre les destinations,
   sur telephone comme sur ordinateur. */
.partage-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.partage-grille .part{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:transparent;border:0;padding:0;cursor:pointer;
  font-size:.62rem;font-weight:700;color:#cbd5e1;text-decoration:none;text-align:center
}
.partage-grille .ico{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:800;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)
}
.partage-grille .part:active .ico{transform:scale(1.08)}
.ico.wa{background:#25d366;color:#06301a}
.ico.fb{background:#1877f2}
.ico.ms{background:linear-gradient(135deg,#00b2ff,#a033ff)}
.ico.tg{background:#229ed9}
.ico.xx{background:#0f172a;border:1px solid #334155}
.ico.sm{background:#567b1b}
.ico.ml{background:#64748b}
.ico.cp{background:#334155}
.partage-lien{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #1e293b;
  background:#0b1220;color:#94a3b8;font-size:.74rem
}

/* Vignette dont le son est coupe : dire pourquoi, sinon on croit a une panne. */
.live-vignette.muette::after{
  content:'🔇';position:absolute;top:5px;left:5px;font-size:.66rem;
  background:rgba(2,6,23,.7);border-radius:6px;padding:1px 4px
}

/* --------------------------------------------------------- fenetre de don */
/* Le formulaire est ecrit dans la page : le direct continue derriere, et il
   n'y a plus de cadre blanc a attendre. */
.live-modale .boite.large{max-height:92svh;display:flex;flex-direction:column;overflow-y:auto}

/* Barre de don, centree, juste au-dessus du tchat. Le client la voulait « au
   milieu » : pleine largeur et bien visible, mais sous la scene pour ne jamais
   recouvrir un visage a l'image. */
.don-barre{
  width:100%;border:0;cursor:pointer;border-radius:15px;padding:10px 14px;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a;
  box-shadow:0 10px 24px rgba(86,123,27,.45)
}
.don-barre .coeur{font-size:1.05rem}
.don-barre .txt{font-weight:900;font-size:.94rem}
.don-barre .sous{
  font-size:.68rem;font-weight:800;opacity:.78;
  background:rgba(4,33,30,.16);border-radius:999px;padding:2px 8px
}
.don-barre:active{transform:scale(.985)}

.freq-bascule{display:flex;background:#0b1220;border:1px solid #1e293b;border-radius:13px;padding:4px;margin-bottom:16px}
.freq-bascule button{
  flex:1;border:0;background:transparent;padding:9px;border-radius:10px;
  font-weight:800;color:#94a3b8;cursor:pointer;font-size:.82rem
}
.freq-bascule button.active{background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a}

.don-label{display:block;margin:0 0 8px;font-size:.82rem;font-weight:800;color:#e2e8f0}
.don-saisie{position:relative;display:block}
/* Le montant est le premier geste : gros champ, curseur dedans a l'ouverture,
   et RIEN de pre-rempli. C'est la demande explicite du client — plus de
   « 100 € POPULAIRE » deja coche. */
.live-modale .don-saisie input{
  width:100%;font-size:1.5rem;font-weight:900;padding:15px 44px 15px 16px;
  border-radius:14px;text-align:left
}
/* Les fleches haut/bas du champ numerique se posaient par-dessus le signe € et
   donnaient un champ bricole. On les retire : sur telephone elles n'existent
   pas, et sur ordinateur on tape le montant. */
.live-modale .don-saisie input::-webkit-outer-spin-button,
.live-modale .don-saisie input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.live-modale .don-saisie input[type=number]{-moz-appearance:textfield;appearance:textfield}
.don-saisie .devise{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1.25rem;font-weight:900;color:#64748b;pointer-events:none
}
.don-raccourcis{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.don-raccourcis button{
  flex:1;min-width:64px;background:#0b1220;border:1px solid #1e293b;color:#cbd5e1;
  border-radius:11px;padding:9px 6px;font-weight:800;font-size:.82rem;cursor:pointer
}
/* Survol volontairement discret. Une bordure a la couleur d'accent — celle qui
   marque partout ailleurs l'element ACTIF — faisait lire « 10 € est deja
   choisi » des que la souris passait dessus. C'est precisement le reproche du
   client sur l'ancien formulaire : rien ne doit avoir l'air pre-selectionne. */
.don-raccourcis button:hover{background:#111c31;color:#fff}

.don-resume{margin:14px 0 0;font-size:.8rem;color:#94a3b8;font-weight:700}
.don-resume.pret{color:#fff;font-size:.95rem;font-weight:900}
.don-fiscal{
  margin:8px 0 0;font-size:.72rem;line-height:1.5;color:#5eead4;
  background:rgba(111,156,34,.12);border:1px solid rgba(45,212,191,.25);border-radius:11px;padding:9px 11px
}

#donPaiement{margin-top:16px}
#donExpress{min-height:46px}
.don-ou{display:flex;align-items:center;gap:10px;margin:14px 0;color:#64748b;font-size:.72rem;font-weight:800}
.don-ou::before,.don-ou::after{content:"";flex:1;height:1px;background:#1e293b}

.don-vers-carte{
  width:100%;background:transparent;border:1.5px solid #334155;color:#cbd5e1;
  border-radius:13px;padding:12px;font-weight:800;font-size:.84rem;cursor:pointer
}
.don-vers-carte:hover{border-color:var(--ada-clair);color:#fff}

.don-champs{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.live-modale .don-champs input{font-size:.88rem;padding:12px 13px}
#donCarte{margin-bottom:12px}

.don-msg{margin-top:11px;font-size:.78rem;color:#94a3b8;line-height:1.45;display:none}
.don-msg.vu{display:block}
.don-msg.grave{color:#fecaca;background:rgba(127,29,29,.28);border:1px solid rgba(248,113,113,.4);border-radius:10px;padding:9px 11px}
.don-secure{margin:12px 0 0;font-size:.68rem;color:#64748b;text-align:center;line-height:1.4}

.don-merci{text-align:center;padding:14px 4px 4px}
.don-merci .coche{
  width:62px;height:62px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#17210a;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair))
}
.don-merci h4{
  margin:0 0 10px;font-size:1.15rem;color:#fff;
  text-transform:none;letter-spacing:0;font-weight:900
}
.don-merci p{margin:0 0 18px;font-size:.84rem;color:#94a3b8;line-height:1.55}

/* ------------------------------------------------------------- arrivees */
/* Posees EN ABSOLU au-dessus du bloc du bas : une bulle qui apparait ne doit
   jamais pousser le tchat ni retrecir la video. pointer-events:none pour que la
   bulle n'avale pas un clic destine au bouton de don juste dessous. */
.live-arrivees{
  position:absolute;left:14px;right:14px;bottom:100%;z-index:25;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding-bottom:8px;pointer-events:none
}
.arrivee{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  background:rgba(2,6,23,.82);border:1px solid rgba(45,212,191,.35);
  border-radius:999px;padding:7px 13px 7px 9px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);backdrop-filter:blur(4px);
  opacity:0;transform:translateX(-14px) scale(.96);
  transition:opacity .3s ease-out,transform .3s cubic-bezier(.2,.9,.3,1.2)
}
.arrivee.vue{opacity:1;transform:none}
.arrivee .main{font-size:.95rem}
.arrivee .qui{
  font-weight:900;font-size:.8rem;color:#5eead4;
  max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.arrivee .quoi{font-size:.76rem;color:#cbd5e1;white-space:nowrap}

/* ----------------------------------------------------- annonce d'un don */
/* Posee a 28 % de la hauteur : au-dessus du message epingle (qui est a 50 %),
   sous l'en-tete, et jamais sur le bloc du bas. pointer-events:none — elle
   traverse l'image pendant cinq secondes et ne doit voler aucun clic. */
.live-don-annonce{
  position:absolute;left:14px;right:70px;top:28%;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none
}
/* Une pastille sur UNE ligne coupait le texte des 420 px de large : au banc,
   « maher E. vient de de… ». Un don qu'on n'arrive pas a lire ne sert a rien.
   Elle passe donc sur deux lignes si besoin, centree, et plus rien n'est
   tronque. */
.don-annonce{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 9px;max-width:100%;
  padding:11px 17px;border-radius:20px;
  background:linear-gradient(135deg,#d97706,#fbbf24 55%,#fde68a);
  color:#3b1d02;border:2px solid rgba(255,255,255,.6);
  box-shadow:0 16px 38px rgba(245,158,11,.42),0 4px 14px rgba(0,0,0,.4);
  font-size:.86rem;font-weight:800;line-height:1.25;text-align:center;
  opacity:0;transform:translateY(-16px) scale(.86);
  transition:opacity .35s ease-out,transform .38s cubic-bezier(.2,.9,.3,1.35)
}
.don-annonce.vue{opacity:1;transform:none;animation:don-pulse 1.5s ease-in-out .4s 2}
.don-annonce .coeur{font-size:1.15rem;animation:don-bat 1s ease-in-out infinite}
/* Le nom est deja raccourci en « Prenom N. » cote JavaScript : ici on le laisse
   simplement passer a la ligne plutot que de le couper. */
.don-annonce .txt{min-width:0}
.don-annonce .txt strong{font-weight:900}
.don-annonce .somme{
  background:rgba(59,29,2,.16);border-radius:999px;padding:3px 10px;
  font-size:.95rem;font-weight:900;flex:0 0 auto
}
.don-annonce .merci{font-size:.74rem;font-weight:900;opacity:.75;flex:0 0 auto}
@keyframes don-pulse{
  0%,100%{box-shadow:0 16px 38px rgba(245,158,11,.42),0 4px 14px rgba(0,0,0,.4)}
  50%{box-shadow:0 16px 52px rgba(251,191,36,.75),0 4px 14px rgba(0,0,0,.4)}
}
@keyframes don-bat{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.28)}
  60%{transform:scale(.95)}
}

/* ------------------------------------------------- phrases toutes pretes */
.phrases-liste{display:flex;flex-wrap:wrap;gap:7px}
.phrases-liste .phrase{
  background:#0b1220;border:1px solid #1e293b;color:#cbd5e1;border-radius:999px;
  padding:8px 13px;font-size:.76rem;font-weight:700;cursor:pointer;
  max-width:100%;text-align:left;line-height:1.35
}
.phrases-liste .phrase:hover{border-color:var(--ada-clair);color:#fff}
.phrases-liste .phrase:disabled{opacity:.5;cursor:default}
.phrases-editer{margin-top:11px}
.phrases-editer summary{
  cursor:pointer;font-size:.74rem;color:#94a3b8;font-weight:700;list-style:none
}
.phrases-editer summary::-webkit-details-marker{display:none}
.phrases-editer summary::before{content:"✎ ";opacity:.7}
.phrases-editer .aide{margin:9px 0 7px;font-size:.7rem;color:#64748b}
.phrases-editer textarea{
  width:100%;background:#0b1220;border:1px solid #1e293b;color:#e2e8f0;
  border-radius:12px;padding:11px 12px;font-size:.8rem;line-height:1.5;
  font-family:inherit;resize:vertical
}
.phrases-editer textarea:focus{border-color:var(--ada-clair);outline:none}

@media (prefers-reduced-motion:reduce){
  .arrivee{transition:opacity .2s linear}
  .arrivee.vue{transform:none}
  .don-annonce{transition:opacity .2s linear;transform:none}
  .don-annonce.vue{transform:none;animation:none}
  .don-annonce .coeur{animation:none}
  /* Le message doit quand meme apparaitre et disparaitre : on retire le
     glissement, pas l'affichage. */
  .live-msg{animation:none}
  .live-msg.efface{transition:opacity .3s linear;transform:none}
}

.live-banni{
  position:absolute;inset:0;z-index:80;background:rgba(2,6,23,.96);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px
}
.live-banni .rond{
  width:70px;height:70px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:rgba(127,29,29,.5);border:1px solid rgba(248,113,113,.5);font-size:1.7rem
}
.live-banni h2{margin:0 0 8px;font-size:1.05rem;color:#fecaca}
.live-banni p{margin:0;font-size:.85rem;color:#94a3b8;line-height:1.5}

/* Ecran court (petit telephone, ou clavier ouvert) : le chat cede la place,
   sinon la colonne de boutons remonte derriere la vignette de l'intervenant. */
@media(max-height:700px){
  .live-chat{max-height:17svh}
  .live-vignette{width:74px;height:104px}
  .live-vignette.voix{width:66px;height:66px}
}

@media(min-width:900px){
  .live-app{border-radius:22px;height:min(94svh,900px);margin-top:3svh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  body.live-body{background:#060b14;display:flex;align-items:flex-start;justify-content:center}
}

/* ------------------------------------------------- etat du reseau (06/09) */
/* Une image qui se fige sans explication passe pour une panne du site. On
   nomme la cause, discretement, sur l'image concernee. */
.live-reseau{
  position:absolute;left:14px;bottom:14px;z-index:6;
  background:rgba(180,32,32,.92);color:#fff;
  padding:6px 12px;border-radius:999px;
  font-size:.78rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  pointer-events:none
}
.live-vignette.faible{outline:2px solid rgba(220,60,60,.9);outline-offset:-2px}
.live-vignette.faible::before{
  content:'réseau faible';
  position:absolute;left:6px;bottom:6px;z-index:3;
  background:rgba(180,32,32,.92);color:#fff;
  padding:2px 7px;border-radius:999px;font-size:.62rem;font-weight:800
}

/* --------------------------------------- « prevenez-moi du prochain direct » */
/* Le direct de 18h49 a fait 3 entrees. Ce n'etait pas un probleme de qualite :
   personne n'etait prevenu. Le moment ou l'on capte quelqu'un, c'est justement
   l'ecran « le direct n'a pas encore commence » — la seule chose a lui proposer
   a cet instant, c'est de revenir. */
.live-prevenir{
  margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:100%;max-width:330px
}
.live-prevenir[hidden]{display:none}

.btn-prevenir{
  border:0;cursor:pointer;font:inherit;
  padding:12px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--ada),var(--ada-clair));color:#17210a;
  font-size:.9rem;font-weight:900;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(86,123,27,.45);
  transition:transform .12s ease,box-shadow .12s ease
}
.btn-prevenir:active{transform:scale(.97)}
.btn-prevenir:disabled{opacity:.55;cursor:progress}
.btn-prevenir.actif{
  background:rgba(148,163,184,.16);color:#cbd5e1;
  border:1px solid var(--bord);box-shadow:none;font-weight:800
}

.live-attente .alerte-etat{
  margin:0;max-width:310px;font-size:.78rem;line-height:1.45;color:#94a3b8
}
.live-attente .alerte-etat.impossible{color:#cbd5e1;max-width:330px}

/* Abonne : la cloche de la colonne d'actions se barre et passe au vert. */
.btn-rail.actif .ico{background:rgba(111,156,34,.42);border-color:rgba(45,212,191,.75)}
.btn-rail.actif .txt{color:#5eead4}

/* Un mot au milieu de l'ecran : le bouton de la colonne peut etre clique
   pendant le direct, quand l'ecran d'attente n'est plus la pour repondre. */
.alerte-toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  z-index:120;max-width:min(88vw,360px);
  background:rgba(8,15,28,.96);color:#e2e8f0;border:1px solid var(--bord);
  padding:11px 16px;border-radius:14px;
  font-size:.82rem;line-height:1.45;text-align:center;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease
}
.alerte-toast.vu{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
  .btn-prevenir,.alerte-toast{transition:none}
}