/* ============================================================
   BRAS DROIT — feuille de style
   Registre "concierge / cabinet" : papier crème, encre profonde,
   vert sapin + or. Tout est piloté par les variables ci-dessous,
   pour reskin rapide quand le modèle de facture arrive.
   ============================================================ */

:root {
  /* --- Palette L'ŒIL (reskin ici) --- */
  --paper:      #EEF2F8;
  --surface:    #FFFFFF;
  --surface-2:  #F4F7FB;
  --ink:        #13294B;   /* navy */
  --muted:      #5C6B82;
  --line:       #DEE6F1;
  --line-soft:  #E9EFF7;

  /* Couleurs de marque */
  --navy:       #13294B;
  --blue:       #16A2DC;
  --green:      #16A2DC;   /* "accent primaire" générique = bleu marque */
  --green-deep: #13294B;   /* surfaces sombres = navy */
  --green-soft: #E2F2FB;   /* fond doux bleuté */
  --gold:       #F1592A;   /* highlight / CTA secondaire = orange marque */
  --gold-soft:  #FCE5DC;
  --brand-green:#5FBB46;
  --brand-orange:#F1592A;
  --danger:     #D2402A;

  /* --- Type --- */
  --serif: "Sora", system-ui, sans-serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  /* --- Geometry --- */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(30,27,22,.04), 0 12px 32px -12px rgba(30,27,22,.16);
  --shadow-soft: 0 1px 2px rgba(30,27,22,.04), 0 6px 18px -10px rgba(30,27,22,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(22,162,220,.10), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(241,89,42,.06), transparent 50%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

/* Grain overlay for paper texture */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ============ LAYOUT ============ */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* ============ SIDEBAR ============ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  position: sticky; top: 0; height: 100vh;
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center; padding: 5px;
  background: #fff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
}
.eye { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -.2px; }
.brand-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; letter-spacing: .2px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); padding: 0 10px 8px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border: none; border-radius: var(--r-md);
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-ico { width: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.nav-txt { flex: 1; }
/* Pastille de notification sur une rubrique (ex. attestations à délivrer) */
.nav-badge { flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 1px 3px rgba(229,72,77,.5); }
.nav-badge[hidden] { display: none; }

/* ===== Centre de notifications (cloche flottante) ===== */
.notif-bell { position: fixed; top: 12px; right: 14px; z-index: 1250; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; font-size: 19px; line-height: 1; display: grid; place-items: center; transition: transform .15s, box-shadow .2s; }
.notif-bell[hidden] { display: none; }
.notif-bell:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.notif-bell.is-pulse { animation: notifPulse .7s ease 2; }
@keyframes notifPulse { 0%,100% { transform: none; } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(229,72,77,.5); }
.notif-badge[hidden] { display: none; }
.notif-panel { position: fixed; top: 62px; right: 14px; z-index: 1249; width: min(360px, 92vw); max-height: min(70vh, 560px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); position: sticky; top: 0; background: #fff; }
.notif-readall { background: transparent; border: none; color: #04A9DB; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.notif-readall:hover { text-decoration: underline; }
.notif-empty { padding: 24px 16px; color: var(--muted); font-size: 13.5px; text-align: center; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 13px 16px; background: transparent; border: none; border-bottom: 1px solid var(--surface-2, #f0f2f5); cursor: pointer; transition: background .12s; }
.notif-item:hover { background: var(--surface-2, #f6f8fa); }
.notif-item.is-unread { background: #f3f9ff; }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: transparent; }
.notif-item.is-unread .notif-dot { background: #04A9DB; }
.notif-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.notif-body { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--muted); opacity: .8; margin-top: 2px; }
.nav-item:hover:not(.is-disabled) { background: var(--green-soft); transform: translateX(2px); }
.nav-item.is-active {
  background: var(--green-deep); color: #FBF8F2;
  box-shadow: var(--shadow-soft);
}
.nav-item.is-active .nav-ico { color: var(--gold); }
.nav-item.is-disabled { opacity: .5; cursor: default; }
.nav-soon {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold); font-weight: 700;
}

.ca-card {
  margin-top: auto;
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(22,162,220,.30), transparent 60%),
    var(--green-deep);
  color: #EAF1FB; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.ca-label { font-size: 11px; letter-spacing: .04em; opacity: .72; text-transform: uppercase; font-weight: 600; }
.ca-value {
  font-family: var(--serif); font-weight: 600; font-size: 32px;
  letter-spacing: -.5px; margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.ca-meta { font-size: 12px; opacity: .7; }
.ca-mode {
  position: absolute; top: 14px; right: 14px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  background: rgba(255,255,255,.14); padding: 3px 7px; border-radius: 999px; font-weight: 700;
}

/* ============ MAIN ============ */
.main { padding: 34px 40px 48px; max-width: 1180px; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap; padding-right: 58px;
}
.eyebrow { display: none; }
.title { font-family: var(--serif); font-weight: 600; font-size: 38px; letter-spacing: -.8px; line-height: 1; }
.fm-h1-name { color: var(--gold); }
.topbar-hint { color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 320px; text-align: right; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 26px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

/* ---- Form panel ---- */
.form-panel { padding: 24px; }

.seg {
  position: relative; display: inline-flex; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 22px;
}
.seg-btn {
  position: relative; z-index: 2;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 8px 22px; border-radius: 999px; transition: color .2s ease;
}
.seg-btn.is-on { color: #FBF8F2; }
.seg-glow {
  position: absolute; z-index: 1; top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px); border-radius: 999px;
  background: var(--green); box-shadow: var(--shadow-soft);
  transition: transform .28s cubic-bezier(.5,.1,.2,1);
}
.seg.is-contrat .seg-glow { transform: translateX(100%); }

.fields { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-group { display: contents; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}
.field label .req { color: var(--gold); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: #FFFDF9;
  transition: border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.field .with-unit { position: relative; }
.field .with-unit .unit {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; font-weight: 600; pointer-events: none;
}
.field .with-unit input { padding-right: 34px; }
.section-split {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 2px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.section-split::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---- Actions ---- */
.form-actions { margin-top: 22px; }
.btn-primary {
  position: relative; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; border: none; border-radius: var(--r-md);
  background: var(--green-deep); color: #FBF8F2;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 50% -20%, rgba(181,133,58,.4), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }
.btn-primary.is-loading { pointer-events: none; }
.btn-primary.is-loading .btn-label { opacity: .55; }
.btn-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: var(--gold);
  display: none;
}
.btn-primary.is-loading .btn-spin { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center; min-height: 18px; }
.form-note.err { color: var(--danger); font-weight: 600; }

/* ---- Preview panel ---- */
.preview-panel { padding: 20px; position: sticky; top: 24px; }
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding: 0 4px;
}
.preview-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--green);
  display: inline-flex; align-items: center; gap: 7px;
}
.preview-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.preview-hint { font-size: 11px; color: var(--muted); font-style: italic; }

.sheet-wrap {
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, var(--surface) 12px, var(--surface) 24px);
  border-radius: var(--r-md);
  padding: 26px;
  display: grid; place-items: center;
}
.pdf-preview {
  display: block;
  width: 100%; max-width: 460px;
  aspect-ratio: 1 / 1.414;
  overflow-y: auto; overflow-x: hidden;
  border: none; border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 18px 40px -18px rgba(30,27,22,.45);
  -webkit-overflow-scrolling: touch;
}
.pdf-preview canvas {
  display: block;
  width: 100%; height: auto;
  border-bottom: 1px solid #eee;
}
.sheet {
  width: 100%; max-width: 460px;
  aspect-ratio: 1 / 1.414;
  background: #FFFDF8;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 18px 40px -18px rgba(30,27,22,.45);
  padding: 34px 32px;
  font-size: 10.5px; color: var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
.sheet-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--brand-green) 0 33.3%, var(--blue) 33.3% 66.6%, var(--brand-orange) 66.6% 100%);
}
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-brand { display: flex; align-items: center; gap: 9px; }
.sheet-eye { width: 34px; height: 34px; flex: none; object-fit: contain; }
.sheet-logo {
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy);
  line-height: 1.1; letter-spacing: -.2px;
}
.sheet-logo small { display: block; font-family: var(--sans); font-size: 8px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.sheet-doctype { text-align: right; }
.sheet-doctype b {
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1px; display: block; line-height: 1;
}
.sheet-doctype span { font-size: 8.5px; color: var(--muted); }
.sheet-rule { height: 1px; background: var(--line); margin: 18px 0; }
.sheet-parties { display: flex; justify-content: space-between; gap: 20px; }
.sheet-parties .pcol { flex: 1; }
.sheet-parties h4 { font-size: 7.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 5px; font-weight: 700; }
.sheet-parties p { font-size: 10px; line-height: 1.5; }
.sheet-parties .strong { font-weight: 600; }
.sheet-body { margin-top: 18px; flex: 1; }
.sheet-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.sheet-line .desc { line-height: 1.45; }
.sheet-line .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sheet-prose { font-size: 9.5px; line-height: 1.7; color: #2c2820; }
.sheet-prose p { margin-bottom: 8px; }
.sheet-total {
  margin-top: 16px; align-self: flex-end; min-width: 56%;
  background: var(--green-soft); border-radius: 6px; padding: 11px 14px;
}
.sheet-total .trow { display: flex; justify-content: space-between; font-size: 9.5px; padding: 2px 0; color: var(--muted); }
.sheet-total .ttotal {
  display: flex; justify-content: space-between; margin-top: 6px; padding-top: 7px;
  border-top: 1px solid rgba(44,84,67,.2);
  font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--green-deep);
}
.sheet-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 8px; color: var(--muted);
}
.sheet .ph { color: #B8B0A0; font-style: italic; }

/* ---- Aperçu fidèle facture RIA ---- */
.rs { font-family: Arial, Helvetica, var(--sans); color: #1b1b1b; display: flex; flex-direction: column; height: 100%; font-size: 9px; }
.rs-top { display: flex; justify-content: space-between; gap: 16px; }
.rs-emit { flex: 1; }
.rs-logo { font-weight: 800; font-size: 19px; color: #5bbf3f; letter-spacing: -.5px; line-height: 1; }
.rs-logo span { display: block; font-size: 6.5px; letter-spacing: .22em; font-weight: 700; margin-top: 2px; }
.rs-emit > p { margin-top: 14px; line-height: 1.55; font-size: 9.5px; }
.rs-cli { min-width: 130px; }
.rs-cli h2 { font-size: 27px; font-weight: 800; text-align: right; letter-spacing: -1px; margin-bottom: 20px; color: #111; }
.rs-cli h4 { font-size: 8px; font-weight: 700; }
.rs-cli p { line-height: 1.55; font-size: 9.5px; }
.rs-meta { display: flex; justify-content: space-between; margin-top: 22px; }
.rs-meta div { font-size: 9px; line-height: 1.6; }
.rs-meta div.r { min-width: 130px; }
.rs-meta b { font-size: 9px; }
.rs-sub { font-weight: 700; font-size: 9px; margin: 18px 0 8px; }
.rs-tbl { width: 100%; border-collapse: collapse; font-size: 9px; }
.rs-tbl thead th { background: #6f6f6f; color: #fff; font-size: 8px; text-align: right; padding: 6px 8px; font-weight: 600; }
.rs-tbl thead th:first-child { text-align: left; border-radius: 0; }
.rs-tbl tbody td { padding: 11px 8px; vertical-align: top; }
.rs-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rs-tot { margin-top: 54px; margin-left: auto; width: 54%; }
.rs-tot > div { display: flex; justify-content: space-between; padding: 3px 8px; font-size: 9.5px; font-variant-numeric: tabular-nums; }
.rs-tot > div > span:first-child { font-weight: 700; }
.rs-tot .ttc { font-weight: 700; }
.rs-legal { margin-top: 26px; font-size: 8.5px; line-height: 1.55; }
.rs-prose { font-size: 9.5px; line-height: 1.6; margin-top: 6px; }
.rs-bank { margin-top: auto; background: #d9d9d9; padding: 11px 13px; font-size: 8.5px; }
.rs-bank b { display: block; margin-bottom: 7px; }
.rs-bank-row { display: flex; gap: 24px; }
.rs .ph { color: #b3b3b3; font-style: italic; }

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #FBF8F2;
  padding: 14px 16px 14px 18px; border-radius: 14px;
  box-shadow: var(--shadow); z-index: 200;
  opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  max-width: min(440px, 92vw);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-ico {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--green); color: #fff; font-size: 14px;
}
.toast-title { font-weight: 600; font-size: 14px; }
.toast-sub { font-size: 12px; opacity: .7; margin-top: 1px; }
.toast-action {
  margin-left: 6px; flex: none;
  background: var(--gold); color: var(--ink); text-decoration: none;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
  transition: transform .12s ease;
}
.toast-action:hover { transform: translateY(-1px); }

/* ============ REVEAL ANIM ============ */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d) * 90ms); }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  /* Sidebar = tiroir hors-écran (drawer) ouvert par le burger ☰ */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(84vw, 300px);
    z-index: 1200; transform: translateX(-100%); transition: transform .25s ease;
    gap: 22px; box-shadow: 0 0 60px rgba(0,0,0,.3); overflow-y: auto;
  }
  body.nav-open .sidebar { transform: none; }
  body.side-off .sidebar { display: flex; }    /* le mode replié desktop ne s'applique pas en mobile */
  body.side-off .app { grid-template-columns: 1fr; }
  body .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(18,22,30,.45);
    z-index: 1150; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  .side-open { display: grid !important; }      /* burger toujours visible en mobile */
  .ca-card { margin-top: auto; min-width: 0; }
  .main { padding: 24px 18px 40px; }
  .topbar { padding-left: 44px; }               /* place pour le burger */
  .title { font-size: 30px; }
  .topbar-hint { display: none; }
}

/* ============================================================
   RUBRIQUE "MISE EN PAGE DE DOCS"
   ============================================================ */
.view[hidden] { display: none; }

.lay-types { display: flex; gap: 8px; margin: 0 0 4px; }
.lay-type {
  flex: 1; padding: 12px 10px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line, #e6e2da); background: #fff;
  font: inherit; font-weight: 600; color: #6b6358;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.lay-type span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c); }
.lay-type:hover { transform: translateY(-1px); }
.lay-type.is-on {
  border-color: var(--c); color: #14202E;
  box-shadow: inset 0 0 0 1px var(--c), 0 6px 18px -10px var(--c);
}

.lay-drop {
  border: 1.6px dashed var(--line, #d9d4ca); border-radius: 14px;
  padding: 18px 16px; text-align: center; background: #faf8f4;
  transition: border-color .15s, background .15s; margin-bottom: 10px;
}
.lay-drop.is-over { border-color: #04A9DB; background: #f0fafd; }
/* Zone « contenu brut » (mise en page des contenus) plus grande / plus visible */
#lay-drop { padding: 48px 18px; }
#lay-drop .lay-drop-txt { font-size: 15px; }
.lay-drop-txt { margin: 0; font-size: 13.5px; color: #6b6358; }
.lay-drop-txt b { color: #14202E; }
.lay-drop-name { margin: 8px 0 0; font-size: 12.5px; color: #2E7548; font-weight: 600; }
.lay-link { background: none; border: none; padding: 0; font: inherit; color: #04A9DB; font-weight: 700; cursor: pointer; text-decoration: underline; }

.lay-textarea {
  width: 100%; min-height: 220px; resize: vertical;
  border: 1.5px solid var(--line, #e6e2da); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.55;
  color: #14202E; background: #fff; box-sizing: border-box;
}
.lay-textarea:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.15); }

.lay-out-actions { display: flex; gap: 8px; }
.lay-copy {
  background: #002C52; color: #fff; border: none; border-radius: 10px;
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.lay-copy:hover { background: #013E70; }

.sheet-wrap { position: relative; }
.lay-frame {
  width: 100%; min-height: 70vh; border: 1px solid var(--line, #e6e2da);
  border-radius: 12px; background: #fff; display: block;
}
.lay-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9a9388; font-size: 14px; font-style: italic; pointer-events: none;
}

/* Vue "Mise en page" : aperçu en pleine largeur (sinon le doc 800px wrap) */
#view-layout .workspace { display: block; }
#view-layout .form-panel,
#view-layout .preview-panel { max-width: 900px; margin: 0 auto 18px; }
#view-layout .lay-frame { min-height: 85vh; }

/* L'overlay vide doit disparaître dès qu'un aperçu est rendu */
.lay-empty[hidden] { display: none !important; }

/* Bouton régénérer (force, ignore le cache) */
.lay-regen {
  background: #fff; color: #6b6358; border: 1.5px solid var(--line, #e6e2da);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.lay-regen:hover { border-color: #04A9DB; color: #04A9DB; }

/* ============================================================
   AUTH — overlay login + badge utilisateur
   ============================================================ */
body.auth-locked { overflow: hidden; }
.auth-overlay[hidden] { display: none; }
.auth-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #013E70 0%, #002C52 72%);
}
.auth-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 18px;
  padding: 30px 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-eye { width: 44px; height: 44px; border-radius: 10px; }
.auth-title { margin: 0; font-weight: 800; font-size: 20px; color: #14202E; letter-spacing: .02em; }
.auth-sub { margin: 2px 0 0; font-size: 12.5px; color: #6b6358; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { font-size: 13px; font-weight: 600; color: #14202E; margin: 10px 0 5px; }
.auth-form input {
  border: 1.5px solid #e6e2da; border-radius: 11px; padding: 12px 14px;
  font: inherit; font-size: 15px; color: #14202E; background: #faf8f4;
}
.auth-form input:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.15); background: #fff; }
.auth-submit {
  margin-top: 18px; background: #FF4E0F; color: #fff; border: none; border-radius: 12px;
  padding: 13px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.auth-submit:hover { background: #E5440B; }
.auth-submit:disabled { opacity: .65; cursor: default; }
.auth-msg { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: #2E7548; text-align: center; }
.auth-msg.err { color: #C8392B; }
.auth-foot { margin: 18px 0 0; font-size: 12px; color: #9a9388; text-align: center; }
.auth-foot-link { color: #FF4E0F; font-weight: 700; text-decoration: none; }
.auth-foot-link:hover { text-decoration: underline; }

.auth-userbox { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e6e2da); }
.auth-who { display: flex; flex-direction: column; margin-bottom: 8px; }
.auth-name { font-size: 13.5px; font-weight: 700; color: #14202E; }
.auth-role { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #04A9DB; font-weight: 700; }
.auth-org { font-size: 12.5px; font-weight: 800; color: #002C52; margin-bottom: 8px; padding: 5px 9px; background: #eef4fb; border: 1px solid #d6e4f3; border-radius: 8px; line-height: 1.25; }
.auth-org-sel {
  width: 100%; margin-bottom: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; font-weight: 700; color: #002C52;
  background: #eef4fb; border: 1px solid #d6e4f3; border-radius: 8px; cursor: pointer;
}
.auth-org-sel:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.15); }
.auth-logout {
  width: 100%; background: #fff; color: #8B1A1A; border: 1.5px solid #f0c8c0; border-radius: 10px;
  padding: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.auth-logout:hover { background: #fdf0ee; }
.auth-noaccess { padding: 40px; text-align: center; color: #14202E; }
.auth-noaccess h2 { color: #002C52; }

/* Écran de blocage abonnement (Phase 4) */
.sub-block { position: fixed; inset: 0; z-index: 9000; background: linear-gradient(160deg, #f4f7fb, #e9eef5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sub-block-card { background: #fff; border: 1px solid var(--line, #e6e2da); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(0,44,82,.35); padding: 36px 34px; max-width: 460px; width: 100%; text-align: center; }
.sub-block-ic { font-size: 40px; margin-bottom: 8px; }
.sub-block-card h2 { color: #002C52; font-size: 22px; font-weight: 800; margin: 0 0 12px; text-transform: capitalize; }
.sub-block-card p { color: #14202E; font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; }
.sub-block-note { color: #6b6358; font-size: 13px; }
.sub-block-actions { margin: 18px 0 10px; }
.sub-block-btn { background: #04A9DB; color: #fff; border: none; border-radius: 11px; padding: 12px 24px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.sub-block-btn:hover { background: #0488b0; }
.sub-block-switch { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.sub-switch { background: #fff; border: 1.5px solid var(--line, #e6e2da); border-radius: 10px; padding: 9px; font: inherit; font-size: 13.5px; font-weight: 600; color: #002C52; cursor: pointer; }
.sub-switch:hover { border-color: #04A9DB; color: #0488b0; }

/* ============================================================
   PANNEAU COMPTES (admin)
   ============================================================ */
.cpt-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .cpt-wrap { grid-template-columns: 1fr; } }
.cpt-form { display: flex; flex-direction: column; gap: 12px; }
.cpt-row { display: flex; gap: 12px; }
.cpt-row .cpt-field { flex: 1; }
.cpt-field { display: flex; flex-direction: column; gap: 5px; }
.cpt-field label { font-size: 13px; font-weight: 600; color: #14202E; }
.cpt-field input, .cpt-field select {
  border: 1.5px solid var(--line, #e6e2da); border-radius: 11px; padding: 11px 13px;
  font: inherit; font-size: 14.5px; color: #14202E; background: #faf8f4;
}
.cpt-field input:focus, .cpt-field select:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.15); background: #fff; }

.cpt-list { overflow-x: auto; }
.cpt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cpt-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9a9388; padding: 8px 10px; border-bottom: 1.5px solid var(--line, #e6e2da); }
.cpt-table td { padding: 11px 10px; border-bottom: 1px solid #f0ece4; color: #14202E; }
.cpt-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cpt-admin { background: #FDE9E2; color: #C43A07; }
.cpt-formateur { background: #E5F5FB; color: #0289B0; }
.cpt-eleve { background: #EEF6E5; color: #4A9831; }
.cpt-empty { color: #9a9388; font-size: 13.5px; padding: 16px 4px; }
.cpt-empty.err { color: #C8392B; }

.cpt-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #14202E; font-weight: 600; cursor: pointer; margin: 2px 0; }
.cpt-check input { width: 16px; height: 16px; accent-color: #04A9DB; }

/* --- Comptes : nettoyage affichage --- */
#view-comptes .cpt-wrap { max-width: 1040px; grid-template-columns: 360px 1fr; }
#view-comptes .cpt-field input,
#view-comptes .cpt-field select { background: #fff; border: 1.5px solid #e3ddd2; }
#view-comptes .cpt-field input:focus,
#view-comptes .cpt-field select:focus { border-color: #04A9DB; background: #fff; }
#view-comptes .cpt-list-panel { min-height: 220px; }
#view-comptes .cpt-table tbody tr:hover td { background: #faf8f4; }
#view-comptes .cpt-table td { vertical-align: middle; }
#view-comptes .preview-head { margin-bottom: 14px; }

/* --- Comptes : fix débordement des champs (flex) --- */
#view-comptes .cpt-wrap { grid-template-columns: 400px 1fr; }
#view-comptes .cpt-field { min-width: 0; }
#view-comptes .cpt-field input,
#view-comptes .cpt-field select { width: 100%; min-width: 0; box-sizing: border-box; }
#view-comptes .cpt-form { box-sizing: border-box; }

/* --- Comptes : padding intérieur des panneaux (sinon champs collés aux bords) --- */
#view-comptes .cpt-form-panel,
#view-comptes .cpt-list-panel { padding: 24px 26px; box-sizing: border-box; }

/* --- Comptes : hiérarchie + révocation --- */
.cpt-super_admin { background: #efe6fb; color: #6b35c9; }
.cpt-act-cell { text-align: right; white-space: nowrap; }
.cpt-act { border: 1.5px solid; border-radius: 9px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fff; transition: background .15s; }
.cpt-revoke { color: #8B1A1A; border-color: #f0c8c0; }
.cpt-revoke:hover { background: #fdf0ee; }
.cpt-reactivate { color: #2E7548; border-color: #bfe0c8; }
.cpt-reactivate:hover { background: #eaf5ee; }
.cpt-suspended { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #C8392B; }
.cpt-row-off td { opacity: .5; }
.cpt-row-off td:last-child { opacity: 1; }
.cpt-formations-btn { color: #1a66ff; border-color: #c3d6ff; }
.cpt-formations-btn:hover { background: #eef3ff; }
/* plusieurs boutons d'action (Formations + Révoquer) empilés et alignés à droite */
.cpt-act-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cpt-act-cell .cpt-act { margin: 0; }
.cpt-fa-row > td { background: #f7f9fc; padding: 0; }
.cpt-fa-edit { padding: 14px 16px; }
.cpt-fa-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5A6B80; margin: 0 0 10px; }
.cpt-fa-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; margin-bottom: 12px; }
.cpt-fa-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cpt-fa-note { font-size: 12.5px; color: #2E7548; }
.cpt-fa-note.err { color: #C8392B; }
.cpt-fa-load { color: #9a9388; font-size: 13px; margin: 0; }

/* ============ FORMATION ============ */
.lay-integrate {
  border: 1.5px solid #1a66ff; color: #1a66ff; background: #fff;
  border-radius: 9px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.lay-integrate:hover { background: #eef3ff; }

.fm-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.fm-side { padding: 20px; position: sticky; top: 24px; }
.fm-content { padding: 20px; }
.fm-frow { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.fm-fsel { flex: 1; min-width: 0; font-weight: 600; }
/* Activer / désactiver une formation */
.fm-active-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.fm-active-state { font-size: 12.5px; font-weight: 700; color: #2E7548; }
.fm-active-row.is-off .fm-active-state { color: #b3261e; }
.fm-active-btn { border: 1.5px solid #f0c8c0; background: #fff; border-radius: 9px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #8B1A1A; transition: background .15s; }
.fm-active-btn:hover { background: #fdf0ee; }
.fm-active-row.is-off .fm-active-btn { color: #2E7548; border-color: #cdead7; }
.fm-active-row.is-off .fm-active-btn:hover { background: #eef8f1; }
.fm-active-btn.is-armed { color: #fff; background: #b3261e; border-color: #b3261e; }
.fm-active-warn { flex-basis: 100%; font-size: 11.5px; color: #b3261e; font-weight: 600; }
.fm-modules-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fm-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); }
.fm-addmod { border: 1.5px solid var(--line, #d8dde3); background: #fff; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink); }
.fm-addmod:hover { background: var(--surface-2); }
.fm-addfiche { border: 1.5px solid #1a66ff; color: #1a66ff; background: #fff; border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.fm-addfiche:hover { background: #eef3ff; }
.fm-genquiz { border: 1.5px solid #7c3aed; color: #7c3aed; background: #fff; border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fm-genquiz:hover:not(:disabled) { background: #f3edff; }
.fm-genquiz:disabled { opacity: .65; cursor: default; }
.fm-dot-quiz { background: #7c3aed; }
.fm-side-actions { display: flex; align-items: center; gap: 6px; }

/* progression élève */
.fm-prog { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.fm-prog-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fm-prog-bar span { display: block; height: 100%; border-radius: 999px; background: #68C043; transition: width .3s; }
.fm-prog-txt { font-size: 11px; font-weight: 700; color: var(--muted); flex: none; }
.fm-check { color: #2E7548; font-weight: 800; font-size: 13px; flex: none; }
.fm-lesson.is-done .fm-lesson-t { color: #2E7548; }
.fm-done-btn { border: 1.5px solid #bfe0c8; color: #2E7548; background: #fff; border-radius: 9px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.fm-done-btn:hover { background: #eaf5ee; }
.fm-done-btn.is-done { background: #2E7548; color: #fff; border-color: #2E7548; }

/* réordonnancement — boutons plus grands et plus visibles (lisibles pour tous) */
.fm-row-tools { display: flex; align-items: center; gap: 3px; flex: none; }
.fm-mv { opacity: .55; font-size: 16px; font-weight: 800; color: var(--muted); padding: 3px 6px; border-radius: 6px; line-height: 1; }
.fm-lesson:hover .fm-mv, .fm-lesson:hover .fm-del { opacity: 1; }
.fm-mv:hover { opacity: 1 !important; background: var(--surface-2); color: var(--ink); }

/* suivi élèves */
.fm-suivi { width: 100%; overflow-x: auto; }
.fm-sv-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: 10px; overflow: hidden; }
.fm-sv-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: 1.5px solid var(--line, #e6e8eb); background: var(--surface-2); white-space: nowrap; }
.fm-sv-table td { padding: 10px 12px; border-bottom: 1px solid var(--surface-2); }
.fm-sv-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
.fm-sv-prog { font-weight: 700; color: var(--muted); white-space: nowrap; }
.fm-sv-cell { text-align: center; font-weight: 800; }
.fm-sv-cell.ok { color: #2E7548; cursor: pointer; }
.fm-sv-cell.ok:hover { background: #eaf5ee; }
.fm-sv-cell.no { color: #c9ced6; }
.fm-sv-hint { font-size: 12px; color: var(--muted); margin: 12px 2px 0; }

/* ===== Suivi : maître-détail (élèves | fiches de l'élève) ===== */
.sv-split { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; align-items: start; }
.sv-students { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; padding-right: 2px; }
.sv-student-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name prog" "bar bar"; gap: 4px 8px; align-items: center; text-align: left; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; transition: border-color .12s, background .12s; }
.sv-student-item:hover { border-color: #c9dbff; background: #f7faff; }
.sv-student-item.is-active { border-color: #04A9DB; background: #eef7fc; box-shadow: inset 3px 0 0 #04A9DB; }
.sv-st-name { grid-area: name; font-weight: 700; color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-st-prog { grid-area: prog; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sv-st-bar { grid-area: bar; height: 6px; border-radius: 999px; background: #e7ebf0; overflow: hidden; }
.sv-st-bar > span { display: block; height: 100%; background: #04A9DB; border-radius: 999px; }
.sv-lessons { min-width: 0; }
.sv-lessons-head { font-family: var(--serif); font-size: 16px; color: var(--ink); margin: 2px 0 12px; }
.sv-mod { margin: 0 0 14px; }
.sv-mod-t { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.sv-les-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 5px; background: #fff; }
.sv-les-row.is-click { cursor: pointer; }
.sv-les-row.is-click:hover { border-color: #04A9DB; background: #f5fbfd; }
.sv-les-ico { flex: none; }
.sv-les-t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-les-status { flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sv-les-status.sv-st-done { color: #2E7548; }
.sv-les-status.sv-st-score { color: #002C52; background: #e2f2fb; padding: 2px 9px; border-radius: 999px; }
.sv-les-status.sv-st-draft { color: #b5651d; }
.sv-les-status.sv-st-none { color: #c9ced6; font-weight: 600; }
/* Appréciations du formateur (Suivi) + retour dans la fiche (élève) */
.sv-les-block { margin: 0 0 9px; }
.sv-les-block .sv-les-row { margin-bottom: 4px; }
.sv-appr { position: relative; }
.sv-appr-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12.5px; color: var(--ink); resize: vertical; min-height: 36px; background: #fff; }
.sv-appr-in:focus { outline: none; border-color: #04A9DB; background: #f8fcfe; }
.sv-appr-in::placeholder { color: #b6bcc6; }
.sv-appr-ok { position: absolute; right: 9px; bottom: 9px; font-size: 11px; font-weight: 700; color: #2E7548; pointer-events: none; white-space: nowrap; }
.sv-appr-block { margin: 6px 0 4px; }
.sv-appr-lab { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.sv-appr-formation { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fm-appr { background: #eef6f9; border: 1px solid #cfe6ef; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.fm-appr-lab { font-size: 12px; font-weight: 800; color: #0E7490; }
.fm-appr-txt { margin: 5px 0 0; color: var(--ink); font-size: 14px; white-space: pre-wrap; }
/* Attestation de réussite dans le Suivi (validation par le formateur) */
.sv-attest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px 14px; background: #eef6f9; border: 1px solid #cfe6ef; border-radius: 12px; }
.sv-attest.is-done { background: #eef8f1; border-color: #cdead7; }
.sv-attest-lab { flex: 1; min-width: 140px; font-weight: 700; color: #0E7490; font-size: 13.5px; }
.sv-attest.is-done .sv-attest-lab { color: #2E7548; }
.sv-att-note { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.sv-att-note.err { color: #b3261e; font-weight: 600; }
/* Quiz côté élève : message à la place du bouton « terminé » */
.fm-quiz-hint { background: #f3f0ff; border: 1px solid #d9d2f5; color: #4a3f7a; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
@media (max-width: 760px) { .sv-split { grid-template-columns: 1fr; } .sv-students { flex-direction: row; flex-wrap: wrap; max-height: none; } .sv-student-item { width: auto; flex: 1 1 45%; } }

/* ============ MENU RÉTRACTABLE ============ */
.side-toggle {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-soft); transition: background .15s;
}
.side-toggle:hover { background: var(--surface-2); }
.brand .side-toggle { margin-left: auto; flex: none; }
.side-open { position: fixed; top: 14px; left: 14px; z-index: 1300; display: none; }
body.side-off .side-open { display: grid; }
.nav-overlay { display: none; }   /* overlay du tiroir mobile — activé seulement sous 820px */
/* sidebar masquée -> le main devient le 1er enfant de la grille : une seule colonne */
body.side-off .sidebar { display: none; }
/* sans sidebar : la colonne de la grille est dimensionnée et CENTRÉE (méthode fiable,
   pas de marge auto sur un grid item). Le main remplit cette colonne élargie. */
body.side-off .app { grid-template-columns: min(1480px, 94vw); justify-content: center; }
body.side-off .main { max-width: none; }
/* on relâche les caps internes de CHAQUE rubrique pour profiter de la largeur gagnée */
body.side-off #view-comptes .cpt-wrap { max-width: none; }
body.side-off #view-layout .preview-panel { max-width: none; } /* colonnes équilibrées */
body.side-off .workspace { gap: 32px; }
body.side-off .oia-list { max-width: 980px; margin-inline: auto; }
body.side-off .cm-panel { max-width: 1040px; margin-inline: auto; }

/* ============ VIDÉO DE FICHE (Formation) ============ */
.fm-video { width: 100%; margin-bottom: 16px; }
.fm-video-box {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(30,27,22,.45);
}
.fm-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fm-video-guard { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,12,20,.40); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s; }
.fm-video-guard.is-playing { background: transparent; }
.fm-video-guard::before { content: ""; position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); background: rgba(0,0,0,.78); border-radius: 50%; transition: opacity .2s; }
.fm-video-guard::after { content: ""; position: absolute; left: calc(50% + 3px); top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 16px 0 16px 25px; border-color: transparent transparent transparent #fff; transition: opacity .2s; }
.fm-video-guard.is-playing::before, .fm-video-guard.is-playing::after { opacity: 0; }
.fm-video-guard.is-playing:hover::before, .fm-video-guard.is-playing:hover::after { opacity: .9; }

/* ============ AJUSTEMENT RAPIDE (mise en page de docs) ============ */
.lay-tweak { margin-top: 22px; }
.lay-tweak-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1.5px solid var(--line, #d8dde3); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: 13.5px; background: #fff;
  margin-bottom: 10px;
}
.lay-tweak-text:focus { outline: none; border-color: #1a66ff; }
.lay-tweak .btn-primary { width: auto; padding: 10px 18px; font-size: 13.5px; }
.fm-tree { display: flex; flex-direction: column; gap: 14px; max-height: 64vh; overflow-y: auto; }
.fm-module-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fm-module-t { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--ink); min-width: 0; }
.fm-mod-tools { display: flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; }
.fm-addfiche { white-space: nowrap; }
.fm-mini { border: none; background: transparent; cursor: pointer; font-size: 17px; opacity: .7; padding: 4px 7px; border-radius: 6px; line-height: 1; }
.fm-mini:hover { opacity: 1; background: var(--surface-2); }
.fm-lessons { display: flex; flex-direction: column; gap: 4px; }
.fm-lesson {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid transparent; background: var(--surface-2);
  border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s;
}
.fm-lesson:hover { background: var(--surface); border-color: var(--line, #e6e8eb); }
.fm-lesson.is-on { background: #eef3ff; border-color: #c9dbff; }
.fm-lesson-t { flex: 1; min-width: 0; overflow: hidden; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fm-dot-module { background: #04A9DB; }
.fm-dot-exercice { background: #68C043; }
.fm-dot-annexe { background: #FF4E0F; }
.fm-del { opacity: .55; color: #8B1A1A; font-size: 15px; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1; }
.fm-lesson:hover .fm-del { opacity: 1; }
.fm-del:hover { opacity: 1 !important; background: #fdf0ee; }
.fm-empty-mod { font-size: 12px; color: var(--muted); padding: 4px 2px; }
.fm-content { min-height: 60vh; }
.fm-content .sheet-wrap { padding: 0; background: none; }
#fm-frame { width: 100%; min-height: 70vh; border: 1px solid var(--line, #e6e8eb); border-radius: 10px; background: #fff; }
.fm-select { border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 12.5px; background: #fff; cursor: pointer; }
/* Fallback si customselect.js ne tourne pas : réduit les pastilles emoji du menu natif. */
.fm-select option { font-size: 7px; }

/* ============ Menu déroulant "fait main" (customselect.js) ============
   Petit point plat (9px) découplé d'un texte lisible — ce que le natif ne permet pas. */
.cs { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.cs > select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; opacity: 0; pointer-events: none; }
.cs-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 170px;
  border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 7px 11px;
  font: inherit; font-size: 13px; line-height: 1.2; background: #fff; color: var(--ink, #13294B);
  cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s;
}
.cs-btn:hover { border-color: #04A9DB; }
.cs-open .cs-btn { border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.12); }
.cs-cur { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cs-cur .cs-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-ph .cs-lab { color: #9aa3b2; }
.cs-arrow { flex: none; width: 8px; height: 8px; margin-left: 6px; border-right: 2px solid #98a2b3; border-bottom: 2px solid #98a2b3; transform: rotate(45deg) translate(-1px,-1px); transition: transform .15s; }
.cs-open .cs-arrow { transform: rotate(-135deg) translate(-1px,-1px); }
.cs-list {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; min-width: 100%; max-width: 340px;
  max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--line, #e6e9ef);
  border-radius: 11px; box-shadow: 0 14px 36px rgba(8,18,40,.17); padding: 5px;
}
.cs-opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink, #13294B); white-space: nowrap; }
.cs-opt:hover, .cs-opt.cs-active { background: #eef6fb; }
.cs-opt.cs-sel { font-weight: 700; }
.cs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cs-dot-green { background: #2ec56b; }
.cs-dot-orange { background: #f5a623; }
.cs-dot-red { background: #f0453a; }

/* ============ Fiche profil formateur (→ page Équipe publique) ============ */
.auth-fiche { display: block; width: 100%; margin: 0 0 8px; background: #fff; border: 1.5px solid var(--line, #e6e9ef); border-radius: 10px; padding: 9px; font: inherit; font-size: 13.5px; font-weight: 600; color: #13294B; cursor: pointer; transition: border-color .15s, color .15s; }
.auth-fiche:hover { border-color: #04A9DB; color: #0488b0; }
.fiche-ov { position: fixed; inset: 0; z-index: 200; background: rgba(8,18,40,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fiche-card { background: #fff; border-radius: 16px; max-width: 480px; width: 100%; max-height: 90vh; overflow: auto; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(8,18,40,.3); position: relative; }
.fiche-x { position: absolute; top: 12px; right: 15px; border: none; background: none; font-size: 26px; line-height: 1; color: #9aa3b2; cursor: pointer; }
.fiche-h { margin: 0 0 6px; font-size: 20px; }
.fiche-sub { margin: 0 0 16px; font-size: 13px; color: #6b7385; line-height: 1.5; }
.fiche-row { display: flex; gap: 12px; }
.fiche-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #13294B; margin-bottom: 13px; flex: 1; }
.fiche-card input, .fiche-card textarea { border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; font-weight: 400; resize: vertical; }
.fiche-card input:focus, .fiche-card textarea:focus { outline: none; border-color: #04A9DB; }
.fiche-check { flex-direction: row !important; align-items: center; gap: 9px !important; background: #f1f9f3; border: 1px solid #cde9d5; padding: 11px 13px; border-radius: 10px; }
.fiche-check input { width: 17px; height: 17px; flex: none; }
.fiche-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.fiche-note { font-size: 13px; color: #6b7385; }
.fiche-save { background: #04A9DB; color: #fff; border: none; border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.fiche-save:hover { background: #0488b0; }
.fiche-save:disabled { opacity: .6; cursor: default; }
/* Tailles par contexte */
.db-picker .cs { display: block; width: 100%; }
.db-picker .cs-btn { font-size: 15px; padding: 13px 15px; }
.sv-bar .cs { width: 100%; max-width: 420px; }
.ql-field .cs { width: 100%; }

/* modal d'intégration */
.fm-modal-ov { position: fixed; inset: 0; background: rgba(18,22,30,.45); display: grid; place-items: center; z-index: 1000; padding: 20px; }
.fm-modal { background: #fff; border-radius: 16px; padding: 26px 28px; width: 100%; max-width: 460px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fm-modal h3 { margin: 0 0 16px; font-family: var(--sans); font-size: 19px; color: var(--ink); }
.fm-lab { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 5px; }
.fm-modal select, .fm-modal input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; }
.fm-modal-lg { max-width: 600px; }
.fm-ta { width: 100%; box-sizing: border-box; min-height: 170px; border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 10px 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.fm-hide { display: none; }
.fm-check-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); margin: 14px 0 2px; cursor: pointer; }
.fm-check-row input { width: auto; accent-color: #1a66ff; }
.fm-modal-meta { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.fm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.fm-modal-actions button { border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1.5px solid var(--line, #d8dde3); background: #fff; color: var(--ink); }
.fm-primary { background: #0f2747 !important; color: #fff !important; border-color: #0f2747 !important; }
.fm-modal-note { font-size: 12.5px; color: #C8392B; margin: 10px 0 0; min-height: 1em; }

@media (max-width: 880px) {
  .fm-wrap { grid-template-columns: 1fr; }
  .fm-side { position: static; }
}

/* ============ CORRECTIFS AFFICHAGE (iPad / menu replié) ============ */
/* 1. Menu replié : le bouton ☰ fixe ne chevauche plus le titre de page */
body.side-off .topbar { padding-left: 48px; }

/* 2. iOS/iPadOS : les champs date débordaient de la carte (largeur intrinsèque WebKit) */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background-clip: padding-box;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* ============ COMMUNAUTÉ (chat anonyme) ============ */
.cm-panel { display: flex; flex-direction: column; max-width: 860px; padding: 22px 24px; }
.cm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cm-me-wrap { font-size: 13px; color: var(--muted); }
.cm-formation-lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: -4px; }
.cm-formation { max-width: 300px; }
.cm-me-wrap strong { color: var(--ink); font-weight: 700; }

/* Le fil épouse son contenu : compact avec peu de messages, scrollable au-delà.
   Les messages partent du haut (pas d'ancrage forcé en bas). */
.cm-feed {
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: 58vh; min-height: 90px;
  padding: 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.cm-feed .cpt-empty { margin: auto; }

/* Ligne = avatar + (méta au-dessus + bulle) ; ses propres messages à droite */
.cm-row { display: flex; align-items: flex-start; gap: 10px; max-width: 78%; align-self: flex-start; }
.cm-row.cm-mine { flex-direction: row-reverse; align-self: flex-end; }
.cm-av {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.18);
  margin-top: 16px; /* aligné sur la bulle, sous la ligne méta */
}
.cm-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.cm-mine .cm-stack { align-items: flex-end; }

/* La bulle ne contient QUE le texte : elle reste compacte */
.cm-msg {
  max-width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px; padding: 8px 13px;
  box-shadow: var(--shadow-soft);
}
.cm-mine .cm-msg { background: var(--green-soft); border-color: #C4E5F6; border-radius: 14px 4px 14px 14px; }
.cm-msg.cm-staff { background: #FFF6F1; border-color: #F8D7C8; }
.cm-mine .cm-msg.cm-staff { background: var(--green-soft); border-color: #C4E5F6; }

/* Ligne méta au-dessus de la bulle : pseudo · badge · heure · supprimer */
.cm-meta { display: flex; align-items: center; gap: 7px; padding: 0 4px; }
.cm-mine .cm-meta { flex-direction: row-reverse; }
.cm-pseudo { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Couleurs dédiées au staff dans la communauté (jamais pour les élèves) */
.cm-av.cm-av-super, .cm-av.cm-av-admin { background: #6D28D9; }
.cm-av.cm-av-formateur { background: #0F766E; }
.cm-pseudo-super, .cm-pseudo-admin { color: #6D28D9; font-weight: 800; }
.cm-pseudo-formateur { color: #0F766E; font-weight: 800; }
.cm-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; background: var(--gold); color: #fff; border-radius: 999px; padding: 1.5px 7px; }
.cm-time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cm-del, .cm-block { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 5px; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.cm-row:hover .cm-del, .cm-row:hover .cm-block { opacity: .7; }
.cm-del:hover, .cm-block:hover { opacity: 1; color: var(--danger); }
.cm-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

/* Composer : champ qui s'étire, bouton compact */
.cm-form { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.cm-form input {
  flex: 1 1 auto; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 12px 18px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.cm-form input:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.15); }
.cm-send.btn-primary { width: auto; flex: 0 0 auto; padding: 12px 26px; border-radius: 999px; font-size: 14px; white-space: nowrap; }

@media (max-width: 600px) {
  .cm-row { max-width: 95%; }
  .cm-feed { padding: 12px 10px; }
  .cm-av { flex-basis: 26px; width: 26px; height: 26px; font-size: 10.5px; }
  .cm-del, .cm-block { opacity: .55; } /* pas de survol au doigt */
  .cm-send.btn-primary { padding: 12px 18px; }
}

/* ============ ÉDITION DES DATES D'ACCÈS (tableau comptes) ============ */
.cpt-edit-period { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0 4px; vertical-align: middle; }
.cpt-edit-period:hover { color: var(--ink); }
.cpt-period-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cpt-period-edit input[type="date"] { width: auto; max-width: 135px; font-size: 12px; padding: 4px 6px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.cpt-period-edit input[type="date"]:disabled { opacity: .45; }
.cpe-arrow { color: var(--muted); }
.cpe-perm { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }

/* ============ ONGLETS DE RÔLE (liste des comptes) ============ */
.cpt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cpt-tab {
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.cpt-tab:hover { border-color: var(--ink); color: var(--ink); }
.cpt-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cpt-tab-n { display: inline-block; min-width: 18px; text-align: center; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 5px; font-size: 11px; margin-left: 2px; }
.cpt-tab.is-on .cpt-tab-n { background: rgba(255,255,255,.22); }

/* ============ OUTILS IA ============ */
.oia-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.oia-list[hidden] { display: none; }
.oia-card {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; font: inherit; cursor: pointer;
  box-shadow: var(--shadow-soft); transition: border-color .15s ease, transform .15s ease;
}
.oia-card:not(.is-soon):hover { border-color: #04A9DB; transform: translateY(-2px); }
.oia-card.is-soon { cursor: default; opacity: .6; }
.oia-card-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  background: var(--green-soft); color: #04A9DB; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.oia-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oia-card-t { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.oia-card-d { font-size: 13px; color: var(--muted); line-height: 1.45; }
.oia-card-go { margin-left: auto; font-size: 20px; color: #04A9DB; flex: none; }
.oia-back {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--muted); padding: 0 0 14px; display: inline-block;
}
.oia-back:hover { color: var(--ink); }
.oia-tool .lay-textarea { min-height: 140px; }

/* ============ ACCÈS AUX FORMATIONS (création de compte) ============ */
.cpt-formations { display: flex; flex-direction: column; gap: 6px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: #fff; max-height: 160px; overflow-y: auto; }
.cpt-formation-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--ink); cursor: pointer; padding: 6px 8px; border-radius: 9px; }
.cpt-formation-check:hover { background: #f5fbfd; }
/* spécificité 111 pour battre « #view-comptes .cpt-field input { width:100% } » (la liste est dans un .cpt-field) */
#view-comptes .cpt-formation-check input { flex: none; width: 16px; height: 16px; accent-color: #04A9DB; margin: 0; }
.cpt-field-hint { font-weight: 400; color: var(--muted); font-size: 11px; }

/* ============ COMMUNAUTÉ : fil ancré en bas (comme une messagerie) ============ */

/* ============ iPad / iPhone : pas de zoom auto au focus ============ */
/* Safari zoome (et reste zoomé) sur tout champ < 16px : on force 16px au doigt. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* Bouton "Nouveau document" (mise en page) */
.lay-reset { align-self: flex-start; margin-top: 10px; }

/* ============ OUTILS IA PERSONNALISÉS ============ */
.oia-custom-tools { display: flex; flex-direction: column; gap: 14px; }
.oia-custom-tools:empty { display: none; }
.oia-tool-desc { font-size: 13.5px; color: var(--muted); margin: -6px 0 14px; }
.oia-card.oia-add { border-style: dashed; border-color: #04A9DB; background: #F4FBFE; }
.oia-card.oia-add .oia-card-ico { background: #04A9DB; color: #fff; }
.oia-card-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.oia-mini { font-size: 16px; padding: 4px 7px; border-radius: 6px; opacity: .7; cursor: pointer; line-height: 1; }
.oia-mini:hover { opacity: 1; background: var(--surface-2); }
.oia-mini-del:hover { background: #fdf0ee; }

/* éditeur d'outil (modale) */
.oia-ed-row { display: flex; gap: 12px; }
.oia-field-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.oia-field-row input { flex: 1; }
.ofr-del { border: none; background: transparent; color: #8B1A1A; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; flex: none; }
.ofr-del:hover { background: #fdf0ee; }
#oed-addfield { margin: 2px 0 6px; }
#oed-prompt, #oed-template { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line, #d8dde3); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; resize: vertical; }
.oed-tpl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }

/* palette d'icônes (éditeur d'outil IA) */
.oed-iconpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.oed-ic {
  width: 40px; height: 40px; flex: none; border: 1.5px solid var(--line);
  background: #fff; border-radius: 9px; font-size: 19px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s ease, transform .12s ease;
}
.oed-ic:hover { border-color: #04A9DB; transform: translateY(-1px); }
.oed-ic.is-on { border-color: #04A9DB; background: var(--green-soft); box-shadow: 0 0 0 2px rgba(4,169,219,.18); }
.oed-iconpick .oed-ic-input { width: 40px; height: 40px; flex: none; text-align: center; font: inherit; font-size: 18px; padding: 0; color: var(--ink); }
.oed-ic-input::placeholder { color: #04A9DB; font-weight: 700; opacity: 1; }
.oed-ic-input:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 2px rgba(4,169,219,.18); }

/* ============ TABLEAU DE BORD ============ */
.db-wrap { max-width: 980px; }
.db-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 18px; }
.db-cards4 { grid-template-columns: repeat(4, 1fr); }
.db-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-soft); }
.db-n { font-family: var(--serif); font-weight: 700; font-size: 30px; color: #04A9DB; line-height: 1.1; }
.db-l { font-size: 13px; color: var(--muted); }
.db-bar { height: 8px; border-radius: 6px; background: var(--line-soft); overflow: hidden; margin-top: 12px; }
.db-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #04A9DB, #0688b0); border-radius: 6px; }
.db-resume { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(120deg, #EAF7FB, #fff); border: 1px solid #CDE9F3; border-radius: 16px; padding: 22px 24px; margin: 0 0 8px; }
.db-resume.db-ok { background: linear-gradient(120deg, #EAF7EF, #fff); border-color: #CDEAD7; }
.db-resume h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 21px; margin: 5px 0 4px; }
.db-eye { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0488b0; }
.db-sub { color: var(--muted); font-size: 14px; }
.db-btn { background: #04A9DB; color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s; }
.db-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(4,169,219,.6); }
.db-h { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 18px; margin: 26px 0 14px; }
.db-who { margin-top: 6px; }
.db-frow { margin-bottom: 15px; }
.db-fmeta { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font-size: 14.5px; margin-bottom: 7px; }
.db-fmeta b { font-weight: 600; }
.db-fmeta span { color: var(--muted); font-size: 13px; }
/* Dashboard élève — accordéon par formation (reprendre + statuts de fiches) */
.db-forms { display: flex; flex-direction: column; gap: 10px; }
.db-faccord { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.db-faccord.is-open { border-color: #cbe8f3; box-shadow: 0 10px 24px -18px rgba(4,169,219,.5); }
.db-fhead { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: none; cursor: pointer; padding: 14px 16px; font: inherit; text-align: left; }
.db-fhead:hover { background: var(--surface-2); }
.db-fchev { flex: none; color: var(--muted); font-size: 12px; transition: transform .15s ease; }
.db-faccord.is-open .db-fchev { transform: rotate(90deg); }
.db-ftitle { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fcount { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.db-fbar { flex: none; width: 110px; }
.db-fbar .db-bar { margin-top: 0; }
.db-faccord.is-done .db-ftitle::after { content: " ✓"; color: #2E7548; }
.db-fdetail { display: none; padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }
.db-faccord.is-open .db-fdetail { display: block; }
.db-fresume { margin: 12px 0 16px; }
.db-fdone { margin: 12px 0 14px; font-weight: 700; color: #2E7548; }
.db-fmod { margin: 0 0 12px; }
.db-fmod-t { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 2px 0 6px; }
.db-fles { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 5px; background: #fff; }
.db-fles.is-click { cursor: pointer; }
.db-fles.is-click:hover { border-color: #04A9DB; background: #f5fbfd; }
.db-fles-ico { flex: none; }
.db-fles-t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fles-st { flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.db-fst-done .db-fles-st { color: #2E7548; }
.db-fst-started .db-fles-st { color: #b5651d; }
.db-fst-todo .db-fles-st { color: #c9ced6; font-weight: 600; }
.db-fst-todo { opacity: .9; }
.db-cards3 { grid-template-columns: repeat(3, 1fr); }
.db-panel-wide { width: 100%; }
.db-fdetail .db-cards { margin: 8px 0 4px; }
.db-fdetail .db-card { padding: 16px; }
.db-fdetail .db-n { font-size: 26px; }
/* « Voir la progression d'un élève » — bloc plus grand, plus propre */
.db-picker { margin: 26px 0 20px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
.db-pick-lab { display: block; font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 18px; margin-bottom: 12px; }
.db-picker .fm-select { max-width: 100%; width: 100%; font-size: 15px; padding: 13px 15px; }
.db-loading, .db-empty { color: var(--muted); font-size: 14px; padding: 10px 0; }
@media (max-width: 760px) { .db-cards, .db-cards4 { grid-template-columns: 1fr 1fr; } .db-resume { flex-direction: column; align-items: flex-start; } }
@media (max-width: 480px) { .db-cards, .db-cards4 { grid-template-columns: 1fr; } }

/* ---- Tableau de bord admin : raccourcis + élèves à suivre ---- */
.db-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 2px; }
.db-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-soft); }
.db-ph { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 18px; margin: 6px 0 16px; }
.db-block { display: block; width: 100%; text-align: left; margin-bottom: 10px; }
.db-block:last-of-type { margin-bottom: 0; }
.db-btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 12px 18px; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.db-btn-ghost:hover { border-color: #04A9DB; color: #0488b0; background: #f5fbfd; }
.db-suivi { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.db-suivi:first-of-type { border-top: none; }
.db-suivi .nm { flex: 1; color: var(--ink); font-size: 14px; font-family: var(--sans); }
.db-suivi .pc { font-weight: 700; color: var(--muted); font-size: 13px; font-family: var(--sans); min-width: 34px; text-align: right; }
.db-suivi-bar { width: 80px; flex: none; }
.db-suivi-bar .db-bar { margin-top: 0; }
.db-hint { color: var(--muted); font-size: 12.5px; margin-top: 12px; font-family: var(--sans); }
/* #5 relance / décrochage */
.db-suivi { flex-wrap: wrap; row-gap: 7px; }
.db-suivi-act { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-family: var(--sans); }
.db-suivi.is-stale .db-suivi-act { color: #b5341d; font-weight: 600; }
.db-stale-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #b5341d; background: #fdecea; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.db-relance { flex: none; background: #04A9DB; color: #fff; border: none; border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s, opacity .15s; }
.db-relance:hover { transform: translateY(-1px); }
/* Dashboard super_admin : réclamations + avis en direct */
.db-reclam { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.db-reclam:first-of-type { border-top: none; }
.db-reclam-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-reclam-sujet { font-weight: 700; color: var(--ink); font-size: 14px; }
.db-reclam-meta { font-size: 12px; color: var(--muted); }
.db-reclam-go { flex: none; padding: 7px 12px; font-size: 12.5px; }
.db-avis { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.db-avis:first-of-type { border-top: none; }
.db-avis-top { display: flex; align-items: center; gap: 8px; }
.db-avis-who { font-weight: 700; color: var(--ink); font-size: 14px; flex: 1; min-width: 0; }
.db-avis-score { font-weight: 800; color: #04A9DB; font-size: 13.5px; }
.db-avis-nps { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.db-avis-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.db-avis-com { font-size: 13px; color: var(--ink); font-style: italic; margin-top: 4px; }
.db-inactive-tag { font-size: 10.5px; font-weight: 700; color: #b3261e; background: #fdecea; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.db-relance:disabled { background: #cbd5e1; cursor: default; transform: none; }
@media (max-width: 760px) { .db-row2 { grid-template-columns: 1fr; } }

/* ---- Bouton « fiche terminée » de l'élève (fin de fiche) ---- */
.fm-done-bottom { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.fm-done-bottom > .fm-done-big { align-self: center; }
.fm-done-bottom > .fm-quiz-hint { margin: 0; }
.fm-done-bottom > .fm-done-nav { margin: 0; }
.fm-done-big { background: #04A9DB; color: #fff; border: none; border-radius: 12px; padding: 15px 32px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(4,169,219,.6); transition: transform .15s, box-shadow .2s, background .15s; }
.fm-done-big:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(4,169,219,.7); }
.fm-done-big.is-done { background: #eaf5ee; color: #2E7548; box-shadow: none; border: 1px solid #cdead7; }
.fm-done-big:disabled { opacity: .6; cursor: default; }

/* ---- Comptes : éditeur unifié « Modifier » ---- */
.cpt-modif-btn { background: var(--navy, #13294B); color: #fff; }
.cpt-edit-box { background: var(--surface-2, #f6f8fb); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.cpt-edit-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 10px; }
.cpt-edit-field { display: flex; flex-direction: column; gap: 5px; }
.cpt-edit-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.cpt-edit-field input[type="date"] { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); }
.cpt-edit-perm { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.cpt-edit-forms { margin-top: 16px; }
.cpt-edit-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cpt-edit-spacer { flex: 1; min-width: 8px; }
/* Changement de rôle dans l'éditeur de compte */
.cpt-edit-role { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.cpt-edit-role > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.cpt-edit-role select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.cpt-edit-rolehint { font-size: 11.5px; color: var(--muted); }
/* Bouton supprimer le compte (zone danger) */
.cpt-del { color: #8B1A1A; border-color: #f0c8c0; }
.cpt-del:hover { background: #fdf0ee; }
.cpt-del-armed { color: #fff; background: #b3261e; border-color: #b3261e; }
.cpt-del-armed:hover { background: #9c211a; }

/* ============ FORMATION — refonte arbre (modules repliables + menu ⋮) ============ */
.fm-module { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 0; overflow: visible; }
.fm-module-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 4px; }
.fm-mod-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: transparent; border: none; cursor: pointer; padding: 8px 6px; font: inherit; text-align: left; border-radius: 8px; }
.fm-mod-toggle:hover { background: var(--surface-2); }
.fm-chev { color: var(--muted); font-size: 11px; transition: transform .15s ease; flex: none; }
.fm-module:not(.is-collapsed) .fm-chev { transform: rotate(90deg); }
.fm-module-t { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--navy); flex: 1; min-width: 0; line-height: 1.25; }
.fm-mod-count { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 9px; }
.fm-mod-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.fm-module.is-collapsed .fm-lessons, .fm-module.is-collapsed .fm-prog { display: none; }
.fm-lessons { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; }
.fm-lesson { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); border: 1px solid transparent; transition: background .12s; }
.fm-lesson:hover { background: var(--surface-2); }
.fm-lesson.is-on { background: #eef3ff; border-color: #c9dbff; }
/* Parcours séquentiel (élève) : fiche pas encore débloquée */
.fm-lesson.is-locked { opacity: .5; cursor: not-allowed; }
.fm-lesson.is-locked:hover { background: transparent; }
.fm-lesson.is-locked .fm-lesson-t { color: var(--muted, #8a94a6); }
.fm-lock { flex: none; font-size: 12px; opacity: .85; }
.fm-lesson-t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Bouton « Fiche suivante » bloqué tant que la fiche en cours n'est pas terminée */
.fm-nav-next[disabled] { background: #cbd5e1; border-color: #cbd5e1; color: #fff; cursor: not-allowed; transform: none; opacity: .9; }
.fm-nav-next[disabled]:hover { background: #cbd5e1; border-color: #cbd5e1; color: #fff; transform: none; }
/* Message éphémère (fiche verrouillée) */
.fm-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(70px); background: #14202E; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 2000; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90vw; text-align: center; }
.fm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fm-kebab { flex: none; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 9px; border-radius: 7px; font-weight: 700; }
.fm-kebab:hover { background: var(--surface); color: var(--ink); }
.fm-menu { position: fixed; z-index: 1000; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px -16px rgba(19,41,75,.32); padding: 6px; min-width: 210px; }
.fm-menu-it { display: block; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); padding: 10px 12px; border-radius: 8px; }
.fm-menu-it:hover { background: var(--surface-2); }
.fm-menu-it.danger { color: #8B1A1A; }
.fm-menu-it.danger:hover { background: #fdf0ee; }
.fm-collapse-all { background: transparent; border: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.fm-collapse-all:hover { color: var(--ink); background: var(--surface-2); }

/* ============================================================
   QUALITÉ / QUALIOPI (qualiopi.js · view-qualite)
   ============================================================ */
.ql-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.ql-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 9px 14px; margin-bottom: -1px; cursor: pointer; border-radius: 8px 8px 0 0; transition: color .15s, border-color .15s, background .15s; }
.ql-tab:hover { color: var(--ink); background: var(--surface-2); }
.ql-tab.is-on { color: #04A9DB; border-bottom-color: #04A9DB; }
.ql-body { min-height: 120px; }
.ql-loading, .ql-empty { color: var(--muted); padding: 18px 2px; }
.ql-intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; max-width: 760px; }
.ql-h { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin: 26px 0 10px; }
.ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.ql-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-soft); margin: 0 0 14px; }
.ql-card h3 { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0; }
.ql-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.ql-card-meta { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.ql-pill { background: var(--green-soft); color: #0670a0; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ql-pill-ok { background: #e9f7ee; color: #2e7d46; }
.ql-st-ouverte { background: #fdeede; color: #b5651d; }
.ql-st-en_cours { background: #e2f2fb; color: #0670a0; }
.ql-st-resolue { background: #e9f7ee; color: #2e7d46; }

.ql-btn { background: #04A9DB; color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s, opacity .15s; }
.ql-btn + .ql-btn { margin-left: 10px; }
.ql-rec-flash { animation: qlRecFlash 2.6s ease; }
@keyframes qlRecFlash { 0%, 100% { box-shadow: var(--shadow-soft); } 10%, 40% { box-shadow: 0 0 0 3px rgba(4,169,219,.55); } }
.ql-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(4,169,219,.6); }
.ql-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.ql-btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ql-btn-ghost:hover { border-color: #04A9DB; color: #0488b0; background: #f5fbfd; box-shadow: none; }
.ql-btn-confirm { background: #b5341d; }
.ql-btn-confirm:hover { background: #97291a; box-shadow: 0 10px 22px -10px rgba(181,52,29,.6); }
/* États élève de l'attestation (en attente / verrouillée) */
.ql-pill-wait { background: #fdeede; color: #b5651d; }
.ql-state { font-size: 13.5px; line-height: 1.5; border-radius: 11px; padding: 11px 14px; }
.ql-state-wait { background: #fdf4e6; color: #9a5a12; border: 1px solid #f3dcb4; }
.ql-state-lock { background: var(--surface-2, #f4f6f8); color: var(--muted); border: 1px solid var(--line); }
/* Staff — liste « À délivrer » */
.ql-deliver-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ql-card-muted { opacity: .75; }
.ql-subhead { font-family: var(--serif); font-size: 15px; color: var(--muted); margin: 24px 0 12px; }
/* #2 visuel positionnement -> évaluation */
.ql-prog2 { margin: 2px 0 14px; padding: 12px 14px; background: var(--surface-2, #f6f8fa); border: 1px solid var(--line); border-radius: 12px; }
.ql-prog2-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 9px; }
.ql-prog2-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.ql-prog2-lab { flex: 0 0 100px; font-size: 12px; color: var(--ink); }
.ql-prog2-bar { flex: 1; height: 8px; border-radius: 999px; background: #e3e8ee; overflow: hidden; }
.ql-prog2-fill { display: block; height: 100%; border-radius: 999px; }
.ql-prog2-fill.pos { background: #9aa7b8; }
.ql-prog2-fill.ev { background: #04A9DB; }
.ql-prog2-val { flex: 0 0 40px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ql-prog2-delta { margin-top: 9px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ql-prog2-delta.up { color: #2e7d46; }
.ql-prog2-delta.down { color: #b5341d; }
.ql-prog2-delta.flat { color: var(--muted); }
.ql-prog2-delta b { font-weight: 800; }
.ql-prog2-cohort { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ql-info-foot { margin-top: 14px; }

.ql-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.ql-field label { font-weight: 600; font-size: 13px; color: var(--ink); }
.ql-field input[type=text], .ql-field input[type=email], .ql-field select, .ql-ta {
  border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.ql-field input:focus, .ql-field select:focus, .ql-ta:focus { outline: none; border-color: #04A9DB; }
.ql-ta { resize: vertical; min-height: 88px; }
.ql-ta-sm { min-height: 60px; }
.ql-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ql-note { color: var(--muted); font-size: 13px; }

/* satisfaction — étoiles + NPS */
.ql-q { margin: 0 0 14px; }
.ql-q-lab { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 0 0 6px; }
.ql-stars { display: inline-flex; gap: 3px; }
.ql-star { background: none; border: none; font-size: 24px; line-height: 1; color: #d8dde3; cursor: pointer; padding: 0 1px; transition: color .12s, transform .12s; }
.ql-star:hover, .ql-star.on { color: #f5b301; }
.ql-star:hover { transform: scale(1.12); }
.ql-nps { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.ql-nps-b { width: 34px; height: 34px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; transition: all .12s; }
.ql-nps-b:hover { border-color: #04A9DB; color: #04A9DB; }
.ql-nps-b.on { background: #04A9DB; border-color: #04A9DB; color: #fff; }

/* stats satisfaction */
.ql-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.ql-stat { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ql-stat-hl { background: var(--green-soft); }
.ql-stat-n { font-family: var(--serif); font-weight: 700; font-size: 22px; color: #04A9DB; line-height: 1.1; }
.ql-stat-hl .ql-stat-n { color: #13294B; }
.ql-stat-l { color: var(--muted); font-size: 12px; line-height: 1.3; }
.ql-comments { margin-top: 12px; }
.ql-comments summary { cursor: pointer; color: #0670a0; font-weight: 600; font-size: 13px; }
.ql-comment { background: var(--surface-2); border-left: 3px solid #04A9DB; border-radius: 4px; padding: 8px 12px; margin: 8px 0 0; font-style: italic; color: var(--ink); font-size: 13.5px; }

/* réclamations */
.ql-filts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.ql-filt { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ql-filt:hover { border-color: #04A9DB; color: #0488b0; }
.ql-filt.is-on { background: #13294B; border-color: #13294B; color: #fff; }
.ql-rec-msg { color: var(--ink); font-size: 14px; line-height: 1.5; margin: 0 0 10px; white-space: pre-line; }
.ql-rec-rep { background: var(--green-soft); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: #13294B; }
/* Réclamation résolue = dossier clos : réponse en lecture seule */
.ql-rec-closed { background: #fbfdfb; }
.ql-rec-rep-ro { background: #f1f9f3; border: 1px solid #cde9d5; padding: 12px 14px; margin: 4px 0 6px; white-space: pre-line; line-height: 1.5; }
.ql-rec-rep-lab { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #2e7d46; margin: 0 0 6px; }
.ql-rec-rep-none { font-size: 13.5px; margin: 4px 0 6px; padding: 10px 12px; border-left: 3px solid #c7cdd6; background: #f4f6f9; border-radius: 0 8px 8px 0; }
.ql-rec-actions { margin: 8px 0; }
.ql-muted { color: #9aa3b2; }
/* Historique du traitement d'une réclamation (traçabilité ind. 31) */
.ql-rec-hist { margin: 4px 0 12px; border: 1px solid var(--line, #e6e9ef); border-radius: 10px; background: #fbfcfe; }
.ql-rec-hist > summary { cursor: pointer; list-style: none; padding: 9px 13px; font-size: 13px; font-weight: 700; color: #13294B; user-select: none; }
.ql-rec-hist > summary::-webkit-details-marker { display: none; }
.ql-rec-hist > summary::before { content: "🕑 "; }
.ql-rec-hist[open] > summary { border-bottom: 1px solid var(--line, #e6e9ef); }
.ql-rec-hist-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; border-top: 1px solid #eef1f6; font-size: 13px; }
.ql-rec-hist-row:first-of-type { border-top: 0; }
.ql-rec-hist-when { color: #6b7385; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 116px; }
.ql-rec-hist-rep { color: var(--ink); line-height: 1.45; white-space: pre-line; flex: 1; }
.ql-rec-actions label { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.ql-rec-actions select { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; background: #fff; }

/* Registres qualité (amélioration continue ind.32 + veille ind.28) */
.ql-qform > label, .ql-qform .ql-grid2 label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 10px 0 4px; }
.ql-qform input[type=text], .ql-qform input[type=date], .ql-qform select, .ql-qform textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.ql-qform textarea { resize: vertical; min-height: 64px; }
.ql-qform input:focus, .ql-qform select:focus, .ql-qform textarea:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 3px rgba(4,169,219,.12); }
.ql-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ql-grid2 { grid-template-columns: 1fr; } }
.ql-qrow-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 10px 0; }
.ql-qrow-actions label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0; }
.ql-qform .ql-qrow-actions select { width: auto; }
.ql-st-planifie { background: #eef1f6; color: #51607a; }
.ql-st-termine { background: #e9f7ee; color: #2e7d46; }
.ql-st-a_traiter { background: #fdeede; color: #b5651d; }
.ql-st-traite { background: #e9f7ee; color: #2e7d46; }
.ql-st-vigilance { background: #fdeede; color: #b5651d; }
.ql-st-danger { background: #fdeaea; color: #c8392b; }
.ql-st-sauve { background: #e9f7ee; color: #2e7d46; }
.ql-st-abandon { background: #eef1f6; color: #51607a; }
/* Réclamations : bandeau de délais + tag de délai */
.ql-sla { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 16px; padding: 12px 16px; background: var(--surface-2, #f5f7fa); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--muted); }
.ql-sla b { color: var(--ink); font-weight: 700; }
.ql-delay { font-weight: 600; }
.ql-delay.ok { color: #2e7d46; }
.ql-delay.ko { color: #c8392b; }
.ql-drop-alert { color: #c8392b; font-weight: 600; }
/* Résultats publiés (ind. 2) — cartes KPI */
.ql-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.ql-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-soft); }
.ql-kpi-val { font-family: var(--serif); font-weight: 800; font-size: 26px; color: #002C52; }
.ql-kpi-lab { color: var(--muted); font-size: 13px; margin-top: 4px; }
/* Console plateforme (Phase 5) — pastilles d'abonnement */
.pf-body { max-width: 900px; }
.ql-sub-trialing { background: #eef4fb; color: #0670a0; }
.ql-sub-active { background: #e9f7ee; color: #2e7d46; }
.ql-sub-past_due { background: #fdeede; color: #b5651d; }
.ql-sub-suspended { background: #fdeaea; color: #c8392b; }
.ql-sub-canceled { background: #eef1f6; color: #51607a; }
/* Console plateforme — membres d'une organisation */
.pf-members { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pf-members summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: #002C52; }
.pf-member-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pf-member { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; }
.pf-member-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pf-member-mail { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.pf-member-role { font-size: 11.5px; }
.pf-member-remove { background: #fff; color: #8B1A1A; border: 1.5px solid #f0c8c0; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pf-member-remove:hover { background: #fdf0ee; }
.pf-member-empty { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.pf-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pf-addrow .pf-add-email { width: auto; flex: 1; min-width: 200px; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13.5px; background: #fff; }
.pf-member .pf-form-move { width: auto; max-width: 170px; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: #fff; }
.pf-form-move-btn { background: #fff; color: #0670a0; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pf-form-move-btn:hover { border-color: #04A9DB; background: #f5fbfd; }
.pf-form-move-btn:disabled { opacity: .6; cursor: default; }
.pf-danger { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #f0c8c0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-org-delete { background: #fff; color: #c8392b; border: 1.5px solid #f0c8c0; border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pf-org-delete:hover { background: #fdeaea; }

/* infos formation */
.ql-info-row { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.ql-info-row:first-of-type { border-top: none; }
.ql-info-lab { flex: 0 0 200px; color: var(--muted); font-weight: 600; }
.ql-info-val { color: var(--ink); white-space: pre-line; }
.ql-info-card h3 { margin-bottom: 10px; }

/* tag rôle des quiz */
.ql-qz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.ql-qz-row:first-child { border-top: none; }
.ql-qz-t { font-size: 14px; color: var(--ink); font-weight: 600; }
.ql-qz-role { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; background: #fff; cursor: pointer; }
.ql-qz-role.ql-saved { border-color: #2e7d46; background: #f1faf4; }

.ql-access p { color: var(--ink); font-size: 14px; line-height: 1.6; }
.ql-access a { color: #0670a0; }

@media (max-width: 560px) { .ql-info-lab { flex-basis: 120px; } .ql-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CRÉATION D'OUTIL IA — modale en blocs clairs (outils.js)
   ============================================================ */
.oed-modal { max-width: 640px; }
.oed-modal textarea, .fm-modal textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); resize: vertical; line-height: 1.5; }
.oed-modal textarea:focus, .fm-modal textarea:focus, .oed-modal input:focus { outline: none; border-color: #04A9DB; box-shadow: 0 0 0 2px rgba(4,169,219,.15); }
.oed-intro { font-size: 13px; color: var(--muted); line-height: 1.5; margin: -6px 0 16px; background: var(--green-soft); border-radius: 10px; padding: 10px 13px; }

.oed-sec { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0 0 14px; background: #fff; }
.oed-sec-h { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; }
.oed-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #13294B; color: #fff; font-family: var(--serif); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.oed-sec-t { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.oed-sec-t u { text-decoration: none; color: #04A9DB; border-bottom: 2px solid rgba(4,169,219,.35); }
.oed-opt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .03em; }
.oed-reco { margin-left: auto; font-size: 11px; font-weight: 700; color: #b5651d; background: #fdeede; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.oed-sec-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.oed-sec-sub b { color: var(--ink); }
.oed-eg { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; padding: 8px 11px; background: var(--surface-2); border-left: 3px solid #04A9DB; border-radius: 4px; }
.oed-eg b { color: #13294B; }

/* bloc 5 mis en avant (le levier de cohérence) */
.oed-sec-reco { border-color: #f3cdb6; background: #fffaf6; box-shadow: 0 0 0 1px rgba(241,89,42,.06); }
.oed-sec-reco .oed-num { background: #F1592A; }

/* bloc test */
.oed-sec-test { background: var(--surface-2); border-style: dashed; }
#oed-test-panel { margin-top: 12px; }
.oed-test-input { margin-bottom: 4px; }
.oed-test-foot { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.oed-test-foot .btn-primary { width: auto; padding: 10px 18px; }
#oed-test-frame { width: 100%; min-height: 320px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 6px; }
.oed-modal .form-note.err { color: #C8392B; }

/* aperçu du modèle Word (mode "document") dans la création d'outil */
.oed-doc-wrap { margin-top: 4px; }
.oed-doc-note { font-size: 12.5px; color: #2e7d46; background: #f1faf4; border: 1px solid #cdeBD8; border-radius: 8px; padding: 8px 11px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oed-doc-clear { margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.oed-doc-clear:hover { border-color: #C8392B; color: #C8392B; }
.oed-doc-preview { width: 100%; min-height: 280px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* ============================================================
   ONGLET SUIVI (view-suivi) — réutilise .fm-sv-table existant
   ============================================================ */
.sv-wrap { max-width: 100%; }
.sv-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sv-bar .fm-select { max-width: 420px; }
#sv-table { overflow-x: auto; }
.sv-detail { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.sv-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.sv-detail-head .fm-sub { color: var(--muted); font-size: 13px; }
#sv-frame { width: 100%; min-height: 360px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* kebab "⋮" sur les cartes outil IA (réutilise .fm-kebab/.fm-menu) */
.oia-kebab { margin-left: auto; }
.oia-card-go { margin-left: 4px; }

/* ============================================================
   AUDIT — nav leçon, bouton terminé fiabilisé, lien login, suivi
   ============================================================ */
.fm-done-nav { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 4px; }
.fm-done-nav > span { flex: 0 0 auto; }
.fm-nav-btn { background: #fff; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 16px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.fm-nav-btn:hover { border-color: #04A9DB; color: #0488b0; background: #f5fbfd; transform: translateY(-1px); }
.fm-nav-next { background: #04A9DB; border-color: #04A9DB; color: #fff; margin-left: auto; }
.fm-nav-next:hover { background: #0688b0; color: #fff; }
.fm-done-state { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #2e7d46; font-size: 15px; padding: 6px 0; }
.fm-done-undo { background: none; border: none; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.fm-done-undo:hover { color: #C8392B; }
/* lien "mot de passe oublié" au login */
.auth-link { background: none; border: none; color: #04A9DB; font: inherit; font-size: 13px; cursor: pointer; padding: 8px 0 2px; align-self: flex-start; text-decoration: underline; }
.auth-link:hover { color: #0670a0; }
/* barre d'actions du détail Suivi */
.sv-detail-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* badge de sauvegarde (élève) dans la barre de fiche */
.fm-save-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.fm-save-saving { background: var(--surface-2); color: var(--muted); }
.fm-save-saved { background: #e9f7ee; color: #2e7d46; }
.fm-save-error { background: #fdeede; color: #b5651d; }
.fm-save-error:hover { background: #fbe0c8; }