/* =========================================================
   PALETTE & VARIABLES — Bleu ciel → Bleu marine
   ========================================================= */
:root{
  /* FONDS */
  --bg0:#0b2a4a;        /* bleu marine */
  --bg1:#163a66;        /* bleu marine moyen */

  /* CARDS & BLOCS */
  --card:#ffffff;
  --card-soft:#e8f4fc;  /* bleu ciel doux */
  --card-border:#d5e4f0;

  /* TEXTES */
  --txt:#0b2a4a;
  --txt-inv:#f4f9fd;
  --muted:#5a738c;

  /* ACCENTS */
  --primary:#1a5f9e;    /* bleu institutionnel */
  --secondary:#5ba3d9;  /* bleu ciel */
  --plum:#163a66;

  /* PALETTE ÉTENDUE (pour badges / rôles / parcours) */
  --accent-blue:#1a5f9e;
  --accent-cyan:#38bdf8;
  --accent-teal:#0ea5e9;
  --accent-green:#16a34a;
  --accent-lime:#65a30d;
  --accent-yellow:#eab308;
  --accent-orange:#f97316;
  --accent-red:#dc2626;
  --accent-rose:#e11d48;
  --accent-pink:#db2777;
  --accent-purple:#7c3aed;
  --accent-indigo:#312e81;
  --accent-slate:#64748b;

  /* Couleurs rôles (optionnelles) */
  --role-eleve:#1a5f9e;
  --role-prof:#0b2a4a;
  --role-referent:#163a66;
  --role-viesco:#5ba3d9;
  --role-admin:var(--txt);

  /* ÉTATS */
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#dc2626;

  /* UI */
  --line:#d5e4f0;
  --shadow: 0 14px 40px rgba(11,42,74,.12);
  --r12:12px;
  --r16:16px;

  --cf-color-primary:#1a5f9e;
  --cf-color-secondary:#5ba3d9;
  --cf-color-accent:#87ceeb;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}

html, body{height:100%}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: linear-gradient(165deg, #87ceeb 0%, #5ba3d9 42%, #0b2a4a 100%);
  color: var(--txt-inv);
}

a{color:inherit}
.muted{color:var(--muted)}
/*
  IMPORTANT:
  Several components (e.g. .modal-overlay) define display later in the file.
  Without !important, those later rules can override .hidden when an element
  has both classes (e.g. class="modal-overlay hidden"), preventing modals from
  closing.
*/
.hidden{display:none !important}

/* =========================================================
   OUTILS (Prof / Référent)
   ========================================================= */
.tools-subtabs{display:flex; flex-wrap:wrap; gap:10px}
.tools-subtab.active{filter:brightness(1.05); border-color:rgba(255,255,255,.35)}

.checklist{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  border-radius: var(--r12);
}

.checklist--row{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;}

.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:999px; cursor:pointer; user-select:none;}
.chip input{margin:0;}


.check{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r12);
  background:rgba(255,255,255,.04);
}
.check input{transform:scale(1.1)}

/* Liste classes (Ajouter activité) : affichage horizontal + retour ligne */
.act-classes-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.act-classes-list .check{
  margin:0;
  width:auto;
  min-height:40px;
}

.wheel-wrap{position:relative; display:flex; justify-content:center}
.wheel{
  position:relative;
  width:min(520px, 100%);
  height:240px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--r16);
  background:rgba(255,255,255,.06);
}
.wheel::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:36px;
  transform:translateY(-50%);
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.wheel-pointer{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  font-weight:900;
  font-size:18px;
  opacity:.95;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  z-index:2;
}
.wheel-strip{will-change:transform}
.wheel-item{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--txt-inv);
}
.tools-result{
  margin-top:10px;
  text-align:center;
  font-size:24px;
  font-weight:900;
}

/* =========================================================
   Éphéméride : panneau fixe "Dates importantes"
   ========================================================= */
.eph-important-panel{
  position:fixed;
  top:136px;
  right:18px;
  z-index:35;
  width:min(360px, calc(100vw - 36px));
  max-height:calc(100vh - 160px);
  overflow:auto;
  padding:14px 16px;
  color:var(--txt);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card-soft) 90%, transparent));
  border:1px solid var(--card-border);
  border-left:5px solid var(--primary);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(15,23,42,.18);
  backdrop-filter:blur(10px);
}

.eph-important-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.eph-important-panel__title{
  font-size:15px;
  line-height:1.2;
  font-weight:900;
  color:var(--txt);
}

.eph-important-panel__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.eph-important-panel__btn{
  min-height:34px;
  padding:6px 12px;
  border-radius:12px;
  white-space:nowrap;
}

.eph-important-panel__close{
  min-height:34px;
  padding:6px 10px;
  border-radius:12px;
  white-space:nowrap;
}

.eph-important-panel--closed{
  display:none !important;
}

.eph-important-panel__body{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
}

.eph-important-panel__body > div[style*="border-left"]{
  margin-top:8px !important;
  padding:7px 8px 7px 10px !important;
  background:color-mix(in srgb, var(--card-soft) 60%, transparent);
  border-radius:10px;
}

@media (min-width:1500px){
  body:has(.eph-important-panel:not(.eph-important-panel--closed)) .layout{
    padding-right:390px;
  }
}

@media (max-width:1199px){
  .eph-important-panel{
    position:sticky;
    top:8px;
    right:auto;
    width:auto;
    max-height:220px;
    margin:10px 12px 0;
    border-left-width:4px;
  }
}

@media (max-width:720px){
  .eph-important-panel{
    max-height:180px;
    padding:12px;
    border-radius:14px;
  }
  .eph-important-panel__body{
    font-size:12.5px;
  }
}

.groups-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px}
.group-card{border:1px solid rgba(255,255,255,.14); border-radius:var(--r16); background:rgba(255,255,255,.06); padding:12px}
.group-title{font-weight:900; margin-bottom:8px}
.group-list{line-height:1.35}

.timer-display{
  font-size: clamp(48px, 7vw, 96px);
  font-weight:900;
  text-align:center;
  letter-spacing:1px;
  padding:18px 10px;
  border-radius: var(--r16);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}

/* =========================================================
   HEADER / TOPBAR
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: rgba(11,28,45,.92);
  border-bottom:1px solid rgba(255,255,255,.12);
  color: var(--txt-inv);
  backdrop-filter: blur(10px);
}

.topbar__school,
.topbar__space{
  color: #ffffff !important;
}

.topbar__institution{
  color: #ffffff;
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand__logo{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brand__sep{
  width:2px;
  height:42px;
  background: var(--primary);
  border-radius:2px;
  opacity:.95;
  flex:0 0 auto;
}

.brand__txt{
  text-align:left;
  line-height:1.1;
  min-width:0;
}

.brand__name{
  font-weight:900;
  letter-spacing:.6px;
  color: var(--txt-inv);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

.brand__sub{
  font-size:12px;
  color: rgba(238,244,255,.90);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.userchip{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  color: var(--txt-inv);
  border: 1px solid rgba(255,255,255,.12);
}

.userchip__name{
  font-weight:700;
  font-size:13px;
}

.userchip__role{
  font-size:12px;
  opacity:.85;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.layout{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

.grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:14px;
  align-items:start;
}

@media(max-width:980px){
  .grid{grid-template-columns: 1fr}
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.side{
  background: linear-gradient(180deg, rgba(255,241,245,.92), rgba(244,247,251,.92));
  color: var(--txt);
  border:1px solid var(--card-border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.side__title{
  padding:14px 14px 10px;
  font-weight:900;
  color: var(--primary);
  letter-spacing:.2px;
}

.nav{
  display:flex;
  flex-direction:column;
  padding:8px;
  gap:6px;
}

.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  color: #24405c;
  transition:.15s ease;
  border:1px solid transparent;
  font-weight:700;
}

.nav a:hover{
  background: rgba(26,95,158,.10);
  color: var(--primary);
  border-color: rgba(26,95,158,.18);
}

.nav a.active{
  background: linear-gradient(90deg,#dceffb,#eef6fd);
  color: var(--primary);
  border:1px solid rgba(26,95,158,.22);
}

/* Barre d'accent multi-couleurs (menu) */
.nav a{ position:relative; }
.nav a::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:999px;
  background: rgba(100,116,139,.30);
  opacity:.55;
}
.nav a.active::before{ opacity:1; }
.nav a:nth-child(1).active::before{ background: var(--accent-blue); }
.nav a:nth-child(2).active::before{ background: var(--accent-purple); }
.nav a:nth-child(3).active::before{ background: var(--accent-teal); }
.nav a:nth-child(4).active::before{ background: var(--accent-orange); }
.nav a:nth-child(5).active::before{ background: var(--accent-rose); }
.nav a:nth-child(6).active::before{ background: var(--accent-green); }
.nav a:nth-child(7).active::before{ background: var(--accent-yellow); }
.nav a:nth-child(8).active::before{ background: var(--accent-indigo); }
.nav a:nth-child(9).active::before{ background: var(--accent-cyan); }
.nav a:nth-child(10).active::before{ background: var(--accent-red); }

/* =========================================================
   CARDS
   ========================================================= */
.card{
  /*
    ✅ Cards multi-couleurs (automatique)
    - Chaque .card reçoit une teinte différente via --card-tint
    - Pure CSS : aucun impact sur le fonctionnement
  */
  background:
    radial-gradient(900px 380px at 12% 0%, var(--card-tint, rgba(37,99,235,.14)) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,241,245,.96), rgba(244,247,251,.96));
  color: var(--txt);
  border:1px solid var(--card-border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  padding:14px;
}

/* Teintes alternées (toutes interfaces) */
.card:nth-child(5n+1){ --card-tint: rgba(37,99,235,.16);   border-color: rgba(37,99,235,.35); }
.card:nth-child(5n+2){ --card-tint: rgba(147,51,234,.14);  border-color: rgba(147,51,234,.32); }
.card:nth-child(5n+3){ --card-tint: rgba(13,148,136,.14);  border-color: rgba(13,148,136,.32); }
.card:nth-child(5n+4){ --card-tint: rgba(249,115,22,.14);  border-color: rgba(249,115,22,.34); }
.card:nth-child(5n+5){ --card-tint: rgba(244,63,94,.13);   border-color: rgba(244,63,94,.32); }

/* Évite de colorer le contenu des modales (reste neutre) */
.modal__content.card,
.modal .card{
  --card-tint: rgba(37,99,235,.10);
  border-color: var(--card-border);
}

.card h2{margin:0 0 10px;font-size:18px}
.card h3{margin:0 0 8px;font-size:15px}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.col{flex:1;min-width:240px}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background: linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff;
  border:none;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(30,64,175,.18);
}

.btn:hover{transform:translateY(-1px)}

.btn:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}

.btn--ghost{
  background: rgba(26,95,158,.08);
  color:var(--txt);
  border:1px solid rgba(26,95,158,.24);
  box-shadow:none;
}

.btn--ghost:hover{
  background: rgba(26,95,158,.12);
}

/* Variantes de boutons (plus visibles, palette multi-couleurs)
   IMPORTANT : pure CSS, aucune incidence sur le fonctionnement. */
.btn--danger{
  background: linear-gradient(90deg, var(--accent-red), var(--accent-rose));
  box-shadow: 0 10px 18px rgba(239,68,68,.20);
}
.btn--ok{
  background: linear-gradient(90deg, var(--accent-green), var(--accent-teal));
  box-shadow: 0 10px 18px rgba(22,163,74,.18);
}
.btn--warn{
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));
  box-shadow: 0 10px 18px rgba(245,158,11,.18);
}
.btn--soft{
  background: linear-gradient(90deg, var(--accent-slate), var(--accent-indigo));
  box-shadow: 0 10px 18px rgba(100,116,139,.18);
}

.btn.btn--danger, .btn.btn--ok, .btn.btn--warn, .btn.btn--soft{ color:#fff; }

/* =========================================================
   FORMULAIRES
   ========================================================= */
.input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.65);
  background:#f8fafc;
  color:var(--txt);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(26,95,158,.55);
  box-shadow: 0 0 0 4px rgba(26,95,158,.16);
}

textarea{
  min-height:90px;
  resize:vertical;
}

label{
  display:block;
  font-size:12px;
  color:#475569;
  margin:10px 0 6px;
  font-weight:800;
}

/* =========================================================
   TABLEAUX
   ========================================================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.40);
  background:#fff;
}

.table th{
  background:#f1f5f9;
  color:var(--txt);
  font-weight:900;
  padding:12px 10px;
  font-size:13px;
  border-bottom:1px solid rgba(148,163,184,.35);
}

.table td{
  background:#ffffff;
  color:var(--txt);
  padding:12px 10px;
  border-bottom:1px solid rgba(226,232,240,.95);
  font-size:13px;
  vertical-align:top;
}

.table tr:last-child td{border-bottom:none}

.table td:last-child, .table th:last-child{
  text-align:right;
  white-space:nowrap;
}

/* =========================================================
   BADGES
   ========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#e5e7eb;
  font-size:12px;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.35);
}

.badge--ok{
  background:#dcfce7;
  color:#166534;
  border-color: rgba(22,163,74,.25);
}

.badge--danger{
  background:#fee2e2;
  color:#991b1b;
  border-color: rgba(220,38,38,.25);
}

.badge--pending{
  background:#fef3c7;
  color:#92400e;
  border-color: rgba(217,119,6,.32);
}

/* =========================================================
   NOTIFICATIONS (badge sur cloche)
   ========================================================= */
.iconbadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: var(--bad);
  color: #fff;
  font-weight:900;
  font-size:11px;
  line-height:1;
  border:2px solid rgba(11,28,45,.92);
}

/* =========================================================
   PORTFOLIO : titres de sections
   ========================================================= */
.portfolio-section-title{
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 900;
  font-size: 15px;
  color: var(--primary);
  margin: 4px 0 10px;
}

/* =========================================================
   TABS
   ========================================================= */
.tabs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
  align-items:stretch;
}

/* 2 niveaux sur écrans moyens */
@media (max-width: 980px){
  .tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3 niveaux (1 colonne) sur mobiles */
@media (max-width: 560px){
  .tabs{ grid-template-columns: 1fr; }
}

.tab{
  padding:9px 12px;
  border-radius:999px;
  background: rgba(26,95,158,.07);
  color:var(--txt);
  cursor:pointer;
  border:1px solid rgba(26,95,158,.20);
  font-weight:900;
  transition: .15s ease;
  width:100%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}

.tab:hover{
  filter: saturate(1.15);
  transform: translateY(-1px);
  color: var(--primary);
}

.tab.active{
  background: rgba(255,255,255,.85);
  color: var(--txt);
  border-color: rgba(26,95,158,.35);
  box-shadow: 0 8px 22px rgba(2,6,23,.10);
}

/* Accent multi-couleurs sur les onglets (sans toucher au JS)
   Permet de « sentir » la palette sur tout le site. */
.tabs .tab{ position:relative; }
.tabs .tab::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-5px;
  height:4px;
  border-radius:999px;
  background: transparent;
  opacity:0;
  transition: opacity .15s ease;
}
.tabs .tab.active::after{ opacity:1; }
.tabs .tab:nth-child(1).active::after{ background: var(--accent-blue); }
.tabs .tab:nth-child(2).active::after{ background: var(--accent-purple); }
.tabs .tab:nth-child(3).active::after{ background: var(--accent-teal); }
.tabs .tab:nth-child(4).active::after{ background: var(--accent-orange); }
.tabs .tab:nth-child(5).active::after{ background: var(--accent-rose); }
.tabs .tab:nth-child(6).active::after{ background: var(--accent-green); }
.tabs .tab:nth-child(7).active::after{ background: var(--accent-yellow); }
.tabs .tab:nth-child(8).active::after{ background: var(--accent-indigo); }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  background: rgba(11,42,74,.94);
  color:#fff;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  border:1px solid rgba(135,206,235,.30);
}

.toast--show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal__backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
}

.modal__card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,92vw);
  background: var(--card);
  color: var(--txt);
  border-radius:16px;
  border:1px solid var(--card-border);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.modal__title{font-weight:900}

.iconbtn{
  border:1px solid rgba(148,163,184,.65);
  background: rgba(26,95,158,.08);
  color:var(--txt);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}


.iconbtn:hover{background: rgba(26,95,158,.12)}

.modal__body{padding:14px}

/* =========================================================
   AMÉLIORATIONS “ADMIN UI” (sans dépendre d’admin.php)
   - rend jolis les barres filtres / blocs internes
   ========================================================= */
.card .toolbar,
.card .filters,
.card .filterbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background: rgba(255,255,255,.55);
}

.card .toolbar .btn,
.card .filters .btn,
.card .filterbar .btn{
  height:40px;
}

.card .subcard,
.card .panel{
  padding:12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:16px;
  background: rgba(255,255,255,.65);
}

/* tables actions: boutons moins “massifs” */
.table .btn{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
  box-shadow:none;
}

.table .btn--ghost{
  background: rgba(26,95,158,.08);
}

/* =========================================================
   RESPONSIVE TABLE (sécurité)
   ========================================================= */
@media (max-width: 860px){
  .table{
    display:block;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   BADGES PARCOURS (PORTFOLIO ÉLÈVE)
   ========================================================= */

.badge-parcours{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  margin-top:6px;
  width:fit-content;
}

/* Parcours Avenir */
.badge-parcours--avenir{
  background:#dbeafe;
  color:#1e40af;
  border:1px solid #93c5fd;
}

/* PEAC */
.badge-parcours--peac{
  background:#ede9fe;
  color:#5b21b6;
  border:1px solid #c4b5fd;
}

/* Parcours Santé */
.badge-parcours--sante{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}

/* Parcours Citoyen */
.badge-parcours--citoyen{
  background:#ffedd5;
  color:#9a3412;
  border:1px solid #fdba74;
}

/* Fallback (si nouveau parcours) */
.badge-parcours--default{
  background:#e5e7eb;
  color:#374151;
  border:1px solid #cbd5f5;
}

/* =========================================================
   MODALES MODERNES (ÉLÈVE / AJOUT ACTIVITÉ / PARTICIPATION)
   Compatible avec :
   - #part-modal (display:flex via JS)
   - .modal-overlay + .modal (si tu en as)
   - améliore aussi la modale existante .modal__card/.modal__backdrop
   ========================================================= */

/* 1) Si ta modale élève est un DIV id="part-modal" */
#part-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;                 /* ton JS met display:flex */
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

/* Si ton contenu de modale est un bloc interne (souvent .card) */
#part-modal > *{
  width:min(860px, 94vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow: var(--shadow);
}

/* 2) Variante générique : .modal-overlay + .modal */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

.modal{
  width:min(860px, 94vw);
  max-height: 86vh;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.45);
  background: linear-gradient(180deg, rgba(255,241,245,.98), rgba(244,247,251,.98));
  color: var(--txt);
  box-shadow: var(--shadow);
}

/* =========================================================
   FIX: #modalParticipation (injectée par js/eleve.js)
   - sans ce bloc, la modale peut rester "dans le flux"
     et apparaître en bas de page
   ========================================================= */
#modalParticipation{
  position:fixed;
  inset:0;
  z-index:90; /* au-dessus de .modal-overlay/#part-modal (80) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

#modalParticipation.hidden{ display:none; }

/* backdrop interne: cliquable pour fermer, sans masquer le contenu */
#modalParticipation .modal__backdrop{
  position:absolute;
  inset:0;
}

/* contenu : on garde ta structure .modal__content.card */
#modalParticipation .modal__content{
  position:relative;
  z-index:1;
  width:min(860px, 94vw);
  max-height:86vh;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow: var(--shadow);
}

/* Header moderne dans la modale */
.modal .modal__head,
#part-modal .modal__head{
  position: sticky;
  top: 0;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.35);
  background: linear-gradient(180deg, rgba(244,247,251,.98), rgba(255,241,245,.90));
}

.modal .modal__title,
#part-modal .modal__title{
  font-weight:950;
  letter-spacing:.2px;
  color: var(--primary);
}

.modal .modal__body,
#part-modal .modal__body{
  padding:14px;
}

/* Champs dans modale : plus “premium” */
.modal .input, .modal select, .modal textarea,
#part-modal .input, #part-modal select, #part-modal textarea{
  background: #ffffff;
  border-color: rgba(148,163,184,.55);
}

/* Boutons dans modale */
.modal .btn--ghost,
#part-modal .btn--ghost{
  background: rgba(26,95,158,.08);
  border:1px solid rgba(26,95,158,.24);
  color:var(--txt);
  box-shadow:none;
}

/* Petits boutons “Fermer” */
.modal .iconbtn,
#part-modal .iconbtn{
  border:1px solid rgba(26,95,158,.24);
  background: rgba(26,95,158,.08);
  border-radius: 12px;
  padding:7px 10px;
  cursor:pointer;
  transition:.15s ease;
}
.modal .iconbtn:hover,
#part-modal .iconbtn:hover{ transform: translateY(-1px); }

/* Footer / barre d’actions de modale */
.modal .row[style*="justify-content:flex-end"],
#part-modal .row[style*="justify-content:flex-end"]{
  position: sticky;
  bottom: 0;
  background: rgba(244,247,251,.92);
  border-top:1px solid rgba(148,163,184,.25);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mobile */
@media (max-width:520px){
  #part-modal, .modal-overlay{ padding:12px; }
  .modal, #part-modal > *{ border-radius: 16px; }

  /* mobile: participation */
  #modalParticipation{ padding:12px; }
  #modalParticipation .modal__content{ border-radius:16px; }
}

/* =========================================================
   MODALES – HARMONISATION TYPO (ÉLÈVE / ADMIN)
   ========================================================= */

/* Texte par défaut dans les modales */
.modal,
.modal__card,
.modal-overlay,
#part-modal{
  color: var(--txt); /* texte sombre standard */
}

/* ================= TITRE MODALE ================= */
.modal__title,
.modal h2,
.modal__card h2,
#part-modal h2{
  color: #9a3412;          /* orange foncé */
  font-weight: 900;
  letter-spacing: .3px;
}

/* ================= INTERTITRES ================= */
.modal h3,
.modal__card h3,
.modal label,
.modal__card label,
#part-modal label{
  color: #1e40af;          /* bleu foncé */
  font-weight: 800;
}

/* ================= COMPÉTENCES / SECONDAIRE ================= */
.modal .muted,
.modal__card .muted,
#part-modal .muted,
.modal .badge,
.modal__card .badge,
.badge-parcours{
  color: #374151;          /* gris foncé */
}

/* ================= INPUTS / TEXTAREA ================= */
.modal input,
.modal textarea,
.modal select,
.modal__card input,
.modal__card textarea,
.modal__card select{
  color: var(--txt);
}

/* ================= LIENS ================= */
.modal a,
.modal__card a,
#part-modal a{
  color: #1e40af;
  font-weight: 700;
}

/* =========================================================
   MODALES – BOUTONS ANNULER / ENREGISTRER
   ========================================================= */

/* Texte bleu marine pour les boutons principaux en modale */
.modal .btn,
.modal__card .btn,
#part-modal .btn{
  color: #1e3a8a; /* bleu marine */
}

/* Cas spécifique : bouton Annuler (ghost) */
.modal .btn--ghost,
.modal__card .btn--ghost,
#part-modal .btn--ghost{
  color: #1e3a8a; /* bleu marine */
  font-weight: 800;
}

/* =========================================================
   FOOTER GLOBAL
   ========================================================= */
.footer{
  margin-top: 3rem;
  padding: 1rem 1.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #475569;
  border-top: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
}

.footer strong{
  color: #0b1c2d;
  font-weight: 600;
}


/* =========================================================
   COMPTEUR COMPÉTENCES (ÉLÈVE)
   ========================================================= */
.side__competences{
  margin: 14px 12px 8px;
  padding: 12px 12px;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 14px 34px rgba(26,95,158,0.10);
}

.side__competences-title{
  font-weight: 800;
  font-size: .95rem;
  color: #0b1c2d;
  margin-bottom: 10px;
}

.side__competences-hint{
  margin-top: 10px;
  font-size: .78rem;
  color: #475569;
  line-height: 1.25;
}

.comp-stats{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  font-size: .78rem;
}

.comp-stats__ok{ color: #166534; }      /* vert */
.comp-stats__pending{ color: #b91c1c; } /* rouge */

/* Cercle progressif */
.comp-ring{
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    conic-gradient(#1e40af var(--pct, 0%), rgba(148,163,184,0.30) 0);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.85);
}

.comp-ring__inner{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.comp-ring__points{
  font-size: 1.35rem;
  font-weight: 900;
  color: #0b1c2d;
  line-height: 1;
}

.comp-ring__label{
  margin-top: 2px;
  font-size: .78rem;
  color: #475569;
}

/* =========================================================
   Badges / niveaux (points compétences)
   ========================================================= */
.level-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.85);
  color: #0b1c2d;
}
.level-badge--bronze{ background: rgba(180,83,9,0.14); border-color: rgba(180,83,9,0.25); }
.level-badge--argent{ background: rgba(71,85,105,0.14); border-color: rgba(71,85,105,0.25); }
.level-badge--or{ background: rgba(234,179,8,0.18); border-color: rgba(234,179,8,0.28); }

/* =========================================================
   Progression par parcours
   ========================================================= */
.parcours-progress{ padding-top: 10px; border-top: 1px dashed rgba(148,163,184,0.35); }
.parcours-progress__title{ font-size: .78rem; font-weight: 800; color: #0b1c2d; margin-bottom: 8px; }
.parc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.parc-name{ font-size: .78rem; color:#0b1c2d; font-weight:700; max-width: 60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parc-meta{ font-size: .75rem; color:#475569; white-space:nowrap; }
.parc-bar{ height: 8px; border-radius: 999px; background: rgba(148,163,184,0.25); overflow:hidden; }
.parc-bar > div{ height: 100%; width: var(--w, 0%); background: #1e40af; }

/* =========================================================
   Validation compétences (vue adulte)
   ========================================================= */
.val-list{ margin-top: 8px; }
.val-item{ padding: 10px 12px; border: 1px solid rgba(148,163,184,0.35); border-radius: 14px; background: rgba(255,255,255,0.85); margin-top: 10px; }
.val-item__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.val-item__title{ font-weight:800; color:#0b1c2d; }
.val-item__meta{ font-size:.78rem; color:#475569; margin-top:4px; }
.val-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.35); }
.val-pill--pending{ color:#b91c1c; background: rgba(185,28,28,0.10); border-color: rgba(185,28,28,0.20); }
.val-pill--ok{ color:#166534; background: rgba(22,101,52,0.10); border-color: rgba(22,101,52,0.20); }


/* =========================================================
   USERS TABLE (Admin) : actions sous le nom
   ========================================================= */
.user-name{ font-weight:700; }
.user-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.user-actions .btn{ padding:6px 10px; font-size:.85rem; }

/* Badge neutre (info) */
.badge--info{
  background: rgba(26,95,158,0.14);
  border-color: rgba(26,95,158,0.25);
}

/* ==========================
   Proctored test (light)
   ========================== */
body.cf-proctor header.topbar{display:none !important;}
body.cf-proctor .side{display:none !important;}
body.cf-proctor main.layout{padding-top:10px !important;}
body.cf-proctor .grid{grid-template-columns:1fr !important;}
body.cf-proctor #tabExamens{max-width:980px;margin:0 auto;}
body.cf-proctor #elExamRunner{position:fixed;inset:0;background:var(--bg);overflow:auto;padding:12px;z-index:9999;}
body.cf-proctor #elExamRunner .card{max-width:980px;margin:0 auto;}


/* ==========================
   Proctored test (light)
   - Cache navigation + topbar
   - Met l'exam runner en plein écran visuel
   ========================== */
body.cf-proctor header.topbar{display:none !important;}
body.cf-proctor .side{display:none !important;}
body.cf-proctor .grid{grid-template-columns: 1fr !important;}
body.cf-proctor main.layout{padding-top:10px !important;}

body.cf-proctor #elExamRunner{
  position:fixed !important;
  inset:0 !important;
  background: var(--bg, var(--txt)) !important;
  overflow:auto !important;
  padding: 12px !important;
  z-index: 9999 !important;
}
body.cf-proctor #elExamRunner .card{max-width: 980px; margin: 0 auto;}

/* Plein écran examen: garder le footer collé en bas de l'écran */
body.cf-proctor.cf-exam-fullscreen-active{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.cf-proctor.cf-exam-fullscreen-active main.layout{
  flex: 1 1 auto;
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
body.cf-proctor.cf-exam-fullscreen-active .footer{
  margin-top: auto;
}
body.cf-proctor.cf-exam-fullscreen-active section.card{
  max-width: none !important;
  width: 100%;
  margin: 0;
  border-radius: 0;
  animation: none !important;
  transform: none !important;
}
body.cf-proctor.cf-exam-fullscreen-active #tabExamens{
  max-width: none;
  margin: 0;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner .card{
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamTimerDock{
  max-width: none;
  width: 100%;
  margin: 0 0 10px 0;
}
body.cf-proctor .page > section.card > :not(#tabEcrites){
  display: none !important;
}
body.cf-proctor #tabEcrites > :not(#elExamRunner){
  display: none !important;
}

#elExamTimerDock{
  position: sticky;
  top: 0;
  z-index: 10040;
  max-width: 980px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(233,245,255,.24);
  background: linear-gradient(120deg, rgba(7,28,50,.96), rgba(12,68,116,.95));
  color: #eff6ff;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 26px rgba(2,14,28,.35);
}

#elExamTimerDock .el-exam-timer-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .92;
}

#elExamTimerDock .el-exam-timer-hint{
  margin-left: auto;
  font-size: 12px;
  opacity: .9;
  text-align: right;
}

#elExamTimerValue{
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
}

body.cf-proctor #elExamTimerDock{
  top: 0;
}

@media (max-width: 640px){
  #elExamTimerDock{
    padding: 9px 10px;
    gap: 8px;
    border-radius: 12px;
  }
  #elExamTimerValue{
    font-size: 20px;
  }
  #elExamTimerDock .el-exam-timer-label,
  #elExamTimerDock .el-exam-timer-hint{
    font-size: 11px;
  }
}


/* -----------------------------
   Tabs ergonomiques (scroll horizontal)
   ----------------------------- */
.tabs--scroll{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.tabs--scroll .tab{ white-space: nowrap; }
.tabs--scroll::-webkit-scrollbar{ height: 6px; }
.tabs--scroll::-webkit-scrollbar-thumb{ background: rgba(26,95,158,.18); border-radius: 999px; }
.tabs--scroll::-webkit-scrollbar-track{ background: transparent; }


/* === Exam runner: media always visible + one-question navigation === */
#elRunMedia{
  position: sticky;
  top: 12px;
  z-index: 5;
}
#elRunMedia iframe, #elRunMedia video, #elRunMedia audio{
  max-width: 100%;
}

/* Hotfix: en plein écran navigateur, éviter que le média masque les questions */
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia{
  position: static;
  top: auto;
  z-index: 1;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia iframe{
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: min(40vh, 320px) !important;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia video{
  display: block;
  width: 100% !important;
  max-height: min(40vh, 320px);
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia audio{
  width: 100% !important;
}

/* Fullscreen examen: garder une grande zone de saisie visible et confortable */
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner > .card{
  min-height: calc(100vh - 92px);
}
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner > .card > .card__body{
  min-height: calc(100vh - 112px);
  display: flex;
  flex-direction: column;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunQuestions{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunQuestions .el-exam-question-card{
  flex: 1 1 auto;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunQuestions .el-exam-question-card .card__body{
  min-height: clamp(340px, 46vh, 620px);
  display: flex;
  flex-direction: column;
}
body.cf-proctor.cf-exam-fullscreen-active .el-exam-question-prompt{
  font-size: 1.08rem;
  line-height: 1.45;
}
body.cf-proctor.cf-exam-fullscreen-active .el-exam-answer-input{
  min-height: 54px;
  font-size: 1.05rem;
}
body.cf-proctor.cf-exam-fullscreen-active .el-exam-answer-textarea{
  flex: 1 1 auto;
  min-height: clamp(220px, 34vh, 460px);
  resize: vertical;
  font-size: 1rem;
  line-height: 1.45;
}
body.cf-proctor.cf-exam-fullscreen-active .el-exam-choice-row{
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
body.cf-proctor.cf-exam-fullscreen-active .el-exam-nav-card{
  margin-top: 10px !important;
}

@media (max-width: 900px){
  body.cf-proctor.cf-exam-fullscreen-active #elExamRunner{
    padding: 8px !important;
  }
  body.cf-proctor.cf-exam-fullscreen-active #elRunMedia iframe{
    height: min(30vh, 220px) !important;
  }
  body.cf-proctor.cf-exam-fullscreen-active #elRunMedia video{
    max-height: min(30vh, 220px);
  }
  body.cf-proctor.cf-exam-fullscreen-active #elRunQuestions .el-exam-question-card .card__body{
    min-height: clamp(300px, 48vh, 540px);
  }
  body.cf-proctor.cf-exam-fullscreen-active .el-exam-answer-textarea{
    min-height: clamp(200px, 32vh, 360px);
    font-size: 16px;
  }
  body.cf-proctor.cf-exam-fullscreen-active .el-exam-answer-input{
    min-height: 50px;
    font-size: 16px;
  }
}


/* Outils: liste des élèves sélectionnés */
.selected-list{
  border:1px solid #c6d3e1;
  border-radius:12px;
  padding:8px;
  background:#fff;
  max-height:210px;
  overflow:auto;
}
.selected-list .pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #c6d3e1;
  margin:4px 6px 0 0;
  font-size:13px;
  background:#f8fafc;
}
.selected-list .muted{ margin:2px 0; }


/* Onglets horizontaux (harmonisation des espaces) */
.page{ width:100%; }
.tabs--top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 12px;
}
.tabs--top .tab{ flex: 0 0 auto; }


/* === Onglets : grille compacte (utilisée pour Élève) === */
.tabs--grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 12px;
}
.tabs--grid .tab{
  width: 100%; /* chaque bouton remplit sa cellule */
}
@media (max-width: 700px){
  .tabs--grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   OVERRIDE PALETTE (bleu ciel / marine) — tabs & nav
   ========================================================= */
.nav a:hover{ background: rgba(26,95,158,.10) !important; border-color: rgba(26,95,158,.20) !important; }
.nav a.active{ background: rgba(91,163,217,.16) !important; border-color: rgba(26,95,158,.28) !important; }

/* =========================================================
   V28 VISUAL OVERHAUL (professional + dynamic)
   Visual layer only: no JS/HTML behavior changes.
   ========================================================= */
:root{
  --bg:#0d2238;
  --bg0:#071321;
  --bg1:#0f2842;
  --bg2:#19456d;

  --card:#f6fafe;
  --card-soft:#edf4fc;
  --card-border:#c7d7ea;

  --txt:#11263d;
  --txt-inv:#f4f8ff;
  --muted:#59718c;

  --primary:#0b6dde;
  --secondary:#00a3b1;
  --plum:#0f3558;

  --accent-blue:#0b6dde;
  --accent-cyan:#07b6d5;
  --accent-teal:#00a3b1;
  --accent-green:#1b9d74;
  --accent-lime:#5bbf4a;
  --accent-yellow:#e6b316;
  --accent-orange:#e57b2b;
  --accent-red:#d64545;
  --accent-rose:#d75d72;
  --accent-pink:#cf4f82;
  --accent-purple:#5866c9;
  --accent-indigo:#3557b7;
  --accent-slate:#5b728c;

  --role-eleve:#1f6fd0;
  --role-prof:#157c9a;
  --role-referent:#0d7c63;
  --role-viesco:#be5f22;
  --role-admin:#283a50;

  --ok:#1a9b68;
  --warn:#e5a11f;
  --bad:#d94d4d;

  --line:rgba(17,61,102,.16);
  --shadow: 0 20px 46px rgba(7,25,44,.22);
  --r12:14px;
  --r16:20px;
}

body{
  font-family:"Avenir Next", "Segoe UI Variable Text", "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 620px at -10% -14%, rgba(0,163,177,.26), transparent 58%),
    radial-gradient(840px 520px at 110% -4%, rgba(11,109,222,.30), transparent 60%),
    linear-gradient(150deg, #06111d 0%, #0f2740 44%, #18466f 100%);
  color:var(--txt-inv);
}

@keyframes cf-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes cf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(11,109,222,.22); }
  100%{ box-shadow:0 0 0 14px rgba(11,109,222,0); }
}

.topbar{
  background: linear-gradient(120deg, rgba(6,18,32,.90), rgba(13,39,64,.88));
  border-bottom:1px solid rgba(214,231,250,.20);
  box-shadow: 0 8px 24px rgba(1,10,19,.30);
}

.brand__sep{
  background: linear-gradient(180deg, var(--secondary), var(--primary));
}

.brand__name{ letter-spacing:.9px; }

.brand__sub{
  color: rgba(232,241,255,.90);
  font-size: 12px;
}

.userchip{
  background: rgba(220,236,255,.12);
  border: 1px solid rgba(220,236,255,.25);
  backdrop-filter: blur(8px);
}

.iconbtn{
  background: rgba(220,236,255,.12);
  border:1px solid rgba(220,236,255,.25);
  color:var(--txt-inv);
}

.iconbtn:hover{
  background: rgba(220,236,255,.20);
  transform:translateY(-1px);
}

.iconbadge{
  border-color: rgba(7,21,36,.95);
}

.layout{
  max-width: 1260px;
  padding: 18px;
}

.grid{
  gap:16px;
}

.side{
  background: linear-gradient(180deg, rgba(246,250,255,.95), rgba(238,246,255,.92));
  border-color: rgba(171,198,228,.75);
}

.side__title{
  color: #13467c;
}

.nav{
  gap:8px;
}

.nav a{
  border:1px solid rgba(122,153,188,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(242,248,255,.60));
  color:#1a3658;
  font-weight:800;
}

.nav a::before{
  left:8px;
  width:5px;
  background: linear-gradient(180deg, rgba(11,109,222,.55), rgba(0,163,177,.55));
}

.nav a:hover{
  background: linear-gradient(145deg, rgba(220,236,255,.76), rgba(198,227,255,.64)) !important;
  border-color: rgba(80,135,196,.40) !important;
  color:#11365e;
}

.nav a.active{
  background: linear-gradient(145deg, rgba(11,109,222,.18), rgba(0,163,177,.17)) !important;
  border-color: rgba(27,124,197,.45) !important;
  color:#0f3f68;
}

.card{
  background:
    radial-gradient(840px 300px at 12% -6%, rgba(11,109,222,.10) 0%, transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.94), rgba(239,246,255,.93));
  border:1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(7,29,53,.16);
  color:var(--txt);
  animation: cf-fade-up .34s ease both;
}

.card h2{
  color:#123b61;
  letter-spacing:.25px;
}

.card h3{
  color:#215b85;
}

.muted{
  color:var(--muted);
}

.btn{
  background: linear-gradient(120deg, var(--primary), var(--secondary));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px rgba(11,109,222,.30);
  border-radius: 12px;
  letter-spacing:.15px;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 14px 30px rgba(11,109,222,.34);
}

.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(11,109,222,.24), 0 10px 26px rgba(11,109,222,.30);
}

.btn--ghost{
  background: linear-gradient(150deg, rgba(14,54,89,.07), rgba(0,163,177,.05));
  color:#174265;
  border:1px solid rgba(23,88,141,.30);
}

.btn--ghost:hover{
  background: linear-gradient(145deg, rgba(11,109,222,.14), rgba(0,163,177,.11));
  color:#103a5e;
}

.btn--danger{
  background: linear-gradient(120deg, #c93636, #ea6b4a);
  box-shadow: 0 10px 22px rgba(217,77,77,.30);
}

.btn--ok{
  background: linear-gradient(120deg, #0f9b6a, #23b97f);
  box-shadow: 0 10px 22px rgba(26,155,104,.28);
}

.btn--warn{
  background: linear-gradient(120deg, #db9220, #f2b830);
  box-shadow: 0 10px 22px rgba(229,161,31,.30);
}

.btn--soft{
  background: linear-gradient(120deg, #47617f, #5b7ca3);
  box-shadow: 0 10px 22px rgba(72,97,127,.28);
}

.input, select, textarea{
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  border:1px solid rgba(109,145,183,.52);
  color:#153150;
}

.input::placeholder, textarea::placeholder{
  color:#6e8299;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(11,109,222,.65);
  box-shadow: 0 0 0 4px rgba(11,109,222,.18);
}

label{
  color:#365c81;
}

.table{
  border:1px solid rgba(125,157,192,.44);
}

.table th{
  background: linear-gradient(180deg, #ecf4ff, #e2efff);
  color:#153a61;
  border-bottom:1px solid rgba(125,157,192,.42);
}

.table td{
  background: rgba(255,255,255,.86);
}

.table tbody tr:hover td{
  background: rgba(229,241,255,.66);
}

.badge{
  background: #e5effb;
  color:#20466d;
  border-color: rgba(78,123,170,.35);
}

.badge--ok{
  background:#def5e9;
  color:#186647;
  border-color: rgba(20,142,93,.30);
}

.badge--danger{
  background:#fde8e8;
  color:#a62e2e;
  border-color: rgba(202,66,66,.32);
}

.badge--pending{
  background:#fff4cf;
  color:#8a4a08;
  border-color: rgba(214,126,20,.34);
}

.tabs{
  gap:10px;
}

.tabs .tab:nth-child(n){
  background: linear-gradient(180deg, rgba(251,254,255,.95), rgba(236,246,255,.86)) !important;
  border:1px solid rgba(98,140,184,.30) !important;
  color:#1a436b !important;
}

.tabs .tab{
  border-radius: 999px;
  min-height: 45px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.tabs .tab:hover{
  color:#0f3c66 !important;
  border-color: rgba(11,109,222,.46) !important;
  transform: translateY(-1px);
}

.tabs .tab.active{
  background: linear-gradient(120deg, rgba(11,109,222,.94), rgba(0,163,177,.94)) !important;
  color:#fff !important;
  border-color: rgba(8,78,159,.85) !important;
  box-shadow: 0 10px 24px rgba(11,109,222,.28);
}

.tabs .tab::after{
  display:none !important;
}

.toast{
  background: linear-gradient(120deg, rgba(9,30,52,.96), rgba(19,68,104,.93));
  border:1px solid rgba(208,227,249,.22);
}

.modal__backdrop{
  background: rgba(4,16,29,.62);
  backdrop-filter: blur(8px);
}

.modal__card, .modal{
  background: linear-gradient(160deg, rgba(252,255,255,.97), rgba(239,246,255,.95));
  border-color: rgba(143,176,212,.56);
}

.modal__head{
  background: linear-gradient(180deg, rgba(233,244,255,.96), rgba(245,250,255,.96));
}

.modal__title{
  color:#155082;
}

.tools-subtab.active{
  box-shadow: 0 0 0 3px rgba(11,109,222,.16);
  animation: cf-pulse .9s ease-out 1;
}

.library-ccc__subtab,
.voting-app__subtab,
.events-subtab,
.pitch-subtab,
.tools-subtab {
  background: #eef6fd !important;
  border-color: rgba(26, 95, 158, .30) !important;
  color: #1a5f9e !important;
}

.library-ccc__subtab:hover,
.voting-app__subtab:hover,
.events-subtab:hover,
.pitch-subtab:hover,
.tools-subtab:hover {
  background: #dceffb !important;
  border-color: rgba(26, 95, 158, .46) !important;
}

.library-ccc__subtab.active,
.voting-app__subtab.active,
.events-subtab.active,
.pitch-subtab.active,
.tools-subtab.active {
  background: linear-gradient(135deg, #1a5f9e, #0b2a4a) !important;
  border-color: rgba(11, 42, 74, .72) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(11, 42, 74, .22) !important;
}

/* Programmation de tâches collaboratives */
.collab-tasks__header,
.collab-tasks__event-head,
.collab-tasks__section-head,
.collab-tasks__task-main,
.collab-tasks__pending-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.collab-tasks__tabs{
  flex-wrap:wrap;
}
.collab-tasks__task-builder,
.collab-tasks__tasks,
.collab-tasks__list{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.collab-tasks__builder-row{
  border:1px solid rgba(148,163,184,.34);
  border-radius:12px;
  background:rgba(255,255,255,.62);
  padding:12px;
}
.collab-tasks__builder-grid{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(150px, .35fr) minmax(120px, .25fr) minmax(130px, .3fr);
  gap:12px;
}
.collab-tasks__event{
  margin-top:12px;
}
.collab-tasks__event-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(260px, 1fr) auto;
  gap:12px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(148,163,184,.34);
  border-radius:8px;
  background:rgba(255,255,255,.82);
  color:#12345b;
  padding:10px 12px;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.collab-tasks__event-row:hover,
.collab-tasks__event-row:focus-visible{
  background:#f8fbff;
  border-color:rgba(37,99,235,.35);
  box-shadow:0 8px 22px rgba(15,31,51,.08);
  transform:translateY(-1px);
  outline:none;
}
.collab-tasks__event-row-main{
  display:grid;
  gap:3px;
  min-width:0;
}
.collab-tasks__event-row-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.collab-tasks__event-row-meta{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.collab-tasks__event-head{
  align-items:flex-start;
}
.collab-tasks__event-actions{
  display:grid;
  gap:8px;
  justify-items:end;
}
.collab-tasks__public-link{
  display:grid;
  grid-template-columns:minmax(240px, 1fr) auto auto;
  gap:8px;
  align-items:center;
  min-width:min(560px, 100%);
}
.collab-tasks__description{
  margin:10px 0 0;
  color:#23435f;
  white-space:pre-wrap;
}
.collab-tasks__edit-event{
  margin-top:12px;
  border:1px dashed rgba(148,163,184,.42);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(248,251,255,.8);
}
.collab-tasks__edit-event summary{
  cursor:pointer;
  font-weight:800;
  color:#143d67;
}
.collab-tasks__edit-event-grid{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(150px, .35fr) minmax(180px, .45fr);
  gap:10px;
  margin-top:10px;
}
.collab-tasks__edit-event-description,
.collab-tasks__edit-event-public{
  grid-column:1 / -1;
}
.collab-tasks__task{
  border:1px solid rgba(148,163,184,.34);
  border-radius:10px;
  background:rgba(255,255,255,.78);
  padding:12px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.collab-tasks__task.is-done{
  background:linear-gradient(135deg, rgba(220,252,231,.95), rgba(240,253,244,.98));
  border-color:rgba(22,163,74,.42);
  box-shadow:0 8px 20px rgba(22,163,74,.08);
}
.collab-tasks__task.is-done strong{
  color:#166534;
}
.collab-tasks__task-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.collab-tasks__observations{
  margin-top:6px;
  color:#23435f;
  white-space:pre-wrap;
}
.collab-tasks__capacity{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.collab-tasks__suggestions{
  margin-top:10px;
  border:1px solid rgba(214,126,20,.32);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(255,247,214,.96), rgba(255,251,235,.92));
  color:#7c3f06;
  padding:8px 10px;
  line-height:1.35;
}
.collab-tasks__suggestions strong{
  color:#7c3f06;
}
.collab-tasks__tracking{
  margin-top:10px;
  border:1px solid rgba(37,99,235,.22);
  border-radius:10px;
  background:linear-gradient(135deg, rgba(239,246,255,.88), rgba(248,251,255,.96));
  padding:10px 12px;
}
.collab-tasks__tracking summary{
  cursor:pointer;
  font-weight:900;
  color:#143d67;
}
.collab-tasks__tracking-body{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.collab-tasks__tracking-list{
  display:grid;
  gap:8px;
}
.collab-tasks__tracking-row{
  display:grid;
  grid-template-columns:minmax(180px, .7fr) minmax(150px, .35fr) minmax(240px, 1fr) auto;
  gap:8px;
  align-items:end;
  border:1px solid rgba(148,163,184,.34);
  border-radius:8px;
  background:rgba(255,255,255,.86);
  padding:9px;
}
.collab-tasks__tracking-actions{
  display:flex;
  justify-content:flex-end;
}
.collab-tasks__tracking-assign{
  border-top:1px dashed rgba(148,163,184,.42);
  padding-top:10px;
}
.collab-tasks__responsibles{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.collab-tasks__badge-remove{
  appearance:none;
  border:0;
  background:rgba(15,23,42,.1);
  color:inherit;
  border-radius:999px;
  width:18px;
  height:18px;
  line-height:16px;
  margin-left:6px;
  padding:0;
  cursor:pointer;
  font-weight:900;
}
.collab-tasks__badge-remove:hover,
.collab-tasks__badge-remove:focus-visible{
  background:rgba(15,23,42,.2);
  outline:none;
}
.collab-tasks__task-edit{
  margin-top:10px;
  border:1px dashed rgba(148,163,184,.42);
  border-radius:10px;
  background:rgba(248,251,255,.78);
  padding:10px;
}
.collab-tasks__task-edit-grid{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(140px, .35fr) minmax(110px, .25fr);
  gap:10px;
}
.collab-tasks__task-edit-grid label:last-child{
  grid-column:1 / -1;
}
.collab-tasks__assignee-picker{
  display:grid;
  gap:7px;
}
.collab-tasks__assignee-filters{
  display:grid;
  grid-template-columns:minmax(140px, .35fr) minmax(140px, .35fr) minmax(190px, 1fr);
  gap:7px;
}
.collab-tasks__assignee-count{
  font-size:.88rem;
}
.collab-tasks__assign{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto;
  gap:8px;
  align-items:end;
  margin-top:10px;
}
.collab-tasks__assign--full{
  grid-template-columns:auto 1fr;
  align-items:center;
}
.collab-tasks__pending{
  display:grid;
  gap:8px;
  margin-top:10px;
  border-top:1px dashed rgba(148,163,184,.38);
  padding-top:10px;
}
.collab-tasks__pending-row{
  align-items:center;
}
.collab-tasks__pending-row--approval{
  border:1px solid rgba(214,126,20,.32);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(255,247,214,.96), rgba(255,251,235,.92));
  padding:8px 10px;
}
.collab-tasks__pending-row--approval .muted{
  color:#8a4a08;
}
.collab-tasks__add-inline{
  margin-top:12px;
  border:1px dashed rgba(148,163,184,.42);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.55);
}
.collab-tasks__add-inline summary{
  cursor:pointer;
  font-weight:800;
  color:#143d67;
}
.collab-tasks__inline-task{
  display:grid;
  grid-template-columns:minmax(180px, 1fr) minmax(140px, .35fr) minmax(110px, .25fr);
  gap:10px;
  margin-top:10px;
}
.collab-tasks__inline-task textarea,
.collab-tasks__inline-task select,
.collab-tasks__inline-task button{
  grid-column:1 / -1;
}
.collab-tasks__inline-task .collab-tasks__assignee-picker{
  grid-column:1 / -1;
}
.collab-tasks__public-form{
  margin-top:10px;
  border-top:1px dashed rgba(148,163,184,.38);
  padding-top:10px;
}
.collab-tasks__modal.modal-overlay{
  z-index:10030;
}
.collab-tasks__modal-card{
  width:min(1120px, 96vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.collab-tasks__modal-body{
  overflow:auto;
  padding:14px;
}
.collab-tasks__modal .collab-tasks__event{
  margin-top:0;
  box-shadow:none;
}
.public-collab{
  width:min(980px, calc(100% - 28px));
  margin:0 auto;
  padding:28px 0;
}
.public-collab__card{
  margin-top:14px;
}
@media (max-width: 860px){
  .collab-tasks__header,
  .collab-tasks__event-head,
  .collab-tasks__section-head,
  .collab-tasks__event-row,
  .collab-tasks__task-main,
  .collab-tasks__pending-row{
    align-items:flex-start;
    display:flex;
    flex-direction:column;
  }
  .collab-tasks__builder-grid,
	  .collab-tasks__edit-event-grid,
	  .collab-tasks__task-edit-grid,
	  .collab-tasks__tracking-row,
	  .collab-tasks__assignee-filters,
  .collab-tasks__public-link,
  .collab-tasks__assign,
  .collab-tasks__inline-task{
    grid-template-columns:1fr;
  }
  .collab-tasks__event-actions{
    justify-items:stretch;
    width:100%;
  }
  .collab-tasks__task-actions{
    justify-content:flex-start;
  }
  .collab-tasks__event-row-main strong{
    white-space:normal;
  }
  .collab-tasks__event-row-meta{
    justify-content:flex-start;
  }
}

.public-voting-results-page {
  min-height: 100vh;
  background: #f5f8fc;
}

.public-voting-results {
  width: min(1080px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 28px 0 42px;
}

.public-voting-results__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 22px;
  color: #102f4e;
}

.public-voting-results__brand img {
  width: 76px;
  height: 54px;
  object-fit: contain;
}

.public-voting-results__brand h1 {
  margin: 2px 0 4px;
  color: #fff;
}

.public-voting-results__brand p {
  margin: 0;
  color: #58738f;
}

.public-voting-results__eyebrow {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-voting-results__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.public-voting-results__item {
  appearance: none;
  border: 1px solid rgba(148,163,184,.28);
  text-align: left;
  cursor: pointer;
  color: #102f4e;
  display: grid;
  gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.public-voting-results__item:hover {
  transform: translateY(-2px);
  border-color: rgba(185,28,28,.36);
  box-shadow: 0 16px 28px rgba(15,31,51,.12);
}

.public-voting-results__item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.public-voting-results__item-head strong {
  font-size: 1.05rem;
  color: #102f4e;
}

.public-voting-results__item-head span {
  border: 1px solid rgba(185,28,28,.20);
  border-radius: 999px;
  padding: 4px 9px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.public-voting-results__desc,
.public-voting-results__meta,
.public-voting-results__empty {
  color: #58738f;
}

.public-voting-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,14,25,.58);
}

.public-voting-modal__dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.32);
  box-shadow: 0 28px 80px rgba(5,14,25,.28);
  padding: 18px;
}

.public-voting-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.public-voting-modal__head h2 {
  margin: 2px 0 0;
  color: #102f4e;
}

.public-voting-modal__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.public-voting-ranking {
  display: grid;
  gap: 10px;
}

.public-voting-ranking__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1.6fr) minmax(120px, .8fr) 96px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  background: #f8fbff;
}

.public-voting-ranking__rank {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #b91c1c, #e11d48);
  color: #fff;
  font-weight: 900;
}

.public-voting-ranking__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-voting-ranking__main strong {
  color: #102f4e;
}

.public-voting-ranking__main span,
.public-voting-ranking__class {
  color: #58738f;
}

.public-voting-ranking__percent {
  color: #9f1239;
  font-weight: 900;
  text-align: right;
  font-size: 1.1rem;
}

@media (max-width: 700px) {
  .public-voting-results__brand {
    align-items: flex-start;
  }
  .public-voting-ranking__row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .public-voting-ranking__class,
  .public-voting-ranking__percent {
    grid-column: 2;
    text-align: left;
  }
}

.footer{
  background: linear-gradient(180deg, rgba(244,249,255,.72), rgba(234,243,254,.72));
  border-top:1px solid rgba(160,190,223,.45);
}

hr{
  border:none;
  border-top:1px solid rgba(136,166,198,.40);
}

/* Home page (index.php) */
body.home-page{
  min-height:100vh;
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(0,163,177,.28), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(11,109,222,.34), transparent 60%),
    linear-gradient(148deg, #050e19 0%, #0d2238 44%, #174369 100%);
}

.index-layout{
  max-width: 1320px;
  padding-top: 70px;
  padding-bottom: 56px;
}

.index-card{
  position:relative;
  padding: clamp(22px, 3.1vw, 46px);
  border-radius: 30px;
  overflow:hidden;
}

.index-card::before{
  content:"";
  position:absolute;
  inset:-32% auto auto -16%;
  width:430px;
  height:430px;
  background: radial-gradient(circle, rgba(11,109,222,.22), rgba(11,109,222,0));
  pointer-events:none;
}

.index-card::after{
  content:"";
  position:absolute;
  inset:auto -16% -46% auto;
  width:460px;
  height:460px;
  background: radial-gradient(circle, rgba(0,163,177,.18), rgba(0,163,177,0));
  pointer-events:none;
}

.index-head,
.index-form-row,
.login-row,
.index-parent-row{
  position:relative;
  z-index:1;
}

.index-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.index-head__left{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 400px;
}

.index-head__logo{
  width: clamp(88px, 8.7vw, 122px);
  object-fit:contain;
}

.index-head__sep{
  width:2px;
  height:58px;
  border-radius:2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.index-head__name{
  font-weight:950;
  font-size: clamp(28px, 4.6vw, 42px);
  letter-spacing:.9px;
  line-height:1.02;
  color:#0f3960;
}

.index-head__sub{
  font-size: clamp(15px, 2vw, 19px);
  color:#507395;
  margin-top:8px;
}

.index-head__right{
  display:flex;
  gap:18px;
  align-items:center;
}

.index-head__right img{
  width: clamp(74px, 8vw, 120px);
  height: clamp(74px, 8vw, 120px);
  object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(8,31,56,.16));
}

.index-form-row{
  margin-top: clamp(26px, 3.4vw, 42px);
}

.index-label{
  font-size: clamp(15px, 1.9vw, 20px);
  color:#22507b;
}

.index-input{
  padding: clamp(14px, 2.2vw, 20px);
  font-size: clamp(18px, 2.6vw, 24px);
  border-radius: 20px;
}

.login-row{
  margin-top: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.login-help{
  max-width:700px;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height:1.55;
  color:#4f7091;
}

.index-login-btn{
  padding: clamp(14px, 2.5vw, 21px) clamp(24px, 3.8vw, 36px);
  font-size: clamp(18px, 2.6vw, 25px);
  border-radius: 22px;
  font-weight:900;
}

.index-parent-row{
  margin-top:14px;
  justify-content:flex-end;
}

.index-parent-btn{
  border-radius: 20px;
  font-weight:800;
}

.home-credit{
  margin-top: 30px;
  text-align:center;
  font-size: clamp(14px, 1.7vw, 16px);
  color: rgba(226,238,255,.86);
}

.home-credit b{ color:#ffffff; }

@media (max-width: 920px){
  .index-head{ justify-content:center; }
  .index-head__left{ justify-content:center; }
  .index-head__txt{ text-align:center; }
  .index-head__right{ width:100%; justify-content:center; }
  .login-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 620px){
  .topbar{
    padding: 10px 12px;
  }
  .brand__logo{
    width:36px;
    height:36px;
  }
  .brand__sep{
    height:34px;
  }
  .brand__name{
    font-size: 15px;
  }
  .brand__sub{
    font-size: 11px;
  }
  .userchip{
    padding:6px 9px;
  }
  .layout{
    padding: 12px;
  }
  .index-layout{
    padding-top: 34px;
  }
  .index-parent-row{
    justify-content:stretch;
  }
  .index-parent-row .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .card, .btn, .tab, .tools-subtab.active{
    animation:none !important;
    transition:none !important;
  }
}

@media print{
  .card{ animation:none !important; }
}

/* =========================================================
   Tab reorganization + mobile navigation
   ========================================================= */
.tabs--organized{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: 4px 0 12px;
}

.tabs--organized .tabs__group{
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color:#4b7093;
  opacity:.95;
}

.tabs--organized .tabs__group::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(73,118,163,.44), rgba(73,118,163,0));
}

.tabs--organized .tab{
  flex:0 0 auto;
}

.tabs-mobile-nav{
  display:none;
  margin-bottom:10px;
}

.tabs-mobile-nav__label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  color:#2e5982;
  font-weight:800;
}

.tabs-mobile-nav__select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(109,145,183,.52);
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  color:#153150;
}

.tabs-mobile-nav__select:focus{
  outline:none;
  border-color: rgba(11,109,222,.65);
  box-shadow: 0 0 0 4px rgba(11,109,222,.18);
}

.tabs--scroll{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.tabs--scroll .tab{
  width:auto;
  flex:0 0 auto;
  white-space:nowrap;
}

.tabs--scroll .tabs__group{
  min-width:100%;
}

.tabs--scroll::-webkit-scrollbar{
  height:6px;
}

.tabs--scroll::-webkit-scrollbar-thumb{
  background: rgba(84,123,161,.35);
  border-radius:999px;
}

.tabs--scroll::-webkit-scrollbar-track{
  background: transparent;
}

@media (max-width: 980px){
  .tabs--organized .tab{
    min-height:44px;
  }
}

@media (max-width: 760px){
  .tabs-mobile-nav{
    display:block;
  }
  .tabs--organized .tabs__group{
    display:none;
  }
  .tabs--organized .tab{
    min-width:max-content;
  }
  .tabs--organized{
    margin-top: 0;
  }
}

/* Hotfix menu visibility:
   Organized tab bars wrap on desktop and stay horizontally scrollable on mobile. */
.tabs--organized.tabs--scroll{
  flex-wrap:wrap;
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
}

.tabs--organized.tabs--scroll .tabs__group{
  min-width:0;
  flex:0 0 100%;
}

.tabs--organized.tabs--scroll .tab{
  white-space:normal;
}

@media (max-width: 760px){
  .tabs--organized.tabs--scroll{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
  }
  .tabs--organized.tabs--scroll .tab{
    white-space:nowrap;
  }
}

/* =========================================================
   Tabs style (inspiration Clairef'Alumni) — bleu ciel / marine
   - icône + label, pilule bleue active
   - conserve classes et structure existantes
   ========================================================= */
.tabs .tab{
  background: transparent !important;
  color: #5f7390 !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transform: none !important;
  filter: none !important;
}

.tabs .tab:hover{
  background: color-mix(in srgb, var(--cf-color-primary, var(--primary, #1a5f9e)) 10%, #ffffff) !important;
  color: var(--cf-navy, #0b2a4a) !important;
  border-color: transparent !important;
  transform: none !important;
  filter: none !important;
}

.tabs .tab.active{
  background: color-mix(in srgb, #87ceeb 34%, #ffffff) !important;
  color: #0b2a4a !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.tabs .tab::after{
  display: none !important;
}

.tabs--organized .tabs__group{
  color:#4b5e74 !important;
  letter-spacing:.10em !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(75,94,116,.34), rgba(75,94,116,0)) !important;
}

/* =========================================================
   Catégories en onglets + sous-menus au hover
   (généré dynamiquement par js/common.js sur .tabs--organized)
   ========================================================= */
.tabs.tabs--organized{
  overflow: visible !important;
}

.tabs-categories{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:flex-start;
  justify-content:center;
  width:100%;
}

.tabs-cat{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.tabs-cat > .tab--category{
  width:auto;
  justify-content:center;
  text-align:center;
  padding-right:14px;
  position:relative;
}

.tabs-cat > .tab--category::before{
  display:none;
}

.tab__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:inherit;
}

.tab__icon svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tab__label{
  display:block;
}

.tabs-cat__panel{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  z-index: 2200;
  min-width: 240px;
  max-width: min(86vw, 360px);
  display:none;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(15,31,51,.16);
  background:#fff;
  box-shadow: 0 16px 30px rgba(15,31,51,.16);
}

.tabs-cat__panel .tab{
  width:100%;
  min-height:40px;
  justify-content:flex-start;
  text-align:left;
  padding:8px 12px;
  border-radius:10px !important;
}

@media (hover:hover){
  .tabs-cat:hover > .tabs-cat__panel{
    display:flex;
  }
}

.tabs-cat.is-open > .tabs-cat__panel{
  display:flex;
}

.tabs-cat.is-current > .tab--category{
  background: color-mix(in srgb, #87ceeb 34%, #ffffff) !important;
  color: #0b2a4a !important;
  border-color: transparent !important;
}

.tabs-cat.is-current > .tab--category::before{
  opacity:.95;
}

@media (max-width: 900px){
  .tabs-categories{
    display:block;
  }
  .tabs-cat{
    width:100%;
    min-width:0;
    margin-bottom:8px;
  }
  .tabs-cat__panel{
    position:static;
    top:auto;
    left:auto;
    max-width:none;
    margin-top:6px;
    box-shadow:none;
    border-color: rgba(15,31,51,.14);
  }
}

/* =========================================================
   V46 - CLAIREFOLIOS style model (red palette)
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-red-950:#4f0a18;
  --cf-red-900:#650d1f;
  --cf-red-800:#7f1129;
  --cf-red-700:#991633;
  --cf-red-600:#b61f43;
  --cf-red-500:#cf2f56;
  --cf-red-100:#fde8ef;
  --cf-red-050:#fff7fa;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(182,31,67,.25), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(127,17,41,.20), transparent 60%),
    linear-gradient(180deg, #fff8fb 0%, #fff2f6 100%) !important;
  color:#31111d !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(182,31,67,.30), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(127,17,41,.32), transparent 60%),
    linear-gradient(148deg, #5a0c1b 0%, #7f1129 44%, #991633 100%) !important;
}

.topbar{
  background: linear-gradient(128deg, var(--cf-red-950), var(--cf-red-800) 48%, #6f0f24) !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 14px 32px rgba(95,10,29,.36) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #f47f98, var(--cf-red-500)) !important;
}

.brand__name,
.brand__sub{
  color:#fff6f9 !important;
}

.userchip,
.iconbtn{
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(255,255,255,.18) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,251,.93)) !important;
  border:1px solid rgba(154,21,53,.18) !important;
  box-shadow:0 16px 36px rgba(95,10,29,.12) !important;
  color:#31111d !important;
}

.card h2, .card h3{
  color:#5a1024 !important;
}

.muted, label{
  color:#6a3a4c !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-red-800), var(--cf-red-500)) !important;
  border:1px solid rgba(125,15,40,.42) !important;
  color:#fff !important;
  box-shadow:0 9px 18px rgba(125,15,40,.28) !important;
}

.btn:hover{
  filter:brightness(1.03);
}

.btn--ghost{
  border-color: rgba(125,15,40,.35) !important;
  color: var(--cf-red-800) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(252,231,238,.72) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(154,21,53,.28) !important;
  color:#331522 !important;
}

.input::placeholder, textarea::placeholder{
  color:#8b6271 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(154,21,53,.54) !important;
  box-shadow: 0 0 0 .2rem rgba(154,21,53,.14) !important;
}

.table{
  border-color: rgba(154,21,53,.18) !important;
}

.table th{
  background: rgba(154,21,53,.08) !important;
  color:#5a1024 !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(154,21,53,.14) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#4b1526 !important;
  border:1px solid rgba(154,21,53,.22) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(154,21,53,.08) !important;
  color:#3f1622 !important;
  border-color: rgba(154,21,53,.36) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, #1a5f9e, #0b2a4a) !important;
  color:#fff !important;
  border-color:#0b2a4a !important;
  box-shadow: 0 8px 18px rgba(111,13,32,.24) !important;
}

.tabs--organized .tabs__group{
  color:#7b2f47 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(123,47,71,.34), rgba(123,47,71,0)) !important;
}

.tabs-cat > .tab--category::before{
  opacity:.9;
}

.tabs-cat__panel{
  border:1px solid rgba(154,21,53,.20) !important;
  background:#fff !important;
  box-shadow: 0 16px 30px rgba(95,10,29,.18) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, #1a5f9e, #0b2a4a) !important;
  color:#fff !important;
  border-color:#0b2a4a !important;
}

.tabs-mobile-nav__label{
  color:#6a2d44 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(154,21,53,.28) !important;
  background:#fff !important;
  color:#3f1622 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(154,21,53,.54) !important;
  box-shadow: 0 0 0 .2rem rgba(154,21,53,.14) !important;
}

.footer{
  border-top: 1px solid rgba(154,21,53,.18) !important;
  background: rgba(255,255,255,.78) !important;
  color:#5a3a47 !important;
}

.footer strong{
  color:#4f0a18 !important;
}

.index-head__name{
  color:#5a1024 !important;
}

.index-head__sub,
.login-help{
  color:#7c5463 !important;
}

.home-credit{
  color:rgba(255,241,245,.92) !important;
}

/* =========================================================
   V47 - CLAIREFOLIOS style scolaire/professionnel
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-school-navy-950:#0f2238;
  --cf-school-navy-900:#16324f;
  --cf-school-navy-800:#204566;
  --cf-school-blue-700:#2f6292;
  --cf-school-blue-600:#3d79b1;
  --cf-school-blue-500:#4c93cd;
  --cf-school-sky-100:#e8f1fa;
  --cf-school-sky-050:#f4f8fd;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(76,147,205,.16), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(47,98,146,.12), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
  color:#1f2f42 !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(76,147,205,.20), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(47,98,146,.22), transparent 60%),
    linear-gradient(148deg, #102236 0%, #1a395a 44%, #275177 100%) !important;
}

.topbar{
  background: linear-gradient(125deg, var(--cf-school-navy-950), var(--cf-school-navy-900) 52%, #1d4267) !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 12px 26px rgba(12,30,49,.30) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #7db6e1, var(--cf-school-blue-500)) !important;
}

.brand__name,
.brand__sub{
  color:#f4f9ff !important;
}

.userchip,
.iconbtn{
  background: rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(255,255,255,.20) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,251,255,.94)) !important;
  border:1px solid rgba(56,102,142,.20) !important;
  box-shadow:0 14px 30px rgba(19,44,70,.10) !important;
  color:#1f2f42 !important;
}

.card h2, .card h3{
  color:#21456a !important;
}

.muted, label{
  color:#5b728b !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-school-navy-800), var(--cf-school-blue-600)) !important;
  border:1px solid rgba(26,57,90,.45) !important;
  color:#fff !important;
  box-shadow:0 8px 16px rgba(22,50,79,.22) !important;
}

.btn:hover{
  filter:brightness(1.04);
}

.btn--ghost{
  border-color: rgba(47,98,146,.34) !important;
  color: var(--cf-school-navy-900) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(232,241,250,.70) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(56,102,142,.30) !important;
  color:#1f2f42 !important;
}

.input::placeholder, textarea::placeholder{
  color:#7c90a6 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(47,98,146,.56) !important;
  box-shadow: 0 0 0 .2rem rgba(47,98,146,.14) !important;
}

.table{
  border-color: rgba(56,102,142,.22) !important;
}

.table th{
  background: rgba(61,121,177,.10) !important;
  color:#27496d !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(56,102,142,.16) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#27496d !important;
  border:1px solid rgba(56,102,142,.24) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(61,121,177,.10) !important;
  color:#21456a !important;
  border-color: rgba(47,98,146,.38) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, var(--cf-school-navy-800), var(--cf-school-navy-900)) !important;
  color:#fff !important;
  border-color: var(--cf-school-navy-900) !important;
  box-shadow: 0 8px 16px rgba(22,50,79,.20) !important;
}

.tabs--organized .tabs__group{
  color:#4f6882 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(79,104,130,.36), rgba(79,104,130,0)) !important;
}

.tabs-cat__panel{
  border:1px solid rgba(56,102,142,.20) !important;
  background:#fff !important;
  box-shadow: 0 14px 24px rgba(19,44,70,.14) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, var(--cf-school-navy-800), var(--cf-school-navy-900)) !important;
  color:#fff !important;
  border-color: var(--cf-school-navy-900) !important;
}

.tabs-mobile-nav__label{
  color:#4f6882 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(56,102,142,.30) !important;
  background:#fff !important;
  color:#1f2f42 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(47,98,146,.56) !important;
  box-shadow: 0 0 0 .2rem rgba(47,98,146,.14) !important;
}

.footer{
  border-top: 1px solid rgba(56,102,142,.20) !important;
  background: rgba(255,255,255,.84) !important;
  color:#5b728b !important;
}

.footer strong{
  color:#16324f !important;
}

.index-head__name{
  color:#21456a !important;
}

.index-head__sub,
.login-help{
  color:#61778f !important;
}

.home-credit{
  color:rgba(236,244,253,.95) !important;
}

/* =========================================================
   V48 - CLAIREFOLIOS style bleu fonce
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-deep-950:#071326;
  --cf-deep-900:#0c1f38;
  --cf-deep-850:#102946;
  --cf-deep-800:#16355b;
  --cf-deep-700:#1f4a78;
  --cf-deep-600:#2a5f96;
  --cf-deep-500:#3a76b3;
  --cf-deep-100:#dbe8f6;
  --cf-deep-050:#f2f7fd;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(58,118,179,.18), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(31,74,120,.20), transparent 60%),
    linear-gradient(165deg, var(--cf-deep-950) 0%, var(--cf-deep-900) 46%, var(--cf-deep-800) 100%) !important;
  color:#e9f1fb !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(58,118,179,.20), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(31,74,120,.24), transparent 60%),
    linear-gradient(148deg, #06111f 0%, #0d2138 44%, #14345a 100%) !important;
}

.topbar{
  background: linear-gradient(125deg, var(--cf-deep-950), var(--cf-deep-900) 52%, var(--cf-deep-800)) !important;
  border-bottom:1px solid rgba(212,227,246,.24) !important;
  box-shadow:0 12px 26px rgba(4,12,22,.45) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #7ba7d2, var(--cf-deep-500)) !important;
}

.brand__name,
.brand__sub{
  color:#f2f8ff !important;
}

.userchip,
.iconbtn{
  background: rgba(215,230,247,.14) !important;
  border:1px solid rgba(215,230,247,.30) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(215,230,247,.24) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(248,252,255,.96), rgba(241,248,255,.94)) !important;
  border:1px solid rgba(66,108,152,.28) !important;
  box-shadow:0 14px 28px rgba(6,20,36,.26) !important;
  color:#1a2f45 !important;
}

.card h2, .card h3{
  color:#173d62 !important;
}

.muted, label{
  color:#5f7893 !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-deep-800), var(--cf-deep-600)) !important;
  border:1px solid rgba(18,41,70,.52) !important;
  color:#fff !important;
  box-shadow:0 8px 16px rgba(10,26,45,.34) !important;
}

.btn:hover{
  filter:brightness(1.05);
}

.btn--ghost{
  border-color: rgba(42,95,150,.36) !important;
  color: var(--cf-deep-900) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(219,232,246,.66) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(66,108,152,.34) !important;
  color:#1a2f45 !important;
}

.input::placeholder, textarea::placeholder{
  color:#768ea8 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(42,95,150,.62) !important;
  box-shadow: 0 0 0 .2rem rgba(42,95,150,.16) !important;
}

.table{
  border-color: rgba(66,108,152,.24) !important;
}

.table th{
  background: rgba(42,95,150,.12) !important;
  color:#21496f !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(66,108,152,.18) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#204569 !important;
  border:1px solid rgba(66,108,152,.28) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(42,95,150,.12) !important;
  color:#173d62 !important;
  border-color: rgba(42,95,150,.44) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, var(--cf-deep-800), var(--cf-deep-900)) !important;
  color:#fff !important;
  border-color: var(--cf-deep-900) !important;
  box-shadow: 0 8px 16px rgba(10,26,45,.28) !important;
}

.tabs--organized .tabs__group{
  color:#6883a0 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(104,131,160,.38), rgba(104,131,160,0)) !important;
}

.tabs-cat__panel{
  border:1px solid rgba(66,108,152,.24) !important;
  background:#fff !important;
  box-shadow: 0 14px 24px rgba(8,22,39,.22) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, var(--cf-deep-800), var(--cf-deep-900)) !important;
  color:#fff !important;
  border-color: var(--cf-deep-900) !important;
}

.tabs-mobile-nav__label{
  color:#7d96b2 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(66,108,152,.34) !important;
  background:#fff !important;
  color:#1a2f45 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(42,95,150,.62) !important;
  box-shadow: 0 0 0 .2rem rgba(42,95,150,.16) !important;
}

.footer{
  border-top: 1px solid rgba(145,174,206,.22) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(17,38,61,.75) !important;
}

.footer strong{
  color: rgba(17,38,61,.92) !important;
}

/* =========================================================
   Palette enforcer (dernier override)
   Objectif: éviter les couleurs "en dur" qui bloquent le thème.
   ========================================================= */

/* Structure */
.topbar{
  background: linear-gradient(120deg, rgba(0,0,0,.10), rgba(0,0,0,.10)), linear-gradient(120deg, var(--bg0), var(--bg1)) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.brand__sep{
  background: linear-gradient(180deg, var(--secondary), var(--primary)) !important;
}

.side{
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card) 84%, transparent)) !important;
  border-color: var(--card-border) !important;
}

.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card-soft) 92%, transparent)) !important;
  border-color: var(--card-border) !important;
  color: var(--txt) !important;
}

/* Navigation */
.nav a:hover{
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: var(--primary) !important;
}
.nav a.active{
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
  color: var(--primary) !important;
}

/* Boutons / tabs */
.btn{
  background: linear-gradient(120deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
}
.tab.active{
  background: linear-gradient(120deg, var(--primary), var(--secondary)) !important;
  border-color: color-mix(in srgb, var(--primary) 65%, transparent) !important;
  color:#fff !important;
}

/* Badges */
.badge--info{
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
  color: var(--txt) !important;
}

.index-head__name{
  color:#1a4a75 !important;
}

.index-head__sub,
.login-help{
  color:#5f7893 !important;
}

.home-credit{
  color:rgba(225,237,251,.95) !important;
}

/* =========================
   Events / projects
   ========================= */
.events-mode-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.events-checklist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.events-checklist .check{
  min-width:180px;
}

.events-checklist--stack{
  flex-direction:column;
  flex-wrap:nowrap;
  max-height:260px;
  overflow:auto;
}

.events-dropdown-picker{
  margin-top:8px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  overflow:hidden;
}

.events-dropdown-picker summary{
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:#12304f;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.events-dropdown-picker summary::-webkit-details-marker{
  display:none;
}

.events-dropdown-picker[open] summary{
  border-bottom:1px solid rgba(148,163,184,.22);
}

.events-dropdown-picker > .events-checklist{
  padding:12px 14px 14px;
  margin-top:0;
}

.events-target-class{
  margin-top:10px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  overflow:hidden;
}

.events-target-class summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:#12304f;
}

.events-target-class summary::-webkit-details-marker{
  display:none;
}

.events-target-class__body{
  padding:0 16px 16px;
}

.events-target-class__all{
  margin-bottom:10px;
}

.events-target-class__students{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.32);
}

.events-pane .events-subtab{
  min-width:220px;
}

.events-subtab.active{
  background:linear-gradient(180deg, var(--cf-deep-800), var(--cf-deep-900)) !important;
  color:#fff !important;
  border-color:var(--cf-deep-900) !important;
  box-shadow:0 8px 16px rgba(10,26,45,.20) !important;
}

.event-card{
  position:relative;
  overflow:hidden;
}

.event-card__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.event-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.event-card__stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
  margin-top:12px;
}

.event-card__stat{
  border:1px solid rgba(148,163,184,.32);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.55);
}

.event-card__stat strong{
  display:block;
  font-size:18px;
  color:#0f2743;
}

.event-targets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.event-target-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(66,108,152,.24);
  background:rgba(247,250,255,.92);
  font-size:12px;
  color:#244364;
}

.events-camera-box{
  border:1px dashed rgba(66,108,152,.34);
  border-radius:16px;
  background:rgba(10,29,50,.06);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.events-camera-box video{
  width:100%;
  max-height:320px;
  object-fit:cover;
  display:block;
}

.cfcard-preview{
  width:min(100%, 420px);
  aspect-ratio:105 / 74;
  margin:0 auto;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(7,26,47,.12);
  box-shadow:0 14px 30px rgba(7,26,47,.12);
  background:#fff;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) minmax(150px,49%);
  position:relative;
}
.cfcard-preview::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(14,116,144,.08), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(11,61,116,.07), transparent 36%);
  pointer-events:none;
}
.cfcard-preview__stripe{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#0a3568 0%,#0d4f86 52%,#0f6b5f 100%);
  color:#fff;
  padding:10px 8px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.cfcard-preview__stripe img{
  width:30px;height:30px;object-fit:contain;background:rgba(255,255,255,.96);border-radius:6px;padding:3px;
}
.cfcard-preview__stripe-brand{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
}
.cfcard-preview__main{
  position:relative;z-index:1;
  padding:10px 12px 8px;
  display:flex;flex-direction:column;min-width:0;
}
.cfcard-preview__topline{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;
}
.cfcard-preview__school-name{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0a3568;line-height:1.2}
.cfcard-preview__school-city{margin-top:2px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#5b6f86}
.cfcard-preview__year{
  font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a3568;
  background:rgba(10,53,104,.08);border:1px solid rgba(10,53,104,.12);border-radius:999px;padding:3px 8px;white-space:nowrap;
}
.cfcard-preview__badge{
  align-self:flex-start;background:linear-gradient(90deg,#0a3568,#0d5f8f);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;
}
.cfcard-preview__subtitle{font-size:8px;font-weight:700;color:#5b6f86;margin-bottom:6px}
.cfcard-preview__name{font-size:15px;font-weight:900;line-height:1.05;text-transform:uppercase;color:#071a2f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcard-preview__firstname{margin-top:3px;font-size:12px;font-weight:800;color:#123a67;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcard-preview__meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cfcard-preview__chip{
  font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0a3568;
  background:#eef4fb;border:1px solid rgba(10,53,104,.12);border-radius:999px;padding:3px 8px;
}
.cfcard-preview__footer{
  margin-top:auto;padding-top:6px;border-top:1px solid rgba(7,26,47,.08);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.cfcard-preview__footer img{height:16px;width:auto}
.cfcard-preview__footer-tag{font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7b8da3;text-align:right;line-height:1.25}
.cfcard-preview__qr{
  position:relative;z-index:1;
  padding:8px 8px 6px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef4fa 100%);
  border-left:1px solid rgba(7,26,47,.08);
  min-width:0;
}
.cfcard-preview__qr-frame{
  background:#fff;border:2px solid rgba(10,53,104,.16);border-radius:8px;padding:4px;
  display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0;
}
.cfcard-preview__qr-frame img{width:100%;max-width:190px;aspect-ratio:1/1;height:auto;display:block;object-fit:contain}
.cfcard-preview__qr-caption{font-size:7px;font-weight:800;color:#0a3568;text-transform:uppercase;letter-spacing:.06em;text-align:center}

.mgr-card-item__check{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:700;color:#0a3568;
}

.events-student-card__qr{
  border-radius:20px;
  border:1px solid rgba(66,108,152,.24);
  background:#fff;
  padding:14px;
  text-align:center;
}

.events-student-card__qr img{
  width:100%;
  max-width:230px;
  height:auto;
}

.events-manager-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}

@media (max-width: 900px){
  .events-manager-cards-grid{
    grid-template-columns:1fr;
  }
}
.report-filters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

.report-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.report-search-grid{
  display:grid;
  grid-template-columns:2fr repeat(3, minmax(160px, .9fr));
  gap:12px;
}

.report-filter-card{
  border:1px solid rgba(148, 163, 184, 0.35);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,0.52);
  box-shadow:0 12px 24px rgba(11,28,45,0.08);
}

.report-filter-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.report-filter-card__title{
  font-weight:800;
  color:#17365a;
}

.report-filter-card__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.report-checklist{
  max-height:240px;
  overflow:auto;
  padding-right:4px;
}

.report-checklist__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(148, 163, 184, 0.18);
  cursor:pointer;
}

.report-checklist__item:last-child{
  border-bottom:none;
}

.report-checklist__item input{
  margin-top:3px;
}

.report-checklist__name{
  display:block;
  font-weight:700;
  color:#17365a;
}

.report-checklist__meta{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#64748b;
}

.report-summary{
  display:grid;
  grid-template-columns:minmax(160px, 220px) 1fr 1fr;
  gap:14px;
  align-items:start;
}

.report-summary__stat,
.report-summary__block{
  border:1px solid rgba(148, 163, 184, 0.28);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,0.55);
}

.report-summary__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
  margin-bottom:6px;
}

.report-summary__value{
  font-size:28px;
  font-weight:900;
  color:#17365a;
}

.report-summary__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#17365a;
  font-weight:600;
}

.report-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#49627e;
  font-weight:600;
}

.report-meta__items{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}

.report-table-wrap{
  overflow:auto;
}

.report-table{
  min-width:1080px;
}

.report-pagination{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

.report-pagination__wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  flex-wrap:wrap;
}

.report-pagination__info{
  color:#49627e;
  font-weight:700;
}

.report-pagination__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

@media (max-width: 960px){
  .report-search-grid{
    grid-template-columns:1fr;
  }
  .report-summary{
    grid-template-columns:1fr;
  }
  .report-meta,
  .report-pagination{
    justify-content:flex-start;
  }
}

/* =============================
   Interrogation - Pitch (prof)
   ============================= */
.pitch-subtabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pitch-subtab.active{
  box-shadow:0 14px 28px rgba(15, 23, 42, 0.16);
}

.pitch-import{
  border-style:dashed;
}

.pitch-arguments-input{
  min-height:220px;
  resize:vertical;
}

.pitch-list-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:16px 18px;
  border:1px solid rgba(30, 64, 175, 0.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,247,255,0.92));
}

.pitch-list-card + .pitch-list-card{
  margin-top:12px;
}

.pitch-list-card__main{
  min-width:0;
  flex:1 1 auto;
}

.pitch-list-card__meta{
  color:#64748b;
  font-weight:700;
  margin-bottom:6px;
}

.pitch-list-card__title{
  color:#17365a;
  font-size:18px;
  font-weight:900;
  line-height:1.35;
}

.pitch-list-card__criteria{
  margin-top:8px;
  color:#35506d;
}

.pitch-list-card__stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.pitch-list-card__actions{
  flex:0 0 auto;
}

.pitch-session-header{
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(15, 23, 42, 0.06), rgba(37, 99, 235, 0.1));
  border:1px solid rgba(37, 99, 235, 0.16);
}

.pitch-session-question{
  font-size:22px;
  line-height:1.35;
  color:#17365a;
  font-weight:900;
}

.pitch-session-criteria-title{
  color:#17365a;
  font-size:15px;
  font-weight:900;
  margin-bottom:8px;
}

.pitch-session-criteria{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(239, 246, 255, 0.84);
  border:1px solid rgba(37, 99, 235, 0.14);
  color:#27435f;
}

.pitch-session-criteria ul{
  margin:0;
  padding-left:18px;
}

.pitch-draw-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.pitch-draw-summary > div{
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(148, 163, 184, 0.24);
}

.pitch-draw-label{
  color:#64748b;
  font-weight:700;
  margin-bottom:6px;
}

.pitch-draw-value{
  color:#17365a;
  font-weight:900;
  font-size:28px;
  line-height:1.15;
}

.pitch-draw-value--small{
  font-size:18px;
}

.pitch-argument-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

.pitch-argument{
  display:flex;
  gap:12px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(148, 163, 184, 0.24);
  background:rgba(255,255,255,0.92);
}

.pitch-argument--pour{
  border-color:rgba(22, 163, 74, 0.28);
  background:linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.94));
}

.pitch-argument--contre{
  border-color:rgba(220, 38, 38, 0.26);
  background:linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.94));
}

.pitch-argument__index{
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg, #17365a, #2563eb);
  font-weight:900;
  flex:0 0 38px;
}

.pitch-argument__type{
  color:#35506d;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.pitch-argument__text{
  margin-top:4px;
  color:#17365a;
  font-size:15px;
  line-height:1.45;
  font-weight:700;
}

.pitch-score-display{
  font-size:16px;
  font-weight:800;
  color:#17365a;
}

@media (max-width: 780px){
  .pitch-list-card{
    flex-direction:column;
  }
  .pitch-list-card__actions{
    width:100%;
  }
  .pitch-list-card__actions .btn{
    width:100%;
  }
  .pitch-draw-value{
    font-size:24px;
  }
  .pitch-argument-list{
    grid-template-columns:1fr;
  }
}
.pitch-class-checklist{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}

.pitch-class-checklist .check{
  min-height:50px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(148,163,184,0.28);
}

.pitch-list-card__classes{
  margin-top:8px;
  color:#35506d;
  font-weight:800;
}

.pitch-list-card__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:220px;
}

.pitch-list-card__actions .btn{
  width:100%;
  justify-content:center;
}

.pitch-notes-card{
  padding:18px 20px;
  border:1px solid rgba(30, 64, 175, 0.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,247,255,0.94));
}

.pitch-notes-card + .pitch-notes-card{
  margin-top:14px;
}

.pitch-notes-card__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.pitch-notes-card__main{
  min-width:0;
  flex:1 1 auto;
}

.pitch-notes-card__stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pitch-notes-card__classes{
  margin-top:8px;
  color:#35506d;
  font-weight:700;
}

.pitch-notes-card__criteria{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pitch-notes-card__criteria span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(219, 234, 254, 0.76);
  border:1px solid rgba(59, 130, 246, 0.18);
  color:#17365a;
  font-size:13px;
  font-weight:700;
}

.pitch-notes-table-wrap{
  margin-top:14px;
  overflow-x:auto;
}

.pitch-notes-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.pitch-notes-table th,
.pitch-notes-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(148, 163, 184, 0.18);
  text-align:left;
}

.pitch-notes-table th{
  color:#17365a;
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:rgba(219, 234, 254, 0.58);
}

.pitch-notes-table td{
  color:#35506d;
  font-size:15px;
  font-weight:700;
  background:rgba(255,255,255,0.78);
}

.pitch-notes-groups{
  margin-top:14px;
}

.pitch-notes-group{
  border:1px solid rgba(148, 163, 184, 0.18);
  border-radius:16px;
  background:rgba(255,255,255,0.7);
  overflow:hidden;
}

.pitch-notes-group + .pitch-notes-group{
  margin-top:10px;
}

.pitch-notes-group__summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(239,246,255,0.92), rgba(219,234,254,0.76));
}

.pitch-notes-group__summary::-webkit-details-marker{
  display:none;
}

.pitch-notes-group__title{
  color:#17365a;
  font-size:16px;
  font-weight:900;
}

.pitch-notes-group__meta{
  margin-top:4px;
  color:#35506d;
  font-size:13px;
  font-weight:700;
}

.pitch-notes-group__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(37, 99, 235, 0.22);
  color:#17365a;
  font-size:13px;
  font-weight:900;
}

.pitch-notes-group[open] .pitch-notes-group__toggle{
  background:rgba(219, 234, 254, 0.9);
}

#pitchAssignCard{
  border-style:dashed;
}

@media (max-width: 780px){
  .pitch-class-checklist{
    grid-template-columns:1fr;
  }

  .pitch-list-card__actions{
    min-width:0;
  }

  .pitch-notes-card__header{
    flex-direction:column;
  }

  .pitch-notes-card__stats{
    justify-content:flex-start;
  }

  .pitch-notes-group__summary{
    flex-direction:column;
    align-items:flex-start;
  }
}

.exam-attempt-card.exam-attempt-card--graded{
  --card-tint: rgba(34,197,94,.22) !important;
  border:1px solid rgba(74,222,128,.92) !important;
  background:linear-gradient(180deg, rgba(236,253,245,1) 0%, rgba(220,252,231,1) 100%) !important;
  box-shadow:0 14px 40px rgba(22,163,74,.12);
}

.exam-attempt-card.exam-attempt-card--graded .card__body{
  background:transparent !important;
}

.exam-attempt-card__status--graded{
  color:#15803d;
  font-weight:700;
}

/* ==============================
   Clairef'CCC - Bibliothèque
   ============================== */
.library-ccc {
  display: grid;
  gap: 14px;
}

.library-ccc__hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.library-ccc__hero h2 {
  margin: 0 0 6px;
}

.library-ccc__hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(26, 83, 136, 0.12);
  color: #113d68;
  font-weight: 700;
}

.library-ccc__subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.library-ccc__subtab {
  appearance: none;
  border: 1px solid rgba(44, 93, 143, 0.18);
  background: #f7fbff;
  color: #23486f;
  border-radius: 16px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.library-ccc__subtab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(26, 83, 136, 0.08);
}

.library-ccc__subtab.active {
  background: linear-gradient(135deg, #12497d, #2d78b8);
  color: #fff;
  border-color: transparent;
}

.library-ccc__flash {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(26, 83, 136, 0.12);
  background: rgba(18, 73, 125, 0.08);
  color: #0f3c65;
  font-weight: 600;
}

.library-ccc__flash.hidden {
  display: none;
}

.library-ccc__flash--success {
  background: rgba(34, 139, 85, 0.12);
  border-color: rgba(34, 139, 85, 0.2);
  color: #0e6a3c;
}

.library-ccc__flash--error {
  background: rgba(191, 60, 60, 0.1);
  border-color: rgba(191, 60, 60, 0.16);
  color: #962d2d;
}

.library-ccc__flash--info {
  background: rgba(18, 73, 125, 0.08);
  border-color: rgba(18, 73, 125, 0.12);
  color: #0f3c65;
}

.library-ccc__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.library-ccc__stat {
  padding: 18px;
}

.library-ccc__stat-label {
  color: #5d7998;
  font-weight: 600;
  font-size: 14px;
}

.library-ccc__stat-value {
  margin-top: 8px;
  color: #143d67;
  font-size: 30px;
  font-weight: 800;
}

.library-ccc__toolbar {
  align-items: end;
}

.library-ccc__toolbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.library-ccc__grid,
.library-ccc__stack {
  display: grid;
  gap: 12px;
}

.library-ccc__manager-dashboard {
  display: grid;
  gap: 12px;
}

.library-ccc__quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.library-ccc__action-tile {
  appearance: none;
  text-align: left;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
  color: #173f67;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(18, 47, 78, 0.06);
  min-height: 96px;
}

.library-ccc__action-tile:hover,
.library-ccc__action-tile:focus-visible {
  border-color: rgba(45, 120, 184, 0.36);
  transform: translateY(-1px);
}

.library-ccc__action-tile strong,
.library-ccc__action-tile span {
  display: block;
}

.library-ccc__action-tile strong {
  font-size: 17px;
}

.library-ccc__action-tile span {
  margin-top: 6px;
  color: #5d7998;
  font-weight: 600;
  line-height: 1.35;
}

.library-ccc__manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.library-ccc__manager-card {
  display: grid;
  gap: 12px;
}

.library-ccc__manager-metrics {
  display: grid;
  gap: 8px;
  color: #355a7f;
}

.library-ccc__manager-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.08);
}

.library-ccc__manager-metrics span:last-child {
  border-bottom: 0;
}

.library-ccc__manager-metrics strong {
  color: #143d67;
  font-size: 20px;
}

.library-ccc__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#libraryCccBooks {
  grid-template-columns: 1fr;
  max-height: min(68vh, 760px);
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
}

.library-ccc__catalog-section {
  display: grid;
  gap: 12px;
  padding: 2px 0 12px;
}

.library-ccc__catalog-heading,
.library-ccc__genre-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.library-ccc__catalog-heading {
  padding: 8px 2px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.12);
}

.library-ccc__catalog-heading h3 {
  margin: 0 0 8px;
  color: #143d67;
}

.library-ccc__catalog-heading span,
.library-ccc__genre-heading span {
  color: #5d7998;
  font-weight: 700;
  white-space: nowrap;
}

.library-ccc__genre-group {
  display: grid;
  gap: 10px;
}

.library-ccc__genre-heading {
  color: #23486f;
  padding: 0 2px;
}

.library-ccc__catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}

.library-ccc__book-card,
.library-ccc__reservation,
.library-ccc__admin-row {
  border: 1px solid rgba(31, 81, 128, 0.12);
}

.library-ccc__book-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.library-ccc__book-content {
  min-width: 0;
}

.library-ccc__cover,
.library-ccc__cover-preview {
  display: grid;
  place-items: center;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f9fc, #ffffff);
  color: #5d7998;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}

.library-ccc__cover {
  width: 104px;
  aspect-ratio: 3 / 4;
}

.library-ccc__cover--thumb {
  width: 56px;
  min-width: 56px;
  border-radius: 8px;
}

.library-ccc__cover img,
.library-ccc__cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.library-ccc__cover-preview {
  width: min(100%, 130px);
  aspect-ratio: 3 / 4;
}

.library-ccc__book-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 10px;
}

.library-ccc__book-head h3,
.library-ccc__reservation h3 {
  margin: 0;
}

.library-ccc__book-badges,
.library-ccc__book-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.library-ccc__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(18, 73, 125, 0.09);
  color: #15466f;
  font-size: 12px;
  font-weight: 700;
}

.library-ccc__pill--success {
  background: rgba(34, 139, 85, 0.12);
  color: #0f6f41;
}

.library-ccc__pill--warning {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.library-ccc__pill--danger {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
}

.library-ccc__notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 14px;
  line-height: 1.45;
}

.library-ccc__notice small {
  display: block;
  margin-top: 4px;
  color: inherit;
  opacity: .78;
}

.library-ccc__notice--success {
  background: rgba(34, 139, 85, 0.08);
  color: #0f5d39;
  border-color: rgba(34, 139, 85, 0.18);
}

.library-ccc__notice--warning {
  background: rgba(217, 119, 6, 0.1);
  color: #7c3f07;
  border-color: rgba(217, 119, 6, 0.2);
}

.library-ccc__notice--danger {
  background: rgba(185, 28, 28, 0.08);
  color: #8f1d1d;
  border-color: rgba(185, 28, 28, 0.18);
}

.library-ccc__book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #54708f;
  font-size: 14px;
}

.library-ccc__book-description {
  margin: 12px 0 14px;
  color: #355a7f;
  line-height: 1.55;
}

.library-ccc__reservation {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.library-ccc__reservation--active {
  background: rgba(34, 139, 85, 0.06);
  border-color: rgba(34, 139, 85, 0.18);
}

.library-ccc__loan--success {
  border-color: rgba(34, 139, 85, 0.18);
}

.library-ccc__loan--warning {
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.2);
}

.library-ccc__loan--danger {
  background: rgba(185, 28, 28, 0.05);
  border-color: rgba(185, 28, 28, 0.2);
}

.library-ccc__admin-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.library-ccc__admin-book-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.library-ccc__taxonomy-list,
.library-ccc__taxonomy-grid,
.library-ccc__taxonomy-chips {
  display: grid;
  gap: 12px;
}

.library-ccc__taxonomy-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.library-ccc__taxonomy-grid h4 {
  margin: 0 0 8px;
  color: #143d67;
}

.library-ccc__taxonomy-chips {
  display: flex;
  flex-wrap: wrap;
}

.library-ccc__history-row,
.library-ccc__limit-row {
  display: grid;
  gap: 10px;
  align-items: center;
}

.library-ccc__scan-card {
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.58);
}

.library-ccc__scanner {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(31, 81, 128, 0.22);
  border-radius: 14px;
  background: rgba(247,251,255,.86);
  display: grid;
  gap: 10px;
}

.library-ccc__scanner.hidden {
  display: none;
}

.library-ccc__scanner video {
  width: min(100%, 520px);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #0f172a;
  object-fit: cover;
}

.library-ccc__copy-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.library-ccc__copy-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 10px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 12px;
  background: #fff;
}

.library-ccc__copy-qr img {
  width: 96px;
  height: 96px;
}

.library-ccc__copy-qr code {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.library-ccc__scan-result {
  border-color: rgba(31, 81, 128, 0.14);
  color: #102f4e;
}

.library-ccc__scan-result h3,
.library-ccc__scan-result strong {
  color: #102f4e;
}

.library-ccc__modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7, 18, 32, 0.46);
}

.library-ccc__modal.hidden {
  display: none;
}

.library-ccc__modal-dialog {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  border: 1px solid rgba(31, 81, 128, 0.18);
  border-radius: 16px;
  background: #fff;
  color: #102f4e;
  box-shadow: 0 24px 70px rgba(7, 18, 32, 0.28);
}

.library-ccc__modal-head,
.library-ccc__modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(31, 81, 128, 0.1);
}

.library-ccc__modal-head h3 {
  margin: 0;
  color: #102f4e;
}

.library-ccc__modal-body {
  padding: 16px;
  color: #102f4e;
}

.library-ccc__modal--danger .library-ccc__modal-dialog {
  border-color: rgba(185, 28, 28, 0.38);
  box-shadow: 0 24px 70px rgba(127, 29, 29, 0.28);
}

.library-ccc__modal--danger .library-ccc__modal-head {
  background: rgba(185, 28, 28, 0.08);
}

.library-ccc__modal--danger .library-ccc__modal-head h3 {
  color: #8f1d1d;
}

.library-ccc__limit-alert {
  color: #102f4e;
}

.library-ccc__limit-alert h3 {
  color: #8f1d1d;
  margin: 10px 0 6px;
}

.library-ccc__modal-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(31, 81, 128, 0.1);
  border-bottom: 0;
}

.library-ccc__messages {
  display: grid;
  gap: 12px;
}

.library-ccc__messages-list {
  max-height: 420px;
  overflow: auto;
}

.library-ccc__recipient-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.08);
  cursor: pointer;
}

.library-ccc__recipient-row:last-child {
  border-bottom: 0;
}

.library-ccc__recipient-row small {
  display: block;
  color: #5d7998;
  margin-top: 2px;
}

.library-ccc__inline-error {
  color: #991b1b;
  font-weight: 700;
}

.library-ccc__inline-success {
  color: #0f6f41;
  font-weight: 700;
}

.library-ccc__history-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.1);
}

.library-ccc__history-row:last-child {
  border-bottom: 0;
}

.library-ccc__limit-row {
  grid-template-columns: minmax(130px, .7fr) minmax(160px, 1fr) minmax(180px, 1.2fr) 110px auto;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.1);
}

@media (max-width: 900px) {
  .library-ccc__hero,
  .library-ccc__book-head,
  .library-ccc__reservation,
  .library-ccc__admin-row {
    flex-direction: column;
    align-items: stretch;
  }

  .library-ccc__toolbar-actions {
    justify-content: flex-start;
  }

  .library-ccc__notice,
  .library-ccc__history-row {
    flex-direction: column;
    align-items: stretch;
  }

  .library-ccc__limit-row {
    grid-template-columns: 1fr;
  }

  .library-ccc__copy-row {
    grid-template-columns: 1fr;
  }

  .library-ccc__catalog-grid,
  .library-ccc__book-card {
    grid-template-columns: 1fr;
  }

  .library-ccc__cover {
    width: 100%;
    max-width: 150px;
  }
}

/* =========================
   SURVEYS
   ========================= */
.surveys-app {
  display: grid;
  gap: 12px;
}

.surveys-app__header,
.surveys-app__section-head,
.surveys-app__survey-head,
.surveys-app__savebar,
.surveys-app__question-toolbar,
.surveys-app__list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.surveys-app__flash {
  padding: 12px 14px;
  border: 1px solid rgba(31, 81, 128, 0.16);
  border-radius: 8px;
  background: rgba(31, 81, 128, 0.08);
  color: #173f67;
  font-weight: 700;
}

.surveys-app__flash--error {
  border-color: rgba(185, 28, 28, 0.2);
  background: rgba(185, 28, 28, 0.08);
  color: #8f1d1d;
}

.surveys-app__settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.surveys-app__settings label,
.surveys-app__required,
.surveys-app__target-all {
  display: flex;
  align-items: center;
  gap: 8px;
}

.surveys-app__timer-setting {
  justify-content: space-between;
  flex-wrap: wrap;
}

.surveys-app__timer-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.surveys-app__timer-input .input {
  width: 92px;
}

.surveys-app__public-link {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.surveys-app__copy-row,
.surveys-app__public-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.surveys-app__copy-row .input {
  flex: 1 1 260px;
}

.surveys-app__public-card-link {
  padding: 10px;
  border: 1px dashed rgba(31, 81, 128, 0.24);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.78);
}

.surveys-app__public-card-link span {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #173f67;
  font-weight: 700;
}

.surveys-app__questions,
.surveys-app__list,
.surveys-app__result-summary,
.surveys-app__response-list {
  display: grid;
  gap: 12px;
}

.surveys-app__question {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.surveys-app__add-question {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.surveys-app__choice-limit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid rgba(31, 81, 128, 0.1);
  border-radius: 8px;
  background: #fff;
}

.surveys-app__choice-limit label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.surveys-app__choice-limit .input {
  width: 88px;
}

.surveys-app__question-toolbar .input {
  flex: 1 1 220px;
  max-width: 320px;
}

.surveys-app__drag {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #edf4f9;
  color: #173f67;
  font-weight: 800;
}

.surveys-app__target-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.surveys-app__target-grid > section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
}

.surveys-app__target-grid h4,
.surveys-app__form-section h3 {
  margin: 0;
}

.surveys-app__checklist,
.surveys-app__answer-options {
  display: grid;
  gap: 8px;
}

.surveys-app__checklist--scroll {
  max-height: 260px;
  overflow: auto;
}

.surveys-app__checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px;
  border-bottom: 1px solid rgba(31, 81, 128, 0.08);
}

.surveys-app__checklist small {
  display: block;
  color: #5d7998;
  margin-top: 2px;
}

.surveys-app__survey-card {
  display: grid;
  gap: 12px;
}

.surveys-app__survey-card--clickable {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.surveys-app__survey-card--clickable:hover,
.surveys-app__survey-card--clickable:focus-visible {
  border-color: rgba(31, 81, 128, 0.34);
  box-shadow: 0 8px 24px rgba(23, 63, 103, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.surveys-app__survey-card h3 {
  margin: 8px 0 4px;
}

.surveys-app__badges,
.surveys-app__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.surveys-app__modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  overflow: auto;
  background: rgba(7, 18, 32, 0.52);
}

.surveys-app__modal.hidden {
  display: none;
}

.surveys-app__modal-dialog {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(31, 81, 128, 0.2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 18, 32, 0.28);
}

.surveys-app__modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(31, 81, 128, 0.12);
  background: #fff;
}

.surveys-app__modal-head h2 {
  margin: 0;
}

.surveys-app__modal-body {
  padding: 16px;
}

.surveys-app__notice {
  display: grid;
  gap: 14px;
}

.surveys-app__notice p {
  margin: 0;
  font-size: 16px;
}

.surveys-app__form-question,
.surveys-app__form-section {
  display: grid;
  gap: 9px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.1);
}

.surveys-app__form-section {
  margin-top: 10px;
  border-bottom-width: 2px;
}

.surveys-app__required-mark {
  color: #b91c1c;
}

.surveys-app__scale {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.surveys-app__scale label {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.surveys-app__progress {
  height: 8px;
  overflow: hidden;
  background: #e5edf3;
  border-radius: 4px;
}

.surveys-app__progress span {
  display: block;
  height: 100%;
  background: #2d78b8;
  transition: width .2s ease;
}

.surveys-app__timer {
  position: sticky;
  top: 58px;
  z-index: 1;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.surveys-app__result-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(31, 81, 128, 0.08);
}

.surveys-app__result-texts {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.surveys-app__result-text {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(31, 81, 128, 0.05);
}

.surveys-app__details summary {
  cursor: pointer;
  font-weight: 800;
}

.surveys-app__response-answers {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.surveys-app__response-answers > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr);
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(31, 81, 128, 0.08);
}

.surveys-app__response-answers span {
  color: #5d7998;
}

@media (max-width: 900px) {
  .surveys-app__target-grid {
    grid-template-columns: 1fr;
  }

  .surveys-app__survey-head {
    align-items: stretch;
  }

  .surveys-app__response-answers > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.public-survey-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(91, 163, 217, .55), rgba(11, 42, 74, .96)),
    var(--bg0);
  color: var(--txt);
}

.public-survey {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.public-survey__brand,
.public-survey__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.public-survey__brand {
  margin-bottom: 16px;
  color: var(--txt-inv);
}

.public-survey__brand img {
  width: 78px;
  height: 54px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  padding: 6px;
}

.public-survey__brand strong {
  display: block;
  font-size: 24px;
}

.public-survey__eyebrow {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

.public-survey__card,
.public-survey__notice {
  color: var(--txt);
}

.public-survey__card h1,
.public-survey__notice h1 {
  margin: 0 0 8px;
}

.public-survey__card p,
.public-survey__notice p {
  margin: 0;
}

.public-survey__identity {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.public-survey__notice--success {
  border-color: rgba(22, 163, 74, .28);
}

.public-survey__notice--error {
  border-color: rgba(185, 28, 28, .28);
}

@media (max-width: 680px) {
  .public-survey {
    width: min(100% - 18px, 920px);
    padding-top: 16px;
  }

  .public-survey__brand {
    align-items: flex-start;
  }
}

/* =========================
   DOCUMENT DEPOSITS
   ========================= */
.document-deposits {
  display: grid;
  gap: 12px;
}

.document-deposits__flash {
  padding: 12px 14px;
  border: 1px solid rgba(31, 81, 128, 0.16);
  border-radius: 8px;
  background: rgba(31, 81, 128, 0.08);
  color: #173f67;
  font-weight: 700;
}

.document-deposits__flash--error {
  border-color: rgba(185, 28, 28, 0.2);
  background: rgba(185, 28, 28, 0.08);
  color: #8f1d1d;
}

.document-deposits__subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.document-deposits__subtabs .tab {
  margin: 0;
}

.document-deposits__panel {
  display: grid;
  gap: 12px;
}

.document-deposits__bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.document-deposits__bulk-actions .btn {
  padding: 7px 10px;
  font-size: 13px;
}

.document-deposits__modal {
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 100000 !important;
}

.document-deposits__modal:not(.hidden) {
  display: flex;
}

.document-deposits__modal .modal__card {
  width: min(520px, 96vw);
  z-index: 100001 !important;
}

.document-deposits__modal[data-tone="success"] .modal__card {
  border-top: 5px solid #16855d;
}

.document-deposits__modal[data-tone="warning"] .modal__card {
  border-top: 5px solid #b7791f;
}

.document-deposits__modal[data-tone="error"] .modal__card {
  border-top: 5px solid #b91c1c;
}

.modal__backdrop,
.modal-overlay,
.library-ccc__modal,
.surveys-app__modal,
.public-voting-modal,
#competences-modal,
#notifications-modal,
#part-modal,
#modalParticipation {
  z-index: 100000 !important;
}

.modal__card,
.modal,
.library-ccc__modal-dialog,
.surveys-app__modal-dialog,
.public-voting-modal__dialog,
#competences-modal .modal-dialog,
#part-modal .modal__content {
  z-index: 100001 !important;
}

.document-deposits__spaces,
.document-deposits__submission-list,
.document-deposits__names {
  display: grid;
  gap: 10px;
}

.document-deposits__space {
  display: grid;
  gap: 14px;
}

.document-deposits__space-head,
.document-deposits__submission {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.document-deposits__space-head h3 {
  margin: 8px 0 4px;
}

.document-deposits__badges,
.document-deposits__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.document-deposits__assign-grid,
.document-deposits__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.document-deposits__summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 0;
}

.document-deposits__section-title {
  margin: 18px 0 8px;
  color: #17324d;
}

.document-deposits__assign-grid > section,
.document-deposits__summary-grid > section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.64);
}

.document-deposits__assign-grid h4,
.document-deposits__summary-grid h4 {
  margin: 0 0 8px;
}

.document-deposits__search {
  max-width: 220px;
}

.document-deposits__checklist {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  margin-top: 10px;
  padding-right: 4px;
}

.document-deposits__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(31, 81, 128, 0.1);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.document-deposits__check small {
  display: block;
  margin-top: 3px;
  color: #5d7998;
}

.document-deposits__names span {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(31, 81, 128, 0.08);
}

.document-deposits__names small {
  color: #5d7998;
}

.document-deposits__submission {
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
  background: #fff;
}

.document-deposits__details summary {
  cursor: pointer;
  font-weight: 800;
  color: #173f67;
}

.document-deposits__details[open] summary {
  margin-bottom: 10px;
}

.document-deposits__instructions,
.document-deposits__closed {
  padding: 12px;
  border-left: 4px solid #2d78b8;
  background: rgba(45, 120, 184, 0.07);
  white-space: pre-wrap;
}

.document-deposits__closed {
  border-left-color: #b91c1c;
  background: rgba(185, 28, 28, 0.07);
  color: #8f1d1d;
  font-weight: 700;
}

.document-deposits__upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.document-deposits__upload .input {
  flex: 1 1 320px;
}

.document-deposits__folder-create,
.document-deposits__folder-rename {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.document-deposits__folder-create {
  padding: 10px;
  border: 1px dashed rgba(31, 81, 128, 0.24);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.document-deposits__folder-create .input,
.document-deposits__folder-rename .input {
  min-width: 180px;
}

.document-deposits__folder-groups {
  display: grid;
  gap: 10px;
}

.document-deposits__folder-group {
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.54);
}

.document-deposits__folder-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.document-deposits__folder-head h4 {
  margin: 0 0 3px;
}

.document-library__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.document-library__folder {
  display: grid;
  gap: 12px;
}

.document-library__folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 81, 128, 0.14);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.document-library__folder-row:hover,
.document-library__folder-row:focus {
  border-color: rgba(31, 81, 128, 0.34);
  box-shadow: 0 8px 22px rgba(20, 50, 80, 0.08);
  outline: none;
}

.document-library__folder-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.document-library__folder-main h3 {
  margin: 4px 0 2px;
  overflow-wrap: anywhere;
}

.document-library__modal-card {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(82vh, 860px);
  overflow: auto;
}

.document-library__access {
  padding: 9px 11px;
  border: 1px solid rgba(31, 81, 128, 0.1);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.72);
}

.document-library__files {
  display: grid;
  gap: 10px;
}

.document-library__file-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.document-library__file-group h4 {
  margin: 0;
  color: #17324d;
}

.document-library__file {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(31, 81, 128, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.document-library__file strong {
  overflow-wrap: anywhere;
}

.document-library__rename {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.document-library__rename .input {
  min-width: min(360px, 100%);
}

@media (max-width: 900px) {
  .document-deposits__space-head,
  .document-deposits__submission,
  .document-deposits__folder-head,
  .document-library__folder-main,
  .document-library__file {
    flex-direction: column;
    align-items: stretch;
  }

  .document-deposits__assign-grid,
  .document-deposits__summary-grid {
    grid-template-columns: 1fr;
  }

  .document-deposits__search {
    max-width: none;
  }
}

/* =========================
   VOTING
   ========================= */

.voting-app {
  display: grid;
  gap: 14px;
}

.voting-app__hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.voting-app__hero-badge {
  align-self: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(27, 83, 156, 0.09);
  border: 1px solid rgba(27, 83, 156, 0.18);
  color: #204b78;
  font-weight: 800;
}

.voting-app__subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.voting-app__subtab {
  min-height: 44px;
}

.voting-app__subtab.active {
  background: linear-gradient(135deg, #1c4b83, #2c74ba);
  color: #fff;
  border-color: rgba(28, 75, 131, 0.32);
}

.voting-app__flash {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(27, 83, 156, 0.16);
  background: rgba(27, 83, 156, 0.08);
  color: #204b78;
}

.voting-app__flash--danger {
  background: rgba(201, 51, 72, 0.08);
  border-color: rgba(201, 51, 72, 0.18);
  color: #8a2333;
}

.voting-toolbar {
  align-items: end;
}

.voting-toolbar__actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.voting-stack {
  display: grid;
  gap: 14px;
}

.voting-event {
  display: grid;
  gap: 14px;
}

.voting-event__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.voting-event__meta {
  min-width: 240px;
  display: grid;
  gap: 6px;
  color: #4e6c91;
  font-size: 14px;
}

.voting-event__notice {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(27, 83, 156, 0.07);
  color: #315981;
}

.voting-event__notice--success {
  background: rgba(54, 150, 92, 0.08);
  color: #2e6d48;
}

.voting-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(27, 83, 156, 0.08);
  border: 1px solid rgba(27, 83, 156, 0.14);
  color: #295883;
  font-size: 13px;
  font-weight: 700;
}

.voting-pill--success {
  background: rgba(54, 150, 92, 0.09);
  border-color: rgba(54, 150, 92, 0.18);
  color: #2e6d48;
}

.voting-pill--danger {
  background: rgba(201, 51, 72, 0.09);
  border-color: rgba(201, 51, 72, 0.16);
  color: #8a2333;
}

.voting-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.voting-project {
  display: grid;
  gap: 12px;
}

.voting-project__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.voting-project__head h4 {
  margin: 0 0 4px;
}

.voting-project__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.voting-project__description {
  color: #365a80;
  line-height: 1.5;
}

.voting-project__media {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.05);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voting-project__media img,
.voting-project__media iframe {
  width: 100%;
  display: block;
  border: 0;
}

.voting-project__media iframe {
  min-height: 220px;
}

.voting-project__media audio {
  width: calc(100% - 20px);
}

.voting-project__media--file,
.voting-project__media--empty {
  padding: 16px;
  min-height: 90px;
}

.voting-project__results {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #335a82;
}

.voting-manage__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voting-results-block {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 12px;
}

.voting-results-block summary {
  cursor: pointer;
  font-weight: 800;
  color: #234d7d;
}

.voting-results {
  display: grid;
  gap: 10px;
}

.voting-results__summary {
  color: #335a82;
}

.voting-results__tablewrap {
  overflow-x: auto;
}

.voting-results__table {
  min-width: 680px;
}

/* =========================================================
   ADMIN - Pointage du personnel
   ========================================================= */
.staff-attendance {
  display: grid;
  gap: 14px;
}

.staff-attendance__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(229,238,248,.92));
}

.staff-attendance__hero h2 {
  margin: 0 0 6px;
  color: #143d67;
}

.staff-attendance__print-panel h3 {
  color: #143d67;
}

.staff-attendance__period-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  font-size: 14px;
  line-height: 1.45;
}

.staff-attendance__period-preview strong {
  color: #143d67;
}

.staff-attendance__print-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.staff-schedule-person-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.staff-schedule-person-row__main {
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.staff-schedule-person-row__open {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.staff-schedule-person-row__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 13px;
}

.staff-schedule-person-row__flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.staff-attendance__sync-panel .staff-attendance__sync {
  width: 100%;
  justify-content: space-between;
}

.staff-attendance__sync {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.staff-attendance__pane {
  min-width: 0;
}

.staff-attendance__card-group {
  margin-bottom: 18px;
}

.staff-attendance__card-group-title {
  margin: 0 0 10px;
  font-size: 15px;
  color: #0b3d74;
}

.staff-attendance__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-attendance__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.staff-attendance__card-preview {
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.staff-attendance__card-preview label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #355a7f;
}

.staff-attendance__badge {
  width: 100%;
  aspect-ratio: 86 / 54;
  border: 1px solid rgba(28,73,116,.20);
  border-radius: 10px;
  background: #fff;
  color: #143d67;
  box-shadow: 0 12px 24px rgba(15,31,51,.08);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
}

.staff-attendance__badge > img:first-child {
  max-height: 28px;
  max-width: 92px;
  object-fit: contain;
}

.staff-attendance__badge strong,
.staff-attendance__badge span {
  display: block;
  color: #143d67;
  line-height: 1.15;
}

.staff-attendance__badge span {
  font-size: 13px;
  color: #58738f;
}

.staff-attendance__card-schedule {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-attendance__qr {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}

.staff-attendance__modal .library-ccc__modal-dialog {
  max-width: min(760px, calc(100vw - 32px));
  min-height: 280px;
  display: grid;
  place-items: center;
}

.staff-attendance__stat-card {
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 1px solid #dbe5f1;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.staff-attendance__stat-card:hover,
.staff-attendance__stat-card:focus-visible {
  transform: translateY(-2px);
  border-color: #7db4e6;
  box-shadow: 0 10px 24px rgba(15, 49, 84, .12);
}

/* The dialog itself carries staff-attendance__stat-modal. */
.library-ccc__modal-dialog.staff-attendance__stat-modal {
  width: min(1320px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.staff-attendance__stat-modal > .library-ccc__modal-body {
  min-height: 0;
  overflow: auto;
}
.staff-attendance__stat-modal > .library-ccc__modal-head,
.staff-attendance__stat-modal > .library-ccc__modal-actions { flex-shrink: 0; }
.staff-attendance__stat-table { min-width: 1080px; width: 100%; table-layout: auto; }
.staff-attendance__stat-table th { white-space: nowrap; }
.staff-attendance__stat-table .staff-attendance__stat-name { min-width: 210px; }
.staff-attendance__stat-table .staff-attendance__stat-firstname { min-width: 160px; }
.staff-attendance__stat-table td { white-space: normal; word-break: normal; overflow-wrap: normal; }
.staff-attendance__stat-table td:nth-child(4),
.staff-attendance__stat-table td:nth-child(5),
.staff-attendance__stat-table td:nth-child(6) { white-space: nowrap; }
#assistanteAttendanceEditModal > .library-ccc__modal-dialog,
#staffCardFunctionModal > .library-ccc__modal-dialog,
#staffCardEditModal > .library-ccc__modal-dialog,
#staffResetDayModal > .library-ccc__modal-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.staff-attendance__stat-list {
  display: grid;
  gap: 10px;
}

.staff-attendance__stat-item {
  padding: 12px 14px;
}

.staff-attendance__stat-item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.staff-attendance__modal .library-ccc__modal-body {
  width: 100%;
}

.staff-attendance__modal--scan-fullscreen {
  padding: 0;
  background: rgba(7, 18, 32, 0.94);
}

.staff-attendance__modal--scan-fullscreen .library-ccc__modal-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}

.staff-attendance__modal--scan-fullscreen .library-ccc__modal-body {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
}

.staff-attendance__modal--scan-fullscreen .staff-attendance__scan-modal {
  width: min(100%, 1100px);
  font-size: clamp(34px, 7vw, 84px);
  line-height: 1.2;
  padding: clamp(16px, 4vw, 36px);
}

.staff-attendance__modal--scan-fullscreen .staff-attendance__scan-smiley {
  font-size: clamp(88px, 20vw, 220px);
  margin-bottom: clamp(12px, 3vw, 28px);
}

.staff-attendance__modal--scan-fullscreen.library-ccc__modal--danger {
  background: rgba(74, 8, 8, 0.95);
}

.staff-attendance__modal--scan-fullscreen.library-ccc__modal--danger .staff-attendance__scan-modal,
.staff-attendance__modal--scan-fullscreen.library-ccc__modal--danger .staff-attendance__scan-modal--danger {
  color: #fff;
}

.staff-attendance__modal--scan-fullscreen.staff-attendance__modal--scan-success .staff-attendance__scan-modal,
.staff-attendance__modal--scan-fullscreen.staff-attendance__modal--scan-success .staff-attendance__scan-modal--success {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.staff-attendance__scan-message {
  color: inherit;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.staff-attendance__stat-table td,
.staff-attendance__stat-table th {
  vertical-align: top;
}

.staff-attendance__custom-recap {
  border-top: 2px solid #dbeafe;
  padding-top: 16px;
}

.staff-attendance__custom-person {
  margin-bottom: 18px;
}

.staff-attendance__custom-person:last-child {
  margin-bottom: 0;
}

.staff-attendance__custom-person-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #0b3d74;
}

.staff-public-scan-page--fullscreen .staff-public-scan {
  max-width: none;
  min-height: 100vh;
  padding: clamp(12px, 2vw, 24px);
}

.staff-public-scan-page--fullscreen .staff-public-scan__video-wrap {
  min-height: min(62vh, 720px);
}

.staff-public-scan__status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.staff-attendance__scan-modal {
  color: #0f3154;
  font-size: 34px;
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
  padding: 34px 18px;
}

.staff-attendance__scan-smiley {
  font-size: 76px;
  line-height: 1;
  margin-bottom: 16px;
}

.staff-attendance__scan-modal--danger {
  color: #9f1d1d;
}

#staffScannerVideo {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  object-fit: cover;
  background: #071524;
}

.staff-live-watch {
  position: relative;
  margin-top: 14px;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #071524;
}

.staff-live-watch img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: #071524;
}

.staff-live-watch img.is-stale {
  opacity: .55;
}

.staff-live-watch .muted {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(7, 21, 36, .8);
}

.staff-attendance__camera-tools {
  margin: 10px 0 12px;
}

.staff-attendance__camera-tools label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

#staffRecordsTable {
  min-width: 1220px;
}

#staffRecordsTable tr.staff-attendance__row--danger td {
  background: #fff1f2;
  color: #8a1010;
  border-color: rgba(190, 18, 60, .28);
}

#staffRecordsTable tr.staff-attendance__row--warn td {
  background: #fff7ed;
  color: #9a3412;
  border-color: rgba(234, 88, 12, .24);
}

#staffRecordsTable tr.staff-attendance__row--success td {
  background: #ecfdf5;
  color: #166534;
  border-color: rgba(22, 101, 52, .24);
}

#assistanteAttendanceBody tr.success td {
  background: #ecfdf5;
  color: #166534;
}

#assistanteAttendanceBody tr.danger td {
  background: #fff1f2;
  color: #8a1010;
}

#assistanteAttendanceBody tr.warn td {
  background: #fff7ed;
  color: #9a3412;
}

.staff-attendance__badge-danger {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-weight: 900;
}

.staff-attendance__badge-success {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-weight: 900;
}

.staff-attendance__photo-thumb {
  width: 54px;
  height: 42px;
  border: 1px solid rgba(20,61,103,.22);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.staff-attendance__photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.staff-attendance__photo-modal {
  max-width: min(760px, calc(100vw - 32px));
}

.staff-attendance__photo-modal img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  background: #071524;
}

.staff-attendance__timecell {
  display: grid;
  gap: 2px;
  min-width: 92px;
}

.staff-attendance__timecell span {
  color: #64748b;
  font-size: .84rem;
}

.staff-attendance__timecell strong {
  color: #143d67;
  font-size: .9rem;
}

.staff-settings-subtabs {
  margin-top: 12px;
}

.staff-settings-pane.hidden {
  display: none !important;
}

.staff-schedule-page-title {
  color: #143d67;
  font-weight: 900;
  margin-bottom: 10px;
}

.staff-schedule-grid {
  display: grid;
  gap: 10px;
}

.staff-schedule-day {
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  padding: 12px;
}

.staff-schedule-day.is-disabled {
  opacity: .62;
}

.staff-schedule-day.is-editing {
  outline: 3px solid rgba(59, 130, 246, .38);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, .12);
}

.staff-schedule-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #143d67;
  font-weight: 900;
}

.staff-schedule-day__head label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.staff-schedule-day__fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.staff-schedule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staff-schedule-summary__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-schedule-copy-box{
  margin:12px 0;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
}

.staff-schedule-copy-targets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  max-height:180px;
  overflow:auto;
}

@media (max-width: 980px) {
  .staff-schedule-day__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .staff-schedule-day__fields {
    grid-template-columns: 1fr;
  }

  .staff-schedule-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.staff-public-scan-page {
  min-height: 100vh;
  background: #071524 !important;
  color: #f5f8fc !important;
}

.staff-public-scan {
  width: min(980px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 28px 0;
  display: grid;
  gap: 14px;
}

.staff-public-scan__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.staff-public-scan__brand img {
  width: 74px;
  height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
}

.staff-public-scan__title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0;
}

.staff-public-scan__subtitle {
  color: rgba(245,248,252,.78);
  font-weight: 700;
}

.staff-public-scan__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.staff-public-scan__camera {
  padding: 16px;
  background: #0b2035;
}

.staff-public-scan__camera-tools {
  margin-bottom: 12px;
}

.staff-public-scan__camera-tools.hidden {
  display: none;
}

.staff-public-scan__camera-label {
  display: block;
  margin-bottom: 6px;
  color: #dbeafe;
  font-weight: 800;
}

.staff-public-scan__camera-select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: #0f2942;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
}

.staff-public-scan__camera-hint {
  margin-top: 8px;
  color: rgba(219, 234, 254, 0.82);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.staff-public-scan__zoom-tools {
  margin: 0 0 12px;
}

.staff-public-scan__zoom-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-public-scan__zoom-slider {
  flex: 1;
  accent-color: #2563eb;
}

.staff-public-scan__zoom-value {
  min-width: 52px;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.staff-public-scan__video-wrap {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 72vh;
  border-radius: 14px;
  background: #020911;
}

.staff-public-scan__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.staff-public-scan__camera video {
  display: none;
}

.staff-public-scan__camera video.is-live {
  display: block;
}

.staff-public-scan__camera-btn {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 12px;
  padding: 16px 24px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.staff-public-scan__camera-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.staff-public-scan__camera-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.staff-public-scan__camera-btn.hidden,
.staff-public-scan__camera video.hidden {
  display: none !important;
}

.staff-public-scan__camera video.is-preparing {
  display: block;
  opacity: 0.45;
}

.staff-public-scan__camera video.is-live {
  display: block;
  opacity: 1;
}

.staff-public-scan__video-wrap .staff-public-scan__camera video.is-live,
.staff-public-scan__video-wrap video.is-live {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}

.staff-public-scan__video-wrap video.is-preparing {
  display: block;
  opacity: 0.45;
}

.staff-public-scan__message {
  margin-top: 12px;
  text-align: center;
  color: #dbeafe;
  font-weight: 800;
}

.staff-public-scan__build {
  margin-top: 8px;
  text-align: center;
  color: rgba(219, 234, 254, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.staff-public-scan__blocked {
  color: #143d67;
  padding: 28px;
}

.staff-public-scan__blocked h1 {
  margin-top: 0;
}

@media (max-width: 960px) {
  .staff-attendance__hero {
    flex-direction: column;
    align-items: stretch;
  }

  .staff-attendance__sync {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) {
  .voting-app__hero,
  .voting-event__head,
  .voting-project__head {
    flex-direction: column;
    align-items: stretch;
  }

  .voting-event__meta,
  .voting-toolbar__actions {
    min-width: 0;
    justify-content: flex-start;
  }

  .voting-projects-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   THEME OVERRIDES (global, safe)
   - Applique la palette/typo choisie via variables CSS (injectées par header.php)
   - Ne touche pas à la logique / JS
   ========================================================= */

:root{
  --cf-font-head: "system-ui";
  --cf-font-body: "system-ui";
  --cf-base-p: 15px;
  --cf-head-weight: 900;
  --cf-letter-spacing: 0px;
}

body{
  font-family: var(--cf-font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial) !important;
  font-size: var(--cf-base-p, 15px) !important;
  letter-spacing: var(--cf-letter-spacing, 0px) !important;
}

h1,h2,h3,h4,h5,h6,
.brand__name,
.side__title,
.tab,
.btn{
  font-family: var(--cf-font-head, var(--cf-font-body, system-ui)) !important;
  font-weight: var(--cf-head-weight, 900) !important;
}

/* Background global dépendant de la palette.
   Les pages connectées (body[data-cf-role]) gardent le dégradé ciel/marine
   défini dans cf-pronote-layout.css. */
body:not([data-cf-role]){
  background: var(--bg0, #0d2238) !important;
  color: var(--txt-inv, #f4f8ff) !important;
}

/* Ajustements lisibilité quand bg clair (ex: Minimal blanc) */
body[data-cf-bg="light"],
:root[data-cf-bg="light"] body{
  color: var(--txt, #0f1f33) !important;
}

/* =========================================================
   ADMIN - Apparence (UI)
   ========================================================= */
.cf-appearance{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:12px;
}
@media (max-width: 980px){
  .cf-appearance{ grid-template-columns: 1fr; }
}
.cf-appearance__title{
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(73,98,126,.95);
  margin: 2px 0 10px;
  text-transform: uppercase;
  font-size: 12px;
}
.cf-palette-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.cf-palette{
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background: rgba(255,255,255,.72);
  padding:12px;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cf-palette:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,31,51,.10);
}
.cf-palette.is-selected{
  border-color: rgba(11,109,222,.55);
  box-shadow: 0 0 0 3px rgba(11,109,222,.14), 0 12px 24px rgba(15,31,51,.10);
}
.cf-palette__name{
  font-weight:900;
  color:#143d67;
  margin-bottom:8px;
}
.cf-palette__swatches{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:6px;
}
.cf-palette__swatch{
  height:18px;
  border-radius:999px;
  border:1px solid rgba(15,31,51,.14);
}
.cf-typo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}
.cf-typo{
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background: rgba(255,255,255,.72);
  padding:12px;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cf-typo:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,31,51,.10);
}
.cf-typo.is-selected{
  border-color: rgba(11,109,222,.55);
  box-shadow: 0 0 0 3px rgba(11,109,222,.14), 0 12px 24px rgba(15,31,51,.10);
}
.cf-typo__name{
  font-weight:900;
  color:#143d67;
  margin-bottom:6px;
}
.cf-typo__sample{
  color:#355a7f;
  line-height:1.35;
}
.cf-preview{
  border:1px dashed rgba(148,163,184,.40);
  border-radius:18px;
  padding:14px;
  background: rgba(255,255,255,.55);
}
.cf-preview__title{
  font-weight:900;
  color:#143d67;
  margin-bottom:8px;
}
.cf-preview__row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/* Global sub-tabs color override */
.library-ccc__subtab,
.voting-app__subtab,
.events-subtab,
.pitch-subtab,
.tools-subtab {
  background: #eef6fd !important;
  border-color: rgba(26, 95, 158, .30) !important;
  color: #1a5f9e !important;
}

.library-ccc__subtab:hover,
.voting-app__subtab:hover,
.events-subtab:hover,
.pitch-subtab:hover,
.tools-subtab:hover {
  background: #dceffb !important;
  border-color: rgba(26, 95, 158, .46) !important;
}

.library-ccc__subtab.active,
.voting-app__subtab.active,
.events-subtab.active,
.pitch-subtab.active,
.tools-subtab.active {
  background: linear-gradient(135deg, #1a5f9e, #0b2a4a) !important;
  border-color: rgba(11, 42, 74, .72) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(11, 42, 74, .22) !important;
}
/* =========================================================
   Cours en ligne - LMS Clairefolios
   ========================================================= */
.online-courses {
  --oc-green: #167c67;
  --oc-green-dark: #0f5f50;
  --oc-navy: #153653;
  --oc-blue: #246aa5;
  --oc-amber: #a96308;
  --oc-red: #b33a3a;
  --oc-line: #cbd8e4;
  --oc-soft: #f4f7fa;
  --oc-text: #17324a;
  color: var(--oc-text);
}

.online-courses__header,
.online-courses__section-head,
.online-courses__wizard-head,
.online-courses__editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.online-courses__header {
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__header h2,
.online-courses__section-head h3,
.online-courses__wizard-head h3 {
  margin: 0;
}

.online-courses__header p,
.online-courses__section-head p,
.online-courses__wizard-head p {
  margin: 4px 0 0;
}

.online-courses__eyebrow {
  color: var(--oc-green-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-courses__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__metrics > div {
  min-width: 0;
  padding: 16px 12px;
  border-right: 1px solid var(--oc-line);
}

.online-courses__metrics > div:last-child {
  border-right: 0;
}

.online-courses__metrics strong,
.online-courses__metrics span {
  display: block;
}

.online-courses__metrics strong {
  color: var(--oc-navy);
  font-size: 24px;
  line-height: 1;
}

.online-courses__metrics span {
  margin-top: 6px;
  color: #5f7285;
  font-size: 12px;
  font-weight: 700;
}

.online-courses__tabs,
.online-courses__detail-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__tab,
.online-courses__detail-tabs button {
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #4f667b;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.online-courses__tab:hover,
.online-courses__detail-tabs button:hover {
  background: #eef4f6;
  color: var(--oc-green-dark);
}

.online-courses__tab.active,
.online-courses__detail-tabs button.active {
  border-bottom-color: var(--oc-green);
  color: var(--oc-green-dark);
}

.online-courses__pane {
  padding-top: 16px;
}

.online-courses__toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(135px, 190px)) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.online-courses__search {
  min-width: 0;
}

.online-courses__advanced-filters {
  grid-column: 1 / -1;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #f7faf9;
}

.online-courses__advanced-filters summary {
  padding: 10px 12px;
  color: var(--oc-navy);
  font-weight: 800;
  cursor: pointer;
}

.online-courses__advanced-filters > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.online-courses__advanced-filters label {
  margin: 0;
  color: #4f6676;
  font-size: 11px;
  font-weight: 800;
}

.online-courses__next-due {
  margin-top: 8px;
  color: #855317;
  font-size: 12px;
  font-weight: 800;
}

.online-courses__invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}

.online-courses__invite a {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.online-courses__invite img {
  border: 1px solid var(--oc-line);
  border-radius: 4px;
  background: #fff;
  padding: 5px;
}

.online-courses__grading-head,
.online-courses__grading-answer > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.online-courses__grading-head {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--oc-line);
  background: #f4f8f7;
}

.online-courses__grading-head span,
.online-courses__grading-answer > header span {
  color: #597082;
  font-size: 12px;
  font-weight: 800;
}

.online-courses__grading-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.online-courses__grading-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .7fr);
  gap: 16px;
  align-items: start;
}

.online-courses__grading-decision {
  position: sticky;
  top: 0;
  padding: 14px;
  border: 1px solid var(--oc-line);
  background: #f7faf9;
}

.online-courses__grading-decision > h3 {
  margin: 0 0 12px;
  color: var(--oc-navy);
  font-size: 16px;
}

.online-courses__grading-answer--essay {
  border-left: 4px solid #315d84;
  background: #fff;
}

.online-courses__grading-answer--essay .online-courses__submitted-answer {
  min-height: 140px;
  padding: 16px;
  border: 1px solid #dce3e8;
  background: #fff;
}

.online-courses__grading-answer--essay .online-courses__submitted-answer pre {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .online-courses__grading-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .online-courses__grading-decision {
    position: static;
  }
}

.online-courses__grading-answer {
  padding: 12px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
}

.online-courses__submitted-answer {
  margin: 10px 0;
  padding: 10px;
  background: #f7f9fb;
}

.online-courses__submitted-answer pre {
  margin: 5px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
}

.online-courses__grading-rubric {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #f7faf9;
}

.online-courses__grading-rubric h3 {
  margin-top: 0;
}

.online-courses__grading-rubric > div,
.online-courses__accommodation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--oc-line);
}

.online-courses__grading-rubric small,
.online-courses__accommodation span {
  display: block;
}

.online-courses__grading-rubric em {
  color: #5a7081;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.online-courses__accommodation label {
  margin: 0;
  color: #516879;
  font-size: 11px;
  font-weight: 800;
}

.oc-public-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #eaf0f4;
}

.oc-public-message {
  width: min(560px, calc(100% - 28px));
  padding: 28px;
  border: 1px solid #c5d3dd;
  border-radius: 8px;
  background: #fff;
  color: #17324a;
  text-align: center;
  box-shadow: 0 18px 55px rgba(20, 55, 79, .12);
}

.online-courses__view-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  overflow: hidden;
}

.online-courses__view-btn {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--oc-line);
  background: #fff;
  color: #516a7f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.online-courses__view-btn:last-child {
  border-right: 0;
}

.online-courses__view-btn.active {
  background: var(--oc-navy);
  color: #fff;
}

.online-courses__join {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #a8c7d6;
  border-left: 4px solid var(--oc-blue);
  background: #f2f8fc;
}

.online-courses__join strong,
.online-courses__join span {
  display: block;
}

.online-courses__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
}

.online-courses__list--table {
  display: block;
}

.online-courses__course-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--oc-line);
  border-top: 4px solid var(--course-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(21, 54, 83, 0.07);
}

.online-courses__course-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #dce6ed;
  cursor: pointer;
}

.online-courses__course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-courses__cover-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--course-color) 90%, #102f4e), var(--course-color));
}

.online-courses__cover-fallback span {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.online-courses__course-body {
  display: flex;
  min-height: 260px;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}

.online-courses__course-body h3 {
  margin: 9px 0 3px;
  color: var(--oc-navy);
  font-size: 18px;
  line-height: 1.25;
}

.online-courses__course-body > p {
  margin: 0 0 10px;
  color: #617487;
  font-size: 13px;
  line-height: 1.45;
}

.online-courses__course-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.online-courses__badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid #bdcad5;
  border-radius: 4px;
  background: #eef2f5;
  color: #415a70;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.online-courses__badge--published,
.online-courses__badge--enrolled,
.online-courses__badge--completed,
.online-courses__badge--graded {
  border-color: #9dc9b8;
  background: #e4f5ed;
  color: #0b624c;
}

.online-courses__badge--draft,
.online-courses__badge--archived,
.online-courses__badge--expired {
  border-color: #c3ccd4;
  background: #f0f2f4;
  color: #566675;
}

.online-courses__badge--pending,
.online-courses__badge--requested,
.online-courses__badge--submitted,
.online-courses__badge--revision_requested,
.online-courses__badge--request {
  border-color: #e8c078;
  background: #fff5dc;
  color: #8a5107;
}

.online-courses__badge--disabled,
.online-courses__badge--refused {
  border-color: #e4aaaa;
  background: #fceaea;
  color: #922f2f;
}

.online-courses__badge--private,
.online-courses__badge--invitation {
  border-color: #a9c7e2;
  background: #eaf3fb;
  color: #245f91;
}

.online-courses__course-meta {
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  color: #4e667a;
  font-size: 11px;
  font-weight: 700;
}

.online-courses__course-author {
  margin: 9px 0;
  color: #637789;
  font-size: 12px;
}

.online-courses__progress {
  margin-top: auto;
  padding-top: 10px;
}

.online-courses__progress > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #4e6577;
  font-size: 12px;
}

.online-courses__progress-track,
.online-courses__learner-progress > i,
.online-courses__student-progress > .online-courses__progress-track {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe7ed;
}

.online-courses__progress-track i,
.online-courses__learner-progress > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--oc-green);
}

.online-courses__card-stats {
  display: flex;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e1e8ee;
  color: #5b7184;
  font-size: 11px;
  font-weight: 700;
  flex-wrap: wrap;
}

.online-courses__course-actions,
.online-courses__modal-actions,
.online-courses__row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.online-courses__course-actions {
  margin-top: 12px;
}

.online-courses__course-actions .btn {
  min-height: 36px;
  flex: 1 1 auto;
}

.online-courses__empty,
.online-courses__loading {
  display: grid;
  min-height: 180px;
  place-content: center;
  gap: 6px;
  padding: 24px;
  border: 1px dashed #b8c8d6;
  border-radius: 8px;
  background: var(--oc-soft);
  color: #607487;
  text-align: center;
}

.online-courses__empty strong {
  color: var(--oc-navy);
  font-size: 17px;
}

.online-courses__table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
}

.online-courses__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.online-courses__table th,
.online-courses__table td {
  padding: 10px 12px;
  border-bottom: 1px solid #dde6ed;
  color: var(--oc-text);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.online-courses__table th {
  background: #edf3f6;
  color: #4c6579;
  font-size: 10px;
  text-transform: uppercase;
}

.online-courses__table tr:last-child td {
  border-bottom: 0;
}

.online-courses__table tr.is-pending td {
  background: #fff9e9;
}

.online-courses__title-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oc-navy);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.online-courses__steps {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  margin: 16px 0 20px;
  padding: 0;
  counter-reset: oc-step;
  list-style: none;
}

.online-courses__steps li {
  position: relative;
  padding: 28px 4px 0;
  color: #748797;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.online-courses__steps li::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #bdcad4;
  border-radius: 50%;
  background: #fff;
  content: attr(data-oc-step-label);
  transform: translateX(-50%);
}

.online-courses__steps li::after {
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #cbd6df;
  content: "";
}

.online-courses__steps li:first-child::after {
  display: none;
}

.online-courses__steps li.active,
.online-courses__steps li.done {
  color: var(--oc-green-dark);
}

.online-courses__steps li.active::before,
.online-courses__steps li.done::before {
  border-color: var(--oc-green);
  background: var(--oc-green);
  color: #fff;
}

.online-courses__steps li.done::after {
  background: var(--oc-green);
}

.online-courses__wizard-step {
  min-height: 330px;
  padding: 16px 0;
}

.online-courses__wizard-actions,
.online-courses__form-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.online-courses__wizard-actions .muted {
  margin-right: auto;
}

.online-courses__stage-message,
.online-courses__publication-check {
  padding: 20px;
  border: 1px solid #a9c6d6;
  border-left: 4px solid var(--oc-blue);
  background: #f2f8fb;
}

.online-courses__stage-message strong,
.online-courses__publication-check strong,
.online-courses__publication-check span {
  display: block;
}

.online-courses__stage-message p {
  max-width: 820px;
  margin-bottom: 0;
}

.online-courses__builder-entry {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid #afc8d8;
  border-left: 4px solid var(--oc-blue);
  background: #f6fafc;
}

.online-courses__builder-entry > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.online-courses__builder-entry-number {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--oc-navy);
  color: #fff;
  font-weight: 900;
}

.online-courses__builder-entry strong,
.online-courses__builder-entry p {
  display: block;
}

.online-courses__builder-entry p {
  max-width: 850px;
  margin: 5px 0 0;
  color: #5d7184;
}

.online-courses__builder-entry ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
  color: #334e66;
}

.online-courses__builder-entry > .btn {
  justify-self: start;
}

.online-courses__preview {
  border: 1px solid var(--oc-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.online-courses__preview-cover {
  min-height: 210px;
  padding: 28px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--course-color) 85%, #153653), var(--course-color));
  color: #fff;
}

.online-courses__preview-cover span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-courses__preview-cover h3 {
  max-width: 720px;
  margin: 20px 0 8px;
  font-size: 30px;
}

.online-courses__preview-details,
.online-courses__preview > p {
  display: flex;
  gap: 12px 22px;
  padding: 14px 18px;
  flex-wrap: wrap;
}

.online-courses__preview > p {
  display: block;
  margin: 0;
  border-top: 1px solid var(--oc-line);
}

.online-courses__color {
  width: 100%;
  min-height: 44px;
  padding: 4px;
}

.online-courses__bank-form,
.online-courses__admin-grid > section {
  margin-top: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--oc-line);
}

.online-courses__bank-list,
.online-courses__certificate-list,
.online-courses__progress-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.online-courses__bank-row,
.online-courses__certificate,
.online-courses__permission-row,
.online-courses__template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #fff;
}

.online-courses__bank-row > div:first-child,
.online-courses__certificate > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.online-courses__admin-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
  gap: 28px;
}

.online-courses__admin-log {
  grid-column: 1 / -1;
}

.online-courses__permission-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 1fr 1fr;
  margin-bottom: 8px;
}

.online-courses__permission-role {
  margin-bottom: 8px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #fff;
}

.online-courses__permission-role > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--oc-text);
  cursor: pointer;
}

.online-courses__permission-role > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.online-courses__permission-role > summary small {
  color: #667b8d;
  font-size: 11px;
  font-weight: 600;
}

.online-courses__permission-role > summary > span:last-child {
  color: var(--oc-green-dark);
  font-size: 12px;
  font-weight: 800;
}

.online-courses__permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px 16px;
  padding: 14px 12px 16px;
  border-top: 1px solid var(--oc-line);
  background: #f8fafb;
}

.online-courses__permission-grid h5 {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  color: var(--oc-navy);
  font-size: 12px;
}

.online-courses__permission-grid h5:first-child {
  margin-top: 0;
}

.online-courses__permission-grid .check {
  min-width: 0;
  margin: 0;
}

.online-courses__template-row {
  width: 100%;
  margin-top: 8px;
  color: var(--oc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.online-courses__template-row i {
  width: 7px;
  height: 42px;
  border-radius: 3px;
}

.online-courses__template-row > span {
  display: grid;
  flex: 1;
}

.online-courses__template-row small {
  margin-top: 3px;
  color: #6d7f8f;
}

.online-courses__overlay {
  z-index: 12000;
  padding: 18px;
  background: rgba(8, 31, 47, 0.66);
}

.online-courses__overlay--form {
  z-index: 12040;
}

#ocNoticeModal {
  z-index: 12120;
}

#ocConfirmModal {
  z-index: 12130;
}

.online-courses__notice {
  max-width: 520px;
  border-radius: 8px;
}

.online-courses__notice .modal__body {
  text-align: center;
}

.online-courses__notice-mark {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: #e1f3eb;
  color: var(--oc-green-dark);
  font-size: 14px;
  font-weight: 900;
}

#ocNoticeModal[data-kind="error"] .online-courses__notice-mark {
  background: #fbe6e6;
  color: var(--oc-red);
}

.online-courses__course-modal {
  width: min(1180px, 96vw);
  max-width: 1180px;
  height: min(900px, 94vh);
  max-height: 94vh;
  overflow: hidden;
  border-radius: 18px;
}

.online-courses__modal-head {
  min-height: 64px;
}

.online-courses__course-modal-body {
  height: calc(94vh - 70px);
  max-height: 830px;
  padding: 0 20px 24px;
  overflow-y: auto;
}

.online-courses__course-hero {
  display: flex;
  min-height: 190px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 -20px;
  padding: 28px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--course-color) 88%, #102d47), var(--course-color));
  color: #fff;
}

.online-courses__course-hero h2 {
  max-width: 760px;
  margin: 14px 0 5px;
  color: #fff;
  font-size: 28px;
}

.online-courses__course-hero p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.85);
}

.online-courses__course-hero .online-courses__course-meta {
  color: rgba(255, 255, 255, 0.88);
}

.online-courses__course-hero .online-courses__modal-actions {
  justify-content: flex-end;
}

.online-courses__course-hero .btn {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.online-courses__course-hero .btn--danger {
  border-color: #ffd0d0;
  background: rgba(133, 23, 23, 0.65);
}

.online-courses__learner-progress {
  padding: 14px 0;
}

.online-courses__learner-progress > div {
  display: flex;
  justify-content: space-between;
}

.online-courses__detail-tabs {
  position: sticky;
  z-index: 4;
  top: 0;
  margin: 0 -20px 16px;
  padding: 0 20px;
  background: #fff;
}

.online-courses__builder-guide {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  margin: 0 -20px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #b9ccd9;
  background: #f4f8fa;
}

.online-courses__builder-guide.is-assessment-focus {
  border-bottom-color: #cc9a3e;
  background: #fff9ec;
}

.online-courses__builder-intro {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.online-courses__builder-intro span {
  color: #5d7184;
  font-size: 12px;
}

.online-courses__builder-counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #556b7e;
  font-size: 11px;
}

.online-courses__builder-counts span {
  white-space: nowrap;
}

.online-courses__builder-counts strong {
  color: var(--oc-navy);
}

.online-courses__add-menu > summary {
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
}

.online-courses__add-menu > summary::-webkit-details-marker {
  display: none;
}

.online-courses__add-menu-list {
  display: none;
  min-width: 310px;
  margin-top: 6px;
  border: 1px solid #aebfcb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 50, 73, 0.16);
}

.online-courses__add-menu[open] .online-courses__add-menu-list {
  display: grid;
}

.online-courses__add-menu-list button,
.online-courses__content-picker button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid #d7e1e8;
  background: #fff;
  color: var(--oc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.online-courses__add-menu-list button:last-child,
.online-courses__content-picker button:last-child {
  border-bottom: 0;
}

.online-courses__add-menu-list button:hover,
.online-courses__add-menu-list button:focus,
.online-courses__content-picker button:hover,
.online-courses__content-picker button:focus {
  background: #eaf4f1;
  outline: 2px solid transparent;
}

.online-courses__add-menu-list button.is-highlighted {
  border-left: 4px solid var(--oc-amber);
  background: #fff8e8;
}

.online-courses__add-menu-list button strong,
.online-courses__add-menu-list button span {
  display: block;
}

.online-courses__add-menu-list button span {
  margin-top: 2px;
  color: #677b8d;
  font-size: 11px;
}

.online-courses__editor-toolbar {
  margin-bottom: 10px;
  padding: 10px 0;
}

.online-courses__editor-toolbar > div {
  display: grid;
}

.online-courses__modules {
  display: grid;
  gap: 10px;
}

.online-courses__module {
  overflow: hidden;
  border: 1px solid var(--oc-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 50, 73, 0.07);
}

.online-courses__module.is-dragging,
.online-courses__lesson-row.is-dragging,
.online-courses__question-builder.is-dragging {
  opacity: 0.45;
}

.online-courses__module-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 8px 10px;
  background: #edf3f6;
}

.online-courses__module-toggle {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.online-courses__module-toggle > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 4px;
  background: var(--oc-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.online-courses__module-toggle > div {
  display: grid;
  min-width: 0;
}

.online-courses__module-toggle small {
  color: #65798a;
  font-size: 9px;
  text-transform: uppercase;
}

.online-courses__module-toggle strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-courses__module-progress {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 5px;
  color: #5b6f81;
  font-size: 11px;
  font-weight: 800;
}

.online-courses__module-progress i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #ced9e1;
}

.online-courses__module-progress b {
  display: block;
  height: 100%;
  background: var(--oc-green);
}

.online-courses__module-body {
  padding: 10px;
}

.online-courses__deadline {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #f2cf83;
  border-radius: 10px;
  background: #fff8e8;
  color: #7b520b;
  font-size: 12px;
  font-weight: 800;
}

.online-courses__module-empty {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px dashed #aebfcb;
  background: #f8fafb;
  color: #617689;
}

.online-courses__module.is-collapsed .online-courses__module-body {
  display: none;
}

.online-courses__lesson-list {
  display: grid;
  gap: 5px;
}

.online-courses__lesson-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 5px 8px;
  border: 1px solid #d8e2e9;
  border-left: 3px solid #7c96ac;
  border-radius: 5px;
  background: #fff;
}

.online-courses__lesson-assessments {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 6px 0 2px 44px;
  padding: 8px;
  border-left: 3px solid var(--oc-blue);
  border-radius: 0 10px 10px 0;
  background: #f6fafc;
}

.online-courses__lesson-assessments-label {
  color: #527087;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.online-courses__integrated-assessment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #d7e5ed;
  border-radius: 10px;
  background: #fff;
}

.online-courses__integrated-assessment > div:first-child {
  display: grid;
  gap: 2px;
}

.online-courses__integrated-assessment small {
  color: #60798c;
}

.online-courses__integrated-type {
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eaf4f1;
  color: var(--oc-green);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-courses__lesson-row.is-complete {
  border-left-color: var(--oc-green);
  background: #f5fbf8;
}

.online-courses__lesson-row.is-locked {
  border-left-color: #a4afb8;
  background: #f2f4f6;
}

.online-courses__lesson-main {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.online-courses__lesson-state {
  color: #688096;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-courses__lesson-main > span:last-child {
  display: grid;
  min-width: 0;
}

.online-courses__lesson-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-courses__lesson-main small {
  margin-top: 2px;
  overflow: hidden;
  color: #718394;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-courses__empty--builder {
  gap: 10px;
  min-height: 190px;
  border: 1px dashed #9eb6c6;
  background: #f7fafb;
}

.online-courses__form-context {
  margin-bottom: 14px;
  padding: 11px 12px;
  border-left: 4px solid var(--oc-blue);
  background: #eef6fa;
  color: #38556c;
}

.online-courses__content-picker {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
}

.online-courses__content-picker button span {
  display: grid;
  gap: 2px;
}

.online-courses__content-picker button small {
  color: #687d8f;
}

.online-courses__content-picker button b {
  color: var(--oc-green-dark);
  font-size: 12px;
}

.online-courses__locked {
  margin-bottom: 8px;
  padding: 8px;
  border-left: 3px solid #8495a3;
  background: #f0f3f5;
  color: #546a7b;
  font-size: 12px;
}

.online-courses__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 22px;
}

.online-courses__overview section {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__overview h3 {
  margin-top: 0;
  font-size: 16px;
}

.online-courses__form-modal {
  width: min(1280px, 96vw);
  max-width: 1280px;
  max-height: 94vh;
  overflow: hidden;
  border-radius: 8px;
}

.online-courses__form-modal > .modal__body {
  max-height: calc(94vh - 70px);
  overflow-y: auto;
}

.online-courses__editor-tabs {
  display: flex;
  gap: 2px;
  margin: -4px 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__editor-tabs button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #536b7e;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.online-courses__editor-tabs button:hover {
  background: #eef4f6;
  color: var(--oc-green-dark);
}

.online-courses__editor-tabs button.active {
  border-bottom-color: var(--oc-green);
  color: var(--oc-green-dark);
}

.online-courses__editor-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__editor-section-head > div {
  display: grid;
  gap: 4px;
}

.online-courses__editor-section-head span {
  color: #607589;
  font-size: 12px;
}

.online-courses__editor-section-head .online-courses__count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #aac4d2;
  border-radius: 5px;
  background: #edf6f8;
  color: #315a6f;
  font-weight: 800;
}

.online-courses__media-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.online-courses__media-fields > label {
  display: grid;
  gap: 6px;
  align-content: start;
  margin: 0;
}

.online-courses__rich-toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--oc-line);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: #edf2f5;
}

.online-courses__rich-toolbar button {
  min-width: 34px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--oc-navy);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.online-courses__rich-toolbar button:hover {
  border-color: #b6c7d4;
  background: #fff;
}

.online-courses__rich-editor {
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--oc-line);
  border-radius: 0 0 5px 5px;
  background: #fff;
  color: #20384d;
  line-height: 1.55;
}

.online-courses__resource-choice {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0;
}

.online-courses__resource-choice > div {
  display: grid;
  gap: 5px;
}

.online-courses__assessment-designer {
  display: grid;
  gap: 16px;
}

.online-courses__assessment-layout {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(360px, 1.6fr) minmax(260px, .95fr);
  gap: 16px;
  align-items: start;
}

.online-courses__assessment-sidebar,
.online-courses__assessment-settings,
.online-courses__assessment-canvas {
  min-width: 0;
}

.online-courses__assessment-sidebar,
.online-courses__assessment-settings {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  align-self: start;
}

.online-courses__designer-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #d8e6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 50, 73, .06);
}

.online-courses__designer-card h4,
.online-courses__assessment-sidebar h4 {
  margin: 0;
  color: var(--oc-navy);
  font-size: 13px;
}

.online-courses__question-palette,
.online-courses__question-outline,
.online-courses__bank-tools,
.online-courses__settings-stack,
.online-courses__settings-toggles {
  display: grid;
  gap: 8px;
}

.online-courses__question-palette {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.online-courses__question-palette button,
.online-courses__question-outline button {
  padding: 9px;
  border: 1px solid #cfe1ea;
  border-radius: 11px;
  background: #f7fbfd;
  color: var(--oc-navy);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.online-courses__question-palette button:hover,
.online-courses__question-outline button:hover {
  border-color: var(--oc-green);
  background: #eefaf6;
}

.online-courses__question-outline button {
  display: grid;
  gap: 2px;
}

.online-courses__question-outline button span {
  overflow: hidden;
  color: #667d90;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-courses__assessment-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -4px -4px;
  padding: 12px;
  border: 1px solid #d7e5ed;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -10px 24px rgba(22, 50, 73, .08);
  backdrop-filter: blur(8px);
}

.online-courses__assessment-designer-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: -4px -4px 4px;
  padding: 16px;
  border: 1px solid #d7e5ed;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7fbfd, #eef7f4);
}

.online-courses__assessment-designer-head h3 {
  margin: 2px 0 4px;
  color: var(--oc-navy);
}

.online-courses__assessment-designer-head span,
.online-courses__assessment-designer-head small {
  color: #60798c;
}

.online-courses__assessment-designer-head span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.online-courses__assessment-designer-steps {
  display: grid;
  min-width: 210px;
  align-content: center;
  gap: 6px;
}

.online-courses__assessment-designer-steps b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--oc-navy);
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(22, 50, 73, .08);
}

.online-courses__question-builder {
  position: relative;
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid #d8e6ee;
  border-left: 5px solid var(--oc-blue);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(22, 50, 73, .06);
}

.online-courses__question-builder.is-focused {
  animation: ocQuestionFocus 1.2s ease;
}

.online-courses__question-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.online-courses__question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.online-courses__question-grid,
.online-courses__question-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(100px, .45fr) minmax(120px, .55fr);
  gap: 12px;
}

.online-courses__question-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.online-courses__question-advanced {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3edf2;
}

.online-courses__question-advanced summary {
  color: var(--oc-green-dark);
  font-weight: 900;
  cursor: pointer;
}

.online-courses__question-toggles,
.online-courses__settings-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.online-courses__question-drag {
  margin-bottom: 8px;
  color: #667d90;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: grab;
}

.online-courses__question-points {
  max-width: 120px;
}

.online-courses__accommodation-picker {
  display: grid;
  grid-template-columns: 1fr minmax(110px, .45fr) auto;
  gap: 8px;
  align-items: end;
}

.online-courses__question-media {
  margin: 10px 0;
}

.online-courses__question-media img,
.online-courses__question-media video {
  display: block;
  width: min(100%, 760px);
  border-radius: 12px;
  background: #0f1720;
}

.online-courses__question-media audio {
  width: min(100%, 680px);
}

.online-courses__likert {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.online-courses__likert label {
  min-width: 54px;
  padding: 9px 12px;
  border: 1px solid #d7e5ed;
  border-radius: 999px;
  background: #fff;
  text-align: center;
}

@keyframes ocQuestionFocus {
  0% { box-shadow: 0 0 0 0 rgba(17, 142, 116, .35); }
  35% { box-shadow: 0 0 0 8px rgba(17, 142, 116, .13); }
  100% { box-shadow: 0 8px 18px rgba(22, 50, 73, .06); }
}

.online-courses__lesson-view > header {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__lesson-view > header h2 {
  margin: 10px 0 4px;
  color: var(--oc-navy);
}

.online-courses__lesson-content {
  min-height: 120px;
  padding: 20px 0;
  color: #20384d;
  line-height: 1.65;
}

.online-courses__lesson-content img {
  max-width: 100%;
  height: auto;
}

.online-courses__lesson-content table {
  width: 100%;
  border-collapse: collapse;
}

.online-courses__lesson-content td,
.online-courses__lesson-content th {
  padding: 7px;
  border: 1px solid var(--oc-line);
}

.online-courses__resource,
.online-courses__assessment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--oc-line);
  border-radius: 5px;
  background: #fff;
}

.online-courses__resource {
  flex-wrap: wrap;
}

.online-courses__resource audio,
.online-courses__resource video {
  display: block;
  flex: 1 0 100%;
  width: min(100%, 720px);
  margin-top: 4px;
}

.online-courses__resource video {
  aspect-ratio: 16 / 9;
  max-height: 480px;
  background: #111;
}

.online-courses__inline-player {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 4px;
}

.online-courses__inline-player iframe {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--oc-line);
  border-radius: 5px;
  background: #f5f7f8;
}

.online-courses__resource > div:first-child,
.online-courses__assessment > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.online-courses__workspace {
  display: grid;
  gap: 16px;
}

.online-courses__workspace-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--oc-line);
}

.online-courses__workspace-item {
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--oc-line);
}

.online-courses__workspace-context {
  margin-bottom: 7px;
  color: #5d7285;
  font-size: 12px;
  font-weight: 800;
}

.online-courses__workspace-context span {
  padding: 0 5px;
  color: #8a9aa7;
}

.online-courses__workspace-item .online-courses__resource,
.online-courses__workspace-item .online-courses__assessment {
  margin-top: 0;
}

.online-courses__lesson-complete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--oc-line);
}

.online-courses__embed iframe {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--oc-line);
  border-radius: 5px;
}

.online-courses__embed .btn {
  margin-top: 10px;
}

.online-courses__discussion form {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

.online-courses__discussion-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.online-courses__discussion-list article {
  padding: 12px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #fff;
}

.online-courses__discussion-list header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.online-courses__discussion-list time {
  margin-left: auto;
  color: #718394;
  font-size: 11px;
}

.online-courses__discussion-list p {
  margin: 8px 0;
}

.online-courses__attempt-head,
.online-courses__student-progress > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.online-courses__attempt-head h2 {
  margin: 0;
}

.online-courses__timer {
  min-width: 96px;
  padding: 10px 12px;
  border: 2px solid #e1a043;
  border-radius: 6px;
  background: #fff8e6;
  color: #8a5107;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}

.online-courses__attempt-questions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.online-courses__attempt-question {
  padding: 14px;
  border: 1px solid var(--oc-line);
  border-radius: 6px;
  background: #fff;
}

.online-courses__attempt-question > header {
  display: flex;
  justify-content: space-between;
  color: #698094;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-courses__attempt-question h3 {
  margin: 10px 0;
  color: var(--oc-navy);
  font-size: 15px;
}

.online-courses__answer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #d5e0e8;
  border-radius: 5px;
  cursor: pointer;
}

.online-courses__answer-option:hover {
  background: #f2f7f8;
}

.online-courses__student-progress {
  padding: 12px;
  border: 1px solid var(--oc-line);
  border-left: 4px solid var(--oc-green);
  border-radius: 6px;
  background: #fff;
}

.online-courses__live-summary,
.online-courses__submission-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
  border: 1px solid var(--oc-line);
  background: #fff;
}

.online-courses__submission-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.online-courses__live-summary > div,
.online-courses__submission-summary > div {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-right: 1px solid var(--oc-line);
}

.online-courses__live-summary > div:last-child,
.online-courses__submission-summary > div:last-child {
  border-right: 0;
}

.online-courses__live-summary strong,
.online-courses__submission-summary strong {
  color: var(--oc-navy);
  font-size: 22px;
}

.online-courses__live-summary span,
.online-courses__submission-summary span,
.online-courses__submission-row span {
  color: #657a8c;
  font-size: 11px;
}

.online-courses__live-badge {
  margin-right: auto;
  color: #176f5e;
  font-size: 11px;
  font-weight: 800;
}

.online-courses__live-badge::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #1f9d78;
}

.online-courses__submission-list {
  display: grid;
  gap: 6px;
}

.online-courses__submission-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.5fr) minmax(120px, .8fr) minmax(160px, 1fr) 70px auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--oc-line);
  border-left: 4px solid var(--oc-green);
  background: #fff;
}

.online-courses__submission-row > div,
.online-courses__submission-person,
.online-courses__submission-work,
.online-courses__submission-score {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.online-courses__submission-person strong,
.online-courses__submission-work strong {
  overflow-wrap: anywhere;
}

.online-courses__evaluator-names {
  display: block;
  margin-top: 5px;
}

.online-courses__submission-score {
  grid-template-columns: auto auto;
  align-items: baseline;
}

.online-courses__submission-score strong {
  color: var(--oc-navy);
  font-size: 20px;
}

.online-courses__submission-actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 6px !important;
}

@media (max-width: 1050px) {
  .online-courses__submission-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .online-courses__submission-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .online-courses__live-summary,
  .online-courses__submission-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .online-courses__live-summary > div:nth-child(2n),
  .online-courses__submission-summary > div:nth-child(2n) {
    border-right: 0;
  }
  .online-courses__submission-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .online-courses__submission-actions {
    grid-column: auto;
  }
}

.online-courses__student-progress > header span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: #657a8c;
  font-size: 11px;
}

.online-courses__student-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.online-courses__student-score strong {
  color: var(--oc-navy);
  font-size: 22px;
}

.online-courses__student-progress details {
  margin-top: 10px;
}

.online-courses__student-progress summary {
  color: #49677d;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.online-courses__attempt-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.online-courses__attempt-list > div {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #e1e7ec;
}

.online-courses__attempt-list span {
  display: grid;
}

.online-courses__attempt-list small {
  color: #6a7f91;
}

.online-courses__progress-actions {
  justify-content: flex-end;
  margin: 10px 0;
}

@media (max-width: 1100px) {
  .online-courses__metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .online-courses__metrics > div:nth-child(3n) {
    border-right: 0;
  }

  .online-courses__toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 180px));
  }

  .online-courses__view-switch {
    width: max-content;
  }

  .online-courses__list {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .online-courses__module-head {
    grid-template-columns: minmax(220px, 1fr) 130px;
  }

  .online-courses__module-head > .online-courses__row-actions {
    grid-column: 1 / -1;
  }

  .online-courses__admin-grid {
    grid-template-columns: 1fr;
  }

  .online-courses__assessment-layout {
    grid-template-columns: 1fr;
  }

  .online-courses__assessment-sidebar,
  .online-courses__assessment-settings,
  .online-courses__assessment-savebar {
    position: static;
  }

  .online-courses__question-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .online-courses__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .online-courses__metrics > div,
  .online-courses__metrics > div:nth-child(3n) {
    border-right: 1px solid var(--oc-line);
  }

  .online-courses__metrics > div:nth-child(2n) {
    border-right: 0;
  }

  .online-courses__toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .online-courses__search {
    grid-column: 1 / -1;
  }

  .online-courses__list {
    grid-template-columns: 1fr;
  }

  .online-courses__assessment-designer-head,
  .online-courses__question-top {
    align-items: stretch;
    flex-direction: column;
  }

  .online-courses__question-palette,
  .online-courses__question-grid,
  .online-courses__question-settings-grid,
  .online-courses__accommodation-picker {
    grid-template-columns: 1fr;
  }

  .online-courses__join,
  .online-courses__course-hero,
  .online-courses__resource,
  .online-courses__assessment,
  .online-courses__certificate,
  .online-courses__bank-row {
    align-items: stretch;
    flex-direction: column;
  }

  .online-courses__steps {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 12px;
  }

  .online-courses__steps li:nth-child(5)::after {
    display: none;
  }

  .online-courses__course-modal,
  .online-courses__form-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .online-courses__course-modal-body {
    height: calc(100vh - 64px);
    max-height: none;
    padding: 0 12px 20px;
  }

  .online-courses__course-hero {
    min-height: 230px;
    margin: 0 -12px;
    padding: 20px 14px;
  }

  .online-courses__course-hero h2 {
    font-size: 23px;
  }

  .online-courses__detail-tabs {
    margin: 0 -12px 14px;
    padding: 0 12px;
  }

  .online-courses__builder-guide {
    grid-template-columns: 1fr;
    margin: 0 -12px 14px;
    padding: 14px 12px;
  }

  .online-courses__add-menu-list {
    min-width: 0;
  }

  .online-courses__builder-entry {
    padding: 16px;
  }

  .online-courses__builder-entry > .btn {
    width: 100%;
  }

  .online-courses__module-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .online-courses__module-head,
  .online-courses__lesson-row {
    grid-template-columns: 1fr;
  }

  .online-courses__module-progress {
    max-width: 190px;
  }

  .online-courses__overview {
    grid-template-columns: 1fr;
  }

  .online-courses__resource-choice {
    grid-template-columns: 1fr;
  }

  .online-courses__media-fields {
    grid-template-columns: 1fr;
  }

  .online-courses__editor-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .online-courses__resource-choice > span {
    text-align: center;
  }

  .online-courses__discussion form {
    grid-template-columns: 1fr;
  }

  .online-courses__permission-row,
  .online-courses__attempt-list > div {
    grid-template-columns: 1fr;
  }

  .online-courses__permission-grid {
    grid-template-columns: 1fr;
  }

  .online-courses__embed iframe {
    min-height: 360px;
  }

  .online-courses__inline-player iframe {
    min-height: 340px;
  }
}

@media (max-width: 480px) {
  .online-courses__toolbar {
    grid-template-columns: 1fr;
  }

  .online-courses__search {
    grid-column: auto;
  }

  .online-courses__steps li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .online-courses__attempt-head,
  .online-courses__student-progress > header,
  .online-courses__lesson-complete {
    align-items: stretch;
    flex-direction: column;
  }

  .online-courses__timer {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .online-courses__advanced-filters > div {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 560px) {
  .online-courses__advanced-filters > div,
  .online-courses__invite {
    grid-template-columns: 1fr;
  }

  .online-courses__invite img {
    width: 130px;
    height: 130px;
  }

  .online-courses__grading-head,
  .online-courses__grading-answer > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .online-courses__grading-rubric > div,
  .online-courses__accommodation {
    grid-template-columns: 1fr;
  }
}

.staff-schedule-person-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.staff-schedule-person-row__action {
  color: #1d4f86;
  font-weight: 700;
  white-space: nowrap;
}

/* Demandes d'impression — ligne validée par le coordonnateur (admin) */
.print-requests__row--coordo-ok {
  cursor: pointer;
}
.print-requests__row--coordo-ok td {
  background: rgba(34, 197, 94, 0.28) !important;
}
.print-requests__row--coordo-ok:hover td {
  background: rgba(34, 197, 94, 0.38) !important;
}
.print-requests__coordo-remarks {
  white-space: pre-wrap;
  padding: 12px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
}

.ped-doc-discipline-row {
  cursor: pointer;
}
.ped-doc-discipline-row:hover td {
  background: rgba(229, 241, 255, 0.9) !important;
}
.ped-doc-discipline-row:focus-visible td {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* School EDT published grid */
.school-edt__hero{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.school-edt__hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.school-edt__grid-wrap{overflow:auto;max-width:100%}
.school-edt__table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px}
.school-edt__table th,.school-edt__table td{border:1px solid #cbd5e1;padding:6px 8px;vertical-align:top}
.school-edt__table thead th{background:#eff6ff;color:#0b3d74;position:sticky;top:0;z-index:1}
.school-edt__th-day,.school-edt__th-period{min-width:64px}
.school-edt__class{font-weight:800;color:#0b3d74}
.school-edt__pp{font-size:10px;color:#64748b;font-weight:700;margin-top:2px}
.school-edt__day{background:#f8fafc;font-weight:900;text-align:center;color:#0b3d74;min-width:78px}
.school-edt__period{background:#f8fafc;text-align:center;min-width:70px}
.school-edt__period span{display:block;font-weight:800;color:#0f172a}
.school-edt__period small{display:block;color:#64748b;font-weight:600;margin-top:2px}
.school-edt__cell{min-width:110px;max-width:160px;font-weight:700;color:#0f172a;white-space:pre-wrap;word-break:break-word}
.school-edt__cell--empty{color:#94a3b8;font-weight:600}
.school-edt__cell--editable{cursor:pointer}
.school-edt__cell--editable:hover{outline:2px solid #38bdf8;outline-offset:-2px;background:#f0f9ff}

/* Fiches de préparation — EDT hebdomadaire */
.lesson-plans-subtabs{margin-bottom:4px}
.lesson-plan-subtab.active{font-weight:800}
.lpe-toolbar{margin-top:0}
.lpe-toolbar__nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.lpe-toolbar__nav .it-week-nav__center,.lesson-plan-edt-mount .it-week-nav__center{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.lesson-plan-edt-mount{min-height:220px}
.lpe-grid-wrap{overflow:auto}
.lpe-grid{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed;font-size:12px}
.lpe-grid th,.lpe-grid td{border:1px solid #cbd5e1;padding:6px;vertical-align:top}
.lpe-grid thead th{background:#eff6ff;color:#0b3d74;font-weight:800}
.lpe-grid__time{width:78px;background:#f8fafc;text-align:center}
.lpe-grid__time span{display:block;font-weight:900;color:#0f172a}
.lpe-grid__time small{display:block;color:#64748b;margin-top:2px;font-weight:600}
.lpe-slot{cursor:pointer;min-height:64px;transition:background .15s ease,outline .15s ease}
.lpe-slot:hover,.lpe-slot:focus{outline:2px solid #38bdf8;outline-offset:-2px;background:#f0f9ff}
.lpe-slot--filled{background:#f0fdf4}
.lpe-slot--visa{background:#eff6ff}
.lpe-slot__subject{font-weight:800;color:#0f172a;white-space:pre-wrap;word-break:break-word}
.lpe-slot__hint{display:inline-block;margin-top:6px;color:#64748b;font-size:11px;font-weight:700}
.lpe-slot__badge{display:flex;align-items:flex-start;gap:4px;margin-top:6px;padding:2px 6px;border-radius:6px;background:#dcfce7;color:#166534;font-size:11px;font-weight:800;line-height:1.25;white-space:normal}
.lpe-slot__badge--checked{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}
.lpe-slot__badge--checked .lpe-slot__name{color:#1e40af}
.lpe-slot__check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:14px;height:14px;margin-top:1px;border-radius:999px;background:#2563eb;color:#fff;font-size:10px;font-weight:900;line-height:1}
.lpe-doc--visa{border-color:#93c5fd;background:#f8fbff}
.lpe-doc__teacher{margin-top:2px;color:#64748b;font-size:13px}
.lpe-doc__teacher--checked{color:#1d4ed8;font-weight:800}
.lpe-doc__teacher--checked .lpe-slot__check{display:inline-flex;vertical-align:middle;margin-right:2px}
.lpe-doc-list{display:grid;gap:10px}
.lpe-doc__visa{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}
.lpe-dropper{border:1px dashed #94a3b8;border-radius:10px;padding:10px;background:#f8fafc}
.lpe-dropper--active{border-color:#0ea5e9;background:#f0f9ff}
.lpe-dropper .input{margin-bottom:6px}
/* Créneaux passés verrouillés (rose-rouge) */
.lpe-slot--locked{background:#fff1f2 !important;border-color:#fecdd3}
.lpe-slot--locked:hover,.lpe-slot--locked:focus{outline-color:#f43f5e;background:#ffe4e6 !important}
.lpe-slot--locked .lpe-slot__subject{color:#9f1239}
/* Créneaux passés déverrouillés par l'admin (violet) */
.lpe-slot--unlocked{background:#f5f3ff !important;border-color:#c4b5fd}
.lpe-slot--unlocked:hover,.lpe-slot--unlocked:focus{outline-color:#8b5cf6;background:#ede9fe !important}
.lpe-slot--unlocked .lpe-slot__subject{color:#5b21b6}
.lpe-slot__lock{display:block;font-size:16px;line-height:1;margin-bottom:2px;color:#e11d48}
.lpe-slot__lock--open{color:#7c3aed;font-size:18px;position:relative}
.lpe-slot__lock-check{position:absolute;top:-4px;right:-8px;font-size:11px;font-weight:900;color:#16a34a;background:#fff;border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 1px #bbf7d0}

/* ===== Espace Parent professionnel + RDV ===== */
.parent-page{padding-top:8px}
.parent-shell{border-radius:28px;overflow:hidden;background:
  radial-gradient(1200px 420px at 0% -10%, rgba(11,61,116,.10), transparent 55%),
  radial-gradient(900px 320px at 100% 0%, rgba(14,116,144,.08), transparent 50%),
  #fff}
.parent-shell__head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;flex-wrap:wrap;padding-bottom:4px;border-bottom:1px solid #e8eef5;margin-bottom:8px}
.parent-shell__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#0b3d74}
.parent-shell__title{margin:4px 0 0;font-size:clamp(1.55rem,2.4vw,2.1rem);color:#0f172a;letter-spacing:-.02em}
.parent-shell__lead{margin:8px 0 0;max-width:48ch}
.parent-shell__child{min-width:min(100%,280px)}
.parent-shell__child label{display:block;font-weight:700;color:#334155;margin-bottom:4px}
.parent-tabs{margin-top:12px}
.parent-section-head{padding-bottom:8px;border-bottom:1px solid #eef2f7;margin-bottom:4px}
.prdv-hero,.prdv-hero--staff{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:16px 18px;border:1px solid #dbe7f3;border-radius:18px;background:linear-gradient(135deg,#f8fbff,#eef6fb)}
.prdv-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#0b3d74;margin-bottom:4px}
.prdv-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px;margin-top:14px}
@media (max-width:980px){.prdv-grid{grid-template-columns:1fr}.parent-shell__head{align-items:stretch}}
.prdv-card{border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff}
.prdv-form label{display:block;margin-top:10px;margin-bottom:4px;font-weight:700;color:#334155}
.prdv-item{border:1px solid #e2e8f0;border-radius:14px;padding:12px 14px;margin-bottom:10px;background:#fcfdff}
.prdv-item__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.prdv-item__meta{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:8px;color:#475569;font-size:13px}
.prdv-item__msg,.prdv-item__note{margin-top:8px;padding:8px 10px;border-radius:10px;background:#f8fafc;color:#334155;white-space:pre-wrap}
.prdv-item__note{background:#eff6ff;border:1px solid #dbeafe}
.prdv-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e2e8f0;color:#334155}
.prdv-status--wait{border-color:#fde68a;background:#fffbeb}
.prdv-status--wait .prdv-badge{background:#fef3c7;color:#92400e}
.prdv-status--ok{border-color:#bbf7d0;background:#f0fdf4}
.prdv-status--ok .prdv-badge{background:#dcfce7;color:#166534}
.prdv-status--bad{border-color:#fecdd3;background:#fff1f2}
.prdv-status--bad .prdv-badge{background:#ffe4e6;color:#9f1239}
.prdv-status--alt{border-color:#c4b5fd;background:#f5f3ff}
.prdv-status--alt .prdv-badge{background:#ede9fe;color:#5b21b6}
.prdv-staff-actions{margin-top:12px;padding-top:10px;border-top:1px dashed #cbd5e1}
.prdv-staff-actions label{display:block;margin:8px 0 4px;font-weight:700}
.parent-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:900px){.parent-services__grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.parent-services__grid{grid-template-columns:1fr}}
.parent-services__card{border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:8px;min-height:150px}
.parent-services__card h3{margin:0;color:#0f172a}
.parent-services__card .btn{margin-top:auto;align-self:flex-start}
.parent-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:700px){.parent-contacts{grid-template-columns:1fr}}
.parent-contact{border:1px solid #e8eef5;border-radius:12px;padding:10px 12px;background:#f8fafc}

/* Créneau à l’origine de la notification, y compris au survol et au focus. */
.lpe-grid .lpe-slot--notification{outline:3px solid #dc2626;outline-offset:-3px;box-shadow:inset 0 0 0 3px #dc2626}

.lpe-double-hours{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px}
.lpe-double-hours input{width:auto;flex:0 0 auto}
.lpe-report-bar{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}
.lpe-report-bar [hidden]{display:none!important}

.lpe-slot__deposit{display:block}
.lpe-late-badge{display:table;max-width:100%;margin:4px 0 0;padding:3px 7px;border:1px solid #fecaca;border-left:3px solid #dc2626;border-radius:6px;background:#fff1f2;color:#b91c1c;font-size:11px;font-weight:700;line-height:1.35;white-space:normal}

.lpe-motivation{margin:0 0 18px;padding:18px 20px;border:1px solid #b8dcd4;border-left:4px solid #248370;border-radius:10px;background:#eff9f5;color:#184d43}.lpe-motivation strong{display:block;font-size:15px}.lpe-motivation p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#285c52}

/* Démarches familles et navigation secondaire du pointage. */
.attendance-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.attendance-subtabs [aria-selected="true"]{background:#176b58;color:white;border-color:#176b58}
[data-attendance-pane][hidden],[data-attendance-search][hidden],.family-services [hidden]{display:none!important}
.family-services{padding:16px 0}.family-services .row{flex-wrap:wrap}.family-services .col{min-width:min(230px,100%)}
.family-request{margin:14px 0}.family-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.family-actions label{width:100%}
.family-notes{white-space:pre-wrap;overflow-wrap:anywhere}.found-objects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.found-object>img{width:100%;height:210px;object-fit:contain;background:#f1f5f4;border-radius:8px}.found-object form{margin-top:14px}.family-services textarea{box-sizing:border-box;max-width:100%}

/* Les libellés de navigation restent intégralement lisibles, sur toutes les interfaces. */
body .tab, body .tab__label, body .tabs-cat__label, body .tools-subtab {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  height: auto !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}
body .tabs--scroll .tab { flex-shrink: 0; max-width: min(320px, 85vw); }
@media(max-width:760px){
  /* Le select natif tronque les longs titres : afficher les boutons complets. */
  body .tabs-mobile-nav { display:none !important; }
  body .tabs.tabs--organized { display:flex; flex-wrap:wrap; }
  body .tabs--organized .tab { min-width:0 !important; max-width:100%; flex:1 1 220px; }
}