@font-face {
      font-family: 'Geist';
      src: url('/Geist.ttf') format('truetype-variations'), url('/Geist.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--wc-police);
      background: #000; color: var(--wc-text); min-height: 100vh; overflow-x: hidden;
    }
    .bg-glow {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--wc-accent-rgb),0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(175,82,222,0.07) 0%, transparent 55%);
    }

    main { max-width: 680px; margin: 0 auto; padding: 32px 24px 80px; display: flex; flex-direction: column; gap: 20px; }

    .card {
      background: rgba(15,23,42,.7); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.15);
      border-radius: var(--wc-r-l); padding: 24px; backdrop-filter: blur(8px);
    }
    .card-title { font-size: var(--wc-surtitre-taille); font-weight: var(--wc-surtitre-graisse); color: var(--wc-surtitre-couleur); text-transform: var(--wc-surtitre-casse); letter-spacing: var(--wc-surtitre-espacement); margin-bottom: 16px; }

    /* Status pill */
    .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .status-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: var(--wc-r-pilule); font-size: 13px; font-weight: 600;
      background: rgba(100,116,139,.15); color: #64748b; border: 1px solid rgba(100,116,139,.2);
      transition: all .3s ease;
    }
    .status-pill.active { background: rgba(34,197,94,.12); color: var(--wc-vert-clair); border-color: rgba(34,197,94,.25); }
    .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .status-pill.active .dot { animation: pulse 1.5s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .btn {
      padding: 10px 20px; border-radius: var(--wc-r-m); font-size: 14px; font-weight: 600;
      border: none; cursor: pointer; transition: all .2s ease; font-family: inherit;
    }
    .btn-start { background: linear-gradient(135deg,var(--wc-bleu-vif),var(--wc-bleu-fonce)); color: #fff; }
    .btn-start:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--wc-bleu-vif-rgb),.4); }
    .btn-stop  { background: rgba(239,68,68,.15); color: var(--wc-rouge-clair); border: 1px solid rgba(239,68,68,.25); }
    .btn-stop:hover  { background: rgba(239,68,68,.25); }
    .btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

    /* Inputs */
    .field { display: flex; flex-direction: column; gap: 8px; }
    label { font-size: 13px; color: #94a3b8; font-weight: 500; }
    input[type=text], input[type=url] {
      background: rgba(15,23,42,.8); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.2);
      border-radius: var(--wc-r-m); padding: 12px 16px; color: #e8f0fe; font-size: 14px;
      font-family: inherit; outline: none; transition: border-color .2s;
      width: 100%;
    }
    input:focus { border-color: rgba(var(--wc-bleu-vif-rgb),.6); }

    /* Sliders */
    .slider-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media(max-width:500px) { .slider-group { grid-template-columns: 1fr; } }
    .slider-field { display: flex; flex-direction: column; gap: 8px; }
    .slider-label { display: flex; justify-content: space-between; align-items: center; }
    .slider-label span:first-child { font-size: 13px; color: #94a3b8; font-weight: 500; }
    .slider-val { font-size: 13px; color: var(--wc-bleu-vif); font-weight: 700; font-variant-numeric: tabular-nums; }
    input[type=range] {
      -webkit-appearance: none; width: 100%; height: 4px;
      background: rgba(var(--wc-bleu-vif-rgb),.2); border-radius: 2px; outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
      background: var(--wc-bleu-vif); cursor: pointer; transition: transform .15s;
    }
    input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }

    /* URL overlay */
    .url-row { display: flex; gap: 10px; }
    .url-input {
      flex: 1; background: rgba(15,23,42,.8); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.15);
      border-radius: var(--wc-r-m); padding: 10px 14px; color: #64748b; font-size: 13px;
      font-family: var(--wc-police-mono); outline: none;
    }
    .btn-copy {
      padding: 10px 16px; border-radius: var(--wc-r-m); background: rgba(var(--wc-bleu-vif-rgb),.15);
      color: var(--wc-bleu-vif); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.25); font-size: 13px;
      font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
      transition: background .2s;
    }
    .btn-copy:hover { background: rgba(var(--wc-bleu-vif-rgb),.25); }

    /* Emoji tags */
    .emoji-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; align-items: flex-start; }
    .emoji-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(var(--wc-bleu-vif-rgb),.12); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.2);
      border-radius: var(--wc-r-s); padding: 4px 10px; font-size: 22px; cursor: default;
      transition: background .15s;
    }
    .emoji-tag.blacklist-tag { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); }
    .emoji-tag .remove-tag {
      font-size: 11px; color: #64748b; cursor: pointer; line-height: 1;
      padding: 2px 2px 2px 4px; border-radius: var(--wc-r-xs);
    }
    .emoji-tag .remove-tag:hover { color: var(--wc-rouge-clair); }
    .emoji-input-row { display: flex; gap: 8px; margin-top: 10px; }
    .emoji-input {
      flex: 1; background: rgba(15,23,42,.8); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.2);
      border-radius: var(--wc-r-m); padding: 10px 14px; color: #e8f0fe; font-size: 18px;
      font-family: inherit; outline: none;
    }
    .emoji-input::placeholder { font-size: 13px; color: #475569; }
    .btn-add {
      padding: 10px 16px; border-radius: var(--wc-r-m); background: rgba(var(--wc-bleu-vif-rgb),.15);
      color: var(--wc-bleu-vif); border: 1px solid rgba(var(--wc-bleu-vif-rgb),.25); font-size: 13px;
      font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
    }
    .btn-add:hover { background: rgba(var(--wc-bleu-vif-rgb),.25); }

    /* Preview */
    .preview-box {
      position: relative; width: 100%; aspect-ratio: 16/9;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-radius: var(--wc-r-m); overflow: hidden; border: 1px solid rgba(var(--wc-bleu-vif-rgb),.15);
    }
    .preview-label {
      position: absolute; top: 10px; left: 12px; font-size: 11px; color: #475569;
      font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    }
    #preview-container { position: absolute; inset: 0; pointer-events: none; }
    .prev-emoji {
      position: absolute; line-height: 1; pointer-events: none;
      animation: floatUp var(--dur) linear forwards;
      font-size: var(--sz);
    }
    @keyframes floatUp {
      0%   { transform: translateY(0) scale(1);    opacity: var(--op); }
      80%  { opacity: var(--op); }
      100% { transform: translateY(calc(-1 * var(--travel))) scale(.8); opacity: 0; }
    }

    /* ─── Standard Nav (logo | titre | id) ─── */
    nav {
      position: sticky; top: 0; z-index: 1000;
      height: 64px;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    nav .brand { justify-self: start; display: inline-flex; align-items: center; height: 100%; }
    nav .brand img { height: 24px; display: block; }
    nav .nav-pill {
      justify-self: center;
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wc-r-pilule);
      max-width: 60vw;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1;
    }
    nav .nav-user {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }
    nav .nav-user:hover { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.3); color: var(--wc-red); }
    nav .nav-user .x { opacity: 0.5; font-size: 10px; }
    nav .nav-clock {
      justify-self: end;
      font-size: 18px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wc-texte-bleute);
      text-shadow: 0 0 8px rgba(var(--wc-bleu-clair-rgb),0.45), 0 0 40px rgba(var(--wc-bleu-vif-rgb),0.35);
      line-height: 1;
    }
    nav .nav-timer {
      justify-self: center;
      font-size: 22px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--wc-texte-bleute); letter-spacing: 0.04em;
      line-height: 1;
    }
    @media (max-width: 600px) {
      nav { padding: 0 14px; height: 56px; }
      nav .brand img { height: 13px; }
      nav .nav-pill { font-size: 9px; padding: 4px 8px; max-width: 50vw; }
      nav .nav-user { font-size: 10px; padding: 4px 11px; }
    }
    /* ─── Footer ─── */
    .page-footer {
      padding: 18px 32px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex; justify-content: center; align-items: center;
      font-size: 12px; color: rgba(255,255,255,0.3);
      margin-top: auto;
    }
    .page-footer a { color: rgba(255,255,255,0.3); text-decoration: none; }
    .page-footer a:hover { color: rgba(255,255,255,0.6); }

    /* Debordement mesure a 360 px (+76 px) : le champ et le bouton « + Ajouter »
       (94 px, white-space:nowrap) ne tenaient pas cote a cote. */
    @media (max-width: 480px) {
      .emoji-input-row { flex-wrap: wrap; }
      .emoji-input-row .btn-add { flex: 1 1 100%; }
    }