@font-face { font-family: 'Geist'; src:url('/fonts/geist-latin.woff2') format('woff2');
               font-weight:100 900; font-style:normal; font-display:swap;
               unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
  @font-face { font-family: 'Geist'; src:url('/fonts/geist-latin-ext.woff2') format('woff2');
               font-weight:100 900; font-style:normal; font-display:swap;
               unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg: var(--wc-bg); --text: var(--wc-text); --accent: var(--wc-accent);
    --card-bg: var(--wc-card-bg); --card-border:rgba(255,255,255,0.1);
    --separator: var(--wc-separator); --text-secondary: var(--wc-text-secondary); --text-tertiary: var(--wc-text-tertiary);
    --input-bg:rgba(10,18,40,0.8); --input-border:rgba(var(--wc-bleu-vif-rgb),0.2);
    --input-focus:rgba(var(--wc-bleu-vif-rgb),0.55); --danger:var(--wc-rouge-vif);
  }
  html,body { background:var(--bg); color:var(--text); font-family:var(--wc-police);
              min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-0.012em; }
  .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%); }

  header { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr;
           align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--separator); }
  header img { height:26px; }
  header .titre { font-size:15px; font-weight:600; }
  header .droite { text-align:right; font-size:12px; color:var(--text-tertiary); }
  .lien-retour { color:var(--text-secondary); text-decoration:none; font-size:13px; white-space:nowrap; }
  .lien-retour:hover { color:var(--accent); }
  header .titre { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:640px) {
    header { grid-template-columns:auto 1fr auto; gap:10px; padding:12px 14px; }
    /* Seule la fleche subsiste : le libelle complet ne tient pas et cassait la grille. */
    .lien-retour .mot { display:none; }
    .lien-retour { font-size:16px; }
    header .titre { font-size:13.5px; }
    header img { height:18px !important; }
    main { padding:14px 14px 32px; }
  }

  main { position:relative; z-index:1; display:grid; grid-template-columns:300px 1fr 1fr;
         gap:18px; padding:18px 22px 40px; align-items:start; max-width:1700px; margin:0 auto; }
  @media (max-width:1200px) { main { grid-template-columns:260px 1fr; } .apercu-col { grid-column:1/-1; } }
  @media (max-width:820px)  { main { grid-template-columns:1fr; } }

  .carte { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--wc-r-l); padding:16px; }
  .carte + .carte { margin-top:14px; }
  h2 { font-size: var(--wc-surtitre-taille); text-transform: var(--wc-surtitre-casse); letter-spacing: var(--wc-surtitre-espacement); color: var(--wc-surtitre-couleur);
       font-weight: var(--wc-surtitre-graisse); margin-bottom:12px; }

  .liste-prof { display:flex; flex-direction:column; gap:6px; }
  .prof-item { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:var(--wc-r-m);
               border:1px solid transparent; cursor:pointer; font-size:13.5px; }
  .prof-item:hover { background:rgba(255,255,255,0.05); }
  .prof-item.actif { background:rgba(var(--wc-accent-rgb),0.12); border-color:rgba(var(--wc-accent-rgb),0.35); }
  .prof-item .pastille { width:11px; height:11px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); }
  .prof-item .nom { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .prof-item .fige { font-size:10px; color:var(--text-tertiary); }

  label { display:block; font-size: var(--wc-etiquette-taille); text-transform: var(--wc-etiquette-casse); letter-spacing: var(--wc-etiquette-espacement);
          color: var(--wc-etiquette-couleur); font-weight: var(--wc-etiquette-graisse); margin-bottom:5px; }
  input[type="text"], select, textarea, input[type="number"] {
    width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--wc-r-s);
    padding:8px 11px; color:var(--text); font-family:inherit; font-size:13.5px; }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--input-focus); }
  .champ { margin-bottom:12px; }
  .duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  .coul-grille { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .coul { display:flex; align-items:center; gap:8px; background:var(--input-bg);
          border:1px solid var(--input-border); border-radius:var(--wc-r-s); padding:6px 9px; }
  .coul input[type="color"] { width:28px; height:28px; border:1px solid rgba(255,255,255,.22);
                              background:none; padding:0; border-radius:var(--wc-r-s); cursor:pointer;
                              flex:0 0 auto; }
  /* Sans ces deux regles, Chromium dessine un large cadre clair autour d une pastille
     minuscule : une couleur sombre y etait presque invisible. */
  .coul input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
  .coul input[type="color"]::-webkit-color-swatch { border:none; border-radius:var(--wc-r-xs); }
  .coul span { font-size:11.5px; color:var(--text-secondary); }

  .bloc-l { display:flex; flex-direction:column; gap:5px; }
  .bloc-r { display:flex; align-items:center; gap:9px; background:var(--input-bg);
            border:1px solid var(--input-border); border-radius:var(--wc-r-s); padding:7px 10px; font-size:13px; }
  .bloc-r.off { opacity:.42; }
  .bloc-r .nom { flex:1; }
  .bloc-r button { background:rgba(255,255,255,0.07); border:1px solid var(--card-border); color:var(--text);
                   width:26px; height:26px; border-radius:var(--wc-r-s); cursor:pointer; font-size:12px; line-height:1;
                   display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .bloc-r button:hover:not(:disabled) { background:rgba(var(--wc-accent-rgb),.22); }
  .bloc-r button:disabled { opacity:.25; cursor:default; }
  .bloc-r input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

  .btn { background:var(--accent); color:#fff; border:none; border-radius:var(--wc-r-s); padding:9px 14px;
         font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .btn:hover { filter:brightness(1.1); }
  .btn-sec { background:rgba(255,255,255,0.08); color:var(--text); border:1px solid var(--card-border); }
  .btn-dgr { background:rgba(239,68,68,0.14); color:var(--wc-rouge-corail); border:1px solid rgba(239,68,68,0.35); }
  .btn-sm { padding:6px 11px; font-size:12px; }
  .barre { display:flex; gap:8px; flex-wrap:wrap; }

  .apercu-col { position:sticky; top:16px; }
  .apercu-tete { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  .cadre { background:#fff; border-radius:var(--wc-r-m); overflow:auto; border:1px solid var(--card-border);
           height:min(76vh,900px); position:relative; }
  .zoom { position:relative; }
  .cadre iframe { position:absolute; top:0; left:0; border:0;
                  transform-origin:top left; background:#fff; display:block; }
  .etat { font-size:12px; color:var(--text-tertiary); }
  .logo-apercu { max-height:34px; max-width:150px; background:rgba(255,255,255,.06);
                 border-radius:var(--wc-r-s); padding:4px 7px; display:block; }
  .aide { font-size:11.5px; color:var(--text-tertiary); line-height:1.5; margin-top:8px; }
  .toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:999;
           background:rgba(20,28,48,.97); border:1px solid var(--card-border); border-radius:var(--wc-r-m);
           padding:10px 16px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; }
  .toast.on { opacity:1; }

    /* Cibles tactiles : sur ecran tactile uniquement, ces boutons-icones
       mesuraient 20 a 29 px de haut — trop petits pour le doigt. Aucun effet
       a la souris. */
    @media (pointer: coarse) {
      button,
      .btn {
        min-height: 40px;
        min-width: 40px;
      }
      input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    }