/* css/espaces.css — en-tête commun (rangée des espaces) et pages d'espace (Cours, puis Tutoriels, Synthèses…)
   Complète /css/accueil-eleve.css (barre du haut, cartes). Classes préfixées esp-. */

/* ===== Rangée des espaces sous la barre du haut ===== */

.esp-nav { border-top:1px solid #E2E8F0; background:#F8FAFC }
.esp-nav-in { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none }
.esp-nav-in::-webkit-scrollbar { display:none }
.esp-nav a { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:11px 14px 9px; font-size:14px; font-weight:700; color:#334155;
  text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap }
.esp-nav a i { font-size:18px; color:var(--c) }
.esp-nav a:hover { background:#FFFFFF; color:#0F172A }
.esp-nav a.on { color:#0F172A; border-bottom-color:var(--c); background:color-mix(in srgb, var(--c) 9%, #FFFFFF) }
.esp-nav a .lock { font-size:13px; color:#94A3B8 }
.esp-nav .sep { width:1px; background:#CBD5E1; margin:10px 6px; flex:0 0 1px }

/* ===== Bandeau de l'espace ===== */
.esp-main { padding-top:22px; padding-bottom:60px; display:flex; flex-direction:column; gap:18px }
.esp-hero { --c:#0891B2; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; padding:22px 24px; border-radius:18px; background:#FFFFFF;
  border:1px solid #C3CEDB; box-shadow:inset 0 5px 0 var(--c) }
.esp-hero h1 { margin:0; display:flex; align-items:center; gap:12px; font-size:30px; font-weight:800; letter-spacing:-.02em }
.esp-hero h1 .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--c); color:#FFFFFF; font-size:24px }
.esp-hero p { margin:10px 0 0; color:#334155; font-size:15px; line-height:1.6; max-width:62ch }
.esp-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.esp-chip { padding:5px 11px; border-radius:999px; background:#F1F5F9; border:1px solid #CBD5E1; font-size:12.5px; font-weight:700; color:#334155 }
.esp-suivi { min-width:0; background:#ECFEFF; border:1.5px solid #67E8F9; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px }
.esp-suivi-k { font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0E7490 }
.esp-suivi-n { font-size:15px; font-weight:700; color:#0F172A } .esp-suivi-n b { font-size:26px; font-weight:800; color:#0E7490 }
.esp-barre { display:flex; height:10px; border-radius:6px; overflow:hidden; background:#CFFAFE }
.esp-barre i { display:block } .esp-barre .ok { background:#059669 } .esp-barre .cur { background:#0891B2 }
.esp-leg { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; font-weight:600; color:#334155 }
.esp-leg span::before { content:""; display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; background:var(--d) }
.esp-repr { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:#0E7490; color:#FFFFFF; text-decoration:none }
.esp-repr i { font-size:20px } .esp-repr span { display:flex; flex-direction:column; min-width:0 }
.esp-repr small { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#A5F3FC }
.esp-repr b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ===== Onglets des blocs + filtres ===== */
.esp-ctrl { display:flex; flex-direction:column; gap:12px; background:#E9EEF5; border:1px solid #C3CEDB; border-radius:18px; padding:14px }
.esp-blocs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px }
.esp-bloc { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:13px; background:#FFFFFF;
  border:1.5px solid #CBD5E1; border-left:6px solid var(--c) }
.esp-bloc b { font-size:15px; font-weight:800; color:#0F172A } .esp-bloc small { font-size:12px; font-weight:600; color:#475569 }
.esp-bloc em { font-style:normal; font-size:11.5px; font-weight:800; color:var(--c) }
.esp-bloc.on { background:var(--c); border-color:var(--c) } .esp-bloc.on b, .esp-bloc.on small, .esp-bloc.on em { color:#FFFFFF }
.esp-bloc.old { border-left-style:dashed }
.esp-filtres { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.esp-seg { display:flex; background:#FFFFFF; border:1px solid #CBD5E1; border-radius:11px; padding:3px }
.esp-seg button { all:unset; cursor:pointer; padding:7px 12px; border-radius:8px; font-size:13px; font-weight:700; color:#334155 }
.esp-seg button.on { background:#0F172A; color:#FFFFFF }
.esp-seg-k { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#475569 }
.esp-q { flex:1 1 220px; display:flex; align-items:center; gap:8px; background:#FFFFFF; border:1px solid #CBD5E1; border-radius:11px; padding:8px 12px; color:#64748B; font-size:13.5px }

/* ===== Parties et cartes ===== */
.esp-partie { background:#E9EEF5; border:1px solid #C3CEDB; border-radius:18px; overflow:hidden }
.esp-partie-h { display:flex; align-items:center; gap:12px; padding:12px 18px; background:#DCE3EC; border-bottom:1px solid #C3CEDB }
.esp-partie-h .l { min-width:30px; padding:0 7px; box-sizing:border-box; height:30px; border-radius:9px; display:grid; place-items:center; background:#0F172A; color:#FFFFFF; font-weight:800 }
.esp-partie-h b { font-size:16px; font-weight:800 } .esp-partie-h .n { margin-left:auto; font-size:12.5px; font-weight:700; color:#334155 }
.esp-cartes { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; padding:14px }
.esp-carte { display:flex; flex-direction:column; gap:8px; padding:14px 15px 12px; border-radius:14px; background:#FFFFFF; border:1.5px solid #CBD5E1;
  text-decoration:none; color:#0F172A; transition:border-color .15s, transform .15s }
.esp-carte:hover { border-color:#0891B2; transform:translateY(-2px) }
.esp-carte-h { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.esp-code { font:800 12px ui-monospace, Consolas, monospace; padding:3px 8px; border-radius:6px; background:#0F172A; color:#FFFFFF }
.esp-niv { font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:6px }
.esp-niv.s1 { background:#DCFCE7; color:#166534 } .esp-niv.s2 { background:#EDE9FE; color:#5B21B6 }
.esp-carte-t { font-size:15.5px; font-weight:800; line-height:1.3 }
.esp-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:#475569 }
.esp-meta i { font-size:14px; vertical-align:-2px; margin-right:3px }
.esp-etat { margin-top:auto; padding-top:8px; border-top:1px solid #E2E8F0; display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800 }
.esp-etat.ok { color:#047857 } .esp-etat.ok .pill { background:#059669; color:#FFFFFF }
.esp-etat .pill { padding:3px 9px; border-radius:999px }
.esp-etat.cur { color:#0E7490 } .esp-etat.cur .b { flex:1; height:7px; border-radius:4px; background:#CFFAFE; overflow:hidden }
.esp-etat.cur .b i { display:block; height:100%; background:#0891B2 }
.esp-etat.todo { color:#334155 } .esp-etat.todo .go { margin-left:auto; color:#0E7490 }
.esp-carte.ok { border-color:#86EFAC; background:#F7FEF9 }
.esp-carte.cur { border-color:#67E8F9; box-shadow:0 0 0 3px rgba(103,232,249,.35) }
.esp-carte.prep { border-style:dashed; background:#F8FAFC; color:#64748B; pointer-events:none }
.esp-carte.prep .esp-code { background:#94A3B8 } .esp-carte.prep .esp-etat { color:#64748B }
.esp-new { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:#FEF3C7; color:#92400E; margin-left:auto }

@media (max-width:900px) { .esp-hero { grid-template-columns:1fr } .esp-blocs { grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px) { .esp-hero { padding:18px } .esp-hero h1 { font-size:24px }
  .esp-cartes { grid-template-columns:1fr; padding:10px } .esp-blocs { grid-template-columns:1fr 1fr } .esp-bloc small { display:none } }

/* ===== Compléments ===== */
.esp-main [hidden], .esp-pans [hidden] { display:none !important }
.esp-pans { display:flex; flex-direction:column; gap:18px }
.esp-pan { display:flex; flex-direction:column; gap:18px }
.esp-q input { all:unset; flex:1; min-width:0; color:#0F172A; font-size:13.5px }
.esp-q input::placeholder { color:#64748B }
.esp-q:focus-within { border-color:#0891B2; box-shadow:0 0 0 3px rgba(8,145,178,.2) }
.esp-bloc:focus-visible, .esp-seg button:focus-visible, .esp-carte:focus-visible { outline:3px solid #0891B2; outline-offset:2px }
.esp-repr.vide { background:#CFFAFE; color:#164E63 } .esp-repr.vide small { color:#0E7490 }
.esp-code.old { background:#475569 }
.esp-vide { display:flex; align-items:flex-start; gap:14px; padding:20px 22px; border-radius:16px; background:#FFFFFF; border:1.5px dashed #94A3B8; color:#334155 }
.esp-vide > i { font-size:26px; color:#64748B } .esp-vide b { display:block; font-size:15px; color:#0F172A } .esp-vide span { display:block; margin-top:4px; font-size:14px }
.esp-note { margin:0; display:flex; gap:8px; align-items:center; padding:10px 14px; border-radius:12px; background:#F1F5F9; border:1px solid #CBD5E1; color:#334155; font-size:13.5px; font-weight:600 }
@media (prefers-reduced-motion:reduce) { .esp-carte { transition:none } .esp-carte:hover { transform:none } }

/* ===== v2 : score du quiz sur les cartes, bandeau et page du fil rouge ===== */
.esp-quiz { padding:1px 8px; border-radius:999px; color:#FFFFFF !important; font-weight:800 }
.esp-quiz i { color:#FFFFFF } .esp-quiz.ok { background:#059669 } .esp-quiz.moy { background:#D97706 } .esp-quiz.ko { background:#DC2626 }
.esp-fr { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; text-decoration:none; color:#FFFFFF;
  background:linear-gradient(100deg, #115E59, #0D9488); box-shadow:0 10px 24px -16px rgba(13,148,136,.9) }
.esp-fr > i { font-size:28px; width:50px; height:50px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.16) }
.esp-fr span { flex:1; min-width:0 } .esp-fr b { display:block; font-size:16px } .esp-fr small { display:block; font-size:13.5px; color:#CCFBF1 }
.esp-fr em { font-style:normal; font-weight:800; font-size:14px; white-space:nowrap; padding:8px 12px; border-radius:10px; background:#FFFFFF; color:#115E59 }
.esp-fr:hover em { background:#CCFBF1 }
@media (max-width:700px) { .esp-fr { flex-wrap:wrap } .esp-fr em { width:100%; text-align:center } }

.frp-regles p { display:flex; gap:10px; align-items:flex-start; margin:0; font-size:13.5px; line-height:1.5; color:#134E4A; text-align:justify }
.frp-regles i { font-size:19px; color:#0D9488; margin-top:1px } .frp .esp-suivi { background:#F0FDFA; border-color:#5EEAD4 } .frp .esp-suivi-k { color:#115E59 }
.frp .esp-hero p { text-align:justify; hyphens:auto }
.frp-topo { margin:0; padding:16px; border-radius:18px; background:#FFFFFF; border:1px solid #C3CEDB }
.frp-topo svg { display:block; width:100%; height:auto; font-family:Inter, system-ui, sans-serif }
.frp-topo figcaption { margin-top:8px; text-align:center; font-size:13.5px; color:#475569; font-style:italic }
.frp-sem { display:flex; flex-direction:column; gap:10px }
.frp-sem h2 { display:flex; align-items:center; gap:10px; margin:6px 0 0; font-size:19px; font-weight:800; color:#0F172A }
.frp-sem h2 span { padding:3px 10px; border-radius:8px; background:#0F172A; color:#FFFFFF; font-size:13px }
.frp-l { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px }
.frp-e { display:flex; gap:14px; padding:14px 16px; border-radius:14px; background:#FFFFFF; border:1.5px solid #5EEAD4; box-shadow:inset 5px 0 0 #0D9488 }
.frp-e.prep { border-color:#CBD5E1; box-shadow:inset 5px 0 0 #94A3B8; background:#F8FAFC }
.frp-n { flex-shrink:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#0D9488; color:#FFFFFF; font-weight:900; font-size:17px }
.frp-e.prep .frp-n { background:#94A3B8 }
.frp-e > div { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px }
.frp-t { display:flex; align-items:center; gap:8px; flex-wrap:wrap } .frp-t b { font-size:15px; color:#0F172A }
.frp-e p { margin:0; font-size:13.5px; line-height:1.5; color:#334155; text-align:justify; hyphens:auto }
.frp-f { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; font-size:12.5px }
.frp-f span { font:700 12px ui-monospace, Consolas, monospace; color:#115E59; background:#CCFBF1; padding:2px 7px; border-radius:6px }
.frp-f span i { margin-right:4px } .frp-f a { font-weight:800; color:#0D9488; text-decoration:none } .frp-f em { font-style:normal; color:#64748B; font-weight:700 }