@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;
      position: relative;
      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%);
    }

    .bubble {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }

    main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px 24px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: start;
    }

    .main-grid .section-full {
      grid-column: 1 / -1;
    }

    @media (max-width: 800px) {
      .main-grid { grid-template-columns: 1fr; }
      .main-grid .section-full { grid-column: unset; }
    }

    @media (max-width: 600px) {
      main { padding: 16px 12px; }
      .preset-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    }

    @media (max-width: 400px) {
      .preset-grid { grid-template-columns: repeat(3, 1fr); }
      .color-group { grid-template-columns: 1fr; }
    }

    .section {
      background: rgba(12, 24, 41, 0.4);
      border: 1px solid rgba(26, 45, 74, 0.5);
      border-radius: var(--wc-r-m);
      padding: 20px;
      backdrop-filter: blur(12px);
    }

    .section-title {
      font-size: var(--wc-surtitre-taille);
      font-weight: var(--wc-surtitre-graisse);
      letter-spacing: var(--wc-surtitre-espacement);
      text-transform: var(--wc-surtitre-casse);
      color: var(--wc-surtitre-couleur);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(26, 45, 74, 0.6);
    }

    .form-group {
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-size: var(--wc-etiquette-taille);
      font-weight: var(--wc-etiquette-graisse);
      text-transform: var(--wc-etiquette-casse);
      color: var(--wc-etiquette-couleur);
      letter-spacing: var(--wc-etiquette-espacement);
    }

    input[type="text"],
    textarea {
      background: rgba(26, 45, 74, 0.3);
      border: 1px solid rgba(26, 45, 74, 0.6);
      color: var(--wc-texte-doux);
      padding: 10px 14px;
      border-radius: var(--wc-r-s);
      font-family: inherit;
      font-size: 13px;
      transition: all 0.15s;
    }

    input[type="text"]:focus,
    textarea:focus {
      outline: none;
      border-color: var(--wc-bleu-clair);
      background: rgba(26, 45, 74, 0.5);
    }

    textarea {
      resize: vertical;
      min-height: 60px;
    }

    .color-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }

    @media (max-width: 600px) {
      .color-group { grid-template-columns: 1fr; }
    }

    .color-input-wrap {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    input[type="color"] {
      width: 50px;
      height: 40px;
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-s);
      cursor: pointer;
    }

    .color-value {
      flex: 1;
      background: rgba(26, 45, 74, 0.3);
      border: 1px solid rgba(26, 45, 74, 0.6);
      color: var(--wc-texte-doux);
      padding: 8px 12px;
      border-radius: var(--wc-r-s);
      font-family: var(--wc-police-mono);
      font-size: 12px;
    }

    .preview-section {
      background: rgba(26, 45, 74, 0.4);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-m);
      padding: 0;
      aspect-ratio: 16/9;
      overflow: hidden;
      margin-bottom: 16px;
      position: relative;
    }

    .preview-viewport {
      width: 1920px;
      height: 1080px;
      position: relative;
      transform-origin: top left;
    }

    .lower-preview {
      position: absolute;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .lower-preview.visible {
      opacity: 1;
    }

    .lower-bandeau {
      padding: 12px 20px 12px 24px;
      border-radius: var(--wc-r-s);
      color: var(--lt-text, #ffffff);
      font-size: 14px;
      cursor: move;
      user-select: none;
      position: relative;
      background: var(--lt-bg, rgba(0, 0, 0, 0.8));
    }

    /* Presets */
    .lower-bandeau.preset-basic {
      border-left: 4px solid var(--lt-accent, var(--wc-bleu-vif));
    }
    .lower-bandeau.preset-classic {
      border-top: 3px solid var(--lt-accent, var(--wc-bleu-vif));
      padding: 12px 24px;
    }
    .lower-bandeau.preset-bold {
      background: var(--lt-accent, var(--wc-bleu-vif));
      border-radius: var(--wc-r-xs);
      padding: 14px 28px;
    }
    .lower-bandeau.preset-minimal {
      background: transparent !important;
      border: none;
      border-radius: 0;
      padding: 4px 8px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.9);
    }
    .lower-bandeau.preset-minimal .lower-name::before {
      content: '';
      display: inline-block;
      width: 0.35em;
      height: 0.35em;
      border-radius: 50%;
      background: var(--lt-accent, var(--wc-bleu-vif));
      margin-right: 0.5em;
      vertical-align: middle;
    }

    .lower-bandeau.preset-split {
      background: transparent !important;
      border: none;
      border-radius: 0;
      padding: 0;
    }
    .lower-bandeau.preset-split .lower-name {
      background: var(--lt-bg, #ffffff);
      color: var(--lt-text, #000000);
      padding: 0.15em 0.5em;
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: 0.02em;
      display: block;
      width: fit-content;
      margin-bottom: 0.2em;
      line-height: 1.05;
    }
    .lower-bandeau.preset-split .lower-title {
      background: var(--lt-bg, #ffffff);
      color: var(--lt-text, #000000);
      padding: 0.25em 0.6em;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.05em;
      opacity: 1;
      display: block;
      width: fit-content;
      line-height: 1.1;
    }

    .lower-bandeau.dragging {
      opacity: 0.8;
      box-shadow: 0 0 20px rgba(var(--wc-bleu-clair-rgb), 0.4);
    }

    .resize-handle {
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--wc-bleu-clair);
      border: 2px solid var(--wc-bleu-vif);
      border-radius: 3px;
      cursor: nwse-resize;
      display: none;
      bottom: -10px;
      right: -10px;
    }

    .lower-bandeau:hover .resize-handle {
      display: block;
    }

    .lower-name {
      font-weight: 700;
      margin-bottom: 4px;
    }

    .lower-title {
      font-weight: 100;
      opacity: 0.9;
      margin-bottom: 4px;
    }

    .lower-text {
      opacity: 0.85;
    }

    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }

    .preset-card {
      background: rgba(26, 45, 74, 0.3);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-s);
      padding: 12px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }

    .preset-card:hover {
      border-color: rgba(var(--wc-bleu-vif-rgb), 0.5);
      background: rgba(var(--wc-bleu-vif-rgb), 0.08);
    }

    .preset-card.selected {
      border-color: var(--wc-bleu-vif);
      background: rgba(var(--wc-bleu-vif-rgb), 0.15);
      box-shadow: 0 0 0 1px var(--wc-bleu-vif);
    }

    .preset-card-preview {
      height: 50px;
      background: #1a1a1a;
      border-radius: var(--wc-r-xs);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      position: relative;
      overflow: hidden;
    }

    .preset-card-preview .demo-name {
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    .preset-card-preview .demo-title {
      color: #fff;
      opacity: 0.7;
      font-size: 8px;
      font-weight: 100;
      line-height: 1.2;
      margin-top: 2px;
    }

    .preset-demo-basic { border-left: 3px solid var(--wc-bleu-vif); padding-left: 10px; }
    .preset-demo-classic { border-top: 2px solid var(--wc-bleu-vif); padding-top: 8px; align-items: flex-start; }
    .preset-demo-bold { background: var(--wc-bleu-vif); }
    .preset-demo-minimal { background: transparent; }
    .preset-demo-minimal .demo-name::before {
      content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
      background: var(--wc-bleu-vif); margin-right: 4px; vertical-align: middle;
    }
    .preset-demo-split { align-items: flex-start; padding: 6px 8px; }
    .preset-demo-split > div { width: 100%; }
    .preset-demo-split .demo-name {
      background: #fff; color: #000; font-size: 10px; font-weight: 900;
      padding: 1px 5px; display: inline-block; margin-bottom: 2px;
      text-transform: uppercase; line-height: 1.1;
    }
    .preset-demo-split .demo-title {
      background: #fff; color: #000; font-size: 7px; font-weight: 500;
      padding: 1px 4px; display: inline-block; margin-left: 10px;
      text-transform: uppercase; opacity: 1; line-height: 1.2;
    }

    .preset-card-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--wc-texte-doux);
    }

    .logo-upload-zone {
      border: 1px dashed rgba(var(--wc-bleu-vif-rgb), 0.4);
      border-radius: var(--wc-r-s);
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
      background: rgba(26, 45, 74, 0.15);
      position: relative;
    }

    .logo-upload-zone:hover, .logo-upload-zone.drag-over {
      border-color: var(--wc-bleu-vif);
      background: rgba(var(--wc-bleu-vif-rgb), 0.1);
    }

    .logo-upload-zone .logo-placeholder {
      color: var(--wc-gris-ardoise);
      font-size: 13px;
    }

    .logo-thumb-wrap {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo-thumb-wrap img,
    .logo-thumb-wrap video {
      max-height: 60px;
      max-width: 160px;
      object-fit: contain;
      border-radius: var(--wc-r-xs);
      background: rgba(0,0,0,0.3);
      padding: 4px;
      display: block;
    }

    .logo-remove-btn {
      background: rgba(127, 29, 29, 0.3);
      border: 1px solid #7f1d1d;
      color: var(--wc-rouge-clair);
      padding: 6px 12px;
      border-radius: var(--wc-r-s);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.15s;
    }

    .logo-remove-btn:hover { background: rgba(127, 29, 29, 0.5); }

    #preview-logo-wrap {
      position: absolute;
      cursor: move;
      user-select: none;
    }

    #preview-logo-wrap img,
    #preview-logo-wrap video {
      display: block;
      object-fit: contain;
      width: 100%;
    }

    #preview-logo-wrap .resize-handle {
      display: none;
    }

    #preview-logo-wrap:hover .resize-handle {
      display: block;
    }

    .presenter-card {
      background: rgba(26, 45, 74, 0.2);
      border: 1px solid rgba(26, 45, 74, 0.5);
      border-radius: var(--wc-r-s);
      padding: 16px;
      margin-bottom: 12px;
    }

    .presenter-card.selected {
      border-color: var(--wc-bleu-vif);
      background: rgba(var(--wc-bleu-vif-rgb), 0.1);
    }

    .presenter-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .presenter-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .presenter-radio {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(26, 45, 74, 0.6);
      background: transparent;
      cursor: pointer;
      flex-shrink: 0;
    }

    .presenter-card.selected .presenter-radio {
      border-color: var(--wc-bleu-vif);
      background: var(--wc-bleu-vif);
      box-shadow: inset 0 0 0 3px rgba(12, 24, 41, 0.8);
    }

    .presenter-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--wc-bleu-clair);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .delete-presenter-btn {
      background: none;
      border: none;
      color: #7f1d1d;
      cursor: pointer;
      font-size: 16px;
      padding: 4px 8px;
      border-radius: var(--wc-r-xs);
      transition: all 0.15s;
    }

    .delete-presenter-btn:hover {
      background: rgba(127, 29, 29, 0.3);
      color: var(--wc-rouge-clair);
    }

    .presenter-fields {
      display: grid;
      gap: 10px;
    }

    .presenter-fields input,
    .presenter-fields textarea {
      background: rgba(26, 45, 74, 0.3);
      border: 1px solid rgba(26, 45, 74, 0.6);
      color: var(--wc-texte-doux);
      padding: 8px 12px;
      border-radius: var(--wc-r-s);
      font-family: inherit;
      font-size: 13px;
    }

    .presenter-fields input:focus,
    .presenter-fields textarea:focus {
      outline: none;
      border-color: var(--wc-bleu-clair);
      background: rgba(26, 45, 74, 0.5);
    }

    .presenter-url {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      background: rgba(26, 45, 74, 0.15);
      padding: 6px 10px;
      border-radius: var(--wc-r-xs);
    }

    .presenter-url input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--wc-bleu-clair);
      font-size: 11px;
      font-family: var(--wc-police-mono);
      padding: 0;
    }

    .presenter-url input:focus { outline: none; }

    .add-presenter-btn {
      width: 100%;
      background: rgba(var(--wc-bleu-vif-rgb), 0.15);
      border: 1px dashed rgba(var(--wc-bleu-vif-rgb), 0.4);
      color: var(--wc-bleu-clair);
      padding: 12px;
      border-radius: var(--wc-r-s);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.15s;
    }

    .add-presenter-btn:hover {
      background: rgba(var(--wc-bleu-vif-rgb), 0.25);
      border-color: var(--wc-bleu-vif);
    }

    .url-section {
      background: rgba(26, 45, 74, 0.3);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-s);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .url-section input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--wc-bleu-clair);
      font-size: 12px;
      font-family: var(--wc-police-mono);
      cursor: text;
    }

    .url-section input:focus { outline: none; }

    .copy-btn {
      background: rgba(var(--wc-bleu-vif-rgb), 0.3);
      border: 1px solid var(--wc-bleu-vif);
      color: var(--wc-bleu-clair);
      padding: 6px 12px;
      border-radius: var(--wc-r-xs);
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      transition: all 0.15s;
      white-space: nowrap;
    }

    .copy-btn:hover {
      background: rgba(var(--wc-bleu-vif-rgb), 0.5);
      color: var(--wc-texte-bleute);
    }

    .copy-btn.copied {
      background: rgba(74, 222, 128, 0.3);
      border-color: var(--wc-vert-clair);
      color: var(--wc-vert-clair);
    }

    .button-group {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    .save-btn {
      flex: 1;
      background: rgba(20, 83, 45, 0.4);
      border: 1px solid #166534;
      color: var(--wc-vert-clair);
      padding: 12px 20px;
      border-radius: var(--wc-r-s);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.15s;
    }

    .save-btn:hover {
      background: rgba(20, 83, 45, 0.6);
      border-color: var(--wc-vert-clair);
    }

    .reset-btn {
      background: rgba(63, 63, 70, 0.3);
      border: 1px solid rgba(63, 63, 70, 0.6);
      color: #a1a1a8;
      padding: 12px 20px;
      border-radius: var(--wc-r-s);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.15s;
    }

    .reset-btn:hover {
      background: rgba(63, 63, 70, 0.5);
      border-color: #a1a1a8;
      color: #d4d4d8;
    }

    .status-msg {
      padding: 12px 16px;
      border-radius: var(--wc-r-s);
      margin-bottom: 16px;
      display: none;
      animation: slideIn 0.2s ease forwards;
    }

    .status-msg.success {
      background: rgba(20, 83, 45, 0.3);
      border: 1px solid #166534;
      color: var(--wc-vert-clair);
      display: block;
    }

    .status-msg.error {
      background: rgba(127, 29, 29, 0.3);
      border: 1px solid #7f1d1d;
      color: var(--wc-rouge-clair);
      display: block;
    }

    @keyframes slideIn {
      from { transform: translateY(-10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* ─── 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); }

        @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%);
    }

    /* ── Nav ── */

    /* ── Main ── */
    main {
      max-width: 720px; margin: 0 auto;
      padding: 24px 20px 60px;
    }

    .page-title {
      font-size: 24px; font-weight: 700; color: var(--wc-texte-bleute);
      margin-bottom: 4px;
    }

    .page-subtitle {
      font-size: 13px; color: var(--wc-gris-ardoise-2); margin-bottom: 24px;
    }

    /* ── Toggle principal ── */
    .toggle-card {
      background: rgba(15,25,50,0.7);
      border: 1px solid rgba(30,80,160,0.25);
      border-radius: var(--wc-r-l); padding: 20px 24px;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
      cursor: pointer;
    }

    .toggle-card.active {
      border-color: rgba(220,38,38,0.5);
      background: rgba(220,38,38,0.1);
    }

    .toggle-info h3 { font-size: 15px; font-weight: 600; color: var(--wc-texte-bleute); }
    .toggle-info p  { font-size: 12px; color: var(--wc-gris-ardoise-2); margin-top: 2px; }

    /* Toggle switch */
    .toggle-switch {
      width: 52px; height: 28px;
      background: rgba(30,60,110,0.5);
      border-radius: var(--wc-r-l);
      position: relative; flex-shrink: 0;
      transition: background 0.2s;
      border: 1px solid rgba(30,80,160,0.3);
    }

    .toggle-switch.on { background: #dc2626; border-color: #dc2626; }

    .toggle-switch::after {
      content: '';
      position: absolute; top: 3px; left: 3px;
      width: 20px; height: 20px;
      background: #fff; border-radius: 50%;
      transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }

    .toggle-switch.on::after { transform: translateX(24px); }

    /* ── Card ── */
    .card {
      background: rgba(15,25,50,0.7);
      border: 1px solid rgba(30,80,160,0.25);
      border-radius: var(--wc-r-l); padding: 20px 24px;
      margin-bottom: 16px;
    }

    .card-title {
      font-size: var(--wc-surtitre-taille); font-weight: var(--wc-surtitre-graisse); letter-spacing: var(--wc-surtitre-espacement);
      color: var(--wc-surtitre-couleur); text-transform: var(--wc-surtitre-casse); margin-bottom: 14px;
    }

    /* ── Form fields ── */
    label { display: block; font-size: 12px; font-weight: 600; color: var(--wc-gris-ciel); margin-bottom: 6px; }

    .field { margin-bottom: 14px; }

    textarea, input[type="text"], input[type="number"] {
      width: 100%;
      padding: 10px 14px;
      background: rgba(20,40,80,0.4);
      border: 1px solid rgba(30,80,160,0.3);
      border-radius: var(--wc-r-m);
      color: var(--wc-texte-bleute); font-size: 14px; font-family: inherit;
      outline: none; resize: vertical;
      transition: border-color 0.2s;
    }
    textarea:focus, input[type="text"]:focus, input[type="number"]:focus {
      border-color: rgba(var(--wc-bleu-vif-rgb),0.6);
    }

    textarea { min-height: 80px; }

    /* ── Color row ── */
    .color-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .color-field { display: flex; flex-direction: column; gap: 6px; }
    .color-field label { margin-bottom: 0; }

    .color-wrap {
      display: flex; align-items: center; gap: 8px;
      background: rgba(20,40,80,0.4);
      border: 1px solid rgba(30,80,160,0.3);
      border-radius: var(--wc-r-m); padding: 6px 10px; cursor: pointer;
    }

    .color-wrap:hover { border-color: rgba(var(--wc-bleu-vif-rgb),0.5); }

    input[type="color"] {
      width: 28px; height: 28px;
      border: none; background: none; cursor: pointer;
      padding: 0; border-radius: var(--wc-r-s);
    }

    .color-hex { font-size: 12px; color: var(--wc-gris-ciel); font-variant-numeric: tabular-nums; flex: 1; }

    /* ── Speed slider ── */
    .slider-row { display: flex; align-items: center; gap: 12px; }

    input[type="range"] {
      flex: 1; -webkit-appearance: none; appearance: none;
      height: 4px; background: rgba(30,80,160,0.4);
      border-radius: 2px; outline: none;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 18px; height: 18px;
      background: var(--wc-bleu-vif); border-radius: 50%; cursor: pointer;
    }

    .slider-val { font-size: 13px; font-weight: 600; color: var(--wc-texte-bleute); min-width: 48px; text-align: right; }

    /* ── Prévisualisation ── */
    .preview-wrap {
      position: relative; width: 100%;
      aspect-ratio: 16/9;
      background: #0a0a0a; border-radius: var(--wc-r-m); overflow: hidden;
      border: 1px solid rgba(30,80,160,0.2);
      margin-top: 4px;
    }

    /* ── Buttons ── */
    .action-row {
      display: flex; gap: 10px; margin-top: 20px;
    }

    .save-status {
      flex: 1; padding: 14px;
      background: rgba(30,60,110,0.3);
      border: 1px solid rgba(30,80,160,0.2);
      border-radius: var(--wc-r-m);
      color: var(--wc-gris-ardoise-2); font-size: 14px; font-weight: 500;
      text-align: center;
      transition: color 0.3s, border-color 0.3s, background 0.3s;
    }
    .save-status.saving {
      color: var(--wc-bleu-pale); border-color: rgba(var(--wc-bleu-vif-rgb),0.4);
      background: rgba(var(--wc-bleu-vif-rgb),0.08);
    }
    .save-status.saved {
      color: #86efac; border-color: rgba(34,197,94,0.4);
      background: rgba(34,197,94,0.08);
    }
    .save-status.error {
      color: #fca5a5; border-color: rgba(239,68,68,0.4);
      background: rgba(239,68,68,0.08);
    }

    /* ── URL overlay ── */
    .url-row {
      display: flex; gap: 8px; align-items: center; margin-top: 12px;
    }

    .url-input {
      flex: 1;
      padding: 10px 14px;
      background: rgba(20,40,80,0.3);
      border: 1px solid rgba(30,80,160,0.2);
      border-radius: var(--wc-r-m); color: var(--wc-gris-ciel); font-size: 12px;
      font-family: var(--wc-police-mono);
      outline: none;
    }

    .copy-btn {
      padding: 10px 16px;
      background: rgba(var(--wc-bleu-vif-rgb),0.15);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb),0.3);
      border-radius: var(--wc-r-m); color: var(--wc-bleu-pale); font-size: 12px;
      font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .copy-btn:hover { background: rgba(var(--wc-bleu-vif-rgb),0.25); }

    /* ── Flash ── */
    .flash-msg {
      position: fixed; bottom: 24px; right: 24px;
      background: rgba(34,197,94,0.9); color: #fff;
      padding: 10px 18px; border-radius: var(--wc-r-m);
      font-size: 13px; font-weight: 600;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s; z-index: 50;
    }
    .flash-msg.show { opacity: 1; }
    .flash-msg.error { background: rgba(239,68,68,0.9); }

    @media (max-width: 480px) {
      .color-row { grid-template-columns: 1fr 1fr; }
    }
  
    /* ─── 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); }

  .tool-switch { display:flex; gap:8px; margin:0 auto 22px; max-width:1180px; padding:0 20px; }
  .tool-switch button { flex:1; padding:13px 18px; border-radius:var(--wc-r-m); cursor:pointer; font-family:inherit;
    font-size:14.5px; font-weight:600; text-align:left; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09); color:#8ba0c0; transition:background .15s,border-color .15s,color .15s; }
  .tool-switch button:hover { background:rgba(255,255,255,0.07); color:var(--wc-texte-bleute); }
  .tool-switch button.on { background:rgba(var(--wc-accent-rgb),0.14); border-color:rgba(var(--wc-accent-rgb),0.45); color:#fff; }
  .tool-switch .sub { display:block; font-size:11.5px; font-weight:500; opacity:.75; margin-top:2px; }
  .tool-pane { display:none; } .tool-pane.on { display:block; }
  .tool-pane nav { display:none !important; }
  @media (max-width:640px){ .tool-switch { flex-direction:column; } }

  /* ══ Architecture reprise de Liens & QR ═══════════════════════════════════
     Ce bloc arrive en dernier : il s'applique par-dessus les regles existantes
     sans qu'aucune ait ete deplacee, donc sans toucher a l'ordre de la cascade.
     Le balisage n'a bouge que sur deux points, tous deux purement visuels et
     jamais lus par le JavaScript : l'en-tete, et la sortie des intitules de
     section hors de leur surface. */

  /* En-tete : retour a gauche, logo a droite, grand titre dessous. */
  /* width:100% est indispensable : le corps de ces pages est un conteneur
     flex en colonne, ou « margin:0 auto » annule l'etirement. Sans cette
     largeur, l'en-tete se reduit a son contenu et le max-width ne joue jamais. */
  .ent { position:relative; z-index:2; width:100%; max-width:820px; margin:0 auto;
         padding:16px 22px 20px; }
  .ent-haut { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .ent-haut .lien-retour { flex:1; display:inline-flex; align-items:center; gap:3px;
                           color:var(--wc-accent); text-decoration:none; font-size:13px; }
  .ent-haut .lien-retour:hover { opacity:.75; }
  .ent-haut .i-ret { width:15px; height:15px; }
  .ent-logo { height:21px; opacity:.9; }
  .ent-titre { font-size:32px; font-weight:700; letter-spacing:-.025em; line-height:1.08;
               color:var(--wc-text); }
  .ent-sous { margin-top:5px; font-size:13.5px; color:var(--wc-text-secondary); }
  .ent-sous b { color:var(--wc-text); font-weight:600; font-variant-numeric:tabular-nums; }

  /* Une colonne de 820 px : la largeur d'une colonne de contenu chez Apple.
     La grille a deux colonnes laissait une moitie vide sur grand ecran. */
  main { max-width:820px; margin:0 auto; padding:4px 22px 90px; }
  .main-grid { display:block !important; }
  .tool-pane nav, .tool-pane header { display:none !important; }

  /* Liste groupee encastree : l'intitule au-dessus, une seule surface arrondie. */
  .grp-h { font-size:12.5px; font-weight:600; color:var(--wc-text-secondary);
           margin:22px 0 9px 4px; }
  .grp-h:first-of-type { margin-top:4px; }
  .section {
    background:rgba(255,255,255,0.045) !important;
    border:1px solid var(--wc-card-border) !important;
    border-radius:var(--wc-r-l) !important;
    padding:16px !important;
    margin-bottom:0 !important;
  }
  .section-title { display:none !important; }
    /* remplace par .grp-h au-dessus */

  /* Intitules de champ : casse et interlettrage normaux. */
  .form-label, .card-title, label {
    text-transform:none !important; letter-spacing:normal !important;
    font-size:12px !important; font-weight:600 !important;
    color:var(--wc-text-secondary) !important;
  }

  /* Une seule echelle d'arrondis, au lieu des dix que la page employait. */
  input, select, textarea, button, .field, .color-input-wrap,
  .add-presenter-btn, .reset-btn, .logo-remove-btn { border-radius:var(--wc-r-m) !important; }
  .preset-card, .card, .preview-section { border-radius:var(--wc-r-l) !important; }

  /* Retour tactile : l'element s'enfonce sous le doigt. */
  button, .preset-card, .add-presenter-btn { transition:transform .1s, filter .14s, background .15s; }
  button:active, .preset-card:active, .add-presenter-btn:active { transform:scale(.97); }

  /* Controle segmente : une piste creusee, le segment actif pose dessus. */
  .tool-switch {
    max-width:520px !important; margin:0 auto 22px !important;
    padding:3px !important; gap:3px !important;
    background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--wc-r-m) !important;
  }
  .tool-switch button {
    flex:1 1 0 !important; min-width:0; text-align:center !important;
    padding:9px 12px !important; font-size:13px !important;
    background:transparent !important; border:none !important;
    border-radius:var(--wc-r-m) !important; color:var(--wc-text-secondary) !important;
  }
  .tool-switch button.on {
    background:rgba(255,255,255,.10) !important; color:var(--wc-text) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .tool-switch .sub { display:none !important; }

  /* Bouton-icone : l'icone passe par le fond, PAS par le contenu. copyUrl()
     ecrit dans textContent pour signaler la copie — en masquant seulement le
     texte, on garde son fonctionnement intact et la coche s'affiche via
     la classe .copied qu'il pose deja. */
  .copy-btn {
    width:34px !important; height:34px !important; padding:0 !important;
    font-size:0 !important; flex:0 0 auto;
    background-color:rgba(255,255,255,.06) !important;
    border:1px solid transparent !important;
    background-repeat:no-repeat !important; background-position:center !important;
    background-size:17px 17px !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2.5'/><path d='M5 15a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2'/></svg>") !important;
  }
  .copy-btn:hover { background-color:rgba(255,255,255,.11) !important; }
  .copy-btn.copied {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330d158' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") !important;
  }

  @media (max-width:720px) {
    .ent { padding:14px 16px 16px; }
    .ent-titre { font-size:26px; }
    main { padding:4px 16px 80px; }
  }

  /* Le second volet avait son propre titre de page ; l'en-tete commun le dit
     deja. On le retire plutot que de repeter deux fois la meme information. */
  .tool-pane .page-title, .tool-pane .page-subtitle { display:none !important; }
  .card {
    background:rgba(255,255,255,0.045) !important;
    border:1px solid var(--wc-card-border) !important;
    border-radius:var(--wc-r-l) !important; padding:16px !important; margin-bottom:0 !important;
  }
  .card-title { display:none !important; }

  /* ══ Corrections mobile ═══════════════════════════════════════════════════ */

  /* Un controle segmente reste horizontal, sinon ce n'est plus un segment mais
     deux boutons empiles. La regle d'origine le passait en colonne sous 640 px. */
  @media (max-width:640px) {
    .tool-switch { flex-direction:row !important; max-width:none !important; }
    /* Le selecteur est hors de <main> : sans marge propre il touchait les bords
       de l ecran (4 px mesures). On lui donne la meme gouttiere que le contenu. */
    .tool-switch { margin-left:16px !important; margin-right:16px !important; }
    .tool-switch button { padding:9px 8px !important; font-size:12.5px !important; }
  }

  /* Le pied de page etait present en double (un par volet, tous deux remontes
     au niveau du corps). On n'en affiche qu'un. */
  .page-footer[data-doublon] { display:none !important; }

  /* Cibles tactiles : sous 44 px, on vise a cote. Les pastilles de couleur
     faisaient 28 px, les champs 39. */
  @media (pointer:coarse) {
    input[type="color"] { width:44px !important; height:44px !important; }
    .color-value { min-height:44px !important; }
    .copy-btn { width:44px !important; height:44px !important; }
    /* Le curseur : tentative d'elargissement abandonnee. Deplacer la piste vers
       le pseudo-element faisait tomber la hauteur de l'element a 4 px au lieu
       de l'elargir — meme une hauteur forcee en ligne restait sans effet. On
       agrandit donc le POUCE, qui est la vraie cible du doigt, et on laisse la
       barre telle qu'elle etait. */
    input[type="range"]::-webkit-slider-thumb { width:26px !important; height:26px !important; }
    input[type="range"]::-moz-range-thumb { width:26px !important; height:26px !important; }
    .preset-card { padding:10px !important; }
    /* Les derniers controles sous 44 px : le champ d'adresse du logo, la ligne
       « Templates » et ses deux boutons. On les met tous a la meme hauteur. */
    #lt-tpl-name, #lt-tpl-name + button, .add-presenter-btn, .reset-btn,
    input[type="text"]:not(.color-value) { min-height:44px !important; }
  }

  /* ══ Presentateurs : rangees compactes ════════════════════════════════════ */

  /* Le badge de session etait style par « nav .nav-user ». Le nouvel en-tete
     est un <header>, pas un <nav> : il avait donc perdu tout son habillage et
     s'affichait en texte brut. */
  .ent-haut .nav-user {
    display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
    padding:5px 12px; 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;
  }
  .ent-haut .nav-user:hover { background:rgba(255,69,58,0.15);
    border-color:rgba(255,69,58,0.3); color:var(--wc-red); }
  .ent-haut .nav-user .x { opacity:.5; font-size:10px; }
  .ent-haut .ent-logo { margin-left:auto; }

  /* Une rangee, pas une fiche : pastille, identite, actions. Le detail vit
     dessous et ne se montre que replie ouvert. */
  .presenter-card { padding:0 !important; margin-bottom:8px !important; border-radius:var(--wc-r-m) !important; }
  .presenter-header { margin-bottom:0 !important; gap:8px; padding:9px 10px 9px 12px; }
  .presenter-header-left { flex:1; min-width:0; }
  .presenter-ident { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
  .presenter-ident b { font-size:14px; font-weight:650; color:var(--wc-text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .presenter-ident span { font-size:12px; color:var(--wc-text-secondary);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .presenter-label { display:none !important; }
    /* « PRESENTATEUR 1 » en majuscules */

  /* Le detail : ferme par defaut, ouvert a la demande. */
  .presenter-corps { display:none; padding:0 12px 12px; }
  .presenter-card.ouvert .presenter-corps { display:block; }
  .presenter-card.ouvert .presenter-plier svg { transform:rotate(90deg); }
  .presenter-plier {
    background:none; border:none; padding:0; width:30px; height:30px; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--wc-text-secondary);
  }
  .presenter-plier svg { width:16px; height:16px; transition:transform .18s; }
  .presenter-plier:hover { color:var(--wc-text); }

  /* Dans une carte presentateur, l'adresse se resume a un bouton qui la copie.
     Cette regle ne doit viser QUE les cartes : la meme classe sert aussi a la
     ligne d'adresse du logo, qu'elle faisait disparaitre. */
  .presenter-card .presenter-url { display:none !important; }
  .presenter-header .copy-btn {
    width:34px !important; height:34px !important; min-height:0 !important;
    padding:0 !important; font-size:0 !important; flex:0 0 auto;
  }
  @media (pointer:coarse) { .presenter-header .copy-btn { width:40px !important; height:40px !important; } }