/* Module Émargement : formulaires, listes, planning, mode présentation. */

.optional { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.label-sm { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-1); }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-4); }
textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input[type="date"], input[type="time"], input[type="tel"], input[type="search"] {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.field-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.radio-group label, .checkbox-line, .weekday-picker label {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; font-weight: 500;
}
.checkbox-line { display: flex; }
.checkbox-field { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-field label { margin: 0; font-weight: 500; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--navy); }
.weekday-picker { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.recurrence { background: var(--bg); border-radius: var(--radius); padding: var(--space-4) !important; }
.recurrence-options { margin-top: var(--space-3); }

.narrow { max-width: 720px; }
.empty { color: var(--muted); margin: 0; }
.row-muted td { color: var(--muted); }
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color 150ms ease, box-shadow 150ms ease; }
.card-link:hover { border-color: var(--navy); box-shadow: 0 4px 12px rgba(31, 56, 99, 0.12); color: inherit; }
.card-link h2 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.card-kicker { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-1); }
.card-tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.header-actions { margin-top: 0; }
.actions-tight { margin-top: 0; }
.badge-lg { font-size: 0.95rem; padding: var(--space-1) var(--space-3); }
.badge-status-planifiee { background: var(--navy-soft); color: var(--navy); }
.badge-status-ouverte { background: var(--warning-bg); color: var(--warning); }
.badge-status-cloturee { background: var(--success-bg); color: var(--success); }
.badge-status-annulee { background: #eef0f4; color: var(--muted); text-decoration: line-through; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin: 0; }
.facts dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 650; }
.facts dd { margin: var(--space-1) 0 0; }

.add-panel { margin-top: var(--space-5); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.card.add-panel { padding-top: var(--space-4); }
.row-details summary { min-height: 36px; font-size: 0.9rem; justify-content: flex-end; }
.stack-form { display: grid; gap: var(--space-2); text-align: left; margin: var(--space-2) 0; min-width: 240px; }
.stack-form label { display: grid; gap: var(--space-1); font-size: 0.875rem; font-weight: 600; }
.stack-form input, .stack-form select { min-height: 36px; }
.people-list { columns: 2; margin: 0; padding-left: 1.2em; }

.search-bar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3); }
.search-bar input { flex: 1; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.inline-fields { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.inline-fields .field { margin-bottom: 0; }

/* --- Planning ------------------------------------------------------------------------- */

.wide-page main { max-width: 1400px; }
.planning-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.segmented { display: inline-flex; gap: var(--space-1); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; align-items: center; }
.filters select { width: auto; min-height: 36px; max-width: 260px; }

.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
.day-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 220px; display: flex; flex-direction: column; }
.day-col.is-today { border-color: var(--navy); box-shadow: inset 0 3px 0 var(--navy); }
.day-col.is-past { background: #fafbfc; }
.day-head { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.day-name { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.day-num { font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.day-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); flex: 1; }
.day-add {
  margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 36px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: 1.2rem;
}
.day-add:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-soft); }

.seance-chip {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); background: var(--navy-soft); border-left: 4px solid var(--navy);
  font-size: 0.85rem; line-height: 1.3;
}
.seance-chip:hover { background: #dbe3f1; color: var(--text); }
.seance-chip.modalite-presentiel { border-left-color: #7a5a00; background: #fff7e0; }
.seance-chip.modalite-presentiel:hover { background: #ffefc2; }
.seance-chip.status-annulee { opacity: 0.6; text-decoration: line-through; background: #eef0f4; border-left-color: var(--border-strong); }
.chip-time { font-weight: 700; color: var(--navy); }
.chip-title { font-weight: 600; overflow-wrap: anywhere; }
.chip-meta { color: var(--muted); font-size: 0.8rem; }
.chip-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--warning); }

.month-grid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-5); }
.month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head div { padding: var(--space-2); font-size: 0.8rem; text-transform: uppercase; color: var(--muted); font-weight: 650; border-bottom: 1px solid var(--border); }
.month-cell {
  min-height: 110px; padding: var(--space-1); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.month-cell:nth-child(7) { border-right: 0; }
.month-cell.is-other { background: #fafbfc; }
.month-cell.is-other .month-day { color: var(--border-strong); }
.month-cell.is-today .month-day { background: var(--navy); color: #fff; }
.month-day {
  align-self: flex-start; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; font-weight: 650; color: var(--text);
}
.month-cell .seance-chip { flex-direction: row; gap: var(--space-1); padding: 2px var(--space-1); font-size: 0.75rem; border-left-width: 3px; white-space: nowrap; overflow: hidden; }
.month-cell .chip-title { overflow: hidden; text-overflow: ellipsis; }
.month-more { font-size: 0.75rem; color: var(--muted); }

@media (max-width: 900px) {
  .week-grid { grid-template-columns: 1fr; }
  .day-col { min-height: 0; }
  .day-col.is-past { display: none; }
  .month-cell { min-height: 72px; }
  .month-cell .chip-title { display: none; }
  .filters { margin-left: 0; width: 100%; }
  .filters select { flex: 1; max-width: none; }
}
@media (max-width: 640px) {
  .field-row, .field-row-3 { grid-template-columns: 1fr; gap: 0; }
  .people-list { columns: 1; }
  .search-bar { flex-wrap: wrap; }
}

/* --- Mode présentation (partage d'écran Discord) et planning public -------------------- */

body.presentation { background: #14284a; color: #fff; min-height: 100vh; }
.pres-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-6) clamp(16px, 5vw, 72px) var(--space-4); border-bottom: 3px solid rgba(255, 255, 255, 0.15);
}
.pres-org { margin: 0; letter-spacing: 0.12em; font-weight: 800; font-size: 0.95rem; color: #b9c8e6; }
.presentation h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 3rem); margin: var(--space-1) 0 0; }
.pres-subtitle { margin: var(--space-2) 0 0; font-size: clamp(1.1rem, 2vw, 1.6rem); color: #dbe5f7; }
.pres-fullscreen { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.pres-fullscreen:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.pres-main { flex: 1; padding: var(--space-5) clamp(16px, 5vw, 72px); display: grid; gap: var(--space-5); align-content: start; }
.pres-day h2 { color: #ffd479; font-size: clamp(1.2rem, 2.2vw, 1.9rem); margin: 0 0 var(--space-3); }
.pres-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pres-row {
  display: grid; grid-template-columns: minmax(10ch, auto) 1fr; gap: var(--space-1) var(--space-5);
  padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, 0.07); border-radius: var(--radius);
}
.pres-time { font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.75rem); font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; }
.pres-title { font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.55rem); }
.pres-meta { color: #c7d4ec; font-size: clamp(0.95rem, 1.4vw, 1.2rem); }
.pres-empty { font-size: 1.5rem; color: #dbe5f7; }
.pres-footer { padding: var(--space-4) clamp(16px, 5vw, 72px); color: #9fb1d4; font-size: 0.9rem; }
@media (max-width: 640px) {
  .pres-row { grid-template-columns: 1fr; }
  .pres-time { grid-row: auto; }
}

.badge-warning { background: var(--warning-bg); color: var(--warning); }
.nowrap { white-space: nowrap; }
.form-section { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
form > .form-section:first-of-type { margin-top: var(--space-4); }
.subtle-box { background: var(--bg); border-radius: var(--radius); padding: var(--space-4) !important; }

/* --- Émargement (formateur) ----------------------------------------------------------- */

.btn-lg { min-height: 52px; font-size: 1.05rem; padding: 0 var(--space-6); }
.emarg-panel p:last-child { margin-bottom: 0; }
.emarg-live { display: flex; align-items: center; gap: var(--space-2); font-size: 1.1rem; color: var(--success); margin: 0 0 var(--space-4); }
.emarg-live .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
.emarg-paused { color: var(--warning); font-weight: 600; margin: 0 0 var(--space-4); }
.emarg-share { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--bg); border-radius: var(--radius); }
.emarg-share .field { margin: 0; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.live-head h2 { margin: 0; }
.live-head p { margin: 0; }
.live-indicator { color: var(--success); }
.emarg-table td { vertical-align: middle; }
.sig-cell { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--muted); }
.sig-thumb { width: 96px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.alert-badge { display: inline-block; margin: var(--space-1) var(--space-1) 0 0; font-weight: 500; white-space: normal; }
.small { font-size: 0.85rem; }
.presence-present { background: var(--success-bg); color: var(--success); }
.presence-retard, .presence-depart_anticipe { background: var(--warning-bg); color: var(--warning); }
.presence-absent { background: var(--danger-bg); color: var(--danger); }
.presence-absent_justifie { background: #eef0f4; color: var(--muted); }
.closure-list { list-style: none; padding: 0; margin: 0; columns: 2; }
.closure-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; break-inside: avoid; }
.attestation { align-items: flex-start; margin: var(--space-4) 0; font-weight: 500; }
.attestation input { margin-top: 3px; flex: none; }

/* Zone de signature */
.signature-pad { position: relative; }
.signature-pad canvas {
  display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed var(--border-strong);
  border-radius: var(--radius); touch-action: none; cursor: crosshair;
}
.signature-pad [data-signature-clear] { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(255, 255, 255, 0.9); }
.signature-error { color: var(--danger); font-weight: 600; margin: var(--space-2) 0 0; }

/* QR plein écran */
.qr-main { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: var(--space-6) clamp(16px, 5vw, 72px); }
.qr-frame { background: #fff; padding: 16px; border-radius: 16px; width: min(70vh, 520px); aspect-ratio: 1; display: flex; }
.qr-frame img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-title { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; margin: 0; }
.qr-moment { font-size: clamp(1.2rem, 2vw, 1.8rem); color: #ffd479; font-weight: 700; margin: var(--space-2) 0 var(--space-5); }
.qr-count { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 800; font-variant-numeric: tabular-nums; margin: 0; }
.qr-timer { color: #c7d4ec; font-size: 1.15rem; margin: var(--space-2) 0 var(--space-5); font-variant-numeric: tabular-nums; }
.qr-help { color: #dbe5f7; font-size: 1.1rem; line-height: 1.7; margin: 0; padding-left: 1.3em; }
.qr-closed { grid-column: 1 / -1; font-size: 2rem; text-align: center; color: #ffd479; }
.qr-main.is-closed .qr-frame, .qr-main.is-closed .qr-side { display: none; }
@media (max-width: 800px) { .qr-main { grid-template-columns: 1fr; justify-items: center; text-align: center; } .qr-help { text-align: left; } }

/* Page de signature (stagiaire, mobile d'abord) */
.signer-page { background: var(--bg); }
.signer-header { display: flex; flex-direction: column; align-items: center; padding: var(--space-4); background: var(--surface); border-bottom: 3px solid var(--navy); }
.signer-header .brand-org { font-weight: 800; color: var(--navy); letter-spacing: 0.04em; }
.signer-header .brand-app { color: var(--gray); font-size: 0.9rem; }
.signer-main { max-width: 560px; padding: var(--space-5) var(--space-4); }
.signer-card h1 { font-size: 1.3rem; }
.signer-moment { color: var(--muted); }
.name-list { display: grid; gap: var(--space-2); }
.name-option {
  display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; font-size: 1.05rem; font-weight: 500;
}
.field .name-option { display: flex; margin-bottom: 0; font-weight: 500; }
.name-option:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); box-shadow: 0 0 0 1px var(--navy); }
.privacy { margin-top: var(--space-4); }
.signer-success h1 { color: var(--success); }
.receipt { font-size: 1.05rem; }

/* Le <main> du mode présentation occupe toute la largeur (annule la largeur max. des pages). */
.presentation main { max-width: none; margin: 0; }