/* ===========================
   AppliGroupes — Theme "Jimmy Corrigan doux"
   FLEX ONLY — no grid anywhere
   =========================== */

/* ===== Inter 24pt — texte courant ===== */
@font-face{
  font-family:"Inter 24pt";
  src:url("../fonts/inter/Inter_24pt-Regular-CX5r4bv.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter 24pt";
  src:url("../fonts/inter/Inter_24pt-Medium-2Wje1tp.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter 24pt";
  src:url("../fonts/inter/Inter_24pt-SemiBold-1KfLSX6.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter 18pt";
  src:url("../fonts/inter/Inter_18pt-Regular-qIlWrpV.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}

/* Titres */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans/IBMPlexSans-Bold-AWUpx0O.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans/IBMPlexSans-SemiBold-CJTmHPF.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans/IBMPlexSans-Medium-vb9e4HO.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* --------- Variables --------- */
:root{
  /* Texte : éviter le noir "froid" */
  --text:#2b2620;
  --muted:#4a4036;
  --link:#0b5ed7;
  --border:#9ca3af;

  --panel:#f8fafc;
  --panel-alt:#fff7e6;

  --corr-blue:#5b7fa1;
  --corr-ink:#2a4365;
  --corr-ice:#eef2f7;
  --corr-cream:#fffdf3;
  --corr-sadpink:#f3e0e6;
  --corr-grey:#c5ccd5;
  --corr-line:#d7dce3;

  /* largeur de la colonne label pour les forms */
  --label-w: 240px;

  /* Typo globale (préférer Noto Sans si dispo) */
  --font-sans:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* --------- Reset léger --------- */
* { box-sizing: border-box; }
html, body { height:100%; }
:root { color-scheme: light; }

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.55;
  letter-spacing:.1px;
  font-optical-sizing:auto;
}

/* Titres */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
}

/* Petits éléments UI */
.small-ui, .form-hint, .badge-mini{
  font-family:var(--font-sans);
  font-size:.9rem;
}

/* Liens / textes */
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
small, .text-muted, .muted { color:var(--muted) !important; opacity:1; }
h1,h2,h3 { color:var(--corr-ink); }

/* ===========================
   Shell global & conteneur
   =========================== */
.app-shell {
  background: var(--corr-cream);
  padding: 24px 0;
}
.container-xl {
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 20px;
}
.container-lg {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:16px 18px;
  border-radius:14px;
  background: var(--corr-ice);
  border:1px solid var(--corr-line);
  box-shadow:0 6px 18px rgba(36,54,86,0.08);
}
.container-lg > * + * { margin-top:16px; }

@media (max-width:900px){
  .app-shell { padding:16px 0; }
  .container-xl { padding:0 12px; }
  .container-lg { padding:12px; border-radius:10px; }
}

/* ===========================
   Header
   =========================== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; z-index:1000;
  background:#fff; border:1px solid var(--corr-line); padding:.4rem .6rem; border-radius:8px;
  box-shadow:0 3px 10px rgba(2,6,23,.12);
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:#ffffff;
  border-bottom:1px solid var(--corr-line);
  box-shadow: 0 4px 12px rgba(36,54,86,0.06);
}
.site-header__inner{
  width:100%; max-width:1220px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__logo{
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--corr-line); background:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.brand__logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__title{ font-weight:800; color:#0b1220; letter-spacing:.2px; font-size:1.05rem; }
.brand__baseline{ font-size:.86rem; color:#94a3b8; }

.site-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.site-nav__link{
  display:inline-block; text-decoration:none;
  padding:.42rem .7rem; border-radius:10px;
  border:1px solid var(--corr-line);
  background:linear-gradient(#ffffff, var(--panel));
  color:#0b1220;
  transition: transform .06s ease, box-shadow .12s ease, border-color .2s ease;
}
.site-nav__link:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(2,6,23,.08); border-color:var(--border); }

@media (max-width: 720px){
  .site-header__inner{ padding:10px 12px; }
  .brand__title{ font-size:1rem; }
  .brand__baseline{ display:none; }
}

/* Variante sombre */
.site-header--dark{
  background: linear-gradient(180deg, #2a4365 0%, #445979 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(10,16,28,0.25);
}
.site-header--dark .site-header__inner{ padding: 12px 20px; max-width:1220px; }
.site-header--dark .brand__logo{
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.site-header--dark .brand__logo img{ filter: brightness(0.98) contrast(1.05); }
.site-header--dark .brand__title{ color:#f8fafc; font-weight:800; letter-spacing:.2px; }
.site-header--dark .brand__baseline{ color:#f8fafc; opacity:.9; }
.site-header--dark .site-nav__link{
  color:#0b1220;
  background: linear-gradient(#ffffff, #eef2f7);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.site-header--dark .site-nav__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.26);
}

/* ===========================
   Espace élève — tableau de bord
   =========================== */
.student-page{
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.student-hero{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, #eef2f7 0%, #fffdf3 100%);
  border:1px solid var(--corr-line);
  box-shadow:0 6px 18px rgba(36,54,86,0.06);
}
.student-avatars{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  min-width:240px;
}
.avatar-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--corr-line);
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.avatar{
  width:36px; height:36px;
  border-radius:999px;
  background:#e2e8f0;
  display:inline-flex;
  align-items:center; justify-content:center;
  font-weight:700; color:#0f172a;
  letter-spacing:.3px;
}
.avatar-name{
  display:flex; flex-direction:column; line-height:1.1;
  font-size:.95rem; color:#0f172a;
}

/* PDF viewer (student activity) */
.pdf-embed{
  margin:10px 0;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  /* Fallback: fixed big height (most reliable for <object>) */
  height:760px;
  max-height:calc(100vh - 220px);
  min-height:560px;
  background:#fff;
}
.pdf-embed object,
.pdf-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-height: 820px){
  .pdf-embed{
    height:65vh;
    max-height:calc(100vh - 200px);
    min-height:520px;
  }
}
.student-card{
  padding:16px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--corr-line);
  box-shadow:0 6px 18px rgba(36,54,86,0.06);
}
.form-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form-card label{
  display:block;
  font-weight:600;
  color:#0f172a;
  margin-bottom:6px;
}
.form-card input[type="text"],
.form-card textarea,
.form-card select{
  width:100%;
  padding:0.75rem 0.9rem;
  border:1px solid var(--corr-line);
  border-radius:10px;
  font-size:1rem;
  background:#f8fafc;
}
.form-card textarea{ min-height:120px; resize:vertical; }
.form-actions{
  margin:4px 0 0;
  display:flex;
  justify-content:flex-end;
}
.form-actions button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.65rem 1rem;
  border-radius:10px;
  border:1px solid #2ca58d;
  background:#e6fff6;
  color:#0b3b2e;
  font-weight:600;
  cursor:pointer;
}
.form-actions button:hover{ background:#d5f7eb; }

.advice-card{ background:#f9fafb; }
.student-recap{ display:flex; flex-direction:column; gap:6px; }
.student-pre{
  background:#f8fafc;
  border:1px dashed var(--corr-line);
  padding:10px;
  border-radius:10px;
  white-space:pre-wrap;
  margin:0;
  font-size:.95rem;
}
.spaced-list{ margin:6px 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.15em; font-size:.78rem; color:#64748b; margin:0 0 4px; }
.countdown{
  color:#2a4365; padding:8px 10px;
  border:1px solid #ddd; border-radius:10px;
  display:inline-flex; align-items:center; gap:8px; margin:6px 0;
  background:#f8fafc;
}
.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:10px;
}

@media (max-width:720px){
  .student-hero{ flex-direction:column; }
  .student-avatars{ justify-content:flex-start; }
}

/* ===========================
   Formulaire Activity — FLEX ONLY
   =========================== */

/* Cadre central du formulaire */
.form--activity {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* La section infos doit rester fluide pour le mobile */
#infosSection{
  max-width: 100%;
}

/* Sections (cartes) */
.form-section {
  background: #fff;
  border: 1px solid var(--corr-line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin: 16px 0;
  box-shadow: 0 3px 10px rgba(36,54,86,0.04);
}
.form-section h2 {
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  color: var(--corr-ink);
}

/* Variante carte douce */
.form-section--card {
  background: var(--corr-cream);
  border-color: #f0e7b5;
}

/* Lignes du formulaire : label fixe + champ fluide */
.form-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Symfony rend <label> + <div class="..."> */
.form--activity label {
  flex: 0 0 var(--label-w);
  max-width: var(--label-w);
  text-align: right;
  padding-top: 6px;
  color: var(--text);
  font-weight: 600;
}

/* Colonne champ */
.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Champs pleine largeur */
.form--activity input,
.form--activity select,
.form--activity textarea {
  padding: 10px 12px;
  min-height: 40px;
  font-size: 1rem;
  background:#fff;
  color:#111;
  border:1px solid var(--corr-line);
  border-radius:8px;
  width:100%;
}
.form--activity textarea { min-height: 120px; resize: vertical; }
.form--activity input:focus,
.form--activity select:focus,
.form--activity textarea:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

/* “Colonnes” responsives sans grid : flex-wrap */
.split-2,
.split-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.split-2 .cell { flex: 1 1 420px; min-width: 280px; }
.split-3 .cell { flex: 1 1 300px; min-width: 220px; }
.split-2 .cell .form-row + .form-row { margin-top: 10px; }
.split-3 .cell .form-row + .form-row { margin-top: 10px; }

/* Hint / erreurs */
.form-hint { margin: 8px 0 0; color:#4b5563; }
.form-error-message, .form-errors{
  color:#842029; background:#f8d7da; border:1px solid #f5c2c7;
  padding:6px 8px; border-radius:8px; font-size:.9rem; margin-top:6px;
}

/* Actions (bouton aligné sous colonne champ) */
.form-actions{
  display: flex;
  padding-top: 8px;
}
.form-actions .btn{
  margin-left: calc(var(--label-w) + 12px);
}

/* Boutons */
.btn, button, [type="button"], [type="submit"]{
  display:inline-block;
  padding:.48rem .7rem;
  border-radius:10px;
  border:1px solid var(--corr-line);
  background:linear-gradient(#ffffff, var(--panel));
  color:#0f172a;
  text-decoration:none;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.btn:hover, button:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(2,6,23,.08);
  border-color: var(--border);
}

/* Variantes (charte) */
.btn--primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
  color:#fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.20);
}
.btn--primary:hover{
  border-color:#1e40af;
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 10px 22px rgba(37,99,235,.28);
}
.btn--ghost{
  background: #fff;
  border-color: #cbd5e1;
}
.btn--ghost:hover{
  background:#f8fafc;
}
.btn--danger{
  background: linear-gradient(180deg, #fff1f2 0%, #fee2e2 100%);
  border-color: #fecaca;
  color: #991b1b;
}
.btn--danger:hover{
  border-color:#fca5a5;
  background: linear-gradient(180deg, #ffe4e6 0%, #fecaca 100%);
}

/* Badges (pastel, doux) */
.badge{
  display:inline-block;
  padding:.2rem .5rem;
  border-radius:999px;
  border:1px solid var(--corr-line);
  background:#fff;
  color:#0f172a;
  font-size:.85rem;
}
.badge--ok{
  background:#e6ffed;
  border-color: rgba(46,160,67,.25);
  color:#166534;
}
.badge--warn{
  background:#fff7e6;
  border-color: rgba(245,158,11,.28);
  color:#92400e;
}
.badge--err{
  background:#fde2e2;
  border-color: rgba(239,68,68,.28);
  color:#7f1d1d;
}

/* Emotion badges (pastel, doux) */
.badge--emo-happy{
  background:#e6ffed;
  border-color:#bbf7d0;
  color:#166534;
}
.badge--emo-tired{
  background:#fff7e6;
  border-color:#fde68a;
  color:#92400e;
}
.badge--emo-stressed{
  background:#fde2e2;
  border-color:#fecaca;
  color:#7f1d1d;
}
.badge--emo-sad{
  background:#f3e0e6;
  border-color:#f8c9d7;
  color:#7a233a;
}
.badge--emo-angry{
  background:#ffe4e1;
  border-color:#ffc1ba;
  color:#7f1d1d;
}
.badge--emo-surprised{
  background:#e0f2ff;
  border-color:#bae6fd;
  color:#0f3b6d;
}

/* Icons (light stroke, Corrigan vibes) */
.icon { width: 20px !important; height: 20px !important; vertical-align: -2px; display:inline-block; max-width:none; max-height:none; overflow: visible; }
.icon, .icon use, .icon path, .icon rect, .icon circle, .icon line, .icon polygon, .icon polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2; /* un poil plus gras */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--12 { width: 12px; height: 12px; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--muted { color: var(--muted); }
.icon--ok { color: #166534; }
.icon--warn { color: #92400e; }
.btn svg.icon, button svg.icon { margin-right: 6px; }

/* Ensure icons inside buttons/links stay compact */
.btn .icon, button .icon, a .icon { width: 18px !important; height: 18px !important; }

/* Accent colors */
/* Accent palette (Corrigan-esque, plus feutrée) */
.icon--blue { color:#2a4365; }    /* pétrole */
.icon--green { color:#2ca58d; }   /* vert sarcelle doux */
.icon--red { color:#b23a48; }     /* brique */
.icon--orange { color:#cc7722; }  /* ambre/cuir */
.icon--purple { color:#7c3aed; }  /* violet doux */
.icon--gray { color:#4b5563; }    /* ardoise */

/* Hard override for browsers that don't propagate currentColor through <use> */
.icon--blue, .icon--blue use, .icon--blue path, .icon--blue rect, .icon--blue circle, .icon--blue line, .icon--blue polygon, .icon--blue polyline { stroke:#2a4365 !important; fill:none !important; }
.icon--green, .icon--green use, .icon--green path, .icon--green rect, .icon--green circle, .icon--green line, .icon--green polygon, .icon--green polyline { stroke:#2ca58d !important; fill:none !important; }
.icon--red, .icon--red use, .icon--red path, .icon--red rect, .icon--red circle, .icon--red line, .icon--red polygon, .icon--red polyline { stroke:#b23a48 !important; fill:none !important; }
.icon--orange, .icon--orange use, .icon--orange path, .icon--orange rect, .icon--orange circle, .icon--orange line, .icon--orange polygon, .icon--orange polyline { stroke:#cc7722 !important; fill:none !important; }
.icon--purple, .icon--purple use, .icon--purple path, .icon--purple rect, .icon--purple circle, .icon--purple line, .icon--purple polygon, .icon--purple polyline { stroke:#7c3aed !important; fill:none !important; }
.icon--gray, .icon--gray use, .icon--gray path, .icon--gray rect, .icon--gray circle, .icon--gray line, .icon--gray polygon, .icon--gray polyline { stroke:#4b5563 !important; fill:none !important; }


/* Switch custom (flex-friendly) */
.switch-row { align-items: center; }
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.switch__input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.switch__track {
  width: 46px; height: 26px;
  background: #e5e7eb;
  border: 1px solid var(--corr-line);
  border-radius: 999px;
  display: inline-block;
  position: relative;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.02);
}
.switch__thumb {
  position: absolute;
  top: 50%; left: 4px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid var(--corr-line);
  border-radius: 50%;
  transition: left .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.switch__input:checked + .switch__track {
  background: #dbeafe;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.25);
}
.switch__input:checked + .switch__track .switch__thumb { left: 22px; box-shadow: 0 2px 4px rgba(37,99,235,.15); }
.switch__input:focus-visible + .switch__track { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Accessibilité */
::placeholder { color:#6b7280 !important; opacity:1; }
:disabled { color:#6b7280 !important; opacity:1; }
[style*="color:#6f42c1"], [style*="color: #6f42c1"]{ color:var(--text) !important; }
[style*="color:#fff"], [style*="color: #fff"],
[style*="color:#ffffff"], [style*="color: #ffffff"],
[style*="color:rgb(255,255,255)"] { color:#111 !important; }

/* ===========================
   Responsive dur (mobile)
   =========================== */
@media (max-width: 720px){
  .form--activity label{
    text-align: left;
    flex: 0 0 auto;
    max-width: 100%;
    padding-top: 0;
    margin-bottom: 6px;
  }
  .form-row{ flex-direction: column; }
  .form-actions .btn{ margin-left: 0; }
}

/* ===========================
   Animer (Run) — intégration charte
   =========================== */
:root{
  /* Accents par type de bloc (Animer) */
  --type-quiz-bd:#cbb6f7;   /* quiz_indices border */
  --type-quiz-bg:#faf7ff;   /* quiz_indices background */
  --type-observ-bd:#b9d6f2; /* observation_silent border */
  --type-observ-bg:#f6fbff; /* observation_silent background */
  --type-marche-bd:#f8d9b2; /* marche_info border */
  --type-marche-bg:#fff8ee; /* marche_info background */
  --type-mini-bd:#bde0fe;   /* mini_frise border */
  --type-mini-bg:#f5faff;   /* mini_frise background */
  --type-cartes-bd:#ffd6a5; /* cartes_connexion border */
  --type-cartes-bg:#fff7ec; /* cartes_connexion background */
  --type-exit-bd:#fecaca;   /* exit_ticket border */
  --type-exit-bg:#fff5f5;   /* exit_ticket background */
}

.run-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.card { border:1px solid var(--corr-line); border-left:4px solid var(--corr-line); border-radius:12px; padding:12px; background:#fff; box-shadow:0 3px 10px rgba(36,54,86,0.04); display:flex; flex-direction:column; gap:10px; }
.card h3 { margin:0; font-size:1rem; display:flex; align-items:center; gap:8px; color: var(--corr-ink); }
.badge { padding:2px 6px; border-radius:999px; font-size:.78em; border:1px solid var(--corr-line); background:var(--panel); }
.badge--ok { background:#e6ffed; border-color:#bbf7d0; }
.badge--warn { background:#fff7ed; border-color:#fed7aa; }
.badge--soft { background:#eef2ff; border-color:#c7d2fe; }
.muted { color:var(--muted); font-size:.9em; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.groups-grid { display:flex; flex-wrap:wrap; gap:8px; }
.group-chip { padding:4px 8px; border:1px solid var(--corr-line); border-radius:999px; display:inline-flex; align-items:center; gap:6px; background:#fff; }
.stats { display:flex; gap:8px; flex-wrap:wrap; }
.stat { background:var(--corr-ice); padding:2px 8px; border-radius:999px; font-size:.85em; border:1px solid var(--corr-line); }
.materials { font-size:.9em; color:var(--muted); }
.materials ul { margin:4px 0 0 16px; }
.timer { margin-top:4px; width:100%; max-width:260px; background:var(--corr-ice); border-radius:6px; overflow:hidden; border:1px solid var(--corr-line); }
.timer .bar { height:10px; width:0; background:var(--link); }
.top-links a { margin-right:8px; }
.card-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }

/* Accent par type */
.card.type-quiz_indices { border-color: var(--type-quiz-bd); background: linear-gradient(#ffffff, var(--type-quiz-bg)); }
.card.type-observation_silent { border-color: var(--type-observ-bd); background: linear-gradient(#ffffff, var(--type-observ-bg)); }
.card.type-marche_info { border-color: var(--type-marche-bd); background: linear-gradient(#ffffff, var(--type-marche-bg)); }
.card.type-mini_frise { border-color: var(--type-mini-bd); background: linear-gradient(#ffffff, var(--type-mini-bg)); }
.card.type-cartes_connexion { border-color: var(--type-cartes-bd); background: linear-gradient(#ffffff, var(--type-cartes-bg)); }
.card.type-exit_ticket { border-color: var(--type-exit-bd); background: linear-gradient(#ffffff, var(--type-exit-bg)); }

/* Accent gauche plus visible par type */
.card.type-quiz_indices { border-left-color: var(--type-quiz-bd); }
.card.type-observation_silent { border-left-color: var(--type-observ-bd); }
.card.type-marche_info { border-left-color: var(--type-marche-bd); }
.card.type-mini_frise { border-left-color: var(--type-mini-bd); }
.card.type-cartes_connexion { border-left-color: var(--type-cartes-bd); }
.card.type-exit_ticket { border-left-color: var(--type-exit-bd); }

/* ---------------------------
   Espace élève: formulaire + rôles (2 colonnes)
   --------------------------- */
.student-form-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap:14px;
  align-items:start;
}
.student-form-side{
  position:sticky;
  top:12px;
}
.roles-panel{
  border:1px solid var(--corr-line);
  border-radius:14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:0 6px 18px rgba(36,54,86,0.06);
  padding:12px;
}
.roles-panel__title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:8px;
}
.role-drawer{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.role-drawer + .role-drawer{ margin-top:8px; }
.role-drawer summary{
  list-style:none;
  cursor:pointer;
  padding:10px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#0f172a;
}
.role-drawer summary::-webkit-details-marker{ display:none; }
.role-drawer[open] summary{
  background: linear-gradient(135deg, #eef2f7 0%, #fffdf3 100%);
}
.role-drawer__meta{
  margin-left:auto;
  font-weight:750;
  font-size:.85rem;
  color:var(--muted);
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  padding:2px 8px;
  border-radius:999px;
}
.role-drawer__body{
  padding:0 10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.role-drawer__members{
  font-size:.92rem;
  color:var(--muted);
}
.role-drawer__advice{
  padding:8px 10px;
  border-radius:10px;
  background:#fffdf7;
  border:1px solid #eadfd3;
}
.role-drawer__muted{
  font-size:.92rem;
  color:var(--muted);
}

@media (max-width: 820px){
  .student-form-layout{ grid-template-columns: 1fr; }
  .student-form-side{ position:static; }
}