/* ══════════════════════════════════════════════════════
   ROLES.CSS — PhysEdBoard · Générateur de rôles
   Même esthétique que balanced.css
══════════════════════════════════════════════════════ */

:root {
  --bg:         #061428;
  --accent:     #ffd43b;
  --accent-rgb: 255, 212, 59;
  --panel:      #0d2040;
  --border:     #1a3a60;
  --text:       #c8daea;
  --dim:        #3a608a;
  --red:        #ff3c3c;

  --header-h:       64px;
  --ctrl-h:         60px;
  --grid-gap:       6px;
  --grid-pad-x:     8px;
  --card-radius:    10px;
  --card-header-h:  36px;
  --card-header-fs: 10px;
  --card-pad-x:     12px;
  --card-pad-y:     10px;

  /* Typographic scale */
  --fs-label:       clamp(11px, 1.2vw, 12px);
  --fs-body:        clamp(13px, 1.5vw, 15px);
  --fs-control-sm:  clamp(12px, 1.5vw, 14px);
  --fs-control:     clamp(13px, 1.6vw, 15px);
  --fs-title:       clamp(16px, 2vw, 20px);
  --fs-subtitle:    clamp(15px, 1.8vw, 18px);

  --sp-panel-bg:      var(--panel);
  --sp-panel-border:  var(--border);
  --sp-divider:       var(--border);
  --sp-accent:        var(--accent);
  --sp-accent-rgb:    var(--accent-rgb);
  --sp-text:          var(--text);
  --sp-text-dim:      rgba(255,255,255,.42);
  --sp-section-label: rgba(255,255,255,.25);
  --sp-hover-bg:      rgba(255,255,255,.05);
  --sp-fab-bg:        rgba(13,32,64,.95);
  --sp-icon-muted:    rgba(255,255,255,.45);
}

@media (min-width: 768px)  { :root { --grid-gap:8px;  --grid-pad-x:12px; } }
@media (min-width: 1024px) { :root { --grid-gap:10px; --grid-pad-x:16px; } }
@media (min-width: 1280px) { :root { --grid-gap:12px; --grid-pad-x:20px; } }
@media (min-width: 1536px) { :root { --grid-gap:14px; --grid-pad-x:24px; } }
@media (min-width: 1920px) { :root { --grid-gap:16px; --grid-pad-x:32px; } }

/* ════════ RESET ════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  isolation: isolate;
}
body {
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 25%, rgba(6,20,40,.85) 100%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
  color: #e2eaf2;
  font-family: 'Barlow Condensed', sans-serif;
  height: 100dvh; overflow: hidden; overscroll-behavior: none;
}

/* ════════ STAGE ════════ */
.rl-stage {
  position: relative; z-index: 1;
  height: calc(100dvh - var(--ctrl-h));
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ════════ RESULTS ZONE ════════ */
.rl-results-zone {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.rl-results-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, #0a1a31 0%, #061428 100%);
  z-index: 0;
  pointer-events: none;
}

/* ════════ EMPTY STATE ════════ */
.rl-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; animation: fadeUp .4s ease both;
  position: relative; z-index: 2;
}

.rl-empty-icon  { font-size: clamp(48px,8vw,80px); color: rgba(255,255,255,.05); line-height: 1; }
.rl-empty-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,4vw,40px); letter-spacing:.1em; color:rgba(255,255,255,.10); }
.rl-empty-sub   { font-size:clamp(12px, 2vw, 15px); font-weight:600; letter-spacing:.08em; color:rgba(255,255,255,.18); text-align:center; max-width:300px; line-height:1.6; }

/* ════════ RESULTS ZONE WRAPPER ════════ */
.rl-results-wrap {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* ════════ RESULTS GRID ════════ */
.rl-results-grid {
  animation: fadeUp .3s ease both;
  flex-shrink: 0;
}

/* ─── Role Card — portrait (63×88mm ratio) ──────────── */
.rl-role-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;   /* ← VERTICAL: header top, body bottom */
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s;
  animation: cardIn .32s cubic-bezier(.22,1,.36,1) both;
  background: #0d1a2e;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
.rl-role-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
}
.rl-role-card:active { transform: scale(.97); }

/* TOP: colored zone with role name — ~38% of card height */
.rl-card-header {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 8px;
  position: relative;
  overflow: hidden;
}
/* Subtle diagonal shimmer on the colored header */
.rl-card-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}


.rl-card-role-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative; z-index: 1;
}

/* BOTTOM: dark body with student name — ~62% of card height */
.rl-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  background: #0d1a2e;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  gap: 0;
}

.rl-card-student {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.05;
  overflow: hidden;
  color: var(--text);           /* warm off-white for comfort */
}
.rl-card-student--prenom {
  /* font-size set inline — larger */
  line-height: 1.0;
}
.rl-card-student--nom {
  /* font-size set inline — ~70% of prénom size */
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  line-height: 1.1;
  margin-top: 2px;
}

.rl-card-empty {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(210,225,240,.2); font-style: italic;
}

/* ════════ PRESENCE BAR ════════ */
.rl-presence-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #0d1f3c;
  border-top: 1px solid rgba(255,212,59,.14);
  backdrop-filter: blur(12px);
  animation: slideUp .25s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
}
.rl-presence-bar.collapsed { border-top-color: rgba(255,212,59,.08); }
.rl-presence-bar.collapsed .rl-pbar-chips {
  padding: 0;
  max-height: 0;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.rl-pbar-header {
  display: flex; align-items: center;
  padding: 8px 12px; gap: 10px; flex-shrink: 0;
  background: #0d1f3c;
}
.rl-pbar-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(210,225,240,.45); display: flex; align-items: center; gap: 7px;
}
.rl-pbar-label i { color: rgba(255,212,59,.4); }
.rl-pbar-count {
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #ffd43b; flex: 1; text-align: center;
}
.rl-pbar-toggle {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px; color: rgba(255,255,255,.35);
  width: 34px; height: 34px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, transform .25s; flex-shrink: 0;
}
.rl-pbar-toggle:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.7); }
.rl-presence-bar.collapsed .rl-pbar-toggle { transform: rotate(180deg); }

.rl-pbar-chips {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  overflow-y: auto;
  padding: 8px 12px 6px;
  background: #0a1628;
  transition: max-height .25s cubic-bezier(.22,1,.36,1), padding .25s;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.06) transparent;
}

/* Chip */

.rl-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .04em;
  border: 1.5px solid #233a54;
  border-radius: 8px;
  background: rgba(13,32,64,0.60); /* navy profond, harmonieux */
  color: #c8daea;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
  user-select: none; animation: chipIn .18s ease both;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 36px;
  box-shadow: 0 1px 6px 0 rgba(6,20,40,0.13);
}
.rl-chip:hover {
  background: rgba(13,32,64,0.82);
  color: #eaf6ff;
  border-color: #355a7a;
}
.rl-chip:active { transform: scale(.93); }
.rl-chip.selected {

  border-color: #1a3a60;
  color: #eaf6ff;
}
.rl-chip.selected:hover {
  background: rgba(33,58,84,0.95);
  border-color: #eaf6ff;
  color: #eaf6ff;
}
.rl-chip.used {
  opacity: .3;
  background: rgba(13,32,64,0.18) !important;
  border-color: #233a54 !important;
  color: #233a54 !important;
  pointer-events: none;
}
.rl-chip.absent {
  opacity: .28;
  background: rgba(13,32,64,0.10) !important;
  border-color: #233a54 !important;
  color: #233a54 !important;
  cursor: pointer;
  transition: opacity .15s;
}
.rl-chip.absent:hover {
  opacity: .55;
}

/* Generate button — primary CTA, 40px height */
.rl-btn-generate {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 0 24px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #0a1628; border: none;
  box-shadow: 0 3px 14px rgba(255,212,59,.3); transition: all .15s;
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.rl-btn-generate:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 5px 22px rgba(255,212,59,.38); }
.rl-btn-generate:disabled { opacity: .35; cursor: not-allowed; }

/* Bouton remise à zéro — icon-only, matches generate height */
.rl-btn-reset-list {
  height: 36px; width: 40px; flex-shrink: 0;
  border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(210,225,240,.6);
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.rl-btn-reset-list:hover {
  background: rgba(255,212,59,.12);
  border-color: rgba(255,212,59,.35);
  color: var(--accent);
}
.rl-btn-reset-list:active { transform: rotate(-30deg) scale(.9); }

/* ════════ OVERLAY ════════ */
.rl-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(2,2,8,.85);
  align-items: center; justify-content: center;
  backdrop-filter: blur(18px);
}
.rl-overlay.visible { display: flex; animation: rFadeIn .18s ease; }

/* ════════ MODAL ════════ */
.rl-modal {
  width: min(880px, 96vw);
  height: 80dvh;          /* fixed height — never resizes with content */
  max-height: 82dvh;
  display: flex; flex-direction: column;
  background: #08111f;
  border: 1px solid rgba(255,212,59,.14);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(255,212,59,.04);
  animation: rPop .26s cubic-bezier(.34,1.4,.64,1) both;
}

.rl-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid rgba(255,212,59,.10);
  background: #0a1628;
  flex-shrink: 0; gap: 10px;
}
.rl-modal-header-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.rl-modal-header-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-title); letter-spacing: .25em;
  display: flex; align-items: center; gap: 10px;
}
.rl-modal-header-icon {
  font-size: clamp(12px, 2vw, 15px);
  opacity: .5;
  color: var(--accent);
  font-size: var(--fs-label);
}

.rl-modal-header-title-text {
  color: var(--text);
}

.rl-modal-columns {
  display: flex; flex-direction: row;
  flex: 1; min-height: 0; overflow: hidden;
}
.rl-modal-col {
  display: flex; flex-direction: column;
  flex: 1 1 0; min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
  width: auto;
}
.rl-modal-col::-webkit-scrollbar { width: 3px; }
.rl-modal-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 2px; }
.rl-modal-col-left  { background: rgba(255,212,59,.02); border-right: 1px solid rgba(255,212,59,.08); }
.rl-modal-col-right { background: rgba(255,255,255,.01); }

.rl-modal-label-icon {
  opacity: .5;
}

@media (max-width: 680px) {
  .rl-modal-columns { flex-direction: column; overflow-y: auto; }
  .rl-modal-col-left { border-right: none; border-bottom: 1px solid rgba(255,212,59,.08); }
}

.rl-section {
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 10px;
}
.rl-section:last-child { border-bottom: none; }
.rl-section--grow { flex: 1; min-height: 0; overflow: hidden; }
/* Roles list fills the grow section */
.rl-section--grow .rl-roles-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
/* Participants section: list grows to fill space */
.rl-section--participants {
  overflow: hidden;  /* children scroll internally */
}
.rl-section--participants .rl-participants-list {
  flex: 1;
  max-height: none;  /* remove fixed cap — grows with section */
}
/* Options section: toggles flow in a row */
.rl-section--options {
  flex-direction: column;
  gap: 0;
}
.rl-section--options .rl-section-label {
  margin-bottom: 10px;
}
.rl-section--options .rl-toggles-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.rl-section--options .rl-toggle-row {
  flex-shrink: 0;
}
/* Separator dot between the two toggles */
.rl-toggle-sep {
  color: rgba(255,255,255,.15);
  font-size: var(--fs-control-sm);
  line-height: 1;
  flex-shrink: 0;
}

.rl-section-label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .5em; text-transform: uppercase; color: rgba(255,212,59,.65);
}
.rl-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.rl-section-header > .rl-section-label {
  margin-bottom: 2px;
}
.rl-section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Toggle switch (option retirer noms) */
.rl-toggle-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  user-select: none;
}
.rl-toggle-switch {
  width: 40px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
  position: relative; flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.rl-toggle-switch.on {
  background: rgba(255,212,59,.2);
  border-color: rgba(255,212,59,.4);
}
.rl-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: transform .2s, background .2s;
}
.rl-toggle-switch.on .rl-toggle-knob {
  transform: translateX(18px);
  background: var(--accent);
}
.rl-toggle-text {
  font-size: var(--fs-control); font-weight: 600; letter-spacing: .03em;
  color: #c8daea;
}

/* Roles list */
.rl-roles-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
.rl-roles-list::-webkit-scrollbar { width: 3px; }
.rl-roles-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }

.rl-list-empty {
  font-size: var(--fs-control-sm);
  color: rgba(255,255,255,.15);
  letter-spacing: .06em;
  padding: 10px 2px;
}

/* Individual role row */
.rl-role-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 8px 10px;
  animation: chipIn .18s ease both;
  transition: border-color .15s;
}
.rl-role-row:hover { border-color: rgba(255,255,255,.13); }

/* Color swatch picker */
.rl-color-swatch {
  width: 24px; height: 24px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.2); flex-shrink: 0; cursor: pointer;
  transition: border-color .15s, transform .1s;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.rl-color-swatch:hover { border-color: rgba(255,255,255,.5); transform: scale(1.1); }

.rl-role-name-input {
  flex: 1; min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .03em;
  background: transparent; border: none; outline: none;
  color: var(--text);
  padding: 2px 4px;
}
.rl-role-name-input::placeholder { color: rgba(210,225,240,.35); }
.rl-role-name-input:focus { color: #fff; }

.rl-role-del {
  background: none; border: none; color: rgba(255,255,255,.18);
  cursor: pointer; font-size: clamp(13px, 1.5vw, 15px); padding: 4px 6px; border-radius: 4px;
  transition: color .1s, background .1s; flex-shrink: 0;
}
.rl-role-del:hover { color: var(--red); background: rgba(255,60,60,.08); }

/* Add role button */
.rl-add-role-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 12px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap;
  height: 30px;
  background: transparent; border: 1px solid rgba(255,212,59,.3); color: rgba(255,212,59,.85);
}
.rl-add-role-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,212,59,.06); }

/* Participants list */
.rl-add-row { display: flex; gap: 6px; align-items: center; }
.rl-name-input {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-body); font-weight: 600; letter-spacing: .06em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 10px 14px; outline: none; min-height: 42px;
  transition: border-color .15s, box-shadow .15s;
}
.rl-name-input:focus { border-color: rgba(255,212,59,.45); box-shadow: 0 0 0 3px rgba(255,212,59,.06); }
.rl-name-input::placeholder { color: rgba(210,225,240,.3); }

.rl-add-btn {
  width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); border: none; color: #0a1628;
  font-size: clamp(14px, 1.8vw, 16px); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s, transform .1s;
}
.rl-add-btn:hover { filter: brightness(1.1); }
.rl-add-btn:active { transform: scale(.92); }

.rl-participants-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 260px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
.rl-participants-list::-webkit-scrollbar { width: 3px; }
.rl-participants-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }
.rl-participants-list:empty::after {
  content: 'Aucun participant ajouté';
  display: block; font-size: var(--fs-control-sm); color: rgba(255,255,255,.15);
  letter-spacing: .06em; padding: 10px 2px;
}

.rl-prow {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 7px 10px;
}
.rl-prow:hover { 
  border-color: rgba(255,212,59,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px rgba(255,212,59,.08);
}

.rl-prow--absent {
  opacity: .38;
}
.rl-prow-name {
  flex: 1; min-width: 0;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .03em;
  color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-prow--absent .rl-prow-name {
  color: rgba(255,255,255,.55);
}
/* Bouton toggle absent (user-slash / user-check) — no hover, no background */
.rl-prow-toggle-absent {
  background: none; border: none;
  /* Présent : vert (user-check) */
  color: rgba(100,220,100,.80);
  cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 4px;
  flex-shrink: 0;
  /* Pas de transition hover */
}
/* Absent : éteint */
.rl-prow--absent .rl-prow-toggle-absent {
  color: rgba(255,255,255,.2);
}
/* Bouton supprimer définitivement */
.rl-prow-del {
  background: none; border: none; color: rgba(210,225,240,.25);
  cursor: pointer; font-size: clamp(13px, 1.5vw, 15px); padding: 4px 5px; border-radius: 4px;
  transition: color .1s, background .1s; flex-shrink: 0;
}
.rl-prow-del:hover { color: var(--red); }

/* Import / Clear buttons (secondary, 36px) */
.rl-import-btn, .rl-clear-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 12px; height: 30px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap;
}
.rl-import-btn {
  background: transparent; border: 1px solid rgba(255,212,59,.3); color: rgba(255,212,59,.75);
}
.rl-import-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,212,59,.06); }
.rl-clear-btn {
  background: transparent; border: 1px solid rgba(255,80,80,.3); color: rgba(255,100,100,.85);
}
.rl-clear-btn:hover { border-color: var(--red); color: var(--red); background: rgba(255,60,60,.06); }

/* Summary — one per column, pinned at bottom */
.rl-summary {
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: rgba(255,212,59,.03);
  border-top: 1px solid rgba(255,212,59,.07);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(210,225,240,.55); flex-shrink: 0;
  text-align: center; justify-content: center;
}
.rl-summary i { color: rgba(255,212,59,.4); }
.rl-summary span { color: #c8daea; }

/* Footer — right-aligned */
.rl-footer {
  display: flex; gap: 8px; padding: 12px 20px;
  justify-content: flex-end;          /* #4 right-align */
  border-top: 1px solid rgba(255,212,59,.10);
  background: rgba(255,212,59,.025); flex-shrink: 0;
}
.rl-btn-cancel {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: rgba(210,225,240,.6); transition: all .15s;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.rl-btn-cancel:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.18); }
.rl-btn-apply {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 0 24px; height: 36px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #0a1628; border: none;
  box-shadow: 0 3px 14px rgba(255,212,59,.2); transition: all .15s;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.rl-btn-apply:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 5px 22px rgba(255,212,59,.35); }
.rl-btn-apply:disabled { opacity: .35; cursor: not-allowed; }

.rl-close {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: rgba(210,225,240,.4);
  width: 36px; height: 36px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.rl-close:hover { background: rgba(255,60,60,.1); border-color: rgba(255,60,60,.25); color: rgba(255,100,100,.9); }
.rl-help-btn:hover { background: rgba(255,212,59,.1) !important; border-color: rgba(255,212,59,.3) !important; color: var(--accent) !important; }

/* ════════ HELP OVERLAY ════════ */
.rl-help-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  background: rgba(2,2,8,.88); backdrop-filter: blur(16px);
  align-items: center; justify-content: center;
}
.rl-help-overlay.visible { display: flex; animation: rFadeIn .18s ease; }
.rl-help-card {
  width: min(520px, 92vw); max-height: 85dvh;
  display: flex; flex-direction: column;
  background: #0b1626; border: 1px solid rgba(150,180,210,.16);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.8);
  animation: rPop .24s cubic-bezier(.34,1.4,.64,1) both;
}
.rl-help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0f1d31;
}
.rl-help-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-subtitle); letter-spacing: .22em; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.rl-help-title i {
  color: rgba(255,212,59,.72);
}
.rl-help-body {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
.rl-help-step {
  display: flex; gap: 14px; align-items: flex-start;
}
.rl-help-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; line-height: 1; letter-spacing: .06em;
  color: rgba(255,212,59,.72); flex-shrink: 0;
  width: 24px; text-align: center; margin-top: 1px;
}
.rl-help-step strong {
  display: block; font-size: var(--fs-control); font-weight: 700;
  letter-spacing: .04em; color: #eef4fa;
  margin-bottom: 4px;
}
.rl-help-step p {
  font-size: var(--fs-body); font-weight: 500;
  color: rgba(220,232,244,.78); line-height: 1.6;
  letter-spacing: .02em;
}
.rl-help-step em { color: var(--accent); font-style: normal; }
.rl-help-step code {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 1px 6px; font-size: .9em; color: #d8e3ee;
  font-family: monospace;
}

/* ════════ CLEAR CONFIRM OVERLAY ════════ */
.rl-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(2,2,8,.82);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rl-confirm-overlay.visible { display: flex; animation: rFadeIn .18s ease; }

.rl-confirm-card {
  width: min(430px, 94vw);
  background: #08111f;
  border: 1px solid rgba(255,80,80,.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 70px rgba(0,0,0,.75);
  animation: rPop .2s cubic-bezier(.34,1.4,.64,1) both;
}

.rl-confirm-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,80,80,.08);
}

.rl-confirm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-subtitle);
  letter-spacing: .2em;
  color: #ffb0b0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rl-confirm-body {
  padding: 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #d6e2ef;
}

.rl-confirm-actions {
  padding: 0 18px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rl-btn-danger {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,90,90,.6);
  background: rgba(255,60,60,.15);
  color: #ffbcbc;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rl-btn-danger:hover {
  background: rgba(255,60,60,.24);
  border-color: rgba(255,110,110,.9);
  color: #ffe1e1;
}

/* ════════ FOCUS OVERLAY ════════ */
.rl-focus-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(6,20,40,.92); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
}
.rl-focus-overlay.active { display: flex; animation: rFadeIn .2s ease; }

.rl-focus-card {
  width: min(420px, 90vw);
  display: flex; flex-direction: column;
  background: #08111f; border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.9);
  animation: rPop .28s cubic-bezier(.34,1.4,.64,1);
}
.rl-focus-stripe { height: 6px; flex-shrink: 0; }
.rl-focus-header {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.rl-focus-role {
  font-size: 11px; font-weight: 700; letter-spacing: .45em; text-transform: uppercase;
}
.rl-focus-close {
  background: none; border: none; color: rgba(255,255,255,.3); font-size: clamp(12px, 2vw, 15px); cursor: pointer;
  width: 36px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: color .15s;
}
.rl-focus-close:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); }
.rl-focus-body {
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rl-focus-student {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 8vw, 56px); letter-spacing: .06em;
  color: #e8f0f8; text-align: center; line-height: 1;
}
.rl-focus-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.3); text-align: center;
}

/* ════════ ANIMATIONS ════════ */
@keyframes fadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes cardIn  { from{opacity:0;transform:scale(.93) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes chipIn  { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes rFadeIn { from{opacity:0} to{opacity:1} }
@keyframes rPop    { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }

@media (prefers-reduced-motion:reduce) {
  *, .rl-role-card { animation:none !important; transition:none !important; }
}
@media (hover:none) and (pointer:coarse) {
  .rl-role-card:hover { transform:none; }
  .rl-role-card:active { opacity:.85; }
}

/* ════════ COLOR POPUP ════════ */
.rl-color-popup {
  position: fixed;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 5px;
  padding: 10px;
  background: #0d1f38;
  border: 1px solid rgba(255,212,59,.18);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: rPop .18s cubic-bezier(.34,1.4,.64,1) both;
}

.rl-color-popup-swatch {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  position: relative;
}
.rl-color-popup-swatch:hover {
  transform: scale(1.18);
  border-color: rgba(255,255,255,.5);
}
.rl-color-popup-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}
.rl-color-popup-swatch.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Color swatch styles are defined once above (single source of truth). */