/* charte.css — World Café IES UTTOP × France Travail.
   Charte reconstituée des affichettes officielles : bande navy, onglet jaune,
   accent vert UTTOP, codes couleur par table. KISSES : variables CSS, polices système.
   Les custom properties sur :root sont héritées dans les Shadow DOM des <sis-wc-*>. */

:root {
  /* couleurs marque */
  --wc-navy:       #0C3C60;
  --wc-navy-deep:  #082c47;
  --wc-green:      #3DBE8B;
  --wc-yellow:     #F4C20D;
  --wc-indigo:     #4A5BD4;
  --wc-teal:       #1FA98F;
  --wc-pink:       #EC6FB0;
  --wc-violet:     #7A5BD4;

  /* couleurs par table (id 1→7) */
  --wc-t1: #3DBE8B;
  --wc-t2: #4A5BD4;
  --wc-t3: #1FA98F;
  --wc-t4: #F4C20D;
  --wc-t5: #EC6FB0;
  --wc-t6: #0C3C60;
  --wc-t7: #7A5BD4;

  /* surfaces */
  --wc-bg:        #eef1f4;
  --wc-card:      #ffffff;
  --wc-ink:       #0C3C60;
  --wc-ink-soft:  #5a6b7b;
  --wc-line:      #dfe4ea;
  --wc-shadow:    0 6px 22px rgba(12,60,96,.10);
  --wc-radius:    16px;
  --wc-radius-sm: 10px;

  --wc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--wc-font);
  background: var(--wc-bg);
  color: var(--wc-ink);
  -webkit-font-smoothing: antialiased;
}

/* ----- bandeau d'en-tête type affichette ----- */
.wc-header {
  background: var(--wc-navy);
  color: #fff;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 50;
}
.wc-header::before { /* onglet jaune */
  content: ""; width: 8px; height: 30px; border-radius: 3px;
  background: var(--wc-yellow); flex: none;
}
.wc-header h1 { font-size: 1.05rem; margin: 0; font-weight: 700; line-height: 1.15; }
.wc-header .sub { font-size: .72rem; opacity: .85; font-weight: 400; }
.wc-header .spacer { flex: 1; }
.wc-cobrand { font-size: .68rem; opacity: .9; text-align: right; line-height: 1.2; }

/* logo "U" UTTOP simplifié (carrés multicolores), pur CSS */
.wc-logo { width: 30px; height: 30px; border-radius: 6px; flex: none;
  background:
    linear-gradient(135deg, var(--wc-green) 0 50%, transparent 50%),
    linear-gradient(45deg, var(--wc-violet) 0 50%, var(--wc-indigo) 50%);
  background-blend-mode: normal; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* ----- conteneur app ----- */
.wc-app { max-width: 720px; margin: 0 auto; padding: 16px 14px 96px; }
.wc-app--wide { max-width: 1280px; }

/* ----- cartes / blocs ----- */
.wc-card {
  background: var(--wc-card); border-radius: var(--wc-radius);
  box-shadow: var(--wc-shadow); padding: 18px; margin: 0 0 14px;
  border-left: 6px solid var(--wc-line);
}
.wc-card h2 { margin: 0 0 8px; font-size: 1rem; }
.wc-muted { color: var(--wc-ink-soft); font-size: .85rem; }

/* ----- boutons ----- */
.wc-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--wc-navy); color: #fff; padding: 12px 18px; border-radius: 999px;
  transition: filter .15s, transform .05s;
}
.wc-btn:hover { filter: brightness(1.08); }
.wc-btn:active { transform: translateY(1px); }
.wc-btn--ghost { background: transparent; color: var(--wc-navy); box-shadow: inset 0 0 0 2px var(--wc-navy); }
.wc-btn--green { background: var(--wc-green); }
.wc-btn--block { display: block; width: 100%; }
.wc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----- champs ----- */
.wc-field { display: block; margin: 0 0 12px; }
.wc-field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.wc-field .opt { color: var(--wc-ink-soft); font-weight: 400; }
.wc-input, .wc-textarea, .wc-select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-sm); font: inherit; background: #fff; color: var(--wc-ink);
}
.wc-input:focus, .wc-textarea:focus { outline: 2px solid var(--wc-green); border-color: transparent; }
.wc-textarea { min-height: 90px; resize: vertical; }

/* ----- chips / pastilles ----- */
.wc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; background: #eef2f6; font-size: .8rem; font-weight: 600;
}
.wc-badge { display:inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--wc-green); color:#fff; font-size:.72rem; font-weight:700; text-align:center; }

/* ----- barre de navigation basse (participant mobile) ----- */
.wc-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; background: #fff; border-top: 1px solid var(--wc-line);
  box-shadow: 0 -4px 18px rgba(12,60,96,.08);
}
.wc-nav button {
  flex: 1; border: 0; background: none; padding: 9px 4px 7px; cursor: pointer;
  color: var(--wc-ink-soft); font: inherit; font-size: .68rem; display: flex;
  flex-direction: column; align-items: center; gap: 3px;
}
.wc-nav button .ic { font-size: 1.25rem; line-height: 1; }
.wc-nav button[aria-current="true"] { color: var(--wc-navy); font-weight: 700; }

/* accessibilité */
.wc-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }