/*
 * Léon — Studio pédagogique
 * Fichier : assets/css/espace.css — l'espace élève (5.6.0) : en-tête, onglets, tableau de bord en modules, « À faire »,
 * planning, projets, récompenses, « Mon espace » ; téléphone (onglets en bas de l'écran), thèmes et préférences de l'élève
 * Version : 5.6.0 (2026-10-10)
 * © 2026 Émile et Léon SNYERS — tous droits réservés (licence à préciser avant diffusion)
 *
 * Tout passe par les variables de la charte (app.css, thèmes de app/lib/themes.php) : le thème sombre, le contraste
 * renforcé et les autres thèmes s'appliquent sans règle à part. Couleur d'un module ou d'une pastille : classes c-… et t-…
 * (bleu, sarcelle, vert, ambre, orange, violet, rouge, rose, ardoise), tirées des couleurs de texte de la charte (lisibles
 * sur fond clair comme sur fond sombre). Les animations disparaissent avec « Animations réduites » (Mon espace) ou le
 * réglage de l'appareil.
 * 5.6.0 (relecture) : repère --header-h à 0 sans barre d'onglets (visiteur, mot de passe provisoire) ; Discussion de l'élève :
 * la zone des messages raccourcit de la hauteur de la barre d'onglets (zone de saisie à la même place qu'en 5.5).
 */

/* ---------- Repères de l'espace élève ---------- */
html.front {
  --esp-radius: 14px;
  --esp-radius-sm: 10px;
  --esp-gap: 18px;
  --esp-nav-h: 52px;
  --esp-shadow: 0 1px 2px rgba(20, 32, 60, .05), 0 4px 14px rgba(20, 32, 60, .06);
  --esp-shadow-hover: 0 10px 26px rgba(20, 32, 60, .12);
  --esp-ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 0px; /* sans barre d'onglets (visiteur, mot de passe provisoire) : rien ne reste en haut au défilement */
  scroll-behavior: smooth;
}
/* seule la barre d'onglets (52 px et ses deux bordures) reste visible au défilement : repère des éléments collants */
html.front.has-esp-nav { --header-h: 54px; }
.c-blue, .t-blue { --mc: var(--tx-blue); }
.c-teal, .t-teal { --mc: var(--tx-teal); }
.c-green, .t-green { --mc: var(--tx-green); }
.c-amber, .t-amber { --mc: var(--c-warning); }
.c-orange, .t-orange { --mc: var(--tx-orange); }
.c-purple, .t-purple { --mc: var(--tx-purple); }
.c-red, .t-red { --mc: var(--tx-red); }
.c-pink, .t-pink { --mc: var(--tx-pink); }
.c-slate, .t-slate { --mc: var(--tx-grey); }
:is(.c-blue, .t-blue, .c-teal, .t-teal, .c-green, .t-green, .c-amber, .t-amber, .c-orange, .t-orange, .c-purple, .t-purple, .c-red, .t-red, .c-pink, .t-pink, .c-slate, .t-slate) {
  --mc-soft: color-mix(in srgb, var(--mc) 12%, var(--c-surface));
}

/* ---------- En-tête : titre du site, date, cloche, Mon espace ---------- */
.site-header.esp-header { position: relative; z-index: 51; border-bottom: 0; }
.esp-header .inner.esp-top { height: auto; min-height: 64px; padding-block: 8px; gap: 16px; }
.esp-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.esp-today { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--c-surface-2);
  color: var(--c-muted); font-family: var(--font-title); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.esp-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--c-border-soft); background: var(--c-surface); color: var(--c-title); cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s; }
.esp-icon-btn:hover, .esp-icon-btn[aria-expanded="true"] { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.esp-icon-btn .ic { width: 1.25em; height: 1.25em; }
.esp-dot { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-danger); color: var(--c-surface); border: 2px solid var(--c-surface); font: 800 .68rem/1 var(--font-title); }
.esp-me { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; color: var(--c-title);
  transition: background .15s, border-color .15s; }
.esp-me:hover, .esp-me.is-active { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); color: var(--c-title); }
.esp-me-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.esp-me-txt strong { font-family: var(--font-title); font-size: .95rem; }
.esp-me-txt small { color: var(--c-muted); font-size: .76rem; white-space: nowrap; }
.esp-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--av, #1A58B8); color: #FFFFFF; font: 800 .88rem/1 var(--font-title); letter-spacing: .02em; }
.esp-avatar.h-0 { --av: #1A58B8; } .esp-avatar.h-1 { --av: #18703E; } .esp-avatar.h-2 { --av: #6B4FA3; } .esp-avatar.h-3 { --av: #A3420A; }
.esp-avatar.h-4 { --av: #0C6767; } .esp-avatar.h-5 { --av: #A72D63; } .esp-avatar.h-6 { --av: #3E4BB0; } .esp-avatar.h-7 { --av: #7A4A21; }
.esp-avatar.is-big { width: 84px; height: 84px; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(20, 32, 60, .18); }

/* Cloche des rappels */
.esp-bell { position: relative; }
.menu-pop.esp-bell-pop { width: min(390px, calc(100vw - 24px)); padding: 0; right: -6px; }
.esp-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-border-soft); }
.esp-pop-head strong { font-family: var(--font-title); color: var(--c-title); }
.menu-pop .esp-pop-head a { width: auto; padding: 4px 8px; font-size: .82rem; gap: 5px; }
.esp-pop-body { max-height: min(430px, 70vh); overflow: auto; padding: 6px; overscroll-behavior: contain; }
.esp-pop-wait { display: flex; gap: 8px; align-items: center; padding: 10px; margin: 0; }
.menu-pop a.esp-notif { align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 10px; line-height: 1.35; }
.esp-notif .esp-notif-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-soft); color: var(--mc); }
.esp-notif small { display: block; color: var(--c-muted); font-size: .76rem; margin-top: 2px; }
.esp-notif.is-new { background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); }
.esp-notif.is-new .esp-notif-txt::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--c-accent); vertical-align: middle; }
.esp-pop-empty { display: flex; gap: 10px; align-items: center; padding: 14px; color: var(--c-muted); margin: 0; }

/* ---------- Barre d'onglets (reste visible au défilement) ---------- */
.esp-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--c-border-soft); border-bottom: 1px solid var(--c-border-soft); transition: box-shadow .2s; }
.esp-nav.is-stuck { box-shadow: 0 8px 20px rgba(20, 32, 60, .08); }
.esp-nav .inner { margin: 0 auto; padding: 0 var(--gut); }
.esp-tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; height: var(--esp-nav-h); align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.esp-tabs::-webkit-scrollbar { display: none; }
.esp-tabs li { display: flex; }
.esp-tabs li.is-end { margin-left: auto; }
.esp-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--c-muted); text-decoration: none; white-space: nowrap;
  font-family: var(--font-title); font-weight: 600; font-size: .95rem; transition: color .15s, background .15s; }
.esp-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--c-accent);
  transform: scaleX(0); transition: transform .25s var(--esp-ease); }
.esp-tab:hover { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent-soft) 70%, transparent); }
.esp-tab.is-active { color: var(--c-accent); }
.esp-tab.is-active::after { transform: scaleX(1); }
.esp-tab .ic { width: 1.15em; height: 1.15em; }
.esp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--c-accent); color: var(--c-accent-ink); font: 800 .72rem/1 var(--font-title); }
.esp-count:is(.t-teal, .t-green, .t-amber, .t-slate, .t-purple) { background: var(--mc); color: var(--c-surface); }
.btn .esp-count { margin-left: 2px; }

/* ---------- Mise en page commune ---------- */
.esp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.esp-page-head > div { min-width: 0; }
.esp-crumbs ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: .9rem; }
.esp-crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); min-width: 0; }
.esp-crumbs li + li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 4px 0 2px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; }
.esp-crumbs a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; color: var(--c-text); text-decoration: none; transition: background .15s, color .15s; }
.esp-crumbs a:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.esp-crumbs a .ic { color: var(--c-accent); }
.esp-crumbs [aria-current="page"] > span { display: inline-block; max-width: 46ch; padding: 3px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-title); font-weight: 700; }
.esp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--mc-soft, var(--c-accent-soft)); color: var(--mc, var(--c-title));
  font: 700 .76rem/1.3 var(--font-title); white-space: nowrap; }
.esp-chip .ic { width: 1em; height: 1em; }
.esp-bar { flex: 1 1 auto; display: block; min-width: 60px; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--bar, var(--c-accent)) 16%, var(--c-surface-2)); }
.esp-bar > i { display: block; height: 100%; width: var(--pct); border-radius: inherit; background: var(--bar, var(--c-accent)); transform-origin: left center;
  animation: esp-grow .9s var(--esp-ease) both; }
.esp-bar.t-green { --bar: var(--c-success); }
.esp-bar.t-amber { --bar: var(--c-warning); }
.esp-section { margin-bottom: var(--esp-gap); }
.card.esp-section + .card.esp-section { margin-top: 0; }
.esp-section-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 1.12rem; }
.esp-section-title .ic { color: var(--c-accent); }
details.esp-section > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.esp-section > summary::-webkit-details-marker { display: none; }
details.esp-section[open] > summary { margin-bottom: 12px; }
.esp-section.is-quiet { background: var(--c-surface-2); box-shadow: none; }
.esp-note { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.esp-pad { padding: 4px 2px; margin: 0; }
.esp-filter-empty { display: flex; align-items: center; gap: 8px; padding: 16px 4px; }
.esp-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--esp-gap); align-items: start; }
.esp-two-side { display: flex; flex-direction: column; gap: var(--esp-gap); }
.esp-two-side > .card + .card { margin-top: 0; }

/* États vides, annonces, retours */
.esp-empty { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--c-surface-2); border: 1px dashed var(--c-border); }
.esp-empty.is-happy { background: color-mix(in srgb, var(--c-success) 8%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-success) 26%, transparent); }
.esp-empty.is-soon { background: repeating-linear-gradient(135deg, var(--c-surface-2) 0 10px, color-mix(in srgb, var(--c-border-soft) 45%, var(--c-surface-2)) 10px 20px); }
.esp-empty-big { padding: 22px; }
.esp-empty-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface); color: var(--c-accent); box-shadow: var(--shadow); }
.esp-empty-ic .ic { width: 24px; height: 24px; }
.esp-empty.is-happy .esp-empty-ic { color: var(--c-success); }
.esp-empty strong { display: block; margin-bottom: 2px; font-family: var(--font-title); color: var(--c-title); }
.esp-empty p { margin: 0 0 8px; color: var(--c-muted); font-size: .92rem; }
.esp-empty p:last-child { margin-bottom: 0; }
.esp-quote { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--c-surface-2);
  border-left: 3px solid var(--tx-teal); font-size: .9rem; font-style: italic; color: var(--c-text); }
.esp-quote .ic { flex: none; color: var(--tx-teal); margin-top: 2px; font-style: normal; }
.esp-feedback { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--tx-teal) 9%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--tx-teal) 25%, transparent); }
.esp-feedback > .ic { flex: none; color: var(--tx-teal); width: 1.3em; height: 1.3em; margin-top: 2px; }
.esp-feedback strong { font-family: var(--font-title); color: var(--c-title); font-size: .9rem; }
.esp-feedback p { margin: 4px 0 0; }
.esp-public { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--esp-gap); }
.esp-public > div { flex: 1 1 260px; }
.esp-public strong { font-family: var(--font-title); color: var(--c-title); }
.esp-public p { margin: 2px 0 0; color: var(--c-muted); }

/* Boutons segmentés (période du graphique, filtres) */
.esp-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin-bottom: 12px; border-radius: 11px; background: var(--c-surface-2); border: 1px solid var(--c-border-soft); }
.esp-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--c-muted);
  font: 600 .86rem/1.2 var(--font-title); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.esp-seg-btn:hover { color: var(--c-title); }
.esp-seg-btn.is-on { background: var(--c-surface); color: var(--c-title); box-shadow: var(--shadow); }
.esp-filters { margin-bottom: var(--esp-gap); }

/* ---------- Accueil : bandeau de bienvenue ---------- */
.esp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: 24px; align-items: center;
  margin-bottom: var(--esp-gap); padding: 26px 28px; border-radius: 20px; box-shadow: var(--esp-shadow);
  border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-border-soft));
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tx-teal) 14%, transparent) 0, transparent 55%),
              linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)) 0%, var(--c-surface) 72%); }
.esp-hero::before, .esp-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.esp-hero::before { width: 260px; height: 260px; right: -70px; bottom: -120px; background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
.esp-hero::after { width: 120px; height: 120px; right: 26%; top: -60px; background: color-mix(in srgb, var(--tx-teal) 10%, transparent); }
.esp-hero > * { position: relative; z-index: 1; }
.esp-kicker { margin: 0; color: var(--c-accent); font: 700 .8rem/1.3 var(--font-title); letter-spacing: .08em; text-transform: uppercase; }
.esp-hero h1 { margin: 4px 0 6px; font-size: clamp(1.65rem, 1.15rem + 1.5vw, 2.35rem); text-transform: none; letter-spacing: -.015em; }
.esp-headline { margin: 0 0 14px; max-width: 62ch; font-size: 1.1rem; color: var(--c-text); }
.esp-teacher-note { display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border-soft); border-left: 4px solid var(--c-accent); }
.esp-teacher-note .ic { flex: none; color: var(--c-accent); margin-top: 3px; }
.esp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.esp-hero-actions .btn { min-height: 44px; }
.esp-hero-actions .btn span { white-space: normal; text-align: left; }
.esp-resume { max-width: 100%; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.esp-hero-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.esp-hero-stats li, .esp-tiles li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border-soft); }
.esp-hero-stats li .ic, .esp-tiles li .ic { grid-row: span 2; width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--mc-soft); color: var(--mc); }
.esp-hero-stats strong, .esp-tiles strong { font: 800 1.5rem/1.1 var(--font-title); color: var(--c-title); }
.esp-hero-stats span, .esp-tiles span { font-size: .82rem; color: var(--c-muted); line-height: 1.25; }
.esp-tiles { list-style: none; margin: 0 0 var(--esp-gap); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.esp-tiles li { box-shadow: var(--esp-shadow); }
.esp-tiles.is-compact { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esp-tiles.is-compact li { box-shadow: none; background: var(--c-surface-2); }

/* ---------- Tableau de bord : grille de modules (12 colonnes, chaque ligne remplie par espace_layout) ---------- */
.esp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--esp-gap); align-items: stretch; }
.esp-mod { position: relative; grid-column: span var(--sd, 6); min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--esp-radius); box-shadow: var(--esp-shadow);
  animation: esp-rise .5s var(--esp-ease) both; transition: box-shadow .2s, border-color .2s; }
.esp-mod::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mc), color-mix(in srgb, var(--mc) 30%, var(--c-surface))); }
.esp-mod:hover { box-shadow: var(--esp-shadow-hover); border-color: color-mix(in srgb, var(--mc) 22%, var(--c-border-soft)); }
.esp-mod:nth-child(2) { animation-delay: .04s; } .esp-mod:nth-child(3) { animation-delay: .08s; } .esp-mod:nth-child(4) { animation-delay: .12s; }
.esp-mod:nth-child(5) { animation-delay: .16s; } .esp-mod:nth-child(6) { animation-delay: .2s; } .esp-mod:nth-child(n+7) { animation-delay: .24s; }
.esp-mod-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 10px; }
.esp-mod-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-soft); color: var(--mc); }
.esp-mod-ic .ic { width: 1.2em; height: 1.2em; }
.esp-mod-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; }
.esp-mod-more { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font: 600 .85rem/1.2 var(--font-title); text-decoration: none; }
.esp-mod-more:hover { text-decoration: underline; }
.esp-mod-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 4px 18px 18px; }
.esp-mod.st-unavailable { background: var(--c-surface-2); box-shadow: none; }
.esp-mod.st-unavailable::before { background: var(--c-border); }
.esp-more-line { margin: 10px 0 0; font: 600 .88rem/1.3 var(--font-title); }
.esp-more-line a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.esp-group-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font: 700 .76rem/1.3 var(--font-title); letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); }
.esp-group-title span { padding: 1px 7px; border-radius: 8px; background: var(--c-surface-2); letter-spacing: 0; }
.esp-group-title.g-today { color: var(--c-danger); }
.esp-list + .esp-group-title { margin-top: 14px; }

/* Éléments « À faire » */
.esp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--c-border-soft); border-radius: 12px; background: var(--c-surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.esp-item:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border-soft)); box-shadow: var(--esp-shadow-hover); transform: translateY(-1px); }
.esp-item::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--urg, transparent); }
.esp-item.u-today, .esp-item.u-late { --urg: var(--c-danger); }
.esp-item.u-soon { --urg: var(--c-warning); }
.esp-item.u-week { --urg: var(--c-accent); }
.esp-item-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent-soft); color: var(--c-accent); }
.esp-item.k-work .esp-item-ic, .esp-work-card .esp-item-ic { background: color-mix(in srgb, var(--tx-orange) 12%, var(--c-surface)); color: var(--tx-orange); }
.esp-item.s-done .esp-item-ic, .esp-item.s-sent .esp-item-ic { background: var(--c-success-soft); color: var(--c-success); }
.esp-item.s-missed { opacity: .78; }
.esp-item-main { min-width: 0; }
.esp-item-title { font-family: var(--font-title); font-weight: 700; color: var(--c-title); text-decoration: none; line-height: 1.3; }
.esp-item-title:hover { color: var(--c-accent); text-decoration: underline; }
.esp-item-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; font-size: .84rem; color: var(--c-muted); }
.esp-due { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.esp-due.u-today, .esp-due.u-late { color: var(--c-danger); }
.esp-due.u-soon { color: var(--c-warning); }
.esp-due.u-week { color: var(--c-accent); }
.esp-due small { font-weight: 400; color: var(--c-muted); }
.esp-kind { font-weight: 600; }
.esp-ctx { color: var(--c-muted); }
.esp-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.esp-item-progress { display: flex; align-items: center; gap: 10px; max-width: 380px; margin-top: 8px; }
.esp-item-progress small { color: var(--c-muted); font-size: .78rem; white-space: nowrap; }
.esp-item-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .88rem; }
.esp-item-note .ic { color: var(--c-accent); }

/* Prochain rendez-vous */
.esp-next { display: flex; align-items: center; gap: 14px; padding: 4px; border-radius: 12px; color: inherit; text-decoration: none; }
.esp-next:hover .esp-next-main strong { color: var(--c-accent); text-decoration: underline; }
.esp-datebox { width: 74px; flex: none; display: flex; flex-direction: column; overflow: hidden; text-align: center; border-radius: 15px;
  background: var(--c-surface); border: 1px solid var(--c-border-soft); box-shadow: var(--esp-shadow); }
.esp-datebox small:first-child { padding: 4px 0; background: var(--mc); color: var(--c-surface); font: 700 .72rem/1.2 var(--font-title); letter-spacing: .06em; text-transform: uppercase; }
.esp-datebox strong { padding-top: 4px; font: 800 1.95rem/1.05 var(--font-title); color: var(--c-title); }
.esp-datebox small:last-child { padding-bottom: 6px; color: var(--c-muted); font-size: .76rem; }
.esp-next-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.esp-next-main strong { font: 700 1.05rem/1.25 var(--font-title); color: var(--c-title); }
.esp-next-main .muted { font-size: .86rem; }
.esp-countdown { display: inline-flex; align-items: center; gap: 5px; color: var(--c-accent); font: 700 .86rem/1.2 var(--font-title); }
.esp-countdown.is-near { color: var(--c-danger); }

/* Mes échéances : sept jours */
.esp-strip { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.esp-strip li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 8px; border-radius: 11px; background: var(--c-surface-2); cursor: default; }
.esp-strip li.is-weekend { background: color-mix(in srgb, var(--c-surface-2) 55%, var(--c-surface)); }
.esp-strip li.has-ev { background: color-mix(in srgb, var(--c-accent) 9%, var(--c-surface)); }
.esp-strip li.is-today { background: var(--c-accent); }
.esp-strip small { color: var(--c-muted); font: 700 .7rem/1 var(--font-title); }
.esp-strip strong { font: 800 1.05rem/1.2 var(--font-title); color: var(--c-title); }
.esp-strip li.is-today :is(small, strong) { color: var(--c-accent-ink); }
.esp-strip-dots { display: flex; gap: 3px; height: 6px; }
.esp-strip-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mc); }
.esp-strip li.is-today .esp-strip-dots i { background: var(--c-accent-ink); }
.esp-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.esp-agenda li { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px;
  border-left: 3px solid var(--mc); background: var(--c-surface-2); }
.esp-agenda-date { grid-row: span 2; font: 700 .8rem/1.3 var(--font-title); color: var(--c-title); }
.esp-agenda a, .esp-agenda li > span:not(.esp-agenda-date) { font-weight: 700; color: var(--c-title); text-decoration: none; line-height: 1.3; }
.esp-agenda a:hover { color: var(--c-accent); text-decoration: underline; }
.esp-agenda small { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: .78rem; }
.esp-agenda small .ic { color: var(--mc); }

/* Ma progression : chiffres, objectif, graphique en colonnes */
.esp-prog-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.esp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--c-surface-2); min-width: 0; }
.esp-kpi-label { color: var(--c-muted); font: 700 .76rem/1.3 var(--font-title); }
.esp-kpi-val { font: 800 1.6rem/1.1 var(--font-title); color: var(--c-title); }
.esp-kpi-sub { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: .78rem; line-height: 1.3; }
.esp-kpi-sub.is-up { color: var(--c-success); font-weight: 700; }
.esp-goal { flex-direction: row; align-items: center; gap: 10px; }
.esp-goal-txt { display: flex; flex-direction: column; line-height: 1.2; }
.esp-goal-txt strong { font: 800 1.25rem/1.1 var(--font-title); color: var(--c-title); }
.esp-goal-txt small { color: var(--c-muted); font-size: .78rem; }
.esp-goal.is-done .esp-goal-txt small { color: var(--c-success); font-weight: 700; }
.esp-ring { width: 54px; height: 54px; flex: none; transform: rotate(-90deg); }
.esp-ring circle { fill: none; stroke-width: 4; }
.esp-ring .trk { stroke: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface-2)); }
.esp-ring .val { stroke: var(--c-accent); stroke-linecap: round; stroke-dasharray: var(--ring) 100; animation: esp-ring 1s var(--esp-ease) both; }
.esp-goal.is-done .esp-ring .val { stroke: var(--c-success); }
.esp-chart-wrap { margin: 0; }
.esp-chart { position: relative; height: 160px; margin: 6px 0 4px; }
.esp-chart-grid { position: absolute; inset: 0 0 20px 26px; }
.esp-chart-grid span { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--c-border-soft); }
.esp-chart-grid b { position: absolute; left: -26px; top: -.62em; width: 20px; text-align: right; color: var(--c-muted); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.esp-chart-cols { position: absolute; inset: 0 0 0 26px; display: flex; align-items: stretch; gap: 2px; }
.esp-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 20px; }
.esp-col i { display: block; width: 100%; max-width: 24px; height: var(--h); background: var(--c-accent); border-radius: 4px 4px 0 0; transform-origin: bottom center;
  animation: esp-col .8s var(--esp-ease) both; transition: filter .15s; }
.esp-col.is-zero i { height: 2px; border-radius: 1px; background: var(--c-border); }
.esp-col em { order: -1; margin-bottom: 3px; font: 800 .72rem/1 var(--font-title); font-style: normal; color: var(--c-title); } /* valeur posée au-dessus de la colonne */
.esp-col small { position: absolute; bottom: 0; height: 16px; color: var(--c-muted); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.esp-col.is-today small { color: var(--c-title); font-weight: 800; }
.esp-col:hover i { filter: brightness(1.15) saturate(1.1); }
.esp-col[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%); padding: 4px 8px;
  border-radius: 6px; background: var(--c-text); color: var(--c-surface); font-size: .74rem; font-weight: 600; white-space: nowrap; pointer-events: none; }
.esp-col:nth-child(-n+2)[data-tip]:hover::after { left: 0; transform: none; }
.esp-col:nth-last-child(-n+2)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.esp-chart-table { margin-top: 6px; font-size: .86rem; }
.esp-chart-table summary { cursor: pointer; color: var(--c-accent); font-family: var(--font-title); font-weight: 600; width: max-content; }
.esp-chart-table .table-wrap { margin-top: 8px; max-height: 240px; overflow: auto; }
.esp-prog-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 0; }

/* Travaux et projets */
.esp-works, .esp-work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-works > li { padding: 12px 14px; border: 1px solid var(--c-border-soft); border-radius: 12px; }
.esp-work-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.esp-work-head > a { font-family: var(--font-title); font-weight: 700; color: var(--c-title); text-decoration: none; }
.esp-work-head > a:hover { color: var(--c-accent); text-decoration: underline; }
.esp-work-head .grow { min-width: 0; display: flex; flex-direction: column; }
.esp-work-head .esp-ctx { font-size: .82rem; }
.esp-work-card { padding: 14px 16px; border: 1px solid var(--c-border-soft); border-radius: 14px; background: var(--c-surface); transition: box-shadow .15s, border-color .15s; }
.esp-work-card:hover { box-shadow: var(--esp-shadow-hover); border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-border-soft)); }
.esp-work-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.esp-steps { list-style: none; display: flex; margin: 10px 0 4px; padding: 0; }
.esp-steps li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--c-muted); font-size: .74rem; font-weight: 600; }
.esp-steps li span { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-border); }
.esp-steps li::before { content: ''; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--c-border); }
.esp-steps li:first-child::before { display: none; }
.esp-steps li.is-done { color: var(--c-title); }
.esp-steps li.is-done span { background: var(--c-success); border-color: var(--c-success); }
.esp-steps li.is-done::before { background: var(--c-success); }
.esp-steps li.is-current span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success) 25%, transparent); }
.esp-steps.is-big li { font-size: .8rem; }
.esp-steps.is-big li span { width: 18px; height: 18px; }
.esp-steps.is-big li::before { top: 8px; }
.esp-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-groups li { display: flex; align-items: center; gap: 10px; }
.esp-groups li > div { display: flex; flex-direction: column; min-width: 0; }
.esp-groups strong { font-family: var(--font-title); color: var(--c-title); }
.esp-groups small { color: var(--c-muted); font-size: .82rem; }
.esp-slot { border-style: dashed; }
.esp-slot.c-orange .esp-section-title .ic, .esp-slot .esp-section-title .ic { color: var(--mc); }

/* Résultats et retours récents */
.esp-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-feed li { display: flex; gap: 11px; align-items: flex-start; }
.esp-feed-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-soft); color: var(--mc); }
.esp-feed li > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.esp-feed a { font-family: var(--font-title); font-weight: 700; color: var(--c-title); text-decoration: none; line-height: 1.3; }
.esp-feed a:hover { color: var(--c-accent); text-decoration: underline; }
.esp-feed-text { font-size: .88rem; }
.esp-feed small { font-size: .76rem; }

/* Conseil du jour */
.esp-tip { position: relative; flex: 1 1 auto; padding: 14px 16px 14px 18px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-warning) 12%, var(--c-surface)), var(--c-surface) 80%);
  border: 1px solid color-mix(in srgb, var(--c-warning) 22%, var(--c-border-soft)); transition: opacity .25s; }
.esp-tip.is-swap { opacity: 0; }
.esp-tip-from { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px; color: var(--c-warning); font: 700 .74rem/1.2 var(--font-title); text-transform: uppercase; letter-spacing: .06em; }
.esp-tip-title { display: block; margin-bottom: 4px; font: 800 1.02rem/1.3 var(--font-title); color: var(--c-title); }
.esp-tip-text { margin: 0; }
.esp-tip-next { align-self: flex-start; margin-top: 8px; }

/* Messages */
.esp-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.esp-msg-big { display: flex; align-items: baseline; gap: 8px; }
.esp-msg-big strong { font: 800 2rem/1 var(--font-title); color: var(--tx-teal); }
.esp-msg-big small { color: var(--c-muted); font-weight: 600; }
.esp-msg p { margin: 0; }
.esp-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.esp-feature p { margin: 0; }

/* Récompenses */
.esp-rw { display: flex; flex-direction: column; gap: 10px; }
.esp-rw-level { display: flex; align-items: center; gap: 12px; }
.esp-rw-level > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.esp-rw-level strong { font-family: var(--font-title); color: var(--c-title); }
.esp-rw-badge { width: 56px; height: 56px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px;
  background: linear-gradient(135deg, #B45309, #9A3412); color: #FFFFFF; font: 800 1.5rem/1 var(--font-title); box-shadow: 0 6px 16px rgba(154, 52, 18, .28); transform: rotate(-4deg); }
.esp-rw-badge.is-big { width: 92px; height: 92px; border-radius: 26px; font-size: 2.5rem; }
.esp-rw-streak { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--c-muted); }
.esp-rw-streak.is-on { color: var(--tx-orange); }
.esp-rw-streak.is-on strong { font: 800 1.2rem/1 var(--font-title); }
.esp-rw-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.esp-rw-mini li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 .78rem/1.2 var(--font-title);
  background: color-mix(in srgb, var(--c-warning) 13%, var(--c-surface)); color: var(--c-title); }
.esp-rw-mini li .ic { color: var(--c-warning); }
.esp-rw-mini li.is-next { background: var(--c-surface-2); color: var(--c-muted); border: 1px dashed var(--c-border); }
.esp-rw-mini li.is-next .ic { color: var(--c-muted); }
.esp-rw-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto); gap: 22px; align-items: center; margin-bottom: var(--esp-gap); }
.esp-rw-hero-main h2 { margin: 2px 0 8px; font-size: 1.6rem; }
.esp-rw-hero-main .esp-bar { max-width: 460px; height: 10px; }
.esp-rw-hero-main p { margin: 6px 0 0; }
.esp-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.esp-badges li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border-soft); }
.esp-badges li strong { font-family: var(--font-title); color: var(--c-title); }
.esp-badges li small { font-size: .82rem; color: var(--c-muted); }
.esp-badges li .esp-bar { margin-top: 6px; flex: none; }
.esp-badge-ic { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
  background: var(--c-surface); color: var(--c-muted); border: 2px dashed var(--c-border); }
.esp-badges li.is-earned { background: linear-gradient(160deg, color-mix(in srgb, var(--c-warning) 13%, var(--c-surface)), var(--c-surface)); border-color: color-mix(in srgb, var(--c-warning) 30%, transparent); }
.esp-badges li.is-earned .esp-badge-ic { border: 0; background: linear-gradient(135deg, #B45309, #9A3412); color: #FFFFFF; box-shadow: 0 4px 12px rgba(154, 52, 18, .25); }

/* Raccourcis */
.esp-shortcuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.esp-shortcuts a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-border-soft); background: var(--c-surface);
  color: var(--c-title); text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.esp-shortcuts a:hover { border-color: var(--mc); background: var(--mc-soft); transform: translateY(-1px); }
.esp-sc-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-soft); color: var(--mc); }
.esp-shortcuts strong { display: block; font-family: var(--font-title); font-size: .92rem; line-height: 1.2; }
.esp-shortcuts small { display: block; color: var(--c-muted); font-size: .76rem; line-height: 1.3; }
.esp-shortcuts a > span:last-child { min-width: 0; }

/* Mes cours (module et page) */
.esp-courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.esp-course { display: flex; flex-direction: column; border: 1px solid var(--c-border-soft); border-radius: 14px; overflow: hidden; background: var(--c-surface);
  border-top: 4px solid var(--mc); transition: box-shadow .15s, transform .15s; }
.esp-course:hover { box-shadow: var(--esp-shadow-hover); transform: translateY(-2px); }
.esp-course-link { display: flex; align-items: center; gap: 12px; padding: 14px; color: inherit; text-decoration: none; }
.esp-course-ring { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--mc) calc(var(--pct) * 1%), color-mix(in srgb, var(--mc) 15%, var(--c-surface-2)) 0); }
.esp-course-ring > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); color: var(--c-title); font: 800 .74rem/1 var(--font-title); }
.esp-course-ring .ic { color: var(--mc); }
.esp-course-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.esp-course-main strong { font: 800 1rem/1.25 var(--font-title); color: var(--c-title); text-transform: var(--title-case, uppercase); font-variant-caps: var(--title-caps, normal); }
.esp-course-main small { color: var(--c-muted); font-size: .8rem; }
.esp-course-next { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 9px 14px; border-top: 1px solid var(--c-border-soft); background: var(--c-surface-2);
  color: var(--c-accent); font-size: .84rem; font-weight: 600; text-decoration: none; }
.esp-course-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-course-next:hover { text-decoration: underline; }
.esp-search { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.esp-search .ic { position: absolute; left: 12px; color: var(--c-muted); pointer-events: none; }
.esp-search .input { padding-left: 38px; border-radius: 999px; }
.esp-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--esp-gap); align-items: start; }
.esp-course-card { position: relative; padding: 18px 20px; border-radius: var(--esp-radius); background: var(--c-surface); border: 1px solid var(--c-border-soft); border-top: 4px solid var(--mc);
  box-shadow: var(--esp-shadow); animation: esp-rise .5s var(--esp-ease) both; }
.esp-course-card > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.esp-course-card h2 { margin: 2px 0 4px; font-size: 1.2rem; text-transform: var(--title-case, uppercase); font-variant-caps: var(--title-caps, normal); }
.esp-course-card h2 a { color: inherit; text-decoration: none; }
.esp-course-card h2 a:hover { color: var(--c-accent); }
.esp-course-card .intro { margin: 0; color: var(--c-muted); font-size: .92rem; }
.esp-course-bar { margin: 4px 0 10px; max-width: none; }
.esp-course-cta { margin-top: 10px; max-width: 100%; white-space: normal; text-align: left; }
.esp-tree .sec-title a { color: inherit; text-decoration: none; }
.esp-tree .sec-title a:hover { color: var(--c-accent); text-decoration: underline; }
.esp-tree a.page-link { border-radius: 9px; }
.esp-tree a.page-link .esp-chip { margin-left: auto; }
.esp-tree a.page-link.s-done .ic { color: var(--c-success); }
.esp-tree a.page-link.s-started .ic { color: var(--tx-blue); }
.esp-tree a.page-link.s-new .ic { color: var(--tx-green); }
.esp-tree-empty { margin: 0 0 6px 26px; }

/* Une section : sous-sections et pages en cartes, avec l'état de chaque page */
.esp-sec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.esp-sec-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--c-border-soft); background: var(--c-surface);
  box-shadow: var(--esp-shadow); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.esp-sec-card:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border-soft)); box-shadow: var(--esp-shadow-hover); transform: translateY(-1px); }
.esp-sec-card .grow { display: flex; flex-direction: column; min-width: 0; }
.esp-sec-card strong { font-family: var(--font-title); color: var(--c-title); line-height: 1.3; }
.esp-sec-card small { color: var(--c-muted); font-size: .8rem; }
.esp-sec-card > .ic:last-child { color: var(--c-muted); flex: none; }
.esp-sec-card.is-folder .esp-item-ic { background: color-mix(in srgb, var(--c-warning) 13%, var(--c-surface)); color: var(--c-warning); }
.esp-sec-card.s-done .esp-item-ic { background: var(--c-success-soft); color: var(--c-success); }
.esp-sec-progress { display: flex; align-items: center; gap: 10px; }
.esp-sec-progress > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.esp-sec-progress strong { font-family: var(--font-title); color: var(--c-title); }
.esp-sec-progress small { color: var(--c-muted); font-size: .8rem; }

/* ---------- Mon planning ---------- */
.esp-plan { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: var(--esp-gap); align-items: start; }
.esp-plan-side { display: flex; flex-direction: column; gap: var(--esp-gap); }
.esp-plan-side > .card + .card { margin-top: 0; }
.esp-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.esp-cal-head h2 { margin: 0; min-width: 10ch; text-align: center; font-size: 1.3rem; }
.esp-cal-grid { display: flex; flex-direction: column; gap: 4px; }
.esp-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.esp-cal-days span { padding: 4px 0; text-align: center; color: var(--c-muted); font: 700 .78rem/1.2 var(--font-title); }
.esp-cal-days abbr { text-decoration: none; }
.esp-cal-cell { min-width: 0; min-height: 96px; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px; background: var(--c-surface-2); }
.esp-cal-cell.is-weekend { background: color-mix(in srgb, var(--c-surface-2) 50%, var(--c-surface)); }
.esp-cal-cell.is-out { opacity: .45; }
.esp-cal-cell.is-today { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); }
.esp-cal-num { font: 700 .85rem/1.2 var(--font-title); color: var(--c-title); }
.esp-cal-cell.is-today .esp-cal-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
.esp-cal-ev { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 6px; border-radius: 6px; background: var(--mc-soft); color: var(--mc);
  font: 700 .72rem/1.3 var(--font-title); text-decoration: none; }
a.esp-cal-ev:hover { background: var(--mc); color: var(--c-surface); }
.esp-cal-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-cal-ev .ic { flex: none; width: .95em; height: .95em; }
.esp-cal-more { color: var(--c-muted); font-size: .7rem; font-weight: 700; }
.esp-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--c-muted); font-size: .82rem; }
.esp-legend li { display: inline-flex; align-items: center; gap: 5px; }
.esp-legend .ic { color: var(--mc); }
.esp-daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-daylist > li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; }
.esp-daylist-date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: var(--c-surface-2); line-height: 1.1; }
.esp-daylist-date strong { font: 800 1.15rem/1.1 var(--font-title); color: var(--c-title); }
.esp-daylist-date small { color: var(--c-muted); font-size: .7rem; font-weight: 700; }
.esp-daylist-date.is-today { background: var(--c-accent); }
.esp-daylist-date.is-today :is(strong, small) { color: var(--c-accent-ink); }
.esp-daylist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.esp-daylist ul li { display: flex; gap: 8px; align-items: flex-start; }
.esp-daylist ul li > .ic { flex: none; margin-top: 3px; color: var(--mc); }
.esp-daylist ul li > div { display: flex; flex-direction: column; min-width: 0; }
.esp-daylist a, .esp-daylist ul li span { font-weight: 700; color: var(--c-title); text-decoration: none; line-height: 1.3; }
.esp-daylist a:hover { color: var(--c-accent); text-decoration: underline; }
.esp-daylist small { color: var(--c-muted); font-size: .78rem; }

/* ---------- Mon espace ---------- */
.esp-account { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--esp-gap); align-items: start; }
.esp-account-side { position: sticky; top: calc(var(--header-h) + 14px); }
.esp-id { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.esp-id h1 { margin: 6px 0 0; font-size: 1.3rem; text-transform: none; }
.esp-id > p { margin: 0; }
.esp-id-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.esp-account-nav { width: 100%; display: flex; flex-direction: column; gap: 2px; margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); text-align: left; }
.esp-account-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--c-text); text-decoration: none; font-weight: 600; font-size: .93rem; }
.esp-account-nav a .ic { color: var(--c-accent); }
.esp-account-nav a:hover, .esp-account-nav a.is-active { background: var(--c-accent-soft); color: var(--c-accent); }
.esp-id-logout { margin-top: 4px; }
.esp-account-main { display: flex; flex-direction: column; gap: var(--esp-gap); min-width: 0; }
.esp-account-main > .card + .card { margin-top: 0; }
.account-first-login .esp-account-main .account-pw { order: -1; }
.esp-acc-sec { scroll-margin-top: calc(var(--header-h) + 16px); }
.esp-acc-sec > h2 { display: flex; align-items: center; gap: 10px; }
.esp-acc-sec > h2 .ic { color: var(--c-accent); }
.esp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; }
.esp-dl > div { padding: 10px 12px; border-radius: 11px; background: var(--c-surface-2); min-width: 0; }
.esp-dl > div.is-wide { grid-column: 1 / -1; }
.esp-dl dt { color: var(--c-muted); font: 700 .74rem/1.3 var(--font-title); letter-spacing: .05em; text-transform: uppercase; }
.esp-dl dd { margin: 3px 0 0; color: var(--c-title); font-weight: 600; overflow-wrap: anywhere; }
.esp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.esp-facts li > .ic { flex: none; margin-top: 3px; color: var(--c-accent); }
fieldset.esp-fs { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.esp-fs legend { margin-bottom: 8px; padding: 0; color: var(--c-title); font: 700 .98rem/1.3 var(--font-title); }
.esp-fs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.esp-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.esp-choices.is-fonts { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.esp-choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 13px; border: 2px solid var(--c-border-soft); background: var(--c-surface);
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.esp-choice:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border-soft)); }
.esp-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.esp-choice:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent); }
.esp-choice:has(input:focus-visible) { outline: var(--focus-width) solid var(--c-accent); outline-offset: 2px; }
.esp-choice-label { display: flex; align-items: center; gap: 6px; color: var(--c-title); font: 700 .88rem/1.25 var(--font-title); }
.esp-choice.is-font .esp-choice-label { flex-direction: column; align-items: flex-start; gap: 0; }
.esp-choice-label small { color: var(--c-muted); font-weight: 400; font-family: var(--font-text); font-size: .78rem; }
.esp-theme-prev { position: relative; display: block; height: 66px; overflow: hidden; border-radius: 9px; background: var(--p-bg); border: 1px solid var(--p-border); }
.esp-theme-prev .t { position: absolute; left: 9px; top: 6px; z-index: 1; color: var(--p-title); font: 800 1rem/1.2 var(--font-title); font-style: normal; }
.esp-theme-prev .c { position: absolute; left: 9px; right: 32px; bottom: 9px; z-index: 1; height: 20px; border-radius: 6px; background: var(--p-surface); border: 1px solid var(--p-border); }
.esp-theme-prev .b { position: absolute; right: 9px; bottom: 9px; z-index: 1; width: 17px; height: 20px; border-radius: 6px; background: var(--p-accent); }
.esp-theme-prev.is-split::after { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--d-bg); }
.esp-theme-prev.is-split .b { background: var(--d-accent); }
.esp-font-sample { display: block; min-height: 3em; padding: 8px 10px; border-radius: 8px; background: var(--c-surface-2); color: var(--c-text); font-size: .95rem; line-height: 1.45; }
.esp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.esp-pill { position: relative; display: inline-flex; }
.esp-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.esp-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 15px; border-radius: 999px; border: 1.5px solid var(--c-border); background: var(--c-surface);
  color: var(--c-title); font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.esp-pill:hover span { border-color: var(--c-accent); }
.esp-pill input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.esp-pill input:focus-visible + span { outline: var(--focus-width) solid var(--c-accent); outline-offset: 2px; }
.esp-switch { display: flex; margin: 8px 0; }
.esp-form-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--c-border-soft); }
.esp-modlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-modlist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-border-soft); background: var(--c-surface); transition: opacity .2s, background .2s; }
.esp-modlist li.is-off { opacity: .6; background: var(--c-surface-2); }
.esp-modlist label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.esp-modlist label input { width: 19px; height: 19px; margin: 2px 0 0; flex: none; accent-color: var(--c-accent); }
.esp-modlist label > span { display: flex; flex-direction: column; min-width: 0; }
.esp-modlist strong { font-family: var(--font-title); color: var(--c-title); }
.esp-modlist small { color: var(--c-muted); font-size: .82rem; }
.esp-move { display: inline-flex; gap: 2px; }
.esp-modlist li.is-moved { animation: esp-flash .6s ease; }

/* ---------- Pied de page ---------- */
.site-footer.esp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.esp-footer-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.esp-footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); text-decoration: none; }
.esp-footer-links a:hover { color: var(--c-accent); text-decoration: underline; }

/* ---------- Barre d'onglets du téléphone ---------- */
.esp-tabbar { display: none; }

/* ---------- Animations ---------- */
@keyframes esp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes esp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes esp-col { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes esp-ring { from { stroke-dasharray: 0 100; } }
@keyframes esp-flash { 0% { background: var(--c-accent-soft); } 100% { background: var(--c-surface); } }

/* ---------- Préférences de l'élève ---------- */
html.pref-reduce-motion { scroll-behavior: auto; }
html.pref-reduce-motion *, html.pref-reduce-motion *::before, html.pref-reduce-motion *::after { animation: none !important; transition: none !important; }
html.pref-links .site-main a:not(.btn):not(.esp-tab):not(.esp-tabbar-item):not(.esp-course-link):not(.esp-next):not(.page-link):not(.esp-cal-ev),
html.pref-links .esp-tree a.page-link span { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html.front { scroll-behavior: auto; } }

/* ---------- Tablette ---------- */
@media (max-width: 1099.98px) {
  .esp-mod { grid-column: span var(--st, 12); }
  .esp-hero { grid-template-columns: minmax(0, 1fr); }
  .esp-hero-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .esp-plan, .esp-two { grid-template-columns: minmax(0, 1fr); }
  .esp-account { grid-template-columns: 240px minmax(0, 1fr); }
  .esp-rw-hero { grid-template-columns: auto minmax(0, 1fr); }
  .esp-rw-hero .esp-tiles { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .esp-today { display: none; }
  .esp-tab { padding: 0 10px; gap: 6px; }
  /* « Mon compte » : l'icône seule (le nom de l'élève, en haut à droite, mène à la même page) */
  .esp-tabs li.is-end .esp-tab > span:not(.esp-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Discussion de l'élève (fonctionnalité en cours d'ajout) : la barre d'onglets collante prend 54 px à l'écran ;
   la zone des messages raccourcit d'autant, pour que la zone de saisie reste à la même place qu'en 5.5 ---------- */
@media (min-width: 761px) {
  html.front.has-esp-nav #dc-eleve-root .dc-conv { --dc-msgs-h: clamp(440px, calc(100vh - 300px - var(--header-h)), 1200px); }
}
/* Connexion et mot de passe provisoire (sans barre d'onglets) : le cadre centré sous l'en-tête, comme en 5.5 */
html.front:not(.has-esp-nav) .auth-wrap { min-height: calc(100vh - 64px); }
@media (max-width: 760px) { html.front:not(.has-esp-nav) .auth-wrap { min-height: calc(100vh - 58px); } }

/* ---------- Téléphone : onglets en bas de l'écran, une colonne ---------- */
@media (max-width: 760px) {
  html.front, html.front.has-esp-nav { --header-h: 0px; --esp-gap: 14px; }
  .esp-header .inner.esp-top { min-height: 58px; padding: 6px 14px; gap: 10px; }
  .esp-me { padding: 2px; }
  .esp-me-txt, .esp-logout { display: none; }
  .esp-nav { display: none; }
  .esp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 4px 4px env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--c-surface) 96%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--c-border-soft); box-shadow: 0 -6px 20px rgba(20, 32, 60, .08); }
  body.has-esp-nav { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.has-esp-nav .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .esp-tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 0; border: 0; background: none;
    color: var(--c-muted); font: 700 .68rem/1.1 var(--font-title); text-decoration: none; cursor: pointer; }
  .esp-tabbar-ic { position: relative; display: inline-flex; padding: 5px 16px; border-radius: 999px; transition: background .2s; }
  .esp-tabbar-ic .ic { width: 22px; height: 22px; }
  .esp-tabbar-item.is-active { color: var(--c-accent); }
  .esp-tabbar-item.is-active .esp-tabbar-ic { background: var(--c-accent-soft); }
  .esp-tabbar .esp-dot { top: -2px; right: 6px; }
  .menu-pop.esp-more { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; padding: 8px; border-radius: 16px; }
  .menu-pop.esp-more a { padding: 12px; font-size: 1rem; }
  .menu-pop.esp-more a.is-active { background: var(--c-accent-soft); color: var(--c-accent); }
  .menu-pop.esp-more .esp-count { margin-left: auto; }
  .menu-pop.esp-bell-pop { position: fixed; left: 8px; right: 8px; top: 62px; width: auto; }
  .esp-hero { padding: 20px 18px; border-radius: 16px; }
  .esp-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esp-hero-stats strong { font-size: 1.3rem; }
  .esp-grid { grid-template-columns: minmax(0, 1fr); }
  .esp-mod { grid-column: 1 / -1; }
  .esp-mod-head { padding: 16px 14px 8px; }
  .esp-mod-body { padding: 4px 14px 14px; }
  .esp-item { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .esp-item-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .esp-item-ic { width: 34px; height: 34px; }
  .esp-course-grid { grid-template-columns: minmax(0, 1fr); }
  .esp-cal-cell { min-height: 54px; padding: 4px; gap: 2px; }
  .esp-cal-ev { justify-content: center; padding: 3px 2px; }
  .esp-cal-ev span { display: none; }
  .esp-cal-days abbr { font-size: .72rem; }
  .esp-account { grid-template-columns: minmax(0, 1fr); }
  .esp-account-side { position: static; }
  .esp-account-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; }
  .esp-account-nav a { flex: none; padding: 8px 12px; border: 1px solid var(--c-border-soft); border-radius: 999px; font-size: .86rem; }
  .esp-rw-hero { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .esp-rw-hero-main .esp-bar { margin: 0 auto; }
  .esp-page-head .esp-search { width: 100%; }
  .site-footer.esp-footer { padding-bottom: 20px; }
  .esp-crumbs [aria-current="page"] > span { max-width: 26ch; }
}
@media (min-width: 761px) { .esp-tabbar, .esp-more { display: none !important; } }

/* ---------- Impression ---------- */
@media print {
  .esp-nav, .esp-tabbar, .esp-bell, .esp-top-actions, .esp-crumbs, .esp-seg, .esp-tip-next, .esp-footer-links { display: none !important; }
  .esp-mod, .esp-course-card, .esp-item { box-shadow: none; animation: none; break-inside: avoid; }
  body.has-esp-nav { padding-bottom: 0; }
}